@licklist/design 0.66.11 → 0.66.12-dev.0

package/dist/table/PaginationHelperComponent.js

@@ -1 +1,119 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),n=e(t),r=require("react-i18next"),a=require("react-bootstrap"),l=require("../static/Icon.js"),i=e(require("clsx"));require("../static/index.js");var o=require("react-bootstrap/PageItem"),c=e(o),u=e(require("@licklist/plugins/dist/services/Table/PaginationService"));exports.PaginationHelperComponent=function(e){var s=e.paginator,m=e.onPageChangeFn,d=e.displayShowingSection,b=void 0===d||d,g=r.useTranslation(["Table"]).t,f=t.useMemo((function(){return new u(s)}),[s]),p=t.useCallback((function(e){m&&m(e)}),[m]),E=t.useCallback((function(){return n.createElement("div",{className:"pt-1"},g("Table:showing")," ",null==s?void 0:s.from," ",g("Table:to")," ",null==s?void 0:s.to," ",g("Table:of")," ",null==s?void 0:s.total," ",g("Table:entries"))}),[s,g]),v=t.useCallback((function(){return n.createElement(a.Pagination,null,n.createElement("button",{type:"button",disabled:!f.hasPrevPage(),className:"border-0",onClick:function(){return p(f.getPrevPage())}},n.createElement(l.default,{type:"arrow-left",width:"0.9rem",color:"black"})),f.getElements().map((function(e){return"string"==typeof e?n.createElement(o.Ellipsis,{disabled:!0,key:e}):n.createElement(c,{key:e,active:e===f.getCurrentPage(),onClick:function(){return p(e)}},n.createElement("span",null,e))})),n.createElement("button",{type:"button",disabled:!f.hasNextPage(),className:"border-0",onClick:function(){return p(f.getNextPage())}},n.createElement(l.default,{type:"arrow-right",width:"0.9rem",color:"black"})))}),[p,f]);return s&&f.hasPages()?n.createElement(a.Row,null,b&&n.createElement(a.Col,null,E()),n.createElement(a.Col,{className:i(!b&&"d-flex justify-content-center")},1!==s.last_page&&v())):n.createElement(n.Fragment,null)};
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useMemo, useCallback } from 'react';
+import { Pagination, Row, Col } from 'react-bootstrap';
+import PageItem, { Ellipsis } from 'react-bootstrap/PageItem';
+import { useTranslation } from 'react-i18next';
+import PaginationService from '@licklist/plugins/dist/services/Table/PaginationService';
+import clsx from 'clsx';
+import { FaArrowLeft, FaArrowRight } from 'react-icons/fa';
+
+/**
+ * PaginationHelperComponent
+ * @param props
+ * @constructor
+ */ function PaginationHelperComponent(param) {
+    var paginator = param.paginator, onPageChangeFn = param.onPageChangeFn, _param_displayShowingSection = param.displayShowingSection, displayShowingSection = _param_displayShowingSection === void 0 ? true : _param_displayShowingSection;
+    var t = useTranslation([
+        "Table"
+    ]).t;
+    var paginationService = useMemo(function() {
+        return new PaginationService(paginator);
+    }, [
+        paginator
+    ]);
+    var onPageChange = useCallback(function(page) {
+        if (onPageChangeFn) {
+            onPageChangeFn(page);
+        }
+    }, [
+        onPageChangeFn
+    ]);
+    var renderShowingSection = useCallback(function() {
+        return /*#__PURE__*/ jsxs("div", {
+            className: "pt-1",
+            children: [
+                t("Table:showing"),
+                " ",
+                paginator === null || paginator === void 0 ? void 0 : paginator.from,
+                " ",
+                t("Table:to"),
+                " ",
+                paginator === null || paginator === void 0 ? void 0 : paginator.to,
+                " ",
+                t("Table:of"),
+                " ",
+                paginator === null || paginator === void 0 ? void 0 : paginator.total,
+                " ",
+                t("Table:entries")
+            ]
+        });
+    }, [
+        paginator,
+        t
+    ]);
+    var renderPaginationSection = useCallback(function() {
+        return /*#__PURE__*/ jsxs(Pagination, {
+            children: [
+                /*#__PURE__*/ jsx("button", {
+                    type: "button",
+                    disabled: !paginationService.hasPrevPage(),
+                    className: "border-0",
+                    onClick: function() {
+                        return onPageChange(paginationService.getPrevPage());
+                    },
+                    children: /*#__PURE__*/ jsx(FaArrowLeft, {
+                        size: 14,
+                        color: "black"
+                    })
+                }),
+                paginationService.getElements().map(function(element) {
+                    if (typeof element === "string") {
+                        return /*#__PURE__*/ jsx(Ellipsis, {
+                            disabled: true
+                        }, element);
+                    }
+                    return /*#__PURE__*/ jsx(PageItem, {
+                        active: element === paginationService.getCurrentPage(),
+                        onClick: function() {
+                            return onPageChange(element);
+                        },
+                        children: /*#__PURE__*/ jsx("span", {
+                            children: element
+                        })
+                    }, element);
+                }),
+                /*#__PURE__*/ jsx("button", {
+                    type: "button",
+                    disabled: !paginationService.hasNextPage(),
+                    className: "border-0",
+                    onClick: function() {
+                        return onPageChange(paginationService.getNextPage());
+                    },
+                    children: /*#__PURE__*/ jsx(FaArrowRight, {
+                        size: 14,
+                        color: "black"
+                    })
+                })
+            ]
+        });
+    }, [
+        onPageChange,
+        paginationService
+    ]);
+    if (!paginator || !paginationService.hasPages()) {
+        return /*#__PURE__*/ jsx(Fragment, {});
+    }
+    return /*#__PURE__*/ jsxs(Row, {
+        children: [
+            displayShowingSection && /*#__PURE__*/ jsx(Col, {
+                children: renderShowingSection()
+            }),
+            /*#__PURE__*/ jsx(Col, {
+                className: clsx(!displayShowingSection && "d-flex justify-content-center"),
+                children: paginator.last_page !== 1 && renderPaginationSection()
+            })
+        ]
+    });
+}
+
+export { PaginationHelperComponent };

