@atom-learning/components 5.10.0 → 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 +4 -5
- package/dist/components/data-table/DataTableHead.js +1 -1
- package/dist/components/data-table/DataTableHead.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/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,16 +1,15 @@
|
|
|
1
|
-
# [5.
|
|
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
|
-
*
|
|
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))
|
|
7
8
|
|
|
8
9
|
|
|
9
10
|
### Features
|
|
10
11
|
|
|
11
|
-
*
|
|
12
|
-
* make white the default table theme ([f02d207](https://github.com/Atom-Learning/components/commit/f02d20773b7725bfc47d5b26fac8b729c8fbd0a7))
|
|
13
|
-
* row hover shadow effect ([d550027](https://github.com/Atom-Learning/components/commit/d55002715359c450a84749ef90abae8164d755ea))
|
|
12
|
+
* included sandbox startup task ([64e5827](https://github.com/Atom-Learning/components/commit/64e582743887065a2d741051bd9850ebe6b68ee3))
|
|
14
13
|
|
|
15
14
|
# [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
|
|
16
15
|
|
|
@@ -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*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 = '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
|
|
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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"}
|