@sipesistemas/polaris 1.2.3 → 1.3.0

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/components/TopBar/TopBar.css.js

@@ -14,8 +14,8 @@ var styles = {
   "LeftContent": "Polaris-TopBar__LeftContent",
   "Search": "Polaris-TopBar__Search",
   "RightContent": "Polaris-TopBar__RightContent",
-  "HelpActivatorWrapper": "Polaris-TopBar__HelpActivatorWrapper",
-  "HelpActivator": "Polaris-TopBar__HelpActivator",
+  "ActionWrapper": "Polaris-TopBar__ActionWrapper",
+  "ActionButton": "Polaris-TopBar__ActionButton",
   "SecondaryMenu": "Polaris-TopBar__SecondaryMenu"
 };
 

package/build/esm/components/TopBar/TopBar.js

@@ -1,4 +1,4 @@
-import { MenuIcon, QuestionCircleIcon } from '@shopify/polaris-icons';
+import { MenuIcon } from '@shopify/polaris-icons';
 import { classNames } from '../../utilities/css.js';
 import { getWidth } from '../../utilities/get-width.js';
 import { useToggle } from '../../utilities/use-toggle.js';
@@ -6,6 +6,7 @@ import styles from './TopBar.css.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { SearchField } from './components/SearchField/SearchField.js';
 import { UserMenu } from './components/UserMenu/UserMenu.js';
+import { ActionButton } from './components/ActionButton/ActionButton.js';
 import { Search } from './components/Search/Search.js';
 import { useI18n } from '../../utilities/i18n/hooks.js';
 import { useFrame } from '../../utilities/frame/hooks.js';
