@bloom-housing/ui-components 7.1.0 → 7.2.0

package/dist/src/sections/ResponsiveContentList.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+export interface ResponsiveContentProps {
+    children: React.ReactNode;
+    desktopClass?: string;
+}
+declare const ResponsiveContentList: (props: ResponsiveContentProps) => JSX.Element;
+declare const ResponsiveContentItem: (props: ResponsiveContentProps) => JSX.Element;
+declare const ResponsiveContentItemHeader: (props: ResponsiveContentProps) => JSX.Element;
+declare const ResponsiveContentItemBody: (props: ResponsiveContentProps) => JSX.Element;
+export { ResponsiveContentList, ResponsiveContentItem, ResponsiveContentItemHeader, ResponsiveContentItemBody, };

package/dist/src/sections/ResponsiveContentList.js

@@ -0,0 +1,53 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResponsiveContentItemBody = exports.ResponsiveContentItemHeader = exports.ResponsiveContentItem = exports.ResponsiveContentList = void 0;
+var React = __importStar(require("react"));
+var ResponsiveWrappers_1 = require("./ResponsiveWrappers");
+var react_accessible_accordion_1 = require("react-accessible-accordion");
+var ResponsiveContentList = function (props) { return (React.createElement(React.Fragment, null,
+    React.createElement(ResponsiveWrappers_1.Mobile, null,
+        React.createElement(react_accessible_accordion_1.Accordion, { allowZeroExpanded: true, allowMultipleExpanded: true }, props.children)),
+    React.createElement(ResponsiveWrappers_1.Desktop, null,
+        React.createElement("ul", { className: "responsive-content-list" }, props.children)))); };
+exports.ResponsiveContentList = ResponsiveContentList;
+var ResponsiveContentItem = function (props) { return (React.createElement(React.Fragment, null,
+    React.createElement(ResponsiveWrappers_1.Mobile, null,
+        React.createElement(react_accessible_accordion_1.AccordionItem, null, props.children)),
+    React.createElement(ResponsiveWrappers_1.Desktop, null,
+        React.createElement("li", { className: "responsive-content-item " + (props.desktopClass ? props.desktopClass : "") }, props.children)))); };
+exports.ResponsiveContentItem = ResponsiveContentItem;
+var ResponsiveContentItemHeader = function (props) { return (React.createElement(React.Fragment, null,
+    React.createElement(ResponsiveWrappers_1.Mobile, null,
+        React.createElement(react_accessible_accordion_1.AccordionItemHeading, { "aria-level": 2 },
+            React.createElement(react_accessible_accordion_1.AccordionItemButton, null, props.children))),
+    React.createElement(ResponsiveWrappers_1.Desktop, null, props.children))); };
+exports.ResponsiveContentItemHeader = ResponsiveContentItemHeader;
+var ResponsiveContentItemBody = function (props) { return (React.createElement(React.Fragment, null,
+    React.createElement(ResponsiveWrappers_1.Mobile, null,
+        React.createElement(react_accessible_accordion_1.AccordionItemPanel, null, props.children)),
+    React.createElement(ResponsiveWrappers_1.Desktop, null, props.children))); };
+exports.ResponsiveContentItemBody = ResponsiveContentItemBody;
+//# sourceMappingURL=ResponsiveContentList.js.map

package/dist/src/sections/ResponsiveContentList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveContentList.js","sourceRoot":"","sources":["../../../src/sections/ResponsiveContentList.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA8B;AAC9B,2DAAsD;AACtD,yEAMmC;AAOnC,IAAM,qBAAqB,GAAG,UAAC,KAA6B,IAAK,OAAA,CAC/D;IACE,oBAAC,2BAAM;QACL,oBAAC,sCAAS,IAAC,iBAAiB,QAAC,qBAAqB,UAC/C,KAAK,CAAC,QAAQ,CACL,CACL;IACT,oBAAC,4BAAO;QACN,4BAAI,SAAS,EAAC,yBAAyB,IAAE,KAAK,CAAC,QAAQ,CAAM,CACrD,CACT,CACJ,EAXgE,CAWhE,CAAA;AAoCC,sDAAqB;AAlCvB,IAAM,qBAAqB,GAAG,UAAC,KAA6B,IAAK,OAAA,CAC/D;IACE,oBAAC,2BAAM;QACL,oBAAC,0CAAa,QAAE,KAAK,CAAC,QAAQ,CAAiB,CACxC;IACT,oBAAC,4BAAO;QACN,4BAAI,SAAS,EAAE,0BAA0B,GAAG,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,IACvF,KAAK,CAAC,QAAQ,CACZ,CACG,CACT,CACJ,EAXgE,CAWhE,CAAA;AAwBC,sDAAqB;AAtBvB,IAAM,2BAA2B,GAAG,UAAC,KAA6B,IAAK,OAAA,CACrE;IACE,oBAAC,2BAAM;QACL,oBAAC,iDAAoB,kBAAa,CAAC;YACjC,oBAAC,gDAAmB,QAAE,KAAK,CAAC,QAAQ,CAAuB,CACtC,CAChB;IACT,oBAAC,4BAAO,QAAE,KAAK,CAAC,QAAQ,CAAW,CAClC,CACJ,EATsE,CAStE,CAAA;AAcC,kEAA2B;AAZ7B,IAAM,yBAAyB,GAAG,UAAC,KAA6B,IAAK,OAAA,CACnE;IACE,oBAAC,2BAAM;QACL,oBAAC,+CAAkB,QAAE,KAAK,CAAC,QAAQ,CAAsB,CAClD;IACT,oBAAC,4BAAO,QAAE,KAAK,CAAC,QAAQ,CAAW,CAClC,CACJ,EAPoE,CAOpE,CAAA;AAMC,8DAAyB"}

