@clickhouse/click-ui 0.9.0 → 0.10.0-rc1

package/dist/cjs/components/Select/common/InternalSelect.cjs

@@ -70,9 +70,24 @@ const NoOptionsDisplay = ({
   };
   const isCustomReactNode = typeof noAvailableOptions === "function";
   if (isCustomReactNode) {
-    return /* @__PURE__ */ jsxRuntime.jsx(Container.Container, { onClick: handleNoOptionsClick, ...containerProps, children: noOptionsNode });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Container.Container,
+      {
+        onClick: handleNoOptionsClick,
+        ...containerProps,
+        children: noOptionsNode
+      }
+    );
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(SelectComponents.SelectNoDataContainer, { onClick: handleNoOptionsClick, $clickable: allowCreateOption, ...containerProps, children: noOptionsNode });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SelectComponents.SelectNoDataContainer,
+    {
+      onClick: handleNoOptionsClick,
+      $clickable: allowCreateOption,
+      ...containerProps,
+      children: noOptionsNode
+    }
+  );
 };
 const childrenToComboboxItemArray = (children, callback, heading) => {
   return react.Children.toArray(children).flatMap((child) => {
@@ -80,7 +95,11 @@ const childrenToComboboxItemArray = (children, callback, heading) => {
       const type = child.type;
       if (type.displayName === "Select.Group") {
         const groupChildren = child.props.children;
-        return childrenToComboboxItemArray(groupChildren, callback, getTextFromNodes.getTextFromNodes(child.props.heading).toLowerCase());
+        return childrenToComboboxItemArray(
+          groupChildren,
+          callback,
+          getTextFromNodes.getTextFromNodes(child.props.heading).toLowerCase()
+        );
       } else if (type.displayName === "Select.Item") {
         const title = getTextFromNodes.getTextFromNodes(child).toLowerCase();
         const value = child.props.value;
@@ -145,86 +164,91 @@ const InternalSelect = ({
   const valueNode = react.useRef(/* @__PURE__ */ new Map());
   const [isInitialized, setInitialized] = react.useState(false);
   const [list, setList] = react.useState([]);
-  const updateElements = react.useCallback(({
-    disabled: disabled2,
-    value,
-    title,
-    heading,
-    nodeProps
-  }) => {
-    if (title.includes(search) || heading?.includes(search)) {
-      visibleList.current.push(value);
-      if (!disabled2) {
-        navigatable.current.push(value);
-      }
-    }
-    valueNode.current.set(value, nodeProps);
-  }, [search]);
-  const onUpdateSearch = react.useCallback((search2) => {
-    setSearch(search2);
-    let hasHighlightedValue = false;
-    const visibleItemsList = [];
-    const navigatableList = [];
-    const searchLowerCase = search2.toLowerCase();
-    list.forEach((item) => {
-      if (item.title.includes(searchLowerCase) || item.heading?.includes(searchLowerCase)) {
-        if (item.value === highlighted) {
-          hasHighlightedValue = true;
+  const updateElements = react.useCallback(
+    ({ disabled: disabled2, value, title, heading, nodeProps }) => {
+      if (title.includes(search) || heading?.includes(search)) {
+        visibleList.current.push(value);
+        if (!disabled2) {
+          navigatable.current.push(value);
         }
-        visibleItemsList.push(item.value);
-        if (!item.disabled) {
-          navigatableList.push(item.value);
+      }
+      valueNode.current.set(value, nodeProps);
+    },
+    [search]
+  );
+  const onUpdateSearch = react.useCallback(
+    (search2) => {
+      setSearch(search2);
+      let hasHighlightedValue = false;
+      const visibleItemsList = [];
+      const navigatableList = [];
+      const searchLowerCase = search2.toLowerCase();
+      list.forEach((item) => {
+        if (item.title.includes(searchLowerCase) || item.heading?.includes(searchLowerCase)) {
+          if (item.value === highlighted) {
+            hasHighlightedValue = true;
+          }
+          visibleItemsList.push(item.value);
+          if (!item.disabled) {
+            navigatableList.push(item.value);
+          }
         }
+      });
+      navigatable.current = navigatableList;
+      visibleList.current = visibleItemsList;
+      if (!hasHighlightedValue) {
+        setHighlighted(navigatableList[0] ?? null);
       }
-    });
-    navigatable.current = navigatableList;
-    visibleList.current = visibleItemsList;
-    if (!hasHighlightedValue) {
-      setHighlighted(navigatableList[0] ?? null);
-    }
-  }, [highlighted, list]);
-  const updateList = react.useCallback((children2, options2) => {
-    const lowerCasedSearch = search.toLowerCase();
-    if (options2) {
-      setList(options2.flatMap((option) => {
-        if ("options" in option) {
-          const heading = getTextFromNodes.getTextFromNodes(option.heading).toLowerCase();
-          return (option.options ?? []).map((item) => {
-            valueNode.current.set(item.value, item);
-            const title = getTextFromNodes.getTextFromNodes(item.label).toLowerCase();
-            if (title.includes(lowerCasedSearch) || heading?.includes(lowerCasedSearch)) {
-              visibleList.current.push(item.value);
-              if (!disabled) {
-                navigatable.current.push(item.value);
+    },
+    [highlighted, list]
+  );
+  const updateList = react.useCallback(
+    (children2, options2) => {
+      const lowerCasedSearch = search.toLowerCase();
+      if (options2) {
+        setList(
+          options2.flatMap((option) => {
+            if ("options" in option) {
+              const heading = getTextFromNodes.getTextFromNodes(option.heading).toLowerCase();
+              return (option.options ?? []).map((item) => {
+                valueNode.current.set(item.value, item);
+                const title = getTextFromNodes.getTextFromNodes(item.label).toLowerCase();
+                if (title.includes(lowerCasedSearch) || heading?.includes(lowerCasedSearch)) {
+                  visibleList.current.push(item.value);
+                  if (!disabled) {
+                    navigatable.current.push(item.value);
+                  }
+                }
+                return {
+                  heading,
+                  disabled: item.disabled,
+                  value: item.value,
+                  title
+                };
+              });
+            } else {
+              valueNode.current.set(option.value, option);
+              const title = getTextFromNodes.getTextFromNodes(option.label).toLowerCase();
+              if (title.includes(lowerCasedSearch)) {
+                visibleList.current.push(option.value);
+                if (!disabled) {
+                  navigatable.current.push(option.value);
+                }
               }
+              return {
+                disabled: option.disabled,
+                value: option.value,
+                title: getTextFromNodes.getTextFromNodes(option.label)
+              };
             }
-            return {
-              heading,
-              disabled: item.disabled,
-              value: item.value,
-              title
-            };
-          });
-        } else {
-          valueNode.current.set(option.value, option);
-          const title = getTextFromNodes.getTextFromNodes(option.label).toLowerCase();
-          if (title.includes(lowerCasedSearch)) {
-            visibleList.current.push(option.value);
-            if (!disabled) {
-              navigatable.current.push(option.value);
-            }
-          }
-          return {
-            disabled: option.disabled,
-            value: option.value,
-            title: getTextFromNodes.getTextFromNodes(option.label)
-          };
-        }
-      }));
-    } else if (children2) {
-      setList(childrenToComboboxItemArray(children2, updateElements));
-    }
-  }, [disabled, search, updateElements]);
+          })
+        );
+      } else if (children2) {
+        setList(childrenToComboboxItemArray(children2, updateElements));
+      }
+    },
+    [disabled, search, updateElements]
+  );
   react.useEffect(() => {
     updateList(children, options);
     setInitialized(true);
@@ -250,7 +274,9 @@ const InternalSelect = ({
       } else if (["ArrowUp", "ArrowDown", "Home", "End"].includes(e.key)) {
         e.preventDefault();
         let nextHighlightedValue = highlighted;
-        const highlightedIndex = navigatable.current.findIndex((value) => value === highlighted);
+        const highlightedIndex = navigatable.current.findIndex(
+          (value) => value === highlighted
+        );
         if (e.key === "ArrowUp") {
           if (highlightedIndex === 0) {
             nextHighlightedValue = navigatable.current[navigatable.current.length - 1];
@@ -275,9 +301,12 @@ const InternalSelect = ({
       }
     }
   };
-  const isHidden = react.useCallback((value) => {
-    return !visibleList.current.includes(value ?? "");
-  }, [visibleList]);
+  const isHidden = react.useCallback(
+    (value) => {
+      return !visibleList.current.includes(value ?? "");
+    },
+    [visibleList]
+  );
   const optionContextValue = react.useMemo(() => {
     return {
       search,
@@ -295,184 +324,412 @@ const InternalSelect = ({
       onSelect(search, "custom", e);
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(FormRoot.FormRoot, { $orientation: orientation, $dir: dir, $addLabelPadding: true, ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(FormElementContainer.FormElementContainer, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(SelectComponents.SelectPopoverRoot, { open, onOpenChange, modal: true, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(SelectComponents.StyledSelectTrigger, { id: id ?? defaultId, $error: !!error, disabled, "data-testid": "select-trigger", ...triggerProps, children: [
-          isInitialized && /* @__PURE__ */ jsxRuntime.jsx(SelectComponents.SelectValue, { children: selectedValues.length === 0 ? placeholder : multiple ? /* @__PURE__ */ jsxRuntime.jsx(MultiSelectValue.MultiSelectValue, { disabled: disabled ?? false, onSelect, selectedValues, sortable: !disabled && sortable, valueNode: valueNode.current, onChange }) : /* @__PURE__ */ jsxRuntime.jsx(SingleSelectValue.default, { valueNode: checkbox && selectLabel ? {
-            label: selectLabel,
-            value: selectLabel
-          } : valueNode.current.get(selectedValues[0]), value: selectedValues[0] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "sort", size: "sm" })
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    FormRoot.FormRoot,
+    {
+      $orientation: orientation,
+      $dir: dir,
+      $addLabelPadding: true,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(FormElementContainer.FormElementContainer, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            SelectComponents.SelectPopoverRoot,
+            {
+              open,
+              onOpenChange,
+              modal: true,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  SelectComponents.StyledSelectTrigger,
+                  {
+                    id: id ?? defaultId,
+                    $error: !!error,
+                    disabled,
+                    "data-testid": "select-trigger",
+                    ...triggerProps,
+                    children: [
+                      isInitialized && /* @__PURE__ */ jsxRuntime.jsx(SelectComponents.SelectValue, { children: selectedValues.length === 0 ? placeholder : multiple ? /* @__PURE__ */ jsxRuntime.jsx(
+                        MultiSelectValue.MultiSelectValue,
+                        {
+                          disabled: disabled ?? false,
+                          onSelect,
+                          selectedValues,
+                          sortable: !disabled && sortable,
+                          valueNode: valueNode.current,
+                          onChange
+                        }
+                      ) : /* @__PURE__ */ jsxRuntime.jsx(
+                        SingleSelectValue.default,
+                        {
+                          valueNode: checkbox && selectLabel ? { label: selectLabel, value: selectLabel } : valueNode.current.get(selectedValues[0]),
+                          value: selectedValues[0]
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        Icon.Icon,
+                        {
+                          name: "sort",
+                          size: "sm"
+                        }
+                      )
+                    ]
+                  }
+                ),
+                form && /* @__PURE__ */ jsxRuntime.jsx(
+                  SelectComponents.HiddenSelectElement,
+                  {
+                    multiple,
+                    name,
+                    form,
+                    value: selectedValues,
+                    onChange: () => null,
+                    children: list.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+                      "option",
+                      {
+                        value: item.value,
+                        disabled: item.disabled,
+                        children: item.value
+                      },
+                      item.value
+                    ))
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(RadixPopover.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  SelectComponents.SelectPopoverContent,
+                  {
+                    ...inputModalityProps,
+                    sideOffset: 5,
+                    onFocus,
+                    onCloseAutoFocus: () => {
+                      onUpdateSearch("");
+                    },
+                    onOpenAutoFocus: () => {
+                      setHighlighted(visibleList.current[0]);
+                    },
+                    align: "start",
+                    $useFullWidthItems: useFullWidthItems,
+                    $itemCharacterLimit: itemCharacterLimit,
+                    children: /* @__PURE__ */ jsxRuntime.jsxs(SelectComponents.SelectList, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs(SelectComponents.SearchBarContainer, { $showSearch: showSearch, children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          SelectComponents.SearchBar,
+                          {
+                            ref: inputRef,
+                            value: search,
+                            onChange: (e) => onUpdateSearch(e.target.value),
+                            "data-testid": "select-search-input",
+                            onKeyDown,
+                            $showSearch: showSearch
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          IconButton.IconButton,
+                          {
+                            className: cva.cn(
+                              SelectComponents.selectStyles["search-close"],
+                              search.length > 0 && SelectComponents.selectStyles["search-close_show-close"]
+                            ),
+                            htmlType: "button",
+                            icon: "cross",
+                            onClick: clearSearch,
+                            "data-testid": "select-search-close",
+                            size: "xs"
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsx(SelectComponents.SelectListContent, { $maxHeight: maxHeight, children: /* @__PURE__ */ jsxRuntime.jsx(OptionContext.OptionContext.Provider, { value: optionContextValue, children: options && options.length > 0 ? options.map((props2, index) => {
+                        if ("options" in props2) {
+                          const { options: itemList = [], ...groupProps } = props2;
+                          return /* @__PURE__ */ jsxRuntime.jsx(
+                            SelectGroup,
+                            {
+                              ...groupProps,
+                              children: itemList.map((itemProps, itemIndex) => {
+                                if (checkbox) {
+                                  return /* @__PURE__ */ jsxRuntime.jsx(
+                                    MultiSelectCheckboxItem,
+                                    {
+                                      ...itemProps
+                                    },
+                                    `select-${id}-group-${index}-item-${itemIndex}`
+                                  );
+                                }
+                                return /* @__PURE__ */ jsxRuntime.jsx(
+                                  SelectItem,
+                                  {
+                                    ...itemProps
+                                  },
+                                  `select-${id}-group-${index}-item-${itemIndex}`
+                                );
+                              })
+                            },
+                            `select-${id}-group-${index}`
+                          );
+                        } else {
+                          if (checkbox) {
+                            return /* @__PURE__ */ jsxRuntime.jsx(
+                              MultiSelectCheckboxItem,
+                              {
+                                ...props2
+                              },
+                              `select-${id}-item-${index}`
+                            );
+                          }
+                          return /* @__PURE__ */ jsxRuntime.jsx(
+                            SelectItem,
+                            {
+                              ...props2
+                            },
+                            `select-${id}-item-${index}`
+                          );
+                        }
+                      }) : children }) }),
+                      visibleList.current.length === 0 && (allowCreateOption || !!noAvailableOptions) && /* @__PURE__ */ jsxRuntime.jsx(
+                        NoOptionsDisplay,
+                        {
+                          allowCreateOption,
+                          search,
+                          customText,
+                          noAvailableOptions,
+                          onCreateOption,
+                          onOpenChange,
+                          containerProps: props
+                        }
+                      )
+                    ] })
+                  }
+                ) })
+              ]
+            }
+          ),
+          !!error && error !== true && /* @__PURE__ */ jsxRuntime.jsx(Error.Error, { children: error })
         ] }),
-        form && /* @__PURE__ */ jsxRuntime.jsx(SelectComponents.HiddenSelectElement, { multiple, name, form, value: selectedValues, onChange: () => null, children: list.map((item) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: item.value, disabled: item.disabled, children: item.value }, item.value)) }),
-        /* @__PURE__ */ jsxRuntime.jsx(RadixPopover.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(SelectComponents.SelectPopoverContent, { ...inputModalityProps, sideOffset: 5, onFocus, onCloseAutoFocus: () => {
-          onUpdateSearch("");
-        }, onOpenAutoFocus: () => {
-          setHighlighted(visibleList.current[0]);
-        }, align: "start", $useFullWidthItems: useFullWidthItems, $itemCharacterLimit: itemCharacterLimit, children: /* @__PURE__ */ jsxRuntime.jsxs(SelectComponents.SelectList, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(SelectComponents.SearchBarContainer, { $showSearch: showSearch, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(SelectComponents.SearchBar, { ref: inputRef, value: search, onChange: (e) => onUpdateSearch(e.target.value), "data-testid": "select-search-input", onKeyDown, $showSearch: showSearch }),
-            /* @__PURE__ */ jsxRuntime.jsx(IconButton.IconButton, { className: cva.cn(SelectComponents.selectStyles["search-close"], search.length > 0 && SelectComponents.selectStyles["search-close_show-close"]), htmlType: "button", icon: "cross", onClick: clearSearch, "data-testid": "select-search-close", size: "xs" })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(SelectComponents.SelectListContent, { $maxHeight: maxHeight, children: /* @__PURE__ */ jsxRuntime.jsx(OptionContext.OptionContext.Provider, { value: optionContextValue, children: options && options.length > 0 ? options.map((props2, index) => {
-            if ("options" in props2) {
-              const {
-                options: itemList = [],
-                ...groupProps
-              } = props2;
-              return /* @__PURE__ */ jsxRuntime.jsx(SelectGroup, { ...groupProps, children: itemList.map((itemProps, itemIndex) => {
-                if (checkbox) {
-                  return /* @__PURE__ */ jsxRuntime.jsx(MultiSelectCheckboxItem, { ...itemProps }, `select-${id}-group-${index}-item-${itemIndex}`);
-                }
-                return /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { ...itemProps }, `select-${id}-group-${index}-item-${itemIndex}`);
-              }) }, `select-${id}-group-${index}`);
+        label && /* @__PURE__ */ jsxRuntime.jsx(
+          Label.Label,
+          {
+            htmlFor: id ?? defaultId,
+            disabled,
+            error: !!error,
+            children: label
+          }
+        )
+      ]
+    }
+  );
+};
+const SelectGroup = react.forwardRef(
+  ({ children, heading, ...props }, forwardedRef) => {
+    useOption.useSearch();
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      SelectComponents.SelectGroupContainer,
+      {
+        ...props,
+        ref: mergeRefs.mergeRefs([
+          forwardedRef,
+          (node) => {
+            const hidden = node?.querySelectorAll("[cui-select-item]").length === 0;
+            if (hidden) {
+              node?.setAttribute("hidden", "");
             } else {
-              if (checkbox) {
-                return /* @__PURE__ */ jsxRuntime.jsx(MultiSelectCheckboxItem, { ...props2 }, `select-${id}-item-${index}`);
-              }
-              return /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { ...props2 }, `select-${id}-item-${index}`);
+              node?.removeAttribute("hidden");
             }
-          }) : children }) }),
-          visibleList.current.length === 0 && (allowCreateOption || !!noAvailableOptions) && /* @__PURE__ */ jsxRuntime.jsx(NoOptionsDisplay, { allowCreateOption, search, customText, noAvailableOptions, onCreateOption, onOpenChange, containerProps: props })
-        ] }) }) })
-      ] }),
-      !!error && error !== true && /* @__PURE__ */ jsxRuntime.jsx(Error.Error, { children: error })
-    ] }),
-    label && /* @__PURE__ */ jsxRuntime.jsx(Label.Label, { htmlFor: id ?? defaultId, disabled, error: !!error, children: label })
-  ] });
-};
-const SelectGroup = react.forwardRef(({
-  children,
-  heading,
-  ...props
-}, forwardedRef) => {
-  useOption.useSearch();
-  return /* @__PURE__ */ jsxRuntime.jsxs(SelectComponents.SelectGroupContainer, { ...props, ref: mergeRefs.mergeRefs([forwardedRef, (node) => {
-    const hidden = node?.querySelectorAll("[cui-select-item]").length === 0;
-    if (hidden) {
-      node?.setAttribute("hidden", "");
-    } else {
-      node?.removeAttribute("hidden");
-    }
-    node?.setAttribute("aria-hidden", hidden.toString());
-  }]), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(SelectComponents.SelectGroupName, { children: heading }),
-    /* @__PURE__ */ jsxRuntime.jsx(SelectComponents.SelectGroupContent, { children })
-  ] });
-});
+            node?.setAttribute("aria-hidden", hidden.toString());
+          }
+        ]),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SelectComponents.SelectGroupName, { children: heading }),
+          /* @__PURE__ */ jsxRuntime.jsx(SelectComponents.SelectGroupContent, { children })
+        ]
+      }
+    );
+  }
+);
 SelectGroup.displayName = "Select.Group";
-const SelectItem = react.forwardRef(({
-  disabled = false,
-  children,
-  label,
-  description,
-  separator,
-  onSelect: onSelectProp,
-  value = "",
-  icon,
-  iconDir,
-  onMouseOver: onMouseOverProp,
-  ...props
-}, forwardedRef) => {
-  const {
-    highlighted,
-    updateHighlighted,
-    isHidden,
-    selectedValues,
-    onSelect
-  } = useOption.useOption();
-  const onSelectValue = (evt) => {
-    if (!disabled) {
-      onSelect(value, void 0, evt);
-      if (typeof onSelectProp == "function") {
-        onSelectProp(value, void 0, evt);
+const SelectItem = react.forwardRef(
+  ({
+    disabled = false,
+    children,
+    label,
+    description,
+    separator,
+    onSelect: onSelectProp,
+    value = "",
+    icon,
+    iconDir,
+    onMouseOver: onMouseOverProp,
+    ...props
+  }, forwardedRef) => {
+    const { highlighted, updateHighlighted, isHidden, selectedValues, onSelect } = useOption.useOption();
+    const onSelectValue = (evt) => {
+      if (!disabled) {
+        onSelect(value, void 0, evt);
+        if (typeof onSelectProp == "function") {
+          onSelectProp(value, void 0, evt);
+        }
       }
+    };
+    const onMouseOver = (e) => {
+      if (onMouseOverProp) {
+        onMouseOverProp(e);
+      }
+      if (!disabled) {
+        updateHighlighted(value);
+      }
+    };
+    if (isHidden(value)) {
+      return null;
     }
-  };
-  const onMouseOver = (e) => {
-    if (onMouseOverProp) {
-      onMouseOverProp(e);
-    }
-    if (!disabled) {
-      updateHighlighted(value);
-    }
-  };
-  if (isHidden(value)) {
-    return null;
+    const isChecked = selectedValues.includes(value);
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        GenericMenu.GenericMenuItem,
+        {
+          ...props,
+          "data-value": value,
+          onClick: onSelectValue,
+          onMouseOver,
+          ref: forwardedRef,
+          "data-state": isChecked ? "checked" : "unchecked",
+          "data-disabled": disabled ? true : void 0,
+          "data-highlighted": highlighted == value ? "true" : void 0,
+          "cui-select-item": "",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              IconWrapper.IconWrapper,
+              {
+                icon,
+                iconDir,
+                gap: "xxs",
+                isResponsive: false,
+                children: label ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  label,
+                  description && /* @__PURE__ */ jsxRuntime.jsx(SelectItemDescription, { children: description })
+                ] }) : children
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Icon.Icon,
+              {
+                className: cva.cn(
+                  SelectComponents.selectStyles["check-icon"],
+                  isChecked && SelectComponents.selectStyles["check-icon_show-check"]
+                ),
+                name: "check",
+                size: "sm"
+              }
+            )
+          ]
+        }
+      ),
+      separator && /* @__PURE__ */ jsxRuntime.jsx(Separator.Separator, { size: "sm" })
+    ] });
   }
-  const isChecked = selectedValues.includes(value);
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(GenericMenu.GenericMenuItem, { ...props, "data-value": value, onClick: onSelectValue, onMouseOver, ref: forwardedRef, "data-state": isChecked ? "checked" : "unchecked", "data-disabled": disabled ? true : void 0, "data-highlighted": highlighted == value ? "true" : void 0, "cui-select-item": "", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(IconWrapper.IconWrapper, { icon, iconDir, gap: "xxs", isResponsive: false, children: label ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        label,
-        description && /* @__PURE__ */ jsxRuntime.jsx(SelectItemDescription, { children: description })
-      ] }) : children }),
-      /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { className: cva.cn(SelectComponents.selectStyles["check-icon"], isChecked && SelectComponents.selectStyles["check-icon_show-check"]), name: "check", size: "sm" })
-    ] }),
-    separator && /* @__PURE__ */ jsxRuntime.jsx(Separator.Separator, { size: "sm" })
-  ] });
-});
+);
 SelectItem.displayName = "Select.Item";
