@atom-learning/components 3.12.3 → 3.12.6

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: React.FC<DataTableBodyProps> = ({\n  striped = false,\n  idColumn = 'id',\n  ...props\n}) => {\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,EAAqD,CAAC,CACjE,QAAAC,EAAU,GACV,SAAAC,EAAW,QACRC,CACL,IAAM,CACJ,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,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"}

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

@@ -5,4 +5,4 @@ export declare type DataTableDraggableRowProps = React.ComponentProps<typeof Tab
     row: Row<Record<string, unknown>>;
     idColumn?: string;
 };
-export declare const DragAndDropTableRow: React.FC<DataTableDraggableRowProps>;
+export declare const DragAndDropTableRow: ({ row, idColumn }: DataTableDraggableRowProps) => JSX.Element;

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 o}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 r=t.original[m];return l.createElement(o.Item,{id:r,asChild:!0},l.createElement(a.Row,null,t.getVisibleCells().map((e,n)=>n===0?l.createElement(a.Cell,{key:e.id},l.createElement(o.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 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};
 //# 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: React.FC<DataTableDraggableRowProps> = ({\n  row,\n  idColumn = 'id'\n}) => {\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,EAA4D,CAAC,CACxE,IAAAC,EACA,SAAAC,EAAW,IACb,IAAM,CACJ,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'\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"}

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

@@ -332,5 +332,5 @@ declare const StyledNav: import("@stitches/react/types/styled-component").Styled
 }>>;
 declare type PaginationProps = React.ComponentProps<typeof StyledNav>;
 /** Applies pagination to parent DataTableProvider and renders UI to switch pages etc */
-export declare const Pagination: React.FC<PaginationProps>;
+export declare const Pagination: (props: PaginationProps) => JSX.Element | null;
 export {};

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 { Flex } from '../../flex'\nimport { Text } from '../../text'\nimport { AsyncDataState } from '../DataTable.types'\nimport { useDataTable } from '../DataTableContext'\nimport { DirectionButton, GotoPageSelect } from './PaginationButtons'\n\nconst StyledNav = styled('nav', {\n  display: 'flex',\n  justifyContent: 'space-between',\n  alignItems: 'center',\n  fontVariantNumeric: 'tabular-nums',\n  flexWrap: 'wrap',\n  rowGap: '$4'\n})\n\ntype PaginationProps = React.ComponentProps<typeof StyledNav>\n\n/** Applies pagination to parent DataTableProvider and renders UI to switch pages etc */\nexport const Pagination: React.FC<PaginationProps> = (props) => {\n  const {\n    applyPagination,\n    getState,\n    getRowModel,\n    getPageCount,\n    previousPage,\n    nextPage,\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  if (isEmpty) return null\n\n  const recordsCountFrom =\n    paginationState.pageIndex * paginationState.pageSize + 1\n  const recordsCountTo = recordsCountFrom + getRowModel().rows.length - 1\n  const isPaginationDisabled =\n    asyncDataState === AsyncDataState.PENDING ||\n    asyncDataState === AsyncDataState.REJECTED\n\n  return (\n    <StyledNav {...props}>\n      <Text\n        size=\"sm\"\n        css={{\n          pr: '$4',\n          '@sm': { flexBasis: '50%' }\n        }}\n      >\n        {`${recordsCountFrom.toString()} - ${recordsCountTo.toString()} of ${getTotalRows()} items`}\n      </Text>\n\n      <Flex\n        css={{\n          justifyContent: 'space-between',\n          width: '100%',\n          '@sm': { flexBasis: '50%' }\n        }}\n      >\n        <GotoPageSelect\n          gotoPage={setPageIndex}\n          pageCount={getPageCount()}\n          pageIndex={paginationState.pageIndex}\n          disabled={isPaginationDisabled}\n        />\n\n        <Flex>\n          <DirectionButton\n            direction=\"previous\"\n            disabled={paginationState.pageIndex === 0 || isPaginationDisabled}\n            onClick={previousPage}\n            css={{ mr: '$4' }}\n          />\n          <DirectionButton\n            direction=\"next\"\n            disabled={\n              paginationState.pageIndex === getPageCount() - 1 ||\n              isPaginationDisabled\n            }\n            onClick={nextPage}\n          />\n        </Flex>\n      </Flex>\n    </StyledNav>\n  )\n}\n"],"names":["StyledNav","styled","Pagination","props","applyPagination","getState","getRowModel","getPageCount","previousPage","nextPage","setPageIndex","getTotalRows","asyncDataState","useDataTable","React","paginationState","AsyncDataState","recordsCountFrom","recordsCountTo","isPaginationDisabled","Text","Flex","GotoPageSelect","DirectionButton"],"mappings":"oVAUA,MAAMA,EAAYC,EAAO,MAAO,CAC9B,QAAS,OACT,eAAgB,gBAChB,WAAY,SACZ,mBAAoB,eACpB,SAAU,OACV,OAAQ,IACV,CAAC,EAKYC,EAAyCC,GAAU,CAC9D,KAAM,CACJ,gBAAAC,EACA,SAAAC,EACA,YAAAC,EACA,aAAAC,EACA,aAAAC,EACA,SAAAC,EACA,aAAAC,EACA,aAAAC,EACA,eAAAC,CACF,EAAIC,IAEJC,EAAM,UAAU,IAAM,CACpBV,EACF,CAAA,EAAG,CAACA,CAAe,CAAC,EAEpB,KAAM,CAAE,WAAYW,CAAgB,EAAIV,IAIxC,GAHkBO,IAAmBI,EAAe,SACtBL,EAAa,IAAM,EAEpC,OAAO,KAEpB,MAAMM,EACJF,EAAgB,UAAYA,EAAgB,SAAW,EACnDG,EAAiBD,EAAmBX,IAAc,KAAK,OAAS,EAChEa,EACJP,IAAmBI,EAAe,SAClCJ,IAAmBI,EAAe,SAEpC,OACEF,EAAA,cAACd,EAAA,CAAW,GAAGG,CACbW,EAAAA,EAAA,cAACM,EAAA,CACC,KAAK,KACL,IAAK,CACH,GAAI,KACJ,MAAO,CAAE,UAAW,KAAM,CAC5B,CAAA,EAEC,GAAGH,EAAiB,gBAAgBC,EAAe,SAAS,QAAQP,WACvE,EAEAG,EAAA,cAACO,EAAA,CACC,IAAK,CACH,eAAgB,gBAChB,MAAO,OACP,MAAO,CAAE,UAAW,KAAM,CAC5B,CAAA,EAEAP,EAAA,cAACQ,EAAA,CACC,SAAUZ,EACV,UAAWH,EACX,EAAA,UAAWQ,EAAgB,UAC3B,SAAUI,CAAAA,CACZ,EAEAL,EAAA,cAACO,EAAA,KACCP,EAAA,cAACS,EAAA,CACC,UAAU,WACV,SAAUR,EAAgB,YAAc,GAAKI,EAC7C,QAASX,EACT,IAAK,CAAE,GAAI,IAAK,EAClB,EACAM,EAAA,cAACS,EAAA,CACC,UAAU,OACV,SACER,EAAgB,YAAcR,IAAiB,GAC/CY,EAEF,QAASV,CACX,CAAA,CACF,CACF,CACF,CAEJ"}
+{"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 { Flex } from '../../flex'\nimport { Text } from '../../text'\nimport { AsyncDataState } from '../DataTable.types'\nimport { useDataTable } from '../DataTableContext'\nimport { DirectionButton, GotoPageSelect } from './PaginationButtons'\n\nconst StyledNav = styled('nav', {\n  display: 'flex',\n  justifyContent: 'space-between',\n  alignItems: 'center',\n  fontVariantNumeric: 'tabular-nums',\n  flexWrap: 'wrap',\n  rowGap: '$4'\n})\n\ntype PaginationProps = React.ComponentProps<typeof StyledNav>\n\n/** Applies pagination to parent DataTableProvider and renders UI to switch pages etc */\nexport const Pagination = (props: PaginationProps) => {\n  const {\n    applyPagination,\n    getState,\n    getRowModel,\n    getPageCount,\n    previousPage,\n    nextPage,\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  if (isEmpty) return null\n\n  const recordsCountFrom =\n    paginationState.pageIndex * paginationState.pageSize + 1\n  const recordsCountTo = recordsCountFrom + getRowModel().rows.length - 1\n  const isPaginationDisabled =\n    asyncDataState === AsyncDataState.PENDING ||\n    asyncDataState === AsyncDataState.REJECTED\n\n  return (\n    <StyledNav {...props}>\n      <Text\n        size=\"sm\"\n        css={{\n          pr: '$4',\n          '@sm': { flexBasis: '50%' }\n        }}\n      >\n        {`${recordsCountFrom.toString()} - ${recordsCountTo.toString()} of ${getTotalRows()} items`}\n      </Text>\n\n      <Flex\n        css={{\n          justifyContent: 'space-between',\n          width: '100%',\n          '@sm': { flexBasis: '50%' }\n        }}\n      >\n        <GotoPageSelect\n          gotoPage={setPageIndex}\n          pageCount={getPageCount()}\n          pageIndex={paginationState.pageIndex}\n          disabled={isPaginationDisabled}\n        />\n\n        <Flex>\n          <DirectionButton\n            direction=\"previous\"\n            disabled={paginationState.pageIndex === 0 || isPaginationDisabled}\n            onClick={previousPage}\n            css={{ mr: '$4' }}\n          />\n          <DirectionButton\n            direction=\"next\"\n            disabled={\n              paginationState.pageIndex === getPageCount() - 1 ||\n              isPaginationDisabled\n            }\n            onClick={nextPage}\n          />\n        </Flex>\n      </Flex>\n    </StyledNav>\n  )\n}\n"],"names":["StyledNav","styled","Pagination","props","applyPagination","getState","getRowModel","getPageCount","previousPage","nextPage","setPageIndex","getTotalRows","asyncDataState","useDataTable","React","paginationState","AsyncDataState","recordsCountFrom","recordsCountTo","isPaginationDisabled","Text","Flex","GotoPageSelect","DirectionButton"],"mappings":"oVAUA,MAAMA,EAAYC,EAAO,MAAO,CAC9B,QAAS,OACT,eAAgB,gBAChB,WAAY,SACZ,mBAAoB,eACpB,SAAU,OACV,OAAQ,IACV,CAAC,EAKYC,EAAcC,GAA2B,CACpD,KAAM,CACJ,gBAAAC,EACA,SAAAC,EACA,YAAAC,EACA,aAAAC,EACA,aAAAC,EACA,SAAAC,EACA,aAAAC,EACA,aAAAC,EACA,eAAAC,CACF,EAAIC,IAEJC,EAAM,UAAU,IAAM,CACpBV,EACF,CAAA,EAAG,CAACA,CAAe,CAAC,EAEpB,KAAM,CAAE,WAAYW,CAAgB,EAAIV,IAIxC,GAHkBO,IAAmBI,EAAe,SACtBL,EAAa,IAAM,EAEpC,OAAO,KAEpB,MAAMM,EACJF,EAAgB,UAAYA,EAAgB,SAAW,EACnDG,EAAiBD,EAAmBX,IAAc,KAAK,OAAS,EAChEa,EACJP,IAAmBI,EAAe,SAClCJ,IAAmBI,EAAe,SAEpC,OACEF,EAAA,cAACd,EAAA,CAAW,GAAGG,CACbW,EAAAA,EAAA,cAACM,EAAA,CACC,KAAK,KACL,IAAK,CACH,GAAI,KACJ,MAAO,CAAE,UAAW,KAAM,CAC5B,CAAA,EAEC,GAAGH,EAAiB,gBAAgBC,EAAe,SAAS,QAAQP,WACvE,EAEAG,EAAA,cAACO,EAAA,CACC,IAAK,CACH,eAAgB,gBAChB,MAAO,OACP,MAAO,CAAE,UAAW,KAAM,CAC5B,CAAA,EAEAP,EAAA,cAACQ,EAAA,CACC,SAAUZ,EACV,UAAWH,EACX,EAAA,UAAWQ,EAAgB,UAC3B,SAAUI,CAAAA,CACZ,EAEAL,EAAA,cAACO,EAAA,KACCP,EAAA,cAACS,EAAA,CACC,UAAU,WACV,SAAUR,EAAgB,YAAc,GAAKI,EAC7C,QAASX,EACT,IAAK,CAAE,GAAI,IAAK,EAClB,EACAM,EAAA,cAACS,EAAA,CACC,UAAU,OACV,SACER,EAAgB,YAAcR,IAAiB,GAC/CY,EAEF,QAASV,CACX,CAAA,CACF,CACF,CACF,CAEJ"}

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

@@ -1,14 +1,14 @@
-import React from 'react';
+/// <reference types="react" />
 import type { CSS } from '../../../stitches';
-export declare const DirectionButton: React.FC<{
-    css?: CSS;
+export declare const DirectionButton: ({ direction, ...remainingProps }: {
+    css?: CSS | undefined;
     direction: 'next' | 'previous';
     disabled: boolean;
     onClick: () => void;
-}>;
-export declare const GotoPageSelect: React.FC<{
+}) => JSX.Element;
+export declare const GotoPageSelect: ({ gotoPage, pageCount, pageIndex, disabled }: {
     pageIndex: number;
     pageCount: number;
     gotoPage: (pageNumber: number) => void;
     disabled: boolean;
-}>;
+}) => JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"PaginationButtons.js","sources":["../../../../src/components/data-table/pagination/PaginationButtons.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@atom-learning/icons'\nimport React from 'react'\n\nimport type { CSS } from '~/stitches'\n\nimport { ActionIcon } from '../../action-icon'\nimport { Flex } from '../../flex'\nimport { Icon } from '../../icon'\nimport { Select } from '../../select'\nimport { Text } from '../../text'\n\nexport const DirectionButton: React.FC<{\n  css?: CSS\n  direction: 'next' | 'previous'\n  disabled: boolean\n  onClick: () => void\n}> = ({ direction, ...remainingProps }) => {\n  const isNext = direction === 'next'\n\n  return (\n    <ActionIcon\n      appearance=\"outline\"\n      isRounded\n      label={isNext ? 'Next page' : 'Previous page'}\n      name={isNext ? 'Next page' : 'Previous page'}\n      size=\"md\"\n      {...remainingProps}\n    >\n      <Icon is={isNext ? ChevronRight : ChevronLeft} />\n    </ActionIcon>\n  )\n}\n\nexport const GotoPageSelect: React.FC<{\n  pageIndex: number\n  pageCount: number\n  gotoPage: (pageNumber: number) => void\n  disabled: boolean\n}> = ({ gotoPage, pageCount, pageIndex, disabled }) => {\n  return (\n    <Flex css={{ alignItems: 'center' }}>\n      <Select\n        value={pageIndex}\n        size=\"sm\"\n        css={{ mr: '$3' }}\n        disabled={disabled}\n        onChange={(e) => {\n          gotoPage(Number(e.target.value))\n        }}\n      >\n        {Array.from({ length: pageCount }, (z, x) => x).map((i) => {\n          return (\n            <option key={i} value={i}>\n              {i + 1}\n            </option>\n          )\n        })}\n      </Select>\n      <Text size=\"sm\" css={{ flex: 'none' }}>{`of ${pageCount} ${\n        pageCount > 1 ? 'pages' : 'page'\n      }`}</Text>\n    </Flex>\n  )\n}\n"],"names":["DirectionButton","direction","remainingProps","isNext","React","ActionIcon","Icon","ChevronRight","ChevronLeft","GotoPageSelect","gotoPage","pageCount","pageIndex","disabled","Flex","Select","z","x","i","Text"],"mappings":"qUAWa,MAAAA,EAKR,CAAC,CAAE,UAAAC,KAAcC,CAAe,IAAM,CACzC,MAAMC,EAASF,IAAc,OAE7B,OACEG,EAAA,cAACC,EAAA,CACC,WAAW,UACX,UAAS,GACT,MAAOF,EAAS,YAAc,gBAC9B,KAAMA,EAAS,YAAc,gBAC7B,KAAK,KACJ,GAAGD,CAAAA,EAEJE,EAAA,cAACE,EAAA,CAAK,GAAIH,EAASI,EAAeC,CAAAA,CAAa,CACjD,CAEJ,EAEaC,EAKR,CAAC,CAAE,SAAAC,EAAU,UAAAC,EAAW,UAAAC,EAAW,SAAAC,CAAS,IAE7CT,EAAA,cAACU,EAAA,CAAK,IAAK,CAAE,WAAY,QAAS,GAChCV,EAAA,cAACW,EAAA,CACC,MAAOH,EACP,KAAK,KACL,IAAK,CAAE,GAAI,IAAK,EAChB,SAAUC,EACV,SAAW,GAAM,CACfH,EAAS,OAAO,EAAE,OAAO,KAAK,CAAC,CACjC,GAEC,MAAM,KAAK,CAAE,OAAQC,CAAU,EAAG,CAACK,EAAGC,IAAMA,CAAC,EAAE,IAAKC,GAEjDd,EAAA,cAAC,SAAO,CAAA,IAAKc,EAAG,MAAOA,CAAAA,EACpBA,EAAI,CACP,CAEH,CACH,EACAd,EAAA,cAACe,EAAA,CAAK,KAAK,KAAK,IAAK,CAAE,KAAM,MAAO,GAAI,MAAMR,KAC5CA,EAAY,EAAI,QAAU,QACzB,CACL"}
+{"version":3,"file":"PaginationButtons.js","sources":["../../../../src/components/data-table/pagination/PaginationButtons.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@atom-learning/icons'\nimport React from 'react'\n\nimport type { CSS } from '~/stitches'\n\nimport { ActionIcon } from '../../action-icon'\nimport { Flex } from '../../flex'\nimport { Icon } from '../../icon'\nimport { Select } from '../../select'\nimport { Text } from '../../text'\n\nexport const DirectionButton = ({\n  direction,\n  ...remainingProps\n}: {\n  css?: CSS\n  direction: 'next' | 'previous'\n  disabled: boolean\n  onClick: () => void\n}) => {\n  const isNext = direction === 'next'\n\n  return (\n    <ActionIcon\n      appearance=\"outline\"\n      isRounded\n      label={isNext ? 'Next page' : 'Previous page'}\n      name={isNext ? 'Next page' : 'Previous page'}\n      size=\"md\"\n      {...remainingProps}\n    >\n      <Icon is={isNext ? ChevronRight : ChevronLeft} />\n    </ActionIcon>\n  )\n}\n\nexport const GotoPageSelect = ({\n  gotoPage,\n  pageCount,\n  pageIndex,\n  disabled\n}: {\n  pageIndex: number\n  pageCount: number\n  gotoPage: (pageNumber: number) => void\n  disabled: boolean\n}) => {\n  return (\n    <Flex css={{ alignItems: 'center' }}>\n      <Select\n        value={pageIndex}\n        size=\"sm\"\n        css={{ mr: '$3' }}\n        disabled={disabled}\n        onChange={(e) => {\n          gotoPage(Number(e.target.value))\n        }}\n      >\n        {Array.from({ length: pageCount }, (z, x) => x).map((i) => {\n          return (\n            <option key={i} value={i}>\n              {i + 1}\n            </option>\n          )\n        })}\n      </Select>\n      <Text size=\"sm\" css={{ flex: 'none' }}>{`of ${pageCount} ${\n        pageCount > 1 ? 'pages' : 'page'\n      }`}</Text>\n    </Flex>\n  )\n}\n"],"names":["DirectionButton","direction","remainingProps","isNext","React","ActionIcon","Icon","ChevronRight","ChevronLeft","GotoPageSelect","gotoPage","pageCount","pageIndex","disabled","Flex","Select","z","x","i","Text"],"mappings":"qUAWa,MAAAA,EAAkB,CAAC,CAC9B,UAAAC,KACGC,CACL,IAKM,CACJ,MAAMC,EAASF,IAAc,OAE7B,OACEG,EAAA,cAACC,EAAA,CACC,WAAW,UACX,UAAS,GACT,MAAOF,EAAS,YAAc,gBAC9B,KAAMA,EAAS,YAAc,gBAC7B,KAAK,KACJ,GAAGD,CAAAA,EAEJE,EAAA,cAACE,EAAA,CAAK,GAAIH,EAASI,EAAeC,CAAAA,CAAa,CACjD,CAEJ,EAEaC,EAAiB,CAAC,CAC7B,SAAAC,EACA,UAAAC,EACA,UAAAC,EACA,SAAAC,CACF,IAOIT,EAAA,cAACU,EAAA,CAAK,IAAK,CAAE,WAAY,QAAS,GAChCV,EAAA,cAACW,EAAA,CACC,MAAOH,EACP,KAAK,KACL,IAAK,CAAE,GAAI,IAAK,EAChB,SAAUC,EACV,SAAW,GAAM,CACfH,EAAS,OAAO,EAAE,OAAO,KAAK,CAAC,CACjC,GAEC,MAAM,KAAK,CAAE,OAAQC,CAAU,EAAG,CAACK,EAAGC,IAAMA,CAAC,EAAE,IAAKC,GAEjDd,EAAA,cAAC,SAAO,CAAA,IAAKc,EAAG,MAAOA,CAAAA,EACpBA,EAAI,CACP,CAEH,CACH,EACAd,EAAA,cAACe,EAAA,CAAK,KAAK,KAAK,IAAK,CAAE,KAAM,MAAO,GAAI,MAAMR,KAC5CA,EAAY,EAAI,QAAU,QACzB,CACL"}

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

@@ -1,6 +1,9 @@
-import * as React from 'react';
+/// <reference types="react" />
 import { DateInputProps } from '../../components/date-input';
 import { FieldElementWrapperProps } from '../../components/field-wrapper';
 declare type DateFieldProps = DateInputProps & FieldElementWrapperProps;
-export declare const DateField: React.FC<DateFieldProps>;
+export declare const DateField: {
+    ({ css, hideLabel, label, name, validation, prompt, description, ...remainingProps }: DateFieldProps): JSX.Element;
+    displayName: string;
+};
 export {};

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: React.FC<DateFieldProps> = ({\n  css,\n  hideLabel,\n  label,\n  name,\n  validation,\n  prompt,\n  description,\n  ...remainingProps\n}) => {\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    >\n      <DateInput\n        id={name}\n        name={name}\n        ref={ref}\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","remainingProps","register","trigger","useFormContext","error","useFieldError","ref","React","FieldWrapper","DateInput"],"mappings":"gUAYO,MAAMA,EAAsC,CAAC,CAClD,IAAAC,EACA,UAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,OAAAC,EACA,YAAAC,KACGC,CACL,IAAM,CACJ,KAAM,CAAE,SAAAC,EAAU,QAAAC,CAAQ,EAAIC,EACxB,EAAA,CAAE,MAAAC,CAAM,EAAIC,EAAcT,CAAI,EAC9BU,EAAMT,EAAaI,EAASJ,CAAU,EAAII,EAEhD,OACEM,EAAA,cAACC,EAAA,CACC,IAAKf,EACL,YAAaM,EACb,MAAOK,EACP,QAASR,EACT,UAAWF,EACX,MAAOC,EACP,OAAQG,EACR,SAAU,QAAQD,GAAA,KAAA,OAAAA,EAAY,QAAQ,CAAA,EAEtCU,EAAA,cAACE,EAAA,CACC,GAAIb,EACJ,KAAMA,EACN,IAAKU,EACJ,GAAIF,GAAS,CAAE,MAAO,OAAQ,EAC9B,GAAGJ,EACJ,WAAYE,CAAAA,CACd,CACF,CAEJ,EAEAV,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  css,\n  hideLabel,\n  label,\n  name,\n  validation,\n  prompt,\n  description,\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    >\n      <DateInput\n        id={name}\n        name={name}\n        ref={ref}\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","remainingProps","register","trigger","useFormContext","error","useFieldError","ref","React","FieldWrapper","DateInput"],"mappings":"gUAYO,MAAMA,EAAY,CAAC,CACxB,IAAAC,EACA,UAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,OAAAC,EACA,YAAAC,KACGC,CACL,IAAsB,CACpB,KAAM,CAAE,SAAAC,EAAU,QAAAC,CAAQ,EAAIC,EACxB,EAAA,CAAE,MAAAC,CAAM,EAAIC,EAAcT,CAAI,EAC9BU,EAAMT,EAAaI,EAASJ,CAAU,EAAII,EAEhD,OACEM,EAAA,cAACC,EAAA,CACC,IAAKf,EACL,YAAaM,EACb,MAAOK,EACP,QAASR,EACT,UAAWF,EACX,MAAOC,EACP,OAAQG,EACR,SAAU,QAAQD,GAAA,KAAA,OAAAA,EAAY,QAAQ,CAAA,EAEtCU,EAAA,cAACE,EAAA,CACC,GAAIb,EACJ,KAAMA,EACN,IAAKU,EACJ,GAAIF,GAAS,CAAE,MAAO,OAAQ,EAC9B,GAAGJ,EACJ,WAAYE,CAAAA,CACd,CACF,CAEJ,EAEAV,EAAU,YAAc"}

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

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

package/dist/components/date-input/DateInput.js

@@ -1,2 +1,2 @@
-import{CalendarEvent as B}from"@atom-learning/icons";import p from"dayjs";import M from"dayjs/plugin/customParseFormat";import*as e from"react";import{DIALOG_Z_INDEX as P}from"../../constants/zIndices.js";import"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{getFieldIconSize as H}from"../../utilities/style/get-icon-size.js";import{useCallbackRefState as $}from"../../utilities/hooks/useCallbackRef.js";import{ActionIcon as U}from"../action-icon/ActionIcon.js";import{Box as V}from"../box/Box.js";import{Calendar as W}from"../calendar/Calendar.js";import{DEFAULT_LABELS as Y}from"../calendar/constants.js";import{Icon as j}from"../icon/Icon.js";import{Input as G}from"../input/Input.js";import{Popover as c}from"../popover/Popover.js";import{DEFAULT_DATE_FORMAT as I}from"./constants.js";p.extend(M);const w=(n,o=I)=>n?p(n).format(o):"",y=e.forwardRef(({initialDate:n,dateFormat:o=I,firstDayOfWeek:C=1,disabled:f,monthNames:T,weekdayNames:k,size:d="md",labels:A,revalidate:l,onChange:u,minDate:O,maxDate:x,...z},N)=>{const[s,D]=e.useState(n?p(n).toDate():void 0),[m,S]=$();e.useImperativeHandle(N,()=>m);const F=w(s,o),L=e.useCallback(t=>{const r=t.target.value,a=p(r,o),i=a.isValid()?a.toDate():void 0;D(i),u==null||u(i)},[o,u]),E=e.useCallback(t=>{D(t),(()=>{var r;if(!m)return;const a=(r=Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value"))==null?void 0:r.set;a==null||a.call(m,w(t,o));const i=new Event("input",{bubbles:!0});m.dispatchEvent(i)})()},[o,m]),b={...Y,...A},[R,v]=e.useState(!1),h=e.useRef(null),g=e.useRef(null),_=e.useMemo(()=>H(d),[d]);return e.createElement(V,{css:{position:"relative",height:"max-content"}},e.createElement(G,{name:"date",disabled:f,size:d,...z,onChange:L,ref:S,defaultValue:F}),e.createElement(c,{modal:!0,open:R,onOpenChange:v},e.createElement(c.Trigger,{asChild:!0},e.createElement(U,{css:{position:"absolute",top:"50%",transform:"translateY(-50%)",right:"0"},disabled:f,label:b.open,size:_,theme:"neutral",hasTooltip:!1},e.createElement(j,{is:B}))),e.createElement(c.Portal,null,e.createElement(c.Content,{css:{pr:"$sizes$2",zIndex:P},side:"bottom",align:"end",showCloseButton:!1,onOpenAutoFocus:t=>{var r,a;t.preventDefault(),s?(r=g.current)==null||r.focus():(a=h.current)==null||a.focus()}},e.createElement(W,{date:s||new Date,selected:s,onDateSelected:async t=>{v(!1),await E(t.date),l&&l()},setYear:async t=>{await E(t),l&&l()},minDate:O,maxDate:x,refDateToday:h,refDateSelected:g,firstDayOfWeek:C,monthNames:T,weekdayNames:k,labels:b})))))});y.displayName="DateInput";export{y as DateInput};
+import{CalendarEvent as B}from"@atom-learning/icons";import p from"dayjs";import M from"dayjs/plugin/customParseFormat";import*as e from"react";import{DIALOG_Z_INDEX as P}from"../../constants/zIndices.js";import"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{getFieldIconSize as H}from"../../utilities/style/get-icon-size.js";import{useCallbackRefState as $}from"../../utilities/hooks/useCallbackRef.js";import{ActionIcon as U}from"../action-icon/ActionIcon.js";import{Box as V}from"../box/Box.js";import{Calendar as W}from"../calendar/Calendar.js";import{DEFAULT_LABELS as Y}from"../calendar/constants.js";import{Icon as j}from"../icon/Icon.js";import{Input as G}from"../input/Input.js";import{Popover as c}from"../popover/Popover.js";import{DEFAULT_DATE_FORMAT as C}from"./constants.js";p.extend(M);const I=(n,o=C)=>n?p(n).format(o):"",w=e.forwardRef(({initialDate:n,dateFormat:o=C,firstDayOfWeek:y=1,disabled:f,monthNames:T,weekdayNames:k,size:d="md",labels:A,revalidate:l,onChange:u,minDate:O,maxDate:x,...z},F)=>{const[s,D]=e.useState(n?p(n).toDate():void 0),[m,S]=$();e.useImperativeHandle(F,()=>m);const L=I(s,o),N=e.useCallback(t=>{const r=t.target.value,a=p(r,o),i=a.isValid()?a.toDate():void 0;D(i),u==null||u(i)},[o,u]),E=e.useCallback(t=>{D(t),(()=>{var r;if(!m)return;const a=(r=Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value"))==null?void 0:r.set;a==null||a.call(m,I(t,o));const i=new Event("input",{bubbles:!0});m.dispatchEvent(i)})()},[o,m]),b={...Y,...A},[R,v]=e.useState(!1),h=e.useRef(null),g=e.useRef(null),_=e.useMemo(()=>H(d),[d]);return e.createElement(V,{css:{position:"relative",height:"max-content"}},e.createElement(G,{name:"date",disabled:f,size:d,...z,onChange:N,ref:S,defaultValue:L}),e.createElement(c,{modal:!0,open:R,onOpenChange:v},e.createElement(c.Trigger,{asChild:!0},e.createElement(U,{css:{position:"absolute",top:"50%",transform:"translateY(-50%)",right:"0"},disabled:f,label:b.open,size:_,theme:"neutral",hasTooltip:!1},e.createElement(j,{is:B}))),e.createElement(c.Portal,null,e.createElement(c.Content,{css:{pr:"$sizes$2",zIndex:P},side:"bottom",align:"end",showCloseButton:!1,onOpenAutoFocus:t=>{var r,a;t.preventDefault(),s?(r=g.current)==null||r.focus():(a=h.current)==null||a.focus()}},e.createElement(W,{date:s||new Date,selected:s,onDateSelected:async t=>{v(!1),await E(t.date),l&&l()},setYear:async t=>{await E(t),l&&l()},minDate:O,maxDate:x,refDateToday:h,refDateSelected:g,firstDayOfWeek:y,monthNames:T,weekdayNames:k,labels:b})))))});w.displayName="DateInput";export{w as DateInput};
 //# sourceMappingURL=DateInput.js.map

