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

package/src/workbench/settings/SectionedPanel.tsx

@@ -1,23 +1,9 @@
-import {
-  Fragment,
-  useEffect,
-  useRef,
-  useState,
-  type ComponentPropsWithRef,
-  type ReactNode,
-} from 'react';
-import { IconButton } from '../../primitives/IconButton';
+import { Fragment, useState, type ComponentPropsWithRef, type ReactNode } from 'react';
+import { IconButton } from '../../primitives/icon-button';
 import { cx } from '../../utils/cx';
 import { WorkbenchNavigationPanel } from './NavigationPanel';
-import {
-  WORKBENCH_SECTIONED_PANEL_SCROLL_SPY_OFFSET,
-  createWorkbenchSectionedPanelIntersectionRootMargin,
-  isWorkbenchSectionedPanelScrollable,
-  resolveWorkbenchSectionedPanelActiveAnchorFromScroll,
-  resolveWorkbenchSectionedPanelScrollTop,
-} from './sectionedPanelScrollSpy';
-
-const PROGRAMMATIC_SCROLL_SETTLE_MS = 400;
+import { WORKBENCH_SECTIONED_PANEL_SCROLL_SPY_OFFSET } from './sectionedPanelScrollSpy';
+import { useSectionScrollSpy } from './useSectionScrollSpy';
 
 export interface WorkbenchSectionedPanelItem {
   anchorId: string;
@@ -41,29 +27,13 @@ export interface WorkbenchSectionedPanelProps extends Omit<
   onSectionNavCollapsedChange?: ((collapsed: boolean) => void) | undefined;
   readOnly?: boolean | undefined;
   scrollSpy?: boolean | 'auto' | undefined;
+  scrollSpyOffset?: number | undefined;
+  scrollSpyScrollBehavior?: ScrollBehavior | undefined;
   sectionNavCollapsed?: boolean | undefined;
   sectionNavCollapsible?: boolean | undefined;
   defaultSectionNavCollapsed?: boolean | undefined;
 }
 
