@sableui/react 0.6.2 → 0.7.1

package/dist/components/combobox/combobox.js

@@ -0,0 +1,486 @@
+// src/components/combobox/combobox.tsx
+import {
+  Combobox as Base
+} from "@base-ui/react/combobox";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { Icon } from "../../icon/index.js";
+import { anchoredListScroll } from "../../lib/anchored-scroll.js";
+import { cn } from "../../lib/cn.js";
+import { FIELD_SHELL_XS, MOBILE_FIELD_TIER } from "../../lib/field-shell.js";
+import { withPortalThemeScope } from "../../lib/portal-theme-scope.js";
+import { useAnchoredDensity, useDensity, useTypeTier } from "../../lib/density.js";
+import { useResizeObserver } from "../../lib/use-resize-observer.js";
+import { HighlightGlide } from "../../lib/highlight-glide.js";
+import { hitTargetMin } from "../../lib/hit-target.js";
+import { Badge } from "../badge/index.js";
+import { Button } from "../button/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var useComboboxFilteredItems = Base.useFilteredItems;
+var ComboboxVirtualContext = createContext(null);
+function Combobox({
+  onItemHighlighted,
+  ...props
+}) {
+  const revealRef = useRef(null);
+  const highlightRef = useRef(onItemHighlighted);
+  highlightRef.current = onItemHighlighted;
+  const handleHighlight = useCallback(
+    (value, details) => {
+      highlightRef.current?.(
+        value,
+        details
+      );
+      const reveal = revealRef.current;
+      if (reveal && details.index >= 0) {
+        queueMicrotask(() => reveal(details.index));
+      }
+    },
+    []
+  );
+  const bridge = useMemo(
+    () => ({
+      register(reveal) {
+        revealRef.current = reveal;
+      },
+      value: props.value,
+      isItemEqualToValue: props.isItemEqualToValue
+    }),
+    [props.value, props.isItemEqualToValue]
+  );
+  return /* @__PURE__ */ jsx(ComboboxVirtualContext.Provider, { value: bridge, children: /* @__PURE__ */ jsx(
+    Base.Root,
+    {
+      ...props,
+      onItemHighlighted: handleHighlight
+    }
+  ) });
+}
+var ComboboxValue = Base.Value;
+var ComboboxClear = Base.Clear;
+var ComboboxPortal = withPortalThemeScope(Base.Portal);
+var ComboboxList = Base.List;
+var ComboboxItemIndicator = Base.ItemIndicator;
+var ComboboxGroup = Base.Group;
+var FIELD_SHELL = {
+  xs: cn(FIELD_SHELL_XS, "pe-7 text-ui-md"),
+  md: "rounded-sm border border-input bg-card pe-9"
+};
+function useFieldType(xs) {
+  const tier = useTypeTier();
+  const density = useDensity();
+  if (xs) return void 0;
+  return cn(tier.body, density === "comfortable" && MOBILE_FIELD_TIER);
+}
+function FieldToggle({ xs }) {
+  return /* @__PURE__ */ jsx(
+    Base.Trigger,
+    {
+      className: cn(
+        "group absolute inline-flex items-center justify-center text-muted-foreground outline-none motion-interactive hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+        // Inset by the same step on every side and rounded by the field's
+        // radius less that step, so the toggle's corners run parallel to the
+        // field's at every rung, density and corner setting.
+        xs ? "end-0.5 size-[calc(var(--control-xs)-var(--spacing))] rounded-concentric-xs/0.5" : "end-1.5 size-[calc(var(--control-md)-var(--spacing)*3)] rounded-concentric-sm/1.5"
+      ),
+      "aria-label": "Toggle suggestions",
+      children: /* @__PURE__ */ jsx(Base.Icon, { className: "flex items-center justify-center motion-interactive group-data-[popup-open]:rotate-180", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-down", className: "text-sm" }) })
+    }
+  );
+}
+function ComboboxInput({ className, size = "md", ...props }) {
+  const xs = size === "xs";
+  const type = useFieldType(xs);
+  return /* @__PURE__ */ jsxs(Base.InputGroup, { className: "relative inline-flex w-full items-center", children: [
+    /* @__PURE__ */ jsx(
+      Base.Input,
+      {
+        className: cn(
+          "flex w-full text-foreground motion-interactive",
+          xs ? cn("h-(--control-xs) ps-1.5", FIELD_SHELL.xs) : cn("h-(--control-md) ps-3", FIELD_SHELL.md),
+          type,
+          "placeholder:text-muted-foreground",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          "aria-[invalid=true]:border-destructive aria-[invalid=true]:ring-destructive/30",
+          className
+        ),
+        ...props
+      }
+    ),
+    /* @__PURE__ */ jsx(FieldToggle, { xs })
+  ] });
+}
+function defaultChipLabel(item) {
+  if (typeof item === "object" && item !== null) {
+    const label = item.label;
+    if (typeof label === "string") return label;
+  }
+  return String(item);
+}
+function ComboboxChips({
+  className,
+  size = "md",
+  chipLabel = defaultChipLabel,
+  ...props
+}) {
+  const xs = size === "xs";
+  const type = useFieldType(xs);
+  return /* @__PURE__ */ jsxs(
+    Base.InputGroup,
+    {
+      className: cn(
+        "relative flex w-full flex-wrap items-center text-foreground motion-interactive",
+        xs ? cn("min-h-(--control-xs) gap-0.5 py-0.5 ps-0.5", FIELD_SHELL.xs) : cn("min-h-(--control-md) gap-1 py-1 ps-1.5", FIELD_SHELL.md),
+        type,
+        "has-[input:focus-visible]:ring-2 has-[input:focus-visible]:ring-ring",
+        "has-[input[aria-invalid=true]]:border-destructive has-[input[aria-invalid=true]]:ring-destructive/30",
+        "has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(Base.Chips, { className: "contents", children: [
+          /* @__PURE__ */ jsx(Base.Value, { children: (selected) => (Array.isArray(selected) ? selected : []).map(
+            (item, index) => {
+              const label = chipLabel(item);
+              return /* @__PURE__ */ jsxs(
+                Base.Chip,
+                {
+                  render: /* @__PURE__ */ jsx(Badge, { appearance: "soft", size: "sm" }),
+                  className: "gap-0.5 pe-0.5 outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  children: [
+                    label,
+                    /* @__PURE__ */ jsx(
+                      Base.ChipRemove,
+                      {
+                        render: /* @__PURE__ */ jsx(
+                          Button,
+                          {
+                            variant: "ghost",
+                            size: "icon-xs",
+                            className: cn("-my-1 size-5 [--button-icon:0.875rem]", hitTargetMin)
+                          }
+                        ),
+                        "aria-label": `Remove ${label}`,
+                        children: /* @__PURE__ */ jsx(Icon, { name: "xmark" })
+                      }
+                    )
+                  ]
+                },
+                `${label}-${index}`
+              );
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            Base.Input,
+            {
+              className: cn(
+                "min-w-24 flex-1 bg-transparent text-foreground outline-none",
+                xs ? "h-5 px-1 text-ui-md" : "h-7 px-1.5 text-body-md",
+                "placeholder:text-muted-foreground",
+                "disabled:cursor-not-allowed"
+              ),
+              ...props
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(FieldToggle, { xs })
+      ]
+    }
+  );
+}
+function ComboboxContent({
+  className,
+  children,
+  side = "bottom",
+  align = "start",
+  sideOffset = 6,
+  scroll = true,
+  ...props
+}) {
+  const anchoredDensity = useAnchoredDensity();
+  return /* @__PURE__ */ jsx(ComboboxPortal, { children: /* @__PURE__ */ jsx(Base.Positioner, { side, align, sideOffset, className: "z-(--z-overlay)", children: /* @__PURE__ */ jsxs(
+    Base.Popup,
+    {
+      ...anchoredDensity,
+      className: cn(
+        "w-[var(--anchor-width)] origin-(--transform-origin) rounded-md border border-border-floating bg-popover text-popover-foreground shadow-md outline-none",
+        // 18rem at rest, but never taller than the room the positioner
+        // measured. See lib/anchored-scroll. When the popup gives up its
+        // scrolling it gives up its padding with it — the child that
+        // scrolls has to be the one that owns the inset, or the padding
+        // sits outside the scroll box and the last row is cut off by it.
+        scroll ? cn("popup-inset", anchoredListScroll) : "overflow-hidden",
+        "motion-pop",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(HighlightGlide, {}),
+        children
+      ]
+    }
+  ) }) });
+}
+function ComboboxItem({ className, children, ...props }) {
+  const tier = useTypeTier();
+  return /* @__PURE__ */ jsxs(
+    Base.Item,
+    {
+      className: cn(
+        `flex cursor-default select-none items-center justify-between gap-(--item-gap) rounded-popup-item px-(--item-px) py-1.5 ${tier.body} outline-none motion-interactive data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:shrink-0`,
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "truncate", children }),
+        /* @__PURE__ */ jsx(Base.ItemIndicator, { className: "flex items-center text-(--primary)", children: /* @__PURE__ */ jsx(Icon, { name: "check", className: "text-sm" }) })
+      ]
+    }
+  );
+}
+function ComboboxEmpty({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Base.Empty,
+    {
+      className: cn(
+        "px-2 py-6 text-center text-body-sm text-muted-foreground empty:m-0 empty:p-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ComboboxGroupLabel({ className, ...props }) {
+  const tier = useTypeTier();
+  return /* @__PURE__ */ jsx(
+    Base.GroupLabel,
+    {
+      className: cn(
+        `select-none px-(--item-px) py-1.5 ${tier.label} text-muted-foreground`,
+        className
+      ),
+      ...props
+    }
+  );
+}
+var DEFAULT_OVERSCAN = 6;
+var ASSUMED_VIEWPORT = 288;
+function isGroup(item) {
+  return typeof item === "object" && item !== null && Array.isArray(item.items);
+}
+function planRows(items, itemHeight, labelHeight) {
+  const rows = [];
+  const spans = [];
+  const itemTops = [];
+  const grouped = items.length > 0 && isGroup(items[0]);
+  const groups = grouped ? items : [{ value: null, items }];
+  let y = 0;
+  let index = 0;
+  groups.forEach((group, g) => {
+    const top = y;
+    if (grouped) {
+      rows.push({ kind: "label", group: g, top: y });
+      y += labelHeight;
+    }
+    for (const item of group.items) {
+      rows.push({ kind: "item", group: g, top: y, item, index });
+      itemTops.push(y);
+      index += 1;
+      y += itemHeight;
+    }
+    spans.push({ group, top, height: y - top });
+  });
+  return { rows, spans, itemTops, height: y, count: index, grouped };
+}
+function rowAt(rows, offset) {
+  let lo = 0;
+  let hi = rows.length - 1;
+  let found = rows.length;
+  while (lo <= hi) {
+    const mid = lo + hi >> 1;
+    if (rows[mid].top >= offset) {
+      found = mid;
+      hi = mid - 1;
+    } else {
+      lo = mid + 1;
+    }
+  }
+  return found;
+}
+function ComboboxVirtualList({
+  itemHeight,
+  groupLabelHeight = 26,
+  overscan = DEFAULT_OVERSCAN,
+  children,
+  renderGroupLabel,
+  className,
+  itemClassName
+}) {
+  const filtered = Base.useFilteredItems();
+  const bridge = useContext(ComboboxVirtualContext);
+  const plan = useMemo(
+    () => planRows(filtered, itemHeight, groupLabelHeight),
+    [filtered, itemHeight, groupLabelHeight]
+  );
+  const boxRef = useRef(null);
+  const planRef = useRef(plan);
+  const [scrollTop, setScrollTop] = useState(0);
+  const [viewHeight, setViewHeight] = useState(ASSUMED_VIEWPORT);
+  const frame = useRef(0);
+  useEffect(() => {
+    planRef.current = plan;
+  });
+  const onScroll = useCallback(() => {
+    if (frame.current) return;
+    frame.current = requestAnimationFrame(() => {
+      frame.current = 0;
+      const box = boxRef.current;
+      if (!box) return;
+      setScrollTop(box.scrollTop);
+      if (box.clientHeight > 0) setViewHeight(box.clientHeight);
+    });
+  }, []);
+  useEffect(() => () => cancelAnimationFrame(frame.current), []);
+  const reveal = useCallback(
+    (index) => {
+      const box = boxRef.current;
+      const top = planRef.current.itemTops[index];
+      if (!box || top === void 0) return;
+      const bottom = top + itemHeight;
+      if (top < box.scrollTop) box.scrollTop = top;
+      else if (bottom > box.scrollTop + box.clientHeight) {
+        box.scrollTop = bottom - box.clientHeight;
+      }
+      setScrollTop(box.scrollTop);
+    },
+    [itemHeight]
+  );
+  useEffect(() => {
+    bridge?.register(reveal);
+    return () => bridge?.register(null);
+  }, [bridge, reveal]);
+  const pendingReveal = useRef(null);
+  const measure = useCallback(() => {
+    const box = boxRef.current;
+    if (!box) return;
+    const height = box.clientHeight;
+    if (height > 0) setViewHeight((current) => current === height ? current : height);
+    const pending = pendingReveal.current;
+    if (pending !== null && height > 0) {
+      pendingReveal.current = null;
+      reveal(pending);
+    }
+  }, [reveal]);
+  useResizeObserver(measure, [boxRef]);
+  const attach = useCallback(
+    (box) => {
+      boxRef.current = box;
+      if (!box) return;
+      const value = bridge?.value;
+      if (value == null) return;
+      const equal = bridge?.isItemEqualToValue;
+      const selected = planRef.current.rows.find(
+        (row2) => row2.kind === "item" && (equal ? equal(row2.item, value) : Object.is(row2.item, value))
+      );
+      if (selected?.kind === "item") pendingReveal.current = selected.index;
+    },
+    [bridge]
+  );
+  const previousPlan = useRef(plan);
+  useEffect(() => {
+    if (previousPlan.current === plan) return;
+    previousPlan.current = plan;
+    const box = boxRef.current;
+    if (box) {
+      box.scrollTop = 0;
+      setScrollTop(0);
+    }
+  }, [plan]);
+  const offset = Math.min(scrollTop, Math.max(0, plan.height - viewHeight));
+  const first = Math.max(0, rowAt(plan.rows, offset) - overscan);
+  const last = Math.min(
+    plan.rows.length,
+    rowAt(plan.rows, offset + viewHeight) + overscan
+  );
+  const visible = plan.rows.slice(first, last);
+  const row = (planned, top) => /* @__PURE__ */ jsx(
+    ComboboxItem,
+    {
+      value: planned.item,
+      index: planned.index,
+      "aria-setsize": plan.count,
+      "aria-posinset": planned.index + 1,
+      className: cn("absolute inset-x-0", itemClassName),
+      style: { top, height: itemHeight },
+      children: children(planned.item, { index: planned.index })
+    },
+    planned.index
+  );
+  return /* @__PURE__ */ jsx(
+    Base.List,
+    {
+      ref: attach,
+      onScroll,
+      className: cn(
+        "max-h-[min(18rem,var(--available-height))] overflow-y-auto overscroll-contain popup-inset scrollbar-quiet",
+        className
+      ),
+      style: { height: plan.height ? `calc(${plan.height}px + 2 * max(var(--spacing), var(--radius-md) / 3))` : 0 },
+      children: /* @__PURE__ */ jsx("div", { className: "relative w-full", style: { height: plan.height }, children: plan.grouped ? plan.spans.map((span, g) => {
+        const rows = visible.filter(
+          (planned) => planned.kind === "item" && planned.group === g
+        );
+        if (rows.length === 0) return null;
+        return /* @__PURE__ */ jsxs(
+          ComboboxGroup,
+          {
+            items: span.group.items,
+            className: "absolute inset-x-0",
+            style: { top: span.top, height: span.height },
+            children: [
+              /* @__PURE__ */ jsx(
+                ComboboxGroupLabel,
+                {
+                  className: "flex items-center px-(--item-px) py-0",
+                  style: { height: groupLabelHeight },
+                  children: renderGroupLabel ? renderGroupLabel(
+                    span.group
+                  ) : span.group.value
+                }
+              ),
+              rows.map((planned) => row(planned, planned.top - span.top))
+            ]
+          },
+          `${g}`
+        );
+      }) : visible.map(
+        (planned) => planned.kind === "item" ? row(planned, planned.top) : null
+      ) })
+    }
+  );
+}
+export {
+  Combobox,
+  ComboboxChips,
+  ComboboxClear,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxGroup,
+  ComboboxGroupLabel,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxItemIndicator,
+  ComboboxList,
+  ComboboxPortal,
+  ComboboxValue,
+  ComboboxVirtualList,
+  useComboboxFilteredItems
+};