@atom-learning/components 2.56.0 → 2.58.0

package/CHANGELOG.md

@@ -1,22 +1,9 @@
-# [2.56.0](https://github.com/Atom-Learning/components/compare/v2.55.0...v2.56.0) (2023-05-25)
-
-
-### Bug Fixes
-
-* update tests ([33541b4](https://github.com/Atom-Learning/components/commit/33541b449721bedd813246e06633035818440833))
+# [2.58.0](https://github.com/Atom-Learning/components/compare/v2.57.0...v2.58.0) (2023-06-07)
 
 
 ### Features
 
-* add components to display aspect ratio tokens ([54e3d78](https://github.com/Atom-Learning/components/commit/54e3d78694c32802cef442ba8de9fe404db4de22))
-* add navigation buttons for pagination ([f980396](https://github.com/Atom-Learning/components/commit/f9803965c5f446ec57bdb7b4f6bffc273ee9016e))
-* add Pagination Component ([afd0691](https://github.com/Atom-Learning/components/commit/afd06914c158e1fec570d466e62ea9f711323e84))
-* add pagination context provider ([e931538](https://github.com/Atom-Learning/components/commit/e931538fa16079a8f8337da3f2d96817d1a40c51))
-* add pagination page button ([e0db0c6](https://github.com/Atom-Learning/components/commit/e0db0c638fe8b37c4a8baef51b6964966b598167))
-* add pagination pages component ([1b35c5f](https://github.com/Atom-Learning/components/commit/1b35c5f7475be3a274bc2cf83bac4a2925dd2043))
-* add pagination popover component ([96dc9b2](https://github.com/Atom-Learning/components/commit/96dc9b23631087934bfbf6b511a2038f2d2423a8))
-* allow component to be controlled or uncontrolled ([9233b90](https://github.com/Atom-Learning/components/commit/9233b909a46b090e83fd93d52116a05861244284))
-* implement Pagination component ([9edfb1f](https://github.com/Atom-Learning/components/commit/9edfb1f8d6d13a5b283adc88fa7111a1165e9b98))
+* make Dot positioning CSS a bit cleaner ([7f21e20](https://github.com/Atom-Learning/components/commit/7f21e20ad4bce3aef9350d06a9161c750154c5cc))
 
 # [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

@@ -8,6 +8,7 @@ import { DataTableGlobalFilter } from './DataTableGlobalFilter';
 import { DataTableHead } from './DataTableHead';
 import { DataTableHeaderCell } from './DataTableHeaderCell';
 import { DataTableLoading } from './DataTableLoading';
+import { DataTableMetaData } from './DataTableMetaData';
 import { DataTableRow } from './DataTableRow';
 import { DataTableTable } from './DataTableTable';
 import { DragAndDropTable } from './drag-and-drop';
@@ -52,6 +53,10 @@ declare type TDataTable = React.FC<React.ComponentProps<typeof DataTableProvider
      * you can build your own implementation with `useDataTable` and other UI components.
      *
      */
+    MetaData: typeof DataTableMetaData;
+    /** Default display of amount of items and current sorting status for 'DataTable'
+     *
+     */
     Pagination: typeof Pagination;
     /** Default row implementation for `DataTable`
      *

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"DataTable.js","sources":["../../../src/components/data-table/DataTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { DataTableBody } from './DataTableBody'\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 { DataTableRow } from './DataTableRow'\nimport { DataTableTable } from './DataTableTable'\nimport { DragAndDropTable } from './drag-and-drop'\nimport { Pagination } from './pagination'\n\ntype TDataTable = React.FC<React.ComponentProps<typeof 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: typeof DataTableBody\n\n  /** Default table data cell implementation for `DataTable`\n   *\n   *\n   */\n  DataCell: typeof DataTableDataCell\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: typeof DragAndDropTable\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: typeof 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\n  Head: typeof DataTableHead\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\n  HeaderCell: typeof DataTableHeaderCell\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\n  Pagination: typeof Pagination\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\n  Row: typeof 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: typeof 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: typeof 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: typeof DataTableError\n\n  /** Empty state implementation for `DataTable`.\n   *\n   * Extends the EmptyState component\n   */\n  EmptyState: typeof DataTableEmptyState\n}\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: TDataTable = (props) => <DataTableProvider {...props} />\n\nDataTable.Body = DataTableBody\nDataTable.DataCell = DataTableDataCell\nDataTable.DragAndDropTable = DragAndDropTable\nDataTable.Head = DataTableHead\nDataTable.HeaderCell = DataTableHeaderCell\nDataTable.Pagination = Pagination\nDataTable.Row = DataTableRow\nDataTable.GlobalFilter = DataTableGlobalFilter\nDataTable.Table = DataTableTable\nDataTable.Loading = DataTableLoading\nDataTable.Error = DataTableError\nDataTable.EmptyState = DataTableEmptyState\n"],"names":["DataTable","props","React","DataTableProvider","DataTableBody","DataTableDataCell","DragAndDropTable","DataTableHead","DataTableHeaderCell","Pagination","DataTableRow","DataTableGlobalFilter","DataTableTable","DataTableLoading","DataTableError","DataTableEmptyState"],"mappings":"uwBAmHO,MAAMA,EAAyBC,GAAUC,EAAA,cAACC,EAAA,CAAmB,GAAGF,CAAO,CAAA,EAE9ED,EAAU,KAAOI,EACjBJ,EAAU,SAAWK,EACrBL,EAAU,iBAAmBM,EAC7BN,EAAU,KAAOO,EACjBP,EAAU,WAAaQ,EACvBR,EAAU,WAAaS,EACvBT,EAAU,IAAMU,EAChBV,EAAU,aAAeW,EACzBX,EAAU,MAAQY,EAClBZ,EAAU,QAAUa,EACpBb,EAAU,MAAQc,EAClBd,EAAU,WAAae"}
+{"version":3,"file":"DataTable.js","sources":["../../../src/components/data-table/DataTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { DataTableBody } from './DataTableBody'\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 { DataTableTable } from './DataTableTable'\nimport { DragAndDropTable } from './drag-and-drop'\nimport { Pagination } from './pagination'\n\ntype TDataTable = React.FC<React.ComponentProps<typeof 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: typeof DataTableBody\n\n  /** Default table data cell implementation for `DataTable`\n   *\n   *\n   */\n  DataCell: typeof DataTableDataCell\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: typeof DragAndDropTable\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: typeof 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\n  Head: typeof DataTableHead\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\n  HeaderCell: typeof DataTableHeaderCell\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\n  MetaData: typeof DataTableMetaData\n  /** Default display of amount of items and current sorting status for 'DataTable'\n   *\n   */\n\n  Pagination: typeof Pagination\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\n  Row: typeof 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: typeof 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: typeof 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: typeof DataTableError\n\n  /** Empty state implementation for `DataTable`.\n   *\n   * Extends the EmptyState component\n   */\n  EmptyState: typeof DataTableEmptyState\n}\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: TDataTable = (props) => <DataTableProvider {...props} />\n\nDataTable.Body = DataTableBody\nDataTable.DataCell = DataTableDataCell\nDataTable.DragAndDropTable = DragAndDropTable\nDataTable.Head = DataTableHead\nDataTable.HeaderCell = DataTableHeaderCell\nDataTable.MetaData = DataTableMetaData\nDataTable.Pagination = Pagination\nDataTable.Row = DataTableRow\nDataTable.GlobalFilter = DataTableGlobalFilter\nDataTable.Table = DataTableTable\nDataTable.Loading = DataTableLoading\nDataTable.Error = DataTableError\nDataTable.EmptyState = DataTableEmptyState\n"],"names":["DataTable","props","React","DataTableProvider","DataTableBody","DataTableDataCell","DragAndDropTable","DataTableHead","DataTableHeaderCell","DataTableMetaData","Pagination","DataTableRow","DataTableGlobalFilter","DataTableTable","DataTableLoading","DataTableError","DataTableEmptyState"],"mappings":"w0BAyHaA,EAAyBC,GAAUC,EAAA,cAACC,EAAA,CAAmB,GAAGF,CAAO,CAAA,EAE9ED,EAAU,KAAOI,EACjBJ,EAAU,SAAWK,EACrBL,EAAU,iBAAmBM,EAC7BN,EAAU,KAAOO,EACjBP,EAAU,WAAaQ,EACvBR,EAAU,SAAWS,EACrBT,EAAU,WAAaU,EACvBV,EAAU,IAAMW,EAChBX,EAAU,aAAeY,EACzBZ,EAAU,MAAQa,EAClBb,EAAU,QAAUc,EACpBd,EAAU,MAAQe,EAClBf,EAAU,WAAagB"}

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

@@ -26,6 +26,7 @@ export declare type DataTableContextType<T = unknown> = Table<T> & {
     asyncDataState?: AsyncDataState;
     runAsyncData?: (options: Partial<TAsyncDataOptions>) => Promise<void>;
     data: TAsyncDataResult;
+    columns: any;
     /**
      * 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!

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

@@ -1 +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  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  data: TAsyncDataResult\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":"AAeO,IAAKA,GAAAA,IACVA,EAAA,KAAO,OACPA,EAAA,QAAU,UACVA,EAAA,UAAY,YACZA,EAAA,SAAW,WAJDA,IAAAA,GAAA,CAAA,CAAA"}
+{"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  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  data: TAsyncDataResult\n  columns: any\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":"AAeO,IAAKA,GAAAA,IACVA,EAAA,KAAO,OACPA,EAAA,QAAU,UACVA,EAAA,UAAY,YACZA,EAAA,SAAW,WAJDA,IAAAA,GAAA,CAAA,CAAA"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableContext.js","sources":["../../../src/components/data-table/DataTableContext.tsx"],"sourcesContent":["import type { UniqueIdentifier } from '@dnd-kit/core'\nimport type { PaginationState } from '@tanstack/react-table'\nimport {\n  getCoreRowModel,\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} & (\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  children\n}: DataTableProviderProps): JSX.Element => {\n  const [data, setData] = React.useState<TAsyncDataResult>({\n    results: dataProp ?? [],\n    total: dataProp?.length ?? 0\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    },\n    manualPagination: getAsyncData && isPaginated,\n    manualSorting: getAsyncData && isPaginated,\n    enableSorting: asyncDataState !== AsyncDataState.PENDING,\n    enableGlobalFilter: !getAsyncData,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: isPaginated ? getPaginationRowModel() : undefined,\n    getSortedRowModel:\n      isSortable || sorting.length ? getSortedRowModel() : undefined,\n    getFilteredRowModel: getFilteredRowModel(),\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 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      data,\n      setData,\n      setIsSortable,\n      applyPagination,\n      getTotalRows,\n      isSortable,\n      asyncDataState,\n      runAsyncData\n    }\n  }, [table, applyPagination, getTotalRows, isSortable])\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","children","_a","data","setData","isPaginated","applyPagination","paginationState","setPaginationState","usePagination","asyncDataState","setAsyncDataState","AsyncDataState","globalFilter","setGlobalFilter","setIsSortable","isSortable","sorting","setSorting","useSortByColumn","runAsyncData","overrideAsyncDataOptions","newData","getNewAsyncData","useDeepCompareEffect","getTotalRows","table","useReactTable","getCoreRowModel","getPaginationRowModel","getSortedRowModel","getFilteredRowModel","row","columnId","filterValue","checkFilterMatchesCell","cellValue","value","useDataTable","context"],"mappings":"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"}
+{"version":3,"file":"DataTableContext.js","sources":["../../../src/components/data-table/DataTableContext.tsx"],"sourcesContent":["import type { UniqueIdentifier } from '@dnd-kit/core'\nimport type { PaginationState } from '@tanstack/react-table'\nimport {\n  getCoreRowModel,\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} & (\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  children\n}: DataTableProviderProps): JSX.Element => {\n  const [data, setData] = React.useState<TAsyncDataResult>({\n    results: dataProp ?? [],\n    total: dataProp?.length ?? 0\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    },\n    manualPagination: getAsyncData && isPaginated,\n    manualSorting: getAsyncData && isPaginated,\n    enableSorting: asyncDataState !== AsyncDataState.PENDING,\n    enableGlobalFilter: !getAsyncData,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: isPaginated ? getPaginationRowModel() : undefined,\n    getSortedRowModel:\n      isSortable || sorting.length ? getSortedRowModel() : undefined,\n    getFilteredRowModel: getFilteredRowModel(),\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 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    }\n  }, [table, applyPagination, getTotalRows, isSortable])\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","children","_a","data","setData","isPaginated","applyPagination","paginationState","setPaginationState","usePagination","asyncDataState","setAsyncDataState","AsyncDataState","globalFilter","setGlobalFilter","setIsSortable","isSortable","sorting","setSorting","useSortByColumn","runAsyncData","overrideAsyncDataOptions","newData","getNewAsyncData","useDeepCompareEffect","getTotalRows","table","useReactTable","getCoreRowModel","getPaginationRowModel","getSortedRowModel","getFilteredRowModel","row","columnId","filterValue","checkFilterMatchesCell","cellValue","value","useDataTable","context"],"mappings":"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"}

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

@@ -0,0 +1,14 @@
+import { CSS } from '@stitches/react';
+import * as React from 'react';
+interface IDataTableMetaDataProps {
+    copy?: {
+        sorted_by?: string;
+        ascending?: string;
+        descending?: string;
+        separator?: string;
+    };
+    sortLabel?: string;
+    css?: CSS;
+}
+export declare const DataTableMetaData: React.FC<IDataTableMetaDataProps>;
+export {};

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

@@ -0,0 +1,2 @@
+import*as $ from"react";import{Text as f}from"../text/Text.js";import{useDataTable as h}from"./DataTableContext.js";import"./DataTable.js";const v={sorted_by:"Sorted by",ascending:"ascending",descending:"descending",separator:"-"},y=({copy:a,css:d})=>{var n,o;const{getState:i,columns:c,getRowModel:l}=h(),{sorting:s}=i(),g=s.length>0,m=(o=(n=l())==null?void 0:n.rows)==null?void 0:o.length,t={...v,...a},p=e=>{const r=c.find(b=>b.id===e);return(r==null?void 0:r.header)||e},u=e=>`${t.separator} ${t.sorted_by} ${p(e[0].id)} ${e[0].desc?t.descending:t.ascending}`;return $.createElement(f,{css:{fontWeight:600,...d}},`${m} items ${g?u(s):""}`)};export{y as DataTableMetaData};
+//# sourceMappingURL=DataTableMetaData.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableMetaData.js","sources":["../../../src/components/data-table/DataTableMetaData.tsx"],"sourcesContent":["import { CSS } from '@stitches/react'\nimport * as React from 'react'\n\nimport { Text } from '../text'\nimport { useDataTable } from './index'\n\ninterface IDataTableMetaDataProps {\n  copy?: {\n    sorted_by?: string\n    ascending?: string\n    descending?: string\n    separator?: string\n  }\n  sortLabel?: string\n  css?: CSS\n}\n\nconst defaultCopy = {\n  sorted_by: 'Sorted by',\n  ascending: 'ascending',\n  descending: 'descending',\n  separator: '-'\n}\n\nexport const DataTableMetaData: React.FC<IDataTableMetaDataProps> = ({\n  copy,\n  css\n}) => {\n  const { getState, columns, getRowModel } = useDataTable()\n  const { sorting } = getState()\n  const isSorted = sorting.length > 0\n\n  const totalRows = getRowModel()?.rows?.length\n\n  const copyMerged = { ...defaultCopy, ...copy }\n\n  const getColumnDisplayName = (id: string) => {\n    const sortedColumn = columns.find((col) => col.id === id)\n    return sortedColumn?.header || id\n  }\n\n  const getSortingString = (sorting) => {\n    return `${copyMerged.separator} ${\n      copyMerged.sorted_by\n    } ${getColumnDisplayName(sorting[0].id)} ${\n      sorting[0].desc ? copyMerged.descending : copyMerged.ascending\n    }`\n  }\n\n  return (\n    <Text css={{ fontWeight: 600, ...css }}>{`${totalRows} items ${\n      isSorted ? getSortingString(sorting) : ''\n    }`}</Text>\n  )\n}\n"],"names":["defaultCopy","DataTableMetaData","copy","css","_a","_b","getState","columns","getRowModel","useDataTable","sorting","isSorted","totalRows","copyMerged","getColumnDisplayName","id","sortedColumn","col","getSortingString","React","Text"],"mappings":"2IAiBA,MAAMA,EAAc,CAClB,UAAW,YACX,UAAW,YACX,WAAY,aACZ,UAAW,GACb,EAEaC,EAAuD,CAAC,CACnE,KAAAC,EACA,IAAAC,CACF,IAAM,CA3BN,IAAAC,EAAAC,EA4BE,KAAM,CAAE,SAAAC,EAAU,QAAAC,EAAS,YAAAC,CAAY,EAAIC,EAAAA,EACrC,CAAE,QAAAC,CAAQ,EAAIJ,EAAS,EACvBK,EAAWD,EAAQ,OAAS,EAE5BE,GAAYP,GAAAD,EAAAI,EAAAA,IAAA,KAAA,OAAAJ,EAAe,OAAf,KAAA,OAAAC,EAAqB,OAEjCQ,EAAa,CAAE,GAAGb,EAAa,GAAGE,CAAK,EAEvCY,EAAwBC,GAAe,CAC3C,MAAMC,EAAeT,EAAQ,KAAMU,GAAQA,EAAI,KAAOF,CAAE,EACxD,OAAOC,GAAA,KAAAA,OAAAA,EAAc,SAAUD,CACjC,EAEMG,EAAoBR,GACjB,GAAGG,EAAW,aACnBA,EAAW,aACTC,EAAqBJ,EAAQ,GAAG,EAAE,KACpCA,EAAQ,GAAG,KAAOG,EAAW,WAAaA,EAAW,YAIzD,OACEM,EAAA,cAACC,EAAA,CAAK,IAAK,CAAE,WAAY,IAAK,GAAGjB,CAAI,CAAA,EAAI,GAAGS,WAC1CD,EAAWO,EAAiBR,CAAO,EAAI,IACtC,CAEP"}

package/dist/components/pagination/Pagination.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-import type { TPaginationProps } from './types';
-export declare const Pagination: React.FC<TPaginationProps>;
+import type { IPaginationProps } from './types';
+export declare const Pagination: React.FC<IPaginationProps>;

package/dist/components/pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sources":["../../../src/components/pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { ColorScheme } from '../../experiments/color-scheme'\nimport { Flex } from '..'\nimport { PaginationProvider } from './pagination-context/PaginationContext'\nimport { PaginationNextButton } from './PaginationNextButton'\nimport { PaginationPages } from './PaginationPages'\nimport { PaginationPreviousButton } from './PaginationPreviousButton'\nimport type { TPaginationProps } from './types'\n\nexport const Pagination: React.FC<TPaginationProps> = ({\n  colorScheme,\n  css,\n  ...paginationProps\n}) => {\n  // Return null if pages is 0 or undefined\n  if (!paginationProps?.pagesCount) {\n    return null\n  }\n\n  return (\n    <ColorScheme base=\"grey1\" accent=\"blue1\" {...colorScheme} asChild>\n      <Flex css={css}>\n        <PaginationProvider {...paginationProps}>\n          <PaginationPreviousButton />\n          <PaginationPages />\n          <PaginationNextButton />\n        </PaginationProvider>\n      </Flex>\n    </ColorScheme>\n  )\n}\n\nPagination.displayName = 'Pagination'\n"],"names":["Pagination","colorScheme","css","paginationProps","React","ColorScheme","Flex","PaginationProvider","PaginationPreviousButton","PaginationPages","PaginationNextButton"],"mappings":"g5GAUa,MAAAA,EAAyC,CAAC,CACrD,YAAAC,EACA,IAAAC,KACGC,CACL,IAEOA,GAAA,MAAAA,EAAiB,WAKpBC,EAAA,cAACC,EAAA,CAAY,KAAK,QAAQ,OAAO,QAAS,GAAGJ,EAAa,QAAO,EAC/DG,EAAAA,EAAA,cAACE,EAAA,CAAK,IAAKJ,CAAAA,EACTE,EAAA,cAACG,EAAA,CAAoB,GAAGJ,CAAAA,EACtBC,EAAA,cAACI,EAAA,IAAyB,EAC1BJ,EAAA,cAACK,EAAA,IAAgB,EACjBL,EAAA,cAACM,EAAA,IAAqB,CACxB,CACF,CACF,EAZO,KAgBXV,EAAW,YAAc"}
+{"version":3,"file":"Pagination.js","sources":["../../../src/components/pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { ColorScheme } from '../../experiments/color-scheme'\nimport { Flex } from '..'\nimport { PaginationProvider } from './pagination-context/PaginationContext'\nimport { PaginationNextButton } from './PaginationNextButton'\nimport { PaginationPages } from './PaginationPages'\nimport { PaginationPreviousButton } from './PaginationPreviousButton'\nimport type { IPaginationProps } from './types'\n\nexport const Pagination: React.FC<IPaginationProps> = ({\n  colorScheme,\n  css,\n  ...paginationProps\n}) => {\n  // Return null if pages is 0 or undefined\n  if (!paginationProps?.pagesCount) {\n    return null\n  }\n\n  return (\n    <ColorScheme base=\"grey1\" accent=\"blue1\" {...colorScheme} asChild>\n      <Flex css={css}>\n        <PaginationProvider {...paginationProps}>\n          <PaginationPreviousButton />\n          <PaginationPages />\n          <PaginationNextButton />\n        </PaginationProvider>\n      </Flex>\n    </ColorScheme>\n  )\n}\n\nPagination.displayName = 'Pagination'\n"],"names":["Pagination","colorScheme","css","paginationProps","React","ColorScheme","Flex","PaginationProvider","PaginationPreviousButton","PaginationPages","PaginationNextButton"],"mappings":"g5GAUa,MAAAA,EAAyC,CAAC,CACrD,YAAAC,EACA,IAAAC,KACGC,CACL,IAEOA,GAAA,MAAAA,EAAiB,WAKpBC,EAAA,cAACC,EAAA,CAAY,KAAK,QAAQ,OAAO,QAAS,GAAGJ,EAAa,QAAO,EAC/DG,EAAAA,EAAA,cAACE,EAAA,CAAK,IAAKJ,CAAAA,EACTE,EAAA,cAACG,EAAA,CAAoB,GAAGJ,CAAAA,EACtBC,EAAA,cAACI,EAAA,IAAyB,EAC1BJ,EAAA,cAACK,EAAA,IAAgB,EACjBL,EAAA,cAACM,EAAA,IAAqB,CACxB,CACF,CACF,EAZO,KAgBXV,EAAW,YAAc"}

package/dist/components/pagination/PaginationItem.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{styled as c}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{focusVisibleStyleBlock as b}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";import"../accordion/Accordion.js";import"../action-icon/ActionIcon.js";import"../alert-dialog/AlertDialog.js";import"../alert-dialog/alert-context/AlertContext.js";import"../avatar/Avatar.js";import"../badge/Badge.js";import{Box as $}from"../box/Box.js";import"../button/Button.js";import"../carousel/Carousel.js";import"../checkbox/Checkbox.js";import"../checkbox-field/CheckboxField.js";import"../chip/Chip.js";import"../chip/ChipGroup.js";import"../chip-dismissible-group/index.js";import"../chip-toggle-group/index.js";import"../combobox/Combobox.js";import"../data-table/DataTableContext.js";import"../data-table/DataTable.js";import"../date-field/DateField.js";import"../date-input/DateInput.js";import"../dialog/Dialog.js";import"../dismissible/index.js";import"../dismissible-group/index.js";import"../divider/Divider.js";import"../dropdown-menu/DropdownMenu.js";import"../empty-state/EmptyState.js";import"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../file-input/FileInput.js";import"../flex/Flex.js";import"../form/Form.js";import"dlv";import"react-hook-form";import"../grid/Grid.js";import"../heading/Heading.js";import"../icon/Icon.js";import"../image/Image.js";import"../inline-message/InlineMessage.js";import"../input/Input.js";import"../input-field/InputField.js";import"../label/Label.js";import"../link/Link.js";import"../list/List.js";import"../loader/Loader.js";import"../markdown-content/MarkdownContent.js";import"../navigation/NavigationMenu.js";import"../notification-badge/NotificationBadge.js";import"../number-input/NumberInput.js";import"../number-input-field/NumberInputField.js";import"./Pagination.js";import"../password-field/PasswordField.js";import"../password-input/PasswordInput.js";import"../popover/Popover.js";import"../progress-bar/ProgressBar.js";import"../radio-button/RadioButton.js";import"../radio-button/RadioButtonGroup.js";import"../radio-button-field/RadioButtonField.js";import"../radio-card/RadioCard.js";import"@radix-ui/react-radio-group";import"../stack/Stack.js";import"../search-field/SearchField.js";import"../search-input/SearchInput.js";import"../section-message/SectionMessage.js";import"../select/Select.js";import"../select-field/SelectField.js";import"../sidedrawer/Sidedrawer.js";import"../slider/Slider.js";import"../slider-field/SliderField.js";import"../sortable/SortableHandle.js";import"../sortable/SortableItem.js";import"../sortable/SortableRoot.js";import"../stack-content/StackContent.js";import"../stepper/Stepper.js";import"../switch/Switch.js";import"../table/Table.js";import"../tabs/Tabs.js";import"../text/Text.js";import"../textarea/Textarea.js";import"../textarea-field/TextareaField.js";import"../toast/ToastProvider.js";import"../toggle-group/ToggleGroupButton.js";import"../toggle-group/ToggleGroupItem.js";import"../toggle-group/ToggleGroupRoot.js";import"../tooltip/Tooltip.js";import"../top-bar/TopBar.js";import"../video/Video.js";import"../banner/banner-regular/BannerRegular.js";import"../tile/Tile.js";import"../tile-interactive/TileInteractive.js";import"../tile-toggle-group/index.js";import{usePagination as u}from"./usePagination.js";const r=c($,{borderRadius:"$round",size:"4px",bg:"$accent9"}),g=c("button",{alignItems:"center",border:"unset",borderRadius:"$0",cursor:"pointer",fontFamily:"$body",justifyContent:"center",whiteSpace:"nowrap",width:"max-content",display:"flex",flexDirection:"column",p:"0",fontWeight:400,color:"$grey800",bg:"$base1","&:not(:disabled)":{"&:hover":{color:"$accent10",bg:"$base2"},"&:active":{bg:"$base3",color:"$grey1000"},"&:focus-visible":{...b()}},"&:disabled":{opacity:"0.3",cursor:"not-allowed"},variants:{size:{md:{width:"$4",height:"$4"}},selected:{true:{border:"1px solid $accent9",color:"$accent9",fontWeight:600,"&:not(:disabled)":{"&:hover":{borderColor:"$accent10",color:"$accent10"},"&:active":{borderColor:"$accent11",fontColor:"$accent11"}}}},indicated:{true:{fontWeight:600,color:"$accent9","&:not(:disabled)":{"&:hover":{color:"$accent10",[`& ${r}`]:{bg:"$accent10"}},"&:active":{color:"$accent11",[`& ${r}`]:{bg:"$accent11"}}}}}}}),f=({pageNumber:o,css:n})=>{const{currentPage:a,goToPage:l,indicatedPages:s,disabledPages:d,onItemHover:i}=u(),m=s.includes(o),p=d.includes(o),t=a===o;return e.createElement(g,{selected:t,size:"md",onClick:()=>l(o),css:n,indicated:m,disabled:p,"aria-current":t&&"page","aria-disabled":p,onMouseOver:()=>{t||i==null||i(o)}},o,m&&e.createElement(r,null))};export{f as PaginationItem};
+import*as i from"react";import{styled as c}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{focusVisibleStyleBlock as $}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";import"../accordion/Accordion.js";import"../action-icon/ActionIcon.js";import"../alert-dialog/AlertDialog.js";import"../alert-dialog/alert-context/AlertContext.js";import"../avatar/Avatar.js";import"../badge/Badge.js";import{Box as n}from"../box/Box.js";import"../button/Button.js";import"../carousel/Carousel.js";import"../checkbox/Checkbox.js";import"../checkbox-field/CheckboxField.js";import"../chip/Chip.js";import"../chip/ChipGroup.js";import"../chip-dismissible-group/index.js";import"../chip-toggle-group/index.js";import"../combobox/Combobox.js";import"../data-table/DataTableContext.js";import"../data-table/DataTable.js";import"../date-field/DateField.js";import"../date-input/DateInput.js";import"../dialog/Dialog.js";import"../dismissible/index.js";import"../dismissible-group/index.js";import"../divider/Divider.js";import"../dropdown-menu/DropdownMenu.js";import"../empty-state/EmptyState.js";import"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../file-input/FileInput.js";import"../flex/Flex.js";import"../form/Form.js";import"dlv";import"react-hook-form";import"../grid/Grid.js";import"../heading/Heading.js";import"../icon/Icon.js";import"../image/Image.js";import"../inline-message/InlineMessage.js";import"../input/Input.js";import"../input-field/InputField.js";import"../label/Label.js";import"../link/Link.js";import"../list/List.js";import"../loader/Loader.js";import"../markdown-content/MarkdownContent.js";import"../navigation/NavigationMenu.js";import"../notification-badge/NotificationBadge.js";import"../number-input/NumberInput.js";import"../number-input-field/NumberInputField.js";import"./Pagination.js";import"../password-field/PasswordField.js";import"../password-input/PasswordInput.js";import"../popover/Popover.js";import"../progress-bar/ProgressBar.js";import"../radio-button/RadioButton.js";import"../radio-button/RadioButtonGroup.js";import"../radio-button-field/RadioButtonField.js";import"../radio-card/RadioCard.js";import"@radix-ui/react-radio-group";import"../stack/Stack.js";import"../search-field/SearchField.js";import"../search-input/SearchInput.js";import"../section-message/SectionMessage.js";import"../select/Select.js";import"../select-field/SelectField.js";import"../sidedrawer/Sidedrawer.js";import"../slider/Slider.js";import"../slider-field/SliderField.js";import"../sortable/SortableHandle.js";import"../sortable/SortableItem.js";import"../sortable/SortableRoot.js";import"../stack-content/StackContent.js";import"../stepper/Stepper.js";import"../switch/Switch.js";import"../table/Table.js";import"../tabs/Tabs.js";import"../text/Text.js";import"../textarea/Textarea.js";import"../textarea-field/TextareaField.js";import"../toast/ToastProvider.js";import"../toggle-group/ToggleGroupButton.js";import"../toggle-group/ToggleGroupItem.js";import"../toggle-group/ToggleGroupRoot.js";import"../tooltip/Tooltip.js";import"../top-bar/TopBar.js";import"../video/Video.js";import"../banner/banner-regular/BannerRegular.js";import"../tile/Tile.js";import"../tile-interactive/TileInteractive.js";import"../tile-toggle-group/index.js";import{usePagination as u}from"./usePagination.js";const m=c(n,{position:"absolute",bottom:"-$1",left:"0",transform:"translateX(50%)",borderRadius:"$round",size:"4px",bg:"$accent9"}),g=c("button",{alignItems:"center",border:"unset",borderRadius:"$0",cursor:"pointer",fontFamily:"$body",justifyContent:"center",whiteSpace:"nowrap",width:"max-content",display:"flex",flexDirection:"column",p:"0",fontWeight:400,color:"$grey800",bg:"$base1","&:not(:disabled)":{"&:hover":{color:"$accent10",bg:"$base2"},"&:active":{bg:"$base3",color:"$grey1000"},"&:focus-visible":{...$()}},"&:disabled":{opacity:"0.3",cursor:"not-allowed"},variants:{size:{md:{width:"$4",height:"$4"}},selected:{true:{border:"1px solid $accent9",color:"$accent9",fontWeight:600,"&:not(:disabled)":{"&:hover":{borderColor:"$accent10",color:"$accent10"},"&:active":{borderColor:"$accent11",fontColor:"$accent11"}}}},indicated:{true:{fontWeight:600,color:"$accent9","&:not(:disabled)":{"&:hover":{color:"$accent10",[`& ${m}`]:{bg:"$accent10"}},"&:active":{color:"$accent11",[`& ${m}`]:{bg:"$accent11"}}}}}}}),f=({pageNumber:t,css:a})=>{const{currentPage:s,goToPage:l,indicatedPages:d,disabledPages:b,onItemHover:e}=u(),p=d.includes(t),o=b.includes(t),r=s===t;return i.createElement(g,{selected:r,size:"md",onClick:()=>l(t),css:a,indicated:p,disabled:o,"aria-current":r&&"page","aria-disabled":o,onMouseOver:()=>{r||o||e==null||e(t)}},p?i.createElement(n,{css:{position:"relative"}},t,i.createElement(m,null)):t)};export{f as PaginationItem};
 //# sourceMappingURL=PaginationItem.js.map

package/dist/components/pagination/PaginationItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationItem.js","sources":["../../../src/components/pagination/PaginationItem.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { focusVisibleStyleBlock } from '~/utilities'\n\nimport { styled } from '../../stitches'\nimport { Box } from '..'\nimport type { IPaginationItemProps } from './types'\nimport { usePagination } from './usePagination'\n\nconst Dot = styled(Box, {\n  borderRadius: '$round',\n  size: '4px',\n  bg: '$accent9'\n})\n\nconst StyledButton = styled('button', {\n  alignItems: 'center',\n  border: 'unset',\n  borderRadius: '$0',\n  cursor: 'pointer',\n  fontFamily: '$body',\n  justifyContent: 'center',\n  whiteSpace: 'nowrap',\n  width: 'max-content',\n  display: 'flex',\n  flexDirection: 'column',\n  p: '0',\n  fontWeight: 400,\n  color: '$grey800',\n  bg: '$base1',\n  '&:not(:disabled)': {\n    '&:hover': {\n      color: '$accent10',\n      bg: '$base2'\n    },\n    '&:active': {\n      bg: '$base3',\n      color: '$grey1000'\n    },\n    '&:focus-visible': {\n      ...focusVisibleStyleBlock()\n    }\n  },\n  '&:disabled': {\n    opacity: '0.3',\n    cursor: 'not-allowed'\n  },\n  variants: {\n    size: {\n      md: {\n        width: '$4',\n        height: '$4'\n      }\n    },\n    selected: {\n      true: {\n        border: '1px solid $accent9',\n        color: '$accent9',\n        fontWeight: 600,\n        '&:not(:disabled)': {\n          '&:hover': {\n            borderColor: '$accent10',\n            color: '$accent10'\n          },\n          '&:active': {\n            borderColor: '$accent11',\n            fontColor: '$accent11'\n          }\n        }\n      }\n    },\n    indicated: {\n      true: {\n        fontWeight: 600,\n        color: '$accent9',\n        '&:not(:disabled)': {\n          '&:hover': {\n            color: '$accent10',\n            [`& ${Dot}`]: {\n              bg: '$accent10'\n            }\n          },\n          '&:active': {\n            color: '$accent11',\n            [`& ${Dot}`]: {\n              bg: '$accent11'\n            }\n          }\n        }\n      }\n    }\n  }\n})\n\nexport const PaginationItem: React.FC<IPaginationItemProps> = ({\n  pageNumber,\n  css\n}) => {\n  const { currentPage, goToPage, indicatedPages, disabledPages, onItemHover } =\n    usePagination()\n\n  const isIndicated = indicatedPages.includes(pageNumber)\n  const isDisabled = disabledPages.includes(pageNumber)\n\n  const isSelected = currentPage === pageNumber\n\n  const handleOnHover = () => {\n    if (isSelected) return\n    onItemHover?.(pageNumber)\n  }\n\n  return (\n    <StyledButton\n      selected={isSelected}\n      size=\"md\"\n      onClick={() => goToPage(pageNumber)}\n      css={css}\n      indicated={isIndicated}\n      disabled={isDisabled}\n      aria-current={isSelected && 'page'}\n      aria-disabled={isDisabled}\n      onMouseOver={handleOnHover}\n    >\n      {pageNumber}\n      {isIndicated && <Dot />}\n    </StyledButton>\n  )\n}\n"],"names":["Dot","styled","Box","StyledButton","focusVisibleStyleBlock","PaginationItem","pageNumber","css","currentPage","goToPage","indicatedPages","disabledPages","onItemHover","usePagination","isIndicated","isDisabled","isSelected","React"],"mappings":"67GASA,MAAMA,EAAMC,EAAOC,EAAK,CACtB,aAAc,SACd,KAAM,MACN,GAAI,UACN,CAAC,EAEKC,EAAeF,EAAO,SAAU,CACpC,WAAY,SACZ,OAAQ,QACR,aAAc,KACd,OAAQ,UACR,WAAY,QACZ,eAAgB,SAChB,WAAY,SACZ,MAAO,cACP,QAAS,OACT,cAAe,SACf,EAAG,IACH,WAAY,IACZ,MAAO,WACP,GAAI,SACJ,mBAAoB,CAClB,UAAW,CACT,MAAO,YACP,GAAI,QACN,EACA,WAAY,CACV,GAAI,SACJ,MAAO,WACT,EACA,kBAAmB,CACjB,GAAGG,EACL,CAAA,CACF,EACA,aAAc,CACZ,QAAS,MACT,OAAQ,aACV,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,MAAO,KACP,OAAQ,IACV,CACF,EACA,SAAU,CACR,KAAM,CACJ,OAAQ,qBACR,MAAO,WACP,WAAY,IACZ,mBAAoB,CAClB,UAAW,CACT,YAAa,YACb,MAAO,WACT,EACA,WAAY,CACV,YAAa,YACb,UAAW,WACb,CACF,CACF,CACF,EACA,UAAW,CACT,KAAM,CACJ,WAAY,IACZ,MAAO,WACP,mBAAoB,CAClB,UAAW,CACT,MAAO,YACP,CAAC,KAAKJ,KAAQ,CACZ,GAAI,WACN,CACF,EACA,WAAY,CACV,MAAO,YACP,CAAC,KAAKA,KAAQ,CACZ,GAAI,WACN,CACF,CACF,CACF,CACF,CACF,CACF,CAAC,EAEYK,EAAiD,CAAC,CAC7D,WAAAC,EACA,IAAAC,CACF,IAAM,CACJ,KAAM,CAAE,YAAAC,EAAa,SAAAC,EAAU,eAAAC,EAAgB,cAAAC,EAAe,YAAAC,CAAY,EACxEC,IAEIC,EAAcJ,EAAe,SAASJ,CAAU,EAChDS,EAAaJ,EAAc,SAASL,CAAU,EAE9CU,EAAaR,IAAgBF,EAOnC,OACEW,EAAA,cAACd,EAAA,CACC,SAAUa,EACV,KAAK,KACL,QAAS,IAAMP,EAASH,CAAU,EAClC,IAAKC,EACL,UAAWO,EACX,SAAUC,EACV,eAAcC,GAAc,OAC5B,gBAAeD,EACf,YAfkB,IAAM,CACtBC,GACJJ,GAAA,MAAAA,EAAcN,CAChB,CAAA,CAAA,EAcKA,EACAQ,GAAeG,EAAA,cAACjB,EAAA,IAAI,CACvB,CAEJ"}
+{"version":3,"file":"PaginationItem.js","sources":["../../../src/components/pagination/PaginationItem.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { focusVisibleStyleBlock } from '~/utilities'\n\nimport { styled } from '../../stitches'\nimport { Box } from '..'\nimport type { IPaginationItemProps } from './types'\nimport { usePagination } from './usePagination'\n\nconst Dot = styled(Box, {\n  position: 'absolute',\n  bottom: '-$1',\n  left: '0',\n  transform: 'translateX(50%)',\n  borderRadius: '$round',\n  size: '4px',\n  bg: '$accent9'\n})\n\nconst StyledButton = styled('button', {\n  alignItems: 'center',\n  border: 'unset',\n  borderRadius: '$0',\n  cursor: 'pointer',\n  fontFamily: '$body',\n  justifyContent: 'center',\n  whiteSpace: 'nowrap',\n  width: 'max-content',\n  display: 'flex',\n  flexDirection: 'column',\n  p: '0',\n  fontWeight: 400,\n  color: '$grey800',\n  bg: '$base1',\n  '&:not(:disabled)': {\n    '&:hover': {\n      color: '$accent10',\n      bg: '$base2'\n    },\n    '&:active': {\n      bg: '$base3',\n      color: '$grey1000'\n    },\n    '&:focus-visible': {\n      ...focusVisibleStyleBlock()\n    }\n  },\n  '&:disabled': {\n    opacity: '0.3',\n    cursor: 'not-allowed'\n  },\n  variants: {\n    size: {\n      md: {\n        width: '$4',\n        height: '$4'\n      }\n    },\n    selected: {\n      true: {\n        border: '1px solid $accent9',\n        color: '$accent9',\n        fontWeight: 600,\n        '&:not(:disabled)': {\n          '&:hover': {\n            borderColor: '$accent10',\n            color: '$accent10'\n          },\n          '&:active': {\n            borderColor: '$accent11',\n            fontColor: '$accent11'\n          }\n        }\n      }\n    },\n    indicated: {\n      true: {\n        fontWeight: 600,\n        color: '$accent9',\n        '&:not(:disabled)': {\n          '&:hover': {\n            color: '$accent10',\n            [`& ${Dot}`]: {\n              bg: '$accent10'\n            }\n          },\n          '&:active': {\n            color: '$accent11',\n            [`& ${Dot}`]: {\n              bg: '$accent11'\n            }\n          }\n        }\n      }\n    }\n  }\n})\n\nexport const PaginationItem: React.FC<IPaginationItemProps> = ({\n  pageNumber,\n  css\n}) => {\n  const { currentPage, goToPage, indicatedPages, disabledPages, onItemHover } =\n    usePagination()\n\n  const isIndicated = indicatedPages.includes(pageNumber)\n  const isDisabled = disabledPages.includes(pageNumber)\n\n  const isSelected = currentPage === pageNumber\n\n  const handleOnHover = () => {\n    if (isSelected || isDisabled) return\n    onItemHover?.(pageNumber)\n  }\n\n  return (\n    <StyledButton\n      selected={isSelected}\n      size=\"md\"\n      onClick={() => goToPage(pageNumber)}\n      css={css}\n      indicated={isIndicated}\n      disabled={isDisabled}\n      aria-current={isSelected && 'page'}\n      aria-disabled={isDisabled}\n      onMouseOver={handleOnHover}\n    >\n      {isIndicated ? (\n        <Box css={{ position: 'relative' }}>\n          {pageNumber}\n          <Dot />\n        </Box>\n      ) : (\n        pageNumber\n      )}\n    </StyledButton>\n  )\n}\n"],"names":["Dot","styled","Box","StyledButton","focusVisibleStyleBlock","PaginationItem","pageNumber","css","currentPage","goToPage","indicatedPages","disabledPages","onItemHover","usePagination","isIndicated","isDisabled","isSelected","React"],"mappings":"67GASA,MAAMA,EAAMC,EAAOC,EAAK,CACtB,SAAU,WACV,OAAQ,MACR,KAAM,IACN,UAAW,kBACX,aAAc,SACd,KAAM,MACN,GAAI,UACN,CAAC,EAEKC,EAAeF,EAAO,SAAU,CACpC,WAAY,SACZ,OAAQ,QACR,aAAc,KACd,OAAQ,UACR,WAAY,QACZ,eAAgB,SAChB,WAAY,SACZ,MAAO,cACP,QAAS,OACT,cAAe,SACf,EAAG,IACH,WAAY,IACZ,MAAO,WACP,GAAI,SACJ,mBAAoB,CAClB,UAAW,CACT,MAAO,YACP,GAAI,QACN,EACA,WAAY,CACV,GAAI,SACJ,MAAO,WACT,EACA,kBAAmB,CACjB,GAAGG,EAAuB,CAC5B,CACF,EACA,aAAc,CACZ,QAAS,MACT,OAAQ,aACV,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,MAAO,KACP,OAAQ,IACV,CACF,EACA,SAAU,CACR,KAAM,CACJ,OAAQ,qBACR,MAAO,WACP,WAAY,IACZ,mBAAoB,CAClB,UAAW,CACT,YAAa,YACb,MAAO,WACT,EACA,WAAY,CACV,YAAa,YACb,UAAW,WACb,CACF,CACF,CACF,EACA,UAAW,CACT,KAAM,CACJ,WAAY,IACZ,MAAO,WACP,mBAAoB,CAClB,UAAW,CACT,MAAO,YACP,CAAC,KAAKJ,KAAQ,CACZ,GAAI,WACN,CACF,EACA,WAAY,CACV,MAAO,YACP,CAAC,KAAKA,KAAQ,CACZ,GAAI,WACN,CACF,CACF,CACF,CACF,CACF,CACF,CAAC,EAEYK,EAAiD,CAAC,CAC7D,WAAAC,EACA,IAAAC,CACF,IAAM,CACJ,KAAM,CAAE,YAAAC,EAAa,SAAAC,EAAU,eAAAC,EAAgB,cAAAC,EAAe,YAAAC,CAAY,EACxEC,EAAc,EAEVC,EAAcJ,EAAe,SAASJ,CAAU,EAChDS,EAAaJ,EAAc,SAASL,CAAU,EAE9CU,EAAaR,IAAgBF,EAOnC,OACEW,EAAA,cAACd,EAAA,CACC,SAAUa,EACV,KAAK,KACL,QAAS,IAAMP,EAASH,CAAU,EAClC,IAAKC,EACL,UAAWO,EACX,SAAUC,EACV,eAAcC,GAAc,OAC5B,gBAAeD,EACf,YAfkB,IAAM,CACtBC,GAAcD,GAClBH,GAAA,MAAAA,EAAcN,CAAAA,CAChB,GAcKQ,EACCG,EAAA,cAACf,EAAA,CAAI,IAAK,CAAE,SAAU,UAAW,CAC9BI,EAAAA,EACDW,EAAA,cAACjB,EAAA,IAAI,CACP,EAEAM,CAEJ,CAEJ"}

package/dist/components/pagination/PaginationNextButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationNextButton.js","sources":["../../../src/components/pagination/PaginationNextButton.tsx"],"sourcesContent":["import { ChevronRight } from '@atom-learning/icons'\nimport * as React from 'react'\nimport { styled } from '~/stitches'\n\nimport { ActionIcon } from '../action-icon'\nimport { Icon } from '../icon'\nimport { TRUNCATED_THRESHOLD } from './pagination.constants'\nimport { getPaginationItemsToRender } from './pagination.helper'\nimport { usePagination } from './usePagination'\n\nconst StyledActionIcon = styled(ActionIcon, {\n  ml: '$1',\n  '&:disabled': {\n    opacity: '0.3'\n  }\n})\n\nexport const PaginationNextButton = (\n  props: Partial<React.ComponentProps<typeof StyledActionIcon>>\n) => {\n  const {\n    goToNextPage,\n    currentPage,\n    pagesCount,\n    labels,\n    disabledPages,\n    isMaxVisibleElementCount\n  } = usePagination()\n\n  const paginationItemsInview = getPaginationItemsToRender(\n    currentPage,\n    pagesCount,\n    TRUNCATED_THRESHOLD,\n    isMaxVisibleElementCount\n  )\n  // Check if we are on the last page or if the last page is disabled and the if the second to last page number is rendered\n  const isDisabled =\n    currentPage === pagesCount ||\n    (disabledPages.includes(pagesCount) &&\n      paginationItemsInview.includes(pagesCount - 1))\n\n  return (\n    <StyledActionIcon\n      hasTooltip={false}\n      size=\"md\"\n      theme=\"neutral\"\n      onClick={goToNextPage}\n      disabled={isDisabled}\n      {...props}\n      label={labels?.nextPageButtonLabel || 'Next page'}\n    >\n      <Icon is={ChevronRight} />\n    </StyledActionIcon>\n  )\n}\n"],"names":["StyledActionIcon","styled","ActionIcon","PaginationNextButton","props","goToNextPage","currentPage","pagesCount","labels","disabledPages","isMaxVisibleElementCount","usePagination","paginationItemsInview","getPaginationItemsToRender","TRUNCATED_THRESHOLD","isDisabled","React","Icon","ChevronRight"],"mappings":"+YAUA,MAAMA,EAAmBC,EAAOC,EAAY,CAC1C,GAAI,KACJ,aAAc,CACZ,QAAS,KACX,CACF,CAAC,EAEYC,EACXC,GACG,CACH,KAAM,CACJ,aAAAC,EACA,YAAAC,EACA,WAAAC,EACA,OAAAC,EACA,cAAAC,EACA,yBAAAC,CACF,EAAIC,EAAAA,EAEEC,EAAwBC,EAC5BP,EACAC,EACAO,EACAJ,CACF,EAEMK,EACJT,IAAgBC,GACfE,EAAc,SAASF,CAAU,GAChCK,EAAsB,SAASL,EAAa,CAAC,EAEjD,OACES,EAAA,cAAChB,EAAA,CACC,WAAY,GACZ,KAAK,KACL,MAAM,UACN,QAASK,EACT,SAAUU,EACT,GAAGX,EACJ,OAAOI,GAAA,KAAA,OAAAA,EAAQ,sBAAuB,WAEtCQ,EAAAA,EAAA,cAACC,EAAA,CAAK,GAAIC,CAAc,CAAA,CAC1B,CAEJ"}
+{"version":3,"file":"PaginationNextButton.js","sources":["../../../src/components/pagination/PaginationNextButton.tsx"],"sourcesContent":["import { ChevronRight } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { ActionIcon } from '../action-icon'\nimport { Icon } from '../icon'\nimport { TRUNCATED_THRESHOLD } from './pagination.constants'\nimport { getPaginationItemsToRender } from './pagination.helper'\nimport { usePagination } from './usePagination'\n\nconst StyledActionIcon = styled(ActionIcon, {\n  ml: '$1',\n  '&:disabled': {\n    opacity: '0.3'\n  }\n})\n\nexport const PaginationNextButton = (\n  props: Partial<React.ComponentProps<typeof StyledActionIcon>>\n) => {\n  const {\n    goToNextPage,\n    currentPage,\n    pagesCount,\n    labels,\n    disabledPages,\n    isMaxVisibleElementCount\n  } = usePagination()\n\n  const paginationItemsInview = getPaginationItemsToRender(\n    currentPage,\n    pagesCount,\n    TRUNCATED_THRESHOLD,\n    isMaxVisibleElementCount\n  )\n  // Check if we are on the last page or if the last page is disabled and the if the second to last page number is rendered\n  const isDisabled =\n    currentPage === pagesCount ||\n    (disabledPages.includes(pagesCount) &&\n      paginationItemsInview.includes(pagesCount - 1))\n\n  return (\n    <StyledActionIcon\n      hasTooltip={false}\n      size=\"md\"\n      theme=\"neutral\"\n      onClick={goToNextPage}\n      disabled={isDisabled}\n      {...props}\n      label={labels?.nextPageButtonLabel || 'Next page'}\n    >\n      <Icon is={ChevronRight} />\n    </StyledActionIcon>\n  )\n}\n"],"names":["StyledActionIcon","styled","ActionIcon","PaginationNextButton","props","goToNextPage","currentPage","pagesCount","labels","disabledPages","isMaxVisibleElementCount","usePagination","paginationItemsInview","getPaginationItemsToRender","TRUNCATED_THRESHOLD","isDisabled","React","Icon","ChevronRight"],"mappings":"+YAWA,MAAMA,EAAmBC,EAAOC,EAAY,CAC1C,GAAI,KACJ,aAAc,CACZ,QAAS,KACX,CACF,CAAC,EAEYC,EACXC,GACG,CACH,KAAM,CACJ,aAAAC,EACA,YAAAC,EACA,WAAAC,EACA,OAAAC,EACA,cAAAC,EACA,yBAAAC,CACF,EAAIC,EAAAA,EAEEC,EAAwBC,EAC5BP,EACAC,EACAO,EACAJ,CACF,EAEMK,EACJT,IAAgBC,GACfE,EAAc,SAASF,CAAU,GAChCK,EAAsB,SAASL,EAAa,CAAC,EAEjD,OACES,EAAA,cAAChB,EAAA,CACC,WAAY,GACZ,KAAK,KACL,MAAM,UACN,QAASK,EACT,SAAUU,EACT,GAAGX,EACJ,OAAOI,GAAA,KAAA,OAAAA,EAAQ,sBAAuB,WAEtCQ,EAAAA,EAAA,cAACC,EAAA,CAAK,GAAIC,CAAc,CAAA,CAC1B,CAEJ"}

package/dist/components/pagination/PaginationPreviousButton.js

@@ -1,2 +1,2 @@
-import{ChevronLeft as u}from"@atom-learning/icons";import*as t from"react";import{ActionIcon as c}from"../action-icon/ActionIcon.js";import{Icon as p}from"../icon/Icon.js";import{TRUNCATED_THRESHOLD as d}from"./pagination.constants.js";import{getPaginationItemsToRender as g}from"./pagination.helper.js";import{usePagination as P}from"./usePagination.js";import{styled as f}from"../../stitches.js";const b=f(c,{mr:"$1","&:disabled":{opacity:"0.3"}}),v=i=>{const{goToPreviousPage:r,currentPage:e,labels:o,disabledPages:n,pagesCount:a,isMaxVisibleElementCount:s}=P(),m=g(e,a,d,s),l=e===1||n.includes(1)&&m.includes(1);return t.createElement(b,{hasTooltip:!1,size:"md",theme:"neutral",onClick:r,disabled:l,...i,label:(o==null?void 0:o.previousPageButtonLabel)||"Previous page"},t.createElement(p,{is:u}))};export{v as PaginationPreviousButton};
+import{ChevronLeft as u}from"@atom-learning/icons";import*as t from"react";import{styled as c}from"../../stitches.js";import{ActionIcon as p}from"../action-icon/ActionIcon.js";import{Icon as d}from"../icon/Icon.js";import{TRUNCATED_THRESHOLD as g}from"./pagination.constants.js";import{getPaginationItemsToRender as P}from"./pagination.helper.js";import{usePagination as f}from"./usePagination.js";const b=c(p,{mr:"$1","&:disabled":{opacity:"0.3"}}),v=i=>{const{goToPreviousPage:r,currentPage:e,labels:o,disabledPages:n,pagesCount:a,isMaxVisibleElementCount:s}=f(),m=P(e,a,g,s),l=e===1||n.includes(1)&&m.includes(1);return t.createElement(b,{hasTooltip:!1,size:"md",theme:"neutral",onClick:r,disabled:l,...i,label:(o==null?void 0:o.previousPageButtonLabel)||"Previous page"},t.createElement(d,{is:u}))};export{v as PaginationPreviousButton};
 //# sourceMappingURL=PaginationPreviousButton.js.map

package/dist/components/pagination/PaginationPreviousButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationPreviousButton.js","sources":["../../../src/components/pagination/PaginationPreviousButton.tsx"],"sourcesContent":["import { ChevronLeft } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { ActionIcon } from '../action-icon'\nimport { Icon } from '../icon'\nimport { TRUNCATED_THRESHOLD } from './pagination.constants'\nimport { getPaginationItemsToRender } from './pagination.helper'\nimport { usePagination } from './usePagination'\nimport { styled } from '~/stitches'\n\nconst StyledActionIcon = styled(ActionIcon, {\n  mr: '$1',\n  '&:disabled': {\n    opacity: '0.3'\n  }\n})\n\nexport const PaginationPreviousButton = (\n  props: Partial<React.ComponentProps<typeof StyledActionIcon>>\n) => {\n  const {\n    goToPreviousPage,\n    currentPage,\n    labels,\n    disabledPages,\n    pagesCount,\n    isMaxVisibleElementCount\n  } = usePagination()\n\n  const paginationItemsInview = getPaginationItemsToRender(\n    currentPage,\n    pagesCount,\n    TRUNCATED_THRESHOLD,\n    isMaxVisibleElementCount\n  )\n  // Check if we are on the first page or if the first page is disabled and the page number is rendered\n  const isDisabled =\n    currentPage === 1 ||\n    (disabledPages.includes(1) && paginationItemsInview.includes(1))\n\n  return (\n    <StyledActionIcon\n      hasTooltip={false}\n      size=\"md\"\n      theme=\"neutral\"\n      onClick={goToPreviousPage}\n      disabled={isDisabled}\n      {...props}\n      label={labels?.previousPageButtonLabel || 'Previous page'}\n    >\n      <Icon is={ChevronLeft} />\n    </StyledActionIcon>\n  )\n}\n"],"names":["StyledActionIcon","styled","ActionIcon","PaginationPreviousButton","props","goToPreviousPage","currentPage","labels","disabledPages","pagesCount","isMaxVisibleElementCount","usePagination","paginationItemsInview","getPaginationItemsToRender","TRUNCATED_THRESHOLD","isDisabled","React","Icon","ChevronLeft"],"mappings":"8YAUA,MAAMA,EAAmBC,EAAOC,EAAY,CAC1C,GAAI,KACJ,aAAc,CACZ,QAAS,KACX,CACF,CAAC,EAEYC,EACXC,GACG,CACH,KAAM,CACJ,iBAAAC,EACA,YAAAC,EACA,OAAAC,EACA,cAAAC,EACA,WAAAC,EACA,yBAAAC,CACF,EAAIC,EAEEC,EAAAA,EAAwBC,EAC5BP,EACAG,EACAK,EACAJ,CACF,EAEMK,EACJT,IAAgB,GACfE,EAAc,SAAS,CAAC,GAAKI,EAAsB,SAAS,CAAC,EAEhE,OACEI,EAAA,cAAChB,EAAA,CACC,WAAY,GACZ,KAAK,KACL,MAAM,UACN,QAASK,EACT,SAAUU,EACT,GAAGX,EACJ,OAAOG,GAAA,KAAA,OAAAA,EAAQ,0BAA2B,eAE1CS,EAAAA,EAAA,cAACC,EAAA,CAAK,GAAIC,CAAa,CAAA,CACzB,CAEJ"}
+{"version":3,"file":"PaginationPreviousButton.js","sources":["../../../src/components/pagination/PaginationPreviousButton.tsx"],"sourcesContent":["import { ChevronLeft } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { ActionIcon } from '../action-icon'\nimport { Icon } from '../icon'\nimport { TRUNCATED_THRESHOLD } from './pagination.constants'\nimport { getPaginationItemsToRender } from './pagination.helper'\nimport { usePagination } from './usePagination'\n\nconst StyledActionIcon = styled(ActionIcon, {\n  mr: '$1',\n  '&:disabled': {\n    opacity: '0.3'\n  }\n})\n\nexport const PaginationPreviousButton = (\n  props: Partial<React.ComponentProps<typeof StyledActionIcon>>\n) => {\n  const {\n    goToPreviousPage,\n    currentPage,\n    labels,\n    disabledPages,\n    pagesCount,\n    isMaxVisibleElementCount\n  } = usePagination()\n\n  const paginationItemsInview = getPaginationItemsToRender(\n    currentPage,\n    pagesCount,\n    TRUNCATED_THRESHOLD,\n    isMaxVisibleElementCount\n  )\n  // Check if we are on the first page or if the first page is disabled and the page number is rendered\n  const isDisabled =\n    currentPage === 1 ||\n    (disabledPages.includes(1) && paginationItemsInview.includes(1))\n\n  return (\n    <StyledActionIcon\n      hasTooltip={false}\n      size=\"md\"\n      theme=\"neutral\"\n      onClick={goToPreviousPage}\n      disabled={isDisabled}\n      {...props}\n      label={labels?.previousPageButtonLabel || 'Previous page'}\n    >\n      <Icon is={ChevronLeft} />\n    </StyledActionIcon>\n  )\n}\n"],"names":["StyledActionIcon","styled","ActionIcon","PaginationPreviousButton","props","goToPreviousPage","currentPage","labels","disabledPages","pagesCount","isMaxVisibleElementCount","usePagination","paginationItemsInview","getPaginationItemsToRender","TRUNCATED_THRESHOLD","isDisabled","React","Icon","ChevronLeft"],"mappings":"8YAWA,MAAMA,EAAmBC,EAAOC,EAAY,CAC1C,GAAI,KACJ,aAAc,CACZ,QAAS,KACX,CACF,CAAC,EAEYC,EACXC,GACG,CACH,KAAM,CACJ,iBAAAC,EACA,YAAAC,EACA,OAAAC,EACA,cAAAC,EACA,WAAAC,EACA,yBAAAC,CACF,EAAIC,EAEEC,EAAAA,EAAwBC,EAC5BP,EACAG,EACAK,EACAJ,CACF,EAEMK,EACJT,IAAgB,GACfE,EAAc,SAAS,CAAC,GAAKI,EAAsB,SAAS,CAAC,EAEhE,OACEI,EAAA,cAAChB,EAAA,CACC,WAAY,GACZ,KAAK,KACL,MAAM,UACN,QAASK,EACT,SAAUU,EACT,GAAGX,EACJ,OAAOG,GAAA,KAAA,OAAAA,EAAQ,0BAA2B,eAE1CS,EAAAA,EAAA,cAACC,EAAA,CAAK,GAAIC,CAAa,CAAA,CACzB,CAEJ"}

package/dist/components/pagination/pagination-context/PaginationContext.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
-import type { TPaginationContext, TPaginationProviderProps } from '../types';
-export declare const PaginationContext: React.Context<TPaginationContext>;
+import type { IPaginationContext, TPaginationProviderProps } from '../types';
+export declare const PaginationContext: React.Context<IPaginationContext>;
 export declare const PaginationProvider: React.FC<TPaginationProviderProps>;

package/dist/components/pagination/pagination-context/PaginationContext.js

@@ -1,2 +1,2 @@
-import*as a from"react";import{VisibleElementsAmount as g}from"../pagination.constants.js";import{findPreviousAvailablePage as S,findNextAvailablePage as T}from"../pagination.helper.js";const C=a.createContext({goToPage:()=>null,goToPreviousPage:()=>null,goToNextPage:()=>null,currentPage:1,visibleElementsCount:g.LESS,pagesCount:0,onItemHover:()=>null,labels:{},isMaxVisibleElementCount:!1,indicatedPages:[],disabledPages:[]}),A=({onSelectedPageChange:u,selectedPage:v,visibleElementsCount:i=g.LESS,pagesCount:l,indicatedPages:r=[],disabledPages:t=[],onItemHover:P,labels:d,children:E})=>{const[x,p]=a.useState(1),m=i===g.MORE,e=v||x,o=a.useCallback(n=>{p(n),u==null||u(n)},[]),b=a.useCallback(()=>{if(e===1)return;const n=e-1,s=S(n,t);s<1||o(s)},[e,t,o]),c=a.useCallback(()=>{if(e===l)return;const n=e+1,s=T(n,t);s>l||o(s)},[e,t,o,l]),f=a.useMemo(()=>({goToNextPage:c,goToPreviousPage:b,goToPage:o,currentPage:e,visibleElementsCount:i,indicatedPages:r,disabledPages:t,pagesCount:l,onItemHover:P,labels:d,isMaxVisibleElementCount:m}),[c,b,o,e,i,r,t,l,P,d,m]);return a.createElement(C.Provider,{value:f},E)};export{C as PaginationContext,A as PaginationProvider};
+import*as a from"react";import{VisibleElementsAmount as u}from"../pagination.constants.js";import{findPreviousAvailablePage as T,findNextAvailablePage as S}from"../pagination.helper.js";const C=a.createContext({goToPage:()=>null,goToPreviousPage:()=>null,goToNextPage:()=>null,currentPage:1,visibleElementsCount:u.LESS,pagesCount:0,onItemHover:()=>null,labels:{},isMaxVisibleElementCount:!1,indicatedPages:[],disabledPages:[]}),A=({onSelectedPageChange:s,selectedPage:v,visibleElementsCount:g=u.LESS,pagesCount:l,indicatedPages:r=[],disabledPages:t=[],onItemHover:P=()=>null,labels:d={},children:E})=>{const[x,f]=a.useState(1),m=g===u.MORE,e=v||x,n=a.useCallback(o=>{f(o),s==null||s(o)},[s]),b=a.useCallback(()=>{if(e===1)return;const o=e-1,i=T(o,t);i<1||n(i)},[e,t,n]),c=a.useCallback(()=>{if(e===l)return;const o=e+1,i=S(o,t);i>l||n(i)},[e,t,n,l]),p=a.useMemo(()=>({goToNextPage:c,goToPreviousPage:b,goToPage:n,currentPage:e,visibleElementsCount:g,indicatedPages:r,disabledPages:t,pagesCount:l,onItemHover:P,labels:d,isMaxVisibleElementCount:m}),[c,b,n,e,g,r,t,l,P,d,m]);return a.createElement(C.Provider,{value:p},E)};export{C as PaginationContext,A as PaginationProvider};
 //# sourceMappingURL=PaginationContext.js.map

package/dist/components/pagination/pagination-context/PaginationContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationContext.js","sources":["../../../../src/components/pagination/pagination-context/PaginationContext.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { VisibleElementsAmount } from '../pagination.constants'\nimport {\n  findNextAvailablePage,\n  findPreviousAvailablePage\n} from '../pagination.helper'\nimport type { TPaginationContext, TPaginationProviderProps } from '../types'\n\nexport const PaginationContext = React.createContext<TPaginationContext>({\n  goToPage: () => null,\n  goToPreviousPage: () => null,\n  goToNextPage: () => null,\n  currentPage: 1,\n  visibleElementsCount: VisibleElementsAmount.LESS,\n  pagesCount: 0,\n  onItemHover: () => null,\n  labels: {},\n  isMaxVisibleElementCount: false,\n  indicatedPages: [],\n  disabledPages: []\n})\n\nexport const PaginationProvider: React.FC<TPaginationProviderProps> = ({\n  onSelectedPageChange,\n  selectedPage,\n  visibleElementsCount = VisibleElementsAmount.LESS,\n  pagesCount,\n  indicatedPages = [],\n  disabledPages = [],\n  onItemHover,\n  labels,\n  children\n}) => {\n  const [internalCurrentPage, setInternalCurrentPage] = React.useState(1)\n  const isMaxVisibleElementCount =\n    visibleElementsCount === VisibleElementsAmount.MORE\n\n  const currentPage = selectedPage || internalCurrentPage\n\n  const goToPage = React.useCallback((pageNumber: number) => {\n    setInternalCurrentPage(pageNumber)\n    onSelectedPageChange?.(pageNumber)\n  }, [])\n\n  const goToPreviousPage = React.useCallback(() => {\n    if (currentPage === 1) {\n      return\n    }\n    const previousPage = currentPage - 1\n    const previousAvailablePage = findPreviousAvailablePage(\n      previousPage,\n      disabledPages\n    )\n\n    if (previousAvailablePage < 1) return\n    goToPage(previousAvailablePage)\n  }, [currentPage, disabledPages, goToPage])\n\n  const goToNextPage = React.useCallback(() => {\n    if (currentPage === pagesCount) {\n      return\n    }\n    const nextPage = currentPage + 1\n    const nextAvailablePage = findNextAvailablePage(nextPage, disabledPages)\n\n    if (nextAvailablePage > pagesCount) return\n    goToPage(nextAvailablePage)\n  }, [currentPage, disabledPages, goToPage, pagesCount])\n\n  const value = React.useMemo(() => {\n    return {\n      goToNextPage,\n      goToPreviousPage,\n      goToPage,\n      currentPage,\n      visibleElementsCount,\n      indicatedPages,\n      disabledPages,\n      pagesCount,\n      onItemHover,\n      labels,\n      isMaxVisibleElementCount\n    }\n  }, [\n    goToNextPage,\n    goToPreviousPage,\n    goToPage,\n    currentPage,\n    visibleElementsCount,\n    indicatedPages,\n    disabledPages,\n    pagesCount,\n    onItemHover,\n    labels,\n    isMaxVisibleElementCount\n  ])\n\n  return (\n    <PaginationContext.Provider value={value}>\n      {children}\n    </PaginationContext.Provider>\n  )\n}\n"],"names":["PaginationContext","React","VisibleElementsAmount","PaginationProvider","onSelectedPageChange","selectedPage","visibleElementsCount","pagesCount","indicatedPages","disabledPages","onItemHover","labels","children","internalCurrentPage","setInternalCurrentPage","isMaxVisibleElementCount","currentPage","goToPage","pageNumber","goToPreviousPage","previousPage","previousAvailablePage","findPreviousAvailablePage","goToNextPage","nextPage","nextAvailablePage","findNextAvailablePage","value"],"mappings":"gMASaA,EAAoBC,EAAM,cAAkC,CACvE,SAAU,IAAM,KAChB,iBAAkB,IAAM,KACxB,aAAc,IAAM,KACpB,YAAa,EACb,qBAAsBC,EAAsB,KAC5C,WAAY,EACZ,YAAa,IAAM,KACnB,OAAQ,CACR,EAAA,yBAA0B,GAC1B,eAAgB,CAChB,EAAA,cAAe,CAAA,CACjB,CAAC,EAEYC,EAAyD,CAAC,CACrE,qBAAAC,EACA,aAAAC,EACA,qBAAAC,EAAuBJ,EAAsB,KAC7C,WAAAK,EACA,eAAAC,EAAiB,CAAA,EACjB,cAAAC,EAAgB,GAChB,YAAAC,EACA,OAAAC,EACA,SAAAC,CACF,IAAM,CACJ,KAAM,CAACC,EAAqBC,CAAsB,EAAIb,EAAM,SAAS,CAAC,EAChEc,EACJT,IAAyBJ,EAAsB,KAE3Cc,EAAcX,GAAgBQ,EAE9BI,EAAWhB,EAAM,YAAaiB,GAAuB,CACzDJ,EAAuBI,CAAU,EACjCd,GAAA,MAAAA,EAAuBc,CACzB,CAAA,EAAG,EAAE,EAECC,EAAmBlB,EAAM,YAAY,IAAM,CAC/C,GAAIe,IAAgB,EAClB,OAEF,MAAMI,EAAeJ,EAAc,EAC7BK,EAAwBC,EAC5BF,EACAX,CACF,EAEIY,EAAwB,GAC5BJ,EAASI,CAAqB,CAChC,EAAG,CAACL,EAAaP,EAAeQ,CAAQ,CAAC,EAEnCM,EAAetB,EAAM,YAAY,IAAM,CAC3C,GAAIe,IAAgBT,EAClB,OAEF,MAAMiB,EAAWR,EAAc,EACzBS,EAAoBC,EAAsBF,EAAUf,CAAa,EAEnEgB,EAAoBlB,GACxBU,EAASQ,CAAiB,CAC5B,EAAG,CAACT,EAAaP,EAAeQ,EAAUV,CAAU,CAAC,EAE/CoB,EAAQ1B,EAAM,QAAQ,KACnB,CACL,aAAAsB,EACA,iBAAAJ,EACA,SAAAF,EACA,YAAAD,EACA,qBAAAV,EACA,eAAAE,EACA,cAAAC,EACA,WAAAF,EACA,YAAAG,EACA,OAAAC,EACA,yBAAAI,CACF,GACC,CACDQ,EACAJ,EACAF,EACAD,EACAV,EACAE,EACAC,EACAF,EACAG,EACAC,EACAI,CACF,CAAC,EAED,OACEd,EAAA,cAACD,EAAkB,SAAlB,CAA2B,MAAO2B,CAChCf,EAAAA,CACH,CAEJ"}
+{"version":3,"file":"PaginationContext.js","sources":["../../../../src/components/pagination/pagination-context/PaginationContext.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { VisibleElementsAmount } from '../pagination.constants'\nimport {\n  findNextAvailablePage,\n  findPreviousAvailablePage\n} from '../pagination.helper'\nimport type { IPaginationContext, TPaginationProviderProps } from '../types'\n\nexport const PaginationContext = React.createContext<IPaginationContext>({\n  goToPage: () => null,\n  goToPreviousPage: () => null,\n  goToNextPage: () => null,\n  currentPage: 1,\n  visibleElementsCount: VisibleElementsAmount.LESS,\n  pagesCount: 0,\n  onItemHover: () => null,\n  labels: {},\n  isMaxVisibleElementCount: false,\n  indicatedPages: [],\n  disabledPages: []\n})\n\nexport const PaginationProvider: React.FC<TPaginationProviderProps> = ({\n  onSelectedPageChange,\n  selectedPage,\n  visibleElementsCount = VisibleElementsAmount.LESS,\n  pagesCount,\n  indicatedPages = [],\n  disabledPages = [],\n  onItemHover = () => null,\n  labels = {},\n  children\n}) => {\n  const [internalCurrentPage, setInternalCurrentPage] = React.useState(1)\n  const isMaxVisibleElementCount =\n    visibleElementsCount === VisibleElementsAmount.MORE\n\n  const currentPage = selectedPage || internalCurrentPage\n\n  const goToPage = React.useCallback(\n    (pageNumber: number) => {\n      setInternalCurrentPage(pageNumber)\n      onSelectedPageChange?.(pageNumber)\n    },\n    [onSelectedPageChange]\n  )\n\n  const goToPreviousPage = React.useCallback(() => {\n    if (currentPage === 1) {\n      return\n    }\n    const previousPage = currentPage - 1\n    const previousAvailablePage = findPreviousAvailablePage(\n      previousPage,\n      disabledPages\n    )\n\n    if (previousAvailablePage < 1) return\n    goToPage(previousAvailablePage)\n  }, [currentPage, disabledPages, goToPage])\n\n  const goToNextPage = React.useCallback(() => {\n    if (currentPage === pagesCount) {\n      return\n    }\n    const nextPage = currentPage + 1\n    const nextAvailablePage = findNextAvailablePage(nextPage, disabledPages)\n\n    if (nextAvailablePage > pagesCount) return\n    goToPage(nextAvailablePage)\n  }, [currentPage, disabledPages, goToPage, pagesCount])\n\n  const value = React.useMemo(() => {\n    return {\n      goToNextPage,\n      goToPreviousPage,\n      goToPage,\n      currentPage,\n      visibleElementsCount,\n      indicatedPages,\n      disabledPages,\n      pagesCount,\n      onItemHover,\n      labels,\n      isMaxVisibleElementCount\n    }\n  }, [\n    goToNextPage,\n    goToPreviousPage,\n    goToPage,\n    currentPage,\n    visibleElementsCount,\n    indicatedPages,\n    disabledPages,\n    pagesCount,\n    onItemHover,\n    labels,\n    isMaxVisibleElementCount\n  ])\n\n  return (\n    <PaginationContext.Provider value={value}>\n      {children}\n    </PaginationContext.Provider>\n  )\n}\n"],"names":["PaginationContext","React","VisibleElementsAmount","PaginationProvider","onSelectedPageChange","selectedPage","visibleElementsCount","pagesCount","indicatedPages","disabledPages","onItemHover","labels","children","internalCurrentPage","setInternalCurrentPage","isMaxVisibleElementCount","currentPage","goToPage","pageNumber","goToPreviousPage","previousPage","previousAvailablePage","findPreviousAvailablePage","goToNextPage","nextPage","nextAvailablePage","findNextAvailablePage","value"],"mappings":"gMASaA,EAAoBC,EAAM,cAAkC,CACvE,SAAU,IAAM,KAChB,iBAAkB,IAAM,KACxB,aAAc,IAAM,KACpB,YAAa,EACb,qBAAsBC,EAAsB,KAC5C,WAAY,EACZ,YAAa,IAAM,KACnB,OAAQ,CAAA,EACR,yBAA0B,GAC1B,eAAgB,GAChB,cAAe,CACjB,CAAA,CAAC,EAEYC,EAAyD,CAAC,CACrE,qBAAAC,EACA,aAAAC,EACA,qBAAAC,EAAuBJ,EAAsB,KAC7C,WAAAK,EACA,eAAAC,EAAiB,CACjB,EAAA,cAAAC,EAAgB,CAAA,EAChB,YAAAC,EAAc,IAAM,KACpB,OAAAC,EAAS,GACT,SAAAC,CACF,IAAM,CACJ,KAAM,CAACC,EAAqBC,CAAsB,EAAIb,EAAM,SAAS,CAAC,EAChEc,EACJT,IAAyBJ,EAAsB,KAE3Cc,EAAcX,GAAgBQ,EAE9BI,EAAWhB,EAAM,YACpBiB,GAAuB,CACtBJ,EAAuBI,CAAU,EACjCd,GAAA,MAAAA,EAAuBc,CACzB,CAAA,EACA,CAACd,CAAoB,CACvB,EAEMe,EAAmBlB,EAAM,YAAY,IAAM,CAC/C,GAAIe,IAAgB,EAClB,OAEF,MAAMI,EAAeJ,EAAc,EAC7BK,EAAwBC,EAC5BF,EACAX,CACF,EAEIY,EAAwB,GAC5BJ,EAASI,CAAqB,CAChC,EAAG,CAACL,EAAaP,EAAeQ,CAAQ,CAAC,EAEnCM,EAAetB,EAAM,YAAY,IAAM,CAC3C,GAAIe,IAAgBT,EAClB,OAEF,MAAMiB,EAAWR,EAAc,EACzBS,EAAoBC,EAAsBF,EAAUf,CAAa,EAEnEgB,EAAoBlB,GACxBU,EAASQ,CAAiB,CAC5B,EAAG,CAACT,EAAaP,EAAeQ,EAAUV,CAAU,CAAC,EAE/CoB,EAAQ1B,EAAM,QAAQ,KACnB,CACL,aAAAsB,EACA,iBAAAJ,EACA,SAAAF,EACA,YAAAD,EACA,qBAAAV,EACA,eAAAE,EACA,cAAAC,EACA,WAAAF,EACA,YAAAG,EACA,OAAAC,EACA,yBAAAI,CACF,GACC,CACDQ,EACAJ,EACAF,EACAD,EACAV,EACAE,EACAC,EACAF,EACAG,EACAC,EACAI,CACF,CAAC,EAED,OACEd,EAAA,cAACD,EAAkB,SAAlB,CAA2B,MAAO2B,CAChCf,EAAAA,CACH,CAEJ"}

package/dist/components/pagination/types.d.ts

@@ -1,42 +1,36 @@
-/// <reference types="react" />
 import { TcolorScheme } from '../../experiments/color-scheme';
 import { CSS } from '../../stitches';
-import { Box } from '..';
 interface ILabels {
     popoverTriggerLabel?: string;
     nextPageButtonLabel?: string;
     previousPageButtonLabel?: string;
 }
-interface TBasePaginationType {
+interface IBasePagination {
+    pagesCount: number;
     visibleElementsCount: TVisibleElementsCount;
     indicatedPages: number[];
     disabledPages: number[];
-    onItemHover?: (pageNumber: number) => void;
-    labels?: ILabels;
+    labels: ILabels;
+    onItemHover: (pageNumber: number) => void;
 }
 export declare type TVisibleElementsCount = 6 | 8;
-export declare type TPaginationProps = React.ComponentProps<typeof Box> & TPaginationProviderProps & {
-    colorScheme?: TcolorScheme;
-    indicatedPages?: number[];
-    disabledPages?: number[];
-    visibleElementsCount?: TVisibleElementsCount;
-};
-export declare type TPaginationProviderProps = {
-    onSelectedPageChange: (pageNumber: number) => void;
-    pagesCount: number;
-    selectedPage?: number;
-} & TBasePaginationType;
-export declare type TPaginationContext = {
+export interface IPaginationItemProps {
+    pageNumber: number;
+    css?: CSS;
+}
+export interface IPaginationContext extends IBasePagination {
+    currentPage: number;
+    isMaxVisibleElementCount: boolean;
     goToPage: (pagenumber: number) => void;
     goToPreviousPage: () => void;
     goToNextPage: () => void;
-    currentPage: number;
-    pagesCount: number;
-    isMaxVisibleElementCount: boolean;
-} & TBasePaginationType;
-export interface IPaginationItemProps {
-    pageNumber: number;
+}
+export declare type TPaginationProviderProps = Pick<IBasePagination, 'pagesCount'> & Partial<IBasePagination> & {
+    selectedPage?: number;
+    onSelectedPageChange?: (pageNumber: number) => void;
+};
+export interface IPaginationProps extends TPaginationProviderProps {
+    colorScheme?: TcolorScheme;
     css?: CSS;
-    onItemHover?: (pageNumber: number) => void;
 }
 export {};

package/dist/components/pagination/usePagination.d.ts

@@ -1,2 +1,2 @@
-import type { TPaginationContext } from './types';
-export declare const usePagination: () => TPaginationContext;
+import type { IPaginationContext } from './types';
+export declare const usePagination: () => IPaginationContext;

package/dist/components/pagination/usePagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePagination.js","sources":["../../../src/components/pagination/usePagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { PaginationContext } from './pagination-context/PaginationContext'\nimport type { TPaginationContext } from './types'\n\nexport const usePagination = (): TPaginationContext => {\n  const context = React.useContext(PaginationContext)\n\n  if (!context) {\n    throw new Error(\n      'Ensure that you wrap any components with the PaginationProvider component'\n    )\n  }\n\n  return context\n}\n"],"names":["usePagination","context","React","PaginationContext"],"mappings":"sGAKa,MAAAA,EAAgB,IAA0B,CACrD,MAAMC,EAAUC,EAAM,WAAWC,CAAiB,EAElD,GAAI,CAACF,EACH,MAAM,IAAI,MACR,2EACF,EAGF,OAAOA,CACT"}
+{"version":3,"file":"usePagination.js","sources":["../../../src/components/pagination/usePagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { PaginationContext } from './pagination-context/PaginationContext'\nimport type { IPaginationContext } from './types'\n\nexport const usePagination = (): IPaginationContext => {\n  const context = React.useContext(PaginationContext)\n\n  if (!context) {\n    throw new Error(\n      'Ensure that you wrap any components with the PaginationProvider component'\n    )\n  }\n\n  return context\n}\n"],"names":["usePagination","context","React","PaginationContext"],"mappings":"sGAKa,MAAAA,EAAgB,IAA0B,CACrD,MAAMC,EAAUC,EAAM,WAAWC,CAAiB,EAElD,GAAI,CAACF,EACH,MAAM,IAAI,MACR,2EACF,EAGF,OAAOA,CACT"}