@workbench-kit/react 0.0.2-prototype.0.2.4 → 0.0.2-prototype.0.2.6

package/src/primitives/searchable-multi-select/index.ts

@@ -1,9 +1,9 @@
-export { SearchableMultiSelect } from './SearchableMultiSelect';
-export type {
-  SearchableMultiSelectOption,
-  SearchableMultiSelectProps,
-} from './SearchableMultiSelect';
-export {
-  SEARCHABLE_MULTI_SELECT_LISTBOX_ATTR,
-  isSearchableMultiSelectPortalTarget,
-} from './overlay';
+export { SearchableMultiSelect } from './SearchableMultiSelect';
+export type {
+  SearchableMultiSelectOption,
+  SearchableMultiSelectProps,
+} from './SearchableMultiSelect';
+export {
+  SEARCHABLE_MULTI_SELECT_LISTBOX_ATTR,
+  isSearchableMultiSelectPortalTarget,
+} from './overlay';

package/src/primitives/searchable-multi-select/overlay.ts

@@ -1,125 +1,125 @@
-import type { CSSProperties } from 'react';
-
-export type ListboxPlacement = 'bottom' | 'top';
-
-export interface OverlayPosition {
-  left: number;
-  maxHeight: number;
-  placement: ListboxPlacement;
-  triggerBottom: number;
-  triggerTop: number;
-  width: number;
-}
-
-/** Marker on the portaled listbox so host outside-click handlers can treat it as inside. */
-export const SEARCHABLE_MULTI_SELECT_LISTBOX_ATTR = 'data-ui-searchable-multi-select-listbox';
-
-/**
- * True when `target` is inside a portaled SearchableMultiSelect listbox.
- * Use from overlay/popover dismiss handlers — the listbox is not a DOM descendant
- * of the trigger or panel root.
- */
-export function isSearchableMultiSelectPortalTarget(target: EventTarget | null): boolean {
-  if (!(target instanceof Element)) {
-    return false;
-  }
-  return target.closest(`[${SEARCHABLE_MULTI_SELECT_LISTBOX_ATTR}]`) !== null;
-}
-
-const LISTBOX_MAX_HEIGHT = 176; // 11rem
-const LISTBOX_OPTION_HEIGHT = 26;
-const LISTBOX_PADDING = 8;
-const VIEWPORT_PADDING = 8;
-const GAP = 2;
-
-/**
- * Prefer a themed host so token/scrollbar inheritance stays coherent.
- * Fall back to workbench overlays, then document.body (out-of-theme portals
- * still get explicit listbox colors + `.ui-workbench-scrollbar`).
- */
-export function resolvePortalContainer(trigger: HTMLElement | null): HTMLElement {
-  return (
-    trigger?.closest<HTMLElement>(
-      '[data-theme-preset], [data-theme], .ui-workbench-host-root, .ide-workbench-overlays',
-    ) ?? document.body
-  );
-}
-
-export function isTriggerVisible(trigger: HTMLElement): boolean {
-  const rect = trigger.getBoundingClientRect();
-  if (rect.width <= 0 || rect.height <= 0) {
-    return false;
-  }
-  if (rect.bottom <= 0 || rect.top >= window.innerHeight) {
-    return false;
-  }
-  if (rect.right <= 0 || rect.left >= window.innerWidth) {
-    return false;
-  }
-
-  if (typeof trigger.checkVisibility === 'function') {
-    return trigger.checkVisibility({ checkOpacity: true, checkVisibilityCSS: true });
-  }
-
-  return true;
-}
-
-export function measureOverlayPosition(
-  trigger: HTMLElement,
-  optionCount: number,
-): OverlayPosition | null {
-  const rect = trigger.getBoundingClientRect();
-  if (rect.width <= 0 || rect.height <= 0) {
-    return null;
-  }
-
-  const idealHeight = Math.min(
-    LISTBOX_MAX_HEIGHT,
-    Math.max(
-      LISTBOX_OPTION_HEIGHT + LISTBOX_PADDING,
-      optionCount * LISTBOX_OPTION_HEIGHT + LISTBOX_PADDING,
-    ),
-  );
-  const spaceBelow = Math.max(0, window.innerHeight - rect.bottom - VIEWPORT_PADDING - GAP);
-  const spaceAbove = Math.max(0, rect.top - VIEWPORT_PADDING - GAP);
-  const placement: ListboxPlacement =
-    spaceBelow >= idealHeight
-      ? 'bottom'
-      : spaceAbove >= idealHeight
-        ? 'top'
-        : spaceBelow >= spaceAbove
-          ? 'bottom'
-          : 'top';
-  const available = placement === 'bottom' ? spaceBelow : spaceAbove;
-  const maxHeight = Math.min(
-    LISTBOX_MAX_HEIGHT,
-    Math.max(LISTBOX_OPTION_HEIGHT + LISTBOX_PADDING, available),
-  );
-
-  return {
-    placement,
-    left: rect.left,
-    width: rect.width,
-    maxHeight,
-    triggerTop: rect.top,
-    triggerBottom: rect.bottom,
-  };
-}
-
-export function overlayListboxStyle(position: OverlayPosition): CSSProperties {
-  const base: CSSProperties = {
-    left: position.left,
-    width: position.width,
-    maxHeight: position.maxHeight,
-  };
-
-  if (position.placement === 'bottom') {
-    return { ...base, top: position.triggerBottom + GAP };
-  }
-
-  return {
-    ...base,
-    top: position.triggerTop - GAP,
-    transform: 'translateY(-100%)',
-  };
-}
+import type { CSSProperties } from 'react';
+
+export type ListboxPlacement = 'bottom' | 'top';
+
+export interface OverlayPosition {
+  left: number;
+  maxHeight: number;
+  placement: ListboxPlacement;
+  triggerBottom: number;
+  triggerTop: number;
+  width: number;
+}
+
+/** Marker on the portaled listbox so host outside-click handlers can treat it as inside. */
+export const SEARCHABLE_MULTI_SELECT_LISTBOX_ATTR = 'data-ui-searchable-multi-select-listbox';
+
+/**
+ * True when `target` is inside a portaled SearchableMultiSelect listbox.
+ * Use from overlay/popover dismiss handlers — the listbox is not a DOM descendant
+ * of the trigger or panel root.
+ */
+export function isSearchableMultiSelectPortalTarget(target: EventTarget | null): boolean {
+  if (!(target instanceof Element)) {
+    return false;
+  }
+  return target.closest(`[${SEARCHABLE_MULTI_SELECT_LISTBOX_ATTR}]`) !== null;
+}
+
+const LISTBOX_MAX_HEIGHT = 176; // 11rem
+const LISTBOX_OPTION_HEIGHT = 26;
+const LISTBOX_PADDING = 8;
+const VIEWPORT_PADDING = 8;
+const GAP = 2;
+
+/**
+ * Prefer a themed host so token/scrollbar inheritance stays coherent.
+ * Fall back to workbench overlays, then document.body (out-of-theme portals
+ * still get explicit listbox colors + `.ui-workbench-scrollbar`).
+ */
+export function resolvePortalContainer(trigger: HTMLElement | null): HTMLElement {
+  return (
+    trigger?.closest<HTMLElement>(
+      '[data-theme-preset], [data-theme], .ui-workbench-host-root, .ide-workbench-overlays',
+    ) ?? document.body
+  );
+}
+
+export function isTriggerVisible(trigger: HTMLElement): boolean {
+  const rect = trigger.getBoundingClientRect();
+  if (rect.width <= 0 || rect.height <= 0) {
+    return false;
+  }
+  if (rect.bottom <= 0 || rect.top >= window.innerHeight) {
+    return false;
+  }
+  if (rect.right <= 0 || rect.left >= window.innerWidth) {
+    return false;
+  }
+
+  if (typeof trigger.checkVisibility === 'function') {
+    return trigger.checkVisibility({ checkOpacity: true, checkVisibilityCSS: true });
+  }
+
+  return true;
+}
+
+export function measureOverlayPosition(
+  trigger: HTMLElement,
+  optionCount: number,
+): OverlayPosition | null {
+  const rect = trigger.getBoundingClientRect();
+  if (rect.width <= 0 || rect.height <= 0) {
+    return null;
+  }
+
+  const idealHeight = Math.min(
+    LISTBOX_MAX_HEIGHT,
+    Math.max(
+      LISTBOX_OPTION_HEIGHT + LISTBOX_PADDING,
+      optionCount * LISTBOX_OPTION_HEIGHT + LISTBOX_PADDING,
+    ),
+  );
+  const spaceBelow = Math.max(0, window.innerHeight - rect.bottom - VIEWPORT_PADDING - GAP);
+  const spaceAbove = Math.max(0, rect.top - VIEWPORT_PADDING - GAP);
+  const placement: ListboxPlacement =
+    spaceBelow >= idealHeight
+      ? 'bottom'
+      : spaceAbove >= idealHeight
+        ? 'top'
+        : spaceBelow >= spaceAbove
+          ? 'bottom'
+          : 'top';
+  const available = placement === 'bottom' ? spaceBelow : spaceAbove;
+  const maxHeight = Math.min(
+    LISTBOX_MAX_HEIGHT,
+    Math.max(LISTBOX_OPTION_HEIGHT + LISTBOX_PADDING, available),
+  );
+
+  return {
+    placement,
+    left: rect.left,
+    width: rect.width,
+    maxHeight,
+    triggerTop: rect.top,
+    triggerBottom: rect.bottom,
+  };
+}
+
+export function overlayListboxStyle(position: OverlayPosition): CSSProperties {
+  const base: CSSProperties = {
+    left: position.left,
+    width: position.width,
+    maxHeight: position.maxHeight,
+  };
+
+  if (position.placement === 'bottom') {
+    return { ...base, top: position.triggerBottom + GAP };
+  }
+
+  return {
+    ...base,
+    top: position.triggerTop - GAP,
+    transform: 'translateY(-100%)',
+  };
+}

