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

package/src/primitives/library-facet-filter-strip/LibraryFacetFilterStrip.tsx

@@ -0,0 +1,527 @@
+import './library-facet-filter-strip.css';
+import {
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+  type RefObject,
+} from 'react';
+import { createPortal } from 'react-dom';
+
+import { Button } from '../button/Button';
+import { Codicon } from '../codicon/Codicon';
+import { IconButton } from '../icon-button/IconButton';
+import { isSearchableMultiSelectPortalTarget } from '../searchable-multi-select/overlay';
+
+/** Product-neutral facet field kind for toggle callbacks. */
+export type LibraryFacetFieldKind = 'single-select' | 'multi-select';
+
+/**
+ * How a field renders in `LibraryFacetFilterPanel`.
+ * `checklist` — dense checkbox/radio list.
+ * `searchable-multi` — selected chips + searchable suggestion list.
+ */
+export type LibraryFacetFieldPresentation = 'checklist' | 'searchable-multi';
+
+export interface LibraryFacetFieldOption {
+  readonly count?: number | undefined;
+  readonly label: string;
+  readonly value: string;
+}
+
+/**
+ * Host-mapped facet field descriptor. Filter out sentinel / empty options before
+ * passing — this component renders the options array as provided.
+ */
+export interface LibraryFacetField {
+  readonly id: string;
+  readonly kind: LibraryFacetFieldKind;
+  readonly options: ReadonlyArray<LibraryFacetFieldOption>;
+  /**
+   * Panel presentation hint. When omitted, long multi-select lists use
+   * `searchable-multi` and short lists use `checklist`.
+   */
+  readonly presentation?: LibraryFacetFieldPresentation | undefined;
+}
+
+export interface LibraryFacetActiveChip {
+  readonly id: string;
+  readonly label: string;
+}
+
+export interface LibraryFacetFilterStripProps {
+  readonly activeChips: ReadonlyArray<LibraryFacetActiveChip>;
+  readonly clearAllLabel: string;
+  readonly expanded: boolean;
+  readonly filtersButtonLabel: string;
+  readonly filtersMenuAriaLabel: string;
+  /**
+   * When set with `onOpenMoreFilters`, replaces cascade show-more/less with a
+   * menu item that opens the fuller facet panel/dialog.
+   */
+  readonly moreFiltersLabel?: string | undefined;
+  readonly onClearAll: () => void;
+  readonly onOpenMoreFilters?: (() => void) | undefined;
+  readonly onShowLess: () => void;
+  readonly onShowMore: () => void;
+  readonly onToggleFacetValue: (
+    fieldId: string,
+    value: string,
+    kind: LibraryFacetFieldKind,
+  ) => void;
+  readonly primaryFields: ReadonlyArray<LibraryFacetField>;
+  readonly resolveFieldLabel: (fieldId: string) => string;
+  readonly secondaryFields: ReadonlyArray<LibraryFacetField>;
+  readonly selectedValues: Readonly<Record<string, readonly string[]>>;
+  readonly showLessLabel: string;
+  readonly showMoreLabel: string;
+}
+
+/**
+ * Compact facet filter control for catalog toolbars (`facetStrip` slot).
+ * Cascade field menus + clear / show-more actions. Domain DTOs stay in the host.
+ */
+export function LibraryFacetFilterStrip({
+  activeChips,
+  clearAllLabel,
+  expanded,
+  filtersButtonLabel,
+  filtersMenuAriaLabel,
+  moreFiltersLabel,
+  onClearAll,
+  onOpenMoreFilters,
+  onShowLess,
+  onShowMore,
+  onToggleFacetValue,
+  primaryFields,
+  resolveFieldLabel,
+  secondaryFields,
+  selectedValues,
+  showLessLabel,
+  showMoreLabel,
+}: LibraryFacetFilterStripProps): ReactNode {
+  const [isOpen, setIsOpen] = useState(false);
+  const [openFieldId, setOpenFieldId] = useState<string | null>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const useMoreFiltersDialog = onOpenMoreFilters !== undefined && moreFiltersLabel !== undefined;
+  // With a fuller panel dialog, keep the cascade on primary fields only.
+  const visibleFields = useMoreFiltersDialog
+    ? primaryFields
+    : expanded
+      ? [...primaryFields, ...secondaryFields]
+      : primaryFields;
+  const menuFields = visibleFields.filter((field) => field.options.length > 0);
+  const hasActiveFilters = activeChips.length > 0;
+  const activeFiltersTooltip = useMemo(
+    () => (activeChips.length > 0 ? activeChips.map((chip) => chip.label).join('\n') : undefined),
+    [activeChips],
+  );
+
+  const closeMenu = (): void => {
+    setIsOpen(false);
+    setOpenFieldId(null);
+  };
+
+  const hasAnyFields = primaryFields.length > 0 || secondaryFields.length > 0;
+  if (menuFields.length === 0 && !(useMoreFiltersDialog && hasAnyFields)) {
+    return null;
+  }
+
+  return (
+    <>
+      <IconButton
+        ref={triggerRef}
+        data-ui-library-facet-menu-trigger="true"
+        data-ui-library-facet-menu-trigger-active={isOpen || hasActiveFilters ? 'true' : undefined}
+        data-ui-library-facet-active-count={
+          hasActiveFilters ? String(activeChips.length) : undefined
+        }
+        icon="codicon-filter"
+        label={filtersButtonLabel}
+        title={activeFiltersTooltip ?? filtersButtonLabel}
+        onClick={() => {
+          setIsOpen((current) => !current);
+        }}
+      />
+      {isOpen ? (
+        <FacetFilterCascadeMenu
+          activeChips={activeChips}
+          anchorRef={triggerRef}
+          ariaLabel={filtersMenuAriaLabel}
+          clearAllLabel={clearAllLabel}
+          expanded={expanded}
+          menuFields={menuFields}
+          moreFiltersLabel={moreFiltersLabel}
+          openFieldId={openFieldId}
+          onClearAll={() => {
+            onClearAll();
+            closeMenu();
+          }}
+          onClose={closeMenu}
+          onOpenFieldIdChange={setOpenFieldId}
+          onOpenMoreFilters={
+            useMoreFiltersDialog
+              ? () => {
+                  closeMenu();
+                  onOpenMoreFilters();
+                }
+              : undefined
+          }
+          onShowLess={onShowLess}
+          onShowMore={onShowMore}
+          onToggleFacetValue={onToggleFacetValue}
+          resolveFieldLabel={resolveFieldLabel}
+          secondaryFields={secondaryFields}
+          selectedValues={selectedValues}
+          showLessLabel={showLessLabel}
+          showMoreLabel={showMoreLabel}
+          useMoreFiltersDialog={useMoreFiltersDialog}
+        />
+      ) : null}
+    </>
+  );
+}
+
+function FacetFilterCascadeMenu({
+  activeChips,
+  anchorRef,
+  ariaLabel,
+  clearAllLabel,
+  expanded,
+  menuFields,
+  moreFiltersLabel,
+  onClearAll,
+  onClose,
+  onOpenFieldIdChange,
+  onOpenMoreFilters,
+  onShowLess,
+  onShowMore,
+  onToggleFacetValue,
+  openFieldId,
+  resolveFieldLabel,
+  secondaryFields,
+  selectedValues,
+  showLessLabel,
+  showMoreLabel,
+  useMoreFiltersDialog,
+}: {
+  activeChips: LibraryFacetFilterStripProps['activeChips'];
+  anchorRef: RefObject<HTMLButtonElement | null>;
+  ariaLabel: string;
+  clearAllLabel: string;
+  expanded: boolean;
+  menuFields: ReadonlyArray<LibraryFacetField>;
+  moreFiltersLabel: string | undefined;
+  onClearAll: () => void;
+  onClose: () => void;
+  onOpenFieldIdChange: (fieldId: string | null) => void;
+  onOpenMoreFilters: (() => void) | undefined;
+  onShowLess: () => void;
+  onShowMore: () => void;
+  onToggleFacetValue: LibraryFacetFilterStripProps['onToggleFacetValue'];
+  openFieldId: string | null;
+  resolveFieldLabel: (fieldId: string) => string;
+  secondaryFields: ReadonlyArray<LibraryFacetField>;
+  selectedValues: Readonly<Record<string, readonly string[]>>;
+  showLessLabel: string;
+  showMoreLabel: string;
+  useMoreFiltersDialog: boolean;
+}): ReactNode {
+  const mainMenuRef = useRef<HTMLDivElement>(null);
+  const fieldItemRefs = useRef(new Map<string, HTMLButtonElement>());
+  const openField = menuFields.find((field) => field.id === openFieldId) ?? null;
+
+  useAnchoredMenuPosition({
+    anchorRef,
+    computePosition: (anchor) => {
+      const rect = anchor.getBoundingClientRect();
+      return { left: Math.max(8, rect.left), top: rect.bottom + 4 };
+    },
+    deps: [anchorRef],
+    menuRef: mainMenuRef,
+  });
+
+  useEffect(() => {
+    const handlePointerDown = (event: PointerEvent): void => {
+      const target = event.target as Node;
+      if (anchorRef.current?.contains(target)) {
+        return;
+      }
+
+      if (mainMenuRef.current?.contains(target)) {
+        return;
+      }
+
+      if (document.querySelector('[data-ui-library-facet-submenu]')?.contains(target)) {
+        return;
+      }
+
+      // Portaled SearchableMultiSelect listbox is not under the menu root.
+      if (isSearchableMultiSelectPortalTarget(event.target)) {
+        return;
+      }
+
+      onClose();
+    };
+
+    const handleKeyDown = (event: KeyboardEvent): void => {
+      if (event.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    window.addEventListener('pointerdown', handlePointerDown, true);
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+      window.removeEventListener('pointerdown', handlePointerDown, true);
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [anchorRef, onClose]);
+
+  const portalTarget =
+    anchorRef.current?.closest<HTMLElement>('[data-theme-preset], [data-theme]') ?? document.body;
+
+  return createPortal(
+    <>
+      <div
+        ref={mainMenuRef}
+        aria-label={ariaLabel}
+        className="ui-context-menu ui-library-facet-filter-strip__menu"
+        data-has-icons="true"
+        data-has-shortcuts="true"
+        data-ui-library-facet-menu="true"
+        role="menu"
+      >
+        {menuFields.map((field) => {
+          const fieldSelections = selectedValues[field.id] ?? [];
+          const fieldLabel = resolveFieldLabel(field.id);
+          const isFieldOpen = openFieldId === field.id;
+
+          return (
+            <Button
+              key={field.id}
+              ref={(node) => {
+                if (node === null) {
+                  fieldItemRefs.current.delete(field.id);
+                  return;
+                }
+
+                fieldItemRefs.current.set(field.id, node);
+              }}
+              aria-expanded={isFieldOpen}
+              aria-haspopup="menu"
+              className="ui-context-menu__item"
+              data-ui-library-facet-field={field.id}
+              data-ui-library-facet-field-open={isFieldOpen ? 'true' : undefined}
+              role="menuitem"
+              type="button"
+              onClick={() => {
+                onOpenFieldIdChange(isFieldOpen ? null : field.id);
+              }}
+            >
+              <span className="ui-context-menu__icon" aria-hidden="true">
+                {fieldSelections.length > 0 ? <Codicon icon="codicon-check" /> : null}
+              </span>
+              <span className="ui-context-menu__label">{fieldLabel}</span>
+              <span className="ui-context-menu__shortcut">
+                {fieldSelections.length > 0 ? (
+                  String(fieldSelections.length)
+                ) : (
+                  <Codicon icon="codicon-chevron-right" />
+                )}
+              </span>
+            </Button>
+          );
+        })}
+        {activeChips.length > 0 ? (
+          <>
+            <div className="ui-context-menu__separator" role="separator" />
+            <Button
+              className="ui-context-menu__item"
+              data-ui-library-facet-clear-all="true"
+              role="menuitem"
+              type="button"
+              onClick={() => {
+                onOpenFieldIdChange(null);
+                onClearAll();
+              }}
+            >
+              <span className="ui-context-menu__icon" aria-hidden="true" />
+              <span className="ui-context-menu__label">{clearAllLabel}</span>
+            </Button>
+          </>
+        ) : null}
+        {useMoreFiltersDialog &&
+        onOpenMoreFilters !== undefined &&
+        moreFiltersLabel !== undefined ? (
+          <>
+            <div className="ui-context-menu__separator" role="separator" />
+            <Button
+              className="ui-context-menu__item"
+              data-ui-library-facet-more-filters="true"
+              role="menuitem"
+              type="button"
+              onClick={() => {
+                onOpenFieldIdChange(null);
+                onOpenMoreFilters();
+              }}
+            >
+              <span className="ui-context-menu__icon" aria-hidden="true" />
+              <span className="ui-context-menu__label">{moreFiltersLabel}</span>
+            </Button>
+          </>
+        ) : secondaryFields.length > 0 ? (
+          <>
+            <div className="ui-context-menu__separator" role="separator" />
+            <Button
+              className="ui-context-menu__item"
+              data-ui-library-facet-toggle="true"
+              role="menuitem"
+              type="button"
+              onClick={() => {
+                onOpenFieldIdChange(null);
+                if (expanded) {
+                  onShowLess();
+                  return;
+                }
+
+                onShowMore();
+              }}
+            >
+              <span className="ui-context-menu__icon" aria-hidden="true" />
+              <span className="ui-context-menu__label">
+                {expanded ? showLessLabel : showMoreLabel}
+              </span>
+            </Button>
+          </>
+        ) : null}
+      </div>
+      {openField ? (
+        <FacetFilterSubmenu
+          anchorItemRef={{ current: fieldItemRefs.current.get(openField.id) ?? null }}
+          field={openField}
+          onToggleFacetValue={onToggleFacetValue}
+          resolveFieldLabel={resolveFieldLabel}
+          selectedValues={selectedValues[openField.id] ?? []}
+        />
+      ) : null}
+    </>,
+    portalTarget,
+  );
+}
+
+function FacetFilterSubmenu({
+  anchorItemRef,
+  field,
+  onToggleFacetValue,
+  resolveFieldLabel,
+  selectedValues,
+}: {
+  anchorItemRef: RefObject<HTMLButtonElement | null>;
+  field: LibraryFacetField;
+  onToggleFacetValue: LibraryFacetFilterStripProps['onToggleFacetValue'];
+  resolveFieldLabel: (fieldId: string) => string;
+  selectedValues: readonly string[];
+}): ReactNode {
+  const submenuRef = useRef<HTMLDivElement>(null);
+  const options = field.options;
+
+  useAnchoredMenuPosition({
+    anchorRef: anchorItemRef,
+    computePosition: (anchorItem, submenu) => {
+      const itemRect = anchorItem.getBoundingClientRect();
+      const submenuRect = submenu.getBoundingClientRect();
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+      let left = itemRect.right + 4;
+      let top = itemRect.top;
+
+      if (left + submenuRect.width > viewportWidth - 8) {
+        left = Math.max(8, itemRect.left - submenuRect.width - 4);
+      }
+
+      const maxTop = viewportHeight - submenuRect.height - 8;
+      if (top > maxTop) {
+        top = Math.max(8, maxTop);
+      }
+
+      return { left, top };
+    },
+    deps: [anchorItemRef, field.id, options.length],
+    menuRef: submenuRef,
+  });
+
+  return (
+    <div
+      ref={submenuRef}
+      aria-label={resolveFieldLabel(field.id)}
+      className="ui-context-menu ui-library-facet-filter-strip__submenu"
+      data-has-icons="true"
+      data-has-shortcuts="true"
+      data-ui-library-facet-submenu={field.id}
+      role="menu"
+    >
+      {options.map((option) => {
+        const selected = selectedValues.includes(option.value);
+
+        return (
+          <Button
+            key={`${field.id}:${option.value}`}
+            aria-pressed={selected}
+            className="ui-context-menu__item"
+            data-ui-library-facet-option={`${field.id}:${option.value}`}
+            role="menuitemcheckbox"
+            type="button"
+            onClick={() => {
+              onToggleFacetValue(field.id, option.value, field.kind);
+            }}
+          >
+            <span className="ui-context-menu__icon" aria-hidden="true">
+              {selected ? <Codicon icon="codicon-check" /> : null}
+            </span>
+            <span className="ui-context-menu__label">{option.label}</span>
+            {option.count !== undefined ? (
+              <span className="ui-context-menu__shortcut">{option.count}</span>
+            ) : null}
+          </Button>
+        );
+      })}
+    </div>
+  );
+}
+
+function useAnchoredMenuPosition({
+  anchorRef,
+  computePosition,
+  deps,
+  menuRef,
+}: {
+  anchorRef: RefObject<HTMLElement | null>;
+  computePosition: (anchor: HTMLElement, menu: HTMLElement) => { left: number; top: number };
+  deps: readonly unknown[];
+  menuRef: RefObject<HTMLElement | null>;
+}): void {
+  useLayoutEffect(() => {
+    const anchor = anchorRef.current;
+    const menu = menuRef.current;
+    if (anchor === null || menu === null) {
+      return;
+    }
+
+    const updatePosition = (): void => {
+      const { left, top } = computePosition(anchor, menu);
+      menu.style.left = `${left}px`;
+      menu.style.top = `${top}px`;
+    };
+
+    updatePosition();
+    window.addEventListener('resize', updatePosition);
+    window.addEventListener('scroll', updatePosition, true);
+    return () => {
+      window.removeEventListener('resize', updatePosition);
+      window.removeEventListener('scroll', updatePosition, true);
+    };
+  }, deps);
+}

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

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

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

@@ -0,0 +1,31 @@
+[data-ui-library-facet-menu-trigger-active='true'] {
+  --ui-icon-button-background: color-mix(in srgb, var(--color-accent) 16%, transparent);
+  --ui-icon-button-border-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-border));
+  color: var(--color-text);
+}
+
+[data-ui-library-facet-menu='true']
+  .ui-context-menu__item[data-ui-library-facet-field-open='true'] {
+  background: var(--color-surface-hover);
+  color: var(--color-text);
+}
+
+[data-ui-library-facet-menu='true']:has([data-ui-library-facet-field-open='true'])
+  .ui-context-menu__item[data-ui-library-facet-field]:not(
+    [data-ui-library-facet-field-open='true']
+  ):hover {
+  background: transparent;
+  color: var(--color-text-muted);
+}
+
+[data-ui-library-facet-menu='true'],
+[data-ui-library-facet-submenu] {
+  max-height: min(360px, 60vh);
+  overflow: auto;
+  position: fixed;
+  z-index: var(--ui-context-menu-z-index, 260);
+}
+
+[data-ui-library-facet-submenu] {
+  min-width: 200px;
+}

package/src/primitives/{List.tsx → list/List.tsx}

@@ -1,8 +1,11 @@
+import './list.css';
+import './list-item.css';
+import './list-empty-state.css';
 import type { ComponentPropsWithRef, ReactNode } from 'react';
-import { IconButton } from './IconButton';
-import type { IconButtonProps } from './IconButton';
-import { cxCodicon } from '../utils/codicon';
-import { cx } from '../utils/cx';
+import { IconButton } from '../icon-button';
+import type { IconButtonProps } from '../icon-button';
+import { cxCodicon } from '../../utils/codicon';
+import { cx } from '../../utils/cx';
 
 export interface ListProps extends ComponentPropsWithRef<'div'> {
   ariaLabel?: string;
@@ -45,6 +48,13 @@ export function ListItem({
   const hasDescription = description !== undefined && description !== null && description !== '';
   const resolvedIcon = typeof icon === 'string' ? <i className={cxCodicon(icon)} /> : icon;
 
+  const leadingNode =
+    leading != null ? (
+      <span className="ui-list-item__icon">{leading}</span>
+    ) : resolvedIcon ? (
+      <span className="ui-list-item__icon">{resolvedIcon}</span>
+    ) : null;
+
   return (
     <div
       aria-selected={selected}
@@ -53,8 +63,7 @@ export function ListItem({
       tabIndex={tabIndex}
       {...props}
     >
-      {leading ??
-        (resolvedIcon ? <span className="ui-list-item__icon">{resolvedIcon}</span> : null)}
+      {leadingNode}
       <span className="ui-list-item__content">
         <span className="ui-list-item__label">{label}</span>
         {hasDescription ? <span className="ui-list-item__description">{description}</span> : null}

package/src/primitives/list/index.ts

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

package/src/primitives/list/list-empty-state.css

@@ -0,0 +1,10 @@
+.ui-list-empty-state {
+  padding: 8px 12px;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+  word-break: break-word;
+}
+
+.ui-list-empty-state--error {
+  color: var(--color-error);
+}

package/src/primitives/list/list-item.css

@@ -0,0 +1,93 @@
+.ui-list-item {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto auto;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  min-height: 30px;
+  padding: 4px 8px 4px 12px;
+  color: var(--color-text);
+  border-bottom: 1px solid var(--color-border);
+  outline: none;
+}
+
+.ui-list-item[role='option'] {
+  cursor: pointer;
+}
+
+.ui-list-item--selected {
+  color: var(--color-accent-foreground);
+  background: var(--color-accent);
+}
+
+.ui-list-item:focus-visible {
+  outline: 1px solid var(--color-focus-border);
+  outline-offset: -1px;
+}
+
+.ui-list-item__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-icon);
+}
+
+.ui-list-item__content {
+  min-width: 0;
+}
+
+.ui-list-item__label,
+.ui-list-item__description,
+.ui-list-item__meta {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-list-item__label {
+  font-size: var(--font-size-sm);
+}
+
+.ui-list-item__description,
+.ui-list-item__meta {
+  color: var(--color-text-muted);
+  font-size: var(--font-size-xs);
+}
+
+.ui-list-item--selected .ui-list-item__description,
+.ui-list-item--selected .ui-list-item__meta {
+  color: inherit;
+  opacity: 0.78;
+}
+
+.ui-list-item__meta {
+  max-width: 88px;
+}
+
+.ui-list-item__actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  min-width: 0;
+}
+
+.ui-list-item--media {
+  grid-template-columns: var(--ui-list-item-media-leading-size, 64px) minmax(0, 1fr) auto auto;
+  align-items: center;
+  min-height: 42px;
+}
+
+.ui-list-item--media .ui-list-item__icon {
+  align-self: center;
+  justify-self: start;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.ui-list-item--media .ui-list-item__content {
+  min-width: 0;
+  overflow: hidden;
+}