@dxos/react-ui 0.13.0 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "Low-level React components for DXOS, applying a theme to a core group of primitives",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -297,17 +297,17 @@
     "i18next": "^21.10.0",
     "react-error-boundary": "^4.0.13",
     "react-i18next": "^11.18.6",
-    "@dxos/async": "0.13.0",
-    "@dxos/effect": "0.13.0",
-    "@dxos/i18n": "0.13.0",
-    "@dxos/invariant": "0.13.0",
-    "@dxos/lit-ui": "0.13.0",
-    "@dxos/log": "0.13.0",
-    "@dxos/react-error-boundary": "0.13.0",
-    "@dxos/react-focus": "0.13.0",
-    "@dxos/react-hooks": "0.13.0",
-    "@dxos/ui-types": "0.13.0",
-    "@dxos/util": "0.13.0"
+    "@dxos/async": "0.14.0",
+    "@dxos/i18n": "0.14.0",
+    "@dxos/invariant": "0.14.0",
+    "@dxos/lit-ui": "0.14.0",
+    "@dxos/effect": "0.14.0",
+    "@dxos/log": "0.14.0",
+    "@dxos/react-error-boundary": "0.14.0",
+    "@dxos/react-focus": "0.14.0",
+    "@dxos/react-hooks": "0.14.0",
+    "@dxos/ui-types": "0.14.0",
+    "@dxos/util": "0.14.0"
   },
   "devDependencies": {
     "@effect/atom-react": "4.0.0",
@@ -323,16 +323,16 @@
     "react-aria-components": "^1.17.0",
     "react-dom": "~19.2.7",
     "vite": "^8.2.2",
-    "@dxos/random": "0.13.0",
-    "@dxos/ui-theme": "0.13.0",
-    "@dxos/util": "0.13.0"
+    "@dxos/random": "0.14.0",
+    "@dxos/ui-theme": "0.14.0",
+    "@dxos/util": "0.14.0"
   },
   "peerDependencies": {
     "@effect/atom-react": "4.0.0",
     "effect": "4.0.0",
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
-    "@dxos/ui-theme": "^0.13.0"
+    "@dxos/ui-theme": "^0.14.0"
   },
   "publishConfig": {
     "access": "public"

package/src/next/components/Accordion/Accordion.tsx

@@ -11,6 +11,7 @@ import { mx } from '@dxos/ui-theme';
 import { type ThemedClassName } from '@dxos/ui-types';
 
 import { recipes } from '../../recipes.ts';
+import { Block } from '../Block/Block.tsx';
 import * as Icon from '../Icon/Icon.tsx';
 
 //
@@ -80,17 +81,19 @@ const AccordionItemTrigger = forwardRef<HTMLButtonElement, AccordionItemTriggerP
         ref={forwardedRef}
       >
         {icon && (
-          <span data-scope='accordion' data-part='item-icon' className={recipes.accordionItemIcon()}>
+          <Block classNames={recipes.accordionItemIcon()}>
             <Icon.Icon icon={icon} />
-          </span>
+          </Block>
         )}
         <span data-scope='accordion' data-part='item-text' className={recipes.accordionItemText()}>
           {children}
         </span>
         {!disabled && (
-          <AccordionPrimitive.ItemIndicator className={recipes.accordionItemIndicator()}>
-            <Icon.Icon icon='ph--caret-right--regular' />
-          </AccordionPrimitive.ItemIndicator>
+          <Block>
+            <AccordionPrimitive.ItemIndicator className={recipes.accordionItemIndicator()}>
+              <Icon.Icon icon='ph--caret-right--regular' />
+            </AccordionPrimitive.ItemIndicator>
+          </Block>
         )}
       </AccordionPrimitive.ItemTrigger>
     );

package/src/next/components/Editable/Editable.tsx

@@ -23,6 +23,9 @@ const EDITABLE_INPUT_NAME = 'Editable.Input';
 // parts read does not expose.
 const [EditableActivationProvider, useEditableActivation] = createContext<EditableActivationBinding>(EDITABLE_NAME);
 
+// A controlled field's submit never reaches the machine's commit callback, so Save commits through the hook.
+const [EditableCommitProvider, useEditableCommit] = createContext<{ commit: () => void }>(EDITABLE_NAME);
+
 //
 // Root
 //
