@dxos/react-ui 0.8.4-main.fd6878d → 0.8.4-staging.60fe92afc8

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

@@ -0,0 +1,68 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { random } from '@dxos/random';
+
+import { withTheme } from '../../testing';
+import { Button } from '../Button';
+import { AlertDialog } from './AlertDialog';
+
+type DefaultStoryProps = Partial<{
+  title: string;
+  description: string;
+  openTrigger: string;
+  cancelTrigger: string;
+  actionTrigger: string;
+}>;
+
+const DefaultStory = ({ title, description, openTrigger, cancelTrigger, actionTrigger }: DefaultStoryProps) => {
+  return (
+    <AlertDialog.Root defaultOpen>
+      <AlertDialog.Trigger asChild>
+        <Button>{openTrigger}</Button>
+      </AlertDialog.Trigger>
+      <AlertDialog.Overlay>
+        <AlertDialog.Content>
+          <AlertDialog.Body>
+            <AlertDialog.Title>{title}</AlertDialog.Title>
+            <AlertDialog.Description>{description}</AlertDialog.Description>
+          </AlertDialog.Body>
+          <AlertDialog.ActionBar>
+            <div className='grow' />
+            <AlertDialog.Cancel asChild>
+              <Button>{cancelTrigger}</Button>
+            </AlertDialog.Cancel>
+            <AlertDialog.Action asChild>
+              <Button variant='primary'>{actionTrigger}</Button>
+            </AlertDialog.Action>
+          </AlertDialog.ActionBar>
+        </AlertDialog.Content>
+      </AlertDialog.Overlay>
+    </AlertDialog.Root>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-core/components/AlertDialog',
+  component: AlertDialog.Root as any,
+  render: DefaultStory as any,
+  decorators: [withTheme()],
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    title: random.lorem.sentence(3),
+    description: random.lorem.paragraph(1),
+    openTrigger: 'Open AlertDialog',
+    cancelTrigger: 'Cancel',
+    actionTrigger: 'Action',
+  },
+};

package/src/components/Dialog/AlertDialog.tsx

