@tedi-design-system/react 14.0.0-rc.1

package/src/community/components/table/components/table-loader/table-loader.es.js

@@ -0,0 +1,16 @@
+import { jsxs as l, Fragment as m, jsx as e } from "react/jsx-runtime";
+import d from "react";
+import { PAGE_SIZE_WITHOUT_PAGINATION as s } from "../../table.es.js";
+import { TableContext as c } from "../../table-context.es.js";
+import { SkeletonBlock as p } from "../../../../../tedi/components/loaders/skeleton/skeleton-block/skeleton-block.es.js";
+const y = () => {
+  const { table: r, loadingLabel: o } = d.useContext(c), t = (r == null ? void 0 : r.getState().pagination.pageSize) || 10, a = t === s ? 10 : t;
+  return /* @__PURE__ */ l(m, { children: [
+    /* @__PURE__ */ e("tr", { className: "sr-only", children: /* @__PURE__ */ e("td", { children: o }) }),
+    Array.from(Array(a).keys()).map((n) => /* @__PURE__ */ e("tr", { "aria-hidden": !0, children: Array.from(Array(r == null ? void 0 : r.getAllColumns().length).keys()).map((i) => /* @__PURE__ */ e("td", { children: /* @__PURE__ */ e(p, { width: 100, height: 21 }) }, i)) }, n))
+  ] });
+};
+export {
+  y as TableLoader,
+  y as default
+};

package/src/community/components/table/index.d.ts

@@ -0,0 +1,5 @@
+export * from './components/customize-table-cell/customize-table-cell';
+export * from './components/helpers';
+export * from './components/table-filter/filter-fn';
+export * from './table';
+export * from './table.types';

package/src/community/components/table/table-context.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=e.createContext({isLoading:!1,isError:!1,table:null,id:"",hideRowBorder:!1});exports.TableContext=t;

package/src/community/components/table/table-context.d.ts

@@ -0,0 +1,9 @@
+import { Table as TableType } from '@tanstack/table-core';
+import React from 'react';
+import { DefaultTData, TableProps } from './table.types';
+export interface ITableContext<TData extends DefaultTData<TData>> extends Pick<TableProps<TData>, 'id' | 'isLoading' | 'isError' | 'hideRowBorder' | 'caption' | 'placeholder' | 'errorPlaceholder' | 'renderSubComponent' | 'renderGroupHeading' | 'onRowClick' | 'size'> {
+    table: TableType<TData> | null;
+    loadingLabel?: string;
+    isFooterVisible?: boolean;
+}
+export declare const TableContext: React.Context<ITableContext<any>>;

package/src/community/components/table/table-context.es.js

@@ -0,0 +1,11 @@
+import e from "react";
+const o = e.createContext({
+  isLoading: !1,
+  isError: !1,
+  table: null,
+  id: "",
+  hideRowBorder: !1
+});
+export {
+  o as TableContext
+};

