@atom-learning/components 6.0.0-beta.1 → 6.0.0-beta.10

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableTable.js","sources":["../../../src/components/data-table/DataTableTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS } from '~/stitches'\n\nimport { Table } from '../table'\nimport { TableBody } from '../table/TableBody'\nimport { DataTable } from './DataTable'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableLoading } from './DataTableLoading'\n\nexport type DataTableTableProps = Omit<\n  React.ComponentProps<typeof Table>,\n  'children' | 'numberOfStickyColumns'\n> &\n  Partial<\n    Pick<React.ComponentProps<typeof DataTableHead>, 'theme' | 'sortable'>\n  > &\n  Partial<Pick<React.ComponentProps<typeof TableBody>, 'striped'>> & {\n    scrollOptions?: {\n      hasStickyHeader?: boolean\n      headerCss?: CSS\n      numberOfStickyColumns?: number\n      scrollContainerCss?: CSS\n    }\n  }\n\nexport const DataTableTable = ({\n  sortable,\n  striped,\n  theme,\n  css,\n  scrollOptions = {\n    numberOfStickyColumns: 0,\n    hasStickyHeader: false\n  },\n  ...props\n}: DataTableTableProps) => {\n  const {\n    asyncDataState,\n    getTotalRows,\n    getCanSomeRowsExpand,\n    enableRowSelection,\n    tableId\n  } = useDataTable()\n\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  const buildScrollContainerKey = (): string => {\n    let controlColumnCount = 0\n\n    if (getCanSomeRowsExpand() && !!enableRowSelection) {\n      controlColumnCount = 2\n    } else if (getCanSomeRowsExpand() || !!enableRowSelection) {\n      controlColumnCount = 1\n    }\n\n    return `${tableId}_${controlColumnCount}_control_columns`\n  }\n\n  if (isEmpty) return null\n\n  return (\n    <>\n      <DataTableLoading />\n\n      <Table\n        {...props}\n        numberOfStickyColumns={scrollOptions.numberOfStickyColumns}\n        scrollContainerCss={scrollOptions.scrollContainerCss}\n        scrollContainerkey={buildScrollContainerKey()}\n        css={{\n          ...css,\n          ...(isPending && {\n            opacity: 0.5,\n            pointerEvents: 'none',\n            transition: 'opacity 250ms linear 150ms'\n          })\n        }}\n      >\n        <DataTable.Head\n          theme={theme}\n          sortable={sortable}\n          isSticky={scrollOptions.hasStickyHeader}\n          css={scrollOptions.headerCss}\n        />\n        <DataTable.Body striped={striped} />\n      </Table>\n    </>\n  )\n}\n"],"names":["DataTableTable","sortable","striped","theme","css","scrollOptions","props","asyncDataState","getTotalRows","getCanSomeRowsExpand","enableRowSelection","tableId","useDataTable","isPending","AsyncDataState","isEmpty","buildScrollContainerKey","controlColumnCount","React","DataTableLoading","Table","DataTable"],"mappings":"iRA4BO,MAAMA,EAAiB,CAAC,CAC7B,SAAAC,EACA,QAAAC,EACA,MAAAC,EACA,IAAAC,EACA,cAAAC,EAAgB,CACd,sBAAuB,EACvB,gBAAiB,EACnB,KACGC,CACL,IAA2B,CACzB,KAAM,CACJ,eAAAC,EACA,aAAAC,EACA,qBAAAC,EACA,mBAAAC,EACA,QAAAC,CACF,EAAIC,EAAa,EAEXC,EAAYN,IAAmBO,EAAe,QAC9CC,EAAU,CAACF,GAAaL,EAAmB,IAAA,EAE3CQ,EAA0B,IAAc,CAC5C,IAAIC,EAAqB,EAEzB,OAAIR,EAAAA,GAA0B,CAAC,CAACC,EAC9BO,EAAqB,GACZR,EAAqB,GAAK,CAAC,CAACC,KACrCO,EAAqB,GAGhB,GAAGN,KAAWM,mBACvB,EAEA,OAAIF,EAAgB,KAGlBG,EAAA,cAAAA,EAAA,SACEA,KAAAA,EAAA,cAACC,EAAA,IAAiB,EAElBD,EAAA,cAACE,EAAA,CACE,GAAGd,EACJ,sBAAuBD,EAAc,sBACrC,mBAAoBA,EAAc,mBAClC,mBAAoBW,EAAwB,EAC5C,IAAK,CACH,GAAGZ,EACH,GAAIS,GAAa,CACf,QAAS,GACT,cAAe,OACf,WAAY,4BACd,CACF,CAAA,EAEAK,EAAA,cAACG,EAAU,KAAV,CACC,MAAOlB,EACP,SAAUF,EACV,SAAUI,EAAc,gBACxB,IAAKA,EAAc,SACrB,CAAA,EACAa,EAAA,cAACG,EAAU,KAAV,CAAe,QAASnB,CAAS,CAAA,CACpC,CACF,CAEJ"}
+{"version":3,"file":"DataTableTable.js","sources":["../../../src/components/data-table/DataTableTable.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Table } from '../table'\nimport { TableBody } from '../table/TableBody'\nimport { DataTable } from './DataTable'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableLoading } from './DataTableLoading'\n\nconst TableContainer = styled('div', {\n  base: ['p-2', 'bg-white', 'rounded-xl']\n})\n\nexport type DataTableTableProps = Omit<\n  React.ComponentProps<typeof Table>,\n  'children' | 'numberOfStickyColumns'\n> &\n  Partial<\n    Pick<React.ComponentProps<typeof DataTableHead>, 'theme' | 'sortable'>\n  > &\n  Partial<Pick<React.ComponentProps<typeof TableBody>, 'striped'>> & {\n    scrollOptions?: {\n      hasStickyHeader?: boolean\n      stickyHeaderOffset?: number\n      headerCss?: string\n      numberOfStickyColumns?: number\n      scrollContainerCss?: string\n      showTotalInFirstColumn?: boolean\n      totalSuffix?: string\n    }\n    rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n    withContainer?: boolean\n  }\n\nexport const DataTableTable = ({\n  sortable,\n  striped,\n  theme = 'white',\n  className,\n  scrollOptions = {\n    numberOfStickyColumns: 0,\n    stickyHeaderOffset: 0,\n    hasStickyHeader: false,\n    showTotalInFirstColumn: true,\n    totalSuffix: 'items'\n  },\n  rowAction,\n  withContainer = false,\n  ...props\n}: DataTableTableProps): JSX.Element | null => {\n  const {\n    asyncDataState,\n    getTotalRows,\n    getCanSomeRowsExpand,\n    rowSelection,\n    enableRowSelection,\n    tableId,\n    setTablePosition\n  } = useDataTable()\n\n  const tableRef = React.useRef<HTMLTableElement | null>(null)\n  const isTableVisible = React.useRef(false)\n  const isScrolling = React.useRef<boolean>(false)\n\n  const scrollTarget = React.useMemo(() => {\n    if (typeof window === 'undefined') return null\n    return window\n  }, [])\n\n  React.useEffect(() => {\n    if (!scrollTarget || typeof IntersectionObserver === 'undefined') {\n      return\n    }\n\n    const updatePosition = () => {\n      if (tableRef.current) {\n        const tableTop = tableRef.current.getBoundingClientRect().top\n        const tableBottom = tableRef.current.getBoundingClientRect().bottom\n\n        setTablePosition((prevPosition) => ({\n          ...prevPosition,\n          top: tableTop,\n          bottom: tableBottom\n        }))\n      }\n      isScrolling.current = false\n    }\n\n    const handleScroll = () => {\n      if (!isScrolling.current) {\n        requestAnimationFrame(updatePosition)\n        isScrolling.current = true\n      }\n    }\n\n    if (!tableRef.current) return\n\n    const observerOffset = scrollOptions?.stickyHeaderOffset || 0\n\n    const observerOptions = {\n      rootMargin: `-${observerOffset}px 0px -${observerOffset}px 0px`,\n      threshold: 0\n    }\n\n    const handleTableIntersection = (entries: IntersectionObserverEntry[]) => {\n      if (!entries || entries.length === 0) return\n      const entry = entries[0]\n\n      isTableVisible.current = entry.isIntersecting\n\n      if (scrollTarget) {\n        if (entry.isIntersecting) {\n          // add scroll listener\n          scrollTarget?.addEventListener('scroll', handleScroll)\n        } else {\n          // remove scroll listener\n          scrollTarget?.removeEventListener('scroll', handleScroll)\n        }\n      }\n\n      setTablePosition((prevPosition) => ({\n        ...prevPosition,\n        isVisible: entry.isIntersecting\n      }))\n    }\n\n    const tableObserver = new IntersectionObserver(\n      handleTableIntersection,\n      observerOptions\n    )\n\n    //only track table position if we have a sticky header or bulk actions active\n    if (\n      tableRef.current &&\n      (scrollOptions.hasStickyHeader ||\n        Object.keys(rowSelection || {}).length > 0)\n    ) {\n      tableObserver.observe(tableRef.current)\n    }\n\n    return () => {\n      tableObserver.disconnect()\n      if (scrollTarget) {\n        scrollTarget?.removeEventListener('scroll', handleScroll)\n      }\n    }\n  }, [\n    rowSelection,\n    scrollOptions.hasStickyHeader,\n    scrollOptions?.stickyHeaderOffset,\n    scrollTarget,\n    setTablePosition\n  ])\n\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  const buildScrollContainerKey = (): string => {\n    let controlColumnCount = 0\n\n    if (getCanSomeRowsExpand() && !!enableRowSelection) {\n      controlColumnCount = 2\n    } else if (getCanSomeRowsExpand() || !!enableRowSelection) {\n      controlColumnCount = 1\n    }\n\n    return `${tableId}_${controlColumnCount}_control_columns`\n  }\n\n  if (isEmpty) return null\n\n  const tableComponent = (\n    <Table\n      corners=\"round\"\n      size=\"lg\"\n      {...props}\n      ref={tableRef}\n      numberOfStickyColumns={scrollOptions.numberOfStickyColumns}\n      scrollContainerCss={scrollOptions.scrollContainerCss}\n      scrollContainerkey={buildScrollContainerKey()}\n      className={clsx(\n        className,\n        isPending && [\n          'opacity-50',\n          'pointer-events-none',\n          'transition-opacity',\n          'duration-250',\n          'linear',\n          'delay-150'\n        ]\n      )}\n    >\n      <DataTable.Head\n        theme={theme}\n        sortable={sortable}\n        isSticky={scrollOptions.hasStickyHeader}\n        stickyOffset={scrollOptions.stickyHeaderOffset}\n        className={scrollOptions.headerCss}\n        showTotalInFirstColumn={scrollOptions.showTotalInFirstColumn}\n        totalSuffix={scrollOptions.totalSuffix}\n      />\n      <DataTable.Body striped={striped} rowAction={rowAction} />\n    </Table>\n  )\n\n  return (\n    <>\n      <DataTableLoading />\n      {withContainer ? (\n        <TableContainer>{tableComponent}</TableContainer>\n      ) : (\n        tableComponent\n      )}\n    </>\n  )\n}\n"],"names":["TableContainer","styled","DataTableTable","sortable","striped","theme","className","scrollOptions","rowAction","withContainer","props","asyncDataState","getTotalRows","getCanSomeRowsExpand","rowSelection","enableRowSelection","tableId","setTablePosition","useDataTable","tableRef","React","isTableVisible","isScrolling","scrollTarget","updatePosition","tableTop","tableBottom","prevPosition","handleScroll","observerOffset","observerOptions","handleTableIntersection","entries","entry","tableObserver","isPending","AsyncDataState","isEmpty","buildScrollContainerKey","controlColumnCount","tableComponent","Table","clsx","DataTable","DataTableLoading"],"mappings":"8UAaA,MAAMA,EAAiBC,EAAO,MAAO,CACnC,KAAM,CAAC,MAAO,WAAY,YAAY,CACxC,CAAC,EAuBYC,EAAiB,CAAC,CAC7B,SAAAC,EACA,QAAAC,EACA,MAAAC,EAAQ,QACR,UAAAC,EACA,cAAAC,EAAgB,CACd,sBAAuB,EACvB,mBAAoB,EACpB,gBAAiB,GACjB,uBAAwB,GACxB,YAAa,OACf,EACA,UAAAC,EACA,cAAAC,EAAgB,GAChB,GAAGC,CACL,IAA+C,CAC7C,KAAM,CACJ,eAAAC,EACA,aAAAC,EACA,qBAAAC,EACA,aAAAC,EACA,mBAAAC,EACA,QAAAC,EACA,iBAAAC,CACF,EAAIC,IAEEC,EAAWC,EAAM,OAAgC,IAAI,EACrDC,EAAiBD,EAAM,OAAO,EAAK,EACnCE,EAAcF,EAAM,OAAgB,EAAK,EAEzCG,EAAeH,EAAM,QAAQ,IAC7B,OAAO,OAAW,IAAoB,KACnC,OACN,CAAE,CAAA,EAELA,EAAM,UAAU,IAAM,CACpB,GAAI,CAACG,GAAgB,OAAO,qBAAyB,IACnD,OAGF,MAAMC,EAAiB,IAAM,CAC3B,GAAIL,EAAS,QAAS,CACpB,MAAMM,EAAWN,EAAS,QAAQ,wBAAwB,IACpDO,EAAcP,EAAS,QAAQ,sBAAsB,EAAE,OAE7DF,EAAkBU,IAAkB,CAClC,GAAGA,EACH,IAAKF,EACL,OAAQC,CACV,EAAE,CACJ,CACAJ,EAAY,QAAU,EACxB,EAEMM,EAAe,IAAM,CACpBN,EAAY,UACf,sBAAsBE,CAAc,EACpCF,EAAY,QAAU,GAE1B,EAEA,GAAI,CAACH,EAAS,QAAS,OAEvB,MAAMU,GAAiBtB,GAAA,KAAAA,OAAAA,EAAe,qBAAsB,EAEtDuB,EAAkB,CACtB,WAAY,IAAI,OAAAD,EAAc,UAAA,EAAW,OAAAA,EAAc,QAAA,EACvD,UAAW,CACb,EAEME,EAA2BC,GAAyC,CACxE,GAAI,CAACA,GAAWA,EAAQ,SAAW,EAAG,OACtC,MAAMC,EAAQD,EAAQ,CAAC,EAEvBX,EAAe,QAAUY,EAAM,eAE3BV,IACEU,EAAM,eAERV,GAAA,MAAAA,EAAc,iBAAiB,SAAUK,CAAAA,EAGzCL,GAAA,MAAAA,EAAc,oBAAoB,SAAUK,CAIhDX,GAAAA,EAAkBU,IAAkB,CAClC,GAAGA,EACH,UAAWM,EAAM,cACnB,EAAE,CACJ,EAEMC,EAAgB,IAAI,qBACxBH,EACAD,CACF,EAGA,OACEX,EAAS,UACRZ,EAAc,iBACb,OAAO,KAAKO,GAAgB,CAAA,CAAE,EAAE,OAAS,IAE3CoB,EAAc,QAAQf,EAAS,OAAO,EAGjC,IAAM,CACXe,EAAc,WACVX,EAAAA,IACFA,GAAA,MAAAA,EAAc,oBAAoB,SAAUK,CAEhD,EAAA,CACF,EAAG,CACDd,EACAP,EAAc,gBACdA,GAAA,KAAA,OAAAA,EAAe,mBACfgB,EACAN,CACF,CAAC,EAED,MAAMkB,EAAYxB,IAAmByB,EAAe,QAC9CC,EAAU,CAACF,GAAavB,MAAmB,EAE3C0B,EAA0B,IAAc,CAC5C,IAAIC,EAAqB,EAEzB,OAAI1B,KAA4BE,EAC9BwB,EAAqB,GACZ1B,EAAqB,GAAOE,KACrCwB,EAAqB,GAGhB,GAAG,OAAAvB,EAAO,GAAI,EAAA,OAAAuB,EAAkB,kBAAA,CACzC,EAEA,GAAIF,EAAS,OAAO,KAEpB,MAAMG,EACJpB,EAAA,cAACqB,EAAA,CACC,QAAQ,QACR,KAAK,KACJ,GAAG/B,EACJ,IAAKS,EACL,sBAAuBZ,EAAc,sBACrC,mBAAoBA,EAAc,mBAClC,mBAAoB+B,EAAwB,EAC5C,UAAWI,EACTpC,EACA6B,GAAa,CACX,aACA,sBACA,qBACA,eACA,SACA,WACF,CACF,CAEAf,EAAAA,EAAA,cAACuB,EAAU,KAAV,CACC,MAAOtC,EACP,SAAUF,EACV,SAAUI,EAAc,gBACxB,aAAcA,EAAc,mBAC5B,UAAWA,EAAc,UACzB,uBAAwBA,EAAc,uBACtC,YAAaA,EAAc,WAAA,CAC7B,EACAa,EAAA,cAACuB,EAAU,KAAV,CAAe,QAASvC,EAAS,UAAWI,CAAW,CAAA,CAC1D,EAGF,OACEY,EAAA,cAAAA,EAAA,SACEA,KAAAA,EAAA,cAACwB,EAAA,IAAiB,EACjBnC,EACCW,EAAA,cAACpB,EAAA,KAAgBwC,CAAe,EAEhCA,CAEJ,CAEJ"}

