@clickhouse/click-ui 0.10.0-rc1 → 0.10.0-rc2

package/dist/esm/components/DatePicker/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../src/components/DatePicker/utils.ts"],"sourcesContent":["import { isSameDate } from '@h6s/calendar';\nimport { dayjs } from '@/utils/date';\n\nexport type Timezone = 'system' | 'UTC';\n\nexport interface DateRange {\n  startDate: Date;\n  endDate: Date;\n}\n\nconst locale = 'en-US';\n\nexport type Meridiem = 'am' | 'pm';\n\nexport interface Time {\n  hour: number;\n  minutes: number;\n}\n\nexport interface DateRangeListItem {\n  dateRange: DateRange;\n  label: string;\n}\n\nconst createFormatter = (options: Intl.DateTimeFormatOptions) => {\n  const timezoneFormatters: Partial<Record<Timezone, Intl.DateTimeFormat>> = {};\n\n  return (timezone: Timezone, date: Date): string => {\n    if (!timezoneFormatters[timezone]) {\n      const opts = timezone === 'UTC' ? { ...options, timeZone: 'UTC' } : options;\n      timezoneFormatters[timezone] = new Intl.DateTimeFormat(locale, opts);\n    }\n    return timezoneFormatters[timezone].format(date);\n  };\n};\n\nexport const formatSelectedDate = createFormatter({\n  day: '2-digit',\n  month: 'short',\n  year: 'numeric',\n});\n\nexport const formatWeekday = createFormatter({ weekday: 'short' });\n\nexport const formatSelectedDateTime = createFormatter({\n  day: '2-digit',\n  month: 'short',\n  hour: '2-digit',\n  minute: '2-digit',\n});\n\nexport const formatSelectedDateTimeWithSeconds = createFormatter({\n  day: '2-digit',\n  month: 'short',\n  hour: '2-digit',\n  minute: '2-digit',\n  second: '2-digit',\n});\n\nexport const formatDateHeader = createFormatter({\n  month: 'short',\n  year: 'numeric',\n});\n\n// In UTC mode, shift by the host offset so local-time getters return UTC\n// values. shiftFromTimezone reverses it.\n//\n// Caveat: round-tripping across a DST boundary drifts by an hour — each\n// direction reads getTimezoneOffset on its own input. Call sites don't\n// round-trip the same Date, so this hasn't bitten us.\nexport const shiftToTimezone = (date: Date, timezone: Timezone): Date => {\n  if (timezone !== 'UTC') {\n    return date;\n  }\n  return new Date(date.getTime() + date.getTimezoneOffset() * 60_000);\n};\n\nexport const shiftFromTimezone = (date: Date, timezone: Timezone): Date => {\n  if (timezone !== 'UTC') {\n    return date;\n  }\n  return new Date(date.getTime() - date.getTimezoneOffset() * 60_000);\n};\n\nexport const getPredefinedMonthsForDateRangePicker = (\n  numberOfMonths: number\n): DateRange[] => {\n  const now = dayjs();\n\n  if (numberOfMonths < 0) {\n    const lastSixMonths: DateRange[] = [];\n    for (let i = 0; i < Math.abs(numberOfMonths); i++) {\n      const date = now.subtract(i, 'month');\n      if (date.date() === 1 && date.month() === now.month()) {\n        continue;\n      }\n      lastSixMonths.push({\n        startDate: date.startOf('month').toDate(),\n        endDate: i === 0 ? now.toDate() : date.endOf('month').toDate(),\n      });\n    }\n\n    return lastSixMonths.reverse();\n  }\n\n  const nextSixMonths: DateRange[] = [];\n  for (let i = 0; i < numberOfMonths; i++) {\n    const date = now.add(i, 'month');\n    nextSixMonths.push({\n      startDate: date.startOf('month').toDate(),\n      endDate: date.endOf('month').toDate(),\n    });\n  }\n\n  return nextSixMonths;\n};\n\nexport const getPredefinedTimePeriodsForDateTimePicker = (): DateRangeListItem[] => {\n  const now = dayjs();\n\n  const fifteenMinutesAgo = now.subtract(15, 'minute');\n  const thirtyMinutesAgo = now.subtract(30, 'minute');\n  const oneHourAgo = now.subtract(1, 'hour');\n  const sixHoursAgo = now.subtract(6, 'hour');\n  const oneDayAgo = now.subtract(1, 'day');\n  const oneMonthAgo = now.subtract(1, 'month');\n\n  const dateRangeList: DateRangeListItem[] = [\n    {\n      dateRange: {\n        startDate: fifteenMinutesAgo.toDate(),\n        endDate: now.toDate(),\n      },\n      label: 'Past 15 minutes',\n    },\n    {\n      dateRange: {\n        startDate: thirtyMinutesAgo.toDate(),\n        endDate: now.toDate(),\n      },\n      label: 'Past 30 minutes',\n    },\n    {\n      dateRange: {\n        startDate: oneHourAgo.toDate(),\n        endDate: now.toDate(),\n      },\n      label: 'Past hour',\n    },\n    {\n      dateRange: {\n        startDate: sixHoursAgo.toDate(),\n        endDate: now.toDate(),\n      },\n      label: 'Past 6 hours',\n    },\n    {\n      dateRange: {\n        startDate: oneDayAgo.toDate(),\n        endDate: now.toDate(),\n      },\n      label: 'Past day',\n    },\n    {\n      dateRange: {\n        startDate: oneMonthAgo.toDate(),\n        endDate: now.toDate(),\n      },\n      label: 'Past month',\n    },\n  ];\n\n  return dateRangeList;\n};\n\nexport const getNextNDatesForDatePickerAllowOnlyList = (numberOfDays: number): Date[] => {\n  const now = dayjs();\n\n  return Array.from({ length: numberOfDays }, (_, i) =>\n    now.add(i, 'day').startOf('day').toDate()\n  );\n};\n\nexport const isDateNotInAllowList = (\n  allowList: Array<Date> | undefined,\n  date: Date\n): boolean =>\n  Array.isArray(allowList) &&\n  allowList.length > 0 &&\n  !allowList.some(allowedDate => isSameDate(allowedDate, date));\n\nexport const datesAreWithinMaxRange = (\n  startDate: Date,\n  endDate: Date,\n  maxRangeLength: number\n): boolean => {\n  const daysDifference = Math.abs(dayjs(startDate).diff(dayjs(endDate), 'days'));\n\n  return daysDifference <= maxRangeLength;\n};\n\nexport const isDateRangeTheWholeMonth = (\n  { startDate, endDate }: DateRange,\n  timezone: Timezone = 'system'\n): boolean => {\n  const start = timezone === 'UTC' ? dayjs.utc(startDate) : dayjs(startDate);\n  const end = timezone === 'UTC' ? dayjs.utc(endDate) : dayjs(endDate);\n\n  if (start.month() !== end.month()) {\n    return false;\n  }\n\n  const startDateIsFirstDay = start.isSame(start.startOf('month'), 'day');\n  const endDateIsLastDay = end.isSame(end.endOf('month'), 'day');\n\n  return startDateIsFirstDay && endDateIsLastDay;\n};\n\nexport const dateRangeIsValid = (dateRange: DateRange): boolean => {\n  if (!dateRange?.startDate || !dateRange?.endDate) {\n    return false;\n  }\n\n  if (!(dateRange.startDate instanceof Date) || !dayjs(dateRange.startDate).isValid()) {\n    return false;\n  }\n\n  if (!(dateRange.endDate instanceof Date) || !dayjs(dateRange.endDate).isValid()) {\n    return false;\n  }\n\n  if (dateRange.startDate.getTime() > dateRange.endDate.getTime()) {\n    return false;\n  }\n\n  return true;\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"utils.js","sources":["../../../../src/components/DatePicker/utils.ts"],"sourcesContent":["import { isSameDate } from '@h6s/calendar';\nimport { dayjs } from '@/utils/date';\n\nexport type Timezone = 'system' | 'UTC';\n\nexport interface DateRange {\n  startDate: Date;\n  endDate: Date;\n}\n\nconst locale = 'en-US';\n\nexport type Meridiem = 'am' | 'pm';\n\nexport interface Time {\n  hour: number;\n  minutes: number;\n}\n\nexport interface DateRangeListItem {\n  dateRange: DateRange;\n  label: string;\n}\n\nconst createFormatter = (options: Intl.DateTimeFormatOptions) => {\n  const timezoneFormatters: Partial<Record<Timezone, Intl.DateTimeFormat>> = {};\n\n  return (timezone: Timezone, date: Date): string => {\n    if (!timezoneFormatters[timezone]) {\n      const opts = timezone === 'UTC' ? { ...options, timeZone: 'UTC' } : options;\n      timezoneFormatters[timezone] = new Intl.DateTimeFormat(locale, opts);\n    }\n    return timezoneFormatters[timezone].format(date);\n  };\n};\n\nexport const formatSelectedDate = createFormatter({\n  day: '2-digit',\n  month: 'short',\n  year: 'numeric',\n});\n\nexport const formatWeekday = createFormatter({ weekday: 'short' });\n\nexport const formatSelectedDateTime = createFormatter({\n  day: '2-digit',\n  month: 'short',\n  hour: '2-digit',\n  minute: '2-digit',\n});\n\nexport const formatSelectedDateTimeWithSeconds = createFormatter({\n  day: '2-digit',\n  month: 'short',\n  hour: '2-digit',\n  minute: '2-digit',\n  second: '2-digit',\n});\n\nexport const formatDateHeader = createFormatter({\n  month: 'short',\n  year: 'numeric',\n});\n\n// In UTC mode, shift by the host offset so local-time getters return UTC\n// values. shiftFromTimezone reverses it.\n//\n// Caveat: round-tripping across a DST boundary drifts by an hour — each\n// direction reads getTimezoneOffset on its own input. Call sites don't\n// round-trip the same Date, so this hasn't bitten us.\nexport const shiftToTimezone = (date: Date, timezone: Timezone): Date => {\n  if (timezone !== 'UTC') {\n    return date;\n  }\n  return new Date(date.getTime() + date.getTimezoneOffset() * 60_000);\n};\n\nexport const shiftFromTimezone = (date: Date, timezone: Timezone): Date => {\n  if (timezone !== 'UTC') {\n    return date;\n  }\n  return new Date(date.getTime() - date.getTimezoneOffset() * 60_000);\n};\n\nexport const getPredefinedMonthsForDateRangePicker = (\n  numberOfMonths: number\n): DateRange[] => {\n  const now = dayjs();\n\n  if (numberOfMonths < 0) {\n    const lastSixMonths: DateRange[] = [];\n    for (let i = 0; i < Math.abs(numberOfMonths); i++) {\n      const date = now.subtract(i, 'month');\n      if (date.date() === 1 && date.month() === now.month()) {\n        continue;\n      }\n      lastSixMonths.push({\n        startDate: date.startOf('month').toDate(),\n        endDate: i === 0 ? now.toDate() : date.endOf('month').toDate(),\n      });\n    }\n\n    return lastSixMonths.reverse();\n  }\n\n  const nextSixMonths: DateRange[] = [];\n  for (let i = 0; i < numberOfMonths; i++) {\n    const date = now.add(i, 'month');\n    nextSixMonths.push({\n      startDate: date.startOf('month').toDate(),\n      endDate: date.endOf('month').toDate(),\n    });\n  }\n\n  return nextSixMonths;\n};\n\nexport const getPredefinedTimePeriodsForDateTimePicker = (): DateRangeListItem[] => {\n  const now = dayjs();\n\n  const fifteenMinutesAgo = now.subtract(15, 'minute');\n  const thirtyMinutesAgo = now.subtract(30, 'minute');\n  const oneHourAgo = now.subtract(1, 'hour');\n  const sixHoursAgo = now.subtract(6, 'hour');\n  const oneDayAgo = now.subtract(1, 'day');\n  const oneMonthAgo = now.subtract(1, 'month');\n\n  const dateRangeList: DateRangeListItem[] = [\n    {\n      dateRange: {\n        startDate: fifteenMinutesAgo.toDate(),\n        endDate: now.toDate(),\n      },\n      label: 'Past 15 minutes',\n    },\n    {\n      dateRange: {\n        startDate: thirtyMinutesAgo.toDate(),\n        endDate: now.toDate(),\n      },\n      label: 'Past 30 minutes',\n    },\n    {\n      dateRange: {\n        startDate: oneHourAgo.toDate(),\n        endDate: now.toDate(),\n      },\n      label: 'Past hour',\n    },\n    {\n      dateRange: {\n        startDate: sixHoursAgo.toDate(),\n        endDate: now.toDate(),\n      },\n      label: 'Past 6 hours',\n    },\n    {\n      dateRange: {\n        startDate: oneDayAgo.toDate(),\n        endDate: now.toDate(),\n      },\n      label: 'Past day',\n    },\n    {\n      dateRange: {\n        startDate: oneMonthAgo.toDate(),\n        endDate: now.toDate(),\n      },\n      label: 'Past month',\n    },\n  ];\n\n  return dateRangeList;\n};\n\nexport const getNextNDatesForDatePickerAllowOnlyList = (numberOfDays: number): Date[] => {\n  const now = dayjs();\n\n  return Array.from({ length: numberOfDays }, (_, i) =>\n    now.add(i, 'day').startOf('day').toDate()\n  );\n};\n\nexport const isDateNotInAllowList = (\n  allowList: Array<Date> | undefined,\n  date: Date\n): boolean =>\n  Array.isArray(allowList) &&\n  allowList.length > 0 &&\n  !allowList.some(allowedDate => isSameDate(allowedDate, date));\n\nexport const areDatesWithinMaxRange = (\n  startDate: Date,\n  endDate: Date,\n  maxRangeLength: number\n): boolean => {\n  // Compare calendar days; dayjs would otherwise drop a partial day from the diff.\n  const daysDifference = Math.abs(\n    dayjs(startDate).startOf('day').diff(dayjs(endDate).startOf('day'), 'days')\n  );\n\n  return daysDifference < maxRangeLength;\n};\n\nconst ONE_DAY_MS = 24 * 60 * 60 * 1000;\nconst toleranceMs = 60 * 1000;\n\nexport const isDateRangeWithinRange = (\n  selectedRange: DateRange,\n  predefinedRange: DateRange,\n  timezone: Timezone = 'system'\n): boolean => {\n  const { startDate, endDate } = predefinedRange;\n\n  if (endDate.getTime() - startDate.getTime() < ONE_DAY_MS) {\n    return (\n      Math.abs(selectedRange.startDate.getTime() - startDate.getTime()) <= toleranceMs &&\n      Math.abs(selectedRange.endDate.getTime() - endDate.getTime()) <= toleranceMs\n    );\n  }\n\n  // Shifted the same way the calendar is, so the check agrees with the days it marks.\n  const shiftedSelectedStart = shiftToTimezone(selectedRange.startDate, timezone);\n  const shiftedSelectedEnd = shiftToTimezone(selectedRange.endDate, timezone);\n  const shiftedStart = shiftToTimezone(startDate, timezone);\n  const shiftedEnd = shiftToTimezone(endDate, timezone);\n\n  return (\n    isSameDate(shiftedSelectedStart, shiftedStart) &&\n    isSameDate(shiftedSelectedEnd, shiftedEnd)\n  );\n};\n\nexport const isDateRangeTheWholeMonth = (\n  { startDate, endDate }: DateRange,\n  timezone: Timezone = 'system'\n): boolean => {\n  const start = timezone === 'UTC' ? dayjs.utc(startDate) : dayjs(startDate);\n  const end = timezone === 'UTC' ? dayjs.utc(endDate) : dayjs(endDate);\n\n  if (start.month() !== end.month()) {\n    return false;\n  }\n\n  const startDateIsFirstDay = start.isSame(start.startOf('month'), 'day');\n  const endDateIsLastDay = end.isSame(end.endOf('month'), 'day');\n\n  return startDateIsFirstDay && endDateIsLastDay;\n};\n\nexport const isDateRangeValid = (dateRange: DateRange): boolean => {\n  if (!dateRange?.startDate || !dateRange?.endDate) {\n    return false;\n  }\n\n  if (!(dateRange.startDate instanceof Date) || !dayjs(dateRange.startDate).isValid()) {\n    return false;\n  }\n\n  if (!(dateRange.endDate instanceof Date) || !dayjs(dateRange.endDate).isValid()) {\n    return false;\n  }\n\n  if (dateRange.startDate.getTime() > dateRange.endDate.getTime()) {\n    return false;\n  }\n\n  return true;\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/components/GenericMenu/GenericMenu.css

@@ -20,6 +20,8 @@
 .generic-menu-panel_type_dropdown-menu__ezKZT {
   max-width: var(--radix-dropdown-menu-content-available-width);
   max-height: var(--radix-dropdown-menu-content-available-height);
+  /* Kept in this file (not Dropdown.module.css) so it can't lose to `overflow: hidden` above due to cross-file import order. */
+  overflow-y: auto;
 }
 
 .generic-menu-panel_type_context-menu__nu-Kt {

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" })
     ] });
   }
 );