@webiny/admin-ui 0.0.0-unstable.2aaa1916d9

package/DataTable/DataTable.stories.d.ts

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import type { DataTableDefaultData } from "./DataTable";
+import { DataTable } from "./DataTable";
+declare const meta: Meta<typeof DataTable>;
+export default meta;
+type Story<T extends Record<string, any> & DataTableDefaultData> = StoryObj<typeof DataTable<T>>;
+interface Entry {
+    id: string;
+    name: string;
+    createdBy: string;
+    lastModified: string;
+    status: string;
+}
+export declare const Default: Story<Entry>;
+export declare const Bordered: Story<Entry>;
+export declare const WithStickyHeader: Story<Entry>;
+export declare const WithSelectableRows: Story<Entry>;
+export declare const WithLoading: Story<Entry>;
+export declare const WithLongColumnContent: Story<Entry>;
+export declare const WithCustomCellRenderer: Story<Entry>;
+export declare const WithCustomColumnSize: Story<Entry>;
+export declare const WithCustomColumnClassName: Story<Entry>;
+export declare const WithSorting: Story<Entry>;
+export declare const Documentation: Story<Entry>;

package/DataTable/DataTable.stories.js

@@ -0,0 +1,288 @@
+import React, { useState, useEffect } from "react";
+import { DataTable } from "./DataTable";
+import { Avatar } from "../Avatar";
+import { Text } from "../Text";
+const meta = {
+  title: "Components/DataTable",
+  component: DataTable,
+  parameters: {
+    layout: "padded"
+  }
+};
+export default meta;
+
+// Declare the data structure.
+
+// Define the columns structure for the table.
+const columns = {
+  name: {
+    header: "Title"
+  },
+  createdBy: {
+    header: "Author"
+  },
+  lastModified: {
+    header: "Last Modified"
+  },
+  status: {
+    header: "Status"
+  }
+};
+
+// Define the data to display.
+const data = [{
+  id: "entry-1",
+  name: "Getting Started Guide",
+  createdBy: "John Doe",
+  lastModified: "1 hour ago",
+  status: "Published"
+}, {
+  id: "entry-2",
+  name: "User Documentation",
+  createdBy: "Jane Smith",
+  lastModified: "3 days ago",
+  status: "Draft"
+}, {
+  id: "entry-3",
+  name: "API Reference",
+  createdBy: "John Doe",
+  lastModified: "1 week ago",
+  status: "Published"
+}];
+export const Default = {
+  args: {
+    data,
+    columns
+  }
+};
+export const Bordered = {
+  args: {
+    ...Default.args,
+    bordered: true
+  }
+};
+export const WithStickyHeader = {
+  args: {
+    ...Default.args,
+    stickyHeader: true
+  }
+};
+export const WithSelectableRows = {
+  args: Default.args,
+  render: args => {
+    const [selectedRows, setSelectedRows] = useState([]);
+    return /*#__PURE__*/React.createElement(DataTable, Object.assign({}, args, {
+      selectedRows: selectedRows,
+      onSelectRow: rows => setSelectedRows(rows)
+    }));
+  }
+};
+export const WithLoading = {
+  args: {
+    columns
+  },
+  render: ({
+    columns
+  }) => {
+    const [loading, setLoading] = useState(true);
+    const [tableData, setTableData] = useState([]);
+    useEffect(() => {
+      const timer = setTimeout(() => {
+        setTableData(data); // your predefined data
+        setLoading(false);
+      }, 5000);
+      return () => clearTimeout(timer);
+    }, []);
+    return /*#__PURE__*/React.createElement(DataTable, {
+      columns: columns,
+      data: tableData,
+      loading: loading
+    });
+  }
+};
+export const WithLongColumnContent = {
+  args: {
+    ...Default.args,
+    columns: {
+      ...columns,
+      name: {
+        ...columns.name,
+        header: "Name - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+      }
+    },
+    data: data.map(entry => ({
+      ...entry,
+      name: `${entry.name} - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.`
+    }))
+  }
+};
+export const WithCustomCellRenderer = {
+  args: {
+    ...Default.args,
+    columns: {
+      ...columns,
+      name: {
+        ...columns.name,
+        cell: entry => {
+          return /*#__PURE__*/React.createElement("div", {
+            className: "wby-flex wby-items-center wby-gap-sm-extra"
+          }, /*#__PURE__*/React.createElement(Avatar, {
+            image: /*#__PURE__*/React.createElement(Avatar.Image, {
+              src: "https://github.com/webiny-bot.png",
+              alt: "@webiny"
+            }),
+            fallback: /*#__PURE__*/React.createElement(Avatar.Fallback, null, entry.name.charAt(0)),
+            size: "xl"
+          }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
+            className: "wby-text-neutral-primary wby-font-semibold",
+            as: "div"
+          }, entry.name), /*#__PURE__*/React.createElement(Text, {
+            size: "sm",
+            className: "wby-text-neutral-strong",
+            as: "div"
+          }, `Last updated: ${entry.lastModified}`)));
+        }
+      }
+    }
+  }
+};
+export const WithCustomColumnSize = {
+  args: {
+    ...Default.args,
+    columns: {
+      ...columns,
+      name: {
+        ...columns.name,
+        size: 200
+      }
+    }
+  }
+};
+export const WithCustomColumnClassName = {
+  args: {
+    ...Default.args,
+    columns: {
+      ...columns,
+      lastModified: {
+        ...columns.lastModified,
+        className: "wby-bg-primary-subtle"
+      },
+      status: {
+        ...columns.status,
+        className: "wby-text-right"
+      }
+    }
+  }
+};
+export const WithSorting = {
+  args: {
+    ...Default.args,
+    columns: {
+      ...columns,
+      name: {
+        ...columns.name,
+        enableSorting: true
+      },
+      lastModified: {
+        ...columns.lastModified,
+        enableSorting: true
+      }
+    },
+    sorting: [{
+      id: "lastModified",
+      desc: true
+    }]
+  },
+  render: ({
+    sorting: argsSorting = [],
+    ...args
+  }) => {
+    const [sorting, setSorting] = useState(argsSorting);
+    return /*#__PURE__*/React.createElement(DataTable, Object.assign({}, args, {
+      sorting: sorting,
+      onSortingChange: setSorting
+    }));
+  }
+};
+
+// Add a Documentation story
+export const Documentation = {
+  args: {
+    bordered: true,
+    stickyHeader: true,
+    columns: {
+      name: {
+        header: "Title",
+        enableSorting: true
+      },
+      createdBy: {
+        header: "Author"
+      },
+      lastModified: {
+        header: "Last Modified",
+        enableSorting: true
+      },
+      status: {
+        header: "Status"
+      }
+    },
+    data: [{
+      id: "entry-1",
+      name: "Getting Started Guide",
+      createdBy: "John Doe",
+      lastModified: "1 hour ago",
+      status: "Published"
+    }, {
+      id: "entry-2",
+      name: "User Documentation",
+      createdBy: "Jane Smith",
+      lastModified: "3 days ago",
+      status: "Draft"
+    }, {
+      id: "entry-3",
+      name: "API Reference",
+      createdBy: "John Doe",
+      lastModified: "1 week ago",
+      status: "Published"
+    }]
+  },
+  render: args => {
+    const [selectedRows, setSelectedRows] = useState([]);
+    const [sorting, setSorting] = useState([]);
+    return /*#__PURE__*/React.createElement(DataTable, Object.assign({}, args, {
+      selectedRows: selectedRows,
+      onSelectRow: rows => setSelectedRows(rows),
+      sorting: sorting,
+      onSortingChange: setSorting
+    }));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "This example shows a DataTable with selectable rows, sorting, and a sticky header."
+      }
+    }
+  },
+  argTypes: {
+    bordered: {
+      description: "Show or hide borders.",
+      control: "boolean",
+      defaultValue: true
+    },
+    stickyHeader: {
+      description: "Enable sticky header.",
+      control: "boolean",
+      defaultValue: true
+    },
+    columns: {
+      description: "Columns definition. Please refer to the code example for details.",
+      control: false
+    },
+    data: {
+      description: "Data to display into DataTable body. Please refer to the code example for details.",
+      control: false
+    }
+  }
+};
+
+//# sourceMappingURL=DataTable.stories.js.map

