@atom-learning/components 5.1.1 → 5.1.2

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

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

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

@@ -0,0 +1,2 @@
+import*as a from"react";import{styled as e}from"../../stitches.js";import{Loader as r}from"../loader/Loader.js";import{AsyncDataState as m}from"./DataTable.types.js";import{useDataTable as n}from"./DataTableContext.js";const s=e(r,{position:"absolute",left:"50%",top:"50%",transform:"translate(-50%, -50%)",zIndex:1}),l=t=>{const{asyncDataState:o}=n();return o!==m.PENDING?null:a.createElement(s,{...t})};export{l as DataTableLoading};
+//# sourceMappingURL=DataTableLoading.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableLoading.js","sources":["../../../src/components/data-table/DataTableLoading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Loader } from '../loader'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\n\nconst PendingState = styled(Loader, {\n  position: 'absolute',\n  left: '50%',\n  top: '50%',\n  transform: 'translate(-50%, -50%)',\n  zIndex: 1\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":"2NAQA,MAAMA,EAAeC,EAAOC,EAAQ,CAClC,SAAU,WACV,KAAM,MACN,IAAK,MACL,UAAW,wBACX,OAAQ,CACV,CAAC,EAEYC,EACXC,GACG,CACH,KAAM,CAAE,eAAAC,CAAe,EAAIC,EAAAA,EAE3B,OAAID,IAAmBE,EAAe,QAAgB,KAE/CC,EAAA,cAACR,EAAA,CAAc,GAAGI,CAAAA,CAAO,CAClC"}

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { CSS } from '../../stitches';
+export declare const DataTableMetaData: ({ copy, css }: {
+    copy?: {
+        sorted_by?: string;
+        ascending?: string;
+        descending?: string;
+        separator?: string;
+    };
+    sortLabel?: string;
+    css?: CSS;
+}) => React.JSX.Element;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableMetaData.js","sources":["../../../src/components/data-table/DataTableMetaData.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport type { CSS } from '~/stitches'\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  css\n}: {\n  copy?: {\n    sorted_by?: string\n    ascending?: string\n    descending?: string\n    separator?: string\n  }\n  sortLabel?: string\n  css?: CSS\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\" css={css}>{`${selectedRows || totalRows} ${\n      (selectedRows || totalRows) === 1 ? 'item' : 'items'\n    } ${selectedRows ? 'selected' : ''} ${\n      isSorted ? getSortingString(sorting) : ''\n    }`}</Text>\n  )\n}\n"],"names":["defaultCopy","DataTableMetaData","copy","css","_a","_b","getState","columns","getRowModel","rowSelection","useDataTable","sorting","isSorted","totalRows","selectedRows","copyMerged","getColumnDisplayName","id","sortedColumn","col","React","Text"],"mappings":"2IAOA,MAAMA,EAAc,CAClB,UAAW,YACX,UAAW,YACX,WAAY,aACZ,UAAW,GACb,EAEaC,EAAoB,CAAC,CAChC,KAAAC,EACA,IAAAC,CACF,IASM,CA1BN,IAAAC,EAAAC,EA2BE,KAAM,CAAE,SAAAC,EAAU,QAAAC,EAAS,YAAAC,EAAa,aAAAC,CAAa,EAAIC,EAAa,EAChE,CAAE,QAAAC,CAAQ,EAAIL,EAAAA,EACdM,EAAWD,EAAQ,OAAS,EAE5BE,GAAYR,GAAAD,EAAAI,EAAAA,IAAA,KAAA,OAAAJ,EAAe,OAAf,KAAA,OAAAC,EAAqB,OAEjCS,EAAe,OAAO,KAAKL,GAAgB,CAAA,CAAE,EAAE,OAE/CM,EAAa,CAAE,GAAGf,EAAa,GAAGE,CAAK,EAEvCc,EAAwBC,GAAe,CAC3C,MAAMC,EAAeX,EAAQ,KAAMY,GAAQA,EAAI,KAAOF,CAAE,EACxD,OAAOC,GAAA,KAAA,OAAAA,EAAc,SAAUD,CACjC,EAUA,OACEG,EAAA,cAACC,EAAA,CAAK,OAAO,OAAO,IAAKlB,CAAM,EAAA,GAAGW,GAAgBD,MAC/CC,GAAgBD,KAAe,EAAI,OAAS,WAC3CC,EAAe,WAAa,MAC9BF,GAZsBD,GACjB,GAAGI,EAAW,aACnBA,EAAW,aACTC,EAAqBL,EAAQ,GAAG,EAAE,KACpCA,EAAQ,GAAG,KAAOI,EAAW,WAAaA,EAAW,aAQzBJ,CAAO,EAAI,IACtC,CAEP"}

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