package/dist/table/PerPageHelperComponent.d.ts

@@ -1,13 +1,12 @@
-/// <reference types="react" />
-export interface PerPageHelperComponentProps {
-    defaultValue?: number;
-    onChangeFn?: (value: number) => void;
-}
-/**
- * PerPageHelperComponent
- * @param props
- * @constructor
- */
-declare function PerPageHelperComponent(props: PerPageHelperComponentProps): JSX.Element;
-export { PerPageHelperComponent };
+export interface PerPageHelperComponentProps {
+    defaultValue?: number;
+    onChangeFn?: (value: number) => void;
+}
+/**
+ * PerPageHelperComponent
+ * @param props
+ * @constructor
+ */
+declare function PerPageHelperComponent(props: PerPageHelperComponentProps): import("react/jsx-runtime").JSX.Element;
+export { PerPageHelperComponent };
 //# sourceMappingURL=PerPageHelperComponent.d.ts.map

package/dist/table/PerPageHelperComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PerPageHelperComponent.d.ts","sourceRoot":"","sources":["../../src/table/PerPageHelperComponent.tsx"],"names":[],"mappings":";AAGA,MAAM,WAAW,2BAA2B;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED;;;;GAIG;AACH,iBAAS,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,eAoCjE;AAED,OAAO,EAAE,sBAAsB,EAAE,CAAC"}
+{"version":3,"file":"PerPageHelperComponent.d.ts","sourceRoot":"","sources":["../../src/table/PerPageHelperComponent.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,2BAA2B;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED;;;;GAIG;AACH,iBAAS,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,2CAoCjE;AAED,OAAO,EAAE,sBAAsB,EAAE,CAAC"}

package/dist/table/PerPageHelperComponent.js

@@ -1 +1,96 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var r=require("tslib"),t=require("react"),a=e(t),n=e(require("@licklist/plugins/dist/services/Table/TableService"));exports.PerPageHelperComponent=function(e){var l=e.defaultValue,u=e.onChangeFn,o=r.__read(t.useState(null!=l?l:24),2),c=o[0],i=o[1];return a.createElement(a.Fragment,null,a.createElement("div",{className:"per-page"},a.createElement("label",{htmlFor:"per-page"},"Show"," ",a.createElement("select",{id:"per-page",name:"per_page",className:"form-control form-control-sm per-page-control",value:c,onChange:function(e){var r=e.target.value;i((function(){return Number(r)})),u&&u(Number(r))}},n.PER_PAGE_OPTIONS.map((function(e){return a.createElement("option",{value:e,key:e},e)})))," ","entries")))};
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useState } from 'react';
+import TableService from '@licklist/plugins/dist/services/Table/TableService';
+
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+/**
+ * PerPageHelperComponent
+ * @param props
+ * @constructor
+ */ function PerPageHelperComponent(props) {
+    var defaultValue = props.defaultValue, onChangeFn = props.onChangeFn;
+    var _useState = _sliced_to_array(useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : 24), 2), item = _useState[0], setItem = _useState[1];
+    var onChange = function(event) {
+        var value = event.target.value;
+        setItem(function() {
+            return Number(value);
+        });
+        if (onChangeFn) {
+            onChangeFn(Number(value));
+        }
+    };
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsx("div", {
+            className: "per-page",
+            children: /*#__PURE__*/ jsxs("label", {
+                htmlFor: "per-page",
+                children: [
+                    "Show",
+                    " ",
+                    /*#__PURE__*/ jsx("select", {
+                        id: "per-page",
+                        name: "per_page",
+                        className: "form-control form-control-sm per-page-control",
+                        value: item,
+                        onChange: onChange,
+                        children: TableService.PER_PAGE_OPTIONS.map(function(variant) {
+                            return /*#__PURE__*/ jsx("option", {
+                                value: variant,
+                                children: variant
+                            }, variant);
+                        })
+                    }),
+                    " ",
+                    "entries"
+                ]
+            })
+        })
+    });
+}
+
+export { PerPageHelperComponent };

