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

package/dist/index.js

@@ -1032,6 +1032,17 @@ const isComponentTypeOf = (childComponent, parentComponent) => {
     return Components.some((Component) => typeof type !== 'string' && type === Component);
 };
 
+function formatFileSize(bytes) {
+    const units = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+    let unitIndex = 0;
+    let size = bytes;
+    while (size >= 1024 && unitIndex < units.length - 1) {
+        size /= 1024;
+        unitIndex += 1;
+    }
+    return `${size.toFixed(2)} ${units[unitIndex]}`;
+}
+
 const cssClassName = (mainClass, ...classes) => {
     const filteredClasses = classes
         .filter(Boolean)
@@ -2247,11 +2258,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 +2319,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 +2416,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();
                                 }
@@ -23595,7 +23644,7 @@ var pako = {
  * @returns {symbol} - Element FileItem
  * @param {string} InputTextProps.ariaLabel - Label to use in automatic tests
  */
-const FileItem = ({ ariaLabel, name, addon, onDelete, size = 0, }) => (jsxs("div", Object.assign({ className: 'File' }, { children: [jsxs("div", Object.assign({ className: 'File__content__left' }, { children: [jsx(Icon, { name: 'Paperclip' }, void 0), jsx("p", Object.assign({ className: ' File__content__nameFile' }, { children: name }), void 0)] }), void 0), jsxs("div", Object.assign({ className: 'File__content__right' }, { children: [jsxs("button", Object.assign({ "aria-label": `${ariaLabel}-delete`, className: 'ButtonDeleteFile', onClick: onDelete }, { children: [jsx(Fragment, { children: addon }, void 0), jsx(Icon, { name: 'Close' }, void 0)] }), void 0), jsxs("p", Object.assign({ className: 'File__content__fileSize' }, { children: [(size / 1048576).toFixed(4), " M"] }), void 0)] }), void 0)] }), void 0));
+const FileItem = ({ ariaLabel, name, addon, onDelete, size = 0, }) => (jsxs("div", Object.assign({ className: 'File' }, { children: [jsxs("div", Object.assign({ className: 'File__content__left' }, { children: [jsx(Icon, { name: 'Paperclip' }, void 0), jsx("p", Object.assign({ className: ' File__content__nameFile' }, { children: name }), void 0)] }), void 0), jsxs("div", Object.assign({ className: 'File__content__right' }, { children: [jsxs("button", Object.assign({ "aria-label": `${ariaLabel}-delete`, className: 'ButtonDeleteFile', onClick: onDelete }, { children: [jsx(Fragment, { children: addon }, void 0), jsx(Icon, { name: 'Close' }, void 0)] }), void 0), jsx("p", Object.assign({ className: 'File__content__fileSize' }, { children: formatFileSize(size) }), void 0)] }), void 0)] }), void 0));
 
 /**
  * FileDrop is a component to upload files in any project
@@ -30529,5 +30578,5 @@ const AlphaSegmentedControl = ({ children, title, segments, selected, onSelected
     return (jsxs("div", Object.assign({ className: `${MAINCLASS}__Container` }, { children: [headerMarkup, contentMarkup] }), void 0));
 };
 
-export { ActionList, Alert, AlertProvider, AlphaAttributeInput, AlphaBadge, AlphaButton, AlphaChip, AlphaFilterControl, AlphaGraphicCard, AlphaIcon, AlphaInlineError, AlphaInputDate, InputTag$1 as AlphaInputTag, AlphaInputText, AlphaLabel, AlphaLabelledField, AlphaMultiSelectionPicker, AlphaSegmentedControl, AlphaSpinner, AlphaStepper, AlphaTag, AlphaTile, AlphaTooltip, Totalizer as AlphaTotalizer, AlphaZipCodeInput, AnnotatedSection, Avatar, Badge, Banner, Button, CalendarPicker, Card, Checkbox, ChoiceList, Collapsible, Connector, Container, Cover, DataTable, DatePicker, DeletableSection, Divider, DynamicForm, EmptyState, ErrorIcon, FileDownloader, Filedrop, FilterControl, Filters, Footer, Form, FormField, FormLayout, Frame, Grid, GridItem, Header$1 as Header, Icon, IconButton, IndexList, InlineEdit, InputPhoneNumber, InputTag, InputText, JsonViewer, Label, Link, ListInfo, Loader, Logo, Media, Modal, ModalHeader, Nip, OptionList, Page, PageActions, Pagination, Pane, Panel, PanelFooter, PanelHeader, PendingIcon, Popover$1 as Popover, Progress, RadioButton, SectionForm, Select, SideMenu, SkeletonInput, SkeletonMedia, SkeletonTabs, SkeletonText, SkeletonTitle, SortableList, Spinner, Stack, StepDefault, SuccessIcon, Table, Tabs, Tag, ThemeProvider, ThreadItem, Thumbnail, Tile, TimeSelector, Title, Toggle, Tooltip, WarningIcon, capitalize, cssClassName, formatDate, isComponentTypeOf, isValidIcon, themeClassConverter, useShowAlert, useTheme };
+export { ActionList, Alert, AlertProvider, AlphaAttributeInput, AlphaBadge, AlphaButton, AlphaChip, AlphaFilterControl, AlphaGraphicCard, AlphaIcon, AlphaInlineError, AlphaInputDate, InputTag$1 as AlphaInputTag, AlphaInputText, AlphaLabel, AlphaLabelledField, AlphaMultiSelectionPicker, AlphaSegmentedControl, AlphaSpinner, AlphaStepper, AlphaTag, AlphaTile, AlphaTooltip, Totalizer as AlphaTotalizer, AlphaZipCodeInput, AnnotatedSection, Avatar, Badge, Banner, Button, CalendarPicker, Card, Checkbox, ChoiceList, Collapsible, Connector, Container, Cover, DataTable, DatePicker, DeletableSection, Divider, DynamicForm, EmptyState, ErrorIcon, FileDownloader, Filedrop, FilterControl, Filters, Footer, Form, FormField, FormLayout, Frame, Grid, GridItem, Header$1 as Header, Icon, IconButton, IndexList, InlineEdit, InputPhoneNumber, InputTag, InputText, JsonViewer, Label, Link, ListInfo, Loader, Logo, Media, Modal, ModalHeader, Nip, OptionList, Page, PageActions, Pagination, Pane, Panel, PanelFooter, PanelHeader, PendingIcon, Popover$1 as Popover, Progress, RadioButton, SectionForm, Select, SideMenu, SkeletonInput, SkeletonMedia, SkeletonTabs, SkeletonText, SkeletonTitle, SortableList, Spinner, Stack, StepDefault, SuccessIcon, Table, Tabs, Tag, ThemeProvider, ThreadItem, Thumbnail, Tile, TimeSelector, Title, Toggle, Tooltip, WarningIcon, capitalize, cssClassName, formatDate, formatFileSize, isComponentTypeOf, isValidIcon, themeClassConverter, useShowAlert, useTheme };
 //# sourceMappingURL=index.js.map