npm - @veeqo/ui - Versions diffs - 13.6.0 → 13.7.0 - Mend

@veeqo/ui 13.6.0 → 13.7.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.

Files changed (25) hide show

package/dist/components/Alerts/Alert/Alert.cjs CHANGED Viewed

@@ -25,7 +25,7 @@ const Alert = ({ size = 'base', variant = 'default', colours: passedColours, rig
             Alert_module[`${size}-size`],
             Alerts_module[`${variant}-alert-variant`],
             className,
-        ]), flexWrap: "nowrap", ...divProps },
+        ]), style: assignCssVars.assignCssVars({ backgroundColor: passedColours === null || passedColours === undefined ? undefined : passedColours.background }), flexWrap: "nowrap", ...divProps },
         React__default.default.createElement(FlexRow.FlexRow, { alignItems: isXsSize ? 'center' : 'flex-start', flexWrap: "nowrap", className: Alert_module.iconTextContainer },
             React__default.default.createElement(FlexRow.FlexRow, { style: assignCssVars.assignCssVars({ iconColor: passedColours === null || passedColours === undefined ? undefined : passedColours.primary }), className: Alerts_module.icon, alignItems: "flex-start" }, iconSlot || React__default.default.createElement(DefaultIcon, { role: "presentation" })),
             children || (React__default.default.createElement(FlexCol.FlexCol, { gap: isXsSize ? 'xs' : 'sm' },

package/dist/components/Alerts/Alert/Alert.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Alert.cjs","sources":["../../../../src/components/Alerts/Alert/Alert.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../../Text';\nimport { Button } from '../../Button';\nimport { CrossIcon } from '../../../icons';\nimport { IconMap } from '../constants';\nimport { AlertProps } from './types';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { FlexCol } from '../../Flex/FlexCol';\nimport { assignCssVars, buildClassnames } from '../../../utils';\n\nimport alertStyles from '../Alerts.module.scss';\nimport styles from './Alert.module.scss';\n\nexport const Alert = ({\n size = 'base',\n variant = 'default',\n colours: passedColours,\n rightActions,\n rightActionsSlot,\n title,\n titleSlot,\n messageSlot,\n message,\n children,\n iconSlot,\n onClickClose,\n className,\n ...divProps\n}: AlertProps) => {\n const DefaultIcon = IconMap[variant];\n\n const isXsSize = size === 'xs';\n\n return (\n <FlexRow\n justifyContent=\"space-between\"\n className={buildClassnames([\n styles.alertContainer,\n styles[`${size}-size`],\n alertStyles[`${variant}-alert-variant`],\n className,\n ])}\n flexWrap=\"nowrap\"\n {...divProps}\n >\n <FlexRow\n alignItems={isXsSize ? 'center' : 'flex-start'}\n flexWrap=\"nowrap\"\n className={styles.iconTextContainer}\n >\n <FlexRow\n style={assignCssVars({ iconColor: passedColours?.primary })}\n className={alertStyles.icon}\n alignItems=\"flex-start\"\n >\n {iconSlot \|\| <DefaultIcon role=\"presentation\" />}\n </FlexRow>\n\n {children \|\| (\n <FlexCol gap={isXsSize ? 'xs' : 'sm'}>\n {titleSlot \|\| (\n <Text variant=\"bodyBold\" style={size === 'base' ? { lineHeight: '24px' } : {}}>\n {title}\n </Text>\n )}\n {messageSlot \|\| <Text variant=\"body\">{message}</Text>}\n </FlexCol>\n )}\n </FlexRow>\n\n <FlexRow justifyContent=\"flex-end\" flexWrap=\"nowrap\" className={styles.rightActionsContainer}>\n {rightActionsSlot}\n\n {rightActions && (\n <FlexCol justifyContent=\"center\" className={styles.rightActions}>\n {rightActions.map(({ label, ...actionProps }) => (\n <Button key={label} type=\"button\" size=\"sm\" {...actionProps}>\n {label}\n </Button>\n ))}\n </FlexCol>\n )}\n\n {onClickClose && (\n <FlexCol className={styles.closeContainer}>\n <Button\n variant=\"flat\"\n iconSlot={<CrossIcon />}\n onClick={onClickClose}\n aria-label=\"Close\"\n size=\"sm\"\n />\n </FlexCol>\n )}\n </FlexRow>\n </FlexRow>\n );\n};\n"],"names":["IconMap","React","FlexRow","buildClassnames","styles","alertStyles","assignCssVars","FlexCol","Text","Button","CrossIcon"],"mappings":";;;;;;;;;;;;;;;;;;;AAca,MAAA,KAAK,GAAG,CAAC,EACpB,IAAI,GAAG,MAAM,EACb,OAAO,GAAG,SAAS,EACnB,OAAO,EAAE,aAAa,EACtB,YAAY,EACZ,gBAAgB,EAChB,KAAK,EACL,SAAS,EACT,WAAW,EACX,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,GAAG,QAAQ,EACA,KAAI;AACf,IAAA,MAAM,WAAW,GAAGA,iBAAO,CAAC,OAAO,CAAC;AAEpC,IAAA,MAAM,QAAQ,GAAG,IAAI,KAAK,IAAI;IAE9B,QACEC,sBAAC,CAAA,aAAA,CAAAC,eAAO,EACN,EAAA,cAAc,EAAC,eAAe,EAC9B,SAAS,EAAEC,+BAAe,CAAC;AACzB,YAAAC,YAAM,CAAC,cAAc;AACrB,YAAAA,YAAM,CAAC,CAAA,EAAG,IAAI,CAAA,KAAA,CAAO,CAAC;AACtB,YAAAC,aAAW,CAAC,CAAA,EAAG,OAAO,CAAA,cAAA,CAAgB,CAAC;YACvC,SAAS;~~AACV~~,~~SAAA,~~CAAC,EACF,QAAQ,EAAC,QAAQ,~~KACb~~,QAAQ,EAAA;~~QAEZJ~~,sBAAC,CAAA,aAAA,CAAAC,eAAO,IACN,UAAU,EAAE,QAAQ,GAAG,QAAQ,GAAG,YAAY,EAC9C,QAAQ,EAAC,QAAQ,EACjB,SAAS,EAAEE,YAAM,CAAC,iBAAiB,EAAA;AAEnC,YAAAH,sBAAA,CAAA,aAAA,CAACC,eAAO,EACN,EAAA,KAAK,EAAEI,2BAAa,CAAC,EAAE,SAAS,EAAE,aAAa,aAAb,aAAa,KAAA,SAAA,GAAA,SAAA,GAAb,aAAa,CAAE,OAAO,EAAE,CAAC,EAC3D,SAAS,EAAED,aAAW,CAAC,IAAI,EAC3B,UAAU,EAAC,YAAY,EAAA,EAEtB,QAAQ,IAAIJ,qCAAC,WAAW,EAAA,EAAC,IAAI,EAAC,cAAc,GAAG,CACxC;AAET,YAAA,QAAQ,KACPA,sBAAC,CAAA,aAAA,CAAAM,eAAO,IAAC,GAAG,EAAE,QAAQ,GAAG,IAAI,GAAG,IAAI,EAAA;AACjC,gBAAA,SAAS,KACRN,sBAAC,CAAA,aAAA,CAAAO,SAAI,EAAC,EAAA,OAAO,EAAC,UAAU,EAAC,KAAK,EAAE,IAAI,KAAK,MAAM,GAAG,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,EAAE,EAC1E,EAAA,KAAK,CACD,CACR;AACA,gBAAA,WAAW,IAAIP,sBAAA,CAAA,aAAA,CAACO,SAAI,EAAA,EAAC,OAAO,EAAC,MAAM,EAAA,EAAE,OAAO,CAAQ,CAC7C,CACX,CACO;AAEV,QAAAP,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAA,EAAC,cAAc,EAAC,UAAU,EAAC,QAAQ,EAAC,QAAQ,EAAC,SAAS,EAAEE,YAAM,CAAC,qBAAqB,EAAA;YACzF,gBAAgB;YAEhB,YAAY,KACXH,sBAAA,CAAA,aAAA,CAACM,eAAO,EAAA,EAAC,cAAc,EAAC,QAAQ,EAAC,SAAS,EAAEH,YAAM,CAAC,YAAY,EAAA,EAC5D,YAAY,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,WAAW,EAAE,MAC1CH,sBAAA,CAAA,aAAA,CAACQ,aAAM,EAAA,EAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,IAAI,EAAA,GAAK,WAAW,EAAA,EACxD,KAAK,CACC,CACV,CAAC,CACM,CACX;YAEA,YAAY,KACXR,sBAAC,CAAA,aAAA,CAAAM,eAAO,IAAC,SAAS,EAAEH,YAAM,CAAC,cAAc,EAAA;gBACvCH,sBAAC,CAAA,aAAA,CAAAQ,aAAM,EACL,EAAA,OAAO,EAAC,MAAM,EACd,QAAQ,EAAER,sBAAA,CAAA,aAAA,CAACS,wBAAS,EAAA,IAAA,CAAG,EACvB,OAAO,EAAE,YAAY,EACV,YAAA,EAAA,OAAO,EAClB,IAAI,EAAC,IAAI,EACT,CAAA,CACM,CACX,CACO,CACF;AAEd;;;;"}
1	+ {"version":3,"file":"Alert.cjs","sources":["../../../../src/components/Alerts/Alert/Alert.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../../Text';\nimport { Button } from '../../Button';\nimport { CrossIcon } from '../../../icons';\nimport { IconMap } from '../constants';\nimport { AlertProps } from './types';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { FlexCol } from '../../Flex/FlexCol';\nimport { assignCssVars, buildClassnames } from '../../../utils';\n\nimport alertStyles from '../Alerts.module.scss';\nimport styles from './Alert.module.scss';\n\nexport const Alert = ({\n size = 'base',\n variant = 'default',\n colours: passedColours,\n rightActions,\n rightActionsSlot,\n title,\n titleSlot,\n messageSlot,\n message,\n children,\n iconSlot,\n onClickClose,\n className,\n ...divProps\n}: AlertProps) => {\n const DefaultIcon = IconMap[variant];\n\n const isXsSize = size === 'xs';\n\n return (\n <FlexRow\n justifyContent=\"space-between\"\n className={buildClassnames([\n styles.alertContainer,\n styles[`${size}-size`],\n alertStyles[`${variant}-alert-variant`],\n className,\n ])}\n style={assignCssVars({ backgroundColor: passedColours?.background })}\n flexWrap=\"nowrap\"\n {...divProps}\n >\n <FlexRow\n alignItems={isXsSize ? 'center' : 'flex-start'}\n flexWrap=\"nowrap\"\n className={styles.iconTextContainer}\n >\n <FlexRow\n style={assignCssVars({ iconColor: passedColours?.primary })}\n className={alertStyles.icon}\n alignItems=\"flex-start\"\n >\n {iconSlot \|\| <DefaultIcon role=\"presentation\" />}\n </FlexRow>\n\n {children \|\| (\n <FlexCol gap={isXsSize ? 'xs' : 'sm'}>\n {titleSlot \|\| (\n <Text variant=\"bodyBold\" style={size === 'base' ? { lineHeight: '24px' } : {}}>\n {title}\n </Text>\n )}\n {messageSlot \|\| <Text variant=\"body\">{message}</Text>}\n </FlexCol>\n )}\n </FlexRow>\n\n <FlexRow justifyContent=\"flex-end\" flexWrap=\"nowrap\" className={styles.rightActionsContainer}>\n {rightActionsSlot}\n\n {rightActions && (\n <FlexCol justifyContent=\"center\" className={styles.rightActions}>\n {rightActions.map(({ label, ...actionProps }) => (\n <Button key={label} type=\"button\" size=\"sm\" {...actionProps}>\n {label}\n </Button>\n ))}\n </FlexCol>\n )}\n\n {onClickClose && (\n <FlexCol className={styles.closeContainer}>\n <Button\n variant=\"flat\"\n iconSlot={<CrossIcon />}\n onClick={onClickClose}\n aria-label=\"Close\"\n size=\"sm\"\n />\n </FlexCol>\n )}\n </FlexRow>\n </FlexRow>\n );\n};\n"],"names":["IconMap","React","FlexRow","buildClassnames","styles","alertStyles","assignCssVars","FlexCol","Text","Button","CrossIcon"],"mappings":";;;;;;;;;;;;;;;;;;;AAca,MAAA,KAAK,GAAG,CAAC,EACpB,IAAI,GAAG,MAAM,EACb,OAAO,GAAG,SAAS,EACnB,OAAO,EAAE,aAAa,EACtB,YAAY,EACZ,gBAAgB,EAChB,KAAK,EACL,SAAS,EACT,WAAW,EACX,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,GAAG,QAAQ,EACA,KAAI;AACf,IAAA,MAAM,WAAW,GAAGA,iBAAO,CAAC,OAAO,CAAC;AAEpC,IAAA,MAAM,QAAQ,GAAG,IAAI,KAAK,IAAI;IAE9B,QACEC,sBAAC,CAAA,aAAA,CAAAC,eAAO,EACN,EAAA,cAAc,EAAC,eAAe,EAC9B,SAAS,EAAEC,+BAAe,CAAC;AACzB,YAAAC,YAAM,CAAC,cAAc;AACrB,YAAAA,YAAM,CAAC,CAAA,EAAG,IAAI,CAAA,KAAA,CAAO,CAAC;AACtB,YAAAC,aAAW,CAAC,CAAA,EAAG,OAAO,CAAA,cAAA,CAAgB,CAAC;YACvC,SAAS;SACV,CAAC,EACF,KAAK,EAAEC,2BAAa,CAAC,EAAE,eAAe,EAAE,aAAa,KAAb,IAAA,IAAA,aAAa,6BAAb,aAAa,CAAE,UAAU,EAAE,CAAC,EACpE,QAAQ,EAAC,QAAQ,EAAA,GACb,QAAQ,EAAA;QAEZL,sBAAC,CAAA,aAAA,CAAAC,eAAO,IACN,UAAU,EAAE,QAAQ,GAAG,QAAQ,GAAG,YAAY,EAC9C,QAAQ,EAAC,QAAQ,EACjB,SAAS,EAAEE,YAAM,CAAC,iBAAiB,EAAA;AAEnC,YAAAH,sBAAA,CAAA,aAAA,CAACC,eAAO,EACN,EAAA,KAAK,EAAEI,2BAAa,CAAC,EAAE,SAAS,EAAE,aAAa,aAAb,aAAa,KAAA,SAAA,GAAA,SAAA,GAAb,aAAa,CAAE,OAAO,EAAE,CAAC,EAC3D,SAAS,EAAED,aAAW,CAAC,IAAI,EAC3B,UAAU,EAAC,YAAY,EAAA,EAEtB,QAAQ,IAAIJ,qCAAC,WAAW,EAAA,EAAC,IAAI,EAAC,cAAc,GAAG,CACxC;AAET,YAAA,QAAQ,KACPA,sBAAC,CAAA,aAAA,CAAAM,eAAO,IAAC,GAAG,EAAE,QAAQ,GAAG,IAAI,GAAG,IAAI,EAAA;AACjC,gBAAA,SAAS,KACRN,sBAAC,CAAA,aAAA,CAAAO,SAAI,EAAC,EAAA,OAAO,EAAC,UAAU,EAAC,KAAK,EAAE,IAAI,KAAK,MAAM,GAAG,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,EAAE,EAC1E,EAAA,KAAK,CACD,CACR;AACA,gBAAA,WAAW,IAAIP,sBAAA,CAAA,aAAA,CAACO,SAAI,EAAA,EAAC,OAAO,EAAC,MAAM,EAAA,EAAE,OAAO,CAAQ,CAC7C,CACX,CACO;AAEV,QAAAP,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAA,EAAC,cAAc,EAAC,UAAU,EAAC,QAAQ,EAAC,QAAQ,EAAC,SAAS,EAAEE,YAAM,CAAC,qBAAqB,EAAA;YACzF,gBAAgB;YAEhB,YAAY,KACXH,sBAAA,CAAA,aAAA,CAACM,eAAO,EAAA,EAAC,cAAc,EAAC,QAAQ,EAAC,SAAS,EAAEH,YAAM,CAAC,YAAY,EAAA,EAC5D,YAAY,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,WAAW,EAAE,MAC1CH,sBAAA,CAAA,aAAA,CAACQ,aAAM,EAAA,EAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,IAAI,EAAA,GAAK,WAAW,EAAA,EACxD,KAAK,CACC,CACV,CAAC,CACM,CACX;YAEA,YAAY,KACXR,sBAAC,CAAA,aAAA,CAAAM,eAAO,IAAC,SAAS,EAAEH,YAAM,CAAC,cAAc,EAAA;gBACvCH,sBAAC,CAAA,aAAA,CAAAQ,aAAM,EACL,EAAA,OAAO,EAAC,MAAM,EACd,QAAQ,EAAER,sBAAA,CAAA,aAAA,CAACS,wBAAS,EAAA,IAAA,CAAG,EACvB,OAAO,EAAE,YAAY,EACV,YAAA,EAAA,OAAO,EAClB,IAAI,EAAC,IAAI,EACT,CAAA,CACM,CACX,CACO,CACF;AAEd;;;;"}

package/dist/components/Alerts/Alert/Alert.js CHANGED Viewed

@@ -19,7 +19,7 @@ const Alert = ({ size = 'base', variant = 'default', colours: passedColours, rig
             styles[`${size}-size`],
             alertStyles[`${variant}-alert-variant`],
             className,
-        ]), flexWrap: "nowrap", ...divProps },
+        ]), style: assignCssVars({ backgroundColor: passedColours === null || passedColours === undefined ? undefined : passedColours.background }), flexWrap: "nowrap", ...divProps },
         React__default.createElement(FlexRow, { alignItems: isXsSize ? 'center' : 'flex-start', flexWrap: "nowrap", className: styles.iconTextContainer },
             React__default.createElement(FlexRow, { style: assignCssVars({ iconColor: passedColours === null || passedColours === undefined ? undefined : passedColours.primary }), className: alertStyles.icon, alignItems: "flex-start" }, iconSlot || React__default.createElement(DefaultIcon, { role: "presentation" })),
             children || (React__default.createElement(FlexCol, { gap: isXsSize ? 'xs' : 'sm' },

package/dist/components/Alerts/Alert/Alert.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Alert.js","sources":["../../../../src/components/Alerts/Alert/Alert.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../../Text';\nimport { Button } from '../../Button';\nimport { CrossIcon } from '../../../icons';\nimport { IconMap } from '../constants';\nimport { AlertProps } from './types';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { FlexCol } from '../../Flex/FlexCol';\nimport { assignCssVars, buildClassnames } from '../../../utils';\n\nimport alertStyles from '../Alerts.module.scss';\nimport styles from './Alert.module.scss';\n\nexport const Alert = ({\n size = 'base',\n variant = 'default',\n colours: passedColours,\n rightActions,\n rightActionsSlot,\n title,\n titleSlot,\n messageSlot,\n message,\n children,\n iconSlot,\n onClickClose,\n className,\n ...divProps\n}: AlertProps) => {\n const DefaultIcon = IconMap[variant];\n\n const isXsSize = size === 'xs';\n\n return (\n <FlexRow\n justifyContent=\"space-between\"\n className={buildClassnames([\n styles.alertContainer,\n styles[`${size}-size`],\n alertStyles[`${variant}-alert-variant`],\n className,\n ])}\n flexWrap=\"nowrap\"\n {...divProps}\n >\n <FlexRow\n alignItems={isXsSize ? 'center' : 'flex-start'}\n flexWrap=\"nowrap\"\n className={styles.iconTextContainer}\n >\n <FlexRow\n style={assignCssVars({ iconColor: passedColours?.primary })}\n className={alertStyles.icon}\n alignItems=\"flex-start\"\n >\n {iconSlot \|\| <DefaultIcon role=\"presentation\" />}\n </FlexRow>\n\n {children \|\| (\n <FlexCol gap={isXsSize ? 'xs' : 'sm'}>\n {titleSlot \|\| (\n <Text variant=\"bodyBold\" style={size === 'base' ? { lineHeight: '24px' } : {}}>\n {title}\n </Text>\n )}\n {messageSlot \|\| <Text variant=\"body\">{message}</Text>}\n </FlexCol>\n )}\n </FlexRow>\n\n <FlexRow justifyContent=\"flex-end\" flexWrap=\"nowrap\" className={styles.rightActionsContainer}>\n {rightActionsSlot}\n\n {rightActions && (\n <FlexCol justifyContent=\"center\" className={styles.rightActions}>\n {rightActions.map(({ label, ...actionProps }) => (\n <Button key={label} type=\"button\" size=\"sm\" {...actionProps}>\n {label}\n </Button>\n ))}\n </FlexCol>\n )}\n\n {onClickClose && (\n <FlexCol className={styles.closeContainer}>\n <Button\n variant=\"flat\"\n iconSlot={<CrossIcon />}\n onClick={onClickClose}\n aria-label=\"Close\"\n size=\"sm\"\n />\n </FlexCol>\n )}\n </FlexRow>\n </FlexRow>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;AAca,MAAA,KAAK,GAAG,CAAC,EACpB,IAAI,GAAG,MAAM,EACb,OAAO,GAAG,SAAS,EACnB,OAAO,EAAE,aAAa,EACtB,YAAY,EACZ,gBAAgB,EAChB,KAAK,EACL,SAAS,EACT,WAAW,EACX,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,GAAG,QAAQ,EACA,KAAI;AACf,IAAA,MAAM,WAAW,GAAG,OAAO,CAAC,OAAO,CAAC;AAEpC,IAAA,MAAM,QAAQ,GAAG,IAAI,KAAK,IAAI;IAE9B,QACEA,cAAC,CAAA,aAAA,CAAA,OAAO,EACN,EAAA,cAAc,EAAC,eAAe,EAC9B,SAAS,EAAE,eAAe,CAAC;AACzB,YAAA,MAAM,CAAC,cAAc;AACrB,YAAA,MAAM,CAAC,CAAA,EAAG,IAAI,CAAA,KAAA,CAAO,CAAC;AACtB,YAAA,WAAW,CAAC,CAAA,EAAG,OAAO,CAAA,cAAA,CAAgB,CAAC;YACvC,SAAS;~~AACV~~,~~SAAA,~~CAAC,EACF,QAAQ,EAAC,QAAQ,~~KACb~~,QAAQ,EAAA;QAEZA,cAAC,CAAA,aAAA,CAAA,OAAO,IACN,UAAU,EAAE,QAAQ,GAAG,QAAQ,GAAG,YAAY,EAC9C,QAAQ,EAAC,QAAQ,EACjB,SAAS,EAAE,MAAM,CAAC,iBAAiB,EAAA;AAEnC,YAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EACN,EAAA,KAAK,EAAE,aAAa,CAAC,EAAE,SAAS,EAAE,aAAa,aAAb,aAAa,KAAA,SAAA,GAAA,SAAA,GAAb,aAAa,CAAE,OAAO,EAAE,CAAC,EAC3D,SAAS,EAAE,WAAW,CAAC,IAAI,EAC3B,UAAU,EAAC,YAAY,EAAA,EAEtB,QAAQ,IAAIA,6BAAC,WAAW,EAAA,EAAC,IAAI,EAAC,cAAc,GAAG,CACxC;AAET,YAAA,QAAQ,KACPA,cAAC,CAAA,aAAA,CAAA,OAAO,IAAC,GAAG,EAAE,QAAQ,GAAG,IAAI,GAAG,IAAI,EAAA;AACjC,gBAAA,SAAS,KACRA,cAAC,CAAA,aAAA,CAAA,IAAI,EAAC,EAAA,OAAO,EAAC,UAAU,EAAC,KAAK,EAAE,IAAI,KAAK,MAAM,GAAG,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,EAAE,EAC1E,EAAA,KAAK,CACD,CACR;AACA,gBAAA,WAAW,IAAIA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,MAAM,EAAA,EAAE,OAAO,CAAQ,CAC7C,CACX,CACO;AAEV,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,cAAc,EAAC,UAAU,EAAC,QAAQ,EAAC,QAAQ,EAAC,SAAS,EAAE,MAAM,CAAC,qBAAqB,EAAA;YACzF,gBAAgB;YAEhB,YAAY,KACXA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,cAAc,EAAC,QAAQ,EAAC,SAAS,EAAE,MAAM,CAAC,YAAY,EAAA,EAC5D,YAAY,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,WAAW,EAAE,MAC1CA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,IAAI,EAAA,GAAK,WAAW,EAAA,EACxD,KAAK,CACC,CACV,CAAC,CACM,CACX;YAEA,YAAY,KACXA,cAAC,CAAA,aAAA,CAAA,OAAO,IAAC,SAAS,EAAE,MAAM,CAAC,cAAc,EAAA;gBACvCA,cAAC,CAAA,aAAA,CAAA,MAAM,EACL,EAAA,OAAO,EAAC,MAAM,EACd,QAAQ,EAAEA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,IAAA,CAAG,EACvB,OAAO,EAAE,YAAY,EACV,YAAA,EAAA,OAAO,EAClB,IAAI,EAAC,IAAI,EACT,CAAA,CACM,CACX,CACO,CACF;AAEd;;;;"}
1	+ {"version":3,"file":"Alert.js","sources":["../../../../src/components/Alerts/Alert/Alert.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../../Text';\nimport { Button } from '../../Button';\nimport { CrossIcon } from '../../../icons';\nimport { IconMap } from '../constants';\nimport { AlertProps } from './types';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { FlexCol } from '../../Flex/FlexCol';\nimport { assignCssVars, buildClassnames } from '../../../utils';\n\nimport alertStyles from '../Alerts.module.scss';\nimport styles from './Alert.module.scss';\n\nexport const Alert = ({\n size = 'base',\n variant = 'default',\n colours: passedColours,\n rightActions,\n rightActionsSlot,\n title,\n titleSlot,\n messageSlot,\n message,\n children,\n iconSlot,\n onClickClose,\n className,\n ...divProps\n}: AlertProps) => {\n const DefaultIcon = IconMap[variant];\n\n const isXsSize = size === 'xs';\n\n return (\n <FlexRow\n justifyContent=\"space-between\"\n className={buildClassnames([\n styles.alertContainer,\n styles[`${size}-size`],\n alertStyles[`${variant}-alert-variant`],\n className,\n ])}\n style={assignCssVars({ backgroundColor: passedColours?.background })}\n flexWrap=\"nowrap\"\n {...divProps}\n >\n <FlexRow\n alignItems={isXsSize ? 'center' : 'flex-start'}\n flexWrap=\"nowrap\"\n className={styles.iconTextContainer}\n >\n <FlexRow\n style={assignCssVars({ iconColor: passedColours?.primary })}\n className={alertStyles.icon}\n alignItems=\"flex-start\"\n >\n {iconSlot \|\| <DefaultIcon role=\"presentation\" />}\n </FlexRow>\n\n {children \|\| (\n <FlexCol gap={isXsSize ? 'xs' : 'sm'}>\n {titleSlot \|\| (\n <Text variant=\"bodyBold\" style={size === 'base' ? { lineHeight: '24px' } : {}}>\n {title}\n </Text>\n )}\n {messageSlot \|\| <Text variant=\"body\">{message}</Text>}\n </FlexCol>\n )}\n </FlexRow>\n\n <FlexRow justifyContent=\"flex-end\" flexWrap=\"nowrap\" className={styles.rightActionsContainer}>\n {rightActionsSlot}\n\n {rightActions && (\n <FlexCol justifyContent=\"center\" className={styles.rightActions}>\n {rightActions.map(({ label, ...actionProps }) => (\n <Button key={label} type=\"button\" size=\"sm\" {...actionProps}>\n {label}\n </Button>\n ))}\n </FlexCol>\n )}\n\n {onClickClose && (\n <FlexCol className={styles.closeContainer}>\n <Button\n variant=\"flat\"\n iconSlot={<CrossIcon />}\n onClick={onClickClose}\n aria-label=\"Close\"\n size=\"sm\"\n />\n </FlexCol>\n )}\n </FlexRow>\n </FlexRow>\n );\n};\n"],"names":["React"],"mappings":"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"}

package/dist/components/Checkbox/Checkbox.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.cjs","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useMemo } from 'react';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport { Input } from './styled';\nimport { generateId } from '../../utils/generateId';\n\nexport type CheckboxValue = string \| number;\n\nexport interface CheckboxProps extends ForwardedChoiceProps {\n id?: string;\n checked: boolean;\n indeterminate?: boolean;\n value?: CheckboxValue;\n name?: string;\n disabled?: boolean;\n ariaLabel?: string;\n onChange: (checked: boolean, value?: CheckboxValue) => void;\n className?: string;\n}\n\nexport const Checkbox = ({\n id,\n checked,\n indeterminate,\n value,\n name,\n hint,\n disabled,\n ariaLabel,\n className,\n onChange,\n ...otherProps\n}: CheckboxProps) => {\n const componentId = useMemo(() => id ?? generateId('checkbox'), [id]);\n const checkboxRef = useRef<HTMLInputElement>(null);\n\n const handleChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n onChange(e.currentTarget.checked, value);\n },\n [onChange, value],\n );\n\n useEffect(() => {\n if (!checkboxRef.current) return;\n if (indeterminate === true) {\n checkboxRef.current.indeterminate = true;\n return;\n }\n checkboxRef.current.indeterminate = false;\n }, [indeterminate]);\n\n const ariaDescribedBy = hint ? `hint-${componentId}` : undefined;\n\n return (\n <Choice\n htmlFor={componentId}\n disabled={disabled}\n className={className}\n hint={hint}\n {...otherProps}\n >\n <Input\n ref={checkboxRef}\n id={componentId}\n type=\"checkbox\"\n checked={checked}\n value={value}\n name={name}\n disabled={disabled}\n aria-label={ariaLabel}\n aria-describedby={ariaDescribedBy}\n onChange={handleChange}\n />\n </Choice>\n );\n};\n"],"names":["useMemo","generateId","useRef","useCallback","useEffect","React","Choice","Input"],"mappings":";;;;;;;;;;;AAmBO,MAAM,QAAQ,GAAG,CAAC,EACvB,EAAE,EACF,OAAO,EACP,aAAa,EACb,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,SAAS,EACT,QAAQ,EACR,GAAG,UAAU,EACC,KAAI;IAClB,MAAM,WAAW,GAAGA,aAAO,CAAC,MAAM,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,SAAA,GAAF,EAAE,GAAIC,qBAAU,CAAC,UAAU,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AACrE,IAAA,MAAM,WAAW,GAAGC,YAAM,CAAmB,IAAI,CAAC;AAElD,IAAA,MAAM,YAAY,GAAGC,iBAAW,CAC9B,CAAC,CAAsC,KAAI;QACzC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC;AAC1C,KAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB;IAEDC,eAAS,CAAC,MAAK;QACb,IAAI,CAAC,WAAW,CAAC,OAAO;YAAE;QAC1B,IAAI,aAAa,KAAK,IAAI,EAAE;AAC1B,YAAA,WAAW,CAAC,OAAO,CAAC,aAAa,GAAG,IAAI;YACxC;AACD;AACD,QAAA,WAAW,CAAC,OAAO,CAAC,aAAa,GAAG,KAAK;AAC3C,KAAC,EAAE,CAAC,aAAa,CAAC,CAAC;AAEnB,IAAA,MAAM,eAAe,GAAG,IAAI,GAAG,CAAQ,KAAA,EAAA,WAAW,CAAE,CAAA,GAAG,SAAS;IAEhE,QACEC,qCAACC,aAAM,EAAA,EACL,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,KACN,UAAU,EAAA;AAEd,QAAAD,sBAAA,CAAA,aAAA,CAACE,YAAK,EACJ,EAAA,GAAG,EAAE,WAAW,EAChB,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EACN,YAAA,EAAA,SAAS,EACH,kBAAA,EAAA,eAAe,EACjC,QAAQ,EAAE,YAAY,EACtB,CAAA,CACK;AAEb;;;;"}
1	+ {"version":3,"file":"Checkbox.cjs","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useMemo } from 'react';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport { Input } from './styled';\nimport { generateId } from '../../utils/generateId';\n\nexport type CheckboxValue = string \| number;\n\nexport interface CheckboxProps extends ForwardedChoiceProps {\n id?: string;\n checked: boolean;\n indeterminate?: boolean;\n value?: CheckboxValue;\n name?: string;\n disabled?: boolean;\n ariaLabel?: string;\n onChange: (checked: boolean, value?: CheckboxValue, meta?: { shiftKey?: boolean }) => void;\n className?: string;\n}\n\nexport const Checkbox = ({\n id,\n checked,\n indeterminate,\n value,\n name,\n hint,\n disabled,\n ariaLabel,\n className,\n onChange,\n ...otherProps\n}: CheckboxProps) => {\n const componentId = useMemo(() => id ?? generateId('checkbox'), [id]);\n const checkboxRef = useRef<HTMLInputElement>(null);\n\n const handleChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n onChange(e.currentTarget.checked, value);\n },\n [onChange, value],\n );\n\n useEffect(() => {\n if (!checkboxRef.current) return;\n if (indeterminate === true) {\n checkboxRef.current.indeterminate = true;\n return;\n }\n checkboxRef.current.indeterminate = false;\n }, [indeterminate]);\n\n const ariaDescribedBy = hint ? `hint-${componentId}` : undefined;\n\n return (\n <Choice\n htmlFor={componentId}\n disabled={disabled}\n className={className}\n hint={hint}\n {...otherProps}\n >\n <Input\n ref={checkboxRef}\n id={componentId}\n type=\"checkbox\"\n checked={checked}\n value={value}\n name={name}\n disabled={disabled}\n aria-label={ariaLabel}\n aria-describedby={ariaDescribedBy}\n onChange={handleChange}\n />\n </Choice>\n );\n};\n"],"names":["useMemo","generateId","useRef","useCallback","useEffect","React","Choice","Input"],"mappings":";;;;;;;;;;;AAmBO,MAAM,QAAQ,GAAG,CAAC,EACvB,EAAE,EACF,OAAO,EACP,aAAa,EACb,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,SAAS,EACT,QAAQ,EACR,GAAG,UAAU,EACC,KAAI;IAClB,MAAM,WAAW,GAAGA,aAAO,CAAC,MAAM,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,SAAA,GAAF,EAAE,GAAIC,qBAAU,CAAC,UAAU,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AACrE,IAAA,MAAM,WAAW,GAAGC,YAAM,CAAmB,IAAI,CAAC;AAElD,IAAA,MAAM,YAAY,GAAGC,iBAAW,CAC9B,CAAC,CAAsC,KAAI;QACzC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC;AAC1C,KAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB;IAEDC,eAAS,CAAC,MAAK;QACb,IAAI,CAAC,WAAW,CAAC,OAAO;YAAE;QAC1B,IAAI,aAAa,KAAK,IAAI,EAAE;AAC1B,YAAA,WAAW,CAAC,OAAO,CAAC,aAAa,GAAG,IAAI;YACxC;AACD;AACD,QAAA,WAAW,CAAC,OAAO,CAAC,aAAa,GAAG,KAAK;AAC3C,KAAC,EAAE,CAAC,aAAa,CAAC,CAAC;AAEnB,IAAA,MAAM,eAAe,GAAG,IAAI,GAAG,CAAQ,KAAA,EAAA,WAAW,CAAE,CAAA,GAAG,SAAS;IAEhE,QACEC,qCAACC,aAAM,EAAA,EACL,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,KACN,UAAU,EAAA;AAEd,QAAAD,sBAAA,CAAA,aAAA,CAACE,YAAK,EACJ,EAAA,GAAG,EAAE,WAAW,EAChB,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EACN,YAAA,EAAA,SAAS,EACH,kBAAA,EAAA,eAAe,EACjC,QAAQ,EAAE,YAAY,EACtB,CAAA,CACK;AAEb;;;;"}

