maru_design2 2.16.1 → 2.16.4

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## [2.16.2](https://github.com/42maru-ai/maru-design2/compare/v2.16.1...v2.16.2) (2024-09-27)
+
+
+### Bug Fixes
+
+* :bento: Icon - UPDATE,ADD sort icons ([c9b14c0](https://github.com/42maru-ai/maru-design2/commit/c9b14c094b4425f9e74d373bf67eb3212a7dbfce))
+* :bug: Dropdown - UPDATE input type condition ([6dbf931](https://github.com/42maru-ai/maru-design2/commit/6dbf931fc35a1b5d8d1052ae15a7e196e0a18b11))
+* :children_crossing: Table - UPDATE sort icon ([7be523c](https://github.com/42maru-ai/maru-design2/commit/7be523c625aa69560dd8ea0d0093b6f6a6cbdbb8))
+
 ## [2.16.1](https://github.com/42maru-ai/maru-design2/compare/v2.16.0...v2.16.1) (2024-09-23)
 
 

package/dist/components/atoms/icon/iconmap.d.ts

@@ -197,7 +197,9 @@ export declare const ICONS: {
     readonly Settings02_s2420: "Settings02_s2420";
     readonly Share03_s1215: "Share03_s1215";
     readonly Share03_s1613: "Share03_s1613";
-    readonly SortOutline_s18: "SortOutline_s18";
+    readonly SortDown_s0815: "SortDown_s0815";
+    readonly SortOutline_s1415: "SortOutline_s1415";
+    readonly SortUp_s0815: "SortUp_s0815";
     readonly State_s16: "State_s16";
     readonly State_s18: "State_s18";
     readonly StopCircle_s1413: "StopCircle_s1413";

package/dist/components/molecules/table/header/SortableColumn.d.ts

@@ -1,8 +1,15 @@
 import { IColumnFormats, ISort } from '../types';
 interface Props {
     format: IColumnFormats;
-    currentSort?: ISort;
-    onSortClick: (columnName: string, sortable: boolean) => () => void;
+    sort?: ISort;
+    onSortClick: (columnName: string) => () => void;
 }
-declare function SortableColumn({ format, currentSort, onSortClick }: Props): import("react/jsx-runtime").JSX.Element;
+/**
+ * 정렬 아닌거 마우스오버하면 쌍방 화살표
+ * 내림차순 정렬이면 아래 화살표
+ * 오름차순 정렬이면 위 화살표
+ * 색깔은 언제나 b500 #5c5c5c
+ * @returns
+ */
+declare function SortableColumn({ format, sort, onSortClick }: Props): import("react/jsx-runtime").JSX.Element;
 export default SortableColumn;

package/dist/components/molecules/table/header/THead.d.ts

@@ -1,8 +1,8 @@
 import { IColumnFormats, ISort } from '../types';
 interface Props {
     formats: IColumnFormats[];
-    currentSort?: ISort;
-    onSortClick: (columnName: string, sortable: boolean) => () => void;
+    sort?: ISort;
+    onSortClick: (columnName: string) => () => void;
     hasCheckbox?: boolean;
     allCheckbox: boolean;
     onAllCheck: (checked: boolean) => void;
@@ -12,5 +12,5 @@ interface Props {
         onReset: () => void;
     };
 }
-declare function THead({ formats, currentSort, onSortClick, hasCheckbox, allCheckbox, onAllCheck, hasActionCol, filter, }: Props): import("react/jsx-runtime").JSX.Element;
+declare function THead({ formats, sort, onSortClick, hasCheckbox, allCheckbox, onAllCheck, hasActionCol, filter, }: Props): import("react/jsx-runtime").JSX.Element;
 export default THead;

package/dist/index.js

@@ -87,7 +87,7 @@ function styleInject(css, ref) {
 var css_248z$i = "* {\n  /* HTML5 display-role reset for older browsers */\n}\n* html,\n* body,\n* div,\n* span,\n* applet,\n* object,\n* iframe,\n* h1,\n* h2,\n* h3,\n* h4,\n* h5,\n* h6,\n* p,\n* blockquote,\n* pre,\n* a,\n* abbr,\n* acronym,\n* address,\n* big,\n* cite,\n* code,\n* del,\n* dfn,\n* em,\n* img,\n* ins,\n* kbd,\n* q,\n* s,\n* samp,\n* small,\n* strike,\n* strong,\n* sub,\n* sup,\n* tt,\n* var,\n* b,\n* u,\n* i,\n* center,\n* dl,\n* dt,\n* dd,\n* ol,\n* ul,\n* li,\n* fieldset,\n* form,\n* label,\n* legend,\n* table,\n* caption,\n* tbody,\n* tfoot,\n* thead,\n* tr,\n* th,\n* td,\n* article,\n* aside,\n* canvas,\n* details,\n* embed,\n* figure,\n* figcaption,\n* footer,\n* header,\n* hgroup,\n* menu,\n* nav,\n* output,\n* ruby,\n* section,\n* summary,\n* time,\n* mark,\n* audio,\n* video {\n  padding: 0;\n  border: 0;\n  margin: 0;\n  font: inherit;\n  font-size: 100%;\n  vertical-align: baseline;\n}\n* article,\n* aside,\n* details,\n* figcaption,\n* figure,\n* footer,\n* header,\n* hgroup,\n* menu,\n* nav,\n* section {\n  display: block;\n}\n* ol,\n* ul {\n  list-style: none;\n}\n* blockquote,\n* q {\n  quotes: none;\n}\n* blockquote::before,\n* blockquote::after,\n* q::before,\n* q::after {\n  content: \"\";\n  content: none;\n}\n* table {\n  border-collapse: collapse;\n  border-spacing: 0;\n}\n* html {\n  box-sizing: border-box;\n}\n* *,\n* *::before,\n* *::after {\n  box-sizing: inherit;\n}";
 styleInject(css_248z$i);
 
-var css_248z$h = ".scrollbar, * {\n  scrollbar-track-color: #e4e4e4;\n  scrollbar-arrow-color: #e4e4e4;\n  scrollbar-3dlight-color: #e4e4e4;\n  scrollbar-highlight-color: #e4e4e4;\n  scrollbar-shadow-color: #e4e4e4;\n  scrollbar-face-color: #e4e4e4;\n}\n\n.scrollbar::-webkit-scrollbar, ::-webkit-scrollbar {\n  background: inherit;\n  width: 6px;\n  height: 6px;\n}\n\n.scrollbar::-webkit-scrollbar-track, ::-webkit-scrollbar-track {\n  background: none;\n}\n\n.scrollbar::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb {\n  background-color: #e4e4e4;\n  border-radius: 16px;\n}\n\n.scrollbar::-webkit-scrollbar-button, ::-webkit-scrollbar-button {\n  display: none;\n}\n\n@font-face {\n  font-family: \"Pretendard\";\n  src: url(\"../../assets/fonts/PretendardVariable.woff2\") format(\"woff2-variations\");\n}\n:root {\n  --primary: var(--p);\n  --primary-50-per: var(--p-50-per);\n  --primary-50: var(--p-50);\n  --primary-20-per: var(--p-20-per);\n  --primary-20: var(--p-20);\n  --primary-10-per: var(--p-10-per);\n  --primary-10: var(--p-10);\n}\n\n[data-theme=blue] {\n  --p: #308acc;\n  --p-50-per: #308acc80;\n  --p-50: #97c4e5;\n  --p-20-per: #308acc33;\n  --p-20: #d6e8f5;\n  --p-10-per: #308acc1a;\n  --p-10: #eaf3fa;\n  --p-05-per: #308acc0d;\n  --p-05: #f5fafd;\n}\n\n[data-theme=green] {\n  --p: #096412;\n  --p-50-per: #09641280;\n  --p-50: #84b188;\n  --p-20-per: #09641233;\n  --p-20: #cee0d0;\n  --p-10-per: #0964121a;\n  --p-10: #e6f0e7;\n  --p-05-per: #0964120d;\n  --p-05: #f3f7f3;\n}";
+var css_248z$h = ".scrollbar, * {\n  scrollbar-track-color: #e4e4e4;\n  scrollbar-arrow-color: #e4e4e4;\n  scrollbar-3dlight-color: #e4e4e4;\n  scrollbar-highlight-color: #e4e4e4;\n  scrollbar-shadow-color: #e4e4e4;\n  scrollbar-face-color: #e4e4e4;\n}\n\n.scrollbar::-webkit-scrollbar, ::-webkit-scrollbar {\n  background: inherit;\n  width: 6px;\n  height: 6px;\n}\n\n.scrollbar::-webkit-scrollbar-track, ::-webkit-scrollbar-track {\n  background: none;\n}\n\n.scrollbar::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb {\n  background-color: #e4e4e4;\n  border-radius: 16px;\n}\n\n.scrollbar::-webkit-scrollbar-button, ::-webkit-scrollbar-button {\n  display: none;\n}\n\n@font-face {\n  font-family: \"Pretendard\";\n  src: url(\"../../assets/fonts/PretendardVariable.woff2\") format(\"woff2-variations\");\n}\n* {\n  -webkit-font-smoothing: antialiased;\n}\n\n:root {\n  --primary: var(--p);\n  --primary-50-per: var(--p-50-per);\n  --primary-50: var(--p-50);\n  --primary-20-per: var(--p-20-per);\n  --primary-20: var(--p-20);\n  --primary-10-per: var(--p-10-per);\n  --primary-10: var(--p-10);\n}\n\n[data-theme=blue] {\n  --p: #308acc;\n  --p-50-per: #308acc80;\n  --p-50: #97c4e5;\n  --p-20-per: #308acc33;\n  --p-20: #d6e8f5;\n  --p-10-per: #308acc1a;\n  --p-10: #eaf3fa;\n  --p-05-per: #308acc0d;\n  --p-05: #f5fafd;\n}\n\n[data-theme=green] {\n  --p: #096412;\n  --p-50-per: #09641280;\n  --p-50: #84b188;\n  --p-20-per: #09641233;\n  --p-20: #cee0d0;\n  --p-10-per: #0964121a;\n  --p-10: #e6f0e7;\n  --p-05-per: #0964120d;\n  --p-05: #f3f7f3;\n}";
 styleInject(css_248z$h);
 
 function StyleProvider(_a) {
@@ -3031,26 +3031,89 @@ var iconmap = {
     "circles": [],
     "rects": []
   },
-  "SortOutline_s18": {
-    "width": "18",
-    "height": "18",
-    "viewBox": "0 0 18 18",
+  "SortDown_s0815": {
+    "width": "8",
+    "height": "12",
+    "viewBox": "0 0 8 12",
     "fill": "none",
     "paths": [{
-      "d": "M12.45 13.7988C12.0772 13.7988 11.775 13.4966 11.775 13.1238L11.775 6.78959L10.2273 8.33729C9.96367 8.6009 9.53629 8.6009 9.27268 8.33729C9.00908 8.07369 9.00908 7.6463 9.27269 7.3827L11.9197 4.73573C12.2125 4.44284 12.6874 4.44284 12.9803 4.73574L15.6273 7.38271C15.8909 7.64631 15.8909 8.0737 15.6273 8.3373C15.3637 8.6009 14.9363 8.6009 14.6727 8.3373L13.125 6.7896L13.125 13.1238C13.125 13.4966 12.8228 13.7988 12.45 13.7988Z",
-      "fill": "#8C8C8C",
-      "fillRule": "evenodd",
-      "clipRule": "evenodd"
+      "d": "M3.85693 1V11",
+      "stroke": "#8C8C8C",
+      "strokeWidth": "1.5",
+      "strokeLinecap": "round",
+      "strokeLinejoin": "round"
     }, {
-      "d": "M4.94999 12.8388L4.94998 5.175C4.94998 4.80221 5.25219 4.5 5.62498 4.5C5.99777 4.5 6.29998 4.80221 6.29998 5.175L6.29999 12.8388C6.29999 13.2116 5.99778 13.5138 5.62499 13.5138C5.2522 13.5138 4.94999 13.2116 4.94999 12.8388Z",
-      "fill": "#8C8C8C",
-      "fillRule": "evenodd",
-      "clipRule": "evenodd"
+      "d": "M6.71408 8.14258L3.85693 10.9997",
+      "stroke": "#8C8C8C",
+      "strokeWidth": "1.5",
+      "strokeLinecap": "round",
+      "strokeLinejoin": "round"
     }, {
-      "d": "M8.80229 9.96152C9.06589 10.2251 9.06589 10.6525 8.80229 10.9161L6.15532 13.5631C5.86243 13.856 5.38755 13.856 5.09466 13.5631L2.4477 10.9161C2.1841 10.6525 2.1841 10.2251 2.4477 9.96151C2.71131 9.69791 3.13869 9.69791 3.4023 9.96152L5.62499 12.1842L7.8477 9.96152C8.1113 9.69792 8.53869 9.69792 8.80229 9.96152Z",
-      "fill": "#8C8C8C",
-      "fillRule": "evenodd",
-      "clipRule": "evenodd"
+      "d": "M1 8.14258L3.85714 10.9997",
+      "stroke": "#8C8C8C",
+      "strokeWidth": "1.5",
+      "strokeLinecap": "round",
+      "strokeLinejoin": "round"
+    }],
+    "circles": [],
+    "rects": []
+  },
+  "SortOutline_s1415": {
+    "width": "14",
+    "height": "12",
+    "viewBox": "0 0 14 12",
+    "fill": "none",
+    "paths": [{
+      "d": "M3.61914 1V11",
+      "stroke": "#8C8C8C",
+      "strokeWidth": "1.5",
+      "strokeLinecap": "round",
+      "strokeLinejoin": "round"
+    }, {
+      "d": "M6.23809 3.61905L3.61905 1L1 3.61905",
+      "stroke": "#8C8C8C",
+      "strokeWidth": "1.5",
+      "strokeLinecap": "round",
+      "strokeLinejoin": "round"
+    }, {
+      "d": "M12.7937 8.38086L10.1747 10.9999L7.71436 8.38086",
+      "stroke": "#8C8C8C",
+      "strokeWidth": "1.5",
+      "strokeLinecap": "round",
+      "strokeLinejoin": "round"
+    }, {
+      "d": "M10.1748 11V1",
+      "stroke": "#8C8C8C",
+      "strokeWidth": "1.5",
+      "strokeLinecap": "round",
+      "strokeLinejoin": "round"
+    }],
+    "circles": [],
+    "rects": []
+  },
+  "SortUp_s0815": {
+    "width": "8",
+    "height": "12",
+    "viewBox": "0 0 8 12",
+    "fill": "none",
+    "paths": [{
+      "d": "M3.85693 1V11",
+      "stroke": "#8C8C8C",
+      "strokeWidth": "1.5",
+      "strokeLinecap": "round",
+      "strokeLinejoin": "round"
+    }, {
+      "d": "M6.71408 3.85714L3.85693 1",
+      "stroke": "#8C8C8C",
+      "strokeWidth": "1.5",
+      "strokeLinecap": "round",
+      "strokeLinejoin": "round"
+    }, {
+      "d": "M1 3.85714L3.85714 1",
+      "stroke": "#8C8C8C",
+      "strokeWidth": "1.5",
+      "strokeLinecap": "round",
+      "strokeLinejoin": "round"
     }],
     "circles": [],
     "rects": []
@@ -3794,7 +3857,9 @@ var ICONS = {
   "Settings02_s2420": "Settings02_s2420",
   "Share03_s1215": "Share03_s1215",
   "Share03_s1613": "Share03_s1613",
-  "SortOutline_s18": "SortOutline_s18",
+  "SortDown_s0815": "SortDown_s0815",
+  "SortOutline_s1415": "SortOutline_s1415",
+  "SortUp_s0815": "SortUp_s0815",
   "State_s16": "State_s16",
   "State_s18": "State_s18",
   "StopCircle_s1413": "StopCircle_s1413",
@@ -4167,8 +4232,8 @@ var Input = /*#__PURE__*/forwardRef(function (_a, inputRef) {
     className = _a.className,
     props = __rest(_a, ["invalid", "label", "type", "onClear", "hiddenClearButton", "wrapperRef", "startNode", "endNode", "className"]);
   var _c = useState(true),
-    pwdVision = _c[0],
-    setPwdVision = _c[1];
+    maskingPassword = _c[0],
+    setMaskingPassword = _c[1]; // *로 보이고 싶으면 true
   var _d = useState(false),
     showClearButton = _d[0],
     setShowClearButton = _d[1];
@@ -4176,7 +4241,7 @@ var Input = /*#__PURE__*/forwardRef(function (_a, inputRef) {
   var hashId = uuidv4(4);
   useEffect(function () {
     return function () {
-      setPwdVision(false);
+      setMaskingPassword(true);
       setShowClearButton(false);
     };
   }, []);
@@ -4253,7 +4318,7 @@ var Input = /*#__PURE__*/forwardRef(function (_a, inputRef) {
       })), jsx("input", __assign({}, props, {
         id: "maru-input-".concat(hashId),
         ref: combineRef,
-        type: type === 'password' && pwdVision ? 'password' : 'text',
+        type: type === 'password' && maskingPassword ? 'password' : 'text',
         onChange: handleInputChange,
         onBlur: handleInputBlur
       })), jsxs("div", __assign({
@@ -4262,14 +4327,17 @@ var Input = /*#__PURE__*/forwardRef(function (_a, inputRef) {
         children: [type === 'password' && !props.disabled && jsx("button", __assign({
           type: "button",
           onClick: function onClick() {
-            return setPwdVision(function (prev) {
+            return setMaskingPassword(function (prev) {
               return !prev;
             });
           },
           tabIndex: -1
         }, {
-          children: jsx(Icon, {
-            name: pwdVision ? ICONS.Eye_s16 : ICONS.EyeOff_s16,
+          children: jsx(Icon
+          // 현재 상태에 대한 아이콘이 아니라 어떻게 하고싶냐는 뜻의 아이콘이니까 반대로 되어있는게 맞다
+          , {
+            // 현재 상태에 대한 아이콘이 아니라 어떻게 하고싶냐는 뜻의 아이콘이니까 반대로 되어있는게 맞다
+            name: maskingPassword ? ICONS.Eye_s16 : ICONS.EyeOff_s16,
             color: "#bdbdbd"
           })
         })), endNode && jsx("div", __assign({
@@ -23177,45 +23245,9 @@ var noSpace = function noSpace(text) {
   return '';
 };
 
-// text char 하나씩 비교하는 경우 (띄워쓰기 무시, 검색할 때 띄워쓰기 무시해야함)
-var setHighlightTextOnDataExceptSpace = function setHighlightTextOnDataExceptSpace(data, targetKey, compareText, autoExcept) {
-  if (autoExcept === void 0) {
-    autoExcept = false;
-  }
-  var setHighlightIdx = function setHighlightIdx(dt) {
-    var pqi = 0;
-    var idx = [-1, -1];
-    for (var i = 0; i <= dt[targetKey].length; i += 1) {
-      if (dt[targetKey][i] !== ' ') {
-        if (pqi === compareText.length) {
-          idx[1] = i;
-          break;
-        }
-        if (dt[targetKey][i].toLowerCase() === compareText[pqi]) {
-          if (pqi === 0) {
-            idx[0] = i;
-          }
-          pqi += 1;
-        } else {
-          pqi = 0;
-        }
-      }
-    }
-    return idx;
-  };
+var searchData = function searchData(data, displayKey, query) {
   return data.reduce(function (acc, curr) {
-    var _a;
-    if (noSpace(curr[targetKey]).toLowerCase().includes(compareText)) {
-      var highlightIdx = setHighlightIdx(curr);
-      if (highlightIdx.every(function (el) {
-        return el !== -1;
-      })) {
-        var highlightText = "".concat(curr[targetKey].slice(0, highlightIdx[0]), "<em>").concat(curr[targetKey].slice(highlightIdx[0], highlightIdx[1]), "</em>").concat(curr[targetKey].slice(highlightIdx[1]));
-        acc.push(__assign(__assign({}, curr), (_a = {}, _a[targetKey] = highlightText, _a)));
-        return acc;
-      }
-    }
-    if (!autoExcept) {
+    if (noSpace(curr[displayKey]).toLowerCase().includes(query)) {
       acc.push(curr);
     }
     return acc;
@@ -23544,16 +23576,10 @@ function DropdownMenu(_a) {
               rowId: item[idKey]
             }, {
               children: jsx("span", {
-                className: "maru-dropdown-menu-item-span",
-                dangerouslySetInnerHTML: {
-                  __html: item[displayKey]
-                }
+                children: item[displayKey]
               })
             })) : jsx("span", {
-              className: "maru-dropdown-menu-item-span",
-              dangerouslySetInnerHTML: {
-                __html: item[displayKey]
-              }
+              children: item[displayKey]
             })
           }), "maru-dropdown-menu-item-".concat(item[idKey]));
         })
@@ -23629,22 +23655,26 @@ function Dropdown(_a) {
     initInputValue();
   };
   useEffect(function () {
-    if (selected === null || selected === void 0 ? void 0 : selected[displayKey]) {
-      setInputValue(selected[displayKey]);
-    } else {
-      // selected === undefined
-      setInputValue('');
+    if (type === 'input') {
+      if (selected === null || selected === void 0 ? void 0 : selected[displayKey]) {
+        setInputValue(selected[displayKey]);
+      } else {
+        // selected === undefined
+        setInputValue('');
+      }
     }
-  }, [selected]);
+  }, [type, selected]);
   // type=input 일때, inputValue 변경 시(사용자가 타이핑) 메뉴 아이템 파싱하여 표시하기 위한 useEffect
   useEffect(function () {
-    var pretreatedQeury = noSpace(inputValue).toLowerCase();
-    if (pretreatedQeury !== '') {
-      setFilteredData(setHighlightTextOnDataExceptSpace(data, displayKey, pretreatedQeury));
-    } else {
-      initFilteredData();
+    if (type === 'input') {
+      var pretreatedQeury = noSpace(inputValue).toLowerCase();
+      if (pretreatedQeury !== '') {
+        setFilteredData(searchData(data, displayKey, pretreatedQeury));
+      } else {
+        initFilteredData();
+      }
     }
-  }, [inputValue]);
+  }, [type, inputValue]);
   var handleInputChange = function handleInputChange(e) {
     setInputValue(e.currentTarget.value);
   };
@@ -24419,22 +24449,43 @@ function FilterTh(_a) {
   }));
 }
 
+/**
+ * 정렬 아닌거 마우스오버하면 쌍방 화살표
+ * 내림차순 정렬이면 아래 화살표
+ * 오름차순 정렬이면 위 화살표
+ * 색깔은 언제나 b500 #5c5c5c
+ * @returns
+ */
 function SortableColumn(_a) {
   var format = _a.format,
-    currentSort = _a.currentSort,
+    sort = _a.sort,
     onSortClick = _a.onSortClick;
   var _b = useState(false),
     hover = _b[0],
     setHover = _b[1];
-  var color = (currentSort === null || currentSort === void 0 ? void 0 : currentSort.columnName) === format.columnIdKey ? 'primary' : hover ? '#84B188' : '#8c8c8c';
+  var iconName = useMemo(function () {
+    // 정렬 아닌거 마우스오버하면 쌍방 화살표
+    if (sort && sort.columnName !== format.columnIdKey && hover) {
+      return ICONS.SortOutline_s1415;
+    }
+    if (sort && sort.columnName === format.columnIdKey) {
+      // 내림차순 정렬이면 아래 화살표
+      if (sort.desc) {
+        return ICONS.SortDown_s0815;
+      }
+      // 오름차순 정렬이면 위 화살표
+      return ICONS.SortUp_s0815;
+    }
+    return undefined;
+  }, [sort, format, hover]);
   return !format.sortable ? jsx("span", {
     children: format.columnName
   }) : jsx(Button, __assign({
-    onClick: onSortClick(format.columnIdKey, format.sortable),
+    onClick: onSortClick(format.columnIdKey),
     variant: "text",
-    endIcon: {
-      name: ICONS.SortOutline_s18,
-      color: color
+    endIcon: iconName && {
+      name: iconName,
+      color: '#5c5c5c'
     },
     color: "secondary",
     className: "maru-table-header-sortable",
@@ -24451,7 +24502,7 @@ function SortableColumn(_a) {
 
 function THead(_a) {
   var formats = _a.formats,
-    currentSort = _a.currentSort,
+    sort = _a.sort,
     onSortClick = _a.onSortClick,
     hasCheckbox = _a.hasCheckbox,
     allCheckbox = _a.allCheckbox,
@@ -24506,12 +24557,12 @@ function THead(_a) {
           }, {
             children: jsx(SortableColumn, {
               format: format,
-              currentSort: currentSort,
+              sort: sort,
               onSortClick: onSortClick
             })
           })) : jsx(SortableColumn, {
             format: format,
-            currentSort: currentSort,
+            sort: sort,
             onSortClick: onSortClick
           })
         }, "column-".concat(format.columnIdKey));
@@ -24631,19 +24682,14 @@ function Table(_a) {
       }
     }
   }, [data, checkedIds]);
-  var handleSortClick = function handleSortClick(columnName, sortable) {
-    if (sortable === void 0) {
-      sortable = false;
-    }
+  var handleSortClick = function handleSortClick(columnName) {
     return function () {
-      var desc = function desc() {
-        if ((sort === null || sort === void 0 ? void 0 : sort.columnName) !== columnName) return true;
-        return !sort.desc;
-      };
-      if (sortable) {
+      if (sort) {
+        // 현재 정렬중인건 방향만 바꾸고 다른거 정렬시키려면 내림차순으로
+        var desc = sort.columnName === columnName ? !sort.desc : true;
         onSort === null || onSort === void 0 ? void 0 : onSort({
           columnName: columnName,
-          desc: desc()
+          desc: desc
         });
       }
     };
@@ -24690,7 +24736,7 @@ function Table(_a) {
         hasActionCol: hasActionCol
       }), jsx(THead, {
         formats: formats,
-        currentSort: sort,
+        sort: sort,
         onSortClick: handleSortClick,
         hasCheckbox: checkedIds != null,
         allCheckbox: allChecked,

package/dist/utils/highlight.d.ts

@@ -1,3 +1 @@
-declare const setHighlightTextOnData: <T>(cb: (func: unknown) => void, data: T[], targetKey: string, compareText: string) => void;
-declare const setHighlightTextOnDataExceptSpace: <T>(data: T[], targetKey: string, compareText: string, autoExcept?: boolean) => typeof data;
-export { setHighlightTextOnData, setHighlightTextOnDataExceptSpace };
+export declare const searchData: <T>(data: T[], displayKey: string, query: string) => typeof data;

package/package.json

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