package/src/community/components/table/table.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),Ze=require("../../../../external/@tanstack/react-table/build/lib/index.cjs.js"),Je=require("../../../../external/classnames/index.cjs.js"),o=require("react"),Qe=require("./components/pagination/pagination.cjs.js"),i=require("./components/table-filter/filter-fn.cjs.js"),Xe=require("./components/table-layout/table-layout.cjs.js"),u=require("./table.module.scss.cjs.js"),Ye=require("./table-context.cjs.js"),d=require("../../../../external/@tanstack/table-core/build/lib/index.cjs.js"),en=require("../../../tedi/providers/label-provider/use-labels.cjs.js"),nn=require("../../../tedi/helpers/hooks/use-print.cjs.js"),tn=require("../card/card.cjs.js"),on=require("../card/card-content/card-content.cjs.js"),J=1e4,Z=[];function Q(c){const{getLabel:y}=en.useLabels(),{id:X,data:l,columns:Y,caption:ee,columnFilters:h,onColumnFiltersChange:R,cardProps:{padding:ne=0,...te}={},hidePagination:g,defaultPagination:oe={pageIndex:0,pageSize:g?J:10},pagination:a,manualPagination:ie=!!c.pagination,manualSorting:re=!!c.sorting,manualFiltering:le=!!c.columnFilters,sorting:f,defaultSorting:ae=[],defaultExpanded:se={},autoResetPageIndex:ue,onPaginationChange:x,onSortingChange:M,rowSelection:C,onRowSelectionChange:q,enableRowSelection:de,defaultColumnVisibility:ce={},columnVisibility:w,onColumnVisibilityChange:G,columnPinning:b,onColumnPinningChange:I,getRowId:ge,onRowClick:me,defaultRowSelection:pe,totalRows:P,renderSubComponent:he,getRowCanExpand:fe,groupRowsBy:s,renderGroupHeading:Ce,isLoading:we=!1,isError:be=!1,placeholder:Pe,errorPlaceholder:Fe,loadingLabel:Se=y("table.loading"),verticalAlign:ye="middle",enableFilters:Re=!1,enableSorting:xe=!0,hideRowBorder:E=!1,size:T="medium",hideCardBorder:V,...Me}=c,m=o.useMemo(()=>(l!=null&&l.length?l:Z)??Z,[l]),O=nn.usePrint(),[{pageIndex:v,pageSize:_},qe]=o.useState(oe),[j,Ge]=o.useState(ae),[D,Ie]=o.useState(se),[K,Ee]=o.useState(pe||{}),[N,Te]=o.useState([]),[A,Ve]=o.useState(ce),[B,Oe]=o.useState({left:[],right:[]}),ve=o.useMemo(()=>O?!0:D,[D,O]),L=o.useMemo(()=>a||{pageIndex:v,pageSize:_},[v,_,a]),$=o.useMemo(()=>f||j,[j,f]),k=o.useMemo(()=>h||N,[N,h]),z=o.useMemo(()=>C||K,[K,C]),H=o.useMemo(()=>w||A,[A,w]),U=o.useMemo(()=>b||B,[B,b]),_e=n=>{if(typeof n!="function")return;const e=n(L);a&&x?x(e):qe(e)},je=n=>{if(typeof n!="function")return;const e=n($);f&&M?M(e):Ge(e)},De=n=>{if(typeof n!="function")return;const e=n(z);C&&q?q(e):Ee(e)},Ke=n=>{if(typeof n!="function")return;const e=n(k);h&&R?R(e):Te(e)},Ne=n=>{if(typeof n!="function")return;const e=n(H);w&&G?G(e):Ve(e)},Ae=n=>{if(typeof n!="function")return;const e=n(U);b&&I?I(e):Oe(e)},Be=o.useMemo(()=>{const n=(m==null?void 0:m.map(e=>typeof s=="string"?{...e,rowGroupKey:e[s]}:s?{...e,rowGroupKey:s(e)}:e))??[];return n.reduce((e,t)=>(t.rowGroupKey&&e.keys.includes(t.rowGroupKey)||(t.rowGroupKey?(e.keys=[...e.keys,t.rowGroupKey],e.list=[...e.list,...n.filter(S=>S.rowGroupKey===t.rowGroupKey)]):e.list=[...e.list,t]),e),{keys:[],list:[]}).list},[m,s]),p=Ze.useReactTable({data:Be,columns:Y,state:{rowSelection:z,columnFilters:k,pagination:L,sorting:$,expanded:ve,columnVisibility:H,columnPinning:U},manualSorting:re,manualFiltering:le,pageCount:a&&P?Math.ceil(P/a.pageSize):void 0,autoResetPageIndex:ue,onRowSelectionChange:De,enableRowSelection:de,onExpandedChange:Ie,onPaginationChange:_e,onSortingChange:je,onColumnFiltersChange:Ke,onColumnVisibilityChange:Ne,onColumnPinningChange:Ae,getCoreRowModel:d.getCoreRowModel(),getSortedRowModel:d.getSortedRowModel(),getPaginationRowModel:d.getPaginationRowModel(),getFilteredRowModel:d.getFilteredRowModel(),getExpandedRowModel:d.getExpandedRowModel(),getRowCanExpand:fe,getSubRows:n=>n.subRows,manualPagination:ie,enableFilters:Re,enableSorting:xe,getRowId:ge,filterFns:{text:(n,e,t)=>i.mapFilterFn(n,e,t,i.textFilterFn),select:(n,e,t)=>i.mapFilterFn(n,e,t,i.selectFilterFn),"multi-select":(n,e,t)=>i.mapFilterFn(n,e,t,i.multiSelectFilterFn),"date-range":(n,e,t)=>i.mapFilterFn(n,e,t,i.dateRangeFilterFn),"date-range-period":(n,e,t)=>i.mapFilterFn(n,e,t,i.dateRangePeriodFilterFn)}}),F=!!p.getFooterGroups().find(n=>!!n.headers.find(e=>e.column.columnDef.footer)),Le=!!(!V&&g&&!F),$e=!E&&F&&!g,ke=Je.default(u.default.table,u.default[`table--vertical-align-${ye}`],u.default[`table--${T}`],{[u.default["table--hidden-bottom-border"]]:Le,[u.default["table--footer-bottom-border"]]:$e}),W=(n,e)=>{const{children:t=y(`table.${n}`),isNested:S=!0,icon:ze=n==="error"?"error":void 0,cardProps:{padding:He=1,...Ue}={},...We}=e||{cardProps:{}};return{children:t,isNested:S,icon:ze,cardProps:{padding:He,...Ue},...We}};return r.jsx(Ye.TableContext.Provider,{value:{table:p,id:X,caption:ee,onRowClick:me,renderSubComponent:he,isFooterVisible:F,renderGroupHeading:Ce,placeholder:W("empty",Pe),errorPlaceholder:W("error",Fe),loadingLabel:Se,isLoading:we,isError:be,hideRowBorder:E,size:T},children:r.jsx(tn.Card,{"data-name":"table",...Me,borderless:V,padding:ne,...te,children:r.jsxs(on.CardContent,{children:[r.jsx("div",{className:ke,children:r.jsx(Xe.default,{})}),!g&&p&&r.jsx(Qe.default,{totalRows:P||p.getFilteredRowModel().rows.length})]})})})}exports.PAGE_SIZE_WITHOUT_PAGINATION=J;exports.Table=Q;exports.default=Q;

