@seed-design/lynx-react 0.7.1 → 0.9.0

package/src/components/ContextualFloatingButton/ContextualFloatingButton.tsx

@@ -0,0 +1,232 @@
+import {
+  contextualFloatingButton,
+  type ContextualFloatingButtonVariantProps,
+} from "@seed-design/lynx-css/recipes/contextual-floating-button";
+import clsx from "clsx";
+import * as React from "@lynx-js/react";
+
+import { usePressTap } from "../../hooks/usePressTap";
+import { useScaleFeedback } from "../../hooks/useScaleFeedback";
+import type {
+  LynxAccessibilityProps,
+  LynxElementProps,
+  LynxPressableProps,
+  LynxStyledElementProps,
+  LynxTouchProps,
+  LynxViewRef,
+} from "../../types";
+import { toArray } from "../../utils/children";
+import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context";
+import { mergeProps } from "../../utils/merge-props";
+import { IconRequired, IconSlotProvider, getIconSlotName } from "../Icon/Icon";
+import { ProgressCircleRange, ProgressCircleRoot } from "../ProgressCircle";
+
+const { ClassNamesProvider, useClassNames } = createSlotRecipeContext(contextualFloatingButton);
+
+type ContextualFloatingButtonPublicVariantProps = Omit<
+  ContextualFloatingButtonVariantProps,
+  "pressed"
+>;
+
+interface ContextualFloatingButtonRootProps
+  extends ContextualFloatingButtonVariantProps,
+    Omit<LynxStyledElementProps, "flatten">,
+    LynxTouchProps,
+    LynxAccessibilityProps {
+  flatten?: false;
+}
+
+const ContextualFloatingButtonRoot = React.forwardRef<unknown, ContextualFloatingButtonRootProps>(
+  (innerProps, ref) => {
+    const [variantProps, otherProps] = contextualFloatingButton.splitVariantProps(innerProps);
+    const classNames = contextualFloatingButton(variantProps);
+    const { children, className, ...nativeProps } = otherProps;
+    const iconSlotContextValue = React.useMemo(
+      () => ({
+        classNames: {
+          icon: classNames.icon,
+          prefixIcon: classNames.prefixIcon,
+        },
+        deps: [
+          variantProps.variant ?? null,
+          variantProps.layout ?? null,
+          variantProps.pressed ?? false,
+          variantProps.disabled ?? false,
+          variantProps.loading ?? false,
+        ],
+      }),
+      [
+        classNames.icon,
+        classNames.prefixIcon,
+        variantProps.variant,
+        variantProps.layout,
+        variantProps.pressed,
+        variantProps.disabled,
+        variantProps.loading,
+      ],
+    );
+
+    return (
+      <ClassNamesProvider value={classNames}>
+        <IconSlotProvider value={iconSlotContextValue}>
+          <view
+            {...mergeProps(ref ? { ref: ref as LynxViewRef } : {}, nativeProps)}
+            className={clsx(classNames.root, className)}
+          >
+            {children}
+          </view>
+        </IconSlotProvider>
+      </ClassNamesProvider>
+    );
+  },
+);
+ContextualFloatingButtonRoot.displayName = "ContextualFloatingButtonRoot";
+
+function ContextualFloatingButtonText({ children }: LynxElementProps) {
+  const classNames = useClassNames();
+
+  return <text className={classNames.text}>{children}</text>;
+}
+
+function ContextualFloatingButtonContent({
+  children,
+  isIconOnly,
+}: {
+  children: React.ReactNode;
+  isIconOnly: boolean;
+}) {
+  const classNames = useClassNames();
+  const prefixIconChildren: React.ReactNode[] = [];
+  const iconChildren: React.ReactNode[] = [];
+  const textChildren: React.ReactNode[] = [];
+
+  for (const child of toArray(children)) {
+    const slotName = getIconSlotName(child);
+
+    if (slotName === "prefixIcon") {
+      prefixIconChildren.push(child);
+      continue;
+    }
+    if (slotName === "icon") {
+      iconChildren.push(child);
+      continue;
+    }
+
+    textChildren.push(child);
+  }
+
+  return (
+    <view className={classNames.content}>
+      {isIconOnly ? (
+        <>{iconChildren}</>
+      ) : (
+        <>
+          {prefixIconChildren}
+          {textChildren.length > 0 ? (
+            <ContextualFloatingButtonText>{textChildren}</ContextualFloatingButtonText>
+          ) : null}
+        </>
+      )}
+    </view>
+  );
+}
+
+function ContextualFloatingButtonLoadingIndicator() {
+  const classNames = useClassNames();
+
+  return (
+    <view className={classNames.loadingIndicator}>
+      <ProgressCircleRoot size="16" tone="inherit">
+        <ProgressCircleRange />
+      </ProgressCircleRoot>
+    </view>
+  );
+}
+
+/**
+ * @platform Lynx
+ *
+ * Web version differences:
+ * - Native `<view>` and `bindtap` / `main-thread:bindtap` replace HTML button events,
+ *   form props, and `asChild`.
+ * - `loading` blocks both native tap callbacks, unlike the React reference which only
+ *   exposes pending state to its underlying button.
+ */
+export interface ContextualFloatingButtonProps
+  extends ContextualFloatingButtonPublicVariantProps,
+    Omit<LynxStyledElementProps, "flatten">,
+    LynxPressableProps,
+    LynxAccessibilityProps {}
+
+export const ContextualFloatingButton = React.forwardRef<unknown, ContextualFloatingButtonProps>(
+  (props, ref) => {
+    const [variantProps, otherProps] = contextualFloatingButton.splitVariantProps(props);
+    const {
+      children,
+      bindtap,
+      "main-thread:bindtap": mainThreadBindtap,
+      "accessibility-element": accessibilityElement = true,
+      "accessibility-label": accessibilityLabel,
+      "accessibility-role-description": accessibilityRoleDescription = "button",
+      "accessibility-traits": accessibilityTraits,
+      ...nativeProps
+    } = otherProps;
+    const layout = variantProps.layout ?? "withText";
+    const disabled = variantProps.disabled ?? false;
+    const loading = variantProps.loading ?? false;
+    const isInteractive = !disabled && !loading;
+
+    if (
+      process.env.NODE_ENV !== "production" &&
+      layout === "iconOnly" &&
+      accessibilityElement &&
+      !accessibilityLabel
+    ) {
+      console.warn(
+        'ContextualFloatingButton: `layout="iconOnly"` requires `accessibility-label` for accessibility.',
+      );
+    }
+
+    const { pressed, bindtouchstart, bindtouchend, bindtouchcancel, ...pressTapHandlers } =
+      usePressTap({
+        disabled: !isInteractive,
+        onTap: bindtap,
+        mainThreadOnTap: mainThreadBindtap,
+      });
+    const { scaleFeedbackTriggerProps, scaleFeedbackTargetProps } = useScaleFeedback({
+      disabled: !isInteractive,
+      onTouchStart: bindtouchstart,
+      onTouchEnd: bindtouchend,
+      onTouchCancel: bindtouchcancel,
+    });
+
+    return (
+      <IconRequired enabled={layout === "iconOnly"}>
+        <ContextualFloatingButtonRoot
+          {...mergeProps(
+            { ref },
+            scaleFeedbackTargetProps,
+            scaleFeedbackTriggerProps,
+            pressTapHandlers,
+            nativeProps,
+          )}
+          {...variantProps}
+          pressed={pressed}
+          accessibility-element={accessibilityElement}
+          accessibility-label={accessibilityLabel}
+          accessibility-role-description={accessibilityRoleDescription}
+          accessibility-traits={
+            accessibilityTraits ?? (disabled || loading ? "disabled" : undefined)
+          }
+          flatten={false}
+        >
+          {loading ? <ContextualFloatingButtonLoadingIndicator /> : null}
+          <ContextualFloatingButtonContent isIconOnly={layout === "iconOnly"}>
+            {children}
+          </ContextualFloatingButtonContent>
+        </ContextualFloatingButtonRoot>
+      </IconRequired>
+    );
+  },
+);
+ContextualFloatingButton.displayName = "ContextualFloatingButton";

