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

package/src/layout/sidebar/WorkbenchSidebarSectionStack.tsx

@@ -1,165 +1,165 @@
-import type { ComponentPropsWithRef, ReactNode } from 'react';
-import { useCallback, useEffect, useState } from 'react';
-import './sidebar-section-stack.css';
-import './sidebar-section.css';
-import { cx } from '../../utils/cx';
-import {
-  WorkbenchSidebarSection,
-  type WorkbenchSidebarSectionProps,
-} from './WorkbenchSidebarActions';
-
-export interface WorkbenchSidebarSectionStackItem extends Pick<
-  WorkbenchSidebarSectionProps,
-  | 'actions'
-  | 'badge'
-  | 'className'
-  | 'collapsible'
-  | 'count'
-  | 'defaultCollapsed'
-  | 'nestListItems'
-  | 'title'
-> {
-  children: ReactNode;
-  id: string;
-}
-
-export interface WorkbenchSidebarSectionStackProps extends Omit<
-  ComponentPropsWithRef<'div'>,
-  'children'
-> {
-  collapsedBehavior?: 'dock' | 'in-flow';
-  items: readonly WorkbenchSidebarSectionStackItem[];
-}
-
-function buildInitialCollapsedState(
-  items: readonly WorkbenchSidebarSectionStackItem[],
-): Record<string, boolean> {
-  return Object.fromEntries(items.map((item) => [item.id, item.defaultCollapsed ?? false]));
-}
-
-function resolveCollapsedDockPlacement(
-  expandedCount: number,
-  collapsedCount: number,
-): 'top' | 'bottom' | null {
-  if (collapsedCount === 0) {
-    return null;
-  }
-
-  return expandedCount === 0 ? 'top' : 'bottom';
-}
-
-export function WorkbenchSidebarSectionStack({
-  className,
-  collapsedBehavior = 'in-flow',
-  items,
-  ...props
-}: WorkbenchSidebarSectionStackProps) {
-  const [collapsedById, setCollapsedById] = useState(() => buildInitialCollapsedState(items));
-
-  useEffect(() => {
-    setCollapsedById((current) => {
-      const next = { ...current };
-      let changed = false;
-
-      for (const item of items) {
-        if (!(item.id in next)) {
-          next[item.id] = item.defaultCollapsed ?? false;
-          changed = true;
-        }
-      }
-
-      for (const id of Object.keys(next)) {
-        if (!items.some((item) => item.id === id)) {
-          delete next[id];
-          changed = true;
-        }
-      }
-
-      return changed ? next : current;
-    });
-  }, [items]);
-
-  const setCollapsed = useCallback((id: string, collapsed: boolean) => {
-    setCollapsedById((current) => {
-      if (current[id] === collapsed) {
-        return current;
-      }
-
-      return { ...current, [id]: collapsed };
-    });
-  }, []);
-
-  const expandedItems = items.filter((item) => {
-    if (item.collapsible === false) {
-      return true;
-    }
-
-    return !collapsedById[item.id];
-  });
-
-  const collapsedItems = items.filter(
-    (item) => item.collapsible !== false && collapsedById[item.id],
-  );
-
-  const dockPlacement = resolveCollapsedDockPlacement(expandedItems.length, collapsedItems.length);
-  const renderInFlow = collapsedBehavior === 'in-flow';
-
-  const renderSection = (
-    item: WorkbenchSidebarSectionStackItem,
-    options: { collapsed: boolean; docked: boolean },
-  ) => (
-    <WorkbenchSidebarSection
-      key={item.id}
-      actions={item.actions}
-      badge={item.badge}
-      className={cx(
-        item.className,
-        options.docked && 'ui-workbench-sidebar-section--collapsed-dock',
-      )}
-      collapsible={item.collapsible}
-      collapsed={options.collapsed}
-      count={item.count}
-      id={item.id}
-      nestListItems={item.nestListItems}
-      title={item.title}
-      onCollapsedChange={(nextCollapsed) => {
-        setCollapsed(item.id, nextCollapsed);
-      }}
-    >
-      {options.collapsed ? null : item.children}
-    </WorkbenchSidebarSection>
-  );
-
-  return (
-    <div className={cx('ui-workbench-sidebar-section-stack', className)} {...props}>
-      {!renderInFlow && dockPlacement === 'top' ? (
-        <div
-          aria-label="Collapsed sections"
-          className="ui-workbench-sidebar-section-stack__collapsed"
-          role="group"
-        >
-          {collapsedItems.map((item) => renderSection(item, { collapsed: true, docked: true }))}
-        </div>
-      ) : null}
-      <div className="ui-workbench-sidebar-section-stack__expanded ui-workbench-scrollbar">
-        {renderInFlow
-          ? items.map((item) =>
-              renderSection(item, {
-                collapsed: item.collapsible !== false && collapsedById[item.id],
-                docked: false,
-              }),
-            )
-          : expandedItems.map((item) => renderSection(item, { collapsed: false, docked: false }))}
-      </div>
-      {!renderInFlow && dockPlacement === 'bottom' ? (
-        <div
-          aria-label="Collapsed sections"
-          className="ui-workbench-sidebar-section-stack__collapsed"
-          role="group"
-        >
-          {collapsedItems.map((item) => renderSection(item, { collapsed: true, docked: true }))}
-        </div>
-      ) : null}
-    </div>
-  );
-}
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+import { useCallback, useEffect, useState } from 'react';
+import './sidebar-section-stack.css';
+import './sidebar-section.css';
+import { cx } from '../../utils/cx';
+import {
+  WorkbenchSidebarSection,
+  type WorkbenchSidebarSectionProps,
+} from './WorkbenchSidebarActions';
+
+export interface WorkbenchSidebarSectionStackItem extends Pick<
+  WorkbenchSidebarSectionProps,
+  | 'actions'
+  | 'badge'
+  | 'className'
+  | 'collapsible'
+  | 'count'
+  | 'defaultCollapsed'
+  | 'nestListItems'
+  | 'title'
+> {
+  children: ReactNode;
+  id: string;
+}
+
+export interface WorkbenchSidebarSectionStackProps extends Omit<
+  ComponentPropsWithRef<'div'>,
+  'children'
+> {
+  collapsedBehavior?: 'dock' | 'in-flow';
+  items: readonly WorkbenchSidebarSectionStackItem[];
+}
+
+function buildInitialCollapsedState(
+  items: readonly WorkbenchSidebarSectionStackItem[],
+): Record<string, boolean> {
+  return Object.fromEntries(items.map((item) => [item.id, item.defaultCollapsed ?? false]));
+}
+
+function resolveCollapsedDockPlacement(
+  expandedCount: number,
+  collapsedCount: number,
+): 'top' | 'bottom' | null {
+  if (collapsedCount === 0) {
+    return null;
+  }
+
+  return expandedCount === 0 ? 'top' : 'bottom';
+}
+
+export function WorkbenchSidebarSectionStack({
+  className,
+  collapsedBehavior = 'in-flow',
+  items,
+  ...props
+}: WorkbenchSidebarSectionStackProps) {
+  const [collapsedById, setCollapsedById] = useState(() => buildInitialCollapsedState(items));
+
+  useEffect(() => {
+    setCollapsedById((current) => {
+      const next = { ...current };
+      let changed = false;
+
+      for (const item of items) {
+        if (!(item.id in next)) {
+          next[item.id] = item.defaultCollapsed ?? false;
+          changed = true;
+        }
+      }
+
+      for (const id of Object.keys(next)) {
+        if (!items.some((item) => item.id === id)) {
+          delete next[id];
+          changed = true;
+        }
+      }
+
+      return changed ? next : current;
+    });
+  }, [items]);
+
+  const setCollapsed = useCallback((id: string, collapsed: boolean) => {
+    setCollapsedById((current) => {
+      if (current[id] === collapsed) {
+        return current;
+      }
+
+      return { ...current, [id]: collapsed };
+    });
+  }, []);
+
+  const expandedItems = items.filter((item) => {
+    if (item.collapsible === false) {
+      return true;
+    }
+
+    return !collapsedById[item.id];
+  });
+
+  const collapsedItems = items.filter(
+    (item) => item.collapsible !== false && collapsedById[item.id],
+  );
+
+  const dockPlacement = resolveCollapsedDockPlacement(expandedItems.length, collapsedItems.length);
+  const renderInFlow = collapsedBehavior === 'in-flow';
+
+  const renderSection = (
+    item: WorkbenchSidebarSectionStackItem,
+    options: { collapsed: boolean; docked: boolean },
+  ) => (
+    <WorkbenchSidebarSection
+      key={item.id}
+      actions={item.actions}
+      badge={item.badge}
+      className={cx(
+        item.className,
+        options.docked && 'ui-workbench-sidebar-section--collapsed-dock',
+      )}
+      collapsible={item.collapsible}
+      collapsed={options.collapsed}
+      count={item.count}
+      id={item.id}
+      nestListItems={item.nestListItems}
+      title={item.title}
+      onCollapsedChange={(nextCollapsed) => {
+        setCollapsed(item.id, nextCollapsed);
+      }}
+    >
+      {options.collapsed ? null : item.children}
+    </WorkbenchSidebarSection>
+  );
+
+  return (
+    <div className={cx('ui-workbench-sidebar-section-stack', className)} {...props}>
+      {!renderInFlow && dockPlacement === 'top' ? (
+        <div
+          aria-label="Collapsed sections"
+          className="ui-workbench-sidebar-section-stack__collapsed"
+          role="group"
+        >
+          {collapsedItems.map((item) => renderSection(item, { collapsed: true, docked: true }))}
+        </div>
+      ) : null}
+      <div className="ui-workbench-sidebar-section-stack__expanded ui-workbench-scrollbar">
+        {renderInFlow
+          ? items.map((item) =>
+              renderSection(item, {
+                collapsed: item.collapsible !== false && collapsedById[item.id],
+                docked: false,
+              }),
+            )
+          : expandedItems.map((item) => renderSection(item, { collapsed: false, docked: false }))}
+      </div>
+      {!renderInFlow && dockPlacement === 'bottom' ? (
+        <div
+          aria-label="Collapsed sections"
+          className="ui-workbench-sidebar-section-stack__collapsed"
+          role="group"
+        >
+          {collapsedItems.map((item) => renderSection(item, { collapsed: true, docked: true }))}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/layout/sidebar/index.css

@@ -1,5 +1,5 @@
-/* layout/sidebar feature styles */
-@import './sidebar-view.css';
-@import './sidebar-chrome.css';
-@import './sidebar-section-stack.css';
-@import './sidebar-section.css';
+/* layout/sidebar feature styles */
+@import './sidebar-view.css';
+@import './sidebar-chrome.css';
+@import './sidebar-section-stack.css';
+@import './sidebar-section.css';

package/src/layout/sidebar/index.ts

@@ -1,55 +1,55 @@
-export { SideBarViewTitleMenu } from './SideBarViewTitleMenu';
-export type { SideBarViewTitleMenuProps } from './SideBarViewTitleMenu';
-export {
-  SideBarViewFrame,
-  SideBarHeaderControl,
-  SideBarList,
-  SideBarListItem,
-  SideBarRow,
-  SideBarScrollSpacer,
-  sideBarTreeDepthStyle,
-} from './SideBarViewFrame';
-export type {
-  SideBarHeaderControlProps,
-  SideBarListItemProps,
-  SideBarListProps,
-  SideBarRowProps,
-  SideBarScrollSpacerProps,
-  SideBarViewFrameProps,
-} from './SideBarViewFrame';
-export { SidebarActionIconBar } from './SidebarActionIconBar';
-export { SidebarSlotChrome } from './SidebarSlotChrome';
-export type { SidebarSlotChromeProps } from './SidebarSlotChrome';
-export type {
-  SidebarActionIconBarProps,
-  SidebarActionIconDescriptor,
-} from './SidebarActionIconBar';
-export { SideBarViewTabStrip } from './SideBarViewTabStrip';
-export type { SideBarViewTabDescriptor, SideBarViewTabStripProps } from './SideBarViewTabStrip';
-export { SidebarToolbar } from './SidebarToolbar';
-export type { SidebarToolbarProps } from './SidebarToolbar';
-export {
-  WorkbenchActionList,
-  WorkbenchActionListItem,
-  WorkbenchSidebarSection,
-  WorkbenchSidebarSectionHeader,
-} from './WorkbenchSidebarActions';
-export type {
-  WorkbenchActionItem,
-  WorkbenchActionListItemProps,
-  WorkbenchActionListProps,
-  WorkbenchActionStatus,
-  WorkbenchSidebarSectionHeaderProps,
-  WorkbenchSidebarSectionProps,
-} from './WorkbenchSidebarActions';
-export { useSidebarSectionBaseDepth } from './SidebarSectionNestingContext';
-export { WorkbenchSidebarSectionStack } from './WorkbenchSidebarSectionStack';
-export type {
-  WorkbenchSidebarSectionStackItem,
-  WorkbenchSidebarSectionStackProps,
-} from './WorkbenchSidebarSectionStack';
-export { WorkbenchActionSidebar } from './WorkbenchActionSidebar';
-export type {
-  WorkbenchActionSidebarItem,
-  WorkbenchActionSidebarProps,
-} from './WorkbenchActionSidebar';
+export { SideBarViewTitleMenu } from './SideBarViewTitleMenu';
+export type { SideBarViewTitleMenuProps } from './SideBarViewTitleMenu';
+export {
+  SideBarViewFrame,
+  SideBarHeaderControl,
+  SideBarList,
+  SideBarListItem,
+  SideBarRow,
+  SideBarScrollSpacer,
+  sideBarTreeDepthStyle,
+} from './SideBarViewFrame';
+export type {
+  SideBarHeaderControlProps,
+  SideBarListItemProps,
+  SideBarListProps,
+  SideBarRowProps,
+  SideBarScrollSpacerProps,
+  SideBarViewFrameProps,
+} from './SideBarViewFrame';
+export { SidebarActionIconBar } from './SidebarActionIconBar';
+export { SidebarSlotChrome } from './SidebarSlotChrome';
+export type { SidebarSlotChromeProps } from './SidebarSlotChrome';
+export type {
+  SidebarActionIconBarProps,
+  SidebarActionIconDescriptor,
+} from './SidebarActionIconBar';
+export { SideBarViewTabStrip } from './SideBarViewTabStrip';
+export type { SideBarViewTabDescriptor, SideBarViewTabStripProps } from './SideBarViewTabStrip';
+export { SidebarToolbar } from './SidebarToolbar';
+export type { SidebarToolbarProps } from './SidebarToolbar';
+export {
+  WorkbenchActionList,
+  WorkbenchActionListItem,
+  WorkbenchSidebarSection,
+  WorkbenchSidebarSectionHeader,
+} from './WorkbenchSidebarActions';
+export type {
+  WorkbenchActionItem,
+  WorkbenchActionListItemProps,
+  WorkbenchActionListProps,
+  WorkbenchActionStatus,
+  WorkbenchSidebarSectionHeaderProps,
+  WorkbenchSidebarSectionProps,
+} from './WorkbenchSidebarActions';
+export { useSidebarSectionBaseDepth } from './SidebarSectionNestingContext';
+export { WorkbenchSidebarSectionStack } from './WorkbenchSidebarSectionStack';
+export type {
+  WorkbenchSidebarSectionStackItem,
+  WorkbenchSidebarSectionStackProps,
+} from './WorkbenchSidebarSectionStack';
+export { WorkbenchActionSidebar } from './WorkbenchActionSidebar';
+export type {
+  WorkbenchActionSidebarItem,
+  WorkbenchActionSidebarProps,
+} from './WorkbenchActionSidebar';

package/src/layout/sidebar/sidebar-chrome.css

@@ -1,95 +1,95 @@
-.ui-sidebar-toolbar {
-  min-width: 0;
-}
-
-.ui-sidebar-action-icon-bar {
-  flex-shrink: 0;
-  gap: var(--shell-spacing-inline-xs, 2px);
-}
-
-.ui-sidebar-view-tab-strip.ui-sidebar-action-icon-bar,
-.ui-sidebar-view-tab-strip .ui-sidebar-toolbar {
-  width: 100%;
-  justify-content: flex-start;
-}
-
-.ui-sidebar-action-icon-bar__item {
-  display: inline-flex;
-}
-
-.ui-sidebar-action-icon-bar__item-host {
-  position: relative;
-  display: inline-flex;
-}
-
-.ui-sidebar-action-icon-bar__item-host--reorderable {
-  cursor: grab;
-}
-
-.ui-sidebar-action-icon-bar__item-host--reorderable:active {
-  cursor: grabbing;
-}
-
-.ui-sidebar-action-icon-bar__item-host--dragging {
-  opacity: 0.45;
-}
-
-.ui-sidebar-action-icon-bar__button {
-  position: relative;
-}
-
-.ui-sidebar-action-icon-bar__drop-indicator {
-  position: absolute;
-  top: 6px;
-  bottom: 6px;
-  z-index: 2;
-  width: 2px;
-  border-radius: 1px;
-  background: var(--vscode-focusBorder, var(--color-focus-border, var(--color-accent, #2f81f7)));
-  pointer-events: none;
-}
-
-.ui-sidebar-action-icon-bar__drop-indicator--before {
-  left: 0;
-  transform: translateX(-50%);
-}
-
-.ui-sidebar-action-icon-bar__drop-indicator--after {
-  right: 0;
-  transform: translateX(50%);
-}
-
-.ui-sidebar-action-icon-bar__button--active.ui-icon-button {
-  color: var(--shell-color-text, var(--color-text));
-  background: var(--shell-color-list-active, var(--color-list-active, rgba(255, 255, 255, 0.08)));
-}
-
-.ui-view-empty-state {
-  margin: 0;
-  padding: 12px;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-sm);
-}
-
-/* Sole empty/loading content should sit in the panel viewport center, not top-left. */
-.ui-sidebar-view__body:has(> .ui-panel-centered-state:only-child),
-.ui-panel-body:has(> .ui-panel-centered-state:only-child) {
-  display: flex;
-  flex-direction: column;
-}
-
-.ui-sidebar-view__body > .ui-panel-centered-state:only-child,
-.ui-panel-body > .ui-panel-centered-state:only-child {
-  flex: 1 1 auto;
-  min-height: 100%;
-}
-
-.ui-sidebar-view__body > .ui-view-empty-state:only-child,
-.ui-panel-body > .ui-view-empty-state:only-child,
-.ui-sidebar-view__body > .ui-panel-loading:only-child,
-.ui-panel-body > .ui-panel-loading:only-child {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-}
+.ui-sidebar-toolbar {
+  min-width: 0;
+}
+
+.ui-sidebar-action-icon-bar {
+  flex-shrink: 0;
+  gap: var(--shell-spacing-inline-xs, 2px);
+}
+
+.ui-sidebar-view-tab-strip.ui-sidebar-action-icon-bar,
+.ui-sidebar-view-tab-strip .ui-sidebar-toolbar {
+  width: 100%;
+  justify-content: flex-start;
+}
+
+.ui-sidebar-action-icon-bar__item {
+  display: inline-flex;
+}
+
+.ui-sidebar-action-icon-bar__item-host {
+  position: relative;
+  display: inline-flex;
+}
+
+.ui-sidebar-action-icon-bar__item-host--reorderable {
+  cursor: grab;
+}
+
+.ui-sidebar-action-icon-bar__item-host--reorderable:active {
+  cursor: grabbing;
+}
+
+.ui-sidebar-action-icon-bar__item-host--dragging {
+  opacity: 0.45;
+}
+
+.ui-sidebar-action-icon-bar__button {
+  position: relative;
+}
+
+.ui-sidebar-action-icon-bar__drop-indicator {
+  position: absolute;
+  top: 6px;
+  bottom: 6px;
+  z-index: 2;
+  width: 2px;
+  border-radius: 1px;
+  background: var(--vscode-focusBorder, var(--color-focus-border, var(--color-accent, #2f81f7)));
+  pointer-events: none;
+}
+
+.ui-sidebar-action-icon-bar__drop-indicator--before {
+  left: 0;
+  transform: translateX(-50%);
+}
+
+.ui-sidebar-action-icon-bar__drop-indicator--after {
+  right: 0;
+  transform: translateX(50%);
+}
+
+.ui-sidebar-action-icon-bar__button--active.ui-icon-button {
+  color: var(--shell-color-text, var(--color-text));
+  background: var(--shell-color-list-active, var(--color-list-active, rgba(255, 255, 255, 0.08)));
+}
+
+.ui-view-empty-state {
+  margin: 0;
+  padding: 12px;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+}
+
+/* Sole empty/loading content should sit in the panel viewport center, not top-left. */
+.ui-sidebar-view__body:has(> .ui-panel-centered-state:only-child),
+.ui-panel-body:has(> .ui-panel-centered-state:only-child) {
+  display: flex;
+  flex-direction: column;
+}
+
+.ui-sidebar-view__body > .ui-panel-centered-state:only-child,
+.ui-panel-body > .ui-panel-centered-state:only-child {
+  flex: 1 1 auto;
+  min-height: 100%;
+}
+
+.ui-sidebar-view__body > .ui-view-empty-state:only-child,
+.ui-panel-body > .ui-view-empty-state:only-child,
+.ui-sidebar-view__body > .ui-panel-loading:only-child,
+.ui-panel-body > .ui-panel-loading:only-child {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}