package/dist/table/ReactTableHelperComponent.d.ts

@@ -1,12 +1,12 @@
-import { Ref, ReactElement } from "react";
-import { TableComponentProps, TableComponentPropsWithOldTableData, TableComponentPropsWithReactTableData, ExtendedTableOptions } from "./types";
-export type { ReactTableHelperRow } from "./types";
-export type ReactTableHelperComponentProps<T extends object> = TableComponentProps<T> & (TableComponentPropsWithOldTableData<T> | TableComponentPropsWithReactTableData<T>);
-export type ReactTableHelperComponentRef = {
-    options: ExtendedTableOptions | null;
-};
-declare const ReactTableHelperComponent: <T extends object>(props: ReactTableHelperComponentProps<T> & {
-    ref?: Ref<ReactTableHelperComponentRef>;
-}) => ReactElement;
-export { ReactTableHelperComponent };
+import { Ref, ReactElement } from "react";
+import { TableComponentProps, TableComponentPropsWithOldTableData, TableComponentPropsWithReactTableData, ExtendedTableOptions } from "./types";
+export type { ReactTableHelperRow } from "./types";
+export type ReactTableHelperComponentProps<T extends object> = TableComponentProps<T> & (TableComponentPropsWithOldTableData<T> | TableComponentPropsWithReactTableData<T>);
+export type ReactTableHelperComponentRef = {
+    options: ExtendedTableOptions | null;
+};
+declare const ReactTableHelperComponent: <T extends object>(props: ReactTableHelperComponentProps<T> & {
+    ref?: Ref<ReactTableHelperComponentRef>;
+}) => ReactElement;
+export { ReactTableHelperComponent };
 //# sourceMappingURL=ReactTableHelperComponent.d.ts.map

