@atom-learning/components 5.2.2 → 5.2.3
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/dist/components/data-table/DataTable.d.ts +1 -1
- package/dist/components/data-table/DataTableHead.d.ts +1 -1
- package/dist/components/data-table/DataTableHead.js +1 -1
- package/dist/components/data-table/DataTableHead.js.map +1 -1
- package/dist/components/data-table/DataTableHeaderCell.js +1 -1
- package/dist/components/data-table/DataTableHeaderCell.js.map +1 -1
- package/dist/components/table/TableHeaderCell.js +1 -1
- package/dist/components/table/TableHeaderCell.js.map +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/dist/utilities/optional-tooltip-wrapper/OptionalTooltipWrapper.js +1 -1
- package/dist/utilities/optional-tooltip-wrapper/OptionalTooltipWrapper.js.map +1 -1
- package/package.json +1 -1
|
@@ -2216,7 +2216,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
|
|
|
2216
2216
|
* If you need more customisation options, you can build your own implementation
|
|
2217
2217
|
* with `useDataTable` and the UI-only `Table` components.
|
|
2218
2218
|
*/
|
|
2219
|
-
Head: ({ sortable, theme, isSticky, ...props }: Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
|
|
2219
|
+
Head: ({ sortable, theme, isSticky, css, ...props }: Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
|
|
2220
2220
|
ref?: ((instance: HTMLTableSectionElement | null) => void) | import("react").RefObject<HTMLTableSectionElement> | null | undefined;
|
|
2221
2221
|
}, "css" | "theme" | "isSticky"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
|
|
2222
2222
|
theme?: "light" | "primary" | "white" | "primaryDark" | "primaryLight" | undefined;
|
|
@@ -6,5 +6,5 @@ type DataTableHeadProps = Omit<React.ComponentProps<typeof Table.Header>, 'child
|
|
|
6
6
|
isSticky?: boolean;
|
|
7
7
|
headerCss?: CSS;
|
|
8
8
|
};
|
|
9
|
-
export declare const DataTableHead: ({ sortable, theme, isSticky, ...props }: DataTableHeadProps) => React.JSX.Element;
|
|
9
|
+
export declare const DataTableHead: ({ sortable, theme, isSticky, css, ...props }: DataTableHeadProps) => React.JSX.Element;
|
|
10
10
|
export {};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as e from"react";import{Table as t}from"../table/Table.js";import{DataTableSelectAllRowsCheckbox as p}from"./DataTableSelectAllRowsCheckbox.js";import{useDataTable as b}from"./DataTableContext.js";import{DataTable as
|
|
1
|
+
import*as e from"react";import{Table as t}from"../table/Table.js";import{DataTableSelectAllRowsCheckbox as p}from"./DataTableSelectAllRowsCheckbox.js";import{useDataTable as b}from"./DataTableContext.js";import{DataTable as E}from"./DataTable.js";const f=({sortable:a=!0,theme:s="light",isSticky:m=!1,css:c,...i})=>{const{getHeaderGroups:n,setIsSortable:r,enableRowSelection:d,getCanSomeRowsExpand:h}=b();return e.useEffect(()=>{r(a)},[a,r]),e.createElement(t.Header,{theme:s,isSticky:m,css:{"& tr:not(:last-child) > th":{borderBottom:"none"},"& tr:last-child > th":{borderRadius:"0 !important"},...c},...i},n().map(o=>e.createElement(t.Row,{key:o.id},h()&&e.createElement(t.HeaderCell,{css:{width:"$4"}}),d&&e.createElement(t.HeaderCell,{css:{width:"$4"}},e.createElement(p,null)),o.headers.map(l=>e.createElement(E.HeaderCell,{header:l,key:l.id})))))};export{f 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 headerCss?: CSS\n}\n\nexport const DataTableHead = ({\n sortable = true,\n theme = 'light',\n isSticky = false,\n ...props\n}: DataTableHeadProps) => {\n const {\n getHeaderGroups,\n setIsSortable,\n enableRowSelection,\n getCanSomeRowsExpand\n } = useDataTable()\n\n React.useEffect(() => {\n setIsSortable(sortable)\n }, [sortable, setIsSortable])\n\n return (\n <Table.Header
|
|
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 headerCss?: CSS\n}\n\nexport const DataTableHead = ({\n sortable = true,\n theme = 'light',\n isSticky = false,\n css,\n ...props\n}: DataTableHeadProps) => {\n const {\n getHeaderGroups,\n setIsSortable,\n enableRowSelection,\n getCanSomeRowsExpand\n } = useDataTable()\n\n React.useEffect(() => {\n setIsSortable(sortable)\n }, [sortable, setIsSortable])\n\n return (\n <Table.Header\n theme={theme}\n isSticky={isSticky}\n css={{\n '& tr:not(:last-child) > th': {\n borderBottom: 'none'\n },\n '& tr:last-child > th': {\n borderRadius: '0 !important'\n },\n ...css\n }}\n {...props}\n >\n {getHeaderGroups().map((headerGroup) => {\n return (\n <Table.Row key={headerGroup.id}>\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","css","props","getHeaderGroups","setIsSortable","enableRowSelection","getCanSomeRowsExpand","useDataTable","React","Table","headerGroup","DataTableSelectAllRowsCheckbox","header","DataTable"],"mappings":"uPAiBa,MAAAA,EAAgB,CAAC,CAC5B,SAAAC,EAAW,GACX,MAAAC,EAAQ,QACR,SAAAC,EAAW,GACX,IAAAC,KACGC,CACL,IAA0B,CACxB,KAAM,CACJ,gBAAAC,EACA,cAAAC,EACA,mBAAAC,EACA,qBAAAC,CACF,EAAIC,IAEJ,OAAAC,EAAM,UAAU,IAAM,CACpBJ,EAAcN,CAAQ,CACxB,EAAG,CAACA,EAAUM,CAAa,CAAC,EAG1BI,EAAA,cAACC,EAAM,OAAN,CACC,MAAOV,EACP,SAAUC,EACV,IAAK,CACH,6BAA8B,CAC5B,aAAc,MAChB,EACA,uBAAwB,CACtB,aAAc,cAChB,EACA,GAAGC,CACL,EACC,GAAGC,CAAAA,EAEHC,EAAgB,EAAE,IAAKO,GAEpBF,EAAA,cAACC,EAAM,IAAN,CAAU,IAAKC,EAAY,IACzBJ,EAAqB,GACpBE,EAAA,cAACC,EAAM,WAAN,CAAiB,IAAK,CAAE,MAAO,IAAK,CAAA,CAAG,EAEzCJ,GACCG,EAAA,cAACC,EAAM,WAAN,CAAiB,IAAK,CAAE,MAAO,IAAK,GACnCD,EAAA,cAACG,EAAA,IAA+B,CAClC,EAEDD,EAAY,QAAQ,IAAKE,GACxBJ,EAAA,cAACK,EAAU,WAAV,CAAqB,OAAQD,EAAQ,IAAKA,EAAO,EAAI,CAAA,CACvD,CACH,CAEH,CACH,CAEJ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{SortUp as
|
|
1
|
+
import{SortUp as a,SortDown as s}from"@atom-learning/icons";import{flexRender as m}from"@tanstack/react-table";import*as t from"react";import{Flex as l}from"../flex/Flex.js";import{Icon as p}from"../icon/Icon.js";import{Table as d}from"../table/Table.js";import{useDataTable as f}from"./DataTableContext.js";const u={asc:a,desc:s},S=({direction:e})=>t.createElement(p,{is:u[e],size:"sm",css:{position:"absolute",left:"$1"}}),g=({header:e,children:b,css:c,...i})=>{const o=e.column.getIsSorted(),{isSortable:r}=f(),n=e.column.getCanSort();return t.createElement(d.HeaderCell,{colSpan:e.colSpan,onClick:r&&n?e.column.getToggleSortingHandler():void 0,css:{cursor:r&&n?"pointer":"initial",...c},...i},t.createElement(l,{css:{alignItems:"center",...e.colSpan>1?{justifyContent:"center"}:{}}},m(e.column.columnDef.header,e.getContext()),o&&r&&t.createElement(l,{css:{position:"relative",alignItems:"center"}},t.createElement(S,{direction:o}))))};export{g 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 { SortDown, SortUp } from '@atom-learning/icons'\nimport type { Header } from '@tanstack/react-table'\nimport { flexRender } from '@tanstack/react-table'\nimport * as React from 'react'\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 sortIcons = {\n asc: SortUp,\n desc: SortDown\n}\n\nconst SortIcon = ({ direction }: { direction: 'asc' | 'desc' }) => (\n <Icon\n is={sortIcons[direction]}\n size=\"sm\"\n css={{ position: 'absolute', left: '$1' }}\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 return (\n <Table.HeaderCell\n onClick={\n isSortableTable && isDataColumn\n ? header.column.getToggleSortingHandler()\n : undefined\n }\n css={{\n cursor: isSortableTable && isDataColumn ? 'pointer' : 'initial',\n ...css\n }}\n {...props}\n >\n <Flex
|
|
1
|
+
{"version":3,"file":"DataTableHeaderCell.js","sources":["../../../src/components/data-table/DataTableHeaderCell.tsx"],"sourcesContent":["import { SortDown, SortUp } from '@atom-learning/icons'\nimport type { Header } from '@tanstack/react-table'\nimport { flexRender } from '@tanstack/react-table'\nimport * as React from 'react'\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 sortIcons = {\n asc: SortUp,\n desc: SortDown\n}\n\nconst SortIcon = ({ direction }: { direction: 'asc' | 'desc' }) => (\n <Icon\n is={sortIcons[direction]}\n size=\"sm\"\n css={{ position: 'absolute', left: '$1' }}\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 return (\n <Table.HeaderCell\n colSpan={header.colSpan}\n onClick={\n isSortableTable && isDataColumn\n ? header.column.getToggleSortingHandler()\n : undefined\n }\n css={{\n cursor: isSortableTable && isDataColumn ? 'pointer' : 'initial',\n ...css\n }}\n {...props}\n >\n <Flex\n css={{\n alignItems: 'center',\n ...(header.colSpan > 1 ? { justifyContent: 'center' } : {})\n }}\n >\n {flexRender(header.column.columnDef.header, header.getContext())}\n {sortDirection && isSortableTable && (\n <Flex css={{ position: 'relative', alignItems: 'center' }}>\n <SortIcon direction={sortDirection} />\n </Flex>\n )}\n </Flex>\n </Table.HeaderCell>\n )\n}\n"],"names":["sortIcons","SortUp","SortDown","SortIcon","direction","React","Icon","DataTableHeaderCell","header","children","css","props","sortDirection","isSortableTable","useDataTable","isDataColumn","Table","Flex","flexRender"],"mappings":"oTAaA,MAAMA,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,IAAK,CAC1C,CAAA,EAGWG,EAAsB,CAAC,CAClC,OAAAC,EACA,SAAAC,EACA,IAAAC,KACGC,CACL,IAA4B,CAC1B,MAAMC,EAAgBJ,EAAO,OAAO,YAAY,EAC1C,CAAE,WAAYK,CAAgB,EAAIC,EAAa,EAE/CC,EAAeP,EAAO,OAAO,WAAW,EAE9C,OACEH,EAAA,cAACW,EAAM,WAAN,CACC,QAASR,EAAO,QAChB,QACEK,GAAmBE,EACfP,EAAO,OAAO,wBAAwB,EACtC,OAEN,IAAK,CACH,OAAQK,GAAmBE,EAAe,UAAY,UACtD,GAAGL,CACL,EACC,GAAGC,CAAAA,EAEJN,EAAA,cAACY,EAAA,CACC,IAAK,CACH,WAAY,SACZ,GAAIT,EAAO,QAAU,EAAI,CAAE,eAAgB,QAAS,EAAI,CAAA,CAC1D,CAAA,EAECU,EAAWV,EAAO,OAAO,UAAU,OAAQA,EAAO,WAAY,CAAA,EAC9DI,GAAiBC,GAChBR,EAAA,cAACY,EAAA,CAAK,IAAK,CAAE,SAAU,WAAY,WAAY,QAAS,CAAA,EACtDZ,EAAA,cAACF,EAAA,CAAS,UAAWS,EAAe,CACtC,CAEJ,CACF,CAEJ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{styled as l}from"../../stitches.js";const e=l("th",{borderBottom:"1px solid $grey200",color:"white",fontFamily:"$body",fontWeight:600,lineHeight:1.5,textAlign:"left",verticalAlign:"middle"});e.displayName="TableHeaderCell";export{e as TableHeaderCell};
|
|
1
|
+
import{styled as l}from"../../stitches.js";const e=l("th",{borderBottom:"1px solid $grey200",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 borderBottom: '1px solid $grey200',\n color: 'white',\n fontFamily: '$body',\n fontWeight: 600,\n lineHeight: 1.5,\n textAlign: 'left',\n verticalAlign: 'middle'\n})\n\nTableHeaderCell.displayName = 'TableHeaderCell'\n"],"names":["TableHeaderCell","styled"],"mappings":"
|
|
1
|
+
{"version":3,"file":"TableHeaderCell.js","sources":["../../../src/components/table/TableHeaderCell.tsx"],"sourcesContent":["import { styled } from '~/stitches'\n\nexport const TableHeaderCell = styled('th', {\n borderBottom: '1px solid $grey200',\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,aAAc,qBACd,MAAO,QACP,WAAY,QACZ,WAAY,IACZ,WAAY,IACZ,UAAW,OACX,cAAe,SACf,aAAc,CACZ,UAAW,QACb,CACF,CAAC,EAEDD,EAAgB,YAAc"}
|