@@ -28,7 +29,7 @@ const TopBar = function TopBar({
   searchResultsVisible,
   searchResultsOverlayVisible = false,
   onNavigationToggle,
-  onHelpToggle,
+  actions,
   onSearchResultsDismiss,
   contextControl,
   logoSuffix
@@ -105,17 +106,10 @@ const TopBar = function TopBar({
         children: searchMarkup
       }), /*#__PURE__*/jsxs("div", {
         className: styles.RightContent,
-        children: [onHelpToggle && /*#__PURE__*/jsx("div", {
-          className: styles.HelpActivatorWrapper,
-          children: /*#__PURE__*/jsx("button", {
-            type: "button",
-            className: classNames(styles.HelpActivator, userMenu && styles['Activator-userMenu']),
-            onClick: onHelpToggle,
-            children: /*#__PURE__*/jsx(Icon, {
-              source: QuestionCircleIcon
-            })
-          })
-        }), /*#__PURE__*/jsx("div", {
+        children: [actions?.map((action, index) => /*#__PURE__*/jsx("div", {
+          className: styles.ActionWrapper,
+          children: action
+        }, index)), /*#__PURE__*/jsx("div", {
           className: styles.SecondaryMenu,
           children: secondaryMenu
         }), userMenu]
@@ -126,5 +120,6 @@ const TopBar = function TopBar({
 TopBar.Menu = Menu;
 TopBar.SearchField = SearchField;
 TopBar.UserMenu = UserMenu;
+TopBar.ActionButton = ActionButton;
 
 export { TopBar };

package/build/esm/components/TopBar/components/ActionButton/ActionButton.js

@@ -0,0 +1,25 @@
+import styles from '../../TopBar.css.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Icon } from '../../../Icon/Icon.js';
+import { Text } from '../../../Text/Text.js';
+
+function ActionButton({
+  icon,
+  accessibilityLabel,
+  onClick
+}) {
+  return /*#__PURE__*/jsxs("button", {
+    type: "button",
+    className: styles.ActionButton,
+    onClick: onClick,
+    children: [/*#__PURE__*/jsx(Icon, {
+      source: icon
+    }), /*#__PURE__*/jsx(Text, {
+      as: "span",
+      visuallyHidden: true,
+      children: accessibilityLabel
+    })]
+  });
+}
+
+export { ActionButton };

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';

package/build/esm/styles.css

@@ -3456,7 +3456,7 @@
 @keyframes p-motion-keyframes-appear-below{ from{ transform:translateY(calc(var(--p-space-100)*-1)); opacity:0; } to{ transform:none; opacity:1; } }
 
 :root{
-  --polaris-version-number:'1.2.3';
+  --polaris-version-number:'1.3.0';
 
   --pg-navigation-width:15rem;
   --pg-dangerous-magic-space-4:1rem;
@@ -15157,6 +15157,19 @@ body{
 }
 
 
+.Polaris-SearchableSelect__Activator .Polaris-TextField__Input,
+.Polaris-SearchableSelect__Activator .Polaris-TextField__Suffix{
+  cursor:pointer;
+  caret-color:transparent;
+}
+
+.Polaris-SearchableSelect__Activator .Polaris-TextField:not(:focus-within) .Polaris-TextField__ClearButton{
+  visibility:visible;
+  opacity:1;
+  position:static;
+}
+
+
 .Polaris-SelectAllActions{
   display:flex;
   gap:var(--p-space-200);
@@ -15704,13 +15717,13 @@ body{
   justify-content:flex-end;
 }
 
-.Polaris-TopBar__HelpActivatorWrapper{
+.Polaris-TopBar__ActionWrapper{
   height:var(--pg-top-bar-height);
   display:flex;
   align-items:center;
 }
 
-.Polaris-TopBar__HelpActivator{
+.Polaris-TopBar__ActionButton{
   -webkit-appearance:none;
           appearance:none;
   margin:0;
@@ -15738,11 +15751,11 @@ body{
   background-color:var(--p-color-bg-fill-inverse);
 }
 
-.Polaris-TopBar__HelpActivator:focus{
+.Polaris-TopBar__ActionButton:focus{
     outline:none;
   }
 
-.Polaris-TopBar__HelpActivator::after {
+.Polaris-TopBar__ActionButton::after {
   content: '';
   position: absolute;
   z-index: 1;
@@ -15756,50 +15769,50 @@ body{
   border-radius: var(--p-border-radius-100);
 }
 
-.Polaris-TopBar__HelpActivator:focus{
+.Polaris-TopBar__ActionButton:focus{
     background-color:var(--p-color-bg-fill-inverse-hover);
     outline:none;
   }
 
-.Polaris-TopBar__HelpActivator:focus-visible{
+.Polaris-TopBar__ActionButton:focus-visible{
     outline:var(--p-border-width-050) solid var(--p-color-border-focus);
     outline-offset:var(--p-space-050);
   }
 
-.Polaris-TopBar__HelpActivator:focus-visible::after{
+.Polaris-TopBar__ActionButton:focus-visible::after{
     content:none;
   }
 
-.Polaris-TopBar__HelpActivator:hover{
+.Polaris-TopBar__ActionButton:hover{
     background-color:var(--p-color-bg-fill-inverse-hover);
   }
 
-.Polaris-TopBar__HelpActivator:active,
-  .Polaris-TopBar__HelpActivator[aria-expanded='true']{
+.Polaris-TopBar__ActionButton:active,
+  .Polaris-TopBar__ActionButton[aria-expanded='true']{
     background-color:var(--p-color-bg-fill-inverse-active);
     outline:none;
     transition:none;
   }
 
-.Polaris-TopBar__HelpActivator:active::after, .Polaris-TopBar__HelpActivator[aria-expanded='true']::after{
+.Polaris-TopBar__ActionButton:active::after, .Polaris-TopBar__ActionButton[aria-expanded='true']::after{
       border:none;
     }
 
-.Polaris-TopBar__HelpActivator:active p, .Polaris-TopBar__HelpActivator[aria-expanded='true'] p{
+.Polaris-TopBar__ActionButton:active p, .Polaris-TopBar__ActionButton[aria-expanded='true'] p{
       color:var(--p-color-text-inverse);
     }
 
 @media (max-width: 47.9975em){
 
-.Polaris-TopBar__HelpActivator{
+.Polaris-TopBar__ActionButton{
     margin-right:var(--p-space-200);
     background-color:var(--p-color-bg-inverse);
 }
 
-    .Polaris-TopBar__HelpActivator:focus,
-    .Polaris-TopBar__HelpActivator:hover,
-    .Polaris-TopBar__HelpActivator:active,
-    .Polaris-TopBar__HelpActivator[aria-expanded='true']{
+    .Polaris-TopBar__ActionButton:focus,
+    .Polaris-TopBar__ActionButton:hover,
+    .Polaris-TopBar__ActionButton:active,
+    .Polaris-TopBar__ActionButton[aria-expanded='true']{
       opacity:0.85;
     }
   }

package/build/esnext/components/ActionList/ActionList.esnext

@@ -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/esnext/components/AppProvider/global.out.css

@@ -21,7 +21,7 @@
 @keyframes p-motion-keyframes-appear-below{ from{ transform:translateY(calc(var(--p-space-100)*-1)); opacity:0; } to{ transform:none; opacity:1; } }
 
 :root{
-  --polaris-version-number:'1.2.3';
+  --polaris-version-number:'1.3.0';
 
   --pg-navigation-width:15rem;
   --pg-dangerous-magic-space-4:1rem;

package/build/esnext/components/Filters/components/FiltersBar/FiltersBar.esnext

@@ -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/esnext/components/Pagination/Pagination.esnext

@@ -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.esnext';
 import { isInputFocused } from '../../utilities/is-input-focused.esnext';
@@ -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/esnext/components/SearchableSelect/SearchableSelect.css.esnext

@@ -0,0 +1,7 @@
+import './SearchableSelect.out.css';
+
+var styles = {
+  "Activator": "Polaris-SearchableSelect__Activator_e3w0d"
+};
+
+export { styles as default };