package/DataTable/DataTable.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","useEffect","DataTable","Avatar","Text","meta","title","component","parameters","layout","columns","name","header","createdBy","lastModified","status","data","id","Default","args","Bordered","bordered","WithStickyHeader","stickyHeader","WithSelectableRows","render","selectedRows","setSelectedRows","createElement","Object","assign","onSelectRow","rows","WithLoading","loading","setLoading","tableData","setTableData","timer","setTimeout","clearTimeout","WithLongColumnContent","map","entry","WithCustomCellRenderer","cell","className","image","Image","src","alt","fallback","Fallback","charAt","size","as","WithCustomColumnSize","WithCustomColumnClassName","WithSorting","enableSorting","sorting","desc","argsSorting","setSorting","onSortingChange","Documentation","docs","description","story","argTypes","control","defaultValue"],"sources":["DataTable.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport type { DataTableColumns, DataTableDefaultData, DataTableSorting } from \"./DataTable\";\nimport { DataTable } from \"./DataTable\";\nimport { Avatar } from \"~/Avatar\";\nimport { Text } from \"~/Text\";\n\nconst meta: Meta<typeof DataTable> = {\n    title: \"Components/DataTable\",\n    component: DataTable,\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story<T extends Record<string, any> & DataTableDefaultData> = StoryObj<typeof DataTable<T>>;\n\n// Declare the data structure.\ninterface Entry {\n    id: string;\n    name: string;\n    createdBy: string;\n    lastModified: string;\n    status: string;\n}\n\n// Define the columns structure for the table.\nconst columns: DataTableColumns<Entry> = {\n    name: {\n        header: \"Title\"\n    },\n    createdBy: {\n        header: \"Author\"\n    },\n    lastModified: {\n        header: \"Last Modified\"\n    },\n    status: {\n        header: \"Status\"\n    }\n};\n\n// Define the data to display.\nconst data = [\n    {\n        id: \"entry-1\",\n        name: \"Getting Started Guide\",\n        createdBy: \"John Doe\",\n        lastModified: \"1 hour ago\",\n        status: \"Published\"\n    },\n    {\n        id: \"entry-2\",\n        name: \"User Documentation\",\n        createdBy: \"Jane Smith\",\n        lastModified: \"3 days ago\",\n        status: \"Draft\"\n    },\n    {\n        id: \"entry-3\",\n        name: \"API Reference\",\n        createdBy: \"John Doe\",\n        lastModified: \"1 week ago\",\n        status: \"Published\"\n    }\n];\n\nexport const Default: Story<Entry> = {\n    args: {\n        data,\n        columns\n    }\n};\n\nexport const Bordered: Story<Entry> = {\n    args: {\n        ...Default.args,\n        bordered: true\n    }\n};\n\nexport const WithStickyHeader: Story<Entry> = {\n    args: {\n        ...Default.args,\n        stickyHeader: true\n    }\n};\n\nexport const WithSelectableRows: Story<Entry> = {\n    args: Default.args,\n    render: args => {\n        const [selectedRows, setSelectedRows] = useState<Entry[]>([]);\n\n        return (\n            <DataTable\n                {...args}\n                selectedRows={selectedRows}\n                onSelectRow={rows => setSelectedRows(rows)}\n            />\n        );\n    }\n};\n\nexport const WithLoading: Story<Entry> = {\n    args: {\n        columns\n    },\n    render: ({ columns }) => {\n        const [loading, setLoading] = useState(true);\n        const [tableData, setTableData] = useState<Entry[]>([]);\n\n        useEffect(() => {\n            const timer = setTimeout(() => {\n                setTableData(data); // your predefined data\n                setLoading(false);\n            }, 5000);\n\n            return () => clearTimeout(timer);\n        }, []);\n\n        return <DataTable columns={columns} data={tableData} loading={loading} />;\n    }\n};\n\nexport const WithLongColumnContent: Story<Entry> = {\n    args: {\n        ...Default.args,\n        columns: {\n            ...columns,\n            name: {\n                ...columns.name,\n                header: \"Name - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\"\n            }\n        },\n        data: data.map(entry => ({\n            ...entry,\n            name: `${entry.name} - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.`\n        }))\n    }\n};\n\nexport const WithCustomCellRenderer: Story<Entry> = {\n    args: {\n        ...Default.args,\n        columns: {\n            ...columns,\n            name: {\n                ...columns.name,\n                cell: (entry: Entry) => {\n                    return (\n                        <div className={\"wby-flex wby-items-center wby-gap-sm-extra\"}>\n                            <Avatar\n                                image={\n                                    <Avatar.Image\n                                        src=\"https://github.com/webiny-bot.png\"\n                                        alt=\"@webiny\"\n                                    />\n                                }\n                                fallback={<Avatar.Fallback>{entry.name.charAt(0)}</Avatar.Fallback>}\n                                size={\"xl\"}\n                            />\n                            <div>\n                                <Text\n                                    className={\"wby-text-neutral-primary wby-font-semibold\"}\n                                    as={\"div\"}\n                                >\n                                    {entry.name}\n                                </Text>\n                                <Text\n                                    size={\"sm\"}\n                                    className={\"wby-text-neutral-strong\"}\n                                    as={\"div\"}\n                                >{`Last updated: ${entry.lastModified}`}</Text>\n                            </div>\n                        </div>\n                    );\n                }\n            }\n        }\n    }\n};\n\nexport const WithCustomColumnSize: Story<Entry> = {\n    args: {\n        ...Default.args,\n        columns: {\n            ...columns,\n            name: {\n                ...columns.name,\n                size: 200\n            }\n        }\n    }\n};\n\nexport const WithCustomColumnClassName: Story<Entry> = {\n    args: {\n        ...Default.args,\n        columns: {\n            ...columns,\n            lastModified: {\n                ...columns.lastModified,\n                className: \"wby-bg-primary-subtle\"\n            },\n            status: {\n                ...columns.status,\n                className: \"wby-text-right\"\n            }\n        }\n    }\n};\n\nexport const WithSorting: Story<Entry> = {\n    args: {\n        ...Default.args,\n        columns: {\n            ...columns,\n            name: {\n                ...columns.name,\n                enableSorting: true\n            },\n            lastModified: {\n                ...columns.lastModified,\n                enableSorting: true\n            }\n        },\n        sorting: [\n            {\n                id: \"lastModified\",\n                desc: true\n            }\n        ]\n    },\n    render: ({ sorting: argsSorting = [], ...args }) => {\n        const [sorting, setSorting] = useState<DataTableSorting>(argsSorting);\n        return <DataTable {...args} sorting={sorting} onSortingChange={setSorting} />;\n    }\n};\n\n// Add a Documentation story\nexport const Documentation: Story<Entry> = {\n    args: {\n        bordered: true,\n        stickyHeader: true,\n        columns: {\n            name: {\n                header: \"Title\",\n                enableSorting: true\n            },\n            createdBy: {\n                header: \"Author\"\n            },\n            lastModified: {\n                header: \"Last Modified\",\n                enableSorting: true\n            },\n            status: {\n                header: \"Status\"\n            }\n        },\n        data: [\n            {\n                id: \"entry-1\",\n                name: \"Getting Started Guide\",\n                createdBy: \"John Doe\",\n                lastModified: \"1 hour ago\",\n                status: \"Published\"\n            },\n            {\n                id: \"entry-2\",\n                name: \"User Documentation\",\n                createdBy: \"Jane Smith\",\n                lastModified: \"3 days ago\",\n                status: \"Draft\"\n            },\n            {\n                id: \"entry-3\",\n                name: \"API Reference\",\n                createdBy: \"John Doe\",\n                lastModified: \"1 week ago\",\n                status: \"Published\"\n            }\n        ]\n    },\n    render: args => {\n        const [selectedRows, setSelectedRows] = useState<Entry[]>([]);\n        const [sorting, setSorting] = useState<DataTableSorting>([]);\n\n        return (\n            <DataTable\n                {...args}\n                selectedRows={selectedRows}\n                onSelectRow={rows => setSelectedRows(rows)}\n                sorting={sorting}\n                onSortingChange={setSorting}\n            />\n        );\n    },\n    parameters: {\n        docs: {\n            description: {\n                story: \"This example shows a DataTable with selectable rows, sorting, and a sticky header.\"\n            }\n        }\n    },\n    argTypes: {\n        bordered: {\n            description: \"Show or hide borders.\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        stickyHeader: {\n            description: \"Enable sticky header.\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        columns: {\n            description: \"Columns definition. Please refer to the code example for details.\",\n            control: false\n        },\n        data: {\n            description:\n                \"Data to display into DataTable body. Please refer to the code example for details.\",\n            control: false\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}

