@kenos-ui/react-combobox 0.1.0

package/dist/index.js

@@ -0,0 +1,753 @@
+import { createContext, useSyncExternalStore, useCallback, useContext, useId, useMemo, useRef, useEffect, useLayoutEffect, useState } from 'react';
+import { restoreFocus, useListNavigation, useSelectCollection, useFloating, usePresence, useClickOutside, useEscapeKey, useFocusTrap } from '@kenos-ui/utils';
+import { jsx } from 'react/jsx-runtime';
+
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// src/index.parts.ts
+var index_parts_exports = {};
+__export(index_parts_exports, {
+  Clear: () => Clear,
+  Content: () => Content,
+  Empty: () => Empty,
+  Input: () => Input,
+  Item: () => Item,
+  ItemText: () => ItemText,
+  Label: () => Label,
+  List: () => List,
+  Root: () => Root,
+  Trigger: () => Trigger
+});
+var ComboboxStore = class {
+  state;
+  listeners = /* @__PURE__ */ new Set();
+  constructor(initial = {}) {
+    this.state = {
+      open: false,
+      openSource: null,
+      value: null,
+      inputValue: "",
+      highlightedValue: null,
+      items: /* @__PURE__ */ new Map(),
+      ...initial
+    };
+  }
+  getState() {
+    return this.state;
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+  notify() {
+    for (const listener of this.listeners) {
+      listener();
+    }
+  }
+  // ── Mutations ────────────────────────────────────────────────────────────
+  setOpen(open, source = null) {
+    if (this.state.open === open) return;
+    this.state = {
+      ...this.state,
+      open,
+      openSource: open ? source : null,
+      highlightedValue: open ? this.state.highlightedValue : null
+    };
+    this.notify();
+  }
+  setValue(value) {
+    if (this.state.value === value) return;
+    this.state = { ...this.state, value };
+    this.notify();
+  }
+  setInputValue(inputValue) {
+    if (this.state.inputValue === inputValue) return;
+    this.state = { ...this.state, inputValue };
+    this.notify();
+  }
+  clearValue() {
+    if (this.state.value === null && this.state.inputValue === "") return;
+    this.state = { ...this.state, value: null, inputValue: "" };
+    this.notify();
+  }
+  isSelected(value, comparator) {
+    const current = this.state.value;
+    return typeof current === "string" && comparator(current, value);
+  }
+  setHighlightedValue(value) {
+    if (this.state.highlightedValue === value) return;
+    this.state = { ...this.state, highlightedValue: value };
+    this.notify();
+  }
+  registerItem(record) {
+    const next = new Map(this.state.items);
+    next.set(record.value, record);
+    this.state = { ...this.state, items: next };
+    this.notify();
+  }
+  unregisterItem(value) {
+    if (!this.state.items.has(value)) return;
+    const next = new Map(this.state.items);
+    next.delete(value);
+    this.state = { ...this.state, items: next };
+    this.notify();
+  }
+  updateItemRef(value, ref) {
+    const item = this.state.items.get(value);
+    if (!item || item.ref === ref) return;
+    const next = new Map(this.state.items);
+    next.set(value, { ...item, ref });
+    this.state = { ...this.state, items: next };
+  }
+};
+function useComboboxStore(store, selector) {
+  return useSyncExternalStore(
+    useCallback((cb) => store.subscribe(cb), [store]),
+    () => selector(store.getState()),
+    () => selector(store.getState())
+  );
+}
+var ComboboxContext = createContext(null);
+function useComboboxContext() {
+  const ctx = useContext(ComboboxContext);
+  if (!ctx) {
+    throw new Error("Combobox compound components must be rendered inside <Combobox.Root>.");
+  }
+  return ctx;
+}
+var defaultIsItemEqualToValue = (a, b) => a === b;
+function resolveLabel(value, items, staticItems) {
+  if (value == null) return "";
+  return items.get(value)?.label ?? staticItems[value] ?? value;
+}
+function Root(props) {
+  const {
+    children,
+    value,
+    defaultValue,
+    onValueChange,
+    inputValue,
+    defaultInputValue,
+    onInputValueChange,
+    open,
+    defaultOpen,
+    onOpenChange,
+    onOpenChangeComplete,
+    disabled = false,
+    required = false,
+    readOnly = false,
+    modal = false,
+    id,
+    items = {},
+    isItemEqualToValue = defaultIsItemEqualToValue,
+    filter
+  } = props;
+  const uid = useId();
+  const prefix = id ?? `cbx-${uid.replace(/:/g, "")}`;
+  const ids = useMemo(
+    () => ({
+      root: prefix,
+      label: `${prefix}-label`,
+      input: `${prefix}-input`,
+      trigger: `${prefix}-trigger`,
+      content: `${prefix}-content`
+    }),
+    [prefix]
+  );
+  const inputRef = useRef(null);
+  const triggerRef = useRef(null);
+  const contentRef = useRef(null);
+  const listRef = useRef(null);
+  const isControlledValue = value !== void 0;
+  const isControlledOpen = open !== void 0;
+  const isControlledInputValue = inputValue !== void 0;
+  const initialValue = isControlledValue ? value ?? null : defaultValue ?? null;
+  const initialInputValue = isControlledInputValue ? inputValue ?? "" : defaultInputValue ?? resolveLabel(initialValue, /* @__PURE__ */ new Map(), items);
+  const storeRef = useRef(null);
+  if (!storeRef.current) {
+    storeRef.current = new ComboboxStore({
+      value: initialValue,
+      inputValue: initialInputValue,
+      open: isControlledOpen ? open ?? false : defaultOpen ?? false
+    });
+  }
+  const store = storeRef.current;
+  const prevControlledValue = useRef(value);
+  useEffect(() => {
+    if (!isControlledValue) return;
+    if (value === prevControlledValue.current) return;
+    prevControlledValue.current = value;
+    store.setValue(typeof value === "string" ? value : null);
+  }, [isControlledValue, value, store]);
+  const prevControlledInputValue = useRef(inputValue);
+  useEffect(() => {
+    if (!isControlledInputValue) return;
+    if (inputValue === prevControlledInputValue.current) return;
+    prevControlledInputValue.current = inputValue;
+    store.setInputValue(inputValue ?? "");
+  }, [isControlledInputValue, inputValue, store]);
+  const prevControlledOpen = useRef(open);
+  useEffect(() => {
+    if (!isControlledOpen) return;
+    if (open === prevControlledOpen.current) return;
+    prevControlledOpen.current = open;
+    store.setOpen(open ?? false);
+  }, [isControlledOpen, open, store]);
+  const onValueChangeRef = useRef(onValueChange);
+  onValueChangeRef.current = onValueChange;
+  const prevStoreValue = useRef(store.getState().value);
+  useEffect(() => {
+    return store.subscribe(() => {
+      const state = store.getState();
+      if (state.value !== prevStoreValue.current) {
+        prevStoreValue.current = state.value;
+        onValueChangeRef.current?.(
+          typeof state.value === "string" ? state.value : null
+        );
+      }
+    });
+  }, [store]);
+  const onInputValueChangeRef = useRef(onInputValueChange);
+  onInputValueChangeRef.current = onInputValueChange;
+  const prevStoreInputValue = useRef(store.getState().inputValue);
+  useEffect(() => {
+    return store.subscribe(() => {
+      const state = store.getState();
+      if (state.inputValue !== prevStoreInputValue.current) {
+        prevStoreInputValue.current = state.inputValue;
+        onInputValueChangeRef.current?.(state.inputValue);
+      }
+    });
+  }, [store]);
+  const onOpenChangeRef = useRef(onOpenChange);
+  onOpenChangeRef.current = onOpenChange;
+  const prevStoreOpen = useRef(store.getState().open);
+  useEffect(() => {
+    return store.subscribe(() => {
+      const state = store.getState();
+      if (state.open !== prevStoreOpen.current) {
+        prevStoreOpen.current = state.open;
+        onOpenChangeRef.current?.(state.open);
+      }
+    });
+  }, [store]);
+  const close = useCallback(() => {
+    const state = store.getState();
+    if (!state.open) return;
+    store.setOpen(false);
+    restoreFocus({
+      openSource: state.openSource === "trigger" ? "trigger" : "input",
+      trigger: inputRef.current ?? triggerRef.current
+    });
+  }, [store]);
+  const selectValue = useCallback(
+    (itemValue) => {
+      const item = store.getState().items.get(itemValue);
+      const label = item?.label ?? items[itemValue] ?? itemValue;
+      store.setValue(itemValue);
+      store.setInputValue(label);
+      close();
+    },
+    [store, close, items]
+  );
+  const clearValue = useCallback(() => {
+    store.clearValue();
+  }, [store]);
+  const config = useMemo(
+    () => ({
+      disabled,
+      required,
+      readOnly,
+      modal,
+      items,
+      isItemEqualToValue,
+      filter: filter ?? ((item, query) => {
+        const normalized = query.trim().toLowerCase();
+        if (!normalized) return true;
+        return item.textValue.toLowerCase().includes(normalized) || item.label.toLowerCase().includes(normalized);
+      })
+    }),
+    [disabled, required, readOnly, modal, items, isItemEqualToValue, filter]
+  );
+  const ctx = useMemo(
+    () => ({
+      store,
+      ids,
+      refs: { inputRef, triggerRef, contentRef, listRef },
+      config,
+      isControlledValue,
+      isControlledOpen,
+      isControlledInputValue,
+      onOpenChangeComplete,
+      close,
+      selectValue,
+      clearValue
+    }),
+    [
+      store,
+      ids,
+      config,
+      isControlledValue,
+      isControlledOpen,
+      isControlledInputValue,
+      onOpenChangeComplete,
+      close,
+      selectValue,
+      clearValue
+    ]
+  );
+  return /* @__PURE__ */ jsx(ComboboxContext.Provider, { value: ctx, children });
+}
+function Label({ children, ...props }) {
+  const { ids } = useComboboxContext();
+  return /* @__PURE__ */ jsx("label", { id: ids.label, htmlFor: ids.input, ...props, children });
+}
+function Input({
+  onChange,
+  onFocus,
+  onKeyDown,
+  disabled,
+  readOnly,
+  ...props
+}) {
+  const { store, ids, refs, config, close, selectValue } = useComboboxContext();
+  const open = useComboboxStore(store, (s) => s.open);
+  const inputValue = useComboboxStore(store, (s) => s.inputValue);
+  const highlightedValue = useComboboxStore(store, (s) => s.highlightedValue);
+  const items = useComboboxStore(store, (s) => s.items);
+  const isDisabled = disabled ?? config.disabled;
+  const isReadOnly = readOnly ?? config.readOnly;
+  const filteredItems = Array.from(items.values()).filter((item) => config.filter(item, inputValue)).map((item) => ({
+    value: item.value,
+    disabled: item.disabled
+  }));
+  const { onKeyDown: onNavKeyDown } = useListNavigation({
+    enabled: open && !isDisabled && !isReadOnly,
+    items: filteredItems,
+    highlightedValue,
+    onHighlight: (v) => store.setHighlightedValue(v),
+    loop: true
+  });
+  const activeDescendantId = open && highlightedValue != null ? `${ids.content}-opt-${highlightedValue}` : void 0;
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+        if (!open) {
+          store.setOpen(true, "input");
+        }
+        onNavKeyDown(e);
+        onKeyDown?.(e);
+        return;
+      }
+      if (e.key === "Enter" && open && highlightedValue != null) {
+        const item = items.get(highlightedValue);
+        if (item && !item.disabled) {
+          e.preventDefault();
+          selectValue(highlightedValue);
+        }
+        onKeyDown?.(e);
+        return;
+      }
+      if (e.key === "Escape" && open) {
+        e.preventDefault();
+        e.stopPropagation();
+        close();
+        onKeyDown?.(e);
+        return;
+      }
+      onKeyDown?.(e);
+    },
+    [
+      open,
+      highlightedValue,
+      items,
+      store,
+      onNavKeyDown,
+      selectValue,
+      close,
+      onKeyDown
+    ]
+  );
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref: refs.inputRef,
+      type: "text",
+      id: ids.input,
+      role: "combobox",
+      "aria-haspopup": "listbox",
+      "aria-expanded": open,
+      "aria-controls": open ? ids.content : void 0,
+      "aria-autocomplete": "list",
+      "aria-labelledby": ids.label ? `${ids.label} ${ids.input}` : void 0,
+      "aria-activedescendant": activeDescendantId,
+      "aria-disabled": isDisabled || isReadOnly || void 0,
+      autoComplete: "off",
+      "data-disabled": isDisabled || isReadOnly ? "true" : void 0,
+      "data-open": open ? "true" : void 0,
+      "data-state": open ? "open" : "closed",
+      disabled: isDisabled,
+      readOnly: isReadOnly,
+      value: inputValue,
+      onChange: (e) => {
+        if (isDisabled || isReadOnly) return;
+        store.setInputValue(e.target.value);
+        store.setOpen(true, "input");
+        onChange?.(e);
+      },
+      onFocus: (e) => {
+        if (!isDisabled && !isReadOnly) {
+          store.setOpen(true, "input");
+        }
+        onFocus?.(e);
+      },
+      onKeyDown: handleKeyDown,
+      ...props
+    }
+  );
+}
+function Trigger({ children, onClick, disabled, ...props }) {
+  const { store, ids, refs, config } = useComboboxContext();
+  const open = useComboboxStore(store, (s) => s.open);
+  const isDisabled = disabled ?? config.disabled;
+  const isReadOnly = config.readOnly;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref: refs.triggerRef,
+      type: "button",
+      id: ids.trigger,
+      "aria-haspopup": "listbox",
+      "aria-expanded": open,
+      "aria-controls": open ? ids.content : void 0,
+      "aria-label": "Toggle suggestions",
+      "aria-disabled": isDisabled || isReadOnly || void 0,
+      "data-disabled": isDisabled || isReadOnly ? "true" : void 0,
+      "data-open": open ? "true" : void 0,
+      "data-state": open ? "open" : "closed",
+      disabled: isDisabled || isReadOnly,
+      tabIndex: -1,
+      onClick: (e) => {
+        if (isDisabled || isReadOnly) return;
+        store.setOpen(!open, "trigger");
+        refs.inputRef.current?.focus();
+        onClick?.(e);
+      },
+      ...props,
+      children
+    }
+  );
+}
+var ComboboxCollectionContext = createContext(
+  null
+);
+function useComboboxCollection() {
+  const ctx = useContext(ComboboxCollectionContext);
+  if (!ctx) {
+    throw new Error(
+      "Combobox collection context is missing. Render inside <Combobox.Content>."
+    );
+  }
+  return ctx;
+}
+function Content({
+  children,
+  forceMount,
+  side = "bottom",
+  align = "start",
+  sideOffset = 4,
+  alignOffset = 0,
+  avoidCollisions = true,
+  collisionPadding = 8,
+  sameWidth = false,
+  lazyMount = true,
+  unmountOnExit = false,
+  onOpenChangeComplete: onOpenChangeCompleteProp,
+  style,
+  onKeyDown,
+  ...props
+}) {
+  const {
+    store,
+    ids,
+    refs,
+    config,
+    close,
+    selectValue,
+    onOpenChangeComplete: onOpenChangeCompleteRoot
+  } = useComboboxContext();
+  const open = useComboboxStore(store, (s) => s.open);
+  const highlightedValue = useComboboxStore(store, (s) => s.highlightedValue);
+  const allItems = useComboboxStore(store, (s) => s.items);
+  const inputValue = useComboboxStore(store, (s) => s.inputValue);
+  const onOpenChangeComplete = onOpenChangeCompleteProp ?? onOpenChangeCompleteRoot;
+  const collection = useSelectCollection({
+    items: allItems,
+    inputValue,
+    filter: config.filter
+  });
+  const collectionValue = useMemo(
+    () => ({
+      filteredItems: collection.items,
+      enabledItems: collection.enabledItems,
+      isEmpty: collection.isEmpty
+    }),
+    [collection.items, collection.enabledItems, collection.isEmpty]
+  );
+  const navItems = collection.enabledItems.map((item) => ({
+    value: item.value,
+    disabled: item.disabled
+  }));
+  const { setReference, setFloating, floatingStyles, isPositioned } = useFloating({
+    open,
+    side,
+    align,
+    sideOffset,
+    alignOffset,
+    avoidCollisions,
+    collisionPadding,
+    sameWidth
+  });
+  useLayoutEffect(() => {
+    if (!open) return;
+    setReference(refs.inputRef.current);
+  }, [open, refs.inputRef, setReference]);
+  const mergedRef = useCallback(
+    (node) => {
+      refs.contentRef.current = node;
+      setFloating(node);
+    },
+    [refs.contentRef, setFloating]
+  );
+  const { present } = usePresence({
+    open,
+    lazyMount,
+    unmountOnExit,
+    onOpenChangeComplete
+  });
+  useClickOutside([refs.contentRef, refs.inputRef, refs.triggerRef], close, open);
+  useEscapeKey({
+    enabled: open,
+    stopPropagation: true,
+    onEscape: close
+  });
+  useFocusTrap(refs.contentRef, open && config.modal);
+  const { onKeyDown: onNavKeyDown } = useListNavigation({
+    enabled: open && !config.disabled && !config.readOnly,
+    items: navItems,
+    highlightedValue,
+    onHighlight: (v) => store.setHighlightedValue(v),
+    loop: true
+  });
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        if (highlightedValue != null) {
+          e.preventDefault();
+          const item = allItems.get(highlightedValue);
+          if (item && !item.disabled) {
+            selectValue(highlightedValue);
+          }
+        }
+        return;
+      }
+      onNavKeyDown(e);
+      onKeyDown?.(e);
+    },
+    [highlightedValue, allItems, selectValue, onNavKeyDown, onKeyDown]
+  );
+  const [transitionsReady, setTransitionsReady] = useState(false);
+  useEffect(() => {
+    if (!open || !isPositioned) {
+      setTransitionsReady(false);
+      return;
+    }
+    const raf = requestAnimationFrame(() => setTransitionsReady(true));
+    return () => cancelAnimationFrame(raf);
+  }, [open, isPositioned]);
+  useEffect(() => {
+    if (!open) return;
+    const state = store.getState();
+    if (state.highlightedValue == null) {
+      const first = navItems.find((i) => !i.disabled);
+      if (first) store.setHighlightedValue(first.value);
+    }
+  }, [open, inputValue, navItems.length]);
+  useEffect(() => {
+    if (!open || !highlightedValue) return;
+    const item = allItems.get(highlightedValue);
+    if (typeof item?.ref?.scrollIntoView === "function") {
+      item.ref.scrollIntoView({ block: "nearest" });
+    }
+  }, [highlightedValue, allItems, open]);
+  if (!present && !forceMount) return null;
+  return /* @__PURE__ */ jsx(ComboboxCollectionContext.Provider, { value: collectionValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: mergedRef,
+      id: ids.content,
+      "data-state": open ? "open" : "closed",
+      "data-open": open ? "true" : void 0,
+      "data-empty": collection.isEmpty ? "true" : void 0,
+      "aria-modal": config.modal ? "true" : void 0,
+      tabIndex: -1,
+      style: {
+        ...floatingStyles,
+        ...!open ? { display: "none" } : void 0,
+        ...open && !isPositioned ? { opacity: 0, pointerEvents: "none" } : void 0,
+        ...open && !transitionsReady ? { transition: "none" } : void 0,
+        ...style
+      },
+      onKeyDown: handleKeyDown,
+      ...props,
+      children
+    }
+  ) });
+}
+function List({ children, ...props }) {
+  const { ids, refs } = useComboboxContext();
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      ref: refs.listRef,
+      role: "listbox",
+      id: `${ids.content}-list`,
+      "aria-labelledby": ids.label,
+      ...props,
+      children
+    }
+  );
+}
+Item.displayName = "Combobox.Item";
+function Item({
+  value,
+  disabled = false,
+  textValue,
+  children,
+  onClick,
+  onPointerMove,
+  style,
+  ...props
+}) {
+  const { store, ids, config, selectValue } = useComboboxContext();
+  const selectedValue = useComboboxStore(store, (s) => s.value);
+  const highlightedValue = useComboboxStore(store, (s) => s.highlightedValue);
+  const { filteredItems } = useComboboxCollection();
+  const liRef = useRef(null);
+  const isVisible = filteredItems.some((item) => item.value === value);
+  const isSelected = typeof selectedValue === "string" && config.isItemEqualToValue(selectedValue, value);
+  const isHighlighted = highlightedValue === value;
+  const isDisabled = disabled || config.disabled || config.readOnly;
+  useLayoutEffect(() => {
+    const el = liRef.current;
+    const label = textValue ?? (el?.textContent ?? value);
+    store.registerItem({
+      value,
+      label,
+      textValue: textValue ?? label,
+      disabled: isDisabled,
+      ref: el
+    });
+    return () => store.unregisterItem(value);
+  }, [value, isDisabled, store, textValue, children]);
+  useLayoutEffect(() => {
+    store.updateItemRef(value, liRef.current);
+  });
+  const handleClick = useCallback(
+    (e) => {
+      if (isDisabled) return;
+      selectValue(value);
+      onClick?.(e);
+    },
+    [isDisabled, selectValue, value, onClick]
+  );
+  const handlePointerMove = useCallback(
+    (e) => {
+      if (!isDisabled) store.setHighlightedValue(value);
+      onPointerMove?.(e);
+    },
+    [isDisabled, store, value, onPointerMove]
+  );
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      ref: liRef,
+      id: `${ids.content}-opt-${value}`,
+      role: "option",
+      "aria-selected": isSelected,
+      "aria-disabled": isDisabled || void 0,
+      "aria-hidden": !isVisible ? true : void 0,
+      "data-highlighted": isHighlighted ? "true" : void 0,
+      "data-selected": isSelected ? "true" : void 0,
+      "data-disabled": isDisabled ? "true" : void 0,
+      "data-hidden": !isVisible ? "true" : void 0,
+      tabIndex: -1,
+      style: {
+        ...style,
+        display: isVisible ? style?.display : "none"
+      },
+      onClick: handleClick,
+      onPointerMove: handlePointerMove,
+      ...props,
+      children
+    }
+  );
+}
+function ItemText({ children, ...props }) {
+  return /* @__PURE__ */ jsx("span", { ...props, children });
+}
+function Empty({ children = "No results found", ...props }) {
+  const { store } = useComboboxContext();
+  const open = useComboboxStore(store, (s) => s.open);
+  const { isEmpty } = useComboboxCollection();
+  if (!open || !isEmpty) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", "data-empty": "true", ...props, children });
+}
+function Clear({ onClick, ...props }) {
+  const { store, config, clearValue, refs } = useComboboxContext();
+  const value = useComboboxStore(store, (s) => s.value);
+  const inputValue = useComboboxStore(store, (s) => s.inputValue);
+  const hasValue = value != null || inputValue.length > 0;
+  const handleActivate = useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      clearValue();
+      refs.inputRef.current?.focus();
+      onClick?.(e);
+    },
+    [clearValue, onClick, refs.inputRef]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        handleActivate(e);
+      }
+    },
+    [handleActivate]
+  );
+  if (!hasValue || config.disabled || config.readOnly) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      role: "button",
+      tabIndex: 0,
+      "aria-label": "Clear",
+      onClick: handleActivate,
+      onKeyDown: handleKeyDown,
+      ...props
+    }
+  );
+}
+
+export { index_parts_exports as Combobox, ComboboxStore, useComboboxContext, useComboboxStore };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map