@soul-refiner/design-system 2.0.1-alpha.1 → 2.0.2

package/dist/components/table/table/table.js

@@ -1,22 +1,50 @@
 "use client";
-"use strict";var React=require("react"),styled=require("styled-components"),box=require("../../atoms/box/box.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const Table=({border:e=!0,children:t,compact:l,footer:a,header:o,separated:r,striped:d,sx:i,padding:n=32})=>React__default.default.createElement(box.Box,{$backgroundColor:"white",$borderRadius:"large",$display:"flex",$dir:"column",$gap:32,$padding:n,sx:l?"width: fit-content;":""},!!o&&o,React__default.default.createElement(box.Box,{$borderRadius:"small",sx:e?"border: 1px solid var(--color-grey-8);":""},React__default.default.createElement(TableElement,{$compact:l,$separated:r,$striped:d,$sx:i},t)),!!a&&a),TableElement=styled.styled.table`
+'use strict';
+
+var React = require('react');
+var styled = require('styled-components');
+var box = require('../../atoms/box/box.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const Table = ({ border = true, children, compact, footer, header, separated, striped, sx, padding = 32, }) => {
+    return (React__default.default.createElement(box.Box, { "$backgroundColor": "white", "$borderRadius": "large", "$display": "flex", "$dir": "column", "$gap": 32, "$padding": padding, sx: compact ? 'width: fit-content;' : '' },
+        !!header && header,
+        React__default.default.createElement(box.Box, { "$borderRadius": "small", sx: border ? 'border: 1px solid var(--color-grey-8);' : '' },
+            React__default.default.createElement(TableElement, { "$compact": compact, "$separated": separated, "$striped": striped, "$sx": sx }, children)),
+        !!footer && footer));
+};
+const TableElement = styled.styled.table `
   width: 100%;
   border-collapse: collapse;
   border-spacing: 0;
-  ${({$compact:e})=>e?"width: fit-content;":""}
-  ${({$separated:e})=>e?`
+  ${({ $compact }) => ($compact ? 'width: fit-content;' : '')}
+  ${({ $separated }) => $separated
+    ? `
     & > tbody > * {
       border-bottom: 1px solid var(--color-grey-9);
       &:last-child {
         border-bottom: none;
       }
-    }`:""}
-  ${({$striped:e})=>e?`
+    }`
+    : ''}
+  ${({ $striped }) => $striped
+    ? `
     & > tbody > *:nth-of-type(even) {
       background-color: var(--color-grey-10);
-    }`:""}
-  ${({$sx:e})=>e||""}
-`,Head=({children:e,...t})=>React__default.default.createElement(HeadElement,{...t},e),HeadElement=styled.styled.thead`
+    }`
+    : ''}
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+/********************************************************
+ *  Table Head
+ */
+const Head = ({ children, ...rest }) => {
+    return React__default.default.createElement(HeadElement, { ...rest }, children);
+};
+const HeadElement = styled.styled.thead `
   tr {
     background-color: var(--color-grey-10);
     border-top-left-radius: 8px;
@@ -30,7 +58,16 @@
       border-top-right-radius: 8px;
     }
   }
-`,Body=(Head.displayName="Table.Head",Table.Head=Head,({children:e,...t})=>React__default.default.createElement(BodyElement,{...t},e)),BodyElement=styled.styled.tbody`
+`;
+Head.displayName = 'Table.Head';
+Table.Head = Head;
+/********************************************************
+ *  Table Body
+ */
+const Body = ({ children, ...rest }) => {
+    return React__default.default.createElement(BodyElement, { ...rest }, children);
+};
+const BodyElement = styled.styled.tbody `
   & > tr:last-of-type {
     & > *:first-child {
       border-bottom-left-radius: 8px;
@@ -40,21 +77,53 @@
       border-bottom-right-radius: 8px;
     }
   }
-`,Foot=(Body.displayName="Table.Body",Table.Body=Body,({children:e,...t})=>React__default.default.createElement("tfoot",{...t},e)),Row=(Foot.displayName="Table.Foot",Table.Footer=Foot,({children:e,disabled:t,href:l,hoverable:a=!1,onClick:o,selected:r,sx:d,...i})=>{var n=l?e=>{e.metaKey||e.ctrlKey?window.open(l,"_blank")?.focus():window.location.href=l}:o?e=>{o(e)}:void 0;return React__default.default.createElement(RowElement,{onClick:n,$disabled:t,$hoverable:a,$isAnchor:!!l,$selected:r,$sx:d,...i},e)}),RowElement=styled.styled.tr`
+`;
+Body.displayName = 'Table.Body';
+Table.Body = Body;
+/********************************************************
+ *  Table Foot
+ */
+const Foot = ({ children, ...rest }) => {
+    return React__default.default.createElement("tfoot", { ...rest }, children);
+};
+Foot.displayName = 'Table.Foot';
+Table.Footer = Foot;
+const Row = ({ children, disabled, href, hoverable = false, onClick, selected, sx, ...rest }) => {
+    const handleClick = href
+        ? (event) => {
+            if (event.metaKey || event.ctrlKey) {
+                const win = window.open(href, '_blank');
+                win?.focus();
+            }
+            else {
+                window.location.href = href;
+            }
+        }
+        : onClick
+            ? (event) => {
+                onClick(event);
+            }
+            : undefined;
+    return (React__default.default.createElement(RowElement, { onClick: handleClick, "$disabled": disabled, "$hoverable": hoverable, "$isAnchor": !!href, "$selected": selected, "$sx": sx, ...rest }, children));
+};
+const RowElement = styled.styled.tr `
   display: table-row;
 