package/dist/components/Checkbox/Checkbox.d.ts CHANGED Viewed

@@ -9,7 +9,9 @@ export interface CheckboxProps extends ForwardedChoiceProps {
     name?: string;
     disabled?: boolean;
     ariaLabel?: string;
-    onChange: (checked: boolean, value?: CheckboxValue) => void;
+    onChange: (checked: boolean, value?: CheckboxValue, meta?: {
+        shiftKey?: boolean;
+    }) => void;
     className?: string;
 }
 export declare const Checkbox: ({ id, checked, indeterminate, value, name, hint, disabled, ariaLabel, className, onChange, ...otherProps }: CheckboxProps) => React.JSX.Element;

package/dist/components/Checkbox/Checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useMemo } from 'react';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport { Input } from './styled';\nimport { generateId } from '../../utils/generateId';\n\nexport type CheckboxValue = string \| number;\n\nexport interface CheckboxProps extends ForwardedChoiceProps {\n id?: string;\n checked: boolean;\n indeterminate?: boolean;\n value?: CheckboxValue;\n name?: string;\n disabled?: boolean;\n ariaLabel?: string;\n onChange: (checked: boolean, value?: CheckboxValue) => void;\n className?: string;\n}\n\nexport const Checkbox = ({\n id,\n checked,\n indeterminate,\n value,\n name,\n hint,\n disabled,\n ariaLabel,\n className,\n onChange,\n ...otherProps\n}: CheckboxProps) => {\n const componentId = useMemo(() => id ?? generateId('checkbox'), [id]);\n const checkboxRef = useRef<HTMLInputElement>(null);\n\n const handleChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n onChange(e.currentTarget.checked, value);\n },\n [onChange, value],\n );\n\n useEffect(() => {\n if (!checkboxRef.current) return;\n if (indeterminate === true) {\n checkboxRef.current.indeterminate = true;\n return;\n }\n checkboxRef.current.indeterminate = false;\n }, [indeterminate]);\n\n const ariaDescribedBy = hint ? `hint-${componentId}` : undefined;\n\n return (\n <Choice\n htmlFor={componentId}\n disabled={disabled}\n className={className}\n hint={hint}\n {...otherProps}\n >\n <Input\n ref={checkboxRef}\n id={componentId}\n type=\"checkbox\"\n checked={checked}\n value={value}\n name={name}\n disabled={disabled}\n aria-label={ariaLabel}\n aria-describedby={ariaDescribedBy}\n onChange={handleChange}\n />\n </Choice>\n );\n};\n"],"names":["React"],"mappings":";;;;;AAmBO,MAAM,QAAQ,GAAG,CAAC,EACvB,EAAE,EACF,OAAO,EACP,aAAa,EACb,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,SAAS,EACT,QAAQ,EACR,GAAG,UAAU,EACC,KAAI;IAClB,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,SAAA,GAAF,EAAE,GAAI,UAAU,CAAC,UAAU,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AACrE,IAAA,MAAM,WAAW,GAAG,MAAM,CAAmB,IAAI,CAAC;AAElD,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAsC,KAAI;QACzC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC;AAC1C,KAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB;IAED,SAAS,CAAC,MAAK;QACb,IAAI,CAAC,WAAW,CAAC,OAAO;YAAE;QAC1B,IAAI,aAAa,KAAK,IAAI,EAAE;AAC1B,YAAA,WAAW,CAAC,OAAO,CAAC,aAAa,GAAG,IAAI;YACxC;AACD;AACD,QAAA,WAAW,CAAC,OAAO,CAAC,aAAa,GAAG,KAAK;AAC3C,KAAC,EAAE,CAAC,aAAa,CAAC,CAAC;AAEnB,IAAA,MAAM,eAAe,GAAG,IAAI,GAAG,CAAQ,KAAA,EAAA,WAAW,CAAE,CAAA,GAAG,SAAS;IAEhE,QACEA,6BAAC,MAAM,EAAA,EACL,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,KACN,UAAU,EAAA;AAEd,QAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EACJ,EAAA,GAAG,EAAE,WAAW,EAChB,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EACN,YAAA,EAAA,SAAS,EACH,kBAAA,EAAA,eAAe,EACjC,QAAQ,EAAE,YAAY,EACtB,CAAA,CACK;AAEb;;;;"}
1	+ {"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useMemo } from 'react';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport { Input } from './styled';\nimport { generateId } from '../../utils/generateId';\n\nexport type CheckboxValue = string \| number;\n\nexport interface CheckboxProps extends ForwardedChoiceProps {\n id?: string;\n checked: boolean;\n indeterminate?: boolean;\n value?: CheckboxValue;\n name?: string;\n disabled?: boolean;\n ariaLabel?: string;\n onChange: (checked: boolean, value?: CheckboxValue, meta?: { shiftKey?: boolean }) => void;\n className?: string;\n}\n\nexport const Checkbox = ({\n id,\n checked,\n indeterminate,\n value,\n name,\n hint,\n disabled,\n ariaLabel,\n className,\n onChange,\n ...otherProps\n}: CheckboxProps) => {\n const componentId = useMemo(() => id ?? generateId('checkbox'), [id]);\n const checkboxRef = useRef<HTMLInputElement>(null);\n\n const handleChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n onChange(e.currentTarget.checked, value);\n },\n [onChange, value],\n );\n\n useEffect(() => {\n if (!checkboxRef.current) return;\n if (indeterminate === true) {\n checkboxRef.current.indeterminate = true;\n return;\n }\n checkboxRef.current.indeterminate = false;\n }, [indeterminate]);\n\n const ariaDescribedBy = hint ? `hint-${componentId}` : undefined;\n\n return (\n <Choice\n htmlFor={componentId}\n disabled={disabled}\n className={className}\n hint={hint}\n {...otherProps}\n >\n <Input\n ref={checkboxRef}\n id={componentId}\n type=\"checkbox\"\n checked={checked}\n value={value}\n name={name}\n disabled={disabled}\n aria-label={ariaLabel}\n aria-describedby={ariaDescribedBy}\n onChange={handleChange}\n />\n </Choice>\n );\n};\n"],"names":["React"],"mappings":";;;;;AAmBO,MAAM,QAAQ,GAAG,CAAC,EACvB,EAAE,EACF,OAAO,EACP,aAAa,EACb,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,SAAS,EACT,QAAQ,EACR,GAAG,UAAU,EACC,KAAI;IAClB,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,SAAA,GAAF,EAAE,GAAI,UAAU,CAAC,UAAU,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AACrE,IAAA,MAAM,WAAW,GAAG,MAAM,CAAmB,IAAI,CAAC;AAElD,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAsC,KAAI;QACzC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC;AAC1C,KAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB;IAED,SAAS,CAAC,MAAK;QACb,IAAI,CAAC,WAAW,CAAC,OAAO;YAAE;QAC1B,IAAI,aAAa,KAAK,IAAI,EAAE;AAC1B,YAAA,WAAW,CAAC,OAAO,CAAC,aAAa,GAAG,IAAI;YACxC;AACD;AACD,QAAA,WAAW,CAAC,OAAO,CAAC,aAAa,GAAG,KAAK;AAC3C,KAAC,EAAE,CAAC,aAAa,CAAC,CAAC;AAEnB,IAAA,MAAM,eAAe,GAAG,IAAI,GAAG,CAAQ,KAAA,EAAA,WAAW,CAAE,CAAA,GAAG,SAAS;IAEhE,QACEA,6BAAC,MAAM,EAAA,EACL,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,KACN,UAAU,EAAA;AAEd,QAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EACJ,EAAA,GAAG,EAAE,WAAW,EAChB,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EACN,YAAA,EAAA,SAAS,EACH,kBAAA,EAAA,eAAe,EACjC,QAAQ,EAAE,YAAY,EACtB,CAAA,CACK;AAEb;;;;"}

