npm - @transferwise/components - Versions diffs - 46.63.0 → 46.65.0 - Mend

@transferwise/components 46.63.0 → 46.65.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 (93) hide show

package/build/uploadInput/uploadItem/UploadItem.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"UploadItem.mjs","sources":["../../../src/uploadInput/uploadItem/UploadItem.tsx"],"sourcesContent":["import { Bin, CheckCircleFill, CrossCircleFill } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../../body';\nimport { Size, Status, Typography, Sentiment } from '../../common';\nimport ProcessIndicator from '../../processIndicator/ProcessIndicator';\nimport StatusIcon from '../../statusIcon/StatusIcon';\nimport { UploadedFile, UploadError } from '../types';\n\nimport MESSAGES from './UploadItem.messages';\nimport { UploadItemLink } from './UploadItemLink';\n\nexport type UploadItemProps = React.JSX.IntrinsicAttributes & {\n file: UploadedFile;\n /*\n Is this Item part of a multiple- or single-file UploadInput\n /\n singleFileUpload: boolean;\n canDelete: boolean;\n onDelete: () => void;\n\n /\n Callback to be called when the file link is clicked.\n * When provided, you need to manually trigger actions to load/download the file.\n \n @param file\n /\n onDownload?: (file: UploadedFile) => void;\n};\n\nexport enum TEST_IDS {\n uploadItem = 'uploadItem',\n mediaBody = 'mediaBody',\n}\n\nconst UploadItem = ({\n file,\n canDelete,\n onDelete,\n onDownload,\n singleFileUpload,\n}: UploadItemProps) => {\n const { formatMessage } = useIntl();\n const { status, filename, error, errors, url } = file;\n\n const isSucceeded = [Status.SUCCEEDED, undefined].includes(status) && !!url;\n\n /\n We're temporarily reverting to the regular icon components,\n * until the StatusIcon receives 24px sizing. Some misalignment\n * to be expected.\n */\n const getIcon = () => {\n if (error \|\| errors?.length \|\| status === Status.FAILED) {\n return <CrossCircleFill size={24} className=\"emphasis--negative\" />;\n }\n\n let processIndicator: React.ReactNode;\n\n switch (status) {\n case Status.PROCESSING:\n case Status.PENDING:\n processIndicator = <ProcessIndicator size={Size.EXTRA_SMALL} status={Status.PROCESSING} />;\n break;\n case Status.SUCCEEDED:\n case Status.DONE:\n default:\n processIndicator = <CheckCircleFill size={24} className=\"emphasis--positive\" />;\n }\n\n return processIndicator;\n };\n\n const getErrorMessage = (error?: UploadError) =>\n typeof error === 'object' ? error.message : error \|\| formatMessage(MESSAGES.uploadingFailed);\n\n const getMultipleErrors = (errors?: UploadError[]) => {\n if (!errors?.length) {\n return null;\n }\n\n if (errors?.length === 1) {\n return getErrorMessage(errors[0]);\n }\n\n return (\n <ul className=\"np-upload-input-errors m-b-0\">\n {errors.map((error, index) => {\n // eslint-disable-next-line react/no-array-index-key\n return <li key={index}>{getErrorMessage(error)}</li>;\n })}\n </ul>\n );\n };\n\n const getDescription = () => {\n if (error \|\| errors?.length \|\| status === Status.FAILED) {\n return (\n <Body type={Typography.BODY_DEFAULT_BOLD} className=\"text-negative\">\n {errors?.length ? getMultipleErrors(errors) : getErrorMessage(error)}\n </Body>\n );\n }\n\n switch (status) {\n case Status.PENDING:\n return <Body type={Typography.BODY_DEFAULT_BOLD}>{formatMessage(MESSAGES.uploading)}</Body>;\n case Status.PROCESSING:\n return <Body>{formatMessage(MESSAGES.deleting)}</Body>;\n case Status.SUCCEEDED:\n case Status.DONE:\n default:\n return (\n <Body type={Typography.BODY_DEFAULT_BOLD} className=\"text-positive\">\n {formatMessage(MESSAGES.uploaded)}\n </Body>\n );\n }\n };\n\n const getTitle = () => {\n return filename \|\| formatMessage(MESSAGES.uploadedFile);\n };\n\n const onDownloadFile = (event: React.MouseEvent): void => {\n if (onDownload) {\n event.preventDefault();\n onDownload(file);\n }\n };\n\n return (\n <div\n className={clsx('np-upload-item', { 'np-upload-item--link': isSucceeded })}\n data-testid={TEST_IDS.uploadItem}\n >\n <div className=\"np-upload-item__body\">\n <UploadItemLink\n url={isSucceeded ? url : undefined}\n singleFileUpload={singleFileUpload}\n onDownload={onDownloadFile}\n >\n <div className=\"np-upload-button\" aria-live=\"polite\">\n <div className=\"media\">\n <div className=\"np-upload-icon media-left\">{getIcon()}</div>\n <div className=\"media-body text-xs-left\" data-testid={TEST_IDS.mediaBody}>\n <Body className=\"text-word-break d-block text-primary\">{getTitle()}</Body>\n {getDescription()}\n </div>\n </div>\n </div>\n </UploadItemLink>\n {canDelete && (\n <button\n aria-label={formatMessage(MESSAGES.removeFile, { filename })}\n className={clsx('btn', 'np-upload-item__remove-button', 'media-left', {\n 'np-upload-item--single-file': singleFileUpload,\n })}\n type=\"button\"\n onClick={() => onDelete()}\n >\n <Bin size={16} />\n </button>\n )}\n </div>\n </div>\n );\n};\n\nexport default UploadItem;\n"],"names":["TEST_IDS","UploadItem","file","canDelete","onDelete","onDownload","singleFileUpload","formatMessage","useIntl","status","filename","error","errors","url","isSucceeded","Status","SUCCEEDED","undefined","includes","getIcon","length","FAILED","_jsx","CrossCircleFill","size","className","processIndicator","PROCESSING","PENDING","ProcessIndicator","Size","EXTRA_SMALL","DONE","CheckCircleFill","getErrorMessage","message","MESSAGES","uploadingFailed","getMultipleErrors","children","map","index","getDescription","Body","type","Typography","BODY_DEFAULT_BOLD","uploading","deleting","uploaded","getTitle","uploadedFile","onDownloadFile","event","preventDefault","clsx","uploadItem","_jsxs","UploadItemLink","mediaBody","removeFile","onClick","Bin"],"mappings":"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"}
1	+ {"version":3,"file":"UploadItem.mjs","sources":["../../../src/uploadInput/uploadItem/UploadItem.tsx"],"sourcesContent":["import { Bin, CheckCircleFill, CrossCircleFill } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { forwardRef, useImperativeHandle, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../../body';\nimport { Size, Status, Typography, Sentiment } from '../../common';\nimport ProcessIndicator from '../../processIndicator/ProcessIndicator';\nimport StatusIcon from '../../statusIcon/StatusIcon';\nimport { UploadedFile, UploadError } from '../types';\n\nimport MESSAGES from './UploadItem.messages';\nimport { UploadItemLink } from './UploadItemLink';\n\nexport type UploadItemProps = React.JSX.IntrinsicAttributes & {\n file: UploadedFile;\n /*\n Is this Item part of a multiple- or single-file UploadInput\n /\n singleFileUpload: boolean;\n canDelete: boolean;\n onDelete: () => void;\n\n /\n Callback to be called when the file link is clicked.\n * When provided, you need to manually trigger actions to load/download the file.\n \n @param file\n /\n onDownload?: (file: UploadedFile) => void;\n ref?: React.Ref<UploadItemRef>;\n};\n\ninterface UploadItemRef {\n focus: () => void;\n}\n\nexport enum TEST_IDS {\n uploadItem = 'uploadItem',\n mediaBody = 'mediaBody',\n}\n\nconst UploadItem = forwardRef<UploadItemRef, UploadItemProps>(\n ({ file, canDelete, onDelete, onDownload, singleFileUpload }, ref) => {\n const { formatMessage } = useIntl();\n const { status, filename, error, errors, url } = file;\n const linkRef = useRef<HTMLAnchorElement>(null);\n const buttonRef = useRef<HTMLButtonElement>(null);\n\n useImperativeHandle<UploadItemRef, UploadItemRef>(ref, () => ({\n focus: (): void => {\n if (url) {\n linkRef.current?.focus();\n } else {\n buttonRef.current?.focus();\n }\n },\n }));\n\n const isSucceeded = [Status.SUCCEEDED, undefined].includes(status) && !!url;\n\n /\n We're temporarily reverting to the regular icon components,\n * until the StatusIcon receives 24px sizing. Some misalignment\n * to be expected.\n */\n const getIcon = () => {\n if (error \|\| errors?.length \|\| status === Status.FAILED) {\n return <CrossCircleFill size={24} className=\"emphasis--negative\" />;\n }\n\n let processIndicator: React.ReactNode;\n\n switch (status) {\n case Status.PROCESSING:\n case Status.PENDING:\n processIndicator = (\n <ProcessIndicator size={Size.EXTRA_SMALL} status={Status.PROCESSING} />\n );\n break;\n case Status.SUCCEEDED:\n case Status.DONE:\n default:\n processIndicator = <CheckCircleFill size={24} className=\"emphasis--positive\" />;\n }\n\n return processIndicator;\n };\n\n const getErrorMessage = (error?: UploadError) =>\n typeof error === 'object' ? error.message : error \|\| formatMessage(MESSAGES.uploadingFailed);\n\n const getMultipleErrors = (errors?: UploadError[]) => {\n if (!errors?.length) {\n return null;\n }\n\n if (errors?.length === 1) {\n return getErrorMessage(errors[0]);\n }\n\n return (\n <ul className=\"np-upload-input-errors m-b-0\">\n {errors.map((error, index) => {\n // eslint-disable-next-line react/no-array-index-key\n return <li key={index}>{getErrorMessage(error)}</li>;\n })}\n </ul>\n );\n };\n\n const getDescription = () => {\n if (error \|\| errors?.length \|\| status === Status.FAILED) {\n return (\n <Body type={Typography.BODY_DEFAULT_BOLD} className=\"text-negative\">\n {errors?.length ? getMultipleErrors(errors) : getErrorMessage(error)}\n </Body>\n );\n }\n\n switch (status) {\n case Status.PENDING:\n return (\n <Body type={Typography.BODY_DEFAULT_BOLD}>{formatMessage(MESSAGES.uploading)}</Body>\n );\n case Status.PROCESSING:\n return <Body>{formatMessage(MESSAGES.deleting)}</Body>;\n case Status.SUCCEEDED:\n case Status.DONE:\n default:\n return (\n <Body type={Typography.BODY_DEFAULT_BOLD} className=\"text-positive\">\n {formatMessage(MESSAGES.uploaded)}\n </Body>\n );\n }\n };\n\n const getTitle = () => {\n return filename \|\| formatMessage(MESSAGES.uploadedFile);\n };\n\n const onDownloadFile = (event: React.MouseEvent): void => {\n if (onDownload) {\n event.preventDefault();\n onDownload(file);\n }\n };\n\n return (\n <div\n className={clsx('np-upload-item', { 'np-upload-item--link': isSucceeded })}\n data-testid={TEST_IDS.uploadItem}\n >\n <div className=\"np-upload-item__body\">\n <UploadItemLink\n ref={linkRef}\n url={isSucceeded ? url : undefined}\n singleFileUpload={singleFileUpload}\n onDownload={onDownloadFile}\n >\n <div className=\"np-upload-button\" aria-live=\"polite\">\n <div className=\"media\">\n <div className=\"np-upload-icon media-left\">{getIcon()}</div>\n <div className=\"media-body text-xs-left\" data-testid={TEST_IDS.mediaBody}>\n <Body className=\"text-word-break d-block text-primary\">{getTitle()}</Body>\n {getDescription()}\n </div>\n </div>\n </div>\n </UploadItemLink>\n {canDelete && (\n <button\n ref={buttonRef}\n aria-label={formatMessage(MESSAGES.removeFile, { filename })}\n className={clsx('btn', 'np-upload-item__remove-button', 'media-left', {\n 'np-upload-item--single-file': singleFileUpload,\n })}\n type=\"button\"\n onClick={() => onDelete()}\n >\n <Bin size={16} />\n </button>\n )}\n </div>\n </div>\n );\n },\n);\n\nUploadItem.displayName = 'UploadItem';\n\nexport default UploadItem;\n"],"names":["TEST_IDS","UploadItem","forwardRef","file","canDelete","onDelete","onDownload","singleFileUpload","ref","formatMessage","useIntl","status","filename","error","errors","url","linkRef","useRef","buttonRef","useImperativeHandle","focus","current","isSucceeded","Status","SUCCEEDED","undefined","includes","getIcon","length","FAILED","_jsx","CrossCircleFill","size","className","processIndicator","PROCESSING","PENDING","ProcessIndicator","Size","EXTRA_SMALL","DONE","CheckCircleFill","getErrorMessage","message","MESSAGES","uploadingFailed","getMultipleErrors","children","map","index","getDescription","Body","type","Typography","BODY_DEFAULT_BOLD","uploading","deleting","uploaded","getTitle","uploadedFile","onDownloadFile","event","preventDefault","clsx","uploadItem","_jsxs","UploadItemLink","mediaBody","removeFile","onClick","Bin","displayName"],"mappings":"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"}