-  ${({$disabled:e})=>e?`
+  ${({ $disabled }) => $disabled
+    ? `
     background-color: var(--color-grey-9) !important;
     color: var(--color-grey-7);
     & > * {
       color: var(--color-grey-7) !important;
-    }`:""}
+    }`
+    : ''}
 
-  ${({$disabled:e,$hoverable:t})=>!e&&t?"background-color: var(--color-grey-9);":""}
+  ${({ $disabled, $hoverable }) => !$disabled && $hoverable ? 'background-color: var(--color-grey-9);' : ''}
 
-  ${({$disabled:e,$selected:t})=>!e&&t?"background-color: var(--color-grey-8;":""}
+  ${({ $disabled, $selected }) => !$disabled && $selected ? 'background-color: var(--color-grey-8;' : ''}
 
-  ${({$disabled:e,$isAnchor:t})=>!e&&t?`
+  ${({ $disabled, $isAnchor }) => !$disabled && $isAnchor
+    ? `
     cursor: pointer;
     padding-right: 24px;
 
@@ -71,31 +140,53 @@
         right: 12px;
         top: calc(50% - 11px);
       }
-    }`:""}
-  ${({$sx:e})=>e||""}
-`,Cell=(Row.displayName="Table.Row",Table.Row=Row,({children:e,lines:t,padding:l="16px 24px",sx:a,textAlign:o="left",verticalAlign:r="middle",width:d})=>{d=d?d*(1/16)+"%":void 0;return React__default.default.createElement(CellElement,{$clamp:t,$padding:l,$sx:a,$textAlign:o,$verticalAlign:r,$width:d||"fit-content"},React__default.default.createElement("div",null,e))}),CellElement=styled.styled.td`
-  width: ${({$width:e})=>e};
+    }`
+    : ''}
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+Row.displayName = 'Table.Row';
+Table.Row = Row;
+const Cell = ({ children, lines, padding = '16px 24px', sx, textAlign = 'left', verticalAlign = 'middle', width, }) => {
+    const percentageWidth = width ? width * (1 / 16) + '%' : undefined;
+    return (React__default.default.createElement(CellElement, { "$clamp": lines, "$padding": padding, "$sx": sx, "$textAlign": textAlign, "$verticalAlign": verticalAlign, "$width": percentageWidth ? percentageWidth : 'fit-content' },
+        React__default.default.createElement("div", null, children)));
+};
+const CellElement = styled.styled.td `
+  width: ${({ $width }) => $width};
   height: 20px;
   font-family: var(--font-inter);
   font-size: 14px;
   font-weight: 400;
   line-height: 20px;
   color: var(--color-grey-3);
-  vertical-align: ${({$verticalAlign:e})=>e||""};
-  text-align: ${({$textAlign:e})=>e||""};
-  padding: ${({$padding:e})=>e};
-  ${({$clamp:e})=>e?`
+  vertical-align: ${({ $verticalAlign }) => $verticalAlign ? $verticalAlign : ''};
+  text-align: ${({ $textAlign }) => ($textAlign ? $textAlign : '')};
+  padding: ${({ $padding }) => $padding};
+  ${({ $clamp }) => $clamp
+    ? `
   & > div {
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
-    line-clamp: ${e};
-    -webkit-line-clamp: ${e};
+    line-clamp: ${$clamp};
+    -webkit-line-clamp: ${$clamp};
     -webkit-box-orient: vertical;
-  }`:""}
-  ${({$sx:e})=>e||""}
-`,HeaderCell=(Cell.displayName="Table.Cell",Table.Cell=Cell,({children:e,lines:t,padding:l="16px 24px",sx:a,textAlign:o="left",verticalAlign:r="middle",width:d})=>{d=d?6.25*d+"%":void 0;return React__default.default.createElement(HeadCellElement,{as:"th",$clamp:t,$padding:l,$sx:a,$textAlign:o,$verticalAlign:r,$width:d||"fit-content"},e)}),HeadCellElement=styled.styled(CellElement)`
+  }`
+    : ''}
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+Cell.displayName = 'Table.Cell';
+Table.Cell = Cell;
+const HeaderCell = ({ children, lines, padding = '16px 24px', sx, textAlign = 'left', verticalAlign = 'middle', width, }) => {
+    const percentageWidth = width ? width * (100 / 16) + '%' : undefined;
+    return (React__default.default.createElement(HeadCellElement, { as: "th", "$clamp": lines, "$padding": padding, "$sx": sx, "$textAlign": textAlign, "$verticalAlign": verticalAlign, "$width": percentageWidth ? percentageWidth : 'fit-content' }, children));
+};
+const HeadCellElement = styled.styled(CellElement) `
   font-size: 16px;
   font-weight: 700;
   line-height: 24px;
-`;HeaderCell.displayName="Table.HeaderCell",Table.HeaderCell=HeaderCell,exports.Table=Table;
+`;
+HeaderCell.displayName = 'Table.HeaderCell';
+Table.HeaderCell = HeaderCell;
+
+exports.Table = Table;