@seed-design/lynx-react 0.7.1 → 0.9.0

package/src/components/AttachmentInput/index.ts

@@ -0,0 +1,49 @@
+export {
+  AttachmentInput,
+  AttachmentInputRoot,
+  AttachmentInputContainer,
+  AttachmentInputItemGroup,
+  AttachmentInputTrigger,
+  AttachmentInputTriggerIcon,
+  AttachmentInputTriggerItemCount,
+  AttachmentInputItem,
+  AttachmentInputItemName,
+  AttachmentInputItemSize,
+  AttachmentInputItemImage,
+  AttachmentInputItemThumbnail,
+  AttachmentInputItemMetadata,
+  AttachmentInputItemBadge,
+  AttachmentInputItemActionButton,
+  AttachmentInputItemBackdrop,
+  AttachmentInputItemSurface,
+  AttachmentInputItemRemoveButton,
+  AttachmentInputContext,
+  useAttachmentInput,
+  useAttachmentInputContext,
+  useAttachmentInputItemContext,
+  type NativeFile,
+  type AttachmentFileError,
+  type AttachmentFileRejection,
+  type AttachmentFileStatusDetails,
+  type AttachmentFileEntry,
+  type AttachmentInputProps,
+  type AttachmentInputStateProps,
+  type AttachmentInputContextValue,
+  type AttachmentInputRootProps,
+  type AttachmentInputContainerProps,
+  type AttachmentInputItemGroupProps,
+  type AttachmentInputTriggerProps,
+  type AttachmentInputTriggerIconProps,
+  type AttachmentInputTriggerItemCountProps,
+  type AttachmentInputItemProps,
+  type AttachmentInputItemNameProps,
+  type AttachmentInputItemSizeProps,
+  type AttachmentInputItemSurfaceProps,
+  type AttachmentInputItemImageProps,
+  type AttachmentInputItemThumbnailProps,
+  type AttachmentInputItemMetadataProps,
+  type AttachmentInputItemBadgeProps,
+  type AttachmentInputItemBackdropProps,
+  type AttachmentInputItemActionButtonProps,
+  type AttachmentInputItemRemoveButtonProps,
+} from "./AttachmentInput";

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

@@ -1,3 +1,5 @@
+import "@testing-library/jest-dom";
+import { createRef } from "@lynx-js/react";
 import { fireEvent, render } from "@lynx-js/react/testing-library";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
@@ -75,6 +77,7 @@ vi.mock("../../hooks/useSafeArea", () => ({
 }));
 
 import * as BottomSheet from "./BottomSheet.namespace";
