@shoplflow/base 0.45.13 → 0.45.15

package/dist/index.cjs

@@ -426,7 +426,9 @@ var spacing02 = "var(--spacing02)";
 var spacing04 = "var(--spacing04)";
 var spacing06 = "var(--spacing06)";
 var spacing08 = "var(--spacing08)";
+var spacing10 = "var(--spacing10)";
 var spacing12 = "var(--spacing12)";
+var spacing14 = "var(--spacing14)";
 var spacing16 = "var(--spacing16)";
 var spacing20 = "var(--spacing20)";
 var spacing24 = "var(--spacing24)";
@@ -438,7 +440,9 @@ exports.spacingTokens = {
   spacing04,
   spacing06,
   spacing08,
+  spacing10,
   spacing12,
+  spacing14,
   spacing16,
   spacing20,
   spacing24,
@@ -795,7 +799,9 @@ var Container = styled6__default.default.div`
   ${({ hasChangeAnimation }) => hasChangeAnimation && react$1.css`
       transition:
         width 0.3s ease-in-out,
-        max-width 0.3s ease-in-out;
+        max-width 0.3s ease-in-out,
+        height 0.3s ease-in-out,
+        max-height 0.3s ease-in-out;
     `}
   display: flex;
   flex-direction: column;
@@ -3261,7 +3267,9 @@ var Dropdown = ({
   trigger,
   popper,
   option = "CLICK",
-  width = "100%"
+  width = "100%",
+  offset: offset4 = 4,
+  placement
 }) => {
   const [triggerRef, setTriggerRef] = React3.useState(null);
   const [size2, setSize] = React3.useState({ width: 0, height: 0 });
@@ -3283,8 +3291,9 @@ var Dropdown = ({
   return /* @__PURE__ */ jsxRuntime.jsx(StyledDropdown, { "data-shoplflow": "Dropdown", width, children: /* @__PURE__ */ jsxRuntime.jsx(DropdownContext.Provider, { value: __spreadProps(__spreadValues({}, size2), { isOpen, setIsOpen, option }), children: /* @__PURE__ */ jsxRuntime.jsxs(
     exports.Popper,
     {
-      offset: 4,
-      autoPlacement: {
+      offset: offset4,
+      placement,
+      autoPlacement: placement ? void 0 : {
         allowedPlacements: ["bottom-start", "top-start"]
       },
       children: [
@@ -3663,6 +3672,12 @@ var StyledInput = styled6__default.default.input`
     box-sizing: inherit;
   }
 `;
+var LeftElementWrapper2 = styled6__default.default.div`
+  padding: ${({ sizeVar }) => sizeVar === "S" ? "0 0 0 8px" : "0 0 0 12px"};
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
 var RightElementWrapper2 = styled6__default.default.div`
   padding: ${({ sizeVar, type, initialType }) => {
   if (initialType === "password" || type === "password") {
@@ -3820,7 +3835,9 @@ var Input = React3.forwardRef(
       rightSource,
       minWidth,
       gap,
-      initIsFocused
+      initIsFocused,
+      rightSourceStyle,
+      leftSource
     } = _b, rest = __objRest(_b, [
       "onFocus",
       "onBlur",
@@ -3843,7 +3860,9 @@ var Input = React3.forwardRef(
       "rightSource",
       "minWidth",
       "gap",
-      "initIsFocused"
+      "initIsFocused",
+      "rightSourceStyle",
+      "leftSource"
     ]);
     const [text, setText] = React3.useState("");
     const [isFocused, setIsFocused] = React3.useState(Boolean(initIsFocused));
@@ -3960,6 +3979,7 @@ var Input = React3.forwardRef(
         gap,
         sizeVar,
         children: [
+          leftSource && /* @__PURE__ */ jsxRuntime.jsx(LeftElementWrapper2, { sizeVar, initialType, style: rightSourceStyle, children: leftSource }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative", width: "100%" }, children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               StyledInput,
@@ -3981,7 +4001,7 @@ var Input = React3.forwardRef(
             ),
             onClear && isHovered && Boolean(String(text).length > 0) && /* @__PURE__ */ jsxRuntime.jsx(ClearIconButton, { sizeVar, onClick: handleOnClear, styleVar: "GHOST", isHovered: false, children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: assetFunction("DeleteIcon"), color: "neutral350" }) })
           ] }),
-          !(type === "number") && (Boolean(maxLength && isFocused) || Boolean(initialType === "password") || Boolean(rightSource)) && /* @__PURE__ */ jsxRuntime.jsxs(RightElementWrapper2, { type, sizeVar, initialType, children: [
+          !(type === "number") && (Boolean(maxLength && isFocused) || Boolean(initialType === "password") || Boolean(rightSource)) && /* @__PURE__ */ jsxRuntime.jsxs(RightElementWrapper2, { type, sizeVar, initialType, style: rightSourceStyle, children: [
             maxLength && isFocused && /* @__PURE__ */ jsxRuntime.jsx(TextCounter_default, { currentLength: String(text).length, maxLength, isError }),
             initialType === "password" && /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { sizeVar, onClick: handleTogglePasswordType, styleVar: "GHOST", children: /* @__PURE__ */ jsxRuntime.jsx(
               exports.Icon,
@@ -6673,13 +6693,20 @@ var NumberCombobox = (_a) => {
         sizeVar,
         width,
         ref: inputRef,
-        type: "number",
+        type: "text",
+        inputMode: "numeric",
         style: { textAlign: "left", paddingRight: "0px" },
         className: _className,
         gap: "4px",
         initIsFocused: isOpen,
         value,
-        onChange,
+        onChange: (e) => {
+          const numericValue = e.target.value.replace(/[^\d]/g, "");
+          if (e.target.value !== numericValue) {
+            e.target.value = numericValue;
+          }
+          onChange == null ? void 0 : onChange(e);
+        },
         onFocus: () => {
           setIsOpen(true);
         },
@@ -6726,7 +6753,8 @@ var NumberCombobox = (_a) => {
           }
           onBlur == null ? void 0 : onBlur(event);
         },
-        rightSource: /* @__PURE__ */ jsxRuntime.jsx(exports.StackContainer.Horizontal, { padding: "0px 4px 0px 0px", children: /* @__PURE__ */ jsxRuntime.jsx(
+        rightSourceStyle: { padding: "4px" },
+        rightSource: /* @__PURE__ */ jsxRuntime.jsx(exports.StackContainer.Horizontal, { children: /* @__PURE__ */ jsxRuntime.jsx(
           exports.IconButton,
           {
             sizeVar: "XS",

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
-import React__default, { ElementType, ComponentPropsWithoutRef, ReactNode, ReactElement, ImgHTMLAttributes, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, CSSProperties, HTMLAttributes, ComponentPropsWithRef, ButtonHTMLAttributes, InputHTMLAttributes, MouseEvent, Ref, ChangeEvent } from 'react';
+import React__default, { ElementType, ComponentPropsWithoutRef, ReactNode, ReactElement, CSSProperties, ImgHTMLAttributes, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, HTMLAttributes, ComponentPropsWithRef, ButtonHTMLAttributes, InputHTMLAttributes, MouseEvent, Ref, ChangeEvent } from 'react';
 import { $Values } from '@shoplflow/utils';
 import { IconSource } from '@shoplflow/shopl-assets';
 import { IconSource as IconSource$1 } from '@shoplflow/hada-assets';
@@ -97,7 +97,9 @@ declare const spacingTokens: {
     spacing04: string;
     spacing06: string;
     spacing08: string;
+    spacing10: string;
     spacing12: string;
+    spacing14: string;
     spacing16: string;
     spacing20: string;
     spacing24: string;
@@ -269,6 +271,7 @@ interface RightElementProps {
      * 텍스트를 기준으로 오른쪽에 위치할 ReactElement를 설정합니다.
      */
     rightSource?: ReactElement;
+    rightSourceStyle?: CSSProperties;
 }
 interface LeftAndRightElementProps extends RightElementProps, LeftElementProps {
 }
@@ -954,6 +957,8 @@ interface DropdownOptionProps {
     option?: DropdownOptionVariantType;
     width?: CSSProperties['width'];
     disabled?: boolean;
+    placement?: Placement;
+    offset?: OffsetOptions;
 }
 interface DropdownContentProps extends HTMLAttributes<HTMLDivElement>, ChildrenProps {
     /**
@@ -986,7 +991,7 @@ interface DropdownTriggerButtonProps extends Omit<ButtonHTMLAttributes<HTMLButto
 }
 
 declare const Dropdown: {
-    ({ isOpen: initialIsOpen, trigger, popper, option, width, }: DropdownProps): react_jsx_runtime.JSX.Element;
+    ({ isOpen: initialIsOpen, trigger, popper, option, width, offset, placement, }: DropdownProps): react_jsx_runtime.JSX.Element;
     Button: React__default.ForwardRefExoticComponent<DropdownTriggerButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
     Content: ({ children, width: initialWidth, type, onClick, ...rest }: DropdownContentProps) => react_jsx_runtime.JSX.Element;
 };
@@ -1095,7 +1100,7 @@ declare const InputSizeVariants: {
     readonly M: "M";
 };
 declare type InputSizeVariantType = $Values<typeof InputSizeVariants>;
-interface InputProps extends InputOptionProps, Omit<InputHTMLAttributes<HTMLInputElement>, 'width'>, DisableProps, RightElementProps {
+interface InputProps extends InputOptionProps, Omit<InputHTMLAttributes<HTMLInputElement>, 'width'>, DisableProps, LeftElementProps, RightElementProps {
 }
 interface InputOptionProps extends ErrorProps, SizeVariantProps<InputSizeVariantType> {
     width?: string;

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
-import React__default, { ElementType, ComponentPropsWithoutRef, ReactNode, ReactElement, ImgHTMLAttributes, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, CSSProperties, HTMLAttributes, ComponentPropsWithRef, ButtonHTMLAttributes, InputHTMLAttributes, MouseEvent, Ref, ChangeEvent } from 'react';
+import React__default, { ElementType, ComponentPropsWithoutRef, ReactNode, ReactElement, CSSProperties, ImgHTMLAttributes, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, HTMLAttributes, ComponentPropsWithRef, ButtonHTMLAttributes, InputHTMLAttributes, MouseEvent, Ref, ChangeEvent } from 'react';
 import { $Values } from '@shoplflow/utils';
 import { IconSource } from '@shoplflow/shopl-assets';
 import { IconSource as IconSource$1 } from '@shoplflow/hada-assets';
@@ -97,7 +97,9 @@ declare const spacingTokens: {
     spacing04: string;
     spacing06: string;
     spacing08: string;
+    spacing10: string;
     spacing12: string;
+    spacing14: string;
     spacing16: string;
     spacing20: string;
     spacing24: string;
@@ -269,6 +271,7 @@ interface RightElementProps {
      * 텍스트를 기준으로 오른쪽에 위치할 ReactElement를 설정합니다.
      */
     rightSource?: ReactElement;
+    rightSourceStyle?: CSSProperties;
 }
 interface LeftAndRightElementProps extends RightElementProps, LeftElementProps {
 }
@@ -954,6 +957,8 @@ interface DropdownOptionProps {
     option?: DropdownOptionVariantType;
     width?: CSSProperties['width'];
     disabled?: boolean;
+    placement?: Placement;
+    offset?: OffsetOptions;
 }
 interface DropdownContentProps extends HTMLAttributes<HTMLDivElement>, ChildrenProps {
     /**
@@ -986,7 +991,7 @@ interface DropdownTriggerButtonProps extends Omit<ButtonHTMLAttributes<HTMLButto
 }
 
 declare const Dropdown: {
-    ({ isOpen: initialIsOpen, trigger, popper, option, width, }: DropdownProps): react_jsx_runtime.JSX.Element;
+    ({ isOpen: initialIsOpen, trigger, popper, option, width, offset, placement, }: DropdownProps): react_jsx_runtime.JSX.Element;
     Button: React__default.ForwardRefExoticComponent<DropdownTriggerButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
     Content: ({ children, width: initialWidth, type, onClick, ...rest }: DropdownContentProps) => react_jsx_runtime.JSX.Element;
 };
@@ -1095,7 +1100,7 @@ declare const InputSizeVariants: {
     readonly M: "M";
 };
 declare type InputSizeVariantType = $Values<typeof InputSizeVariants>;
-interface InputProps extends InputOptionProps, Omit<InputHTMLAttributes<HTMLInputElement>, 'width'>, DisableProps, RightElementProps {
+interface InputProps extends InputOptionProps, Omit<InputHTMLAttributes<HTMLInputElement>, 'width'>, DisableProps, LeftElementProps, RightElementProps {
 }
 interface InputOptionProps extends ErrorProps, SizeVariantProps<InputSizeVariantType> {
     width?: string;

package/dist/index.js

@@ -399,7 +399,9 @@ var spacing02 = "var(--spacing02)";
 var spacing04 = "var(--spacing04)";
 var spacing06 = "var(--spacing06)";
 var spacing08 = "var(--spacing08)";
+var spacing10 = "var(--spacing10)";
 var spacing12 = "var(--spacing12)";
+var spacing14 = "var(--spacing14)";
 var spacing16 = "var(--spacing16)";
 var spacing20 = "var(--spacing20)";
 var spacing24 = "var(--spacing24)";
@@ -411,7 +413,9 @@ var spacingTokens = {
   spacing04,
   spacing06,
   spacing08,
+  spacing10,
   spacing12,
+  spacing14,
   spacing16,
   spacing20,
   spacing24,
@@ -768,7 +772,9 @@ var Container = styled6.div`
   ${({ hasChangeAnimation }) => hasChangeAnimation && css`
       transition:
         width 0.3s ease-in-out,
-        max-width 0.3s ease-in-out;
+        max-width 0.3s ease-in-out,
+        height 0.3s ease-in-out,
+        max-height 0.3s ease-in-out;
     `}
   display: flex;
   flex-direction: column;
