[WIP] Dropdown component

packages/docs-app/src/examples/core-examples/calloutPlaygroundExample.tsx

@@ -14,11 +14,13 @@
  * limitations under the License.
  */
 
+import { range } from "lodash";
 import * as React from "react";
 
-import { Button, Callout, Code, H5, HTMLSelect, type Intent, Label, Switch } from "@blueprintjs/core";
-import { type DocsExampleProps, Example, handleBooleanChange, handleNumberChange } from "@blueprintjs/docs-theme";
+import { Button, Callout, Code, H5, type Intent, Label, Switch } from "@blueprintjs/core";
+import { type DocsExampleProps, Example, handleBooleanChange } from "@blueprintjs/docs-theme";
 import type { IconName } from "@blueprintjs/icons";
+import { Dropdown } from "@blueprintjs/select";
 
 import { IconSelect } from "./common/iconSelect";
 import { IntentSelect } from "./common/intentSelect";
@@ -42,13 +44,14 @@ export const CalloutPlaygroundExample: React.FC<DocsExampleProps> = props => {
             <H5>Children</H5>
             <Label>
                 Example content
-                <HTMLSelect value={contentIndex} onChange={handleNumberChange(setContentIndex)}>
-                    {EXAMPLE_CONTENT_OPTIONS.map((opt, i) => (
-                        <option key={i} value={i}>
-                            {opt.label}
-                        </option>
-                    ))}
-                </HTMLSelect>
+                <Dropdown
+                    buttonProps={{ style: { minWidth: 175 } }}
+                    fill={true}
+                    itemLabel={index => EXAMPLE_CONTENT_OPTIONS[index].label}
+                    items={range(0, EXAMPLE_CONTENT_OPTIONS.length)}
+                    onItemSelect={setContentIndex}
+                    selectedItem={contentIndex}
+                />
             </Label>
         </>
     );

packages/docs-app/src/examples/core-examples/common/intentSelect.tsx

@@ -14,18 +14,13 @@
  * limitations under the License.
  */
 
+import { capitalize } from "lodash";
 import * as React from "react";
 
-import { Button, ControlGroup, FormGroup, HTMLSelect, Intent } from "@blueprintjs/core";
-import { handleValueChange } from "@blueprintjs/docs-theme";
+import { Button, ButtonGroup, FormGroup, Intent } from "@blueprintjs/core";
+import { Dropdown } from "@blueprintjs/select";
 
