fis-component 0.1.15 → 0.1.16

package/dist/cjs/types/src/assets/icons/DownloadIcon.d.ts

@@ -0,0 +1,3 @@
+import { SvgIconProps } from "./SVGIconProps";
+declare function DownloadIcon(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
+export default DownloadIcon;

package/dist/cjs/types/src/assets/icons/index.d.ts

@@ -28,6 +28,7 @@ export { default as ArrowUpIcon } from "./ArrowUpIcon";
 export { default as CloseChipIcon } from "./CloseChipIcon";
 export { default as TimeIcon } from "./TimeIcon";
 export { default as DateIcon } from "./DateIcon";
+export { default as DownloadIcon } from "./DownloadIcon";
 export { default as ChevronSelectorIcon } from "./ChevronSelector";
 export { default as EditIcon } from "./EditIcon";
 export { default as DeleteIcon } from "./DeleteIcon";

package/dist/cjs/types/src/components/SplitButton/SplitButton.stories.d.ts

@@ -10,3 +10,4 @@ export declare const Secondary: Story;
 export declare const Disabled: Story;
 export declare const Loading: Story;
 export declare const Active: Story;
+export declare const WithMenu: Story;

package/dist/cjs/types/src/components/SplitButton/index.d.ts

@@ -14,5 +14,7 @@ declare const FISSplitButton: React.ForwardRefExoticComponent<{
     onIconClick?: () => void;
 } & {
     className?: string;
+    menuProps?: import("./types").SplitButtonMenuProps;
+    portal?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 export default FISSplitButton;

package/dist/cjs/types/src/components/SplitButton/styles.d.ts

@@ -8,6 +8,7 @@ export type SplitButtonProps = {
     $loading?: boolean;
 };
 export declare const DivContainerSC: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SplitButtonProps>> & string;
+export declare const DivDropdownMenuSC: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ButtonItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, SplitButtonProps>> & string;
 export declare const ButtonIconItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, SplitButtonProps>> & string;
 export declare const DivIconItemSC: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SplitButtonProps>> & string;

package/dist/cjs/types/src/components/SplitButton/types.d.ts

@@ -1,4 +1,5 @@
 import React, { ComponentPropsWithoutRef } from "react";
+import type { MenuItem, MenuProps, MenuSize } from "../MenuSelect/types";
 export type SplitButtonSize = "xs" | "sm" | "md" | "lg";
 export type SplitButtonVariant = "primary" | "secondary" | "tertiary" | "primary-white" | "secondary-white";
 export type SplitButtonItemProps = {
@@ -16,6 +17,12 @@ export type SplitButtonIconProps = {
     activeIcon?: boolean;
     onIconClick?: () => void;
 } & ComponentPropsWithoutRef<"button">;
+export type SplitButtonMenuProps = Omit<MenuProps, "size"> & {
+    size?: MenuSize;
+    onMenuItemClick?: (item: MenuItem) => void;
+};
 export type SplitButtonProps = SplitButtonItemProps & SplitButtonIconProps & {
     className?: string;
+    menuProps?: SplitButtonMenuProps;
+    portal?: boolean;
 };

package/dist/esm/index.js

@@ -71303,7 +71303,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 `
@@ -72149,7 +72149,7 @@ const FISCombobox = forwardRef(({ className, options, value, disabled = false, t
     }, [filteredOptions, searchValue]);
     return (jsxs(DivWrapperSC$3, { className: className, children: [(textLabel || iconLabel) && (jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsx(DivInputWrapperSC$2, { ref: setReferenceElement, onClick: handleToggle, children: jsx(FISInputField, { ...restProps, ref: ref, iconSuffix: isOpen ? jsx(ArrowUpIcon, {}) : jsx(ArrowDownIcon, {}), value: isOpen && searchValue !== undefined
                         ? searchValue
-                        : computedDisplayValue, disabled: disabled, onClickSuffix: handleToggle, onChange: handleInputChange, onKeyDown: handleInputKeyDown, "$isPointer": true }) }), message && (jsx(SpanHintSC$3, { className: classNames({ disabled, negative, positive }), children: message })), multi && value.length > 0 && (jsx(SelectedTagsWrapper$1, { children: jsx(MultipleValue, { options: selectedOptions, onRemove: handleOptionRemove }) })), isOpen && (jsx(Portal, { children: jsx(DivDropdownMenuSC$1, { ref: setPopperElement, style: { ...styles.popper, width: referenceElement?.offsetWidth }, ...attributes.popper, children: 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 && (jsx(SpanHintSC$3, { className: classNames({ disabled, negative, positive }), children: message })), multi && value.length > 0 && (jsx(SelectedTagsWrapper$1, { children: jsx(MultipleValue, { options: selectedOptions, onRemove: handleOptionRemove }) })), isOpen && (jsx(Portal, { children: jsx(DivDropdownMenuSC$2, { ref: setPopperElement, style: { ...styles.popper, width: referenceElement?.offsetWidth }, ...attributes.popper, children: 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);
                             }
@@ -73401,6 +73401,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;
@@ -74369,8 +74372,99 @@ const SplitButtonIcon$1 = ({ size, variant, onIconClick, disabled = false, activ
 var SplitButtonIcon = memo(SplitButtonIcon$1);
 
 const FISSplitButton = forwardRef((props, ref) => {
-    const { className, label, icon, size = "md", variant = "primary", disabled = false, activeButton = false, activeIcon = false, loading = false, onButtonClick, onIconClick, } = props;
-    return (jsxs(DivContainerSC$1, { ref: ref, className: className, role: "group", "aria-label": `${label} split button`, children: [jsx(SplitButtonItem, { icon: icon, label: label, size: size, variant: variant, disabled: disabled || loading, activeButton: activeButton, loading: loading, onButtonClick: onButtonClick, "aria-label": `${label} main action` }), jsx(SplitButtonIcon, { 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] = useState(false);
+    const [referenceElement, setReferenceElement] = useState(null);
+    const [popperElement, setPopperElement] = 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 = useMemo$1(() => ({
+        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 = useCallback((node) => {
+        setReferenceElement(node);
+        if (typeof ref === "function") {
+            ref(node);
+            return;
+        }
+        if (ref) {
+            ref.current =
+                node;
+        }
+    }, [ref]);
+    const handleIconClick = useCallback(() => {
+        if (hasMenu) {
+            setIsOpen((prev) => !prev);
+        }
+        onIconClick?.();
+    }, [hasMenu, onIconClick]);
+    const handleButtonClick = useCallback(() => {
+        if (hasMenu) {
+            setIsOpen(true);
+            return;
+        }
+        onButtonClick?.();
+    }, [hasMenu, onButtonClick]);
+    const handleMenuClick = useCallback(() => {
+        if (!menuProps?.multi) {
+            setIsOpen(false);
+        }
+        menuProps?.onClickMenu?.();
+    }, [menuProps]);
+    const handleChangeSelected = 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]);
+    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]);
+    useEffect(() => {
+        if (disabled || loading || !hasMenu) {
+            setIsOpen(false);
+        }
+    }, [disabled, hasMenu, loading]);
+    return (jsxs(Fragment, { children: [jsxs(DivContainerSC$1, { ref: handleContainerRef, className: className, role: "group", "aria-label": `${label} split button`, children: [jsx(SplitButtonItem, { 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 }), jsx(SplitButtonIcon, { size: size, variant: variant, disabled: disabled || loading, activeIcon: isIconActive, onIconClick: handleIconClick, "aria-label": "Toggle dropdown", "aria-expanded": isMenuOpen })] }), isMenuOpen && menuProps && (jsx(Portal, { portal: portal, children: jsx(DivDropdownMenuSC$1, { ref: setPopperElement, style: {
+                        ...styles.popper,
+                        width: referenceElement?.offsetWidth,
+                        zIndex: 9999,
+                    }, ...attributes.popper, children: jsx(FISMenuSelect, { ...menuProps, size: menuSize, selectedValues: isActionMenu ? [] : menuProps.selectedValues, focusSearchInput: menuProps.focusSearchInput ?? false, onChangeSelected: handleChangeSelected, onClickMenu: handleMenuClick }) }) }))] }));
 });
 FISSplitButton.displayName = "FISSplitButton";