package/DataTable/components/ColumnSorter.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { type VariantProps } from "../../utils";
+declare const columnSorterVariants: (props?: ({
+    sortable?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+interface ColumnSorterProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof columnSorterVariants> {
+}
+declare const ColumnSorter: ({ className, children, sortable, ...props }: ColumnSorterProps) => React.JSX.Element;
+export { ColumnSorter };

package/DataTable/components/ColumnSorter.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { cn, cva } from "../../utils";
+const columnSorterVariants = cva("wby-flex wby-items-center wby-gap-xxs wby-cursor-auto", {
+  variants: {
+    sortable: {
+      true: "wby-cursor-pointer"
+    }
+  }
+});
+const ColumnSorter = ({
+  className,
+  children,
+  sortable,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
+    className: cn(columnSorterVariants({
+      sortable
+    }), className)
+  }), children);
+};
+export { ColumnSorter };
+
+//# sourceMappingURL=ColumnSorter.js.map

package/DataTable/components/ColumnSorter.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","cn","cva","columnSorterVariants","variants","sortable","true","ColumnSorter","className","children","props","createElement","Object","assign"],"sources":["ColumnSorter.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, cva, type VariantProps } from \"~/utils\";\n\nconst columnSorterVariants = cva(\"wby-flex wby-items-center wby-gap-xxs wby-cursor-auto\", {\n    variants: {\n        sortable: {\n            true: \"wby-cursor-pointer\"\n        }\n    }\n});\n\ninterface ColumnSorterProps\n    extends React.HTMLAttributes<HTMLDivElement>,\n        VariantProps<typeof columnSorterVariants> {}\n\nconst ColumnSorter = ({ className, children, sortable, ...props }: ColumnSorterProps) => {\n    return (\n        <div {...props} className={cn(columnSorterVariants({ sortable }), className)}>\n            {children}\n        </div>\n    );\n};\n\nexport { ColumnSorter };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE,EAAEC,GAAG;AAEhB,MAAMC,oBAAoB,GAAGD,GAAG,CAAC,uDAAuD,EAAE;EACtFE,QAAQ,EAAE;IACNC,QAAQ,EAAE;MACNC,IAAI,EAAE;IACV;EACJ;AACJ,CAAC,CAAC;AAMF,MAAMC,YAAY,GAAGA,CAAC;EAAEC,SAAS;EAAEC,QAAQ;EAAEJ,QAAQ;EAAE,GAAGK;AAAyB,CAAC,KAAK;EACrF,oBACIV,KAAA,CAAAW,aAAA,QAAAC,MAAA,CAAAC,MAAA,KAASH,KAAK;IAAEF,SAAS,EAAEP,EAAE,CAACE,oBAAoB,CAAC;MAAEE;IAAS,CAAC,CAAC,EAAEG,SAAS;EAAE,IACxEC,QACA,CAAC;AAEd,CAAC;AAED,SAASF,YAAY","ignoreList":[]}

