@seed-design/lynx-react 0.7.1 → 0.9.0

package/src/components/Dialog/Dialog.tsx

@@ -0,0 +1,373 @@
+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 { dialog, type DialogVariantProps } from "@seed-design/lynx-css/recipes/dialog";
+import clsx from "clsx";
+
+import type { LynxStyledElementProps, LynxTextRef, LynxViewRef } from "../../types";
+import { useStyleProps, type StyleProps } from "../../utils/styled";
+import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context";
+type DialogComponent<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(dialog);
+
+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 useDialogTransition(transition: boolean | undefined) {
+  const skipAnimation = useProps()?.skipAnimation === true;
+
+  return skipAnimation ? false : (transition ?? true);
+}
+
+////////////////////////////////////////////////////////////////////////////////////
+// Root
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface DialogRootProps
+  extends DialogVariantProps,
+    Omit<DialogPrimitiveRootProps, "show" | "defaultShow" | "onShowChange"> {
+  /**
+   * Whether the dialog is open (controlled mode).
+   * Internally mapped to `show` of `@lynx-js/lynx-ui-dialog`.
+   */
+  open?: boolean;
+  /**
+   * Whether the dialog is open by default (uncontrolled mode).
+   * Internally mapped to `defaultShow`.
+   * @defaultValue false
+   */
+  defaultOpen?: boolean;
+  /**
+   * Called when the dialog's open state is about to change.
+   * The Lynx headless implementation provides only the next boolean state.
+   */
+  onOpenChange?: (open: boolean) => void;
+}
+
+/**
+ * @platform Lynx — wraps `@lynx-js/lynx-ui-dialog`.
+ *
+ * Unlike the React Dialog primitive, Lynx does not support refs, `lazyMount`,
+ * `unmountOnExit`, focus management, title/description associations, Escape-key
+ * dismissal, `asChild`, or close-reason details. Use `forceMount` from the
+ * underlying Lynx dialog when content must remain mounted while closed.
+ */
+export const DialogRoot = forwardRef<never, DialogRootProps>((props, _ref) => {
+  const [variantProps, restProps] = dialog.splitVariantProps(props);
+  const { children, open, defaultOpen, onOpenChange, ...nativeProps } = restProps;
+  const classNames = dialog(variantProps);
+
+  return (
+    <ClassNamesProvider value={classNames}>
+      <PropsProvider value={variantProps}>
+        <DialogRootPrimitive
+          {...nativeProps}
+          show={open}
+          defaultShow={defaultOpen}
+          onShowChange={onOpenChange}
+        >
+          {children}
+        </DialogRootPrimitive>
+      </PropsProvider>
+    </ClassNamesProvider>
+  );
+}) as DialogComponent<DialogRootProps>;
+DialogRoot.displayName = "DialogRoot";
+
+////////////////////////////////////////////////////////////////////////////////////
+// Trigger
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface DialogTriggerProps extends DialogPrimitiveTriggerProps {}
+
+/**
+ * @platform Lynx — `asChild` and refs are unsupported.
+ */
+export const DialogTrigger = forwardRef<never, DialogTriggerProps>((props, _ref) => {
+  const { children, transition, ...nativeProps } = props;
+  const resolvedTransition = useDialogTransition(transition);
+
+  return (
+    <DialogTriggerPrimitive {...nativeProps} transition={resolvedTransition}>
+      {children}
+    </DialogTriggerPrimitive>
+  );
+}) as DialogComponent<DialogTriggerProps>;
+DialogTrigger.displayName = "DialogTrigger";
+
+////////////////////////////////////////////////////////////////////////////////////
+// Positioner
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface DialogPositionerProps extends DialogPrimitiveViewProps {}
+
+/**
+ * @platform Lynx — maps to `DialogView`; refs are unsupported.
+ */
+export const DialogPositioner = forwardRef<never, DialogPositionerProps>((props, _ref) => {
+  const { children, className, transition, ...nativeProps } = props;
+  const classNames = useClassNames();
+  const resolvedTransition = useDialogTransition(transition);
+
+  return (
+    <DialogViewPrimitive
+      {...nativeProps}
+      className={clsx(classNames.positioner, className)}
+      transition={resolvedTransition}
+    >
+      {children}
+    </DialogViewPrimitive>
+  );
+}) as DialogComponent<DialogPositionerProps>;
+DialogPositioner.displayName = "DialogPositioner";
+
+////////////////////////////////////////////////////////////////////////////////////
+// Backdrop
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface DialogBackdropProps extends DialogPrimitiveBackdropProps {}
+
+/**
+ * @platform Lynx — refs are unsupported. Native lifecycle handlers in
+ * `dialogBackdropProps` are reserved by the headless primitive and are omitted
+ * so they cannot replace its presence and dismissal handlers.
+ */
+export const DialogBackdrop = forwardRef<never, DialogBackdropProps>((props, _ref) => {
+  const { children, className, transition, dialogBackdropProps, ...nativeProps } = props;
+  const classNames = useClassNames();
+  const resolvedTransition = useDialogTransition(transition);
+
+  return (
+    <DialogBackdropPrimitive
+      {...nativeProps}
+      className={clsx(classNames.backdrop, className)}
+      transition={resolvedTransition}
+      dialogBackdropProps={omitHeadlessLifecycleHandlers(dialogBackdropProps)}
+    >
+      {children}
+    </DialogBackdropPrimitive>
+  );
+}) as DialogComponent<DialogBackdropProps>;
+DialogBackdrop.displayName = "DialogBackdrop";
+
+////////////////////////////////////////////////////////////////////////////////////
+// Content
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface DialogContentProps extends DialogPrimitiveContentProps {}
+
+/**
+ * @platform Lynx — refs are unsupported. Native lifecycle handlers in
+ * `dialogContentProps` are reserved by the headless primitive and are omitted
+ * so they cannot replace its presence handlers.
+ */
+export const DialogContent = forwardRef<never, DialogContentProps>((props, _ref) => {
+  const { children, className, transition, dialogContentProps, ...nativeProps } = props;
+  const classNames = useClassNames();
+  const resolvedTransition = useDialogTransition(transition);
+
+  return (
+    <DialogContentPrimitive
+      {...nativeProps}
+      className={clsx(classNames.content, className)}
+      transition={resolvedTransition}
+      dialogContentProps={omitHeadlessLifecycleHandlers(dialogContentProps)}
+    >
+      {children}
+    </DialogContentPrimitive>
+  );
+}) as DialogComponent<DialogContentProps>;
+DialogContent.displayName = "DialogContent";
+
+////////////////////////////////////////////////////////////////////////////////////
+// Local slots
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface DialogHeaderProps extends StyleProps, LynxStyledElementProps {}
+
+export const DialogHeader: LynxForwardRefComponent<unknown, DialogHeaderProps> = forwardRef<
+  unknown,
+  DialogHeaderProps
+>((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>
+  );
+});
+DialogHeader.displayName = "DialogHeader";
+
+export interface DialogBodyProps extends StyleProps, LynxStyledElementProps {}
+
+export const DialogBody: LynxForwardRefComponent<unknown, DialogBodyProps> = forwardRef<
+  unknown,
+  DialogBodyProps
+>((props, ref) => {
+  const { style, restProps } = useStyleProps(props);
+  const { children, className, ...nativeProps } = restProps;
+  const classNames = useClassNames();
+
+  return (
+    <scroll-view
+      {...(ref ? ({ ref: ref as LynxViewRef } as Record<string, unknown>) : {})}
+      {...nativeProps}
+      scroll-y
+      className={clsx(classNames.body, className)}
+      style={style}
+    >
+      {children}
+    </scroll-view>
+  );
+});
+DialogBody.displayName = "DialogBody";
+
+export interface DialogTitleProps extends StyleProps, LynxStyledElementProps {}
+
+export const DialogTitle: LynxForwardRefComponent<unknown, DialogTitleProps> = forwardRef<
+  unknown,
+  DialogTitleProps
+>((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.title, className)}
+      style={style as never}
+    >
+      {children}
+    </text>
+  );
+});
+DialogTitle.displayName = "DialogTitle";
+
+export interface DialogDescriptionProps extends StyleProps, LynxStyledElementProps {}
+
+export const DialogDescription: LynxForwardRefComponent<unknown, DialogDescriptionProps> =
+  forwardRef<unknown, DialogDescriptionProps>((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>
+    );
+  });
+DialogDescription.displayName = "DialogDescription";
+
+export interface DialogFooterProps extends StyleProps, LynxStyledElementProps {}
+
+export const DialogFooter: LynxForwardRefComponent<unknown, DialogFooterProps> = forwardRef<
+  unknown,
+  DialogFooterProps
+>((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>
+  );
+});
+DialogFooter.displayName = "DialogFooter";
+
+////////////////////////////////////////////////////////////////////////////////////
+// Action
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface DialogActionProps extends DialogPrimitiveCloseProps {}
+
+/**
+ * @platform Lynx — maps to `DialogClose`; `asChild` and refs are unsupported.
+ */
+export const DialogAction = forwardRef<never, DialogActionProps>((props, _ref) => {
+  const { children, className, transition, ...nativeProps } = props;
+  const classNames = useClassNames();
+  const resolvedTransition = useDialogTransition(transition);
+
+  return (
+    <DialogClosePrimitive
+      {...nativeProps}
+      className={clsx(classNames.action, className)}
+      transition={resolvedTransition}
+    >
+      {children}
+    </DialogClosePrimitive>
+  );
+}) as DialogComponent<DialogActionProps>;
+DialogAction.displayName = "DialogAction";

