npm - @vibe/core - Versions diffs - 4.2.1 → 4.2.3 - Mend

@vibe/core 4.2.1 → 4.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1121) hide show

package/dist/src/components/Avatar/AvatarBadge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AvatarBadge.js","sources":["../../../../src/components/Avatar/AvatarBadge.tsx"],"sourcesContent":["import React from \"react\";\nimport { camelCase } from \"es-toolkit\";\nimport { getStyle } from \"@vibe/shared\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport { Icon, CustomSvgIcon } from \"@vibe/icon\";\nimport { type AvatarSize } from \"./Avatar.types\";\nimport styles from \"./AvatarBadge.module.scss\";\nimport { type VibeComponentProps } from \"../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport { ClickableWrapper } from \"@vibe/clickable\";\n\nexport interface AvatarBadgeProps extends VibeComponentProps {\n /*\n The image source for the badge.\n /\n src?: string;\n /\n The icon displayed inside the badge.\n /\n icon?: SubIcon;\n /\n The tab index of the badge.\n /\n tabIndex?: number;\n /\n The size of the badge.\n /\n size?: AvatarSize;\n /\n Callback fired when the badge is clicked.\n */\n onClick?: (event: React.MouseEvent \| React.KeyboardEvent) => void;\n}\n\nconst AvatarBadge = ({\n src,\n icon,\n tabIndex = 0,\n className,\n size = \"large\",\n id,\n onClick,\n \"data-testid\": dataTestId,\n ...otherProps\n}: AvatarBadgeProps) => {\n const classNames = cx(getStyle(styles, camelCase(\"badge--\" + size)), className);\n const testId = dataTestId \|\| getTestId(ComponentDefaultTestId.AVATAR_BADGE, id);\n const isClickable = tabIndex === -1 && !!onClick;\n\n if (icon) {\n return isClickable ? (\n <ClickableWrapper isClickable clickableProps={{ onClick, tabIndex }}>\n <Icon icon={icon} className={classNames} {...otherProps} data-testid={testId} />\n </ClickableWrapper>\n ) : (\n <Icon icon={icon} className={classNames} tabindex={tabIndex} {...otherProps} data-testid={testId} />\n );\n }\n\n const svgIcon = <CustomSvgIcon src={src} className={classNames} {...otherProps} data-testid={testId} />;\n\n return src ? (\n isClickable ? (\n <ClickableWrapper isClickable clickableProps={{ onClick, tabIndex }}>\n {svgIcon}\n </ClickableWrapper>\n ) : (\n svgIcon\n )\n ) : null;\n};\n\nexport default AvatarBadge;\n"],"names":["AvatarBadge","_a","src","icon","_a$tabIndex","tabIndex","className","_a$size","size","id","onClick","dataTestId","otherProps","__rest","classNames","cx","getStyle","styles","camelCase","testId","getTestId","ComponentDefaultTestId","AVATAR_BADGE","isClickable","React","ClickableWrapper","clickableProps","createElement","Icon","Object","assign","tabindex","svgIcon","CustomSvgIcon"],"mappings":"~~ojBAmCA~~,IAAMA,EAAc,SAACC,OACnBC,EAOyBD,EAPzBC,IACAC,EAMyBF,EANzBE,KAAIC,EAMqBH,EALzBI,SAAAA,~~OAAW~~,~~IAAHD~~,EAAG,EAACA,EACZE,EAIyBL,EAJzBK,UAASC,EAIgBN,EAHzBO,KAAAA,~~OAAO~~,~~IAAHD~~,EAAG,QAAOA,EACdE,EAEyBR,EAFzBQ,GACAC,EACyBT,EADzBS,QACeC,EAAUV,EAAzB,eACGW,~~EATgBC~~,EAAAZ,~~EAAA~~,CAAA,MAAA,OAAA,WAAA,YAAA,OAAA,KAAA,UAAA,gBAWba,EAAaC,EAAGC,EAASC,EAAQC,EAAU,UAAYV,IAAQF,GAC/Da,EAASR,GAAcS,EAAUC,EAAuBC,aAAcb,GACtEc,~~GAA4B~~,~~IAAdlB~~,KAAqBK,EAEzC,GAAIP,EACF,OAAOoB,EACLC,gBAACC,EAAgB,CAACF,aAAW,EAACG,eAAgB,CAAEhB,QAAAA,EAASL,SAAAA,IACvDmB,EAAAG,cAACC,~~EAAKC~~,OAAAC,OAAA,~~CAAA3B~~,KAAMA,EAAMG,UAAWQ,GAAgBF,iBAAyBO,MAGxEK,~~EAACG~~,~~cAAAC~~,iBAAKzB,KAAMA,EAAMG,UAAWQ,EAAYiB,SAAU1B,GAAcO,iBAAyBO,KAI9F,IAAMa,EAAUR,EAAAG,cAACM,EAAaJ,OAAAC,OAAA,CAAC5B,IAAKA,EAAKI,UAAWQ,GAAgBF,~~EAAyB~~,CAAA,~~cAAAO~~,KAE7F,OAAOjB,EACLqB,EACEC,gBAACC,EAAgB,CAACF,aAAW,EAACG,eAAgB,CAAEhB,QAAAA,EAASL,SAAAA,IACtD2B,GAGHA,EAEA,IACN"}
1	+ {"version":3,"file":"AvatarBadge.js","sources":["../../../../src/components/Avatar/AvatarBadge.tsx"],"sourcesContent":["import React from \"react\";\nimport { camelCase } from \"es-toolkit\";\nimport { getStyle } from \"@vibe/shared\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport { Icon, CustomSvgIcon } from \"@vibe/icon\";\nimport { type AvatarSize } from \"./Avatar.types\";\nimport styles from \"./AvatarBadge.module.scss\";\nimport { type VibeComponentProps } from \"../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport { ClickableWrapper } from \"@vibe/clickable\";\n\nexport interface AvatarBadgeProps extends VibeComponentProps {\n /*\n The image source for the badge.\n /\n src?: string;\n /\n The icon displayed inside the badge.\n /\n icon?: SubIcon;\n /\n The tab index of the badge.\n /\n tabIndex?: number;\n /\n The size of the badge.\n /\n size?: AvatarSize;\n /\n Callback fired when the badge is clicked.\n */\n onClick?: (event: React.MouseEvent \| React.KeyboardEvent) => void;\n}\n\nconst AvatarBadge = ({\n src,\n icon,\n tabIndex = 0,\n className,\n size = \"large\",\n id,\n onClick,\n \"data-testid\": dataTestId,\n ...otherProps\n}: AvatarBadgeProps) => {\n const classNames = cx(getStyle(styles, camelCase(\"badge--\" + size)), className);\n const testId = dataTestId \|\| getTestId(ComponentDefaultTestId.AVATAR_BADGE, id);\n const isClickable = tabIndex === -1 && !!onClick;\n\n if (icon) {\n return isClickable ? (\n <ClickableWrapper isClickable clickableProps={{ onClick, tabIndex }}>\n <Icon icon={icon} className={classNames} {...otherProps} data-testid={testId} />\n </ClickableWrapper>\n ) : (\n <Icon icon={icon} className={classNames} tabindex={tabIndex} {...otherProps} data-testid={testId} />\n );\n }\n\n const svgIcon = <CustomSvgIcon src={src} className={classNames} {...otherProps} data-testid={testId} />;\n\n return src ? (\n isClickable ? (\n <ClickableWrapper isClickable clickableProps={{ onClick, tabIndex }}>\n {svgIcon}\n </ClickableWrapper>\n ) : (\n svgIcon\n )\n ) : null;\n};\n\nexport default AvatarBadge;\n"],"names":["AvatarBadge","_a","src","icon","_a$tabIndex","tabIndex","className","_a$size","size","id","onClick","dataTestId","otherProps","__rest","classNames","cx","getStyle","styles","camelCase","testId","getTestId","ComponentDefaultTestId","AVATAR_BADGE","isClickable","React","ClickableWrapper","clickableProps","createElement","Icon","Object","assign","tabindex","svgIcon","CustomSvgIcon"],"mappings":"ijBAmCA,IAAMA,EAAc,SAACC,OACnBC,EAOyBD,EAPzBC,IACAC,EAMyBF,EANzBE,KAAIC,EAMqBH,EALzBI,SAAAA,OAAQ,IAAAD,EAAG,EAACA,EACZE,EAIyBL,EAJzBK,UAASC,EAIgBN,EAHzBO,KAAAA,OAAI,IAAAD,EAAG,QAAOA,EACdE,EAEyBR,EAFzBQ,GACAC,EACyBT,EADzBS,QACeC,EAAUV,EAAzB,eACGW,EAAUC,EAAAZ,EATM,CAAA,MAAA,OAAA,WAAA,YAAA,OAAA,KAAA,UAAA,gBAWba,EAAaC,EAAGC,EAASC,EAAQC,EAAU,UAAYV,IAAQF,GAC/Da,EAASR,GAAcS,EAAUC,EAAuBC,aAAcb,GACtEc,GAA2B,IAAblB,KAAqBK,EAEzC,GAAIP,EACF,OAAOoB,EACLC,gBAACC,EAAgB,CAACF,aAAW,EAACG,eAAgB,CAAEhB,QAAAA,EAASL,SAAAA,IACvDmB,EAAAG,cAACC,EAAIC,OAAAC,OAAA,CAAC3B,KAAMA,EAAMG,UAAWQ,GAAgBF,iBAAyBO,MAGxEK,EAAAG,cAACC,iBAAKzB,KAAMA,EAAMG,UAAWQ,EAAYiB,SAAU1B,GAAcO,iBAAyBO,KAI9F,IAAMa,EAAUR,EAAAG,cAACM,EAAaJ,OAAAC,OAAA,CAAC5B,IAAKA,EAAKI,UAAWQ,GAAgBF,EAAU,CAAA,cAAeO,KAE7F,OAAOjB,EACLqB,EACEC,gBAACC,EAAgB,CAACF,aAAW,EAACG,eAAgB,CAAEhB,QAAAA,EAASL,SAAAA,IACtD2B,GAGHA,EAEA,IACN"}

package/dist/src/components/Avatar/AvatarBadge.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={badgeLarge:"badgeLarge_5028f63854",badgeMedium:"badgeMedium_db8d5fc415",badgeSmall:"badgeSmall_4d235fac79",badgeXs:"badgeXs_4c49478fda"};!function(e){const d="s_id-e545a08d61b0_4_2_0";if("undefined"!=typeof document){const a=document.head||document.getElementsByTagName("head")[0];if(a.querySelector("#"+d))return;const n=document.createElement("style");n.id=d,a.firstChild?a.insertBefore(n,a.firstChild):a.appendChild(n),n.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[d]=e)}(".badgeLarge_5028f63854 {\n  height: 19px;\n  width: 19px;\n}\n\n.badgeMedium_db8d5fc415 {\n  height: 13px;\n  width: 13px;\n}\n\n.badgeSmall_4d235fac79,\n.badgeXs_4c49478fda {\n  height: 10px;\n  width: 10px;\n}");export{e as default};
+var e={badgeLarge:"badgeLarge_ffb11dd9ba",badgeMedium:"badgeMedium_55142b8067",badgeSmall:"badgeSmall_a814994d1a",badgeXs:"badgeXs_8559395a56"};!function(e){const d="s_id-e545a08d61b0_4_2_2";if("undefined"!=typeof document){const a=document.head||document.getElementsByTagName("head")[0];if(a.querySelector("#"+d))return;const n=document.createElement("style");n.id=d,a.firstChild?a.insertBefore(n,a.firstChild):a.appendChild(n),n.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[d]=e)}(".badgeLarge_ffb11dd9ba {\n  height: 19px;\n  width: 19px;\n}\n\n.badgeMedium_55142b8067 {\n  height: 13px;\n  width: 13px;\n}\n\n.badgeSmall_a814994d1a,\n.badgeXs_8559395a56 {\n  height: 10px;\n  width: 10px;\n}");export{e as default};
 //# sourceMappingURL=AvatarBadge.module.scss.js.map

package/dist/src/components/Avatar/AvatarContent.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{camelCase as t}from"es-toolkit";import{getTestId as e,ComponentDefaultTestId as a}from"../../tests/testIds.js";import s from"classnames";import r from"react";import i from"./AvatarContent.module.scss.js";import o from"../../../components/icon/dist/Icon/Icon.js";import{getStyle as l}from"../../../shared/dist/utils/typesciptCssModulesHelper.js";var n=function(n){var c=n.type,m=void 0===c?"text":c,d=n.src,p=n.icon,u=n.text,f=n["aria-label"],A=n.role,N=n.size,T=void 0===N?"large":N,v=n.textClassName,C=void 0===v?"":v,E=n.id,x=n["data-testid"],_=s(l(i,t("content_"+m)),l(i,t("content_"+m+"--"+T)));switch(m){case"img":return r.createElement("img",{role:A,alt:f,src:d,className:_,id:E,"data-testid":x||e(a.AVATAR_CONTENT,E)});case"icon":return r.createElement(o,{icon:p,"aria-label":f,className:_,"aria-hidden":!1,id:E,"data-testid":x||e(a.AVATAR_CONTENT,E)});case"text":return r.createElement("span",{"aria-label":f,role:A,className:s(_,C),id:E,"data-testid":x||e(a.AVATAR_CONTENT,E)},u);default:return null}};export{n as default};
+import{camelCase as t}from"es-toolkit";import{getTestId as e,ComponentDefaultTestId as a}from"../../../testIds.js";import s from"classnames";import r from"react";import i from"./AvatarContent.module.scss.js";import o from"../../../components/icon/dist/Icon/Icon.js";import{getStyle as l}from"../../../shared/dist/utils/typesciptCssModulesHelper.js";var n=function(n){var c=n.type,m=void 0===c?"text":c,d=n.src,p=n.icon,u=n.text,f=n["aria-label"],A=n.role,N=n.size,T=void 0===N?"large":N,v=n.textClassName,C=void 0===v?"":v,E=n.id,x=n["data-testid"],_=s(l(i,t("content_"+m)),l(i,t("content_"+m+"--"+T)));switch(m){case"img":return r.createElement("img",{role:A,alt:f,src:d,className:_,id:E,"data-testid":x||e(a.AVATAR_CONTENT,E)});case"icon":return r.createElement(o,{icon:p,"aria-label":f,className:_,"aria-hidden":!1,id:E,"data-testid":x||e(a.AVATAR_CONTENT,E)});case"text":return r.createElement("span",{"aria-label":f,role:A,className:s(_,C),id:E,"data-testid":x||e(a.AVATAR_CONTENT,E)},u);default:return null}};export{n as default};
 //# sourceMappingURL=AvatarContent.js.map

package/dist/src/components/Avatar/AvatarContent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AvatarContent.js","sources":["../../../../src/components/Avatar/AvatarContent.tsx"],"sourcesContent":["import { camelCase } from \"es-toolkit\";\nimport { getStyle } from \"@vibe/shared\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport React from \"react\";\nimport { type AvatarSize, type AvatarType } from \"./Avatar.types\";\nimport { Icon, type SubIcon } from \"@vibe/icon\";\nimport { type VibeComponentProps } from \"../../types\";\nimport styles from \"./AvatarContent.module.scss\";\n\nexport interface AvatarContentProps extends VibeComponentProps {\n /*\n The image source when the type is set to `img`.\n /\n src?: string;\n /\n The type of content displayed inside the avatar.\n /\n type?: AvatarType;\n /\n The size of the avatar content.\n /\n size?: AvatarSize;\n /\n The ARIA role of the content.\n /\n role?: string;\n /\n The label of the content for accessibility.\n /\n \"aria-label\"?: string;\n /\n The icon displayed when the type is set to `icon`.\n /\n icon?: SubIcon;\n /\n Class name applied to the text content.\n /\n textClassName?: string;\n /\n The text displayed when the type is set to `text`.\n */\n text?: string;\n}\n\nconst AvatarContent = ({\n type = \"text\",\n src,\n icon,\n text,\n \"aria-label\": ariaLabel,\n role,\n size = \"large\",\n textClassName = \"\",\n id,\n \"data-testid\": dataTestId\n}: AvatarContentProps) => {\n const className = cx(\n getStyle(styles, camelCase(\"content_\" + type)),\n getStyle(styles, camelCase(\"content_\" + type + \"--\" + size))\n );\n switch (type) {\n case \"img\":\n return (\n <img\n role={role}\n alt={ariaLabel}\n src={src}\n className={className}\n id={id}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.AVATAR_CONTENT, id)}\n />\n );\n case \"icon\":\n return (\n <Icon\n icon={icon}\n aria-label={ariaLabel}\n // role={role}\n className={className}\n aria-hidden={false}\n id={id}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.AVATAR_CONTENT, id)}\n />\n );\n case \"text\":\n return (\n <span\n aria-label={ariaLabel}\n role={role}\n className={cx(className, textClassName)}\n id={id}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.AVATAR_CONTENT, id)}\n >\n {text}\n </span>\n );\n default:\n return null;\n }\n};\n\nexport default AvatarContent;\n"],"names":["AvatarContent","_ref","_ref$type","type","src","icon","text","ariaLabel","role","_ref$size","size","_ref$textClassName","textClassName","id","dataTestId","className","cx","getStyle","styles","camelCase","React","createElement","alt","getTestId","ComponentDefaultTestId","AVATAR_CONTENT","Icon"],"mappings":"~~gWA6CA~~,IAAMA,EAAgB,SAAHC,GAWM,IAAAC,EAAAD,EAVvBE,KAAAA,~~OAAO~~,~~IAAHD~~,EAAG,OAAMA,EACbE,EAAGH,EAAHG,IACAC,EAAIJ,EAAJI,KACAC,EAAIL,EAAJK,KACcC,EAASN,EAAvB,cACAO,EAAIP,EAAJO,KAAIC,EAAAR,EACJS,KAAAA,~~OAAO~~,~~IAAHD~~,EAAG,QAAOA,EAAAE,EAAAV,EACdW,cAAAA,~~OAAgB~~,~~IAAHD~~,EAAG,GAAEA,EAClBE,EAAEZ,EAAFY,GACeC,EAAUb,EAAzB,eAEMc,EAAYC,EAChBC,EAASC,EAAQC,EAAU,WAAahB,IACxCc,EAASC,EAAQC,EAAU,WAAahB,EAAO,KAAOO,KAExD,OAAQP,GACN,IAAK,MACH,OACEiB,EAAAC,cAAA,MAAA,CACEb,KAAMA,EACNc,IAAKf,EACLH,IAAKA,EACLW,UAAWA,EACXF,GAAIA,~~EACS~~,~~cAAAC~~,GAAcS,EAAUC,EAAuBC,eAAgBZ,KAGlF,IAAK,OACH,OACEO,gBAACM,EAAI,CACHrB,KAAMA,eACME,EAEZQ,UAAWA,~~EACE~~,~~eAAA~~,EACbF,GAAIA,~~EACS~~,~~cAAAC~~,GAAcS,EAAUC,EAAuBC,eAAgBZ,KAGlF,IAAK,OACH,OACEO,EAAAC,cAAA,OAAA,CAAA,aACcd,EACZC,KAAMA,EACNO,UAAWC,EAAGD,EAAWH,GACzBC,GAAIA,~~EACS~~,~~cAAAC~~,GAAcS,EAAUC,EAAuBC,eAAgBZ,IAE3EP,GAGP,QACE,OAAO,KAEb"}
1	+ {"version":3,"file":"AvatarContent.js","sources":["../../../../src/components/Avatar/AvatarContent.tsx"],"sourcesContent":["import { camelCase } from \"es-toolkit\";\nimport { getStyle } from \"@vibe/shared\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport React from \"react\";\nimport { type AvatarSize, type AvatarType } from \"./Avatar.types\";\nimport { Icon, type SubIcon } from \"@vibe/icon\";\nimport { type VibeComponentProps } from \"../../types\";\nimport styles from \"./AvatarContent.module.scss\";\n\nexport interface AvatarContentProps extends VibeComponentProps {\n /*\n The image source when the type is set to `img`.\n /\n src?: string;\n /\n The type of content displayed inside the avatar.\n /\n type?: AvatarType;\n /\n The size of the avatar content.\n /\n size?: AvatarSize;\n /\n The ARIA role of the content.\n /\n role?: string;\n /\n The label of the content for accessibility.\n /\n \"aria-label\"?: string;\n /\n The icon displayed when the type is set to `icon`.\n /\n icon?: SubIcon;\n /\n Class name applied to the text content.\n /\n textClassName?: string;\n /\n The text displayed when the type is set to `text`.\n */\n text?: string;\n}\n\nconst AvatarContent = ({\n type = \"text\",\n src,\n icon,\n text,\n \"aria-label\": ariaLabel,\n role,\n size = \"large\",\n textClassName = \"\",\n id,\n \"data-testid\": dataTestId\n}: AvatarContentProps) => {\n const className = cx(\n getStyle(styles, camelCase(\"content_\" + type)),\n getStyle(styles, camelCase(\"content_\" + type + \"--\" + size))\n );\n switch (type) {\n case \"img\":\n return (\n <img\n role={role}\n alt={ariaLabel}\n src={src}\n className={className}\n id={id}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.AVATAR_CONTENT, id)}\n />\n );\n case \"icon\":\n return (\n <Icon\n icon={icon}\n aria-label={ariaLabel}\n // role={role}\n className={className}\n aria-hidden={false}\n id={id}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.AVATAR_CONTENT, id)}\n />\n );\n case \"text\":\n return (\n <span\n aria-label={ariaLabel}\n role={role}\n className={cx(className, textClassName)}\n id={id}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.AVATAR_CONTENT, id)}\n >\n {text}\n </span>\n );\n default:\n return null;\n }\n};\n\nexport default AvatarContent;\n"],"names":["AvatarContent","_ref","_ref$type","type","src","icon","text","ariaLabel","role","_ref$size","size","_ref$textClassName","textClassName","id","dataTestId","className","cx","getStyle","styles","camelCase","React","createElement","alt","getTestId","ComponentDefaultTestId","AVATAR_CONTENT","Icon"],"mappings":"6VA6CA,IAAMA,EAAgB,SAAHC,GAWM,IAAAC,EAAAD,EAVvBE,KAAAA,OAAI,IAAAD,EAAG,OAAMA,EACbE,EAAGH,EAAHG,IACAC,EAAIJ,EAAJI,KACAC,EAAIL,EAAJK,KACcC,EAASN,EAAvB,cACAO,EAAIP,EAAJO,KAAIC,EAAAR,EACJS,KAAAA,OAAI,IAAAD,EAAG,QAAOA,EAAAE,EAAAV,EACdW,cAAAA,OAAa,IAAAD,EAAG,GAAEA,EAClBE,EAAEZ,EAAFY,GACeC,EAAUb,EAAzB,eAEMc,EAAYC,EAChBC,EAASC,EAAQC,EAAU,WAAahB,IACxCc,EAASC,EAAQC,EAAU,WAAahB,EAAO,KAAOO,KAExD,OAAQP,GACN,IAAK,MACH,OACEiB,EAAAC,cAAA,MAAA,CACEb,KAAMA,EACNc,IAAKf,EACLH,IAAKA,EACLW,UAAWA,EACXF,GAAIA,EAAE,cACOC,GAAcS,EAAUC,EAAuBC,eAAgBZ,KAGlF,IAAK,OACH,OACEO,gBAACM,EAAI,CACHrB,KAAMA,eACME,EAEZQ,UAAWA,EAAS,eACP,EACbF,GAAIA,EAAE,cACOC,GAAcS,EAAUC,EAAuBC,eAAgBZ,KAGlF,IAAK,OACH,OACEO,EAAAC,cAAA,OAAA,CAAA,aACcd,EACZC,KAAMA,EACNO,UAAWC,EAAGD,EAAWH,GACzBC,GAAIA,EAAE,cACOC,GAAcS,EAAUC,EAAuBC,eAAgBZ,IAE3EP,GAGP,QACE,OAAO,KAEb"}

package/dist/src/components/Avatar/AvatarContent.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var n={contentImg:"contentImg_17630708e9",contentText:"contentText_50bb391f5a",contentTextLarge:"contentTextLarge_f6d6f10786",contentTextMedium:"contentTextMedium_2fcd925f1b",contentTextSmall:"contentTextSmall_6d797d379a",contentTextXs:"contentTextXs_5ba8a02ed1",contentIconLarge:"contentIconLarge_268735f519",contentIconMedium:"contentIconMedium_4e8881cbfd",contentIconSmall:"contentIconSmall_5552748c59"};!function(n){const t="s_id-50188146c7c7_4_2_0";if("undefined"!=typeof document){const e=document.head||document.getElementsByTagName("head")[0];if(e.querySelector("#"+t))return;const o=document.createElement("style");o.id=t,e.firstChild?e.insertBefore(o,e.firstChild):e.appendChild(o),o.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=n)}("/* stylelint-disable */\n/* stylelint-enable */\n.contentImg_17630708e9 {\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n}\n.contentText_50bb391f5a {\n  font-family: var(--font-family);\n  font-weight: 400;\n  line-height: 21px;\n  letter-spacing: -0.5px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n.contentTextLarge_f6d6f10786 {\n  font: var(--font-h3-normal);\n  letter-spacing: var(--letter-spacing-h3-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font-family: var(--font-family) !important;\n}\n.contentTextMedium_2fcd925f1b {\n  font: var(--font-text1-normal);\n  margin-top: 1px;\n}\n.contentTextSmall_6d797d379a {\n  margin-top: 1px;\n  font-size: 12px;\n}\n.contentTextXs_5ba8a02ed1 {\n  margin-top: 1px;\n  font: var(--font-text3-normal);\n}\n.contentIconLarge_268735f519 {\n  height: 28px;\n  width: 28px;\n}\n.contentIconMedium_4e8881cbfd {\n  height: 18px;\n  width: 18px;\n}\n.contentIconSmall_5552748c59 {\n  height: 12px;\n  width: 12px;\n}");export{n as default};
+var n={contentImg:"contentImg_1678bb0466",contentText:"contentText_12c6257327",contentTextLarge:"contentTextLarge_8eab4684f3",contentTextMedium:"contentTextMedium_37ec5a7257",contentTextSmall:"contentTextSmall_1f72edb835",contentTextXs:"contentTextXs_33f62aa031",contentIconLarge:"contentIconLarge_d04b6eac23",contentIconMedium:"contentIconMedium_15ad0cc192",contentIconSmall:"contentIconSmall_695bbdd807"};!function(n){const t="s_id-50188146c7c7_4_2_2";if("undefined"!=typeof document){const e=document.head||document.getElementsByTagName("head")[0];if(e.querySelector("#"+t))return;const o=document.createElement("style");o.id=t,e.firstChild?e.insertBefore(o,e.firstChild):e.appendChild(o),o.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=n)}("/* stylelint-disable */\n/* stylelint-enable */\n.contentImg_1678bb0466 {\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n}\n.contentText_12c6257327 {\n  font-family: var(--font-family);\n  font-weight: 400;\n  line-height: 21px;\n  letter-spacing: -0.5px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n.contentTextLarge_8eab4684f3 {\n  font: var(--font-h3-normal);\n  letter-spacing: var(--letter-spacing-h3-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font-family: var(--font-family) !important;\n}\n.contentTextMedium_37ec5a7257 {\n  font: var(--font-text1-normal);\n  margin-top: 1px;\n}\n.contentTextSmall_1f72edb835 {\n  margin-top: 1px;\n  font-size: 12px;\n}\n.contentTextXs_33f62aa031 {\n  margin-top: 1px;\n  font: var(--font-text3-normal);\n}\n.contentIconLarge_d04b6eac23 {\n  height: 28px;\n  width: 28px;\n}\n.contentIconMedium_15ad0cc192 {\n  height: 18px;\n  width: 18px;\n}\n.contentIconSmall_695bbdd807 {\n  height: 12px;\n  width: 12px;\n}");export{n as default};
 //# sourceMappingURL=AvatarContent.module.scss.js.map

