@atom-learning/components 2.5.1 → 2.6.0

package/CHANGELOG.md

@@ -1,9 +1,32 @@
-## [2.5.1](https://github.com/Atom-Learning/components/compare/v2.5.0...v2.5.1) (2022-09-29)
+# [2.6.0](https://github.com/Atom-Learning/components/compare/v2.5.1...v2.6.0) (2022-09-29)
 
 
 ### Bug Fixes
 
-* **select-field:** adding hide label prop to select field ([aa41880](https://github.com/Atom-Learning/components/commit/aa41880d431f657b307a05edc41f615b74dc76b2))
+* don't overwrite table components -n ([73aaf20](https://github.com/Atom-Learning/components/commit/73aaf20af1606be94cf7655683179307da935805))
+* eslint-disable for fragment that eslint doesn't realise is v important ([a9bf934](https://github.com/Atom-Learning/components/commit/a9bf934d6e35fa7ebf729f758bb573f0efd8bb43))
+* gloabal -> global typo ([1bfd9a7](https://github.com/Atom-Learning/components/commit/1bfd9a7fa2973074d46e00fe0aed3a817ab95d0a))
+* import types explicitly ([c21af6e](https://github.com/Atom-Learning/components/commit/c21af6eaa5ad3a4ae31c8d2428319baa7b61d3ee))
+* pagination select value ([81f6730](https://github.com/Atom-Learning/components/commit/81f6730aa3c265db0934599c1029fd575539969a))
+* stop sort icons jumping around ([7cbef51](https://github.com/Atom-Learning/components/commit/7cbef513576c68e96d0c0f049585dca5b67e6f8d))
+* stop sort icons jumping around ([b43f29b](https://github.com/Atom-Learning/components/commit/b43f29b9031192f778c14c6b32c076a561fa5c8b))
+
+
+### Features
+
+* add global search ([d69f9ae](https://github.com/Atom-Learning/components/commit/d69f9ae90496d575f0b9922ab9c0c465a46f2d3a))
+* configurable page size for Pagination component ([5389854](https://github.com/Atom-Learning/components/commit/5389854364db990cddc6bae4bb9d88a693c24368))
+* configurable page size for Pagination component ([6f345a9](https://github.com/Atom-Learning/components/commit/6f345a9550acef42e2e2b47b9e078e84aa3d3c2a))
+* datatable tests ([30ecbe8](https://github.com/Atom-Learning/components/commit/30ecbe8de6f7584aa82ea5a8b28ea5d95ef9cdf0))
+* datatable tests ([2548b8a](https://github.com/Atom-Learning/components/commit/2548b8aadb525ca6645f58f7b5eccfe06dd3aca7))
+* initial datatable tests ([2e277b8](https://github.com/Atom-Learning/components/commit/2e277b8d9b8440e783ec7344b5449474572e66c3))
+* move sortable state to provider ([8ec8f9d](https://github.com/Atom-Learning/components/commit/8ec8f9d673e465973022980ab6415dc41c5ea2da))
+* renaming, some doc comments ([086df58](https://github.com/Atom-Learning/components/commit/086df58eae2563fd1dd71b7eb1c35647a94b32e5))
+* snapshot test ([1845725](https://github.com/Atom-Learning/components/commit/1845725cd5c267bb6525b20c68518a2de7728f60))
+* update sorting API ([24369e1](https://github.com/Atom-Learning/components/commit/24369e128f4ffe5878a5c74dcf3e369eceeea418))
+* update sorting API again ([7e7b2d4](https://github.com/Atom-Learning/components/commit/7e7b2d49a937f48c1334bd4c4f1b59ba5217b532))
+* wip docs ([6d2ce65](https://github.com/Atom-Learning/components/commit/6d2ce657d761c1c744d8dda5dff1fe9bd81a5381))
+* working Pagination component, wip context setup ([e6ac621](https://github.com/Atom-Learning/components/commit/e6ac62155459bfe4ded60869ac535e0b31b42e24))
 
 # [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
 

package/dist/components/data-table/DataTable.d.ts

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { DataTableBody } from './DataTableBody';
+import { DataTableDataCell } from './DataTableDataCell';
+import { DataTableProvider } from './DataTableContext';
+import { DataTableHead } from './DataTableHead';
+import { DataTableHeaderCell } from './DataTableHeaderCell';
+import { DataTableRow } from './DataTableRow';
+import { DataTableGlobalFilter } from './DataTableGlobalFilter';
+import { DataTableTable } from './DataTableTable';
+import { Pagination } from './pagination';
+declare type TDataTable = React.FC<React.ComponentProps<typeof DataTableProvider>> & {
+    /** Default table body implementation for `DataTable`.
+     *
+     * Can be configured with alternating colours of rows. If you need more customisation options,
+     * you can build your own implementation with `useDataTable()` and the UI-only `Table` components.
+     */
+    Body: typeof DataTableBody;
+    /** Default table data cell implementation for `DataTable`
+     *
+     *
+     */
+    DataCell: typeof DataTableDataCell;
+    /** Default global search implementation for `DataTable`
+     *
+     * If you need more customisation options, you can compose your own implementation with our UI-only input components and `useDataTable`.
+     */
+    GlobalFilter: typeof DataTableGlobalFilter;
+    /** Default table head implementation
+     *
+     * Can be configured to be sortable and with different visual themes.
+     * If you need more customisation options, you can build your own implementation
+     * with `useDataTable` and the UI-only `Table` components.
+     */
+    Head: typeof DataTableHead;
+    /** Default header implementation for `DataTable`
+     *
+     * Can be configured to make the column sortable. If you need more customisation options,
+     * you can build your own implementation with the UI-only `Table` components.
+     */
+    HeaderCell: typeof DataTableHeaderCell;
+    /** Default pagination implementation for `DataTable`
+     *
+     * Can navigate forward, backward, or to any specific page. If you need more customisation options,
+     * you can build your own implementation with `useDataTable` and other UI components.
+     *
+     */
+    Pagination: typeof Pagination;
+    /** Default row implementation for `DataTable`
+     *
+     * Renders all visible cells as `Table.Cell`. If you need more customisation options,
+     * you can build your own implementation with the UI-only `Table` components.
+     */
+    Row: typeof DataTableRow;
+    /** Default table implementation for `DataTable`.
+     *
+     * Can be configured with sortable columns and different visual themes.
+     *
+     * If you need more customisation options, you can compose your own implementation with
+     * lower-level `DataTable` components or build the whole thing from
+     * scratch with `useDataTable` and the UI-only `Table` components.
+     *
+     */
+    Table: typeof DataTableTable;
+};
+/** Context provider for DataTable state and logic.
+ *
+ * Children can call `useDataTable` to access everything provided by `@tanstack/react-table` plus
+ * the functionality we've built on top.
+ */
+export declare const DataTable: TDataTable;
+export {};

package/dist/components/data-table/DataTable.js

@@ -0,0 +1 @@
+import*as e from"react";import{DataTableBody as t}from"./DataTableBody.js";import{DataTableDataCell as r}from"./DataTableDataCell.js";import{DataTableProvider as l}from"./DataTableContext.js";import{DataTableHead as m}from"./DataTableHead.js";import{DataTableHeaderCell as i}from"./DataTableHeaderCell.js";import{DataTableRow as b}from"./DataTableRow.js";import{DataTableGlobalFilter as p}from"./DataTableGlobalFilter.js";import{DataTableTable as D}from"./DataTableTable.js";import{Pagination as T}from"./pagination/Pagination.js";const a=o=>e.createElement(l,{...o});a.Body=t,a.DataCell=r,a.Head=m,a.HeaderCell=i,a.Pagination=T,a.Row=b,a.GlobalFilter=p,a.Table=D;export{a as DataTable};

package/dist/components/data-table/DataTableBody.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { Table } from '../table';
+declare type DataTableBodyProps = Omit<React.ComponentProps<typeof Table.Body>, 'children'>;
+export declare const DataTableBody: React.FC<DataTableBodyProps>;
+export {};

package/dist/components/data-table/DataTableBody.js

@@ -0,0 +1 @@
+import*as o from"react";import{Table as m}from"../table/Table.js";import{useDataTable as p}from"./DataTableContext.js";import{DataTable as i}from"./DataTable.js";const l=({striped:r=!1,...t})=>{const{getRowModel:a}=p();return o.createElement(m.Body,{...t,striped:r},a().rows.map(e=>o.createElement(i.Row,{row:e,key:e.id})))};export{l as DataTableBody};

package/dist/components/data-table/DataTableContext.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { Table } from '@tanstack/react-table';
+declare type DataTableContextType<T = unknown> = Table<T> & {
+    setIsSortable: React.Dispatch<React.SetStateAction<boolean>>;
+    applyPagination: () => void;
+    getTotalRows: () => number;
+    isSortable: boolean;
+};
+declare type TableProviderProps = {
+    columns: any;
+    data: Array<Record<string, unknown>>;
+    defaultSort?: {
+        column: string;
+        direction: 'asc' | 'desc';
+    };
+    children: React.ReactNode;
+};
+export declare const DataTableProvider: ({ columns, data, defaultSort, children }: TableProviderProps) => JSX.Element;
+export declare const useDataTable: <T extends Record<string, unknown>>() => DataTableContextType<T>;
+export {};

package/dist/components/data-table/DataTableContext.js

@@ -0,0 +1 @@
+import*as e from"react";import{useReactTable as R,getCoreRowModel as M,getPaginationRowModel as S,getSortedRowModel as T,getFilteredRowModel as p}from"@tanstack/react-table";const s=e.createContext(null),v=({columns:t,data:l,defaultSort:o,children:g})=>{const[u,c]=e.useState(!1),[a,w]=e.useState(!1),[r,b]=e.useState(o?[{id:o.column,desc:o.direction==="desc"}]:[]),n=e.useCallback(()=>{c(!0)},[]),d=()=>l.length,i=R({columns:t,data:l,getCoreRowModel:M(),getPaginationRowModel:u?S():void 0,getSortedRowModel:a||r.length?T():void 0,state:{sorting:r},onSortingChange:b,getFilteredRowModel:p()}),m=e.useMemo(()=>({...i,setIsSortable:w,applyPagination:n,getTotalRows:d,isSortable:a}),[i,n,d,a]);return e.createElement(s.Provider,{value:m},g)},C=()=>{const t=e.useContext(s);if(!t)throw new Error("useDataTable can only be called from inside a DataTableProvider");return t};export{v as DataTableProvider,C as useDataTable};

package/dist/components/data-table/DataTableDataCell.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import type { Cell } from '@tanstack/react-table';
+declare type DataTableDataCellProps = {
+    cell: Cell<Record<string, unknown>, unknown>;
+};
+export declare const DataTableDataCell: React.FC<DataTableDataCellProps>;
+export {};

package/dist/components/data-table/DataTableDataCell.js

@@ -0,0 +1 @@
+import*as l from"react";import{Table as o}from"../table/Table.js";import{flexRender as t}from"@tanstack/react-table";const m=({cell:e})=>l.createElement(o.Cell,{key:e.id},t(e.column.columnDef.cell,e.getContext()));export{m as DataTableDataCell};

package/dist/components/data-table/DataTableGlobalFilter.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { SearchInput } from '../search-input';
+declare type DataTableSearchProps = React.ComponentProps<typeof SearchInput> & {
+    label: string;
+    hideLabel?: boolean;
+};
+export declare const DataTableGlobalFilter: React.FC<DataTableSearchProps>;
+export {};

package/dist/components/data-table/DataTableGlobalFilter.js

@@ -0,0 +1 @@
+import*as e from"react";import{debounce as p}from"throttle-debounce";import{SearchInput as s}from"../search-input/SearchInput.js";import{useDataTable as u}from"./DataTableContext.js";import{Label as d}from"../label/Label.js";import{OptionallyVisuallyHiddenContainer as f}from"../../utilities/optionally-visually-hidden-container/OptionallyVisuallyHiddenContainer.js";const g=({onChange:l,label:t,hideLabel:r=!1,...n})=>{const{setGlobalFilter:o,getState:m}=u(),{globalFilter:i}=m(),b=p(250,a=>{const{target:{value:c}}=a;l==null||l(a),o(c)});return e.createElement(e.Fragment,null,e.createElement(f,{hidden:r},e.createElement(d,{css:{mb:"$3"},htmlFor:t},t)),e.createElement(s,{...n,value:i,onChange:b,name:t}))};export{g as DataTableGlobalFilter};

package/dist/components/data-table/DataTableHead.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { Table } from '../table';
+declare type DataTableHeadProps = Omit<React.ComponentProps<typeof Table.Header>, 'children'> & {
+    sortable?: boolean;
+};
+export declare const DataTableHead: React.FC<DataTableHeadProps>;
+export {};

package/dist/components/data-table/DataTableHead.js

@@ -0,0 +1 @@
+import*as e from"react";import{Table as o}from"../table/Table.js";import{useDataTable as p}from"./DataTableContext.js";import{DataTable as b}from"./DataTable.js";const i=({sortable:t=!0,theme:l="light",...s})=>{const{getHeaderGroups:d,setIsSortable:a}=p();return e.useEffect(()=>{a(t)},[t,a]),e.createElement(o.Header,{theme:l,...s},d().map(r=>e.createElement(o.Row,{key:r.id},r.headers.map(m=>e.createElement(b.HeaderCell,{header:m,key:m.id})))))};export{i as DataTableHead};

package/dist/components/data-table/DataTableHeaderCell.d.ts

@@ -0,0 +1,8 @@
+import type { Header } from '@tanstack/react-table';
+import * as React from 'react';
+import { Table } from '../table';
+declare type DataTableHeaderProps = React.ComponentProps<typeof Table.HeaderCell> & {
+    header: Header<Record<string, unknown>, unknown>;
+};
+export declare const DataTableHeaderCell: React.FC<DataTableHeaderProps>;
+export {};

package/dist/components/data-table/DataTableHeaderCell.js

@@ -0,0 +1 @@
+import{flexRender as s}from"@tanstack/react-table";import*as t from"react";import{Flex as l}from"../flex/Flex.js";import{Table as m}from"../table/Table.js";import{Icon as a}from"../icon/Icon.js";import{SortUp as d,SortDown as p}from"@atom-learning/icons";import{useDataTable as f}from"./DataTableContext.js";const u={asc:d,desc:p},g=({direction:e})=>t.createElement(a,{is:u[e],size:"sm",css:{position:"absolute",left:"$1"}}),b=({header:e,children:C,css:i,...c})=>{const r=e.column.getIsSorted(),{isSortable:o}=f(),n=e.column.getCanSort();return t.createElement(m.HeaderCell,{onClick:o&&n?e.column.getToggleSortingHandler():void 0,css:{cursor:o&&n?"pointer":"initial",...i},...c},t.createElement(l,{css:{alignItems:"center"}},s(e.column.columnDef.header,e.getContext()),r&&o&&t.createElement(l,{css:{position:"relative",alignItems:"center"}},t.createElement(g,{direction:r}))))};export{b as DataTableHeaderCell};

package/dist/components/data-table/DataTableRow.d.ts

@@ -0,0 +1,8 @@
+import type { Row } from '@tanstack/react-table';
+import * as React from 'react';
+import { Table } from '../table';
+declare type DataTableRowProps = React.ComponentProps<typeof Table.Row> & {
+    row: Row<Record<string, unknown>>;
+};
+export declare const DataTableRow: React.FC<DataTableRowProps>;
+export {};

package/dist/components/data-table/DataTableRow.js

@@ -0,0 +1 @@
+import*as l from"react";import{Table as t}from"../table/Table.js";import{DataTableDataCell as o}from"./DataTableDataCell.js";const r=({row:a})=>l.createElement(t.Row,null,a.getVisibleCells().map(e=>l.createElement(o,{key:e.id,cell:e})));export{r as DataTableRow};

package/dist/components/data-table/DataTableTable.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { Table } from '../table';
+import { DataTable } from './DataTable';
+declare type DataTableTableProps = Omit<React.ComponentProps<typeof Table>, 'children'> & Partial<Pick<React.ComponentProps<typeof DataTable.Head>, 'theme' | 'sortable'>> & Partial<Pick<React.ComponentProps<typeof Table.Body>, 'striped'>>;
+export declare const DataTableTable: React.FC<DataTableTableProps>;
+export {};

package/dist/components/data-table/DataTableTable.js

@@ -0,0 +1 @@
+import*as e from"react";import{Table as l}from"../table/Table.js";import{DataTable as t}from"./DataTable.js";const b=({sortable:a,striped:r,theme:o,...m})=>e.createElement(l,{...m},e.createElement(t.Head,{theme:o,sortable:a}),e.createElement(t.Body,{striped:r}));export{b as DataTableTable};

package/dist/components/data-table/index.d.ts

@@ -0,0 +1,2 @@
+export { useDataTable } from './DataTableContext';
+export { DataTable } from './DataTable';

package/dist/components/data-table/pagination/Pagination.d.ts

@@ -0,0 +1,273 @@
+import * as React from 'react';
+declare const StyledNav: import("@stitches/react/types/styled-component").StyledComponent<"nav", {}, {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    reducedMotion: string;
+    allowMotion: string;
+    hover: string;
+}, import("@stitches/react/types/css-util").CSS<{
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    reducedMotion: string;
+    allowMotion: string;
+    hover: string;
+}, {
+    colors: {
+        textForeground: any;
+        textSubtle: any;
+        textPlaceholder: any;
+        background: any;
+        backgroundAccent: any;
+        tonal50: any;
+        tonal100: any;
+        tonal200: any;
+        tonal300: any;
+        tonal400: any;
+        tonal500: any;
+        tonal600: any;
+        alpha100: any;
+        alpha150: any;
+        alpha200: any;
+        alpha250: any;
+        alpha600: any;
+        primaryLight: any;
+        primary: any;
+        primaryMid: any;
+        primaryDark: any;
+        secondary: any;
+        brandRed: any;
+        brandRedAccent: any;
+        brandGreen: any;
+        brandGreenAccent: any;
+        brandPurple: any;
+        brandPurpleAccent: any;
+        brandYellow: any;
+        brandYellowAccent: any;
+        successLight: any;
+        success: any;
+        successMid: any;
+        successDark: any;
+        dangerLight: any;
+        danger: any;
+        dangerMid: any;
+        dangerDark: any;
+        warningLight: any;
+        warning: any;
+        warningMid: any;
+        warningDark: any;
+        warningText: any;
+        subjectEnglish: any;
+        subjectMaths: any;
+        subjectScience: any;
+        subjectVerbalReasoning: any;
+        subjectNonVerbalReasoning: any;
+        subjectCreativeWriting: any;
+        subjectExamSkills: any;
+    };
+    space: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+        "4": any;
+        "5": any;
+        "6": any;
+        "7": any;
+        "8": any;
+        "9": any;
+    };
+    fontSizes: {
+        xs: any;
+        sm: any;
+        md: any;
+        lg: any;
+        xl: any;
+        "2xl": any;
+        "3xl": any;
+        "4xl": any;
+    };
+    fonts: {
+        sans: any;
+        mono: any;
+        display: any;
+        body: any;
+    };
+    sizes: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+        "4": any;
+        "5": any;
+        "6": any;
+        "7": any;
+        "8": any;
+    };
+    radii: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+        round: any;
+    };
+    shadows: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+    };
+}, import("@stitches/react/types/config").DefaultThemeMap, {
+    bg: (value: {
+        readonly [$$PropertyValue]: "background";
+    }) => {
+        background: {
+            readonly [$$PropertyValue]: "background";
+        };
+    };
+    inset: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        top: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        right: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        bottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        left: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    size: (value: string | number | {
+        readonly [$$ScaleValue]: "size";
+    }) => {
+        height: string | number | {
+            readonly [$$ScaleValue]: "size";
+        };
+        width: string | number | {
+            readonly [$$ScaleValue]: "size";
+        };
+    };
+    p: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        padding: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pl: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    px: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    py: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    m: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        margin: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    ml: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mx: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    my: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+}>>;
+declare type PaginationProps = React.ComponentProps<typeof StyledNav> & {
+    pageSize?: number;
+};
+/** Applies pagination to parent DataTableProvider and renders UI to switch pages etc */
+export declare const Pagination: React.FC<PaginationProps>;
+export {};

package/dist/components/data-table/pagination/Pagination.js

@@ -0,0 +1 @@
+import*as e from"react";import{styled as u}from"../../../stitches.js";import{useDataTable as P}from"../DataTableContext.js";import{GotoPageSelect as E,DirectionButton as s}from"./PaginationButtons.js";import{Flex as I}from"../../flex/Flex.js";import{Text as S}from"../../text/Text.js";const C=u("nav",{display:"flex",justifyContent:"space-between",alignItems:"center"}),y=({pageSize:n=10,...g})=>{const{applyPagination:o,getState:c,getRowModel:l,getPageCount:a,previousPage:m,nextPage:p,setPageIndex:d,setPageSize:i,getTotalRows:f}=P();e.useEffect(()=>{o()},[o]),e.useEffect(()=>{i(n)},[i,n]);const{pagination:t}=c(),r=t.pageIndex*t.pageSize+1,x=r+l().rows.length-1;return e.createElement(C,{...g},e.createElement(S,{size:"sm"},`${r.toString()} - ${x.toString()} of ${f()} items`),e.createElement(E,{gotoPage:d,pageCount:a(),pageIndex:t.pageIndex}),e.createElement(I,{css:{justifyContent:"flex-end"}},e.createElement(s,{direction:"previous",disabled:t.pageIndex===0,onClick:m,css:{mr:"$4"}}),e.createElement(s,{direction:"next",disabled:t.pageIndex===a()-1,onClick:p})))};export{y as Pagination};

package/dist/components/data-table/pagination/PaginationButtons.d.ts

@@ -0,0 +1,21 @@
+import type { CSS } from '../../../stitches';
+import React from 'react';
+import { ActionIcon } from '../../action-icon';
+import { Icon } from '../../icon';
+export declare const DirectionButton: React.FC<{
+    css?: CSS;
+    direction: 'next' | 'previous';
+    disabled: boolean;
+    onClick: () => void;
+}>;
+export declare const GotoPageSelect: React.FC<{
+    pageIndex: number;
+    pageCount: number;
+    gotoPage: (pageNumber: number) => void;
+}>;
+declare type TooltipActionIconProps = React.ComponentProps<typeof ActionIcon> & React.ComponentProps<typeof Icon> & {
+    icon: React.FC<React.SVGProps<SVGSVGElement>>;
+    iconSize?: 'sm' | 'md' | 'lg';
+};
+export declare const TooltipActionIcon: React.FC<Omit<TooltipActionIconProps, 'children' | 'is'>>;
+export {};

package/dist/components/data-table/pagination/PaginationButtons.js

@@ -0,0 +1 @@
+import{ChevronRight as i,ChevronLeft as c}from"@atom-learning/icons";import e from"react";import{Flex as p}from"../../flex/Flex.js";import{Select as s}from"../../select/Select.js";import{Text as g}from"../../text/Text.js";import{ActionIcon as u}from"../../action-icon/ActionIcon.js";import{Icon as f}from"../../icon/Icon.js";import{Tooltip as a}from"../../tooltip/Tooltip.js";const E=({direction:n,...t})=>{const o=n==="next";return e.createElement(m,{appearance:"outline",icon:o?i:c,isRounded:!0,label:o?"Next page":"Previous page",name:o?"Next page":"Previous page",size:"md",...t})},x=({gotoPage:n,pageCount:t,pageIndex:o})=>e.createElement(p,{css:{alignItems:"center"}},e.createElement(s,{value:o,size:"sm",css:{mr:"$3"},onChange:r=>{n(Number(r.target.value))}},Array.from({length:t},(r,l)=>l).map(r=>e.createElement("option",{key:r,value:r},r+1))),e.createElement(g,{size:"sm",css:{flex:"none"}},`of ${t} ${t>1?"pages":"page"}`)),m=({icon:n,label:t,...o})=>e.createElement(a,null,e.createElement(a.Trigger,{asChild:!0},e.createElement(u,{label:t,...o},e.createElement(f,{is:n}))),e.createElement(a.Content,null,t));export{E as DirectionButton,x as GotoPageSelect,m as TooltipActionIcon};

package/dist/components/data-table/pagination/index.d.ts

@@ -0,0 +1 @@
+export { Pagination } from './Pagination';

package/dist/components/index.d.ts

@@ -13,6 +13,7 @@ export { Chip, ChipGroup } from './chip';
 export { ChipDismissibleGroup } from './chip-dismissible-group';
 export { ChipToggleGroup } from './chip-toggle-group';
 export { Combobox } from './combobox';
+export { DataTable, useDataTable } from './data-table';
 export { Dialog } from './dialog';
 export { DateInput } from './date-input';
 export { DateField } from './date-field';

package/dist/components/select/Select.js

@@ -1 +1 @@
-import*as o from"react";import{styled as d,theme as s}from"../../stitches.js";import{encodeBackgroundIcon as c}from"../../utilities/style/encode-background-icon.js";const p=d("select",{appearance:"none",backgroundColor:"white",backgroundImage:c(s.colors.tonal300.value,"chevron"),backgroundRepeat:"no-repeat, repeat",border:"1px solid $tonal300",borderRadius:"$0",color:"$tonal600",display:"block",fontFamily:"$body",fontWeight:400,lineHeight:1.4,transition:"all 75ms ease-out",width:"100%","&:hover":{cursor:"pointer"},"&:focus":{borderColor:"$primary",outline:"none"},"&::-ms-expand":{display:"none"},"&[disabled], > option[disabled]":{backgroundColor:"$tonal100",color:"$tonal400",cursor:"not-allowed"},variants:{size:{sm:{backgroundPosition:"right $space$2 top 50%, 0 0",backgroundSize:"18px auto, 100%",fontSize:"$sm",height:"$3",pl:"$2",pr:"$5"},md:{backgroundPosition:"right $space$3 top 50%, 0 0",backgroundSize:"20px auto, 100%",fontSize:"$md",height:"$4",pl:"$3",pr:"$6"}},state:{error:{border:"1px solid $danger"}}}}),t=o.forwardRef(({placeholder:r,children:n,size:l="md",...e},i)=>{const a={size:l,ref:i,...e};return!e.value&&!e.defaultValue&&(a.defaultValue=""),o.createElement(p,{...a},r&&o.createElement("option",{disabled:!0,hidden:!0,value:""},r),n)});t.displayName="Select";export{t as Select};
+import*as e from"react";import{styled as s,theme as c}from"../../stitches.js";import{encodeBackgroundIcon as p}from"../../utilities/style/encode-background-icon.js";const u=s("select",{appearance:"none",backgroundColor:"white",backgroundImage:p(c.colors.tonal300.value,"chevron"),backgroundRepeat:"no-repeat, repeat",border:"1px solid $tonal300",borderRadius:"$0",color:"$tonal600",display:"block",fontFamily:"$body",fontWeight:400,lineHeight:1.4,transition:"all 75ms ease-out",width:"100%","&:hover":{cursor:"pointer"},"&:focus":{borderColor:"$primary",outline:"none"},"&::-ms-expand":{display:"none"},"&[disabled], > option[disabled]":{backgroundColor:"$tonal100",color:"$tonal400",cursor:"not-allowed"},variants:{size:{sm:{backgroundPosition:"right $space$2 top 50%, 0 0",backgroundSize:"18px auto, 100%",fontSize:"$sm",height:"$3",pl:"$2",pr:"$5"},md:{backgroundPosition:"right $space$3 top 50%, 0 0",backgroundSize:"20px auto, 100%",fontSize:"$md",height:"$4",pl:"$3",pr:"$6"}},state:{error:{border:"1px solid $danger"}}}}),t=e.forwardRef(({placeholder:r,children:n,size:l="md",...o},i)=>{const a={size:l,ref:i,...o};return[o.value,o.defaultValue].every(d=>d===void 0)&&(a.defaultValue=""),e.createElement(u,{...a},r&&e.createElement("option",{disabled:!0,hidden:!0,value:""},r),n)});t.displayName="Select";export{t as Select};

package/dist/components/table/TableHeader.d.ts

@@ -1,6 +1,11 @@
 import React from 'react';
+export declare const TABLE_HEADER_THEMES: {
+    PRIMARY: string;
+    PRIMARY_DARK: string;
+    LIGHT: string;
+};
 declare const StyledTableHeader: import("@stitches/react/types/styled-component").StyledComponent<"thead", {
-    theme?: "primary" | "primaryDark" | "light" | undefined;
+    theme?: string | number | `${number}` | undefined;
 }, {
     sm: string;
     md: string;

package/dist/components/table/TableHeader.js

@@ -1 +1 @@
-import m from"react";import{styled as l}from"../../stitches.js";import{TableHeaderCell as r}from"./TableHeaderCell.js";const o=l("thead",{variants:{theme:{primary:{[`${r}`]:{bg:"$primary"}},primaryDark:{[`${r}`]:{bg:"$primaryDark"}},light:{[`${r}`]:{bg:"$tonal50",color:"$tonal600"}}}}}),e=({theme:a="primaryDark",...t})=>m.createElement(o,{theme:a,...t});e.displayName="TableHeader";export{e as TableHeader};
+import o from"react";import{styled as l}from"../../stitches.js";import{TableHeaderCell as e}from"./TableHeaderCell.js";const r={PRIMARY:"primary",PRIMARY_DARK:"primaryDark",LIGHT:"light"},i=l("thead",{variants:{theme:{[r.PRIMARY]:{[`${e}`]:{bg:"$primary"}},[r.PRIMARY_DARK]:{[`${e}`]:{bg:"$primaryDark"}},[r.LIGHT]:{[`${e}`]:{bg:"$tonal50",color:"$tonal600"}}}}}),a=({theme:t="primaryDark",...m})=>o.createElement(i,{theme:t,...m});a.displayName="TableHeader";export{r as TABLE_HEADER_THEMES,a as TableHeader};