@dxos/react-ui 0.8.4-main.ef1bc66f44 → 0.8.4-main.effb148878

package/src/testing/decorators/withTheme.tsx

@@ -3,32 +3,43 @@
 //
 
 import { type Decorator } from '@storybook/react';
-import React, { memo } from 'react';
+import React from 'react';
+import { I18nProvider } from 'react-aria-components';
 
-import { defaultTx } from '@dxos/ui-theme';
 import { type ThemeMode } from '@dxos/ui-types';
 
-import { type ThemeContextValue, ThemeProvider, Tooltip } from '../../components';
+import { Tooltip } from '../../components';
+import { type ThemeContextValue, ThemeProvider } from '../../primitives';
+import { defaultTx } from '../../theme';
 
 /**
  * Adds theme decorator.
+ *
+ * `I18nProvider` is included so react-aria-components-backed widgets (DateField, Calendar, …)
+ * have a guaranteed locale in headless test environments where `navigator.language` may be
+ * empty.
  */
 export const withTheme =
-  ({ tx = defaultTx, ...props }: Partial<ThemeContextValue> = {}): Decorator =>
+  ({ tx = defaultTx, noCache, platform }: Partial<ThemeContextValue> = {}): Decorator =>
   (Story, context) => {
     const {
       globals: { theme },
       parameters: { translations },
     } = context;
 
-    // Prevent re-rendering of the story.
-    const MemoizedStory = memo(Story);
-
     return (
-      <ThemeProvider {...props} tx={tx} themeMode={theme as ThemeMode} resourceExtensions={translations} noCache>
-        <Tooltip.Provider>
-          <MemoizedStory />
-        </Tooltip.Provider>
-      </ThemeProvider>
+      <I18nProvider locale='en-US'>
+        <ThemeProvider
+          tx={tx}
+          themeMode={(theme as ThemeMode) || 'dark'}
+          resourceExtensions={translations}
+          noCache={noCache}
+          platform={platform}
+        >
+          <Tooltip.Provider>
+            <Story />
+          </Tooltip.Provider>
+        </ThemeProvider>
+      </I18nProvider>
     );
   };

package/src/testing/index.ts

@@ -3,3 +3,5 @@
 //
 
 export * from './decorators';
+
+export * from './Loading';

package/src/theme/bindTheme.ts

@@ -0,0 +1,13 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ClassNameArray, type ComponentFunction, type Theme, type ThemeFunction } from '@dxos/ui-types';
+import { getDeep } from '@dxos/util';
+
+export const bindTheme = <P extends Record<string, any>>(theme: Theme<Record<string, any>>): ThemeFunction<P> => {
+  return (path: string, styleProps?: P, ...etc: ClassNameArray) => {
+    const result = getDeep<Theme<P> | ComponentFunction<P>>(theme, path.split('.'));
+    return typeof result === 'function' ? result(styleProps ?? ({} as P), ...etc) : undefined;
+  };
+};

package/src/theme/defaultTheme.ts