package/dist/components/DataTable/components/SelectionCell.cjs CHANGED Viewed

@@ -10,12 +10,21 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 function SelectionCell({ selected, rowId, onChange, selectionMode, disabled, ...cellProps }) {
+    const shiftKeyRef = React.useRef(false);
+    // Detect shift on click OR space checks
+    const handleInteraction = React.useCallback((e) => {
+        shiftKeyRef.current = e.shiftKey;
+    }, []);
+    const handleChange = React.useCallback((checked) => {
+        onChange(checked, rowId, shiftKeyRef.current ? { shiftKey: true } : undefined);
+        shiftKeyRef.current = false;
+    }, [onChange, rowId]);
     if (selectionMode === 'single') {
         return (React__default.default.createElement(Cell.Cell, { ...cellProps },
             React__default.default.createElement(Radio.Radio, { value: rowId, checked: selected, disabled: disabled, onChange: onChange })));
     }
-    return (React__default.default.createElement(Cell.Cell, { ...cellProps },
-        React__default.default.createElement(Checkbox.Checkbox, { value: rowId, checked: selected, disabled: disabled, onChange: onChange })));
+    return (React__default.default.createElement(Cell.Cell, { ...cellProps, onMouseDown: handleInteraction, onKeyDown: handleInteraction },
+        React__default.default.createElement(Checkbox.Checkbox, { value: rowId, checked: selected, disabled: disabled, onChange: handleChange })));
 }
 exports.SelectionCell = SelectionCell;

