@seed-design/lynx-react 0.7.1 → 0.9.0

package/src/components/List/List.tsx

@@ -5,6 +5,9 @@ import { list } from "@seed-design/lynx-css/recipes/list";
 import { listHeader, type ListHeaderVariantProps } from "@seed-design/lynx-css/recipes/list-header";
 import { listItem, type ListItemVariantProps } from "@seed-design/lynx-css/recipes/list-item";
 
+import { ScaleFeedbackContentContext } from "../../contexts";
+import { useScaleFeedback, type ScaleFeedbackTargetProps } from "../../hooks/useScaleFeedback";
+import { mergeProps } from "../../utils/merge-props";
 import { usePressTap } from "../../hooks/usePressTap";
 import type {
   LynxAccessibilityProps,
@@ -24,7 +27,10 @@ import {
 } from "../RadioGroup/RadioGroup";
 import { SwitchRoot, type SwitchRootProps, useSwitchContext } from "../Switch/Switch";
 
-type PublicListItemVariantProps = Omit<ListItemVariantProps, "pressed" | "disabled">;
+type PublicListItemVariantProps = Omit<
+  ListItemVariantProps,
+  "pressed" | "disabled" | "interactive"
+>;
 
 const { ClassNamesProvider, useClassNames } = createSlotRecipeContext(listItem);
 
@@ -91,12 +97,26 @@ interface ListItemSurfaceProps
     LynxTouchProps {
   disabled?: boolean;
   pressed?: boolean;
+  scaleFeedbackTargetProps?: ScaleFeedbackTargetProps;
 }
 
 const ListItemSurface = React.forwardRef<unknown, ListItemSurfaceProps>((props, ref) => {
-  const { children, className, style, disabled = false, pressed = false, ...restProps } = props;
+  const {
+    children,
+    className,
+    style,
+    disabled = false,
+    pressed = false,
+    scaleFeedbackTargetProps,
+    ...restProps
+  } = props;
   const [variantProps, nativeProps] = listItem.splitVariantProps(restProps);
-  const classes = listItem({ ...variantProps, disabled, pressed });
+  const classes = listItem({
+    ...variantProps,
+    disabled,
+    pressed,
+    interactive: !!scaleFeedbackTargetProps,
+  });
 
   return (
     <ClassNamesProvider value={classes}>
@@ -110,14 +130,17 @@ const ListItemSurface = React.forwardRef<unknown, ListItemSurfaceProps>((props,
         }}
       >
         <view
-          {...(ref ? { ref: ref as LynxViewRef } : {})}
-          {...nativeProps}
+          {...mergeProps(ref ? { ref: ref as LynxViewRef } : {}, nativeProps)}
           className={clsx(classes.root, className)}
           style={style}
         >
           <view className={classes.highlightedOverlay} accessibility-elements-hidden={true} />
           <view className={classes.pressedOverlay} accessibility-elements-hidden={true} />
-          <view className={classes.layout}>{children}</view>
+          <view className={classes.layout} {...scaleFeedbackTargetProps}>
+            <ScaleFeedbackContentContext.Provider value={!!scaleFeedbackTargetProps}>
+              {children}
+            </ScaleFeedbackContentContext.Provider>
+          </view>
         </view>
       </IconSlotProvider>
     </ClassNamesProvider>
@@ -157,11 +180,17 @@ export const ListButtonItem = React.forwardRef<unknown, ListButtonItemProps>((pr
     "accessibility-traits": accessibilityTraits,
     ...restProps
   } = props;
-  const { pressed, ...pressHandlers } = usePressTap({
+  const { pressed, bindtouchstart, bindtouchend, bindtouchcancel, ...pressHandlers } = usePressTap({
     disabled,
     onTap: bindtap,
     mainThreadOnTap,
   });
+  const { scaleFeedbackTriggerProps, scaleFeedbackTargetProps } = useScaleFeedback({
+    disabled,
+    onTouchStart: bindtouchstart,
+    onTouchEnd: bindtouchend,
+    onTouchCancel: bindtouchcancel,
+  });
 
   return (
     <ListItemSurface
@@ -171,8 +200,8 @@ export const ListButtonItem = React.forwardRef<unknown, ListButtonItemProps>((pr
       accessibility-element={accessibilityElement}
       accessibility-role-description={accessibilityRoleDescription}
       accessibility-traits={accessibilityTraits ?? (disabled ? "disabled" : "button")}
-      {...pressHandlers}
-      {...restProps}
+      scaleFeedbackTargetProps={scaleFeedbackTargetProps}
+      {...mergeProps(scaleFeedbackTriggerProps, pressHandlers, restProps)}
     />
   );
 });
@@ -193,6 +222,7 @@ function ListCheckboxItemSurface(props: ListCheckboxItemSurfaceProps) {
       {...props}
       disabled={context.disabled}
       pressed={context.pressed}
+      scaleFeedbackTargetProps={context.scaleFeedbackTargetProps}
       accessibility-element={props["accessibility-element"] ?? true}
       accessibility-role-description={props["accessibility-role-description"] ?? "checkbox"}
       accessibility-value={
@@ -254,6 +284,7 @@ function ListRadioItemSurface(props: ListRadioItemSurfaceProps) {
       {...props}
       disabled={context.disabled}
       pressed={context.pressed}
+      scaleFeedbackTargetProps={context.scaleFeedbackTargetProps}
       accessibility-element={props["accessibility-element"] ?? true}
       accessibility-role-description={props["accessibility-role-description"] ?? "radio"}
       accessibility-value={
@@ -277,12 +308,13 @@ export interface ListRadioItemProps
 export const ListRadioItem = React.forwardRef<unknown, ListRadioItemProps>((props, ref) => {
   const { children, className, style, disabled = false, value, ...restProps } = props;
   const [variantProps, remainingProps] = listItem.splitVariantProps(restProps);
-  const [accessibilityProps] = splitAccessibilityProps(remainingProps);
+  const [accessibilityProps, radioProps] = splitAccessibilityProps(remainingProps);
   const interactionRootClassName = listItem().interactionRoot;
 
   return (
     <RadioGroupItem
       ref={ref}
+      {...radioProps}
       value={value}
       disabled={disabled}
       className={interactionRootClassName}
@@ -315,6 +347,7 @@ function ListSwitchItemSurface(props: ListSwitchItemSurfaceProps) {
       {...props}
       disabled={context.disabled}
       pressed={context.pressed}
+      scaleFeedbackTargetProps={context.scaleFeedbackTargetProps}
       accessibility-element={props["accessibility-element"] ?? true}
       accessibility-role-description={props["accessibility-role-description"] ?? "switch"}
       accessibility-value={props["accessibility-value"] ?? (context.checked ? "켜짐" : "꺼짐")}

package/src/components/Menu/Menu.tsx

@@ -8,6 +8,8 @@ import { menuItem, type MenuItemVariantProps } from "@seed-design/lynx-css/recip
 import { menu as menuVars } from "@seed-design/lynx-css/vars/component";
 
 import { useControllableState } from "../../hooks/useControllableState";
+import { useScaleFeedback } from "../../hooks/useScaleFeedback";
+import { mergeProps } from "../../utils/merge-props";
 import { usePressTap } from "../../hooks/usePressTap";
 import type {
   LynxAccessibilityProps,
@@ -38,6 +40,7 @@ type MenuClassNames = {
 };
 type MenuItemClassNames = {
   root: string;
+  scaleContent: string;
   pressedOverlay: string;
   body: string;
   label: string;
@@ -782,11 +785,17 @@ export const MenuItem = React.forwardRef<unknown, MenuItemProps>((props, ref) =>
     },
     [bindtap, context],
   );
-  const { pressed, ...pressHandlers } = usePressTap({
+  const { pressed, bindtouchstart, bindtouchend, bindtouchcancel, ...pressHandlers } = usePressTap({
     disabled,
     onTap: handleTap,
     mainThreadOnTap: mainThreadBindtap,
   });
+  const { scaleFeedbackTriggerProps, scaleFeedbackTargetProps } = useScaleFeedback({
+    disabled,
+    onTouchStart: bindtouchstart,
+    onTouchEnd: bindtouchend,
+    onTouchCancel: bindtouchcancel,
+  });
   const classes = menuItem({
     ...variantProps,
     size: context.size,
@@ -812,11 +821,12 @@ export const MenuItem = React.forwardRef<unknown, MenuItemProps>((props, ref) =>
           accessibility-label={accessibilityLabel}
           accessibility-role-description="button"
           accessibility-traits={disabled ? "disabled" : (accessibilityTraits ?? "button")}
-          {...nativeProps}
-          {...pressHandlers}
+          {...mergeProps(scaleFeedbackTriggerProps, pressHandlers, nativeProps)}
         >
           <view className={classes.pressedOverlay} accessibility-elements-hidden={true} />
-          {children}
+          <view className={classes.scaleContent} {...scaleFeedbackTargetProps}>
+            {children}
+          </view>
         </view>
       </IconSlotProvider>
     </MenuItemClassNamesContext.Provider>

package/src/components/Menu/__tests__/Menu.test.tsx

@@ -0,0 +1,34 @@
+import "@testing-library/jest-dom";
+import { fireEvent, render } from "@lynx-js/react/testing-library";
+import { describe, expect, it, vi } from "vitest";
+import { MenuRoot, MenuItem, MenuItemLabel } from "../Menu";
+
+describe("Menu item feedback", () => {
+  it("scales the inner content while preserving item callbacks and disabled gating", () => {
+    const onTap = vi.fn();
+    const { getByText, rerender } = render(
+      <MenuRoot>
+        <MenuItem bindtap={onTap}>
+          <MenuItemLabel>Choose</MenuItemLabel>
+        </MenuItem>
+      </MenuRoot>,
+    );
+    const label = getByText("Choose") as HTMLElement;
+    const target = label.parentElement!;
+    const root = target.parentElement!;
+    expect(target).toHaveClass("seed-menu-item__scaleContent");
+    expect(target).toHaveAttribute("flatten", "false");
+    expect(target).not.toContainElement(root.querySelector(".seed-menu-item__pressedOverlay"));
+    fireEvent.tap(root);
+    expect(onTap).toHaveBeenCalledTimes(1);
+    rerender(
+      <MenuRoot>
+        <MenuItem disabled bindtap={onTap}>
+          <MenuItemLabel>Choose</MenuItemLabel>
+        </MenuItem>
+      </MenuRoot>,
+    );
+    fireEvent.tap((getByText("Choose") as HTMLElement).parentElement!.parentElement!);
+    expect(onTap).toHaveBeenCalledTimes(1);
+  });
+});

package/src/components/PageBanner/PageBanner.test.tsx

@@ -1,5 +1,7 @@
 import "@testing-library/jest-dom";
-import { fireEvent, render } from "@lynx-js/react/testing-library";
+import * as React from "@lynx-js/react";
+import { runOnBackground } from "@lynx-js/react";
+import { fireEvent, render, waitSchedule } from "@lynx-js/react/testing-library";
 import { describe, expect, it, vi } from "vitest";
 
 import * as PageBanner from "./PageBanner.namespace";
@@ -87,6 +89,111 @@ describe("PageBanner", () => {
     expect(onTap).toHaveBeenCalledTimes(1);
   });
 
+  it("scales the actionable content group without its background or independent close button", () => {
+    render(
+      <PageBanner.Root bindtap={() => {}}>
+        <React.Fragment key="fragment-slots">
+          <view id="prefix" />
+          <PageBanner.Content>
+            <PageBanner.Description>Body</PageBanner.Description>
+          </PageBanner.Content>
+          <view id="suffix" />
+          <PageBanner.CloseButton accessibility-label="Close" />
+        </React.Fragment>
+      </PageBanner.Root>,
+    );
+    const root = getPageBannerRoot();
+    const target = root.querySelector(".seed-page-banner__scaleContent");
+    const close = root.querySelector(".seed-page-banner__closeButton");
+    expect(target).toHaveAttribute("flatten", "false");
+    expect(target?.parentElement).toBe(root);
+    expect(target?.querySelector("#prefix")).toBeTruthy();
+    expect(target?.querySelector("#suffix")).toBeTruthy();
+    expect(target?.contains(close)).toBe(false);
+    expect(close?.parentElement).toBe(root);
+  });
+
+  it("measures the action text itself and prevents action taps from reaching the banner", () => {
+    const onBanner = vi.fn();
+    const onAction = vi.fn();
+    render(
+      <PageBanner.Root bindtap={onBanner}>
+        <PageBanner.Content>
+          <PageBanner.Button bindtap={onAction}>Action</PageBanner.Button>
+        </PageBanner.Content>
+      </PageBanner.Root>,
+    );
+    const root = getPageBannerRoot();
+    const action = root.querySelector(".seed-page-banner__button") as HTMLElement;
+    expect(action).toHaveAttribute("flatten", "false");
+    expect(action.parentElement).toHaveClass("seed-page-banner__content");
+    fireEvent.tap(action, { eventType: "catchEvent" });
+    expect(onAction).toHaveBeenCalledTimes(1);
+    expect(onBanner).not.toHaveBeenCalled();
+  });
+
+  it("does not activate the banner when its independent close action is tapped", () => {
+    const onBanner = vi.fn();
+    const onDismiss = vi.fn();
+    render(
+      <PageBanner.Root open bindtap={onBanner} onDismiss={onDismiss}>
+        <PageBanner.Content>
+          <PageBanner.Description>Body</PageBanner.Description>
+        </PageBanner.Content>
+        <PageBanner.CloseButton accessibility-label="Close" />
+      </PageBanner.Root>,
+    );
+    const root = getPageBannerRoot();
+    fireEvent.tap(root.querySelector(".seed-page-banner__closeButton") as HTMLElement, {
+      eventType: "catchEvent",
+    });
+    expect(onDismiss).toHaveBeenCalledTimes(1);
+    expect(onBanner).not.toHaveBeenCalled();
+  });
+
+  it("bridges banner feedback and preserves independent Main Thread handlers", async () => {
+    function Example({ report }: { report: () => void }) {
+      function handleTouch() {
+        "main thread";
+        runOnBackground(report)();
+      }
+      return (
+        <PageBanner.Root open bindtap={() => {}}>
+          <PageBanner.Content>
+            <PageBanner.Description>Body</PageBanner.Description>
+          </PageBanner.Content>
+          <PageBanner.CloseButton
+            accessibility-label="Close"
+            main-thread:bindtouchstart={handleTouch}
+          />
+        </PageBanner.Root>
+      );
+    }
+    const report = vi.fn();
+    const { container } = render(<Example report={report} />, {
+      enableMainThread: true,
+      enableBackgroundThread: true,
+    });
+    await waitSchedule();
+    const root = container.querySelector(".seed-page-banner__root");
+    const close = container.querySelector(".seed-page-banner__closeButton");
+    if (!root || !close) throw new Error("Expected banner and close button");
+    fireEvent.touchstart(close, { eventType: "catchEvent" });
+    await waitSchedule();
+    expect(report).toHaveBeenCalledTimes(1);
+    expect(root.className).toContain("__root--pressed_false");
+    expect(close.className).toContain("closeButtonPressed_true");
+    fireEvent.touchend(close, { eventType: "catchEvent" });
+    await waitSchedule();
+    expect(close.className).not.toContain("closeButtonPressed_true");
+    fireEvent.touchstart(root, {});
+    await waitSchedule();
+    expect(root.className).toContain("__root--pressed_true");
+    fireEvent.touchcancel(root, {});
+    await waitSchedule();
+    expect(root.className).toContain("__root--pressed_false");
+  });
+
   it("dismisses an uncontrolled banner and composes the close tap handler", () => {
     const onTap = vi.fn();
     const onDismiss = vi.fn();
@@ -100,7 +207,7 @@ describe("PageBanner", () => {
     const closeButton = getPageBannerRoot().querySelector(".seed-page-banner__closeButton");
     if (!closeButton) throw new Error("Expected close button to exist.");
 
-    fireEvent.tap(closeButton);
+    fireEvent.tap(closeButton, { eventType: "catchEvent" });
 
     expect(onTap).toHaveBeenCalledTimes(1);
     expect(onDismiss).toHaveBeenCalledTimes(1);
@@ -119,7 +226,7 @@ describe("PageBanner", () => {
     const closeButton = getPageBannerRoot().querySelector(".seed-page-banner__closeButton");
     if (!closeButton) throw new Error("Expected close button to exist.");
 
-    fireEvent.tap(closeButton);
+    fireEvent.tap(closeButton, { eventType: "catchEvent" });
 
     expect(onDismiss).toHaveBeenCalledTimes(1);
     expect(getPageBannerRoot()).toBeInTheDocument();

package/src/components/PageBanner/PageBanner.tsx

@@ -16,7 +16,7 @@ import type {
 } from "../../types";
 import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context";
 import { IconSlotProvider } from "../Icon/Icon";
-import { ScaleFeedback } from "../ScaleFeedback";
+import { toArray } from "../../utils/children";
 import { mergeProps } from "../../utils/merge-props";
 
 const { ClassNamesProvider, PropsProvider, useClassNames, useProps } =
@@ -48,6 +48,9 @@ function usePageBannerContext(consumer: string) {
  * Differences from React Web:
  * - Uses Lynx native `<view>` and `bindtap` instead of `asChild` and DOM events.
  * - Does not provide a web focus ring.
+ * - Actionable banners group their children for Content Scale. Render CloseButton
+ *   directly under Root (or in a Fragment) to exclude it from that group.
+ *   A CloseButton hidden inside a custom component remains in the content group.
  */
 export interface PageBannerRootProps
   extends Omit<PageBannerVariantProps, "pressed" | "closeButtonPressed" | "interactive">,
@@ -94,6 +97,15 @@ export const PageBannerRoot = React.forwardRef<unknown, PageBannerRootProps>((pr
     onTap: bindtap,
     mainThreadOnTap: mainThreadBindtap,
   });
+  const { scaleFeedbackTriggerProps, scaleFeedbackTargetProps } = useScaleFeedback({
+    disabled: !isInteractive,
+    onTouchStart: pressTap.bindtouchstart,
+    onTouchEnd: pressTap.bindtouchend,
+    onTouchCancel: pressTap.bindtouchcancel,
+  });
+  const childArray = flattenPageBannerChildren(children);
+  const closeButtons = childArray.filter(isPageBannerCloseButton);
+  const scaleChildren = childArray.filter((child) => !isPageBannerCloseButton(child));
   const classNames = pageBanner({
     ...variantProps,
     pressed: pressTap.pressed,
@@ -134,6 +146,7 @@ export const PageBannerRoot = React.forwardRef<unknown, PageBannerRootProps>((pr
               {...mergeProps(
                 ref ? { ref: ref as LynxViewRef } : {},
                 isInteractive ? pressTap : {},
+                isInteractive ? scaleFeedbackTriggerProps : {},
                 nativeProps,
               )}
               accessibility-element={accessibilityElement ?? (isInteractive ? true : undefined)}
@@ -141,7 +154,16 @@ export const PageBannerRoot = React.forwardRef<unknown, PageBannerRootProps>((pr
               className={clsx(classNames.root, className)}
               style={style}
             >
-              {children}
+              {isInteractive ? (
+                <>
+                  <view {...scaleFeedbackTargetProps} className={classNames.scaleContent}>
+                    {scaleChildren}
+                  </view>
+                  {closeButtons}
+                </>
+              ) : (
+                children
+              )}
             </view>
           </IconSlotProvider>
         </PropsProvider>
@@ -253,19 +275,26 @@ export const PageBannerButton = React.forwardRef<unknown, PageBannerButtonProps>
     ...nativeProps
   } = props;
   const classNames = useClassNames();
+  const { scaleFeedbackTriggerProps, scaleFeedbackTargetProps } = useScaleFeedback();
 
   return (
-    <ScaleFeedback>
-      <text
-        {...mergeProps(ref ? { ref: ref as LynxTextRef } : {}, nativeProps)}
-        accessibility-element={accessibilityElement}
-        accessibility-traits={accessibilityTraits}
-        className={clsx(classNames.button, className)}
-        style={style}
-      >
-        {children}
-      </text>
-    </ScaleFeedback>
+    <text
+      {...independentActionProps(
+        mergeProps(
+          ref ? { ref: ref as LynxTextRef } : {},
+          scaleFeedbackTriggerProps,
+          scaleFeedbackTargetProps,
+          nativeProps,
+        ),
+      )}
+      accessibility-element={accessibilityElement}
+      accessibility-traits={accessibilityTraits}
+      className={clsx(classNames.button, className)}
+      style={style}
+      flatten={false}
+    >
+      {children}
+    </text>
   );
 });
 PageBannerButton.displayName = "PageBannerButton";
@@ -326,12 +355,14 @@ export const PageBannerCloseButton = React.forwardRef<unknown, PageBannerCloseBu
     return (
       <IconSlotProvider value={iconSlotContextValue}>
         <view
-          {...mergeProps(
-            ref ? { ref: ref as LynxViewRef } : {},
-            pressTapHandlers,
-            scaleFeedbackTriggerProps,
-            scaleFeedbackTargetProps,
-            nativeProps,
+          {...independentActionProps(
+            mergeProps(
+              ref ? { ref: ref as LynxViewRef } : {},
+              pressTapHandlers,
+              scaleFeedbackTriggerProps,
+              scaleFeedbackTargetProps,
+              nativeProps,
+            ),
           )}
           accessibility-element={accessibilityElement}
           accessibility-label={accessibilityLabel}
@@ -347,3 +378,36 @@ export const PageBannerCloseButton = React.forwardRef<unknown, PageBannerCloseBu
   },
 );
 PageBannerCloseButton.displayName = "PageBannerCloseButton";
+
+function isPageBannerCloseButton(node: React.ReactNode) {
+  return React.isValidElement(node) && node.type === PageBannerCloseButton;
+}
+
+function flattenPageBannerChildren(children: React.ReactNode): React.ReactNode[] {
+  return toArray(children).flatMap((child) =>
+    React.isValidElement<{ children?: React.ReactNode }>(child) && child.type === React.Fragment
+      ? flattenPageBannerChildren(child.props.children)
+      : [child],
+  );
+}
+
+// Native catch handlers keep independent actions from starting the banner's feedback or tap.
+function independentActionProps(props: Record<string, unknown>) {
+  const result = { ...props };
+  for (const event of ["tap", "touchstart", "touchend", "touchcancel"]) {
+    const bind = `bind${event}`;
+    const catchKey = `catch${event}`;
+    const mainBind = `main-thread:${bind}`;
+    const mainCatch = `main-thread:${catchKey}`;
+    const caught = mergeProps(
+      { [catchKey]: result[bind] ?? (() => {}) },
+      { [catchKey]: result[catchKey] },
+      { [mainCatch]: result[mainBind] },
+      { [mainCatch]: result[mainCatch] },
+    );
+    delete result[bind];
+    delete result[mainBind];
+    Object.assign(result, caught);
+  }
+  return result;
+}

package/src/components/QuantityPicker/QuantityPicker.namespace.ts

@@ -0,0 +1,10 @@
+export {
+  QuantityPickerRoot as Root,
+  QuantityPickerDecrementButton as DecrementButton,
+  QuantityPickerValueDisplay as ValueDisplay,
+  QuantityPickerIncrementButton as IncrementButton,
+  type QuantityPickerRootProps as RootProps,
+  type QuantityPickerDecrementButtonProps as DecrementButtonProps,
+  type QuantityPickerValueDisplayProps as ValueDisplayProps,
+  type QuantityPickerIncrementButtonProps as IncrementButtonProps,
+} from "./QuantityPicker";