@seed-design/lynx-react 0.7.1 → 0.9.0

package/src/components/ReactionButton/ReactionButton.tsx

@@ -6,6 +6,8 @@ import { cloneElement, useMemo } from "@lynx-js/react";
 
 import { useControllableState } from "../../hooks/useControllableState";
 import { usePressTap } from "../../hooks/usePressTap";
+import { useScaleFeedback } from "../../hooks/useScaleFeedback";
+import { mergeProps } from "../../utils/merge-props";
 import type {
   LynxAccessibilityProps,
   LynxPressableProps,
@@ -27,7 +29,7 @@ import { ProgressCircleRange, ProgressCircleRoot } from "../ProgressCircle";
  */
 export interface ReactionButtonProps
   extends Omit<ReactionButtonVariantProps, "selected" | "pressed" | "disabled" | "loading">,
-    LynxStyledElementProps,
+    Omit<LynxStyledElementProps, "flatten">,
     LynxPressableProps,
     LynxAccessibilityProps {
   pressed?: boolean;
@@ -51,12 +53,7 @@ export const ReactionButton = React.forwardRef<unknown, ReactionButtonProps>((pr
     "accessibility-traits": accessibilityTraits,
     ...nativeProps
   } = otherProps;
-  const {
-    size,
-    pressed: pressedProp,
-    disabled = false,
-    loading = false,
-  } = variantProps;
+  const { size, pressed: pressedProp, disabled = false, loading = false } = variantProps;
   const [selected, setSelected] = useControllableState({
     value: pressedProp,
     defaultValue: defaultPressed,
@@ -69,11 +66,17 @@ export const ReactionButton = React.forwardRef<unknown, ReactionButtonProps>((pr
     },
     [bindtap, selected, setSelected],
   );
-  const { pressed, ...pressHandlers } = usePressTap({
-    disabled,
+  const { pressed, bindtouchstart, bindtouchend, bindtouchcancel, ...pressHandlers } = usePressTap({
+    disabled: disabled || loading,
     onTap: handleTap,
     mainThreadOnTap: mainThreadBindtap,
   });
+  const { scaleFeedbackTriggerProps, scaleFeedbackTargetProps } = useScaleFeedback({
+    disabled: disabled || loading,
+    onTouchStart: bindtouchstart,
+    onTouchEnd: bindtouchend,
+    onTouchCancel: bindtouchcancel,
+  });
   const classNames = reactionButton({ ...variantProps, selected, pressed, disabled, loading });
   const iconSlotContextValue = useMemo(
     () => ({
@@ -104,15 +107,20 @@ export const ReactionButton = React.forwardRef<unknown, ReactionButtonProps>((pr
   return (
     <IconSlotProvider value={iconSlotContextValue}>
       <view
-        {...(ref ? { ref: ref as LynxViewRef } : {})}
-        {...nativeProps}
+        {...mergeProps(
+          ref ? { ref: ref as LynxViewRef } : {},
+          scaleFeedbackTargetProps,
+          scaleFeedbackTriggerProps,
+          pressHandlers,
+          nativeProps,
+        )}
+        flatten={false}
         className={clsx(classNames.root, className)}
         style={style}
         accessibility-element={accessibilityElement}
         accessibility-traits={
           disabled ? "disabled" : selected ? "selected" : (accessibilityTraits ?? "button")
         }
-        {...pressHandlers}
       >
         <view className={classNames.content}>
           {prefixIconChildren}

package/src/components/ScrollFog/ScrollFog.test.tsx

@@ -0,0 +1,222 @@
+import "@testing-library/jest-dom";
+import { createRef } from "@lynx-js/react";
+import { fireEvent, render } from "@lynx-js/react/testing-library";
+import type { NodesRef } from "@lynx-js/types";
+import { describe, expect, expectTypeOf, it, vi } from "vitest";
+
+import { ScrollFog, type ScrollFogProps } from "./ScrollFog";
+
+type Edge = "top" | "bottom" | "left" | "right";
+
+const EDGES: Edge[] = ["top", "bottom", "left", "right"];
+
+function getRoot(container: HTMLElement): HTMLElement {
+  const root = container.firstElementChild;
+  if (!root || root.tagName.toLowerCase() !== "view") {
+    throw new Error("root view가 렌더되어야 합니다.");
+  }
+  return root as HTMLElement;
+}
+
+function getMask(container: HTMLElement, edge: Edge): HTMLElement {
+  const mask = container.querySelector<HTMLElement>(`.seed-scroll-fog__${edge}Mask`);
+  if (!mask) {
+    throw new Error(`${edge} mask view가 렌더되어야 합니다.`);
+  }
+  return mask;
+}
+
+function getMasks(container: HTMLElement): HTMLElement[] {
+  return Array.from(
+    container.querySelectorAll<HTMLElement>('[class*="seed-scroll-fog__"][class*="Mask"]'),
+  );
+}
+
+function getScrollViews(container: HTMLElement): [HTMLElement, HTMLElement] {
+  const vertical = container.querySelector<HTMLElement>(".seed-scroll-fog__verticalScroll");
+  const horizontal = container.querySelector<HTMLElement>(".seed-scroll-fog__horizontalScroll");
+  if (!vertical || !horizontal) {
+    throw new Error("vertical 및 horizontal scroll-view가 렌더되어야 합니다.");
+  }
+  return [vertical, horizontal];
+}
+
+function expectEdgeVariant(container: HTMLElement, edge: Edge, enabled: boolean): void {
+  expect(getMask(container, edge)).toHaveClass(`seed-scroll-fog__${edge}Mask--${edge}_${enabled}`);
+}
+
+describe("ScrollFog", () => {
+  it("exposes view props without native scroll-view or main-thread props", () => {
+    type MainThreadProp = Extract<keyof ScrollFogProps, `main-thread:${string}`>;
+    type ScrollViewOnlyProp = Extract<
+      keyof ScrollFogProps,
+      "bounces" | "bindscroll" | "fading-edge-length" | "scroll-orientation"
+    >;
+
+    expectTypeOf<MainThreadProp>().toEqualTypeOf<never>();
+    expectTypeOf<ScrollViewOnlyProp>().toEqualTypeOf<never>();
+    expectTypeOf<ScrollFogProps>().toHaveProperty("bindtap");
+  });
+
+  it("renders the default mask and scroll slots without internal inline styles", () => {
+    const { container } = render(<ScrollFog />);
+    const root = getRoot(container);
+    const [vertical, horizontal] = getScrollViews(container);
+
+    expect(root).toHaveClass("seed-scroll-fog__root", "seed-scroll-fog__root--top_true");
+    expect(root).toHaveClass("seed-scroll-fog__root--bottom_true");
+    expectEdgeVariant(container, "top", true);
+    expectEdgeVariant(container, "bottom", true);
+    expect(getMasks(container)).toHaveLength(2);
+    expect(vertical).toContainElement(horizontal);
+
+    for (const element of root.querySelectorAll("view, scroll-view")) {
+      expect(element).not.toHaveAttribute("style");
+    }
+  });
+
+  it("renders only the selected masks for an arbitrary placement", () => {
+    const { container } = render(<ScrollFog placement={["bottom", "left"]} />);
+
+    expectEdgeVariant(container, "bottom", true);
+    expectEdgeVariant(container, "left", true);
+    expect(container.querySelector(".seed-scroll-fog__topMask")).not.toBeInTheDocument();
+    expect(container.querySelector(".seed-scroll-fog__rightMask")).not.toBeInTheDocument();
+    expect(getMasks(container)).toHaveLength(2);
+  });
+
+  it("sets inherited edge-size variables and keeps the truthy zero fallback", () => {
+    const { container } = render(
+      <ScrollFog size="1.5rem" sizes={{ top: 12, bottom: 0, left: 32, right: 0 }} />,
+    );
+    const rootStyle = getRoot(container).style as CSSStyleDeclaration &
+      Record<`--${string}`, string>;
+
+    expect(rootStyle["--scroll-fog-size-top"]).toBe("12px");
+    expect(rootStyle["--scroll-fog-size-bottom"]).toBe("1.5rem");
+    expect(rootStyle["--scroll-fog-size-left"]).toBe("32px");
+    expect(rootStyle["--scroll-fog-size-right"]).toBe("1.5rem");
+  });
+
+  it("keeps computed sizes ahead of conflicting object styles", () => {
+    const { container } = render(
+      <ScrollFog
+        size="24px"
+        sizes={{ top: 12 }}
+        style={
+          {
+            "--scroll-fog-size-top": "99px",
+            "--scroll-fog-size-bottom": "88px",
+            height: "100px",
+          } as ScrollFogProps["style"]
+        }
+      />,
+    );
+    const rootStyle = getRoot(container).style as CSSStyleDeclaration &
+      Record<`--${string}`, string>;
+
+    expect(rootStyle["--scroll-fog-size-top"]).toBe("12px");
+    expect(rootStyle["--scroll-fog-size-bottom"]).toBe("24px");
+    expect(rootStyle.height).toBe("100px");
+  });
+
+  it("keeps computed sizes ahead of conflicting string styles", () => {
+    const { container } = render(
+      <ScrollFog
+        size="2rem"
+        sizes={{ right: 32 }}
+        style="--scroll-fog-size-left: 77px; --scroll-fog-size-right: 66px; width: 80px"
+      />,
+    );
+    const rootStyle = getRoot(container).style as CSSStyleDeclaration &
+      Record<`--${string}`, string>;
+
+    expect(rootStyle.getPropertyValue("--scroll-fog-size-left")).toBe("2rem");
+    expect(rootStyle.getPropertyValue("--scroll-fog-size-right")).toBe("32px");
+    expect(rootStyle.width).toBe("80px");
+  });
+
+  it("keeps two nested scroll axes and controls both native scrollbars", () => {
+    const visible = render(<ScrollFog />);
+    const [visibleVertical, visibleHorizontal] = getScrollViews(visible.container);
+
+    expect(visibleVertical).toHaveAttribute("scroll-orientation", "vertical");
+    expect(visibleHorizontal).toHaveAttribute("scroll-orientation", "horizontal");
+    expect(visibleVertical).toHaveAttribute("enable-nested-scroll", "true");
+    expect(visibleHorizontal).toHaveAttribute("enable-nested-scroll", "true");
+    expect(visibleVertical).toHaveAttribute("scroll-bar-enable", "true");
+    expect(visibleHorizontal).toHaveAttribute("scroll-bar-enable", "true");
+    expect(visibleVertical).toContainElement(visibleHorizontal);
+    visible.unmount();
+
+    const hidden = render(<ScrollFog hideScrollBar />);
+    for (const scrollView of getScrollViews(hidden.container)) {
+      expect(scrollView).toHaveAttribute("scroll-bar-enable", "false");
+    }
+  });
+
+  it("forwards root props, merges class and style, and keeps children and ref on the root", () => {
+    const bindtap = vi.fn();
+    const rootRef = createRef<NodesRef>();
+    const { container } = render(
+      <ScrollFog
+        ref={rootRef}
+        id="scroll-fog"
+        accessibility-label="Scrollable content"
+        className="custom-scroll"
+        style={{ height: "100px" }}
+        bindtap={bindtap}
+      >
+        <text>Content</text>
+      </ScrollFog>,
+    );
+
+    const root = getRoot(container);
+    expect(root).toHaveAttribute("id", "scroll-fog");
+    expect(root).toHaveAttribute("accessibility-label", "Scrollable content");
+    expect(root).toHaveClass("seed-scroll-fog__root", "custom-scroll");
+    expect(root).toHaveStyle({ height: "100px" });
+    expect(root.querySelector("text")?.textContent).toBe("Content");
+    expect(root.querySelector("scroll-view")).not.toHaveAttribute("id");
+    expect(rootRef.current).not.toBeNull();
+    expect(Array.from(root.attributes).some(({ name }) => name.startsWith("react-ref-"))).toBe(
+      true,
+    );
+    for (const scrollView of getScrollViews(container)) {
+      expect(
+        Array.from(scrollView.attributes).some(({ name }) => name.startsWith("react-ref-")),
+      ).toBe(false);
+    }
+
+    fireEvent.tap(root);
+    expect(bindtap).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders all four masks in canonical order regardless of placement order", () => {
+    const { container } = render(<ScrollFog placement={["right", "left", "bottom", "top"]} />);
+
+    for (const edge of EDGES) {
+      expectEdgeVariant(container, edge, true);
+    }
+    expect(getMasks(container).map(({ classList }) => classList.item(0))).toEqual(
+      EDGES.map((edge) => `seed-scroll-fog__${edge}Mask`),
+    );
+  });
+
+  it("renders one mask for a single edge", () => {
+    const { container } = render(<ScrollFog placement={["right"]} />);
+
+    expectEdgeVariant(container, "right", true);
+    expect(getMasks(container)).toHaveLength(1);
+  });
+
+  it("renders the scroll views without a mask wrapper for an empty placement", () => {
+    const { container } = render(<ScrollFog placement={[]} />);
+    const root = getRoot(container);
+    const [vertical, horizontal] = getScrollViews(container);
+
+    expect(getMasks(container)).toHaveLength(0);
+    expect(root.firstElementChild).toBe(vertical);
+    expect(vertical).toContainElement(horizontal);
+  });
+});

package/src/components/ScrollFog/ScrollFog.tsx

@@ -0,0 +1,172 @@
+import { scrollFog } from "@seed-design/lynx-css/recipes/scroll-fog";
+import { scrollFog as scrollFogVars } from "@seed-design/lynx-css/vars/component";
+import * as React from "@lynx-js/react";
+import type {
+  ForwardRefExoticComponent,
+  PropsWithoutRef,
+  ReactNode,
+  RefAttributes,
+} from "@lynx-js/react";
+import type { IntrinsicElements, NodesRef } from "@lynx-js/types";
+import clsx from "clsx";
+
+type NativeViewProps = Omit<IntrinsicElements["view"], `main-thread:${string}`>;
+type LynxForwardRefComponent<T, P> = ForwardRefExoticComponent<
+  PropsWithoutRef<P> & RefAttributes<T>
+>;
+
+type ScrollFogPlacement = "top" | "bottom" | "left" | "right";
+
+type SizesConfig = {
+  top?: number;
+  bottom?: number;
+  left?: number;
+  right?: number;
+};
+
+const DEFAULT_SIZE = scrollFogVars.base.enabled.root.size;
+
+function normalizeSize(size: number | string): string {
+  return typeof size === "number" ? `${size}px` : size;
+}
+
+function createRootStyle(
+  style: NativeViewProps["style"],
+  sizes: Record<ScrollFogPlacement, string>,
+): NativeViewProps["style"] {
+  const variables = {
+    "--scroll-fog-size-top": sizes.top,
+    "--scroll-fog-size-bottom": sizes.bottom,
+    "--scroll-fog-size-left": sizes.left,
+    "--scroll-fog-size-right": sizes.right,
+  };
+
+  if (typeof style === "string") {
+    const variableStyle = Object.entries(variables)
+      .map(([property, value]) => `${property}: ${value}`)
+      .join("; ");
+
+    return `${style}; ${variableStyle}`;
+  }
+
+  return { ...style, ...variables } as NativeViewProps["style"];
+}
+
+/**
+ * @platform Lynx
+ *
+ * A two-axis scroll area with independently configurable edge masks.
+ */
+export interface ScrollFogProps extends Omit<NativeViewProps, "children" | "className" | "style"> {
+  children?: ReactNode;
+  className?: NativeViewProps["className"];
+  style?: NativeViewProps["style"];
+  /**
+   * Fog 효과를 표시할 방향입니다.
+   * @defaultValue ["top", "bottom"]
+   */
+  placement?: ScrollFogPlacement[];
+  /**
+   * Fog 효과의 크기입니다. 숫자는 px 단위로 처리합니다.
+   * @defaultValue 20
+   */
+  size?: number | string;
+  /** 방향별 Fog 효과의 크기입니다. 숫자는 px 단위로 처리합니다. */
+  sizes?: SizesConfig;
+  /**
+   * Native scroll indicator를 숨깁니다.
+   * @defaultValue false
+   */
+  hideScrollBar?: boolean;
+}
+
+export const ScrollFog: LynxForwardRefComponent<NodesRef, ScrollFogProps> = React.forwardRef<
+  NodesRef,
+  ScrollFogProps
+>((props, forwardedRef) => {
+  const {
+    children,
+    className,
+    style,
+    placement = ["top", "bottom"],
+    size = DEFAULT_SIZE,
+    sizes,
+    hideScrollBar = false,
+    ...rootProps
+  } = props;
+  const normalizedSize = normalizeSize(size);
+  const topSize = sizes?.top ? normalizeSize(sizes.top) : normalizedSize;
+  const bottomSize = sizes?.bottom ? normalizeSize(sizes.bottom) : normalizedSize;
+  const leftSize = sizes?.left ? normalizeSize(sizes.left) : normalizedSize;
+  const rightSize = sizes?.right ? normalizeSize(sizes.right) : normalizedSize;
+  const scrollBarEnabled = !hideScrollBar;
+  const classNames = scrollFog({
+    top: placement.includes("top"),
+    bottom: placement.includes("bottom"),
+    left: placement.includes("left"),
+    right: placement.includes("right"),
+  });
+  let content: ReactNode = (
+    <scroll-view
+      enable-nested-scroll
+      scroll-bar-enable={scrollBarEnabled}
+      scroll-orientation="vertical"
+      className={classNames.verticalScroll}
+    >
+      <scroll-view
+        enable-nested-scroll
+        scroll-bar-enable={scrollBarEnabled}
+        scroll-orientation="horizontal"
+        className={classNames.horizontalScroll}
+      >
+        {children}
+      </scroll-view>
+    </scroll-view>
+  );
+
+  if (placement.includes("right")) {
+    content = (
+      <view flatten={false} className={classNames.rightMask}>
+        {content}
+      </view>
+    );
+  }
+  if (placement.includes("left")) {
+    content = (
+      <view flatten={false} className={classNames.leftMask}>
+        {content}
+      </view>
+    );
+  }
+  if (placement.includes("bottom")) {
+    content = (
+      <view flatten={false} className={classNames.bottomMask}>
+        {content}
+      </view>
+    );
+  }
+  if (placement.includes("top")) {
+    content = (
+      <view flatten={false} className={classNames.topMask}>
+        {content}
+      </view>
+    );
+  }
+
+  return (
+    <view
+      {...(forwardedRef ? ({ ref: forwardedRef } as Record<string, unknown>) : {})}
+      {...rootProps}
+      className={clsx(classNames.root, className)}
+      style={createRootStyle(style, {
+        top: topSize,
+        bottom: bottomSize,
+        left: leftSize,
+        right: rightSize,
+      })}
+    >
+      {content}
+    </view>
+  );
+});
+ScrollFog.displayName = "ScrollFog";

package/src/components/ScrollFog/index.ts

@@ -0,0 +1 @@
+export { ScrollFog, type ScrollFogProps } from "./ScrollFog";

package/src/components/Select/Select.namespace.ts

@@ -0,0 +1,34 @@
+export {
+  SelectContent as Content,
+  SelectGroup as Group,
+  SelectGroupLabel as GroupLabel,
+  SelectItem as Item,
+  SelectItemBody as ItemBody,
+  SelectItemDescription as ItemDescription,
+  SelectItemIndicator as ItemIndicator,
+  SelectItemLabel as ItemLabel,
+  SelectItemPrefixIcon as ItemPrefixIcon,
+  SelectPlaceholder as Placeholder,
+  SelectPrefixIcon as PrefixIcon,
+  SelectRoot as Root,
+  SelectScrollArea as ScrollArea,
+  SelectSuffixIcon as SuffixIcon,
+  SelectTrigger as Trigger,
+  SelectValue as Value,
+  type SelectContentProps as ContentProps,
+  type SelectGroupLabelProps as GroupLabelProps,
+  type SelectGroupProps as GroupProps,
+  type SelectItemBodyProps as ItemBodyProps,
+  type SelectItemDescriptionProps as ItemDescriptionProps,
+  type SelectItemIndicatorProps as ItemIndicatorProps,
+  type SelectItemLabelProps as ItemLabelProps,
+  type SelectItemPrefixIconProps as ItemPrefixIconProps,
+  type SelectItemProps as ItemProps,
+  type SelectPlaceholderProps as PlaceholderProps,
+  type SelectPrefixIconProps as PrefixIconProps,
+  type SelectRootProps as RootProps,
+  type SelectScrollAreaProps as ScrollAreaProps,
+  type SelectSuffixIconProps as SuffixIconProps,
+  type SelectTriggerProps as TriggerProps,
+  type SelectValueProps as ValueProps,
+} from "./Select";