package/dist/src/sections/ResponsiveContentList.stories.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const withContentItems: () => JSX.Element;

package/dist/src/sections/ResponsiveContentList.stories.js

@@ -0,0 +1,44 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withContentItems = void 0;
+var React = __importStar(require("react"));
+var ResponsiveContentList_1 = require("./ResponsiveContentList");
+exports.default = {
+    title: "Sections/Responsive Content List",
+};
+var withContentItems = function () { return (React.createElement(ResponsiveContentList_1.ResponsiveContentList, null,
+    React.createElement(ResponsiveContentList_1.ResponsiveContentItem, null,
+        React.createElement(ResponsiveContentList_1.ResponsiveContentItemHeader, null,
+            React.createElement("h3", { className: "md:text-black font-sans uppercase md:normal-case md:font-serif md:text-2xl" }, "Item 1 Header")),
+        React.createElement(ResponsiveContentList_1.ResponsiveContentItemBody, null,
+            React.createElement("p", null, "Item 1 Content"))),
+    React.createElement(ResponsiveContentList_1.ResponsiveContentItem, null,
+        React.createElement(ResponsiveContentList_1.ResponsiveContentItemHeader, null,
+            React.createElement("h3", { className: "md:text-black font-sans uppercase md:normal-case md:font-serif md:text-2xl" }, "Item 2 Header")),
+        React.createElement(ResponsiveContentList_1.ResponsiveContentItemBody, null,
+            React.createElement("p", null, "Item 2 Content"))))); };
+exports.withContentItems = withContentItems;
+//# sourceMappingURL=ResponsiveContentList.stories.js.map

package/dist/src/sections/ResponsiveContentList.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveContentList.stories.js","sourceRoot":"","sources":["../../../src/sections/ResponsiveContentList.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA8B;AAE9B,iEAKgC;AAEhC,kBAAe;IACb,KAAK,EAAE,kCAAkC;CAC1C,CAAA;AAEM,IAAM,gBAAgB,GAAG,cAAM,OAAA,CACpC,oBAAC,6CAAqB;IACpB,oBAAC,6CAAqB;QACpB,oBAAC,mDAA2B;YAC1B,4BAAI,SAAS,EAAC,4EAA4E,oBAErF,CACuB;QAC9B,oBAAC,iDAAyB;YACxB,gDAAqB,CACK,CACN;IAExB,oBAAC,6CAAqB;QACpB,oBAAC,mDAA2B;YAC1B,4BAAI,SAAS,EAAC,4EAA4E,oBAErF,CACuB;QAC9B,oBAAC,iDAAyB;YACxB,gDAAqB,CACK,CACN,CACF,CACzB,EAxBqC,CAwBrC,CAAA;AAxBY,QAAA,gBAAgB,oBAwB5B"}

package/dist/src/sections/ResponsiveWrappers.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+export interface ResponsiveWrapperProps {
+    children: React.ReactNode;
+}
+declare const Desktop: (props: ResponsiveWrapperProps) => JSX.Element;
+declare const Mobile: (props: ResponsiveWrapperProps) => JSX.Element;
+export { Desktop, Mobile };

package/dist/src/sections/ResponsiveWrappers.js

@@ -0,0 +1,38 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Mobile = exports.Desktop = void 0;
+var React = __importStar(require("react"));
+var react_media_1 = __importDefault(require("react-media"));
+var tailwindConfig = __importStar(require("../../tailwind.config.js"));
+var mdBreakpoint = parseInt(tailwindConfig.theme.screens.md.replace("px", ""));
+var Desktop = function (props) { return (React.createElement(react_media_1.default, { render: function () { return props.children; }, query: { minWidth: mdBreakpoint }, defaultMatches: false })); };
+exports.Desktop = Desktop;
+var Mobile = function (props) { return (React.createElement(react_media_1.default, { render: function () { return props.children; }, query: { maxWidth: mdBreakpoint - 1 }, defaultMatches: true })); };
+exports.Mobile = Mobile;
+//# sourceMappingURL=ResponsiveWrappers.js.map

package/dist/src/sections/ResponsiveWrappers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveWrappers.js","sourceRoot":"","sources":["../../../src/sections/ResponsiveWrappers.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA8B;AAC9B,4DAA+B;AAC/B,uEAA0D;AAM1D,IAAM,YAAY,GAAG,QAAQ,CAAC,cAAc,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAA;AAEhF,IAAM,OAAO,GAAG,UAAC,KAA6B,IAAK,OAAA,CACjD,oBAAC,qBAAK,IAAC,MAAM,EAAE,cAAM,OAAA,KAAK,CAAC,QAAQ,EAAd,CAAc,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE,cAAc,EAAE,KAAK,GAAI,CAClG,EAFkD,CAElD,CAAA;AAUQ,0BAAO;AARhB,IAAM,MAAM,GAAG,UAAC,KAA6B,IAAK,OAAA,CAChD,oBAAC,qBAAK,IACJ,MAAM,EAAE,cAAM,OAAA,KAAK,CAAC,QAAQ,EAAd,CAAc,EAC5B,KAAK,EAAE,EAAE,QAAQ,EAAE,YAAY,GAAG,CAAC,EAAE,EACrC,cAAc,EAAE,IAAI,GACpB,CACH,EANiD,CAMjD,CAAA;AAEiB,wBAAM"}

package/dist/src/tables/AgPagination.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+declare type AgPaginationProps = {
+    totalItems: number;
+    totalPages: number;
+    currentPage: number;
+    itemsPerPage: number;
+    quantityLabel?: string;
+    setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
+    setItemsPerPage: React.Dispatch<React.SetStateAction<number>>;
+    onPageChange?: (page: number) => void;
+    onPerPageChange?: (size: number) => void;
+};
+declare const AG_PER_PAGE_OPTIONS: number[];
+declare const AgPagination: ({ totalItems, totalPages, currentPage, itemsPerPage, quantityLabel, setCurrentPage, setItemsPerPage, onPageChange, onPerPageChange, }: AgPaginationProps) => JSX.Element;
+export { AgPagination as default, AgPagination, AG_PER_PAGE_OPTIONS };