package/src/components/ContextualFloatingButton/index.ts

@@ -0,0 +1,4 @@
+export {
+  ContextualFloatingButton,
+  type ContextualFloatingButtonProps,
+} from "./ContextualFloatingButton";

package/src/components/Dialog/Dialog.namespace.ts

@@ -0,0 +1,24 @@
+export {
+  DialogAction as Action,
+  DialogBackdrop as Backdrop,
+  DialogBody as Body,
+  DialogContent as Content,
+  DialogDescription as Description,
+  DialogFooter as Footer,
+  DialogHeader as Header,
+  DialogPositioner as Positioner,
+  DialogRoot as Root,
+  DialogTitle as Title,
+  DialogTrigger as Trigger,
+  type DialogActionProps as ActionProps,
+  type DialogBackdropProps as BackdropProps,
+  type DialogBodyProps as BodyProps,
+  type DialogContentProps as ContentProps,
+  type DialogDescriptionProps as DescriptionProps,
+  type DialogFooterProps as FooterProps,
+  type DialogHeaderProps as HeaderProps,
+  type DialogPositionerProps as PositionerProps,
+  type DialogRootProps as RootProps,
+  type DialogTitleProps as TitleProps,
+  type DialogTriggerProps as TriggerProps,
+} from "./Dialog";

package/src/components/Dialog/Dialog.test.tsx

