kiban-design-system 1.1.5-hotfix.0 → 1.1.6-hotfix.0

package/dist/index.js

@@ -2247,11 +2247,53 @@ 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) => {
+            if (section.items)
+                totalItems += section.items.length;
+        });
+    }
+    if (items)
+        totalItems = items.length;
     const handleClickSelectReadOnlyOutside = (event) => {
         if (selectActivatorRef.current &&
             !selectActivatorRef.current.contains(event.target)) {
@@ -2266,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();
@@ -2357,9 +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 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: [searchPlaceholder && (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)), 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();
                                 }
@@ -28683,6 +28732,13 @@ const Content = ({ children, hasPane = false, height }) => (jsx("div", Object.as
  * @param {boolean} ModalProps.hasPane - Validate if it has Pane
  */
 const Modal = ({ ariaLabel, children, isOpen, media, onClose, position, primaryAction, secondaryActions, extraAction, hideFooter = false, hideHeader = false, size = 'medium', title, hasPane = false, id, mediaTheme, height, }) => {
+    const handleOnKeyUp = (event) => {
+        if (isOpen && event.key == 'Escape' && onClose)
+            onClose();
+    };
+    useEffect(() => {
+        document.addEventListener('keyup', handleOnKeyUp);
+    });
     useEffect(() => {
         if (isOpen)
             document.body.style.overflow = 'hidden';
@@ -28890,13 +28946,15 @@ const PanelHeader = ({ alt = '', icon, image, title, onClose, headerExtraActions
 
 const MAIN_CLASS$4 = 'Panel';
 const Panel = ({ children, position, height, isOpen, id, alt = '', icon, image, title, onClose, headerExtraActions, theme = 'CLOUD', positionButtons = 'flex-end', primaryAction, secondaryActions, extraAction, }) => {
-    const className = [
-        `${MAIN_CLASS$4}__container`,
-        position && `${MAIN_CLASS$4}__container--is-${position}`,
-    ]
-        .filter(Boolean)
-        .join(' ');
+    const className = cssClassName(`${MAIN_CLASS$4}__container`, position && `is-${position}`);
     const maxHeightStyle = { height: height };
+    const handleOnKeyUp = (event) => {
+        if (isOpen && event.key == 'Escape' && onClose)
+            onClose();
+    };
+    useEffect(() => {
+        document.addEventListener('keyup', handleOnKeyUp);
+    });
     return (jsx(Fragment, { children: isOpen &&
             createPortal(jsxs("div", Object.assign({ id: id, className: className, style: maxHeightStyle }, { children: [jsx(PanelHeader, { alt: alt, icon: icon, image: image, title: title, onClose: onClose, theme: theme, headerExtraActions: headerExtraActions }, void 0), jsx("div", Object.assign({ className: `${MAIN_CLASS$4}__body` }, { children: children }), void 0), jsx(PanelFooter, { positionButtons: positionButtons, primaryAction: primaryAction, secondaryActions: secondaryActions, extraAction: extraAction }, void 0)] }), void 0), document.querySelector('body')) }, void 0));
 };