package/dist/components/data-table/drag-and-drop/DragAndDropTable.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { TAsyncDataResult } from '../DataTable.types';
 import type { DataTableTableProps } from '../DataTableTable';
 type DragAndDropTableProps = DataTableTableProps & {
+    className?: string;
     idColumn?: string;
     onDragAndDrop?: (onDragAndDropData: {
         oldIndex: number;
@@ -9,5 +10,5 @@ type DragAndDropTableProps = DataTableTableProps & {
         newData: TAsyncDataResult;
     }) => void;
 };
-export declare const DragAndDropTable: ({ idColumn, onDragAndDrop, sortable, striped, theme, css, ...props }: DragAndDropTableProps) => React.JSX.Element;
+export declare const DragAndDropTable: ({ idColumn, onDragAndDrop, sortable, striped, theme, className, ...props }: DragAndDropTableProps) => React.JSX.Element;
 export {};

package/dist/components/data-table/drag-and-drop/DragAndDropTable.js

@@ -1,2 +1,2 @@
-import{arrayMove as T}from"@dnd-kit/sortable";import*as t from"react";import{Sortable as y}from"../../sortable/index.js";import{Table as I}from"../../table/Table.js";import{DataTable as g}from"../DataTable.js";import{AsyncDataState as x}from"../DataTable.types.js";import{useDataTable as A}from"../DataTableContext.js";import{DataTableLoading as C}from"../DataTableLoading.js";import{DragAndDropTableBody as S}from"./DragAndDropTableBody.js";const h=({idColumn:r="id",onDragAndDrop:o,sortable:m,striped:s,theme:i,css:d,...p})=>{const{asyncDataState:c,data:e,setData:D}=A(),u=c===x.PENDING,b=t.useMemo(()=>e.results.map(a=>a[r]),[e]),f=t.useCallback(({oldIndex:a,newIndex:n})=>{const l=T(e.results,a,n),E={results:l,total:e.total};D({results:l,total:e.total}),o==null||o({oldIndex:a,newIndex:n,newData:E})},[e,o]);return t.createElement(y.Root,{onSortChange:f,sortableIds:b},t.createElement(C,null),t.createElement(I,{...p,css:{...d,...u&&{opacity:.5,pointerEvents:"none",transition:"opacity 250ms linear 150ms"}}},t.createElement(g.Head,{theme:i,sortable:m}),t.createElement(S,{striped:s,idColumn:r})))};export{h as DragAndDropTable};
+import{arrayMove as T}from"@dnd-kit/sortable";import E from"clsx";import*as e from"react";import{Sortable as I}from"../../sortable/index.js";import{Table as g}from"../../table/Table.js";import{DataTable as x}from"../DataTable.js";import{AsyncDataState as A}from"../DataTable.types.js";import{useDataTable as C}from"../DataTableContext.js";import{DataTableLoading as N}from"../DataTableLoading.js";import{DragAndDropTableBody as S}from"./DragAndDropTableBody.js";const h=({idColumn:r="id",onDragAndDrop:o,sortable:m,striped:s,theme:i,className:d,...p})=>{const{asyncDataState:c,data:t,setData:D}=C(),u=c===A.PENDING,b=e.useMemo(()=>t.results.map(a=>a[r]),[t]),f=e.useCallback(({oldIndex:a,newIndex:l})=>{const n=T(t.results,a,l),y={results:n,total:t.total};D({results:n,total:t.total}),o==null||o({oldIndex:a,newIndex:l,newData:y})},[t,o]);return e.createElement(I.Root,{onSortChange:f,sortableIds:b},e.createElement(N,null),e.createElement(g,{...p,className:E(d,u&&["opacity-50","pointer-events-none","transition-opacity,duration-250,linear,delay-150"])},e.createElement(x.Head,{theme:i,sortable:m}),e.createElement(S,{striped:s,idColumn:r})))};export{h as DragAndDropTable};
 //# sourceMappingURL=DragAndDropTable.js.map

package/dist/components/data-table/drag-and-drop/DragAndDropTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"DragAndDropTable.js","sources":["../../../../src/components/data-table/drag-and-drop/DragAndDropTable.tsx"],"sourcesContent":["import { arrayMove } from '@dnd-kit/sortable'\nimport * as React from 'react'\n\nimport { Sortable } from '../../sortable'\nimport { Table } from '../../table'\nimport { DataTable } from '../DataTable'\nimport { AsyncDataState, TAsyncDataResult } from '../DataTable.types'\nimport { useDataTable } from '../DataTableContext'\nimport { DataTableLoading } from '../DataTableLoading'\nimport type { DataTableTableProps } from '../DataTableTable'\nimport { DragAndDropTableBody } from './DragAndDropTableBody'\n\ntype DragAndDropTableProps = DataTableTableProps & {\n  idColumn?: string\n  onDragAndDrop?: (onDragAndDropData: {\n    oldIndex: number\n    newIndex: number\n    newData: TAsyncDataResult\n  }) => void\n}\n\nexport const DragAndDropTable = ({\n  idColumn = 'id',\n  onDragAndDrop,\n  sortable,\n  striped,\n  theme,\n  css,\n  ...props\n}: DragAndDropTableProps) => {\n  const { asyncDataState, data, setData } = useDataTable()\n  const isPending = asyncDataState === AsyncDataState.PENDING\n\n  const rowIds = React.useMemo(\n    () =>\n      data.results.map((row) => {\n        return row[idColumn] as React.ReactText\n      }),\n    [data]\n  )\n  const handleSortChange = React.useCallback(\n    ({ oldIndex, newIndex }) => {\n      const sortedResults = arrayMove(data.results, oldIndex, newIndex)\n      const newData = { results: sortedResults, total: data.total }\n      setData({ results: sortedResults, total: data.total })\n      onDragAndDrop?.({ oldIndex, newIndex, newData })\n    },\n    [data, onDragAndDrop]\n  )\n\n  return (\n    <Sortable.Root onSortChange={handleSortChange} sortableIds={rowIds}>\n      <DataTableLoading />\n      <Table\n        {...props}\n        css={{\n          ...css,\n          ...(isPending && {\n            opacity: 0.5,\n            pointerEvents: 'none',\n            transition: 'opacity 250ms linear 150ms'\n          })\n        }}\n      >\n        <DataTable.Head theme={theme} sortable={sortable} />\n        <DragAndDropTableBody striped={striped} idColumn={idColumn} />\n      </Table>\n    </Sortable.Root>\n  )\n}\n"],"names":["DragAndDropTable","idColumn","onDragAndDrop","sortable","striped","theme","css","props","asyncDataState","data","setData","useDataTable","isPending","AsyncDataState","rowIds","React","row","handleSortChange","oldIndex","newIndex","sortedResults","arrayMove","newData","Sortable","DataTableLoading","Table","DataTable","DragAndDropTableBody"],"mappings":"gcAqBaA,EAAmB,CAAC,CAC/B,SAAAC,EAAW,KACX,cAAAC,EACA,SAAAC,EACA,QAAAC,EACA,MAAAC,EACA,IAAAC,KACGC,CACL,IAA6B,CAC3B,KAAM,CAAE,eAAAC,EAAgB,KAAAC,EAAM,QAAAC,CAAQ,EAAIC,EAAa,EACjDC,EAAYJ,IAAmBK,EAAe,QAE9CC,EAASC,EAAM,QACnB,IACEN,EAAK,QAAQ,IAAKO,GACTA,EAAIf,EACZ,EACH,CAACQ,CAAI,CACP,EACMQ,EAAmBF,EAAM,YAC7B,CAAC,CAAE,SAAAG,EAAU,SAAAC,CAAS,IAAM,CAC1B,MAAMC,EAAgBC,EAAUZ,EAAK,QAASS,EAAUC,CAAQ,EAC1DG,EAAU,CAAE,QAASF,EAAe,MAAOX,EAAK,KAAM,EAC5DC,EAAQ,CAAE,QAASU,EAAe,MAAOX,EAAK,KAAM,CAAC,EACrDP,GAAA,MAAAA,EAAgB,CAAE,SAAAgB,EAAU,SAAAC,EAAU,QAAAG,CAAQ,CAChD,CAAA,EACA,CAACb,EAAMP,CAAa,CACtB,EAEA,OACEa,EAAA,cAACQ,EAAS,KAAT,CAAc,aAAcN,EAAkB,YAAaH,CAC1DC,EAAAA,EAAA,cAACS,EAAA,IAAiB,EAClBT,EAAA,cAACU,EAAA,CACE,GAAGlB,EACJ,IAAK,CACH,GAAGD,EACH,GAAIM,GAAa,CACf,QAAS,GACT,cAAe,OACf,WAAY,4BACd,CACF,CAAA,EAEAG,EAAA,cAACW,EAAU,KAAV,CAAe,MAAOrB,EAAO,SAAUF,CAAAA,CAAU,EAClDY,EAAA,cAACY,EAAA,CAAqB,QAASvB,EAAS,SAAUH,CAAAA,CAAU,CAC9D,CACF,CAEJ"}
+{"version":3,"file":"DragAndDropTable.js","sources":["../../../../src/components/data-table/drag-and-drop/DragAndDropTable.tsx"],"sourcesContent":["import { arrayMove } from '@dnd-kit/sortable'\nimport clsx from 'clsx'\nimport * as React from 'react'\n\nimport { Sortable } from '../../sortable'\nimport { Table } from '../../table'\nimport { DataTable } from '../DataTable'\nimport { AsyncDataState, TAsyncDataResult } from '../DataTable.types'\nimport { useDataTable } from '../DataTableContext'\nimport { DataTableLoading } from '../DataTableLoading'\nimport type { DataTableTableProps } from '../DataTableTable'\nimport { DragAndDropTableBody } from './DragAndDropTableBody'\n\ntype DragAndDropTableProps = DataTableTableProps & {\n  className?: string\n  idColumn?: string\n  onDragAndDrop?: (onDragAndDropData: {\n    oldIndex: number\n    newIndex: number\n    newData: TAsyncDataResult\n  }) => void\n}\n\nexport const DragAndDropTable = ({\n  idColumn = 'id',\n  onDragAndDrop,\n  sortable,\n  striped,\n  theme,\n  className,\n  ...props\n}: DragAndDropTableProps) => {\n  const { asyncDataState, data, setData } = useDataTable()\n  const isPending = asyncDataState === AsyncDataState.PENDING\n\n  const rowIds = React.useMemo(\n    () =>\n      data.results.map((row) => {\n        return row[idColumn] as React.ReactText\n      }),\n    [data]\n  )\n  const handleSortChange = React.useCallback(\n    ({ oldIndex, newIndex }) => {\n      const sortedResults = arrayMove(data.results, oldIndex, newIndex)\n      const newData = { results: sortedResults, total: data.total }\n      setData({ results: sortedResults, total: data.total })\n      onDragAndDrop?.({ oldIndex, newIndex, newData })\n    },\n    [data, onDragAndDrop]\n  )\n\n  return (\n    <Sortable.Root onSortChange={handleSortChange} sortableIds={rowIds}>\n      <DataTableLoading />\n      <Table\n        {...props}\n        className={clsx(\n          className,\n          isPending && [\n            'opacity-50',\n            'pointer-events-none',\n            'transition-opacity,duration-250,linear,delay-150'\n          ]\n        )}\n      >\n        <DataTable.Head theme={theme} sortable={sortable} />\n        <DragAndDropTableBody striped={striped} idColumn={idColumn} />\n      </Table>\n    </Sortable.Root>\n  )\n}\n"],"names":["DragAndDropTable","idColumn","onDragAndDrop","sortable","striped","theme","className","props","asyncDataState","data","setData","useDataTable","isPending","AsyncDataState","rowIds","React","row","handleSortChange","oldIndex","newIndex","sortedResults","arrayMove","newData","Sortable","DataTableLoading","Table","clsx","DataTable","DragAndDropTableBody"],"mappings":"odAuBaA,EAAmB,CAAC,CAC/B,SAAAC,EAAW,KACX,cAAAC,EACA,SAAAC,EACA,QAAAC,EACA,MAAAC,EACA,UAAAC,EACA,GAAGC,CACL,IAA6B,CAC3B,KAAM,CAAE,eAAAC,EAAgB,KAAAC,EAAM,QAAAC,CAAQ,EAAIC,IACpCC,EAAYJ,IAAmBK,EAAe,QAE9CC,EAASC,EAAM,QACnB,IACEN,EAAK,QAAQ,IAAKO,GACTA,EAAIf,CAAQ,CACpB,EACH,CAACQ,CAAI,CACP,EACMQ,EAAmBF,EAAM,YAC7B,CAAC,CAAE,SAAAG,EAAU,SAAAC,CAAS,IAAM,CAC1B,MAAMC,EAAgBC,EAAUZ,EAAK,QAASS,EAAUC,CAAQ,EAC1DG,EAAU,CAAE,QAASF,EAAe,MAAOX,EAAK,KAAM,EAC5DC,EAAQ,CAAE,QAASU,EAAe,MAAOX,EAAK,KAAM,CAAC,EACrDP,GAAA,MAAAA,EAAgB,CAAE,SAAAgB,EAAU,SAAAC,EAAU,QAAAG,CAAQ,EAChD,EACA,CAACb,EAAMP,CAAa,CACtB,EAEA,OACEa,EAAA,cAACQ,EAAS,KAAT,CAAc,aAAcN,EAAkB,YAAaH,GAC1DC,EAAA,cAACS,EAAA,IAAiB,EAClBT,EAAA,cAACU,EAAA,CACE,GAAGlB,EACJ,UAAWmB,EACTpB,EACAM,GAAa,CACX,aACA,sBACA,kDACF,CACF,CAAA,EAEAG,EAAA,cAACY,EAAU,KAAV,CAAe,MAAOtB,EAAO,SAAUF,CAAAA,CAAU,EAClDY,EAAA,cAACa,EAAA,CAAqB,QAASxB,EAAS,SAAUH,CAAAA,CAAU,CAC9D,CACF,CAEJ"}