@@ -0,0 +1,7 @@
+import type { Row } from '@tanstack/react-table';
+import * as React from 'react';
+import { Table } from '../table';
+export type DataTableRowProps = React.ComponentProps<typeof Table.Row> & {
+    row: Row<Record<string, unknown>>;
+};
+export declare const DataTableRow: ({ row }: DataTableRowProps) => React.JSX.Element;

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

@@ -0,0 +1,2 @@
+import{ChevronDown as m,ChevronRight as p}from"@atom-learning/icons";import*as t from"react";import{styled as g}from"../../stitches.js";import{Icon as b}from"../icon/Icon.js";import{Table as a}from"../table/Table.js";import{useDataTable as C}from"./DataTableContext.js";import{DataTableDataCell as w}from"./DataTableDataCell.js";import{DataTableRowSelectionCheckbox as E}from"./DataTableRowSelectionCheckbox.js";const S=g(a.Row,{bg:"initial",variants:{isSelected:{true:{bg:"$primary100 !important"}},isDisabled:{true:{opacity:"30%"}}}}),f=({row:e})=>{const{enableRowSelection:r,disabledRows:o,getCanSomeRowsExpand:i}=C(),n=!!(o!=null&&o[e.id]),d=e.getToggleExpandedHandler(),s=e.getToggleSelectedHandler(),c=()=>e.getIsSomeSelected()?"indeterminate":e.getIsSelected();return t.createElement(S,{isSelected:e.getIsSelected(),isDisabled:n},i()&&t.createElement(a.Cell,{"data-testid":`expand-icon-${e.id}`,css:{width:"$4",cursor:e.getCanExpand()?"pointer":"auto"},onClick:d},e.getCanExpand()&&t.createElement(b,{is:e.getIsExpanded()?m:p})),r&&t.createElement(a.Cell,{css:{width:"$4"}},t.createElement(E,{row:e,checked:c(),onCheckedChange:s})),e.getVisibleCells().map((l,h)=>t.createElement(w,{key:l.id,cell:l})))};export{f as DataTableRow};
+//# sourceMappingURL=DataTableRow.js.map

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

