fis-component 0.1.15 → 0.1.16

package/dist/cjs/index.js

@@ -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";