package/src/components/Dialog/index.ts

@@ -0,0 +1,26 @@
+export {
+  DialogAction,
+  type DialogActionProps,
+  DialogBackdrop,
+  type DialogBackdropProps,
+  DialogBody,
+  type DialogBodyProps,
+  DialogContent,
+  type DialogContentProps,
+  DialogDescription,
+  type DialogDescriptionProps,
+  DialogFooter,
+  type DialogFooterProps,
+  DialogHeader,
+  type DialogHeaderProps,
+  DialogPositioner,
+  type DialogPositionerProps,
+  DialogRoot,
+  type DialogRootProps,
+  DialogTitle,
+  type DialogTitleProps,
+  DialogTrigger,
+  type DialogTriggerProps,
+} from "./Dialog";
+
+export * as Dialog from "./Dialog.namespace";

package/src/components/FloatingActionButton/FloatingActionButton.namespace.ts

@@ -0,0 +1,8 @@
+export {
+  FloatingActionButtonIcon as Icon,
+  FloatingActionButtonLabel as Label,
+  FloatingActionButtonRoot as Root,
+  type FloatingActionButtonIconProps as IconProps,
+  type FloatingActionButtonLabelProps as LabelProps,
+  type FloatingActionButtonRootProps as RootProps,
+} from "./FloatingActionButton";

