@shoplflow/base 0.46.9 → 0.46.10

package/dist/index.cjs

@@ -3158,33 +3158,31 @@ var getDropdownFontSizeBySizeVar = (size2) => {
     case "M":
       return "body1_400";
     case "S":
-      return "body2_400";
+      return "body1_400";
     default:
       return "body1_400";
   }
 };
 var getDropdownStyleBySizeVar = (size2) => {
   switch (size2) {
-    case "L":
+    case "S":
       return react$1.css`
-        background-color: transparent;
-        padding: 8px 4px 8px 12px;
+        padding: 0 8px;
       `;
     case "M":
       return react$1.css`
-        background-color: ${exports.colorTokens.neutral0};
-        gap: 4px;
-        padding: 4px 4px 4px 12px;
+        padding: 0 12px;
       `;
-    case "S":
+    case "L":
       return react$1.css`
-        background-color: ${exports.colorTokens.neutral0};
-        padding: 4px 4px 4px 8px;
-        gap: 4px;
+        background-color: transparent;
+        padding-left: 12px;
+        padding-right: 6px;
       `;
     default:
       return react$1.css`
-        padding: 4px 4px 4px 12px;
+        background-color: ${exports.colorTokens.neutral0};
+        padding: 0 8px;
       `;
   }
 };
@@ -3193,28 +3191,12 @@ var getDisabledStyle2 = (disabled) => {
     return react$1.css`
       cursor: not-allowed;
       background: ${exports.colorTokens.neutral100};
+      svg > path {
+        fill: ${exports.colorTokens.neutral400} !important;
+      }
     `;
   }
 };
