gbs-add-block 1.2.7 → 1.2.9

package/source/components/combobox/react/Popover.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { useLayoutEffect, useRef, type ReactNode, type ToggleEvent } from "react";
+import { cx } from "./props";
+
+interface PopoverProps {
+  anchor: HTMLElement;
+  onClose(): void;
+  children: ReactNode;
+  className?: string;
+  /** Distance between the anchor and the popover. */
+  gap?: number;
+}
+
+/**
+ * Anchored popover on the native Popover API: top layer (never clipped by a
+ * scrolling parent or overflow), with light dismiss and Escape built in.
+ * It matches the anchor's width and flips above when space is tight.
+ */
+export function ComboboxPopover({ anchor, onClose, children, className, gap = 4 }: PopoverProps) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const position = () => {
+      const rect = anchor.getBoundingClientRect();
+      el.style.minWidth = `${rect.width}px`;
+      const height = el.offsetHeight;
+      const below = window.innerHeight - rect.bottom - gap - 8;
+      const flip = height > below && rect.top - gap - 8 > below;
+      const left = Math.min(Math.max(8, rect.left), window.innerWidth - el.offsetWidth - 8);
+      el.style.left = `${left}px`;
+      el.style.top = flip ? `${Math.max(8, rect.top - gap - height)}px` : `${rect.bottom + gap}px`;
+      el.style.maxHeight = `${Math.max(140, flip ? rect.top - gap - 8 : below)}px`;
+    };
+
+    el.showPopover();
+    position();
+    // Focus once the popover is actually shown; a popover is display:none until then.
+    el.querySelector<HTMLElement>("[data-autofocus], input, [tabindex]")?.focus({ preventScroll: true });
+
+    // Follow both sizes: the list as options filter, and the control as tags wrap.
+    const observer = new ResizeObserver(position);
+    observer.observe(el);
+    observer.observe(anchor);
+    window.addEventListener("resize", position);
+    window.addEventListener("scroll", position, true);
+    return () => {
+      observer.disconnect();
+      window.removeEventListener("resize", position);
+      window.removeEventListener("scroll", position, true);
+      if (el.matches(":popover-open")) el.hidePopover();
+    };
+  }, [anchor, gap]);
+
+  return (
+    <div
+      ref={ref}
+      popover="auto"
+      className={cx("cb-popover", className)}
+      onToggle={(event: ToggleEvent<HTMLDivElement>) => {
+        if (event.newState === "closed") onClose();
+      }}
+    >
+      {children}
+    </div>
+  );
+}

package/source/components/combobox/react/Select.tsx

