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

package/src/primitives/select/overlay.ts

@@ -1,82 +1,82 @@
-import type { CSSProperties } from 'react';
-import type { ListboxPlacement, OverlayPosition } from './types';
-
-const LISTBOX_MAX_HEIGHT = 240;
-const LISTBOX_OPTION_HEIGHT = 28;
-const LISTBOX_PADDING = 0;
-const VIEWPORT_PADDING = 8;
-
-export function isTriggerVisible(trigger: HTMLElement) {
-  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,
-    optionCount * LISTBOX_OPTION_HEIGHT + LISTBOX_PADDING,
-  );
-  const spaceBelow = Math.max(0, window.innerHeight - rect.bottom - VIEWPORT_PADDING);
-  const spaceAbove = Math.max(0, rect.top - VIEWPORT_PADDING);
-  const placement: ListboxPlacement =
-    spaceBelow >= idealHeight
-      ? 'bottom'
-      : spaceAbove >= idealHeight
-        ? 'top'
-        : spaceBelow >= spaceAbove
-          ? 'bottom'
-          : 'top';
-  const available = placement === 'bottom' ? spaceBelow : spaceAbove;
-  const maxHeight = resolveListboxMaxHeight(idealHeight, available);
-
-  return {
-    placement,
-    left: rect.left,
-    width: rect.width,
-    maxHeight,
-    triggerTop: rect.top,
-    triggerBottom: rect.bottom,
-  };
-}
-
-function resolveListboxMaxHeight(idealHeight: number, available: number): number {
-  if (idealHeight < LISTBOX_MAX_HEIGHT) {
-    return idealHeight;
-  }
-
-  const minHeight = LISTBOX_OPTION_HEIGHT + LISTBOX_PADDING;
-  return Math.min(LISTBOX_MAX_HEIGHT, Math.max(minHeight, available));
-}
-
-export function overlayListboxStyle(position: OverlayPosition): CSSProperties {
-  const base: CSSProperties = {
-    left: position.left,
-    width: position.width,
-    maxHeight: position.maxHeight,
-    overflowY: 'auto',
-  };
-
-  if (position.placement === 'bottom') {
-    return { ...base, top: position.triggerBottom };
-  }
-
-  return {
-    ...base,
-    top: position.triggerTop,
-    transform: 'translateY(-100%)',
-  };
-}
+import type { CSSProperties } from 'react';
+import type { ListboxPlacement, OverlayPosition } from './types';
+
+const LISTBOX_MAX_HEIGHT = 240;
+const LISTBOX_OPTION_HEIGHT = 28;
+const LISTBOX_PADDING = 0;
+const VIEWPORT_PADDING = 8;
+
+export function isTriggerVisible(trigger: HTMLElement) {
+  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,
+    optionCount * LISTBOX_OPTION_HEIGHT + LISTBOX_PADDING,
+  );
+  const spaceBelow = Math.max(0, window.innerHeight - rect.bottom - VIEWPORT_PADDING);
+  const spaceAbove = Math.max(0, rect.top - VIEWPORT_PADDING);
+  const placement: ListboxPlacement =
+    spaceBelow >= idealHeight
+      ? 'bottom'
+      : spaceAbove >= idealHeight
+        ? 'top'
+        : spaceBelow >= spaceAbove
+          ? 'bottom'
+          : 'top';
+  const available = placement === 'bottom' ? spaceBelow : spaceAbove;
+  const maxHeight = resolveListboxMaxHeight(idealHeight, available);
+
+  return {
+    placement,
+    left: rect.left,
+    width: rect.width,
+    maxHeight,
+    triggerTop: rect.top,
+    triggerBottom: rect.bottom,
+  };
+}
+
+function resolveListboxMaxHeight(idealHeight: number, available: number): number {
+  if (idealHeight < LISTBOX_MAX_HEIGHT) {
+    return idealHeight;
+  }
+
+  const minHeight = LISTBOX_OPTION_HEIGHT + LISTBOX_PADDING;
+  return Math.min(LISTBOX_MAX_HEIGHT, Math.max(minHeight, available));
+}
+
+export function overlayListboxStyle(position: OverlayPosition): CSSProperties {
+  const base: CSSProperties = {
+    left: position.left,
+    width: position.width,
+    maxHeight: position.maxHeight,
+    overflowY: 'auto',
+  };
+
+  if (position.placement === 'bottom') {
+    return { ...base, top: position.triggerBottom };
+  }
+
+  return {
+    ...base,
+    top: position.triggerTop,
+    transform: 'translateY(-100%)',
+  };
+}