package/src/community/components/table/table.d.ts

@@ -0,0 +1,4 @@
+import { DefaultTData, TableProps } from './table.types';
+export declare const PAGE_SIZE_WITHOUT_PAGINATION = 10000;
+export declare function Table<TData extends DefaultTData<TData>>(props: TableProps<TData>): JSX.Element;
+export default Table;

package/src/community/components/table/table.es.js

@@ -0,0 +1,195 @@
+import { jsx as a, jsxs as Ue } from "react/jsx-runtime";
+import { useReactTable as We } from "../../../../external/@tanstack/react-table/build/lib/index.es.js";
+import Ze from "../../../../external/classnames/index.es.js";
+import t from "react";
+import qe from "./components/pagination/pagination.es.js";
+import { mapFilterFn as s, dateRangePeriodFilterFn as Je, dateRangeFilterFn as Qe, multiSelectFilterFn as Xe, selectFilterFn as Ye, textFilterFn as eo } from "./components/table-filter/filter-fn.es.js";
+import oo from "./components/table-layout/table-layout.es.js";
+import d from "./table.module.scss.es.js";
+import { TableContext as no } from "./table-context.es.js";
+import { getExpandedRowModel as to, getFilteredRowModel as io, getPaginationRowModel as ro, getSortedRowModel as lo, getCoreRowModel as ao } from "../../../../external/@tanstack/table-core/build/lib/index.es.js";
+import { useLabels as so } from "../../../tedi/providers/label-provider/use-labels.es.js";
+import { usePrint as uo } from "../../../tedi/helpers/hooks/use-print.es.js";
+import { Card as go } from "../card/card.es.js";
+import { CardContent as co } from "../card/card-content/card-content.es.js";
+const mo = 1e4, Z = [];
+function Eo(u) {
+  const { getLabel: y } = so(), {
+    id: q,
+    data: i,
+    columns: J,
+    caption: Q,
+    columnFilters: p,
+    onColumnFiltersChange: R,
+    cardProps: { padding: X = 0, ...Y } = {},
+    hidePagination: g,
+    defaultPagination: ee = {
+      pageIndex: 0,
+      pageSize: g ? mo : 10
+      // when pagination is hidden display all the rows
+    },
+    pagination: r,
+    manualPagination: oe = !!u.pagination,
+    manualSorting: ne = !!u.sorting,
+    manualFiltering: te = !!u.columnFilters,
+    sorting: f,
+    defaultSorting: ie = [],
+    defaultExpanded: re = {},
+    autoResetPageIndex: le,
+    onPaginationChange: F,
+    onSortingChange: M,
+    rowSelection: h,
+    onRowSelectionChange: x,
+    enableRowSelection: ae,
+    defaultColumnVisibility: se = {},
+    columnVisibility: C,
+    onColumnVisibilityChange: G,
+    columnPinning: w,
+    onColumnPinningChange: E,
+    getRowId: de,
+    onRowClick: ue,
+    defaultRowSelection: ge,
+    totalRows: P,
+    renderSubComponent: ce,
+    getRowCanExpand: me,
+    groupRowsBy: l,
+    renderGroupHeading: pe,
+    isLoading: fe = !1,
+    isError: he = !1,
+    placeholder: Ce,
+    errorPlaceholder: we,
+    loadingLabel: Pe = y("table.loading"),
+    verticalAlign: be = "middle",
+    enableFilters: Se = !1,
+    enableSorting: ye = !0,
+    hideRowBorder: V = !1,
+    size: I = "medium",
+    hideCardBorder: D,
+    ...Re
+  } = u, c = t.useMemo(() => (i != null && i.length ? i : Z) ?? Z, [i]), K = uo(), [{ pageIndex: v, pageSize: B }, Fe] = t.useState(ee), [N, Me] = t.useState(ie), [O, xe] = t.useState(re), [T, Ge] = t.useState(ge || {}), [L, Ee] = t.useState([]), [k, Ve] = t.useState(se), [_, Ie] = t.useState({
+    left: [],
+    right: []
+  }), De = t.useMemo(() => K ? !0 : O, [O, K]), z = t.useMemo(() => r || { pageIndex: v, pageSize: B }, [v, B, r]), A = t.useMemo(() => f || N, [N, f]), $ = t.useMemo(() => p || L, [L, p]), j = t.useMemo(() => h || T, [T, h]), H = t.useMemo(() => C || k, [k, C]), U = t.useMemo(() => w || _, [_, w]), Ke = (o) => {
+    if (typeof o != "function") return;
+    const e = o(z);
+    r && F ? F(e) : Fe(e);
+  }, ve = (o) => {
+    if (typeof o != "function") return;
+    const e = o(A);
+    f && M ? M(e) : Me(e);
+  }, Be = (o) => {
+    if (typeof o != "function") return;
+    const e = o(j);
+    h && x ? x(e) : Ge(e);
+  }, Ne = (o) => {
+    if (typeof o != "function") return;
+    const e = o($);
+    p && R ? R(e) : Ee(e);
+  }, Oe = (o) => {
+    if (typeof o != "function") return;
+    const e = o(H);
+    C && G ? G(e) : Ve(e);
+  }, Te = (o) => {
+    if (typeof o != "function") return;
+    const e = o(U);
+    w && E ? E(e) : Ie(e);
+  }, Le = t.useMemo(() => {
+    const o = (c == null ? void 0 : c.map((e) => typeof l == "string" ? { ...e, rowGroupKey: e[l] } : l ? { ...e, rowGroupKey: l(e) } : e)) ?? [];
+    return o.reduce(
+      (e, n) => (n.rowGroupKey && e.keys.includes(n.rowGroupKey) || (n.rowGroupKey ? (e.keys = [...e.keys, n.rowGroupKey], e.list = [...e.list, ...o.filter((S) => S.rowGroupKey === n.rowGroupKey)]) : e.list = [...e.list, n]), e),
+      { keys: [], list: [] }
+    ).list;
+  }, [c, l]), m = We({
+    data: Le,
+    columns: J,
+    state: {
+      rowSelection: j,
+      columnFilters: $,
+      pagination: z,
+      sorting: A,
+      expanded: De,
+      columnVisibility: H,
+      columnPinning: U
+    },
+    manualSorting: ne,
+    manualFiltering: te,
+    pageCount: r && P ? Math.ceil(P / r.pageSize) : void 0,
+    autoResetPageIndex: le,
+    onRowSelectionChange: Be,
+    enableRowSelection: ae,
+    onExpandedChange: xe,
+    onPaginationChange: Ke,
+    onSortingChange: ve,
+    onColumnFiltersChange: Ne,
+    onColumnVisibilityChange: Oe,
+    onColumnPinningChange: Te,
+    getCoreRowModel: ao(),
+    getSortedRowModel: lo(),
+    getPaginationRowModel: ro(),
+    getFilteredRowModel: io(),
+    getExpandedRowModel: to(),
+    getRowCanExpand: me,
+    getSubRows: (o) => o.subRows,
+    manualPagination: oe,
+    enableFilters: Se,
+    enableSorting: ye,
+    getRowId: de,
+    filterFns: {
+      text: (o, e, n) => s(o, e, n, eo),
+      select: (o, e, n) => s(o, e, n, Ye),
+      "multi-select": (o, e, n) => s(o, e, n, Xe),
+      "date-range": (o, e, n) => s(o, e, n, Qe),
+      "date-range-period": (o, e, n) => s(o, e, n, Je)
+    }
+  }), b = !!m.getFooterGroups().find(
+    (o) => !!o.headers.find((e) => e.column.columnDef.footer)
+  ), ke = !!(!D && g && !b), _e = !V && b && !g, ze = Ze(d.table, d[`table--vertical-align-${be}`], d[`table--${I}`], {
+    [d["table--hidden-bottom-border"]]: ke,
+    [d["table--footer-bottom-border"]]: _e
+  }), W = (o, e) => {
+    const {
+      children: n = y(`table.${o}`),
+      isNested: S = !0,
+      icon: Ae = o === "error" ? "error" : void 0,
+      cardProps: { padding: $e = 1, ...je } = {},
+      ...He
+    } = e || { cardProps: {} };
+    return {
+      children: n,
+      isNested: S,
+      icon: Ae,
+      cardProps: { padding: $e, ...je },
+      ...He
+    };
+  };
+  return /* @__PURE__ */ a(
+    no.Provider,
+    {
+      value: {
+        table: m,
+        id: q,
+        caption: Q,
+        onRowClick: ue,
+        renderSubComponent: ce,
+        isFooterVisible: b,
+        renderGroupHeading: pe,
+        placeholder: W("empty", Ce),
+        errorPlaceholder: W("error", we),
+        loadingLabel: Pe,
+        isLoading: fe,
+        isError: he,
+        hideRowBorder: V,
+        size: I
+      },
+      children: /* @__PURE__ */ a(go, { "data-name": "table", ...Re, borderless: D, padding: X, ...Y, children: /* @__PURE__ */ Ue(co, { children: [
+        /* @__PURE__ */ a("div", { className: ze, children: /* @__PURE__ */ a(oo, {}) }),
+        !g && m && /* @__PURE__ */ a(qe, { totalRows: P || m.getFilteredRowModel().rows.length })
+      ] }) })
+    }
+  );
+}
+export {
+  mo as PAGE_SIZE_WITHOUT_PAGINATION,
+  Eo as Table,
+  Eo as default
+};