package/dist/components/data-table/drag-and-drop/DragAndDropTableBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"DragAndDropTableBody.js","sources":["../../../../src/components/data-table/drag-and-drop/DragAndDropTableBody.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Table } from '../../table'\nimport { useDataTable } from '../DataTableContext'\nimport { DragAndDropTableRow } from './DragAndDropTableRow'\n\ntype DataTableBodyProps = Omit<\n  React.ComponentProps<typeof Table.Body>,\n  'children'\n> & { idColumn?: string }\n\nexport const DragAndDropTableBody = ({\n  striped = false,\n  idColumn = 'id',\n  ...props\n}: DataTableBodyProps) => {\n  const { getRowModel } = useDataTable()\n  return (\n    <Table.Body {...props} striped={striped}>\n      {getRowModel().rows.map((row) => {\n        return (\n          <DragAndDropTableRow row={row} key={row.id} idColumn={idColumn} />\n        )\n      })}\n    </Table.Body>\n  )\n}\n"],"names":["DragAndDropTableBody","striped","idColumn","props","getRowModel","useDataTable","React","Table","row","DragAndDropTableRow"],"mappings":"0LAWa,MAAAA,EAAuB,CAAC,CACnC,QAAAC,EAAU,GACV,SAAAC,EAAW,QACRC,CACL,IAA0B,CACxB,KAAM,CAAE,YAAAC,CAAY,EAAIC,EACxB,EAAA,OACEC,EAAA,cAACC,EAAM,KAAN,CAAY,GAAGJ,EAAO,QAASF,CAC7BG,EAAAA,EAAc,EAAA,KAAK,IAAKI,GAErBF,EAAA,cAACG,EAAA,CAAoB,IAAKD,EAAK,IAAKA,EAAI,GAAI,SAAUN,CAAU,CAAA,CAEnE,CACH,CAEJ"}
+{"version":3,"file":"DragAndDropTableBody.js","sources":["../../../../src/components/data-table/drag-and-drop/DragAndDropTableBody.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Table } from '../../table'\nimport { useDataTable } from '../DataTableContext'\nimport { DragAndDropTableRow } from './DragAndDropTableRow'\n\ntype DataTableBodyProps = Omit<\n  React.ComponentProps<typeof Table.Body>,\n  'children'\n> & { idColumn?: string }\n\nexport const DragAndDropTableBody = ({\n  striped = false,\n  idColumn = 'id',\n  ...props\n}: DataTableBodyProps) => {\n  const { getRowModel } = useDataTable()\n  return (\n    <Table.Body {...props} striped={striped}>\n      {getRowModel().rows.map((row) => {\n        return (\n          <DragAndDropTableRow row={row} key={row.id} idColumn={idColumn} />\n        )\n      })}\n    </Table.Body>\n  )\n}\n"],"names":["DragAndDropTableBody","striped","idColumn","props","getRowModel","useDataTable","React","Table","row","DragAndDropTableRow"],"mappings":"0LAWa,MAAAA,EAAuB,CAAC,CACnC,QAAAC,EAAU,GACV,SAAAC,EAAW,KACX,GAAGC,CACL,IAA0B,CACxB,KAAM,CAAE,YAAAC,CAAY,EAAIC,EAAa,EACrC,OACEC,EAAA,cAACC,EAAM,KAAN,CAAY,GAAGJ,EAAO,QAASF,CAAAA,EAC7BG,EAAc,EAAA,KAAK,IAAKI,GAErBF,EAAA,cAACG,EAAA,CAAoB,IAAKD,EAAK,IAAKA,EAAI,GAAI,SAAUN,CAAU,CAAA,CAEnE,CACH,CAEJ"}

