refactor: make useDismissible private & export DismissibleRoot an…

…d`DismissibleDismissButton`
daangn · Jan 9, 2025 · c26db7f · c26db7f
1 parent 955ca99
commit c26db7f
Show file tree

Hide file tree

Showing 10 changed files with 169 additions and 191 deletions.
diff --git a/docs/registry/registry-ui.ts b/docs/registry/registry-ui.ts
@@ -128,9 +128,7 @@ export const registryUI: RegistryUI = [
   },
   {
     name: "segmented-control",
-    dependencies: [
-      `@seed-design/react-segmented-control@${segmentedControlPkg.version}`,
-    ],
+    dependencies: ["@seed-design/react"],
     files: ["ui:segmented-control.tsx"],
   },
   {

diff --git a/docs/registry/ui/callout.tsx b/docs/registry/ui/callout.tsx
@@ -2,12 +2,7 @@
 
 import "@seed-design/stylesheet/callout.css";
 
-import {
-  Callout as SeedCallout,
-  DismissibleProvider,
-  useDismissible,
-  type UseDismissibleProps,
-} from "@seed-design/react";
+import { Callout as SeedCallout } from "@seed-design/react";
 import * as React from "react";
 
 import {
@@ -16,7 +11,10 @@ import {
 } from "@daangn/react-monochrome-icon";
 
 export interface CalloutProps
-  extends Omit<SeedCallout.RootProps, "children" | "title" | "asChild"> {
+  extends Omit<
+    SeedCallout.RootProps,
+    "children" | "title" | "asChild" | "open" | "defaultOpen" | "onDismiss"
+  > {
   icon?: React.ReactNode;
   title?: React.ReactNode;
   description: React.ReactNode;
@@ -49,7 +47,10 @@ export const Callout = React.forwardRef<
 Callout.displayName = "Callout";
 
 export interface ActionableCalloutProps
-  extends Omit<SeedCallout.RootProps, "children" | "title" | "asChild"> {
+  extends Omit<
+    SeedCallout.RootProps,
+    "children" | "title" | "asChild" | "open" | "defaultOpen" | "onDismiss"
+  > {
   title?: React.ReactNode;
   description: React.ReactNode;
 }
@@ -78,8 +79,7 @@ export const ActionableCallout = React.forwardRef<
 ActionableCallout.displayName = "ActionableCallout";
 
 export interface DismissibleCalloutProps
-  extends Omit<SeedCallout.RootProps, "children" | "title" | "asChild">,
-    UseDismissibleProps {
+  extends Omit<SeedCallout.RootProps, "children" | "title" | "asChild"> {
   title?: React.ReactNode;
   description: React.ReactNode;
   linkLabel?: React.ReactNode;
@@ -106,28 +106,22 @@ export const DismissibleCallout = React.forwardRef<
     },
     ref,
   ) => {
-    const api = useDismissible({ defaultOpen, open, onDismiss });
-
-    if (!api.open) return null;
-
     return (
-      <DismissibleProvider value={api}>
-        <SeedCallout.Root ref={ref} {...otherProps}>
-          <SeedCallout.TextContent>
-            <SeedCallout.Title>{title}</SeedCallout.Title>
-            {description && (
-              <SeedCallout.Description>{description}</SeedCallout.Description>
-            )}
-            {linkLabel && (
-              <SeedCallout.Link {...linkProps}>{linkLabel}</SeedCallout.Link>
-            )}
-          </SeedCallout.TextContent>
-          {/* You may implement your own i18n for dismiss label */}
-          <SeedCallout.DismissButton aria-label="닫기">
-            <SeedCallout.DismissIcon svg={<IconXmarkLine />} />
-          </SeedCallout.DismissButton>
-        </SeedCallout.Root>
-      </DismissibleProvider>
+      <SeedCallout.Root ref={ref} {...otherProps}>
+        <SeedCallout.TextContent>
+          <SeedCallout.Title>{title}</SeedCallout.Title>
+          {description && (
+            <SeedCallout.Description>{description}</SeedCallout.Description>
+          )}
+          {linkLabel && (
+            <SeedCallout.Link {...linkProps}>{linkLabel}</SeedCallout.Link>
+          )}
+        </SeedCallout.TextContent>
+        {/* You may implement your own i18n for dismiss label */}
+        <SeedCallout.DismissButton aria-label="닫기">
+          <SeedCallout.DismissIcon svg={<IconXmarkLine />} />
+        </SeedCallout.DismissButton>
+      </SeedCallout.Root>
     );
   },
 );

diff --git a/docs/registry/ui/inline-banner.tsx b/docs/registry/ui/inline-banner.tsx
@@ -2,12 +2,7 @@
 
 import "@seed-design/stylesheet/inlineBanner.css";
 
-import {
-  InlineBanner as SeedInlineBanner,
-  DismissibleProvider,
-  useDismissible,
-  type UseDismissibleProps,
-} from "@seed-design/react";
+import { InlineBanner as SeedInlineBanner } from "@seed-design/react";
 import * as React from "react";
 
 import {
@@ -16,7 +11,10 @@ import {
 } from "@daangn/react-monochrome-icon";
 
 export interface InlineBannerProps
-  extends Omit<SeedInlineBanner.RootProps, "children" | "title" | "asChild"> {
+  extends Omit<
+    SeedInlineBanner.RootProps,
+    "children" | "title" | "asChild" | "open" | "defaultOpen" | "onDismiss"
+  > {
   icon?: React.ReactNode;
   title?: React.ReactNode;
   description: React.ReactNode;
@@ -46,7 +44,10 @@ export const InlineBanner = React.forwardRef<
 InlineBanner.displayName = "InlineBanner";
 
 export interface LinkInlineBannerProps
-  extends Omit<SeedInlineBanner.RootProps, "children" | "title" | "asChild"> {
+  extends Omit<
+    SeedInlineBanner.RootProps,
+    "children" | "title" | "asChild" | "open" | "defaultOpen" | "onDismiss"
+  > {
   icon?: React.ReactNode;
   title?: React.ReactNode;
   description: React.ReactNode;
@@ -76,7 +77,10 @@ export const LinkInlineBanner = React.forwardRef<
 LinkInlineBanner.displayName = "LinkInlineBanner";
 
 export interface ActionableInlineBannerProps
-  extends Omit<SeedInlineBanner.RootProps, "children" | "title" | "asChild"> {
+  extends Omit<
+    SeedInlineBanner.RootProps,
+    "children" | "title" | "asChild" | "open" | "defaultOpen" | "onDismiss"
+  > {
   icon?: React.ReactNode;
   title?: React.ReactNode;
   description: React.ReactNode;
@@ -110,10 +114,9 @@ ActionableInlineBanner.displayName = "ActionableInlineBanner";
 
 export interface DismissibleInlineBannerProps
   extends Omit<
-      SeedInlineBanner.RootProps,
-      "variant" | "children" | "title" | "asChild"
-    >,
-    UseDismissibleProps {
+    SeedInlineBanner.RootProps,
+    "variant" | "children" | "title" | "asChild"
+  > {
   icon?: React.ReactNode;
   title?: React.ReactNode;
   description: React.ReactNode;
@@ -129,36 +132,23 @@ export interface DismissibleInlineBannerProps
 export const DismissibleInlineBanner = React.forwardRef<
   React.ElementRef<typeof SeedInlineBanner.Root>,
   DismissibleInlineBannerProps
->(
-  (
-    { icon, title, description, defaultOpen, open, onDismiss, ...otherProps },
-    ref,
-  ) => {
-    const api = useDismissible({ defaultOpen, open, onDismiss });
-
-    if (!api.open) return null;
-
-    return (
-      <DismissibleProvider value={api}>
-        <SeedInlineBanner.Root ref={ref} {...otherProps}>
-          <SeedInlineBanner.Content>
-            {icon && <SeedInlineBanner.Icon svg={icon} />}
-            <SeedInlineBanner.TextContent>
-              {title && (
-                <SeedInlineBanner.Title>{title}</SeedInlineBanner.Title>
-              )}
-              <SeedInlineBanner.Description>
-                {description}
-              </SeedInlineBanner.Description>
-            </SeedInlineBanner.TextContent>
-          </SeedInlineBanner.Content>
-          {/* You may implement your own i18n for dismiss label */}
-          <SeedInlineBanner.DismissButton aria-label="닫기">
-            <SeedInlineBanner.DismissIcon svg={<IconXmarkLine />} />
-          </SeedInlineBanner.DismissButton>
-        </SeedInlineBanner.Root>
-      </DismissibleProvider>
-    );
-  },
-);
+>(({ icon, title, description, ...otherProps }, ref) => {
+  return (
+    <SeedInlineBanner.Root ref={ref} {...otherProps}>
+      <SeedInlineBanner.Content>
+        {icon && <SeedInlineBanner.Icon svg={icon} />}
+        <SeedInlineBanner.TextContent>
+          {title && <SeedInlineBanner.Title>{title}</SeedInlineBanner.Title>}
+          <SeedInlineBanner.Description>
+            {description}
+          </SeedInlineBanner.Description>
+        </SeedInlineBanner.TextContent>
+      </SeedInlineBanner.Content>
+      {/* You may implement your own i18n for dismiss label */}
+      <SeedInlineBanner.DismissButton aria-label="닫기">
+        <SeedInlineBanner.DismissIcon svg={<IconXmarkLine />} />
+      </SeedInlineBanner.DismissButton>
+    </SeedInlineBanner.Root>
+  );
+});
 DismissibleInlineBanner.displayName = "DismissibleInlineBanner";
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -27,6 +27,7 @@
   },
   "dependencies": {
     "@radix-ui/react-compose-refs": "^1.1.1",
+    "@radix-ui/react-use-controllable-state": "1.0.1",
     "@radix-ui/react-use-layout-effect": "^1.0.1",
     "@seed-design/dom-utils": "0.0.0-alpha-20241030023710",
     "@seed-design/react-avatar": "0.0.0-alpha-20241030023710",

diff --git a/packages/react/src/components/Callout/Callout.tsx b/packages/react/src/components/Callout/Callout.tsx
@@ -5,16 +5,17 @@ import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import { callout, type CalloutVariantProps } from "@seed-design/recipe/callout";
 import { createStyleContext } from "../../utils/createStyleContext";
 import { Icon, type IconProps } from "../private/Icon";
-import { useDismissibleContext } from "../../hooks/useDismissible";
+import {
+  DismissibleDismissButton,
+  DismissibleRoot,
+  type DismissibleRootProps,
+} from "../private/useDismissible";
 
 const { withContext, withProvider, useClassNames } = createStyleContext(callout);
 
-export interface CalloutRootProps
-  extends CalloutVariantProps,
-    PrimitiveProps,
-    React.HTMLAttributes<HTMLDivElement> {}
+export interface CalloutRootProps extends CalloutVariantProps, DismissibleRootProps {}
 
-export const CalloutRoot = withProvider<HTMLDivElement, CalloutRootProps>(Primitive.div, "root");
+export const CalloutRoot = withProvider<HTMLDivElement, CalloutRootProps>(DismissibleRoot, "root");
 
 export interface CalloutIconProps extends IconProps {}
 
@@ -29,6 +30,7 @@ export const CalloutTextContent = React.forwardRef<HTMLDivElement, CalloutTextCo
     return <Primitive.div ref={ref} {...props} />;
   },
 );
+CalloutTextContent.displayName = "CalloutTextContent";
 
 export interface CalloutTitleProps extends PrimitiveProps, React.HTMLAttributes<HTMLSpanElement> {}
 
@@ -81,30 +83,10 @@ export interface CalloutDismissButtonProps
   extends PrimitiveProps,
     React.ButtonHTMLAttributes<HTMLButtonElement> {}
 
-export const CalloutDismissButton = React.forwardRef<HTMLButtonElement, CalloutDismissButtonProps>(
-  ({ className, onClick, ...otherProps }, ref) => {
-    const classNames = useClassNames();
-    const { handleDismiss } = useDismissibleContext();
-
-    const handleClick: React.MouseEventHandler<HTMLButtonElement> = React.useCallback(
-      (event) => {
-        onClick?.(event);
-        handleDismiss();
-      },
-      [handleDismiss, onClick],
-    );
-
-    return (
-      <Primitive.button
-        ref={ref}
-        className={clsx(classNames.dismissButton, className)}
-        onClick={handleClick}
-        {...otherProps}
-      />
-    );
-  },
+export const CalloutDismissButton = withContext<HTMLButtonElement, CalloutDismissButtonProps>(
+  DismissibleDismissButton,
+  "dismissButton",
 );
-CalloutDismissButton.displayName = "CalloutDismissButton";
 
 export interface CalloutDismissIconProps extends IconProps {}
 

diff --git a/packages/react/src/components/InlineBanner/InlineBanner.tsx b/packages/react/src/components/InlineBanner/InlineBanner.tsx
@@ -5,17 +5,18 @@ import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import { inlineBanner, type InlineBannerVariantProps } from "@seed-design/recipe/inlineBanner";
 import { createStyleContext } from "../../utils/createStyleContext";
 import { Icon, type IconProps } from "../private/Icon";
-import { useDismissibleContext } from "../../hooks/useDismissible";
+import {
+  DismissibleDismissButton,
+  DismissibleRoot,
+  type DismissibleRootProps,
+} from "../private/useDismissible";
 
 const { withContext, withProvider, useClassNames } = createStyleContext(inlineBanner);
 
-export interface InlineBannerRootProps
-  extends InlineBannerVariantProps,
-    PrimitiveProps,
-    React.HTMLAttributes<HTMLDivElement> {}
+export interface InlineBannerRootProps extends InlineBannerVariantProps, DismissibleRootProps {}
 
 export const InlineBannerRoot = withProvider<HTMLDivElement, InlineBannerRootProps>(
-  Primitive.div,
+  DismissibleRoot,
   "root",
 );
 
@@ -42,6 +43,7 @@ export const InlineBannerTextContent = React.forwardRef<
 >((props, ref) => {
   return <Primitive.div ref={ref} {...props} />;
 });
+InlineBannerTextContent.displayName = "InlineBannerTextContent";
 
 export interface InlineBannerTitleProps
   extends PrimitiveProps,
@@ -83,31 +85,10 @@ export interface InlineBannerDismissButtonProps
   extends PrimitiveProps,
     React.ButtonHTMLAttributes<HTMLButtonElement> {}
 
-export const InlineBannerDismissButton = React.forwardRef<
+export const InlineBannerDismissButton = withContext<
   HTMLButtonElement,
   InlineBannerDismissButtonProps
->(({ className, onClick, ...otherProps }, ref) => {
-  const classNames = useClassNames();
-  const { handleDismiss } = useDismissibleContext();
-
-  const handleClick: React.MouseEventHandler<HTMLButtonElement> = React.useCallback(
-    (event) => {
-      onClick?.(event);
-      handleDismiss();
-    },
-    [handleDismiss, onClick],
-  );
-
-  return (
-    <Primitive.button
-      ref={ref}
-      className={clsx(classNames.dismissButton, className)}
-      onClick={handleClick}
-      {...otherProps}
-    />
-  );
-});
-InlineBannerDismissButton.displayName = "InlineBannerDismissButton";
+>(DismissibleDismissButton, "dismissButton");
 
 export interface InlineBannerDismissIconProps extends IconProps {}