package/src/community/components/table/table.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t="table-95e2ce2d",e="sort__button-98f3f530",o="sort__icon-1c37fdff",_="filter__icon-a6408ada",r="table__expand-19801588",l="filter__content-e28d0f6a",i="filter__button-0c3bdad8",a="filter__indeterminate-f266331a",n={table:t,"th--sortable":"th--sortable-e9907825",sort__button:e,sort__icon:o,filter__icon:_,"sort__icon--active":"sort__icon--active-ed6767d3","filter__icon--active":"filter__icon--active-d14db408","sort__icon--asc":"sort__icon--asc-9ed20154","sort__icon--desc":"sort__icon--desc-24ef5b2b","table__row--border-hidden":"table__row--border-hidden-35904e21","table__row--clickable":"table__row--clickable-43b04ec0","table--vertical-align-base-line":"table--vertical-align-base-line-85bbb2f6","table--hidden-bottom-border":"table--hidden-bottom-border-4334c76e","table--footer-bottom-border":"table--footer-bottom-border-d33045fd","table--small":"table--small-1ae7cbce",table__expand:r,"table__row--group-header":"table__row--group-header-70657dcd","table__row--group-item":"table__row--group-item-d18f21ab","table__row--last-group-item":"table__row--last-group-item-7b3a8250",filter__content:l,filter__button:i,filter__indeterminate:a,"sticky-column":"sticky-column-c4a00eca","sticky-column--left":"sticky-column--left-4e599e4b","sticky-column--right":"sticky-column--right-3dfd1c9b"};exports.default=n;exports.filter__button=i;exports.filter__content=l;exports.filter__icon=_;exports.filter__indeterminate=a;exports.sort__button=e;exports.sort__icon=o;exports.table=t;exports.table__expand=r;