package/build/uploadInput/uploadItem/UploadItemLink.js CHANGED Viewed

@@ -1,20 +1,23 @@
 'use strict';
+var React = require('react');
 var clsx = require('clsx');
 var jsxRuntime = require('react/jsx-runtime');
-const UploadItemLink = ({
+const UploadItemLink = /*#__PURE__*/React.forwardRef(({
   children,
   url,
   onDownload,
   singleFileUpload
-}) => {
+}, ref) => {
   if (!url) {
     return /*#__PURE__*/jsxRuntime.jsx("div", {
+      ref: ref,
       children: children
     });
   }
   return /*#__PURE__*/jsxRuntime.jsx("a", {
+    ref: ref,
     href: url,
     target: "_blank",
     rel: "noopener noreferrer",
@@ -22,7 +25,7 @@ const UploadItemLink = ({
     onClick: onDownload,
     children: children
   });
-};
+});
 exports.UploadItemLink = UploadItemLink;
 //# sourceMappingURL=UploadItemLink.js.map

package/build/uploadInput/uploadItem/UploadItemLink.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"UploadItemLink.js","sources":["../../../src/uploadInput/uploadItem/UploadItemLink.tsx"],"sourcesContent":["import { PropsWithChildren, MouseEvent } from 'react';\nimport { clsx } from 'clsx';\n\ntype UploadItemLinkProps = PropsWithChildren<{\n url?: string;\n onDownload?: (event: MouseEvent) => void;\n singleFileUpload: boolean;\n}>;\n\nexport const UploadItemLink = ({\n children~~,\n~~ url~~,\n~~ onDownload~~,\n~~ singleFileUpload~~,\n~~}: ~~UploadItemLinkProps~~) => {\n if (!url) {\n return <div>{children}</div>;\n }\n\n return (\n <a\n href={url}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className={clsx(\n 'np-upload-item__link',\n singleFileUpload ? 'np-upload-item--single-file' : '',\n )}\n onClick={onDownload}\n >\n {children}\n </a>\n );\n};\n"],"names":["UploadItemLink","children","url","onDownload","singleFileUpload","_jsx","href","target","rel","className","clsx","onClick"],"mappings":"~~;;;;;AASO~~,~~MAAMA~~,cAAc,~~GAAGA~~,CAAC;~~EAC7BC~~,QAAQ;~~EACRC~~,GAAG;~~EACHC~~,UAAU;~~AACVC~~,EAAAA,gBAAAA;~~AAAgB~~,~~CACI~~,KAAI;~~EACxB~~,IAAI,~~CAACF~~,GAAG,EAAE;AACR,IAAA,~~oBAAOG~~,cAAA,CAAA,KAAA,EAAA;AAAAJ,MAAAA,QAAA,~~EAAMA~~,QAAAA;AAAQ,KAAM,CAAC,CAAA;~~AAC9B~~,GAAA;AAEA,EAAA,~~oBACEI~~,cAAA,CAAA,GAAA,EAAA;~~AACEC~~,IAAAA,IAAI,~~EAAEJ~~,GAAI;~~AACVK~~,IAAAA,MAAM,EAAC,QAAQ;AACfC,IAAAA,GAAG,EAAC,qBAAqB;IACzBC,SAAS,EAAEC,SAAI,CACb,sBAAsB,~~EACtBN~~,gBAAgB,GAAG,6BAA6B,GAAG,EAAE,CACrD;~~AACFO~~,IAAAA,OAAO,~~EAAER~~,UAAW;AAAAF,IAAAA,QAAA,EAEnBA,QAAAA;AAAQ,GACR,CAAC,CAAA;AAER;;;;"}
1	+ {"version":3,"file":"UploadItemLink.js","sources":["../../../src/uploadInput/uploadItem/UploadItemLink.tsx"],"sourcesContent":["import { PropsWithChildren, MouseEvent, forwardRef } from 'react';\nimport { clsx } from 'clsx';\n\ntype UploadItemLinkProps = PropsWithChildren<{\n url?: string;\n onDownload?: (event: MouseEvent) => void;\n singleFileUpload: boolean;\n}>;\n\nexport const UploadItemLink = forwardRef<HTMLAnchorElement \| HTMLDivElement, UploadItemLinkProps>(\n ({ children, url, onDownload, singleFileUpload }, ref) => {\n if (!url) {\n return <div ref={ref as React.RefObject<HTMLDivElement>}>{children}</div>;\n }\n\n return (\n <a\n ref={ref as React.RefObject<HTMLAnchorElement>}\n href={url}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className={clsx(\n 'np-upload-item__link',\n singleFileUpload ? 'np-upload-item--single-file' : '',\n )}\n onClick={onDownload}\n >\n {children}\n </a>\n );\n },\n);\n"],"names":["UploadItemLink","forwardRef","children","url","onDownload","singleFileUpload","ref","_jsx","href","target","rel","className","clsx","onClick"],"mappings":";;;;;;AASaA,MAAAA,cAAc,gBAAGC,gBAAU,CACtC,CAAC;EAAEC,QAAQ;EAAEC,GAAG;EAAEC,UAAU;AAAEC,EAAAA,gBAAAA;CAAkB,EAAEC,GAAG,KAAI;EACvD,IAAI,CAACH,GAAG,EAAE;AACR,IAAA,oBAAOI,cAAA,CAAA,KAAA,EAAA;AAAKD,MAAAA,GAAG,EAAEA,GAAuC;AAAAJ,MAAAA,QAAA,EAAEA,QAAAA;AAAQ,KAAM,CAAC,CAAA;AAC3E,GAAA;AAEA,EAAA,oBACEK,cAAA,CAAA,GAAA,EAAA;AACED,IAAAA,GAAG,EAAEA,GAA0C;AAC/CE,IAAAA,IAAI,EAAEL,GAAI;AACVM,IAAAA,MAAM,EAAC,QAAQ;AACfC,IAAAA,GAAG,EAAC,qBAAqB;IACzBC,SAAS,EAAEC,SAAI,CACb,sBAAsB,EACtBP,gBAAgB,GAAG,6BAA6B,GAAG,EAAE,CACrD;AACFQ,IAAAA,OAAO,EAAET,UAAW;AAAAF,IAAAA,QAAA,EAEnBA,QAAAA;AAAQ,GACR,CAAC,CAAA;AAER,CAAC;;;;"}

package/build/uploadInput/uploadItem/UploadItemLink.mjs CHANGED Viewed

@@ -1,18 +1,21 @@
+import { forwardRef } from 'react';
 import { clsx } from 'clsx';
 import { jsx } from 'react/jsx-runtime';
-const UploadItemLink = ({
+const UploadItemLink = /*#__PURE__*/forwardRef(({
   children,
   url,
   onDownload,
   singleFileUpload
-}) => {
+}, ref) => {
   if (!url) {
     return /*#__PURE__*/jsx("div", {
+      ref: ref,
       children: children
     });
   }
   return /*#__PURE__*/jsx("a", {
+    ref: ref,
     href: url,
     target: "_blank",
     rel: "noopener noreferrer",
@@ -20,7 +23,7 @@ const UploadItemLink = ({
     onClick: onDownload,
     children: children
   });
-};
+});
 export { UploadItemLink };
 //# sourceMappingURL=UploadItemLink.mjs.map

package/build/uploadInput/uploadItem/UploadItemLink.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"UploadItemLink.mjs","sources":["../../../src/uploadInput/uploadItem/UploadItemLink.tsx"],"sourcesContent":["import { PropsWithChildren, MouseEvent } from 'react';\nimport { clsx } from 'clsx';\n\ntype UploadItemLinkProps = PropsWithChildren<{\n url?: string;\n onDownload?: (event: MouseEvent) => void;\n singleFileUpload: boolean;\n}>;\n\nexport const UploadItemLink = ({\n children~~,\n~~ url~~,\n~~ onDownload~~,\n~~ singleFileUpload~~,\n~~}: ~~UploadItemLinkProps~~) => {\n if (!url) {\n return <div>{children}</div>;\n }\n\n return (\n <a\n href={url}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className={clsx(\n 'np-upload-item__link',\n singleFileUpload ? 'np-upload-item--single-file' : '',\n )}\n onClick={onDownload}\n >\n {children}\n </a>\n );\n};\n"],"names":["UploadItemLink","children","url","onDownload","singleFileUpload","_jsx","href","target","rel","className","clsx","onClick"],"mappings":"~~;;;AASO~~,~~MAAMA~~,cAAc,~~GAAGA~~,CAAC;~~EAC7BC~~,QAAQ;~~EACRC~~,GAAG;~~EACHC~~,UAAU;~~AACVC~~,EAAAA,gBAAAA;~~AAAgB~~,~~CACI~~,KAAI;~~EACxB~~,IAAI,~~CAACF~~,GAAG,EAAE;AACR,IAAA,~~oBAAOG~~,GAAA,CAAA,KAAA,EAAA;AAAAJ,MAAAA,QAAA,~~EAAMA~~,QAAAA;AAAQ,KAAM,CAAC,CAAA;~~AAC9B~~,GAAA;AAEA,EAAA,~~oBACEI~~,GAAA,CAAA,GAAA,EAAA;~~AACEC~~,IAAAA,IAAI,~~EAAEJ~~,GAAI;~~AACVK~~,IAAAA,MAAM,EAAC,QAAQ;AACfC,IAAAA,GAAG,EAAC,qBAAqB;IACzBC,SAAS,EAAEC,IAAI,CACb,sBAAsB,~~EACtBN~~,gBAAgB,GAAG,6BAA6B,GAAG,EAAE,CACrD;~~AACFO~~,IAAAA,OAAO,~~EAAER~~,UAAW;AAAAF,IAAAA,QAAA,EAEnBA,QAAAA;AAAQ,GACR,CAAC,CAAA;AAER;;;;"}
1	+ {"version":3,"file":"UploadItemLink.mjs","sources":["../../../src/uploadInput/uploadItem/UploadItemLink.tsx"],"sourcesContent":["import { PropsWithChildren, MouseEvent, forwardRef } from 'react';\nimport { clsx } from 'clsx';\n\ntype UploadItemLinkProps = PropsWithChildren<{\n url?: string;\n onDownload?: (event: MouseEvent) => void;\n singleFileUpload: boolean;\n}>;\n\nexport const UploadItemLink = forwardRef<HTMLAnchorElement \| HTMLDivElement, UploadItemLinkProps>(\n ({ children, url, onDownload, singleFileUpload }, ref) => {\n if (!url) {\n return <div ref={ref as React.RefObject<HTMLDivElement>}>{children}</div>;\n }\n\n return (\n <a\n ref={ref as React.RefObject<HTMLAnchorElement>}\n href={url}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className={clsx(\n 'np-upload-item__link',\n singleFileUpload ? 'np-upload-item--single-file' : '',\n )}\n onClick={onDownload}\n >\n {children}\n </a>\n );\n },\n);\n"],"names":["UploadItemLink","forwardRef","children","url","onDownload","singleFileUpload","ref","_jsx","href","target","rel","className","clsx","onClick"],"mappings":";;;;AASaA,MAAAA,cAAc,gBAAGC,UAAU,CACtC,CAAC;EAAEC,QAAQ;EAAEC,GAAG;EAAEC,UAAU;AAAEC,EAAAA,gBAAAA;CAAkB,EAAEC,GAAG,KAAI;EACvD,IAAI,CAACH,GAAG,EAAE;AACR,IAAA,oBAAOI,GAAA,CAAA,KAAA,EAAA;AAAKD,MAAAA,GAAG,EAAEA,GAAuC;AAAAJ,MAAAA,QAAA,EAAEA,QAAAA;AAAQ,KAAM,CAAC,CAAA;AAC3E,GAAA;AAEA,EAAA,oBACEK,GAAA,CAAA,GAAA,EAAA;AACED,IAAAA,GAAG,EAAEA,GAA0C;AAC/CE,IAAAA,IAAI,EAAEL,GAAI;AACVM,IAAAA,MAAM,EAAC,QAAQ;AACfC,IAAAA,GAAG,EAAC,qBAAqB;IACzBC,SAAS,EAAEC,IAAI,CACb,sBAAsB,EACtBP,gBAAgB,GAAG,6BAA6B,GAAG,EAAE,CACrD;AACFQ,IAAAA,OAAO,EAAET,UAAW;AAAAF,IAAAA,QAAA,EAEnBA,QAAAA;AAAQ,GACR,CAAC,CAAA;AAER,CAAC;;;;"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.63.0",
+  "version": "46.65.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -93,8 +93,8 @@
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
     "@transferwise/less-config": "3.1.0",
-    "@transferwise/neptune-css": "14.15.0",
-    "@wise/components-theming": "1.6.0"
+    "@wise/components-theming": "1.6.0",
+    "@transferwise/neptune-css": "14.15.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.7.0",

package/src/card/Card.spec.tsx CHANGED Viewed

@@ -104,7 +104,6 @@ describe('Card', () => {
       expect(screen.getByTestId('chevron-up-icon')).toHaveClass(Position.BOTTOM);
     });
     describe('when collapsed', () => {
       const CONTENT = 'mock children';
@@ -116,8 +115,8 @@ describe('Card', () => {
       it('should render appropriate aria attributes', async () => {
         renderCard({ children: CONTENT });
         const button = screen.getByRole('button');
-        expect(button).toHaveAttribute('aria-expanded', 'false')
-        expect(button).not.toHaveAttribute('aria-controls')
+        expect(button).toHaveAttribute('aria-expanded', 'false');
+        expect(button).not.toHaveAttribute('aria-controls');
       });
     });
@@ -140,10 +139,10 @@ describe('Card', () => {
       });
       it('should render appropriate aria attributes', async () => {
-        const {container} = renderCard(defaultProps);
+        const { container } = renderCard(defaultProps);
         const button = screen.getByRole('button');
         const controlledId = button.getAttribute('aria-controls');
-        expect(button).toHaveAttribute('aria-expanded', 'true')
+        expect(button).toHaveAttribute('aria-expanded', 'true');
         const contentId = screen.getByText(defaultProps.children).getAttribute('id');
         expect(contentId).toBe(controlledId);

package/src/card/Card.story.tsx CHANGED Viewed

@@ -20,21 +20,19 @@ export default {
   tags: ['autodocs'],
 } satisfies Meta<typeof Card>;
 export const Basic: Story = {
   render: function Render(args) {
     const [isExpanded, setIsExpanded] = useState(false);
     const handleClick = (isCurrentExpanded: boolean) => {
-      setIsExpanded(isCurrentExpanded)
+      setIsExpanded(isCurrentExpanded);
       args?.onClick?.(!isExpanded);
-    }
+    };
     return <Card {...args} isExpanded={isExpanded} onClick={handleClick} />;
-  }
+  },
 };
 export const Multiple: Story = {
   render: function Render(args) {
     const [expandedCardIndex, setExpandedCardIndex] = useState<number | null>(0);
@@ -66,5 +64,5 @@ export const Multiple: Story = {
         />
       </>
     );
-  }
+  },
 };

package/src/card/Card.tsx CHANGED Viewed

@@ -44,7 +44,6 @@ const Card = forwardRef(function Card(
   const contentId = useId();
   const isExpandable = Boolean(children);
   return (
     <Element
       ref={reference}
@@ -68,7 +67,9 @@ const Card = forwardRef(function Card(
         content={details}
         showMediaAtAllSizes
         button={
-          isExpandable ? <Chevron orientation={isExpanded ? Position.TOP : Position.BOTTOM} /> : null
+          isExpandable ? (
+            <Chevron orientation={isExpanded ? Position.TOP : Position.BOTTOM} />
+          ) : null
         }
         onClick={isExpandable ? () => onClick?.(!isExpanded) : undefined}
       />

package/src/circularButton/CircularButton.tsx CHANGED Viewed

@@ -3,7 +3,7 @@ import { cloneElement } from 'react';
 import Body from '../body/Body';
 import { typeClassMap, priorityClassMap } from '../button/classMap';
-import { ControlType, Priority , Typography } from '../common';
+import { ControlType, Priority, Typography } from '../common';
 export interface CircularButtonProps {
   className?: string;

package/src/common/bottomSheet/BottomSheet.tsx CHANGED Viewed

@@ -1,6 +1,7 @@
 import { clsx } from 'clsx';
 import {
   CSSProperties,
+  HTMLAttributes,
   PropsWithChildren,
   SyntheticEvent,
   useContext,
@@ -30,7 +31,8 @@ export type BottomSheetProps = PropsWithChildren<
   {
     onClose?: (event: Event | SyntheticEvent) => void;
     open: boolean;
-  } & CommonProps
+  } & CommonProps &
+    Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-labelledby'>
 >;
 /**
@@ -39,7 +41,7 @@ export type BottomSheetProps = PropsWithChildren<
  * Neptune Web: https://transferwise.github.io/neptune-web/components/overlays/BottomSheet
  *
  */
-const BottomSheet = (props: BottomSheetProps) => {
+const BottomSheet = ({ role = 'dialog', ...props }: BottomSheetProps) => {
   const bottomSheetReference = useRef<HTMLDivElement>(null);
   const topBarReference = useRef<HTMLDivElement>(null);
   const contentReference = useRef<HTMLDivElement>(null);
@@ -181,7 +183,13 @@ const BottomSheet = (props: BottomSheetProps) => {
   const overlayId = useContext(OverlayIdContext);
   return is400Zoom ? (
-    <Drawer open={props.open} className={props.className} onClose={close}>
+    <Drawer
+      aria-labelledby={props['aria-labelledby']}
+      role={role}
+      open={props.open}
+      className={props.className}
+      onClose={close}
+    >
       {props.children}
     </Drawer>
   ) : (
@@ -195,7 +203,8 @@ const BottomSheet = (props: BottomSheetProps) => {
         {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
         <div
           id={overlayId}
-          role="dialog"
+          aria-labelledby={props['aria-labelledby']}
+          role={role}
           aria-modal
           onTouchStart={onSwipeStart}
           onTouchMove={onSwipeMove}

package/src/common/locale/index.ts CHANGED Viewed

@@ -79,7 +79,7 @@ export function getLangFromLocale(locale: string) {
  */
 export function getCountryFromLocale(locale: string) {
   const adjustedLocale = adjustLocale(locale);
-  return adjustedLocale != null ? new Intl.Locale(adjustedLocale).region ?? null : null;
+  return adjustedLocale != null ? (new Intl.Locale(adjustedLocale).region ?? null) : null;
 }
 /**

package/src/dateLookup/tableLink/TableLink.tsx CHANGED Viewed

@@ -56,21 +56,21 @@ const TableLink = ({
   return (
     <button
-        ref={buttonRef}
-        type="button"
-        className={clsx(
-          `tw-date-lookup-${type}-option np-text-body-default-bold`,
-          { active: !!active },
-          { today: !!today },
-        )}
-        disabled={disabled}
-        tabIndex={autofocus ? 0 : -1}
-        aria-label={calculateAriaLabel()}
-        aria-pressed={active}
-        onClick={onCalendarClick}
-      >
-        {title || item}
-      </button>
+      ref={buttonRef}
+      type="button"
+      className={clsx(
+        `tw-date-lookup-${type}-option np-text-body-default-bold`,
+        { active: !!active },
+        { today: !!today },
+      )}
+      disabled={disabled}
+      tabIndex={autofocus ? 0 : -1}
+      aria-label={calculateAriaLabel()}
+      aria-pressed={active}
+      onClick={onCalendarClick}
+    >
+      {title || item}
+    </button>
   );
 };

package/src/drawer/Drawer.tsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import { clsx } from 'clsx';
-import { useContext, useId } from 'react';
+import { HTMLAttributes, useContext, useId } from 'react';
 import { Position, Typography } from '../common';
 import { CloseButton } from '../common/closeButton';
@@ -10,7 +10,7 @@ import SlidingPanel from '../slidingPanel';
 import Title from '../title';
 import { logActionRequiredIf } from '../utilities';
-export interface DrawerProps {
+export type DrawerProps = {
   /** The content to appear in the drawer body. */
   children?: React.ReactNode;
   className?: string;
@@ -24,7 +24,7 @@ export interface DrawerProps {
   position?: `${Position.LEFT | Position.RIGHT | Position.BOTTOM}`;
   /** The action to perform on close click. */
   onClose?: (event: KeyboardEvent | React.MouseEvent) => void;
-}
+} & Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-labelledby'>;
 export default function Drawer({
   children,
@@ -34,6 +34,8 @@ export default function Drawer({
   onClose,
   open = false,
   position = 'right',
+  role = 'dialog',
+  'aria-labelledby': ariaLabelledBy,
 }: DrawerProps) {
   logActionRequiredIf(
     'Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.',
@@ -50,9 +52,9 @@ export default function Drawer({
       <SlidingPanel open={open} position={isMobile ? Position.BOTTOM : position}>
         <div
           id={overlayId}
-          role="dialog"
+          role={role}
           aria-modal
-          aria-labelledby={headerTitle ? titleId : undefined}
+          aria-labelledby={ariaLabelledBy || (headerTitle ? titleId : undefined)}
           className={clsx('np-drawer', className)}
         >
           <div

package/src/flowNavigation/FlowNavigation.story.js CHANGED Viewed

@@ -6,11 +6,14 @@ import Avatar, { AvatarType } from '../avatar';
 import AvatarWrapper from '../avatarWrapper';
 import Body from '../body';
 import Button from '../button';
-import { ProfileType, Size } from '../common';
+import { ProfileType, Size, Typography } from '../common';
 import Logo from '../logo';
 import OverlayHeader from '../overlayHeader';
 import FlowNavigation from './FlowNavigation';
+import { lorem10 } from '../test-utils';
+import Display from '../display';
+import Sticky from '../sticky';
 export default {
   component: FlowNavigation,
@@ -51,26 +54,12 @@ export const Variants = () => {
         steps={[
           {
             label: 'Amount',
-            hoverLabel: (
-              <>
-                <div>
-                  <strong>100 GBP</strong>
-                </div>
-                0.2351 ETH
-              </>
-            ),
+            hoverLabel: <strong>100 GBP</strong>,
             onClick: () => setActiveStep(0),
           },
           {
             label: 'You',
-            hoverLabel: (
-              <>
-                <div>
-                  <strong>Elena Durante</strong>
-                </div>
-                elenadurante@test.com
-              </>
-            ),
+            hoverLabel: <>Elena Durante - elenadurante@test.com</>,
             onClick: () => setActiveStep(1),
           },
           { label: 'Recipient', hoverLabel: 'Daniele Tomboro', onClick: () => setActiveStep(2) },
@@ -201,6 +190,69 @@ export const Variants = () => {
   ) : null;
 };
+export const SendFlow = () => {
+  const [activeStep, setActiveStep] = useState(2);
+  const steps = [
+    {
+      label: 'Recipient',
+      onClick: handleStepClick(0),
+    },
+    {
+      label: 'Amount',
+      hoverLabel: (
+        <>
+          You send 100 GBP <br />
+          You get 99.39 GBP{' '}
+        </>
+      ),
+      ...(activeStep > 1 && { onClick: handleStepClick(1) }),
+    },
+    {
+      label: 'Review',
+      ...(activeStep > 2 && { onClick: handleStepClick(2) }),
+    },
+    {
+      label: 'Pay',
+      ...(activeStep > 3 && { onClick: handleStepClick(3) }),
+    },
+  ];
+  function handleStepClick(step) {
+    return () => {
+      setActiveStep(step);
+    };
+  }
+  return (
+    <>
+      <FlowNavigation
+        avatar={
+          <Avatar type={AvatarType.ICON} size={Size.MEDIUM}>
+            <ProfileIcon />
+          </Avatar>
+        }
+        logo={<Logo />}
+        activeStep={activeStep}
+        steps={steps}
+        onClose={() => alert('close & move away')}
+        onGoBack={() => setActiveStep(activeStep > 0 ? activeStep - 1 : 0)}
+      />
+      <Body className="m-a-3">
+        <Display type={Typography.DISPLAY_SMALL}>{steps[activeStep].label} Step</Display>
+        <br />
+        {lorem10}
+      </Body>
+      <Sticky>
+        <div className="d-flex justify-content-center align-items-center p-a-3">
+          <Button disabled={activeStep === 3} block onClick={() => setActiveStep(activeStep + 1)}>
+            Continue
+          </Button>
+        </div>
+      </Sticky>
+    </>
+  );
+};
 export const WithOverlayHeaderComparison = () => {
   const [activeStep, setActiveStep] = useState(4);
   const [closed, setClosed] = useState(false);

package/src/flowNavigation/FlowNavigation.tsx CHANGED Viewed

@@ -71,11 +71,7 @@ const FlowNavigation = ({
               <div className="np-flow-header__left">{logo}</div>
             )}
             {!screenSm && !done && (
-              <AnimatedLabel
-                className="m-x-1"
-                labels={steps.map((step) => step.label)}
-                activeLabel={activeStep}
-              />
+              <AnimatedLabel className="m-x-1" steps={steps} activeLabel={activeStep} />
             )}
           </>
         }

package/src/flowNavigation/animatedLabel/AnimatedLabel.css CHANGED Viewed

@@ -11,7 +11,7 @@
   transform: translateX(-8px);
   transition: all 0.3s ease-in;
 }
-.np-animated-label--in {
+.np-animated-label--active {
   height: auto;
   opacity: 1;
   position: relative;
@@ -19,3 +19,12 @@
   transform: translateX(0);
   transition: all 0.3s ease-in 0.3s;
 }
+.np-animated-label-option {
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+}
+.np-animated-label-option:not(.disabled):hover,
+.np-animated-label-option:not(.disabled):focus-visible {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+}

package/src/flowNavigation/animatedLabel/AnimatedLabel.less CHANGED Viewed

@@ -1,4 +1,5 @@
 @import (reference) "../../../node_modules/@transferwise/neptune-css/src/less/addons/_spacing-utilities.less";
+@import (reference) "../../../node_modules/@transferwise/neptune-css/src/less/ring.less";
 @transition-timing-function: ease-in-out;
 @transition-duration: 0.3s;
@@ -20,7 +21,7 @@
     transition: all @transition-duration ease-in;
   }
-  &--in {
+  &--active {
     height: auto;
     opacity: 1;
     position: relative;
@@ -28,4 +29,12 @@
     transform: translateX(0);
     transition: all @transition-duration ease-in @transition-duration;
   }
+  &-option {
+    border-radius: var(--radius-small);
+    &:not(.disabled):hover,
+    &:not(.disabled):focus-visible {
+      .ring();
+    }
+  }
 }