@veeqo/ui 13.12.3-beta-1 → 13.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Avatar/Avatar.cjs +1 -0
- package/dist/components/Avatar/Avatar.cjs.map +1 -1
- package/dist/components/Avatar/Avatar.js +1 -0
- package/dist/components/Avatar/Avatar.js.map +1 -1
- package/dist/components/DataGrid/components/Body/BodyCell/hooks/useExpandableCell.cjs +10 -7
- package/dist/components/DataGrid/components/Body/BodyCell/hooks/useExpandableCell.cjs.map +1 -1
- package/dist/components/DataGrid/components/Body/BodyCell/hooks/useExpandableCell.js +10 -7
- package/dist/components/DataGrid/components/Body/BodyCell/hooks/useExpandableCell.js.map +1 -1
- package/dist/components/DataGrid/types/ColumnDefinition.d.ts +1 -0
- package/dist/components/DataGrid/types/index.d.ts +1 -1
- package/dist/components/DataGrid/utils/ColumnMapper.cjs +3 -0
- package/dist/components/DataGrid/utils/ColumnMapper.cjs.map +1 -1
- package/dist/components/DataGrid/utils/ColumnMapper.js +3 -0
- package/dist/components/DataGrid/utils/ColumnMapper.js.map +1 -1
- package/dist/components/index.d.ts +1 -1
- package/package.json +1 -1
|
@@ -23,6 +23,7 @@ const textVariantMapping = {
|
|
|
23
23
|
const Avatar = ({ size = 'lg', name, bgColor, textColor, iconSlot, imageUrl, hasIndicator = false, ariaLabel = `Avatar of ${name}`, className, style, }) => {
|
|
24
24
|
var _a, _b;
|
|
25
25
|
const textVariant = textVariantMapping[size];
|
|
26
|
+
// Check if name contains any letters if so we show initials from text.
|
|
26
27
|
const hasLetters = /[a-zA-Z]/.test(name || '');
|
|
27
28
|
return (React__default.default.createElement(FlexRow.FlexRow, { justifyContent: "center", className: buildClassnames.buildClassnames([Avatar_module.avatar, Avatar_module[`${size}-size`], className]), style: {
|
|
28
29
|
...style,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.cjs","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React from 'react';\nimport { assignCssVars, buildClassnames } from '../../utils';\nimport { CriticalIcon } from '../../icons/custom/components/CriticalIcon';\nimport { theme } from '../../theme';\nimport styles from './Avatar.module.scss';\nimport { AvatarProps } from './types';\nimport { Text } from '../Text';\nimport { FlexRow } from '../Flex/FlexRow';\n\nconst textVariantMapping: Record<string, any> = {\n md: 'bodySmallBold',\n lg: 'bodySmallBold',\n xl: 'headingSmall',\n xxl: 'headingMedium',\n};\n\nexport const Avatar = ({\n size = 'lg',\n name,\n bgColor,\n textColor,\n iconSlot,\n imageUrl,\n hasIndicator = false,\n ariaLabel = `Avatar of ${name}`,\n className,\n style,\n}: AvatarProps) => {\n const textVariant = textVariantMapping[size];\n const hasLetters = /[a-zA-Z]/.test(name || '');\n\n return (\n <FlexRow\n justifyContent=\"center\"\n className={buildClassnames([styles.avatar, styles[`${size}-size`], className])}\n style={\n {\n ...style,\n ...assignCssVars({\n avatarBgColor: iconSlot ? theme.colors.neutral.grey.lightest : bgColor,\n avatarTextColor: textColor,\n }),\n } as React.CSSProperties\n }\n aria-label={ariaLabel}\n >\n {hasIndicator && (\n <CriticalIcon\n className={styles.indicatorIcon}\n color={theme.colors.secondary.red.base}\n fill={theme.colors.neutral.grey.lightest}\n role=\"status\"\n aria-live=\"polite\"\n aria-label=\"Avatar has an error\"\n />\n )}\n {imageUrl && <img src={imageUrl} alt={name} className={styles.avatarImage} />}\n {!!iconSlot && iconSlot}\n {!imageUrl && !iconSlot && (\n <Text variant={textVariant} className={styles.avatarText}>\n {!hasLetters ? name?.toUpperCase() : name?.toUpperCase()?.match(/\\b\\w/g)?.slice(0, 2)}\n </Text>\n )}\n </FlexRow>\n );\n};\n"],"names":["React","FlexRow","buildClassnames","styles","assignCssVars","theme","CriticalIcon","Text"],"mappings":";;;;;;;;;;;;;;;;AASA,MAAM,kBAAkB,GAAwB;AAC9C,IAAA,EAAE,EAAE,eAAe;AACnB,IAAA,EAAE,EAAE,eAAe;AACnB,IAAA,EAAE,EAAE,cAAc;AAClB,IAAA,GAAG,EAAE,eAAe;CACrB;AAEM,MAAM,MAAM,GAAG,CAAC,EACrB,IAAI,GAAG,IAAI,EACX,IAAI,EACJ,OAAO,EACP,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,YAAY,GAAG,KAAK,EACpB,SAAS,GAAG,CAAA,UAAA,EAAa,IAAI,CAAA,CAAE,EAC/B,SAAS,EACT,KAAK,GACO,KAAI;;AAChB,IAAA,MAAM,WAAW,GAAG,kBAAkB,CAAC,IAAI,CAAC
|
|
1
|
+
{"version":3,"file":"Avatar.cjs","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React from 'react';\nimport { assignCssVars, buildClassnames } from '../../utils';\nimport { CriticalIcon } from '../../icons/custom/components/CriticalIcon';\nimport { theme } from '../../theme';\nimport styles from './Avatar.module.scss';\nimport { AvatarProps } from './types';\nimport { Text } from '../Text';\nimport { FlexRow } from '../Flex/FlexRow';\n\nconst textVariantMapping: Record<string, any> = {\n md: 'bodySmallBold',\n lg: 'bodySmallBold',\n xl: 'headingSmall',\n xxl: 'headingMedium',\n};\n\nexport const Avatar = ({\n size = 'lg',\n name,\n bgColor,\n textColor,\n iconSlot,\n imageUrl,\n hasIndicator = false,\n ariaLabel = `Avatar of ${name}`,\n className,\n style,\n}: AvatarProps) => {\n const textVariant = textVariantMapping[size];\n\n // Check if name contains any letters if so we show initials from text.\n const hasLetters = /[a-zA-Z]/.test(name || '');\n\n return (\n <FlexRow\n justifyContent=\"center\"\n className={buildClassnames([styles.avatar, styles[`${size}-size`], className])}\n style={\n {\n ...style,\n ...assignCssVars({\n avatarBgColor: iconSlot ? theme.colors.neutral.grey.lightest : bgColor,\n avatarTextColor: textColor,\n }),\n } as React.CSSProperties\n }\n aria-label={ariaLabel}\n >\n {hasIndicator && (\n <CriticalIcon\n className={styles.indicatorIcon}\n color={theme.colors.secondary.red.base}\n fill={theme.colors.neutral.grey.lightest}\n role=\"status\"\n aria-live=\"polite\"\n aria-label=\"Avatar has an error\"\n />\n )}\n {imageUrl && <img src={imageUrl} alt={name} className={styles.avatarImage} />}\n {!!iconSlot && iconSlot}\n {!imageUrl && !iconSlot && (\n <Text variant={textVariant} className={styles.avatarText}>\n {!hasLetters ? name?.toUpperCase() : name?.toUpperCase()?.match(/\\b\\w/g)?.slice(0, 2)}\n </Text>\n )}\n </FlexRow>\n );\n};\n"],"names":["React","FlexRow","buildClassnames","styles","assignCssVars","theme","CriticalIcon","Text"],"mappings":";;;;;;;;;;;;;;;;AASA,MAAM,kBAAkB,GAAwB;AAC9C,IAAA,EAAE,EAAE,eAAe;AACnB,IAAA,EAAE,EAAE,eAAe;AACnB,IAAA,EAAE,EAAE,cAAc;AAClB,IAAA,GAAG,EAAE,eAAe;CACrB;AAEM,MAAM,MAAM,GAAG,CAAC,EACrB,IAAI,GAAG,IAAI,EACX,IAAI,EACJ,OAAO,EACP,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,YAAY,GAAG,KAAK,EACpB,SAAS,GAAG,CAAA,UAAA,EAAa,IAAI,CAAA,CAAE,EAC/B,SAAS,EACT,KAAK,GACO,KAAI;;AAChB,IAAA,MAAM,WAAW,GAAG,kBAAkB,CAAC,IAAI,CAAC;;IAG5C,MAAM,UAAU,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC;AAE9C,IAAA,QACEA,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAA,EACN,cAAc,EAAC,QAAQ,EACvB,SAAS,EAAEC,+BAAe,CAAC,CAACC,aAAM,CAAC,MAAM,EAAEA,aAAM,CAAC,CAAA,EAAG,IAAI,CAAA,KAAA,CAAO,CAAC,EAAE,SAAS,CAAC,CAAC,EAC9E,KAAK,EACH;AACE,YAAA,GAAG,KAAK;AACR,YAAA,GAAGC,2BAAa,CAAC;AACf,gBAAA,aAAa,EAAE,QAAQ,GAAGC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,GAAG,OAAO;AACtE,gBAAA,eAAe,EAAE,SAAS;aAC3B,CAAC;AACoB,SAAA,EAAA,YAAA,EAEd,SAAS,EAAA;AAEpB,QAAA,YAAY,KACXL,sBAAA,CAAA,aAAA,CAACM,yBAAY,EACX,EAAA,SAAS,EAAEH,aAAM,CAAC,aAAa,EAC/B,KAAK,EAAEE,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,EACtC,IAAI,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,EACxC,IAAI,EAAC,QAAQ,EAAA,WAAA,EACH,QAAQ,EACP,YAAA,EAAA,qBAAqB,GAChC,CACH;AACA,QAAA,QAAQ,IAAIL,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,EAAEG,aAAM,CAAC,WAAW,EAAI,CAAA;QAC5E,CAAC,CAAC,QAAQ,IAAI,QAAQ;AACtB,QAAA,CAAC,QAAQ,IAAI,CAAC,QAAQ,KACrBH,sBAAC,CAAA,aAAA,CAAAO,SAAI,EAAC,EAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAEJ,aAAM,CAAC,UAAU,EACrD,EAAA,CAAC,UAAU,GAAG,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,SAAA,GAAA,SAAA,GAAJ,IAAI,CAAE,WAAW,EAAE,GAAG,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,IAAI,KAAJ,IAAA,IAAA,IAAI,KAAJ,SAAA,GAAA,SAAA,GAAA,IAAI,CAAE,WAAW,EAAE,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,KAAK,CAAC,OAAO,CAAC,MAAE,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAChF,CACR,CACO;AAEd;;;;"}
|
|
@@ -17,6 +17,7 @@ const textVariantMapping = {
|
|
|
17
17
|
const Avatar = ({ size = 'lg', name, bgColor, textColor, iconSlot, imageUrl, hasIndicator = false, ariaLabel = `Avatar of ${name}`, className, style, }) => {
|
|
18
18
|
var _a, _b;
|
|
19
19
|
const textVariant = textVariantMapping[size];
|
|
20
|
+
// Check if name contains any letters if so we show initials from text.
|
|
20
21
|
const hasLetters = /[a-zA-Z]/.test(name || '');
|
|
21
22
|
return (React__default.createElement(FlexRow, { justifyContent: "center", className: buildClassnames([styles.avatar, styles[`${size}-size`], className]), style: {
|
|
22
23
|
...style,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.js","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React from 'react';\nimport { assignCssVars, buildClassnames } from '../../utils';\nimport { CriticalIcon } from '../../icons/custom/components/CriticalIcon';\nimport { theme } from '../../theme';\nimport styles from './Avatar.module.scss';\nimport { AvatarProps } from './types';\nimport { Text } from '../Text';\nimport { FlexRow } from '../Flex/FlexRow';\n\nconst textVariantMapping: Record<string, any> = {\n md: 'bodySmallBold',\n lg: 'bodySmallBold',\n xl: 'headingSmall',\n xxl: 'headingMedium',\n};\n\nexport const Avatar = ({\n size = 'lg',\n name,\n bgColor,\n textColor,\n iconSlot,\n imageUrl,\n hasIndicator = false,\n ariaLabel = `Avatar of ${name}`,\n className,\n style,\n}: AvatarProps) => {\n const textVariant = textVariantMapping[size];\n const hasLetters = /[a-zA-Z]/.test(name || '');\n\n return (\n <FlexRow\n justifyContent=\"center\"\n className={buildClassnames([styles.avatar, styles[`${size}-size`], className])}\n style={\n {\n ...style,\n ...assignCssVars({\n avatarBgColor: iconSlot ? theme.colors.neutral.grey.lightest : bgColor,\n avatarTextColor: textColor,\n }),\n } as React.CSSProperties\n }\n aria-label={ariaLabel}\n >\n {hasIndicator && (\n <CriticalIcon\n className={styles.indicatorIcon}\n color={theme.colors.secondary.red.base}\n fill={theme.colors.neutral.grey.lightest}\n role=\"status\"\n aria-live=\"polite\"\n aria-label=\"Avatar has an error\"\n />\n )}\n {imageUrl && <img src={imageUrl} alt={name} className={styles.avatarImage} />}\n {!!iconSlot && iconSlot}\n {!imageUrl && !iconSlot && (\n <Text variant={textVariant} className={styles.avatarText}>\n {!hasLetters ? name?.toUpperCase() : name?.toUpperCase()?.match(/\\b\\w/g)?.slice(0, 2)}\n </Text>\n )}\n </FlexRow>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;AASA,MAAM,kBAAkB,GAAwB;AAC9C,IAAA,EAAE,EAAE,eAAe;AACnB,IAAA,EAAE,EAAE,eAAe;AACnB,IAAA,EAAE,EAAE,cAAc;AAClB,IAAA,GAAG,EAAE,eAAe;CACrB;AAEM,MAAM,MAAM,GAAG,CAAC,EACrB,IAAI,GAAG,IAAI,EACX,IAAI,EACJ,OAAO,EACP,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,YAAY,GAAG,KAAK,EACpB,SAAS,GAAG,CAAA,UAAA,EAAa,IAAI,CAAA,CAAE,EAC/B,SAAS,EACT,KAAK,GACO,KAAI;;AAChB,IAAA,MAAM,WAAW,GAAG,kBAAkB,CAAC,IAAI,CAAC
|
|
1
|
+
{"version":3,"file":"Avatar.js","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React from 'react';\nimport { assignCssVars, buildClassnames } from '../../utils';\nimport { CriticalIcon } from '../../icons/custom/components/CriticalIcon';\nimport { theme } from '../../theme';\nimport styles from './Avatar.module.scss';\nimport { AvatarProps } from './types';\nimport { Text } from '../Text';\nimport { FlexRow } from '../Flex/FlexRow';\n\nconst textVariantMapping: Record<string, any> = {\n md: 'bodySmallBold',\n lg: 'bodySmallBold',\n xl: 'headingSmall',\n xxl: 'headingMedium',\n};\n\nexport const Avatar = ({\n size = 'lg',\n name,\n bgColor,\n textColor,\n iconSlot,\n imageUrl,\n hasIndicator = false,\n ariaLabel = `Avatar of ${name}`,\n className,\n style,\n}: AvatarProps) => {\n const textVariant = textVariantMapping[size];\n\n // Check if name contains any letters if so we show initials from text.\n const hasLetters = /[a-zA-Z]/.test(name || '');\n\n return (\n <FlexRow\n justifyContent=\"center\"\n className={buildClassnames([styles.avatar, styles[`${size}-size`], className])}\n style={\n {\n ...style,\n ...assignCssVars({\n avatarBgColor: iconSlot ? theme.colors.neutral.grey.lightest : bgColor,\n avatarTextColor: textColor,\n }),\n } as React.CSSProperties\n }\n aria-label={ariaLabel}\n >\n {hasIndicator && (\n <CriticalIcon\n className={styles.indicatorIcon}\n color={theme.colors.secondary.red.base}\n fill={theme.colors.neutral.grey.lightest}\n role=\"status\"\n aria-live=\"polite\"\n aria-label=\"Avatar has an error\"\n />\n )}\n {imageUrl && <img src={imageUrl} alt={name} className={styles.avatarImage} />}\n {!!iconSlot && iconSlot}\n {!imageUrl && !iconSlot && (\n <Text variant={textVariant} className={styles.avatarText}>\n {!hasLetters ? name?.toUpperCase() : name?.toUpperCase()?.match(/\\b\\w/g)?.slice(0, 2)}\n </Text>\n )}\n </FlexRow>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;AASA,MAAM,kBAAkB,GAAwB;AAC9C,IAAA,EAAE,EAAE,eAAe;AACnB,IAAA,EAAE,EAAE,eAAe;AACnB,IAAA,EAAE,EAAE,cAAc;AAClB,IAAA,GAAG,EAAE,eAAe;CACrB;AAEM,MAAM,MAAM,GAAG,CAAC,EACrB,IAAI,GAAG,IAAI,EACX,IAAI,EACJ,OAAO,EACP,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,YAAY,GAAG,KAAK,EACpB,SAAS,GAAG,CAAA,UAAA,EAAa,IAAI,CAAA,CAAE,EAC/B,SAAS,EACT,KAAK,GACO,KAAI;;AAChB,IAAA,MAAM,WAAW,GAAG,kBAAkB,CAAC,IAAI,CAAC;;IAG5C,MAAM,UAAU,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC;AAE9C,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EACN,cAAc,EAAC,QAAQ,EACvB,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA,EAAG,IAAI,CAAA,KAAA,CAAO,CAAC,EAAE,SAAS,CAAC,CAAC,EAC9E,KAAK,EACH;AACE,YAAA,GAAG,KAAK;AACR,YAAA,GAAG,aAAa,CAAC;AACf,gBAAA,aAAa,EAAE,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,GAAG,OAAO;AACtE,gBAAA,eAAe,EAAE,SAAS;aAC3B,CAAC;AACoB,SAAA,EAAA,YAAA,EAEd,SAAS,EAAA;AAEpB,QAAA,YAAY,KACXA,cAAA,CAAA,aAAA,CAAC,YAAY,EACX,EAAA,SAAS,EAAE,MAAM,CAAC,aAAa,EAC/B,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,EACtC,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,EACxC,IAAI,EAAC,QAAQ,EAAA,WAAA,EACH,QAAQ,EACP,YAAA,EAAA,qBAAqB,GAChC,CACH;AACA,QAAA,QAAQ,IAAIA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,WAAW,EAAI,CAAA;QAC5E,CAAC,CAAC,QAAQ,IAAI,QAAQ;AACtB,QAAA,CAAC,QAAQ,IAAI,CAAC,QAAQ,KACrBA,cAAC,CAAA,aAAA,CAAA,IAAI,EAAC,EAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,CAAC,UAAU,EACrD,EAAA,CAAC,UAAU,GAAG,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,SAAA,GAAA,SAAA,GAAJ,IAAI,CAAE,WAAW,EAAE,GAAG,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,IAAI,KAAJ,IAAA,IAAA,IAAI,KAAJ,SAAA,GAAA,SAAA,GAAA,IAAI,CAAE,WAAW,EAAE,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,KAAK,CAAC,OAAO,CAAC,MAAE,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAChF,CACR,CACO;AAEd;;;;"}
|
|
@@ -11,12 +11,10 @@ const useExpandableCell = ({ cell, enableRowSelection, enableExpanding, }) => {
|
|
|
11
11
|
const showExpandButton = (_a = cell.getContext().table.options.meta) === null || _a === undefined ? undefined : _a.showExpandButton;
|
|
12
12
|
const canExpand = cell.row.getCanExpand();
|
|
13
13
|
const { depth } = cell.row;
|
|
14
|
-
const indentMargin = showExpandButton
|
|
15
|
-
|
|
16
|
-
: `calc(var(--sizes-6) * ${cell.row.depth})`;
|
|
17
|
-
const shouldShowExpandButton = showExpandButton && enableExpanding && isFirstColumn && canExpand;
|
|
14
|
+
const indentMargin = showExpandButton ? `calc(var(--sizes-6) * ${cell.row.depth + 1})` : '0';
|
|
15
|
+
const shouldShowExpandButtonForRow = showExpandButton && enableExpanding && isFirstColumn && canExpand;
|
|
18
16
|
const expandButtonProps = React.useMemo(() => {
|
|
19
|
-
if (!
|
|
17
|
+
if (!shouldShowExpandButtonForRow) {
|
|
20
18
|
return undefined;
|
|
21
19
|
}
|
|
22
20
|
return {
|
|
@@ -26,8 +24,13 @@ const useExpandableCell = ({ cell, enableRowSelection, enableExpanding, }) => {
|
|
|
26
24
|
width: indentMargin,
|
|
27
25
|
},
|
|
28
26
|
};
|
|
29
|
-
}, [
|
|
30
|
-
|
|
27
|
+
}, [shouldShowExpandButtonForRow, isExpanded, indentMargin, cell.row]);
|
|
28
|
+
// Only apply margin when using built-in expand button (showExpandButton === true)
|
|
29
|
+
// When using custom expansion (showExpandButton === false), the cell renderer handles indentation
|
|
30
|
+
const shouldApplyMargin = isFirstColumn &&
|
|
31
|
+
enableExpanding &&
|
|
32
|
+
showExpandButton &&
|
|
33
|
+
(depth > 0 || shouldShowExpandButtonForRow);
|
|
31
34
|
const contentMarginLeft = shouldApplyMargin ? indentMargin : undefined;
|
|
32
35
|
return { expandButtonProps, contentMarginLeft };
|
|
33
36
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useExpandableCell.cjs","sources":["../../../../../../../src/components/DataGrid/components/Body/BodyCell/hooks/useExpandableCell.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { Cell } from '@tanstack/react-table';\n\nimport { ExpandButtonProps } from '../../../CellContent/ExpandButton';\n\ntype UseExpandableCellProps = {\n /**\n * Cell within the table.\n */\n cell: Cell<any, any>;\n\n /**\n * Whether row selection is enabled.\n */\n enableRowSelection: boolean;\n\n /**\n * Whether row expanding is enabled.\n */\n enableExpanding: boolean;\n};\n\nexport const useExpandableCell = ({\n cell,\n enableRowSelection,\n enableExpanding,\n}: UseExpandableCellProps) => {\n const isFirstColumn = enableRowSelection\n ? cell.column.getIndex() === 1\n : cell.column.getIndex() === 0;\n\n const isExpanded = cell.row.getIsExpanded();\n const showExpandButton = cell.getContext().table.options.meta?.showExpandButton;\n const canExpand = cell.row.getCanExpand();\n const { depth } = cell.row;\n\n const indentMargin = showExpandButton
|
|
1
|
+
{"version":3,"file":"useExpandableCell.cjs","sources":["../../../../../../../src/components/DataGrid/components/Body/BodyCell/hooks/useExpandableCell.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { Cell } from '@tanstack/react-table';\n\nimport { ExpandButtonProps } from '../../../CellContent/ExpandButton';\n\ntype UseExpandableCellProps = {\n /**\n * Cell within the table.\n */\n cell: Cell<any, any>;\n\n /**\n * Whether row selection is enabled.\n */\n enableRowSelection: boolean;\n\n /**\n * Whether row expanding is enabled.\n */\n enableExpanding: boolean;\n};\n\nexport const useExpandableCell = ({\n cell,\n enableRowSelection,\n enableExpanding,\n}: UseExpandableCellProps) => {\n const isFirstColumn = enableRowSelection\n ? cell.column.getIndex() === 1\n : cell.column.getIndex() === 0;\n\n const isExpanded = cell.row.getIsExpanded();\n const showExpandButton = cell.getContext().table.options.meta?.showExpandButton;\n const canExpand = cell.row.getCanExpand();\n const { depth } = cell.row;\n\n const indentMargin = showExpandButton ? `calc(var(--sizes-6) * ${cell.row.depth + 1})` : '0';\n\n const shouldShowExpandButtonForRow =\n showExpandButton && enableExpanding && isFirstColumn && canExpand;\n\n const expandButtonProps: ExpandButtonProps | undefined = useMemo(() => {\n if (!shouldShowExpandButtonForRow) {\n return undefined;\n }\n\n return {\n isExpanded,\n onToggle: cell.row.getToggleExpandedHandler(),\n containerStyle: {\n width: indentMargin,\n },\n };\n }, [shouldShowExpandButtonForRow, isExpanded, indentMargin, cell.row]);\n\n // Only apply margin when using built-in expand button (showExpandButton === true)\n // When using custom expansion (showExpandButton === false), the cell renderer handles indentation\n const shouldApplyMargin =\n isFirstColumn &&\n enableExpanding &&\n showExpandButton &&\n (depth > 0 || shouldShowExpandButtonForRow);\n const contentMarginLeft = shouldApplyMargin ? indentMargin : undefined;\n\n return { expandButtonProps, contentMarginLeft };\n};\n"],"names":["useMemo"],"mappings":";;;;AAsBO,MAAM,iBAAiB,GAAG,CAAC,EAChC,IAAI,EACJ,kBAAkB,EAClB,eAAe,GACQ,KAAI;;IAC3B,MAAM,aAAa,GAAG;UAClB,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,KAAK;UAC3B,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,KAAK,CAAC;IAEhC,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE;AAC3C,IAAA,MAAM,gBAAgB,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,UAAU,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,gBAAgB;IAC/E,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE;AACzC,IAAA,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,GAAG;AAE1B,IAAA,MAAM,YAAY,GAAG,gBAAgB,GAAG,yBAAyB,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,CAAA,CAAA,CAAG,GAAG,GAAG;IAE5F,MAAM,4BAA4B,GAChC,gBAAgB,IAAI,eAAe,IAAI,aAAa,IAAI,SAAS;AAEnE,IAAA,MAAM,iBAAiB,GAAkCA,aAAO,CAAC,MAAK;QACpE,IAAI,CAAC,4BAA4B,EAAE;AACjC,YAAA,OAAO,SAAS;AACjB;QAED,OAAO;YACL,UAAU;AACV,YAAA,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,wBAAwB,EAAE;AAC7C,YAAA,cAAc,EAAE;AACd,gBAAA,KAAK,EAAE,YAAY;AACpB,aAAA;SACF;AACH,KAAC,EAAE,CAAC,4BAA4B,EAAE,UAAU,EAAE,YAAY,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;;;IAItE,MAAM,iBAAiB,GACrB,aAAa;QACb,eAAe;QACf,gBAAgB;AAChB,SAAC,KAAK,GAAG,CAAC,IAAI,4BAA4B,CAAC;IAC7C,MAAM,iBAAiB,GAAG,iBAAiB,GAAG,YAAY,GAAG,SAAS;AAEtE,IAAA,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE;AACjD;;;;"}
|
|
@@ -9,12 +9,10 @@ const useExpandableCell = ({ cell, enableRowSelection, enableExpanding, }) => {
|
|
|
9
9
|
const showExpandButton = (_a = cell.getContext().table.options.meta) === null || _a === undefined ? undefined : _a.showExpandButton;
|
|
10
10
|
const canExpand = cell.row.getCanExpand();
|
|
11
11
|
const { depth } = cell.row;
|
|
12
|
-
const indentMargin = showExpandButton
|
|
13
|
-
|
|
14
|
-
: `calc(var(--sizes-6) * ${cell.row.depth})`;
|
|
15
|
-
const shouldShowExpandButton = showExpandButton && enableExpanding && isFirstColumn && canExpand;
|
|
12
|
+
const indentMargin = showExpandButton ? `calc(var(--sizes-6) * ${cell.row.depth + 1})` : '0';
|
|
13
|
+
const shouldShowExpandButtonForRow = showExpandButton && enableExpanding && isFirstColumn && canExpand;
|
|
16
14
|
const expandButtonProps = useMemo(() => {
|
|
17
|
-
if (!
|
|
15
|
+
if (!shouldShowExpandButtonForRow) {
|
|
18
16
|
return undefined;
|
|
19
17
|
}
|
|
20
18
|
return {
|
|
@@ -24,8 +22,13 @@ const useExpandableCell = ({ cell, enableRowSelection, enableExpanding, }) => {
|
|
|
24
22
|
width: indentMargin,
|
|
25
23
|
},
|
|
26
24
|
};
|
|
27
|
-
}, [
|
|
28
|
-
|
|
25
|
+
}, [shouldShowExpandButtonForRow, isExpanded, indentMargin, cell.row]);
|
|
26
|
+
// Only apply margin when using built-in expand button (showExpandButton === true)
|
|
27
|
+
// When using custom expansion (showExpandButton === false), the cell renderer handles indentation
|
|
28
|
+
const shouldApplyMargin = isFirstColumn &&
|
|
29
|
+
enableExpanding &&
|
|
30
|
+
showExpandButton &&
|
|
31
|
+
(depth > 0 || shouldShowExpandButtonForRow);
|
|
29
32
|
const contentMarginLeft = shouldApplyMargin ? indentMargin : undefined;
|
|
30
33
|
return { expandButtonProps, contentMarginLeft };
|
|
31
34
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useExpandableCell.js","sources":["../../../../../../../src/components/DataGrid/components/Body/BodyCell/hooks/useExpandableCell.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { Cell } from '@tanstack/react-table';\n\nimport { ExpandButtonProps } from '../../../CellContent/ExpandButton';\n\ntype UseExpandableCellProps = {\n /**\n * Cell within the table.\n */\n cell: Cell<any, any>;\n\n /**\n * Whether row selection is enabled.\n */\n enableRowSelection: boolean;\n\n /**\n * Whether row expanding is enabled.\n */\n enableExpanding: boolean;\n};\n\nexport const useExpandableCell = ({\n cell,\n enableRowSelection,\n enableExpanding,\n}: UseExpandableCellProps) => {\n const isFirstColumn = enableRowSelection\n ? cell.column.getIndex() === 1\n : cell.column.getIndex() === 0;\n\n const isExpanded = cell.row.getIsExpanded();\n const showExpandButton = cell.getContext().table.options.meta?.showExpandButton;\n const canExpand = cell.row.getCanExpand();\n const { depth } = cell.row;\n\n const indentMargin = showExpandButton
|
|
1
|
+
{"version":3,"file":"useExpandableCell.js","sources":["../../../../../../../src/components/DataGrid/components/Body/BodyCell/hooks/useExpandableCell.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { Cell } from '@tanstack/react-table';\n\nimport { ExpandButtonProps } from '../../../CellContent/ExpandButton';\n\ntype UseExpandableCellProps = {\n /**\n * Cell within the table.\n */\n cell: Cell<any, any>;\n\n /**\n * Whether row selection is enabled.\n */\n enableRowSelection: boolean;\n\n /**\n * Whether row expanding is enabled.\n */\n enableExpanding: boolean;\n};\n\nexport const useExpandableCell = ({\n cell,\n enableRowSelection,\n enableExpanding,\n}: UseExpandableCellProps) => {\n const isFirstColumn = enableRowSelection\n ? cell.column.getIndex() === 1\n : cell.column.getIndex() === 0;\n\n const isExpanded = cell.row.getIsExpanded();\n const showExpandButton = cell.getContext().table.options.meta?.showExpandButton;\n const canExpand = cell.row.getCanExpand();\n const { depth } = cell.row;\n\n const indentMargin = showExpandButton ? `calc(var(--sizes-6) * ${cell.row.depth + 1})` : '0';\n\n const shouldShowExpandButtonForRow =\n showExpandButton && enableExpanding && isFirstColumn && canExpand;\n\n const expandButtonProps: ExpandButtonProps | undefined = useMemo(() => {\n if (!shouldShowExpandButtonForRow) {\n return undefined;\n }\n\n return {\n isExpanded,\n onToggle: cell.row.getToggleExpandedHandler(),\n containerStyle: {\n width: indentMargin,\n },\n };\n }, [shouldShowExpandButtonForRow, isExpanded, indentMargin, cell.row]);\n\n // Only apply margin when using built-in expand button (showExpandButton === true)\n // When using custom expansion (showExpandButton === false), the cell renderer handles indentation\n const shouldApplyMargin =\n isFirstColumn &&\n enableExpanding &&\n showExpandButton &&\n (depth > 0 || shouldShowExpandButtonForRow);\n const contentMarginLeft = shouldApplyMargin ? indentMargin : undefined;\n\n return { expandButtonProps, contentMarginLeft };\n};\n"],"names":[],"mappings":";;AAsBO,MAAM,iBAAiB,GAAG,CAAC,EAChC,IAAI,EACJ,kBAAkB,EAClB,eAAe,GACQ,KAAI;;IAC3B,MAAM,aAAa,GAAG;UAClB,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,KAAK;UAC3B,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,KAAK,CAAC;IAEhC,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE;AAC3C,IAAA,MAAM,gBAAgB,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,UAAU,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,gBAAgB;IAC/E,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE;AACzC,IAAA,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,GAAG;AAE1B,IAAA,MAAM,YAAY,GAAG,gBAAgB,GAAG,yBAAyB,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,CAAA,CAAA,CAAG,GAAG,GAAG;IAE5F,MAAM,4BAA4B,GAChC,gBAAgB,IAAI,eAAe,IAAI,aAAa,IAAI,SAAS;AAEnE,IAAA,MAAM,iBAAiB,GAAkC,OAAO,CAAC,MAAK;QACpE,IAAI,CAAC,4BAA4B,EAAE;AACjC,YAAA,OAAO,SAAS;AACjB;QAED,OAAO;YACL,UAAU;AACV,YAAA,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,wBAAwB,EAAE;AAC7C,YAAA,cAAc,EAAE;AACd,gBAAA,KAAK,EAAE,YAAY;AACpB,aAAA;SACF;AACH,KAAC,EAAE,CAAC,4BAA4B,EAAE,UAAU,EAAE,YAAY,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;;;IAItE,MAAM,iBAAiB,GACrB,aAAa;QACb,eAAe;QACf,gBAAgB;AAChB,SAAC,KAAK,GAAG,CAAC,IAAI,4BAA4B,CAAC;IAC7C,MAAM,iBAAiB,GAAG,iBAAiB,GAAG,YAAY,GAAG,SAAS;AAEtE,IAAA,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE;AACjD;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export type { ResizeMode, BorderMode, SelectionMode, SortDirection } from './enums';
|
|
2
2
|
export type { DataGridProps } from './DataGridProps';
|
|
3
3
|
export type { AriaRoles } from './AriaRoles';
|
|
4
|
-
export type { ColumnDefinition } from './ColumnDefinition';
|
|
4
|
+
export type { ColumnDefinition, RowExpansion } from './ColumnDefinition';
|
|
5
5
|
export type { SortState } from './SortState';
|
|
6
6
|
export type { PinnedColumnState } from './PinnedColumnState';
|
|
7
7
|
export type { RowGroupingConfiguration, ExpandedRows } from './RowGroupingConfiguration';
|
|
@@ -86,6 +86,7 @@ class ColumnMapper {
|
|
|
86
86
|
isExpanded: context.row.getIsExpanded(),
|
|
87
87
|
canExpand: context.row.getCanExpand(),
|
|
88
88
|
toggleExpanded: () => context.row.toggleExpanded(),
|
|
89
|
+
level: context.row.depth,
|
|
89
90
|
};
|
|
90
91
|
return definition.renderCell(context.getValue(), context.row.original, expansion);
|
|
91
92
|
}
|
|
@@ -103,6 +104,7 @@ class ColumnMapper {
|
|
|
103
104
|
isExpanded: context.row.getIsExpanded(),
|
|
104
105
|
canExpand: context.row.getCanExpand(),
|
|
105
106
|
toggleExpanded: () => context.row.toggleExpanded(),
|
|
107
|
+
level: context.row.depth,
|
|
106
108
|
};
|
|
107
109
|
return definition.renderCell(context.row.original, expansion);
|
|
108
110
|
},
|
|
@@ -115,6 +117,7 @@ class ColumnMapper {
|
|
|
115
117
|
isExpanded: context.row.getIsExpanded(),
|
|
116
118
|
canExpand: context.row.getCanExpand(),
|
|
117
119
|
toggleExpanded: () => context.row.toggleExpanded(),
|
|
120
|
+
level: context.row.depth,
|
|
118
121
|
};
|
|
119
122
|
return definition.renderCell(context.row.original, expansion);
|
|
120
123
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColumnMapper.cjs","sources":["../../../../src/components/DataGrid/utils/ColumnMapper.ts"],"sourcesContent":["import { ColumnDef, ColumnHelper, createColumnHelper } from '@tanstack/react-table';\nimport {\n ColumnDefinition,\n DataColumnDefinition,\n ColumnAlignment,\n RowExpansion,\n} from '../types/ColumnDefinition';\nimport {\n DEFAULT_CELL_ALIGN,\n DEFAULT_COLUMN_MAXIMUM_WIDTH,\n DEFAULT_COLUMN_MINIMUM_WIDTH,\n DEFAULT_COLUMN_WIDTH,\n} from '../constants';\n\n/**\n * Helper method which checks whether a given column definition is a `DataColumn`.\n * @param column The column definition to check.\n * @returns True if the column definition is a `DataColumn`, false otherwise.\n */\nconst isDataColumn = <T>(column: ColumnDefinition<T>): column is DataColumnDefinition<T> => {\n return (column as DataColumnDefinition<T>).field !== undefined;\n};\n\n/**\n * Maps a column alignment to the equivalent flexbox alignment.\n * @param align The column alingment to map.\n * @returns The flexbox alignment.\n */\nfunction alignmentToFlex(align: ColumnAlignment) {\n switch (align) {\n case 'left':\n return 'flex-start';\n case 'center':\n return 'center';\n case 'right':\n return 'flex-end';\n default:\n return 'flex-start';\n }\n}\n\n/**\n * Validates a column definition, ensuring required properties are defined and values make sense.\n * @param definition The column definition to validate.\n * @throws Error if the column definition is invalid.\n */\nconst validateColumnDefinition = (definition: ColumnDefinition<any>) => {\n if (!definition.id) {\n throw new Error(\"[ColumnMapper] Column definition is missing an 'id' property.\");\n }\n\n if (!isDataColumn(definition)) {\n if (!definition.renderCell) {\n throw new Error(\n `[ColumnMapper] Column '${definition.id}' is a display column but is missing a 'renderCell' property.`,\n );\n }\n }\n\n if (definition.width && definition.minWidth && definition.width < definition.minWidth) {\n throw new Error(\n `[ColumnMapper] Column '${definition.id}' has a size of ${definition.width} which is smaller than its minimum size of ${definition.minWidth}.`,\n );\n }\n\n if (definition.width && definition.maxWidth && definition.width > definition.maxWidth) {\n throw new Error(\n `[ColumnMapper] Column '${definition.id}' has a size of ${definition.width} which is larger than its maximum size of ${definition.maxWidth}.`,\n );\n }\n};\n\n/**\n * Mapper which validates and converts our ColumnDefinition's to a ColumnDef for use in TanStack Table.\n */\nexport class ColumnMapper {\n private columnHelper: ColumnHelper<any>;\n\n constructor() {\n this.columnHelper = createColumnHelper<any>();\n }\n\n mapColumnDefinition(definition: ColumnDefinition<any>): ColumnDef<any, any> {\n const sharedColumnProps = {\n id: definition.id,\n enableResizing: !!definition.resizeable,\n enableSorting: !!definition.sortable,\n\n header: definition.renderHeader ?? definition.title,\n footer: definition.renderFooter,\n\n size: definition.width ?? DEFAULT_COLUMN_WIDTH,\n maxSize: definition.maxWidth ?? DEFAULT_COLUMN_MAXIMUM_WIDTH,\n minSize: definition.minWidth ?? DEFAULT_COLUMN_MINIMUM_WIDTH,\n\n meta: {\n rowHeader: !!definition.rowHeader,\n // Generate flex and text alignment based off column.align\n justifyContent: alignmentToFlex(definition.align ?? DEFAULT_CELL_ALIGN),\n textAlign: definition.align ?? DEFAULT_CELL_ALIGN,\n getAriaLabel: definition.getAriaLabel,\n generateDataTestId: definition.generateDataTestId,\n },\n };\n\n validateColumnDefinition(definition);\n\n if (isDataColumn(definition)) {\n return this.columnHelper.accessor(definition.field, {\n ...sharedColumnProps,\n cell: definition.renderCell\n ? (context) => {\n const expansion: RowExpansion = {\n isExpanded: context.row.getIsExpanded(),\n canExpand: context.row.getCanExpand(),\n toggleExpanded: () => context.row.toggleExpanded(),\n };\n return definition.renderCell!(context.getValue(), context.row.original, expansion);\n }\n : (context) => context.getValue(),\n });\n }\n\n // If the column is a display column, but needs to be sortable, we create it as an accessor\n // column that just uses the row data as the field value.\n // Note: This wouldn't work for tables that use in-built sorting behaviour, but we don't use that.\n if (definition.sortable && !isDataColumn(definition)) {\n return this.columnHelper.accessor((row) => row, {\n ...sharedColumnProps,\n cell: (context) => {\n const expansion: RowExpansion = {\n isExpanded: context.row.getIsExpanded(),\n canExpand: context.row.getCanExpand(),\n toggleExpanded: () => context.row.toggleExpanded(),\n };\n return definition.renderCell(context.row.original, expansion);\n },\n });\n }\n\n return this.columnHelper.display({\n ...sharedColumnProps,\n cell: (context) => {\n const expansion: RowExpansion = {\n isExpanded: context.row.getIsExpanded(),\n canExpand: context.row.getCanExpand(),\n toggleExpanded: () => context.row.toggleExpanded(),\n };\n return definition.renderCell(context.row.original, expansion);\n },\n });\n }\n}\n"],"names":["createColumnHelper","DEFAULT_COLUMN_WIDTH","DEFAULT_COLUMN_MAXIMUM_WIDTH","DEFAULT_COLUMN_MINIMUM_WIDTH","DEFAULT_CELL_ALIGN"],"mappings":"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
|
|
1
|
+
{"version":3,"file":"ColumnMapper.cjs","sources":["../../../../src/components/DataGrid/utils/ColumnMapper.ts"],"sourcesContent":["import { ColumnDef, ColumnHelper, createColumnHelper } from '@tanstack/react-table';\nimport {\n ColumnDefinition,\n DataColumnDefinition,\n ColumnAlignment,\n RowExpansion,\n} from '../types/ColumnDefinition';\nimport {\n DEFAULT_CELL_ALIGN,\n DEFAULT_COLUMN_MAXIMUM_WIDTH,\n DEFAULT_COLUMN_MINIMUM_WIDTH,\n DEFAULT_COLUMN_WIDTH,\n} from '../constants';\n\n/**\n * Helper method which checks whether a given column definition is a `DataColumn`.\n * @param column The column definition to check.\n * @returns True if the column definition is a `DataColumn`, false otherwise.\n */\nconst isDataColumn = <T>(column: ColumnDefinition<T>): column is DataColumnDefinition<T> => {\n return (column as DataColumnDefinition<T>).field !== undefined;\n};\n\n/**\n * Maps a column alignment to the equivalent flexbox alignment.\n * @param align The column alingment to map.\n * @returns The flexbox alignment.\n */\nfunction alignmentToFlex(align: ColumnAlignment) {\n switch (align) {\n case 'left':\n return 'flex-start';\n case 'center':\n return 'center';\n case 'right':\n return 'flex-end';\n default:\n return 'flex-start';\n }\n}\n\n/**\n * Validates a column definition, ensuring required properties are defined and values make sense.\n * @param definition The column definition to validate.\n * @throws Error if the column definition is invalid.\n */\nconst validateColumnDefinition = (definition: ColumnDefinition<any>) => {\n if (!definition.id) {\n throw new Error(\"[ColumnMapper] Column definition is missing an 'id' property.\");\n }\n\n if (!isDataColumn(definition)) {\n if (!definition.renderCell) {\n throw new Error(\n `[ColumnMapper] Column '${definition.id}' is a display column but is missing a 'renderCell' property.`,\n );\n }\n }\n\n if (definition.width && definition.minWidth && definition.width < definition.minWidth) {\n throw new Error(\n `[ColumnMapper] Column '${definition.id}' has a size of ${definition.width} which is smaller than its minimum size of ${definition.minWidth}.`,\n );\n }\n\n if (definition.width && definition.maxWidth && definition.width > definition.maxWidth) {\n throw new Error(\n `[ColumnMapper] Column '${definition.id}' has a size of ${definition.width} which is larger than its maximum size of ${definition.maxWidth}.`,\n );\n }\n};\n\n/**\n * Mapper which validates and converts our ColumnDefinition's to a ColumnDef for use in TanStack Table.\n */\nexport class ColumnMapper {\n private columnHelper: ColumnHelper<any>;\n\n constructor() {\n this.columnHelper = createColumnHelper<any>();\n }\n\n mapColumnDefinition(definition: ColumnDefinition<any>): ColumnDef<any, any> {\n const sharedColumnProps = {\n id: definition.id,\n enableResizing: !!definition.resizeable,\n enableSorting: !!definition.sortable,\n\n header: definition.renderHeader ?? definition.title,\n footer: definition.renderFooter,\n\n size: definition.width ?? DEFAULT_COLUMN_WIDTH,\n maxSize: definition.maxWidth ?? DEFAULT_COLUMN_MAXIMUM_WIDTH,\n minSize: definition.minWidth ?? DEFAULT_COLUMN_MINIMUM_WIDTH,\n\n meta: {\n rowHeader: !!definition.rowHeader,\n // Generate flex and text alignment based off column.align\n justifyContent: alignmentToFlex(definition.align ?? DEFAULT_CELL_ALIGN),\n textAlign: definition.align ?? DEFAULT_CELL_ALIGN,\n getAriaLabel: definition.getAriaLabel,\n generateDataTestId: definition.generateDataTestId,\n },\n };\n\n validateColumnDefinition(definition);\n\n if (isDataColumn(definition)) {\n return this.columnHelper.accessor(definition.field, {\n ...sharedColumnProps,\n cell: definition.renderCell\n ? (context) => {\n const expansion: RowExpansion = {\n isExpanded: context.row.getIsExpanded(),\n canExpand: context.row.getCanExpand(),\n toggleExpanded: () => context.row.toggleExpanded(),\n level: context.row.depth,\n };\n return definition.renderCell!(context.getValue(), context.row.original, expansion);\n }\n : (context) => context.getValue(),\n });\n }\n\n // If the column is a display column, but needs to be sortable, we create it as an accessor\n // column that just uses the row data as the field value.\n // Note: This wouldn't work for tables that use in-built sorting behaviour, but we don't use that.\n if (definition.sortable && !isDataColumn(definition)) {\n return this.columnHelper.accessor((row) => row, {\n ...sharedColumnProps,\n cell: (context) => {\n const expansion: RowExpansion = {\n isExpanded: context.row.getIsExpanded(),\n canExpand: context.row.getCanExpand(),\n toggleExpanded: () => context.row.toggleExpanded(),\n level: context.row.depth,\n };\n return definition.renderCell(context.row.original, expansion);\n },\n });\n }\n\n return this.columnHelper.display({\n ...sharedColumnProps,\n cell: (context) => {\n const expansion: RowExpansion = {\n isExpanded: context.row.getIsExpanded(),\n canExpand: context.row.getCanExpand(),\n toggleExpanded: () => context.row.toggleExpanded(),\n level: context.row.depth,\n };\n return definition.renderCell(context.row.original, expansion);\n },\n });\n }\n}\n"],"names":["createColumnHelper","DEFAULT_COLUMN_WIDTH","DEFAULT_COLUMN_MAXIMUM_WIDTH","DEFAULT_COLUMN_MINIMUM_WIDTH","DEFAULT_CELL_ALIGN"],"mappings":"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"}
|
|
@@ -84,6 +84,7 @@ class ColumnMapper {
|
|
|
84
84
|
isExpanded: context.row.getIsExpanded(),
|
|
85
85
|
canExpand: context.row.getCanExpand(),
|
|
86
86
|
toggleExpanded: () => context.row.toggleExpanded(),
|
|
87
|
+
level: context.row.depth,
|
|
87
88
|
};
|
|
88
89
|
return definition.renderCell(context.getValue(), context.row.original, expansion);
|
|
89
90
|
}
|
|
@@ -101,6 +102,7 @@ class ColumnMapper {
|
|
|
101
102
|
isExpanded: context.row.getIsExpanded(),
|
|
102
103
|
canExpand: context.row.getCanExpand(),
|
|
103
104
|
toggleExpanded: () => context.row.toggleExpanded(),
|
|
105
|
+
level: context.row.depth,
|
|
104
106
|
};
|
|
105
107
|
return definition.renderCell(context.row.original, expansion);
|
|
106
108
|
},
|
|
@@ -113,6 +115,7 @@ class ColumnMapper {
|
|
|
113
115
|
isExpanded: context.row.getIsExpanded(),
|
|
114
116
|
canExpand: context.row.getCanExpand(),
|
|
115
117
|
toggleExpanded: () => context.row.toggleExpanded(),
|
|
118
|
+
level: context.row.depth,
|
|
116
119
|
};
|
|
117
120
|
return definition.renderCell(context.row.original, expansion);
|
|
118
121
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColumnMapper.js","sources":["../../../../src/components/DataGrid/utils/ColumnMapper.ts"],"sourcesContent":["import { ColumnDef, ColumnHelper, createColumnHelper } from '@tanstack/react-table';\nimport {\n ColumnDefinition,\n DataColumnDefinition,\n ColumnAlignment,\n RowExpansion,\n} from '../types/ColumnDefinition';\nimport {\n DEFAULT_CELL_ALIGN,\n DEFAULT_COLUMN_MAXIMUM_WIDTH,\n DEFAULT_COLUMN_MINIMUM_WIDTH,\n DEFAULT_COLUMN_WIDTH,\n} from '../constants';\n\n/**\n * Helper method which checks whether a given column definition is a `DataColumn`.\n * @param column The column definition to check.\n * @returns True if the column definition is a `DataColumn`, false otherwise.\n */\nconst isDataColumn = <T>(column: ColumnDefinition<T>): column is DataColumnDefinition<T> => {\n return (column as DataColumnDefinition<T>).field !== undefined;\n};\n\n/**\n * Maps a column alignment to the equivalent flexbox alignment.\n * @param align The column alingment to map.\n * @returns The flexbox alignment.\n */\nfunction alignmentToFlex(align: ColumnAlignment) {\n switch (align) {\n case 'left':\n return 'flex-start';\n case 'center':\n return 'center';\n case 'right':\n return 'flex-end';\n default:\n return 'flex-start';\n }\n}\n\n/**\n * Validates a column definition, ensuring required properties are defined and values make sense.\n * @param definition The column definition to validate.\n * @throws Error if the column definition is invalid.\n */\nconst validateColumnDefinition = (definition: ColumnDefinition<any>) => {\n if (!definition.id) {\n throw new Error(\"[ColumnMapper] Column definition is missing an 'id' property.\");\n }\n\n if (!isDataColumn(definition)) {\n if (!definition.renderCell) {\n throw new Error(\n `[ColumnMapper] Column '${definition.id}' is a display column but is missing a 'renderCell' property.`,\n );\n }\n }\n\n if (definition.width && definition.minWidth && definition.width < definition.minWidth) {\n throw new Error(\n `[ColumnMapper] Column '${definition.id}' has a size of ${definition.width} which is smaller than its minimum size of ${definition.minWidth}.`,\n );\n }\n\n if (definition.width && definition.maxWidth && definition.width > definition.maxWidth) {\n throw new Error(\n `[ColumnMapper] Column '${definition.id}' has a size of ${definition.width} which is larger than its maximum size of ${definition.maxWidth}.`,\n );\n }\n};\n\n/**\n * Mapper which validates and converts our ColumnDefinition's to a ColumnDef for use in TanStack Table.\n */\nexport class ColumnMapper {\n private columnHelper: ColumnHelper<any>;\n\n constructor() {\n this.columnHelper = createColumnHelper<any>();\n }\n\n mapColumnDefinition(definition: ColumnDefinition<any>): ColumnDef<any, any> {\n const sharedColumnProps = {\n id: definition.id,\n enableResizing: !!definition.resizeable,\n enableSorting: !!definition.sortable,\n\n header: definition.renderHeader ?? definition.title,\n footer: definition.renderFooter,\n\n size: definition.width ?? DEFAULT_COLUMN_WIDTH,\n maxSize: definition.maxWidth ?? DEFAULT_COLUMN_MAXIMUM_WIDTH,\n minSize: definition.minWidth ?? DEFAULT_COLUMN_MINIMUM_WIDTH,\n\n meta: {\n rowHeader: !!definition.rowHeader,\n // Generate flex and text alignment based off column.align\n justifyContent: alignmentToFlex(definition.align ?? DEFAULT_CELL_ALIGN),\n textAlign: definition.align ?? DEFAULT_CELL_ALIGN,\n getAriaLabel: definition.getAriaLabel,\n generateDataTestId: definition.generateDataTestId,\n },\n };\n\n validateColumnDefinition(definition);\n\n if (isDataColumn(definition)) {\n return this.columnHelper.accessor(definition.field, {\n ...sharedColumnProps,\n cell: definition.renderCell\n ? (context) => {\n const expansion: RowExpansion = {\n isExpanded: context.row.getIsExpanded(),\n canExpand: context.row.getCanExpand(),\n toggleExpanded: () => context.row.toggleExpanded(),\n };\n return definition.renderCell!(context.getValue(), context.row.original, expansion);\n }\n : (context) => context.getValue(),\n });\n }\n\n // If the column is a display column, but needs to be sortable, we create it as an accessor\n // column that just uses the row data as the field value.\n // Note: This wouldn't work for tables that use in-built sorting behaviour, but we don't use that.\n if (definition.sortable && !isDataColumn(definition)) {\n return this.columnHelper.accessor((row) => row, {\n ...sharedColumnProps,\n cell: (context) => {\n const expansion: RowExpansion = {\n isExpanded: context.row.getIsExpanded(),\n canExpand: context.row.getCanExpand(),\n toggleExpanded: () => context.row.toggleExpanded(),\n };\n return definition.renderCell(context.row.original, expansion);\n },\n });\n }\n\n return this.columnHelper.display({\n ...sharedColumnProps,\n cell: (context) => {\n const expansion: RowExpansion = {\n isExpanded: context.row.getIsExpanded(),\n canExpand: context.row.getCanExpand(),\n toggleExpanded: () => context.row.toggleExpanded(),\n };\n return definition.renderCell(context.row.original, expansion);\n },\n });\n }\n}\n"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"ColumnMapper.js","sources":["../../../../src/components/DataGrid/utils/ColumnMapper.ts"],"sourcesContent":["import { ColumnDef, ColumnHelper, createColumnHelper } from '@tanstack/react-table';\nimport {\n ColumnDefinition,\n DataColumnDefinition,\n ColumnAlignment,\n RowExpansion,\n} from '../types/ColumnDefinition';\nimport {\n DEFAULT_CELL_ALIGN,\n DEFAULT_COLUMN_MAXIMUM_WIDTH,\n DEFAULT_COLUMN_MINIMUM_WIDTH,\n DEFAULT_COLUMN_WIDTH,\n} from '../constants';\n\n/**\n * Helper method which checks whether a given column definition is a `DataColumn`.\n * @param column The column definition to check.\n * @returns True if the column definition is a `DataColumn`, false otherwise.\n */\nconst isDataColumn = <T>(column: ColumnDefinition<T>): column is DataColumnDefinition<T> => {\n return (column as DataColumnDefinition<T>).field !== undefined;\n};\n\n/**\n * Maps a column alignment to the equivalent flexbox alignment.\n * @param align The column alingment to map.\n * @returns The flexbox alignment.\n */\nfunction alignmentToFlex(align: ColumnAlignment) {\n switch (align) {\n case 'left':\n return 'flex-start';\n case 'center':\n return 'center';\n case 'right':\n return 'flex-end';\n default:\n return 'flex-start';\n }\n}\n\n/**\n * Validates a column definition, ensuring required properties are defined and values make sense.\n * @param definition The column definition to validate.\n * @throws Error if the column definition is invalid.\n */\nconst validateColumnDefinition = (definition: ColumnDefinition<any>) => {\n if (!definition.id) {\n throw new Error(\"[ColumnMapper] Column definition is missing an 'id' property.\");\n }\n\n if (!isDataColumn(definition)) {\n if (!definition.renderCell) {\n throw new Error(\n `[ColumnMapper] Column '${definition.id}' is a display column but is missing a 'renderCell' property.`,\n );\n }\n }\n\n if (definition.width && definition.minWidth && definition.width < definition.minWidth) {\n throw new Error(\n `[ColumnMapper] Column '${definition.id}' has a size of ${definition.width} which is smaller than its minimum size of ${definition.minWidth}.`,\n );\n }\n\n if (definition.width && definition.maxWidth && definition.width > definition.maxWidth) {\n throw new Error(\n `[ColumnMapper] Column '${definition.id}' has a size of ${definition.width} which is larger than its maximum size of ${definition.maxWidth}.`,\n );\n }\n};\n\n/**\n * Mapper which validates and converts our ColumnDefinition's to a ColumnDef for use in TanStack Table.\n */\nexport class ColumnMapper {\n private columnHelper: ColumnHelper<any>;\n\n constructor() {\n this.columnHelper = createColumnHelper<any>();\n }\n\n mapColumnDefinition(definition: ColumnDefinition<any>): ColumnDef<any, any> {\n const sharedColumnProps = {\n id: definition.id,\n enableResizing: !!definition.resizeable,\n enableSorting: !!definition.sortable,\n\n header: definition.renderHeader ?? definition.title,\n footer: definition.renderFooter,\n\n size: definition.width ?? DEFAULT_COLUMN_WIDTH,\n maxSize: definition.maxWidth ?? DEFAULT_COLUMN_MAXIMUM_WIDTH,\n minSize: definition.minWidth ?? DEFAULT_COLUMN_MINIMUM_WIDTH,\n\n meta: {\n rowHeader: !!definition.rowHeader,\n // Generate flex and text alignment based off column.align\n justifyContent: alignmentToFlex(definition.align ?? DEFAULT_CELL_ALIGN),\n textAlign: definition.align ?? DEFAULT_CELL_ALIGN,\n getAriaLabel: definition.getAriaLabel,\n generateDataTestId: definition.generateDataTestId,\n },\n };\n\n validateColumnDefinition(definition);\n\n if (isDataColumn(definition)) {\n return this.columnHelper.accessor(definition.field, {\n ...sharedColumnProps,\n cell: definition.renderCell\n ? (context) => {\n const expansion: RowExpansion = {\n isExpanded: context.row.getIsExpanded(),\n canExpand: context.row.getCanExpand(),\n toggleExpanded: () => context.row.toggleExpanded(),\n level: context.row.depth,\n };\n return definition.renderCell!(context.getValue(), context.row.original, expansion);\n }\n : (context) => context.getValue(),\n });\n }\n\n // If the column is a display column, but needs to be sortable, we create it as an accessor\n // column that just uses the row data as the field value.\n // Note: This wouldn't work for tables that use in-built sorting behaviour, but we don't use that.\n if (definition.sortable && !isDataColumn(definition)) {\n return this.columnHelper.accessor((row) => row, {\n ...sharedColumnProps,\n cell: (context) => {\n const expansion: RowExpansion = {\n isExpanded: context.row.getIsExpanded(),\n canExpand: context.row.getCanExpand(),\n toggleExpanded: () => context.row.toggleExpanded(),\n level: context.row.depth,\n };\n return definition.renderCell(context.row.original, expansion);\n },\n });\n }\n\n return this.columnHelper.display({\n ...sharedColumnProps,\n cell: (context) => {\n const expansion: RowExpansion = {\n isExpanded: context.row.getIsExpanded(),\n canExpand: context.row.getCanExpand(),\n toggleExpanded: () => context.row.toggleExpanded(),\n level: context.row.depth,\n };\n return definition.renderCell(context.row.original, expansion);\n },\n });\n }\n}\n"],"names":[],"mappings":";;;AAcA;;;;AAIG;AACH,MAAM,YAAY,GAAG,CAAI,MAA2B,KAAuC;AACzF,IAAA,OAAQ,MAAkC,CAAC,KAAK,KAAK,SAAS;AAChE,CAAC;AAED;;;;AAIG;AACH,SAAS,eAAe,CAAC,KAAsB,EAAA;AAC7C,IAAA,QAAQ,KAAK;AACX,QAAA,KAAK,MAAM;AACT,YAAA,OAAO,YAAY;AACrB,QAAA,KAAK,QAAQ;AACX,YAAA,OAAO,QAAQ;AACjB,QAAA,KAAK,OAAO;AACV,YAAA,OAAO,UAAU;AACnB,QAAA;AACE,YAAA,OAAO,YAAY;AACtB;AACH;AAEA;;;;AAIG;AACH,MAAM,wBAAwB,GAAG,CAAC,UAAiC,KAAI;AACrE,IAAA,IAAI,CAAC,UAAU,CAAC,EAAE,EAAE;AAClB,QAAA,MAAM,IAAI,KAAK,CAAC,+DAA+D,CAAC;AACjF;AAED,IAAA,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;AAC7B,QAAA,IAAI,CAAC,UAAU,CAAC,UAAU,EAAE;YAC1B,MAAM,IAAI,KAAK,CACb,CAAA,uBAAA,EAA0B,UAAU,CAAC,EAAE,CAA+D,6DAAA,CAAA,CACvG;AACF;AACF;AAED,IAAA,IAAI,UAAU,CAAC,KAAK,IAAI,UAAU,CAAC,QAAQ,IAAI,UAAU,CAAC,KAAK,GAAG,UAAU,CAAC,QAAQ,EAAE;AACrF,QAAA,MAAM,IAAI,KAAK,CACb,CAA0B,uBAAA,EAAA,UAAU,CAAC,EAAE,CAAA,gBAAA,EAAmB,UAAU,CAAC,KAAK,CAA8C,2CAAA,EAAA,UAAU,CAAC,QAAQ,CAAA,CAAA,CAAG,CAC/I;AACF;AAED,IAAA,IAAI,UAAU,CAAC,KAAK,IAAI,UAAU,CAAC,QAAQ,IAAI,UAAU,CAAC,KAAK,GAAG,UAAU,CAAC,QAAQ,EAAE;AACrF,QAAA,MAAM,IAAI,KAAK,CACb,CAA0B,uBAAA,EAAA,UAAU,CAAC,EAAE,CAAA,gBAAA,EAAmB,UAAU,CAAC,KAAK,CAA6C,0CAAA,EAAA,UAAU,CAAC,QAAQ,CAAA,CAAA,CAAG,CAC9I;AACF;AACH,CAAC;AAED;;AAEG;MACU,YAAY,CAAA;AAGvB,IAAA,WAAA,GAAA;AACE,QAAA,IAAI,CAAC,YAAY,GAAG,kBAAkB,EAAO;;AAG/C,IAAA,mBAAmB,CAAC,UAAiC,EAAA;;AACnD,QAAA,MAAM,iBAAiB,GAAG;YACxB,EAAE,EAAE,UAAU,CAAC,EAAE;AACjB,YAAA,cAAc,EAAE,CAAC,CAAC,UAAU,CAAC,UAAU;AACvC,YAAA,aAAa,EAAE,CAAC,CAAC,UAAU,CAAC,QAAQ;YAEpC,MAAM,EAAE,MAAA,UAAU,CAAC,YAAY,MAAI,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAA,UAAU,CAAC,KAAK;YACnD,MAAM,EAAE,UAAU,CAAC,YAAY;AAE/B,YAAA,IAAI,EAAE,CAAA,EAAA,GAAA,UAAU,CAAC,KAAK,sCAAI,oBAAoB;AAC9C,YAAA,OAAO,EAAE,CAAA,EAAA,GAAA,UAAU,CAAC,QAAQ,sCAAI,4BAA4B;AAC5D,YAAA,OAAO,EAAE,CAAA,EAAA,GAAA,UAAU,CAAC,QAAQ,sCAAI,4BAA4B;AAE5D,YAAA,IAAI,EAAE;AACJ,gBAAA,SAAS,EAAE,CAAC,CAAC,UAAU,CAAC,SAAS;;gBAEjC,cAAc,EAAE,eAAe,CAAC,CAAA,EAAA,GAAA,UAAU,CAAC,KAAK,MAAI,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAA,kBAAkB,CAAC;AACvE,gBAAA,SAAS,EAAE,CAAA,EAAA,GAAA,UAAU,CAAC,KAAK,sCAAI,kBAAkB;gBACjD,YAAY,EAAE,UAAU,CAAC,YAAY;gBACrC,kBAAkB,EAAE,UAAU,CAAC,kBAAkB;AAClD,aAAA;SACF;QAED,wBAAwB,CAAC,UAAU,CAAC;AAEpC,QAAA,IAAI,YAAY,CAAC,UAAU,CAAC,EAAE;YAC5B,OAAO,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,UAAU,CAAC,KAAK,EAAE;AAClD,gBAAA,GAAG,iBAAiB;gBACpB,IAAI,EAAE,UAAU,CAAC;AACf,sBAAE,CAAC,OAAO,KAAI;AACV,wBAAA,MAAM,SAAS,GAAiB;AAC9B,4BAAA,UAAU,EAAE,OAAO,CAAC,GAAG,CAAC,aAAa,EAAE;AACvC,4BAAA,SAAS,EAAE,OAAO,CAAC,GAAG,CAAC,YAAY,EAAE;4BACrC,cAAc,EAAE,MAAM,OAAO,CAAC,GAAG,CAAC,cAAc,EAAE;AAClD,4BAAA,KAAK,EAAE,OAAO,CAAC,GAAG,CAAC,KAAK;yBACzB;AACD,wBAAA,OAAO,UAAU,CAAC,UAAW,CAAC,OAAO,CAAC,QAAQ,EAAE,EAAE,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,SAAS,CAAC;;sBAEpF,CAAC,OAAO,KAAK,OAAO,CAAC,QAAQ,EAAE;AACpC,aAAA,CAAC;AACH;;;;QAKD,IAAI,UAAU,CAAC,QAAQ,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;AACpD,YAAA,OAAO,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE;AAC9C,gBAAA,GAAG,iBAAiB;AACpB,gBAAA,IAAI,EAAE,CAAC,OAAO,KAAI;AAChB,oBAAA,MAAM,SAAS,GAAiB;AAC9B,wBAAA,UAAU,EAAE,OAAO,CAAC,GAAG,CAAC,aAAa,EAAE;AACvC,wBAAA,SAAS,EAAE,OAAO,CAAC,GAAG,CAAC,YAAY,EAAE;wBACrC,cAAc,EAAE,MAAM,OAAO,CAAC,GAAG,CAAC,cAAc,EAAE;AAClD,wBAAA,KAAK,EAAE,OAAO,CAAC,GAAG,CAAC,KAAK;qBACzB;AACD,oBAAA,OAAO,UAAU,CAAC,UAAU,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,SAAS,CAAC;iBAC9D;AACF,aAAA,CAAC;AACH;AAED,QAAA,OAAO,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC;AAC/B,YAAA,GAAG,iBAAiB;AACpB,YAAA,IAAI,EAAE,CAAC,OAAO,KAAI;AAChB,gBAAA,MAAM,SAAS,GAAiB;AAC9B,oBAAA,UAAU,EAAE,OAAO,CAAC,GAAG,CAAC,aAAa,EAAE;AACvC,oBAAA,SAAS,EAAE,OAAO,CAAC,GAAG,CAAC,YAAY,EAAE;oBACrC,cAAc,EAAE,MAAM,OAAO,CAAC,GAAG,CAAC,cAAc,EAAE;AAClD,oBAAA,KAAK,EAAE,OAAO,CAAC,GAAG,CAAC,KAAK;iBACzB;AACD,gBAAA,OAAO,UAAU,CAAC,UAAU,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,SAAS,CAAC;aAC9D;AACF,SAAA,CAAC;;AAEL;;;;"}
|
|
@@ -72,7 +72,7 @@ export { WeightInput } from './WeightInput';
|
|
|
72
72
|
export { Indicator } from './Indicator';
|
|
73
73
|
export { SelectDropdown } from './SelectDropdown';
|
|
74
74
|
export { ThemeInjector } from './ThemeInjector';
|
|
75
|
-
export { DataGrid, type ColumnDefinition, type RowGroupingConfiguration, type SortState, } from './DataGrid';
|
|
75
|
+
export { DataGrid, type ColumnDefinition, type RowExpansion, type RowGroupingConfiguration, type SortState, } from './DataGrid';
|
|
76
76
|
export { FlexCol } from './Flex/FlexCol';
|
|
77
77
|
export { FlexRow } from './Flex/FlexRow';
|
|
78
78
|
export { PhoneInput } from './PhoneInput';
|