-function findPanelSection(content: HTMLElement, anchorId: string) {
-  return (
-    Array.from(content.children).find(
-      (child): child is HTMLElement => child instanceof HTMLElement && child.id === anchorId,
-    ) ?? null
-  );
-}
-
-function readSectionTop(content: HTMLElement, section: HTMLElement) {
-  if (section.parentElement === content) {
-    return section.offsetTop;
-  }
-
-  const containerRect = content.getBoundingClientRect();
-  const sectionRect = section.getBoundingClientRect();
-  return sectionRect.top - containerRect.top + content.scrollTop;
-}
-
 export function WorkbenchSectionedPanel({
   activeAnchorId,
   ariaLabel,
@@ -77,37 +47,38 @@ export function WorkbenchSectionedPanel({
   onSectionNavCollapsedChange,
   readOnly = false,
   scrollSpy = 'auto',
+  scrollSpyOffset = WORKBENCH_SECTIONED_PANEL_SCROLL_SPY_OFFSET,
+  scrollSpyScrollBehavior = 'smooth',
   sectionNavCollapsed,
-  sectionNavCollapsible,
+  sectionNavCollapsible = true,
   defaultSectionNavCollapsed = false,
   ...props
 }: WorkbenchSectionedPanelProps) {
-  const contentRef = useRef<HTMLDivElement | null>(null);
-  const isProgrammaticScrollRef = useRef(false);
-  const programmaticScrollTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const intersectionObserverRef = useRef<IntersectionObserver | null>(null);
-  const scrollSpyRafRef = useRef<number | null>(null);
-  const trackedActiveAnchorIdRef = useRef<string | undefined>(undefined);
-  const scrollSpyEnabledRef = useRef(false);
-  const [scrollSpyEnabled, setScrollSpyEnabled] = useState(false);
-  const [uncontrolledActiveAnchorId, setUncontrolledActiveAnchorId] = useState<string | undefined>(
-    defaultActiveAnchorId ?? items[0]?.anchorId,
-  );
   const showSectionNav = items.length > 1;
-  const canCollapseSectionNav = showSectionNav && (sectionNavCollapsible ?? true);
+  const anchorOrder = items.map((item) => item.anchorId);
+  const canCollapseSectionNav = showSectionNav && sectionNavCollapsible;
   const [uncontrolledSectionNavCollapsed, setUncontrolledSectionNavCollapsed] = useState(
     defaultSectionNavCollapsed,
   );
   const sectionNavIsCollapsed =
     canCollapseSectionNav && (sectionNavCollapsed ?? uncontrolledSectionNavCollapsed);
-  const anchorOrder = items.map((item) => item.anchorId);
-  const preferredActiveAnchorId = activeAnchorId ?? uncontrolledActiveAnchorId;
-  const resolvedActiveAnchorId =
-    preferredActiveAnchorId && items.some((item) => item.anchorId === preferredActiveAnchorId)
-      ? preferredActiveAnchorId
-      : items[0]?.anchorId;
 
-  trackedActiveAnchorIdRef.current = resolvedActiveAnchorId;
+  const {
+    handleContentScroll,
+    resolvedActiveAnchorId,
+    scrollRef,
+    scrollSpyEnabled,
+    scrollToAnchor,
+  } = useSectionScrollSpy({
+    activeAnchorId,
+    anchorOrder,
+    axis: 'vertical',
+    defaultActiveAnchorId,
+    offset: scrollSpyOffset,
+    onActiveAnchorChange,
+    scrollBehavior: scrollSpyScrollBehavior,
+    scrollSpy,
+  });
 
   const setSectionNavCollapsed = (collapsed: boolean) => {
     if (sectionNavCollapsed === undefined) {
@@ -117,223 +88,6 @@ export function WorkbenchSectionedPanel({
     onSectionNavCollapsedChange?.(collapsed);
   };
 
-  const commitActiveAnchorId = (anchorId: string | undefined) => {
-    if (!anchorId || anchorId === trackedActiveAnchorIdRef.current) {
-      return;
-    }
-
-    trackedActiveAnchorIdRef.current = anchorId;
-
-    if (activeAnchorId === undefined) {
-      setUncontrolledActiveAnchorId(anchorId);
-    }
-
-    onActiveAnchorChange?.(anchorId);
-  };
-
-  const setActiveAnchorId = (anchorId: string | undefined) => {
-    if (!anchorId) return;
-
-    trackedActiveAnchorIdRef.current = anchorId;
-
-    if (activeAnchorId === undefined) {
-      setUncontrolledActiveAnchorId(anchorId);
-    }
-
-    onActiveAnchorChange?.(anchorId);
-  };
-
-  const resolveScrollSpyEnabled = (content: HTMLElement) => {
-    if (scrollSpy === false) return false;
-    if (scrollSpy === true) return true;
-    return isWorkbenchSectionedPanelScrollable({
-      clientHeight: content.clientHeight,
-      scrollHeight: content.scrollHeight,
-    });
-  };
-
-  const updateScrollSpyEnabled = () => {
-    const content = contentRef.current;
-    if (!content) return false;
-
-    const nextEnabled = resolveScrollSpyEnabled(content);
-    scrollSpyEnabledRef.current = nextEnabled;
-    setScrollSpyEnabled(nextEnabled);
-    return nextEnabled;
-  };
-
-  const readSectionPositions = (content: HTMLElement) =>
-    items
-      .map((item) => {
-        const section = findPanelSection(content, item.anchorId);
-        if (!section) return null;
-
-        return {
-          anchorId: item.anchorId,
-          top: readSectionTop(content, section),
-        };
-      })
-      .filter((section): section is { anchorId: string; top: number } => section !== null);
-
-  const applyScrollSpyActiveAnchor = () => {
-    scrollSpyRafRef.current = null;
-
-    const content = contentRef.current;
-    if (
-      !content ||
-      items.length === 0 ||
-      !scrollSpyEnabledRef.current ||
-      isProgrammaticScrollRef.current
-    ) {
-      return;
-    }
-
-    const nextActive = resolveWorkbenchSectionedPanelActiveAnchorFromScroll({
-      anchorOrder,
-      clientHeight: content.clientHeight,
-      fallbackAnchorId: items[0]?.anchorId,
-      scrollHeight: content.scrollHeight,
-      scrollTop: content.scrollTop,
-      sectionPositions: readSectionPositions(content),
-    });
-
-    commitActiveAnchorId(nextActive);
-  };
-
-  const scheduleScrollSpyUpdate = () => {
-    if (scrollSpyRafRef.current !== null) return;
-
-    scrollSpyRafRef.current = requestAnimationFrame(applyScrollSpyActiveAnchor);
-  };
-
-  const handleIntersection = () => {
-    if (items.length === 0 || !scrollSpyEnabledRef.current || isProgrammaticScrollRef.current) {
-      return;
-    }
-
-    scheduleScrollSpyUpdate();
-  };
-
-  const disconnectIntersectionObserver = () => {
-    intersectionObserverRef.current?.disconnect();
-    intersectionObserverRef.current = null;
-  };
-
-  const setupIntersectionObserver = () => {
-    const content = contentRef.current;
-    if (!content || typeof IntersectionObserver === 'undefined' || !scrollSpyEnabledRef.current) {
-      disconnectIntersectionObserver();
-      return;
-    }
-
-    disconnectIntersectionObserver();
-
-    const observer = new IntersectionObserver(handleIntersection, {
-      root: content,
-      rootMargin: createWorkbenchSectionedPanelIntersectionRootMargin(
-        WORKBENCH_SECTIONED_PANEL_SCROLL_SPY_OFFSET,
-      ),
-      threshold: [0],
-    });
-
-    for (const item of items) {
-      const section = findPanelSection(content, item.anchorId);
-      if (section) {
-        observer.observe(section);
-      }
-    }
-
-    intersectionObserverRef.current = observer;
-  };
-
-  const refreshScrollSpy = () => {
-    const enabled = updateScrollSpyEnabled();
-    if (enabled) {
-      setupIntersectionObserver();
-      scheduleScrollSpyUpdate();
-      return;
-    }
-
-    disconnectIntersectionObserver();
-  };
-
-  const scrollToSection = (anchorId: string) => {
-    const content = contentRef.current;
-    if (!content) {
-      setActiveAnchorId(anchorId);
-      return;
-    }
-
-    const section = findPanelSection(content, anchorId);
-    if (!section) {
-      setActiveAnchorId(anchorId);
-      return;
-    }
-
-    setActiveAnchorId(anchorId);
-
-    if (!scrollSpyEnabledRef.current) {
-      return;
-    }
-
-    const targetTop = resolveWorkbenchSectionedPanelScrollTop({
-      sectionTop: readSectionTop(content, section),
-    });
-
-    isProgrammaticScrollRef.current = true;
-    content.scrollTo({ top: targetTop });
-
-    if (programmaticScrollTimerRef.current) {
-      clearTimeout(programmaticScrollTimerRef.current);
-    }
-
-    programmaticScrollTimerRef.current = setTimeout(() => {
-      isProgrammaticScrollRef.current = false;
-      scheduleScrollSpyUpdate();
-    }, PROGRAMMATIC_SCROLL_SETTLE_MS);
-  };
-
-  useEffect(() => {
-    const content = contentRef.current;
-    if (!content) return undefined;
-
-    refreshScrollSpy();
-
-    const resizeObserver =
-      typeof ResizeObserver === 'undefined'
-        ? null
-        : new ResizeObserver(() => {
-            refreshScrollSpy();
-          });
-    resizeObserver?.observe(content);
-
-    return () => {
-      resizeObserver?.disconnect();
-      disconnectIntersectionObserver();
-
-      if (scrollSpyRafRef.current !== null) {
-        cancelAnimationFrame(scrollSpyRafRef.current);
-        scrollSpyRafRef.current = null;
-      }
-    };
-  }, [items, scrollSpy]);
-
-  useEffect(
-    () => () => {
-      if (programmaticScrollTimerRef.current) {
-        clearTimeout(programmaticScrollTimerRef.current);
-      }
-
-      if (scrollSpyRafRef.current !== null) {
-        cancelAnimationFrame(scrollSpyRafRef.current);
-        scrollSpyRafRef.current = null;
-      }
-
-      disconnectIntersectionObserver();
-    },
-    [],
-  );
-
   const sectionNavLinks = items.map((item) => {
     const active = resolvedActiveAnchorId === item.anchorId;
 
@@ -346,7 +100,7 @@ export function WorkbenchSectionedPanel({
         href={`#${item.anchorId}`}
         onClick={(event) => {
           event.preventDefault();
-          scrollToSection(item.anchorId);
+          scrollToAnchor(item.anchorId);
         }}
       >
         <span>{item.title}</span>
@@ -356,24 +110,24 @@ export function WorkbenchSectionedPanel({
   });
 
   return (
-    <div className="ui-workbench-sectioned-panel-host">
+    <div className="ui-workbench-sectioned-panel-root">
       <WorkbenchNavigationPanel
         className={cx('ui-workbench-sectioned-panel', className)}
-        content={
-          <div
-            ref={contentRef}
-            className="ui-workbench-sectioned-panel__scroll"
-            onScroll={scheduleScrollSpyUpdate}
-          >
-            {items.map((item) => (
-              <Fragment key={item.anchorId}>{item.render()}</Fragment>
-            ))}
-          </div>
-        }
+        contentScrollbars="overlay"
+        content={items.map((item) => (
+          <Fragment key={item.anchorId}>{item.render()}</Fragment>
+        ))}
+        contentScrollProps={{
+          className: 'ui-workbench-sectioned-panel__scroll',
+          onScroll: handleContentScroll,
+          ref: scrollRef,
+        }}
         contentClassName={cx('ui-workbench-sectioned-panel__body', contentClassName)}
+        contentScrollGutter="auto"
         data-nav-collapsed={sectionNavIsCollapsed ? 'true' : undefined}
         data-readonly={readOnly ? 'true' : undefined}
         data-scroll-spy={scrollSpyEnabled ? 'true' : 'false'}
+        navScrollGutter="auto"
         nav={
           showSectionNav && !sectionNavIsCollapsed ? (
             <div className="ui-workbench-sectioned-panel__nav-shell">

package/src/workbench/settings/StructuredDataForm.tsx

@@ -1,21 +1,24 @@
 export * from './structuredDataSchema';
 
 import { useId, useMemo, useState, type FormEvent, type ReactNode } from 'react';
-import { Button } from '../../primitives/Button';
-import { Checkbox } from '../../primitives/Checkbox';
-import { EmptyState } from '../../primitives/EmptyState';
+import { Button } from '../../primitives/button';
+import { Checkbox } from '../../primitives/checkbox';
+import { EmptyState } from '../../primitives/empty-state';
 import { WorkbenchStructuredDataTableView } from './StructuredDataTableView';
-import { Field } from '../../primitives/Field';
-import { IconButton } from '../../primitives/IconButton';
-import { Select } from '../../primitives/Select';
-import { TextArea } from '../../primitives/TextArea';
-import { TextInput } from '../../primitives/TextInput';
+import { Field } from '../../primitives/field';
+import { IconButton } from '../../primitives/icon-button';
+import { Select } from '../../primitives/select';
+import { TextArea } from '../../primitives/text-area';
+import { TextInput } from '../../primitives/text-input';
+import { SegmentedControl } from '../../primitives/workbench-editor';
+import { WorkbenchColorInput } from '../../layout/WorkbenchPropertyPanel';
 import { cx } from '../../utils/cx';
 import { WorkbenchSectionedPanel } from './SectionedPanel';
 import {
   coerceWorkbenchStructuredDataFormFieldValue,
   coerceWorkbenchStructuredDataSchemaFieldValue,
   booleanWorkbenchStructuredDataSchemaFieldValue,
+  buildWorkbenchStructuredDataSchemaSelectOptions,
   formatWorkbenchStructuredDataSchemaLabel,
   getWorkbenchStructuredDataFormErrors,
   getWorkbenchStructuredDataSchemaFieldControl,
@@ -354,17 +357,35 @@ export function WorkbenchStructuredDataSchemaFieldInput({
   checkboxClassName,
   className,
   definition,
+  fieldErrorId,
   fieldPath,
+  invalid = false,
+  onBlur,
   onValueChange,
   readOnly = false,
   removeTextArrayLabel,
   textareaClassName,
   textArrayClassName,
+  validationMessage,
   value,
 }: WorkbenchStructuredDataSchemaFieldInputProps) {
   const control = getWorkbenchStructuredDataSchemaFieldControl(definition);
   const label = definition?.title ?? formatWorkbenchStructuredDataSchemaLabel(fieldPath);
   const stringValue = stringifyWorkbenchStructuredDataSchemaFieldValue(value, definition);
+  const controlClassName = cx(
+    className,
+    invalid && 'ui-workbench-structured-data-schema-field-input--invalid',
+  );
+  const describedBy = fieldErrorId && validationMessage ? fieldErrorId : fieldErrorId || undefined;
+  const min = definition?.minimum ?? definition?.min;
+  const max = definition?.maximum ?? definition?.max;
+  const selectOptions = buildWorkbenchStructuredDataSchemaSelectOptions(definition);
+
+  const emitValueChange = (nextValue: unknown) => {
+    if (!readOnly) {
+      onValueChange?.(nextValue);
+    }
+  };
 
   if (definition?.type === 'array' && definition.items?.type === 'string') {
     return (
@@ -381,23 +402,56 @@ export function WorkbenchStructuredDataSchemaFieldInput({
     );
   }
 
+  if (control === 'color') {
+    return (
+      <WorkbenchColorInput
+        aria-describedby={describedBy}
+        aria-invalid={invalid || undefined}
+        className={controlClassName}
+        disabled={readOnly}
+        fallbackValue="#000000"
+        value={stringValue || '#000000'}
+        onValueChange={(nextValue) => emitValueChange(nextValue)}
+      />
+    );
+  }
+
+  if (control === 'radio') {
+    return (
+      <SegmentedControl
+        ariaLabel={label}
+        options={selectOptions.map((option) => ({
+          label: option.label,
+          value: option.value,
+        }))}
+        value={stringValue}
+        onChange={(nextValue) =>
+          emitValueChange(coerceWorkbenchStructuredDataSchemaFieldValue(nextValue, definition))
+        }
+      />
+    );
+  }
+
   if (control === 'select') {
     return (
       <Select
+        aria-describedby={describedBy}
+        aria-invalid={invalid || undefined}
         aria-label={label}
-        className={className}
+        className={controlClassName}
         controlWidth="full"
         disabled={readOnly}
         value={stringValue}
+        onBlur={onBlur}
         onChange={(event) =>
-          onValueChange?.(
+          emitValueChange(
             coerceWorkbenchStructuredDataSchemaFieldValue(event.currentTarget.value, definition),
           )
         }
       >
-        {(definition?.enum ?? []).map((option) => (
-          <option key={String(option)} value={String(option)}>
-            {String(option)}
+        {selectOptions.map((option) => (
+          <option key={option.value} disabled={option.disabled} value={option.value}>
+            {option.label}
           </option>
         ))}
       </Select>
@@ -407,8 +461,10 @@ export function WorkbenchStructuredDataSchemaFieldInput({
   if (control === 'textarea') {
     return (
       <TextArea
+        aria-describedby={describedBy}
+        aria-invalid={invalid || undefined}
         aria-label={label}
-        className={cx(className, textareaClassName)}
+        className={cx(controlClassName, textareaClassName)}
         controlWidth="full"
         monospace={definition?.type === 'array' || definition?.type === 'object'}
         placeholder={definition?.ui?.placeholder}
@@ -416,12 +472,11 @@ export function WorkbenchStructuredDataSchemaFieldInput({
         resize="vertical"
         rows={definition?.ui?.rows ?? (definition?.type === 'array' ? 3 : 4)}
         value={stringValue}
+        onBlur={onBlur}
         onChange={(event) => {
-          if (!readOnly) {
-            onValueChange?.(
-              coerceWorkbenchStructuredDataSchemaFieldValue(event.currentTarget.value, definition),
-            );
-          }
+          emitValueChange(
+            coerceWorkbenchStructuredDataSchemaFieldValue(event.currentTarget.value, definition),
+          );
         }}
       />
     );
@@ -439,21 +494,46 @@ export function WorkbenchStructuredDataSchemaFieldInput({
     );
   }
 
+  if (control === 'date') {
+    return (
+      <TextInput
+        aria-describedby={describedBy}
+        aria-invalid={invalid || undefined}
+        aria-label={label}
+        className={controlClassName}
+        controlWidth="full"
+        placeholder={definition?.ui?.placeholder}
+        readOnly={readOnly}
+        type="date"
+        value={stringValue}
+        onBlur={onBlur}
+        onChange={(event) => {
+          emitValueChange(
+            coerceWorkbenchStructuredDataSchemaFieldValue(event.currentTarget.value, definition),
+          );
+        }}
+      />
+    );
+  }
+
   return (
     <TextInput
+      aria-describedby={describedBy}
+      aria-invalid={invalid || undefined}
       aria-label={label}
-      className={className}
+      className={controlClassName}
       controlWidth="full"
+      max={control === 'number' ? max : undefined}
+      min={control === 'number' ? min : undefined}
       placeholder={definition?.ui?.placeholder}
       readOnly={readOnly}
-      type={control === 'date' || control === 'number' ? control : 'text'}
+      type={control === 'number' ? control : 'text'}
       value={stringValue}
+      onBlur={onBlur}
       onChange={(event) => {
-        if (!readOnly) {
-          onValueChange?.(
-            coerceWorkbenchStructuredDataSchemaFieldValue(event.currentTarget.value, definition),
-          );
-        }
+        emitValueChange(
+          coerceWorkbenchStructuredDataSchemaFieldValue(event.currentTarget.value, definition),
+        );
       }}
     />
   );