package/src/community/components/table/table.module.scss.es.js

@@ -0,0 +1,38 @@
+const t = "table-95e2ce2d", e = "sort__button-98f3f530", o = "sort__icon-1c37fdff", _ = "filter__icon-a6408ada", r = "table__expand-19801588", l = "filter__content-e28d0f6a", a = "filter__button-0c3bdad8", c = "filter__indeterminate-f266331a", i = {
+  table: t,
+  "th--sortable": "th--sortable-e9907825",
+  sort__button: e,
+  sort__icon: o,
+  filter__icon: _,
+  "sort__icon--active": "sort__icon--active-ed6767d3",
+  "filter__icon--active": "filter__icon--active-d14db408",
+  "sort__icon--asc": "sort__icon--asc-9ed20154",
+  "sort__icon--desc": "sort__icon--desc-24ef5b2b",
+  "table__row--border-hidden": "table__row--border-hidden-35904e21",
+  "table__row--clickable": "table__row--clickable-43b04ec0",
+  "table--vertical-align-base-line": "table--vertical-align-base-line-85bbb2f6",
+  "table--hidden-bottom-border": "table--hidden-bottom-border-4334c76e",
+  "table--footer-bottom-border": "table--footer-bottom-border-d33045fd",
+  "table--small": "table--small-1ae7cbce",
+  table__expand: r,
+  "table__row--group-header": "table__row--group-header-70657dcd",
+  "table__row--group-item": "table__row--group-item-d18f21ab",
+  "table__row--last-group-item": "table__row--last-group-item-7b3a8250",
+  filter__content: l,
+  filter__button: a,
+  filter__indeterminate: c,
+  "sticky-column": "sticky-column-c4a00eca",
+  "sticky-column--left": "sticky-column--left-4e599e4b",
+  "sticky-column--right": "sticky-column--right-3dfd1c9b"
+};
+export {
+  i as default,
+  a as filter__button,
+  l as filter__content,
+  _ as filter__icon,
+  c as filter__indeterminate,
+  e as sort__button,
+  o as sort__icon,
+  t as table,
+  r as table__expand
+};