package/src/primitives/searchable-multi-select/searchable-multi-select.css

@@ -1,129 +1,129 @@
-.ui-searchable-multi-select {
-  display: flex;
-  flex-direction: column;
-  gap: var(--shell-spacing-inline-sm, 8px);
-  min-width: 0;
-  position: relative;
-}
-
-.ui-searchable-multi-select__chips {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.375rem;
-  min-width: 0;
-}
-
-.ui-searchable-multi-select__chip {
-  max-width: 100%;
-}
-
-.ui-searchable-multi-select__control {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  min-width: 0;
-  position: relative;
-}
-
-.ui-searchable-multi-select__input {
-  --ui-input-height: 1.625rem;
-  font-size: var(--shell-font-size-meta, 0.75rem);
-}
-
-.ui-searchable-multi-select__list {
-  position: fixed;
-  z-index: 10050;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-  margin: 0;
-  padding: 0.25rem;
-  /* Opt in when portaled into a pointer-events:none host. */
-  pointer-events: auto;
-  overflow: auto;
-  border: 1px solid
-    var(--vscode-widget-border, var(--color-border-subtle, var(--color-border, #454545)));
-  border-radius: var(--shell-radius-control, 4px);
-  /*
-   * Portaled to body / overlays — do not rely on `color: inherit` from the
-   * document (often black on dark dropdown surfaces outside [data-theme]).
-   */
-  color: var(--vscode-foreground, var(--color-text-primary, var(--color-text, #cccccc)));
-  background: var(
-    --vscode-dropdown-background,
-    var(--color-surface, var(--vscode-editor-background, #1e1e1e))
-  );
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
-  list-style: none;
-}
-
-.ui-searchable-multi-select__option {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--shell-spacing-inline-sm, 8px);
-  min-height: 1.625rem;
-  margin: 0;
-  padding: 0.25rem 0.5rem;
-  border: 0;
-  border-radius: var(--shell-radius-control, 4px);
-  color: var(--vscode-foreground, var(--color-text-primary, var(--color-text, #cccccc)));
-  background: transparent;
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
-  width: 100%;
-}
-
-.ui-searchable-multi-select__option:hover,
-.ui-searchable-multi-select__option[data-highlighted='true'] {
-  background: var(
-    --color-list-hover,
-    var(--vscode-list-hoverBackground, rgba(255, 255, 255, 0.06))
-  );
-}
-
-.ui-searchable-multi-select__option[data-selected='true'] {
-  background: var(
-    --vscode-list-activeSelectionBackground,
-    var(--color-list-active, rgba(0, 127, 212, 0.28))
-  );
-}
-
-.ui-searchable-multi-select__option:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-
-.ui-searchable-multi-select__option-label {
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: var(--shell-font-size-meta, 0.75rem);
-  line-height: 1.25;
-}
-
-.ui-searchable-multi-select__option-count {
-  flex: 0 0 auto;
-  color: var(--color-text-muted, var(--vscode-descriptionForeground, #9d9d9d));
-  font-size: var(--shell-font-size-meta, 0.6875rem);
-  font-variant-numeric: tabular-nums;
-}
-
-.ui-searchable-multi-select__option-check {
-  flex: 0 0 auto;
-  width: 0.875rem;
-  color: var(--vscode-list-activeSelectionForeground, var(--color-text, #cccccc));
-  font-size: 0.75rem;
-}
-
-.ui-searchable-multi-select__empty {
-  margin: 0;
-  padding: 0.5rem;
-  color: var(--color-text-muted, var(--vscode-descriptionForeground, #9d9d9d));
-  font-size: var(--shell-font-size-meta, 0.75rem);
-  line-height: 1.35;
-}
+.ui-searchable-multi-select {
+  display: flex;
+  flex-direction: column;
+  gap: var(--shell-spacing-inline-sm, 8px);
+  min-width: 0;
+  position: relative;
+}
+
+.ui-searchable-multi-select__chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  min-width: 0;
+}
+
+.ui-searchable-multi-select__chip {
+  max-width: 100%;
+}
+
+.ui-searchable-multi-select__control {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  min-width: 0;
+  position: relative;
+}
+
+.ui-searchable-multi-select__input {
+  --ui-input-height: 1.625rem;
+  font-size: var(--shell-font-size-meta, 0.75rem);
+}
+
+.ui-searchable-multi-select__list {
+  position: fixed;
+  z-index: 10050;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  margin: 0;
+  padding: 0.25rem;
+  /* Opt in when portaled into a pointer-events:none host. */
+  pointer-events: auto;
+  overflow: auto;
+  border: 1px solid
+    var(--vscode-widget-border, var(--color-border-subtle, var(--color-border, #454545)));
+  border-radius: var(--shell-radius-control, 4px);
+  /*
+   * Portaled to body / overlays — do not rely on `color: inherit` from the
+   * document (often black on dark dropdown surfaces outside [data-theme]).
+   */
+  color: var(--vscode-foreground, var(--color-text-primary, var(--color-text, #cccccc)));
+  background: var(
+    --vscode-dropdown-background,
+    var(--color-surface, var(--vscode-editor-background, #1e1e1e))
+  );
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
+  list-style: none;
+}
+
+.ui-searchable-multi-select__option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--shell-spacing-inline-sm, 8px);
+  min-height: 1.625rem;
+  margin: 0;
+  padding: 0.25rem 0.5rem;
+  border: 0;
+  border-radius: var(--shell-radius-control, 4px);
+  color: var(--vscode-foreground, var(--color-text-primary, var(--color-text, #cccccc)));
+  background: transparent;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  width: 100%;
+}
+
+.ui-searchable-multi-select__option:hover,
+.ui-searchable-multi-select__option[data-highlighted='true'] {
+  background: var(
+    --color-list-hover,
+    var(--vscode-list-hoverBackground, rgba(255, 255, 255, 0.06))
+  );
+}
+
+.ui-searchable-multi-select__option[data-selected='true'] {
+  background: var(
+    --vscode-list-activeSelectionBackground,
+    var(--color-list-active, rgba(0, 127, 212, 0.28))
+  );
+}
+
+.ui-searchable-multi-select__option:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.ui-searchable-multi-select__option-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--shell-font-size-meta, 0.75rem);
+  line-height: 1.25;
+}
+
+.ui-searchable-multi-select__option-count {
+  flex: 0 0 auto;
+  color: var(--color-text-muted, var(--vscode-descriptionForeground, #9d9d9d));
+  font-size: var(--shell-font-size-meta, 0.6875rem);
+  font-variant-numeric: tabular-nums;
+}
+
+.ui-searchable-multi-select__option-check {
+  flex: 0 0 auto;
+  width: 0.875rem;
+  color: var(--vscode-list-activeSelectionForeground, var(--color-text, #cccccc));
+  font-size: 0.75rem;
+}
+
+.ui-searchable-multi-select__empty {
+  margin: 0;
+  padding: 0.5rem;
+  color: var(--color-text-muted, var(--vscode-descriptionForeground, #9d9d9d));
+  font-size: var(--shell-font-size-meta, 0.75rem);
+  line-height: 1.35;
+}