npm - @transferwise/components - Versions diffs - 46.140.0 → 46.141.0 - Mend

@transferwise/components 46.140.0 → 46.141.0

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

Files changed (151) hide show

package/build/avatarWrapper/AvatarWrapper.js CHANGED Viewed

@@ -86,10 +86,9 @@ const AvatarWrapper = ({
   avatarProps,
   badgeProps
 }) => {
-  const [hasImageLoadError, setImageLoadError] = React.useState(false);
+  const [errorUrl, setErrorUrl] = React.useState(undefined);
+  const hasImageLoadError = errorUrl === url;
   const isBusinessProfile = profileType$1 === profileType.ProfileType.BUSINESS;
-  // Reset the errored state when url changes
-  React.useEffect(() => setImageLoadError(false), [url]);
   const getAvatarProps = () => {
     let updatedAvatarProps = avatarProps;
     if (!badgeUrl && !badgeStatusIcon && ariaLabel) {
@@ -104,7 +103,7 @@ const AvatarWrapper = ({
         children: /*#__PURE__*/jsxRuntime.jsx("img", {
           src: url,
           alt: "",
-          onError: () => setImageLoadError(true)
+          onError: () => setErrorUrl(url)
         }),
         ...updatedAvatarProps
       };

package/build/avatarWrapper/AvatarWrapper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AvatarWrapper.js","sources":["../../src/avatarWrapper/AvatarWrapper.tsx"],"sourcesContent":["import { Person, Briefcase as BriefcaseIcon } from '@transferwise/icons';\nimport { useState, ~~useEffect~~ } from 'react';\n\nimport Avatar, { AvatarProps, AvatarType } from '../avatar';\nimport Badge, { BadgeProps } from '../badge';\nimport {\n ProfileType,\n ProfileTypePersonal,\n ProfileTypeBusiness,\n Size,\n Sentiment,\n getInitials,\n Status,\n} from '../common';\nimport StatusIcon from '../statusIcon/StatusIcon';\n\ninterface OptionalBadgeProps extends Omit<BadgeProps, 'badge'> {\n url?: string;\n ariaLabel?: string;\n altText?: string;\n statusIcon?: Sentiment \| Status.PENDING;\n}\n\nconst OptionalBadge = ({\n url,\n altText,\n statusIcon,\n children,\n ariaLabel,\n ...rest\n}: OptionalBadgeProps) => {\n if (url) {\n return (\n <Badge aria-label={ariaLabel} badge={<img src={url} alt={altText} />} {...rest}>\n {children}\n </Badge>\n );\n }\n if (statusIcon) {\n return (\n <Badge\n aria-label={ariaLabel}\n badge={<StatusIcon sentiment={statusIcon} size={Size.SMALL} />}\n {...rest}\n >\n {children}\n </Badge>\n );\n }\n return <>{children}</>;\n};\n\nexport type AvatarWrapperProps = {\n url?: string;\n 'aria-label'?: string;\n profileType?: ProfileTypeBusiness \| ProfileTypePersonal;\n profileId?: string;\n name?: string;\n avatarProps?: AvatarProps;\n badgeProps?: BadgeProps;\n} & (\n \| {\n badgeUrl: string;\n badgeAltText: string;\n badgeStatusIcon?: never;\n }\n \| {\n badgeUrl?: never;\n badgeAltText?: never;\n badgeStatusIcon: Sentiment \| Status.PENDING;\n }\n \| {\n badgeUrl?: never;\n badgeAltText?: never;\n badgeStatusIcon?: never;\n }\n);\n\n/*\n @deprecated Use `AvatarView` component instead\n */\nconst AvatarWrapper = ({\n url,\n 'aria-label': ariaLabel,\n profileType,\n profileId,\n badgeUrl,\n badgeAltText,\n badgeStatusIcon,\n name,\n avatarProps,\n badgeProps,\n}: AvatarWrapperProps) => {\n const [~~hasImageLoadError~~, ~~setImageLoadError~~] = useState(~~false~~);\n const ~~isBusinessProfile~~ = ~~profileType~~ === ~~ProfileType.BUSINESS~~;\n\n // ~~Reset~~ ~~the~~ ~~errored~~ ~~state~~ ~~when url changes\n useEffect(() => setImageLoadError(false), [url])~~;\n\n const getAvatarProps = () => {\n let updatedAvatarProps = avatarProps;\n if (!badgeUrl && !badgeStatusIcon && ariaLabel) {\n updatedAvatarProps = { ...updatedAvatarProps, 'aria-label': ariaLabel };\n }\n if (url && !hasImageLoadError) {\n return {\n type: AvatarType.THUMBNAIL,\n children: <img src={url} alt=\"\" onError={() => ~~setImageLoadError~~(~~true~~)} />,\n ...updatedAvatarProps,\n };\n }\n if (profileType) {\n return {\n type: AvatarType.ICON,\n children: isBusinessProfile ? <BriefcaseIcon size=\"24\" /> : <Person size=\"24\" />,\n ...updatedAvatarProps,\n };\n }\n if (name) {\n return {\n type: AvatarType.INITIALS,\n children: <>{getInitials(name)}</>,\n backgroundColorSeed: profileId?.toString(),\n ...updatedAvatarProps,\n };\n }\n return {\n type: AvatarType.ICON,\n children: <Person size=\"24\" />,\n ...updatedAvatarProps,\n };\n };\n\n return (\n <OptionalBadge\n url={badgeUrl}\n ariaLabel={ariaLabel}\n altText={badgeAltText}\n statusIcon={badgeStatusIcon}\n {...badgeProps}\n >\n <Avatar size={Size.MEDIUM} {...getAvatarProps()} />\n </OptionalBadge>\n );\n};\n\nexport default AvatarWrapper;\n"],"names":["OptionalBadge","url","altText","statusIcon","children","ariaLabel","rest","_jsx","Badge","badge","src","alt","StatusIcon","sentiment","size","Size","SMALL","_Fragment","AvatarWrapper","profileType","profileId","badgeUrl","badgeAltText","badgeStatusIcon","name","avatarProps","badgeProps","~~hasImageLoadError~~","~~setImageLoadError~~","useState","isBusinessProfile","ProfileType","BUSINESS","~~useEffect","~~getAvatarProps","updatedAvatarProps","type","AvatarType","THUMBNAIL","onError","ICON","BriefcaseIcon","Person","INITIALS","getInitials","backgroundColorSeed","toString","Avatar","MEDIUM"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBA,MAAMA,aAAa,GAAGA,CAAC;EACrBC,GAAG;EACHC,OAAO;EACPC,UAAU;EACVC,QAAQ;EACRC,SAAS;EACT,GAAGC;AAAI,CACY,KAAI;AACvB,EAAA,IAAIL,GAAG,EAAE;IACP,oBACEM,cAAA,CAACC,aAAK,EAAA;AAAC,MAAA,YAAA,EAAYH,SAAU;AAACI,MAAAA,KAAK,eAAEF,cAAA,CAAA,KAAA,EAAA;AAAKG,QAAAA,GAAG,EAAET,GAAI;AAACU,QAAAA,GAAG,EAAET;AAAQ,QAAI;AAAA,MAAA,GAAKI,IAAI;AAAAF,MAAAA,QAAA,EAC3EA;AAAQ,KACJ,CAAC;AAEZ,EAAA;AACA,EAAA,IAAID,UAAU,EAAE;IACd,oBACEI,cAAA,CAACC,aAAK,EAAA;AACJ,MAAA,YAAA,EAAYH,SAAU;MACtBI,KAAK,eAAEF,cAAA,CAACK,kBAAU,EAAA;AAACC,QAAAA,SAAS,EAAEV,UAAW;QAACW,IAAI,EAAEC,SAAI,CAACC;AAAM,QAAI;AAAA,MAAA,GAC3DV,IAAI;AAAAF,MAAAA,QAAA,EAEPA;AAAQ,KACJ,CAAC;AAEZ,EAAA;EACA,oBAAOG,cAAA,CAAAU,mBAAA,EAAA;AAAAb,IAAAA,QAAA,EAAGA;AAAQ,IAAI;AACxB,CAAC;AA4BD;;AAEG;AACH,MAAMc,aAAa,GAAGA,CAAC;EACrBjB,GAAG;AACH,EAAA,YAAY,EAAEI,SAAS;eACvBc,aAAW;EACXC,SAAS;EACTC,QAAQ;EACRC,YAAY;EACZC,eAAe;EACfC,IAAI;EACJC,WAAW;AACXC,EAAAA;AAAU,CACS,KAAI;EACvB,MAAM,CAACC,~~iBAAiB~~,EAAEC,~~iBAAiB~~,CAAC,GAAGC,cAAQ,~~CAAC~~,~~KAAK~~,CAAC;~~AAC9D~~,EAAA,MAAMC,iBAAiB,~~GAAGX~~,~~aAAW~~,~~KAAKY~~,~~uBAAW,CAACC,QAAQ~~;~~AAE9D;EACAC~~,~~eAAS~~,~~CAAC~~,~~MAAML,~~iBAAiB,~~CAAC~~,~~KAAK~~,~~CAAC~~,~~EAAE~~,~~CAAC3B~~,~~GAAG,CAAC,CAAC~~;~~EAEhD~~,~~MAAMiC~~,cAAc,GAAGA,MAAK;IAC1B,IAAIC,kBAAkB,~~GAAGV~~,WAAW;AACpC,IAAA,IAAI,CAACJ,QAAQ,IAAI,CAACE,eAAe,IAAIlB,SAAS,EAAE;~~AAC9C8B~~,MAAAA,kBAAkB,GAAG;AAAE,QAAA,GAAGA,kBAAkB;AAAE,QAAA,YAAY,~~EAAE9B~~;OAAW;AACzE,IAAA;AACA,IAAA,IAAIJ,GAAG,IAAI,~~CAAC0B~~,iBAAiB,EAAE;MAC7B,OAAO;~~QACLS~~,IAAI,EAAEC,sBAAU,CAACC,SAAS;~~AAC1BlC~~,QAAAA,QAAQ,eAAEG,cAAA,CAAA,KAAA,EAAA;AAAKG,UAAAA,GAAG,EAAET,GAAI;AAACU,UAAAA,GAAG,EAAC,EAAE;~~AAAC4B~~,UAAAA,OAAO,EAAEA,~~MAAMX~~,~~iBAAiB~~,~~CAAC~~,~~IAAI~~;AAAE,SAAA,CAAG;~~QAC1E~~,~~GAAGO~~;OACJ;AACH,IAAA;AACA,IAAA,~~IAAIhB~~,aAAW,EAAE;MACf,OAAO;~~QACLiB~~,IAAI,EAAEC,sBAAU,CAACG,IAAI;~~AACrBpC~~,QAAAA,QAAQ,~~EAAE0B~~,iBAAiB,~~gBAAGvB~~,cAAA,~~CAACkC~~,eAAa,EAAA;~~AAAC3B~~,UAAAA,IAAI,EAAC;AAAI,SAAA,CAAG,gBAAGP,cAAA,~~CAACmC~~,YAAM,EAAA;~~AAAC5B~~,UAAAA,IAAI,EAAC;AAAI,SAAA,CAAG;QAChF,~~GAAGqB~~;OACJ;AACH,IAAA;AACA,IAAA,~~IAAIX~~,IAAI,EAAE;MACR,OAAO;~~QACLY~~,IAAI,EAAEC,sBAAU,CAACM,QAAQ;~~QACzBvC~~,QAAQ,eAAEG,cAAA,CAAAU,mBAAA,EAAA;UAAAb,QAAA,~~EAAGwC~~,oBAAW,~~CAACpB~~,IAAI;AAAC,SAAC,CAAG;~~AAClCqB~~,QAAAA,mBAAmB,~~EAAEzB~~,SAAS,~~EAAE0B~~,QAAQ,EAAE;QAC1C,GAAGX;OACJ;AACH,IAAA;IACA,OAAO;MACLC,IAAI,EAAEC,sBAAU,CAACG,IAAI;~~MACrBpC~~,QAAQ,eAAEG,cAAA,~~CAACmC~~,YAAM,EAAA;~~AAAC5B~~,QAAAA,IAAI,EAAC;AAAI,OAAA,CAAG;MAC9B,~~GAAGqB~~;KACJ;EACH,CAAC;EAED,~~oBACE5B~~,cAAA,CAACP,aAAa,EAAA;AACZC,IAAAA,GAAG,EAAEoB,QAAS;AACdhB,IAAAA,SAAS,EAAEA,SAAU;AACrBH,IAAAA,OAAO,EAAEoB,YAAa;AACtBnB,IAAAA,UAAU,EAAEoB,eAAgB;AAAA,IAAA,GACxBG,UAAU;IAAAtB,QAAA,eAEdG,cAAA,~~CAACwC~~,cAAM,EAAA;~~MAACjC~~,IAAI,EAAEC,SAAI,~~CAACiC~~,MAAO;AAAA,MAAA,GAAKd,cAAc;KAAG;AAClD,GAAe,CAAC;AAEpB;;;;"}
1	+ {"version":3,"file":"AvatarWrapper.js","sources":["../../src/avatarWrapper/AvatarWrapper.tsx"],"sourcesContent":["import { Person, Briefcase as BriefcaseIcon } from '@transferwise/icons';\nimport { useState } from 'react';\n\nimport Avatar, { AvatarProps, AvatarType } from '../avatar';\nimport Badge, { BadgeProps } from '../badge';\nimport {\n ProfileType,\n ProfileTypePersonal,\n ProfileTypeBusiness,\n Size,\n Sentiment,\n getInitials,\n Status,\n} from '../common';\nimport StatusIcon from '../statusIcon/StatusIcon';\n\ninterface OptionalBadgeProps extends Omit<BadgeProps, 'badge'> {\n url?: string;\n ariaLabel?: string;\n altText?: string;\n statusIcon?: Sentiment \| Status.PENDING;\n}\n\nconst OptionalBadge = ({\n url,\n altText,\n statusIcon,\n children,\n ariaLabel,\n ...rest\n}: OptionalBadgeProps) => {\n if (url) {\n return (\n <Badge aria-label={ariaLabel} badge={<img src={url} alt={altText} />} {...rest}>\n {children}\n </Badge>\n );\n }\n if (statusIcon) {\n return (\n <Badge\n aria-label={ariaLabel}\n badge={<StatusIcon sentiment={statusIcon} size={Size.SMALL} />}\n {...rest}\n >\n {children}\n </Badge>\n );\n }\n return <>{children}</>;\n};\n\nexport type AvatarWrapperProps = {\n url?: string;\n 'aria-label'?: string;\n profileType?: ProfileTypeBusiness \| ProfileTypePersonal;\n profileId?: string;\n name?: string;\n avatarProps?: AvatarProps;\n badgeProps?: BadgeProps;\n} & (\n \| {\n badgeUrl: string;\n badgeAltText: string;\n badgeStatusIcon?: never;\n }\n \| {\n badgeUrl?: never;\n badgeAltText?: never;\n badgeStatusIcon: Sentiment \| Status.PENDING;\n }\n \| {\n badgeUrl?: never;\n badgeAltText?: never;\n badgeStatusIcon?: never;\n }\n);\n\n/*\n @deprecated Use `AvatarView` component instead\n */\nconst AvatarWrapper = ({\n url,\n 'aria-label': ariaLabel,\n profileType,\n profileId,\n badgeUrl,\n badgeAltText,\n badgeStatusIcon,\n name,\n avatarProps,\n badgeProps,\n}: AvatarWrapperProps) => {\n const [errorUrl, setErrorUrl] = useState<string \| undefined>(undefined);\n\n const hasImageLoadError = errorUrl === url;\n const isBusinessProfile = profileType === ProfileType.BUSINESS;\n\n const getAvatarProps = () => {\n let updatedAvatarProps = avatarProps;\n if (!badgeUrl && !badgeStatusIcon && ariaLabel) {\n updatedAvatarProps = { ...updatedAvatarProps, 'aria-label': ariaLabel };\n }\n if (url && !hasImageLoadError) {\n return {\n type: AvatarType.THUMBNAIL,\n children: <img src={url} alt=\"\" onError={() => setErrorUrl(url)} />,\n ...updatedAvatarProps,\n };\n }\n if (profileType) {\n return {\n type: AvatarType.ICON,\n children: isBusinessProfile ? <BriefcaseIcon size=\"24\" /> : <Person size=\"24\" />,\n ...updatedAvatarProps,\n };\n }\n if (name) {\n return {\n type: AvatarType.INITIALS,\n children: <>{getInitials(name)}</>,\n backgroundColorSeed: profileId?.toString(),\n ...updatedAvatarProps,\n };\n }\n return {\n type: AvatarType.ICON,\n children: <Person size=\"24\" />,\n ...updatedAvatarProps,\n };\n };\n\n return (\n <OptionalBadge\n url={badgeUrl}\n ariaLabel={ariaLabel}\n altText={badgeAltText}\n statusIcon={badgeStatusIcon}\n {...badgeProps}\n >\n <Avatar size={Size.MEDIUM} {...getAvatarProps()} />\n </OptionalBadge>\n );\n};\n\nexport default AvatarWrapper;\n"],"names":["OptionalBadge","url","altText","statusIcon","children","ariaLabel","rest","_jsx","Badge","badge","src","alt","StatusIcon","sentiment","size","Size","SMALL","_Fragment","AvatarWrapper","profileType","profileId","badgeUrl","badgeAltText","badgeStatusIcon","name","avatarProps","badgeProps","errorUrl","setErrorUrl","useState","undefined","hasImageLoadError","isBusinessProfile","ProfileType","BUSINESS","getAvatarProps","updatedAvatarProps","type","AvatarType","THUMBNAIL","onError","ICON","BriefcaseIcon","Person","INITIALS","getInitials","backgroundColorSeed","toString","Avatar","MEDIUM"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBA,MAAMA,aAAa,GAAGA,CAAC;EACrBC,GAAG;EACHC,OAAO;EACPC,UAAU;EACVC,QAAQ;EACRC,SAAS;EACT,GAAGC;AAAI,CACY,KAAI;AACvB,EAAA,IAAIL,GAAG,EAAE;IACP,oBACEM,cAAA,CAACC,aAAK,EAAA;AAAC,MAAA,YAAA,EAAYH,SAAU;AAACI,MAAAA,KAAK,eAAEF,cAAA,CAAA,KAAA,EAAA;AAAKG,QAAAA,GAAG,EAAET,GAAI;AAACU,QAAAA,GAAG,EAAET;AAAQ,QAAI;AAAA,MAAA,GAAKI,IAAI;AAAAF,MAAAA,QAAA,EAC3EA;AAAQ,KACJ,CAAC;AAEZ,EAAA;AACA,EAAA,IAAID,UAAU,EAAE;IACd,oBACEI,cAAA,CAACC,aAAK,EAAA;AACJ,MAAA,YAAA,EAAYH,SAAU;MACtBI,KAAK,eAAEF,cAAA,CAACK,kBAAU,EAAA;AAACC,QAAAA,SAAS,EAAEV,UAAW;QAACW,IAAI,EAAEC,SAAI,CAACC;AAAM,QAAI;AAAA,MAAA,GAC3DV,IAAI;AAAAF,MAAAA,QAAA,EAEPA;AAAQ,KACJ,CAAC;AAEZ,EAAA;EACA,oBAAOG,cAAA,CAAAU,mBAAA,EAAA;AAAAb,IAAAA,QAAA,EAAGA;AAAQ,IAAI;AACxB,CAAC;AA4BD;;AAEG;AACH,MAAMc,aAAa,GAAGA,CAAC;EACrBjB,GAAG;AACH,EAAA,YAAY,EAAEI,SAAS;eACvBc,aAAW;EACXC,SAAS;EACTC,QAAQ;EACRC,YAAY;EACZC,eAAe;EACfC,IAAI;EACJC,WAAW;AACXC,EAAAA;AAAU,CACS,KAAI;EACvB,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAGC,cAAQ,CAAqBC,SAAS,CAAC;AAEvE,EAAA,MAAMC,iBAAiB,GAAGJ,QAAQ,KAAK1B,GAAG;AAC1C,EAAA,MAAM+B,iBAAiB,GAAGb,aAAW,KAAKc,uBAAW,CAACC,QAAQ;EAE9D,MAAMC,cAAc,GAAGA,MAAK;IAC1B,IAAIC,kBAAkB,GAAGX,WAAW;AACpC,IAAA,IAAI,CAACJ,QAAQ,IAAI,CAACE,eAAe,IAAIlB,SAAS,EAAE;AAC9C+B,MAAAA,kBAAkB,GAAG;AAAE,QAAA,GAAGA,kBAAkB;AAAE,QAAA,YAAY,EAAE/B;OAAW;AACzE,IAAA;AACA,IAAA,IAAIJ,GAAG,IAAI,CAAC8B,iBAAiB,EAAE;MAC7B,OAAO;QACLM,IAAI,EAAEC,sBAAU,CAACC,SAAS;AAC1BnC,QAAAA,QAAQ,eAAEG,cAAA,CAAA,KAAA,EAAA;AAAKG,UAAAA,GAAG,EAAET,GAAI;AAACU,UAAAA,GAAG,EAAC,EAAE;AAAC6B,UAAAA,OAAO,EAAEA,MAAMZ,WAAW,CAAC3B,GAAG;AAAE,SAAA,CAAG;QACnE,GAAGmC;OACJ;AACH,IAAA;AACA,IAAA,IAAIjB,aAAW,EAAE;MACf,OAAO;QACLkB,IAAI,EAAEC,sBAAU,CAACG,IAAI;AACrBrC,QAAAA,QAAQ,EAAE4B,iBAAiB,gBAAGzB,cAAA,CAACmC,eAAa,EAAA;AAAC5B,UAAAA,IAAI,EAAC;AAAI,SAAA,CAAG,gBAAGP,cAAA,CAACoC,YAAM,EAAA;AAAC7B,UAAAA,IAAI,EAAC;AAAI,SAAA,CAAG;QAChF,GAAGsB;OACJ;AACH,IAAA;AACA,IAAA,IAAIZ,IAAI,EAAE;MACR,OAAO;QACLa,IAAI,EAAEC,sBAAU,CAACM,QAAQ;QACzBxC,QAAQ,eAAEG,cAAA,CAAAU,mBAAA,EAAA;UAAAb,QAAA,EAAGyC,oBAAW,CAACrB,IAAI;AAAC,SAAC,CAAG;AAClCsB,QAAAA,mBAAmB,EAAE1B,SAAS,EAAE2B,QAAQ,EAAE;QAC1C,GAAGX;OACJ;AACH,IAAA;IACA,OAAO;MACLC,IAAI,EAAEC,sBAAU,CAACG,IAAI;MACrBrC,QAAQ,eAAEG,cAAA,CAACoC,YAAM,EAAA;AAAC7B,QAAAA,IAAI,EAAC;AAAI,OAAA,CAAG;MAC9B,GAAGsB;KACJ;EACH,CAAC;EAED,oBACE7B,cAAA,CAACP,aAAa,EAAA;AACZC,IAAAA,GAAG,EAAEoB,QAAS;AACdhB,IAAAA,SAAS,EAAEA,SAAU;AACrBH,IAAAA,OAAO,EAAEoB,YAAa;AACtBnB,IAAAA,UAAU,EAAEoB,eAAgB;AAAA,IAAA,GACxBG,UAAU;IAAAtB,QAAA,eAEdG,cAAA,CAACyC,cAAM,EAAA;MAAClC,IAAI,EAAEC,SAAI,CAACkC,MAAO;AAAA,MAAA,GAAKd,cAAc;KAAG;AAClD,GAAe,CAAC;AAEpB;;;;"}

package/build/avatarWrapper/AvatarWrapper.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
 import { Briefcase, Person } from '@transferwise/icons';
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { AvatarType } from '../avatar/avatarTypes.mjs';
 import Avatar from '../avatar/Avatar.mjs';
 import Badge from '../badge/Badge.mjs';
@@ -82,10 +82,9 @@ const AvatarWrapper = ({
   avatarProps,
   badgeProps
 }) => {
-  const [hasImageLoadError, setImageLoadError] = useState(false);
+  const [errorUrl, setErrorUrl] = useState(undefined);
+  const hasImageLoadError = errorUrl === url;
   const isBusinessProfile = profileType === ProfileType.BUSINESS;
-  // Reset the errored state when url changes
-  useEffect(() => setImageLoadError(false), [url]);
   const getAvatarProps = () => {
     let updatedAvatarProps = avatarProps;
     if (!badgeUrl && !badgeStatusIcon && ariaLabel) {
@@ -100,7 +99,7 @@ const AvatarWrapper = ({
         children: /*#__PURE__*/jsx("img", {
           src: url,
           alt: "",
-          onError: () => setImageLoadError(true)
+          onError: () => setErrorUrl(url)
         }),
         ...updatedAvatarProps
       };

package/build/avatarWrapper/AvatarWrapper.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AvatarWrapper.mjs","sources":["../../src/avatarWrapper/AvatarWrapper.tsx"],"sourcesContent":["import { Person, Briefcase as BriefcaseIcon } from '@transferwise/icons';\nimport { useState, ~~useEffect~~ } from 'react';\n\nimport Avatar, { AvatarProps, AvatarType } from '../avatar';\nimport Badge, { BadgeProps } from '../badge';\nimport {\n ProfileType,\n ProfileTypePersonal,\n ProfileTypeBusiness,\n Size,\n Sentiment,\n getInitials,\n Status,\n} from '../common';\nimport StatusIcon from '../statusIcon/StatusIcon';\n\ninterface OptionalBadgeProps extends Omit<BadgeProps, 'badge'> {\n url?: string;\n ariaLabel?: string;\n altText?: string;\n statusIcon?: Sentiment \| Status.PENDING;\n}\n\nconst OptionalBadge = ({\n url,\n altText,\n statusIcon,\n children,\n ariaLabel,\n ...rest\n}: OptionalBadgeProps) => {\n if (url) {\n return (\n <Badge aria-label={ariaLabel} badge={<img src={url} alt={altText} />} {...rest}>\n {children}\n </Badge>\n );\n }\n if (statusIcon) {\n return (\n <Badge\n aria-label={ariaLabel}\n badge={<StatusIcon sentiment={statusIcon} size={Size.SMALL} />}\n {...rest}\n >\n {children}\n </Badge>\n );\n }\n return <>{children}</>;\n};\n\nexport type AvatarWrapperProps = {\n url?: string;\n 'aria-label'?: string;\n profileType?: ProfileTypeBusiness \| ProfileTypePersonal;\n profileId?: string;\n name?: string;\n avatarProps?: AvatarProps;\n badgeProps?: BadgeProps;\n} & (\n \| {\n badgeUrl: string;\n badgeAltText: string;\n badgeStatusIcon?: never;\n }\n \| {\n badgeUrl?: never;\n badgeAltText?: never;\n badgeStatusIcon: Sentiment \| Status.PENDING;\n }\n \| {\n badgeUrl?: never;\n badgeAltText?: never;\n badgeStatusIcon?: never;\n }\n);\n\n/*\n @deprecated Use `AvatarView` component instead\n */\nconst AvatarWrapper = ({\n url,\n 'aria-label': ariaLabel,\n profileType,\n profileId,\n badgeUrl,\n badgeAltText,\n badgeStatusIcon,\n name,\n avatarProps,\n badgeProps,\n}: AvatarWrapperProps) => {\n const [~~hasImageLoadError~~, ~~setImageLoadError~~] = useState(~~false~~);\n const ~~isBusinessProfile~~ = ~~profileType~~ === ~~ProfileType.BUSINESS~~;\n\n // ~~Reset~~ ~~the~~ ~~errored~~ ~~state~~ ~~when url changes\n useEffect(() => setImageLoadError(false), [url])~~;\n\n const getAvatarProps = () => {\n let updatedAvatarProps = avatarProps;\n if (!badgeUrl && !badgeStatusIcon && ariaLabel) {\n updatedAvatarProps = { ...updatedAvatarProps, 'aria-label': ariaLabel };\n }\n if (url && !hasImageLoadError) {\n return {\n type: AvatarType.THUMBNAIL,\n children: <img src={url} alt=\"\" onError={() => ~~setImageLoadError~~(~~true~~)} />,\n ...updatedAvatarProps,\n };\n }\n if (profileType) {\n return {\n type: AvatarType.ICON,\n children: isBusinessProfile ? <BriefcaseIcon size=\"24\" /> : <Person size=\"24\" />,\n ...updatedAvatarProps,\n };\n }\n if (name) {\n return {\n type: AvatarType.INITIALS,\n children: <>{getInitials(name)}</>,\n backgroundColorSeed: profileId?.toString(),\n ...updatedAvatarProps,\n };\n }\n return {\n type: AvatarType.ICON,\n children: <Person size=\"24\" />,\n ...updatedAvatarProps,\n };\n };\n\n return (\n <OptionalBadge\n url={badgeUrl}\n ariaLabel={ariaLabel}\n altText={badgeAltText}\n statusIcon={badgeStatusIcon}\n {...badgeProps}\n >\n <Avatar size={Size.MEDIUM} {...getAvatarProps()} />\n </OptionalBadge>\n );\n};\n\nexport default AvatarWrapper;\n"],"names":["OptionalBadge","url","altText","statusIcon","children","ariaLabel","rest","_jsx","Badge","badge","src","alt","StatusIcon","sentiment","size","Size","SMALL","_Fragment","AvatarWrapper","profileType","profileId","badgeUrl","badgeAltText","badgeStatusIcon","name","avatarProps","badgeProps","~~hasImageLoadError~~","~~setImageLoadError~~","useState","isBusinessProfile","ProfileType","BUSINESS","~~useEffect","~~getAvatarProps","updatedAvatarProps","type","AvatarType","THUMBNAIL","onError","ICON","BriefcaseIcon","Person","INITIALS","getInitials","backgroundColorSeed","toString","Avatar","MEDIUM"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBA,MAAMA,aAAa,GAAGA,CAAC;EACrBC,GAAG;EACHC,OAAO;EACPC,UAAU;EACVC,QAAQ;EACRC,SAAS;EACT,GAAGC;AAAI,CACY,KAAI;AACvB,EAAA,IAAIL,GAAG,EAAE;IACP,oBACEM,GAAA,CAACC,KAAK,EAAA;AAAC,MAAA,YAAA,EAAYH,SAAU;AAACI,MAAAA,KAAK,eAAEF,GAAA,CAAA,KAAA,EAAA;AAAKG,QAAAA,GAAG,EAAET,GAAI;AAACU,QAAAA,GAAG,EAAET;AAAQ,QAAI;AAAA,MAAA,GAAKI,IAAI;AAAAF,MAAAA,QAAA,EAC3EA;AAAQ,KACJ,CAAC;AAEZ,EAAA;AACA,EAAA,IAAID,UAAU,EAAE;IACd,oBACEI,GAAA,CAACC,KAAK,EAAA;AACJ,MAAA,YAAA,EAAYH,SAAU;MACtBI,KAAK,eAAEF,GAAA,CAACK,UAAU,EAAA;AAACC,QAAAA,SAAS,EAAEV,UAAW;QAACW,IAAI,EAAEC,IAAI,CAACC;AAAM,QAAI;AAAA,MAAA,GAC3DV,IAAI;AAAAF,MAAAA,QAAA,EAEPA;AAAQ,KACJ,CAAC;AAEZ,EAAA;EACA,oBAAOG,GAAA,CAAAU,QAAA,EAAA;AAAAb,IAAAA,QAAA,EAAGA;AAAQ,IAAI;AACxB,CAAC;AA4BD;;AAEG;AACH,MAAMc,aAAa,GAAGA,CAAC;EACrBjB,GAAG;AACH,EAAA,YAAY,EAAEI,SAAS;EACvBc,WAAW;EACXC,SAAS;EACTC,QAAQ;EACRC,YAAY;EACZC,eAAe;EACfC,IAAI;EACJC,WAAW;AACXC,EAAAA;AAAU,CACS,KAAI;EACvB,MAAM,CAACC,~~iBAAiB~~,EAAEC,~~iBAAiB~~,CAAC,GAAGC,QAAQ,~~CAAC~~,~~KAAK~~,CAAC;~~AAC9D~~,EAAA,MAAMC,iBAAiB,~~GAAGX~~,~~WAAW~~,~~KAAKY~~,~~WAAW,CAACC,QAAQ~~;~~AAE9D;EACAC~~,~~SAAS~~,~~CAAC~~,~~MAAML,~~iBAAiB,~~CAAC~~,~~KAAK~~,~~CAAC~~,~~EAAE~~,~~CAAC3B~~,~~GAAG,CAAC,CAAC~~;~~EAEhD~~,~~MAAMiC~~,cAAc,GAAGA,MAAK;IAC1B,IAAIC,kBAAkB,~~GAAGV~~,WAAW;AACpC,IAAA,IAAI,CAACJ,QAAQ,IAAI,CAACE,eAAe,IAAIlB,SAAS,EAAE;~~AAC9C8B~~,MAAAA,kBAAkB,GAAG;AAAE,QAAA,GAAGA,kBAAkB;AAAE,QAAA,YAAY,~~EAAE9B~~;OAAW;AACzE,IAAA;AACA,IAAA,IAAIJ,GAAG,IAAI,~~CAAC0B~~,iBAAiB,EAAE;MAC7B,OAAO;~~QACLS~~,IAAI,EAAEC,UAAU,CAACC,SAAS;~~AAC1BlC~~,QAAAA,QAAQ,eAAEG,GAAA,CAAA,KAAA,EAAA;AAAKG,UAAAA,GAAG,EAAET,GAAI;AAACU,UAAAA,GAAG,EAAC,EAAE;~~AAAC4B~~,UAAAA,OAAO,EAAEA,~~MAAMX~~,~~iBAAiB~~,~~CAAC~~,~~IAAI~~;AAAE,SAAA,CAAG;~~QAC1E~~,~~GAAGO~~;OACJ;AACH,IAAA;AACA,IAAA,~~IAAIhB~~,WAAW,EAAE;MACf,OAAO;~~QACLiB~~,IAAI,EAAEC,UAAU,CAACG,IAAI;~~AACrBpC~~,QAAAA,QAAQ,~~EAAE0B~~,iBAAiB,~~gBAAGvB~~,GAAA,~~CAACkC~~,SAAa,EAAA;~~AAAC3B~~,UAAAA,IAAI,EAAC;AAAI,SAAA,CAAG,gBAAGP,GAAA,~~CAACmC~~,MAAM,EAAA;~~AAAC5B~~,UAAAA,IAAI,EAAC;AAAI,SAAA,CAAG;QAChF,~~GAAGqB~~;OACJ;AACH,IAAA;AACA,IAAA,~~IAAIX~~,IAAI,EAAE;MACR,OAAO;~~QACLY~~,IAAI,EAAEC,UAAU,CAACM,QAAQ;~~QACzBvC~~,QAAQ,eAAEG,GAAA,CAAAU,QAAA,EAAA;UAAAb,QAAA,~~EAAGwC~~,WAAW,~~CAACpB~~,IAAI;AAAC,SAAC,CAAG;~~AAClCqB~~,QAAAA,mBAAmB,~~EAAEzB~~,SAAS,~~EAAE0B~~,QAAQ,EAAE;QAC1C,GAAGX;OACJ;AACH,IAAA;IACA,OAAO;MACLC,IAAI,EAAEC,UAAU,CAACG,IAAI;~~MACrBpC~~,QAAQ,eAAEG,GAAA,~~CAACmC~~,MAAM,EAAA;~~AAAC5B~~,QAAAA,IAAI,EAAC;AAAI,OAAA,CAAG;MAC9B,~~GAAGqB~~;KACJ;EACH,CAAC;EAED,~~oBACE5B~~,GAAA,CAACP,aAAa,EAAA;AACZC,IAAAA,GAAG,EAAEoB,QAAS;AACdhB,IAAAA,SAAS,EAAEA,SAAU;AACrBH,IAAAA,OAAO,EAAEoB,YAAa;AACtBnB,IAAAA,UAAU,EAAEoB,eAAgB;AAAA,IAAA,GACxBG,UAAU;IAAAtB,QAAA,eAEdG,GAAA,~~CAACwC~~,MAAM,EAAA;~~MAACjC~~,IAAI,EAAEC,IAAI,~~CAACiC~~,MAAO;AAAA,MAAA,GAAKd,cAAc;KAAG;AAClD,GAAe,CAAC;AAEpB;;;;"}
1	+ {"version":3,"file":"AvatarWrapper.mjs","sources":["../../src/avatarWrapper/AvatarWrapper.tsx"],"sourcesContent":["import { Person, Briefcase as BriefcaseIcon } from '@transferwise/icons';\nimport { useState } from 'react';\n\nimport Avatar, { AvatarProps, AvatarType } from '../avatar';\nimport Badge, { BadgeProps } from '../badge';\nimport {\n ProfileType,\n ProfileTypePersonal,\n ProfileTypeBusiness,\n Size,\n Sentiment,\n getInitials,\n Status,\n} from '../common';\nimport StatusIcon from '../statusIcon/StatusIcon';\n\ninterface OptionalBadgeProps extends Omit<BadgeProps, 'badge'> {\n url?: string;\n ariaLabel?: string;\n altText?: string;\n statusIcon?: Sentiment \| Status.PENDING;\n}\n\nconst OptionalBadge = ({\n url,\n altText,\n statusIcon,\n children,\n ariaLabel,\n ...rest\n}: OptionalBadgeProps) => {\n if (url) {\n return (\n <Badge aria-label={ariaLabel} badge={<img src={url} alt={altText} />} {...rest}>\n {children}\n </Badge>\n );\n }\n if (statusIcon) {\n return (\n <Badge\n aria-label={ariaLabel}\n badge={<StatusIcon sentiment={statusIcon} size={Size.SMALL} />}\n {...rest}\n >\n {children}\n </Badge>\n );\n }\n return <>{children}</>;\n};\n\nexport type AvatarWrapperProps = {\n url?: string;\n 'aria-label'?: string;\n profileType?: ProfileTypeBusiness \| ProfileTypePersonal;\n profileId?: string;\n name?: string;\n avatarProps?: AvatarProps;\n badgeProps?: BadgeProps;\n} & (\n \| {\n badgeUrl: string;\n badgeAltText: string;\n badgeStatusIcon?: never;\n }\n \| {\n badgeUrl?: never;\n badgeAltText?: never;\n badgeStatusIcon: Sentiment \| Status.PENDING;\n }\n \| {\n badgeUrl?: never;\n badgeAltText?: never;\n badgeStatusIcon?: never;\n }\n);\n\n/*\n @deprecated Use `AvatarView` component instead\n */\nconst AvatarWrapper = ({\n url,\n 'aria-label': ariaLabel,\n profileType,\n profileId,\n badgeUrl,\n badgeAltText,\n badgeStatusIcon,\n name,\n avatarProps,\n badgeProps,\n}: AvatarWrapperProps) => {\n const [errorUrl, setErrorUrl] = useState<string \| undefined>(undefined);\n\n const hasImageLoadError = errorUrl === url;\n const isBusinessProfile = profileType === ProfileType.BUSINESS;\n\n const getAvatarProps = () => {\n let updatedAvatarProps = avatarProps;\n if (!badgeUrl && !badgeStatusIcon && ariaLabel) {\n updatedAvatarProps = { ...updatedAvatarProps, 'aria-label': ariaLabel };\n }\n if (url && !hasImageLoadError) {\n return {\n type: AvatarType.THUMBNAIL,\n children: <img src={url} alt=\"\" onError={() => setErrorUrl(url)} />,\n ...updatedAvatarProps,\n };\n }\n if (profileType) {\n return {\n type: AvatarType.ICON,\n children: isBusinessProfile ? <BriefcaseIcon size=\"24\" /> : <Person size=\"24\" />,\n ...updatedAvatarProps,\n };\n }\n if (name) {\n return {\n type: AvatarType.INITIALS,\n children: <>{getInitials(name)}</>,\n backgroundColorSeed: profileId?.toString(),\n ...updatedAvatarProps,\n };\n }\n return {\n type: AvatarType.ICON,\n children: <Person size=\"24\" />,\n ...updatedAvatarProps,\n };\n };\n\n return (\n <OptionalBadge\n url={badgeUrl}\n ariaLabel={ariaLabel}\n altText={badgeAltText}\n statusIcon={badgeStatusIcon}\n {...badgeProps}\n >\n <Avatar size={Size.MEDIUM} {...getAvatarProps()} />\n </OptionalBadge>\n );\n};\n\nexport default AvatarWrapper;\n"],"names":["OptionalBadge","url","altText","statusIcon","children","ariaLabel","rest","_jsx","Badge","badge","src","alt","StatusIcon","sentiment","size","Size","SMALL","_Fragment","AvatarWrapper","profileType","profileId","badgeUrl","badgeAltText","badgeStatusIcon","name","avatarProps","badgeProps","errorUrl","setErrorUrl","useState","undefined","hasImageLoadError","isBusinessProfile","ProfileType","BUSINESS","getAvatarProps","updatedAvatarProps","type","AvatarType","THUMBNAIL","onError","ICON","BriefcaseIcon","Person","INITIALS","getInitials","backgroundColorSeed","toString","Avatar","MEDIUM"],"mappings":"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"}

package/build/button/LegacyButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LegacyButton.js","sources":["../../src/button/LegacyButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ElementType, forwardRef, MouseEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n Size,\n ControlType,\n Priority,\n ControlTypeAccent,\n ControlTypeNegative,\n ControlTypePositive,\n PriorityPrimary,\n PrioritySecondary,\n PriorityTertiary,\n SizeExtraSmall,\n SizeSmall,\n SizeMedium,\n SizeLarge,\n} from '../common';\nimport ProcessIndicator from '../processIndicator';\n\nimport messages from '../i18n/commonMessages/Button.messages';\nimport { typeClassMap, priorityClassMap } from './classMap';\nimport { establishNewPriority, establishNewType, logDeprecationNotices } from './legacyUtils';\nimport { ButtonReferenceType } from './Button.types';\n\n/** @deprecated /\ntype DeprecatedTypes = 'primary' \| 'pay' \| 'secondary' \| 'danger' \| 'link';\n\n/* @deprecated /\ntype DeprecatedSizes = SizeExtraSmall;\n\n/\n @deprecated Use new button instead of these APIs.\n * @example\n * ```\n * import { Button, ButtonProps } from '@transferwise/components';\n \n <Button v2>...</Button>\n * ```\n /\nexport type CommonProps = {\n v2?: false;\n\n /* Makes the button take up the full width of its container /\n block?: boolean;\n\n /\n The `target` attribute for HTML anchor.\n * If set to `_blank`, `rel=\"noopener noreferrer\"` is automatically added to the rendered node.\n /\n target?: string;\n /\n Toggles the disabled state\n * @default false\n /\n\n disabled?: boolean;\n /\n Toggles the loading state\n * @default false\n /\n loading?: boolean;\n type?: ControlTypeAccent \| ControlTypeNegative \| ControlTypePositive \| DeprecatedTypes \| null;\n priority?: PriorityPrimary \| PrioritySecondary \| PriorityTertiary \| null;\n size?: SizeSmall \| SizeMedium \| SizeLarge \| DeprecatedSizes;\n htmlType?: 'submit' \| 'reset' \| 'button';\n};\n\n/\n @deprecated Use new button instead of APIs.\n * @example\n * ```\n * import { Button, ButtonProps } from '@transferwise/components';\n \n <Button v2>...</Button>\n * ```\n /\nexport type ButtonProps = CommonProps &\n Omit<React.ComponentPropsWithRef<'button'>, 'type'> & {\n as?: 'button';\n };\n\ntype AnchorProps = CommonProps &\n Omit<React.ComponentPropsWithRef<'a'>, 'type'> & {\n as?: 'a';\n };\n\n/\n @deprecated Use new button instead of APIs.\n * @example\n * ```\n * import { Button, ButtonProps } from '@transferwise/components';\n \n <Button v2>...</Button>\n * ```\n /\nexport type LegacyButtonProps = ButtonProps \| AnchorProps;\n\n/\n @deprecated Use new Button component via `<Button v2 .. />` and new props.\n /\nconst LegacyButton = forwardRef<ButtonReferenceType, LegacyButtonProps>(\n (\n {\n as: component = 'button',\n block = false,\n children,\n className,\n disabled,\n loading = false,\n priority = Priority.PRIMARY,\n size = Size.MEDIUM,\n type = ControlType.ACCENT,\n onClick,\n ...rest\n }: LegacyButtonProps,\n ref,\n ) => {\n const intl = useIntl();\n\n logDeprecationNotices({ size, type });\n\n const newType = establishNewType(type);\n const newPriority = establishNewPriority(priority, type);\n\n const classes = clsx(\n `btn btn-${size}`,\n `np-btn np-btn-${size}`,\n {\n 'btn-loading': loading,\n 'btn-block np-btn-block': block,\n disabled,\n },\n // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n typeClassMap[newType],\n // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n priorityClassMap[newPriority],\n className,\n );\n\n function processIndicatorSize() {\n return ['sm', 'xs'].includes(size) ? 'xxs' : 'xs';\n }\n\n const Element = (component as ElementType) ?? 'button';\n let props;\n\n if (Element === 'button') {\n const { htmlType = 'button', ...restProps } = rest as ButtonProps;\n props = {\n ...restProps,\n disabled,\n 'aria-disabled': loading,\n type: htmlType,\n };\n } else {\n props = {\n ...rest,\n 'aria-disabled': loading,\n } as AnchorProps;\n }\n\n /\n Ensures that the button cannot be activated in loading or disabled mode,\n * when `aria-disabled` might be used over the `disabled` HTML attribute\n */\n const handleClick =\n (handler: LegacyButtonProps['onClick']) =>\n (event: MouseEvent<HTMLButtonElement> & MouseEvent<HTMLAnchorElement>) => {\n if (disabled \|\| loading) {\n event.preventDefault();\n } else if (typeof handler === 'function') {\n handler(event);\n }\n };\n\n return (\n <Element\n ref={ref ~~as React.Ref<ButtonReferenceType>~~}\n className={classes}\n onClick={handleClick(onClick)}\n {...props}\n aria-live={loading ? 'polite' : 'off'}\n aria-busy={loading}\n aria-label={loading ? intl.formatMessage(messages.loadingAriaLabel) : rest['aria-label']}\n >\n {children}\n {loading && (\n <ProcessIndicator\n size={processIndicatorSize()}\n className=\"btn-loader\"\n data-testid=\"ButtonProgressIndicator\"\n />\n )}\n </Element>\n );\n },\n);\n\nexport default LegacyButton;\n"],"names":["LegacyButton","forwardRef","as","component","block","children","className","disabled","loading","priority","Priority","PRIMARY","size","Size","MEDIUM","type","ControlType","ACCENT","onClick","rest","ref","intl","useIntl","logDeprecationNotices","newType","establishNewType","newPriority","establishNewPriority","classes","clsx","typeClassMap","priorityClassMap","processIndicatorSize","includes","Element","props","htmlType","restProps","handleClick","handler","event","preventDefault","_jsxs","formatMessage","messages","loadingAriaLabel","_jsx","ProcessIndicator"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsGA,MAAMA,YAAY,gBAAGC,gBAAU,CAC7B,CACE;EACEC,EAAE,EAAEC,SAAS,GAAG,QAAQ;AACxBC,EAAAA,KAAK,GAAG,KAAK;EACbC,QAAQ;EACRC,SAAS;EACTC,QAAQ;AACRC,EAAAA,OAAO,GAAG,KAAK;EACfC,QAAQ,GAAGC,gBAAQ,CAACC,OAAO;QAC3BC,MAAI,GAAGC,SAAI,CAACC,MAAM;EAClBC,IAAI,GAAGC,mBAAW,CAACC,MAAM;EACzBC,OAAO;EACP,GAAGC;AAAI,CACW,EACpBC,GAAG,KACD;AACF,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE;AAEtBC,EAAAA,iCAAqB,CAAC;UAAEX,MAAI;AAAEG,IAAAA;AAAI,GAAE,CAAC;AAErC,EAAA,MAAMS,OAAO,GAAGC,4BAAgB,CAACV,IAAI,CAAC;AACtC,EAAA,MAAMW,WAAW,GAAGC,gCAAoB,CAAClB,QAAQ,EAAEM,IAAI,CAAC;EAExD,MAAMa,OAAO,GAAGC,SAAI,CAClB,CAAA,QAAA,EAAWjB,MAAI,CAAA,CAAE,EACjB,CAAA,cAAA,EAAiBA,MAAI,CAAA,CAAE,EACvB;AACE,IAAA,aAAa,EAAEJ,OAAO;AACtB,IAAA,wBAAwB,EAAEJ,KAAK;AAC/BG,IAAAA;GACD;AACD;EACAuB,qBAAY,CAACN,OAAO,CAAC;AACrB;AACAO,EAAAA,yBAAgB,CAACL,WAAW,CAAC,EAC7BpB,SAAS,CACV;EAED,SAAS0B,oBAAoBA,GAAA;AAC3B,IAAA,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAACC,QAAQ,CAACrB,MAAI,CAAC,GAAG,KAAK,GAAG,IAAI;AACnD,EAAA;AAEA,EAAA,MAAMsB,OAAO,GAAI/B,SAAyB,IAAI,QAAQ;AACtD,EAAA,IAAIgC,KAAK;EAET,IAAID,OAAO,KAAK,QAAQ,EAAE;IACxB,MAAM;AAAEE,MAAAA,QAAQ,GAAG,QAAQ;MAAE,GAAGC;AAAS,KAAE,GAAGlB,IAAmB;AACjEgB,IAAAA,KAAK,GAAG;AACN,MAAA,GAAGE,SAAS;MACZ9B,QAAQ;AACR,MAAA,eAAe,EAAEC,OAAO;AACxBO,MAAAA,IAAI,EAAEqB;KACP;AACH,EAAA,CAAC,MAAM;AACLD,IAAAA,KAAK,GAAG;AACN,MAAA,GAAGhB,IAAI;AACP,MAAA,eAAe,EAAEX;KACH;AAClB,EAAA;AAEA;;;AAGG;AACH,EAAA,MAAM8B,WAAW,GACdC,OAAqC,IACrCC,KAAoE,IAAI;IACvE,IAAIjC,QAAQ,IAAIC,OAAO,EAAE;MACvBgC,KAAK,CAACC,cAAc,EAAE;AACxB,IAAA,CAAC,MAAM,IAAI,OAAOF,OAAO,KAAK,UAAU,EAAE;MACxCA,OAAO,CAACC,KAAK,CAAC;AAChB,IAAA;EACF,CAAC;EAEH,oBACEE,eAAA,CAACR,OAAO,EAAA;AACNd,IAAAA,GAAG,EAAEA,~~GAAsC~~;~~AAC3Cd~~,IAAAA,SAAS,EAAEsB,OAAQ;AACnBV,IAAAA,OAAO,EAAEoB,WAAW,CAACpB,OAAO,CAAE;AAAA,IAAA,GAC1BiB,KAAK;AACT,IAAA,WAAA,EAAW3B,OAAO,GAAG,QAAQ,GAAG,KAAM;AACtC,IAAA,WAAA,EAAWA,OAAQ;AACnB,IAAA,YAAA,EAAYA,OAAO,GAAGa,IAAI,CAACsB,aAAa,CAACC,uBAAQ,CAACC,gBAAgB,CAAC,GAAG1B,IAAI,CAAC,YAAY,CAAE;AAAAd,IAAAA,QAAA,GAExFA,QAAQ,EACRG,OAAO,iBACNsC,cAAA,CAACC,wBAAgB,EAAA;MACfnC,IAAI,EAAEoB,oBAAoB,EAAG;AAC7B1B,MAAAA,SAAS,EAAC,YAAY;MACtB,aAAA,EAAY;AAAyB,KAAA,CAExC;AAAA,GACM,CAAC;AAEd,CAAC;;;;"}
1	+ {"version":3,"file":"LegacyButton.js","sources":["../../src/button/LegacyButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ElementType, forwardRef, MouseEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n Size,\n ControlType,\n Priority,\n ControlTypeAccent,\n ControlTypeNegative,\n ControlTypePositive,\n PriorityPrimary,\n PrioritySecondary,\n PriorityTertiary,\n SizeExtraSmall,\n SizeSmall,\n SizeMedium,\n SizeLarge,\n} from '../common';\nimport ProcessIndicator from '../processIndicator';\n\nimport messages from '../i18n/commonMessages/Button.messages';\nimport { typeClassMap, priorityClassMap } from './classMap';\nimport { establishNewPriority, establishNewType, logDeprecationNotices } from './legacyUtils';\nimport { ButtonReferenceType } from './Button.types';\n\n/** @deprecated /\ntype DeprecatedTypes = 'primary' \| 'pay' \| 'secondary' \| 'danger' \| 'link';\n\n/* @deprecated /\ntype DeprecatedSizes = SizeExtraSmall;\n\n/\n @deprecated Use new button instead of these APIs.\n * @example\n * ```\n * import { Button, ButtonProps } from '@transferwise/components';\n \n <Button v2>...</Button>\n * ```\n /\nexport type CommonProps = {\n v2?: false;\n\n /* Makes the button take up the full width of its container /\n block?: boolean;\n\n /\n The `target` attribute for HTML anchor.\n * If set to `_blank`, `rel=\"noopener noreferrer\"` is automatically added to the rendered node.\n /\n target?: string;\n /\n Toggles the disabled state\n * @default false\n /\n\n disabled?: boolean;\n /\n Toggles the loading state\n * @default false\n /\n loading?: boolean;\n type?: ControlTypeAccent \| ControlTypeNegative \| ControlTypePositive \| DeprecatedTypes \| null;\n priority?: PriorityPrimary \| PrioritySecondary \| PriorityTertiary \| null;\n size?: SizeSmall \| SizeMedium \| SizeLarge \| DeprecatedSizes;\n htmlType?: 'submit' \| 'reset' \| 'button';\n};\n\n/\n @deprecated Use new button instead of APIs.\n * @example\n * ```\n * import { Button, ButtonProps } from '@transferwise/components';\n \n <Button v2>...</Button>\n * ```\n /\nexport type ButtonProps = CommonProps &\n Omit<React.ComponentPropsWithRef<'button'>, 'type'> & {\n as?: 'button';\n };\n\ntype AnchorProps = CommonProps &\n Omit<React.ComponentPropsWithRef<'a'>, 'type'> & {\n as?: 'a';\n };\n\n/\n @deprecated Use new button instead of APIs.\n * @example\n * ```\n * import { Button, ButtonProps } from '@transferwise/components';\n \n <Button v2>...</Button>\n * ```\n /\nexport type LegacyButtonProps = ButtonProps \| AnchorProps;\n\n/\n @deprecated Use new Button component via `<Button v2 .. />` and new props.\n /\nconst LegacyButton = forwardRef<ButtonReferenceType, LegacyButtonProps>(\n (\n {\n as: component = 'button',\n block = false,\n children,\n className,\n disabled,\n loading = false,\n priority = Priority.PRIMARY,\n size = Size.MEDIUM,\n type = ControlType.ACCENT,\n onClick,\n ...rest\n }: LegacyButtonProps,\n ref,\n ) => {\n const intl = useIntl();\n\n logDeprecationNotices({ size, type });\n\n const newType = establishNewType(type);\n const newPriority = establishNewPriority(priority, type);\n\n const classes = clsx(\n `btn btn-${size}`,\n `np-btn np-btn-${size}`,\n {\n 'btn-loading': loading,\n 'btn-block np-btn-block': block,\n disabled,\n },\n // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n typeClassMap[newType],\n // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n priorityClassMap[newPriority],\n className,\n );\n\n function processIndicatorSize() {\n return ['sm', 'xs'].includes(size) ? 'xxs' : 'xs';\n }\n\n const Element = (component as ElementType) ?? 'button';\n let props;\n\n if (Element === 'button') {\n const { htmlType = 'button', ...restProps } = rest as ButtonProps;\n props = {\n ...restProps,\n disabled,\n 'aria-disabled': loading,\n type: htmlType,\n };\n } else {\n props = {\n ...rest,\n 'aria-disabled': loading,\n } as AnchorProps;\n }\n\n /\n Ensures that the button cannot be activated in loading or disabled mode,\n * when `aria-disabled` might be used over the `disabled` HTML attribute\n */\n const handleClick =\n (handler: LegacyButtonProps['onClick']) =>\n (event: MouseEvent<HTMLButtonElement> & MouseEvent<HTMLAnchorElement>) => {\n if (disabled \|\| loading) {\n event.preventDefault();\n } else if (typeof handler === 'function') {\n handler(event);\n }\n };\n\n return (\n <Element\n ref={ref}\n className={classes}\n onClick={handleClick(onClick)}\n {...props}\n aria-live={loading ? 'polite' : 'off'}\n aria-busy={loading}\n aria-label={loading ? intl.formatMessage(messages.loadingAriaLabel) : rest['aria-label']}\n >\n {children}\n {loading && (\n <ProcessIndicator\n size={processIndicatorSize()}\n className=\"btn-loader\"\n data-testid=\"ButtonProgressIndicator\"\n />\n )}\n </Element>\n );\n },\n);\n\nexport default LegacyButton;\n"],"names":["LegacyButton","forwardRef","as","component","block","children","className","disabled","loading","priority","Priority","PRIMARY","size","Size","MEDIUM","type","ControlType","ACCENT","onClick","rest","ref","intl","useIntl","logDeprecationNotices","newType","establishNewType","newPriority","establishNewPriority","classes","clsx","typeClassMap","priorityClassMap","processIndicatorSize","includes","Element","props","htmlType","restProps","handleClick","handler","event","preventDefault","_jsxs","formatMessage","messages","loadingAriaLabel","_jsx","ProcessIndicator"],"mappings":"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"}

package/build/button/LegacyButton.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LegacyButton.mjs","sources":["../../src/button/LegacyButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ElementType, forwardRef, MouseEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n Size,\n ControlType,\n Priority,\n ControlTypeAccent,\n ControlTypeNegative,\n ControlTypePositive,\n PriorityPrimary,\n PrioritySecondary,\n PriorityTertiary,\n SizeExtraSmall,\n SizeSmall,\n SizeMedium,\n SizeLarge,\n} from '../common';\nimport ProcessIndicator from '../processIndicator';\n\nimport messages from '../i18n/commonMessages/Button.messages';\nimport { typeClassMap, priorityClassMap } from './classMap';\nimport { establishNewPriority, establishNewType, logDeprecationNotices } from './legacyUtils';\nimport { ButtonReferenceType } from './Button.types';\n\n/** @deprecated /\ntype DeprecatedTypes = 'primary' \| 'pay' \| 'secondary' \| 'danger' \| 'link';\n\n/* @deprecated /\ntype DeprecatedSizes = SizeExtraSmall;\n\n/\n @deprecated Use new button instead of these APIs.\n * @example\n * ```\n * import { Button, ButtonProps } from '@transferwise/components';\n \n <Button v2>...</Button>\n * ```\n /\nexport type CommonProps = {\n v2?: false;\n\n /* Makes the button take up the full width of its container /\n block?: boolean;\n\n /\n The `target` attribute for HTML anchor.\n * If set to `_blank`, `rel=\"noopener noreferrer\"` is automatically added to the rendered node.\n /\n target?: string;\n /\n Toggles the disabled state\n * @default false\n /\n\n disabled?: boolean;\n /\n Toggles the loading state\n * @default false\n /\n loading?: boolean;\n type?: ControlTypeAccent \| ControlTypeNegative \| ControlTypePositive \| DeprecatedTypes \| null;\n priority?: PriorityPrimary \| PrioritySecondary \| PriorityTertiary \| null;\n size?: SizeSmall \| SizeMedium \| SizeLarge \| DeprecatedSizes;\n htmlType?: 'submit' \| 'reset' \| 'button';\n};\n\n/\n @deprecated Use new button instead of APIs.\n * @example\n * ```\n * import { Button, ButtonProps } from '@transferwise/components';\n \n <Button v2>...</Button>\n * ```\n /\nexport type ButtonProps = CommonProps &\n Omit<React.ComponentPropsWithRef<'button'>, 'type'> & {\n as?: 'button';\n };\n\ntype AnchorProps = CommonProps &\n Omit<React.ComponentPropsWithRef<'a'>, 'type'> & {\n as?: 'a';\n };\n\n/\n @deprecated Use new button instead of APIs.\n * @example\n * ```\n * import { Button, ButtonProps } from '@transferwise/components';\n \n <Button v2>...</Button>\n * ```\n /\nexport type LegacyButtonProps = ButtonProps \| AnchorProps;\n\n/\n @deprecated Use new Button component via `<Button v2 .. />` and new props.\n /\nconst LegacyButton = forwardRef<ButtonReferenceType, LegacyButtonProps>(\n (\n {\n as: component = 'button',\n block = false,\n children,\n className,\n disabled,\n loading = false,\n priority = Priority.PRIMARY,\n size = Size.MEDIUM,\n type = ControlType.ACCENT,\n onClick,\n ...rest\n }: LegacyButtonProps,\n ref,\n ) => {\n const intl = useIntl();\n\n logDeprecationNotices({ size, type });\n\n const newType = establishNewType(type);\n const newPriority = establishNewPriority(priority, type);\n\n const classes = clsx(\n `btn btn-${size}`,\n `np-btn np-btn-${size}`,\n {\n 'btn-loading': loading,\n 'btn-block np-btn-block': block,\n disabled,\n },\n // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n typeClassMap[newType],\n // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n priorityClassMap[newPriority],\n className,\n );\n\n function processIndicatorSize() {\n return ['sm', 'xs'].includes(size) ? 'xxs' : 'xs';\n }\n\n const Element = (component as ElementType) ?? 'button';\n let props;\n\n if (Element === 'button') {\n const { htmlType = 'button', ...restProps } = rest as ButtonProps;\n props = {\n ...restProps,\n disabled,\n 'aria-disabled': loading,\n type: htmlType,\n };\n } else {\n props = {\n ...rest,\n 'aria-disabled': loading,\n } as AnchorProps;\n }\n\n /\n Ensures that the button cannot be activated in loading or disabled mode,\n * when `aria-disabled` might be used over the `disabled` HTML attribute\n */\n const handleClick =\n (handler: LegacyButtonProps['onClick']) =>\n (event: MouseEvent<HTMLButtonElement> & MouseEvent<HTMLAnchorElement>) => {\n if (disabled \|\| loading) {\n event.preventDefault();\n } else if (typeof handler === 'function') {\n handler(event);\n }\n };\n\n return (\n <Element\n ref={ref ~~as React.Ref<ButtonReferenceType>~~}\n className={classes}\n onClick={handleClick(onClick)}\n {...props}\n aria-live={loading ? 'polite' : 'off'}\n aria-busy={loading}\n aria-label={loading ? intl.formatMessage(messages.loadingAriaLabel) : rest['aria-label']}\n >\n {children}\n {loading && (\n <ProcessIndicator\n size={processIndicatorSize()}\n className=\"btn-loader\"\n data-testid=\"ButtonProgressIndicator\"\n />\n )}\n </Element>\n );\n },\n);\n\nexport default LegacyButton;\n"],"names":["LegacyButton","forwardRef","as","component","block","children","className","disabled","loading","priority","Priority","PRIMARY","size","Size","MEDIUM","type","ControlType","ACCENT","onClick","rest","ref","intl","useIntl","logDeprecationNotices","newType","establishNewType","newPriority","establishNewPriority","classes","clsx","typeClassMap","priorityClassMap","processIndicatorSize","includes","Element","props","htmlType","restProps","handleClick","handler","event","preventDefault","_jsxs","formatMessage","messages","loadingAriaLabel","_jsx","ProcessIndicator"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsGA,MAAMA,YAAY,gBAAGC,UAAU,CAC7B,CACE;EACEC,EAAE,EAAEC,SAAS,GAAG,QAAQ;AACxBC,EAAAA,KAAK,GAAG,KAAK;EACbC,QAAQ;EACRC,SAAS;EACTC,QAAQ;AACRC,EAAAA,OAAO,GAAG,KAAK;EACfC,QAAQ,GAAGC,QAAQ,CAACC,OAAO;EAC3BC,IAAI,GAAGC,IAAI,CAACC,MAAM;EAClBC,IAAI,GAAGC,WAAW,CAACC,MAAM;EACzBC,OAAO;EACP,GAAGC;AAAI,CACW,EACpBC,GAAG,KACD;AACF,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE;AAEtBC,EAAAA,qBAAqB,CAAC;IAAEX,IAAI;AAAEG,IAAAA;AAAI,GAAE,CAAC;AAErC,EAAA,MAAMS,OAAO,GAAGC,gBAAgB,CAACV,IAAI,CAAC;AACtC,EAAA,MAAMW,WAAW,GAAGC,oBAAoB,CAAClB,QAAQ,EAAEM,IAAI,CAAC;EAExD,MAAMa,OAAO,GAAGC,IAAI,CAClB,CAAA,QAAA,EAAWjB,IAAI,CAAA,CAAE,EACjB,CAAA,cAAA,EAAiBA,IAAI,CAAA,CAAE,EACvB;AACE,IAAA,aAAa,EAAEJ,OAAO;AACtB,IAAA,wBAAwB,EAAEJ,KAAK;AAC/BG,IAAAA;GACD;AACD;EACAuB,YAAY,CAACN,OAAO,CAAC;AACrB;AACAO,EAAAA,gBAAgB,CAACL,WAAW,CAAC,EAC7BpB,SAAS,CACV;EAED,SAAS0B,oBAAoBA,GAAA;AAC3B,IAAA,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAACC,QAAQ,CAACrB,IAAI,CAAC,GAAG,KAAK,GAAG,IAAI;AACnD,EAAA;AAEA,EAAA,MAAMsB,OAAO,GAAI/B,SAAyB,IAAI,QAAQ;AACtD,EAAA,IAAIgC,KAAK;EAET,IAAID,OAAO,KAAK,QAAQ,EAAE;IACxB,MAAM;AAAEE,MAAAA,QAAQ,GAAG,QAAQ;MAAE,GAAGC;AAAS,KAAE,GAAGlB,IAAmB;AACjEgB,IAAAA,KAAK,GAAG;AACN,MAAA,GAAGE,SAAS;MACZ9B,QAAQ;AACR,MAAA,eAAe,EAAEC,OAAO;AACxBO,MAAAA,IAAI,EAAEqB;KACP;AACH,EAAA,CAAC,MAAM;AACLD,IAAAA,KAAK,GAAG;AACN,MAAA,GAAGhB,IAAI;AACP,MAAA,eAAe,EAAEX;KACH;AAClB,EAAA;AAEA;;;AAGG;AACH,EAAA,MAAM8B,WAAW,GACdC,OAAqC,IACrCC,KAAoE,IAAI;IACvE,IAAIjC,QAAQ,IAAIC,OAAO,EAAE;MACvBgC,KAAK,CAACC,cAAc,EAAE;AACxB,IAAA,CAAC,MAAM,IAAI,OAAOF,OAAO,KAAK,UAAU,EAAE;MACxCA,OAAO,CAACC,KAAK,CAAC;AAChB,IAAA;EACF,CAAC;EAEH,oBACEE,IAAA,CAACR,OAAO,EAAA;AACNd,IAAAA,GAAG,EAAEA,~~GAAsC~~;~~AAC3Cd~~,IAAAA,SAAS,EAAEsB,OAAQ;AACnBV,IAAAA,OAAO,EAAEoB,WAAW,CAACpB,OAAO,CAAE;AAAA,IAAA,GAC1BiB,KAAK;AACT,IAAA,WAAA,EAAW3B,OAAO,GAAG,QAAQ,GAAG,KAAM;AACtC,IAAA,WAAA,EAAWA,OAAQ;AACnB,IAAA,YAAA,EAAYA,OAAO,GAAGa,IAAI,CAACsB,aAAa,CAACC,QAAQ,CAACC,gBAAgB,CAAC,GAAG1B,IAAI,CAAC,YAAY,CAAE;AAAAd,IAAAA,QAAA,GAExFA,QAAQ,EACRG,OAAO,iBACNsC,GAAA,CAACC,gBAAgB,EAAA;MACfnC,IAAI,EAAEoB,oBAAoB,EAAG;AAC7B1B,MAAAA,SAAS,EAAC,YAAY;MACtB,aAAA,EAAY;AAAyB,KAAA,CAExC;AAAA,GACM,CAAC;AAEd,CAAC;;;;"}
1	+ {"version":3,"file":"LegacyButton.mjs","sources":["../../src/button/LegacyButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ElementType, forwardRef, MouseEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n Size,\n ControlType,\n Priority,\n ControlTypeAccent,\n ControlTypeNegative,\n ControlTypePositive,\n PriorityPrimary,\n PrioritySecondary,\n PriorityTertiary,\n SizeExtraSmall,\n SizeSmall,\n SizeMedium,\n SizeLarge,\n} from '../common';\nimport ProcessIndicator from '../processIndicator';\n\nimport messages from '../i18n/commonMessages/Button.messages';\nimport { typeClassMap, priorityClassMap } from './classMap';\nimport { establishNewPriority, establishNewType, logDeprecationNotices } from './legacyUtils';\nimport { ButtonReferenceType } from './Button.types';\n\n/** @deprecated /\ntype DeprecatedTypes = 'primary' \| 'pay' \| 'secondary' \| 'danger' \| 'link';\n\n/* @deprecated /\ntype DeprecatedSizes = SizeExtraSmall;\n\n/\n @deprecated Use new button instead of these APIs.\n * @example\n * ```\n * import { Button, ButtonProps } from '@transferwise/components';\n \n <Button v2>...</Button>\n * ```\n /\nexport type CommonProps = {\n v2?: false;\n\n /* Makes the button take up the full width of its container /\n block?: boolean;\n\n /\n The `target` attribute for HTML anchor.\n * If set to `_blank`, `rel=\"noopener noreferrer\"` is automatically added to the rendered node.\n /\n target?: string;\n /\n Toggles the disabled state\n * @default false\n /\n\n disabled?: boolean;\n /\n Toggles the loading state\n * @default false\n /\n loading?: boolean;\n type?: ControlTypeAccent \| ControlTypeNegative \| ControlTypePositive \| DeprecatedTypes \| null;\n priority?: PriorityPrimary \| PrioritySecondary \| PriorityTertiary \| null;\n size?: SizeSmall \| SizeMedium \| SizeLarge \| DeprecatedSizes;\n htmlType?: 'submit' \| 'reset' \| 'button';\n};\n\n/\n @deprecated Use new button instead of APIs.\n * @example\n * ```\n * import { Button, ButtonProps } from '@transferwise/components';\n \n <Button v2>...</Button>\n * ```\n /\nexport type ButtonProps = CommonProps &\n Omit<React.ComponentPropsWithRef<'button'>, 'type'> & {\n as?: 'button';\n };\n\ntype AnchorProps = CommonProps &\n Omit<React.ComponentPropsWithRef<'a'>, 'type'> & {\n as?: 'a';\n };\n\n/\n @deprecated Use new button instead of APIs.\n * @example\n * ```\n * import { Button, ButtonProps } from '@transferwise/components';\n \n <Button v2>...</Button>\n * ```\n /\nexport type LegacyButtonProps = ButtonProps \| AnchorProps;\n\n/\n @deprecated Use new Button component via `<Button v2 .. />` and new props.\n /\nconst LegacyButton = forwardRef<ButtonReferenceType, LegacyButtonProps>(\n (\n {\n as: component = 'button',\n block = false,\n children,\n className,\n disabled,\n loading = false,\n priority = Priority.PRIMARY,\n size = Size.MEDIUM,\n type = ControlType.ACCENT,\n onClick,\n ...rest\n }: LegacyButtonProps,\n ref,\n ) => {\n const intl = useIntl();\n\n logDeprecationNotices({ size, type });\n\n const newType = establishNewType(type);\n const newPriority = establishNewPriority(priority, type);\n\n const classes = clsx(\n `btn btn-${size}`,\n `np-btn np-btn-${size}`,\n {\n 'btn-loading': loading,\n 'btn-block np-btn-block': block,\n disabled,\n },\n // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n typeClassMap[newType],\n // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n priorityClassMap[newPriority],\n className,\n );\n\n function processIndicatorSize() {\n return ['sm', 'xs'].includes(size) ? 'xxs' : 'xs';\n }\n\n const Element = (component as ElementType) ?? 'button';\n let props;\n\n if (Element === 'button') {\n const { htmlType = 'button', ...restProps } = rest as ButtonProps;\n props = {\n ...restProps,\n disabled,\n 'aria-disabled': loading,\n type: htmlType,\n };\n } else {\n props = {\n ...rest,\n 'aria-disabled': loading,\n } as AnchorProps;\n }\n\n /\n Ensures that the button cannot be activated in loading or disabled mode,\n * when `aria-disabled` might be used over the `disabled` HTML attribute\n */\n const handleClick =\n (handler: LegacyButtonProps['onClick']) =>\n (event: MouseEvent<HTMLButtonElement> & MouseEvent<HTMLAnchorElement>) => {\n if (disabled \|\| loading) {\n event.preventDefault();\n } else if (typeof handler === 'function') {\n handler(event);\n }\n };\n\n return (\n <Element\n ref={ref}\n className={classes}\n onClick={handleClick(onClick)}\n {...props}\n aria-live={loading ? 'polite' : 'off'}\n aria-busy={loading}\n aria-label={loading ? intl.formatMessage(messages.loadingAriaLabel) : rest['aria-label']}\n >\n {children}\n {loading && (\n <ProcessIndicator\n size={processIndicatorSize()}\n className=\"btn-loader\"\n data-testid=\"ButtonProgressIndicator\"\n />\n )}\n </Element>\n );\n },\n);\n\nexport default LegacyButton;\n"],"names":["LegacyButton","forwardRef","as","component","block","children","className","disabled","loading","priority","Priority","PRIMARY","size","Size","MEDIUM","type","ControlType","ACCENT","onClick","rest","ref","intl","useIntl","logDeprecationNotices","newType","establishNewType","newPriority","establishNewPriority","classes","clsx","typeClassMap","priorityClassMap","processIndicatorSize","includes","Element","props","htmlType","restProps","handleClick","handler","event","preventDefault","_jsxs","formatMessage","messages","loadingAriaLabel","_jsx","ProcessIndicator"],"mappings":"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"}

package/build/common/hooks/useHasIntersected/useHasIntersected.js CHANGED Viewed

@@ -20,7 +20,11 @@ const useHasIntersected = ({
   elRef,
   loading = 'eager'
 }) => {
-  const [hasIntersected, setHasIntersected] = React.useState(false);
+  // Initialize as true if IntersectionObserver is not supported
+  // Note: We can't check elRef.current here as it may not be set yet on first render
+  const [hasIntersected, setHasIntersected] = React.useState(() => {
+    return typeof window === 'undefined' || !window.IntersectionObserver;
+  });
   const {
     current
   } = elRef || {};
@@ -41,9 +45,7 @@ const useHasIntersected = ({
     let observer;
     let didCancel = false;
     // Check if window is defined for SSR and Old browsers fallback
-    if (typeof window === 'undefined' || !window.IntersectionObserver || !isValidReference()) {
-      setHasIntersected(true);
-    } else if (current && !didCancel) {
+    if (typeof window !== 'undefined' && window.IntersectionObserver && isValidReference() && current && !didCancel) {
       observer = new IntersectionObserver(handleOnIntersect, ObserverParams);
       observer.observe(current);
     }

package/build/common/hooks/useHasIntersected/useHasIntersected.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useHasIntersected.js","sources":["../../../../src/common/hooks/useHasIntersected/useHasIntersected.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nconst ObserverParams: IntersectionObserverInit = {\n threshold: 0.1,\n};\n\n/*\n useHasIntersected.\n * Use this custom hook to detect when an element has became visible inside the viewport. This hook checks only if the intersection happend.\n * Once the intersection has happened the hook will not return false even if the element gets out of the viewport.\n \n @param {object} params\n * @param {object} [params.elRef] - node object that contains a react reference to the element that needs to be observed.\n * @param {string} [params.loading = 'eager'] - string that contains the type of loading.\n * @param elRef.loading\n * @usage `const [hasIntersected] = useHasIntersected({imageRef,loading});`\n */\nexport const useHasIntersected = ({\n elRef,\n loading = 'eager',\n}: {\n elRef: React.RefObject<HTMLElement>;\n loading?: 'eager' \| 'lazy';\n}) => {\n const [hasIntersected, setHasIntersected] = useState(~~false~~);\n\n const { current } = elRef \|\| {};\n\n const isValidReference = () => {\n return elRef && current;\n };\n\n const handleOnIntersect: IntersectionObserverCallback = (entries, observer) => {\n entries.forEach((entry) => {\n if (entry.isIntersecting) {\n setHasIntersected(true);\n\n if (current) {\n observer.unobserve(current);\n }\n }\n });\n };\n\n useEffect(() => {\n let observer: IntersectionObserver \| undefined;\n let didCancel = false;\n\n // Check if window is defined for SSR and Old browsers fallback\n if (typeof window ~~===~~ 'undefined' ~~\|\| !~~window.IntersectionObserver ~~\|\| !~~isValidReference()) {\n ~~setHasIntersected(true);\n } else if (~~current && !didCancel) {\n observer = new IntersectionObserver(handleOnIntersect, ObserverParams);\n observer.observe(current);\n }\n return () => {\n didCancel = true;\n if (observer && current) {\n observer.unobserve(current);\n }\n };\n }, [elRef]);\n\n if (loading === 'eager') {\n return [false];\n }\n\n return [hasIntersected];\n};\n"],"names":["ObserverParams","threshold","useHasIntersected","elRef","loading","hasIntersected","setHasIntersected","useState","current","isValidReference","handleOnIntersect","entries","observer","forEach","entry","isIntersecting","unobserve","useEffect","didCancel","~~window","IntersectionObserver","~~observe"],"mappings":";;;;AAEA,MAAMA,cAAc,GAA6B;AAC/CC,EAAAA,SAAS,EAAE;CACZ;AAED;;;;;;;;;;AAUG;AACI,MAAMC,iBAAiB,GAAGA,CAAC;EAChCC,KAAK;AACLC,EAAAA,OAAO,GAAG;AAAO,CAIlB,KAAI;~~EACH~~,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC;~~EAE3D~~,MAAM;AAAEC,IAAAA;AAAO,GAAE,~~GAAGL~~,KAAK,IAAI,EAAE;EAE/B,~~MAAMM~~,gBAAgB,GAAGA,MAAK;IAC5B,~~OAAON~~,KAAK,~~IAAIK~~,OAAO;EACzB,CAAC;AAED,EAAA,MAAME,iBAAiB,GAAiCA,CAACC,OAAO,EAAEC,QAAQ,KAAI;AAC5ED,IAAAA,OAAO,CAACE,OAAO,CAAEC,KAAK,IAAI;MACxB,IAAIA,KAAK,CAACC,cAAc,EAAE;~~QACxBT~~,iBAAiB,CAAC,IAAI,CAAC;AAEvB,QAAA,~~IAAIE~~,OAAO,EAAE;AACXI,UAAAA,QAAQ,CAACI,SAAS,CAACR,OAAO,CAAC;AAC7B,QAAA;AACF,MAAA;AACF,IAAA,CAAC,CAAC;EACJ,CAAC;AAEDS,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,IAAIL,QAA0C;IAC9C,IAAIM,SAAS,GAAG,KAAK;AAErB;AACA,IAAA,~~IAAI~~,~~OAAOC~~,MAAM,KAAK,WAAW,~~IAAI~~,~~CAACA,~~MAAM,CAACC,oBAAoB,~~IAAI~~,~~CAACX,~~gBAAgB,EAAE,~~EAAE;MACxFH~~,~~iBAAiB,CAAC,IAAI,CAAC;AACzB,IAAA,CAAC,MAAM,IAAIE,~~OAAO,~~IAAI~~,CAACU,SAAS,~~EAAE~~;~~AAChCN~~,MAAAA,QAAQ,GAAG,~~IAAIQ~~,oBAAoB,~~CAACV~~,iBAAiB,~~EAAEV~~,cAAc,CAAC;~~AACtEY~~,MAAAA,QAAQ,~~CAACS~~,OAAO,~~CAACb~~,OAAO,CAAC;AAC3B,IAAA;AACA,IAAA,OAAO,MAAK;AACVU,MAAAA,SAAS,GAAG,IAAI;MAChB,IAAIN,QAAQ,IAAIJ,OAAO,EAAE;AACvBI,QAAAA,QAAQ,CAACI,SAAS,CAACR,OAAO,CAAC;AAC7B,MAAA;IACF,CAAC;AACH,EAAA,CAAC,EAAE,~~CAACL~~,KAAK,CAAC,CAAC;EAEX,IAAIC,OAAO,KAAK,OAAO,EAAE;IACvB,OAAO,CAAC,KAAK,CAAC;AAChB,EAAA;EAEA,OAAO,CAACC,cAAc,CAAC;AACzB;;;;"}
1	+ {"version":3,"file":"useHasIntersected.js","sources":["../../../../src/common/hooks/useHasIntersected/useHasIntersected.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nconst ObserverParams: IntersectionObserverInit = {\n threshold: 0.1,\n};\n\n/*\n useHasIntersected.\n * Use this custom hook to detect when an element has became visible inside the viewport. This hook checks only if the intersection happend.\n * Once the intersection has happened the hook will not return false even if the element gets out of the viewport.\n \n @param {object} params\n * @param {object} [params.elRef] - node object that contains a react reference to the element that needs to be observed.\n * @param {string} [params.loading = 'eager'] - string that contains the type of loading.\n * @param elRef.loading\n * @usage `const [hasIntersected] = useHasIntersected({imageRef,loading});`\n */\nexport const useHasIntersected = ({\n elRef,\n loading = 'eager',\n}: {\n elRef: React.RefObject<HTMLElement>;\n loading?: 'eager' \| 'lazy';\n}) => {\n // Initialize as true if IntersectionObserver is not supported\n // Note: We can't check elRef.current here as it may not be set yet on first render\n const [hasIntersected, setHasIntersected] = useState(() => {\n return typeof window === 'undefined' \|\| !window.IntersectionObserver;\n });\n\n const { current } = elRef \|\| {};\n\n const isValidReference = () => {\n return elRef && current;\n };\n\n const handleOnIntersect: IntersectionObserverCallback = (entries, observer) => {\n entries.forEach((entry) => {\n if (entry.isIntersecting) {\n setHasIntersected(true);\n\n if (current) {\n observer.unobserve(current);\n }\n }\n });\n };\n\n useEffect(() => {\n let observer: IntersectionObserver \| undefined;\n let didCancel = false;\n\n // Check if window is defined for SSR and Old browsers fallback\n if (\n typeof window !== 'undefined' &&\n window.IntersectionObserver &&\n isValidReference() &&\n current &&\n !didCancel\n ) {\n observer = new IntersectionObserver(handleOnIntersect, ObserverParams);\n observer.observe(current);\n }\n return () => {\n didCancel = true;\n if (observer && current) {\n observer.unobserve(current);\n }\n };\n }, [elRef]);\n\n if (loading === 'eager') {\n return [false];\n }\n\n return [hasIntersected];\n};\n"],"names":["ObserverParams","threshold","useHasIntersected","elRef","loading","hasIntersected","setHasIntersected","useState","window","IntersectionObserver","current","isValidReference","handleOnIntersect","entries","observer","forEach","entry","isIntersecting","unobserve","useEffect","didCancel","observe"],"mappings":";;;;AAEA,MAAMA,cAAc,GAA6B;AAC/CC,EAAAA,SAAS,EAAE;CACZ;AAED;;;;;;;;;;AAUG;AACI,MAAMC,iBAAiB,GAAGA,CAAC;EAChCC,KAAK;AACLC,EAAAA,OAAO,GAAG;AAAO,CAIlB,KAAI;AACH;AACA;EACA,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAGC,cAAQ,CAAC,MAAK;IACxD,OAAO,OAAOC,MAAM,KAAK,WAAW,IAAI,CAACA,MAAM,CAACC,oBAAoB;AACtE,EAAA,CAAC,CAAC;EAEF,MAAM;AAAEC,IAAAA;AAAO,GAAE,GAAGP,KAAK,IAAI,EAAE;EAE/B,MAAMQ,gBAAgB,GAAGA,MAAK;IAC5B,OAAOR,KAAK,IAAIO,OAAO;EACzB,CAAC;AAED,EAAA,MAAME,iBAAiB,GAAiCA,CAACC,OAAO,EAAEC,QAAQ,KAAI;AAC5ED,IAAAA,OAAO,CAACE,OAAO,CAAEC,KAAK,IAAI;MACxB,IAAIA,KAAK,CAACC,cAAc,EAAE;QACxBX,iBAAiB,CAAC,IAAI,CAAC;AAEvB,QAAA,IAAII,OAAO,EAAE;AACXI,UAAAA,QAAQ,CAACI,SAAS,CAACR,OAAO,CAAC;AAC7B,QAAA;AACF,MAAA;AACF,IAAA,CAAC,CAAC;EACJ,CAAC;AAEDS,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,IAAIL,QAA0C;IAC9C,IAAIM,SAAS,GAAG,KAAK;AAErB;AACA,IAAA,IACE,OAAOZ,MAAM,KAAK,WAAW,IAC7BA,MAAM,CAACC,oBAAoB,IAC3BE,gBAAgB,EAAE,IAClBD,OAAO,IACP,CAACU,SAAS,EACV;AACAN,MAAAA,QAAQ,GAAG,IAAIL,oBAAoB,CAACG,iBAAiB,EAAEZ,cAAc,CAAC;AACtEc,MAAAA,QAAQ,CAACO,OAAO,CAACX,OAAO,CAAC;AAC3B,IAAA;AACA,IAAA,OAAO,MAAK;AACVU,MAAAA,SAAS,GAAG,IAAI;MAChB,IAAIN,QAAQ,IAAIJ,OAAO,EAAE;AACvBI,QAAAA,QAAQ,CAACI,SAAS,CAACR,OAAO,CAAC;AAC7B,MAAA;IACF,CAAC;AACH,EAAA,CAAC,EAAE,CAACP,KAAK,CAAC,CAAC;EAEX,IAAIC,OAAO,KAAK,OAAO,EAAE;IACvB,OAAO,CAAC,KAAK,CAAC;AAChB,EAAA;EAEA,OAAO,CAACC,cAAc,CAAC;AACzB;;;;"}

package/build/common/hooks/useHasIntersected/useHasIntersected.mjs CHANGED Viewed

@@ -18,7 +18,11 @@ const useHasIntersected = ({
   elRef,
   loading = 'eager'
 }) => {
-  const [hasIntersected, setHasIntersected] = useState(false);
+  // Initialize as true if IntersectionObserver is not supported
+  // Note: We can't check elRef.current here as it may not be set yet on first render
+  const [hasIntersected, setHasIntersected] = useState(() => {
+    return typeof window === 'undefined' || !window.IntersectionObserver;
+  });
   const {
     current
   } = elRef || {};
@@ -39,9 +43,7 @@ const useHasIntersected = ({
     let observer;
     let didCancel = false;
     // Check if window is defined for SSR and Old browsers fallback
-    if (typeof window === 'undefined' || !window.IntersectionObserver || !isValidReference()) {
-      setHasIntersected(true);
-    } else if (current && !didCancel) {
+    if (typeof window !== 'undefined' && window.IntersectionObserver && isValidReference() && current && !didCancel) {
       observer = new IntersectionObserver(handleOnIntersect, ObserverParams);
       observer.observe(current);
     }

package/build/common/hooks/useHasIntersected/useHasIntersected.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useHasIntersected.mjs","sources":["../../../../src/common/hooks/useHasIntersected/useHasIntersected.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nconst ObserverParams: IntersectionObserverInit = {\n threshold: 0.1,\n};\n\n/*\n useHasIntersected.\n * Use this custom hook to detect when an element has became visible inside the viewport. This hook checks only if the intersection happend.\n * Once the intersection has happened the hook will not return false even if the element gets out of the viewport.\n \n @param {object} params\n * @param {object} [params.elRef] - node object that contains a react reference to the element that needs to be observed.\n * @param {string} [params.loading = 'eager'] - string that contains the type of loading.\n * @param elRef.loading\n * @usage `const [hasIntersected] = useHasIntersected({imageRef,loading});`\n */\nexport const useHasIntersected = ({\n elRef,\n loading = 'eager',\n}: {\n elRef: React.RefObject<HTMLElement>;\n loading?: 'eager' \| 'lazy';\n}) => {\n const [hasIntersected, setHasIntersected] = useState(~~false~~);\n\n const { current } = elRef \|\| {};\n\n const isValidReference = () => {\n return elRef && current;\n };\n\n const handleOnIntersect: IntersectionObserverCallback = (entries, observer) => {\n entries.forEach((entry) => {\n if (entry.isIntersecting) {\n setHasIntersected(true);\n\n if (current) {\n observer.unobserve(current);\n }\n }\n });\n };\n\n useEffect(() => {\n let observer: IntersectionObserver \| undefined;\n let didCancel = false;\n\n // Check if window is defined for SSR and Old browsers fallback\n if (typeof window ~~===~~ 'undefined' ~~\|\| !~~window.IntersectionObserver ~~\|\| !~~isValidReference()) {\n ~~setHasIntersected(true);\n } else if (~~current && !didCancel) {\n observer = new IntersectionObserver(handleOnIntersect, ObserverParams);\n observer.observe(current);\n }\n return () => {\n didCancel = true;\n if (observer && current) {\n observer.unobserve(current);\n }\n };\n }, [elRef]);\n\n if (loading === 'eager') {\n return [false];\n }\n\n return [hasIntersected];\n};\n"],"names":["ObserverParams","threshold","useHasIntersected","elRef","loading","hasIntersected","setHasIntersected","useState","current","isValidReference","handleOnIntersect","entries","observer","forEach","entry","isIntersecting","unobserve","useEffect","didCancel","~~window","IntersectionObserver","~~observe"],"mappings":";;AAEA,MAAMA,cAAc,GAA6B;AAC/CC,EAAAA,SAAS,EAAE;CACZ;AAED;;;;;;;;;;AAUG;AACI,MAAMC,iBAAiB,GAAGA,CAAC;EAChCC,KAAK;AACLC,EAAAA,OAAO,GAAG;AAAO,CAIlB,KAAI;~~EACH~~,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC;~~EAE3D~~,MAAM;AAAEC,IAAAA;AAAO,GAAE,~~GAAGL~~,KAAK,IAAI,EAAE;EAE/B,~~MAAMM~~,gBAAgB,GAAGA,MAAK;IAC5B,~~OAAON~~,KAAK,~~IAAIK~~,OAAO;EACzB,CAAC;AAED,EAAA,MAAME,iBAAiB,GAAiCA,CAACC,OAAO,EAAEC,QAAQ,KAAI;AAC5ED,IAAAA,OAAO,CAACE,OAAO,CAAEC,KAAK,IAAI;MACxB,IAAIA,KAAK,CAACC,cAAc,EAAE;~~QACxBT~~,iBAAiB,CAAC,IAAI,CAAC;AAEvB,QAAA,~~IAAIE~~,OAAO,EAAE;AACXI,UAAAA,QAAQ,CAACI,SAAS,CAACR,OAAO,CAAC;AAC7B,QAAA;AACF,MAAA;AACF,IAAA,CAAC,CAAC;EACJ,CAAC;AAEDS,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAIL,QAA0C;IAC9C,IAAIM,SAAS,GAAG,KAAK;AAErB;AACA,IAAA,~~IAAI~~,~~OAAOC~~,MAAM,KAAK,WAAW,~~IAAI~~,~~CAACA,~~MAAM,CAACC,oBAAoB,~~IAAI~~,~~CAACX,~~gBAAgB,EAAE,~~EAAE;MACxFH~~,~~iBAAiB,CAAC,IAAI,CAAC;AACzB,IAAA,CAAC,MAAM,IAAIE,~~OAAO,~~IAAI~~,CAACU,SAAS,~~EAAE~~;~~AAChCN~~,MAAAA,QAAQ,GAAG,~~IAAIQ~~,oBAAoB,~~CAACV~~,iBAAiB,~~EAAEV~~,cAAc,CAAC;~~AACtEY~~,MAAAA,QAAQ,~~CAACS~~,OAAO,~~CAACb~~,OAAO,CAAC;AAC3B,IAAA;AACA,IAAA,OAAO,MAAK;AACVU,MAAAA,SAAS,GAAG,IAAI;MAChB,IAAIN,QAAQ,IAAIJ,OAAO,EAAE;AACvBI,QAAAA,QAAQ,CAACI,SAAS,CAACR,OAAO,CAAC;AAC7B,MAAA;IACF,CAAC;AACH,EAAA,CAAC,EAAE,~~CAACL~~,KAAK,CAAC,CAAC;EAEX,IAAIC,OAAO,KAAK,OAAO,EAAE;IACvB,OAAO,CAAC,KAAK,CAAC;AAChB,EAAA;EAEA,OAAO,CAACC,cAAc,CAAC;AACzB;;;;"}
1	+ {"version":3,"file":"useHasIntersected.mjs","sources":["../../../../src/common/hooks/useHasIntersected/useHasIntersected.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nconst ObserverParams: IntersectionObserverInit = {\n threshold: 0.1,\n};\n\n/*\n useHasIntersected.\n * Use this custom hook to detect when an element has became visible inside the viewport. This hook checks only if the intersection happend.\n * Once the intersection has happened the hook will not return false even if the element gets out of the viewport.\n \n @param {object} params\n * @param {object} [params.elRef] - node object that contains a react reference to the element that needs to be observed.\n * @param {string} [params.loading = 'eager'] - string that contains the type of loading.\n * @param elRef.loading\n * @usage `const [hasIntersected] = useHasIntersected({imageRef,loading});`\n */\nexport const useHasIntersected = ({\n elRef,\n loading = 'eager',\n}: {\n elRef: React.RefObject<HTMLElement>;\n loading?: 'eager' \| 'lazy';\n}) => {\n // Initialize as true if IntersectionObserver is not supported\n // Note: We can't check elRef.current here as it may not be set yet on first render\n const [hasIntersected, setHasIntersected] = useState(() => {\n return typeof window === 'undefined' \|\| !window.IntersectionObserver;\n });\n\n const { current } = elRef \|\| {};\n\n const isValidReference = () => {\n return elRef && current;\n };\n\n const handleOnIntersect: IntersectionObserverCallback = (entries, observer) => {\n entries.forEach((entry) => {\n if (entry.isIntersecting) {\n setHasIntersected(true);\n\n if (current) {\n observer.unobserve(current);\n }\n }\n });\n };\n\n useEffect(() => {\n let observer: IntersectionObserver \| undefined;\n let didCancel = false;\n\n // Check if window is defined for SSR and Old browsers fallback\n if (\n typeof window !== 'undefined' &&\n window.IntersectionObserver &&\n isValidReference() &&\n current &&\n !didCancel\n ) {\n observer = new IntersectionObserver(handleOnIntersect, ObserverParams);\n observer.observe(current);\n }\n return () => {\n didCancel = true;\n if (observer && current) {\n observer.unobserve(current);\n }\n };\n }, [elRef]);\n\n if (loading === 'eager') {\n return [false];\n }\n\n return [hasIntersected];\n};\n"],"names":["ObserverParams","threshold","useHasIntersected","elRef","loading","hasIntersected","setHasIntersected","useState","window","IntersectionObserver","current","isValidReference","handleOnIntersect","entries","observer","forEach","entry","isIntersecting","unobserve","useEffect","didCancel","observe"],"mappings":";;AAEA,MAAMA,cAAc,GAA6B;AAC/CC,EAAAA,SAAS,EAAE;CACZ;AAED;;;;;;;;;;AAUG;AACI,MAAMC,iBAAiB,GAAGA,CAAC;EAChCC,KAAK;AACLC,EAAAA,OAAO,GAAG;AAAO,CAIlB,KAAI;AACH;AACA;EACA,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAGC,QAAQ,CAAC,MAAK;IACxD,OAAO,OAAOC,MAAM,KAAK,WAAW,IAAI,CAACA,MAAM,CAACC,oBAAoB;AACtE,EAAA,CAAC,CAAC;EAEF,MAAM;AAAEC,IAAAA;AAAO,GAAE,GAAGP,KAAK,IAAI,EAAE;EAE/B,MAAMQ,gBAAgB,GAAGA,MAAK;IAC5B,OAAOR,KAAK,IAAIO,OAAO;EACzB,CAAC;AAED,EAAA,MAAME,iBAAiB,GAAiCA,CAACC,OAAO,EAAEC,QAAQ,KAAI;AAC5ED,IAAAA,OAAO,CAACE,OAAO,CAAEC,KAAK,IAAI;MACxB,IAAIA,KAAK,CAACC,cAAc,EAAE;QACxBX,iBAAiB,CAAC,IAAI,CAAC;AAEvB,QAAA,IAAII,OAAO,EAAE;AACXI,UAAAA,QAAQ,CAACI,SAAS,CAACR,OAAO,CAAC;AAC7B,QAAA;AACF,MAAA;AACF,IAAA,CAAC,CAAC;EACJ,CAAC;AAEDS,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAIL,QAA0C;IAC9C,IAAIM,SAAS,GAAG,KAAK;AAErB;AACA,IAAA,IACE,OAAOZ,MAAM,KAAK,WAAW,IAC7BA,MAAM,CAACC,oBAAoB,IAC3BE,gBAAgB,EAAE,IAClBD,OAAO,IACP,CAACU,SAAS,EACV;AACAN,MAAAA,QAAQ,GAAG,IAAIL,oBAAoB,CAACG,iBAAiB,EAAEZ,cAAc,CAAC;AACtEc,MAAAA,QAAQ,CAACO,OAAO,CAACX,OAAO,CAAC;AAC3B,IAAA;AACA,IAAA,OAAO,MAAK;AACVU,MAAAA,SAAS,GAAG,IAAI;MAChB,IAAIN,QAAQ,IAAIJ,OAAO,EAAE;AACvBI,QAAAA,QAAQ,CAACI,SAAS,CAACR,OAAO,CAAC;AAC7B,MAAA;IACF,CAAC;AACH,EAAA,CAAC,EAAE,CAACP,KAAK,CAAC,CAAC;EAEX,IAAIC,OAAO,KAAK,OAAO,EAAE;IACvB,OAAO,CAAC,KAAK,CAAC;AAChB,EAAA;EAEA,OAAO,CAACC,cAAc,CAAC;AACzB;;;;"}

package/build/common/liveRegion/LiveRegion.js CHANGED Viewed

@@ -52,10 +52,13 @@ const LiveRegion = ({
   const [shouldAnnounce, setShouldAnnounce] = React.useState(false);
   const announcementTrigger = announceOnChange ?? (typeof children === 'string' || typeof children === 'number' ? children : undefined);
   React.useEffect(() => {
-    setShouldAnnounce(false);
     if (ariaLive === 'off') {
       return;
     }
+    // Reset announcement state, then schedule new announcement
+    // This two-step process ensures screen readers re-announce the content
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- Deliberately resetting state to force re-announcement for screen readers
+    setShouldAnnounce(false);
     const timeoutId = window.setTimeout(() => setShouldAnnounce(true), scheduleAnnouncement(ariaLive));
     return () => window.clearTimeout(timeoutId);
   }, [ariaLive, announcementTrigger]);

package/build/common/liveRegion/LiveRegion.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LiveRegion.js","sources":["../../../src/common/liveRegion/LiveRegion.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport type { HTMLAttributes, ReactNode } from 'react';\n\nimport { WDS_LIVE_REGION_DELAY_MS } from '../constants';\n\nexport type AriaLive = 'off' \| 'polite' \| 'assertive';\n\ntype LivePoliteness = Exclude<AriaLive, 'off'>;\n\nconst LIVE_REGION_ROLE_BY_POLITENESS: Record<LivePoliteness, 'status' \| 'alert'> = {\n assertive: 'alert',\n polite: 'status',\n};\n\nlet nextPoliteAnnouncementAt = 0;\nlet nextAssertiveAnnouncementAt = 0;\n\nconst getNextAnnouncementAt = (politeness: LivePoliteness): number => {\n if (politeness === 'polite') {\n return nextPoliteAnnouncementAt;\n }\n\n return nextAssertiveAnnouncementAt;\n};\n\nconst setNextAnnouncementAt = (politeness: LivePoliteness, value: number): void => {\n if (politeness === 'polite') {\n nextPoliteAnnouncementAt = value;\n return;\n }\n\n nextAssertiveAnnouncementAt = value;\n};\n\nexport const resetLiveRegionAnnouncementQueue = (): void => {\n nextPoliteAnnouncementAt = 0;\n nextAssertiveAnnouncementAt = 0;\n};\n\nconst calcAnnouncementDelayMs = (politeness: LivePoliteness, now: number): number => {\n return Math.max(now + WDS_LIVE_REGION_DELAY_MS, getNextAnnouncementAt(politeness)) - now;\n};\n\nconst scheduleAnnouncement = (politeness: LivePoliteness): number => {\n const now = Date.now();\n const delayMs = calcAnnouncementDelayMs(politeness, now);\n setNextAnnouncementAt(politeness, now + delayMs + WDS_LIVE_REGION_DELAY_MS);\n return delayMs;\n};\n\nexport interface LiveRegionProps extends Omit<\n HTMLAttributes<HTMLDivElement>,\n 'role' \| 'aria-live' \| 'aria-atomic'\n> {\n /*\n Determines urgency: 'assertive' interrupts, 'polite' waits for idle, 'off' disables live region.\n /\n 'aria-live': AriaLive;\n /* Optional stable key that triggers a new announcement when it changes. /\n announceOnChange?: string \| number;\n /* Test ID for testing tools /\n 'data-testid'?: string;\n children?: ReactNode;\n}\n\n/\n Renders an ARIA live region with the correct implicit role.\n \n - `aria-live=\"polite\"` → `role=\"status\"`\n * - `aria-live=\"assertive\"` → `role=\"alert\"`\n * - `aria-live=\"off\"` → no live region (renders children unwrapped)\n \n The `role` prop is intentionally excluded from the public API\n * to prevent mismatches between `aria-live` and `role`.\n */\nexport const LiveRegion = ({\n 'aria-live': ariaLive,\n announceOnChange,\n children,\n className,\n ...props\n}: LiveRegionProps) => {\n const [shouldAnnounce, setShouldAnnounce] = useState(false);\n const announcementTrigger =\n announceOnChange ??\n (typeof children === 'string' \|\| typeof children === 'number' ? children : undefined);\n\n useEffect(() => {\n ~~setShouldAnnounce(false);\n\n~~ if (ariaLive === 'off') {\n return;\n }\n\n const timeoutId = window.setTimeout(\n () => setShouldAnnounce(true),\n scheduleAnnouncement(ariaLive),\n );\n\n return () => window.clearTimeout(timeoutId);\n }, [ariaLive, announcementTrigger]);\n\n if (ariaLive === 'off') {\n return <>{children}</>;\n }\n\n return (\n <div\n role={LIVE_REGION_ROLE_BY_POLITENESS[ariaLive]}\n aria-live={ariaLive}\n aria-atomic=\"true\"\n className={`wds-LiveRegion ${className ?? ''}`}\n {...props}\n >\n <div aria-hidden={shouldAnnounce ? undefined : 'true'}>{children}</div>\n </div>\n );\n};\n"],"names":["LIVE_REGION_ROLE_BY_POLITENESS","assertive","polite","nextPoliteAnnouncementAt","nextAssertiveAnnouncementAt","getNextAnnouncementAt","politeness","setNextAnnouncementAt","value","calcAnnouncementDelayMs","now","Math","max","WDS_LIVE_REGION_DELAY_MS","scheduleAnnouncement","Date","delayMs","LiveRegion","ariaLive","announceOnChange","children","className","props","shouldAnnounce","setShouldAnnounce","useState","announcementTrigger","undefined","useEffect","timeoutId","window","setTimeout","clearTimeout","_jsx","_Fragment","role"],"mappings":";;;;;;AASA,MAAMA,8BAA8B,GAA+C;AACjFC,EAAAA,SAAS,EAAE,OAAO;AAClBC,EAAAA,MAAM,EAAE;CACT;AAED,IAAIC,wBAAwB,GAAG,CAAC;AAChC,IAAIC,2BAA2B,GAAG,CAAC;AAEnC,MAAMC,qBAAqB,GAAIC,UAA0B,IAAY;EACnE,IAAIA,UAAU,KAAK,QAAQ,EAAE;AAC3B,IAAA,OAAOH,wBAAwB;AACjC,EAAA;AAEA,EAAA,OAAOC,2BAA2B;AACpC,CAAC;AAED,MAAMG,qBAAqB,GAAGA,CAACD,UAA0B,EAAEE,KAAa,KAAU;EAChF,IAAIF,UAAU,KAAK,QAAQ,EAAE;AAC3BH,IAAAA,wBAAwB,GAAGK,KAAK;AAChC,IAAA;AACF,EAAA;AAEAJ,EAAAA,2BAA2B,GAAGI,KAAK;AACrC,CAAC;AAOD,MAAMC,uBAAuB,GAAGA,CAACH,UAA0B,EAAEI,GAAW,KAAY;AAClF,EAAA,OAAOC,IAAI,CAACC,GAAG,CAACF,GAAG,GAAGG,kCAAwB,EAAER,qBAAqB,CAACC,UAAU,CAAC,CAAC,GAAGI,GAAG;AAC1F,CAAC;AAED,MAAMI,oBAAoB,GAAIR,UAA0B,IAAY;AAClE,EAAA,MAAMI,GAAG,GAAGK,IAAI,CAACL,GAAG,EAAE;AACtB,EAAA,MAAMM,OAAO,GAAGP,uBAAuB,CAACH,UAAU,EAAEI,GAAG,CAAC;EACxDH,qBAAqB,CAACD,UAAU,EAAEI,GAAG,GAAGM,OAAO,GAAGH,kCAAwB,CAAC;AAC3E,EAAA,OAAOG,OAAO;AAChB,CAAC;AAiBD;;;;;;;;;AASG;AACI,MAAMC,UAAU,GAAGA,CAAC;AACzB,EAAA,WAAW,EAAEC,QAAQ;EACrBC,gBAAgB;EAChBC,QAAQ;EACRC,SAAS;EACT,GAAGC;AAAK,CACQ,KAAI;EACpB,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC;AAC3D,EAAA,MAAMC,mBAAmB,GACvBP,gBAAgB,KACf,OAAOC,QAAQ,KAAK,QAAQ,IAAI,OAAOA,QAAQ,KAAK,QAAQ,GAAGA,QAAQ,GAAGO,SAAS,CAAC;AAEvFC,EAAAA,eAAS,CAAC,MAAK;~~IACbJ~~,~~iBAAiB~~,~~CAAC,KAAK,CAAC;IAExB,IAAIN,~~QAAQ,KAAK,KAAK,EAAE;AACtB,MAAA;AACF,IAAA;AAEA,IAAA,~~MAAMW~~,SAAS,GAAGC,MAAM,CAACC,UAAU,CACjC,MAAMP,iBAAiB,CAAC,IAAI,CAAC,EAC7BV,oBAAoB,CAACI,QAAQ,CAAC,CAC/B;AAED,IAAA,OAAO,MAAMY,MAAM,CAACE,YAAY,CAACH,SAAS,CAAC;AAC7C,EAAA,CAAC,EAAE,CAACX,QAAQ,EAAEQ,mBAAmB,CAAC,CAAC;EAEnC,IAAIR,QAAQ,KAAK,KAAK,EAAE;IACtB,oBAAOe,cAAA,CAAAC,mBAAA,EAAA;AAAAd,MAAAA,QAAA,EAAGA;AAAQ,MAAI;AACxB,EAAA;AAEA,EAAA,oBACEa,cAAA,CAAA,KAAA,EAAA;AACEE,IAAAA,IAAI,EAAEnC,8BAA8B,CAACkB,QAAQ,CAAE;AAC/C,IAAA,WAAA,EAAWA,QAAS;AACpB,IAAA,aAAA,EAAY,MAAM;AAClBG,IAAAA,SAAS,EAAE,CAAA,eAAA,EAAkBA,SAAS,IAAI,EAAE,CAAA,CAAG;AAAA,IAAA,GAC3CC,KAAK;AAAAF,IAAAA,QAAA,eAETa,cAAA,CAAA,KAAA,EAAA;AAAK,MAAA,aAAA,EAAaV,cAAc,GAAGI,SAAS,GAAG,MAAO;AAAAP,MAAAA,QAAA,EAAEA;KAAc;AACxE,GAAK,CAAC;AAEV;;;;"}
1	+ {"version":3,"file":"LiveRegion.js","sources":["../../../src/common/liveRegion/LiveRegion.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport type { HTMLAttributes, ReactNode } from 'react';\n\nimport { WDS_LIVE_REGION_DELAY_MS } from '../constants';\n\nexport type AriaLive = 'off' \| 'polite' \| 'assertive';\n\ntype LivePoliteness = Exclude<AriaLive, 'off'>;\n\nconst LIVE_REGION_ROLE_BY_POLITENESS: Record<LivePoliteness, 'status' \| 'alert'> = {\n assertive: 'alert',\n polite: 'status',\n};\n\nlet nextPoliteAnnouncementAt = 0;\nlet nextAssertiveAnnouncementAt = 0;\n\nconst getNextAnnouncementAt = (politeness: LivePoliteness): number => {\n if (politeness === 'polite') {\n return nextPoliteAnnouncementAt;\n }\n\n return nextAssertiveAnnouncementAt;\n};\n\nconst setNextAnnouncementAt = (politeness: LivePoliteness, value: number): void => {\n if (politeness === 'polite') {\n nextPoliteAnnouncementAt = value;\n return;\n }\n\n nextAssertiveAnnouncementAt = value;\n};\n\nexport const resetLiveRegionAnnouncementQueue = (): void => {\n nextPoliteAnnouncementAt = 0;\n nextAssertiveAnnouncementAt = 0;\n};\n\nconst calcAnnouncementDelayMs = (politeness: LivePoliteness, now: number): number => {\n return Math.max(now + WDS_LIVE_REGION_DELAY_MS, getNextAnnouncementAt(politeness)) - now;\n};\n\nconst scheduleAnnouncement = (politeness: LivePoliteness): number => {\n const now = Date.now();\n const delayMs = calcAnnouncementDelayMs(politeness, now);\n setNextAnnouncementAt(politeness, now + delayMs + WDS_LIVE_REGION_DELAY_MS);\n return delayMs;\n};\n\nexport interface LiveRegionProps extends Omit<\n HTMLAttributes<HTMLDivElement>,\n 'role' \| 'aria-live' \| 'aria-atomic'\n> {\n /*\n Determines urgency: 'assertive' interrupts, 'polite' waits for idle, 'off' disables live region.\n /\n 'aria-live': AriaLive;\n /* Optional stable key that triggers a new announcement when it changes. /\n announceOnChange?: string \| number;\n /* Test ID for testing tools /\n 'data-testid'?: string;\n children?: ReactNode;\n}\n\n/\n Renders an ARIA live region with the correct implicit role.\n \n - `aria-live=\"polite\"` → `role=\"status\"`\n * - `aria-live=\"assertive\"` → `role=\"alert\"`\n * - `aria-live=\"off\"` → no live region (renders children unwrapped)\n \n The `role` prop is intentionally excluded from the public API\n * to prevent mismatches between `aria-live` and `role`.\n */\nexport const LiveRegion = ({\n 'aria-live': ariaLive,\n announceOnChange,\n children,\n className,\n ...props\n}: LiveRegionProps) => {\n const [shouldAnnounce, setShouldAnnounce] = useState(false);\n const announcementTrigger =\n announceOnChange ??\n (typeof children === 'string' \|\| typeof children === 'number' ? children : undefined);\n\n useEffect(() => {\n if (ariaLive === 'off') {\n return;\n }\n\n // Reset announcement state, then schedule new announcement\n // This two-step process ensures screen readers re-announce the content\n // eslint-disable-next-line react-hooks/set-state-in-effect -- Deliberately resetting state to force re-announcement for screen readers\n setShouldAnnounce(false);\n\n const timeoutId = window.setTimeout(\n () => setShouldAnnounce(true),\n scheduleAnnouncement(ariaLive),\n );\n\n return () => window.clearTimeout(timeoutId);\n }, [ariaLive, announcementTrigger]);\n\n if (ariaLive === 'off') {\n return <>{children}</>;\n }\n\n return (\n <div\n role={LIVE_REGION_ROLE_BY_POLITENESS[ariaLive]}\n aria-live={ariaLive}\n aria-atomic=\"true\"\n className={`wds-LiveRegion ${className ?? ''}`}\n {...props}\n >\n <div aria-hidden={shouldAnnounce ? undefined : 'true'}>{children}</div>\n </div>\n );\n};\n"],"names":["LIVE_REGION_ROLE_BY_POLITENESS","assertive","polite","nextPoliteAnnouncementAt","nextAssertiveAnnouncementAt","getNextAnnouncementAt","politeness","setNextAnnouncementAt","value","calcAnnouncementDelayMs","now","Math","max","WDS_LIVE_REGION_DELAY_MS","scheduleAnnouncement","Date","delayMs","LiveRegion","ariaLive","announceOnChange","children","className","props","shouldAnnounce","setShouldAnnounce","useState","announcementTrigger","undefined","useEffect","timeoutId","window","setTimeout","clearTimeout","_jsx","_Fragment","role"],"mappings":"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"}

package/build/common/liveRegion/LiveRegion.mjs CHANGED Viewed

@@ -50,10 +50,13 @@ const LiveRegion = ({
   const [shouldAnnounce, setShouldAnnounce] = useState(false);
   const announcementTrigger = announceOnChange ?? (typeof children === 'string' || typeof children === 'number' ? children : undefined);
   useEffect(() => {
-    setShouldAnnounce(false);
     if (ariaLive === 'off') {
       return;
     }
+    // Reset announcement state, then schedule new announcement
+    // This two-step process ensures screen readers re-announce the content
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- Deliberately resetting state to force re-announcement for screen readers
+    setShouldAnnounce(false);
     const timeoutId = window.setTimeout(() => setShouldAnnounce(true), scheduleAnnouncement(ariaLive));
     return () => window.clearTimeout(timeoutId);
   }, [ariaLive, announcementTrigger]);

package/build/common/liveRegion/LiveRegion.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LiveRegion.mjs","sources":["../../../src/common/liveRegion/LiveRegion.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport type { HTMLAttributes, ReactNode } from 'react';\n\nimport { WDS_LIVE_REGION_DELAY_MS } from '../constants';\n\nexport type AriaLive = 'off' \| 'polite' \| 'assertive';\n\ntype LivePoliteness = Exclude<AriaLive, 'off'>;\n\nconst LIVE_REGION_ROLE_BY_POLITENESS: Record<LivePoliteness, 'status' \| 'alert'> = {\n assertive: 'alert',\n polite: 'status',\n};\n\nlet nextPoliteAnnouncementAt = 0;\nlet nextAssertiveAnnouncementAt = 0;\n\nconst getNextAnnouncementAt = (politeness: LivePoliteness): number => {\n if (politeness === 'polite') {\n return nextPoliteAnnouncementAt;\n }\n\n return nextAssertiveAnnouncementAt;\n};\n\nconst setNextAnnouncementAt = (politeness: LivePoliteness, value: number): void => {\n if (politeness === 'polite') {\n nextPoliteAnnouncementAt = value;\n return;\n }\n\n nextAssertiveAnnouncementAt = value;\n};\n\nexport const resetLiveRegionAnnouncementQueue = (): void => {\n nextPoliteAnnouncementAt = 0;\n nextAssertiveAnnouncementAt = 0;\n};\n\nconst calcAnnouncementDelayMs = (politeness: LivePoliteness, now: number): number => {\n return Math.max(now + WDS_LIVE_REGION_DELAY_MS, getNextAnnouncementAt(politeness)) - now;\n};\n\nconst scheduleAnnouncement = (politeness: LivePoliteness): number => {\n const now = Date.now();\n const delayMs = calcAnnouncementDelayMs(politeness, now);\n setNextAnnouncementAt(politeness, now + delayMs + WDS_LIVE_REGION_DELAY_MS);\n return delayMs;\n};\n\nexport interface LiveRegionProps extends Omit<\n HTMLAttributes<HTMLDivElement>,\n 'role' \| 'aria-live' \| 'aria-atomic'\n> {\n /*\n Determines urgency: 'assertive' interrupts, 'polite' waits for idle, 'off' disables live region.\n /\n 'aria-live': AriaLive;\n /* Optional stable key that triggers a new announcement when it changes. /\n announceOnChange?: string \| number;\n /* Test ID for testing tools /\n 'data-testid'?: string;\n children?: ReactNode;\n}\n\n/\n Renders an ARIA live region with the correct implicit role.\n \n - `aria-live=\"polite\"` → `role=\"status\"`\n * - `aria-live=\"assertive\"` → `role=\"alert\"`\n * - `aria-live=\"off\"` → no live region (renders children unwrapped)\n \n The `role` prop is intentionally excluded from the public API\n * to prevent mismatches between `aria-live` and `role`.\n */\nexport const LiveRegion = ({\n 'aria-live': ariaLive,\n announceOnChange,\n children,\n className,\n ...props\n}: LiveRegionProps) => {\n const [shouldAnnounce, setShouldAnnounce] = useState(false);\n const announcementTrigger =\n announceOnChange ??\n (typeof children === 'string' \|\| typeof children === 'number' ? children : undefined);\n\n useEffect(() => {\n ~~setShouldAnnounce(false);\n\n~~ if (ariaLive === 'off') {\n return;\n }\n\n const timeoutId = window.setTimeout(\n () => setShouldAnnounce(true),\n scheduleAnnouncement(ariaLive),\n );\n\n return () => window.clearTimeout(timeoutId);\n }, [ariaLive, announcementTrigger]);\n\n if (ariaLive === 'off') {\n return <>{children}</>;\n }\n\n return (\n <div\n role={LIVE_REGION_ROLE_BY_POLITENESS[ariaLive]}\n aria-live={ariaLive}\n aria-atomic=\"true\"\n className={`wds-LiveRegion ${className ?? ''}`}\n {...props}\n >\n <div aria-hidden={shouldAnnounce ? undefined : 'true'}>{children}</div>\n </div>\n );\n};\n"],"names":["LIVE_REGION_ROLE_BY_POLITENESS","assertive","polite","nextPoliteAnnouncementAt","nextAssertiveAnnouncementAt","getNextAnnouncementAt","politeness","setNextAnnouncementAt","value","calcAnnouncementDelayMs","now","Math","max","WDS_LIVE_REGION_DELAY_MS","scheduleAnnouncement","Date","delayMs","LiveRegion","ariaLive","announceOnChange","children","className","props","shouldAnnounce","setShouldAnnounce","useState","announcementTrigger","undefined","useEffect","timeoutId","window","setTimeout","clearTimeout","_jsx","_Fragment","role"],"mappings":";;;;AASA,MAAMA,8BAA8B,GAA+C;AACjFC,EAAAA,SAAS,EAAE,OAAO;AAClBC,EAAAA,MAAM,EAAE;CACT;AAED,IAAIC,wBAAwB,GAAG,CAAC;AAChC,IAAIC,2BAA2B,GAAG,CAAC;AAEnC,MAAMC,qBAAqB,GAAIC,UAA0B,IAAY;EACnE,IAAIA,UAAU,KAAK,QAAQ,EAAE;AAC3B,IAAA,OAAOH,wBAAwB;AACjC,EAAA;AAEA,EAAA,OAAOC,2BAA2B;AACpC,CAAC;AAED,MAAMG,qBAAqB,GAAGA,CAACD,UAA0B,EAAEE,KAAa,KAAU;EAChF,IAAIF,UAAU,KAAK,QAAQ,EAAE;AAC3BH,IAAAA,wBAAwB,GAAGK,KAAK;AAChC,IAAA;AACF,EAAA;AAEAJ,EAAAA,2BAA2B,GAAGI,KAAK;AACrC,CAAC;AAOD,MAAMC,uBAAuB,GAAGA,CAACH,UAA0B,EAAEI,GAAW,KAAY;AAClF,EAAA,OAAOC,IAAI,CAACC,GAAG,CAACF,GAAG,GAAGG,wBAAwB,EAAER,qBAAqB,CAACC,UAAU,CAAC,CAAC,GAAGI,GAAG;AAC1F,CAAC;AAED,MAAMI,oBAAoB,GAAIR,UAA0B,IAAY;AAClE,EAAA,MAAMI,GAAG,GAAGK,IAAI,CAACL,GAAG,EAAE;AACtB,EAAA,MAAMM,OAAO,GAAGP,uBAAuB,CAACH,UAAU,EAAEI,GAAG,CAAC;EACxDH,qBAAqB,CAACD,UAAU,EAAEI,GAAG,GAAGM,OAAO,GAAGH,wBAAwB,CAAC;AAC3E,EAAA,OAAOG,OAAO;AAChB,CAAC;AAiBD;;;;;;;;;AASG;AACI,MAAMC,UAAU,GAAGA,CAAC;AACzB,EAAA,WAAW,EAAEC,QAAQ;EACrBC,gBAAgB;EAChBC,QAAQ;EACRC,SAAS;EACT,GAAGC;AAAK,CACQ,KAAI;EACpB,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC;AAC3D,EAAA,MAAMC,mBAAmB,GACvBP,gBAAgB,KACf,OAAOC,QAAQ,KAAK,QAAQ,IAAI,OAAOA,QAAQ,KAAK,QAAQ,GAAGA,QAAQ,GAAGO,SAAS,CAAC;AAEvFC,EAAAA,SAAS,CAAC,MAAK;~~IACbJ~~,~~iBAAiB~~,~~CAAC,KAAK,CAAC;IAExB,IAAIN,~~QAAQ,KAAK,KAAK,EAAE;AACtB,MAAA;AACF,IAAA;AAEA,IAAA,~~MAAMW~~,SAAS,GAAGC,MAAM,CAACC,UAAU,CACjC,MAAMP,iBAAiB,CAAC,IAAI,CAAC,EAC7BV,oBAAoB,CAACI,QAAQ,CAAC,CAC/B;AAED,IAAA,OAAO,MAAMY,MAAM,CAACE,YAAY,CAACH,SAAS,CAAC;AAC7C,EAAA,CAAC,EAAE,CAACX,QAAQ,EAAEQ,mBAAmB,CAAC,CAAC;EAEnC,IAAIR,QAAQ,KAAK,KAAK,EAAE;IACtB,oBAAOe,GAAA,CAAAC,QAAA,EAAA;AAAAd,MAAAA,QAAA,EAAGA;AAAQ,MAAI;AACxB,EAAA;AAEA,EAAA,oBACEa,GAAA,CAAA,KAAA,EAAA;AACEE,IAAAA,IAAI,EAAEnC,8BAA8B,CAACkB,QAAQ,CAAE;AAC/C,IAAA,WAAA,EAAWA,QAAS;AACpB,IAAA,aAAA,EAAY,MAAM;AAClBG,IAAAA,SAAS,EAAE,CAAA,eAAA,EAAkBA,SAAS,IAAI,EAAE,CAAA,CAAG;AAAA,IAAA,GAC3CC,KAAK;AAAAF,IAAAA,QAAA,eAETa,GAAA,CAAA,KAAA,EAAA;AAAK,MAAA,aAAA,EAAaV,cAAc,GAAGI,SAAS,GAAG,MAAO;AAAAP,MAAAA,QAAA,EAAEA;KAAc;AACxE,GAAK,CAAC;AAEV;;;;"}
1	+ {"version":3,"file":"LiveRegion.mjs","sources":["../../../src/common/liveRegion/LiveRegion.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport type { HTMLAttributes, ReactNode } from 'react';\n\nimport { WDS_LIVE_REGION_DELAY_MS } from '../constants';\n\nexport type AriaLive = 'off' \| 'polite' \| 'assertive';\n\ntype LivePoliteness = Exclude<AriaLive, 'off'>;\n\nconst LIVE_REGION_ROLE_BY_POLITENESS: Record<LivePoliteness, 'status' \| 'alert'> = {\n assertive: 'alert',\n polite: 'status',\n};\n\nlet nextPoliteAnnouncementAt = 0;\nlet nextAssertiveAnnouncementAt = 0;\n\nconst getNextAnnouncementAt = (politeness: LivePoliteness): number => {\n if (politeness === 'polite') {\n return nextPoliteAnnouncementAt;\n }\n\n return nextAssertiveAnnouncementAt;\n};\n\nconst setNextAnnouncementAt = (politeness: LivePoliteness, value: number): void => {\n if (politeness === 'polite') {\n nextPoliteAnnouncementAt = value;\n return;\n }\n\n nextAssertiveAnnouncementAt = value;\n};\n\nexport const resetLiveRegionAnnouncementQueue = (): void => {\n nextPoliteAnnouncementAt = 0;\n nextAssertiveAnnouncementAt = 0;\n};\n\nconst calcAnnouncementDelayMs = (politeness: LivePoliteness, now: number): number => {\n return Math.max(now + WDS_LIVE_REGION_DELAY_MS, getNextAnnouncementAt(politeness)) - now;\n};\n\nconst scheduleAnnouncement = (politeness: LivePoliteness): number => {\n const now = Date.now();\n const delayMs = calcAnnouncementDelayMs(politeness, now);\n setNextAnnouncementAt(politeness, now + delayMs + WDS_LIVE_REGION_DELAY_MS);\n return delayMs;\n};\n\nexport interface LiveRegionProps extends Omit<\n HTMLAttributes<HTMLDivElement>,\n 'role' \| 'aria-live' \| 'aria-atomic'\n> {\n /*\n Determines urgency: 'assertive' interrupts, 'polite' waits for idle, 'off' disables live region.\n /\n 'aria-live': AriaLive;\n /* Optional stable key that triggers a new announcement when it changes. /\n announceOnChange?: string \| number;\n /* Test ID for testing tools /\n 'data-testid'?: string;\n children?: ReactNode;\n}\n\n/\n Renders an ARIA live region with the correct implicit role.\n \n - `aria-live=\"polite\"` → `role=\"status\"`\n * - `aria-live=\"assertive\"` → `role=\"alert\"`\n * - `aria-live=\"off\"` → no live region (renders children unwrapped)\n \n The `role` prop is intentionally excluded from the public API\n * to prevent mismatches between `aria-live` and `role`.\n */\nexport const LiveRegion = ({\n 'aria-live': ariaLive,\n announceOnChange,\n children,\n className,\n ...props\n}: LiveRegionProps) => {\n const [shouldAnnounce, setShouldAnnounce] = useState(false);\n const announcementTrigger =\n announceOnChange ??\n (typeof children === 'string' \|\| typeof children === 'number' ? children : undefined);\n\n useEffect(() => {\n if (ariaLive === 'off') {\n return;\n }\n\n // Reset announcement state, then schedule new announcement\n // This two-step process ensures screen readers re-announce the content\n // eslint-disable-next-line react-hooks/set-state-in-effect -- Deliberately resetting state to force re-announcement for screen readers\n setShouldAnnounce(false);\n\n const timeoutId = window.setTimeout(\n () => setShouldAnnounce(true),\n scheduleAnnouncement(ariaLive),\n );\n\n return () => window.clearTimeout(timeoutId);\n }, [ariaLive, announcementTrigger]);\n\n if (ariaLive === 'off') {\n return <>{children}</>;\n }\n\n return (\n <div\n role={LIVE_REGION_ROLE_BY_POLITENESS[ariaLive]}\n aria-live={ariaLive}\n aria-atomic=\"true\"\n className={`wds-LiveRegion ${className ?? ''}`}\n {...props}\n >\n <div aria-hidden={shouldAnnounce ? undefined : 'true'}>{children}</div>\n </div>\n );\n};\n"],"names":["LIVE_REGION_ROLE_BY_POLITENESS","assertive","polite","nextPoliteAnnouncementAt","nextAssertiveAnnouncementAt","getNextAnnouncementAt","politeness","setNextAnnouncementAt","value","calcAnnouncementDelayMs","now","Math","max","WDS_LIVE_REGION_DELAY_MS","scheduleAnnouncement","Date","delayMs","LiveRegion","ariaLive","announceOnChange","children","className","props","shouldAnnounce","setShouldAnnounce","useState","announcementTrigger","undefined","useEffect","timeoutId","window","setTimeout","clearTimeout","_jsx","_Fragment","role"],"mappings":"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"}

package/build/dateInput/DateInput.js CHANGED Viewed

@@ -117,10 +117,10 @@ const DateInput = ({
   const monthYearOnly = mode === dateMode.DateMode.MONTH_YEAR;
   const monthBeforeDay = getFormatForLocale.MDY.has(locale);
   const yearFirst = getFormatForLocale.YMD.has(locale);
-  dayLabel ||= formatMessage(DateInput_messages.default.dayLabel);
-  monthLabel ||= formatMessage(DateInput_messages.default.monthLabel);
-  yearLabel ||= formatMessage(DateInput_messages.default.yearLabel);
-  placeholders = {
+  const resolvedDayLabel = dayLabel || formatMessage(DateInput_messages.default.dayLabel);
+  const resolvedMonthLabel = monthLabel || formatMessage(DateInput_messages.default.monthLabel);
+  const resolvedYearLabel = yearLabel || formatMessage(DateInput_messages.default.yearLabel);
+  const resolvedPlaceholders = {
     day: placeholders?.day || formatMessage(DateInput_messages.default.dayPlaceholder),
     month: placeholders?.month || formatMessage(DateInput_messages.default.monthLabel),
     year: placeholders?.year || formatMessage(DateInput_messages.default.yearPlaceholder)
@@ -161,14 +161,14 @@ const DateInput = ({
       className: "d-flex flex-column",
       children: [/*#__PURE__*/jsxRuntime.jsx(Body.default, {
         type: typography.Typography.BODY_DEFAULT,
-        children: monthLabel
+        children: resolvedMonthLabel
       }), /*#__PURE__*/jsxRuntime.jsx(SelectInput.SelectInput, {
         triggerRef: monthRef,
         id: `${id}:month`,
         parentId: DATE_INPUT_PARENT_ID,
         name: "month",
         disabled: disabled,
-        placeholder: placeholders?.month,
+        placeholder: resolvedPlaceholders.month,
         items: Array.from({
           length: 12
         }, (_, index) => ({
@@ -265,7 +265,7 @@ const DateInput = ({
       children: /*#__PURE__*/jsxRuntime.jsxs("label", {
         children: [/*#__PURE__*/jsxRuntime.jsx(Body.default, {
           type: typography.Typography.BODY_DEFAULT,
-          children: dayLabel
+          children: resolvedDayLabel
         }), /*#__PURE__*/jsxRuntime.jsx("div", {
           className: `input-group input-group-${size$1} ${disabled ? 'disabled' : ''}`,
           children: /*#__PURE__*/jsxRuntime.jsx(Input.Input, {
@@ -277,7 +277,7 @@ const DateInput = ({
             name: "day",
             autoComplete: dayAutoComplete,
             value: displayDay || '',
-            placeholder: placeholders?.day,
+            placeholder: resolvedPlaceholders.day,
             disabled: disabled,
             min: 1,
             max: 31,
@@ -294,7 +294,7 @@ const DateInput = ({
       children: /*#__PURE__*/jsxRuntime.jsxs("label", {
         children: [/*#__PURE__*/jsxRuntime.jsx(Body.default, {
           type: typography.Typography.BODY_DEFAULT,
-          children: yearLabel
+          children: resolvedYearLabel
         }), /*#__PURE__*/jsxRuntime.jsx("div", {
           className: `input-group input-group-${size$1} ${disabled ? 'disabled' : ''}`,
           children: /*#__PURE__*/jsxRuntime.jsx(Input.Input, {
@@ -305,7 +305,7 @@ const DateInput = ({
             pattern: "[0-9]*",
             name: "year",
             autoComplete: yearAutoComplete,
-            placeholder: placeholders?.year,
+            placeholder: resolvedPlaceholders.year,
             value: displayYear || '',
             disabled: disabled,
             min: 0,