package/src/community/components/table/table.types.d.ts

@@ -0,0 +1,288 @@
+import { ColumnDef, ColumnFiltersState, ColumnPinningState, ExpandedState, FilterFn, PaginationState, Row, RowData, RowSelectionState, SortingState, VisibilityState } from '@tanstack/react-table';
+import React from 'react';
+import { IntentionalAny } from '../../types';
+import { CardProps } from '../card';
+import { ChoiceGroupItemProps } from '../form/choice-group';
+import { PlaceholderProps } from '../placeholder/placeholder';
+import { PickerOverridableProps } from './components/table-filter/components/table-date-filter';
+declare module '@tanstack/table-core' {
+    interface FilterFns {
+        /**
+         * To filter out from text
+         */
+        text: FilterFn<unknown>;
+        /**
+         * To filter out from select options
+         */
+        select: FilterFn<unknown>;
+        /**
+         * To filter out from multi-select options
+         */
+        'multi-select': FilterFn<unknown>;
+        /**
+         * To filter out from date range (to - from)
+         */
+        'date-range': FilterFn<unknown>;
+        /**
+         * To filter out period from date range (to - from)
+         */
+        'date-range-period': FilterFn<unknown>;
+    }
+}
+declare module '@tanstack/react-table' {
+    interface ColumnMeta<TData extends RowData, TValue> {
+        /**
+         * Pass your own custom filterOptions to column.meta.filterOptions to override the default values.
+         * Used only when filterFn: 'select'
+         */
+        filterOptions?: ChoiceGroupItemProps[] | string[];
+        /**
+         * Pass selection of props to the start DatePicker.
+         * Used only when filterFn: 'date-range' | 'date-range-period'
+         */
+        startDatePicker?: PickerOverridableProps;
+        /**
+         * Pass selection of props to the end DatePicker.
+         * Used only when filterFn: 'date-range' | 'date-range-period'
+         */
+        endDatePicker?: PickerOverridableProps;
+        /**
+         * Unknown parameters
+         */
+        [key: string]: IntentionalAny;
+    }
+}
+export interface DefaultTData<TData> {
+    [key: string]: IntentionalAny;
+    /**
+     * All row Subrows
+     */
+    subRows?: TData[];
+    /**
+     * Rows are grouped by this key
+     */
+    rowGroupKey?: string;
+    /**
+     * Added to Row
+     */
+    rowClassName?: string;
+    /**
+     * Custom row Component to render this row
+     */
+    CustomRowComponent?: React.ComponentType<Row<TData>>;
+    /**
+     * Called when row is clicked
+     */
+    onClick?: (row: TData) => void;
+}
+export interface TableProps<TData extends DefaultTData<TData>> {
+    /**
+     * ID of table
+     */
+    id: string;
+    /**
+     * Default table data.
+     * Should be memoized array
+     * @default []
+     */
+    data: TData[];
+    /**
+     * Column object created with columnHelper
+     * https://tanstack.com/table/v8/docs/guide/column-defs
+     */
+    columns: ColumnDef<TData, IntentionalAny>[];
+    /**
+     * Table title for screen-readers
+     */
+    caption?: string;
+    /**
+     * Additional classname
+     */
+    className?: string;
+    /**
+     * Hide pagination
+     */
+    hidePagination?: boolean;
+    /**
+     * Card props
+     */
+    cardProps?: CardProps;
+    /**
+     * If internal pagination logic is ignored. If true, then pagination must be handled in the app.
+     * If omitted, then the value is inherited from `!!pagination` prop.
+     */
+    manualPagination?: boolean;
+    /**
+     * If internal sorting logic is ignored. If true, then sorting must be handled in the app.
+     * If omitted, then the value is inherited from `!!sorting` prop.
+     */
+    manualSorting?: boolean;
+    /**
+     * If internal filtering logic is ignored. If true, then filtering must be handled in the app.
+     * If omitted, then the value is inherited from `!!columnFilters` prop.
+     */
+    manualFiltering?: boolean;
+    /**
+     * If set to true, pagination will be reset to the first page when page-altering state changes eg. data is updated, filters change, grouping changes, etc.
+     * This option defaults to false if manualPagination is set to true
+     * @default true
+     */
+    autoResetPageIndex?: boolean;
+    /**
+     * Initial internal pagination state on render. This only applies when `pagination` prop is not defined.
+     */
+    defaultPagination?: PaginationState;
+    /**
+     * Pagination data to server-side pagination use with `onPaginationChange` and `totalRows`
+     */
+    pagination?: PaginationState;
+    /**
+     * Callback on Pagination data change. Use combined with `pagination` and `totalRows` props to make server-side pagination
+     */
+    onPaginationChange?: (state: PaginationState) => void;
+    /**
+     * Initial internal sorting state on render. This only applies when `sorting` prop is not defined.
+     */
+    defaultSorting?: SortingState;
+    /**
+     * Sorting data to server-side pagination use with onSortingChange
+     */
+    sorting?: SortingState;
+    /**
+     * Callback on Sorting data change. Use combined with sorting prop to make server-side sorting.
+     */
+    onSortingChange?: (state: SortingState) => void;
+    /**
+     * Sorting data to server-side pagination use with `onColumnFiltersChange`
+     */
+    columnFilters?: ColumnFiltersState;
+    /**
+     * Callback on Sorting data change. Use combined with `columnFilters` prop to make server-side sorting.
+     */
+    onColumnFiltersChange?: (state: ColumnFiltersState) => void;
+    /**
+     * Default selected rows
+     */
+    defaultRowSelection?: RowSelectionState;
+    /**
+     * Row selection data use with `onRowSelectionChange`.
+     */
+    rowSelection?: RowSelectionState;
+    /**
+     * Callback on row selection data change
+     */
+    onRowSelectionChange?: (state: RowSelectionState) => void;
+    /**
+     * Enables/disables row selection for all rows in the table OR
+     * A function that given a row, returns whether to enable/disable row selection for that row
+     */
+    enableRowSelection?: boolean | ((row: Row<TData>) => boolean);
+    /**
+     * Initial internal columnVisibility state on render. This only applies when `columnVisibility` prop is not defined.
+     */
+    defaultColumnVisibility?: VisibilityState;
+    /**
+     * ColumnVisibility state, use with onColumnVisbilityChange
+     */
+    columnVisibility?: VisibilityState;
+    /**
+     * Callback on column visibility change. Use combined with `columnVisibility` prop to hide/show columns.
+     */
+    onColumnVisibilityChange?: (state: VisibilityState) => void;
+    /**
+     * Column pinning state, used to stick columns to the left or right side of the table
+     */
+    columnPinning?: ColumnPinningState;
+    /**
+     * Callback on column pinning change
+     */
+    onColumnPinningChange?: (state: ColumnPinningState) => void;
+    /**
+     * Called when row is clicked
+     */
+    onRowClick?: (row: TData) => void;
+    /**
+     * This optional function is used to derive a unique ID for any given row. If not provided the rows index is used (nested rows join together with . using their grandparents' index eg. index.index.index).
+     * Its recommended to use Row ID when using row selection
+     */
+    getRowId?: (originalRow: TData, index: number, parent?: Row<TData>) => string;
+    /**
+     * TotalRows - only needed to pass when server-side pagination is used.
+     */
+    totalRows?: number;
+    /**
+     * Callback to render subComponent to expanded row.
+     * Component will be rendered inside `<tbody>` and spanned to whole row.
+     */
+    renderSubComponent?: (row: Row<TData>) => React.ReactElement;
+    /**
+     * Initial internal expanding state on render.
+     */
+    defaultExpanded?: ExpandedState;
+    /**
+     * Check if row can expand
+     */
+    getRowCanExpand?: (row: Row<TData>) => boolean;
+    /**
+     * Is the table currently loading
+     */
+    isLoading?: boolean;
+    /**
+     * Is the table currently in error state
+     * When true errorPlaceholder is displayed
+     */
+    isError?: boolean;
+    /**
+     * Props for the `<PlaceholderBlock>` that is displayed when table is empty
+     */
+    placeholder?: PlaceholderProps;
+    /**
+     * Props for the `<PlaceholderBlock>` that is displayed when table is in error state
+     */
+    errorPlaceholder?: PlaceholderProps;
+    /**
+     * Label for the table loader skeleton
+     */
+    loadingLabel?: string;
+    /**
+     * Controls cell padding to conserve space.
+     * Useful when nesting tables.
+     */
+    size?: 'small' | 'medium';
+    /**
+     * Group rows by key or comparison function that returns a group key.
+     */
+    groupRowsBy?: Extract<keyof TData, string> | ((row: TData) => string);
+    /**
+     * Callback to render row groups header.
+     * Component will be rendered inside group headers `<tr>`.
+     * If omitted, then the `rowGroupKey` (inferred from `groupRowsBy`) value is rendered by default
+     */
+    renderGroupHeading?: (row: Row<TData & Pick<DefaultTData<TData>, 'rowGroupKey'>>) => React.ReactElement;
+    /**
+     * Vertical align of columns
+     * @default 'middle
+     */
+    verticalAlign?: 'base-line' | 'middle';
+    /**
+     * Should table allow filtering columns.
+     * Defaults to false, because TableFilter is not yet final, and we cant add filtering to every table.
+     * @default false
+     */
+    enableFilters?: boolean;
+    /**
+     * Should table allow sorting columns.
+     * When false then `enableSorting` in column props are ignored
+     * @default true
+     */
+    enableSorting?: boolean;
+    /**
+     * Should show borders between rows.
+     * @default false
+     */
+    hideRowBorder?: boolean;
+    /**
+     * Should hide card border. Over-ridden with `cardProps`
+     */
+    hideCardBorder?: boolean;
+}