@@ -3234,7 +3240,9 @@ var Dropdown = ({
   trigger,
   popper,
   option = "CLICK",
-  width = "100%"
+  width = "100%",
+  offset: offset4 = 4,
+  placement
 }) => {
   const [triggerRef, setTriggerRef] = useState(null);
   const [size2, setSize] = useState({ width: 0, height: 0 });
@@ -3256,8 +3264,9 @@ var Dropdown = ({
   return /* @__PURE__ */ jsx(StyledDropdown, { "data-shoplflow": "Dropdown", width, children: /* @__PURE__ */ jsx(DropdownContext.Provider, { value: __spreadProps(__spreadValues({}, size2), { isOpen, setIsOpen, option }), children: /* @__PURE__ */ jsxs(
     Popper_default,
     {
-      offset: 4,
-      autoPlacement: {
+      offset: offset4,
+      placement,
+      autoPlacement: placement ? void 0 : {
         allowedPlacements: ["bottom-start", "top-start"]
       },
       children: [
@@ -3636,6 +3645,12 @@ var StyledInput = styled6.input`
     box-sizing: inherit;
   }
 `;
+var LeftElementWrapper2 = styled6.div`
+  padding: ${({ sizeVar }) => sizeVar === "S" ? "0 0 0 8px" : "0 0 0 12px"};
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
 var RightElementWrapper2 = styled6.div`
   padding: ${({ sizeVar, type, initialType }) => {
   if (initialType === "password" || type === "password") {
@@ -3793,7 +3808,9 @@ var Input = forwardRef(
       rightSource,
       minWidth,
       gap,
-      initIsFocused
+      initIsFocused,
+      rightSourceStyle,
+      leftSource
     } = _b, rest = __objRest(_b, [
       "onFocus",
       "onBlur",
@@ -3816,7 +3833,9 @@ var Input = forwardRef(
       "rightSource",
       "minWidth",
       "gap",
-      "initIsFocused"
+      "initIsFocused",
+      "rightSourceStyle",
+      "leftSource"
     ]);
     const [text, setText] = useState("");
     const [isFocused, setIsFocused] = useState(Boolean(initIsFocused));
@@ -3933,6 +3952,7 @@ var Input = forwardRef(
         gap,
         sizeVar,
         children: [
+          leftSource && /* @__PURE__ */ jsx(LeftElementWrapper2, { sizeVar, initialType, style: rightSourceStyle, children: leftSource }),
           /* @__PURE__ */ jsxs("div", { style: { position: "relative", width: "100%" }, children: [
             /* @__PURE__ */ jsx(
               StyledInput,
@@ -3954,7 +3974,7 @@ var Input = forwardRef(
             ),
             onClear && isHovered && Boolean(String(text).length > 0) && /* @__PURE__ */ jsx(ClearIconButton, { sizeVar, onClick: handleOnClear, styleVar: "GHOST", isHovered: false, children: /* @__PURE__ */ jsx(Icon_default, { iconSource: assetFunction("DeleteIcon"), color: "neutral350" }) })
           ] }),
-          !(type === "number") && (Boolean(maxLength && isFocused) || Boolean(initialType === "password") || Boolean(rightSource)) && /* @__PURE__ */ jsxs(RightElementWrapper2, { type, sizeVar, initialType, children: [
+          !(type === "number") && (Boolean(maxLength && isFocused) || Boolean(initialType === "password") || Boolean(rightSource)) && /* @__PURE__ */ jsxs(RightElementWrapper2, { type, sizeVar, initialType, style: rightSourceStyle, children: [
             maxLength && isFocused && /* @__PURE__ */ jsx(TextCounter_default, { currentLength: String(text).length, maxLength, isError }),
             initialType === "password" && /* @__PURE__ */ jsx(IconButton_default, { sizeVar, onClick: handleTogglePasswordType, styleVar: "GHOST", children: /* @__PURE__ */ jsx(
               Icon_default,
@@ -6646,13 +6666,20 @@ var NumberCombobox = (_a) => {
         sizeVar,
         width,
         ref: inputRef,
-        type: "number",
+        type: "text",
+        inputMode: "numeric",
         style: { textAlign: "left", paddingRight: "0px" },
         className: _className,
         gap: "4px",
         initIsFocused: isOpen,
         value,
-        onChange,
+        onChange: (e) => {
+          const numericValue = e.target.value.replace(/[^\d]/g, "");
+          if (e.target.value !== numericValue) {
+            e.target.value = numericValue;
+          }
+          onChange == null ? void 0 : onChange(e);
+        },
         onFocus: () => {
           setIsOpen(true);
         },
@@ -6699,7 +6726,8 @@ var NumberCombobox = (_a) => {
           }
           onBlur == null ? void 0 : onBlur(event);
         },
-        rightSource: /* @__PURE__ */ jsx(StackContainer_default.Horizontal, { padding: "0px 4px 0px 0px", children: /* @__PURE__ */ jsx(
+        rightSourceStyle: { padding: "4px" },
+        rightSource: /* @__PURE__ */ jsx(StackContainer_default.Horizontal, { children: /* @__PURE__ */ jsx(
           IconButton_default,
           {
             sizeVar: "XS",

package/dist/styles/global.css

@@ -16,7 +16,9 @@
   --spacing04: 4px;
   --spacing06: 6px;
   --spacing08: 8px;
+  --spacing10: 10px;
   --spacing12: 12px;
+  --spacing14: 14px;
   --spacing16: 16px;
   --spacing20: 20px;
   --spacing24: 24px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoplflow/base",
-  "version": "0.45.13",
+  "version": "0.45.15",
   "type": "module",
   "license": "Apache-2.0",
   "repository": {
@@ -99,7 +99,7 @@
     "react-dom": "^18.2.0",
     "simplebar-react": "^3.2.6",
     "@shoplflow/hada-assets": "^0.1.10",
-    "@shoplflow/shopl-assets": "^0.12.33",
+    "@shoplflow/shopl-assets": "^0.12.34",
     "@shoplflow/utils": "^0.7.2"
   },
   "homepage": "https://github.com/shopl/shoplflow#readme",