package/dist/src/tables/AgPagination.js

@@ -0,0 +1,56 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AG_PER_PAGE_OPTIONS = exports.AgPagination = exports.default = void 0;
+var react_1 = __importDefault(require("react"));
+var __1 = require("../..");
+var AG_PER_PAGE_OPTIONS = [8, 25, 50, 100];
+exports.AG_PER_PAGE_OPTIONS = AG_PER_PAGE_OPTIONS;
+var AgPagination = function (_a) {
+    var totalItems = _a.totalItems, totalPages = _a.totalPages, currentPage = _a.currentPage, itemsPerPage = _a.itemsPerPage, quantityLabel = _a.quantityLabel, setCurrentPage = _a.setCurrentPage, setItemsPerPage = _a.setItemsPerPage, onPageChange = _a.onPageChange, onPerPageChange = _a.onPerPageChange;
+    var onNextClick = function () {
+        setCurrentPage(currentPage + 1);
+        onPageChange && onPageChange(currentPage);
+    };
+    var onPrevClick = function () {
+        setCurrentPage(currentPage - 1);
+        onPageChange && onPageChange(currentPage);
+    };
+    var onRowLimitChange = function (size) {
+        setItemsPerPage(parseInt(size));
+        onPerPageChange && onPerPageChange(itemsPerPage);
+    };
+    return (react_1.default.createElement("div", { className: "data-pager flex flex-col md:flex-row" },
+        react_1.default.createElement("div", { className: "hidden md:block" },
+            react_1.default.createElement(__1.Button, { className: "data-pager__previous data-pager__control", onClick: onPrevClick, disabled: currentPage === 1 }, (0, __1.t)("t.previous"))),
+        react_1.default.createElement("div", { className: "data-pager__control-group ml-0 md:ml-auto w-full md:w-auto md:flex md:items-center" },
+            react_1.default.createElement("div", { className: "data-pager__control" },
+                react_1.default.createElement("span", { className: "field-label", id: "lbTotalPages" }, totalItems),
+                quantityLabel && (react_1.default.createElement("span", { className: "field-label" }, quantityLabel))),
+            react_1.default.createElement("div", { className: "flex mt-5 md:mt-0 md:items-center" },
+                react_1.default.createElement("div", { className: "field data-pager__control md:mb-0" },
+                    react_1.default.createElement("label", { className: "field-label font-sans", htmlFor: "page-size" }, (0, __1.t)("t.show")),
+                    react_1.default.createElement("select", { "data-test-id": "ag-page-size", name: "page-size", id: "page-size", value: itemsPerPage, onChange: function (_a) {
+                            var target = _a.target;
+                            return onRowLimitChange(target.value);
+                        } }, AG_PER_PAGE_OPTIONS.map(function (item) { return (react_1.default.createElement("option", { key: item, value: item }, item)); }))),
+                react_1.default.createElement("div", { className: "field data-pager__control" },
+                    react_1.default.createElement("label", { className: "field-label font-sans", htmlFor: "page-jump" }, (0, __1.t)("t.jumpTo")),
+                    react_1.default.createElement("select", { "data-test-id": "ag-page-select", name: "page-jump", id: "page-jump", onChange: function (e) {
+                            return setCurrentPage(parseInt(e.target.value));
+                        }, value: currentPage }, Array(totalPages)
+                        .fill(totalPages)
+                        .map(function (_, i) {
+                        var value = i + 1;
+                        return (react_1.default.createElement("option", { key: value, value: value }, value));
+                    }))))),
+        react_1.default.createElement("div", { className: "w-full md:w-auto flex justify-between mt-5 md:mt-0 " },
+            react_1.default.createElement("div", { className: "md:hidden" },
+                react_1.default.createElement(__1.Button, { "data-test-id": "ag-btn-prev", className: "data-pager__previous data-pager__control", onClick: onPrevClick, disabled: currentPage === 1 }, (0, __1.t)("t.previous"))),
+            react_1.default.createElement(__1.Button, { "data-test-id": "ag-btn-next", className: "data-pager__next data-pager__control", onClick: onNextClick, disabled: totalPages === currentPage || totalPages === 0 }, (0, __1.t)("t.next")))));
+};
+exports.default = AgPagination;
+exports.AgPagination = AgPagination;
+//# sourceMappingURL=AgPagination.js.map

package/dist/src/tables/AgPagination.js.map

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

package/dist/src/tables/AgTable.d.ts