package/src/primitives/select/select.app.css

@@ -1,12 +1,12 @@
-:root {
-  --ui-select-width-default: 320px;
-  --ui-select-width-wide: 420px;
-  --ui-select-trigger-height: 28px;
-  --ui-select-trigger-radius: var(--radius-sm);
-  --ui-select-option-height: 28px;
-  --ui-select-option-line-height: 20px;
-  --ui-select-option-padding: 4px 8px;
-  --ui-select-option-gap: 6px;
-  --ui-select-option-check-size: 16px;
-  --ui-select-option-radius: 0;
-}
+:root {
+  --ui-select-width-default: 320px;
+  --ui-select-width-wide: 420px;
+  --ui-select-trigger-height: 28px;
+  --ui-select-trigger-radius: var(--radius-sm);
+  --ui-select-option-height: 28px;
+  --ui-select-option-line-height: 20px;
+  --ui-select-option-padding: 4px 8px;
+  --ui-select-option-gap: 6px;
+  --ui-select-option-check-size: 16px;
+  --ui-select-option-radius: 0;
+}

package/src/primitives/select/select.css

@@ -1,177 +1,177 @@
-.ui-select {
-  position: relative;
-  display: inline-block;
-  box-sizing: border-box;
-  min-width: 0;
-  vertical-align: top;
-}
-
-.ui-select[data-width='default'] {
-  width: var(--ui-select-width-default, 180px);
-}
-
-.ui-select[data-width='wide'] {
-  width: var(--ui-select-width-wide, 260px);
-}
-
-.ui-select[data-width='full'] {
-  width: 100%;
-}
-
-.ui-select__trigger {
-  box-sizing: border-box;
-  position: relative;
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: var(--ui-select-trigger-height, 26px);
-  min-width: 0;
-  padding: 0 28px 0 8px;
-  color: var(--color-input-text, var(--vscode-input-foreground, var(--color-text)));
-  background: var(--color-input-bg, var(--vscode-input-background, var(--color-surface-elevated)));
-  border: 1px solid var(--color-input-border, var(--vscode-input-border, var(--color-border)));
-  border-radius: var(--ui-select-trigger-radius, 0);
-  outline: none;
-  font: inherit;
-  font-size: var(--font-size-sm);
-  text-align: left;
-  cursor: pointer;
-}
-
-.ui-select__trigger:disabled {
-  color: var(--color-text-subtle);
-  cursor: default;
-}
-
-.ui-select__value {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.ui-select__chevron {
-  position: absolute;
-  top: 50%;
-  right: 8px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--color-text-muted);
-  transform: translateY(-50%);
-  pointer-events: none;
-}
-
-.ui-select__chevron .codicon {
-  font-size: 14px;
-}
-
-.ui-select__listbox {
-  position: fixed;
-  z-index: 10000;
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  /* Opt in when portaled into a pointer-events:none host. */
-  pointer-events: auto;
-  /* Explicit fallbacks: listbox is often portaled outside [data-theme]. */
-  color: var(--vscode-menu-foreground, var(--color-text-primary, var(--color-text, #cccccc)));
-  background: var(
-    --vscode-menu-background,
-    var(--color-surface-elevated, var(--color-surface, #2d2d2d))
-  );
-  border: 1px solid
-    var(--vscode-menu-border, var(--color-border-subtle, var(--color-border, #454545)));
-  border-radius: var(--radius-sm, 0);
-  max-height: 240px;
-  overflow-y: auto;
-}
-
-.ui-select__option {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  gap: var(--ui-select-option-gap, 6px);
-  min-height: var(--ui-select-option-height, 26px);
-  padding: var(--ui-select-option-padding, 4px 8px);
-  border-radius: var(--ui-select-option-radius, 0);
-  font-size: var(--font-size-sm);
-  cursor: pointer;
-}
-
-.ui-select__option-check {
-  flex: 0 0 var(--ui-select-option-check-size, 16px);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--ui-select-option-check-size, 16px);
-  color: var(--vscode-menu-foreground, var(--color-text-muted));
-  font-size: 14px;
-}
-
-.ui-select__option--selected .ui-select__option-check {
-  color: var(--vscode-menu-selectionForeground, var(--color-text));
-}
-
-.ui-select__option-label {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  line-height: var(--ui-select-option-line-height, 20px);
-}
-
-.ui-select__option[aria-disabled='true'] {
-  color: var(--color-text-subtle);
-  cursor: default;
-}
-
-.ui-select__option:hover,
-.ui-select__option--highlighted {
-  color: var(--vscode-menu-selectionForeground, var(--color-text));
-  background: var(--vscode-menu-selectionBackground, var(--color-surface-hover));
-}
-
-.ui-select__option--selected {
-  color: var(--vscode-menu-foreground, var(--color-text));
-  background: transparent;
-}
-
-.ui-select__option--selected.ui-select__option--highlighted {
-  color: var(--vscode-menu-selectionForeground, var(--color-text));
-  background: var(--vscode-menu-selectionBackground, var(--color-surface-hover));
-}
-
-.ui-select__native {
-  position: absolute;
-  width: 0;
-  height: 0;
-  padding: 0;
-  margin: 0;
-  opacity: 0;
-  pointer-events: none;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  clip-path: inset(50%);
-  white-space: nowrap;
-  border: 0;
-  appearance: none;
-  -webkit-appearance: none;
-}
-
-.ui-select__trigger:focus {
-  border-color: var(--vscode-focusBorder, var(--color-accent, var(--color-focus-border)));
-}
-
-.ui-select__trigger:focus-visible {
-  outline: 1px solid var(--vscode-focusBorder, var(--color-focus-border));
-  outline-offset: -1px;
-}
-
-.ui-select__option:focus-visible {
-  outline: 1px solid var(--vscode-focusBorder, var(--color-focus-border));
-  outline-offset: -1px;
-}
+.ui-select {
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+  min-width: 0;
+  vertical-align: top;
+}
+
+.ui-select[data-width='default'] {
+  width: var(--ui-select-width-default, 180px);
+}
+
+.ui-select[data-width='wide'] {
+  width: var(--ui-select-width-wide, 260px);
+}
+
+.ui-select[data-width='full'] {
+  width: 100%;
+}
+
+.ui-select__trigger {
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: var(--ui-select-trigger-height, 26px);
+  min-width: 0;
+  padding: 0 28px 0 8px;
+  color: var(--color-input-text, var(--vscode-input-foreground, var(--color-text)));
+  background: var(--color-input-bg, var(--vscode-input-background, var(--color-surface-elevated)));
+  border: 1px solid var(--color-input-border, var(--vscode-input-border, var(--color-border)));
+  border-radius: var(--ui-select-trigger-radius, 0);
+  outline: none;
+  font: inherit;
+  font-size: var(--font-size-sm);
+  text-align: left;
+  cursor: pointer;
+}
+
+.ui-select__trigger:disabled {
+  color: var(--color-text-subtle);
+  cursor: default;
+}
+
+.ui-select__value {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-select__chevron {
+  position: absolute;
+  top: 50%;
+  right: 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-muted);
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+
+.ui-select__chevron .codicon {
+  font-size: 14px;
+}
+
+.ui-select__listbox {
+  position: fixed;
+  z-index: 10000;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  /* Opt in when portaled into a pointer-events:none host. */
+  pointer-events: auto;
+  /* Explicit fallbacks: listbox is often portaled outside [data-theme]. */
+  color: var(--vscode-menu-foreground, var(--color-text-primary, var(--color-text, #cccccc)));
+  background: var(
+    --vscode-menu-background,
+    var(--color-surface-elevated, var(--color-surface, #2d2d2d))
+  );
+  border: 1px solid
+    var(--vscode-menu-border, var(--color-border-subtle, var(--color-border, #454545)));
+  border-radius: var(--radius-sm, 0);
+  max-height: 240px;
+  overflow-y: auto;
+}
+
+.ui-select__option {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--ui-select-option-gap, 6px);
+  min-height: var(--ui-select-option-height, 26px);
+  padding: var(--ui-select-option-padding, 4px 8px);
+  border-radius: var(--ui-select-option-radius, 0);
+  font-size: var(--font-size-sm);
+  cursor: pointer;
+}
+
+.ui-select__option-check {
+  flex: 0 0 var(--ui-select-option-check-size, 16px);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--ui-select-option-check-size, 16px);
+  color: var(--vscode-menu-foreground, var(--color-text-muted));
+  font-size: 14px;
+}
+
+.ui-select__option--selected .ui-select__option-check {
+  color: var(--vscode-menu-selectionForeground, var(--color-text));
+}
+
+.ui-select__option-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: var(--ui-select-option-line-height, 20px);
+}
+
+.ui-select__option[aria-disabled='true'] {
+  color: var(--color-text-subtle);
+  cursor: default;
+}
+
+.ui-select__option:hover,
+.ui-select__option--highlighted {
+  color: var(--vscode-menu-selectionForeground, var(--color-text));
+  background: var(--vscode-menu-selectionBackground, var(--color-surface-hover));
+}
+
+.ui-select__option--selected {
+  color: var(--vscode-menu-foreground, var(--color-text));
+  background: transparent;
+}
+
+.ui-select__option--selected.ui-select__option--highlighted {
+  color: var(--vscode-menu-selectionForeground, var(--color-text));
+  background: var(--vscode-menu-selectionBackground, var(--color-surface-hover));
+}
+
+.ui-select__native {
+  position: absolute;
+  width: 0;
+  height: 0;
+  padding: 0;
+  margin: 0;
+  opacity: 0;
+  pointer-events: none;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+.ui-select__trigger:focus {
+  border-color: var(--vscode-focusBorder, var(--color-accent, var(--color-focus-border)));
+}
+
+.ui-select__trigger:focus-visible {
+  outline: 1px solid var(--vscode-focusBorder, var(--color-focus-border));
+  outline-offset: -1px;
+}
+
+.ui-select__option:focus-visible {
+  outline: 1px solid var(--vscode-focusBorder, var(--color-focus-border));
+  outline-offset: -1px;
+}

package/src/primitives/select/types.ts

@@ -1,18 +1,18 @@
-import type { ReactNode } from 'react';
-
-export interface ParsedOption {
-  value: string;
-  label: ReactNode;
-  disabled?: boolean;
-}
-
-export type ListboxPlacement = 'bottom' | 'top';
-
-export interface OverlayPosition {
-  left: number;
-  maxHeight: number;
-  placement: ListboxPlacement;
-  triggerBottom: number;
-  triggerTop: number;
-  width: number;
-}
+import type { ReactNode } from 'react';
+
+export interface ParsedOption {
+  value: string;
+  label: ReactNode;
+  disabled?: boolean;
+}
+
+export type ListboxPlacement = 'bottom' | 'top';
+
+export interface OverlayPosition {
+  left: number;
+  maxHeight: number;
+  placement: ListboxPlacement;
+  triggerBottom: number;
+  triggerTop: number;
+  width: number;
+}

package/src/primitives/styles.css

@@ -1,6 +1,6 @@
-/* Primitives-only CSS bundle — import without full workbench styles.css */
-@import '@workbench-kit/tokens/styles.css';
-@import '../scrollbars.css';
-@import '@vscode/codicons/dist/codicon.css';
-@import './panel-surface/panel-surface.css';
-@import './primitives.css';
+/* Primitives-only CSS bundle — import without full workbench styles.css */
+@import '@workbench-kit/tokens/styles.css';
+@import '../scrollbars.css';
+@import '@vscode/codicons/dist/codicon.css';
+@import './panel-surface/panel-surface.css';
+@import './primitives.css';