package/DataTable/components/ColumnsVisibility.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { Column } from "@tanstack/react-table";
+interface ColumnsVisibilityProps<T> {
+    columns: Column<T>[];
+}
+export declare const ColumnsVisibility: <T>(props: ColumnsVisibilityProps<T>) => React.JSX.Element | null;
+export {};

package/DataTable/components/ColumnsVisibility.js

@@ -0,0 +1,58 @@
+import React, { useCallback, useMemo } from "react";
+import { ReactComponent as SettingsIcon } from "@webiny/icons/settings.svg";
+import { IconButton } from "../../Button";
+import { Checkbox } from "../../Checkbox";
+import { DropdownMenu } from "../../DropdownMenu";
+export const ColumnsVisibility = props => {
+  /**
+   * `@tanstack/react-table` does not have a simple method to return the header component.
+   * The only possible way is to use `flexRenderer`, but this is not working with the current implementation
+   * since we don't have access to the header context.
+   */
+  const getHeaderName = useCallback(column => {
+    const {
+      header
+    } = column.columnDef;
+    if (typeof header === "string") {
+      return header;
+    }
+    if (typeof header === "function") {
+      // @ts-expect-error
+      return header();
+    }
+    return column.id;
+  }, []);
+  const options = useMemo(() => {
+    return props.columns.filter(column => column.getCanHide()).map(column => {
+      return {
+        id: column.id,
+        header: getHeaderName(column),
+        onChange: column.toggleVisibility,
+        getValue: column.getIsVisible
+      };
+    });
+  }, [props.columns]);
+  if (options.length === 0) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(DropdownMenu, {
+    trigger: /*#__PURE__*/React.createElement(IconButton, {
+      icon: /*#__PURE__*/React.createElement(SettingsIcon, null),
+      variant: "ghost",
+      size: "xs"
+    })
+  }, /*#__PURE__*/React.createElement(DropdownMenu.Label, {
+    text: "Display columns"
+  }), options.map(option => {
+    return /*#__PURE__*/React.createElement(DropdownMenu.Item, {
+      key: option.id,
+      text: /*#__PURE__*/React.createElement(Checkbox, {
+        label: option.header,
+        onChange: option.onChange,
+        checked: option.getValue()
+      })
+    });
+  }));
+};
+
+//# sourceMappingURL=ColumnsVisibility.js.map