package/src/community/components/table-of-contents/index.d.ts

@@ -0,0 +1,2 @@
+export * from './table-of-contents';
+export type { TableOfContentsItemProps } from './table-of-contents-item';

package/src/community/components/table-of-contents/table-of-contents-item.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),q=require("../../../../external/classnames/index.cjs.js"),g=require("react"),p=require("../../../tedi/components/misc/separator/separator.cjs.js"),u=require("../icon/icon.cjs.js"),w=require("../typography/text/text.cjs.js"),_=require("./table-of-contents.cjs.js"),l=require("./table-of-contents.module.scss.cjs.js"),r=require("../../../tedi/components/layout/grid/col.cjs.js"),x=require("../../../tedi/components/layout/grid/row.cjs.js");function f(m){const{children:s,content:n,isValid:c,separator:h,hideIcon:j,id:t,handleCloseModal:i}=m,{openItems:o,showIcons:C}=g.useContext(_.TableOfContentsContext),a=q.default(l.default["table-of-contents__icon"],{[l.default["table-of-contents__icon--hidden"]]:j});return e.jsxs(e.Fragment,{children:[e.jsx(r.Col,{role:"treeitem","aria-expanded":!!(t&&(o!=null&&o.includes(t))),children:e.jsxs(x.Row,{gutter:2,children:[C&&e.jsx(e.Fragment,{children:e.jsx(r.Col,{width:"auto",children:c===!1?e.jsx(u.Icon,{className:a,name:"warning",color:"important"}):e.jsx(u.Icon,{className:a,name:"check",color:c===!0?"positive":"disabled"})})}),e.jsx(r.Col,{children:e.jsx(w.Text,{element:"div",modifiers:"break-word",children:typeof n=="function"?n==null?void 0:n({closeModal:i}):n})})]})}),t&&(o==null?void 0:o.includes(t))&&(s==null?void 0:s.map((b,d)=>e.jsx(r.Col,{children:e.jsx(x.Row,{role:"treeitem",element:"ul",gutterX:0,gutterY:2,direction:"column",className:l.default["table-of-contents__child"],children:e.jsx(f,{...b,handleCloseModal:i},`${t}-${d}`)})},`${t}-${d}`))),h&&e.jsx(r.Col,{children:e.jsx(p.Separator,{})})]})}exports.TableOfContentsItem=f;

