@mrshmllw/smores-react 11.0.1-crumbs-feature-adjust-package-2.1 → 11.1.0-crumbs-feature-support-rounded-sub-tables.1

package/dist/Table/Table.d.ts

@@ -13,4 +13,4 @@ import { TableProps } from './types';
  * ## Improvements:
  * - It would be nice if we expandable logic inside this component, e.g the presence of certain props would automatically add this
  */
-export declare const Table: <T extends object>({ columns, data, fixedHeader, hasKeyline, expandable, subTable, subRows, headerHeight, headerColor, rowColor, stripedColor, rowBorderColor, rowActions, clickableRow, rowPadding, columnPadding, noDataContent, hideTableHeader, }: TableProps<T>) => React.JSX.Element;
+export declare const Table: <T extends object>({ columns, data, fixedHeader, hasKeyline, expandable, subTable, subRows, headerHeight, headerColor, rowColor, stripedColor, rowBorderColor, rowActions, clickableRow, rowPadding, columnPadding, noDataContent, roundedTable, hideTableHeader, }: TableProps<T>) => React.JSX.Element;

package/dist/Table/Table.js

@@ -16,16 +16,16 @@ import { StyledCell, StyledTable } from './components/commonComponents';
  * ## Improvements:
  * - It would be nice if we expandable logic inside this component, e.g the presence of certain props would automatically add this
  */
-export const Table = ({ columns, data, fixedHeader = true, hasKeyline = false, expandable, subTable, subRows, headerHeight, headerColor = 'mascarpone', rowColor = 'custard', stripedColor, rowBorderColor = 'oatmeal', rowActions, clickableRow, rowPadding, columnPadding, noDataContent, hideTableHeader = false, }) => {
-    const showActionsCell = expandable || rowActions;
+export const Table = ({ columns, data, fixedHeader = true, hasKeyline = false, expandable, subTable, subRows, headerHeight, headerColor = 'mascarpone', rowColor = 'custard', stripedColor, rowBorderColor = 'oatmeal', rowActions, clickableRow, rowPadding, columnPadding, noDataContent, roundedTable, hideTableHeader = false, }) => {
+    const showActionsCell = expandable ?? rowActions;
     const expandSubProp = showActionsCell ? columns.length + 1 : columns.length;
-    return (React.createElement(StyledTable, null,
+    return (React.createElement(StyledTable, { "$roundedTable": roundedTable },
         !hideTableHeader && (React.createElement("thead", null,
             React.createElement(TableHeader, { columns: columns, fixedHeader: fixedHeader, headerHeight: headerHeight, subTable: subTable, headerColor: headerColor, rowActions: rowActions, columnPadding: columnPadding, expandable: expandable, hasKeyline: hasKeyline }))),
         React.createElement("tbody", null,
             data.length === 0 && (React.createElement("tr", null,
-                React.createElement(StyledCell, { colSpan: expandSubProp, "$rowPadding": rowPadding, "$columnPadding": columnPadding }, noDataContent ? (noDataContent) : (React.createElement(Text, { align: "center" }, "No available data"))))),
+                React.createElement(StyledCell, { colSpan: expandSubProp, "$rowPadding": rowPadding, "$columnPadding": columnPadding }, noDataContent ?? React.createElement(Text, { align: "center" }, "No available data")))),
             data.length !== 0 &&
-                data.map((row, rowIndex) => (React.createElement(TableRow, { key: rowIndex, rowData: row, rowIndex: rowIndex, columns: columns, rowActions: rowActions, stripedColor: stripedColor, subTable: subTable, subRows: subRows, rowColor: rowColor, rowBorderColor: rowBorderColor, rowPadding: rowPadding, columnPadding: columnPadding, expandable: expandable, clickableRow: clickableRow }))))));
+                data.map((row, rowIndex) => (React.createElement(TableRow, { key: rowIndex, rowData: row, rowIndex: rowIndex, columns: columns, rowActions: rowActions, stripedColor: stripedColor, subTable: subTable, subRows: subRows, rowColor: rowColor, rowBorderColor: rowBorderColor, rowPadding: rowPadding, columnPadding: columnPadding, expandable: expandable, clickableRow: clickableRow, hideBorder: Boolean(roundedTable) && rowIndex === data.length - 1 }))))));
 };
 //# sourceMappingURL=Table.js.map

