@atom-learning/components 2.66.13 → 2.67.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +3 -3
- package/dist/components/banner/banner-regular/BannerRegularActions.d.ts +2 -2
- package/dist/components/banner/banner-regular/BannerRegularActions.js +1 -1
- package/dist/components/banner/banner-regular/BannerRegularActions.js.map +1 -1
- package/dist/components/data-table/DataTableBulkActions.d.ts +1 -1
- package/dist/components/data-table/DataTableBulkActions.js +1 -1
- package/dist/components/data-table/DataTableBulkActions.js.map +1 -1
- package/dist/components/data-table/DataTableContext.js +1 -1
- package/dist/components/data-table/DataTableContext.js.map +1 -1
- package/dist/components/data-table/DataTableHead.js +1 -1
- package/dist/components/data-table/DataTableHead.js.map +1 -1
- package/dist/components/data-table/DataTableRow.js +1 -1
- package/dist/components/data-table/DataTableRow.js.map +1 -1
- package/dist/components/data-table/DataTableRowSelectionCheckbox.d.ts +3 -2
- package/dist/components/data-table/DataTableRowSelectionCheckbox.js +1 -1
- package/dist/components/data-table/DataTableRowSelectionCheckbox.js.map +1 -1
- package/dist/docgen.json +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/dist/utilities/uri/index.js +1 -1
- package/dist/utilities/uri/index.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
|
|
1
|
+
# [2.67.0](https://github.com/Atom-Learning/components/compare/v2.66.14...v2.67.0) (2023-09-12)
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
###
|
|
4
|
+
### Features
|
|
5
5
|
|
|
6
|
-
*
|
|
6
|
+
* add subRow support to DataTable SP-1745 ([4f7cff0](https://github.com/Atom-Learning/components/commit/4f7cff09bb98c54b886803670fb7b187fbe55389))
|
|
7
7
|
|
|
8
8
|
# [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
|
|
9
9
|
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
3
|
-
export declare const BannerRegularActions: React.FC<React.ComponentProps<typeof
|
|
2
|
+
import { Flex } from '../../flex';
|
|
3
|
+
export declare const BannerRegularActions: React.FC<React.ComponentProps<typeof Flex>>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import a from"invariant";import*as n from"react";import{overrideStitchesVariantValue as m}from"../../../utilities/override-stitches-variant-value/overrideStitchesVariantValue.js";import{Flex as y}from"../../flex/Flex.js";import{useBannerContext as f}from"../BannerContext.js";import{BannerRegularButton as t}from"./BannerRegularButton.js";const l=2,h={sm:2,md:4},N={sm:"column",md:"row"},r=({children:i,...s})=>{const{size:o}=f(),p=n.useMemo(()=>m(o,e=>h[e]),[o]),d=n.useMemo(()=>m(o,e=>N[e]),[o]);return a(n.Children.count(i)<=l,`A maximum of ${l} ${t.displayName} component(s) are permitted as children of ${r.displayName}`),n.createElement(y,{gap:p,direction:d,...s},n.Children.map(i,(e,c)=>{if(e==null)return e;if(!n.isValidElement(e))throw new Error(`Child passed to ${r.displayName} is not a valid element`);a(e.type===t,`Children of type ${e==null?void 0:e.type} aren't permitted. Only an ${t.displayName} component is allowed in ${r.displayName}`);const u={appearance:c>0?"outline":void 0};return n.cloneElement(e,u)}))};r.displayName="BannerRegularActions";export{r as BannerRegularActions};
|
|
2
2
|
//# sourceMappingURL=BannerRegularActions.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerRegularActions.js","sources":["../../../../src/components/banner/banner-regular/BannerRegularActions.tsx"],"sourcesContent":["import invariant from 'invariant'\nimport * as React from 'react'\n\nimport { overrideStitchesVariantValue } from '~/utilities/override-stitches-variant-value/overrideStitchesVariantValue'\n\nimport {
|
|
1
|
+
{"version":3,"file":"BannerRegularActions.js","sources":["../../../../src/components/banner/banner-regular/BannerRegularActions.tsx"],"sourcesContent":["import invariant from 'invariant'\nimport * as React from 'react'\n\nimport { overrideStitchesVariantValue } from '~/utilities/override-stitches-variant-value/overrideStitchesVariantValue'\n\nimport { Flex } from '../../flex'\nimport { useBannerContext } from '../BannerContext'\nimport { BannerRegularButton } from './BannerRegularButton'\n\nconst MAX_ALLOWED_CHILDREN = 2\n\nconst toGap = {\n sm: 2,\n md: 4\n}\n\nconst toDirection = {\n sm: 'column',\n md: 'row'\n}\n\nexport const BannerRegularActions: React.FC<\n React.ComponentProps<typeof Flex>\n> = ({ children, ...props }) => {\n const { size } = useBannerContext()\n\n const gap = React.useMemo(\n () => overrideStitchesVariantValue(size, (s) => toGap[s]),\n [size]\n )\n\n const direction = React.useMemo(\n () => overrideStitchesVariantValue(size, (s) => toDirection[s]),\n [size]\n )\n\n invariant(\n React.Children.count(children) <= MAX_ALLOWED_CHILDREN,\n `A maximum of ${MAX_ALLOWED_CHILDREN} ${BannerRegularButton.displayName} component(s) are permitted as children of ${BannerRegularActions.displayName}`\n )\n\n return (\n <Flex gap={gap} direction={direction} {...props}>\n {React.Children.map(children, (child, index) => {\n // if child is undefined or null, React.isValidElement returns false and hence error is thrown.\n // This line will prevent that from happening\n if (child == null) return child\n\n if (!React.isValidElement(child)) {\n throw new Error(\n `Child passed to ${BannerRegularActions.displayName} is not a valid element`\n )\n }\n\n invariant(\n child.type === BannerRegularButton,\n `Children of type ${child?.type} aren't permitted. Only an ${BannerRegularButton.displayName} component is allowed in ${BannerRegularActions.displayName}`\n )\n\n const propsToInject: Partial<\n React.ComponentProps<typeof BannerRegularButton>\n > = {\n // Override button appearance - make the second button outlined\n appearance: index > 0 ? 'outline' : undefined\n }\n\n return React.cloneElement(\n child as React.ReactElement<\n React.ComponentProps<typeof BannerRegularButton>\n >,\n propsToInject\n )\n })}\n </Flex>\n )\n}\n\nBannerRegularActions.displayName = 'BannerRegularActions'\n"],"names":["MAX_ALLOWED_CHILDREN","toGap","toDirection","BannerRegularActions","children","props","size","useBannerContext","gap","React","overrideStitchesVariantValue","s","direction","invariant","BannerRegularButton","Flex","child","index","propsToInject"],"mappings":"mVASA,MAAMA,EAAuB,EAEvBC,EAAQ,CACZ,GAAI,EACJ,GAAI,CACN,EAEMC,EAAc,CAClB,GAAI,SACJ,GAAI,KACN,EAEaC,EAET,CAAC,CAAE,SAAAC,KAAaC,CAAM,IAAM,CAC9B,KAAM,CAAE,KAAAC,CAAK,EAAIC,IAEXC,EAAMC,EAAM,QAChB,IAAMC,EAA6BJ,EAAOK,GAAMV,EAAMU,EAAE,EACxD,CAACL,CAAI,CACP,EAEMM,EAAYH,EAAM,QACtB,IAAMC,EAA6BJ,EAAOK,GAAMT,EAAYS,EAAE,EAC9D,CAACL,CAAI,CACP,EAEA,OAAAO,EACEJ,EAAM,SAAS,MAAML,CAAQ,GAAKJ,EAClC,gBAAgBA,KAAwBc,EAAoB,yDAAyDX,EAAqB,aAC5I,EAGEM,EAAA,cAACM,EAAA,CAAK,IAAKP,EAAK,UAAWI,EAAY,GAAGP,GACvCI,EAAM,SAAS,IAAIL,EAAU,CAACY,EAAOC,IAAU,CAG9C,GAAID,GAAS,KAAM,OAAOA,EAE1B,GAAI,CAACP,EAAM,eAAeO,CAAK,EAC7B,MAAM,IAAI,MACR,mBAAmBb,EAAqB,oCAC1C,EAGFU,EACEG,EAAM,OAASF,EACf,oBAAoBE,GAAA,KAAAA,OAAAA,EAAO,kCAAkCF,EAAoB,uCAAuCX,EAAqB,aAC/I,EAEA,MAAMe,EAEF,CAEF,WAAYD,EAAQ,EAAI,UAAY,MACtC,EAEA,OAAOR,EAAM,aACXO,EAGAE,CACF,CACF,CAAC,CACH,CAEJ,EAEAf,EAAqB,YAAc"}
|
|
@@ -2,7 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
import { CSS } from '../../stitches';
|
|
3
3
|
interface DataTableBulkActionsProps {
|
|
4
4
|
css?: CSS;
|
|
5
|
-
children: [
|
|
5
|
+
children: React.ReactElement<React.ComponentProps<typeof BulkActionsDefaultActions>> | React.ReactElement<React.ComponentProps<typeof BulkActionsSelectedRowActions>> | [
|
|
6
6
|
React.ReactElement<React.ComponentProps<typeof BulkActionsDefaultActions>>,
|
|
7
7
|
React.ReactElement<React.ComponentProps<typeof BulkActionsSelectedRowActions>>
|
|
8
8
|
];
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as e from"react";import{Button as s}from"../button/Button.js";import{Divider as m}from"../divider/Divider.js";import{styled as u}from"../../stitches.js";import{Flex as i}from"../flex/Flex.js";import{useDataTable as o}from"./DataTableContext.js";import{DataTable as d}from"./DataTable.js";const b=u(i,{p:"$2",width:"100%",mb:"$2",justifyContent:"space-between",alignItems:"center",minHeight:"$6",borderTopLeftRadius:"$0",borderTopRightRadius:"$0",variants:{isRowSelected:{true:{bg:"$blue100"}}}}),
|
|
1
|
+
import*as e from"react";import{Button as s}from"../button/Button.js";import{Divider as m}from"../divider/Divider.js";import{styled as u}from"../../stitches.js";import{Flex as i}from"../flex/Flex.js";import{useDataTable as o}from"./DataTableContext.js";import{DataTable as d}from"./DataTable.js";const b=u(i,{p:"$2",width:"100%",mb:"$2",justifyContent:"space-between",alignItems:"center",minHeight:"$6",borderTopLeftRadius:"$0",borderTopRightRadius:"$0",variants:{isRowSelected:{true:{bg:"$blue100"}}}}),p=({children:n})=>{const{rowSelection:t}=o();return Object.keys(t||{}).length>0?null:n},f=({cancelLabel:n="Cancel",children:t})=>{const{toggleAllPageRowsSelected:l,rowSelection:r}=o(),a=()=>l(!1);return Object.keys(r||{}).length===0?null:e.createElement(e.Fragment,null,t,e.Children.count(t)>0&&e.createElement(m,{orientation:"vertical",css:{mx:"$4"}}),e.createElement(s,{theme:"neutral",onClick:a},n))},c=({children:n,...t})=>{const{rowSelection:l}=o(),r=Object.keys(l||{}).length>0;return e.createElement(b,{isRowSelected:r,...t},e.createElement(d.MetaData,null),e.createElement(i,{css:{justifyContent:"flex-end",alignItems:"center"}},n))};c.DefaultActions=p,c.SelectedRowActions=f;export{c as DataTableBulkActions};
|
|
2
2
|
//# sourceMappingURL=DataTableBulkActions.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableBulkActions.js","sources":["../../../src/components/data-table/DataTableBulkActions.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Button } from '~/components/button'\nimport { Divider } from '~/components/divider'\nimport { CSS, styled } from '~/stitches'\n\nimport { Flex } from '../flex'\nimport { DataTable } from '.'\nimport { useDataTable } from './DataTableContext'\n\ninterface DataTableBulkActionsProps {\n css?: CSS\n children
|
|
1
|
+
{"version":3,"file":"DataTableBulkActions.js","sources":["../../../src/components/data-table/DataTableBulkActions.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Button } from '~/components/button'\nimport { Divider } from '~/components/divider'\nimport { CSS, styled } from '~/stitches'\n\nimport { Flex } from '../flex'\nimport { DataTable } from '.'\nimport { useDataTable } from './DataTableContext'\n\ninterface DataTableBulkActionsProps {\n css?: CSS\n children:\n | React.ReactElement<React.ComponentProps<typeof BulkActionsDefaultActions>>\n | React.ReactElement<\n React.ComponentProps<typeof BulkActionsSelectedRowActions>\n >\n | [\n React.ReactElement<\n React.ComponentProps<typeof BulkActionsDefaultActions>\n >,\n React.ReactElement<\n React.ComponentProps<typeof BulkActionsSelectedRowActions>\n >\n ]\n}\n\ninterface BulkActionsSelectedRowActionsProps {\n cancelLabel?: string\n children: React.ReactNode\n}\n\nconst StyledContainer = styled(Flex, {\n p: '$2',\n width: '100%',\n mb: '$2',\n justifyContent: 'space-between',\n alignItems: 'center',\n minHeight: '$6',\n borderTopLeftRadius: '$0',\n borderTopRightRadius: '$0',\n variants: {\n isRowSelected: {\n true: {\n bg: '$blue100'\n }\n }\n }\n})\n\nconst BulkActionsDefaultActions = ({\n children\n}: {\n children: React.ReactElement\n}): React.ReactElement | null => {\n const { rowSelection } = useDataTable()\n\n if (Object.keys(rowSelection || {}).length > 0) return null\n\n return children\n}\n\nconst BulkActionsSelectedRowActions: React.FC<\n BulkActionsSelectedRowActionsProps\n> = ({ cancelLabel = 'Cancel', children }) => {\n const { toggleAllPageRowsSelected, rowSelection } = useDataTable()\n\n const handleDeselectAllPageRows = () => toggleAllPageRowsSelected(false)\n\n if (Object.keys(rowSelection || {}).length === 0) return null\n\n return (\n <>\n {children}\n {React.Children.count(children) > 0 && (\n <Divider orientation=\"vertical\" css={{ mx: '$4' }} />\n )}\n <Button theme=\"neutral\" onClick={handleDeselectAllPageRows}>\n {cancelLabel}\n </Button>\n </>\n )\n}\n\nexport const DataTableBulkActions: React.FC<DataTableBulkActionsProps> & {\n DefaultActions: typeof BulkActionsDefaultActions\n SelectedRowActions: typeof BulkActionsSelectedRowActions\n} = ({ children, ...rest }) => {\n const { rowSelection } = useDataTable()\n\n const isRowSelected = Object.keys(rowSelection || {}).length > 0\n\n return (\n <StyledContainer isRowSelected={isRowSelected} {...rest}>\n <DataTable.MetaData />\n\n <Flex css={{ justifyContent: 'flex-end', alignItems: 'center' }}>\n {children}\n </Flex>\n </StyledContainer>\n )\n}\n\nDataTableBulkActions.DefaultActions = BulkActionsDefaultActions\nDataTableBulkActions.SelectedRowActions = BulkActionsSelectedRowActions\n"],"names":["StyledContainer","styled","Flex","BulkActionsDefaultActions","children","rowSelection","useDataTable","BulkActionsSelectedRowActions","cancelLabel","toggleAllPageRowsSelected","handleDeselectAllPageRows","React","Divider","Button","DataTableBulkActions","rest","isRowSelected","DataTable"],"mappings":"uSAgCA,MAAMA,EAAkBC,EAAOC,EAAM,CACnC,EAAG,KACH,MAAO,OACP,GAAI,KACJ,eAAgB,gBAChB,WAAY,SACZ,UAAW,KACX,oBAAqB,KACrB,qBAAsB,KACtB,SAAU,CACR,cAAe,CACb,KAAM,CACJ,GAAI,UACN,CACF,CACF,CACF,CAAC,EAEKC,EAA4B,CAAC,CACjC,SAAAC,CACF,IAEiC,CAC/B,KAAM,CAAE,aAAAC,CAAa,EAAIC,IAEzB,OAAI,OAAO,KAAKD,GAAgB,CAAA,CAAE,EAAE,OAAS,EAAU,KAEhDD,CACT,EAEMG,EAEF,CAAC,CAAE,YAAAC,EAAc,SAAU,SAAAJ,CAAS,IAAM,CAC5C,KAAM,CAAE,0BAAAK,EAA2B,aAAAJ,CAAa,EAAIC,EAAa,EAE3DI,EAA4B,IAAMD,EAA0B,EAAK,EAEvE,OAAI,OAAO,KAAKJ,GAAgB,CAAA,CAAE,EAAE,SAAW,EAAU,KAGvDM,EAAA,cAAAA,EAAA,SACGP,KAAAA,EACAO,EAAM,SAAS,MAAMP,CAAQ,EAAI,GAChCO,EAAA,cAACC,EAAA,CAAQ,YAAY,WAAW,IAAK,CAAE,GAAI,IAAK,CAAG,CAAA,EAErDD,EAAA,cAACE,EAAA,CAAO,MAAM,UAAU,QAASH,CAC9BF,EAAAA,CACH,CACF,CAEJ,EAEaM,EAGT,CAAC,CAAE,SAAAV,KAAaW,CAAK,IAAM,CAC7B,KAAM,CAAE,aAAAV,CAAa,EAAIC,EAEnBU,EAAAA,EAAgB,OAAO,KAAKX,GAAgB,CAAE,CAAA,EAAE,OAAS,EAE/D,OACEM,EAAA,cAACX,EAAA,CAAgB,cAAegB,EAAgB,GAAGD,GACjDJ,EAAA,cAACM,EAAU,SAAV,IAAmB,EAEpBN,EAAA,cAACT,EAAA,CAAK,IAAK,CAAE,eAAgB,WAAY,WAAY,QAAS,CAC3DE,EAAAA,CACH,CACF,CAEJ,EAEAU,EAAqB,eAAiBX,EACtCW,EAAqB,mBAAqBP"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{v4 as
|
|
1
|
+
import{v4 as J}from"@lukeed/uuid";import{useReactTable as K,getCoreRowModel as U,getPaginationRowModel as V,getSortedRowModel as j,getFilteredRowModel as q,getExpandedRowModel as H}from"@tanstack/react-table";import*as e from"react";import Q from"use-deep-compare-effect";import{AsyncDataState as i}from"./DataTable.types.js";import{getNewAsyncData as W}from"./getNewAsyncData.js";import{usePagination as X}from"./usePagination.js";import{useSortByColumn as Y}from"./useSorting.js";const M=e.createContext(null),Z=({columns:n,data:t=[],getAsyncData:o,defaultSort:x,initialState:g=void 0,enableRowSelection:u,children:F})=>{var C;const D=e.useRef(J()),[d,c]=e.useState({results:t!=null?t:[],total:(C=t==null?void 0:t.length)!=null?C:0}),[P,I]=e.useState({}),[N,T]=e.useState({}),{isPaginated:r,applyPagination:h,paginationState:a,setPaginationState:L}=X(g==null?void 0:g.pagination),[v,S]=e.useState(i.NONE),[m,A]=e.useState(""),{setIsSortable:G,isSortable:w,sorting:s,setSorting:k}=Y(x),b=e.useCallback(async l=>{if(o)try{S(i.PENDING);const R=await W(o,l,a,s,m);c(R),S(i.FULFILLED)}catch{S(i.REJECTED)}},[o,a==null?void 0:a.pageIndex,a==null?void 0:a.pageSize,s,m]);e.useEffect(()=>{b({})},[b]),Q(()=>{!t||c({results:t,total:t.length})},[t]);const p=()=>d.total,E=K({columns:n,data:d.results,pageCount:a?Math.ceil(p()/a.pageSize):-1,initialState:g,state:{sorting:s,globalFilter:m,pagination:a,rowSelection:P,expanded:N},manualPagination:o&&r,manualSorting:o&&r,enableSorting:v!==i.PENDING,enableGlobalFilter:!o,enableRowSelection:u,onExpandedChange:T,getSubRows:l=>l.subRows,onRowSelectionChange:I,getCoreRowModel:U(),getPaginationRowModel:r?V():void 0,getSortedRowModel:w||s.length?j():void 0,getFilteredRowModel:q(),getExpandedRowModel:H(),onPaginationChange:r?L:void 0,onSortingChange:k,onGlobalFilterChange:A,globalFilterFn:(l,R,O)=>{const y=B=>B.toLowerCase().includes(O.toLowerCase()),f=l.getValue(R);switch(typeof f){case"string":return y(f);case"boolean":case"number":return y(String(f));default:return!1}}}),z=e.useMemo(()=>({...E,columns:n,data:d,setData:c,setIsSortable:G,applyPagination:h,getTotalRows:p,isSortable:w,asyncDataState:v,runAsyncData:b,enableRowSelection:u,rowSelection:P,tableId:D.current}),[E,h,p,w,u,D]);return e.createElement(M.Provider,{value:z},F)},_=()=>{const n=e.useContext(M);if(!n)throw new Error("useDataTable can only be called from inside a DataTableProvider");return n};export{Z as DataTableProvider,_ as useDataTable};
|
|
2
2
|
//# sourceMappingURL=DataTableContext.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableContext.js","sources":["../../../src/components/data-table/DataTableContext.tsx"],"sourcesContent":["import { v4 as uuid } from '@lukeed/uuid'\nimport type {\n PaginationState,\n Row,\n RowSelectionState\n} from '@tanstack/react-table'\nimport {\n getCoreRowModel,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable\n} from '@tanstack/react-table'\nimport * as React from 'react'\nimport useDeepCompareEffect from 'use-deep-compare-effect'\n\nimport {\n AsyncDataState,\n DataTableContextType,\n InitialState,\n TableData,\n TAsyncDataOptions,\n TAsyncDataResult,\n TDefaultSort,\n TGetAsyncData\n} from './DataTable.types'\nimport { getNewAsyncData } from './getNewAsyncData'\nimport { usePagination } from './usePagination'\nimport { useSortByColumn } from './useSorting'\n\nconst DataTableContext =\n React.createContext<DataTableContextType<unknown> | null>(null)\n\ntype DataTableProviderProps = {\n columns\n defaultSort?: TDefaultSort\n children: React.ReactNode\n initialState?: InitialState\n enableRowSelection?: boolean | ((row: Row<unknown>) => boolean)\n} & (\n | { data: TableData; getAsyncData?: never }\n | { data?: never; getAsyncData: TGetAsyncData }\n)\n\nexport const DataTableProvider = ({\n columns,\n data: dataProp = [],\n getAsyncData,\n defaultSort,\n initialState = undefined,\n enableRowSelection,\n children\n}: DataTableProviderProps): JSX.Element => {\n const tableId = React.useRef(uuid())\n\n const [data, setData] = React.useState<TAsyncDataResult>({\n results: dataProp ?? [],\n total: dataProp?.length ?? 0\n })\n\n const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({})\n\n const { isPaginated, applyPagination, paginationState, setPaginationState } =\n usePagination(initialState?.pagination)\n\n const [asyncDataState, setAsyncDataState] = React.useState<AsyncDataState>(\n AsyncDataState.NONE\n )\n\n const [globalFilter, setGlobalFilter] = React.useState<string>('')\n\n const { setIsSortable, isSortable, sorting, setSorting } =\n useSortByColumn(defaultSort)\n\n const runAsyncData = React.useCallback(\n async (overrideAsyncDataOptions: Partial<TAsyncDataOptions>) => {\n if (!getAsyncData) return\n\n try {\n setAsyncDataState(AsyncDataState.PENDING)\n\n const newData = await getNewAsyncData(\n getAsyncData,\n overrideAsyncDataOptions,\n paginationState as PaginationState,\n sorting,\n globalFilter\n )\n\n setData(newData as TAsyncDataResult)\n setAsyncDataState(AsyncDataState.FULFILLED)\n } catch (error) {\n setAsyncDataState(AsyncDataState.REJECTED)\n }\n },\n [\n getAsyncData,\n paginationState?.pageIndex,\n paginationState?.pageSize,\n sorting,\n globalFilter\n ]\n )\n\n React.useEffect(() => {\n runAsyncData({})\n }, [runAsyncData])\n\n useDeepCompareEffect(() => {\n if (!dataProp) return\n\n setData({ results: dataProp, total: dataProp.length })\n }, [dataProp])\n\n const getTotalRows = () => data.total\n\n const table = useReactTable<unknown>({\n columns,\n data: data.results,\n pageCount: paginationState\n ? Math.ceil(getTotalRows() / paginationState.pageSize)\n : -1,\n initialState: initialState,\n state: {\n sorting,\n globalFilter,\n pagination: paginationState,\n rowSelection\n },\n manualPagination: getAsyncData && isPaginated,\n manualSorting: getAsyncData && isPaginated,\n enableSorting: asyncDataState !== AsyncDataState.PENDING,\n enableGlobalFilter: !getAsyncData,\n enableRowSelection,\n onRowSelectionChange: setRowSelection,\n getCoreRowModel: getCoreRowModel(),\n getPaginationRowModel: isPaginated ? getPaginationRowModel() : undefined,\n getSortedRowModel:\n isSortable || sorting.length ? getSortedRowModel() : undefined,\n getFilteredRowModel: getFilteredRowModel(),\n onPaginationChange: isPaginated ? setPaginationState : undefined,\n onSortingChange: setSorting,\n onGlobalFilterChange: setGlobalFilter,\n globalFilterFn: (row, columnId, filterValue) => {\n const checkFilterMatchesCell = (cellValue: string) =>\n cellValue.toLowerCase().includes(filterValue.toLowerCase())\n\n const value = row.getValue(columnId)\n switch (typeof value) {\n case 'string':\n return checkFilterMatchesCell(value)\n case 'boolean':\n case 'number':\n return checkFilterMatchesCell(String(value))\n default:\n return false\n }\n }\n })\n\n const value: DataTableContextType = React.useMemo(() => {\n return {\n ...table,\n columns,\n data,\n setData,\n setIsSortable,\n applyPagination,\n getTotalRows,\n isSortable,\n asyncDataState,\n runAsyncData,\n enableRowSelection,\n rowSelection,\n tableId: tableId.current\n }\n }, [\n table,\n applyPagination,\n getTotalRows,\n isSortable,\n enableRowSelection,\n tableId\n ])\n\n return (\n <DataTableContext.Provider value={value}>\n {children}\n </DataTableContext.Provider>\n )\n}\n\nexport const useDataTable = <T extends Record<string, unknown>>() => {\n const context = React.useContext(DataTableContext) as DataTableContextType<T>\n\n if (!context)\n throw new Error(\n 'useDataTable can only be called from inside a DataTableProvider'\n )\n\n return context\n}\n"],"names":["DataTableContext","React","DataTableProvider","columns","dataProp","getAsyncData","defaultSort","initialState","enableRowSelection","children","_a","tableId","uuid","data","setData","rowSelection","setRowSelection","isPaginated","applyPagination","paginationState","setPaginationState","usePagination","asyncDataState","setAsyncDataState","AsyncDataState","globalFilter","setGlobalFilter","setIsSortable","isSortable","sorting","setSorting","useSortByColumn","runAsyncData","overrideAsyncDataOptions","newData","getNewAsyncData","useDeepCompareEffect","getTotalRows","table","useReactTable","getCoreRowModel","getPaginationRowModel","getSortedRowModel","getFilteredRowModel","
|
|
1
|
+
{"version":3,"file":"DataTableContext.js","sources":["../../../src/components/data-table/DataTableContext.tsx"],"sourcesContent":["import { v4 as uuid } from '@lukeed/uuid'\nimport type {\n PaginationState,\n ExpandedState,\n Row,\n RowSelectionState\n} from '@tanstack/react-table'\nimport {\n getCoreRowModel,\n getExpandedRowModel,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable\n} from '@tanstack/react-table'\nimport * as React from 'react'\nimport useDeepCompareEffect from 'use-deep-compare-effect'\n\nimport {\n AsyncDataState,\n DataTableContextType,\n InitialState,\n TableData,\n TAsyncDataOptions,\n TAsyncDataResult,\n TDefaultSort,\n TGetAsyncData\n} from './DataTable.types'\nimport { getNewAsyncData } from './getNewAsyncData'\nimport { usePagination } from './usePagination'\nimport { useSortByColumn } from './useSorting'\n\nconst DataTableContext =\n React.createContext<DataTableContextType<unknown> | null>(null)\n\ntype DataTableProviderProps = {\n columns\n defaultSort?: TDefaultSort\n children: React.ReactNode\n initialState?: InitialState\n enableRowSelection?: boolean | ((row: Row<unknown>) => boolean)\n} & (\n | { data: TableData; getAsyncData?: never }\n | { data?: never; getAsyncData: TGetAsyncData }\n)\n\nexport const DataTableProvider = ({\n columns,\n data: dataProp = [],\n getAsyncData,\n defaultSort,\n initialState = undefined,\n enableRowSelection,\n children\n}: DataTableProviderProps): JSX.Element => {\n const tableId = React.useRef(uuid())\n\n const [data, setData] = React.useState<TAsyncDataResult>({\n results: dataProp ?? [],\n total: dataProp?.length ?? 0\n })\n\n const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({})\n const [expanded, setExpanded] = React.useState<ExpandedState>({})\n\n const { isPaginated, applyPagination, paginationState, setPaginationState } =\n usePagination(initialState?.pagination)\n\n const [asyncDataState, setAsyncDataState] = React.useState<AsyncDataState>(\n AsyncDataState.NONE\n )\n\n const [globalFilter, setGlobalFilter] = React.useState<string>('')\n\n const { setIsSortable, isSortable, sorting, setSorting } =\n useSortByColumn(defaultSort)\n\n const runAsyncData = React.useCallback(\n async (overrideAsyncDataOptions: Partial<TAsyncDataOptions>) => {\n if (!getAsyncData) return\n\n try {\n setAsyncDataState(AsyncDataState.PENDING)\n\n const newData = await getNewAsyncData(\n getAsyncData,\n overrideAsyncDataOptions,\n paginationState as PaginationState,\n sorting,\n globalFilter\n )\n\n setData(newData as TAsyncDataResult)\n setAsyncDataState(AsyncDataState.FULFILLED)\n } catch (error) {\n setAsyncDataState(AsyncDataState.REJECTED)\n }\n },\n [\n getAsyncData,\n paginationState?.pageIndex,\n paginationState?.pageSize,\n sorting,\n globalFilter\n ]\n )\n\n React.useEffect(() => {\n runAsyncData({})\n }, [runAsyncData])\n\n useDeepCompareEffect(() => {\n if (!dataProp) return\n\n setData({ results: dataProp, total: dataProp.length })\n }, [dataProp])\n\n const getTotalRows = () => data.total\n\n const table = useReactTable<unknown>({\n columns,\n data: data.results,\n pageCount: paginationState\n ? Math.ceil(getTotalRows() / paginationState.pageSize)\n : -1,\n initialState: initialState,\n state: {\n sorting,\n globalFilter,\n pagination: paginationState,\n rowSelection,\n expanded\n },\n manualPagination: getAsyncData && isPaginated,\n manualSorting: getAsyncData && isPaginated,\n enableSorting: asyncDataState !== AsyncDataState.PENDING,\n enableGlobalFilter: !getAsyncData,\n enableRowSelection,\n onExpandedChange: setExpanded,\n getSubRows: (row: Row<unknown>) => row.subRows,\n onRowSelectionChange: setRowSelection,\n getCoreRowModel: getCoreRowModel(),\n getPaginationRowModel: isPaginated ? getPaginationRowModel() : undefined,\n getSortedRowModel:\n isSortable || sorting.length ? getSortedRowModel() : undefined,\n getFilteredRowModel: getFilteredRowModel(),\n getExpandedRowModel: getExpandedRowModel(),\n onPaginationChange: isPaginated ? setPaginationState : undefined,\n onSortingChange: setSorting,\n onGlobalFilterChange: setGlobalFilter,\n globalFilterFn: (row, columnId, filterValue) => {\n const checkFilterMatchesCell = (cellValue: string) =>\n cellValue.toLowerCase().includes(filterValue.toLowerCase())\n\n const value = row.getValue(columnId)\n switch (typeof value) {\n case 'string':\n return checkFilterMatchesCell(value)\n case 'boolean':\n case 'number':\n return checkFilterMatchesCell(String(value))\n default:\n return false\n }\n }\n })\n\n const value: DataTableContextType = React.useMemo(() => {\n return {\n ...table,\n columns,\n data,\n setData,\n setIsSortable,\n applyPagination,\n getTotalRows,\n isSortable,\n asyncDataState,\n runAsyncData,\n enableRowSelection,\n rowSelection,\n tableId: tableId.current\n }\n }, [\n table,\n applyPagination,\n getTotalRows,\n isSortable,\n enableRowSelection,\n tableId\n ])\n\n return (\n <DataTableContext.Provider value={value}>\n {children}\n </DataTableContext.Provider>\n )\n}\n\nexport const useDataTable = <T extends Record<string, unknown>>() => {\n const context = React.useContext(DataTableContext) as DataTableContextType<T>\n\n if (!context)\n throw new Error(\n 'useDataTable can only be called from inside a DataTableProvider'\n )\n\n return context\n}\n"],"names":["DataTableContext","React","DataTableProvider","columns","dataProp","getAsyncData","defaultSort","initialState","enableRowSelection","children","_a","tableId","uuid","data","setData","rowSelection","setRowSelection","expanded","setExpanded","isPaginated","applyPagination","paginationState","setPaginationState","usePagination","asyncDataState","setAsyncDataState","AsyncDataState","globalFilter","setGlobalFilter","setIsSortable","isSortable","sorting","setSorting","useSortByColumn","runAsyncData","overrideAsyncDataOptions","newData","getNewAsyncData","useDeepCompareEffect","getTotalRows","table","useReactTable","row","getCoreRowModel","getPaginationRowModel","getSortedRowModel","getFilteredRowModel","getExpandedRowModel","columnId","filterValue","checkFilterMatchesCell","cellValue","value","useDataTable","context"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as e from"react";import{Table as t}from"../table/Table.js";import{DataTableSelectAllRowsCheckbox as
|
|
1
|
+
import*as e from"react";import{Table as t}from"../table/Table.js";import{DataTableSelectAllRowsCheckbox as i}from"./DataTableSelectAllRowsCheckbox.js";import{useDataTable as p}from"./DataTableContext.js";import{DataTable as b}from"./DataTable.js";const h=({sortable:a=!0,theme:m="light",...s})=>{const{getHeaderGroups:c,setIsSortable:r,enableRowSelection:n,getCanSomeRowsExpand:d}=p();return e.useEffect(()=>{r(a)},[a,r]),e.createElement(t.Header,{theme:m,...s},c().map(l=>e.createElement(t.Row,{key:l.id},d()&&e.createElement(t.HeaderCell,{css:{width:"$4"}}),n&&e.createElement(t.HeaderCell,{css:{width:"$4"}},e.createElement(i,null)),l.headers.map(o=>e.createElement(b.HeaderCell,{header:o,key:o.id})))))};export{h as DataTableHead};
|
|
2
2
|
//# sourceMappingURL=DataTableHead.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableHead.js","sources":["../../../src/components/data-table/DataTableHead.tsx"],"sourcesContent":["import * 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}\n\nexport const DataTableHead: React.FC<DataTableHeadProps> = ({\n sortable = true,\n theme = 'light',\n ...props\n}) => {\n const {
|
|
1
|
+
{"version":3,"file":"DataTableHead.js","sources":["../../../src/components/data-table/DataTableHead.tsx"],"sourcesContent":["import * 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}\n\nexport const DataTableHead: React.FC<DataTableHeadProps> = ({\n sortable = true,\n theme = 'light',\n ...props\n}) => {\n const {\n getHeaderGroups,\n setIsSortable,\n enableRowSelection,\n getCanSomeRowsExpand\n } = useDataTable()\n\n React.useEffect(() => {\n setIsSortable(sortable)\n }, [sortable, setIsSortable])\n\n return (\n <Table.Header theme={theme} {...props}>\n {getHeaderGroups().map((headerGroup) => {\n return (\n <Table.Row key={headerGroup.id}>\n {getCanSomeRowsExpand() && (\n <Table.HeaderCell css={{ width: '$4' }}></Table.HeaderCell>\n )}\n {enableRowSelection && (\n <Table.HeaderCell css={{ width: '$4' }}>\n <DataTableSelectAllRowsCheckbox />\n </Table.HeaderCell>\n )}\n {headerGroup.headers.map((header) => (\n <DataTable.HeaderCell header={header} key={header.id} />\n ))}\n </Table.Row>\n )\n })}\n </Table.Header>\n )\n}\n"],"names":["DataTableHead","sortable","theme","props","getHeaderGroups","setIsSortable","enableRowSelection","getCanSomeRowsExpand","useDataTable","React","Table","headerGroup","DataTableSelectAllRowsCheckbox","header","DataTable"],"mappings":"uPAaa,MAAAA,EAA8C,CAAC,CAC1D,SAAAC,EAAW,GACX,MAAAC,EAAQ,WACLC,CACL,IAAM,CACJ,KAAM,CACJ,gBAAAC,EACA,cAAAC,EACA,mBAAAC,EACA,qBAAAC,CACF,EAAIC,IAEJ,OAAAC,EAAM,UAAU,IAAM,CACpBJ,EAAcJ,CAAQ,CACxB,EAAG,CAACA,EAAUI,CAAa,CAAC,EAG1BI,EAAA,cAACC,EAAM,OAAN,CAAa,MAAOR,EAAQ,GAAGC,CAC7BC,EAAAA,EAAkB,EAAA,IAAKO,GAEpBF,EAAA,cAACC,EAAM,IAAN,CAAU,IAAKC,EAAY,EACzBJ,EAAAA,KACCE,EAAA,cAACC,EAAM,WAAN,CAAiB,IAAK,CAAE,MAAO,IAAK,CAAG,CAAA,EAEzCJ,GACCG,EAAA,cAACC,EAAM,WAAN,CAAiB,IAAK,CAAE,MAAO,IAAK,CACnCD,EAAAA,EAAA,cAACG,EAAA,IAA+B,CAClC,EAEDD,EAAY,QAAQ,IAAKE,GACxBJ,EAAA,cAACK,EAAU,WAAV,CAAqB,OAAQD,EAAQ,IAAKA,EAAO,EAAI,CAAA,CACvD,CACH,CAEH,CACH,CAEJ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as t from"react";import{styled as
|
|
1
|
+
import*as t from"react";import{ChevronDown as c,ChevronRight as m}from"@atom-learning/icons";import{styled as s}from"../../stitches.js";import{Table as o}from"../table/Table.js";import{useDataTable as p}from"./DataTableContext.js";import{DataTableDataCell as g}from"./DataTableDataCell.js";import{DataTableRowSelectionCheckbox as C}from"./DataTableRowSelectionCheckbox.js";import{Icon as S}from"../icon/Icon.js";const b=s(o.Row,{bg:"initial",variants:{isSelected:{true:{bg:"$blue100 !important"}}}}),h=({row:e})=>{const{enableRowSelection:l,getCanSomeRowsExpand:n}=p(),r=e.getToggleExpandedHandler(),i=e.getToggleSelectedHandler(),d=()=>e.getIsSomeSelected()?"indeterminate":e.getIsSelected();return t.createElement(b,{isSelected:e.getIsSelected()},n()&&t.createElement(o.Cell,{"data-testid":`expand-icon-${e.id}`,css:{width:"$4",cursor:e.getCanExpand()?"pointer":"auto"},onClick:r},e.getCanExpand()&&t.createElement(S,{is:e.getIsExpanded()?c:m})),l&&e.getCanSelect()&&t.createElement(o.Cell,{css:{width:"$4"}},t.createElement(C,{rowDepth:e.depth,rowId:e.id,checked:d(),onCheckedChange:i})),e.getVisibleCells().map((a,w)=>t.createElement(g,{key:a.id,cell:a})))};export{h as DataTableRow};
|
|
2
2
|
//# sourceMappingURL=DataTableRow.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableRow.js","sources":["../../../src/components/data-table/DataTableRow.tsx"],"sourcesContent":["import type { Row } from '@tanstack/react-table'\nimport * as React from 'react'\
|
|
1
|
+
{"version":3,"file":"DataTableRow.js","sources":["../../../src/components/data-table/DataTableRow.tsx"],"sourcesContent":["import type { Row } from '@tanstack/react-table'\nimport * as React from 'react'\nimport { ChevronRight, ChevronDown } from '@atom-learning/icons'\nimport { styled } from '~/stitches'\n\nimport { Table } from '../table'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableDataCell } from './DataTableDataCell'\nimport { DataTableRowSelectionCheckbox } from './DataTableRowSelectionCheckbox'\nimport { Icon } from '../icon'\nimport { Box } from '../box'\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: '$blue100 !important'\n }\n }\n }\n})\n\nexport const DataTableRow: React.FC<DataTableRowProps> = ({ row }) => {\n const { enableRowSelection, getCanSomeRowsExpand } = useDataTable()\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()}>\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 && row.getCanSelect() && (\n <Table.Cell css={{ width: '$4' }}>\n <DataTableRowSelectionCheckbox\n rowDepth={row.depth}\n rowId={row.id}\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","getCanSomeRowsExpand","useDataTable","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,qBACN,CACF,CACF,CACF,CAAC,EAEYC,EAA4C,CAAC,CAAE,IAAAC,CAAI,IAAM,CACpE,KAAM,CAAE,mBAAAC,EAAoB,qBAAAC,CAAqB,EAAIC,IAE/CC,EAAsBJ,EAAI,2BAC1BK,EAAsBL,EAAI,2BAE1BM,EAAkB,IAClBN,EAAI,kBAAkB,EAAU,gBAC7BA,EAAI,cAAA,EAGb,OACEO,EAAA,cAACX,EAAA,CAAU,WAAYI,EAAI,eACxBE,EAAAA,EAAAA,GACCK,EAAA,cAACT,EAAM,KAAN,CACC,cAAa,eAAeE,EAAI,KAChC,IAAK,CAAE,MAAO,KAAM,OAAQA,EAAI,aAAa,EAAI,UAAY,MAAO,EACpE,QAASI,CAERJ,EAAAA,EAAI,gBACHO,EAAA,cAACC,EAAA,CAAK,GAAIR,EAAI,gBAAkBS,EAAcC,CAAAA,CAAc,CAEhE,EAGDT,GAAsBD,EAAI,aAAa,GACtCO,EAAA,cAACT,EAAM,KAAN,CAAW,IAAK,CAAE,MAAO,IAAK,CAC7BS,EAAAA,EAAA,cAACI,EAAA,CACC,SAAUX,EAAI,MACd,MAAOA,EAAI,GACX,QAASM,EAAgB,EACzB,gBAAiBD,CACnB,CAAA,CACF,EAEDL,EAAI,kBAAkB,IAAI,CAACY,EAAMC,IACzBN,EAAA,cAACO,EAAA,CAAkB,IAAKF,EAAK,GAAI,KAAMA,CAAM,CAAA,CACrD,CACH,CAEJ"}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
interface DataTableRowSelectionCheckboxProps {
|
|
3
|
-
checked: boolean;
|
|
3
|
+
checked: boolean | 'indeterminate';
|
|
4
4
|
onCheckedChange: (value: boolean) => void;
|
|
5
5
|
rowId: string;
|
|
6
6
|
label?: string;
|
|
7
|
+
rowDepth: number;
|
|
7
8
|
}
|
|
8
|
-
export declare const DataTableRowSelectionCheckbox: ({ rowId, checked, onCheckedChange, label }: DataTableRowSelectionCheckboxProps) => React.ReactElement;
|
|
9
|
+
export declare const DataTableRowSelectionCheckbox: ({ rowDepth, rowId, checked, onCheckedChange, label }: DataTableRowSelectionCheckboxProps) => React.ReactElement;
|
|
9
10
|
export {};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as n from"@radix-ui/react-visually-hidden";import*as e from"react";import{Checkbox as
|
|
1
|
+
import*as n from"@radix-ui/react-visually-hidden";import*as e from"react";import{Checkbox as m}from"../checkbox/Checkbox.js";import{Label as s}from"../label/Label.js";import{useDataTable as h}from"./DataTableContext.js";const i=({rowDepth:t,rowId:o,checked:a,onCheckedChange:l,label:c=`Row ${o} selection`})=>{const{tableId:r}=h();return e.createElement(e.Fragment,null,e.createElement(n.Root,null,e.createElement(s,{htmlFor:`${r}_row_${o}_selection`},c)),e.createElement(m,{css:{ml:t?`$${t*2}`:0},checked:a,onCheckedChange:l,name:`${r}_row_${o}_selection`}))};export{i as DataTableRowSelectionCheckbox};
|
|
2
2
|
//# sourceMappingURL=DataTableRowSelectionCheckbox.js.map
|
|
@@ -1 +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 * as React from 'react'\n\nimport { Checkbox } from '../checkbox'\nimport { Label } from '../label'\nimport { useDataTable } from './DataTableContext'\n\ninterface DataTableRowSelectionCheckboxProps {\n checked: boolean\n onCheckedChange: (value: boolean) => void\n rowId: string\n label?: string\n}\n\nexport const DataTableRowSelectionCheckbox = ({\n rowId,\n checked,\n onCheckedChange,\n label = `Row ${rowId} selection`\n}: DataTableRowSelectionCheckboxProps): React.ReactElement => {\n const { tableId } = useDataTable()\n\n return (\n <>\n <VisuallyHidden.Root>\n <Label htmlFor={`${tableId}_row_${rowId}_selection`}>{label}</Label>\n </VisuallyHidden.Root>\n <Checkbox\n checked={checked}\n onCheckedChange={onCheckedChange}\n name={`${tableId}_row_${rowId}_selection`}\n />\n </>\n )\n}\n"],"names":["DataTableRowSelectionCheckbox","rowId","checked","onCheckedChange","label","tableId","useDataTable","React","VisuallyHidden","Label","Checkbox"],"mappings":"
|
|
1
|
+
{"version":3,"file":"DataTableRowSelectionCheckbox.js","sources":["../../../src/components/data-table/DataTableRowSelectionCheckbox.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\ninterface DataTableRowSelectionCheckboxProps {\n checked: boolean | 'indeterminate'\n onCheckedChange: (value: boolean) => void\n rowId: string\n label?: string\n rowDepth: number\n}\n\nexport const DataTableRowSelectionCheckbox = ({\n rowDepth,\n rowId,\n checked,\n onCheckedChange,\n label = `Row ${rowId} selection`\n}: DataTableRowSelectionCheckboxProps): React.ReactElement => {\n const { tableId } = useDataTable()\n\n return (\n <>\n <VisuallyHidden.Root>\n <Label htmlFor={`${tableId}_row_${rowId}_selection`}>{label}</Label>\n </VisuallyHidden.Root>\n <Checkbox\n css={{ ml: rowDepth ? `$${rowDepth * 2}` : 0 }}\n checked={checked}\n onCheckedChange={onCheckedChange}\n name={`${tableId}_row_${rowId}_selection`}\n />\n </>\n )\n}\n"],"names":["DataTableRowSelectionCheckbox","rowDepth","rowId","checked","onCheckedChange","label","tableId","useDataTable","React","VisuallyHidden","Label","Checkbox"],"mappings":"kOAeaA,EAAgC,CAAC,CAC5C,SAAAC,EACA,MAAAC,EACA,QAAAC,EACA,gBAAAC,EACA,MAAAC,EAAQ,OAAOH,aACjB,IAA8D,CAC5D,KAAM,CAAE,QAAAI,CAAQ,EAAIC,EAAa,EAEjC,OACEC,EAAA,cAAAA,EAAA,SAAA,KACEA,EAAA,cAACC,EAAe,KAAf,KACCD,EAAA,cAACE,EAAA,CAAM,QAAS,GAAGJ,SAAeJ,aAAoBG,EAAAA,CAAM,CAC9D,EACAG,EAAA,cAACG,EAAA,CACC,IAAK,CAAE,GAAIV,EAAW,IAAIA,EAAW,IAAM,CAAE,EAC7C,QAASE,EACT,gBAAiBC,EACjB,KAAM,GAAGE,SAAeJ,aAAAA,CAC1B,CACF,CAEJ"}
|