maru_design2 2.2.0 → 2.3.0

package/dist/components/atoms/chip/Chip.d.ts

@@ -1,12 +1,13 @@
+import React from 'react';
 import { TColor } from '../../../enums/color';
 import { TChipSize } from '../../../enums/size';
 import { TChipVariant } from '../../../enums/variant';
 import './chip.scss';
 export interface ChipProps {
     /**
-     * 컴포넌트에 들어갈 내용. number인 경우 천의 자리마다 컴마(,) 표시됨. [string | number]. (@v1 children)
+     * 컴포넌트에 들어갈 내용. number인 경우 천의 자리마다 컴마(,) 표시됨. [React.ReactNode | string | number].
      */
-    content: string | number;
+    children: React.ReactNode | string | number;
     className?: string;
     /**
      * ['primary', 'secondary', 'positive', 'warning', 'danger']. (@v1 variant)
@@ -21,4 +22,4 @@ export interface ChipProps {
      */
     variant?: TChipVariant;
 }
-export declare function Chip({ content, className, color, size, variant, }: ChipProps): import("react/jsx-runtime").JSX.Element;
+export declare function Chip({ children, className, color, size, variant, }: ChipProps): import("react/jsx-runtime").JSX.Element;

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

@@ -124,6 +124,7 @@ export declare const ICONS: {
     readonly LineChartDown01: "LineChartDown01";
     readonly Loading02Thin: "Loading02Thin";
     readonly Loading02: "Loading02";
+    readonly Lock01Thin: "Lock01Thin";
     readonly LogOut01Thin: "LogOut01Thin";
     readonly MessageCheckSquare: "MessageCheckSquare";
     readonly MessageCheckThin: "MessageCheckThin";

package/dist/components/molecules/table/Table.d.ts

@@ -1,3 +1,3 @@
 import { TableProps } from './types';
 import './table.scss';
-export declare function Table({ rowIdKey, data, formats, sort, onSort, checkedIds, onCheck, kebabMenu, className, id, tableMaxHeight, noData, loading, }: TableProps): import("react/jsx-runtime").JSX.Element;
+export declare function Table({ rowIdKey, data, formats, sort, onSort, checkedIds, onCheck, kebabMenu, onRowClick, selectedRow, className, id, tableMaxHeight, noData, loading, }: TableProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/table/body/TBody.d.ts

@@ -16,6 +16,11 @@ interface Props {
         isLoading: boolean;
         content?: React.ReactNode;
     };
+    onRowClick?: (rowId: string) => void;
+    selectedRow?: {
+        rowId: string;
+        className?: string;
+    };
 }
-declare function TBody({ rowIdKey, formats, data, checkedIds, onCheck, hasKebabMenu, kebabContent, noData, loading, }: Props): import("react/jsx-runtime").JSX.Element;
+declare function TBody({ rowIdKey, formats, data, checkedIds, onCheck, hasKebabMenu, kebabContent, onRowClick, selectedRow, noData, loading, }: Props): import("react/jsx-runtime").JSX.Element;
 export default TBody;

package/dist/components/molecules/table/types.d.ts

@@ -50,8 +50,19 @@ export interface TableProps {
         content: (rowId: string, onClose: () => void) => React.ReactNode;
         width?: string;
     };
+    /**
+     * 테이블 행 클릭 이벤트
+     */
+    onRowClick?: (rowId: string) => void;
     className?: string;
     id?: string;
+    /**
+     * 선택된 행 스타일 지정 (@v1 focusedRowInfo)
+     */
+    selectedRow?: {
+        rowId: string;
+        className?: string;
+    };
     /**
      * 최대 높이
      */

package/dist/index.js

@@ -1762,6 +1762,20 @@ var iconmap = {
     }],
     "circles": []
   },
