@dxos/react-ui 0.8.4-main.d05673bc65 → 0.8.4-main.d9fc60f731

package/src/components/DatePicker/DatePicker.tsx

@@ -0,0 +1,279 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { createContext } from '@radix-ui/react-context';
+import { format as formatDate } from 'date-fns';
+import React, {
+  type ComponentPropsWithoutRef,
+  type PropsWithChildren,
+  type ReactNode,
+  forwardRef,
+  useCallback,
+  useState,
+} from 'react';
+
+import { useThemeContext } from '../../hooks';
+import { useTranslation } from '../../primitives';
+import { translationKey } from '../../translations';
+import { type ThemedClassName } from '../../util';
+import { Calendar, type DateRange } from '../Calendar';
+import { Icon } from '../Icon';
+import { Popover } from '../Popover';
+
+//
+// Public API.
+//
+// Wraps the new react-aria-components-backed `<Calendar>` (single + range) in a Radix Popover,
+// preserving the previous slot-style namespace: `<DatePicker.Root>`, `<DatePicker.Trigger>`,
+// `<DatePicker.Content>`, `<DatePicker.Calendar>`. Multi-select is no longer supported (no
+// in-repo consumers); use `<Calendar.Root>` directly with custom state if needed.
+//
+
+export type DatePickerMode = 'single' | 'range';
+
+type ValueByMode = {
+  single: Date | undefined;
+  range: DateRange | undefined;
+};
+
+type DatePickerContextValue = {
+  mode: DatePickerMode;
+  value: ValueByMode[DatePickerMode];
+  setValue: (next: ValueByMode[DatePickerMode]) => void;
+  withTime: boolean;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+};
+
+const [DatePickerProvider, useDatePickerContext] = createContext<DatePickerContextValue>('DatePicker');
+
+//
+// Root.
+//
+
+export type DatePickerRootProps<M extends DatePickerMode = 'single'> = {
+  mode?: M;
+  value?: ValueByMode[M];
+  defaultValue?: ValueByMode[M];
+  onValueChange?: (value: ValueByMode[M]) => void;
+  /** Preserve hour/minute on the selected date(s) when picking a new day. */
+  withTime?: boolean;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children?: ReactNode;
+};
+
+const DatePickerRoot = <M extends DatePickerMode = 'single'>({
+  mode = 'single' as M,
+  value,
+  defaultValue,
+  onValueChange,
+  withTime = false,
+  open,
+  defaultOpen,
+  onOpenChange,
+  children,
+}: DatePickerRootProps<M>) => {
+  const [internalValue, setInternalValue] = useState<ValueByMode[M] | undefined>(defaultValue);
+  const [internalOpen, setInternalOpen] = useState(defaultOpen ?? false);
+
+  const controlled = value !== undefined || onValueChange !== undefined;
+  const resolvedValue = (controlled ? value : internalValue) as ValueByMode[DatePickerMode];
+
+  const setValue = useCallback(
+    (next: ValueByMode[DatePickerMode]) => {
+      if (!controlled) {
+        setInternalValue(next as ValueByMode[M] | undefined);
+      }
+      onValueChange?.(next as ValueByMode[M]);
+    },
+    [controlled, onValueChange],
+  );
+
+  const resolvedOpen = open ?? internalOpen;
+  const handleOpenChange = useCallback(
+    (next: boolean) => {
+      if (open === undefined) {
+        setInternalOpen(next);
+      }
+      onOpenChange?.(next);
+    },
+    [open, onOpenChange],
+  );
+
+  return (
+    <DatePickerProvider
+      mode={mode as DatePickerMode}
+      value={resolvedValue}
+      setValue={setValue}
+      withTime={withTime}
+      open={resolvedOpen}
+      onOpenChange={handleOpenChange}
+    >
+      <Popover.Root open={resolvedOpen} onOpenChange={handleOpenChange}>
+        {children}
+      </Popover.Root>
+    </DatePickerProvider>
+  );
+};
+
+//
+// Trigger.
+//
+
+const formatValue = (mode: DatePickerMode, value: unknown, fmt: string): string | undefined => {
+  if (value === undefined || value === null) {
+    return undefined;
+  }
+  switch (mode) {
+    case 'single':
+      return formatDate(value as Date, fmt);
+    case 'range': {
+      const r = value as DateRange;
+      if (!r.from) {
+        return undefined;
+      }
+      return r.to ? `${formatDate(r.from, fmt)} – ${formatDate(r.to, fmt)}` : formatDate(r.from, fmt);
+    }
+  }
+};
+
+export type DatePickerTriggerProps = ThemedClassName<Omit<ComponentPropsWithoutRef<'button'>, 'children'>> &
+  PropsWithChildren<{
+    format?: string;
+    placeholder?: string;
+    /** Show the leading calendar icon in the default trigger. Defaults to true. */
+    icon?: boolean;
+  }>;
+
+const DatePickerTrigger = forwardRef<HTMLButtonElement, DatePickerTriggerProps>(
+  ({ classNames, format: fmt = 'PPP', placeholder, icon = true, children, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    const { t } = useTranslation(translationKey);
+    const { mode, value } = useDatePickerContext('DatePickerTrigger');
+
+    const placeholderText = placeholder ?? (t(`date-picker.placeholder.${mode}.label`) as string);
+    const label = formatValue(mode, value, fmt) ?? placeholderText;
+    const hasValue = label !== placeholderText;
+
+    return (
+      <Popover.Trigger asChild>
+        <button
+          ref={forwardedRef}
+          type='button'
+          {...props}
+          className={tx('datePicker.trigger', { hasValue }, classNames) ?? undefined}
+        >
+          {children ?? (
+            <>
+              {icon && <Icon size={4} icon='ph--calendar--regular' />}
+              {label}
+            </>
+          )}
+        </button>
+      </Popover.Trigger>
+    );
+  },
+);
+
+DatePickerTrigger.displayName = 'DatePickerTrigger';
+
+//
+// Content.
+//
+
+export type DatePickerContentProps = ThemedClassName<ComponentPropsWithoutRef<typeof Popover.Content>>;
+
+const DatePickerContent = forwardRef<HTMLDivElement, DatePickerContentProps>(
+  ({ classNames, children, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <Popover.Portal>
+        <Popover.Content ref={forwardedRef} align='start' sideOffset={4} {...props}>
+          <div className={tx('datePicker.content', {}, classNames)}>{children}</div>
+        </Popover.Content>
+      </Popover.Portal>
+    );
+  },
+);
+
+DatePickerContent.displayName = 'DatePickerContent';
+
+//
+// Calendar — single or range, time-of-day preservation, auto-dismiss on completion.
+//
+
+const carryTime = (oldDate: Date | undefined, newDate: Date | undefined): Date | undefined => {
+  if (!newDate) {
+    return newDate;
+  }
+  if (!oldDate) {
+    return newDate;
+  }
+  const out = new Date(newDate);
+  out.setHours(oldDate.getHours(), oldDate.getMinutes(), 0, 0);
+  return out;
+};
+
+const DatePickerCalendar = ({ classNames }: { classNames?: string } = {}) => {
+  const { mode, value, setValue, withTime, onOpenChange } = useDatePickerContext('DatePickerCalendar');
+
+  if (mode === 'single') {
+    const date = value as Date | undefined;
+    return (
+      <Calendar.Root
+        mode='single'
+        classNames={classNames}
+        selected={date}
+        onSelect={(next) => {
+          const merged = withTime ? carryTime(date, next) : next;
+          setValue(merged);
+          if (next !== undefined) {
+            onOpenChange(false);
+          }
+        }}
+      />
+    );
+  }
+
+  const range = value as DateRange | undefined;
+  return (
+    <Calendar.Root
+      mode='range'
+      classNames={classNames}
+      selected={range}
+      onSelect={(next) => {
+        if (!next) {
+          setValue(undefined);
+          return;
+        }
+        const merged: DateRange = withTime
+          ? { from: carryTime(range?.from, next.from)!, to: carryTime(range?.to, next.to) }
+          : next;
+        setValue(merged);
+        if (merged.from && merged.to) {
+          onOpenChange(false);
+        }
+      }}
+    />
+  );
+};
+
+DatePickerCalendar.displayName = 'DatePickerCalendar';
+
+//
+// Public namespace.
+//
+
+export const DatePicker = {
+  Root: DatePickerRoot,
+  Trigger: DatePickerTrigger,
+  Content: DatePickerContent,
+  Calendar: DatePickerCalendar,
+};
+
+export { useDatePickerContext };
+
+export type { ValueByMode };

package/src/components/DatePicker/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export * from './DatePicker';

package/src/components/Dialog/AlertDialog.stories.tsx

@@ -5,14 +5,13 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { faker } from '@dxos/random';
+import { random } from '@dxos/random';
 
 import { withTheme } from '../../testing';
 import { Button } from '../Button';
-
 import { AlertDialog } from './AlertDialog';
 
-type StoryProps = Partial<{
+type DefaultStoryProps = Partial<{
   title: string;
   description: string;
   openTrigger: string;
@@ -20,7 +19,7 @@ type StoryProps = Partial<{
   actionTrigger: string;
 }>;
 
-const DefaultStory = ({ title, description, openTrigger, cancelTrigger, actionTrigger }: StoryProps) => {
+const DefaultStory = ({ title, description, openTrigger, cancelTrigger, actionTrigger }: DefaultStoryProps) => {
   return (
     <AlertDialog.Root defaultOpen>
       <AlertDialog.Trigger asChild>
@@ -60,8 +59,8 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    title: faker.lorem.sentence(3),
-    description: faker.lorem.paragraph(1),
+    title: random.lorem.sentence(3),
+    description: random.lorem.paragraph(1),
     openTrigger: 'Open AlertDialog',
     cancelTrigger: 'Cancel',
     actionTrigger: 'Action',

package/src/components/Dialog/AlertDialog.tsx

@@ -2,50 +2,32 @@
 // Copyright 2023 DXOS.org
 //
 
-import {
-  AlertDialogAction as AlertDialogActionPrimitive,
-  type AlertDialogActionProps as AlertDialogActionPrimitiveProps,
-  AlertDialogCancel as AlertDialogCancelPrimitive,
-  type AlertDialogCancelProps as AlertDialogCancelPrimitiveProps,
-  AlertDialogContent as AlertDialogContentPrimitive,
-  type AlertDialogContentProps as AlertDialogContentPrimitiveProps,
-  AlertDialogDescription as AlertDialogDescriptionPrimitive,
-  type AlertDialogDescriptionProps as AlertDialogDescriptionPrimitiveProps,
-  AlertDialogOverlay as AlertDialogOverlayPrimitive,
-  type AlertDialogOverlayProps as AlertDialogOverlayPrimitiveProps,
-  AlertDialogPortal as AlertDialogPortalPrimitive,
-  type AlertDialogPortalProps as AlertDialogPortalPrimitiveProps,
-  Root as AlertDialogRootPrimitive,
-  type AlertDialogProps as AlertDialogRootPrimitiveProps,
-  AlertDialogTitle as AlertDialogTitlePrimitive,
-  type AlertDialogTitleProps as AlertDialogTitlePrimitiveProps,
-  AlertDialogTrigger as AlertDialogTriggerPrimitive,
-  type AlertDialogTriggerProps as AlertDialogTriggerPrimitiveProps,
-} from '@radix-ui/react-alert-dialog';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { createContext } from '@radix-ui/react-context';
-import React, {
-  type ForwardRefExoticComponent,
-  type FunctionComponent,
-  type PropsWithChildren,
-  forwardRef,
-} from 'react';
-
-import { type DialogSize } from '@dxos/ui-theme';
+import React, { type ForwardRefExoticComponent, type FunctionComponent, forwardRef } from 'react';
 
 import { useThemeContext } from '../../hooks';
-import { Column } from '../../primitives';
+import { ElevationProvider } from '../../primitives';
+import { type DialogSize } from '../../theme';
 import { type ThemedClassName } from '../../util';
-import { ElevationProvider } from '../ElevationProvider';
+import { Column } from '../Column';
+import {
+  Dialog,
+  type DialogHeaderProps,
+  type DialogBodyProps,
+  type DialogActionBarProps,
+  type DialogActionIconButtonProps,
+} from './Dialog';
 
 //
 // Root
 //
 
-type AlertDialogRootProps = AlertDialogRootPrimitiveProps;
+type AlertDialogRootProps = AlertDialogPrimitive.AlertDialogProps;
 
 const AlertDialogRoot: FunctionComponent<AlertDialogRootProps> = (props) => (
   <ElevationProvider elevation='dialog'>
-    <AlertDialogRootPrimitive {...props} />
+    <AlertDialogPrimitive.Root {...props} />
   </ElevationProvider>
 );
 
@@ -53,95 +35,55 @@ const AlertDialogRoot: FunctionComponent<AlertDialogRootProps> = (props) => (
 // Trigger
 //
 
-type AlertDialogTriggerProps = AlertDialogTriggerPrimitiveProps;
+type AlertDialogTriggerProps = AlertDialogPrimitive.AlertDialogTriggerProps;
 
-const AlertDialogTrigger: FunctionComponent<AlertDialogTriggerProps> = AlertDialogTriggerPrimitive;
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 
 //
 // Portal
 //
 
-type AlertDialogPortalProps = AlertDialogPortalPrimitiveProps;
+type AlertDialogPortalProps = AlertDialogPrimitive.AlertDialogPortalProps;
 
-const AlertDialogPortal: FunctionComponent<AlertDialogPortalProps> = AlertDialogPortalPrimitive;
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
 
 //
 // Cancel
 //
 
-type AlertDialogCancelProps = AlertDialogCancelPrimitiveProps;
+type AlertDialogCancelProps = AlertDialogPrimitive.AlertDialogCancelProps;
 
-const AlertDialogCancel: FunctionComponent<AlertDialogCancelProps> = AlertDialogCancelPrimitive;
+const AlertDialogCancel = AlertDialogPrimitive.Cancel;
 
 //
 // Action
 //
 
-type AlertDialogActionProps = AlertDialogActionPrimitiveProps;
+type AlertDialogActionProps = AlertDialogPrimitive.AlertDialogActionProps;
 
-const AlertDialogAction: FunctionComponent<AlertDialogActionProps> = AlertDialogActionPrimitive;
+const AlertDialogAction = AlertDialogPrimitive.Action;
 
 //
-// Title
-//
-
-type AlertDialogTitleProps = ThemedClassName<AlertDialogTitlePrimitiveProps> & { srOnly?: boolean };
-
-const AlertDialogTitle: ForwardRefExoticComponent<AlertDialogTitleProps> = forwardRef<
-  HTMLHeadingElement,
-  AlertDialogTitleProps
->(({ classNames, srOnly, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return (
-    <AlertDialogTitlePrimitive {...props} className={tx('dialog.title', { srOnly }, classNames)} ref={forwardedRef} />
-  );
-});
-
-//
-// Description
+// Context
 //
 
-type AlertDialogDescriptionProps = ThemedClassName<AlertDialogDescriptionPrimitiveProps> & { srOnly?: boolean };
-
-const AlertDialogDescription: ForwardRefExoticComponent<AlertDialogTitleProps> = forwardRef<
-  HTMLParagraphElement,
-  AlertDialogDescriptionProps
->(({ classNames, srOnly, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return (
-    <AlertDialogDescriptionPrimitive
-      {...props}
-      className={tx('dialog.description', { srOnly }, classNames)}
-      ref={forwardedRef}
-    />
-  );
-});
-
 type OverlayLayoutContextValue = { inOverlayLayout?: boolean };
 
-//
-// Context
-//
-
-const ALERT_DIALOG_OVERLAY_NAME = 'AlertDialogOverlay';
-const ALERT_DIALOG_CONTENT_NAME = 'AlertDialogContent';
-const ALERT_DIALOG_BODY_NAME = 'AlertDialogBody';
-const ALERT_DIALOG_ACTIONBAR_NAME = 'AlertDialogActionBar';
+const ALERT_DIALOG_OVERLAY_NAME = 'AlertDialog.Overlay';
+const ALERT_DIALOG_CONTENT_NAME = 'AlertDialog.Content';
 
 const [OverlayLayoutProvider, useOverlayLayoutContext] = createContext<OverlayLayoutContextValue>(
   ALERT_DIALOG_OVERLAY_NAME,
-  {
-    inOverlayLayout: false,
-  },
+  { inOverlayLayout: false },
 );
 
 //
 // Overlay
 //
 
-type AlertDialogOverlayProps = ThemedClassName<AlertDialogOverlayPrimitiveProps> & {
-  blockAlign?: 'center' | 'start' | 'end';
-};
+type AlertDialogOverlayProps = ThemedClassName<
+  AlertDialogPrimitive.AlertDialogOverlayProps & { blockAlign?: 'center' | 'start' | 'end' }
+>;
 
 const AlertDialogOverlay: ForwardRefExoticComponent<AlertDialogOverlayProps> = forwardRef<
   HTMLDivElement,
@@ -149,22 +91,14 @@ const AlertDialogOverlay: ForwardRefExoticComponent<AlertDialogOverlayProps> = f
 >(({ classNames, children, blockAlign, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return (
-    <AlertDialogOverlayPrimitive
+    <AlertDialogPrimitive.Overlay
       {...props}
       data-block-align={blockAlign}
-      className={tx(
-        'dialog.overlay',
-        {},
-        classNames,
-        // TODO(burdon): Move to dialog.ts.
-        'data-[h-align=start]:justify-center',
-        'data-[h-align=start]:items-start',
-        'data-[h-align=center]:place-content-center',
-      )}
+      className={tx('dialog.overlay', {}, classNames)}
       ref={forwardedRef}
     >
       <OverlayLayoutProvider inOverlayLayout>{children}</OverlayLayoutProvider>
-    </AlertDialogOverlayPrimitive>
+    </AlertDialogPrimitive.Overlay>
   );
 });
 
@@ -174,7 +108,7 @@ AlertDialogOverlay.displayName = ALERT_DIALOG_OVERLAY_NAME;
 // Content
 //
 
-type AlertDialogContentProps = ThemedClassName<AlertDialogContentPrimitiveProps> & { size?: DialogSize };
+type AlertDialogContentProps = ThemedClassName<AlertDialogPrimitive.AlertDialogContentProps> & { size?: DialogSize };
 
 const AlertDialogContent: ForwardRefExoticComponent<AlertDialogContentProps> = forwardRef<
   HTMLDivElement,
@@ -183,62 +117,61 @@ const AlertDialogContent: ForwardRefExoticComponent<AlertDialogContentProps> = f
   const { tx } = useThemeContext();
   const { inOverlayLayout } = useOverlayLayoutContext(ALERT_DIALOG_CONTENT_NAME);
   return (
-    <AlertDialogContentPrimitive
+    <AlertDialogPrimitive.Content
       {...props}
       className={tx('dialog.content', { inOverlayLayout, size }, classNames)}
+      // NOTE: Radix warning unless set to undefined.
+      // https://www.radix-ui.com/primitives/docs/components/dialog#description
+      aria-describedby={undefined}
       ref={forwardedRef}
     >
-      <Column.Root>{children}</Column.Root>
-    </AlertDialogContentPrimitive>
+      <Column.Root classNames='dx-expander' gutter='sm'>
+        {children}
+      </Column.Root>
+    </AlertDialogPrimitive.Content>
   );
 });
 
 AlertDialogContent.displayName = ALERT_DIALOG_CONTENT_NAME;
 
 //
-// Body
+// Title
 //
 
-type AlertDialogBodyProps = PropsWithChildren;
+type AlertDialogTitleProps = ThemedClassName<AlertDialogPrimitive.AlertDialogTitleProps> & { srOnly?: boolean };
 
-const AlertDialogBody: ForwardRefExoticComponent<AlertDialogBodyProps> = forwardRef<
-  HTMLDivElement,
-  AlertDialogBodyProps
->(({ children, ...props }, forwardedRef) => {
+const AlertDialogTitle: ForwardRefExoticComponent<AlertDialogTitleProps> = forwardRef<
+  HTMLHeadingElement,
+  AlertDialogTitleProps
+>(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return (
-    <Column.Segment asChild>
-      <div role='none' {...props} className={tx('dialog.body')} ref={forwardedRef}>
-        {children}
-      </div>
-    </Column.Segment>
+    <AlertDialogPrimitive.Title {...props} className={tx('dialog.title', { srOnly }, classNames)} ref={forwardedRef} />
   );
 });
 
-AlertDialogBody.displayName = ALERT_DIALOG_BODY_NAME;
-
 //
-// ActionBar
+// Description
 //
 
-type AlertDialogActionBarProps = ThemedClassName<PropsWithChildren>;
+type AlertDialogDescriptionProps = ThemedClassName<AlertDialogPrimitive.AlertDialogDescriptionProps> & {
+  srOnly?: boolean;
+};
 
-const AlertDialogActionBar: ForwardRefExoticComponent<AlertDialogActionBarProps> = forwardRef<
-  HTMLDivElement,
-  AlertDialogActionBarProps
->(({ children, classNames, ...props }, forwardedRef) => {
+const AlertDialogDescription: ForwardRefExoticComponent<AlertDialogDescriptionProps> = forwardRef<
+  HTMLParagraphElement,
+  AlertDialogDescriptionProps
+>(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return (
-    <Column.Segment asChild>
-      <div {...props} className={tx('dialog.actionbar', {}, classNames)} ref={forwardedRef}>
-        {children}
-      </div>
-    </Column.Segment>
+    <AlertDialogPrimitive.Description
+      {...props}
+      className={tx('dialog.description', { srOnly }, classNames)}
+      ref={forwardedRef}
+    />
   );
 });
 
-AlertDialogActionBar.displayName = ALERT_DIALOG_ACTIONBAR_NAME;
-
 //
 // AlertDialog
 //
@@ -249,10 +182,14 @@ export const AlertDialog = {
   Portal: AlertDialogPortal,
   Overlay: AlertDialogOverlay,
   Content: AlertDialogContent,
-  Body: AlertDialogBody,
+  // Shared with Dialog.
+  Header: Dialog.Header,
+  Body: Dialog.Body,
   Title: AlertDialogTitle,
   Description: AlertDialogDescription,
-  ActionBar: AlertDialogActionBar,
+  ActionBar: Dialog.ActionBar,
+  ActionIconButton: Dialog.ActionIconButton,
+  // AlertDialog-specific dismissal.
   Cancel: AlertDialogCancel,
   Action: AlertDialogAction,
 };
@@ -263,10 +200,13 @@ export type {
   AlertDialogPortalProps,
   AlertDialogOverlayProps,
   AlertDialogContentProps,
-  AlertDialogBodyProps,
   AlertDialogTitleProps,
   AlertDialogDescriptionProps,
-  AlertDialogActionBarProps,
   AlertDialogCancelProps,
   AlertDialogActionProps,
+  // Re-export shared types.
+  DialogHeaderProps as AlertDialogHeaderProps,
+  DialogBodyProps as AlertDialogBodyProps,
+  DialogActionBarProps as AlertDialogActionBarProps,
+  DialogActionIconButtonProps as AlertDialogActionIconButtonProps,
 };