-const MultiSelectCheckboxItem = react.forwardRef(({
-  disabled = false,
-  children,
-  icon,
-  iconDir = "end",
-  label,
-  description,
-  onMouseOver: onMouseOverProp,
-  onSelect: onSelectProp,
-  separator,
-  value = "",
-  variant,
-  ...props
-}, forwardedRef) => {
-  const {
-    highlighted,
-    updateHighlighted,
-    isHidden,
-    selectedValues,
-    onSelect
-  } = useOption.useOption();
-  const handleMenuItemClick = (evt) => {
-    if (!disabled) {
-      onSelect(value, void 0, evt);
-      if (typeof onSelectProp === "function") {
-        onSelectProp(value, void 0, evt);
+const MultiSelectCheckboxItem = react.forwardRef(
+  ({
+    disabled = false,
+    children,
+    icon,
+    iconDir = "end",
+    label,
+    description,
+    onMouseOver: onMouseOverProp,
+    onSelect: onSelectProp,
+    separator,
+    value = "",
+    variant,
+    ...props
+  }, forwardedRef) => {
+    const { highlighted, updateHighlighted, isHidden, selectedValues, onSelect } = useOption.useOption();
+    const handleMenuItemClick = (evt) => {
+      if (!disabled) {
+        onSelect(value, void 0, evt);
+        if (typeof onSelectProp === "function") {
+          onSelectProp(value, void 0, evt);
+        }
       }
+    };
+    const handleMenuItemMouseOver = (e) => {
+      if (onMouseOverProp) {
+        onMouseOverProp(e);
+      }
+      if (!disabled) {
+        updateHighlighted(value);
+      }
+    };
+    if (isHidden(value)) {
+      return null;
     }
-  };
-  const handleMenuItemMouseOver = (e) => {
-    if (onMouseOverProp) {
-      onMouseOverProp(e);
-    }
-    if (!disabled) {
-      updateHighlighted(value);
-    }
-  };
-  if (isHidden(value)) {
-    return null;
+    const isChecked = selectedValues.includes(value);
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        GenericMenu.GenericMenuItem,
+        {
+          ...props,
+          "data-value": value,
+          onClick: handleMenuItemClick,
+          onMouseOver: handleMenuItemMouseOver,
+          ref: forwardedRef,
+          "data-disabled": disabled ? true : void 0,
+          "data-highlighted": highlighted == value ? "true" : void 0,
+          "data-testid": `multi-select-checkbox-${value}`,
+          "cui-select-item": "",
+          children: /* @__PURE__ */ jsxRuntime.jsxs(
+            Container.Container,
+            {
+              orientation: "horizontal",
+              gap: "xs",
+              overflow: "hidden",
+              isResponsive: false,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Checkbox.Checkbox,
+                  {
+                    checked: isChecked,
+                    "data-testid": "multi-select-checkbox",
+                    disabled,
+                    variant: variant ?? "default"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  IconWrapper.IconWrapper,
+                  {
+                    icon,
+                    iconDir,
+                    gap: "xxs",
+                    isResponsive: false,
+                    children: label ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      label,
+                      description && /* @__PURE__ */ jsxRuntime.jsx(SelectItemDescription, { children: description })
+                    ] }) : children
+                  }
+                )
+              ]
+            }
+          )
+        }
+      ),
+      separator && /* @__PURE__ */ jsxRuntime.jsx(Separator.Separator, { size: "sm" })
+    ] });
   }
