@activecollab/components 1.0.253 → 1.0.254

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -13,20 +13,27 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
13
13
  var StyledTableHead = _styledComponents.default.thead.withConfig({
14
14
  displayName: "Styles__StyledTableHead",
15
15
  componentId: "sc-e16t6w-0"
16
- })(["", " ", " ", " th{", "}tr{td:first-child,th:first-child{", "}}"], _FontStyle.FontStyle, _BoxSizingStyle.BoxSizingStyle, {
16
+ })(["", " ", " ", " ", " ", " ", ""], _FontStyle.FontStyle, _BoxSizingStyle.BoxSizingStyle, {
17
17
  "textAlign": "left",
18
18
  "textTransform": "uppercase"
19
19
  }, {
20
- "whiteSpace": "nowrap",
21
- "paddingLeft": "1rem",
22
- "paddingRight": "1rem",
23
- "paddingBottom": "2rem",
24
- "paddingTop": "0.5rem",
25
20
  "color": "var(--color-theme-700)",
26
21
  "fontWeight": "600",
27
22
  "fontSize": "0.6875rem"
28
- }, {
29
- "paddingLeft": "1.5rem"
23
+ }, function (props) {
24
+ return props.$headerVariant && props.$headerVariant === "primary" && (0, _styledComponents.css)(["th{", "}tr{td:first-child,th:first-child{", "}}"], {
25
+ "whiteSpace": "nowrap",
26
+ "paddingLeft": "1rem",
27
+ "paddingRight": "1rem",
28
+ "paddingBottom": "2rem",
29
+ "paddingTop": "0.5rem"
30
+ }, {
31
+ "paddingLeft": "1.5rem"
32
+ });
33
+ }, function (props) {
34
+ return props.$headerVariant && props.$headerVariant === "secondary" && (0, _styledComponents.css)(["th{", "}tr{th{padding-bottom:8px;padding-left:16px;}}tr{th:last-child{padding-right:16px;}}"], {
35
+ "whiteSpace": "nowrap"
36
+ });
30
37
  });
31
38
  exports.StyledTableHead = StyledTableHead;
32
39
  StyledTableHead.displayName = "StyledTableHead";
