@seed-design/lynx-react 0.7.1 → 0.8.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/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");
+  });
+});

package/src/components/ContextualFloatingButton/ContextualFloatingButton.tsx

@@ -0,0 +1,232 @@
+import {
+  contextualFloatingButton,
+  type ContextualFloatingButtonVariantProps,
+} from "@seed-design/lynx-css/recipes/contextual-floating-button";
+import clsx from "clsx";
+import * as React from "@lynx-js/react";
+
+import { usePressTap } from "../../hooks/usePressTap";
+import { useScaleFeedback } from "../../hooks/useScaleFeedback";
+import type {
+  LynxAccessibilityProps,
+  LynxElementProps,
+  LynxPressableProps,
+  LynxStyledElementProps,
+  LynxTouchProps,
+  LynxViewRef,
+} from "../../types";
+import { toArray } from "../../utils/children";
+import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context";
+import { mergeProps } from "../../utils/merge-props";
+import { IconRequired, IconSlotProvider, getIconSlotName } from "../Icon/Icon";
+import { ProgressCircleRange, ProgressCircleRoot } from "../ProgressCircle";
+
+const { ClassNamesProvider, useClassNames } = createSlotRecipeContext(contextualFloatingButton);
+
+type ContextualFloatingButtonPublicVariantProps = Omit<
+  ContextualFloatingButtonVariantProps,
+  "pressed"
+>;
+
+interface ContextualFloatingButtonRootProps
+  extends ContextualFloatingButtonVariantProps,
+    Omit<LynxStyledElementProps, "flatten">,
+    LynxTouchProps,
+    LynxAccessibilityProps {
+  flatten?: false;
+}
+
+const ContextualFloatingButtonRoot = React.forwardRef<unknown, ContextualFloatingButtonRootProps>(
+  (innerProps, ref) => {
+    const [variantProps, otherProps] = contextualFloatingButton.splitVariantProps(innerProps);
+    const classNames = contextualFloatingButton(variantProps);
+    const { children, className, ...nativeProps } = otherProps;
+    const iconSlotContextValue = React.useMemo(
+      () => ({
+        classNames: {
+          icon: classNames.icon,
+          prefixIcon: classNames.prefixIcon,
+        },
+        deps: [
+          variantProps.variant ?? null,
+          variantProps.layout ?? null,
+          variantProps.pressed ?? false,
+          variantProps.disabled ?? false,
+          variantProps.loading ?? false,
+        ],
+      }),
+      [
+        classNames.icon,
+        classNames.prefixIcon,
+        variantProps.variant,
+        variantProps.layout,
+        variantProps.pressed,
+        variantProps.disabled,
+        variantProps.loading,
+      ],
+    );
+
+    return (
+      <ClassNamesProvider value={classNames}>
+        <IconSlotProvider value={iconSlotContextValue}>
+          <view
+            {...mergeProps(ref ? { ref: ref as LynxViewRef } : {}, nativeProps)}
+            className={clsx(classNames.root, className)}
+          >
+            {children}
+          </view>
+        </IconSlotProvider>
+      </ClassNamesProvider>
+    );
+  },
+);
+ContextualFloatingButtonRoot.displayName = "ContextualFloatingButtonRoot";
+
+function ContextualFloatingButtonText({ children }: LynxElementProps) {
+  const classNames = useClassNames();
+
+  return <text className={classNames.text}>{children}</text>;
+}
+
+function ContextualFloatingButtonContent({
+  children,
+  isIconOnly,
+}: {
+  children: React.ReactNode;
+  isIconOnly: boolean;
+}) {
+  const classNames = useClassNames();
+  const prefixIconChildren: React.ReactNode[] = [];
+  const iconChildren: React.ReactNode[] = [];
+  const textChildren: React.ReactNode[] = [];
+
+  for (const child of toArray(children)) {
+    const slotName = getIconSlotName(child);
+
+    if (slotName === "prefixIcon") {
+      prefixIconChildren.push(child);
+      continue;
+    }
+    if (slotName === "icon") {
+      iconChildren.push(child);
+      continue;
+    }
+
+    textChildren.push(child);
+  }
+
+  return (
+    <view className={classNames.content}>
+      {isIconOnly ? (
+        <>{iconChildren}</>
+      ) : (
+        <>
+          {prefixIconChildren}
+          {textChildren.length > 0 ? (
+            <ContextualFloatingButtonText>{textChildren}</ContextualFloatingButtonText>
+          ) : null}
+        </>
+      )}
+    </view>
+  );
+}
+
+function ContextualFloatingButtonLoadingIndicator() {
+  const classNames = useClassNames();
+
+  return (
+    <view className={classNames.loadingIndicator}>
+      <ProgressCircleRoot size="16" tone="inherit">
+        <ProgressCircleRange />
+      </ProgressCircleRoot>
+    </view>
+  );
+}
+
+/**
+ * @platform Lynx
+ *
+ * Web version differences:
+ * - Native `<view>` and `bindtap` / `main-thread:bindtap` replace HTML button events,
+ *   form props, and `asChild`.
+ * - `loading` blocks both native tap callbacks, unlike the React reference which only
+ *   exposes pending state to its underlying button.
+ */
+export interface ContextualFloatingButtonProps
+  extends ContextualFloatingButtonPublicVariantProps,
+    Omit<LynxStyledElementProps, "flatten">,
+    LynxPressableProps,
+    LynxAccessibilityProps {}
+
+export const ContextualFloatingButton = React.forwardRef<unknown, ContextualFloatingButtonProps>(
+  (props, ref) => {
+    const [variantProps, otherProps] = contextualFloatingButton.splitVariantProps(props);
+    const {
+      children,
+      bindtap,
+      "main-thread:bindtap": mainThreadBindtap,
+      "accessibility-element": accessibilityElement = true,
+      "accessibility-label": accessibilityLabel,
+      "accessibility-role-description": accessibilityRoleDescription = "button",
+      "accessibility-traits": accessibilityTraits,
+      ...nativeProps
+    } = otherProps;
+    const layout = variantProps.layout ?? "withText";
+    const disabled = variantProps.disabled ?? false;
+    const loading = variantProps.loading ?? false;
+    const isInteractive = !disabled && !loading;
+
+    if (
+      process.env.NODE_ENV !== "production" &&
+      layout === "iconOnly" &&
+      accessibilityElement &&
+      !accessibilityLabel
+    ) {
+      console.warn(
+        'ContextualFloatingButton: `layout="iconOnly"` requires `accessibility-label` for accessibility.',
+      );
+    }
+
+    const { pressed, bindtouchstart, bindtouchend, bindtouchcancel, ...pressTapHandlers } =
+      usePressTap({
+        disabled: !isInteractive,
+        onTap: bindtap,
+        mainThreadOnTap: mainThreadBindtap,
+      });
+    const { scaleFeedbackTriggerProps, scaleFeedbackTargetProps } = useScaleFeedback({
+      disabled: !isInteractive,
+      onTouchStart: bindtouchstart,
+      onTouchEnd: bindtouchend,
+      onTouchCancel: bindtouchcancel,
+    });
+
+    return (
+      <IconRequired enabled={layout === "iconOnly"}>
+        <ContextualFloatingButtonRoot
+          {...mergeProps(
+            { ref },
+            scaleFeedbackTargetProps,
+            scaleFeedbackTriggerProps,
+            pressTapHandlers,
+            nativeProps,
+          )}
+          {...variantProps}
+          pressed={pressed}
+          accessibility-element={accessibilityElement}
+          accessibility-label={accessibilityLabel}
+          accessibility-role-description={accessibilityRoleDescription}
+          accessibility-traits={
+            accessibilityTraits ?? (disabled || loading ? "disabled" : undefined)
+          }
+          flatten={false}
+        >
+          {loading ? <ContextualFloatingButtonLoadingIndicator /> : null}
+          <ContextualFloatingButtonContent isIconOnly={layout === "iconOnly"}>
+            {children}
+          </ContextualFloatingButtonContent>
+        </ContextualFloatingButtonRoot>
+      </IconRequired>
+    );
+  },
+);
+ContextualFloatingButton.displayName = "ContextualFloatingButton";