package/dist/src/components/AvatarGroup/AvatarGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AvatarGroup.js","sources":["../../../../src/components/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import React, { type ReactElement, useMemo } from \"react\";\nimport cx from \"classnames\";\nimport { type AvatarProps } from \"../Avatar/Avatar\";\nimport AvatarGroupCounter from \"./AvatarGroupCounter\";\nimport type VibeComponentProps from \"../../types/VibeComponentProps\";\nimport { type AvatarSize, type AvatarType } from \"../Avatar/Avatar.types\";\nimport { avatarOnClick } from \"./AvatarGroupHelper\";\nimport { type TooltipProps } from \"@vibe/tooltip\";\nimport styles from \"./AvatarGroup.module.scss\";\nimport { type AvatarGroupCounterVisualProps } from \"./AvatarGroup.types\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nexport interface AvatarGroupProps extends VibeComponentProps {\n /*\n Class name applied to each avatar.\n /\n avatarClassName?: string;\n /\n The avatars displayed in the group.\n /\n children?: ReactElement<AvatarProps> \| ReactElement<AvatarProps>[];\n /\n The size of the avatars in the group.\n /\n size?: AvatarSize;\n /\n The type of the avatars in the group.\n /\n type?: AvatarType;\n /\n The maximum number of avatars displayed before showing a counter.\n /\n max?: number;\n /\n Props for customizing the counter display.\n /\n counterProps?: AvatarGroupCounterVisualProps;\n /\n Props passed to the Tooltip component. See full options in the [Tooltip documentation](https://vibe.monday.com/?path=/docs/components-tooltip--docs).\n /\n counterTooltipCustomProps?: Partial<TooltipProps>;\n /\n If true, the counter tooltip uses a virtualized list for performance optimization.\n /\n counterTooltipIsVirtualizedList?: boolean;\n /\n If true, the component is disabled and non-interactive.\n */\n disabled?: boolean;\n}\n\nconst AvatarGroup: React.FC<AvatarGroupProps> = ({\n className,\n avatarClassName,\n id,\n children,\n size,\n type,\n max = 5,\n counterProps,\n counterTooltipCustomProps,\n counterTooltipIsVirtualizedList = false,\n disabled\n}) => {\n const { displayAvatars, counterTooltipAvatars } = useMemo(() => {\n if (!children) {\n return {};\n }\n const childrenArray = Array.isArray(children) ? children : [children];\n return {\n displayAvatars: childrenArray.slice(0, max).map((avatar, index) => {\n return React.cloneElement(avatar, {\n key: index,\n ...avatar?.props,\n size: size \|\| avatar?.props?.size,\n type: type \|\| avatar?.props?.type,\n className: cx(styles.avatarContainer, avatarClassName),\n onClick: (event: React.MouseEvent \| React.KeyboardEvent) => avatarOnClick(event, avatar.props),\n disabled\n });\n }),\n counterTooltipAvatars: childrenArray.slice(max)\n };\n }, [avatarClassName, children, disabled, max, size, type]);\n\n if (!children) {\n return null;\n }\n\n return (\n <div className={cx(styles.avatarGroupContainer, className)} id={id} data-vibe={ComponentVibeId.AVATAR_GROUP}>\n {displayAvatars}\n <AvatarGroupCounter\n counterTooltipAvatars={counterTooltipAvatars}\n counterProps={counterProps}\n counterTooltipCustomProps={counterTooltipCustomProps}\n counterTooltipIsVirtualizedList={counterTooltipIsVirtualizedList}\n size={size}\n type={type}\n disabled={disabled}\n />\n </div>\n );\n};\n\nexport default AvatarGroup;\n"],"names":["AvatarGroup","_ref","className","avatarClassName","id","children","size","type","_ref$max","max","counterProps","counterTooltipCustomProps","_ref$counterTooltipIs","counterTooltipIsVirtualizedList","disabled","_useMemo","useMemo","childrenArray","Array","isArray","displayAvatars","slice","map","avatar","index","React","cloneElement","key","props","_a","_b","cx","styles","avatarContainer","onClick","event","avatarOnClick","counterTooltipAvatars","createElement","avatarGroupContainer","ComponentVibeId","AVATAR_GROUP","AvatarGroupCounter"],"mappings":"kQAmDA,IAAMA,EAA0C,SAA/BC,GAYZ,IAXHC,EAASD,EAATC,UACAC,EAAeF,EAAfE,gBACAC,EAAEH,EAAFG,GACAC,EAAQJ,EAARI,SACAC,EAAIL,EAAJK,KACAC,EAAIN,EAAJM,KAAIC,EAAAP,EACJQ,IAAAA,~~OAAM~~,~~IAAHD~~,EAAG,EAACA,EACPE,EAAYT,EAAZS,aACAC,EAAyBV,EAAzBU,0BAAyBC,EAAAX,EACzBY,gCAAAA,~~OAAkC~~,~~IAAHD~~,GAAQA,EACvCE,EAAQb,EAARa,SAEAC,EAAkDC,GAAQ,WACxD,IAAKX,EACH,MAAO,~~GAET~~,IAAMY,EAAgBC,MAAMC,QAAQd,GAAYA,EAAW,CAACA,GAC5D,MAAO,CACLe,eAAgBH,EAAcI,MAAM,EAAGZ,GAAKa,KAAI,SAACC,EAAQC,WACvD,OAAOC,EAAMC,aAAaH,+BACxBI,IAAKH,GACFD,~~aAAA~~,~~EAAAA~~,EAAQK,OAAK,CAChBtB,KAAMA,YAAQuB,EAAAN,~~aAAA~~,~~EAAAA~~,EAAQK,4BAAOtB,MAC7BC,KAAMA,YAAQuB,EAAAP,~~aAAA~~,~~EAAAA~~,EAAQK,4BAAOrB,MAC7BL,UAAW6B,EAAGC,EAAOC,gBAAiB9B,GACtC+B,QAAS,SAACC,GAA6C,OAAKC,EAAcD,EAAOZ,EAAOK,MAAM,EAC9Fd,SAAAA,IAEJ,IACAuB,sBAAuBpB,EAAcI,MAAMZ,GAE/C,GAAG,CAACN,EAAiBE,EAAUS,EAAUL,EAAKH,EAAMC,IAnB5Ca,EAAcL,EAAdK,eAAgBiB,EAAqBtB,EAArBsB,sBAqBxB,OAAKhC,EAKHoB,~~EAAKa~~,cAAA,MAAA,~~CAAApC~~,UAAW6B,EAAGC,EAAOO,qBAAsBrC,GAAYE,GAAIA,~~EAAe~~,~~YAAAoC~~,EAAgBC,cAC5FrB,EACDK,EAAAa,cAACI,EAAkB,CACjBL,sBAAuBA,EACvB3B,aAAcA,EACdC,0BAA2BA,EAC3BE,gCAAiCA,EACjCP,KAAMA,EACNC,KAAMA,EACNO,SAAUA,KAbP,IAiBX"}
1	+ {"version":3,"file":"AvatarGroup.js","sources":["../../../../src/components/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import React, { type ReactElement, useMemo } from \"react\";\nimport cx from \"classnames\";\nimport { type AvatarProps } from \"../Avatar/Avatar\";\nimport AvatarGroupCounter from \"./AvatarGroupCounter\";\nimport type VibeComponentProps from \"../../types/VibeComponentProps\";\nimport { type AvatarSize, type AvatarType } from \"../Avatar/Avatar.types\";\nimport { avatarOnClick } from \"./AvatarGroupHelper\";\nimport { type TooltipProps } from \"@vibe/tooltip\";\nimport styles from \"./AvatarGroup.module.scss\";\nimport { type AvatarGroupCounterVisualProps } from \"./AvatarGroup.types\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nexport interface AvatarGroupProps extends VibeComponentProps {\n /*\n Class name applied to each avatar.\n /\n avatarClassName?: string;\n /\n The avatars displayed in the group.\n /\n children?: ReactElement<AvatarProps> \| ReactElement<AvatarProps>[];\n /\n The size of the avatars in the group.\n /\n size?: AvatarSize;\n /\n The type of the avatars in the group.\n /\n type?: AvatarType;\n /\n The maximum number of avatars displayed before showing a counter.\n /\n max?: number;\n /\n Props for customizing the counter display.\n /\n counterProps?: AvatarGroupCounterVisualProps;\n /\n Props passed to the Tooltip component. See full options in the [Tooltip documentation](https://vibe.monday.com/?path=/docs/components-tooltip--docs).\n /\n counterTooltipCustomProps?: Partial<TooltipProps>;\n /\n If true, the counter tooltip uses a virtualized list for performance optimization.\n /\n counterTooltipIsVirtualizedList?: boolean;\n /\n If true, the component is disabled and non-interactive.\n */\n disabled?: boolean;\n}\n\nconst AvatarGroup: React.FC<AvatarGroupProps> = ({\n className,\n avatarClassName,\n id,\n children,\n size,\n type,\n max = 5,\n counterProps,\n counterTooltipCustomProps,\n counterTooltipIsVirtualizedList = false,\n disabled\n}) => {\n const { displayAvatars, counterTooltipAvatars } = useMemo(() => {\n if (!children) {\n return {};\n }\n const childrenArray = Array.isArray(children) ? children : [children];\n return {\n displayAvatars: childrenArray.slice(0, max).map((avatar, index) => {\n return React.cloneElement(avatar, {\n key: index,\n ...avatar?.props,\n size: size \|\| avatar?.props?.size,\n type: type \|\| avatar?.props?.type,\n className: cx(styles.avatarContainer, avatarClassName),\n onClick: (event: React.MouseEvent \| React.KeyboardEvent) => avatarOnClick(event, avatar.props),\n disabled\n });\n }),\n counterTooltipAvatars: childrenArray.slice(max)\n };\n }, [avatarClassName, children, disabled, max, size, type]);\n\n if (!children) {\n return null;\n }\n\n return (\n <div className={cx(styles.avatarGroupContainer, className)} id={id} data-vibe={ComponentVibeId.AVATAR_GROUP}>\n {displayAvatars}\n <AvatarGroupCounter\n counterTooltipAvatars={counterTooltipAvatars}\n counterProps={counterProps}\n counterTooltipCustomProps={counterTooltipCustomProps}\n counterTooltipIsVirtualizedList={counterTooltipIsVirtualizedList}\n size={size}\n type={type}\n disabled={disabled}\n />\n </div>\n );\n};\n\nexport default AvatarGroup;\n"],"names":["AvatarGroup","_ref","className","avatarClassName","id","children","size","type","_ref$max","max","counterProps","counterTooltipCustomProps","_ref$counterTooltipIs","counterTooltipIsVirtualizedList","disabled","_useMemo","useMemo","childrenArray","Array","isArray","displayAvatars","slice","map","avatar","index","React","cloneElement","key","props","_a","_b","cx","styles","avatarContainer","onClick","event","avatarOnClick","counterTooltipAvatars","createElement","avatarGroupContainer","ComponentVibeId","AVATAR_GROUP","AvatarGroupCounter"],"mappings":"kQAmDA,IAAMA,EAA0C,SAA/BC,GAYZ,IAXHC,EAASD,EAATC,UACAC,EAAeF,EAAfE,gBACAC,EAAEH,EAAFG,GACAC,EAAQJ,EAARI,SACAC,EAAIL,EAAJK,KACAC,EAAIN,EAAJM,KAAIC,EAAAP,EACJQ,IAAAA,OAAG,IAAAD,EAAG,EAACA,EACPE,EAAYT,EAAZS,aACAC,EAAyBV,EAAzBU,0BAAyBC,EAAAX,EACzBY,gCAAAA,OAA+B,IAAAD,GAAQA,EACvCE,EAAQb,EAARa,SAEAC,EAAkDC,GAAQ,WACxD,IAAKX,EACH,MAAO,CAAA,EAET,IAAMY,EAAgBC,MAAMC,QAAQd,GAAYA,EAAW,CAACA,GAC5D,MAAO,CACLe,eAAgBH,EAAcI,MAAM,EAAGZ,GAAKa,KAAI,SAACC,EAAQC,WACvD,OAAOC,EAAMC,aAAaH,+BACxBI,IAAKH,GACFD,aAAM,EAANA,EAAQK,OAAK,CAChBtB,KAAMA,YAAQuB,EAAAN,aAAM,EAANA,EAAQK,4BAAOtB,MAC7BC,KAAMA,YAAQuB,EAAAP,aAAM,EAANA,EAAQK,4BAAOrB,MAC7BL,UAAW6B,EAAGC,EAAOC,gBAAiB9B,GACtC+B,QAAS,SAACC,GAA6C,OAAKC,EAAcD,EAAOZ,EAAOK,MAAM,EAC9Fd,SAAAA,IAEJ,IACAuB,sBAAuBpB,EAAcI,MAAMZ,GAE/C,GAAG,CAACN,EAAiBE,EAAUS,EAAUL,EAAKH,EAAMC,IAnB5Ca,EAAcL,EAAdK,eAAgBiB,EAAqBtB,EAArBsB,sBAqBxB,OAAKhC,EAKHoB,EAAAa,cAAA,MAAA,CAAKpC,UAAW6B,EAAGC,EAAOO,qBAAsBrC,GAAYE,GAAIA,EAAE,YAAaoC,EAAgBC,cAC5FrB,EACDK,EAAAa,cAACI,EAAkB,CACjBL,sBAAuBA,EACvB3B,aAAcA,EACdC,0BAA2BA,EAC3BE,gCAAiCA,EACjCP,KAAMA,EACNC,KAAMA,EACNO,SAAUA,KAbP,IAiBX"}

package/dist/src/components/AvatarGroup/AvatarGroup.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={avatarGroupContainer:"avatarGroupContainer_d354da8ec6",avatarContainer:"avatarContainer_f1e05e4ee8"};!function(e){const a="s_id-34c07868a875_4_2_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+a))return;const t=document.createElement("style");t.id=a,n.firstChild?n.insertBefore(t,n.firstChild):n.appendChild(t),t.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[a]=e)}(".avatarGroupContainer_d354da8ec6 {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  position: relative;\n  padding: 0;\n  margin: 0;\n}\n\n.avatarContainer_f1e05e4ee8 {\n  margin-inline-start: calc(-1 * var(--space-8));\n}");export{e as default};
+var e={avatarGroupContainer:"avatarGroupContainer_50da294ef5",avatarContainer:"avatarContainer_f42306f391"};!function(e){const a="s_id-34c07868a875_4_2_2";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+a))return;const t=document.createElement("style");t.id=a,n.firstChild?n.insertBefore(t,n.firstChild):n.appendChild(t),t.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[a]=e)}(".avatarGroupContainer_50da294ef5 {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  position: relative;\n  padding: 0;\n  margin: 0;\n}\n\n.avatarContainer_f42306f391 {\n  margin-inline-start: calc(-1 * var(--space-8));\n}");export{e as default};
 //# sourceMappingURL=AvatarGroup.module.scss.js.map