-var getDropdownIconSizeBySizeVar = (size2) => {
-  switch (size2) {
-    case "S":
-    case "L":
-      return react$1.css`
-        height: 24px;
-        width: 24px;
-        min-width: 24px;
-        min-height: 24px;
-      `;
-    default:
-      return react$1.css`
-        height: 32px;
-        width: 32px;
-        min-width: 32px;
-        min-height: 32px;
-      `;
-  }
-};
 var getBorderColorByStatus = ({ isFocused, isError, isHovered, disabled, sizeVar }) => {
   if (!disabled) {
     if (isError) {
@@ -3259,7 +3241,17 @@ var getStyleByType = ({
     height: ${height || "initial"};
   `;
 };
-var StyledDropdownButtonWrapper = styled6__default.default.label`
+var getClearIconHoverStyle = (hasValue) => {
+  if (!hasValue) {
+    return;
+  }
+  return react$1.css`
+    &:hover .dropdown-clear-icon {
+      display: flex;
+    }
+  `;
+};
+var StyledDropdownButtonWrapper = styled6__default.default.div`
   position: relative;
   display: flex;
   align-items: center;
@@ -3277,33 +3269,63 @@ var StyledDropdownButtonWrapper = styled6__default.default.label`
   width
 })};
   ${(props) => getButtonWrapperStyleBySizeVar(props)};
-
   ${({ disabled }) => getDisabledStyle2(disabled)};
+
+  ${({ hasValue }) => getClearIconHoverStyle(hasValue)}
 `;
 var StyledDropdownButton = styled6__default.default.button`
+  position: relative;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   height: 100%;
-
   cursor: pointer;
+
   ${({ sizeVar }) => sizeVar && getDropdownStyleBySizeVar(sizeVar)};
   ${({ disabled }) => getDisabledStyle2(disabled)};
+
+  .dropdown-clear-icon {
+    display: none;
+    position: absolute;
+    right: 0;
+  }
 `;
-var DropdownButtonIcon = styled6__default.default(framerMotion.motion.div)`
+var DropdownButtonIcon = styled6__default.default.div`
   display: flex;
   align-items: center;
-  justify-content: center;
   flex-shrink: 0;
+  min-width: 22px;
+  height: 100%;
 
-  ${({ sizeVar }) => sizeVar && getDropdownIconSizeBySizeVar(sizeVar)};
   ${({ disabled }) => getDisabledStyle2(disabled)};
 `;
 var DropdownTriggerButton = React3.forwardRef(
   (_a, ref) => {
-    var _b = _a, { width = "100%", onClick, sizeVar = "M", isError, placeholder, value, disabled, leftSource } = _b, rest = __objRest(_b, ["width", "onClick", "sizeVar", "isError", "placeholder", "value", "disabled", "leftSource"]);
+    var _b = _a, {
+      width = "100%",
+      onClick,
+      sizeVar = "M",
+      isError,
+      placeholder,
+      value,
+      disabled,
+      leftSource,
+      rightSource,
+      onClear
+    } = _b, rest = __objRest(_b, [
+      "width",
+      "onClick",
+      "sizeVar",
+      "isError",
+      "placeholder",
+      "value",
+      "disabled",
+      "leftSource",
+      "rightSource",
+      "onClear"
+    ]);
     const { isOpen, setIsOpen } = useDropdown();
     const [isHovered, setIsHovered] = React3.useState(false);
     const handleOnClick = (e) => {
@@ -3318,6 +3340,10 @@ var DropdownTriggerButton = React3.forwardRef(
     const handleOnMouseLeave = () => {
       setIsHovered(false);
     };
+    const handleOnClear = (e) => {
+      e.stopPropagation();
+      onClear && onClear();
+    };
     const getTextColor = ({ value: value2, disabled: disabled2 }) => {
       if (disabled2) {
         return "neutral350";
@@ -3328,7 +3354,8 @@ var DropdownTriggerButton = React3.forwardRef(
       return "neutral700";
     };
     const LeftSourceClone = leftSource ? React3.cloneElement(leftSource, __spreadProps(__spreadValues({}, leftSource.props), { disabled })) : leftSource;
-    return /* @__PURE__ */ jsxRuntime.jsx(
+    const RightSourceClone = rightSource ? React3.cloneElement(rightSource, __spreadProps(__spreadValues({}, rightSource.props), { disabled })) : rightSource;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
       StyledDropdownButtonWrapper,
       {
         onMouseEnter: handleOnMouseEnter,
@@ -3340,24 +3367,39 @@ var DropdownTriggerButton = React3.forwardRef(
         isError,
         sizeVar,
         height: getDropdownHeightBySizeVar(sizeVar),
-        children: /* @__PURE__ */ jsxRuntime.jsxs(StyledDropdownButton, __spreadProps(__spreadValues({ ref, onClick: handleOnClick, disabled }, rest), { sizeVar, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(exports.Stack.Horizontal, { width: "100%", spacing: sizeVar === "L" ? "spacing04" : void 0, align: "center", children: [
-            LeftSourceClone && LeftSourceClone,
-            value || /* @__PURE__ */ jsxRuntime.jsx(
-              exports.Text,
-              {
-                typography: getDropdownFontSizeBySizeVar(sizeVar),
-                color: getTextColor({ value, disabled }),
-                textOverflow: "ellipsis",
-                lineClamp: 1,
-                children: placeholder
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            DropdownButtonIcon,
-            {
+        hasValue: Boolean(value),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            StyledDropdownButton,
+            __spreadProps(__spreadValues({
+              ref,
+              onClick: handleOnClick,
+              disabled
+            }, rest), {
               sizeVar,
+              "data-shoplflow": "Dropdown-Content-Area",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(exports.Stack.Horizontal, { width: "100%", spacing: "spacing04", align: "center", children: [
+                  LeftSourceClone && LeftSourceClone,
+                  value || /* @__PURE__ */ jsxRuntime.jsx(
+                    exports.Text,
+                    {
+                      typography: getDropdownFontSizeBySizeVar(sizeVar),
+                      color: getTextColor({ value, disabled }),
+                      textOverflow: "ellipsis",
+                      lineClamp: 1,
+                      children: placeholder
+                    }
+                  )
+                ] }),
+                onClear && sizeVar !== "L" && /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { sizeVar, styleVar: "GHOST", onClick: handleOnClear, className: "dropdown-clear-icon", children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: ShoplAssets.DeleteIcon, color: "neutral350", sizeVar: "S" }) })
+              ]
+            })
+          ),
+          RightSourceClone && /* @__PURE__ */ jsxRuntime.jsx(exports.StackContainer, { padding: "0 6px 0 0", children: RightSourceClone }),
+          /* @__PURE__ */ jsxRuntime.jsx(DropdownButtonIcon, { sizeVar, "data-shoplflow": "Dropdown-Button-Icon-Area", children: /* @__PURE__ */ jsxRuntime.jsx(
+            framerMotion.motion.div,
+            {
               animate: {
                 rotate: isOpen ? 180 : 0
               },
@@ -3373,8 +3415,8 @@ var DropdownTriggerButton = React3.forwardRef(
                 }
               )
             }
-          )
-        ] }))
+          ) })
+        ]
       }
     );
   }

package/dist/index.d.cts

@@ -1022,7 +1022,7 @@ declare const dropdownSizeVariants: {
     readonly L: "L";
 };
 type DropdownSizeVariantType = $Values<typeof dropdownSizeVariants>;
-interface DropdownTriggerButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value'>, DisableProps, LeftElementProps, SizeVariantProps<DropdownSizeVariantType> {
+interface DropdownTriggerButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value'>, DisableProps, LeftAndRightElementProps, SizeVariantProps<DropdownSizeVariantType> {
     /**
      * placeholder를 설정합니다.
      */
@@ -1033,6 +1033,7 @@ interface DropdownTriggerButtonProps extends Omit<ButtonHTMLAttributes<HTMLButto
      * width를 설정합니다.
      */
     width?: string;
+    onClear?: () => void;
 }
 
 declare const Dropdown: {

package/dist/index.d.ts

@@ -1022,7 +1022,7 @@ declare const dropdownSizeVariants: {
     readonly L: "L";
 };
 type DropdownSizeVariantType = $Values<typeof dropdownSizeVariants>;
-interface DropdownTriggerButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value'>, DisableProps, LeftElementProps, SizeVariantProps<DropdownSizeVariantType> {
+interface DropdownTriggerButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value'>, DisableProps, LeftAndRightElementProps, SizeVariantProps<DropdownSizeVariantType> {
     /**
      * placeholder를 설정합니다.
      */
@@ -1033,6 +1033,7 @@ interface DropdownTriggerButtonProps extends Omit<ButtonHTMLAttributes<HTMLButto
      * width를 설정합니다.
      */
     width?: string;
+    onClear?: () => void;
 }
 
 declare const Dropdown: {

package/dist/index.js

@@ -11,7 +11,7 @@ import { FloatingPortal, autoUpdate, offset, autoPlacement } from '@floating-ui/
 export { arrow, flip, hide, inline, offset, shift, size } from '@floating-ui/react';
 import { useFloating } from '@floating-ui/react-dom';
 import * as ShoplAssets from '@shoplflow/shopl-assets';
-import { DownArrowSolidXsmallIcon, RightArrowSolidXsmallIcon, FirstPageIcon, LeftArrowIcon, RightArrowIcon, EndPageIcon, SearchIcon } from '@shoplflow/shopl-assets';
+import { DeleteIcon, DownArrowSolidXsmallIcon, RightArrowSolidXsmallIcon, FirstPageIcon, LeftArrowIcon, RightArrowIcon, EndPageIcon, SearchIcon } from '@shoplflow/shopl-assets';
 import { shift, flip, offset as offset$1 } from '@floating-ui/core';
 import * as HadaAssets from '@shoplflow/hada-assets';
 import DatePicker2 from 'react-datepicker';
@@ -3131,33 +3131,31 @@ var getDropdownFontSizeBySizeVar = (size2) => {
     case "M":
       return "body1_400";
     case "S":
-      return "body2_400";
+      return "body1_400";
     default:
       return "body1_400";
   }
 };
 var getDropdownStyleBySizeVar = (size2) => {
   switch (size2) {
-    case "L":
+    case "S":
       return css`
-        background-color: transparent;
-        padding: 8px 4px 8px 12px;
+        padding: 0 8px;
       `;
     case "M":
       return css`
-        background-color: ${colorTokens.neutral0};
-        gap: 4px;
-        padding: 4px 4px 4px 12px;
+        padding: 0 12px;
       `;
-    case "S":
+    case "L":
       return css`
-        background-color: ${colorTokens.neutral0};
-        padding: 4px 4px 4px 8px;
-        gap: 4px;
+        background-color: transparent;
+        padding-left: 12px;
+        padding-right: 6px;
       `;
     default:
       return css`
-        padding: 4px 4px 4px 12px;
+        background-color: ${colorTokens.neutral0};
+        padding: 0 8px;
       `;
   }
 };
@@ -3166,28 +3164,12 @@ var getDisabledStyle2 = (disabled) => {
     return css`
       cursor: not-allowed;
       background: ${colorTokens.neutral100};
+      svg > path {
+        fill: ${colorTokens.neutral400} !important;
+      }
     `;
   }
 };
-var getDropdownIconSizeBySizeVar = (size2) => {
-  switch (size2) {
-    case "S":
-    case "L":
-      return css`
-        height: 24px;
-        width: 24px;
-        min-width: 24px;
-        min-height: 24px;
-      `;
-    default:
-      return css`
-        height: 32px;
-        width: 32px;
-        min-width: 32px;
-        min-height: 32px;
-      `;
-  }
-};
 var getBorderColorByStatus = ({ isFocused, isError, isHovered, disabled, sizeVar }) => {
   if (!disabled) {
     if (isError) {
@@ -3232,7 +3214,17 @@ var getStyleByType = ({
     height: ${height || "initial"};
   `;
 };
-var StyledDropdownButtonWrapper = styled6.label`
+var getClearIconHoverStyle = (hasValue) => {
+  if (!hasValue) {
+    return;
+  }
+  return css`
+    &:hover .dropdown-clear-icon {
+      display: flex;
+    }
+  `;
+};
+var StyledDropdownButtonWrapper = styled6.div`
   position: relative;
   display: flex;
   align-items: center;
@@ -3250,33 +3242,63 @@ var StyledDropdownButtonWrapper = styled6.label`
   width
 })};
   ${(props) => getButtonWrapperStyleBySizeVar(props)};
-
   ${({ disabled }) => getDisabledStyle2(disabled)};
+
+  ${({ hasValue }) => getClearIconHoverStyle(hasValue)}
 `;
 var StyledDropdownButton = styled6.button`
+  position: relative;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   height: 100%;
-
   cursor: pointer;
+
   ${({ sizeVar }) => sizeVar && getDropdownStyleBySizeVar(sizeVar)};
   ${({ disabled }) => getDisabledStyle2(disabled)};
+
+  .dropdown-clear-icon {
+    display: none;
+    position: absolute;
+    right: 0;
+  }
 `;
-var DropdownButtonIcon = styled6(motion.div)`
+var DropdownButtonIcon = styled6.div`
   display: flex;
   align-items: center;
-  justify-content: center;
   flex-shrink: 0;
+  min-width: 22px;
+  height: 100%;
 
-  ${({ sizeVar }) => sizeVar && getDropdownIconSizeBySizeVar(sizeVar)};
   ${({ disabled }) => getDisabledStyle2(disabled)};
 `;
 var DropdownTriggerButton = forwardRef(
   (_a, ref) => {
-    var _b = _a, { width = "100%", onClick, sizeVar = "M", isError, placeholder, value, disabled, leftSource } = _b, rest = __objRest(_b, ["width", "onClick", "sizeVar", "isError", "placeholder", "value", "disabled", "leftSource"]);
+    var _b = _a, {
+      width = "100%",
+      onClick,
+      sizeVar = "M",
+      isError,
+      placeholder,
+      value,
+      disabled,
+      leftSource,
+      rightSource,
+      onClear
+    } = _b, rest = __objRest(_b, [
+      "width",
+      "onClick",
+      "sizeVar",
+      "isError",
+      "placeholder",
+      "value",
+      "disabled",
+      "leftSource",
+      "rightSource",
+      "onClear"
+    ]);
     const { isOpen, setIsOpen } = useDropdown();
     const [isHovered, setIsHovered] = useState(false);
     const handleOnClick = (e) => {
@@ -3291,6 +3313,10 @@ var DropdownTriggerButton = forwardRef(
     const handleOnMouseLeave = () => {
       setIsHovered(false);
     };
+    const handleOnClear = (e) => {
+      e.stopPropagation();
+      onClear && onClear();
+    };
     const getTextColor = ({ value: value2, disabled: disabled2 }) => {
       if (disabled2) {
         return "neutral350";
@@ -3301,7 +3327,8 @@ var DropdownTriggerButton = forwardRef(
       return "neutral700";
     };
     const LeftSourceClone = leftSource ? cloneElement(leftSource, __spreadProps(__spreadValues({}, leftSource.props), { disabled })) : leftSource;
-    return /* @__PURE__ */ jsx(
+    const RightSourceClone = rightSource ? cloneElement(rightSource, __spreadProps(__spreadValues({}, rightSource.props), { disabled })) : rightSource;
+    return /* @__PURE__ */ jsxs(
       StyledDropdownButtonWrapper,
       {
         onMouseEnter: handleOnMouseEnter,
@@ -3313,24 +3340,39 @@ var DropdownTriggerButton = forwardRef(
         isError,
         sizeVar,
         height: getDropdownHeightBySizeVar(sizeVar),
-        children: /* @__PURE__ */ jsxs(StyledDropdownButton, __spreadProps(__spreadValues({ ref, onClick: handleOnClick, disabled }, rest), { sizeVar, children: [
-          /* @__PURE__ */ jsxs(Stack_default.Horizontal, { width: "100%", spacing: sizeVar === "L" ? "spacing04" : void 0, align: "center", children: [
-            LeftSourceClone && LeftSourceClone,
-            value || /* @__PURE__ */ jsx(
-              Text_default,
-              {
-                typography: getDropdownFontSizeBySizeVar(sizeVar),
-                color: getTextColor({ value, disabled }),
-                textOverflow: "ellipsis",
-                lineClamp: 1,
-                children: placeholder
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx(
-            DropdownButtonIcon,
-            {
+        hasValue: Boolean(value),
+        children: [
+          /* @__PURE__ */ jsxs(
+            StyledDropdownButton,
+            __spreadProps(__spreadValues({
+              ref,
+              onClick: handleOnClick,
+              disabled
+            }, rest), {
               sizeVar,
+              "data-shoplflow": "Dropdown-Content-Area",
+              children: [
+                /* @__PURE__ */ jsxs(Stack_default.Horizontal, { width: "100%", spacing: "spacing04", align: "center", children: [
+                  LeftSourceClone && LeftSourceClone,
+                  value || /* @__PURE__ */ jsx(
+                    Text_default,
+                    {
+                      typography: getDropdownFontSizeBySizeVar(sizeVar),
+                      color: getTextColor({ value, disabled }),
+                      textOverflow: "ellipsis",
+                      lineClamp: 1,
+                      children: placeholder
+                    }
+                  )
+                ] }),
+                onClear && sizeVar !== "L" && /* @__PURE__ */ jsx(IconButton_default, { sizeVar, styleVar: "GHOST", onClick: handleOnClear, className: "dropdown-clear-icon", children: /* @__PURE__ */ jsx(Icon_default, { iconSource: DeleteIcon, color: "neutral350", sizeVar: "S" }) })
+              ]
+            })
+          ),
+          RightSourceClone && /* @__PURE__ */ jsx(StackContainer_default, { padding: "0 6px 0 0", children: RightSourceClone }),
+          /* @__PURE__ */ jsx(DropdownButtonIcon, { sizeVar, "data-shoplflow": "Dropdown-Button-Icon-Area", children: /* @__PURE__ */ jsx(
+            motion.div,
+            {
               animate: {
                 rotate: isOpen ? 180 : 0
               },
@@ -3346,8 +3388,8 @@ var DropdownTriggerButton = forwardRef(
                 }
               )
             }
-          )
-        ] }))
+          ) })
+        ]
       }
     );
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoplflow/base",
-  "version": "0.46.9",
+  "version": "0.46.10",
   "type": "module",
   "license": "Apache-2.0",
   "repository": {