@@ -0,0 +1,83 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Theme } from '@dxos/ui-types';
+
+import { avatarTheme } from '../components/Avatars/Avatar.theme';
+import { breadcrumbTheme } from '../components/Breadcrumb/Breadcrumb.theme';
+import { buttonTheme } from '../components/Button/Button.theme';
+import { iconButtonTheme } from '../components/Button/IconButton.theme';
+import { calendarTheme } from '../components/Calendar/Calendar.theme';
+import { cardTheme } from '../components/Card/Card.theme';
+import { columnTheme } from '../components/Column/Column.theme';
+import { datePickerTheme } from '../components/DatePicker/DatePicker.theme';
+import { dialogTheme } from '../components/Dialog/Dialog.theme';
+import { focusTheme } from '../components/Focus/Focus.theme';
+import { iconTheme } from '../components/Icon/Icon.theme';
+import { inputTheme } from '../components/Input/Input.theme';
+import { linkTheme } from '../components/Link/Link.theme';
+import { listTheme } from '../components/List/List.theme';
+import { treegridTheme } from '../components/List/Treegrid.theme';
+import { mainTheme } from '../components/Main/Main.theme';
+import { menuTheme } from '../components/Menu/Menu.theme';
+import { messageTheme } from '../components/Message/Message.theme';
+import { panelTheme } from '../components/Panel/Panel.theme';
+import { popoverTheme } from '../components/Popover/Popover.theme';
+import { scrollAreaTheme } from '../components/ScrollArea/ScrollArea.theme';
+import { selectTheme } from '../components/Select/Select.theme';
+import { separatorTheme } from '../components/Separator/Separator.theme';
+import { skeletonTheme } from '../components/Skeleton/Skeleton.theme';
+import { splitterTheme } from '../components/Splitter/Splitter.theme';
+import { statusTheme } from '../components/Status/Status.theme';
+import { tagTheme } from '../components/Tag/Tag.theme';
+import { toastTheme } from '../components/Toast/Toast.theme';
+import { toolbarTheme } from '../components/Toolbar/Toolbar.theme';
+import { tooltipTheme } from '../components/Tooltip/Tooltip.theme';
+import { bindTheme } from './bindTheme';
+
+export const defaultTheme: Theme<Record<string, any>> = {
+  themeName: () => 'default',
+
+  //
+  // Primitives
+  //
+
+  column: columnTheme,
+  panel: panelTheme,
+
+  //
+  // Components
+  //
+
+  avatar: avatarTheme,
+  breadcrumb: breadcrumbTheme,
+  button: buttonTheme,
+  calendar: calendarTheme,
+  card: cardTheme,
+  datePicker: datePickerTheme,
+  dialog: dialogTheme,
+  focus: focusTheme,
+  icon: iconTheme,
+  iconButton: iconButtonTheme,
+  input: inputTheme,
+  link: linkTheme,
+  list: listTheme,
+  main: mainTheme,
+  message: messageTheme,
+  menu: menuTheme,
+  popover: popoverTheme,
+  scrollArea: scrollAreaTheme,
+  select: selectTheme,
+  separator: separatorTheme,
+  skeleton: skeletonTheme,
+  splitter: splitterTheme,
+  status: statusTheme,
+  tag: tagTheme,
+  toast: toastTheme,
+  toolbar: toolbarTheme,
+  tooltip: tooltipTheme,
+  treegrid: treegridTheme,
+};
+
+export const defaultTx = bindTheme(defaultTheme);

package/src/theme/index.ts

@@ -0,0 +1,37 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export * from './bindTheme';
+export * from './defaultTheme';
+
+// Re-export every co-located theme file so consumers can pull style-prop types,
+// theme tables, and constants from a single peer (@dxos/react-ui).
+export * from '../components/Avatars/Avatar.theme';
+export * from '../components/Breadcrumb/Breadcrumb.theme';
+export * from '../components/Button/Button.theme';
+export * from '../components/Button/IconButton.theme';
+export * from '../components/Card/Card.theme';
+export * from '../components/Dialog/Dialog.theme';
+export * from '../components/Focus/Focus.theme';
+export * from '../components/Icon/Icon.theme';
+export * from '../components/Input/Input.theme';
+export * from '../components/Link/Link.theme';
+export * from '../components/List/List.theme';
+export * from '../components/List/Treegrid.theme';
+export * from '../components/Main/Main.theme';
+export * from '../components/Menu/Menu.theme';
+export * from '../components/Message/Message.theme';
+export * from '../components/Popover/Popover.theme';
+export * from '../components/ScrollArea/ScrollArea.theme';
+export * from '../components/Select/Select.theme';
+export * from '../components/Separator/Separator.theme';
+export * from '../components/Skeleton/Skeleton.theme';
+export * from '../components/Splitter/Splitter.theme';
+export * from '../components/Status/Status.theme';
+export * from '../components/Tag/Tag.theme';
+export * from '../components/Toast/Toast.theme';
+export * from '../components/Toolbar/Toolbar.theme';
+export * from '../components/Tooltip/Tooltip.theme';
+export * from '../components/Column/Column.theme';
+export * from '../components/Panel/Panel.theme';