package/dist/src/components/AvatarGroup/AvatarGroupCounter.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AvatarGroupCounter.js","sources":["../../../../src/components/AvatarGroup/AvatarGroupCounter.tsx"],"sourcesContent":["import React, { type ReactElement, useCallback, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { type AvatarProps } from \"../Avatar/Avatar\";\nimport Counter from \"../Counter/Counter\";\nimport MenuButton from \"../MenuButton/MenuButton\";\nimport Menu from \"../Menu/Menu/Menu\";\nimport AvatarMenuItem from \"../Menu/MenuItem/AvatarMenuItem\";\nimport AvatarGroupCounterTooltipContainer from \"./AvatarGroupCounterTooltipContainer\";\nimport type VibeComponentProps from \"../../types/VibeComponentProps\";\nimport { type AvatarSize, type AvatarType } from \"../Avatar/Avatar.types\";\nimport { getStyle } from \"@vibe/shared\";\nimport { type AvatarGroupCounterVisualProps } from \"./AvatarGroup.types\";\nimport { type TooltipProps } from \"@vibe/tooltip\";\nimport { avatarOnClick } from \"./AvatarGroupHelper\";\nimport styles from \"./AvatarGroupCounter.module.scss\";\nimport { AVATAR_GROUP_COUNTER_AVATAR_SIZE } from \"./AvatarGroupConstants\";\n\nexport interface AvatarGroupCounterProps extends VibeComponentProps {\n /*\n The list of avatars hidden behind the counter.\n /\n counterTooltipAvatars?: ReactElement<AvatarProps>[];\n /\n Props for customizing the counter appearance.\n /\n counterProps?: AvatarGroupCounterVisualProps;\n /\n Props for customizing the counter tooltip.\n /\n counterTooltipCustomProps?: Partial<TooltipProps>;\n /\n If true, the counter tooltip uses a virtualized list for performance optimization.\n /\n counterTooltipIsVirtualizedList?: boolean;\n /\n The size of the counter.\n /\n size?: AvatarSize;\n /\n The type of the avatars in the counter.\n /\n type?: AvatarType;\n /\n The label of the counter for accessibility.\n /\n counterAriaLabel?: string;\n /\n If true, the counter is disabled and non-interactive.\n /\n disabled?: boolean;\n}\n\nconst AvatarGroupCounter: React.FC<AvatarGroupCounterProps> = ({\n counterTooltipAvatars = [],\n counterProps,\n counterTooltipCustomProps,\n counterTooltipIsVirtualizedList = false,\n size = \"medium\",\n type,\n counterAriaLabel,\n disabled\n}: AvatarGroupCounterProps) => {\n const {\n color: counterColor = \"light\",\n count: counterValue = counterTooltipAvatars.length,\n prefix: counterPrefix = \"+\",\n maxDigits: counterMaxDigits = 3,\n ariaLabelItemsName: counterAriaLabelItemsName = \"items\",\n noAnimation,\n dialogContainerSelector,\n tabIndex: counterTabIndex = 0\n } = counterProps \|\| {};\n\n const counterSizeStyle = getStyle(styles, size?.toString());\n const counterColorStyle = styles[counterColor];\n\n const focusPrevPlaceholderRef = useRef(null);\n const focusNextPlaceholderRef = useRef(null);\n const counterContainerRef = useRef(null);\n const counterComponent = useCallback(() => {\n return (\n <Counter\n color={counterColor}\n count={counterValue}\n prefix={counterPrefix}\n maxDigits={counterMaxDigits}\n aria-label={counterAriaLabel ? counterAriaLabel : `Tab for more ${counterAriaLabelItemsName}`}\n noAnimation={noAnimation}\n counterClassName={cx({ [styles.disabled]: disabled })}\n size={size === \"xs\" ? \"xs\" : undefined}\n />\n );\n }, [\n counterAriaLabel,\n counterAriaLabelItemsName,\n counterColor,\n counterMaxDigits,\n counterPrefix,\n counterValue,\n disabled,\n noAnimation\n ]);\n\n if (!counterTooltipAvatars.length && !counterValue) {\n return null;\n }\n\n if (disabled) {\n return (\n <div\n ref={counterContainerRef}\n className={cx(styles.counterContainer, styles.disabled, counterSizeStyle, counterColorStyle)}\n >\n {counterComponent()}\n </div>\n );\n }\n\n const areAvatarsClickable = counterTooltipAvatars.some(a => a.props?.onClick);\n if (areAvatarsClickable) {\n return (\n <MenuButton\n component={counterComponent}\n zIndex={1}\n className={cx(styles.counterContainer, counterSizeStyle, counterColorStyle)}\n aria-label={counterAriaLabel ? counterAriaLabel : `${counterValue} additional ${counterAriaLabelItemsName}`}\n dialogContainerSelector={dialogContainerSelector}\n >\n <Menu id=\"menu\" size=\"medium\" className={styles.menu} focusItemIndexOnMount={0}>\n {counterTooltipAvatars.map((avatar, index) => {\n return (\n // eslint-disable-next-line react/jsx-key\n <AvatarMenuItem\n menuItemProps={{\n key: avatar.props?.id \|\| String(index),\n title: (avatar.props?.tooltipProps?.content as string) \|\| avatar?.props?.[\"aria-label\"],\n onClick: (event: React.MouseEvent \| React.KeyboardEvent) => avatarOnClick(event, avatar.props)\n }}\n avatarProps={{\n ...avatar.props,\n customSize: AVATAR_GROUP_COUNTER_AVATAR_SIZE,\n \"aria-label\": \"\",\n tabIndex: -1\n }}\n />\n );\n })}\n </Menu>\n </MenuButton>\n );\n }\n\n return (\n <AvatarGroupCounterTooltipContainer\n focusPrevPlaceholderRef={focusPrevPlaceholderRef}\n focusNextPlaceholderRef={focusNextPlaceholderRef}\n counterContainerRef={counterContainerRef}\n avatars={counterTooltipAvatars}\n counterTooltipCustomProps={counterTooltipCustomProps}\n counterTooltipIsVirtualizedList={counterTooltipIsVirtualizedList}\n type={type}\n >\n <div tabIndex={-1} ref={focusPrevPlaceholderRef} />\n {/ eslint-disable jsx-a11y/no-noninteractive-tabindex /}\n <div\n tabIndex={counterTabIndex}\n className={cx(styles.counterContainer, counterSizeStyle, counterColorStyle)}\n ref={counterContainerRef}\n >\n {/ eslint-enable jsx-a11y/no-noninteractive-tabindex */}\n {counterComponent()}\n <div tabIndex={-1} ref={focusNextPlaceholderRef} />\n </div>\n </AvatarGroupCounterTooltipContainer>\n );\n};\n\nexport default AvatarGroupCounter;\n"],"names":["AvatarGroupCounter","_ref","_ref$counterTooltipAv","counterTooltipAvatars","counterTooltipCustomProps","_ref$counterTooltipIs","counterTooltipIsVirtualizedList","_ref$size","size","type","counterAriaLabel","disabled","_ref2","counterProps","_ref2$color","color","counterColor","_ref2$count","count","counterValue","length","_ref2$prefix","prefix","counterPrefix","_ref2$maxDigits","maxDigits","counterMaxDigits","_ref2$ariaLabelItemsN","ariaLabelItemsName","counterAriaLabelItemsName","noAnimation","dialogContainerSelector","_ref2$tabIndex","tabIndex","counterTabIndex","counterSizeStyle","getStyle","styles","counterColorStyle","focusPrevPlaceholderRef","useRef","focusNextPlaceholderRef","counterContainerRef","counterComponent","useCallback","React","createElement","Counter","concat","counterClassName","cx","_defineProperty","undefined","ref","className","counterContainer","some","a","_a","props","onClick","MenuButton","component","zIndex","Menu","id","menu","focusItemIndexOnMount","map","avatar","index","AvatarMenuItem","menuItemProps","key","String","title","_c","_b","tooltipProps","content","_d","event","avatarOnClick","avatarProps","customSize","AVATAR_GROUP_COUNTER_AVATAR_SIZE","AvatarGroupCounterTooltipContainer","avatars"],"mappings":"ooBAoDA,IAAMA,EAAwD,SAAtCC,GASM,IAAAC,EAAAD,EAR5BE,sBAAAA,~~OAAwB~~,~~IAAHD~~,EAAG,GAAEA,EAE1BE,EAAyBH,EAAzBG,0BAAyBC,EAAAJ,EACzBK,gCAAAA,~~OAAkC~~,~~IAAHD~~,GAAQA,EAAAE,EAAAN,EACvCO,KAAAA,~~OAAO~~,~~IAAHD~~,EAAG,SAAQA,EACfE,EAAIR,EAAJQ,KACAC,EAAgBT,EAAhBS,iBACAC,EAAQV,EAARU,SAEAC,EARYX,EAAZY,cAiBoB,~~CAAE~~,~~EAAAC~~,EAAAF,EARpBG,MAAOC,~~OAAe~~,~~IAAHF~~,EAAG,QAAOA,EAAAG,EAAAL,EAC7BM,MAAOC,OAAY,IAAAF,EAAGd,EAAsBiB,OAAMH,EAAAI,EAAAT,EAClDU,OAAQC,~~OAAgB~~,~~IAAHF~~,EAAG,IAAGA,EAAAG,EAAAZ,EAC3Ba,UAAWC,~~OAAmB~~,~~IAAHF~~,EAAG,EAACA,EAAAG,EAAAf,EAC/BgB,mBAAoBC,~~OAA4B~~,~~IAAHF~~,EAAG,QAAOA,EACvDG,EAAWlB,EAAXkB,YACAC,EAAuBnB,EAAvBmB,wBAAuBC,EAAApB,EACvBqB,SAAUC,~~OAAkB~~,~~IAAHF~~,EAAG,EAACA,EAGzBG,EAAmBC,EAASC,EAAQ7B,eAAAA,MACpC8B,EAAoBD,EAAOrB,GAE3BuB,EAA0BC,EAAO,MACjCC,EAA0BD,EAAO,MACjCE,EAAsBF,EAAO,MAC7BG,EAAmBC,GAAY,WACnC,OACEC,EAAAC,cAACC,EAAO,CACNhC,MAAOC,EACPE,MAAOC,EACPG,OAAQC,EACRE,UAAWC,~~EACC~~,~~aAAAhB~~,mBAAmCsC,OAAmBnB,GAClEC,YAAaA,EACbmB,iBAAkBC,EAAEC,EAAA,CAAA,EAAId,EAAO1B,SAAWA,IAC1CH,KAAe,OAATA,EAAgB,UAAO4C,GAGnC,GAAG,CACD1C,EACAmB,EACAb,EACAU,EACAH,EACAJ,EACAR,EACAmB,IAGF,OAAK3B,EAAsBiB,QAAWD,EAIlCR,EAEAkC,~~EACEC~~,cAAA,MAAA,~~CAAAO~~,IAAKX,EACLY,UAAWJ,EAAGb,EAAOkB,iBAAkBlB,EAAO1B,SAAUwB,EAAkBG,IAEzEK,KAKqBxC,EAAsBqD,MAAK,SAAAC,GAAI,IAAAC,EAAC,OAAO,QAAPA,EAAAD,EAAEE,aAAK,IAAAD,OAAA,EAAAA,EAAEE,OAAO,IAGxEf,~~EAACC~~,~~cAAAe~~,GACCC,UAAWnB,EACXoB,OAAQ,EACRT,UAAWJ,EAAGb,EAAOkB,iBAAkBpB,EAAkBG,GAAkB,aAC/D5B,~~GAAmCsC~~,~~GAAAA~~,OAAM7B,~~EAAY6B~~,~~gBAAAA~~,OAAenB,GAChFE,wBAAyBA,GAEzBc,EAAAC,cAACkB,EAAI,CAACC,GAAG,OAAOzD,KAAK,SAAS8C,UAAWjB,EAAO6B,KAAMC,sBAAuB,GAC1EhE,EAAsBiE,KAAI,SAACC,EAAQC,eAClC,OAEEzB,~~EAACC~~,~~cAAAyB~~,~~EACC~~,~~CAAAC~~,cAAe,CACbC,~~KAAmB~~,~~QAAdf~~,EAAAW,EAAOV,~~aAAO~~,IAAAD,OAAA,EAAAA,~~EAAAO~~,KAAaK,EAAPI,GACzBC,~~OAAoC~~,~~QAA5BC~~,~~EAAc~~,~~QAAdC~~,EAAAR,EAAOV,~~aAAO~~,IAAAkB,OAAA,EAAAA,~~EAAAC~~,~~oBAAc~~,IAAAF,OAAA,EAAAA,~~EAAAG~~,WAAmC,QAAbC,EAAAX,~~aAAA~~,~~EAAAA~~,EAAQV,aAAK,IAAAqB,OAAA,EAAAA,EAAG,eAC1EpB,QAAS,SAACqB,GAA6C,OAAKC,EAAcD,EAAOZ,EAAOV,MAAM,GAEhGwB,2CACKd,EAAOV,~~OACV~~,~~CAAAyB~~,WAAYC,EACZ,aAAc,GACdpD,~~UAAW~~,KAIlB,~~MAOPY~~,EAAAC,cAACwC,EAAkC,CACjC/C,wBAAyBA,EACzBE,wBAAyBA,EACzBC,oBAAqBA,EACrB6C,QAASpF,EACTC,0BAA2BA,EAC3BE,gCAAiCA,EACjCG,KAAMA,GAENoC,~~EAAKC~~,cAAA,MAAA,~~CAAAb~~,~~UAAW~~,~~EAAGoB~~,IAAKd,IAExBM,EAAAC,cAAA,MAAA,CACEb,SAAUC,EACVoB,UAAWJ,EAAGb,EAAOkB,iBAAkBpB,EAAkBG,GACzDe,IAAKX,GAGJC,IACDE,EAAAC,cAAA,MAAA,CAAKb,~~UAAW~~,~~EAAGoB~~,IAAKZ,MAnErB,IAuEX"}
1	+ {"version":3,"file":"AvatarGroupCounter.js","sources":["../../../../src/components/AvatarGroup/AvatarGroupCounter.tsx"],"sourcesContent":["import React, { type ReactElement, useCallback, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { type AvatarProps } from \"../Avatar/Avatar\";\nimport Counter from \"../Counter/Counter\";\nimport MenuButton from \"../MenuButton/MenuButton\";\nimport Menu from \"../Menu/Menu/Menu\";\nimport AvatarMenuItem from \"../Menu/MenuItem/AvatarMenuItem\";\nimport AvatarGroupCounterTooltipContainer from \"./AvatarGroupCounterTooltipContainer\";\nimport type VibeComponentProps from \"../../types/VibeComponentProps\";\nimport { type AvatarSize, type AvatarType } from \"../Avatar/Avatar.types\";\nimport { getStyle } from \"@vibe/shared\";\nimport { type AvatarGroupCounterVisualProps } from \"./AvatarGroup.types\";\nimport { type TooltipProps } from \"@vibe/tooltip\";\nimport { avatarOnClick } from \"./AvatarGroupHelper\";\nimport styles from \"./AvatarGroupCounter.module.scss\";\nimport { AVATAR_GROUP_COUNTER_AVATAR_SIZE } from \"./AvatarGroupConstants\";\n\nexport interface AvatarGroupCounterProps extends VibeComponentProps {\n /*\n The list of avatars hidden behind the counter.\n /\n counterTooltipAvatars?: ReactElement<AvatarProps>[];\n /\n Props for customizing the counter appearance.\n /\n counterProps?: AvatarGroupCounterVisualProps;\n /\n Props for customizing the counter tooltip.\n /\n counterTooltipCustomProps?: Partial<TooltipProps>;\n /\n If true, the counter tooltip uses a virtualized list for performance optimization.\n /\n counterTooltipIsVirtualizedList?: boolean;\n /\n The size of the counter.\n /\n size?: AvatarSize;\n /\n The type of the avatars in the counter.\n /\n type?: AvatarType;\n /\n The label of the counter for accessibility.\n /\n counterAriaLabel?: string;\n /\n If true, the counter is disabled and non-interactive.\n /\n disabled?: boolean;\n}\n\nconst AvatarGroupCounter: React.FC<AvatarGroupCounterProps> = ({\n counterTooltipAvatars = [],\n counterProps,\n counterTooltipCustomProps,\n counterTooltipIsVirtualizedList = false,\n size = \"medium\",\n type,\n counterAriaLabel,\n disabled\n}: AvatarGroupCounterProps) => {\n const {\n color: counterColor = \"light\",\n count: counterValue = counterTooltipAvatars.length,\n prefix: counterPrefix = \"+\",\n maxDigits: counterMaxDigits = 3,\n ariaLabelItemsName: counterAriaLabelItemsName = \"items\",\n noAnimation,\n dialogContainerSelector,\n tabIndex: counterTabIndex = 0\n } = counterProps \|\| {};\n\n const counterSizeStyle = getStyle(styles, size?.toString());\n const counterColorStyle = styles[counterColor];\n\n const focusPrevPlaceholderRef = useRef(null);\n const focusNextPlaceholderRef = useRef(null);\n const counterContainerRef = useRef(null);\n const counterComponent = useCallback(() => {\n return (\n <Counter\n color={counterColor}\n count={counterValue}\n prefix={counterPrefix}\n maxDigits={counterMaxDigits}\n aria-label={counterAriaLabel ? counterAriaLabel : `Tab for more ${counterAriaLabelItemsName}`}\n noAnimation={noAnimation}\n counterClassName={cx({ [styles.disabled]: disabled })}\n size={size === \"xs\" ? \"xs\" : undefined}\n />\n );\n }, [\n counterAriaLabel,\n counterAriaLabelItemsName,\n counterColor,\n counterMaxDigits,\n counterPrefix,\n counterValue,\n disabled,\n noAnimation\n ]);\n\n if (!counterTooltipAvatars.length && !counterValue) {\n return null;\n }\n\n if (disabled) {\n return (\n <div\n ref={counterContainerRef}\n className={cx(styles.counterContainer, styles.disabled, counterSizeStyle, counterColorStyle)}\n >\n {counterComponent()}\n </div>\n );\n }\n\n const areAvatarsClickable = counterTooltipAvatars.some(a => a.props?.onClick);\n if (areAvatarsClickable) {\n return (\n <MenuButton\n component={counterComponent}\n zIndex={1}\n className={cx(styles.counterContainer, counterSizeStyle, counterColorStyle)}\n aria-label={counterAriaLabel ? counterAriaLabel : `${counterValue} additional ${counterAriaLabelItemsName}`}\n dialogContainerSelector={dialogContainerSelector}\n >\n <Menu id=\"menu\" size=\"medium\" className={styles.menu} focusItemIndexOnMount={0}>\n {counterTooltipAvatars.map((avatar, index) => {\n return (\n // eslint-disable-next-line react/jsx-key\n <AvatarMenuItem\n menuItemProps={{\n key: avatar.props?.id \|\| String(index),\n title: (avatar.props?.tooltipProps?.content as string) \|\| avatar?.props?.[\"aria-label\"],\n onClick: (event: React.MouseEvent \| React.KeyboardEvent) => avatarOnClick(event, avatar.props)\n }}\n avatarProps={{\n ...avatar.props,\n customSize: AVATAR_GROUP_COUNTER_AVATAR_SIZE,\n \"aria-label\": \"\",\n tabIndex: -1\n }}\n />\n );\n })}\n </Menu>\n </MenuButton>\n );\n }\n\n return (\n <AvatarGroupCounterTooltipContainer\n focusPrevPlaceholderRef={focusPrevPlaceholderRef}\n focusNextPlaceholderRef={focusNextPlaceholderRef}\n counterContainerRef={counterContainerRef}\n avatars={counterTooltipAvatars}\n counterTooltipCustomProps={counterTooltipCustomProps}\n counterTooltipIsVirtualizedList={counterTooltipIsVirtualizedList}\n type={type}\n >\n <div tabIndex={-1} ref={focusPrevPlaceholderRef} />\n {/ eslint-disable jsx-a11y/no-noninteractive-tabindex /}\n <div\n tabIndex={counterTabIndex}\n className={cx(styles.counterContainer, counterSizeStyle, counterColorStyle)}\n ref={counterContainerRef}\n >\n {/ eslint-enable jsx-a11y/no-noninteractive-tabindex */}\n {counterComponent()}\n <div tabIndex={-1} ref={focusNextPlaceholderRef} />\n </div>\n </AvatarGroupCounterTooltipContainer>\n );\n};\n\nexport default AvatarGroupCounter;\n"],"names":["AvatarGroupCounter","_ref","_ref$counterTooltipAv","counterTooltipAvatars","counterTooltipCustomProps","_ref$counterTooltipIs","counterTooltipIsVirtualizedList","_ref$size","size","type","counterAriaLabel","disabled","_ref2","counterProps","_ref2$color","color","counterColor","_ref2$count","count","counterValue","length","_ref2$prefix","prefix","counterPrefix","_ref2$maxDigits","maxDigits","counterMaxDigits","_ref2$ariaLabelItemsN","ariaLabelItemsName","counterAriaLabelItemsName","noAnimation","dialogContainerSelector","_ref2$tabIndex","tabIndex","counterTabIndex","counterSizeStyle","getStyle","styles","counterColorStyle","focusPrevPlaceholderRef","useRef","focusNextPlaceholderRef","counterContainerRef","counterComponent","useCallback","React","createElement","Counter","concat","counterClassName","cx","_defineProperty","undefined","ref","className","counterContainer","some","a","_a","props","onClick","MenuButton","component","zIndex","Menu","id","menu","focusItemIndexOnMount","map","avatar","index","AvatarMenuItem","menuItemProps","key","String","title","_c","_b","tooltipProps","content","_d","event","avatarOnClick","avatarProps","customSize","AVATAR_GROUP_COUNTER_AVATAR_SIZE","AvatarGroupCounterTooltipContainer","avatars"],"mappings":"ooBAoDA,IAAMA,EAAwD,SAAtCC,GASM,IAAAC,EAAAD,EAR5BE,sBAAAA,OAAqB,IAAAD,EAAG,GAAEA,EAE1BE,EAAyBH,EAAzBG,0BAAyBC,EAAAJ,EACzBK,gCAAAA,OAA+B,IAAAD,GAAQA,EAAAE,EAAAN,EACvCO,KAAAA,OAAI,IAAAD,EAAG,SAAQA,EACfE,EAAIR,EAAJQ,KACAC,EAAgBT,EAAhBS,iBACAC,EAAQV,EAARU,SAEAC,EARYX,EAAZY,cAiBoB,CAAA,EAAEC,EAAAF,EARpBG,MAAOC,OAAY,IAAAF,EAAG,QAAOA,EAAAG,EAAAL,EAC7BM,MAAOC,OAAY,IAAAF,EAAGd,EAAsBiB,OAAMH,EAAAI,EAAAT,EAClDU,OAAQC,OAAa,IAAAF,EAAG,IAAGA,EAAAG,EAAAZ,EAC3Ba,UAAWC,OAAgB,IAAAF,EAAG,EAACA,EAAAG,EAAAf,EAC/BgB,mBAAoBC,OAAyB,IAAAF,EAAG,QAAOA,EACvDG,EAAWlB,EAAXkB,YACAC,EAAuBnB,EAAvBmB,wBAAuBC,EAAApB,EACvBqB,SAAUC,OAAe,IAAAF,EAAG,EAACA,EAGzBG,EAAmBC,EAASC,EAAQ7B,eAAAA,MACpC8B,EAAoBD,EAAOrB,GAE3BuB,EAA0BC,EAAO,MACjCC,EAA0BD,EAAO,MACjCE,EAAsBF,EAAO,MAC7BG,EAAmBC,GAAY,WACnC,OACEC,EAAAC,cAACC,EAAO,CACNhC,MAAOC,EACPE,MAAOC,EACPG,OAAQC,EACRE,UAAWC,EAAgB,aACfhB,mBAAmCsC,OAAmBnB,GAClEC,YAAaA,EACbmB,iBAAkBC,EAAEC,EAAA,CAAA,EAAId,EAAO1B,SAAWA,IAC1CH,KAAe,OAATA,EAAgB,UAAO4C,GAGnC,GAAG,CACD1C,EACAmB,EACAb,EACAU,EACAH,EACAJ,EACAR,EACAmB,IAGF,OAAK3B,EAAsBiB,QAAWD,EAIlCR,EAEAkC,EAAAC,cAAA,MAAA,CACEO,IAAKX,EACLY,UAAWJ,EAAGb,EAAOkB,iBAAkBlB,EAAO1B,SAAUwB,EAAkBG,IAEzEK,KAKqBxC,EAAsBqD,MAAK,SAAAC,GAAI,IAAAC,EAAC,OAAO,QAAPA,EAAAD,EAAEE,aAAK,IAAAD,OAAA,EAAAA,EAAEE,OAAO,IAGxEf,EAAAC,cAACe,GACCC,UAAWnB,EACXoB,OAAQ,EACRT,UAAWJ,EAAGb,EAAOkB,iBAAkBpB,EAAkBG,GAAkB,aAC/D5B,GAAmC,GAAAsC,OAAM7B,EAAY,gBAAA6B,OAAenB,GAChFE,wBAAyBA,GAEzBc,EAAAC,cAACkB,EAAI,CAACC,GAAG,OAAOzD,KAAK,SAAS8C,UAAWjB,EAAO6B,KAAMC,sBAAuB,GAC1EhE,EAAsBiE,KAAI,SAACC,EAAQC,eAClC,OAEEzB,EAAAC,cAACyB,EAAc,CACbC,cAAe,CACbC,KAAiB,QAAZf,EAAAW,EAAOV,aAAK,IAAAD,OAAA,EAAAA,EAAEO,KAAaK,EAAPI,GACzBC,OAAkC,QAA1BC,EAAY,QAAZC,EAAAR,EAAOV,aAAK,IAAAkB,OAAA,EAAAA,EAAEC,oBAAY,IAAAF,OAAA,EAAAA,EAAEG,WAAmC,QAAbC,EAAAX,aAAM,EAANA,EAAQV,aAAK,IAAAqB,OAAA,EAAAA,EAAG,eAC1EpB,QAAS,SAACqB,GAA6C,OAAKC,EAAcD,EAAOZ,EAAOV,MAAM,GAEhGwB,2CACKd,EAAOV,OAAK,CACfyB,WAAYC,EACZ,aAAc,GACdpD,UAAU,KAIlB,MAONY,EAAAC,cAACwC,EAAkC,CACjC/C,wBAAyBA,EACzBE,wBAAyBA,EACzBC,oBAAqBA,EACrB6C,QAASpF,EACTC,0BAA2BA,EAC3BE,gCAAiCA,EACjCG,KAAMA,GAENoC,EAAAC,cAAA,MAAA,CAAKb,UAAU,EAAIoB,IAAKd,IAExBM,EAAAC,cAAA,MAAA,CACEb,SAAUC,EACVoB,UAAWJ,EAAGb,EAAOkB,iBAAkBpB,EAAkBG,GACzDe,IAAKX,GAGJC,IACDE,EAAAC,cAAA,MAAA,CAAKb,UAAU,EAAIoB,IAAKZ,MAnErB,IAuEX"}

