@seed-design/lynx-react 0.7.1 → 0.8.0

package/src/components/HelpBubble/index.ts

@@ -0,0 +1,26 @@
+export {
+  HelpBubbleAnchor,
+  HelpBubbleArrow,
+  HelpBubbleArrowTip,
+  HelpBubbleBody,
+  HelpBubbleCloseButton,
+  HelpBubbleContent,
+  HelpBubbleDescription,
+  HelpBubblePositioner,
+  HelpBubbleRoot,
+  HelpBubbleTitle,
+  HelpBubbleTrigger,
+  type HelpBubbleAnchorProps,
+  type HelpBubbleArrowProps,
+  type HelpBubbleArrowTipProps,
+  type HelpBubbleBodyProps,
+  type HelpBubbleCloseButtonProps,
+  type HelpBubbleContentProps,
+  type HelpBubbleDescriptionProps,
+  type HelpBubblePositionerProps,
+  type HelpBubbleRootProps,
+  type HelpBubbleTitleProps,
+  type HelpBubbleTriggerProps,
+} from "./HelpBubble";
+
+export * as HelpBubble from "./HelpBubble.namespace";

package/src/components/Icon/Icon.test.tsx

@@ -97,8 +97,6 @@ describe("InternalIcon", () => {
     await waitSchedule();
 
     const { image } = getSourceAndImage();
-    expect(frames.size).toBe(0);
-    expect(image.getAttribute("tint-color")).toBeNull();
 
     rerender(renderIcon("checked"));
     await waitSchedule();
@@ -106,7 +104,6 @@ describe("InternalIcon", () => {
     expect(frames.size).toBe(1);
     // The immediate read uses the old native style; the next frame must refresh it.
     expect(image.getAttribute("tint-color")).toBe("rgb(134, 139, 148)");
-
     computedColor = "rgb(255, 102, 0)";
     runNextFrame();
 

package/src/components/Icon/Icon.tsx

@@ -262,10 +262,19 @@ export const SuffixIcon = createIconComponent<SuffixIconProps>(
 export interface InternalIconProps extends LynxStyledElementProps {
   icon: ReactElement<LynxIconElementProps>;
   deps?: DependencyList;
+  disableDefaultResize?: boolean;
 }
 
 export const InternalIcon = React.forwardRef<unknown, InternalIconProps>((props, ref) => {
-  const { icon, deps = [], className, style, children: _children, ...nativeProps } = props;
+  const {
+    icon,
+    deps = [],
+    className,
+    style,
+    children: _children,
+    disableDefaultResize = false,
+    ...nativeProps
+  } = props;
   const sourceRef = useMainThreadRef<MainThread.Element>(null);
   const styleColor = getStyleColor(style);
   const iconColor = useIconColor([className, styleColor, ...(deps ?? [])], { sourceRef });
@@ -284,6 +293,7 @@ export const InternalIcon = React.forwardRef<unknown, InternalIconProps>((props,
     >
       {cloneElement(icon, {
         ...iconColor,
+        ...(disableDefaultResize ? { "disable-default-resize": true } : {}),
         className: icon.props.className,
         style: {
           ...icon.props.style,

package/src/components/IdentityPlaceholder/IdentityPlaceholder.namespace.ts

@@ -0,0 +1,6 @@
+export {
+  IdentityPlaceholderRoot as Root,
+  IdentityPlaceholderImage as Image,
+  type IdentityPlaceholderRootProps as RootProps,
+  type IdentityPlaceholderImageProps as ImageProps,
+} from "./IdentityPlaceholder";

package/src/components/IdentityPlaceholder/IdentityPlaceholder.tsx

@@ -0,0 +1,103 @@
+import {
+  identityPlaceholder,
+  type IdentityPlaceholderVariantProps,
+} from "@seed-design/lynx-css/recipes/identity-placeholder";
+import type { IntrinsicElements, NodesRef } from "@lynx-js/types";
+import clsx from "clsx";
+import * as React from "@lynx-js/react";
+
+import type { LynxStyledElementProps, LynxViewRef } from "../../types";
+import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context";
+import { mergeProps } from "../../utils/merge-props";
+import businessSource from "./identity-placeholder-business.webp";
+import personSource from "./identity-placeholder-person.webp";
+
+const { ClassNamesProvider, PropsProvider, useClassNames, useProps } =
+  createSlotRecipeContext(identityPlaceholder);
+
+type Identity = NonNullable<IdentityPlaceholderVariantProps["identity"]>;
+
+const identitySources = {
+  person: personSource,
+  business: businessSource,
+} satisfies Record<Identity, string>;
+
+/**
+ * @platform Lynx
+ *
+ * Web의 SVG/asChild API 대신 native `<view>` props를 받습니다.
+ */
+export interface IdentityPlaceholderRootProps
+  extends IdentityPlaceholderVariantProps,
+    LynxStyledElementProps {}
+
+export const IdentityPlaceholderRoot = React.forwardRef<unknown, IdentityPlaceholderRootProps>(
+  (props, ref) => {
+    const [variantProps, otherProps] = identityPlaceholder.splitVariantProps(props);
+    const { children, className, style, ...nativeProps } = otherProps;
+    const classNames = identityPlaceholder(variantProps);
+
+    return (
+      <ClassNamesProvider value={classNames}>
+        <PropsProvider value={variantProps}>
+          <view
+            {...mergeProps(ref ? { ref: ref as LynxViewRef } : {}, nativeProps)}
+            className={clsx(classNames.root, className)}
+            style={style}
+          >
+            {children}
+          </view>
+        </PropsProvider>
+      </ClassNamesProvider>
+    );
+  },
+);
+IdentityPlaceholderRoot.displayName = "IdentityPlaceholderRoot";
+
+/**
+ * @platform Lynx
+ *
+ * `src`와 `mode`는 identity variant가 소유합니다. Web SVG props 대신 native image
+ * props를 사용하며 SVG rendering과 `asChild`는 지원하지 않습니다.
+ *
+ * React SVG의 기본 `xMidYMid meet`처럼 도형 전체를 비율을 유지한 채 영역 안에 맞춥니다.
+ *
+ * 로컬 WebP는 `static-white-alpha-800`의 고정값 `#ffffffde`로 원본 SVG path를
+ * rasterize합니다. Native image의 SVG/fill 경로를 피하고, 토큰이 light/dark에서
+ * 동일하므로 동적 tint를 사용하지 않습니다.
+ */
+export interface IdentityPlaceholderImageProps
+  extends Omit<IntrinsicElements["image"], "src" | "mode" | "children"> {}
+
+export const IdentityPlaceholderImage = React.forwardRef<unknown, IdentityPlaceholderImageProps>(
+  (props, ref) => {
+    const classNames = useClassNames();
+    const parentProps = useProps();
+
+    if (parentProps === null) {
+      throw new Error(
+        "<IdentityPlaceholderImage/> must be rendered inside <IdentityPlaceholderRoot/>.",
+      );
+    }
+
+    const {
+      className,
+      "accessibility-label": accessibilityLabel,
+      "accessibility-traits": accessibilityTraits,
+      ...nativeProps
+    } = props;
+    const identity = parentProps.identity ?? "person";
+
+    return (
+      <image
+        {...mergeProps(ref ? { ref: ref as React.Ref<NodesRef> } : {}, nativeProps)}
+        src={identitySources[identity]}
+        mode="aspectFit"
+        accessibility-label={accessibilityLabel ?? "Identity placeholder"}
+        accessibility-traits={accessibilityTraits ?? "image"}
+        className={clsx(classNames.image, className)}
+      />
+    );
+  },
+);
+IdentityPlaceholderImage.displayName = "IdentityPlaceholderImage";

package/src/components/IdentityPlaceholder/assets.d.ts

@@ -0,0 +1,4 @@
+declare module "*.webp" {
+  const source: string;
+  export default source;
+}

package/src/components/IdentityPlaceholder/index.ts

@@ -0,0 +1,8 @@
+export {
+  IdentityPlaceholderRoot,
+  IdentityPlaceholderImage,
+  type IdentityPlaceholderRootProps,
+  type IdentityPlaceholderImageProps,
+} from "./IdentityPlaceholder";
+
+export * as IdentityPlaceholder from "./IdentityPlaceholder.namespace";

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

@@ -1,8 +1,22 @@
 import "@testing-library/jest-dom";
-import { fireEvent, getQueriesForElement, render } from "@lynx-js/react/testing-library";
+import * as React from "@lynx-js/react";
+import { runOnBackground } from "@lynx-js/react";
+import {
+  fireEvent,
+  getQueriesForElement,
+  render,
+  waitSchedule,
+} from "@lynx-js/react/testing-library";
 import { describe, expect, it, vi } from "vitest";
 
 import { InputButton } from "./index";
+import type { LynxIconElementProps } from "../../types";
+import type { MainThread } from "@lynx-js/types";
+
+const MockIcon = React.forwardRef<MainThread.Element, LynxIconElementProps>((props, ref) => (
+  <image {...props} {...(ref ? { "main-thread:ref": ref as React.Ref<MainThread.Element> } : {})} />
+));
+MockIcon.displayName = "MockIcon";
 
 function getRenderedRoot() {
   const root = elementTree.root;
@@ -76,6 +90,119 @@ describe("InputButton", () => {
     );
   });
 
+  it("groups fragment content while leaving the button and strokes outside the scale target", () => {
+    render(
+      <InputButton.Root>
+        <React.Fragment key="fragment-slots">
+          <InputButton.Button accessibility-label="Select" />
+          <InputButton.PrefixText>Prefix</InputButton.PrefixText>
+          <InputButton.Value>Value</InputButton.Value>
+          <InputButton.SuffixText>Suffix</InputButton.SuffixText>
+        </React.Fragment>
+      </InputButton.Root>,
+    );
+
+    const root = getRenderedRoot();
+    const content = root.querySelector(".seed-input-button__content");
+    const button = root.querySelector(".seed-input-button__button");
+    expect(content).toHaveAttribute("flatten", "false");
+    expect(content?.contains(button)).toBe(false);
+    expect(button?.querySelector(".seed-input-button__baseStroke")).toBeTruthy();
+    expect(button?.querySelector(".seed-input-button__stroke")).toBeTruthy();
+    expect(Array.from(content?.children ?? []).map((child) => child.textContent)).toEqual([
+      "Prefix",
+      "Value",
+      "Suffix",
+    ]);
+  });
+
+  it("preserves custom wrapped Button composition without moving or dropping children", () => {
+    const CustomButton = () => <InputButton.Button accessibility-label="Custom" />;
+    render(
+      <InputButton.Root>
+        <CustomButton />
+        <InputButton.Value>Value</InputButton.Value>
+      </InputButton.Root>,
+    );
+
+    const root = getRenderedRoot();
+    expect(root.querySelector(".seed-input-button__button")).toHaveAttribute(
+      "accessibility-label",
+      "Custom",
+    );
+    expect(root.querySelector(".seed-input-button__content")).toBeNull();
+  });
+
+  it("keeps the clear action independent and hides it in readonly mode", () => {
+    const onOpen = vi.fn();
+    const onClear = vi.fn();
+    const { rerender } = render(
+      <InputButton.Root>
+        <InputButton.Button accessibility-label="Select" bindtap={onOpen} />
+        <InputButton.Value>Value</InputButton.Value>
+        <InputButton.ClearButton
+          icon={<MockIcon />}
+          accessibility-label="Clear"
+          bindtap={onClear}
+        />
+      </InputButton.Root>,
+    );
+    const root = getRenderedRoot();
+    const clear = root.querySelector(".seed-input-button__clearButton") as HTMLElement;
+    expect(clear).toHaveAttribute("flatten", "false");
+    fireEvent.tap(clear);
+    expect(onClear).toHaveBeenCalledTimes(1);
+    expect(onOpen).not.toHaveBeenCalled();
+    expect(root.querySelector(".seed-input-button__button")).not.toHaveClass(
+      "seed-input-button__button--pressed_true",
+    );
+
+    rerender(
+      <InputButton.Root readOnly>
+        <InputButton.Button accessibility-label="Select" bindtap={onOpen} />
+        <InputButton.ClearButton
+          icon={<MockIcon />}
+          accessibility-label="Clear"
+          bindtap={onClear}
+        />
+      </InputButton.Root>,
+    );
+    expect(getRenderedRoot().querySelector(".seed-input-button__clearButton")).toBeNull();
+  });
+
+  it("bridges Main Thread presses while preserving the consumer Main Thread handler", async () => {
+    function Example({ report }: { report: () => void }) {
+      function handleTouch() {
+        "main thread";
+        runOnBackground(report)();
+      }
+      return (
+        <InputButton.Root>
+          <InputButton.Button
+            accessibility-label="Select"
+            main-thread:bindtouchstart={handleTouch}
+          />
+          <InputButton.Value>Value</InputButton.Value>
+        </InputButton.Root>
+      );
+    }
+    const report = vi.fn();
+    const { container } = render(<Example report={report} />, {
+      enableMainThread: true,
+      enableBackgroundThread: true,
+    });
+    await waitSchedule();
+    const button = container.querySelector(".seed-input-button__button");
+    if (!button) throw new Error("Expected button");
+    fireEvent.touchstart(button, {});
+    await waitSchedule();
+    expect(report).toHaveBeenCalledTimes(1);
+    expect(button.className).toContain("pressed_true");
+    fireEvent.touchcancel(button, {});
+    await waitSchedule();
+    expect(button.className).not.toContain("pressed_true");
+  });
+
   it("throws when a slot is rendered outside InputButton.Root", () => {
     expect(() => render(<InputButton.Value>값</InputButton.Value>)).toThrow(/InputButton\.Value/);
   });

package/src/components/InputButton/InputButton.tsx

@@ -7,6 +7,9 @@ import {
 import clsx from "clsx";
 
 import { usePressTap } from "../../hooks/usePressTap";
+import { useScaleFeedback, type ScaleFeedbackTriggerProps } from "../../hooks/useScaleFeedback";
+import { mergeProps } from "../../utils/merge-props";
+import { toArray } from "../../utils/children";
 import type {
   LynxAccessibilityProps,
   LynxPressableProps,
@@ -20,6 +23,8 @@ interface InputButtonContextValue {
   variantProps: InputButtonVariantProps;
   disabled: boolean;
   readOnly: boolean;
+  pressed: boolean;
+  scaleFeedbackTriggerProps: ScaleFeedbackTriggerProps;
 }
 
 const InputButtonContext = React.createContext<InputButtonContextValue | null>(null);
@@ -42,6 +47,8 @@ function useInputButtonContext(consumer: string): InputButtonContextValue {
  * 웹 대비 미지원 기능:
  * - `size="responsive"`: Lynx에는 CSS viewport breakpoint가 없음
  * - HTML form 제출과 DOM ARIA id 연결
+ * - Content Scale을 적용하려면 Button을 Root의 직접 자식 또는 Fragment 안에 둡니다.
+ *   커스텀 컴포넌트로 감싼 Button은 기존 구조를 보존하며 Content Scale을 생략합니다.
  */
 export interface InputButtonRootProps
   extends Omit<InputButtonVariantProps, "pressed">,
@@ -54,9 +61,21 @@ export const InputButtonRoot = React.forwardRef<NodesRef, InputButtonRootProps>(
     const disabled = variantProps.disabled ?? false;
     const readOnly = variantProps.readOnly ?? false;
     const classes = inputButton(variantProps);
+    const { pressed, bindtouchstart, bindtouchend, bindtouchcancel } = usePressTap({
+      disabled: disabled || readOnly,
+    });
+    const { scaleFeedbackTriggerProps, scaleFeedbackTargetProps } = useScaleFeedback({
+      disabled: disabled || readOnly,
+      onTouchStart: bindtouchstart,
+      onTouchEnd: bindtouchend,
+      onTouchCancel: bindtouchcancel,
+    });
+    const childArray = flattenInputButtonChildren(children);
+    const buttonChildren = childArray.filter(isInputButtonButton);
+    const contentChildren = childArray.filter((child) => !isInputButtonButton(child));
     const contextValue = React.useMemo(
-      () => ({ variantProps, disabled, readOnly }),
-      [variantProps, disabled, readOnly],
+      () => ({ variantProps, disabled, readOnly, pressed, scaleFeedbackTriggerProps }),
+      [variantProps, disabled, readOnly, pressed, scaleFeedbackTriggerProps],
     );
 
     return (
@@ -66,7 +85,16 @@ export const InputButtonRoot = React.forwardRef<NodesRef, InputButtonRootProps>(
           className={clsx(classes.root, className)}
           {...nativeProps}
         >
-          {children}
+          {buttonChildren.length > 0 ? (
+            <>
+              {buttonChildren}
+              <view {...scaleFeedbackTargetProps} className={classes.content}>
+                {contentChildren}
+              </view>
+            </>
+          ) : (
+            children
+          )}
         </view>
       </InputButtonContext.Provider>
     );
@@ -93,12 +121,12 @@ export const InputButtonButton = React.forwardRef<unknown, InputButtonButtonProp
     ...nativeProps
   } = props;
   const nonInteractive = context.disabled || context.readOnly;
-  const { pressed, ...pressHandlers } = usePressTap({
+  const { bindtap: handleTap, "main-thread:bindtap": handleMainThreadTap } = usePressTap({
     disabled: nonInteractive,
     onTap: bindtap,
     mainThreadOnTap: mainThreadBindtap,
   });
-  const classes = inputButton({ ...context.variantProps, pressed });
+  const classes = inputButton({ ...context.variantProps, pressed: context.pressed });
 
   return (
     <view
@@ -106,8 +134,11 @@ export const InputButtonButton = React.forwardRef<unknown, InputButtonButtonProp
       className={clsx(classes.button, className)}
       accessibility-element={accessibilityElement}
       accessibility-traits={accessibilityTraits ?? (nonInteractive ? "disabled" : "button")}
-      {...pressHandlers}
-      {...nativeProps}
+      {...mergeProps(
+        { bindtap: handleTap, "main-thread:bindtap": handleMainThreadTap },
+        context.scaleFeedbackTriggerProps,
+        nativeProps,
+      )}
     >
       <view className={classes.baseStroke} accessibility-elements-hidden={true} />
       <view className={classes.stroke} accessibility-elements-hidden={true} />
@@ -117,6 +148,18 @@ export const InputButtonButton = React.forwardRef<unknown, InputButtonButtonProp
 });
 InputButtonButton.displayName = "InputButtonButton";
 
+function isInputButtonButton(node: React.ReactNode) {
+  return React.isValidElement(node) && node.type === InputButtonButton;
+}
+
+function flattenInputButtonChildren(children: React.ReactNode): React.ReactNode[] {
+  return toArray(children).flatMap((child) =>
+    React.isValidElement<{ children?: React.ReactNode }>(child) && child.type === React.Fragment
+      ? flattenInputButtonChildren(child.props.children)
+      : [child],
+  );
+}
+
 ////////////////////////////////////////////////////////////////////////////////////
 
 export interface InputButtonValueProps extends LynxStyledElementProps {}
@@ -272,6 +315,9 @@ export const InputButtonClearButton = React.forwardRef<unknown, InputButtonClear
       mainThreadOnTap: mainThreadBindtap,
     });
     const classes = inputButton({ ...context.variantProps, pressed });
+    const { scaleFeedbackTriggerProps, scaleFeedbackTargetProps } = useScaleFeedback({
+      disabled: nonInteractive,
+    });
 
     if (nonInteractive) return null;
 
@@ -286,8 +332,13 @@ export const InputButtonClearButton = React.forwardRef<unknown, InputButtonClear
         accessibility-element={accessibilityElement}
         accessibility-label={accessibilityLabel}
         accessibility-traits="button"
-        {...pressHandlers}
-        {...otherProps}
+        {...mergeProps(
+          pressHandlers,
+          scaleFeedbackTriggerProps,
+          scaleFeedbackTargetProps,
+          otherProps,
+          { flatten: false },
+        )}
       />
     );
   },

package/src/components/List/List.test.tsx

@@ -1,7 +1,9 @@
 import "@testing-library/jest-dom";
-import { fireEvent, render } from "@lynx-js/react/testing-library";
+import { fireEvent, render, waitSchedule } from "@lynx-js/react/testing-library";
 import { describe, expect, it, vi } from "vitest";
 
+import { Checkbox } from "../Checkbox";
+import { Switch } from "../Switch";
 import { RadioGroup } from "../RadioGroup";
 import { List, ListHeader } from "./index";
 
@@ -66,7 +68,7 @@ describe("List", () => {
     );
   });
 
-  it("tracks button pressed state and ignores a disabled tap", () => {
+  it("tracks button pressed state and ignores a disabled tap", async () => {
     const onTap = vi.fn();
     const { rerender } = render(
       <List.ButtonItem className="button-item" bindtap={onTap} accessibility-label="열기">
@@ -74,15 +76,19 @@ describe("List", () => {
           <List.Title>버튼</List.Title>
         </List.Content>
       </List.ButtonItem>,
+      { enableMainThread: true, enableBackgroundThread: true },
     );
 
+    await waitSchedule();
     let item = getListItem("button-item");
     fireEvent.touchstart(item, {});
+    await waitSchedule();
     expect(item.querySelector(".seed-list-item__pressedOverlay")).toHaveClass(
       "seed-list-item__pressedOverlay--pressed_true",
     );
 
     fireEvent.tap(item);
+    await waitSchedule();
     expect(onTap).toHaveBeenCalledTimes(1);
 
     rerender(
@@ -94,6 +100,7 @@ describe("List", () => {
     );
     item = getListItem("button-item");
     fireEvent.tap(item);
+    await waitSchedule();
 
     expect(onTap).toHaveBeenCalledTimes(1);
     expect(item).toHaveAttribute("accessibility-traits", "disabled");
@@ -159,4 +166,49 @@ describe("List", () => {
     expect(first).toHaveAttribute("accessibility-value", "선택 안 됨");
     expect(second).toHaveAttribute("accessibility-value", "선택됨");
   });
+  it("scales only interactive row content and suppresses nested control targets", () => {
+    render(
+      <List.Root>
+        <List.Item className="static-row">
+          <List.Title>Static</List.Title>
+        </List.Item>
+        <List.CheckboxItem className="check-row">
+          <List.Prefix>
+            <Checkbox.Control />
+          </List.Prefix>
+          <List.Title>Check</List.Title>
+        </List.CheckboxItem>
+        <List.SwitchItem className="switch-row">
+          <List.Suffix>
+            <Switch.Control>
+              <Switch.Thumb />
+            </Switch.Control>
+          </List.Suffix>
+        </List.SwitchItem>
+        <RadioGroup.Root>
+          <List.RadioItem value="a" className="radio-row">
+            <List.Prefix>
+              <RadioGroup.ItemControl />
+            </List.Prefix>
+          </List.RadioItem>
+        </RadioGroup.Root>
+      </List.Root>,
+    );
+    expect(getListItem("static-row").querySelector(".seed-list-item__layout")).not.toHaveAttribute(
+      "flatten",
+      "false",
+    );
+    for (const name of ["check-row", "switch-row", "radio-row"]) {
+      const row = getListItem(name);
+      const layout = row.querySelector(".seed-list-item__layout")!;
+      expect(layout).toHaveAttribute("flatten", "false");
+      expect(layout).not.toContainElement(row.querySelector(".seed-list-item__pressedOverlay"));
+      if (name === "switch-row") {
+        // Switch keeps its native view for its own thumb animation even without a scale target.
+        expect(layout.querySelector(".seed-switchmark__root")).toHaveAttribute("flatten", "false");
+      } else {
+        expect(layout.querySelectorAll('[flatten="false"]')).toHaveLength(0);
+      }
+    }
+  });
 });