gbs-add-block 1.2.15 → 1.2.16

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

@@ -1,198 +1,200 @@
-"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>
-  );
-}
+"use client";
+
+import { useId, useImperativeHandle, useMemo, useRef, type Ref } from "react";
+import { describeField } from "../../shared/core/field";
+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-label={label ? undefined : props["aria-label"]}
+        aria-describedby={describeField(id, { description, error })}
+        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/beta-components/combobox/react/icons.tsx

@@ -1,34 +1,11 @@
-import type { SVGProps } from "react";
+import { SpinnerIcon as SharedSpinner, Svg, type IconProps } from "../../shared/react/icons";
+import { cx } from "./props";
 
-type IconProps = SVGProps<SVGSVGElement>;
+export { CheckIcon, ChevronDownIcon as ChevronIcon, SearchIcon, XIcon } from "../../shared/react/icons";
 
-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>;
+
+/** The class is what spins it; the arc itself is shared. */
 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>
+  <SharedSpinner {...p} className={cx("cb-spinner", p.className)} />
 );

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

@@ -80,7 +80,9 @@ export interface ComboboxSharedProps<V extends OptionValue = string> {
   style?: CSSProperties;
   localeText?: Partial<ComboboxLocaleText>;
   onOpenChange?(open: boolean): void;
+  /** Names the control when there is no visible `label`. */
+  "aria-label"?: string;
 }
 
-export const cx = (...names: (string | false | null | undefined)[]) =>
-  names.filter(Boolean).join(" ");
+// Shared with every other component, so class handling cannot drift.
+export { cx } from "../../shared/core/cx";

package/source/beta-components/combobox/styles.css