package/src/components/FloatingActionButton/FloatingActionButton.test.tsx

@@ -0,0 +1,59 @@
+import "@testing-library/jest-dom";
+import { render } from "@lynx-js/react/testing-library";
+import { describe, expect, it } from "vitest";
+
+import { FloatingActionButtonLabel, FloatingActionButtonRoot } from "./FloatingActionButton";
+
+function getFloatingActionButtonRoot(container: HTMLElement) {
+  const root = container.querySelector<HTMLElement>(".seed-floating-action-button__root");
+
+  if (!root) {
+    throw new Error("Expected FloatingActionButton root to exist.");
+  }
+
+  return root;
+}
+
+describe("FloatingActionButton", () => {
+  it("removes and restores the label node while preserving the root accessibility name", () => {
+    const { container, rerender } = render(
+      <FloatingActionButtonRoot extended accessibility-label="새 글 작성">
+        <FloatingActionButtonLabel>Extended</FloatingActionButtonLabel>
+      </FloatingActionButtonRoot>,
+    );
+
+    expect(container.querySelector(".seed-floating-action-button__label")).toHaveTextContent(
+      "Extended",
+    );
+    expect(getFloatingActionButtonRoot(container)).toHaveAttribute(
+      "accessibility-label",
+      "새 글 작성",
+    );
+
+    rerender(
+      <FloatingActionButtonRoot extended={false} accessibility-label="새 글 작성">
+        <FloatingActionButtonLabel>Extended</FloatingActionButtonLabel>
+      </FloatingActionButtonRoot>,
+    );
+
+    expect(container.querySelector(".seed-floating-action-button__label")).not.toBeInTheDocument();
+    expect(getFloatingActionButtonRoot(container)).toHaveAttribute(
+      "accessibility-label",
+      "새 글 작성",
+    );
+
+    rerender(
+      <FloatingActionButtonRoot extended accessibility-label="새 글 작성">
+        <FloatingActionButtonLabel>Extended</FloatingActionButtonLabel>
+      </FloatingActionButtonRoot>,
+    );
+
+    expect(container.querySelector(".seed-floating-action-button__label")).toHaveTextContent(
+      "Extended",
+    );
+    expect(getFloatingActionButtonRoot(container)).toHaveAttribute(
+      "accessibility-label",
+      "새 글 작성",
+    );
+  });
+});

