@seed-design/lynx-react 0.6.3 → 0.7.0

package/src/components/Chip/Chip.tsx

@@ -5,6 +5,7 @@ import { chip, type ChipVariantProps } from "@seed-design/lynx-css/recipes/chip"
 
 import { useControllableState } from "../../hooks/useControllableState";
 import { usePressTap } from "../../hooks/usePressTap";
+import { useScaleFeedback } from "../../hooks/useScaleFeedback";
 import type {
   LynxAccessibilityProps,
   LynxPressableProps,
@@ -21,6 +22,7 @@ import {
   type PrefixIconProps,
   type SuffixIconProps,
 } from "../Icon/Icon";
+import { mergeProps } from "../../utils/merge-props";
 
 const { ClassNamesProvider, useClassNames } = createSlotRecipeContext(chip);
 
@@ -30,7 +32,9 @@ interface ChipRootViewProps
   extends ChipVariantProps,
     LynxStyledElementProps,
     LynxPressableProps,
-    LynxAccessibilityProps {}
+    LynxAccessibilityProps {
+  flatten?: false;
+}
 
 const ChipRootView = React.forwardRef<unknown, ChipRootViewProps>((props, ref) => {
   const [variantProps, otherProps] = chip.splitVariantProps(props);
@@ -70,9 +74,8 @@ const ChipRootView = React.forwardRef<unknown, ChipRootViewProps>((props, ref) =
       <IconSlotProvider value={iconSlotContextValue}>
         <IconRequired enabled={variantProps.layout === "iconOnly"}>
           <view
-            {...(ref ? { ref: ref as LynxViewRef } : {})}
+            {...mergeProps(ref ? { ref: ref as LynxViewRef } : {}, nativeProps)}
             className={clsx(classes.root, className)}
-            {...nativeProps}
           >
             {children}
           </view>
@@ -95,7 +98,8 @@ ChipRootView.displayName = "ChipRootView";
  */
 export interface ChipButtonProps
   extends ChipPublicVariantProps,
-    LynxStyledElementProps,
+    // Keep the scale target's Android View even if shared props later expose flatten.
+    Omit<LynxStyledElementProps, "flatten">,
     LynxPressableProps,
     LynxAccessibilityProps {
   disabled?: boolean;
@@ -107,25 +111,38 @@ export const ChipButton = React.forwardRef<unknown, ChipButtonProps>((props, ref
     "main-thread:bindtap": mainThreadBindtap,
     disabled = false,
     "accessibility-element": accessibilityElement = true,
+    "accessibility-role-description": accessibilityRoleDescription = "button",
     "accessibility-traits": accessibilityTraits,
     ...restProps
   } = props;
-  const { pressed, ...pressHandlers } = usePressTap({
+  const { pressed, bindtouchstart, bindtouchend, bindtouchcancel, ...pressHandlers } = usePressTap({
     disabled,
     onTap: bindtap,
     mainThreadOnTap: mainThreadBindtap,
   });
+  const { scaleFeedbackTriggerProps, scaleFeedbackTargetProps } = useScaleFeedback({
+    disabled,
+    onTouchStart: bindtouchstart,
+    onTouchEnd: bindtouchend,
+    onTouchCancel: bindtouchcancel,
+  });
 
   return (
     <ChipRootView
-      ref={ref}
-      {...restProps}
+      {...mergeProps(
+        { ref },
+        scaleFeedbackTargetProps,
+        scaleFeedbackTriggerProps,
+        pressHandlers,
+        restProps,
+      )}
       disabled={disabled}
       selected={false}
       pressed={pressed}
       accessibility-element={accessibilityElement}
-      accessibility-traits={disabled ? "disabled" : (accessibilityTraits ?? "button")}
-      {...pressHandlers}
+      accessibility-role-description={accessibilityRoleDescription}
+      accessibility-traits={accessibilityTraits ?? (disabled ? "disabled" : undefined)}
+      flatten={false}
     />
   );
 });
@@ -135,7 +152,7 @@ ChipButton.displayName = "ChipButton";
 export interface ChipRootProps extends ChipButtonProps {}
 
 export const ChipRoot = React.forwardRef<unknown, ChipRootProps>((props, ref) => (
-  <ChipButton ref={ref} {...props} />
+  <ChipButton {...mergeProps({ ref }, props)} />
 ));
 ChipRoot.displayName = "ChipRoot";
 
@@ -163,7 +180,9 @@ export const ChipToggle = React.forwardRef<unknown, ChipToggleProps>((props, ref
     "main-thread:bindtap": mainThreadBindtap,
     disabled = false,
     "accessibility-element": accessibilityElement = true,
+    "accessibility-role-description": accessibilityRoleDescription = "toggle",
     "accessibility-traits": accessibilityTraits,
+    "accessibility-value": accessibilityValue,
     ...restProps
   } = props;
   const [checked, setChecked] = useControllableState({
@@ -178,24 +197,35 @@ export const ChipToggle = React.forwardRef<unknown, ChipToggleProps>((props, ref
     },
     [bindtap, checked, setChecked],
   );
-  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,
+  });
 
   return (
     <ChipRootView
-      ref={ref}
-      {...restProps}
+      {...mergeProps(
+        { ref },
+        scaleFeedbackTargetProps,
+        scaleFeedbackTriggerProps,
+        pressHandlers,
+        restProps,
+      )}
       disabled={disabled}
       selected={checked}
       pressed={pressed}
       accessibility-element={accessibilityElement}
-      accessibility-traits={
-        disabled ? "disabled" : checked ? "selected" : (accessibilityTraits ?? "button")
-      }
-      {...pressHandlers}
+      accessibility-role-description={accessibilityRoleDescription}
+      accessibility-traits={accessibilityTraits ?? (disabled ? "disabled" : undefined)}
+      accessibility-value={accessibilityValue ?? (checked ? "checked" : "not checked")}
+      flatten={false}
     />
   );
 });
@@ -258,7 +288,10 @@ export const ChipRadioRoot = React.forwardRef<unknown, ChipRadioRootProps>((prop
 
   return (
     <ChipRadioGroupContext.Provider value={contextValue}>
-      <view {...(ref ? { ref: ref as LynxViewRef } : {})} className={className} {...nativeProps}>
+      <view
+        {...mergeProps(ref ? { ref: ref as LynxViewRef } : {}, nativeProps)}
+        className={className}
+      >
         {children}
       </view>
     </ChipRadioGroupContext.Provider>
@@ -284,7 +317,9 @@ export const ChipRadioItem = React.forwardRef<unknown, ChipRadioItemProps>((prop
     bindtap,
     "main-thread:bindtap": mainThreadBindtap,
     "accessibility-element": accessibilityElement = true,
+    "accessibility-role-description": accessibilityRoleDescription = "radio",
     "accessibility-traits": accessibilityTraits,
+    "accessibility-value": accessibilityValue,
     ...restProps
   } = props;
   const group = useChipRadioGroupContext("ChipRadioItem");
@@ -297,24 +332,35 @@ export const ChipRadioItem = React.forwardRef<unknown, ChipRadioItemProps>((prop
     },
     [bindtap, group, itemValue, selected],
   );
-  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,
+  });
 
   return (
     <ChipRootView
-      ref={ref}
-      {...restProps}
+      {...mergeProps(
+        { ref },
+        scaleFeedbackTargetProps,
+        scaleFeedbackTriggerProps,
+        pressHandlers,
+        restProps,
+      )}
       disabled={disabled}
       selected={selected}
       pressed={pressed}
       accessibility-element={accessibilityElement}
-      accessibility-traits={
-        disabled ? "disabled" : selected ? "selected" : (accessibilityTraits ?? "button")
-      }
-      {...pressHandlers}
+      accessibility-role-description={accessibilityRoleDescription}
+      accessibility-traits={accessibilityTraits ?? (disabled ? "disabled" : undefined)}
+      accessibility-value={accessibilityValue ?? (selected ? "selected" : "not selected")}
+      flatten={false}
     />
   );
 });
@@ -330,9 +376,8 @@ export const ChipLabel = React.forwardRef<unknown, ChipLabelProps>((props, ref)
 
   return (
     <text
-      {...(ref ? { ref: ref as LynxTextRef } : {})}
+      {...mergeProps(ref ? { ref: ref as LynxTextRef } : {}, nativeProps)}
       className={clsx(classes.label, className)}
-      {...nativeProps}
     >
       {children}
     </text>
@@ -343,7 +388,7 @@ ChipLabel.displayName = "ChipLabel";
 export interface ChipPrefixIconProps extends PrefixIconProps {}
 
 export const ChipPrefixIcon = React.forwardRef<unknown, ChipPrefixIconProps>((props, ref) => (
-  <PrefixIcon ref={ref} {...props} />
+  <PrefixIcon {...mergeProps({ ref }, props)} />
 ));
 ChipPrefixIcon.displayName = "ChipPrefixIcon";
 
@@ -355,9 +400,8 @@ export const ChipPrefixAvatar = React.forwardRef<unknown, ChipPrefixAvatarProps>
 
   return (
     <view
-      {...(ref ? { ref: ref as LynxViewRef } : {})}
+      {...mergeProps(ref ? { ref: ref as LynxViewRef } : {}, nativeProps)}
       className={clsx(classes.prefixAvatar, className)}
-      {...nativeProps}
     >
       {children}
     </view>
@@ -368,6 +412,6 @@ ChipPrefixAvatar.displayName = "ChipPrefixAvatar";
 export interface ChipSuffixIconProps extends SuffixIconProps {}
 
 export const ChipSuffixIcon = React.forwardRef<unknown, ChipSuffixIconProps>((props, ref) => (
-  <SuffixIcon ref={ref} {...props} />
+  <SuffixIcon {...mergeProps({ ref }, props)} />
 ));
 ChipSuffixIcon.displayName = "ChipSuffixIcon";

package/src/components/Count/Count.tsx

@@ -0,0 +1,35 @@
+import clsx from "clsx";
+import * as React from "@lynx-js/react";
+import { isValidElement } from "@lynx-js/react";
+
+import type { LynxStyledElementProps, LynxTextRef } from "../../types";
+
+const countMarker = Symbol.for("@seed-design/lynx-react/count");
+
+interface CountComponent {
+  [countMarker]?: true;
+}
+
+export interface CountProps extends LynxStyledElementProps {}
+
+export const Count = React.forwardRef<unknown, CountProps>((props, ref) => {
+  const { children, className, ...nativeProps } = props;
+
+  return (
+    <text
+      {...(ref ? { ref: ref as LynxTextRef } : {})}
+      {...nativeProps}
+      className={clsx("seed-count", className)}
+    >
+      {children}
+    </text>
+  );
+});
+Count.displayName = "Count";
+(Count as CountComponent)[countMarker] = true;
+
+export function isCountElement(node: React.ReactNode): node is React.ReactElement<CountProps> {
+  if (!isValidElement(node)) return false;
+
+  return (node.type as CountComponent)[countMarker] === true;
+}

package/src/components/Count/index.ts

@@ -0,0 +1 @@
+export { Count, type CountProps } from "./Count";

package/src/components/Divider/Divider.tsx

@@ -3,6 +3,7 @@ import * as React from "@lynx-js/react";
 import type { LynxAccessibilityProps, LynxStyledElementProps } from "../../types";
 import type { StyleProps } from "../../utils/styled";
 import { Box } from "../Box";
+import { mergeProps } from "../../utils/merge-props";
 
 export interface DividerProps
   extends Omit<LynxStyledElementProps, "children">,
@@ -52,8 +53,7 @@ export const Divider = React.forwardRef<unknown, DividerProps>((props, ref) => {
 
   return (
     <Box
-      {...nativeProps}
-      ref={ref}
+      {...mergeProps({ ref }, nativeProps)}
       borderColor={color}
       borderWidth={0}
       borderBottomWidth={isHorizontal ? thickness : 0}

package/src/components/Field/Field.tsx

@@ -7,6 +7,7 @@ import clsx from "clsx";
 import type { LynxStyledElementProps, LynxTextRef, LynxViewRef } from "../../types";
 import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context";
 import { FieldContext, useFieldContext } from "./context";
+import { mergeProps } from "../../utils/merge-props";
 
 const { ClassNamesProvider: FieldClassNamesProvider, useClassNames: useFieldClassNames } =
   createSlotRecipeContext(field);
@@ -43,17 +44,8 @@ export const FieldRoot = React.forwardRef<NodesRef, FieldRootProps>((props, forw
   const rootRef = React.useRef<NodesRef | null>(null);
   const classes = field({ invalid });
 
-  const mergedRef = React.useCallback(
-    (node: NodesRef | null) => {
-      "background only";
-
-      rootRef.current = node;
-      if (typeof forwardedRef === "function") {
-        forwardedRef(node);
-      } else if (forwardedRef) {
-        forwardedRef.current = node;
-      }
-    },
+  const mergedRef = React.useMemo(
+    () => mergeProps({ ref: rootRef }, { ref: forwardedRef }).ref,
     [forwardedRef],
   );
 
@@ -73,7 +65,10 @@ export const FieldRoot = React.forwardRef<NodesRef, FieldRootProps>((props, forw
   return (
     <FieldContext.Provider value={contextValue}>
       <FieldClassNamesProvider value={classes}>
-        <view ref={mergedRef} className={clsx(classes.root, className)} {...nativeProps}>
+        <view
+          {...mergeProps({ ref: mergedRef }, nativeProps)}
+          className={clsx(classes.root, className)}
+        >
           {children}
         </view>
       </FieldClassNamesProvider>
@@ -92,9 +87,8 @@ export const FieldHeader = React.forwardRef<unknown, FieldHeaderProps>((props, r
 
   return (
     <view
-      {...(ref ? { ref: ref as LynxViewRef } : {})}
+      {...mergeProps(ref ? { ref: ref as LynxViewRef } : {}, nativeProps)}
       className={clsx(classes.header, className)}
-      {...nativeProps}
     >
       {children}
     </view>
@@ -112,9 +106,8 @@ export const FieldLabel = React.forwardRef<unknown, FieldLabelProps>((props, ref
   return (
     <FieldLabelClassNamesProvider value={classes}>
       <text
-        {...(ref ? { ref: ref as LynxTextRef } : {})}
+        {...mergeProps(ref ? { ref: ref as LynxTextRef } : {}, nativeProps)}
         className={clsx(classes.root, className)}
-        {...nativeProps}
       >
         {children}
       </text>
@@ -132,9 +125,8 @@ export const FieldIndicatorText = React.forwardRef<unknown, FieldIndicatorTextPr
 
     return (
       <text
-        {...(ref ? { ref: ref as LynxTextRef } : {})}
+        {...mergeProps(ref ? { ref: ref as LynxTextRef } : {}, nativeProps)}
         className={clsx(classes.indicatorText, className)}
-        {...nativeProps}
       >
         {"\u00a0"}
         {children}
@@ -153,10 +145,9 @@ export const FieldRequiredIndicator = React.forwardRef<unknown, FieldRequiredInd
 
     return (
       <text
-        {...(ref ? { ref: ref as LynxTextRef } : {})}
+        {...mergeProps(ref ? { ref: ref as LynxTextRef } : {}, nativeProps)}
         accessibility-elements-hidden={true}
         className={clsx(classes.indicatorIcon, className)}
-        {...nativeProps}
       >
         {"\u200a"}
         {children}
@@ -176,9 +167,8 @@ export const FieldFooter = React.forwardRef<unknown, FieldFooterProps>((props, r
 
   return (
     <view
-      {...(ref ? { ref: ref as LynxViewRef } : {})}
+      {...mergeProps(ref ? { ref: ref as LynxViewRef } : {}, nativeProps)}
       className={clsx(classes.footer, className)}
-      {...nativeProps}
     >
       {children}
     </view>
@@ -194,9 +184,8 @@ export const FieldDescription = React.forwardRef<unknown, FieldDescriptionProps>
 
   return (
     <text
-      {...(ref ? { ref: ref as LynxTextRef } : {})}
+      {...mergeProps(ref ? { ref: ref as LynxTextRef } : {}, nativeProps)}
       className={clsx(classes.description, className)}
-      {...nativeProps}
     >
       {children}
     </text>
@@ -212,9 +201,8 @@ export const FieldErrorMessage = React.forwardRef<unknown, FieldErrorMessageProp
 
   return (
     <text
-      {...(ref ? { ref: ref as LynxTextRef } : {})}
+      {...mergeProps(ref ? { ref: ref as LynxTextRef } : {}, nativeProps)}
       className={clsx(classes.errorMessage, className)}
-      {...nativeProps}
     >
       {children}
     </text>
@@ -239,9 +227,8 @@ export const FieldCharacterCount = React.forwardRef<unknown, FieldCharacterCount
 
     return (
       <view
-        {...(ref ? { ref: ref as LynxViewRef } : {})}
+        {...mergeProps(ref ? { ref: ref as LynxViewRef } : {}, nativeProps)}
         className={clsx(classes.characterCountArea, className)}
-        {...nativeProps}
       >
         <text className={classes.characterCount}>{current}</text>
         <text className={classes.maxCharacterCount}>/{max}</text>

package/src/components/Icon/Icon.tsx

@@ -12,6 +12,7 @@ import {
 import { useIconColor } from "../../hooks/useIconColor";
 import type { LynxIconElementProps, LynxStyledElementProps, LynxViewRef } from "../../types";
 import { handleColor, handleDimension, type StyleProps } from "../../utils/styled";
+import { mergeProps } from "../../utils/merge-props";
 
 export type IconSlotName = "icon" | "prefixIcon" | "suffixIcon";
 
@@ -199,9 +200,11 @@ const IconSlotBase = React.forwardRef<unknown, IconSlotBaseProps>((props, ref) =
 
   return (
     <view
-      {...(ref ? { ref: ref as LynxViewRef } : {})}
-      {...nativeProps}
-      main-thread:ref={sourceRef}
+      {...mergeProps(
+        { "main-thread:ref": sourceRef },
+        ref ? { ref: ref as LynxViewRef } : {},
+        nativeProps,
+      )}
       className={clsx(baseClassName, slotClassName, className)}
       style={mergeWrapperStyle({ size, color, style })}
     >
@@ -227,7 +230,9 @@ function createIconComponent<Props extends IconProps>(
   baseClassName: string,
 ) {
   const Component = React.forwardRef<unknown, Props>((props, ref) => {
-    return <IconSlotBase ref={ref} slot={slot} baseClassName={baseClassName} {...props} />;
+    return (
+      <IconSlotBase {...mergeProps({ ref }, props)} slot={slot} baseClassName={baseClassName} />
+    );
   });
 
   Component.displayName = displayName;
@@ -265,9 +270,11 @@ export const InternalIcon = React.forwardRef<unknown, InternalIconProps>((props,
 
   return (
     <view
-      {...(ref ? { ref: ref as LynxViewRef } : {})}
-      {...nativeProps}
-      main-thread:ref={sourceRef}
+      {...mergeProps(
+        { "main-thread:ref": sourceRef },
+        ref ? { ref: ref as LynxViewRef } : {},
+        nativeProps,
+      )}
       className={className}
       style={style}
     >

package/src/components/InputButton/InputButton.namespace.ts

@@ -0,0 +1,20 @@
+export {
+  InputButtonButton as Button,
+  InputButtonClearButton as ClearButton,
+  InputButtonPlaceholder as Placeholder,
+  InputButtonPrefixIcon as PrefixIcon,
+  InputButtonPrefixText as PrefixText,
+  InputButtonRoot as Root,
+  InputButtonSuffixIcon as SuffixIcon,
+  InputButtonSuffixText as SuffixText,
+  InputButtonValue as Value,
+  type InputButtonButtonProps as ButtonProps,
+  type InputButtonClearButtonProps as ClearButtonProps,
+  type InputButtonPlaceholderProps as PlaceholderProps,
+  type InputButtonPrefixIconProps as PrefixIconProps,
+  type InputButtonPrefixTextProps as PrefixTextProps,
+  type InputButtonRootProps as RootProps,
+  type InputButtonSuffixIconProps as SuffixIconProps,
+  type InputButtonSuffixTextProps as SuffixTextProps,
+  type InputButtonValueProps as ValueProps,
+} from "./InputButton";

package/src/components/InputButton/InputButton.test.tsx

@@ -0,0 +1,82 @@
+import "@testing-library/jest-dom";
+import { fireEvent, getQueriesForElement, render } from "@lynx-js/react/testing-library";
+import { describe, expect, it, vi } from "vitest";
+
+import { InputButton } from "./index";
+
+function getRenderedRoot() {
+  const root = elementTree.root;
+
+  if (!root) {
+    throw new Error("Expected Lynx render root to exist.");
+  }
+
+  return root;
+}
+
+describe("InputButton", () => {
+  it("renders slots with size and invalid state classes", () => {
+    render(
+      <InputButton.Root size="medium" invalid className="custom-input-button">
+        <InputButton.Button accessibility-label="지역 선택" />
+        <InputButton.PrefixText>지역</InputButton.PrefixText>
+        <InputButton.Value>판교동</InputButton.Value>
+        <InputButton.SuffixText>선택됨</InputButton.SuffixText>
+      </InputButton.Root>,
+    );
+
+    const root = getRenderedRoot();
+    const queries = getQueriesForElement(root);
+    const inputButtonRoot = root.querySelector(".seed-input-button__root");
+    const button = root.querySelector(".seed-input-button__button");
+
+    expect(inputButtonRoot).toHaveClass("custom-input-button");
+    expect(inputButtonRoot).toHaveClass("seed-input-button__root--size_medium");
+    expect(button).toHaveAttribute("accessibility-label", "지역 선택");
+    expect(button).toHaveAttribute("accessibility-traits", "button");
+    expect(root.querySelector(".seed-input-button__stroke")).toHaveClass(
+      "seed-input-button__stroke--invalid_true",
+    );
+    expect(queries.getByText("판교동")).toHaveClass("seed-input-button__value");
+    expect(queries.getByText("지역")).toHaveClass("seed-input-button__prefixText");
+    expect(queries.getByText("선택됨")).toHaveClass("seed-input-button__suffixText");
+  });
+
+  it("tracks pressed state and blocks taps when disabled", () => {
+    const onTap = vi.fn();
+    const { rerender } = render(
+      <InputButton.Root>
+        <InputButton.Button accessibility-label="지역 선택" bindtap={onTap} />
+        <InputButton.Placeholder>지역을 선택하세요</InputButton.Placeholder>
+      </InputButton.Root>,
+    );
+
+    let button = getRenderedRoot().querySelector(".seed-input-button__button") as HTMLElement;
+
+    fireEvent.touchstart(button, {});
+    expect(button).toHaveClass("seed-input-button__button--pressed_true");
+
+    fireEvent.tap(button);
+    expect(onTap).toHaveBeenCalledTimes(1);
+
+    rerender(
+      <InputButton.Root disabled>
+        <InputButton.Button accessibility-label="지역 선택" bindtap={onTap} />
+        <InputButton.Placeholder>지역을 선택하세요</InputButton.Placeholder>
+      </InputButton.Root>,
+    );
+
+    button = getRenderedRoot().querySelector(".seed-input-button__button") as HTMLElement;
+    fireEvent.tap(button);
+
+    expect(onTap).toHaveBeenCalledTimes(1);
+    expect(button).toHaveAttribute("accessibility-traits", "disabled");
+    expect(getQueriesForElement(getRenderedRoot()).getByText("지역을 선택하세요")).toHaveClass(
+      "seed-input-button__placeholder--disabled_true",
+    );
+  });
+
+  it("throws when a slot is rendered outside InputButton.Root", () => {
+    expect(() => render(<InputButton.Value>값</InputButton.Value>)).toThrow(/InputButton\.Value/);
+  });
+});