+  "Lock01Thin": {
+    "width": "16",
+    "height": "16",
+    "viewBox": "0 0 16 16",
+    "fill": "none",
+    "paths": [{
+      "d": "M11.3333 6.66667V5.33333C11.3333 3.49238 9.84094 2 7.99999 2C6.15904 2 4.66666 3.49238 4.66666 5.33333V6.66667M7.99999 9.66667V11M5.86666 14H10.1333C11.2534 14 11.8135 14 12.2413 13.782C12.6176 13.5903 12.9236 13.2843 13.1153 12.908C13.3333 12.4802 13.3333 11.9201 13.3333 10.8V9.86667C13.3333 8.74656 13.3333 8.18651 13.1153 7.75869C12.9236 7.38236 12.6176 7.0764 12.2413 6.88465C11.8135 6.66667 11.2534 6.66667 10.1333 6.66667H5.86666C4.74655 6.66667 4.1865 6.66667 3.75868 6.88465C3.38235 7.0764 3.07639 7.38236 2.88464 7.75869C2.66666 8.18651 2.66666 8.74656 2.66666 9.86667V10.8C2.66666 11.9201 2.66666 12.4802 2.88464 12.908C3.07639 13.2843 3.38235 13.5903 3.75868 13.782C4.1865 14 4.74655 14 5.86666 14Z",
+      "stroke": "#8C8C8C",
+      "strokeWidth": "1.5",
+      "strokeLinecap": "round",
+      "strokeLinejoin": "round"
+    }],
+    "circles": []
+  },
   "LogOut01Thin": {
     "width": "18",
     "height": "18",
@@ -2778,6 +2792,7 @@ var ICONS = {
   "LineChartDown01": "LineChartDown01",
   "Loading02Thin": "Loading02Thin",
   "Loading02": "Loading02",
+  "Lock01Thin": "Lock01Thin",
   "LogOut01Thin": "LogOut01Thin",
   "MessageCheckSquare": "MessageCheckSquare",
   "MessageCheckThin": "MessageCheckThin",
@@ -3075,7 +3090,7 @@ var css_248z$9 = ".maru-chip {\n  display: flex;\n  justify-content: center;\n
 styleInject(css_248z$9);
 
 function Chip(_a) {
-  var content = _a.content,
+  var children = _a.children,
     className = _a.className,
     _b = _a.color,
     color = _b === void 0 ? 'primary' : _b,
@@ -3090,9 +3105,9 @@ function Chip(_a) {
       name: ICONS.StateThin,
       size: 16,
       color: color
-    }), jsx("span", {
-      children: content.toLocaleString('en')
-    })]
+    }), typeof children === 'number' ? jsx("span", {
+      children: children.toLocaleString('en')
+    }) : children]
   }));
 }
 
@@ -6387,10 +6402,10 @@ function TBody(_a) {
     // expandingIdKey,
     // expandingRowIdKey,
     // expandingFormat,
-    // onRowClick,
+    onRowClick = _a.onRowClick,
+    selectedRow = _a.selectedRow,
     // onRowMouseOver,
     // onRowMouseLeave,
-    // focusedRowInfo,
     noData = _a.noData,
     loading = _a.loading;
   var _b = useState([]);
@@ -6419,11 +6434,13 @@ function TBody(_a) {
       onCheck === null || onCheck === void 0 ? void 0 : onCheck(__spreadArray([], newCheckedArray, true));
     }
   };
-  // const handleRowClick = (rowId: string) => () => {
-  //   if (hasRowEvent) {
-  //     onRowClick?.(rowId);
-  //   }
-  // };
+  var handleRowClick = function handleRowClick(rowId) {
+    return function () {
+      // if (hasRowEvent) {
+      onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(rowId);
+      // }
+    };
+  };
   // const handleRowEnter = (rowId: string) => () => {
   //   if (hasRowEvent) {
   //     onRowMouseOver?.(rowId);
