@atom-learning/components 5.12.1 → 5.13.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 -16
- package/dist/components/checkbox/Checkbox.js +1 -1
- package/dist/components/checkbox/Checkbox.js.map +1 -1
- package/dist/components/data-table/DataTable.d.ts +12 -3
- package/dist/components/data-table/DataTableHead.d.ts +3 -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/DataTableHeaderCell.d.ts +3 -1
- package/dist/components/data-table/DataTableHeaderCell.js +1 -1
- package/dist/components/data-table/DataTableHeaderCell.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/DataTableTable.d.ts +4 -1
- package/dist/components/data-table/DataTableTable.js +1 -1
- package/dist/components/data-table/DataTableTable.js.map +1 -1
- package/dist/components/table/Table.js +1 -1
- package/dist/components/table/Table.js.map +1 -1
- package/dist/components/table/TableCell.js +1 -1
- package/dist/components/table/TableCell.js.map +1 -1
- package/dist/components/table/TableHeaderCell.js +1 -1
- package/dist/components/table/TableHeaderCell.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,23 +1,15 @@
|
|
|
1
|
-
|
|
1
|
+
# [5.13.0](https://github.com/Atom-Learning/components/compare/v5.12.1...v5.13.0) (2025-11-21)
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
### Bug Fixes
|
|
5
5
|
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
*
|
|
13
|
-
* nested conditional ([58ab3d1](https://github.com/Atom-Learning/components/commit/58ab3d1f4a57fd6d7120e38cb1e65a743933cff0))
|
|
14
|
-
* replace common styled references with elements, replace single-use link/button resets ([3c56b63](https://github.com/Atom-Learning/components/commit/3c56b63675efb06c79208b338f70a8635f3f9f83))
|
|
15
|
-
* replace disabled util ([d714781](https://github.com/Atom-Learning/components/commit/d714781108e7c914c1003baa3e2e0dfe68e40474))
|
|
16
|
-
* replace focus-visible util ([e8a2610](https://github.com/Atom-Learning/components/commit/e8a261024e5cf9c0ac4ef37f1c7ed571f3cbb498))
|
|
17
|
-
* selectors, styles ([7e879dd](https://github.com/Atom-Learning/components/commit/7e879dd7336f5e93bb2b798d39835f0637965953))
|
|
18
|
-
* snapshots ([829873a](https://github.com/Atom-Learning/components/commit/829873ab9966cdfd51bfab97ca5093a280abdbd4))
|
|
19
|
-
* snapshots ([d35dcb9](https://github.com/Atom-Learning/components/commit/d35dcb959576520359e2358320f7f0d7aff877ca))
|
|
20
|
-
* update docs ([f361f60](https://github.com/Atom-Learning/components/commit/f361f60899944e50e286476de4039eafa0609526))
|
|
6
|
+
* made table container optional ([1f20c17](https://github.com/Atom-Learning/components/commit/1f20c17f7382686780fe5f7369e702aad3f051ad))
|
|
7
|
+
* updated snapshots ([c56d81a](https://github.com/Atom-Learning/components/commit/c56d81a5218c66e4c1a1f9fd4ba81205a6bfa38e))
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
### Features
|
|
11
|
+
|
|
12
|
+
* ui improvements for datatable ([37376d8](https://github.com/Atom-Learning/components/commit/37376d8118f7720581bf8917eee644f2a55dd149))
|
|
21
13
|
|
|
22
14
|
# [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
|
|
23
15
|
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Minus as
|
|
1
|
+
import{Minus as m,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{overrideStitchesVariantValue as p}from"../../utilities/override-stitches-variant-value/overrideStitchesVariantValue.js";import{Icon as u}from"../icon/Icon.js";const b=r("div",{position:"relative",zIndex:1}),f=r("div",{position:"absolute",inset:"-$3",opacity:.5}),y=r(i.Indicator,{}),x=r(i.Root,{appearance:"none",position:"relative",backgroundColor:"transparent",border:"1px solid $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,"&:not([disabled]):before":{content:'""',position:"absolute",inset:"-$2",zIndex:-1,borderRadius:"50%",bg:"$primary300",opacity:0,transform:"scale(0)",transition:"opacity 125ms ease-in-out, transform 125ms ease-in-out"},"&:not([disabled]):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]":{opacity:.3,cursor:"not-allowed"},variants:{state:{error:{borderColor:"$danger"}},size:{md:{size:"$1"},lg:{size:"$2",mt:"1px"}}}}),$={md:"sm",lg:"sm"},a=e.forwardRef(({size:o="md",checked:t,...s},n)=>{const d=e.useMemo(()=>p(o,l=>$[l]),[o]);return e.createElement(b,null,e.createElement(x,{ref:n,checked:t,size:o,...s},e.createElement(f,null),e.createElement(y,{asChild:!0},e.createElement(u,{is:t==="indeterminate"?m:c,css:{strokeWidth:"3"},size:d}))))});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 { 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 $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 //
|
|
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 { 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 $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 '&:not([disabled]):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 125ms ease-in-out, transform 125ms ease-in-out'\n },\n '&:not([disabled]):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]': {\n opacity: 0.3,\n cursor: 'not-allowed'\n },\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: '1px'\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","toIconSize","Checkbox","React","size","checked","rest","ref","iconSize","overrideStitchesVariantValue","s","Icon","Minus","Ok"],"mappings":"yUASA,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,CAAE,CAAA,EAEpDC,EAAiBJ,EAAOG,EAAc,KAAM,CAChD,WAAY,OACZ,SAAU,WACV,gBAAiB,cACjB,OAAQ,qBACR,aAAc,MACd,MAAO,QACP,GAAI,QACJ,OAAQ,UACR,KAAM,KACN,EAAG,EACH,QAAS,OACT,WAAY,SACZ,eAAgB,SAChB,WAAY,oBACZ,WAAY,EAGZ,2BAA4B,CAC1B,QAAS,KACT,SAAU,WACV,MAAO,MACP,OAAQ,GACR,aAAc,MACd,GAAI,cACJ,QAAS,EACT,UAAW,WACX,WAAY,wDACd,EACA,iCAAkC,CAChC,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,cAAe,CACb,QAAS,GACT,OAAQ,aACV,EACA,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,EAEKE,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,cAACR,EAAA,KACCQ,EAAA,cAACH,EAAA,CAAe,IAAKO,EAAK,QAASF,EAAS,KAAMD,EAAO,GAAGE,CAAAA,EAC1DH,EAAA,cAACN,EAAA,IAAgB,EACjBM,EAAA,cAACL,EAAA,CAAgB,QAAO,EAAA,EACtBK,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"}
|
|
@@ -1169,6 +1169,8 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
|
|
|
1169
1169
|
sortable?: boolean;
|
|
1170
1170
|
isSticky?: boolean;
|
|
1171
1171
|
stickyOffset?: number;
|
|
1172
|
+
showTotalInFirstColumn?: boolean;
|
|
1173
|
+
totalSuffix?: string;
|
|
1172
1174
|
headerCss?: import("../..").CSS;
|
|
1173
1175
|
}, "theme" | "sortable">> & Partial<Pick<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
|
|
1174
1176
|
ref?: ((instance: HTMLTableSectionElement | null) => void) | import("react").RefObject<HTMLTableSectionElement> | null | undefined;
|
|
@@ -1551,8 +1553,11 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
|
|
|
1551
1553
|
headerCss?: import("../..").CSS;
|
|
1552
1554
|
numberOfStickyColumns?: number;
|
|
1553
1555
|
scrollContainerCss?: import("../..").CSS;
|
|
1556
|
+
showTotalInFirstColumn?: boolean;
|
|
1557
|
+
totalSuffix?: string;
|
|
1554
1558
|
};
|
|
1555
1559
|
rowAction?: (row: Record<string, unknown>, event: import("react").MouseEvent) => void;
|
|
1560
|
+
withContainer?: boolean;
|
|
1556
1561
|
} & {
|
|
1557
1562
|
idColumn?: string;
|
|
1558
1563
|
onDragAndDrop?: (onDragAndDropData: {
|
|
@@ -1996,7 +2001,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
|
|
|
1996
2001
|
* If you need more customisation options, you can build your own implementation
|
|
1997
2002
|
* with `useDataTable` and the UI-only `Table` components.
|
|
1998
2003
|
*/
|
|
1999
|
-
Head: ({ sortable, theme, isSticky, stickyOffset, style, css, ...props }: Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
|
|
2004
|
+
Head: ({ sortable, theme, isSticky, stickyOffset, showTotalInFirstColumn, totalSuffix, style, css, ...props }: Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
|
|
2000
2005
|
ref?: ((instance: HTMLTableSectionElement | null) => void) | import("react").RefObject<HTMLTableSectionElement> | null | undefined;
|
|
2001
2006
|
}, "css" | "theme" | "isSticky"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
|
|
2002
2007
|
theme?: "light" | "white" | "primary" | "primaryDark" | "primaryLight" | undefined;
|
|
@@ -2375,6 +2380,8 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
|
|
|
2375
2380
|
sortable?: boolean;
|
|
2376
2381
|
isSticky?: boolean;
|
|
2377
2382
|
stickyOffset?: number;
|
|
2383
|
+
showTotalInFirstColumn?: boolean;
|
|
2384
|
+
totalSuffix?: string;
|
|
2378
2385
|
headerCss?: import("../..").CSS;
|
|
2379
2386
|
}) => import("react").ReactElement;
|
|
2380
2387
|
/** Default header implementation for `DataTable`
|
|
@@ -2382,7 +2389,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
|
|
|
2382
2389
|
* Can be configured to make the column sortable. If you need more customisation options,
|
|
2383
2390
|
* you can build your own implementation with the UI-only `Table` components.
|
|
2384
2391
|
*/
|
|
2385
|
-
HeaderCell: ({ header, children, css, ...props }: Omit<Omit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref"> & {
|
|
2392
|
+
HeaderCell: ({ header, includeTotal, totalSuffix, children, css, ...props }: Omit<Omit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref"> & {
|
|
2386
2393
|
ref?: ((instance: HTMLTableHeaderCellElement | null) => void) | import("react").RefObject<HTMLTableHeaderCellElement> | null | undefined;
|
|
2387
2394
|
}, "css"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{}, {
|
|
2388
2395
|
sm: string;
|
|
@@ -2756,6 +2763,8 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
|
|
|
2756
2763
|
}> | undefined;
|
|
2757
2764
|
} & {
|
|
2758
2765
|
header: import("@tanstack/table-core").Header<Record<string, unknown>, unknown>;
|
|
2766
|
+
includeTotal?: boolean;
|
|
2767
|
+
totalSuffix?: string;
|
|
2759
2768
|
}) => import("react").JSX.Element;
|
|
2760
2769
|
/** Default pagination implementation for `DataTable`
|
|
2761
2770
|
*
|
|
@@ -3169,7 +3178,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
|
|
|
3169
3178
|
* scratch with `useDataTable` and the UI-only `Table` components.
|
|
3170
3179
|
*
|
|
3171
3180
|
*/
|
|
3172
|
-
Table: ({ sortable, striped, theme, css, scrollOptions, rowAction, ...props }: import("./DataTableTable").DataTableTableProps) => JSX.Element | null;
|
|
3181
|
+
Table: ({ sortable, striped, theme, css, scrollOptions, rowAction, withContainer, ...props }: import("./DataTableTable").DataTableTableProps) => JSX.Element | null;
|
|
3173
3182
|
/** Default loading implementation for remote data
|
|
3174
3183
|
*
|
|
3175
3184
|
* Renders a loading component while fetching the paginated data using `getAsyncData`.
|
|
@@ -5,7 +5,9 @@ type DataTableHeadProps = Omit<React.ComponentProps<typeof Table.Header>, 'child
|
|
|
5
5
|
sortable?: boolean;
|
|
6
6
|
isSticky?: boolean;
|
|
7
7
|
stickyOffset?: number;
|
|
8
|
+
showTotalInFirstColumn?: boolean;
|
|
9
|
+
totalSuffix?: string;
|
|
8
10
|
headerCss?: CSS;
|
|
9
11
|
};
|
|
10
|
-
export declare const DataTableHead: ({ sortable, theme, isSticky, stickyOffset, style, css, ...props }: DataTableHeadProps) => React.ReactElement;
|
|
12
|
+
export declare const DataTableHead: ({ sortable, theme, isSticky, stickyOffset, showTotalInFirstColumn, totalSuffix, style, css, ...props }: DataTableHeadProps) => React.ReactElement;
|
|
11
13
|
export {};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as t from"react";import{Table as
|
|
1
|
+
import*as t from"react";import{Table as r}from"../table/Table.js";import{DataTableSelectAllRowsCheckbox as k}from"./DataTableSelectAllRowsCheckbox.js";import{useDataTable as $}from"./DataTableContext.js";import{DataTable as I}from"./DataTable.js";const A=({sortable:u=!0,theme:b="light",isSticky:s=!1,stickyOffset:n=0,showTotalInFirstColumn:v,totalSuffix:E,style:y,css:R,...S})=>{var d;const{getHeaderGroups:T,setIsSortable:m,enableRowSelection:w,getCanSomeRowsExpand:x,tablePosition:e,setTablePosition:g}=$();t.useEffect(()=>{m(u)},[u,m]);const l=t.useRef(null),i=t.useRef(null),C=t.useRef(0),[f,D]=t.useState(0),[c,p]=t.useState(!1),h=(d=l==null?void 0:l.current)==null?void 0:d.closest("thead");if(h&&(e==null?void 0:e.offsetTop)===null){const o=h.getBoundingClientRect().height,a=n+o;e&&g({...e,offsetTop:a||0})}return t.useEffect(()=>{if(!!s&&(!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),C.current=o,D(o),requestAnimationFrame(()=>{p(!1)})}},[s,n,e]),t.createElement(r.Header,{theme:b,style:{...y,"--header-offset":`${f}px`},css:{position:"relative",zIndex:3,"& tr:not(:last-child) > th":{borderBottom:"none"},"& tr:not(:first-child) > th":{borderRadius:"0 !important"},...R},...S},T().map(o=>t.createElement(r.Row,{key:o.id,ref:l,css:{...s&&f!==0&&{transform:"translateY(var(--header-offset))",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"}}}},x()&&t.createElement(r.HeaderCell,{css:{width:"$4"}}),w&&t.createElement(r.HeaderCell,{css:{width:"$4"}},t.createElement(k,null)),o.headers.map((a,H)=>t.createElement(I.HeaderCell,{header:a,key:a.id,includeTotal:H===0&&v,totalSuffix:E})))))};export{A 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 style,\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 style={{\n ...style,\n '--header-offset': `${headerOffset}px`\n }}\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(var(--header-offset))`,\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
|
|
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 showTotalInFirstColumn?: boolean\n totalSuffix?: string\n headerCss?: CSS\n}\n\nexport const DataTableHead = ({\n sortable = true,\n theme = 'light',\n isSticky = false,\n stickyOffset = 0,\n showTotalInFirstColumn,\n totalSuffix,\n style,\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 style={{\n ...style,\n '--header-offset': `${headerOffset}px`\n }}\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(var(--header-offset))`,\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, index) => (\n <DataTable.HeaderCell\n header={header}\n key={header.id}\n includeTotal={index === 0 && showTotalInFirstColumn}\n totalSuffix={totalSuffix}\n />\n ))}\n </Table.Row>\n )\n })}\n </Table.Header>\n )\n}\n"],"names":["DataTableHead","sortable","theme","isSticky","stickyOffset","showTotalInFirstColumn","totalSuffix","style","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","index","DataTable"],"mappings":"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"}
|
|
@@ -3,6 +3,8 @@ import * as React from 'react';
|
|
|
3
3
|
import { Table } from '../table';
|
|
4
4
|
type DataTableHeaderProps = React.ComponentProps<typeof Table.HeaderCell> & {
|
|
5
5
|
header: Header<Record<string, unknown>, unknown>;
|
|
6
|
+
includeTotal?: boolean;
|
|
7
|
+
totalSuffix?: string;
|
|
6
8
|
};
|
|
7
|
-
export declare const DataTableHeaderCell: ({ header, children, css, ...props }: DataTableHeaderProps) => React.JSX.Element;
|
|
9
|
+
export declare const DataTableHeaderCell: ({ header, includeTotal, totalSuffix, children, css, ...props }: DataTableHeaderProps) => React.JSX.Element;
|
|
8
10
|
export {};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{ArrowUp as
|
|
1
|
+
import{ArrowUp as S,ArrowDown as x}from"@atom-learning/icons";import{styled as m}from"@atom-learning/stitches-react";import{flexRender as E}from"@tanstack/react-table";import*as r from"react";import{useHover as k}from"react-aria";import{Flex as c}from"../flex/Flex.js";import{Icon as C}from"../icon/Icon.js";import{Table as D}from"../table/Table.js";import{Text as T}from"../text/Text.js";import{useDataTable as H}from"./DataTableContext.js";const I=m(T,{color:"$grey600",whiteSpace:"nowrap",display:"none","@media (min-width: 800px)":{display:"block"}}),R=m(D.HeaderCell,{variants:{isSortable:{true:{cursor:"pointer",position:"relative","& > *":{position:"relative"},"&:before":{content:"",position:"absolute",inset:0,opacity:0,backgroundColor:"$primary100",transition:"opacity 200ms ease"},"&:hover":{"&::before":{opacity:.5}}}}}}),z={asc:S,desc:x},A=({direction:e})=>r.createElement(C,{is:z[e],size:"sm",css:{position:"absolute",left:"$1",stroke:"$primary900"}}),F=({header:e,includeTotal:p=!1,totalSuffix:d="items",children:K,css:f,...u})=>{var a,l;const s=e.column.getIsSorted(),{isSortable:t,getRowModel:g}=H(),i=e.column.getCanSort(),y=(l=(a=g())==null?void 0:a.rows)==null?void 0:l.length,{hoverProps:b,isHovered:v}=k({}),h=(o,w)=>{(o.key==="Enter"||o.key===" ")&&(o.preventDefault(),w(o))},n=e.column.getToggleSortingHandler();return r.createElement(R,{isSortable:t&&i,colSpan:e.colSpan,onClick:t&&i&&n?n:void 0,onKeyDown:o=>t&&i&&n&&h(o,n),tabIndex:t&&i?0:-1,...b,css:f,...u},r.createElement(c,{align:"center",gap:1,justify:e.colSpan>1?"center":"flex-start"},E(e.column.columnDef.header,e.getContext()),s&&t&&r.createElement(c,{align:"center",css:{position:"relative",width:"24px",height:"24px",ml:"$2",bg:v?"$primary200":"$primary100",borderRadius:"$0"}},r.createElement(A,{direction:s})),p&&r.createElement(I,{size:"sm",weight:"normal"},"(",y," ",d,")")))};export{F as DataTableHeaderCell};
|
|
2
2
|
//# sourceMappingURL=DataTableHeaderCell.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableHeaderCell.js","sources":["../../../src/components/data-table/DataTableHeaderCell.tsx"],"sourcesContent":["import { ArrowDown, ArrowUp } from '@atom-learning/icons'\nimport { styled } from '@atom-learning/stitches-react'\nimport type { Header } from '@tanstack/react-table'\nimport { flexRender } from '@tanstack/react-table'\nimport * as React from 'react'\nimport { useHover } from 'react-aria'\n\nimport { Flex } from '../flex'\nimport { Icon } from '../icon'\nimport { Table } from '../table'\nimport { useDataTable } from './DataTableContext'\ntype DataTableHeaderProps = React.ComponentProps<typeof Table.HeaderCell> & {\n header: Header<Record<string, unknown>, unknown>\n}\n\nconst StyledTableHeaderCell = styled(Table.HeaderCell, {\n variants: {\n isSortable: {\n true: {\n cursor: 'pointer',\n position: 'relative',\n '& > *': {\n position: 'relative'\n },\n '&:before': {\n content: '',\n position: 'absolute',\n inset: 0,\n opacity: 0,\n backgroundColor: '$primary100',\n transition: 'opacity 200ms ease'\n },\n '&:hover': {\n '&::before': {\n opacity: 0.5\n }\n }\n }\n }\n }\n})\n\nconst sortIcons = {\n asc: ArrowUp,\n desc: ArrowDown\n}\n\nconst SortIcon = ({ direction }: { direction: 'asc' | 'desc' }) => (\n <Icon\n is={sortIcons[direction]}\n size=\"sm\"\n css={{ position: 'absolute', left: '$1', stroke: '$primary900' }}\n />\n)\n\nexport const DataTableHeaderCell = ({\n header,\n children,\n css,\n ...props\n}: DataTableHeaderProps) => {\n const sortDirection = header.column.getIsSorted()\n const { isSortable: isSortableTable } = useDataTable()\n // false for display columns, e.g. \"Actions\"\n const isDataColumn = header.column.getCanSort()\n\n const { hoverProps, isHovered } = useHover({})\n\n const handleKeyDown = (\n event: React.KeyboardEvent<HTMLTableCellElement>,\n callback: (event: unknown) => void | undefined\n ) => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault()\n callback(event as unknown)\n }\n }\n\n const headerSortingHandler = header.column.getToggleSortingHandler()\n\n return (\n <StyledTableHeaderCell\n isSortable={isSortableTable && isDataColumn}\n colSpan={header.colSpan}\n onClick={\n isSortableTable && isDataColumn && headerSortingHandler\n ? headerSortingHandler\n : undefined\n }\n onKeyDown={(event) =>\n isSortableTable &&\n isDataColumn &&\n headerSortingHandler &&\n handleKeyDown(event, headerSortingHandler)\n }\n tabIndex={isSortableTable && isDataColumn ? 0 : -1}\n {...hoverProps}\n css={css}\n {...props}\n >\n <Flex\n align=\"center\"\n justify={header.colSpan > 1 ? 'center' : 'flex-start'}\n >\n {flexRender(header.column.columnDef.header, header.getContext())}\n {sortDirection && isSortableTable && (\n <Flex\n align=\"center\"\n css={{\n position: 'relative',\n width: '24px',\n height: '24px',\n ml: '$2',\n bg: isHovered ? '$primary200' : '$primary100',\n borderRadius: '$0'\n }}\n >\n <SortIcon direction={sortDirection} />\n </Flex>\n )}\n </Flex>\n </StyledTableHeaderCell>\n )\n}\n"],"names":["
|
|
1
|
+
{"version":3,"file":"DataTableHeaderCell.js","sources":["../../../src/components/data-table/DataTableHeaderCell.tsx"],"sourcesContent":["import { ArrowDown, ArrowUp } from '@atom-learning/icons'\nimport { styled } from '@atom-learning/stitches-react'\nimport type { Header } from '@tanstack/react-table'\nimport { flexRender } from '@tanstack/react-table'\nimport * as React from 'react'\nimport { useHover } from 'react-aria'\n\nimport { Flex } from '../flex'\nimport { Icon } from '../icon'\nimport { Table } from '../table'\nimport { Text } from '../text'\nimport { useDataTable } from './DataTableContext'\ntype DataTableHeaderProps = React.ComponentProps<typeof Table.HeaderCell> & {\n header: Header<Record<string, unknown>, unknown>\n includeTotal?: boolean\n totalSuffix?: string\n}\n\nconst StyledCount = styled(Text, {\n color: '$grey600',\n whiteSpace: 'nowrap',\n display: 'none',\n '@media (min-width: 800px)': {\n display: 'block'\n }\n})\n\nconst StyledTableHeaderCell = styled(Table.HeaderCell, {\n variants: {\n isSortable: {\n true: {\n cursor: 'pointer',\n position: 'relative',\n '& > *': {\n position: 'relative'\n },\n '&:before': {\n content: '',\n position: 'absolute',\n inset: 0,\n opacity: 0,\n backgroundColor: '$primary100',\n transition: 'opacity 200ms ease'\n },\n '&:hover': {\n '&::before': {\n opacity: 0.5\n }\n }\n }\n }\n }\n})\n\nconst sortIcons = {\n asc: ArrowUp,\n desc: ArrowDown\n}\n\nconst SortIcon = ({ direction }: { direction: 'asc' | 'desc' }) => (\n <Icon\n is={sortIcons[direction]}\n size=\"sm\"\n css={{ position: 'absolute', left: '$1', stroke: '$primary900' }}\n />\n)\n\nexport const DataTableHeaderCell = ({\n header,\n includeTotal = false,\n totalSuffix = 'items',\n children,\n css,\n ...props\n}: DataTableHeaderProps) => {\n const sortDirection = header.column.getIsSorted()\n const { isSortable: isSortableTable, getRowModel } = useDataTable()\n // false for display columns, e.g. \"Actions\"\n const isDataColumn = header.column.getCanSort()\n\n const totalRows = getRowModel()?.rows?.length\n\n const { hoverProps, isHovered } = useHover({})\n\n const handleKeyDown = (\n event: React.KeyboardEvent<HTMLTableCellElement>,\n callback: (event: unknown) => void | undefined\n ) => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault()\n callback(event as unknown)\n }\n }\n\n const headerSortingHandler = header.column.getToggleSortingHandler()\n\n return (\n <StyledTableHeaderCell\n isSortable={isSortableTable && isDataColumn}\n colSpan={header.colSpan}\n onClick={\n isSortableTable && isDataColumn && headerSortingHandler\n ? headerSortingHandler\n : undefined\n }\n onKeyDown={(event) =>\n isSortableTable &&\n isDataColumn &&\n headerSortingHandler &&\n handleKeyDown(event, headerSortingHandler)\n }\n tabIndex={isSortableTable && isDataColumn ? 0 : -1}\n {...hoverProps}\n css={css}\n {...props}\n >\n <Flex\n align=\"center\"\n gap={1}\n justify={header.colSpan > 1 ? 'center' : 'flex-start'}\n >\n {flexRender(header.column.columnDef.header, header.getContext())}\n {sortDirection && isSortableTable && (\n <Flex\n align=\"center\"\n css={{\n position: 'relative',\n width: '24px',\n height: '24px',\n ml: '$2',\n bg: isHovered ? '$primary200' : '$primary100',\n borderRadius: '$0'\n }}\n >\n <SortIcon direction={sortDirection} />\n </Flex>\n )}\n {includeTotal && (\n <StyledCount size=\"sm\" weight=\"normal\">\n ({totalRows} {totalSuffix})\n </StyledCount>\n )}\n </Flex>\n </StyledTableHeaderCell>\n )\n}\n"],"names":["StyledCount","styled","Text","StyledTableHeaderCell","Table","sortIcons","ArrowUp","ArrowDown","SortIcon","direction","React","Icon","DataTableHeaderCell","header","includeTotal","totalSuffix","children","css","props","_a","_b","sortDirection","isSortableTable","getRowModel","useDataTable","isDataColumn","totalRows","hoverProps","isHovered","useHover","handleKeyDown","event","callback","headerSortingHandler","Flex","flexRender"],"mappings":"0bAkBA,MAAMA,EAAcC,EAAOC,EAAM,CAC/B,MAAO,WACP,WAAY,SACZ,QAAS,OACT,4BAA6B,CAC3B,QAAS,OACX,CACF,CAAC,EAEKC,EAAwBF,EAAOG,EAAM,WAAY,CACrD,SAAU,CACR,WAAY,CACV,KAAM,CACJ,OAAQ,UACR,SAAU,WACV,QAAS,CACP,SAAU,UACZ,EACA,WAAY,CACV,QAAS,GACT,SAAU,WACV,MAAO,EACP,QAAS,EACT,gBAAiB,cACjB,WAAY,oBACd,EACA,UAAW,CACT,YAAa,CACX,QAAS,EACX,CACF,CACF,CACF,CACF,CACF,CAAC,EAEKC,EAAY,CAChB,IAAKC,EACL,KAAMC,CACR,EAEMC,EAAW,CAAC,CAAE,UAAAC,CAAU,IAC5BC,EAAA,cAACC,EAAA,CACC,GAAIN,EAAUI,GACd,KAAK,KACL,IAAK,CAAE,SAAU,WAAY,KAAM,KAAM,OAAQ,aAAc,EACjE,EAGWG,EAAsB,CAAC,CAClC,OAAAC,EACA,aAAAC,EAAe,GACf,YAAAC,EAAc,QACd,SAAAC,EACA,IAAAC,KACGC,CACL,IAA4B,CA1E5B,IAAAC,EAAAC,EA2EE,MAAMC,EAAgBR,EAAO,OAAO,YAAY,EAC1C,CAAE,WAAYS,EAAiB,YAAAC,CAAY,EAAIC,IAE/CC,EAAeZ,EAAO,OAAO,aAE7Ba,GAAYN,GAAAD,EAAAI,EAAY,IAAZ,YAAAJ,EAAe,OAAf,KAAAC,OAAAA,EAAqB,OAEjC,CAAE,WAAAO,EAAY,UAAAC,CAAU,EAAIC,EAAS,CAAA,CAAE,EAEvCC,EAAgB,CACpBC,EACAC,IACG,EACCD,EAAM,MAAQ,SAAWA,EAAM,MAAQ,OACzCA,EAAM,eAAA,EACNC,EAASD,CAAgB,EAE7B,EAEME,EAAuBpB,EAAO,OAAO,wBAAwB,EAEnE,OACEH,EAAA,cAACP,EAAA,CACC,WAAYmB,GAAmBG,EAC/B,QAASZ,EAAO,QAChB,QACES,GAAmBG,GAAgBQ,EAC/BA,EACA,OAEN,UAAYF,GACVT,GACAG,GACAQ,GACAH,EAAcC,EAAOE,CAAoB,EAE3C,SAAUX,GAAmBG,EAAe,EAAI,GAC/C,GAAGE,EACJ,IAAKV,EACJ,GAAGC,CAAAA,EAEJR,EAAA,cAACwB,EAAA,CACC,MAAM,SACN,IAAK,EACL,QAASrB,EAAO,QAAU,EAAI,SAAW,cAExCsB,EAAWtB,EAAO,OAAO,UAAU,OAAQA,EAAO,WAAA,CAAY,EAC9DQ,GAAiBC,GAChBZ,EAAA,cAACwB,EAAA,CACC,MAAM,SACN,IAAK,CACH,SAAU,WACV,MAAO,OACP,OAAQ,OACR,GAAI,KACJ,GAAIN,EAAY,cAAgB,cAChC,aAAc,IAChB,GAEAlB,EAAA,cAACF,EAAA,CAAS,UAAWa,CAAe,CAAA,CACtC,EAEDP,GACCJ,EAAA,cAACV,EAAA,CAAY,KAAK,KAAK,OAAO,QAAA,EAAS,IACnC0B,EAAU,IAAEX,EAAY,GAC5B,CAEJ,CACF,CAEJ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{ChevronDown as
|
|
1
|
+
import{ChevronDown as f,ChevronRight as h}from"@atom-learning/icons";import*as r from"react";import{styled as w}from"../../stitches.js";import{Icon as S}from"../icon/Icon.js";import{Table as l}from"../table/Table.js";import{useDataTable as C}from"./DataTableContext.js";import{DataTableDataCell as E}from"./DataTableDataCell.js";import{DataTableRowSelectionCheckbox as D}from"./DataTableRowSelectionCheckbox.js";const v=w(l.Row,{bg:"initial",position:"relative",variants:{isSelected:{true:{"&:nth-child(odd), &:nth-child(even)":{bg:"$primary100"}}},isDisabled:{true:{opacity:"30%"}},isFocusable:{true:{transform:"translateY(0)",boxShadow:"0px 4px 11px 0px hsla(0, 0%, 12%, 0)",transition:"transform 200ms ease-out, box-shadow 200ms ease-out","&:hover":{transform:"translateY(-1px)",boxShadow:"0px 4px 11px 0px hsla(0, 0%, 12%, 0.12)",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:n})=>{const{enableRowSelection:p,disabledRows:i,getCanSomeRowsExpand:m}=C(),s=!!(i!=null&&i[e.id]),g=e.getToggleExpandedHandler(),u=e.getToggleSelectedHandler(),b=()=>e.getIsSomeSelected()?"indeterminate":e.getIsSelected(),c=(t,o)=>{!n||!o.target.closest("tr")||d(o.target)||n(t.original,o)},x=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 r.createElement(v,{isSelected:e.getIsSelected(),isDisabled:s,isFocusable:!!n&&!s,...n&&{onClick:t=>c(e,t),tabIndex:0,css:{cursor:"pointer"},onKeyDown:x}},m()&&r.createElement(l.Cell,{"data-testid":`expand-icon-${e.id}`,css:{width:"$4",cursor:e.getCanExpand()?"pointer":"auto"},onClick:g},e.getCanExpand()&&r.createElement(S,{is:e.getIsExpanded()?f:h})),p&&r.createElement(l.Cell,{css:{width:"$4"}},r.createElement(D,{row:e,checked:b(),onCheckedChange:u})),e.getVisibleCells().map((t,o)=>r.createElement(E,{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 '&: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
|
|
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 position: 'relative',\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 transform: 'translateY(0)',\n boxShadow: '0px 4px 11px 0px hsla(0, 0%, 12%, 0)',\n transition: 'transform 200ms ease-out, box-shadow 200ms ease-out',\n '&:hover': {\n transform: 'translateY(-1px)',\n boxShadow: '0px 4px 11px 0px hsla(0, 0%, 12%, 0.12)',\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,WACV,SAAU,CACR,WAAY,CACV,KAAM,CACJ,sCAAuC,CACrC,GAAI,aACN,CACF,CACF,EACA,WAAY,CACV,KAAM,CACJ,QAAS,KACX,CACF,EACA,YAAa,CACX,KAAM,CACJ,UAAW,gBACX,UAAW,uCACX,WAAY,sDACZ,UAAW,CACT,UAAW,mBACX,UAAW,0CACX,OAAQ,CACV,EACA,UAAW,CACT,QAAS,wBACT,cAAe,OACf,OAAQ,CACN,GAAI,aACN,CACF,CACF,CACF,CACF,CACF,CAAC,EAEKC,EAAwBC,GACvBA,EACD,CAAA,EAAAA,EAAQ,QAAQ,oCAAoC,GACpDA,EAAQ,aAAa,MAAM,IAAM,UAFhB,GAMVC,EAAe,CAAC,CAAE,IAAAC,EAAK,UAAAC,CAAU,IAAyB,CACrE,KAAM,CAAE,mBAAAC,EAAoB,aAAAC,EAAc,qBAAAC,CAAqB,EAC7DC,IAEIC,EAAa,CAAC,EAACH,GAAA,MAAAA,EAAeH,EAAI,KAElCO,EAAsBP,EAAI,2BAC1BQ,EAAsBR,EAAI,yBAE1BS,EAAAA,EAAkB,IAClBT,EAAI,oBAA4B,gBAC7BA,EAAI,gBAGPU,EAAiB,CACrBC,EACAC,IACG,CACC,CAACX,GAID,CADgBW,EAAM,OAAmB,QAAQ,IAAI,GACtCf,EAAqBe,EAAM,MAAiB,GAI/DX,EAAUU,EAAQ,SAAUC,CAAK,CACnC,EAEMC,EAAiBD,GAAoD,CACzE,GAAIA,EAAM,MAAQ,SAAWA,EAAM,MAAQ,IAAK,CAC9C,GAAIf,EAAqBe,EAAM,MAAiB,EAC9C,OAEFA,EAAM,eAAe,EACrBF,EACEV,EACAY,CACF,CACF,CACA,GAAIA,EAAM,MAAQ,YAAa,CAC7BA,EAAM,eAAA,EACN,MAAME,EAAcF,EAAM,OAAuB,QAAQ,IAAI,EACvDG,EAAUD,GAAA,KAAAA,OAAAA,EAAY,mBACxBC,GAAWA,EAAQ,UAAY,MACjCA,EAAQ,OAEZ,CACA,GAAIH,EAAM,MAAQ,UAAW,CAC3BA,EAAM,eACN,EAAA,MAAME,EAAcF,EAAM,OAAuB,QAAQ,IAAI,EACvDI,EAAcF,GAAA,KAAA,OAAAA,EAAY,uBAC5BE,GAAeA,EAAY,UAAY,MACzCA,EAAY,MAEhB,CAAA,CACF,EAEA,OACEC,EAAA,cAACvB,EAAA,CACC,WAAYM,EAAI,cAChB,EAAA,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,CAECT,EAAAA,KACCa,EAAA,cAACrB,EAAM,KAAN,CACC,cAAa,eAAeI,EAAI,KAChC,IAAK,CAAE,MAAO,KAAM,OAAQA,EAAI,aAAa,EAAI,UAAY,MAAO,EACpE,QAASO,CAERP,EAAAA,EAAI,gBACHiB,EAAA,cAACC,EAAA,CAAK,GAAIlB,EAAI,cAAA,EAAkBmB,EAAcC,CAAAA,CAAc,CAEhE,EAGDlB,GACCe,EAAA,cAACrB,EAAM,KAAN,CAAW,IAAK,CAAE,MAAO,IAAK,GAC7BqB,EAAA,cAACI,EAAA,CACC,IAAKrB,EACL,QAASS,EAAAA,EACT,gBAAiBD,CAAAA,CACnB,CACF,EAEDR,EAAI,kBAAkB,IAAI,CAACsB,EAAMC,IACzBN,EAAA,cAACO,EAAA,CAAkB,IAAKF,EAAK,GAAI,KAAMA,CAAAA,CAAM,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:
|
|
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",style:{"--depth":e.depth},css:{mr:"$3",ml:"calc((var(--depth, 0) * 2) * 4px)"},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 size=\"lg\"\n style={{ '--depth': row.depth }}\n css={{ ml: 'calc((var(--depth, 0) * 2) * 4px)' }}\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 style={{ '--depth': row.depth }}\n css={{ mr: '$3', ml: 'calc((var(--depth, 0) * 2) * 4px)' }}\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,EAAa,EAEjC,OACEC,EAAA,cAAAA,EAAA,SAAA,KACEA,EAAA,cAACC,EAAe,KAAf,KACCD,EAAA,cAACE,EAAA,CAAM,QAAS,GAAGJ,SAAeJ,EAAI,cAAA,EAAiBG,CAAM,CAC/D,EACAG,EAAA,cAACG,EAAA,CACC,KAAK,KACL,MAAO,CAAE,UAAWT,EAAI,KAAM,EAC9B,IAAK,CAAE,GAAI,KAAM,GAAI,mCAAoC,EACzD,QAASC,EACT,gBAAiBC,EACjB,KAAM,GAAGE,SAAeJ,EAAI,eAC5B,SAAU,CAACA,EAAI,aACjB,CAAA,CAAA,CACF,CAEJ"}
|
|
@@ -10,7 +10,10 @@ export type DataTableTableProps = Omit<React.ComponentProps<typeof Table>, 'chil
|
|
|
10
10
|
headerCss?: CSS;
|
|
11
11
|
numberOfStickyColumns?: number;
|
|
12
12
|
scrollContainerCss?: CSS;
|
|
13
|
+
showTotalInFirstColumn?: boolean;
|
|
14
|
+
totalSuffix?: string;
|
|
13
15
|
};
|
|
14
16
|
rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void;
|
|
17
|
+
withContainer?: boolean;
|
|
15
18
|
};
|
|
16
|
-
export declare const DataTableTable: ({ sortable, striped, theme, css, scrollOptions, rowAction, ...props }: DataTableTableProps) => JSX.Element | null;
|
|
19
|
+
export declare const DataTableTable: ({ sortable, striped, theme, css, scrollOptions, rowAction, withContainer, ...props }: DataTableTableProps) => JSX.Element | null;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as
|
|
1
|
+
import*as t from"react";import{styled as A}from"../../stitches.js";import{Box as L}from"../box/Box.js";import{Table as P}from"../table/Table.js";import{DataTable as w}from"./DataTable.js";import{AsyncDataState as _}from"./DataTable.types.js";import{useDataTable as M}from"./DataTableContext.js";import{DataTableLoading as N}from"./DataTableLoading.js";const j=A(L,{p:"$2",bg:"white",borderRadius:"$3"}),q=({sortable:C,striped:S,theme:g="white",css:k,scrollOptions:e={numberOfStickyColumns:0,stickyHeaderOffset:0,hasStickyHeader:!1,showTotalInFirstColumn:!0,totalSuffix:"items"},rowAction:E,withContainer:O=!1,...v})=>{const{asyncDataState:x,getTotalRows:I,getCanSomeRowsExpand:m,rowSelection:f,enableRowSelection:d,tableId:T,setTablePosition:l}=M(),n=t.useRef(null),R=t.useRef(!1),c=t.useRef(!1),r=t.useMemo(()=>typeof window>"u"?null:window,[]);t.useEffect(()=>{if(!r||typeof IntersectionObserver>"u")return;const o=()=>{if(n.current){const s=n.current.getBoundingClientRect().top,i=n.current.getBoundingClientRect().bottom;l(u=>({...u,top:s,bottom:i}))}c.current=!1},a=()=>{c.current||(requestAnimationFrame(o),c.current=!0)};if(!n.current)return;const y=(e==null?void 0:e.stickyHeaderOffset)||0,B={rootMargin:`-${y}px 0px -${y}px 0px`,threshold:0},F=s=>{if(!s||s.length===0)return;const i=s[0];R.current=i.isIntersecting,r&&(i.isIntersecting?r==null||r.addEventListener("scroll",a):r==null||r.removeEventListener("scroll",a)),l(u=>({...u,isVisible:i.isIntersecting}))},h=new IntersectionObserver(F,B);return n.current&&(e.hasStickyHeader||Object.keys(f||{}).length>0)&&h.observe(n.current),()=>{h.disconnect(),r&&(r==null||r.removeEventListener("scroll",a))}},[f,e.hasStickyHeader,e==null?void 0:e.stickyHeaderOffset,r,l]);const p=x===_.PENDING,H=!p&&I()===0,D=()=>{let o=0;return m()&&!!d?o=2:(m()||!!d)&&(o=1),`${T}_${o}_control_columns`};if(H)return null;const b=t.createElement(P,{corners:"round",size:"lg",...v,ref:n,numberOfStickyColumns:e.numberOfStickyColumns,scrollContainerCss:{...e.scrollContainerCss},scrollContainerkey:D(),css:{...k,...p&&{opacity:.5,pointerEvents:"none",transition:"opacity 250ms linear 150ms"}}},t.createElement(w.Head,{theme:g,sortable:C,isSticky:e.hasStickyHeader,stickyOffset:e.stickyHeaderOffset,css:e.headerCss,showTotalInFirstColumn:e.showTotalInFirstColumn,totalSuffix:e.totalSuffix}),t.createElement(w.Body,{striped:S,rowAction:E}));return t.createElement(t.Fragment,null,t.createElement(N,null),O?t.createElement(j,null,b):b)};export{q 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 if (typeof
|
|
1
|
+
{"version":3,"file":"DataTableTable.js","sources":["../../../src/components/data-table/DataTableTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS, styled } from '~/stitches'\n\nimport { Box } from '../box'\nimport { Table } from '../table'\nimport { TableBody } from '../table/TableBody'\nimport { DataTable } from './DataTable'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableLoading } from './DataTableLoading'\n\nconst TableContainer = styled(Box, {\n p: '$2',\n bg: 'white',\n borderRadius: '$3'\n})\n\nexport type DataTableTableProps = Omit<\n React.ComponentProps<typeof Table>,\n 'children' | 'numberOfStickyColumns'\n> &\n Partial<\n Pick<React.ComponentProps<typeof DataTableHead>, 'theme' | 'sortable'>\n > &\n Partial<Pick<React.ComponentProps<typeof TableBody>, 'striped'>> & {\n scrollOptions?: {\n hasStickyHeader?: boolean\n stickyHeaderOffset?: number\n headerCss?: CSS\n numberOfStickyColumns?: number\n scrollContainerCss?: CSS\n showTotalInFirstColumn?: boolean\n totalSuffix?: string\n }\n rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n withContainer?: boolean\n }\n\nexport const DataTableTable = ({\n sortable,\n striped,\n theme = 'white',\n css,\n scrollOptions = {\n numberOfStickyColumns: 0,\n stickyHeaderOffset: 0,\n hasStickyHeader: false,\n showTotalInFirstColumn: true,\n totalSuffix: 'items'\n },\n rowAction,\n withContainer = false,\n ...props\n}: DataTableTableProps): JSX.Element | null => {\n const {\n asyncDataState,\n getTotalRows,\n getCanSomeRowsExpand,\n rowSelection,\n enableRowSelection,\n tableId,\n setTablePosition\n } = useDataTable()\n\n const tableRef = React.useRef<HTMLTableElement | null>(null)\n const isTableVisible = React.useRef(false)\n const isScrolling = React.useRef<boolean>(false)\n\n const scrollTarget = React.useMemo(() => {\n if (typeof window === 'undefined') return null\n return window\n }, [])\n\n React.useEffect(() => {\n if (!scrollTarget || typeof IntersectionObserver === 'undefined') {\n return\n }\n\n const updatePosition = () => {\n if (tableRef.current) {\n const tableTop = tableRef.current.getBoundingClientRect().top\n const tableBottom = tableRef.current.getBoundingClientRect().bottom\n\n setTablePosition((prevPosition) => ({\n ...prevPosition,\n top: tableTop,\n bottom: tableBottom\n }))\n }\n isScrolling.current = false\n }\n\n const handleScroll = () => {\n if (!isScrolling.current) {\n requestAnimationFrame(updatePosition)\n isScrolling.current = true\n }\n }\n\n if (!tableRef.current) return\n\n const observerOffset = scrollOptions?.stickyHeaderOffset || 0\n\n const observerOptions = {\n rootMargin: `-${observerOffset}px 0px -${observerOffset}px 0px`,\n threshold: 0\n }\n\n const handleTableIntersection = (entries: IntersectionObserverEntry[]) => {\n if (!entries || entries.length === 0) return\n const entry = entries[0]\n\n isTableVisible.current = entry.isIntersecting\n\n if (scrollTarget) {\n if (entry.isIntersecting) {\n // add scroll listener\n scrollTarget?.addEventListener('scroll', handleScroll)\n } else {\n // remove scroll listener\n scrollTarget?.removeEventListener('scroll', handleScroll)\n }\n }\n\n setTablePosition((prevPosition) => ({\n ...prevPosition,\n isVisible: entry.isIntersecting\n }))\n }\n\n const tableObserver = new IntersectionObserver(\n handleTableIntersection,\n observerOptions\n )\n\n //only track table position if we have a sticky header or bulk actions active\n if (\n tableRef.current &&\n (scrollOptions.hasStickyHeader ||\n Object.keys(rowSelection || {}).length > 0)\n ) {\n tableObserver.observe(tableRef.current)\n }\n\n return () => {\n tableObserver.disconnect()\n if (scrollTarget) {\n scrollTarget?.removeEventListener('scroll', handleScroll)\n }\n }\n }, [\n rowSelection,\n scrollOptions.hasStickyHeader,\n scrollOptions?.stickyHeaderOffset,\n scrollTarget,\n setTablePosition\n ])\n\n const isPending = asyncDataState === AsyncDataState.PENDING\n const isEmpty = !isPending && getTotalRows() === 0\n\n const buildScrollContainerKey = (): string => {\n let controlColumnCount = 0\n\n if (getCanSomeRowsExpand() && !!enableRowSelection) {\n controlColumnCount = 2\n } else if (getCanSomeRowsExpand() || !!enableRowSelection) {\n controlColumnCount = 1\n }\n\n return `${tableId}_${controlColumnCount}_control_columns`\n }\n\n if (isEmpty) return null\n\n const tableComponent = (\n <Table\n corners=\"round\"\n size=\"lg\"\n {...props}\n ref={tableRef}\n numberOfStickyColumns={scrollOptions.numberOfStickyColumns}\n 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 showTotalInFirstColumn={scrollOptions.showTotalInFirstColumn}\n totalSuffix={scrollOptions.totalSuffix}\n />\n <DataTable.Body striped={striped} rowAction={rowAction} />\n </Table>\n )\n\n return (\n <>\n <DataTableLoading />\n {withContainer ? (\n <TableContainer>{tableComponent}</TableContainer>\n ) : (\n tableComponent\n )}\n </>\n )\n}\n"],"names":["TableContainer","styled","Box","DataTableTable","sortable","striped","theme","css","scrollOptions","rowAction","withContainer","props","asyncDataState","getTotalRows","getCanSomeRowsExpand","rowSelection","enableRowSelection","tableId","setTablePosition","useDataTable","tableRef","React","isTableVisible","isScrolling","scrollTarget","updatePosition","tableTop","tableBottom","prevPosition","handleScroll","observerOffset","observerOptions","handleTableIntersection","entries","entry","tableObserver","isPending","AsyncDataState","isEmpty","buildScrollContainerKey","controlColumnCount","tableComponent","Table","DataTable","DataTableLoading"],"mappings":"gWAaA,MAAMA,EAAiBC,EAAOC,EAAK,CACjC,EAAG,KACH,GAAI,QACJ,aAAc,IAChB,CAAC,EAuBYC,EAAiB,CAAC,CAC7B,SAAAC,EACA,QAAAC,EACA,MAAAC,EAAQ,QACR,IAAAC,EACA,cAAAC,EAAgB,CACd,sBAAuB,EACvB,mBAAoB,EACpB,gBAAiB,GACjB,uBAAwB,GACxB,YAAa,OACf,EACA,UAAAC,EACA,cAAAC,EAAgB,MACbC,CACL,IAA+C,CAC7C,KAAM,CACJ,eAAAC,EACA,aAAAC,EACA,qBAAAC,EACA,aAAAC,EACA,mBAAAC,EACA,QAAAC,EACA,iBAAAC,CACF,EAAIC,EAAAA,EAEEC,EAAWC,EAAM,OAAgC,IAAI,EACrDC,EAAiBD,EAAM,OAAO,EAAK,EACnCE,EAAcF,EAAM,OAAgB,EAAK,EAEzCG,EAAeH,EAAM,QAAQ,IAC7B,OAAO,OAAW,IAAoB,KACnC,OACN,EAAE,EAELA,EAAM,UAAU,IAAM,CACpB,GAAI,CAACG,GAAgB,OAAO,qBAAyB,IACnD,OAGF,MAAMC,EAAiB,IAAM,CAC3B,GAAIL,EAAS,QAAS,CACpB,MAAMM,EAAWN,EAAS,QAAQ,wBAAwB,IACpDO,EAAcP,EAAS,QAAQ,wBAAwB,OAE7DF,EAAkBU,IAAkB,CAClC,GAAGA,EACH,IAAKF,EACL,OAAQC,CACV,EAAE,CACJ,CACAJ,EAAY,QAAU,EACxB,EAEMM,EAAe,IAAM,CACpBN,EAAY,UACf,sBAAsBE,CAAc,EACpCF,EAAY,QAAU,GAE1B,EAEA,GAAI,CAACH,EAAS,QAAS,OAEvB,MAAMU,GAAiBtB,GAAA,KAAAA,OAAAA,EAAe,qBAAsB,EAEtDuB,EAAkB,CACtB,WAAY,IAAID,YAAyBA,UACzC,UAAW,CACb,EAEME,EAA2BC,GAAyC,CACxE,GAAI,CAACA,GAAWA,EAAQ,SAAW,EAAG,OACtC,MAAMC,EAAQD,EAAQ,GAEtBX,EAAe,QAAUY,EAAM,eAE3BV,IACEU,EAAM,eAERV,GAAA,MAAAA,EAAc,iBAAiB,SAAUK,CAGzCL,EAAAA,GAAA,MAAAA,EAAc,oBAAoB,SAAUK,IAIhDX,EAAkBU,IAAkB,CAClC,GAAGA,EACH,UAAWM,EAAM,cACnB,EAAE,CACJ,EAEMC,EAAgB,IAAI,qBACxBH,EACAD,CACF,EAGA,OACEX,EAAS,UACRZ,EAAc,iBACb,OAAO,KAAKO,GAAgB,EAAE,EAAE,OAAS,IAE3CoB,EAAc,QAAQf,EAAS,OAAO,EAGjC,IAAM,CACXe,EAAc,WAAA,EACVX,IACFA,GAAA,MAAAA,EAAc,oBAAoB,SAAUK,GAEhD,CACF,EAAG,CACDd,EACAP,EAAc,gBACdA,GAAA,KAAAA,OAAAA,EAAe,mBACfgB,EACAN,CACF,CAAC,EAED,MAAMkB,EAAYxB,IAAmByB,EAAe,QAC9CC,EAAU,CAACF,GAAavB,EAAmB,IAAA,EAE3C0B,EAA0B,IAAc,CAC5C,IAAIC,EAAqB,EAEzB,OAAI1B,EAAqB,GAAK,CAAC,CAACE,EAC9BwB,EAAqB,GACZ1B,EAAqB,GAAK,CAAC,CAACE,KACrCwB,EAAqB,GAGhB,GAAGvB,KAAWuB,mBACvB,EAEA,GAAIF,EAAS,OAAO,KAEpB,MAAMG,EACJpB,EAAA,cAACqB,EAAA,CACC,QAAQ,QACR,KAAK,KACJ,GAAG/B,EACJ,IAAKS,EACL,sBAAuBZ,EAAc,sBACrC,mBAAoB,CAClB,GAAGA,EAAc,kBACnB,EACA,mBAAoB+B,EAAwB,EAC5C,IAAK,CACH,GAAGhC,EACH,GAAI6B,GAAa,CACf,QAAS,GACT,cAAe,OACf,WAAY,4BACd,CACF,CAEAf,EAAAA,EAAA,cAACsB,EAAU,KAAV,CACC,MAAOrC,EACP,SAAUF,EACV,SAAUI,EAAc,gBACxB,aAAcA,EAAc,mBAC5B,IAAKA,EAAc,UACnB,uBAAwBA,EAAc,uBACtC,YAAaA,EAAc,WAAA,CAC7B,EACAa,EAAA,cAACsB,EAAU,KAAV,CAAe,QAAStC,EAAS,UAAWI,CAAW,CAAA,CAC1D,EAGF,OACEY,EAAA,cAAAA,EAAA,SACEA,KAAAA,EAAA,cAACuB,EAAA,IAAiB,EACjBlC,EACCW,EAAA,cAACrB,EAAA,KAAgByC,CAAe,EAEhCA,CAEJ,CAEJ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as e from"react";import{styled as
|
|
1
|
+
import*as e from"react";import{styled as p}from"../../stitches.js";import{TableBody as c}from"./TableBody.js";import{TableCell as b}from"./TableCell.js";import{TableFooter as f}from"./TableFooter.js";import{TableFooterCell as C}from"./TableFooterCell.js";import{TableHeader as $}from"./TableHeader.js";import{TableHeaderCell as h}from"./TableHeaderCell.js";import{TableRow as g}from"./TableRow.js";import{TableStickyColumnsContainer as t}from"./TableStickyColumnsContainer.js";const u=p("table",{borderCollapse:"separate",borderSpacing:0,fontFamily:"$sans",fontSize:"$sm",width:"100%",position:"relative",zIndex:0,variants:{size:{md:{"& td, & th":{height:"$4",padding:"$1 $3"}},lg:{"& td, & th":{height:"$5",padding:"0 0 0 $3","&:last-child":{pr:"$3"}}},xl:{"& th":{height:"$5",padding:"0 0 0 $3","&:last-child":{pr:"$3"}},"& td":{height:"$6",padding:"0 0 0 $3","&:last-child":{pr:"$3"}}}},corners:{round:{borderRadius:"$3"},square:{}}}}),l=e.forwardRef(({size:a="md",corners:i="round",numberOfStickyColumns:r=0,scrollContainerCss:n,scrollContainerkey:s,...d},m)=>{const o=e.createElement(u,{ref:m,size:a,corners:i,...d});return r?e.createElement(t,{key:s,css:n,numberOfStickyColumns:r},o):o}),y=Object.assign(l,{Body:c,Cell:b,Footer:f,FooterCell:C,Header:$,HeaderCell:h,Row:g,StickyColumnsContainer:t});l.displayName="Table";export{y as Table};
|
|
2
2
|
//# sourceMappingURL=Table.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.js","sources":["../../../src/components/table/Table.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS, styled } from '~/stitches'\n\nimport { TableBody } from './TableBody'\nimport { TableCell } from './TableCell'\nimport { TableFooter } from './TableFooter'\nimport { TableFooterCell } from './TableFooterCell'\nimport { TableHeader } from './TableHeader'\nimport { TableHeaderCell } from './TableHeaderCell'\nimport { TableRow } from './TableRow'\nimport { TableStickyColumnsContainer } from './TableStickyColumnsContainer'\n\nconst StyledTable = styled('table', {\n borderCollapse: 'separate',\n borderSpacing: 0,\n fontFamily: '$sans',\n fontSize: '$sm',\n width: '100%',\n position: 'relative',\n zIndex: 0,\n variants: {\n size: {\n md: {\n '& td, & th': {\n height: '$4',\n padding: '$1 $3'\n }\n },\n lg: {\n '& td, & th': {\n height: '$5',\n padding: '
|
|
1
|
+
{"version":3,"file":"Table.js","sources":["../../../src/components/table/Table.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS, styled } from '~/stitches'\n\nimport { TableBody } from './TableBody'\nimport { TableCell } from './TableCell'\nimport { TableFooter } from './TableFooter'\nimport { TableFooterCell } from './TableFooterCell'\nimport { TableHeader } from './TableHeader'\nimport { TableHeaderCell } from './TableHeaderCell'\nimport { TableRow } from './TableRow'\nimport { TableStickyColumnsContainer } from './TableStickyColumnsContainer'\n\nconst StyledTable = styled('table', {\n borderCollapse: 'separate',\n borderSpacing: 0,\n fontFamily: '$sans',\n fontSize: '$sm',\n width: '100%',\n position: 'relative',\n zIndex: 0,\n variants: {\n size: {\n md: {\n '& td, & th': {\n height: '$4',\n padding: '$1 $3'\n }\n },\n lg: {\n '& td, & th': {\n height: '$5',\n padding: '0 0 0 $3',\n '&:last-child': {\n pr: '$3'\n }\n }\n },\n xl: {\n '& th': {\n height: '$5',\n padding: '0 0 0 $3',\n '&:last-child': {\n pr: '$3'\n }\n },\n '& td': {\n height: '$6',\n padding: '0 0 0 $3',\n '&:last-child': {\n pr: '$3'\n }\n }\n }\n },\n corners: {\n round: {\n borderRadius: '$3'\n },\n square: {}\n }\n }\n})\n\ntype TableProps = React.ComponentProps<typeof StyledTable> & {\n numberOfStickyColumns?: number\n scrollContainerCss?: CSS\n scrollContainerkey?: string\n maxRowDepth?: number\n}\n\nconst TableComponent = React.forwardRef<HTMLTableElement, TableProps>(\n (\n {\n size = 'md',\n corners = 'round',\n numberOfStickyColumns = 0,\n scrollContainerCss,\n scrollContainerkey,\n ...rest\n },\n ref\n ) => {\n const tableComponent = (\n <StyledTable ref={ref} size={size} corners={corners} {...rest} />\n )\n\n if (numberOfStickyColumns) {\n return (\n <TableStickyColumnsContainer\n key={scrollContainerkey}\n css={scrollContainerCss}\n numberOfStickyColumns={numberOfStickyColumns}\n >\n {tableComponent}\n </TableStickyColumnsContainer>\n )\n }\n\n return tableComponent\n }\n)\n\nexport const Table = Object.assign(TableComponent, {\n Body: TableBody,\n Cell: TableCell,\n Footer: TableFooter,\n FooterCell: TableFooterCell,\n Header: TableHeader,\n HeaderCell: TableHeaderCell,\n Row: TableRow,\n StickyColumnsContainer: TableStickyColumnsContainer\n})\n\nTableComponent.displayName = 'Table'\n"],"names":["StyledTable","styled","TableComponent","React","size","corners","numberOfStickyColumns","scrollContainerCss","scrollContainerkey","rest","ref","tableComponent","TableStickyColumnsContainer","Table","TableBody","TableCell","TableFooter","TableFooterCell","TableHeader","TableHeaderCell","TableRow"],"mappings":"6dAaA,MAAMA,EAAcC,EAAO,QAAS,CAClC,eAAgB,WAChB,cAAe,EACf,WAAY,QACZ,SAAU,MACV,MAAO,OACP,SAAU,WACV,OAAQ,EACR,SAAU,CACR,KAAM,CACJ,GAAI,CACF,aAAc,CACZ,OAAQ,KACR,QAAS,OACX,CACF,EACA,GAAI,CACF,aAAc,CACZ,OAAQ,KACR,QAAS,YACT,eAAgB,CACd,GAAI,IACN,CACF,CACF,EACA,GAAI,CACF,OAAQ,CACN,OAAQ,KACR,QAAS,YACT,eAAgB,CACd,GAAI,IACN,CACF,EACA,OAAQ,CACN,OAAQ,KACR,QAAS,YACT,eAAgB,CACd,GAAI,IACN,CACF,CACF,CACF,EACA,QAAS,CACP,MAAO,CACL,aAAc,IAChB,EACA,OAAQ,CAAA,CACV,CACF,CACF,CAAC,EASKC,EAAiBC,EAAM,WAC3B,CACE,CACE,KAAAC,EAAO,KACP,QAAAC,EAAU,QACV,sBAAAC,EAAwB,EACxB,mBAAAC,EACA,mBAAAC,KACGC,CACL,EACAC,IACG,CACH,MAAMC,EACJR,EAAA,cAACH,EAAA,CAAY,IAAKU,EAAK,KAAMN,EAAM,QAASC,EAAU,GAAGI,CAAM,CAAA,EAGjE,OAAIH,EAEAH,EAAA,cAACS,EAAA,CACC,IAAKJ,EACL,IAAKD,EACL,sBAAuBD,CAEtBK,EAAAA,CACH,EAIGA,CACT,CACF,EAEaE,EAAQ,OAAO,OAAOX,EAAgB,CACjD,KAAMY,EACN,KAAMC,EACN,OAAQC,EACR,WAAYC,EACZ,OAAQC,EACR,WAAYC,EACZ,IAAKC,EACL,uBAAwBR,CAC1B,CAAC,EAEDV,EAAe,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{styled as l}from"../../stitches.js";const e=l("td",{
|
|
1
|
+
import{styled as l}from"../../stitches.js";const e=l("td",{borderTop:"1px solid $grey100",boxSizing:"border-box",color:"$grey800",fontFamily:"$body",lineHeight:1.5,textAlign:"left",verticalAlign:"middle","&:first-child":{fontWeight:"600"}});e.displayName="TableCell";export{e as TableCell};
|
|
2
2
|
//# sourceMappingURL=TableCell.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableCell.js","sources":["../../../src/components/table/TableCell.tsx"],"sourcesContent":["import { styled } from '~/stitches'\n\nexport const TableCell = styled('td', {\n
|
|
1
|
+
{"version":3,"file":"TableCell.js","sources":["../../../src/components/table/TableCell.tsx"],"sourcesContent":["import { styled } from '~/stitches'\n\nexport const TableCell = styled('td', {\n borderTop: '1px solid $grey100',\n boxSizing: 'border-box',\n color: '$grey800',\n fontFamily: '$body',\n lineHeight: 1.5,\n textAlign: 'left',\n verticalAlign: 'middle',\n '&:first-child': { fontWeight: '600' }\n})\n\nTableCell.displayName = 'TableCell'\n"],"names":["TableCell","styled"],"mappings":"2CAEO,MAAMA,EAAYC,EAAO,KAAM,CACpC,UAAW,qBACX,UAAW,aACX,MAAO,WACP,WAAY,QACZ,WAAY,IACZ,UAAW,OACX,cAAe,SACf,gBAAiB,CAAE,WAAY,KAAM,CACvC,CAAC,EAEDD,EAAU,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{styled as l}from"../../stitches.js";const e=l("th",{
|
|
1
|
+
import{styled as l}from"../../stitches.js";const e=l("th",{color:"white",fontFamily:"$body",fontWeight:600,lineHeight:1.5,textAlign:"left",verticalAlign:"middle","&[colspan]":{textAlign:"center"}});e.displayName="TableHeaderCell";export{e as TableHeaderCell};
|
|
2
2
|
//# sourceMappingURL=TableHeaderCell.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableHeaderCell.js","sources":["../../../src/components/table/TableHeaderCell.tsx"],"sourcesContent":["import { styled } from '~/stitches'\n\nexport const TableHeaderCell = styled('th', {\n
|
|
1
|
+
{"version":3,"file":"TableHeaderCell.js","sources":["../../../src/components/table/TableHeaderCell.tsx"],"sourcesContent":["import { styled } from '~/stitches'\n\nexport const TableHeaderCell = styled('th', {\n color: 'white',\n fontFamily: '$body',\n fontWeight: 600,\n lineHeight: 1.5,\n textAlign: 'left',\n verticalAlign: 'middle',\n '&[colspan]': {\n textAlign: 'center'\n }\n})\n\nTableHeaderCell.displayName = 'TableHeaderCell'\n"],"names":["TableHeaderCell","styled"],"mappings":"2CAEO,MAAMA,EAAkBC,EAAO,KAAM,CAC1C,MAAO,QACP,WAAY,QACZ,WAAY,IACZ,WAAY,IACZ,UAAW,OACX,cAAe,SACf,aAAc,CACZ,UAAW,QACb,CACF,CAAC,EAEDD,EAAgB,YAAc"}
|