@veeqo/ui 13.8.1 → 13.10.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 +2 -1
- package/dist/components/Avatar/Avatar.cjs.map +1 -1
- package/dist/components/Avatar/Avatar.d.ts +1 -1
- package/dist/components/Avatar/Avatar.js +2 -1
- package/dist/components/Avatar/Avatar.js.map +1 -1
- package/dist/components/ChannelMark/ChannelMark.cjs +29 -0
- package/dist/components/ChannelMark/ChannelMark.cjs.map +1 -0
- package/dist/components/ChannelMark/ChannelMark.d.ts +3 -0
- package/dist/components/ChannelMark/ChannelMark.js +23 -0
- package/dist/components/ChannelMark/ChannelMark.js.map +1 -0
- package/dist/components/ChannelMark/ChannelMark.module.scss.cjs +9 -0
- package/dist/components/ChannelMark/ChannelMark.module.scss.cjs.map +1 -0
- package/dist/components/ChannelMark/ChannelMark.module.scss.js +7 -0
- package/dist/components/ChannelMark/ChannelMark.module.scss.js.map +1 -0
- package/dist/components/ChannelMark/constants.cjs +70 -0
- package/dist/components/ChannelMark/constants.cjs.map +1 -0
- package/dist/components/ChannelMark/constants.d.ts +64 -0
- package/dist/components/ChannelMark/constants.js +67 -0
- package/dist/components/ChannelMark/constants.js.map +1 -0
- package/dist/components/ChannelMark/index.d.ts +3 -0
- package/dist/components/ChannelMark/types.d.ts +12 -0
- package/dist/components/DataGrid/DataGrid.cjs +13 -2
- package/dist/components/DataGrid/DataGrid.cjs.map +1 -1
- package/dist/components/DataGrid/DataGrid.d.ts +1 -1
- package/dist/components/DataGrid/DataGrid.js +13 -2
- package/dist/components/DataGrid/DataGrid.js.map +1 -1
- package/dist/components/DataGrid/columns/SelectionColumnDefinition.cjs +4 -1
- package/dist/components/DataGrid/columns/SelectionColumnDefinition.cjs.map +1 -1
- package/dist/components/DataGrid/columns/SelectionColumnDefinition.js +4 -1
- package/dist/components/DataGrid/columns/SelectionColumnDefinition.js.map +1 -1
- package/dist/components/DataGrid/components/Body/BodyCell/hooks/useExpandableCell.cjs +13 -11
- package/dist/components/DataGrid/components/Body/BodyCell/hooks/useExpandableCell.cjs.map +1 -1
- package/dist/components/DataGrid/components/Body/BodyCell/hooks/useExpandableCell.js +13 -11
- package/dist/components/DataGrid/components/Body/BodyCell/hooks/useExpandableCell.js.map +1 -1
- package/dist/components/DataGrid/components/Body/Row/hooks/useRowTheme.cjs +1 -1
- package/dist/components/DataGrid/components/Body/Row/hooks/useRowTheme.cjs.map +1 -1
- package/dist/components/DataGrid/components/Body/Row/hooks/useRowTheme.js +1 -1
- package/dist/components/DataGrid/components/Body/Row/hooks/useRowTheme.js.map +1 -1
- package/dist/components/DataGrid/types/ColumnDefinition.d.ts +18 -2
- package/dist/components/DataGrid/types/DataGridProps.d.ts +5 -0
- package/dist/components/DataGrid/types/RowGroupingConfiguration.d.ts +9 -0
- package/dist/components/DataGrid/types/RowTheme.d.ts +4 -0
- package/dist/components/DataGrid/types/declarations.d.ts +2 -0
- package/dist/components/DataGrid/utils/ColumnMapper.cjs +24 -3
- package/dist/components/DataGrid/utils/ColumnMapper.cjs.map +1 -1
- package/dist/components/DataGrid/utils/ColumnMapper.js +24 -3
- package/dist/components/DataGrid/utils/ColumnMapper.js.map +1 -1
- package/dist/components/index.d.ts +1 -0
- package/dist/index.cjs +6 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +3 -0
- package/dist/index.js.map +1 -1
- package/dist/utils/buildChannelMarkUrl.cjs +12 -0
- package/dist/utils/buildChannelMarkUrl.cjs.map +1 -0
- package/dist/utils/buildChannelMarkUrl.d.ts +2 -0
- package/dist/utils/buildChannelMarkUrl.js +10 -0
- package/dist/utils/buildChannelMarkUrl.js.map +1 -0
- package/dist/utils/index.d.ts +1 -0
- package/package.json +1 -1
|
@@ -20,10 +20,11 @@ const textVariantMapping = {
|
|
|
20
20
|
xl: 'headingSmall',
|
|
21
21
|
xxl: 'headingMedium',
|
|
22
22
|
};
|
|
23
|
-
const Avatar = ({ size = 'lg', name, bgColor, textColor, iconSlot, imageUrl, hasIndicator = false, ariaLabel = `Avatar of ${name}`, className, }) => {
|
|
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
26
|
return (React__default.default.createElement(FlexRow.FlexRow, { justifyContent: "center", className: buildClassnames.buildClassnames([Avatar_module.avatar, Avatar_module[`${size}-size`], className]), style: {
|
|
27
|
+
...style,
|
|
27
28
|
...assignCssVars.assignCssVars({
|
|
28
29
|
avatarBgColor: iconSlot ? index.theme.colors.neutral.grey.lightest : bgColor,
|
|
29
30
|
avatarTextColor: textColor,
|
|
@@ -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}: AvatarProps) => {\n const textVariant = textVariantMapping[size];\n\n return (\n <FlexRow\n justifyContent=\"center\"\n className={buildClassnames([styles.avatar, styles[`${size}-size`], className])}\n style={\n {\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 {name\n ?.toUpperCase()\n ?.match(/(\\b\\w|\\+)/g)\n ?.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,CAAE,
|
|
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 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 {name\n ?.toUpperCase()\n ?.match(/(\\b\\w|\\+)/g)\n ?.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;AAE5C,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;QACtB,CAAC,QAAQ,IAAI,CAAC,QAAQ,KACrBH,sBAAA,CAAA,aAAA,CAACO,SAAI,EAAC,EAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAEJ,aAAM,CAAC,UAAU,EAAA,EACrD,MAAA,CAAA,EAAA,GAAA,IAAI,aAAJ,IAAI,KAAA,SAAA,GAAA,SAAA,GAAJ,IAAI,CACD,WAAW,EAAE,MACb,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,KAAK,CAAC,YAAY,CAAC,gDACnB,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CACV,CACR,CACO;AAEd;;;;"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { AvatarProps } from './types';
|
|
3
|
-
export declare const Avatar: ({ size, name, bgColor, textColor, iconSlot, imageUrl, hasIndicator, ariaLabel, className, }: AvatarProps) => React.JSX.Element;
|
|
3
|
+
export declare const Avatar: ({ size, name, bgColor, textColor, iconSlot, imageUrl, hasIndicator, ariaLabel, className, style, }: AvatarProps) => React.JSX.Element;
|
|
@@ -14,10 +14,11 @@ const textVariantMapping = {
|
|
|
14
14
|
xl: 'headingSmall',
|
|
15
15
|
xxl: 'headingMedium',
|
|
16
16
|
};
|
|
17
|
-
const Avatar = ({ size = 'lg', name, bgColor, textColor, iconSlot, imageUrl, hasIndicator = false, ariaLabel = `Avatar of ${name}`, className, }) => {
|
|
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
20
|
return (React__default.createElement(FlexRow, { justifyContent: "center", className: buildClassnames([styles.avatar, styles[`${size}-size`], className]), style: {
|
|
21
|
+
...style,
|
|
21
22
|
...assignCssVars({
|
|
22
23
|
avatarBgColor: iconSlot ? theme.colors.neutral.grey.lightest : bgColor,
|
|
23
24
|
avatarTextColor: textColor,
|
|
@@ -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}: AvatarProps) => {\n const textVariant = textVariantMapping[size];\n\n return (\n <FlexRow\n justifyContent=\"center\"\n className={buildClassnames([styles.avatar, styles[`${size}-size`], className])}\n style={\n {\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 {name\n ?.toUpperCase()\n ?.match(/(\\b\\w|\\+)/g)\n ?.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,CAAE,
|
|
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 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 {name\n ?.toUpperCase()\n ?.match(/(\\b\\w|\\+)/g)\n ?.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;AAE5C,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;QACtB,CAAC,QAAQ,IAAI,CAAC,QAAQ,KACrBA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,CAAC,UAAU,EAAA,EACrD,MAAA,CAAA,EAAA,GAAA,IAAI,aAAJ,IAAI,KAAA,SAAA,GAAA,SAAA,GAAJ,IAAI,CACD,WAAW,EAAE,MACb,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,KAAK,CAAC,YAAY,CAAC,gDACnB,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CACV,CACR,CACO;AAEd;;;;"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
var CriticalIcon = require('../../icons/custom/components/CriticalIcon.cjs');
|
|
5
|
+
var index = require('../../theme/index.cjs');
|
|
6
|
+
var buildClassnames = require('../../utils/buildClassnames.cjs');
|
|
7
|
+
require('uid/secure');
|
|
8
|
+
var buildChannelMarkUrl = require('../../utils/buildChannelMarkUrl.cjs');
|
|
9
|
+
var FlexRow = require('../Flex/FlexRow/FlexRow.cjs');
|
|
10
|
+
var ChannelMark_module = require('./ChannelMark.module.scss.cjs');
|
|
11
|
+
|
|
12
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
13
|
+
|
|
14
|
+
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
15
|
+
|
|
16
|
+
const ChannelMark = ({ typeCode, variant = 'white', size = 'lg', hasError, className, ...otherProps }) => {
|
|
17
|
+
const channelMarkUrl = buildChannelMarkUrl.buildChannelMarkUrl(typeCode, variant);
|
|
18
|
+
return (React__default.default.createElement(FlexRow.FlexRow, { justifyContent: "center", className: buildClassnames.buildClassnames([
|
|
19
|
+
ChannelMark_module.channelMark,
|
|
20
|
+
ChannelMark_module[`${size}-size`],
|
|
21
|
+
variant === 'transparent' && ChannelMark_module.transparentBackground,
|
|
22
|
+
className,
|
|
23
|
+
]), ...otherProps },
|
|
24
|
+
hasError && (React__default.default.createElement(CriticalIcon.CriticalIcon, { className: ChannelMark_module.indicatorIcon, color: index.theme.colors.secondary.red.base, fill: index.theme.colors.neutral.grey.lightest, role: "status", "aria-live": "polite", "aria-label": `${typeCode} channel has an error` })),
|
|
25
|
+
React__default.default.createElement("img", { src: channelMarkUrl, alt: "" })));
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
exports.ChannelMark = ChannelMark;
|
|
29
|
+
//# sourceMappingURL=ChannelMark.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ChannelMark.cjs","sources":["../../../src/components/ChannelMark/ChannelMark.tsx"],"sourcesContent":["import React from 'react';\nimport { CriticalIcon } from '../../icons/custom/components/CriticalIcon';\nimport { theme } from '../../theme';\nimport { buildChannelMarkUrl, buildClassnames } from '../../utils';\nimport { ChannelMarkProps } from './types';\nimport { FlexRow } from '../Flex/FlexRow';\n\nimport styles from './ChannelMark.module.scss';\n\nexport const ChannelMark = ({\n typeCode,\n variant = 'white',\n size = 'lg',\n hasError,\n className,\n ...otherProps\n}: ChannelMarkProps) => {\n const channelMarkUrl = buildChannelMarkUrl(typeCode, variant);\n return (\n <FlexRow\n justifyContent=\"center\"\n className={buildClassnames([\n styles.channelMark,\n styles[`${size}-size`],\n variant === 'transparent' && styles.transparentBackground,\n className,\n ])}\n {...otherProps}\n >\n {hasError && (\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={`${typeCode} channel has an error`}\n />\n )}\n <img src={channelMarkUrl} alt=\"\" />\n </FlexRow>\n );\n};\n"],"names":["buildChannelMarkUrl","React","FlexRow","buildClassnames","styles","CriticalIcon","theme"],"mappings":";;;;;;;;;;;;;;;AASa,MAAA,WAAW,GAAG,CAAC,EAC1B,QAAQ,EACR,OAAO,GAAG,OAAO,EACjB,IAAI,GAAG,IAAI,EACX,QAAQ,EACR,SAAS,EACT,GAAG,UAAU,EACI,KAAI;IACrB,MAAM,cAAc,GAAGA,uCAAmB,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC7D,QACEC,sBAAC,CAAA,aAAA,CAAAC,eAAO,EACN,EAAA,cAAc,EAAC,QAAQ,EACvB,SAAS,EAAEC,+BAAe,CAAC;AACzB,YAAAC,kBAAM,CAAC,WAAW;AAClB,YAAAA,kBAAM,CAAC,CAAA,EAAG,IAAI,CAAA,KAAA,CAAO,CAAC;AACtB,YAAA,OAAO,KAAK,aAAa,IAAIA,kBAAM,CAAC,qBAAqB;YACzD,SAAS;AACV,SAAA,CAAC,KACE,UAAU,EAAA;QAEb,QAAQ,KACPH,sBAAC,CAAA,aAAA,CAAAI,yBAAY,IACX,SAAS,EAAED,kBAAM,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,EACH,WAAA,EAAA,QAAQ,gBACN,CAAG,EAAA,QAAQ,CAAuB,qBAAA,CAAA,EAAA,CAC9C,CACH;QACDL,sBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,cAAc,EAAE,GAAG,EAAC,EAAE,EAAA,CAAG,CAC3B;AAEd;;;;"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import React__default from 'react';
|
|
2
|
+
import { CriticalIcon } from '../../icons/custom/components/CriticalIcon.js';
|
|
3
|
+
import { theme } from '../../theme/index.js';
|
|
4
|
+
import { buildClassnames } from '../../utils/buildClassnames.js';
|
|
5
|
+
import 'uid/secure';
|
|
6
|
+
import { buildChannelMarkUrl } from '../../utils/buildChannelMarkUrl.js';
|
|
7
|
+
import { FlexRow } from '../Flex/FlexRow/FlexRow.js';
|
|
8
|
+
import styles from './ChannelMark.module.scss.js';
|
|
9
|
+
|
|
10
|
+
const ChannelMark = ({ typeCode, variant = 'white', size = 'lg', hasError, className, ...otherProps }) => {
|
|
11
|
+
const channelMarkUrl = buildChannelMarkUrl(typeCode, variant);
|
|
12
|
+
return (React__default.createElement(FlexRow, { justifyContent: "center", className: buildClassnames([
|
|
13
|
+
styles.channelMark,
|
|
14
|
+
styles[`${size}-size`],
|
|
15
|
+
variant === 'transparent' && styles.transparentBackground,
|
|
16
|
+
className,
|
|
17
|
+
]), ...otherProps },
|
|
18
|
+
hasError && (React__default.createElement(CriticalIcon, { className: styles.indicatorIcon, color: theme.colors.secondary.red.base, fill: theme.colors.neutral.grey.lightest, role: "status", "aria-live": "polite", "aria-label": `${typeCode} channel has an error` })),
|
|
19
|
+
React__default.createElement("img", { src: channelMarkUrl, alt: "" })));
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
export { ChannelMark };
|
|
23
|
+
//# sourceMappingURL=ChannelMark.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ChannelMark.js","sources":["../../../src/components/ChannelMark/ChannelMark.tsx"],"sourcesContent":["import React from 'react';\nimport { CriticalIcon } from '../../icons/custom/components/CriticalIcon';\nimport { theme } from '../../theme';\nimport { buildChannelMarkUrl, buildClassnames } from '../../utils';\nimport { ChannelMarkProps } from './types';\nimport { FlexRow } from '../Flex/FlexRow';\n\nimport styles from './ChannelMark.module.scss';\n\nexport const ChannelMark = ({\n typeCode,\n variant = 'white',\n size = 'lg',\n hasError,\n className,\n ...otherProps\n}: ChannelMarkProps) => {\n const channelMarkUrl = buildChannelMarkUrl(typeCode, variant);\n return (\n <FlexRow\n justifyContent=\"center\"\n className={buildClassnames([\n styles.channelMark,\n styles[`${size}-size`],\n variant === 'transparent' && styles.transparentBackground,\n className,\n ])}\n {...otherProps}\n >\n {hasError && (\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={`${typeCode} channel has an error`}\n />\n )}\n <img src={channelMarkUrl} alt=\"\" />\n </FlexRow>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;AASa,MAAA,WAAW,GAAG,CAAC,EAC1B,QAAQ,EACR,OAAO,GAAG,OAAO,EACjB,IAAI,GAAG,IAAI,EACX,QAAQ,EACR,SAAS,EACT,GAAG,UAAU,EACI,KAAI;IACrB,MAAM,cAAc,GAAG,mBAAmB,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC7D,QACEA,cAAC,CAAA,aAAA,CAAA,OAAO,EACN,EAAA,cAAc,EAAC,QAAQ,EACvB,SAAS,EAAE,eAAe,CAAC;AACzB,YAAA,MAAM,CAAC,WAAW;AAClB,YAAA,MAAM,CAAC,CAAA,EAAG,IAAI,CAAA,KAAA,CAAO,CAAC;AACtB,YAAA,OAAO,KAAK,aAAa,IAAI,MAAM,CAAC,qBAAqB;YACzD,SAAS;AACV,SAAA,CAAC,KACE,UAAU,EAAA;QAEb,QAAQ,KACPA,cAAC,CAAA,aAAA,CAAA,YAAY,IACX,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,EACH,WAAA,EAAA,QAAQ,gBACN,CAAG,EAAA,QAAQ,CAAuB,qBAAA,CAAA,EAAA,CAC9C,CACH;QACDA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,cAAc,EAAE,GAAG,EAAC,EAAE,EAAA,CAAG,CAC3B;AAEd;;;;"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
|
|
4
|
+
|
|
5
|
+
___$insertStyle("._channelMark_1errh_1 {\n width: var(--channel-mark-size, var(--sizes-lg));\n height: var(--channel-mark-size, var(--sizes-lg));\n border: var(--sizes-line) solid var(--custom-border-color, var(--colors-neutral-grey-base));\n border-radius: var(--radius-full);\n position: relative;\n}\n\n._transparentBackground_1errh_9 {\n --custom-border-color: transparent;\n}\n\n._indicatorIcon_1errh_13 {\n position: absolute;\n /* Calculate offset as roughly 30% of icon size, with fallback */\n top: calc(-0.3 * var(--indicator-icon-size, var(--sizes-base)));\n right: calc(-0.3 * var(--indicator-icon-size, var(--sizes-base)));\n width: var(--indicator-icon-size, var(--sizes-lg));\n height: var(--indicator-icon-size, var(--sizes-lg));\n}\n\n._md-size_1errh_22 {\n --indicator-icon-size: var(--sizes-3);\n --channel-mark-size: var(--sizes-md);\n}\n\n._lg-size_1errh_27 {\n --indicator-icon-size: var(--sizes-base);\n --channel-mark-size: var(--sizes-lg);\n}\n\n._xl-size_1errh_32 {\n --indicator-icon-size: var(--sizes-7);\n --channel-mark-size: var(--sizes-xl);\n}\n\n._xxl-size_1errh_37 {\n --indicator-icon-size: var(--sizes-lg);\n --channel-mark-size: var(--sizes-xxl);\n}");
|
|
6
|
+
var styles = {"channelMark":"_channelMark_1errh_1","transparentBackground":"_transparentBackground_1errh_9","indicatorIcon":"_indicatorIcon_1errh_13","md-size":"_md-size_1errh_22","lg-size":"_lg-size_1errh_27","xl-size":"_xl-size_1errh_32","xxl-size":"_xxl-size_1errh_37"};
|
|
7
|
+
|
|
8
|
+
module.exports = styles;
|
|
9
|
+
//# sourceMappingURL=ChannelMark.module.scss.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ChannelMark.module.scss.cjs","sources":["../../../src/components/ChannelMark/ChannelMark.module.scss"],"sourcesContent":["@use 'sass:map';\n@use './variables.scss' as vars;\n\n.channelMark {\n width: var(--channel-mark-size, var(--sizes-lg));\n height: var(--channel-mark-size, var(--sizes-lg));\n border: var(--sizes-line) solid var(--custom-border-color, var(--colors-neutral-grey-base));\n border-radius: var(--radius-full);\n position: relative;\n}\n\n.transparentBackground {\n --custom-border-color: transparent;\n}\n\n.indicatorIcon {\n position: absolute;\n /* Calculate offset as roughly 30% of icon size, with fallback */\n top: calc(-0.3 * var(--indicator-icon-size, var(--sizes-base)));\n right: calc(-0.3 * var(--indicator-icon-size, var(--sizes-base)));\n width: var(--indicator-icon-size, var(--sizes-lg));\n height: var(--indicator-icon-size, var(--sizes-lg));\n}\n\n@each $size, $var in vars.$indicator-sizes {\n .#{$size}-size {\n --indicator-icon-size: #{$var};\n --channel-mark-size: #{map.get(vars.$channel-mark-sizes, $size)};\n }\n}\n"],"names":[],"mappings":";;;;AAIE,eAAA,CAAA,uqCAAA;AACA,aAAA,CAAA,aAAA,CAAA,sBAAA,CAAA,uBAAA,CAAA,gCAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,UAAA,CAAA,oBAAA;;;;"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import insertStyle from '../../_virtual/____insertStyle.js';
|
|
2
|
+
|
|
3
|
+
insertStyle("._channelMark_1errh_1 {\n width: var(--channel-mark-size, var(--sizes-lg));\n height: var(--channel-mark-size, var(--sizes-lg));\n border: var(--sizes-line) solid var(--custom-border-color, var(--colors-neutral-grey-base));\n border-radius: var(--radius-full);\n position: relative;\n}\n\n._transparentBackground_1errh_9 {\n --custom-border-color: transparent;\n}\n\n._indicatorIcon_1errh_13 {\n position: absolute;\n /* Calculate offset as roughly 30% of icon size, with fallback */\n top: calc(-0.3 * var(--indicator-icon-size, var(--sizes-base)));\n right: calc(-0.3 * var(--indicator-icon-size, var(--sizes-base)));\n width: var(--indicator-icon-size, var(--sizes-lg));\n height: var(--indicator-icon-size, var(--sizes-lg));\n}\n\n._md-size_1errh_22 {\n --indicator-icon-size: var(--sizes-3);\n --channel-mark-size: var(--sizes-md);\n}\n\n._lg-size_1errh_27 {\n --indicator-icon-size: var(--sizes-base);\n --channel-mark-size: var(--sizes-lg);\n}\n\n._xl-size_1errh_32 {\n --indicator-icon-size: var(--sizes-7);\n --channel-mark-size: var(--sizes-xl);\n}\n\n._xxl-size_1errh_37 {\n --indicator-icon-size: var(--sizes-lg);\n --channel-mark-size: var(--sizes-xxl);\n}");
|
|
4
|
+
var styles = {"channelMark":"_channelMark_1errh_1","transparentBackground":"_transparentBackground_1errh_9","indicatorIcon":"_indicatorIcon_1errh_13","md-size":"_md-size_1errh_22","lg-size":"_lg-size_1errh_27","xl-size":"_xl-size_1errh_32","xxl-size":"_xxl-size_1errh_37"};
|
|
5
|
+
|
|
6
|
+
export { styles as default };
|
|
7
|
+
//# sourceMappingURL=ChannelMark.module.scss.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ChannelMark.module.scss.js","sources":["../../../src/components/ChannelMark/ChannelMark.module.scss"],"sourcesContent":["@use 'sass:map';\n@use './variables.scss' as vars;\n\n.channelMark {\n width: var(--channel-mark-size, var(--sizes-lg));\n height: var(--channel-mark-size, var(--sizes-lg));\n border: var(--sizes-line) solid var(--custom-border-color, var(--colors-neutral-grey-base));\n border-radius: var(--radius-full);\n position: relative;\n}\n\n.transparentBackground {\n --custom-border-color: transparent;\n}\n\n.indicatorIcon {\n position: absolute;\n /* Calculate offset as roughly 30% of icon size, with fallback */\n top: calc(-0.3 * var(--indicator-icon-size, var(--sizes-base)));\n right: calc(-0.3 * var(--indicator-icon-size, var(--sizes-base)));\n width: var(--indicator-icon-size, var(--sizes-lg));\n height: var(--indicator-icon-size, var(--sizes-lg));\n}\n\n@each $size, $var in vars.$indicator-sizes {\n .#{$size}-size {\n --indicator-icon-size: #{$var};\n --channel-mark-size: #{map.get(vars.$channel-mark-sizes, $size)};\n }\n}\n"],"names":["___$insertStyle"],"mappings":";;AAIEA,WAAA,CAAA,uqCAAA;AACA,aAAA,CAAA,aAAA,CAAA,sBAAA,CAAA,uBAAA,CAAA,gCAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,UAAA,CAAA,oBAAA;;;;"}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
const ChannelTypeMap = {
|
|
4
|
+
abebooks: 'Abebooks',
|
|
5
|
+
alibaba: 'Alibaba',
|
|
6
|
+
aliexpress: 'Aliexpress',
|
|
7
|
+
amazon: 'Amazon',
|
|
8
|
+
amazon_fba: 'Fba',
|
|
9
|
+
api: 'Api',
|
|
10
|
+
bestbuy: 'BestBuy',
|
|
11
|
+
bigcommerce: 'BigCommerce',
|
|
12
|
+
bigcommerce_legacy: 'BigCommerce',
|
|
13
|
+
cdiscount: 'Cdiscount',
|
|
14
|
+
csv: 'Csv',
|
|
15
|
+
custom: 'Custom',
|
|
16
|
+
custom_integration: 'Custom',
|
|
17
|
+
direct: 'Phone',
|
|
18
|
+
ebay: 'Ebay',
|
|
19
|
+
etsy: 'Etsy',
|
|
20
|
+
facebook: 'Facebook',
|
|
21
|
+
groupon: 'Groupon',
|
|
22
|
+
houzz: 'Houzz',
|
|
23
|
+
instagram: 'Instagram',
|
|
24
|
+
lightspeed: 'Lightspeed',
|
|
25
|
+
lowes: 'Lowes',
|
|
26
|
+
macys: 'Macys',
|
|
27
|
+
magento: 'Magento',
|
|
28
|
+
magento_direct: 'Magento',
|
|
29
|
+
netsuite: 'Netsuite',
|
|
30
|
+
newegg: 'Newegg',
|
|
31
|
+
noths: 'Noths',
|
|
32
|
+
opencart: 'Opencart',
|
|
33
|
+
phone: 'Phone',
|
|
34
|
+
point_of_sale: 'Pos',
|
|
35
|
+
prestashop: 'PrestaShop',
|
|
36
|
+
price_minister: 'Rakuten',
|
|
37
|
+
prime: 'Prime',
|
|
38
|
+
quicklabel: 'QuickLabel',
|
|
39
|
+
rakuten: 'Rakuten',
|
|
40
|
+
retail: 'Retail',
|
|
41
|
+
rithum: 'Rithum',
|
|
42
|
+
sears: 'Sears',
|
|
43
|
+
sellercloud: 'Sellercloud',
|
|
44
|
+
shein: 'Shein',
|
|
45
|
+
shopify: 'Shopify',
|
|
46
|
+
shopify_pos: 'ShopifyPos',
|
|
47
|
+
squarespace: 'Squarespace',
|
|
48
|
+
sub_magento: 'Magento',
|
|
49
|
+
sub_woocommerce: 'WooCommerce',
|
|
50
|
+
target: 'Target',
|
|
51
|
+
temu: 'Temu',
|
|
52
|
+
tiktok: 'TikTok',
|
|
53
|
+
veeqo: 'Veeqo',
|
|
54
|
+
vend: 'Lightspeed',
|
|
55
|
+
walmart: 'Walmart',
|
|
56
|
+
warehouse: 'Warehouse',
|
|
57
|
+
wayfair: 'Wayfair',
|
|
58
|
+
wholesale: 'Wholesale',
|
|
59
|
+
wix: 'Wix',
|
|
60
|
+
woocommerce: 'WooCommerce',
|
|
61
|
+
};
|
|
62
|
+
const VariantTypeMap = {
|
|
63
|
+
transparent: 'transparent_bg',
|
|
64
|
+
brand: 'brand_bg',
|
|
65
|
+
white: 'white_bg',
|
|
66
|
+
};
|
|
67
|
+
|
|
68
|
+
exports.ChannelTypeMap = ChannelTypeMap;
|
|
69
|
+
exports.VariantTypeMap = VariantTypeMap;
|
|
70
|
+
//# sourceMappingURL=constants.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"constants.cjs","sources":["../../../src/components/ChannelMark/constants.ts"],"sourcesContent":["export const ChannelTypeMap = {\n abebooks: 'Abebooks',\n alibaba: 'Alibaba',\n aliexpress: 'Aliexpress',\n amazon: 'Amazon',\n amazon_fba: 'Fba',\n api: 'Api',\n bestbuy: 'BestBuy',\n bigcommerce: 'BigCommerce',\n bigcommerce_legacy: 'BigCommerce',\n cdiscount: 'Cdiscount',\n csv: 'Csv',\n custom: 'Custom',\n custom_integration: 'Custom',\n direct: 'Phone',\n ebay: 'Ebay',\n etsy: 'Etsy',\n facebook: 'Facebook',\n groupon: 'Groupon',\n houzz: 'Houzz',\n instagram: 'Instagram',\n lightspeed: 'Lightspeed',\n lowes: 'Lowes',\n macys: 'Macys',\n magento: 'Magento',\n magento_direct: 'Magento',\n netsuite: 'Netsuite',\n newegg: 'Newegg',\n noths: 'Noths',\n opencart: 'Opencart',\n phone: 'Phone',\n point_of_sale: 'Pos',\n prestashop: 'PrestaShop',\n price_minister: 'Rakuten',\n prime: 'Prime',\n quicklabel: 'QuickLabel',\n rakuten: 'Rakuten',\n retail: 'Retail',\n rithum: 'Rithum',\n sears: 'Sears',\n sellercloud: 'Sellercloud',\n shein: 'Shein',\n shopify: 'Shopify',\n shopify_pos: 'ShopifyPos',\n squarespace: 'Squarespace',\n sub_magento: 'Magento',\n sub_woocommerce: 'WooCommerce',\n target: 'Target',\n temu: 'Temu',\n tiktok: 'TikTok',\n veeqo: 'Veeqo',\n vend: 'Lightspeed', // vend was acquired by lightspeed\n walmart: 'Walmart',\n warehouse: 'Warehouse',\n wayfair: 'Wayfair',\n wholesale: 'Wholesale',\n wix: 'Wix',\n woocommerce: 'WooCommerce',\n};\n\nexport const VariantTypeMap = {\n transparent: 'transparent_bg',\n brand: 'brand_bg',\n white: 'white_bg',\n};\n"],"names":[],"mappings":";;AAAa,MAAA,cAAc,GAAG;AAC5B,IAAA,QAAQ,EAAE,UAAU;AACpB,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,UAAU,EAAE,YAAY;AACxB,IAAA,MAAM,EAAE,QAAQ;AAChB,IAAA,UAAU,EAAE,KAAK;AACjB,IAAA,GAAG,EAAE,KAAK;AACV,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,WAAW,EAAE,aAAa;AAC1B,IAAA,kBAAkB,EAAE,aAAa;AACjC,IAAA,SAAS,EAAE,WAAW;AACtB,IAAA,GAAG,EAAE,KAAK;AACV,IAAA,MAAM,EAAE,QAAQ;AAChB,IAAA,kBAAkB,EAAE,QAAQ;AAC5B,IAAA,MAAM,EAAE,OAAO;AACf,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,QAAQ,EAAE,UAAU;AACpB,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,KAAK,EAAE,OAAO;AACd,IAAA,SAAS,EAAE,WAAW;AACtB,IAAA,UAAU,EAAE,YAAY;AACxB,IAAA,KAAK,EAAE,OAAO;AACd,IAAA,KAAK,EAAE,OAAO;AACd,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,cAAc,EAAE,SAAS;AACzB,IAAA,QAAQ,EAAE,UAAU;AACpB,IAAA,MAAM,EAAE,QAAQ;AAChB,IAAA,KAAK,EAAE,OAAO;AACd,IAAA,QAAQ,EAAE,UAAU;AACpB,IAAA,KAAK,EAAE,OAAO;AACd,IAAA,aAAa,EAAE,KAAK;AACpB,IAAA,UAAU,EAAE,YAAY;AACxB,IAAA,cAAc,EAAE,SAAS;AACzB,IAAA,KAAK,EAAE,OAAO;AACd,IAAA,UAAU,EAAE,YAAY;AACxB,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,MAAM,EAAE,QAAQ;AAChB,IAAA,MAAM,EAAE,QAAQ;AAChB,IAAA,KAAK,EAAE,OAAO;AACd,IAAA,WAAW,EAAE,aAAa;AAC1B,IAAA,KAAK,EAAE,OAAO;AACd,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,WAAW,EAAE,YAAY;AACzB,IAAA,WAAW,EAAE,aAAa;AAC1B,IAAA,WAAW,EAAE,SAAS;AACtB,IAAA,eAAe,EAAE,aAAa;AAC9B,IAAA,MAAM,EAAE,QAAQ;AAChB,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,MAAM,EAAE,QAAQ;AAChB,IAAA,KAAK,EAAE,OAAO;AACd,IAAA,IAAI,EAAE,YAAY;AAClB,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,SAAS,EAAE,WAAW;AACtB,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,SAAS,EAAE,WAAW;AACtB,IAAA,GAAG,EAAE,KAAK;AACV,IAAA,WAAW,EAAE,aAAa;;AAGf,MAAA,cAAc,GAAG;AAC5B,IAAA,WAAW,EAAE,gBAAgB;AAC7B,IAAA,KAAK,EAAE,UAAU;AACjB,IAAA,KAAK,EAAE,UAAU;;;;;;"}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
export declare const ChannelTypeMap: {
|
|
2
|
+
abebooks: string;
|
|
3
|
+
alibaba: string;
|
|
4
|
+
aliexpress: string;
|
|
5
|
+
amazon: string;
|
|
6
|
+
amazon_fba: string;
|
|
7
|
+
api: string;
|
|
8
|
+
bestbuy: string;
|
|
9
|
+
bigcommerce: string;
|
|
10
|
+
bigcommerce_legacy: string;
|
|
11
|
+
cdiscount: string;
|
|
12
|
+
csv: string;
|
|
13
|
+
custom: string;
|
|
14
|
+
custom_integration: string;
|
|
15
|
+
direct: string;
|
|
16
|
+
ebay: string;
|
|
17
|
+
etsy: string;
|
|
18
|
+
facebook: string;
|
|
19
|
+
groupon: string;
|
|
20
|
+
houzz: string;
|
|
21
|
+
instagram: string;
|
|
22
|
+
lightspeed: string;
|
|
23
|
+
lowes: string;
|
|
24
|
+
macys: string;
|
|
25
|
+
magento: string;
|
|
26
|
+
magento_direct: string;
|
|
27
|
+
netsuite: string;
|
|
28
|
+
newegg: string;
|
|
29
|
+
noths: string;
|
|
30
|
+
opencart: string;
|
|
31
|
+
phone: string;
|
|
32
|
+
point_of_sale: string;
|
|
33
|
+
prestashop: string;
|
|
34
|
+
price_minister: string;
|
|
35
|
+
prime: string;
|
|
36
|
+
quicklabel: string;
|
|
37
|
+
rakuten: string;
|
|
38
|
+
retail: string;
|
|
39
|
+
rithum: string;
|
|
40
|
+
sears: string;
|
|
41
|
+
sellercloud: string;
|
|
42
|
+
shein: string;
|
|
43
|
+
shopify: string;
|
|
44
|
+
shopify_pos: string;
|
|
45
|
+
squarespace: string;
|
|
46
|
+
sub_magento: string;
|
|
47
|
+
sub_woocommerce: string;
|
|
48
|
+
target: string;
|
|
49
|
+
temu: string;
|
|
50
|
+
tiktok: string;
|
|
51
|
+
veeqo: string;
|
|
52
|
+
vend: string;
|
|
53
|
+
walmart: string;
|
|
54
|
+
warehouse: string;
|
|
55
|
+
wayfair: string;
|
|
56
|
+
wholesale: string;
|
|
57
|
+
wix: string;
|
|
58
|
+
woocommerce: string;
|
|
59
|
+
};
|
|
60
|
+
export declare const VariantTypeMap: {
|
|
61
|
+
transparent: string;
|
|
62
|
+
brand: string;
|
|
63
|
+
white: string;
|
|
64
|
+
};
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
const ChannelTypeMap = {
|
|
2
|
+
abebooks: 'Abebooks',
|
|
3
|
+
alibaba: 'Alibaba',
|
|
4
|
+
aliexpress: 'Aliexpress',
|
|
5
|
+
amazon: 'Amazon',
|
|
6
|
+
amazon_fba: 'Fba',
|
|
7
|
+
api: 'Api',
|
|
8
|
+
bestbuy: 'BestBuy',
|
|
9
|
+
bigcommerce: 'BigCommerce',
|
|
10
|
+
bigcommerce_legacy: 'BigCommerce',
|
|
11
|
+
cdiscount: 'Cdiscount',
|
|
12
|
+
csv: 'Csv',
|
|
13
|
+
custom: 'Custom',
|
|
14
|
+
custom_integration: 'Custom',
|
|
15
|
+
direct: 'Phone',
|
|
16
|
+
ebay: 'Ebay',
|
|
17
|
+
etsy: 'Etsy',
|
|
18
|
+
facebook: 'Facebook',
|
|
19
|
+
groupon: 'Groupon',
|
|
20
|
+
houzz: 'Houzz',
|
|
21
|
+
instagram: 'Instagram',
|
|
22
|
+
lightspeed: 'Lightspeed',
|
|
23
|
+
lowes: 'Lowes',
|
|
24
|
+
macys: 'Macys',
|
|
25
|
+
magento: 'Magento',
|
|
26
|
+
magento_direct: 'Magento',
|
|
27
|
+
netsuite: 'Netsuite',
|
|
28
|
+
newegg: 'Newegg',
|
|
29
|
+
noths: 'Noths',
|
|
30
|
+
opencart: 'Opencart',
|
|
31
|
+
phone: 'Phone',
|
|
32
|
+
point_of_sale: 'Pos',
|
|
33
|
+
prestashop: 'PrestaShop',
|
|
34
|
+
price_minister: 'Rakuten',
|
|
35
|
+
prime: 'Prime',
|
|
36
|
+
quicklabel: 'QuickLabel',
|
|
37
|
+
rakuten: 'Rakuten',
|
|
38
|
+
retail: 'Retail',
|
|
39
|
+
rithum: 'Rithum',
|
|
40
|
+
sears: 'Sears',
|
|
41
|
+
sellercloud: 'Sellercloud',
|
|
42
|
+
shein: 'Shein',
|
|
43
|
+
shopify: 'Shopify',
|
|
44
|
+
shopify_pos: 'ShopifyPos',
|
|
45
|
+
squarespace: 'Squarespace',
|
|
46
|
+
sub_magento: 'Magento',
|
|
47
|
+
sub_woocommerce: 'WooCommerce',
|
|
48
|
+
target: 'Target',
|
|
49
|
+
temu: 'Temu',
|
|
50
|
+
tiktok: 'TikTok',
|
|
51
|
+
veeqo: 'Veeqo',
|
|
52
|
+
vend: 'Lightspeed',
|
|
53
|
+
walmart: 'Walmart',
|
|
54
|
+
warehouse: 'Warehouse',
|
|
55
|
+
wayfair: 'Wayfair',
|
|
56
|
+
wholesale: 'Wholesale',
|
|
57
|
+
wix: 'Wix',
|
|
58
|
+
woocommerce: 'WooCommerce',
|
|
59
|
+
};
|
|
60
|
+
const VariantTypeMap = {
|
|
61
|
+
transparent: 'transparent_bg',
|
|
62
|
+
brand: 'brand_bg',
|
|
63
|
+
white: 'white_bg',
|
|
64
|
+
};
|
|
65
|
+
|
|
66
|
+
export { ChannelTypeMap, VariantTypeMap };
|
|
67
|
+
//# sourceMappingURL=constants.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"constants.js","sources":["../../../src/components/ChannelMark/constants.ts"],"sourcesContent":["export const ChannelTypeMap = {\n abebooks: 'Abebooks',\n alibaba: 'Alibaba',\n aliexpress: 'Aliexpress',\n amazon: 'Amazon',\n amazon_fba: 'Fba',\n api: 'Api',\n bestbuy: 'BestBuy',\n bigcommerce: 'BigCommerce',\n bigcommerce_legacy: 'BigCommerce',\n cdiscount: 'Cdiscount',\n csv: 'Csv',\n custom: 'Custom',\n custom_integration: 'Custom',\n direct: 'Phone',\n ebay: 'Ebay',\n etsy: 'Etsy',\n facebook: 'Facebook',\n groupon: 'Groupon',\n houzz: 'Houzz',\n instagram: 'Instagram',\n lightspeed: 'Lightspeed',\n lowes: 'Lowes',\n macys: 'Macys',\n magento: 'Magento',\n magento_direct: 'Magento',\n netsuite: 'Netsuite',\n newegg: 'Newegg',\n noths: 'Noths',\n opencart: 'Opencart',\n phone: 'Phone',\n point_of_sale: 'Pos',\n prestashop: 'PrestaShop',\n price_minister: 'Rakuten',\n prime: 'Prime',\n quicklabel: 'QuickLabel',\n rakuten: 'Rakuten',\n retail: 'Retail',\n rithum: 'Rithum',\n sears: 'Sears',\n sellercloud: 'Sellercloud',\n shein: 'Shein',\n shopify: 'Shopify',\n shopify_pos: 'ShopifyPos',\n squarespace: 'Squarespace',\n sub_magento: 'Magento',\n sub_woocommerce: 'WooCommerce',\n target: 'Target',\n temu: 'Temu',\n tiktok: 'TikTok',\n veeqo: 'Veeqo',\n vend: 'Lightspeed', // vend was acquired by lightspeed\n walmart: 'Walmart',\n warehouse: 'Warehouse',\n wayfair: 'Wayfair',\n wholesale: 'Wholesale',\n wix: 'Wix',\n woocommerce: 'WooCommerce',\n};\n\nexport const VariantTypeMap = {\n transparent: 'transparent_bg',\n brand: 'brand_bg',\n white: 'white_bg',\n};\n"],"names":[],"mappings":"AAAa,MAAA,cAAc,GAAG;AAC5B,IAAA,QAAQ,EAAE,UAAU;AACpB,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,UAAU,EAAE,YAAY;AACxB,IAAA,MAAM,EAAE,QAAQ;AAChB,IAAA,UAAU,EAAE,KAAK;AACjB,IAAA,GAAG,EAAE,KAAK;AACV,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,WAAW,EAAE,aAAa;AAC1B,IAAA,kBAAkB,EAAE,aAAa;AACjC,IAAA,SAAS,EAAE,WAAW;AACtB,IAAA,GAAG,EAAE,KAAK;AACV,IAAA,MAAM,EAAE,QAAQ;AAChB,IAAA,kBAAkB,EAAE,QAAQ;AAC5B,IAAA,MAAM,EAAE,OAAO;AACf,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,QAAQ,EAAE,UAAU;AACpB,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,KAAK,EAAE,OAAO;AACd,IAAA,SAAS,EAAE,WAAW;AACtB,IAAA,UAAU,EAAE,YAAY;AACxB,IAAA,KAAK,EAAE,OAAO;AACd,IAAA,KAAK,EAAE,OAAO;AACd,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,cAAc,EAAE,SAAS;AACzB,IAAA,QAAQ,EAAE,UAAU;AACpB,IAAA,MAAM,EAAE,QAAQ;AAChB,IAAA,KAAK,EAAE,OAAO;AACd,IAAA,QAAQ,EAAE,UAAU;AACpB,IAAA,KAAK,EAAE,OAAO;AACd,IAAA,aAAa,EAAE,KAAK;AACpB,IAAA,UAAU,EAAE,YAAY;AACxB,IAAA,cAAc,EAAE,SAAS;AACzB,IAAA,KAAK,EAAE,OAAO;AACd,IAAA,UAAU,EAAE,YAAY;AACxB,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,MAAM,EAAE,QAAQ;AAChB,IAAA,MAAM,EAAE,QAAQ;AAChB,IAAA,KAAK,EAAE,OAAO;AACd,IAAA,WAAW,EAAE,aAAa;AAC1B,IAAA,KAAK,EAAE,OAAO;AACd,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,WAAW,EAAE,YAAY;AACzB,IAAA,WAAW,EAAE,aAAa;AAC1B,IAAA,WAAW,EAAE,SAAS;AACtB,IAAA,eAAe,EAAE,aAAa;AAC9B,IAAA,MAAM,EAAE,QAAQ;AAChB,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,MAAM,EAAE,QAAQ;AAChB,IAAA,KAAK,EAAE,OAAO;AACd,IAAA,IAAI,EAAE,YAAY;AAClB,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,SAAS,EAAE,WAAW;AACtB,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,SAAS,EAAE,WAAW;AACtB,IAAA,GAAG,EAAE,KAAK;AACV,IAAA,WAAW,EAAE,aAAa;;AAGf,MAAA,cAAc,GAAG;AAC5B,IAAA,WAAW,EAAE,gBAAgB;AAC7B,IAAA,KAAK,EAAE,UAAU;AACjB,IAAA,KAAK,EAAE,UAAU;;;;;"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { HTMLAttributes } from 'react';
|
|
2
|
+
import { ChannelTypeMap, VariantTypeMap } from './constants';
|
|
3
|
+
import { AvatarSize } from '../Avatar/types';
|
|
4
|
+
export type ChannelMarkProps = HTMLAttributes<HTMLDivElement> & {
|
|
5
|
+
typeCode: string;
|
|
6
|
+
variant?: keyof typeof VariantTypeMap;
|
|
7
|
+
hasError?: boolean;
|
|
8
|
+
size?: keyof typeof AvatarSize;
|
|
9
|
+
className?: string;
|
|
10
|
+
style?: React.CSSProperties;
|
|
11
|
+
};
|
|
12
|
+
export type ChannelTypeCode = keyof typeof ChannelTypeMap;
|
|
@@ -42,7 +42,8 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
|
42
42
|
*
|
|
43
43
|
* *Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.*
|
|
44
44
|
*/
|
|
45
|
-
const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resizeMode = 'off', containerStyle, enableKeyboardNavigation = false, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, rowThemes, sortState, onSortChanged, selectionMode, selectedRows, disabledRows, onSelectionChanged, rowGrouping, columnWidths, onColumnsResized, isLoading, loadingRowCount, emptyState, emptySlot, id, className, 'aria-label': ariaLabel, }) => {
|
|
45
|
+
const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resizeMode = 'off', containerStyle, enableKeyboardNavigation = false, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, rowThemes, sortState, onSortChanged, selectionMode, selectedRows, disabledRows, hideSelectionForRows, onSelectionChanged, rowGrouping, columnWidths, onColumnsResized, isLoading, loadingRowCount, emptyState, emptySlot, id, className, 'aria-label': ariaLabel, }) => {
|
|
46
|
+
var _a;
|
|
46
47
|
/**
|
|
47
48
|
* Refs to the table and table container. Used for keyboard navigation and drag-to-scroll.
|
|
48
49
|
*/
|
|
@@ -58,17 +59,25 @@ const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resiz
|
|
|
58
59
|
const showFooter = React.useMemo(() => !isLoading && columns.some((column) => column.renderFooter), [isLoading, columns]);
|
|
59
60
|
const ariaRoles = React.useMemo(() => getAriaRoles.getAriaRoles({ enableKeyboardNavigation, rowGrouping }), [enableKeyboardNavigation, rowGrouping]);
|
|
60
61
|
const enableColumnResizing = React.useMemo(() => resizeMode !== 'off', [resizeMode]);
|
|
62
|
+
const allDisabledRows = React.useMemo(() => {
|
|
63
|
+
const unique = new Set(disabledRows || []);
|
|
64
|
+
if (hideSelectionForRows) {
|
|
65
|
+
hideSelectionForRows.forEach((rowId) => unique.add(rowId));
|
|
66
|
+
}
|
|
67
|
+
return Array.from(unique);
|
|
68
|
+
}, [disabledRows, hideSelectionForRows]);
|
|
61
69
|
/**
|
|
62
70
|
* Hooks to handle state for selection, sorting, and expanded/collapsed.
|
|
63
71
|
*/
|
|
64
72
|
const { enableRowSelection, enableMultiRowSelection, rowSelection, onRowSelectionChange } = useSelectionState.useSelectionState({
|
|
65
73
|
selectionMode,
|
|
66
74
|
selectedRows,
|
|
67
|
-
disabledRows,
|
|
75
|
+
disabledRows: allDisabledRows,
|
|
68
76
|
onSelectionChanged,
|
|
69
77
|
});
|
|
70
78
|
const { enableSorting, enableMultiRemove, enableSortingRemoval, manualSorting, sorting, onSortingChange, } = useSortingState.useSortingState({ columns, sortState, onSortChanged });
|
|
71
79
|
const { expanded, onExpandedChange, enableExpanding, getRowCanExpand, getSubRows } = useExpandedState.useExpandedState(rowGrouping);
|
|
80
|
+
const showExpandButton = (_a = rowGrouping === null || rowGrouping === undefined ? undefined : rowGrouping.showExpandButton) !== null && _a !== undefined ? _a : true;
|
|
72
81
|
/**
|
|
73
82
|
* Hooks to setup column state, including visibility, ordering, pinning, and width(s).
|
|
74
83
|
*/
|
|
@@ -128,6 +137,8 @@ const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resiz
|
|
|
128
137
|
},
|
|
129
138
|
meta: {
|
|
130
139
|
rangeSelectionState,
|
|
140
|
+
showExpandButton,
|
|
141
|
+
hideSelectionForRows,
|
|
131
142
|
},
|
|
132
143
|
});
|
|
133
144
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataGrid.cjs","sources":["../../../src/components/DataGrid/DataGrid.tsx"],"sourcesContent":["import React, { useMemo, useRef } from 'react';\nimport { getCoreRowModel, getExpandedRowModel, useReactTable } from '@tanstack/react-table';\n\nimport { useDragToScroll } from '../../hooks';\n\nimport { DataGridProps } from './types';\nimport { getAriaRoles } from './utils';\nimport { GridContainer, Header, Body, Footer, Columns } from './components';\nimport { EmptyBody, LoadingBody, MemoizedBody } from './components/Body';\n\nimport {\n usePinnedColumnLayout,\n useSortingState,\n useKeyboardNavigation,\n useColumnState,\n useExpandedState,\n useColumnWidthState,\n useSelectionState,\n} from './hooks';\n\n/**\n * A DataGrid component which renders data in a two-dimensional format, with columns and rows. Unlike the `DataTable`\n * component, the `DataGrid` supports both flat and hierarchical (tree) data.\n *\n * Under the hood, it uses [TanStack Table](http://tanstack.com/table/) for table management, and aims to replicate functionality\n * available in major third party grid components such as CloudScape's Table component, AgGrid, etc.\n *\n * Supported features include:\n * - Pinning, resizing (incl. smooth resizing), reordering, and hiding of columns\n * - Selection (single and multiple) and disabling of rows.\n * - Rendering of arbitrarily nested data, expanding/collapsing, and custom full-width 'group' rows.\n * - In-built keyboard navigation with arrow keys, and drag to scroll.\n * - Configurable density.\n *\n * *Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.*\n */\nexport const DataGrid = ({\n density = 'base',\n striped = true,\n borderMode = 'full',\n resizeMode = 'off',\n containerStyle,\n enableKeyboardNavigation = false,\n\n columns,\n hiddenColumns,\n columnOrdering,\n pinnedColumns,\n\n data,\n getRowId,\n rowThemes,\n\n sortState,\n onSortChanged,\n\n selectionMode,\n selectedRows,\n disabledRows,\n onSelectionChanged,\n\n rowGrouping,\n\n columnWidths,\n onColumnsResized,\n\n isLoading,\n loadingRowCount,\n\n emptyState,\n emptySlot,\n\n id,\n className,\n 'aria-label': ariaLabel,\n}: DataGridProps) => {\n /**\n * Refs to the table and table container. Used for keyboard navigation and drag-to-scroll.\n */\n const containerRef = useRef<HTMLDivElement>(null);\n const tableRef = useRef<HTMLTableElement>(null);\n\n /**\n * Mutable object to track shift key state and last selected row for range selection.\n */\n const rangeSelectionState = useRef({\n lastSelectedRowId: undefined as string | undefined,\n isShiftKeyPressed: false,\n }).current;\n\n const showFooter = useMemo(\n () => !isLoading && columns.some((column) => column.renderFooter),\n [isLoading, columns],\n );\n const ariaRoles = useMemo(\n () => getAriaRoles({ enableKeyboardNavigation, rowGrouping }),\n [enableKeyboardNavigation, rowGrouping],\n );\n const enableColumnResizing = useMemo(() => resizeMode !== 'off', [resizeMode]);\n\n /**\n * Hooks to handle state for selection, sorting, and expanded/collapsed.\n */\n const { enableRowSelection, enableMultiRowSelection, rowSelection, onRowSelectionChange } =\n useSelectionState({\n selectionMode,\n selectedRows,\n disabledRows,\n onSelectionChanged,\n });\n\n const {\n enableSorting,\n enableMultiRemove,\n enableSortingRemoval,\n manualSorting,\n sorting,\n onSortingChange,\n } = useSortingState({ columns, sortState, onSortChanged });\n\n const { expanded, onExpandedChange, enableExpanding, getRowCanExpand, getSubRows } =\n useExpandedState(rowGrouping);\n\n /**\n * Hooks to setup column state, including visibility, ordering, pinning, and width(s).\n */\n const { mappedColumnDefinitions, columnOrder, columnVisibility, columnPinning } = useColumnState({\n columns,\n hiddenColumns,\n columnOrdering,\n pinnedColumns,\n enableRowSelection: !!enableRowSelection,\n });\n\n const { columnSizing, onColumnSizingChange } = useColumnWidthState({\n mappedColumnDefinitions,\n columnWidths,\n onColumnsResized,\n });\n\n /**\n * Setup the TanStack table, including mapped column definitions, row data, and any additional state such as\n * column visibility and ordering.\n */\n const table = useReactTable<any>({\n data,\n columns: mappedColumnDefinitions,\n\n // Column settings\n columnResizeMode: resizeMode === 'off' ? undefined : resizeMode,\n enableColumnResizing,\n onColumnSizingChange,\n\n // Row model\n getRowId,\n getCoreRowModel: getCoreRowModel(),\n\n // Sorting\n enableSorting,\n enableSortingRemoval,\n enableMultiRemove,\n manualSorting,\n onSortingChange,\n\n // Pinning\n enableColumnPinning: columnPinning.left.length + columnPinning.right.length > 0,\n\n // Selection\n enableRowSelection,\n enableMultiRowSelection,\n onRowSelectionChange,\n\n // Row grouping\n getSubRows,\n getRowCanExpand,\n onExpandedChange,\n enableExpanding,\n getExpandedRowModel: enableExpanding ? getExpandedRowModel() : undefined,\n\n // Inject external table state\n state: {\n columnOrder,\n columnVisibility,\n columnPinning,\n sorting,\n rowSelection,\n expanded,\n columnSizing,\n },\n meta: {\n rangeSelectionState,\n },\n });\n\n /**\n * Pinned column layout\n */\n const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n\n /**\n * Other hooks\n */\n useDragToScroll({ targetRef: containerRef, ignoreClassName: 'data-grid-column-resizer' });\n useKeyboardNavigation({ tableRef, enableKeyboardNavigation });\n\n const renderBody = () => {\n if (isLoading) {\n return <LoadingBody table={table} loadingRowCount={loadingRowCount ?? 5} striped={striped} />;\n }\n\n if (data.length === 0) {\n return <EmptyBody table={table} emptyState={emptyState} emptySlot={emptySlot} />;\n }\n\n const bodyProps = {\n table,\n ariaRoles,\n striped,\n rowThemes,\n };\n\n if (table.getState().columnSizingInfo.isResizingColumn) {\n return <MemoizedBody {...bodyProps} />;\n }\n\n return <Body {...bodyProps} />;\n };\n\n return (\n <GridContainer\n containerRef={containerRef}\n tableRef={tableRef}\n borderMode={borderMode}\n containerStyles={{ ...containerStyle, ...pinnedColumnLayoutStyles }}\n ariaRoles={ariaRoles}\n enableResizeableColumns={enableColumnResizing}\n density={density}\n table={table}\n id={id}\n className={className}\n aria-label={ariaLabel}\n >\n {/* Columns */}\n {enableColumnResizing && <Columns table={table} />}\n\n {/* Header */}\n <Header table={table} />\n\n {/* Body */}\n {renderBody()}\n\n {/* Footer */}\n {showFooter && <Footer table={table} ariaRoles={ariaRoles} />}\n </GridContainer>\n );\n};\n"],"names":["useRef","useMemo","getAriaRoles","useSelectionState","useSortingState","useExpandedState","useColumnState","useColumnWidthState","useReactTable","getCoreRowModel","getExpandedRowModel","usePinnedColumnLayout","useDragToScroll","useKeyboardNavigation","React","LoadingBody","EmptyBody","MemoizedBody","Body","GridContainer","Columns","Header","Footer"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DataGrid.cjs","sources":["../../../src/components/DataGrid/DataGrid.tsx"],"sourcesContent":["import React, { useMemo, useRef } from 'react';\nimport { getCoreRowModel, getExpandedRowModel, useReactTable } from '@tanstack/react-table';\n\nimport { useDragToScroll } from '../../hooks';\n\nimport { DataGridProps } from './types';\nimport { getAriaRoles } from './utils';\nimport { GridContainer, Header, Body, Footer, Columns } from './components';\nimport { EmptyBody, LoadingBody, MemoizedBody } from './components/Body';\n\nimport {\n usePinnedColumnLayout,\n useSortingState,\n useKeyboardNavigation,\n useColumnState,\n useExpandedState,\n useColumnWidthState,\n useSelectionState,\n} from './hooks';\n\n/**\n * A DataGrid component which renders data in a two-dimensional format, with columns and rows. Unlike the `DataTable`\n * component, the `DataGrid` supports both flat and hierarchical (tree) data.\n *\n * Under the hood, it uses [TanStack Table](http://tanstack.com/table/) for table management, and aims to replicate functionality\n * available in major third party grid components such as CloudScape's Table component, AgGrid, etc.\n *\n * Supported features include:\n * - Pinning, resizing (incl. smooth resizing), reordering, and hiding of columns\n * - Selection (single and multiple) and disabling of rows.\n * - Rendering of arbitrarily nested data, expanding/collapsing, and custom full-width 'group' rows.\n * - In-built keyboard navigation with arrow keys, and drag to scroll.\n * - Configurable density.\n *\n * *Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.*\n */\nexport const DataGrid = ({\n density = 'base',\n striped = true,\n borderMode = 'full',\n resizeMode = 'off',\n containerStyle,\n enableKeyboardNavigation = false,\n\n columns,\n hiddenColumns,\n columnOrdering,\n pinnedColumns,\n\n data,\n getRowId,\n rowThemes,\n\n sortState,\n onSortChanged,\n\n selectionMode,\n selectedRows,\n disabledRows,\n hideSelectionForRows,\n onSelectionChanged,\n\n rowGrouping,\n\n columnWidths,\n onColumnsResized,\n\n isLoading,\n loadingRowCount,\n\n emptyState,\n emptySlot,\n\n id,\n className,\n 'aria-label': ariaLabel,\n}: DataGridProps) => {\n /**\n * Refs to the table and table container. Used for keyboard navigation and drag-to-scroll.\n */\n const containerRef = useRef<HTMLDivElement>(null);\n const tableRef = useRef<HTMLTableElement>(null);\n\n /**\n * Mutable object to track shift key state and last selected row for range selection.\n */\n const rangeSelectionState = useRef({\n lastSelectedRowId: undefined as string | undefined,\n isShiftKeyPressed: false,\n }).current;\n\n const showFooter = useMemo(\n () => !isLoading && columns.some((column) => column.renderFooter),\n [isLoading, columns],\n );\n const ariaRoles = useMemo(\n () => getAriaRoles({ enableKeyboardNavigation, rowGrouping }),\n [enableKeyboardNavigation, rowGrouping],\n );\n const enableColumnResizing = useMemo(() => resizeMode !== 'off', [resizeMode]);\n\n const allDisabledRows = useMemo(() => {\n const unique = new Set(disabledRows || []);\n if (hideSelectionForRows) {\n hideSelectionForRows.forEach((rowId) => unique.add(rowId));\n }\n return Array.from(unique);\n }, [disabledRows, hideSelectionForRows]);\n\n /**\n * Hooks to handle state for selection, sorting, and expanded/collapsed.\n */\n const { enableRowSelection, enableMultiRowSelection, rowSelection, onRowSelectionChange } =\n useSelectionState({\n selectionMode,\n selectedRows,\n disabledRows: allDisabledRows,\n onSelectionChanged,\n });\n\n const {\n enableSorting,\n enableMultiRemove,\n enableSortingRemoval,\n manualSorting,\n sorting,\n onSortingChange,\n } = useSortingState({ columns, sortState, onSortChanged });\n\n const { expanded, onExpandedChange, enableExpanding, getRowCanExpand, getSubRows } =\n useExpandedState(rowGrouping);\n\n const showExpandButton = rowGrouping?.showExpandButton ?? true;\n\n /**\n * Hooks to setup column state, including visibility, ordering, pinning, and width(s).\n */\n const { mappedColumnDefinitions, columnOrder, columnVisibility, columnPinning } = useColumnState({\n columns,\n hiddenColumns,\n columnOrdering,\n pinnedColumns,\n enableRowSelection: !!enableRowSelection,\n });\n\n const { columnSizing, onColumnSizingChange } = useColumnWidthState({\n mappedColumnDefinitions,\n columnWidths,\n onColumnsResized,\n });\n\n /**\n * Setup the TanStack table, including mapped column definitions, row data, and any additional state such as\n * column visibility and ordering.\n */\n const table = useReactTable<any>({\n data,\n columns: mappedColumnDefinitions,\n\n // Column settings\n columnResizeMode: resizeMode === 'off' ? undefined : resizeMode,\n enableColumnResizing,\n onColumnSizingChange,\n\n // Row model\n getRowId,\n getCoreRowModel: getCoreRowModel(),\n\n // Sorting\n enableSorting,\n enableSortingRemoval,\n enableMultiRemove,\n manualSorting,\n onSortingChange,\n\n // Pinning\n enableColumnPinning: columnPinning.left.length + columnPinning.right.length > 0,\n\n // Selection\n enableRowSelection,\n enableMultiRowSelection,\n onRowSelectionChange,\n\n // Row grouping\n getSubRows,\n getRowCanExpand,\n onExpandedChange,\n enableExpanding,\n getExpandedRowModel: enableExpanding ? getExpandedRowModel() : undefined,\n\n // Inject external table state\n state: {\n columnOrder,\n columnVisibility,\n columnPinning,\n sorting,\n rowSelection,\n expanded,\n columnSizing,\n },\n meta: {\n rangeSelectionState,\n showExpandButton,\n hideSelectionForRows,\n },\n });\n\n /**\n * Pinned column layout\n */\n const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n\n /**\n * Other hooks\n */\n useDragToScroll({ targetRef: containerRef, ignoreClassName: 'data-grid-column-resizer' });\n useKeyboardNavigation({ tableRef, enableKeyboardNavigation });\n\n const renderBody = () => {\n if (isLoading) {\n return <LoadingBody table={table} loadingRowCount={loadingRowCount ?? 5} striped={striped} />;\n }\n\n if (data.length === 0) {\n return <EmptyBody table={table} emptyState={emptyState} emptySlot={emptySlot} />;\n }\n\n const bodyProps = {\n table,\n ariaRoles,\n striped,\n rowThemes,\n };\n\n if (table.getState().columnSizingInfo.isResizingColumn) {\n return <MemoizedBody {...bodyProps} />;\n }\n\n return <Body {...bodyProps} />;\n };\n\n return (\n <GridContainer\n containerRef={containerRef}\n tableRef={tableRef}\n borderMode={borderMode}\n containerStyles={{ ...containerStyle, ...pinnedColumnLayoutStyles }}\n ariaRoles={ariaRoles}\n enableResizeableColumns={enableColumnResizing}\n density={density}\n table={table}\n id={id}\n className={className}\n aria-label={ariaLabel}\n >\n {/* Columns */}\n {enableColumnResizing && <Columns table={table} />}\n\n {/* Header */}\n <Header table={table} />\n\n {/* Body */}\n {renderBody()}\n\n {/* Footer */}\n {showFooter && <Footer table={table} ariaRoles={ariaRoles} />}\n </GridContainer>\n );\n};\n"],"names":["useRef","useMemo","getAriaRoles","useSelectionState","useSortingState","useExpandedState","useColumnState","useColumnWidthState","useReactTable","getCoreRowModel","getExpandedRowModel","usePinnedColumnLayout","useDragToScroll","useKeyboardNavigation","React","LoadingBody","EmptyBody","MemoizedBody","Body","GridContainer","Columns","Header","Footer"],"mappings":"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"}
|
|
@@ -16,4 +16,4 @@ import { DataGridProps } from './types';
|
|
|
16
16
|
*
|
|
17
17
|
* *Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.*
|
|
18
18
|
*/
|
|
19
|
-
export declare const DataGrid: ({ density, striped, borderMode, resizeMode, containerStyle, enableKeyboardNavigation, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, rowThemes, sortState, onSortChanged, selectionMode, selectedRows, disabledRows, onSelectionChanged, rowGrouping, columnWidths, onColumnsResized, isLoading, loadingRowCount, emptyState, emptySlot, id, className, "aria-label": ariaLabel, }: DataGridProps) => React.JSX.Element;
|
|
19
|
+
export declare const DataGrid: ({ density, striped, borderMode, resizeMode, containerStyle, enableKeyboardNavigation, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, rowThemes, sortState, onSortChanged, selectionMode, selectedRows, disabledRows, hideSelectionForRows, onSelectionChanged, rowGrouping, columnWidths, onColumnsResized, isLoading, loadingRowCount, emptyState, emptySlot, id, className, "aria-label": ariaLabel, }: DataGridProps) => React.JSX.Element;
|
|
@@ -36,7 +36,8 @@ import { useExpandedState } from './hooks/useExpandedState.js';
|
|
|
36
36
|
*
|
|
37
37
|
* *Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.*
|
|
38
38
|
*/
|
|
39
|
-
const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resizeMode = 'off', containerStyle, enableKeyboardNavigation = false, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, rowThemes, sortState, onSortChanged, selectionMode, selectedRows, disabledRows, onSelectionChanged, rowGrouping, columnWidths, onColumnsResized, isLoading, loadingRowCount, emptyState, emptySlot, id, className, 'aria-label': ariaLabel, }) => {
|
|
39
|
+
const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resizeMode = 'off', containerStyle, enableKeyboardNavigation = false, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, rowThemes, sortState, onSortChanged, selectionMode, selectedRows, disabledRows, hideSelectionForRows, onSelectionChanged, rowGrouping, columnWidths, onColumnsResized, isLoading, loadingRowCount, emptyState, emptySlot, id, className, 'aria-label': ariaLabel, }) => {
|
|
40
|
+
var _a;
|
|
40
41
|
/**
|
|
41
42
|
* Refs to the table and table container. Used for keyboard navigation and drag-to-scroll.
|
|
42
43
|
*/
|
|
@@ -52,17 +53,25 @@ const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resiz
|
|
|
52
53
|
const showFooter = useMemo(() => !isLoading && columns.some((column) => column.renderFooter), [isLoading, columns]);
|
|
53
54
|
const ariaRoles = useMemo(() => getAriaRoles({ enableKeyboardNavigation, rowGrouping }), [enableKeyboardNavigation, rowGrouping]);
|
|
54
55
|
const enableColumnResizing = useMemo(() => resizeMode !== 'off', [resizeMode]);
|
|
56
|
+
const allDisabledRows = useMemo(() => {
|
|
57
|
+
const unique = new Set(disabledRows || []);
|
|
58
|
+
if (hideSelectionForRows) {
|
|
59
|
+
hideSelectionForRows.forEach((rowId) => unique.add(rowId));
|
|
60
|
+
}
|
|
61
|
+
return Array.from(unique);
|
|
62
|
+
}, [disabledRows, hideSelectionForRows]);
|
|
55
63
|
/**
|
|
56
64
|
* Hooks to handle state for selection, sorting, and expanded/collapsed.
|
|
57
65
|
*/
|
|
58
66
|
const { enableRowSelection, enableMultiRowSelection, rowSelection, onRowSelectionChange } = useSelectionState({
|
|
59
67
|
selectionMode,
|
|
60
68
|
selectedRows,
|
|
61
|
-
disabledRows,
|
|
69
|
+
disabledRows: allDisabledRows,
|
|
62
70
|
onSelectionChanged,
|
|
63
71
|
});
|
|
64
72
|
const { enableSorting, enableMultiRemove, enableSortingRemoval, manualSorting, sorting, onSortingChange, } = useSortingState({ columns, sortState, onSortChanged });
|
|
65
73
|
const { expanded, onExpandedChange, enableExpanding, getRowCanExpand, getSubRows } = useExpandedState(rowGrouping);
|
|
74
|
+
const showExpandButton = (_a = rowGrouping === null || rowGrouping === undefined ? undefined : rowGrouping.showExpandButton) !== null && _a !== undefined ? _a : true;
|
|
66
75
|
/**
|
|
67
76
|
* Hooks to setup column state, including visibility, ordering, pinning, and width(s).
|
|
68
77
|
*/
|
|
@@ -122,6 +131,8 @@ const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resiz
|
|
|
122
131
|
},
|
|
123
132
|
meta: {
|
|
124
133
|
rangeSelectionState,
|
|
134
|
+
showExpandButton,
|
|
135
|
+
hideSelectionForRows,
|
|
125
136
|
},
|
|
126
137
|
});
|
|
127
138
|
/**
|