@atom-learning/components 4.3.1 → 4.3.2

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

@@ -0,0 +1,2 @@
+import{DataTableBody as a}from"./DataTableBody.js";import{DataTableBulkActions as o}from"./DataTableBulkActions.js";import{DataTableProvider as t}from"./DataTableContext.js";import{DataTableDataCell as e}from"./DataTableDataCell.js";import{DataTableEmptyState as r}from"./DataTableEmptyState.js";import{DataTableError as l}from"./DataTableError.js";import{DataTableGlobalFilter as m}from"./DataTableGlobalFilter.js";import{DataTableHead as i}from"./DataTableHead.js";import{DataTableHeaderCell as b}from"./DataTableHeaderCell.js";import{DataTableLoading as D}from"./DataTableLoading.js";import{DataTableMetaData as p}from"./DataTableMetaData.js";import{DataTableRow as T}from"./DataTableRow.js";import{DataTableRowSelectionCheckbox as f}from"./DataTableRowSelectionCheckbox.js";import{DataTableSelectAllRowsCheckbox as n}from"./DataTableSelectAllRowsCheckbox.js";import{DataTableTable as c}from"./DataTableTable.js";import{DragAndDropTable as d}from"./drag-and-drop/DragAndDropTable.js";import{Pagination as C}from"./pagination/Pagination.js";const g=Object.assign(t,{Body:a,DataCell:e,DragAndDropTable:d,GlobalFilter:m,Head:i,HeaderCell:b,MetaData:p,Pagination:C,Row:T,Table:c,Loading:D,Error:l,EmptyState:r,SelectAllRowsCheckbox:n,RowSelectionCheckbox:f,BulkActions:o});export{g as DataTable};
+//# sourceMappingURL=DataTable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.js","sources":["../../../src/components/data-table/DataTable.tsx"],"sourcesContent":["import { DataTableBody } from './DataTableBody'\nimport { DataTableBulkActions } from './DataTableBulkActions'\nimport { DataTableProvider } from './DataTableContext'\nimport { DataTableDataCell } from './DataTableDataCell'\nimport { DataTableEmptyState } from './DataTableEmptyState'\nimport { DataTableError } from './DataTableError'\nimport { DataTableGlobalFilter } from './DataTableGlobalFilter'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableHeaderCell } from './DataTableHeaderCell'\nimport { DataTableLoading } from './DataTableLoading'\nimport { DataTableMetaData } from './DataTableMetaData'\nimport { DataTableRow } from './DataTableRow'\nimport { DataTableRowSelectionCheckbox } from './DataTableRowSelectionCheckbox'\nimport { DataTableSelectAllRowsCheckbox } from './DataTableSelectAllRowsCheckbox'\nimport { DataTableTable } from './DataTableTable'\nimport { DragAndDropTable } from './drag-and-drop'\nimport { Pagination } from './pagination'\n\n/** Context provider for DataTable state and logic.\n *\n * Children can call `useDataTable` to access everything provided by `@tanstack/react-table` plus\n * the functionality we've built on top.\n */\nexport const DataTable = Object.assign(DataTableProvider, {\n  /** Default table body implementation for `DataTable`.\n   *\n   * Can be configured with alternating colours of rows. If you need more customisation options,\n   * you can build your own implementation with `useDataTable()` and the UI-only `Table` components.\n   */\n  Body: DataTableBody,\n\n  /** Default table data cell implementation for `DataTable`\n   *\n   *\n   */\n  DataCell: DataTableDataCell,\n\n  /**\n   * Used in place of `DataTable.Table` to render a table with rows that the user can sort by drag-and-drop\n   */\n  DragAndDropTable: DragAndDropTable,\n\n  /** Default global search implementation for `DataTable`\n   *\n   * If you need more customisation options, you can compose your own implementation with our UI-only input components and `useDataTable`.\n   */\n  GlobalFilter: DataTableGlobalFilter,\n\n  /** Default table head implementation\n   *\n   * Can be configured to be sortable and with different visual themes.\n   * If you need more customisation options, you can build your own implementation\n   * with `useDataTable` and the UI-only `Table` components.\n   */\n  Head: DataTableHead,\n\n  /** Default header implementation for `DataTable`\n   *\n   * Can be configured to make the column sortable. If you need more customisation options,\n   * you can build your own implementation with the UI-only `Table` components.\n   */\n  HeaderCell: DataTableHeaderCell,\n\n  /** Default pagination implementation for `DataTable`\n   *\n   * Can navigate forward, backward, or to any specific page. If you need more customisation options,\n   * you can build your own implementation with `useDataTable` and other UI components.\n   *\n   */\n  MetaData: DataTableMetaData,\n\n  /** Default display of amount of items and current sorting status for 'DataTable'\n   *\n   */\n  Pagination: Pagination,\n\n  /** Default row implementation for `DataTable`\n   *\n   * Renders all visible cells as `Table.Cell`. If you need more customisation options,\n   * you can build your own implementation with the UI-only `Table` components.\n   */\n  Row: DataTableRow,\n\n  /** Default table implementation for `DataTable`.\n   *\n   * Can be configured with sortable columns and different visual themes.\n   *\n   * If you need more customisation options, you can compose your own implementation with\n   * lower-level `DataTable` components or build the whole thing from\n   * scratch with `useDataTable` and the UI-only `Table` components.\n   *\n   */\n  Table: DataTableTable,\n\n  /** Default loading implementation for remote data\n   *\n   * Renders a loading component while fetching the paginated data using `getAsyncData`.\n   *\n   * If you need more customisation, you can compose your own implentation, `asyncDataState`\n   * can be retrieved from `useDataTable`\n   */\n  Loading: DataTableLoading,\n\n  /** Default error implementation for remote data\n   *\n   * Renders an error component when `getAsyncData` promise rejects.\n   * Children are rendered as a function, it exposes a `runAsyncData` function to the children component.\n   * `runAsyncData()` can be used to retry fetching the paginated data with the current pageIndex, pageSize\n   * and sorting parameters or your own custom paginated options.\n   *\n   * If you need more customisation, you can compose your own implentation, `asyncDataState` and `runAsyncData()`\n   * can be retrieved from `useDataTable`\n   *\n   */\n  Error: DataTableError,\n\n  /** Empty state implementation for `DataTable`.\n   *\n   * Extends the EmptyState component\n   */\n  EmptyState: DataTableEmptyState,\n\n  /** Empty state implementation for `DataTable`.\n   *\n   * Renders a checkbox on the header, allowing for bulk selection/deselection of all selectable rows\n   */\n  SelectAllRowsCheckbox: DataTableSelectAllRowsCheckbox,\n\n  /** Empty state implementation for `DataTable`.\n   *\n   * Renders a checkbox on the header, allowing for individual selection/deselection of any selectable row\n   */\n  RowSelectionCheckbox: DataTableRowSelectionCheckbox,\n\n  /** Empty state implementation for `DataTable`.\n   *\n   * Renders a checkbox on the header, allowing for individual selection/deselection of any selectable row\n   */\n  BulkActions: DataTableBulkActions\n})\n"],"names":["DataTable","DataTableProvider","DataTableBody","DataTableDataCell","DragAndDropTable","DataTableGlobalFilter","DataTableHead","DataTableHeaderCell","DataTableMetaData","Pagination","DataTableRow","DataTableTable","DataTableLoading","DataTableError","DataTableEmptyState","DataTableSelectAllRowsCheckbox","DataTableRowSelectionCheckbox","DataTableBulkActions"],"mappings":"mhCAuBO,MAAMA,EAAY,OAAO,OAAOC,EAAmB,CAMxD,KAAMC,EAMN,SAAUC,EAKV,iBAAkBC,EAMlB,aAAcC,EAQd,KAAMC,EAON,WAAYC,EAQZ,SAAUC,EAKV,WAAYC,EAOZ,IAAKC,EAWL,MAAOC,EASP,QAASC,EAaT,MAAOC,EAMP,WAAYC,EAMZ,sBAAuBC,EAMvB,qBAAsBC,EAMtB,YAAaC,CACf,CAAC"}

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

