kiban-design-system 1.0.239-alpha.0 → 1.0.240-alpha.0

package/dist/index.js

@@ -2247,11 +2247,44 @@ const useTheme = () => {
  * @param {string} InputTextProps.ariaLabel - Label to use in automatic tests
  * @returns {symbol} - Element Select
  */
-const Select = ({ ariaLabel, items, sections, isMultiple, placeholder, label, selected, onChange, searchPlaceholder, searchLabel, helperText, isHelperMode, isDisabled = false, onSearchChange, search, tooltip, isDanger, isReadOnly = false, id, emptyState, onBlur, isRequired, tooltipLabel, action, }) => {
+const Select = ({ ariaLabel, items, sections, isMultiple, placeholder, label, selected, onChange, searchPlaceholder, searchLabel, helperText, isHelperMode, isDisabled = false, tooltip, isDanger, isReadOnly = false, id, emptyState, onBlur, isRequired, tooltipLabel, action, showSearch = true, }) => {
     const [isActivePopover, setIsActive] = useState(false);
     const selectActivatorRef = useRef(null);
     const [parentCoord, setParentCoords] = useState();
+    const [search, setSearch] = useState('');
+    const [sectionsFiltered, setSectionsFiltered] = useState(sections);
+    const [itemsFiltered, setItemsFiltered] = useState(items);
     const { theme } = useTheme();
+    const handleOnSearch = (value) => {
+        setSearch(value || '');
+        if (value) {
+            if (sections) {
+                const newSections = [];
+                sections.forEach((section) => {
+                    const { items: itemsSection } = section;
+                    if (!itemsSection)
+                        newSections.push(section);
+                    else {
+                        const newItems = itemsSection.filter((item) => item.label
+                            .toLocaleLowerCase()
+                            .includes(search.toLocaleLowerCase()));
+                        newSections.push(Object.assign(Object.assign({}, section), { items: newItems }));
+                    }
+                });
+                setSectionsFiltered(newSections);
+            }
+            if (items) {
+                const newItems = items.filter((item) => item.label
+                    .toLocaleLowerCase()
+                    .includes(search.toLocaleLowerCase()));
+                setItemsFiltered(newItems);
+            }
+        }
+        else {
+            setSectionsFiltered(sections);
+            setItemsFiltered(items);
+        }
+    };
     let totalItems = 0;
     if (sections) {
         sections.forEach((section) => {
@@ -2275,6 +2308,12 @@ const Select = ({ ariaLabel, items, sections, isMultiple, placeholder, label, se
             };
         }
     }, [isActivePopover]);
+    useEffect(() => {
+        setSectionsFiltered(sections);
+    }, [sections]);
+    useEffect(() => {
+        setItemsFiltered(items);
+    }, [items]);
     const handleOpenPopover = () => setIsActive(!isActivePopover);
     const removeTag = (event, value) => {
         event.stopPropagation();
@@ -2366,11 +2405,10 @@ const Select = ({ ariaLabel, items, sections, isMultiple, placeholder, label, se
     }, [action]);
     const actionIconProp = action && action.icon ? { icon: action.icon, outlined: true } : undefined;
     const actionMarkup = action ? (jsxs(Fragment, { children: [(items === null || items === void 0 ? void 0 : items.length) ? jsx(Divider, {}, void 0) : null, jsx(AlphaButton, Object.assign({ isLink: true, isTertiary: true, onClick: handleActionClick, icon: actionIconProp, iconPosition: action.iconPosition, theme: (theme === null || theme === void 0 ? void 0 : theme.toLowerCase()) || undefined }, { children: action.content }), void 0)] }, void 0)) : null;
-    const showSearch = (totalItems > 10 && !search) || search;
-    const searchMarkup = onSearchChange && showSearch ? (jsx("div", Object.assign({ className: 'Select__search' }, { children: jsx(InputText, { placeholder: searchPlaceholder, icon: 'Search', value: search, label: searchLabel, onChange: (value) => onSearchChange && onSearchChange(value) }, void 0) }), void 0)) : null;
+    const searchMarkup = totalItems > 10 && showSearch ? (jsx("div", Object.assign({ className: 'Select__search' }, { children: jsx(InputText, { placeholder: searchPlaceholder, icon: 'Search', value: search, label: searchLabel, onChange: handleOnSearch }, void 0) }), void 0)) : null;
     const renderInput = () => (jsx("div", Object.assign({ id: id }, { children: jsxs(Popover$1, Object.assign({ isActive: isReadOnly ? false : isActivePopover, activator: jsxs("div", Object.assign({ "aria-label": ariaLabel, tabIndex: 0, className: clasessSelect, id: `select-${id}`, onKeyDown: onKeyDown, onClick: handleClickSelect, onBlur: onBlur }, { children: [selected && selected.length > 0 && (jsx("div", Object.assign({ className: 'Select__selected' }, { children: isMultiple
                             ? selected === null || selected === void 0 ? void 0 : selected.map((option, index) => (jsx("div", Object.assign({ className: 'Select__tag-container' }, { children: jsx(Tag, Object.assign({ onRemove: (evt) => removeTag(evt, option), isDisabled: isDisabled, isDanger: isDanger }, { children: getLabelOption(option) }), void 0) }), `Select-tag--${index}`)))
-                            : selected === null || selected === void 0 ? void 0 : selected.map((option, index) => (jsx("span", { children: getLabelOption(option) }, `option-${index}`))) }), void 0)), (!selected || selected.length <= 0) && placeholder && (jsx("div", Object.assign({ className: 'Select__placeholder' }, { children: placeholder }), void 0)), jsx("div", Object.assign({ className: 'Select__icon', onClick: handleOnClickIcon }, { children: jsx(Icon, { name: isActivePopover && !isReadOnly ? 'ChevronUp' : 'ChevronDown' }, void 0) }), void 0)] }), void 0), isFullWidth: true, onClose: () => setIsActive(false) }, { children: [searchMarkup, emptyState && (jsx(Popover$1.Pane, { children: jsx("div", Object.assign({ className: 'emptyState__container' }, { children: emptyState }), void 0) }, void 0)), !emptyState && (jsxs(Popover$1.Pane, { children: [jsx(OptionList, { sections: sections, items: items, isMultiple: isMultiple, onChange: (value) => {
+                            : selected === null || selected === void 0 ? void 0 : selected.map((option, index) => (jsx("span", { children: getLabelOption(option) }, `option-${index}`))) }), void 0)), (!selected || selected.length <= 0) && placeholder && (jsx("div", Object.assign({ className: 'Select__placeholder' }, { children: placeholder }), void 0)), jsx("div", Object.assign({ className: 'Select__icon', onClick: handleOnClickIcon }, { children: jsx(Icon, { name: isActivePopover && !isReadOnly ? 'ChevronUp' : 'ChevronDown' }, void 0) }), void 0)] }), void 0), isFullWidth: true, onClose: () => setIsActive(false) }, { children: [searchMarkup, emptyState && (jsx(Popover$1.Pane, { children: jsx("div", Object.assign({ className: 'emptyState__container' }, { children: emptyState }), void 0) }, void 0)), !emptyState && (jsxs(Popover$1.Pane, { children: [jsx(OptionList, { sections: sectionsFiltered, items: itemsFiltered, isMultiple: isMultiple, onChange: (value) => {
                                 if (!isMultiple) {
                                     handleOpenPopover();
                                 }