@clickhouse/click-ui 0.10.0-rc1 → 0.10.0

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

@@ -15,7 +15,6 @@ const GenericMenu = require('../../GenericMenu/index.cjs');
 const IconWrapper = require('../../IconWrapper/index.cjs');
 const useInputModality = require('../../../hooks/internal/useInputModality.cjs');
 const cva = require('../../../lib/cva.cjs');
-const getTextFromNodes = require('../../../lib/getTextFromNodes.cjs');
 const PortalContext = require('../../../providers/PortalContext.cjs');
 const FormRoot = require('../../FormContainer/FormRoot.cjs');
 const FormElementContainer = require('../../FormContainer/FormElementContainer.cjs');
@@ -89,36 +88,18 @@ const NoOptionsDisplay = ({
     }
   );
 };
-const childrenToComboboxItemArray = (children, callback, heading) => {
+const childrenToNormalizedOptions = (children, register) => {
   return react.Children.toArray(children).flatMap((child) => {
     if (react.isValidElement(child) && child && typeof child === "object") {
       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 childrenToNormalizedOptions(child.props.children, register);
       } else if (type.displayName === "Select.Item") {
-        const title = getTextFromNodes.getTextFromNodes(child).toLowerCase();
-        const value = child.props.value;
-        const disabled = child.props.disabled;
-        callback({
-          disabled,
-          value,
-          title,
-          heading,
-          nodeProps: child.props
-        });
-        return {
-          disabled,
-          value,
-          title,
-          heading
-        };
+        const { value, disabled } = child.props;
+        register(value, child.props);
+        return { value, disabled };
       } else if ("props" in child && child.props.children) {
-        return childrenToComboboxItemArray(child.props.children, callback, heading);
+        return childrenToNormalizedOptions(child.props.children, register);
       }
     }
     return [];
@@ -159,100 +140,70 @@ const InternalSelect = ({
   const defaultId = react.useId();
   const [search, setSearch] = react.useState("");
   const [highlighted, setHighlighted] = react.useState();
-  const visibleList = react.useRef([]);
-  const navigatable = react.useRef([]);
+  const [searchSource, setSearchSource] = react.useState(() => /* @__PURE__ */ new Map());
   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;
-          }
-          visibleItemsList.push(item.value);
-          if (!item.disabled) {
-            navigatableList.push(item.value);
-          }
+  const registerValueNode = react.useCallback((value, nodeProps) => {
+    valueNode.current.set(value, nodeProps);
+  }, []);
+  const normalizedOptions = react.useMemo(() => {
+    if (options) {
+      return options.flatMap((option) => {
+        if ("options" in option) {
+          return (option.options ?? []).map((item) => {
+            registerValueNode(item.value, item);
+            return { value: item.value, disabled: item.disabled };
+          });
         }
+        registerValueNode(option.value, option);
+        return { value: option.value, disabled: option.disabled };
       });
-      navigatable.current = navigatableList;
-      visibleList.current = visibleItemsList;
-      if (!hasHighlightedValue) {
-        setHighlighted(navigatableList[0] ?? null);
+    } else if (children) {
+      return childrenToNormalizedOptions(children, registerValueNode);
+    }
+    return [];
+  }, [children, options, registerValueNode]);
+  const listNode = react.useRef(null);
+  const captureSearchSource = react.useCallback(() => {
+    const root = listNode.current;
+    if (!root) {
+      return;
+    }
+    const next = /* @__PURE__ */ new Map();
+    root.querySelectorAll("[cui-select-item][data-value]").forEach((el) => {
+      const value = el.getAttribute("data-value");
+      if (value === null) {
+        return;
       }
-    },
-    [highlighted, list]
+      const group = el.closest("[cui-select-group]");
+      const heading = group?.querySelector("[cui-select-group-name]")?.textContent ?? "";
+      next.set(value, `${el.textContent ?? ""} ${heading}`.toLowerCase());
+    });
+    setSearchSource(next);
+  }, []);
+  const onSearchChange = (next) => {
+    if (search === "" && next !== "") {
+      captureSearchSource();
+    }
+    setSearch(next);
+  };
+  const matchedOptions = react.useMemo(() => {
+    if (search === "") {
+      return normalizedOptions;
+    }
+    const searchLowerCase = search.toLowerCase();
+    return normalizedOptions.filter(
+      (item) => (searchSource.get(item.value) ?? "").includes(searchLowerCase)
+    );
+  }, [search, normalizedOptions, searchSource]);
+  const visibleValues = react.useMemo(
+    () => new Set(matchedOptions.map((o) => o.value)),
+    [matchedOptions]
   );
-  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)
-              };
-            }
-          })
-        );
-      } else if (children2) {
-        setList(childrenToComboboxItemArray(children2, updateElements));
-      }
-    },
-    [disabled, search, updateElements]
+  const navigableValues = react.useMemo(
+    () => matchedOptions.filter((o) => !o.disabled).map((o) => o.value),
+    [matchedOptions]
   );
