From e8350decd0c57d0fa64ffdee692d9cc180bf0c4e Mon Sep 17 00:00:00 2001
From: Evan Johnson <esj254@nyu.edu>
Date: Thu, 27 Jun 2024 12:24:53 -0400
Subject: [PATCH 1/5] Add affordance to icon selector in docs

---
 .../src/examples/core-examples/common/iconSelect.tsx  |  4 +---
 packages/select/src/components/select/select.tsx      | 11 ++++++++++-
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/docs-app/src/examples/core-examples/common/iconSelect.tsx b/packages/docs-app/src/examples/core-examples/common/iconSelect.tsx
index f3a85800bb..22d18a6b7e 100644
--- a/packages/docs-app/src/examples/core-examples/common/iconSelect.tsx
+++ b/packages/docs-app/src/examples/core-examples/common/iconSelect.tsx
@@ -43,6 +43,7 @@ export class IconSelect extends React.PureComponent<IconSelectProps> {
                     itemPredicate={this.filterIconName}
                     itemRenderer={this.renderIconItem}
                     noResults={<MenuItem disabled={true} text="No results" />}
+                    placeholder="Start typing to search…"
                     onItemSelect={this.handleIconChange}
                     popoverProps={{ minimal: true }}
                 >
@@ -77,9 +78,6 @@ export class IconSelect extends React.PureComponent<IconSelectProps> {
     };
 
     private filterIconName = (query: string, iconName: IconName | typeof NONE) => {
-        if (iconName === NONE) {
-            return true;
-        }
         if (query === "") {
             return iconName === this.props.iconName;
         }
diff --git a/packages/select/src/components/select/select.tsx b/packages/select/src/components/select/select.tsx
index a39b4330b8..12504cfdf6 100644
--- a/packages/select/src/components/select/select.tsx
+++ b/packages/select/src/components/select/select.tsx
@@ -81,6 +81,14 @@ export interface SelectProps<T> extends ListItemsProps<T>, SelectPopoverProps {
      */
     menuProps?: React.HTMLAttributes<HTMLUListElement>;
 
+    /**
+     * A placeholder string passed to the filter text input.
+     * Applicable only when `filterable` is `true`.
+     *
+     * @default "Filter..."
+     */
+    placeholder?: string;
+
     /**
      * Whether the active item should be reset to the first matching item _when
      * the popover closes_. The query will also be reset to the empty string.
@@ -159,6 +167,7 @@ export class Select<T> extends AbstractPureComponent<SelectProps<T>, SelectState
             filterable = true,
             disabled = false,
             inputProps = {},
+            placeholder = "Filter...",
             popoverContentProps = {},
             popoverProps = {},
             popoverRef,
@@ -168,7 +177,7 @@ export class Select<T> extends AbstractPureComponent<SelectProps<T>, SelectState
             <InputGroup
                 aria-autocomplete="list"
                 leftIcon={<Search />}
-                placeholder="Filter..."
+                placeholder={placeholder}
                 rightElement={this.maybeRenderClearButton(listProps.query)}
                 {...inputProps}
                 inputRef={this.handleInputRef}

From 86dc3fc04bb5b8781590666a13839320d8d0f8ea Mon Sep 17 00:00:00 2001
From: Evan Johnson <esj254@nyu.edu>
Date: Thu, 27 Jun 2024 15:01:15 -0400
Subject: [PATCH 2/5] fix selection state

---
 packages/core/src/components/menu/menuItem.tsx             | 7 +++----
 .../src/examples/core-examples/common/iconSelect.tsx       | 4 +++-
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/core/src/components/menu/menuItem.tsx b/packages/core/src/components/menu/menuItem.tsx
index 89c842c64a..4e60147fa3 100644
--- a/packages/core/src/components/menu/menuItem.tsx
+++ b/packages/core/src/components/menu/menuItem.tsx
@@ -127,10 +127,9 @@ export interface MenuItemProps
     popoverProps?: Partial<Omit<PopoverProps, "content" | "minimal">>;
 
     /**
-     * Whether this item should appear selected.
-     * Defining this  will set the `aria-selected` attribute and apply a
-     * "check" or "blank" icon on the item (unless the `icon` prop is set,
-     * which always takes precedence).
+     * Whether this item should appear selected - `roleStructure` must be `"listoption"` for this to be
+     * applied. Defining this will set the `aria-selected` attribute and apply a small tick icon if `true`,
+     * and space for a small tick icon if `false`.
      *
      * @default undefined
      */
diff --git a/packages/docs-app/src/examples/core-examples/common/iconSelect.tsx b/packages/docs-app/src/examples/core-examples/common/iconSelect.tsx
index 22d18a6b7e..9b7a6a6eba 100644
--- a/packages/docs-app/src/examples/core-examples/common/iconSelect.tsx
+++ b/packages/docs-app/src/examples/core-examples/common/iconSelect.tsx
@@ -67,7 +67,9 @@ export class IconSelect extends React.PureComponent<IconSelectProps> {
         }
         return (
             <MenuItem
-                selected={modifiers.active}
+                roleStructure="listoption"
+                active={modifiers.active}
+                selected={this.props.iconName === icon}
                 icon={icon === NONE ? undefined : icon}
                 key={icon}
                 onClick={handleClick}

From 60bd33581c686157fa9717ce09f4c0ed090edd48 Mon Sep 17 00:00:00 2001
From: Evan Johnson <esj254@nyu.edu>
Date: Thu, 27 Jun 2024 15:16:56 -0400
Subject: [PATCH 3/5] more correct

---
 packages/core/src/components/menu/menuItem.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/components/menu/menuItem.tsx b/packages/core/src/components/menu/menuItem.tsx
index 4e60147fa3..05f40c5948 100644
--- a/packages/core/src/components/menu/menuItem.tsx
+++ b/packages/core/src/components/menu/menuItem.tsx
@@ -129,7 +129,7 @@ export interface MenuItemProps
     /**
      * Whether this item should appear selected - `roleStructure` must be `"listoption"` for this to be
      * applied. Defining this will set the `aria-selected` attribute and apply a small tick icon if `true`,
-     * and space for a small tick icon if `false`.
+     * and empty space for a small tick icon if `false` or `undefined`.
      *
      * @default undefined
      */

From 06d5dd125b82dfea477164348bc88a155908099f Mon Sep 17 00:00:00 2001
From: Evan Johnson <esj254@nyu.edu>
Date: Fri, 28 Jun 2024 14:03:07 -0400
Subject: [PATCH 4/5] allow deselecting

---
 .../src/examples/core-examples/common/iconNames.ts  |  2 +-
 .../examples/core-examples/common/iconSelect.tsx    | 13 ++++++++++---
 packages/docs-app/src/styles/_examples.scss         |  4 ++++
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/packages/docs-app/src/examples/core-examples/common/iconNames.ts b/packages/docs-app/src/examples/core-examples/common/iconNames.ts
index 314dcde476..22079ce418 100644
--- a/packages/docs-app/src/examples/core-examples/common/iconNames.ts
+++ b/packages/docs-app/src/examples/core-examples/common/iconNames.ts
@@ -16,7 +16,7 @@
 
 import { type IconName, IconNames } from "@blueprintjs/icons";
 
-export const NONE = "(none)";
+export const NONE = "None";
 export type IconNameOrNone = IconName | typeof NONE;
 
 export function getIconNames(): IconNameOrNone[] {
diff --git a/packages/docs-app/src/examples/core-examples/common/iconSelect.tsx b/packages/docs-app/src/examples/core-examples/common/iconSelect.tsx
index 9b7a6a6eba..7b04f0b788 100644
--- a/packages/docs-app/src/examples/core-examples/common/iconSelect.tsx
+++ b/packages/docs-app/src/examples/core-examples/common/iconSelect.tsx
@@ -35,7 +35,7 @@ export class IconSelect extends React.PureComponent<IconSelectProps> {
     public render() {
         const { disabled, iconName } = this.props;
         return (
-            <label className={classNames(Classes.LABEL, { [Classes.DISABLED]: disabled })}>
+            <label className={classNames("icon-select", Classes.LABEL, { [Classes.DISABLED]: disabled })}>
                 Icon
                 <Select<IconNameOrNone>
                     disabled={disabled}
@@ -49,7 +49,7 @@ export class IconSelect extends React.PureComponent<IconSelectProps> {
                 >
                     <Button
                         alignText={Alignment.LEFT}
-                        className={Classes.TEXT_OVERFLOW_ELLIPSIS}
+                        textClassName={Classes.TEXT_OVERFLOW_ELLIPSIS}
                         disabled={disabled}
                         fill={true}
                         icon={iconName}
@@ -86,5 +86,12 @@ export class IconSelect extends React.PureComponent<IconSelectProps> {
         return iconName.toLowerCase().indexOf(query.toLowerCase()) >= 0;
     };
 
-    private handleIconChange = (icon: IconNameOrNone) => this.props.onChange(icon === NONE ? undefined : icon);
+    private handleIconChange = (icon: IconNameOrNone) => {
+        if (icon === this.props.iconName) {
+            this.props.onChange(undefined);
+            return;
+        }
+
+        this.props.onChange(icon === NONE ? undefined : icon);
+    };
 }
diff --git a/packages/docs-app/src/styles/_examples.scss b/packages/docs-app/src/styles/_examples.scss
index 0f3a35f1ab..ba5cbbd808 100644
--- a/packages/docs-app/src/styles/_examples.scss
+++ b/packages/docs-app/src/styles/_examples.scss
@@ -683,6 +683,10 @@ $docs-hotkey-piano-height: 510px;
   flex-direction: row;
 }
 
+.icon-select {
+  width: 170px;
+}
+
 //
 // DATETIME2
 //

From 8514c6c63d8321f8717b3fc90f35da91359bfc9b Mon Sep 17 00:00:00 2001
From: Evan Johnson <esj254@nyu.edu>
Date: Fri, 28 Jun 2024 14:03:13 -0400
Subject: [PATCH 5/5] cleanup none

---
 .../core-examples/common/iconNames.ts         |  8 ++-----
 .../core-examples/common/iconSelect.tsx       | 21 +++++++------------
 2 files changed, 10 insertions(+), 19 deletions(-)

diff --git a/packages/docs-app/src/examples/core-examples/common/iconNames.ts b/packages/docs-app/src/examples/core-examples/common/iconNames.ts
index 22079ce418..87e3e7bda8 100644
--- a/packages/docs-app/src/examples/core-examples/common/iconNames.ts
+++ b/packages/docs-app/src/examples/core-examples/common/iconNames.ts
@@ -16,14 +16,10 @@
 
 import { type IconName, IconNames } from "@blueprintjs/icons";
 
-export const NONE = "None";
-export type IconNameOrNone = IconName | typeof NONE;
-
-export function getIconNames(): IconNameOrNone[] {
-    const iconNames = new Set<IconNameOrNone>();
+export function getIconNames(): IconName[] {
+    const iconNames = new Set<IconName>();
     for (const [, name] of Object.entries(IconNames)) {
         iconNames.add(name);
     }
-    iconNames.add(NONE);
     return Array.from(iconNames.values());
 }
diff --git a/packages/docs-app/src/examples/core-examples/common/iconSelect.tsx b/packages/docs-app/src/examples/core-examples/common/iconSelect.tsx
index 7b04f0b788..94b63d52fa 100644
--- a/packages/docs-app/src/examples/core-examples/common/iconSelect.tsx
+++ b/packages/docs-app/src/examples/core-examples/common/iconSelect.tsx
@@ -21,7 +21,7 @@ import { Alignment, Button, Classes, MenuItem } from "@blueprintjs/core";
 import type { IconName } from "@blueprintjs/icons";
 import { type ItemRenderer, Select } from "@blueprintjs/select";
 
-import { getIconNames, type IconNameOrNone, NONE } from "./iconNames";
+import { getIconNames } from "./iconNames";
 
 const ICON_NAMES = getIconNames();
 
@@ -37,7 +37,7 @@ export class IconSelect extends React.PureComponent<IconSelectProps> {
         return (
             <label className={classNames("icon-select", Classes.LABEL, { [Classes.DISABLED]: disabled })}>
                 Icon
-                <Select<IconNameOrNone>
+                <Select<IconName>
                     disabled={disabled}
                     items={ICON_NAMES}
                     itemPredicate={this.filterIconName}
@@ -53,7 +53,7 @@ export class IconSelect extends React.PureComponent<IconSelectProps> {
                         disabled={disabled}
                         fill={true}
                         icon={iconName}
-                        text={iconName || NONE}
+                        text={iconName || "None"}
                         rightIcon="caret-down"
                     />
                 </Select>
@@ -61,7 +61,7 @@ export class IconSelect extends React.PureComponent<IconSelectProps> {
         );
     }
 
-    private renderIconItem: ItemRenderer<IconName | typeof NONE> = (icon, { handleClick, handleFocus, modifiers }) => {
+    private renderIconItem: ItemRenderer<IconName | undefined> = (icon, { handleClick, handleFocus, modifiers }) => {
         if (!modifiers.matchesPredicate) {
             return null;
         }
@@ -70,7 +70,7 @@ export class IconSelect extends React.PureComponent<IconSelectProps> {
                 roleStructure="listoption"
                 active={modifiers.active}
                 selected={this.props.iconName === icon}
-                icon={icon === NONE ? undefined : icon}
+                icon={icon}
                 key={icon}
                 onClick={handleClick}
                 onFocus={handleFocus}
@@ -79,19 +79,14 @@ export class IconSelect extends React.PureComponent<IconSelectProps> {
         );
     };
 
-    private filterIconName = (query: string, iconName: IconName | typeof NONE) => {
+    private filterIconName = (query: string, iconName: IconName | undefined) => {
         if (query === "") {
             return iconName === this.props.iconName;
         }
         return iconName.toLowerCase().indexOf(query.toLowerCase()) >= 0;
     };
 
-    private handleIconChange = (icon: IconNameOrNone) => {
-        if (icon === this.props.iconName) {
-            this.props.onChange(undefined);
-            return;
-        }
-
-        this.props.onChange(icon === NONE ? undefined : icon);
+    private handleIconChange = (icon: IconName) => {
+        this.props.onChange(icon === this.props.iconName ? undefined : icon);
     };
 }