fis-component 0.1.14 → 0.1.16

package/dist/cjs/index.js

@@ -68635,7 +68635,7 @@ const normalizeText = (value) => {
         .trim();
 };
 
-const FISMenuSelect = ({ placeholder, groups, size = "md", multi = false, selectedValues = [], onChangeSelected, searchValue = "", onSearchChange, loading = false, noData = false, noResult = false, combobox, className, onClickMenu, loadingText = "Data loading...", noDataText = "No data", noResultText = "No result", removeSelectedText = "Remove selected", selectedGroupLabel = "Selected", maxHeight, focusSearchInput = true, onPopupScroll, normalizeTextSearch = false, }) => {
+const FISMenuSelect = ({ placeholder, groups, size = "md", multi = false, selectedValues = [], onChangeSelected, searchValue = "", onSearchChange, loading = false, noData = false, noResult = false, combobox, className, onClickMenu, loadingText = "Data loading...", noDataText = "No data", noResultText = "No result", removeSelectedText = "Remove selected", selectedGroupLabel = "Selected", maxHeight, focusSearchInput = true, onPopupScroll, normalizeTextSearch = false, renderOption, }) => {
     const [localSearch, setLocalSearch] = React.useState(searchValue);
     const [debouncedSearchValue, setDebouncedSearchValue] = React.useState(searchValue);
     const searchInputRef = React.useRef(null);
@@ -68739,7 +68739,7 @@ const FISMenuSelect = ({ placeholder, groups, size = "md", multi = false, select
             searchInputRef.current.focus();
         }
     }, [focusSearchInput]);
-    return (jsxRuntime.jsxs(DivContainerSC$4, { "$maxHeight": maxHeight, className: className, children: [showInput && !combobox && (jsxRuntime.jsx(DivSearchSC, { children: jsxRuntime.jsx(FISInputText, { iconPrefix: jsxRuntime.jsx(SearchIcon, {}), placeholder: placeholder, value: search, onChange: handleSearchChange, ref: searchInputRef }) })), loading && (jsxRuntime.jsxs(DivLoaderSC, { children: [jsxRuntime.jsx(FISProgressCircular, { size: size, variant: "indeterminate" }), jsxRuntime.jsx(PTitleSC$2, { children: loadingText })] })), !loading && noData && (jsxRuntime.jsxs(DivLoaderSC, { children: [jsxRuntime.jsx(DivIconDataSC, { children: jsxRuntime.jsx(NoDataIcon, {}) }), jsxRuntime.jsx(PTitleSC$2, { children: noDataText })] })), !loading && !noData && (shouldShowNoResult || noResult) && (jsxRuntime.jsxs(DivLoaderSC, { children: [jsxRuntime.jsx(DivIconDataSC, { children: jsxRuntime.jsx(NoResultIcon, {}) }), jsxRuntime.jsx(PTitleSC$2, { children: noResultText })] })), !shouldShowNoResult && !noData && !loading && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MenuContent, { "$removeSelectedGroup": !!removeSelectedGroup, onScroll: onPopupScroll, children: groupsToRender.map((group, index) => (jsxRuntime.jsxs(DivWrapperSC$4, { children: [index !== 0 && jsxRuntime.jsx(FISMenuSection, { withDivider: true }), group?.groupLabel && (jsxRuntime.jsx(FISMenuSection, { label: group?.groupLabel })), group.items.map((item, idx) => (jsxRuntime.jsx(FISTooltip, { title: item.label, variant: "primary", children: jsxRuntime.jsx(FISMenuItem, { title: item.label, description: item.description, size: size, onClickMenu: () => handleItemClick(item), selected: selectedValues.includes(item.value), type: "select" }) }, idx)))] }, index))) }), removeSelectedGroup && (jsxRuntime.jsx(FixedBottomSection, { children: jsxRuntime.jsx(DivWrapperSC$4, { children: removeSelectedGroup.items.map((item, idx) => (jsxRuntime.jsx(FISTooltip, { title: item.label, variant: "primary", children: jsxRuntime.jsx(FISMenuItem, { title: item.label, description: item.description, size: size, onClickMenu: () => onChangeSelected?.([]), type: "select", iconPrefix: jsxRuntime.jsx(RemoveIcon, {}), negative: true }) }, idx))) }) }))] }))] }));
+    return (jsxRuntime.jsxs(DivContainerSC$4, { "$maxHeight": maxHeight, className: className, children: [showInput && !combobox && (jsxRuntime.jsx(DivSearchSC, { children: jsxRuntime.jsx(FISInputText, { iconPrefix: jsxRuntime.jsx(SearchIcon, {}), placeholder: placeholder, value: search, onChange: handleSearchChange, ref: searchInputRef }) })), loading && (jsxRuntime.jsxs(DivLoaderSC, { children: [jsxRuntime.jsx(FISProgressCircular, { size: size, variant: "indeterminate" }), jsxRuntime.jsx(PTitleSC$2, { children: loadingText })] })), !loading && noData && (jsxRuntime.jsxs(DivLoaderSC, { children: [jsxRuntime.jsx(DivIconDataSC, { children: jsxRuntime.jsx(NoDataIcon, {}) }), jsxRuntime.jsx(PTitleSC$2, { children: noDataText })] })), !loading && !noData && (shouldShowNoResult || noResult) && (jsxRuntime.jsxs(DivLoaderSC, { children: [jsxRuntime.jsx(DivIconDataSC, { children: jsxRuntime.jsx(NoResultIcon, {}) }), jsxRuntime.jsx(PTitleSC$2, { children: noResultText })] })), !shouldShowNoResult && !noData && !loading && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MenuContent, { "$removeSelectedGroup": !!removeSelectedGroup, onScroll: onPopupScroll, children: groupsToRender.map((group, index) => (jsxRuntime.jsxs(DivWrapperSC$4, { children: [index !== 0 && jsxRuntime.jsx(FISMenuSection, { withDivider: true }), group?.groupLabel && (jsxRuntime.jsx(FISMenuSection, { label: group?.groupLabel })), group.items.map((item, idx) => (jsxRuntime.jsx(FISTooltip, { title: item.label, variant: "primary", children: renderOption ? (jsxRuntime.jsx("div", { onClick: () => handleItemClick(item), children: renderOption(item) })) : (jsxRuntime.jsx(FISMenuItem, { title: item.label, description: item.description, size: size, onClickMenu: () => handleItemClick(item), selected: selectedValues.includes(item.value), type: "select" })) }, idx)))] }, index))) }), removeSelectedGroup && (jsxRuntime.jsx(FixedBottomSection, { children: jsxRuntime.jsx(DivWrapperSC$4, { children: removeSelectedGroup.items.map((item, idx) => (jsxRuntime.jsx(FISTooltip, { title: item.label, variant: "primary", children: jsxRuntime.jsx(FISMenuItem, { title: item.label, description: item.description, size: size, onClickMenu: () => onChangeSelected?.([]), type: "select", iconPrefix: jsxRuntime.jsx(RemoveIcon, {}), negative: true }) }, idx))) }) }))] }))] }));
 };
 FISMenuSelect.displayName = "FISMenuSelect";
 
