@arbor-education/design-system.components 0.15.0 → 0.16.1

package/dist/components/table/pagination/PaginationPanel.stories.js

@@ -0,0 +1,272 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Controls, Heading as DocHeading, Markdown, Primary as DocPrimary, Stories, Subtitle, Title, } from '@storybook/addon-docs/blocks';
+import { fn } from 'storybook/test';
+import { PaginationPanel } from './PaginationPanel';
+// ---------------------------------------------------------------------------
+// Docs page content
+// ---------------------------------------------------------------------------
+const DESCRIPTION_INTRO = [
+    '`PaginationPanel` is the pre-composed footer slot for the Arbor data table.',
+    'It renders a three-part `<nav>`: a **row count** (how many rows are visible),',
+    '**page controls** (first / prev / page-number input / next / last), and a **page-size selector** dropdown.',
+    '',
+    'Every part is opt-in — only pass the props for the sections you need.',
+    'Pass the entire `<PaginationPanel />` element as the `footerContent` prop of `<Table />`.',
+].join('\n');
+const USAGE_GUIDANCE = [
+    '### When to use',
+    '',
+    '- As the `footerContent` of a `<Table />` to give it standard pagination controls',
+    '- When you need a page-size selector alongside page navigation in a single composable component',
+    '- When implementing server-side pagination (pass `totalPages` + `onPageChange` + `onPageSizeChange`)',
+    '',
+    '---',
+    '',
+    '### When NOT to use',
+    '',
+    '| Situation | Alternative |',
+    '|---|---|',
+    '| You only need page navigation | Use `PaginationControls` directly |',
+    '| You only need a page-size selector | Use `PageSizeSelector` directly |',
+    '| The table has no pagination | Omit `footerContent` entirely |',
+    '',
+    '---',
+    '',
+    '### Sub-component summary',
+    '',
+    '| Sub-component | Key props | Notes |',
+    '|---|---|---|',
+    '| `RowCountInfo` | `totalRows` | Returns `null` when used outside a `<Table />` — it reads row count from `GridApiContext` |',
+    '| `PaginationControls` | `totalPages`, `onPageChange` | Works standalone; falls back to `GridApiContext` when no props are passed |',
+    '| `PageSizeSelector` | `availableSizes`, `initialPageSize`, `onPageSizeChange` | Works standalone; falls back to `GridApiContext` when no props are passed |',
+].join('\n');
+const DEVELOPER_NOTES = [
+    '### Wiring into `<Table />`',
+    '',
+    '```tsx',
+    "import { Table, PaginationPanel } from '@arbor-education/design-system.components';",
+    '',
+    'function MyTable() {',
+    '  return (',
+    '    <Table',
+    '      rowData={rows}',
+    '      columnDefs={colDefs}',
+    '      footerContent={(',
+    '        <PaginationPanel',
+    '          availableSizes={[10, 25, 50, 100]}',
+    '          initialPageSize={25}',
+    '          onPageSizeChange={setPageSize}',
+    '        />',
+    '      )}',
+    '    />',
+    '  );',
+    '}',
+    '```',
+    '',
+    '---',
+    '',
+    '### Server-side pagination',
+    '',
+    'When your data is fetched page-by-page from an API, pass `totalPages` and `onPageChange`:',
+    '',
+    '```tsx',
+    'function ServerTable() {',
+    '  const [page, setPage] = useState(0);',
+    '  const [pageSize, setPageSize] = useState(25);',
+    '  const { data, totalPages } = useMyApiQuery({ page, pageSize });',
+    '',
+    '  return (',
+    '    <Table',
+    '      rowData={data}',
+    '      columnDefs={colDefs}',
+    '      footerContent={(',
+    '        <PaginationPanel',
+    '          totalPages={totalPages}',
+    '          onPageChange={setPage}',
+    '          availableSizes={[10, 25, 50]}',
+    '          initialPageSize={pageSize}',
+    '          onPageSizeChange={setPageSize}',
+    '        />',
+    '      )}',
+    '    />',
+    '  );',
+    '}',
+    '```',
+    '',
+    '---',
+    '',
+    '### `RowCountInfo` and `GridApiContext`',
+    '',
+    '`RowCountInfo` reads the displayed row count from `GridApiContext` — this context is provided',
+    'automatically by `<Table />`. When `PaginationPanel` is rendered outside a `<Table />`',
+    '(as in these Storybook stories), `RowCountInfo` returns `null` and the row-count text is not shown.',
+    'Pass `totalRows` to supply a value manually in server-side scenarios.',
+    '',
+    '---',
+    '',
+    '### TypeScript types',
+    '',
+    '```ts',
+    "import { PaginationPanel } from '@arbor-education/design-system.components';",
+    "import type { PaginationControlsProps, PageSizeSelectorProps, RowCountInfoProps } from '@arbor-education/design-system.components';",
+    '```',
+].join('\n');
+const RELATED_COMPONENTS = [
+    '## Related components',
+    '',
+    '[Table](?path=/docs/components-table--docs) · [TableControls](?path=/docs/components-table-tablecontrols--docs) · [Button](?path=/docs/components-button--docs)',
+].join('\n');
+const PROPS_INTRO = 'The preview below is wired to the **Controls** panel — toggle props to see the panel update in real time. Note that `RowCountInfo` (the row-count text on the left) only displays inside a `<Table />`; it returns `null` in this standalone preview.';
+// ---------------------------------------------------------------------------
+// Custom DocsPage
+// ---------------------------------------------------------------------------
+function PaginationPanelDocsPage() {
+    return (_jsxs(_Fragment, { children: [_jsx(Title, {}), _jsx(Subtitle, {}), _jsx(Markdown, { children: DESCRIPTION_INTRO }), _jsx(DocHeading, { children: "Interactive example" }), _jsx(Markdown, { children: PROPS_INTRO }), _jsx(DocPrimary, {}), _jsx(Controls, {}), _jsx(DocHeading, { children: "Usage guidance" }), _jsx(Markdown, { children: USAGE_GUIDANCE }), _jsx(DocHeading, { children: "Developer notes" }), _jsx(Markdown, { children: DEVELOPER_NOTES }), _jsx(DocHeading, { children: "Examples" }), _jsx(Stories, { title: "" }), _jsx(Markdown, { children: RELATED_COMPONENTS })] }));
+}
+// ---------------------------------------------------------------------------
+// Meta
+// ---------------------------------------------------------------------------
+const meta = {
+    title: 'Components/Table/PaginationPanel',
+    component: PaginationPanel,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+        docs: { page: PaginationPanelDocsPage },
+    },
+    argTypes: {
+        totalRows: {
+            description: 'Total number of rows in the dataset. Passed to `RowCountInfo` for the "Showing X of Y results" label. Only relevant when used outside a `<Table />` (which provides this automatically via `GridApiContext`).',
+            control: 'number',
+            table: { type: { summary: 'number' }, defaultValue: { summary: 'undefined' } },
+        },
+        totalPages: {
+            description: 'Total number of pages. Passed to `PaginationControls`. Required for server-side pagination; when omitted the control reads from `GridApiContext`.',
+            control: 'number',
+            table: { type: { summary: 'number' }, defaultValue: { summary: 'undefined' } },
+        },
+        onPageChange: {
+            description: 'Called with the zero-indexed new page number when the user navigates. Required for server-side pagination; when omitted the control drives the AG Grid API directly.',
+            control: false,
+            table: { type: { summary: '(newPage: number) => void' }, defaultValue: { summary: 'undefined' } },
+        },
+        availableSizes: {
+            description: 'Array of page sizes shown in the `PageSizeSelector` dropdown. Defaults to `[10, 20, 30, 50, 100, 200, 300, 500, 1000, "All"]`.',
+            control: false,
+            table: { type: { summary: '(number | "All")[]' }, defaultValue: { summary: 'undefined' } },
+        },
+        initialPageSize: {
+            description: 'The initially selected page size in the `PageSizeSelector`.',
+            control: 'number',
+            table: { type: { summary: 'number | "All"' }, defaultValue: { summary: 'undefined' } },
+        },
+        onPageSizeChange: {
+            description: 'Called with the newly selected page size when the user changes it. Required for server-side pagination; when omitted the control drives the AG Grid API directly.',
+            control: false,
+            table: { type: { summary: '(newPageSize: number | "All") => void' }, defaultValue: { summary: 'undefined' } },
+        },
+        className: {
+            description: 'Additional CSS class name(s) to apply to the root `<nav>` element.',
+            control: 'text',
+            table: { type: { summary: 'string' }, defaultValue: { summary: 'undefined' } },
+        },
+    },
+    args: {
+        onPageChange: fn(),
+        onPageSizeChange: fn(),
+    },
+};
+export default meta;
+// ---------------------------------------------------------------------------
+// Helper
+// ---------------------------------------------------------------------------
+const withDescription = (story, description) => ({
+    ...story,
+    parameters: {
+        ...story.parameters,
+        docs: { ...story.parameters?.docs, description: { story: description } },
+    },
+});
+// ---------------------------------------------------------------------------
+// Stories
+// ---------------------------------------------------------------------------
+export const Default = withDescription({
+    args: {
+        totalPages: 10,
+        onPageChange: fn(),
+        availableSizes: [10, 25, 50, 100],
+        initialPageSize: 25,
+        onPageSizeChange: fn(),
+    },
+}, 'The interactive canvas — all three sections visible: row count (hidden outside a `<Table />`), '
+    + 'page navigation controls, and a page-size selector. '
+    + 'Use the Controls panel to adjust `totalPages` and `initialPageSize`.');
+export const PageNavigationOnly = withDescription({
+    parameters: { controls: { disable: true } },
+    args: {
+        totalPages: 5,
+        onPageChange: fn(),
+    },
+}, 'Only `PaginationControls` — first, previous, page input, next, and last buttons. '
+    + '`totalPages` drives the upper bound; `onPageChange` receives the zero-indexed new page number. '
+    + 'No `PageSizeSelector` props are passed so that section is omitted.');
+export const PageSizeSelectorOnly = withDescription({
+    parameters: { controls: { disable: true } },
+    args: {
+        availableSizes: [10, 25, 50, 100, 'All'],
+        initialPageSize: 25,
+        onPageSizeChange: fn(),
+    },
+}, 'Only `PageSizeSelector` — a dropdown listing the available page sizes. '
+    + 'No `totalPages` / `onPageChange` props are passed so the page-navigation section is omitted. '
+    + 'When used inside a `<Table />` without `onPageSizeChange`, selecting a size updates the AG Grid pagination automatically.');
+export const ServerSidePagination = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { useState } from 'react';
+import { Table, PaginationPanel } from '@arbor-education/design-system.components';
+
+function ServerTable() {
+  const [page, setPage] = useState(0);
+  const [pageSize, setPageSize] = useState(25);
+  const { data, totalPages, totalRows } = useMyApiQuery({ page, pageSize });
+
+  return (
+    <Table
+      rowData={data}
+      columnDefs={colDefs}
+      footerContent={(
+        <PaginationPanel
+          totalRows={totalRows}
+          totalPages={totalPages}
+          onPageChange={setPage}
+          availableSizes={[10, 25, 50, 100]}
+          initialPageSize={pageSize}
+          onPageSizeChange={setPageSize}
+        />
+      )}
+    />
+  );
+}
+export default ServerTable;
+`.trim(),
+            },
+        },
+    },
+    args: {
+        totalRows: 347,
+        totalPages: 14,
+        onPageChange: fn(),
+        availableSizes: [10, 25, 50, 100],
+        initialPageSize: 25,
+        onPageSizeChange: fn(),
+    },
+}, 'Server-side pagination pattern — `totalPages` and `onPageChange` are controlled externally by your data-fetching layer. '
+    + '`totalRows` is provided manually (not derived from the grid). '
+    + 'In this standalone preview `RowCountInfo` still returns `null` (no `GridApiContext`), '
+    + 'but the code example shows the full wiring pattern.');
+//# sourceMappingURL=PaginationPanel.stories.js.map

package/dist/components/table/pagination/PaginationPanel.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginationPanel.stories.js","sourceRoot":"","sources":["../../../../src/components/table/pagination/PaginationPanel.stories.tsx"],"names":[],"mappings":"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"}

package/dist/components/table/tableControls/HideColumnsDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HideColumnsDropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/table/tableControls/HideColumnsDropdown.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAEhD,MAAM,MAAM,wBAAwB,GAAG;IACrC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC9C,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,OAAO,wBAAwB,mDA6ClE,CAAC"}
+{"version":3,"file":"HideColumnsDropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/table/tableControls/HideColumnsDropdown.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAEhD,MAAM,MAAM,wBAAwB,GAAG;IACrC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC9C,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC,CAAC;AAMF,eAAO,MAAM,mBAAmB,GAAI,OAAO,wBAAwB,mDAkDlE,CAAC"}

package/dist/components/table/tableControls/HideColumnsDropdown.js

@@ -1,12 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { SelectDropdown } from '../../formField/inputs/selectDropdown/SelectDropdown';
-import { useContext, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { GridApiContext } from '../GridApiContext';
+const getHiddenColumnIds = (columns) => columns
+    ?.filter(column => !column.isVisible())
+    .map(column => column.getColId()) ?? [];
 export const HideColumnsDropdown = (props) => {
     const { columns: rawColumns, onSelectionChanged, overrideColumnHiding = false, } = props;
     const gridApi = useContext(GridApiContext);
     const currentColumns = rawColumns || gridApi?.getColumns();
-    const [hiddenColumns, setHiddenColumns] = useState([]);
+    const [hiddenColumns, setHiddenColumns] = useState(() => getHiddenColumnIds(rawColumns));
+    useEffect(() => {
+        setHiddenColumns(getHiddenColumnIds(currentColumns));
+    }, [currentColumns]);
     if (!currentColumns || currentColumns.length === 0)
         return null;
     const options = currentColumns.map(column => ({
@@ -28,6 +34,6 @@ export const HideColumnsDropdown = (props) => {
         }
     };
     const placeholderText = hiddenColumns.length > 0 ? `Hide (${hiddenColumns.length})` : 'Hide Columns';
-    return (_jsx(SelectDropdown, { multiple: true, placeholder: placeholderText, options: options, onSelectionChange: handleVisibilityChange, alwaysShowPlaceholder: true }));
+    return (_jsx(SelectDropdown, { multiple: true, placeholder: placeholderText, options: options, selectedValues: hiddenColumns, onSelectionChange: handleVisibilityChange, alwaysShowPlaceholder: true }));
 };
 //# sourceMappingURL=HideColumnsDropdown.js.map

package/dist/components/table/tableControls/HideColumnsDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"HideColumnsDropdown.js","sourceRoot":"","sources":["../../../../src/components/table/tableControls/HideColumnsDropdown.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,2DAA2D,CAAC;AAC3F,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AASnD,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,KAA+B,EAAE,EAAE;IACrE,MAAM,EACJ,OAAO,EAAE,UAAU,EACnB,kBAAkB,EAClB,oBAAoB,GAAG,KAAK,GAC7B,GAAG,KAAK,CAAC;IAEV,MAAM,OAAO,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAC3C,MAAM,cAAc,GAAG,UAAU,IAAI,OAAO,EAAE,UAAU,EAAE,CAAC;IAC3D,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAC;IAEjE,IAAI,CAAC,cAAc,IAAI,cAAc,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IAEhE,MAAM,OAAO,GAAG,cAAc,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;QAC5C,KAAK,EAAE,MAAM,CAAC,SAAS,EAAE,CAAC,UAAU;QACpC,QAAQ,EAAE,MAAM,CAAC,SAAS,EAAE;QAC5B,KAAK,EAAE,MAAM,CAAC,QAAQ,EAAE;KACzB,CAAC,CAAC,CAAC;IAEJ,MAAM,sBAAsB,GAAG,CAAC,aAAuB,EAAE,EAAE;QACzD,IAAI,kBAAkB,EAAE,CAAC;YACvB,kBAAkB,CAAC,aAAa,CAAC,CAAC;QACpC,CAAC;QACD,gBAAgB,CAAC,aAAa,CAAC,CAAC;QAChC,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC1B,MAAM,aAAa,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE;gBAClD,OAAO,CAAC,aAAa,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC;YACjD,CAAC,CAAC,CAAC;YAEH,OAAO,EAAE,iBAAiB,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC;YACjD,OAAO,EAAE,iBAAiB,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC;QAClD,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,cAAc,CAAC;IAErG,OAAO,CACL,KAAC,cAAc,IACb,QAAQ,QACR,WAAW,EAAE,eAAe,EAC5B,OAAO,EAAE,OAAO,EAChB,iBAAiB,EAAE,sBAAsB,EACzC,qBAAqB,SACrB,CACH,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"HideColumnsDropdown.js","sourceRoot":"","sources":["../../../../src/components/table/tableControls/HideColumnsDropdown.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,2DAA2D,CAAC;AAC3F,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AASnD,MAAM,kBAAkB,GAAG,CAAC,OAAyB,EAAE,EAAE,CAAC,OAAO;IAC/D,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC;KACtC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC;AAE1C,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,KAA+B,EAAE,EAAE;IACrE,MAAM,EACJ,OAAO,EAAE,UAAU,EACnB,kBAAkB,EAClB,oBAAoB,GAAG,KAAK,GAC7B,GAAG,KAAK,CAAC;IAEV,MAAM,OAAO,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAC3C,MAAM,cAAc,GAAG,UAAU,IAAI,OAAO,EAAE,UAAU,EAAE,CAAC;IAC3D,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAW,GAAG,EAAE,CAAC,kBAAkB,CAAC,UAAU,CAAC,CAAC,CAAC;IAEnG,SAAS,CAAC,GAAG,EAAE;QACb,gBAAgB,CAAC,kBAAkB,CAAC,cAAc,CAAC,CAAC,CAAC;IACvD,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAErB,IAAI,CAAC,cAAc,IAAI,cAAc,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IAEhE,MAAM,OAAO,GAAG,cAAc,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;QAC5C,KAAK,EAAE,MAAM,CAAC,SAAS,EAAE,CAAC,UAAU;QACpC,QAAQ,EAAE,MAAM,CAAC,SAAS,EAAE;QAC5B,KAAK,EAAE,MAAM,CAAC,QAAQ,EAAE;KACzB,CAAC,CAAC,CAAC;IAEJ,MAAM,sBAAsB,GAAG,CAAC,aAAuB,EAAE,EAAE;QACzD,IAAI,kBAAkB,EAAE,CAAC;YACvB,kBAAkB,CAAC,aAAa,CAAC,CAAC;QACpC,CAAC;QACD,gBAAgB,CAAC,aAAa,CAAC,CAAC;QAChC,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC1B,MAAM,aAAa,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE;gBAClD,OAAO,CAAC,aAAa,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC;YACjD,CAAC,CAAC,CAAC;YAEH,OAAO,EAAE,iBAAiB,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC;YACjD,OAAO,EAAE,iBAAiB,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC;QAClD,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,cAAc,CAAC;IAErG,OAAO,CACL,KAAC,cAAc,IACb,QAAQ,QACR,WAAW,EAAE,eAAe,EAC5B,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,aAAa,EAC7B,iBAAiB,EAAE,sBAAsB,EACzC,qBAAqB,SACrB,CACH,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/table/tableControls/TableControls.stories.d.ts

@@ -0,0 +1,151 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { TableControls } from './TableControls';
+declare function TableControlsDocsPage(): import("react/jsx-runtime").JSX.Element;
+declare const meta: {
+    title: string;
+    component: (props: import("./TableControls").TableControlsProps) => import("react/jsx-runtime").JSX.Element | null;
+    tags: string[];
+    parameters: {
+        layout: string;
+        docs: {
+            page: typeof TableControlsDocsPage;
+        };
+    };
+    argTypes: {
+        bulkActions: {
+            description: string;
+            control: false;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        onUndo: {
+            description: string;
+            control: false;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        onRedo: {
+            description: string;
+            control: false;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        showHideColumns: {
+            description: string;
+            control: "boolean";
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        hasSearch: {
+            description: string;
+            control: "boolean";
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        onDownload: {
+            description: string;
+            control: false;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        showSettings: {
+            description: string;
+            control: "boolean";
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        onHelp: {
+            description: string;
+            control: false;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        isExpanded: {
+            description: string;
+            control: "boolean";
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        onExpandToggle: {
+            description: string;
+            control: false;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+    };
+    args: {
+        onUndo: import("@vitest/spy").Mock<(...args: any[]) => any>;
+        onRedo: import("@vitest/spy").Mock<(...args: any[]) => any>;
+        onDownload: import("@vitest/spy").Mock<(...args: any[]) => any>;
+        onHelp: import("@vitest/spy").Mock<(...args: any[]) => any>;
+        onExpandToggle: import("@vitest/spy").Mock<(...args: any[]) => any>;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof TableControls>;
+export declare const Default: Story;
+export declare const StartGroupOnly: Story;
+export declare const EndGroupOnly: Story;
+export declare const BulkActionsOnly: Story;
+export declare const FullToolbar: Story;
+//# sourceMappingURL=TableControls.stories.d.ts.map

package/dist/components/table/tableControls/TableControls.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableControls.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/table/tableControls/TableControls.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAW5D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAyIhD,iBAAS,qBAAqB,4CAmB7B;AAMD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmE4B,CAAC;AAEvC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,aAAa,CAAC,CAAC;AAkB5C,eAAO,MAAM,OAAO,EAAE,KAcrB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAiB5B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAa1B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KA4C7B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAyDzB,CAAC"}