@@ -1 +1 @@
1
- {"version":3,"file":"Styles.js","names":["StyledTableHead","styled","thead","FontStyle","BoxSizingStyle","displayName","StyledTableBody","tbody","StyledTableWrapper","div","StyledTable","table","props","$striped","css","StyledDataTable"],"sources":["../../../../src/components/Tables/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const StyledTableHead = styled.thead`\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${tw`tw-text-left tw-uppercase`}\n\n th {\n ${tw`tw-whitespace-nowrap tw-pl-4 tw-pr-4 tw-pb-8 tw-pt-2 tw-text-theme-700 tw-font-semibold tw-text-xxs`}\n }\n\n tr {\n td:first-child,\n th:first-child {\n ${tw`tw-pl-6`}\n }\n }\n`;\nStyledTableHead.displayName = \"StyledTableHead\";\n\nexport const StyledTableBody = styled.tbody`\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${tw`tw-truncate`}\n\n td {\n ${tw`tw-truncate`}\n }\n\n &:not(.c-table__grouped__head) {\n td {\n ${tw`tw-text-theme-700`}\n }\n }\n\n a {\n ${tw`tw-no-underline tw-text-primary`}\n &:hover {\n ${tw`tw-underline`}\n }\n }\n`;\nStyledTableBody.displayName = \"StyledTableBody\";\n\nexport const StyledTableWrapper = styled.div`\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${tw`tw-mt-8 tw-mx-4 tw-overflow-x-auto tw-overflow-y-hidden`}\n\n &:before {\n ${tw`tw-absolute tw-left-0 tw-right-0 tw-bottom-0 tw-bg-page-paper-main tw-rounded-lg tw-shadow-lg`}\n content: \"\";\n top: 39px;\n z-index: -1;\n }\n`;\nStyledTableWrapper.displayName = \"StyledTableWrapper\";\n\nexport const StyledTable = styled.table<{\n $striped: boolean;\n}>`\n ${tw`tw-w-full tw-p-0 tw-text-xs tw-pb-4`}\n border-spacing: 0;\n\n ${StyledTableHead} tr th,\n ${StyledTableBody} tr td {\n &:last-child {\n ${tw`tw-text-right`}\n }\n }\n\n td {\n ${tw`tw-py-3 tw-px-4`}\n }\n\n ${(props) =>\n props.$striped &&\n css`\n ${StyledTableBody}:not(.c-table__grouped__head) {\n tr:nth-child(odd) {\n ${tw`tw-bg-theme-200`}\n }\n }\n `}\n`;\nStyledTable.displayName = \"StyledTable\";\n\nexport const StyledDataTable = styled.div`\n ${FontStyle}\n ${BoxSizingStyle}\n\n &.c-table__collapsible {\n .c-table__head {\n tr {\n th {\n position: sticky;\n top: 0;\n z-index: 1;\n }\n }\n }\n }\n &.c-table__grouped {\n .c-table__head th {\n ${tw`tw-pb-4`}\n &:last-child {\n ${tw`tw-pr-0`}\n }\n }\n }\n &.c-data-table {\n position: relative;\n .c-table__head th {\n &:last-child {\n ${tw`tw-pr-0`}\n }\n }\n }\n .c-table__cell {\n ${tw`tw-relative`}\n &:hover {\n .c-table__icon {\n ${tw`tw-opacity-50`}\n }\n }\n }\n .c-table__overlay {\n ${tw`tw-absolute tw-w-full tw-left-0 tw-pointer-events-none`}\n top: 0px;\n border-top-left-radius: 8px;\n border-top-right-radius: 8px;\n background: rgba(0, 0, 0, 0.02);\n .neon & {\n background: rgba(0, 0, 0, 0.1);\n }\n z-index: 5;\n }\n .c-table__icon-wrapper {\n ${tw`tw-inline-block tw-select-none`}\n }\n .c-table__label {\n ${tw`tw-border-0 tw-border-0 tw-border-transparent tw-border-solid`}\n }\n .c-table__icon {\n transform: translateY(1px);\n ${tw`tw-ml-1`}\n fill: var(--color-theme-900);\n\n &:hover {\n ${tw`tw-opacity-100`}\n }\n }\n .c-table__icon--inactive {\n ${tw`tw-opacity-0`}\n }\n .c-table__icon--active {\n ${tw`tw-opacity-100`}\n }\n .c-table__icon--desc {\n transform: rotate(-180deg) scale(-1, 1);\n }\n .c-table__grouped__head {\n ${tw`tw-font-bold`}\n > :first-child {\n ${tw`tw-text-theme-900`}\n }\n a:first-child {\n ${tw`tw-text-primary`}\n }\n }\n .c-table__head--hidden {\n ${tw`tw-pointer-events-none tw-opacity-0`}\n }\n .c-table__collapse_icon--expanded {\n transition-duration: 0.3s;\n ${tw`tw-cursor-pointer`}\n }\n .c-table__collapse_icon--collapsed {\n transform: rotate(180deg);\n transition-duration: 0.3s;\n ${tw`tw-cursor-pointer`}\n }\n .c-table__head__icon-wrapper__icon {\n ${tw`tw-absolute tw-cursor-pointer`}\n transform: translate(-24px, -5px);\n }\n &.c-table__collapsible {\n .c-table__group {\n .c-table__row:last-child .c-table__cell {\n border-bottom: 1px solid var(--border-primary);\n }\n &:last-child {\n .c-table__row:last-child .c-table__cell {\n border-bottom: 0;\n }\n }\n }\n .c-table__grouped__head {\n tr td {\n border-bottom: 1px solid var(--border-primary);\n }\n .c-table__body__collapse td {\n border-bottom: 0;\n }\n &.last {\n tr td {\n border-bottom: 0 !important;\n }\n }\n }\n .c-table__grouped__head--expanded {\n tr:last-child td {\n border-bottom: 0;\n }\n }\n }\n .c-table__collapse_body {\n tr {\n background-color: transparent !important;\n }\n td:last-child {\n ${tw`tw-border-0`}\n }\n ${tw`tw-absolute`}\n }\n .c-table__row {\n td:first-child {\n position: sticky;\n left: 0;\n z-index: 1;\n }\n &:nth-child(odd) {\n td {\n ${tw`tw-bg-theme-200`}\n }\n }\n &:nth-child(even) {\n td {\n ${tw`tw-bg-page-paper-main`}\n }\n }\n }\n .c-table__row {\n th:first-child {\n position: sticky;\n left: 0;\n z-index: 2 !important;\n }\n }\n &.c-table__collapsible .c-table__body {\n tr {\n td:first-child,\n th:first-child {\n ${tw`tw-pl-6`}\n }\n }\n }\n .c-table__body__icon {\n ${tw`tw-p-0`}\n padding-left: 0 !important;\n transform: translateY(8px);\n }\n &.padding-b-0 {\n ${tw`tw-pb-0`}\n }\n .cursor-pointer {\n ${tw`tw-cursor-pointer`}\n }\n .text-center {\n ${tw`tw-text-center`}\n }\n .opacity-75 {\n ${tw`tw-opacity-75`}\n }\n .hidden {\n ${tw`tw-hidden`}\n }\n`;\nStyledDataTable.displayName = \"StyledDataTable\";\n"],"mappings":";;;;;;;AAAA;AAEA;AACA;AAAyC;AAAA;AAElC,IAAMA,eAAe,GAAGC,yBAAM,CAACC,KAAK;EAAA;EAAA;AAAA,uEACvCC,oBAAS,EACTC,8BAAc,EAEZ;EAAA;EAAA;AAA0B,CAAC,EAGzB;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAoG,CAAC,EAMnG;EAAA;AAAQ,CAAC,CAGlB;AAAC;AACFJ,eAAe,CAACK,WAAW,GAAG,iBAAiB;AAExC,IAAMC,eAAe,GAAGL,yBAAM,CAACM,KAAK;EAAA;EAAA;AAAA,6FACvCJ,oBAAS,EACTC,8BAAc,EAEZ;EAAA;EAAA;EAAA;AAAY,CAAC,EAGX;EAAA;EAAA;EAAA;AAAY,CAAC,EAKX;EAAA;AAAkB,CAAC,EAKrB;EAAA;EAAA;AAAgC,CAAC,EAE/B;EAAA;AAAa,CAAC,CAGvB;AAAC;AACFE,eAAe,CAACD,WAAW,GAAG,iBAAiB;AAExC,IAAMG,kBAAkB,GAAGP,yBAAM,CAACQ,GAAG;EAAA;EAAA;AAAA,wEACxCN,oBAAS,EACTC,8BAAc,EAEZ;EAAA;EAAA;EAAA;EAAA;EAAA;AAAwD,CAAC,EAGvD;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAA8F,CAAC,CAKtG;AAAC;AACFI,kBAAkB,CAACH,WAAW,GAAG,oBAAoB;AAE9C,IAAMK,WAAW,GAAGT,yBAAM,CAACU,KAAK;EAAA;EAAA;AAAA,oFAGjC;EAAA;EAAA;EAAA;EAAA;EAAA;AAAoC,CAAC,EAGvCX,eAAe,EACfM,eAAe,EAET;EAAA;AAAc,CAAC,EAKjB;EAAA;EAAA;EAAA;EAAA;AAAgB,CAAC,EAGrB,UAACM,KAAK;EAAA,OACNA,KAAK,CAACC,QAAQ,QACdC,qBAAG,kEACCR,eAAe,EAET;IAAA;EAAgB,CAAC,CAG1B;AAAA,EACJ;AAAC;AACFI,WAAW,CAACL,WAAW,GAAG,aAAa;AAEhC,IAAMU,eAAe,GAAGd,yBAAM,CAACQ,GAAG;EAAA;EAAA;AAAA,+7DACrCN,oBAAS,EACTC,8BAAc,EAeR;EAAA;AAAQ,CAAC,EAEP;EAAA;AAAQ,CAAC,EAQT;EAAA;AAAQ,CAAC,EAKb;EAAA;AAAY,CAAC,EAGT;EAAA;AAAc,CAAC,EAKnB;EAAA;EAAA;EAAA;EAAA;AAAuD,CAAC,EAWxD;EAAA;EAAA;AAA+B,CAAC,EAGhC;EAAA;EAAA;EAAA;AAA8D,CAAC,EAI/D;EAAA;AAAQ,CAAC,EAIP;EAAA;AAAe,CAAC,EAIlB;EAAA;AAAa,CAAC,EAGd;EAAA;AAAe,CAAC,EAMhB;EAAA;AAAa,CAAC,EAEZ;EAAA;AAAkB,CAAC,EAGnB;EAAA;AAAgB,CAAC,EAInB;EAAA;EAAA;AAAoC,CAAC,EAIrC;EAAA;AAAkB,CAAC,EAKnB;EAAA;AAAkB,CAAC,EAGnB;EAAA;EAAA;AAA8B,CAAC,EAsC7B;EAAA;AAAY,CAAC,EAEf;EAAA;AAAY,CAAC,EAUT;EAAA;AAAgB,CAAC,EAKjB;EAAA;AAAsB,CAAC,EAevB;EAAA;AAAQ,CAAC,EAKb;EAAA;AAAO,CAAC,EAKR;EAAA;AAAQ,CAAC,EAGT;EAAA;AAAkB,CAAC,EAGnB;EAAA;AAAe,CAAC,EAGhB;EAAA;AAAc,CAAC,EAGf;EAAA;AAAU,CAAC,CAElB;AAAC;AACFW,eAAe,CAACV,WAAW,GAAG,iBAAiB"}
1
+ {"version":3,"file":"Styles.js","names":["StyledTableHead","styled","thead","FontStyle","BoxSizingStyle","props","$headerVariant","css","displayName","StyledTableBody","tbody","StyledTableWrapper","div","StyledTable","table","$striped","StyledDataTable"],"sources":["../../../../src/components/Tables/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const StyledTableHead = styled.thead<{\n $headerVariant: \"primary\" | \"secondary\";\n}>`\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${tw`tw-text-left tw-uppercase`}\n ${tw`tw-text-theme-700 tw-font-semibold tw-text-xxs`}\n\n ${(props) =>\n props.$headerVariant &&\n props.$headerVariant === \"primary\" &&\n css`\n th {\n ${tw`tw-whitespace-nowrap tw-pl-4 tw-pr-4 tw-pb-8 tw-pt-2`}\n }\n\n tr {\n td:first-child,\n th:first-child {\n ${tw`tw-pl-6`}\n }\n }\n `}\n\n ${(props) =>\n props.$headerVariant &&\n props.$headerVariant === \"secondary\" &&\n css`\n th {\n ${tw`tw-whitespace-nowrap`}\n }\n\n tr {\n th {\n padding-bottom: 8px;\n padding-left: 16px;\n }\n }\n\n tr {\n th:last-child {\n padding-right: 16px;\n }\n }\n `}\n`;\nStyledTableHead.displayName = \"StyledTableHead\";\n\nexport const StyledTableBody = styled.tbody`\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${tw`tw-truncate`}\n\n td {\n ${tw`tw-truncate`}\n }\n\n &:not(.c-table__grouped__head) {\n td {\n ${tw`tw-text-theme-700`}\n }\n }\n\n a {\n ${tw`tw-no-underline tw-text-primary`}\n &:hover {\n ${tw`tw-underline`}\n }\n }\n`;\nStyledTableBody.displayName = \"StyledTableBody\";\n\nexport const StyledTableWrapper = styled.div`\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${tw`tw-mt-8 tw-mx-4 tw-overflow-x-auto tw-overflow-y-hidden`}\n\n &:before {\n ${tw`tw-absolute tw-left-0 tw-right-0 tw-bottom-0 tw-bg-page-paper-main tw-rounded-lg tw-shadow-lg`}\n content: \"\";\n top: 39px;\n z-index: -1;\n }\n`;\nStyledTableWrapper.displayName = \"StyledTableWrapper\";\n\nexport const StyledTable = styled.table<{\n $striped: boolean;\n}>`\n ${tw`tw-w-full tw-p-0 tw-text-xs tw-pb-4`}\n border-spacing: 0;\n\n ${StyledTableHead} tr th,\n ${StyledTableBody} tr td {\n &:last-child {\n ${tw`tw-text-right`}\n }\n }\n\n td {\n ${tw`tw-py-3 tw-px-4`}\n }\n\n ${(props) =>\n props.$striped &&\n css`\n ${StyledTableBody}:not(.c-table__grouped__head) {\n tr:nth-child(odd) {\n ${tw`tw-bg-theme-200`}\n }\n }\n `}\n`;\nStyledTable.displayName = \"StyledTable\";\n\nexport const StyledDataTable = styled.div`\n ${FontStyle}\n ${BoxSizingStyle}\n\n &.c-table__collapsible {\n .c-table__head {\n tr {\n th {\n position: sticky;\n top: 0;\n z-index: 1;\n }\n }\n }\n }\n &.c-table__grouped {\n .c-table__head th {\n ${tw`tw-pb-4`}\n &:last-child {\n ${tw`tw-pr-0`}\n }\n }\n }\n &.c-data-table {\n position: relative;\n .c-table__head th {\n &:last-child {\n ${tw`tw-pr-0`}\n }\n }\n }\n .c-table__cell {\n ${tw`tw-relative`}\n &:hover {\n .c-table__icon {\n ${tw`tw-opacity-50`}\n }\n }\n }\n .c-table__overlay {\n ${tw`tw-absolute tw-w-full tw-left-0 tw-pointer-events-none`}\n top: 0px;\n border-top-left-radius: 8px;\n border-top-right-radius: 8px;\n background: rgba(0, 0, 0, 0.02);\n .neon & {\n background: rgba(0, 0, 0, 0.1);\n }\n z-index: 5;\n }\n .c-table__icon-wrapper {\n ${tw`tw-inline-block tw-select-none`}\n }\n .c-table__label {\n ${tw`tw-border-0 tw-border-0 tw-border-transparent tw-border-solid`}\n }\n .c-table__icon {\n transform: translateY(1px);\n ${tw`tw-ml-1`}\n fill: var(--color-theme-900);\n\n &:hover {\n ${tw`tw-opacity-100`}\n }\n }\n .c-table__icon--inactive {\n ${tw`tw-opacity-0`}\n }\n .c-table__icon--active {\n ${tw`tw-opacity-100`}\n }\n .c-table__icon--desc {\n transform: rotate(-180deg) scale(-1, 1);\n }\n .c-table__grouped__head {\n ${tw`tw-font-bold`}\n > :first-child {\n ${tw`tw-text-theme-900`}\n }\n a:first-child {\n ${tw`tw-text-primary`}\n }\n }\n .c-table__head--hidden {\n ${tw`tw-pointer-events-none tw-opacity-0`}\n }\n .c-table__collapse_icon--expanded {\n transition-duration: 0.3s;\n ${tw`tw-cursor-pointer`}\n }\n .c-table__collapse_icon--collapsed {\n transform: rotate(180deg);\n transition-duration: 0.3s;\n ${tw`tw-cursor-pointer`}\n }\n .c-table__head__icon-wrapper__icon {\n ${tw`tw-absolute tw-cursor-pointer`}\n transform: translate(-24px, -5px);\n }\n &.c-table__collapsible {\n .c-table__group {\n .c-table__row:last-child .c-table__cell {\n border-bottom: 1px solid var(--border-primary);\n }\n &:last-child {\n .c-table__row:last-child .c-table__cell {\n border-bottom: 0;\n }\n }\n }\n .c-table__grouped__head {\n tr td {\n border-bottom: 1px solid var(--border-primary);\n }\n .c-table__body__collapse td {\n border-bottom: 0;\n }\n &.last {\n tr td {\n border-bottom: 0 !important;\n }\n }\n }\n .c-table__grouped__head--expanded {\n tr:last-child td {\n border-bottom: 0;\n }\n }\n }\n .c-table__collapse_body {\n tr {\n background-color: transparent !important;\n }\n td:last-child {\n ${tw`tw-border-0`}\n }\n ${tw`tw-absolute`}\n }\n .c-table__row {\n td:first-child {\n position: sticky;\n left: 0;\n z-index: 1;\n }\n &:nth-child(odd) {\n td {\n ${tw`tw-bg-theme-200`}\n }\n }\n &:nth-child(even) {\n td {\n ${tw`tw-bg-page-paper-main`}\n }\n }\n }\n .c-table__row {\n th:first-child {\n position: sticky;\n left: 0;\n z-index: 2 !important;\n }\n }\n &.c-table__collapsible .c-table__body {\n tr {\n td:first-child,\n th:first-child {\n ${tw`tw-pl-6`}\n }\n }\n }\n .c-table__body__icon {\n ${tw`tw-p-0`}\n padding-left: 0 !important;\n transform: translateY(8px);\n }\n &.padding-b-0 {\n ${tw`tw-pb-0`}\n }\n .cursor-pointer {\n ${tw`tw-cursor-pointer`}\n }\n .text-center {\n ${tw`tw-text-center`}\n }\n .opacity-75 {\n ${tw`tw-opacity-75`}\n }\n .hidden {\n ${tw`tw-hidden`}\n }\n`;\nStyledDataTable.displayName = \"StyledDataTable\";\n"],"mappings":"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"}
@@ -26,8 +26,11 @@ exports.Table = Table;
26
26
  Table.displayName = "Table";
