@sipesistemas/polaris 1.2.4 → 1.3.0

package/build/cjs/components/ActionList/ActionList.js

@@ -52,7 +52,7 @@ function ActionList({
       actionRole: actionRole,
       onActionAnyItem: onActionAnyItem,
       isFirst: index === 0
-    }, typeof section.title === 'string' ? section.title : index) : null;
+    }, typeof section.title === 'string' && section.title ? section.title : index) : null;
   });
   const handleFocusPreviousItem = evt => {
     evt.preventDefault();

package/build/cjs/components/Filters/components/FiltersBar/FiltersBar.js

@@ -75,11 +75,17 @@ function FiltersBar({
       togglePopoverActive();
     }, 0);
   };
-  const filterToActionItem = filter => ({
-    ...filter,
-    content: filter.label,
-    onAction: onFilterClick(filter)
-  });
+  const filterToActionItem = filter => {
+    const {
+      key: _filterKey,
+      ...rest
+    } = filter;
+    return {
+      ...rest,
+      content: filter.label,
+      onAction: onFilterClick(filter)
+    };
+  };
   const unpinnedFilters = filters.filter(filter => !pinnedFilters.some(({
     key
   }) => key === filter.key));

package/build/cjs/components/Pagination/Pagination.js

@@ -29,15 +29,18 @@ function Pagination({
   accessibilityLabel,
   accessibilityLabels,
   label,
-  type = 'page'
+  type = 'page',
+  direction = 'horizontal'
 }) {
   const i18n = hooks.useI18n();
   const node = /*#__PURE__*/react.createRef();
   const navLabel = accessibilityLabel || i18n.translate('Polaris.Pagination.pagination');
   const previousLabel = accessibilityLabels?.previous || i18n.translate('Polaris.Pagination.previous');
   const nextLabel = accessibilityLabels?.next || i18n.translate('Polaris.Pagination.next');
+  const previousIcon = direction === 'vertical' ? polarisIcons.ChevronUpIcon : polarisIcons.ChevronLeftIcon;
+  const nextIcon = direction === 'vertical' ? polarisIcons.ChevronDownIcon : polarisIcons.ChevronRightIcon;
   const prev = /*#__PURE__*/jsxRuntime.jsx(Button.Button, {
-    icon: polarisIcons.ChevronLeftIcon,
+    icon: previousIcon,
     accessibilityLabel: previousLabel,
     url: previousURL,
     onClick: onPrevious,
@@ -51,7 +54,7 @@ function Pagination({
     children: prev
   }) : prev;
   const next = /*#__PURE__*/jsxRuntime.jsx(Button.Button, {
-    icon: polarisIcons.ChevronRightIcon,
+    icon: nextIcon,
     accessibilityLabel: nextLabel,
     url: nextURL,
     onClick: onNext,

package/build/cjs/components/SearchableSelect/SearchableSelect.css.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {
+  "Activator": "Polaris-SearchableSelect__Activator"
+};
+
+exports.default = styles;

package/build/cjs/components/SearchableSelect/SearchableSelect.js

@@ -0,0 +1,243 @@
+'use strict';
+
+var polarisIcons = require('@shopify/polaris-icons');
+var react = require('react');
+var SearchableSelect_module = require('./SearchableSelect.css.js');
+var jsxRuntime = require('react/jsx-runtime');
+var hooks = require('../../utilities/i18n/hooks.js');
+var TextField = require('../TextField/TextField.js');
+var Icon = require('../Icon/Icon.js');
+var Listbox = require('../Listbox/Listbox.js');
+var EmptySearchResult = require('../EmptySearchResult/EmptySearchResult.js');
+var Popover = require('../Popover/Popover.js');
+var Box = require('../Box/Box.js');
+var Scrollable = require('../Scrollable/Scrollable.js');
+
+function getValueByPath(obj, path) {
+  return path.split('.').reduce((acc, part) => acc?.[part], obj);
+}
+const SCROLLABLE_HEIGHT = 292;
+function SearchableSelect({
+  loading,
+  loadingMore,
+  options,
+  selected,
+  onSelect,
+  emptyStateTitle = '',
+  emptyStateDescription,
+  onQueryChange,
+  selectedLabelKey,
+  label,
+  placeholder,
+  disabled,
+  requiredIndicator,
+  helpText,
+  error,
+  pinSelected = true,
+  allowClear,
+  onScrolledToBottom
+}) {
+  const i18n = hooks.useI18n();
+  const [query, setQuery] = react.useState('');
+  const [popoverActive, setPopoverActive] = react.useState(false);
+  const [activeOptionId, setActiveOptionId] = react.useState();
+  // pagination/search can drop the selected option from `options`; the cache keeps its label visible
+  const [cachedSelection, setCachedSelection] = react.useState(null);
+  // clicking the clear button bubbles to TextField's container, which focuses the input
+  const skipNextFocusOpen = react.useRef(false);
+  const listboxId = react.useId();
+  const togglePopoverActive = react.useCallback(() => {
+    setPopoverActive(active => !active);
+    setQuery('');
+    onQueryChange('');
+  }, [onQueryChange]);
+  react.useEffect(() => {
+    function handleEsc(event) {
+      if (event.key === 'Escape') setPopoverActive(false);
+    }
+    document.addEventListener('keydown', handleEsc);
+    return () => document.removeEventListener('keydown', handleEsc);
+  }, []);
+
+  // keep the cache in sync while the selected option is loaded, so its label survives (and stays
+  // fresh) if pagination later drops the option from `options`
+  react.useEffect(() => {
+    if (selected.length < 1) return;
+    const loadedOption = options.find(option => option.value === selected[0]);
+    const label = getValueByPath(loadedOption?.object, selectedLabelKey);
+    if (typeof label === 'string' && (cachedSelection?.value !== selected[0] || cachedSelection.label !== label)) {
+      setCachedSelection({
+        value: selected[0],
+        label
+      });
+    }
+  }, [selected, options, selectedLabelKey, cachedSelection]);
+  const textSelectedItem = react.useMemo(() => {
+    if (selected.length < 1) return '';
+    const selectedItem = options.find(option => option.value === selected[0]);
+    const value = getValueByPath(selectedItem?.object, selectedLabelKey);
+    if (typeof value === 'string') return value;
+    return cachedSelection?.value === selected[0] ? cachedSelection.label : '';
+  }, [selected, options, selectedLabelKey, cachedSelection]);
+  const handleSelectionClear = react.useCallback(() => {
+    setCachedSelection(null);
+    onSelect([]);
+    if (requiredIndicator) {
+      setPopoverActive(true);
+    } else {
+      skipNextFocusOpen.current = true;
+    }
+  }, [onSelect, requiredIndicator]);
+  const handleActivatorFocus = react.useCallback(() => {
+    if (disabled) return;
+    if (skipNextFocusOpen.current) {
+      skipNextFocusOpen.current = false;
+      return;
+    }
+    setPopoverActive(true);
+  }, [disabled]);
+  const activator = /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: SearchableSelect_module.default.Activator,
+    children: /*#__PURE__*/jsxRuntime.jsx(TextField.TextField, {
+      label: label,
+      placeholder: placeholder,
+      autoComplete: "off",
+      value: textSelectedItem,
+      disabled: disabled,
+      requiredIndicator: requiredIndicator,
+      helpText: helpText,
+      error: error,
+      clearButton: allowClear && textSelectedItem !== '',
+      onClearButtonClick: handleSelectionClear,
+      onFocus: handleActivatorFocus,
+      suffix: /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+        source: polarisIcons.CaretDownIcon
+      })
+    })
+  });
+  const pinnedSelectedOption = react.useMemo(() => {
+    if (query || selected.length < 1) return null;
+    const loadedOption = options.find(option => option.value === selected[0]);
+    if (loadedOption) {
+      return pinSelected ? {
+        value: loadedOption.value,
+        label: loadedOption.label
+      } : null;
+    }
+    return cachedSelection?.value === selected[0] ? cachedSelection : null;
+  }, [query, selected, options, cachedSelection, pinSelected]);
+  const optionsMarkup = react.useMemo(() => {
+    if (loading) return null;
+    const listOptions = pinnedSelectedOption ? options.filter(option => option.value !== pinnedSelectedOption.value) : options;
+    if (listOptions.length === 0 && !pinnedSelectedOption) return null;
+    const pinnedMarkup = pinnedSelectedOption ? /*#__PURE__*/jsxRuntime.jsx(Listbox.Listbox.Option, {
+      value: pinnedSelectedOption.value,
+      selected: true,
+      children: /*#__PURE__*/jsxRuntime.jsx(Listbox.Listbox.TextOption, {
+        selected: true,
+        children: pinnedSelectedOption.label
+      })
+    }, pinnedSelectedOption.value) : null;
+    return [pinnedMarkup, ...listOptions.map(option => {
+      const isSelected = selected.includes(option.value);
+      return /*#__PURE__*/jsxRuntime.jsx(Listbox.Listbox.Option, {
+        value: option.value,
+        selected: isSelected,
+        children: /*#__PURE__*/jsxRuntime.jsx(Listbox.Listbox.TextOption, {
+          selected: isSelected,
+          children: option.label
+        })
+      }, option.value);
+    })];
+  }, [loading, options, selected, pinnedSelectedOption]);
+  const loadingMarkup = loading ? /*#__PURE__*/jsxRuntime.jsx(Listbox.Listbox.Loading, {
+    accessibilityLabel: i18n.translate('Polaris.SearchableSelect.loadingAccessibilityLabel')
+  }) : null;
+  const loadingMoreMarkup = loadingMore ? /*#__PURE__*/jsxRuntime.jsx(Listbox.Listbox.Loading, {
+    accessibilityLabel: i18n.translate('Polaris.SearchableSelect.loadingMoreAccessibilityLabel')
+  }) : null;
+  const noResultsMarkup = !loading && options.length === 0 && !pinnedSelectedOption ? /*#__PURE__*/jsxRuntime.jsx(EmptySearchResult.EmptySearchResult, {
+    title: emptyStateTitle,
+    description: emptyStateDescription ?? (query ? i18n.translate('Polaris.SearchableSelect.noResultsFoundFor', {
+      query
+    }) : i18n.translate('Polaris.SearchableSelect.noResultsFound'))
+  }) : null;
+  const updateSelection = react.useCallback(newSelection => {
+    const option = options.find(({
+      value
+    }) => value === newSelection);
+    const label = getValueByPath(option?.object, selectedLabelKey);
+    if (typeof label === 'string') {
+      setCachedSelection({
+        value: newSelection,
+        label
+      });
+    } else if (cachedSelection?.value !== newSelection) {
+      // re-selecting the pinned option (absent from `options`) must keep its cached label
+      setCachedSelection(null);
+    }
+    onSelect([newSelection]);
+    setQuery('');
+    onQueryChange('');
+    setPopoverActive(false);
+  }, [options, selectedLabelKey, cachedSelection, onSelect, onQueryChange]);
+  const handleActiveOptionChange = react.useCallback((_value, domId) => {
+    setActiveOptionId(domId);
+  }, []);
+  const handleQueryClear = react.useCallback(() => {
+    setQuery('');
+    onQueryChange('');
+  }, [onQueryChange]);
+  return /*#__PURE__*/jsxRuntime.jsx(Popover.Popover, {
+    activator: activator,
+    active: popoverActive,
+    onClose: togglePopoverActive,
+    fullWidth: true,
+    autofocusTarget: "first-node",
+    preferInputActivator: false,
+    children: /*#__PURE__*/jsxRuntime.jsxs(Popover.Popover.Pane, {
+      fixed: true,
+      children: [/*#__PURE__*/jsxRuntime.jsx(Box.Box, {
+        padding: "300",
+        children: /*#__PURE__*/jsxRuntime.jsx(TextField.TextField, {
+          prefix: /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+            source: polarisIcons.SearchIcon
+          }),
+          label: "",
+          labelHidden: true,
+          autoComplete: "off",
+          placeholder: i18n.translate('Polaris.SearchableSelect.searchPlaceholder'),
+          clearButton: true,
+          ariaActiveDescendant: activeOptionId,
+          ariaControls: listboxId,
+          value: query,
+          onChange: value => {
+            onQueryChange(value);
+            setQuery(value);
+          },
+          onClearButtonClick: handleQueryClear
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(Scrollable.Scrollable, {
+        style: {
+          position: 'relative',
+          maxHeight: SCROLLABLE_HEIGHT,
+          padding: '0 0 var(--p-space-200)',
+          borderBottomLeftRadius: 'var(--p-border-radius-200)',
+          borderBottomRightRadius: 'var(--p-border-radius-200)'
+        },
+        horizontal: false,
+        onScrolledToBottom: onScrolledToBottom,
+        children: /*#__PURE__*/jsxRuntime.jsxs(Listbox.Listbox, {
+          enableKeyboardControl: true,
+          autoSelection: selected.length > 0 ? Listbox.AutoSelection.FirstSelected : Listbox.AutoSelection.None,
+          customListId: listboxId,
+          onSelect: updateSelection,
+          onActiveOptionChange: handleActiveOptionChange,
+          children: [optionsMarkup, loadingMarkup, loadingMoreMarkup, noResultsMarkup]
+        })
+      })]
+    })
+  });
+}
+
+exports.SearchableSelect = SearchableSelect;

package/build/cjs/index.js

@@ -105,6 +105,7 @@ var ResourceItem = require('./components/ResourceItem/ResourceItem.js');
 var ResourceList = require('./components/ResourceList/ResourceList.js');
 var Scrollable = require('./components/Scrollable/Scrollable.js');
 var ScrollLock = require('./components/ScrollLock/ScrollLock.js');
+var SearchableSelect = require('./components/SearchableSelect/SearchableSelect.js');
 var Select = require('./components/Select/Select.js');
 var SelectAllActions = require('./components/SelectAllActions/SelectAllActions.js');
 var SettingToggle = require('./components/SettingToggle/SettingToggle.js');
@@ -261,6 +262,7 @@ exports.ResourceItem = ResourceItem.ResourceItem;
 exports.ResourceList = ResourceList.ResourceList;
 exports.Scrollable = Scrollable.Scrollable;
 exports.ScrollLock = ScrollLock.ScrollLock;
+exports.SearchableSelect = SearchableSelect.SearchableSelect;
 exports.Select = Select.Select;
 exports.SelectAllActions = SelectAllActions.SelectAllActions;
 exports.SettingToggle = SettingToggle.SettingToggle;

package/build/esm/components/ActionList/ActionList.js

@@ -50,7 +50,7 @@ function ActionList({
       actionRole: actionRole,
       onActionAnyItem: onActionAnyItem,
       isFirst: index === 0
-    }, typeof section.title === 'string' ? section.title : index) : null;
+    }, typeof section.title === 'string' && section.title ? section.title : index) : null;
   });
   const handleFocusPreviousItem = evt => {
     evt.preventDefault();

package/build/esm/components/Filters/components/FiltersBar/FiltersBar.js

@@ -73,11 +73,17 @@ function FiltersBar({
       togglePopoverActive();
     }, 0);
   };
