@seed-design/lynx-react 0.6.3 → 0.7.0

package/src/components/Switch/Switch.test.tsx

@@ -0,0 +1,57 @@
+import "@testing-library/jest-dom";
+import { fireEvent, render } from "@lynx-js/react/testing-library";
+import { describe, expect, it, vi } from "vitest";
+
+import { Switch } from "./index";
+
+function getSwitchRoot(container: HTMLElement) {
+  const root = container.querySelector<HTMLElement>(".seed-switch__root");
+
+  if (!root) {
+    throw new Error("Expected Switch root to exist.");
+  }
+
+  return root;
+}
+
+describe("Switch", () => {
+  it("exposes switch accessibility state and preserves toggling", () => {
+    const onCheckedChange = vi.fn();
+    const { container } = render(
+      <Switch.Root accessibility-label="알림" onCheckedChange={onCheckedChange}>
+        <Switch.Control>
+          <Switch.Thumb />
+        </Switch.Control>
+      </Switch.Root>,
+    );
+
+    const root = getSwitchRoot(container);
+
+    expect(root).toHaveAttribute("accessibility-element", "true");
+    expect(root).toHaveAttribute("accessibility-role-description", "switch");
+    expect(root).toHaveAttribute("accessibility-label", "알림");
+    expect(root).toHaveAttribute("accessibility-value", "not checked");
+
+    fireEvent.tap(root);
+
+    expect(onCheckedChange).toHaveBeenCalledWith(true);
+    expect(root).toHaveAttribute("accessibility-value", "checked");
+  });
+
+  it("exposes the disabled state and ignores taps", () => {
+    const onCheckedChange = vi.fn();
+    const { container } = render(
+      <Switch.Root defaultChecked disabled onCheckedChange={onCheckedChange} />,
+    );
+
+    const root = getSwitchRoot(container);
+
+    expect(root).toHaveAttribute("accessibility-value", "checked");
+    expect(root).toHaveAttribute("accessibility-traits", "disabled");
+
+    fireEvent.tap(root);
+
+    expect(onCheckedChange).not.toHaveBeenCalled();
+    expect(root).toHaveAttribute("accessibility-value", "checked");
+  });
+});

package/src/components/Switch/Switch.tsx

@@ -9,7 +9,17 @@ import type { SwitchmarkVariantProps } from "@seed-design/lynx-css/recipes/switc
 import { splitMultipleVariantsProps } from "../../utils/split-multiple-variants-props";
 import { useControllableState } from "../../hooks/useControllableState";
 import { usePressTap } from "../../hooks/usePressTap";