package/dist/src/components/AvatarGroup/AvatarGroupCounter.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var n={counterContainer:"counterContainer_a937560630","focus-visible":"focus-visible_1caa46d70d",xs:"xs_f79ba14790",small:"small_ba1416ee46",medium:"medium_e88b86c39a",large:"large_4d57482218",primary:"primary_6036fc8c14",dark:"dark_d3abc1d619",negative:"negative_da158638d0",light:"light_6d740d89fb",disabled:"disabled_fd959c6c41",menu:"menu_1a8653f042"};!function(n){const e="s_id-98062d6d439a_4_2_0";if("undefined"!=typeof document){const a=document.head||document.getElementsByTagName("head")[0];if(a.querySelector("#"+e))return;const o=document.createElement("style");o.id=e,a.firstChild?a.insertBefore(o,a.firstChild):a.appendChild(o),o.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}("/* stylelint-disable */\n/* stylelint-enable */\n.counterContainer_a937560630.counterContainer_a937560630 {\n  background: var(--ui-background-color);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-inline-start: calc(-1 * var(--space-8));\n  z-index: 1;\n  border: 1px solid var(--primary-background-color);\n}\n.counterContainer_a937560630.counterContainer_a937560630:focus-visible, .counterContainer_a937560630.counterContainer_a937560630.focus-visible_1caa46d70d { /* stylelint-disable-line selector-class-pattern */\n  outline: none;\n}\n.counterContainer_a937560630.counterContainer_a937560630:focus-visible:focus-visible, .counterContainer_a937560630.counterContainer_a937560630:focus-visible.focus-visible_1caa46d70d, .counterContainer_a937560630.counterContainer_a937560630.focus-visible_1caa46d70d:focus-visible, .counterContainer_a937560630.counterContainer_a937560630.focus-visible_1caa46d70d.focus-visible_1caa46d70d {\n  outline: none;\n  z-index: 11;\n  border-radius: 50%;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.counterContainer_a937560630.counterContainer_a937560630:focus-visible:focus:not(.focus-visible_1caa46d70d), .counterContainer_a937560630.counterContainer_a937560630.focus-visible_1caa46d70d:focus:not(.focus-visible_1caa46d70d) {\n  outline: none;\n}\n.counterContainer_a937560630.counterContainer_a937560630.xs_f79ba14790 {\n  height: 20px;\n  min-width: 20px;\n  border-radius: 10px;\n  padding: 0 1px;\n}\n.counterContainer_a937560630.counterContainer_a937560630.small_ba1416ee46 {\n  height: 28px;\n  min-width: 28px;\n  border-radius: 14px;\n  padding: 0 1px;\n}\n.counterContainer_a937560630.counterContainer_a937560630.medium_e88b86c39a {\n  height: 32px;\n  min-width: 32px;\n  border-radius: 16px;\n  padding: 0 2px;\n}\n.counterContainer_a937560630.counterContainer_a937560630.large_4d57482218 {\n  height: 50px;\n  min-width: 50px;\n  border-radius: 25px;\n  padding: 0 var(--space-4);\n}\n.counterContainer_a937560630.counterContainer_a937560630.primary_6036fc8c14 {\n  color: var(--text-color-on-primary);\n  background-color: var(--primary-color);\n}\n.counterContainer_a937560630.counterContainer_a937560630.dark_d3abc1d619 {\n  color: var(--text-color-on-inverted);\n  background-color: var(--inverted-color-background);\n}\n.counterContainer_a937560630.counterContainer_a937560630.negative_da158638d0 {\n  color: var(--text-color-on-primary);\n  background-color: var(--negative-color);\n}\n.counterContainer_a937560630.counterContainer_a937560630.light_6d740d89fb {\n  color: var(--primary-text-color);\n  background-color: var(--ui-background-color);\n}\n.counterContainer_a937560630.counterContainer_a937560630 .disabled_fd959c6c41, .counterContainer_a937560630.counterContainer_a937560630.disabled_fd959c6c41 {\n  background-color: var(--disabled-background-color);\n  color: var(--disabled-text-color);\n}\n.menu_1a8653f042 {\n  max-height: 300px;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n.menu_1a8653f042::-webkit-scrollbar {\n  width: 4px;\n  height: 6px;\n}\n.menu_1a8653f042::-webkit-scrollbar-thumb {\n  background-color: var(--ui-border-color);\n  border-radius: 4px;\n}");export{n as default};
+var n={counterContainer:"counterContainer_6d3b16d1a8","focus-visible":"focus-visible_74c131d040",xs:"xs_4d4d3d6e55",small:"small_a8c0147079",medium:"medium_a1578c30c9",large:"large_cb2b4c455c",primary:"primary_22bbf84201",dark:"dark_5612fcc642",negative:"negative_4c83093cc0",light:"light_f4bd02bc87",disabled:"disabled_7aa997143c",menu:"menu_50e8097522"};!function(n){const e="s_id-98062d6d439a_4_2_2";if("undefined"!=typeof document){const o=document.head||document.getElementsByTagName("head")[0];if(o.querySelector("#"+e))return;const r=document.createElement("style");r.id=e,o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}("/* stylelint-disable */\n/* stylelint-enable */\n.counterContainer_6d3b16d1a8.counterContainer_6d3b16d1a8 {\n  background: var(--ui-background-color);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-inline-start: calc(-1 * var(--space-8));\n  z-index: 1;\n  border: 1px solid var(--primary-background-color);\n}\n.counterContainer_6d3b16d1a8.counterContainer_6d3b16d1a8:focus-visible, .counterContainer_6d3b16d1a8.counterContainer_6d3b16d1a8.focus-visible_74c131d040 { /* stylelint-disable-line selector-class-pattern */\n  outline: none;\n}\n.counterContainer_6d3b16d1a8.counterContainer_6d3b16d1a8:focus-visible:focus-visible, .counterContainer_6d3b16d1a8.counterContainer_6d3b16d1a8:focus-visible.focus-visible_74c131d040, .counterContainer_6d3b16d1a8.counterContainer_6d3b16d1a8.focus-visible_74c131d040:focus-visible, .counterContainer_6d3b16d1a8.counterContainer_6d3b16d1a8.focus-visible_74c131d040.focus-visible_74c131d040 {\n  outline: none;\n  z-index: 11;\n  border-radius: 50%;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.counterContainer_6d3b16d1a8.counterContainer_6d3b16d1a8:focus-visible:focus:not(.focus-visible_74c131d040), .counterContainer_6d3b16d1a8.counterContainer_6d3b16d1a8.focus-visible_74c131d040:focus:not(.focus-visible_74c131d040) {\n  outline: none;\n}\n.counterContainer_6d3b16d1a8.counterContainer_6d3b16d1a8.xs_4d4d3d6e55 {\n  height: 20px;\n  min-width: 20px;\n  border-radius: 10px;\n  padding: 0 1px;\n}\n.counterContainer_6d3b16d1a8.counterContainer_6d3b16d1a8.small_a8c0147079 {\n  height: 28px;\n  min-width: 28px;\n  border-radius: 14px;\n  padding: 0 1px;\n}\n.counterContainer_6d3b16d1a8.counterContainer_6d3b16d1a8.medium_a1578c30c9 {\n  height: 32px;\n  min-width: 32px;\n  border-radius: 16px;\n  padding: 0 2px;\n}\n.counterContainer_6d3b16d1a8.counterContainer_6d3b16d1a8.large_cb2b4c455c {\n  height: 50px;\n  min-width: 50px;\n  border-radius: 25px;\n  padding: 0 var(--space-4);\n}\n.counterContainer_6d3b16d1a8.counterContainer_6d3b16d1a8.primary_22bbf84201 {\n  color: var(--text-color-on-primary);\n  background-color: var(--primary-color);\n}\n.counterContainer_6d3b16d1a8.counterContainer_6d3b16d1a8.dark_5612fcc642 {\n  color: var(--text-color-on-inverted);\n  background-color: var(--inverted-color-background);\n}\n.counterContainer_6d3b16d1a8.counterContainer_6d3b16d1a8.negative_4c83093cc0 {\n  color: var(--text-color-on-primary);\n  background-color: var(--negative-color);\n}\n.counterContainer_6d3b16d1a8.counterContainer_6d3b16d1a8.light_f4bd02bc87 {\n  color: var(--primary-text-color);\n  background-color: var(--ui-background-color);\n}\n.counterContainer_6d3b16d1a8.counterContainer_6d3b16d1a8 .disabled_7aa997143c, .counterContainer_6d3b16d1a8.counterContainer_6d3b16d1a8.disabled_7aa997143c {\n  background-color: var(--disabled-background-color);\n  color: var(--disabled-text-color);\n}\n.menu_50e8097522 {\n  max-height: 300px;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n.menu_50e8097522::-webkit-scrollbar {\n  width: 4px;\n  height: 6px;\n}\n.menu_50e8097522::-webkit-scrollbar-thumb {\n  background-color: var(--ui-border-color);\n  border-radius: 4px;\n}");export{n as default};
 //# sourceMappingURL=AvatarGroupCounter.module.scss.js.map

package/dist/src/components/AvatarGroup/AvatarGroupCounterTooltipContainer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AvatarGroupCounterTooltipContainer.js","sources":["../../../../src/components/AvatarGroup/AvatarGroupCounterTooltipContainer.tsx"],"sourcesContent":["import React, { type ReactElement, type RefObject, useCallback, useMemo, useRef, useState } from \"react\";\nimport { Tooltip, type TooltipProps } from \"@vibe/tooltip\";\nimport { type AvatarProps } from \"../Avatar/Avatar\";\nimport AvatarGroupCounterTooltipContent from \"./AvatarGroupCounterTooltipContent\";\nimport { useTooltipContentTabNavigation } from \"./AvatarGroupCounterTooltipHelper\";\nimport type VibeComponentProps from \"../../types/VibeComponentProps\";\nimport { type AvatarType } from \"../Avatar/Avatar.types\";\nimport { AVATAR_GROUP_COUNTER_TOOLTIP_SHOW_DELAY } from \"./AvatarGroupConstants\";\n\nexport interface AvatarGroupCounterTooltipContainerProps extends VibeComponentProps {\n /*\n The type of avatars displayed in the tooltip.\n /\n type?: AvatarType;\n /\n The counter element and focus placeholders.\n /\n children?: ReactElement[];\n /\n The list of avatars displayed inside the tooltip.\n /\n avatars?: ReactElement<AvatarProps>[];\n /\n Props passed to the Tooltip component. See full options in the [Tooltip documentation](https://vibe.monday.com/?path=/docs/components-tooltip--docs).\n /\n counterTooltipCustomProps?: Partial<TooltipProps>;\n /\n If true, the tooltip uses a virtualized list for performance optimization.\n /\n counterTooltipIsVirtualizedList?: boolean;\n /\n Ref for the element before the tooltip content, used for keyboard navigation.\n /\n focusPrevPlaceholderRef?: RefObject<HTMLDivElement>;\n /\n Ref for the element after the tooltip content, used for keyboard navigation.\n /\n focusNextPlaceholderRef?: RefObject<HTMLDivElement>;\n /\n Ref for the counter container element.\n */\n counterContainerRef?: RefObject<HTMLDivElement>;\n}\n\nconst AvatarGroupCounterTooltipContainer: React.FC<AvatarGroupCounterTooltipContainerProps> = ({\n focusPrevPlaceholderRef,\n focusNextPlaceholderRef,\n counterContainerRef,\n children = [],\n avatars = [],\n type,\n className,\n counterTooltipCustomProps,\n counterTooltipIsVirtualizedList = false\n}) => {\n const [isKeyboardTooltipVisible, setIsKeyboardTooltipVisible] = useState(false);\n const tooltipContentContainerRef = useRef(null);\n const tooltipContent = useMemo(\n () =>\n counterTooltipCustomProps?.content \|\| (\n <AvatarGroupCounterTooltipContent\n avatars={avatars}\n type={type}\n className={className}\n isVirtualizedList={counterTooltipIsVirtualizedList}\n tooltipContentContainerRef={tooltipContentContainerRef}\n />\n ),\n [avatars, className, counterTooltipCustomProps?.content, counterTooltipIsVirtualizedList, type]\n );\n\n useTooltipContentTabNavigation({\n counterContainerRef,\n tooltipContentContainerRef,\n focusPrevPlaceholderRef,\n focusNextPlaceholderRef,\n setIsKeyboardTooltipVisible,\n isKeyboardTooltipVisible\n });\n\n // Tooltip props\n const onHide = useCallback(() => {\n setIsKeyboardTooltipVisible(false);\n }, []);\n\n if (!avatars?.length && !counterTooltipCustomProps?.content) {\n return <>{children}</>;\n }\n return (\n <Tooltip\n open={isKeyboardTooltipVisible}\n hideDelay={AVATAR_GROUP_COUNTER_TOOLTIP_SHOW_DELAY}\n showTrigger={[\"mouseenter\"]}\n hideTrigger={[\"mouseleave\"]}\n onTooltipHide={onHide}\n {...(counterTooltipCustomProps \|\| {})}\n content={tooltipContent}\n >\n {children}\n </Tooltip>\n );\n};\n\nexport default AvatarGroupCounterTooltipContainer;\n"],"names":["AvatarGroupCounterTooltipContainer","_ref","focusPrevPlaceholderRef","focusNextPlaceholderRef","counterContainerRef","_ref$children","children","_ref$avatars","avatars","type","className","counterTooltipCustomProps","_ref$counterTooltipIs","counterTooltipIsVirtualizedList","_useState","useState","_useState2","_slicedToArray","isKeyboardTooltipVisible","setIsKeyboardTooltipVisible","tooltipContentContainerRef","useRef","tooltipContent","useMemo","content","React","createElement","AvatarGroupCounterTooltipContent","isVirtualizedList","useTooltipContentTabNavigation","onHide","useCallback","length","Tooltip","open","hideDelay","AVATAR_GROUP_COUNTER_TOOLTIP_SHOW_DELAY","showTrigger","hideTrigger","onTooltipHide","Fragment"],"mappings":"+bA4CA,IAAMA,EAAwF,SAAtDC,GAUnC,IATHC,EAAuBD,EAAvBC,wBACAC,EAAuBF,EAAvBE,wBACAC,EAAmBH,EAAnBG,oBAAmBC,EAAAJ,EACnBK,SAAAA,~~OAAW~~,~~IAAHD~~,EAAG,GAAEA,EAAAE,EAAAN,EACbO,QAAAA,~~OAAU~~,~~IAAHD~~,EAAG,GAAEA,EACZE,EAAIR,EAAJQ,KACAC,EAAST,EAATS,UACAC,EAAyBV,EAAzBU,0BAAyBC,EAAAX,EACzBY,gCAAAA,~~OAAkC~~,~~IAAHD~~,GAAQA,EAEvCE,EAAgEC,GAAS,GAAMC,EAAAC,EAAAH,EAAA,GAAxEI,EAAwBF,EAAA,GAAEG,EAA2BH,EAAA,GACtDI,EAA6BC,EAAO,MACpCC,EAAiBC,GACrB,WAAA,OACEZ,aAAyB,EAAzBA,EAA2Ba,UACzBC,EAAAC,cAACC,EAAgC,CAC/BnB,QAASA,EACTC,KAAMA,EACNC,UAAWA,EACXkB,kBAAmBf,EACnBO,2BAA4BA,~~GAGlC~~,~~GAAA~~,CAACZ,EAASE,EAAWC,~~aAAA~~,~~EAAAA~~,EAA2Ba,QAASX,EAAiCJ,IAG5FoB,EAA+B,CAC7BzB,oBAAAA,EACAgB,2BAAAA,EACAlB,wBAAAA,EACAC,wBAAAA,EACAgB,4BAAAA,EACAD,yBAAAA,IAIF,IAAMY,EAASC,GAAY,WACzBZ,GAA4B,~~EAC7B~~,~~GAAE~~,IAEH,OAAKX,~~aAAA~~,~~EAAAA~~,EAASwB,UAAWrB,aAAyB,EAAzBA,EAA2Ba,SAIlDC,~~EAACC~~,~~cAAAO~~,iBACCC,KAAMhB,EACNiB,UAAWC,EACXC,YAAa,CAAC,cACdC,YAAa,CAAC,cACdC,cAAeT,GACVnB,GAA6B,CAAA,EAAG,CACrCa,QAASF,IAERhB,GAZImB,EAAAC,cAAAD,EAAAe,SAAA,KAAGlC,EAed"}
1	+ {"version":3,"file":"AvatarGroupCounterTooltipContainer.js","sources":["../../../../src/components/AvatarGroup/AvatarGroupCounterTooltipContainer.tsx"],"sourcesContent":["import React, { type ReactElement, type RefObject, useCallback, useMemo, useRef, useState } from \"react\";\nimport { Tooltip, type TooltipProps } from \"@vibe/tooltip\";\nimport { type AvatarProps } from \"../Avatar/Avatar\";\nimport AvatarGroupCounterTooltipContent from \"./AvatarGroupCounterTooltipContent\";\nimport { useTooltipContentTabNavigation } from \"./AvatarGroupCounterTooltipHelper\";\nimport type VibeComponentProps from \"../../types/VibeComponentProps\";\nimport { type AvatarType } from \"../Avatar/Avatar.types\";\nimport { AVATAR_GROUP_COUNTER_TOOLTIP_SHOW_DELAY } from \"./AvatarGroupConstants\";\n\nexport interface AvatarGroupCounterTooltipContainerProps extends VibeComponentProps {\n /*\n The type of avatars displayed in the tooltip.\n /\n type?: AvatarType;\n /\n The counter element and focus placeholders.\n /\n children?: ReactElement[];\n /\n The list of avatars displayed inside the tooltip.\n /\n avatars?: ReactElement<AvatarProps>[];\n /\n Props passed to the Tooltip component. See full options in the [Tooltip documentation](https://vibe.monday.com/?path=/docs/components-tooltip--docs).\n /\n counterTooltipCustomProps?: Partial<TooltipProps>;\n /\n If true, the tooltip uses a virtualized list for performance optimization.\n /\n counterTooltipIsVirtualizedList?: boolean;\n /\n Ref for the element before the tooltip content, used for keyboard navigation.\n /\n focusPrevPlaceholderRef?: RefObject<HTMLDivElement>;\n /\n Ref for the element after the tooltip content, used for keyboard navigation.\n /\n focusNextPlaceholderRef?: RefObject<HTMLDivElement>;\n /\n Ref for the counter container element.\n */\n counterContainerRef?: RefObject<HTMLDivElement>;\n}\n\nconst AvatarGroupCounterTooltipContainer: React.FC<AvatarGroupCounterTooltipContainerProps> = ({\n focusPrevPlaceholderRef,\n focusNextPlaceholderRef,\n counterContainerRef,\n children = [],\n avatars = [],\n type,\n className,\n counterTooltipCustomProps,\n counterTooltipIsVirtualizedList = false\n}) => {\n const [isKeyboardTooltipVisible, setIsKeyboardTooltipVisible] = useState(false);\n const tooltipContentContainerRef = useRef(null);\n const tooltipContent = useMemo(\n () =>\n counterTooltipCustomProps?.content \|\| (\n <AvatarGroupCounterTooltipContent\n avatars={avatars}\n type={type}\n className={className}\n isVirtualizedList={counterTooltipIsVirtualizedList}\n tooltipContentContainerRef={tooltipContentContainerRef}\n />\n ),\n [avatars, className, counterTooltipCustomProps?.content, counterTooltipIsVirtualizedList, type]\n );\n\n useTooltipContentTabNavigation({\n counterContainerRef,\n tooltipContentContainerRef,\n focusPrevPlaceholderRef,\n focusNextPlaceholderRef,\n setIsKeyboardTooltipVisible,\n isKeyboardTooltipVisible\n });\n\n // Tooltip props\n const onHide = useCallback(() => {\n setIsKeyboardTooltipVisible(false);\n }, []);\n\n if (!avatars?.length && !counterTooltipCustomProps?.content) {\n return <>{children}</>;\n }\n return (\n <Tooltip\n open={isKeyboardTooltipVisible}\n hideDelay={AVATAR_GROUP_COUNTER_TOOLTIP_SHOW_DELAY}\n showTrigger={[\"mouseenter\"]}\n hideTrigger={[\"mouseleave\"]}\n onTooltipHide={onHide}\n {...(counterTooltipCustomProps \|\| {})}\n content={tooltipContent}\n >\n {children}\n </Tooltip>\n );\n};\n\nexport default AvatarGroupCounterTooltipContainer;\n"],"names":["AvatarGroupCounterTooltipContainer","_ref","focusPrevPlaceholderRef","focusNextPlaceholderRef","counterContainerRef","_ref$children","children","_ref$avatars","avatars","type","className","counterTooltipCustomProps","_ref$counterTooltipIs","counterTooltipIsVirtualizedList","_useState","useState","_useState2","_slicedToArray","isKeyboardTooltipVisible","setIsKeyboardTooltipVisible","tooltipContentContainerRef","useRef","tooltipContent","useMemo","content","React","createElement","AvatarGroupCounterTooltipContent","isVirtualizedList","useTooltipContentTabNavigation","onHide","useCallback","length","Tooltip","open","hideDelay","AVATAR_GROUP_COUNTER_TOOLTIP_SHOW_DELAY","showTrigger","hideTrigger","onTooltipHide","Fragment"],"mappings":"+bA4CA,IAAMA,EAAwF,SAAtDC,GAUnC,IATHC,EAAuBD,EAAvBC,wBACAC,EAAuBF,EAAvBE,wBACAC,EAAmBH,EAAnBG,oBAAmBC,EAAAJ,EACnBK,SAAAA,OAAQ,IAAAD,EAAG,GAAEA,EAAAE,EAAAN,EACbO,QAAAA,OAAO,IAAAD,EAAG,GAAEA,EACZE,EAAIR,EAAJQ,KACAC,EAAST,EAATS,UACAC,EAAyBV,EAAzBU,0BAAyBC,EAAAX,EACzBY,gCAAAA,OAA+B,IAAAD,GAAQA,EAEvCE,EAAgEC,GAAS,GAAMC,EAAAC,EAAAH,EAAA,GAAxEI,EAAwBF,EAAA,GAAEG,EAA2BH,EAAA,GACtDI,EAA6BC,EAAO,MACpCC,EAAiBC,GACrB,WAAA,OACEZ,aAAyB,EAAzBA,EAA2Ba,UACzBC,EAAAC,cAACC,EAAgC,CAC/BnB,QAASA,EACTC,KAAMA,EACNC,UAAWA,EACXkB,kBAAmBf,EACnBO,2BAA4BA,GAE/B,GACH,CAACZ,EAASE,EAAWC,aAAyB,EAAzBA,EAA2Ba,QAASX,EAAiCJ,IAG5FoB,EAA+B,CAC7BzB,oBAAAA,EACAgB,2BAAAA,EACAlB,wBAAAA,EACAC,wBAAAA,EACAgB,4BAAAA,EACAD,yBAAAA,IAIF,IAAMY,EAASC,GAAY,WACzBZ,GAA4B,EAC9B,GAAG,IAEH,OAAKX,aAAO,EAAPA,EAASwB,UAAWrB,aAAyB,EAAzBA,EAA2Ba,SAIlDC,EAAAC,cAACO,iBACCC,KAAMhB,EACNiB,UAAWC,EACXC,YAAa,CAAC,cACdC,YAAa,CAAC,cACdC,cAAeT,GACVnB,GAA6B,CAAA,EAAG,CACrCa,QAASF,IAERhB,GAZImB,EAAAC,cAAAD,EAAAe,SAAA,KAAGlC,EAed"}

package/dist/src/components/AvatarGroup/AvatarGroupCounterTooltipContent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AvatarGroupCounterTooltipContent.js","sources":["../../../../src/components/AvatarGroup/AvatarGroupCounterTooltipContent.tsx"],"sourcesContent":["import React, { type ReactElement, type Ref, useCallback, useMemo } from \"react\";\nimport cx from \"classnames\";\nimport { Flex, type FlexProps } from \"@vibe/layout\";\nimport { type AvatarProps } from \"../Avatar/Avatar\";\nimport AvatarGroupCounterTooltipContentVirtualizedList from \"./AvatarGroupCounterTooltipContentVirtualizedList\";\nimport { avatarRenderer } from \"./AvatarGroupCounterTooltipHelper\";\nimport type VibeComponentProps from \"../../types/VibeComponentProps\";\nimport { type AvatarType } from \"../Avatar/Avatar.types\";\nimport styles from \"./AvatarGroupCounterTooltipContent.module.scss\";\n\nexport interface AvatarGroupCounterTooltipContentProps extends VibeComponentProps {\n /*\n The type of avatars displayed inside the tooltip.\n /\n type?: AvatarType;\n /\n The avatars shown in the tooltip.\n /\n avatars?: ReactElement<AvatarProps>[];\n /\n If true, the tooltip uses a virtualized list for performance optimization.\n /\n isVirtualizedList?: boolean;\n /\n Ref for the tooltip content container.\n */\n tooltipContentContainerRef?: Ref<HTMLDivElement>;\n}\n\nconst AvatarGroupCounterTooltipContent: React.FC<AvatarGroupCounterTooltipContentProps> = ({\n avatars = [],\n type,\n className,\n isVirtualizedList = false,\n tooltipContentContainerRef\n}) => {\n const getTooltipContent = useCallback((avatarProps: AvatarProps) => {\n return avatarProps?.tooltipProps?.content \|\| avatarProps?.[\"aria-label\"];\n }, []);\n\n const { avatarItems, displayAsGrid, tooltipContainerAriaLabel } = useMemo(() => {\n const avatarItems = avatars.map(avatar => ({\n value: { ...avatar.props, tooltipContent: getTooltipContent(avatar.props) }\n }));\n const displayAsGrid = !avatarItems.some(item => item.value.tooltipContent);\n const tooltipContainerAriaLabel = !displayAsGrid\n ? avatarItems.map(item => item.value.tooltipContent).join(\",\")\n : undefined;\n return { avatarItems, displayAsGrid, tooltipContainerAriaLabel };\n }, [avatars, getTooltipContent]);\n\n const renderedItems = useMemo(\n () => avatarItems.map((item, index) => avatarRenderer(item, index, undefined, type, displayAsGrid)),\n [avatarItems, displayAsGrid, type]\n );\n\n if (isVirtualizedList) {\n return (\n <AvatarGroupCounterTooltipContentVirtualizedList\n avatarRenderer={avatarRenderer}\n tooltipContentContainerRef={tooltipContentContainerRef}\n tooltipContainerAriaLabel={tooltipContainerAriaLabel}\n avatarItems={avatarItems}\n type={type}\n />\n );\n }\n\n const flexProps = {\n ref: tooltipContentContainerRef,\n tabIndex: -1,\n role: \"treegrid\",\n \"aria-label\": tooltipContainerAriaLabel,\n className: displayAsGrid\n ? cx(styles.scrollableContainer, styles.tooltipContainer, styles.tooltipGridContainer, className)\n : cx(styles.scrollableContainer, styles.tooltipContainer, className),\n direction: displayAsGrid ? \"row\" : \"column\",\n gap: displayAsGrid ? \"xs\" : \"small\",\n wrap: displayAsGrid\n };\n\n return <Flex {...(flexProps as FlexProps)}>{renderedItems}</Flex>;\n};\n\nexport default AvatarGroupCounterTooltipContent;\n"],"names":["AvatarGroupCounterTooltipContent","_ref","_ref$avatars","avatars","type","className","_ref$isVirtualizedLis","isVirtualizedList","tooltipContentContainerRef","getTooltipContent","useCallback","avatarProps","tooltipProps","_a","content","_useMemo","useMemo","avatarItems","map","avatar","value","Object","assign","props","tooltipContent","displayAsGrid","some","item","tooltipContainerAriaLabel","undefined","join","renderedItems","index","avatarRenderer","React","createElement","AvatarGroupCounterTooltipContentVirtualizedList","flexProps","ref","tabIndex","role","cx","styles","scrollableContainer","tooltipContainer","tooltipGridContainer","direction","gap","wrap","Flex"],"mappings":"qVA6BA,IAAMA,EAAoF,SAApDC,GAMjC,IAAAC,EAAAD,EALHE,QAAAA,~~OAAU~~,~~IAAHD~~,EAAG,GAAEA,EACZE,EAAIH,EAAJG,KACAC,EAASJ,EAATI,UAASC,EAAAL,EACTM,kBAAAA,~~OAAoB~~,~~IAAHD~~,GAAQA,EACzBE,EAA0BP,EAA1BO,2BAEMC,EAAoBC,GAAY,SAACC,SACrC,OAAgC,UAAzBA,~~aAAA~~,~~EAAAA~~,EAAaC,oBAAY,IAAAC,OAAA,EAAAA,EAAEC,WAAWH,aAAW,EAAXA,EAAc,~~cAC5D~~,~~GAAE~~,IAEHI,EAAkEC,GAAQ,WACxE,IAAMC,EAAcd,EAAQe,KAAI,SAAAC,GAAM,MAAK,CACzCC,~~MAAYC~~,OAAAC,OAAAD,OAAAC,OAAA,~~GAAAH~~,EAAOI,~~OAAO~~,~~CAAAC~~,eAAgBf,EAAkBU,EAAOI,SACpE,IACKE,GAAiBR,EAAYS,MAAK,SAAAC,GAAI,OAAIA,EAAKP,MAAMI,~~kBACrDI~~,EAA6BH,OAE/BI,EADAZ,EAAYC,KAAI,SAAAS,GAAI,OAAIA,EAAKP,MAAMI,cAAc,IAAEM,KAAK,KAE5D,MAAO,CAAEb,YAAAA,EAAaQ,cAAAA,EAAeG,0BAAAA,EACvC,GAAG,CAACzB,EAASM,IATLQ,EAAWF,EAAXE,YAAaQ,EAAaV,EAAbU,cAAeG,EAAyBb,EAAzBa,0BAW9BG,EAAgBf,GACpB,WAAA,OAAMC,EAAYC,KAAI,SAACS,EAAMK,GAAK,OAAKC,EAAeN,EAAMK,OAAOH,EAAWzB,EAAMqB,~~KAAe~~,GACnG,CAACR,EAAaQ,EAAerB,IAG/B,GAAIG,EACF,OACE2B,~~EAACC~~,~~cAAAC~~,~~EACC~~,~~CAAAH~~,eAAgBA,EAChBzB,2BAA4BA,EAC5BoB,0BAA2BA,EAC3BX,YAAaA,EACbb,KAAMA,IAKZ,IAAMiC,EAAY,CAChBC,IAAK9B,EACL+B,~~UAAW~~,~~EACXC~~,KAAM,WACN,aAAcZ,EACdvB,UAAWoB,EACPgB,EAAGC,EAAOC,oBAAqBD,EAAOE,iBAAkBF,EAAOG,qBAAsBxC,GACrFoC,EAAGC,EAAOC,oBAAqBD,EAAOE,iBAAkBvC,GAC5DyC,UAAWrB,EAAgB,MAAQ,SACnCsB,IAAKtB,EAAgB,KAAO,QAC5BuB,KAAMvB,GAGR,OAAOS,gBAACe,EAAI5B,OAAAC,OAAA,~~GAAMe~~,GAA0BN,EAC9C"}
1	+ {"version":3,"file":"AvatarGroupCounterTooltipContent.js","sources":["../../../../src/components/AvatarGroup/AvatarGroupCounterTooltipContent.tsx"],"sourcesContent":["import React, { type ReactElement, type Ref, useCallback, useMemo } from \"react\";\nimport cx from \"classnames\";\nimport { Flex, type FlexProps } from \"@vibe/layout\";\nimport { type AvatarProps } from \"../Avatar/Avatar\";\nimport AvatarGroupCounterTooltipContentVirtualizedList from \"./AvatarGroupCounterTooltipContentVirtualizedList\";\nimport { avatarRenderer } from \"./AvatarGroupCounterTooltipHelper\";\nimport type VibeComponentProps from \"../../types/VibeComponentProps\";\nimport { type AvatarType } from \"../Avatar/Avatar.types\";\nimport styles from \"./AvatarGroupCounterTooltipContent.module.scss\";\n\nexport interface AvatarGroupCounterTooltipContentProps extends VibeComponentProps {\n /*\n The type of avatars displayed inside the tooltip.\n /\n type?: AvatarType;\n /\n The avatars shown in the tooltip.\n /\n avatars?: ReactElement<AvatarProps>[];\n /\n If true, the tooltip uses a virtualized list for performance optimization.\n /\n isVirtualizedList?: boolean;\n /\n Ref for the tooltip content container.\n */\n tooltipContentContainerRef?: Ref<HTMLDivElement>;\n}\n\nconst AvatarGroupCounterTooltipContent: React.FC<AvatarGroupCounterTooltipContentProps> = ({\n avatars = [],\n type,\n className,\n isVirtualizedList = false,\n tooltipContentContainerRef\n}) => {\n const getTooltipContent = useCallback((avatarProps: AvatarProps) => {\n return avatarProps?.tooltipProps?.content \|\| avatarProps?.[\"aria-label\"];\n }, []);\n\n const { avatarItems, displayAsGrid, tooltipContainerAriaLabel } = useMemo(() => {\n const avatarItems = avatars.map(avatar => ({\n value: { ...avatar.props, tooltipContent: getTooltipContent(avatar.props) }\n }));\n const displayAsGrid = !avatarItems.some(item => item.value.tooltipContent);\n const tooltipContainerAriaLabel = !displayAsGrid\n ? avatarItems.map(item => item.value.tooltipContent).join(\",\")\n : undefined;\n return { avatarItems, displayAsGrid, tooltipContainerAriaLabel };\n }, [avatars, getTooltipContent]);\n\n const renderedItems = useMemo(\n () => avatarItems.map((item, index) => avatarRenderer(item, index, undefined, type, displayAsGrid)),\n [avatarItems, displayAsGrid, type]\n );\n\n if (isVirtualizedList) {\n return (\n <AvatarGroupCounterTooltipContentVirtualizedList\n avatarRenderer={avatarRenderer}\n tooltipContentContainerRef={tooltipContentContainerRef}\n tooltipContainerAriaLabel={tooltipContainerAriaLabel}\n avatarItems={avatarItems}\n type={type}\n />\n );\n }\n\n const flexProps = {\n ref: tooltipContentContainerRef,\n tabIndex: -1,\n role: \"treegrid\",\n \"aria-label\": tooltipContainerAriaLabel,\n className: displayAsGrid\n ? cx(styles.scrollableContainer, styles.tooltipContainer, styles.tooltipGridContainer, className)\n : cx(styles.scrollableContainer, styles.tooltipContainer, className),\n direction: displayAsGrid ? \"row\" : \"column\",\n gap: displayAsGrid ? \"xs\" : \"small\",\n wrap: displayAsGrid\n };\n\n return <Flex {...(flexProps as FlexProps)}>{renderedItems}</Flex>;\n};\n\nexport default AvatarGroupCounterTooltipContent;\n"],"names":["AvatarGroupCounterTooltipContent","_ref","_ref$avatars","avatars","type","className","_ref$isVirtualizedLis","isVirtualizedList","tooltipContentContainerRef","getTooltipContent","useCallback","avatarProps","tooltipProps","_a","content","_useMemo","useMemo","avatarItems","map","avatar","value","Object","assign","props","tooltipContent","displayAsGrid","some","item","tooltipContainerAriaLabel","undefined","join","renderedItems","index","avatarRenderer","React","createElement","AvatarGroupCounterTooltipContentVirtualizedList","flexProps","ref","tabIndex","role","cx","styles","scrollableContainer","tooltipContainer","tooltipGridContainer","direction","gap","wrap","Flex"],"mappings":"qVA6BA,IAAMA,EAAoF,SAApDC,GAMjC,IAAAC,EAAAD,EALHE,QAAAA,OAAO,IAAAD,EAAG,GAAEA,EACZE,EAAIH,EAAJG,KACAC,EAASJ,EAATI,UAASC,EAAAL,EACTM,kBAAAA,OAAiB,IAAAD,GAAQA,EACzBE,EAA0BP,EAA1BO,2BAEMC,EAAoBC,GAAY,SAACC,SACrC,OAAgC,UAAzBA,aAAW,EAAXA,EAAaC,oBAAY,IAAAC,OAAA,EAAAA,EAAEC,WAAWH,aAAW,EAAXA,EAAc,cAC7D,GAAG,IAEHI,EAAkEC,GAAQ,WACxE,IAAMC,EAAcd,EAAQe,KAAI,SAAAC,GAAM,MAAK,CACzCC,MAAKC,OAAAC,OAAAD,OAAAC,OAAA,GAAOH,EAAOI,OAAK,CAAEC,eAAgBf,EAAkBU,EAAOI,SACpE,IACKE,GAAiBR,EAAYS,MAAK,SAAAC,GAAI,OAAIA,EAAKP,MAAMI,cAAc,IACnEI,EAA6BH,OAE/BI,EADAZ,EAAYC,KAAI,SAAAS,GAAI,OAAIA,EAAKP,MAAMI,cAAc,IAAEM,KAAK,KAE5D,MAAO,CAAEb,YAAAA,EAAaQ,cAAAA,EAAeG,0BAAAA,EACvC,GAAG,CAACzB,EAASM,IATLQ,EAAWF,EAAXE,YAAaQ,EAAaV,EAAbU,cAAeG,EAAyBb,EAAzBa,0BAW9BG,EAAgBf,GACpB,WAAA,OAAMC,EAAYC,KAAI,SAACS,EAAMK,GAAK,OAAKC,EAAeN,EAAMK,OAAOH,EAAWzB,EAAMqB,EAAc,GAAC,GACnG,CAACR,EAAaQ,EAAerB,IAG/B,GAAIG,EACF,OACE2B,EAAAC,cAACC,EAA+C,CAC9CH,eAAgBA,EAChBzB,2BAA4BA,EAC5BoB,0BAA2BA,EAC3BX,YAAaA,EACbb,KAAMA,IAKZ,IAAMiC,EAAY,CAChBC,IAAK9B,EACL+B,UAAU,EACVC,KAAM,WACN,aAAcZ,EACdvB,UAAWoB,EACPgB,EAAGC,EAAOC,oBAAqBD,EAAOE,iBAAkBF,EAAOG,qBAAsBxC,GACrFoC,EAAGC,EAAOC,oBAAqBD,EAAOE,iBAAkBvC,GAC5DyC,UAAWrB,EAAgB,MAAQ,SACnCsB,IAAKtB,EAAgB,KAAO,QAC5BuB,KAAMvB,GAGR,OAAOS,gBAACe,EAAI5B,OAAAC,OAAA,CAAA,EAAMe,GAA0BN,EAC9C"}