package/DataTable/components/ColumnsVisibility.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useMemo","ReactComponent","SettingsIcon","IconButton","Checkbox","DropdownMenu","ColumnsVisibility","props","getHeaderName","column","header","columnDef","id","options","columns","filter","getCanHide","map","onChange","toggleVisibility","getValue","getIsVisible","length","createElement","trigger","icon","variant","size","Label","text","option","Item","key","label","checked"],"sources":["ColumnsVisibility.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { ReactComponent as SettingsIcon } from \"@webiny/icons/settings.svg\";\nimport type { Column } from \"@tanstack/react-table\";\nimport { IconButton } from \"~/Button\";\nimport { Checkbox } from \"~/Checkbox\";\nimport { DropdownMenu } from \"~/DropdownMenu\";\n\ninterface ColumnsVisibilityProps<T> {\n    columns: Column<T>[];\n}\n\ninterface Option {\n    id: string;\n    header: string;\n    onChange: (value?: boolean | undefined) => void;\n    getValue: () => boolean;\n}\n\nexport const ColumnsVisibility = <T,>(props: ColumnsVisibilityProps<T>) => {\n    /**\n     * `@tanstack/react-table` does not have a simple method to return the header component.\n     * The only possible way is to use `flexRenderer`, but this is not working with the current implementation\n     * since we don't have access to the header context.\n     */\n    const getHeaderName = useCallback((column: Column<T>) => {\n        const { header } = column.columnDef;\n\n        if (typeof header === \"string\") {\n            return header;\n        }\n\n        if (typeof header === \"function\") {\n            // @ts-expect-error\n            return header();\n        }\n\n        return column.id;\n    }, []);\n\n    const options: Option[] = useMemo(() => {\n        return props.columns\n            .filter(column => column.getCanHide())\n            .map(column => {\n                return {\n                    id: column.id,\n                    header: getHeaderName(column),\n                    onChange: column.toggleVisibility,\n                    getValue: column.getIsVisible\n                };\n            });\n    }, [props.columns]);\n\n    if (options.length === 0) {\n        return null;\n    }\n\n    return (\n        <DropdownMenu\n            trigger={<IconButton icon={<SettingsIcon />} variant={\"ghost\"} size={\"xs\"} />}\n        >\n            <DropdownMenu.Label text={\"Display columns\"} />\n            {options.map(option => {\n                return (\n                    <DropdownMenu.Item\n                        key={option.id}\n                        text={\n                            <Checkbox\n                                label={option.header}\n                                onChange={option.onChange}\n                                checked={option.getValue()}\n                            />\n                        }\n                    />\n                );\n            })}\n        </DropdownMenu>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AACnD,SAASC,cAAc,IAAIC,YAAY,QAAQ,4BAA4B;AAE3E,SAASC,UAAU;AACnB,SAASC,QAAQ;AACjB,SAASC,YAAY;AAarB,OAAO,MAAMC,iBAAiB,GAAQC,KAAgC,IAAK;EACvE;AACJ;AACA;AACA;AACA;EACI,MAAMC,aAAa,GAAGT,WAAW,CAAEU,MAAiB,IAAK;IACrD,MAAM;MAAEC;IAAO,CAAC,GAAGD,MAAM,CAACE,SAAS;IAEnC,IAAI,OAAOD,MAAM,KAAK,QAAQ,EAAE;MAC5B,OAAOA,MAAM;IACjB;IAEA,IAAI,OAAOA,MAAM,KAAK,UAAU,EAAE;MAC9B;MACA,OAAOA,MAAM,CAAC,CAAC;IACnB;IAEA,OAAOD,MAAM,CAACG,EAAE;EACpB,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,OAAiB,GAAGb,OAAO,CAAC,MAAM;IACpC,OAAOO,KAAK,CAACO,OAAO,CACfC,MAAM,CAACN,MAAM,IAAIA,MAAM,CAACO,UAAU,CAAC,CAAC,CAAC,CACrCC,GAAG,CAACR,MAAM,IAAI;MACX,OAAO;QACHG,EAAE,EAAEH,MAAM,CAACG,EAAE;QACbF,MAAM,EAAEF,aAAa,CAACC,MAAM,CAAC;QAC7BS,QAAQ,EAAET,MAAM,CAACU,gBAAgB;QACjCC,QAAQ,EAAEX,MAAM,CAACY;MACrB,CAAC;IACL,CAAC,CAAC;EACV,CAAC,EAAE,CAACd,KAAK,CAACO,OAAO,CAAC,CAAC;EAEnB,IAAID,OAAO,CAACS,MAAM,KAAK,CAAC,EAAE;IACtB,OAAO,IAAI;EACf;EAEA,oBACIxB,KAAA,CAAAyB,aAAA,CAAClB,YAAY;IACTmB,OAAO,eAAE1B,KAAA,CAAAyB,aAAA,CAACpB,UAAU;MAACsB,IAAI,eAAE3B,KAAA,CAAAyB,aAAA,CAACrB,YAAY,MAAE,CAAE;MAACwB,OAAO,EAAE,OAAQ;MAACC,IAAI,EAAE;IAAK,CAAE;EAAE,gBAE9E7B,KAAA,CAAAyB,aAAA,CAAClB,YAAY,CAACuB,KAAK;IAACC,IAAI,EAAE;EAAkB,CAAE,CAAC,EAC9ChB,OAAO,CAACI,GAAG,CAACa,MAAM,IAAI;IACnB,oBACIhC,KAAA,CAAAyB,aAAA,CAAClB,YAAY,CAAC0B,IAAI;MACdC,GAAG,EAAEF,MAAM,CAAClB,EAAG;MACfiB,IAAI,eACA/B,KAAA,CAAAyB,aAAA,CAACnB,QAAQ;QACL6B,KAAK,EAAEH,MAAM,CAACpB,MAAO;QACrBQ,QAAQ,EAAEY,MAAM,CAACZ,QAAS;QAC1BgB,OAAO,EAAEJ,MAAM,CAACV,QAAQ,CAAC;MAAE,CAC9B;IACJ,CACJ,CAAC;EAEV,CAAC,CACS,CAAC;AAEvB,CAAC","ignoreList":[]}

