@clickhouse/click-ui 0.10.0-rc1 → 0.10.0

package/dist/esm/components/Select/common/InternalSelect.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useId, useState, useRef, useCallback, useEffect, useMemo, forwardRef, Children, isValidElement } from 'react';
+import { useId, useState, useRef, useCallback, useMemo, forwardRef, Children, isValidElement } from 'react';
 import { Portal } from '@radix-ui/react-popover';
 import { SelectPopoverRoot, StyledSelectTrigger, SelectValue, HiddenSelectElement, SelectPopoverContent, SelectList, SearchBarContainer, SearchBar, selectStyles, SelectListContent, SelectGroupContainer, SelectGroupName, SelectGroupContent, SelectNoDataContainer, SelectItemDescriptionText } from './SelectComponents.js';
 import { OptionContext } from './OptionContext.js';
@@ -11,7 +11,6 @@ import { GenericMenuItem } from '../../GenericMenu/index.js';
 import { IconWrapper } from '../../IconWrapper/index.js';
 import { useInputModality } from '../../../hooks/internal/useInputModality.js';
 import { cn } from '../../../lib/cva.js';
-import { getTextFromNodes } from '../../../lib/getTextFromNodes.js';
 import { useResolvedPortalContainer } from '../../../providers/PortalContext.js';
 import { FormRoot } from '../../FormContainer/FormRoot.js';
 import { FormElementContainer } from '../../FormContainer/FormElementContainer.js';
@@ -85,36 +84,18 @@ const NoOptionsDisplay = ({
     }
   );
 };
