@eocrm/design-system 0.6.23 → 0.7.0

package/dist/components/OptionsPicker/OptionsPicker.css

@@ -0,0 +1,174 @@
+:root {
+  --options-picker-panel-min-width: 280px;
+  --options-picker-panel-max-width: 360px;
+  --options-picker-list-max-height: 320px;
+  --options-picker-row-gap: var(--space-2);
+  --options-picker-row-padding: var(--space-2);
+  --options-picker-row-radius: var(--radius-sm);
+  --options-picker-row-bg-hover: var(--color-bg-muted);
+  --options-picker-row-bg-selected: var(--color-accent-subtle-bg);
+  --options-picker-row-bg-focused: var(--color-bg-muted);
+  --options-picker-search-gap: var(--space-2);
+  --options-picker-search-padding: var(--space-2);
+  --options-picker-search-border-color: var(--color-border);
+  --options-picker-search-icon-fg: var(--color-fg-subtle);
+  --options-picker-footer-gap: var(--space-2);
+  --options-picker-footer-padding: var(--space-2);
+  --options-picker-footer-border-color: var(--color-border);
+  --options-picker-group-header-gap: var(--space-2);
+  --options-picker-group-header-padding-y: var(--space-3);
+  --options-picker-group-header-padding-x: var(--space-2);
+  --options-picker-group-header-bg: var(--color-bg-muted);
+  --options-picker-group-header-bg-hover: var(--color-bg-muted-hover);
+  --options-picker-group-header-hint-fg: var(--color-fg-muted);
+  --options-picker-group-header-hint-fg-hover: var(--color-fg);
+  --options-picker-group-header-border-width: var(--border-width-emphasis);
+  --options-picker-group-dot-size: var(--size-badge-dot);
+  --options-picker-group-dot-radius: var(--radius-full);
+  --options-picker-row-padding-left-grouped: var(--space-5);
+  --options-picker-empty-padding-y: var(--space-3);
+  --options-picker-empty-padding-x: var(--space-2);
+}
+
+.OptionsPicker__panel__RtI_m {
+  display: flex;
+  flex-direction: column;
+  min-width: var(--options-picker-panel-min-width);
+  max-width: var(--options-picker-panel-max-width);
+  padding: var(--space-1) 0;
+}
+
+.OptionsPicker__list__HTCe9 {
+  display: flex;
+  flex-direction: column;
+  max-height: var(--options-picker-list-max-height);
+  overflow-y: auto;
+}
+
+.OptionsPicker__row__G-vwv {
+  display: flex;
+  align-items: center;
+  gap: var(--options-picker-row-gap);
+  padding: var(--options-picker-row-padding);
+  border-radius: var(--options-picker-row-radius);
+  cursor: pointer;
+  user-select: none;
+}
+.OptionsPicker__row__G-vwv:hover {
+  background: var(--options-picker-row-bg-hover);
+}
+
+.OptionsPicker__rowSelected__XksaE {
+  background: var(--options-picker-row-bg-selected);
+}
+
+.OptionsPicker__searchBar__skyrb {
+  display: flex;
+  align-items: center;
+  gap: var(--options-picker-search-gap);
+  padding: var(--options-picker-search-padding);
+  border-bottom: var(--border-width) solid var(--options-picker-search-border-color);
+}
+
+.OptionsPicker__searchIcon__LNmOL {
+  color: var(--options-picker-search-icon-fg);
+}
+
+.OptionsPicker__searchInput__dDltg {
+  flex: 1;
+  border: none;
+  background: transparent;
+}
+
+.OptionsPicker__count___mb9M {
+  flex-shrink: 0;
+}
+
+.OptionsPicker__footer__FCC5_ {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--options-picker-footer-gap);
+  padding: var(--options-picker-footer-padding);
+  border-top: var(--border-width) solid var(--options-picker-footer-border-color);
+}
+
+.OptionsPicker__group__4YDqV {
+  display: flex;
+  flex-direction: column;
+}
+
+.OptionsPicker__groupHeader__qo4Mu {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: var(--options-picker-group-header-gap);
+  padding: var(--options-picker-group-header-padding-y) var(--options-picker-group-header-padding-x);
+  background: var(--options-picker-group-header-bg);
+  --text-fg-muted: var(--options-picker-group-header-hint-fg);
+}
+
+.OptionsPicker__groupHeaderWithBorder__WU7ZO {
+  border-bottom: var(--options-picker-group-header-border-width) solid transparent;
+}
+
+button.OptionsPicker__groupHeader__qo4Mu.OptionsPicker__groupHeaderWithBorder__WU7ZO {
+  border-bottom: var(--options-picker-group-header-border-width) solid transparent;
+}
+
+.OptionsPicker__groupLabel__B1SXJ {
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  text-align: start;
+}
+
+.OptionsPicker__groupHint__WiXFm {
+  font-family: var(--font-family-mono);
+}
+
+.OptionsPicker__groupDot__gfffT {
+  width: var(--options-picker-group-dot-size);
+  height: var(--options-picker-group-dot-size);
+  border-radius: var(--options-picker-group-dot-radius);
+  flex-shrink: 0;
+}
+
+.OptionsPicker__group__4YDqV .OptionsPicker__row__G-vwv {
+  padding-left: var(--options-picker-row-padding-left-grouped);
+}
+
+.OptionsPicker__empty__DawBa {
+  padding: var(--options-picker-empty-padding-y) var(--options-picker-empty-padding-x);
+  text-align: center;
+}
+
+button.OptionsPicker__groupHeader__qo4Mu {
+  border: none;
+  cursor: pointer;
+  width: 100%;
+  text-align: left;
+}
+button.OptionsPicker__groupHeader__qo4Mu:hover {
+  background: var(--options-picker-group-header-bg-hover);
+  --text-fg-muted: var(--options-picker-group-header-hint-fg-hover);
+}
+button.OptionsPicker__groupHeader__qo4Mu:focus-visible {
+  outline: var(--ring-width) solid var(--ring-accent);
+  outline-offset: calc(-1 * var(--ring-offset));
+}
+
+.OptionsPicker__rowFocused__T8x90 {
+  background: var(--options-picker-row-bg-focused);
+}
+
+.OptionsPicker__srOnly__w-k4z {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}

