@seed-design/lynx-react 0.6.3 → 0.7.0

package/src/components/SelectBox/SelectBox.tsx

@@ -7,6 +7,8 @@ import {
   type SelectBoxCheckmarkVariantProps,
 } from "@seed-design/lynx-css/recipes/select-box-checkmark";
 import { selectBoxGroup } from "@seed-design/lynx-css/recipes/select-box-group";
+import type { ScaleFeedbackTargetProps } from "../../hooks/useScaleFeedback";
+import { ScaleFeedbackContentContext } from "../../contexts";
 
 import type {
   LynxAccessibilityProps,
@@ -23,6 +25,7 @@ import {
   type RadioGroupItemProps,
   useRadioGroupItemContext,
 } from "../RadioGroup/RadioGroup";
+import { mergeProps } from "../../utils/merge-props";
 
 /**
  * @platform Lynx
@@ -46,6 +49,7 @@ interface SelectBoxRuntimeContextValue {
   footerVisibility: FooterVisibility;
   variantProps: PublicSelectBoxVariantProps;
   accessibilityRole: "checkbox" | "radio";
+  scaleFeedbackTargetProps: ScaleFeedbackTargetProps;
 }
 
 const SelectBoxRuntimeContext = React.createContext<SelectBoxRuntimeContextValue | null>(null);
@@ -99,7 +103,11 @@ function SelectBoxSurface({
           accessibility-traits={context.disabled ? "disabled" : undefined}
           {...accessibilityProps}
         >
-          {children}
+          <view className={classes.scaleContent} {...context.scaleFeedbackTargetProps}>
+            <ScaleFeedbackContentContext.Provider value={true}>
+              {children}
+            </ScaleFeedbackContentContext.Provider>
+          </view>
           <view className={classes.selectedStroke} accessibility-elements-hidden={true} />
         </view>
       </IconSlotProvider>
@@ -125,10 +133,9 @@ const SelectBoxGroup = React.forwardRef<unknown, SelectBoxGroupProps>((props, re
   return (
     <SelectBoxLayoutContext.Provider value={{ layout }}>
       <view
-        {...(ref ? { ref: ref as LynxViewRef } : {})}
+        {...mergeProps(ref ? { ref: ref as LynxViewRef } : {}, nativeProps)}
         className={clsx(classes, className)}
         style={{ ...style, gridTemplateColumns: `repeat(${columns}, 1fr)` }}
-        {...nativeProps}
       >
         {children}
       </view>
@@ -172,11 +179,13 @@ function CheckSelectBoxSurface(props: CheckSelectBoxSurfaceProps) {
       footerVisibility: props.footerVisibility,
       variantProps: props.variantProps,
       accessibilityRole: "checkbox",
+      scaleFeedbackTargetProps: checkbox.scaleFeedbackTargetProps,
     }),
     [
       checkbox.checked,
       checkbox.disabled,
       checkbox.pressed,
+      checkbox.scaleFeedbackTargetProps,
       props.footerVisibility,
       props.variantProps,
     ],
@@ -263,8 +272,16 @@ function RadioSelectBoxSurface(props: RadioSelectBoxSurfaceProps) {
       footerVisibility: props.footerVisibility,
       variantProps: props.variantProps,
       accessibilityRole: "radio",
+      scaleFeedbackTargetProps: item.scaleFeedbackTargetProps,
     }),
-    [item.checked, item.disabled, item.pressed, props.footerVisibility, props.variantProps],
+    [
+      item.checked,
+      item.disabled,
+      item.pressed,
+      item.scaleFeedbackTargetProps,
+      props.footerVisibility,
+      props.variantProps,
+    ],
   );
 
   return (
@@ -325,9 +342,8 @@ function createViewSlot(displayName: string, slot: keyof ReturnType<typeof selec
 
     return (
       <view
-        {...(ref ? { ref: ref as LynxViewRef } : {})}
+        {...mergeProps(ref ? { ref: ref as LynxViewRef } : {}, nativeProps)}
         className={clsx(classes[slot], className)}
-        {...nativeProps}
       >
         {children}
       </view>
@@ -344,9 +360,8 @@ function createTextSlot(displayName: string, slot: keyof ReturnType<typeof selec
 
     return (
       <text
-        {...(ref ? { ref: ref as LynxTextRef } : {})}
+        {...mergeProps(ref ? { ref: ref as LynxTextRef } : {}, nativeProps)}
         className={clsx(classes[slot], className)}
-        {...nativeProps}
       >
         {children}
       </text>
@@ -369,9 +384,8 @@ function createLabelSlot(displayName: string) {
 
     return (
       <view
-        {...(ref ? { ref: ref as LynxViewRef } : {})}
+        {...mergeProps(ref ? { ref: ref as LynxViewRef } : {}, nativeProps)}
         className={clsx(classes.label, className)}
-        {...nativeProps}
       >
         {labelChildren}
       </view>
@@ -437,7 +451,7 @@ const SelectBoxFooter = React.forwardRef<unknown, SelectBoxFooterProps>((props,
 
   return (
     <view
-      {...(ref ? { ref: ref as LynxViewRef } : {})}
+      {...mergeProps(ref ? { ref: ref as LynxViewRef } : {}, nativeProps)}
       className={clsx(classes.footer, className)}
       style={{
         ...style,
@@ -449,7 +463,6 @@ const SelectBoxFooter = React.forwardRef<unknown, SelectBoxFooterProps>((props,
               : "0px",
       }}
       accessibility-elements-hidden={!open || accessibilityElementsHidden}
-      {...nativeProps}
     >
       <view className={classes.footerInner} bindlayoutchange={handleLayoutChange}>
         {children}
@@ -491,10 +504,9 @@ export const CheckSelectBoxCheckmarkControl = React.forwardRef<
   return (
     <SelectBoxCheckmarkContext.Provider value={{ iconClassName: classes.icon, variantProps }}>
       <view
-        {...(ref ? { ref: ref as LynxViewRef } : {})}
+        {...mergeProps(ref ? { ref: ref as LynxViewRef } : {}, nativeProps)}
         className={clsx(classes.root, className)}
         accessibility-elements-hidden={true}
-        {...nativeProps}
       >
         {children}
       </view>
@@ -519,14 +531,13 @@ export const CheckSelectBoxCheckmarkIcon = React.forwardRef<
 
   return (
     <InternalIcon
-      ref={ref}
+      {...mergeProps({ ref }, otherProps)}
       className={clsx(context.iconClassName, className)}
       deps={[
         context.variantProps.selected,
         context.variantProps.pressed,
         context.variantProps.disabled,
       ]}
-      {...otherProps}
     />
   );
 });

package/src/components/Stack/Stack.tsx

@@ -3,6 +3,7 @@ import * as React from "@lynx-js/react";
 
 import type { LynxPressableProps, LynxStyledElementProps, LynxViewRef } from "../../types";
 import { useStyleProps, type StyleProps } from "../../utils/styled";
+import { mergeProps } from "../../utils/merge-props";
 
 type StackStyleProps =
   | "display"
@@ -84,8 +85,7 @@ function renderStackView(
 
   return (
     <view
-      {...(ref ? { ref: ref as LynxViewRef } : {})}
-      {...nativeProps}
+      {...mergeProps(ref ? { ref: ref as LynxViewRef } : {}, nativeProps)}
       className={clsx(className)}
       style={style}
     >

package/src/components/SwipeableMenuSheet/SwipeableMenuSheet.namespace.ts

@@ -0,0 +1,37 @@
+export {
+  SwipeableMenuSheetBackdrop as Backdrop,
+  SwipeableMenuSheetCloseButton as CloseButton,
+  SwipeableMenuSheetContent as Content,
+  SwipeableMenuSheetDescription as Description,
+  SwipeableMenuSheetFooter as Footer,
+  SwipeableMenuSheetGroup as Group,
+  SwipeableMenuSheetHandle as Handle,
+  SwipeableMenuSheetHeader as Header,
+  SwipeableMenuSheetItem as Item,
+  SwipeableMenuSheetItemContent as ItemContent,
+  SwipeableMenuSheetItemDescription as ItemDescription,
+  SwipeableMenuSheetItemLabel as ItemLabel,
+  SwipeableMenuSheetList as List,
+  SwipeableMenuSheetPositioner as Positioner,
+  SwipeableMenuSheetRoot as Root,
+  SwipeableMenuSheetTitle as Title,
+  SwipeableMenuSheetTrigger as Trigger,
+  type SwipeableMenuSheetBackdropProps as BackdropProps,
+  type SwipeableMenuSheetCloseButtonProps as CloseButtonProps,
+  type SwipeableMenuSheetContentProps as ContentProps,
+  type SwipeableMenuSheetDescriptionProps as DescriptionProps,
+  type SwipeableMenuSheetFooterProps as FooterProps,
+  type SwipeableMenuSheetGroupProps as GroupProps,
+  type SwipeableMenuSheetHandleProps as HandleProps,
+  type SwipeableMenuSheetHeaderProps as HeaderProps,
+  type SwipeableMenuSheetItemContentProps as ItemContentProps,
+  type SwipeableMenuSheetItemDescriptionProps as ItemDescriptionProps,
+  type SwipeableMenuSheetItemLabelProps as ItemLabelProps,
+  type SwipeableMenuSheetItemProps as ItemProps,
+  type SwipeableMenuSheetListProps as ListProps,
+  type SwipeableMenuSheetPositionerProps as PositionerProps,
+  type SwipeableMenuSheetRootProps as RootProps,
+  type SwipeableMenuSheetRootRef as RootRef,
+  type SwipeableMenuSheetTitleProps as TitleProps,
+  type SwipeableMenuSheetTriggerProps as TriggerProps,
+} from "./SwipeableMenuSheet";

package/src/components/SwipeableMenuSheet/SwipeableMenuSheet.test.tsx

@@ -0,0 +1,258 @@
+import { fireEvent, render } from "@lynx-js/react/testing-library";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import type { LynxPressableProps } from "../../types";
+
+const sheetMocks = vi.hoisted(() => ({
+  contentProps: [] as Array<Record<string, unknown>>,
+  rootProps: [] as Array<Record<string, unknown>>,
+  rootRef: {
+    close: vi.fn(),
+    open: vi.fn(),
+  },
+}));
+
+vi.mock("@lynx-js/lynx-ui-sheet", async () => {
+  const React = await vi.importActual<typeof import("@lynx-js/react")>("@lynx-js/react");
+
+  const SheetRoot = React.forwardRef<
+    unknown,
+    Record<string, unknown> & { children?: React.ReactNode }
+  >((props, ref) => {
+    sheetMocks.rootProps.push(props);
+    React.useImperativeHandle(ref, () => sheetMocks.rootRef);
+    return <>{props["children"]}</>;
+  });
+  SheetRoot.displayName = "MockSheetRoot";
+
+  const SheetView = React.forwardRef<unknown, { children?: React.ReactNode }>((props) => {
+    return <>{props.children}</>;
+  });
+  SheetView.displayName = "MockSheetView";
+
+  const SheetContent = React.forwardRef<
+    unknown,
+    Record<string, unknown> & { children?: React.ReactNode }
+  >((props) => {
+    sheetMocks.contentProps.push(props);
+    return <>{props["children"]}</>;
+  });
+  SheetContent.displayName = "MockSheetContent";
+
+  const SheetBackdrop = (
+    props: Record<string, unknown> & {
+      children?: React.ReactNode;
+      onClick?: () => void;
+    },
+  ) => {
+    const handlers: Pick<LynxPressableProps, "bindtap"> = {
+      bindtap: props["onClick"],
+    };
+
+    return <view {...handlers}>{props["children"]}</view>;
+  };
+
+  const SheetHandle = (props: Record<string, unknown> & { children?: React.ReactNode }) => {
+    return <view className={props["className"] as string}>{props["children"]}</view>;
+  };
+
+  return { SheetBackdrop, SheetContent, SheetHandle, SheetRoot, SheetView };
+});
+
+vi.mock("../../hooks/useSafeArea", () => ({
+  useSafeArea: () => ({ safeAreaInsetBottom: "34px", safeAreaInsetTop: "0px" }),
+}));
+
+import * as SwipeableMenuSheet from "./SwipeableMenuSheet.namespace";
+
+describe("SwipeableMenuSheet", () => {
+  beforeEach(() => {
+    sheetMocks.contentProps = [];
+    sheetMocks.rootProps = [];
+    sheetMocks.rootRef.close.mockClear();
+    sheetMocks.rootRef.open.mockClear();
+  });
+
+  it("fixes the engine to a bottom, fit-height sheet", () => {
+    render(
+      <SwipeableMenuSheet.Root forceMount>
+        <SwipeableMenuSheet.Positioner>
+          <SwipeableMenuSheet.Content />
+        </SwipeableMenuSheet.Positioner>
+      </SwipeableMenuSheet.Root>,
+    );
+
+    expect(sheetMocks.rootProps.at(-1)).toMatchObject({
+      forceMount: true,
+      side: "bottom",
+      snapPoints: ["fit"],
+    });
+  });
+
+  it("exposes the Trigger as an accessible button", () => {
+    const { getByText } = render(
+      <SwipeableMenuSheet.Root>
+        <SwipeableMenuSheet.Trigger>
+          <text>Open</text>
+        </SwipeableMenuSheet.Trigger>
+      </SwipeableMenuSheet.Root>,
+    );
+
+    const trigger = (getByText("Open") as HTMLElement).parentElement;
+    if (!trigger) throw new Error("Expected menu sheet trigger.");
+
+    expect(trigger.getAttribute("accessibility-element")).to.equal("true");
+    expect(trigger.hasAttribute("accessibility-role-description")).to.equal(true);
+    expect(trigger.getAttribute("accessibility-role-description")).to.equal("button");
+  });
+
+  it("keeps outer and inner Content classes separate while preserving safe-area padding", () => {
+    render(
+      <SwipeableMenuSheet.Root>
+        <SwipeableMenuSheet.Content
+          accessibility-label="Menu options"
+          className="outer"
+          innerClassName="inner"
+          innerStyle={{ paddingTop: "8px" }}
+        />
+      </SwipeableMenuSheet.Root>,
+    );
+
+    expect(sheetMocks.contentProps.at(-1)).toMatchObject({
+      "accessibility-label": "Menu options",
+      className: expect.stringContaining("outer"),
+      innerClassName: expect.stringContaining("inner"),
+      innerStyle: {
+        paddingBottom: "calc(16px + 34px)",
+        display: "flex",
+        flexDirection: "column",
+        minHeight: "0",
+        paddingTop: "8px",
+      },
+    });
+  });
+
+  it("records trigger and close button reasons without dropping user handlers", () => {
+    const onOpenChange = vi.fn();
+    const onTriggerTap = vi.fn();
+    const onCloseTap = vi.fn();
+    const { getByText } = render(
+      <SwipeableMenuSheet.Root onOpenChange={onOpenChange}>
+        <SwipeableMenuSheet.Trigger bindtap={onTriggerTap}>
+          <text>Open</text>
+        </SwipeableMenuSheet.Trigger>
+        <SwipeableMenuSheet.CloseButton bindtap={onCloseTap}>Close</SwipeableMenuSheet.CloseButton>
+      </SwipeableMenuSheet.Root>,
+    );
+
+    const trigger = (getByText("Open") as HTMLElement).parentElement;
+    const closeButtonLabel = getByText("Close") as HTMLElement;
+    const closeButton = closeButtonLabel.parentElement;
+    if (!trigger || !closeButton || closeButtonLabel.tagName.toLowerCase() !== "text") {
+      throw new Error("Expected menu sheet controls with a native close button label.");
+    }
+
+    expect(closeButtonLabel.className).toContain("seed-menu-sheet__closeButtonLabel");
+
+    fireEvent.tap(trigger);
+    expect(sheetMocks.rootRef.open).toHaveBeenCalledWith();
+    expect(onTriggerTap).toHaveBeenCalledOnce();
+    (sheetMocks.rootProps.at(-1)?.["onShowChange"] as (open: boolean) => void)(true);
+    expect(onOpenChange).toHaveBeenLastCalledWith(true, { reason: "trigger" });
+
+    fireEvent.tap(closeButton);
+    expect(sheetMocks.rootRef.close).toHaveBeenCalledWith();
+    expect(onCloseTap).toHaveBeenCalledOnce();
+    (sheetMocks.rootProps.at(-1)?.["onShowChange"] as (open: boolean) => void)(false);
+    expect(onOpenChange).toHaveBeenLastCalledWith(false, { reason: "closeButton" });
+  });
+
+  it("uses an outside-interaction reason for a closing backdrop", () => {
+    const onOpenChange = vi.fn();
+    const { getByText } = render(
+      <SwipeableMenuSheet.Root onOpenChange={onOpenChange}>
+        <SwipeableMenuSheet.Backdrop>
+          <text>Dismiss</text>
+        </SwipeableMenuSheet.Backdrop>
+      </SwipeableMenuSheet.Root>,
+    );
+
+    const backdrop = (getByText("Dismiss") as HTMLElement).parentElement;
+    if (!backdrop) throw new Error("Expected backdrop element.");
+    fireEvent.tap(backdrop);
+    (sheetMocks.rootProps.at(-1)?.["onShowChange"] as (open: boolean) => void)(false);
+
+    expect(sheetMocks.rootRef.close).toHaveBeenCalledWith();
+    expect(onOpenChange).toHaveBeenCalledWith(false, { reason: "interactOutside" });
+  });
+
+  it("inherits label alignment, supports wrapped items, omits the final divider, and leaves item taps open", () => {
+    const onItemTap = vi.fn();
+    function WrappedItem() {
+      return (
+        <SwipeableMenuSheet.Item bindtap={onItemTap}>
+          <SwipeableMenuSheet.ItemContent>
+            <SwipeableMenuSheet.ItemLabel>First item</SwipeableMenuSheet.ItemLabel>
+          </SwipeableMenuSheet.ItemContent>
+        </SwipeableMenuSheet.Item>
+      );
+    }
+
+    const { container, getByText } = render(
+      <SwipeableMenuSheet.Root>
+        <SwipeableMenuSheet.Content labelAlign="center">
+          <SwipeableMenuSheet.List>
+            <SwipeableMenuSheet.Group labelAlign="left">
+              <WrappedItem />
+              <SwipeableMenuSheet.Item labelAlign="center">
+                <SwipeableMenuSheet.ItemContent>
+                  <SwipeableMenuSheet.ItemLabel>Second item</SwipeableMenuSheet.ItemLabel>
+                </SwipeableMenuSheet.ItemContent>
+              </SwipeableMenuSheet.Item>
+            </SwipeableMenuSheet.Group>
+          </SwipeableMenuSheet.List>
+        </SwipeableMenuSheet.Content>
+      </SwipeableMenuSheet.Root>,
+    );
+
+    expect(container.querySelectorAll(".seed-menu-sheet-item__divider")).toHaveLength(1);
+    expect(
+      (getByText("First item") as HTMLElement).parentElement?.parentElement?.className,
+    ).toContain("labelAlign_left");
+    expect(
+      (getByText("Second item") as HTMLElement).parentElement?.parentElement?.className,
+    ).toContain("labelAlign_center");
+
+    const item = (getByText("First item") as HTMLElement).parentElement?.parentElement;
+    if (!item) throw new Error("Expected menu sheet item.");
+    fireEvent.tap(item);
+
+    expect(onItemTap).toHaveBeenCalledOnce();
+    expect(sheetMocks.rootRef.close).not.toHaveBeenCalled();
+  });
+
+  it("maps skipAnimation to both trigger and content motion behavior", () => {
+    const { getByText } = render(
+      <SwipeableMenuSheet.Root skipAnimation>
+        <SwipeableMenuSheet.Trigger>
+          <text>Open without motion</text>
+        </SwipeableMenuSheet.Trigger>
+        <SwipeableMenuSheet.Content />
+      </SwipeableMenuSheet.Root>,
+    );
+
+    const trigger = (getByText("Open without motion") as HTMLElement).parentElement;
+    if (!trigger) throw new Error("Expected trigger element.");
+    fireEvent.tap(trigger);
+
+    expect(sheetMocks.rootRef.open).toHaveBeenCalledWith({ animate: false });
+    expect(sheetMocks.contentProps.at(-1)).toMatchObject({
+      innerStyle: {
+        paddingBottom: "calc(16px + 34px)",
+      },
+      snapAnimation: { type: "tween", duration: 0 },
+      enterAnimation: { type: "tween", duration: 0 },
+      exitAnimation: { type: "tween", duration: 0 },
+    });
+  });
+});