-  react.useEffect(() => {
-    updateList(children, options);
-    setInitialized(true);
-  }, [children, options, updateList]);
+  const effectiveHighlight = highlighted && navigableValues.includes(highlighted) ? highlighted : navigableValues[0];
   const inputRef = react.useRef(null);
   const inputModalityProps = useInputModality.useInputModality();
   const portalContainer = PortalContext.useResolvedPortalContainer(container);
@@ -260,41 +211,41 @@ const InternalSelect = ({
     inputRef.current?.focus();
   };
   const clearSearch = () => {
-    onUpdateSearch("");
+    setSearch("");
   };
   const onKeyDown = (e) => {
     if (!e.defaultPrevented) {
       if (e.key === "Enter") {
         e.preventDefault();
-        if (highlighted) {
-          onSelect(highlighted, void 0, e);
-        } else if (visibleList.current.length === 0 && allowCreateOption) {
+        if (effectiveHighlight) {
+          onSelect(effectiveHighlight, void 0, e);
+        } else if (matchedOptions.length === 0 && allowCreateOption) {
           onSelect(search, "custom", e);
         }
       } else if (["ArrowUp", "ArrowDown", "Home", "End"].includes(e.key)) {
         e.preventDefault();
-        let nextHighlightedValue = highlighted;
-        const highlightedIndex = navigatable.current.findIndex(
-          (value) => value === highlighted
+        let nextHighlightedValue = effectiveHighlight;
+        const highlightedIndex = navigableValues.findIndex(
+          (value) => value === effectiveHighlight
         );
         if (e.key === "ArrowUp") {
           if (highlightedIndex === 0) {
-            nextHighlightedValue = navigatable.current[navigatable.current.length - 1];
+            nextHighlightedValue = navigableValues[navigableValues.length - 1];
           } else {
-            nextHighlightedValue = navigatable.current[highlightedIndex - 1];
+            nextHighlightedValue = navigableValues[highlightedIndex - 1];
           }
         } else if (e.key === "ArrowDown") {
           e.preventDefault();
-          if (highlightedIndex === navigatable.current.length - 1) {
-            nextHighlightedValue = navigatable.current[0];
+          if (highlightedIndex === navigableValues.length - 1) {
+            nextHighlightedValue = navigableValues[0];
           } else {
-            nextHighlightedValue = navigatable.current[highlightedIndex + 1];
+            nextHighlightedValue = navigableValues[highlightedIndex + 1];
           }
         } else if (e.key === "End") {
           e.preventDefault();
-          nextHighlightedValue = navigatable.current[navigatable.current.length - 1];
+          nextHighlightedValue = navigableValues[navigableValues.length - 1];
         } else if (e.key === "Home") {
-          nextHighlightedValue = navigatable.current[0];
+          nextHighlightedValue = navigableValues[0];
           e.preventDefault();
         }
         setHighlighted(nextHighlightedValue);
@@ -302,21 +253,19 @@ const InternalSelect = ({
     }
   };
   const isHidden = react.useCallback(
-    (value) => {
-      return !visibleList.current.includes(value ?? "");
-    },
-    [visibleList]
+    (value) => !visibleValues.has(value ?? ""),
+    [visibleValues]
   );
   const optionContextValue = react.useMemo(() => {
     return {
       search,
       updateHighlighted: setHighlighted,
-      highlighted,
+      highlighted: effectiveHighlight,
       isHidden,
       onSelect,
       selectedValues
     };
-  }, [search, highlighted, isHidden, onSelect, selectedValues]);
+  }, [search, effectiveHighlight, isHidden, onSelect, selectedValues]);
   const onCreateOption = (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -349,7 +298,7 @@ const InternalSelect = ({
                     "data-testid": "select-trigger",
                     ...triggerProps,
                     children: [
-                      isInitialized && /* @__PURE__ */ jsxRuntime.jsx(SelectComponents.SelectValue, { children: selectedValues.length === 0 ? placeholder : multiple ? /* @__PURE__ */ jsxRuntime.jsx(
+                      /* @__PURE__ */ jsxRuntime.jsx(SelectComponents.SelectValue, { children: selectedValues.length === 0 ? placeholder : multiple ? /* @__PURE__ */ jsxRuntime.jsx(
                         MultiSelectValue.MultiSelectValue,
                         {
                           disabled: disabled ?? false,
@@ -384,7 +333,7 @@ const InternalSelect = ({
                     form,
                     value: selectedValues,
                     onChange: () => null,
-                    children: list.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+                    children: normalizedOptions.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
                       "option",
                       {
                         value: item.value,
@@ -402,10 +351,7 @@ const InternalSelect = ({
                     sideOffset: 5,
                     onFocus,
                     onCloseAutoFocus: () => {
-                      onUpdateSearch("");
-                    },
-                    onOpenAutoFocus: () => {
-                      setHighlighted(visibleList.current[0]);
+                      setSearch("");
                     },
                     align: "start",
                     $useFullWidthItems: useFullWidthItems,
@@ -417,7 +363,7 @@ const InternalSelect = ({
                           {
                             ref: inputRef,
                             value: search,
-                            onChange: (e) => onUpdateSearch(e.target.value),
+                            onChange: (e) => onSearchChange(e.target.value),
                             "data-testid": "select-search-input",
                             onKeyDown,
                             $showSearch: showSearch
@@ -438,54 +384,61 @@ const InternalSelect = ({
                           }
                         )
                       ] }),
-                      /* @__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}`
-                                  );
-                                }
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        SelectComponents.SelectListContent,
+                        {
+                          ref: listNode,
+                          $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(
-                                  SelectItem,
+                                  MultiSelectCheckboxItem,
                                   {
-                                    ...itemProps
+                                    ...props2
                                   },
-                                  `select-${id}-group-${index}-item-${itemIndex}`
+                                  `select-${id}-item-${index}`
                                 );
-                              })
-                            },
-                            `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}`
-                          );
+                              }
+                              return /* @__PURE__ */ jsxRuntime.jsx(
+                                SelectItem,
+                                {
+                                  ...props2
+                                },
+                                `select-${id}-item-${index}`
+                              );
+                            }
+                          }) : children })
                         }
-                      }) : children }) }),
-                      visibleList.current.length === 0 && (allowCreateOption || !!noAvailableOptions) && /* @__PURE__ */ jsxRuntime.jsx(
+                      ),
+                      matchedOptions.length === 0 && (allowCreateOption || !!noAvailableOptions) && /* @__PURE__ */ jsxRuntime.jsx(
                         NoOptionsDisplay,
                         {
                           allowCreateOption,
@@ -525,10 +478,11 @@ const SelectGroup = react.forwardRef(
       SelectComponents.SelectGroupContainer,
       {
         ...props,
+        "cui-select-group": "",
         ref: mergeRefs.mergeRefs([
           forwardedRef,
           (node) => {
-            const hidden = node?.querySelectorAll("[cui-select-item]").length === 0;
+            const hidden = node?.querySelectorAll("[cui-select-item]:not([hidden])").length === 0;
             if (hidden) {
               node?.setAttribute("hidden", "");
             } else {
@@ -538,7 +492,7 @@ const SelectGroup = react.forwardRef(
           }
         ]),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(SelectComponents.SelectGroupName, { children: heading }),
+          /* @__PURE__ */ jsxRuntime.jsx(SelectComponents.SelectGroupName, { "cui-select-group-name": "", children: heading }),
           /* @__PURE__ */ jsxRuntime.jsx(SelectComponents.SelectGroupContent, { children })
         ]
       }
@@ -577,15 +531,15 @@ const SelectItem = react.forwardRef(
         updateHighlighted(value);
       }
     };
-    if (isHidden(value)) {
-      return null;
-    }
+    const hidden = isHidden(value);
     const isChecked = selectedValues.includes(value);
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
         GenericMenu.GenericMenuItem,
         {
           ...props,
+          hidden,
+          className: cva.cn(SelectComponents.selectStyles["select-item"], props.className),
           "data-value": value,
           onClick: onSelectValue,
           onMouseOver,
@@ -622,7 +576,7 @@ const SelectItem = react.forwardRef(
           ]
         }
       ),
-      separator && /* @__PURE__ */ jsxRuntime.jsx(Separator.Separator, { size: "sm" })
+      separator && !hidden && /* @__PURE__ */ jsxRuntime.jsx(Separator.Separator, { size: "sm" })
     ] });
   }
 );
@@ -659,15 +613,15 @@ const MultiSelectCheckboxItem = react.forwardRef(
         updateHighlighted(value);
       }
     };
-    if (isHidden(value)) {
-      return null;
-    }
+    const hidden = isHidden(value);
     const isChecked = selectedValues.includes(value);
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         GenericMenu.GenericMenuItem,
         {
           ...props,
+          hidden,
+          className: cva.cn(SelectComponents.selectStyles["select-item"], props.className),
           "data-value": value,
           onClick: handleMenuItemClick,
           onMouseOver: handleMenuItemMouseOver,
@@ -711,7 +665,7 @@ const MultiSelectCheckboxItem = react.forwardRef(
           )
         }
       ),
-      separator && /* @__PURE__ */ jsxRuntime.jsx(Separator.Separator, { size: "sm" })
+      separator && !hidden && /* @__PURE__ */ jsxRuntime.jsx(Separator.Separator, { size: "sm" })
     ] });
   }
 );