-  const isChecked = selectedValues.includes(value);
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(GenericMenu.GenericMenuItem, { ...props, "data-value": value, onClick: handleMenuItemClick, onMouseOver: handleMenuItemMouseOver, ref: forwardedRef, "data-disabled": disabled ? true : void 0, "data-highlighted": highlighted == value ? "true" : void 0, "data-testid": `multi-select-checkbox-${value}`, "cui-select-item": "", children: /* @__PURE__ */ jsxRuntime.jsxs(Container.Container, { orientation: "horizontal", gap: "xs", overflow: "hidden", isResponsive: false, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Checkbox.Checkbox, { checked: isChecked, "data-testid": "multi-select-checkbox", disabled, variant: variant ?? "default" }),
-      /* @__PURE__ */ jsxRuntime.jsx(IconWrapper.IconWrapper, { icon, iconDir, gap: "xxs", isResponsive: false, children: label ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        label,
-        description && /* @__PURE__ */ jsxRuntime.jsx(SelectItemDescription, { children: description })
-      ] }) : children })
-    ] }) }),
-    separator && /* @__PURE__ */ jsxRuntime.jsx(Separator.Separator, { size: "sm" })
-  ] });
-});
+);
 MultiSelectCheckboxItem.displayName = "Select.Item";
-const SelectItemDescription = react.forwardRef(({
-  children,
-  ...props
-}, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { ref, component: SelectComponents.SelectItemDescriptionText, color: "muted", ...props, children });
-});
+const SelectItemDescription = react.forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Text.Text,
+      {
+        ref,
+        component: SelectComponents.SelectItemDescriptionText,
+        color: "muted",
+        ...props,
+        children
+      }
+    );
+  }
+);
 SelectItemDescription.displayName = "Select.ItemDescription";
 
 exports.InternalSelect = InternalSelect;