@@ -50,7 +53,7 @@ const EditableRoot = forwardRef<HTMLDivElement, EditableRootProps>(
     },
     forwardedRef,
   ) => {
-    const { api, activationProps } = useEditable({
+    const { api, activationProps, commit } = useEditable({
       value,
       defaultValue,
       onValueChange,
@@ -69,7 +72,9 @@ const EditableRoot = forwardRef<HTMLDivElement, EditableRootProps>(
         className={mx(recipes.editable(), classNames)}
         ref={forwardedRef}
       >
-        <EditableActivationProvider {...activationProps}>{children}</EditableActivationProvider>
+        <EditableActivationProvider {...activationProps}>
+          <EditableCommitProvider commit={commit}>{children}</EditableCommitProvider>
+        </EditableActivationProvider>
       </EditablePrimitive.RootProvider>
     );
   },
@@ -85,7 +90,7 @@ type EditablePreviewProps = ThemedClassName<Omit<ComponentPropsWithRef<'span'>,
 
 /** The static text and the activation affordance; hidden by the machine while editing. */
 const EditablePreview = forwardRef<HTMLSpanElement, EditablePreviewProps>(({ classNames, ...props }, forwardedRef) => {
-  const { valueText } = useEditableContext();
+  const { valueText, edit } = useEditableContext();
   const { role, onKeyDown } = useEditableActivation(EDITABLE_PREVIEW_NAME);
 
   return (
@@ -101,7 +106,18 @@ const EditablePreview = forwardRef<HTMLSpanElement, EditablePreviewProps>(({ cla
       ref={forwardedRef}
     >
       <span className={recipes.editablePreviewText()}>{valueText}</span>
-      <Icon.Icon icon='ph--pencil-simple--regular' classNames={recipes.editablePreviewIcon()} />
+      {/* The pencil is a door of its own: one click opens the field whatever gesture the preview takes (a double-click
+          in a list, where a single click selects the row). */}
+      <Icon.Icon
+        icon='ph--pencil-simple--regular'
+        classNames={recipes.editablePreviewIcon()}
+        data-testid='editable.edit'
+        // A disabled field hides the pencil (`editable.css`), so it takes no click.
+        onClick={(event) => {
+          event.stopPropagation();
+          edit();
+        }}
+      />
     </EditablePrimitive.Preview>
   );
 });
@@ -114,9 +130,10 @@ EditablePreview.displayName = EDITABLE_PREVIEW_NAME;
 
 type EditableInputProps = ThemedClassName<Omit<ComponentPropsWithRef<'input'>, 'value' | 'onChange' | 'placeholder'>>;
 
-/** The field shown while editing; focused with the caret at the end. */
+/** The field shown while editing, focused with the caret at the end, with a save button at its end. */
 const EditableInput = forwardRef<HTMLInputElement, EditableInputProps>(({ classNames, ...props }, forwardedRef) => {
   const { editing } = useEditableContext();
+  const { commit } = useEditableCommit(EDITABLE_INPUT_NAME);
   const localRef = useRef<HTMLInputElement | null>(null);
 
   // The machine focuses the input but leaves the caret where the browser puts it, which from the keyboard is the start.
@@ -130,24 +147,35 @@ const EditableInput = forwardRef<HTMLInputElement, EditableInputProps>(({ classN
   }, [editing]);
 
   return (
-    <EditablePrimitive.Input
-      {...props}
-      className={mx(recipes.editableInput(), classNames)}
-      ref={(element) => {
-        localRef.current = element;
-        // Typed `unknown`: `ForwardedRef`'s callback is declared void, but React 19 may return a cleanup.
-        const cleanup: unknown = typeof forwardedRef === 'function' ? forwardedRef(element) : undefined;
-        if (forwardedRef && typeof forwardedRef !== 'function') {
-          forwardedRef.current = element;
-        }
-        return () => {
-          localRef.current = null;
-          if (typeof cleanup === 'function') {
-            cleanup();
+    <>
+      <EditablePrimitive.Input
+        {...props}
+        className={mx(recipes.editableInput(), classNames)}
+        ref={(element) => {
+          localRef.current = element;
+          // Typed `unknown`: `ForwardedRef`'s callback is declared void, but React 19 may return a cleanup.
+          const cleanup: unknown = typeof forwardedRef === 'function' ? forwardedRef(element) : undefined;
+          if (forwardedRef && typeof forwardedRef !== 'function') {
+            forwardedRef.current = element;
           }
-        };
-      }}
-    />
+          return () => {
+            localRef.current = null;
+            if (typeof cleanup === 'function') {
+              cleanup();
+            }
+          };
+        }}
+      />
+      {/* Saves the edit, at the input's end in the same cell; the machine hides it while not editing. */}
+      <EditablePrimitive.SubmitTrigger
+        className={recipes.editableSubmit()}
+        aria-label='Save'
+        data-testid='editable.save'
+        onClick={() => commit()}
+      >
+        <Icon.Icon icon='ph--check--bold' />
+      </EditablePrimitive.SubmitTrigger>
+    </>
   );
 });
 

package/src/next/components/Listbox/Listbox.tsx

@@ -45,7 +45,7 @@ type ListboxOption = {
 };
 
 /** `none` keeps zag's focus, keyboard and typeahead with no selection (AUDIT §6 group B: every list runs the machine). */
-type ListboxSelectionMode = 'single' | 'multiple' | 'none';
+type ListboxSelectionMode = 'single' | 'multiple' | 'extended' | 'none';
 
 type RootContextValue = {
   items: readonly ListboxOption[];
@@ -72,7 +72,10 @@ const useRootContext = (part: string) => {
 
 type ListboxRootProps = ThemedClassName<Omit<ComponentPropsWithoutRef<'div'>, 'defaultValue' | 'onSelect'>> & {
   items: readonly ListboxOption[];
-  /** `single` by default; `multiple` toggles each item; `none` selects nothing but keeps navigation and typeahead. */
+  /**
+   * `single` by default; `multiple` toggles each item; `extended` selects one on a click and adds with Cmd/Ctrl or a
+   * Shift range, as a desktop list does; `none` selects nothing but keeps navigation and typeahead.
+   */
   selectionMode?: ListboxSelectionMode;
   value?: string[];
   defaultValue?: string[];
@@ -177,7 +180,7 @@ ListboxLabel.displayName = 'Listbox.Label';
 
 type ListboxContentProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> &
   Pick<ScrollArea.RootProps, 'mode' | 'width' | 'native'> &
-  Pick<ContainerProps, 'gutter' | 'gap'> & {
+  Pick<ContainerProps, 'gutter' | 'gap' | 'padBlock'> & {
     /**
      * `false` renders the rows without a ScrollArea of their own, for a host that already scrolls (a ScrollArea
      * composed in `Panel.Body`): the rows then inherit the host's rails (`gutter='inherit'` by default).
@@ -192,7 +195,7 @@ type ListboxContentProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> &
 const ListboxViewport = composable<
   HTMLDivElement,
   ContainerProps & Omit<ComponentPropsWithoutRef<'div'>, 'className'> & { hostScrolls?: boolean }
->(({ gutter, gap, hostScrolls, onKeyDown, onFocus, onBlur, children, ...props }, forwardedRef) => {
+>(({ gutter, gap, padBlock, hostScrolls, onKeyDown, onFocus, onBlur, children, ...props }, forwardedRef) => {
   const api = useListboxContext();
   const { columns, virtual, scrollToIndexRef } = useRootContext('Content');
   const [element, setElement] = useState<HTMLDivElement | null>(null);
@@ -202,7 +205,7 @@ const ListboxViewport = composable<
   const ref = useComposedRefs<HTMLDivElement>(forwardedRef, setElement, windowing.listRef);
   useRowTabStops(element);
 
-  const { style, ...attributes } = containerAttributes({ gutter, gap, columns });
+  const { style, ...attributes } = containerAttributes({ gutter, gap, columns, padBlock });
   const {
     className,
     style: ownStyle,

package/src/next/components/Listbox/grid.ts

@@ -21,6 +21,7 @@ const CONTROL_SELECTOR = [
 ].join(', ');
 
 const ROW_SELECTOR = '[role="option"]';
+const EDITABLE_PREVIEW_SELECTOR = '[data-scope="editable"][data-part="preview"]';
 
 /** The row (`option`) holding `element` in this list, not in a list nested in a row's detail. */
 const rowOf = (list: HTMLElement, element: Element): HTMLElement | null => {
@@ -49,6 +50,11 @@ export const isFromControl = (row: HTMLElement, target: EventTarget | null) => {
     return false;
   }
   const control = target.closest(CONTROL_SELECTOR);
+  // A row's text edited in place (an Editable preview) is the row's for a pointer: a press selects the row and leaves the
+  // list its keys; a double-click, its pencil, or Enter once the row is entered still opens it.
+  if (control?.matches(EDITABLE_PREVIEW_SELECTOR)) {
+    return false;
+  }
   return control !== null && control !== row && row.contains(control);
 };
 

package/src/next/components/Toolbar/Toolbar.stories.tsx

@@ -188,7 +188,8 @@ export const Test: Story = {
     await expect(separator).not.toHaveAttribute('tabindex');
 
     for (const size of ['md', 'lg'] as const) {
-      const expected = 3 * GEOMETRY[size].inset;
+      // The toolbar adds no gap of its own: items are spaced by their own insets.
+      const expected = 2 * GEOMETRY[size].inset;
       const items = ['add', 'remove', 'separator', 'button', 'input', 'select', 'list', 'grid'].map((part) =>
         byTestId(canvasElement, `${part}-${size}`).getBoundingClientRect(),
       );

package/src/next/recipes.ts

@@ -102,6 +102,7 @@ export const recipes = {
   editablePreview: () => `dx-control dx-editable-preview ${FOCUS_RING}`,
   editablePreviewIcon: () => 'dx-editable-preview-icon',
   editablePreviewText: () => 'dx-editable-preview-text',
+  editableSubmit: () => 'dx-editable-submit',
   empty: () => 'dx-empty',
   emptyText: () => 'dx-empty-text',
   errorFallback: () => 'dx-error-fallback',

package/src/next/theme/accordion.css

@@ -36,10 +36,10 @@
   .dx-accordion-item-trigger {
     display: flex;
     align-items: center;
-    gap: var(--dx-gap-size);
     width: 100%;
     min-height: var(--dx-block-size);
-    padding: 0 var(--dx-gap-size);
+    /* The icon and the caret are Blocks, which set the row's rhythm; only a row without an icon pads its text. */
+    padding: 0;
     border: none;
     border-radius: inherit;
     background: none;
@@ -73,6 +73,9 @@
     flex: 1;
     min-width: 0;
   }
+  .dx-accordion-item-trigger > .dx-accordion-item-text:first-child {
+    padding-inline-start: var(--dx-gap-size);
+  }
 
   .dx-accordion-item-indicator {
     transition: transform var(--dx-disclosure-duration) var(--dx-disclosure-ease-open);

package/src/next/theme/card.css

@@ -141,8 +141,14 @@
     color: var(--color-fg-muted);
   }
 
+  /* Framed by its host, so neither edge nor rounding of its own; the border keeps its width so nothing shifts. */
   .dx-card[data-border='false'] {
     border-color: transparent;
+    border-radius: 0;
+  }
+  .dx-card[data-border='false'] > .dx-card-poster:first-child {
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
   }
   .dx-card[data-selected] {
     border-color: var(--color-accent-bg);

package/src/next/theme/control.css

@@ -986,11 +986,9 @@
     display: flex;
     flex-shrink: 0;
     align-items: center;
-    gap: var(--dx-control-inset);
+    /* No gap or padding of its own: the items are block-sized controls, which carry their own spacing. */
     width: 100%;
     min-height: var(--dx-block-size);
-    /* Half a gap of inline padding (px-1 at md), so the end items are not flush with a pane's edge. */
-    padding-inline: calc(var(--dx-gap-size) / 2);
     font-size: var(--dx-font-size);
     line-height: var(--dx-line-height);
   }

package/src/next/theme/editable.css

@@ -30,6 +30,10 @@
   .dx-editable-preview:hover:not([data-disabled]) {
     background: var(--color-hover-surface);
   }
+  /* In a list row the row is the hover target: the preview takes the row's background rather than painting its own. */
+  .dx-row .dx-editable-preview:hover:not([data-disabled]) {
+    background: transparent;
+  }
   .dx-editable-preview[data-placeholder-shown] {
     color: var(--color-fg-subtle);
   }
@@ -50,6 +54,7 @@
   .dx-editable-preview-icon {
     color: var(--color-fg-subtle);
     visibility: hidden;
+    cursor: pointer;
   }
   .dx-editable-preview:is(:hover, :focus-visible):not([data-disabled]) .dx-editable-preview-icon {
     visibility: visible;
@@ -57,6 +62,19 @@
 
   .dx-editable-input {
     color: var(--color-fg);
+    /* Room for the save button laid over the input's end. */
+    padding-inline-end: var(--dx-block-size);
+  }
+
+  .dx-editable-submit {
+    justify-self: end;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--dx-block-size);
+    height: var(--dx-block-size);
+    color: var(--color-success-text);
+    cursor: pointer;
   }
   .dx-editable-input::placeholder {
     color: var(--color-fg-subtle);

package/src/next/theme/row.css

@@ -10,6 +10,10 @@
     border-radius: var(--radius-sm, 0.25rem);
     cursor: default;
   }
+  /* Rows that run edge to edge would show their rounding against the container's own edges. */
+  .dx-container[data-gutter='none'] > .dx-row {
+    border-radius: 0;
+  }
   .dx-row[data-selectable] {
     cursor: pointer;
   }

package/src/next/theme/toggle.css

@@ -22,6 +22,10 @@
     flex-direction: column;
     align-items: stretch;
   }
+  /* In a toolbar, which adds no gap between its items, a group adds none between its own either. */
+  .dx-toolbar > .dx-toggle-group {
+    gap: 0;
+  }
   .dx-toolbar > .dx-toggle-group > .dx-control:not([data-square]) {
     margin-inline: var(--dx-control-inset);
   }