fis-component 0.0.50 → 0.0.52

package/dist/esm/index.js

@@ -61548,7 +61548,7 @@ function ExitIcon(props) {
 }
 
 function InfoIcon(props) {
-    return (jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [jsx("g", { "clip-path": "url(#clip0_6263_11228)", children: jsx("path", { d: "M7.99967 10.6667V8.00004M7.99967 5.33337H8.00634M14.6663 8.00004C14.6663 11.6819 11.6816 14.6667 7.99967 14.6667C4.31778 14.6667 1.33301 11.6819 1.33301 8.00004C1.33301 4.31814 4.31778 1.33337 7.99967 1.33337C11.6816 1.33337 14.6663 4.31814 14.6663 8.00004Z", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_6263_11228", children: jsx("rect", { width: "16", height: "16", fill: "white" }) }) })] }));
+    return (jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M7.99996 0.666626C3.94987 0.666626 0.666626 3.94987 0.666626 7.99996C0.666626 12.05 3.94987 15.3333 7.99996 15.3333C12.05 15.3333 15.3333 12.05 15.3333 7.99996C15.3333 3.94987 12.05 0.666626 7.99996 0.666626ZM7.99996 4.66663C7.63177 4.66663 7.33329 4.9651 7.33329 5.33329C7.33329 5.70148 7.63177 5.99996 7.99996 5.99996H8.00663C8.37482 5.99996 8.67329 5.70148 8.67329 5.33329C8.67329 4.9651 8.37482 4.66663 8.00663 4.66663H7.99996ZM8.66663 7.99996C8.66663 7.63177 8.36815 7.33329 7.99996 7.33329C7.63177 7.33329 7.33329 7.63177 7.33329 7.99996V10.6666C7.33329 11.0348 7.63177 11.3333 7.99996 11.3333C8.36815 11.3333 8.66663 11.0348 8.66663 10.6666V7.99996Z", fill: "#0055C2" }) }));
 }
 
 function CheckIcon(props) {
@@ -61558,12 +61558,17 @@ function CheckIcon(props) {
 
 function WarningIcon(props) {
     const { width = 16, height = 16, ...rest } = props;
-    return (jsx("svg", { width: width, height: height, viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest, children: jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.80013 0.666626C4.75004 0.666626 1.4668 3.94987 1.4668 7.99996C1.4668 12.05 4.75004 15.3333 8.80013 15.3333C12.8502 15.3333 16.1335 12.05 16.1335 7.99996C16.1335 3.94987 12.8502 0.666626 8.80013 0.666626ZM9.4668 5.33329C9.4668 4.9651 9.16832 4.66663 8.80013 4.66663C8.43194 4.66663 8.13346 4.9651 8.13346 5.33329V7.99996C8.13346 8.36815 8.43194 8.66663 8.80013 8.66663C9.16832 8.66663 9.4668 8.36815 9.4668 7.99996V5.33329ZM8.80013 9.99996C8.43194 9.99996 8.13346 10.2984 8.13346 10.6666C8.13346 11.0348 8.43194 11.3333 8.80013 11.3333H8.8068C9.17499 11.3333 9.47346 11.0348 9.47346 10.6666C9.47346 10.2984 9.17499 9.99996 8.8068 9.99996H8.80013Z", fill: "#BC6300" }) }));
+    return (jsx("svg", { width: width, height: height, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest, children: jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M7.99996 0.666626C3.94987 0.666626 0.666626 3.94987 0.666626 7.99996C0.666626 12.05 3.94987 15.3333 7.99996 15.3333C12.05 15.3333 15.3333 12.05 15.3333 7.99996C15.3333 3.94987 12.05 0.666626 7.99996 0.666626ZM8.66663 5.33329C8.66663 4.9651 8.36815 4.66663 7.99996 4.66663C7.63177 4.66663 7.33329 4.9651 7.33329 5.33329V7.99996C7.33329 8.36815 7.63177 8.66663 7.99996 8.66663C8.36815 8.66663 8.66663 8.36815 8.66663 7.99996V5.33329ZM7.99996 9.99996C7.63177 9.99996 7.33329 10.2984 7.33329 10.6666C7.33329 11.0348 7.63177 11.3333 7.99996 11.3333H8.00663C8.37482 11.3333 8.67329 11.0348 8.67329 10.6666C8.67329 10.2984 8.37482 9.99996 8.00663 9.99996H7.99996Z", fill: "#893700" }) }));
 }
 
 function ErrorIcon(props) {
     const { width = 16, height = 16, ...rest } = props;
-    return (jsx("svg", { width: width, height: height, viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest, children: jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.40023 0.666626C4.35014 0.666626 1.06689 3.94987 1.06689 7.99996C1.06689 12.05 4.35014 15.3333 8.40023 15.3333C12.4503 15.3333 15.7336 12.05 15.7336 7.99996C15.7336 3.94987 12.4503 0.666626 8.40023 0.666626ZM9.06689 5.33329C9.06689 4.9651 8.76842 4.66663 8.40023 4.66663C8.03204 4.66663 7.73356 4.9651 7.73356 5.33329V7.99996C7.73356 8.36815 8.03204 8.66663 8.40023 8.66663C8.76842 8.66663 9.06689 8.36815 9.06689 7.99996V5.33329ZM8.40023 9.99996C8.03204 9.99996 7.73356 10.2984 7.73356 10.6666C7.73356 11.0348 8.03204 11.3333 8.40023 11.3333H8.40689C8.77508 11.3333 9.07356 11.0348 9.07356 10.6666C9.07356 10.2984 8.77508 9.99996 8.40689 9.99996H8.40023Z", fill: "#D8473C" }) }));
+    return (jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M7.99996 0.666626C3.94987 0.666626 0.666626 3.94987 0.666626 7.99996C0.666626 12.05 3.94987 15.3333 7.99996 15.3333C12.05 15.3333 15.3333 12.05 15.3333 7.99996C15.3333 3.94987 12.05 0.666626 7.99996 0.666626ZM8.66663 5.33329C8.66663 4.9651 8.36815 4.66663 7.99996 4.66663C7.63177 4.66663 7.33329 4.9651 7.33329 5.33329V7.99996C7.33329 8.36815 7.63177 8.66663 7.99996 8.66663C8.36815 8.66663 8.66663 8.36815 8.66663 7.99996V5.33329ZM7.99996 9.99996C7.63177 9.99996 7.33329 10.2984 7.33329 10.6666C7.33329 11.0348 7.63177 11.3333 7.99996 11.3333H8.00663C8.37482 11.3333 8.67329 11.0348 8.67329 10.6666C8.67329 10.2984 8.37482 9.99996 8.00663 9.99996H7.99996Z", fill: "#A80A12" }) }));
+}
+
+function PositiveIcon(props) {
+    const { width = 16, height = 16, ...rest } = props;
+    return (jsx("svg", { width: width, height: height, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M7.99996 0.666626C3.94987 0.666626 0.666626 3.94987 0.666626 7.99996C0.666626 12.05 3.94987 15.3333 7.99996 15.3333C12.05 15.3333 15.3333 12.05 15.3333 7.99996C15.3333 3.94987 12.05 0.666626 7.99996 0.666626ZM11.4714 6.47136C11.7317 6.21101 11.7317 5.7889 11.4714 5.52855C11.211 5.26821 10.7889 5.26821 10.5286 5.52855L6.99996 9.05715L5.47136 7.52855C5.21101 7.2682 4.7889 7.2682 4.52855 7.52855C4.26821 7.7889 4.26821 8.21101 4.52855 8.47136L6.52855 10.4714C6.7889 10.7317 7.21101 10.7317 7.47136 10.4714L11.4714 6.47136Z", fill: "#00652A" }) }));
 }
 
 function ArrowDownIcon(props) {
@@ -62513,7 +62518,7 @@ const FISDivider = (props) => {
 
 const themeIcons = {
     info: jsx(InfoIcon, {}),
-    positive: jsx(CheckIcon, {}),
+    positive: jsx(PositiveIcon, {}),
     caution: jsx(WarningIcon, {}),
     negative: jsx(ErrorIcon, {}),
 };
@@ -64210,6 +64215,7 @@ const InputSC$2 = styled.input `
   border: none;
   background: transparent;
   outline: none;
+  cursor: ${(props) => (props.$isPointer ? "pointer" : "text")};
   padding-right: calc(
     ${getTheme("com/input/field/size-md/label/sub-spacing")} +
       ${getTheme("com/input/field/right-padding")}
@@ -64566,32 +64572,41 @@ const DivContainerSC$7 = styled.div `
     pointer-events: auto;
   }
 
-  &:has(${InputSC$2}:disabled),
-  &:has(${InputSC$2}:read-only) {
+  &:has(${InputSC$2}:disabled) {
     outline-color: ${getTheme("com/input/field/disable/stroke-color")};
     background-color: ${getTheme("com/input/field/disable/background-color")};
     cursor: not-allowed;
 
+    ${InputSC$2} {
+      cursor: not-allowed;
+    }
+
     ${DivIconSC$2} {
       color: ${getTheme("com/input/field/disable/icon-color")};
+      cursor: not-allowed;
     }
     ${DivIconSuffixSC$1} {
       color: ${getTheme("com/input/field/disable/icon-color")};
+      cursor: not-allowed;
     }
     ${DivIconPrefixSC$1} {
       color: ${getTheme("com/input/field/disable/icon-color")};
+      cursor: not-allowed;
     }
 
     .icon-suffix {
       pointer-events: none;
       color: ${getTheme("com/button/disable/icon-color")};
+      cursor: not-allowed;
     }
 
     ${SpanTextPrefixSC} {
       color: ${getTheme("com/input/field/disable/label-color")};
+      cursor: not-allowed;
     }
     ${SpanTextSuffixSC} {
       color: ${getTheme("com/input/field/disable/label-color")};
+      cursor: not-allowed;
     }
 
     &::placeholder {
@@ -64599,11 +64614,49 @@ const DivContainerSC$7 = styled.div `
     }
   }
 
-  &:has(${InputSC$2}:read-only) {
+  &:has(${InputSC$2}:read-only):not(:has(${InputSC$2}:disabled)) {
     cursor: default;
+    outline-color: ${getTheme("com/input/field/disable/stroke-color")};
+    background-color: ${getTheme("com/input/field/disable/background-color")};
+
+    ${InputSC$2} {
+      cursor: default;
+    }
+
+    ${DivIconSC$2} {
+      color: ${getTheme("com/input/field/disable/icon-color")};
+      cursor: default;
+    }
+    ${DivIconSuffixSC$1} {
+      color: ${getTheme("com/input/field/disable/icon-color")};
+      cursor: default;
+    }
+    ${DivIconPrefixSC$1} {
+      color: ${getTheme("com/input/field/disable/icon-color")};
+      cursor: default;
+    }
+
+    .icon-suffix {
+      pointer-events: none;
+      color: ${getTheme("com/button/disable/icon-color")};
+      cursor: default;
+    }
+
+    ${SpanTextPrefixSC} {
+      color: ${getTheme("com/input/field/disable/label-color")};
+      cursor: default;
+    }
+    ${SpanTextSuffixSC} {
+      color: ${getTheme("com/input/field/disable/label-color")};
+      cursor: default;
+    }
+
+    &::placeholder {
+      color: ${getTheme("com/input/field/disable/label-color")};
+    }
   }
 
-  &:hover:not(.disabled):not(:has(.icon-suffix:hover)) {
+  &:hover:not(:has(${InputSC$2}:disabled)):not(:has(.icon-suffix:hover)) {
     outline-color: ${getTheme("com/input/field/default/border/hover")};
     background-color: ${getTheme("com/input/field/default/background/hover")};
 
@@ -64673,7 +64726,7 @@ const FISInputField = forwardRef(({ onClickSuffix, onClickPrefix, ...props }, re
                     "active-dropdown": activeDropdown,
                     disabled: disabled,
                     "input-text-lg": sizeInput === "lg",
-                }), onClick: onClickPrefix, children: [iconPrefix && jsx(DivIconDropSC, { children: iconPrefix }), labelPrefix && jsx(SpanTextDropSC, { children: labelPrefix }), jsx(DivIconPrefixSC$1, { children: jsx(DropdownIcon, {}) })] })), jsx(InputSC$2, { ...rest, ref: ref, disabled: disabled, className: classNames({
+                }), onClick: onClickPrefix, children: [iconPrefix && jsx(DivIconDropSC, { children: iconPrefix }), labelPrefix && jsx(SpanTextDropSC, { children: labelPrefix }), jsx(DivIconPrefixSC$1, { children: jsx(DropdownIcon, {}) })] })), jsx(InputSC$2, { ...rest, ref: ref, disabled: disabled, "$isPointer": props.$isPointer, className: classNames({
                     negative: negative,
                     "input-text-lg": sizeInput === "lg",
                     prefix: iconPrefix,
@@ -66294,7 +66347,7 @@ const PTitleSC$2 = styled.p `
   ${getTheme("Paragraph/Sm")}
   color: ${getTheme("com/menu/item/action/label/color-text/default")};
 `;
-styled.div `
+const DivWrapperMenuSC = styled.div `
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -67324,62 +67377,64 @@ const FISMenuSection = ({ label, withAction = false, actionText, actionLabel = f
 };
 FISMenuSection.displayName = "FISMenuSection";
 
-const FISMenuSelect = ({ placeholder, groups, size = "md", multi = false, selectedValues = [], onChangeSelected, loading = false, noData = false, noResult = false, combobox, className, onClickMenu, loadingText = "Data loading...", noDataText = "No data", noResultText = "No result", removeSelectedText = "Remove selected", selectedGroupLabel = "Selected", }) => {
-    const [search, setSearch] = useState("");
-    const menuState = useMemo$1(() => {
-        const selectedItemsGroup = multi
-            ? {
-                groupLabel: selectedGroupLabel,
-                items: groups
-                    .flatMap((group) => group.items)
-                    .filter((item) => selectedValues?.includes(item.value) &&
-                    item?.label?.toLowerCase().includes(search.toLowerCase())),
-            }
-            : null;
-        const otherGroups = groups
-            .map((group) => ({
-            groupLabel: group?.groupLabel,
-            items: group.items.filter((item) => (!multi || !selectedValues?.includes(item.value)) &&
-                item?.label?.toLowerCase().includes(search.toLowerCase())),
-        }))
-            .filter((group) => group.items.length > 0);
-        const filteredGroups = selectedItemsGroup && selectedItemsGroup.items.length > 0
-            ? [selectedItemsGroup, ...otherGroups]
-            : otherGroups;
-        const removeSelectedGroup = multi && selectedValues.length > 0
-            ? {
-                groupLabel: "",
-                items: [
-                    {
-                        label: removeSelectedText,
-                        description: "",
-                        value: "__remove_selected__",
-                    },
-                ],
-            }
-            : null;
+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", }) => {
+    const [localSearch, setLocalSearch] = useState(searchValue);
+    useEffect(() => {
+        setLocalSearch(searchValue);
+    }, [searchValue]);
+    const search = localSearch;
+    const filteredGroups = useMemo$1(() => {
+        let filteredItems = groups.map((group) => ({
+            groupLabel: group.groupLabel,
+            items: multi
+                ? group.items.filter((item) => !selectedValues.includes(item.value))
+                : group.items,
+        }));
+        if (search.trim()) {
+            filteredItems = filteredItems.map((group) => ({
+                ...group,
+                items: group.items.filter((item) => item.label.toLowerCase().includes(search.toLowerCase())),
+            }));
+        }
+        return filteredItems.filter((group) => group.items.length > 0);
+    }, [groups, multi, selectedValues, search]);
+    const selectedItemsGroup = useMemo$1(() => {
+        if (!multi)
+            return null;
+        const selectedItems = groups
+            .flatMap((g) => g.items)
+            .filter((item) => selectedValues.includes(item.value));
+        if (selectedItems.length === 0)
+            return null;
         return {
-            search,
-            selectedItemsGroup,
-            otherGroups,
-            filteredGroups,
-            removeSelectedGroup,
+            groupLabel: selectedGroupLabel,
+            items: selectedItems,
         };
-    }, [
-        groups,
-        multi,
-        search,
-        selectedValues,
-        removeSelectedText,
-        selectedGroupLabel,
-    ]);
+    }, [groups, multi, selectedValues, selectedGroupLabel]);
+    const groupsToRender = selectedItemsGroup
+        ? [selectedItemsGroup, ...filteredGroups]
+        : filteredGroups;
+    const removeSelectedGroup = multi && selectedValues.length > 0
+        ? {
+            groupLabel: "",
+            items: [
+                {
+                    label: removeSelectedText,
+                    description: "",
+                    value: "__remove_selected__",
+                },
+            ],
+        }
+        : null;
     const totalItems = groups.reduce((acc, group) => acc + group.items.length, 0);
-    const showInput = totalItems >= 7;
     const hasSearch = search.trim() !== "";
-    const hasFilteredResult = menuState.filteredGroups.length > 0;
+    const showInput = totalItems >= 7 || hasSearch;
+    const hasFilteredResult = groupsToRender.length > 0;
     const shouldShowNoResult = hasSearch && !hasFilteredResult;
     const handleSearchChange = (e) => {
-        setSearch(e.target.value);
+        const value = e.target.value;
+        setLocalSearch(value);
+        onSearchChange?.(value);
     };
     const handleItemClick = (item) => {
         if (multi) {
@@ -67388,22 +67443,22 @@ const FISMenuSelect = ({ placeholder, groups, size = "md", multi = false, select
                 return;
             }
             let newValues;
-            if (selectedValues?.includes(item.value)) {
+            if (selectedValues.includes(item.value)) {
                 newValues = selectedValues.filter((v) => v !== item.value);
             }
             else {
-                newValues = [...(selectedValues || []), item.value];
+                newValues = [...selectedValues, item.value];
             }
             onChangeSelected?.(newValues);
             return;
         }
         else {
-            const newValues = selectedValues?.[0] === item.value ? [] : [item.value];
+            const newValues = selectedValues[0] === item.value ? [] : [item.value];
             onChangeSelected?.(newValues);
             onClickMenu?.();
         }
     };
-    return (jsxs(DivContainerSC$4, { className: className, children: [showInput && !combobox && (jsx(DivSearchSC, { children: jsx(FISInputText, { iconPrefix: jsx(SearchIcon, {}), placeholder: placeholder, onChange: handleSearchChange }) })), (shouldShowNoResult || noResult) && (jsxs(DivLoaderSC, { children: [jsx(DivIconDataSC, { children: jsx(NoResultIcon, {}) }), jsx(PTitleSC$2, { children: noResultText })] })), noData && (jsxs(DivLoaderSC, { children: [jsx(DivIconDataSC, { children: jsx(NoDataIcon, {}) }), jsx(PTitleSC$2, { children: noDataText })] })), loading && (jsxs(DivLoaderSC, { children: [jsx(FISProgressCircular, { size: size, variant: "indeterminate" }), jsx(PTitleSC$2, { children: loadingText })] })), !shouldShowNoResult && (jsxs(Fragment, { children: [jsx(MenuContent, { "$removeSelectedGroup": !!menuState.removeSelectedGroup, children: menuState.filteredGroups.map((group, index) => (jsxs(DivWrapperSC$4, { children: [index !== 0 && jsx(FISMenuSection, { withDivider: true }), group?.groupLabel && (jsx(FISMenuSection, { label: group?.groupLabel })), group.items.map((item, idx) => (jsx(FISMenuItem, { title: item.label, description: item.description, size: size, onClickMenu: () => handleItemClick(item), selected: selectedValues?.includes(item.value), type: "select" }, idx)))] }, index))) }), menuState.removeSelectedGroup && (jsx(FixedBottomSection, { children: jsx(DivWrapperSC$4, { children: menuState.removeSelectedGroup.items.map((item, idx) => (jsx(FISMenuItem, { title: item.label, description: item.description, size: size, onClickMenu: () => onChangeSelected?.([]), type: "select", iconPrefix: jsx(RemoveIcon, {}), negative: true }, idx))) }) }))] }))] }));
+    return (jsx(DivContainerSC$4, { className: className, children: jsxs(DivWrapperMenuSC, { children: [showInput && !combobox && (jsx(DivSearchSC, { children: jsx(FISInputText, { iconPrefix: jsx(SearchIcon, {}), placeholder: placeholder, value: search, onChange: handleSearchChange }) })), (shouldShowNoResult || noResult) && (jsxs(DivLoaderSC, { children: [jsx(DivIconDataSC, { children: jsx(NoResultIcon, {}) }), jsx(PTitleSC$2, { children: noResultText })] })), noData && (jsxs(DivLoaderSC, { children: [jsx(DivIconDataSC, { children: jsx(NoDataIcon, {}) }), jsx(PTitleSC$2, { children: noDataText })] })), loading && (jsxs(DivLoaderSC, { children: [jsx(FISProgressCircular, { size: size, variant: "indeterminate" }), jsx(PTitleSC$2, { children: loadingText })] })), !shouldShowNoResult && !noData && !loading && (jsxs(Fragment, { children: [jsx(MenuContent, { "$removeSelectedGroup": !!removeSelectedGroup, children: groupsToRender.map((group, index) => (jsxs(DivWrapperSC$4, { children: [index !== 0 && jsx(FISMenuSection, { withDivider: true }), jsx(FISMenuSection, { label: group?.groupLabel }), group.items.map((item, idx) => (jsx(FISMenuItem, { title: item.label, description: item.description, size: size, onClickMenu: () => handleItemClick(item), selected: selectedValues.includes(item.value), type: "select" }, idx)))] }, index))) }), removeSelectedGroup && (jsx(FixedBottomSection, { children: jsx(DivWrapperSC$4, { children: removeSelectedGroup.items.map((item, idx) => (jsx(FISMenuItem, { title: item.label, description: item.description, size: size, onClickMenu: () => onChangeSelected?.([]), type: "select", iconPrefix: jsx(RemoveIcon, {}), negative: true }, idx))) }) }))] }))] }) }));
 };
 FISMenuSelect.displayName = "FISMenuSelect";
 
@@ -69951,12 +70006,15 @@ function getDefaultContainer() {
     rootPortal.setAttribute("id", rootId);
     return document.body.appendChild(rootPortal);
 }
-function Portal(props) {
+function Portal({ container, children, portal }) {
     const [mountNode, setMountNode] = useState(null);
     useLayoutEffect$2(() => {
-        setMountNode(props.container || getDefaultContainer());
-    }, [props.container]);
-    return mountNode ? createPortal(props.children, mountNode) : null;
+        setMountNode(container || getDefaultContainer());
+    }, [container]);
+    if (!portal) {
+        return children || null;
+    }
+    return mountNode ? createPortal(children, mountNode) : null;
 }
 
 const DivChipButtonWrapperSC = styled.div `
@@ -70801,7 +70859,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 }) }), 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, 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$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, selectedValues: multi ? value : value ? [value] : [], onChangeSelected: (values) => {
                             if (multi) {
                                 onChange(values);
                             }
@@ -71265,7 +71323,7 @@ const DivHeaderCellContainerSC = styled.div `
 `;
 
 const FISTableHeaderCell = forwardRef(({ className, label, description, rightComponent, disabled, hasRightDivider = true, hasTruncateLabel = false, onlyIcon = false, textAlign = "left", ...rest }, ref) => {
-    return (jsx(DivHeaderCellContainerSC, { ref: ref, className: classNames("header-cell-container", className), "$textAlign": textAlign, "$disabled": disabled, "$hasTruncateLabel": hasTruncateLabel, "$hasRightDivider": hasRightDivider, "$onlyIcon": onlyIcon, ...rest, children: jsxs("div", { className: "header-cell-content", children: [jsxs("div", { className: "cell-content title", children: [label && jsx("div", { className: "label", children: label }), rightComponent && (jsx("div", { className: "right-component-father", children: jsx("div", { className: "right-component-child", children: rightComponent }) }))] }), jsx("div", { className: "cell-content", children: description && jsx("div", { className: "description", children: description }) })] }) }));
+    return (jsx(DivHeaderCellContainerSC, { ref: ref, className: classNames("header-cell-container", className), "$textAlign": textAlign, "$disabled": disabled, "$hasTruncateLabel": hasTruncateLabel, "$hasRightDivider": hasRightDivider, "$onlyIcon": onlyIcon, ...rest, children: jsxs("div", { className: "header-cell-content", children: [jsxs("div", { className: "cell-content title", children: [label && jsx("div", { className: "label", children: label }), rightComponent && (jsx("div", { className: "right-component-father", children: jsx("div", { className: "right-component-child", children: rightComponent }) }))] }), description && (jsx("div", { className: "cell-content", children: jsx("div", { className: "description", children: description }) }))] }) }));
 });
 FISTableHeaderCell.displayName = "FISTableHeaderCell";
 
@@ -72999,7 +73057,7 @@ const DivInputWrapperSC = styled.div `
   width: 100%;
 `;
 const DivDropdownMenuSC = styled.div `
-  margin-top: ${getTheme("com/select/vertical-gap")};
+  /* margin-top: ${getTheme("com/select/vertical-gap")}; */
 `;
 const SelectedTagsWrapper = styled.div `
   display: flex;
@@ -73014,6 +73072,7 @@ const SelectedTagsWrapper = styled.div `
 
 const InputSC = styled.input `
   width: 100%;
+  cursor: pointer;
   color: ${getTheme("com/select/field/default/label/color-text/inputed")};
   caret-color: ${getTheme("com/typing-cursor/default")};
   border: none;
@@ -73197,12 +73256,17 @@ const DivContainerSC = styled.div `
         `;
     }
 }}
+  &:has(${InputSC}:read-only) {
+    cursor: default;
+  }
+  &:has(${InputSC}:disabled) {
+    cursor: not-allowed;
+  }
 
   &:has(${InputSC}:disabled),
   &:has(${InputSC}:read-only) {
     outline-color: ${getTheme("com/select/field/disable/stroke-color")};
     background-color: ${getTheme("com/select/field/disable/background-color")};
-    cursor: not-allowed;
 
     ${DivIconPrefixSC} {
       color: ${getTheme("com/select/field/disable/color-icon")};
@@ -73216,11 +73280,7 @@ const DivContainerSC = styled.div `
     }
   }
 
-  &:has(${InputSC}:read-only) {
-    cursor: default;
-  }
-
-  &:hover:not(:has(.icon-suffix:hover)) {
+  &:hover:not(:has(.icon-suffix:hover)):not(:has(${InputSC}:disabled)) {
     outline-color: ${getTheme("com/select/field/default/border/hover")};
     background-color: ${getTheme("com/select/field/default/background/hover")};
 
@@ -73252,80 +73312,143 @@ function isMenuSize(value) {
     return value === "sm" || value === "md";
 }
 
-const FISSelect = forwardRef(({ className, size = "md", options, value, disabled = false, textLabel = "", iconLabel, required, negative, message, positive, multi, placeholderSearch, loading, onChange, renderOption, onClickIconLabel, displayValue, multiDisplayText, ...restProps }, ref) => {
+const FISSelect = forwardRef(({ className, size = "md", options, value, disabled = false, textLabel = "", iconLabel, required, negative, message, positive, multi, placeholderSearch, loading, onChange, renderOption, onClickIconLabel, displayValue, multiDisplayText, searchValue, onSearchChange, portal, ...restProps }, ref) => {
     const [isOpen, setIsOpen] = useState(false);
     const [referenceElement, setReferenceElement] = useState(null);
     const [popperElement, setPopperElement] = useState(null);
-    const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    const popperOptions = useMemo$1(() => ({
         modifiers: [
             { name: "preventOverflow", options: { padding: 0, altAxis: true } },
+            {
+                name: "offset",
+                options: {
+                    offset: [0, 4],
+                },
+            },
         ],
         placement: "bottom-start",
         strategy: "fixed",
-    });
-    const handleToggle = useCallback(() => {
-        if (!disabled)
-            setIsOpen((prev) => !prev);
-    }, [disabled]);
+    }), []);
+    const { styles, attributes } = usePopper(referenceElement, popperElement, popperOptions);
+    const originalOptionsRef = useRef(options);
     useEffect(() => {
-        const handleClickOutside = (event) => {
-            if (referenceElement &&
-                !referenceElement.contains(event.target) &&
-                popperElement &&
-                !popperElement.contains(event.target)) {
-                setIsOpen(false);
-            }
-        };
-        document.addEventListener("mousedown", handleClickOutside);
-        return () => document.removeEventListener("mousedown", handleClickOutside);
-    }, [referenceElement, popperElement]);
-    const flatItems = useMemo$1(() => options.flatMap((group) => group.items), [options]);
+        // Keep track of all items including selected ones
+        const allItems = new Map();
+        // Add items from current options
+        options.forEach((group) => {
+            group.items.forEach((item) => {
+                allItems.set(item.value, item);
+            });
+        });
+        // Add selected items that might not be in current options
+        if (multi && Array.isArray(value)) {
+            const selectedItems = originalOptionsRef.current
+                .flatMap((group) => group.items)
+                .filter((item) => value.includes(item.value));
+            selectedItems.forEach((item) => {
+                allItems.set(item.value, item);
+            });
+        }
+        // Update originalOptionsRef with all items
+        originalOptionsRef.current = [
+            {
+                items: Array.from(allItems.values()),
+            },
+        ];
+    }, [options, value, multi]);
+    const selectedItems = useMemo$1(() => {
+        const allItems = originalOptionsRef.current.flatMap((group) => group.items);
+        if (multi) {
+            return allItems.filter((item) => value.includes(item.value));
+        }
+        else {
+            const found = allItems.find((item) => item.value === value);
+            return found ? [found] : [];
+        }
+    }, [value, multi]);
     const computedDisplayValue = useMemo$1(() => {
         if (multi) {
-            const selected = flatItems.filter((item) => value.includes(item.value));
-            const count = selected.length;
+            const count = value.length;
             return multiDisplayText
                 ? multiDisplayText(count)
                 : `Selected ${count.toString().padStart(2, "0")} option${count !== 1 ? "s" : ""}`;
         }
         else {
-            const selected = flatItems.find((item) => item.value === value);
-            if (!selected)
+            if (!selectedItems[0])
                 return "";
-            return displayValue?.(selected) || selected.label;
+            return (displayValue?.(selectedItems[0]) || selectedItems[0].label);
         }
-    }, [value, flatItems, multi, displayValue]);
-    const selectedOptions = useMemo$1(() => {
-        if (multi) {
-            return flatItems
-                .filter((item) => value.includes(item.value))
-                .map((item) => ({ label: item.label, value: item.value }));
-        }
-        return value
-            ? flatItems
-                .filter((item) => item.value === value)
-                .map((item) => ({ label: item.label, value: item.value }))
-            : [];
-    }, [flatItems, value, multi]);
+    }, [value, multi, displayValue, multiDisplayText, selectedItems]);
+    const handleToggle = useCallback(() => {
+        if (!disabled)
+            setIsOpen((prev) => !prev);
+    }, [disabled]);
     const handleOptionRemove = useCallback((option) => {
         if (multi) {
             const newValues = value.filter((v) => v !== option.value);
             onChange(newValues);
         }
     }, [multi, onChange, value]);
-    return (jsxs(DivWrapperSC$1, { className: className, children: [(textLabel || iconLabel) && (jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsx(DivInputWrapperSC, { ref: setReferenceElement, onClick: handleToggle, children: jsx(FISSelectItem, { ...restProps, ref: ref, size: size, iconSuffix: isOpen ? jsx(ArrowUpIcon, {}) : jsx(ArrowDownIcon, {}), value: computedDisplayValue, disabled: disabled, activeDropdown: isOpen }) }), message && (jsx(SpanHintSC$3, { className: classNames({ disabled, negative, positive }), children: message })), multi && value.length > 0 && (jsx(SelectedTagsWrapper, { children: jsx(MultipleValue, { options: selectedOptions, onRemove: handleOptionRemove }) })), isOpen && (jsx(Portal, { children: jsx(DivDropdownMenuSC, { ref: setPopperElement, style: { ...styles.popper, width: referenceElement?.offsetWidth }, ...attributes.popper, children: jsx(FISMenuSelect, { size: isMenuSize(size) ? size : "md", groups: options, placeholder: placeholderSearch, loading: loading, multi: multi, selectedValues: multi ? value : value ? [value] : [], onChangeSelected: (values) => {
-                            if (multi) {
-                                onChange(values);
-                            }
-                            else {
-                                onChange(values?.[0]);
-                                setIsOpen(false);
-                            }
-                        }, onClickMenu: () => {
-                            if (!multi) {
-                                setIsOpen(false);
-                            }
-                        }, ...restProps }) }) }))] }));
+    const handleMenuChange = useCallback((values) => {
+        if (multi) {
+            onChange(values);
+        }
+        else {
+            onChange(values[0]);
+            setIsOpen(false);
+        }
+    }, [multi, onChange]);
+    const handleMenuClick = useCallback(() => {
+        if (!multi) {
+            setIsOpen(false);
+        }
+    }, [multi]);
+    const menuProps = useMemo$1(() => ({
+        groups: options,
+        placeholder: placeholderSearch,
+        loading,
+        multi,
+        size: isMenuSize(size) ? size : "md",
+        selectedValues: multi
+            ? value
+            : value
+                ? [value]
+                : [],
+        onChangeSelected: handleMenuChange,
+        onClickMenu: handleMenuClick,
+        searchValue,
+        onSearchChange,
+        ...restProps,
+    }), [
+        options,
+        placeholderSearch,
+        loading,
+        multi,
+        size,
+        value,
+        handleMenuChange,
+        handleMenuClick,
+        searchValue,
+        onSearchChange,
+        restProps,
+    ]);
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (referenceElement &&
+                !referenceElement.contains(event.target) &&
+                popperElement &&
+                !popperElement.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, [referenceElement, popperElement]);
+    return (jsxs(DivWrapperSC$1, { className: className, children: [(textLabel || iconLabel) && (jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsx(DivInputWrapperSC, { ref: setReferenceElement, onClick: handleToggle, children: jsx(FISSelectItem, { ...restProps, ref: ref, size: size, iconSuffix: isOpen ? jsx(ArrowUpIcon, {}) : jsx(ArrowDownIcon, {}), value: computedDisplayValue, disabled: disabled, activeDropdown: isOpen }) }), message && (jsx(SpanHintSC$3, { className: classNames({ disabled, negative, positive }), children: message })), multi && value.length > 0 && (jsx(SelectedTagsWrapper, { children: jsx(MultipleValue, { options: selectedItems, onRemove: handleOptionRemove }) })), isOpen && (jsx(Portal, { portal: portal, children: jsx(DivDropdownMenuSC, { ref: setPopperElement, style: {
+                        ...styles.popper,
+                        width: referenceElement?.offsetWidth,
+                        zIndex: 9999,
+                    }, ...attributes.popper, children: jsx(FISMenuSelect, { ...menuProps }) }) }))] }));
 });
 FISSelect.displayName = "FISSelect";