package/src/components/ContextualFloatingButton/index.ts

@@ -0,0 +1,4 @@
+export {
+  ContextualFloatingButton,
+  type ContextualFloatingButtonProps,
+} from "./ContextualFloatingButton";

package/src/components/Dialog/Dialog.namespace.ts

@@ -0,0 +1,24 @@
+export {
+  DialogAction as Action,
+  DialogBackdrop as Backdrop,
+  DialogBody as Body,
+  DialogContent as Content,
+  DialogDescription as Description,
+  DialogFooter as Footer,
+  DialogHeader as Header,
+  DialogPositioner as Positioner,
+  DialogRoot as Root,
+  DialogTitle as Title,
+  DialogTrigger as Trigger,
+  type DialogActionProps as ActionProps,
+  type DialogBackdropProps as BackdropProps,
+  type DialogBodyProps as BodyProps,
+  type DialogContentProps as ContentProps,
+  type DialogDescriptionProps as DescriptionProps,
+  type DialogFooterProps as FooterProps,
+  type DialogHeaderProps as HeaderProps,
+  type DialogPositionerProps as PositionerProps,
+  type DialogRootProps as RootProps,
+  type DialogTitleProps as TitleProps,
+  type DialogTriggerProps as TriggerProps,
+} from "./Dialog";