package/dist/components/data-table/drag-and-drop/DragAndDropTableRow.js

@@ -1,2 +1,2 @@
-import{flexRender as i}from"@tanstack/react-table";import*as l from"react";import{Sortable as a}from"../../sortable/index.js";import{Table as m}from"../../table/Table.js";import{DataTableDataCell as c}from"../DataTableDataCell.js";const d=({row:t,idColumn:o="id"})=>{const r=t.original[o];return l.createElement(a.Item,{id:r,asChild:!0},l.createElement(m.Row,null,t.getVisibleCells().map((e,n)=>n===0?l.createElement(m.Cell,{key:e.id},l.createElement(a.Handle,{targetId:r,css:{display:"inline-block"}}),i(e.column.columnDef.cell,e.getContext())):l.createElement(c,{key:e.id,cell:e}))))};export{d as DragAndDropTableRow};
+import{flexRender as i}from"@tanstack/react-table";import*as l from"react";import{Sortable as r}from"../../sortable/index.js";import{Table as a}from"../../table/Table.js";import{DataTableDataCell as c}from"../DataTableDataCell.js";const d=({row:t,idColumn:m="id"})=>{const o=t.original[m];return l.createElement(r.Item,{id:o,asChild:!0},l.createElement(a.Row,null,t.getVisibleCells().map((e,n)=>n===0?l.createElement(a.Cell,{key:e.id},l.createElement(r.Handle,{targetId:o,className:"inline-block"}),i(e.column.columnDef.cell,e.getContext())):l.createElement(c,{key:e.id,cell:e}))))};export{d as DragAndDropTableRow};
 //# sourceMappingURL=DragAndDropTableRow.js.map

package/dist/components/data-table/drag-and-drop/DragAndDropTableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"DragAndDropTableRow.js","sources":["../../../../src/components/data-table/drag-and-drop/DragAndDropTableRow.tsx"],"sourcesContent":["import type { Row } from '@tanstack/react-table'\nimport { flexRender } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Sortable } from '~/components/sortable'\n\nimport { Table } from '../../table'\nimport { DataTableDataCell } from '../DataTableDataCell'\nexport type DataTableDraggableRowProps = React.ComponentProps<\n  typeof Table.Row\n> & {\n  row: Row<Record<string, unknown>>\n  idColumn?: string\n}\n\nexport const DragAndDropTableRow = ({\n  row,\n  idColumn = 'id'\n}: DataTableDraggableRowProps) => {\n  const rowId = row.original[idColumn] as React.ReactText\n  return (\n    <Sortable.Item id={rowId} asChild>\n      <Table.Row>\n        {row.getVisibleCells().map((cell, i) => {\n          if (i === 0) {\n            return (\n              <Table.Cell key={cell.id}>\n                <Sortable.Handle\n                  targetId={rowId}\n                  css={{ display: 'inline-block' }}\n                />\n                {flexRender(cell.column.columnDef.cell, cell.getContext())}\n              </Table.Cell>\n            )\n          }\n          return <DataTableDataCell key={cell.id} cell={cell} />\n        })}\n      </Table.Row>\n    </Sortable.Item>\n  )\n}\n"],"names":["DragAndDropTableRow","row","idColumn","rowId","React","Sortable","Table","cell","i","flexRender","DataTableDataCell"],"mappings":"uOAea,MAAAA,EAAsB,CAAC,CAClC,IAAAC,EACA,SAAAC,EAAW,IACb,IAAkC,CAChC,MAAMC,EAAQF,EAAI,SAASC,GAC3B,OACEE,EAAA,cAACC,EAAS,KAAT,CAAc,GAAIF,EAAO,QAAO,IAC/BC,EAAA,cAACE,EAAM,IAAN,KACEL,EAAI,gBAAkB,EAAA,IAAI,CAACM,EAAMC,IAC5BA,IAAM,EAENJ,EAAA,cAACE,EAAM,KAAN,CAAW,IAAKC,EAAK,EAAA,EACpBH,EAAA,cAACC,EAAS,OAAT,CACC,SAAUF,EACV,IAAK,CAAE,QAAS,cAAe,CACjC,CAAA,EACCM,EAAWF,EAAK,OAAO,UAAU,KAAMA,EAAK,WAAY,CAAA,CAC3D,EAGGH,EAAA,cAACM,EAAA,CAAkB,IAAKH,EAAK,GAAI,KAAMA,CAAM,CAAA,CACrD,CACH,CACF,CAEJ"}
+{"version":3,"file":"DragAndDropTableRow.js","sources":["../../../../src/components/data-table/drag-and-drop/DragAndDropTableRow.tsx"],"sourcesContent":["import type { Row } from '@tanstack/react-table'\nimport { flexRender } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Sortable } from '~/components/sortable'\n\nimport { Table } from '../../table'\nimport { DataTableDataCell } from '../DataTableDataCell'\n\nexport type DataTableDraggableRowProps = React.ComponentProps<\n  typeof Table.Row\n> & {\n  row: Row<Record<string, unknown>>\n  idColumn?: string\n}\n\nexport const DragAndDropTableRow = ({\n  row,\n  idColumn = 'id'\n}: DataTableDraggableRowProps) => {\n  const rowId = row.original[idColumn] as React.ReactText\n  return (\n    <Sortable.Item id={rowId} asChild>\n      <Table.Row>\n        {row.getVisibleCells().map((cell, i) => {\n          if (i === 0) {\n            return (\n              <Table.Cell key={cell.id}>\n                <Sortable.Handle targetId={rowId} className=\"inline-block\" />\n                {flexRender(cell.column.columnDef.cell, cell.getContext())}\n              </Table.Cell>\n            )\n          }\n          return <DataTableDataCell key={cell.id} cell={cell} />\n        })}\n      </Table.Row>\n    </Sortable.Item>\n  )\n}\n"],"names":["DragAndDropTableRow","row","idColumn","rowId","React","Sortable","Table","cell","i","flexRender","DataTableDataCell"],"mappings":"uOAgBO,MAAMA,EAAsB,CAAC,CAClC,IAAAC,EACA,SAAAC,EAAW,IACb,IAAkC,CAChC,MAAMC,EAAQF,EAAI,SAASC,CAAQ,EACnC,OACEE,EAAA,cAACC,EAAS,KAAT,CAAc,GAAIF,EAAO,QAAO,EAAA,EAC/BC,EAAA,cAACE,EAAM,IAAN,KACEL,EAAI,kBAAkB,IAAI,CAACM,EAAMC,IAC5BA,IAAM,EAENJ,EAAA,cAACE,EAAM,KAAN,CAAW,IAAKC,EAAK,EACpBH,EAAAA,EAAA,cAACC,EAAS,OAAT,CAAgB,SAAUF,EAAO,UAAU,eAAe,EAC1DM,EAAWF,EAAK,OAAO,UAAU,KAAMA,EAAK,WAAY,CAAA,CAC3D,EAGGH,EAAA,cAACM,EAAA,CAAkB,IAAKH,EAAK,GAAI,KAAMA,CAAM,CAAA,CACrD,CACH,CACF,CAEJ"}

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