@@ -1,30 +1,30 @@
 /*
  * Combobox styles (Select and MultiSelect).
  *
- * Tokens default to the DataGrid's --dg-* variables when that stylesheet is
- * present, so both components share one theme, and fall back to the same
- * palette when used on their own. Rules live in the `components` layer, so
+ * Tokens read the shared --gbs-* variables when they are set on an ancestor
+ * (set them on :root to theme every component at once) and fall back to the
+ * same default palette otherwise. Rules live in the `components` layer, so
  * utility classes passed through `className` / `classNames` override them.
  */
 @layer theme, base, components, utilities;
 
 @layer components {
   .cb-root {
-    --cb-bg: var(--dg-bg, light-dark(#ffffff, #0b0b0e));
-    --cb-fg: var(--dg-fg, light-dark(#18181b, #f4f4f5));
-    --cb-muted: var(--dg-muted, light-dark(#71717a, #a1a1aa));
-    --cb-border: var(--dg-border, light-dark(#e4e4e7, #27272a));
-    --cb-hover: var(--dg-hover, light-dark(#f4f4f5, #1f1f23));
-    --cb-input-bg: var(--dg-input-bg, light-dark(#ffffff, #121216));
-    --cb-accent: var(--dg-accent, light-dark(#2563eb, #60a5fa));
-    --cb-accent-fg: var(--dg-accent-fg, light-dark(#ffffff, #0b1220));
-    --cb-accent-soft: var(--dg-accent-soft, light-dark(#eff6ff, #172554));
-    --cb-accent-strong: var(--dg-accent-strong, light-dark(#1d4ed8, #bfdbfe));
-    --cb-focus: var(--dg-focus, light-dark(#2563eb, #60a5fa));
-    --cb-danger: var(--dg-danger, light-dark(#dc2626, #f87171));
-    --cb-shadow: var(--dg-shadow, 0 10px 30px -8px light-dark(rgb(0 0 0 / 0.18), rgb(0 0 0 / 0.6)));
-    --cb-radius: var(--dg-radius, 8px);
-    --cb-font-size: var(--dg-font-size, 13px);
+    --cb-bg: var(--gbs-bg, var(--dg-bg, light-dark(#ffffff, #0b0b0e)));
+    --cb-fg: var(--gbs-fg, var(--dg-fg, light-dark(#18181b, #f4f4f5)));
+    --cb-muted: var(--gbs-muted, var(--dg-muted, light-dark(#71717a, #a1a1aa)));
+    --cb-border: var(--gbs-border, var(--dg-border, light-dark(#e4e4e7, #27272a)));
+    --cb-hover: var(--gbs-hover, var(--dg-hover, light-dark(#f4f4f5, #1f1f23)));
+    --cb-input-bg: var(--gbs-input-bg, var(--dg-input-bg, light-dark(#ffffff, #121216)));
+    --cb-accent: var(--gbs-accent, var(--dg-accent, light-dark(#2563eb, #60a5fa)));
+    --cb-accent-fg: var(--gbs-accent-fg, var(--dg-accent-fg, light-dark(#ffffff, #0b1220)));
+    --cb-accent-soft: var(--gbs-accent-soft, var(--dg-accent-soft, light-dark(#eff6ff, #172554)));
+    --cb-accent-strong: var(--gbs-accent-strong, var(--dg-accent-strong, light-dark(#1d4ed8, #bfdbfe)));
+    --cb-focus: var(--gbs-focus, var(--dg-focus, light-dark(#2563eb, #60a5fa)));
+    --cb-danger: var(--gbs-danger, var(--dg-danger, light-dark(#dc2626, #f87171)));
+    --cb-shadow: var(--gbs-shadow, var(--dg-shadow, 0 10px 30px -8px light-dark(rgb(0 0 0 / 0.18), rgb(0 0 0 / 0.6))));
+    --cb-radius: var(--gbs-radius, var(--dg-radius, 8px));
+    --cb-font-size: var(--gbs-font-size, var(--dg-font-size, 13px));
     --cb-height: 36px;
     --cb-px: 10px;
 

package/source/beta-components/data-grid/react/Popover.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { AnchoredPopover } from "../../shared/react/Popover";
+import { cx } from "./context";
+
+interface PopoverProps {
+  anchor: HTMLElement;
+  onClose(): void;
+  label: string;
+  align?: "start" | "end";
+  className?: string;
+  children: ReactNode;
+}
+
+/**
+ * The grid's column and toolbar menus. Focus returns to the header button or
+ * toolbar control that opened it, so keyboard work carries on where it left off
+ * instead of restarting at the top of the page.
+ */
+export function Popover({ anchor, onClose, label, align = "start", className, children }: PopoverProps) {
+  return (
+    <AnchoredPopover
+      anchor={anchor}
+      onClose={onClose}
+      label={label}
+      align={align}
+      className={cx("dg-popover", className)}
+      autoFocus="[data-autofocus], button, input, select, textarea"
+      returnFocus
+    >
+      {children}
+    </AnchoredPopover>
+  );
+}

package/source/beta-components/{datagrid → data-grid}/react/context.ts

@@ -53,5 +53,5 @@ export function useGridContext<T>(): GridContextValue<T> {
 /** Marks a cell without an in-flight async edit. */
 export const NO_PENDING: unique symbol = Symbol("dg.noPending");
 
-export const cx = (...names: (string | false | null | undefined)[]) =>
-  names.filter(Boolean).join(" ");
+// Shared with every other component, so class handling cannot drift.
+export { cx } from "../../shared/core/cx";

package/source/beta-components/{datagrid → data-grid}/react/icons.tsx

@@ -1,28 +1,13 @@
-import type { SVGProps } from "react";
+import { Svg, type IconProps } from "../../shared/react/icons";
 
-type IconProps = SVGProps<SVGSVGElement>;
+export {
+  CheckIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  SearchIcon,
+  XIcon,
+} from "../../shared/react/icons";
 
-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 ArrowUpIcon = (p: IconProps) => (
   <Svg {...p}><path d="M12 19V5M5 12l7-7 7 7" /></Svg>
 );
@@ -32,21 +17,12 @@ export const ArrowDownIcon = (p: IconProps) => (
 export const MoreIcon = (p: IconProps) => (
   <Svg {...p}><path d="M12 5h.01M12 12h.01M12 19h.01" strokeWidth="3" /></Svg>
 );
-export const ChevronLeftIcon = (p: IconProps) => (
-  <Svg {...p}><path d="m15 18-6-6 6-6" /></Svg>
-);
-export const ChevronRightIcon = (p: IconProps) => (
-  <Svg {...p}><path d="m9 18 6-6-6-6" /></Svg>
-);
 export const ChevronsLeftIcon = (p: IconProps) => (
   <Svg {...p}><path d="m11 17-5-5 5-5M18 17l-5-5 5-5" /></Svg>
 );
 export const ChevronsRightIcon = (p: IconProps) => (
   <Svg {...p}><path d="m13 17 5-5-5-5M6 17l5-5-5-5" /></Svg>
 );
-export const XIcon = (p: IconProps) => (
-  <Svg {...p}><path d="M18 6 6 18M6 6l12 12" /></Svg>
-);
 export const ColumnsIcon = (p: IconProps) => (
   <Svg {...p}><rect x="3" y="4" width="18" height="16" rx="2" /><path d="M9 4v16M15 4v16" /></Svg>
 );
@@ -67,6 +43,3 @@ export const EyeOffIcon = (p: IconProps) => (
 export const MoveIcon = (p: IconProps) => (
   <Svg {...p}><path d="M5 12h14M9 8l-4 4 4 4M15 8l4 4-4 4" /></Svg>
 );
-export const CheckIcon = (p: IconProps) => (
-  <Svg {...p}><path d="M20 6 9 17l-5-5" /></Svg>
-);