package/src/translations.ts

@@ -0,0 +1,32 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Resource } from '@dxos/react-ui';
+
+export const translationKey = '@dxos/react-ui';
+
+export const translations = [
+  {
+    'en-US': {
+      [translationKey]: {
+        'toolbar-menu.label': 'Action menu',
+        'toolbar-drag-handle.label': 'Drag to rearrange',
+        'toolbar-close.label': 'Close',
+        'toolbar-delete.label': 'Delete',
+        'carousel-viewport.label': 'Carousel',
+        'carousel-prev.label': 'Previous slide',
+        'carousel-next.label': 'Next slide',
+        'carousel-indicators.label': 'Carousel slides',
+        'carousel-go-to.label': 'Go to slide {{index}}',
+        'date-picker.placeholder.single.label': 'Pick a date',
+        'date-picker.placeholder.range.label': 'Pick a date range',
+        'date-picker.placeholder.multiple.label': 'Pick dates',
+        'date-picker.clear.label': 'Clear',
+        'calendar.nav.previous.label': 'Previous month',
+        'calendar.nav.next.label': 'Next month',
+        'calendar.footer.today.label': 'Today',
+      },
+    },
+  },
+] as const satisfies Resource[];

package/src/util/index.ts

@@ -4,5 +4,6 @@
 
 export type { ThemedClassName } from '@dxos/ui-types';
 
-export * from './hasIosKeyboard';
+export * from './mobile';
+export * from './slots';
 export * from './usePx';

package/src/util/mobile.ts

@@ -0,0 +1,11 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+/**
+ * Determines whether the on-screen keyboard will appear on `focus` outside of a click handler.
+ */
+export const hasIosKeyboard = () => {
+  // TODO(burdon): Better way to detect iOS keyboard?
+  return !!navigator.userAgent.match(/iP(ad|od|hone).+Safari/);
+};

package/src/util/slots.ts

