@liner-fe/prism 2.9.51 → 2.11.0

package/lib/index.d.ts

@@ -103,7 +103,7 @@ type ANSWER = 'answer';
 type ACCENT = 'accent';
 type NORMAL = 'normal';
 type POST = 'post';
-type AcceptAsHTMLTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'header' | 'footer' | 'p' | 'article' | 'body' | 'main' | 'b' | 'blockquote';
+type AcceptAsHTMLTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'header' | 'footer' | 'p' | 'article' | 'body' | 'main' | 'b' | 'blockquote' | 'span';
 interface WithHTMLAsProps {
     as?: Extract<keyof HTMLElementTagNameMap, AcceptAsHTMLTag>;
 }
@@ -424,6 +424,7 @@ interface ISnackbarBase extends ToastProps {
     title: string;
     description?: string;
     position?: 'left' | 'right';
+    timer?: number;
 }
 interface ButtonType {
     onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;

package/lib/index.js

@@ -2293,6 +2293,7 @@ import { useRecoilValue as useRecoilValue2, useSetRecoilState as useSetRecoilSta
 
 // src/hooks/useSnackbar.ts
 import { atom as atom2, useSetRecoilState as useSetRecoilState3 } from "recoil";
+import { millisecondsInSecond as millisecondsInSecond3 } from "date-fns/constants";
 var snackbarAtom = atom2({
   key: "snackbarAtom",
   default: []
@@ -2302,7 +2303,8 @@ var useSnackbar = /* @__PURE__ */ __name(() => {
   return {
     open: /* @__PURE__ */ __name((info) => {
       const snackbarId = generateRandomId();
-      setSnackbar((prev) => [...prev, { ...info, snackbarId }]);
+      const timer = info.timer ?? (info.button ? millisecondsInSecond3 * 10 : millisecondsInSecond3 + 800);
+      setSnackbar((prev) => [...prev, { ...info, snackbarId, timer }]);
     }, "open")
   };
 }, "useSnackbar");
@@ -2410,6 +2412,8 @@ var SnackbarButton = /* @__PURE__ */ __name(({
 }, "SnackbarButton");
 
 // src/components/Snackbar/index.tsx
+import { useCallback, useEffect as useEffect3, useRef as useRef3, useState as useState5 } from "react";
+import { millisecondsInSecond as millisecondsInSecond4 } from "date-fns/constants";
 import { Fragment as Fragment7, jsx as jsx26, jsxs as jsxs12 } from "react/jsx-runtime";
 import { createElement as createElement3 } from "react";
 var { Provider: Provider2, Root: Root2, Viewport: Viewport2 } = Toast;
@@ -2436,10 +2440,38 @@ var Snackbar = /* @__PURE__ */ __name(() => {
 }, "Snackbar");
 var SingleSnackbar = /* @__PURE__ */ __name((props) => {
   const setSnackbar = useSetRecoilState4(snackbarAtom);
-  const { snackbarId, description, title } = props;
-  const onCloseSnackbar = /* @__PURE__ */ __name(() => {
+  const timerRef = useRef3();
+  const { snackbarId, description, title, timer } = props;
+  const [isOpen, setIsOpen] = useState5(true);
+  const onCloseSnackbar = useCallback(() => {
     setSnackbar((prev) => prev.filter((snackbar) => snackbar.snackbarId !== snackbarId));
-  }, "onCloseSnackbar");
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+  }, [setSnackbar, snackbarId]);
+  useEffect3(() => {
+    if (timer && timer > 0) {
+      const preCloseTimeout = setTimeout(() => {
+        setIsOpen(false);
+      }, timer);
+      timerRef.current = setTimeout(() => {
+        onCloseSnackbar();
+      }, timer + millisecondsInSecond4);
+      return () => {
+        clearTimeout(preCloseTimeout);
+        if (timerRef.current) {
+          clearTimeout(timerRef.current);
+        }
+      };
+    }
+  }, [timer, onCloseSnackbar]);
+  useEffect3(() => {
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, []);
   if (props.kind === "navigation") {
     return /* @__PURE__ */ jsxs12(
       Root2,
@@ -2447,7 +2479,7 @@ var SingleSnackbar = /* @__PURE__ */ __name((props) => {
         onSwipeEnd: onCloseSnackbar,
         className: clsx18(style_module_default15.Root, style_module_default15.NavigationWrapper),
         onClick: props.onClick,
-        open: true,
+        open: isOpen,
         children: [
           /* @__PURE__ */ jsxs12("div", { className: clsx18(style_module_default15.Content, style_module_default15.MarginRight12), children: [
             /* @__PURE__ */ jsx26(SnackbarTitle, { title }),
@@ -2474,7 +2506,7 @@ var SingleSnackbar = /* @__PURE__ */ __name((props) => {
       {
         onSwipeEnd: onCloseSnackbar,
         className: clsx18(style_module_default15.Root, style_module_default15.gap300, style_module_default15.extendedContainer),
-        open: true,
+        open: isOpen,
         children: [
           /* @__PURE__ */ jsxs12("div", { className: style_module_default15.Content, children: [
             /* @__PURE__ */ jsx26(SnackbarTitle, { title }),
@@ -2493,7 +2525,7 @@ var SingleSnackbar = /* @__PURE__ */ __name((props) => {
       }
     );
   }
-  return /* @__PURE__ */ jsxs12(Root2, { onSwipeEnd: onCloseSnackbar, className: clsx18(style_module_default15.Root, style_module_default15.Wrapper), open: true, children: [
+  return /* @__PURE__ */ jsxs12(Root2, { onSwipeEnd: onCloseSnackbar, className: clsx18(style_module_default15.Root, style_module_default15.Wrapper), open: isOpen, children: [
     /* @__PURE__ */ jsxs12("div", { className: style_module_default15.ContentWrapper, children: [
       /* @__PURE__ */ jsx26(SnackbarIcon, { icon: props.icon }),
       /* @__PURE__ */ jsxs12("div", { className: clsx18(style_module_default15.Content, style_module_default15.MarginRight12), children: [
@@ -2980,7 +3012,7 @@ var PrimitiveCoachMark = Object.assign(PrimitiveCoachMarkRoot, {
 });
 
 // src/components/coach-mark/compact/index.tsx
-import { forwardRef as forwardRef18, useState as useState5 } from "react";
+import { forwardRef as forwardRef18, useState as useState6 } from "react";
 
 // src/components/coach-mark/compact/style.module.scss
 var style_module_default19 = {
@@ -3212,7 +3244,7 @@ var CompactCoachMarkRoot = /* @__PURE__ */ __name((props) => {
 }, "CompactCoachMarkRoot");
 var CompactCoachMarkContent = forwardRef18(
   ({ tag, title, level = "brand", className, side = "top", sideOffset = -15, onClose, ...props }, ref) => {
-    const [isHover, setIsHover] = useState5(false);
+    const [isHover, setIsHover] = useState6(false);
     return /* @__PURE__ */ jsxs15(
       PrimitiveCoachMark.Content,
       {
@@ -3280,7 +3312,7 @@ var style_module_default21 = {
 import {
   forwardRef as forwardRef19,
   isValidElement,
-  useEffect as useEffect3
+  useEffect as useEffect4
 } from "react";
 import { IconClose } from "@liner-fe/icon";
 import { cva as cva12 } from "cva";
@@ -3304,7 +3336,7 @@ var coachMarkLevelButtonLevelMap = {
 };
 var CoachMarkRoot = /* @__PURE__ */ __name((props) => {
   const { children } = props;
-  useEffect3(() => {
+  useEffect4(() => {
     if (isValidElement(children) && "image" in children.props) {
       const imageProps = children.props.image;
       if (imageProps?.src) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liner-fe/prism",
-  "version": "2.9.51",
+  "version": "2.11.0",
   "type": "module",
   "sideEffects": false,
   "dependencies": {
@@ -17,10 +17,10 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "recoil": "^0.5.2",
+    "@liner-fe/design-token": "^2.5.35",
     "@liner-fe/design-token-primitive": "^0.2.34",
-    "@liner-fe/icon": "^0.2.42",
-    "@liner-fe/illust": "^0.2.10",
-    "@liner-fe/design-token": "^2.5.35"
+    "@liner-fe/icon": "^0.2.43",
+    "@liner-fe/illust": "^0.2.10"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.5.0",