@@ -1 +1 @@
-{"version":3,"file":"getNewAsyncData.js","sources":["../../../src/components/data-table/getNewAsyncData.ts"],"sourcesContent":["import type {\n  PaginationState,\n  SortDirection,\n  SortingState\n} from '@tanstack/react-table'\nimport invariant from 'invariant'\n\nimport type {\n  TAsyncDataOptions,\n  TAsyncDataResult,\n  TGetAsyncData\n} from './DataTable.types'\n\nconst getSortDirection = (sorting: SortingState): SortDirection | undefined => {\n  if (sorting[0]) {\n    return sorting[0].desc ? 'desc' : 'asc'\n  }\n  return undefined\n}\n\nexport const getNewAsyncData = async (\n  getAsyncData: TGetAsyncData,\n  asyncDataOptions: Partial<TAsyncDataOptions>,\n  paginationState: PaginationState,\n  sorting: SortingState,\n  globalFilter: string\n): Promise<TAsyncDataResult | undefined> => {\n  const { pageIndex, pageSize } = paginationState\n  const params = {\n    pageIndex: asyncDataOptions?.pageIndex ?? pageIndex,\n    pageSize: asyncDataOptions?.pageSize ?? pageSize,\n    sortBy: asyncDataOptions?.sortBy ?? sorting[0]?.id,\n    sortDirection: asyncDataOptions?.sortDirection ?? getSortDirection(sorting),\n    globalFilter: asyncDataOptions.globalFilter ?? globalFilter\n  }\n\n  const newData = await getAsyncData(params)\n\n  invariant(\n    Array.isArray(newData?.results),\n    'The getAsyncData function must return an object with a property `result` which must be an array'\n  )\n  invariant(\n    newData && Number.isInteger(newData.total) && newData.total >= 0,\n    'The getAsyncData function must return an object with a property `total` which must be a positive integer or zero'\n  )\n\n  return newData\n}\n"],"names":["getSortDirection","sorting","getNewAsyncData","getAsyncData","asyncDataOptions","paginationState","globalFilter","_a","_b","_c","_d","_e","_f","pageIndex","pageSize","params","newData","invariant"],"mappings":"yBAaA,MAAMA,EAAoBC,GAAqD,CAC7E,GAAIA,EAAQ,GACV,OAAOA,EAAQ,GAAG,KAAO,OAAS,KAGtC,EAEaC,EAAkB,MAC7BC,EACAC,EACAC,EACAJ,EACAK,IAC0C,CA1B5C,IAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EA2BE,KAAM,CAAE,UAAAC,EAAW,SAAAC,CAAS,EAAIT,EAC1BU,EAAS,CACb,WAAWR,EAAAH,GAAA,KAAA,OAAAA,EAAkB,YAAlB,KAAAG,EAA+BM,EAC1C,UAAUL,EAAAJ,GAAA,KAAAA,OAAAA,EAAkB,WAAlB,KAAAI,EAA8BM,EACxC,QAAQJ,EAAAN,GAAA,KAAAA,OAAAA,EAAkB,SAAlB,KAAAM,GAA4BD,EAAAR,EAAQ,KAAR,KAAAQ,OAAAA,EAAY,GAChD,eAAeE,EAAAP,GAAA,KAAAA,OAAAA,EAAkB,gBAAlB,KAAAO,EAAmCX,EAAiBC,CAAO,EAC1E,cAAcW,EAAAR,EAAiB,eAAjB,KAAAQ,EAAiCN,CACjD,EAEMU,EAAU,MAAMb,EAAaY,CAAM,EAEzC,OAAAE,EACE,MAAM,QAAQD,GAAA,KAAAA,OAAAA,EAAS,OAAO,EAC9B,iGACF,EACAC,EACED,GAAW,OAAO,UAAUA,EAAQ,KAAK,GAAKA,EAAQ,OAAS,EAC/D,kHACF,EAEOA,CACT"}
+{"version":3,"file":"getNewAsyncData.js","sources":["../../../src/components/data-table/getNewAsyncData.ts"],"sourcesContent":["import type {\n  PaginationState,\n  SortDirection,\n  SortingState\n} from '@tanstack/react-table'\nimport invariant from 'invariant'\n\nimport type {\n  TAsyncDataOptions,\n  TAsyncDataResult,\n  TGetAsyncData\n} from './DataTable.types'\n\nconst getSortDirection = (sorting: SortingState): SortDirection | undefined => {\n  if (sorting[0]) {\n    return sorting[0].desc ? 'desc' : 'asc'\n  }\n  return undefined\n}\n\nexport const getNewAsyncData = async (\n  getAsyncData: TGetAsyncData,\n  asyncDataOptions: Partial<TAsyncDataOptions>,\n  paginationState: PaginationState,\n  sorting: SortingState,\n  globalFilter: string\n): Promise<TAsyncDataResult | undefined> => {\n  const { pageIndex, pageSize } = paginationState\n  const params = {\n    pageIndex: asyncDataOptions?.pageIndex ?? pageIndex,\n    pageSize: asyncDataOptions?.pageSize ?? pageSize,\n    sortBy: asyncDataOptions?.sortBy ?? sorting[0]?.id,\n    sortDirection: asyncDataOptions?.sortDirection ?? getSortDirection(sorting),\n    globalFilter: asyncDataOptions.globalFilter ?? globalFilter\n  }\n\n  const newData = await getAsyncData(params)\n\n  invariant(\n    Array.isArray(newData?.results),\n    'The getAsyncData function must return an object with a property `result` which must be an array'\n  )\n  invariant(\n    newData && Number.isInteger(newData.total) && newData.total >= 0,\n    'The getAsyncData function must return an object with a property `total` which must be a positive integer or zero'\n  )\n\n  return newData\n}\n"],"names":["getSortDirection","sorting","getNewAsyncData","getAsyncData","asyncDataOptions","paginationState","globalFilter","_a","_b","_c","_d","_e","_f","pageIndex","pageSize","params","newData","invariant"],"mappings":"yBAaA,MAAMA,EAAoBC,GAAqD,CAC7E,GAAIA,EAAQ,CAAC,EACX,OAAOA,EAAQ,CAAC,EAAE,KAAO,OAAS,KAGtC,EAEaC,EAAkB,MAC7BC,EACAC,EACAC,EACAJ,EACAK,IAC0C,CA1B5C,IAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EA2BE,KAAM,CAAE,UAAAC,EAAW,SAAAC,CAAS,EAAIT,EAC1BU,EAAS,CACb,WAAWR,EAAAH,GAAA,KAAA,OAAAA,EAAkB,YAAlB,KAAAG,EAA+BM,EAC1C,UAAUL,EAAAJ,GAAA,KAAAA,OAAAA,EAAkB,WAAlB,KAAAI,EAA8BM,EACxC,QAAQJ,EAAAN,GAAA,KAAA,OAAAA,EAAkB,SAAlB,KAAAM,GAA4BD,EAAAR,EAAQ,CAAC,IAAT,KAAAQ,OAAAA,EAAY,GAChD,eAAeE,EAAAP,GAAA,KAAAA,OAAAA,EAAkB,gBAAlB,KAAAO,EAAmCX,EAAiBC,CAAO,EAC1E,cAAcW,EAAAR,EAAiB,eAAjB,KAAAQ,EAAiCN,CACjD,EAEMU,EAAU,MAAMb,EAAaY,CAAM,EAEzC,OAAAE,EACE,MAAM,QAAQD,GAAA,KAAAA,OAAAA,EAAS,OAAO,EAC9B,iGACF,EACAC,EACED,GAAW,OAAO,UAAUA,EAAQ,KAAK,GAAKA,EAAQ,OAAS,EAC/D,kHACF,EAEOA,CACT"}

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

@@ -1,374 +1,10 @@
 import * as React from 'react';
 import { TcolorScheme } from '../../../experiments/color-scheme';