@@ -0,0 +1,70 @@
+import React from "react";
+import { ColDef, ColGroupDef, GridApi } from "ag-grid-community";
+export interface ColumnOrder {
+    orderBy: string;
+    orderDir: string;
+}
+export interface AgTableProps {
+    config: AgTableConfig;
+    data: AgTableData;
+    id: string;
+    pagination?: AgTablePagination;
+    search: AgTableSearch;
+    selectConfig?: AgTableSelectConfig;
+    sort?: AgTableSort;
+    headerContent?: React.ReactNode;
+    className?: string;
+    strings?: {
+        filter?: string;
+        searchError?: string;
+    };
+}
+export interface AgTablePagination {
+    perPage: number;
+    setPerPage: React.Dispatch<React.SetStateAction<number>>;
+    currentPage: number;
+    setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
+}
+export interface AgTableSelectConfig {
+    setGridApi: React.Dispatch<React.SetStateAction<GridApi | null>>;
+    updateSelectedValues: () => void;
+}
+export interface AgTableConfig {
+    gridComponents?: {
+        [p: string]: any;
+    };
+    columns: (ColDef | ColGroupDef)[];
+    totalItemsLabel: string;
+    rowSelection?: boolean;
+}
+export interface AgTableData {
+    items: any[];
+    loading: boolean;
+    totalItems: number;
+    totalPages: number;
+}
+export interface AgTableSearch {
+    setSearch: React.Dispatch<React.SetStateAction<string>>;
+    showSearch?: boolean;
+}
+export interface AgTableSort {
+    setSort?: React.Dispatch<React.SetStateAction<ColumnOrder[]>>;
+}
+export declare const useAgTable: () => {
+    filter: {
+        filterValue: string;
+        setFilterValue: React.Dispatch<React.SetStateAction<string>>;
+    };
+    sort: {
+        sortOptions: ColumnOrder[];
+        setSortOptions: React.Dispatch<React.SetStateAction<ColumnOrder[]>>;
+    };
+    pagination: {
+        itemsPerPage: number;
+        setItemsPerPage: React.Dispatch<React.SetStateAction<number>>;
+        currentPage: number;
+        setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
+    };
+};
+declare const AgTable: ({ className, config: { gridComponents, columns, totalItemsLabel, rowSelection }, data, headerContent, id, selectConfig, pagination, search: { setSearch, showSearch }, sort: { setSort }, strings, }: AgTableProps) => JSX.Element;
+export { AgTable as default, AgTable };

package/dist/src/tables/AgTable.js

@@ -0,0 +1,156 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AgTable = exports.default = exports.useAgTable = void 0;
+var react_1 = __importStar(require("react"));
+var react_hook_form_1 = require("react-hook-form");
+var ag_grid_react_1 = require("ag-grid-react");
+var AgPagination_1 = require("./AgPagination");
+var LoadingOverlay_1 = require("../overlays/LoadingOverlay");
+var Field_1 = require("../forms/Field");
+var AlertBox_1 = require("../notifications/AlertBox");
+var debounce_1 = require("../helpers/debounce");
+var translator_1 = require("../helpers/translator");
+var useAgTable = function () {
+    var _a = (0, react_1.useState)([]), sortOptions = _a[0], setSortOptions = _a[1];
+    var _b = (0, react_1.useState)(""), filterValue = _b[0], setFilterValue = _b[1];
+    var _c = (0, react_1.useState)(AgPagination_1.AG_PER_PAGE_OPTIONS[0]), itemsPerPage = _c[0], setItemsPerPage = _c[1];
+    var _d = (0, react_1.useState)(1), currentPage = _d[0], setCurrentPage = _d[1];
+    return {
+        filter: {
+            filterValue: filterValue,
+            setFilterValue: setFilterValue,
+        },
+        sort: {
+            sortOptions: sortOptions,
+            setSortOptions: setSortOptions,
+        },
+        pagination: {
+            itemsPerPage: itemsPerPage,
+            setItemsPerPage: setItemsPerPage,
+            currentPage: currentPage,
+            setCurrentPage: setCurrentPage,
+        },
+    };
+};
+exports.useAgTable = useAgTable;
+var AgTable = function (_a) {
+    var _b, _c, _d, _e, _f;
+    var className = _a.className, _g = _a.config, gridComponents = _g.gridComponents, columns = _g.columns, totalItemsLabel = _g.totalItemsLabel, rowSelection = _g.rowSelection, data = _a.data, headerContent = _a.headerContent, id = _a.id, selectConfig = _a.selectConfig, pagination = _a.pagination, _h = _a.search, setSearch = _h.setSearch, _j = _h.showSearch, showSearch = _j === void 0 ? true : _j, _k = _a.sort, _l = _k === void 0 ? {} : _k, setSort = _l.setSort, strings = _a.strings;
+    // local storage key with column state
+    var columnStateLsKey = "column-state_".concat(id);
+    var defaultColDef = {
+        resizable: true,
+    };
+    var _m = (0, react_1.useState)(null), gridColumnApi = _m[0], setGridColumnApi = _m[1];
+    var _o = (0, react_1.useState)(true), validSearch = _o[0], setValidSearch = _o[1];
+    var gridOptions = {
+        onSortChanged: function (params) {
+            if (!setSort)
+                return;
+            saveColumnState(params.columnApi);
+            onSortChange(params.columnApi.getColumnState());
+        },
+        onColumnMoved: function (params) { return saveColumnState(params.columnApi); },
+        components: gridComponents,
+        suppressNoRowsOverlay: data.loading,
+    };
+    // update table items order on sort change
+    var initialLoadOnSort = (0, react_1.useRef)(false);
+    var onSortChange = (0, react_1.useCallback)(function (columns) {
+        if (!setSort)
+            return;
+        // prevent multiple fetch on initial render
+        if (!initialLoadOnSort.current) {
+            initialLoadOnSort.current = true;
+            return;
+        }
+        var sortedColumns = columns.filter(function (col) { return !!col.sort; });
+        setSort(function () {
+            return sortedColumns === null || sortedColumns === void 0 ? void 0 : sortedColumns.map(function (col) {
+                var _a;
+                return ({
+                    orderBy: (col === null || col === void 0 ? void 0 : col.colId) || "",
+                    orderDir: ((_a = col === null || col === void 0 ? void 0 : col.sort) === null || _a === void 0 ? void 0 : _a.toUpperCase()) || "",
+                });
+            });
+        });
+    }, [setSort]);
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    var _p = (0, react_hook_form_1.useForm)(), register = _p.register, watch = _p.watch;
+    var filterField = watch("filter-input", "");
+    var debounceFilter = (0, react_1.useRef)((0, debounce_1.debounce)(function (value) {
+        setSearch(value);
+        pagination === null || pagination === void 0 ? void 0 : pagination.setCurrentPage(1);
+    }, 500));
+    (0, react_1.useEffect)(function () {
+        if (filterField.length === 0 || filterField.length > 2) {
+            setValidSearch(true);
+            debounceFilter.current(filterField);
+        }
+        else {
+            setSearch("");
+            setValidSearch(false);
+        }
+    }, [filterField, setSearch]);
+    // Load a table state on initial render & pagination change (because the new data comes from the API)
+    (0, react_1.useEffect)(function () {
+        var savedColumnState = sessionStorage.getItem(columnStateLsKey);
+        if (gridColumnApi && savedColumnState) {
+            var parsedState = JSON.parse(savedColumnState);
+            gridColumnApi.applyColumnState({
+                state: parsedState,
+                applyOrder: true,
+            });
+        }
+    }, [gridColumnApi, id, columnStateLsKey]);
+    var saveColumnState = function (api) {
+        var columnState = api.getColumnState();
+        var columnStateJSON = JSON.stringify(columnState);
+        sessionStorage.setItem(columnStateLsKey, columnStateJSON);
+    };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    var onGridReady = function (params) {
+        setGridColumnApi(params.columnApi);
+        if (selectConfig === null || selectConfig === void 0 ? void 0 : selectConfig.setGridApi) {
+            selectConfig.setGridApi(params.api);
+        }
+    };
+    return (react_1.default.createElement("div", { className: "ag-theme-alpine ag-theme-bloom ".concat(className || "") },
+        react_1.default.createElement("div", { className: "flex justify-between flex-col md:flex-row ".concat(showSearch || headerContent ? "mb-4" : "") },
+            react_1.default.createElement("div", { className: "flex flex-wrap ".concat(!showSearch && "hidden") },
+                react_1.default.createElement("div", { className: "md:mr-5 w-full md:w-56" },
+                    react_1.default.createElement(Field_1.Field, { dataTestId: "ag-search-input", name: "filter-input", label: (_b = strings === null || strings === void 0 ? void 0 : strings.filter) !== null && _b !== void 0 ? _b : (0, translator_1.t)("t.filter"), readerOnly: true, register: register, placeholder: (_c = strings === null || strings === void 0 ? void 0 : strings.filter) !== null && _c !== void 0 ? _c : (0, translator_1.t)("t.filter") })),
+                react_1.default.createElement("div", { className: "w-full md:w-auto mt-2 md:mt-0 mb-2 md:mb-0" }, !validSearch && (react_1.default.createElement(AlertBox_1.AlertBox, { type: "notice" }, (_d = strings === null || strings === void 0 ? void 0 : strings.searchError) !== null && _d !== void 0 ? _d : (0, translator_1.t)("applications.table.searchError"))))),
+            headerContent),
+        react_1.default.createElement("div", { className: "applications-table" },
+            react_1.default.createElement(LoadingOverlay_1.LoadingOverlay, { isLoading: data.loading },
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement(ag_grid_react_1.AgGridReact, { defaultColDef: defaultColDef, onGridReady: onGridReady, gridOptions: gridOptions, columnDefs: columns, rowData: data.items, domLayout: "autoHeight", headerHeight: 83, rowHeight: 58, suppressPaginationPanel: true, paginationPageSize: AgPagination_1.AG_PER_PAGE_OPTIONS[0], suppressScrollOnNewData: true, rowSelection: rowSelection ? "multiple" : undefined, rowMultiSelectWithClick: rowSelection, onRowDataChanged: (_e = selectConfig === null || selectConfig === void 0 ? void 0 : selectConfig.updateSelectedValues) !== null && _e !== void 0 ? _e : undefined, onFirstDataRendered: (_f = selectConfig === null || selectConfig === void 0 ? void 0 : selectConfig.updateSelectedValues) !== null && _f !== void 0 ? _f : undefined }))),
+            pagination && (react_1.default.createElement(AgPagination_1.AgPagination, { totalItems: data.totalItems, totalPages: data.totalPages, currentPage: pagination.currentPage, itemsPerPage: pagination.perPage, quantityLabel: totalItemsLabel, setCurrentPage: pagination.setCurrentPage, setItemsPerPage: pagination.setPerPage })))));
+};
+exports.default = AgTable;
+exports.AgTable = AgTable;
+//# sourceMappingURL=AgTable.js.map

