@atom-learning/components 5.9.2 → 5.11.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 +8 -3
- package/dist/components/checkbox/Checkbox.js +1 -1
- package/dist/components/checkbox/Checkbox.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.js +1 -1
- package/dist/components/data-table/DataTableRowSelectionCheckbox.js.map +1 -1
- package/dist/components/data-table/DataTableSelectAllRowsCheckbox.js +1 -1
- package/dist/components/data-table/DataTableSelectAllRowsCheckbox.js.map +1 -1
- package/dist/components/data-table/DataTableTable.js +1 -1
- package/dist/components/data-table/DataTableTable.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/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,10 +1,15 @@
|
|
|
1
|
-
|
|
1
|
+
# [5.11.0](https://github.com/Atom-Learning/components/compare/v5.10.0...v5.11.0) (2025-11-13)
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
### Bug Fixes
|
|
5
5
|
|
|
6
|
-
*
|
|
7
|
-
*
|
|
6
|
+
* changed observer to look at body, removed target from head component as unused ([6094eab](https://github.com/Atom-Learning/components/commit/6094eab2e1c9785098b85e0e647d573291fa02a2))
|
|
7
|
+
* check document before using ([b485a3e](https://github.com/Atom-Learning/components/commit/b485a3e2503ae42814c852b398c9d8003615a0ae))
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
### Features
|
|
11
|
+
|
|
12
|
+
* included sandbox startup task ([64e5827](https://github.com/Atom-Learning/components/commit/64e582743887065a2d741051bd9850ebe6b68ee3))
|
|
8
13
|
|
|
9
14
|
# [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
|
|
10
15
|
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Minus as
|
|
1
|
+
import{Minus as d,Ok as c}from"@atom-learning/icons";import*as i from"@radix-ui/react-checkbox";import*as e from"react";import{styled as r}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{overrideStitchesVariantValue as p}from"../../utilities/override-stitches-variant-value/overrideStitchesVariantValue.js";import{disabledStyle as f}from"../../utilities/style/disabledStyle.js";import{Icon as u}from"../icon/Icon.js";const b=r("div",{position:"relative",zIndex:1}),y=r("div",{position:"absolute",inset:"-$3",opacity:.5}),$=r(i.Indicator,{}),h=r(i.Root,{appearance:"none",position:"relative",backgroundColor:"transparent",border:"1px solid $colors$grey800",borderRadius:"3px",color:"white",bg:"white",cursor:"pointer",size:"$1",p:0,display:"flex",alignItems:"center",justifyContent:"center",transition:"all 50ms ease-out",flexShrink:0,"&:before":{content:'""',position:"absolute",inset:"-$2",zIndex:-1,borderRadius:"50%",bg:"$primary300",opacity:0,transform:"scale(0)",transition:"opacity 150ms ease-in-out, transform 100ms ease-in-out"},"&:hover:before":{opacity:1,transform:"scale(1)"},'&[data-state="checked"]':{backgroundColor:"$primary800",borderColor:"$primary800"},'&[data-state="indeterminate"]':{backgroundColor:"$primary800",borderColor:"$primary800"},"&:focus":{outline:"2px solid $primary800",outlineOffset:"-1px"},"&[disabled]":f,variants:{state:{error:{borderColor:"$danger"}},size:{md:{size:"$1"},lg:{size:"$2",mt:"-$1"}}}}),x={md:"sm",lg:"sm"},a=e.forwardRef(({size:o="md",checked:t,...s},n)=>{const m=e.useMemo(()=>p(o,l=>x[l]),[o]);return e.createElement(b,null,e.createElement(h,{ref:n,checked:t,size:o,...s},e.createElement(y,null),e.createElement($,{asChild:!0},e.createElement(u,{is:t==="indeterminate"?d:c,css:{strokeWidth:"3"},size:m}))))});a.displayName="Checkbox";export{a as Checkbox};
|
|
2
2
|
//# sourceMappingURL=Checkbox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import { Minus, Ok } from '@atom-learning/icons'\nimport * as RadixCheckbox from '@radix-ui/react-checkbox'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { disabledStyle } from '~/utilities'\nimport { overrideStitchesVariantValue } from '~/utilities/override-stitches-variant-value/overrideStitchesVariantValue'\n\nimport { Icon } from '../icon'\n\nconst
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import { Minus, Ok } from '@atom-learning/icons'\nimport * as RadixCheckbox from '@radix-ui/react-checkbox'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { disabledStyle } from '~/utilities'\nimport { overrideStitchesVariantValue } from '~/utilities/override-stitches-variant-value/overrideStitchesVariantValue'\n\nimport { Icon } from '../icon'\n\nconst CheckboxContainer = styled('div', {\n position: 'relative',\n zIndex: 1\n})\n\nconst CheckboxHitArea = styled('div', {\n position: 'absolute',\n inset: '-$3',\n opacity: 0.5\n})\n\nconst StyledIndicator = styled(RadixCheckbox.Indicator, {})\n\nconst StyledCheckbox = styled(RadixCheckbox.Root, {\n appearance: 'none',\n position: 'relative',\n backgroundColor: 'transparent',\n border: '1px solid $colors$grey800',\n borderRadius: '3px',\n color: 'white',\n bg: 'white',\n cursor: 'pointer',\n size: '$1',\n p: 0,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n transition: 'all 50ms ease-out',\n flexShrink: 0,\n\n //hover circle\n '&:before': {\n content: '\"\"',\n position: 'absolute',\n inset: '-$2',\n zIndex: -1,\n borderRadius: '50%',\n bg: '$primary300',\n opacity: 0,\n transform: 'scale(0)',\n transition: 'opacity 150ms ease-in-out, transform 100ms ease-in-out'\n },\n '&:hover:before': {\n opacity: 1,\n transform: 'scale(1)'\n },\n\n '&[data-state=\"checked\"]': {\n backgroundColor: '$primary800',\n borderColor: '$primary800'\n },\n '&[data-state=\"indeterminate\"]': {\n backgroundColor: '$primary800',\n borderColor: '$primary800'\n },\n '&:focus': {\n outline: '2px solid $primary800',\n outlineOffset: '-1px'\n },\n '&[disabled]': disabledStyle,\n variants: {\n state: {\n error: {\n borderColor: '$danger'\n }\n },\n size: {\n md: {\n size: '$1'\n },\n lg: {\n size: '$2',\n mt: '-$1'\n }\n }\n }\n})\n\nconst toIconSize = {\n md: 'sm',\n lg: 'sm'\n}\n\nexport const Checkbox: React.ForwardRefExoticComponent<\n React.ComponentProps<typeof StyledCheckbox>\n> = React.forwardRef(({ size = 'md', checked, ...rest }, ref) => {\n const iconSize = React.useMemo(\n () => overrideStitchesVariantValue(size, (s) => toIconSize[s]),\n [size]\n )\n\n return (\n <CheckboxContainer>\n <StyledCheckbox ref={ref} checked={checked} size={size} {...rest}>\n <CheckboxHitArea />\n <StyledIndicator asChild>\n <Icon\n is={checked === 'indeterminate' ? Minus : Ok}\n css={{\n strokeWidth: '3'\n }}\n size={iconSize}\n />\n </StyledIndicator>\n </StyledCheckbox>\n </CheckboxContainer>\n )\n})\n\nCheckbox.displayName = 'Checkbox'\n"],"names":["CheckboxContainer","styled","CheckboxHitArea","StyledIndicator","RadixCheckbox","StyledCheckbox","disabledStyle","toIconSize","Checkbox","React","size","checked","rest","ref","iconSize","overrideStitchesVariantValue","s","Icon","Minus","Ok"],"mappings":"wkBAUA,MAAMA,EAAoBC,EAAO,MAAO,CACtC,SAAU,WACV,OAAQ,CACV,CAAC,EAEKC,EAAkBD,EAAO,MAAO,CACpC,SAAU,WACV,MAAO,MACP,QAAS,EACX,CAAC,EAEKE,EAAkBF,EAAOG,EAAc,UAAW,CAAA,CAAE,EAEpDC,EAAiBJ,EAAOG,EAAc,KAAM,CAChD,WAAY,OACZ,SAAU,WACV,gBAAiB,cACjB,OAAQ,4BACR,aAAc,MACd,MAAO,QACP,GAAI,QACJ,OAAQ,UACR,KAAM,KACN,EAAG,EACH,QAAS,OACT,WAAY,SACZ,eAAgB,SAChB,WAAY,oBACZ,WAAY,EAGZ,WAAY,CACV,QAAS,KACT,SAAU,WACV,MAAO,MACP,OAAQ,GACR,aAAc,MACd,GAAI,cACJ,QAAS,EACT,UAAW,WACX,WAAY,wDACd,EACA,iBAAkB,CAChB,QAAS,EACT,UAAW,UACb,EAEA,0BAA2B,CACzB,gBAAiB,cACjB,YAAa,aACf,EACA,gCAAiC,CAC/B,gBAAiB,cACjB,YAAa,aACf,EACA,UAAW,CACT,QAAS,wBACT,cAAe,MACjB,EACA,cAAeE,EACf,SAAU,CACR,MAAO,CACL,MAAO,CACL,YAAa,SACf,CACF,EACA,KAAM,CACJ,GAAI,CACF,KAAM,IACR,EACA,GAAI,CACF,KAAM,KACN,GAAI,KACN,CACF,CACF,CACF,CAAC,EAEKC,EAAa,CACjB,GAAI,KACJ,GAAI,IACN,EAEaC,EAETC,EAAM,WAAW,CAAC,CAAE,KAAAC,EAAO,KAAM,QAAAC,KAAYC,CAAK,EAAGC,IAAQ,CAC/D,MAAMC,EAAWL,EAAM,QACrB,IAAMM,EAA6BL,EAAOM,GAAMT,EAAWS,EAAE,EAC7D,CAACN,CAAI,CACP,EAEA,OACED,EAAA,cAACT,EAAA,KACCS,EAAA,cAACJ,EAAA,CAAe,IAAKQ,EAAK,QAASF,EAAS,KAAMD,EAAO,GAAGE,CAAAA,EAC1DH,EAAA,cAACP,EAAA,IAAgB,EACjBO,EAAA,cAACN,EAAA,CAAgB,QAAO,EAAA,EACtBM,EAAA,cAACQ,EAAA,CACC,GAAIN,IAAY,gBAAkBO,EAAQC,EAC1C,IAAK,CACH,YAAa,GACf,EACA,KAAML,CAAAA,CACR,CACF,CACF,CACF,CAEJ,CAAC,EAEDN,EAAS,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as t from"react";import{Table as
|
|
1
|
+
import*as t from"react";import{Table as s}from"../table/Table.js";import{DataTableSelectAllRowsCheckbox as C}from"./DataTableSelectAllRowsCheckbox.js";import{useDataTable as x}from"./DataTableContext.js";import{DataTable as H}from"./DataTable.js";const k=({sortable:u=!0,theme:h="light",isSticky:a=!1,stickyOffset:n=0,css:E,...v})=>{var d;const{getHeaderGroups:R,setIsSortable:m,enableRowSelection:w,getCanSomeRowsExpand:S,tablePosition:e,setTablePosition:g}=x();t.useEffect(()=>{m(u)},[u,m]);const l=t.useRef(null),i=t.useRef(null),T=t.useRef(0),[f,y]=t.useState(0),[c,p]=t.useState(!1),b=(d=l==null?void 0:l.current)==null?void 0:d.closest("thead");if(b&&(e==null?void 0:e.offsetTop)===null){const o=b.getBoundingClientRect().height,r=n+o;e&&g({...e,offsetTop:r||0})}return t.useEffect(()=>{if(!!a&&(!i.current&&l.current&&(i.current=l.current.closest("table")),i.current&&(e==null?void 0:e.top)!==null&&(e==null?void 0:e.bottom)!==null)){const o=(e==null?void 0:e.top)!=null&&(e==null?void 0:e.bottom)!=null&&e.top<n&&e.bottom>100?-e.top+n:0;o!==0&&p(!0),T.current=o,y(o),requestAnimationFrame(()=>{p(!1)})}},[a,n,e]),t.createElement(s.Header,{theme:h,css:{position:"relative",zIndex:3,"& tr:not(:last-child) > th":{borderBottom:"none"},"& tr:not(:first-child) > th":{borderRadius:"0 !important"},...E},...v},R().map(o=>t.createElement(s.Row,{key:o.id,ref:l,css:{...a&&f!==0&&{transform:`translateY(${f}px)`,opacity:c?0:1,transition:c?"none":"opacity 100ms",transitionDelay:c?"0ms":"150ms","& th:last-child:before":{content:"",position:"absolute",right:0,top:0,bottom:0,width:"100%",boxShadow:"$0",pointerEvents:"none"}}}},S()&&t.createElement(s.HeaderCell,{css:{width:"$4"}}),w&&t.createElement(s.HeaderCell,{css:{width:"$4"}},t.createElement(C,null)),o.headers.map(r=>t.createElement(H.HeaderCell,{header:r,key:r.id})))))};export{k 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 { CSS } from '~/stitches'\n\nimport { Table } from '../table'\nimport { DataTableSelectAllRowsCheckbox } from './DataTableSelectAllRowsCheckbox'\nimport { DataTable, useDataTable } from './index'\n\ntype DataTableHeadProps = Omit<\n React.ComponentProps<typeof Table.Header>,\n 'children'\n> & {\n sortable?: boolean\n isSticky?: boolean\n stickyOffset?: number\n headerCss?: CSS\n}\n\nexport const DataTableHead = ({\n sortable = true,\n theme = 'light',\n isSticky = false,\n stickyOffset = 0,\n css,\n ...props\n}: DataTableHeadProps): React.ReactElement => {\n const {\n getHeaderGroups,\n setIsSortable,\n enableRowSelection,\n getCanSomeRowsExpand,\n tablePosition,\n setTablePosition\n } = useDataTable()\n\n React.useEffect(() => {\n setIsSortable(sortable)\n }, [sortable, setIsSortable])\n\n const tableHeaderRowRef = React.useRef<HTMLTableRowElement>(null)\n const tableRef = React.useRef<HTMLTableElement | null>(null)\n const headerOffsetRef = React.useRef(0)\n\n const [headerOffset, setHeaderOffset] = React.useState<number>(0)\n const [headerHide, setHeaderHide] = React.useState<boolean>(false)\n\n const
|
|
1
|
+
{"version":3,"file":"DataTableHead.js","sources":["../../../src/components/data-table/DataTableHead.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS } from '~/stitches'\n\nimport { Table } from '../table'\nimport { DataTableSelectAllRowsCheckbox } from './DataTableSelectAllRowsCheckbox'\nimport { DataTable, useDataTable } from './index'\n\ntype DataTableHeadProps = Omit<\n React.ComponentProps<typeof Table.Header>,\n 'children'\n> & {\n sortable?: boolean\n isSticky?: boolean\n stickyOffset?: number\n headerCss?: CSS\n}\n\nexport const DataTableHead = ({\n sortable = true,\n theme = 'light',\n isSticky = false,\n stickyOffset = 0,\n css,\n ...props\n}: DataTableHeadProps): React.ReactElement => {\n const {\n getHeaderGroups,\n setIsSortable,\n enableRowSelection,\n getCanSomeRowsExpand,\n tablePosition,\n setTablePosition\n } = useDataTable()\n\n React.useEffect(() => {\n setIsSortable(sortable)\n }, [sortable, setIsSortable])\n\n const tableHeaderRowRef = React.useRef<HTMLTableRowElement>(null)\n const tableRef = React.useRef<HTMLTableElement | null>(null)\n const headerOffsetRef = React.useRef(0)\n\n const [headerOffset, setHeaderOffset] = React.useState<number>(0)\n const [headerHide, setHeaderHide] = React.useState<boolean>(false)\n\n const tableHeadElement = tableHeaderRowRef?.current?.closest('thead')\n\n if (tableHeadElement && tablePosition?.offsetTop === null) {\n const tableHeadHeight = tableHeadElement.getBoundingClientRect().height\n const intersectionOffset = stickyOffset + tableHeadHeight\n if (tablePosition) {\n setTablePosition({ ...tablePosition, offsetTop: intersectionOffset || 0 })\n }\n }\n\n React.useEffect(() => {\n if (!isSticky) return\n\n if (!tableRef.current && tableHeaderRowRef.current) {\n tableRef.current = tableHeaderRowRef.current.closest(\n 'table'\n ) as HTMLTableElement | null\n }\n\n if (tableRef.current) {\n if (tablePosition?.top !== null && tablePosition?.bottom !== null) {\n const newOffset =\n tablePosition?.top != null &&\n tablePosition?.bottom != null &&\n tablePosition.top < stickyOffset &&\n tablePosition.bottom > 100\n ? -tablePosition.top + stickyOffset\n : 0\n\n if (newOffset !== 0) setHeaderHide(true)\n\n headerOffsetRef.current = newOffset\n setHeaderOffset(newOffset)\n\n requestAnimationFrame(() => {\n setHeaderHide(false)\n })\n }\n }\n }, [isSticky, stickyOffset, tablePosition])\n\n return (\n <Table.Header\n theme={theme}\n css={{\n position: 'relative',\n zIndex: 3,\n '& tr:not(:last-child) > th': {\n borderBottom: 'none'\n },\n '& tr:not(:first-child) > th': {\n borderRadius: '0 !important'\n },\n ...css\n }}\n {...props}\n >\n {getHeaderGroups().map((headerGroup) => {\n return (\n <Table.Row\n key={headerGroup.id}\n ref={tableHeaderRowRef}\n css={{\n ...(isSticky &&\n headerOffset !== 0 && {\n transform: `translateY(${headerOffset}px)`,\n opacity: headerHide ? 0 : 1,\n transition: headerHide ? 'none' : `opacity 100ms`,\n transitionDelay: headerHide ? '0ms' : `150ms`,\n '& th:last-child:before': {\n content: '',\n position: 'absolute',\n right: 0,\n top: 0,\n bottom: 0,\n width: '100%',\n boxShadow: '$0',\n pointerEvents: 'none'\n }\n })\n }}\n >\n {getCanSomeRowsExpand() && (\n <Table.HeaderCell css={{ width: '$4' }} />\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","isSticky","stickyOffset","css","props","_a","getHeaderGroups","setIsSortable","enableRowSelection","getCanSomeRowsExpand","tablePosition","setTablePosition","useDataTable","React","tableHeaderRowRef","tableRef","headerOffsetRef","headerOffset","setHeaderOffset","headerHide","setHeaderHide","tableHeadElement","tableHeadHeight","intersectionOffset","newOffset","Table","headerGroup","DataTableSelectAllRowsCheckbox","header","DataTable"],"mappings":"uPAkBO,MAAMA,EAAgB,CAAC,CAC5B,SAAAC,EAAW,GACX,MAAAC,EAAQ,QACR,SAAAC,EAAW,GACX,aAAAC,EAAe,EACf,IAAAC,KACGC,CACL,IAA8C,CAzB9C,IAAAC,EA0BE,KAAM,CACJ,gBAAAC,EACA,cAAAC,EACA,mBAAAC,EACA,qBAAAC,EACA,cAAAC,EACA,iBAAAC,CACF,EAAIC,IAEJC,EAAM,UAAU,IAAM,CACpBN,EAAcR,CAAQ,CACxB,EAAG,CAACA,EAAUQ,CAAa,CAAC,EAE5B,MAAMO,EAAoBD,EAAM,OAA4B,IAAI,EAC1DE,EAAWF,EAAM,OAAgC,IAAI,EACrDG,EAAkBH,EAAM,OAAO,CAAC,EAEhC,CAACI,EAAcC,CAAe,EAAIL,EAAM,SAAiB,CAAC,EAC1D,CAACM,EAAYC,CAAa,EAAIP,EAAM,SAAkB,EAAK,EAE3DQ,GAAmBhB,EAAAS,GAAA,KAAAA,OAAAA,EAAmB,UAAnB,KAAAT,OAAAA,EAA4B,QAAQ,OAAA,EAE7D,GAAIgB,IAAoBX,GAAA,YAAAA,EAAe,aAAc,KAAM,CACzD,MAAMY,EAAkBD,EAAiB,wBAAwB,OAC3DE,EAAqBrB,EAAeoB,EACtCZ,GACFC,EAAiB,CAAE,GAAGD,EAAe,UAAWa,GAAsB,CAAE,CAAC,CAE7E,CAEA,OAAAV,EAAM,UAAU,IAAM,CACpB,GAAI,EAACZ,IAED,CAACc,EAAS,SAAWD,EAAkB,UACzCC,EAAS,QAAUD,EAAkB,QAAQ,QAC3C,OACF,GAGEC,EAAS,UACPL,GAAA,YAAAA,EAAe,OAAQ,OAAQA,GAAA,KAAA,OAAAA,EAAe,UAAW,MAAM,CACjE,MAAMc,GACJd,GAAA,KAAAA,OAAAA,EAAe,MAAO,OACtBA,GAAA,KAAAA,OAAAA,EAAe,SAAU,MACzBA,EAAc,IAAMR,GACpBQ,EAAc,OAAS,IACnB,CAACA,EAAc,IAAMR,EACrB,EAEFsB,IAAc,GAAGJ,EAAc,EAAI,EAEvCJ,EAAgB,QAAUQ,EAC1BN,EAAgBM,CAAS,EAEzB,sBAAsB,IAAM,CAC1BJ,EAAc,EAAK,CACrB,CAAC,CACH,CAEJ,EAAG,CAACnB,EAAUC,EAAcQ,CAAa,CAAC,EAGxCG,EAAA,cAACY,EAAM,OAAN,CACC,MAAOzB,EACP,IAAK,CACH,SAAU,WACV,OAAQ,EACR,6BAA8B,CAC5B,aAAc,MAChB,EACA,8BAA+B,CAC7B,aAAc,cAChB,EACA,GAAGG,CACL,EACC,GAAGC,GAEHE,EAAgB,EAAE,IAAKoB,GAEpBb,EAAA,cAACY,EAAM,IAAN,CACC,IAAKC,EAAY,GACjB,IAAKZ,EACL,IAAK,CACH,GAAIb,GACFgB,IAAiB,GAAK,CACpB,UAAW,cAAcA,OACzB,QAASE,EAAa,EAAI,EAC1B,WAAYA,EAAa,OAAS,gBAClC,gBAAiBA,EAAa,MAAQ,QACtC,yBAA0B,CACxB,QAAS,GACT,SAAU,WACV,MAAO,EACP,IAAK,EACL,OAAQ,EACR,MAAO,OACP,UAAW,KACX,cAAe,MACjB,CACF,CACJ,GAECV,EAAqB,GACpBI,EAAA,cAACY,EAAM,WAAN,CAAiB,IAAK,CAAE,MAAO,IAAK,CAAG,CAAA,EAEzCjB,GACCK,EAAA,cAACY,EAAM,WAAN,CAAiB,IAAK,CAAE,MAAO,IAAK,CAAA,EACnCZ,EAAA,cAACc,EAAA,IAA+B,CAClC,EAEDD,EAAY,QAAQ,IAAKE,GACxBf,EAAA,cAACgB,EAAU,WAAV,CAAqB,OAAQD,EAAQ,IAAKA,EAAO,EAAA,CAAI,CACvD,CACH,CAEH,CACH,CAEJ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{ChevronDown as
|
|
1
|
+
import{ChevronDown as x,ChevronRight as w}from"@atom-learning/icons";import*as n from"react";import{styled as h}from"../../stitches.js";import{Icon as C}from"../icon/Icon.js";import{Table as i}from"../table/Table.js";import{useDataTable as E}from"./DataTableContext.js";import{DataTableDataCell as D}from"./DataTableDataCell.js";import{DataTableRowSelectionCheckbox as S}from"./DataTableRowSelectionCheckbox.js";const v=h(i.Row,{bg:"initial",variants:{isSelected:{true:{["&:nth-child(odd), &:nth-child(even)"]:{bg:"$primary100"}}},isDisabled:{true:{opacity:"30%"}},isFocusable:{true:{transition:"transform 150ms ease-in-out, box-shadow 150ms ease-in-out","&:hover":{transform:"translateY(-1px)",boxShadow:"0px 4px 11px 0px hsla(0, 0%, 12%, 0.12)",position:"relative",zIndex:3},"&:focus":{outline:"2px solid $primary500",outlineOffset:"-4px","& td":{bg:"transparent"}}}}}}),d=e=>e?!!(e.closest("button, a, input, select, textarea")||e.getAttribute("role")==="button"):!1,k=({row:e,rowAction:r})=>{const{enableRowSelection:m,disabledRows:l,getCanSomeRowsExpand:p}=E(),s=!!(l!=null&&l[e.id]),g=e.getToggleExpandedHandler(),u=e.getToggleSelectedHandler(),b=()=>e.getIsSomeSelected()?"indeterminate":e.getIsSelected(),c=(t,o)=>{!r||!o.target.closest("tr")||d(o.target)||r(t.original,o)},f=t=>{if(t.key==="Enter"||t.key===" "){if(d(t.target))return;t.preventDefault(),c(e,t)}if(t.key==="ArrowDown"){t.preventDefault();const o=t.target.closest("tr"),a=o==null?void 0:o.nextElementSibling;a&&a.tagName==="TR"&&a.focus()}if(t.key==="ArrowUp"){t.preventDefault();const o=t.target.closest("tr"),a=o==null?void 0:o.previousElementSibling;a&&a.tagName==="TR"&&a.focus()}};return n.createElement(v,{isSelected:e.getIsSelected(),isDisabled:s,isFocusable:!!r&&!s,...r&&{onClick:t=>c(e,t),tabIndex:0,css:{cursor:"pointer"},onKeyDown:f}},p()&&n.createElement(i.Cell,{"data-testid":`expand-icon-${e.id}`,css:{width:"$4",cursor:e.getCanExpand()?"pointer":"auto"},onClick:g},e.getCanExpand()&&n.createElement(C,{is:e.getIsExpanded()?x:w})),m&&n.createElement(i.Cell,{css:{width:"$4"}},n.createElement(S,{row:e,checked:b(),onCheckedChange:u})),e.getVisibleCells().map((t,o)=>n.createElement(D,{key:t.id,cell:t})))};export{k 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 { 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 rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n}\n\nconst StyledRow = styled(Table.Row, {\n bg: 'initial',\n variants: {\n isSelected: {\n true: {\n
|
|
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 rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n}\n\nconst StyledRow = styled(Table.Row, {\n bg: 'initial',\n variants: {\n isSelected: {\n true: {\n [`&:nth-child(odd), &:nth-child(even)`]: {\n bg: '$primary100'\n }\n }\n },\n isDisabled: {\n true: {\n opacity: '30%'\n }\n },\n isFocusable: {\n true: {\n transition: 'transform 150ms ease-in-out, box-shadow 150ms ease-in-out',\n '&:hover': {\n transform: 'translateY(-1px)',\n boxShadow: '0px 4px 11px 0px hsla(0, 0%, 12%, 0.12)',\n position: 'relative',\n zIndex: 3\n },\n '&:focus': {\n outline: '2px solid $primary500',\n outlineOffset: '-4px',\n '& td': {\n bg: 'transparent'\n }\n }\n }\n }\n }\n})\n\nconst isElementInteractive = (element: Element | null): boolean => {\n if (!element) return false\n if (element.closest('button, a, input, select, textarea')) return true\n if (element.getAttribute('role') === 'button') return true\n return false\n}\n\nexport const DataTableRow = ({ row, rowAction }: DataTableRowProps) => {\n const { enableRowSelection, disabledRows, getCanSomeRowsExpand } =\n useDataTable()\n\n const isDisabled = !!disabledRows?.[row.id]\n\n const toggleExpandHandler = row.getToggleExpandedHandler()\n const toggleSelectHandler = row.getToggleSelectedHandler()\n\n const getCheckedState = (): boolean | 'indeterminate' => {\n if (row.getIsSomeSelected()) return 'indeterminate'\n return row.getIsSelected()\n }\n\n const handleRowClick = (\n rowData: Row<Record<string, unknown>>,\n event: React.MouseEvent<HTMLTableRowElement>\n ) => {\n if (!rowAction) return\n\n // Skip if clicking on an interactive element\n const rowElement = (event.target as Element).closest('tr')\n if (!rowElement || isElementInteractive(event.target as Element)) {\n return\n }\n\n rowAction(rowData.original, event)\n }\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLTableRowElement>) => {\n if (event.key === 'Enter' || event.key === ' ') {\n if (isElementInteractive(event.target as Element)) {\n return\n }\n event.preventDefault()\n handleRowClick(\n row,\n event as unknown as React.MouseEvent<HTMLTableRowElement>\n )\n }\n if (event.key === 'ArrowDown') {\n event.preventDefault()\n const currentRow = (event.target as HTMLElement).closest('tr')\n const nextRow = currentRow?.nextElementSibling as HTMLElement\n if (nextRow && nextRow.tagName === 'TR') {\n nextRow.focus()\n }\n }\n if (event.key === 'ArrowUp') {\n event.preventDefault()\n const currentRow = (event.target as HTMLElement).closest('tr')\n const previousRow = currentRow?.previousElementSibling as HTMLElement\n if (previousRow && previousRow.tagName === 'TR') {\n previousRow.focus()\n }\n }\n }\n\n return (\n <StyledRow\n isSelected={row.getIsSelected()}\n isDisabled={isDisabled}\n isFocusable={!!rowAction && !isDisabled}\n {...(rowAction && {\n onClick: (event) => handleRowClick(row, event),\n tabIndex: 0,\n css: { cursor: 'pointer' },\n onKeyDown: handleKeyDown\n })}\n >\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","isElementInteractive","element","DataTableRow","row","rowAction","enableRowSelection","disabledRows","getCanSomeRowsExpand","useDataTable","isDisabled","toggleExpandHandler","toggleSelectHandler","getCheckedState","handleRowClick","rowData","event","handleKeyDown","currentRow","nextRow","previousRow","React","Icon","ChevronDown","ChevronRight","DataTableRowSelectionCheckbox","cell","i","DataTableDataCell"],"mappings":"4ZAiBA,MAAMA,EAAYC,EAAOC,EAAM,IAAK,CAClC,GAAI,UACJ,SAAU,CACR,WAAY,CACV,KAAM,CACJ,CAAC,uCAAwC,CACvC,GAAI,aACN,CACF,CACF,EACA,WAAY,CACV,KAAM,CACJ,QAAS,KACX,CACF,EACA,YAAa,CACX,KAAM,CACJ,WAAY,4DACZ,UAAW,CACT,UAAW,mBACX,UAAW,0CACX,SAAU,WACV,OAAQ,CACV,EACA,UAAW,CACT,QAAS,wBACT,cAAe,OACf,OAAQ,CACN,GAAI,aACN,CACF,CACF,CACF,CACF,CACF,CAAC,EAEKC,EAAwBC,GACvBA,EACD,GAAAA,EAAQ,QAAQ,oCAAoC,GACpDA,EAAQ,aAAa,MAAM,IAAM,UAFhB,GAMVC,EAAe,CAAC,CAAE,IAAAC,EAAK,UAAAC,CAAU,IAAyB,CACrE,KAAM,CAAE,mBAAAC,EAAoB,aAAAC,EAAc,qBAAAC,CAAqB,EAC7DC,EAEIC,EAAAA,EAAa,CAAC,EAACH,GAAA,MAAAA,EAAeH,EAAI,KAElCO,EAAsBP,EAAI,2BAC1BQ,EAAsBR,EAAI,yBAAyB,EAEnDS,EAAkB,IAClBT,EAAI,kBAA4B,EAAA,gBAC7BA,EAAI,cAAc,EAGrBU,EAAiB,CACrBC,EACAC,IACG,CACC,CAACX,GAID,CADgBW,EAAM,OAAmB,QAAQ,IAAI,GACtCf,EAAqBe,EAAM,MAAiB,GAI/DX,EAAUU,EAAQ,SAAUC,CAAK,CACnC,EAEMC,EAAiBD,GAAoD,CACzE,GAAIA,EAAM,MAAQ,SAAWA,EAAM,MAAQ,IAAK,CAC9C,GAAIf,EAAqBe,EAAM,MAAiB,EAC9C,OAEFA,EAAM,iBACNF,EACEV,EACAY,CACF,CACF,CACA,GAAIA,EAAM,MAAQ,YAAa,CAC7BA,EAAM,iBACN,MAAME,EAAcF,EAAM,OAAuB,QAAQ,IAAI,EACvDG,EAAUD,GAAA,YAAAA,EAAY,mBACxBC,GAAWA,EAAQ,UAAY,MACjCA,EAAQ,MAEZ,CAAA,CACA,GAAIH,EAAM,MAAQ,UAAW,CAC3BA,EAAM,iBACN,MAAME,EAAcF,EAAM,OAAuB,QAAQ,IAAI,EACvDI,EAAcF,GAAA,KAAAA,OAAAA,EAAY,uBAC5BE,GAAeA,EAAY,UAAY,MACzCA,EAAY,MAEhB,CAAA,CACF,EAEA,OACEC,EAAA,cAACvB,EAAA,CACC,WAAYM,EAAI,cAAA,EAChB,WAAYM,EACZ,YAAa,CAAC,CAACL,GAAa,CAACK,EAC5B,GAAIL,GAAa,CAChB,QAAUW,GAAUF,EAAeV,EAAKY,CAAK,EAC7C,SAAU,EACV,IAAK,CAAE,OAAQ,SAAU,EACzB,UAAWC,CACb,GAECT,EAAqB,GACpBa,EAAA,cAACrB,EAAM,KAAN,CACC,cAAa,eAAeI,EAAI,KAChC,IAAK,CAAE,MAAO,KAAM,OAAQA,EAAI,eAAiB,UAAY,MAAO,EACpE,QAASO,GAERP,EAAI,gBACHiB,EAAA,cAACC,EAAA,CAAK,GAAIlB,EAAI,cAAc,EAAImB,EAAcC,CAAc,CAAA,CAEhE,EAGDlB,GACCe,EAAA,cAACrB,EAAM,KAAN,CAAW,IAAK,CAAE,MAAO,IAAK,CAAA,EAC7BqB,EAAA,cAACI,EAAA,CACC,IAAKrB,EACL,QAASS,EAAgB,EACzB,gBAAiBD,CACnB,CAAA,CACF,EAEDR,EAAI,gBAAA,EAAkB,IAAI,CAACsB,EAAMC,IACzBN,EAAA,cAACO,EAAA,CAAkB,IAAKF,EAAK,GAAI,KAAMA,CAAM,CAAA,CACrD,CACH,CAEJ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
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};
|
|
1
|
+
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,{size:"lg",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};
|
|
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 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,
|
|
1
|
+
{"version":3,"file":"DataTableRowSelectionCheckbox.js","sources":["../../../src/components/data-table/DataTableRowSelectionCheckbox.tsx"],"sourcesContent":["import * as VisuallyHidden from '@radix-ui/react-visually-hidden'\nimport type { Row } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Checkbox } from '../checkbox'\nimport { Label } from '../label'\nimport { useDataTable } from './DataTableContext'\n\nexport const DataTableRowSelectionCheckbox = ({\n row,\n checked,\n onCheckedChange,\n label = `Row ${row.id} selection`\n}: {\n row: Row<Record<string, unknown>>\n checked: boolean | 'indeterminate'\n onCheckedChange: (value: boolean) => void\n label?: string\n}): React.ReactElement => {\n const { tableId } = useDataTable()\n\n return (\n <>\n <VisuallyHidden.Root>\n <Label htmlFor={`${tableId}_row_${row.id}_selection`}>{label}</Label>\n </VisuallyHidden.Root>\n <Checkbox\n size=\"lg\"\n 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,IAEpB,OACEC,EAAA,cAAAA,EAAA,SACEA,KAAAA,EAAA,cAACC,EAAe,KAAf,KACCD,EAAA,cAACE,EAAA,CAAM,QAAS,GAAGJ,SAAeJ,EAAI,gBAAiBG,CAAM,CAC/D,EACAG,EAAA,cAACG,EAAA,CACC,KAAK,KACL,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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
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};
|
|
1
|
+
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,{size:"lg",checked:m(),onCheckedChange:n,name:`${a}_allRowsSelection`}))};export{b as DataTableSelectAllRowsCheckbox};
|
|
2
2
|
//# sourceMappingURL=DataTableSelectAllRowsCheckbox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableSelectAllRowsCheckbox.js","sources":["../../../src/components/data-table/DataTableSelectAllRowsCheckbox.tsx"],"sourcesContent":["import * as VisuallyHidden from '@radix-ui/react-visually-hidden'\nimport * as React from 'react'\n\nimport { Checkbox } from '../checkbox'\nimport { Label } from '../label'\nimport { useDataTable } from './DataTableContext'\n\nexport const DataTableSelectAllRowsCheckbox = ({\n label = 'All rows selection'\n}: {\n label?: string\n}) => {\n const {\n getIsAllPageRowsSelected,\n getIsSomePageRowsSelected,\n toggleAllPageRowsSelected,\n tableId\n } = useDataTable()\n\n const getCheckedState = () => {\n if (getIsSomePageRowsSelected()) return 'indeterminate'\n if (getIsAllPageRowsSelected()) return true\n return false\n }\n\n const updateCheckedState = () => {\n if (getIsSomePageRowsSelected()) {\n return toggleAllPageRowsSelected(false)\n }\n return toggleAllPageRowsSelected(!getIsAllPageRowsSelected())\n }\n\n return (\n <>\n <VisuallyHidden.Root>\n <Label htmlFor={`${tableId}_all_rows_selection`}>{label}</Label>\n </VisuallyHidden.Root>\n\n <Checkbox\n 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,
|
|
1
|
+
{"version":3,"file":"DataTableSelectAllRowsCheckbox.js","sources":["../../../src/components/data-table/DataTableSelectAllRowsCheckbox.tsx"],"sourcesContent":["import * as VisuallyHidden from '@radix-ui/react-visually-hidden'\nimport * as React from 'react'\n\nimport { Checkbox } from '../checkbox'\nimport { Label } from '../label'\nimport { useDataTable } from './DataTableContext'\n\nexport const DataTableSelectAllRowsCheckbox = ({\n label = 'All rows selection'\n}: {\n label?: string\n}) => {\n const {\n getIsAllPageRowsSelected,\n getIsSomePageRowsSelected,\n toggleAllPageRowsSelected,\n tableId\n } = useDataTable()\n\n const getCheckedState = () => {\n if (getIsSomePageRowsSelected()) return 'indeterminate'\n if (getIsAllPageRowsSelected()) return true\n return false\n }\n\n const updateCheckedState = () => {\n if (getIsSomePageRowsSelected()) {\n return toggleAllPageRowsSelected(false)\n }\n return toggleAllPageRowsSelected(!getIsAllPageRowsSelected())\n }\n\n return (\n <>\n <VisuallyHidden.Root>\n <Label htmlFor={`${tableId}_all_rows_selection`}>{label}</Label>\n </VisuallyHidden.Root>\n\n <Checkbox\n size=\"lg\"\n checked={getCheckedState()}\n onCheckedChange={updateCheckedState}\n name={`${tableId}_allRowsSelection`}\n />\n </>\n )\n}\n"],"names":["DataTableSelectAllRowsCheckbox","label","getIsAllPageRowsSelected","getIsSomePageRowsSelected","toggleAllPageRowsSelected","tableId","useDataTable","getCheckedState","updateCheckedState","React","VisuallyHidden","Label","Checkbox"],"mappings":"4NAOa,MAAAA,EAAiC,CAAC,CAC7C,MAAAC,EAAQ,oBACV,IAEM,CACJ,KAAM,CACJ,yBAAAC,EACA,0BAAAC,EACA,0BAAAC,EACA,QAAAC,CACF,EAAIC,IAEEC,EAAkB,IAClBJ,EAA0B,EAAU,gBACpC,CAAA,CAAAD,EAAyB,EAIzBM,EAAqB,IACrBL,IACKC,EAA0B,EAAK,EAEjCA,EAA0B,CAACF,GAA0B,EAG9D,OACEO,EAAA,cAAAA,EAAA,SACEA,KAAAA,EAAA,cAACC,EAAe,KAAf,KACCD,EAAA,cAACE,EAAA,CAAM,QAAS,GAAGN,sBAA+BJ,EAAAA,CAAM,CAC1D,EAEAQ,EAAA,cAACG,EAAA,CACC,KAAK,KACL,QAASL,EACT,EAAA,gBAAiBC,EACjB,KAAM,GAAGH,oBACX,CAAA,CACF,CAEJ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as e from"react";import{Table as A}from"../table/Table.js";import{DataTable as g}from"./DataTable.js";import{AsyncDataState as L}from"./DataTable.types.js";import{useDataTable as B}from"./DataTableContext.js";import{DataTableLoading as P}from"./DataTableLoading.js";const _=({sortable:k,striped:
|
|
1
|
+
import*as e from"react";import{Table as A}from"../table/Table.js";import{DataTable as g}from"./DataTable.js";import{AsyncDataState as L}from"./DataTable.types.js";import{useDataTable as B}from"./DataTableContext.js";import{DataTableLoading as P}from"./DataTableLoading.js";const _=({sortable:k,striped:E,theme:S="white",css:h,scrollOptions:t={numberOfStickyColumns:0,stickyHeaderOffset:0,hasStickyHeader:!1},rowAction:v,...C})=>{const{asyncDataState:O,getTotalRows:w,getCanSomeRowsExpand:m,rowSelection:f,enableRowSelection:d,tableId:H,setTablePosition:i}=B(),r=e.useRef(null),R=e.useRef(!1),l=e.useRef(!1),n=e.useMemo(()=>typeof document>"u"?null:document.body,[]);e.useEffect(()=>{if(!n||typeof IntersectionObserver>"u")return;const o=()=>{if(r.current){const s=r.current.getBoundingClientRect().top,c=r.current.getBoundingClientRect().bottom;i(u=>({...u,top:s,bottom:c}))}l.current=!1},a=()=>{l.current||(requestAnimationFrame(o),l.current=!0)};if(!r.current)return;const p=(t==null?void 0:t.stickyHeaderOffset)||0,T={rootMargin:`-${p}px 0px -${p}px 0px`,threshold:0},x=s=>{if(!s||s.length===0)return;const c=s[0];R.current=c.isIntersecting,c.isIntersecting?n==null||n.addEventListener("scroll",a):n==null||n.removeEventListener("scroll",a),i(u=>({...u,isVisible:c.isIntersecting}))},b=new IntersectionObserver(x,T);return r.current&&(t.hasStickyHeader||Object.keys(f||{}).length>0)&&b.observe(r.current),()=>{b.disconnect(),n==null||n.removeEventListener("scroll",a)}},[f,t.hasStickyHeader,t==null?void 0:t.stickyHeaderOffset,n,i]);const y=O===L.PENDING,D=!y&&w()===0,I=()=>{let o=0;return m()&&!!d?o=2:(m()||!!d)&&(o=1),`${H}_${o}_control_columns`};return D?null:e.createElement(e.Fragment,null,e.createElement(P,null),e.createElement("div",{style:{display:"contents"}},e.createElement(A,{...C,ref:r,numberOfStickyColumns:t.numberOfStickyColumns,scrollContainerCss:{...t.scrollContainerCss},scrollContainerkey:I(),css:{...h,...y&&{opacity:.5,pointerEvents:"none",transition:"opacity 250ms linear 150ms"}}},e.createElement(g.Head,{theme:S,sortable:k,isSticky:t.hasStickyHeader,stickyOffset:t.stickyHeaderOffset,css:t.headerCss}),e.createElement(g.Body,{striped:E,rowAction:v}))))};export{_ as DataTableTable};
|
|
2
2
|
//# sourceMappingURL=DataTableTable.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableTable.js","sources":["../../../src/components/data-table/DataTableTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS } from '~/stitches'\n\nimport { Table } from '../table'\nimport { TableBody } from '../table/TableBody'\nimport { DataTable } from './DataTable'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableLoading } from './DataTableLoading'\n\nexport type DataTableTableProps = Omit<\n React.ComponentProps<typeof Table>,\n 'children' | 'numberOfStickyColumns'\n> &\n Partial<\n Pick<React.ComponentProps<typeof DataTableHead>, 'theme' | 'sortable'>\n > &\n Partial<Pick<React.ComponentProps<typeof TableBody>, 'striped'>> & {\n scrollOptions?: {\n hasStickyHeader?: boolean\n stickyHeaderOffset?: number\n headerCss?: CSS\n numberOfStickyColumns?: number\n scrollContainerCss?: CSS\n }\n rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n }\n\nexport const DataTableTable = ({\n sortable,\n striped,\n theme,\n css,\n scrollOptions = {\n numberOfStickyColumns: 0,\n stickyHeaderOffset: 0,\n hasStickyHeader: false\n },\n rowAction,\n ...props\n}: DataTableTableProps): JSX.Element | null => {\n const {\n asyncDataState,\n getTotalRows,\n getCanSomeRowsExpand,\n rowSelection,\n enableRowSelection,\n tableId,\n setTablePosition\n } = useDataTable()\n\n const tableRef = React.useRef<HTMLTableElement | null>(null)\n const isTableVisible = React.useRef(false)\n const isScrolling = React.useRef<boolean>(false)\n\n const scrollTarget = React.useMemo(() => {\n
|
|
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 stickyHeaderOffset?: number\n headerCss?: CSS\n numberOfStickyColumns?: number\n scrollContainerCss?: CSS\n }\n rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n }\n\nexport const DataTableTable = ({\n sortable,\n striped,\n theme = 'white',\n css,\n scrollOptions = {\n numberOfStickyColumns: 0,\n stickyHeaderOffset: 0,\n hasStickyHeader: false\n },\n rowAction,\n ...props\n}: DataTableTableProps): JSX.Element | null => {\n const {\n asyncDataState,\n getTotalRows,\n getCanSomeRowsExpand,\n rowSelection,\n enableRowSelection,\n tableId,\n setTablePosition\n } = useDataTable()\n\n const tableRef = React.useRef<HTMLTableElement | null>(null)\n const isTableVisible = React.useRef(false)\n const isScrolling = React.useRef<boolean>(false)\n\n const scrollTarget = React.useMemo(() => {\n if (typeof document === 'undefined') return null\n return document.body\n }, [])\n\n React.useEffect(() => {\n if (!scrollTarget || typeof IntersectionObserver === 'undefined') {\n return\n }\n\n const updatePosition = () => {\n if (tableRef.current) {\n const tableTop = tableRef.current.getBoundingClientRect().top\n const tableBottom = tableRef.current.getBoundingClientRect().bottom\n\n setTablePosition((prevPosition) => ({\n ...prevPosition,\n top: tableTop,\n bottom: tableBottom\n }))\n }\n isScrolling.current = false\n }\n\n const handleScroll = () => {\n if (!isScrolling.current) {\n requestAnimationFrame(updatePosition)\n isScrolling.current = true\n }\n }\n\n if (!tableRef.current) return\n\n const observerOffset = scrollOptions?.stickyHeaderOffset || 0\n\n const observerOptions = {\n rootMargin: `-${observerOffset}px 0px -${observerOffset}px 0px`,\n threshold: 0\n }\n\n const handleTableIntersection = (entries: IntersectionObserverEntry[]) => {\n if (!entries || entries.length === 0) return\n const entry = entries[0]\n\n isTableVisible.current = entry.isIntersecting\n\n if (entry.isIntersecting) {\n //add scroll listener\n scrollTarget?.addEventListener('scroll', handleScroll)\n } else {\n //remove scroll listener\n scrollTarget?.removeEventListener('scroll', handleScroll)\n }\n\n setTablePosition((prevPosition) => ({\n ...prevPosition,\n isVisible: entry.isIntersecting\n }))\n }\n\n const tableObserver = new IntersectionObserver(\n handleTableIntersection,\n observerOptions\n )\n\n //only track table position if we have a sticky header or bulk actions active\n if (\n tableRef.current &&\n (scrollOptions.hasStickyHeader ||\n Object.keys(rowSelection || {}).length > 0)\n ) {\n tableObserver.observe(tableRef.current)\n }\n\n return () => {\n tableObserver.disconnect()\n scrollTarget?.removeEventListener('scroll', handleScroll)\n }\n }, [\n rowSelection,\n scrollOptions.hasStickyHeader,\n scrollOptions?.stickyHeaderOffset,\n scrollTarget,\n setTablePosition\n ])\n\n const isPending = asyncDataState === AsyncDataState.PENDING\n const isEmpty = !isPending && getTotalRows() === 0\n\n const buildScrollContainerKey = (): string => {\n let controlColumnCount = 0\n\n if (getCanSomeRowsExpand() && !!enableRowSelection) {\n controlColumnCount = 2\n } else if (getCanSomeRowsExpand() || !!enableRowSelection) {\n controlColumnCount = 1\n }\n\n return `${tableId}_${controlColumnCount}_control_columns`\n }\n\n if (isEmpty) return null\n\n return (\n <>\n <DataTableLoading />\n <div style={{ display: 'contents' }}>\n <Table\n {...props}\n ref={tableRef}\n numberOfStickyColumns={scrollOptions.numberOfStickyColumns}\n scrollContainerCss={{\n ...scrollOptions.scrollContainerCss\n }}\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 stickyOffset={scrollOptions.stickyHeaderOffset}\n css={scrollOptions.headerCss}\n />\n <DataTable.Body striped={striped} rowAction={rowAction} />\n </Table>\n </div>\n </>\n )\n}\n"],"names":["DataTableTable","sortable","striped","theme","css","scrollOptions","rowAction","props","asyncDataState","getTotalRows","getCanSomeRowsExpand","rowSelection","enableRowSelection","tableId","setTablePosition","useDataTable","tableRef","React","isTableVisible","isScrolling","scrollTarget","updatePosition","tableTop","tableBottom","prevPosition","handleScroll","observerOffset","observerOptions","handleTableIntersection","entries","entry","tableObserver","isPending","AsyncDataState","isEmpty","buildScrollContainerKey","controlColumnCount","DataTableLoading","Table","DataTable"],"mappings":"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"}
|