@@ -0,0 +1,209 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import { createContext } from '@radix-ui/react-context';
+import React, { type ForwardRefExoticComponent, type FunctionComponent, forwardRef } from 'react';
+
+import { useThemeContext } from '../../hooks';
+import { ElevationProvider } from '../../primitives';
+import { type DialogSize } from '../../theme';
+import { type ThemedClassName } from '../../util';
+import { Column } from '../Column';
+import {
+  Dialog,
+  type DialogHeaderProps,
+  type DialogBodyProps,
+  type DialogActionBarProps,
+  type DialogActionIconButtonProps,
+} from './Dialog';
+
+//
+// Root
+//
+
+type AlertDialogRootProps = AlertDialogPrimitive.AlertDialogProps;
+
+const AlertDialogRoot: FunctionComponent<AlertDialogRootProps> = (props) => (
+  <ElevationProvider elevation='dialog'>
+    <AlertDialogPrimitive.Root {...props} />
+  </ElevationProvider>
+);
+
+//
+// Trigger
+//
+
+type AlertDialogTriggerProps = AlertDialogPrimitive.AlertDialogTriggerProps;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+//
+// Portal
+//
+
+type AlertDialogPortalProps = AlertDialogPrimitive.AlertDialogPortalProps;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+//
+// Cancel
+//
+
+type AlertDialogCancelProps = AlertDialogPrimitive.AlertDialogCancelProps;
+
+const AlertDialogCancel = AlertDialogPrimitive.Cancel;
+
+//
+// Action
+//
+
+type AlertDialogActionProps = AlertDialogPrimitive.AlertDialogActionProps;
+
+const AlertDialogAction = AlertDialogPrimitive.Action;
+
+//
+// Context
+//
+
+type OverlayLayoutContextValue = { inOverlayLayout?: boolean };
+
+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 },
+);
+
+//
+// Overlay
+//
+
+type AlertDialogOverlayProps = ThemedClassName<
+  AlertDialogPrimitive.AlertDialogOverlayProps & { blockAlign?: 'center' | 'start' | 'end' }
+>;
+
+const AlertDialogOverlay: ForwardRefExoticComponent<AlertDialogOverlayProps> = forwardRef<
+  HTMLDivElement,
+  AlertDialogOverlayProps
+>(({ classNames, children, blockAlign, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return (
+    <AlertDialogPrimitive.Overlay
+      {...props}
+      data-block-align={blockAlign}
+      className={tx('dialog.overlay', {}, classNames)}
+      ref={forwardedRef}
+    >
+      <OverlayLayoutProvider inOverlayLayout>{children}</OverlayLayoutProvider>
+    </AlertDialogPrimitive.Overlay>
+  );
+});
+
+AlertDialogOverlay.displayName = ALERT_DIALOG_OVERLAY_NAME;
+
+//
+// Content
+//
+
+type AlertDialogContentProps = ThemedClassName<AlertDialogPrimitive.AlertDialogContentProps> & { size?: DialogSize };
+
+const AlertDialogContent: ForwardRefExoticComponent<AlertDialogContentProps> = forwardRef<
+  HTMLDivElement,
+  AlertDialogContentProps
+>(({ classNames, children, size = 'md', ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const { inOverlayLayout } = useOverlayLayoutContext(ALERT_DIALOG_CONTENT_NAME);
+  return (
+    <AlertDialogPrimitive.Content
+      {...props}
+      className={tx('dialog.content', { inOverlayLayout, size }, classNames)}
+      ref={forwardedRef}
+    >
+      <Column.Root classNames='dx-expander' gutter='sm'>
+        {children}
+      </Column.Root>
+    </AlertDialogPrimitive.Content>
+  );
+});
+
+AlertDialogContent.displayName = ALERT_DIALOG_CONTENT_NAME;
+
+//
+// Title
+//
+
+type AlertDialogTitleProps = ThemedClassName<AlertDialogPrimitive.AlertDialogTitleProps> & { srOnly?: boolean };
+
+const AlertDialogTitle: ForwardRefExoticComponent<AlertDialogTitleProps> = forwardRef<
+  HTMLHeadingElement,
+  AlertDialogTitleProps
+>(({ classNames, srOnly, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return (
+    <AlertDialogPrimitive.Title {...props} className={tx('dialog.title', { srOnly }, classNames)} ref={forwardedRef} />
+  );
+});
+
+//
+// Description
+//
+
+type AlertDialogDescriptionProps = ThemedClassName<AlertDialogPrimitive.AlertDialogDescriptionProps> & {
+  srOnly?: boolean;
+};
+
+const AlertDialogDescription: ForwardRefExoticComponent<AlertDialogDescriptionProps> = forwardRef<
+  HTMLParagraphElement,
+  AlertDialogDescriptionProps
+>(({ classNames, srOnly, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return (
+    <AlertDialogPrimitive.Description
+      {...props}
+      className={tx('dialog.description', { srOnly }, classNames)}
+      ref={forwardedRef}
+    />
+  );
+});
+
+//
+// AlertDialog
+//
+
+export const AlertDialog = {
+  Root: AlertDialogRoot,
+  Trigger: AlertDialogTrigger,
+  Portal: AlertDialogPortal,
+  Overlay: AlertDialogOverlay,
+  Content: AlertDialogContent,
+  // Shared with Dialog.
+  Header: Dialog.Header,
+  Body: Dialog.Body,
+  Title: AlertDialogTitle,
+  Description: AlertDialogDescription,
+  ActionBar: Dialog.ActionBar,
+  ActionIconButton: Dialog.ActionIconButton,
+  // AlertDialog-specific dismissal.
+  Cancel: AlertDialogCancel,
+  Action: AlertDialogAction,
+};
+
+export type {
+  AlertDialogRootProps,
+  AlertDialogTriggerProps,
+  AlertDialogPortalProps,
+  AlertDialogOverlayProps,
+  AlertDialogContentProps,
+  AlertDialogTitleProps,
+  AlertDialogDescriptionProps,
+  AlertDialogCancelProps,
+  AlertDialogActionProps,
+  // Re-export shared types.
+  DialogHeaderProps as AlertDialogHeaderProps,
+  DialogBodyProps as AlertDialogBodyProps,
+  DialogActionBarProps as AlertDialogActionBarProps,
+  DialogActionIconButtonProps as AlertDialogActionIconButtonProps,
+};