@seed-design/lynx-react 0.7.1 → 0.9.0

package/src/components/AlertDialog/AlertDialog.test.tsx

@@ -0,0 +1,226 @@
+import type { ReactNode } from "@lynx-js/react";
+
+import { render } from "@lynx-js/react/testing-library";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const alertDialogMocks = vi.hoisted(() => ({
+  rootProps: [] as Array<Record<string, unknown>>,
+  viewProps: [] as Array<Record<string, unknown>>,
+  backdropProps: [] as Array<Record<string, unknown>>,
+  contentProps: [] as Array<Record<string, unknown>>,
+  closeProps: [] as Array<Record<string, unknown>>,
+}));
+
+vi.mock("@lynx-js/lynx-ui-dialog", () => {
+  const renderChildren = (children: unknown, status: Record<string, boolean>): ReactNode => {
+    if (typeof children === "function") {
+      return (children as (status: Record<string, boolean>) => ReactNode)(status);
+    }
+    return children as ReactNode;
+  };
+
+  const DialogRoot = (props: Record<string, unknown>) => {
+    alertDialogMocks.rootProps.push(props);
+    return <>{renderChildren(props["children"], { open: props["show"] === true })}</>;
+  };
+  DialogRoot.displayName = "MockDialogRoot";
+
+  const DialogTrigger = (props: Record<string, unknown>) => (
+    <view>{renderChildren(props["children"], { active: false, busy: false })}</view>
+  );
+  DialogTrigger.displayName = "MockDialogTrigger";
+
+  const DialogView = (props: Record<string, unknown>) => {
+    alertDialogMocks.viewProps.push(props);
+    return (
+      <view className={props["className"] as string}>
+        {renderChildren(props["children"], { open: props["show"] === true })}
+      </view>
+    );
+  };
+  DialogView.displayName = "MockDialogView";
+
+  const DialogBackdrop = (props: Record<string, unknown>) => {
+    alertDialogMocks.backdropProps.push(props);
+    return <view className={props["className"] as string}>{props["children"] as ReactNode}</view>;
+  };
+  DialogBackdrop.displayName = "MockDialogBackdrop";
+
+  const DialogContent = (props: Record<string, unknown>) => {
+    alertDialogMocks.contentProps.push(props);
+    return <view className={props["className"] as string}>{props["children"] as ReactNode}</view>;
+  };
+  DialogContent.displayName = "MockDialogContent";
+
+  const DialogClose = (props: Record<string, unknown>) => {
+    alertDialogMocks.closeProps.push(props);
+    return (
+      <view className={props["className"] as string}>
+        {renderChildren(props["children"], { active: false, busy: false })}
+      </view>
+    );
+  };
+  DialogClose.displayName = "MockDialogClose";
+
+  return {
+    DialogBackdrop,
+    DialogClose,
+    DialogContent,
+    DialogRoot,
+    DialogTrigger,
+    DialogView,
+  };
+});
+
+import * as AlertDialog from "./AlertDialog.namespace";
+
+describe("AlertDialog", () => {
+  beforeEach(() => {
+    alertDialogMocks.rootProps = [];
+    alertDialogMocks.viewProps = [];
+    alertDialogMocks.backdropProps = [];
+    alertDialogMocks.contentProps = [];
+    alertDialogMocks.closeProps = [];
+  });
+
+  it("maps the namespace API and applies dialog recipe classes", () => {
+    const onOpenChange = vi.fn();
+    const { container } = render(
+      <AlertDialog.Root open onOpenChange={onOpenChange}>
+        <AlertDialog.Trigger>
+          <text>Open</text>
+        </AlertDialog.Trigger>
+        <AlertDialog.Positioner>
+          <AlertDialog.Backdrop />
+          <AlertDialog.Content>
+            <AlertDialog.Header>
+              <AlertDialog.Title>Title</AlertDialog.Title>
+              <AlertDialog.Description>Description</AlertDialog.Description>
+            </AlertDialog.Header>
+            <AlertDialog.Footer>
+              <AlertDialog.Action>
+                <text>Cancel</text>
+              </AlertDialog.Action>
+            </AlertDialog.Footer>
+          </AlertDialog.Content>
+        </AlertDialog.Positioner>
+      </AlertDialog.Root>,
+    );
+
+    expect(alertDialogMocks.rootProps.at(-1)).toMatchObject({
+      show: true,
+      onShowChange: onOpenChange,
+    });
+    expect(container.querySelector(".seed-alert-dialog__positioner")).not.toBeNull();
+    expect(container.querySelector(".seed-alert-dialog__backdrop")).not.toBeNull();
+    expect(container.querySelector(".seed-alert-dialog__content")).not.toBeNull();
+    expect(container.querySelector(".seed-alert-dialog__header")).not.toBeNull();
+    expect(container.querySelector(".seed-alert-dialog__title")).not.toBeNull();
+    expect(container.querySelector(".seed-alert-dialog__description")).not.toBeNull();
+    expect(container.querySelector(".seed-alert-dialog__footer")).not.toBeNull();
+    expect(container.querySelector(".seed-alert-dialog__action")).not.toBeNull();
+  });
+
+  it("does not dismiss from the backdrop by default and preserves explicit overrides", () => {
+    render(
+      <AlertDialog.Root defaultOpen>
+        <AlertDialog.Positioner>
+          <AlertDialog.Backdrop />
+          <AlertDialog.Content />
+        </AlertDialog.Positioner>
+      </AlertDialog.Root>,
+    );
+
+    expect(alertDialogMocks.backdropProps.at(-1)).toHaveProperty("clickToClose", false);
+
+    render(
+      <AlertDialog.Root defaultOpen>
+        <AlertDialog.Positioner>
+          <AlertDialog.Backdrop clickToClose />
+          <AlertDialog.Content />
+        </AlertDialog.Positioner>
+      </AlertDialog.Root>,
+    );
+
+    expect(alertDialogMocks.backdropProps.at(-1)).toHaveProperty("clickToClose", true);
+  });
+
+  it("provides alert dialog accessibility defaults and preserves consumer overrides", () => {
+    const { container } = render(
+      <AlertDialog.Root defaultOpen>
+        <AlertDialog.Positioner>
+          <AlertDialog.Backdrop />
+          <AlertDialog.Content>
+            <AlertDialog.Title>Title</AlertDialog.Title>
+          </AlertDialog.Content>
+        </AlertDialog.Positioner>
+      </AlertDialog.Root>,
+    );
+
+    expect(alertDialogMocks.contentProps.at(-1)?.["dialogContentProps"]).toMatchObject({
+      "accessibility-element": true,
+      "accessibility-role-description": "alertdialog",
+    });
+    expect(container.querySelector("text")?.getAttribute("accessibility-heading")).toBe("true");
+
+    const { container: overriddenContainer } = render(
+      <AlertDialog.Root defaultOpen>
+        <AlertDialog.Positioner>
+          <AlertDialog.Content
+            accessibility-element={false}
+            accessibility-role-description="custom dialog"
+          />
+          <AlertDialog.Title accessibility-heading={false}>Title</AlertDialog.Title>
+        </AlertDialog.Positioner>
+      </AlertDialog.Root>,
+    );
+
+    expect(alertDialogMocks.contentProps.at(-1)?.["dialogContentProps"]).toMatchObject({
+      "accessibility-element": false,
+      "accessibility-role-description": "custom dialog",
+    });
+    const overriddenTexts = overriddenContainer.querySelectorAll("text");
+    expect(
+      overriddenTexts.item(overriddenTexts.length - 1)?.getAttribute("accessibility-heading"),
+    ).toBe("false");
+  });
+
+  it("disables transitions with skipAnimation and removes reserved lifecycle handlers", () => {
+    const userBindTap = vi.fn();
+    const dialogContentProps = {
+      style: { paddingTop: "12px" },
+      bindtap: userBindTap,
+    };
+
+    render(
+      <AlertDialog.Root defaultOpen forceMount skipAnimation>
+        <AlertDialog.Positioner container="window" overlayLevel={2} style={{ width: "80%" }}>
+          <AlertDialog.Backdrop />
+          <AlertDialog.Content dialogContentProps={dialogContentProps} />
+        </AlertDialog.Positioner>
+      </AlertDialog.Root>,
+    );
+
+    expect(alertDialogMocks.rootProps.at(-1)).toMatchObject({
+      defaultShow: true,
+      forceMount: true,
+    });
+    expect(alertDialogMocks.viewProps.at(-1)).toMatchObject({
+      container: "window",
+      overlayLevel: 2,
+      style: { width: "80%", height: "100%" },
+      transition: false,
+    });
+    expect(alertDialogMocks.backdropProps.at(-1)).toMatchObject({ transition: false });
+    expect(alertDialogMocks.contentProps.at(-1)).toMatchObject({ transition: false });
+    expect(alertDialogMocks.contentProps.at(-1)?.["dialogContentProps"]).toMatchObject({
+      style: { paddingTop: "12px" },
+      "accessibility-element": true,
+      "accessibility-role-description": "alertdialog",
+    });
+    expect(alertDialogMocks.contentProps.at(-1)?.["dialogContentProps"]).not.toHaveProperty(
+      "bindtap",
+    );
+    expect(userBindTap).not.toHaveBeenCalled();
+  });
+});