-import type { LynxStyledElementProps, LynxTextRef, LynxViewRef } from "../../types";
+import type {
+  LynxAccessibilityProps,
+  LynxStyledElementProps,
+  LynxTextRef,
+  LynxViewRef,
+} from "../../types";
+import {
+  useScaleFeedback,
+  type ScaleFeedbackTargetProps,
+} from "../../hooks/useScaleFeedback";
+import { mergeProps } from "../../utils/merge-props";
 
 /**
  * @platform Lynx
@@ -27,14 +37,16 @@ import type { LynxStyledElementProps, LynxTextRef, LynxViewRef } from "../../typ
 interface SwitchContextValue {
   checked: boolean;
   disabled: boolean;
+  pressed: boolean;
   switchVariantProps: SwitchVariantProps;
   switchmarkVariantProps: SwitchmarkVariantProps;
   toggle: () => void;
+  scaleFeedbackTargetProps: ScaleFeedbackTargetProps;
 }
 
 const SwitchContext = React.createContext<SwitchContextValue | null>(null);
 
-function useSwitchContext(consumer: string): SwitchContextValue {
+export function useSwitchContext(consumer: string): SwitchContextValue {
   const ctx = React.useContext(SwitchContext);
   if (!ctx) {
     throw new Error(`<${consumer}/> must be rendered inside <SwitchRoot/>.`);
@@ -62,7 +74,8 @@ function useSwitchmarkControlContext(consumer: string): SwitchmarkControlContext
 export interface SwitchRootProps
   extends SwitchVariantProps,
     Omit<SwitchmarkVariantProps, "size">,
-    LynxStyledElementProps {
+    LynxStyledElementProps,
+    LynxAccessibilityProps {
   checked?: boolean;
   defaultChecked?: boolean;
   disabled?: boolean;
@@ -79,8 +92,15 @@ export const SwitchRoot = React.forwardRef<unknown, SwitchRootProps>((props, ref
     onCheckedChange,
     ...restProps
   } = props;
-  const [{ switch: switchVariantProps, switchmark: switchmarkVariantProps }, nativeProps] =
+  const [{ switch: switchVariantProps, switchmark: switchmarkVariantProps }, restNativeProps] =
     splitMultipleVariantsProps(restProps, { switch: switchStyle, switchmark });
+  const {
+    "accessibility-element": accessibilityElement = true,
+    "accessibility-role-description": accessibilityRoleDescription = "switch",
+    "accessibility-traits": accessibilityTraits,
+    "accessibility-value": accessibilityValue,
+    ...nativeProps
+  } = restNativeProps;
 
   const [checked, setChecked] = useControllableState({
     value: checkedProp,
@@ -90,10 +110,22 @@ export const SwitchRoot = React.forwardRef<unknown, SwitchRootProps>((props, ref
 
   const toggle = React.useCallback(() => setChecked(!checked), [checked, setChecked]);
 
-  const { pressed: _pressed, ...pressHandlers } = usePressTap({
+  const {
+    pressed,
+    bindtouchstart,
+    bindtouchend,
+    bindtouchcancel,
+    ...pressHandlers
+  } = usePressTap({
     disabled,
     onTap: toggle,
   });
+  const { scaleFeedbackTriggerProps, scaleFeedbackTargetProps } = useScaleFeedback({
+    disabled,
+    onTouchStart: bindtouchstart,
+    onTouchEnd: bindtouchend,
+    onTouchCancel: bindtouchcancel,
+  });
 
   const rootClassName = switchStyle({ ...switchVariantProps, disabled }).root;
 
@@ -101,20 +133,29 @@ export const SwitchRoot = React.forwardRef<unknown, SwitchRootProps>((props, ref
     () => ({
       checked,
       disabled,
+      pressed,
       switchVariantProps,
       switchmarkVariantProps,
       toggle,
+      scaleFeedbackTargetProps,
     }),
-    [checked, disabled, switchVariantProps, switchmarkVariantProps, toggle],
+    [checked, disabled, pressed, switchVariantProps, switchmarkVariantProps, toggle, scaleFeedbackTargetProps],
   );
 
   return (
     <SwitchContext.Provider value={contextValue}>
       <view
-        {...(ref ? { ref: ref as LynxViewRef } : {})}
+        {...mergeProps(
+          ref ? { ref: ref as LynxViewRef } : {},
+          scaleFeedbackTriggerProps,
+          pressHandlers,
+          nativeProps,
+        )}
         className={clsx(rootClassName, className)}
-        {...pressHandlers}
-        {...nativeProps}
+        accessibility-element={accessibilityElement}
+        accessibility-role-description={accessibilityRoleDescription}
+        accessibility-traits={accessibilityTraits ?? (disabled ? "disabled" : undefined)}
+        accessibility-value={accessibilityValue ?? (checked ? "checked" : "not checked")}
       >
         {children}
       </view>
@@ -127,7 +168,8 @@ SwitchRoot.displayName = "SwitchRoot";
 
 export interface SwitchControlProps
   extends Pick<SwitchmarkVariantProps, "tone" | "size">,
-    LynxStyledElementProps {}
+    // Keep the scale target's Android View even if shared props later expose flatten.
+    Omit<LynxStyledElementProps, "flatten"> {}
 
 export const SwitchControl = React.forwardRef<unknown, SwitchControlProps>((props, ref) => {
   const [variantProps, restProps] = switchmark.splitVariantProps(props);
@@ -146,9 +188,13 @@ export const SwitchControl = React.forwardRef<unknown, SwitchControlProps>((prop
       value={{ thumbClassName: classes.thumb, switchmarkVariantProps }}
     >
       <view
-        {...(ref ? { ref: ref as LynxViewRef } : {})}
+        {...mergeProps(
+          ref ? { ref: ref as LynxViewRef } : {},
+          context.scaleFeedbackTargetProps,
+          nativeProps,
+        )}
         className={clsx(classes.root, className)}
-        {...nativeProps}
+        flatten={false}
       >
         {children}
       </view>
@@ -167,9 +213,8 @@ export const SwitchThumb = React.forwardRef<unknown, SwitchThumbProps>((props, r
 
   return (
     <view
-      {...(ref ? { ref: ref as LynxViewRef } : {})}
+      {...mergeProps(ref ? { ref: ref as LynxViewRef } : {}, nativeProps)}
       className={clsx(thumbClassName, className)}
-      {...nativeProps}
     />
   );
 });
@@ -189,9 +234,8 @@ export const SwitchLabel = React.forwardRef<unknown, SwitchLabelProps>((props, r
 
   return (
     <text
-      {...(ref ? { ref: ref as LynxTextRef } : {})}
+      {...mergeProps(ref ? { ref: ref as LynxTextRef } : {}, nativeProps)}
       className={clsx(labelClassName, className)}
-      {...nativeProps}
     >
       {children}
     </text>

package/src/components/Tabs/Tabs.test.tsx

@@ -82,6 +82,25 @@ describe("Tabs", () => {
     expect(second).toHaveAttribute("accessibility-value", "selected");
   });
 
+  it("calls bindtap when the selected trigger is tapped again", () => {
+    const bindtap = vi.fn();
+    const onValueChange = vi.fn();
+    const { container } = render(
+      <Tabs.Root defaultValue="one" onValueChange={onValueChange}>
+        <Tabs.List>
+          <Tabs.Trigger value="one" bindtap={bindtap}>
+            첫 번째
+          </Tabs.Trigger>
+        </Tabs.List>
+      </Tabs.Root>,
+    );
+
+    fireEvent.tap(getTrigger(container, "첫 번째"));
+
+    expect(bindtap).toHaveBeenCalledTimes(1);
+    expect(onValueChange).not.toHaveBeenCalled();
+  });
+
   it("derives trigger positions from ordered widths instead of platform coordinates", () => {
     expect(getTabsLayoutWidth({ detail: { width: 128 }, params: { width: 128 } })).toBe(128);
     expect(

package/src/components/Tabs/Tabs.tsx

@@ -12,13 +12,16 @@ import clsx from "clsx";
 
 import { useControllableState } from "../../hooks/useControllableState";
 import { usePressTap } from "../../hooks/usePressTap";
+import { useScaleFeedback } from "../../hooks/useScaleFeedback";
 import type {
   LynxAccessibilityProps,
+  LynxPressableProps,
   LynxStyledElementProps,
   LynxViewProps,
   LynxViewRef,
 } from "../../types";
 import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context";
+import { Box } from "../Box";
 import {
   areTabsTransitionsEnabled,
   getTabsLayoutWidth,
@@ -26,6 +29,7 @@ import {
   getTabsTriggerRects,
   type TabsLayoutRect,
 } from "./Tabs.utils";
+import { mergeProps } from "../../utils/merge-props";
 
 type NativeViewProps = IntrinsicElements["view"];
 type NativeViewPagerProps = IntrinsicElements["viewpager"];
@@ -333,8 +337,7 @@ export const TabsRoot = React.forwardRef<unknown, TabsRootProps>((props, ref) =>
     <TabsContext.Provider value={contextValue}>
       <ClassNamesProvider value={classNames}>
         <view
-          {...(ref ? { ref: ref as LynxViewRef } : {})}
-          {...nativeProps}
+          {...mergeProps(ref ? { ref: ref as LynxViewRef } : {}, nativeProps)}
           className={clsx(classNames.root, className)}
           style={style}
         >
@@ -381,19 +384,14 @@ export const TabsList = React.forwardRef<unknown, TabsListProps>((props, ref) =>
     syncTriggerOrder(triggerOrder);
   }, [items, syncTriggerOrder, triggerOrder]);
 
-  const mergedRef = React.useCallback(
-    (node: NodesRef | null) => {
-      setListRef(node);
-      if (typeof ref === "function") ref(node);
-      else if (ref) ref.current = node;
-    },
+  const mergedRef = React.useMemo(
+    () => mergeProps({ ref: setListRef }, { ref: ref as LynxViewRef }).ref,
     [ref, setListRef],
   );
 
   return (
     <scroll-view
-      ref={mergedRef}
-      {...nativeProps}
+      {...mergeProps({ ref: mergedRef }, nativeProps)}
       scroll-orientation="horizontal"
       scroll-bar-enable={false}
       accessibility-element={false}
@@ -409,19 +407,26 @@ TabsList.displayName = "TabsList";
 
 ////////////////////////////////////////////////////////////////////////////////////
 
-export interface TabsTriggerProps extends LynxStyledElementProps {
+// Keep the scale target's Android View even if shared props later expose flatten.
+export interface TabsTriggerProps
+  extends Omit<LynxStyledElementProps, "children" | "flatten">,
+    Pick<LynxPressableProps, "bindtap"> {
+  children: string | number;
   value: string;
   disabled?: boolean;
+  notification?: React.ReactNode;
   "accessibility-label"?: LynxAccessibilityProps["accessibility-label"];
 }
 
 export const TabsTrigger = React.forwardRef<unknown, TabsTriggerProps>((props, ref) => {
   const {
     children,
+    notification,
     className,
     style,
     value: triggerValue,
     disabled = false,
+    bindtap,
     "accessibility-label": accessibilityLabel,
     ...nativeProps
   } = props;
@@ -439,11 +444,27 @@ export const TabsTrigger = React.forwardRef<unknown, TabsTriggerProps>((props, r
     context.updateTriggerDisabled(triggerValue, disabled);
   }, [context.updateTriggerDisabled, triggerValue, disabled]);
 
-  const handleTap = React.useCallback<NonNullable<NativeViewProps["bindtap"]>>(() => {
-    "background only";
-    context.selectValue(triggerValue);
-  }, [context.selectValue, triggerValue]);
-  const { pressed: _pressed, ...pressHandlers } = usePressTap({ disabled, onTap: handleTap });
+  const handleTap = React.useCallback<NonNullable<NativeViewProps["bindtap"]>>(
+    (...args) => {
+      "background only";
+      bindtap?.(...args);
+      context.selectValue(triggerValue);
+    },
+    [bindtap, context.selectValue, triggerValue],
+  );
+  const {
+    pressed: _pressed,
+    bindtouchstart,
+    bindtouchend,
+    bindtouchcancel,
+    ...pressHandlers
+  } = usePressTap({ disabled, onTap: handleTap });
+  const { scaleFeedbackTriggerProps, scaleFeedbackTargetProps } = useScaleFeedback({
+    disabled,
+    onTouchStart: bindtouchstart,
+    onTouchEnd: bindtouchend,
+    onTouchCancel: bindtouchcancel,
+  });
 
   const handleLayoutChange = React.useCallback<LayoutChangeHandler>(
     (...args) => {
@@ -465,11 +486,15 @@ export const TabsTrigger = React.forwardRef<unknown, TabsTriggerProps>((props, r
 
   return (
     <view
-      {...(ref ? { ref: ref as LynxViewRef } : {})}
-      {...nativeProps}
-      {...pressHandlers}
+      {...mergeProps(
+        { bindlayoutchange: handleLayoutChange },
+        ref ? { ref: ref as LynxViewRef } : {},
+        pressHandlers,
+        scaleFeedbackTargetProps,
+        scaleFeedbackTriggerProps,
+        nativeProps,
+      )}
       flatten={false}
-      bindlayoutchange={handleLayoutChange}
       accessibility-element={true}
       accessibility-role-description="tab"
       accessibility-label={accessibilityLabel ?? label}
@@ -478,7 +503,14 @@ export const TabsTrigger = React.forwardRef<unknown, TabsTriggerProps>((props, r
       className={clsx(triggerClasses.trigger, className)}
       style={style}
     >
-      <text className={triggerClasses.triggerLabel}>{children}</text>
+      {notification ? (
+        <Box position="relative">
+          <text className={triggerClasses.triggerLabel}>{children}</text>
+          {notification}
+        </Box>
+      ) : (
+        <text className={triggerClasses.triggerLabel}>{children}</text>
+      )}
     </view>
   );
 });
@@ -507,9 +539,11 @@ export const TabsIndicator = React.forwardRef<unknown, TabsIndicatorProps>((prop
 
   return (
     <view
-      {...(ref ? { ref: ref as LynxViewRef } : {})}
-      main-thread:ref={indicatorRef}
-      {...nativeProps}
+      {...mergeProps(
+        { "main-thread:ref": indicatorRef },
+        ref ? { ref: ref as LynxViewRef } : {},
+        nativeProps,
+      )}
       accessibility-elements-hidden={true}
       className={clsx(classNames.indicator, className)}
       style={
@@ -545,8 +579,7 @@ export const TabsContent = React.forwardRef<unknown, TabsContentProps>((props, r
 
   const content = (
     <view
-      {...(ref ? { ref: ref as LynxViewRef } : {})}
-      {...nativeProps}
+      {...mergeProps(ref ? { ref: ref as LynxViewRef } : {}, nativeProps)}
       accessibility-elements-hidden={!selected}
       accessibility-role-description="tabpanel"
       accessibility-value={selected ? "selected" : "not selected"}
@@ -603,8 +636,7 @@ export const TabsCarousel = React.forwardRef<unknown, TabsCarouselProps>((props,
   return (
     <TabsCarouselContext.Provider value={contextValue}>
       <view
-        {...(ref ? { ref: ref as LynxViewRef } : {})}
-        {...nativeProps}
+        {...mergeProps(ref ? { ref: ref as LynxViewRef } : {}, nativeProps)}
         className={clsx(classNames.carousel, className)}
         style={style}
       >
@@ -641,12 +673,8 @@ export const TabsCarouselCamera = React.forwardRef<unknown, TabsCarouselCameraPr
     const { indicatorRef, pagerValues, triggerRects } = tabsContext;
     const indicatorRects = pagerValues.map((value) => triggerRects[value] ?? null);
 
-    const mergedRef = React.useCallback(
-      (node: NodesRef | null) => {
-        tabsContext.setPagerRef(node);
-        if (typeof ref === "function") ref(node);
-        else if (ref) ref.current = node;
-      },
+    const mergedRef = React.useMemo(
+      () => mergeProps({ ref: tabsContext.setPagerRef }, { ref: ref as LynxViewRef }).ref,
       [ref, tabsContext.setPagerRef],
     );
 
@@ -717,15 +745,19 @@ export const TabsCarouselCamera = React.forwardRef<unknown, TabsCarouselCameraPr
 
     return (
       <viewpager
-        ref={mergedRef}
-        {...nativeProps}
+        {...mergeProps(
+          {
+            ref: mergedRef,
+            bindwillchange: handleWillChange,
+            bindchange: handleChange,
+            bindoffsetchange: handleOffsetChange,
+            "main-thread:bindoffsetchange": handleIndicatorOffsetChange,
+          },
+          nativeProps,
+        )}
         initial-select-index={Math.max(0, tabsContext.selectedPagerIndex)}
         enable-scroll={carouselContext.swipeable}
         ios-gesture-offset={carouselContext.iosBackGestureEdgeWidth}
-        bindwillchange={handleWillChange}
-        bindchange={handleChange}
-        bindoffsetchange={handleOffsetChange}
-        main-thread:bindoffsetchange={handleIndicatorOffsetChange}
         className={clsx(classNames.carouselCamera, className)}
         style={style}
       >

package/src/components/TagGroup/TagGroup.tsx

@@ -11,6 +11,7 @@ import { toArray } from "../../utils/children";
 import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context";
 import { splitMultipleVariantsProps } from "../../utils/split-multiple-variants-props";
 import { useStyleProps, type StyleProps } from "../../utils/styled";
+import { mergeProps } from "../../utils/merge-props";
 
 const { PropsProvider, useProps, ClassNamesProvider, useClassNames } =
   createSlotRecipeContext(tagGroupItem);
@@ -49,9 +50,8 @@ export const TagGroupRoot = React.forwardRef<unknown, TagGroupRootProps>((props,
   return (
     <PropsProvider value={tagGroupItemVariantProps}>
       <view
-        {...(ref ? { ref: ref as LynxViewRef } : {})}
+        {...mergeProps(ref ? { ref: ref as LynxViewRef } : {}, nativeProps)}
         className={clsx(classes.root, className)}
-        {...nativeProps}
       >
         {visibleChildren.map((child, index) => {
           if (index === 0) return child;
@@ -97,10 +97,9 @@ export const TagGroupItem = React.forwardRef<unknown, TagGroupItemProps>((props,
   return (
     <ClassNamesProvider value={classes}>
       <view
-        {...(ref ? { ref: ref as LynxViewRef } : {})}
+        {...mergeProps(ref ? { ref: ref as LynxViewRef } : {}, nativeProps)}
         className={clsx(classes.root, className)}
         style={style}
-        {...nativeProps}
       >
         {children}
       </view>
@@ -118,9 +117,8 @@ export const TagGroupItemLabel = React.forwardRef<unknown, TagGroupItemLabelProp
   const { children, className, ...nativeProps } = props;
   return (
     <text
-      {...(ref ? { ref: ref as LynxTextRef } : {})}
+      {...mergeProps(ref ? { ref: ref as LynxTextRef } : {}, nativeProps)}
       className={clsx(classes.label, className)}
-      {...nativeProps}
     >
       {children}
     </text>

package/src/components/Text/Text.tsx

@@ -12,6 +12,7 @@ import {
   type TextStyleProps,
 } from "../../utils/styled";
 import type { LynxStyledElementProps, LynxTextRef } from "../../types";
+import { mergeProps } from "../../utils/merge-props";
 
 function capitalize<T extends string>(value: T): Capitalize<T> {
   return (value.charAt(0).toUpperCase() + value.slice(1)) as Capitalize<T>;
@@ -42,8 +43,7 @@ export const Text = React.forwardRef<unknown, TextProps>((props, ref) => {
 
   return (
     <text
-      {...(ref ? { ref: ref as LynxTextRef } : {})}
-      {...nativeProps}
+      {...mergeProps(ref ? { ref: ref as LynxTextRef } : {}, nativeProps)}
       className={clsx(className)}
       style={
         {