@shoplflow/base 0.32.9 → 0.32.11

package/dist/index.cjs

@@ -652,6 +652,7 @@ var StyledText = styled6__default.default.span`
   ${({ lineClamp }) => lineClamp && setEllipsis(lineClamp)};
   text-align: ${({ textAlign }) => textAlign && textAlign};
   white-space: ${({ whiteSpace }) => whiteSpace && whiteSpace};
+  text-overflow: ${({ textOverflow }) => textOverflow && textOverflow};
   ${({ textDecorations }) => textDecorations && react$1.css`
       text-decoration: ${textDecorations};
     `};
@@ -671,6 +672,7 @@ var Text = React3.forwardRef(
       color = "neutral700",
       display = "inline-block",
       textAlign = "start",
+      textOverflow,
       className,
       as
     } = _b, rest = __objRest(_b, [
@@ -680,6 +682,7 @@ var Text = React3.forwardRef(
       "color",
       "display",
       "textAlign",
+      "textOverflow",
       "className",
       "as"
     ]);
@@ -692,6 +695,7 @@ var Text = React3.forwardRef(
         color,
         display,
         textAlign,
+        textOverflow,
         as
       }, rest), {
         "data-shoplflow": "Text",
@@ -4805,6 +4809,7 @@ var OptionListItem = styled6__default.default.li`
   }
 `;
 var YearSelect = ({ optionList, className, parentClassName, activeValue, maxHeight, onClick }) => {
+  var _a;
   const optionListRef = React3.useRef([]);
   const parentRef = React3.useRef(null);
   const [isAllRefMounted, setIsAllRefMounted] = React3.useState(false);
@@ -4814,20 +4819,20 @@ var YearSelect = ({ optionList, className, parentClassName, activeValue, maxHeig
   React3.useEffect(() => {
     setIsOpened(isOpened);
   }, []);
-  const height = Math.min(optionList.length * 32, Number(parseInt(maxHeight || "0")));
+  const height = Math.min(((_a = optionList == null ? void 0 : optionList.length) != null ? _a : 0) * 32, Number(parseInt(maxHeight || "0")));
   React3.useEffect(() => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a2, _b, _c, _d, _e, _f;
     if (!isAllRefMounted || !activeValue || !maxHeight) {
       return;
     }
     const selectedOptionIndex = optionList.findIndex((option) => (option == null ? void 0 : option.value) === activeValue);
-    const heightPerOption = (_b = (_a = optionListRef.current[selectedOptionIndex]) == null ? void 0 : _a.offsetHeight) != null ? _b : 0;
+    const heightPerOption = (_b = (_a2 = optionListRef.current[selectedOptionIndex]) == null ? void 0 : _a2.offsetHeight) != null ? _b : 0;
     const parentHeight = (_e = (_d = (_c = optionListRef.current[selectedOptionIndex]) == null ? void 0 : _c.closest("ul")) == null ? void 0 : _d.clientHeight) != null ? _e : 0;
     if (heightPerOption * (selectedOptionIndex + 1) >= parentHeight) {
       (_f = parentRef.current) == null ? void 0 : _f.scrollTo({ top: heightPerOption * selectedOptionIndex });
     }
   }, [isAllRefMounted, activeValue, maxHeight]);
-  return /* @__PURE__ */ jsxRuntime.jsx(Container5, { className: `${parentClassName} ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx(OptionList, { ref: parentRef, maxHeight, style: { height }, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(Container5, { className: `${parentClassName} ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx(OptionList, { ref: parentRef, maxHeight, style: { height }, className, children: /* @__PURE__ */ jsxRuntime.jsx(
     SimpleBarReact__default.default,
     {
       style: {
@@ -4835,6 +4840,7 @@ var YearSelect = ({ optionList, className, parentClassName, activeValue, maxHeig
         height
       },
       placeholder: void 0,
+      className,
       children: optionList == null ? void 0 : optionList.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(
         OptionListItem,
         {
@@ -4847,6 +4853,7 @@ var YearSelect = ({ optionList, className, parentClassName, activeValue, maxHeig
             optionListRef.current[index] = el;
             index + 1 === optionList.length && setIsAllRefMounted(true);
           },
+          className,
           children: option.label
         },
         option.value
@@ -4863,7 +4870,8 @@ var YearStepper = ({
   increaseYear,
   changeYear,
   minDate,
-  maxDate
+  maxDate,
+  className
 }) => {
   const [isOpen, setIsOpen] = utils.useOutsideClick({
     selector: ".react-datepicker-year-stepper"
@@ -4874,7 +4882,7 @@ var YearStepper = ({
     () => Array.from({ length: endYear - startYear + 1 }).fill(0).map((_, index) => ({ value: startYear + index, label: `${startYear + index}` })),
     [startYear, endYear]
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs(Header, { className: "calendarHeader", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Header, { className: `calendarHeader ${className}`, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       exports.IconButton,
       {
@@ -4889,7 +4897,7 @@ var YearStepper = ({
       /* @__PURE__ */ jsxRuntime.jsx(exports.Popper.Trigger, { isOpen, children: /* @__PURE__ */ jsxRuntime.jsx(
         Month,
         {
-          className: "react-datepicker-year-stepper",
+          className: `react-datepicker-year-stepper ${className}`,
           onClick: (event) => {
             event.stopPropagation();
             setIsOpen((prev) => !prev);
@@ -4900,13 +4908,13 @@ var YearStepper = ({
       /* @__PURE__ */ jsxRuntime.jsx(exports.Popper.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
         YearSelect_default,
         {
-          className: "react-datepicker-year-stepper",
+          className: `react-datepicker-year-stepper ${className}`,
           optionList: OptionList2,
           onClick: ({ value }) => {
             changeYear(value);
             setIsOpen(false);
           },
-          parentClassName: "react-datepicker-year-stepper",
+          parentClassName: `react-datepicker-year-stepper ${className}`,
           maxHeight: `200px`,
           activeValue: date.getFullYear()
         }
@@ -4937,27 +4945,28 @@ var MonthStepper = ({
   locale: locale$1,
   sizeVar,
   prevMonthButtonDisabled,
-  nextMonthButtonDisabled
+  nextMonthButtonDisabled,
+  className
 }) => {
   const [isOpen, setIsOpen] = utils.useOutsideClick({
     selector: ".react-datepicker__header"
   });
-  return /* @__PURE__ */ jsxRuntime.jsxs(Header, { className: "calendarHeader", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Header, { className: `calendarHeader ${className}`, children: [
     /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { styleVar: "GHOST", sizeVar: "S", onClick: decreaseMonth, disabled: prevMonthButtonDisabled, children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: ShoplAssets.LeftArrowIcon, sizeVar: "XS", color: prevMonthButtonDisabled ? "neutral200" : "neutral700" }) }),
     /* @__PURE__ */ jsxRuntime.jsx(
       Month,
       {
-        className: "react-datepicker__header",
+        className: `react-datepicker__header ${className}`,
         onClick: () => {
           setIsOpen((prev) => !prev);
         },
         children: /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: sizeVar === "M" ? "title1_700" : "body1_700", children: `${date.getFullYear()}.${monthDate.getMonth() + 1}` })
       }
     ),
-    isOpen && /* @__PURE__ */ jsxRuntime.jsx(DatePickerWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "datepicker-header-wrapper", children: /* @__PURE__ */ jsxRuntime.jsx(
+    isOpen && /* @__PURE__ */ jsxRuntime.jsx(DatePickerWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `datepicker-header-wrapper ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx(
       DatePicker2__default.default,
       {
-        className: "datepicker-custom-month",
+        className: `datepicker-custom-month ${className}`,
         onChange: (date2) => {
           if (!date2) {
             return;
@@ -4974,7 +4983,7 @@ var MonthStepper = ({
         maxDate,
         locale: locale$1 != null ? locale$1 : locale.ko,
         showMonthYearPicker: true,
-        renderCustomHeader: (props) => /* @__PURE__ */ jsxRuntime.jsx(YearStepper_default, __spreadProps(__spreadValues({}, props), { minDate, maxDate })),
+        renderCustomHeader: (props) => /* @__PURE__ */ jsxRuntime.jsx(YearStepper_default, __spreadProps(__spreadValues({}, props), { minDate, maxDate, className })),
         showFourColumnMonthYearPicker: true
       }
     ) }) }),
@@ -4990,7 +4999,8 @@ var DayDatepicker = (_a) => {
     maxDate,
     calendarType,
     locale,
-    fixedHeight = true
+    fixedHeight = true,
+    className
   } = _b, rest = __objRest(_b, [
     "sizeVar",
     "children",
@@ -4998,18 +5008,30 @@ var DayDatepicker = (_a) => {
     "maxDate",
     "calendarType",
     "locale",
-    "fixedHeight"
+    "fixedHeight",
+    "className"
   ]);
   const Wrapper2 = sizeVar === "S" ? SmallStyledDayDatepickerWrapper : StyledDayDatepicker;
   if (calendarType.type === "range") {
-    return /* @__PURE__ */ jsxRuntime.jsx(Wrapper2, { "data-shoplflow": "DayDatepicker", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dayDatepickerArea", children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(Wrapper2, { "data-shoplflow": "DayDatepicker", className, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${"dayDatepickerArea"}${className ? ` ${className}` : ""}`, children: /* @__PURE__ */ jsxRuntime.jsx(
       DatePicker2__default.default,
       __spreadProps(__spreadValues({
         inline: true,
-        renderCustomHeader: (props) => /* @__PURE__ */ jsxRuntime.jsx(MonthStepper_default, __spreadProps(__spreadValues({ sizeVar: sizeVar || "M" }, props), { minDate, maxDate, locale })),
+        renderCustomHeader: (props) => /* @__PURE__ */ jsxRuntime.jsx(
+          MonthStepper_default,
+          __spreadProps(__spreadValues({
+            sizeVar: sizeVar || "M"
+          }, props), {
+            minDate,
+            maxDate,
+            locale,
+            className
+          })
+        ),
         renderDayContents: (dayOfMonth) => {
           return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "each-day", children: dayOfMonth });
-        }
+        },
+        className
       }, rest), {
         minDate,
         maxDate,
@@ -5023,11 +5045,21 @@ var DayDatepicker = (_a) => {
     ) }) });
   }
   if (calendarType.type === "multiple") {
-    return /* @__PURE__ */ jsxRuntime.jsx(Wrapper2, { "data-shoplflow": "DayDatepicker", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dayDatepickerArea", children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(Wrapper2, { "data-shoplflow": "DayDatepicker", className, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${"dayDatepickerArea"}${className ? ` ${className}` : ""}`, children: /* @__PURE__ */ jsxRuntime.jsx(
       DatePicker2__default.default,
       __spreadProps(__spreadValues({
         inline: true,
-        renderCustomHeader: (props) => /* @__PURE__ */ jsxRuntime.jsx(MonthStepper_default, __spreadProps(__spreadValues({ sizeVar: sizeVar || "M" }, props), { minDate, maxDate, locale })),
+        renderCustomHeader: (props) => /* @__PURE__ */ jsxRuntime.jsx(
+          MonthStepper_default,
+          __spreadProps(__spreadValues({
+            sizeVar: sizeVar || "M"
+          }, props), {
+            minDate,
+            maxDate,
+            locale,
+            className
+          })
+        ),
         renderDayContents: (dayOfMonth) => {
           return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "each-day", children: dayOfMonth });
         }
@@ -5042,11 +5074,21 @@ var DayDatepicker = (_a) => {
       })
     ) }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(Wrapper2, { "data-shoplflow": "DayDatepicker", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dayDatepickerArea", children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(Wrapper2, { "data-shoplflow": "DayDatepicker", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${"dayDatepickerArea"}${className ? ` ${className}` : ""}`, children: /* @__PURE__ */ jsxRuntime.jsx(
     DatePicker2__default.default,
     __spreadProps(__spreadValues({
       inline: true,
-      renderCustomHeader: (props) => /* @__PURE__ */ jsxRuntime.jsx(MonthStepper_default, __spreadProps(__spreadValues({ sizeVar: sizeVar || "M" }, props), { minDate, maxDate, locale })),
+      renderCustomHeader: (props) => /* @__PURE__ */ jsxRuntime.jsx(
+        MonthStepper_default,
+        __spreadProps(__spreadValues({
+          sizeVar: sizeVar || "M"
+        }, props), {
+          minDate,
+          maxDate,
+          locale,
+          className
+        })
+      ),
       renderDayContents: (dayOfMonth) => {
         return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "each-day", children: dayOfMonth });
       }
@@ -5736,57 +5778,6 @@ var WeekDatepicker = ({
   ] });
 };
 exports.WeekDatepicker = WeekDatepicker;
-var Title = ({
-  title,
-  titleTypography = "body1_700",
-  titleColor = "neutral700",
-  total,
-  description,
-  tooltipPlacement = "right",
-  isRequired,
-  isShowHelpIcon,
-  tooltipOffsetValue,
-  tooltipMessage = "",
-  rightSource
-}) => {
-  const domain = exports.getDomain();
-  const descriptionTypography = domain === "hada" ? "body2_400" : "body1_400";
-  return /* @__PURE__ */ jsxRuntime.jsxs(exports.Stack.Vertical, { width: "100%", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      exports.StackContainer,
-      {
-        direction: "row",
-        align: "center",
-        width: "100%",
-        minHeight: "40px",
-        height: "auto",
-        justify: "space-between",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(exports.Stack.Horizontal, { align: "center", spacing: "spacing04", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(exports.Text, { color: titleColor, typography: titleTypography, wordBreak: "break-all", children: [
-              title,
-              " ",
-              isRequired && /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "body1_700", color: "red300", children: "*" })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { color: "primary300", typography: "body1_700", children: total }),
-            isShowHelpIcon && /* @__PURE__ */ jsxRuntime.jsx(
-              exports.Tooltip,
-              {
-                placement: tooltipPlacement,
-                offset: tooltipOffsetValue,
-                trigger: /* @__PURE__ */ jsxRuntime.jsx(ShoplAssets.HelpIcon, { width: 20, height: 20 }),
-                popper: /* @__PURE__ */ jsxRuntime.jsx(exports.Tooltip.Content, { content: tooltipMessage })
-              }
-            )
-          ] }),
-          rightSource && rightSource
-        ]
-      }
-    ),
-    description && /* @__PURE__ */ jsxRuntime.jsx(exports.StackContainer, { minHeight: "30px", height: "auto", children: /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: descriptionTypography, color: "neutral500", wordBreak: "break-all", children: description }) })
-  ] });
-};
-exports.Title = Title;
 var SpaceMarginWrapper = styled6__default.default(framerMotion.motion.div)`
   position: relative;
   display: flex;