package/dist/Table/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../src/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAA;AAGvE;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAmB,EACtC,OAAO,EACP,IAAI,EACJ,WAAW,GAAG,IAAI,EAClB,UAAU,GAAG,KAAK,EAClB,UAAU,EACV,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,WAAW,GAAG,YAAY,EAC1B,QAAQ,GAAG,SAAS,EACpB,YAAY,EACZ,cAAc,GAAG,SAAS,EAC1B,UAAU,EACV,YAAY,EACZ,UAAU,EACV,aAAa,EACb,aAAa,EACb,eAAe,GAAG,KAAK,GACT,EAAE,EAAE;IAClB,MAAM,eAAe,GAAG,UAAU,IAAI,UAAU,CAAA;IAChD,MAAM,aAAa,GAAG,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAA;IAC3E,OAAO,CACL,oBAAC,WAAW;QACT,CAAC,eAAe,IAAI,CACnB;YACE,oBAAC,WAAW,IACV,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,GACtB,CACI,CACT;QACD;YACG,IAAI,CAAC,MAAM,KAAK,CAAC,IAAI,CACpB;gBACE,oBAAC,UAAU,IACT,OAAO,EAAE,aAAa,iBACT,UAAU,oBACP,aAAa,IAE5B,aAAa,CAAC,CAAC,CAAC,CACf,aAAa,CACd,CAAC,CAAC,CAAC,CACF,oBAAC,IAAI,IAAC,KAAK,EAAC,QAAQ,wBAAyB,CAC9C,CACU,CACV,CACN;YACA,IAAI,CAAC,MAAM,KAAK,CAAC;gBAChB,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,QAAQ,EAAE,EAAE,CAAC,CAC1B,oBAAC,QAAQ,IACP,GAAG,EAAE,QAAQ,EACb,OAAO,EAAE,GAAG,EACZ,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,GAC1B,CACH,CAAC,CACE,CACI,CACf,CAAA;AACH,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { Text } from '../Text'\nimport { TableHeader } from './components/TableHeader'\nimport { TableRow } from './components/TableRow'\nimport { StyledCell, StyledTable } from './components/commonComponents'\nimport { TableProps } from './types'\n\n/**\n * A table component that displays data with various features such as expandable rows, striped rows, and fixed headers.\n *\n * ## Caveats:\n * - `subRows` should always have the same columns as the Parent table\n * - `stripedColor` wont be applied to `subRows` or `subTables`\n * - `rowActions` will always need an `onClick`, this will be automatically passed onto the `ReactNode` you place & will be selectable\n * - Rows will scale depending on the cell content size\n * - Using `clickableRow` with clickable cells, ensure you use `e.stopPropagation` in your cells `onClick`\n *\n * ## Improvements:\n * - It would be nice if we expandable logic inside this component, e.g the presence of certain props would automatically add this\n */\nexport const Table = <T extends object>({\n  columns,\n  data,\n  fixedHeader = true,\n  hasKeyline = false,\n  expandable,\n  subTable,\n  subRows,\n  headerHeight,\n  headerColor = 'mascarpone',\n  rowColor = 'custard',\n  stripedColor,\n  rowBorderColor = 'oatmeal',\n  rowActions,\n  clickableRow,\n  rowPadding,\n  columnPadding,\n  noDataContent,\n  hideTableHeader = false,\n}: TableProps<T>) => {\n  const showActionsCell = expandable || rowActions\n  const expandSubProp = showActionsCell ? columns.length + 1 : columns.length\n  return (\n    <StyledTable>\n      {!hideTableHeader && (\n        <thead>\n          <TableHeader\n            columns={columns}\n            fixedHeader={fixedHeader}\n            headerHeight={headerHeight}\n            subTable={subTable}\n            headerColor={headerColor}\n            rowActions={rowActions}\n            columnPadding={columnPadding}\n            expandable={expandable}\n            hasKeyline={hasKeyline}\n          />\n        </thead>\n      )}\n      <tbody>\n        {data.length === 0 && (\n          <tr>\n            <StyledCell\n              colSpan={expandSubProp}\n              $rowPadding={rowPadding}\n              $columnPadding={columnPadding}\n            >\n              {noDataContent ? (\n                noDataContent\n              ) : (\n                <Text align=\"center\">No available data</Text>\n              )}\n            </StyledCell>\n          </tr>\n        )}\n        {data.length !== 0 &&\n          data.map((row, rowIndex) => (\n            <TableRow\n              key={rowIndex}\n              rowData={row}\n              rowIndex={rowIndex}\n              columns={columns}\n              rowActions={rowActions}\n              stripedColor={stripedColor}\n              subTable={subTable}\n              subRows={subRows}\n              rowColor={rowColor}\n              rowBorderColor={rowBorderColor}\n              rowPadding={rowPadding}\n              columnPadding={columnPadding}\n              expandable={expandable}\n              clickableRow={clickableRow}\n            />\n          ))}\n      </tbody>\n    </StyledTable>\n  )\n}\n"]}
+{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../src/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAA;AAGvE;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAmB,EACtC,OAAO,EACP,IAAI,EACJ,WAAW,GAAG,IAAI,EAClB,UAAU,GAAG,KAAK,EAClB,UAAU,EACV,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,WAAW,GAAG,YAAY,EAC1B,QAAQ,GAAG,SAAS,EACpB,YAAY,EACZ,cAAc,GAAG,SAAS,EAC1B,UAAU,EACV,YAAY,EACZ,UAAU,EACV,aAAa,EACb,aAAa,EACb,YAAY,EACZ,eAAe,GAAG,KAAK,GACT,EAAE,EAAE;IAClB,MAAM,eAAe,GAAG,UAAU,IAAI,UAAU,CAAA;IAChD,MAAM,aAAa,GAAG,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAA;IAC3E,OAAO,CACL,oBAAC,WAAW,qBAAgB,YAAY;QACrC,CAAC,eAAe,IAAI,CACnB;YACE,oBAAC,WAAW,IACV,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,GACtB,CACI,CACT;QACD;YACG,IAAI,CAAC,MAAM,KAAK,CAAC,IAAI,CACpB;gBACE,oBAAC,UAAU,IACT,OAAO,EAAE,aAAa,iBACT,UAAU,oBACP,aAAa,IAE5B,aAAa,IAAI,oBAAC,IAAI,IAAC,KAAK,EAAC,QAAQ,wBAAyB,CACpD,CACV,CACN;YACA,IAAI,CAAC,MAAM,KAAK,CAAC;gBAChB,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,QAAQ,EAAE,EAAE,CAAC,CAC1B,oBAAC,QAAQ,IACP,GAAG,EAAE,QAAQ,EACb,OAAO,EAAE,GAAG,EACZ,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,OAAO,CAAC,YAAY,CAAC,IAAI,QAAQ,KAAK,IAAI,CAAC,MAAM,GAAG,CAAC,GACjE,CACH,CAAC,CACE,CACI,CACf,CAAA;AACH,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { Text } from '../Text'\nimport { TableHeader } from './components/TableHeader'\nimport { TableRow } from './components/TableRow'\nimport { StyledCell, StyledTable } from './components/commonComponents'\nimport { TableProps } from './types'\n\n/**\n * A table component that displays data with various features such as expandable rows, striped rows, and fixed headers.\n *\n * ## Caveats:\n * - `subRows` should always have the same columns as the Parent table\n * - `stripedColor` wont be applied to `subRows` or `subTables`\n * - `rowActions` will always need an `onClick`, this will be automatically passed onto the `ReactNode` you place & will be selectable\n * - Rows will scale depending on the cell content size\n * - Using `clickableRow` with clickable cells, ensure you use `e.stopPropagation` in your cells `onClick`\n *\n * ## Improvements:\n * - It would be nice if we expandable logic inside this component, e.g the presence of certain props would automatically add this\n */\nexport const Table = <T extends object>({\n  columns,\n  data,\n  fixedHeader = true,\n  hasKeyline = false,\n  expandable,\n  subTable,\n  subRows,\n  headerHeight,\n  headerColor = 'mascarpone',\n  rowColor = 'custard',\n  stripedColor,\n  rowBorderColor = 'oatmeal',\n  rowActions,\n  clickableRow,\n  rowPadding,\n  columnPadding,\n  noDataContent,\n  roundedTable,\n  hideTableHeader = false,\n}: TableProps<T>) => {\n  const showActionsCell = expandable ?? rowActions\n  const expandSubProp = showActionsCell ? columns.length + 1 : columns.length\n  return (\n    <StyledTable $roundedTable={roundedTable}>\n      {!hideTableHeader && (\n        <thead>\n          <TableHeader\n            columns={columns}\n            fixedHeader={fixedHeader}\n            headerHeight={headerHeight}\n            subTable={subTable}\n            headerColor={headerColor}\n            rowActions={rowActions}\n            columnPadding={columnPadding}\n            expandable={expandable}\n            hasKeyline={hasKeyline}\n          />\n        </thead>\n      )}\n      <tbody>\n        {data.length === 0 && (\n          <tr>\n            <StyledCell\n              colSpan={expandSubProp}\n              $rowPadding={rowPadding}\n              $columnPadding={columnPadding}\n            >\n              {noDataContent ?? <Text align=\"center\">No available data</Text>}\n            </StyledCell>\n          </tr>\n        )}\n        {data.length !== 0 &&\n          data.map((row, rowIndex) => (\n            <TableRow\n              key={rowIndex}\n              rowData={row}\n              rowIndex={rowIndex}\n              columns={columns}\n              rowActions={rowActions}\n              stripedColor={stripedColor}\n              subTable={subTable}\n              subRows={subRows}\n              rowColor={rowColor}\n              rowBorderColor={rowBorderColor}\n              rowPadding={rowPadding}\n              columnPadding={columnPadding}\n              expandable={expandable}\n              clickableRow={clickableRow}\n              hideBorder={Boolean(roundedTable) && rowIndex === data.length - 1}\n            />\n          ))}\n      </tbody>\n    </StyledTable>\n  )\n}\n"]}

package/dist/Table/components/RowActions.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { RowActionsProps } from '../types';
-export declare const RowActions: <T extends object>({ rowData, rowActions, expandable, isExpanded, toggleExpansion, }: RowActionsProps<T>) => React.JSX.Element;
+export declare const RowActions: <T extends object>({ rowData, rowActions, isExpanded, toggleExpansion, expandable, canExpandRow, }: RowActionsProps<T>) => React.JSX.Element;

package/dist/Table/components/RowActions.js

@@ -7,7 +7,7 @@ import { Tooltip } from '../../Tooltip';
 import { focusOutlineStyle } from '../../utils/focusOutline';
 import { isReactElement } from '../../utils/isReactElement';
 import { StyledCell } from './commonComponents';
-export const RowActions = ({ rowData, rowActions, expandable, isExpanded, toggleExpansion, }) => {
+export const RowActions = ({ rowData, rowActions, isExpanded, toggleExpansion, expandable, canExpandRow, }) => {
     const handleAction = async (e, action) => {
         e.stopPropagation();
         await action(rowData);
@@ -34,7 +34,7 @@ export const RowActions = ({ rowData, rowActions, expandable, isExpanded, toggle
                 }
                 return null;
             }),
-            expandable?.(rowData) && (React.createElement(CaretIcon, { render: "caret", handleClick: (e) => {
+            canExpandRow && (React.createElement(CaretIcon, { render: "caret", handleClick: (e) => {
                     e.stopPropagation();
                     toggleExpansion();
                 }, size: 36, "$isOpen": isExpanded, backgroundColor: "cream" })))));

package/dist/Table/components/RowActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"RowActions.js","sourceRoot":"","sources":["../../../src/Table/components/RowActions.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { FormEvent } from 'react'\nimport styled from 'styled-components'\nimport { Box } from '../../Box'\nimport { Button } from '../../Button'\nimport { IconStrict } from '../../IconStrict'\nimport { Tooltip } from '../../Tooltip'\nimport { focusOutlineStyle } from '../../utils/focusOutline'\nimport { isReactElement } from '../../utils/isReactElement'\nimport { RowActionsProps } from '../types'\nimport { StyledCell } from './commonComponents'\n\nexport const RowActions = <T extends object>({\n  rowData,\n  rowActions,\n  expandable,\n  isExpanded,\n  toggleExpansion,\n}: RowActionsProps<T>) => {\n  const handleAction = async (\n    e: MouseEvent | FormEvent<HTMLButtonElement>,\n    action: (rowData: T) => void | Promise<void>,\n  ) => {\n    e.stopPropagation()\n    await action(rowData)\n  }\n\n  return (\n    <StyledCell\n      $stickyCell={Boolean(rowActions) || Boolean(expandable)}\n      $rowActionsBgColor={rowActions?.bgColor}\n    >\n      <Box flex alignItems=\"center\" justifyContent=\"flex-end\">\n        {rowActions?.actions?.map((action, actionIndex) => {\n          if (!action.showCondition || action.showCondition(rowData)) {\n            return (\n              <Wrapper flex key={actionIndex}>\n                {'element' in action &&\n                  isReactElement(action.element) &&\n                  React.cloneElement(action.element, {\n                    onClick: async (e: MouseEvent) => {\n                      await handleAction(e, action.onClick)\n                    },\n                    tabIndex: 0,\n                    className: 'reactElementRowAction',\n                  })}\n                {!('element' in action) && action.genericButton && (\n                  <Button\n                    {...action.genericButton}\n                    handleClick={(e) => void handleAction(e, action.onClick)}\n                  >\n                    {action.genericButton.children}\n                  </Button>\n                )}\n                {!('element' in action) &&\n                  action.iconButton &&\n                  (action.iconButton?.tooltipText ? (\n                    <Tooltip\n                      content={action.iconButton.tooltipText}\n                      position={'bottom'}\n                      variant=\"bubblegum\"\n                    >\n                      <IconStrict\n                        {...action.iconButton}\n                        handleClick={(e) =>\n                          void handleAction(e, action.onClick)\n                        }\n                      />\n                    </Tooltip>\n                  ) : (\n                    <IconStrict\n                      {...action.iconButton}\n                      handleClick={(e) => void handleAction(e, action.onClick)}\n                    />\n                  ))}\n              </Wrapper>\n            )\n          }\n          return null\n        })}\n        {expandable?.(rowData) && (\n          <CaretIcon\n            render=\"caret\"\n            handleClick={(e) => {\n              e.stopPropagation()\n              toggleExpansion()\n            }}\n            size={36}\n            $isOpen={isExpanded}\n            backgroundColor=\"cream\"\n          />\n        )}\n      </Box>\n    </StyledCell>\n  )\n}\n\nconst Wrapper = styled(Box)`\n  white-space: nowrap;\n  margin-right: 8px;\n\n  &:last-child {\n    margin-right: 0px;\n  }\n\n  .reactElementRowAction {\n    cursor: pointer;\n    ${focusOutlineStyle}\n  }\n`\n\nconst CaretIcon = styled(IconStrict)<{ $isOpen?: boolean }>(\n  ({ $isOpen }) => `\n    transform: ${$isOpen ? 'rotate(90deg)' : 'rotate(0deg)'};\n    transition: transform 0.3s ease;\n  `,\n)\n"]}
+{"version":3,"file":"RowActions.js","sourceRoot":"","sources":["../../../src/Table/components/RowActions.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { FormEvent } from 'react'\nimport styled from 'styled-components'\nimport { Box } from '../../Box'\nimport { Button } from '../../Button'\nimport { IconStrict } from '../../IconStrict'\nimport { Tooltip } from '../../Tooltip'\nimport { focusOutlineStyle } from '../../utils/focusOutline'\nimport { isReactElement } from '../../utils/isReactElement'\nimport { RowActionsProps } from '../types'\nimport { StyledCell } from './commonComponents'\n\nexport const RowActions = <T extends object>({\n  rowData,\n  rowActions,\n  isExpanded,\n  toggleExpansion,\n  expandable,\n  canExpandRow,\n}: RowActionsProps<T>) => {\n  const handleAction = async (\n    e: MouseEvent | FormEvent<HTMLButtonElement>,\n    action: (rowData: T) => void | Promise<void>,\n  ) => {\n    e.stopPropagation()\n    await action(rowData)\n  }\n\n  return (\n    <StyledCell\n      $stickyCell={Boolean(rowActions) || Boolean(expandable)}\n      $rowActionsBgColor={rowActions?.bgColor}\n    >\n      <Box flex alignItems=\"center\" justifyContent=\"flex-end\">\n        {rowActions?.actions?.map((action, actionIndex) => {\n          if (!action.showCondition || action.showCondition(rowData)) {\n            return (\n              <Wrapper flex key={actionIndex}>\n                {'element' in action &&\n                  isReactElement(action.element) &&\n                  React.cloneElement(action.element, {\n                    onClick: async (e: MouseEvent) => {\n                      await handleAction(e, action.onClick)\n                    },\n                    tabIndex: 0,\n                    className: 'reactElementRowAction',\n                  })}\n                {!('element' in action) && action.genericButton && (\n                  <Button\n                    {...action.genericButton}\n                    handleClick={(e) => void handleAction(e, action.onClick)}\n                  >\n                    {action.genericButton.children}\n                  </Button>\n                )}\n                {!('element' in action) &&\n                  action.iconButton &&\n                  (action.iconButton?.tooltipText ? (\n                    <Tooltip\n                      content={action.iconButton.tooltipText}\n                      position={'bottom'}\n                      variant=\"bubblegum\"\n                    >\n                      <IconStrict\n                        {...action.iconButton}\n                        handleClick={(e) =>\n                          void handleAction(e, action.onClick)\n                        }\n                      />\n                    </Tooltip>\n                  ) : (\n                    <IconStrict\n                      {...action.iconButton}\n                      handleClick={(e) => void handleAction(e, action.onClick)}\n                    />\n                  ))}\n              </Wrapper>\n            )\n          }\n          return null\n        })}\n        {canExpandRow && (\n          <CaretIcon\n            render=\"caret\"\n            handleClick={(e) => {\n              e.stopPropagation()\n              toggleExpansion()\n            }}\n            size={36}\n            $isOpen={isExpanded}\n            backgroundColor=\"cream\"\n          />\n        )}\n      </Box>\n    </StyledCell>\n  )\n}\n\nconst Wrapper = styled(Box)`\n  white-space: nowrap;\n  margin-right: 8px;\n\n  &:last-child {\n    margin-right: 0px;\n  }\n\n  .reactElementRowAction {\n    cursor: pointer;\n    ${focusOutlineStyle}\n  }\n`\n\nconst CaretIcon = styled(IconStrict)<{ $isOpen?: boolean }>(\n  ({ $isOpen }) => `\n    transform: ${$isOpen ? 'rotate(90deg)' : 'rotate(0deg)'};\n    transition: transform 0.3s ease;\n  `,\n)\n"]}

package/dist/Table/components/TableRow.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { TableRowProps } from '../types';
-export declare const TableRow: <T extends object>({ rowData, rowIndex, columns, subRows, subTable, stripedColor, rowActions, rowColor, rowBorderColor, rowPadding, columnPadding, showActions, expandable, clickableRow, }: TableRowProps<T>) => React.JSX.Element;
+export declare const TableRow: <T extends object>({ rowData, rowIndex, columns, subRows, subTable, stripedColor, rowActions, rowColor, rowBorderColor, rowPadding, columnPadding, showActions, expandable, clickableRow, hideBorder, }: TableRowProps<T>) => React.JSX.Element;

package/dist/Table/components/TableRow.js

@@ -1,23 +1,27 @@
-import React, { useState } from 'react';
+import React, { cloneElement, useState } from 'react';
 import { isReactElement } from '../../utils/isReactElement';
 import { isMappedReactElement } from '../helpers';
 import { RowActions } from './RowActions';
-import { StyledCell, StyledRow } from './commonComponents';
-export const TableRow = ({ rowData, rowIndex, columns, subRows, subTable, stripedColor, rowActions, rowColor, rowBorderColor, rowPadding, columnPadding, showActions, expandable, clickableRow, }) => {
+import { StyledCell, StyledRow, StyledSubTableCell } from './commonComponents';
+export const TableRow = ({ rowData, rowIndex, columns, subRows, subTable, stripedColor, rowActions, rowColor, rowBorderColor, rowPadding, columnPadding, showActions, expandable, clickableRow, hideBorder, }) => {
     const [expandedRows, setExpandedRows] = useState([]);
     const toggleRowExpansion = (rowIndex) => {
         setExpandedRows((prevState) => prevState.includes(rowIndex)
             ? prevState.filter((index) => index !== rowIndex)
             : [...prevState, rowIndex]);
     };
+    const canExpandRow = expandable !== undefined
+        ? expandable?.(rowData)
+        : Boolean(subTable?.table ?? subRows?.rows);
     const subRowsData = subRows?.rows(rowData);
     const subTableData = subTable?.table(rowData);
-    const showSubRowsOnExpand = subRows?.showOnExpand?.(rowData);
-    const showSubTableOnExpand = subTable?.showOnExpand?.(rowData);
-    const showActionsCell = expandable || rowActions;
+    const subPadding = subTable?.padding ?? subRows?.padding;
+    const subBgColor = subTable?.bgColor ?? subRows?.bgColor;
+    const showActionsCell = expandable ?? rowActions;
     const expandSubProp = showActionsCell ? columns.length + 1 : columns.length;
+    const isExpandedRow = expandedRows.includes(rowIndex);
     return (React.createElement(React.Fragment, null,
-        React.createElement(StyledRow, { "$stripedColor": stripedColor, "$rowColor": rowColor, "$rowBorderColor": rowBorderColor, "$clickableRow": !!clickableRow, onClick: () => clickableRow && clickableRow(rowData), tabIndex: clickableRow && 0 },
+        React.createElement(StyledRow, { "$stripedColor": stripedColor, "$rowColor": rowColor, "$rowBorderColor": rowBorderColor, "$clickableRow": !!clickableRow, "$noRowBorderColor": isExpandedRow || hideBorder, onClick: () => clickableRow && clickableRow(rowData), tabIndex: clickableRow && 0 },
             columns.map((column, columnIndex) => {
                 let cellContent;
                 if (column.cell) {
@@ -25,47 +29,14 @@ export const TableRow = ({ rowData, rowIndex, columns, subRows, subTable, stripe
                 }
                 return (React.createElement(StyledCell, { key: columnIndex, "$rowPadding": rowPadding, "$columnPadding": columnPadding, "$minWidth": column.minWidth, "$maxWidth": column.maxWidth, "$noWrapContent": column.noWrapContent, "$truncateContent": column.truncateContent, "$hideOverflow": column.hideOverflow }, cellContent));
             }),
-            (showActionsCell || showActions) && (React.createElement(RowActions, { expandable: expandable, rowActions: rowActions, rowData: rowData, isExpanded: expandedRows.includes(rowIndex), toggleExpansion: () => toggleRowExpansion(rowIndex) }))),
-        expandedRows.includes(rowIndex) && (React.createElement(React.Fragment, null,
-            subRows &&
-                subRowsData &&
-                showSubRowsOnExpand &&
-                isReactElement(subRowsData) &&
-                React.cloneElement(subRowsData, {
-                    rowPadding: rowPadding,
-                    columnPadding: columnPadding,
-                }),
-            subRows &&
-                subRowsData &&
-                showSubRowsOnExpand &&
-                isMappedReactElement(subRowsData) &&
-                subRowsData.map((row) => React.cloneElement(row, {
-                    rowPadding: rowPadding,
-                    showActions: showActionsCell,
-                })),
-            subTable && showSubTableOnExpand && subTableData && (React.createElement(StyledCell, { colSpan: expandSubProp }, React.cloneElement(subTableData, {
-                rowPadding: rowPadding,
-                columnPadding: columnPadding,
-            }))))),
-        subRows &&
+            (showActionsCell ?? showActions) && (React.createElement(RowActions, { canExpandRow: canExpandRow, rowActions: rowActions, rowData: rowData, isExpanded: isExpandedRow, toggleExpansion: () => toggleRowExpansion(rowIndex) }))),
+        isExpandedRow && (React.createElement(React.Fragment, null,
             subRowsData &&
-            !showSubRowsOnExpand &&
-            isReactElement(subRowsData) &&
-            React.cloneElement(subRowsData, {
-                rowPadding: rowPadding,
-                columnPadding: columnPadding,
-            }),
-        subRows &&
+                isReactElement(subRowsData) &&
+                cloneElement(subRowsData, { rowPadding, columnPadding }),
             subRowsData &&
-            !showSubRowsOnExpand &&
-            isMappedReactElement(subRowsData) &&
-            subRowsData.map((row) => React.cloneElement(row, {
-                rowPadding: rowPadding,
-                columnPadding: columnPadding,
-            })),
-        subTable && subTableData && !showSubTableOnExpand && (React.createElement(StyledCell, { colSpan: expandSubProp }, React.cloneElement(subTableData, {
-            rowPadding: rowPadding,
-            columnPadding: columnPadding,
-        })))));
+                isMappedReactElement(subRowsData) &&
+                subRowsData.map((row) => cloneElement(row, { rowPadding, showActions: showActionsCell })),
+            subTableData && (React.createElement(StyledSubTableCell, { "$rowBorderColor": rowBorderColor, colSpan: expandSubProp, "$bgColor": subBgColor, "$padding": subPadding }, cloneElement(subTableData, { rowPadding, columnPadding })))))));
 };
 //# sourceMappingURL=TableRow.js.map

package/dist/Table/components/TableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.js","sourceRoot":"","sources":["../../../src/Table/components/TableRow.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ReactNode, useState } from 'react'\nimport { isReactElement } from '../../utils/isReactElement'\nimport { isMappedReactElement } from '../helpers'\nimport { TableRowProps } from '../types'\nimport { RowActions } from './RowActions'\nimport { StyledCell, StyledRow } from './commonComponents'\n\nexport const TableRow = <T extends object>({\n  rowData,\n  rowIndex,\n  columns,\n  subRows,\n  subTable,\n  stripedColor,\n  rowActions,\n  rowColor,\n  rowBorderColor,\n  rowPadding,\n  columnPadding,\n  showActions,\n  expandable,\n  clickableRow,\n}: TableRowProps<T>) => {\n  const [expandedRows, setExpandedRows] = useState<number[]>([])\n\n  const toggleRowExpansion = (rowIndex: number) => {\n    setExpandedRows((prevState) =>\n      prevState.includes(rowIndex)\n        ? prevState.filter((index) => index !== rowIndex)\n        : [...prevState, rowIndex],\n    )\n  }\n\n  const subRowsData = subRows?.rows(rowData)\n  const subTableData = subTable?.table(rowData)\n  const showSubRowsOnExpand = subRows?.showOnExpand?.(rowData)\n  const showSubTableOnExpand = subTable?.showOnExpand?.(rowData)\n\n  const showActionsCell = expandable || rowActions\n  const expandSubProp = showActionsCell ? columns.length + 1 : columns.length\n\n  return (\n    <>\n      <StyledRow\n        $stripedColor={stripedColor}\n        $rowColor={rowColor}\n        $rowBorderColor={rowBorderColor}\n        $clickableRow={!!clickableRow}\n        onClick={() => clickableRow && clickableRow(rowData)}\n        tabIndex={clickableRow && 0}\n      >\n        {columns.map((column, columnIndex) => {\n          let cellContent: ReactNode\n          if (column.cell) {\n            cellContent = column.cell(rowData, rowIndex, column, rowIndex)\n          }\n\n          return (\n            <StyledCell\n              key={columnIndex}\n              $rowPadding={rowPadding}\n              $columnPadding={columnPadding}\n              $minWidth={column.minWidth}\n              $maxWidth={column.maxWidth}\n              $noWrapContent={column.noWrapContent}\n              $truncateContent={column.truncateContent}\n              $hideOverflow={column.hideOverflow}\n            >\n              {cellContent}\n            </StyledCell>\n          )\n        })}\n\n        {(showActionsCell || showActions) && (\n          <RowActions\n            expandable={expandable}\n            rowActions={rowActions}\n            rowData={rowData}\n            isExpanded={expandedRows.includes(rowIndex)}\n            toggleExpansion={() => toggleRowExpansion(rowIndex)}\n          />\n        )}\n      </StyledRow>\n      {/**\n       * This could be extracted out and cleaned up\n       * this section is for expanded rows only\n       * Items rendered here wont show unless expanded\n       */}\n      {expandedRows.includes(rowIndex) && (\n        <>\n          {subRows &&\n            subRowsData &&\n            showSubRowsOnExpand &&\n            isReactElement(subRowsData) &&\n            React.cloneElement(subRowsData, {\n              rowPadding: rowPadding,\n              columnPadding: columnPadding,\n            })}\n\n          {subRows &&\n            subRowsData &&\n            showSubRowsOnExpand &&\n            isMappedReactElement(subRowsData) &&\n            subRowsData.map((row) =>\n              React.cloneElement(row, {\n                rowPadding: rowPadding,\n                showActions: showActionsCell,\n              }),\n            )}\n\n          {subTable && showSubTableOnExpand && subTableData && (\n            <StyledCell colSpan={expandSubProp}>\n              {React.cloneElement(subTableData, {\n                rowPadding: rowPadding,\n                columnPadding: columnPadding,\n              })}\n            </StyledCell>\n          )}\n        </>\n      )}\n      {/**\n       * This could be extracted out and cleaned up\n       * this section is for rendering things under a row,\n       * without the need to expand.\n       * Items rendered here wont show when expanded\n       */}\n      {subRows &&\n        subRowsData &&\n        !showSubRowsOnExpand &&\n        isReactElement(subRowsData) &&\n        React.cloneElement(subRowsData, {\n          rowPadding: rowPadding,\n          columnPadding: columnPadding,\n        })}\n      {subRows &&\n        subRowsData &&\n        !showSubRowsOnExpand &&\n        isMappedReactElement(subRowsData) &&\n        subRowsData.map((row) =>\n          React.cloneElement(row, {\n            rowPadding: rowPadding,\n            columnPadding: columnPadding,\n          }),\n        )}\n      {subTable && subTableData && !showSubTableOnExpand && (\n        <StyledCell colSpan={expandSubProp}>\n          {React.cloneElement(subTableData, {\n            rowPadding: rowPadding,\n            columnPadding: columnPadding,\n          })}\n        </StyledCell>\n      )}\n    </>\n  )\n}\n"]}
+{"version":3,"file":"TableRow.js","sourceRoot":"","sources":["../../../src/Table/components/TableRow.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { cloneElement, ReactNode, useState } from 'react'\nimport { isReactElement } from '../../utils/isReactElement'\nimport { isMappedReactElement } from '../helpers'\nimport { TableRowProps } from '../types'\nimport { RowActions } from './RowActions'\nimport { StyledCell, StyledRow, StyledSubTableCell } from './commonComponents'\n\nexport const TableRow = <T extends object>({\n  rowData,\n  rowIndex,\n  columns,\n  subRows,\n  subTable,\n  stripedColor,\n  rowActions,\n  rowColor,\n  rowBorderColor,\n  rowPadding,\n  columnPadding,\n  showActions,\n  expandable,\n  clickableRow,\n  hideBorder,\n}: TableRowProps<T>) => {\n  const [expandedRows, setExpandedRows] = useState<number[]>([])\n\n  const toggleRowExpansion = (rowIndex: number) => {\n    setExpandedRows((prevState) =>\n      prevState.includes(rowIndex)\n        ? prevState.filter((index) => index !== rowIndex)\n        : [...prevState, rowIndex],\n    )\n  }\n\n  const canExpandRow =\n    expandable !== undefined\n      ? expandable?.(rowData)\n      : Boolean(subTable?.table ?? subRows?.rows)\n\n  const subRowsData = subRows?.rows(rowData)\n  const subTableData = subTable?.table(rowData)\n\n  const subPadding = subTable?.padding ?? subRows?.padding\n  const subBgColor = subTable?.bgColor ?? subRows?.bgColor\n\n  const showActionsCell = expandable ?? rowActions\n  const expandSubProp = showActionsCell ? columns.length + 1 : columns.length\n\n  const isExpandedRow = expandedRows.includes(rowIndex)\n\n  return (\n    <>\n      <StyledRow\n        $stripedColor={stripedColor}\n        $rowColor={rowColor}\n        $rowBorderColor={rowBorderColor}\n        $clickableRow={!!clickableRow}\n        $noRowBorderColor={isExpandedRow || hideBorder}\n        onClick={() => clickableRow && clickableRow(rowData)}\n        tabIndex={clickableRow && 0}\n      >\n        {columns.map((column, columnIndex) => {\n          let cellContent: ReactNode\n          if (column.cell) {\n            cellContent = column.cell(rowData, rowIndex, column, rowIndex)\n          }\n\n          return (\n            <StyledCell\n              key={columnIndex}\n              $rowPadding={rowPadding}\n              $columnPadding={columnPadding}\n              $minWidth={column.minWidth}\n              $maxWidth={column.maxWidth}\n              $noWrapContent={column.noWrapContent}\n              $truncateContent={column.truncateContent}\n              $hideOverflow={column.hideOverflow}\n            >\n              {cellContent}\n            </StyledCell>\n          )\n        })}\n\n        {(showActionsCell ?? showActions) && (\n          <RowActions\n            canExpandRow={canExpandRow}\n            rowActions={rowActions}\n            rowData={rowData}\n            isExpanded={isExpandedRow}\n            toggleExpansion={() => toggleRowExpansion(rowIndex)}\n          />\n        )}\n      </StyledRow>\n      {/**\n       * Rendering subTable and/or subRows\n       *\n       * This could be extracted out and cleaned up\n       * this section is for expanded rows only\n       * Items rendered here wont show unless expanded\n       */}\n\n      {isExpandedRow && (\n        <>\n          {subRowsData &&\n            isReactElement(subRowsData) &&\n            cloneElement(subRowsData, { rowPadding, columnPadding })}\n\n          {subRowsData &&\n            isMappedReactElement(subRowsData) &&\n            subRowsData.map((row) =>\n              cloneElement(row, { rowPadding, showActions: showActionsCell }),\n            )}\n\n          {subTableData && (\n            <StyledSubTableCell\n              $rowBorderColor={rowBorderColor}\n              colSpan={expandSubProp}\n              $bgColor={subBgColor}\n              $padding={subPadding}\n            >\n              {cloneElement(subTableData, { rowPadding, columnPadding })}\n            </StyledSubTableCell>\n          )}\n        </>\n      )}\n    </>\n  )\n}\n"]}

package/dist/Table/components/commonComponents.d.ts

@@ -1,6 +1,21 @@
 import { TransientProps } from 'utils/utilTypes';
-import { TableStylesProps } from '../types';
-export declare const StyledTable: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, never>> & string;
+import { type Color } from '../../theme';
+import { TableStylesProps, type TableProps } from '../types';
+type StyledTableProps = {
+    $roundedTable: TableProps<unknown>['roundedTable'];
+};
+export declare const StyledTable: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, StyledTableProps>> & string;
 export declare const StyledHeaderCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, TransientProps<TableStylesProps>>> & string;
 export declare const StyledCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, TransientProps<TableStylesProps>>> & string;
 export declare const StyledRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, TransientProps<TableStylesProps>>> & string;
+type StyledSubTableCellProps = {
+    $bgColor?: Color;
+    $padding?: string | undefined;
+    $rowBorderColor?: Color;
+};
+type StyledSubInnerCellProps = {
+    $padding?: string | undefined;
+};
+export declare const StyledSubTableCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, StyledSubTableCellProps>> & string;
+export declare const StyledSubInnerCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledSubInnerCellProps>> & string;
+export {};

package/dist/Table/components/commonComponents.js

@@ -3,6 +3,7 @@ import styled, { css } from 'styled-components';
 import { fontStyleMapping } from '../../Text/fontMapping';
 import { theme } from '../../theme';
 import { focusOutlineStyle } from '../../utils/focusOutline';
+const isString = (value) => typeof value === 'string';
 export const StyledTable = styled.table `
   width: 100%;
   height: 100%;
@@ -10,6 +11,12 @@ export const StyledTable = styled.table `
   overflow: auto;
   background: ${theme.colors.coconut};
   border-spacing: 30px;
+
+  ${({ $roundedTable }) => $roundedTable &&
+    css `
+      border-radius: ${isString($roundedTable) ? $roundedTable : '16px'};
+      overflow: hidden;
+    `}
 `;
 export const StyledHeaderCell = styled.th `
   background: ${theme.colors.coconut};
@@ -106,7 +113,8 @@ export const StyledCell = styled.td `
 export const StyledRow = styled.tr `
   background: ${theme.colors.custard};
 
-  ${({ $rowBorderColor }) => $rowBorderColor &&
+  ${({ $rowBorderColor, $noRowBorderColor }) => $rowBorderColor &&
+    !$noRowBorderColor &&
     css `
       border-bottom: 1px solid ${theme.colors[$rowBorderColor]};
     `}
@@ -135,4 +143,17 @@ export const StyledRow = styled.tr `
       }
     `}
 `;
+export const StyledSubTableCell = styled.td `
+  padding: ${({ $padding }) => $padding ?? '12px 0'};
+
+  ${({ $rowBorderColor }) => $rowBorderColor &&
+    css `
+      border-bottom: 1px solid ${theme.colors[$rowBorderColor]};
+    `}
+
+  ${({ $bgColor }) => $bgColor && `background-color: ${theme.colors[$bgColor]};`}
+`;
+export const StyledSubInnerCell = styled.div `
+  padding: ${({ $padding }) => $padding ?? '12px 0'};
+`;
 //# sourceMappingURL=commonComponents.js.map

package/dist/Table/components/commonComponents.js.map

@@ -1 +1 @@
-{"version":3,"file":"commonComponents.js","sourceRoot":"","sources":["../../../src/Table/components/commonComponents.tsx"],"names":[],"mappings":"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","sourcesContent":["import { darken } from 'polished'\nimport styled, { css } from 'styled-components'\nimport { TransientProps } from 'utils/utilTypes'\nimport { fontStyleMapping } from '../../Text/fontMapping'\nimport { theme } from '../../theme'\nimport { focusOutlineStyle } from '../../utils/focusOutline'\nimport { TableStylesProps } from '../types'\n\nexport const StyledTable = styled.table`\n  width: 100%;\n  height: 100%;\n  border-collapse: collapse;\n  overflow: auto;\n  background: ${theme.colors.coconut};\n  border-spacing: 30px;\n`\n\nexport const StyledHeaderCell = styled.th<TransientProps<TableStylesProps>>`\n  background: ${theme.colors.coconut};\n  border-bottom: ${({ $hasKeyline }) =>\n    $hasKeyline ? `1px solid ${theme.colors.liquorice}` : 'none'};\n  position: ${({ $fixedHeader }) => ($fixedHeader ? 'sticky' : 'auto')};\n  top: 0;\n  z-index: 2;\n  text-align: left;\n  vertical-align: bottom;\n  ${fontStyleMapping.label};\n  padding-left: 8px;\n  padding-right: 8px;\n  padding-top: 8px;\n  padding-bottom: 8px;\n\n  ${({ $headerColor }) =>\n    $headerColor &&\n    css`\n      background: ${theme.colors[$headerColor]};\n    `}\n\n  ${({ $headerHeight }) =>\n    $headerHeight &&\n    css`\n      height: ${$headerHeight};\n    `}\n\n  ${({ $maxWidth }) =>\n    $maxWidth &&\n    css`\n      max-width: ${$maxWidth};\n    `}\n\n  ${({ $minWidth }) =>\n    $minWidth &&\n    css`\n      min-width: ${$minWidth};\n    `}\n    \n  ${({ $columnPadding }) =>\n    $columnPadding &&\n    css`\n      padding-left: ${$columnPadding};\n      padding-right: ${$columnPadding};\n    `};\n`\n\nexport const StyledCell = styled.td<TransientProps<TableStylesProps>>`\n  vertical-align: middle;\n  padding-left: 8px;\n  padding-right: 8px;\n  padding-top: 8px;\n  padding-bottom: 8px;\n\n  ${({ $hideOverflow }) =>\n    $hideOverflow &&\n    css`\n      overflow: hidden;\n    `};\n\n  ${({ $noWrapContent }) =>\n    $noWrapContent &&\n    css`\n      white-space: nowrap;\n    `};\n\n  ${({ $truncateContent }) =>\n    $truncateContent &&\n    css`\n      overflow: hidden;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n    `};\n\n  ${({ $stickyCell }) =>\n    $stickyCell &&\n    css`\n      position: sticky;\n      right: 0;\n    `};\n\n  ${({ $rowPadding }) =>\n    $rowPadding &&\n    css`\n      padding-top: ${$rowPadding};\n      padding-bottom: ${$rowPadding};\n    `};\n\n  ${({ $columnPadding }) =>\n    $columnPadding &&\n    css`\n      padding-left: ${$columnPadding};\n      padding-right: ${$columnPadding};\n    `};\n\n  ${({ $maxWidth }) =>\n    $maxWidth &&\n    css`\n      max-width: ${$maxWidth};\n    `}\n\n  ${({ $rowActionsBgColor }) =>\n    $rowActionsBgColor &&\n    css`\n      background: ${theme.colors[$rowActionsBgColor]};\n    `}\n`\n\nexport const StyledRow = styled.tr<TransientProps<TableStylesProps>>`\n  background: ${theme.colors.custard};\n\n  ${({ $rowBorderColor }) =>\n    $rowBorderColor &&\n    css`\n      border-bottom: 1px solid ${theme.colors[$rowBorderColor]};\n    `}\n\n  ${({ $rowColor }) =>\n    $rowColor &&\n    css`\n      background: ${theme.colors[$rowColor]};\n    `}\n\n  ${({ $stripedColor }) =>\n    $stripedColor &&\n    css`\n      &:nth-child(even) {\n        background: ${theme.colors[$stripedColor]};\n      }\n    `}\n\n    ${({ $clickableRow, $rowColor }) =>\n    $clickableRow &&\n    css`\n      cursor: pointer;\n      &:hover {\n        background: ${darken(0.1, theme.colors[$rowColor ?? 'custard'])};\n      }\n      &:focus-visible {\n        ${focusOutlineStyle}\n        background: ${darken(0.1, theme.colors[$rowColor ?? 'custard'])};\n      }\n    `}\n`\n"]}
+{"version":3,"file":"commonComponents.js","sourceRoot":"","sources":["../../../src/Table/components/commonComponents.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAA;AACzD,OAAO,EAAE,KAAK,EAAc,MAAM,aAAa,CAAA;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAA;AAO5D,MAAM,QAAQ,GAAG,CAAC,KAAc,EAAmB,EAAE,CAAC,OAAO,KAAK,KAAK,QAAQ,CAAA;AAE/E,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAkB;;;;;gBAKzC,KAAK,CAAC,MAAM,CAAC,OAAO;;;IAGhC,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,CACtB,aAAa;IACb,GAAG,CAAA;uBACgB,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM;;KAElE;CACJ,CAAA;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,EAAE,CAAkC;gBAC3D,KAAK,CAAC,MAAM,CAAC,OAAO;mBACjB,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CACnC,WAAW,CAAC,CAAC,CAAC,aAAa,KAAK,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,MAAM;cAClD,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC;;;;;IAKlE,gBAAgB,CAAC,KAAK;;;;;;IAMtB,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CACrB,YAAY;IACZ,GAAG,CAAA;oBACa,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC;KACzC;;IAED,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,CACtB,aAAa;IACb,GAAG,CAAA;gBACS,aAAa;KACxB;;IAED,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAClB,SAAS;IACT,GAAG,CAAA;mBACY,SAAS;KACvB;;IAED,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAClB,SAAS;IACT,GAAG,CAAA;mBACY,SAAS;KACvB;;IAED,CAAC,EAAE,cAAc,EAAE,EAAE,EAAE,CACvB,cAAc;IACd,GAAG,CAAA;sBACe,cAAc;uBACb,cAAc;KAChC;CACJ,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,EAAE,CAAkC;;;;;;;IAOjE,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,CACtB,aAAa;IACb,GAAG,CAAA;;KAEF;;IAED,CAAC,EAAE,cAAc,EAAE,EAAE,EAAE,CACvB,cAAc;IACd,GAAG,CAAA;;KAEF;;IAED,CAAC,EAAE,gBAAgB,EAAE,EAAE,EAAE,CACzB,gBAAgB;IAChB,GAAG,CAAA;;;;KAIF;;IAED,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CACpB,WAAW;IACX,GAAG,CAAA;;;KAGF;;IAED,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CACpB,WAAW;IACX,GAAG,CAAA;qBACc,WAAW;wBACR,WAAW;KAC9B;;IAED,CAAC,EAAE,cAAc,EAAE,EAAE,EAAE,CACvB,cAAc;IACd,GAAG,CAAA;sBACe,cAAc;uBACb,cAAc;KAChC;;IAED,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAClB,SAAS;IACT,GAAG,CAAA;mBACY,SAAS;KACvB;;IAED,CAAC,EAAE,kBAAkB,EAAE,EAAE,EAAE,CAC3B,kBAAkB;IAClB,GAAG,CAAA;oBACa,KAAK,CAAC,MAAM,CAAC,kBAAkB,CAAC;KAC/C;CACJ,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,EAAE,CAAkC;gBACpD,KAAK,CAAC,MAAM,CAAC,OAAO;;IAEhC,CAAC,EAAE,eAAe,EAAE,iBAAiB,EAAE,EAAE,EAAE,CAC3C,eAAe;IACf,CAAC,iBAAiB;IAClB,GAAG,CAAA;iCAC0B,KAAK,CAAC,MAAM,CAAC,eAAe,CAAC;KACzD;;IAED,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAClB,SAAS;IACT,GAAG,CAAA;oBACa,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC;KACtC;;IAED,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,CACtB,aAAa;IACb,GAAG,CAAA;;sBAEe,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC;;KAE5C;;MAEC,CAAC,EAAE,aAAa,EAAE,SAAS,EAAE,EAAE,EAAE,CACnC,aAAa;IACb,GAAG,CAAA;;;sBAGe,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,IAAI,SAAS,CAAC,CAAC;;;UAG7D,iBAAiB;sBACL,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,IAAI,SAAS,CAAC,CAAC;;KAElE;CACJ,CAAA;AAYD,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,EAAE,CAAyB;aACvD,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ,IAAI,QAAQ;;IAE/C,CAAC,EAAE,eAAe,EAAE,EAAE,EAAE,CACxB,eAAe;IACf,GAAG,CAAA;iCAC0B,KAAK,CAAC,MAAM,CAAC,eAAe,CAAC;KACzD;;IAED,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CACjB,QAAQ,IAAI,qBAAqB,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG;CAC7D,CAAA;AAED,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAyB;aACxD,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ,IAAI,QAAQ;CAClD,CAAA","sourcesContent":["import { darken } from 'polished'\nimport styled, { css } from 'styled-components'\nimport { TransientProps } from 'utils/utilTypes'\nimport { fontStyleMapping } from '../../Text/fontMapping'\nimport { theme, type Color } from '../../theme'\nimport { focusOutlineStyle } from '../../utils/focusOutline'\nimport { TableStylesProps, type TableProps } from '../types'\n\ntype StyledTableProps = {\n  $roundedTable: TableProps<unknown>['roundedTable']\n}\n\nconst isString = (value: unknown): value is string => typeof value === 'string'\n\nexport const StyledTable = styled.table<StyledTableProps>`\n  width: 100%;\n  height: 100%;\n  border-collapse: collapse;\n  overflow: auto;\n  background: ${theme.colors.coconut};\n  border-spacing: 30px;\n\n  ${({ $roundedTable }) =>\n    $roundedTable &&\n    css`\n      border-radius: ${isString($roundedTable) ? $roundedTable : '16px'};\n      overflow: hidden;\n    `}\n`\n\nexport const StyledHeaderCell = styled.th<TransientProps<TableStylesProps>>`\n  background: ${theme.colors.coconut};\n  border-bottom: ${({ $hasKeyline }) =>\n    $hasKeyline ? `1px solid ${theme.colors.liquorice}` : 'none'};\n  position: ${({ $fixedHeader }) => ($fixedHeader ? 'sticky' : 'auto')};\n  top: 0;\n  z-index: 2;\n  text-align: left;\n  vertical-align: bottom;\n  ${fontStyleMapping.label};\n  padding-left: 8px;\n  padding-right: 8px;\n  padding-top: 8px;\n  padding-bottom: 8px;\n\n  ${({ $headerColor }) =>\n    $headerColor &&\n    css`\n      background: ${theme.colors[$headerColor]};\n    `}\n\n  ${({ $headerHeight }) =>\n    $headerHeight &&\n    css`\n      height: ${$headerHeight};\n    `}\n\n  ${({ $maxWidth }) =>\n    $maxWidth &&\n    css`\n      max-width: ${$maxWidth};\n    `}\n\n  ${({ $minWidth }) =>\n    $minWidth &&\n    css`\n      min-width: ${$minWidth};\n    `}\n    \n  ${({ $columnPadding }) =>\n    $columnPadding &&\n    css`\n      padding-left: ${$columnPadding};\n      padding-right: ${$columnPadding};\n    `};\n`\n\nexport const StyledCell = styled.td<TransientProps<TableStylesProps>>`\n  vertical-align: middle;\n  padding-left: 8px;\n  padding-right: 8px;\n  padding-top: 8px;\n  padding-bottom: 8px;\n\n  ${({ $hideOverflow }) =>\n    $hideOverflow &&\n    css`\n      overflow: hidden;\n    `};\n\n  ${({ $noWrapContent }) =>\n    $noWrapContent &&\n    css`\n      white-space: nowrap;\n    `};\n\n  ${({ $truncateContent }) =>\n    $truncateContent &&\n    css`\n      overflow: hidden;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n    `};\n\n  ${({ $stickyCell }) =>\n    $stickyCell &&\n    css`\n      position: sticky;\n      right: 0;\n    `};\n\n  ${({ $rowPadding }) =>\n    $rowPadding &&\n    css`\n      padding-top: ${$rowPadding};\n      padding-bottom: ${$rowPadding};\n    `};\n\n  ${({ $columnPadding }) =>\n    $columnPadding &&\n    css`\n      padding-left: ${$columnPadding};\n      padding-right: ${$columnPadding};\n    `};\n\n  ${({ $maxWidth }) =>\n    $maxWidth &&\n    css`\n      max-width: ${$maxWidth};\n    `}\n\n  ${({ $rowActionsBgColor }) =>\n    $rowActionsBgColor &&\n    css`\n      background: ${theme.colors[$rowActionsBgColor]};\n    `}\n`\n\nexport const StyledRow = styled.tr<TransientProps<TableStylesProps>>`\n  background: ${theme.colors.custard};\n\n  ${({ $rowBorderColor, $noRowBorderColor }) =>\n    $rowBorderColor &&\n    !$noRowBorderColor &&\n    css`\n      border-bottom: 1px solid ${theme.colors[$rowBorderColor]};\n    `}\n\n  ${({ $rowColor }) =>\n    $rowColor &&\n    css`\n      background: ${theme.colors[$rowColor]};\n    `}\n\n  ${({ $stripedColor }) =>\n    $stripedColor &&\n    css`\n      &:nth-child(even) {\n        background: ${theme.colors[$stripedColor]};\n      }\n    `}\n\n    ${({ $clickableRow, $rowColor }) =>\n    $clickableRow &&\n    css`\n      cursor: pointer;\n      &:hover {\n        background: ${darken(0.1, theme.colors[$rowColor ?? 'custard'])};\n      }\n      &:focus-visible {\n        ${focusOutlineStyle}\n        background: ${darken(0.1, theme.colors[$rowColor ?? 'custard'])};\n      }\n    `}\n`\n\ntype StyledSubTableCellProps = {\n  $bgColor?: Color\n  $padding?: string | undefined\n  $rowBorderColor?: Color\n}\n\ntype StyledSubInnerCellProps = {\n  $padding?: string | undefined\n}\n\nexport const StyledSubTableCell = styled.td<StyledSubTableCellProps>`\n  padding: ${({ $padding }) => $padding ?? '12px 0'};\n\n  ${({ $rowBorderColor }) =>\n    $rowBorderColor &&\n    css`\n      border-bottom: 1px solid ${theme.colors[$rowBorderColor]};\n    `}\n\n  ${({ $bgColor }) =>\n    $bgColor && `background-color: ${theme.colors[$bgColor]};`}\n`\n\nexport const StyledSubInnerCell = styled.div<StyledSubInnerCellProps>`\n  padding: ${({ $padding }) => $padding ?? '12px 0'};\n`\n"]}

package/dist/Table/helper.types.d.ts

@@ -0,0 +1,17 @@
+/**
+ * A type that represents a pixel value with the "px" suffix.
+ *
+ * @example '0' | '12px' | '24px'
+ */
+type PixelSuffix = `${number}px`;
+type Spacing = '0' | PixelSuffix;
+/**
+ * A type that represents a padding value with the "px" suffix.
+ *
+ * The value can be a single value, or a string with 2, 3, or 4 values.
+ * The values are applied in the following order: top, right, bottom, left.
+ *
+ * @example '0' | '12px' | '24px' | '12px 24px' | '12px 0 36px' | '12px 24px 36px 48px'
+ */
+export type BoxSpacing = Spacing | `${Spacing} ${Spacing}` | `${Spacing} ${Spacing} ${Spacing}` | `${Spacing} ${Spacing} ${Spacing} ${Spacing}`;
+export {};

package/dist/Table/helper.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=helper.types.js.map

package/dist/Table/helper.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helper.types.js","sourceRoot":"","sources":["../../src/Table/helper.types.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * A type that represents a pixel value with the \"px\" suffix.\n *\n * @example '0' | '12px' | '24px'\n */\ntype PixelSuffix = `${number}px`\n\ntype Spacing = '0' | PixelSuffix\n/**\n * A type that represents a padding value with the \"px\" suffix.\n *\n * The value can be a single value, or a string with 2, 3, or 4 values.\n * The values are applied in the following order: top, right, bottom, left.\n *\n * @example '0' | '12px' | '24px' | '12px 24px' | '12px 0 36px' | '12px 24px 36px 48px'\n */\nexport type BoxSpacing =\n  | Spacing\n  | `${Spacing} ${Spacing}`\n  | `${Spacing} ${Spacing} ${Spacing}`\n  | `${Spacing} ${Spacing} ${Spacing} ${Spacing}`\n"]}

package/dist/Table/types.d.ts

@@ -2,6 +2,7 @@ import React, { ReactElement, ReactNode } from 'react';
 import { ButtonProps } from '../Button/Button';
 import { IconStrictProps } from '../IconStrict';
 import { Color } from '../theme';
+import type { BoxSpacing } from './helper.types';
 export type TableStylesProps = {
     hasKeyline?: boolean;
     fixedHeader?: boolean;
@@ -20,6 +21,7 @@ export type TableStylesProps = {
     columnPadding?: string;
     hideOverflow?: boolean;
     clickableRow?: boolean;
+    noRowBorderColor?: boolean;
 };
 export type Primitive = string | number | boolean | bigint;
 export type BaseRowAction<T> = {
@@ -51,6 +53,11 @@ export interface TableColumn<T> {
     hideOverflow?: boolean;
     cell?: RowCellRenderer<T>;
 }
+type SubElementProps = {
+    bgColor?: Color;
+    padding?: BoxSpacing;
+    margin?: BoxSpacing;
+};
 /** @template T - The type of data the table displays. */
 interface CommonTableProps<T> {
     /** Array of columns to display in the table. */
@@ -71,17 +78,16 @@ interface CommonTableProps<T> {
     rowColor?: Color;
     /** The default color for each table row border. */
     rowBorderColor?: Color;
+    /** If true, the table will have rounded corners */
+    roundedTable?: true;
     /** A React element to show when a row is expanded. */
-    subTable?: {
+    subTable?: SubElementProps & {
         table: (rowData: T) => ReactElement<any>;
-        showOnExpand?: (rowData: T) => boolean;
     };
     /** Settings for sub rows. */
-    subRows?: {
+    subRows?: SubElementProps & {
         /** Function that returns a React element for the sub row. */
         rows: (rowData: T) => ReactElement<any> | ReactElement<any>[];
-        /** If true, the sub rows will only be shown when the row is expanded. */
-        showOnExpand?: (rowData: T) => boolean;
     };
     /** Function to apply to a row, to make the entire row clickable, useful for navigation. */
     clickableRow?: (rowData: T) => void;
@@ -104,9 +110,11 @@ export interface TableRowProps<T> extends CommonTableProps<T> {
     rowData: T;
     rowIndex: number;
     showActions?: boolean;
+    hideBorder?: boolean;
 }
 export interface RowActionsProps<T> extends Pick<CommonTableProps<T>, 'expandable' | 'rowActions'> {
     rowData: T;
+    canExpandRow: boolean;
     toggleExpansion: () => void;
     isExpanded?: boolean;
 }

package/dist/Table/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/Table/types.ts"],"names":[],"mappings":"","sourcesContent":["import React, { ReactElement, ReactNode } from 'react'\nimport { ButtonProps } from '../Button/Button'\nimport { IconStrictProps } from '../IconStrict'\nimport { Color } from '../theme'\n\nexport type TableStylesProps = {\n  hasKeyline?: boolean\n  fixedHeader?: boolean\n  headerHeight?: string\n  stripedColor?: Color\n  stickyCell?: boolean\n  headerColor?: Color\n  rowColor?: Color\n  rowBorderColor?: Color\n  rowActionsBgColor?: Color\n  minWidth?: string\n  maxWidth?: string\n  noWrapContent?: boolean\n  truncateContent?: boolean\n  rowPadding?: string\n  columnPadding?: string\n  hideOverflow?: boolean\n  clickableRow?: boolean\n}\n\nexport type Primitive = string | number | boolean | bigint\n\nexport type BaseRowAction<T> = {\n  onClick: (rowData: T) => void\n  showCondition?: (rowData: T) => boolean\n}\n\nexport type RowAction<T> =\n  | RowActionButtonDefault<T>\n  | RowActionElementOverride<T>\n\nexport type RowActionButtonDefault<T> = {\n  iconButton?: Pick<\n    IconStrictProps,\n    'size' | 'render' | 'iconColor' | 'backgroundColor' | 'id' | 'title'\n  > & { tooltipText?: string }\n  genericButton?: Pick<\n    ButtonProps,\n    | 'children'\n    | 'loading'\n    | 'disabled'\n    | 'primary'\n    | 'secondary'\n    | 'fallbackStyle'\n    | 'textBtn'\n    | 'smallButton'\n    | 'id'\n  >\n} & BaseRowAction<T>\n\nexport type RowActionElementOverride<T> = {\n  element: ReactElement<any>\n} & BaseRowAction<T>\n\nexport type RowActions<T> = {\n  actions: RowAction<T>[]\n  minWidth?: string\n  bgColor?: Color\n}\n\ntype RowCellRenderer<T> = (\n  row: T,\n  rowIndex: number,\n  column: TableColumn<T>,\n  id: string | number,\n) => React.ReactNode\n\nexport interface TableColumn<T> {\n  name?: string | number | React.ReactNode\n  minWidth?: string\n  maxWidth?: string\n  noWrapContent?: boolean\n  truncateContent?: boolean\n  hideOverflow?: boolean\n  cell?: RowCellRenderer<T>\n}\n\n/** @template T - The type of data the table displays. */\ninterface CommonTableProps<T> {\n  /** Array of columns to display in the table. */\n  columns: TableColumn<T>[]\n  /** Sets the height of the header. */\n  headerHeight?: string\n  /** If true, the table header will be fixed/sticky. */\n  fixedHeader?: boolean\n  /** If true, the table header will have a key line. */\n  hasKeyline?: boolean\n  /** If present, the table rows will have alternating colors. */\n  stripedColor?: Color\n  /** A function to determine if a row is expandable. */\n  expandable?: (rowData: T) => boolean\n  /** The color for the table header. */\n  headerColor?: Color\n  /** The default color for each table row. */\n  rowColor?: Color\n  /** The default color for each table row border. */\n  rowBorderColor?: Color\n  /** A React element to show when a row is expanded. */\n  subTable?: {\n    table: (rowData: T) => ReactElement<any>\n    showOnExpand?: (rowData: T) => boolean\n  }\n  /** Settings for sub rows. */\n  subRows?: {\n    /** Function that returns a React element for the sub row. */\n    rows: (rowData: T) => ReactElement<any> | ReactElement<any>[]\n    /** If true, the sub rows will only be shown when the row is expanded. */\n    showOnExpand?: (rowData: T) => boolean\n  }\n  /** Function to apply to a row, to make the entire row clickable, useful for navigation. */\n  clickableRow?: (rowData: T) => void\n  /** Array of actions that can be performed on each row. */\n  rowActions?: RowActions<T>\n  /** The Y padding for each row. */\n  rowPadding?: string\n  /** The X padding for each row. */\n  columnPadding?: string\n  /** Hides the table header. Table defaults to always showing the header. */\n  hideTableHeader?: boolean\n}\n\nexport interface TableProps<T> extends CommonTableProps<T> {\n  /** Array of data to be displayed in the table. */\n  data: T[]\n  /** The text to show when there is no available data to map through. */\n  noDataContent?: ReactNode\n}\n\nexport interface TableRowProps<T> extends CommonTableProps<T> {\n  rowData: T\n  rowIndex: number\n  showActions?: boolean\n}\n\nexport interface RowActionsProps<T>\n  extends Pick<CommonTableProps<T>, 'expandable' | 'rowActions'> {\n  rowData: T\n  toggleExpansion: () => void\n  isExpanded?: boolean\n}\n\nexport type TableHeaderProps<T> = CommonTableProps<T>\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/Table/types.ts"],"names":[],"mappings":"","sourcesContent":["import React, { ReactElement, ReactNode } from 'react'\nimport { ButtonProps } from '../Button/Button'\nimport { IconStrictProps } from '../IconStrict'\nimport { Color } from '../theme'\nimport type { BoxSpacing } from './helper.types'\n\nexport type TableStylesProps = {\n  hasKeyline?: boolean\n  fixedHeader?: boolean\n  headerHeight?: string\n  stripedColor?: Color\n  stickyCell?: boolean\n  headerColor?: Color\n  rowColor?: Color\n  rowBorderColor?: Color\n  rowActionsBgColor?: Color\n  minWidth?: string\n  maxWidth?: string\n  noWrapContent?: boolean\n  truncateContent?: boolean\n  rowPadding?: string\n  columnPadding?: string\n  hideOverflow?: boolean\n  clickableRow?: boolean\n  noRowBorderColor?: boolean\n}\n\nexport type Primitive = string | number | boolean | bigint\n\nexport type BaseRowAction<T> = {\n  onClick: (rowData: T) => void\n  showCondition?: (rowData: T) => boolean\n}\n\nexport type RowAction<T> =\n  | RowActionButtonDefault<T>\n  | RowActionElementOverride<T>\n\nexport type RowActionButtonDefault<T> = {\n  iconButton?: Pick<\n    IconStrictProps,\n    'size' | 'render' | 'iconColor' | 'backgroundColor' | 'id' | 'title'\n  > & { tooltipText?: string }\n  genericButton?: Pick<\n    ButtonProps,\n    | 'children'\n    | 'loading'\n    | 'disabled'\n    | 'primary'\n    | 'secondary'\n    | 'fallbackStyle'\n    | 'textBtn'\n    | 'smallButton'\n    | 'id'\n  >\n} & BaseRowAction<T>\n\nexport type RowActionElementOverride<T> = {\n  element: ReactElement<any>\n} & BaseRowAction<T>\n\nexport type RowActions<T> = {\n  actions: RowAction<T>[]\n  minWidth?: string\n  bgColor?: Color\n}\n\ntype RowCellRenderer<T> = (\n  row: T,\n  rowIndex: number,\n  column: TableColumn<T>,\n  id: string | number,\n) => React.ReactNode\n\nexport interface TableColumn<T> {\n  name?: string | number | React.ReactNode\n  minWidth?: string\n  maxWidth?: string\n  noWrapContent?: boolean\n  truncateContent?: boolean\n  hideOverflow?: boolean\n  cell?: RowCellRenderer<T>\n}\n\ntype SubElementProps = {\n  bgColor?: Color\n  padding?: BoxSpacing\n  margin?: BoxSpacing\n}\n\n/** @template T - The type of data the table displays. */\ninterface CommonTableProps<T> {\n  /** Array of columns to display in the table. */\n  columns: TableColumn<T>[]\n  /** Sets the height of the header. */\n  headerHeight?: string\n  /** If true, the table header will be fixed/sticky. */\n  fixedHeader?: boolean\n  /** If true, the table header will have a key line. */\n  hasKeyline?: boolean\n  /** If present, the table rows will have alternating colors. */\n  stripedColor?: Color\n  /** A function to determine if a row is expandable. */\n  expandable?: (rowData: T) => boolean\n  /** The color for the table header. */\n  headerColor?: Color\n  /** The default color for each table row. */\n  rowColor?: Color\n  /** The default color for each table row border. */\n  rowBorderColor?: Color\n  /** If true, the table will have rounded corners */\n  roundedTable?: true\n  /** A React element to show when a row is expanded. */\n  subTable?: SubElementProps & {\n    table: (rowData: T) => ReactElement<any>\n  }\n  /** Settings for sub rows. */\n  subRows?: SubElementProps & {\n    /** Function that returns a React element for the sub row. */\n    rows: (rowData: T) => ReactElement<any> | ReactElement<any>[]\n  }\n  /** Function to apply to a row, to make the entire row clickable, useful for navigation. */\n  clickableRow?: (rowData: T) => void\n  /** Array of actions that can be performed on each row. */\n  rowActions?: RowActions<T>\n  /** The Y padding for each row. */\n  rowPadding?: string\n  /** The X padding for each row. */\n  columnPadding?: string\n  /** Hides the table header. Table defaults to always showing the header. */\n  hideTableHeader?: boolean\n}\n\nexport interface TableProps<T> extends CommonTableProps<T> {\n  /** Array of data to be displayed in the table. */\n  data: T[]\n  /** The text to show when there is no available data to map through. */\n  noDataContent?: ReactNode\n}\n\nexport interface TableRowProps<T> extends CommonTableProps<T> {\n  rowData: T\n  rowIndex: number\n  showActions?: boolean\n  hideBorder?: boolean\n}\n\nexport interface RowActionsProps<T>\n  extends Pick<CommonTableProps<T>, 'expandable' | 'rowActions'> {\n  rowData: T\n  canExpandRow: boolean\n  toggleExpansion: () => void\n  isExpanded?: boolean\n}\n\nexport type TableHeaderProps<T> = CommonTableProps<T>\n"]}

package/dist/utils/dateOfBirth/dateOfBirthValidator.utils.d.ts

@@ -1,8 +1,4 @@
-type DateObject = {
-    day?: string | null;
-    month?: string | null;
-    year?: string | null;
-};
+import { DateObject } from '../../TextDateOfBirthInput';
 declare const dateFields: readonly ["day", "month", "year"];
 export declare const monthsArray: string[];
 export declare const validators: Record<(typeof dateFields)[number], (dateField: string | undefined | null) => boolean>;

package/dist/utils/dateOfBirth/dateOfBirthValidator.utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"dateOfBirthValidator.utils.js","sourceRoot":"","sources":["../../../src/utils/dateOfBirth/dateOfBirthValidator.utils.ts"],"names":[],"mappings":"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","sourcesContent":["import { isAfter, subYears } from 'date-fns'\n\ntype DateObject = {\n  day?: string | null\n  month?: string | null\n  year?: string | null\n}\n\nconst dateFields = ['day', 'month', 'year'] as const\n\nexport const monthsArray = [\n  'January',\n  'February',\n  'March',\n  'April',\n  'May',\n  'June',\n  'July',\n  'August',\n  'September',\n  'October',\n  'November',\n  'December',\n]\n\nexport const validators: Record<\n  (typeof dateFields)[number],\n  (dateField: string | undefined | null) => boolean\n> = {\n  day: (day) => {\n    const dayNumber = Number(day)\n    return Boolean(day && dayNumber >= 1 && dayNumber <= 31)\n  },\n  month: (month) => {\n    const monthNumber = Number(month)\n    return Boolean(month && monthNumber >= 1 && monthNumber <= 12)\n  },\n  year: (year) => {\n    const yearNumber = Number(year)\n    return Boolean(year && yearNumber && year.length === 4 && yearNumber > 0)\n  },\n}\n\nexport const isAllowedValue = (value: string | null | undefined) => {\n  return value === null || (value && /^\\d+$/.test(value)) || value === ''\n}\n\nexport const getInvalidInputFields = (dateObject: DateObject) => {\n  const invalidValues = dateFields.filter((field) => {\n    const value = dateObject[field]\n    return !isAllowedValue(value)\n  })\n\n  return invalidValues\n}\n\nexport const getMissingFields = (dateObject: DateObject) => {\n  const missingFields = dateFields.filter((field) => {\n    return !dateObject[field]\n  })\n\n  return missingFields\n}\n\nexport const getImpossibleFields = (dateObject: DateObject) => {\n  const impossibleValues = dateFields.filter((field) => {\n    return !validators[field](dateObject[field])\n  })\n\n  return impossibleValues\n}\n\nexport const humanReadableJoin = (arr: string[]): string => {\n  if (arr.length === 0) {\n    return ''\n  } else if (arr.length === 1) {\n    return arr[0]\n  } else if (arr.length === 2) {\n    return `${arr[0]} and ${arr[1]}`\n  } else {\n    const last = arr.pop()\n    return `${arr.join(', ')} and ${last}`\n  }\n}\n\nexport const createMissingFieldErrorMessage = (missingFields: string[]) => {\n  const beginning = 'Date of birth must include '\n  const orderedMissingFields = ['day', 'month', 'year'].filter((field) =>\n    missingFields.includes(field),\n  )\n\n  return beginning + humanReadableJoin(orderedMissingFields)\n}\n\nexport const createImpossibleFieldErrorMessage = (\n  impossibleFields: string[],\n) => {\n  const beginning = 'Please enter a valid '\n  const orderedImpossibleFields = ['day', 'month', 'year'].filter((field) =>\n    impossibleFields.includes(field),\n  )\n\n  return beginning + humanReadableJoin(orderedImpossibleFields)\n}\n\nexport const createYoungerThan17ErrorMessage = () => {\n  const comparisonDate = subYears(new Date(), 17)\n\n  return `Please enter a date of birth on or before ${comparisonDate.getDate()} ${monthsArray[comparisonDate.getMonth()]} ${comparisonDate.getFullYear()}`\n}\n\nexport const error = <T>(\n  type: T,\n  fields?: string[],\n): {\n  error: T\n  fields?: string[]\n} => {\n  return { error: type, fields }\n}\n\nexport const is17YearsOld = (date: Date) => {\n  const comparisonDate = subYears(new Date(), 17)\n\n  return !isAfter(date, comparisonDate)\n}\n"]}
+{"version":3,"file":"dateOfBirthValidator.utils.js","sourceRoot":"","sources":["../../../src/utils/dateOfBirth/dateOfBirthValidator.utils.ts"],"names":[],"mappings":"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","sourcesContent":["import { isAfter, subYears } from 'date-fns'\n\nimport { DateObject } from '../../TextDateOfBirthInput'\n\nconst dateFields = ['day', 'month', 'year'] as const\n\nexport const monthsArray = [\n  'January',\n  'February',\n  'March',\n  'April',\n  'May',\n  'June',\n  'July',\n  'August',\n  'September',\n  'October',\n  'November',\n  'December',\n]\n\nexport const validators: Record<\n  (typeof dateFields)[number],\n  (dateField: string | undefined | null) => boolean\n> = {\n  day: (day) => {\n    const dayNumber = Number(day)\n    return Boolean(day && dayNumber >= 1 && dayNumber <= 31)\n  },\n  month: (month) => {\n    const monthNumber = Number(month)\n    return Boolean(month && monthNumber >= 1 && monthNumber <= 12)\n  },\n  year: (year) => {\n    const yearNumber = Number(year)\n    return Boolean(year && yearNumber && year.length === 4 && yearNumber > 0)\n  },\n}\n\nexport const isAllowedValue = (value: string | null | undefined) => {\n  return value === null || (value && /^\\d+$/.test(value)) || value === ''\n}\n\nexport const getInvalidInputFields = (dateObject: DateObject) => {\n  const invalidValues = dateFields.filter((field) => {\n    const value = dateObject[field]\n    return !isAllowedValue(value)\n  })\n\n  return invalidValues\n}\n\nexport const getMissingFields = (dateObject: DateObject) => {\n  const missingFields = dateFields.filter((field) => {\n    return !dateObject[field]\n  })\n\n  return missingFields\n}\n\nexport const getImpossibleFields = (dateObject: DateObject) => {\n  const impossibleValues = dateFields.filter((field) => {\n    return !validators[field](dateObject[field])\n  })\n\n  return impossibleValues\n}\n\nexport const humanReadableJoin = (arr: string[]): string => {\n  if (arr.length === 0) {\n    return ''\n  } else if (arr.length === 1) {\n    return arr[0]\n  } else if (arr.length === 2) {\n    return `${arr[0]} and ${arr[1]}`\n  } else {\n    const last = arr.pop()\n    return `${arr.join(', ')} and ${last}`\n  }\n}\n\nexport const createMissingFieldErrorMessage = (missingFields: string[]) => {\n  const beginning = 'Date of birth must include '\n  const orderedMissingFields = ['day', 'month', 'year'].filter((field) =>\n    missingFields.includes(field),\n  )\n\n  return beginning + humanReadableJoin(orderedMissingFields)\n}\n\nexport const createImpossibleFieldErrorMessage = (\n  impossibleFields: string[],\n) => {\n  const beginning = 'Please enter a valid '\n  const orderedImpossibleFields = ['day', 'month', 'year'].filter((field) =>\n    impossibleFields.includes(field),\n  )\n\n  return beginning + humanReadableJoin(orderedImpossibleFields)\n}\n\nexport const createYoungerThan17ErrorMessage = () => {\n  const comparisonDate = subYears(new Date(), 17)\n\n  return `Please enter a date of birth on or before ${comparisonDate.getDate()} ${monthsArray[comparisonDate.getMonth()]} ${comparisonDate.getFullYear()}`\n}\n\nexport const error = <T>(\n  type: T,\n  fields?: string[],\n): {\n  error: T\n  fields?: string[]\n} => {\n  return { error: type, fields }\n}\n\nexport const is17YearsOld = (date: Date) => {\n  const comparisonDate = subYears(new Date(), 17)\n\n  return !isAfter(date, comparisonDate)\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrshmllw/smores-react",
-  "version": "11.0.1-crumbs-feature-adjust-package-2.1",
+  "version": "11.1.0-crumbs-feature-support-rounded-sub-tables.1",
   "main": "./dist/index.js",
   "description": "Collection of React components used by Marshmallow Technology",
   "type": "module",
@@ -42,22 +42,22 @@
     "@semantic-release/github": "^11.0.1",
     "@semantic-release/npm": "^12.0.0",
     "@snyk/protect": "^1.1295.3",
-    "@storybook/addon-a11y": "^8.4.7",
+    "@storybook/addon-a11y": "^8.5.6",
     "@storybook/addon-coverage": "^1.0.5",
-    "@storybook/addon-essentials": "^8.4.7",
-    "@storybook/addon-interactions": "^8.4.7",
-    "@storybook/addon-links": "^8.4.7",
-    "@storybook/preview-api": "^8.4.7",
-    "@storybook/react": "^8.4.7",
-    "@storybook/react-vite": "^8.4.7",
+    "@storybook/addon-essentials": "^8.5.6",
+    "@storybook/addon-interactions": "^8.5.6",
+    "@storybook/addon-links": "^8.5.6",
+    "@storybook/preview-api": "^8.5.6",
+    "@storybook/react": "^8.5.6",
+    "@storybook/react-vite": "^8.5.6",
     "@storybook/test": "^8.2.1",
-    "@storybook/test-runner": "^0.21.0",
+    "@storybook/test-runner": "^0.21.1",
     "@testing-library/react": "^16.2.0",
     "@types/body-scroll-lock": "^3.1.0",
     "@types/dompurify": "^3.2.0",
-    "@types/node": "^22.13.2",
-    "@types/react": "^19.0.8",
-    "@types/react-dom": "^19.0.3",
+    "@types/node": "^22.13.4",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
     "@typescript-eslint/eslint-plugin": "^8.23.0",
     "@typescript-eslint/parser": "^8.23.0",
     "axe-playwright": "^2.1.0",
@@ -71,15 +71,15 @@
     "jsdom": "^26.0.0",
     "lint-staged": "^15.4.3",
     "playwright": "^1.50.1",
-    "prettier": "^3.5.0",
+    "prettier": "^3.5.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "rimraf": "^6.0.1",
-    "semantic-release": "^24.2.2",
+    "semantic-release": "^24.2.3",
     "storybook": "^8.0.4",
     "styled-components": "^6.1.15",
     "typescript": "^5.7.3",
-    "typescript-eslint": "^8.24.0",
+    "typescript-eslint": "^8.24.1",
     "vite": "^6.1.0",
     "vitest": "^3.0.5"
   },