package/src/community/components/table-of-contents/table-of-contents-item.d.ts

@@ -0,0 +1,47 @@
+import { IModalContext } from '../modal';
+export type TableOfContentsItemConditionalTypes = {
+    /**
+     * Unique id for the item
+     */
+    id?: never;
+    /**
+     * Optional children to create a nested list
+     */
+    children?: never;
+} | {
+    /**
+     * Unique id for the item
+     */
+    id: string;
+    /**
+     * Optional children to create a nested list
+     */
+    children: TableOfContentsItemProps[];
+};
+export type TableOfContentsItemProps = TableOfContentsItemConditionalTypes & {
+    /**
+     * Content should generally use the anchor or button element
+     * For example:
+     * Link - <Anchor href="#abc">Something</Anchor>
+     * Button - <Button onClick={() => setCurrentStep(i)} />
+     * Function - Also accepts a callback that has the closeModal function as parameter
+     */
+    content: React.ReactNode | ((props: Pick<IModalContext, 'closeModal'>) => React.ReactNode);
+    /**
+     * Can contain true/false/undefined -
+     * true/false for validated fields
+     * undefined for fields that haven't been touched
+     */
+    isValid?: boolean;
+    /**
+     * Render a separator below the item
+     */
+    separator?: boolean;
+    /**
+     * Hide icon before the item
+     */
+    hideIcon?: boolean;
+};
+export declare function TableOfContentsItem(props: TableOfContentsItemProps & {
+    handleCloseModal: () => void;
+}): import("react/jsx-runtime").JSX.Element;