@@ -71323,7 +71323,7 @@ const DivInputWrapperSC$2 = styled.div `
   display: inline-block;
   width: 100%;
 `;
-const DivDropdownMenuSC$1 = styled.div `
+const DivDropdownMenuSC$2 = styled.div `
   margin-top: ${getTheme("com/select/vertical-gap")};
 `;
 const SelectedTagsWrapper$1 = styled.div `
@@ -72169,7 +72169,7 @@ const FISCombobox = React.forwardRef(({ className, options, value, disabled = fa
     }, [filteredOptions, searchValue]);
     return (jsxRuntime.jsxs(DivWrapperSC$3, { className: className, children: [(textLabel || iconLabel) && (jsxRuntime.jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsxRuntime.jsx(DivInputWrapperSC$2, { ref: setReferenceElement, onClick: handleToggle, children: jsxRuntime.jsx(FISInputField, { ...restProps, ref: ref, iconSuffix: isOpen ? jsxRuntime.jsx(ArrowUpIcon, {}) : jsxRuntime.jsx(ArrowDownIcon, {}), value: isOpen && searchValue !== undefined
                         ? searchValue
-                        : computedDisplayValue, disabled: disabled, onClickSuffix: handleToggle, onChange: handleInputChange, onKeyDown: handleInputKeyDown, "$isPointer": true }) }), message && (jsxRuntime.jsx(SpanHintSC$3, { className: classNames({ disabled, negative, positive }), children: message })), multi && value.length > 0 && (jsxRuntime.jsx(SelectedTagsWrapper$1, { children: jsxRuntime.jsx(MultipleValue, { options: selectedOptions, onRemove: handleOptionRemove }) })), isOpen && (jsxRuntime.jsx(Portal, { children: jsxRuntime.jsx(DivDropdownMenuSC$1, { ref: setPopperElement, style: { ...styles.popper, width: referenceElement?.offsetWidth }, ...attributes.popper, children: jsxRuntime.jsx(FISMenuSelect, { groups: filteredOptions, placeholder: placeholderSearch, loading: loading, multi: multi, combobox: true, noResult: hasNoResults, noResultText: noResultText, maxHeight: maxHeight, selectedValues: multi ? value : value ? [value] : [], onChangeSelected: (values) => {
+                        : computedDisplayValue, disabled: disabled, onClickSuffix: handleToggle, onChange: handleInputChange, onKeyDown: handleInputKeyDown, "$isPointer": true }) }), message && (jsxRuntime.jsx(SpanHintSC$3, { className: classNames({ disabled, negative, positive }), children: message })), multi && value.length > 0 && (jsxRuntime.jsx(SelectedTagsWrapper$1, { children: jsxRuntime.jsx(MultipleValue, { options: selectedOptions, onRemove: handleOptionRemove }) })), isOpen && (jsxRuntime.jsx(Portal, { children: jsxRuntime.jsx(DivDropdownMenuSC$2, { ref: setPopperElement, style: { ...styles.popper, width: referenceElement?.offsetWidth }, ...attributes.popper, children: jsxRuntime.jsx(FISMenuSelect, { groups: filteredOptions, placeholder: placeholderSearch, loading: loading, multi: multi, combobox: true, noResult: hasNoResults, noResultText: noResultText, maxHeight: maxHeight, selectedValues: multi ? value : value ? [value] : [], onChangeSelected: (values) => {
                             if (multi) {
                                 onChange(values);
                             }
@@ -73421,6 +73421,9 @@ FISProgressLinear.displayName = "FISProgressLinear";
 const DivContainerSC$1 = styled.div `
   display: inline-flex;
 `;
+const DivDropdownMenuSC$1 = styled.div `
+  margin-top: ${getTheme("com/select/vertical-gap")};
+`;
 const ButtonItem = styled.button `
   display: flex;
   justify-content: center;
@@ -74389,8 +74392,99 @@ const SplitButtonIcon = ({ size, variant, onIconClick, disabled = false, activeI
 var SplitButtonIcon$1 = React.memo(SplitButtonIcon);
 
 const FISSplitButton = React.forwardRef((props, ref) => {
-    const { className, label, icon, size = "md", variant = "primary", disabled = false, activeButton = false, activeIcon = false, loading = false, onButtonClick, onIconClick, } = props;
-    return (jsxRuntime.jsxs(DivContainerSC$1, { ref: ref, className: className, role: "group", "aria-label": `${label} split button`, children: [jsxRuntime.jsx(SplitButtonItem$1, { icon: icon, label: label, size: size, variant: variant, disabled: disabled || loading, activeButton: activeButton, loading: loading, onButtonClick: onButtonClick, "aria-label": `${label} main action` }), jsxRuntime.jsx(SplitButtonIcon$1, { size: size, variant: variant, disabled: disabled || loading, activeIcon: activeIcon, onIconClick: onIconClick, "aria-label": "Toggle dropdown", "aria-expanded": activeIcon })] }));
+    const { className, label, icon, size = "md", variant = "primary", disabled = false, activeButton = false, activeIcon, loading = false, onButtonClick, onIconClick, menuProps, portal, } = props;
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [referenceElement, setReferenceElement] = React.useState(null);
+    const [popperElement, setPopperElement] = React.useState(null);
+    const hasMenu = !!menuProps?.groups;
+    const isMenuOpen = hasMenu && isOpen;
+    const isButtonActive = isMenuOpen || activeButton;
+    const isIconActive = isMenuOpen || !!activeIcon;
+    const menuSize = menuProps?.size ?? (size === "lg" ? "lg" : "md");
+    const isActionMenu = !!menuProps?.onMenuItemClick;
+    const popperOptions = React.useMemo(() => ({
+        modifiers: [
+            { name: "preventOverflow", options: { padding: 0, altAxis: true } },
+            {
+                name: "offset",
+                options: {
+                    offset: [0, 4],
+                },
+            },
+        ],
+        placement: "bottom-start",
+        strategy: "fixed",
+    }), []);
+    const { styles, attributes } = usePopper(referenceElement, popperElement, popperOptions);
+    const handleContainerRef = React.useCallback((node) => {
+        setReferenceElement(node);
+        if (typeof ref === "function") {
+            ref(node);
+            return;
+        }
+        if (ref) {
+            ref.current =
+                node;
+        }
+    }, [ref]);
+    const handleIconClick = React.useCallback(() => {
+        if (hasMenu) {
+            setIsOpen((prev) => !prev);
+        }
+        onIconClick?.();
+    }, [hasMenu, onIconClick]);
+    const handleButtonClick = React.useCallback(() => {
+        if (hasMenu) {
+            setIsOpen(true);
+            return;
+        }
+        onButtonClick?.();
+    }, [hasMenu, onButtonClick]);
+    const handleMenuClick = React.useCallback(() => {
+        if (!menuProps?.multi) {
+            setIsOpen(false);
+        }
+        menuProps?.onClickMenu?.();
+    }, [menuProps]);
+    const handleChangeSelected = React.useCallback((values) => {
+        if (menuProps?.onMenuItemClick) {
+            const clickedValue = values[values.length - 1];
+            const clickedItem = menuProps.groups
+                .flatMap((group) => group.items)
+                .find((item) => item.value === clickedValue);
+            if (clickedItem) {
+                menuProps.onMenuItemClick(clickedItem);
+                setIsOpen(false);
+            }
+            return;
+        }
+        menuProps?.onChangeSelected?.(values);
+    }, [menuProps]);
+    React.useEffect(() => {
+        if (!isMenuOpen)
+            return;
+        const handleClickOutside = (event) => {
+            const target = event.target;
+            if (referenceElement &&
+                !referenceElement.contains(target) &&
+                popperElement &&
+                !popperElement.contains(target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, [isMenuOpen, popperElement, referenceElement]);
+    React.useEffect(() => {
+        if (disabled || loading || !hasMenu) {
+            setIsOpen(false);
+        }
+    }, [disabled, hasMenu, loading]);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(DivContainerSC$1, { ref: handleContainerRef, className: className, role: "group", "aria-label": `${label} split button`, children: [jsxRuntime.jsx(SplitButtonItem$1, { icon: icon, label: label, size: size, variant: variant, disabled: disabled || loading, activeButton: isButtonActive, loading: loading, onButtonClick: handleButtonClick, "aria-label": `${label} main action`, "aria-haspopup": hasMenu ? "menu" : undefined, "aria-expanded": hasMenu ? isMenuOpen : undefined }), jsxRuntime.jsx(SplitButtonIcon$1, { size: size, variant: variant, disabled: disabled || loading, activeIcon: isIconActive, onIconClick: handleIconClick, "aria-label": "Toggle dropdown", "aria-expanded": isMenuOpen })] }), isMenuOpen && menuProps && (jsxRuntime.jsx(Portal, { portal: portal, children: jsxRuntime.jsx(DivDropdownMenuSC$1, { ref: setPopperElement, style: {
+                        ...styles.popper,
+                        width: referenceElement?.offsetWidth,
+                        zIndex: 9999,
+                    }, ...attributes.popper, children: jsxRuntime.jsx(FISMenuSelect, { ...menuProps, size: menuSize, selectedValues: isActionMenu ? [] : menuProps.selectedValues, focusSearchInput: menuProps.focusSearchInput ?? false, onChangeSelected: handleChangeSelected, onClickMenu: handleMenuClick }) }) }))] }));
 });
 FISSplitButton.displayName = "FISSplitButton";
 
@@ -74868,6 +74962,7 @@ const FISSelect = React.forwardRef(({ className, style, size = "md", options, va
         onSearchChange,
         maxHeight,
         onPopupScroll,
+        renderOption,
         ...restProps,
     }), [
         options,
@@ -74882,6 +74977,7 @@ const FISSelect = React.forwardRef(({ className, style, size = "md", options, va
         onSearchChange,
         maxHeight,
         onPopupScroll,
+        renderOption,
         restProps,
     ]);
     React.useEffect(() => {