package/dist/components/date-input/DateInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateInput.js","sources":["../../../src/components/date-input/DateInput.tsx"],"sourcesContent":["import { CalendarEvent } from '@atom-learning/icons'\nimport dayjs from 'dayjs'\nimport customParseFormat from 'dayjs/plugin/customParseFormat'\nimport type { Props as DayzedInterface } from 'dayzed'\nimport * as React from 'react'\n\nimport { DIALOG_Z_INDEX } from '~/constants/zIndices'\nimport { getFieldIconSize } from '~/utilities'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Box } from '../box/Box'\nimport { Calendar, CalendarTranslationProps } from '../calendar/Calendar'\nimport { DEFAULT_LABELS } from '../calendar/constants'\nimport { Icon } from '../icon/Icon'\nimport { Input } from '../input/Input'\nimport { Popover } from '../popover/Popover'\nimport { DEFAULT_DATE_FORMAT } from './constants'\ndayjs.extend(customParseFormat)\n\nexport type DateInputProps = Omit<DayzedInterface, 'onDateSelected'> &\n  CalendarTranslationProps & {\n    initialDate?: Date\n    dateFormat?: string\n    disabled?: boolean\n    size?: 'sm' | 'md' | 'lg'\n    revalidate?: () => Promise<boolean>\n    onChange?: (value?: Date) => void\n  }\n\nconst formatDateToString = (date?: Date, dateFormat = DEFAULT_DATE_FORMAT) =>\n  date ? dayjs(date).format(dateFormat) : ''\n\nexport const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(\n  (\n    {\n      initialDate,\n      dateFormat = DEFAULT_DATE_FORMAT,\n      firstDayOfWeek = 1,\n      disabled,\n      monthNames,\n      weekdayNames,\n      size = 'md',\n      labels,\n      revalidate,\n      onChange,\n      minDate,\n      maxDate,\n      ...remainingProps\n    },\n    ref\n  ) => {\n    const [date, setDate] = React.useState(\n      initialDate ? dayjs(initialDate).toDate() : undefined\n    )\n\n    const [inputElRef, setInputElRef] = useCallbackRefState()\n    React.useImperativeHandle(ref, () => inputElRef as HTMLInputElement)\n\n    const dateString = formatDateToString(date, dateFormat)\n\n    const handleInputChange = React.useCallback(\n      (event) => {\n        const newDateString = event.target.value\n        const parsedInputDate = dayjs(newDateString, dateFormat)\n        const newDate = parsedInputDate.isValid()\n          ? parsedInputDate.toDate()\n          : undefined\n        setDate(newDate)\n        onChange?.(newDate)\n      },\n      [dateFormat, onChange]\n    )\n\n    const handleCalendarChange = React.useCallback(\n      (newDate) => {\n        setDate(newDate)\n\n        const mirrorChangeToInputElement = () => {\n          if (!inputElRef) return\n\n          // Call the `set` function on the input value directly to mirror the change.\n          // Props to: https://stackoverflow.com/a/46012210\n          const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n            window.HTMLInputElement.prototype,\n            'value'\n          )?.set\n          nativeInputValueSetter?.call(\n            inputElRef,\n            formatDateToString(newDate, dateFormat)\n          )\n          const event = new Event('input', { bubbles: true })\n          inputElRef.dispatchEvent(event)\n        }\n        mirrorChangeToInputElement()\n      },\n      [dateFormat, inputElRef]\n    )\n\n    const updatedLabels = {\n      ...DEFAULT_LABELS,\n      ...labels\n    }\n\n    const [calendarOpen, setCalendarOpen] = React.useState(false)\n\n    const refDateToday = React.useRef<HTMLButtonElement>(null)\n    const refDateSelected = React.useRef<HTMLButtonElement>(null)\n\n    const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n    return (\n      <Box css={{ position: 'relative', height: 'max-content' }}>\n        <Input\n          name=\"date\"\n          disabled={disabled}\n          size={size}\n          {...remainingProps}\n          onChange={handleInputChange}\n          ref={setInputElRef}\n          defaultValue={dateString}\n        />\n        <Popover modal open={calendarOpen} onOpenChange={setCalendarOpen}>\n          <Popover.Trigger asChild>\n            <ActionIcon\n              css={{\n                position: 'absolute',\n                top: '50%',\n                transform: 'translateY(-50%)',\n                right: '0'\n              }}\n              disabled={disabled}\n              label={updatedLabels.open}\n              size={iconSize}\n              theme=\"neutral\"\n              hasTooltip={false}\n            >\n              <Icon is={CalendarEvent} />\n            </ActionIcon>\n          </Popover.Trigger>\n          <Popover.Portal>\n            <Popover.Content\n              css={{ pr: '$sizes$2', zIndex: DIALOG_Z_INDEX }}\n              side=\"bottom\"\n              align=\"end\"\n              showCloseButton={false}\n              onOpenAutoFocus={(e) => {\n                e.preventDefault()\n                if (date) {\n                  refDateSelected.current?.focus()\n                } else {\n                  refDateToday.current?.focus()\n                }\n              }}\n            >\n              <Calendar\n                date={date || new Date()}\n                selected={date}\n                onDateSelected={async (date) => {\n                  setCalendarOpen(false)\n                  await handleCalendarChange(date.date)\n                  if (revalidate) revalidate()\n                }}\n                setYear={async (date) => {\n                  await handleCalendarChange(date)\n                  if (revalidate) revalidate()\n                }}\n                minDate={minDate}\n                maxDate={maxDate}\n                refDateToday={refDateToday}\n                refDateSelected={refDateSelected}\n                firstDayOfWeek={firstDayOfWeek}\n                monthNames={monthNames}\n                weekdayNames={weekdayNames}\n                labels={updatedLabels}\n              />\n            </Popover.Content>\n          </Popover.Portal>\n        </Popover>\n      </Box>\n    )\n  }\n)\n\nDateInput.displayName = 'DateInput'\n"],"names":["dayjs","customParseFormat","formatDateToString","date","dateFormat","DEFAULT_DATE_FORMAT","DateInput","React","initialDate","firstDayOfWeek","disabled","monthNames","weekdayNames","size","labels","revalidate","onChange","minDate","maxDate","remainingProps","ref","setDate","inputElRef","setInputElRef","useCallbackRefState","dateString","handleInputChange","event","newDateString","parsedInputDate","newDate","handleCalendarChange","_a","nativeInputValueSetter","updatedLabels","DEFAULT_LABELS","calendarOpen","setCalendarOpen","refDateToday","refDateSelected","iconSize","getFieldIconSize","Box","Input","Popover","ActionIcon","Icon","CalendarEvent","DIALOG_Z_INDEX","e","_b","Calendar"],"mappings":"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"}
+{"version":3,"file":"DateInput.js","sources":["../../../src/components/date-input/DateInput.tsx"],"sourcesContent":["import { CalendarEvent } from '@atom-learning/icons'\nimport dayjs from 'dayjs'\nimport customParseFormat from 'dayjs/plugin/customParseFormat'\nimport type { Props as DayzedInterface } from 'dayzed'\nimport * as React from 'react'\n\nimport { DIALOG_Z_INDEX } from '~/constants/zIndices'\nimport { getFieldIconSize } from '~/utilities'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Box } from '../box/Box'\nimport { Calendar, CalendarTranslationProps } from '../calendar/Calendar'\nimport { DEFAULT_LABELS } from '../calendar/constants'\nimport { Icon } from '../icon/Icon'\nimport { Input } from '../input/Input'\nimport { Popover } from '../popover/Popover'\nimport { DEFAULT_DATE_FORMAT } from './constants'\ndayjs.extend(customParseFormat)\n\nexport type DateInputProps = Omit<DayzedInterface, 'onDateSelected'> &\n  CalendarTranslationProps & {\n    initialDate?: Date\n    dateFormat?: string\n    disabled?: boolean\n    size?: 'sm' | 'md' | 'lg'\n    revalidate?: () => Promise<boolean>\n    onChange?: (value?: Date) => void\n  }\n\nconst formatDateToString = (date?: Date, dateFormat = DEFAULT_DATE_FORMAT) =>\n  date ? dayjs(date).format(dateFormat) : ''\n\nexport const DateInput: React.ForwardRefExoticComponent<DateInputProps> =\n  React.forwardRef(\n    (\n      {\n        initialDate,\n        dateFormat = DEFAULT_DATE_FORMAT,\n        firstDayOfWeek = 1,\n        disabled,\n        monthNames,\n        weekdayNames,\n        size = 'md',\n        labels,\n        revalidate,\n        onChange,\n        minDate,\n        maxDate,\n        ...remainingProps\n      },\n      ref\n    ) => {\n      const [date, setDate] = React.useState(\n        initialDate ? dayjs(initialDate).toDate() : undefined\n      )\n\n      const [inputElRef, setInputElRef] = useCallbackRefState()\n      React.useImperativeHandle(ref, () => inputElRef as HTMLInputElement)\n\n      const dateString = formatDateToString(date, dateFormat)\n\n      const handleInputChange = React.useCallback(\n        (event) => {\n          const newDateString = event.target.value\n          const parsedInputDate = dayjs(newDateString, dateFormat)\n          const newDate = parsedInputDate.isValid()\n            ? parsedInputDate.toDate()\n            : undefined\n          setDate(newDate)\n          onChange?.(newDate)\n        },\n        [dateFormat, onChange]\n      )\n\n      const handleCalendarChange = React.useCallback(\n        (newDate) => {\n          setDate(newDate)\n\n          const mirrorChangeToInputElement = () => {\n            if (!inputElRef) return\n\n            // Call the `set` function on the input value directly to mirror the change.\n            // Props to: https://stackoverflow.com/a/46012210\n            const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n              window.HTMLInputElement.prototype,\n              'value'\n            )?.set\n            nativeInputValueSetter?.call(\n              inputElRef,\n              formatDateToString(newDate, dateFormat)\n            )\n            const event = new Event('input', { bubbles: true })\n            inputElRef.dispatchEvent(event)\n          }\n          mirrorChangeToInputElement()\n        },\n        [dateFormat, inputElRef]\n      )\n\n      const updatedLabels = {\n        ...DEFAULT_LABELS,\n        ...labels\n      }\n\n      const [calendarOpen, setCalendarOpen] = React.useState(false)\n\n      const refDateToday = React.useRef<HTMLButtonElement>(null)\n      const refDateSelected = React.useRef<HTMLButtonElement>(null)\n\n      const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n      return (\n        <Box css={{ position: 'relative', height: 'max-content' }}>\n          <Input\n            name=\"date\"\n            disabled={disabled}\n            size={size}\n            {...remainingProps}\n            onChange={handleInputChange}\n            ref={setInputElRef}\n            defaultValue={dateString}\n          />\n          <Popover modal open={calendarOpen} onOpenChange={setCalendarOpen}>\n            <Popover.Trigger asChild>\n              <ActionIcon\n                css={{\n                  position: 'absolute',\n                  top: '50%',\n                  transform: 'translateY(-50%)',\n                  right: '0'\n                }}\n                disabled={disabled}\n                label={updatedLabels.open}\n                size={iconSize}\n                theme=\"neutral\"\n                hasTooltip={false}\n              >\n                <Icon is={CalendarEvent} />\n              </ActionIcon>\n            </Popover.Trigger>\n            <Popover.Portal>\n              <Popover.Content\n                css={{ pr: '$sizes$2', zIndex: DIALOG_Z_INDEX }}\n                side=\"bottom\"\n                align=\"end\"\n                showCloseButton={false}\n                onOpenAutoFocus={(e) => {\n                  e.preventDefault()\n                  if (date) {\n                    refDateSelected.current?.focus()\n                  } else {\n                    refDateToday.current?.focus()\n                  }\n                }}\n              >\n                <Calendar\n                  date={date || new Date()}\n                  selected={date}\n                  onDateSelected={async (date) => {\n                    setCalendarOpen(false)\n                    await handleCalendarChange(date.date)\n                    if (revalidate) revalidate()\n                  }}\n                  setYear={async (date) => {\n                    await handleCalendarChange(date)\n                    if (revalidate) revalidate()\n                  }}\n                  minDate={minDate}\n                  maxDate={maxDate}\n                  refDateToday={refDateToday}\n                  refDateSelected={refDateSelected}\n                  firstDayOfWeek={firstDayOfWeek}\n                  monthNames={monthNames}\n                  weekdayNames={weekdayNames}\n                  labels={updatedLabels}\n                />\n              </Popover.Content>\n            </Popover.Portal>\n          </Popover>\n        </Box>\n      )\n    }\n  )\n\nDateInput.displayName = 'DateInput'\n"],"names":["dayjs","customParseFormat","formatDateToString","date","dateFormat","DEFAULT_DATE_FORMAT","DateInput","React","initialDate","firstDayOfWeek","disabled","monthNames","weekdayNames","size","labels","revalidate","onChange","minDate","maxDate","remainingProps","ref","setDate","inputElRef","setInputElRef","useCallbackRefState","dateString","handleInputChange","event","newDateString","parsedInputDate","newDate","handleCalendarChange","_a","nativeInputValueSetter","updatedLabels","DEFAULT_LABELS","calendarOpen","setCalendarOpen","refDateToday","refDateSelected","iconSize","getFieldIconSize","Box","Input","Popover","ActionIcon","Icon","CalendarEvent","DIALOG_Z_INDEX","e","_b","Calendar"],"mappings":"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"}