@@ -6453,11 +6470,14 @@ function TBody(_a) {
     }) : data.map(function (row) {
       return jsx(React.Fragment, {
         children: jsxs("tr", __assign({
-          // onClick={handleRowClick(row[rowIdKey])}
+          onClick: handleRowClick(row[rowIdKey]),
           // onMouseEnter={handleRowEnter(row[rowIdKey])}
           // onMouseLeave={handleRowLeave(row[rowIdKey])}
           // aria-hidden={hasRowEvent}
-          className: classNames()
+          className: classNames({
+            'clickable-row': onRowClick,
+            'selected-row': selectedRow && (selectedRow === null || selectedRow === void 0 ? void 0 : selectedRow.rowId) === row[rowIdKey]
+          }, selectedRow && (selectedRow === null || selectedRow === void 0 ? void 0 : selectedRow.className))
         }, {
           children: [checkedIds != null && jsx(CheckboxTd, {
             rowId: row[rowIdKey],
@@ -6569,7 +6589,7 @@ function Colgroup(_a) {
   });
 }
 
-var css_248z = ".maru-table-wrapper {\n  width: 100%;\n  background-color: white;\n  box-shadow: 0px 0px 6px #e4e4e4;\n  border-radius: 15px;\n}\n.maru-table-wrapper .maru-table-header-wrapper,\n.maru-table-wrapper .maru-table-body-wrapper {\n  width: 100%;\n}\n.maru-table-wrapper tr {\n  height: 54px;\n}\n.maru-table-wrapper th,\n.maru-table-wrapper td {\n  text-align: start;\n  vertical-align: middle;\n  padding: 16.5px 15px;\n  word-break: break-word;\n}\n.maru-table-wrapper .maru-table-header tr {\n  border-bottom: 1px solid #e4e4e4;\n}\n.maru-table-wrapper .maru-table-header tr th {\n  color: #5c5c5c;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 700;\n}\n.maru-table-wrapper .maru-table-header .maru-table-header-sortable {\n  padding: unset;\n  margin: unset;\n  color: #5c5c5c;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 700;\n}\n.maru-table-wrapper .maru-table-body-scroll-wrapper {\n  overflow-y: auto;\n}\n.maru-table-wrapper .maru-table-body-scroll-wrapper .maru-table-scroll {\n  overflow-y: auto;\n}\n.maru-table-wrapper .maru-table-body tr:not(:last-of-type) {\n  border-bottom: 1px solid #fafafa;\n}\n.maru-table-wrapper .maru-table-body tr:hover,\n.maru-table-wrapper .maru-table-body .row-clickable:hover {\n  background-color: var(--p-10) !important;\n}\n.maru-table-wrapper .maru-table-body td {\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-table-wrapper .maru-table-body tr:last-of-type td:first-of-type {\n  border-bottom-left-radius: 15px;\n}\n.maru-table-wrapper .maru-table-body tr:last-of-type td:last-of-type {\n  border-bottom-right-radius: 15px;\n}\n.maru-table-wrapper .maru-table-body .row-clickable {\n  cursor: pointer;\n}\n.maru-table-wrapper .maru-table-body .expanding {\n  border-bottom: unset !important;\n}\n.maru-table-wrapper .maru-checkbox {\n  border-color: #bdbdbd;\n}\n.maru-table-wrapper .maru-table-body-kebab-wrapper {\n  text-align: center;\n}\n.maru-table-wrapper .maru-table-body-kebab {\n  margin: unset;\n  padding: unset;\n  height: auto;\n}\n.maru-table-wrapper .maru-table-body-empty-tr > td {\n  width: 100%;\n  vertical-align: middle;\n  text-align: center;\n  padding: 61px 0;\n}\n.maru-table-wrapper .maru-table-body-empty-tr > td p {\n  margin-top: 10px;\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: #bdbdbd;\n}\n.maru-table-wrapper .maru-table-body-expandable-button {\n  width: 24px;\n  height: 24px;\n  padding: 0.2rem;\n}\n.maru-table-wrapper .maru-table-body-expanding-row {\n  border: unset !important;\n}\n.maru-table-wrapper .maru-table-body-expanding-row.empty-last-expanding-row {\n  border-bottom: 1px solid #bdbdbd !important;\n  height: 12px !important;\n}";
+var css_248z = ".maru-table-wrapper {\n  width: 100%;\n  background-color: white;\n  box-shadow: 0px 0px 6px #e4e4e4;\n  border-radius: 15px;\n}\n.maru-table-wrapper .maru-table-header-wrapper,\n.maru-table-wrapper .maru-table-body-wrapper {\n  width: 100%;\n}\n.maru-table-wrapper tr {\n  height: 54px;\n}\n.maru-table-wrapper th,\n.maru-table-wrapper td {\n  text-align: start;\n  vertical-align: middle;\n  padding: 16.5px 15px;\n  word-break: break-word;\n}\n.maru-table-wrapper .maru-table-header tr {\n  border-bottom: 1px solid #e4e4e4;\n}\n.maru-table-wrapper .maru-table-header tr th {\n  color: #5c5c5c;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 700;\n}\n.maru-table-wrapper .maru-table-header .maru-table-header-sortable {\n  padding: unset;\n  margin: unset;\n  color: #5c5c5c;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 700;\n}\n.maru-table-wrapper .maru-table-body-scroll-wrapper {\n  overflow-y: auto;\n}\n.maru-table-wrapper .maru-table-body-scroll-wrapper .maru-table-scroll {\n  overflow-y: auto;\n}\n.maru-table-wrapper .maru-table-body tr:not(:last-of-type) {\n  border-bottom: 1px solid #fafafa;\n}\n.maru-table-wrapper .maru-table-body tr:hover,\n.maru-table-wrapper .maru-table-body .clickable-row:hover,\n.maru-table-wrapper .maru-table-body .selected-row {\n  background-color: var(--p-10) !important;\n}\n.maru-table-wrapper .maru-table-body td {\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-table-wrapper .maru-table-body tr:last-of-type td:first-of-type {\n  border-bottom-left-radius: 15px;\n}\n.maru-table-wrapper .maru-table-body tr:last-of-type td:last-of-type {\n  border-bottom-right-radius: 15px;\n}\n.maru-table-wrapper .maru-table-body .clickable-row {\n  cursor: pointer;\n}\n.maru-table-wrapper .maru-table-body .expanding {\n  border-bottom: unset !important;\n}\n.maru-table-wrapper .maru-checkbox {\n  border-color: #bdbdbd;\n}\n.maru-table-wrapper .maru-table-body-kebab-wrapper {\n  text-align: center;\n}\n.maru-table-wrapper .maru-table-body-kebab {\n  margin: unset;\n  padding: unset;\n  height: auto;\n}\n.maru-table-wrapper .maru-table-body-empty-tr > td {\n  width: 100%;\n  vertical-align: middle;\n  text-align: center;\n  padding: 61px 0;\n}\n.maru-table-wrapper .maru-table-body-empty-tr > td p {\n  margin-top: 10px;\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: #bdbdbd;\n}\n.maru-table-wrapper .maru-table-body-expandable-button {\n  width: 24px;\n  height: 24px;\n  padding: 0.2rem;\n}\n.maru-table-wrapper .maru-table-body-expanding-row {\n  border: unset !important;\n}\n.maru-table-wrapper .maru-table-body-expanding-row.empty-last-expanding-row {\n  border-bottom: 1px solid #bdbdbd !important;\n  height: 12px !important;\n}";
 styleInject(css_248z);
 
 // eslint-disable-next-line import/prefer-default-export
@@ -6588,12 +6608,12 @@ function Table(_a) {
     // expandingFormat,
     // onTableMouseEnter,
     // onTableMouseLeave,
-    // onRowClick,
+    onRowClick = _a.onRowClick,
+    selectedRow = _a.selectedRow,
     // onRowMouseOver,
     // onRowMouseLeave,
     className = _a.className,
     id = _a.id,
-    // focusedRowInfo,
     tableMaxHeight = _a.tableMaxHeight,
     noData = _a.noData,
     loading = _a.loading;
@@ -6744,10 +6764,10 @@ function Table(_a) {
           // expandingIdKey={expandingIdKey}
           // expandingRowIdKey={expandingRowIdKey}
           // expandingFormat={expandingFormat}
-          // onRowClick={onRowClick}
+          onRowClick: onRowClick,
           // onRowMouseOver={onRowMouseOver}
           // onRowMouseLeave={onRowMouseLeave}
-          // focusedRowInfo={focusedRowInfo}
+          selectedRow: selectedRow,
           noData: noData,
           loading: loading
         })]

package/package.json

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