@veeqo/ui 14.0.0-beta-1 → 14.0.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.
|
@@ -14,7 +14,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
|
14
14
|
const IconGroup = ({ icons, maxVisible = 3, compact = false, ariaLabel = 'Group of icons', hasIndicator = false, className, ...listProps }) => {
|
|
15
15
|
const visibleIcons = icons.slice(0, icons.length > maxVisible ? Math.max(0, maxVisible - 1) : maxVisible);
|
|
16
16
|
const hiddenIcons = icons.slice(visibleIcons.length);
|
|
17
|
-
return (React__default.default.createElement("ul", { className: buildClassnames.buildClassnames([IconGroup_module.list, className])
|
|
17
|
+
return (React__default.default.createElement("ul", { ...listProps, "aria-label": ariaLabel, className: buildClassnames.buildClassnames([IconGroup_module.list, className]) },
|
|
18
18
|
hiddenIcons.length > 0 && (React__default.default.createElement("li", { key: "icon-group-item-remaining-count", className: IconGroup_module.item, "aria-label": `${hiddenIcons.length} additional ${hiddenIcons.length === 1 ? 'item' : 'items'}`, style: {
|
|
19
19
|
'--icon-z-index': maxVisible,
|
|
20
20
|
} },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconGroup.cjs","sources":["../../../src/components/IconGroup/IconGroup.tsx"],"sourcesContent":["import React from 'react';\n\n// Renamed existing Avatar component to Icon for code readability\nimport { Avatar as Icon } from '../Avatar';\nimport { theme } from '../../theme';\nimport { buildClassnames } from '../../utils';\nimport { IconGroupProps } from './types';\n\nimport styles from './IconGroup.module.scss';\n\nexport const IconGroup = ({\n icons,\n maxVisible = 3,\n compact = false,\n ariaLabel = 'Group of icons',\n hasIndicator = false,\n className,\n ...listProps\n}: IconGroupProps) => {\n const visibleIcons = icons.slice(\n 0,\n icons.length > maxVisible ? Math.max(0, maxVisible - 1) : maxVisible,\n );\n const hiddenIcons = icons.slice(visibleIcons.length);\n\n return (\n <ul className={buildClassnames([styles.list, className])}
|
|
1
|
+
{"version":3,"file":"IconGroup.cjs","sources":["../../../src/components/IconGroup/IconGroup.tsx"],"sourcesContent":["import React from 'react';\n\n// Renamed existing Avatar component to Icon for code readability\nimport { Avatar as Icon } from '../Avatar';\nimport { theme } from '../../theme';\nimport { buildClassnames } from '../../utils';\nimport { IconGroupProps } from './types';\n\nimport styles from './IconGroup.module.scss';\n\nexport const IconGroup = ({\n icons,\n maxVisible = 3,\n compact = false,\n ariaLabel = 'Group of icons',\n hasIndicator = false,\n className,\n ...listProps\n}: IconGroupProps) => {\n const visibleIcons = icons.slice(\n 0,\n icons.length > maxVisible ? Math.max(0, maxVisible - 1) : maxVisible,\n );\n const hiddenIcons = icons.slice(visibleIcons.length);\n\n return (\n <ul {...listProps} aria-label={ariaLabel} className={buildClassnames([styles.list, className])}>\n {hiddenIcons.length > 0 && (\n <li\n key=\"icon-group-item-remaining-count\"\n className={styles.item}\n aria-label={`${hiddenIcons.length} additional ${hiddenIcons.length === 1 ? 'item' : 'items'}`}\n style={\n {\n '--icon-z-index': maxVisible,\n } as React.CSSProperties\n }\n >\n <Icon\n name={`${hiddenIcons.length}+`}\n size={compact ? 'md' : 'lg'}\n bgColor={theme.colors.secondary.blue.darkest}\n textColor={theme.colors.neutral.grey.lightest}\n ariaLabel=\"Number of additional icons not shown\"\n hasIndicator={hasIndicator}\n />\n </li>\n )}\n {visibleIcons.map((icon, index) => (\n <li\n key={`icon-group-item-${icon.name}`}\n className={styles.item}\n aria-label={`Icon item of ${icon.name}`}\n style={\n {\n '--icon-z-index': visibleIcons.length - index,\n } as React.CSSProperties\n }\n >\n <Icon\n {...icon}\n hasIndicator={false}\n size={compact ? 'md' : 'lg'}\n bgColor={icon?.bgColor ?? theme.colors.neutral.grey.light}\n textColor={icon?.textColor ?? theme.colors.neutral.ink.base}\n />\n </li>\n ))}\n </ul>\n );\n};\n"],"names":["React","buildClassnames","styles","Icon","theme","index"],"mappings":";;;;;;;;;;;;;AAUO,MAAM,SAAS,GAAG,CAAC,EACxB,KAAK,EACL,UAAU,GAAG,CAAC,EACd,OAAO,GAAG,KAAK,EACf,SAAS,GAAG,gBAAgB,EAC5B,YAAY,GAAG,KAAK,EACpB,SAAS,EACT,GAAG,SAAS,EACG,KAAI;AACnB,IAAA,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAC9B,CAAC,EACD,KAAK,CAAC,MAAM,GAAG,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,UAAU,GAAG,CAAC,CAAC,GAAG,UAAU,CACrE;IACD,MAAM,WAAW,GAAG,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC;AAEpD,IAAA,QACEA,sBAAQ,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,GAAA,SAAS,EAAc,YAAA,EAAA,SAAS,EAAE,SAAS,EAAEC,+BAAe,CAAC,CAACC,gBAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,EAAA;AAC3F,QAAA,WAAW,CAAC,MAAM,GAAG,CAAC,KACrBF,sBACE,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,GAAG,EAAC,iCAAiC,EACrC,SAAS,EAAEE,gBAAM,CAAC,IAAI,gBACV,CAAG,EAAA,WAAW,CAAC,MAAM,eAAe,WAAW,CAAC,MAAM,KAAK,CAAC,GAAG,MAAM,GAAG,OAAO,CAAE,CAAA,EAC7F,KAAK,EACH;AACE,gBAAA,gBAAgB,EAAE,UAAU;AACN,aAAA,EAAA;YAG1BF,sBAAC,CAAA,aAAA,CAAAG,aAAI,EACH,EAAA,IAAI,EAAE,CAAA,EAAG,WAAW,CAAC,MAAM,CAAG,CAAA,CAAA,EAC9B,IAAI,EAAE,OAAO,GAAG,IAAI,GAAG,IAAI,EAC3B,OAAO,EAAEC,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,EAC5C,SAAS,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,EAC7C,SAAS,EAAC,sCAAsC,EAChD,YAAY,EAAE,YAAY,EAC1B,CAAA,CACC,CACN;QACA,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,EAAEC,OAAK,KAAI;;YAAC,QACjCL,6CACE,GAAG,EAAE,mBAAmB,IAAI,CAAC,IAAI,CAAA,CAAE,EACnC,SAAS,EAAEE,gBAAM,CAAC,IAAI,EAAA,YAAA,EACV,CAAgB,aAAA,EAAA,IAAI,CAAC,IAAI,CAAA,CAAE,EACvC,KAAK,EACH;AACE,oBAAA,gBAAgB,EAAE,YAAY,CAAC,MAAM,GAAGG,OAAK;AACvB,iBAAA,EAAA;AAG1B,gBAAAL,sBAAA,CAAA,aAAA,CAACG,aAAI,EAAA,EAAA,GACC,IAAI,EACR,YAAY,EAAE,KAAK,EACnB,IAAI,EAAE,OAAO,GAAG,IAAI,GAAG,IAAI,EAC3B,OAAO,EAAE,CAAA,EAAA,GAAA,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,SAAA,GAAA,SAAA,GAAJ,IAAI,CAAE,OAAO,MAAI,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAAC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,EACzD,SAAS,EAAE,CAAA,EAAA,GAAA,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAJ,SAAA,GAAA,SAAA,GAAA,IAAI,CAAE,SAAS,MAAI,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAAA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAC3D,CAAA,CACC;SACN,CAAC,CACC;AAET;;;;"}
|
|
@@ -8,7 +8,7 @@ import styles from './IconGroup.module.scss.js';
|
|
|
8
8
|
const IconGroup = ({ icons, maxVisible = 3, compact = false, ariaLabel = 'Group of icons', hasIndicator = false, className, ...listProps }) => {
|
|
9
9
|
const visibleIcons = icons.slice(0, icons.length > maxVisible ? Math.max(0, maxVisible - 1) : maxVisible);
|
|
10
10
|
const hiddenIcons = icons.slice(visibleIcons.length);
|
|
11
|
-
return (React__default.createElement("ul", { className: buildClassnames([styles.list, className])
|
|
11
|
+
return (React__default.createElement("ul", { ...listProps, "aria-label": ariaLabel, className: buildClassnames([styles.list, className]) },
|
|
12
12
|
hiddenIcons.length > 0 && (React__default.createElement("li", { key: "icon-group-item-remaining-count", className: styles.item, "aria-label": `${hiddenIcons.length} additional ${hiddenIcons.length === 1 ? 'item' : 'items'}`, style: {
|
|
13
13
|
'--icon-z-index': maxVisible,
|
|
14
14
|
} },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconGroup.js","sources":["../../../src/components/IconGroup/IconGroup.tsx"],"sourcesContent":["import React from 'react';\n\n// Renamed existing Avatar component to Icon for code readability\nimport { Avatar as Icon } from '../Avatar';\nimport { theme } from '../../theme';\nimport { buildClassnames } from '../../utils';\nimport { IconGroupProps } from './types';\n\nimport styles from './IconGroup.module.scss';\n\nexport const IconGroup = ({\n icons,\n maxVisible = 3,\n compact = false,\n ariaLabel = 'Group of icons',\n hasIndicator = false,\n className,\n ...listProps\n}: IconGroupProps) => {\n const visibleIcons = icons.slice(\n 0,\n icons.length > maxVisible ? Math.max(0, maxVisible - 1) : maxVisible,\n );\n const hiddenIcons = icons.slice(visibleIcons.length);\n\n return (\n <ul className={buildClassnames([styles.list, className])}
|
|
1
|
+
{"version":3,"file":"IconGroup.js","sources":["../../../src/components/IconGroup/IconGroup.tsx"],"sourcesContent":["import React from 'react';\n\n// Renamed existing Avatar component to Icon for code readability\nimport { Avatar as Icon } from '../Avatar';\nimport { theme } from '../../theme';\nimport { buildClassnames } from '../../utils';\nimport { IconGroupProps } from './types';\n\nimport styles from './IconGroup.module.scss';\n\nexport const IconGroup = ({\n icons,\n maxVisible = 3,\n compact = false,\n ariaLabel = 'Group of icons',\n hasIndicator = false,\n className,\n ...listProps\n}: IconGroupProps) => {\n const visibleIcons = icons.slice(\n 0,\n icons.length > maxVisible ? Math.max(0, maxVisible - 1) : maxVisible,\n );\n const hiddenIcons = icons.slice(visibleIcons.length);\n\n return (\n <ul {...listProps} aria-label={ariaLabel} className={buildClassnames([styles.list, className])}>\n {hiddenIcons.length > 0 && (\n <li\n key=\"icon-group-item-remaining-count\"\n className={styles.item}\n aria-label={`${hiddenIcons.length} additional ${hiddenIcons.length === 1 ? 'item' : 'items'}`}\n style={\n {\n '--icon-z-index': maxVisible,\n } as React.CSSProperties\n }\n >\n <Icon\n name={`${hiddenIcons.length}+`}\n size={compact ? 'md' : 'lg'}\n bgColor={theme.colors.secondary.blue.darkest}\n textColor={theme.colors.neutral.grey.lightest}\n ariaLabel=\"Number of additional icons not shown\"\n hasIndicator={hasIndicator}\n />\n </li>\n )}\n {visibleIcons.map((icon, index) => (\n <li\n key={`icon-group-item-${icon.name}`}\n className={styles.item}\n aria-label={`Icon item of ${icon.name}`}\n style={\n {\n '--icon-z-index': visibleIcons.length - index,\n } as React.CSSProperties\n }\n >\n <Icon\n {...icon}\n hasIndicator={false}\n size={compact ? 'md' : 'lg'}\n bgColor={icon?.bgColor ?? theme.colors.neutral.grey.light}\n textColor={icon?.textColor ?? theme.colors.neutral.ink.base}\n />\n </li>\n ))}\n </ul>\n );\n};\n"],"names":["React","Icon"],"mappings":";;;;;;;AAUO,MAAM,SAAS,GAAG,CAAC,EACxB,KAAK,EACL,UAAU,GAAG,CAAC,EACd,OAAO,GAAG,KAAK,EACf,SAAS,GAAG,gBAAgB,EAC5B,YAAY,GAAG,KAAK,EACpB,SAAS,EACT,GAAG,SAAS,EACG,KAAI;AACnB,IAAA,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAC9B,CAAC,EACD,KAAK,CAAC,MAAM,GAAG,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,UAAU,GAAG,CAAC,CAAC,GAAG,UAAU,CACrE;IACD,MAAM,WAAW,GAAG,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC;AAEpD,IAAA,QACEA,cAAQ,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,GAAA,SAAS,EAAc,YAAA,EAAA,SAAS,EAAE,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,EAAA;AAC3F,QAAA,WAAW,CAAC,MAAM,GAAG,CAAC,KACrBA,cACE,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,GAAG,EAAC,iCAAiC,EACrC,SAAS,EAAE,MAAM,CAAC,IAAI,gBACV,CAAG,EAAA,WAAW,CAAC,MAAM,eAAe,WAAW,CAAC,MAAM,KAAK,CAAC,GAAG,MAAM,GAAG,OAAO,CAAE,CAAA,EAC7F,KAAK,EACH;AACE,gBAAA,gBAAgB,EAAE,UAAU;AACN,aAAA,EAAA;YAG1BA,cAAC,CAAA,aAAA,CAAAC,MAAI,EACH,EAAA,IAAI,EAAE,CAAA,EAAG,WAAW,CAAC,MAAM,CAAG,CAAA,CAAA,EAC9B,IAAI,EAAE,OAAO,GAAG,IAAI,GAAG,IAAI,EAC3B,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,EAC5C,SAAS,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,EAC7C,SAAS,EAAC,sCAAsC,EAChD,YAAY,EAAE,YAAY,EAC1B,CAAA,CACC,CACN;QACA,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;;YAAC,QACjCD,qCACE,GAAG,EAAE,mBAAmB,IAAI,CAAC,IAAI,CAAA,CAAE,EACnC,SAAS,EAAE,MAAM,CAAC,IAAI,EAAA,YAAA,EACV,CAAgB,aAAA,EAAA,IAAI,CAAC,IAAI,CAAA,CAAE,EACvC,KAAK,EACH;AACE,oBAAA,gBAAgB,EAAE,YAAY,CAAC,MAAM,GAAG,KAAK;AACvB,iBAAA,EAAA;AAG1B,gBAAAA,cAAA,CAAA,aAAA,CAACC,MAAI,EAAA,EAAA,GACC,IAAI,EACR,YAAY,EAAE,KAAK,EACnB,IAAI,EAAE,OAAO,GAAG,IAAI,GAAG,IAAI,EAC3B,OAAO,EAAE,CAAA,EAAA,GAAA,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,SAAA,GAAA,SAAA,GAAJ,IAAI,CAAE,OAAO,MAAI,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,EACzD,SAAS,EAAE,CAAA,EAAA,GAAA,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAJ,SAAA,GAAA,SAAA,GAAA,IAAI,CAAE,SAAS,MAAI,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAC3D,CAAA,CACC;SACN,CAAC,CACC;AAET;;;;"}
|
|
@@ -6,7 +6,7 @@ export type IconProps = Omit<AvatarProps, 'hasIndicator'>;
|
|
|
6
6
|
export type IconGroupProps = React.HTMLAttributes<HTMLUListElement> & {
|
|
7
7
|
/** List of icons to display */
|
|
8
8
|
icons: IconProps[];
|
|
9
|
-
/** Number of icons to show before collapsing. 3 is the default
|
|
9
|
+
/** Number of icons to show before collapsing. 3 is the default. */
|
|
10
10
|
maxVisible?: number;
|
|
11
11
|
/** Switches all icon sizes from lg to md */
|
|
12
12
|
compact?: boolean;
|