@atom-learning/components 5.8.0 → 5.9.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 +11 -6
- package/dist/components/action-icon/ActionIcon.d.ts +1 -1
- package/dist/components/action-icon/ActionIcon.js +1 -1
- package/dist/components/action-icon/ActionIcon.js.map +1 -1
- package/dist/components/banner/banner-regular/BannerRegular.d.ts +10 -10
- package/dist/components/banner/banner-regular/BannerRegularDismiss.d.ts +2 -2
- package/dist/components/banner/banner-slim/BannerSlim.d.ts +10 -10
- package/dist/components/banner/banner-slim/BannerSlimDismiss.d.ts +2 -2
- package/dist/components/create-password-field/CreatePasswordField.js +1 -1
- package/dist/components/data-table/DataTable.d.ts +27 -10
- package/dist/components/data-table/DataTable.js +1 -1
- package/dist/components/data-table/DataTable.js.map +1 -1
- package/dist/components/data-table/DataTable.types.d.ts +8 -0
- package/dist/components/data-table/DataTable.types.js.map +1 -1
- package/dist/components/data-table/DataTableBulkActionsFloating.d.ts +12 -0
- package/dist/components/data-table/DataTableBulkActionsFloating.js +2 -0
- package/dist/components/data-table/DataTableBulkActionsFloating.js.map +1 -0
- package/dist/components/data-table/DataTableBulkActionsSelectedRowActions.d.ts +6 -0
- package/dist/components/data-table/DataTableBulkActionsSelectedRowActions.js +2 -0
- package/dist/components/data-table/DataTableBulkActionsSelectedRowActions.js.map +1 -0
- package/dist/components/data-table/DataTableContext.js +1 -1
- package/dist/components/data-table/DataTableContext.js.map +1 -1
- package/dist/components/data-table/DataTableHead.d.ts +2 -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/DataTableTable.d.ts +2 -1
- package/dist/components/data-table/DataTableTable.js +1 -1
- package/dist/components/data-table/DataTableTable.js.map +1 -1
- package/dist/components/pagination/PaginationNextButton.d.ts +2 -2
- package/dist/components/pagination/PaginationPreviousButton.d.ts +2 -2
- package/dist/components/sortable/Handle.d.ts +2 -2
- package/dist/components/stepper/Stepper.js +1 -1
- package/dist/components/table/Table.d.ts +1 -4
- package/dist/components/table/Table.js +1 -1
- package/dist/components/table/Table.js.map +1 -1
- package/dist/components/table/TableStickyColumnsContainer.js +1 -1
- package/dist/components/table/TableStickyColumnsContainer.js.map +1 -1
- package/dist/components/top-bar/TopBar.d.ts +2 -2
- package/dist/components/top-bar/TopBar.js +1 -1
- package/dist/components/top-bar/TopBar.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,17 +1,22 @@
|
|
|
1
|
-
# [5.
|
|
1
|
+
# [5.9.0](https://github.com/Atom-Learning/components/compare/v5.8.0...v5.9.0) (2025-11-07)
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
### Bug Fixes
|
|
5
5
|
|
|
6
|
-
*
|
|
7
|
-
*
|
|
6
|
+
* null check on tableposition ([c1e4d60](https://github.com/Atom-Learning/components/commit/c1e4d604818fd21ce051ab5fa33ca987a25e4318))
|
|
7
|
+
* removed unused container and context prop ([c6b5363](https://github.com/Atom-Learning/components/commit/c6b5363b51e9f9d7e8b582103d1e266cec40d1d2))
|
|
8
|
+
* type issue on floating bar props ([3b54b45](https://github.com/Atom-Learning/components/commit/3b54b45e1d3323cd06c88cb42e41b68547264eb6))
|
|
9
|
+
* updated shadow ([e9b4ef0](https://github.com/Atom-Learning/components/commit/e9b4ef036a581e1aef0c1a7272534ddc5418e681))
|
|
10
|
+
* updated types ([0855424](https://github.com/Atom-Learning/components/commit/0855424023071ab725ad45859700ec3987021671))
|
|
8
11
|
|
|
9
12
|
|
|
10
13
|
### Features
|
|
11
14
|
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
*
|
|
15
|
+
* added floating action bar, moved scroll observer to table ([fb41d71](https://github.com/Atom-Learning/components/commit/fb41d712ff500ba8216434b61f0f95440d9c25cd))
|
|
16
|
+
* changed sticky header behaviour to work relative to page ([83518f3](https://github.com/Atom-Learning/components/commit/83518f357b62134fdd7654b1824205d991611248))
|
|
17
|
+
* improved responsive styling ([42a9ae8](https://github.com/Atom-Learning/components/commit/42a9ae883c0e0fa03cdef36a01de59098f0d09bb))
|
|
18
|
+
* minor improvements to horizontal scroll ([de20a46](https://github.com/Atom-Learning/components/commit/de20a468b2f8976d1a2e5bf76020c0d286fd7587))
|
|
19
|
+
* spacing around close button ([81e3f80](https://github.com/Atom-Learning/components/commit/81e3f805643098ef2b764659b1615b34d86cc8c5))
|
|
15
20
|
|
|
16
21
|
# [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
|
|
17
22
|
|
|
@@ -4,7 +4,7 @@ import { NavigatorActions } from '../../types';
|
|
|
4
4
|
import { Override } from '../../utilities';
|
|
5
5
|
import type { TOptionalTooltipWrapperProps } from '../../utilities/optional-tooltip-wrapper';
|
|
6
6
|
declare const StyledButton: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<"button", {
|
|
7
|
-
theme?: "success" | "danger" | "warning" | "primary" | "neutral" | undefined;
|
|
7
|
+
theme?: "success" | "danger" | "warning" | "primary" | "white" | "neutral" | undefined;
|
|
8
8
|
appearance?: "outline" | "solid" | "simple" | undefined;
|
|
9
9
|
size?: "xs" | "sm" | "md" | "lg" | undefined;
|
|
10
10
|
isRounded?: boolean | "true" | undefined;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import f from"invariant";import*as s from"react";import{styled as w}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{disabledStyle as k}from"../../utilities/style/disabledStyle.js";import{getExternalAnchorProps as D}from"../../utilities/uri/index.js";import{Icon as m}from"../icon/Icon.js";import{ActionIconSizeMap as v}from"./ActionIcon.constants.js";import{OptionalTooltipWrapper as z}from"../../utilities/optional-tooltip-wrapper/OptionalTooltipWrapper.js";const o=(r,i,a,e)=>({theme:r,appearance:"simple",css:{bg:"transparent",color:i,"&:not(:disabled):hover, &:not(:disabled):focus":{color:a},"&:not(:disabled):active":{color:e}}}),p=(r,i,a,e)=>({theme:r,appearance:"solid",css:{bg:i,color:"white","&:not(:disabled):hover, &:not(:disabled):focus":{bg:a,color:"white"},"&:not(:disabled):active":{bg:e}}}),t=(r,i,a,e)=>({theme:r,appearance:"outline",css:{bg:"unset",border:"1px solid",borderColor:"currentColor",color:i,"&:not(:disabled):hover, &:not(:disabled):focus":{color:a},"&:not(:disabled):active":{color:e}}}),M=w("button",{alignItems:"center",appearance:"none",bg:"white",border:"unset",borderRadius:"$0",boxSizing:"border-box",cursor:"pointer",display:"flex",flexShrink:0,justifyContent:"center",p:"unset",transition:"all 100ms ease-out","&[disabled]":k,variants:{theme:{neutral:{},primary:{},success:{},warning:{},danger:{},white:{}},appearance:{simple:{},outline:{},solid:{}},size:{xs:{size:"$2"},sm:{size:"$3"},md:{size:"$4"},lg:{size:"$5"}},isRounded:{true:{borderRadius:"$round"}}},compoundVariants:[o("neutral","$grey700","$primary900","$primary1000"),o("primary","$primary800","$primary900","$primary1000"),o("primaryDark","$primary1000","$primary1100","$primary1200"),o("success","$success","$successMid","$successDark"),o("warning","$warning","$warningMid","$warningDark"),o("danger","$danger","$dangerMid","$dangerDark"),o("white","#fff","#fff","#fff"),p("primary","$primary800","$primary900","$primary1000"),p("primaryDark","$primary1000","$primary1100","$primary1200"),p("success","$success","$successMid","$successDark"),p("warning","$warning","$warningMid","$warningDark"),p("danger","$danger","$dangerMid","$dangerDark"),t("primary","$primary800","$primary900","$primary1000"),t("primaryDark","$primary1000","$primary1100","$primary1200"),t("success","$success","$successMid","$successDark"),t("warning","$warning","$warningMid","$warningDark"),t("danger","$danger","$dangerMid","$dangerDark"),t("white","#fff","#fff","#fff")]}),d=s.forwardRef(({children:r,theme:i="primary",appearance:a="simple",size:e="sm",label:$,href:l,disabled:c,hasTooltip:u=!0,tooltipSide:g,...b},h)=>{const y=`A single ${m.displayName} component is permitted as a child of ${d.displayName}`;return f(s.Children.count(r)===1,y),s.createElement(z,{hasTooltip:u,label:$,tooltipSide:g},s.createElement(M,{...l?{as:"a",href:c?null:l,onClick:void 0,"aria-disabled":!!c}:{type:"button"},...D(l),...b,"aria-label":$,theme:i,appearance:a,size:e,ref:h,disabled:c},s.Children.map(r,n=>{if(!s.isValidElement(n))throw new Error(y);return f(n.type===m,`Children of type ${n==null?void 0:n.type} aren't permitted. Only an ${m.displayName} component is allowed in ${d.displayName}`),s.cloneElement(n,{size:v[e],css:{...n.props.css?n.props.css:{}}})})))});d.displayName="ActionIcon";export{d as ActionIcon};
|
|
2
2
|
//# sourceMappingURL=ActionIcon.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionIcon.js","sources":["../../../src/components/action-icon/ActionIcon.tsx"],"sourcesContent":["import type { VariantProps } from '@atom-learning/stitches-react'\nimport invariant from 'invariant'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { NavigatorActions } from '~/types'\nimport { disabledStyle, Override } from '~/utilities'\nimport type { TOptionalTooltipWrapperProps } from '~/utilities/optional-tooltip-wrapper'\nimport { OptionalTooltipWrapper } from '~/utilities/optional-tooltip-wrapper'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nimport { Icon } from '../icon/Icon'\nimport { ActionIconSizeMap } from './ActionIcon.constants'\n\nconst getSimpleVariant = (\n theme: string,\n base: string,\n interact: string,\n active: string\n) => ({\n theme,\n appearance: 'simple',\n css: {\n bg: 'transparent',\n color: base,\n '&:not(:disabled):hover, &:not(:disabled):focus': { color: interact },\n '&:not(:disabled):active': { color: active }\n }\n})\n\nconst getSolidVariant = (\n theme: string,\n base: string,\n interact: string,\n active: string\n) => ({\n theme,\n appearance: 'solid',\n css: {\n bg: base,\n color: 'white',\n '&:not(:disabled):hover, &:not(:disabled):focus': {\n bg: interact,\n color: 'white'\n },\n '&:not(:disabled):active': { bg: active }\n }\n})\n\nconst getOutlineVariant = (\n theme: string,\n base: string,\n interact: string,\n active: string\n) => ({\n theme,\n appearance: 'outline',\n css: {\n border: '1px solid',\n borderColor: 'currentColor',\n color: base,\n '&:not(:disabled):hover, &:not(:disabled):focus': { color: interact },\n '&:not(:disabled):active': { color: active }\n }\n})\n\nconst StyledButton = styled('button', {\n alignItems: 'center',\n appearance: 'none',\n bg: 'white',\n border: 'unset',\n borderRadius: '$0',\n boxSizing: 'border-box',\n cursor: 'pointer',\n display: 'flex',\n flexShrink: 0,\n justifyContent: 'center',\n p: 'unset',\n transition: 'all 100ms ease-out',\n '&[disabled]': disabledStyle,\n variants: {\n theme: {\n neutral: {},\n primary: {},\n success: {},\n warning: {},\n danger: {}\n },\n appearance: {\n simple: {},\n outline: {},\n solid: {}\n },\n size: {\n xs: { size: '$2' },\n sm: { size: '$3' },\n md: { size: '$4' },\n lg: { size: '$5' }\n },\n isRounded: {\n true: {\n borderRadius: '$round'\n }\n }\n },\n\n // prettier-ignore\n compoundVariants: [\n getSimpleVariant('neutral', '$grey700', '$primary900', '$primary1000'),\n getSimpleVariant('primary', '$primary800', '$primary900', '$primary1000'),\n getSimpleVariant('primaryDark', '$primary1000', '$primary1100', '$primary1200'),\n getSimpleVariant('success', '$success', '$successMid', '$successDark'),\n getSimpleVariant('warning', '$warning', '$warningMid', '$warningDark'),\n getSimpleVariant('danger', '$danger', '$dangerMid', '$dangerDark'),\n\n getSolidVariant('primary', '$primary800', '$primary900', '$primary1000'),\n getSolidVariant('primaryDark', '$primary1000', '$primary1100', '$primary1200'),\n getSolidVariant('success', '$success', '$successMid', '$successDark'),\n getSolidVariant('warning', '$warning', '$warningMid', '$warningDark'),\n getSolidVariant('danger', '$danger', '$dangerMid', '$dangerDark'),\n\n getOutlineVariant('primary', '$primary800', '$primary900', '$primary1000'),\n getOutlineVariant('primaryDark', '$primary1000', '$primary1100', '$primary1200'),\n getOutlineVariant('success', '$success', '$successMid', '$successDark'),\n getOutlineVariant('warning', '$warning', '$warningMid', '$warningDark'),\n getOutlineVariant('danger', '$danger', '$dangerMid', '$dangerDark')\n ]\n})\n\ntype ActionIconProps = Override<\n React.ComponentProps<typeof StyledButton>,\n VariantProps<typeof StyledButton> & {\n as?: string | React.ReactNode\n children: React.ReactNode\n label: string\n } & Omit<TOptionalTooltipWrapperProps, 'label'> &\n NavigatorActions\n>\n\nexport const ActionIcon: React.ForwardRefExoticComponent<ActionIconProps> =\n React.forwardRef(\n (\n {\n children,\n theme = 'primary',\n appearance = 'simple',\n size = 'sm',\n label,\n href,\n disabled,\n hasTooltip = true,\n tooltipSide,\n ...remainingProps\n },\n ref\n ) => {\n const INVALID_CHILDREN_MESSAGE = `A single ${Icon.displayName} component is permitted as a child of ${ActionIcon.displayName}`\n\n invariant(React.Children.count(children) === 1, INVALID_CHILDREN_MESSAGE)\n\n const optionalLinkProps = href\n ? ({\n as: 'a',\n href: disabled ? null : href,\n onClick: undefined,\n 'aria-disabled': !!disabled\n } as const)\n : ({ type: 'button' } as const)\n\n return (\n <OptionalTooltipWrapper\n hasTooltip={hasTooltip}\n label={label}\n tooltipSide={tooltipSide}\n >\n <StyledButton\n {...optionalLinkProps}\n {...getExternalAnchorProps(href)}\n {...remainingProps}\n aria-label={label}\n theme={theme}\n appearance={appearance}\n size={size}\n ref={ref}\n disabled={disabled}\n >\n {React.Children.map(children, (child) => {\n // TS needs this check for any following code to access child.type\n // even with optional chaining\n if (!React.isValidElement(child)) {\n throw new Error(INVALID_CHILDREN_MESSAGE)\n }\n\n invariant(\n child.type === Icon,\n `Children of type ${child?.type} aren't permitted. Only an ${Icon.displayName} component is allowed in ${ActionIcon.displayName}`\n )\n\n return React.cloneElement(\n child as React.ReactElement<React.ComponentProps<typeof Icon>>,\n {\n size: ActionIconSizeMap[size as string],\n css: { ...(child.props.css ? child.props.css : {}) }\n }\n )\n })}\n </StyledButton>\n </OptionalTooltipWrapper>\n )\n }\n )\n\nActionIcon.displayName = 'ActionIcon'\n"],"names":["getSimpleVariant","theme","base","interact","active","getSolidVariant","getOutlineVariant","StyledButton","styled","disabledStyle","ActionIcon","React","children","appearance","size","label","href","disabled","hasTooltip","tooltipSide","remainingProps","ref","INVALID_CHILDREN_MESSAGE","Icon","invariant","OptionalTooltipWrapper","getExternalAnchorProps","child","ActionIconSizeMap"],"mappings":"knBAcA,MAAMA,EAAmB,CACvBC,EACAC,EACAC,EACAC,KACI,CACJ,MAAAH,EACA,WAAY,SACZ,IAAK,CACH,GAAI,cACJ,MAAOC,EACP,iDAAkD,CAAE,MAAOC,CAAS,EACpE,0BAA2B,CAAE,MAAOC,CAAO,CAC7C,CACF,GAEMC,EAAkB,CACtBJ,EACAC,EACAC,EACAC,KACI,CACJ,MAAAH,EACA,WAAY,QACZ,IAAK,CACH,GAAIC,EACJ,MAAO,QACP,iDAAkD,CAChD,GAAIC,EACJ,MAAO,OACT,EACA,0BAA2B,CAAE,GAAIC,CAAO,CAC1C,CACF,GAEME,EAAoB,CACxBL,EACAC,EACAC,EACAC,KACI,CACJ,MAAAH,EACA,WAAY,UACZ,IAAK,CACH,OAAQ,YACR,YAAa,eACb,MAAOC,EACP,iDAAkD,CAAE,MAAOC,CAAS,EACpE,0BAA2B,CAAE,MAAOC,CAAO,CAC7C,CACF,GAEMG,EAAeC,EAAO,SAAU,CACpC,WAAY,SACZ,WAAY,OACZ,GAAI,QACJ,OAAQ,QACR,aAAc,KACd,UAAW,aACX,OAAQ,UACR,QAAS,OACT,WAAY,EACZ,eAAgB,SAChB,EAAG,QACH,WAAY,qBACZ,cAAeC,EACf,SAAU,CACR,MAAO,CACL,QAAS,
|
|
1
|
+
{"version":3,"file":"ActionIcon.js","sources":["../../../src/components/action-icon/ActionIcon.tsx"],"sourcesContent":["import type { VariantProps } from '@atom-learning/stitches-react'\nimport invariant from 'invariant'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { NavigatorActions } from '~/types'\nimport { disabledStyle, Override } from '~/utilities'\nimport type { TOptionalTooltipWrapperProps } from '~/utilities/optional-tooltip-wrapper'\nimport { OptionalTooltipWrapper } from '~/utilities/optional-tooltip-wrapper'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nimport { Icon } from '../icon/Icon'\nimport { ActionIconSizeMap } from './ActionIcon.constants'\n\nconst getSimpleVariant = (\n theme: string,\n base: string,\n interact: string,\n active: string\n) => ({\n theme,\n appearance: 'simple',\n css: {\n bg: 'transparent',\n color: base,\n '&:not(:disabled):hover, &:not(:disabled):focus': { color: interact },\n '&:not(:disabled):active': { color: active }\n }\n})\n\nconst getSolidVariant = (\n theme: string,\n base: string,\n interact: string,\n active: string\n) => ({\n theme,\n appearance: 'solid',\n css: {\n bg: base,\n color: 'white',\n '&:not(:disabled):hover, &:not(:disabled):focus': {\n bg: interact,\n color: 'white'\n },\n '&:not(:disabled):active': { bg: active }\n }\n})\n\nconst getOutlineVariant = (\n theme: string,\n base: string,\n interact: string,\n active: string\n) => ({\n theme,\n appearance: 'outline',\n css: {\n bg: 'unset',\n border: '1px solid',\n borderColor: 'currentColor',\n color: base,\n '&:not(:disabled):hover, &:not(:disabled):focus': { color: interact },\n '&:not(:disabled):active': { color: active }\n }\n})\n\nconst StyledButton = styled('button', {\n alignItems: 'center',\n appearance: 'none',\n bg: 'white',\n border: 'unset',\n borderRadius: '$0',\n boxSizing: 'border-box',\n cursor: 'pointer',\n display: 'flex',\n flexShrink: 0,\n justifyContent: 'center',\n p: 'unset',\n transition: 'all 100ms ease-out',\n '&[disabled]': disabledStyle,\n variants: {\n theme: {\n neutral: {},\n primary: {},\n success: {},\n warning: {},\n danger: {},\n white: {}\n },\n appearance: {\n simple: {},\n outline: {},\n solid: {}\n },\n size: {\n xs: { size: '$2' },\n sm: { size: '$3' },\n md: { size: '$4' },\n lg: { size: '$5' }\n },\n isRounded: {\n true: {\n borderRadius: '$round'\n }\n }\n },\n\n // prettier-ignore\n compoundVariants: [\n getSimpleVariant('neutral', '$grey700', '$primary900', '$primary1000'),\n getSimpleVariant('primary', '$primary800', '$primary900', '$primary1000'),\n getSimpleVariant('primaryDark', '$primary1000', '$primary1100', '$primary1200'),\n getSimpleVariant('success', '$success', '$successMid', '$successDark'),\n getSimpleVariant('warning', '$warning', '$warningMid', '$warningDark'),\n getSimpleVariant('danger', '$danger', '$dangerMid', '$dangerDark'),\n getSimpleVariant('white', '#fff', '#fff', '#fff'),\n\n getSolidVariant('primary', '$primary800', '$primary900', '$primary1000'),\n getSolidVariant('primaryDark', '$primary1000', '$primary1100', '$primary1200'),\n getSolidVariant('success', '$success', '$successMid', '$successDark'),\n getSolidVariant('warning', '$warning', '$warningMid', '$warningDark'),\n getSolidVariant('danger', '$danger', '$dangerMid', '$dangerDark'),\n\n getOutlineVariant('primary', '$primary800', '$primary900', '$primary1000'),\n getOutlineVariant('primaryDark', '$primary1000', '$primary1100', '$primary1200'),\n getOutlineVariant('success', '$success', '$successMid', '$successDark'),\n getOutlineVariant('warning', '$warning', '$warningMid', '$warningDark'),\n getOutlineVariant('danger', '$danger', '$dangerMid', '$dangerDark'),\n getOutlineVariant('white', '#fff', '#fff', '#fff')\n ]\n})\n\ntype ActionIconProps = Override<\n React.ComponentProps<typeof StyledButton>,\n VariantProps<typeof StyledButton> & {\n as?: string | React.ReactNode\n children: React.ReactNode\n label: string\n } & Omit<TOptionalTooltipWrapperProps, 'label'> &\n NavigatorActions\n>\n\nexport const ActionIcon: React.ForwardRefExoticComponent<ActionIconProps> =\n React.forwardRef(\n (\n {\n children,\n theme = 'primary',\n appearance = 'simple',\n size = 'sm',\n label,\n href,\n disabled,\n hasTooltip = true,\n tooltipSide,\n ...remainingProps\n },\n ref\n ) => {\n const INVALID_CHILDREN_MESSAGE = `A single ${Icon.displayName} component is permitted as a child of ${ActionIcon.displayName}`\n\n invariant(React.Children.count(children) === 1, INVALID_CHILDREN_MESSAGE)\n\n const optionalLinkProps = href\n ? ({\n as: 'a',\n href: disabled ? null : href,\n onClick: undefined,\n 'aria-disabled': !!disabled\n } as const)\n : ({ type: 'button' } as const)\n\n return (\n <OptionalTooltipWrapper\n hasTooltip={hasTooltip}\n label={label}\n tooltipSide={tooltipSide}\n >\n <StyledButton\n {...optionalLinkProps}\n {...getExternalAnchorProps(href)}\n {...remainingProps}\n aria-label={label}\n theme={theme}\n appearance={appearance}\n size={size}\n ref={ref}\n disabled={disabled}\n >\n {React.Children.map(children, (child) => {\n // TS needs this check for any following code to access child.type\n // even with optional chaining\n if (!React.isValidElement(child)) {\n throw new Error(INVALID_CHILDREN_MESSAGE)\n }\n\n invariant(\n child.type === Icon,\n `Children of type ${child?.type} aren't permitted. Only an ${Icon.displayName} component is allowed in ${ActionIcon.displayName}`\n )\n\n return React.cloneElement(\n child as React.ReactElement<React.ComponentProps<typeof Icon>>,\n {\n size: ActionIconSizeMap[size as string],\n css: { ...(child.props.css ? child.props.css : {}) }\n }\n )\n })}\n </StyledButton>\n </OptionalTooltipWrapper>\n )\n }\n )\n\nActionIcon.displayName = 'ActionIcon'\n"],"names":["getSimpleVariant","theme","base","interact","active","getSolidVariant","getOutlineVariant","StyledButton","styled","disabledStyle","ActionIcon","React","children","appearance","size","label","href","disabled","hasTooltip","tooltipSide","remainingProps","ref","INVALID_CHILDREN_MESSAGE","Icon","invariant","OptionalTooltipWrapper","getExternalAnchorProps","child","ActionIconSizeMap"],"mappings":"knBAcA,MAAMA,EAAmB,CACvBC,EACAC,EACAC,EACAC,KACI,CACJ,MAAAH,EACA,WAAY,SACZ,IAAK,CACH,GAAI,cACJ,MAAOC,EACP,iDAAkD,CAAE,MAAOC,CAAS,EACpE,0BAA2B,CAAE,MAAOC,CAAO,CAC7C,CACF,GAEMC,EAAkB,CACtBJ,EACAC,EACAC,EACAC,KACI,CACJ,MAAAH,EACA,WAAY,QACZ,IAAK,CACH,GAAIC,EACJ,MAAO,QACP,iDAAkD,CAChD,GAAIC,EACJ,MAAO,OACT,EACA,0BAA2B,CAAE,GAAIC,CAAO,CAC1C,CACF,GAEME,EAAoB,CACxBL,EACAC,EACAC,EACAC,KACI,CACJ,MAAAH,EACA,WAAY,UACZ,IAAK,CACH,GAAI,QACJ,OAAQ,YACR,YAAa,eACb,MAAOC,EACP,iDAAkD,CAAE,MAAOC,CAAS,EACpE,0BAA2B,CAAE,MAAOC,CAAO,CAC7C,CACF,GAEMG,EAAeC,EAAO,SAAU,CACpC,WAAY,SACZ,WAAY,OACZ,GAAI,QACJ,OAAQ,QACR,aAAc,KACd,UAAW,aACX,OAAQ,UACR,QAAS,OACT,WAAY,EACZ,eAAgB,SAChB,EAAG,QACH,WAAY,qBACZ,cAAeC,EACf,SAAU,CACR,MAAO,CACL,QAAS,GACT,QAAS,CACT,EAAA,QAAS,CAAA,EACT,QAAS,CAAA,EACT,OAAQ,GACR,MAAO,CACT,CAAA,EACA,WAAY,CACV,OAAQ,CAAA,EACR,QAAS,GACT,MAAO,CAAA,CACT,EACA,KAAM,CACJ,GAAI,CAAE,KAAM,IAAK,EACjB,GAAI,CAAE,KAAM,IAAK,EACjB,GAAI,CAAE,KAAM,IAAK,EACjB,GAAI,CAAE,KAAM,IAAK,CACnB,EACA,UAAW,CACT,KAAM,CACJ,aAAc,QAChB,CACF,CACF,EAGA,iBAAkB,CAChBT,EAAiB,UAAW,WAAY,cAAe,cAAc,EACrEA,EAAiB,UAAW,cAAe,cAAe,cAAc,EACxEA,EAAiB,cAAe,eAAgB,eAAgB,cAAc,EAC9EA,EAAiB,UAAW,WAAY,cAAe,cAAc,EACrEA,EAAiB,UAAW,WAAY,cAAe,cAAc,EACrEA,EAAiB,SAAU,UAAW,aAAc,aAAa,EACjEA,EAAiB,QAAS,OAAQ,OAAQ,MAAM,EAEhDK,EAAgB,UAAW,cAAe,cAAe,cAAc,EACvEA,EAAgB,cAAe,eAAgB,eAAgB,cAAc,EAC7EA,EAAgB,UAAW,WAAY,cAAe,cAAc,EACpEA,EAAgB,UAAW,WAAY,cAAe,cAAc,EACpEA,EAAgB,SAAU,UAAW,aAAc,aAAa,EAEhEC,EAAkB,UAAW,cAAe,cAAe,cAAc,EACzEA,EAAkB,cAAe,eAAgB,eAAgB,cAAc,EAC/EA,EAAkB,UAAW,WAAY,cAAe,cAAc,EACtEA,EAAkB,UAAW,WAAY,cAAe,cAAc,EACtEA,EAAkB,SAAU,UAAW,aAAc,aAAa,EAClEA,EAAkB,QAAS,OAAQ,OAAQ,MAAM,CACnD,CACF,CAAC,EAYYI,EACXC,EAAM,WACJ,CACE,CACE,SAAAC,EACA,MAAAX,EAAQ,UACR,WAAAY,EAAa,SACb,KAAAC,EAAO,KACP,MAAAC,EACA,KAAAC,EACA,SAAAC,EACA,WAAAC,EAAa,GACb,YAAAC,KACGC,CACL,EACAC,IACG,CACH,MAAMC,EAA2B,YAAYC,EAAK,oDAAoDb,EAAW,cAEjH,OAAAc,EAAUb,EAAM,SAAS,MAAMC,CAAQ,IAAM,EAAGU,CAAwB,EAYtEX,EAAA,cAACc,EAAA,CACC,WAAYP,EACZ,MAAOH,EACP,YAAaI,CAAAA,EAEbR,EAAA,cAACJ,EAAA,CACE,GAhBmBS,EACrB,CACC,GAAI,IACJ,KAAMC,EAAW,KAAOD,EACxB,QAAS,OACT,gBAAiB,CAAC,CAACC,CACrB,EACC,CAAE,KAAM,QAAS,EAUf,GAAGS,EAAuBV,CAAI,EAC9B,GAAGI,EACJ,aAAYL,EACZ,MAAOd,EACP,WAAYY,EACZ,KAAMC,EACN,IAAKO,EACL,SAAUJ,GAETN,EAAM,SAAS,IAAIC,EAAWe,GAAU,CAGvC,GAAI,CAAChB,EAAM,eAAegB,CAAK,EAC7B,MAAM,IAAI,MAAML,CAAwB,EAG1C,OAAAE,EACEG,EAAM,OAASJ,EACf,oBAAoBI,GAAA,KAAAA,OAAAA,EAAO,kCAAkCJ,EAAK,uCAAuCb,EAAW,aACtH,EAEOC,EAAM,aACXgB,EACA,CACE,KAAMC,EAAkBd,GACxB,IAAK,CAAE,GAAIa,EAAM,MAAM,IAAMA,EAAM,MAAM,IAAM,CAAA,CAAI,CACrD,CACF,CACF,CAAC,CACH,CACF,CAEJ,CACF,EAEFjB,EAAW,YAAc"}
|
|
@@ -1156,17 +1156,17 @@ export declare const BannerRegular: {
|
|
|
1156
1156
|
marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
|
|
1157
1157
|
};
|
|
1158
1158
|
}> | undefined;
|
|
1159
|
-
theme?: "success" | "danger" | "warning" | "primary" | "neutral" | ({
|
|
1160
|
-
"@sm"?: "success" | "danger" | "warning" | "primary" | "neutral" | undefined;
|
|
1161
|
-
"@md"?: "success" | "danger" | "warning" | "primary" | "neutral" | undefined;
|
|
1162
|
-
"@lg"?: "success" | "danger" | "warning" | "primary" | "neutral" | undefined;
|
|
1163
|
-
"@xl"?: "success" | "danger" | "warning" | "primary" | "neutral" | undefined;
|
|
1164
|
-
"@reducedMotion"?: "success" | "danger" | "warning" | "primary" | "neutral" | undefined;
|
|
1165
|
-
"@allowMotion"?: "success" | "danger" | "warning" | "primary" | "neutral" | undefined;
|
|
1166
|
-
"@hover"?: "success" | "danger" | "warning" | "primary" | "neutral" | undefined;
|
|
1167
|
-
"@initial"?: "success" | "danger" | "warning" | "primary" | "neutral" | undefined;
|
|
1159
|
+
theme?: "success" | "danger" | "warning" | "primary" | "white" | "neutral" | ({
|
|
1160
|
+
"@sm"?: "success" | "danger" | "warning" | "primary" | "white" | "neutral" | undefined;
|
|
1161
|
+
"@md"?: "success" | "danger" | "warning" | "primary" | "white" | "neutral" | undefined;
|
|
1162
|
+
"@lg"?: "success" | "danger" | "warning" | "primary" | "white" | "neutral" | undefined;
|
|
1163
|
+
"@xl"?: "success" | "danger" | "warning" | "primary" | "white" | "neutral" | undefined;
|
|
1164
|
+
"@reducedMotion"?: "success" | "danger" | "warning" | "primary" | "white" | "neutral" | undefined;
|
|
1165
|
+
"@allowMotion"?: "success" | "danger" | "warning" | "primary" | "white" | "neutral" | undefined;
|
|
1166
|
+
"@hover"?: "success" | "danger" | "warning" | "primary" | "white" | "neutral" | undefined;
|
|
1167
|
+
"@initial"?: "success" | "danger" | "warning" | "primary" | "white" | "neutral" | undefined;
|
|
1168
1168
|
} & {
|
|
1169
|
-
[x: string]: "success" | "danger" | "warning" | "primary" | "neutral" | undefined;
|
|
1169
|
+
[x: string]: "success" | "danger" | "warning" | "primary" | "white" | "neutral" | undefined;
|
|
1170
1170
|
}) | undefined;
|
|
1171
1171
|
prefix?: string | undefined;
|
|
1172
1172
|
form?: string | undefined;
|
|
@@ -2,7 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
declare const StyledDismiss: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
|
|
3
3
|
ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
|
|
4
4
|
}, "appearance" | "size" | "css" | "theme" | "isRounded"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
|
|
5
|
-
theme?: "success" | "danger" | "warning" | "primary" | "neutral" | undefined;
|
|
5
|
+
theme?: "success" | "danger" | "warning" | "primary" | "white" | "neutral" | undefined;
|
|
6
6
|
appearance?: "outline" | "solid" | "simple" | undefined;
|
|
7
7
|
size?: "xs" | "sm" | "md" | "lg" | undefined;
|
|
8
8
|
isRounded?: boolean | "true" | undefined;
|
|
@@ -377,7 +377,7 @@ declare const StyledDismiss: import("@atom-learning/stitches-react/types/styled-
|
|
|
377
377
|
};
|
|
378
378
|
}> | undefined;
|
|
379
379
|
}, "appearance" | "size" | "theme" | "label" | "children" | "as" | "hasTooltip" | "tooltipSide" | "isRounded" | keyof import("../../../types").NavigatorActions> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
|
|
380
|
-
theme?: "success" | "danger" | "warning" | "primary" | "neutral" | undefined;
|
|
380
|
+
theme?: "success" | "danger" | "warning" | "primary" | "white" | "neutral" | undefined;
|
|
381
381
|
appearance?: "outline" | "solid" | "simple" | undefined;
|
|
382
382
|
size?: "xs" | "sm" | "md" | "lg" | undefined;
|
|
383
383
|
isRounded?: boolean | "true" | undefined;
|
|
@@ -1153,17 +1153,17 @@ export declare const BannerSlim: {
|
|
|
1153
1153
|
marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
|
|
1154
1154
|
};
|
|
1155
1155
|
}> | undefined;
|
|
1156
|
-
theme?: "success" | "danger" | "warning" | "primary" | "neutral" | ({
|
|
1157
|
-
"@sm"?: "success" | "danger" | "warning" | "primary" | "neutral" | undefined;
|
|
1158
|
-
"@md"?: "success" | "danger" | "warning" | "primary" | "neutral" | undefined;
|
|
1159
|
-
"@lg"?: "success" | "danger" | "warning" | "primary" | "neutral" | undefined;
|
|
1160
|
-
"@xl"?: "success" | "danger" | "warning" | "primary" | "neutral" | undefined;
|
|
1161
|
-
"@reducedMotion"?: "success" | "danger" | "warning" | "primary" | "neutral" | undefined;
|
|
1162
|
-
"@allowMotion"?: "success" | "danger" | "warning" | "primary" | "neutral" | undefined;
|
|
1163
|
-
"@hover"?: "success" | "danger" | "warning" | "primary" | "neutral" | undefined;
|
|
1164
|
-
"@initial"?: "success" | "danger" | "warning" | "primary" | "neutral" | undefined;
|
|
1156
|
+
theme?: "success" | "danger" | "warning" | "primary" | "white" | "neutral" | ({
|
|
1157
|
+
"@sm"?: "success" | "danger" | "warning" | "primary" | "white" | "neutral" | undefined;
|
|
1158
|
+
"@md"?: "success" | "danger" | "warning" | "primary" | "white" | "neutral" | undefined;
|
|
1159
|
+
"@lg"?: "success" | "danger" | "warning" | "primary" | "white" | "neutral" | undefined;
|
|
1160
|
+
"@xl"?: "success" | "danger" | "warning" | "primary" | "white" | "neutral" | undefined;
|
|
1161
|
+
"@reducedMotion"?: "success" | "danger" | "warning" | "primary" | "white" | "neutral" | undefined;
|
|
1162
|
+
"@allowMotion"?: "success" | "danger" | "warning" | "primary" | "white" | "neutral" | undefined;
|
|
1163
|
+
"@hover"?: "success" | "danger" | "warning" | "primary" | "white" | "neutral" | undefined;
|
|
1164
|
+
"@initial"?: "success" | "danger" | "warning" | "primary" | "white" | "neutral" | undefined;
|
|
1165
1165
|
} & {
|
|
1166
|
-
[x: string]: "success" | "danger" | "warning" | "primary" | "neutral" | undefined;
|
|
1166
|
+
[x: string]: "success" | "danger" | "warning" | "primary" | "white" | "neutral" | undefined;
|
|
1167
1167
|
}) | undefined;
|
|
1168
1168
|
prefix?: string | undefined;
|
|
1169
1169
|
form?: string | undefined;
|
|
@@ -2,7 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
declare const StyledDismiss: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
|
|
3
3
|
ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
|
|
4
4
|
}, "appearance" | "size" | "css" | "theme" | "isRounded"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
|
|
5
|
-
theme?: "success" | "danger" | "warning" | "primary" | "neutral" | undefined;
|
|
5
|
+
theme?: "success" | "danger" | "warning" | "primary" | "white" | "neutral" | undefined;
|
|
6
6
|
appearance?: "outline" | "solid" | "simple" | undefined;
|
|
7
7
|
size?: "xs" | "sm" | "md" | "lg" | undefined;
|
|
8
8
|
isRounded?: boolean | "true" | undefined;
|
|
@@ -377,7 +377,7 @@ declare const StyledDismiss: import("@atom-learning/stitches-react/types/styled-
|
|
|
377
377
|
};
|
|
378
378
|
}> | undefined;
|
|
379
379
|
}, "appearance" | "size" | "theme" | "label" | "children" | "as" | "hasTooltip" | "tooltipSide" | "isRounded" | keyof import("../../../types").NavigatorActions> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
|
|
380
|
-
theme?: "success" | "danger" | "warning" | "primary" | "neutral" | undefined;
|
|
380
|
+
theme?: "success" | "danger" | "warning" | "primary" | "white" | "neutral" | undefined;
|
|
381
381
|
appearance?: "outline" | "solid" | "simple" | undefined;
|
|
382
382
|
size?: "xs" | "sm" | "md" | "lg" | undefined;
|
|
383
383
|
isRounded?: boolean | "true" | undefined;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import j from"invariant";import*as a from"react";import{useFormContext as E}from"react-hook-form";import{throttle as k}from"throttle-debounce";import{Box as P}from"../box/Box.js";import{Flex as S}from"../flex/Flex.js";import{InlineMessage as B}from"../inline-message/InlineMessage.js";import{PasswordField as D}from"../password-field/PasswordField.js";const c=({validate:d,defaultValidation:u,messageDirection:p="row",label:f="Create a password",name:r="password",css:v,validation:b,...w})=>{var s;const{formState:l}=E(),[i,n]=a.useState(!1),[C,m]=a.useState(u),
|
|
1
|
+
import j from"invariant";import*as a from"react";import{useFormContext as E}from"react-hook-form";import{throttle as k}from"throttle-debounce";import{Box as P}from"../box/Box.js";import{Flex as S}from"../flex/Flex.js";import{InlineMessage as B}from"../inline-message/InlineMessage.js";import{PasswordField as D}from"../password-field/PasswordField.js";const c=({validate:d,defaultValidation:u,messageDirection:p="row",label:f="Create a password",name:r="password",css:v,validation:b,...w})=>{var s;const{formState:l}=E(),[i,n]=a.useState(!1),[C,m]=a.useState(u),F=l.touched[r],g=((s=l.errors[r])==null?void 0:s.type)==="validate",o=a.useCallback(async e=>{const t=await d(e);return t?(j(typeof t=="object","The validate function must return an object"),m(t),Object.values(t).every(h=>h)):!1},[m]),x=a.useCallback(k(500,o),[o]),y=(e,t)=>e?"success":t?"neutral":"error";return a.createElement(P,{css:v},a.createElement(D,{label:f,name:r,onChange:e=>x(e.target.value),onBlur:()=>n(!1),onFocus:()=>n(!0),validation:{...b,validate:o},...w}),(F||i||g)&&a.createElement(S,{css:{mt:"$2",gap:"$2",flexWrap:"wrap",flexDirection:p}},Object.entries(C).map(([e,t])=>a.createElement(B,{key:e,theme:y(t,i)},e))))};c.displayName="CreatePasswordField";export{c as CreatePasswordField};
|
|
2
2
|
//# sourceMappingURL=CreatePasswordField.js.map
|
|
@@ -410,7 +410,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
|
|
|
410
410
|
/**
|
|
411
411
|
* Used in place of `DataTable.Table` to render a table with rows that the user can sort by drag-and-drop
|
|
412
412
|
*/
|
|
413
|
-
DragAndDropTable: ({ idColumn, onDragAndDrop, sortable, striped, theme, css, ...props }: Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref"> & {
|
|
413
|
+
DragAndDropTable: ({ idColumn, onDragAndDrop, sortable, striped, theme, css, ...props }: Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref"> & {
|
|
414
414
|
ref?: ((instance: HTMLTableElement | null) => void) | import("react").RefObject<HTMLTableElement> | null | undefined;
|
|
415
415
|
}, "size" | "css" | "corners"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
|
|
416
416
|
size?: "md" | "lg" | "xl" | undefined;
|
|
@@ -790,7 +790,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
|
|
|
790
790
|
scrollContainerCss?: import("../..").CSS;
|
|
791
791
|
scrollContainerkey?: string;
|
|
792
792
|
maxRowDepth?: number;
|
|
793
|
-
}, "children" | "numberOfStickyColumns"> & Partial<Pick<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
|
|
793
|
+
}, "ref"> & import("react").RefAttributes<HTMLTableElement>, "children" | "numberOfStickyColumns"> & Partial<Pick<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
|
|
794
794
|
ref?: ((instance: HTMLTableSectionElement | null) => void) | import("react").RefObject<HTMLTableSectionElement> | null | undefined;
|
|
795
795
|
}, "css" | "theme" | "isSticky"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
|
|
796
796
|
theme?: "light" | "primary" | "white" | "primaryDark" | "primaryLight" | undefined;
|
|
@@ -1168,6 +1168,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
|
|
|
1168
1168
|
}, "children"> & {
|
|
1169
1169
|
sortable?: boolean;
|
|
1170
1170
|
isSticky?: boolean;
|
|
1171
|
+
stickyOffset?: number;
|
|
1171
1172
|
headerCss?: import("../..").CSS;
|
|
1172
1173
|
}, "theme" | "sortable">> & Partial<Pick<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
|
|
1173
1174
|
ref?: ((instance: HTMLTableSectionElement | null) => void) | import("react").RefObject<HTMLTableSectionElement> | null | undefined;
|
|
@@ -1546,6 +1547,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
|
|
|
1546
1547
|
}, "striped">> & {
|
|
1547
1548
|
scrollOptions?: {
|
|
1548
1549
|
hasStickyHeader?: boolean;
|
|
1550
|
+
stickyHeaderOffset?: number;
|
|
1549
1551
|
headerCss?: import("../..").CSS;
|
|
1550
1552
|
numberOfStickyColumns?: number;
|
|
1551
1553
|
scrollContainerCss?: import("../..").CSS;
|
|
@@ -1982,7 +1984,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
|
|
|
1982
1984
|
* If you need more customisation options, you can build your own implementation
|
|
1983
1985
|
* with `useDataTable` and the UI-only `Table` components.
|
|
1984
1986
|
*/
|
|
1985
|
-
Head: ({ sortable, theme, isSticky, css, ...props }: Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
|
|
1987
|
+
Head: ({ sortable, theme, isSticky, stickyOffset, css, ...props }: Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
|
|
1986
1988
|
ref?: ((instance: HTMLTableSectionElement | null) => void) | import("react").RefObject<HTMLTableSectionElement> | null | undefined;
|
|
1987
1989
|
}, "css" | "theme" | "isSticky"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
|
|
1988
1990
|
theme?: "light" | "primary" | "white" | "primaryDark" | "primaryLight" | undefined;
|
|
@@ -2360,8 +2362,9 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
|
|
|
2360
2362
|
}, "children"> & {
|
|
2361
2363
|
sortable?: boolean;
|
|
2362
2364
|
isSticky?: boolean;
|
|
2365
|
+
stickyOffset?: number;
|
|
2363
2366
|
headerCss?: import("../..").CSS;
|
|
2364
|
-
}) => import("react").
|
|
2367
|
+
}) => import("react").ReactElement;
|
|
2365
2368
|
/** Default header implementation for `DataTable`
|
|
2366
2369
|
*
|
|
2367
2370
|
* Can be configured to make the column sortable. If you need more customisation options,
|
|
@@ -3154,7 +3157,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
|
|
|
3154
3157
|
* scratch with `useDataTable` and the UI-only `Table` components.
|
|
3155
3158
|
*
|
|
3156
3159
|
*/
|
|
3157
|
-
Table: ({ sortable, striped, theme, css, scrollOptions, rowAction, ...props }: import("./DataTableTable").DataTableTableProps) =>
|
|
3160
|
+
Table: ({ sortable, striped, theme, css, scrollOptions, rowAction, ...props }: import("./DataTableTable").DataTableTableProps) => JSX.Element | null;
|
|
3158
3161
|
/** Default loading implementation for remote data
|
|
3159
3162
|
*
|
|
3160
3163
|
* Renders a loading component while fetching the paginated data using `getAsyncData`.
|
|
@@ -4304,16 +4307,16 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
|
|
|
4304
4307
|
};
|
|
4305
4308
|
}> | undefined;
|
|
4306
4309
|
}) => import("react").JSX.Element | null;
|
|
4307
|
-
/**
|
|
4310
|
+
/** Select all rows checkbox.
|
|
4308
4311
|
*
|
|
4309
4312
|
* Renders a checkbox on the header, allowing for bulk selection/deselection of all selectable rows
|
|
4310
4313
|
*/
|
|
4311
4314
|
SelectAllRowsCheckbox: ({ label }: {
|
|
4312
4315
|
label?: string;
|
|
4313
4316
|
}) => import("react").JSX.Element;
|
|
4314
|
-
/**
|
|
4317
|
+
/** Individual row selection checkbox.
|
|
4315
4318
|
*
|
|
4316
|
-
* Renders a checkbox on
|
|
4319
|
+
* Renders a checkbox on each row, allowing for individual selection/deselection of any selectable row
|
|
4317
4320
|
*/
|
|
4318
4321
|
RowSelectionCheckbox: ({ row, checked, onCheckedChange, label }: {
|
|
4319
4322
|
row: import("@tanstack/table-core").Row<Record<string, unknown>>;
|
|
@@ -4321,9 +4324,9 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
|
|
|
4321
4324
|
onCheckedChange: (value: boolean) => void;
|
|
4322
4325
|
label?: string;
|
|
4323
4326
|
}) => import("react").ReactElement;
|
|
4324
|
-
/**
|
|
4327
|
+
/** Bulk actions for selected rows.
|
|
4325
4328
|
*
|
|
4326
|
-
* Renders a
|
|
4329
|
+
* Renders a toolbar with actions that can be applied to all selected rows
|
|
4327
4330
|
*/
|
|
4328
4331
|
BulkActions: (({ children, ...rest }: {
|
|
4329
4332
|
css?: import("../..").CSS;
|
|
@@ -4347,4 +4350,18 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
|
|
|
4347
4350
|
children: import("react").ReactNode;
|
|
4348
4351
|
}) => import("react").JSX.Element | null;
|
|
4349
4352
|
};
|
|
4353
|
+
/** Bulk actions for selected rows.
|
|
4354
|
+
*
|
|
4355
|
+
* Renders a toolbar with actions that can be applied to all selected rows
|
|
4356
|
+
*/
|
|
4357
|
+
BulkActionsFloating: (({ css, children, ...rest }: {
|
|
4358
|
+
css?: import("../..").CSS;
|
|
4359
|
+
children: import("react").ReactNode;
|
|
4360
|
+
}) => import("react").JSX.Element | null) & {
|
|
4361
|
+
SelectedRowActions: ({ cancelLabel, showDividers, children }: {
|
|
4362
|
+
cancelLabel?: string;
|
|
4363
|
+
showDividers?: boolean;
|
|
4364
|
+
children: import("react").ReactNode;
|
|
4365
|
+
}) => import("react").JSX.Element | null;
|
|
4366
|
+
};
|
|
4350
4367
|
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{DataTableBody as a}from"./DataTableBody.js";import{DataTableBulkActions as o}from"./DataTableBulkActions.js";import{
|
|
1
|
+
import{DataTableBody as a}from"./DataTableBody.js";import{DataTableBulkActions as o}from"./DataTableBulkActions.js";import{DataTableBulkActionsFloating as t}from"./DataTableBulkActionsFloating.js";import{DataTableProvider as r}from"./DataTableContext.js";import{DataTableDataCell as e}from"./DataTableDataCell.js";import{DataTableEmptyState as l}from"./DataTableEmptyState.js";import{DataTableError as m}from"./DataTableError.js";import{DataTableGlobalFilter as i}from"./DataTableGlobalFilter.js";import{DataTableHead as b}from"./DataTableHead.js";import{DataTableHeaderCell as D}from"./DataTableHeaderCell.js";import{DataTableLoading as p}from"./DataTableLoading.js";import{DataTableMetaData as T}from"./DataTableMetaData.js";import{DataTableRow as f}from"./DataTableRow.js";import{DataTableRowSelectionCheckbox as n}from"./DataTableRowSelectionCheckbox.js";import{DataTableSelectAllRowsCheckbox as c}from"./DataTableSelectAllRowsCheckbox.js";import{DataTableTable as d}from"./DataTableTable.js";import{DragAndDropTable as g}from"./drag-and-drop/DragAndDropTable.js";import{Pagination as s}from"./pagination/Pagination.js";const k=Object.assign(r,{Body:a,DataCell:e,DragAndDropTable:g,GlobalFilter:i,Head:b,HeaderCell:D,MetaData:T,Pagination:s,Row:f,Table:d,Loading:p,Error:m,EmptyState:l,SelectAllRowsCheckbox:c,RowSelectionCheckbox:n,BulkActions:o,BulkActionsFloating:t});export{k as DataTable};
|
|
2
2
|
//# sourceMappingURL=DataTable.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTable.js","sources":["../../../src/components/data-table/DataTable.tsx"],"sourcesContent":["import { DataTableBody } from './DataTableBody'\nimport { DataTableBulkActions } from './DataTableBulkActions'\nimport { DataTableProvider } from './DataTableContext'\nimport { DataTableDataCell } from './DataTableDataCell'\nimport { DataTableEmptyState } from './DataTableEmptyState'\nimport { DataTableError } from './DataTableError'\nimport { DataTableGlobalFilter } from './DataTableGlobalFilter'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableHeaderCell } from './DataTableHeaderCell'\nimport { DataTableLoading } from './DataTableLoading'\nimport { DataTableMetaData } from './DataTableMetaData'\nimport { DataTableRow } from './DataTableRow'\nimport { DataTableRowSelectionCheckbox } from './DataTableRowSelectionCheckbox'\nimport { DataTableSelectAllRowsCheckbox } from './DataTableSelectAllRowsCheckbox'\nimport { DataTableTable } from './DataTableTable'\nimport { DragAndDropTable } from './drag-and-drop'\nimport { Pagination } from './pagination'\n\n/** Context provider for DataTable state and logic.\n *\n * Children can call `useDataTable` to access everything provided by `@tanstack/react-table` plus\n * the functionality we've built on top.\n */\nexport const DataTable = Object.assign(DataTableProvider, {\n /** Default table body implementation for `DataTable`.\n *\n * Can be configured with alternating colours of rows. If you need more customisation options,\n * you can build your own implementation with `useDataTable()` and the UI-only `Table` components.\n */\n Body: DataTableBody,\n\n /** Default table data cell implementation for `DataTable`\n *\n *\n */\n DataCell: DataTableDataCell,\n\n /**\n * Used in place of `DataTable.Table` to render a table with rows that the user can sort by drag-and-drop\n */\n DragAndDropTable: DragAndDropTable,\n\n /** Default global search implementation for `DataTable`\n *\n * If you need more customisation options, you can compose your own implementation with our UI-only input components and `useDataTable`.\n */\n GlobalFilter: DataTableGlobalFilter,\n\n /** Default table head implementation\n *\n * Can be configured to be sortable and with different visual themes.\n * If you need more customisation options, you can build your own implementation\n * with `useDataTable` and the UI-only `Table` components.\n */\n Head: DataTableHead,\n\n /** Default header implementation for `DataTable`\n *\n * Can be configured to make the column sortable. If you need more customisation options,\n * you can build your own implementation with the UI-only `Table` components.\n */\n HeaderCell: DataTableHeaderCell,\n\n /** Default pagination implementation for `DataTable`\n *\n * Can navigate forward, backward, or to any specific page. If you need more customisation options,\n * you can build your own implementation with `useDataTable` and other UI components.\n *\n */\n MetaData: DataTableMetaData,\n\n /** Default display of amount of items and current sorting status for 'DataTable'\n *\n */\n Pagination: Pagination,\n\n /** Default row implementation for `DataTable`\n *\n * Renders all visible cells as `Table.Cell`. If you need more customisation options,\n * you can build your own implementation with the UI-only `Table` components.\n */\n Row: DataTableRow,\n\n /** Default table implementation for `DataTable`.\n *\n * Can be configured with sortable columns and different visual themes.\n *\n * If you need more customisation options, you can compose your own implementation with\n * lower-level `DataTable` components or build the whole thing from\n * scratch with `useDataTable` and the UI-only `Table` components.\n *\n */\n Table: DataTableTable,\n\n /** Default loading implementation for remote data\n *\n * Renders a loading component while fetching the paginated data using `getAsyncData`.\n *\n * If you need more customisation, you can compose your own implentation, `asyncDataState`\n * can be retrieved from `useDataTable`\n */\n Loading: DataTableLoading,\n\n /** Default error implementation for remote data\n *\n * Renders an error component when `getAsyncData` promise rejects.\n * Children are rendered as a function, it exposes a `runAsyncData` function to the children component.\n * `runAsyncData()` can be used to retry fetching the paginated data with the current pageIndex, pageSize\n * and sorting parameters or your own custom paginated options.\n *\n * If you need more customisation, you can compose your own implentation, `asyncDataState` and `runAsyncData()`\n * can be retrieved from `useDataTable`\n *\n */\n Error: DataTableError,\n\n /** Empty state implementation for `DataTable`.\n *\n * Extends the EmptyState component\n */\n EmptyState: DataTableEmptyState,\n\n /**
|
|
1
|
+
{"version":3,"file":"DataTable.js","sources":["../../../src/components/data-table/DataTable.tsx"],"sourcesContent":["import { DataTableBody } from './DataTableBody'\nimport { DataTableBulkActions } from './DataTableBulkActions'\nimport { DataTableBulkActionsFloating } from './DataTableBulkActionsFloating'\nimport { DataTableProvider } from './DataTableContext'\nimport { DataTableDataCell } from './DataTableDataCell'\nimport { DataTableEmptyState } from './DataTableEmptyState'\nimport { DataTableError } from './DataTableError'\nimport { DataTableGlobalFilter } from './DataTableGlobalFilter'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableHeaderCell } from './DataTableHeaderCell'\nimport { DataTableLoading } from './DataTableLoading'\nimport { DataTableMetaData } from './DataTableMetaData'\nimport { DataTableRow } from './DataTableRow'\nimport { DataTableRowSelectionCheckbox } from './DataTableRowSelectionCheckbox'\nimport { DataTableSelectAllRowsCheckbox } from './DataTableSelectAllRowsCheckbox'\nimport { DataTableTable } from './DataTableTable'\nimport { DragAndDropTable } from './drag-and-drop'\nimport { Pagination } from './pagination'\n\n/** Context provider for DataTable state and logic.\n *\n * Children can call `useDataTable` to access everything provided by `@tanstack/react-table` plus\n * the functionality we've built on top.\n */\nexport const DataTable = Object.assign(DataTableProvider, {\n /** Default table body implementation for `DataTable`.\n *\n * Can be configured with alternating colours of rows. If you need more customisation options,\n * you can build your own implementation with `useDataTable()` and the UI-only `Table` components.\n */\n Body: DataTableBody,\n\n /** Default table data cell implementation for `DataTable`\n *\n *\n */\n DataCell: DataTableDataCell,\n\n /**\n * Used in place of `DataTable.Table` to render a table with rows that the user can sort by drag-and-drop\n */\n DragAndDropTable: DragAndDropTable,\n\n /** Default global search implementation for `DataTable`\n *\n * If you need more customisation options, you can compose your own implementation with our UI-only input components and `useDataTable`.\n */\n GlobalFilter: DataTableGlobalFilter,\n\n /** Default table head implementation\n *\n * Can be configured to be sortable and with different visual themes.\n * If you need more customisation options, you can build your own implementation\n * with `useDataTable` and the UI-only `Table` components.\n */\n Head: DataTableHead,\n\n /** Default header implementation for `DataTable`\n *\n * Can be configured to make the column sortable. If you need more customisation options,\n * you can build your own implementation with the UI-only `Table` components.\n */\n HeaderCell: DataTableHeaderCell,\n\n /** Default pagination implementation for `DataTable`\n *\n * Can navigate forward, backward, or to any specific page. If you need more customisation options,\n * you can build your own implementation with `useDataTable` and other UI components.\n *\n */\n MetaData: DataTableMetaData,\n\n /** Default display of amount of items and current sorting status for 'DataTable'\n *\n */\n Pagination: Pagination,\n\n /** Default row implementation for `DataTable`\n *\n * Renders all visible cells as `Table.Cell`. If you need more customisation options,\n * you can build your own implementation with the UI-only `Table` components.\n */\n Row: DataTableRow,\n\n /** Default table implementation for `DataTable`.\n *\n * Can be configured with sortable columns and different visual themes.\n *\n * If you need more customisation options, you can compose your own implementation with\n * lower-level `DataTable` components or build the whole thing from\n * scratch with `useDataTable` and the UI-only `Table` components.\n *\n */\n Table: DataTableTable,\n\n /** Default loading implementation for remote data\n *\n * Renders a loading component while fetching the paginated data using `getAsyncData`.\n *\n * If you need more customisation, you can compose your own implentation, `asyncDataState`\n * can be retrieved from `useDataTable`\n */\n Loading: DataTableLoading,\n\n /** Default error implementation for remote data\n *\n * Renders an error component when `getAsyncData` promise rejects.\n * Children are rendered as a function, it exposes a `runAsyncData` function to the children component.\n * `runAsyncData()` can be used to retry fetching the paginated data with the current pageIndex, pageSize\n * and sorting parameters or your own custom paginated options.\n *\n * If you need more customisation, you can compose your own implentation, `asyncDataState` and `runAsyncData()`\n * can be retrieved from `useDataTable`\n *\n */\n Error: DataTableError,\n\n /** Empty state implementation for `DataTable`.\n *\n * Extends the EmptyState component\n */\n EmptyState: DataTableEmptyState,\n\n /** Select all rows checkbox.\n *\n * Renders a checkbox on the header, allowing for bulk selection/deselection of all selectable rows\n */\n SelectAllRowsCheckbox: DataTableSelectAllRowsCheckbox,\n\n /** Individual row selection checkbox.\n *\n * Renders a checkbox on each row, allowing for individual selection/deselection of any selectable row\n */\n RowSelectionCheckbox: DataTableRowSelectionCheckbox,\n\n /** Bulk actions for selected rows.\n *\n * Renders a toolbar with actions that can be applied to all selected rows\n */\n BulkActions: DataTableBulkActions,\n\n /** Bulk actions for selected rows.\n *\n * Renders a toolbar with actions that can be applied to all selected rows\n */\n BulkActionsFloating: DataTableBulkActionsFloating\n})\n"],"names":["DataTable","DataTableProvider","DataTableBody","DataTableDataCell","DragAndDropTable","DataTableGlobalFilter","DataTableHead","DataTableHeaderCell","DataTableMetaData","Pagination","DataTableRow","DataTableTable","DataTableLoading","DataTableError","DataTableEmptyState","DataTableSelectAllRowsCheckbox","DataTableRowSelectionCheckbox","DataTableBulkActions","DataTableBulkActionsFloating"],"mappings":"omCAwBO,MAAMA,EAAY,OAAO,OAAOC,EAAmB,CAMxD,KAAMC,EAMN,SAAUC,EAKV,iBAAkBC,EAMlB,aAAcC,EAQd,KAAMC,EAON,WAAYC,EAQZ,SAAUC,EAKV,WAAYC,EAOZ,IAAKC,EAWL,MAAOC,EASP,QAASC,EAaT,MAAOC,EAMP,WAAYC,EAMZ,sBAAuBC,EAMvB,qBAAsBC,EAMtB,YAAaC,EAMb,oBAAqBC,CACvB,CAAC"}
|
|
@@ -18,6 +18,12 @@ export type TAsyncDataOptions = {
|
|
|
18
18
|
globalFilter?: string;
|
|
19
19
|
};
|
|
20
20
|
export type TGetAsyncData = (options: TAsyncDataOptions) => Promise<TAsyncDataResult | undefined>;
|
|
21
|
+
export type TablePosition = {
|
|
22
|
+
top: number | null;
|
|
23
|
+
bottom: number | null;
|
|
24
|
+
offsetTop: number;
|
|
25
|
+
isVisible: boolean;
|
|
26
|
+
};
|
|
21
27
|
export type DataTableContextType<T = unknown> = Table<T> & {
|
|
22
28
|
setIsSortable: React.Dispatch<React.SetStateAction<boolean>>;
|
|
23
29
|
applyPagination: () => void;
|
|
@@ -28,6 +34,8 @@ export type DataTableContextType<T = unknown> = Table<T> & {
|
|
|
28
34
|
disabledRows?: Record<string, boolean>;
|
|
29
35
|
enableRowSelection?: boolean | ((row: Row<unknown>) => boolean);
|
|
30
36
|
rowSelection: RowSelectionState;
|
|
37
|
+
tablePosition?: TablePosition;
|
|
38
|
+
setTablePosition: React.Dispatch<React.SetStateAction<TablePosition>>;
|
|
31
39
|
data: TAsyncDataResult;
|
|
32
40
|
columns: any;
|
|
33
41
|
tableId: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTable.types.js","sources":["../../../src/components/data-table/DataTable.types.ts"],"sourcesContent":["import type {\n ColumnOrderTableState,\n ColumnPinningTableState,\n ColumnSizingTableState,\n ExpandedTableState,\n FiltersTableState,\n GroupingTableState,\n PaginationTableState,\n Row,\n RowSelectionState,\n RowSelectionTableState,\n SortDirection,\n SortingTableState,\n Table,\n VisibilityTableState\n} from '@tanstack/react-table'\nimport * as React from 'react'\nexport enum AsyncDataState {\n NONE = 'none',\n PENDING = 'pending',\n FULFILLED = 'fulfilled',\n REJECTED = 'rejected'\n}\n\nexport type TAsyncDataResult = {\n total: number\n results: TableData\n}\n\nexport type TAsyncDataOptions = {\n pageIndex: number\n pageSize: number\n sortBy?: string\n sortDirection?: SortDirection\n globalFilter?: string\n}\n\nexport type TGetAsyncData = (\n options: TAsyncDataOptions\n) => Promise<TAsyncDataResult | undefined>\n\nexport type DataTableContextType<T = unknown> = Table<T> & {\n setIsSortable: React.Dispatch<React.SetStateAction<boolean>>\n applyPagination: () => void\n getTotalRows: () => number\n isSortable: boolean\n asyncDataState?: AsyncDataState\n runAsyncData?: (options: Partial<TAsyncDataOptions>) => Promise<void>\n disabledRows?: Record<string, boolean>\n enableRowSelection?: boolean | ((row: Row<unknown>) => boolean)\n rowSelection: RowSelectionState\n data: TAsyncDataResult\n columns: any\n tableId: string\n /**\n * Directly update the data array that the table rows are built from.\n * This is useful when re-ordering rows, but is high-risk if you're not sure what you're doing!\n *\n * Note in particular that this value is also updated if you update the value of the `DataTable`'s `data` prop\n * — it's probably best to only use one of those two methods for any given table.\n */\n setData: React.Dispatch<React.SetStateAction<TAsyncDataResult>>\n}\n\nexport type TableData = Array<Record<string, unknown>>\n\nexport type InitialState = Partial<\n VisibilityTableState &\n ColumnOrderTableState &\n ColumnPinningTableState &\n FiltersTableState &\n SortingTableState &\n ExpandedTableState &\n GroupingTableState &\n ColumnSizingTableState &\n PaginationTableState &\n RowSelectionTableState\n>\n\nexport type TDefaultSort = { column: string; direction: SortDirection }\n"],"names":["AsyncDataState"],"mappings":"AAiBO,IAAKA,GAAAA,IACVA,EAAA,KAAO,OACPA,EAAA,QAAU,UACVA,EAAA,UAAY,YACZA,EAAA,SAAW,WAJDA,IAAAA,GAAA,CAAA,CAAA"}
|
|
1
|
+
{"version":3,"file":"DataTable.types.js","sources":["../../../src/components/data-table/DataTable.types.ts"],"sourcesContent":["import type {\n ColumnOrderTableState,\n ColumnPinningTableState,\n ColumnSizingTableState,\n ExpandedTableState,\n FiltersTableState,\n GroupingTableState,\n PaginationTableState,\n Row,\n RowSelectionState,\n RowSelectionTableState,\n SortDirection,\n SortingTableState,\n Table,\n VisibilityTableState\n} from '@tanstack/react-table'\nimport * as React from 'react'\nexport enum AsyncDataState {\n NONE = 'none',\n PENDING = 'pending',\n FULFILLED = 'fulfilled',\n REJECTED = 'rejected'\n}\n\nexport type TAsyncDataResult = {\n total: number\n results: TableData\n}\n\nexport type TAsyncDataOptions = {\n pageIndex: number\n pageSize: number\n sortBy?: string\n sortDirection?: SortDirection\n globalFilter?: string\n}\n\nexport type TGetAsyncData = (\n options: TAsyncDataOptions\n) => Promise<TAsyncDataResult | undefined>\n\nexport type TablePosition = {\n top: number | null\n bottom: number | null\n offsetTop: number\n isVisible: boolean\n}\n\nexport type DataTableContextType<T = unknown> = Table<T> & {\n setIsSortable: React.Dispatch<React.SetStateAction<boolean>>\n applyPagination: () => void\n getTotalRows: () => number\n isSortable: boolean\n asyncDataState?: AsyncDataState\n runAsyncData?: (options: Partial<TAsyncDataOptions>) => Promise<void>\n disabledRows?: Record<string, boolean>\n enableRowSelection?: boolean | ((row: Row<unknown>) => boolean)\n rowSelection: RowSelectionState\n tablePosition?: TablePosition\n setTablePosition: React.Dispatch<React.SetStateAction<TablePosition>>\n data: TAsyncDataResult\n columns: any\n tableId: string\n /**\n * Directly update the data array that the table rows are built from.\n * This is useful when re-ordering rows, but is high-risk if you're not sure what you're doing!\n *\n * Note in particular that this value is also updated if you update the value of the `DataTable`'s `data` prop\n * — it's probably best to only use one of those two methods for any given table.\n */\n setData: React.Dispatch<React.SetStateAction<TAsyncDataResult>>\n}\n\nexport type TableData = Array<Record<string, unknown>>\n\nexport type InitialState = Partial<\n VisibilityTableState &\n ColumnOrderTableState &\n ColumnPinningTableState &\n FiltersTableState &\n SortingTableState &\n ExpandedTableState &\n GroupingTableState &\n ColumnSizingTableState &\n PaginationTableState &\n RowSelectionTableState\n>\n\nexport type TDefaultSort = { column: string; direction: SortDirection }\n"],"names":["AsyncDataState"],"mappings":"AAiBO,IAAKA,GAAAA,IACVA,EAAA,KAAO,OACPA,EAAA,QAAU,UACVA,EAAA,UAAY,YACZA,EAAA,SAAW,WAJDA,IAAAA,GAAA,CAAA,CAAA"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { CSS } from '../../stitches';
|
|
3
|
+
export declare const DataTableBulkActionsFloating: (({ css, children, ...rest }: {
|
|
4
|
+
css?: CSS;
|
|
5
|
+
children: React.ReactNode;
|
|
6
|
+
}) => React.JSX.Element | null) & {
|
|
7
|
+
SelectedRowActions: ({ cancelLabel, showDividers, children }: {
|
|
8
|
+
cancelLabel?: string;
|
|
9
|
+
showDividers?: boolean;
|
|
10
|
+
children: React.ReactNode;
|
|
11
|
+
}) => React.JSX.Element | null;
|
|
12
|
+
};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{Close as a}from"@atom-learning/icons";import*as e from"react";import{styled as i}from"../../stitches.js";import{ActionIcon as p}from"../action-icon/ActionIcon.js";import{Badge as f}from"../badge/Badge.js";import{Flex as t}from"../flex/Flex.js";import{Icon as d}from"../icon/Icon.js";import{Text as x}from"../text/Text.js";import{BulkActionsSelectedRowActions as $}from"./DataTableBulkActionsSelectedRowActions.js";import{useDataTable as g}from"./DataTableContext.js";const h=i("div",{}),u=i(t,{p:"$2 $1 $2 $3",mb:"$4",mt:"$2",justifyContent:"space-between",alignItems:"center",borderRadius:"$3",bg:"$primary800",pointerEvents:"all",zIndex:2,width:"100%",mx:"$4",boxShadow:"$2","@sm":{maxWidth:"800px"},"@lg":{p:"$3 $1 $3 $4",mb:"$5",maxWidth:"1000px"},"@xl":{p:"$4 $2 $4 $24",mb:"$5",maxWidth:"1400px"}}),b=Object.assign(({css:w,children:l,...n})=>{const{rowSelection:o,toggleAllPageRowsSelected:m}=g(),r=e.useRef(null),s=e.useMemo(()=>Object.keys(o||{}).length,[o]),c=()=>m(!1);return s===0?null:e.createElement(h,{ref:r,css:{left:0,bottom:0,display:"flex",justifyContent:"center",position:"sticky",pointerEvents:"none"}},e.createElement(u,{...n},e.createElement(t,{justify:"flex-start",align:"center",gap:2,css:{flex:"auto"}},e.createElement(f,{theme:"success",size:"xs",emphasis:"subtle",css:{minWidth:"24px",height:"24px"}},s),e.createElement(x,{size:"sm",weight:"bold",css:{color:"white"}},"selected")),e.createElement(t,{justify:"flex-end",align:"center",gap:3,css:{flex:"auto"}},l,e.createElement(p,{appearance:"simple",theme:"white",size:"md",onClick:c,label:"close"},e.createElement(d,{is:a})))))},{SelectedRowActions:$});export{b as DataTableBulkActionsFloating};
|
|
2
|
+
//# sourceMappingURL=DataTableBulkActionsFloating.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DataTableBulkActionsFloating.js","sources":["../../../src/components/data-table/DataTableBulkActionsFloating.tsx"],"sourcesContent":["import { Close } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { CSS, styled } from '~/stitches'\n\nimport { ActionIcon } from '../action-icon'\nimport { Badge } from '../badge'\nimport { Button } from '../button'\nimport { Flex } from '../flex'\nimport { Icon } from '../icon'\nimport { Text } from '../text'\nimport { BulkActionsSelectedRowActions } from './DataTableBulkActionsSelectedRowActions'\nimport { useDataTable } from './DataTableContext'\n\nconst ActionBarPositioner = styled('div', {})\n\nconst StyledContainer = styled(Flex, {\n p: '$2 $1 $2 $3',\n mb: '$4',\n mt: '$2',\n justifyContent: 'space-between',\n alignItems: 'center',\n borderRadius: '$3',\n bg: '$primary800',\n pointerEvents: 'all',\n zIndex: 2,\n width: '100%',\n mx: '$4',\n boxShadow: '$2',\n '@sm': {\n maxWidth: '800px'\n },\n '@lg': {\n p: '$3 $1 $3 $4',\n mb: '$5',\n maxWidth: '1000px'\n },\n '@xl': {\n p: '$4 $2 $4 $24',\n mb: '$5',\n maxWidth: '1400px'\n }\n})\n\nexport const DataTableBulkActionsFloating = Object.assign(\n ({ css, children, ...rest }: { css?: CSS; children: React.ReactNode }) => {\n const { rowSelection, toggleAllPageRowsSelected } = useDataTable()\n\n const actionBarRef = React.useRef<HTMLDivElement>(null)\n\n const numberOfSelectedRows = React.useMemo(() => {\n return Object.keys(rowSelection || {}).length\n }, [rowSelection])\n\n const handleDeselectAllPageRows = () => toggleAllPageRowsSelected(false)\n\n if (numberOfSelectedRows === 0) return null\n\n return (\n <ActionBarPositioner\n ref={actionBarRef}\n css={{\n left: 0,\n bottom: 0,\n display: 'flex',\n justifyContent: 'center',\n position: 'sticky',\n pointerEvents: 'none'\n }}\n >\n <StyledContainer {...rest}>\n <Flex\n justify=\"flex-start\"\n align=\"center\"\n gap={2}\n css={{ flex: 'auto' }}\n >\n <Badge\n theme=\"success\"\n size=\"xs\"\n emphasis=\"subtle\"\n css={{ minWidth: '24px', height: '24px' }}\n >\n {numberOfSelectedRows}\n </Badge>\n <Text size=\"sm\" weight=\"bold\" css={{ color: 'white' }}>\n selected\n </Text>\n </Flex>\n\n <Flex\n justify=\"flex-end\"\n align=\"center\"\n gap={3}\n css={{ flex: 'auto' }}\n >\n {children}\n\n <ActionIcon\n appearance=\"simple\"\n theme=\"white\"\n size=\"md\"\n onClick={handleDeselectAllPageRows}\n label=\"close\"\n >\n <Icon is={Close} />\n </ActionIcon>\n </Flex>\n </StyledContainer>\n </ActionBarPositioner>\n )\n },\n {\n SelectedRowActions: BulkActionsSelectedRowActions\n }\n)\n"],"names":["ActionBarPositioner","styled","StyledContainer","Flex","DataTableBulkActionsFloating","css","children","rest","rowSelection","toggleAllPageRowsSelected","useDataTable","actionBarRef","React","numberOfSelectedRows","handleDeselectAllPageRows","Badge","Text","ActionIcon","Icon","Close","BulkActionsSelectedRowActions"],"mappings":"0dAcA,MAAMA,EAAsBC,EAAO,MAAO,CAAA,CAAE,EAEtCC,EAAkBD,EAAOE,EAAM,CACnC,EAAG,cACH,GAAI,KACJ,GAAI,KACJ,eAAgB,gBAChB,WAAY,SACZ,aAAc,KACd,GAAI,cACJ,cAAe,MACf,OAAQ,EACR,MAAO,OACP,GAAI,KACJ,UAAW,KACX,MAAO,CACL,SAAU,OACZ,EACA,MAAO,CACL,EAAG,cACH,GAAI,KACJ,SAAU,QACZ,EACA,MAAO,CACL,EAAG,eACH,GAAI,KACJ,SAAU,QACZ,CACF,CAAC,EAEYC,EAA+B,OAAO,OACjD,CAAC,CAAE,IAAAC,EAAK,SAAAC,KAAaC,CAAK,IAAgD,CACxE,KAAM,CAAE,aAAAC,EAAc,0BAAAC,CAA0B,EAAIC,EAAAA,EAE9CC,EAAeC,EAAM,OAAuB,IAAI,EAEhDC,EAAuBD,EAAM,QAAQ,IAClC,OAAO,KAAKJ,GAAgB,CAAA,CAAE,EAAE,OACtC,CAACA,CAAY,CAAC,EAEXM,EAA4B,IAAML,EAA0B,EAAK,EAEvE,OAAII,IAAyB,EAAU,KAGrCD,EAAA,cAACZ,EAAA,CACC,IAAKW,EACL,IAAK,CACH,KAAM,EACN,OAAQ,EACR,QAAS,OACT,eAAgB,SAChB,SAAU,SACV,cAAe,MACjB,CAEAC,EAAAA,EAAA,cAACV,EAAA,CAAiB,GAAGK,CACnBK,EAAAA,EAAA,cAACT,EAAA,CACC,QAAQ,aACR,MAAM,SACN,IAAK,EACL,IAAK,CAAE,KAAM,MAAO,CAEpBS,EAAAA,EAAA,cAACG,EAAA,CACC,MAAM,UACN,KAAK,KACL,SAAS,SACT,IAAK,CAAE,SAAU,OAAQ,OAAQ,MAAO,CAAA,EAEvCF,CACH,EACAD,EAAA,cAACI,EAAA,CAAK,KAAK,KAAK,OAAO,OAAO,IAAK,CAAE,MAAO,OAAQ,CAAA,EAAG,UAEvD,CACF,EAEAJ,EAAA,cAACT,EAAA,CACC,QAAQ,WACR,MAAM,SACN,IAAK,EACL,IAAK,CAAE,KAAM,MAAO,CAEnBG,EAAAA,EAEDM,EAAA,cAACK,EAAA,CACC,WAAW,SACX,MAAM,QACN,KAAK,KACL,QAASH,EACT,MAAM,OAENF,EAAAA,EAAA,cAACM,EAAA,CAAK,GAAIC,EAAO,CACnB,CACF,CACF,CACF,CAEJ,EACA,CACE,mBAAoBC,CACtB,CACF"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import*as e from"react";import{Button as i}from"../button/Button.js";import{Divider as a}from"../divider/Divider.js";import{useDataTable as m}from"./DataTableContext.js";const s=({cancelLabel:l="Cancel",showDividers:n=!0,children:t})=>{const{toggleAllPageRowsSelected:o,rowSelection:r}=m(),c=()=>o(!1);return Object.keys(r||{}).length===0?null:e.createElement(e.Fragment,null,t,n&&e.Children.count(t)>0&&e.createElement(a,{orientation:"vertical",css:{mx:"$4"}}),e.createElement(i,{theme:"neutral",onClick:c},l))};export{s as BulkActionsSelectedRowActions};
|
|
2
|
+
//# sourceMappingURL=DataTableBulkActionsSelectedRowActions.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DataTableBulkActionsSelectedRowActions.js","sources":["../../../src/components/data-table/DataTableBulkActionsSelectedRowActions.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Button } from '../button'\nimport { Divider } from '../divider'\nimport { useDataTable } from './DataTableContext'\n\nexport const BulkActionsSelectedRowActions = ({\n cancelLabel = 'Cancel',\n showDividers = true,\n children\n}: {\n cancelLabel?: string\n showDividers?: boolean\n children: React.ReactNode\n}) => {\n const { toggleAllPageRowsSelected, rowSelection } = useDataTable()\n\n const handleDeselectAllPageRows = () => toggleAllPageRowsSelected(false)\n\n if (Object.keys(rowSelection || {}).length === 0) return null\n\n return (\n <>\n {children}\n {showDividers && React.Children.count(children) > 0 && (\n <Divider orientation=\"vertical\" css={{ mx: '$4' }} />\n )}\n <Button theme=\"neutral\" onClick={handleDeselectAllPageRows}>\n {cancelLabel}\n </Button>\n </>\n )\n}\n"],"names":["BulkActionsSelectedRowActions","cancelLabel","showDividers","children","toggleAllPageRowsSelected","rowSelection","useDataTable","handleDeselectAllPageRows","React","Divider","Button"],"mappings":"gLAMaA,EAAgC,CAAC,CAC5C,YAAAC,EAAc,SACd,aAAAC,EAAe,GACf,SAAAC,CACF,IAIM,CACJ,KAAM,CAAE,0BAAAC,EAA2B,aAAAC,CAAa,EAAIC,EAAa,EAE3DC,EAA4B,IAAMH,EAA0B,EAAK,EAEvE,OAAI,OAAO,KAAKC,GAAgB,CAAA,CAAE,EAAE,SAAW,EAAU,KAGvDG,EAAA,cAAAA,EAAA,SAAA,KACGL,EACAD,GAAgBM,EAAM,SAAS,MAAML,CAAQ,EAAI,GAChDK,EAAA,cAACC,EAAA,CAAQ,YAAY,WAAW,IAAK,CAAE,GAAI,IAAK,CAAG,CAAA,EAErDD,EAAA,cAACE,EAAA,CAAO,MAAM,UAAU,QAASH,CAC9BN,EAAAA,CACH,CACF,CAEJ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{v4 as
|
|
1
|
+
import{v4 as Z}from"@lukeed/uuid";import{useReactTable as q,getCoreRowModel as H,getPaginationRowModel as K,getSortedRowModel as Q,getFilteredRowModel as W,getExpandedRowModel as X}from"@tanstack/react-table";import*as e from"react";import Y from"use-deep-compare-effect";import{AsyncDataState as i}from"./DataTable.types.js";import{getNewAsyncData as _}from"./getNewAsyncData.js";import{usePagination as $}from"./usePagination.js";import{useSortByColumn as ee}from"./useSorting.js";const F=e.createContext(null),te=({columns:l,data:o=[],getAsyncData:n,defaultSort:T,initialState:g=void 0,disabledRows:x,enableRowSelection:u,onRowSelectionChange:C,children:I})=>{var P;const D=e.useRef(Z()),[d,c]=e.useState({results:o!=null?o:[],total:(P=o==null?void 0:o.length)!=null?P:0}),[S,N]=e.useState({}),[L,A]=e.useState({}),[G,z]=e.useState({top:null,bottom:null,offsetTop:0,isVisible:!0}),{isPaginated:r,applyPagination:v,paginationState:a,setPaginationState:O}=$(g==null?void 0:g.pagination),[y,b]=e.useState(i.NONE),[w,j]=e.useState(""),{setIsSortable:k,isSortable:m,sorting:s,setSorting:B}=ee(T),p=e.useCallback(async t=>{if(n)try{b(i.PENDING);const f=await _(n,t,a,s,w);c(f),b(i.FULFILLED)}catch{b(i.REJECTED)}},[n,a==null?void 0:a.pageIndex,a==null?void 0:a.pageSize,s,w]);e.useEffect(()=>{p({})},[p]),Y(()=>{!o||c({results:o,total:o.length})},[o]);const R=()=>d.total;Object.keys(S||{}).length>0;const E=q({columns:l,data:d.results,pageCount:a?Math.ceil(R()/a.pageSize):-1,initialState:g,state:{sorting:s,globalFilter:w,pagination:a,rowSelection:S,expanded:L},manualPagination:n&&r,manualSorting:n&&r,enableSorting:y!==i.PENDING,enableGlobalFilter:!n,enableRowSelection:u,onExpandedChange:A,getSubRows:t=>t.subRows,onRowSelectionChange:t=>{C&&C(t),N(t)},getCoreRowModel:H(),getPaginationRowModel:r?K():void 0,getSortedRowModel:m||s.length?Q():void 0,getFilteredRowModel:W(),getExpandedRowModel:X(),onPaginationChange:r?O:void 0,onSortingChange:B,onGlobalFilterChange:j,globalFilterFn:(t,f,V)=>{const M=U=>U.toLowerCase().includes(V.toLowerCase());if(t.depth>0)return!0;const h=t.getValue(f);switch(typeof h){case"string":return M(h);case"boolean":case"number":return M(String(h));default:return!1}}}),J=e.useMemo(()=>({...E,columns:l,data:d,setData:c,setIsSortable:k,applyPagination:v,getTotalRows:R,isSortable:m,asyncDataState:y,runAsyncData:p,disabledRows:x,enableRowSelection:u,rowSelection:S,tablePosition:G,setTablePosition:z,tableId:D.current}),[E,v,R,m,u,D]);return e.createElement(F.Provider,{value:J},I)},oe=()=>{const l=e.useContext(F);if(!l)throw new Error("useDataTable can only be called from inside a DataTableProvider");return l};export{te as DataTableProvider,oe as useDataTable};
|
|
2
2
|
//# sourceMappingURL=DataTableContext.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableContext.js","sources":["../../../src/components/data-table/DataTableContext.tsx"],"sourcesContent":["import { v4 as uuid } from '@lukeed/uuid'\nimport type {\n ExpandedState,\n OnChangeFn,\n PaginationState,\n Row,\n RowSelectionState\n} from '@tanstack/react-table'\nimport {\n getCoreRowModel,\n getExpandedRowModel,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable\n} from '@tanstack/react-table'\nimport * as React from 'react'\nimport useDeepCompareEffect from 'use-deep-compare-effect'\n\nimport {\n AsyncDataState,\n DataTableContextType,\n InitialState,\n TableData,\n TAsyncDataOptions,\n TAsyncDataResult,\n TDefaultSort,\n TGetAsyncData\n} from './DataTable.types'\nimport { getNewAsyncData } from './getNewAsyncData'\nimport { usePagination } from './usePagination'\nimport { useSortByColumn } from './useSorting'\n\nconst DataTableContext =\n React.createContext<DataTableContextType<unknown> | null>(null)\n\ntype DataTableProviderProps = {\n columns\n defaultSort?: TDefaultSort\n children: React.ReactNode\n initialState?: InitialState\n disabledRows?: Record<string, boolean>\n enableRowSelection?: boolean | ((row: Row<unknown>) => boolean)\n onRowSelectionChange?: OnChangeFn<RowSelectionState>\n} & (\n | { data: TableData; getAsyncData?: never }\n | { data?: never; getAsyncData: TGetAsyncData }\n)\n\nexport const DataTableProvider = ({\n columns,\n data: dataProp = [],\n getAsyncData,\n defaultSort,\n initialState = undefined,\n disabledRows,\n enableRowSelection,\n onRowSelectionChange,\n children\n}: DataTableProviderProps): JSX.Element => {\n const tableId = React.useRef(uuid())\n\n const [data, setData] = React.useState<TAsyncDataResult>({\n results: dataProp ?? [],\n total: dataProp?.length ?? 0\n })\n\n const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({})\n const [expanded, setExpanded] = React.useState<ExpandedState>({})\n\n const { isPaginated, applyPagination, paginationState, setPaginationState } =\n usePagination(initialState?.pagination)\n\n const [asyncDataState, setAsyncDataState] = React.useState<AsyncDataState>(\n AsyncDataState.NONE\n )\n\n const [globalFilter, setGlobalFilter] = React.useState<string>('')\n\n const { setIsSortable, isSortable, sorting, setSorting } =\n useSortByColumn(defaultSort)\n\n const runAsyncData = React.useCallback(\n async (overrideAsyncDataOptions: Partial<TAsyncDataOptions>) => {\n if (!getAsyncData) return\n\n try {\n setAsyncDataState(AsyncDataState.PENDING)\n\n const newData = await getNewAsyncData(\n getAsyncData,\n overrideAsyncDataOptions,\n paginationState as PaginationState,\n sorting,\n globalFilter\n )\n\n setData(newData as TAsyncDataResult)\n setAsyncDataState(AsyncDataState.FULFILLED)\n } catch (error) {\n setAsyncDataState(AsyncDataState.REJECTED)\n }\n },\n [\n getAsyncData,\n paginationState?.pageIndex,\n paginationState?.pageSize,\n sorting,\n globalFilter\n ]\n )\n\n React.useEffect(() => {\n runAsyncData({})\n }, [runAsyncData])\n\n useDeepCompareEffect(() => {\n if (!dataProp) return\n\n setData({ results: dataProp, total: dataProp.length })\n }, [dataProp])\n\n const getTotalRows = () => data.total\n\n const table = useReactTable<unknown>({\n columns,\n data: data.results,\n pageCount: paginationState\n ? Math.ceil(getTotalRows() / paginationState.pageSize)\n : -1,\n initialState: initialState,\n state: {\n sorting,\n globalFilter,\n pagination: paginationState,\n rowSelection,\n expanded\n },\n manualPagination: getAsyncData && isPaginated,\n manualSorting: getAsyncData && isPaginated,\n enableSorting: asyncDataState !== AsyncDataState.PENDING,\n enableGlobalFilter: !getAsyncData,\n enableRowSelection,\n onExpandedChange: setExpanded,\n getSubRows: (row: Row<unknown>) => row.subRows,\n onRowSelectionChange: (updaterOrValue) => {\n if (onRowSelectionChange) onRowSelectionChange(updaterOrValue)\n setRowSelection(updaterOrValue)\n },\n getCoreRowModel: getCoreRowModel(),\n getPaginationRowModel: isPaginated ? getPaginationRowModel() : undefined,\n getSortedRowModel:\n isSortable || sorting.length ? getSortedRowModel() : undefined,\n getFilteredRowModel: getFilteredRowModel(),\n getExpandedRowModel: getExpandedRowModel(),\n onPaginationChange: isPaginated ? setPaginationState : undefined,\n onSortingChange: setSorting,\n onGlobalFilterChange: setGlobalFilter,\n globalFilterFn: (row, columnId, filterValue) => {\n const checkFilterMatchesCell = (cellValue: string) =>\n cellValue.toLowerCase().includes(filterValue.toLowerCase())\n\n const isSubRow = row.depth > 0\n\n if (isSubRow) return true\n\n const value = row.getValue(columnId)\n switch (typeof value) {\n case 'string':\n return checkFilterMatchesCell(value)\n case 'boolean':\n case 'number':\n return checkFilterMatchesCell(String(value))\n default:\n return false\n }\n }\n })\n\n const value: DataTableContextType = React.useMemo(() => {\n return {\n ...table,\n columns,\n data,\n setData,\n setIsSortable,\n applyPagination,\n getTotalRows,\n isSortable,\n asyncDataState,\n runAsyncData,\n disabledRows,\n enableRowSelection,\n rowSelection,\n tableId: tableId.current\n }\n }, [\n table,\n applyPagination,\n getTotalRows,\n isSortable,\n enableRowSelection,\n tableId\n ])\n\n return (\n <DataTableContext.Provider value={value}>\n {children}\n </DataTableContext.Provider>\n )\n}\n\nexport const useDataTable = <T extends Record<string, unknown>>() => {\n const context = React.useContext(DataTableContext) as DataTableContextType<T>\n\n if (!context)\n throw new Error(\n 'useDataTable can only be called from inside a DataTableProvider'\n )\n\n return context\n}\n"],"names":["DataTableContext","React","DataTableProvider","columns","dataProp","getAsyncData","defaultSort","initialState","disabledRows","enableRowSelection","onRowSelectionChange","children","_a","tableId","uuid","data","setData","rowSelection","setRowSelection","expanded","setExpanded","isPaginated","applyPagination","paginationState","setPaginationState","usePagination","asyncDataState","setAsyncDataState","AsyncDataState","globalFilter","setGlobalFilter","setIsSortable","isSortable","sorting","setSorting","useSortByColumn","runAsyncData","overrideAsyncDataOptions","newData","getNewAsyncData","useDeepCompareEffect","getTotalRows","table","useReactTable","row","updaterOrValue","getCoreRowModel","getPaginationRowModel","getSortedRowModel","getFilteredRowModel","getExpandedRowModel","columnId","filterValue","checkFilterMatchesCell","cellValue","value","useDataTable","context"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DataTableContext.js","sources":["../../../src/components/data-table/DataTableContext.tsx"],"sourcesContent":["import { v4 as uuid } from '@lukeed/uuid'\nimport type {\n ExpandedState,\n OnChangeFn,\n PaginationState,\n Row,\n RowSelectionState\n} from '@tanstack/react-table'\nimport {\n getCoreRowModel,\n getExpandedRowModel,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable\n} from '@tanstack/react-table'\nimport * as React from 'react'\nimport useDeepCompareEffect from 'use-deep-compare-effect'\n\nimport { Box } from '../box'\nimport {\n AsyncDataState,\n DataTableContextType,\n InitialState,\n TableData,\n TablePosition,\n TAsyncDataOptions,\n TAsyncDataResult,\n TDefaultSort,\n TGetAsyncData\n} from './DataTable.types'\nimport { getNewAsyncData } from './getNewAsyncData'\nimport { usePagination } from './usePagination'\nimport { useSortByColumn } from './useSorting'\n\nconst DataTableContext =\n React.createContext<DataTableContextType<unknown> | null>(null)\n\ntype DataTableProviderProps = {\n columns\n defaultSort?: TDefaultSort\n children: React.ReactNode\n initialState?: InitialState\n disabledRows?: Record<string, boolean>\n enableRowSelection?: boolean | ((row: Row<unknown>) => boolean)\n onRowSelectionChange?: OnChangeFn<RowSelectionState>\n} & (\n | { data: TableData; getAsyncData?: never }\n | { data?: never; getAsyncData: TGetAsyncData }\n)\n\nexport const DataTableProvider = ({\n columns,\n data: dataProp = [],\n getAsyncData,\n defaultSort,\n initialState = undefined,\n disabledRows,\n enableRowSelection,\n onRowSelectionChange,\n children\n}: DataTableProviderProps): JSX.Element => {\n const tableId = React.useRef(uuid())\n\n const [data, setData] = React.useState<TAsyncDataResult>({\n results: dataProp ?? [],\n total: dataProp?.length ?? 0\n })\n\n const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({})\n const [expanded, setExpanded] = React.useState<ExpandedState>({})\n\n const [tablePosition, setTablePosition] = React.useState<TablePosition>({\n top: null,\n bottom: null,\n offsetTop: 0,\n isVisible: true\n })\n\n const { isPaginated, applyPagination, paginationState, setPaginationState } =\n usePagination(initialState?.pagination)\n\n const [asyncDataState, setAsyncDataState] = React.useState<AsyncDataState>(\n AsyncDataState.NONE\n )\n\n const [globalFilter, setGlobalFilter] = React.useState<string>('')\n\n const { setIsSortable, isSortable, sorting, setSorting } =\n useSortByColumn(defaultSort)\n\n const runAsyncData = React.useCallback(\n async (overrideAsyncDataOptions: Partial<TAsyncDataOptions>) => {\n if (!getAsyncData) return\n\n try {\n setAsyncDataState(AsyncDataState.PENDING)\n\n const newData = await getNewAsyncData(\n getAsyncData,\n overrideAsyncDataOptions,\n paginationState as PaginationState,\n sorting,\n globalFilter\n )\n\n setData(newData as TAsyncDataResult)\n setAsyncDataState(AsyncDataState.FULFILLED)\n } catch (error) {\n setAsyncDataState(AsyncDataState.REJECTED)\n }\n },\n [\n getAsyncData,\n paginationState?.pageIndex,\n paginationState?.pageSize,\n sorting,\n globalFilter\n ]\n )\n\n React.useEffect(() => {\n runAsyncData({})\n }, [runAsyncData])\n\n useDeepCompareEffect(() => {\n if (!dataProp) return\n\n setData({ results: dataProp, total: dataProp.length })\n }, [dataProp])\n\n const getTotalRows = () => data.total\n\n const hasSelectedRows = Object.keys(rowSelection || {}).length > 0\n\n const table = useReactTable<unknown>({\n columns,\n data: data.results,\n pageCount: paginationState\n ? Math.ceil(getTotalRows() / paginationState.pageSize)\n : -1,\n initialState: initialState,\n state: {\n sorting,\n globalFilter,\n pagination: paginationState,\n rowSelection,\n expanded\n },\n manualPagination: getAsyncData && isPaginated,\n manualSorting: getAsyncData && isPaginated,\n enableSorting: asyncDataState !== AsyncDataState.PENDING,\n enableGlobalFilter: !getAsyncData,\n enableRowSelection,\n onExpandedChange: setExpanded,\n getSubRows: (row: Row<unknown>) => row.subRows,\n onRowSelectionChange: (updaterOrValue) => {\n if (onRowSelectionChange) onRowSelectionChange(updaterOrValue)\n setRowSelection(updaterOrValue)\n },\n getCoreRowModel: getCoreRowModel(),\n getPaginationRowModel: isPaginated ? getPaginationRowModel() : undefined,\n getSortedRowModel:\n isSortable || sorting.length ? getSortedRowModel() : undefined,\n getFilteredRowModel: getFilteredRowModel(),\n getExpandedRowModel: getExpandedRowModel(),\n onPaginationChange: isPaginated ? setPaginationState : undefined,\n onSortingChange: setSorting,\n onGlobalFilterChange: setGlobalFilter,\n globalFilterFn: (row, columnId, filterValue) => {\n const checkFilterMatchesCell = (cellValue: string) =>\n cellValue.toLowerCase().includes(filterValue.toLowerCase())\n\n const isSubRow = row.depth > 0\n\n if (isSubRow) return true\n\n const value = row.getValue(columnId)\n switch (typeof value) {\n case 'string':\n return checkFilterMatchesCell(value)\n case 'boolean':\n case 'number':\n return checkFilterMatchesCell(String(value))\n default:\n return false\n }\n }\n })\n\n const value: DataTableContextType = React.useMemo(() => {\n return {\n ...table,\n columns,\n data,\n setData,\n setIsSortable,\n applyPagination,\n getTotalRows,\n isSortable,\n asyncDataState,\n runAsyncData,\n disabledRows,\n enableRowSelection,\n rowSelection,\n tablePosition,\n setTablePosition,\n tableId: tableId.current\n }\n }, [\n table,\n applyPagination,\n getTotalRows,\n isSortable,\n enableRowSelection,\n tableId\n ])\n\n return (\n <DataTableContext.Provider value={value}>\n {children}\n </DataTableContext.Provider>\n )\n}\n\nexport const useDataTable = <T extends Record<string, unknown>>() => {\n const context = React.useContext(DataTableContext) as DataTableContextType<T>\n\n if (!context)\n throw new Error(\n 'useDataTable can only be called from inside a DataTableProvider'\n )\n\n return context\n}\n"],"names":["DataTableContext","React","DataTableProvider","columns","dataProp","getAsyncData","defaultSort","initialState","disabledRows","enableRowSelection","onRowSelectionChange","children","_a","tableId","uuid","data","setData","rowSelection","setRowSelection","expanded","setExpanded","tablePosition","setTablePosition","isPaginated","applyPagination","paginationState","setPaginationState","usePagination","asyncDataState","setAsyncDataState","AsyncDataState","globalFilter","setGlobalFilter","setIsSortable","isSortable","sorting","setSorting","useSortByColumn","runAsyncData","overrideAsyncDataOptions","newData","getNewAsyncData","useDeepCompareEffect","getTotalRows","table","useReactTable","row","updaterOrValue","getCoreRowModel","getPaginationRowModel","getSortedRowModel","getFilteredRowModel","getExpandedRowModel","columnId","filterValue","checkFilterMatchesCell","cellValue","value","useDataTable","context"],"mappings":"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"}
|