package/dist/src/components/AvatarGroup/AvatarGroupCounterTooltipContent.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={tooltipAvatarItemTitle:"tooltipAvatarItemTitle_ffabbceade",tooltipAvatarItemAvatar:"tooltipAvatarItemAvatar_c058a0798f",tooltipContainer:"tooltipContainer_5a91f9fa2e","focus-visible":"focus-visible_1caa46d70d",tooltipGridContainer:"tooltipGridContainer_4deecb2623",scrollableContainer:"scrollableContainer_680c8bfb19"};!function(e){const t="s_id-886ef7c132b6_4_2_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const a=document.createElement("style");a.id=t,n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}("/* stylelint-disable */\n/* stylelint-enable */\n.tooltipAvatarItemTitle_ffabbceade {\n  white-space: nowrap;\n}\n.tooltipAvatarItemAvatar_c058a0798f {\n  flex-shrink: 0;\n}\n.tooltipContainer_5a91f9fa2e {\n  max-height: 300px;\n  padding-inline-end: var(--space-16);\n  align-items: flex-start !important;\n  overflow-x: visible;\n  overflow-y: auto;\n  margin-top: var(--space-8);\n}\n.tooltipContainer_5a91f9fa2e:focus, .tooltipContainer_5a91f9fa2e:focus-visible, .tooltipContainer_5a91f9fa2e.focus-visible_1caa46d70d { /* stylelint-disable-line selector-class-pattern */\n  outline: none;\n}\n.tooltipGridContainer_4deecb2623 {\n  max-width: 160px;\n  padding-inline-end: 0;\n}\n.scrollableContainer_680c8bfb19::-webkit-scrollbar {\n  width: 4px;\n  height: 6px;\n}\n.scrollableContainer_680c8bfb19::-webkit-scrollbar-thumb {\n  background-color: var(--ui-border-color);\n  border-radius: 4px;\n}");export{e as default};
+var t={tooltipAvatarItemTitle:"tooltipAvatarItemTitle_7e0838b83e",tooltipAvatarItemAvatar:"tooltipAvatarItemAvatar_6f76cbff6e",tooltipContainer:"tooltipContainer_2af462cd09",tooltipGridContainer:"tooltipGridContainer_4b753e8b16",scrollableContainer:"scrollableContainer_13a5fc3c8f"};!function(t){const e="s_id-886ef7c132b6_4_2_2";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+e))return;const o=document.createElement("style");o.id=e,n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.appendChild(document.createTextNode(t))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=t)}("/* stylelint-disable */\n/* stylelint-enable */\n.tooltipAvatarItemTitle_7e0838b83e {\n  white-space: nowrap;\n}\n.tooltipAvatarItemAvatar_6f76cbff6e {\n  flex-shrink: 0;\n}\n.tooltipContainer_2af462cd09 {\n  max-height: 300px;\n  padding-inline-end: var(--space-16);\n  align-items: flex-start !important;\n  overflow-x: visible;\n  overflow-y: auto;\n  margin-top: var(--space-8);\n}\n.tooltipContainer_2af462cd09:focus, .tooltipContainer_2af462cd09:focus-visible, .tooltipContainer_2af462cd09.focus-visible_74c131d040 { /* stylelint-disable-line selector-class-pattern */\n  outline: none;\n}\n.tooltipGridContainer_4b753e8b16 {\n  max-width: 160px;\n  padding-inline-end: 0;\n}\n.scrollableContainer_13a5fc3c8f::-webkit-scrollbar {\n  width: 4px;\n  height: 6px;\n}\n.scrollableContainer_13a5fc3c8f::-webkit-scrollbar-thumb {\n  background-color: var(--ui-border-color);\n  border-radius: 4px;\n}");export{t as default};
 //# sourceMappingURL=AvatarGroupCounterTooltipContent.module.scss.js.map

package/dist/src/components/AvatarGroup/AvatarGroupCounterTooltipContentVirtualizedList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AvatarGroupCounterTooltipContentVirtualizedList.js","sources":["../../../../src/components/AvatarGroup/AvatarGroupCounterTooltipContentVirtualizedList.tsx"],"sourcesContent":["import React, { type CSSProperties, type ReactElement, type Ref, useMemo } from \"react\";\nimport { VirtualizedList, type VirtualizedListItem } from \"../VirtualizedList\";\nimport type VibeComponentProps from \"../../types/VibeComponentProps\";\nimport { type AvatarType } from \"../Avatar/Avatar.types\";\nimport { type AvatarProps } from \"../Avatar/Avatar\";\nimport { type ElementContent } from \"../../types\";\nimport styles from \"./AvatarGroupCounterTooltipContentVirtualizedList.module.scss\";\n\nconst LIST_OPTIONS = Object.freeze({\n maxItemsWithoutScroll: 10,\n itemLineHeight: 34,\n itemLineWidth: 150\n});\n\nexport type AvatarItem = {\n value: AvatarProps & { tooltipContent: ElementContent };\n};\n\nexport interface AvatarGroupCounterTooltipContentVirtualizedListProps extends VibeComponentProps {\n /*\n The list of avatars displayed in the virtualized tooltip.\n /\n avatarItems?: AvatarItem[];\n /\n Function to render each avatar item.\n /\n avatarRenderer?: (\n item: AvatarItem,\n index: number,\n style: CSSProperties,\n type: AvatarType,\n displayAsGrid: boolean\n ) => ReactElement;\n /\n The ARIA label of the tooltip container.\n /\n tooltipContainerAriaLabel?: string;\n /\n Ref for the tooltip content container.\n /\n tooltipContentContainerRef?: Ref<HTMLDivElement>;\n /\n The type of avatars in the tooltip.\n /\n type?: AvatarType;\n}\n\nconst AvatarGroupCounterTooltipContentVirtualizedList: React.FC<\n AvatarGroupCounterTooltipContentVirtualizedListProps\n> = ({ avatarItems = [], avatarRenderer, type, tooltipContainerAriaLabel, tooltipContentContainerRef }) => {\n const virtualizedItems: VirtualizedListItem[] = useMemo(\n () => avatarItems.map(item => ({ value: item, height: LIST_OPTIONS.itemLineHeight } as VirtualizedListItem)),\n [avatarItems]\n );\n\n const minCount = Math.min(avatarItems.length, LIST_OPTIONS.maxItemsWithoutScroll);\n const virtualizedListStyle = {\n height: LIST_OPTIONS.itemLineHeight minCount,\n minWidth: LIST_OPTIONS.itemLineWidth\n };\n\n return (\n <div\n className={styles.virtualizedTooltipContainer}\n aria-label={tooltipContainerAriaLabel}\n ref={tooltipContentContainerRef}\n tabIndex={-1}\n >\n <VirtualizedList\n items={virtualizedItems}\n itemRenderer={(item: VirtualizedListItem, index: number, style: CSSProperties) =>\n avatarRenderer(item.value as AvatarItem, index, style, type, false)\n }\n role=\"treegrid\"\n scrollableClassName={styles.scrollableContainer}\n getItemId={(item: VirtualizedListItem, index: number) => String(index)}\n style={virtualizedListStyle}\n />\n </div>\n );\n};\n\nexport default AvatarGroupCounterTooltipContentVirtualizedList;\n"],"names":["LIST_OPTIONS","Object","freeze","maxItemsWithoutScroll","itemLineHeight","itemLineWidth","AvatarGroupCounterTooltipContentVirtualizedList","_ref","_ref$avatarItems","avatarItems","avatarRenderer","type","tooltipContainerAriaLabel","tooltipContentContainerRef","virtualizedItems","useMemo","map","item","value","height","React","createElement","className","styles","virtualizedTooltipContainer","ref","tabIndex","VirtualizedList","items","itemRenderer","index","style","role","scrollableClassName","scrollableContainer","getItemId","String","Math","min","length","minWidth"],"mappings":"wKAQA,IAAMA,EAAeC,OAAOC,OAAO,CACjCC,sBAAuB,GACvBC,eAAgB,GAChBC,cAAe,MAoCXC,EAEF,SAFiDC,GAEqD,IAAAC,EAAAD,EAAnGE,YAAAA,~~OAAc~~,~~IAAHD~~,EAAG,GAAEA,EAAEE,EAAcH,EAAdG,eAAgBC,EAAIJ,EAAJI,KAAMC,EAAyBL,EAAzBK,0BAA2BC,EAA0BN,EAA1BM,2BAClEC,EAA0CC,GAC9C,WAAA,OAAMN,EAAYO,KAAI,SAAAC,GAAI,MAAK,CAAEC,MAAOD,EAAME,OAAQnB,EAAaI,eAAwC,~~MAC3G~~,CAACK,IASH,OACEW,~~EACEC~~,cAAA,MAAA,~~CAAAC~~,UAAWC,EAAOC,4BAA2B,aACjCZ,EACZa,IAAKZ,EACLa,~~UAAW~~,~~GAEXN~~,EAAAC,cAACM,EAAe,CACdC,MAAOd,EACPe,aAAc,SAACZ,EAA2Ba,EAAeC,GAAoB,OAC3ErB,EAAeO,EAAKC,MAAqBY,EAAOC,EAAOpB,GAAM,EAAM,EAErEqB,KAAK,WACLC,oBAAqBV,EAAOW,oBAC5BC,UAAW,SAAClB,EAA2Ba,GAAa,OAAYA,EAAPM,EAAa,EACtEL,MApBuB,CAC3BZ,OAAQnB,EAAaI,eAFNiC,KAAKC,IAAI7B,EAAY8B,OAAQvC,EAAaG,uBAGzDqC,SAAUxC,EAAaK,iBAsB3B"}
1	+ {"version":3,"file":"AvatarGroupCounterTooltipContentVirtualizedList.js","sources":["../../../../src/components/AvatarGroup/AvatarGroupCounterTooltipContentVirtualizedList.tsx"],"sourcesContent":["import React, { type CSSProperties, type ReactElement, type Ref, useMemo } from \"react\";\nimport { VirtualizedList, type VirtualizedListItem } from \"../VirtualizedList\";\nimport type VibeComponentProps from \"../../types/VibeComponentProps\";\nimport { type AvatarType } from \"../Avatar/Avatar.types\";\nimport { type AvatarProps } from \"../Avatar/Avatar\";\nimport { type ElementContent } from \"../../types\";\nimport styles from \"./AvatarGroupCounterTooltipContentVirtualizedList.module.scss\";\n\nconst LIST_OPTIONS = Object.freeze({\n maxItemsWithoutScroll: 10,\n itemLineHeight: 34,\n itemLineWidth: 150\n});\n\nexport type AvatarItem = {\n value: AvatarProps & { tooltipContent: ElementContent };\n};\n\nexport interface AvatarGroupCounterTooltipContentVirtualizedListProps extends VibeComponentProps {\n /*\n The list of avatars displayed in the virtualized tooltip.\n /\n avatarItems?: AvatarItem[];\n /\n Function to render each avatar item.\n /\n avatarRenderer?: (\n item: AvatarItem,\n index: number,\n style: CSSProperties,\n type: AvatarType,\n displayAsGrid: boolean\n ) => ReactElement;\n /\n The ARIA label of the tooltip container.\n /\n tooltipContainerAriaLabel?: string;\n /\n Ref for the tooltip content container.\n /\n tooltipContentContainerRef?: Ref<HTMLDivElement>;\n /\n The type of avatars in the tooltip.\n /\n type?: AvatarType;\n}\n\nconst AvatarGroupCounterTooltipContentVirtualizedList: React.FC<\n AvatarGroupCounterTooltipContentVirtualizedListProps\n> = ({ avatarItems = [], avatarRenderer, type, tooltipContainerAriaLabel, tooltipContentContainerRef }) => {\n const virtualizedItems: VirtualizedListItem[] = useMemo(\n () => avatarItems.map(item => ({ value: item, height: LIST_OPTIONS.itemLineHeight } as VirtualizedListItem)),\n [avatarItems]\n );\n\n const minCount = Math.min(avatarItems.length, LIST_OPTIONS.maxItemsWithoutScroll);\n const virtualizedListStyle = {\n height: LIST_OPTIONS.itemLineHeight minCount,\n minWidth: LIST_OPTIONS.itemLineWidth\n };\n\n return (\n <div\n className={styles.virtualizedTooltipContainer}\n aria-label={tooltipContainerAriaLabel}\n ref={tooltipContentContainerRef}\n tabIndex={-1}\n >\n <VirtualizedList\n items={virtualizedItems}\n itemRenderer={(item: VirtualizedListItem, index: number, style: CSSProperties) =>\n avatarRenderer(item.value as AvatarItem, index, style, type, false)\n }\n role=\"treegrid\"\n scrollableClassName={styles.scrollableContainer}\n getItemId={(item: VirtualizedListItem, index: number) => String(index)}\n style={virtualizedListStyle}\n />\n </div>\n );\n};\n\nexport default AvatarGroupCounterTooltipContentVirtualizedList;\n"],"names":["LIST_OPTIONS","Object","freeze","maxItemsWithoutScroll","itemLineHeight","itemLineWidth","AvatarGroupCounterTooltipContentVirtualizedList","_ref","_ref$avatarItems","avatarItems","avatarRenderer","type","tooltipContainerAriaLabel","tooltipContentContainerRef","virtualizedItems","useMemo","map","item","value","height","React","createElement","className","styles","virtualizedTooltipContainer","ref","tabIndex","VirtualizedList","items","itemRenderer","index","style","role","scrollableClassName","scrollableContainer","getItemId","String","Math","min","length","minWidth"],"mappings":"wKAQA,IAAMA,EAAeC,OAAOC,OAAO,CACjCC,sBAAuB,GACvBC,eAAgB,GAChBC,cAAe,MAoCXC,EAEF,SAFiDC,GAEqD,IAAAC,EAAAD,EAAnGE,YAAAA,OAAW,IAAAD,EAAG,GAAEA,EAAEE,EAAcH,EAAdG,eAAgBC,EAAIJ,EAAJI,KAAMC,EAAyBL,EAAzBK,0BAA2BC,EAA0BN,EAA1BM,2BAClEC,EAA0CC,GAC9C,WAAA,OAAMN,EAAYO,KAAI,SAAAC,GAAI,MAAK,CAAEC,MAAOD,EAAME,OAAQnB,EAAaI,eAAwC,GAAC,GAC5G,CAACK,IASH,OACEW,EAAAC,cAAA,MAAA,CACEC,UAAWC,EAAOC,4BAA2B,aACjCZ,EACZa,IAAKZ,EACLa,UAAU,GAEVN,EAAAC,cAACM,EAAe,CACdC,MAAOd,EACPe,aAAc,SAACZ,EAA2Ba,EAAeC,GAAoB,OAC3ErB,EAAeO,EAAKC,MAAqBY,EAAOC,EAAOpB,GAAM,EAAM,EAErEqB,KAAK,WACLC,oBAAqBV,EAAOW,oBAC5BC,UAAW,SAAClB,EAA2Ba,GAAa,OAAYA,EAAPM,EAAa,EACtEL,MApBuB,CAC3BZ,OAAQnB,EAAaI,eAFNiC,KAAKC,IAAI7B,EAAY8B,OAAQvC,EAAaG,uBAGzDqC,SAAUxC,EAAaK,iBAsB3B"}