package/src/components/FloatingActionButton/FloatingActionButton.tsx

@@ -0,0 +1,207 @@
+import * as React from "@lynx-js/react";
+import clsx from "clsx";
+
+import {
+  floatingActionButton,
+  type FloatingActionButtonVariantProps,
+} from "@seed-design/lynx-css/recipes/floating-action-button";
+
+import { usePressTap } from "../../hooks/usePressTap";
+import { useScaleFeedback } from "../../hooks/useScaleFeedback";
+import type {
+  LynxAccessibilityProps,
+  LynxPressableProps,
+  LynxStyledElementProps,
+  LynxTextProps,
+  LynxTextRef,
+  LynxTouchProps,
+  LynxViewRef,
+  LynxViewProps,
+} from "../../types";
+import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context";
+import { mergeProps } from "../../utils/merge-props";
+import { InternalIcon, type InternalIconProps } from "../Icon/Icon";
+
+const { ClassNamesProvider, PropsProvider, useClassNames, useProps, withContext } =
+  createSlotRecipeContext(floatingActionButton);
+
+type FloatingActionButtonPublicVariantProps = Omit<
+  FloatingActionButtonVariantProps,
+  "pressed" | "transitionEnabled"
+>;
+
+const LabelWidthContext = React.createContext<((width: number) => void) | null>(null);
+
+interface FloatingActionButtonRootViewProps
+  extends FloatingActionButtonVariantProps,
+    LynxStyledElementProps,
+    LynxTouchProps,
+    LynxAccessibilityProps {
+  flatten?: false;
+}
+
+const FloatingActionButtonRootView = React.forwardRef<unknown, FloatingActionButtonRootViewProps>(
+  (props, ref) => {
+    const [variantProps, otherProps] = floatingActionButton.splitVariantProps(props);
+    const { children, className, style, ...nativeProps } = otherProps;
+    const initiallyExtended = React.useRef(variantProps.extended !== false);
+    const [labelWidth, setLabelWidth] = React.useState<number>();
+    const classNames = floatingActionButton({
+      ...variantProps,
+      transitionEnabled: labelWidth !== undefined || !initiallyExtended.current,
+    });
+
+    return (
+      <ClassNamesProvider value={classNames}>
+        <PropsProvider value={variantProps}>
+          <LabelWidthContext.Provider value={setLabelWidth}>
+            <view
+              {...mergeProps(ref ? { ref: ref as LynxViewRef } : {}, nativeProps)}
+              className={clsx(classNames.root, className)}
+              style={
+                {
+                  "--fab-label-width": `${labelWidth ?? 0}px`,
+                  ...style,
+                } as LynxViewProps["style"]
+              }
+            >
+              {children}
+            </view>
+          </LabelWidthContext.Provider>
+        </PropsProvider>
+      </ClassNamesProvider>
+    );
+  },
+);
+FloatingActionButtonRootView.displayName = "FloatingActionButtonRootView";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * @platform Lynx
+ *
+ * Web DOM button props, `asChild`, `aria-*`, and `onClick` are not supported.
+ * Use native `bindtap` / `main-thread:bindtap` and `accessibility-*` props instead.
+ */
+export interface FloatingActionButtonRootProps
+  extends FloatingActionButtonPublicVariantProps,
+    LynxStyledElementProps,
+    LynxPressableProps,
+    LynxAccessibilityProps {
+  disabled?: boolean;
+}
+
+export const FloatingActionButtonRoot = React.forwardRef<unknown, FloatingActionButtonRootProps>(
+  (props, ref) => {
+    const {
+      bindtap,
+      "main-thread:bindtap": mainThreadBindtap,
+      disabled = false,
+      "accessibility-element": accessibilityElement = true,
+      "accessibility-role-description": accessibilityRoleDescription = "button",
+      "accessibility-traits": accessibilityTraits,
+      ...otherProps
+    } = props;
+    const { pressed, bindtouchstart, bindtouchend, bindtouchcancel, ...pressTapHandlers } =
+      usePressTap({
+        disabled,
+        onTap: bindtap,
+        mainThreadOnTap: mainThreadBindtap,
+      });
+    const { scaleFeedbackTriggerProps, scaleFeedbackTargetProps } = useScaleFeedback({
+      disabled,
+      onTouchStart: bindtouchstart,
+      onTouchEnd: bindtouchend,
+      onTouchCancel: bindtouchcancel,
+    });
+
+    return (
+      <FloatingActionButtonRootView
+        {...mergeProps(
+          ref ? { ref } : {},
+          disabled ? {} : scaleFeedbackTargetProps,
+          disabled ? {} : scaleFeedbackTriggerProps,
+          disabled ? {} : pressTapHandlers,
+          otherProps,
+        )}
+        disabled={disabled}
+        pressed={pressed}
+        accessibility-element={accessibilityElement}
+        accessibility-role-description={accessibilityRoleDescription}
+        accessibility-traits={accessibilityTraits ?? (disabled ? "disabled" : undefined)}
+        flatten={false}
+      />
+    );
+  },
+);
+FloatingActionButtonRoot.displayName = "FloatingActionButtonRoot";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface FloatingActionButtonIconProps
+  extends Omit<InternalIconProps, "deps" | "disableDefaultResize"> {}
+
+const StyledIcon = withContext<unknown, InternalIconProps>(InternalIcon, "icon");
+
+export const FloatingActionButtonIcon = React.forwardRef<unknown, FloatingActionButtonIconProps>(
+  (props, ref) => {
+    const { className, ...iconProps } = props;
+    const classNames = useClassNames();
+
+    return (
+      <StyledIcon
+        {...mergeProps(ref ? { ref } : {}, iconProps)}
+        className={className}
+        deps={[classNames.icon]}
+        disableDefaultResize={true}
+        accessibility-elements-hidden={true}
+      />
+    );
+  },
+);
+FloatingActionButtonIcon.displayName = "FloatingActionButtonIcon";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface FloatingActionButtonLabelProps extends LynxStyledElementProps {}
+
+export const FloatingActionButtonLabel = React.forwardRef<unknown, FloatingActionButtonLabelProps>(
+  (props, ref) => {
+    const { children, className, ...nativeProps } = props;
+    const classNames = useClassNames();
+    const variantProps = useProps();
+    const setLabelWidth = React.useContext(LabelWidthContext);
+
+    if (!setLabelWidth) {
+      throw new Error("FloatingActionButtonLabel must be used within FloatingActionButtonRoot.");
+    }
+
+    const handleLayoutChange = React.useCallback<NonNullable<LynxTextProps["bindlayoutchange"]>>(
+      (event) => {
+        "background only";
+        const width = event.detail.width;
+        if (Number.isFinite(width) && width >= 0) setLabelWidth(width);
+      },
+      [setLabelWidth],
+    );
+
+    if (variantProps?.extended === false) {
+      return null;
+    }
+
+    return (
+      <text
+        {...mergeProps(
+          ref ? { ref: ref as LynxTextRef } : {},
+          { bindlayoutchange: handleLayoutChange },
+          nativeProps,
+        )}
+        className={clsx(classNames.label, className)}
+        accessibility-elements-hidden={true}
+      >
+        {children}
+      </text>
+    );
+  },
+);
+FloatingActionButtonLabel.displayName = "FloatingActionButtonLabel";