-declare const StyledNav: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<"nav", {}, {
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-    reducedMotion: string;
-    allowMotion: string;
-    hover: string;
-}, import("@atom-learning/stitches-react/types/css-util").CSS<{
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-    reducedMotion: string;
-    allowMotion: string;
-    hover: string;
-}, {
-    colors: {
-        textBold: string;
-        textRegular: string;
-        textSubtle: string;
-        textMinimal: string;
-        background: string;
-        backgroundAccent: string;
-        grey100: string;
-        grey200: string;
-        grey300: string;
-        grey400: string;
-        grey500: string;
-        grey600: string;
-        grey700: string;
-        grey800: string;
-        grey900: string;
-        grey1000: string;
-        grey1100: string;
-        grey1200: string;
-        blue100: string;
-        blue200: string;
-        blue300: string;
-        blue400: string;
-        blue500: string;
-        blue600: string;
-        blue700: string;
-        blue800: string;
-        blue900: string;
-        blue1000: string;
-        blue1100: string;
-        blue1200: string;
-        pink100: string;
-        pink200: string;
-        pink300: string;
-        pink400: string;
-        pink500: string;
-        pink600: string;
-        pink700: string;
-        pink800: string;
-        pink900: string;
-        pink1000: string;
-        pink1100: string;
-        pink1200: string;
-        purple100: string;
-        purple200: string;
-        purple300: string;
-        purple400: string;
-        purple500: string;
-        purple600: string;
-        purple700: string;
-        purple800: string;
-        purple900: string;
-        purple1000: string;
-        purple1100: string;
-        purple1200: string;
-        cyan100: string;
-        cyan200: string;
-        cyan300: string;
-        cyan400: string;
-        cyan500: string;
-        cyan600: string;
-        cyan700: string;
-        cyan800: string;
-        cyan900: string;
-        cyan1000: string;
-        cyan1100: string;
-        cyan1200: string;
-        green100: string;
-        green200: string;
-        green300: string;
-        green400: string;
-        green500: string;
-        green600: string;
-        green700: string;
-        green800: string;
-        green900: string;
-        green1000: string;
-        green1100: string;
-        green1200: string;
-        magenta100: string;
-        magenta200: string;
-        magenta300: string;
-        magenta400: string;
-        magenta500: string;
-        magenta600: string;
-        magenta700: string;
-        magenta800: string;
-        magenta900: string;
-        magenta1000: string;
-        magenta1100: string;
-        magenta1200: string;
-        red100: string;
-        red200: string;
-        red300: string;
-        red400: string;
-        red500: string;
-        red600: string;
-        red700: string;
-        red800: string;
-        red900: string;
-        red1000: string;
-        red1100: string;
-        red1200: string;
-        teal100: string;
-        teal200: string;
-        teal300: string;
-        teal400: string;
-        teal500: string;
-        teal600: string;
-        teal700: string;
-        teal800: string;
-        teal900: string;
-        teal1000: string;
-        teal1100: string;
-        teal1200: string;
-        orange100: string;
-        orange200: string;
-        orange300: string;
-        orange400: string;
-        orange500: string;
-        orange600: string;
-        orange700: string;
-        orange800: string;
-        orange900: string;
-        orange1000: string;
-        orange1100: string;
-        orange1200: string;
-        yellow100: string;
-        yellow200: string;
-        yellow300: string;
-        yellow400: string;
-        yellow500: string;
-        yellow600: string;
-        yellow700: string;
-        yellow800: string;
-        yellow900: string;
-        yellow1000: string;
-        yellow1100: string;
-        yellow1200: string;
-        lime100: string;
-        lime200: string;
-        lime300: string;
-        lime400: string;
-        lime500: string;
-        lime600: string;
-        lime700: string;
-        lime800: string;
-        lime900: string;
-        lime1000: string;
-        lime1100: string;
-        lime1200: string;
-        lapis100: string;
-        lapis200: string;
-        lapis300: string;
-        lapis400: string;
-        lapis500: string;
-        lapis600: string;
-        lapis700: string;
-        lapis800: string;
-        lapis900: string;
-        lapis1000: string;
-        lapis1100: string;
-        lapis1200: string;
-        maroon100: string;
-        maroon200: string;
-        maroon300: string;
-        maroon400: string;
-        maroon500: string;
-        maroon600: string;
-        maroon700: string;
-        maroon800: string;
-        maroon900: string;
-        maroon1000: string;
-        maroon1100: string;
-        maroon1200: string;
-        marsh100: string;
-        marsh200: string;
-        marsh300: string;
-        marsh400: string;
-        marsh500: string;
-        marsh600: string;
-        marsh700: string;
-        marsh800: string;
-        marsh900: string;
-        marsh1000: string;
-        marsh1100: string;
-        marsh1200: string;
-        alpha100: string;
-        alpha150: string;
-        alpha200: string;
-        alpha250: string;
-        alpha600: string;
-        infoLight: string;
-        info: string;
-        infoMid: string;
-        infoDark: string;
-        successLight: string;
-        success: string;
-        successMid: string;
-        successDark: string;
-        dangerLight: string;
-        danger: string;
-        dangerMid: string;
-        dangerDark: string;
-        warningLight: string;
-        warning: string;
-        warningMid: string;
-        warningDark: string;
-        warningText: string;
-        subjectEnglish: string;
-        subjectMaths: string;
-        subjectScience: string;
-        subjectVerbalReasoning: string;
-        subjectNonVerbalReasoning: string;
-        subjectCreativeWriting: string;
-        subjectExamSkills: string;
-        subjectGcseEnglishLiterature: string;
-        subjectGcseMaths: string;
-        subjectGcseChemistry: string;
-        subjectGcsePhysics: string;
-        subjectGcseBiology: string;
-        glBlueLight: string;
-        glBluePrimary: string;
-        glBlueDark: string;
-        primary100: string;
-        primary200: string;
-        primary300: string;
-        primary400: string;
-        primary500: string;
-        primary600: string;
-        primary700: string;
-        primary800: string;
-        primary900: string;
-        primary1000: string;
-        primary1100: string;
-        primary1200: string;
-    };
-    space: {
-        "0": string;
-        "1": string;
-        "2": string;
-        "3": string;
-        "4": string;
-        "5": string;
-        "6": string;
-        "7": string;
-        "8": string;
-        "9": string;
-        "24": string;
-    };
-    fontSizes: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        "2xl": string;
-        "3xl": string;
-        "4xl": string;
-    };
-    fonts: {
-        sans: string;
-        mono: string;
-        display: string;
-        body: string;
-    };
-    sizes: {
-        "0": string;
-        "1": string;
-        "2": string;
-        "3": string;
-        "4": string;
-        "5": string;
-        "6": string;
-        "7": string;
-        "8": string;
-    };
-    radii: {
-        "0": string;
-        "1": string;
-        "2": string;
-        "3": string;
-        round: string;
-    };
-    shadows: {
-        "0": string;
-        "1": string;
-        "2": string;
-        "3": string;
-    };
-    ratios: {
-        "16-9": string;
-        "3-2": string;
-        "4-3": string;
-        "1-1": string;
-        "3-4": string;
-    };
-}, import("@atom-learning/stitches-react/types/config").DefaultThemeMap, {
-    bg: (value: import("@atom-learning/stitches-react").PropertyValue<"background">) => {
-        background: import("@atom-learning/stitches-react/types/css-util").WithPropertyValue<"background">;
-    };
-    size: (value: import("@atom-learning/stitches-react").ScaleValue<"size"> | number | string) => {
-        height: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"size">;
-        width: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"size">;
-    };
-    p: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        padding: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    pt: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        paddingTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    pr: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        paddingRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    pb: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        paddingBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    pl: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        paddingLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    px: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        paddingLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-        paddingRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    py: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        paddingTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-        paddingBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    m: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        margin: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    mt: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        marginTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    mr: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        marginRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    mb: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    ml: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        marginLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    mx: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        marginLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-        marginRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    my: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        marginTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-        marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-}>>;
+declare const StyledNav: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
+    ref?: ((instance: HTMLElement | null) => void) | React.RefObject<HTMLElement> | null | undefined;
+}, never> & {
+    as?: React.ElementType;
+}, "ref"> & React.RefAttributes<HTMLElement>>;
 type PaginationProps = React.ComponentProps<typeof StyledNav> & {
     colorScheme?: TcolorScheme;
 };

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