package/src/components/AlertDialog/AlertDialog.tsx

@@ -0,0 +1,374 @@
+import {
+  DialogBackdrop as DialogBackdropPrimitive,
+  DialogClose as DialogClosePrimitive,
+  DialogContent as DialogContentPrimitive,
+  DialogRoot as DialogRootPrimitive,
+  DialogTrigger as DialogTriggerPrimitive,
+  DialogView as DialogViewPrimitive,
+  type DialogBackdropProps as DialogPrimitiveBackdropProps,
+  type DialogCloseProps as DialogPrimitiveCloseProps,
+  type DialogContentProps as DialogPrimitiveContentProps,
+  type DialogRootProps as DialogPrimitiveRootProps,
+  type DialogTriggerProps as DialogPrimitiveTriggerProps,
+  type DialogViewProps as DialogPrimitiveViewProps,
+} from "@lynx-js/lynx-ui-dialog";
+import {
+  forwardRef,
+  type ForwardRefExoticComponent,
+  type PropsWithoutRef,
+  type ReactElement,
+  type RefAttributes,
+} from "@lynx-js/react";
+import {
+  alertDialog,
+  type AlertDialogVariantProps,
+} from "@seed-design/lynx-css/recipes/alert-dialog";
+import clsx from "clsx";
+
+import type {
+  LynxAccessibilityProps,
+  LynxStyledElementProps,
+  LynxTextRef,
+  LynxViewRef,
+} from "../../types";
+import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context";
+import { useStyleProps, type StyleProps } from "../../utils/styled";
+
+type AlertDialogComponent<Props> = ((props: Props) => ReactElement) & {
+  displayName?: string;
+};
+type LynxForwardRefComponent<T, Props> = ForwardRefExoticComponent<
+  PropsWithoutRef<Props> & RefAttributes<T>
+>;
+
+type NativeLifecycleHandlers = {
+  bindanimationstart?: unknown;
+  bindanimationend?: unknown;
+  bindanimationcancel?: unknown;
+  bindtransitionstart?: unknown;
+  bindtransitionend?: unknown;
+  bindtap?: unknown;
+};
+
+const { ClassNamesProvider, PropsProvider, useClassNames, useProps } =
+  createSlotRecipeContext(alertDialog);
+
+function omitHeadlessLifecycleHandlers<Props extends object>(
+  props: Props | undefined,
+): Props | undefined {
+  if (!props) return props;
+
+  const {
+    bindanimationstart: _bindanimationstart,
+    bindanimationend: _bindanimationend,
+    bindanimationcancel: _bindanimationcancel,
+    bindtransitionstart: _bindtransitionstart,
+    bindtransitionend: _bindtransitionend,
+    bindtap: _bindtap,
+    ...nativeProps
+  } = props as Props & NativeLifecycleHandlers;
+
+  return nativeProps as Props;
+}
+
+function useAlertDialogTransition(transition: boolean | undefined) {
+  const skipAnimation = useProps()?.skipAnimation === true;
+
+  return skipAnimation ? false : (transition ?? true);
+}
+
+////////////////////////////////////////////////////////////////////////////////////
+// Root
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AlertDialogRootProps
+  extends AlertDialogVariantProps,
+    Omit<DialogPrimitiveRootProps, "show" | "defaultShow" | "onShowChange"> {
+  /** Whether the alert dialog is open (controlled mode). */
+  open?: boolean;
+  /** Whether the alert dialog is open by default (uncontrolled mode). */
+  defaultOpen?: boolean;
+  /** Called when the alert dialog's open state changes. */
+  onOpenChange?: (open: boolean) => void;
+}
+
+/**
+ * @platform Lynx — wraps `@lynx-js/lynx-ui-dialog` as an alert dialog.
+ * Refs, `asChild`, focus management, Escape-key dismissal, and close reasons are
+ * not supported by the Lynx primitive.
+ */
+export const AlertDialogRoot = forwardRef<never, AlertDialogRootProps>((props, _ref) => {
+  const [variantProps, restProps] = alertDialog.splitVariantProps(props);
+  const { children, open, defaultOpen, onOpenChange, ...nativeProps } = restProps;
+  const classNames = alertDialog(variantProps);
+
+  return (
+    <ClassNamesProvider value={classNames}>
+      <PropsProvider value={variantProps}>
+        <DialogRootPrimitive
+          {...nativeProps}
+          show={open}
+          defaultShow={defaultOpen}
+          onShowChange={onOpenChange}
+        >
+          {children}
+        </DialogRootPrimitive>
+      </PropsProvider>
+    </ClassNamesProvider>
+  );
+}) as AlertDialogComponent<AlertDialogRootProps>;
+AlertDialogRoot.displayName = "AlertDialogRoot";
+
+////////////////////////////////////////////////////////////////////////////////////
+// Trigger
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AlertDialogTriggerProps extends DialogPrimitiveTriggerProps {}
+
+/** @platform Lynx — `asChild` and refs are unsupported. */
+export const AlertDialogTrigger = forwardRef<never, AlertDialogTriggerProps>((props, _ref) => {
+  const { children, transition, ...nativeProps } = props;
+  const resolvedTransition = useAlertDialogTransition(transition);
+
+  return (
+    <DialogTriggerPrimitive {...nativeProps} transition={resolvedTransition}>
+      {children}
+    </DialogTriggerPrimitive>
+  );
+}) as AlertDialogComponent<AlertDialogTriggerProps>;
+AlertDialogTrigger.displayName = "AlertDialogTrigger";
+
+////////////////////////////////////////////////////////////////////////////////////
+// Positioner
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AlertDialogPositionerProps extends DialogPrimitiveViewProps {}
+
+/** @platform Lynx — maps to `DialogView`; refs are unsupported. */
+export const AlertDialogPositioner = forwardRef<never, AlertDialogPositionerProps>(
+  (props, _ref) => {
+    const { children, className, container, style, transition, ...nativeProps } = props;
+    const classNames = useClassNames();
+    const resolvedTransition = useAlertDialogTransition(transition);
+    const positionerStyle = container ? { width: "100%", height: "100%", ...style } : style;
+
+    return (
+      <DialogViewPrimitive
+        {...nativeProps}
+        container={container}
+        className={clsx(classNames.positioner, className)}
+        style={positionerStyle}
+        transition={resolvedTransition}
+      >
+        {children}
+      </DialogViewPrimitive>
+    );
+  },
+) as AlertDialogComponent<AlertDialogPositionerProps>;
+AlertDialogPositioner.displayName = "AlertDialogPositioner";
+
+////////////////////////////////////////////////////////////////////////////////////
+// Backdrop
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AlertDialogBackdropProps extends DialogPrimitiveBackdropProps {}
+
+/**
+ * @platform Lynx — refs are unsupported. Native lifecycle handlers in
+ * `dialogBackdropProps` are reserved by the headless primitive and are omitted.
+ * Alert dialogs do not dismiss when the backdrop is tapped by default.
+ */
+export const AlertDialogBackdrop = forwardRef<never, AlertDialogBackdropProps>((props, _ref) => {
+  const {
+    children,
+    className,
+    transition,
+    clickToClose = false,
+    dialogBackdropProps,
+    ...nativeProps
+  } = props;
+  const classNames = useClassNames();
+  const resolvedTransition = useAlertDialogTransition(transition);
+
+  return (
+    <DialogBackdropPrimitive
+      {...nativeProps}
+      className={clsx(classNames.backdrop, className)}
+      transition={resolvedTransition}
+      clickToClose={clickToClose}
+      dialogBackdropProps={omitHeadlessLifecycleHandlers(dialogBackdropProps)}
+    >
+      {children}
+    </DialogBackdropPrimitive>
+  );
+}) as AlertDialogComponent<AlertDialogBackdropProps>;
+AlertDialogBackdrop.displayName = "AlertDialogBackdrop";
+
+////////////////////////////////////////////////////////////////////////////////////
+// Content
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AlertDialogContentProps
+  extends DialogPrimitiveContentProps,
+    LynxAccessibilityProps {}
+
+/**
+ * @platform Lynx — refs are unsupported. Native lifecycle handlers in
+ * `dialogContentProps` are reserved by the headless primitive and are omitted.
+ */
+export const AlertDialogContent = forwardRef<never, AlertDialogContentProps>((props, _ref) => {
+  const {
+    children,
+    className,
+    transition,
+    dialogContentProps,
+    "accessibility-element": accessibilityElement = true,
+    "accessibility-role-description": accessibilityRoleDescription = "alertdialog",
+    ...nativeProps
+  } = props;
+  const classNames = useClassNames();
+  const resolvedTransition = useAlertDialogTransition(transition);
+  const resolvedDialogContentProps = {
+    "accessibility-element": accessibilityElement,
+    "accessibility-role-description": accessibilityRoleDescription,
+    ...omitHeadlessLifecycleHandlers(dialogContentProps),
+  };
+
+  return (
+    <DialogContentPrimitive
+      {...nativeProps}
+      className={clsx(classNames.content, className)}
+      transition={resolvedTransition}
+      dialogContentProps={resolvedDialogContentProps}
+    >
+      {children}
+    </DialogContentPrimitive>
+  );
+}) as AlertDialogComponent<AlertDialogContentProps>;
+AlertDialogContent.displayName = "AlertDialogContent";
+
+////////////////////////////////////////////////////////////////////////////////////
+// Local slots
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AlertDialogHeaderProps extends StyleProps, LynxStyledElementProps {}
+
+export const AlertDialogHeader: LynxForwardRefComponent<unknown, AlertDialogHeaderProps> =
+  forwardRef<unknown, AlertDialogHeaderProps>((props, ref) => {
+    const { style, restProps } = useStyleProps(props);
+    const { children, className, ...nativeProps } = restProps;
+    const classNames = useClassNames();
+
+    return (
+      <view
+        {...(ref ? ({ ref: ref as LynxViewRef } as Record<string, unknown>) : {})}
+        {...nativeProps}
+        className={clsx(classNames.header, className)}
+        style={style as never}
+      >
+        {children}
+      </view>
+    );
+  });
+AlertDialogHeader.displayName = "AlertDialogHeader";
+
+export interface AlertDialogTitleProps
+  extends StyleProps,
+    LynxStyledElementProps,
+    LynxAccessibilityProps {}
+
+export const AlertDialogTitle: LynxForwardRefComponent<unknown, AlertDialogTitleProps> = forwardRef<
+  unknown,
+  AlertDialogTitleProps
+>((props, ref) => {
+  const { style, restProps } = useStyleProps(props);
+  const {
+    children,
+    className,
+    "accessibility-heading": accessibilityHeading = true,
+    ...nativeProps
+  } = restProps;
+  const classNames = useClassNames();
+
+  return (
+    <text
+      {...(ref ? ({ ref: ref as LynxTextRef } as Record<string, unknown>) : {})}
+      {...nativeProps}
+      className={clsx(classNames.title, className)}
+      style={style as never}
+      accessibility-heading={accessibilityHeading}
+    >
+      {children}
+    </text>
+  );
+});
+AlertDialogTitle.displayName = "AlertDialogTitle";
+
+export interface AlertDialogDescriptionProps
+  extends StyleProps,
+    LynxStyledElementProps,
+    LynxAccessibilityProps {}
+
+export const AlertDialogDescription: LynxForwardRefComponent<unknown, AlertDialogDescriptionProps> =
+  forwardRef<unknown, AlertDialogDescriptionProps>((props, ref) => {
+    const { style, restProps } = useStyleProps(props);
+    const { children, className, ...nativeProps } = restProps;
+    const classNames = useClassNames();
+
+    return (
+      <text
+        {...(ref ? ({ ref: ref as LynxTextRef } as Record<string, unknown>) : {})}
+        {...nativeProps}
+        className={clsx(classNames.description, className)}
+        style={style as never}
+      >
+        {children}
+      </text>
+    );
+  });
+AlertDialogDescription.displayName = "AlertDialogDescription";
+
+export interface AlertDialogFooterProps extends StyleProps, LynxStyledElementProps {}
+
+export const AlertDialogFooter: LynxForwardRefComponent<unknown, AlertDialogFooterProps> =
+  forwardRef<unknown, AlertDialogFooterProps>((props, ref) => {
+    const { style, restProps } = useStyleProps(props);
+    const { children, className, ...nativeProps } = restProps;
+    const classNames = useClassNames();
+
+    return (
+      <view
+        {...(ref ? ({ ref: ref as LynxViewRef } as Record<string, unknown>) : {})}
+        {...nativeProps}
+        className={clsx(classNames.footer, className)}
+        style={style as never}
+      >
+        {children}
+      </view>
+    );
+  });
+AlertDialogFooter.displayName = "AlertDialogFooter";
+
+////////////////////////////////////////////////////////////////////////////////////
+// Action
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AlertDialogActionProps extends DialogPrimitiveCloseProps {}
+
+/** @platform Lynx — maps to `DialogClose`; `asChild` and refs are unsupported. */
+export const AlertDialogAction = forwardRef<never, AlertDialogActionProps>((props, _ref) => {
+  const { children, className, transition, ...nativeProps } = props;
+  const classNames = useClassNames();
+  const resolvedTransition = useAlertDialogTransition(transition);
+
+  return (
+    <DialogClosePrimitive
+      {...nativeProps}
+      className={clsx(classNames.action, className)}
+      transition={resolvedTransition}
+    >
+      {children}
+    </DialogClosePrimitive>
+  );
+}) as AlertDialogComponent<AlertDialogActionProps>;
+AlertDialogAction.displayName = "AlertDialogAction";