-const INTENTS = [
-    { label: "None", value: Intent.NONE },
-    { label: "Primary", value: Intent.PRIMARY },
-    { label: "Success", value: Intent.SUCCESS },
-    { label: "Warning", value: Intent.WARNING },
-    { label: "Danger", value: Intent.DANGER },
-];
+const INTENTS: Intent[] = [Intent.NONE, Intent.PRIMARY, Intent.SUCCESS, Intent.WARNING, Intent.DANGER];
 
 export interface IntentSelectProps {
     intent: Intent;
@@ -35,17 +30,27 @@ export interface IntentSelectProps {
     showClearButton?: boolean;
 }
 
-export const IntentSelect: React.FC<IntentSelectProps> = ({ label = "Intent", intent, showClearButton, onChange }) => {
-    const handleChange = handleValueChange(onChange);
+export const IntentSelect: React.FC<IntentSelectProps> = ({
+    label = "Intent",
+    intent = "none",
+    showClearButton,
+    onChange,
+}) => {
     const handleClear = React.useCallback(() => onChange("none"), [onChange]);
     return (
         <FormGroup label={label}>
-            <ControlGroup>
-                <HTMLSelect value={intent} onChange={handleChange} options={INTENTS} fill={true} />
+            <ButtonGroup fill={true}>
+                <Dropdown
+                    fill={true}
+                    items={INTENTS}
+                    itemLabel={capitalize}
+                    onItemSelect={onChange}
+                    selectedItem={intent}
+                />
                 {showClearButton && (
                     <Button aria-label="Clear" disabled={intent === "none"} icon="cross" onClick={handleClear} />
                 )}
-            </ControlGroup>
+            </ButtonGroup>
         </FormGroup>
     );
 };

packages/docs-app/src/examples/core-examples/common/variantSelect.tsx

@@ -2,32 +2,35 @@
  * (c) Copyright 2025 Palantir Technologies Inc. All rights reserved.
  */
 
+import { capitalize } from "lodash";
 import * as React from "react";
 
-import { type ButtonVariant, ControlGroup, FormGroup, HTMLSelect } from "@blueprintjs/core";
-import { handleValueChange } from "@blueprintjs/docs-theme";
+import { type ButtonVariant, FormGroup } from "@blueprintjs/core";
+import { Dropdown } from "@blueprintjs/select";
 
 export interface VariantSelectProps {
     label?: React.ReactNode;
     onChange: (variant: ButtonVariant) => void;
     variant: ButtonVariant;
 }
 
-interface Option {
-    label: string;
-    value: ButtonVariant;
-}
+/* eslint-disable sort-keys */
+const VARIANTS_RECORD: Record<ButtonVariant, true> = {
+    solid: true,
+    minimal: true,
+    outlined: true,
+};
 
-const options: Option[] = [
-    { label: "Solid", value: "solid" },
-    { label: "Minimal", value: "minimal" },
-    { label: "Outlined", value: "outlined" },
-];
+const VARIANTS = Object.keys(VARIANTS_RECORD) as ButtonVariant[];
 
 export const VariantSelect: React.FC<VariantSelectProps> = ({ label = "Variant", onChange, variant }) => (
     <FormGroup label={label}>
-        <ControlGroup>
-            <HTMLSelect fill={true} onChange={handleValueChange(onChange)} options={options} value={variant} />
-        </ControlGroup>
+        <Dropdown<ButtonVariant>
+            fill={true}
+            itemLabel={capitalize}
+            items={VARIANTS}
+            onItemSelect={onChange}
+            selectedItem={variant}
+        />
     </FormGroup>
 );

packages/docs-app/src/examples/core-examples/controlGroupExample.tsx

@@ -16,14 +16,16 @@
 
 import * as React from "react";
 
-import { Button, ControlGroup, HTMLSelect, InputGroup, Switch } from "@blueprintjs/core";
+import { Button, ControlGroup, InputGroup, Switch } from "@blueprintjs/core";
 import { Example, type ExampleProps, handleBooleanChange } from "@blueprintjs/docs-theme";
+import { Dropdown } from "@blueprintjs/select";
 
 const FILTER_OPTIONS = ["Filter", "Name - ascending", "Name - descending", "Price - ascending", "Price - descending"];
 
 export const ControlGroupExample: React.FC<ExampleProps> = props => {
     const [fill, setFill] = React.useState(false);
     const [vertical, setVertical] = React.useState(false);
+    const [filterOption, setFilterOption] = React.useState(FILTER_OPTIONS[0]);
 
     const options = (
         <>
@@ -35,7 +37,13 @@ export const ControlGroupExample: React.FC<ExampleProps> = props => {
     return (
         <Example options={options} {...props}>
             <ControlGroup fill={fill} vertical={vertical}>
-                <HTMLSelect options={FILTER_OPTIONS} />
+                <Dropdown
+                    buttonProps={{ style: { minWidth: 170 } }}
+                    items={FILTER_OPTIONS}
+                    onItemSelect={setFilterOption}
+                    popoverProps={{ matchTargetWidth: fill }}
+                    selectedItem={filterOption}
+                />
                 <InputGroup placeholder="Find filters..." />
                 <Button icon="arrow-right" />
             </ControlGroup>

packages/docs-app/src/examples/core-examples/drawerExample.tsx

@@ -26,15 +26,14 @@ import {
     DrawerSize,
     FormGroup,
     H5,
-    HTMLSelect,
     Menu,
     MenuItem,
-    type OptionProps,
     Position,
     SegmentedControl,
     Switch,
 } from "@blueprintjs/core";
-import { Example, type ExampleProps, handleBooleanChange, handleStringChange } from "@blueprintjs/docs-theme";
+import { Example, type ExampleProps, handleBooleanChange } from "@blueprintjs/docs-theme";
+import { Dropdown } from "@blueprintjs/select";
 
 import type { BlueprintExampleData } from "../../tags/types";
 
@@ -58,7 +57,7 @@ export class DrawerExample extends React.PureComponent<ExampleProps<BlueprintExa
         hasBackdrop: true,
         isOpen: false,
         position: Position.RIGHT,
-        size: undefined,
+        size: DrawerSize.STANDARD,
         usePortal: true,
     };
 
@@ -76,7 +75,7 @@ export class DrawerExample extends React.PureComponent<ExampleProps<BlueprintExa
 
     private handleOutsideClickChange = handleBooleanChange(val => this.setState({ canOutsideClickClose: val }));
 
-    private handleSizeChange = handleStringChange(size => this.setState({ size }));
+    private handleSizeChange = (size: string) => this.setState({ size });
 
     public render() {
         const { size, ...drawerProps } = this.state;
@@ -89,7 +88,7 @@ export class DrawerExample extends React.PureComponent<ExampleProps<BlueprintExa
                     icon="info-sign"
                     onClose={this.handleClose}
                     title="Palantir Foundry"
-                    size={size === "default" ? undefined : size}
+                    size={size}
                     {...drawerProps}
                 >
                     <div className={Classes.DRAWER_BODY}>
@@ -141,8 +140,16 @@ export class DrawerExample extends React.PureComponent<ExampleProps<BlueprintExa
     }
 
     private renderOptions() {
-        const { autoFocus, enforceFocus, canEscapeKeyClose, canOutsideClickClose, hasBackdrop, position, usePortal } =
-            this.state;
+        const {
+            autoFocus,
+            enforceFocus,
+            canEscapeKeyClose,
+            canOutsideClickClose,
+            hasBackdrop,
+            position,
+            size,
+            usePortal,
+        } = this.state;
         return (
             <>
                 <H5>Props</H5>
@@ -161,7 +168,13 @@ export class DrawerExample extends React.PureComponent<ExampleProps<BlueprintExa
                     />
                 </FormGroup>
                 <FormGroup label="Size">
-                    <HTMLSelect options={SIZES} onChange={this.handleSizeChange} />
+                    <Dropdown
+                        fill={true}
+                        itemLabel={getDrawerSizeLabel}
+                        items={[DrawerSize.SMALL, DrawerSize.STANDARD, DrawerSize.LARGE, "72%", "560px"]}
+                        onItemSelect={this.handleSizeChange}
+                        selectedItem={size}
+                    />
                 </FormGroup>
                 <Divider />
                 <Switch checked={autoFocus} label="Auto focus" onChange={this.handleAutoFocusChange} />
@@ -185,11 +198,15 @@ export class DrawerExample extends React.PureComponent<ExampleProps<BlueprintExa
     private handleClose = () => this.setState({ isOpen: false });
 }
 
-const SIZES: Array<string | OptionProps> = [
-    { label: "Default", value: "default" },
-    { label: "Small", value: DrawerSize.SMALL },
-    { label: "Standard", value: DrawerSize.STANDARD },
-    { label: "Large", value: DrawerSize.LARGE },
-    "72%",
-    "560px",
-];
+function getDrawerSizeLabel(size: string): string {
+    switch (size) {
+        case DrawerSize.SMALL:
+            return "Small";
+        case DrawerSize.STANDARD:
+            return "Standard";
+        case DrawerSize.LARGE:
+            return "Large";
+        default:
+            return size;
+    }
+}

packages/docs-app/src/examples/core-examples/entityTitleExample.tsx

@@ -26,20 +26,20 @@ import {
     H4,
     H5,
     H6,
-    HTMLSelect,
     Intent,
     Switch,
     Tag,
     Text,
 } from "@blueprintjs/core";
 import { Example, type ExampleProps, handleBooleanChange } from "@blueprintjs/docs-theme";
 import { IconNames } from "@blueprintjs/icons";
+import { Dropdown } from "@blueprintjs/select";
 
 // Limit width to display ellipsizing behavior.
 const WIDTH_LIMIT = 200;
 
 // Headings selector.
-const HEADINGS = ["Default", "H1", "H2", "H3", "H4", "H5", "H6"].map(value => ({ label: value, value }));
+const HEADINGS = ["Default", "H1", "H2", "H3", "H4", "H5", "H6"];
 
 export const EntityTitleExample: React.FC<ExampleProps> = props => {
     const [ellipsize, setEllipsize] = React.useState<boolean>(false);
@@ -50,16 +50,12 @@ export const EntityTitleExample: React.FC<ExampleProps> = props => {
     const [withSubtitle, setWithSubtitle] = React.useState<boolean>(false);
     const [withTag, setWithTag] = React.useState<boolean>(false);
 
-    const handleHeadingChange = (event: React.FormEvent<HTMLSelectElement>) => {
-        setHeading(event.currentTarget.value);
-    };
-
     const options = (
         <>
             <H5>Props</H5>
             <FormGroup label="Heading">
                 <ControlGroup>
-                    <HTMLSelect value={heading} onChange={handleHeadingChange} options={HEADINGS} fill={true} />
+                    <Dropdown fill={true} items={HEADINGS} onItemSelect={setHeading} selectedItem={heading} />
                 </ControlGroup>
             </FormGroup>
             <Switch checked={ellipsize} label="Ellipsize" onChange={handleBooleanChange(setEllipsize)} />

packages/docs-app/src/examples/core-examples/htmlSelectExample.tsx

@@ -17,25 +17,24 @@
 import * as React from "react";
 
 import { Divider, FormGroup, H5, HTMLSelect, type HTMLSelectIconName, Switch } from "@blueprintjs/core";
-import { Example, type ExampleProps, handleBooleanChange, handleStringChange } from "@blueprintjs/docs-theme";
+import { Example, type ExampleProps, handleBooleanChange } from "@blueprintjs/docs-theme";
+import { Dropdown } from "@blueprintjs/select";
 
 export interface HTMLSelectExampleState {
     disabled: boolean;
     fill: boolean;
-    iconName?: "double-caret-vertical" | "caret-down";
+    iconName: "double-caret-vertical" | "caret-down";
     large: boolean;
     minimal: boolean;
 }
 
-const SUPPORTED_ICON_NAMES: HTMLSelectIconName[] = ["double-caret-vertical", "caret-down"];
-
 const SELECT_OPTIONS = ["One", "Two", "Three", "Four"];
 
 export class HTMLSelectExample extends React.PureComponent<ExampleProps, HTMLSelectExampleState> {
     public state: HTMLSelectExampleState = {
         disabled: false,
         fill: false,
-        iconName: undefined, // use component default
+        iconName: "double-caret-vertical",
         large: false,
         minimal: false,
     };
@@ -44,9 +43,7 @@ export class HTMLSelectExample extends React.PureComponent<ExampleProps, HTMLSel
 
     private handleFillChange = handleBooleanChange(fill => this.setState({ fill }));
 
-    private handleIconChange = handleStringChange(iconName =>
-        this.setState({ iconName: iconName as HTMLSelectIconName }),
-    );
+    private handleIconChange = (iconName: HTMLSelectIconName) => this.setState({ iconName });
 
     private handleLargeChange = handleBooleanChange(large => this.setState({ large }));
 
@@ -62,10 +59,12 @@ export class HTMLSelectExample extends React.PureComponent<ExampleProps, HTMLSel
                 <Switch checked={this.state.disabled} label="Disabled" onChange={this.handleDisabledChange} />
                 <Divider />
                 <FormGroup label="Icon">
-                    <HTMLSelect
-                        placeholder="Choose an item..."
-                        options={SUPPORTED_ICON_NAMES}
-                        onChange={this.handleIconChange}
+                    <Dropdown<HTMLSelectIconName>
+                        buttonProps={{ style: { minWidth: 185 } }}
+                        fill={true}
+                        items={["double-caret-vertical", "caret-down"]}
+                        onItemSelect={this.handleIconChange}
+                        selectedItem={this.state.iconName}
                     />
                 </FormGroup>
             </>