@@ -1,2 +1,2 @@
-import*as e from"react";import{styled as S}from"../../../stitches.js";import{Pagination as w}from"../../pagination/Pagination.js";import{Text as y}from"../../text/Text.js";import{AsyncDataState as $}from"../DataTable.types.js";import{useDataTable as D}from"../DataTableContext.js";const h=S("nav",{display:"flex",flexDirection:"column",justifyContent:"space-between",alignItems:"center",fontVariantNumeric:"tabular-nums",flexWrap:"wrap",width:"100%",gap:"$4",mt:"$4","@md":{flexDirection:"row"}}),r=({colorScheme:m,...s})=>{const{applyPagination:a,getState:g,getRowModel:l,getPageCount:n,setPageIndex:c,getTotalRows:o,asyncDataState:p}=D();e.useEffect(()=>{a()},[a]);const{pagination:t}=g(),f=p!==$.PENDING&&o()===0,d=n()>1;if(f||!d)return null;const i=t.pageIndex*t.pageSize+1,u=i+l().rows.length-1,P=x=>{c(x-1)};return e.createElement(h,{...s},e.createElement(y,{size:"sm"},`${i.toString()} - ${u.toString()} of ${o()} items`),e.createElement(w,{colorScheme:m,selectedPage:t.pageIndex+1,pagesCount:n(),onSelectedPageChange:P}))};r.displayName="Pagination";export{r as Pagination};
+import*as e from"react";import{styled as S}from"../../../styled.js";import{Pagination as w}from"../../pagination/Pagination.js";import{Text as y}from"../../text/Text.js";import{AsyncDataState as E}from"../DataTable.types.js";import{useDataTable as b}from"../DataTableContext.js";const h=S("nav",{base:["flex","flex-col","justify-between","items-center","tabular-nums","flex-wrap","w-full","gap-4","mt-4","md:flex-row"]}),i=({colorScheme:c,...l})=>{const{applyPagination:a,getState:m,getRowModel:s,getPageCount:o,setPageIndex:g,getTotalRows:n,asyncDataState:p}=b();e.useEffect(()=>{a()},[a]);const{pagination:t}=m(),f=p!==E.PENDING&&n()===0,u=o()>1;if(f||!u)return null;const r=t.pageIndex*t.pageSize+1,P=r+s().rows.length-1,d=x=>{g(x-1)};return e.createElement(h,{...l},e.createElement(y,{size:"sm"},"".concat(r.toString()," - ").concat(P.toString()," of ").concat(n()," items")),e.createElement(w,{colorScheme:c,selectedPage:t.pageIndex+1,pagesCount:o(),onSelectedPageChange:d}))};i.displayName="Pagination";export{i as Pagination};
 //# sourceMappingURL=Pagination.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sources":["../../../../src/components/data-table/pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { TcolorScheme } from '../../../experiments/color-scheme'\nimport { Pagination as PaginationComponent } from '../../pagination'\nimport { Text } from '../../text'\nimport { AsyncDataState } from '../DataTable.types'\nimport { useDataTable } from '../DataTableContext'\n\nconst StyledNav = styled('nav', {\n  display: 'flex',\n  flexDirection: 'column',\n  justifyContent: 'space-between',\n  alignItems: 'center',\n  fontVariantNumeric: 'tabular-nums',\n  flexWrap: 'wrap',\n  width: '100%',\n  gap: '$4',\n  mt: '$4',\n  '@md': {\n    flexDirection: 'row'\n  }\n})\n\ntype PaginationProps = React.ComponentProps<typeof StyledNav> & {\n  colorScheme?: TcolorScheme\n}\n\n/** Applies pagination to parent DataTableProvider and renders UI to switch pages etc */\nexport const Pagination = ({ colorScheme, ...props }: PaginationProps) => {\n  const {\n    applyPagination,\n    getState,\n    getRowModel,\n    getPageCount,\n    setPageIndex,\n    getTotalRows,\n    asyncDataState\n  } = useDataTable()\n\n  React.useEffect(() => {\n    applyPagination()\n  }, [applyPagination])\n\n  const { pagination: paginationState } = getState()\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  // Show pagination only if total pages are more than 1\n  const showPagination = getPageCount() > 1\n\n  if (isEmpty || !showPagination) return null\n\n  const recordsCountFrom =\n    paginationState.pageIndex * paginationState.pageSize + 1\n  const recordsCountTo = recordsCountFrom + getRowModel().rows.length - 1\n\n  //indexing for the pagination component is 1 based\n  const setPage = (index: number) => {\n    setPageIndex(index - 1)\n  }\n\n  return (\n    <StyledNav {...props}>\n      <Text size=\"sm\">\n        {`${recordsCountFrom.toString()} - ${recordsCountTo.toString()} of ${getTotalRows()} items`}\n      </Text>\n      <PaginationComponent\n        colorScheme={colorScheme}\n        selectedPage={paginationState.pageIndex + 1}\n        pagesCount={getPageCount()}\n        onSelectedPageChange={setPage}\n      />\n    </StyledNav>\n  )\n}\n\nPagination.displayName = 'Pagination'\n"],"names":["StyledNav","styled","Pagination","colorScheme","props","applyPagination","getState","getRowModel","getPageCount","setPageIndex","getTotalRows","asyncDataState","useDataTable","React","paginationState","isEmpty","AsyncDataState","showPagination","recordsCountFrom","recordsCountTo","setPage","index","Text","PaginationComponent"],"mappings":"yRAUA,MAAMA,EAAYC,EAAO,MAAO,CAC9B,QAAS,OACT,cAAe,SACf,eAAgB,gBAChB,WAAY,SACZ,mBAAoB,eACpB,SAAU,OACV,MAAO,OACP,IAAK,KACL,GAAI,KACJ,MAAO,CACL,cAAe,KACjB,CACF,CAAC,EAOYC,EAAa,CAAC,CAAE,YAAAC,KAAgBC,CAAM,IAAuB,CACxE,KAAM,CACJ,gBAAAC,EACA,SAAAC,EACA,YAAAC,EACA,aAAAC,EACA,aAAAC,EACA,aAAAC,EACA,eAAAC,CACF,EAAIC,IAEJC,EAAM,UAAU,IAAM,CACpBR,GACF,EAAG,CAACA,CAAe,CAAC,EAEpB,KAAM,CAAE,WAAYS,CAAgB,EAAIR,EAAS,EAE3CS,EADYJ,IAAmBK,EAAe,SACtBN,MAAmB,EAG3CO,EAAiBT,IAAiB,EAExC,GAAIO,GAAW,CAACE,EAAgB,OAAO,KAEvC,MAAMC,EACJJ,EAAgB,UAAYA,EAAgB,SAAW,EACnDK,EAAiBD,EAAmBX,EAAY,EAAE,KAAK,OAAS,EAGhEa,EAAWC,GAAkB,CACjCZ,EAAaY,EAAQ,CAAC,CACxB,EAEA,OACER,EAAA,cAACb,EAAA,CAAW,GAAGI,GACbS,EAAA,cAACS,EAAA,CAAK,KAAK,MACR,GAAGJ,EAAiB,gBAAgBC,EAAe,iBAAiBT,EACvE,SAAA,EACAG,EAAA,cAACU,EAAA,CACC,YAAapB,EACb,aAAcW,EAAgB,UAAY,EAC1C,WAAYN,EAAAA,EACZ,qBAAsBY,CAAAA,CACxB,CACF,CAEJ,EAEAlB,EAAW,YAAc"}
+{"version":3,"file":"Pagination.js","sources":["../../../../src/components/data-table/pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { TcolorScheme } from '../../../experiments/color-scheme'\nimport { Pagination as PaginationComponent } from '../../pagination'\nimport { Text } from '../../text'\nimport { AsyncDataState } from '../DataTable.types'\nimport { useDataTable } from '../DataTableContext'\n\nconst StyledNav = styled('nav', {\n  base: [\n    'flex',\n    'flex-col',\n    'justify-between',\n    'items-center',\n    'tabular-nums',\n    'flex-wrap',\n    'w-full',\n    'gap-4',\n    'mt-4',\n    'md:flex-row'\n  ]\n})\n\ntype PaginationProps = React.ComponentProps<typeof StyledNav> & {\n  colorScheme?: TcolorScheme\n}\n\n/** Applies pagination to parent DataTableProvider and renders UI to switch pages etc */\nexport const Pagination = ({ colorScheme, ...props }: PaginationProps) => {\n  const {\n    applyPagination,\n    getState,\n    getRowModel,\n    getPageCount,\n    setPageIndex,\n    getTotalRows,\n    asyncDataState\n  } = useDataTable()\n\n  React.useEffect(() => {\n    applyPagination()\n  }, [applyPagination])\n\n  const { pagination: paginationState } = getState()\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  // Show pagination only if total pages are more than 1\n  const showPagination = getPageCount() > 1\n\n  if (isEmpty || !showPagination) return null\n\n  const recordsCountFrom =\n    paginationState.pageIndex * paginationState.pageSize + 1\n  const recordsCountTo = recordsCountFrom + getRowModel().rows.length - 1\n\n  //indexing for the pagination component is 1 based\n  const setPage = (index: number) => {\n    setPageIndex(index - 1)\n  }\n\n  return (\n    <StyledNav {...props}>\n      <Text size=\"sm\">\n        {`${recordsCountFrom.toString()} - ${recordsCountTo.toString()} of ${getTotalRows()} items`}\n      </Text>\n      <PaginationComponent\n        colorScheme={colorScheme}\n        selectedPage={paginationState.pageIndex + 1}\n        pagesCount={getPageCount()}\n        onSelectedPageChange={setPage}\n      />\n    </StyledNav>\n  )\n}\n\nPagination.displayName = 'Pagination'\n"],"names":["StyledNav","styled","Pagination","colorScheme","props","applyPagination","getState","getRowModel","getPageCount","setPageIndex","getTotalRows","asyncDataState","useDataTable","React","paginationState","isEmpty","AsyncDataState","showPagination","recordsCountFrom","recordsCountTo","setPage","index","Text","PaginationComponent"],"mappings":"uRAUA,MAAMA,EAAYC,EAAO,MAAO,CAC9B,KAAM,CACJ,OACA,WACA,kBACA,eACA,eACA,YACA,SACA,QACA,OACA,aACF,CACF,CAAC,EAOYC,EAAa,CAAC,CAAE,YAAAC,EAAa,GAAGC,CAAM,IAAuB,CACxE,KAAM,CACJ,gBAAAC,EACA,SAAAC,EACA,YAAAC,EACA,aAAAC,EACA,aAAAC,EACA,aAAAC,EACA,eAAAC,CACF,EAAIC,IAEJC,EAAM,UAAU,IAAM,CACpBR,EACF,CAAA,EAAG,CAACA,CAAe,CAAC,EAEpB,KAAM,CAAE,WAAYS,CAAgB,EAAIR,EAAAA,EAElCS,EADYJ,IAAmBK,EAAe,SACtBN,EAAa,IAAM,EAG3CO,EAAiBT,EAAiB,EAAA,EAExC,GAAIO,GAAW,CAACE,EAAgB,OAAO,KAEvC,MAAMC,EACJJ,EAAgB,UAAYA,EAAgB,SAAW,EACnDK,EAAiBD,EAAmBX,EAAY,EAAE,KAAK,OAAS,EAGhEa,EAAWC,GAAkB,CACjCZ,EAAaY,EAAQ,CAAC,CACxB,EAEA,OACER,EAAA,cAACb,EAAA,CAAW,GAAGI,GACbS,EAAA,cAACS,EAAA,CAAK,KAAK,MACR,GAAG,OAAAJ,EAAiB,SAAS,EAAC,OAAM,OAAAC,EAAe,SAAU,EAAA,MAAA,EAAO,OAAAT,EAAa,EAAC,QACrF,CAAA,EACAG,EAAA,cAACU,EAAA,CACC,YAAapB,EACb,aAAcW,EAAgB,UAAY,EAC1C,WAAYN,IACZ,qBAAsBY,CAAAA,CACxB,CACF,CAEJ,EAEAlB,EAAW,YAAc"}

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