-const childrenToComboboxItemArray = (children, callback, heading) => {
+const childrenToNormalizedOptions = (children, register) => {
   return Children.toArray(children).flatMap((child) => {
     if (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(child.props.heading).toLowerCase()
-        );
+        return childrenToNormalizedOptions(child.props.children, register);
       } else if (type.displayName === "Select.Item") {
-        const title = 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 [];
@@ -155,100 +136,70 @@ const InternalSelect = ({
   const defaultId = useId();
   const [search, setSearch] = useState("");
   const [highlighted, setHighlighted] = useState();
-  const visibleList = useRef([]);
-  const navigatable = useRef([]);
+  const [searchSource, setSearchSource] = useState(() => /* @__PURE__ */ new Map());
   const valueNode = useRef(/* @__PURE__ */ new Map());
-  const [isInitialized, setInitialized] = useState(false);
-  const [list, setList] = useState([]);
-  const updateElements = 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 = 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 = useCallback((value, nodeProps) => {
+    valueNode.current.set(value, nodeProps);
+  }, []);
+  const normalizedOptions = 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 = useRef(null);
+  const captureSearchSource = 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 = useMemo(() => {
+    if (search === "") {
+      return normalizedOptions;
+    }
+    const searchLowerCase = search.toLowerCase();
+    return normalizedOptions.filter(
+      (item) => (searchSource.get(item.value) ?? "").includes(searchLowerCase)
+    );
+  }, [search, normalizedOptions, searchSource]);
+  const visibleValues = useMemo(
+    () => new Set(matchedOptions.map((o) => o.value)),
+    [matchedOptions]
   );
-  const updateList = useCallback(
-    (children2, options2) => {
-      const lowerCasedSearch = search.toLowerCase();
-      if (options2) {
-        setList(
-          options2.flatMap((option) => {
-            if ("options" in option) {
-              const heading = getTextFromNodes(option.heading).toLowerCase();
-              return (option.options ?? []).map((item) => {
-                valueNode.current.set(item.value, item);
-                const title = 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(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(option.label)
-              };
-            }
-          })
-        );
-      } else if (children2) {
-        setList(childrenToComboboxItemArray(children2, updateElements));
-      }
-    },
-    [disabled, search, updateElements]
+  const navigableValues = useMemo(
+    () => matchedOptions.filter((o) => !o.disabled).map((o) => o.value),
+    [matchedOptions]
   );
-  useEffect(() => {
-    updateList(children, options);
-    setInitialized(true);
-  }, [children, options, updateList]);
+  const effectiveHighlight = highlighted && navigableValues.includes(highlighted) ? highlighted : navigableValues[0];
   const inputRef = useRef(null);
   const inputModalityProps = useInputModality();
   const portalContainer = useResolvedPortalContainer(container);
@@ -256,41 +207,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);
@@ -298,21 +249,19 @@ const InternalSelect = ({
     }
   };
   const isHidden = useCallback(
-    (value) => {
-      return !visibleList.current.includes(value ?? "");
-    },
-    [visibleList]
+    (value) => !visibleValues.has(value ?? ""),
+    [visibleValues]
   );
   const optionContextValue = 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();
@@ -345,7 +294,7 @@ const InternalSelect = ({
                     "data-testid": "select-trigger",
                     ...triggerProps,
                     children: [
-                      isInitialized && /* @__PURE__ */ jsx(SelectValue, { children: selectedValues.length === 0 ? placeholder : multiple ? /* @__PURE__ */ jsx(
+                      /* @__PURE__ */ jsx(SelectValue, { children: selectedValues.length === 0 ? placeholder : multiple ? /* @__PURE__ */ jsx(
                         MultiSelectValue,
                         {
                           disabled: disabled ?? false,
@@ -380,7 +329,7 @@ const InternalSelect = ({
                     form,
                     value: selectedValues,
                     onChange: () => null,
-                    children: list.map((item) => /* @__PURE__ */ jsx(
+                    children: normalizedOptions.map((item) => /* @__PURE__ */ jsx(
                       "option",
                       {
                         value: item.value,
@@ -398,10 +347,7 @@ const InternalSelect = ({
                     sideOffset: 5,
                     onFocus,
                     onCloseAutoFocus: () => {
-                      onUpdateSearch("");
-                    },
-                    onOpenAutoFocus: () => {
-                      setHighlighted(visibleList.current[0]);
+                      setSearch("");
                     },
                     align: "start",
                     $useFullWidthItems: useFullWidthItems,
@@ -413,7 +359,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
@@ -434,54 +380,61 @@ const InternalSelect = ({
                           }
                         )
                       ] }),
-                      /* @__PURE__ */ jsx(SelectListContent, { $maxHeight: maxHeight, children: /* @__PURE__ */ jsx(OptionContext.Provider, { value: optionContextValue, children: options && options.length > 0 ? options.map((props2, index) => {
-                        if ("options" in props2) {
-                          const { options: itemList = [], ...groupProps } = props2;
-                          return /* @__PURE__ */ jsx(
-                            SelectGroup,
-                            {
-                              ...groupProps,
-                              children: itemList.map((itemProps, itemIndex) => {
-                                if (checkbox) {
-                                  return /* @__PURE__ */ jsx(
-                                    MultiSelectCheckboxItem,
-                                    {
-                                      ...itemProps
-                                    },
-                                    `select-${id}-group-${index}-item-${itemIndex}`
-                                  );
-                                }
+                      /* @__PURE__ */ jsx(
+                        SelectListContent,
+                        {
+                          ref: listNode,
+                          $maxHeight: maxHeight,
+                          children: /* @__PURE__ */ jsx(OptionContext.Provider, { value: optionContextValue, children: options && options.length > 0 ? options.map((props2, index) => {
+                            if ("options" in props2) {
+                              const { options: itemList = [], ...groupProps } = props2;
+                              return /* @__PURE__ */ jsx(
+                                SelectGroup,
+                                {
+                                  ...groupProps,
+                                  children: itemList.map((itemProps, itemIndex) => {
+                                    if (checkbox) {
+                                      return /* @__PURE__ */ jsx(
+                                        MultiSelectCheckboxItem,
+                                        {
+                                          ...itemProps
+                                        },
+                                        `select-${id}-group-${index}-item-${itemIndex}`
+                                      );
+                                    }
+                                    return /* @__PURE__ */ jsx(
+                                      SelectItem,
+                                      {
+                                        ...itemProps
+                                      },
+                                      `select-${id}-group-${index}-item-${itemIndex}`
+                                    );
+                                  })
+                                },
+                                `select-${id}-group-${index}`
+                              );
+                            } else {
+                              if (checkbox) {
                                 return /* @__PURE__ */ jsx(
-                                  SelectItem,
+                                  MultiSelectCheckboxItem,
                                   {
-                                    ...itemProps
+                                    ...props2
                                   },
-                                  `select-${id}-group-${index}-item-${itemIndex}`
+                                  `select-${id}-item-${index}`
                                 );
-                              })
-                            },
-                            `select-${id}-group-${index}`
-                          );
-                        } else {
-                          if (checkbox) {
-                            return /* @__PURE__ */ jsx(
-                              MultiSelectCheckboxItem,
-                              {
-                                ...props2
-                              },
-                              `select-${id}-item-${index}`
-                            );
-                          }
-                          return /* @__PURE__ */ jsx(
-                            SelectItem,
-                            {
-                              ...props2
-                            },
-                            `select-${id}-item-${index}`
-                          );
+                              }
+                              return /* @__PURE__ */ jsx(
+                                SelectItem,
+                                {
+                                  ...props2
+                                },
+                                `select-${id}-item-${index}`
+                              );
+                            }
+                          }) : children })
                         }
-                      }) : children }) }),
-                      visibleList.current.length === 0 && (allowCreateOption || !!noAvailableOptions) && /* @__PURE__ */ jsx(
+                      ),
+                      matchedOptions.length === 0 && (allowCreateOption || !!noAvailableOptions) && /* @__PURE__ */ jsx(
                         NoOptionsDisplay,
                         {
                           allowCreateOption,
@@ -521,10 +474,11 @@ const SelectGroup = forwardRef(
       SelectGroupContainer,
       {
         ...props,
+        "cui-select-group": "",
         ref: 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 {
@@ -534,7 +488,7 @@ const SelectGroup = forwardRef(
           }
         ]),
         children: [
-          /* @__PURE__ */ jsx(SelectGroupName, { children: heading }),
+          /* @__PURE__ */ jsx(SelectGroupName, { "cui-select-group-name": "", children: heading }),
           /* @__PURE__ */ jsx(SelectGroupContent, { children })
         ]
       }
@@ -573,15 +527,15 @@ const SelectItem = forwardRef(
         updateHighlighted(value);
       }
     };
-    if (isHidden(value)) {
-      return null;
-    }
+    const hidden = isHidden(value);
     const isChecked = selectedValues.includes(value);
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsxs(
         GenericMenuItem,
         {
           ...props,
+          hidden,
+          className: cn(selectStyles["select-item"], props.className),
           "data-value": value,
           onClick: onSelectValue,
           onMouseOver,
@@ -618,7 +572,7 @@ const SelectItem = forwardRef(
           ]
         }
       ),
-      separator && /* @__PURE__ */ jsx(Separator, { size: "sm" })
+      separator && !hidden && /* @__PURE__ */ jsx(Separator, { size: "sm" })
     ] });
   }
 );
@@ -655,15 +609,15 @@ const MultiSelectCheckboxItem = forwardRef(
         updateHighlighted(value);
       }
     };
-    if (isHidden(value)) {
-      return null;
-    }
+    const hidden = isHidden(value);
     const isChecked = selectedValues.includes(value);
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         GenericMenuItem,
         {
           ...props,
+          hidden,
+          className: cn(selectStyles["select-item"], props.className),
           "data-value": value,
           onClick: handleMenuItemClick,
           onMouseOver: handleMenuItemMouseOver,
@@ -707,7 +661,7 @@ const MultiSelectCheckboxItem = forwardRef(
           )
         }
       ),
-      separator && /* @__PURE__ */ jsx(Separator, { size: "sm" })
+      separator && !hidden && /* @__PURE__ */ jsx(Separator, { size: "sm" })
     ] });
   }
 );