@@ -0,0 +1,129 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import {
+  Children,
+  createElement,
+  forwardRef,
+  type ForwardRefExoticComponent,
+  type ForwardedRef,
+  type HTMLAttributes,
+  isValidElement,
+  type ReactNode,
+  type RefAttributes,
+  type CSSProperties,
+} from 'react';
+
+import { log } from '@dxos/log';
+import { mx } from '@dxos/ui-theme';
+import { type ComposableProps, type SlottableProps, type ThemedClassName } from '@dxos/ui-types';
+
+/**
+ * Reconciles className properties from a parent slot.
+ * - `className` is set by the Slot merge mechanism.
+ * - `classNames` is the consumer-facing prop for theming overrides.
+ * Use `composableProps` to reconcile both into a single `className`.
+ */
+export const composableProps = <P extends HTMLElement = HTMLElement>(
+  { className, classNames, role, style, ...props }: ComposableProps,
+  { classNames: defaultClassNames, ...defaults }: ThemedClassName<Partial<HTMLAttributes<P>>> | undefined = {},
+) => ({
+  // Default props.
+  ...(defaults as object),
+
+  // Spread supplied props.
+  ...props,
+
+  // Prefer explicit role, then defaults role, then 'none'.
+  role: role ?? defaults.role ?? 'none',
+
+  // Merge styles.
+  style: { ...defaults.style, ...style } as CSSProperties,
+
+  // Compose classnames.
+  className: mx(defaultClassNames, className, classNames),
+});
+
+/** Symbol used to mark components created by `composable()` or `slottable()`. */
+const COMPOSABLE = Symbol.for('dxos.composable');
+
+/**
+ * Factory for slottable components.
+ * The implementation receives full `HTMLAttributes<E>` so it can destructure `role`, `style`, etc.
+ * Consumers see only `SlottableProps<P>` — a narrow type exposing `classNames`, `className`,
+ * `children`, `asChild`, and the custom props `P`.
+ *
+ * @example
+ * ```tsx
+ * const MyPanel = slottable<HTMLDivElement, { border?: boolean }>(
+ *   ({ children, asChild, border, ...props }, forwardedRef) => {
+ *     const Comp = asChild ? Slot : Primitive.div;
+ *     return (
+ *       <Comp {...composableProps(props, { classNames: border && 'border' })} ref={forwardedRef}>
+ *         {children}
+ *       </Comp>
+ *     );
+ *   },
+ * );
+ * ```
+ */
+export function slottable<E extends HTMLElement, P extends object = {}>(
+  render: (props: SlottableProps<P> & HTMLAttributes<E>, forwardedRef: ForwardedRef<E>) => ReactNode,
+): ForwardRefExoticComponent<SlottableProps<P> & RefAttributes<E>> {
+  const wrapped = (props: SlottableProps<P> & HTMLAttributes<E>, forwardedRef: ForwardedRef<E>) => {
+    let warn = false;
+    if (props.asChild) {
+      try {
+        const child = Children.only(props.children);
+        if (isValidElement(child) && typeof child.type !== 'string' && !(child.type as any)[COMPOSABLE]) {
+          warn = true;
+          log.warn('slot child is not composable; create it with composable() or slottable()', {
+            child: (child.type as any).displayName ?? (child.type as any).name,
+          });
+        }
+      } catch {
+        // Children.only throws if not exactly one child — Slot handles this.
+      }
+    }
+
+    const result = render(props, forwardedRef);
+    if (warn) {
+      return createElement('div', { role: 'none', className: 'dx-slot-warning' }, result);
+    }
+
+    return result;
+  };
+
+  const component = forwardRef(wrapped as any) as any;
+  (component as any)[COMPOSABLE] = true;
+  return component;
+}
+
+/**
+ * Factory for composable (leaf) components.
+ * The implementation receives full `HTMLAttributes<E>` so it can destructure `role`, `style`, etc.
+ * Consumers see only `ComposableProps<P>` — a narrow type exposing `classNames`, `className`,
+ * `children`, and the custom props `P`.
+ *
+ * For generic components, use `any` for the type parameter inside `composable` and
+ * cast the result to restore the generic signature for consumers.
+ *
+ * @example
+ * ```tsx
+ * const Leaf = composable<HTMLButtonElement>(({ children, ...props }, forwardedRef) => {
+ *   return (
+ *     <button {...composableProps(props, { classNames: 'btn' })} ref={forwardedRef}>
+ *       {children}
+ *     </button>
+ *   );
+ * });
+ * ```
+ */
+export function composable<E extends HTMLElement, P extends object = {}>(
+  render: (props: ComposableProps<P> & HTMLAttributes<E>, forwardedRef: ForwardedRef<E>) => ReactNode,
+): ForwardRefExoticComponent<ComposableProps<P> & RefAttributes<E>> {
+  const component = forwardRef(render as any) as any;
+  (component as any)[COMPOSABLE] = true;
+  return component;
+}

package/src/util/usePx.ts

@@ -12,12 +12,16 @@ const getDocumentElementFontSize = () => parseFloat(getComputedStyle(document.do
  * @param rem The rem value to convert to pixels
  * @returns The current pixel value equivalent of the rem input
  */
+// TODO(burdon): Change to array.
+// TODO(burdon): Integrate with theme provider.
 export const usePx = (rem: number): number => {
   const [fontSize, setFontSize] = useState(() => {
     if (typeof document !== 'undefined') {
       return getDocumentElementFontSize();
     }
-    return 16; // Default fallback for SSR
+
+    // Default fallback for SSR
+    return 16;
   });
 
   const updateFontSize = useCallback(() => {