@seed-design/lynx-react 0.4.1 → 0.5.0

package/lib/utils/create-slot-recipe-context.jsx

@@ -1,5 +1,5 @@
-import clsx from "clsx";
 import { createContext, forwardRef, useContext } from "@lynx-js/react";
+import clsx from "clsx";
 //#region src/utils/create-slot-recipe-context.tsx
 function assertNotIntrinsicComponent(Component, caller) {
 	if (typeof Component !== "string") return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/lynx-react",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -39,7 +39,7 @@
   "devDependencies": {
     "@lynx-js/react": "^0.117.0",
     "@lynx-js/types": "^3.7.0",
-    "@seed-design/lynx-css": "0.8.1",
+    "@seed-design/lynx-css": "0.9.0",
     "@testing-library/jest-dom": "^6.9.1",
     "jsdom": "^29.0.2",
     "preact": "npm:@lynx-js/internal-preact@10.28.4-ee7bb26",

package/src/components/Accordion/Accordion.namespace.ts

@@ -0,0 +1,22 @@
+export {
+  AccordionBody as Body,
+  AccordionContent as Content,
+  AccordionDescription as Description,
+  AccordionHeader as Header,
+  AccordionItem as Item,
+  AccordionPrefix as Prefix,
+  AccordionRoot as Root,
+  AccordionSuffixIcon as SuffixIcon,
+  AccordionTitle as Title,
+  AccordionTrigger as Trigger,
+  type AccordionBodyProps as BodyProps,
+  type AccordionContentProps as ContentProps,
+  type AccordionDescriptionProps as DescriptionProps,
+  type AccordionHeaderProps as HeaderProps,
+  type AccordionItemProps as ItemProps,
+  type AccordionPrefixProps as PrefixProps,
+  type AccordionRootProps as RootProps,
+  type AccordionSuffixIconProps as SuffixIconProps,
+  type AccordionTitleProps as TitleProps,
+  type AccordionTriggerProps as TriggerProps,
+} from "./Accordion";

package/src/components/Accordion/Accordion.test.tsx

@@ -0,0 +1,129 @@
+import "@testing-library/jest-dom";
+import { act, fireEvent, render } from "@lynx-js/react/testing-library";
+import type * as React from "@lynx-js/react";
+import { describe, expect, it, vi } from "vitest";
+
+import { Accordion } from "./index";
+
+function getRenderedRoot() {
+  const root = elementTree.root;
+
+  if (!root) {
+    throw new Error("Expected Lynx render root to exist.");
+  }
+
+  return root;
+}
+
+function TestAccordion(props: React.ComponentProps<typeof Accordion.Root> = {}) {
+  return (
+    <Accordion.Root {...props}>
+      <Accordion.Item value="first">
+        <Accordion.Header>
+          <Accordion.Trigger className="first-trigger" accessibility-label="첫 번째">
+            <Accordion.Body>
+              <Accordion.Title>첫 번째</Accordion.Title>
+            </Accordion.Body>
+          </Accordion.Trigger>
+        </Accordion.Header>
+        <Accordion.Content className="first-content">
+          <text>첫 번째 내용</text>
+        </Accordion.Content>
+      </Accordion.Item>
+      <Accordion.Item value="second">
+        <Accordion.Header>
+          <Accordion.Trigger className="second-trigger" accessibility-label="두 번째">
+            <Accordion.Body>
+              <Accordion.Title>두 번째</Accordion.Title>
+            </Accordion.Body>
+          </Accordion.Trigger>
+        </Accordion.Header>
+        <Accordion.Content>
+          <text>두 번째 내용</text>
+        </Accordion.Content>
+      </Accordion.Item>
+    </Accordion.Root>
+  );
+}
+
+describe("Accordion", () => {
+  it("opens and closes an item in uncontrolled mode", () => {
+    render(<TestAccordion />);
+
+    const trigger = getRenderedRoot().querySelector<HTMLElement>(".first-trigger");
+    const pressedOverlay = trigger?.querySelector<HTMLElement>(".seed-accordion__pressedOverlay");
+    expect(trigger).not.toBeNull();
+    expect(pressedOverlay).not.toBeNull();
+    expect(pressedOverlay).toHaveAttribute("accessibility-elements-hidden", "true");
+    expect(trigger).toHaveAttribute("accessibility-value", "접힘");
+
+    fireEvent.tap(trigger as HTMLElement);
+    expect(trigger).toHaveAttribute("accessibility-value", "펼쳐짐");
+
+    fireEvent.tap(trigger as HTMLElement);
+    expect(trigger).toHaveAttribute("accessibility-value", "접힘");
+  });
+
+  it("transitions content between zero and its measured height", () => {
+    render(<TestAccordion defaultValues={["first"]} />);
+
+    const root = getRenderedRoot();
+    const trigger = root.querySelector<HTMLElement>(".first-trigger");
+    const content = root.querySelector<HTMLElement>(".first-content");
+    const contentInner = content?.querySelector<HTMLElement>(".seed-accordion__contentInner");
+
+    expect(content).not.toBeNull();
+    expect(contentInner).not.toBeNull();
+    expect(content).toHaveStyle({ height: "0px" });
+
+    act(() => {
+      fireEvent.layoutchange(contentInner as HTMLElement, { height: 84 });
+    });
+
+    expect(content).toHaveStyle({ height: "84px" });
+
+    fireEvent.tap(trigger as HTMLElement);
+    expect(content).toHaveStyle({ height: "0px" });
+  });
+
+  it("keeps one item open by default and supports multiple mode", () => {
+    render(<TestAccordion multiple defaultValues={["first"]} />);
+
+    const root = getRenderedRoot();
+    const first = root.querySelector<HTMLElement>(".first-trigger");
+    const second = root.querySelector<HTMLElement>(".second-trigger");
+
+    expect(first).toHaveAttribute("accessibility-value", "펼쳐짐");
+    expect(second).toHaveAttribute("accessibility-value", "접힘");
+
+    fireEvent.tap(second as HTMLElement);
+    expect(first).toHaveAttribute("accessibility-value", "펼쳐짐");
+    expect(second).toHaveAttribute("accessibility-value", "펼쳐짐");
+  });
+
+  it("reports controlled value changes without mutating the rendered state", () => {
+    const onValuesChange = vi.fn();
+    render(<TestAccordion values={[]} onValuesChange={onValuesChange} />);
+
+    const trigger = getRenderedRoot().querySelector<HTMLElement>(".first-trigger");
+    fireEvent.tap(trigger as HTMLElement);
+
+    expect(onValuesChange).toHaveBeenCalledWith(["first"]);
+    expect(trigger).toHaveAttribute("accessibility-value", "접힘");
+  });
+
+  it("ignores tap when the root is disabled", () => {
+    const onValuesChange = vi.fn();
+    render(<TestAccordion disabled onValuesChange={onValuesChange} />);
+
+    const trigger = getRenderedRoot().querySelector<HTMLElement>(".first-trigger");
+    fireEvent.tap(trigger as HTMLElement);
+
+    expect(onValuesChange).not.toHaveBeenCalled();
+    expect(trigger).toHaveAttribute("accessibility-traits", "disabled");
+    expect(getRenderedRoot().querySelector(".first-content")).toHaveAttribute(
+      "accessibility-elements-hidden",
+      "true",
+    );
+  });
+});

package/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,453 @@
+import * as React from "@lynx-js/react";
+import type { ReactElement } from "@lynx-js/react";
+import clsx from "clsx";
+
+import { accordion, type AccordionVariantProps } from "@seed-design/lynx-css/recipes/accordion";
+
+import { useControllableState } from "../../hooks/useControllableState";
+import { usePressTap } from "../../hooks/usePressTap";
+import type {
+  LynxAccessibilityProps,
+  LynxIconElementProps,
+  LynxPressableProps,
+  LynxStyledElementProps,
+  LynxTextRef,
+  LynxViewProps,
+  LynxViewRef,
+} from "../../types";
+import { toArray } from "../../utils/children";
+import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context";
+import { InternalIcon } from "../Icon/Icon";
+
+/**
+ * @platform Lynx
+ *
+ * 웹 대비 미지원 기능:
+ * - `asChild`: Lynx에 Slot 기반 polymorphic 렌더링이 없음
+ * - `headingLevel`: Lynx 접근성 heading은 level을 받지 않음
+ * - DOM ARIA와 키보드 탐색: Lynx native 접근성 속성과 tap 상호작용으로 대체
+ * - `size="responsive"`: Lynx preset은 viewport media query를 지원하지 않음
+ */
+
+type PublicAccordionVariantProps = Omit<AccordionVariantProps, "open" | "pressed" | "disabled">;
+
+interface AccordionContextValue {
+  values: string[];
+  disabled: boolean;
+  variantProps: PublicAccordionVariantProps;
+  toggle: (value: string) => void;
+}
+
+const AccordionContext = React.createContext<AccordionContextValue | null>(null);
+
+function useAccordionContext(consumer: string): AccordionContextValue {
+  const context = React.useContext(AccordionContext);
+  if (!context) {
+    throw new Error(`<${consumer}/> must be rendered inside <AccordionRoot/>.`);
+  }
+  return context;
+}
+
+interface AccordionItemContextValue {
+  value: string;
+  open: boolean;
+  disabled: boolean;
+  variantProps: PublicAccordionVariantProps;
+  toggle: () => void;
+}
+
+const AccordionItemContext = React.createContext<AccordionItemContextValue | null>(null);
+const AccordionItemPositionContext = React.createContext({ isLast: false });
+
+function useAccordionItemContext(consumer: string): AccordionItemContextValue {
+  const context = React.useContext(AccordionItemContext);
+  if (!context) {
+    throw new Error(`<${consumer}/> must be rendered inside <AccordionItem/>.`);
+  }
+  return context;
+}
+
+const { ClassNamesProvider, useClassNames } = createSlotRecipeContext(accordion);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AccordionRootProps extends PublicAccordionVariantProps, LynxStyledElementProps {
+  values?: string[];
+  defaultValues?: string[];
+  onValuesChange?: (values: string[]) => void;
+  disabled?: boolean;
+  multiple?: boolean;
+}
+
+export const AccordionRoot = React.forwardRef<unknown, AccordionRootProps>((props, ref) => {
+  const {
+    children,
+    className,
+    values: valuesProp,
+    defaultValues = [],
+    onValuesChange,
+    disabled = false,
+    multiple = false,
+    ...restProps
+  } = props;
+  const [variantProps, nativeProps] = accordion.splitVariantProps(restProps);
+  const [rawValues, setValues] = useControllableState({
+    value: valuesProp,
+    defaultValue: defaultValues,
+    onChange: onValuesChange,
+  });
+  const values = multiple ? rawValues : rawValues.slice(0, 1);
+
+  const toggle = React.useCallback(
+    (itemValue: string) => {
+      if (disabled) return;
+
+      if (!multiple) {
+        setValues(values[0] === itemValue ? [] : [itemValue]);
+        return;
+      }
+
+      setValues(
+        values.includes(itemValue)
+          ? values.filter((value) => value !== itemValue)
+          : [...values, itemValue],
+      );
+    },
+    [disabled, multiple, setValues, values],
+  );
+
+  const contextValue = React.useMemo<AccordionContextValue>(
+    () => ({ values, disabled, variantProps, toggle }),
+    [disabled, toggle, values, variantProps],
+  );
+  const classes = accordion({ ...variantProps, disabled });
+  const items = toArray(children);
+
+  return (
+    <AccordionContext.Provider value={contextValue}>
+      <view
+        {...(ref ? { ref: ref as LynxViewRef } : {})}
+        className={clsx(classes.root, className)}
+        {...nativeProps}
+      >
+        {items.map((item, index) => (
+          <AccordionItemPositionContext.Provider
+            key={React.isValidElement(item) ? (item.key ?? index) : index}
+            value={{ isLast: index === items.length - 1 }}
+          >
+            {item}
+          </AccordionItemPositionContext.Provider>
+        ))}
+      </view>
+    </AccordionContext.Provider>
+  );
+});
+AccordionRoot.displayName = "AccordionRoot";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AccordionItemProps extends LynxStyledElementProps {
+  value: string;
+  disabled?: boolean;
+}
+
+export const AccordionItem = React.forwardRef<unknown, AccordionItemProps>((props, ref) => {
+  const { children, className, value, disabled: itemDisabled = false, ...nativeProps } = props;
+  const accordionContext = useAccordionContext("AccordionItem");
+  const { isLast } = React.useContext(AccordionItemPositionContext);
+  const disabled = accordionContext.disabled || itemDisabled;
+  const open = accordionContext.values.includes(value);
+  const toggle = React.useCallback(() => accordionContext.toggle(value), [accordionContext, value]);
+  const classes = accordion({
+    ...accordionContext.variantProps,
+    open,
+    disabled,
+    pressed: false,
+  });
+  const contextValue = React.useMemo<AccordionItemContextValue>(
+    () => ({ value, open, disabled, variantProps: accordionContext.variantProps, toggle }),
+    [accordionContext.variantProps, disabled, open, toggle, value],
+  );
+
+  return (
+    <AccordionItemContext.Provider value={contextValue}>
+      <ClassNamesProvider value={classes}>
+        <view
+          {...(ref ? { ref: ref as LynxViewRef } : {})}
+          className={clsx(classes.item, className)}
+          {...nativeProps}
+        >
+          {children}
+          {!isLast ? (
+            <view className={classes.divider} accessibility-elements-hidden={true} />
+          ) : null}
+        </view>
+      </ClassNamesProvider>
+    </AccordionItemContext.Provider>
+  );
+});
+AccordionItem.displayName = "AccordionItem";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AccordionHeaderProps extends LynxStyledElementProps, LynxAccessibilityProps {}
+
+export const AccordionHeader = React.forwardRef<unknown, AccordionHeaderProps>((props, ref) => {
+  const {
+    children,
+    className,
+    "accessibility-heading": accessibilityHeading = true,
+    ...nativeProps
+  } = props;
+  const classes = useClassNames();
+
+  return (
+    <view
+      {...(ref ? { ref: ref as LynxViewRef } : {})}
+      className={clsx(classes.header, className)}
+      accessibility-heading={accessibilityHeading}
+      {...nativeProps}
+    >
+      {children}
+    </view>
+  );
+});
+AccordionHeader.displayName = "AccordionHeader";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AccordionTriggerProps
+  extends LynxStyledElementProps,
+    LynxAccessibilityProps,
+    Pick<LynxPressableProps, "bindtap"> {
+  expandedAccessibilityValue?: string;
+  collapsedAccessibilityValue?: string;
+}
+
+export const AccordionTrigger = React.forwardRef<unknown, AccordionTriggerProps>((props, ref) => {
+  const {
+    children,
+    className,
+    bindtap,
+    expandedAccessibilityValue = "펼쳐짐",
+    collapsedAccessibilityValue = "접힘",
+    "accessibility-element": accessibilityElement = true,
+    "accessibility-role-description": accessibilityRoleDescription = "button",
+    "accessibility-traits": accessibilityTraits,
+    "accessibility-value": accessibilityValue,
+    ...nativeProps
+  } = props;
+  const context = useAccordionItemContext("AccordionTrigger");
+  const handleTap = React.useCallback(
+    (event: Parameters<NonNullable<LynxPressableProps["bindtap"]>>[0]) => {
+      context.toggle();
+      bindtap?.(event);
+    },
+    [bindtap, context],
+  );
+  const { pressed, ...pressHandlers } = usePressTap({
+    disabled: context.disabled,
+    onTap: handleTap,
+  });
+  const classes = accordion({
+    ...context.variantProps,
+    open: context.open,
+    disabled: context.disabled,
+    pressed,
+  });
+
+  return (
+    <ClassNamesProvider value={classes}>
+      <view
+        {...(ref ? { ref: ref as LynxViewRef } : {})}
+        className={clsx(classes.trigger, className)}
+        accessibility-element={accessibilityElement}
+        accessibility-role-description={accessibilityRoleDescription}
+        accessibility-traits={accessibilityTraits ?? (context.disabled ? "disabled" : "button")}
+        accessibility-value={
+          accessibilityValue ??
+          (context.open ? expandedAccessibilityValue : collapsedAccessibilityValue)
+        }
+        {...pressHandlers}
+        {...nativeProps}
+      >
+        <view className={classes.pressedOverlay} accessibility-elements-hidden={true} />
+        {children}
+      </view>
+    </ClassNamesProvider>
+  );
+});
+AccordionTrigger.displayName = "AccordionTrigger";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AccordionContentProps extends LynxStyledElementProps, LynxAccessibilityProps {}
+
+type ContentLayoutChangeHandler = NonNullable<LynxViewProps["bindlayoutchange"]>;
+
+function getContentLayoutHeight(event: Parameters<ContentLayoutChangeHandler>[0]): number | null {
+  const eventWithHeight = event as Parameters<ContentLayoutChangeHandler>[0] & { height?: number };
+  const height = event.detail?.height ?? event.params?.height ?? eventWithHeight.height;
+
+  if (typeof height !== "number" || !Number.isFinite(height)) return null;
+  return Math.max(0, height);
+}
+
+export const AccordionContent = React.forwardRef<unknown, AccordionContentProps>((props, ref) => {
+  const {
+    children,
+    className,
+    style,
+    "accessibility-elements-hidden": accessibilityElementsHidden = false,
+    ...nativeProps
+  } = props;
+  const context = useAccordionItemContext("AccordionContent");
+  const classes = useClassNames();
+  const [contentHeight, setContentHeight] = React.useState(0);
+  const handleContentLayoutChange = React.useCallback<ContentLayoutChangeHandler>((event) => {
+    const height = getContentLayoutHeight(event);
+    if (height !== null) setContentHeight((current) => (current === height ? current : height));
+  }, []);
+
+  return (
+    <view
+      {...(ref ? { ref: ref as LynxViewRef } : {})}
+      className={clsx(classes.content, className)}
+      style={{ ...style, height: context.open ? `${contentHeight}px` : "0px" }}
+      accessibility-elements-hidden={!context.open || accessibilityElementsHidden}
+      {...nativeProps}
+    >
+      <view className={classes.contentInner} bindlayoutchange={handleContentLayoutChange}>
+        {children}
+      </view>
+    </view>
+  );
+});
+AccordionContent.displayName = "AccordionContent";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AccordionBodyProps extends LynxStyledElementProps {}
+
+export const AccordionBody = React.forwardRef<unknown, AccordionBodyProps>((props, ref) => {
+  const { children, className, ...nativeProps } = props;
+  const classes = useClassNames();
+
+  return (
+    <view
+      {...(ref ? { ref: ref as LynxViewRef } : {})}
+      className={clsx(classes.body, className)}
+      {...nativeProps}
+    >
+      {children}
+    </view>
+  );
+});
+AccordionBody.displayName = "AccordionBody";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AccordionTitleProps extends LynxStyledElementProps {}
+
+export const AccordionTitle = React.forwardRef<unknown, AccordionTitleProps>((props, ref) => {
+  const { children, className, ...nativeProps } = props;
+  const classes = useClassNames();
+
+  return (
+    <text
+      {...(ref ? { ref: ref as LynxTextRef } : {})}
+      className={clsx(classes.title, className)}
+      {...nativeProps}
+    >
+      {children}
+    </text>
+  );
+});
+AccordionTitle.displayName = "AccordionTitle";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AccordionDescriptionProps extends LynxStyledElementProps {}
+
+export const AccordionDescription = React.forwardRef<unknown, AccordionDescriptionProps>(
+  (props, ref) => {
+    const { children, className, ...nativeProps } = props;
+    const classes = useClassNames();
+
+    return (
+      <text
+        {...(ref ? { ref: ref as LynxTextRef } : {})}
+        className={clsx(classes.description, className)}
+        {...nativeProps}
+      >
+        {children}
+      </text>
+    );
+  },
+);
+AccordionDescription.displayName = "AccordionDescription";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AccordionPrefixProps extends LynxStyledElementProps {}
+
+export const AccordionPrefix = React.forwardRef<unknown, AccordionPrefixProps>((props, ref) => {
+  const { children, className, ...nativeProps } = props;
+  const classes = useClassNames();
+
+  return (
+    <view
+      {...(ref ? { ref: ref as LynxViewRef } : {})}
+      className={clsx(classes.prefix, className)}
+      {...nativeProps}
+    >
+      {children}
+    </view>
+  );
+});
+AccordionPrefix.displayName = "AccordionPrefix";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AccordionSuffixIconProps extends LynxStyledElementProps {
+  icon?: ReactElement<LynxIconElementProps>;
+}
+
+export const AccordionSuffixIcon = React.forwardRef<unknown, AccordionSuffixIconProps>(
+  (props, ref) => {
+    const { icon, children, className, style, ...nativeProps } = props;
+    const context = useAccordionItemContext("AccordionSuffixIcon");
+    const classes = useClassNames();
+    const mergedClassName = clsx(classes.suffixIcon, className);
+
+    if (icon) {
+      return (
+        <view
+          {...(ref ? { ref: ref as LynxViewRef } : {})}
+          accessibility-elements-hidden={true}
+          {...nativeProps}
+        >
+          <InternalIcon
+            icon={icon}
+            className={mergedClassName}
+            style={style}
+            deps={[context.open, context.disabled]}
+          />
+        </view>
+      );
+    }
+
+    return (
+      <view
+        {...(ref ? { ref: ref as LynxViewRef } : {})}
+        className={mergedClassName}
+        style={style}
+        accessibility-elements-hidden={true}
+        {...nativeProps}
+      >
+        {children}
+      </view>
+    );
+  },
+);
+AccordionSuffixIcon.displayName = "AccordionSuffixIcon";

package/src/components/Accordion/index.ts

@@ -0,0 +1,24 @@
+export {
+  AccordionRoot,
+  AccordionItem,
+  AccordionHeader,
+  AccordionTrigger,
+  AccordionContent,
+  AccordionBody,
+  AccordionTitle,
+  AccordionDescription,
+  AccordionPrefix,
+  AccordionSuffixIcon,
+  type AccordionRootProps,
+  type AccordionItemProps,
+  type AccordionHeaderProps,
+  type AccordionTriggerProps,
+  type AccordionContentProps,
+  type AccordionBodyProps,
+  type AccordionTitleProps,
+  type AccordionDescriptionProps,
+  type AccordionPrefixProps,
+  type AccordionSuffixIconProps,
+} from "./Accordion";
+
+export * as Accordion from "./Accordion.namespace";

package/src/components/BottomSheet/BottomSheet.test.tsx

@@ -143,6 +143,30 @@ describe("BottomSheet", () => {
     });
   });
 
+  it("releases the sheet's inline left inset so the positioner can center it", () => {
+    render(
+      <BottomSheet.Root>
+        <BottomSheet.Content />
+      </BottomSheet.Root>,
+    );
+
+    expect(sheetMocks.contentProps.at(-1)).toMatchObject({
+      style: { left: "auto" },
+    });
+  });
+
+  it("lets a user-provided style win over the released left inset", () => {
+    render(
+      <BottomSheet.Root>
+        <BottomSheet.Content style={{ left: "12px" }} />
+      </BottomSheet.Root>,
+    );
+
+    expect(sheetMocks.contentProps.at(-1)).toMatchObject({
+      style: { left: "12px" },
+    });
+  });
+
   it("skips motion-engine animations when Root has skipAnimation", () => {
     render(
       <BottomSheet.Root skipAnimation>