@musecat/uikit 0.1.1

package/packages/Components/Select/hooks/useSelectState.ts

@@ -0,0 +1,314 @@
+"use client";
+import { useViewportMatch } from "@musecat/functionkit";
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { Word } from "@/i18n/shared";
+import type {
+  Option,
+  SelectProps,
+} from "@/packages/Components/Select/Select.types";
+import {
+  filterOptionsByQuery,
+  findScrollableAncestor,
+  getStringValues,
+  isOptGroup,
+} from "@/packages/Components/Select/Select.utils";
+
+export function useSelectState(props: SelectProps<boolean>) {
+  const t = Word();
+  const {
+    value,
+    defaultValue,
+    options,
+    multiple = false,
+    combobox = false,
+    disabled = false,
+    readOnly = false,
+    lockAncestorScrollOnOpen = false,
+    placeholder,
+  } = props;
+  const isMultiple = multiple;
+  const isInlineCombobox = combobox === true || combobox === "inline";
+  const isPopoverSearch = combobox === "search";
+  const isMobileSheet = useViewportMatch("(max-width: 549.98px)");
+
+  const isInlineComboboxActive = isInlineCombobox && !isMobileSheet;
+  const isPopoverSearchActive =
+    isPopoverSearch || (isInlineCombobox && isMobileSheet);
+  const isTypeableControl = isInlineComboboxActive;
+  const isInteractionDisabled = disabled || readOnly;
+
+  const groupedOptions = useMemo(
+    () =>
+      (options ?? []).map((item) =>
+        isOptGroup(item) ? item : { label: undefined, options: [item] },
+      ),
+    [options],
+  );
+  const flatOptions = useMemo(
+    () => groupedOptions.flatMap((g) => g.options),
+    [groupedOptions],
+  );
+  const initialValues = getStringValues(value, defaultValue);
+  const instanceId = useId();
+  const selectId = props.id ?? `${instanceId}-control`;
+  const listId = `${instanceId}-listbox`;
+  const popoverOwnerId = `${instanceId}-popover`;
+
+  const [open, setOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const [inputValue, setInputValue] = useState("");
+  const [query, setQuery] = useState("");
+  const [selectedValues, setSelectedValues] = useState<string[]>(initialValues);
+  const [openSource, setOpenSource] = useState<"mouse" | "keyboard">("mouse");
+
+  const selectedValue = selectedValues[0] ?? "";
+  const selectedOptionLabel = useMemo(() => {
+    const selectedOption = flatOptions.find(
+      (option) => String(option.value) === selectedValue,
+    );
+    return selectedOption?.label ?? "";
+  }, [flatOptions, selectedValue]);
+  const selectedOptions = useMemo(
+    () =>
+      selectedValues
+        .map((value) => flatOptions.find((o) => String(o.value) === value))
+        .filter((option): option is Option => option !== undefined),
+    [flatOptions, selectedValues],
+  );
+
+  const rootRef = useRef<HTMLDivElement>(null);
+  const controlRef = useRef<HTMLDivElement>(null);
+  const suppressOpenUntilRef = useRef(0);
+  const suppressClickUntilRef = useRef(0);
+  const ensureVisibleRafRef = useRef<number | null>(null);
+  const pointerDownInsidePopoverRef = useRef(false);
+  const lastClosedByTabRef = useRef(false);
+  const popoverInputRef = useRef<HTMLInputElement>(null);
+  const isFirstRenderRef = useRef(true);
+
+  const ensureControlVisible = useCallback(() => {
+    const controlEl = controlRef.current;
+    if (!controlEl) return;
+    const scrollAncestor = findScrollableAncestor(controlEl);
+    controlEl.scrollIntoView({ block: "nearest", inline: "nearest" });
+    void scrollAncestor;
+  }, []);
+  const scheduleEnsureControlVisible = useCallback(() => {
+    if (ensureVisibleRafRef.current !== null) {
+      cancelAnimationFrame(ensureVisibleRafRef.current);
+    }
+    const outerRafId = requestAnimationFrame(() => {
+      ensureVisibleRafRef.current = requestAnimationFrame(() => {
+        ensureControlVisible();
+        ensureVisibleRafRef.current = null;
+      });
+    });
+    ensureVisibleRafRef.current = outerRafId;
+  }, [ensureControlVisible]);
+
+  useEffect(() => {
+    return () => {
+      if (ensureVisibleRafRef.current !== null) {
+        cancelAnimationFrame(ensureVisibleRafRef.current);
+      }
+    };
+  }, []);
+  useEffect(() => {
+    if (value === undefined) return;
+    const nextValues = getStringValues(value);
+    setSelectedValues(nextValues);
+  }, [value]);
+  useEffect(() => {
+    if (isMultiple) return;
+    if (open && query) return;
+
+    const nextSelectedValue = selectedValues[0] ?? "";
+    const nextSelectedOption = flatOptions.find(
+      (option) => String(option.value) === nextSelectedValue,
+    );
+    if (!nextSelectedOption && isInlineComboboxActive && query) {
+      setInputValue(query);
+      return;
+    }
+    setInputValue(nextSelectedOption?.label ?? "");
+  }, [
+    flatOptions,
+    isMultiple,
+    isInlineComboboxActive,
+    open,
+    query,
+    selectedValues,
+  ]);
+
+  const isInOwnPopover = useCallback(
+    (target: EventTarget | null) => {
+      const element = target as HTMLElement | null;
+      if (!element) return false;
+      return !!element.closest(`[data-popover-owner="${popoverOwnerId}"]`);
+    },
+    [popoverOwnerId],
+  );
+
+  const visibleOptions = useMemo(
+    () =>
+      !isTypeableControl && !isPopoverSearchActive
+        ? flatOptions
+        : filterOptionsByQuery(flatOptions, query),
+    [flatOptions, isTypeableControl, isPopoverSearchActive, query],
+  );
+  const visibleIndexMap = useMemo(() => {
+    const map = new Map<Option, number>();
+    visibleOptions.forEach((option, index) => {
+      map.set(option, index);
+    });
+    return map;
+  }, [visibleOptions]);
+  const visibleGroupedOptions = useMemo(() => {
+    return groupedOptions
+      .map((group) => ({
+        label: group.label,
+        options: group.options.filter((option) => visibleIndexMap.has(option)),
+      }))
+      .filter((group) => group.options.length > 0);
+  }, [groupedOptions, visibleIndexMap]);
+
+  useEffect(() => {
+    setActiveIndex((prev) => {
+      if (!visibleOptions.length) return -1;
+      if (prev < 0) return prev;
+      return Math.min(prev, visibleOptions.length - 1);
+    });
+  }, [visibleOptions.length]);
+
+  const isOptionSelectionDisabled = useCallback(
+    (option: Option) =>
+      !!option.disabled ||
+      (!isMultiple &&
+        (isTypeableControl || isPopoverSearchActive) &&
+        selectedValues.includes(String(option.value))),
+    [isMultiple, isTypeableControl, isPopoverSearchActive, selectedValues],
+  );
+
+  const getFirstSelectableIndex = useCallback(
+    (items: Option[], blockedValues: string[] = selectedValues) =>
+      items.findIndex(
+        (item) =>
+          !item.disabled &&
+          (!(isTypeableControl || isPopoverSearchActive) ||
+            !blockedValues.includes(String(item.value))),
+      ),
+    [isTypeableControl, isPopoverSearchActive, selectedValues],
+  );
+  const getFirstEnabledIndex = useCallback(
+    (items: Option[]) => getFirstSelectableIndex(items),
+    [getFirstSelectableIndex],
+  );
+  const getNextEnabledIndex = useCallback(
+    (items: Option[], start: number, direction: 1 | -1) => {
+      if (!items.length) return -1;
+      let idx = start;
+      for (let i = 0; i < items.length; i += 1) {
+        idx += direction;
+        if (idx < 0) idx = items.length - 1;
+        if (idx >= items.length) idx = 0;
+        if (items[idx] && !isOptionSelectionDisabled(items[idx])) return idx;
+      }
+      return -1;
+    },
+    [isOptionSelectionDisabled],
+  );
+  const getSelectedEnabledIndex = useCallback(
+    (items: Option[]) =>
+      items.findIndex(
+        (item) =>
+          selectedValues.includes(String(item.value)) &&
+          !isOptionSelectionDisabled(item),
+      ),
+    [isOptionSelectionDisabled, selectedValues],
+  );
+  const getInitialActiveIndex = useCallback(
+    (items: Option[]) => {
+      const selectedIdx = getSelectedEnabledIndex(items);
+      return selectedIdx >= 0 ? selectedIdx : getFirstEnabledIndex(items);
+    },
+    [getFirstEnabledIndex, getSelectedEnabledIndex],
+  );
+
+  const selectedLabel = useMemo(() => {
+    const picked = flatOptions.find((o) => String(o.value) === selectedValue);
+    return picked?.label ?? placeholder ?? t.UIKit.ui.select;
+  }, [flatOptions, placeholder, selectedValue, t]);
+
+  return {
+    t,
+    props,
+
+    isMultiple,
+    isInlineCombobox,
+    isPopoverSearch,
+    isInlineComboboxActive,
+    isPopoverSearchActive,
+    isTypeableControl,
+    isInteractionDisabled,
+    lockAncestorScrollOnOpen,
+    isMobileSheet,
+
+    instanceId,
+    selectId,
+    listId,
+    popoverOwnerId,
+
+    open,
+    setOpen,
+    activeIndex,
+    setActiveIndex,
+    inputValue,
+    setInputValue,
+    query,
+    setQuery,
+    selectedValues,
+    setSelectedValues,
+    openSource,
+    setOpenSource,
+
+    rootRef,
+    controlRef,
+    suppressOpenUntilRef,
+    suppressClickUntilRef,
+    popoverInputRef,
+    pointerDownInsidePopoverRef,
+    lastClosedByTabRef,
+    isFirstRenderRef,
+    ensureVisibleRafRef,
+
+    flatOptions,
+    groupedOptions,
+    visibleOptions,
+    visibleIndexMap,
+    visibleGroupedOptions,
+    selectedOptions,
+    selectedLabel,
+    selectedValue,
+    selectedOptionLabel,
+
+    isInOwnPopover,
+    ensureControlVisible,
+    scheduleEnsureControlVisible,
+
+    getFirstEnabledIndex,
+    getNextEnabledIndex,
+    getSelectedEnabledIndex,
+    getFirstSelectableIndex,
+    getInitialActiveIndex,
+    isOptionSelectionDisabled,
+  };
+}
+
+export type SelectState = ReturnType<typeof useSelectState>;

package/packages/Components/Select/select.control.tsx

@@ -0,0 +1,228 @@
+"use client";
+import type {
+  KeyboardEvent,
+  ReactElement,
+  MouseEvent as ReactMouseEvent,
+} from "react";
+import Pill from "@/packages/Components/Pill/Pill";
+import SelectTrigger from "@/packages/Components/Select/Select.trigger";
+import type { SelectNavigation } from "@/packages/Components/Select/hooks/useSelectNavigation";
+import type { SelectState } from "@/packages/Components/Select/hooks/useSelectState";
+import type { SelectValue } from "@/packages/Components/Select/Select.types";
+import { filterOptionsByQuery } from "@/packages/Components/Select/Select.utils";
+import Text from "@/packages/Components/Text/Text";
+import View from "@/packages/Frameworks/View/View";
+
+interface SelectControlProps {
+  state: SelectState;
+  emitNativeChange: (next: SelectValue<boolean>) => void;
+  removeSelectedOption: (value: string) => void;
+  navigation: SelectNavigation;
+}
+
+export default function SelectControl({
+  state,
+  emitNativeChange,
+  removeSelectedOption,
+  navigation,
+}: SelectControlProps): ReactElement {
+  const { props, t } = state;
+  const {
+    isMultiple,
+    isInlineComboboxActive,
+    isInteractionDisabled,
+    open,
+    activeIndex,
+    query,
+    inputValue,
+    selectedValues,
+    selectedOptions,
+    selectedLabel,
+    selectedOptionLabel,
+    flatOptions,
+    getFirstEnabledIndex,
+    getInitialActiveIndex,
+    scheduleEnsureControlVisible,
+    setOpen,
+    setOpenSource,
+    setActiveIndex,
+    setSelectedValues,
+    setQuery,
+    setInputValue,
+    listId,
+    selectId,
+    visibleOptions,
+  } = state;
+
+  const {
+    placeholder,
+    title,
+    disabled,
+    readOnly,
+    required,
+  } = props;
+
+  const {
+    handleControlKeyDown,
+    handleTriggerClick,
+    handleTriggerPointerUp,
+  } = navigation;
+
+  const selectedPills =
+    isMultiple && selectedOptions.length > 0 ? (
+      <View wrap="wrap" gap={6} data-select-pills>
+        {selectedOptions.map((option, index) => (
+          <Pill
+            key={String(option.value)}
+            text={option.label}
+            disabled={isInteractionDisabled}
+            paddingVertical={6}
+            paddingHorizontal={8}
+            themePreset="BaseFull"
+            background={props.background}
+            color={props.color}
+            rightIcon={
+              isInteractionDisabled
+                ? undefined
+                : {
+                    icon: "iClose",
+                    pressable: {
+                      tabIndex: -1,
+                      onMouseDown: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                      },
+                      onKeyDown: (e: KeyboardEvent<Element>) => {
+                        if (e.key === "ArrowLeft") {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          if (index > 0) {
+                            navigation.focusPillButton(index - 1);
+                          } else {
+                            navigation.focusInputField();
+                          }
+                          return;
+                        }
+                        if (e.key === "ArrowRight") {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          if (index < selectedOptions.length - 1) {
+                            navigation.focusPillButton(index + 1);
+                          } else {
+                            navigation.focusInputField();
+                          }
+                          return;
+                        }
+                        if (e.key !== "Backspace" && e.key !== "Delete") return;
+                        e.preventDefault();
+                        e.stopPropagation();
+                        navigation.focusInputField();
+                        removeSelectedOption(String(option.value));
+                      },
+                      onClick: (e: ReactMouseEvent<Element>) => {
+                        e.stopPropagation();
+                        removeSelectedOption(String(option.value));
+                      },
+                    },
+                  }
+            }
+          />
+        ))}
+      </View>
+    ) : null;
+
+  const placeholderText = placeholder ?? t.UIKit.ui.select;
+
+  const renderComboboxControl = () => (
+    <View
+      style={{
+        width: "calc(100% + 2.8rem)",
+        textAlign: "left",
+        cursor: "default",
+      }}
+      column
+      gap={4}
+    >
+      {selectedPills}
+      <input
+        id={selectId}
+        data-select-input="true"
+        title={title}
+        role="combobox"
+        aria-expanded={open}
+        aria-haspopup="listbox"
+        aria-controls={listId}
+        aria-activedescendant={
+          open && activeIndex >= 0 && activeIndex < visibleOptions.length
+            ? `${listId}-${activeIndex}`
+            : undefined
+        }
+        value={isMultiple ? query : inputValue}
+        placeholder={
+          isMultiple && selectedOptions.length > 0
+            ? undefined
+            : placeholderText
+        }
+        className="Subheadline"
+        onFocus={() => {
+          if (isInteractionDisabled) return;
+          if (document.activeElement?.matches(":focus-visible")) {
+            setOpenSource("keyboard");
+          }
+          setOpen(true);
+          scheduleEnsureControlVisible();
+          setActiveIndex((prev) => {
+            if (prev >= 0 && !visibleOptions[prev]?.disabled) return prev;
+            return getInitialActiveIndex(visibleOptions);
+          });
+        }}
+        onClick={() => {
+          if (isInteractionDisabled) return;
+          setOpen(true);
+          scheduleEnsureControlVisible();
+        }}
+        onChange={(e) => {
+          if (isInteractionDisabled) return;
+          const nextQuery = e.target.value;
+          setOpenSource("keyboard");
+          if (!isMultiple) {
+            if (selectedValues.length > 0 && nextQuery !== selectedOptionLabel) {
+              setSelectedValues([]);
+              emitNativeChange("" as SelectValue<boolean>);
+            }
+            setInputValue(nextQuery);
+          }
+          setQuery(nextQuery);
+          props.onInputChange?.(nextQuery);
+          setOpen(true);
+          const nextVisible = filterOptionsByQuery(flatOptions, nextQuery);
+          setActiveIndex(getFirstEnabledIndex(nextVisible));
+        }}
+        onKeyDown={(e) => handleControlKeyDown(e, false)}
+        required={required}
+        disabled={disabled}
+        readOnly={readOnly}
+      />
+    </View>
+  );
+
+  if (isInlineComboboxActive) return renderComboboxControl();
+
+  return (
+    <SelectTrigger
+      selectId={selectId}
+      title={title}
+      open={open}
+      listId={listId}
+      isMultiple={isMultiple}
+      isInteractionDisabled={isInteractionDisabled}
+      selectedPills={selectedPills}
+      selectedOptionsLength={selectedOptions.length}
+      selectedLabel={selectedLabel}
+      placeholderText={placeholderText}
+      handleTriggerClick={handleTriggerClick}
+      handleTriggerPointerUp={handleTriggerPointerUp}
+      handleControlKeyDown={handleControlKeyDown}
+    />
+  );
+}