maru_design2 2.22.4 → 2.23.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [2.23.0](https://github.com/42maru-ai/maru-design2/compare/v2.22.4...v2.23.0) (2025-02-17)
+
+
+### Features
+
+* :bug: Popover,Tooltip,Dropdown - update open logics [#486](https://github.com/42maru-ai/maru-design2/issues/486) ([dc76a0d](https://github.com/42maru-ai/maru-design2/commit/dc76a0d067598bc2cc070c584611d0707c824f17))
+* :sparkles: Input - add date, time type [#444](https://github.com/42maru-ai/maru-design2/issues/444) ([f520e00](https://github.com/42maru-ai/maru-design2/commit/f520e004c4416ce9a4c2ba5b977d9b175ca87bdb))
+* :sparkles: Input - add persistent placeholder [#479](https://github.com/42maru-ai/maru-design2/issues/479) ([7c30ffc](https://github.com/42maru-ai/maru-design2/commit/7c30ffcf02231764c5869d58369b3669a75d5227))
+
+
+### Bug Fixes
+
+* :bug: SearchInput - update popover to div [#480](https://github.com/42maru-ai/maru-design2/issues/480) ([b20ea19](https://github.com/42maru-ai/maru-design2/commit/b20ea1959991000e07bbfb196dc65d6816d62885))
+
 ## [2.22.4](https://github.com/42maru-ai/maru-design2/compare/v2.22.3...v2.22.4) (2025-02-12)
 
 

package/dist/components/atoms/checkbox/Checkbox.d.ts

@@ -4,6 +4,7 @@ import { TCheckboxSize } from '../../../enums/size';
 import './checkbox.scss';
 export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'checked' | 'type'> {
     checked?: boolean;
+    label?: string;
     /**
      * (@v1 variant)
      */
@@ -12,7 +13,6 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
      * 컴포넌트와 라벨 사이의 거리
      */
     gap?: TGap;
-    label?: string;
     /**
      * [16, 18, 24]
      */

package/dist/components/atoms/input/Input.d.ts

@@ -11,7 +11,7 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     };
     label?: string;
     /**
-     * 데이터 타입. ['text', 'password', 'number']
+     * 데이터 타입
      */
     type?: TInputType;
     /**
@@ -35,5 +35,9 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
      */
     endNode?: React.ReactNode;
     className?: string;
+    /**
+     * true이면 placeholder가 없어지지 않음
+     */
+    persistentPlaceholder?: boolean;
 }
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/atoms/tooltip/Tooltip.d.ts

@@ -22,7 +22,7 @@ export interface TooltipProps {
      */
     portal?: boolean;
     /**
-     * 대상와 툴팁 사이의 거리. ['6px', '4px', '0px']
+     * 대상와 툴팁 사이의 거리
      */
     gap?: TTooltipGap;
 }

package/dist/components/molecules/searchInput/filter/FilterPopover.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+interface Props {
+    parent: HTMLElement;
+    onClose: () => void;
+    formats: {
+        columnIdKey: string;
+        columnName?: string;
+        filter?: React.ReactNode;
+    }[];
+    resetButtonContent?: string;
+    onReset: () => void;
+    searchButtonContent?: string;
+    onSearch: () => void;
+}
+declare function FilterPopover({ parent, onClose, formats, resetButtonContent, onReset, searchButtonContent, onSearch, }: Props): import("react/jsx-runtime").JSX.Element;
+export default FilterPopover;

package/dist/enums/gap.d.ts

@@ -1,4 +1,4 @@
 export declare const GAPS: readonly ["8px", "4px", "2px"];
 export type TGap = (typeof GAPS)[number];
-export declare const TOOLTIP_GAPS: readonly ["6px", "4px", "0px"];
+export declare const TOOLTIP_GAPS: readonly [6, 4, 0];
 export type TTooltipGap = (typeof TOOLTIP_GAPS)[number];

package/dist/enums/type.d.ts

@@ -1,4 +1,4 @@
-export declare const INPUT_TYPES: readonly ["text", "password", "number"];
+export declare const INPUT_TYPES: readonly ["text", "password", "number", "date", "time"];
 export type TInputType = (typeof INPUT_TYPES)[number];
 export declare const DROPDOWN_TYPES: readonly ["button", "search"];
 export type TDropdownType = (typeof DROPDOWN_TYPES)[number];

package/dist/index.js

@@ -6362,7 +6362,7 @@ function Chip(_a) {
   }));
 }
 
-var css_248z$g = ".maru-input-wrapper .maru-input-label {\n  margin-bottom: 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}\n.maru-input-wrapper .maru-input-label label {\n  color: #5c5c5c;\n}\n.maru-input-wrapper .maru-input {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  height: 37px;\n  padding: 8px 10px 8px 14px;\n  border: 1px solid #e4e4e4;\n  border-radius: 6px;\n}\n.maru-input-wrapper .maru-input > input {\n  width: 100%;\n  border: unset;\n  outline: unset;\n  background-color: transparent;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 400;\n  color: #5c5c5c;\n}\n.maru-input-wrapper .maru-input > input::-webkit-input-placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\n}\n.maru-input-wrapper .maru-input > input::-moz-placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\n}\n.maru-input-wrapper .maru-input > input:-ms-input-placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\n}\n.maru-input-wrapper .maru-input > input::-ms-input-placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\n}\n.maru-input-wrapper .maru-input > input::placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\n}\n.maru-input-wrapper .maru-input:focus-visible, .maru-input-wrapper .maru-input:focus-within {\n  border-color: #5c5c5c;\n  background-color: #fafafa;\n}\n.maru-input-wrapper .maru-input.errored {\n  outline: 1px solid #e53e3e;\n  border-color: #e53e3e;\n}\n.maru-input-wrapper .maru-input:hover {\n  outline: 1px solid #e4e4e4;\n  border-color: #e4e4e4;\n  background-color: #fafafa;\n}\n.maru-input-wrapper .maru-input.disabled {\n  background-color: #fafafa;\n}\n.maru-input-wrapper .maru-input.disabled > input {\n  color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input.disabled > input::-webkit-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input.disabled > input::-moz-placeholder {\n  color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input.disabled > input:-ms-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input.disabled > input::-ms-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input.disabled > input::placeholder {\n  color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input.disabled:hover {\n  outline: unset;\n}\n.maru-input-wrapper .maru-input-start-node {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  margin-right: 10px;\n}\n.maru-input-wrapper .maru-input-end-node-wrapper {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  gap: 6px;\n}\n.maru-input-wrapper .maru-input-end-node-wrapper > button {\n  padding: unset;\n  margin: unset;\n  border: unset;\n  background-color: unset;\n  cursor: pointer;\n  display: flex;\n}\n.maru-input-wrapper .maru-input-end-node-wrapper .maru-input-end-node {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-input-wrapper .maru-input-footer {\n  display: block;\n  margin-top: 4px;\n}\n.maru-input-wrapper .maru-input-footer > span {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 12px;\n  letter-spacing: -0.48px;\n  font-weight: 500;\n  color: #e53e3e;\n  font-weight: 400;\n}";
+var css_248z$g = ".maru-input-wrapper .maru-input-label {\n  margin-bottom: 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}\n.maru-input-wrapper .maru-input-label label {\n  color: #5c5c5c;\n}\n.maru-input-wrapper .maru-input {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  flex-direction: row;\n  height: 37px;\n  padding: 8px 10px 8px 14px;\n  border: 1px solid #e4e4e4;\n  border-radius: 6px;\n}\n.maru-input-wrapper .maru-input .persistent-placeholder {\n  position: absolute;\n  z-index: -1;\n}\n.maru-input-wrapper .maru-input .persistent-placeholder > span {\n  color: #8c8c8c;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 300;\n}\n.maru-input-wrapper .maru-input .persistent-placeholder > span[data-hidden] {\n  visibility: hidden;\n}\n.maru-input-wrapper .maru-input > input {\n  width: 100%;\n  border: unset;\n  outline: unset;\n  background-color: transparent;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 400;\n  color: #5c5c5c;\n  padding: unset;\n}\n.maru-input-wrapper .maru-input > input::-webkit-input-placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\n}\n.maru-input-wrapper .maru-input > input::-moz-placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\n}\n.maru-input-wrapper .maru-input > input:-ms-input-placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\n}\n.maru-input-wrapper .maru-input > input::-ms-input-placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\n}\n.maru-input-wrapper .maru-input > input::placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\n}\n.maru-input-wrapper .maru-input:focus-visible, .maru-input-wrapper .maru-input:focus-within {\n  border-color: #5c5c5c;\n  background-color: rgba(228, 228, 228, 0.2);\n}\n.maru-input-wrapper .maru-input.errored {\n  outline: 1px solid #e53e3e;\n  border-color: #e53e3e;\n}\n.maru-input-wrapper .maru-input:hover {\n  outline: 1px solid #e4e4e4;\n  border-color: #e4e4e4;\n  background-color: rgba(228, 228, 228, 0.2);\n}\n.maru-input-wrapper .maru-input.disabled {\n  background-color: #fafafa;\n}\n.maru-input-wrapper .maru-input.disabled > input {\n  color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input.disabled > input::-webkit-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input.disabled > input::-moz-placeholder {\n  color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input.disabled > input:-ms-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input.disabled > input::-ms-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input.disabled > input::placeholder {\n  color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input.disabled:hover {\n  outline: unset;\n}\n.maru-input-wrapper .maru-input-start-node {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  margin-right: 10px;\n}\n.maru-input-wrapper .maru-input-end-node-wrapper {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  gap: 6px;\n}\n.maru-input-wrapper .maru-input-end-node-wrapper > button {\n  padding: unset;\n  margin: unset;\n  border: unset;\n  background-color: unset;\n  cursor: pointer;\n  display: flex;\n}\n.maru-input-wrapper .maru-input-end-node-wrapper .maru-input-end-node {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-input-wrapper .maru-input-footer {\n  display: block;\n  margin-top: 4px;\n}\n.maru-input-wrapper .maru-input-footer > span {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 12px;\n  letter-spacing: -0.48px;\n  font-weight: 500;\n  color: #e53e3e;\n  font-weight: 400;\n}";
 styleInject(css_248z$g);
 
 var Input = /*#__PURE__*/forwardRef(function (_a, inputRef) {
@@ -6376,13 +6376,21 @@ var Input = /*#__PURE__*/forwardRef(function (_a, inputRef) {
     startNode = _a.startNode,
     endNode = _a.endNode,
     className = _a.className,
-    props = __rest(_a, ["invalid", "label", "type", "onClear", "hiddenClearButton", "wrapperRef", "startNode", "endNode", "className"]);
-  var _c = useState(true),
-    maskingPassword = _c[0],
-    setMaskingPassword = _c[1]; // *로 보이고 싶으면 true
-  var _d = useState(false),
-    showClearButton = _d[0],
-    setShowClearButton = _d[1];
+    _c = _a.persistentPlaceholder,
+    persistentPlaceholder = _c === void 0 ? false : _c,
+    props = __rest(_a, ["invalid", "label", "type", "onClear", "hiddenClearButton", "wrapperRef", "startNode", "endNode", "className", "persistentPlaceholder"]);
+  var _d = useState(true),
+    maskingPassword = _d[0],
+    setMaskingPassword = _d[1]; // *로 보이고 싶으면 true
+  var _e = useState(false),
+    showClearButton = _e[0],
+    setShowClearButton = _e[1];
+  var _f = useState(''),
+    hiddenPlaceholder = _f[0],
+    setHiddenPlaceholder = _f[1];
+  var _g = useState(''),
+    remainPlaceholder = _g[0],
+    setRemainPlaceholder = _g[1];
   var combineRef = useCombineRef(inputRef);
   var hashId = uuidv4(4);
   useEffect(function () {
@@ -6408,6 +6416,14 @@ var Input = /*#__PURE__*/forwardRef(function (_a, inputRef) {
       setShowClearButton(!hiddenClearButton);
     }
   }, [combineRef.current, hiddenClearButton]);
+  /**
+   * persistentPlaceholder = true일때 보여줄 placeholder 세팅
+   */
+  useEffect(function () {
+    if (persistentPlaceholder && props.placeholder) {
+      setRemainPlaceholder(props.placeholder);
+    }
+  }, [persistentPlaceholder, props.placeholder]);
   var handleInputChange = function handleInputChange(e) {
     var _a;
     setShowClearButton(!hiddenClearButton);
@@ -6420,10 +6436,44 @@ var Input = /*#__PURE__*/forwardRef(function (_a, inputRef) {
       } else {
         newValue = value.slice(0, value.length - 1);
       }
+    } else if (type === 'date') {
+      var regexNum = /[^0-9]/g;
+      var onlyNum = value.replace(regexNum, ''); // 숫자가 아닌 경우 ''
+      var format = void 0;
+      var regexDate = void 0;
+      if (onlyNum.length <= 6) {
+        // 000000 -> 0000-00
+        format = '$1-$2';
+        regexDate = /([0-9]{4})([0-9]+)/;
+      } else if (onlyNum.length <= 8) {
+        // 00000000 -> 0000-00-00
+        format = '$1-$2-$3';
+        regexDate = /([0-9]{4})([0-9]{2})([0-9]+)/;
+      }
+      newValue = onlyNum.replace(regexDate, format);
+    } else if (type === 'time') {
+      var regexNum = /[^0-9]/g;
+      var onlyNum = value.replace(regexNum, ''); // 숫자가 아닌 경우 ''
+      var format = void 0;
+      var regexTime = void 0;
+      if (onlyNum.length <= 4) {
+        // 0000 -> 00:00
+        format = '$1:$2';
+        regexTime = /([0-9]{2})([0-9]+)/;
+      } else if (onlyNum.length <= 6) {
+        // 000000 -> 00:00:00
+        format = '$1:$2:$3';
+        regexTime = /([0-9]{2})([0-9]{2})([0-9]+)/;
+      }
+      newValue = onlyNum.replace(regexTime, format);
     }
     if (!newValue) {
       setShowClearButton(false );
     }
+    if (persistentPlaceholder && props.placeholder) {
+      setHiddenPlaceholder(newValue);
+      setRemainPlaceholder(props.placeholder.substring(newValue.length));
+    }
     e.currentTarget.value = newValue;
     (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, e);
   };
@@ -6447,6 +6497,10 @@ var Input = /*#__PURE__*/forwardRef(function (_a, inputRef) {
       setShowClearButton(false );
       combineRef.current.value = '';
       combineRef.current.focus();
+      if (persistentPlaceholder && props.placeholder) {
+        setHiddenPlaceholder('');
+        setRemainPlaceholder(props.placeholder);
+      }
     }
     onClear === null || onClear === void 0 ? void 0 : onClear();
   };
@@ -6472,12 +6526,23 @@ var Input = /*#__PURE__*/forwardRef(function (_a, inputRef) {
         className: "maru-input-start-node"
       }, {
         children: startNode
+      })), persistentPlaceholder && jsxs("span", __assign({
+        className: "persistent-placeholder"
+      }, {
+        children: [jsx("span", __assign({
+          "data-hidden": true
+        }, {
+          children: hiddenPlaceholder
+        })), jsx("span", {
+          children: remainPlaceholder
+        })]
       })), jsx("input", __assign({}, props, {
         id: "maru-input-".concat(hashId),
         ref: combineRef,
         type: type === 'password' && maskingPassword ? 'password' : 'text',
         onChange: handleInputChange,
-        onBlur: handleInputBlur
+        onBlur: handleInputBlur,
+        placeholder: persistentPlaceholder ? undefined : props.placeholder
       })), jsxs("div", __assign({
         className: "maru-input-end-node-wrapper"
       }, {
@@ -6530,7 +6595,8 @@ Input.defaultProps = {
   wrapperRef: undefined,
   startNode: undefined,
   endNode: undefined,
-  className: undefined
+  className: undefined,
+  persistentPlaceholder: undefined
 };
 Input.displayName = 'Input';
 
@@ -8353,36 +8419,16 @@ function Popover(_a) {
        * instance를 useMemo로 선언하면 레퍼런스의 DOM을 찾지 못 하고,
        * useCallback으로 선언하면 함수라서 호출 될 때 마다 새로운 객체가 생성되어 .update가 동작하지 않음
        */
-      var instance_1 = createPopper(anchorEl, popoverRef.current, {
+      var instance = createPopper(anchorEl, popoverRef.current, {
         placement: direction,
         modifiers: [{
-          name: 'flip',
-          options: {
-            padding: 10
-          }
-        }, {
           name: 'offset',
           options: {
             offset: [0, 4]
           }
         }]
       });
-      var instanceSetOptions = function instanceSetOptions(isEnabled) {
-        return instance_1.setOptions(function (options) {
-          return __assign(__assign({}, options), {
-            modifiers: __spreadArray(__spreadArray([], options.modifiers, true), [{
-              name: 'eventListeners',
-              enabled: isEnabled,
-              options: {
-                resize: isEnabled,
-                scroll: isEnabled
-              }
-            }], false)
-          });
-        });
-      };
-      instanceSetOptions(true);
-      instance_1.update();
+      instance.update();
       popoverRef.current.focus();
     }
   }, [open]);
@@ -8401,18 +8447,15 @@ function Popover(_a) {
   var PopoverBody = open ? jsx("div", __assign({
     className: "maru-popover-background",
     onClick: handleBackgroundClick,
-    tabIndex: -1,
-    "aria-hidden": true
+    tabIndex: -1
   }, {
     children: jsx("div", __assign({
       ref: popoverRef,
       className: classNames('maru-popover', className),
       role: "tooltip",
-      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
       tabIndex: 0,
       onKeyUp: handleKeyUp,
-      onClick: handlePopoverClick,
-      "aria-hidden": true
+      onClick: handlePopoverClick
     }, {
       children: children
     }))
@@ -8775,7 +8818,7 @@ function Toggle(_a) {
   });
 }
 
-var css_248z$9 = ".maru-tooltip-wrapper {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  width: -webkit-fit-content;\n  width: -moz-fit-content;\n  width: fit-content;\n  padding: 0;\n}\n.maru-tooltip-wrapper[data-dir=top][data-gap=\"6px\"] {\n  padding-top: 6px;\n}\n.maru-tooltip-wrapper[data-dir=top][data-gap=\"4px\"] {\n  padding-top: 4px;\n}\n.maru-tooltip-wrapper[data-dir=left][data-gap=\"6px\"] {\n  padding-left: 6px;\n}\n.maru-tooltip-wrapper[data-dir=left][data-gap=\"4px\"] {\n  padding-left: 4px;\n}\n.maru-tooltip-wrapper[data-dir=bottom][data-gap=\"6px\"] {\n  padding-bottom: 6px;\n}\n.maru-tooltip-wrapper[data-dir=bottom][data-gap=\"4px\"] {\n  padding-bottom: 4px;\n}\n.maru-tooltip-wrapper[data-dir=right][data-gap=\"6px\"] {\n  padding-right: 6px;\n}\n.maru-tooltip-wrapper[data-dir=right][data-gap=\"4px\"] {\n  padding-right: 4px;\n}\n\n.maru-tooltip {\n  z-index: 1612;\n  border-radius: 6px;\n  padding: 6px 10px 6px 12px;\n  display: none;\n  background-color: rgba(0, 0, 0, 0.8);\n}\n.maru-tooltip[data-show=true] {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-tooltip[data-show=false] {\n  display: none;\n}\n.maru-tooltip,\n.maru-tooltip span,\n.maru-tooltip p,\n.maru-tooltip pre {\n  color: white;\n  white-space: pre-wrap;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 12px;\n  letter-spacing: -0.48px;\n  font-weight: 400;\n  line-height: 140%;\n}";
+var css_248z$9 = ".maru-tooltip-wrapper {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  width: -webkit-fit-content;\n  width: -moz-fit-content;\n  width: fit-content;\n}\n\n.maru-tooltip {\n  z-index: 1612;\n  border-radius: 6px;\n  padding: 6px 10px 6px 12px;\n  display: none;\n  background-color: rgba(0, 0, 0, 0.8);\n}\n.maru-tooltip[data-show=true] {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-tooltip[data-show=false] {\n  display: none;\n}\n.maru-tooltip,\n.maru-tooltip span,\n.maru-tooltip p,\n.maru-tooltip pre {\n  color: white;\n  white-space: pre-wrap;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 12px;\n  letter-spacing: -0.48px;\n  font-weight: 400;\n  line-height: 140%;\n}";
 styleInject(css_248z$9);
 
 function Tooltip(_a) {
@@ -8789,7 +8832,7 @@ function Tooltip(_a) {
     _d = _a.portal,
     portal = _d === void 0 ? false : _d,
     _e = _a.gap,
-    gap = _e === void 0 ? '6px' : _e;
+    gap = _e === void 0 ? 6 : _e;
   var _f = useState(false),
     open = _f[0],
     setOpen = _f[1];
@@ -8803,11 +8846,17 @@ function Tooltip(_a) {
        * useCallback으로 선언하면 함수라서 호출 될 때 마다 새로운 객체가 생성되어 .update가 동작하지 않음
        */
       var instance = createPopper(wrapperRef.current, tooltipRef.current, {
-        placement: direction
+        placement: direction,
+        modifiers: [{
+          name: 'offset',
+          options: {
+            offset: [0, gap]
+          }
+        }]
       });
       instance.update();
     }
-  }, [show]);
+  }, [show, gap]);
   var Tootip = useMemo(function () {
     return jsx("div", __assign({
       className: "maru-tooltip",
@@ -25609,7 +25658,6 @@ function DropdownMenu$1(_a) {
       var newWidth = width || pw;
       menu.style.width = "".concat(newWidth, "px");
       menu.style.left = "".concat(pl, "px");
-      // FIXME: 무슨 조건인지 잘 모르겠음
       if (ph + pt + menu.offsetHeight + 10 > document.body.offsetHeight) {
         menu.style.top = "".concat(pt - menu.offsetHeight - 4, "px");
       } else {
@@ -25656,17 +25704,13 @@ function DropdownMenu$1(_a) {
   return jsx("div", __assign({
     ref: menuWrapperRef,
     className: "maru-dropdown-menu-wrapper",
-    "aria-hidden": true,
     onClick: handleWrapperClick
   }, {
     children: jsxs("div", __assign({
       ref: menuRef,
       className: classNames('maru-dropdown-menu', "maru-dropdown-menu-".concat(color), {
         'maru-dropdown-search-menu': isSearch
-        // TODO:
-        // footer: menuBottomButton,
       }),
-      "aria-hidden": true,
       onClick: handleMenuClick
     }, {
       children: [jsx("div", __assign({
@@ -26767,6 +26811,89 @@ function Pagination(_a) {
   }));
 }
 
+function FilterPopover(_a) {
+  var parent = _a.parent,
+    onClose = _a.onClose,
+    formats = _a.formats,
+    resetButtonContent = _a.resetButtonContent,
+    onReset = _a.onReset,
+    searchButtonContent = _a.searchButtonContent,
+    onSearch = _a.onSearch;
+  var wrapperRef = useRef(null);
+  var ref = useRef(null);
+  /**
+   * 팝오버 위치 설정
+   */
+  useEffect(function () {
+    var popover = ref.current;
+    if (popover) {
+      var _a = parent.getClientRects()[0],
+        pw = _a.width,
+        ph = _a.height,
+        pt = _a.top,
+        pr = _a.right;
+      popover.style.right = "".concat(pr - pw, "px");
+      if (ph + pt + popover.offsetHeight + 10 > document.body.offsetHeight) {
+        popover.style.top = "".concat(pt - popover.offsetHeight - 4, "px");
+      } else {
+        popover.style.top = "".concat(pt + ph, "px");
+      }
+      if (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) {
+        wrapperRef.current.style.display = 'block';
+      }
+    }
+  }, []);
+  var handleWrapperClick = function handleWrapperClick(e) {
+    e.stopPropagation();
+    onClose();
+  };
+  var handlePopoverClick = function handlePopoverClick(e) {
+    e.stopPropagation();
+  };
+  return jsx("div", __assign({
+    ref: wrapperRef,
+    className: "maru-search-input-filter-popover-wrapper",
+    onClick: handleWrapperClick
+  }, {
+    children: jsx("div", __assign({
+      ref: ref,
+      className: "maru-search-input-filter-popover",
+      onClick: handlePopoverClick
+    }, {
+      children: jsxs("div", {
+        children: [jsx("ul", {
+          children: formats.map(function (f) {
+            return jsxs("li", {
+              children: [jsx("div", __assign({
+                className: "filter-key"
+              }, {
+                children: jsx("span", {
+                  children: f.columnName
+                })
+              })), jsx("div", __assign({
+                className: "filter-value"
+              }, {
+                children: f.filter
+              }))]
+            }, f.columnIdKey);
+          })
+        }), jsxs("div", {
+          children: [jsx(Button, __assign({
+            variant: "outline",
+            onClick: onReset
+          }, {
+            children: resetButtonContent
+          })), jsx(Button, __assign({
+            onClick: onSearch
+          }, {
+            children: searchButtonContent
+          }))]
+        })]
+      })
+    }))
+  }));
+}
+
 function Filter(_a) {
   var on = _a.on,
     formats = _a.formats,
@@ -26783,7 +26910,9 @@ function Filter(_a) {
     onSearch();
     setOpen(false);
   };
-  return jsxs(Fragment, {
+  return jsxs("div", __assign({
+    className: "maru-search-input-filter"
+  }, {
     children: [jsx("button", __assign({
       type: "button",
       className: classNames('maru-search-input-filter-button', {
@@ -26802,50 +26931,25 @@ function Filter(_a) {
           name: ICONS.Filter_s1613
         })
       }))
-    })), jsx(Popover, __assign({
-      anchorEl: inputWrapperRef.current,
-      open: open,
-      onClose: function onClose() {
-        return setOpen(false);
-      },
-      direction: "bottom-end",
-      className: "maru-search-input-filter-popover"
+    })), open && jsx(CreatePortal, __assign({
+      parent: inputWrapperRef.current
     }, {
-      children: jsxs("div", {
-        children: [jsx("ul", {
-          children: formats.map(function (f) {
-            return jsxs("li", {
-              children: [jsx("div", __assign({
-                className: "filter-key"
-              }, {
-                children: jsx("span", {
-                  children: f.columnName
-                })
-              })), jsx("div", __assign({
-                className: "filter-value"
-              }, {
-                children: f.filter
-              }))]
-            }, f.columnIdKey);
-          })
-        }), jsxs("div", {
-          children: [jsx(Button, __assign({
-            variant: "outline",
-            onClick: onReset
-          }, {
-            children: resetButtonContent
-          })), jsx(Button, __assign({
-            onClick: handleSearch
-          }, {
-            children: searchButtonContent
-          }))]
-        })]
+      children: jsx(FilterPopover, {
+        parent: inputWrapperRef.current,
+        onClose: function onClose() {
+          return setOpen(false);
+        },
+        formats: formats,
+        resetButtonContent: resetButtonContent,
+        onReset: onReset,
+        searchButtonContent: searchButtonContent,
+        onSearch: handleSearch
       })
     }))]
-  });
+  }));
 }
 
-var css_248z$2 = ".maru-search-input .maru-input {\n  border: 1px solid #e4e4e4;\n  background-color: white;\n}\n.maru-search-input .maru-input:focus-visible, .maru-search-input .maru-input:focus-within {\n  background-color: white;\n}\n.maru-search-input .maru-input:hover {\n  background-color: white;\n}\n.maru-search-input .maru-input .maru-input-start-node {\n  margin-right: 8px;\n}\n.maru-search-input .maru-search-input-filter-button {\n  border: unset;\n  background-color: unset;\n  padding: unset;\n  cursor: pointer;\n  display: flex;\n  flex-direction: column;\n}\n.maru-search-input .maru-search-input-filter-button .maru-tooltip-wrapper {\n  padding: 6px 0;\n}\n.maru-search-input .maru-search-input-filter-button svg > path {\n  stroke: #bdbdbd;\n  fill: white;\n}\n.maru-search-input .maru-search-input-filter-button:hover svg > path {\n  stroke: #8c8c8c;\n  fill: #e4e4e4;\n}\n.maru-search-input .maru-search-input-filter-button.active {\n  visibility: hidden;\n}\n.maru-search-input .maru-search-input-filter-button.selected svg > path {\n  stroke: var(--p);\n  fill: var(--p-50);\n}\n.maru-search-input .maru-search-input-filter-popover {\n  padding: 32px;\n  border: 1px solid #e4e4e4;\n  border-radius: 6px;\n}\n.maru-search-input .maru-search-input-filter-popover > div > ul {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.maru-search-input .maru-search-input-filter-popover > div > ul > li {\n  display: flex;\n  gap: 16px;\n}\n.maru-search-input .maru-search-input-filter-popover > div > ul > li .filter-key {\n  width: 88px;\n  display: flex;\n  align-items: center;\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-search-input .maru-search-input-filter-popover > div > ul > li .filter-value {\n  width: 232px;\n}\n.maru-search-input .maru-search-input-filter-popover > div > div {\n  margin-top: 24px;\n  display: flex;\n  justify-content: flex-end;\n  gap: 6px;\n}";
+var css_248z$2 = ".maru-search-input .maru-input {\n  border: 1px solid #e4e4e4;\n  background-color: white;\n}\n.maru-search-input .maru-input:focus-visible, .maru-search-input .maru-input:focus-within {\n  background-color: white;\n}\n.maru-search-input .maru-input:hover {\n  background-color: white;\n}\n.maru-search-input .maru-input .maru-input-start-node {\n  margin-right: 8px;\n}\n.maru-search-input .maru-search-input-filter .maru-search-input-filter-button {\n  border: unset;\n  background-color: unset;\n  padding: unset;\n  cursor: pointer;\n  display: flex;\n  flex-direction: column;\n}\n.maru-search-input .maru-search-input-filter .maru-search-input-filter-button .maru-tooltip-wrapper {\n  padding: 6px 0;\n}\n.maru-search-input .maru-search-input-filter .maru-search-input-filter-button svg > path {\n  stroke: #bdbdbd;\n  fill: white;\n}\n.maru-search-input .maru-search-input-filter .maru-search-input-filter-button:hover svg > path {\n  stroke: #8c8c8c;\n  fill: #e4e4e4;\n}\n.maru-search-input .maru-search-input-filter .maru-search-input-filter-button.active {\n  visibility: hidden;\n}\n.maru-search-input .maru-search-input-filter .maru-search-input-filter-button.selected svg > path {\n  stroke: var(--p);\n  fill: var(--p-50);\n}\n.maru-search-input .maru-search-input-filter-popover-wrapper {\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  position: fixed;\n  z-index: 1600;\n  display: none;\n}\n.maru-search-input .maru-search-input-filter-popover-wrapper .maru-search-input-filter-popover {\n  margin-top: 4px;\n  position: absolute;\n  z-index: 1601;\n  border-radius: 6px;\n  box-shadow: 0px 0px 4px #e4e4e4;\n  background-color: white;\n  padding: 32px;\n  border: 1px solid #e4e4e4;\n  border-radius: 6px;\n}\n.maru-search-input .maru-search-input-filter-popover-wrapper .maru-search-input-filter-popover > div > ul {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.maru-search-input .maru-search-input-filter-popover-wrapper .maru-search-input-filter-popover > div > ul > li {\n  display: flex;\n  gap: 16px;\n}\n.maru-search-input .maru-search-input-filter-popover-wrapper .maru-search-input-filter-popover > div > ul > li .filter-key {\n  width: 88px;\n  display: flex;\n  align-items: center;\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-search-input .maru-search-input-filter-popover-wrapper .maru-search-input-filter-popover > div > ul > li .filter-value {\n  width: 232px;\n}\n.maru-search-input .maru-search-input-filter-popover-wrapper .maru-search-input-filter-popover > div > div {\n  margin-top: 24px;\n  display: flex;\n  justify-content: flex-end;\n  gap: 6px;\n}";
 styleInject(css_248z$2);
 
 function SearchInput(_a) {

package/package.json

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