package/dist/components/DataTable/components/SelectionCell.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectionCell.cjs","sources":["../../../../src/components/DataTable/components/SelectionCell.tsx"],"sourcesContent":["import React from 'react';\nimport { Checkbox } from '../../Checkbox';\nimport { Radio } from '../../Radio';\nimport { Cell, CellProps } from './Cell';\nimport { RowId, SelectionMode } from '../types';\n\nexport interface SelectionCellProps extends CellProps {\n rowId: RowId;\n selected: boolean;\n onChange: ~~(selected: boolean, value: RowId \| undefined) => void~~;\n selectionMode: SelectionMode;\n disabled: boolean;\n}\n\nexport function SelectionCell({\n selected,\n rowId,\n onChange,\n selectionMode,\n disabled,\n ...cellProps\n}: SelectionCellProps) {\n if (selectionMode === 'single') {\n return (\n <Cell {...cellProps}>\n <Radio value={rowId} checked={selected} disabled={disabled} onChange={onChange} />\n </Cell>\n );\n }\n\n return (\n <Cell {...cellProps}>\n <Checkbox value={rowId} checked={selected} disabled={disabled} onChange={~~onChange~~} />\n </Cell>\n );\n}\n"],"names":["React","Cell","Radio","Checkbox"],"mappings":";;;;;;;;;;;SAcgB,aAAa,CAAC,EAC5B,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,GAAG,SAAS,EACO,EAAA;~~IACnB~~,IAAI,aAAa,KAAK,QAAQ,EAAE;AAC9B,QAAA,~~QACEA~~,sBAAA,CAAA,aAAA,CAACC,SAAI,EAAA,EAAA,GAAK,SAAS,EAAA;YACjBD,sBAAC,CAAA,aAAA,CAAAE,WAAK,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAI,CAAA,CAC7E;AAEV;AAED,IAAA,QACEF,sBAAA,CAAA,aAAA,CAACC,SAAI,EAAA,EAAA,GAAK,SAAS,EAAA;~~QACjBD~~,sBAAC,CAAA,aAAA,CAAAG,iBAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,~~QAAQ~~,EAAI,CAAA,~~CAChF~~;AAEX;;;;"}
1	+ {"version":3,"file":"SelectionCell.cjs","sources":["../../../../src/components/DataTable/components/SelectionCell.tsx"],"sourcesContent":["import React, { useRef, useCallback } from 'react';\nimport { Checkbox } from '../../Checkbox';\nimport { Radio } from '../../Radio';\nimport { Cell, CellProps } from './Cell';\nimport { RowId, SelectionMode, SetSelectedAction } from '../types';\n\nexport interface SelectionCellProps extends CellProps {\n rowId: RowId;\n selected: boolean;\n onChange: SetSelectedAction;\n selectionMode: SelectionMode;\n disabled: boolean;\n}\n\nexport function SelectionCell({\n selected,\n rowId,\n onChange,\n selectionMode,\n disabled,\n ...cellProps\n}: SelectionCellProps) {\n const shiftKeyRef = useRef(false);\n\n // Detect shift on click OR space checks\n const handleInteraction = useCallback((e: React.MouseEvent \| React.KeyboardEvent) => {\n shiftKeyRef.current = e.shiftKey;\n }, []);\n\n const handleChange = useCallback(\n (checked: boolean) => {\n onChange(checked, rowId, shiftKeyRef.current ? { shiftKey: true } : undefined);\n shiftKeyRef.current = false;\n },\n [onChange, rowId],\n );\n\n if (selectionMode === 'single') {\n return (\n <Cell {...cellProps}>\n <Radio value={rowId} checked={selected} disabled={disabled} onChange={onChange} />\n </Cell>\n );\n }\n\n return (\n <Cell {...cellProps} onMouseDown={handleInteraction} onKeyDown={handleInteraction}>\n <Checkbox value={rowId} checked={selected} disabled={disabled} onChange={handleChange} />\n </Cell>\n );\n}\n"],"names":["useRef","useCallback","React","Cell","Radio","Checkbox"],"mappings":";;;;;;;;;;;SAcgB,aAAa,CAAC,EAC5B,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,GAAG,SAAS,EACO,EAAA;AACnB,IAAA,MAAM,WAAW,GAAGA,YAAM,CAAC,KAAK,CAAC;;AAGjC,IAAA,MAAM,iBAAiB,GAAGC,iBAAW,CAAC,CAAC,CAAyC,KAAI;AAClF,QAAA,WAAW,CAAC,OAAO,GAAG,CAAC,CAAC,QAAQ;KACjC,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,YAAY,GAAGA,iBAAW,CAC9B,CAAC,OAAgB,KAAI;QACnB,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,WAAW,CAAC,OAAO,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,SAAS,CAAC;AAC9E,QAAA,WAAW,CAAC,OAAO,GAAG,KAAK;AAC7B,KAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB;IAED,IAAI,aAAa,KAAK,QAAQ,EAAE;AAC9B,QAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,SAAI,EAAA,EAAA,GAAK,SAAS,EAAA;YACjBD,sBAAC,CAAA,aAAA,CAAAE,WAAK,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAI,CAAA,CAC7E;AAEV;AAED,IAAA,QACEF,sBAAA,CAAA,aAAA,CAACC,SAAI,EAAA,EAAA,GAAK,SAAS,EAAE,WAAW,EAAE,iBAAiB,EAAE,SAAS,EAAE,iBAAiB,EAAA;QAC/ED,sBAAC,CAAA,aAAA,CAAAG,iBAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAI,CAAA,CACpF;AAEX;;;;"}

package/dist/components/DataTable/components/SelectionCell.d.ts CHANGED Viewed

@@ -1,10 +1,10 @@
 import React from 'react';
 import { CellProps } from './Cell';
-import { RowId, SelectionMode } from '../types';
+import { RowId, SelectionMode, SetSelectedAction } from '../types';
 export interface SelectionCellProps extends CellProps {
     rowId: RowId;
     selected: boolean;
-    onChange: (selected: boolean, value: RowId | undefined) => void;
+    onChange: SetSelectedAction;
     selectionMode: SelectionMode;
     disabled: boolean;
 }

package/dist/components/DataTable/components/SelectionCell.js CHANGED Viewed

@@ -1,15 +1,24 @@
-import React__default from 'react';
+import React__default, { useRef, useCallback } from 'react';
 import { Checkbox } from '../../Checkbox/Checkbox.js';
 import { Radio } from '../../Radio/Radio.js';
 import { Cell } from './Cell.js';
 function SelectionCell({ selected, rowId, onChange, selectionMode, disabled, ...cellProps }) {
+    const shiftKeyRef = useRef(false);
+    // Detect shift on click OR space checks
+    const handleInteraction = useCallback((e) => {
+        shiftKeyRef.current = e.shiftKey;
+    }, []);
+    const handleChange = useCallback((checked) => {
+        onChange(checked, rowId, shiftKeyRef.current ? { shiftKey: true } : undefined);
+        shiftKeyRef.current = false;
+    }, [onChange, rowId]);
     if (selectionMode === 'single') {
         return (React__default.createElement(Cell, { ...cellProps },
             React__default.createElement(Radio, { value: rowId, checked: selected, disabled: disabled, onChange: onChange })));
     }
-    return (React__default.createElement(Cell, { ...cellProps },
-        React__default.createElement(Checkbox, { value: rowId, checked: selected, disabled: disabled, onChange: onChange })));
+    return (React__default.createElement(Cell, { ...cellProps, onMouseDown: handleInteraction, onKeyDown: handleInteraction },
+        React__default.createElement(Checkbox, { value: rowId, checked: selected, disabled: disabled, onChange: handleChange })));
 }
 export { SelectionCell };

package/dist/components/DataTable/components/SelectionCell.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectionCell.js","sources":["../../../../src/components/DataTable/components/SelectionCell.tsx"],"sourcesContent":["import React from 'react';\nimport { Checkbox } from '../../Checkbox';\nimport { Radio } from '../../Radio';\nimport { Cell, CellProps } from './Cell';\nimport { RowId, SelectionMode } from '../types';\n\nexport interface SelectionCellProps extends CellProps {\n rowId: RowId;\n selected: boolean;\n onChange: ~~(selected: boolean, value: RowId \| undefined) => void~~;\n selectionMode: SelectionMode;\n disabled: boolean;\n}\n\nexport function SelectionCell({\n selected,\n rowId,\n onChange,\n selectionMode,\n disabled,\n ...cellProps\n}: SelectionCellProps) {\n if (selectionMode === 'single') {\n return (\n <Cell {...cellProps}>\n <Radio value={rowId} checked={selected} disabled={disabled} onChange={onChange} />\n </Cell>\n );\n }\n\n return (\n <Cell {...cellProps}>\n <Checkbox value={rowId} checked={selected} disabled={disabled} onChange={~~onChange~~} />\n </Cell>\n );\n}\n"],"names":["React"],"mappings":";;;;;SAcgB,aAAa,CAAC,EAC5B,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,GAAG,SAAS,EACO,EAAA;~~IACnB~~,IAAI,aAAa,KAAK,QAAQ,EAAE;AAC9B,QAAA,QACEA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAA,GAAK,SAAS,EAAA;YACjBA,cAAC,CAAA,aAAA,CAAA,KAAK,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAI,CAAA,CAC7E;AAEV;AAED,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAA,GAAK,SAAS,EAAA;~~QACjBA~~,cAAC,CAAA,aAAA,CAAA,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,~~QAAQ~~,EAAI,CAAA,~~CAChF~~;AAEX;;;;"}
1	+ {"version":3,"file":"SelectionCell.js","sources":["../../../../src/components/DataTable/components/SelectionCell.tsx"],"sourcesContent":["import React, { useRef, useCallback } from 'react';\nimport { Checkbox } from '../../Checkbox';\nimport { Radio } from '../../Radio';\nimport { Cell, CellProps } from './Cell';\nimport { RowId, SelectionMode, SetSelectedAction } from '../types';\n\nexport interface SelectionCellProps extends CellProps {\n rowId: RowId;\n selected: boolean;\n onChange: SetSelectedAction;\n selectionMode: SelectionMode;\n disabled: boolean;\n}\n\nexport function SelectionCell({\n selected,\n rowId,\n onChange,\n selectionMode,\n disabled,\n ...cellProps\n}: SelectionCellProps) {\n const shiftKeyRef = useRef(false);\n\n // Detect shift on click OR space checks\n const handleInteraction = useCallback((e: React.MouseEvent \| React.KeyboardEvent) => {\n shiftKeyRef.current = e.shiftKey;\n }, []);\n\n const handleChange = useCallback(\n (checked: boolean) => {\n onChange(checked, rowId, shiftKeyRef.current ? { shiftKey: true } : undefined);\n shiftKeyRef.current = false;\n },\n [onChange, rowId],\n );\n\n if (selectionMode === 'single') {\n return (\n <Cell {...cellProps}>\n <Radio value={rowId} checked={selected} disabled={disabled} onChange={onChange} />\n </Cell>\n );\n }\n\n return (\n <Cell {...cellProps} onMouseDown={handleInteraction} onKeyDown={handleInteraction}>\n <Checkbox value={rowId} checked={selected} disabled={disabled} onChange={handleChange} />\n </Cell>\n );\n}\n"],"names":["React"],"mappings":";;;;;SAcgB,aAAa,CAAC,EAC5B,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,GAAG,SAAS,EACO,EAAA;AACnB,IAAA,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC;;AAGjC,IAAA,MAAM,iBAAiB,GAAG,WAAW,CAAC,CAAC,CAAyC,KAAI;AAClF,QAAA,WAAW,CAAC,OAAO,GAAG,CAAC,CAAC,QAAQ;KACjC,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,OAAgB,KAAI;QACnB,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,WAAW,CAAC,OAAO,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,SAAS,CAAC;AAC9E,QAAA,WAAW,CAAC,OAAO,GAAG,KAAK;AAC7B,KAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB;IAED,IAAI,aAAa,KAAK,QAAQ,EAAE;AAC9B,QAAA,QACEA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAA,GAAK,SAAS,EAAA;YACjBA,cAAC,CAAA,aAAA,CAAA,KAAK,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAI,CAAA,CAC7E;AAEV;AAED,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAA,GAAK,SAAS,EAAE,WAAW,EAAE,iBAAiB,EAAE,SAAS,EAAE,iBAAiB,EAAA;QAC/EA,cAAC,CAAA,aAAA,CAAA,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAI,CAAA,CACpF;AAEX;;;;"}

package/dist/components/DataTable/hooks/useSelection.cjs CHANGED Viewed

@@ -3,6 +3,7 @@
 var React = require('react');
 var SelectionHeader = require('../components/SelectionHeader.cjs');
 var SelectionCell = require('../components/SelectionCell.cjs');
