maru_design2 2.13.0 → 2.14.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## [2.14.0](https://github.com/42maru-ai/maru-design2/compare/v2.13.0...v2.14.0) (2024-08-06)
+
+
+### Features
+
+* :sparkles: Toast - UPDATE details ([9cf90fa](https://github.com/42maru-ai/maru-design2/commit/9cf90fafcbbc2b264b7538ce2eaaacd09f157a02))
+
+
+### Bug Fixes
+
+* :adhesive_bandage: Toast - UPDATE details tag ([53e492f](https://github.com/42maru-ai/maru-design2/commit/53e492fb76f0faf010e5d0cde39da3d0480f6eee))
+* :bug: Input - UPDATE input clear default state [#244](https://github.com/42maru-ai/maru-design2/issues/244) ([09c7f55](https://github.com/42maru-ai/maru-design2/commit/09c7f55bd691ff134086bfc83ae19596ea6fb1e1))
+* :fire: Toast - REMOVE unused code ([5bec3f7](https://github.com/42maru-ai/maru-design2/commit/5bec3f71fd40676a14f532bcf57966949c32e2d9))
+* :label: Toast - UPDATE IToastDetailItem ([9b42067](https://github.com/42maru-ai/maru-design2/commit/9b4206729488745f5240b1e3663ca0e889d4fb8e))
+* :memo: TOAST - UPDATE storybook ([1456487](https://github.com/42maru-ai/maru-design2/commit/1456487adbf4fcf7b37fe3f201604223be4ac3ba))
+
 ## [2.13.0](https://github.com/42maru-ai/maru-design2/compare/v2.12.5...v2.13.0) (2024-07-23)
 
 

package/dist/components/molecules/toast/Details.d.ts

@@ -1,7 +1,6 @@
+import { IToastDetailItem } from './types';
 interface DetailsProps {
-    details: string[] | undefined;
-    isDetailsOpen: boolean;
-    handleToggleDetails: () => void;
+    details: IToastDetailItem[] | undefined;
 }
-export default function Details({ details, isDetailsOpen, handleToggleDetails, }: DetailsProps): import("react/jsx-runtime").JSX.Element | null;
+export default function Details({ details }: DetailsProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/molecules/toast/Toast.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
+import { IToastDetailItem } from './types';
 import { TToastVariant } from '../../../enums/variant';
 export interface IToast {
     variant: TToastVariant;
     content: string;
     description?: React.ReactNode;
-    details?: string[];
+    details?: IToastDetailItem[];
     disableAutoOff?: boolean;
 }
 export interface ToastProps {

package/dist/components/molecules/toast/ToastStyle.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { IToastDetailItem } from './types';
 import { TToastVariant } from '../../../enums/variant';
 import './toast.scss';
 export interface ToastStyleProps {
@@ -14,7 +15,7 @@ export interface ToastStyleProps {
     /**
      * details, summary 태그를 활용하여 노출할 내용
      */
-    details?: string[];
+    details?: IToastDetailItem[];
     onClose: () => void;
 }
 export declare function ToastStyle({ variant, content, description, details, onClose, }: ToastStyleProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/toast/types.d.ts

@@ -0,0 +1,4 @@
+export interface IToastDetailItem {
+    summary: string;
+    subDetails: string[];
+}

package/dist/index.js

@@ -4141,6 +4141,12 @@ var Input = /*#__PURE__*/forwardRef(function (_a, inputRef) {
       setShowClearButton(false);
     };
   }, []);
+  // 초기화 버튼이 있었다가 렌더링에 의해 value에 빈값이 들어오는 경우 초기화 버튼이 그대로 있는 이슈 있었음 #244
+  useEffect(function () {
+    if (!props.value) {
+      setShowClearButton(false);
+    }
+  }, [props.value]);
   useEffect(function () {
     if (props.defaultValue) {
       setShowClearButton(!hiddenClearButton);
@@ -24662,52 +24668,54 @@ function Table(_a) {
 }
 
 function Details(_a) {
-  var details = _a.details,
-    isDetailsOpen = _a.isDetailsOpen,
-    handleToggleDetails = _a.handleToggleDetails;
-  if (!details) return null;
-  // 오류가 난 파일이 하나인 경우
-  if (details.length <= 1) {
-    return jsx("details", {
-      children: jsx("summary", {
-        children: jsx("p", {
-          children: details[0]
-        })
-      })
+  var details = _a.details;
+  var _b = useState(new Array(details === null || details === void 0 ? void 0 : details.length).fill(false)),
+    openStates = _b[0],
+    setOpenStates = _b[1];
+  var toggleDetail = function toggleDetail(index) {
+    setOpenStates(function (prev) {
+      var newState = __spreadArray([], prev, true);
+      newState[index] = !newState[index];
+      return newState;
     });
-  }
-  // 오류가 난 파일이 두 개 이상일 경우
-  return jsxs("details", {
-    children: [jsx("summary", __assign({
-      onClick: handleToggleDetails
-    }, {
-      children: jsxs("div", __assign({
-        className: "maru-toast-details-summary"
+  };
+  if (!details || details.length === 0) return null;
+  return jsx("div", __assign({
+    className: "maru-toast-details"
+  }, {
+    children: details.map(function (item, index) {
+      return jsxs("details", __assign({
+        onToggle: function onToggle() {
+          return toggleDetail(index);
+        }
       }, {
-        children: [jsx("p", {
-          children: details[0]
-        }), jsx("span", __assign({
-          className: "maru-toast-details-summary-icon"
-        }, {
-          children: jsx(Icon, {
-            name: isDetailsOpen ? ICONS.Up_s16 : ICONS.Down_s16
+        children: [jsx("summary", {
+          children: jsxs("div", __assign({
+            className: "maru-toast-details-summary"
+          }, {
+            children: [jsx("p", {
+              children: item.summary
+            }), jsx("span", __assign({
+              className: "maru-toast-details-summary-icon"
+            }, {
+              children: jsx(Icon, {
+                name: openStates[index] ? ICONS.Up_s16 : ICONS.Down_s16
+              })
+            }))]
+          }))
+        }), jsx("ul", {
+          children: item.subDetails.map(function (detail, idx) {
+            return jsx("li", {
+              children: detail
+            }, idx);
           })
-        }))]
-      }))
-    })), jsx("ul", {
-      children: details.slice(1).map(function (item, idx) {
-        return (
-          // eslint-disable-next-line react/no-array-index-key
-          jsx("li", {
-            children: item
-          }, idx)
-        );
-      })
-    })]
-  });
+        })]
+      }), index);
+    })
+  }));
 }
 
-var css_248z = ".maru-toast-style {\n  padding: 10px 10px 10px 12px;\n  border-radius: 6px;\n  background-color: #fff;\n  box-shadow: 0 0 6px 0 #bdbdbd;\n}\n.maru-toast-style div:first-child {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-toast-style .maru-toast-style-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  margin-right: 8px;\n  width: 24px;\n  height: 24px;\n}\n.maru-toast-style .maru-toast-style-content {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n  color: #5c5c5c;\n  margin-right: 16px;\n}\n.maru-toast-style details {\n  background-color: #fafafa;\n  padding: 10px 10px 10px 14px;\n  margin-top: 8px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n  color: #5c5c5c;\n}\n.maru-toast-style details summary {\n  display: flex;\n  justify-content: flex-start;\n  align-items: flex-start;\n  flex-direction: row;\n  white-space: pre-wrap;\n}\n.maru-toast-style details summary > div:first-child {\n  position: relative;\n}\n.maru-toast-style details summary .maru-toast-details-summary {\n  cursor: pointer;\n}\n.maru-toast-style details summary .maru-toast-details-summary > p {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 600;\n}\n.maru-toast-style details summary .maru-toast-details-summary-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  position: absolute;\n  right: -25px;\n  bottom: 3px;\n}\n\n.maru-toast {\n  margin-top: 24px;\n  position: relative;\n  opacity: 0;\n  transform: translateY(100%);\n  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease-out;\n}\n.maru-toast.entered {\n  transform: translateY(0);\n  opacity: 1;\n}\n.maru-toast.fade-out {\n  opacity: 0;\n  transform: translateX(100%);\n}\n\n.maru-toaster {\n  position: fixed;\n  z-index: 6007;\n  right: 24px;\n  bottom: 24px;\n  transition: transform 0.5s ease-out;\n  display: flex;\n  flex-direction: column-reverse;\n  align-items: flex-end;\n}";
+var css_248z = ".maru-toast-style {\n  padding: 10px 10px 10px 12px;\n  border-radius: 6px;\n  background-color: #fff;\n  box-shadow: 0 0 6px 0 #bdbdbd;\n}\n.maru-toast-style div:first-child {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-toast-style .maru-toast-style-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  margin-right: 8px;\n  width: 24px;\n  height: 24px;\n}\n.maru-toast-style .maru-toast-style-content {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n  color: #5c5c5c;\n  margin-right: 16px;\n}\n.maru-toast-style .maru-toast-details {\n  background-color: #fafafa;\n  padding: 10px 10px 10px 14px;\n  margin-top: 8px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n  color: #5c5c5c;\n}\n.maru-toast-style .maru-toast-details summary {\n  margin-top: 6px;\n  display: flex;\n  justify-content: flex-start;\n  align-items: flex-start;\n  flex-direction: row;\n  white-space: pre-wrap;\n}\n.maru-toast-style .maru-toast-details summary > div:first-child {\n  position: relative;\n}\n.maru-toast-style .maru-toast-details summary .maru-toast-details-summary {\n  cursor: pointer;\n}\n.maru-toast-style .maru-toast-details summary .maru-toast-details-summary > p {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 600;\n}\n.maru-toast-style .maru-toast-details summary .maru-toast-details-summary-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  position: absolute;\n  right: -25px;\n  bottom: 3px;\n}\n.maru-toast-style .maru-toast-details summary:first-child {\n  margin: 0;\n}\n.maru-toast-style .maru-toast-details li {\n  margin-left: 10px;\n}\n\n.maru-toast {\n  margin-top: 24px;\n  position: relative;\n  opacity: 0;\n  transform: translateY(100%);\n  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease-out;\n}\n.maru-toast.entered {\n  transform: translateY(0);\n  opacity: 1;\n}\n.maru-toast.fade-out {\n  opacity: 0;\n  transform: translateX(100%);\n}\n\n.maru-toaster {\n  position: fixed;\n  z-index: 6007;\n  right: 24px;\n  bottom: 24px;\n  transition: transform 0.5s ease-out;\n  display: flex;\n  flex-direction: column-reverse;\n  align-items: flex-end;\n}";
 styleInject(css_248z);
 
 function ToastStyle(_a) {
@@ -24717,17 +24725,11 @@ function ToastStyle(_a) {
     description = _a.description,
     details = _a.details,
     onClose = _a.onClose;
-  var _c = useState(false),
-    isDetailsOpen = _c[0],
-    setIsDetailsOpen = _c[1];
   var iconName = {
     success: ICONS.CheckCircleBg_s24,
     warning: ICONS.AlertTriangleBg_s24,
     danger: ICONS.XDiamondBg_s2415
   };
-  var handleDetailsToggle = function handleDetailsToggle() {
-    setIsDetailsOpen(!isDetailsOpen);
-  };
   var handleClose = function handleClose() {
     onClose();
   };
@@ -24757,9 +24759,7 @@ function ToastStyle(_a) {
         onClick: handleClose
       })]
     }), description, jsx(Details, {
-      details: details,
-      isDetailsOpen: isDetailsOpen,
-      handleToggleDetails: handleDetailsToggle
+      details: details
     })]
   }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "maru_design2",
-  "version": "2.13.0",
+  "version": "2.14.0",
   "main": "./dist/index.js",
   "author": "zena-42maru",
   "license": "MIT",