@@ -0,0 +1,198 @@
+"use client";
+
+import { useId, useImperativeHandle, useMemo, useRef, type Ref } from "react";
+import type { ComboboxOption, OptionValue } from "../core/types";
+import { defaultComboboxText } from "./locale";
+import { ChevronIcon, XIcon } from "./icons";
+import { Listbox } from "./Listbox";
+import { ComboboxPopover } from "./Popover";
+import { cx, type ComboboxHandle, type ComboboxSharedProps } from "./props";
+import { useCombobox } from "./useCombobox";
+
+export interface SelectProps<V extends OptionValue = string> extends ComboboxSharedProps<V> {
+  value?: V | null;
+  defaultValue?: V | null;
+  onChange?(value: NoInfer<V> | null, option: ComboboxOption<NoInfer<V>> | null): void;
+  /** Keep the list open after choosing. Default false. */
+  closeOnSelect?: boolean;
+  ref?: Ref<ComboboxHandle<V>>;
+}
+
+/** Single-select combobox: a value picker with option search. */
+export function Select<V extends OptionValue = string>(props: SelectProps<V>) {
+  const {
+    ref,
+    value,
+    defaultValue,
+    onChange,
+    closeOnSelect = true,
+    options,
+    label,
+    placeholder = "Select…",
+    description,
+    error,
+    required = false,
+    disabled = false,
+    clearable = true,
+    size = "md",
+    name,
+    id: idProp,
+    className,
+    classNames,
+    style,
+    localeText,
+    maxHeight = 280,
+    virtualize = true,
+    emptyMessage,
+    searchable = true,
+    loading = false,
+    hasMore,
+    onLoadMore,
+    renderOption,
+  } = props;
+
+  const reactId = useId();
+  const id = idProp ?? reactId;
+  const text = useMemo(() => ({ ...defaultComboboxText, ...localeText }), [localeText]);
+
+  const controlRef = useRef<HTMLDivElement>(null);
+  const searchRef = useRef<HTMLInputElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  const combobox = useCombobox<V>({
+    controlRef,
+    searchRef,
+    listRef,
+    ...props,
+    multiple: false,
+    closeOnSelect,
+    value: value === undefined ? undefined : value === null ? [] : [value],
+    defaultValue: defaultValue === null || defaultValue === undefined ? [] : [defaultValue],
+    onValuesChange: (values, selectedOptions) =>
+      onChange?.(values[0] ?? null, selectedOptions[0] ?? null),
+    text,
+    id,
+  });
+
+  const selected = combobox.selectedOptions[0];
+
+  useImperativeHandle(ref, () => combobox.handle, [combobox.handle]);
+
+  return (
+    <div
+      className={cx("cb-root", classNames?.root, className)}
+      style={style}
+      data-size={size}
+      data-state={combobox.open ? "open" : "closed"}
+      data-invalid={error ? "" : undefined}
+    >
+      {label && (
+        <span id={`${id}-label`} className={cx("cb-label", classNames?.label)} data-required={required || undefined}>
+          {label}
+        </span>
+      )}
+
+      <div
+        ref={controlRef}
+        id={id}
+        role="combobox"
+        tabIndex={disabled ? -1 : 0}
+        aria-expanded={combobox.open}
+        aria-haspopup="listbox"
+        aria-controls={combobox.open ? combobox.listboxId : undefined}
+        aria-labelledby={label ? `${id}-label` : undefined}
+        aria-describedby={cx(description ? `${id}-description` : "", error ? `${id}-error` : "") || undefined}
+        aria-required={required || undefined}
+        aria-invalid={error ? true : undefined}
+        aria-disabled={disabled || undefined}
+        className={cx("cb-control", classNames?.control)}
+        data-disabled={disabled || undefined}
+        data-invalid={error ? "" : undefined}
+        onPointerDown={combobox.onControlPointerDown}
+        onClick={combobox.onControlClick}
+        onKeyDown={combobox.onKeyDown}
+      >
+        <span className={cx("cb-value", classNames?.value)}>
+          {selected ? (
+            <>
+              {selected.icon && <span className="cb-value-icon">{selected.icon}</span>}
+              {selected.label}
+            </>
+          ) : (
+            <span className="cb-placeholder">{placeholder}</span>
+          )}
+        </span>
+
+        <span className="cb-actions">
+          {clearable && selected && !disabled && (
+            <button
+              type="button"
+              tabIndex={-1}
+              className="cb-icon-button"
+              aria-label={text.clear}
+              onClick={(event) => {
+                event.stopPropagation();
+                combobox.clear();
+              }}
+            >
+              <XIcon width={14} height={14} />
+            </button>
+          )}
+          <ChevronIcon className="cb-chevron" />
+        </span>
+      </div>
+
+      {name && <input type="hidden" name={name} value={selected?.value ?? ""} />}
+      {description && (
+        <span id={`${id}-description`} className="cb-description">
+          {description}
+        </span>
+      )}
+      {error && (
+        <span id={`${id}-error`} className="cb-error" role="alert">
+          {error}
+        </span>
+      )}
+
+      {combobox.anchor && (
+        <ComboboxPopover
+          anchor={combobox.anchor}
+          onClose={combobox.onPopoverClose}
+          className={classNames?.popover}
+        >
+          <Listbox<V>
+            listboxId={combobox.listboxId}
+            labelledBy={label ? `${id}-label` : id}
+            items={combobox.items}
+            optionCount={combobox.entries.length}
+            activeIndex={combobox.activeIndex}
+            multiple={false}
+            size={size}
+            maxHeight={maxHeight}
+            virtualize={virtualize}
+            loading={loading}
+            hasMore={hasMore}
+            searchable={searchable}
+            search={combobox.search}
+            searchRef={searchRef}
+            listRef={listRef}
+            text={text}
+            classNames={classNames}
+            emptyMessage={emptyMessage}
+            createLabel={combobox.createLabel}
+            getOptionId={combobox.getOptionId}
+            isSelected={combobox.isSelected}
+            onSelect={combobox.selectOption}
+            onActiveIndexChange={combobox.setActiveIndex}
+            onSearchChange={combobox.setSearch}
+            onKeyDown={combobox.onKeyDown}
+            onLoadMore={onLoadMore}
+            onCreate={combobox.commitCreate}
+            renderOption={renderOption}
+          />
+        </ComboboxPopover>
+      )}
+      {options.length === 0 && loading && <span className="cb-sr-only">{text.loading}</span>}
+    </div>
+  );
+}

package/source/components/combobox/react/icons.tsx