27
27
  var Thead = function Thead(_ref2) {
28
28
  var children = _ref2.children,
29
- className = _ref2.className;
29
+ className = _ref2.className,
30
+ _ref2$headerVariant = _ref2.headerVariant,
31
+ headerVariant = _ref2$headerVariant === void 0 ? "primary" : _ref2$headerVariant;
30
32
  return /*#__PURE__*/_react.default.createElement(_Styles.StyledTableHead, {
33
+ $headerVariant: headerVariant,
31
34
  className: (0, _classnames.default)("c-table__head", className)
32
35
  }, children);
33
36
  };
@@ -1 +1 @@
1
- {"version":3,"file":"Table.js","names":["Table","children","className","striped","innerRef","classNames","displayName","Thead","Tbody"],"sources":["../../../../src/components/Tables/Table.tsx"],"sourcesContent":["import React, { ReactNode, FC, RefObject } from \"react\";\nimport classNames from \"classnames\";\nimport {\n StyledTableWrapper,\n StyledTable,\n StyledTableBody,\n StyledTableHead,\n} from \"./Styles\";\n\nexport interface ITableWithChildren {\n /** Children prop can be ReactNode. */\n children: ReactNode;\n /** Classname prop for custom styling. */\n className?: string;\n}\n\nexport interface ITableProps {\n /** Darker color on odd column. */\n striped?: boolean;\n /** CSS classes. */\n className?: string;\n /** Ref object for table. */\n innerRef?: RefObject<HTMLTableElement>;\n}\n\nexport const Table: FC<ITableProps & ITableWithChildren> = ({\n children,\n className,\n striped = false,\n innerRef,\n}) => {\n return (\n <StyledTableWrapper className=\"c-table__wrap\">\n <StyledTable\n ref={innerRef}\n className={classNames(\"c-table\", className)}\n $striped={striped}\n >\n {children}\n </StyledTable>\n </StyledTableWrapper>\n );\n};\n\nTable.displayName = \"Table\";\n\nexport const Thead: FC<ITableWithChildren> = ({ children, className }) => (\n <StyledTableHead className={classNames(\"c-table__head\", className)}>\n {children}\n </StyledTableHead>\n);\n\nThead.displayName = \"Thead\";\n\nexport const Tbody: FC<ITableWithChildren> = ({ children, className }) => (\n <StyledTableBody className={classNames(\"c-table__body\", className)}>\n {children}\n </StyledTableBody>\n);\n\nTbody.displayName = \"Tbody\";\n"],"mappings":";;;;;;AAAA;AACA;AACA;AAKkB;AAkBX,IAAMA,KAA2C,GAAG,SAA9CA,KAA2C,OAKlD;EAAA,IAJJC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IAAA,oBACTC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IACfC,QAAQ,QAARA,QAAQ;EAER,oBACE,6BAAC,0BAAkB;IAAC,SAAS,EAAC;EAAe,gBAC3C,6BAAC,mBAAW;IACV,GAAG,EAAEA,QAAS;IACd,SAAS,EAAE,IAAAC,mBAAU,EAAC,SAAS,EAAEH,SAAS,CAAE;IAC5C,QAAQ,EAAEC;EAAQ,GAEjBF,QAAQ,CACG,CACK;AAEzB,CAAC;AAAC;AAEFD,KAAK,CAACM,WAAW,GAAG,OAAO;AAEpB,IAAMC,KAA6B,GAAG,SAAhCA,KAA6B;EAAA,IAAMN,QAAQ,SAARA,QAAQ;IAAEC,SAAS,SAATA,SAAS;EAAA,oBACjE,6BAAC,uBAAe;IAAC,SAAS,EAAE,IAAAG,mBAAU,EAAC,eAAe,EAAEH,SAAS;EAAE,GAChED,QAAQ,CACO;AAAA,CACnB;AAAC;AAEFM,KAAK,CAACD,WAAW,GAAG,OAAO;AAEpB,IAAME,KAA6B,GAAG,SAAhCA,KAA6B;EAAA,IAAMP,QAAQ,SAARA,QAAQ;IAAEC,SAAS,SAATA,SAAS;EAAA,oBACjE,6BAAC,uBAAe;IAAC,SAAS,EAAE,IAAAG,mBAAU,EAAC,eAAe,EAAEH,SAAS;EAAE,GAChED,QAAQ,CACO;AAAA,CACnB;AAAC;AAEFO,KAAK,CAACF,WAAW,GAAG,OAAO"}
1
+ {"version":3,"file":"Table.js","names":["Table","children","className","striped","innerRef","classNames","displayName","Thead","headerVariant","Tbody"],"sources":["../../../../src/components/Tables/Table.tsx"],"sourcesContent":["import React, { ReactNode, FC, RefObject } from \"react\";\nimport classNames from \"classnames\";\nimport {\n StyledTableWrapper,\n StyledTable,\n StyledTableBody,\n StyledTableHead,\n} from \"./Styles\";\n\nexport interface ITableWithChildren {\n /** Children prop can be ReactNode. */\n children: ReactNode;\n /** Classname prop for custom styling. */\n className?: string;\n}\n\nexport interface ITableProps {\n /** Darker color on odd column. */\n striped?: boolean;\n /** CSS classes. */\n className?: string;\n /** Ref object for table. */\n innerRef?: RefObject<HTMLTableElement>;\n}\n\nexport const Table: FC<ITableProps & ITableWithChildren> = ({\n children,\n className,\n striped = false,\n innerRef,\n}) => {\n return (\n <StyledTableWrapper className=\"c-table__wrap\">\n <StyledTable\n ref={innerRef}\n className={classNames(\"c-table\", className)}\n $striped={striped}\n >\n {children}\n </StyledTable>\n </StyledTableWrapper>\n );\n};\n\nTable.displayName = \"Table\";\n\nexport const Thead: FC<\n ITableWithChildren & { headerVariant?: \"primary\" | \"secondary\" }\n> = ({ children, className, headerVariant = \"primary\" }) => (\n <StyledTableHead\n $headerVariant={headerVariant}\n className={classNames(\"c-table__head\", className)}\n >\n {children}\n </StyledTableHead>\n);\n\nThead.displayName = \"Thead\";\n\nexport const Tbody: FC<ITableWithChildren> = ({ children, className }) => (\n <StyledTableBody className={classNames(\"c-table__body\", className)}>\n {children}\n </StyledTableBody>\n);\n\nTbody.displayName = \"Tbody\";\n"],"mappings":";;;;;;AAAA;AACA;AACA;AAKkB;AAkBX,IAAMA,KAA2C,GAAG,SAA9CA,KAA2C,OAKlD;EAAA,IAJJC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IAAA,oBACTC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IACfC,QAAQ,QAARA,QAAQ;EAER,oBACE,6BAAC,0BAAkB;IAAC,SAAS,EAAC;EAAe,gBAC3C,6BAAC,mBAAW;IACV,GAAG,EAAEA,QAAS;IACd,SAAS,EAAE,IAAAC,mBAAU,EAAC,SAAS,EAAEH,SAAS,CAAE;IAC5C,QAAQ,EAAEC;EAAQ,GAEjBF,QAAQ,CACG,CACK;AAEzB,CAAC;AAAC;AAEFD,KAAK,CAACM,WAAW,GAAG,OAAO;AAEpB,IAAMC,KAEZ,GAAG,SAFSA,KAEZ;EAAA,IAAMN,QAAQ,SAARA,QAAQ;IAAEC,SAAS,SAATA,SAAS;IAAA,4BAAEM,aAAa;IAAbA,aAAa,oCAAG,SAAS;EAAA,oBACnD,6BAAC,uBAAe;IACd,cAAc,EAAEA,aAAc;IAC9B,SAAS,EAAE,IAAAH,mBAAU,EAAC,eAAe,EAAEH,SAAS;EAAE,GAEjDD,QAAQ,CACO;AAAA,CACnB;AAAC;AAEFM,KAAK,CAACD,WAAW,GAAG,OAAO;AAEpB,IAAMG,KAA6B,GAAG,SAAhCA,KAA6B;EAAA,IAAMR,QAAQ,SAARA,QAAQ;IAAEC,SAAS,SAATA,SAAS;EAAA,oBACjE,6BAAC,uBAAe;IAAC,SAAS,EAAE,IAAAG,mBAAU,EAAC,eAAe,EAAEH,SAAS;EAAE,GAChED,QAAQ,CACO;AAAA,CACnB;AAAC;AAEFQ,KAAK,CAACH,WAAW,GAAG,OAAO"}
@@ -1,4 +1,6 @@
1
- export declare const StyledTableHead: import("styled-components").StyledComponent<"thead", any, {}, never>;
1
+ export declare const StyledTableHead: import("styled-components").StyledComponent<"thead", any, {
2
+ $headerVariant: "primary" | "secondary";
3
+ }, never>;
2
4
  export declare const StyledTableBody: import("styled-components").StyledComponent<"tbody", any, {}, never>;