package/dist/components/OptionsPicker/OptionsPicker.d.ts

@@ -0,0 +1,135 @@
+import { type ReactElement, type ReactNode } from 'react';
+import { type BadgeTone } from '../Badge/index.js';
+import { type PaletteColor } from '../../palette/index.js';
+export type OptionsPickerMode = 'multi' | 'single';
+export interface OptionsPickerOption {
+    /** Unique identifier; persisted as the selected value. */
+    value: string;
+    /** Displayed text. */
+    label: string;
+    /** Override what the search filter matches against. Defaults to `label`. */
+    searchText?: string;
+}
+export interface OptionsPickerGroup {
+    /** Unique per group; used as React key and ARIA target. */
+    id: string;
+    /** Header text shown in the group label slot. */
+    label: string;
+    options: OptionsPickerOption[];
+    /** Colored dot tone for the group header. Default `'neutral'`. */
+    tone?: BadgeTone;
+    /**
+     * Categorical palette color. When set, takes precedence over `tone`:
+     * the group header dot uses the palette color, AND every option's
+     * Checkbox in this group adopts the same palette color for its
+     * checked / indeterminate fill. Use to give each namespace its own
+     * visual identity (e.g., auth.* = blue, role.* = amber).
+     */
+    color?: PaletteColor;
+    /** Right-side hint label (e.g., `"auth.*"`). Omitted → no hint renders. */
+    hint?: string;
+}
+interface MultiProps {
+    mode?: 'multi';
+    /**
+     * Committed selection: `string[]` (multi) or `string | null` (single).
+     * Multi: pass a stable array (state, or memoized) — a new array identity on
+     * every render resets the open panel's draft.
+     */
+    selected: string[];
+    /** Called on Apply with the committed values and their option objects, in the same order. */
+    onApply: (next: string[], options: OptionsPickerOption[]) => void;
+    onCancel?: () => void;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children: ReactNode;
+}
+interface SingleProps {
+    mode: 'single';
+    /** Committed value, or `null` when nothing is picked. */
+    selected: string | null;
+    /** Called on pick with the value and its option object (`null` / `null` when nothing is picked). */
+    onApply: (next: string | null, option: OptionsPickerOption | null) => void;
+    onCancel?: () => void;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children: ReactNode;
+}
+export type OptionsPickerProps = MultiProps | SingleProps;
+type FlatContentProps = {
+    options: OptionsPickerOption[];
+    groups?: never;
+    loadOptions?: never;
+};
+type GroupedContentProps = {
+    groups: OptionsPickerGroup[];
+    options?: never;
+    loadOptions?: never;
+};
+type AsyncContentProps = {
+    /**
+     * Server search: called with the search query (`''` on every open) after
+     * `searchDebounceMs`, and its answer replaces the list — no client-side
+     * filtering on top. Flat options only. The previous request is aborted via
+     * `signal` when a newer one starts. Takes precedence over `options` /
+     * `groups` (dev warning if both are passed). The latest function is always
+     * the one called; a new identity (e.g. an inline arrow) does not refetch.
+     */
+    loadOptions: (query: string, signal: AbortSignal) => Promise<OptionsPickerOption[]>;
+    /**
+     * Option objects for currently selected values that may not be in any
+     * server answer (e.g. values restored from a URL), so they can be labelled.
+     */
+    selectedOptions?: OptionsPickerOption[];
+    /** Delay between the last keystroke (or opening) and the `loadOptions` call. Default `250`. */
+    searchDebounceMs?: number;
+    options?: never;
+    groups?: never;
+};
+type SharedContentProps = {
+    /** Accessible label on the panel (the dialog's `aria-label`). */
+    label: string;
+    /**
+     * Rendered when search produces zero matches. Defaults to the
+     * `optionsPicker.noMatches` i18n string (en: `'No matches'`). With
+     * `loadOptions` the visible row is hidden from assistive tech and a live
+     * region announces it instead — this text when it is a string, otherwise the
+     * default.
+     *
+     * An EMPTY string counts as unset, matching every other label override in
+     * the library. There is no way to suppress the message entirely — a blank
+     * listbox reads as a broken filter rather than as a deliberate silence.
+     */
+    emptyState?: ReactNode;
+    /**
+     * Footer count formatter (multi only). Default `'${selected} of ${total}'`.
+     * Not called with `loadOptions` — there is no known total, so the footer
+     * reads `optionsPicker.selectedCount` (en: `'N selected'`).
+     */
+    footerCount?: (selected: number, total: number) => ReactNode;
+    /**
+     * Whether to render the search bar at the top of the panel. Defaults to
+     * `true`. Hide it (`false`) for small/curated option lists where typing
+     * filters would just be noise — the selection-count header is hidden
+     * alongside the search input (the footer's `N of TOTAL` text still
+     * shows in multi mode). Ignored with `loadOptions`: server search needs
+     * the input, so it always shows.
+     */
+    searchable?: boolean;
+    className?: string;
+};
+export type OptionsPickerContentProps = (FlatContentProps | GroupedContentProps | AsyncContentProps) & SharedContentProps;
+/**
+ * Compound multi/single-select filter picker with search, optional grouping and draft-then-Apply commit; not a form field.
+ * @see docs/components/OptionsPicker.md
+ */
+declare function OptionsPickerRoot(props: OptionsPickerProps): import("react").JSX.Element;
+export interface OptionsPickerTriggerProps {
+    /** Must be a single React element that accepts a ref (e.g. `<Button>`). */
+    children: ReactElement;
+}
+export declare const OptionsPicker: typeof OptionsPickerRoot & {
+    Trigger: import("react").ForwardRefExoticComponent<OptionsPickerTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Content: import("react").ForwardRefExoticComponent<OptionsPickerContentProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+export {};