@@ -0,0 +1,48 @@
+import type { ColumnOrderTableState, ColumnPinningTableState, ColumnSizingTableState, ExpandedTableState, FiltersTableState, GroupingTableState, PaginationTableState, Row, RowSelectionState, RowSelectionTableState, SortDirection, SortingTableState, Table, VisibilityTableState } from '@tanstack/react-table';
+import * as React from 'react';
+export declare enum AsyncDataState {
+    NONE = "none",
+    PENDING = "pending",
+    FULFILLED = "fulfilled",
+    REJECTED = "rejected"
+}
+export type TAsyncDataResult = {
+    total: number;
+    results: TableData;
+};
+export type TAsyncDataOptions = {
+    pageIndex: number;
+    pageSize: number;
+    sortBy?: string;
+    sortDirection?: SortDirection;
+    globalFilter?: string;
+};
+export type TGetAsyncData = (options: TAsyncDataOptions) => Promise<TAsyncDataResult | undefined>;
+export type DataTableContextType<T = unknown> = Table<T> & {
+    setIsSortable: React.Dispatch<React.SetStateAction<boolean>>;
+    applyPagination: () => void;
+    getTotalRows: () => number;
+    isSortable: boolean;
+    asyncDataState?: AsyncDataState;
+    runAsyncData?: (options: Partial<TAsyncDataOptions>) => Promise<void>;
+    disabledRows?: Record<string, boolean>;
+    enableRowSelection?: boolean | ((row: Row<unknown>) => boolean);
+    rowSelection: RowSelectionState;
+    data: TAsyncDataResult;
+    columns: any;
+    tableId: string;
+    /**
+     * Directly update the data array that the table rows are built from.
+     * This is useful when re-ordering rows, but is high-risk if you're not sure what you're doing!
+     *
+     *  Note in particular that this value is also updated if you update the value of the `DataTable`'s `data` prop
+     *  — it's probably best to only use one of those two methods for any given table.
+     */
+    setData: React.Dispatch<React.SetStateAction<TAsyncDataResult>>;
+};
+export type TableData = Array<Record<string, unknown>>;
+export type InitialState = Partial<VisibilityTableState & ColumnOrderTableState & ColumnPinningTableState & FiltersTableState & SortingTableState & ExpandedTableState & GroupingTableState & ColumnSizingTableState & PaginationTableState & RowSelectionTableState>;
+export type TDefaultSort = {
+    column: string;
+    direction: SortDirection;
+};

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

@@ -0,0 +1,2 @@
+var E=(e=>(e.NONE="none",e.PENDING="pending",e.FULFILLED="fulfilled",e.REJECTED="rejected",e))(E||{});export{E as AsyncDataState};
+//# sourceMappingURL=DataTable.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.types.js","sources":["../../../src/components/data-table/DataTable.types.ts"],"sourcesContent":["import type {\n  ColumnOrderTableState,\n  ColumnPinningTableState,\n  ColumnSizingTableState,\n  ExpandedTableState,\n  FiltersTableState,\n  GroupingTableState,\n  PaginationTableState,\n  Row,\n  RowSelectionState,\n  RowSelectionTableState,\n  SortDirection,\n  SortingTableState,\n  Table,\n  VisibilityTableState\n} from '@tanstack/react-table'\nimport * as React from 'react'\nexport enum AsyncDataState {\n  NONE = 'none',\n  PENDING = 'pending',\n  FULFILLED = 'fulfilled',\n  REJECTED = 'rejected'\n}\n\nexport type TAsyncDataResult = {\n  total: number\n  results: TableData\n}\n\nexport type TAsyncDataOptions = {\n  pageIndex: number\n  pageSize: number\n  sortBy?: string\n  sortDirection?: SortDirection\n  globalFilter?: string\n}\n\nexport type TGetAsyncData = (\n  options: TAsyncDataOptions\n) => Promise<TAsyncDataResult | undefined>\n\nexport type DataTableContextType<T = unknown> = Table<T> & {\n  setIsSortable: React.Dispatch<React.SetStateAction<boolean>>\n  applyPagination: () => void\n  getTotalRows: () => number\n  isSortable: boolean\n  asyncDataState?: AsyncDataState\n  runAsyncData?: (options: Partial<TAsyncDataOptions>) => Promise<void>\n  disabledRows?: Record<string, boolean>\n  enableRowSelection?: boolean | ((row: Row<unknown>) => boolean)\n  rowSelection: RowSelectionState\n  data: TAsyncDataResult\n  columns: any\n  tableId: string\n  /**\n   * Directly update the data array that the table rows are built from.\n   * This is useful when re-ordering rows, but is high-risk if you're not sure what you're doing!\n   *\n   *  Note in particular that this value is also updated if you update the value of the `DataTable`'s `data` prop\n   *  — it's probably best to only use one of those two methods for any given table.\n   */\n  setData: React.Dispatch<React.SetStateAction<TAsyncDataResult>>\n}\n\nexport type TableData = Array<Record<string, unknown>>\n\nexport type InitialState = Partial<\n  VisibilityTableState &\n    ColumnOrderTableState &\n    ColumnPinningTableState &\n    FiltersTableState &\n    SortingTableState &\n    ExpandedTableState &\n    GroupingTableState &\n    ColumnSizingTableState &\n    PaginationTableState &\n    RowSelectionTableState\n>\n\nexport type TDefaultSort = { column: string; direction: SortDirection }\n"],"names":["AsyncDataState"],"mappings":"AAiBO,IAAKA,GAAAA,IACVA,EAAA,KAAO,OACPA,EAAA,QAAU,UACVA,EAAA,UAAY,YACZA,EAAA,SAAW,WAJDA,IAAAA,GAAA,CAAA,CAAA"}

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

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

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

