@ledgerhq/react-ui 0.12.1 → 0.13.0-next.0

package/lib/cjs/components/Table/Table.stories.js

@@ -1,40 +1,47 @@
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
-  __markAsModule(target);
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && key !== "default")
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-var __toModule = (module2) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-__export(exports, {
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Table_stories_exports = {};
+__export(Table_stories_exports, {
   CustomRows: () => CustomRows,
   Default: () => Default,
   Nested: () => Nested,
   Styled: () => Styled,
   default: () => Table_stories_default
 });
-var import_react = __toModule(require("react"));
-var import_styled_components = __toModule(require("styled-components"));
-var import_Button = __toModule(require("../cta/Button"));
-var import_Flex = __toModule(require("../layout/Flex"));
-var import_Text = __toModule(require("../asorted/Text"));
-var import_index = __toModule(require("./index"));
-var import_stories = __toModule(require("./stories.helper"));
+module.exports = __toCommonJS(Table_stories_exports);
+var import_react = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+var import_Button = __toESM(require("../cta/Button"));
+var import_Flex = __toESM(require("../layout/Flex"));
+var import_Text = __toESM(require("../asorted/Text"));
+var import_index = __toESM(require("./index"));
+var import_stories = require("./stories.helper");
 const description = `
 ### A flexible table component.
 
@@ -209,23 +216,14 @@ const data = new Array(12).fill(0).map((_, idx) => ({
 }));
 const NB_OF_COLUMNS = 4;
 const columns = Array(NB_OF_COLUMNS).fill(0).map((_, idx) => ({
-  header: () => /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
-    variant: "h5"
-  }, String.fromCharCode(65 + idx)),
-  render: ({ elt, rowIndex, columnIndex }) => /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
-    alignItems: "baseline"
-  }, /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
-    mr: 4
-  }, elt.value * NB_OF_COLUMNS + columnIndex), /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
-    variant: "extraSmall"
-  }, "(", rowIndex, " / ", columnIndex, ")"))
+  // The header will be a letter based on the column (A / B / C / D).
+  // 65 is the char code for the letter 'A'.
+  header: () => /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "h5" }, String.fromCharCode(65 + idx)),
+  // Each cell will contain an incremental number as well as the cell position.
+  render: ({ elt, rowIndex, columnIndex }) => /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { alignItems: "baseline" }, /* @__PURE__ */ import_react.default.createElement(import_Text.default, { mr: 4 }, elt.value * NB_OF_COLUMNS + columnIndex), /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "extraSmall" }, "(", rowIndex, " / ", columnIndex, ")"))
 }));
 const Default = (args) => {
-  return /* @__PURE__ */ import_react.default.createElement(import_index.default, {
-    ...args,
-    data,
-    columns
-  });
+  return /* @__PURE__ */ import_react.default.createElement(import_index.default, { ...args, data, columns });
 };
 const styledExampleDescription = `
 A more advanced example that applies some styles to the table and uses predefined columns.
@@ -237,16 +235,19 @@ In this example we are taking advantage of that by using the \`p\`, \`gridRowGap
 \`borderRadius\` and \`backgroundColor\` props to style the table container.
 `;
 const Styled = (args) => {
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_index.default, {
-    ...args,
-    data: import_stories.balance.data,
-    columns: import_stories.balance.columns,
-    p: 8,
-    gridRowGap: 8,
-    gridColumnGap: 6,
-    borderRadius: 8,
-    backgroundColor: "neutral.c20"
-  }));
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+    import_index.default,
+    {
+      ...args,
+      data: import_stories.balance.data,
+      columns: import_stories.balance.columns,
+      p: 8,
+      gridRowGap: 8,
+      gridColumnGap: 6,
+      borderRadius: 8,
+      backgroundColor: "neutral.c20"
+    }
+  ));
 };
 Styled.parameters = {
   docs: {
@@ -305,44 +306,40 @@ function SubAccounts({
   const { subAccounts } = account;
   if (!subAccounts)
     return null;
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, expanded && /* @__PURE__ */ import_react.default.createElement(import_index.Rows, {
-    data: subAccounts,
-    columns: columns2,
-    render: ({ columnIndex, children }) => columnIndex === 0 ? /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
-      alignItems: "center",
-      justifyContent: "flex-end"
-    }, /* @__PURE__ */ import_react.default.createElement("div", {
-      style: {
-        width: "1px",
-        height: "2em",
-        marginRight: `${theme.space[6]}px`,
-        borderLeft: `1px solid ${theme.colors.neutral.c40}`
-      }
-    }), children) : children
-  }), /* @__PURE__ */ import_react.default.createElement(import_index.default.ExtraRowContainer, null, /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
-    justifyContent: "center",
-    mt: -8
-  }, /* @__PURE__ */ import_react.default.createElement(import_Button.default.Expand, {
-    onToggle: setExpanded
-  }, /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
-    variant: "paragraph"
-  }, expanded ? "Hide" : "Show", " tokens (", subAccounts.length, ")")))));
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, expanded && /* @__PURE__ */ import_react.default.createElement(
+    import_index.Rows,
+    {
+      data: subAccounts,
+      columns: columns2,
+      render: ({ columnIndex, children }) => columnIndex === 0 ? /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { alignItems: "center", justifyContent: "flex-end" }, /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          style: {
+            width: "1px",
+            height: "2em",
+            marginRight: `${theme.space[6]}px`,
+            borderLeft: `1px solid ${theme.colors.neutral.c40}`
+          }
+        }
+      ), children) : children
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(import_index.default.ExtraRowContainer, null, /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { justifyContent: "center", mt: -8 }, /* @__PURE__ */ import_react.default.createElement(import_Button.default.Expand, { onToggle: setExpanded }, /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "paragraph" }, expanded ? "Hide" : "Show", " tokens (", subAccounts.length, ")")))));
 }
 function Nested(args) {
-  return /* @__PURE__ */ import_react.default.createElement(import_index.default, {
-    ...args,
-    data: import_stories.accounts.data,
-    columns: import_stories.accounts.columns,
-    gridRowGap: 8,
-    gridColumnGap: 6,
-    p: 8,
-    borderRadius: 8,
-    backgroundColor: "neutral.c20",
-    extraRender: (account) => account.subAccounts && account.subAccounts.length > 0 && /* @__PURE__ */ import_react.default.createElement(SubAccounts, {
-      account,
-      columns: import_stories.accounts.columns
-    })
-  });
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_index.default,
+    {
+      ...args,
+      data: import_stories.accounts.data,
+      columns: import_stories.accounts.columns,
+      gridRowGap: 8,
+      gridColumnGap: 6,
+      p: 8,
+      borderRadius: 8,
+      backgroundColor: "neutral.c20",
+      extraRender: (account) => account.subAccounts && account.subAccounts.length > 0 && /* @__PURE__ */ import_react.default.createElement(SubAccounts, { account, columns: import_stories.accounts.columns })
+    }
+  );
 }
 Nested.parameters = {
   docs: {
@@ -417,9 +414,11 @@ const CustomRowContainer = styled(Table.RowContainer).attrs(
 \`;
 \`\`\`
 `;
-const CustomRowContainer = (0, import_styled_components.default)(import_index.default.RowContainer).attrs(({ onClick }) => ({
-  onClick
-}))`
+const CustomRowContainer = (0, import_styled_components.default)(import_index.default.RowContainer).attrs(
+  ({ onClick }) => ({
+    onClick
+  })
+)`
   & > * {
     padding-left: ${(p) => p.theme.space[5]}px;
     padding-right: ${(p) => p.theme.space[5]}px;
@@ -442,27 +441,26 @@ const CustomRowContainer = (0, import_styled_components.default)(import_index.de
 `;
 const CustomRows = (args) => {
   const [selectedRowIndex, setSelectedRowIndex] = (0, import_react.useState)(null);
-  const renderRow = (0, import_react.useCallback)((rowIndex, children) => /* @__PURE__ */ import_react.default.createElement(CustomRowContainer, {
-    rowIndex,
-    onClick: () => setSelectedRowIndex(rowIndex)
-  }, children), []);
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
-    mb: 8
-  }, /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
-    variant: "h5"
-  }, "Selected index: ", selectedRowIndex ?? "none")), /* @__PURE__ */ import_react.default.createElement(import_index.default, {
-    ...args,
-    data: import_stories.balance.data,
-    columns: import_stories.balance.columns,
-    renderRow,
-    borderRadius: 8,
-    justifyItems: "stretch",
-    alignItems: "stretch",
-    border: "1px solid",
-    borderColor: "neutral.c50",
-    overflow: "hidden",
-    withHeaders: false
-  }));
+  const renderRow = (0, import_react.useCallback)(
+    (rowIndex, children) => /* @__PURE__ */ import_react.default.createElement(CustomRowContainer, { rowIndex, onClick: () => setSelectedRowIndex(rowIndex) }, children),
+    []
+  );
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { mb: 8 }, /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "h5" }, "Selected index: ", selectedRowIndex ?? "none")), /* @__PURE__ */ import_react.default.createElement(
+    import_index.default,
+    {
+      ...args,
+      data: import_stories.balance.data,
+      columns: import_stories.balance.columns,
+      renderRow,
+      borderRadius: 8,
+      justifyItems: "stretch",
+      alignItems: "stretch",
+      border: "1px solid",
+      borderColor: "neutral.c50",
+      overflow: "hidden",
+      withHeaders: false
+    }
+  ));
 };
 CustomRows.parameters = {
   docs: {

package/lib/cjs/components/Table/Table.stories.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../src/components/Table/Table.stories.tsx"],
   "sourcesContent": ["import React, { useState, useCallback } from \"react\";\nimport styled, { useTheme } from \"styled-components\";\n\nimport Button from \"../cta/Button\";\nimport Flex from \"../layout/Flex\";\nimport Text from \"../asorted/Text\";\nimport Table, { RowContainerProps, Rows, Column, Props } from \"./index\";\nimport { balance, BalanceElement, accounts, Account } from \"./stories.helper\";\nimport { StoryTemplate } from \"../helpers\";\n\nconst description = `\n### A flexible table component.\n\nDefine columns and pass some data to the component that will render it appropriately.\n\n## Usage\n\n\\`\\`\\`js\n\nimport { Table } from \"@ledgerhq/react-ui\"\n\n\\`\\`\\`\n\n### Define columns\n\nTo use the Table component the first thing to do is to define an array of columns.\n\nA column is an object that specifies:\n\n- how cells are rendered\n- how the header is rendered\n- the cells layout\n\n<details>\n<summary>Column object shape</summary>\n\\`\\`\\`ts\n// Note for typescript users, these types are importable from \"@ledgerhq/react-ui/components/Table/Columns\"\n// <T> is the type the data that will be rendered by the table.\n\ninterface Column<T> {\n  /**\n   * A function called to render each cell of the column.\n   */\n  render: (props: CellProps<T>) => React.ReactNode;\n  /**\n   * A valid grid template [value](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns#values).\n   * This layout is applied to every cell of the column.\n   * Default to \"min-content\" - the largest minimal content contribution of the grid item.\n   */\n  layout?: string;\n  /**\n   * A function called to render the header cell.\n   * If omitted the rendered header element will be an empty div.\n   */\n  header?: () => React.ReactNode;\n}\n\ninterface CellProps<T> {\n  /**\n   * The cell element.\n   */\n  elt: T;\n  /**\n   * The row index.\n   */\n  rowIndex: number;\n  /**\n   * The column index.\n   */\n  columnIndex: number;\n}\n\\`\\`\\`\n</details>\n\nYou can either define custom columns or reuse predefined ones that take care of the style\nand the layout and match the global look and feel.\n\n<details>\n<summary>Predefined columns</summary>\n\\`\\`\\`tsx\nTable.Columns.text(args: {\n  /**\n   * An optional title.\n   */\n  title?: (elt: T) => React.ReactNode;\n  /**\n   * An optional subtitle.\n   */\n  subtitle?: (elt: T) => React.ReactNode;\n  /**\n   * An optional render function to display the column header.\n   */\n  header?: () => React.ReactNode;\n  /**\n   * The grid column layout, by default \"auto\".\n   */\n  layout?: string;\n  /**\n   * Optional extra props passed to the title <Text /> wrapper.\n   */\n  titleProps?: (elt: T) => Partial<React.ComponentProps<typeof Text>>;\n  /**\n   * Optional extra props passed to the subtitle <Text /> wrapper.\n   */\n  subtitleProps?: (elt: T) => Partial<React.ComponentProps<typeof Text>>;\n})\n\nTable.Columns.icon(args: {\n  /**\n   * An object containing the unerlying <Text /> wrapper props as well as\n   * the \"name\" and \"weight\" props of the unerlying <Icon />.\n   */\n  props: (elt: T) => Pick<IconProps, \"name\" | \"weight\"> & TextProps;\n  /**\n   * An optional render function to display the column header.\n   */\n  header?: () => React.ReactNode;\n  /**\n   * The grid column layout, by default \"min-content\".\n   */\n  layout?: string;\n})\n\\`\\`\\`\n</details>\n\n\\`\\`\\`tsx\nconst columns = [\n  // Custom column. (layout is optional)\n  {\n    layout: \"64px\",\n    render: ({ elt }) => <div>elt.value</div>\n  },\n  // Predefined columns.\n  Table.Columns.text({\n    layout: \"2fr\",\n    title: (elt) => elt.name,\n    subtitle: (elt) => elt.currency.name,\n  }),\n  Table.Columns.icon({\n    props: (elt) => ({\n      name: elt.synchronized ? \"CircledCheck\" : \"Clock\",\n      color: elt.synchronized ? \"success.c100\" : \"neutral.c80\",\n    }),\n  }),\n]\n\\`\\`\\`\n\n### Minimal Working Example\n\n\\`\\`\\`tsx\n// An array of 12 items - each mapped to a row in the table.\nconst data = new Array(12).fill(0).map((_, idx) => ({\n  value: idx,\n}));\n\n// We have 4 columns here.\nconst NB_OF_COLUMNS = 4;\nconst columns: Column<typeof data[0]>[] = Array(NB_OF_COLUMNS)\n  .fill(0)\n  .map((_, idx) => ({\n    // The header will be a letter based on the column (A / B / C / D).\n    // 65 is the char code for the letter 'A'.\n    header: () => <Text variant=\"h5\">{String.fromCharCode(65 + idx)}</Text>,\n    // Each cell will contain an incremental number as well as the cell position.\n    render: ({ elt, rowIndex, columnIndex }) => (\n      <Flex alignItems=\"baseline\">\n        <Text mr={4}>{elt.value * NB_OF_COLUMNS + columnIndex}</Text>\n        <Text variant=\"extraSmall\">\n          ({rowIndex} / {columnIndex})\n        </Text>\n      </Flex>\n    ),\n  }));\n\nfunction MinimalExample(args) {\n  return <Table {...args} data={data} columns={columns} />;\n};\n\\`\\`\\`\n`;\n\n/* Default minimal example */\n\n// An array of 12 items - each mapped to a row in the table.\nconst data = new Array(12).fill(0).map((_, idx) => ({\n  value: idx,\n}));\n\n// We have 4 columns here.\nconst NB_OF_COLUMNS = 4;\nconst columns: Column<typeof data[0]>[] = Array(NB_OF_COLUMNS)\n  .fill(0)\n  .map((_, idx) => ({\n    // The header will be a letter based on the column (A / B / C / D).\n    // 65 is the char code for the letter 'A'.\n    header: () => <Text variant=\"h5\">{String.fromCharCode(65 + idx)}</Text>,\n    // Each cell will contain an incremental number as well as the cell position.\n    render: ({ elt, rowIndex, columnIndex }) => (\n      <Flex alignItems=\"baseline\">\n        <Text mr={4}>{elt.value * NB_OF_COLUMNS + columnIndex}</Text>\n        <Text variant=\"extraSmall\">\n          ({rowIndex} / {columnIndex})\n        </Text>\n      </Flex>\n    ),\n  }));\n\nexport const Default: StoryTemplate<Props<typeof data[0]>> = (args) => {\n  return <Table {...args} data={data} columns={columns} />;\n};\n\n/* Styled example */\n\nconst styledExampleDescription = `\nA more advanced example that applies some styles to the table and uses predefined columns.\n\nAdditional props passed to the Table are applied to the outer container which is\nan instance of the \\`Grid\\` component.\n\nIn this example we are taking advantage of that by using the \\`p\\`, \\`gridRowGap\\`, \\`gridColumnGap\\`,\n\\`borderRadius\\` and \\`backgroundColor\\` props to style the table container.\n`;\n\nexport const Styled: StoryTemplate<Props<BalanceElement>> = (args) => {\n  return (\n    <>\n      <Table\n        {...args}\n        data={balance.data}\n        columns={balance.columns}\n        p={8}\n        gridRowGap={8}\n        gridColumnGap={6}\n        borderRadius={8}\n        backgroundColor=\"neutral.c20\"\n      />\n    </>\n  );\n};\n\nStyled.parameters = {\n  docs: {\n    description: {\n      story: styledExampleDescription,\n    },\n  },\n};\n\n/* Nested example */\n\nconst nestedExampleDescription = `\nA complex example that takes in entry nested data and conditonally adds a custom additional row to the table.\n\nThe data has the following shape:\n\n\\`\\`\\`ts\ntype Account = {\n  name: string;\n  currency: { name: string; abbrev: string };\n  synchronized: boolean;\n  amount: number;\n  evolution: number;\n  starred: boolean;\n  // The interesting thing is that an account can contain sub-accounts\n  subAccounts?: Account[];\n};\n\\`\\`\\`\n\nThe table used in this example adds an extra row containing a nested table when an account contains sub-accounts.\n\nIn order to achieve that the \\`extraRender\\` prop is used and set to a function that will render the extra row.\n\nYou can use the \\`ExtraRowContainer\\` wrapper as the row container if you want the extra content to span the entire row.\nOtherwise be careful not to disturb the grid layout order.\n\n\\`\\`\\`tsx\n<Table\n  /* ... */\n  extraRender={(account) =>\n    // If there are sub accounts\u2026\n    account.subAccounts &&\n    account.subAccounts.length > 0 && (\n      // \u2026render the extra row.\n      // ExtraRowContainer is a component that will span to the whole row.\n      <Table.ExtraRowContainer>{/* stuff */}</Table.ExtraRowContainer>\n    )\n  }\n/>\n\\`\\`\\`\n\n`;\n\nfunction SubAccounts({\n  account,\n  columns,\n}: {\n  account: Account;\n  columns: Column<Account>[];\n}): JSX.Element | null {\n  const theme = useTheme();\n  const [expanded, setExpanded] = useState(false);\n  const { subAccounts } = account;\n  if (!subAccounts) return null;\n\n  return (\n    <>\n      {expanded && (\n        <Rows\n          data={subAccounts}\n          columns={columns}\n          render={({ columnIndex, children }) =>\n            columnIndex === 0 ? (\n              <Flex alignItems=\"center\" justifyContent=\"flex-end\">\n                <div\n                  style={{\n                    width: \"1px\",\n                    height: \"2em\",\n                    marginRight: `${theme.space[6]}px`,\n                    borderLeft: `1px solid ${theme.colors.neutral.c40}`,\n                  }}\n                />\n                {children}\n              </Flex>\n            ) : (\n              children\n            )\n          }\n        />\n      )}\n      <Table.ExtraRowContainer>\n        <Flex justifyContent=\"center\" mt={-8}>\n          <Button.Expand onToggle={setExpanded}>\n            <Text variant={\"paragraph\"}>\n              {expanded ? \"Hide\" : \"Show\"} tokens ({subAccounts.length})\n            </Text>\n          </Button.Expand>\n        </Flex>\n      </Table.ExtraRowContainer>\n    </>\n  );\n}\n\nexport function Nested(args: Props<Account>): JSX.Element {\n  return (\n    <Table\n      {...args}\n      data={accounts.data}\n      columns={accounts.columns}\n      gridRowGap={8}\n      gridColumnGap={6}\n      p={8}\n      borderRadius={8}\n      backgroundColor=\"neutral.c20\"\n      extraRender={(account) =>\n        account.subAccounts &&\n        account.subAccounts.length > 0 && (\n          <SubAccounts account={account} columns={accounts.columns} />\n        )\n      }\n    />\n  );\n}\n\nNested.parameters = {\n  docs: {\n    description: {\n      story: nestedExampleDescription,\n    },\n  },\n};\n\n/* Custom row example */\n\nconst customRowExampleDescription = `\nThis example showcases how to styles rows, wrap them inside custom containers and add event handlers.\n\n#### Row containers and event handlers\n\nThe \\`renderRow\\` prop is a render function that allows to customize the jsx output for each row of the table.\n\nNote that the container should have the [\\`display: contents\\`](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout#grid_and_display_contents) css rule\nin order to preserve the table grid layout order.\n\n\\`\\`\\`tsx\nconst renderRow = React.useCallback(\n  (rowIndex, children) => (\n    // RowContainer is a convenience component having \"display: contents\" hardcoded.\n    // You can pass any event handler here.\n    <Table.RowContainer onClick={() => alert(rowIndex)}>\n      {children}\n    </Table.RowContainer>\n  ),\n  [],\n);\n\n<Table\n  /* ... */\n  renderRow={renderRow}\n/>\n\\`\\`\\`\n\n#### Styling\n\nStyling the container itself will not work.\nSince it has the \\`display: contents\\` rule the element will not produce a content box.\n\nOne working solution is to style the children instead.\n\n\\`\\`\\`ts\nconst CustomRowContainer = styled(Table.RowContainer).attrs(\n  ({ onClick }) => ({\n    onClick,\n  }),\n)\\`\n  & > * {\n    padding-left: \\${(p) => p.theme.space[5]}px;\n    padding-right: \\${(p) => p.theme.space[5]}px;\n    padding-top: \\${(p) => p.theme.space[5]}px;\n    padding-bottom: \\${(p) => p.theme.space[5]}px;\n\n    &:first-child {\n      padding-left: \\${(p) => p.theme.space[8]}px;\n    }\n    &:last-child {\n      padding-right: \\${(p) => p.theme.space[8]}px;\n    }\n  }\n\n  &:hover > * {\n    transition: background-color 0.2s;\n    cursor: pointer;\n    background-color: \\${(p) =>\n      p.rowIndex % 2 === 0\n        ? p.theme.colors.neutral.c30\n        : p.theme.colors.primary.c20};\n  }\n\\`;\n\\`\\`\\`\n`;\n\nconst CustomRowContainer = styled(Table.RowContainer).attrs<{ onClick: () => void }>(\n  ({ onClick }) => ({\n    onClick,\n  }),\n)<RowContainerProps>`\n  & > * {\n    padding-left: ${(p) => p.theme.space[5]}px;\n    padding-right: ${(p) => p.theme.space[5]}px;\n    padding-top: ${(p) => p.theme.space[5]}px;\n    padding-bottom: ${(p) => p.theme.space[5]}px;\n\n    &:first-child {\n      padding-left: ${(p) => p.theme.space[8]}px;\n    }\n    &:last-child {\n      padding-right: ${(p) => p.theme.space[8]}px;\n    }\n  }\n\n  &:hover > * {\n    transition: background-color 0.2s;\n    cursor: pointer;\n    background-color: ${(p) =>\n      p.rowIndex % 2 === 0 ? p.theme.colors.neutral.c30 : p.theme.colors.primary.c20};\n  }\n`;\n\nexport const CustomRows: StoryTemplate<Props<BalanceElement>> = (args) => {\n  const [selectedRowIndex, setSelectedRowIndex] = useState(null);\n\n  const renderRow = useCallback(\n    (rowIndex, children) => (\n      <CustomRowContainer rowIndex={rowIndex} onClick={() => setSelectedRowIndex(rowIndex)}>\n        {children}\n      </CustomRowContainer>\n    ),\n    [],\n  );\n\n  return (\n    <>\n      <Flex mb={8}>\n        <Text variant=\"h5\">Selected index: {selectedRowIndex ?? \"none\"}</Text>\n      </Flex>\n      <Table\n        {...args}\n        data={balance.data}\n        columns={balance.columns}\n        renderRow={renderRow}\n        borderRadius={8}\n        justifyItems=\"stretch\"\n        alignItems=\"stretch\"\n        border=\"1px solid\"\n        borderColor=\"neutral.c50\"\n        overflow=\"hidden\"\n        withHeaders={false}\n      />\n    </>\n  );\n};\n\nCustomRows.parameters = {\n  docs: {\n    description: {\n      story: customRowExampleDescription,\n    },\n  },\n};\n\n/* Export */\n\nexport default {\n  title: \"Tables/Table\",\n  component: Table,\n  argTypes: {\n    withHeaders: { type: \"boolean\", defaultValue: false },\n    data: { control: false },\n    columns: { control: false },\n    rows: { table: { disable: true } },\n  },\n  parameters: {\n    docs: {\n      description: {\n        component: description,\n      },\n    },\n  },\n};\n"],
-  "mappings": "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",
-  "names": []
+  "mappings": "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",
+  "names": ["React", "Text", "Flex", "Table", "columns", "Button", "styled"]
 }

package/lib/cjs/components/Table/index.js

@@ -1,39 +1,46 @@
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
-  __markAsModule(target);
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && key !== "default")
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-var __toModule = (module2) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-__export(exports, {
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Table_exports = {};
+__export(Table_exports, {
   ExtraRowContainer: () => ExtraRowContainer,
   RowContainer: () => RowContainer,
   Rows: () => Rows,
   Table: () => Table,
   default: () => Table_default
 });
-var import_react = __toModule(require("react"));
-var import_styled_components = __toModule(require("styled-components"));
-var import_styled_system = __toModule(require("styled-system"));
-var import_Grid = __toModule(require("../layout/Grid"));
-var import_Flex = __toModule(require("../layout/Flex"));
-var Columns = __toModule(require("./Columns"));
+module.exports = __toCommonJS(Table_exports);
+var import_react = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+var import_styled_system = require("styled-system");
+var import_Grid = __toESM(require("../layout/Grid"));
+var import_Flex = __toESM(require("../layout/Flex"));
+var Columns = __toESM(require("./Columns"));
 const Container = (0, import_styled_components.default)(import_Grid.default)`
   ${import_styled_system.border}
 `;
@@ -50,12 +57,8 @@ function RowsComponent({
   extraRender,
   renderRow
 }) {
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, {
-    key: "row-component"
-  }, data.map((elt, rowIndex) => {
-    const row = /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, columns.map((column, columnIndex) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, {
-      key: `row-component-column-${rowIndex}${columnIndex}`
-    }, render ? render({
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, { key: "row-component" }, data.map((elt, rowIndex) => {
+    const row = /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, columns.map((column, columnIndex) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, { key: `row-component-column-${rowIndex}${columnIndex}` }, render ? render({
       column,
       rowIndex,
       columnIndex,
@@ -64,9 +67,7 @@ function RowsComponent({
     if (renderRow) {
       return renderRow(rowIndex, row);
     } else {
-      return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, {
-        key: `row-component-row-${rowIndex}`
-      }, row);
+      return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, { key: `row-component-row-${rowIndex}` }, row);
     }
   }));
 }
@@ -79,25 +80,32 @@ function Table({
   renderRow,
   ...containerProps
 }) {
-  const gridTemplateColumns = (0, import_react.useMemo)(() => columns.reduce((acc, col) => `${acc} ${col.layout || "auto"}`, ""), [columns]);
-  const headers = (0, import_react.useMemo)(() => withHeaders ? columns.reduce((acc, col, index) => [
-    ...acc,
-    /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, {
-      key: `header-col-${index}`
-    }, col.header ? col.header() : /* @__PURE__ */ import_react.default.createElement("div", null))
-  ], []) : null, [withHeaders, columns]);
-  return /* @__PURE__ */ import_react.default.createElement(Container, {
-    gridTemplateColumns,
-    gridAutoRows: "auto",
-    columns: "none",
-    alignItems: "center",
-    ...containerProps
-  }, headers, /* @__PURE__ */ import_react.default.createElement(Rows, {
-    data,
-    columns,
-    extraRender,
-    renderRow
-  }));
+  const gridTemplateColumns = (0, import_react.useMemo)(
+    () => columns.reduce((acc, col) => `${acc} ${col.layout || "auto"}`, ""),
+    [columns]
+  );
+  const headers = (0, import_react.useMemo)(
+    () => withHeaders ? columns.reduce(
+      (acc, col, index) => [
+        ...acc,
+        /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, { key: `header-col-${index}` }, col.header ? col.header() : /* @__PURE__ */ import_react.default.createElement("div", null))
+      ],
+      []
+    ) : null,
+    [withHeaders, columns]
+  );
+  return /* @__PURE__ */ import_react.default.createElement(
+    Container,
+    {
+      gridTemplateColumns,
+      gridAutoRows: "auto",
+      columns: "none",
+      alignItems: "center",
+      ...containerProps
+    },
+    headers,
+    /* @__PURE__ */ import_react.default.createElement(Rows, { data, columns, extraRender, renderRow })
+  );
 }
 Table.Columns = Columns;
 Table.ExtraRowContainer = ExtraRowContainer;

package/lib/cjs/components/Table/index.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../src/components/Table/index.tsx"],
   "sourcesContent": ["import React, { memo, useMemo } from \"react\";\nimport styled from \"styled-components\";\nimport { border, BorderProps, gridColumn, GridColumnProps } from \"styled-system\";\nimport Grid, { Props as GridProps } from \"../layout/Grid\";\nimport Flex from \"../layout/Flex\";\nimport * as Columns from \"./Columns\";\nimport type { Column } from \"./Columns\";\nimport { BaseStyledProps } from \"../styled\";\nexport type { Column };\n\nexport interface ContainerExtraProps extends BorderProps, BaseStyledProps {}\nexport interface ContainerProps extends ContainerExtraProps, GridProps {}\nconst Container = styled(Grid)<ContainerExtraProps>`\n  ${border}\n`;\n\nexport const ExtraRowContainer = styled.div.attrs({ gridColumn: \"1 / -1\" })<GridColumnProps>`\n  ${gridColumn}\n`;\n\nexport type RowContainerProps = { rowIndex: number };\nexport const RowContainer = styled(Flex)<RowContainerProps>`\n  display: contents;\n`;\n\ninterface CommonProps<T> {\n  /** Table data */\n  data: T[];\n  /** Columns used to render table cells and headers. */\n  columns: Column<T>[];\n  /**\n   * An optional rendering function that will get called after each row render.\n   * Can be used to display additional rows and columns dynamically.\n   */\n  extraRender?: (elt: T, index: number) => React.ReactNode;\n  /**\n   * A render function that can be used to wrap each row of the table inside an custom element.\n   */\n  renderRow?: (rowIndex: number, children: React.ReactNode) => React.ReactNode;\n}\n\nexport interface Props<T> extends CommonProps<T>, Omit<ContainerProps, \"columns\" | \"color\"> {\n  /**\n   * Renders headers if set to true.\n   */\n  withHeaders?: boolean;\n}\n\nexport interface RowProps<T> extends CommonProps<T> {\n  render?: (args: {\n    column: Column<T>;\n    rowIndex: number;\n    columnIndex: number;\n    children: React.ReactNode;\n  }) => React.ReactNode;\n}\n\nfunction RowsComponent<T>({\n  data,\n  columns,\n  render,\n  extraRender,\n  renderRow,\n}: RowProps<T>): JSX.Element {\n  return (\n    <React.Fragment key=\"row-component\">\n      {data.map((elt, rowIndex) => {\n        const row = (\n          <>\n            {columns.map((column, columnIndex) => (\n              <React.Fragment key={`row-component-column-${rowIndex}${columnIndex}`}>\n                {render\n                  ? render({\n                      column,\n                      rowIndex,\n                      columnIndex,\n                      children: column.render({ elt, rowIndex, columnIndex }),\n                    })\n                  : column.render({ elt, rowIndex, columnIndex })}\n              </React.Fragment>\n            ))}\n            {(extraRender && extraRender(elt, rowIndex)) || null}\n          </>\n        );\n\n        if (renderRow) {\n          return renderRow(rowIndex, row);\n        } else {\n          return <React.Fragment key={`row-component-row-${rowIndex}`}>{row}</React.Fragment>;\n        }\n      })}\n    </React.Fragment>\n  );\n}\nexport const Rows = memo(RowsComponent) as typeof RowsComponent;\n\nexport function Table<T>({\n  data,\n  columns,\n  withHeaders,\n  extraRender,\n  renderRow,\n  ...containerProps\n}: Props<T>): JSX.Element {\n  const gridTemplateColumns = useMemo(\n    () => columns.reduce<string>((acc, col) => `${acc} ${col.layout || \"auto\"}`, \"\"),\n    [columns],\n  );\n\n  const headers = useMemo(\n    () =>\n      withHeaders\n        ? columns.reduce<React.ReactNode[]>(\n            (acc, col, index) => [\n              ...acc,\n              <React.Fragment key={`header-col-${index}`}>\n                {col.header ? col.header() : <div />}\n              </React.Fragment>,\n            ],\n            [],\n          )\n        : null,\n    [withHeaders, columns],\n  );\n\n  return (\n    <Container\n      gridTemplateColumns={gridTemplateColumns}\n      gridAutoRows=\"auto\"\n      columns=\"none\"\n      alignItems=\"center\"\n      {...containerProps}\n    >\n      {headers}\n      <Rows data={data} columns={columns} extraRender={extraRender} renderRow={renderRow} />\n    </Container>\n  );\n}\nTable.Columns = Columns;\nTable.ExtraRowContainer = ExtraRowContainer;\nTable.RowContainer = RowContainer;\n\nconst memoTable = memo(Table) as unknown as typeof Table;\nmemoTable.Columns = Columns;\nmemoTable.RowContainer = RowContainer;\nmemoTable.ExtraRowContainer = ExtraRowContainer;\n\nexport default memoTable;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAqC;AACrC,+BAAmB;AACnB,2BAAiE;AACjE,kBAAyC;AACzC,kBAAiB;AACjB,cAAyB;AAOzB,MAAM,YAAY,sCAAO;AAAA,IACrB;AAAA;AAGG,MAAM,oBAAoB,iCAAO,IAAI,MAAM,EAAE,YAAY;AAAA,IAC5D;AAAA;AAIG,MAAM,eAAe,sCAAO;AAAA;AAAA;AAoCnC,uBAA0B;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,GAC2B;AAC3B,SACE,mDAAC,qBAAM,UAAP;AAAA,IAAgB,KAAI;AAAA,KACjB,KAAK,IAAI,CAAC,KAAK,aAAa;AAC3B,UAAM,MACJ,wFACG,QAAQ,IAAI,CAAC,QAAQ,gBACpB,mDAAC,qBAAM,UAAP;AAAA,MAAgB,KAAK,wBAAwB,WAAW;AAAA,OACrD,SACG,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU,OAAO,OAAO,EAAE,KAAK,UAAU;AAAA,SAE3C,OAAO,OAAO,EAAE,KAAK,UAAU,kBAGrC,eAAe,YAAY,KAAK,aAAc;AAIpD,QAAI,WAAW;AACb,aAAO,UAAU,UAAU;AAAA,WACtB;AACL,aAAO,mDAAC,qBAAM,UAAP;AAAA,QAAgB,KAAK,qBAAqB;AAAA,SAAa;AAAA;AAAA;AAAA;AAMjE,MAAM,OAAO,uBAAK;AAElB,eAAkB;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,KACG;AAAA,GACqB;AACxB,QAAM,sBAAsB,0BAC1B,MAAM,QAAQ,OAAe,CAAC,KAAK,QAAQ,GAAG,OAAO,IAAI,UAAU,UAAU,KAC7E,CAAC;AAGH,QAAM,UAAU,0BACd,MACE,cACI,QAAQ,OACN,CAAC,KAAK,KAAK,UAAU;AAAA,IACnB,GAAG;AAAA,IACH,mDAAC,qBAAM,UAAP;AAAA,MAAgB,KAAK,cAAc;AAAA,OAChC,IAAI,SAAS,IAAI,WAAW,mDAAC,OAAD;AAAA,KAGjC,MAEF,MACN,CAAC,aAAa;AAGhB,SACE,mDAAC,WAAD;AAAA,IACE;AAAA,IACA,cAAa;AAAA,IACb,SAAQ;AAAA,IACR,YAAW;AAAA,OACP;AAAA,KAEH,SACD,mDAAC,MAAD;AAAA,IAAM;AAAA,IAAY;AAAA,IAAkB;AAAA,IAA0B;AAAA;AAAA;AAIpE,MAAM,UAAU;AAChB,MAAM,oBAAoB;AAC1B,MAAM,eAAe;AAErB,MAAM,YAAY,uBAAK;AACvB,UAAU,UAAU;AACpB,UAAU,eAAe;AACzB,UAAU,oBAAoB;AAE9B,IAAO,gBAAQ;",
-  "names": []
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAqC;AACrC,+BAAmB;AACnB,2BAAiE;AACjE,kBAAyC;AACzC,kBAAiB;AACjB,cAAyB;AAOzB,MAAM,gBAAY,yBAAAA,SAAO,YAAAC,OAAI;AAAA,IACzB;AAAA;AAGG,MAAM,oBAAoB,yBAAAD,QAAO,IAAI,MAAM,EAAE,YAAY,SAAS,CAAC;AAAA,IACtE;AAAA;AAIG,MAAM,mBAAe,yBAAAA,SAAO,YAAAE,OAAI;AAAA;AAAA;AAoCvC,SAAS,cAAiB;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA6B;AAC3B,SACE,6BAAAC,QAAA,cAAC,aAAAA,QAAM,UAAN,EAAe,KAAI,mBACjB,KAAK,IAAI,CAAC,KAAK,aAAa;AAC3B,UAAM,MACJ,6BAAAA,QAAA,2BAAAA,QAAA,gBACG,QAAQ,IAAI,CAAC,QAAQ,gBACpB,6BAAAA,QAAA,cAAC,aAAAA,QAAM,UAAN,EAAe,KAAK,wBAAwB,WAAW,iBACrD,SACG,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU,OAAO,OAAO,EAAE,KAAK,UAAU,YAAY,CAAC;AAAA,IACxD,CAAC,IACD,OAAO,OAAO,EAAE,KAAK,UAAU,YAAY,CAAC,CAClD,CACD,GACC,eAAe,YAAY,KAAK,QAAQ,KAAM,IAClD;AAGF,QAAI,WAAW;AACb,aAAO,UAAU,UAAU,GAAG;AAAA,IAChC,OAAO;AACL,aAAO,6BAAAA,QAAA,cAAC,aAAAA,QAAM,UAAN,EAAe,KAAK,qBAAqB,cAAa,GAAI;AAAA,IACpE;AAAA,EACF,CAAC,CACH;AAEJ;AACO,MAAM,WAAO,mBAAK,aAAa;AAE/B,SAAS,MAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA0B;AACxB,QAAM,0BAAsB;AAAA,IAC1B,MAAM,QAAQ,OAAe,CAAC,KAAK,QAAQ,GAAG,OAAO,IAAI,UAAU,UAAU,EAAE;AAAA,IAC/E,CAAC,OAAO;AAAA,EACV;AAEA,QAAM,cAAU;AAAA,IACd,MACE,cACI,QAAQ;AAAA,MACN,CAAC,KAAK,KAAK,UAAU;AAAA,QACnB,GAAG;AAAA,QACH,6BAAAA,QAAA,cAAC,aAAAA,QAAM,UAAN,EAAe,KAAK,cAAc,WAChC,IAAI,SAAS,IAAI,OAAO,IAAI,6BAAAA,QAAA,cAAC,WAAI,CACpC;AAAA,MACF;AAAA,MACA,CAAC;AAAA,IACH,IACA;AAAA,IACN,CAAC,aAAa,OAAO;AAAA,EACvB;AAEA,SACE,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,cAAa;AAAA,MACb,SAAQ;AAAA,MACR,YAAW;AAAA,MACV,GAAG;AAAA;AAAA,IAEH;AAAA,IACD,6BAAAA,QAAA,cAAC,QAAK,MAAY,SAAkB,aAA0B,WAAsB;AAAA,EACtF;AAEJ;AACA,MAAM,UAAU;AAChB,MAAM,oBAAoB;AAC1B,MAAM,eAAe;AAErB,MAAM,gBAAY,mBAAK,KAAK;AAC5B,UAAU,UAAU;AACpB,UAAU,eAAe;AACzB,UAAU,oBAAoB;AAE9B,IAAO,gBAAQ;",
+  "names": ["styled", "Grid", "Flex", "React"]
 }