@@ -0,0 +1,172 @@
+import type { ReactNode } from "@lynx-js/react";
+
+import { render } from "@lynx-js/react/testing-library";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const dialogMocks = 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>) => {
+    dialogMocks.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>) => {
+    dialogMocks.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>) => {
+    dialogMocks.backdropProps.push(props);
+    return <view className={props["className"] as string}>{props["children"] as ReactNode}</view>;
+  };
+  DialogBackdrop.displayName = "MockDialogBackdrop";
+
+  const DialogContent = (props: Record<string, unknown>) => {
+    dialogMocks.contentProps.push(props);
+    return <view className={props["className"] as string}>{props["children"] as ReactNode}</view>;
+  };
+  DialogContent.displayName = "MockDialogContent";
+
+  const DialogClose = (props: Record<string, unknown>) => {
+    dialogMocks.closeProps.push(props);
+    return <view>{renderChildren(props["children"], { active: false, busy: false })}</view>;
+  };
+  DialogClose.displayName = "MockDialogClose";
+
+  return {
+    DialogBackdrop,
+    DialogClose,
+    DialogContent,
+    DialogRoot,
+    DialogTrigger,
+    DialogView,
+  };
+});
+
+import * as Dialog from "./Dialog.namespace";
+
+describe("Dialog", () => {
+  beforeEach(() => {
+    dialogMocks.rootProps = [];
+    dialogMocks.viewProps = [];
+    dialogMocks.backdropProps = [];
+    dialogMocks.contentProps = [];
+    dialogMocks.closeProps = [];
+  });
+
+  it("maps the namespace API to the Lynx UI headless primitives", () => {
+    const onOpenChange = vi.fn();
+    const { container } = render(
+      <Dialog.Root open onOpenChange={onOpenChange}>
+        <Dialog.Trigger>
+          <text>Open</text>
+        </Dialog.Trigger>
+        <Dialog.Positioner>
+          <Dialog.Backdrop />
+          <Dialog.Content>
+            <Dialog.Header>
+              <Dialog.Title>Title</Dialog.Title>
+              <Dialog.Description>Description</Dialog.Description>
+            </Dialog.Header>
+            <Dialog.Body
+              className="custom-body"
+              maxHeight="96px"
+              paddingLeft="16px"
+              style={{ maxHeight: "120px" }}
+            >
+              <text>Scrollable content</text>
+            </Dialog.Body>
+            <Dialog.Footer>
+              <Dialog.Action>
+                <text>Close</text>
+              </Dialog.Action>
+            </Dialog.Footer>
+          </Dialog.Content>
+        </Dialog.Positioner>
+      </Dialog.Root>,
+    );
+
+    expect(dialogMocks.rootProps.at(-1)).toMatchObject({
+      show: true,
+      onShowChange: onOpenChange,
+    });
+    expect(container.querySelector(".seed-dialog__positioner")).not.toBeNull();
+    expect(container.querySelector(".seed-dialog__backdrop")).not.toBeNull();
+    expect(container.querySelector(".seed-dialog__content")).not.toBeNull();
+    expect(container.querySelector(".seed-dialog__header")).not.toBeNull();
+    expect(container.querySelector(".seed-dialog__title")).not.toBeNull();
+    expect(container.querySelector(".seed-dialog__description")).not.toBeNull();
+    expect(container.querySelector(".seed-dialog__footer")).not.toBeNull();
+
+    const body = container.querySelector<HTMLElement>("scroll-view");
+
+    expect(body?.classList.contains("seed-dialog__body")).toBe(true);
+    expect(body?.classList.contains("custom-body")).toBe(true);
+    expect(body?.hasAttribute("scroll-y")).toBe(true);
+    expect(body?.style.maxHeight).toBe("120px");
+    expect(body?.style.paddingLeft).toBe("16px");
+  });
+
+  it("forwards headless mount options and removes only reserved lifecycle handlers", () => {
+    const userBindTap = vi.fn();
+    const dialogContentProps = {
+      style: { paddingTop: "12px" },
+      bindtap: userBindTap,
+    };
+
+    render(
+      <Dialog.Root defaultOpen forceMount skipAnimation>
+        <Dialog.Positioner
+          container="window"
+          overlayLevel={2}
+          dialogViewProps={{ style: { top: "8px" } }}
+        >
+          <Dialog.Backdrop />
+          <Dialog.Content dialogContentProps={dialogContentProps} />
+        </Dialog.Positioner>
+      </Dialog.Root>,
+    );
+
+    expect(dialogMocks.rootProps.at(-1)).toMatchObject({
+      defaultShow: true,
+      forceMount: true,
+    });
+    expect(dialogMocks.viewProps.at(-1)).toMatchObject({
+      container: "window",
+      overlayLevel: 2,
+      transition: false,
+      dialogViewProps: { style: { top: "8px" } },
+    });
+    expect(dialogMocks.contentProps.at(-1)).toMatchObject({
+      transition: false,
+      dialogContentProps: { style: { paddingTop: "12px" } },
+    });
+    expect(dialogMocks.contentProps.at(-1)?.["dialogContentProps"]).not.toHaveProperty("bindtap");
+    expect(userBindTap).not.toHaveBeenCalled();
+  });
+});