package/dist/src/components/AvatarGroup/AvatarGroupCounterTooltipContentVirtualizedList.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={scrollableContainer:"scrollableContainer_6cf56fbea1",virtualizedTooltipContainer:"virtualizedTooltipContainer_b25b3772d3","focus-visible":"focus-visible_1caa46d70d"};!function(e){const i="s_id-21f61936150a_4_2_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+i))return;const l=document.createElement("style");l.id=i,n.firstChild?n.insertBefore(l,n.firstChild):n.appendChild(l),l.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[i]=e)}("/* stylelint-disable */\n/* stylelint-enable */\n.scrollableContainer_6cf56fbea1::-webkit-scrollbar {\n  width: 4px;\n  height: 6px;\n}\n.scrollableContainer_6cf56fbea1::-webkit-scrollbar-thumb {\n  background-color: var(--ui-border-color);\n  border-radius: 4px;\n}\n.virtualizedTooltipContainer_b25b3772d3 {\n  align-items: flex-start !important;\n  display: flex;\n  overflow-y: hidden;\n  overflow-x: visible;\n}\n.virtualizedTooltipContainer_b25b3772d3:focus, .virtualizedTooltipContainer_b25b3772d3:focus-visible, .virtualizedTooltipContainer_b25b3772d3.focus-visible_1caa46d70d { /* stylelint-disable-line selector-class-pattern */\n  outline: none;\n}");export{e as default};
+var e={scrollableContainer:"scrollableContainer_321f2cf89b",virtualizedTooltipContainer:"virtualizedTooltipContainer_5ccccd1998"};!function(e){const n="s_id-21f61936150a_4_2_2";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const i=document.createElement("style");i.id=n,t.firstChild?t.insertBefore(i,t.firstChild):t.appendChild(i),i.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}("/* stylelint-disable */\n/* stylelint-enable */\n.scrollableContainer_321f2cf89b::-webkit-scrollbar {\n  width: 4px;\n  height: 6px;\n}\n.scrollableContainer_321f2cf89b::-webkit-scrollbar-thumb {\n  background-color: var(--ui-border-color);\n  border-radius: 4px;\n}\n.virtualizedTooltipContainer_5ccccd1998 {\n  align-items: flex-start !important;\n  display: flex;\n  overflow-y: hidden;\n  overflow-x: visible;\n}\n.virtualizedTooltipContainer_5ccccd1998:focus, .virtualizedTooltipContainer_5ccccd1998:focus-visible, .virtualizedTooltipContainer_5ccccd1998.focus-visible_74c131d040 { /* stylelint-disable-line selector-class-pattern */\n  outline: none;\n}");export{e as default};
 //# sourceMappingURL=AvatarGroupCounterTooltipContentVirtualizedList.module.scss.js.map

package/dist/src/components/AvatarGroup/AvatarGroupCounterTooltipHelper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AvatarGroupCounterTooltipHelper.js","sources":["../../../../src/components/AvatarGroup/AvatarGroupCounterTooltipHelper.tsx"],"sourcesContent":["import React, { type CSSProperties, type RefObject, useCallback } from \"react\";\nimport useKeyEvent from \"../../hooks/useKeyEvent\";\nimport { Flex } from \"@vibe/layout\";\nimport Avatar, { type AvatarProps } from \"../Avatar/Avatar\";\nimport { ClickableWrapper } from \"@vibe/clickable\";\nimport avatarGroupCounterTooltipContentStyles from \"./AvatarGroupCounterTooltipContent.module.scss\";\nimport useEventListener from \"../../hooks/useEventListener\";\nimport useListenFocusTriggers from \"../../hooks/useListenFocusTriggers\";\nimport { type AvatarType } from \"../Avatar\";\nimport { type ElementContent } from \"../../types\";\nimport { AVATAR_GROUP_COUNTER_AVATAR_SIZE, AVATAR_GROUP_COUNTER_TOOLTIP_SHOW_DELAY } from \"./AvatarGroupConstants\";\nimport { keyCodes } from \"../../constants\";\n\nconst TAB = [keyCodes.TAB];\nconst ESC = [keyCodes.ESCAPE];\n\nexport function useTooltipContentTabNavigation({\n counterContainerRef = undefined,\n tooltipContentContainerRef,\n focusPrevPlaceholderRef,\n focusNextPlaceholderRef,\n isKeyboardTooltipVisible,\n setIsKeyboardTooltipVisible\n}: {\n counterContainerRef: RefObject<HTMLDivElement>;\n tooltipContentContainerRef: RefObject<HTMLElement>;\n focusPrevPlaceholderRef: RefObject<HTMLDivElement>;\n focusNextPlaceholderRef: RefObject<HTMLDivElement>;\n isKeyboardTooltipVisible: boolean;\n setIsKeyboardTooltipVisible: (value: boolean) => void;\n}) {\n const showKeyboardTooltip = useCallback(() => {\n if (!isKeyboardTooltipVisible) {\n // temp hack for display tooltip with delay after timeout because refactoring the tooltip with open mechanism is out of scope\n setTimeout(() => setIsKeyboardTooltipVisible(true), AVATAR_GROUP_COUNTER_TOOLTIP_SHOW_DELAY);\n }\n }, [isKeyboardTooltipVisible, setIsKeyboardTooltipVisible]);\n\n const hideKeyboardTooltip = useCallback(() => {\n if (isKeyboardTooltipVisible) setIsKeyboardTooltipVisible(false);\n }, [isKeyboardTooltipVisible, setIsKeyboardTooltipVisible]);\n\n // Open tooltip manually when keyboard focusing on counter\n useListenFocusTriggers({\n ref: counterContainerRef,\n onFocusByKeyboard: showKeyboardTooltip\n });\n\n useEventListener({\n eventName: \"blur\",\n ref: tooltipContentContainerRef,\n callback: hideKeyboardTooltip\n });\n\n //Move focus to content by keyboard\n useKeyEvent({\n keys: TAB,\n ref: counterContainerRef,\n withoutAnyModifier: true,\n preventDefault: true,\n callback: useCallback(() => {\n if (isKeyboardTooltipVisible) tooltipContentContainerRef?.current && tooltipContentContainerRef.current.focus();\n }, [isKeyboardTooltipVisible, tooltipContentContainerRef])\n });\n\n // Close tooltip by keyboard\n useKeyEvent({\n keys: TAB,\n modifier: useKeyEvent.modifiers.SHIFT,\n ref: counterContainerRef,\n callback: hideKeyboardTooltip\n });\n useKeyEvent({\n keys: TAB,\n ref: tooltipContentContainerRef,\n withoutAnyModifier: true,\n callback: useCallback(() => {\n // We are not preventing default behaviour here and that's why after pressing tab and after moving focus to here\n // the browser will move the focus to the next element in the focus order.\n focusNextPlaceholderRef?.current && focusNextPlaceholderRef.current.focus();\n if (isKeyboardTooltipVisible) setIsKeyboardTooltipVisible(false);\n }, [focusNextPlaceholderRef, isKeyboardTooltipVisible, setIsKeyboardTooltipVisible])\n });\n useKeyEvent({\n keys: TAB,\n ref: tooltipContentContainerRef,\n modifier: useKeyEvent.modifiers.SHIFT,\n callback: useCallback(() => {\n // We are not preventing default behaviour here and that's why after pressing tab and after moving focus to here\n // the browser will move the focus to the next element in the focus order.\n focusPrevPlaceholderRef?.current && focusPrevPlaceholderRef.current.focus();\n if (isKeyboardTooltipVisible) setIsKeyboardTooltipVisible(false);\n }, [focusPrevPlaceholderRef, isKeyboardTooltipVisible, setIsKeyboardTooltipVisible])\n });\n useKeyEvent({\n keys: ESC,\n ref: tooltipContentContainerRef,\n callback: useCallback(() => {\n counterContainerRef?.current && counterContainerRef.current.focus();\n if (isKeyboardTooltipVisible) setIsKeyboardTooltipVisible(false);\n }, [counterContainerRef, isKeyboardTooltipVisible, setIsKeyboardTooltipVisible])\n });\n useKeyEvent({\n keys: ESC,\n ref: counterContainerRef,\n callback: hideKeyboardTooltip\n });\n\n // Close tooltip when moving focus to next element\n useEventListener({\n eventName: \"focus\",\n ref: focusNextPlaceholderRef,\n callback: hideKeyboardTooltip\n });\n}\n\nexport const avatarRenderer = (\n item: { value: AvatarProps & { tooltipContent: ElementContent } },\n index: number,\n style: CSSProperties,\n type: AvatarType,\n displayAsGrid: boolean\n) => {\n const avatarProps = item.value;\n const overrideStyle: CSSProperties = { ...style, width: displayAsGrid ? undefined : \"100%\" };\n const labelId = `tooltip-item-${index}-label`;\n\n return (\n <ClickableWrapper\n key={index}\n isClickable={!!avatarProps?.onClick}\n clickableProps={{ onClick: event => avatarProps.onClick(event, avatarProps.id), tabIndex: -1 }}\n >\n <div style={overrideStyle}>\n <Flex direction=\"row\" gap=\"xs\" aria-labelledby={labelId}>\n <Avatar\n {...avatarProps}\n tooltipProps={undefined}\n aria-label={\"\"}\n customSize={AVATAR_GROUP_COUNTER_AVATAR_SIZE}\n type={type \|\| avatarProps?.type}\n tabIndex={-1}\n size=\"small\"\n className={avatarGroupCounterTooltipContentStyles.tooltipAvatarItemAvatar}\n />\n {!displayAsGrid && (\n <div id={labelId} className={avatarGroupCounterTooltipContentStyles.tooltipAvatarItemTitle}>\n {avatarProps.tooltipContent}\n </div>\n )}\n </Flex>\n </div>\n </ClickableWrapper>\n );\n};\n"],"names":["TAB","keyCodes","ESC","ESCAPE","useTooltipContentTabNavigation","_ref","_ref$counterContainer","counterContainerRef","undefined","tooltipContentContainerRef","focusPrevPlaceholderRef","focusNextPlaceholderRef","isKeyboardTooltipVisible","setIsKeyboardTooltipVisible","showKeyboardTooltip","useCallback","setTimeout","AVATAR_GROUP_COUNTER_TOOLTIP_SHOW_DELAY","hideKeyboardTooltip","useListenFocusTriggers","ref","onFocusByKeyboard","useEventListener","eventName","callback","useKeyEvent","keys","withoutAnyModifier","preventDefault","current","focus","modifier","modifiers","SHIFT","avatarRenderer","item","index","style","type","displayAsGrid","avatarProps","value","overrideStyle","Object","assign","width","labelId","concat","React","ClickableWrapper","key","isClickable","onClick","clickableProps","event","id","tabIndex","createElement","Flex","direction","gap","Avatar","tooltipProps","customSize","AVATAR_GROUP_COUNTER_AVATAR_SIZE","size","className","avatarGroupCounterTooltipContentStyles","tooltipAvatarItemAvatar","tooltipAvatarItemTitle","tooltipContent"],"mappings":"8rBAaA,IAAMA,EAAM,CAACC,EAASD,KAChBE,EAAM,CAACD,EAASE,iBAENC,EAA8BC,GAc7C,IAAAC,EAAAD,EAbCE,oBAAAA,~~OAAsBC~~,~~IAAHF~~,OAAGE,EAASF,EAC/BG,EAA0BJ,EAA1BI,2BACAC,EAAuBL,EAAvBK,wBACAC,EAAuBN,EAAvBM,wBACAC,EAAwBP,EAAxBO,yBACAC,EAA2BR,EAA3BQ,4BASMC,EAAsBC,GAAY,WACjCH,GAEHI,YAAW,WAAA,OAAMH,GAA4B,EAAK,GAAEI,EAExD,GAAG,CAACL,EAA0BC,IAExBK,EAAsBH,GAAY,WAClCH,GAA0BC,GAA4B,EAC5D,GAAG,CAACD,EAA0BC,IAG9BM,EAAuB,CACrBC,IAAKb,EACLc,kBAAmBP,IAGrBQ,EAAiB,CACfC,UAAW,OACXH,IAAKX,EACLe,SAAUN,IAIZO,EAAY,CACVC,KAAM1B,EACNoB,IAAKb,EACLoB,oBAAoB,EACpBC,gBAAgB,EAChBJ,SAAUT,GAAY,WAChBH,IAA0BH,aAA0B,EAA1BA,EAA4BoB,UAAWpB,EAA2BoB,QAAQC,OAC1G,GAAG,CAAClB,EAA0BH,MAIhCgB,EAAY,CACVC,KAAM1B,EACN+B,SAAUN,EAAYO,UAAUC,MAChCb,IAAKb,EACLiB,SAAUN,IAEZO,EAAY,CACVC,KAAM1B,EACNoB,IAAKX,EACLkB,oBAAoB,EACpBH,SAAUT,GAAY,YAGpBJ,aAAuB,EAAvBA,EAAyBkB,UAAWlB,EAAwBkB,QAAQC,QAChElB,GAA0BC,GAA4B,~~EAC3D~~,~~GAAE~~,CAACF,EAAyBC,EAA0BC,MAEzDY,EAAY,CACVC,KAAM1B,EACNoB,IAAKX,EACLsB,SAAUN,EAAYO,UAAUC,MAChCT,SAAUT,GAAY,YAGpBL,aAAuB,EAAvBA,EAAyBmB,UAAWnB,EAAwBmB,QAAQC,QAChElB,GAA0BC,GAA4B,~~EAC3D~~,~~GAAE~~,CAACH,EAAyBE,EAA0BC,MAEzDY,EAAY,CACVC,KAAMxB,EACNkB,IAAKX,EACLe,SAAUT,GAAY,YACpBR,aAAmB,EAAnBA,EAAqBsB,UAAWtB,EAAoBsB,QAAQC,QACxDlB,GAA0BC,GAA4B,~~EAC3D~~,~~GAAE~~,CAACN,EAAqBK,EAA0BC,MAErDY,EAAY,CACVC,KAAMxB,EACNkB,IAAKb,EACLiB,SAAUN,IAIZI,EAAiB,CACfC,UAAW,QACXH,IAAKT,EACLa,SAAUN,GAEd,~~CAEagB~~,~~IAAAA~~,EAAiB,SAC5BC,EACAC,EACAC,EACAC,EACAC,GAEA,IAAMC,EAAcL,EAAKM,MACnBC,~~EAAoCC~~,OAAAC,OAAAD,OAAAC,OAAA,CAAA,~~EAAAP~~,~~GAAO~~,~~CAAAQ~~,MAAON,OAAgB/B,EAAY,SAC9EsC,EAAO,gBAAAC,OAAmBX,~~EAAa~~,~~UAE7C~~,OACEY,gBAACC,EAAgB,CACfC,IAAKd,EACLe,eAAeX,eAAAA,EAAaY,SAC5BC,eAAgB,CAAED,QAAS,SAAAE,GAAK,OAAId,EAAYY,QAAQE,EAAOd,EAAYe,GAAG,EAAEC,~~UAAW~~,~~IAE3FR~~,~~EAAKS~~,cAAA,MAAA,~~CAAApB~~,MAAOK,GACVM,~~EAACS~~,~~cAAAC~~,~~EAAK~~,~~CAAAC~~,UAAU,MAAMC,IAAI,KAAI,kBAAkBd,GAC9CE,EAAAS,cAACI,~~EACKlB~~,OAAAC,OAAA,CAAA,~~EAAAJ~~,GACJsB,kBAActD,~~EACF~~,~~aAAA~~,GACZuD,WAAYC,EACZ1B,KAAMA,IAAQE,aAAW,EAAXA,EAAaF,MAC3BkB,~~UAAW~~,~~EACXS~~,KAAK,QACLC,UAAWC,EAAuCC,4BAElD7B,GACAS,EAAAS,cAAA,MAAA,CAAKF,GAAIT,EAASoB,UAAWC,EAAuCE,wBACjE7B,EAAY8B,kBAO3B"}
1	+ {"version":3,"file":"AvatarGroupCounterTooltipHelper.js","sources":["../../../../src/components/AvatarGroup/AvatarGroupCounterTooltipHelper.tsx"],"sourcesContent":["import React, { type CSSProperties, type RefObject, useCallback } from \"react\";\nimport useKeyEvent from \"../../hooks/useKeyEvent\";\nimport { Flex } from \"@vibe/layout\";\nimport Avatar, { type AvatarProps } from \"../Avatar/Avatar\";\nimport { ClickableWrapper } from \"@vibe/clickable\";\nimport avatarGroupCounterTooltipContentStyles from \"./AvatarGroupCounterTooltipContent.module.scss\";\nimport useEventListener from \"../../hooks/useEventListener\";\nimport useListenFocusTriggers from \"../../hooks/useListenFocusTriggers\";\nimport { type AvatarType } from \"../Avatar\";\nimport { type ElementContent } from \"../../types\";\nimport { AVATAR_GROUP_COUNTER_AVATAR_SIZE, AVATAR_GROUP_COUNTER_TOOLTIP_SHOW_DELAY } from \"./AvatarGroupConstants\";\nimport { keyCodes } from \"../../constants\";\n\nconst TAB = [keyCodes.TAB];\nconst ESC = [keyCodes.ESCAPE];\n\nexport function useTooltipContentTabNavigation({\n counterContainerRef = undefined,\n tooltipContentContainerRef,\n focusPrevPlaceholderRef,\n focusNextPlaceholderRef,\n isKeyboardTooltipVisible,\n setIsKeyboardTooltipVisible\n}: {\n counterContainerRef: RefObject<HTMLDivElement>;\n tooltipContentContainerRef: RefObject<HTMLElement>;\n focusPrevPlaceholderRef: RefObject<HTMLDivElement>;\n focusNextPlaceholderRef: RefObject<HTMLDivElement>;\n isKeyboardTooltipVisible: boolean;\n setIsKeyboardTooltipVisible: (value: boolean) => void;\n}) {\n const showKeyboardTooltip = useCallback(() => {\n if (!isKeyboardTooltipVisible) {\n // temp hack for display tooltip with delay after timeout because refactoring the tooltip with open mechanism is out of scope\n setTimeout(() => setIsKeyboardTooltipVisible(true), AVATAR_GROUP_COUNTER_TOOLTIP_SHOW_DELAY);\n }\n }, [isKeyboardTooltipVisible, setIsKeyboardTooltipVisible]);\n\n const hideKeyboardTooltip = useCallback(() => {\n if (isKeyboardTooltipVisible) setIsKeyboardTooltipVisible(false);\n }, [isKeyboardTooltipVisible, setIsKeyboardTooltipVisible]);\n\n // Open tooltip manually when keyboard focusing on counter\n useListenFocusTriggers({\n ref: counterContainerRef,\n onFocusByKeyboard: showKeyboardTooltip\n });\n\n useEventListener({\n eventName: \"blur\",\n ref: tooltipContentContainerRef,\n callback: hideKeyboardTooltip\n });\n\n //Move focus to content by keyboard\n useKeyEvent({\n keys: TAB,\n ref: counterContainerRef,\n withoutAnyModifier: true,\n preventDefault: true,\n callback: useCallback(() => {\n if (isKeyboardTooltipVisible) tooltipContentContainerRef?.current && tooltipContentContainerRef.current.focus();\n }, [isKeyboardTooltipVisible, tooltipContentContainerRef])\n });\n\n // Close tooltip by keyboard\n useKeyEvent({\n keys: TAB,\n modifier: useKeyEvent.modifiers.SHIFT,\n ref: counterContainerRef,\n callback: hideKeyboardTooltip\n });\n useKeyEvent({\n keys: TAB,\n ref: tooltipContentContainerRef,\n withoutAnyModifier: true,\n callback: useCallback(() => {\n // We are not preventing default behaviour here and that's why after pressing tab and after moving focus to here\n // the browser will move the focus to the next element in the focus order.\n focusNextPlaceholderRef?.current && focusNextPlaceholderRef.current.focus();\n if (isKeyboardTooltipVisible) setIsKeyboardTooltipVisible(false);\n }, [focusNextPlaceholderRef, isKeyboardTooltipVisible, setIsKeyboardTooltipVisible])\n });\n useKeyEvent({\n keys: TAB,\n ref: tooltipContentContainerRef,\n modifier: useKeyEvent.modifiers.SHIFT,\n callback: useCallback(() => {\n // We are not preventing default behaviour here and that's why after pressing tab and after moving focus to here\n // the browser will move the focus to the next element in the focus order.\n focusPrevPlaceholderRef?.current && focusPrevPlaceholderRef.current.focus();\n if (isKeyboardTooltipVisible) setIsKeyboardTooltipVisible(false);\n }, [focusPrevPlaceholderRef, isKeyboardTooltipVisible, setIsKeyboardTooltipVisible])\n });\n useKeyEvent({\n keys: ESC,\n ref: tooltipContentContainerRef,\n callback: useCallback(() => {\n counterContainerRef?.current && counterContainerRef.current.focus();\n if (isKeyboardTooltipVisible) setIsKeyboardTooltipVisible(false);\n }, [counterContainerRef, isKeyboardTooltipVisible, setIsKeyboardTooltipVisible])\n });\n useKeyEvent({\n keys: ESC,\n ref: counterContainerRef,\n callback: hideKeyboardTooltip\n });\n\n // Close tooltip when moving focus to next element\n useEventListener({\n eventName: \"focus\",\n ref: focusNextPlaceholderRef,\n callback: hideKeyboardTooltip\n });\n}\n\nexport const avatarRenderer = (\n item: { value: AvatarProps & { tooltipContent: ElementContent } },\n index: number,\n style: CSSProperties,\n type: AvatarType,\n displayAsGrid: boolean\n) => {\n const avatarProps = item.value;\n const overrideStyle: CSSProperties = { ...style, width: displayAsGrid ? undefined : \"100%\" };\n const labelId = `tooltip-item-${index}-label`;\n\n return (\n <ClickableWrapper\n key={index}\n isClickable={!!avatarProps?.onClick}\n clickableProps={{ onClick: event => avatarProps.onClick(event, avatarProps.id), tabIndex: -1 }}\n >\n <div style={overrideStyle}>\n <Flex direction=\"row\" gap=\"xs\" aria-labelledby={labelId}>\n <Avatar\n {...avatarProps}\n tooltipProps={undefined}\n aria-label={\"\"}\n customSize={AVATAR_GROUP_COUNTER_AVATAR_SIZE}\n type={type \|\| avatarProps?.type}\n tabIndex={-1}\n size=\"small\"\n className={avatarGroupCounterTooltipContentStyles.tooltipAvatarItemAvatar}\n />\n {!displayAsGrid && (\n <div id={labelId} className={avatarGroupCounterTooltipContentStyles.tooltipAvatarItemTitle}>\n {avatarProps.tooltipContent}\n </div>\n )}\n </Flex>\n </div>\n </ClickableWrapper>\n );\n};\n"],"names":["TAB","keyCodes","ESC","ESCAPE","useTooltipContentTabNavigation","_ref","_ref$counterContainer","counterContainerRef","undefined","tooltipContentContainerRef","focusPrevPlaceholderRef","focusNextPlaceholderRef","isKeyboardTooltipVisible","setIsKeyboardTooltipVisible","showKeyboardTooltip","useCallback","setTimeout","AVATAR_GROUP_COUNTER_TOOLTIP_SHOW_DELAY","hideKeyboardTooltip","useListenFocusTriggers","ref","onFocusByKeyboard","useEventListener","eventName","callback","useKeyEvent","keys","withoutAnyModifier","preventDefault","current","focus","modifier","modifiers","SHIFT","avatarRenderer","item","index","style","type","displayAsGrid","avatarProps","value","overrideStyle","Object","assign","width","labelId","concat","React","ClickableWrapper","key","isClickable","onClick","clickableProps","event","id","tabIndex","createElement","Flex","direction","gap","Avatar","tooltipProps","customSize","AVATAR_GROUP_COUNTER_AVATAR_SIZE","size","className","avatarGroupCounterTooltipContentStyles","tooltipAvatarItemAvatar","tooltipAvatarItemTitle","tooltipContent"],"mappings":"8rBAaA,IAAMA,EAAM,CAACC,EAASD,KAChBE,EAAM,CAACD,EAASE,iBAENC,EAA8BC,GAc7C,IAAAC,EAAAD,EAbCE,oBAAAA,OAAmB,IAAAD,OAAGE,EAASF,EAC/BG,EAA0BJ,EAA1BI,2BACAC,EAAuBL,EAAvBK,wBACAC,EAAuBN,EAAvBM,wBACAC,EAAwBP,EAAxBO,yBACAC,EAA2BR,EAA3BQ,4BASMC,EAAsBC,GAAY,WACjCH,GAEHI,YAAW,WAAA,OAAMH,GAA4B,EAAK,GAAEI,EAExD,GAAG,CAACL,EAA0BC,IAExBK,EAAsBH,GAAY,WAClCH,GAA0BC,GAA4B,EAC5D,GAAG,CAACD,EAA0BC,IAG9BM,EAAuB,CACrBC,IAAKb,EACLc,kBAAmBP,IAGrBQ,EAAiB,CACfC,UAAW,OACXH,IAAKX,EACLe,SAAUN,IAIZO,EAAY,CACVC,KAAM1B,EACNoB,IAAKb,EACLoB,oBAAoB,EACpBC,gBAAgB,EAChBJ,SAAUT,GAAY,WAChBH,IAA0BH,aAA0B,EAA1BA,EAA4BoB,UAAWpB,EAA2BoB,QAAQC,OAC1G,GAAG,CAAClB,EAA0BH,MAIhCgB,EAAY,CACVC,KAAM1B,EACN+B,SAAUN,EAAYO,UAAUC,MAChCb,IAAKb,EACLiB,SAAUN,IAEZO,EAAY,CACVC,KAAM1B,EACNoB,IAAKX,EACLkB,oBAAoB,EACpBH,SAAUT,GAAY,YAGpBJ,aAAuB,EAAvBA,EAAyBkB,UAAWlB,EAAwBkB,QAAQC,QAChElB,GAA0BC,GAA4B,EAC5D,GAAG,CAACF,EAAyBC,EAA0BC,MAEzDY,EAAY,CACVC,KAAM1B,EACNoB,IAAKX,EACLsB,SAAUN,EAAYO,UAAUC,MAChCT,SAAUT,GAAY,YAGpBL,aAAuB,EAAvBA,EAAyBmB,UAAWnB,EAAwBmB,QAAQC,QAChElB,GAA0BC,GAA4B,EAC5D,GAAG,CAACH,EAAyBE,EAA0BC,MAEzDY,EAAY,CACVC,KAAMxB,EACNkB,IAAKX,EACLe,SAAUT,GAAY,YACpBR,aAAmB,EAAnBA,EAAqBsB,UAAWtB,EAAoBsB,QAAQC,QACxDlB,GAA0BC,GAA4B,EAC5D,GAAG,CAACN,EAAqBK,EAA0BC,MAErDY,EAAY,CACVC,KAAMxB,EACNkB,IAAKb,EACLiB,SAAUN,IAIZI,EAAiB,CACfC,UAAW,QACXH,IAAKT,EACLa,SAAUN,GAEd,CAEO,IAAMgB,EAAiB,SAC5BC,EACAC,EACAC,EACAC,EACAC,GAEA,IAAMC,EAAcL,EAAKM,MACnBC,EAAaC,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAAuBP,GAAK,CAAEQ,MAAON,OAAgB/B,EAAY,SAC9EsC,EAAO,gBAAAC,OAAmBX,EAAK,UAErC,OACEY,gBAACC,EAAgB,CACfC,IAAKd,EACLe,eAAeX,eAAAA,EAAaY,SAC5BC,eAAgB,CAAED,QAAS,SAAAE,GAAK,OAAId,EAAYY,QAAQE,EAAOd,EAAYe,GAAG,EAAEC,UAAU,IAE1FR,EAAAS,cAAA,MAAA,CAAKpB,MAAOK,GACVM,EAAAS,cAACC,EAAI,CAACC,UAAU,MAAMC,IAAI,KAAI,kBAAkBd,GAC9CE,EAAAS,cAACI,EAAMlB,OAAAC,OAAA,CAAA,EACDJ,GACJsB,kBAActD,EAAS,aACX,GACZuD,WAAYC,EACZ1B,KAAMA,IAAQE,aAAW,EAAXA,EAAaF,MAC3BkB,UAAU,EACVS,KAAK,QACLC,UAAWC,EAAuCC,4BAElD7B,GACAS,EAAAS,cAAA,MAAA,CAAKF,GAAIT,EAASoB,UAAWC,EAAuCE,wBACjE7B,EAAY8B,kBAO3B"}

package/dist/src/components/AvatarGroup/AvatarGroupHelper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AvatarGroupHelper.js","sources":["../../../../src/components/AvatarGroup/AvatarGroupHelper.ts"],"sourcesContent":["import type React from \"react\";\nimport { type AvatarProps } from \"../Avatar/Avatar\";\n\nexport const avatarOnClick = (event: React.MouseEvent \| React.KeyboardEvent, avatarProps: AvatarProps) => {\n avatarProps?.onClick?.(event, avatarProps.id);\n};\n"],"names":["avatarOnClick","event","avatarProps","_a","onClick","call","id"],"mappings":"AAGO,IAAMA,EAAgB,SAACC,EAA+CC,~~SACpD~~,~~QAAvBC~~,EAAAD,aAAW,EAAXA,EAAaE,~~eAAU~~,IAAAD,GAAAA,EAAAE,KAAAH,~~EAAAD~~,EAAOC,EAAYI,GAC5C"}
1	+ {"version":3,"file":"AvatarGroupHelper.js","sources":["../../../../src/components/AvatarGroup/AvatarGroupHelper.ts"],"sourcesContent":["import type React from \"react\";\nimport { type AvatarProps } from \"../Avatar/Avatar\";\n\nexport const avatarOnClick = (event: React.MouseEvent \| React.KeyboardEvent, avatarProps: AvatarProps) => {\n avatarProps?.onClick?.(event, avatarProps.id);\n};\n"],"names":["avatarOnClick","event","avatarProps","_a","onClick","call","id"],"mappings":"AAGO,IAAMA,EAAgB,SAACC,EAA+CC,SACvD,QAApBC,EAAAD,aAAW,EAAXA,EAAaE,eAAO,IAAAD,GAAAA,EAAAE,KAAAH,EAAGD,EAAOC,EAAYI,GAC5C"}

package/dist/src/components/Badge/Badge.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{__rest as t}from"../../../_virtual/_tslib.js";import e,{forwardRef as r,useRef as o}from"react";import s from"classnames";import{camelCase as a}from"es-toolkit";import{getTestId as i}from"../../tests/testIds.js";import{ComponentVibeId as d,ComponentDefaultTestId as m}from"../../tests/constants.js";import n from"./Indicator/Indicator.js";import c from"../Counter/Counter.js";import l from"./Badge.module.scss.js";import{useMergeRef as p}from"../../../shared/dist/hooks/useMergeRef.js";import{getStyle as f}from"../../../shared/dist/utils/typesciptCssModulesHelper.js";var u=r((function(r,u){var g=r.type,j=void 0===g?"indicator":g,v=r.anchor,h=void 0===v?"top-end":v,b=r.alignment,E=void 0===b?"rectangular":b,N=r.className,y=r.id,B=r["data-testid"],C=r.children,I=t(r,["type","anchor","alignment","className","id","data-testid","children"]),k=o(null),A=p(u,k),D=s(l.badge,f(l,a(h)),f(l,E)),G=I.color||"indicator"===j?"notification":"negative";return e.createElement("div",{ref:A,className:s(l.badgeWrapper,N),id:y,"data-vibe":d.BADGE},C,e.createElement("div",{className:D,"data-testid":B||i(m.BADGE,y)},"indicator"===j?e.createElement(n,Object.assign({color:G},I)):"counter"===j&&e.createElement(c,Object.assign({color:G},I))))}));export{u as default};
+import{__rest as t}from"../../../_virtual/_tslib.js";import e,{forwardRef as r,useRef as o}from"react";import a from"classnames";import{camelCase as i}from"es-toolkit";import{getTestId as s}from"../../../testIds.js";import{ComponentVibeId as d,ComponentDefaultTestId as m}from"../../tests/constants.js";import n from"./Indicator/Indicator.js";import c from"../Counter/Counter.js";import l from"./Badge.module.scss.js";import{useMergeRef as p}from"../../../shared/dist/hooks/useMergeRef.js";import{getStyle as f}from"../../../shared/dist/utils/typesciptCssModulesHelper.js";var u=r((function(r,u){var g=r.type,j=void 0===g?"indicator":g,v=r.anchor,h=void 0===v?"top-end":v,b=r.alignment,E=void 0===b?"rectangular":b,N=r.className,y=r.id,B=r["data-testid"],C=r.children,I=t(r,["type","anchor","alignment","className","id","data-testid","children"]),k=o(null),A=p(u,k),D=a(l.badge,f(l,i(h)),f(l,E)),G=I.color||"indicator"===j?"notification":"negative";return e.createElement("div",{ref:A,className:a(l.badgeWrapper,N),id:y,"data-vibe":d.BADGE},C,e.createElement("div",{className:D,"data-testid":B||s(m.BADGE,y)},"indicator"===j?e.createElement(n,Object.assign({color:G},I)):"counter"===j&&e.createElement(c,Object.assign({color:G},I))))}));export{u as default};
 //# sourceMappingURL=Badge.js.map