@@ -0,0 +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 * as React from 'react'\n\nimport { styled } from '~/stitches'\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}\n\nconst StyledRow = styled(Table.Row, {\n  bg: 'initial',\n  variants: {\n    isSelected: {\n      true: {\n        // the !important rule is needed because the bg property is set elsewhere and it's more specific than this one would be without the !important modifier.\n        bg: '$primary100 !important'\n      }\n    },\n    isDisabled: {\n      true: {\n        opacity: '30%'\n      }\n    }\n  }\n})\n\nexport const DataTableRow = ({ row }: 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  return (\n    <StyledRow isSelected={row.getIsSelected()} isDisabled={isDisabled}>\n      {getCanSomeRowsExpand() && (\n        <Table.Cell\n          data-testid={`expand-icon-${row.id}`}\n          css={{ width: '$4', cursor: row.getCanExpand() ? 'pointer' : 'auto' }}\n          onClick={toggleExpandHandler}\n        >\n          {row.getCanExpand() && (\n            <Icon is={row.getIsExpanded() ? ChevronDown : ChevronRight} />\n          )}\n        </Table.Cell>\n      )}\n\n      {enableRowSelection && (\n        <Table.Cell css={{ width: '$4' }}>\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","DataTableRow","row","enableRowSelection","disabledRows","getCanSomeRowsExpand","useDataTable","isDisabled","toggleExpandHandler","toggleSelectHandler","getCheckedState","React","Icon","ChevronDown","ChevronRight","DataTableRowSelectionCheckbox","cell","i","DataTableDataCell"],"mappings":"4ZAgBA,MAAMA,EAAYC,EAAOC,EAAM,IAAK,CAClC,GAAI,UACJ,SAAU,CACR,WAAY,CACV,KAAM,CAEJ,GAAI,wBACN,CACF,EACA,WAAY,CACV,KAAM,CACJ,QAAS,KACX,CACF,CACF,CACF,CAAC,EAEYC,EAAe,CAAC,CAAE,IAAAC,CAAI,IAAyB,CAC1D,KAAM,CAAE,mBAAAC,EAAoB,aAAAC,EAAc,qBAAAC,CAAqB,EAC7DC,IAEIC,EAAa,CAAC,EAACH,GAAA,MAAAA,EAAeF,EAAI,KAElCM,EAAsBN,EAAI,yBAAA,EAC1BO,EAAsBP,EAAI,yBAAyB,EAEnDQ,EAAkB,IAClBR,EAAI,kBAAkB,EAAU,gBAC7BA,EAAI,gBAGb,OACES,EAAA,cAACb,EAAA,CAAU,WAAYI,EAAI,gBAAiB,WAAYK,CAAAA,EACrDF,KACCM,EAAA,cAACX,EAAM,KAAN,CACC,cAAa,eAAeE,EAAI,KAChC,IAAK,CAAE,MAAO,KAAM,OAAQA,EAAI,aAAa,EAAI,UAAY,MAAO,EACpE,QAASM,CAERN,EAAAA,EAAI,aACHS,GAAAA,EAAA,cAACC,EAAA,CAAK,GAAIV,EAAI,cAAc,EAAIW,EAAcC,CAAc,CAAA,CAEhE,EAGDX,GACCQ,EAAA,cAACX,EAAM,KAAN,CAAW,IAAK,CAAE,MAAO,IAAK,CAAA,EAC7BW,EAAA,cAACI,EAAA,CACC,IAAKb,EACL,QAASQ,IACT,gBAAiBD,EACnB,CACF,EAEDP,EAAI,kBAAkB,IAAI,CAACc,EAAMC,IACzBN,EAAA,cAACO,EAAA,CAAkB,IAAKF,EAAK,GAAI,KAAMA,CAAAA,CAAM,CACrD,CACH,CAEJ"}

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

@@ -0,0 +1,8 @@
+import type { Row } from '@tanstack/react-table';
+import * as React from 'react';
+export declare const DataTableRowSelectionCheckbox: ({ row, checked, onCheckedChange, label }: {
+    row: Row<Record<string, unknown>>;
+    checked: boolean | "indeterminate";
+    onCheckedChange: (value: boolean) => void;
+    label?: string;
+}) => React.ReactElement;

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

@@ -0,0 +1,2 @@
+import*as c from"@radix-ui/react-visually-hidden";import*as t from"react";import{Checkbox as n}from"../checkbox/Checkbox.js";import{Label as m}from"../label/Label.js";import{useDataTable as i}from"./DataTableContext.js";const d=({row:e,checked:l,onCheckedChange:r,label:a=`Row ${e.id} selection`})=>{const{tableId:o}=i();return t.createElement(t.Fragment,null,t.createElement(c.Root,null,t.createElement(m,{htmlFor:`${o}_row_${e.id}_selection`},a)),t.createElement(n,{css:{ml:e.depth?`$${e.depth*2}`:0},checked:l,onCheckedChange:r,name:`${o}_row_${e.id}_selection`,disabled:!e.getCanSelect()}))};export{d as DataTableRowSelectionCheckbox};
+//# sourceMappingURL=DataTableRowSelectionCheckbox.js.map

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

@@ -0,0 +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        css={{ ml: row.depth ? `$${row.depth * 2}` : 0 }}\n        checked={checked}\n        onCheckedChange={onCheckedChange}\n        name={`${tableId}_row_${row.id}_selection`}\n        disabled={!row.getCanSelect()}\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,cACrB,IAK0B,CACxB,KAAM,CAAE,QAAAI,CAAQ,EAAIC,EAAAA,EAEpB,OACEC,EAAA,cAAAA,EAAA,SAAA,KACEA,EAAA,cAACC,EAAe,KAAf,KACCD,EAAA,cAACE,EAAA,CAAM,QAAS,GAAGJ,SAAeJ,EAAI,cAAiBG,EAAAA,CAAM,CAC/D,EACAG,EAAA,cAACG,EAAA,CACC,IAAK,CAAE,GAAIT,EAAI,MAAQ,IAAIA,EAAI,MAAQ,IAAM,CAAE,EAC/C,QAASC,EACT,gBAAiBC,EACjB,KAAM,GAAGE,SAAeJ,EAAI,eAC5B,SAAU,CAACA,EAAI,aACjB,CAAA,CAAA,CACF,CAEJ"}

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

@@ -0,0 +1,4 @@
+import * as React from 'react';
+export declare const DataTableSelectAllRowsCheckbox: ({ label }: {
+    label?: string;
+}) => React.JSX.Element;

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

@@ -0,0 +1,2 @@
+import*as c from"@radix-ui/react-visually-hidden";import*as e from"react";import{Checkbox as s}from"../checkbox/Checkbox.js";import{Label as i}from"../label/Label.js";import{useDataTable as g}from"./DataTableContext.js";const b=({label:r="All rows selection"})=>{const{getIsAllPageRowsSelected:l,getIsSomePageRowsSelected:t,toggleAllPageRowsSelected:o,tableId:a}=g(),m=()=>t()?"indeterminate":!!l(),n=()=>t()?o(!1):o(!l());return e.createElement(e.Fragment,null,e.createElement(c.Root,null,e.createElement(i,{htmlFor:`${a}_all_rows_selection`},r)),e.createElement(s,{checked:m(),onCheckedChange:n,name:`${a}_allRowsSelection`}))};export{b as DataTableSelectAllRowsCheckbox};
+//# sourceMappingURL=DataTableSelectAllRowsCheckbox.js.map

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

@@ -0,0 +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        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,EAEEC,EAAAA,EAAkB,IAClBJ,EAA0B,EAAU,gBACpC,CAAAD,CAAAA,EAAAA,EAIAM,EAAqB,IACrBL,EACKC,EAAAA,EAA0B,EAAK,EAEjCA,EAA0B,CAACF,EAAyB,CAAC,EAG9D,OACEO,EAAA,cAAAA,EAAA,SAAA,KACEA,EAAA,cAACC,EAAe,KAAf,KACCD,EAAA,cAACE,EAAA,CAAM,QAAS,GAAGN,sBAAAA,EAA+BJ,CAAM,CAC1D,EAEAQ,EAAA,cAACG,EAAA,CACC,QAASL,IACT,gBAAiBC,EACjB,KAAM,GAAGH,oBAAAA,CACX,CACF,CAEJ"}

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { CSS } from '../../stitches';
+import { Table } from '../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'>> & {
+    scrollOptions?: {
+        hasStickyHeader?: boolean;
+        headerCss?: CSS;
+        numberOfStickyColumns?: number;
+        scrollContainerCss?: CSS;
+    };
+};
+export declare const DataTableTable: ({ sortable, striped, theme, css, scrollOptions, ...props }: DataTableTableProps) => React.JSX.Element | null;

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

@@ -0,0 +1,2 @@
+import*as e from"react";import{Table as f}from"../table/Table.js";import{DataTable as s}from"./DataTable.js";import{AsyncDataState as S}from"./DataTable.types.js";import{useDataTable as E}from"./DataTableContext.js";import{DataTableLoading as k}from"./DataTableLoading.js";const D=({sortable:l,striped:m,theme:c,css:i,scrollOptions:t={numberOfStickyColumns:0,hasStickyHeader:!1},...p})=>{const{asyncDataState:u,getTotalRows:b,getCanSomeRowsExpand:r,enableRowSelection:n,tableId:y}=E(),o=u===S.PENDING,C=!o&&b()===0,d=()=>{let a=0;return r()&&!!n?a=2:(r()||!!n)&&(a=1),`${y}_${a}_control_columns`};return C?null:e.createElement(e.Fragment,null,e.createElement(k,null),e.createElement(f,{...p,numberOfStickyColumns:t.numberOfStickyColumns,scrollContainerCss:t.scrollContainerCss,scrollContainerkey:d(),css:{...i,...o&&{opacity:.5,pointerEvents:"none",transition:"opacity 250ms linear 150ms"}}},e.createElement(s.Head,{theme:c,sortable:l,isSticky:t.hasStickyHeader,css:t.headerCss}),e.createElement(s.Body,{striped:m})))};export{D as DataTableTable};
+//# sourceMappingURL=DataTableTable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableTable.js","sources":["../../../src/components/data-table/DataTableTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS } from '~/stitches'\n\nimport { Table } from '../table'\nimport { TableBody } from '../table/TableBody'\nimport { DataTable } from './DataTable'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableLoading } from './DataTableLoading'\n\nexport type DataTableTableProps = Omit<\n  React.ComponentProps<typeof Table>,\n  'children' | 'numberOfStickyColumns'\n> &\n  Partial<\n    Pick<React.ComponentProps<typeof DataTableHead>, 'theme' | 'sortable'>\n  > &\n  Partial<Pick<React.ComponentProps<typeof TableBody>, 'striped'>> & {\n    scrollOptions?: {\n      hasStickyHeader?: boolean\n      headerCss?: CSS\n      numberOfStickyColumns?: number\n      scrollContainerCss?: CSS\n    }\n  }\n\nexport const DataTableTable = ({\n  sortable,\n  striped,\n  theme,\n  css,\n  scrollOptions = {\n    numberOfStickyColumns: 0,\n    hasStickyHeader: false\n  },\n  ...props\n}: DataTableTableProps) => {\n  const {\n    asyncDataState,\n    getTotalRows,\n    getCanSomeRowsExpand,\n    enableRowSelection,\n    tableId\n  } = useDataTable()\n\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  const buildScrollContainerKey = (): string => {\n    let controlColumnCount = 0\n\n    if (getCanSomeRowsExpand() && !!enableRowSelection) {\n      controlColumnCount = 2\n    } else if (getCanSomeRowsExpand() || !!enableRowSelection) {\n      controlColumnCount = 1\n    }\n\n    return `${tableId}_${controlColumnCount}_control_columns`\n  }\n\n  if (isEmpty) return null\n\n  return (\n    <>\n      <DataTableLoading />\n\n      <Table\n        {...props}\n        numberOfStickyColumns={scrollOptions.numberOfStickyColumns}\n        scrollContainerCss={scrollOptions.scrollContainerCss}\n        scrollContainerkey={buildScrollContainerKey()}\n        css={{\n          ...css,\n          ...(isPending && {\n            opacity: 0.5,\n            pointerEvents: 'none',\n            transition: 'opacity 250ms linear 150ms'\n          })\n        }}\n      >\n        <DataTable.Head\n          theme={theme}\n          sortable={sortable}\n          isSticky={scrollOptions.hasStickyHeader}\n          css={scrollOptions.headerCss}\n        />\n        <DataTable.Body striped={striped} />\n      </Table>\n    </>\n  )\n}\n"],"names":["DataTableTable","sortable","striped","theme","css","scrollOptions","props","asyncDataState","getTotalRows","getCanSomeRowsExpand","enableRowSelection","tableId","useDataTable","isPending","AsyncDataState","isEmpty","buildScrollContainerKey","controlColumnCount","React","DataTableLoading","Table","DataTable"],"mappings":"iRA4BO,MAAMA,EAAiB,CAAC,CAC7B,SAAAC,EACA,QAAAC,EACA,MAAAC,EACA,IAAAC,EACA,cAAAC,EAAgB,CACd,sBAAuB,EACvB,gBAAiB,EACnB,KACGC,CACL,IAA2B,CACzB,KAAM,CACJ,eAAAC,EACA,aAAAC,EACA,qBAAAC,EACA,mBAAAC,EACA,QAAAC,CACF,EAAIC,EAAa,EAEXC,EAAYN,IAAmBO,EAAe,QAC9CC,EAAU,CAACF,GAAaL,EAAmB,IAAA,EAE3CQ,EAA0B,IAAc,CAC5C,IAAIC,EAAqB,EAEzB,OAAIR,EAAAA,GAA0B,CAAC,CAACC,EAC9BO,EAAqB,GACZR,EAAqB,GAAK,CAAC,CAACC,KACrCO,EAAqB,GAGhB,GAAGN,KAAWM,mBACvB,EAEA,OAAIF,EAAgB,KAGlBG,EAAA,cAAAA,EAAA,SACEA,KAAAA,EAAA,cAACC,EAAA,IAAiB,EAElBD,EAAA,cAACE,EAAA,CACE,GAAGd,EACJ,sBAAuBD,EAAc,sBACrC,mBAAoBA,EAAc,mBAClC,mBAAoBW,EAAwB,EAC5C,IAAK,CACH,GAAGZ,EACH,GAAIS,GAAa,CACf,QAAS,GACT,cAAe,OACf,WAAY,4BACd,CACF,CAAA,EAEAK,EAAA,cAACG,EAAU,KAAV,CACC,MAAOlB,EACP,SAAUF,EACV,SAAUI,EAAc,gBACxB,IAAKA,EAAc,SACrB,CAAA,EACAa,EAAA,cAACG,EAAU,KAAV,CAAe,QAASnB,CAAS,CAAA,CACpC,CACF,CAEJ"}

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,2 @@
+import*as o from"react";import{Table as d}from"../../table/Table.js";import{useDataTable as i}from"../DataTableContext.js";import{DragAndDropTableRow as p}from"./DragAndDropTableRow.js";const l=({striped:r=!1,idColumn:t="id",...m})=>{const{getRowModel:a}=i();return o.createElement(d.Body,{...m,striped:r},a().rows.map(e=>o.createElement(p,{row:e,key:e.id,idColumn:t})))};export{l as DragAndDropTableBody};
+//# sourceMappingURL=DragAndDropTableBody.js.map

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

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

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

@@ -0,0 +1,8 @@
+import type { Row } from '@tanstack/react-table';
+import * as React from 'react';
+import { Table } from '../../table';
+export type DataTableDraggableRowProps = React.ComponentProps<typeof Table.Row> & {
+    row: Row<Record<string, unknown>>;
+    idColumn?: string;
+};
+export declare const DragAndDropTableRow: ({ row, idColumn }: DataTableDraggableRowProps) => React.JSX.Element;

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

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

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

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

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

@@ -0,0 +1 @@
+export { DragAndDropTable } from './DragAndDropTable';

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

@@ -0,0 +1,3 @@
+import type { PaginationState, SortingState } from '@tanstack/react-table';
+import type { TAsyncDataOptions, TAsyncDataResult, TGetAsyncData } from './DataTable.types';
+export declare const getNewAsyncData: (getAsyncData: TGetAsyncData, asyncDataOptions: Partial<TAsyncDataOptions>, paginationState: PaginationState, sorting: SortingState, globalFilter: string) => Promise<TAsyncDataResult | undefined>;

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

@@ -0,0 +1,2 @@
+import c from"invariant";const h=e=>{if(e[0])return e[0].desc?"desc":"asc"},m=async(e,t,g,n,p)=>{var l,o,a,i,u,s;const{pageIndex:d,pageSize:y}=g,b={pageIndex:(l=t==null?void 0:t.pageIndex)!=null?l:d,pageSize:(o=t==null?void 0:t.pageSize)!=null?o:y,sortBy:(i=t==null?void 0:t.sortBy)!=null?i:(a=n[0])==null?void 0:a.id,sortDirection:(u=t==null?void 0:t.sortDirection)!=null?u:h(n),globalFilter:(s=t.globalFilter)!=null?s:p},r=await e(b);return c(Array.isArray(r==null?void 0:r.results),"The getAsyncData function must return an object with a property `result` which must be an array"),c(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{m as getNewAsyncData};
+//# sourceMappingURL=getNewAsyncData.js.map

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

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

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

@@ -0,0 +1,2 @@
+export { useDataTable } from './DataTableContext';
+export { DataTable } from './DataTable';