@@ -0,0 +1,2 @@
+import*as r 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:t=!1,...o})=>{const{getRowModel:a}=p();return r.createElement(m.Body,{...o,striped:t},a().rows.map(e=>r.createElement(i.Row,{row:e,key:e.id})))};export{l as DataTableBody};
+//# sourceMappingURL=DataTableBody.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableBody.js","sources":["../../../src/components/data-table/DataTableBody.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Table } from '../table'\nimport { DataTable } from '.'\nimport { useDataTable } from './DataTableContext'\n\ntype DataTableBodyProps = Omit<\n  React.ComponentProps<typeof Table.Body>,\n  'children'\n>\n\nexport const DataTableBody = ({\n  striped = false,\n  ...props\n}: DataTableBodyProps) => {\n  const { getRowModel } = useDataTable()\n\n  return (\n    <Table.Body {...props} striped={striped}>\n      {getRowModel().rows.map((row) => {\n        return <DataTable.Row row={row} key={row.id} />\n      })}\n    </Table.Body>\n  )\n}\n"],"names":["DataTableBody","striped","props","getRowModel","useDataTable","React","Table","row","DataTable"],"mappings":"kKAWO,MAAMA,EAAgB,CAAC,CAC5B,QAAAC,EAAU,MACPC,CACL,IAA0B,CACxB,KAAM,CAAE,YAAAC,CAAY,EAAIC,IAExB,OACEC,EAAA,cAACC,EAAM,KAAN,CAAY,GAAGJ,EAAO,QAASD,CAC7BE,EAAAA,EAAAA,EAAc,KAAK,IAAKI,GAChBF,EAAA,cAACG,EAAU,IAAV,CAAc,IAAKD,EAAK,IAAKA,EAAI,EAAA,CAAI,CAC9C,CACH,CAEJ"}

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

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { CSS } from '../../stitches';
+declare const BulkActionsDefaultActions: ({ children }: {
+    children: React.ReactElement;
+}) => React.ReactElement | null;
+declare const BulkActionsSelectedRowActions: ({ cancelLabel, children }: {
+    cancelLabel?: string;
+    children: React.ReactNode;
+}) => React.JSX.Element | null;
+export declare const DataTableBulkActions: (({ children, ...rest }: {
+    css?: CSS;
+    children: React.ReactElement<React.ComponentProps<typeof BulkActionsDefaultActions>> | React.ReactElement<React.ComponentProps<typeof BulkActionsSelectedRowActions>> | [React.ReactElement<React.ComponentProps<typeof BulkActionsDefaultActions>>, React.ReactElement<React.ComponentProps<typeof BulkActionsSelectedRowActions>>];
+}) => React.JSX.Element) & {
+    DefaultActions: ({ children }: {
+        children: React.ReactElement;
+    }) => React.ReactElement | null;
+    SelectedRowActions: ({ cancelLabel, children }: {
+        cancelLabel?: string;
+        children: React.ReactNode;
+    }) => React.JSX.Element | null;
+};
+export {};

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

@@ -0,0 +1,2 @@
+import*as e from"react";import{Button as a}from"../button/Button.js";import{Divider as s}from"../divider/Divider.js";import{styled as m}from"../../stitches.js";import{Flex as c}from"../flex/Flex.js";import{useDataTable as o}from"./DataTableContext.js";import{DataTable as u}from"./DataTable.js";const d=m(c,{p:"$2",width:"100%",mb:"$2",justifyContent:"space-between",alignItems:"center",minHeight:"$6",borderTopLeftRadius:"$0",borderTopRightRadius:"$0",variants:{isRowSelected:{true:{bg:"$primary100"}}}}),p=({children:n})=>{const{rowSelection:t}=o();return Object.keys(t||{}).length>0?null:n},b=({cancelLabel:n="Cancel",children:t})=>{const{toggleAllPageRowsSelected:r,rowSelection:l}=o(),i=()=>r(!1);return Object.keys(l||{}).length===0?null:e.createElement(e.Fragment,null,t,e.Children.count(t)>0&&e.createElement(s,{orientation:"vertical",css:{mx:"$4"}}),e.createElement(a,{theme:"neutral",onClick:i},n))},g=Object.assign(({children:n,...t})=>{const{rowSelection:r}=o(),l=Object.keys(r||{}).length>0;return e.createElement(d,{isRowSelected:l,...t},e.createElement(u.MetaData,null),e.createElement(c,{css:{justifyContent:"flex-end",alignItems:"center"}},n))},{DefaultActions:p,SelectedRowActions:b});export{g as DataTableBulkActions};
+//# sourceMappingURL=DataTableBulkActions.js.map