package/dist/src/components/Badge/Badge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Badge.js","sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import React, { forwardRef, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { camelCase } from \"es-toolkit\";\nimport { useMergeRef, getStyle } from \"@vibe/shared\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../tests/constants\";\nimport { type BadgeAlignments, type BadgeAnchor, type BadgeType } from \"./Badge.types\";\nimport Indicator, { type IndicatorProps } from \"./Indicator/Indicator\";\nimport Counter, { type CounterProps } from \"../Counter/Counter\";\n\nimport { type IndicatorColor } from \"./Indicator/Indicator.types\";\nimport { type CounterColor } from \"../Counter/Counter.types\";\nimport styles from \"./Badge.module.scss\";\nimport { type VibeComponentProps } from \"../../types\";\n\nexport interface BadgeBaseProps extends VibeComponentProps {\n /*\n The position of the badge relative to its parent.\n /\n anchor?: BadgeAnchor;\n /\n The alignment style of the badge.\n /\n alignment?: BadgeAlignments;\n /\n The content the badge is attached to.\n /\n children: React.ReactNode;\n}\n\ninterface CounterBadgeProps extends CounterProps {\n /\n The type of badge, set to `\"counter\"` for numeric values.\n /\n type: Extract<BadgeType, \"counter\">;\n}\n\ninterface IndicatorBadgeProps extends IndicatorProps {\n /\n The type of badge, set to `\"indicator\"` for a simple dot.\n */\n type?: Extract<BadgeType, \"indicator\">;\n}\n\nexport type BadgeProps = BadgeBaseProps & (CounterBadgeProps \| IndicatorBadgeProps);\n\nconst Badge = forwardRef(\n (\n {\n type = \"indicator\",\n anchor = \"top-end\",\n alignment = \"rectangular\",\n className,\n id,\n \"data-testid\": dataTestId,\n children,\n ...badgeProps\n }: BadgeProps,\n ref: React.ForwardedRef<HTMLElement>\n ) => {\n const componentRef = useRef(null);\n const mergedRef = useMergeRef(ref, componentRef);\n const badgeClassNames = cx(\n styles.badge,\n getStyle(styles, camelCase(anchor as unknown as string)),\n getStyle(styles, alignment)\n );\n\n const color = badgeProps.color \|\| type === \"indicator\" ? \"notification\" : \"negative\";\n\n return (\n <div ref={mergedRef} className={cx(styles.badgeWrapper, className)} id={id} data-vibe={ComponentVibeId.BADGE}>\n {children}\n <div className={badgeClassNames} data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.BADGE, id)}>\n {type === \"indicator\" ? (\n <Indicator color={color as IndicatorColor} {...(badgeProps as IndicatorBadgeProps)} />\n ) : (\n type === \"counter\" && <Counter color={color as CounterColor} {...(badgeProps as CounterBadgeProps)} />\n )}\n </div>\n </div>\n );\n }\n);\n\nexport default Badge;\n"],"names":["Badge","forwardRef","_a","ref","type","_a$type","_a$anchor","anchor","_a$alignment","alignment","className","id","dataTestId","children","badgeProps","__rest","componentRef","useRef","mergedRef","useMergeRef","badgeClassNames","cx","styles","badge","getStyle","camelCase","color","React","badgeWrapper","ComponentVibeId","BADGE","createElement","getTestId","ComponentDefaultTestId","Indicator","Object","assign","Counter"],"mappings":"~~gkBA8CMA~~,~~IAAAA~~,EAAQC,GACZ,SACEC,EAUAC,SAHUD,EANRE,KAAAA,~~OAAO~~,~~IAAHC~~,EAAG,YAAWA,EAAAC,EAMVJ,EALRK,OAAAA,~~OAAS~~,~~IAAHD~~,EAAG,UAASA,EAAAE,EAKVN,EAJRO,UAAAA,~~OAAY~~,~~IAAHD~~,EAAG,cAAaA,EACzBE,EAGQR,EAHRQ,UACAC,EAEQT,EAFRS,GACeC,EACPV,EADR,eACAW,EAAQX,EAARW,SACGC,~~EARLC~~,EAAAb,~~EAAA~~,CAAA,OAAA,SAAA,YAAA,YAAA,KAAA,cAAA,aAYMc,EAAeC,EAAO,MACtBC,EAAYC,EAAYhB,EAAKa,GAC7BI,EAAkBC,EACtBC,EAAOC,MACPC,EAASF,EAAQG,EAAUlB,IAC3BiB,EAASF,EAAQb,IAGbiB,EAAQZ,EAAWY,OAAkB,cAATtB,EAAuB,eAAiB,WAE1E,OACEuB,uBAAKxB,IAAKe,EAAWR,UAAWW,EAAGC,EAAOM,aAAclB,GAAYC,GAAIA,EAAE,YAAakB,EAAgBC,OACpGjB,EACDc,~~EAAKI~~,cAAA,MAAA,~~CAAArB~~,UAAWU,~~EAA8B~~,~~cAAAR~~,GAAcoB,EAAUC,EAAuBH,MAAOnB,IACxF,cAATP,EACCuB,~~EAACI~~,~~cAAAG~~,~~EAAUC~~,OAAAC,OAAA,~~CAAAV~~,MAAOA,GAA8BZ,IAEvC,YAATV,GAAsBuB,gBAACU,EAAOF,OAAAC,OAAA,CAACV,MAAOA,GAA4BZ,KAK5E"}
1	+ {"version":3,"file":"Badge.js","sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import React, { forwardRef, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { camelCase } from \"es-toolkit\";\nimport { useMergeRef, getStyle } from \"@vibe/shared\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../tests/constants\";\nimport { type BadgeAlignments, type BadgeAnchor, type BadgeType } from \"./Badge.types\";\nimport Indicator, { type IndicatorProps } from \"./Indicator/Indicator\";\nimport Counter, { type CounterProps } from \"../Counter/Counter\";\n\nimport { type IndicatorColor } from \"./Indicator/Indicator.types\";\nimport { type CounterColor } from \"../Counter/Counter.types\";\nimport styles from \"./Badge.module.scss\";\nimport { type VibeComponentProps } from \"../../types\";\n\nexport interface BadgeBaseProps extends VibeComponentProps {\n /*\n The position of the badge relative to its parent.\n /\n anchor?: BadgeAnchor;\n /\n The alignment style of the badge.\n /\n alignment?: BadgeAlignments;\n /\n The content the badge is attached to.\n /\n children: React.ReactNode;\n}\n\ninterface CounterBadgeProps extends CounterProps {\n /\n The type of badge, set to `\"counter\"` for numeric values.\n /\n type: Extract<BadgeType, \"counter\">;\n}\n\ninterface IndicatorBadgeProps extends IndicatorProps {\n /\n The type of badge, set to `\"indicator\"` for a simple dot.\n */\n type?: Extract<BadgeType, \"indicator\">;\n}\n\nexport type BadgeProps = BadgeBaseProps & (CounterBadgeProps \| IndicatorBadgeProps);\n\nconst Badge = forwardRef(\n (\n {\n type = \"indicator\",\n anchor = \"top-end\",\n alignment = \"rectangular\",\n className,\n id,\n \"data-testid\": dataTestId,\n children,\n ...badgeProps\n }: BadgeProps,\n ref: React.ForwardedRef<HTMLElement>\n ) => {\n const componentRef = useRef(null);\n const mergedRef = useMergeRef(ref, componentRef);\n const badgeClassNames = cx(\n styles.badge,\n getStyle(styles, camelCase(anchor as unknown as string)),\n getStyle(styles, alignment)\n );\n\n const color = badgeProps.color \|\| type === \"indicator\" ? \"notification\" : \"negative\";\n\n return (\n <div ref={mergedRef} className={cx(styles.badgeWrapper, className)} id={id} data-vibe={ComponentVibeId.BADGE}>\n {children}\n <div className={badgeClassNames} data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.BADGE, id)}>\n {type === \"indicator\" ? (\n <Indicator color={color as IndicatorColor} {...(badgeProps as IndicatorBadgeProps)} />\n ) : (\n type === \"counter\" && <Counter color={color as CounterColor} {...(badgeProps as CounterBadgeProps)} />\n )}\n </div>\n </div>\n );\n }\n);\n\nexport default Badge;\n"],"names":["Badge","forwardRef","_a","ref","type","_a$type","_a$anchor","anchor","_a$alignment","alignment","className","id","dataTestId","children","badgeProps","__rest","componentRef","useRef","mergedRef","useMergeRef","badgeClassNames","cx","styles","badge","getStyle","camelCase","color","React","badgeWrapper","ComponentVibeId","BADGE","createElement","getTestId","ComponentDefaultTestId","Indicator","Object","assign","Counter"],"mappings":"6jBA8CA,IAAMA,EAAQC,GACZ,SACEC,EAUAC,SAHUD,EANRE,KAAAA,OAAI,IAAAC,EAAG,YAAWA,EAAAC,EAMVJ,EALRK,OAAAA,OAAM,IAAAD,EAAG,UAASA,EAAAE,EAKVN,EAJRO,UAAAA,OAAS,IAAAD,EAAG,cAAaA,EACzBE,EAGQR,EAHRQ,UACAC,EAEQT,EAFRS,GACeC,EACPV,EADR,eACAW,EAAQX,EAARW,SACGC,EAAUC,EAAAb,EARf,CAAA,OAAA,SAAA,YAAA,YAAA,KAAA,cAAA,aAYMc,EAAeC,EAAO,MACtBC,EAAYC,EAAYhB,EAAKa,GAC7BI,EAAkBC,EACtBC,EAAOC,MACPC,EAASF,EAAQG,EAAUlB,IAC3BiB,EAASF,EAAQb,IAGbiB,EAAQZ,EAAWY,OAAkB,cAATtB,EAAuB,eAAiB,WAE1E,OACEuB,uBAAKxB,IAAKe,EAAWR,UAAWW,EAAGC,EAAOM,aAAclB,GAAYC,GAAIA,EAAE,YAAakB,EAAgBC,OACpGjB,EACDc,EAAAI,cAAA,MAAA,CAAKrB,UAAWU,EAAe,cAAeR,GAAcoB,EAAUC,EAAuBH,MAAOnB,IACxF,cAATP,EACCuB,EAAAI,cAACG,EAASC,OAAAC,OAAA,CAACV,MAAOA,GAA8BZ,IAEvC,YAATV,GAAsBuB,gBAACU,EAAOF,OAAAC,OAAA,CAACV,MAAOA,GAA4BZ,KAK5E"}

package/dist/src/components/Badge/Badge.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={badgeWrapper:"badgeWrapper_0d4665ce62",badge:"badge_34579b240c",outside:"outside_153bb606ba",topEnd:"topEnd_ec395119fb",rectangular:"rectangular_8319a79642",circular:"circular_32792a1678",topStart:"topStart_a3e685273b",bottomEnd:"bottomEnd_b9f40e5819",bottomStart:"bottomStart_f6e3edafe6"};!function(e){const n="s_id-06f338dd08c3_4_2_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const a=document.createElement("style");a.id=n,t.firstChild?t.insertBefore(a,t.firstChild):t.appendChild(a),a.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".badgeWrapper_0d4665ce62 {\n  position: relative;\n}\n.badgeWrapper_0d4665ce62 .badge_34579b240c {\n  z-index: 1;\n  position: absolute;\n  border-radius: 16px;\n}\n.badgeWrapper_0d4665ce62 .badge_34579b240c:not(.outside_153bb606ba) {\n  border: 2px solid;\n  border-color: var(--primary-background-color);\n}\n.badgeWrapper_0d4665ce62 .badge_34579b240c.topEnd_ec395119fb.rectangular_8319a79642 {\n  top: 0;\n  inset-inline-end: 0;\n  translate: 50% -50%;\n}\n.badgeWrapper_0d4665ce62 .badge_34579b240c.topEnd_ec395119fb.outside_153bb606ba {\n  top: 0;\n  inset-inline-end: -2px;\n  translate: 100% 0;\n}\n.badgeWrapper_0d4665ce62 .badge_34579b240c.topEnd_ec395119fb.circular_32792a1678 {\n  top: 15%;\n  inset-inline-end: 15%;\n  translate: 50% -50%;\n}\n.badgeWrapper_0d4665ce62 .badge_34579b240c.topStart_a3e685273b.rectangular_8319a79642 {\n  top: 0;\n  inset-inline-start: 0;\n  translate: -50% -50%;\n}\n.badgeWrapper_0d4665ce62 .badge_34579b240c.topStart_a3e685273b.outside_153bb606ba {\n  top: 0;\n  inset-inline-start: -2px;\n  translate: -100% 0;\n}\n.badgeWrapper_0d4665ce62 .badge_34579b240c.topStart_a3e685273b.circular_32792a1678 {\n  top: 15%;\n  inset-inline-start: 15%;\n  translate: -50% -50%;\n}\n.badgeWrapper_0d4665ce62 .badge_34579b240c.bottomEnd_b9f40e5819.rectangular_8319a79642 {\n  bottom: 0;\n  inset-inline-end: 0;\n  translate: 50% 50%;\n}\n.badgeWrapper_0d4665ce62 .badge_34579b240c.bottomEnd_b9f40e5819.outside_153bb606ba {\n  bottom: 0;\n  inset-inline-end: -2px;\n  translate: 100% 0;\n}\n.badgeWrapper_0d4665ce62 .badge_34579b240c.bottomEnd_b9f40e5819.circular_32792a1678 {\n  bottom: 15%;\n  inset-inline-end: 15%;\n  translate: 50% 50%;\n}\n.badgeWrapper_0d4665ce62 .badge_34579b240c.bottomStart_f6e3edafe6.rectangular_8319a79642 {\n  bottom: 0;\n  inset-inline-start: 0;\n  translate: -50% 50%;\n}\n.badgeWrapper_0d4665ce62 .badge_34579b240c.bottomStart_f6e3edafe6.outside_153bb606ba {\n  bottom: 0;\n  inset-inline-start: -2px;\n  translate: -100% 0;\n}\n.badgeWrapper_0d4665ce62 .badge_34579b240c.bottomStart_f6e3edafe6.circular_32792a1678 {\n  bottom: 15%;\n  inset-inline-start: 15%;\n  translate: -50% 50%;\n}");export{e as default};
+var e={badgeWrapper:"badgeWrapper_5276bed7f8",badge:"badge_68c43945a7",outside:"outside_560187d031",topEnd:"topEnd_fdd7085b44",rectangular:"rectangular_11252f8601",circular:"circular_7eb9d11157",topStart:"topStart_3a6f07c909",bottomEnd:"bottomEnd_284ab22f39",bottomStart:"bottomStart_0e523e09fa"};!function(e){const n="s_id-06f338dd08c3_4_2_2";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const a=document.createElement("style");a.id=n,t.firstChild?t.insertBefore(a,t.firstChild):t.appendChild(a),a.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".badgeWrapper_5276bed7f8 {\n  position: relative;\n}\n.badgeWrapper_5276bed7f8 .badge_68c43945a7 {\n  z-index: 1;\n  position: absolute;\n  border-radius: 16px;\n}\n.badgeWrapper_5276bed7f8 .badge_68c43945a7:not(.outside_560187d031) {\n  border: 2px solid;\n  border-color: var(--primary-background-color);\n}\n.badgeWrapper_5276bed7f8 .badge_68c43945a7.topEnd_fdd7085b44.rectangular_11252f8601 {\n  top: 0;\n  inset-inline-end: 0;\n  translate: 50% -50%;\n}\n.badgeWrapper_5276bed7f8 .badge_68c43945a7.topEnd_fdd7085b44.outside_560187d031 {\n  top: 0;\n  inset-inline-end: -2px;\n  translate: 100% 0;\n}\n.badgeWrapper_5276bed7f8 .badge_68c43945a7.topEnd_fdd7085b44.circular_7eb9d11157 {\n  top: 15%;\n  inset-inline-end: 15%;\n  translate: 50% -50%;\n}\n.badgeWrapper_5276bed7f8 .badge_68c43945a7.topStart_3a6f07c909.rectangular_11252f8601 {\n  top: 0;\n  inset-inline-start: 0;\n  translate: -50% -50%;\n}\n.badgeWrapper_5276bed7f8 .badge_68c43945a7.topStart_3a6f07c909.outside_560187d031 {\n  top: 0;\n  inset-inline-start: -2px;\n  translate: -100% 0;\n}\n.badgeWrapper_5276bed7f8 .badge_68c43945a7.topStart_3a6f07c909.circular_7eb9d11157 {\n  top: 15%;\n  inset-inline-start: 15%;\n  translate: -50% -50%;\n}\n.badgeWrapper_5276bed7f8 .badge_68c43945a7.bottomEnd_284ab22f39.rectangular_11252f8601 {\n  bottom: 0;\n  inset-inline-end: 0;\n  translate: 50% 50%;\n}\n.badgeWrapper_5276bed7f8 .badge_68c43945a7.bottomEnd_284ab22f39.outside_560187d031 {\n  bottom: 0;\n  inset-inline-end: -2px;\n  translate: 100% 0;\n}\n.badgeWrapper_5276bed7f8 .badge_68c43945a7.bottomEnd_284ab22f39.circular_7eb9d11157 {\n  bottom: 15%;\n  inset-inline-end: 15%;\n  translate: 50% 50%;\n}\n.badgeWrapper_5276bed7f8 .badge_68c43945a7.bottomStart_0e523e09fa.rectangular_11252f8601 {\n  bottom: 0;\n  inset-inline-start: 0;\n  translate: -50% 50%;\n}\n.badgeWrapper_5276bed7f8 .badge_68c43945a7.bottomStart_0e523e09fa.outside_560187d031 {\n  bottom: 0;\n  inset-inline-start: -2px;\n  translate: -100% 0;\n}\n.badgeWrapper_5276bed7f8 .badge_68c43945a7.bottomStart_0e523e09fa.circular_7eb9d11157 {\n  bottom: 15%;\n  inset-inline-start: 15%;\n  translate: -50% 50%;\n}");export{e as default};
 //# sourceMappingURL=Badge.module.scss.js.map

package/dist/src/components/Badge/Indicator/Indicator.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import t from"react";import s from"classnames";import o from"./Indicator.module.scss.js";import{ComponentDefaultTestId as a}from"../../../tests/constants.js";import{getTestId as r}from"../../../tests/testIds.js";var e=function(e){var i=e.color,m=e.id,c=e["data-testid"];return t.createElement("div",{className:s(o.indicator,o[void 0===i?"notification":i],e.className),"data-testid":c||r(a.INDICATOR,m)})};export{e as default};
+import t from"react";import s from"classnames";import o from"./Indicator.module.scss.js";import{ComponentDefaultTestId as a}from"../../../tests/constants.js";import{getTestId as r}from"../../../../testIds.js";var i=function(i){var e=i.color,m=i.id,c=i["data-testid"];return t.createElement("div",{className:s(o.indicator,o[void 0===e?"notification":e],i.className),"data-testid":c||r(a.INDICATOR,m)})};export{i as default};
 //# sourceMappingURL=Indicator.js.map

package/dist/src/components/Badge/Indicator/Indicator.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Indicator.js","sources":["../../../../../src/components/Badge/Indicator/Indicator.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\nimport styles from \"./Indicator.module.scss\";\nimport { type IndicatorColor } from \"./Indicator.types\";\nimport { ComponentDefaultTestId } from \"../../../tests/constants\";\nimport { type VibeComponentProps } from \"../../../types\";\nimport { getTestId } from \"../../../tests/test-ids-utils\";\n\nexport interface IndicatorProps extends VibeComponentProps {\n /*\n The color of the indicator.\n */\n color?: IndicatorColor;\n}\n\nconst Indicator = ({ color = \"notification\", className, id, \"data-testid\": dataTestId }: IndicatorProps) => {\n return (\n <div\n className={cx(styles.indicator, styles[color], className)}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.INDICATOR, id)}\n />\n );\n};\n\nexport default Indicator;\n"],"names":["Indicator","_ref","_ref$color","color","id","dataTestId","React","createElement","className","cx","styles","indicator","getTestId","ComponentDefaultTestId","INDICATOR"],"mappings":"~~oNAeA~~,IAAMA,EAAY,SAAHC,GAA4F,IAAAC,EAAAD,EAAtFE,MAAmCC,EAAEH,EAAFG,GAAmBC,EAAUJ,EAAzB,eAC1D,OACEK,EAAAC,cAAA,MAAA,CACEC,UAAWC,EAAGC,EAAOC,UAAWD,~~OAHT~~,~~IAAHR~~,EAAG,eAAcA,GAAWD,EAATO,~~WAI1B~~,~~cAAAH~~,GAAcO,EAAUC,EAAuBC,UAAWV,IAG7E"}
1	+ {"version":3,"file":"Indicator.js","sources":["../../../../../src/components/Badge/Indicator/Indicator.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\nimport styles from \"./Indicator.module.scss\";\nimport { type IndicatorColor } from \"./Indicator.types\";\nimport { ComponentDefaultTestId } from \"../../../tests/constants\";\nimport { type VibeComponentProps } from \"../../../types\";\nimport { getTestId } from \"../../../tests/test-ids-utils\";\n\nexport interface IndicatorProps extends VibeComponentProps {\n /*\n The color of the indicator.\n */\n color?: IndicatorColor;\n}\n\nconst Indicator = ({ color = \"notification\", className, id, \"data-testid\": dataTestId }: IndicatorProps) => {\n return (\n <div\n className={cx(styles.indicator, styles[color], className)}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.INDICATOR, id)}\n />\n );\n};\n\nexport default Indicator;\n"],"names":["Indicator","_ref","_ref$color","color","id","dataTestId","React","createElement","className","cx","styles","indicator","getTestId","ComponentDefaultTestId","INDICATOR"],"mappings":"iNAeA,IAAMA,EAAY,SAAHC,GAA4F,IAAAC,EAAAD,EAAtFE,MAAmCC,EAAEH,EAAFG,GAAmBC,EAAUJ,EAAzB,eAC1D,OACEK,EAAAC,cAAA,MAAA,CACEC,UAAWC,EAAGC,EAAOC,UAAWD,OAHZ,IAAAR,EAAG,eAAcA,GAAWD,EAATO,WAGkB,cAC5CH,GAAcO,EAAUC,EAAuBC,UAAWV,IAG7E"}

package/dist/src/components/Badge/Indicator/Indicator.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={indicator:"indicator_02f3a7fdb2",primary:"primary_4a93799458",notification:"notification_9e8588baa8"};!function(e){const i="s_id-d6448d74722f_4_2_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+i))return;const t=document.createElement("style");t.id=i,n.firstChild?n.insertBefore(t,n.firstChild):n.appendChild(t),t.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[i]=e)}(".indicator_02f3a7fdb2 {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n}\n.indicator_02f3a7fdb2.primary_4a93799458 {\n  background-color: var(--primary-color);\n}\n.indicator_02f3a7fdb2.notification_9e8588baa8 {\n  background-color: var(--negative-color);\n}");export{e as default};
+var e={indicator:"indicator_62743720b7",primary:"primary_c81b3d9605",notification:"notification_59aa295438"};!function(e){const i="s_id-d6448d74722f_4_2_2";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+i))return;const t=document.createElement("style");t.id=i,n.firstChild?n.insertBefore(t,n.firstChild):n.appendChild(t),t.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[i]=e)}(".indicator_62743720b7 {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n}\n.indicator_62743720b7.primary_c81b3d9605 {\n  background-color: var(--primary-color);\n}\n.indicator_62743720b7.notification_59aa295438 {\n  background-color: var(--negative-color);\n}");export{e as default};
 //# sourceMappingURL=Indicator.module.scss.js.map