package/dist/src/tables/AgTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgTable.js","sourceRoot":"","sources":["../../../src/tables/AgTable.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAuE;AACvE,mDAAyC;AACzC,+CAA2C;AAS3C,+CAAkE;AAClE,6DAA2D;AAC3D,wCAAsC;AACtC,sDAAoD;AACpD,gDAA8C;AAC9C,oDAAyC;AA4DlC,IAAM,UAAU,GAAG;IAClB,IAAA,KAAgC,IAAA,gBAAQ,EAAgB,EAAE,CAAC,EAA1D,WAAW,QAAA,EAAE,cAAc,QAA+B,CAAA;IAC3D,IAAA,KAAgC,IAAA,gBAAQ,EAAC,EAAE,CAAC,EAA3C,WAAW,QAAA,EAAE,cAAc,QAAgB,CAAA;IAE5C,IAAA,KAAkC,IAAA,gBAAQ,EAAS,kCAAmB,CAAC,CAAC,CAAC,CAAC,EAAzE,YAAY,QAAA,EAAE,eAAe,QAA4C,CAAA;IAC1E,IAAA,KAAgC,IAAA,gBAAQ,EAAS,CAAC,CAAC,EAAlD,WAAW,QAAA,EAAE,cAAc,QAAuB,CAAA;IAEzD,OAAO;QACL,MAAM,EAAE;YACN,WAAW,aAAA;YACX,cAAc,gBAAA;SACf;QACD,IAAI,EAAE;YACJ,WAAW,aAAA;YACX,cAAc,gBAAA;SACf;QACD,UAAU,EAAE;YACV,YAAY,cAAA;YACZ,eAAe,iBAAA;YACf,WAAW,aAAA;YACX,cAAc,gBAAA;SACf;KACF,CAAA;AACH,CAAC,CAAA;AAvBY,QAAA,UAAU,cAuBtB;AAED,IAAM,OAAO,GAAG,UAAC,EAWF;;QAVb,SAAS,eAAA,EACT,cAAkE,EAAxD,cAAc,oBAAA,EAAE,OAAO,aAAA,EAAE,eAAe,qBAAA,EAAE,YAAY,kBAAA,EAChE,IAAI,UAAA,EACJ,aAAa,mBAAA,EACb,EAAE,QAAA,EACF,YAAY,kBAAA,EACZ,UAAU,gBAAA,EACV,cAAwC,EAA9B,SAAS,eAAA,EAAE,kBAAiB,EAAjB,UAAU,mBAAG,IAAI,KAAA,EACtC,YAAsB,EAAtB,qBAAoB,EAAE,KAAA,EAAd,OAAO,aAAA,EACf,OAAO,aAAA;IAEP,sCAAsC;IACtC,IAAM,gBAAgB,GAAG,uBAAgB,EAAE,CAAE,CAAA;IAC7C,IAAM,aAAa,GAAG;QACpB,SAAS,EAAE,IAAI;KAChB,CAAA;IAEK,IAAA,KAAoC,IAAA,gBAAQ,EAAmB,IAAI,CAAC,EAAnE,aAAa,QAAA,EAAE,gBAAgB,QAAoC,CAAA;IAEpE,IAAA,KAAgC,IAAA,gBAAQ,EAAU,IAAI,CAAC,EAAtD,WAAW,QAAA,EAAE,cAAc,QAA2B,CAAA;IAE7D,IAAM,WAAW,GAAgB;QAC/B,aAAa,EAAE,UAAC,MAAM;YACpB,IAAI,CAAC,OAAO;gBAAE,OAAM;YAEpB,eAAe,CAAC,MAAM,CAAC,SAAS,CAAC,CAAA;YACjC,YAAY,CAAC,MAAM,CAAC,SAAS,CAAC,cAAc,EAAE,CAAC,CAAA;QACjD,CAAC;QACD,aAAa,EAAE,UAAC,MAAM,IAAK,OAAA,eAAe,CAAC,MAAM,CAAC,SAAS,CAAC,EAAjC,CAAiC;QAC5D,UAAU,EAAE,cAAc;QAC1B,qBAAqB,EAAE,IAAI,CAAC,OAAO;KACpC,CAAA;IAED,0CAA0C;IAC1C,IAAM,iBAAiB,GAAG,IAAA,cAAM,EAAU,KAAK,CAAC,CAAA;IAEhD,IAAM,YAAY,GAAG,IAAA,mBAAW,EAC9B,UAAC,OAAsB;QACrB,IAAI,CAAC,OAAO;YAAE,OAAM;QAEpB,2CAA2C;QAC3C,IAAI,CAAC,iBAAiB,CAAC,OAAO,EAAE;YAC9B,iBAAiB,CAAC,OAAO,GAAG,IAAI,CAAA;YAChC,OAAM;SACP;QAED,IAAM,aAAa,GAAG,OAAO,CAAC,MAAM,CAAC,UAAC,GAAG,IAAK,OAAA,CAAC,CAAC,GAAG,CAAC,IAAI,EAAV,CAAU,CAAC,CAAA;QAEzD,OAAO,CAAC;YACN,OAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,GAAG,CAAC,UAAC,GAAG;;gBAAK,OAAA,CAAC;oBAC3B,OAAO,EAAE,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,KAAK,KAAI,EAAE;oBACzB,QAAQ,EAAE,CAAA,MAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,IAAI,0CAAE,WAAW,EAAE,KAAI,EAAE;iBACzC,CAAC,CAAA;aAAA,CAAC;QAHH,CAGG,CACJ,CAAA;IACH,CAAC,EACD,CAAC,OAAO,CAAC,CACV,CAAA;IAED,6DAA6D;IACvD,IAAA,KAAsB,IAAA,yBAAO,GAAE,EAA7B,QAAQ,cAAA,EAAE,KAAK,WAAc,CAAA;IACrC,IAAM,WAAW,GAAG,KAAK,CAAC,cAAc,EAAE,EAAE,CAAC,CAAA;IAC7C,IAAM,cAAc,GAAG,IAAA,cAAM,EAC3B,IAAA,mBAAQ,EAAC,UAAC,KAAa;QACrB,SAAS,CAAC,KAAK,CAAC,CAAA;QAChB,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,cAAc,CAAC,CAAC,CAAC,CAAA;IAC/B,CAAC,EAAE,GAAG,CAAC,CACR,CAAA;IACD,IAAA,iBAAS,EAAC;QACR,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE;YACtD,cAAc,CAAC,IAAI,CAAC,CAAA;YACpB,cAAc,CAAC,OAAO,CAAC,WAAW,CAAC,CAAA;SACpC;aAAM;YACL,SAAS,CAAC,EAAE,CAAC,CAAA;YACb,cAAc,CAAC,KAAK,CAAC,CAAA;SACtB;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC,CAAA;IAE5B,qGAAqG;IACrG,IAAA,iBAAS,EAAC;QACR,IAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAA;QAEjE,IAAI,aAAa,IAAI,gBAAgB,EAAE;YACrC,IAAM,WAAW,GAAkB,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAA;YAE/D,aAAa,CAAC,gBAAgB,CAAC;gBAC7B,KAAK,EAAE,WAAW;gBAClB,UAAU,EAAE,IAAI;aACjB,CAAC,CAAA;SACH;IACH,CAAC,EAAE,CAAC,aAAa,EAAE,EAAE,EAAE,gBAAgB,CAAC,CAAC,CAAA;IAEzC,IAAM,eAAe,GAAG,UAAC,GAAc;QACrC,IAAM,WAAW,GAAG,GAAG,CAAC,cAAc,EAAE,CAAA;QACxC,IAAM,eAAe,GAAG,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;QACnD,cAAc,CAAC,OAAO,CAAC,gBAAgB,EAAE,eAAe,CAAC,CAAA;IAC3D,CAAC,CAAA;IAED,8DAA8D;IAC9D,IAAM,WAAW,GAAG,UAAC,MAAW;QAC9B,gBAAgB,CAAC,MAAM,CAAC,SAAS,CAAC,CAAA;QAClC,IAAI,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,UAAU,EAAE;YAC5B,YAAY,CAAC,UAAU,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;SACpC;IACH,CAAC,CAAA;IAED,OAAO,CACL,uCAAK,SAAS,EAAE,yCAAkC,SAAS,IAAI,EAAE,CAAE;QACjE,uCACE,SAAS,EAAE,oDACT,UAAU,IAAI,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CACzC;YAEF,uCAAK,SAAS,EAAE,yBAAkB,CAAC,UAAU,IAAI,QAAQ,CAAE;gBACzD,uCAAK,SAAS,EAAC,wBAAwB;oBACrC,8BAAC,aAAK,IACJ,UAAU,EAAC,iBAAiB,EAC5B,IAAI,EAAC,cAAc,EACnB,KAAK,EAAE,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,MAAM,mCAAI,IAAA,cAAC,EAAC,UAAU,CAAC,EACvC,UAAU,EAAE,IAAI,EAChB,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,MAAM,mCAAI,IAAA,cAAC,EAAC,UAAU,CAAC,GAC7C,CACE;gBACN,uCAAK,SAAS,EAAC,4CAA4C,IACxD,CAAC,WAAW,IAAI,CACf,8BAAC,mBAAQ,IAAC,IAAI,EAAC,QAAQ,IACpB,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,mCAAI,IAAA,cAAC,EAAC,gCAAgC,CAAC,CACnD,CACZ,CACG,CACF;YACL,aAAa,CACV;QACN,uCAAK,SAAS,EAAC,oBAAoB;YACjC,8BAAC,+BAAc,IAAC,SAAS,EAAE,IAAI,CAAC,OAAO;gBACrC;oBACE,8BAAC,2BAAW,IACV,aAAa,EAAE,aAAa,EAC5B,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,OAAO,EACnB,OAAO,EAAE,IAAI,CAAC,KAAK,EACnB,SAAS,EAAE,YAAY,EACvB,YAAY,EAAE,EAAE,EAChB,SAAS,EAAE,EAAE,EACb,uBAAuB,EAAE,IAAI,EAC7B,kBAAkB,EAAE,kCAAmB,CAAC,CAAC,CAAC,EAC1C,uBAAuB,EAAE,IAAI,EAC7B,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EACnD,uBAAuB,EAAE,YAAY,EACrC,gBAAgB,EAAE,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,oBAAoB,mCAAI,SAAS,EACjE,mBAAmB,EAAE,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,oBAAoB,mCAAI,SAAS,GACvD,CACX,CACS;YAEhB,UAAU,IAAI,CACb,8BAAC,2BAAY,IACX,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,WAAW,EAAE,UAAU,CAAC,WAAW,EACnC,YAAY,EAAE,UAAU,CAAC,OAAO,EAChC,aAAa,EAAE,eAAe,EAC9B,cAAc,EAAE,UAAU,CAAC,cAAc,EACzC,eAAe,EAAE,UAAU,CAAC,UAAU,GACtC,CACH,CACG,CACF,CACP,CAAA;AACH,CAAC,CAAA;AAEmB,0BAAO;AAAE,0BAAO"}