package/dist/components/data-table/DataTableBulkActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableBulkActions.js","sources":["../../../src/components/data-table/DataTableBulkActions.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Button } from '~/components/button'\nimport { Divider } from '~/components/divider'\nimport { CSS, styled } from '~/stitches'\n\nimport { Flex } from '../flex'\nimport { DataTable } from '.'\nimport { useDataTable } from './DataTableContext'\n\nconst StyledContainer = styled(Flex, {\n  p: '$2',\n  width: '100%',\n  mb: '$2',\n  justifyContent: 'space-between',\n  alignItems: 'center',\n  minHeight: '$6',\n  borderTopLeftRadius: '$0',\n  borderTopRightRadius: '$0',\n  variants: {\n    isRowSelected: {\n      true: {\n        bg: '$primary100'\n      }\n    }\n  }\n})\n\nconst BulkActionsDefaultActions = ({\n  children\n}: {\n  children: React.ReactElement\n}): React.ReactElement | null => {\n  const { rowSelection } = useDataTable()\n\n  if (Object.keys(rowSelection || {}).length > 0) return null\n\n  return children\n}\n\nconst BulkActionsSelectedRowActions = ({\n  cancelLabel = 'Cancel',\n  children\n}: {\n  cancelLabel?: string\n  children: React.ReactNode\n}) => {\n  const { toggleAllPageRowsSelected, rowSelection } = useDataTable()\n\n  const handleDeselectAllPageRows = () => toggleAllPageRowsSelected(false)\n\n  if (Object.keys(rowSelection || {}).length === 0) return null\n\n  return (\n    <>\n      {children}\n      {React.Children.count(children) > 0 && (\n        <Divider orientation=\"vertical\" css={{ mx: '$4' }} />\n      )}\n      <Button theme=\"neutral\" onClick={handleDeselectAllPageRows}>\n        {cancelLabel}\n      </Button>\n    </>\n  )\n}\n\nexport const DataTableBulkActions = Object.assign(\n  ({\n    children,\n    ...rest\n  }: {\n    css?: CSS\n    children:\n      | React.ReactElement<\n          React.ComponentProps<typeof BulkActionsDefaultActions>\n        >\n      | React.ReactElement<\n          React.ComponentProps<typeof BulkActionsSelectedRowActions>\n        >\n      | [\n          React.ReactElement<\n            React.ComponentProps<typeof BulkActionsDefaultActions>\n          >,\n          React.ReactElement<\n            React.ComponentProps<typeof BulkActionsSelectedRowActions>\n          >\n        ]\n  }) => {\n    const { rowSelection } = useDataTable()\n\n    const isRowSelected = Object.keys(rowSelection || {}).length > 0\n\n    return (\n      <StyledContainer isRowSelected={isRowSelected} {...rest}>\n        <DataTable.MetaData />\n\n        <Flex css={{ justifyContent: 'flex-end', alignItems: 'center' }}>\n          {children}\n        </Flex>\n      </StyledContainer>\n    )\n  },\n  {\n    DefaultActions: BulkActionsDefaultActions,\n    SelectedRowActions: BulkActionsSelectedRowActions\n  }\n)\n"],"names":["StyledContainer","styled","Flex","BulkActionsDefaultActions","children","rowSelection","useDataTable","BulkActionsSelectedRowActions","cancelLabel","toggleAllPageRowsSelected","handleDeselectAllPageRows","React","Divider","Button","DataTableBulkActions","rest","isRowSelected","DataTable"],"mappings":"uSAUA,MAAMA,EAAkBC,EAAOC,EAAM,CACnC,EAAG,KACH,MAAO,OACP,GAAI,KACJ,eAAgB,gBAChB,WAAY,SACZ,UAAW,KACX,oBAAqB,KACrB,qBAAsB,KACtB,SAAU,CACR,cAAe,CACb,KAAM,CACJ,GAAI,aACN,CACF,CACF,CACF,CAAC,EAEKC,EAA4B,CAAC,CACjC,SAAAC,CACF,IAEiC,CAC/B,KAAM,CAAE,aAAAC,CAAa,EAAIC,IAEzB,OAAI,OAAO,KAAKD,GAAgB,CAAA,CAAE,EAAE,OAAS,EAAU,KAEhDD,CACT,EAEMG,EAAgC,CAAC,CACrC,YAAAC,EAAc,SACd,SAAAJ,CACF,IAGM,CACJ,KAAM,CAAE,0BAAAK,EAA2B,aAAAJ,CAAa,EAAIC,EAAAA,EAE9CI,EAA4B,IAAMD,EAA0B,EAAK,EAEvE,OAAI,OAAO,KAAKJ,GAAgB,CAAA,CAAE,EAAE,SAAW,EAAU,KAGvDM,EAAA,cAAAA,EAAA,SAAA,KACGP,EACAO,EAAM,SAAS,MAAMP,CAAQ,EAAI,GAChCO,EAAA,cAACC,EAAA,CAAQ,YAAY,WAAW,IAAK,CAAE,GAAI,IAAK,CAAA,CAAG,EAErDD,EAAA,cAACE,EAAA,CAAO,MAAM,UAAU,QAASH,CAC9BF,EAAAA,CACH,CACF,CAEJ,EAEaM,EAAuB,OAAO,OACzC,CAAC,CACC,SAAAV,KACGW,CACL,IAiBM,CACJ,KAAM,CAAE,aAAAV,CAAa,EAAIC,IAEnBU,EAAgB,OAAO,KAAKX,GAAgB,EAAE,EAAE,OAAS,EAE/D,OACEM,EAAA,cAACX,EAAA,CAAgB,cAAegB,EAAgB,GAAGD,CAAAA,EACjDJ,EAAA,cAACM,EAAU,SAAV,IAAmB,EAEpBN,EAAA,cAACT,EAAA,CAAK,IAAK,CAAE,eAAgB,WAAY,WAAY,QAAS,CAAA,EAC3DE,CACH,CACF,CAEJ,EACA,CACE,eAAgBD,EAChB,mBAAoBI,CACtB,CACF"}

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

@@ -0,0 +1,21 @@
+import type { OnChangeFn, Row, RowSelectionState } from '@tanstack/react-table';
+import * as React from 'react';
+import { DataTableContextType, InitialState, TableData, TDefaultSort, TGetAsyncData } from './DataTable.types';
+type DataTableProviderProps = {
+    columns: any;
+    defaultSort?: TDefaultSort;
+    children: React.ReactNode;
+    initialState?: InitialState;
+    disabledRows?: Record<string, boolean>;
+    enableRowSelection?: boolean | ((row: Row<unknown>) => boolean);
+    onRowSelectionChange?: OnChangeFn<RowSelectionState>;
+} & ({
+    data: TableData;
+    getAsyncData?: never;
+} | {
+    data?: never;
+    getAsyncData: TGetAsyncData;
+});
+export declare const DataTableProvider: ({ columns, data: dataProp, getAsyncData, defaultSort, initialState, disabledRows, enableRowSelection, onRowSelectionChange, children }: DataTableProviderProps) => JSX.Element;
+export declare const useDataTable: <T extends Record<string, unknown>>() => DataTableContextType<T>;
+export {};

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

@@ -0,0 +1,2 @@
+import{v4 as V}from"@lukeed/uuid";import{useReactTable as W,getCoreRowModel as j,getPaginationRowModel as q,getSortedRowModel as H,getFilteredRowModel as K,getExpandedRowModel as Q}from"@tanstack/react-table";import*as e from"react";import X from"use-deep-compare-effect";import{AsyncDataState as i}from"./DataTable.types.js";import{getNewAsyncData as Y}from"./getNewAsyncData.js";import{usePagination as Z}from"./usePagination.js";import{useSortByColumn as _}from"./useSorting.js";const F=e.createContext(null),$=({columns:l,data:a=[],getAsyncData:n,defaultSort:x,initialState:g=void 0,disabledRows:N,enableRowSelection:u,onRowSelectionChange:C,children:T})=>{var h;const D=e.useRef(V()),[d,c]=e.useState({results:a!=null?a:[],total:(h=a==null?void 0:a.length)!=null?h:0}),[P,I]=e.useState({}),[L,G]=e.useState({}),{isPaginated:r,applyPagination:v,paginationState:o,setPaginationState:A}=Z(g==null?void 0:g.pagination),[E,S]=e.useState(i.NONE),[w,z]=e.useState(""),{setIsSortable:k,isSortable:b,sorting:s,setSorting:J}=_(x),p=e.useCallback(async t=>{if(n)try{S(i.PENDING);const R=await Y(n,t,o,s,w);c(R),S(i.FULFILLED)}catch{S(i.REJECTED)}},[n,o==null?void 0:o.pageIndex,o==null?void 0:o.pageSize,s,w]);e.useEffect(()=>{p({})},[p]),X(()=>{!a||c({results:a,total:a.length})},[a]);const m=()=>d.total,y=W({columns:l,data:d.results,pageCount:o?Math.ceil(m()/o.pageSize):-1,initialState:g,state:{sorting:s,globalFilter:w,pagination:o,rowSelection:P,expanded:L},manualPagination:n&&r,manualSorting:n&&r,enableSorting:E!==i.PENDING,enableGlobalFilter:!n,enableRowSelection:u,onExpandedChange:G,getSubRows:t=>t.subRows,onRowSelectionChange:t=>{C&&C(t),I(t)},getCoreRowModel:j(),getPaginationRowModel:r?q():void 0,getSortedRowModel:b||s.length?H():void 0,getFilteredRowModel:K(),getExpandedRowModel:Q(),onPaginationChange:r?A:void 0,onSortingChange:J,onGlobalFilterChange:z,globalFilterFn:(t,R,B)=>{const M=U=>U.toLowerCase().includes(B.toLowerCase());if(t.depth>0)return!0;const f=t.getValue(R);switch(typeof f){case"string":return M(f);case"boolean":case"number":return M(String(f));default:return!1}}}),O=e.useMemo(()=>({...y,columns:l,data:d,setData:c,setIsSortable:k,applyPagination:v,getTotalRows:m,isSortable:b,asyncDataState:E,runAsyncData:p,disabledRows:N,enableRowSelection:u,rowSelection:P,tableId:D.current}),[y,v,m,b,u,D]);return e.createElement(F.Provider,{value:O},T)},ee=()=>{const l=e.useContext(F);if(!l)throw new Error("useDataTable can only be called from inside a DataTableProvider");return l};export{$ as DataTableProvider,ee as useDataTable};
+//# sourceMappingURL=DataTableContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableContext.js","sources":["../../../src/components/data-table/DataTableContext.tsx"],"sourcesContent":["import { v4 as uuid } from '@lukeed/uuid'\nimport type {\n  ExpandedState,\n  OnChangeFn,\n  PaginationState,\n  Row,\n  RowSelectionState\n} from '@tanstack/react-table'\nimport {\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable\n} from '@tanstack/react-table'\nimport * as React from 'react'\nimport useDeepCompareEffect from 'use-deep-compare-effect'\n\nimport {\n  AsyncDataState,\n  DataTableContextType,\n  InitialState,\n  TableData,\n  TAsyncDataOptions,\n  TAsyncDataResult,\n  TDefaultSort,\n  TGetAsyncData\n} from './DataTable.types'\nimport { getNewAsyncData } from './getNewAsyncData'\nimport { usePagination } from './usePagination'\nimport { useSortByColumn } from './useSorting'\n\nconst DataTableContext =\n  React.createContext<DataTableContextType<unknown> | null>(null)\n\ntype DataTableProviderProps = {\n  columns\n  defaultSort?: TDefaultSort\n  children: React.ReactNode\n  initialState?: InitialState\n  disabledRows?: Record<string, boolean>\n  enableRowSelection?: boolean | ((row: Row<unknown>) => boolean)\n  onRowSelectionChange?: OnChangeFn<RowSelectionState>\n} & (\n  | { data: TableData; getAsyncData?: never }\n  | { data?: never; getAsyncData: TGetAsyncData }\n)\n\nexport const DataTableProvider = ({\n  columns,\n  data: dataProp = [],\n  getAsyncData,\n  defaultSort,\n  initialState = undefined,\n  disabledRows,\n  enableRowSelection,\n  onRowSelectionChange,\n  children\n}: DataTableProviderProps): JSX.Element => {\n  const tableId = React.useRef(uuid())\n\n  const [data, setData] = React.useState<TAsyncDataResult>({\n    results: dataProp ?? [],\n    total: dataProp?.length ?? 0\n  })\n\n  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({})\n  const [expanded, setExpanded] = React.useState<ExpandedState>({})\n\n  const { isPaginated, applyPagination, paginationState, setPaginationState } =\n    usePagination(initialState?.pagination)\n\n  const [asyncDataState, setAsyncDataState] = React.useState<AsyncDataState>(\n    AsyncDataState.NONE\n  )\n\n  const [globalFilter, setGlobalFilter] = React.useState<string>('')\n\n  const { setIsSortable, isSortable, sorting, setSorting } =\n    useSortByColumn(defaultSort)\n\n  const runAsyncData = React.useCallback(\n    async (overrideAsyncDataOptions: Partial<TAsyncDataOptions>) => {\n      if (!getAsyncData) return\n\n      try {\n        setAsyncDataState(AsyncDataState.PENDING)\n\n        const newData = await getNewAsyncData(\n          getAsyncData,\n          overrideAsyncDataOptions,\n          paginationState as PaginationState,\n          sorting,\n          globalFilter\n        )\n\n        setData(newData as TAsyncDataResult)\n        setAsyncDataState(AsyncDataState.FULFILLED)\n      } catch (error) {\n        setAsyncDataState(AsyncDataState.REJECTED)\n      }\n    },\n    [\n      getAsyncData,\n      paginationState?.pageIndex,\n      paginationState?.pageSize,\n      sorting,\n      globalFilter\n    ]\n  )\n\n  React.useEffect(() => {\n    runAsyncData({})\n  }, [runAsyncData])\n\n  useDeepCompareEffect(() => {\n    if (!dataProp) return\n\n    setData({ results: dataProp, total: dataProp.length })\n  }, [dataProp])\n\n  const getTotalRows = () => data.total\n\n  const table = useReactTable<unknown>({\n    columns,\n    data: data.results,\n    pageCount: paginationState\n      ? Math.ceil(getTotalRows() / paginationState.pageSize)\n      : -1,\n    initialState: initialState,\n    state: {\n      sorting,\n      globalFilter,\n      pagination: paginationState,\n      rowSelection,\n      expanded\n    },\n    manualPagination: getAsyncData && isPaginated,\n    manualSorting: getAsyncData && isPaginated,\n    enableSorting: asyncDataState !== AsyncDataState.PENDING,\n    enableGlobalFilter: !getAsyncData,\n    enableRowSelection,\n    onExpandedChange: setExpanded,\n    getSubRows: (row: Row<unknown>) => row.subRows,\n    onRowSelectionChange: (updaterOrValue) => {\n      if (onRowSelectionChange) onRowSelectionChange(updaterOrValue)\n      setRowSelection(updaterOrValue)\n    },\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: isPaginated ? getPaginationRowModel() : undefined,\n    getSortedRowModel:\n      isSortable || sorting.length ? getSortedRowModel() : undefined,\n    getFilteredRowModel: getFilteredRowModel(),\n    getExpandedRowModel: getExpandedRowModel(),\n    onPaginationChange: isPaginated ? setPaginationState : undefined,\n    onSortingChange: setSorting,\n    onGlobalFilterChange: setGlobalFilter,\n    globalFilterFn: (row, columnId, filterValue) => {\n      const checkFilterMatchesCell = (cellValue: string) =>\n        cellValue.toLowerCase().includes(filterValue.toLowerCase())\n\n      const isSubRow = row.depth > 0\n\n      if (isSubRow) return true\n\n      const value = row.getValue(columnId)\n      switch (typeof value) {\n        case 'string':\n          return checkFilterMatchesCell(value)\n        case 'boolean':\n        case 'number':\n          return checkFilterMatchesCell(String(value))\n        default:\n          return false\n      }\n    }\n  })\n\n  const value: DataTableContextType = React.useMemo(() => {\n    return {\n      ...table,\n      columns,\n      data,\n      setData,\n      setIsSortable,\n      applyPagination,\n      getTotalRows,\n      isSortable,\n      asyncDataState,\n      runAsyncData,\n      disabledRows,\n      enableRowSelection,\n      rowSelection,\n      tableId: tableId.current\n    }\n  }, [\n    table,\n    applyPagination,\n    getTotalRows,\n    isSortable,\n    enableRowSelection,\n    tableId\n  ])\n\n  return (\n    <DataTableContext.Provider value={value}>\n      {children}\n    </DataTableContext.Provider>\n  )\n}\n\nexport const useDataTable = <T extends Record<string, unknown>>() => {\n  const context = React.useContext(DataTableContext) as DataTableContextType<T>\n\n  if (!context)\n    throw new Error(\n      'useDataTable can only be called from inside a DataTableProvider'\n    )\n\n  return context\n}\n"],"names":["DataTableContext","React","DataTableProvider","columns","dataProp","getAsyncData","defaultSort","initialState","disabledRows","enableRowSelection","onRowSelectionChange","children","_a","tableId","uuid","data","setData","rowSelection","setRowSelection","expanded","setExpanded","isPaginated","applyPagination","paginationState","setPaginationState","usePagination","asyncDataState","setAsyncDataState","AsyncDataState","globalFilter","setGlobalFilter","setIsSortable","isSortable","sorting","setSorting","useSortByColumn","runAsyncData","overrideAsyncDataOptions","newData","getNewAsyncData","useDeepCompareEffect","getTotalRows","table","useReactTable","row","updaterOrValue","getCoreRowModel","getPaginationRowModel","getSortedRowModel","getFilteredRowModel","getExpandedRowModel","columnId","filterValue","checkFilterMatchesCell","cellValue","value","useDataTable","context"],"mappings":"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"}

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableDataCell.js","sources":["../../../src/components/data-table/DataTableDataCell.tsx"],"sourcesContent":["import type { Cell } from '@tanstack/react-table'\nimport { flexRender } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Table } from '../table'\n\ntype DataTableDataCellProps = {\n  cell: Cell<Record<string, unknown>, unknown>\n}\n\nexport const DataTableDataCell = ({ cell }: DataTableDataCellProps) => {\n  return (\n    <Table.Cell key={cell.id}>\n      {flexRender(cell.column.columnDef.cell, cell.getContext())}\n    </Table.Cell>\n  )\n}\n"],"names":["DataTableDataCell","cell","React","Table","flexRender"],"mappings":"qHAUO,MAAMA,EAAoB,CAAC,CAAE,KAAAC,CAAK,IAErCC,EAAA,cAACC,EAAM,KAAN,CAAW,IAAKF,EAAK,EAAA,EACnBG,EAAWH,EAAK,OAAO,UAAU,KAAMA,EAAK,YAAY,CAC3D"}

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { EmptyState } from '../empty-state';
+type DataTableEmptyStateProps = React.ComponentProps<typeof EmptyState>;
+export declare const DataTableEmptyState: ({ children, ...rest }: DataTableEmptyStateProps) => React.JSX.Element | null;
+export {};

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

@@ -0,0 +1,2 @@
+import*as r from"react";import{EmptyState as m}from"../empty-state/EmptyState.js";import{AsyncDataState as n}from"./DataTable.types.js";import{useDataTable as l}from"./DataTableContext.js";const p=({children:t,...a})=>{const{asyncDataState:e,getTotalRows:o}=l();return e!==n.PENDING&&o()===0?r.createElement(m,{...a},t):null};export{p as DataTableEmptyState};
+//# sourceMappingURL=DataTableEmptyState.js.map

package/dist/components/data-table/DataTableEmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableEmptyState.js","sources":["../../../src/components/data-table/DataTableEmptyState.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { EmptyState } from '../empty-state'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\n\ntype DataTableEmptyStateProps = React.ComponentProps<typeof EmptyState>\n\nexport const DataTableEmptyState = ({\n  children,\n  ...rest\n}: DataTableEmptyStateProps) => {\n  const { asyncDataState, getTotalRows } = useDataTable()\n\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  if (!isEmpty) return null\n\n  return <EmptyState {...rest}>{children}</EmptyState>\n}\n"],"names":["DataTableEmptyState","children","rest","asyncDataState","getTotalRows","useDataTable","AsyncDataState","React","EmptyState"],"mappings":"mMAQaA,EAAsB,CAAC,CAClC,SAAAC,KACGC,CACL,IAAgC,CAC9B,KAAM,CAAE,eAAAC,EAAgB,aAAAC,CAAa,EAAIC,EAKzC,EAAA,OAHkBF,IAAmBG,EAAe,SACtBF,MAAmB,EAI1CG,EAAA,cAACC,EAAA,CAAY,GAAGN,CAAAA,EAAOD,CAAS,EAFlB,IAGvB"}

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { DataTableContextType } from './DataTable.types';
+export declare const DataTableError: ({ children }: {
+    children: (retry?: DataTableContextType["runAsyncData"]) => React.ReactElement;
+}) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;

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

@@ -0,0 +1,2 @@
+import{AsyncDataState as e}from"./DataTable.types.js";import{useDataTable as n}from"./DataTableContext.js";const o=({children:a})=>{const{asyncDataState:t,runAsyncData:r}=n();return t!==e.REJECTED?null:a(r)};export{o as DataTableError};
+//# sourceMappingURL=DataTableError.js.map

package/dist/components/data-table/DataTableError.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableError.js","sources":["../../../src/components/data-table/DataTableError.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { AsyncDataState, DataTableContextType } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\n\nexport const DataTableError = ({\n  children\n}: {\n  children: (retry?: DataTableContextType['runAsyncData']) => React.ReactElement\n}) => {\n  const { asyncDataState, runAsyncData } = useDataTable()\n\n  if (asyncDataState !== AsyncDataState.REJECTED) return null\n\n  return children(runAsyncData)\n}\n"],"names":["DataTableError","children","asyncDataState","runAsyncData","useDataTable","AsyncDataState"],"mappings":"2GAKO,MAAMA,EAAiB,CAAC,CAC7B,SAAAC,CACF,IAEM,CACJ,KAAM,CAAE,eAAAC,EAAgB,aAAAC,CAAa,EAAIC,EAAa,EAEtD,OAAIF,IAAmBG,EAAe,SAAiB,KAEhDJ,EAASE,CAAY,CAC9B"}

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

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

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

@@ -0,0 +1,2 @@
+import*as e from"react";import{debounce as f}from"throttle-debounce";import{OptionalVisuallyHiddenWrapper as d}from"../../utilities/optional-visually-hidden-wrapper/OptionalVisuallyHiddenWrapper.js";import{Label as g}from"../label/Label.js";import{SearchInput as h}from"../search-input/SearchInput.js";import{AsyncDataState as D}from"./DataTable.types.js";import{useDataTable as E}from"./DataTableContext.js";const F=({onChange:a,label:t,hideLabel:r=!1,...n})=>{const{setGlobalFilter:o,getState:m,resetPagination:i,getTotalRows:s,asyncDataState:c}=E(),{globalFilter:p}=m();if(c!==D.PENDING&&s()===0)return null;const u=f(250,l=>{const{target:{value:b}}=l;a==null||a(l),i(),o(b)});return e.createElement(e.Fragment,null,e.createElement(d,{hidden:r},e.createElement(g,{css:{mb:"$3"},htmlFor:t},t)),e.createElement(h,{...n,defaultValue:p,onChange:u,name:t}))};export{F as DataTableGlobalFilter};
+//# sourceMappingURL=DataTableGlobalFilter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableGlobalFilter.js","sources":["../../../src/components/data-table/DataTableGlobalFilter.tsx"],"sourcesContent":["import * as React from 'react'\nimport { debounce } from 'throttle-debounce'\n\nimport { OptionalVisuallyHiddenWrapper } from '../../utilities/optional-visually-hidden-wrapper'\nimport { Label } from '../label'\nimport { SearchInput } from '../search-input'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\n\ntype DataTableSearchProps = React.ComponentProps<typeof SearchInput> & {\n  label: string\n  hideLabel?: boolean\n}\nexport const DataTableGlobalFilter = ({\n  onChange,\n  label,\n  hideLabel = false,\n  ...props\n}: DataTableSearchProps) => {\n  const {\n    setGlobalFilter,\n    getState,\n    resetPagination,\n    getTotalRows,\n    asyncDataState\n  } = useDataTable()\n  const { globalFilter } = getState()\n\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  if (isEmpty) return null\n\n  const handleChange = debounce(250, (event) => {\n    const {\n      target: { value }\n    } = event\n\n    onChange?.(event)\n    resetPagination()\n    setGlobalFilter(value)\n  })\n\n  return (\n    <>\n      <OptionalVisuallyHiddenWrapper hidden={hideLabel}>\n        <Label css={{ mb: '$3' }} htmlFor={label}>\n          {label}\n        </Label>\n      </OptionalVisuallyHiddenWrapper>\n      <SearchInput\n        {...props}\n        defaultValue={globalFilter}\n        onChange={handleChange}\n        name={label}\n      />\n    </>\n  )\n}\n"],"names":["DataTableGlobalFilter","onChange","label","hideLabel","props","setGlobalFilter","getState","resetPagination","getTotalRows","asyncDataState","useDataTable","globalFilter","AsyncDataState","handleChange","debounce","event","value","React","OptionalVisuallyHiddenWrapper","Label","SearchInput"],"mappings":"yZAaO,MAAMA,EAAwB,CAAC,CACpC,SAAAC,EACA,MAAAC,EACA,UAAAC,EAAY,MACTC,CACL,IAA4B,CAC1B,KAAM,CACJ,gBAAAC,EACA,SAAAC,EACA,gBAAAC,EACA,aAAAC,EACA,eAAAC,CACF,EAAIC,EAAa,EACX,CAAE,aAAAC,CAAa,EAAIL,EAAAA,EAKzB,GAHkBG,IAAmBG,EAAe,SACtBJ,EAAAA,IAAmB,EAEpC,OAAO,KAEpB,MAAMK,EAAeC,EAAS,IAAMC,GAAU,CAC5C,KAAM,CACJ,OAAQ,CAAE,MAAAC,CAAM,CAClB,EAAID,EAEJd,GAAA,MAAAA,EAAWc,CAAAA,EACXR,IACAF,EAAgBW,CAAK,CACvB,CAAC,EAED,OACEC,EAAA,cAAAA,EAAA,SAAA,KACEA,EAAA,cAACC,EAAA,CAA8B,OAAQf,CAAAA,EACrCc,EAAA,cAACE,EAAA,CAAM,IAAK,CAAE,GAAI,IAAK,EAAG,QAASjB,CAAAA,EAChCA,CACH,CACF,EACAe,EAAA,cAACG,EAAA,CACE,GAAGhB,EACJ,aAAcO,EACd,SAAUE,EACV,KAAMX,CAAAA,CACR,CACF,CAEJ"}

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { CSS } from '../../stitches';
+import { Table } from '../table';
+type DataTableHeadProps = Omit<React.ComponentProps<typeof Table.Header>, 'children'> & {
+    sortable?: boolean;
+    isSticky?: boolean;
+    headerCss?: CSS;
+};
+export declare const DataTableHead: ({ sortable, theme, isSticky, ...props }: DataTableHeadProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,2 @@
+import*as e from"react";import{Table as t}from"../table/Table.js";import{DataTableSelectAllRowsCheckbox as p}from"./DataTableSelectAllRowsCheckbox.js";import{useDataTable as b}from"./DataTableContext.js";import{DataTable as h}from"./DataTable.js";const E=({sortable:a=!0,theme:o="light",isSticky:s=!1,...c})=>{const{getHeaderGroups:i,setIsSortable:l,enableRowSelection:n,getCanSomeRowsExpand:d}=b();return e.useEffect(()=>{l(a)},[a,l]),e.createElement(t.Header,{theme:o,isSticky:s,...c},i().map(r=>e.createElement(t.Row,{key:r.id},d()&&e.createElement(t.HeaderCell,{css:{width:"$4"}}),n&&e.createElement(t.HeaderCell,{css:{width:"$4"}},e.createElement(p,null)),r.headers.map(m=>e.createElement(h.HeaderCell,{header:m,key:m.id})))))};export{E as DataTableHead};
+//# sourceMappingURL=DataTableHead.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableHead.js","sources":["../../../src/components/data-table/DataTableHead.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS } from '~/stitches'\n\nimport { Table } from '../table'\nimport { DataTableSelectAllRowsCheckbox } from './DataTableSelectAllRowsCheckbox'\nimport { DataTable, useDataTable } from './index'\n\ntype DataTableHeadProps = Omit<\n  React.ComponentProps<typeof Table.Header>,\n  'children'\n> & {\n  sortable?: boolean\n  isSticky?: boolean\n  headerCss?: CSS\n}\n\nexport const DataTableHead = ({\n  sortable = true,\n  theme = 'light',\n  isSticky = false,\n  ...props\n}: DataTableHeadProps) => {\n  const {\n    getHeaderGroups,\n    setIsSortable,\n    enableRowSelection,\n    getCanSomeRowsExpand\n  } = useDataTable()\n\n  React.useEffect(() => {\n    setIsSortable(sortable)\n  }, [sortable, setIsSortable])\n\n  return (\n    <Table.Header theme={theme} isSticky={isSticky} {...props}>\n      {getHeaderGroups().map((headerGroup) => {\n        return (\n          <Table.Row key={headerGroup.id}>\n            {getCanSomeRowsExpand() && (\n              <Table.HeaderCell css={{ width: '$4' }} />\n            )}\n            {enableRowSelection && (\n              <Table.HeaderCell css={{ width: '$4' }}>\n                <DataTableSelectAllRowsCheckbox />\n              </Table.HeaderCell>\n            )}\n            {headerGroup.headers.map((header) => (\n              <DataTable.HeaderCell header={header} key={header.id} />\n            ))}\n          </Table.Row>\n        )\n      })}\n    </Table.Header>\n  )\n}\n"],"names":["DataTableHead","sortable","theme","isSticky","props","getHeaderGroups","setIsSortable","enableRowSelection","getCanSomeRowsExpand","useDataTable","React","Table","headerGroup","DataTableSelectAllRowsCheckbox","header","DataTable"],"mappings":"uPAiBa,MAAAA,EAAgB,CAAC,CAC5B,SAAAC,EAAW,GACX,MAAAC,EAAQ,QACR,SAAAC,EAAW,MACRC,CACL,IAA0B,CACxB,KAAM,CACJ,gBAAAC,EACA,cAAAC,EACA,mBAAAC,EACA,qBAAAC,CACF,EAAIC,EAAa,EAEjB,OAAAC,EAAM,UAAU,IAAM,CACpBJ,EAAcL,CAAQ,CACxB,EAAG,CAACA,EAAUK,CAAa,CAAC,EAG1BI,EAAA,cAACC,EAAM,OAAN,CAAa,MAAOT,EAAO,SAAUC,EAAW,GAAGC,CACjDC,EAAAA,EAAkB,EAAA,IAAKO,GAEpBF,EAAA,cAACC,EAAM,IAAN,CAAU,IAAKC,EAAY,EACzBJ,EAAAA,EAAAA,GACCE,EAAA,cAACC,EAAM,WAAN,CAAiB,IAAK,CAAE,MAAO,IAAK,CAAG,CAAA,EAEzCJ,GACCG,EAAA,cAACC,EAAM,WAAN,CAAiB,IAAK,CAAE,MAAO,IAAK,CAAA,EACnCD,EAAA,cAACG,EAAA,IAA+B,CAClC,EAEDD,EAAY,QAAQ,IAAKE,GACxBJ,EAAA,cAACK,EAAU,WAAV,CAAqB,OAAQD,EAAQ,IAAKA,EAAO,EAAI,CAAA,CACvD,CACH,CAEH,CACH,CAEJ"}

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';
+type DataTableHeaderProps = React.ComponentProps<typeof Table.HeaderCell> & {
+    header: Header<Record<string, unknown>, unknown>;
+};
+export declare const DataTableHeaderCell: ({ header, children, css, ...props }: DataTableHeaderProps) => React.JSX.Element;
+export {};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableHeaderCell.js","sources":["../../../src/components/data-table/DataTableHeaderCell.tsx"],"sourcesContent":["import { SortDown, SortUp } from '@atom-learning/icons'\nimport type { Header } from '@tanstack/react-table'\nimport { flexRender } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Flex } from '../flex'\nimport { Icon } from '../icon'\nimport { Table } from '../table'\nimport { useDataTable } from './DataTableContext'\ntype DataTableHeaderProps = React.ComponentProps<typeof Table.HeaderCell> & {\n  header: Header<Record<string, unknown>, unknown>\n}\n\nconst sortIcons = {\n  asc: SortUp,\n  desc: SortDown\n}\n\nconst SortIcon = ({ direction }: { direction: 'asc' | 'desc' }) => (\n  <Icon\n    is={sortIcons[direction]}\n    size=\"sm\"\n    css={{ position: 'absolute', left: '$1' }}\n  />\n)\n\nexport const DataTableHeaderCell = ({\n  header,\n  children,\n  css,\n  ...props\n}: DataTableHeaderProps) => {\n  const sortDirection = header.column.getIsSorted()\n  const { isSortable: isSortableTable } = useDataTable()\n  // false for display columns, e.g. \"Actions\"\n  const isDataColumn = header.column.getCanSort()\n\n  return (\n    <Table.HeaderCell\n      onClick={\n        isSortableTable && isDataColumn\n          ? header.column.getToggleSortingHandler()\n          : undefined\n      }\n      css={{\n        cursor: isSortableTable && isDataColumn ? 'pointer' : 'initial',\n        ...css\n      }}\n      {...props}\n    >\n      <Flex css={{ alignItems: 'center' }}>\n        {flexRender(header.column.columnDef.header, header.getContext())}\n        {sortDirection && isSortableTable && (\n          <Flex css={{ position: 'relative', alignItems: 'center' }}>\n            <SortIcon direction={sortDirection} />\n          </Flex>\n        )}\n      </Flex>\n    </Table.HeaderCell>\n  )\n}\n"],"names":["sortIcons","SortUp","SortDown","SortIcon","direction","React","Icon","DataTableHeaderCell","header","children","css","props","sortDirection","isSortableTable","useDataTable","isDataColumn","Table","Flex","flexRender"],"mappings":"oTAaA,MAAMA,EAAY,CAChB,IAAKC,EACL,KAAMC,CACR,EAEMC,EAAW,CAAC,CAAE,UAAAC,CAAU,IAC5BC,EAAA,cAACC,EAAA,CACC,GAAIN,EAAUI,GACd,KAAK,KACL,IAAK,CAAE,SAAU,WAAY,KAAM,IAAK,CAC1C,CAAA,EAGWG,EAAsB,CAAC,CAClC,OAAAC,EACA,SAAAC,EACA,IAAAC,KACGC,CACL,IAA4B,CAC1B,MAAMC,EAAgBJ,EAAO,OAAO,YAC9B,EAAA,CAAE,WAAYK,CAAgB,EAAIC,EAAa,EAE/CC,EAAeP,EAAO,OAAO,WAAW,EAE9C,OACEH,EAAA,cAACW,EAAM,WAAN,CACC,QACEH,GAAmBE,EACfP,EAAO,OAAO,0BACd,OAEN,IAAK,CACH,OAAQK,GAAmBE,EAAe,UAAY,UACtD,GAAGL,CACL,EACC,GAAGC,GAEJN,EAAA,cAACY,EAAA,CAAK,IAAK,CAAE,WAAY,QAAS,CAAA,EAC/BC,EAAWV,EAAO,OAAO,UAAU,OAAQA,EAAO,WAAW,CAAC,EAC9DI,GAAiBC,GAChBR,EAAA,cAACY,EAAA,CAAK,IAAK,CAAE,SAAU,WAAY,WAAY,QAAS,CACtDZ,EAAAA,EAAA,cAACF,EAAA,CAAS,UAAWS,CAAAA,CAAe,CACtC,CAEJ,CACF,CAEJ"}