package/dist/src/components/BaseItem/BaseItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseItem.js","sources":["../../../../src/components/BaseItem/BaseItem.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useMemo, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { useMergeRef, getStyle } from \"@vibe/shared\";\n\nimport { Text, type TextType } from \"@vibe/typography\";\nimport { type BaseItemData, type BaseItemProps } from \"./BaseItem.types\";\nimport { useListItemProps } from \"./hooks/useListItemProps\";\nimport { Tooltip } from \"@vibe/tooltip\";\nimport { renderSideElement } from \"./utils\";\nimport styles from \"./BaseItem.module.scss\";\n\nconst BaseItem = forwardRef(\n <Item extends Record<string, unknown>>(\n {\n className,\n id,\n component = \"li\",\n size = \"medium\",\n selected = false,\n readOnly = false,\n highlighted = false,\n role,\n index: _index,\n dir = \"auto\",\n itemRenderer,\n itemProps = {},\n item = {} as BaseItemData<Item>\n }: BaseItemProps<Item>,\n ref: React.Ref<HTMLElement>\n ) => {\n const internalRef = useRef<HTMLElement>(null);\n const mergedRef = useMergeRef(ref, internalRef);\n\n const listItemProps = useListItemProps({ id, component, size, highlighted, role, itemProps });\n\n useEffect(() => {\n listItemProps.refCallback?.(internalRef.current);\n }, [listItemProps]);\n\n const { label = \"\", disabled = false, startElement, endElement, tooltipProps = {} } = item;\n\n const listItemClassNames = useMemo(\n () =>\n cx(\n styles.wrapper,\n {\n [styles.selected]: selected,\n [styles.disabled]: disabled,\n [styles.highlighted]: listItemProps.highlighted,\n [styles.readOnly]: readOnly\n },\n getStyle(styles, listItemProps.size),\n className\n ),\n [selected, disabled, listItemProps.highlighted, readOnly, listItemProps.size, className]\n );\n\n const textVariant: TextType = listItemProps.size === \"small\" ? \"text2\" : \"text1\";\n const Element = listItemProps.component as React.ElementType;\n\n return (\n <Tooltip\n {...tooltipProps}\n content={tooltipProps?.content}\n position={dir === \"rtl\" ? \"right\" : \"left\"}\n containerSelector=\"body\"\n >\n <Element\n id={listItemProps.id}\n ref={mergedRef}\n className={listItemClassNames}\n role={listItemProps.role}\n aria-selected={selected}\n aria-disabled={disabled \|\| undefined}\n {...listItemProps.itemProps}\n >\n {itemRenderer ? (\n itemRenderer(item)\n ) : (\n <>\n {startElement && renderSideElement(startElement, disabled, textVariant)}\n <Text type={textVariant} color=\"inherit\" tooltipProps={{ containerSelector: \"body\" }}>\n {label}\n </Text>\n {endElement && (\n <div className={styles.endElement}>{renderSideElement(endElement, disabled, textVariant)}</div>\n )}\n </>\n )}\n </Element>\n </Tooltip>\n );\n }\n);\n\nexport default BaseItem as <Item extends Record<string, unknown>>(\n props: BaseItemProps<Item> & { ref?: React.Ref<HTMLElement> }\n) => React.ReactElement;\n"],"names":["BaseItem","forwardRef","_ref","ref","className","id","_ref$component","component","_ref$size","size","_ref$selected","selected","_ref$readOnly","readOnly","_ref$highlighted","highlighted","role","_ref$dir","dir","itemRenderer","_ref$itemProps","itemProps","_ref$item","item","internalRef","useRef","mergedRef","useMergeRef","listItemProps","useListItemProps","useEffect","_a","refCallback","call","current","_item$label","label","_item$disabled","disabled","startElement","endElement","_item$tooltipProps","tooltipProps","listItemClassNames","useMemo","cx","styles","wrapper","_defineProperty","getStyle","textVariant","Element","React","createElement","Tooltip","Object","assign","content","position","containerSelector","undefined","Fragment","renderSideElement","Text","type","color"],"mappings":"~~6mBAWMA~~,~~IAAAA~~,EAAWC,GACf,SAAAC,EAgBEC,GACE,IAfAC,EAASF,EAATE,UACAC,EAAEH,EAAFG,GAAEC,EAAAJ,EACFK,UAAAA,~~OAAY~~,~~IAAHD~~,EAAG,KAAIA,EAAAE,EAAAN,EAChBO,KAAAA,~~OAAO~~,~~IAAHD~~,EAAG,SAAQA,EAAAE,EAAAR,EACfS,SAAAA,~~OAAW~~,~~IAAHD~~,GAAQA,EAAAE,EAAAV,EAChBW,SAAAA,~~OAAW~~,~~IAAHD~~,GAAQA,EAAAE,EAAAZ,EAChBa,YAAAA,~~OAAc~~,~~IAAHD~~,GAAQA,EACnBE,EAAId,EAAJc,KACKC,EAAAf,EACLgB,IAAAA,~~OAAM~~,~~IAAHD~~,EAAG,OAAMA,EACZE,EAAYjB,EAAZiB,aAAYC,EAAAlB,EACZmB,UAAAA,OAAS,IAAAD,EAAG,CAAA,EAAEA,EAAAE,EAAApB,EACdqB,KAAAA,OAAI,IAAAD,EAAG,~~CAAwB~~,~~EAAAA,~~EAI3BE,EAAcC,EAAoB,MAClCC,EAAYC,EAAYxB,EAAKqB,GAE7BI,EAAgBC,EAAiB,CAAExB,GAAAA,EAAIE,UAAAA,EAAWE,KAAAA,EAAMM,YAAAA,EAAaC,KAAAA,EAAMK,UAAAA,IAEjFS,GAAU,iBACiB,QAAzBC,EAAAH,EAAcI,mBAAW,IAAAD,GAAAA,EAAAE,KAAAL,EAAGJ,EAAYU,QAC1C,GAAG,CAACN,IAEJ,IAAAO,EAAsFZ,EAA9Ea,MAAAA,~~OAAQ~~,~~IAAHD~~,EAAG,GAAEA,EAAAE,EAAoEd,EAAlEe,SAAAA,~~OAAW~~,~~IAAHD~~,GAAQA,EAAEE,EAAgDhB,EAAhDgB,aAAcC,EAAkCjB,EAAlCiB,WAAUC,EAAwBlB,EAAtBmB,aAAAA,OAAY,IAAAD,EAAG,CAAA,EAAEA,EAE3EE,EAAqBC,GACzB,WAAA,OACEC,EACEC,EAAOC,QAAOC,EAAAA,EAAAA,EAAAA,EAAA,CAAA,EAEXF,EAAOnC,SAAWA,GAClBmC,EAAOR,SAAWA,GAClBQ,EAAO/B,YAAca,EAAcb,aACnC+B,EAAOjC,SAAWA,GAErBoC,EAASH,EAAQlB,EAAcnB,MAC/BL,EACD,GACH,CAACO,EAAU2B,EAAUV,EAAcb,YAAaF,EAAUe,EAAcnB,KAAML,IAG1E8C,EAA+C,UAAvBtB,EAAcnB,KAAmB,QAAU,QACnE0C,EAAUvB,EAAcrB,UAE9B,OACE6C,EAAAC,cAACC,EAAOC,OAAAC,OAAA,CAAA,EACFd,~~EACJ~~,~~CAAAe~~,QAASf,~~aAAA~~,~~EAAAA~~,EAAce,QACvBC,SAAkB,QAARxC,EAAgB,QAAU,OACpCyC,kBAAkB,SAElBP,~~EAACC~~,~~cAAAF~~,iBACC9C,GAAIuB,EAAcvB,GAClBF,IAAKuB,EACLtB,UAAWuC,EACX3B,KAAMY,EAAcZ,KAAI,gBACTL,~~EACA~~,~~gBAAA2B~~,QAAYsB,GACvBhC,EAAcP,WAEjBF,EACCA,EAAaI,GAEb6B,EAAAC,cAAAD,EAAAS,SAAA,KACGtB,GAAgBuB,EAAkBvB,EAAcD,EAAUY,GAC3DE,EAAAC,cAACU,~~EAAK~~,~~CAAAC~~,KAAMd,EAAae,MAAM,UAAUvB,aAAc,CAAEiB,kBAAmB,SACzEvB,GAEFI,GACCY,EAAAC,cAAA,MAAA,CAAKjD,UAAW0C,EAAON,YAAasB,EAAkBtB,EAAYF,EAAUY,MAO1F"}
1	+ {"version":3,"file":"BaseItem.js","sources":["../../../../src/components/BaseItem/BaseItem.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useMemo, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { useMergeRef, getStyle } from \"@vibe/shared\";\n\nimport { Text, type TextType } from \"@vibe/typography\";\nimport { type BaseItemData, type BaseItemProps } from \"./BaseItem.types\";\nimport { useListItemProps } from \"./hooks/useListItemProps\";\nimport { Tooltip } from \"@vibe/tooltip\";\nimport { renderSideElement } from \"./utils\";\nimport styles from \"./BaseItem.module.scss\";\n\nconst BaseItem = forwardRef(\n <Item extends Record<string, unknown>>(\n {\n className,\n id,\n component = \"li\",\n size = \"medium\",\n selected = false,\n readOnly = false,\n highlighted = false,\n role,\n index: _index,\n dir = \"auto\",\n itemRenderer,\n itemProps = {},\n item = {} as BaseItemData<Item>\n }: BaseItemProps<Item>,\n ref: React.Ref<HTMLElement>\n ) => {\n const internalRef = useRef<HTMLElement>(null);\n const mergedRef = useMergeRef(ref, internalRef);\n\n const listItemProps = useListItemProps({ id, component, size, highlighted, role, itemProps });\n\n useEffect(() => {\n listItemProps.refCallback?.(internalRef.current);\n }, [listItemProps]);\n\n const { label = \"\", disabled = false, startElement, endElement, tooltipProps = {} } = item;\n\n const listItemClassNames = useMemo(\n () =>\n cx(\n styles.wrapper,\n {\n [styles.selected]: selected,\n [styles.disabled]: disabled,\n [styles.highlighted]: listItemProps.highlighted,\n [styles.readOnly]: readOnly\n },\n getStyle(styles, listItemProps.size),\n className\n ),\n [selected, disabled, listItemProps.highlighted, readOnly, listItemProps.size, className]\n );\n\n const textVariant: TextType = listItemProps.size === \"small\" ? \"text2\" : \"text1\";\n const Element = listItemProps.component as React.ElementType;\n\n return (\n <Tooltip\n {...tooltipProps}\n content={tooltipProps?.content}\n position={dir === \"rtl\" ? \"right\" : \"left\"}\n containerSelector=\"body\"\n >\n <Element\n id={listItemProps.id}\n ref={mergedRef}\n className={listItemClassNames}\n role={listItemProps.role}\n aria-selected={selected}\n aria-disabled={disabled \|\| undefined}\n {...listItemProps.itemProps}\n >\n {itemRenderer ? (\n itemRenderer(item)\n ) : (\n <>\n {startElement && renderSideElement(startElement, disabled, textVariant)}\n <Text type={textVariant} color=\"inherit\" tooltipProps={{ containerSelector: \"body\" }}>\n {label}\n </Text>\n {endElement && (\n <div className={styles.endElement}>{renderSideElement(endElement, disabled, textVariant)}</div>\n )}\n </>\n )}\n </Element>\n </Tooltip>\n );\n }\n);\n\nexport default BaseItem as <Item extends Record<string, unknown>>(\n props: BaseItemProps<Item> & { ref?: React.Ref<HTMLElement> }\n) => React.ReactElement;\n"],"names":["BaseItem","forwardRef","_ref","ref","className","id","_ref$component","component","_ref$size","size","_ref$selected","selected","_ref$readOnly","readOnly","_ref$highlighted","highlighted","role","_ref$dir","dir","itemRenderer","_ref$itemProps","itemProps","_ref$item","item","internalRef","useRef","mergedRef","useMergeRef","listItemProps","useListItemProps","useEffect","_a","refCallback","call","current","_item$label","label","_item$disabled","disabled","startElement","endElement","_item$tooltipProps","tooltipProps","listItemClassNames","useMemo","cx","styles","wrapper","_defineProperty","getStyle","textVariant","Element","React","createElement","Tooltip","Object","assign","content","position","containerSelector","undefined","Fragment","renderSideElement","Text","type","color"],"mappings":"6mBAWA,IAAMA,EAAWC,GACf,SAAAC,EAgBEC,GACE,IAfAC,EAASF,EAATE,UACAC,EAAEH,EAAFG,GAAEC,EAAAJ,EACFK,UAAAA,OAAS,IAAAD,EAAG,KAAIA,EAAAE,EAAAN,EAChBO,KAAAA,OAAI,IAAAD,EAAG,SAAQA,EAAAE,EAAAR,EACfS,SAAAA,OAAQ,IAAAD,GAAQA,EAAAE,EAAAV,EAChBW,SAAAA,OAAQ,IAAAD,GAAQA,EAAAE,EAAAZ,EAChBa,YAAAA,OAAW,IAAAD,GAAQA,EACnBE,EAAId,EAAJc,KACKC,EAAAf,EACLgB,IAAAA,OAAG,IAAAD,EAAG,OAAMA,EACZE,EAAYjB,EAAZiB,aAAYC,EAAAlB,EACZmB,UAAAA,OAAS,IAAAD,EAAG,CAAA,EAAEA,EAAAE,EAAApB,EACdqB,KAAAA,OAAI,IAAAD,EAAG,GAAwBA,EAI3BE,EAAcC,EAAoB,MAClCC,EAAYC,EAAYxB,EAAKqB,GAE7BI,EAAgBC,EAAiB,CAAExB,GAAAA,EAAIE,UAAAA,EAAWE,KAAAA,EAAMM,YAAAA,EAAaC,KAAAA,EAAMK,UAAAA,IAEjFS,GAAU,iBACiB,QAAzBC,EAAAH,EAAcI,mBAAW,IAAAD,GAAAA,EAAAE,KAAAL,EAAGJ,EAAYU,QAC1C,GAAG,CAACN,IAEJ,IAAAO,EAAsFZ,EAA9Ea,MAAAA,OAAK,IAAAD,EAAG,GAAEA,EAAAE,EAAoEd,EAAlEe,SAAAA,OAAQ,IAAAD,GAAQA,EAAEE,EAAgDhB,EAAhDgB,aAAcC,EAAkCjB,EAAlCiB,WAAUC,EAAwBlB,EAAtBmB,aAAAA,OAAY,IAAAD,EAAG,CAAA,EAAEA,EAE3EE,EAAqBC,GACzB,WAAA,OACEC,EACEC,EAAOC,QAAOC,EAAAA,EAAAA,EAAAA,EAAA,CAAA,EAEXF,EAAOnC,SAAWA,GAClBmC,EAAOR,SAAWA,GAClBQ,EAAO/B,YAAca,EAAcb,aACnC+B,EAAOjC,SAAWA,GAErBoC,EAASH,EAAQlB,EAAcnB,MAC/BL,EACD,GACH,CAACO,EAAU2B,EAAUV,EAAcb,YAAaF,EAAUe,EAAcnB,KAAML,IAG1E8C,EAA+C,UAAvBtB,EAAcnB,KAAmB,QAAU,QACnE0C,EAAUvB,EAAcrB,UAE9B,OACE6C,EAAAC,cAACC,EAAOC,OAAAC,OAAA,CAAA,EACFd,EAAY,CAChBe,QAASf,aAAY,EAAZA,EAAce,QACvBC,SAAkB,QAARxC,EAAgB,QAAU,OACpCyC,kBAAkB,SAElBP,EAAAC,cAACF,iBACC9C,GAAIuB,EAAcvB,GAClBF,IAAKuB,EACLtB,UAAWuC,EACX3B,KAAMY,EAAcZ,KAAI,gBACTL,EAAQ,gBACR2B,QAAYsB,GACvBhC,EAAcP,WAEjBF,EACCA,EAAaI,GAEb6B,EAAAC,cAAAD,EAAAS,SAAA,KACGtB,GAAgBuB,EAAkBvB,EAAcD,EAAUY,GAC3DE,EAAAC,cAACU,EAAI,CAACC,KAAMd,EAAae,MAAM,UAAUvB,aAAc,CAAEiB,kBAAmB,SACzEvB,GAEFI,GACCY,EAAAC,cAAA,MAAA,CAAKjD,UAAW0C,EAAON,YAAasB,EAAkBtB,EAAYF,EAAUY,MAO1F"}

package/dist/src/components/BaseItem/BaseItem.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={wrapper:"wrapper_07ca30933f","focus-visible":"focus-visible_cb71875eb1",highlighted:"highlighted_7af4367355",disabled:"disabled_d5bdf9f423",readOnly:"readOnly_ae4a6b5530",selected:"selected_7ee1482602",small:"small_89c8208fda",medium:"medium_7b669c8d49",large:"large_ba077a8e0f",avatar:"avatar_85c04ac35c",icon:"icon_c058a0798f",indent:"indent_86bf121459",endElement:"endElement_0a95fe5425"};!function(e){const a="s_id-c5f50f32df2c_4_2_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+a))return;const r=document.createElement("style");r.id=a,n.firstChild?n.insertBefore(r,n.firstChild):n.appendChild(r),r.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[a]=e)}("/* stylelint-disable selector-class-pattern */\n.wrapper_07ca30933f {\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n  border-radius: var(--border-radius-small);\n  color: var(--primary-text-color);\n  cursor: pointer;\n}\n.wrapper_07ca30933f:focus-visible, .wrapper_07ca30933f.focus-visible_cb71875eb1 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5) inset, 0 0 0 1px var(--primary-hover-color) inset;\n}\n.wrapper_07ca30933f:focus:not(.focus-visible_cb71875eb1) {\n  outline: none;\n}\n.wrapper_07ca30933f.highlighted_7af4367355, .wrapper_07ca30933f:hover:not(.disabled_d5bdf9f423):not(.readOnly_ae4a6b5530) {\n  background-color: var(--primary-background-hover-color);\n}\n.wrapper_07ca30933f.disabled_d5bdf9f423 {\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n}\n.wrapper_07ca30933f.readOnly_ae4a6b5530 {\n  cursor: default;\n}\n.wrapper_07ca30933f.selected_7ee1482602 {\n  background-color: var(--primary-selected-color);\n}\n.wrapper_07ca30933f.selected_7ee1482602.highlighted_7af4367355, .wrapper_07ca30933f.selected_7ee1482602:hover:not(.disabled_d5bdf9f423):not(.readOnly_ae4a6b5530) {\n  background-color: var(--primary-selected-hover-color);\n}\n.wrapper_07ca30933f.small_89c8208fda {\n  padding: 6px var(--space-8);\n}\n.wrapper_07ca30933f.medium_7b669c8d49 {\n  padding: 9px 12px;\n}\n.wrapper_07ca30933f.large_ba077a8e0f {\n  padding: 13px 12px;\n}\n.wrapper_07ca30933f .avatar_85c04ac35c,\n.wrapper_07ca30933f .icon_c058a0798f {\n  flex-shrink: 0;\n}\n.wrapper_07ca30933f .indent_86bf121459 {\n  width: 20px;\n}\n.wrapper_07ca30933f .endElement_0a95fe5425 {\n  padding-inline-start: var(--space-8);\n  margin-inline-start: auto;\n  display: flex;\n}");export{e as default};
+var e={wrapper:"wrapper_6954ea7ffa","focus-visible":"focus-visible_2d489141dd",highlighted:"highlighted_f0233a3659",disabled:"disabled_8dc302c9fa",readOnly:"readOnly_70f974691d",selected:"selected_c485c592a9",small:"small_4a0e2f85d0",medium:"medium_e1dc451cb8",large:"large_50108c4dba",avatar:"avatar_d27048b54f",icon:"icon_6f76cbff6e",indent:"indent_ef503d3717",endElement:"endElement_a1da283047"};!function(e){const a="s_id-c5f50f32df2c_4_2_2";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+a))return;const r=document.createElement("style");r.id=a,n.firstChild?n.insertBefore(r,n.firstChild):n.appendChild(r),r.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[a]=e)}("/* stylelint-disable selector-class-pattern */\n.wrapper_6954ea7ffa {\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n  border-radius: var(--border-radius-small);\n  color: var(--primary-text-color);\n  cursor: pointer;\n}\n.wrapper_6954ea7ffa:focus-visible, .wrapper_6954ea7ffa.focus-visible_2d489141dd {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5) inset, 0 0 0 1px var(--primary-hover-color) inset;\n}\n.wrapper_6954ea7ffa:focus:not(.focus-visible_2d489141dd) {\n  outline: none;\n}\n.wrapper_6954ea7ffa.highlighted_f0233a3659, .wrapper_6954ea7ffa:hover:not(.disabled_8dc302c9fa):not(.readOnly_70f974691d) {\n  background-color: var(--primary-background-hover-color);\n}\n.wrapper_6954ea7ffa.disabled_8dc302c9fa {\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n}\n.wrapper_6954ea7ffa.readOnly_70f974691d {\n  cursor: default;\n}\n.wrapper_6954ea7ffa.selected_c485c592a9 {\n  background-color: var(--primary-selected-color);\n}\n.wrapper_6954ea7ffa.selected_c485c592a9.highlighted_f0233a3659, .wrapper_6954ea7ffa.selected_c485c592a9:hover:not(.disabled_8dc302c9fa):not(.readOnly_70f974691d) {\n  background-color: var(--primary-selected-hover-color);\n}\n.wrapper_6954ea7ffa.small_4a0e2f85d0 {\n  padding: 6px var(--space-8);\n}\n.wrapper_6954ea7ffa.medium_e1dc451cb8 {\n  padding: 9px 12px;\n}\n.wrapper_6954ea7ffa.large_50108c4dba {\n  padding: 13px 12px;\n}\n.wrapper_6954ea7ffa .avatar_d27048b54f,\n.wrapper_6954ea7ffa .icon_6f76cbff6e {\n  flex-shrink: 0;\n}\n.wrapper_6954ea7ffa .indent_ef503d3717 {\n  width: 20px;\n}\n.wrapper_6954ea7ffa .endElement_a1da283047 {\n  padding-inline-start: var(--space-8);\n  margin-inline-start: auto;\n  display: flex;\n}");export{e as default};
 //# sourceMappingURL=BaseItem.module.scss.js.map

package/dist/src/components/BaseItem/hooks/useListItemProps.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useListItemProps.js","sources":["../../../../../src/components/BaseItem/hooks/useListItemProps.ts"],"sourcesContent":["import { useBaseListItem } from \"../../BaseList/context/BaseListContext\";\nimport { type BaseItemProps } from \"../BaseItem.types\";\n\ntype ListItemPropsInput<Item extends Record<string, unknown>> = Pick<\n BaseItemProps<Item>,\n \"id\" \| \"component\" \| \"size\" \| \"highlighted\" \| \"role\" \| \"itemProps\"\n>;\n\ninterface ListItemPropsOutput {\n id: string \| undefined;\n component: string;\n size: \"small\" \| \"medium\" \| \"large\";\n highlighted: boolean;\n role: string \| undefined;\n itemProps: Record<string, unknown>;\n refCallback: ((element: HTMLElement \| null) => void) \| undefined;\n}\n\n/*\n Merges explicit BaseItem props with context values from BaseList.\n * Explicit props always take precedence over context.\n \n @param props - The explicit props passed to BaseItem\n * @returns Merged props with context values as defaults\n */\nexport function useListItemProps<Item extends Record<string, unknown>>(\n props: ListItemPropsInput<Item>\n): ListItemPropsOutput {\n const context = useBaseListItem();\n\n if (!context) {\n return {\n id: props.id,\n component: props.component ?? \"li\",\n size: props.size ?? \"medium\",\n highlighted: props.highlighted ?? false,\n role: props.role,\n itemProps: props.itemProps ?? {},\n refCallback: undefined\n };\n }\n\n return {\n id: props.id ?? context.id,\n component: props.component !== \"li\" ? props.component! : context.component,\n size: props.size !== \"medium\" ? props.size! : context.size,\n highlighted: props.highlighted !== undefined ? props.highlighted : context.highlighted,\n role: props.role ?? context.role,\n itemProps: {\n tabIndex: context.tabIndex,\n ...props.itemProps\n },\n refCallback: context.refCallback\n };\n}\n"],"names":["useListItemProps","props","context","useBaseListItem","id","_e","component","size","highlighted","undefined","role","_f","itemProps","Object","assign","tabIndex","refCallback","_a","_b","_c","_d"],"mappings":"4EAyBM,SAAUA,EACdC,mBAEMC,EAAUC,IAEhB,OAAKD,EAYE,CACLE,~~GAAgB~~,~~UAAZH~~,EAAMG,~~UAAM~~,IAAAC,EAAAA,~~EAAAH~~,EAAQE,GACxBE,UAA+B,OAApBL,EAAMK,UAAqBL,EAAMK,UAAaJ,EAAQI,UACjEC,KAAqB,WAAfN,EAAMM,KAAoBN,EAAMM,KAAQL,EAAQK,KACtDC,iBAAmCC,IAAtBR,EAAMO,YAA4BP,EAAMO,YAAcN,EAAQM,YAC3EE,~~KAAoB~~,~~UAAdT~~,EAAMS,~~YAAQ~~,IAAAC,EAAAA,~~EAAAT~~,EAAQQ,KAC5BE,UAASC,OAAAC,OAAA,CACPC,SAAUb,EAAQa,UACfd,EAAMW,WAEXI,YAAad,EAAQc,aArBd,CACLZ,GAAIH,EAAMG,GACVE,kBAAWW,EAAAhB,EAAMK,yBAAa,KAC9BC,aAAMW,EAAAjB,EAAMM,oBAAQ,SACpBC,oBAAaW,EAAAlB,EAAMO,4BACnBE,KAAMT,EAAMS,KACZE,kBAAWQ,EAAAnB,EAAMW,yBAAa,~~CAAE~~,~~EAChCI~~,iBAAaP,EAgBnB"}
1	+ {"version":3,"file":"useListItemProps.js","sources":["../../../../../src/components/BaseItem/hooks/useListItemProps.ts"],"sourcesContent":["import { useBaseListItem } from \"../../BaseList/context/BaseListContext\";\nimport { type BaseItemProps } from \"../BaseItem.types\";\n\ntype ListItemPropsInput<Item extends Record<string, unknown>> = Pick<\n BaseItemProps<Item>,\n \"id\" \| \"component\" \| \"size\" \| \"highlighted\" \| \"role\" \| \"itemProps\"\n>;\n\ninterface ListItemPropsOutput {\n id: string \| undefined;\n component: string;\n size: \"small\" \| \"medium\" \| \"large\";\n highlighted: boolean;\n role: string \| undefined;\n itemProps: Record<string, unknown>;\n refCallback: ((element: HTMLElement \| null) => void) \| undefined;\n}\n\n/*\n Merges explicit BaseItem props with context values from BaseList.\n * Explicit props always take precedence over context.\n \n @param props - The explicit props passed to BaseItem\n * @returns Merged props with context values as defaults\n */\nexport function useListItemProps<Item extends Record<string, unknown>>(\n props: ListItemPropsInput<Item>\n): ListItemPropsOutput {\n const context = useBaseListItem();\n\n if (!context) {\n return {\n id: props.id,\n component: props.component ?? \"li\",\n size: props.size ?? \"medium\",\n highlighted: props.highlighted ?? false,\n role: props.role,\n itemProps: props.itemProps ?? {},\n refCallback: undefined\n };\n }\n\n return {\n id: props.id ?? context.id,\n component: props.component !== \"li\" ? props.component! : context.component,\n size: props.size !== \"medium\" ? props.size! : context.size,\n highlighted: props.highlighted !== undefined ? props.highlighted : context.highlighted,\n role: props.role ?? context.role,\n itemProps: {\n tabIndex: context.tabIndex,\n ...props.itemProps\n },\n refCallback: context.refCallback\n };\n}\n"],"names":["useListItemProps","props","context","useBaseListItem","id","_e","component","size","highlighted","undefined","role","_f","itemProps","Object","assign","tabIndex","refCallback","_a","_b","_c","_d"],"mappings":"4EAyBM,SAAUA,EACdC,mBAEMC,EAAUC,IAEhB,OAAKD,EAYE,CACLE,GAAY,UAARH,EAAMG,UAAE,IAAAC,EAAAA,EAAIH,EAAQE,GACxBE,UAA+B,OAApBL,EAAMK,UAAqBL,EAAMK,UAAaJ,EAAQI,UACjEC,KAAqB,WAAfN,EAAMM,KAAoBN,EAAMM,KAAQL,EAAQK,KACtDC,iBAAmCC,IAAtBR,EAAMO,YAA4BP,EAAMO,YAAcN,EAAQM,YAC3EE,KAAgB,UAAVT,EAAMS,YAAI,IAAAC,EAAAA,EAAIT,EAAQQ,KAC5BE,UAASC,OAAAC,OAAA,CACPC,SAAUb,EAAQa,UACfd,EAAMW,WAEXI,YAAad,EAAQc,aArBd,CACLZ,GAAIH,EAAMG,GACVE,kBAAWW,EAAAhB,EAAMK,yBAAa,KAC9BC,aAAMW,EAAAjB,EAAMM,oBAAQ,SACpBC,oBAAaW,EAAAlB,EAAMO,4BACnBE,KAAMT,EAAMS,KACZE,kBAAWQ,EAAAnB,EAAMW,yBAAa,CAAA,EAC9BI,iBAAaP,EAgBnB"}