package/dist/src/tables/AgTable.stories.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    title: string;
+    decorators: ((storyFn: any) => JSX.Element)[];
+    component: ({ className, config: { gridComponents, columns, totalItemsLabel, rowSelection }, data, headerContent, id, selectConfig, pagination, search: { setSearch, showSearch }, sort: { setSort }, strings, }: import("./AgTable").AgTableProps) => JSX.Element;
+};
+export default _default;
+export declare const Default: () => JSX.Element;

package/dist/src/tables/AgTable.stories.js

@@ -0,0 +1,62 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+var react_1 = __importDefault(require("react"));
+var AgTable_1 = require("./AgTable");
+var agTableMockColumns = [
+    {
+        headerName: "Name",
+        field: "name",
+    },
+    {
+        headerName: "Value",
+        field: "value",
+    },
+];
+var agTableMockData = Array.from({ length: 10 }).map(function (_, index) { return ({
+    name: "".concat(index + 1, " row"),
+    value: "".concat(index + 1),
+}); });
+var getTableMockData = function (page, perPage, search) {
+    // in story works by name only
+    if (search) {
+        return agTableMockData.filter(function (item) { return item.name.includes(search); });
+    }
+    if (page === 1)
+        return agTableMockData.slice(0, perPage);
+    if (page === 2)
+        return agTableMockData.slice(perPage, agTableMockData.length);
+    return agTableMockData;
+};
+exports.default = {
+    title: "Tables/AgTable",
+    decorators: [function (storyFn) { return react_1.default.createElement("div", { style: { padding: "1rem" } }, storyFn()); }],
+    component: AgTable_1.AgTable,
+};
+var Default = function () {
+    var tableOptions = (0, AgTable_1.useAgTable)();
+    var tableItems = getTableMockData(tableOptions.pagination.currentPage, tableOptions.pagination.itemsPerPage, tableOptions.filter.filterValue);
+    return (react_1.default.createElement(AgTable_1.AgTable, { id: "test-table", pagination: {
+            perPage: tableOptions.pagination.itemsPerPage,
+            setPerPage: tableOptions.pagination.setItemsPerPage,
+            currentPage: tableOptions.pagination.currentPage,
+            setCurrentPage: tableOptions.pagination.setCurrentPage,
+        }, config: {
+            columns: agTableMockColumns,
+            totalItemsLabel: "Total items",
+        }, data: {
+            items: tableItems,
+            loading: false,
+            totalItems: agTableMockData.length,
+            totalPages: Math.ceil(agTableMockData.length / tableOptions.pagination.itemsPerPage),
+        }, search: {
+            setSearch: tableOptions.filter.setFilterValue,
+        }, sort: {
+            setSort: tableOptions.sort.setSortOptions,
+        }, headerContent: react_1.default.createElement("div", { className: "flex-row" }, "right content") }));
+};
+exports.Default = Default;
+//# sourceMappingURL=AgTable.stories.js.map