package/DataTable/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./ColumnSorter";
+export * from "./ColumnsVisibility";

package/DataTable/components/index.js

@@ -0,0 +1,4 @@
+export * from "./ColumnSorter";
+export * from "./ColumnsVisibility";
+
+//# sourceMappingURL=index.js.map

package/DataTable/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./ColumnSorter\";\nexport * from \"./ColumnsVisibility\";\n"],"mappings":"AAAA;AACA","ignoreList":[]}

package/DataTable/index.d.ts

@@ -0,0 +1 @@
+export * from "./DataTable";

package/DataTable/index.js

@@ -0,0 +1,3 @@
+export * from "./DataTable";
+
+//# sourceMappingURL=index.js.map

package/DataTable/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./DataTable\";\n"],"mappings":"AAAA","ignoreList":[]}

package/DelayedOnChange/DelayedOnChange.d.ts

@@ -0,0 +1,39 @@
+import React from "react";
+export interface ApplyValueCb<TValue> {
+    (value: TValue): void;
+}
+/**
+ * This component is used to wrap Input and Textarea components to optimize form re-render.
+ * These 2 are the only components that trigger form model change on each character input.
+ * This means, whenever you type a letter an entire form re-renders.
+ * On complex forms you will feel and see a significant delay if this component is not used.
+ *
+ * The logic behind this component is to serve as a middleware between Form and Input/Textarea, and only notify form of a change when
+ * a user stops typing for given period of time (400ms by default).
+ */
+export interface OnChangeCallable<TValue = any> {
+    (value: TValue, cb?: ApplyValueCb<TValue>): void;
+}
+interface OnBlurCallable {
+    (ev: React.SyntheticEvent): void;
+}
+interface OnKeyDownCallable {
+    (ev: React.KeyboardEvent<HTMLInputElement>): void;
+}
+interface ChildrenCallableParams<TValue> {
+    value: TValue;
+    onChange: OnChangeCallable<TValue>;
+}
+interface ChildrenCallable<TValue> {
+    (params: ChildrenCallableParams<TValue>): React.ReactElement;
+}
+export interface DelayedOnChangeProps<TValue> {
+    value?: TValue;
+    delay?: number;
+    onChange?: OnChangeCallable<TValue>;
+    onBlur?: OnBlurCallable;
+    onKeyDown?: OnKeyDownCallable;
+    children: React.ReactNode | ChildrenCallable<TValue | undefined>;
+}
+export declare const DelayedOnChange: <TValue = any>({ children, ...other }: DelayedOnChangeProps<TValue>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export {};

package/DelayedOnChange/DelayedOnChange.js

@@ -0,0 +1,121 @@
+import React, { useEffect, useRef, useState } from "react";
+import isEqual from "lodash/isEqual";
+const emptyFunction = () => {
+  return undefined;
+};
+
+/**
+ * This component is used to wrap Input and Textarea components to optimize form re-render.
+ * These 2 are the only components that trigger form model change on each character input.
+ * This means, whenever you type a letter an entire form re-renders.
+ * On complex forms you will feel and see a significant delay if this component is not used.
+ *
+ * The logic behind this component is to serve as a middleware between Form and Input/Textarea, and only notify form of a change when
+ * a user stops typing for given period of time (400ms by default).
+ */
+
+export const DelayedOnChange = ({
+  children,
+  ...other
+}) => {
+  const firstMount = useRef(true);
+  const {
+    onChange,
+    delay = 400,
+    value: initialValue
+  } = other;
+  const [value, setValue] = useState(initialValue);
+  // Sync state and props
+  useEffect(() => {
+    // Do not update local state, if the incoming value is the same as the local state.
+    // This is primarily an optimization for non-scalar values (objects).
+    if (isEqual(initialValue, value)) {
+      return;
+    }
+    setValue(initialValue);
+  }, [initialValue]);
+  const localTimeout = React.useRef(null);
+  const applyValue = value => {
+    localTimeout.current && clearTimeout(localTimeout.current);
+    localTimeout.current = null;
+    if (!onChange) {
+      return;
+    }
+    onChange(value);
+  };
+  const onChangeLocal = React.useCallback(value => {
+    setValue(value);
+  }, []);
+
+  // this is fired upon change value state
+  const onValueStateChanged = nextValue => {
+    // We don't want to execute callbacks, if the value hasn't changed.
+    if (isEqual(nextValue, initialValue)) {
+      return;
+    }
+    localTimeout.current && clearTimeout(localTimeout.current);
+    localTimeout.current = null;
+    localTimeout.current = setTimeout(() => applyValue(nextValue), delay);
+  };
+
+  // need to clear the timeout when unmounting the component
+  useEffect(() => {
+    return () => {
+      if (!localTimeout.current) {
+        return;
+      }
+      clearTimeout(localTimeout.current);
+      localTimeout.current = null;
+    };
+  }, []);
+  useEffect(() => {
+    if (firstMount.current) {
+      firstMount.current = false;
+      return;
+    }
+    onValueStateChanged(value);
+  }, [value]);
+  const newProps = {
+    ...other,
+    value: value,
+    onChange: onChangeLocal
+  };
+  const renderProp = typeof children === "function" ? children : null;
+  const child = renderProp ? renderProp(newProps) : /*#__PURE__*/React.cloneElement(children, newProps);
+  const props = {
+    ...child.props
+  };
+  const realOnKeyDown = props.onKeyDown || emptyFunction;
+  const realOnBlur = props.onBlur || emptyFunction;
+
+  // Need to apply value if input lost focus
+  const onBlur = ev => {
+    if (!ev["persist"]) {
+      return;
+    }
+    ev.persist();
+    applyValue(ev.target.value);
+    realOnBlur(ev);
+  };
+
+  // Need to listen for TAB key to apply new value immediately, without delay. Otherwise validation will be triggered with old value.
+  const onKeyDown = ev => {
+    ev.persist();
+    if (ev.key === "Tab") {
+      applyValue(ev.target.value);
+      realOnKeyDown(ev);
+    } else if (ev.key === "Enter") {
+      applyValue(ev.target.value);
+      realOnKeyDown(ev);
+    } else {
+      realOnKeyDown(ev);
+    }
+  };
+  return /*#__PURE__*/React.cloneElement(child, {
+    ...props,
+    onBlur,
+    onKeyDown
+  });
+};
+
+//# sourceMappingURL=DelayedOnChange.js.map