@@ -1 +1 @@
-{"version":3,"file":"useSorting.js","sources":["../../../src/components/data-table/useSorting.ts"],"sourcesContent":["import type { SortingState } from '@tanstack/react-table'\nimport React from 'react'\n\nimport { TDefaultSort } from './DataTable.types'\nexport const useSortByColumn = (defaultSort: TDefaultSort | undefined) => {\n  const [isSortable, setIsSortable] = React.useState<boolean>(false)\n\n  const [sorting, setSorting] = React.useState<SortingState>(\n    defaultSort\n      ? [\n          {\n            id: defaultSort.column,\n            desc: defaultSort.direction === 'desc'\n          }\n        ]\n      : []\n  )\n\n  return { isSortable, setIsSortable, sorting, setSorting }\n}\n"],"names":["useSortByColumn","defaultSort","isSortable","setIsSortable","React","sorting","setSorting"],"mappings":"qBAIa,MAAAA,EAAmBC,GAA0C,CACxE,KAAM,CAACC,EAAYC,CAAa,EAAIC,EAAM,SAAkB,EAAK,EAE3D,CAACC,EAASC,CAAU,EAAIF,EAAM,SAClCH,EACI,CACE,CACE,GAAIA,EAAY,OAChB,KAAMA,EAAY,YAAc,MAClC,CACF,EACA,EACN,EAEA,MAAO,CAAE,WAAAC,EAAY,cAAAC,EAAe,QAAAE,EAAS,WAAAC,CAAW,CAC1D"}
+{"version":3,"file":"useSorting.js","sources":["../../../src/components/data-table/useSorting.ts"],"sourcesContent":["import type { SortingState } from '@tanstack/react-table'\nimport React from 'react'\n\nimport { TDefaultSort } from './DataTable.types'\n\nexport const useSortByColumn = (defaultSort: TDefaultSort | undefined) => {\n  const [isSortable, setIsSortable] = React.useState<boolean>(false)\n\n  const [sorting, setSorting] = React.useState<SortingState>(\n    defaultSort\n      ? [\n          {\n            id: defaultSort.column,\n            desc: defaultSort.direction === 'desc'\n          }\n        ]\n      : []\n  )\n\n  return { isSortable, setIsSortable, sorting, setSorting }\n}\n"],"names":["useSortByColumn","defaultSort","isSortable","setIsSortable","React","sorting","setSorting"],"mappings":"qBAKa,MAAAA,EAAmBC,GAA0C,CACxE,KAAM,CAACC,EAAYC,CAAa,EAAIC,EAAM,SAAkB,EAAK,EAE3D,CAACC,EAASC,CAAU,EAAIF,EAAM,SAClCH,EACI,CACE,CACE,GAAIA,EAAY,OAChB,KAAMA,EAAY,YAAc,MAClC,CACF,EACA,EACN,EAEA,MAAO,CAAE,WAAAC,EAAY,cAAAC,EAAe,QAAAE,EAAS,WAAAC,CAAW,CAC1D"}

package/dist/components/date-field/DateField.d.ts

@@ -3,7 +3,7 @@ import { DateInputProps } from '../../components/date-input';
 import { FieldElementWrapperProps } from '../../components/field-wrapper';
 type DateFieldProps = DateInputProps & FieldElementWrapperProps;
 export declare const DateField: {
-    ({ css, hideLabel, label, name, validation, prompt, description, appearance, ...remainingProps }: DateFieldProps): React.JSX.Element;
+    ({ className, hideLabel, label, name, validation, prompt, description, appearance, ...remainingProps }: DateFieldProps): React.JSX.Element;
     displayName: string;
 };
 export {};

package/dist/components/date-field/DateField.js

@@ -1,2 +1,2 @@
-import*as i from"react";import{useFormContext as F}from"react-hook-form";import{DateInput as b}from"../date-input/DateInput.js";import{FieldWrapper as g}from"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as v}from"../form/useFieldError.js";import"../form/useFormCustomContext.js";const p=({css:m,hideLabel:l,label:d,name:e,validation:r,prompt:n,description:s,appearance:t,...c})=>{const{register:o,trigger:f}=F(),{error:a}=v(e),u=r?o(r):o;return i.createElement(g,{css:m,description:s,error:a,fieldId:e,hideLabel:l,label:d,prompt:n,required:Boolean(r==null?void 0:r.required),appearance:t},i.createElement(b,{id:e,name:e,ref:u,appearance:t,...a&&{state:"error"},...c,revalidate:f}))};p.displayName="DateField";export{p as DateField};
+import*as o from"react";import{useFormContext as F}from"react-hook-form";import{DateInput as b}from"../date-input/DateInput.js";import{FieldWrapper as g}from"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as D}from"../form/useFieldError.js";import"../form/useFormCustomContext.js";const p=({className:m,hideLabel:l,label:d,name:e,validation:r,prompt:n,description:s,appearance:a,...c})=>{const{register:t,trigger:f}=F(),{error:i}=D(e),u=r?t(r):t;return o.createElement(g,{className:m,description:s,error:i,fieldId:e,hideLabel:l,label:d,prompt:n,required:!!(r!=null&&r.required),appearance:a},o.createElement(b,{id:e,name:e,ref:u,appearance:a,...i&&{state:"error"},...c,revalidate:f}))};p.displayName="DateField";export{p as DateField};
 //# sourceMappingURL=DateField.js.map

package/dist/components/date-field/DateField.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateField.js","sources":["../../../src/components/date-field/DateField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport { DateInput, DateInputProps } from '~/components/date-input'\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper'\nimport { useFieldError } from '~/components/form'\n\ntype DateFieldProps = DateInputProps & FieldElementWrapperProps\n\nexport const DateField = ({\n  css,\n  hideLabel,\n  label,\n  name,\n  validation,\n  prompt,\n  description,\n  appearance,\n  ...remainingProps\n}: DateFieldProps) => {\n  const { register, trigger } = useFormContext()\n  const { error } = useFieldError(name)\n  const ref = validation ? register(validation) : register\n\n  return (\n    <FieldWrapper\n      css={css}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={appearance}\n    >\n      <DateInput\n        id={name}\n        name={name}\n        ref={ref}\n        appearance={appearance}\n        {...(error && { state: 'error' })}\n        {...remainingProps}\n        revalidate={trigger}\n      />\n    </FieldWrapper>\n  )\n}\n\nDateField.displayName = 'DateField'\n"],"names":["DateField","css","hideLabel","label","name","validation","prompt","description","appearance","remainingProps","register","trigger","useFormContext","error","useFieldError","ref","React","FieldWrapper","DateInput"],"mappings":"wWAYa,MAAAA,EAAY,CAAC,CACxB,IAAAC,EACA,UAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,OAAAC,EACA,YAAAC,EACA,WAAAC,KACGC,CACL,IAAsB,CACpB,KAAM,CAAE,SAAAC,EAAU,QAAAC,CAAQ,EAAIC,EAAe,EACvC,CAAE,MAAAC,CAAM,EAAIC,EAAcV,CAAI,EAC9BW,EAAMV,EAAaK,EAASL,CAAU,EAAIK,EAEhD,OACEM,EAAA,cAACC,EAAA,CACC,IAAKhB,EACL,YAAaM,EACb,MAAOM,EACP,QAAST,EACT,UAAWF,EACX,MAAOC,EACP,OAAQG,EACR,SAAU,QAAQD,GAAA,KAAA,OAAAA,EAAY,QAAQ,EACtC,WAAYG,CAAAA,EAEZQ,EAAA,cAACE,EAAA,CACC,GAAId,EACJ,KAAMA,EACN,IAAKW,EACL,WAAYP,EACX,GAAIK,GAAS,CAAE,MAAO,OAAQ,EAC9B,GAAGJ,EACJ,WAAYE,CAAAA,CACd,CACF,CAEJ,EAEAX,EAAU,YAAc"}
+{"version":3,"file":"DateField.js","sources":["../../../src/components/date-field/DateField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport { DateInput, DateInputProps } from '~/components/date-input'\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper'\nimport { useFieldError } from '~/components/form'\n\ntype DateFieldProps = DateInputProps & FieldElementWrapperProps\n\nexport const DateField = ({\n  className,\n  hideLabel,\n  label,\n  name,\n  validation,\n  prompt,\n  description,\n  appearance,\n  ...remainingProps\n}: DateFieldProps) => {\n  const { register, trigger } = useFormContext()\n  const { error } = useFieldError(name)\n  const ref = validation ? register(validation) : register\n\n  return (\n    <FieldWrapper\n      className={className}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={appearance}\n    >\n      <DateInput\n        id={name}\n        name={name}\n        ref={ref}\n        appearance={appearance}\n        {...(error && { state: 'error' })}\n        {...remainingProps}\n        revalidate={trigger}\n      />\n    </FieldWrapper>\n  )\n}\n\nDateField.displayName = 'DateField'\n"],"names":["DateField","className","hideLabel","label","name","validation","prompt","description","appearance","remainingProps","register","trigger","useFormContext","error","useFieldError","ref","React","FieldWrapper","DateInput"],"mappings":"wWAYa,MAAAA,EAAY,CAAC,CACxB,UAAAC,EACA,UAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,OAAAC,EACA,YAAAC,EACA,WAAAC,EACA,GAAGC,CACL,IAAsB,CACpB,KAAM,CAAE,SAAAC,EAAU,QAAAC,CAAQ,EAAIC,EAAAA,EACxB,CAAE,MAAAC,CAAM,EAAIC,EAAcV,CAAI,EAC9BW,EAAMV,EAAaK,EAASL,CAAU,EAAIK,EAEhD,OACEM,EAAA,cAACC,EAAA,CACC,UAAWhB,EACX,YAAaM,EACb,MAAOM,EACP,QAAST,EACT,UAAWF,EACX,MAAOC,EACP,OAAQG,EACR,SAAU,CAAQD,EAAAA,GAAA,MAAAA,EAAY,UAC9B,WAAYG,CAAAA,EAEZQ,EAAA,cAACE,EAAA,CACC,GAAId,EACJ,KAAMA,EACN,IAAKW,EACL,WAAYP,EACX,GAAIK,GAAS,CAAE,MAAO,OAAQ,EAC9B,GAAGJ,EACJ,WAAYE,CAAAA,CACd,CACF,CAEJ,EAEAX,EAAU,YAAc"}

package/dist/components/date-input/DateInput.d.ts

@@ -9,4 +9,11 @@ export type DateInputProps = Omit<DayzedInterface, 'onDateSelected'> & CalendarT
     revalidate?: () => Promise<boolean>;
     onChange?: (value?: Date) => void;
 };
-export declare const DateInput: React.ForwardRefExoticComponent<DateInputProps>;
+export declare const DateInput: React.ForwardRefExoticComponent<Omit<DayzedInterface, "onDateSelected"> & CalendarTranslationProps & {
+    initialDate?: Date;
+    dateFormat?: string;
+    disabled?: boolean;
+    size?: "sm" | "md" | "lg";
+    revalidate?: () => Promise<boolean>;
+    onChange?: (value?: Date) => void;
+} & React.RefAttributes<HTMLInputElement>>;