maru_design2 2.16.0 → 2.16.2

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # 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)
+
+
+### Bug Fixes
+
+* :lipstick: Radio - UPDATE primary color hover style ([2ecfdb6](https://github.com/42maru-ai/maru-design2/commit/2ecfdb696c8b14b2ab4d2c64f0a72e5ea9196b04))
+
 ## [2.16.0](https://github.com/42maru-ai/maru-design2/compare/v2.15.2...v2.16.0) (2024-09-10)
 
 

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

@@ -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",
@@ -6197,7 +6262,7 @@ function Popover(_a) {
   }) : PopoverBody;
 }
 
-var css_248z$b = ".maru-radio-wrapper-8px {\n  display: flex;\n  gap: 8px;\n}\n\n.maru-radio-wrapper-4px {\n  display: flex;\n  gap: 4px;\n}\n\n.maru-radio-wrapper-2px {\n  display: flex;\n  gap: 2px;\n}\n\n.maru-radio {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  border: 2px solid #5c5c5c;\n  position: relative;\n  display: inline-block;\n  cursor: pointer;\n}\n.maru-radio:checked::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background-color: #5c5c5c;\n}\n\n.maru-radio:not(:disabled):hover::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background-color: #5c5c5c;\n}\n\n.maru-radio-primary {\n  border: 2px solid var(--p);\n}\n.maru-radio-primary:hover::before, .maru-radio-primary:checked::before {\n  background-color: var(--p);\n}\n\n.maru-radio-label {\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  cursor: pointer;\n}\n\n.maru-radio:disabled,\n.label-disabled {\n  cursor: default;\n  opacity: 0.5;\n}";
+var css_248z$b = ".maru-radio-wrapper-8px {\n  display: flex;\n  gap: 8px;\n}\n\n.maru-radio-wrapper-4px {\n  display: flex;\n  gap: 4px;\n}\n\n.maru-radio-wrapper-2px {\n  display: flex;\n  gap: 2px;\n}\n\n.maru-radio {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  border: 2px solid #5c5c5c;\n  position: relative;\n  display: inline-block;\n  cursor: pointer;\n}\n.maru-radio:checked::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background-color: #5c5c5c;\n}\n.maru-radio:not(:disabled):hover::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background-color: #5c5c5c;\n}\n\n.maru-radio-primary {\n  border: 2px solid var(--p);\n}\n.maru-radio-primary:checked::before {\n  background-color: var(--p);\n}\n.maru-radio-primary:not(:disabled):hover::before {\n  background-color: var(--p);\n}\n\n.maru-radio-label {\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  cursor: pointer;\n}\n\n.maru-radio:disabled,\n.label-disabled {\n  cursor: default;\n  opacity: 0.5;\n}";
 styleInject(css_248z$b);
 
 var Radio = /*#__PURE__*/forwardRef(function (_a, ref) {
@@ -23629,22 +23694,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(setHighlightTextOnDataExceptSpace(data, displayKey, pretreatedQeury));
+      } else {
+        initFilteredData();
+      }
     }
-  }, [inputValue]);
+  }, [type, inputValue]);
   var handleInputChange = function handleInputChange(e) {
     setInputValue(e.currentTarget.value);
   };
@@ -24419,22 +24488,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 +24541,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 +24596,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 +24721,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 +24775,7 @@ function Table(_a) {
         hasActionCol: hasActionCol
       }), jsx(THead, {
         formats: formats,
-        currentSort: sort,
+        sort: sort,
         onSortClick: handleSortClick,
         hasCheckbox: checkedIds != null,
         allCheckbox: allChecked,

package/package.json

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