@workbench-kit/react 0.0.2-prototype.0.1.2 → 0.0.2-prototype.0.2.2

package/src/primitives/library-facet-filter-panel/LibraryFacetFilterPanel.tsx

@@ -0,0 +1,454 @@
+import './library-facet-filter-panel.css';
+import { useId, useState, type ReactNode } from 'react';
+
+import { FilterBar, FilterBarActiveChips } from '../../layout/panel';
+import { cx } from '../../utils/cx';
+import { cxCodicon } from '../../utils/codicon';
+import { Checkbox } from '../checkbox/Checkbox';
+import { Chip } from '../chip';
+import { EmptyState } from '../empty-state/EmptyState';
+import {
+  type LibraryFacetActiveChip,
+  type LibraryFacetField,
+  type LibraryFacetFieldKind,
+  type LibraryFacetFieldPresentation,
+} from '../library-facet-filter-strip/LibraryFacetFilterStrip';
+import { ScrollArea } from '../scroll-area/ScrollArea';
+import { SearchableMultiSelect } from '../searchable-multi-select/SearchableMultiSelect';
+
+export type {
+  LibraryFacetActiveChip,
+  LibraryFacetField,
+  LibraryFacetFieldKind,
+  LibraryFacetFieldOption,
+  LibraryFacetFieldPresentation,
+} from '../library-facet-filter-strip/LibraryFacetFilterStrip';
+
+/**
+ * Multi-select fields with at least this many options default to searchable
+ * chip + suggestion presentation (unless `presentation` is set explicitly).
+ */
+const SEARCHABLE_MULTI_THRESHOLD = 6;
+/** Lay checklist options in multiple columns once a field has at least this many. */
+const OPTION_MULTI_COLUMN_THRESHOLD = 6;
+
+/** Host-ordered section of facet fields (product-neutral ids; labels via resolveSectionLabel). */
+export interface LibraryFacetSection {
+  /**
+   * Uncontrolled initial collapsed state when `collapsibleSections` is true.
+   * When omitted, sections start expanded.
+   */
+  readonly defaultCollapsed?: boolean | undefined;
+  readonly fields: ReadonlyArray<LibraryFacetField>;
+  readonly id: string;
+}
+
+export interface LibraryFacetFilterPanelLabels {
+  readonly clearAll: string;
+  readonly clearChipAria: (chipLabel: string) => string;
+  readonly empty?: string | undefined;
+  /** Aria/placeholder for searchable facet input. Default: "Search options". */
+  readonly filterOptions?: string | undefined;
+  /** Shown when option filter matches nothing. Default: "No matching options". */
+  readonly noMatchingOptions?: string | undefined;
+}
+
+export interface LibraryFacetFilterPanelProps {
+  readonly activeChips?: ReadonlyArray<LibraryFacetActiveChip> | undefined;
+  readonly className?: string | undefined;
+  /**
+   * When true, section headers toggle collapse.
+   * Default false — keeps all sections expanded.
+   */
+  readonly collapsibleSections?: boolean | undefined;
+  readonly description?: string | undefined;
+  readonly labels: LibraryFacetFilterPanelLabels;
+  /** Required when `showActiveChips` is true (chip strip Clear). Host may own Clear otherwise. */
+  readonly onClearAll?: (() => void) | undefined;
+  readonly onRemoveChip?: ((chipId: string) => void) | undefined;
+  readonly onToggleFacetValue: (
+    fieldId: string,
+    value: string,
+    kind: LibraryFacetFieldKind,
+  ) => void;
+  readonly resolveFieldLabel: (fieldId: string) => string;
+  readonly resolveSectionLabel?: ((sectionId: string) => string) | undefined;
+  readonly sections: ReadonlyArray<LibraryFacetSection>;
+  readonly selectedValues: Readonly<Record<string, readonly string[]>>;
+  /**
+   * When false, omit the selected-value chip strip (checklist already shows
+   * selection). Hosts should place Clear in their own header chrome.
+   * Default true for backward compatibility.
+   */
+  readonly showActiveChips?: boolean | undefined;
+}
+
+function sectionHasSelection(
+  section: LibraryFacetSection,
+  selectedValues: Readonly<Record<string, readonly string[]>>,
+): boolean {
+  return section.fields.some((field) => (selectedValues[field.id]?.length ?? 0) > 0);
+}
+
+function countSectionSelections(
+  section: LibraryFacetSection,
+  selectedValues: Readonly<Record<string, readonly string[]>>,
+): number {
+  return section.fields.reduce((sum, field) => sum + (selectedValues[field.id]?.length ?? 0), 0);
+}
+
+function resolveDefaultCollapsed(
+  section: LibraryFacetSection,
+  selectedValues: Readonly<Record<string, readonly string[]>>,
+): boolean {
+  if (sectionHasSelection(section, selectedValues)) {
+    return false;
+  }
+  return section.defaultCollapsed === true;
+}
+
+function resolveFieldPresentation(field: LibraryFacetField): LibraryFacetFieldPresentation {
+  if (field.presentation) {
+    return field.presentation;
+  }
+  if (field.kind === 'multi-select' && field.options.length >= SEARCHABLE_MULTI_THRESHOLD) {
+    return 'searchable-multi';
+  }
+  return 'checklist';
+}
+
+function sectionUsesSearchable(section: LibraryFacetSection): boolean {
+  return section.fields.some((field) => resolveFieldPresentation(field) === 'searchable-multi');
+}
+
+/**
+ * Multi-section facet filter panel for modal / side surfaces.
+ * Complements `LibraryFacetFilterStrip` cascade menus — same field/value I/O,
+ * with optional chips and grouped option lists. Domain DTOs stay in the host.
+ * High-cardinality multi-select fields use `SearchableMultiSelect`.
+ */
+export function LibraryFacetFilterPanel({
+  activeChips = [],
+  className,
+  collapsibleSections = false,
+  description,
+  labels,
+  onClearAll,
+  onRemoveChip,
+  onToggleFacetValue,
+  resolveFieldLabel,
+  resolveSectionLabel,
+  sections,
+  selectedValues,
+  showActiveChips = true,
+}: LibraryFacetFilterPanelProps): ReactNode {
+  const visibleSections = sections
+    .map((section) => ({
+      ...section,
+      fields: section.fields.filter((field) => field.options.length > 0),
+    }))
+    .filter((section) => section.fields.length > 0);
+  const hasChipStrip =
+    showActiveChips && activeChips.length > 0 && typeof onClearAll === 'function';
+
+  return (
+    <div
+      className={['ui-library-facet-filter-panel', className].filter(Boolean).join(' ')}
+      data-ui-library-facet-filter-panel="true"
+      data-ui-library-facet-filter-panel-chips={showActiveChips ? 'true' : 'false'}
+      data-ui-library-facet-filter-panel-collapsible={collapsibleSections ? 'true' : 'false'}
+    >
+      {description ? (
+        <p className="ui-library-facet-filter-panel__description">{description}</p>
+      ) : null}
+      {hasChipStrip ? (
+        <FilterBar>
+          <FilterBarActiveChips
+            clearAllLabel={labels.clearAll}
+            data-ui-library-facet-filter-panel-chips="true"
+            onClearAll={onClearAll}
+          >
+            {activeChips.map((chip) => (
+              <Chip
+                key={chip.id}
+                aria-label={labels.clearChipAria(chip.label)}
+                data-ui-library-facet-filter-panel-chip={chip.id}
+                label={chip.label}
+                onDismiss={() => {
+                  onRemoveChip?.(chip.id);
+                }}
+              />
+            ))}
+          </FilterBarActiveChips>
+        </FilterBar>
+      ) : null}
+      {visibleSections.length === 0 ? (
+        <EmptyState compact icon="filter">
+          {labels.empty ?? 'No filters available'}
+        </EmptyState>
+      ) : (
+        <ScrollArea
+          className="ui-library-facet-filter-panel__scroll"
+          gutter="auto"
+          orientation="vertical"
+          scrollbars="overlay"
+        >
+          <div
+            className="ui-library-facet-filter-panel__sections"
+            data-ui-library-facet-filter-panel-sections="true"
+          >
+            {visibleSections.map((section) => (
+              <FacetSection
+                key={section.id}
+                collapsible={collapsibleSections}
+                defaultCollapsed={resolveDefaultCollapsed(section, selectedValues)}
+                labels={labels}
+                onToggleFacetValue={onToggleFacetValue}
+                resolveFieldLabel={resolveFieldLabel}
+                section={section}
+                sectionLabel={resolveSectionLabel?.(section.id) ?? section.id}
+                selectedCount={countSectionSelections(section, selectedValues)}
+                selectedValues={selectedValues}
+                searchable={sectionUsesSearchable(section)}
+              />
+            ))}
+          </div>
+        </ScrollArea>
+      )}
+    </div>
+  );
+}
+
+function FacetSection({
+  collapsible,
+  defaultCollapsed,
+  labels,
+  onToggleFacetValue,
+  resolveFieldLabel,
+  searchable,
+  section,
+  sectionLabel,
+  selectedCount,
+  selectedValues,
+}: {
+  collapsible: boolean;
+  defaultCollapsed: boolean;
+  labels: LibraryFacetFilterPanelLabels;
+  onToggleFacetValue: LibraryFacetFilterPanelProps['onToggleFacetValue'];
+  resolveFieldLabel: LibraryFacetFilterPanelProps['resolveFieldLabel'];
+  searchable: boolean;
+  section: LibraryFacetSection;
+  sectionLabel: string;
+  selectedCount: number;
+  selectedValues: Readonly<Record<string, readonly string[]>>;
+}): ReactNode {
+  const baseId = useId();
+  const contentId = `${baseId}-content`;
+  const headingId = `${baseId}-heading`;
+  const [collapsed, setCollapsed] = useState(defaultCollapsed);
+
+  return (
+    <section
+      className={cx(
+        'ui-library-facet-filter-panel__section',
+        searchable && 'ui-library-facet-filter-panel__section--searchable',
+        collapsible && 'ui-library-facet-filter-panel__section--collapsible',
+        collapsible && collapsed && 'ui-library-facet-filter-panel__section--collapsed',
+      )}
+      data-ui-library-facet-filter-panel-section={section.id}
+      data-collapsed={collapsible && collapsed ? 'true' : undefined}
+      data-presentation={searchable ? 'searchable-multi' : 'checklist'}
+    >
+      {collapsible ? (
+        <button
+          aria-controls={contentId}
+          aria-expanded={!collapsed}
+          className="ui-library-facet-filter-panel__section-toggle"
+          type="button"
+          onClick={() => {
+            setCollapsed((current) => !current);
+          }}
+        >
+          <i
+            aria-hidden="true"
+            className={cxCodicon(
+              collapsed ? 'chevron-right' : 'chevron-down',
+              'ui-library-facet-filter-panel__section-chevron',
+            )}
+          />
+          <span className="ui-library-facet-filter-panel__section-title" id={headingId}>
+            {sectionLabel}
+          </span>
+          {selectedCount > 0 ? (
+            <span className="ui-library-facet-filter-panel__section-count">{selectedCount}</span>
+          ) : null}
+        </button>
+      ) : (
+        <h3 className="ui-library-facet-filter-panel__section-title" id={headingId}>
+          {sectionLabel}
+        </h3>
+      )}
+      <div
+        aria-labelledby={headingId}
+        className="ui-library-facet-filter-panel__fields"
+        hidden={collapsible ? collapsed : undefined}
+        id={collapsible ? contentId : undefined}
+      >
+        {section.fields.map((field) => (
+          <FacetFieldGroup
+            key={field.id}
+            clearChipAria={labels.clearChipAria}
+            field={field}
+            fieldLabel={resolveFieldLabel(field.id)}
+            filterOptionsLabel={labels.filterOptions ?? 'Search options'}
+            noMatchingOptionsLabel={labels.noMatchingOptions ?? 'No matching options'}
+            onToggleFacetValue={onToggleFacetValue}
+            selectedValues={selectedValues[field.id] ?? []}
+          />
+        ))}
+      </div>
+    </section>
+  );
+}
+
+function FacetFieldGroup({
+  clearChipAria,
+  field,
+  fieldLabel,
+  filterOptionsLabel,
+  noMatchingOptionsLabel,
+  onToggleFacetValue,
+  selectedValues,
+}: {
+  clearChipAria: (chipLabel: string) => string;
+  field: LibraryFacetField;
+  fieldLabel: string;
+  filterOptionsLabel: string;
+  noMatchingOptionsLabel: string;
+  onToggleFacetValue: LibraryFacetFilterPanelProps['onToggleFacetValue'];
+  selectedValues: readonly string[];
+}): ReactNode {
+  const presentation = resolveFieldPresentation(field);
+
+  if (presentation === 'searchable-multi' && field.kind === 'multi-select') {
+    return (
+      <div
+        className="ui-library-facet-filter-panel__field ui-library-facet-filter-panel__field--searchable"
+        data-ui-library-facet-filter-panel-field={field.id}
+        data-presentation="searchable-multi"
+      >
+        <div className="ui-library-facet-filter-panel__field-title">{fieldLabel}</div>
+        <SearchableMultiSelect
+          aria-label={fieldLabel}
+          className="ui-library-facet-filter-panel__searchable"
+          emptyMessage={noMatchingOptionsLabel}
+          getRemoveChipAriaLabel={clearChipAria}
+          options={field.options}
+          searchPlaceholder={filterOptionsLabel}
+          selectedValues={selectedValues}
+          onValueToggle={(value) => {
+            onToggleFacetValue(field.id, value, field.kind);
+          }}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <FacetChecklist
+      field={field}
+      fieldLabel={fieldLabel}
+      onToggleFacetValue={onToggleFacetValue}
+      selectedValues={selectedValues}
+    />
+  );
+}
+
+function FacetChecklist({
+  field,
+  fieldLabel,
+  onToggleFacetValue,
+  selectedValues,
+}: {
+  field: LibraryFacetField;
+  fieldLabel: string;
+  onToggleFacetValue: LibraryFacetFilterPanelProps['onToggleFacetValue'];
+  selectedValues: readonly string[];
+}): ReactNode {
+  const multiColumn = field.options.length >= OPTION_MULTI_COLUMN_THRESHOLD;
+
+  return (
+    <div
+      className="ui-library-facet-filter-panel__field"
+      data-ui-library-facet-filter-panel-field={field.id}
+      data-presentation="checklist"
+    >
+      <div className="ui-library-facet-filter-panel__field-title">{fieldLabel}</div>
+      <div
+        className={cx(
+          'ui-library-facet-filter-panel__options',
+          multiColumn && 'ui-library-facet-filter-panel__options--multi-column',
+        )}
+        role={field.kind === 'single-select' ? 'radiogroup' : 'group'}
+        aria-label={fieldLabel}
+      >
+        {field.options.map((option) => {
+          const selected = selectedValues.includes(option.value);
+          const optionKey = `${field.id}:${option.value}`;
+
+          if (field.kind === 'single-select') {
+            return (
+              <button
+                key={optionKey}
+                aria-checked={selected}
+                className="ui-library-facet-filter-panel__option"
+                data-ui-library-facet-filter-panel-option={optionKey}
+                data-selected={selected ? 'true' : undefined}
+                role="radio"
+                type="button"
+                onClick={() => {
+                  onToggleFacetValue(field.id, option.value, field.kind);
+                }}
+              >
+                <span className="ui-library-facet-filter-panel__option-label">{option.label}</span>
+                {option.count !== undefined ? (
+                  <span className="ui-library-facet-filter-panel__option-count">
+                    {option.count}
+                  </span>
+                ) : null}
+              </button>
+            );
+          }
+
+          return (
+            <div
+              key={optionKey}
+              className="ui-library-facet-filter-panel__option ui-library-facet-filter-panel__option--checkbox"
+              data-ui-library-facet-filter-panel-option={optionKey}
+              data-selected={selected ? 'true' : undefined}
+            >
+              <Checkbox
+                checked={selected}
+                label={
+                  <span className="ui-library-facet-filter-panel__option-row">
+                    <span className="ui-library-facet-filter-panel__option-label">
+                      {option.label}
+                    </span>
+                    {option.count !== undefined ? (
+                      <span className="ui-library-facet-filter-panel__option-count">
+                        {option.count}
+                      </span>
+                    ) : null}
+                  </span>
+                }
+                onCheckedChange={() => {
+                  onToggleFacetValue(field.id, option.value, field.kind);
+                }}
+              />
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/primitives/library-facet-filter-panel/index.ts

@@ -0,0 +1 @@
+export * from './LibraryFacetFilterPanel';

package/src/primitives/library-facet-filter-panel/library-facet-filter-panel.css

@@ -0,0 +1,205 @@
+.ui-library-facet-filter-panel {
+  --ui-library-facet-filter-option-min-width: 8.75rem;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: var(--shell-spacing-inline-md, 12px);
+  min-height: 0;
+  min-width: 0;
+}
+
+.ui-library-facet-filter-panel__description {
+  color: var(--color-text-muted, var(--vscode-descriptionForeground, #9d9d9d));
+  font-size: var(--shell-font-size-body, 0.8125rem);
+  line-height: 1.4;
+  margin: 0;
+}
+
+.ui-library-facet-filter-panel__scroll {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.ui-library-facet-filter-panel__sections {
+  display: flex;
+  flex-direction: column;
+  gap: var(--shell-spacing-panel-lg, 20px);
+  padding-bottom: var(--shell-spacing-panel-sm, 8px);
+}
+
+.ui-library-facet-filter-panel__section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--shell-spacing-inline-md, 12px);
+  min-width: 0;
+}
+
+.ui-library-facet-filter-panel__section--collapsible {
+  gap: var(--shell-spacing-inline-sm, 8px);
+}
+
+.ui-library-facet-filter-panel__section-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  color: inherit;
+  background: transparent;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.ui-library-facet-filter-panel__section-toggle:hover {
+  color: var(--color-text, var(--vscode-foreground, #cccccc));
+}
+
+.ui-library-facet-filter-panel__section-toggle:focus-visible {
+  outline: 1px solid var(--vscode-focusBorder, var(--color-accent));
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+.ui-library-facet-filter-panel__section-chevron {
+  flex-shrink: 0;
+  width: 0.875rem;
+  color: var(--color-text-subtle, var(--vscode-descriptionForeground, #9d9d9d));
+  font-size: 0.75rem;
+}
+
+.ui-library-facet-filter-panel__section-title {
+  flex: 1 1 auto;
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  color: var(--color-text, var(--vscode-foreground, #cccccc));
+  font-size: var(--shell-font-size-body, 0.8125rem);
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.ui-library-facet-filter-panel__section-count {
+  flex: 0 0 auto;
+  min-width: 1.125rem;
+  padding: 0 0.375rem;
+  border-radius: 999px;
+  background: var(
+    --vscode-badge-background,
+    var(--color-surface-secondary, rgba(255, 255, 255, 0.1))
+  );
+  color: var(--vscode-badge-foreground, var(--color-text-muted, #9d9d9d));
+  font-size: var(--shell-font-size-meta, 0.6875rem);
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  line-height: 1.35;
+  text-align: center;
+}
+
+.ui-library-facet-filter-panel__fields {
+  display: flex;
+  flex-direction: column;
+  gap: var(--shell-spacing-inline-md, 12px);
+}
+
+.ui-library-facet-filter-panel__field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--shell-spacing-inline-sm, 8px);
+  min-width: 0;
+}
+
+.ui-library-facet-filter-panel__field-title {
+  color: var(--color-text, var(--vscode-foreground, #cccccc));
+  font-size: var(--shell-font-size-body, 0.8125rem);
+  font-weight: 500;
+}
+
+.ui-library-facet-filter-panel__field--searchable {
+  gap: var(--shell-spacing-inline-sm, 8px);
+}
+
+.ui-library-facet-filter-panel__searchable {
+  min-width: 0;
+}
+
+.ui-library-facet-filter-panel__options {
+  display: grid;
+  gap: 2px;
+  grid-template-columns: 1fr;
+}
+
+.ui-library-facet-filter-panel__options--multi-column {
+  grid-template-columns: repeat(
+    auto-fill,
+    minmax(var(--ui-library-facet-filter-option-min-width), 1fr)
+  );
+}
+
+.ui-library-facet-filter-panel__options-empty {
+  margin: 0;
+  padding: 0.375rem 0.5rem;
+  color: var(--color-text-muted, var(--vscode-descriptionForeground, #9d9d9d));
+  font-size: var(--shell-font-size-meta, 0.75rem);
+  line-height: 1.35;
+  grid-column: 1 / -1;
+}
+
+.ui-library-facet-filter-panel__option {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: var(--shell-radius-control, 4px);
+  color: inherit;
+  cursor: pointer;
+  display: flex;
+  gap: var(--shell-spacing-inline-sm, 8px);
+  justify-content: space-between;
+  min-height: 28px;
+  min-width: 0;
+  padding: 4px 8px;
+  text-align: left;
+  width: 100%;
+}
+
+.ui-library-facet-filter-panel__option:hover,
+.ui-library-facet-filter-panel__option[data-selected='true'] {
+  background: var(
+    --color-list-hover,
+    var(--vscode-list-hoverBackground, rgba(255, 255, 255, 0.06))
+  );
+}
+
+.ui-library-facet-filter-panel__option--checkbox {
+  cursor: default;
+  padding-block: 2px;
+}
+
+.ui-library-facet-filter-panel__option-row {
+  align-items: center;
+  display: flex;
+  gap: var(--shell-spacing-inline-sm, 8px);
+  justify-content: space-between;
+  min-width: 0;
+  width: 100%;
+}
+
+.ui-library-facet-filter-panel__option-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-library-facet-filter-panel__option-count {
+  color: var(--color-text-muted, var(--vscode-descriptionForeground, #9d9d9d));
+  flex: 0 0 auto;
+  font-size: var(--shell-font-size-meta, 0.75rem);
+  font-variant-numeric: tabular-nums;
+}