3
5
  export declare const StyledTableWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
4
6
  export declare const StyledTable: import("styled-components").StyledComponent<"table", any, {
@@ -1 +1 @@
1
- {"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Tables/Styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,eAAe,sEAgB3B,CAAC;AAGF,eAAO,MAAM,eAAe,sEAsB3B,CAAC;AAGF,eAAO,MAAM,kBAAkB,oEAY9B,CAAC;AAGF,eAAO,MAAM,WAAW;cACZ,OAAO;SAyBlB,CAAC;AAGF,eAAO,MAAM,eAAe,oEA8L3B,CAAC"}
1
+ {"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Tables/Styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,eAAe;oBACV,SAAS,GAAG,WAAW;SA6CxC,CAAC;AAGF,eAAO,MAAM,eAAe,sEAsB3B,CAAC;AAGF,eAAO,MAAM,kBAAkB,oEAY9B,CAAC;AAGF,eAAO,MAAM,WAAW;cACZ,OAAO;SAyBlB,CAAC;AAGF,eAAO,MAAM,eAAe,oEA8L3B,CAAC"}
@@ -4,20 +4,27 @@ import { FontStyle } from "../FontStyle";
4
4
  export var StyledTableHead = styled.thead.withConfig({
5
5
  displayName: "Styles__StyledTableHead",
6
6
  componentId: "sc-e16t6w-0"
7
- })(["", " ", " ", " th{", "}tr{td:first-child,th:first-child{", "}}"], FontStyle, BoxSizingStyle, {
7
+ })(["", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, {
8
8
  "textAlign": "left",
9
9
  "textTransform": "uppercase"
10
10
  }, {
11
- "whiteSpace": "nowrap",
12
- "paddingLeft": "1rem",
13
- "paddingRight": "1rem",
14
- "paddingBottom": "2rem",
15
- "paddingTop": "0.5rem",
16
11
  "color": "var(--color-theme-700)",
17
12
  "fontWeight": "600",
18
13
  "fontSize": "0.6875rem"
19
- }, {
20
- "paddingLeft": "1.5rem"
14
+ }, function (props) {
15
+ return props.$headerVariant && props.$headerVariant === "primary" && css(["th{", "}tr{td:first-child,th:first-child{", "}}"], {
16
+ "whiteSpace": "nowrap",
17
+ "paddingLeft": "1rem",
18
+ "paddingRight": "1rem",
19
+ "paddingBottom": "2rem",
20
+ "paddingTop": "0.5rem"
21
+ }, {
22
+ "paddingLeft": "1.5rem"
23
+ });
24
+ }, function (props) {
25
+ return props.$headerVariant && props.$headerVariant === "secondary" && css(["th{", "}tr{th{padding-bottom:8px;padding-left:16px;}}tr{th:last-child{padding-right:16px;}}"], {
26
+ "whiteSpace": "nowrap"
27
+ });
21
28
  });
22
29
  StyledTableHead.displayName = "StyledTableHead";
23
30
  export var StyledTableBody = styled.tbody.withConfig({
@@ -1 +1 @@
1
- {"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","StyledTableHead","thead","displayName","StyledTableBody","tbody","StyledTableWrapper","div","StyledTable","table","props","$striped","StyledDataTable"],"sources":["../../../../src/components/Tables/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const StyledTableHead = styled.thead`\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${tw`tw-text-left tw-uppercase`}\n\n th {\n ${tw`tw-whitespace-nowrap tw-pl-4 tw-pr-4 tw-pb-8 tw-pt-2 tw-text-theme-700 tw-font-semibold tw-text-xxs`}\n }\n\n tr {\n td:first-child,\n th:first-child {\n ${tw`tw-pl-6`}\n }\n }\n`;\nStyledTableHead.displayName = \"StyledTableHead\";\n\nexport const StyledTableBody = styled.tbody`\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${tw`tw-truncate`}\n\n td {\n ${tw`tw-truncate`}\n }\n\n &:not(.c-table__grouped__head) {\n td {\n ${tw`tw-text-theme-700`}\n }\n }\n\n a {\n ${tw`tw-no-underline tw-text-primary`}\n &:hover {\n ${tw`tw-underline`}\n }\n }\n`;\nStyledTableBody.displayName = \"StyledTableBody\";\n\nexport const StyledTableWrapper = styled.div`\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${tw`tw-mt-8 tw-mx-4 tw-overflow-x-auto tw-overflow-y-hidden`}\n\n &:before {\n ${tw`tw-absolute tw-left-0 tw-right-0 tw-bottom-0 tw-bg-page-paper-main tw-rounded-lg tw-shadow-lg`}\n content: \"\";\n top: 39px;\n z-index: -1;\n }\n`;\nStyledTableWrapper.displayName = \"StyledTableWrapper\";\n\nexport const StyledTable = styled.table<{\n $striped: boolean;\n}>`\n ${tw`tw-w-full tw-p-0 tw-text-xs tw-pb-4`}\n border-spacing: 0;\n\n ${StyledTableHead} tr th,\n ${StyledTableBody} tr td {\n &:last-child {\n ${tw`tw-text-right`}\n }\n }\n\n td {\n ${tw`tw-py-3 tw-px-4`}\n }\n\n ${(props) =>\n props.$striped &&\n css`\n ${StyledTableBody}:not(.c-table__grouped__head) {\n tr:nth-child(odd) {\n ${tw`tw-bg-theme-200`}\n }\n }\n `}\n`;\nStyledTable.displayName = \"StyledTable\";\n\nexport const StyledDataTable = styled.div`\n ${FontStyle}\n ${BoxSizingStyle}\n\n &.c-table__collapsible {\n .c-table__head {\n tr {\n th {\n position: sticky;\n top: 0;\n z-index: 1;\n }\n }\n }\n }\n &.c-table__grouped {\n .c-table__head th {\n ${tw`tw-pb-4`}\n &:last-child {\n ${tw`tw-pr-0`}\n }\n }\n }\n &.c-data-table {\n position: relative;\n .c-table__head th {\n &:last-child {\n ${tw`tw-pr-0`}\n }\n }\n }\n .c-table__cell {\n ${tw`tw-relative`}\n &:hover {\n .c-table__icon {\n ${tw`tw-opacity-50`}\n }\n }\n }\n .c-table__overlay {\n ${tw`tw-absolute tw-w-full tw-left-0 tw-pointer-events-none`}\n top: 0px;\n border-top-left-radius: 8px;\n border-top-right-radius: 8px;\n background: rgba(0, 0, 0, 0.02);\n .neon & {\n background: rgba(0, 0, 0, 0.1);\n }\n z-index: 5;\n }\n .c-table__icon-wrapper {\n ${tw`tw-inline-block tw-select-none`}\n }\n .c-table__label {\n ${tw`tw-border-0 tw-border-0 tw-border-transparent tw-border-solid`}\n }\n .c-table__icon {\n transform: translateY(1px);\n ${tw`tw-ml-1`}\n fill: var(--color-theme-900);\n\n &:hover {\n ${tw`tw-opacity-100`}\n }\n }\n .c-table__icon--inactive {\n ${tw`tw-opacity-0`}\n }\n .c-table__icon--active {\n ${tw`tw-opacity-100`}\n }\n .c-table__icon--desc {\n transform: rotate(-180deg) scale(-1, 1);\n }\n .c-table__grouped__head {\n ${tw`tw-font-bold`}\n > :first-child {\n ${tw`tw-text-theme-900`}\n }\n a:first-child {\n ${tw`tw-text-primary`}\n }\n }\n .c-table__head--hidden {\n ${tw`tw-pointer-events-none tw-opacity-0`}\n }\n .c-table__collapse_icon--expanded {\n transition-duration: 0.3s;\n ${tw`tw-cursor-pointer`}\n }\n .c-table__collapse_icon--collapsed {\n transform: rotate(180deg);\n transition-duration: 0.3s;\n ${tw`tw-cursor-pointer`}\n }\n .c-table__head__icon-wrapper__icon {\n ${tw`tw-absolute tw-cursor-pointer`}\n transform: translate(-24px, -5px);\n }\n &.c-table__collapsible {\n .c-table__group {\n .c-table__row:last-child .c-table__cell {\n border-bottom: 1px solid var(--border-primary);\n }\n &:last-child {\n .c-table__row:last-child .c-table__cell {\n border-bottom: 0;\n }\n }\n }\n .c-table__grouped__head {\n tr td {\n border-bottom: 1px solid var(--border-primary);\n }\n .c-table__body__collapse td {\n border-bottom: 0;\n }\n &.last {\n tr td {\n border-bottom: 0 !important;\n }\n }\n }\n .c-table__grouped__head--expanded {\n tr:last-child td {\n border-bottom: 0;\n }\n }\n }\n .c-table__collapse_body {\n tr {\n background-color: transparent !important;\n }\n td:last-child {\n ${tw`tw-border-0`}\n }\n ${tw`tw-absolute`}\n }\n .c-table__row {\n td:first-child {\n position: sticky;\n left: 0;\n z-index: 1;\n }\n &:nth-child(odd) {\n td {\n ${tw`tw-bg-theme-200`}\n }\n }\n &:nth-child(even) {\n td {\n ${tw`tw-bg-page-paper-main`}\n }\n }\n }\n .c-table__row {\n th:first-child {\n position: sticky;\n left: 0;\n z-index: 2 !important;\n }\n }\n &.c-table__collapsible .c-table__body {\n tr {\n td:first-child,\n th:first-child {\n ${tw`tw-pl-6`}\n }\n }\n }\n .c-table__body__icon {\n ${tw`tw-p-0`}\n padding-left: 0 !important;\n transform: translateY(8px);\n }\n &.padding-b-0 {\n ${tw`tw-pb-0`}\n }\n .cursor-pointer {\n ${tw`tw-cursor-pointer`}\n }\n .text-center {\n ${tw`tw-text-center`}\n }\n .opacity-75 {\n ${tw`tw-opacity-75`}\n }\n .hidden {\n ${tw`tw-hidden`}\n }\n`;\nStyledDataTable.displayName = \"StyledDataTable\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,SAAS,QAAQ,cAAc;AAExC,OAAO,IAAMC,eAAe,GAAGJ,MAAM,CAACK,KAAK;EAAA;EAAA;AAAA,uEACvCF,SAAS,EACTD,cAAc,EAEZ;EAAA;EAAA;AAA0B,CAAC,EAGzB;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAoG,CAAC,EAMnG;EAAA;AAAQ,CAAC,CAGlB;AACDE,eAAe,CAACE,WAAW,GAAG,iBAAiB;AAE/C,OAAO,IAAMC,eAAe,GAAGP,MAAM,CAACQ,KAAK;EAAA;EAAA;AAAA,6FACvCL,SAAS,EACTD,cAAc,EAEZ;EAAA;EAAA;EAAA;AAAY,CAAC,EAGX;EAAA;EAAA;EAAA;AAAY,CAAC,EAKX;EAAA;AAAkB,CAAC,EAKrB;EAAA;EAAA;AAAgC,CAAC,EAE/B;EAAA;AAAa,CAAC,CAGvB;AACDK,eAAe,CAACD,WAAW,GAAG,iBAAiB;AAE/C,OAAO,IAAMG,kBAAkB,GAAGT,MAAM,CAACU,GAAG;EAAA;EAAA;AAAA,wEACxCP,SAAS,EACTD,cAAc,EAEZ;EAAA;EAAA;EAAA;EAAA;EAAA;AAAwD,CAAC,EAGvD;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAA8F,CAAC,CAKtG;AACDO,kBAAkB,CAACH,WAAW,GAAG,oBAAoB;AAErD,OAAO,IAAMK,WAAW,GAAGX,MAAM,CAACY,KAAK;EAAA;EAAA;AAAA,oFAGjC;EAAA;EAAA;EAAA;EAAA;EAAA;AAAoC,CAAC,EAGvCR,eAAe,EACfG,eAAe,EAET;EAAA;AAAc,CAAC,EAKjB;EAAA;EAAA;EAAA;EAAA;AAAgB,CAAC,EAGrB,UAACM,KAAK;EAAA,OACNA,KAAK,CAACC,QAAQ,IACdb,GAAG,iEACCM,eAAe,EAET;IAAA;EAAgB,CAAC,CAG1B;AAAA,EACJ;AACDI,WAAW,CAACL,WAAW,GAAG,aAAa;AAEvC,OAAO,IAAMS,eAAe,GAAGf,MAAM,CAACU,GAAG;EAAA;EAAA;AAAA,+7DACrCP,SAAS,EACTD,cAAc,EAeR;EAAA;AAAQ,CAAC,EAEP;EAAA;AAAQ,CAAC,EAQT;EAAA;AAAQ,CAAC,EAKb;EAAA;AAAY,CAAC,EAGT;EAAA;AAAc,CAAC,EAKnB;EAAA;EAAA;EAAA;EAAA;AAAuD,CAAC,EAWxD;EAAA;EAAA;AAA+B,CAAC,EAGhC;EAAA;EAAA;EAAA;AAA8D,CAAC,EAI/D;EAAA;AAAQ,CAAC,EAIP;EAAA;AAAe,CAAC,EAIlB;EAAA;AAAa,CAAC,EAGd;EAAA;AAAe,CAAC,EAMhB;EAAA;AAAa,CAAC,EAEZ;EAAA;AAAkB,CAAC,EAGnB;EAAA;AAAgB,CAAC,EAInB;EAAA;EAAA;AAAoC,CAAC,EAIrC;EAAA;AAAkB,CAAC,EAKnB;EAAA;AAAkB,CAAC,EAGnB;EAAA;EAAA;AAA8B,CAAC,EAsC7B;EAAA;AAAY,CAAC,EAEf;EAAA;AAAY,CAAC,EAUT;EAAA;AAAgB,CAAC,EAKjB;EAAA;AAAsB,CAAC,EAevB;EAAA;AAAQ,CAAC,EAKb;EAAA;AAAO,CAAC,EAKR;EAAA;AAAQ,CAAC,EAGT;EAAA;AAAkB,CAAC,EAGnB;EAAA;AAAe,CAAC,EAGhB;EAAA;AAAc,CAAC,EAGf;EAAA;AAAU,CAAC,CAElB;AACDa,eAAe,CAACT,WAAW,GAAG,iBAAiB"}
1
+ {"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","StyledTableHead","thead","props","$headerVariant","displayName","StyledTableBody","tbody","StyledTableWrapper","div","StyledTable","table","$striped","StyledDataTable"],"sources":["../../../../src/components/Tables/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const StyledTableHead = styled.thead<{\n $headerVariant: \"primary\" | \"secondary\";\n}>`\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${tw`tw-text-left tw-uppercase`}\n ${tw`tw-text-theme-700 tw-font-semibold tw-text-xxs`}\n\n ${(props) =>\n props.$headerVariant &&\n props.$headerVariant === \"primary\" &&\n css`\n th {\n ${tw`tw-whitespace-nowrap tw-pl-4 tw-pr-4 tw-pb-8 tw-pt-2`}\n }\n\n tr {\n td:first-child,\n th:first-child {\n ${tw`tw-pl-6`}\n }\n }\n `}\n\n ${(props) =>\n props.$headerVariant &&\n props.$headerVariant === \"secondary\" &&\n css`\n th {\n ${tw`tw-whitespace-nowrap`}\n }\n\n tr {\n th {\n padding-bottom: 8px;\n padding-left: 16px;\n }\n }\n\n tr {\n th:last-child {\n padding-right: 16px;\n }\n }\n `}\n`;\nStyledTableHead.displayName = \"StyledTableHead\";\n\nexport const StyledTableBody = styled.tbody`\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${tw`tw-truncate`}\n\n td {\n ${tw`tw-truncate`}\n }\n\n &:not(.c-table__grouped__head) {\n td {\n ${tw`tw-text-theme-700`}\n }\n }\n\n a {\n ${tw`tw-no-underline tw-text-primary`}\n &:hover {\n ${tw`tw-underline`}\n }\n }\n`;\nStyledTableBody.displayName = \"StyledTableBody\";\n\nexport const StyledTableWrapper = styled.div`\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${tw`tw-mt-8 tw-mx-4 tw-overflow-x-auto tw-overflow-y-hidden`}\n\n &:before {\n ${tw`tw-absolute tw-left-0 tw-right-0 tw-bottom-0 tw-bg-page-paper-main tw-rounded-lg tw-shadow-lg`}\n content: \"\";\n top: 39px;\n z-index: -1;\n }\n`;\nStyledTableWrapper.displayName = \"StyledTableWrapper\";\n\nexport const StyledTable = styled.table<{\n $striped: boolean;\n}>`\n ${tw`tw-w-full tw-p-0 tw-text-xs tw-pb-4`}\n border-spacing: 0;\n\n ${StyledTableHead} tr th,\n ${StyledTableBody} tr td {\n &:last-child {\n ${tw`tw-text-right`}\n }\n }\n\n td {\n ${tw`tw-py-3 tw-px-4`}\n }\n\n ${(props) =>\n props.$striped &&\n css`\n ${StyledTableBody}:not(.c-table__grouped__head) {\n tr:nth-child(odd) {\n ${tw`tw-bg-theme-200`}\n }\n }\n `}\n`;\nStyledTable.displayName = \"StyledTable\";\n\nexport const StyledDataTable = styled.div`\n ${FontStyle}\n ${BoxSizingStyle}\n\n &.c-table__collapsible {\n .c-table__head {\n tr {\n th {\n position: sticky;\n top: 0;\n z-index: 1;\n }\n }\n }\n }\n &.c-table__grouped {\n .c-table__head th {\n ${tw`tw-pb-4`}\n &:last-child {\n ${tw`tw-pr-0`}\n }\n }\n }\n &.c-data-table {\n position: relative;\n .c-table__head th {\n &:last-child {\n ${tw`tw-pr-0`}\n }\n }\n }\n .c-table__cell {\n ${tw`tw-relative`}\n &:hover {\n .c-table__icon {\n ${tw`tw-opacity-50`}\n }\n }\n }\n .c-table__overlay {\n ${tw`tw-absolute tw-w-full tw-left-0 tw-pointer-events-none`}\n top: 0px;\n border-top-left-radius: 8px;\n border-top-right-radius: 8px;\n background: rgba(0, 0, 0, 0.02);\n .neon & {\n background: rgba(0, 0, 0, 0.1);\n }\n z-index: 5;\n }\n .c-table__icon-wrapper {\n ${tw`tw-inline-block tw-select-none`}\n }\n .c-table__label {\n ${tw`tw-border-0 tw-border-0 tw-border-transparent tw-border-solid`}\n }\n .c-table__icon {\n transform: translateY(1px);\n ${tw`tw-ml-1`}\n fill: var(--color-theme-900);\n\n &:hover {\n ${tw`tw-opacity-100`}\n }\n }\n .c-table__icon--inactive {\n ${tw`tw-opacity-0`}\n }\n .c-table__icon--active {\n ${tw`tw-opacity-100`}\n }\n .c-table__icon--desc {\n transform: rotate(-180deg) scale(-1, 1);\n }\n .c-table__grouped__head {\n ${tw`tw-font-bold`}\n > :first-child {\n ${tw`tw-text-theme-900`}\n }\n a:first-child {\n ${tw`tw-text-primary`}\n }\n }\n .c-table__head--hidden {\n ${tw`tw-pointer-events-none tw-opacity-0`}\n }\n .c-table__collapse_icon--expanded {\n transition-duration: 0.3s;\n ${tw`tw-cursor-pointer`}\n }\n .c-table__collapse_icon--collapsed {\n transform: rotate(180deg);\n transition-duration: 0.3s;\n ${tw`tw-cursor-pointer`}\n }\n .c-table__head__icon-wrapper__icon {\n ${tw`tw-absolute tw-cursor-pointer`}\n transform: translate(-24px, -5px);\n }\n &.c-table__collapsible {\n .c-table__group {\n .c-table__row:last-child .c-table__cell {\n border-bottom: 1px solid var(--border-primary);\n }\n &:last-child {\n .c-table__row:last-child .c-table__cell {\n border-bottom: 0;\n }\n }\n }\n .c-table__grouped__head {\n tr td {\n border-bottom: 1px solid var(--border-primary);\n }\n .c-table__body__collapse td {\n border-bottom: 0;\n }\n &.last {\n tr td {\n border-bottom: 0 !important;\n }\n }\n }\n .c-table__grouped__head--expanded {\n tr:last-child td {\n border-bottom: 0;\n }\n }\n }\n .c-table__collapse_body {\n tr {\n background-color: transparent !important;\n }\n td:last-child {\n ${tw`tw-border-0`}\n }\n ${tw`tw-absolute`}\n }\n .c-table__row {\n td:first-child {\n position: sticky;\n left: 0;\n z-index: 1;\n }\n &:nth-child(odd) {\n td {\n ${tw`tw-bg-theme-200`}\n }\n }\n &:nth-child(even) {\n td {\n ${tw`tw-bg-page-paper-main`}\n }\n }\n }\n .c-table__row {\n th:first-child {\n position: sticky;\n left: 0;\n z-index: 2 !important;\n }\n }\n &.c-table__collapsible .c-table__body {\n tr {\n td:first-child,\n th:first-child {\n ${tw`tw-pl-6`}\n }\n }\n }\n .c-table__body__icon {\n ${tw`tw-p-0`}\n padding-left: 0 !important;\n transform: translateY(8px);\n }\n &.padding-b-0 {\n ${tw`tw-pb-0`}\n }\n .cursor-pointer {\n ${tw`tw-cursor-pointer`}\n }\n .text-center {\n ${tw`tw-text-center`}\n }\n .opacity-75 {\n ${tw`tw-opacity-75`}\n }\n .hidden {\n ${tw`tw-hidden`}\n }\n`;\nStyledDataTable.displayName = \"StyledDataTable\";\n"],"mappings":"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"}
@@ -14,6 +14,8 @@ export interface ITableProps {
14
14
  innerRef?: RefObject<HTMLTableElement>;
15
15
  }
16
16
  export declare const Table: FC<ITableProps & ITableWithChildren>;
17
- export declare const Thead: FC<ITableWithChildren>;
17
+ export declare const Thead: FC<ITableWithChildren & {
18
+ headerVariant?: "primary" | "secondary";
19
+ }>;
18
20
  export declare const Tbody: FC<ITableWithChildren>;
19
21
  //# sourceMappingURL=Table.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/Tables/Table.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASxD,MAAM,WAAW,kBAAkB;IACjC,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,WAAW;IAC1B,kCAAkC;IAClC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mBAAmB;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;CACxC;AAED,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,WAAW,GAAG,kBAAkB,CAiBtD,CAAC;AAIF,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,kBAAkB,CAIxC,CAAC;AAIF,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,kBAAkB,CAIxC,CAAC"}
1
+ {"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/Tables/Table.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASxD,MAAM,WAAW,kBAAkB;IACjC,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,WAAW;IAC1B,kCAAkC;IAClC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mBAAmB;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;CACxC;AAED,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,WAAW,GAAG,kBAAkB,CAiBtD,CAAC;AAIF,eAAO,MAAM,KAAK,EAAE,EAAE,CACpB,kBAAkB,GAAG;IAAE,aAAa,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;CAAE,CAQjE,CAAC;AAIF,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,kBAAkB,CAIxC,CAAC"}
@@ -18,8 +18,11 @@ export var Table = function Table(_ref) {
18
18
  Table.displayName = "Table";
19
19
  export var Thead = function Thead(_ref2) {
20
20
  var children = _ref2.children,
21
- className = _ref2.className;
21
+ className = _ref2.className,
22
+ _ref2$headerVariant = _ref2.headerVariant,
23
+ headerVariant = _ref2$headerVariant === void 0 ? "primary" : _ref2$headerVariant;
22
24
  return /*#__PURE__*/React.createElement(StyledTableHead, {
25
+ $headerVariant: headerVariant,
23
26
  className: classNames("c-table__head", className)
24
27
  }, children);
25
28
  };
@@ -1 +1 @@
1
- {"version":3,"file":"Table.js","names":["React","classNames","StyledTableWrapper","StyledTable","StyledTableBody","StyledTableHead","Table","children","className","striped","innerRef","displayName","Thead","Tbody"],"sources":["../../../../src/components/Tables/Table.tsx"],"sourcesContent":["import React, { ReactNode, FC, RefObject } from \"react\";\nimport classNames from \"classnames\";\nimport {\n StyledTableWrapper,\n StyledTable,\n StyledTableBody,\n StyledTableHead,\n} from \"./Styles\";\n\nexport interface ITableWithChildren {\n /** Children prop can be ReactNode. */\n children: ReactNode;\n /** Classname prop for custom styling. */\n className?: string;\n}\n\nexport interface ITableProps {\n /** Darker color on odd column. */\n striped?: boolean;\n /** CSS classes. */\n className?: string;\n /** Ref object for table. */\n innerRef?: RefObject<HTMLTableElement>;\n}\n\nexport const Table: FC<ITableProps & ITableWithChildren> = ({\n children,\n className,\n striped = false,\n innerRef,\n}) => {\n return (\n <StyledTableWrapper className=\"c-table__wrap\">\n <StyledTable\n ref={innerRef}\n className={classNames(\"c-table\", className)}\n $striped={striped}\n >\n {children}\n </StyledTable>\n </StyledTableWrapper>\n );\n};\n\nTable.displayName = \"Table\";\n\nexport const Thead: FC<ITableWithChildren> = ({ children, className }) => (\n <StyledTableHead className={classNames(\"c-table__head\", className)}>\n {children}\n </StyledTableHead>\n);\n\nThead.displayName = \"Thead\";\n\nexport const Tbody: FC<ITableWithChildren> = ({ children, className }) => (\n <StyledTableBody className={classNames(\"c-table__body\", className)}>\n {children}\n </StyledTableBody>\n);\n\nTbody.displayName = \"Tbody\";\n"],"mappings":"AAAA,OAAOA,KAAK,MAAoC,OAAO;AACvD,OAAOC,UAAU,MAAM,YAAY;AACnC,SACEC,kBAAkB,EAClBC,WAAW,EACXC,eAAe,EACfC,eAAe,QACV,UAAU;AAkBjB,OAAO,IAAMC,KAA2C,GAAG,SAA9CA,KAA2C,OAKlD;EAAA,IAJJC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IAAA,oBACTC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IACfC,QAAQ,QAARA,QAAQ;EAER,oBACE,oBAAC,kBAAkB;IAAC,SAAS,EAAC;EAAe,gBAC3C,oBAAC,WAAW;IACV,GAAG,EAAEA,QAAS;IACd,SAAS,EAAET,UAAU,CAAC,SAAS,EAAEO,SAAS,CAAE;IAC5C,QAAQ,EAAEC;EAAQ,GAEjBF,QAAQ,CACG,CACK;AAEzB,CAAC;AAEDD,KAAK,CAACK,WAAW,GAAG,OAAO;AAE3B,OAAO,IAAMC,KAA6B,GAAG,SAAhCA,KAA6B;EAAA,IAAML,QAAQ,SAARA,QAAQ;IAAEC,SAAS,SAATA,SAAS;EAAA,oBACjE,oBAAC,eAAe;IAAC,SAAS,EAAEP,UAAU,CAAC,eAAe,EAAEO,SAAS;EAAE,GAChED,QAAQ,CACO;AAAA,CACnB;AAEDK,KAAK,CAACD,WAAW,GAAG,OAAO;AAE3B,OAAO,IAAME,KAA6B,GAAG,SAAhCA,KAA6B;EAAA,IAAMN,QAAQ,SAARA,QAAQ;IAAEC,SAAS,SAATA,SAAS;EAAA,oBACjE,oBAAC,eAAe;IAAC,SAAS,EAAEP,UAAU,CAAC,eAAe,EAAEO,SAAS;EAAE,GAChED,QAAQ,CACO;AAAA,CACnB;AAEDM,KAAK,CAACF,WAAW,GAAG,OAAO"}
1
+ {"version":3,"file":"Table.js","names":["React","classNames","StyledTableWrapper","StyledTable","StyledTableBody","StyledTableHead","Table","children","className","striped","innerRef","displayName","Thead","headerVariant","Tbody"],"sources":["../../../../src/components/Tables/Table.tsx"],"sourcesContent":["import React, { ReactNode, FC, RefObject } from \"react\";\nimport classNames from \"classnames\";\nimport {\n StyledTableWrapper,\n StyledTable,\n StyledTableBody,\n StyledTableHead,\n} from \"./Styles\";\n\nexport interface ITableWithChildren {\n /** Children prop can be ReactNode. */\n children: ReactNode;\n /** Classname prop for custom styling. */\n className?: string;\n}\n\nexport interface ITableProps {\n /** Darker color on odd column. */\n striped?: boolean;\n /** CSS classes. */\n className?: string;\n /** Ref object for table. */\n innerRef?: RefObject<HTMLTableElement>;\n}\n\nexport const Table: FC<ITableProps & ITableWithChildren> = ({\n children,\n className,\n striped = false,\n innerRef,\n}) => {\n return (\n <StyledTableWrapper className=\"c-table__wrap\">\n <StyledTable\n ref={innerRef}\n className={classNames(\"c-table\", className)}\n $striped={striped}\n >\n {children}\n </StyledTable>\n </StyledTableWrapper>\n );\n};\n\nTable.displayName = \"Table\";\n\nexport const Thead: FC<\n ITableWithChildren & { headerVariant?: \"primary\" | \"secondary\" }\n> = ({ children, className, headerVariant = \"primary\" }) => (\n <StyledTableHead\n $headerVariant={headerVariant}\n className={classNames(\"c-table__head\", className)}\n >\n {children}\n </StyledTableHead>\n);\n\nThead.displayName = \"Thead\";\n\nexport const Tbody: FC<ITableWithChildren> = ({ children, className }) => (\n <StyledTableBody className={classNames(\"c-table__body\", className)}>\n {children}\n </StyledTableBody>\n);\n\nTbody.displayName = \"Tbody\";\n"],"mappings":"AAAA,OAAOA,KAAK,MAAoC,OAAO;AACvD,OAAOC,UAAU,MAAM,YAAY;AACnC,SACEC,kBAAkB,EAClBC,WAAW,EACXC,eAAe,EACfC,eAAe,QACV,UAAU;AAkBjB,OAAO,IAAMC,KAA2C,GAAG,SAA9CA,KAA2C,OAKlD;EAAA,IAJJC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IAAA,oBACTC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IACfC,QAAQ,QAARA,QAAQ;EAER,oBACE,oBAAC,kBAAkB;IAAC,SAAS,EAAC;EAAe,gBAC3C,oBAAC,WAAW;IACV,GAAG,EAAEA,QAAS;IACd,SAAS,EAAET,UAAU,CAAC,SAAS,EAAEO,SAAS,CAAE;IAC5C,QAAQ,EAAEC;EAAQ,GAEjBF,QAAQ,CACG,CACK;AAEzB,CAAC;AAEDD,KAAK,CAACK,WAAW,GAAG,OAAO;AAE3B,OAAO,IAAMC,KAEZ,GAAG,SAFSA,KAEZ;EAAA,IAAML,QAAQ,SAARA,QAAQ;IAAEC,SAAS,SAATA,SAAS;IAAA,4BAAEK,aAAa;IAAbA,aAAa,oCAAG,SAAS;EAAA,oBACnD,oBAAC,eAAe;IACd,cAAc,EAAEA,aAAc;IAC9B,SAAS,EAAEZ,UAAU,CAAC,eAAe,EAAEO,SAAS;EAAE,GAEjDD,QAAQ,CACO;AAAA,CACnB;AAEDK,KAAK,CAACD,WAAW,GAAG,OAAO;AAE3B,OAAO,IAAMG,KAA6B,GAAG,SAAhCA,KAA6B;EAAA,IAAMP,QAAQ,SAARA,QAAQ;IAAEC,SAAS,SAATA,SAAS;EAAA,oBACjE,oBAAC,eAAe;IAAC,SAAS,EAAEP,UAAU,CAAC,eAAe,EAAEO,SAAS;EAAE,GAChED,QAAQ,CACO;AAAA,CACnB;AAEDO,KAAK,CAACH,WAAW,GAAG,OAAO"}
package/dist/index.js CHANGED
@@ -8193,20 +8193,27 @@
8193
8193
  var StyledTableHead = styled__default["default"].thead.withConfig({
8194
8194
  displayName: "Styles__StyledTableHead",
8195
8195
  componentId: "sc-e16t6w-0"
8196
- })(["", " ", " ", " th{", "}tr{td:first-child,th:first-child{", "}}"], FontStyle, BoxSizingStyle, {
8196
+ })(["", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, {
8197
8197
  "textAlign": "left",
8198
8198
  "textTransform": "uppercase"
8199
8199
  }, {
8200
- "whiteSpace": "nowrap",
8201
- "paddingLeft": "1rem",
8202
- "paddingRight": "1rem",
8203
- "paddingBottom": "2rem",
8204
- "paddingTop": "0.5rem",
8205
8200
  "color": "var(--color-theme-700)",
8206
8201
  "fontWeight": "600",
8207
8202
  "fontSize": "0.6875rem"
8208
- }, {
8209
- "paddingLeft": "1.5rem"
8203
+ }, function (props) {
8204
+ return props.$headerVariant && props.$headerVariant === "primary" && styled.css(["th{", "}tr{td:first-child,th:first-child{", "}}"], {
8205
+ "whiteSpace": "nowrap",
8206
+ "paddingLeft": "1rem",
8207
+ "paddingRight": "1rem",
8208
+ "paddingBottom": "2rem",
8209
+ "paddingTop": "0.5rem"
8210
+ }, {
8211
+ "paddingLeft": "1.5rem"
8212
+ });
8213
+ }, function (props) {
8214
+ return props.$headerVariant && props.$headerVariant === "secondary" && styled.css(["th{", "}tr{th{padding-bottom:8px;padding-left:16px;}}tr{th:last-child{padding-right:16px;}}"], {
8215
+ "whiteSpace": "nowrap"
8216
+ });
8210
8217
  });
8211
8218
  StyledTableHead.displayName = "StyledTableHead";
8212
8219
  var StyledTableBody = styled__default["default"].tbody.withConfig({
@@ -8362,8 +8369,11 @@
8362
8369
  Table.displayName = "Table";
8363
8370
  var Thead = function Thead(_ref2) {
8364
8371
  var children = _ref2.children,
8365
- className = _ref2.className;
8372
+ className = _ref2.className,
8373
+ _ref2$headerVariant = _ref2.headerVariant,
8374
+ headerVariant = _ref2$headerVariant === void 0 ? "primary" : _ref2$headerVariant;
8366
8375
  return /*#__PURE__*/React__default["default"].createElement(StyledTableHead, {
8376
+ $headerVariant: headerVariant,
8367
8377
  className: classNames__default["default"]("c-table__head", className)
8368
8378
  }, children);
8369
8379
  };