@@ -0,0 +1,34 @@
+import type { SVGProps } from "react";
+
+type IconProps = SVGProps<SVGSVGElement>;
+
+function Svg(props: IconProps) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+      {...props}
+    />
+  );
+}
+
+export const SearchIcon = (p: IconProps) => (
+  <Svg {...p}><circle cx="11" cy="11" r="7" /><path d="m20 20-3.5-3.5" /></Svg>
+);
+export const CheckIcon = (p: IconProps) => <Svg {...p}><path d="M20 6 9 17l-5-5" /></Svg>;
+export const ChevronIcon = (p: IconProps) => <Svg {...p}><path d="m6 9 6 6 6-6" /></Svg>;
+export const XIcon = (p: IconProps) => <Svg {...p}><path d="M18 6 6 18M6 6l12 12" /></Svg>;
+export const PlusIcon = (p: IconProps) => <Svg {...p}><path d="M12 5v14M5 12h14" /></Svg>;
+export const SpinnerIcon = (p: IconProps) => (
+  <Svg {...p} className={["cb-spinner", p.className].filter(Boolean).join(" ")}>
+    <path d="M12 3a9 9 0 1 0 9 9" />
+  </Svg>
+);

package/source/components/combobox/react/locale.ts

@@ -0,0 +1,16 @@
+import type { ComboboxLocaleText } from "../core/types";
+
+export const defaultComboboxText: ComboboxLocaleText = {
+  searchPlaceholder: "Search…",
+  noResults: "No options found",
+  loading: "Loading…",
+  loadMore: "Load more",
+  clear: "Clear",
+  clearAll: "Clear all",
+  selectAll: "Select all",
+  createOption: (label) => `Create “${label}”`,
+  selectedCount: (count) => `${count} selected`,
+  moreCount: (count) => `+${count} more`,
+  removeOption: (label) => `Remove ${label}`,
+  maxReached: (max) => `Maximum ${max} selected`,
+};

package/source/components/combobox/react/props.ts

@@ -0,0 +1,86 @@
+import type { CSSProperties, ReactNode } from "react";
+import type {
+  ComboboxLocaleText,
+  ComboboxOption,
+  ComboboxSize,
+  OptionValue,
+} from "../core/types";
+
+export type ComboboxSlot =
+  | "root"
+  | "label"
+  | "control"
+  | "value"
+  | "tag"
+  | "popover"
+  | "search"
+  | "list"
+  | "option"
+  | "footer";
+
+export interface ComboboxHandle<V extends OptionValue = string> {
+  open(): void;
+  close(): void;
+  toggle(): void;
+  focus(): void;
+  clear(): void;
+  getValue(): V[];
+  getSelectedOptions(): ComboboxOption<V>[];
+}
+
+export interface OptionState {
+  selected: boolean;
+  active: boolean;
+}
+
+export interface ComboboxSharedProps<V extends OptionValue = string> {
+  options: readonly ComboboxOption<V>[];
+  /** `client` filters `options` locally; `server` expects `options` to be the current results. */
+  mode?: "client" | "server";
+  /** Shows a loading row; keeps current options visible. */
+  loading?: boolean;
+  /** Called with the search text (debounced in server mode), and on open. */
+  onSearchChange?(search: string): void;
+  /** Debounce for `onSearchChange` in server mode. Default 250 ms. */
+  searchDebounce?: number;
+  /** Show the search box. Default true. When false, typing jumps to a matching option. */
+  searchable?: boolean;
+  /** More results are available; the list calls `onLoadMore` when scrolled near the end. */
+  hasMore?: boolean;
+  onLoadMore?(): void;
+  /**
+   * Replaces the built-in search matching (client mode).
+   * `NoInfer` keeps the option type coming from `options` and `value` only.
+   */
+  filterFn?(option: ComboboxOption<NoInfer<V>>, search: string): boolean;
+  renderOption?(option: ComboboxOption<NoInfer<V>>, state: OptionState): ReactNode;
+  /** Offers "Create …" when the search matches no option. */
+  allowCreate?: boolean;
+  onCreate?(label: string): void;
+  label?: ReactNode;
+  placeholder?: string;
+  description?: ReactNode;
+  /** Message shown below the control; also marks the control invalid. */
+  error?: ReactNode;
+  required?: boolean;
+  disabled?: boolean;
+  /** Show the clear button. Default true. */
+  clearable?: boolean;
+  size?: ComboboxSize;
+  /** Name for the hidden form input. */
+  name?: string;
+  id?: string;
+  /** Max height of the option list in pixels. Default 280. */
+  maxHeight?: number;
+  /** `true` / `false` to force, or a count above which virtualization turns on (default 80). */
+  virtualize?: boolean | number;
+  emptyMessage?: ReactNode;
+  className?: string;
+  classNames?: Partial<Record<ComboboxSlot, string>>;
+  style?: CSSProperties;
+  localeText?: Partial<ComboboxLocaleText>;
+  onOpenChange?(open: boolean): void;
+}
+
+export const cx = (...names: (string | false | null | undefined)[]) =>
+  names.filter(Boolean).join(" ");