@atom-learning/components 6.2.1 → 6.3.1

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableHead.js","sources":["../../../src/components/data-table/DataTableHead.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { Table } from '../table'\nimport { DataTableSelectAllRowsCheckbox } from './DataTableSelectAllRowsCheckbox'\nimport { DataTable, useDataTable } from './index'\n\ntype DataTableHeadProps = Omit<\n  React.ComponentProps<typeof Table.Header>,\n  'children'\n> & {\n  sortable?: boolean\n  isSticky?: boolean\n  stickyOffset?: number\n  showTotalInFirstColumn?: boolean\n  totalSuffix?: string\n}\n\nexport const DataTableHead = ({\n  sortable = true,\n  theme = 'light',\n  isSticky = false,\n  stickyOffset = 0,\n  showTotalInFirstColumn,\n  totalSuffix,\n  style,\n  className,\n  ...props\n}: DataTableHeadProps): React.ReactElement => {\n  const {\n    getHeaderGroups,\n    setIsSortable,\n    enableRowSelection,\n    getCanSomeRowsExpand,\n    tablePosition,\n    setTablePosition\n  } = useDataTable()\n\n  React.useEffect(() => {\n    setIsSortable(sortable)\n  }, [sortable, setIsSortable])\n\n  const tableHeaderRowRef = React.useRef<HTMLTableRowElement>(null)\n  const tableRef = React.useRef<HTMLTableElement | null>(null)\n  const headerOffsetRef = React.useRef(0)\n\n  const [headerOffset, setHeaderOffset] = React.useState<number>(0)\n  const [headerHide, setHeaderHide] = React.useState<boolean>(false)\n\n  const tableHeadElement = tableHeaderRowRef?.current?.closest('thead')\n\n  if (tableHeadElement && tablePosition?.offsetTop === null) {\n    const tableHeadHeight = tableHeadElement.getBoundingClientRect().height\n    const intersectionOffset = stickyOffset + tableHeadHeight\n    if (tablePosition) {\n      setTablePosition({ ...tablePosition, offsetTop: intersectionOffset || 0 })\n    }\n  }\n\n  React.useEffect(() => {\n    if (!isSticky) return\n\n    if (!tableRef.current && tableHeaderRowRef.current) {\n      tableRef.current = tableHeaderRowRef.current.closest(\n        'table'\n      ) as HTMLTableElement | null\n    }\n\n    if (tableRef.current) {\n      if (tablePosition?.top !== null && tablePosition?.bottom !== null) {\n        const newOffset =\n          tablePosition?.top != null &&\n          tablePosition?.bottom != null &&\n          tablePosition.top < stickyOffset &&\n          tablePosition.bottom > 100\n            ? -tablePosition.top + stickyOffset\n            : 0\n\n        if (newOffset !== 0) setHeaderHide(true)\n\n        headerOffsetRef.current = newOffset\n        setHeaderOffset(newOffset)\n\n        requestAnimationFrame(() => {\n          setHeaderHide(false)\n        })\n      }\n    }\n  }, [isSticky, stickyOffset, tablePosition])\n\n  return (\n    <Table.Header\n      theme={theme}\n      style={{\n        ...style,\n        '--header-offset': `${headerOffset}px`\n      }}\n      {...props}\n      className={clsx(\n        'relative',\n        'z-3',\n        '[&_tr:not(:last-child)>th]:border-b-none',\n        '[&_tr:not(:first-child)>th]:rounded-none!',\n        className\n      )}\n    >\n      {getHeaderGroups().map((headerGroup) => {\n        return (\n          <Table.Row\n            key={headerGroup.id}\n            ref={tableHeaderRowRef}\n            className={\n              isSticky && headerOffset !== 0\n                ? clsx(\n                    'translate-y-(--header-offset)',\n                    headerHide\n                      ? 'delay-0ms opacity-0 transition-none'\n                      : 'delay-150ms opacity-100 transition-opacity duration-100',\n                    '[&_th]:last:before:absolute',\n                    '[&_th]:last:before:bottom-0',\n                    '[&_th]:last:before:pointer-events-none',\n                    '[&_th]:last:before:right-0',\n                    '[&_th]:last:before:shadow-sm',\n                    '[&_th]:last:before:top-0',\n                    '[&_th]:last:before:w-full'\n                  )\n                : undefined\n            }\n          >\n            {getCanSomeRowsExpand() && <Table.HeaderCell className=\"w-10\" />}\n            {enableRowSelection && (\n              <Table.HeaderCell className=\"w-10\">\n                <DataTableSelectAllRowsCheckbox />\n              </Table.HeaderCell>\n            )}\n            {headerGroup.headers.map((header, index) => (\n              <DataTable.HeaderCell\n                header={header}\n                key={header.id}\n                includeTotal={index === 0 && showTotalInFirstColumn}\n                totalSuffix={totalSuffix}\n              />\n            ))}\n          </Table.Row>\n        )\n      })}\n    </Table.Header>\n  )\n}\n"],"names":["DataTableHead","sortable","theme","isSticky","stickyOffset","showTotalInFirstColumn","totalSuffix","style","className","props","_a","getHeaderGroups","setIsSortable","enableRowSelection","getCanSomeRowsExpand","tablePosition","setTablePosition","useDataTable","React","tableHeaderRowRef","tableRef","headerOffsetRef","headerOffset","setHeaderOffset","headerHide","setHeaderHide","tableHeadElement","tableHeadHeight","intersectionOffset","newOffset","Table","clsx","headerGroup","DataTableSelectAllRowsCheckbox","header","index","DataTable"],"mappings":"2QAkBa,MAAAA,EAAgB,CAAC,CAC5B,SAAAC,EAAW,GACX,MAAAC,EAAQ,QACR,SAAAC,EAAW,GACX,aAAAC,EAAe,EACf,uBAAAC,EACA,YAAAC,EACA,MAAAC,EACA,UAAAC,EACA,GAAGC,CACL,IAA8C,CA5B9C,IAAAC,EA6BE,KAAM,CACJ,gBAAAC,EACA,cAAAC,EACA,mBAAAC,EACA,qBAAAC,EACA,cAAAC,EACA,iBAAAC,CACF,EAAIC,EAAa,EAEjBC,EAAM,UAAU,IAAM,CACpBN,EAAcX,CAAQ,CACxB,EAAG,CAACA,EAAUW,CAAa,CAAC,EAE5B,MAAMO,EAAoBD,EAAM,OAA4B,IAAI,EAC1DE,EAAWF,EAAM,OAAgC,IAAI,EACrDG,EAAkBH,EAAM,OAAO,CAAC,EAEhC,CAACI,EAAcC,CAAe,EAAIL,EAAM,SAAiB,CAAC,EAC1D,CAACM,EAAYC,CAAa,EAAIP,EAAM,SAAkB,EAAK,EAE3DQ,GAAmBhB,EAAAS,GAAA,KAAA,OAAAA,EAAmB,UAAnB,YAAAT,EAA4B,QAAQ,SAE7D,GAAIgB,IAAoBX,GAAA,KAAAA,OAAAA,EAAe,aAAc,KAAM,CACzD,MAAMY,EAAkBD,EAAiB,sBAAA,EAAwB,OAC3DE,EAAqBxB,EAAeuB,EACtCZ,GACFC,EAAiB,CAAE,GAAGD,EAAe,UAAWa,GAAsB,CAAE,CAAC,CAE7E,CAEA,OAAAV,EAAM,UAAU,IAAM,CACpB,GAAKf,IAED,CAACiB,EAAS,SAAWD,EAAkB,UACzCC,EAAS,QAAUD,EAAkB,QAAQ,QAC3C,OACF,GAGEC,EAAS,UACPL,GAAA,YAAAA,EAAe,OAAQ,OAAQA,GAAA,YAAAA,EAAe,UAAW,MAAM,CACjE,MAAMc,GACJd,GAAA,YAAAA,EAAe,MAAO,OACtBA,GAAA,KAAA,OAAAA,EAAe,SAAU,MACzBA,EAAc,IAAMX,GACpBW,EAAc,OAAS,IACnB,CAACA,EAAc,IAAMX,EACrB,EAEFyB,IAAc,GAAGJ,EAAc,EAAI,EAEvCJ,EAAgB,QAAUQ,EAC1BN,EAAgBM,CAAS,EAEzB,sBAAsB,IAAM,CAC1BJ,EAAc,EAAK,CACrB,CAAC,CACH,CAEJ,EAAG,CAACtB,EAAUC,EAAcW,CAAa,CAAC,EAGxCG,EAAA,cAACY,EAAM,OAAN,CACC,MAAO5B,EACP,MAAO,CACL,GAAGK,EACH,kBAAmB,GAAGe,CAAY,IACpC,EACC,GAAGb,EACJ,UAAWsB,EACT,WACA,MACA,2CACA,4CACAvB,CACF,CAAA,EAECG,IAAkB,IAAKqB,GAEpBd,EAAA,cAACY,EAAM,IAAN,CACC,IAAKE,EAAY,GACjB,IAAKb,EACL,UACEhB,GAAYmB,IAAiB,EACzBS,EACE,gCACAP,EACI,sCACA,0DACJ,8BACA,8BACA,yCACA,6BACA,+BACA,2BACA,2BACF,EACA,MAAA,EAGLV,EAA0BI,GAAAA,EAAA,cAACY,EAAM,WAAN,CAAiB,UAAU,MAAA,CAAO,EAC7DjB,GACCK,EAAA,cAACY,EAAM,WAAN,CAAiB,UAAU,MAC1BZ,EAAAA,EAAA,cAACe,EAAA,IAA+B,CAClC,EAEDD,EAAY,QAAQ,IAAI,CAACE,EAAQC,IAChCjB,EAAA,cAACkB,EAAU,WAAV,CACC,OAAQF,EACR,IAAKA,EAAO,GACZ,aAAcC,IAAU,GAAK9B,EAC7B,YAAaC,CAAAA,CACf,CACD,CACH,CAEH,CACH,CAEJ"}
+{"version":3,"file":"DataTableHead.js","sources":["../../../src/components/data-table/DataTableHead.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { Table } from '../table/Table'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableHeaderCell } from './DataTableHeaderCell'\nimport { DataTableSelectAllRowsCheckbox } from './DataTableSelectAllRowsCheckbox'\n\ntype DataTableHeadProps = Omit<\n  React.ComponentProps<typeof Table.Header>,\n  'children'\n> & {\n  sortable?: boolean\n  isSticky?: boolean\n  stickyOffset?: number\n  showTotalInFirstColumn?: boolean\n  totalSuffix?: string\n}\n\nexport const DataTableHead = ({\n  sortable = true,\n  theme = 'light',\n  isSticky = false,\n  stickyOffset = 0,\n  showTotalInFirstColumn,\n  totalSuffix,\n  style,\n  className,\n  ...props\n}: DataTableHeadProps): React.ReactElement => {\n  const {\n    getHeaderGroups,\n    setIsSortable,\n    enableRowSelection,\n    getCanSomeRowsExpand,\n    tablePosition,\n    setTablePosition\n  } = useDataTable()\n\n  React.useEffect(() => {\n    setIsSortable(sortable)\n  }, [sortable, setIsSortable])\n\n  const tableHeaderRowRef = React.useRef<HTMLTableRowElement>(null)\n  const tableRef = React.useRef<HTMLTableElement | null>(null)\n  const headerOffsetRef = React.useRef(0)\n\n  const [headerOffset, setHeaderOffset] = React.useState<number>(0)\n  const [headerHide, setHeaderHide] = React.useState<boolean>(false)\n\n  const tableHeadElement = tableHeaderRowRef?.current?.closest('thead')\n\n  if (tableHeadElement && tablePosition?.offsetTop === null) {\n    const tableHeadHeight = tableHeadElement.getBoundingClientRect().height\n    const intersectionOffset = stickyOffset + tableHeadHeight\n    if (tablePosition) {\n      setTablePosition({ ...tablePosition, offsetTop: intersectionOffset || 0 })\n    }\n  }\n\n  React.useEffect(() => {\n    if (!isSticky) return\n\n    if (!tableRef.current && tableHeaderRowRef.current) {\n      tableRef.current = tableHeaderRowRef.current.closest(\n        'table'\n      ) as HTMLTableElement | null\n    }\n\n    if (tableRef.current) {\n      if (tablePosition?.top !== null && tablePosition?.bottom !== null) {\n        const newOffset =\n          tablePosition?.top != null &&\n          tablePosition?.bottom != null &&\n          tablePosition.top < stickyOffset &&\n          tablePosition.bottom > 100\n            ? -tablePosition.top + stickyOffset\n            : 0\n\n        if (newOffset !== 0) setHeaderHide(true)\n\n        headerOffsetRef.current = newOffset\n        setHeaderOffset(newOffset)\n\n        requestAnimationFrame(() => {\n          setHeaderHide(false)\n        })\n      }\n    }\n  }, [isSticky, stickyOffset, tablePosition])\n\n  return (\n    <Table.Header\n      theme={theme}\n      style={{\n        ...style,\n        '--header-offset': `${headerOffset}px`\n      }}\n      {...props}\n      className={clsx(\n        'relative',\n        'z-3',\n        '[&_tr:not(:last-child)>th]:border-b-none',\n        '[&_tr:not(:first-child)>th]:rounded-none!',\n        className\n      )}\n    >\n      {getHeaderGroups().map((headerGroup) => {\n        return (\n          <Table.Row\n            key={headerGroup.id}\n            ref={tableHeaderRowRef}\n            className={\n              isSticky && headerOffset !== 0\n                ? clsx(\n                    'translate-y-(--header-offset)',\n                    headerHide\n                      ? 'delay-0ms opacity-0 transition-none'\n                      : 'delay-150ms opacity-100 transition-opacity duration-100',\n                    '[&_th]:last:before:absolute',\n                    '[&_th]:last:before:bottom-0',\n                    '[&_th]:last:before:pointer-events-none',\n                    '[&_th]:last:before:right-0',\n                    '[&_th]:last:before:shadow-sm',\n                    '[&_th]:last:before:top-0',\n                    '[&_th]:last:before:w-full'\n                  )\n                : undefined\n            }\n          >\n            {getCanSomeRowsExpand() && <Table.HeaderCell className=\"w-10\" />}\n            {enableRowSelection && (\n              <Table.HeaderCell className=\"w-10\">\n                <DataTableSelectAllRowsCheckbox />\n              </Table.HeaderCell>\n            )}\n            {headerGroup.headers.map((header, index) => (\n              <DataTableHeaderCell\n                header={header}\n                key={header.id}\n                includeTotal={index === 0 && showTotalInFirstColumn}\n                totalSuffix={totalSuffix}\n              />\n            ))}\n          </Table.Row>\n        )\n      })}\n    </Table.Header>\n  )\n}\n"],"names":["DataTableHead","sortable","theme","isSticky","stickyOffset","showTotalInFirstColumn","totalSuffix","style","className","props","_a","getHeaderGroups","setIsSortable","enableRowSelection","getCanSomeRowsExpand","tablePosition","setTablePosition","useDataTable","React","tableHeaderRowRef","tableRef","headerOffsetRef","headerOffset","setHeaderOffset","headerHide","setHeaderHide","tableHeadElement","tableHeadHeight","intersectionOffset","newOffset","Table","clsx","headerGroup","DataTableSelectAllRowsCheckbox","header","index","DataTableHeaderCell"],"mappings":"qSAmBaA,EAAgB,CAAC,CAC5B,SAAAC,EAAW,GACX,MAAAC,EAAQ,QACR,SAAAC,EAAW,GACX,aAAAC,EAAe,EACf,uBAAAC,EACA,YAAAC,EACA,MAAAC,EACA,UAAAC,EACA,GAAGC,CACL,IAA8C,CA7B9C,IAAAC,EA8BE,KAAM,CACJ,gBAAAC,EACA,cAAAC,EACA,mBAAAC,EACA,qBAAAC,EACA,cAAAC,EACA,iBAAAC,CACF,EAAIC,IAEJC,EAAM,UAAU,IAAM,CACpBN,EAAcX,CAAQ,CACxB,EAAG,CAACA,EAAUW,CAAa,CAAC,EAE5B,MAAMO,EAAoBD,EAAM,OAA4B,IAAI,EAC1DE,EAAWF,EAAM,OAAgC,IAAI,EACrDG,EAAkBH,EAAM,OAAO,CAAC,EAEhC,CAACI,EAAcC,CAAe,EAAIL,EAAM,SAAiB,CAAC,EAC1D,CAACM,EAAYC,CAAa,EAAIP,EAAM,SAAkB,EAAK,EAE3DQ,GAAmBhB,EAAAS,GAAA,KAAAA,OAAAA,EAAmB,UAAnB,KAAAT,OAAAA,EAA4B,QAAQ,OAE7D,EAAA,GAAIgB,IAAoBX,GAAA,KAAA,OAAAA,EAAe,aAAc,KAAM,CACzD,MAAMY,EAAkBD,EAAiB,wBAAwB,OAC3DE,EAAqBxB,EAAeuB,EACtCZ,GACFC,EAAiB,CAAE,GAAGD,EAAe,UAAWa,GAAsB,CAAE,CAAC,CAE7E,CAEA,OAAAV,EAAM,UAAU,IAAM,CACpB,GAAKf,IAED,CAACiB,EAAS,SAAWD,EAAkB,UACzCC,EAAS,QAAUD,EAAkB,QAAQ,QAC3C,OACF,GAGEC,EAAS,UACPL,GAAA,KAAAA,OAAAA,EAAe,OAAQ,OAAQA,GAAA,KAAAA,OAAAA,EAAe,UAAW,MAAM,CACjE,MAAMc,GACJd,GAAA,KAAAA,OAAAA,EAAe,MAAO,OACtBA,GAAA,KAAAA,OAAAA,EAAe,SAAU,MACzBA,EAAc,IAAMX,GACpBW,EAAc,OAAS,IACnB,CAACA,EAAc,IAAMX,EACrB,EAEFyB,IAAc,GAAGJ,EAAc,EAAI,EAEvCJ,EAAgB,QAAUQ,EAC1BN,EAAgBM,CAAS,EAEzB,sBAAsB,IAAM,CAC1BJ,EAAc,EAAK,CACrB,CAAC,CACH,CAEJ,EAAG,CAACtB,EAAUC,EAAcW,CAAa,CAAC,EAGxCG,EAAA,cAACY,EAAM,OAAN,CACC,MAAO5B,EACP,MAAO,CACL,GAAGK,EACH,kBAAmB,GAAGe,CAAY,IACpC,EACC,GAAGb,EACJ,UAAWsB,EACT,WACA,MACA,2CACA,4CACAvB,CACF,GAECG,EAAgB,EAAE,IAAKqB,GAEpBd,EAAA,cAACY,EAAM,IAAN,CACC,IAAKE,EAAY,GACjB,IAAKb,EACL,UACEhB,GAAYmB,IAAiB,EACzBS,EACE,gCACAP,EACI,sCACA,0DACJ,8BACA,8BACA,yCACA,6BACA,+BACA,2BACA,2BACF,EACA,QAGLV,KAA0BI,EAAA,cAACY,EAAM,WAAN,CAAiB,UAAU,MAAO,CAAA,EAC7DjB,GACCK,EAAA,cAACY,EAAM,WAAN,CAAiB,UAAU,MAAA,EAC1BZ,EAAA,cAACe,EAAA,IAA+B,CAClC,EAEDD,EAAY,QAAQ,IAAI,CAACE,EAAQC,IAChCjB,EAAA,cAACkB,EAAA,CACC,OAAQF,EACR,IAAKA,EAAO,GACZ,aAAcC,IAAU,GAAK9B,EAC7B,YAAaC,CAAAA,CACf,CACD,CACH,CAEH,CACH,CAEJ"}

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

@@ -1,6 +1,6 @@
 import type { Header } from '@tanstack/react-table';
 import * as React from 'react';
-import { Table } from '../table';
+import { Table } from '../table/Table';
 type DataTableHeaderProps = React.ComponentProps<typeof Table.HeaderCell> & {
     header: Header<Record<string, unknown>, unknown>;
     includeTotal?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableHeaderCell.js","sources":["../../../src/components/data-table/DataTableHeaderCell.tsx"],"sourcesContent":["import { ArrowDown, ArrowUp } from '@atom-learning/icons'\nimport type { Header } from '@tanstack/react-table'\nimport { flexRender } from '@tanstack/react-table'\nimport clsx from 'clsx'\nimport * as React from 'react'\nimport { useHover } from 'react-aria'\n\nimport { styled } from '~/styled'\n\nimport { Flex } from '../flex'\nimport { Icon } from '../icon'\nimport { Table } from '../table'\nimport { Text } from '../text'\nimport { useDataTable } from './DataTableContext'\n\ntype DataTableHeaderProps = React.ComponentProps<typeof Table.HeaderCell> & {\n  header: Header<Record<string, unknown>, unknown>\n  includeTotal?: boolean\n  totalSuffix?: string\n}\n\nconst StyledCount = styled(Text, {\n  base: ['text-grey-600', 'whitespace-nowrap', 'hidden', 'min-[800px]:block']\n})\n\nconst StyledTableHeaderCell = styled(Table.HeaderCell, {\n  base: [],\n  variants: {\n    isSortable: {\n      true: [\n        '*:relative',\n        'before:absolute',\n        'before:bg-primary-100',\n        'before:duration-200',\n        'before:ease-in',\n        'before:inset-0',\n        'before:opacity-0',\n        'before:transition-opacity',\n        'cursor-pointer',\n        'hover:before:opacity-50',\n        'relative'\n      ]\n    }\n  }\n})\n\nconst sortIcons = {\n  asc: ArrowUp,\n  desc: ArrowDown\n}\n\nconst SortIcon = ({ direction }: { direction: 'asc' | 'desc' }) => (\n  <Icon\n    is={sortIcons[direction]}\n    size=\"sm\"\n    className=\"stroke-primary-900 absolute left-1\"\n  />\n)\n\nexport const DataTableHeaderCell = ({\n  header,\n  includeTotal = false,\n  totalSuffix = 'items',\n  children,\n  className,\n  ...props\n}: DataTableHeaderProps) => {\n  const sortDirection = header.column.getIsSorted()\n  const { isSortable: isSortableTable, getRowModel } = useDataTable()\n  // false for display columns, e.g. \"Actions\"\n  const isDataColumn = header.column.getCanSort()\n\n  const totalRows = getRowModel()?.rows?.length\n\n  const { hoverProps, isHovered } = useHover({})\n\n  const handleKeyDown = (\n    event: React.KeyboardEvent<HTMLTableCellElement>,\n    callback: (event: unknown) => void | undefined\n  ) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault()\n      callback(event as unknown)\n    }\n  }\n\n  const headerSortingHandler = header.column.getToggleSortingHandler()\n\n  return (\n    <StyledTableHeaderCell\n      isSortable={isSortableTable && isDataColumn}\n      colSpan={header.colSpan}\n      onClick={\n        isSortableTable && isDataColumn && headerSortingHandler\n          ? headerSortingHandler\n          : undefined\n      }\n      onKeyDown={(event) =>\n        isSortableTable &&\n        isDataColumn &&\n        headerSortingHandler &&\n        handleKeyDown(event, headerSortingHandler)\n      }\n      tabIndex={isSortableTable && isDataColumn ? 0 : -1}\n      {...hoverProps}\n      className={className}\n      {...props}\n    >\n      <Flex\n        align=\"center\"\n        gap={1}\n        justify={header.colSpan > 1 ? 'center' : 'flex-start'}\n      >\n        {flexRender(header.column.columnDef.header, header.getContext())}\n        {sortDirection && isSortableTable && (\n          <Flex\n            align=\"center\"\n            className={clsx(\n              'relative',\n              'size-6',\n              'ml-2',\n              isHovered ? 'bg-primary-200' : 'bg-primary-100',\n              'rounded-sm'\n            )}\n          >\n            <SortIcon direction={sortDirection} />\n          </Flex>\n        )}\n        {includeTotal && (\n          <StyledCount size=\"sm\" weight=\"normal\">\n            ({totalRows} {totalSuffix})\n          </StyledCount>\n        )}\n      </Flex>\n    </StyledTableHeaderCell>\n  )\n}\n"],"names":["StyledCount","styled","Text","StyledTableHeaderCell","Table","sortIcons","ArrowUp","ArrowDown","SortIcon","direction","React","Icon","DataTableHeaderCell","header","includeTotal","totalSuffix","children","className","props","_a","_b","sortDirection","isSortableTable","getRowModel","useDataTable","isDataColumn","totalRows","hoverProps","isHovered","useHover","handleKeyDown","event","callback","headerSortingHandler","Flex","flexRender","clsx"],"mappings":"gcAqBA,MAAMA,EAAcC,EAAOC,EAAM,CAC/B,KAAM,CAAC,gBAAiB,oBAAqB,SAAU,mBAAmB,CAC5E,CAAC,EAEKC,EAAwBF,EAAOG,EAAM,WAAY,CACrD,KAAM,CACN,EAAA,SAAU,CACR,WAAY,CACV,KAAM,CACJ,aACA,kBACA,wBACA,sBACA,iBACA,iBACA,mBACA,4BACA,iBACA,0BACA,UACF,CACF,CACF,CACF,CAAC,EAEKC,EAAY,CAChB,IAAKC,EACL,KAAMC,CACR,EAEMC,EAAW,CAAC,CAAE,UAAAC,CAAU,IAC5BC,EAAA,cAACC,EAAA,CACC,GAAIN,EAAUI,CAAS,EACvB,KAAK,KACL,UAAU,oCAAA,CACZ,EAGWG,EAAsB,CAAC,CAClC,OAAAC,EACA,aAAAC,EAAe,GACf,YAAAC,EAAc,QACd,SAAAC,EACA,UAAAC,EACA,GAAGC,CACL,IAA4B,CAlE5B,IAAAC,EAAAC,EAmEE,MAAMC,EAAgBR,EAAO,OAAO,YAAY,EAC1C,CAAE,WAAYS,EAAiB,YAAAC,CAAY,EAAIC,EAAa,EAE5DC,EAAeZ,EAAO,OAAO,WAAA,EAE7Ba,GAAYN,GAAAD,EAAAI,EAAAA,IAAA,KAAA,OAAAJ,EAAe,OAAf,KAAA,OAAAC,EAAqB,OAEjC,CAAE,WAAAO,EAAY,UAAAC,CAAU,EAAIC,EAAS,CAAA,CAAE,EAEvCC,EAAgB,CACpBC,EACAC,IACG,EACCD,EAAM,MAAQ,SAAWA,EAAM,MAAQ,OACzCA,EAAM,eAAe,EACrBC,EAASD,CAAgB,EAE7B,EAEME,EAAuBpB,EAAO,OAAO,wBAAwB,EAEnE,OACEH,EAAA,cAACP,EAAA,CACC,WAAYmB,GAAmBG,EAC/B,QAASZ,EAAO,QAChB,QACES,GAAmBG,GAAgBQ,EAC/BA,EACA,OAEN,UAAYF,GACVT,GACAG,GACAQ,GACAH,EAAcC,EAAOE,CAAoB,EAE3C,SAAUX,GAAmBG,EAAe,EAAI,GAC/C,GAAGE,EACJ,UAAWV,EACV,GAAGC,CAEJR,EAAAA,EAAA,cAACwB,EAAA,CACC,MAAM,SACN,IAAK,EACL,QAASrB,EAAO,QAAU,EAAI,SAAW,YAExCsB,EAAAA,EAAWtB,EAAO,OAAO,UAAU,OAAQA,EAAO,YAAY,EAC9DQ,GAAiBC,GAChBZ,EAAA,cAACwB,EAAA,CACC,MAAM,SACN,UAAWE,EACT,WACA,SACA,OACAR,EAAY,iBAAmB,iBAC/B,YACF,CAEAlB,EAAAA,EAAA,cAACF,EAAA,CAAS,UAAWa,CAAAA,CAAe,CACtC,EAEDP,GACCJ,EAAA,cAACV,EAAA,CAAY,KAAK,KAAK,OAAO,QAAS,EAAA,IACnC0B,EAAU,IAAEX,EAAY,GAC5B,CAEJ,CACF,CAEJ"}
+{"version":3,"file":"DataTableHeaderCell.js","sources":["../../../src/components/data-table/DataTableHeaderCell.tsx"],"sourcesContent":["import { ArrowDown, ArrowUp } from '@atom-learning/icons'\nimport type { Header } from '@tanstack/react-table'\nimport { flexRender } from '@tanstack/react-table'\nimport clsx from 'clsx'\nimport * as React from 'react'\nimport { useHover } from 'react-aria'\n\nimport { styled } from '~/styled'\n\nimport { Flex } from '../flex/Flex'\nimport { Icon } from '../icon/Icon'\nimport { Table } from '../table/Table'\nimport { Text } from '../text/Text'\nimport { useDataTable } from './DataTableContext'\n\ntype DataTableHeaderProps = React.ComponentProps<typeof Table.HeaderCell> & {\n  header: Header<Record<string, unknown>, unknown>\n  includeTotal?: boolean\n  totalSuffix?: string\n}\n\nconst StyledCount = styled(Text, {\n  base: ['text-grey-600', 'whitespace-nowrap', 'hidden', 'min-[800px]:block']\n})\n\nconst StyledTableHeaderCell = styled(Table.HeaderCell, {\n  base: [],\n  variants: {\n    isSortable: {\n      true: [\n        '*:relative',\n        'before:absolute',\n        'before:bg-primary-100',\n        'before:duration-200',\n        'before:ease-in',\n        'before:inset-0',\n        'before:opacity-0',\n        'before:transition-opacity',\n        'cursor-pointer',\n        'hover:before:opacity-50',\n        'relative'\n      ]\n    }\n  }\n})\n\nconst sortIcons = {\n  asc: ArrowUp,\n  desc: ArrowDown\n}\n\nconst SortIcon = ({ direction }: { direction: 'asc' | 'desc' }) => (\n  <Icon\n    is={sortIcons[direction]}\n    size=\"sm\"\n    className=\"stroke-primary-900 absolute left-1\"\n  />\n)\n\nexport const DataTableHeaderCell = ({\n  header,\n  includeTotal = false,\n  totalSuffix = 'items',\n  children,\n  className,\n  ...props\n}: DataTableHeaderProps) => {\n  const sortDirection = header.column.getIsSorted()\n  const { isSortable: isSortableTable, getRowModel } = useDataTable()\n  // false for display columns, e.g. \"Actions\"\n  const isDataColumn = header.column.getCanSort()\n\n  const totalRows = getRowModel()?.rows?.length\n\n  const { hoverProps, isHovered } = useHover({})\n\n  const handleKeyDown = (\n    event: React.KeyboardEvent<HTMLTableCellElement>,\n    callback: (event: unknown) => void | undefined\n  ) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault()\n      callback(event as unknown)\n    }\n  }\n\n  const headerSortingHandler = header.column.getToggleSortingHandler()\n\n  return (\n    <StyledTableHeaderCell\n      isSortable={isSortableTable && isDataColumn}\n      colSpan={header.colSpan}\n      onClick={\n        isSortableTable && isDataColumn && headerSortingHandler\n          ? headerSortingHandler\n          : undefined\n      }\n      onKeyDown={(event) =>\n        isSortableTable &&\n        isDataColumn &&\n        headerSortingHandler &&\n        handleKeyDown(event, headerSortingHandler)\n      }\n      tabIndex={isSortableTable && isDataColumn ? 0 : -1}\n      {...hoverProps}\n      className={className}\n      {...props}\n    >\n      <Flex\n        align=\"center\"\n        gap={1}\n        justify={header.colSpan > 1 ? 'center' : 'flex-start'}\n      >\n        {flexRender(header.column.columnDef.header, header.getContext())}\n        {sortDirection && isSortableTable && (\n          <Flex\n            align=\"center\"\n            className={clsx(\n              'relative',\n              'size-6',\n              'ml-2',\n              isHovered ? 'bg-primary-200' : 'bg-primary-100',\n              'rounded-sm'\n            )}\n          >\n            <SortIcon direction={sortDirection} />\n          </Flex>\n        )}\n        {includeTotal && (\n          <StyledCount size=\"sm\" weight=\"normal\">\n            ({totalRows} {totalSuffix})\n          </StyledCount>\n        )}\n      </Flex>\n    </StyledTableHeaderCell>\n  )\n}\n"],"names":["StyledCount","styled","Text","StyledTableHeaderCell","Table","sortIcons","ArrowUp","ArrowDown","SortIcon","direction","React","Icon","DataTableHeaderCell","header","includeTotal","totalSuffix","children","className","props","_a","_b","sortDirection","isSortableTable","getRowModel","useDataTable","isDataColumn","totalRows","hoverProps","isHovered","useHover","handleKeyDown","event","callback","headerSortingHandler","Flex","flexRender","clsx"],"mappings":"gcAqBA,MAAMA,EAAcC,EAAOC,EAAM,CAC/B,KAAM,CAAC,gBAAiB,oBAAqB,SAAU,mBAAmB,CAC5E,CAAC,EAEKC,EAAwBF,EAAOG,EAAM,WAAY,CACrD,KAAM,CACN,EAAA,SAAU,CACR,WAAY,CACV,KAAM,CACJ,aACA,kBACA,wBACA,sBACA,iBACA,iBACA,mBACA,4BACA,iBACA,0BACA,UACF,CACF,CACF,CACF,CAAC,EAEKC,EAAY,CAChB,IAAKC,EACL,KAAMC,CACR,EAEMC,EAAW,CAAC,CAAE,UAAAC,CAAU,IAC5BC,EAAA,cAACC,EAAA,CACC,GAAIN,EAAUI,CAAS,EACvB,KAAK,KACL,UAAU,oCAAA,CACZ,EAGWG,EAAsB,CAAC,CAClC,OAAAC,EACA,aAAAC,EAAe,GACf,YAAAC,EAAc,QACd,SAAAC,EACA,UAAAC,EACA,GAAGC,CACL,IAA4B,CAlE5B,IAAAC,EAAAC,EAmEE,MAAMC,EAAgBR,EAAO,OAAO,YAAY,EAC1C,CAAE,WAAYS,EAAiB,YAAAC,CAAY,EAAIC,EAAa,EAE5DC,EAAeZ,EAAO,OAAO,WAAA,EAE7Ba,GAAYN,GAAAD,EAAAI,EAAAA,IAAA,KAAA,OAAAJ,EAAe,OAAf,KAAA,OAAAC,EAAqB,OAEjC,CAAE,WAAAO,EAAY,UAAAC,CAAU,EAAIC,EAAS,CAAA,CAAE,EAEvCC,EAAgB,CACpBC,EACAC,IACG,EACCD,EAAM,MAAQ,SAAWA,EAAM,MAAQ,OACzCA,EAAM,eAAe,EACrBC,EAASD,CAAgB,EAE7B,EAEME,EAAuBpB,EAAO,OAAO,wBAAwB,EAEnE,OACEH,EAAA,cAACP,EAAA,CACC,WAAYmB,GAAmBG,EAC/B,QAASZ,EAAO,QAChB,QACES,GAAmBG,GAAgBQ,EAC/BA,EACA,OAEN,UAAYF,GACVT,GACAG,GACAQ,GACAH,EAAcC,EAAOE,CAAoB,EAE3C,SAAUX,GAAmBG,EAAe,EAAI,GAC/C,GAAGE,EACJ,UAAWV,EACV,GAAGC,CAEJR,EAAAA,EAAA,cAACwB,EAAA,CACC,MAAM,SACN,IAAK,EACL,QAASrB,EAAO,QAAU,EAAI,SAAW,YAExCsB,EAAAA,EAAWtB,EAAO,OAAO,UAAU,OAAQA,EAAO,YAAY,EAC9DQ,GAAiBC,GAChBZ,EAAA,cAACwB,EAAA,CACC,MAAM,SACN,UAAWE,EACT,WACA,SACA,OACAR,EAAY,iBAAmB,iBAC/B,YACF,CAEAlB,EAAAA,EAAA,cAACF,EAAA,CAAS,UAAWa,CAAAA,CAAe,CACtC,EAEDP,GACCJ,EAAA,cAACV,EAAA,CAAY,KAAK,KAAK,OAAO,QAAS,EAAA,IACnC0B,EAAU,IAAEX,EAAY,GAC5B,CAEJ,CACF,CAEJ"}

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

@@ -1,12 +1,12 @@
 import * as React from 'react';
 declare const PendingState: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "direction" | "align" | "wrap" | "justify" | "gap"> & {
-    direction?: ("row" | "row-reverse" | "column" | "column-reverse" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "row" | "row-reverse" | "column" | "column-reverse" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">>) | undefined;
+}, "gap" | "wrap" | "direction" | "align" | "justify"> & {
+    direction?: ("row" | "inherit" | "initial" | "row-reverse" | "column" | "column-reverse" | "revert" | "revert-layer" | "unset" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "row" | "inherit" | "initial" | "row-reverse" | "column" | "column-reverse" | "revert" | "revert-layer" | "unset">>) | undefined;
     wrap?: ("wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse">>) | undefined;
-    justify?: ("end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "left" | "right" | "space-between" | "space-around" | "space-evenly" | "stretch" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "left" | "right" | "space-between" | "space-around" | "space-evenly" | "stretch">>) | undefined;
-    align?: ("end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "stretch" | "self-start" | "self-end" | "baseline" | "first baseline" | "last baseline" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "stretch" | "self-start" | "self-end" | "baseline" | "first baseline" | "last baseline">>) | undefined;
-    gap?: (0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24 | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", 0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24>>) | undefined;
+    justify?: ("end" | "left" | "right" | "start" | "inherit" | "initial" | "center" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | "stretch" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "left" | "right" | "start" | "inherit" | "initial" | "center" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | "stretch">>) | undefined;
+    align?: ("end" | "start" | "inherit" | "baseline" | "initial" | "center" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "flex-start" | "flex-end" | "stretch" | "self-start" | "self-end" | "first baseline" | "last baseline" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "start" | "inherit" | "baseline" | "initial" | "center" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "flex-start" | "flex-end" | "stretch" | "self-start" | "self-end" | "first baseline" | "last baseline">>) | undefined;
+    gap?: (0 | 1 | "0" | "1" | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | 24 | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", 0 | 1 | "0" | "1" | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | 24>>) | undefined;
 } & {
     as?: React.ElementType;
 } & {

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableLoading.js","sources":["../../../src/components/data-table/DataTableLoading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Loader } from '../loader'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\n\nconst PendingState = styled(Loader, {\n  base: [\n    'absolute',\n    'left-1/2',\n    'top-1/2',\n    '-translate-x-1/2',\n    '-translate-y-1/2',\n    'z-1'\n  ]\n})\n\nexport const DataTableLoading = (\n  props: React.ComponentProps<typeof PendingState>\n) => {\n  const { asyncDataState } = useDataTable()\n\n  if (asyncDataState !== AsyncDataState.PENDING) return null\n\n  return <PendingState {...props} />\n}\n"],"names":["PendingState","styled","Loader","DataTableLoading","props","asyncDataState","useDataTable","AsyncDataState","React"],"mappings":"yNAQA,MAAMA,EAAeC,EAAOC,EAAQ,CAClC,KAAM,CACJ,WACA,WACA,UACA,mBACA,mBACA,KACF,CACF,CAAC,EAEYC,EACXC,GACG,CACH,KAAM,CAAE,eAAAC,CAAe,EAAIC,IAE3B,OAAID,IAAmBE,EAAe,QAAgB,KAE/CC,EAAA,cAACR,EAAA,CAAc,GAAGI,CAAAA,CAAO,CAClC"}
+{"version":3,"file":"DataTableLoading.js","sources":["../../../src/components/data-table/DataTableLoading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Loader } from '../loader/Loader'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\n\nconst PendingState = styled(Loader, {\n  base: [\n    'absolute',\n    'left-1/2',\n    'top-1/2',\n    '-translate-x-1/2',\n    '-translate-y-1/2',\n    'z-1'\n  ]\n})\n\nexport const DataTableLoading = (\n  props: React.ComponentProps<typeof PendingState>\n) => {\n  const { asyncDataState } = useDataTable()\n\n  if (asyncDataState !== AsyncDataState.PENDING) return null\n\n  return <PendingState {...props} />\n}\n"],"names":["PendingState","styled","Loader","DataTableLoading","props","asyncDataState","useDataTable","AsyncDataState","React"],"mappings":"yNAQA,MAAMA,EAAeC,EAAOC,EAAQ,CAClC,KAAM,CACJ,WACA,WACA,UACA,mBACA,mBACA,KACF,CACF,CAAC,EAEYC,EACXC,GACG,CACH,KAAM,CAAE,eAAAC,CAAe,EAAIC,IAE3B,OAAID,IAAmBE,EAAe,QAAgB,KAE/CC,EAAA,cAACR,EAAA,CAAc,GAAGI,CAAAA,CAAO,CAClC"}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Text } from '../text';
+import { Text } from '../text/Text';
 export declare const DataTableMetaData: ({ copy, ...rest }: React.ComponentProps<typeof Text> & {
     copy?: {
         sorted_by?: string;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableMetaData.js","sources":["../../../src/components/data-table/DataTableMetaData.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '../text'\nimport { useDataTable } from './index'\n\nconst defaultCopy = {\n  sorted_by: 'Sorted by',\n  ascending: 'ascending',\n  descending: 'descending',\n  separator: '-'\n}\n\nexport const DataTableMetaData = ({\n  copy,\n  ...rest\n}: React.ComponentProps<typeof Text> & {\n  copy?: {\n    sorted_by?: string\n    ascending?: string\n    descending?: string\n    separator?: string\n  }\n  sortLabel?: string\n}) => {\n  const { getState, columns, getRowModel, rowSelection } = useDataTable()\n  const { sorting } = getState()\n  const isSorted = sorting.length > 0\n\n  const totalRows = getRowModel()?.rows?.length\n\n  const selectedRows = Object.keys(rowSelection || {}).length\n\n  const copyMerged = { ...defaultCopy, ...copy }\n\n  const getColumnDisplayName = (id: string) => {\n    const sortedColumn = columns.find((col) => col.id === id)\n    return sortedColumn?.header || id\n  }\n\n  const getSortingString = (sorting) => {\n    return `${copyMerged.separator} ${\n      copyMerged.sorted_by\n    } ${getColumnDisplayName(sorting[0].id)} ${\n      sorting[0].desc ? copyMerged.descending : copyMerged.ascending\n    }`\n  }\n\n  return (\n    <Text weight=\"bold\" {...rest}>{`${selectedRows || totalRows} ${\n      (selectedRows || totalRows) === 1 ? 'item' : 'items'\n    } ${selectedRows ? 'selected' : ''} ${\n      isSorted ? getSortingString(sorting) : ''\n    }`}</Text>\n  )\n}\n"],"names":["defaultCopy","DataTableMetaData","copy","rest","_a","_b","getState","columns","getRowModel","rowSelection","useDataTable","sorting","isSorted","totalRows","selectedRows","copyMerged","getColumnDisplayName","id","sortedColumn","col","getSortingString","React","Text"],"mappings":"2IAKA,MAAMA,EAAc,CAClB,UAAW,YACX,UAAW,YACX,WAAY,aACZ,UAAW,GACb,EAEaC,EAAoB,CAAC,CAChC,KAAAC,EACA,GAAGC,CACL,IAQM,CAvBN,IAAAC,EAAAC,EAwBE,KAAM,CAAE,SAAAC,EAAU,QAAAC,EAAS,YAAAC,EAAa,aAAAC,CAAa,EAAIC,EAAa,EAChE,CAAE,QAAAC,CAAQ,EAAIL,EACdM,EAAAA,EAAWD,EAAQ,OAAS,EAE5BE,GAAYR,GAAAD,EAAAI,EAAY,IAAZ,KAAAJ,OAAAA,EAAe,OAAf,KAAAC,OAAAA,EAAqB,OAEjCS,EAAe,OAAO,KAAKL,GAAgB,CAAE,CAAA,EAAE,OAE/CM,EAAa,CAAE,GAAGf,EAAa,GAAGE,CAAK,EAEvCc,EAAwBC,GAAe,CAC3C,MAAMC,EAAeX,EAAQ,KAAMY,GAAQA,EAAI,KAAOF,CAAE,EACxD,OAAOC,GAAA,KAAAA,OAAAA,EAAc,SAAUD,CACjC,EAEMG,EAAoBT,GACjB,GAAGI,EAAW,SAAS,IAC5BA,EAAW,SACb,IAAIC,EAAqBL,EAAQ,CAAC,EAAE,EAAE,CAAC,IACrCA,EAAQ,CAAC,EAAE,KAAOI,EAAW,WAAaA,EAAW,SACvD,GAGF,OACEM,EAAA,cAACC,EAAA,CAAK,OAAO,OAAQ,GAAGnB,CAAO,EAAA,GAAGW,GAAgBD,CAAS,KACxDC,GAAgBD,KAAe,EAAI,OAAS,OAC/C,IAAIC,EAAe,WAAa,EAAE,IAChCF,EAAWQ,EAAiBT,CAAO,EAAI,EACzC,EAAG,CAEP"}
+{"version":3,"file":"DataTableMetaData.js","sources":["../../../src/components/data-table/DataTableMetaData.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '../text/Text'\nimport { useDataTable } from './DataTableContext'\n\nconst defaultCopy = {\n  sorted_by: 'Sorted by',\n  ascending: 'ascending',\n  descending: 'descending',\n  separator: '-'\n}\n\nexport const DataTableMetaData = ({\n  copy,\n  ...rest\n}: React.ComponentProps<typeof Text> & {\n  copy?: {\n    sorted_by?: string\n    ascending?: string\n    descending?: string\n    separator?: string\n  }\n  sortLabel?: string\n}) => {\n  const { getState, columns, getRowModel, rowSelection } = useDataTable()\n  const { sorting } = getState()\n  const isSorted = sorting.length > 0\n\n  const totalRows = getRowModel()?.rows?.length\n\n  const selectedRows = Object.keys(rowSelection || {}).length\n\n  const copyMerged = { ...defaultCopy, ...copy }\n\n  const getColumnDisplayName = (id: string) => {\n    const sortedColumn = columns.find((col) => col.id === id)\n    return sortedColumn?.header || id\n  }\n\n  const getSortingString = (sorting) => {\n    return `${copyMerged.separator} ${\n      copyMerged.sorted_by\n    } ${getColumnDisplayName(sorting[0].id)} ${\n      sorting[0].desc ? copyMerged.descending : copyMerged.ascending\n    }`\n  }\n\n  return (\n    <Text weight=\"bold\" {...rest}>{`${selectedRows || totalRows} ${\n      (selectedRows || totalRows) === 1 ? 'item' : 'items'\n    } ${selectedRows ? 'selected' : ''} ${\n      isSorted ? getSortingString(sorting) : ''\n    }`}</Text>\n  )\n}\n"],"names":["defaultCopy","DataTableMetaData","copy","rest","_a","_b","getState","columns","getRowModel","rowSelection","useDataTable","sorting","isSorted","totalRows","selectedRows","copyMerged","getColumnDisplayName","id","sortedColumn","col","getSortingString","React","Text"],"mappings":"oHAKA,MAAMA,EAAc,CAClB,UAAW,YACX,UAAW,YACX,WAAY,aACZ,UAAW,GACb,EAEaC,EAAoB,CAAC,CAChC,KAAAC,EACA,GAAGC,CACL,IAQM,CAvBN,IAAAC,EAAAC,EAwBE,KAAM,CAAE,SAAAC,EAAU,QAAAC,EAAS,YAAAC,EAAa,aAAAC,CAAa,EAAIC,EAAa,EAChE,CAAE,QAAAC,CAAQ,EAAIL,EACdM,EAAAA,EAAWD,EAAQ,OAAS,EAE5BE,GAAYR,GAAAD,EAAAI,EAAY,IAAZ,KAAAJ,OAAAA,EAAe,OAAf,KAAAC,OAAAA,EAAqB,OAEjCS,EAAe,OAAO,KAAKL,GAAgB,CAAE,CAAA,EAAE,OAE/CM,EAAa,CAAE,GAAGf,EAAa,GAAGE,CAAK,EAEvCc,EAAwBC,GAAe,CAC3C,MAAMC,EAAeX,EAAQ,KAAMY,GAAQA,EAAI,KAAOF,CAAE,EACxD,OAAOC,GAAA,KAAAA,OAAAA,EAAc,SAAUD,CACjC,EAEMG,EAAoBT,GACjB,GAAGI,EAAW,SAAS,IAC5BA,EAAW,SACb,IAAIC,EAAqBL,EAAQ,CAAC,EAAE,EAAE,CAAC,IACrCA,EAAQ,CAAC,EAAE,KAAOI,EAAW,WAAaA,EAAW,SACvD,GAGF,OACEM,EAAA,cAACC,EAAA,CAAK,OAAO,OAAQ,GAAGnB,CAAO,EAAA,GAAGW,GAAgBD,CAAS,KACxDC,GAAgBD,KAAe,EAAI,OAAS,OAC/C,IAAIC,EAAe,WAAa,EAAE,IAChCF,EAAWQ,EAAiBT,CAAO,EAAI,EACzC,EAAG,CAEP"}

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

@@ -1,6 +1,6 @@
 import type { Row } from '@tanstack/react-table';
 import * as React from 'react';
-import { Table } from '../table';
+import { Table } from '../table/Table';
 export type DataTableRowProps = React.ComponentProps<typeof Table.Row> & {
     row: Row<Record<string, unknown>>;
     rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableRow.js","sources":["../../../src/components/data-table/DataTableRow.tsx"],"sourcesContent":["import { ChevronDown, ChevronRight } from '@atom-learning/icons'\nimport type { Row } from '@tanstack/react-table'\nimport clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Icon } from '../icon'\nimport { Table } from '../table'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableDataCell } from './DataTableDataCell'\nimport { DataTableRowSelectionCheckbox } from './DataTableRowSelectionCheckbox'\n\nexport type DataTableRowProps = React.ComponentProps<typeof Table.Row> & {\n  row: Row<Record<string, unknown>>\n  rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n}\n\nconst StyledRow = styled(Table.Row, {\n  base: ['bg-[initial]', 'relative'],\n  variants: {\n    isSelected: {\n      true: ['odd:bg-primary-100']\n    },\n    isDisabled: {\n      true: ['opacity-30']\n    },\n    isFocusable: {\n      true: [\n        'translate-y-0',\n        'duration-200',\n        'ease-out',\n        'transition-shadow',\n        'transition-transform',\n        'hover:shadow-[0px_4px_11px_0px_hsla(0,0%,12%,0.12)]',\n        'hover:-translate-y-px',\n        'hover:z-3',\n        'focus:outline-2',\n        'focus:outline-primary-500',\n        'focus:outline-solid',\n        'focus:-outline-offset-4',\n        'focus:[&_td]:bg-transparent'\n      ]\n    }\n  }\n})\n\nconst isElementInteractive = (element: Element | null): boolean => {\n  if (!element) return false\n  if (element.closest('button, a, input, select, textarea')) return true\n  if (element.getAttribute('role') === 'button') return true\n  return false\n}\n\nexport const DataTableRow = ({ row, rowAction }: DataTableRowProps) => {\n  const { enableRowSelection, disabledRows, getCanSomeRowsExpand } =\n    useDataTable()\n\n  const isDisabled = !!disabledRows?.[row.id]\n\n  const toggleExpandHandler = row.getToggleExpandedHandler()\n  const toggleSelectHandler = row.getToggleSelectedHandler()\n\n  const getCheckedState = (): boolean | 'indeterminate' => {\n    if (row.getIsSomeSelected()) return 'indeterminate'\n    return row.getIsSelected()\n  }\n\n  const handleRowClick = (\n    rowData: Row<Record<string, unknown>>,\n    event: React.MouseEvent<HTMLTableRowElement>\n  ) => {\n    if (!rowAction) return\n\n    // Skip if clicking on an interactive element\n    const rowElement = (event.target as Element).closest('tr')\n    if (!rowElement || isElementInteractive(event.target as Element)) {\n      return\n    }\n\n    rowAction(rowData.original, event)\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLTableRowElement>) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      if (isElementInteractive(event.target as Element)) {\n        return\n      }\n      event.preventDefault()\n      handleRowClick(\n        row,\n        event as unknown as React.MouseEvent<HTMLTableRowElement>\n      )\n    }\n    if (event.key === 'ArrowDown') {\n      event.preventDefault()\n      const currentRow = (event.target as HTMLElement).closest('tr')\n      const nextRow = currentRow?.nextElementSibling as HTMLElement\n      if (nextRow && nextRow.tagName === 'TR') {\n        nextRow.focus()\n      }\n    }\n    if (event.key === 'ArrowUp') {\n      event.preventDefault()\n      const currentRow = (event.target as HTMLElement).closest('tr')\n      const previousRow = currentRow?.previousElementSibling as HTMLElement\n      if (previousRow && previousRow.tagName === 'TR') {\n        previousRow.focus()\n      }\n    }\n  }\n\n  return (\n    <StyledRow\n      isSelected={row.getIsSelected()}\n      isDisabled={isDisabled}\n      isFocusable={!!rowAction && !isDisabled}\n      {...(rowAction && {\n        onClick: (event) => handleRowClick(row, event),\n        tabIndex: 0,\n        className: 'cursor-pointer',\n        onKeyDown: handleKeyDown\n      })}\n    >\n      {getCanSomeRowsExpand() && (\n        <Table.Cell\n          data-testid={`expand-icon-${row.id}`}\n          onClick={toggleExpandHandler}\n          className={clsx(\n            'w-10',\n            row.getCanExpand() ? 'cursor-pointer' : 'cursor-auto'\n          )}\n        >\n          {row.getCanExpand() && (\n            <Icon is={row.getIsExpanded() ? ChevronDown : ChevronRight} />\n          )}\n        </Table.Cell>\n      )}\n\n      {enableRowSelection && (\n        <Table.Cell className=\"w-10\">\n          <DataTableRowSelectionCheckbox\n            row={row}\n            checked={getCheckedState()}\n            onCheckedChange={toggleSelectHandler}\n          />\n        </Table.Cell>\n      )}\n      {row.getVisibleCells().map((cell, i) => {\n        return <DataTableDataCell key={cell.id} cell={cell} />\n      })}\n    </StyledRow>\n  )\n}\n"],"names":["StyledRow","styled","Table","isElementInteractive","element","DataTableRow","row","rowAction","enableRowSelection","disabledRows","getCanSomeRowsExpand","useDataTable","isDisabled","toggleExpandHandler","toggleSelectHandler","getCheckedState","handleRowClick","rowData","event","handleKeyDown","currentRow","nextRow","previousRow","React","clsx","Icon","ChevronDown","ChevronRight","DataTableRowSelectionCheckbox","cell","i","DataTableDataCell"],"mappings":"8aAkBA,MAAMA,EAAYC,EAAOC,EAAM,IAAK,CAClC,KAAM,CAAC,eAAgB,UAAU,EACjC,SAAU,CACR,WAAY,CACV,KAAM,CAAC,oBAAoB,CAC7B,EACA,WAAY,CACV,KAAM,CAAC,YAAY,CACrB,EACA,YAAa,CACX,KAAM,CACJ,gBACA,eACA,WACA,oBACA,uBACA,sDACA,wBACA,YACA,kBACA,4BACA,sBACA,0BACA,6BACF,CACF,CACF,CACF,CAAC,EAEKC,EAAwBC,GACvBA,EACD,CAAA,EAAAA,EAAQ,QAAQ,oCAAoC,GACpDA,EAAQ,aAAa,MAAM,IAAM,UAFhB,GAMVC,EAAe,CAAC,CAAE,IAAAC,EAAK,UAAAC,CAAU,IAAyB,CACrE,KAAM,CAAE,mBAAAC,EAAoB,aAAAC,EAAc,qBAAAC,CAAqB,EAC7DC,IAEIC,EAAa,CAAC,EAACH,GAAA,MAAAA,EAAeH,EAAI,EAAA,GAElCO,EAAsBP,EAAI,yBAAA,EAC1BQ,EAAsBR,EAAI,yBAAyB,EAEnDS,EAAkB,IAClBT,EAAI,kBAA4B,EAAA,gBAC7BA,EAAI,cAAc,EAGrBU,EAAiB,CACrBC,EACAC,IACG,CACC,CAACX,GAID,CADgBW,EAAM,OAAmB,QAAQ,IAAI,GACtCf,EAAqBe,EAAM,MAAiB,GAI/DX,EAAUU,EAAQ,SAAUC,CAAK,CACnC,EAEMC,EAAiBD,GAAoD,CACzE,GAAIA,EAAM,MAAQ,SAAWA,EAAM,MAAQ,IAAK,CAC9C,GAAIf,EAAqBe,EAAM,MAAiB,EAC9C,OAEFA,EAAM,eAAe,EACrBF,EACEV,EACAY,CACF,CACF,CACA,GAAIA,EAAM,MAAQ,YAAa,CAC7BA,EAAM,eACN,EAAA,MAAME,EAAcF,EAAM,OAAuB,QAAQ,IAAI,EACvDG,EAAUD,GAAA,YAAAA,EAAY,mBACxBC,GAAWA,EAAQ,UAAY,MACjCA,EAAQ,MAAA,CAEZ,CACA,GAAIH,EAAM,MAAQ,UAAW,CAC3BA,EAAM,iBACN,MAAME,EAAcF,EAAM,OAAuB,QAAQ,IAAI,EACvDI,EAAcF,GAAA,KAAA,OAAAA,EAAY,uBAC5BE,GAAeA,EAAY,UAAY,MACzCA,EAAY,MAEhB,CAAA,CACF,EAEA,OACEC,EAAA,cAACvB,EAAA,CACC,WAAYM,EAAI,cAAc,EAC9B,WAAYM,EACZ,YAAa,CAAC,CAACL,GAAa,CAACK,EAC5B,GAAIL,GAAa,CAChB,QAAUW,GAAUF,EAAeV,EAAKY,CAAK,EAC7C,SAAU,EACV,UAAW,iBACX,UAAWC,CACb,CAECT,EAAAA,EAAAA,GACCa,EAAA,cAACrB,EAAM,KAAN,CACC,cAAa,eAAeI,EAAI,EAAE,GAClC,QAASO,EACT,UAAWW,EACT,OACAlB,EAAI,eAAiB,iBAAmB,aAC1C,CAECA,EAAAA,EAAI,gBACHiB,EAAA,cAACE,EAAA,CAAK,GAAInB,EAAI,cAAA,EAAkBoB,EAAcC,EAAc,CAEhE,EAGDnB,GACCe,EAAA,cAACrB,EAAM,KAAN,CAAW,UAAU,MACpBqB,EAAAA,EAAA,cAACK,EAAA,CACC,IAAKtB,EACL,QAASS,IACT,gBAAiBD,CACnB,CAAA,CACF,EAEDR,EAAI,kBAAkB,IAAI,CAACuB,EAAMC,IACzBP,EAAA,cAACQ,EAAA,CAAkB,IAAKF,EAAK,GAAI,KAAMA,CAAM,CAAA,CACrD,CACH,CAEJ"}
+{"version":3,"file":"DataTableRow.js","sources":["../../../src/components/data-table/DataTableRow.tsx"],"sourcesContent":["import { ChevronDown, ChevronRight } from '@atom-learning/icons'\nimport type { Row } from '@tanstack/react-table'\nimport clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Icon } from '../icon/Icon'\nimport { Table } from '../table/Table'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableDataCell } from './DataTableDataCell'\nimport { DataTableRowSelectionCheckbox } from './DataTableRowSelectionCheckbox'\n\nexport type DataTableRowProps = React.ComponentProps<typeof Table.Row> & {\n  row: Row<Record<string, unknown>>\n  rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n}\n\nconst StyledRow = styled(Table.Row, {\n  base: ['bg-[initial]', 'relative'],\n  variants: {\n    isSelected: {\n      true: ['odd:bg-primary-100']\n    },\n    isDisabled: {\n      true: ['opacity-30']\n    },\n    isFocusable: {\n      true: [\n        'translate-y-0',\n        'duration-200',\n        'ease-out',\n        'transition-shadow',\n        'transition-transform',\n        'hover:shadow-[0px_4px_11px_0px_hsla(0,0%,12%,0.12)]',\n        'hover:-translate-y-px',\n        'hover:z-3',\n        'focus:outline-2',\n        'focus:outline-primary-500',\n        'focus:outline-solid',\n        'focus:-outline-offset-4',\n        'focus:[&_td]:bg-transparent'\n      ]\n    }\n  }\n})\n\nconst isElementInteractive = (element: Element | null): boolean => {\n  if (!element) return false\n  if (element.closest('button, a, input, select, textarea')) return true\n  if (element.getAttribute('role') === 'button') return true\n  return false\n}\n\nexport const DataTableRow = ({ row, rowAction }: DataTableRowProps) => {\n  const { enableRowSelection, disabledRows, getCanSomeRowsExpand } =\n    useDataTable()\n\n  const isDisabled = !!disabledRows?.[row.id]\n\n  const toggleExpandHandler = row.getToggleExpandedHandler()\n  const toggleSelectHandler = row.getToggleSelectedHandler()\n\n  const getCheckedState = (): boolean | 'indeterminate' => {\n    if (row.getIsSomeSelected()) return 'indeterminate'\n    return row.getIsSelected()\n  }\n\n  const handleRowClick = (\n    rowData: Row<Record<string, unknown>>,\n    event: React.MouseEvent<HTMLTableRowElement>\n  ) => {\n    if (!rowAction) return\n\n    // Skip if clicking on an interactive element\n    const rowElement = (event.target as Element).closest('tr')\n    if (!rowElement || isElementInteractive(event.target as Element)) {\n      return\n    }\n\n    rowAction(rowData.original, event)\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLTableRowElement>) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      if (isElementInteractive(event.target as Element)) {\n        return\n      }\n      event.preventDefault()\n      handleRowClick(\n        row,\n        event as unknown as React.MouseEvent<HTMLTableRowElement>\n      )\n    }\n    if (event.key === 'ArrowDown') {\n      event.preventDefault()\n      const currentRow = (event.target as HTMLElement).closest('tr')\n      const nextRow = currentRow?.nextElementSibling as HTMLElement\n      if (nextRow && nextRow.tagName === 'TR') {\n        nextRow.focus()\n      }\n    }\n    if (event.key === 'ArrowUp') {\n      event.preventDefault()\n      const currentRow = (event.target as HTMLElement).closest('tr')\n      const previousRow = currentRow?.previousElementSibling as HTMLElement\n      if (previousRow && previousRow.tagName === 'TR') {\n        previousRow.focus()\n      }\n    }\n  }\n\n  return (\n    <StyledRow\n      isSelected={row.getIsSelected()}\n      isDisabled={isDisabled}\n      isFocusable={!!rowAction && !isDisabled}\n      {...(rowAction && {\n        onClick: (event) => handleRowClick(row, event),\n        tabIndex: 0,\n        className: 'cursor-pointer',\n        onKeyDown: handleKeyDown\n      })}\n    >\n      {getCanSomeRowsExpand() && (\n        <Table.Cell\n          data-testid={`expand-icon-${row.id}`}\n          onClick={toggleExpandHandler}\n          className={clsx(\n            'w-10',\n            row.getCanExpand() ? 'cursor-pointer' : 'cursor-auto'\n          )}\n        >\n          {row.getCanExpand() && (\n            <Icon is={row.getIsExpanded() ? ChevronDown : ChevronRight} />\n          )}\n        </Table.Cell>\n      )}\n\n      {enableRowSelection && (\n        <Table.Cell className=\"w-10\">\n          <DataTableRowSelectionCheckbox\n            row={row}\n            checked={getCheckedState()}\n            onCheckedChange={toggleSelectHandler}\n          />\n        </Table.Cell>\n      )}\n      {row.getVisibleCells().map((cell, i) => {\n        return <DataTableDataCell key={cell.id} cell={cell} />\n      })}\n    </StyledRow>\n  )\n}\n"],"names":["StyledRow","styled","Table","isElementInteractive","element","DataTableRow","row","rowAction","enableRowSelection","disabledRows","getCanSomeRowsExpand","useDataTable","isDisabled","toggleExpandHandler","toggleSelectHandler","getCheckedState","handleRowClick","rowData","event","handleKeyDown","currentRow","nextRow","previousRow","React","clsx","Icon","ChevronDown","ChevronRight","DataTableRowSelectionCheckbox","cell","i","DataTableDataCell"],"mappings":"8aAkBA,MAAMA,EAAYC,EAAOC,EAAM,IAAK,CAClC,KAAM,CAAC,eAAgB,UAAU,EACjC,SAAU,CACR,WAAY,CACV,KAAM,CAAC,oBAAoB,CAC7B,EACA,WAAY,CACV,KAAM,CAAC,YAAY,CACrB,EACA,YAAa,CACX,KAAM,CACJ,gBACA,eACA,WACA,oBACA,uBACA,sDACA,wBACA,YACA,kBACA,4BACA,sBACA,0BACA,6BACF,CACF,CACF,CACF,CAAC,EAEKC,EAAwBC,GACvBA,EACD,CAAA,EAAAA,EAAQ,QAAQ,oCAAoC,GACpDA,EAAQ,aAAa,MAAM,IAAM,UAFhB,GAMVC,EAAe,CAAC,CAAE,IAAAC,EAAK,UAAAC,CAAU,IAAyB,CACrE,KAAM,CAAE,mBAAAC,EAAoB,aAAAC,EAAc,qBAAAC,CAAqB,EAC7DC,IAEIC,EAAa,CAAC,EAACH,GAAA,MAAAA,EAAeH,EAAI,EAAA,GAElCO,EAAsBP,EAAI,yBAAA,EAC1BQ,EAAsBR,EAAI,yBAAyB,EAEnDS,EAAkB,IAClBT,EAAI,kBAA4B,EAAA,gBAC7BA,EAAI,cAAc,EAGrBU,EAAiB,CACrBC,EACAC,IACG,CACC,CAACX,GAID,CADgBW,EAAM,OAAmB,QAAQ,IAAI,GACtCf,EAAqBe,EAAM,MAAiB,GAI/DX,EAAUU,EAAQ,SAAUC,CAAK,CACnC,EAEMC,EAAiBD,GAAoD,CACzE,GAAIA,EAAM,MAAQ,SAAWA,EAAM,MAAQ,IAAK,CAC9C,GAAIf,EAAqBe,EAAM,MAAiB,EAC9C,OAEFA,EAAM,eAAe,EACrBF,EACEV,EACAY,CACF,CACF,CACA,GAAIA,EAAM,MAAQ,YAAa,CAC7BA,EAAM,eACN,EAAA,MAAME,EAAcF,EAAM,OAAuB,QAAQ,IAAI,EACvDG,EAAUD,GAAA,YAAAA,EAAY,mBACxBC,GAAWA,EAAQ,UAAY,MACjCA,EAAQ,MAAA,CAEZ,CACA,GAAIH,EAAM,MAAQ,UAAW,CAC3BA,EAAM,iBACN,MAAME,EAAcF,EAAM,OAAuB,QAAQ,IAAI,EACvDI,EAAcF,GAAA,KAAA,OAAAA,EAAY,uBAC5BE,GAAeA,EAAY,UAAY,MACzCA,EAAY,MAEhB,CAAA,CACF,EAEA,OACEC,EAAA,cAACvB,EAAA,CACC,WAAYM,EAAI,cAAc,EAC9B,WAAYM,EACZ,YAAa,CAAC,CAACL,GAAa,CAACK,EAC5B,GAAIL,GAAa,CAChB,QAAUW,GAAUF,EAAeV,EAAKY,CAAK,EAC7C,SAAU,EACV,UAAW,iBACX,UAAWC,CACb,CAECT,EAAAA,EAAAA,GACCa,EAAA,cAACrB,EAAM,KAAN,CACC,cAAa,eAAeI,EAAI,EAAE,GAClC,QAASO,EACT,UAAWW,EACT,OACAlB,EAAI,eAAiB,iBAAmB,aAC1C,CAECA,EAAAA,EAAI,gBACHiB,EAAA,cAACE,EAAA,CAAK,GAAInB,EAAI,cAAA,EAAkBoB,EAAcC,EAAc,CAEhE,EAGDnB,GACCe,EAAA,cAACrB,EAAM,KAAN,CAAW,UAAU,MACpBqB,EAAAA,EAAA,cAACK,EAAA,CACC,IAAKtB,EACL,QAASS,IACT,gBAAiBD,CACnB,CAAA,CACF,EAEDR,EAAI,kBAAkB,IAAI,CAACuB,EAAMC,IACzBP,EAAA,cAACQ,EAAA,CAAkB,IAAKF,EAAK,GAAI,KAAMA,CAAM,CAAA,CACrD,CACH,CAEJ"}

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableRowSelectionCheckbox.js","sources":["../../../src/components/data-table/DataTableRowSelectionCheckbox.tsx"],"sourcesContent":["import * as VisuallyHidden from '@radix-ui/react-visually-hidden'\nimport type { Row } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Checkbox } from '../checkbox'\nimport { Label } from '../label'\nimport { useDataTable } from './DataTableContext'\n\nexport const DataTableRowSelectionCheckbox = ({\n  row,\n  checked,\n  onCheckedChange,\n  label = `Row ${row.id} selection`\n}: {\n  row: Row<Record<string, unknown>>\n  checked: boolean | 'indeterminate'\n  onCheckedChange: (value: boolean) => void\n  label?: string\n}): React.ReactElement => {\n  const { tableId } = useDataTable()\n\n  return (\n    <>\n      <VisuallyHidden.Root>\n        <Label htmlFor={`${tableId}_row_${row.id}_selection`}>{label}</Label>\n      </VisuallyHidden.Root>\n      <Checkbox\n        size=\"lg\"\n        style={{ '--depth': row.depth }}\n        checked={checked}\n        onCheckedChange={onCheckedChange}\n        name={`${tableId}_row_${row.id}_selection`}\n        disabled={!row.getCanSelect()}\n        className=\"mr-3 ml-[calc((var(--depth,0)*2)*4px)]\"\n      />\n    </>\n  )\n}\n"],"names":["DataTableRowSelectionCheckbox","row","checked","onCheckedChange","label","tableId","useDataTable","React","VisuallyHidden","Label","Checkbox"],"mappings":"4NAQa,MAAAA,EAAgC,CAAC,CAC5C,IAAAC,EACA,QAAAC,EACA,gBAAAC,EACA,MAAAC,EAAQ,OAAOH,EAAI,EAAE,YACvB,IAK0B,CACxB,KAAM,CAAE,QAAAI,CAAQ,EAAIC,EAAAA,EAEpB,OACEC,EAAA,cAAAA,EAAA,SACEA,KAAAA,EAAA,cAACC,EAAe,KAAf,KACCD,EAAA,cAACE,EAAA,CAAM,QAAS,GAAGJ,CAAO,QAAQJ,EAAI,EAAE,YAAA,EAAeG,CAAM,CAC/D,EACAG,EAAA,cAACG,EAAA,CACC,KAAK,KACL,MAAO,CAAE,UAAWT,EAAI,KAAM,EAC9B,QAASC,EACT,gBAAiBC,EACjB,KAAM,GAAGE,CAAO,QAAQJ,EAAI,EAAE,aAC9B,SAAU,CAACA,EAAI,eACf,UAAU,wCACZ,CAAA,CACF,CAEJ"}
+{"version":3,"file":"DataTableRowSelectionCheckbox.js","sources":["../../../src/components/data-table/DataTableRowSelectionCheckbox.tsx"],"sourcesContent":["import * as VisuallyHidden from '@radix-ui/react-visually-hidden'\nimport type { Row } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Checkbox } from '../checkbox/Checkbox'\nimport { Label } from '../label/Label'\nimport { useDataTable } from './DataTableContext'\n\nexport const DataTableRowSelectionCheckbox = ({\n  row,\n  checked,\n  onCheckedChange,\n  label = `Row ${row.id} selection`\n}: {\n  row: Row<Record<string, unknown>>\n  checked: boolean | 'indeterminate'\n  onCheckedChange: (value: boolean) => void\n  label?: string\n}): React.ReactElement => {\n  const { tableId } = useDataTable()\n\n  return (\n    <>\n      <VisuallyHidden.Root>\n        <Label htmlFor={`${tableId}_row_${row.id}_selection`}>{label}</Label>\n      </VisuallyHidden.Root>\n      <Checkbox\n        size=\"lg\"\n        style={{ '--depth': row.depth }}\n        checked={checked}\n        onCheckedChange={onCheckedChange}\n        name={`${tableId}_row_${row.id}_selection`}\n        disabled={!row.getCanSelect()}\n        className=\"mr-3 ml-[calc((var(--depth,0)*2)*4px)]\"\n      />\n    </>\n  )\n}\n"],"names":["DataTableRowSelectionCheckbox","row","checked","onCheckedChange","label","tableId","useDataTable","React","VisuallyHidden","Label","Checkbox"],"mappings":"4NAQa,MAAAA,EAAgC,CAAC,CAC5C,IAAAC,EACA,QAAAC,EACA,gBAAAC,EACA,MAAAC,EAAQ,OAAOH,EAAI,EAAE,YACvB,IAK0B,CACxB,KAAM,CAAE,QAAAI,CAAQ,EAAIC,EAAAA,EAEpB,OACEC,EAAA,cAAAA,EAAA,SACEA,KAAAA,EAAA,cAACC,EAAe,KAAf,KACCD,EAAA,cAACE,EAAA,CAAM,QAAS,GAAGJ,CAAO,QAAQJ,EAAI,EAAE,YAAA,EAAeG,CAAM,CAC/D,EACAG,EAAA,cAACG,EAAA,CACC,KAAK,KACL,MAAO,CAAE,UAAWT,EAAI,KAAM,EAC9B,QAASC,EACT,gBAAiBC,EACjB,KAAM,GAAGE,CAAO,QAAQJ,EAAI,EAAE,aAC9B,SAAU,CAACA,EAAI,eACf,UAAU,wCACZ,CAAA,CACF,CAEJ"}

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableSelectAllRowsCheckbox.js","sources":["../../../src/components/data-table/DataTableSelectAllRowsCheckbox.tsx"],"sourcesContent":["import * as VisuallyHidden from '@radix-ui/react-visually-hidden'\nimport * as React from 'react'\n\nimport { Checkbox } from '../checkbox'\nimport { Label } from '../label'\nimport { useDataTable } from './DataTableContext'\n\nexport const DataTableSelectAllRowsCheckbox = ({\n  label = 'All rows selection'\n}: {\n  label?: string\n}) => {\n  const {\n    getIsAllPageRowsSelected,\n    getIsSomePageRowsSelected,\n    toggleAllPageRowsSelected,\n    tableId\n  } = useDataTable()\n\n  const getCheckedState = () => {\n    if (getIsSomePageRowsSelected()) return 'indeterminate'\n    if (getIsAllPageRowsSelected()) return true\n    return false\n  }\n\n  const updateCheckedState = () => {\n    if (getIsSomePageRowsSelected()) {\n      return toggleAllPageRowsSelected(false)\n    }\n    return toggleAllPageRowsSelected(!getIsAllPageRowsSelected())\n  }\n\n  return (\n    <>\n      <VisuallyHidden.Root>\n        <Label htmlFor={`${tableId}_all_rows_selection`}>{label}</Label>\n      </VisuallyHidden.Root>\n\n      <Checkbox\n        size=\"lg\"\n        checked={getCheckedState()}\n        onCheckedChange={updateCheckedState}\n        name={`${tableId}_allRowsSelection`}\n      />\n    </>\n  )\n}\n"],"names":["DataTableSelectAllRowsCheckbox","label","getIsAllPageRowsSelected","getIsSomePageRowsSelected","toggleAllPageRowsSelected","tableId","useDataTable","getCheckedState","updateCheckedState","React","VisuallyHidden","Label","Checkbox"],"mappings":"4NAOa,MAAAA,EAAiC,CAAC,CAC7C,MAAAC,EAAQ,oBACV,IAEM,CACJ,KAAM,CACJ,yBAAAC,EACA,0BAAAC,EACA,0BAAAC,EACA,QAAAC,CACF,EAAIC,EAAAA,EAEEC,EAAkB,IAClBJ,IAAoC,gBACpC,CAAAD,CAAAA,EAAAA,EAIAM,EAAqB,IACrBL,EAA0B,EACrBC,EAA0B,EAAK,EAEjCA,EAA0B,CAACF,EAAAA,CAA0B,EAG9D,OACEO,EAAA,cAAAA,EAAA,cACEA,EAAA,cAACC,EAAe,KAAf,KACCD,EAAA,cAACE,EAAA,CAAM,QAAS,GAAGN,CAAO,uBAAwBJ,CAAM,CAC1D,EAEAQ,EAAA,cAACG,EAAA,CACC,KAAK,KACL,QAASL,IACT,gBAAiBC,EACjB,KAAM,GAAGH,CAAO,mBAClB,CAAA,CACF,CAEJ"}
+{"version":3,"file":"DataTableSelectAllRowsCheckbox.js","sources":["../../../src/components/data-table/DataTableSelectAllRowsCheckbox.tsx"],"sourcesContent":["import * as VisuallyHidden from '@radix-ui/react-visually-hidden'\nimport * as React from 'react'\n\nimport { Checkbox } from '../checkbox/Checkbox'\nimport { Label } from '../label/Label'\nimport { useDataTable } from './DataTableContext'\n\nexport const DataTableSelectAllRowsCheckbox = ({\n  label = 'All rows selection'\n}: {\n  label?: string\n}) => {\n  const {\n    getIsAllPageRowsSelected,\n    getIsSomePageRowsSelected,\n    toggleAllPageRowsSelected,\n    tableId\n  } = useDataTable()\n\n  const getCheckedState = () => {\n    if (getIsSomePageRowsSelected()) return 'indeterminate'\n    if (getIsAllPageRowsSelected()) return true\n    return false\n  }\n\n  const updateCheckedState = () => {\n    if (getIsSomePageRowsSelected()) {\n      return toggleAllPageRowsSelected(false)\n    }\n    return toggleAllPageRowsSelected(!getIsAllPageRowsSelected())\n  }\n\n  return (\n    <>\n      <VisuallyHidden.Root>\n        <Label htmlFor={`${tableId}_all_rows_selection`}>{label}</Label>\n      </VisuallyHidden.Root>\n\n      <Checkbox\n        size=\"lg\"\n        checked={getCheckedState()}\n        onCheckedChange={updateCheckedState}\n        name={`${tableId}_allRowsSelection`}\n      />\n    </>\n  )\n}\n"],"names":["DataTableSelectAllRowsCheckbox","label","getIsAllPageRowsSelected","getIsSomePageRowsSelected","toggleAllPageRowsSelected","tableId","useDataTable","getCheckedState","updateCheckedState","React","VisuallyHidden","Label","Checkbox"],"mappings":"4NAOa,MAAAA,EAAiC,CAAC,CAC7C,MAAAC,EAAQ,oBACV,IAEM,CACJ,KAAM,CACJ,yBAAAC,EACA,0BAAAC,EACA,0BAAAC,EACA,QAAAC,CACF,EAAIC,EAAAA,EAEEC,EAAkB,IAClBJ,IAAoC,gBACpC,CAAAD,CAAAA,EAAAA,EAIAM,EAAqB,IACrBL,EAA0B,EACrBC,EAA0B,EAAK,EAEjCA,EAA0B,CAACF,EAAAA,CAA0B,EAG9D,OACEO,EAAA,cAAAA,EAAA,cACEA,EAAA,cAACC,EAAe,KAAf,KACCD,EAAA,cAACE,EAAA,CAAM,QAAS,GAAGN,CAAO,uBAAwBJ,CAAM,CAC1D,EAEAQ,EAAA,cAACG,EAAA,CACC,KAAK,KACL,QAASL,IACT,gBAAiBC,EACjB,KAAM,GAAGH,CAAO,mBAClB,CAAA,CACF,CAEJ"}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Table } from '../table';
+import { Table } from '../table/Table';
 import { TableBody } from '../table/TableBody';
 import { DataTableHead } from './DataTableHead';
 export type DataTableTableProps = Omit<React.ComponentProps<typeof Table>, 'children' | 'numberOfStickyColumns'> & Partial<Pick<React.ComponentProps<typeof DataTableHead>, 'theme' | 'sortable'>> & Partial<Pick<React.ComponentProps<typeof TableBody>, 'striped'>> & {

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

@@ -1,2 +1,2 @@
-import C from"clsx";import*as t from"react";import{styled as A}from"../../styled.js";import{Table as B}from"../table/Table.js";import{DataTable as g}from"./DataTable.js";import{AsyncDataState as P}from"./DataTable.types.js";import{useDataTable as _}from"./DataTableContext.js";import{DataTableLoading as M}from"./DataTableLoading.js";const j=A("div",{base:["p-2","bg-white","rounded-lg"]}),q=({sortable:h,striped:S,theme:k="white",className:O,scrollOptions:e={numberOfStickyColumns:0,stickyHeaderOffset:0,hasStickyHeader:!1,showTotalInFirstColumn:!0,totalSuffix:"items"},rowAction:v,withContainer:E=!1,...I})=>{const{asyncDataState:T,getTotalRows:x,getCanSomeRowsExpand:m,rowSelection:f,enableRowSelection:d,tableId:H,setTablePosition:l}=_(),n=t.useRef(null),R=t.useRef(!1),a=t.useRef(!1),r=t.useMemo(()=>typeof window>"u"?null:window,[]);t.useEffect(()=>{if(!r||typeof IntersectionObserver>"u")return;const o=()=>{if(n.current){const s=n.current.getBoundingClientRect().top,i=n.current.getBoundingClientRect().bottom;l(u=>({...u,top:s,bottom:i}))}a.current=!1},c=()=>{a.current||(requestAnimationFrame(o),a.current=!0)};if(!n.current)return;const b=(e==null?void 0:e.stickyHeaderOffset)||0,N={rootMargin:`-${b}px 0px -${b}px 0px`,threshold:0},L=s=>{if(!s||s.length===0)return;const i=s[0];R.current=i.isIntersecting,r&&(i.isIntersecting?r==null||r.addEventListener("scroll",c):r==null||r.removeEventListener("scroll",c)),l(u=>({...u,isVisible:i.isIntersecting}))},w=new IntersectionObserver(L,N);return n.current&&(e.hasStickyHeader||Object.keys(f||{}).length>0)&&w.observe(n.current),()=>{w.disconnect(),r&&(r==null||r.removeEventListener("scroll",c))}},[f,e.hasStickyHeader,e==null?void 0:e.stickyHeaderOffset,r,l]);const p=T===P.PENDING,D=!p&&x()===0,F=()=>{let o=0;return m()&&d?o=2:(m()||d)&&(o=1),`${H}_${o}_control_columns`};if(D)return null;const y=t.createElement(B,{corners:"round",size:"lg",...I,ref:n,numberOfStickyColumns:e.numberOfStickyColumns,scrollContainerCls:e.scrollContainerCls,scrollContainerkey:F(),className:C(O,p&&["opacity-50","pointer-events-none","transition-opacity","duration-250","linear","delay-150"])},t.createElement(g.Head,{theme:k,sortable:h,isSticky:e.hasStickyHeader,stickyOffset:e.stickyHeaderOffset,className:e.headerCss,showTotalInFirstColumn:e.showTotalInFirstColumn,totalSuffix:e.totalSuffix}),t.createElement(g.Body,{striped:S,rowAction:v}));return t.createElement(t.Fragment,null,t.createElement(M,null),E?t.createElement(j,{className:C(e.numberOfStickyColumns===0&&"overflow-x-auto")},y):y)};export{q as DataTableTable};
+import C from"clsx";import*as t from"react";import{styled as A}from"../../styled.js";import{Table as B}from"../table/Table.js";import{AsyncDataState as L}from"./DataTable.types.js";import{DataTableBody as P}from"./DataTableBody.js";import{useDataTable as _}from"./DataTableContext.js";import{DataTableHead as M}from"./DataTableHead.js";import{DataTableLoading as V}from"./DataTableLoading.js";const j=A("div",{base:["p-2","bg-white","rounded-lg"]}),q=({sortable:g,striped:h,theme:S="white",className:k,scrollOptions:e={numberOfStickyColumns:0,stickyHeaderOffset:0,hasStickyHeader:!1,showTotalInFirstColumn:!0,totalSuffix:"items"},rowAction:v,withContainer:E=!1,...O})=>{const{asyncDataState:T,getTotalRows:I,getCanSomeRowsExpand:m,rowSelection:f,enableRowSelection:d,tableId:x,setTablePosition:l}=_(),n=t.useRef(null),H=t.useRef(!1),a=t.useRef(!1),r=t.useMemo(()=>typeof window>"u"?null:window,[]);t.useEffect(()=>{if(!r||typeof IntersectionObserver>"u")return;const o=()=>{if(n.current){const s=n.current.getBoundingClientRect().top,i=n.current.getBoundingClientRect().bottom;l(u=>({...u,top:s,bottom:i}))}a.current=!1},c=()=>{a.current||(requestAnimationFrame(o),a.current=!0)};if(!n.current)return;const y=(e==null?void 0:e.stickyHeaderOffset)||0,F={rootMargin:`-${y}px 0px -${y}px 0px`,threshold:0},N=s=>{if(!s||s.length===0)return;const i=s[0];H.current=i.isIntersecting,r&&(i.isIntersecting?r==null||r.addEventListener("scroll",c):r==null||r.removeEventListener("scroll",c)),l(u=>({...u,isVisible:i.isIntersecting}))},w=new IntersectionObserver(N,F);return n.current&&(e.hasStickyHeader||Object.keys(f||{}).length>0)&&w.observe(n.current),()=>{w.disconnect(),r&&(r==null||r.removeEventListener("scroll",c))}},[f,e.hasStickyHeader,e==null?void 0:e.stickyHeaderOffset,r,l]);const p=T===L.PENDING,D=!p&&I()===0,R=()=>{let o=0;return m()&&d?o=2:(m()||d)&&(o=1),`${x}_${o}_control_columns`};if(D)return null;const b=t.createElement(B,{corners:"round",size:"lg",...O,ref:n,numberOfStickyColumns:e.numberOfStickyColumns,scrollContainerCls:e.scrollContainerCls,scrollContainerkey:R(),className:C(k,p&&["opacity-50","pointer-events-none","transition-opacity","duration-250","linear","delay-150"])},t.createElement(M,{theme:S,sortable:g,isSticky:e.hasStickyHeader,stickyOffset:e.stickyHeaderOffset,className:e.headerCss,showTotalInFirstColumn:e.showTotalInFirstColumn,totalSuffix:e.totalSuffix}),t.createElement(P,{striped:h,rowAction:v}));return t.createElement(t.Fragment,null,t.createElement(V,null),E?t.createElement(j,{className:C(e.numberOfStickyColumns===0&&"overflow-x-auto")},b):b)};export{q as DataTableTable};
 //# sourceMappingURL=DataTableTable.js.map

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

@@ -1 +1 @@
-{"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-lg']\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      scrollContainerCls?: string | 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      scrollContainerCls={scrollOptions.scrollContainerCls}\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\n          className={clsx(\n            scrollOptions.numberOfStickyColumns === 0 && 'overflow-x-auto'\n          )}\n        >\n          {tableComponent}\n        </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":"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"}
+{"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/Table'\nimport { TableBody } from '../table/TableBody'\nimport { AsyncDataState } from './DataTable.types'\nimport { DataTableBody } from './DataTableBody'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableLoading } from './DataTableLoading'\n\nconst TableContainer = styled('div', {\n  base: ['p-2', 'bg-white', 'rounded-lg']\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      scrollContainerCls?: string | 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      scrollContainerCls={scrollOptions.scrollContainerCls}\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      <DataTableHead\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      <DataTableBody striped={striped} rowAction={rowAction} />\n    </Table>\n  )\n\n  return (\n    <>\n      <DataTableLoading />\n      {withContainer ? (\n        <TableContainer\n          className={clsx(\n            scrollOptions.numberOfStickyColumns === 0 && 'overflow-x-auto'\n          )}\n        >\n          {tableComponent}\n        </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","DataTableHead","DataTableBody","DataTableLoading"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-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};
+import{arrayMove as T}from"@dnd-kit/sortable";import E from"clsx";import*as t from"react";import"../../sortable/SortableHandle.js";import"../../sortable/SortableItem.js";import{SortableRoot as I}from"../../sortable/SortableRoot.js";import{Table as g}from"../../table/Table.js";import{AsyncDataState as x}from"../DataTable.types.js";import{useDataTable as A}from"../DataTableContext.js";import{DataTableHead as C}from"../DataTableHead.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:p,...d})=>{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:l})=>{const n=T(e.results,a,l),y={results:n,total:e.total};D({results:n,total:e.total}),o==null||o({oldIndex:a,newIndex:l,newData:y})},[e,o]);return t.createElement(I,{onSortChange:f,sortableIds:b},t.createElement(N,null),t.createElement(g,{...d,className:E(p,u&&["opacity-50","pointer-events-none","transition-opacity,duration-250,linear,delay-150"])},t.createElement(C,{theme:i,sortable:m}),t.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 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"}
+{"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 * as Sortable from '../../sortable'\nimport { Table } from '../../table/Table'\nimport { AsyncDataState, TAsyncDataResult } from '../DataTable.types'\nimport { useDataTable } from '../DataTableContext'\nimport { DataTableHead } from '../DataTableHead'\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        <DataTableHead 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","DataTableHead","DragAndDropTableBody"],"mappings":"ijBAuBO,MAAMA,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,EAAAA,EACpCC,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,EAAA,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,GAEAG,EAAA,cAACY,EAAA,CAAc,MAAOtB,EAAO,SAAUF,CAAAA,CAAU,EACjDY,EAAA,cAACa,EAAA,CAAqB,QAASxB,EAAS,SAAUH,CAAAA,CAAU,CAC9D,CACF,CAEJ"}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Table } from '../../table';
+import { Table } from '../../table/Table';
 type DataTableBodyProps = Omit<React.ComponentProps<typeof Table.Body>, 'children'> & {
     idColumn?: string;
 };

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,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"}
+{"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/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.d.ts

@@ -1,6 +1,6 @@
 import type { Row } from '@tanstack/react-table';
 import * as React from 'react';
-import { Table } from '../../table';
+import { Table } from '../../table/Table';
 export type DataTableDraggableRowProps = React.ComponentProps<typeof Table.Row> & {
     row: Row<Record<string, unknown>>;
     idColumn?: string;

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 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};
+import{flexRender as i}from"@tanstack/react-table";import*as l from"react";import{SortableHandle as n}from"../../sortable/SortableHandle.js";import{SortableItem as c}from"../../sortable/SortableItem.js";import"../../sortable/SortableRoot.js";import{Table as r}from"../../table/Table.js";import{DataTableDataCell as d}from"../DataTableDataCell.js";const p=({row:t,idColumn:m="id"})=>{const o=t.original[m];return l.createElement(c,{id:o,asChild:!0},l.createElement(r.Row,null,t.getVisibleCells().map((e,a)=>a===0?l.createElement(r.Cell,{key:e.id},l.createElement(n,{targetId:o,className:"inline-block"}),i(e.column.columnDef.cell,e.getContext())):l.createElement(d,{key:e.id,cell:e}))))};export{p 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'\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"}
+{"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 * as Sortable from '../../sortable'\nimport { Table } from '../../table/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":"2VAea,MAAAA,EAAsB,CAAC,CAClC,IAAAC,EACA,SAAAC,EAAW,IACb,IAAkC,CAChC,MAAMC,EAAQF,EAAI,SAASC,CAAQ,EACnC,OACEE,EAAA,cAACC,EAAA,CAAc,GAAIF,EAAO,QAAO,EAC/BC,EAAAA,EAAA,cAACE,EAAM,IAAN,KACEL,EAAI,gBAAgB,EAAE,IAAI,CAACM,EAAMC,IAC5BA,IAAM,EAENJ,EAAA,cAACE,EAAM,KAAN,CAAW,IAAKC,EAAK,EACpBH,EAAAA,EAAA,cAACC,EAAA,CAAgB,SAAUF,EAAO,UAAU,eAAe,EAC1DM,EAAWF,EAAK,OAAO,UAAU,KAAMA,EAAK,WAAA,CAAY,CAC3D,EAGGH,EAAA,cAACM,EAAA,CAAkB,IAAKH,EAAK,GAAI,KAAMA,CAAM,CAAA,CACrD,CACH,CACF,CAEJ"}

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

@@ -1,2 +1,2 @@
-import n from"invariant";const d=e=>{if(e[0])return e[0].desc?"desc":"asc"},g=async(e,t,i,o,l)=>{var a;const{pageIndex:s,pageSize:u}=i,c={pageIndex:(t==null?void 0:t.pageIndex)??s,pageSize:(t==null?void 0:t.pageSize)??u,sortBy:(t==null?void 0:t.sortBy)??((a=o[0])==null?void 0:a.id),sortDirection:(t==null?void 0:t.sortDirection)??d(o),globalFilter:t.globalFilter??l},r=await e(c);return n(Array.isArray(r==null?void 0:r.results),"The getAsyncData function must return an object with a property `result` which must be an array"),n(r&&Number.isInteger(r.total)&&r.total>=0,"The getAsyncData function must return an object with a property `total` which must be a positive integer or zero"),r};export{g as getNewAsyncData};
+import n from"invariant";const d=e=>{if(e[0])return e[0].desc?"desc":"asc"},g=async(e,t,i,o,s)=>{var a;const{pageIndex:l,pageSize:c}=i,u={pageIndex:(t==null?void 0:t.pageIndex)??l,pageSize:(t==null?void 0:t.pageSize)??c,sortBy:(t==null?void 0:t.sortBy)??((a=o[0])==null?void 0:a.id),sortDirection:(t==null?void 0:t.sortDirection)??d(o),globalFilter:t.globalFilter??s},r=await e(u);return n(Array.isArray(r==null?void 0:r.results),"The getAsyncData function must return an object with a property `result` which must be an array"),n(r&&Number.isInteger(r.total)&&r.total>=0,"The getAsyncData function must return an object with a property `total` which must be a positive integer or zero"),r};export{g as getNewAsyncData};
 //# sourceMappingURL=getNewAsyncData.js.map

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TcolorScheme } from '../../../experiments/color-scheme';
+import { TcolorScheme } from '../../../experiments/color-scheme/ColorScheme';
 declare const StyledNav: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
     ref?: ((instance: HTMLElement | null) => void) | React.RefObject<HTMLElement> | null | undefined;
 }, never> & {

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 '~/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    getExpandedRowModel,\n    getRowModel,\n    setPageIndex,\n    getTotalRows,\n    getPageCount,\n    asyncDataState,\n    hasAsyncData\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  // Show pagination only if total pages are more than 1\n  const showPagination = hasAsyncData\n    ? getPageCount() > 1\n    : getExpandedRowModel().rows.length / paginationState.pageSize > 1\n\n  if (isEmpty || !showPagination) return null\n  const totalVisibleRows = getExpandedRowModel().rows.length\n\n  const start =\n    totalVisibleRows === 0\n      ? 0\n      : paginationState.pageIndex * paginationState.pageSize + 1\n\n  const asyncRowCount = getRowModel().rows.length\n  const end = hasAsyncData\n    ? asyncRowCount === 0\n      ? start\n      : start + asyncRowCount - 1\n    : Math.min(start + paginationState.pageSize - 1, totalVisibleRows)\n\n  // indexing for the pagination component is 1 based\n  const setPage = (index: number) => {\n    setPageIndex(index - 1)\n  }\n\n  const pageCount = hasAsyncData\n    ? getPageCount()\n    : Math.max(1, Math.ceil(totalVisibleRows / paginationState.pageSize))\n\n  return (\n    <StyledNav {...props}>\n      <Text size=\"sm\">{`${start} - ${end} of ${\n        hasAsyncData ? getTotalRows() : totalVisibleRows\n      } items`}</Text>\n      <PaginationComponent\n        colorScheme={colorScheme}\n        selectedPage={paginationState.pageIndex + 1}\n        pagesCount={pageCount}\n        onSelectedPageChange={setPage}\n      />\n    </StyledNav>\n  )\n}\n\nPagination.displayName = 'Pagination'\n"],"names":["StyledNav","styled","Pagination","colorScheme","props","applyPagination","getState","getExpandedRowModel","getRowModel","setPageIndex","getTotalRows","getPageCount","asyncDataState","hasAsyncData","useDataTable","React","paginationState","isEmpty","AsyncDataState","showPagination","totalVisibleRows","start","asyncRowCount","end","setPage","index","pageCount","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,oBAAAC,EACA,YAAAC,EACA,aAAAC,EACA,aAAAC,EACA,aAAAC,EACA,eAAAC,EACA,aAAAC,CACF,EAAIC,IAEJC,EAAM,UAAU,IAAM,CACpBV,EAAgB,CAClB,EAAG,CAACA,CAAe,CAAC,EAEpB,KAAM,CAAE,WAAYW,CAAgB,EAAIV,EAAS,EAE3CW,EADYL,IAAmBM,EAAe,SACtBR,MAAmB,EAE3CS,EAAiBN,EACnBF,EAAa,EAAI,EACjBJ,EAAsB,EAAA,KAAK,OAASS,EAAgB,SAAW,EAEnE,GAAIC,GAAW,CAACE,EAAgB,OAAO,KACvC,MAAMC,EAAmBb,EAAoB,EAAE,KAAK,OAE9Cc,EACJD,IAAqB,EACjB,EACAJ,EAAgB,UAAYA,EAAgB,SAAW,EAEvDM,EAAgBd,EAAY,EAAE,KAAK,OACnCe,EAAMV,EACRS,IAAkB,EAChBD,EACAA,EAAQC,EAAgB,EAC1B,KAAK,IAAID,EAAQL,EAAgB,SAAW,EAAGI,CAAgB,EAG7DI,EAAWC,GAAkB,CACjChB,EAAagB,EAAQ,CAAC,CACxB,EAEMC,EAAYb,EACdF,EACA,EAAA,KAAK,IAAI,EAAG,KAAK,KAAKS,EAAmBJ,EAAgB,QAAQ,CAAC,EAEtE,OACED,EAAA,cAACf,EAAA,CAAW,GAAGI,CAAAA,EACbW,EAAA,cAACY,EAAA,CAAK,KAAK,IAAM,EAAA,GAAGN,CAAK,MAAME,CAAG,OAChCV,EAAeH,EAAa,EAAIU,CAClC,QAAS,EACTL,EAAA,cAACa,EAAA,CACC,YAAazB,EACb,aAAca,EAAgB,UAAY,EAC1C,WAAYU,EACZ,qBAAsBF,EACxB,CACF,CAEJ,EAEAtB,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/ColorScheme'\nimport { Pagination as PaginationComponent } from '../../pagination/Pagination'\nimport { Text } from '../../text/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    getExpandedRowModel,\n    getRowModel,\n    setPageIndex,\n    getTotalRows,\n    getPageCount,\n    asyncDataState,\n    hasAsyncData\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  // Show pagination only if total pages are more than 1\n  const showPagination = hasAsyncData\n    ? getPageCount() > 1\n    : getExpandedRowModel().rows.length / paginationState.pageSize > 1\n\n  if (isEmpty || !showPagination) return null\n  const totalVisibleRows = getExpandedRowModel().rows.length\n\n  const start =\n    totalVisibleRows === 0\n      ? 0\n      : paginationState.pageIndex * paginationState.pageSize + 1\n\n  const asyncRowCount = getRowModel().rows.length\n  const end = hasAsyncData\n    ? asyncRowCount === 0\n      ? start\n      : start + asyncRowCount - 1\n    : Math.min(start + paginationState.pageSize - 1, totalVisibleRows)\n\n  // indexing for the pagination component is 1 based\n  const setPage = (index: number) => {\n    setPageIndex(index - 1)\n  }\n\n  const pageCount = hasAsyncData\n    ? getPageCount()\n    : Math.max(1, Math.ceil(totalVisibleRows / paginationState.pageSize))\n\n  return (\n    <StyledNav {...props}>\n      <Text size=\"sm\">{`${start} - ${end} of ${\n        hasAsyncData ? getTotalRows() : totalVisibleRows\n      } items`}</Text>\n      <PaginationComponent\n        colorScheme={colorScheme}\n        selectedPage={paginationState.pageIndex + 1}\n        pagesCount={pageCount}\n        onSelectedPageChange={setPage}\n      />\n    </StyledNav>\n  )\n}\n\nPagination.displayName = 'Pagination'\n"],"names":["StyledNav","styled","Pagination","colorScheme","props","applyPagination","getState","getExpandedRowModel","getRowModel","setPageIndex","getTotalRows","getPageCount","asyncDataState","hasAsyncData","useDataTable","React","paginationState","isEmpty","AsyncDataState","showPagination","totalVisibleRows","start","asyncRowCount","end","setPage","index","pageCount","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,oBAAAC,EACA,YAAAC,EACA,aAAAC,EACA,aAAAC,EACA,aAAAC,EACA,eAAAC,EACA,aAAAC,CACF,EAAIC,IAEJC,EAAM,UAAU,IAAM,CACpBV,EAAgB,CAClB,EAAG,CAACA,CAAe,CAAC,EAEpB,KAAM,CAAE,WAAYW,CAAgB,EAAIV,EAAS,EAE3CW,EADYL,IAAmBM,EAAe,SACtBR,MAAmB,EAE3CS,EAAiBN,EACnBF,EAAa,EAAI,EACjBJ,EAAsB,EAAA,KAAK,OAASS,EAAgB,SAAW,EAEnE,GAAIC,GAAW,CAACE,EAAgB,OAAO,KACvC,MAAMC,EAAmBb,EAAoB,EAAE,KAAK,OAE9Cc,EACJD,IAAqB,EACjB,EACAJ,EAAgB,UAAYA,EAAgB,SAAW,EAEvDM,EAAgBd,EAAY,EAAE,KAAK,OACnCe,EAAMV,EACRS,IAAkB,EAChBD,EACAA,EAAQC,EAAgB,EAC1B,KAAK,IAAID,EAAQL,EAAgB,SAAW,EAAGI,CAAgB,EAG7DI,EAAWC,GAAkB,CACjChB,EAAagB,EAAQ,CAAC,CACxB,EAEMC,EAAYb,EACdF,EACA,EAAA,KAAK,IAAI,EAAG,KAAK,KAAKS,EAAmBJ,EAAgB,QAAQ,CAAC,EAEtE,OACED,EAAA,cAACf,EAAA,CAAW,GAAGI,CAAAA,EACbW,EAAA,cAACY,EAAA,CAAK,KAAK,IAAM,EAAA,GAAGN,CAAK,MAAME,CAAG,OAChCV,EAAeH,EAAa,EAAIU,CAClC,QAAS,EACTL,EAAA,cAACa,EAAA,CACC,YAAazB,EACb,aAAca,EAAgB,UAAY,EAC1C,WAAYU,EACZ,qBAAsBF,EACxB,CACF,CAEJ,EAEAtB,EAAW,YAAc"}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { DateInputProps } from '../../components/date-input';
-import { FieldElementWrapperProps } from '../../components/field-wrapper';
+import { DateInputProps } from '../../components/date-input/DateInput';
+import { FieldElementWrapperProps } from '../../components/field-wrapper/FieldWrapper';
 type DateFieldProps = DateInputProps & FieldElementWrapperProps;
 export declare const DateField: {
     ({ className, hideLabel, label, name, validation, prompt, description, appearance, ...remainingProps }: DateFieldProps): React.JSX.Element;

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

@@ -1,2 +1,2 @@
-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};
+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{useFieldError as D}from"../form/useFieldError.js";const p=({className:l,hideLabel:m,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:l,description:s,error:i,fieldId:e,hideLabel:m,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  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"}
+{"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/DateInput'\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\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":"yPAYa,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.js

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