+var getRangeSelection = require('../utils/getRangeSelection.cjs');
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -13,31 +14,53 @@ const emptySelectionState = [[], () => { }];
 function useSelection({ selectionMode = 'multiple', selectionState, enabledRowIds, }) {
     const selectionEnabled = !!selectionState;
     const [selectedRowIds, setSelectedRowIds] = selectionState || emptySelectionState;
+    const lastClickedRef = React.useRef(null);
     // TODO: Memoise this
-    const setSelected = (selected, rowId) => {
+    const setSelected = (selected, rowId, options) => {
         if (rowId === undefined || rowId === null)
             return; // Can't use falsey, must allow number 0
-        if (selected && selectionMode === 'single') {
-            // Replace selectedRowIds with only the current rowId
-            setSelectedRowIds([rowId]);
-            return;
+        let newRowIds;
+        let intent;
+        const isShiftPressed = options === null || options === undefined ? undefined : options.shiftKey;
+        const lastClicked = lastClickedRef.current;
+        if (isShiftPressed && lastClicked && selectionMode === 'multiple') {
+            intent = 'range';
         }
-        if (selected) {
-            // Add rowId to selectedRowIds
-            if (selectedRowIds.includes(rowId))
-                return;
-            const rowIds = [...selectedRowIds, rowId];
-            setSelectedRowIds(rowIds);
+        else if (selected && selectionMode === 'single') {
+            intent = 'single';
+        }
+        else if (selected) {
+            intent = 'add';
         }
         else {
-            // Remove rowIds from selectedRowIds
-            const index = selectedRowIds.findIndex((id) => id === rowId);
-            if (index < 0)
+            intent = 'remove';
+        }
+        switch (intent) {
+            case 'range':
+                newRowIds = getRangeSelection.getRangeSelection({
+                    rowId,
+                    lastClicked: lastClicked,
+                    selected,
+                    enabledRowIds,
+                    selectedRowIds,
+                });
+                break;
+            case 'single':
+                newRowIds = [rowId];
+                break;
+            case 'add':
+                if (selectedRowIds.includes(rowId))
+                    return;
+                newRowIds = [...selectedRowIds, rowId];
+                break;
+            case 'remove':
+                newRowIds = selectedRowIds.filter((id) => id !== rowId);
+                break;
+            default:
                 return;
-            const rowIds = [...selectedRowIds];
-            rowIds.splice(index, 1);
-            setSelectedRowIds(rowIds);
         }
+        setSelectedRowIds(newRowIds);
+        lastClickedRef.current = rowId;
     };
     // TODO: Memoise this
     const toggleAllSelected = () => {

package/dist/components/DataTable/hooks/useSelection.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useSelection.cjs","sources":["../../../../src/components/DataTable/hooks/useSelection.tsx"],"sourcesContent":["/* eslint-disable react/destructuring-assignment */\n\nimport React from 'react';\n\nimport { ColumnConfig, RowId, SelectionState, SelectionMode, SetSelectedAction } from '../types';\n\nimport { SelectionHeader } from '../components/SelectionHeader';\nimport { SelectionCell } from '../components/SelectionCell';\n\nexport type UseSelectionConfig = {\n selectionMode?: SelectionMode;\n selectionState?: SelectionState;\n enabledRowIds: RowId[];\n};\n\nconst emptySelectionState: SelectionState = [[], () => {}];\n\nexport function useSelection({\n selectionMode = 'multiple',\n selectionState,\n enabledRowIds,\n}: UseSelectionConfig) {\n const selectionEnabled = !!selectionState;\n const [selectedRowIds, setSelectedRowIds] = selectionState \|\| emptySelectionState;\n\n // TODO: Memoise this\n const setSelected: SetSelectedAction = (selected, rowId) => {\n if (rowId === undefined \|\| rowId === null) return; // Can't use falsey, must allow number 0\n if (~~selected~~ && selectionMode === '~~single~~') {\n // ~~Replace~~ ~~selectedRowIds~~ ~~with~~ ~~only~~ ~~the~~ ~~current~~ ~~rowId~~\n ~~setSelectedRowIds~~(~~[rowId]~~);\n ~~return~~;\n }\n if (~~selected~~) {\n // ~~Add~~ rowId to selectedRowIds\n if (selectedRowIds.includes(rowId)) return;\n ~~const~~ ~~rowIds~~ = [...selectedRowIds, rowId];\n ~~setSelectedRowIds(rowIds)~~;\n ~~} else {\n~~ // ~~Remove rowIds from selectedRowIds\~~n ~~const~~ ~~index~~ = selectedRowIds.~~findIndex~~((id) => id ~~===~~ rowId);\n ~~if (index < 0) return~~;\n ~~const rowIds = [...selectedRowIds];\~~n ~~rowIds.splice(index, 1)~~;\n setSelectedRowIds(~~rowIds~~);\n }\n };\n\n // TODO: Memoise this\n const toggleAllSelected = () => {\n if (selectedRowIds.length === enabledRowIds.length) {\n setSelectedRowIds([]);\n return;\n }\n setSelectedRowIds(enabledRowIds);\n };\n\n // TODO: Memoise this\n const selectionColumn: ColumnConfig = {\n id: 'selection',\n title: 'Selection',\n width: '40px',\n align: 'center',\n pinned: 'left',\n renderHeader: (column, headerProps) => (\n <SelectionHeader\n {...headerProps}\n selected={selectedRowIds.length === enabledRowIds.length}\n indeterminate={selectedRowIds.length > 0 && selectedRowIds.length < enabledRowIds.length}\n onChange={toggleAllSelected}\n selectionMode={selectionMode}\n />\n ),\n renderCell: (row, cellProps, actions, rowState) => (\n <SelectionCell\n {...cellProps}\n rowId={row.id}\n selected={rowState.selected}\n onChange={actions.setSelected}\n selectionMode={selectionMode}\n disabled={rowState.disabled}\n />\n ),\n };\n\n return {\n selectionEnabled,\n selectedRowIds,\n selectionColumn,\n setSelected,\n };\n}\n"],"names":["React","SelectionHeader","SelectionCell"],"mappings":"~~;;;;;;;;;;~~AAAA;~~AAeA~~,MAAM,mBAAmB,GAAmB,CAAC,EAAE,EAAE,MAAK,GAAG,CAAC;AAEpD,SAAU,YAAY,CAAC,EAC3B,aAAa,GAAG,UAAU,EAC1B,cAAc,EACd,aAAa,GACM,EAAA;AACnB,IAAA,MAAM,gBAAgB,GAAG,CAAC,CAAC,cAAc;IACzC,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,cAAc,IAAI,mBAAmB~~;;AAGjF~~,IAAA,MAAM,WAAW,GAAsB,~~CAAC~~,~~QAAQ~~,~~EAAE~~,~~KAAK~~,~~KAAI~~;~~AACzD~~,QAAA,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI;AAAE,YAAA,OAAO;~~AAClD~~,QAAA,IAAI,~~QAAQ~~,IAAI,~~aAAa~~,~~KAAK~~,QAAQ,~~EAAE;;AAE1C~~,~~YAAA~~,~~iBAAiB~~,~~CAAC~~,CAAC,KAAK,~~CAAC~~,~~CAAC~~;~~YAC1B~~;~~AACD~~;~~AACD~~,~~QAAA~~,IAAI,QAAQ,EAAE~~;;AAEZ~~,~~YAAA~~,~~IAAI~~,~~cAAc~~,~~CAAC~~,QAAQ,~~CAAC~~,KAAK~~,CAAC~~;~~gBAAE~~;~~YACpC~~,~~MAAM~~,MAAM,GAAG,~~CAAC~~,~~GAAG~~,~~cAAc~~,~~EAAE~~,KAAK,~~CAAC~~;~~YACzC~~,~~iBAAiB~~,~~CAAC~~,~~MAAM~~,CAAC;~~AAC1B~~;~~AAAM~~,~~aAAA;;AAEL~~,~~YAAA~~,~~MAAM~~,~~KAAK~~,~~GAAG~~,cAAc,CAAC,SAAS,~~CAAC~~,CAAC,~~EAAE,~~KAAK,~~EAAE~~,KAAK,KAAK~~,CAAC~~;~~YAC5D~~,IAAI,~~KAAK~~,~~GAAG~~,CAAC;~~gBAAE~~;~~AACf~~,~~YAAA~~,~~MAAM~~,~~MAAM,~~GAAG,CAAC,GAAG,cAAc,CAAC;~~AAClC~~,YAAA,~~MAAM~~,CAAC,MAAM,CAAC,KAAK,EAAE,~~CAAC~~,CAAC;~~YACvB~~,iBAAiB,CAAC,~~MAAM~~,CAAC;~~AAC1B~~;~~AACH~~,KAAC;;IAGD,MAAM,iBAAiB,GAAG,MAAK;AAC7B,QAAA,IAAI,cAAc,CAAC,MAAM,KAAK,aAAa,CAAC,MAAM,EAAE;YAClD,iBAAiB,CAAC,EAAE,CAAC;YACrB;AACD;QACD,iBAAiB,CAAC,aAAa,CAAC;AAClC,KAAC;;AAGD,IAAA,MAAM,eAAe,GAAiB;AACpC,QAAA,EAAE,EAAE,WAAW;AACf,QAAA,KAAK,EAAE,WAAW;AAClB,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,KAAK,EAAE,QAAQ;AACf,QAAA,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,CAAC,MAAM,EAAE,WAAW,~~MAChCA~~,sBAAC,CAAA,aAAA,CAAAC,+BAAe,OACV,WAAW,EACf,QAAQ,EAAE,cAAc,CAAC,MAAM,KAAK,aAAa,CAAC,MAAM,EACxD,aAAa,EAAE,cAAc,CAAC,MAAM,GAAG,CAAC,IAAI,cAAc,CAAC,MAAM,GAAG,aAAa,CAAC,MAAM,EACxF,QAAQ,EAAE,iBAAiB,EAC3B,aAAa,EAAE,aAAa,EAAA,CAC5B,CACH;QACD,UAAU,EAAE,CAAC,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,MAC5CD,qCAACE,2BAAa,EAAA,EAAA,GACR,SAAS,EACb,KAAK,EAAE,GAAG,CAAC,EAAE,EACb,QAAQ,EAAE,QAAQ,CAAC,QAAQ,EAC3B,QAAQ,EAAE,OAAO,CAAC,WAAW,EAC7B,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,QAAQ,CAAC,QAAQ,EAAA,CAC3B,CACH;KACF;IAED,OAAO;QACL,gBAAgB;QAChB,cAAc;QACd,eAAe;QACf,WAAW;KACZ;AACH;;;;"}
1	+ {"version":3,"file":"useSelection.cjs","sources":["../../../../src/components/DataTable/hooks/useSelection.tsx"],"sourcesContent":["/* eslint-disable react/destructuring-assignment */\n\nimport React, { useRef } from 'react';\n\nimport {\n ColumnConfig,\n RowId,\n SelectionState,\n SelectionMode,\n SetSelectedAction,\n SelectionIntent,\n} from '../types';\n\nimport { SelectionHeader } from '../components/SelectionHeader';\nimport { SelectionCell } from '../components/SelectionCell';\nimport { getRangeSelection } from '../utils/getRangeSelection';\n\nexport type UseSelectionConfig = {\n selectionMode?: SelectionMode;\n selectionState?: SelectionState;\n enabledRowIds: RowId[];\n};\n\nconst emptySelectionState: SelectionState = [[], () => {}];\n\nexport function useSelection({\n selectionMode = 'multiple',\n selectionState,\n enabledRowIds,\n}: UseSelectionConfig) {\n const selectionEnabled = !!selectionState;\n const [selectedRowIds, setSelectedRowIds] = selectionState \|\| emptySelectionState;\n const lastClickedRef = useRef<RowId \| null>(null);\n\n // TODO: Memoise this\n const setSelected: SetSelectedAction = (\n selected: boolean,\n rowId: RowId \| undefined,\n options?: { shiftKey?: boolean },\n ) => {\n if (rowId === undefined \|\| rowId === null) return; // Can't use falsey, must allow number 0\n\n let newRowIds;\n let intent: SelectionIntent;\n const isShiftPressed = options?.shiftKey;\n const lastClicked = lastClickedRef.current;\n\n if (isShiftPressed && lastClicked && selectionMode === 'multiple') {\n intent = 'range';\n } else if (selected && selectionMode === 'single') {\n intent = 'single';\n } else if (selected) {\n intent = 'add';\n } else {\n intent = 'remove';\n }\n\n switch (intent) {\n case 'range':\n newRowIds = getRangeSelection({\n rowId,\n lastClicked: lastClicked!,\n selected,\n enabledRowIds,\n selectedRowIds,\n });\n break;\n case 'single':\n newRowIds = [rowId];\n break;\n case 'add':\n if (selectedRowIds.includes(rowId)) return;\n newRowIds = [...selectedRowIds, rowId];\n break;\n case 'remove':\n newRowIds = selectedRowIds.filter((id) => id !== rowId);\n break;\n default:\n return;\n }\n\n setSelectedRowIds(newRowIds);\n lastClickedRef.current = rowId;\n };\n\n // TODO: Memoise this\n const toggleAllSelected = () => {\n if (selectedRowIds.length === enabledRowIds.length) {\n setSelectedRowIds([]);\n return;\n }\n setSelectedRowIds(enabledRowIds);\n };\n\n // TODO: Memoise this\n const selectionColumn: ColumnConfig = {\n id: 'selection',\n title: 'Selection',\n width: '40px',\n align: 'center',\n pinned: 'left',\n renderHeader: (column, headerProps) => (\n <SelectionHeader\n {...headerProps}\n selected={selectedRowIds.length === enabledRowIds.length}\n indeterminate={selectedRowIds.length > 0 && selectedRowIds.length < enabledRowIds.length}\n onChange={toggleAllSelected}\n selectionMode={selectionMode}\n />\n ),\n renderCell: (row, cellProps, actions, rowState) => (\n <SelectionCell\n {...cellProps}\n rowId={row.id}\n selected={rowState.selected}\n onChange={actions.setSelected}\n selectionMode={selectionMode}\n disabled={rowState.disabled}\n />\n ),\n };\n\n return {\n selectionEnabled,\n selectedRowIds,\n selectionColumn,\n setSelected,\n };\n}\n"],"names":["useRef","getRangeSelection","React","SelectionHeader","SelectionCell"],"mappings":"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"}

package/dist/components/DataTable/hooks/useSelection.js CHANGED Viewed

@@ -1,37 +1,60 @@
-import React__default from 'react';
+import React__default, { useRef } from 'react';
 import { SelectionHeader } from '../components/SelectionHeader.js';
 import { SelectionCell } from '../components/SelectionCell.js';
+import { getRangeSelection } from '../utils/getRangeSelection.js';
 /* eslint-disable react/destructuring-assignment */
 const emptySelectionState = [[], () => { }];
 function useSelection({ selectionMode = 'multiple', selectionState, enabledRowIds, }) {
     const selectionEnabled = !!selectionState;
     const [selectedRowIds, setSelectedRowIds] = selectionState || emptySelectionState;
+    const lastClickedRef = useRef(null);
     // TODO: Memoise this
-    const setSelected = (selected, rowId) => {
+    const setSelected = (selected, rowId, options) => {
         if (rowId === undefined || rowId === null)
             return; // Can't use falsey, must allow number 0
-        if (selected && selectionMode === 'single') {
-            // Replace selectedRowIds with only the current rowId
-            setSelectedRowIds([rowId]);
-            return;
+        let newRowIds;
+        let intent;
+        const isShiftPressed = options === null || options === undefined ? undefined : options.shiftKey;
+        const lastClicked = lastClickedRef.current;
+        if (isShiftPressed && lastClicked && selectionMode === 'multiple') {
+            intent = 'range';
         }
-        if (selected) {
-            // Add rowId to selectedRowIds
-            if (selectedRowIds.includes(rowId))
-                return;
-            const rowIds = [...selectedRowIds, rowId];
-            setSelectedRowIds(rowIds);
+        else if (selected && selectionMode === 'single') {
+            intent = 'single';
+        }
+        else if (selected) {
+            intent = 'add';
         }
         else {
-            // Remove rowIds from selectedRowIds
-            const index = selectedRowIds.findIndex((id) => id === rowId);
-            if (index < 0)
+            intent = 'remove';
+        }
+        switch (intent) {
+            case 'range':
+                newRowIds = getRangeSelection({
+                    rowId,
+                    lastClicked: lastClicked,
+                    selected,
+                    enabledRowIds,
+                    selectedRowIds,
+                });
+                break;
+            case 'single':
+                newRowIds = [rowId];
+                break;
+            case 'add':
+                if (selectedRowIds.includes(rowId))
+                    return;
+                newRowIds = [...selectedRowIds, rowId];
+                break;
+            case 'remove':
+                newRowIds = selectedRowIds.filter((id) => id !== rowId);
+                break;
+            default:
                 return;
-            const rowIds = [...selectedRowIds];
-            rowIds.splice(index, 1);
-            setSelectedRowIds(rowIds);
         }
+        setSelectedRowIds(newRowIds);
+        lastClickedRef.current = rowId;
     };
     // TODO: Memoise this
     const toggleAllSelected = () => {

package/dist/components/DataTable/hooks/useSelection.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useSelection.js","sources":["../../../../src/components/DataTable/hooks/useSelection.tsx"],"sourcesContent":["/* eslint-disable react/destructuring-assignment */\n\nimport React from 'react';\n\nimport { ColumnConfig, RowId, SelectionState, SelectionMode, SetSelectedAction } from '../types';\n\nimport { SelectionHeader } from '../components/SelectionHeader';\nimport { SelectionCell } from '../components/SelectionCell';\n\nexport type UseSelectionConfig = {\n selectionMode?: SelectionMode;\n selectionState?: SelectionState;\n enabledRowIds: RowId[];\n};\n\nconst emptySelectionState: SelectionState = [[], () => {}];\n\nexport function useSelection({\n selectionMode = 'multiple',\n selectionState,\n enabledRowIds,\n}: UseSelectionConfig) {\n const selectionEnabled = !!selectionState;\n const [selectedRowIds, setSelectedRowIds] = selectionState \|\| emptySelectionState;\n\n // TODO: Memoise this\n const setSelected: SetSelectedAction = (selected, rowId) => {\n if (rowId === undefined \|\| rowId === null) return; // Can't use falsey, must allow number 0\n if (~~selected~~ && selectionMode === '~~single~~') {\n // ~~Replace~~ ~~selectedRowIds~~ ~~with~~ ~~only~~ ~~the~~ ~~current~~ ~~rowId~~\n ~~setSelectedRowIds~~(~~[rowId]~~);\n ~~return~~;\n }\n if (~~selected~~) {\n // ~~Add~~ rowId to selectedRowIds\n if (selectedRowIds.includes(rowId)) return;\n ~~const~~ ~~rowIds~~ = [...selectedRowIds, rowId];\n ~~setSelectedRowIds(rowIds)~~;\n ~~} else {\n~~ // ~~Remove rowIds from selectedRowIds\~~n ~~const~~ ~~index~~ = selectedRowIds.~~findIndex~~((id) => id ~~===~~ rowId);\n ~~if (index < 0) return~~;\n ~~const rowIds = [...selectedRowIds];\~~n ~~rowIds.splice(index, 1)~~;\n setSelectedRowIds(~~rowIds~~);\n }\n };\n\n // TODO: Memoise this\n const toggleAllSelected = () => {\n if (selectedRowIds.length === enabledRowIds.length) {\n setSelectedRowIds([]);\n return;\n }\n setSelectedRowIds(enabledRowIds);\n };\n\n // TODO: Memoise this\n const selectionColumn: ColumnConfig = {\n id: 'selection',\n title: 'Selection',\n width: '40px',\n align: 'center',\n pinned: 'left',\n renderHeader: (column, headerProps) => (\n <SelectionHeader\n {...headerProps}\n selected={selectedRowIds.length === enabledRowIds.length}\n indeterminate={selectedRowIds.length > 0 && selectedRowIds.length < enabledRowIds.length}\n onChange={toggleAllSelected}\n selectionMode={selectionMode}\n />\n ),\n renderCell: (row, cellProps, actions, rowState) => (\n <SelectionCell\n {...cellProps}\n rowId={row.id}\n selected={rowState.selected}\n onChange={actions.setSelected}\n selectionMode={selectionMode}\n disabled={rowState.disabled}\n />\n ),\n };\n\n return {\n selectionEnabled,\n selectedRowIds,\n selectionColumn,\n setSelected,\n };\n}\n"],"names":["React"],"mappings":"~~;;;;~~AAAA;~~AAeA~~,MAAM,mBAAmB,GAAmB,CAAC,EAAE,EAAE,MAAK,GAAG,CAAC;AAEpD,SAAU,YAAY,CAAC,EAC3B,aAAa,GAAG,UAAU,EAC1B,cAAc,EACd,aAAa,GACM,EAAA;AACnB,IAAA,MAAM,gBAAgB,GAAG,CAAC,CAAC,cAAc;IACzC,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,cAAc,IAAI,mBAAmB~~;;AAGjF~~,IAAA,MAAM,WAAW,GAAsB,~~CAAC~~,~~QAAQ~~,~~EAAE~~,~~KAAK~~,~~KAAI~~;~~AACzD~~,QAAA,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI;AAAE,YAAA,OAAO;~~AAClD~~,QAAA,IAAI,~~QAAQ~~,IAAI,~~aAAa~~,~~KAAK~~,QAAQ,~~EAAE;;AAE1C~~,~~YAAA~~,~~iBAAiB~~,~~CAAC~~,CAAC,KAAK,~~CAAC~~,~~CAAC~~;~~YAC1B~~;~~AACD~~;~~AACD~~,~~QAAA~~,IAAI,QAAQ,EAAE~~;;AAEZ~~,~~YAAA~~,~~IAAI~~,~~cAAc~~,~~CAAC~~,QAAQ,~~CAAC~~,KAAK~~,CAAC~~;~~gBAAE~~;~~YACpC~~,~~MAAM~~,MAAM,GAAG,~~CAAC~~,~~GAAG~~,~~cAAc~~,~~EAAE~~,KAAK,~~CAAC~~;~~YACzC~~,~~iBAAiB~~,~~CAAC~~,~~MAAM~~,CAAC;~~AAC1B~~;~~AAAM~~,~~aAAA;;AAEL~~,~~YAAA~~,~~MAAM~~,~~KAAK~~,~~GAAG~~,cAAc,CAAC,SAAS,~~CAAC~~,CAAC,~~EAAE,~~KAAK,~~EAAE~~,KAAK,KAAK~~,CAAC~~;~~YAC5D~~,IAAI,~~KAAK~~,~~GAAG~~,CAAC;~~gBAAE~~;~~AACf~~,~~YAAA~~,~~MAAM~~,~~MAAM,~~GAAG,CAAC,GAAG,cAAc,CAAC;~~AAClC~~,YAAA,~~MAAM~~,CAAC,MAAM,CAAC,KAAK,EAAE,~~CAAC~~,CAAC;~~YACvB~~,iBAAiB,CAAC,~~MAAM~~,CAAC;~~AAC1B~~;~~AACH~~,KAAC;;IAGD,MAAM,iBAAiB,GAAG,MAAK;AAC7B,QAAA,IAAI,cAAc,CAAC,MAAM,KAAK,aAAa,CAAC,MAAM,EAAE;YAClD,iBAAiB,CAAC,EAAE,CAAC;YACrB;AACD;QACD,iBAAiB,CAAC,aAAa,CAAC;AAClC,KAAC;;AAGD,IAAA,MAAM,eAAe,GAAiB;AACpC,QAAA,EAAE,EAAE,WAAW;AACf,QAAA,KAAK,EAAE,WAAW;AAClB,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,KAAK,EAAE,QAAQ;AACf,QAAA,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,CAAC,MAAM,EAAE,WAAW,MAChCA,cAAC,CAAA,aAAA,CAAA,eAAe,OACV,WAAW,EACf,QAAQ,EAAE,cAAc,CAAC,MAAM,KAAK,aAAa,CAAC,MAAM,EACxD,aAAa,EAAE,cAAc,CAAC,MAAM,GAAG,CAAC,IAAI,cAAc,CAAC,MAAM,GAAG,aAAa,CAAC,MAAM,EACxF,QAAQ,EAAE,iBAAiB,EAC3B,aAAa,EAAE,aAAa,EAAA,CAC5B,CACH;QACD,UAAU,EAAE,CAAC,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,MAC5CA,6BAAC,aAAa,EAAA,EAAA,GACR,SAAS,EACb,KAAK,EAAE,GAAG,CAAC,EAAE,EACb,QAAQ,EAAE,QAAQ,CAAC,QAAQ,EAC3B,QAAQ,EAAE,OAAO,CAAC,WAAW,EAC7B,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,QAAQ,CAAC,QAAQ,EAAA,CAC3B,CACH;KACF;IAED,OAAO;QACL,gBAAgB;QAChB,cAAc;QACd,eAAe;QACf,WAAW;KACZ;AACH;;;;"}
1	+ {"version":3,"file":"useSelection.js","sources":["../../../../src/components/DataTable/hooks/useSelection.tsx"],"sourcesContent":["/* eslint-disable react/destructuring-assignment */\n\nimport React, { useRef } from 'react';\n\nimport {\n ColumnConfig,\n RowId,\n SelectionState,\n SelectionMode,\n SetSelectedAction,\n SelectionIntent,\n} from '../types';\n\nimport { SelectionHeader } from '../components/SelectionHeader';\nimport { SelectionCell } from '../components/SelectionCell';\nimport { getRangeSelection } from '../utils/getRangeSelection';\n\nexport type UseSelectionConfig = {\n selectionMode?: SelectionMode;\n selectionState?: SelectionState;\n enabledRowIds: RowId[];\n};\n\nconst emptySelectionState: SelectionState = [[], () => {}];\n\nexport function useSelection({\n selectionMode = 'multiple',\n selectionState,\n enabledRowIds,\n}: UseSelectionConfig) {\n const selectionEnabled = !!selectionState;\n const [selectedRowIds, setSelectedRowIds] = selectionState \|\| emptySelectionState;\n const lastClickedRef = useRef<RowId \| null>(null);\n\n // TODO: Memoise this\n const setSelected: SetSelectedAction = (\n selected: boolean,\n rowId: RowId \| undefined,\n options?: { shiftKey?: boolean },\n ) => {\n if (rowId === undefined \|\| rowId === null) return; // Can't use falsey, must allow number 0\n\n let newRowIds;\n let intent: SelectionIntent;\n const isShiftPressed = options?.shiftKey;\n const lastClicked = lastClickedRef.current;\n\n if (isShiftPressed && lastClicked && selectionMode === 'multiple') {\n intent = 'range';\n } else if (selected && selectionMode === 'single') {\n intent = 'single';\n } else if (selected) {\n intent = 'add';\n } else {\n intent = 'remove';\n }\n\n switch (intent) {\n case 'range':\n newRowIds = getRangeSelection({\n rowId,\n lastClicked: lastClicked!,\n selected,\n enabledRowIds,\n selectedRowIds,\n });\n break;\n case 'single':\n newRowIds = [rowId];\n break;\n case 'add':\n if (selectedRowIds.includes(rowId)) return;\n newRowIds = [...selectedRowIds, rowId];\n break;\n case 'remove':\n newRowIds = selectedRowIds.filter((id) => id !== rowId);\n break;\n default:\n return;\n }\n\n setSelectedRowIds(newRowIds);\n lastClickedRef.current = rowId;\n };\n\n // TODO: Memoise this\n const toggleAllSelected = () => {\n if (selectedRowIds.length === enabledRowIds.length) {\n setSelectedRowIds([]);\n return;\n }\n setSelectedRowIds(enabledRowIds);\n };\n\n // TODO: Memoise this\n const selectionColumn: ColumnConfig = {\n id: 'selection',\n title: 'Selection',\n width: '40px',\n align: 'center',\n pinned: 'left',\n renderHeader: (column, headerProps) => (\n <SelectionHeader\n {...headerProps}\n selected={selectedRowIds.length === enabledRowIds.length}\n indeterminate={selectedRowIds.length > 0 && selectedRowIds.length < enabledRowIds.length}\n onChange={toggleAllSelected}\n selectionMode={selectionMode}\n />\n ),\n renderCell: (row, cellProps, actions, rowState) => (\n <SelectionCell\n {...cellProps}\n rowId={row.id}\n selected={rowState.selected}\n onChange={actions.setSelected}\n selectionMode={selectionMode}\n disabled={rowState.disabled}\n />\n ),\n };\n\n return {\n selectionEnabled,\n selectedRowIds,\n selectionColumn,\n setSelected,\n };\n}\n"],"names":["React"],"mappings":"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"}

package/dist/components/DataTable/types.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"types.cjs","sources":["../../../src/components/DataTable/types.ts"],"sourcesContent":["import { ReactElement, ReactNode } from 'react';\nimport { Size } from '../Stack/types';\n\nexport type BorderType = 'all' \| 'vertical' \| 'none';\n\nexport type ScrollPosition = 'none' \| 'start' \| 'middle' \| 'end';\n\nexport type RowState = {\n selected: boolean;\n expanded: boolean;\n disabled: boolean;\n};\n\n/* Columns /\n\nexport type ColumnId = string \| number;\nexport type ColumnAlignment = 'left' \| 'center' \| 'right';\nexport type ColumnOverflow = 'none' \| 'wrap' \| 'truncate';\nexport type ColumnPinned = 'left' \| 'right' \| 'none';\nexport type ColumnSpacing = Size;\nexport type ColumnWidth = number \| string;\nexport type ColumnWidthFixed = ColumnWidth;\n\nexport type ColumnWidthBounded = {\n min?: ColumnWidth;\n max?: ColumnWidth;\n};\n\nexport type ColumnConfig = {\n id: ColumnId;\n // Options\n align?: ColumnAlignment;\n hidden?: boolean;\n iconSlot?: ReactElement; // Size[5]\n pinned?: ColumnPinned;\n sortable?: boolean;\n spacing?: ColumnSpacing;\n span?: number;\n title?: string;\n tooltip?: string;\n width?: ColumnWidthFixed \| ColumnWidthBounded;\n resizeMinWidth?: number;\n // Renderers\n renderCell: CellRenderer;\n renderFooter?: FooterRenderer;\n renderHeader?: HeaderRenderer;\n renderNestedCell?: NestedCellRenderer;\n};\nexport type ColumnConfigs = Array<ColumnConfig>;\n\n/ Sorting /\n\nexport enum SortDirection {\n ascending = 'ascending',\n descending = 'descending',\n}\n\nexport type SortDirectionType = keyof typeof SortDirection;\n\nexport type SortState = {\n columnId: ColumnId;\n direction: SortDirection;\n};\n\nexport type SortChangeHandler = (sortState: SortState) => void;\n\nexport type ColumnWidthState = {\n columnId: ColumnId;\n width: number \| string;\n};\n\nexport type ColumnWidthHandler = (columnWidthState: ColumnWidthState) => ColumnWidthsType \| void;\n\n/ Data /\n\nexport type RowId = number \| string;\n\nexport interface NestedTableRow {\n id: RowId;\n data: any;\n}\n\nexport type NestedTableRows = Array<NestedTableRow>;\n\nexport interface TableRow {\n id: RowId;\n data: any;\n nestedRows?: NestedTableRows;\n accentColor?: string;\n e2eClassName?: string;\n}\nexport type TableRows = Array<TableRow>;\n\n/ Header Props /\n\nexport interface HeaderProps extends React.HtmlHTMLAttributes<HTMLTableCellElement> {\n id: string;\n align?: ColumnAlignment;\n spacing?: ColumnSpacing;\n span?: number;\n zIndex?: number;\n}\n\nexport interface RendererHeaderProps extends HeaderProps {\n key: string;\n 'data-columnid'?: string;\n}\nexport interface SelectionHeaderProps extends Omit<HeaderProps, 'onChange'> {\n selected: boolean;\n indeterminate: boolean;\n onChange: (selected: boolean, value: RowId \| undefined) => void;\n selectionMode: SelectionMode;\n}\n\n/ Renderers /\n\nexport type HeaderRenderer = (column: ColumnConfig, headerProps: RendererHeaderProps) => ReactNode;\nexport type FooterRenderer = (column: ColumnConfig, footerProps: object) => ReactNode;\n\nexport type CellRenderer = (\n row: TableRow,\n cellProps: object,\n actions: TableActions,\n rowState: RowState,\n) => ReactNode;\n\ntype ParentRowState = RowState;\nexport type NestedCellRenderer = (\n nestedRow: NestedTableRow,\n cellProps: object,\n parentRowState: ParentRowState,\n) => ReactNode;\n\n/ Actions /\n\nexport type SetSelectedAction = (selected: boolean, rowId: RowId \| undefined) => void;\nexport type SetExpandedAction = (expanded: boolean, rowId: RowId \| undefined) => void;\n\nexport type TableActions = {\n setSelected: SetSelectedAction;\n setExpanded: SetExpandedAction;\n};\n\n/ Props /\n\nexport type BorderMode = 'full' \| 'vertical' \| 'none';\n\nexport type CustomState = {\n iconSlot: ReactElement;\n heading: string;\n subheading?: string;\n};\n\nexport type SelectionMode = 'single' \| 'multiple';\n\nexport type SelectionState = [RowId[], (rowIds: RowId[]) => void];\n\nexport type StripingMode = 'row' \| 'nested';\n\nexport interface DataTableProps {\n /* slot for the action bar above the table /\n actionBarSlot?: ReactNode;\n /* Type of border for the table /\n borderMode?: BorderMode;\n /* Columns for the table /\n columns: ColumnConfigs;\n /* Disable specific rows of the table /\n disabledRowIds?: Array<RowId>;\n /* Enable sticky header /\n enableStickyHeader?: boolean;\n /* Render a custom empty state for the table /\n emptyState?: CustomState;\n /* The rows that can be expanded to show more information /\n expandedRowIds?: Array<RowId>;\n /* Renders a loading indicator inside the table /\n loading?: boolean;\n /* Number of rows to display when loading /\n loadingRowCount?: number;\n /* OnChange handler for sorting functionality /\n onChangeSort?: SortChangeHandler;\n /* Rows of data to be displayed in the table /\n rows: TableRows;\n /* Decide how many rows can be selected /\n selectionMode?: SelectionMode;\n /* The current selected rows /\n selectionState?: SelectionState;\n /* Handler to expand specific row /\n setExpanded?: SetExpandedAction;\n /* State of each column's sorting /\n sortState?: SortState;\n /* Renders alternate row a slightly different colour /\n stripingMode?: StripingMode;\n /* Enable column resizing /\n resizeableColumns?: boolean;\n /* Callback for when columns are resized */\n onResizeColumns?: (columnWidths: ResizeColumnData) => void;\n columnWidths?: ColumnWidthsType;\n\n stickyHeaderTop?: number;\n}\n\nexport type ColumnWidthsType = {\n [key: ColumnId]: ColumnWidthType;\n};\n\nexport type ColumnWidthType = ColumnWidthFixed \| ColumnWidthBounded \| undefined;\n\nexport type ResizeColumnData = ColumnWidthsType;\n"],"names":["SortDirection"],"mappings":";;AAkDA;AAEYA;AAAZ,CAAA,UAAY,aAAa,EAAA;AACvB,IAAA,aAAA,CAAA,WAAA,CAAA,GAAA,WAAuB;AACvB,IAAA,aAAA,CAAA,YAAA,CAAA,GAAA,YAAyB;AAC3B,CAAC,EAHWA,qBAAa,KAAbA,qBAAa,GAGxB,EAAA,CAAA,CAAA;;"}
1	+ {"version":3,"file":"types.cjs","sources":["../../../src/components/DataTable/types.ts"],"sourcesContent":["import { ReactElement, ReactNode } from 'react';\nimport { Size } from '../Stack/types';\n\nexport type BorderType = 'all' \| 'vertical' \| 'none';\n\nexport type ScrollPosition = 'none' \| 'start' \| 'middle' \| 'end';\n\nexport type RowState = {\n selected: boolean;\n expanded: boolean;\n disabled: boolean;\n};\n\n/* Columns /\n\nexport type ColumnId = string \| number;\nexport type ColumnAlignment = 'left' \| 'center' \| 'right';\nexport type ColumnOverflow = 'none' \| 'wrap' \| 'truncate';\nexport type ColumnPinned = 'left' \| 'right' \| 'none';\nexport type ColumnSpacing = Size;\nexport type ColumnWidth = number \| string;\nexport type ColumnWidthFixed = ColumnWidth;\n\nexport type ColumnWidthBounded = {\n min?: ColumnWidth;\n max?: ColumnWidth;\n};\n\nexport type ColumnConfig = {\n id: ColumnId;\n // Options\n align?: ColumnAlignment;\n hidden?: boolean;\n iconSlot?: ReactElement; // Size[5]\n pinned?: ColumnPinned;\n sortable?: boolean;\n spacing?: ColumnSpacing;\n span?: number;\n title?: string;\n tooltip?: string;\n width?: ColumnWidthFixed \| ColumnWidthBounded;\n resizeMinWidth?: number;\n // Renderers\n renderCell: CellRenderer;\n renderFooter?: FooterRenderer;\n renderHeader?: HeaderRenderer;\n renderNestedCell?: NestedCellRenderer;\n};\nexport type ColumnConfigs = Array<ColumnConfig>;\n\n/ Sorting /\n\nexport enum SortDirection {\n ascending = 'ascending',\n descending = 'descending',\n}\n\nexport type SortDirectionType = keyof typeof SortDirection;\n\nexport type SortState = {\n columnId: ColumnId;\n direction: SortDirection;\n};\n\nexport type SortChangeHandler = (sortState: SortState) => void;\n\nexport type ColumnWidthState = {\n columnId: ColumnId;\n width: number \| string;\n};\n\nexport type ColumnWidthHandler = (columnWidthState: ColumnWidthState) => ColumnWidthsType \| void;\n\n/ Data /\n\nexport type RowId = number \| string;\n\nexport interface NestedTableRow {\n id: RowId;\n data: any;\n}\n\nexport type NestedTableRows = Array<NestedTableRow>;\n\nexport interface TableRow {\n id: RowId;\n data: any;\n nestedRows?: NestedTableRows;\n accentColor?: string;\n e2eClassName?: string;\n}\nexport type TableRows = Array<TableRow>;\n\n/ Header Props /\n\nexport interface HeaderProps extends React.HtmlHTMLAttributes<HTMLTableCellElement> {\n id: string;\n align?: ColumnAlignment;\n spacing?: ColumnSpacing;\n span?: number;\n zIndex?: number;\n}\n\nexport interface RendererHeaderProps extends HeaderProps {\n key: string;\n 'data-columnid'?: string;\n}\nexport interface SelectionHeaderProps extends Omit<HeaderProps, 'onChange'> {\n selected: boolean;\n indeterminate: boolean;\n onChange: (selected: boolean, value: RowId \| undefined) => void;\n selectionMode: SelectionMode;\n}\n\n/ Renderers /\n\nexport type HeaderRenderer = (column: ColumnConfig, headerProps: RendererHeaderProps) => ReactNode;\nexport type FooterRenderer = (column: ColumnConfig, footerProps: object) => ReactNode;\n\nexport type CellRenderer = (\n row: TableRow,\n cellProps: object,\n actions: TableActions,\n rowState: RowState,\n) => ReactNode;\n\ntype ParentRowState = RowState;\nexport type NestedCellRenderer = (\n nestedRow: NestedTableRow,\n cellProps: object,\n parentRowState: ParentRowState,\n) => ReactNode;\n\n/ Actions /\n\nexport type SetSelectedAction = (\n selected: boolean,\n rowId: RowId \| undefined,\n options?: { shiftKey?: boolean },\n) => void;\nexport type SetExpandedAction = (expanded: boolean, rowId: RowId \| undefined) => void;\n\nexport type TableActions = {\n setSelected: SetSelectedAction;\n setExpanded: SetExpandedAction;\n};\n\n/ Props /\n\nexport type BorderMode = 'full' \| 'vertical' \| 'none';\n\nexport type CustomState = {\n iconSlot: ReactElement;\n heading: string;\n subheading?: string;\n};\n\nexport type SelectionMode = 'single' \| 'multiple';\n\nexport type SelectionIntent = 'range' \| 'single' \| 'add' \| 'remove';\n\nexport type SelectionState = [RowId[], (rowIds: RowId[]) => void];\n\nexport type StripingMode = 'row' \| 'nested';\n\nexport interface DataTableProps {\n /* slot for the action bar above the table /\n actionBarSlot?: ReactNode;\n /* Type of border for the table /\n borderMode?: BorderMode;\n /* Columns for the table /\n columns: ColumnConfigs;\n /* Disable specific rows of the table /\n disabledRowIds?: Array<RowId>;\n /* Enable sticky header /\n enableStickyHeader?: boolean;\n /* Render a custom empty state for the table /\n emptyState?: CustomState;\n /* The rows that can be expanded to show more information /\n expandedRowIds?: Array<RowId>;\n /* Renders a loading indicator inside the table /\n loading?: boolean;\n /* Number of rows to display when loading /\n loadingRowCount?: number;\n /* OnChange handler for sorting functionality /\n onChangeSort?: SortChangeHandler;\n /* Rows of data to be displayed in the table /\n rows: TableRows;\n /* Decide how many rows can be selected /\n selectionMode?: SelectionMode;\n /* The current selected rows /\n selectionState?: SelectionState;\n /* Handler to expand specific row /\n setExpanded?: SetExpandedAction;\n /* State of each column's sorting /\n sortState?: SortState;\n /* Renders alternate row a slightly different colour /\n stripingMode?: StripingMode;\n /* Enable column resizing /\n resizeableColumns?: boolean;\n /* Callback for when columns are resized */\n onResizeColumns?: (columnWidths: ResizeColumnData) => void;\n columnWidths?: ColumnWidthsType;\n\n stickyHeaderTop?: number;\n}\n\nexport type ColumnWidthsType = {\n [key: ColumnId]: ColumnWidthType;\n};\n\nexport type ColumnWidthType = ColumnWidthFixed \| ColumnWidthBounded \| undefined;\n\nexport type ResizeColumnData = ColumnWidthsType;\n"],"names":["SortDirection"],"mappings":";;AAkDA;AAEYA;AAAZ,CAAA,UAAY,aAAa,EAAA;AACvB,IAAA,aAAA,CAAA,WAAA,CAAA,GAAA,WAAuB;AACvB,IAAA,aAAA,CAAA,YAAA,CAAA,GAAA,YAAyB;AAC3B,CAAC,EAHWA,qBAAa,KAAbA,qBAAa,GAGxB,EAAA,CAAA,CAAA;;"}

package/dist/components/DataTable/types.d.ts CHANGED Viewed

@@ -88,7 +88,9 @@ export type FooterRenderer = (column: ColumnConfig, footerProps: object) => Reac
 export type CellRenderer = (row: TableRow, cellProps: object, actions: TableActions, rowState: RowState) => ReactNode;
 type ParentRowState = RowState;
 export type NestedCellRenderer = (nestedRow: NestedTableRow, cellProps: object, parentRowState: ParentRowState) => ReactNode;
-export type SetSelectedAction = (selected: boolean, rowId: RowId | undefined) => void;
+export type SetSelectedAction = (selected: boolean, rowId: RowId | undefined, options?: {
+    shiftKey?: boolean;
+}) => void;
 export type SetExpandedAction = (expanded: boolean, rowId: RowId | undefined) => void;
 export type TableActions = {
     setSelected: SetSelectedAction;
@@ -101,6 +103,7 @@ export type CustomState = {
     subheading?: string;
 };
 export type SelectionMode = 'single' | 'multiple';
+export type SelectionIntent = 'range' | 'single' | 'add' | 'remove';
 export type SelectionState = [RowId[], (rowIds: RowId[]) => void];
 export type StripingMode = 'row' | 'nested';
 export interface DataTableProps {

package/dist/components/DataTable/types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"types.js","sources":["../../../src/components/DataTable/types.ts"],"sourcesContent":["import { ReactElement, ReactNode } from 'react';\nimport { Size } from '../Stack/types';\n\nexport type BorderType = 'all' \| 'vertical' \| 'none';\n\nexport type ScrollPosition = 'none' \| 'start' \| 'middle' \| 'end';\n\nexport type RowState = {\n selected: boolean;\n expanded: boolean;\n disabled: boolean;\n};\n\n/* Columns /\n\nexport type ColumnId = string \| number;\nexport type ColumnAlignment = 'left' \| 'center' \| 'right';\nexport type ColumnOverflow = 'none' \| 'wrap' \| 'truncate';\nexport type ColumnPinned = 'left' \| 'right' \| 'none';\nexport type ColumnSpacing = Size;\nexport type ColumnWidth = number \| string;\nexport type ColumnWidthFixed = ColumnWidth;\n\nexport type ColumnWidthBounded = {\n min?: ColumnWidth;\n max?: ColumnWidth;\n};\n\nexport type ColumnConfig = {\n id: ColumnId;\n // Options\n align?: ColumnAlignment;\n hidden?: boolean;\n iconSlot?: ReactElement; // Size[5]\n pinned?: ColumnPinned;\n sortable?: boolean;\n spacing?: ColumnSpacing;\n span?: number;\n title?: string;\n tooltip?: string;\n width?: ColumnWidthFixed \| ColumnWidthBounded;\n resizeMinWidth?: number;\n // Renderers\n renderCell: CellRenderer;\n renderFooter?: FooterRenderer;\n renderHeader?: HeaderRenderer;\n renderNestedCell?: NestedCellRenderer;\n};\nexport type ColumnConfigs = Array<ColumnConfig>;\n\n/ Sorting /\n\nexport enum SortDirection {\n ascending = 'ascending',\n descending = 'descending',\n}\n\nexport type SortDirectionType = keyof typeof SortDirection;\n\nexport type SortState = {\n columnId: ColumnId;\n direction: SortDirection;\n};\n\nexport type SortChangeHandler = (sortState: SortState) => void;\n\nexport type ColumnWidthState = {\n columnId: ColumnId;\n width: number \| string;\n};\n\nexport type ColumnWidthHandler = (columnWidthState: ColumnWidthState) => ColumnWidthsType \| void;\n\n/ Data /\n\nexport type RowId = number \| string;\n\nexport interface NestedTableRow {\n id: RowId;\n data: any;\n}\n\nexport type NestedTableRows = Array<NestedTableRow>;\n\nexport interface TableRow {\n id: RowId;\n data: any;\n nestedRows?: NestedTableRows;\n accentColor?: string;\n e2eClassName?: string;\n}\nexport type TableRows = Array<TableRow>;\n\n/ Header Props /\n\nexport interface HeaderProps extends React.HtmlHTMLAttributes<HTMLTableCellElement> {\n id: string;\n align?: ColumnAlignment;\n spacing?: ColumnSpacing;\n span?: number;\n zIndex?: number;\n}\n\nexport interface RendererHeaderProps extends HeaderProps {\n key: string;\n 'data-columnid'?: string;\n}\nexport interface SelectionHeaderProps extends Omit<HeaderProps, 'onChange'> {\n selected: boolean;\n indeterminate: boolean;\n onChange: (selected: boolean, value: RowId \| undefined) => void;\n selectionMode: SelectionMode;\n}\n\n/ Renderers /\n\nexport type HeaderRenderer = (column: ColumnConfig, headerProps: RendererHeaderProps) => ReactNode;\nexport type FooterRenderer = (column: ColumnConfig, footerProps: object) => ReactNode;\n\nexport type CellRenderer = (\n row: TableRow,\n cellProps: object,\n actions: TableActions,\n rowState: RowState,\n) => ReactNode;\n\ntype ParentRowState = RowState;\nexport type NestedCellRenderer = (\n nestedRow: NestedTableRow,\n cellProps: object,\n parentRowState: ParentRowState,\n) => ReactNode;\n\n/ Actions /\n\nexport type SetSelectedAction = (selected: boolean, rowId: RowId \| undefined) => void;\nexport type SetExpandedAction = (expanded: boolean, rowId: RowId \| undefined) => void;\n\nexport type TableActions = {\n setSelected: SetSelectedAction;\n setExpanded: SetExpandedAction;\n};\n\n/ Props /\n\nexport type BorderMode = 'full' \| 'vertical' \| 'none';\n\nexport type CustomState = {\n iconSlot: ReactElement;\n heading: string;\n subheading?: string;\n};\n\nexport type SelectionMode = 'single' \| 'multiple';\n\nexport type SelectionState = [RowId[], (rowIds: RowId[]) => void];\n\nexport type StripingMode = 'row' \| 'nested';\n\nexport interface DataTableProps {\n /* slot for the action bar above the table /\n actionBarSlot?: ReactNode;\n /* Type of border for the table /\n borderMode?: BorderMode;\n /* Columns for the table /\n columns: ColumnConfigs;\n /* Disable specific rows of the table /\n disabledRowIds?: Array<RowId>;\n /* Enable sticky header /\n enableStickyHeader?: boolean;\n /* Render a custom empty state for the table /\n emptyState?: CustomState;\n /* The rows that can be expanded to show more information /\n expandedRowIds?: Array<RowId>;\n /* Renders a loading indicator inside the table /\n loading?: boolean;\n /* Number of rows to display when loading /\n loadingRowCount?: number;\n /* OnChange handler for sorting functionality /\n onChangeSort?: SortChangeHandler;\n /* Rows of data to be displayed in the table /\n rows: TableRows;\n /* Decide how many rows can be selected /\n selectionMode?: SelectionMode;\n /* The current selected rows /\n selectionState?: SelectionState;\n /* Handler to expand specific row /\n setExpanded?: SetExpandedAction;\n /* State of each column's sorting /\n sortState?: SortState;\n /* Renders alternate row a slightly different colour /\n stripingMode?: StripingMode;\n /* Enable column resizing /\n resizeableColumns?: boolean;\n /* Callback for when columns are resized */\n onResizeColumns?: (columnWidths: ResizeColumnData) => void;\n columnWidths?: ColumnWidthsType;\n\n stickyHeaderTop?: number;\n}\n\nexport type ColumnWidthsType = {\n [key: ColumnId]: ColumnWidthType;\n};\n\nexport type ColumnWidthType = ColumnWidthFixed \| ColumnWidthBounded \| undefined;\n\nexport type ResizeColumnData = ColumnWidthsType;\n"],"names":[],"mappings":"AAkDA;IAEY;AAAZ,CAAA,UAAY,aAAa,EAAA;AACvB,IAAA,aAAA,CAAA,WAAA,CAAA,GAAA,WAAuB;AACvB,IAAA,aAAA,CAAA,YAAA,CAAA,GAAA,YAAyB;AAC3B,CAAC,EAHW,aAAa,KAAb,aAAa,GAGxB,EAAA,CAAA,CAAA;;;;"}
1	+ {"version":3,"file":"types.js","sources":["../../../src/components/DataTable/types.ts"],"sourcesContent":["import { ReactElement, ReactNode } from 'react';\nimport { Size } from '../Stack/types';\n\nexport type BorderType = 'all' \| 'vertical' \| 'none';\n\nexport type ScrollPosition = 'none' \| 'start' \| 'middle' \| 'end';\n\nexport type RowState = {\n selected: boolean;\n expanded: boolean;\n disabled: boolean;\n};\n\n/* Columns /\n\nexport type ColumnId = string \| number;\nexport type ColumnAlignment = 'left' \| 'center' \| 'right';\nexport type ColumnOverflow = 'none' \| 'wrap' \| 'truncate';\nexport type ColumnPinned = 'left' \| 'right' \| 'none';\nexport type ColumnSpacing = Size;\nexport type ColumnWidth = number \| string;\nexport type ColumnWidthFixed = ColumnWidth;\n\nexport type ColumnWidthBounded = {\n min?: ColumnWidth;\n max?: ColumnWidth;\n};\n\nexport type ColumnConfig = {\n id: ColumnId;\n // Options\n align?: ColumnAlignment;\n hidden?: boolean;\n iconSlot?: ReactElement; // Size[5]\n pinned?: ColumnPinned;\n sortable?: boolean;\n spacing?: ColumnSpacing;\n span?: number;\n title?: string;\n tooltip?: string;\n width?: ColumnWidthFixed \| ColumnWidthBounded;\n resizeMinWidth?: number;\n // Renderers\n renderCell: CellRenderer;\n renderFooter?: FooterRenderer;\n renderHeader?: HeaderRenderer;\n renderNestedCell?: NestedCellRenderer;\n};\nexport type ColumnConfigs = Array<ColumnConfig>;\n\n/ Sorting /\n\nexport enum SortDirection {\n ascending = 'ascending',\n descending = 'descending',\n}\n\nexport type SortDirectionType = keyof typeof SortDirection;\n\nexport type SortState = {\n columnId: ColumnId;\n direction: SortDirection;\n};\n\nexport type SortChangeHandler = (sortState: SortState) => void;\n\nexport type ColumnWidthState = {\n columnId: ColumnId;\n width: number \| string;\n};\n\nexport type ColumnWidthHandler = (columnWidthState: ColumnWidthState) => ColumnWidthsType \| void;\n\n/ Data /\n\nexport type RowId = number \| string;\n\nexport interface NestedTableRow {\n id: RowId;\n data: any;\n}\n\nexport type NestedTableRows = Array<NestedTableRow>;\n\nexport interface TableRow {\n id: RowId;\n data: any;\n nestedRows?: NestedTableRows;\n accentColor?: string;\n e2eClassName?: string;\n}\nexport type TableRows = Array<TableRow>;\n\n/ Header Props /\n\nexport interface HeaderProps extends React.HtmlHTMLAttributes<HTMLTableCellElement> {\n id: string;\n align?: ColumnAlignment;\n spacing?: ColumnSpacing;\n span?: number;\n zIndex?: number;\n}\n\nexport interface RendererHeaderProps extends HeaderProps {\n key: string;\n 'data-columnid'?: string;\n}\nexport interface SelectionHeaderProps extends Omit<HeaderProps, 'onChange'> {\n selected: boolean;\n indeterminate: boolean;\n onChange: (selected: boolean, value: RowId \| undefined) => void;\n selectionMode: SelectionMode;\n}\n\n/ Renderers /\n\nexport type HeaderRenderer = (column: ColumnConfig, headerProps: RendererHeaderProps) => ReactNode;\nexport type FooterRenderer = (column: ColumnConfig, footerProps: object) => ReactNode;\n\nexport type CellRenderer = (\n row: TableRow,\n cellProps: object,\n actions: TableActions,\n rowState: RowState,\n) => ReactNode;\n\ntype ParentRowState = RowState;\nexport type NestedCellRenderer = (\n nestedRow: NestedTableRow,\n cellProps: object,\n parentRowState: ParentRowState,\n) => ReactNode;\n\n/ Actions /\n\nexport type SetSelectedAction = (\n selected: boolean,\n rowId: RowId \| undefined,\n options?: { shiftKey?: boolean },\n) => void;\nexport type SetExpandedAction = (expanded: boolean, rowId: RowId \| undefined) => void;\n\nexport type TableActions = {\n setSelected: SetSelectedAction;\n setExpanded: SetExpandedAction;\n};\n\n/ Props /\n\nexport type BorderMode = 'full' \| 'vertical' \| 'none';\n\nexport type CustomState = {\n iconSlot: ReactElement;\n heading: string;\n subheading?: string;\n};\n\nexport type SelectionMode = 'single' \| 'multiple';\n\nexport type SelectionIntent = 'range' \| 'single' \| 'add' \| 'remove';\n\nexport type SelectionState = [RowId[], (rowIds: RowId[]) => void];\n\nexport type StripingMode = 'row' \| 'nested';\n\nexport interface DataTableProps {\n /* slot for the action bar above the table /\n actionBarSlot?: ReactNode;\n /* Type of border for the table /\n borderMode?: BorderMode;\n /* Columns for the table /\n columns: ColumnConfigs;\n /* Disable specific rows of the table /\n disabledRowIds?: Array<RowId>;\n /* Enable sticky header /\n enableStickyHeader?: boolean;\n /* Render a custom empty state for the table /\n emptyState?: CustomState;\n /* The rows that can be expanded to show more information /\n expandedRowIds?: Array<RowId>;\n /* Renders a loading indicator inside the table /\n loading?: boolean;\n /* Number of rows to display when loading /\n loadingRowCount?: number;\n /* OnChange handler for sorting functionality /\n onChangeSort?: SortChangeHandler;\n /* Rows of data to be displayed in the table /\n rows: TableRows;\n /* Decide how many rows can be selected /\n selectionMode?: SelectionMode;\n /* The current selected rows /\n selectionState?: SelectionState;\n /* Handler to expand specific row /\n setExpanded?: SetExpandedAction;\n /* State of each column's sorting /\n sortState?: SortState;\n /* Renders alternate row a slightly different colour /\n stripingMode?: StripingMode;\n /* Enable column resizing /\n resizeableColumns?: boolean;\n /* Callback for when columns are resized */\n onResizeColumns?: (columnWidths: ResizeColumnData) => void;\n columnWidths?: ColumnWidthsType;\n\n stickyHeaderTop?: number;\n}\n\nexport type ColumnWidthsType = {\n [key: ColumnId]: ColumnWidthType;\n};\n\nexport type ColumnWidthType = ColumnWidthFixed \| ColumnWidthBounded \| undefined;\n\nexport type ResizeColumnData = ColumnWidthsType;\n"],"names":[],"mappings":"AAkDA;IAEY;AAAZ,CAAA,UAAY,aAAa,EAAA;AACvB,IAAA,aAAA,CAAA,WAAA,CAAA,GAAA,WAAuB;AACvB,IAAA,aAAA,CAAA,YAAA,CAAA,GAAA,YAAyB;AAC3B,CAAC,EAHW,aAAa,KAAb,aAAa,GAGxB,EAAA,CAAA,CAAA;;;;"}

package/dist/components/DataTable/utils/getRangeSelection.cjs ADDED Viewed

@@ -0,0 +1,18 @@
+'use strict';
+function getRangeSelection({ rowId, lastClicked, selected, enabledRowIds, selectedRowIds, }) {
+    const currentIndex = enabledRowIds.indexOf(rowId);
+    const lastSelectedIndex = enabledRowIds.indexOf(lastClicked);
+    if (currentIndex < 0 || lastSelectedIndex < 0)
+        return selectedRowIds;
+    const start = Math.min(lastSelectedIndex, currentIndex);
+    const end = Math.max(lastSelectedIndex, currentIndex);
+    const rangeIds = enabledRowIds.slice(start, end + 1);
+    if (selected) {
+        return [...new Set([...selectedRowIds, ...rangeIds])];
+    }
+    return selectedRowIds.filter((id) => !rangeIds.includes(id));
+}
+exports.getRangeSelection = getRangeSelection;
+//# sourceMappingURL=getRangeSelection.cjs.map

package/dist/components/DataTable/utils/getRangeSelection.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"getRangeSelection.cjs","sources":["../../../../src/components/DataTable/utils/getRangeSelection.ts"],"sourcesContent":["import { RowId } from '../types';\n\ntype RangeSelectionParameters = {\n rowId: RowId;\n lastClicked: RowId;\n selected: boolean;\n enabledRowIds: RowId[];\n selectedRowIds: RowId[];\n};\n\nexport function getRangeSelection({\n rowId,\n lastClicked,\n selected,\n enabledRowIds,\n selectedRowIds,\n}: RangeSelectionParameters): RowId[] {\n const currentIndex = enabledRowIds.indexOf(rowId);\n const lastSelectedIndex = enabledRowIds.indexOf(lastClicked);\n\n if (currentIndex < 0 || lastSelectedIndex < 0) return selectedRowIds;\n\n const start = Math.min(lastSelectedIndex, currentIndex);\n const end = Math.max(lastSelectedIndex, currentIndex);\n const rangeIds = enabledRowIds.slice(start, end + 1);\n\n if (selected) {\n return [...new Set([...selectedRowIds, ...rangeIds])];\n }\n return selectedRowIds.filter((id) => !rangeIds.includes(id));\n}\n"],"names":[],"mappings":";;AAUgB,SAAA,iBAAiB,CAAC,EAChC,KAAK,EACL,WAAW,EACX,QAAQ,EACR,aAAa,EACb,cAAc,GACW,EAAA;IACzB,MAAM,YAAY,GAAG,aAAa,CAAC,OAAO,CAAC,KAAK,CAAC;IACjD,MAAM,iBAAiB,GAAG,aAAa,CAAC,OAAO,CAAC,WAAW,CAAC;AAE5D,IAAA,IAAI,YAAY,GAAG,CAAC,IAAI,iBAAiB,GAAG,CAAC;AAAE,QAAA,OAAO,cAAc;IAEpE,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,EAAE,YAAY,CAAC;IACvD,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,EAAE,YAAY,CAAC;AACrD,IAAA,MAAM,QAAQ,GAAG,aAAa,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,GAAG,CAAC,CAAC;AAEpD,IAAA,IAAI,QAAQ,EAAE;AACZ,QAAA,OAAO,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC,GAAG,cAAc,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAC;AACtD;AACD,IAAA,OAAO,cAAc,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;AAC9D;;;;"}

package/dist/components/DataTable/utils/getRangeSelection.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import { RowId } from '../types';
+type RangeSelectionParameters = {
+    rowId: RowId;
+    lastClicked: RowId;
+    selected: boolean;
+    enabledRowIds: RowId[];
+    selectedRowIds: RowId[];
+};
+export declare function getRangeSelection({ rowId, lastClicked, selected, enabledRowIds, selectedRowIds, }: RangeSelectionParameters): RowId[];
+export {};

package/dist/components/DataTable/utils/getRangeSelection.js ADDED Viewed

@@ -0,0 +1,16 @@
+function getRangeSelection({ rowId, lastClicked, selected, enabledRowIds, selectedRowIds, }) {
+    const currentIndex = enabledRowIds.indexOf(rowId);
+    const lastSelectedIndex = enabledRowIds.indexOf(lastClicked);
+    if (currentIndex < 0 || lastSelectedIndex < 0)
+        return selectedRowIds;
+    const start = Math.min(lastSelectedIndex, currentIndex);
+    const end = Math.max(lastSelectedIndex, currentIndex);
+    const rangeIds = enabledRowIds.slice(start, end + 1);
+    if (selected) {
+        return [...new Set([...selectedRowIds, ...rangeIds])];
+    }
+    return selectedRowIds.filter((id) => !rangeIds.includes(id));
+}
+export { getRangeSelection };
+//# sourceMappingURL=getRangeSelection.js.map

package/dist/components/DataTable/utils/getRangeSelection.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"getRangeSelection.js","sources":["../../../../src/components/DataTable/utils/getRangeSelection.ts"],"sourcesContent":["import { RowId } from '../types';\n\ntype RangeSelectionParameters = {\n rowId: RowId;\n lastClicked: RowId;\n selected: boolean;\n enabledRowIds: RowId[];\n selectedRowIds: RowId[];\n};\n\nexport function getRangeSelection({\n rowId,\n lastClicked,\n selected,\n enabledRowIds,\n selectedRowIds,\n}: RangeSelectionParameters): RowId[] {\n const currentIndex = enabledRowIds.indexOf(rowId);\n const lastSelectedIndex = enabledRowIds.indexOf(lastClicked);\n\n if (currentIndex < 0 || lastSelectedIndex < 0) return selectedRowIds;\n\n const start = Math.min(lastSelectedIndex, currentIndex);\n const end = Math.max(lastSelectedIndex, currentIndex);\n const rangeIds = enabledRowIds.slice(start, end + 1);\n\n if (selected) {\n return [...new Set([...selectedRowIds, ...rangeIds])];\n }\n return selectedRowIds.filter((id) => !rangeIds.includes(id));\n}\n"],"names":[],"mappings":"AAUgB,SAAA,iBAAiB,CAAC,EAChC,KAAK,EACL,WAAW,EACX,QAAQ,EACR,aAAa,EACb,cAAc,GACW,EAAA;IACzB,MAAM,YAAY,GAAG,aAAa,CAAC,OAAO,CAAC,KAAK,CAAC;IACjD,MAAM,iBAAiB,GAAG,aAAa,CAAC,OAAO,CAAC,WAAW,CAAC;AAE5D,IAAA,IAAI,YAAY,GAAG,CAAC,IAAI,iBAAiB,GAAG,CAAC;AAAE,QAAA,OAAO,cAAc;IAEpE,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,EAAE,YAAY,CAAC;IACvD,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,EAAE,YAAY,CAAC;AACrD,IAAA,MAAM,QAAQ,GAAG,aAAa,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,GAAG,CAAC,CAAC;AAEpD,IAAA,IAAI,QAAQ,EAAE;AACZ,QAAA,OAAO,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC,GAAG,cAAc,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAC;AACtD;AACD,IAAA,OAAO,cAAc,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;AAC9D;;;;"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@veeqo/ui",
-  "version": "13.6.0",
+  "version": "13.7.0",
   "description": "New optimised component library for Veeqo.",
   "author": "Robert Wealthall",
   "license": "ISC",