-  const filterToActionItem = filter => ({
-    ...filter,
-    content: filter.label,
-    onAction: onFilterClick(filter)
-  });
+  const filterToActionItem = filter => {
+    const {
+      key: _filterKey,
+      ...rest
+    } = filter;
+    return {
+      ...rest,
+      content: filter.label,
+      onAction: onFilterClick(filter)
+    };
+  };
   const unpinnedFilters = filters.filter(filter => !pinnedFilters.some(({
     key
   }) => key === filter.key));

package/build/esm/components/Pagination/Pagination.js

@@ -1,4 +1,4 @@
-import { ChevronLeftIcon, ChevronRightIcon } from '@shopify/polaris-icons';
+import { ChevronUpIcon, ChevronLeftIcon, ChevronDownIcon, ChevronRightIcon } from '@shopify/polaris-icons';
 import { createRef } from 'react';
 import { classNames } from '../../utilities/css.js';
 import { isInputFocused } from '../../utilities/is-input-focused.js';
@@ -27,15 +27,18 @@ function Pagination({
   accessibilityLabel,
   accessibilityLabels,
   label,
-  type = 'page'
+  type = 'page',
+  direction = 'horizontal'
 }) {
   const i18n = useI18n();
   const node = /*#__PURE__*/createRef();
   const navLabel = accessibilityLabel || i18n.translate('Polaris.Pagination.pagination');
   const previousLabel = accessibilityLabels?.previous || i18n.translate('Polaris.Pagination.previous');
   const nextLabel = accessibilityLabels?.next || i18n.translate('Polaris.Pagination.next');
+  const previousIcon = direction === 'vertical' ? ChevronUpIcon : ChevronLeftIcon;
+  const nextIcon = direction === 'vertical' ? ChevronDownIcon : ChevronRightIcon;
   const prev = /*#__PURE__*/jsx(Button, {
-    icon: ChevronLeftIcon,
+    icon: previousIcon,
     accessibilityLabel: previousLabel,
     url: previousURL,
     onClick: onPrevious,
@@ -49,7 +52,7 @@ function Pagination({
     children: prev
   }) : prev;
   const next = /*#__PURE__*/jsx(Button, {
-    icon: ChevronRightIcon,
+    icon: nextIcon,
     accessibilityLabel: nextLabel,
     url: nextURL,
     onClick: onNext,

package/build/esm/components/SearchableSelect/SearchableSelect.css.js

@@ -0,0 +1,5 @@
+var styles = {
+  "Activator": "Polaris-SearchableSelect__Activator"
+};
+
+export { styles as default };

package/build/esm/components/SearchableSelect/SearchableSelect.js

@@ -0,0 +1,241 @@
+import { CaretDownIcon, SearchIcon } from '@shopify/polaris-icons';
+import { useState, useRef, useId, useCallback, useEffect, useMemo } from 'react';
+import styles from './SearchableSelect.css.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useI18n } from '../../utilities/i18n/hooks.js';
+import { TextField } from '../TextField/TextField.js';
+import { Icon } from '../Icon/Icon.js';
+import { Listbox, AutoSelection } from '../Listbox/Listbox.js';
+import { EmptySearchResult } from '../EmptySearchResult/EmptySearchResult.js';
+import { Popover } from '../Popover/Popover.js';
+import { Box } from '../Box/Box.js';
+import { Scrollable } from '../Scrollable/Scrollable.js';
+
+function getValueByPath(obj, path) {
+  return path.split('.').reduce((acc, part) => acc?.[part], obj);
+}
+const SCROLLABLE_HEIGHT = 292;
+function SearchableSelect({
+  loading,
+  loadingMore,
+  options,
+  selected,
+  onSelect,
+  emptyStateTitle = '',
+  emptyStateDescription,
+  onQueryChange,
+  selectedLabelKey,
+  label,
+  placeholder,
+  disabled,
+  requiredIndicator,
+  helpText,
+  error,
+  pinSelected = true,
+  allowClear,
+  onScrolledToBottom
+}) {
+  const i18n = useI18n();
+  const [query, setQuery] = useState('');
+  const [popoverActive, setPopoverActive] = useState(false);
+  const [activeOptionId, setActiveOptionId] = useState();
+  // pagination/search can drop the selected option from `options`; the cache keeps its label visible
+  const [cachedSelection, setCachedSelection] = useState(null);
+  // clicking the clear button bubbles to TextField's container, which focuses the input
+  const skipNextFocusOpen = useRef(false);
+  const listboxId = useId();
+  const togglePopoverActive = useCallback(() => {
+    setPopoverActive(active => !active);
+    setQuery('');
+    onQueryChange('');
+  }, [onQueryChange]);
+  useEffect(() => {
+    function handleEsc(event) {
+      if (event.key === 'Escape') setPopoverActive(false);
+    }
+    document.addEventListener('keydown', handleEsc);
+    return () => document.removeEventListener('keydown', handleEsc);
+  }, []);
+
+  // keep the cache in sync while the selected option is loaded, so its label survives (and stays
+  // fresh) if pagination later drops the option from `options`
+  useEffect(() => {
+    if (selected.length < 1) return;
+    const loadedOption = options.find(option => option.value === selected[0]);
+    const label = getValueByPath(loadedOption?.object, selectedLabelKey);
+    if (typeof label === 'string' && (cachedSelection?.value !== selected[0] || cachedSelection.label !== label)) {
+      setCachedSelection({
+        value: selected[0],
+        label
+      });
+    }
+  }, [selected, options, selectedLabelKey, cachedSelection]);
+  const textSelectedItem = useMemo(() => {
+    if (selected.length < 1) return '';
+    const selectedItem = options.find(option => option.value === selected[0]);
+    const value = getValueByPath(selectedItem?.object, selectedLabelKey);
+    if (typeof value === 'string') return value;
+    return cachedSelection?.value === selected[0] ? cachedSelection.label : '';
+  }, [selected, options, selectedLabelKey, cachedSelection]);
+  const handleSelectionClear = useCallback(() => {
+    setCachedSelection(null);
+    onSelect([]);
+    if (requiredIndicator) {
+      setPopoverActive(true);
+    } else {
+      skipNextFocusOpen.current = true;
+    }
+  }, [onSelect, requiredIndicator]);
+  const handleActivatorFocus = useCallback(() => {
+    if (disabled) return;
+    if (skipNextFocusOpen.current) {
+      skipNextFocusOpen.current = false;
+      return;
+    }
+    setPopoverActive(true);
+  }, [disabled]);
+  const activator = /*#__PURE__*/jsx("div", {
+    className: styles.Activator,
+    children: /*#__PURE__*/jsx(TextField, {
+      label: label,
+      placeholder: placeholder,
+      autoComplete: "off",
+      value: textSelectedItem,
+      disabled: disabled,
+      requiredIndicator: requiredIndicator,
+      helpText: helpText,
+      error: error,
+      clearButton: allowClear && textSelectedItem !== '',
+      onClearButtonClick: handleSelectionClear,
+      onFocus: handleActivatorFocus,
+      suffix: /*#__PURE__*/jsx(Icon, {
+        source: CaretDownIcon
+      })
+    })
+  });
+  const pinnedSelectedOption = useMemo(() => {
+    if (query || selected.length < 1) return null;
+    const loadedOption = options.find(option => option.value === selected[0]);
+    if (loadedOption) {
+      return pinSelected ? {
+        value: loadedOption.value,
+        label: loadedOption.label
+      } : null;
+    }
+    return cachedSelection?.value === selected[0] ? cachedSelection : null;
+  }, [query, selected, options, cachedSelection, pinSelected]);
+  const optionsMarkup = useMemo(() => {
+    if (loading) return null;
+    const listOptions = pinnedSelectedOption ? options.filter(option => option.value !== pinnedSelectedOption.value) : options;
+    if (listOptions.length === 0 && !pinnedSelectedOption) return null;
+    const pinnedMarkup = pinnedSelectedOption ? /*#__PURE__*/jsx(Listbox.Option, {
+      value: pinnedSelectedOption.value,
+      selected: true,
+      children: /*#__PURE__*/jsx(Listbox.TextOption, {
+        selected: true,
+        children: pinnedSelectedOption.label
+      })
+    }, pinnedSelectedOption.value) : null;
+    return [pinnedMarkup, ...listOptions.map(option => {
+      const isSelected = selected.includes(option.value);
+      return /*#__PURE__*/jsx(Listbox.Option, {
+        value: option.value,
+        selected: isSelected,
+        children: /*#__PURE__*/jsx(Listbox.TextOption, {
+          selected: isSelected,
+          children: option.label
+        })
+      }, option.value);
+    })];
+  }, [loading, options, selected, pinnedSelectedOption]);
+  const loadingMarkup = loading ? /*#__PURE__*/jsx(Listbox.Loading, {
+    accessibilityLabel: i18n.translate('Polaris.SearchableSelect.loadingAccessibilityLabel')
+  }) : null;
+  const loadingMoreMarkup = loadingMore ? /*#__PURE__*/jsx(Listbox.Loading, {
+    accessibilityLabel: i18n.translate('Polaris.SearchableSelect.loadingMoreAccessibilityLabel')
+  }) : null;
+  const noResultsMarkup = !loading && options.length === 0 && !pinnedSelectedOption ? /*#__PURE__*/jsx(EmptySearchResult, {
+    title: emptyStateTitle,
+    description: emptyStateDescription ?? (query ? i18n.translate('Polaris.SearchableSelect.noResultsFoundFor', {
+      query
+    }) : i18n.translate('Polaris.SearchableSelect.noResultsFound'))
+  }) : null;
+  const updateSelection = useCallback(newSelection => {
+    const option = options.find(({
+      value
+    }) => value === newSelection);
+    const label = getValueByPath(option?.object, selectedLabelKey);
+    if (typeof label === 'string') {
+      setCachedSelection({
+        value: newSelection,
+        label
+      });
+    } else if (cachedSelection?.value !== newSelection) {
+      // re-selecting the pinned option (absent from `options`) must keep its cached label
+      setCachedSelection(null);
+    }
+    onSelect([newSelection]);
+    setQuery('');
+    onQueryChange('');
+    setPopoverActive(false);
+  }, [options, selectedLabelKey, cachedSelection, onSelect, onQueryChange]);
+  const handleActiveOptionChange = useCallback((_value, domId) => {
+    setActiveOptionId(domId);
+  }, []);
+  const handleQueryClear = useCallback(() => {
+    setQuery('');
+    onQueryChange('');
+  }, [onQueryChange]);
+  return /*#__PURE__*/jsx(Popover, {
+    activator: activator,
+    active: popoverActive,
+    onClose: togglePopoverActive,
+    fullWidth: true,
+    autofocusTarget: "first-node",
+    preferInputActivator: false,
+    children: /*#__PURE__*/jsxs(Popover.Pane, {
+      fixed: true,
+      children: [/*#__PURE__*/jsx(Box, {
+        padding: "300",
+        children: /*#__PURE__*/jsx(TextField, {
+          prefix: /*#__PURE__*/jsx(Icon, {
+            source: SearchIcon
+          }),
+          label: "",
+          labelHidden: true,
+          autoComplete: "off",
+          placeholder: i18n.translate('Polaris.SearchableSelect.searchPlaceholder'),
+          clearButton: true,
+          ariaActiveDescendant: activeOptionId,
+          ariaControls: listboxId,
+          value: query,
+          onChange: value => {
+            onQueryChange(value);
+            setQuery(value);
+          },
+          onClearButtonClick: handleQueryClear
+        })
+      }), /*#__PURE__*/jsx(Scrollable, {
+        style: {
+          position: 'relative',
+          maxHeight: SCROLLABLE_HEIGHT,
+          padding: '0 0 var(--p-space-200)',
+          borderBottomLeftRadius: 'var(--p-border-radius-200)',
+          borderBottomRightRadius: 'var(--p-border-radius-200)'
+        },
+        horizontal: false,
+        onScrolledToBottom: onScrolledToBottom,
+        children: /*#__PURE__*/jsxs(Listbox, {
+          enableKeyboardControl: true,
+          autoSelection: selected.length > 0 ? AutoSelection.FirstSelected : AutoSelection.None,
+          customListId: listboxId,
+          onSelect: updateSelection,
+          onActiveOptionChange: handleActiveOptionChange,
+          children: [optionsMarkup, loadingMarkup, loadingMoreMarkup, noResultsMarkup]
+        })
+      })]
+    })
+  });
+}
+
+export { SearchableSelect };

package/build/esm/index.js

@@ -103,6 +103,7 @@ export { ResourceItem } from './components/ResourceItem/ResourceItem.js';
 export { ResourceList } from './components/ResourceList/ResourceList.js';
 export { Scrollable } from './components/Scrollable/Scrollable.js';
 export { ScrollLock } from './components/ScrollLock/ScrollLock.js';
+export { SearchableSelect } from './components/SearchableSelect/SearchableSelect.js';
 export { Select } from './components/Select/Select.js';
 export { SelectAllActions } from './components/SelectAllActions/SelectAllActions.js';
 export { SettingToggle } from './components/SettingToggle/SettingToggle.js';