package/dist/src/tables/AgTable.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgTable.stories.js","sourceRoot":"","sources":["../../../src/tables/AgTable.stories.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAAyB;AAEzB,qCAA+C;AAE/C,IAAM,kBAAkB,GAAG;IACzB;QACE,UAAU,EAAE,MAAM;QAClB,KAAK,EAAE,MAAM;KACd;IACD;QACE,UAAU,EAAE,OAAO;QACnB,KAAK,EAAE,OAAO;KACf;CACF,CAAA;AAED,IAAM,eAAe,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,UAAC,CAAC,EAAE,KAAK,IAAK,OAAA,CAAC;IACpE,IAAI,EAAE,UAAG,KAAK,GAAG,CAAC,SAAM;IACxB,KAAK,EAAE,UAAG,KAAK,GAAG,CAAC,CAAE;CACtB,CAAC,EAHmE,CAGnE,CAAC,CAAA;AAEH,IAAM,gBAAgB,GAAG,UAAC,IAAY,EAAE,OAAe,EAAE,MAAc;IACrE,8BAA8B;IAC9B,IAAI,MAAM,EAAE;QACV,OAAO,eAAe,CAAC,MAAM,CAAC,UAAC,IAAI,IAAK,OAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,EAA1B,CAA0B,CAAC,CAAA;KACpE;IAED,IAAI,IAAI,KAAK,CAAC;QAAE,OAAO,eAAe,CAAC,KAAK,CAAC,CAAC,EAAE,OAAO,CAAC,CAAA;IACxD,IAAI,IAAI,KAAK,CAAC;QAAE,OAAO,eAAe,CAAC,KAAK,CAAC,OAAO,EAAE,eAAe,CAAC,MAAM,CAAC,CAAA;IAE7E,OAAO,eAAe,CAAA;AACxB,CAAC,CAAA;AAED,kBAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,UAAU,EAAE,CAAC,UAAC,OAAY,IAAK,OAAA,uCAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,IAAG,OAAO,EAAE,CAAO,EAAlD,CAAkD,CAAC;IAClF,SAAS,EAAE,iBAAO;CACnB,CAAA;AAEM,IAAM,OAAO,GAAG;IACrB,IAAM,YAAY,GAAG,IAAA,oBAAU,GAAE,CAAA;IACjC,IAAM,UAAU,GAAG,gBAAgB,CACjC,YAAY,CAAC,UAAU,CAAC,WAAW,EACnC,YAAY,CAAC,UAAU,CAAC,YAAY,EACpC,YAAY,CAAC,MAAM,CAAC,WAAW,CAChC,CAAA;IAED,OAAO,CACL,8BAAC,iBAAO,IACN,EAAE,EAAC,YAAY,EACf,UAAU,EAAE;YACV,OAAO,EAAE,YAAY,CAAC,UAAU,CAAC,YAAY;YAC7C,UAAU,EAAE,YAAY,CAAC,UAAU,CAAC,eAAe;YACnD,WAAW,EAAE,YAAY,CAAC,UAAU,CAAC,WAAW;YAChD,cAAc,EAAE,YAAY,CAAC,UAAU,CAAC,cAAc;SACvD,EACD,MAAM,EAAE;YACN,OAAO,EAAE,kBAAkB;YAC3B,eAAe,EAAE,aAAa;SAC/B,EACD,IAAI,EAAE;YACJ,KAAK,EAAE,UAAU;YACjB,OAAO,EAAE,KAAK;YACd,UAAU,EAAE,eAAe,CAAC,MAAM;YAClC,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,MAAM,GAAG,YAAY,CAAC,UAAU,CAAC,YAAY,CAAC;SACrF,EACD,MAAM,EAAE;YACN,SAAS,EAAE,YAAY,CAAC,MAAM,CAAC,cAAc;SAC9C,EACD,IAAI,EAAE;YACJ,OAAO,EAAE,YAAY,CAAC,IAAI,CAAC,cAAc;SAC1C,EACD,aAAa,EAAE,uCAAK,SAAS,EAAC,UAAU,oBAAoB,GAC5D,CACH,CAAA;AACH,CAAC,CAAA;AApCY,QAAA,OAAO,WAoCnB"}

package/dist/src/tables/CategoryTable.d.ts

@@ -0,0 +1,13 @@
+import { StackedTableProps } from "./StackedTable";
+export interface CategoryTableSection {
+    /** The header text for a category */
+    header: string;
+    /** The table data for a category */
+    tableData: StackedTableProps;
+}
+export interface CategoryTableProps {
+    /** The table data passed as category section strings associated with a table data set */
+    categoryData: CategoryTableSection[];
+}
+declare const CategoryTable: (props: CategoryTableProps) => JSX.Element;
+export { CategoryTable as default, CategoryTable };