package/dist/table/ReactTableHelperComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReactTableHelperComponent.d.ts","sourceRoot":"","sources":["../../src/table/ReactTableHelperComponent.tsx"],"names":[],"mappings":"AAAA,OAAc,EAKZ,GAAG,EACH,YAAY,EACb,MAAM,OAAO,CAAC;AAiBf,OAAO,EACL,mBAAmB,EACnB,mCAAmC,EACnC,qCAAqC,EAErC,oBAAoB,EACrB,MAAM,SAAS,CAAC;AAGjB,YAAY,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAEnD,MAAM,MAAM,8BAA8B,CAAC,CAAC,SAAS,MAAM,IACzD,mBAAmB,CAAC,CAAC,CAAC,GACpB,CACI,mCAAmC,CAAC,CAAC,CAAC,GACtC,qCAAqC,CAAC,CAAC,CAAC,CAC3C,CAAC;AAEN,MAAM,MAAM,4BAA4B,GAAG;IACzC,OAAO,EAAE,oBAAoB,GAAG,IAAI,CAAC;CACtC,CAAC;AA4QF,QAAA,MAAM,yBAAyB;UAIrB,IAAI,4BAA4B,CAAC;MAEtC,YAAY,CAAC;AAElB,OAAO,EAAE,yBAAyB,EAAE,CAAC"}
+{"version":3,"file":"ReactTableHelperComponent.d.ts","sourceRoot":"","sources":["../../src/table/ReactTableHelperComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,GAAG,EACH,YAAY,EACb,MAAM,OAAO,CAAC;AAiBf,OAAO,EACL,mBAAmB,EACnB,mCAAmC,EACnC,qCAAqC,EAErC,oBAAoB,EACrB,MAAM,SAAS,CAAC;AAGjB,YAAY,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAEnD,MAAM,MAAM,8BAA8B,CAAC,CAAC,SAAS,MAAM,IACzD,mBAAmB,CAAC,CAAC,CAAC,GACpB,CACI,mCAAmC,CAAC,CAAC,CAAC,GACtC,qCAAqC,CAAC,CAAC,CAAC,CAC3C,CAAC;AAEN,MAAM,MAAM,4BAA4B,GAAG;IACzC,OAAO,EAAE,oBAAoB,GAAG,IAAI,CAAC;CACtC,CAAC;AA4QF,QAAA,MAAM,yBAAyB,EAE1B,CAAC,CAAgB,SAAN,MAAM,EACpB,KAAK,EAAE,8BAA8B,CAAC,CAAC,CAAC,GAAG;IACzC,GAAG,CAAC,EAAE,GAAG,CAAC,4BAA4B,CAAC,CAAC;CACzC,KACE,YAAY,CAAC;AAElB,OAAO,EAAE,yBAAyB,EAAE,CAAC"}

package/dist/table/ReactTableHelperComponent.js

@@ -1 +1,325 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("tslib"),r=require("react"),n=e(r),i=require("react-router-dom"),a=e(require("@licklist/plugins/dist/services/Route/RouteService")),o=require("../static/loader/LoaderIndicator.js"),s=require("react-bootstrap"),l=e(require("clsx")),u=require("lodash"),c=require("./FilterHelperComponent.js"),d=require("./PaginationHelperComponent.js"),p=e(require("@licklist/plugins/dist/services/Table/TableService")),m=require("./PerPageHelperComponent.js"),g=require("@tanstack/react-table");require("./utils/index.js");var f=require("./hooks/useTableQueryOptions.js");var _=r.forwardRef((function(e,_){var v,C,y=e.paginator,h=e.headers,E=e.renderItemFn,b=e.isLoading,S=e.striped,q=void 0===S||S,w=e.bordered,R=void 0===w||w,P=e.displaySearchBar,k=void 0===P||P,F=e.displayPerPageSelect,H=void 0===F||F,T=e.displayShowingSection,x=void 0===T||T,L=e.externalFilters,D=void 0===L?{}:L,O=e.initialOptions,j=void 0===O?{}:O,N=e.columns,I=e.sortableColumns,K=void 0===I?[]:I,M=e.renderRow,A=t.__rest(e,["paginator","headers","renderItemFn","isLoading","striped","bordered","displaySearchBar","displayPerPageSelect","displayShowingSection","externalFilters","initialOptions","columns","sortableColumns","renderRow"]),U=i.useLocation().pathname,B=f.useTableQueryOptions({initialOptions:j,externalFilters:D}),G=B.sortKey,Q=B.sortDirection,V=B.options,z=B.setOptions,J=B.optionsCache,W=B.setOptionsCache,X=B.cachedExternalFilters,Y=B.setCachedExternalFilters,Z=r.useMemo((function(){return N||h?N&&!h?N.map((function(e){var r=e.accessorKey,n=K.includes(r);return t.__assign(t.__assign({},e),{meta:{className:p.getHeaderClasses({isSortable:n,key:r,title:r},G,Q),onClick:n?function(){return re(r)}:void 0}})})):h.map((function(e){return"string"==typeof e?{accessorKey:e.toLowerCase(),header:function(){return e},meta:{className:p.getHeaderClasses(e,G,Q)}}:{accessorKey:(null==e?void 0:e.key)||e.title.toLowerCase(),header:function(){return e.title},meta:{onClick:function(){return e.isSortable&&re(e.key)},className:p.getHeaderClasses(e,G,Q),style:{width:(null==e?void 0:e.width)||"auto"}}}})):[]}),[h,N,G,Q,K]),$=g.useReactTable(t.__assign({data:(null==y?void 0:y.data)||[],columns:Z,getCoreRowModel:g.getCoreRowModel()},A)),ee=$.getHeaderGroups,te=$.getRowModel;r.useImperativeHandle(_,(function(){return{options:V}})),r.useEffect((function(){if(!u.isEqual(J,V)||!u.isEqual(X,D)){W(V),Y(D);var e=new URLSearchParams(t.__assign(t.__assign({},V),D));a.redirectTo([U,e.toString()].join("?"))}}),[U,V,D]);var re=function(e){var r=p.DEFAULT_SORT_DIRECTION;z(G===e?function(n){return r=p.getSortDirection(n.sortDirection,r),t.__assign(t.__assign({},n),{sortKey:e,sortDirection:r})}:function(n){return t.__assign(t.__assign({},n),{sortKey:e,sortDirection:r})})};return n.createElement("div",{className:l("table-helper",b?"py-5":"py-1")},n.createElement(o.LoaderIndicator,{isLoaded:!b},n.createElement(s.Row,null,n.createElement(s.Col,null,H&&n.createElement(m.PerPageHelperComponent,{onChangeFn:function(e){z((function(r){return t.__assign(t.__assign({},r),{perPage:e})}))},defaultValue:null!==(v=null==y?void 0:y.per_page)&&void 0!==v?v:p.DEFAULT_PER_PAGE})),n.createElement(s.Col,null,k&&n.createElement(c.FilterHelperComponent,{onClickFn:function(e){z((function(r){var n=r.page,i=t.__rest(r,["page"]),a=n;return(!e&&i.filter||e&&!i.filter)&&(a=1),t.__assign(t.__assign({},i),{page:a,filter:e})}))},defaultValue:null!==(C=V.filter)&&void 0!==C?C:""}))),n.createElement(s.Row,null,n.createElement(s.Col,null,n.createElement("div",{className:"table-responsive"},n.createElement(s.Table,{striped:q,bordered:R,hover:!0},n.createElement("thead",null,ee().map((function(e){return n.createElement("tr",{key:e.id},e.headers.map((function(e){var t=e.column.columnDef.meta;return n.createElement("th",{key:e.id,className:null==t?void 0:t.className,onClick:null==t?void 0:t.onClick,style:null==t?void 0:t.style},g.flexRender(e.column.columnDef.header,e.getContext()))})))}))),n.createElement("tbody",null,te().rows.map((function(e,t){return E?E(e.original,t):M(e)}))))))),n.createElement(d.PaginationHelperComponent,{displayShowingSection:x,paginator:y,onPageChangeFn:function(e){z((function(r){return t.__assign(t.__assign({},r),{page:e})}))}})))}));exports.ReactTableHelperComponent=_;
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useMemo, useImperativeHandle, useEffect } from 'react';
+import { Row, Col, Table } from 'react-bootstrap';
+import { useLocation } from 'react-router-dom';
+import { isEqual } from 'lodash';
+import clsx from 'clsx';
+import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
+import RouteService from '@licklist/plugins/dist/services/Route/RouteService';
+import TableService from '@licklist/plugins/dist/services/Table/TableService';
+import { LoaderIndicator } from '../static/loader/LoaderIndicator.js';
+import { FilterHelperComponent } from './FilterHelperComponent.js';
+import { PaginationHelperComponent } from './PaginationHelperComponent.js';
+import { PerPageHelperComponent } from './PerPageHelperComponent.js';
+import './utils/index.js';
+import { useTableQueryOptions } from './hooks/useTableQueryOptions.js';
+
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+/**
+ * ReactTableHelperComponent
+ * simple table with our backend realization
+ * and pagination.
+ * @param props
+ * @constructor
+ */ function WrappedReactTableHelperComponent(props, ref) {
+    var paginator = props.paginator, headers = props.headers, renderItemFn = props.renderItemFn, isLoading = props.isLoading, _props_striped = props.striped, striped = _props_striped === void 0 ? true : _props_striped, _props_bordered = props.bordered, bordered = _props_bordered === void 0 ? true : _props_bordered, _props_displaySearchBar = props.displaySearchBar, displaySearchBar = _props_displaySearchBar === void 0 ? true : _props_displaySearchBar, _props_displayPerPageSelect = props.displayPerPageSelect, displayPerPageSelect = _props_displayPerPageSelect === void 0 ? true : _props_displayPerPageSelect, _props_displayShowingSection = props.displayShowingSection, displayShowingSection = _props_displayShowingSection === void 0 ? true : _props_displayShowingSection, _props_externalFilters = props.externalFilters, externalFilters = _props_externalFilters === void 0 ? {} : _props_externalFilters, _props_initialOptions = props.initialOptions, initialOptions = _props_initialOptions === void 0 ? {} : _props_initialOptions, columns = props.columns, _props_sortableColumns = props.sortableColumns, sortableColumns = _props_sortableColumns === void 0 ? [] : _props_sortableColumns, renderRow = props.renderRow, tableProps = _object_without_properties(props, [
+        "paginator",
+        "headers",
+        "renderItemFn",
+        "isLoading",
+        "striped",
+        "bordered",
+        "displaySearchBar",
+        "displayPerPageSelect",
+        "displayShowingSection",
+        "externalFilters",
+        "initialOptions",
+        "columns",
+        "sortableColumns",
+        "renderRow"
+    ]);
+    var pathname = useLocation().pathname;
+    var _useTableQueryOptions = useTableQueryOptions({
+        initialOptions: initialOptions,
+        externalFilters: externalFilters
+    }), sortKey = _useTableQueryOptions.sortKey, sortDirection = _useTableQueryOptions.sortDirection, options = _useTableQueryOptions.options, setOptions = _useTableQueryOptions.setOptions, optionsCache = _useTableQueryOptions.optionsCache, setOptionsCache = _useTableQueryOptions.setOptionsCache, cachedExternalFilters = _useTableQueryOptions.cachedExternalFilters, setCachedExternalFilters = _useTableQueryOptions.setCachedExternalFilters;
+    var tableColumns = useMemo(function() {
+        if (!columns && !headers) return [];
+        if (columns && !headers) {
+            return columns.map(function(column) {
+                var accessorKey = column.accessorKey;
+                var isSortable = sortableColumns.includes(accessorKey);
+                return _object_spread_props(_object_spread({}, column), {
+                    meta: {
+                        className: TableService.getHeaderClasses({
+                            isSortable: isSortable,
+                            key: accessorKey,
+                            title: accessorKey
+                        }, sortKey, sortDirection),
+                        onClick: isSortable ? function() {
+                            return onSort(accessorKey);
+                        } : undefined
+                    }
+                });
+            });
+        }
+        return headers.map(function(header) {
+            if (typeof header === "string") {
+                return {
+                    accessorKey: header.toLowerCase(),
+                    header: function() {
+                        return header;
+                    },
+                    meta: {
+                        className: TableService.getHeaderClasses(header, sortKey, sortDirection)
+                    }
+                };
+            }
+            return {
+                accessorKey: (header === null || header === void 0 ? void 0 : header.key) || header.title.toLowerCase(),
+                header: function() {
+                    return header.title;
+                },
+                meta: {
+                    onClick: function() {
+                        return header.isSortable && onSort(header.key);
+                    },
+                    className: TableService.getHeaderClasses(header, sortKey, sortDirection),
+                    style: {
+                        width: (header === null || header === void 0 ? void 0 : header.width) || "auto"
+                    }
+                }
+            };
+        });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        headers,
+        columns,
+        sortKey,
+        sortDirection,
+        sortableColumns
+    ]);
+    var _useReactTable = useReactTable(_object_spread({
+        data: (paginator === null || paginator === void 0 ? void 0 : paginator.data) || [],
+        columns: tableColumns,
+        getCoreRowModel: getCoreRowModel()
+    }, tableProps)), getHeaderGroups = _useReactTable.getHeaderGroups, getRowModel = _useReactTable.getRowModel;
+    useImperativeHandle(ref, function() {
+        return {
+            options: options
+        };
+    });
+    // Redirect to the URL with a new parameters
+    // ONLY: if any option or external filters has changed
+    useEffect(function() {
+        if (isEqual(optionsCache, options) && isEqual(cachedExternalFilters, externalFilters)) return;
+        setOptionsCache(options);
+        setCachedExternalFilters(externalFilters);
+        var nextUrlSearchParams = new URLSearchParams(_object_spread({}, options, externalFilters));
+        RouteService.redirectTo([
+            pathname,
+            nextUrlSearchParams.toString()
+        ].join("?"));
+    }, // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+        pathname,
+        options,
+        externalFilters
+    ]);
+    var onSort = function(key) {
+        var nextDirection = TableService.DEFAULT_SORT_DIRECTION;
+        if (sortKey === key) {
+            setOptions(function(prevOptions) {
+                nextDirection = TableService.getSortDirection(prevOptions.sortDirection, nextDirection);
+                return _object_spread_props(_object_spread({}, prevOptions), {
+                    sortKey: key,
+                    sortDirection: nextDirection
+                });
+            });
+        } else {
+            setOptions(function(prevOptions) {
+                return _object_spread_props(_object_spread({}, prevOptions), {
+                    sortKey: key,
+                    sortDirection: nextDirection
+                });
+            });
+        }
+    };
+    var onPerPageChange = function(nextPerPage) {
+        setOptions(function(prevOptions) {
+            return _object_spread_props(_object_spread({}, prevOptions), {
+                perPage: nextPerPage
+            });
+        });
+    };
+    var onPageChange = function(nextPage) {
+        setOptions(function(prevOptions) {
+            return _object_spread_props(_object_spread({}, prevOptions), {
+                page: nextPage
+            });
+        });
+    };
+    var onFilterChange = function(nextFilter) {
+        setOptions(function(_param) {
+            var prevPage = _param.page, prevOptions = _object_without_properties(_param, [
+                "page"
+            ]);
+            var nextPage = prevPage;
+            if (!nextFilter && prevOptions.filter || nextFilter && !prevOptions.filter) {
+                nextPage = 1;
+            }
+            return _object_spread_props(_object_spread({}, prevOptions), {
+                page: nextPage,
+                filter: nextFilter
+            });
+        });
+    };
+    var _paginator_per_page, _options_filter;
+    return /*#__PURE__*/ jsx("div", {
+        className: clsx("table-helper", isLoading ? "py-5" : "py-1"),
+        children: /*#__PURE__*/ jsxs(LoaderIndicator, {
+            isLoaded: !isLoading,
+            children: [
+                /*#__PURE__*/ jsxs(Row, {
+                    children: [
+                        /*#__PURE__*/ jsx(Col, {
+                            children: displayPerPageSelect && /*#__PURE__*/ jsx(PerPageHelperComponent, {
+                                onChangeFn: onPerPageChange,
+                                defaultValue: (_paginator_per_page = paginator === null || paginator === void 0 ? void 0 : paginator.per_page) !== null && _paginator_per_page !== void 0 ? _paginator_per_page : TableService.DEFAULT_PER_PAGE
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(Col, {
+                            children: displaySearchBar && /*#__PURE__*/ jsx(FilterHelperComponent, {
+                                onClickFn: onFilterChange,
+                                defaultValue: (_options_filter = options.filter) !== null && _options_filter !== void 0 ? _options_filter : ""
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx(Row, {
+                    children: /*#__PURE__*/ jsx(Col, {
+                        children: /*#__PURE__*/ jsx("div", {
+                            className: "table-responsive",
+                            children: /*#__PURE__*/ jsxs(Table, {
+                                striped: striped,
+                                bordered: bordered,
+                                hover: true,
+                                children: [
+                                    /*#__PURE__*/ jsx("thead", {
+                                        children: getHeaderGroups().map(function(headerGroup) {
+                                            return /*#__PURE__*/ jsx("tr", {
+                                                children: headerGroup.headers.map(function(header) {
+                                                    var headerMeta = header.column.columnDef.meta;
+                                                    return /*#__PURE__*/ jsx("th", {
+                                                        className: headerMeta === null || headerMeta === void 0 ? void 0 : headerMeta.className,
+                                                        onClick: headerMeta === null || headerMeta === void 0 ? void 0 : headerMeta.onClick,
+                                                        style: headerMeta === null || headerMeta === void 0 ? void 0 : headerMeta.style,
+                                                        children: flexRender(header.column.columnDef.header, header.getContext())
+                                                    }, header.id);
+                                                })
+                                            }, headerGroup.id);
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx("tbody", {
+                                        children: getRowModel().rows.map(function(row, index) {
+                                            if (renderItemFn) {
+                                                return renderItemFn(row.original, index);
+                                            }
+                                            return renderRow(row);
+                                        })
+                                    })
+                                ]
+                            })
+                        })
+                    })
+                }),
+                /*#__PURE__*/ jsx(PaginationHelperComponent, {
+                    displayShowingSection: displayShowingSection,
+                    paginator: paginator,
+                    onPageChangeFn: onPageChange
+                })
+            ]
+        })
+    });
+}
+var ReactTableHelperComponent = /*#__PURE__*/ forwardRef(WrappedReactTableHelperComponent);
+
+export { ReactTableHelperComponent };

package/dist/table/StaticTable.d.ts

@@ -1,23 +1,23 @@
-import { ReactNode } from "react";
-export interface StaticTableColumn {
-    key: string | number;
-    label: ReactNode;
-}
-export interface StaticTableData {
-    key: string | number;
-    [key: string]: ReactNode;
-}
-export interface StaticTableProps {
-    className?: string;
-    columns: StaticTableColumn[];
-    data: StaticTableData[] | any[];
-    striped?: boolean;
-    bordered?: boolean;
-    hover?: boolean;
-    size?: string;
-    displayHeader?: boolean;
-    renderItemFn?: (data?: any) => ReactNode;
-    isSingleRowForKey?: boolean;
-}
-export declare function StaticTable({ data, columns, className, striped, bordered, hover, size, displayHeader, isSingleRowForKey, renderItemFn, }: StaticTableProps): JSX.Element;
+import { ReactNode } from "react";
+export interface StaticTableColumn {
+    key: string | number;
+    label: ReactNode;
+}
+export interface StaticTableData {
+    key: string | number;
+    [key: string]: ReactNode;
+}
+export interface StaticTableProps {
+    className?: string;
+    columns: StaticTableColumn[];
+    data: StaticTableData[] | any[];
+    striped?: boolean;
+    bordered?: boolean;
+    hover?: boolean;
+    size?: string;
+    displayHeader?: boolean;
+    renderItemFn?: (data?: any) => ReactNode;
+    isSingleRowForKey?: boolean;
+}
+export declare function StaticTable({ data, columns, className, striped, bordered, hover, size, displayHeader, isSingleRowForKey, renderItemFn, }: StaticTableProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=StaticTable.d.ts.map