package/src/components/AlertDialog/index.ts

@@ -0,0 +1,24 @@
+export {
+  AlertDialogAction,
+  type AlertDialogActionProps,
+  AlertDialogBackdrop,
+  type AlertDialogBackdropProps,
+  AlertDialogContent,
+  type AlertDialogContentProps,
+  AlertDialogDescription,
+  type AlertDialogDescriptionProps,
+  AlertDialogFooter,
+  type AlertDialogFooterProps,
+  AlertDialogHeader,
+  type AlertDialogHeaderProps,
+  AlertDialogPositioner,
+  type AlertDialogPositionerProps,
+  AlertDialogRoot,
+  type AlertDialogRootProps,
+  AlertDialogTitle,
+  type AlertDialogTitleProps,
+  AlertDialogTrigger,
+  type AlertDialogTriggerProps,
+} from "./AlertDialog";
+
+export * as AlertDialog from "./AlertDialog.namespace";

package/src/components/AppBar/AppBar.namespace.ts

@@ -7,6 +7,7 @@ export {
   AppBarSlot as Slot,
   AppBarSubtitle as Subtitle,
   AppBarTitle as Title,
+  type AppBarEdge as Edge,
   type AppBarIconButtonProps as IconButtonProps,
   type AppBarLeftProps as LeftProps,
   type AppBarMainProps as MainProps,