+import { ScrollFog } from "../ScrollFog";
 
 describe("BottomSheet", () => {
   beforeEach(() => {
@@ -95,19 +98,31 @@ describe("BottomSheet", () => {
     });
   });
 
-  it("renders Body as a vertical scroll-view", () => {
+  it("renders Body as a composable view with an explicit ScrollFog child", () => {
+    const bodyRef = createRef<unknown>();
     const { container } = render(
       <BottomSheet.Root>
-        <BottomSheet.Body>
-          <text>Scrollable content</text>
+        <BottomSheet.Body ref={bodyRef} className="custom-body" style={{ height: "200px" }}>
+          <ScrollFog hideScrollBar placement={["top", "bottom"]}>
+            <text>Scrollable content</text>
+          </ScrollFog>
         </BottomSheet.Body>
       </BottomSheet.Root>,
     );
 
-    const body = container.querySelector("scroll-view");
-
-    expect(body).not.toBeNull();
-    expect(body?.hasAttribute("scroll-y")).toBe(true);
+    const body = container.querySelector(".custom-body");
+    const scrollViews = body?.querySelectorAll("scroll-view");
+
+    expect(body?.tagName.toLowerCase()).toBe("view");
+    expect(body).toHaveStyle({ height: "200px" });
+    expect(bodyRef.current).not.toBeNull();
+    expect(scrollViews).toHaveLength(2);
+    expect(scrollViews?.item(0)).toHaveAttribute("scroll-orientation", "vertical");
+    expect(scrollViews?.item(1)).toHaveAttribute("scroll-orientation", "horizontal");
+    for (const scrollView of scrollViews ?? []) {
+      expect(scrollView).toHaveAttribute("scroll-bar-enable", "false");
+      expect(scrollView).not.toHaveAttribute("fading-edge-length");
+    }
   });
 
   it("renders Handle with a target-size touch area around the visual handle", () => {

package/src/components/BottomSheet/BottomSheet.tsx

@@ -392,26 +392,8 @@ function createTextSlot(
 export interface BottomSheetHeaderProps extends BottomSheetSlotProps {}
 export const BottomSheetHeader = createViewSlot("header");
 BottomSheetHeader.displayName = "BottomSheetHeader";
-
 export interface BottomSheetBodyProps extends BottomSheetSlotProps {}
-export const BottomSheetBody: LynxForwardRefComponent<unknown, BottomSheetBodyProps> = forwardRef<
-  unknown,
-  BottomSheetBodyProps
->((props, ref) => {
-  const { children, className, style } = props;
-  const classNames = useClassNames();
-
-  return (
-    <scroll-view
-      {...(ref ? ({ ref: ref as LynxViewRef } as Record<string, unknown>) : {})}
-      scroll-y
-      className={clsx(classNames.body, className)}
-      style={style as never}
-    >
-      {children}
-    </scroll-view>
-  );
-});
+export const BottomSheetBody = createViewSlot("body");
 BottomSheetBody.displayName = "BottomSheetBody";
 
 export interface BottomSheetFooterProps extends BottomSheetSlotProps {}

package/src/components/Box/Box.test.tsx

@@ -9,7 +9,9 @@ interface TestLynxGlobal {
   lynx?: {
     __globalProps?: {
       safeAreaInsetTop?: number;
+      safeAreaInsetRight?: number;
       safeAreaInsetBottom?: number;
+      safeAreaInsetLeft?: number;
     };
   };
   lynxTestingEnv?: {
@@ -82,4 +84,106 @@ describe("Box", () => {
       "padding-bottom": "34px",
     });
   });
+
+  it("resolves left and right safe area padding from global props", () => {
+    setGlobalProps({
+      safeAreaInsetRight: 62,
+      safeAreaInsetLeft: 59,
+    });
+
+    render(
+      <Box className="box-test" pl="safeArea" pr="safeArea">
+        <Text>Box content</Text>
+      </Box>,
+    );
+
+    const box = getRenderedRoot().querySelector(".box-test");
+
+    expect(box).toBeInTheDocument();
+    expectStyle((box as HTMLElement).style, {
+      "padding-left": "59px",
+      "padding-right": "62px",
+    });
+  });
+
+  it("resolves margin with side over axis over all", () => {
+    render(<Box className="box-test" m="x1" mx="x2" ml="x3" />);
+
+    const box = getRenderedRoot().querySelector(".box-test");
+
+    expectStyle((box as HTMLElement).style, {
+      "margin-top": "var(--seed-dimension-x1)",
+      "margin-right": "var(--seed-dimension-x2)",
+      "margin-bottom": "var(--seed-dimension-x1)",
+      "margin-left": "var(--seed-dimension-x3)",
+    });
+  });
+
+  it("keeps auto margin", () => {
+    render(<Box className="box-test" ml="auto" />);
+
+    const box = getRenderedRoot().querySelector(".box-test");
+
+    expectStyle((box as HTMLElement).style, { "margin-left": "auto" });
+  });
+
+  it("negates bleed values with side over axis over all", () => {
+    render(<Box className="box-test" bleed="4px" bleedX="8px" bleedLeft="12px" />);
+
+    const box = getRenderedRoot().querySelector(".box-test");
+
+    // happy-dom folds the constant `calc(4px * -1)` that Box emits.
+    expectStyle((box as HTMLElement).style, {
+      "margin-top": "calc(-4px)",
+      "margin-right": "calc(-8px)",
+      "margin-bottom": "calc(-4px)",
+      "margin-left": "calc(-12px)",
+    });
+  });
+
+  it("negates safe area bleed from global props", () => {
+    setGlobalProps({
+      safeAreaInsetRight: 62,
+      safeAreaInsetLeft: 59,
+    });
+
+    render(<Box className="box-test" bleedX="safeArea" />);
+
+    const box = getRenderedRoot().querySelector(".box-test");
+
+    expectStyle((box as HTMLElement).style, {
+      "margin-left": "calc(-59px)",
+      "margin-right": "calc(-62px)",
+    });
+  });
+
+  it("negates the env() fallback when the host omits safe area bleed insets", () => {
+    render(<Box className="box-test" bleedX="safeArea" />);
+
+    const box = getRenderedRoot().querySelector(".box-test");
+
+    // happy-dom normalizes the `calc(env(...) * -1)` that Box emits.
+    expectStyle((box as HTMLElement).style, {
+      "margin-left": "calc(env(safe-area-inset-left) *-1)",
+      "margin-right": "calc(env(safe-area-inset-right) *-1)",
+    });
+  });
+
+  it("rejects dimension tokens as bleed values", () => {
+    // @ts-expect-error Lynx drops an inline calc() that contains a token's var().
+    render(<Box bleedX="x4" />);
+  });
+
+  it("lets style override margin props", () => {
+    render(<Box className="box-test" mt="x4" style={{ marginTop: "3px" }} />);
+
+    const box = getRenderedRoot().querySelector(".box-test");
+
+    expectStyle((box as HTMLElement).style, { "margin-top": "3px" });
+  });
+
+  it("rejects margin and bleed props together", () => {
+    // @ts-expect-error margin and bleed props both resolve to margin-*.
+    render(<Box m="x1" bleedX="8px" />);
+  });
 });

package/src/components/Box/Box.tsx

@@ -2,7 +2,7 @@ import clsx from "clsx";
 import * as React from "@lynx-js/react";
 
 import type { LynxPressableProps, LynxStyledElementProps, LynxViewRef } from "../../types";
-import { useStyleProps, type StyleProps } from "../../utils/styled";
+import { useStyleProps, type MarginBleedStyleProps, type StyleProps } from "../../utils/styled";
 import { mergeProps } from "../../utils/merge-props";
 
 /**
@@ -15,11 +15,14 @@ import { mergeProps } from "../../utils/merge-props";
  * 컴포넌트 내부에서는 native tag와 recipe className을 사용하고, inline style은
  * 런타임 값이 필요한 경우에만 제한적으로 사용합니다.
  */
-export interface BoxProps extends StyleProps, LynxStyledElementProps, LynxPressableProps {
-  bindtouchstart?: () => void;
-  bindtouchend?: () => void;
-  bindtouchcancel?: () => void;
-}
+export type BoxProps = StyleProps &
+  MarginBleedStyleProps &
+  LynxStyledElementProps &
+  LynxPressableProps & {
+    bindtouchstart?: () => void;
+    bindtouchend?: () => void;
+    bindtouchcancel?: () => void;
+  };
 
 export const Box = React.forwardRef<unknown, BoxProps>((props, ref) => {
   const { style, restProps } = useStyleProps(props);

package/src/components/ChipTabs/ChipTabs.namespace.ts

@@ -0,0 +1,14 @@
+export {
+  ChipTabsCarousel as Carousel,
+  ChipTabsCarouselCamera as CarouselCamera,
+  ChipTabsContent as Content,
+  ChipTabsList as List,
+  ChipTabsRoot as Root,
+  ChipTabsTrigger as Trigger,
+  type ChipTabsCarouselCameraProps as CarouselCameraProps,
+  type ChipTabsCarouselProps as CarouselProps,
+  type ChipTabsContentProps as ContentProps,
+  type ChipTabsListProps as ListProps,
+  type ChipTabsRootProps as RootProps,
+  type ChipTabsTriggerProps as TriggerProps,
+} from "./ChipTabs";

package/src/components/ChipTabs/ChipTabs.tsx

@@ -0,0 +1,119 @@
+import * as React from "@lynx-js/react";
+
+import { chipTabs, type ChipTabsVariantProps } from "@seed-design/lynx-css/recipes/chip-tabs";
+
+import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context";
+
+import {
+  TabsCarousel,
+  TabsCarouselCamera,
+  TabsContent,
+  TabsList,
+  TabsRootPrimitive,
+  TabsTrigger,
+  type TabsCarouselCameraProps,
+  type TabsCarouselProps,
+  type TabsContentProps,
+  type TabsListProps,
+  type TabsRootProps,
+  type TabsTriggerProps,
+} from "../Tabs/Tabs";
+
+type ChipTabsRecipeState = Pick<
+  ChipTabsVariantProps,
+  "selected" | "pressed" | "disabled" | "inCarousel"
+>;
+
+const CHIP_TABS_TRIGGER_GAP = 8;
+const { ClassNamesProvider: ChipTabsClassNamesProvider } = createSlotRecipeContext(chipTabs);
+
+type ChipTabsPublicVariantProps = Omit<
+  ChipTabsVariantProps,
+  "selected" | "pressed" | "disabled" | "inCarousel"
+>;
+
+/**
+ * @platform Lynx
+ *
+ * 웹 대비 미지원 기능:
+ * - `lazyMount`, `unmountOnExit`: native viewpager가 모든 page slot을 유지해야 함
+ * - 키보드 포커스와 roving tabindex
+ */
+export interface ChipTabsRootProps
+  extends Omit<TabsRootProps, "size" | "contentLayout" | "stickyList" | "triggerLayout">,
+    ChipTabsPublicVariantProps {}
+
+/**
+ * Chip recipe와 Tabs의 controlled state, horizontal scrolling, and native pager behavior를 결합합니다.
+ */
+export const ChipTabsRoot = React.forwardRef<unknown, ChipTabsRootProps>((props, ref) => {
+  const [variantProps, rootProps] = chipTabs.splitVariantProps(props);
+  const getClassNames = React.useCallback(
+    (state: ChipTabsRecipeState = {}) =>
+      chipTabs({
+        ...variantProps,
+        selected: state.selected,
+        pressed: state.pressed,
+        disabled: state.disabled,
+        inCarousel: state.inCarousel,
+      }),
+    [variantProps],
+  );
+  const recipe = React.useMemo(
+    () => ({
+      getClassNames,
+      triggerGap: CHIP_TABS_TRIGGER_GAP,
+    }),
+    [getClassNames],
+  );
+
+  return (
+    <ChipTabsClassNamesProvider value={getClassNames()}>
+      <TabsRootPrimitive {...rootProps} ref={ref} recipe={recipe} inlineNotification />
+    </ChipTabsClassNamesProvider>
+  );
+});
+ChipTabsRoot.displayName = "ChipTabsRoot";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ChipTabsListProps extends Omit<TabsListProps, "scrollAlign"> {
+  /** 선택한 chip을 목록 안에서 정렬할 방식입니다. @defaultValue "nearest" */
+  scrollAlign?: TabsListProps["scrollAlign"];
+}
+
+/**
+ * ChipTabs는 이미 보이는 선택 chip을 움직이지 않도록 기본적으로 `"nearest"`를 사용합니다.
+ */
+export const ChipTabsList = React.forwardRef<unknown, ChipTabsListProps>(
+  ({ scrollAlign = "nearest", ...props }, ref) => (
+    <TabsList {...props} ref={ref} scrollAlign={scrollAlign} />
+  ),
+);
+ChipTabsList.displayName = "ChipTabsList";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+/** Native text label and optional inline notification slot을 갖는 chip trigger입니다. */
+export interface ChipTabsTriggerProps extends TabsTriggerProps {}
+
+export const ChipTabsTrigger = TabsTrigger;
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ChipTabsContentProps extends TabsContentProps {}
+
+export const ChipTabsContent = TabsContent;
+
+////////////////////////////////////////////////////////////////////////////////////
+
+/** @platform Lynx native viewpager를 사용하므로 Tabs Carousel의 미지원 prop과 동일합니다. */
+export interface ChipTabsCarouselProps extends TabsCarouselProps {}
+
+export const ChipTabsCarousel = TabsCarousel;
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ChipTabsCarouselCameraProps extends TabsCarouselCameraProps {}
+
+export const ChipTabsCarouselCamera = TabsCarouselCamera;

package/src/components/ChipTabs/index.ts

@@ -0,0 +1,16 @@
+export {
+  ChipTabsCarousel,
+  ChipTabsCarouselCamera,
+  ChipTabsContent,
+  ChipTabsList,
+  ChipTabsRoot,
+  ChipTabsTrigger,
+  type ChipTabsCarouselCameraProps,
+  type ChipTabsCarouselProps,
+  type ChipTabsContentProps,
+  type ChipTabsListProps,
+  type ChipTabsRootProps,
+  type ChipTabsTriggerProps,
+} from "./ChipTabs";
+
+export * as ChipTabs from "./ChipTabs.namespace";

package/src/components/ContextualFloatingButton/ContextualFloatingButton.test.tsx

@@ -0,0 +1,63 @@
+import "@testing-library/jest-dom";
+import { fireEvent, getQueriesForElement, render } from "@lynx-js/react/testing-library";
+import { describe, expect, it, vi } from "vitest";
+
+import { ContextualFloatingButton } from "./ContextualFloatingButton";
+
+function getRenderedRoot() {
+  const root = elementTree.root;
+
+  if (!root) {
+    throw new Error("Expected Lynx render root to exist.");
+  }
+
+  return root;
+}
+
+function getContextualFloatingButtonRoot() {
+  const root = getRenderedRoot();
+
+  if (root.classList.contains("seed-contextual-floating-button__root")) return root;
+
+  const button = root.querySelector<HTMLElement>(".seed-contextual-floating-button__root");
+  if (!button) {
+    throw new Error("Expected ContextualFloatingButton root to exist.");
+  }
+
+  return button;
+}
+
+describe("ContextualFloatingButton", () => {
+  it("preserves its label under the loading indicator while blocking taps", () => {
+    const onTap = vi.fn();
+    render(
+      <ContextualFloatingButton loading bindtap={onTap}>
+        저장하기
+      </ContextualFloatingButton>,
+    );
+
+    const root = getContextualFloatingButtonRoot();
+
+    expect(getQueriesForElement(getRenderedRoot()).getByText("저장하기")).toBeInTheDocument();
+    expect(root.querySelector(".seed-progress-circle__root")).toBeInTheDocument();
+
+    fireEvent.tap(root);
+
+    expect(onTap).not.toHaveBeenCalled();
+  });
+
+  it("blocks taps and exposes disabled accessibility state when disabled", () => {
+    const onTap = vi.fn();
+    render(
+      <ContextualFloatingButton disabled bindtap={onTap}>
+        저장하기
+      </ContextualFloatingButton>,
+    );
+
+    const root = getContextualFloatingButtonRoot();
+    fireEvent.tap(root);
+
+    expect(onTap).not.toHaveBeenCalled();
+    expect(root).toHaveAttribute("accessibility-traits", "disabled");
+  });
+});