From 3ffab27099ab01a0c8fa46ca3d5dbb0419911003 Mon Sep 17 00:00:00 2001
From: mimshins <mostafa.sh.coderino@gmail.com>
Date: Sun, 26 May 2024 20:49:25 +0330
Subject: [PATCH 1/4] Remove get options utility usage

---
 lib/Select/Select.tsx           | 41 ++++-------------
 lib/Select/components/Group.tsx | 47 +++++++++++--------
 lib/Select/context.ts           |  5 --
 lib/Select/utils.ts             | 81 ---------------------------------
 4 files changed, 36 insertions(+), 138 deletions(-)

diff --git a/lib/Select/Select.tsx b/lib/Select/Select.tsx
index c0fd75e..96fb63d 100644
--- a/lib/Select/Select.tsx
+++ b/lib/Select/Select.tsx
@@ -18,12 +18,7 @@ import {
 } from "../utils";
 import { SelectContext, type SelectContextValue } from "./context";
 import { Root as RootSlot } from "./slots";
-import {
-  getOptions as getOptionsUtil,
-  noValueSelected,
-  normalizeValues,
-  useElementsRegistry,
-} from "./utils";
+import { noValueSelected, normalizeValues, useElementsRegistry } from "./utils";
 
 export type RenderProps = {
   /**
@@ -415,8 +410,6 @@ const SelectBase = (props: Props, ref: React.Ref<HTMLDivElement>) => {
     closeList();
   }
 
-  const getOptions = () => getOptionsUtil(React.Children.toArray(children));
-
   const context: SelectContextValue = {
     readOnly,
     disabled,
@@ -433,7 +426,6 @@ const SelectBase = (props: Props, ref: React.Ref<HTMLDivElement>) => {
     closeListAndMaintainFocus,
     setFilteredEntities,
     setActiveDescendant,
-    getOptions,
     openList,
     closeList,
     toggleList,
@@ -491,29 +483,14 @@ const SelectBase = (props: Props, ref: React.Ref<HTMLDivElement>) => {
     if (selectedValues.length === 0) return null;
 
     const renderOptions = () => {
-      const disabledOptions = getOptions().filter(o => o.disabled);
-
-      const isOptionDisabled = (optionValue: string) =>
-        disabledOptions.some(o => o.value === optionValue);
-
-      if (!multiple) {
-        const optionValue = selectedValues as string;
-
-        if (isOptionDisabled(optionValue)) return null;
-
-        return <option value={optionValue} />;
-      }
-
-      return (selectedValues as string[]).map(value => {
-        if (isOptionDisabled(value)) return null;
-
-        return (
-          <option
-            key={value}
-            value={value}
-          />
-        );
-      });
+      if (!multiple) <option value={selectedValues as string} />;
+
+      return (selectedValues as string[]).map(value => (
+        <option
+          key={value}
+          value={value}
+        />
+      ));
     };
 
     return (
diff --git a/lib/Select/components/Group.tsx b/lib/Select/components/Group.tsx
index c7e7d51..c9e6726 100644
--- a/lib/Select/components/Group.tsx
+++ b/lib/Select/components/Group.tsx
@@ -5,10 +5,13 @@ import {
   resolvePropWithRenderContext,
 } from "../../internals";
 import type { MergeElementProps, PropWithRenderContext } from "../../types";
-import { componentWithForwardedRef, useDeterministicId } from "../../utils";
+import {
+  componentWithForwardedRef,
+  useDeterministicId,
+  useIsServerHandoffComplete,
+} from "../../utils";
 import { SelectContext } from "../context";
 import { GroupRoot as GroupRootSlot } from "../slots";
-import { getOptions } from "../utils";
 
 export type RenderProps = {
   /**
@@ -65,6 +68,8 @@ const GroupBase = (props: Props, ref: React.Ref<HTMLDivElement>) => {
 
   const id = useDeterministicId(idProp, "styleless-ui__select__group");
 
+  const isServerHandoffComplete = useIsServerHandoffComplete();
+
   const labelInfo = getLabelInfo(label, "Select.Group", {
     customErrorMessage: [
       "Invalid `label` property.",
@@ -75,30 +80,32 @@ const GroupBase = (props: Props, ref: React.Ref<HTMLDivElement>) => {
 
   const ctx = React.useContext(SelectContext);
 
+  const getOptionElements = () => {
+    const group = document.getElementById(id);
+
+    if (!group) return [];
+
+    return Array.from(group.querySelectorAll<HTMLElement>(`[role='option']`));
+  };
+
   const isHidden = React.useMemo(() => {
-    let hidden = false;
+    if (!isServerHandoffComplete) return false;
 
     const filtered = ctx?.filteredEntities;
 
-    if (filtered != null) {
-      if (filtered.length === 0) hidden = true;
-      else {
-        const options = getOptions(
-          React.Children.toArray(
-            resolvePropWithRenderContext(childrenProp, { hidden: false }),
-          ),
-          true,
-        );
-
-        hidden = options.every(
-          option => !filtered.some(value => value === option.value),
-        );
-      }
-    }
+    if (filtered == null) return false;
+    if (filtered.length === 0) return true;
+
+    const optionElements: HTMLElement[] = getOptionElements();
 
-    return hidden;
+    return optionElements.every(
+      optionElement =>
+        !filtered.some(
+          value => value === optionElement.getAttribute("data-entity"),
+        ),
+    );
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ctx?.filteredEntities]);
+  }, [ctx?.filteredEntities, isServerHandoffComplete]);
 
   if (!ctx) {
     logger("You have to use this component as a descendant of <Select.Root>.", {
diff --git a/lib/Select/context.ts b/lib/Select/context.ts
index ae3a017..944f973 100644
--- a/lib/Select/context.ts
+++ b/lib/Select/context.ts
@@ -1,8 +1,6 @@
 import * as React from "react";
 import { type LabelInfo } from "../internals";
-import type { PickAsMandatory } from "../types";
 import type { RegisteredElementsKeys } from "./Select";
-import type { OptionProps } from "./components";
 import type { ElementsRegistry } from "./utils";
 
 type ContextValue = {
@@ -21,9 +19,6 @@ type ContextValue = {
   closeListAndMaintainFocus: () => void;
   setActiveDescendant: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
   setFilteredEntities: React.Dispatch<React.SetStateAction<null | string[]>>;
-  getOptions: () => Array<
-    PickAsMandatory<OptionProps, "disabled" | "value" | "valueLabel">
-  >;
   openList: () => void;
   closeList: () => void;
   toggleList: () => void;
diff --git a/lib/Select/utils.ts b/lib/Select/utils.ts
index 05761c4..b5a7aa5 100644
--- a/lib/Select/utils.ts
+++ b/lib/Select/utils.ts
@@ -1,13 +1,4 @@
 import * as React from "react";
-import type { PickAsMandatory } from "../types";
-import {
-  Controller,
-  EmptyStatement,
-  List,
-  Option,
-  Trigger,
-  type OptionProps,
-} from "./components";
 
 export const normalizeValues = (value: string | string[] | undefined) => {
   if (value == null) return [];
@@ -24,78 +15,6 @@ export const normalizeValues = (value: string | string[] | undefined) => {
 export const noValueSelected = (value: string | string[] | undefined) =>
   normalizeValues(value).length === 0;
 
-export const getOptions = (
-  childArray: Array<Exclude<React.ReactNode, boolean | null | undefined>>,
-  isInList = false,
-) => {
-  let isListFound = isInList;
-
-  const recurse = (
-    childArray: Array<Exclude<React.ReactNode, boolean | null | undefined>>,
-    isInList: boolean,
-  ): Array<
-    PickAsMandatory<OptionProps, "disabled" | "value" | "valueLabel">
-  > => {
-    return childArray.reduce(
-      (result, child) => {
-        if (!React.isValidElement(child)) return result;
-
-        if (child.type === List) {
-          isListFound = true;
-
-          const options = recurse(
-            React.Children.toArray(
-              (child as React.ReactElement<{ children: React.ReactNode }>).props
-                .children,
-            ),
-            true,
-          );
-
-          return [...result, ...options];
-        }
-
-        if (child.type === Option) {
-          if (!isInList) return result;
-
-          const { disabled, value, valueLabel } = (
-            child as React.ReactElement<OptionProps>
-          ).props;
-
-          result.push({ disabled: disabled ?? false, value, valueLabel });
-
-          return result;
-        }
-
-        if (
-          child.type === EmptyStatement ||
-          child.type === Controller ||
-          child.type === Trigger
-        ) {
-          return result;
-        }
-
-        if (!("children" in child.props)) return result;
-        if (isListFound && !isInList) return result;
-
-        const options = recurse(
-          React.Children.toArray(
-            (child as React.ReactElement<{ children: React.ReactNode }>).props
-              .children,
-          ),
-          isInList,
-        );
-
-        return [...result, ...options];
-      },
-      [] as Array<
-        PickAsMandatory<OptionProps, "disabled" | "value" | "valueLabel">
-      >,
-    );
-  };
-
-  return recurse(childArray, isInList);
-};
-
 type Registry<Key extends string> = Map<Key, string>;
 
 export type ElementsRegistry<Key extends string> = {

From ca1109136ddb183d0674f38cd99cd5bf02095cef Mon Sep 17 00:00:00 2001
From: mimshins <mostafa.sh.coderino@gmail.com>
Date: Sun, 26 May 2024 20:49:37 +0330
Subject: [PATCH 2/4] Improve use-combobox-base hook

---
 .../components/Controller/Controller.tsx      |  1 -
 lib/Select/components/Controller/utils.ts     | 63 +++++++++++++------
 2 files changed, 45 insertions(+), 19 deletions(-)

diff --git a/lib/Select/components/Controller/Controller.tsx b/lib/Select/components/Controller/Controller.tsx
index 301c397..47dc4fe 100644
--- a/lib/Select/components/Controller/Controller.tsx
+++ b/lib/Select/components/Controller/Controller.tsx
@@ -83,7 +83,6 @@ const ControllerBase = (props: Props, ref: React.Ref<HTMLInputElement>) => {
     searchable: ctx?.searchable ?? false,
     onInputChange: onChange,
     onKeyDown,
-    getOptionsInfo: ctx?.getOptions ?? (() => []),
     getOptionElements: () => {
       const listId = ctx?.elementsRegistry.getElementId("list");
       const listNode = document.getElementById(listId ?? "");
diff --git a/lib/Select/components/Controller/utils.ts b/lib/Select/components/Controller/utils.ts
index d4a4e3b..20c8c2a 100644
--- a/lib/Select/components/Controller/utils.ts
+++ b/lib/Select/components/Controller/utils.ts
@@ -28,7 +28,6 @@ type Props<T extends HTMLElement> = {
   onBackspaceKeyDown?: React.KeyboardEventHandler<T>;
   onInputChange?: React.ChangeEventHandler<HTMLInputElement>;
   getOptionElements: () => HTMLElement[];
-  getOptionsInfo: SelectContextValue["getOptions"];
   onFilteredEntities: (
     entities: SelectContextValue["filteredEntities"],
   ) => void;
@@ -49,7 +48,6 @@ export const useComboboxBase = <T extends HTMLElement>(props: Props<T>) => {
     onEscapeKeyDown,
     onBackspaceKeyDown,
     getOptionElements,
-    getOptionsInfo,
     onActiveDescendantChange,
     onListOpenChange,
     onFilteredEntities,
@@ -70,15 +68,11 @@ export const useComboboxBase = <T extends HTMLElement>(props: Props<T>) => {
     ref: focusVisibleRef,
   } = useIsFocusVisible<T>();
 
-  const jumpToChar = useJumpToChar({
-    activeDescendantElement: activeDescendant,
-    getListItems: getOptionElements,
-    onActiveDescendantElementChange: onActiveDescendantChange,
-  });
-
   const ref = React.useRef<T>();
   const handleRef = useForkedRefs(ref, focusVisibleRef);
 
+  const cachedOptionElementsRef = React.useRef<HTMLElement[]>([]);
+
   const isSelectOnly = !searchable;
 
   const [isFocusedVisible, setIsFocusedVisible] = React.useState(() =>
@@ -97,12 +91,33 @@ export const useComboboxBase = <T extends HTMLElement>(props: Props<T>) => {
     ref.current?.focus();
   }, []);
 
+  const getCachedItems = () => {
+    if (cachedOptionElementsRef.current.length === 0) {
+      cachedOptionElementsRef.current = getOptionElements();
+    }
+
+    return cachedOptionElementsRef.current;
+  };
+
+  const jumpToChar = useJumpToChar({
+    activeDescendantElement: activeDescendant,
+    getListItems: getOptionElements,
+    onActiveDescendantElementChange: onActiveDescendantChange,
+  });
+
   useOnChange(listOpenState, currentOpenState => {
     if (disabled || readOnly) return;
-    if (currentOpenState) return;
     if (!(ref.current instanceof HTMLInputElement)) return;
 
+    if (currentOpenState) {
+      cachedOptionElementsRef.current = getOptionElements();
+
+      return;
+    }
+
     ref.current.value = "";
+    cachedOptionElementsRef.current = [];
+
     onFilteredEntities(null);
   });
 
@@ -169,7 +184,8 @@ export const useComboboxBase = <T extends HTMLElement>(props: Props<T>) => {
       if (
         item.getAttribute("aria-disabled") === "true" ||
         item.hasAttribute("data-hidden") ||
-        item.getAttribute("aria-hidden") === "true"
+        item.getAttribute("aria-hidden") === "true" ||
+        item.hasAttribute("data-hidden")
       ) {
         const newIdx =
           (forward ? idx + 1 : idx - 1 + items.length) % items.length;
@@ -184,9 +200,20 @@ export const useComboboxBase = <T extends HTMLElement>(props: Props<T>) => {
       items: (HTMLElement | null)[],
       forward: boolean,
     ) => {
-      const selectedItems = items.filter(item =>
-        item?.hasAttribute("data-selected"),
-      );
+      const selectedItems = items.filter(item => {
+        if (!item) return false;
+
+        if (
+          item.getAttribute("aria-disabled") === "true" ||
+          item.hasAttribute("data-hidden") ||
+          item.getAttribute("aria-hidden") === "true" ||
+          item.hasAttribute("data-hidden")
+        ) {
+          return false;
+        }
+
+        return item.hasAttribute("data-selected");
+      });
 
       return getAvailableItem(
         selectedItems.length > 0 ? selectedItems : items,
@@ -365,15 +392,15 @@ export const useComboboxBase = <T extends HTMLElement>(props: Props<T>) => {
 
     const query = target.value;
 
-    const options = getOptionsInfo();
+    const items = getCachedItems();
 
-    const entities = options
-      .filter(option => {
-        const text = option.valueLabel.toLowerCase();
+    const entities = items
+      .filter(item => {
+        const text = item.textContent?.trim().toLowerCase() ?? "";
 
         return text.includes(query.toLowerCase());
       })
-      .map(option => option.value);
+      .map(item => item.getAttribute("data-entity") ?? "");
 
     onFilteredEntities(entities);
     onInputChange?.(event);

From 7d7993b46399fe63aab7f6230feed37eea9414c5 Mon Sep 17 00:00:00 2001
From: mimshins <mostafa.sh.coderino@gmail.com>
Date: Sun, 26 May 2024 20:50:54 +0330
Subject: [PATCH 3/4] Update version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 90ea378..238c7e4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@styleless-ui/react",
-  "version": "1.0.0-rc.9",
+  "version": "1.0.0-rc.10",
   "description": "Completely unstyled, headless and accessible React UI components.",
   "author": "mimshins <mostafa.sh.coderino@gmail.com>",
   "license": "MIT",

From 120d1fa3584e94679fce1611b241766f1a18f7de Mon Sep 17 00:00:00 2001
From: mimshins <mostafa.sh.coderino@gmail.com>
Date: Sun, 26 May 2024 20:58:03 +0330
Subject: [PATCH 4/4] Update tests

---
 lib/Select/Select.test.tsx | 4 ++--
 lib/Select/Select.tsx      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/lib/Select/Select.test.tsx b/lib/Select/Select.test.tsx
index e07a79a..cdcf43d 100644
--- a/lib/Select/Select.test.tsx
+++ b/lib/Select/Select.test.tsx
@@ -1005,7 +1005,7 @@ describe("Select", () => {
     });
 
     expect(handleSubmit.mock.calls.length).toBe(2);
-    expect(getFormData().getAll("n")).toEqual(["1"]);
+    expect(getFormData().getAll("n")).toEqual(["0", "1"]);
 
     rerender1(
       <form
@@ -1164,7 +1164,7 @@ describe("Select", () => {
     });
 
     expect(handleSubmit.mock.calls.length).toBe(2);
-    expect(getFormData().get("n")).toBe(null);
+    expect(getFormData().get("n")).toBe("0");
 
     rerender2(
       <form
diff --git a/lib/Select/Select.tsx b/lib/Select/Select.tsx
index 96fb63d..e1325c7 100644
--- a/lib/Select/Select.tsx
+++ b/lib/Select/Select.tsx
@@ -483,7 +483,7 @@ const SelectBase = (props: Props, ref: React.Ref<HTMLDivElement>) => {
     if (selectedValues.length === 0) return null;
 
     const renderOptions = () => {
-      if (!multiple) <option value={selectedValues as string} />;
+      if (!multiple) return <option value={selectedValues as string} />;
 
       return (selectedValues as string[]).map(value => (
         <option