@transferwise/components 46.46.0 → 46.47.0

package/build/inputs/InputGroup.js

@@ -34,45 +34,25 @@ function InputGroup({
   className,
   children
 }) {
-  const inputAttributes = contexts.useInputAttributes({
-    nonLabelable: true
-  });
   const [paddingStart, setPaddingStart] = React.useState(inputPaddingInitialState(addonStart));
   const [paddingEnd, setPaddingEnd] = React.useState(inputPaddingInitialState(addonEnd));
-  return (
-    /*#__PURE__*/
-    /* Prevent nested controls from being labeled redundantly */
-    jsxRuntime.jsx(contexts.FieldLabelIdContextProvider, {
-      value: undefined,
-      children: /*#__PURE__*/jsxRuntime.jsx(contexts.InputIdContextProvider, {
-        value: undefined,
-        children: /*#__PURE__*/jsxRuntime.jsx(contexts.InputDescribedByProvider, {
-          value: undefined,
-          children: /*#__PURE__*/jsxRuntime.jsx(contexts.InputInvalidProvider, {
-            value: undefined,
-            children: /*#__PURE__*/jsxRuntime.jsx(InputPaddingStartContext.Provider, {
-              value: React.useMemo(() => [paddingStart, setPaddingStart], [paddingStart]),
-              children: /*#__PURE__*/jsxRuntime.jsx(InputPaddingEndContext.Provider, {
-                value: React.useMemo(() => [paddingEnd, setPaddingEnd], [paddingEnd]),
-                children: /*#__PURE__*/jsxRuntime.jsxs("fieldset", {
-                  ...inputAttributes,
-                  disabled: disabled,
-                  className: classNames__default.default(className, 'np-input-group'),
-                  children: [addonStart != null ? /*#__PURE__*/jsxRuntime.jsx(InputAddon, {
-                    placement: "start",
-                    ...addonStart
-                  }) : null, children, addonEnd != null ? /*#__PURE__*/jsxRuntime.jsx(InputAddon, {
-                    placement: "end",
-                    ...addonEnd
-                  }) : null]
-                })
-              })
-            })
-          })
-        })
+  return /*#__PURE__*/jsxRuntime.jsx(InputPaddingStartContext.Provider, {
+    value: React.useMemo(() => [paddingStart, setPaddingStart], [paddingStart]),
+    children: /*#__PURE__*/jsxRuntime.jsx(InputPaddingEndContext.Provider, {
+      value: React.useMemo(() => [paddingEnd, setPaddingEnd], [paddingEnd]),
+      children: /*#__PURE__*/jsxRuntime.jsxs("fieldset", {
+        disabled: disabled,
+        className: classNames__default.default(className, 'np-input-group'),
+        children: [addonStart != null ? /*#__PURE__*/jsxRuntime.jsx(InputAddon, {
+          placement: "start",
+          ...addonStart
+        }) : null, children, addonEnd != null ? /*#__PURE__*/jsxRuntime.jsx(InputAddon, {
+          placement: "end",
+          ...addonEnd
+        }) : null]
       })
     })
-  );
+  });
 }
 const inputAddonContentWidthAddendByPadding = {
   none: 0,
@@ -98,17 +78,33 @@ function InputAddon({
       setInputPadding(entry.contentRect.width + Number.parseFloat(targetStyle.paddingInlineStart) + Number.parseFloat(targetStyle.paddingInlineEnd));
     }
   });
-  return /*#__PURE__*/jsxRuntime.jsx("span", {
-    ref: ref,
-    className: classNames__default.default('np-input-addon', {
-      'np-input-addon--placement-start': placement === 'start',
-      'np-input-addon--placement-end': placement === 'end'
-    }, interactive && 'np-input-addon--interactive', {
-      'np-input-addon--padding-sm': padding === 'sm',
-      'np-input-addon--padding-md': padding === 'md'
-    }),
-    children: content
-  });
+  return (
+    /*#__PURE__*/
+    /* Prevent nested controls from being labeled redundantly */
+    jsxRuntime.jsx(contexts.FieldLabelIdContextProvider, {
+      value: undefined,
+      children: /*#__PURE__*/jsxRuntime.jsx(contexts.InputIdContextProvider, {
+        value: undefined,
+        children: /*#__PURE__*/jsxRuntime.jsx(contexts.InputDescribedByProvider, {
+          value: undefined,
+          children: /*#__PURE__*/jsxRuntime.jsx(contexts.InputInvalidProvider, {
+            value: undefined,
+            children: /*#__PURE__*/jsxRuntime.jsx("span", {
+              ref: ref,
+              className: classNames__default.default('np-input-addon', {
+                'np-input-addon--placement-start': placement === 'start',
+                'np-input-addon--placement-end': placement === 'end'
+              }, interactive && 'np-input-addon--interactive', {
+                'np-input-addon--padding-sm': padding === 'sm',
+                'np-input-addon--padding-md': padding === 'md'
+              }),
+              children: content
+            })
+          })
+        })
+      })
+    })
+  );
 }
 
 exports.InputGroup = InputGroup;

package/build/inputs/InputGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputGroup.js","sources":["../../src/inputs/InputGroup.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { createContext, useContext, useMemo, useRef, useState } from 'react';\n\nimport { useResizeObserver } from '../common/hooks/useResizeObserver';\nimport { cssValueWithUnit } from '../utilities/cssValueWithUnit';\nimport {\n  FieldLabelIdContextProvider,\n  InputDescribedByProvider,\n  InputIdContextProvider,\n  InputInvalidProvider,\n  useInputAttributes,\n} from './contexts';\n\ntype InputPaddingContextType = [\n  number | string | undefined,\n  React.Dispatch<React.SetStateAction<number | string | undefined>>,\n];\n\nconst InputPaddingStartContext = createContext<InputPaddingContextType>([undefined, () => {}]);\n\nconst InputPaddingEndContext = createContext<InputPaddingContextType>([undefined, () => {}]);\n\nexport function useInputPaddings() {\n  const [paddingStart] = useContext(InputPaddingStartContext);\n  const [paddingEnd] = useContext(InputPaddingEndContext);\n\n  return {\n    paddingInlineStart: paddingStart,\n    paddingInlineEnd: paddingEnd,\n  } satisfies React.CSSProperties;\n}\n\ninterface InputGroupAddon {\n  content: React.ReactNode;\n  initialContentWidth?: number | string;\n  interactive?: boolean;\n  padding?: 'none' | 'sm' | 'md';\n}\n\nexport interface InputGroupProps {\n  addonStart?: InputGroupAddon;\n  addonEnd?: InputGroupAddon;\n  disabled?: boolean;\n  className?: string;\n  children?: React.ReactNode;\n}\n\nfunction inputPaddingInitialState({\n  initialContentWidth,\n  padding = inputAddonDefaultPadding,\n}: Pick<\n  InputGroupAddon,\n  'initialContentWidth' | 'padding'\n> = {}): () => InputPaddingContextType[0] {\n  return () =>\n    initialContentWidth != null\n      ? `calc(${cssValueWithUnit(initialContentWidth)} + ${cssValueWithUnit(\n          inputAddonContentWidthAddendByPadding[padding],\n        )})`\n      : undefined;\n}\n\nexport function InputGroup({\n  addonStart,\n  addonEnd,\n  disabled,\n  className,\n  children,\n}: InputGroupProps) {\n  const inputAttributes = useInputAttributes({ nonLabelable: true });\n\n  const [paddingStart, setPaddingStart] = useState(inputPaddingInitialState(addonStart));\n  const [paddingEnd, setPaddingEnd] = useState(inputPaddingInitialState(addonEnd));\n\n  return (\n    /* Prevent nested controls from being labeled redundantly */\n    <FieldLabelIdContextProvider value={undefined}>\n      <InputIdContextProvider value={undefined}>\n        <InputDescribedByProvider value={undefined}>\n          <InputInvalidProvider value={undefined}>\n            <InputPaddingStartContext.Provider\n              value={useMemo(() => [paddingStart, setPaddingStart], [paddingStart])}\n            >\n              <InputPaddingEndContext.Provider\n                value={useMemo(() => [paddingEnd, setPaddingEnd], [paddingEnd])}\n              >\n                <fieldset\n                  {...inputAttributes}\n                  disabled={disabled}\n                  className={classNames(className, 'np-input-group')}\n                >\n                  {addonStart != null ? <InputAddon placement=\"start\" {...addonStart} /> : null}\n                  {children}\n                  {addonEnd != null ? <InputAddon placement=\"end\" {...addonEnd} /> : null}\n                </fieldset>\n              </InputPaddingEndContext.Provider>\n            </InputPaddingStartContext.Provider>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelIdContextProvider>\n  );\n}\n\ninterface InputAddonProps extends Omit<InputGroupAddon, 'initialContentWidth'> {\n  placement: 'start' | 'end';\n}\n\nconst inputAddonContentWidthAddendByPadding = {\n  none: 0,\n  sm: '1rem',\n  md: '1.5rem',\n} satisfies {\n  [key in NonNullable<InputAddonProps['padding']>]: InputPaddingContextType[0];\n};\n\nconst inputAddonDefaultPadding = 'md' satisfies InputAddonProps['padding'];\n\nfunction InputAddon({\n  placement,\n  content,\n  interactive,\n  padding = inputAddonDefaultPadding,\n}: InputAddonProps) {\n  const [, setInputPadding] = useContext(\n    placement === 'start' ? InputPaddingStartContext : InputPaddingEndContext,\n  );\n\n  const ref = useRef<HTMLSpanElement>(null);\n  useResizeObserver(ref, (entry) => {\n    // TODO: Remove fallback once most browsers support `borderBoxSize`\n    const inlineSize = entry.borderBoxSize?.[0]?.inlineSize;\n    if (inlineSize != null) {\n      setInputPadding(inlineSize);\n    } else {\n      const targetStyle = getComputedStyle(entry.target);\n      setInputPadding(\n        entry.contentRect.width +\n          Number.parseFloat(targetStyle.paddingInlineStart) +\n          Number.parseFloat(targetStyle.paddingInlineEnd),\n      );\n    }\n  });\n\n  return (\n    <span\n      ref={ref}\n      className={classNames(\n        'np-input-addon',\n        {\n          'np-input-addon--placement-start': placement === 'start',\n          'np-input-addon--placement-end': placement === 'end',\n        },\n        interactive && 'np-input-addon--interactive',\n        {\n          'np-input-addon--padding-sm': padding === 'sm',\n          'np-input-addon--padding-md': padding === 'md',\n        },\n      )}\n    >\n      {content}\n    </span>\n  );\n}\n"],"names":["InputPaddingStartContext","createContext","undefined","InputPaddingEndContext","useInputPaddings","paddingStart","useContext","paddingEnd","paddingInlineStart","paddingInlineEnd","inputPaddingInitialState","initialContentWidth","padding","inputAddonDefaultPadding","cssValueWithUnit","inputAddonContentWidthAddendByPadding","InputGroup","addonStart","addonEnd","disabled","className","children","inputAttributes","useInputAttributes","nonLabelable","setPaddingStart","useState","setPaddingEnd","_jsx","FieldLabelIdContextProvider","value","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","Provider","useMemo","_jsxs","classNames","InputAddon","placement","none","sm","md","content","interactive","setInputPadding","ref","useRef","useResizeObserver","entry","inlineSize","borderBoxSize","targetStyle","getComputedStyle","target","contentRect","width","Number","parseFloat"],"mappings":"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"}
+{"version":3,"file":"InputGroup.js","sources":["../../src/inputs/InputGroup.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { createContext, useContext, useMemo, useRef, useState } from 'react';\n\nimport { useResizeObserver } from '../common/hooks/useResizeObserver';\nimport { cssValueWithUnit } from '../utilities/cssValueWithUnit';\nimport {\n  FieldLabelIdContextProvider,\n  InputDescribedByProvider,\n  InputIdContextProvider,\n  InputInvalidProvider,\n  useInputAttributes,\n} from './contexts';\n\ntype InputPaddingContextType = [\n  number | string | undefined,\n  React.Dispatch<React.SetStateAction<number | string | undefined>>,\n];\n\nconst InputPaddingStartContext = createContext<InputPaddingContextType>([undefined, () => {}]);\n\nconst InputPaddingEndContext = createContext<InputPaddingContextType>([undefined, () => {}]);\n\nexport function useInputPaddings() {\n  const [paddingStart] = useContext(InputPaddingStartContext);\n  const [paddingEnd] = useContext(InputPaddingEndContext);\n\n  return {\n    paddingInlineStart: paddingStart,\n    paddingInlineEnd: paddingEnd,\n  } satisfies React.CSSProperties;\n}\n\ninterface InputGroupAddon {\n  content: React.ReactNode;\n  initialContentWidth?: number | string;\n  interactive?: boolean;\n  padding?: 'none' | 'sm' | 'md';\n}\n\nexport interface InputGroupProps {\n  addonStart?: InputGroupAddon;\n  addonEnd?: InputGroupAddon;\n  disabled?: boolean;\n  className?: string;\n  children?: React.ReactNode;\n}\n\nfunction inputPaddingInitialState({\n  initialContentWidth,\n  padding = inputAddonDefaultPadding,\n}: Pick<\n  InputGroupAddon,\n  'initialContentWidth' | 'padding'\n> = {}): () => InputPaddingContextType[0] {\n  return () =>\n    initialContentWidth != null\n      ? `calc(${cssValueWithUnit(initialContentWidth)} + ${cssValueWithUnit(\n          inputAddonContentWidthAddendByPadding[padding],\n        )})`\n      : undefined;\n}\n\nexport function InputGroup({\n  addonStart,\n  addonEnd,\n  disabled,\n  className,\n  children,\n}: InputGroupProps) {\n  const [paddingStart, setPaddingStart] = useState(inputPaddingInitialState(addonStart));\n  const [paddingEnd, setPaddingEnd] = useState(inputPaddingInitialState(addonEnd));\n\n  return (\n    <InputPaddingStartContext.Provider\n      value={useMemo(() => [paddingStart, setPaddingStart], [paddingStart])}\n    >\n      <InputPaddingEndContext.Provider\n        value={useMemo(() => [paddingEnd, setPaddingEnd], [paddingEnd])}\n      >\n        <fieldset disabled={disabled} className={classNames(className, 'np-input-group')}>\n          {addonStart != null ? <InputAddon placement=\"start\" {...addonStart} /> : null}\n          {children}\n          {addonEnd != null ? <InputAddon placement=\"end\" {...addonEnd} /> : null}\n        </fieldset>\n      </InputPaddingEndContext.Provider>\n    </InputPaddingStartContext.Provider>\n  );\n}\n\ninterface InputAddonProps extends Omit<InputGroupAddon, 'initialContentWidth'> {\n  placement: 'start' | 'end';\n}\n\nconst inputAddonContentWidthAddendByPadding = {\n  none: 0,\n  sm: '1rem',\n  md: '1.5rem',\n} satisfies {\n  [key in NonNullable<InputAddonProps['padding']>]: InputPaddingContextType[0];\n};\n\nconst inputAddonDefaultPadding = 'md' satisfies InputAddonProps['padding'];\n\nfunction InputAddon({\n  placement,\n  content,\n  interactive,\n  padding = inputAddonDefaultPadding,\n}: InputAddonProps) {\n  const [, setInputPadding] = useContext(\n    placement === 'start' ? InputPaddingStartContext : InputPaddingEndContext,\n  );\n\n  const ref = useRef<HTMLSpanElement>(null);\n  useResizeObserver(ref, (entry) => {\n    // TODO: Remove fallback once most browsers support `borderBoxSize`\n    const inlineSize = entry.borderBoxSize?.[0]?.inlineSize;\n    if (inlineSize != null) {\n      setInputPadding(inlineSize);\n    } else {\n      const targetStyle = getComputedStyle(entry.target);\n      setInputPadding(\n        entry.contentRect.width +\n          Number.parseFloat(targetStyle.paddingInlineStart) +\n          Number.parseFloat(targetStyle.paddingInlineEnd),\n      );\n    }\n  });\n\n  return (\n    /* Prevent nested controls from being labeled redundantly */\n    <FieldLabelIdContextProvider value={undefined}>\n      <InputIdContextProvider value={undefined}>\n        <InputDescribedByProvider value={undefined}>\n          <InputInvalidProvider value={undefined}>\n            <span\n              ref={ref}\n              className={classNames(\n                'np-input-addon',\n                {\n                  'np-input-addon--placement-start': placement === 'start',\n                  'np-input-addon--placement-end': placement === 'end',\n                },\n                interactive && 'np-input-addon--interactive',\n                {\n                  'np-input-addon--padding-sm': padding === 'sm',\n                  'np-input-addon--padding-md': padding === 'md',\n                },\n              )}\n            >\n              {content}\n            </span>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelIdContextProvider>\n  );\n}\n"],"names":["InputPaddingStartContext","createContext","undefined","InputPaddingEndContext","useInputPaddings","paddingStart","useContext","paddingEnd","paddingInlineStart","paddingInlineEnd","inputPaddingInitialState","initialContentWidth","padding","inputAddonDefaultPadding","cssValueWithUnit","inputAddonContentWidthAddendByPadding","InputGroup","addonStart","addonEnd","disabled","className","children","setPaddingStart","useState","setPaddingEnd","_jsx","Provider","value","useMemo","_jsxs","classNames","InputAddon","placement","none","sm","md","content","interactive","setInputPadding","ref","useRef","useResizeObserver","entry","inlineSize","borderBoxSize","targetStyle","getComputedStyle","target","contentRect","width","Number","parseFloat","FieldLabelIdContextProvider","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider"],"mappings":"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"}

package/build/inputs/InputGroup.mjs

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import { useState, useMemo, useContext, useRef, createContext } from 'react';
 import { useResizeObserver } from '../common/hooks/useResizeObserver.mjs';
 import { cssValueWithUnit } from '../utilities/cssValueWithUnit.mjs';
-import { useInputAttributes, FieldLabelIdContextProvider, InputIdContextProvider, InputDescribedByProvider, InputInvalidProvider } from './contexts.mjs';
+import { FieldLabelIdContextProvider, InputIdContextProvider, InputDescribedByProvider, InputInvalidProvider } from './contexts.mjs';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 const InputPaddingStartContext = /*#__PURE__*/createContext([undefined, () => {}]);
@@ -28,45 +28,25 @@ function InputGroup({
   className,
   children
 }) {
-  const inputAttributes = useInputAttributes({
-    nonLabelable: true
-  });
   const [paddingStart, setPaddingStart] = useState(inputPaddingInitialState(addonStart));
   const [paddingEnd, setPaddingEnd] = useState(inputPaddingInitialState(addonEnd));
-  return (
-    /*#__PURE__*/
-    /* Prevent nested controls from being labeled redundantly */
-    jsx(FieldLabelIdContextProvider, {
-      value: undefined,
-      children: /*#__PURE__*/jsx(InputIdContextProvider, {
-        value: undefined,
-        children: /*#__PURE__*/jsx(InputDescribedByProvider, {
-          value: undefined,
-          children: /*#__PURE__*/jsx(InputInvalidProvider, {
-            value: undefined,
-            children: /*#__PURE__*/jsx(InputPaddingStartContext.Provider, {
-              value: useMemo(() => [paddingStart, setPaddingStart], [paddingStart]),
-              children: /*#__PURE__*/jsx(InputPaddingEndContext.Provider, {
-                value: useMemo(() => [paddingEnd, setPaddingEnd], [paddingEnd]),
-                children: /*#__PURE__*/jsxs("fieldset", {
-                  ...inputAttributes,
-                  disabled: disabled,
-                  className: classNames(className, 'np-input-group'),
-                  children: [addonStart != null ? /*#__PURE__*/jsx(InputAddon, {
-                    placement: "start",
-                    ...addonStart
-                  }) : null, children, addonEnd != null ? /*#__PURE__*/jsx(InputAddon, {
-                    placement: "end",
-                    ...addonEnd
-                  }) : null]
-                })
-              })
-            })
-          })
-        })
+  return /*#__PURE__*/jsx(InputPaddingStartContext.Provider, {
+    value: useMemo(() => [paddingStart, setPaddingStart], [paddingStart]),
+    children: /*#__PURE__*/jsx(InputPaddingEndContext.Provider, {
+      value: useMemo(() => [paddingEnd, setPaddingEnd], [paddingEnd]),
+      children: /*#__PURE__*/jsxs("fieldset", {
+        disabled: disabled,
+        className: classNames(className, 'np-input-group'),
+        children: [addonStart != null ? /*#__PURE__*/jsx(InputAddon, {
+          placement: "start",
+          ...addonStart
+        }) : null, children, addonEnd != null ? /*#__PURE__*/jsx(InputAddon, {
+          placement: "end",
+          ...addonEnd
+        }) : null]
       })
     })
-  );
+  });
 }
 const inputAddonContentWidthAddendByPadding = {
   none: 0,
@@ -92,17 +72,33 @@ function InputAddon({
       setInputPadding(entry.contentRect.width + Number.parseFloat(targetStyle.paddingInlineStart) + Number.parseFloat(targetStyle.paddingInlineEnd));
     }
   });
-  return /*#__PURE__*/jsx("span", {
-    ref: ref,
-    className: classNames('np-input-addon', {
-      'np-input-addon--placement-start': placement === 'start',
-      'np-input-addon--placement-end': placement === 'end'
-    }, interactive && 'np-input-addon--interactive', {
-      'np-input-addon--padding-sm': padding === 'sm',
-      'np-input-addon--padding-md': padding === 'md'
-    }),
-    children: content
-  });
+  return (
+    /*#__PURE__*/
+    /* Prevent nested controls from being labeled redundantly */
+    jsx(FieldLabelIdContextProvider, {
+      value: undefined,
+      children: /*#__PURE__*/jsx(InputIdContextProvider, {
+        value: undefined,
+        children: /*#__PURE__*/jsx(InputDescribedByProvider, {
+          value: undefined,
+          children: /*#__PURE__*/jsx(InputInvalidProvider, {
+            value: undefined,
+            children: /*#__PURE__*/jsx("span", {
+              ref: ref,
+              className: classNames('np-input-addon', {
+                'np-input-addon--placement-start': placement === 'start',
+                'np-input-addon--placement-end': placement === 'end'
+              }, interactive && 'np-input-addon--interactive', {
+                'np-input-addon--padding-sm': padding === 'sm',
+                'np-input-addon--padding-md': padding === 'md'
+              }),
+              children: content
+            })
+          })
+        })
+      })
+    })
+  );
 }
 
 export { InputGroup, useInputPaddings };

package/build/inputs/InputGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"InputGroup.mjs","sources":["../../src/inputs/InputGroup.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { createContext, useContext, useMemo, useRef, useState } from 'react';\n\nimport { useResizeObserver } from '../common/hooks/useResizeObserver';\nimport { cssValueWithUnit } from '../utilities/cssValueWithUnit';\nimport {\n  FieldLabelIdContextProvider,\n  InputDescribedByProvider,\n  InputIdContextProvider,\n  InputInvalidProvider,\n  useInputAttributes,\n} from './contexts';\n\ntype InputPaddingContextType = [\n  number | string | undefined,\n  React.Dispatch<React.SetStateAction<number | string | undefined>>,\n];\n\nconst InputPaddingStartContext = createContext<InputPaddingContextType>([undefined, () => {}]);\n\nconst InputPaddingEndContext = createContext<InputPaddingContextType>([undefined, () => {}]);\n\nexport function useInputPaddings() {\n  const [paddingStart] = useContext(InputPaddingStartContext);\n  const [paddingEnd] = useContext(InputPaddingEndContext);\n\n  return {\n    paddingInlineStart: paddingStart,\n    paddingInlineEnd: paddingEnd,\n  } satisfies React.CSSProperties;\n}\n\ninterface InputGroupAddon {\n  content: React.ReactNode;\n  initialContentWidth?: number | string;\n  interactive?: boolean;\n  padding?: 'none' | 'sm' | 'md';\n}\n\nexport interface InputGroupProps {\n  addonStart?: InputGroupAddon;\n  addonEnd?: InputGroupAddon;\n  disabled?: boolean;\n  className?: string;\n  children?: React.ReactNode;\n}\n\nfunction inputPaddingInitialState({\n  initialContentWidth,\n  padding = inputAddonDefaultPadding,\n}: Pick<\n  InputGroupAddon,\n  'initialContentWidth' | 'padding'\n> = {}): () => InputPaddingContextType[0] {\n  return () =>\n    initialContentWidth != null\n      ? `calc(${cssValueWithUnit(initialContentWidth)} + ${cssValueWithUnit(\n          inputAddonContentWidthAddendByPadding[padding],\n        )})`\n      : undefined;\n}\n\nexport function InputGroup({\n  addonStart,\n  addonEnd,\n  disabled,\n  className,\n  children,\n}: InputGroupProps) {\n  const inputAttributes = useInputAttributes({ nonLabelable: true });\n\n  const [paddingStart, setPaddingStart] = useState(inputPaddingInitialState(addonStart));\n  const [paddingEnd, setPaddingEnd] = useState(inputPaddingInitialState(addonEnd));\n\n  return (\n    /* Prevent nested controls from being labeled redundantly */\n    <FieldLabelIdContextProvider value={undefined}>\n      <InputIdContextProvider value={undefined}>\n        <InputDescribedByProvider value={undefined}>\n          <InputInvalidProvider value={undefined}>\n            <InputPaddingStartContext.Provider\n              value={useMemo(() => [paddingStart, setPaddingStart], [paddingStart])}\n            >\n              <InputPaddingEndContext.Provider\n                value={useMemo(() => [paddingEnd, setPaddingEnd], [paddingEnd])}\n              >\n                <fieldset\n                  {...inputAttributes}\n                  disabled={disabled}\n                  className={classNames(className, 'np-input-group')}\n                >\n                  {addonStart != null ? <InputAddon placement=\"start\" {...addonStart} /> : null}\n                  {children}\n                  {addonEnd != null ? <InputAddon placement=\"end\" {...addonEnd} /> : null}\n                </fieldset>\n              </InputPaddingEndContext.Provider>\n            </InputPaddingStartContext.Provider>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelIdContextProvider>\n  );\n}\n\ninterface InputAddonProps extends Omit<InputGroupAddon, 'initialContentWidth'> {\n  placement: 'start' | 'end';\n}\n\nconst inputAddonContentWidthAddendByPadding = {\n  none: 0,\n  sm: '1rem',\n  md: '1.5rem',\n} satisfies {\n  [key in NonNullable<InputAddonProps['padding']>]: InputPaddingContextType[0];\n};\n\nconst inputAddonDefaultPadding = 'md' satisfies InputAddonProps['padding'];\n\nfunction InputAddon({\n  placement,\n  content,\n  interactive,\n  padding = inputAddonDefaultPadding,\n}: InputAddonProps) {\n  const [, setInputPadding] = useContext(\n    placement === 'start' ? InputPaddingStartContext : InputPaddingEndContext,\n  );\n\n  const ref = useRef<HTMLSpanElement>(null);\n  useResizeObserver(ref, (entry) => {\n    // TODO: Remove fallback once most browsers support `borderBoxSize`\n    const inlineSize = entry.borderBoxSize?.[0]?.inlineSize;\n    if (inlineSize != null) {\n      setInputPadding(inlineSize);\n    } else {\n      const targetStyle = getComputedStyle(entry.target);\n      setInputPadding(\n        entry.contentRect.width +\n          Number.parseFloat(targetStyle.paddingInlineStart) +\n          Number.parseFloat(targetStyle.paddingInlineEnd),\n      );\n    }\n  });\n\n  return (\n    <span\n      ref={ref}\n      className={classNames(\n        'np-input-addon',\n        {\n          'np-input-addon--placement-start': placement === 'start',\n          'np-input-addon--placement-end': placement === 'end',\n        },\n        interactive && 'np-input-addon--interactive',\n        {\n          'np-input-addon--padding-sm': padding === 'sm',\n          'np-input-addon--padding-md': padding === 'md',\n        },\n      )}\n    >\n      {content}\n    </span>\n  );\n}\n"],"names":["InputPaddingStartContext","createContext","undefined","InputPaddingEndContext","useInputPaddings","paddingStart","useContext","paddingEnd","paddingInlineStart","paddingInlineEnd","inputPaddingInitialState","initialContentWidth","padding","inputAddonDefaultPadding","cssValueWithUnit","inputAddonContentWidthAddendByPadding","InputGroup","addonStart","addonEnd","disabled","className","children","inputAttributes","useInputAttributes","nonLabelable","setPaddingStart","useState","setPaddingEnd","_jsx","FieldLabelIdContextProvider","value","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","Provider","useMemo","_jsxs","classNames","InputAddon","placement","none","sm","md","content","interactive","setInputPadding","ref","useRef","useResizeObserver","entry","inlineSize","borderBoxSize","targetStyle","getComputedStyle","target","contentRect","width","Number","parseFloat"],"mappings":"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"}
+{"version":3,"file":"InputGroup.mjs","sources":["../../src/inputs/InputGroup.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { createContext, useContext, useMemo, useRef, useState } from 'react';\n\nimport { useResizeObserver } from '../common/hooks/useResizeObserver';\nimport { cssValueWithUnit } from '../utilities/cssValueWithUnit';\nimport {\n  FieldLabelIdContextProvider,\n  InputDescribedByProvider,\n  InputIdContextProvider,\n  InputInvalidProvider,\n  useInputAttributes,\n} from './contexts';\n\ntype InputPaddingContextType = [\n  number | string | undefined,\n  React.Dispatch<React.SetStateAction<number | string | undefined>>,\n];\n\nconst InputPaddingStartContext = createContext<InputPaddingContextType>([undefined, () => {}]);\n\nconst InputPaddingEndContext = createContext<InputPaddingContextType>([undefined, () => {}]);\n\nexport function useInputPaddings() {\n  const [paddingStart] = useContext(InputPaddingStartContext);\n  const [paddingEnd] = useContext(InputPaddingEndContext);\n\n  return {\n    paddingInlineStart: paddingStart,\n    paddingInlineEnd: paddingEnd,\n  } satisfies React.CSSProperties;\n}\n\ninterface InputGroupAddon {\n  content: React.ReactNode;\n  initialContentWidth?: number | string;\n  interactive?: boolean;\n  padding?: 'none' | 'sm' | 'md';\n}\n\nexport interface InputGroupProps {\n  addonStart?: InputGroupAddon;\n  addonEnd?: InputGroupAddon;\n  disabled?: boolean;\n  className?: string;\n  children?: React.ReactNode;\n}\n\nfunction inputPaddingInitialState({\n  initialContentWidth,\n  padding = inputAddonDefaultPadding,\n}: Pick<\n  InputGroupAddon,\n  'initialContentWidth' | 'padding'\n> = {}): () => InputPaddingContextType[0] {\n  return () =>\n    initialContentWidth != null\n      ? `calc(${cssValueWithUnit(initialContentWidth)} + ${cssValueWithUnit(\n          inputAddonContentWidthAddendByPadding[padding],\n        )})`\n      : undefined;\n}\n\nexport function InputGroup({\n  addonStart,\n  addonEnd,\n  disabled,\n  className,\n  children,\n}: InputGroupProps) {\n  const [paddingStart, setPaddingStart] = useState(inputPaddingInitialState(addonStart));\n  const [paddingEnd, setPaddingEnd] = useState(inputPaddingInitialState(addonEnd));\n\n  return (\n    <InputPaddingStartContext.Provider\n      value={useMemo(() => [paddingStart, setPaddingStart], [paddingStart])}\n    >\n      <InputPaddingEndContext.Provider\n        value={useMemo(() => [paddingEnd, setPaddingEnd], [paddingEnd])}\n      >\n        <fieldset disabled={disabled} className={classNames(className, 'np-input-group')}>\n          {addonStart != null ? <InputAddon placement=\"start\" {...addonStart} /> : null}\n          {children}\n          {addonEnd != null ? <InputAddon placement=\"end\" {...addonEnd} /> : null}\n        </fieldset>\n      </InputPaddingEndContext.Provider>\n    </InputPaddingStartContext.Provider>\n  );\n}\n\ninterface InputAddonProps extends Omit<InputGroupAddon, 'initialContentWidth'> {\n  placement: 'start' | 'end';\n}\n\nconst inputAddonContentWidthAddendByPadding = {\n  none: 0,\n  sm: '1rem',\n  md: '1.5rem',\n} satisfies {\n  [key in NonNullable<InputAddonProps['padding']>]: InputPaddingContextType[0];\n};\n\nconst inputAddonDefaultPadding = 'md' satisfies InputAddonProps['padding'];\n\nfunction InputAddon({\n  placement,\n  content,\n  interactive,\n  padding = inputAddonDefaultPadding,\n}: InputAddonProps) {\n  const [, setInputPadding] = useContext(\n    placement === 'start' ? InputPaddingStartContext : InputPaddingEndContext,\n  );\n\n  const ref = useRef<HTMLSpanElement>(null);\n  useResizeObserver(ref, (entry) => {\n    // TODO: Remove fallback once most browsers support `borderBoxSize`\n    const inlineSize = entry.borderBoxSize?.[0]?.inlineSize;\n    if (inlineSize != null) {\n      setInputPadding(inlineSize);\n    } else {\n      const targetStyle = getComputedStyle(entry.target);\n      setInputPadding(\n        entry.contentRect.width +\n          Number.parseFloat(targetStyle.paddingInlineStart) +\n          Number.parseFloat(targetStyle.paddingInlineEnd),\n      );\n    }\n  });\n\n  return (\n    /* Prevent nested controls from being labeled redundantly */\n    <FieldLabelIdContextProvider value={undefined}>\n      <InputIdContextProvider value={undefined}>\n        <InputDescribedByProvider value={undefined}>\n          <InputInvalidProvider value={undefined}>\n            <span\n              ref={ref}\n              className={classNames(\n                'np-input-addon',\n                {\n                  'np-input-addon--placement-start': placement === 'start',\n                  'np-input-addon--placement-end': placement === 'end',\n                },\n                interactive && 'np-input-addon--interactive',\n                {\n                  'np-input-addon--padding-sm': padding === 'sm',\n                  'np-input-addon--padding-md': padding === 'md',\n                },\n              )}\n            >\n              {content}\n            </span>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelIdContextProvider>\n  );\n}\n"],"names":["InputPaddingStartContext","createContext","undefined","InputPaddingEndContext","useInputPaddings","paddingStart","useContext","paddingEnd","paddingInlineStart","paddingInlineEnd","inputPaddingInitialState","initialContentWidth","padding","inputAddonDefaultPadding","cssValueWithUnit","inputAddonContentWidthAddendByPadding","InputGroup","addonStart","addonEnd","disabled","className","children","setPaddingStart","useState","setPaddingEnd","_jsx","Provider","value","useMemo","_jsxs","classNames","InputAddon","placement","none","sm","md","content","interactive","setInputPadding","ref","useRef","useResizeObserver","entry","inlineSize","borderBoxSize","targetStyle","getComputedStyle","target","contentRect","width","Number","parseFloat","FieldLabelIdContextProvider","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider"],"mappings":"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"}

package/build/types/inputs/InputGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputGroup.d.ts","sourceRoot":"","sources":["../../../src/inputs/InputGroup.tsx"],"names":[],"mappings":"AAsBA,wBAAgB,gBAAgB;;;EAQ/B;AAED,UAAU,eAAe;IACvB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,mBAAmB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;CAChC;AAED,MAAM,WAAW,eAAe;IAC9B,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAiBD,wBAAgB,UAAU,CAAC,EACzB,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,QAAQ,GACT,EAAE,eAAe,+BAkCjB"}
+{"version":3,"file":"InputGroup.d.ts","sourceRoot":"","sources":["../../../src/inputs/InputGroup.tsx"],"names":[],"mappings":"AAsBA,wBAAgB,gBAAgB;;;EAQ/B;AAED,UAAU,eAAe;IACvB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,mBAAmB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;CAChC;AAED,MAAM,WAAW,eAAe;IAC9B,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAiBD,wBAAgB,UAAU,CAAC,EACzB,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,QAAQ,GACT,EAAE,eAAe,+BAmBjB"}

package/build/types/uploadInput/UploadInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UploadInput.d.ts","sourceRoot":"","sources":["../../../src/uploadInput/UploadInput.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,WAAW,EAAiC,MAAM,WAAW,CAAC;AAMvE,OAAO,EAAE,YAAY,EAAe,cAAc,EAAE,MAAM,SAAS,CAAC;AACpE,OAAqB,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAE9E,OAAmB,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAEtE,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,YAAY,EAAE,CAAC;IAEhC;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;OAIG;IACH,YAAY,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,OAAO,CAAC,cAAc,CAAC,CAAC;IAE9D;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;IAErD;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IAEjD;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IAEhD;;OAEG;IACH,aAAa,CAAC,EAAE;QACd;;WAEG;QACH,KAAK,CAAC,EAAE,MAAM,CAAC;QAEf;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAEvB;;WAEG;QACH,WAAW,CAAC,EAAE,MAAM,CAAC;QAErB;;WAEG;QACH,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IAEF;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAE9B;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC,GAAG,IAAI,CACN,iBAAiB,EACjB,UAAU,GAAG,UAAU,GAAG,WAAW,GAAG,WAAW,GAAG,aAAa,GAAG,IAAI,GAAG,mBAAmB,CACjG,GACC,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC,GACnC,WAAW,CAAC;AAQd,QAAA,MAAM,WAAW,uQAoBd,gBAAgB,gCAwPlB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"UploadInput.d.ts","sourceRoot":"","sources":["../../../src/uploadInput/UploadInput.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,WAAW,EAAiC,MAAM,WAAW,CAAC;AAOvE,OAAO,EAAE,YAAY,EAAe,cAAc,EAAE,MAAM,SAAS,CAAC;AACpE,OAAqB,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAE9E,OAAmB,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAEtE,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,YAAY,EAAE,CAAC;IAEhC;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;OAIG;IACH,YAAY,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,OAAO,CAAC,cAAc,CAAC,CAAC;IAE9D;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;IAErD;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IAEjD;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IAEhD;;OAEG;IACH,aAAa,CAAC,EAAE;QACd;;WAEG;QACH,KAAK,CAAC,EAAE,MAAM,CAAC;QAEf;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAEvB;;WAEG;QACH,WAAW,CAAC,EAAE,MAAM,CAAC;QAErB;;WAEG;QACH,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IAEF;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAE9B;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC,GAAG,IAAI,CACN,iBAAiB,EACjB,UAAU,GAAG,UAAU,GAAG,WAAW,GAAG,WAAW,GAAG,aAAa,GAAG,IAAI,GAAG,mBAAmB,CACjG,GACC,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC,GACnC,WAAW,CAAC;AAQd,QAAA,MAAM,WAAW,uQAoBd,gBAAgB,gCA8PlB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/build/uploadInput/UploadInput.js

@@ -4,6 +4,7 @@ var classNames = require('classnames');
 var React = require('react');
 var reactIntl = require('react-intl');
 var Button = require('../button/Button.js');
+var contexts = require('../inputs/contexts.js');
 var Modal = require('../modal/Modal.js');
 var isSizeValid = require('../upload/utils/isSizeValid/isSizeValid.js');
 var isTypeValid = require('../upload/utils/isTypeValid/isTypeValid.js');
@@ -48,6 +49,9 @@ const UploadInput = ({
   sizeLimitErrorMessage,
   uploadButtonTitle
 }) => {
+  const inputAttributes = contexts.useInputAttributes({
+    nonLabelable: true
+  });
   const [markedFileForDelete, setMarkedFileForDelete] = React.useState(null);
   const [mounted, setMounted] = React.useState(false);
   const {
@@ -204,9 +208,11 @@ const UploadInput = ({
   }, [onFilesChange, uploadedFiles]); // eslint-disable-line react-hooks/exhaustive-deps
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      role: "group",
       className: classNames__default.default('np-upload-input', className, {
         disabled
       }),
+      ...inputAttributes,
       children: [uploadedFiles.map(file => /*#__PURE__*/jsxRuntime.jsx(UploadItem.default, {
         file: file,
         singleFileUpload: !multiple,

package/build/uploadInput/UploadInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"UploadInput.js","sources":["../../src/uploadInput/UploadInput.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { useEffect, useRef, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Button from '../button';\nimport { CommonProps, ControlType, Priority, Status } from '../common';\nimport Modal from '../modal';\nimport { isSizeValid } from '../upload/utils/isSizeValid';\nimport { isTypeValid } from '../upload/utils/isTypeValid';\n\nimport MESSAGES from './UploadInput.messages';\nimport { UploadedFile, UploadError, UploadResponse } from './types';\nimport UploadButton, { UploadButtonProps } from './uploadButton/UploadButton';\nimport { DEFAULT_SIZE_LIMIT, imageFileTypes } from './uploadButton/defaults';\nimport UploadItem, { UploadItemProps } from './uploadItem/UploadItem';\n\nexport type UploadInputProps = {\n  /**\n   * List of already existing, failed or in progress files\n   */\n  files?: readonly UploadedFile[];\n\n  /**\n   * The key of the file in the returned FormData object (default: file)\n   */\n  fileInputName?: string;\n\n  /**\n   * Callback that handles form submission\n   *\n   * @param formData\n   */\n  onUploadFile: (formData: FormData) => Promise<UploadResponse>;\n\n  /**\n   * Provide a callback if the file can be removed/deleted from the server\n   * Your app is responsible for reloading the uploaded files list and updating the component to ensure that the file has in fact been deleted successfully\n   *\n   * @param id\n   */\n  onDeleteFile?: (id: string | number) => Promise<any>;\n\n  /**\n   * Provide a callback to trigger on validation error\n   *\n   * @param file\n   */\n  onValidationError?: (file: UploadedFile) => void;\n\n  /**\n   * Provide a callback to trigger on change whenever the files are updated\n   *\n   * @param files\n   */\n  onFilesChange?: (files: UploadedFile[]) => void;\n\n  /**\n   * Confirmation modal displayed on delete\n   */\n  deleteConfirm?: {\n    /**\n     * The title of the confirmation modal on delete\n     */\n    title?: string;\n\n    /**\n     * The body of the confirmation modal on delete\n     */\n    body?: React.ReactNode;\n\n    /**\n     * The confirm button text of the confirmation modal on delete\n     */\n    confirmText?: string;\n\n    /**\n     * The cancel button text of the confirmation modal on delete\n     */\n    cancelText?: string;\n  };\n\n  /**\n   * Maximum number of files allowed, if provided, shows error below file item\n   */\n  maxFiles?: number;\n\n  /**\n   * Error message to show when the maximum number of files are uploaded already\n   */\n  maxFilesErrorMessage?: string;\n\n  /**\n   * Error message to show when files over a allowed size limit are uploaded\n   */\n  sizeLimitErrorMessage?: string;\n} & Pick<\n  UploadButtonProps,\n  'disabled' | 'multiple' | 'fileTypes' | 'sizeLimit' | 'description' | 'id' | 'uploadButtonTitle'\n> &\n  Pick<UploadItemProps, 'onDownload'> &\n  CommonProps;\n\nfunction generateFileId(file: File) {\n  const { name, size } = file;\n  const uploadTimeStamp = new Date().getTime();\n  return `${name}_${size}_${uploadTimeStamp}`;\n}\n\nconst UploadInput = ({\n  files = [],\n  fileInputName = 'file',\n  className,\n  deleteConfirm,\n  disabled,\n  multiple = false,\n  fileTypes = imageFileTypes,\n  sizeLimit = DEFAULT_SIZE_LIMIT,\n  description,\n  onUploadFile,\n  onDeleteFile,\n  onValidationError,\n  onFilesChange,\n  onDownload,\n  maxFiles,\n  maxFilesErrorMessage,\n  id,\n  sizeLimitErrorMessage,\n  uploadButtonTitle,\n}: UploadInputProps) => {\n  const [markedFileForDelete, setMarkedFileForDelete] = useState<UploadedFile | null>(null);\n  const [mounted, setMounted] = useState(false);\n  const { formatMessage } = useIntl();\n\n  const PROGRESS_STATUSES = new Set([Status.PENDING, Status.PROCESSING]);\n\n  const [uploadedFiles, setUploadedFiles] = useState<readonly UploadedFile[]>(\n    multiple || files.length === 0 ? files : [files[0]],\n  );\n\n  const uploadedFilesListReference = useRef(multiple || files.length === 0 ? files : [files[0]]);\n\n  function addFileToList(recentUploadedFile: UploadedFile) {\n    function addToList(listToAddTo: readonly UploadedFile[]) {\n      return [...listToAddTo, recentUploadedFile];\n    }\n\n    setUploadedFiles(addToList);\n    uploadedFilesListReference.current = addToList(uploadedFilesListReference.current);\n  }\n\n  const removeFileFromList = (file: UploadedFile) => {\n    function filterOutFrom(listToFilterFrom: readonly UploadedFile[]) {\n      return listToFilterFrom.filter(\n        (fileInList) => file !== fileInList && file.id !== fileInList.id,\n      );\n    }\n\n    setUploadedFiles(filterOutFrom);\n    uploadedFilesListReference.current = filterOutFrom(uploadedFilesListReference.current);\n  };\n\n  const modifyFileInList = (file: UploadedFile, updates: Partial<UploadedFile>) => {\n    const updateListItem = (listToUpdate: readonly UploadedFile[]) =>\n      listToUpdate.map((fileInList) => {\n        return fileInList === file || fileInList.id === file.id\n          ? { ...file, ...updates }\n          : fileInList;\n      });\n\n    setUploadedFiles(updateListItem);\n    uploadedFilesListReference.current = updateListItem(uploadedFilesListReference.current);\n  };\n\n  const removeFile = (file: UploadedFile) => {\n    const { id, status } = file;\n\n    if (status === Status.FAILED) {\n      // If removing a failed upload, we're just updating the view\n      removeFileFromList(file);\n    } else if (onDeleteFile && id) {\n      // Set status to PROCESSING\n      modifyFileInList(file, { status: Status.PROCESSING, error: undefined });\n\n      // Notify host app about deletion\n      onDeleteFile(id)\n        .then(() => removeFileFromList(file))\n        .catch((error) => {\n          modifyFileInList(file, { error: error as UploadError });\n        });\n    }\n  };\n\n  function handleFileUploadFailure(file: File, failureMessage: string) {\n    const { name } = file;\n    const id = generateFileId(file);\n    const failedUpload = {\n      id,\n      filename: name,\n      status: Status.FAILED,\n      error: failureMessage,\n    };\n\n    addFileToList(failedUpload);\n\n    if (onValidationError) {\n      onValidationError(failedUpload);\n    }\n  }\n\n  function getNumberOfFilesUploaded() {\n    const uploadInitiatedStatus = new Set([Status.SUCCEEDED, Status.PENDING]);\n    const validFiles = uploadedFilesListReference.current.filter(\n      (file) => file.status && uploadInitiatedStatus.has(file.status),\n    );\n    return validFiles.length;\n  }\n\n  function areMaximumFilesUploadedAlready() {\n    if (!maxFiles) {\n      return false;\n    }\n\n    const numberOfValidFiles = getNumberOfFilesUploaded();\n    return numberOfValidFiles >= maxFiles;\n  }\n\n  // One or more files selected, create entries for them\n  const addFiles = (selectedFiles: FileList) => {\n    for (let i = 0; i < selectedFiles.length; i += 1) {\n      const file = selectedFiles.item(i);\n\n      // Returning a FormData[] array instead of FileList so we can filter out incorrect files\n      const formData = new FormData();\n\n      if (file) {\n        const { name } = file;\n        const id = generateFileId(file);\n\n        const allowedFileTypes = typeof fileTypes === 'string' ? fileTypes : fileTypes.join(',');\n\n        // Check if file type is valid\n        if (!isTypeValid(file, allowedFileTypes)) {\n          handleFileUploadFailure(file, formatMessage(MESSAGES.fileTypeNotSupported));\n          continue;\n        }\n\n        // Check if the filesize is valid\n        // Convert to rough bytes\n        if (!isSizeValid(file, sizeLimit * 1000)) {\n          const failureMessage = sizeLimitErrorMessage || formatMessage(MESSAGES.fileIsTooLarge);\n          handleFileUploadFailure(file, failureMessage);\n          continue;\n        }\n\n        if (areMaximumFilesUploadedAlready()) {\n          const failureMessage =\n            maxFilesErrorMessage ||\n            formatMessage(MESSAGES.maximumFilesAlreadyUploaded, { maxFilesAllowed: maxFiles });\n          handleFileUploadFailure(file, failureMessage);\n          continue;\n        }\n\n        formData.append(fileInputName, file);\n        const pendingFile = {\n          id,\n          filename: name,\n          status: Status.PENDING,\n        };\n\n        addFileToList(pendingFile);\n\n        // Start uploading the file\n        onUploadFile(formData)\n          .then(({ id, url, error }: UploadResponse) => {\n            // Replace the temporary id with the final one received from the API, and also set any errors\n            modifyFileInList(pendingFile, { id, url, error, status: Status.SUCCEEDED });\n          })\n          .catch((error) => {\n            modifyFileInList(pendingFile, { error: error as UploadError, status: Status.FAILED });\n          });\n\n        if (!multiple) {\n          // Only upload a single file\n          break;\n        }\n      }\n    }\n  };\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  useEffect(() => {\n    if (onFilesChange && mounted) {\n      onFilesChange([...uploadedFiles]);\n    }\n  }, [onFilesChange, uploadedFiles]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  return (\n    <>\n      <div className={classNames('np-upload-input', className, { disabled })}>\n        {uploadedFiles.map((file) => (\n          <UploadItem\n            key={file.id}\n            file={file}\n            singleFileUpload={!multiple}\n            canDelete={\n              (!!onDeleteFile || file.status === Status.FAILED) &&\n              (!file.status || !PROGRESS_STATUSES.has(file.status))\n            }\n            onDelete={\n              file.status === Status.FAILED\n                ? () => removeFile(file)\n                : () => setMarkedFileForDelete(file)\n            }\n            onDownload={onDownload}\n          />\n        ))}\n        {(multiple || (!multiple && !uploadedFiles.length)) && (\n          <UploadButton\n            id={id}\n            uploadButtonTitle={uploadButtonTitle}\n            disabled={areMaximumFilesUploadedAlready() || disabled}\n            multiple={multiple}\n            fileTypes={fileTypes}\n            sizeLimit={sizeLimit}\n            description={description}\n            maxFiles={maxFiles}\n            onChange={addFiles}\n          />\n        )}\n      </div>\n      <Modal\n        title={\n          deleteConfirm?.title !== undefined\n            ? deleteConfirm.title\n            : formatMessage(MESSAGES.deleteModalTitle)\n        }\n        body={\n          deleteConfirm?.body !== undefined\n            ? deleteConfirm.body\n            : formatMessage(MESSAGES.deleteModalBody)\n        }\n        open={!!markedFileForDelete}\n        footer={\n          <>\n            <Button\n              block\n              onClick={() => {\n                setMarkedFileForDelete(null);\n              }}\n            >\n              {deleteConfirm?.cancelText || formatMessage(MESSAGES.deleteModalCancelButtonText)}\n            </Button>\n            <Button\n              block\n              priority={Priority.SECONDARY}\n              type={ControlType.NEGATIVE}\n              onClick={() => {\n                if (markedFileForDelete) {\n                  removeFile(markedFileForDelete);\n                }\n                setMarkedFileForDelete(null);\n              }}\n            >\n              {deleteConfirm?.confirmText || formatMessage(MESSAGES.deleteModalConfirmButtonText)}\n            </Button>\n          </>\n        }\n        onClose={() => {\n          setMarkedFileForDelete(null);\n        }}\n      />\n    </>\n  );\n};\n\nexport default UploadInput;\n"],"names":["generateFileId","file","name","size","uploadTimeStamp","Date","getTime","UploadInput","files","fileInputName","className","deleteConfirm","disabled","multiple","fileTypes","imageFileTypes","sizeLimit","DEFAULT_SIZE_LIMIT","description","onUploadFile","onDeleteFile","onValidationError","onFilesChange","onDownload","maxFiles","maxFilesErrorMessage","id","sizeLimitErrorMessage","uploadButtonTitle","markedFileForDelete","setMarkedFileForDelete","useState","mounted","setMounted","formatMessage","useIntl","PROGRESS_STATUSES","Set","Status","PENDING","PROCESSING","uploadedFiles","setUploadedFiles","length","uploadedFilesListReference","useRef","addFileToList","recentUploadedFile","addToList","listToAddTo","current","removeFileFromList","filterOutFrom","listToFilterFrom","filter","fileInList","modifyFileInList","updates","updateListItem","listToUpdate","map","removeFile","status","FAILED","error","undefined","then","catch","handleFileUploadFailure","failureMessage","failedUpload","filename","getNumberOfFilesUploaded","uploadInitiatedStatus","SUCCEEDED","validFiles","has","areMaximumFilesUploadedAlready","numberOfValidFiles","addFiles","selectedFiles","i","item","formData","FormData","allowedFileTypes","join","isTypeValid","MESSAGES","fileTypeNotSupported","isSizeValid","fileIsTooLarge","maximumFilesAlreadyUploaded","maxFilesAllowed","append","pendingFile","url","useEffect","_jsxs","_Fragment","children","classNames","_jsx","UploadItem","singleFileUpload","canDelete","onDelete","UploadButton","onChange","Modal","title","deleteModalTitle","body","deleteModalBody","open","footer","Button","block","onClick","cancelText","deleteModalCancelButtonText","priority","Priority","SECONDARY","type","ControlType","NEGATIVE","confirmText","deleteModalConfirmButtonText","onClose"],"mappings":"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"}
+{"version":3,"file":"UploadInput.js","sources":["../../src/uploadInput/UploadInput.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { useEffect, useRef, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Button from '../button';\nimport { CommonProps, ControlType, Priority, Status } from '../common';\nimport { useInputAttributes } from '../inputs/contexts';\nimport Modal from '../modal';\nimport { isSizeValid } from '../upload/utils/isSizeValid';\nimport { isTypeValid } from '../upload/utils/isTypeValid';\n\nimport MESSAGES from './UploadInput.messages';\nimport { UploadedFile, UploadError, UploadResponse } from './types';\nimport UploadButton, { UploadButtonProps } from './uploadButton/UploadButton';\nimport { DEFAULT_SIZE_LIMIT, imageFileTypes } from './uploadButton/defaults';\nimport UploadItem, { UploadItemProps } from './uploadItem/UploadItem';\n\nexport type UploadInputProps = {\n  /**\n   * List of already existing, failed or in progress files\n   */\n  files?: readonly UploadedFile[];\n\n  /**\n   * The key of the file in the returned FormData object (default: file)\n   */\n  fileInputName?: string;\n\n  /**\n   * Callback that handles form submission\n   *\n   * @param formData\n   */\n  onUploadFile: (formData: FormData) => Promise<UploadResponse>;\n\n  /**\n   * Provide a callback if the file can be removed/deleted from the server\n   * Your app is responsible for reloading the uploaded files list and updating the component to ensure that the file has in fact been deleted successfully\n   *\n   * @param id\n   */\n  onDeleteFile?: (id: string | number) => Promise<any>;\n\n  /**\n   * Provide a callback to trigger on validation error\n   *\n   * @param file\n   */\n  onValidationError?: (file: UploadedFile) => void;\n\n  /**\n   * Provide a callback to trigger on change whenever the files are updated\n   *\n   * @param files\n   */\n  onFilesChange?: (files: UploadedFile[]) => void;\n\n  /**\n   * Confirmation modal displayed on delete\n   */\n  deleteConfirm?: {\n    /**\n     * The title of the confirmation modal on delete\n     */\n    title?: string;\n\n    /**\n     * The body of the confirmation modal on delete\n     */\n    body?: React.ReactNode;\n\n    /**\n     * The confirm button text of the confirmation modal on delete\n     */\n    confirmText?: string;\n\n    /**\n     * The cancel button text of the confirmation modal on delete\n     */\n    cancelText?: string;\n  };\n\n  /**\n   * Maximum number of files allowed, if provided, shows error below file item\n   */\n  maxFiles?: number;\n\n  /**\n   * Error message to show when the maximum number of files are uploaded already\n   */\n  maxFilesErrorMessage?: string;\n\n  /**\n   * Error message to show when files over a allowed size limit are uploaded\n   */\n  sizeLimitErrorMessage?: string;\n} & Pick<\n  UploadButtonProps,\n  'disabled' | 'multiple' | 'fileTypes' | 'sizeLimit' | 'description' | 'id' | 'uploadButtonTitle'\n> &\n  Pick<UploadItemProps, 'onDownload'> &\n  CommonProps;\n\nfunction generateFileId(file: File) {\n  const { name, size } = file;\n  const uploadTimeStamp = new Date().getTime();\n  return `${name}_${size}_${uploadTimeStamp}`;\n}\n\nconst UploadInput = ({\n  files = [],\n  fileInputName = 'file',\n  className,\n  deleteConfirm,\n  disabled,\n  multiple = false,\n  fileTypes = imageFileTypes,\n  sizeLimit = DEFAULT_SIZE_LIMIT,\n  description,\n  onUploadFile,\n  onDeleteFile,\n  onValidationError,\n  onFilesChange,\n  onDownload,\n  maxFiles,\n  maxFilesErrorMessage,\n  id,\n  sizeLimitErrorMessage,\n  uploadButtonTitle,\n}: UploadInputProps) => {\n  const inputAttributes = useInputAttributes({ nonLabelable: true });\n\n  const [markedFileForDelete, setMarkedFileForDelete] = useState<UploadedFile | null>(null);\n  const [mounted, setMounted] = useState(false);\n  const { formatMessage } = useIntl();\n\n  const PROGRESS_STATUSES = new Set([Status.PENDING, Status.PROCESSING]);\n\n  const [uploadedFiles, setUploadedFiles] = useState<readonly UploadedFile[]>(\n    multiple || files.length === 0 ? files : [files[0]],\n  );\n\n  const uploadedFilesListReference = useRef(multiple || files.length === 0 ? files : [files[0]]);\n\n  function addFileToList(recentUploadedFile: UploadedFile) {\n    function addToList(listToAddTo: readonly UploadedFile[]) {\n      return [...listToAddTo, recentUploadedFile];\n    }\n\n    setUploadedFiles(addToList);\n    uploadedFilesListReference.current = addToList(uploadedFilesListReference.current);\n  }\n\n  const removeFileFromList = (file: UploadedFile) => {\n    function filterOutFrom(listToFilterFrom: readonly UploadedFile[]) {\n      return listToFilterFrom.filter(\n        (fileInList) => file !== fileInList && file.id !== fileInList.id,\n      );\n    }\n\n    setUploadedFiles(filterOutFrom);\n    uploadedFilesListReference.current = filterOutFrom(uploadedFilesListReference.current);\n  };\n\n  const modifyFileInList = (file: UploadedFile, updates: Partial<UploadedFile>) => {\n    const updateListItem = (listToUpdate: readonly UploadedFile[]) =>\n      listToUpdate.map((fileInList) => {\n        return fileInList === file || fileInList.id === file.id\n          ? { ...file, ...updates }\n          : fileInList;\n      });\n\n    setUploadedFiles(updateListItem);\n    uploadedFilesListReference.current = updateListItem(uploadedFilesListReference.current);\n  };\n\n  const removeFile = (file: UploadedFile) => {\n    const { id, status } = file;\n\n    if (status === Status.FAILED) {\n      // If removing a failed upload, we're just updating the view\n      removeFileFromList(file);\n    } else if (onDeleteFile && id) {\n      // Set status to PROCESSING\n      modifyFileInList(file, { status: Status.PROCESSING, error: undefined });\n\n      // Notify host app about deletion\n      onDeleteFile(id)\n        .then(() => removeFileFromList(file))\n        .catch((error) => {\n          modifyFileInList(file, { error: error as UploadError });\n        });\n    }\n  };\n\n  function handleFileUploadFailure(file: File, failureMessage: string) {\n    const { name } = file;\n    const id = generateFileId(file);\n    const failedUpload = {\n      id,\n      filename: name,\n      status: Status.FAILED,\n      error: failureMessage,\n    };\n\n    addFileToList(failedUpload);\n\n    if (onValidationError) {\n      onValidationError(failedUpload);\n    }\n  }\n\n  function getNumberOfFilesUploaded() {\n    const uploadInitiatedStatus = new Set([Status.SUCCEEDED, Status.PENDING]);\n    const validFiles = uploadedFilesListReference.current.filter(\n      (file) => file.status && uploadInitiatedStatus.has(file.status),\n    );\n    return validFiles.length;\n  }\n\n  function areMaximumFilesUploadedAlready() {\n    if (!maxFiles) {\n      return false;\n    }\n\n    const numberOfValidFiles = getNumberOfFilesUploaded();\n    return numberOfValidFiles >= maxFiles;\n  }\n\n  // One or more files selected, create entries for them\n  const addFiles = (selectedFiles: FileList) => {\n    for (let i = 0; i < selectedFiles.length; i += 1) {\n      const file = selectedFiles.item(i);\n\n      // Returning a FormData[] array instead of FileList so we can filter out incorrect files\n      const formData = new FormData();\n\n      if (file) {\n        const { name } = file;\n        const id = generateFileId(file);\n\n        const allowedFileTypes = typeof fileTypes === 'string' ? fileTypes : fileTypes.join(',');\n\n        // Check if file type is valid\n        if (!isTypeValid(file, allowedFileTypes)) {\n          handleFileUploadFailure(file, formatMessage(MESSAGES.fileTypeNotSupported));\n          continue;\n        }\n\n        // Check if the filesize is valid\n        // Convert to rough bytes\n        if (!isSizeValid(file, sizeLimit * 1000)) {\n          const failureMessage = sizeLimitErrorMessage || formatMessage(MESSAGES.fileIsTooLarge);\n          handleFileUploadFailure(file, failureMessage);\n          continue;\n        }\n\n        if (areMaximumFilesUploadedAlready()) {\n          const failureMessage =\n            maxFilesErrorMessage ||\n            formatMessage(MESSAGES.maximumFilesAlreadyUploaded, { maxFilesAllowed: maxFiles });\n          handleFileUploadFailure(file, failureMessage);\n          continue;\n        }\n\n        formData.append(fileInputName, file);\n        const pendingFile = {\n          id,\n          filename: name,\n          status: Status.PENDING,\n        };\n\n        addFileToList(pendingFile);\n\n        // Start uploading the file\n        onUploadFile(formData)\n          .then(({ id, url, error }: UploadResponse) => {\n            // Replace the temporary id with the final one received from the API, and also set any errors\n            modifyFileInList(pendingFile, { id, url, error, status: Status.SUCCEEDED });\n          })\n          .catch((error) => {\n            modifyFileInList(pendingFile, { error: error as UploadError, status: Status.FAILED });\n          });\n\n        if (!multiple) {\n          // Only upload a single file\n          break;\n        }\n      }\n    }\n  };\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  useEffect(() => {\n    if (onFilesChange && mounted) {\n      onFilesChange([...uploadedFiles]);\n    }\n  }, [onFilesChange, uploadedFiles]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  return (\n    <>\n      <div\n        role=\"group\"\n        className={classNames('np-upload-input', className, { disabled })}\n        {...inputAttributes}\n      >\n        {uploadedFiles.map((file) => (\n          <UploadItem\n            key={file.id}\n            file={file}\n            singleFileUpload={!multiple}\n            canDelete={\n              (!!onDeleteFile || file.status === Status.FAILED) &&\n              (!file.status || !PROGRESS_STATUSES.has(file.status))\n            }\n            onDelete={\n              file.status === Status.FAILED\n                ? () => removeFile(file)\n                : () => setMarkedFileForDelete(file)\n            }\n            onDownload={onDownload}\n          />\n        ))}\n        {(multiple || (!multiple && !uploadedFiles.length)) && (\n          <UploadButton\n            id={id}\n            uploadButtonTitle={uploadButtonTitle}\n            disabled={areMaximumFilesUploadedAlready() || disabled}\n            multiple={multiple}\n            fileTypes={fileTypes}\n            sizeLimit={sizeLimit}\n            description={description}\n            maxFiles={maxFiles}\n            onChange={addFiles}\n          />\n        )}\n      </div>\n      <Modal\n        title={\n          deleteConfirm?.title !== undefined\n            ? deleteConfirm.title\n            : formatMessage(MESSAGES.deleteModalTitle)\n        }\n        body={\n          deleteConfirm?.body !== undefined\n            ? deleteConfirm.body\n            : formatMessage(MESSAGES.deleteModalBody)\n        }\n        open={!!markedFileForDelete}\n        footer={\n          <>\n            <Button\n              block\n              onClick={() => {\n                setMarkedFileForDelete(null);\n              }}\n            >\n              {deleteConfirm?.cancelText || formatMessage(MESSAGES.deleteModalCancelButtonText)}\n            </Button>\n            <Button\n              block\n              priority={Priority.SECONDARY}\n              type={ControlType.NEGATIVE}\n              onClick={() => {\n                if (markedFileForDelete) {\n                  removeFile(markedFileForDelete);\n                }\n                setMarkedFileForDelete(null);\n              }}\n            >\n              {deleteConfirm?.confirmText || formatMessage(MESSAGES.deleteModalConfirmButtonText)}\n            </Button>\n          </>\n        }\n        onClose={() => {\n          setMarkedFileForDelete(null);\n        }}\n      />\n    </>\n  );\n};\n\nexport default UploadInput;\n"],"names":["generateFileId","file","name","size","uploadTimeStamp","Date","getTime","UploadInput","files","fileInputName","className","deleteConfirm","disabled","multiple","fileTypes","imageFileTypes","sizeLimit","DEFAULT_SIZE_LIMIT","description","onUploadFile","onDeleteFile","onValidationError","onFilesChange","onDownload","maxFiles","maxFilesErrorMessage","id","sizeLimitErrorMessage","uploadButtonTitle","inputAttributes","useInputAttributes","nonLabelable","markedFileForDelete","setMarkedFileForDelete","useState","mounted","setMounted","formatMessage","useIntl","PROGRESS_STATUSES","Set","Status","PENDING","PROCESSING","uploadedFiles","setUploadedFiles","length","uploadedFilesListReference","useRef","addFileToList","recentUploadedFile","addToList","listToAddTo","current","removeFileFromList","filterOutFrom","listToFilterFrom","filter","fileInList","modifyFileInList","updates","updateListItem","listToUpdate","map","removeFile","status","FAILED","error","undefined","then","catch","handleFileUploadFailure","failureMessage","failedUpload","filename","getNumberOfFilesUploaded","uploadInitiatedStatus","SUCCEEDED","validFiles","has","areMaximumFilesUploadedAlready","numberOfValidFiles","addFiles","selectedFiles","i","item","formData","FormData","allowedFileTypes","join","isTypeValid","MESSAGES","fileTypeNotSupported","isSizeValid","fileIsTooLarge","maximumFilesAlreadyUploaded","maxFilesAllowed","append","pendingFile","url","useEffect","_jsxs","_Fragment","children","role","classNames","_jsx","UploadItem","singleFileUpload","canDelete","onDelete","UploadButton","onChange","Modal","title","deleteModalTitle","body","deleteModalBody","open","footer","Button","block","onClick","cancelText","deleteModalCancelButtonText","priority","Priority","SECONDARY","type","ControlType","NEGATIVE","confirmText","deleteModalConfirmButtonText","onClose"],"mappings":"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"}

package/build/uploadInput/UploadInput.mjs

@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import { useState, useRef, useEffect } from 'react';
 import { useIntl } from 'react-intl';
 import Button from '../button/Button.mjs';
+import { useInputAttributes } from '../inputs/contexts.mjs';
 import Modal from '../modal/Modal.mjs';
 import { isSizeValid } from '../upload/utils/isSizeValid/isSizeValid.mjs';
 import { isTypeValid } from '../upload/utils/isTypeValid/isTypeValid.mjs';
@@ -42,6 +43,9 @@ const UploadInput = ({
   sizeLimitErrorMessage,
   uploadButtonTitle
 }) => {
+  const inputAttributes = useInputAttributes({
+    nonLabelable: true
+  });
   const [markedFileForDelete, setMarkedFileForDelete] = useState(null);
   const [mounted, setMounted] = useState(false);
   const {
@@ -198,9 +202,11 @@ const UploadInput = ({
   }, [onFilesChange, uploadedFiles]); // eslint-disable-line react-hooks/exhaustive-deps
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsxs("div", {
+      role: "group",
       className: classNames('np-upload-input', className, {
         disabled
       }),
+      ...inputAttributes,
       children: [uploadedFiles.map(file => /*#__PURE__*/jsx(UploadItem, {
         file: file,
         singleFileUpload: !multiple,

package/build/uploadInput/UploadInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"UploadInput.mjs","sources":["../../src/uploadInput/UploadInput.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { useEffect, useRef, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Button from '../button';\nimport { CommonProps, ControlType, Priority, Status } from '../common';\nimport Modal from '../modal';\nimport { isSizeValid } from '../upload/utils/isSizeValid';\nimport { isTypeValid } from '../upload/utils/isTypeValid';\n\nimport MESSAGES from './UploadInput.messages';\nimport { UploadedFile, UploadError, UploadResponse } from './types';\nimport UploadButton, { UploadButtonProps } from './uploadButton/UploadButton';\nimport { DEFAULT_SIZE_LIMIT, imageFileTypes } from './uploadButton/defaults';\nimport UploadItem, { UploadItemProps } from './uploadItem/UploadItem';\n\nexport type UploadInputProps = {\n  /**\n   * List of already existing, failed or in progress files\n   */\n  files?: readonly UploadedFile[];\n\n  /**\n   * The key of the file in the returned FormData object (default: file)\n   */\n  fileInputName?: string;\n\n  /**\n   * Callback that handles form submission\n   *\n   * @param formData\n   */\n  onUploadFile: (formData: FormData) => Promise<UploadResponse>;\n\n  /**\n   * Provide a callback if the file can be removed/deleted from the server\n   * Your app is responsible for reloading the uploaded files list and updating the component to ensure that the file has in fact been deleted successfully\n   *\n   * @param id\n   */\n  onDeleteFile?: (id: string | number) => Promise<any>;\n\n  /**\n   * Provide a callback to trigger on validation error\n   *\n   * @param file\n   */\n  onValidationError?: (file: UploadedFile) => void;\n\n  /**\n   * Provide a callback to trigger on change whenever the files are updated\n   *\n   * @param files\n   */\n  onFilesChange?: (files: UploadedFile[]) => void;\n\n  /**\n   * Confirmation modal displayed on delete\n   */\n  deleteConfirm?: {\n    /**\n     * The title of the confirmation modal on delete\n     */\n    title?: string;\n\n    /**\n     * The body of the confirmation modal on delete\n     */\n    body?: React.ReactNode;\n\n    /**\n     * The confirm button text of the confirmation modal on delete\n     */\n    confirmText?: string;\n\n    /**\n     * The cancel button text of the confirmation modal on delete\n     */\n    cancelText?: string;\n  };\n\n  /**\n   * Maximum number of files allowed, if provided, shows error below file item\n   */\n  maxFiles?: number;\n\n  /**\n   * Error message to show when the maximum number of files are uploaded already\n   */\n  maxFilesErrorMessage?: string;\n\n  /**\n   * Error message to show when files over a allowed size limit are uploaded\n   */\n  sizeLimitErrorMessage?: string;\n} & Pick<\n  UploadButtonProps,\n  'disabled' | 'multiple' | 'fileTypes' | 'sizeLimit' | 'description' | 'id' | 'uploadButtonTitle'\n> &\n  Pick<UploadItemProps, 'onDownload'> &\n  CommonProps;\n\nfunction generateFileId(file: File) {\n  const { name, size } = file;\n  const uploadTimeStamp = new Date().getTime();\n  return `${name}_${size}_${uploadTimeStamp}`;\n}\n\nconst UploadInput = ({\n  files = [],\n  fileInputName = 'file',\n  className,\n  deleteConfirm,\n  disabled,\n  multiple = false,\n  fileTypes = imageFileTypes,\n  sizeLimit = DEFAULT_SIZE_LIMIT,\n  description,\n  onUploadFile,\n  onDeleteFile,\n  onValidationError,\n  onFilesChange,\n  onDownload,\n  maxFiles,\n  maxFilesErrorMessage,\n  id,\n  sizeLimitErrorMessage,\n  uploadButtonTitle,\n}: UploadInputProps) => {\n  const [markedFileForDelete, setMarkedFileForDelete] = useState<UploadedFile | null>(null);\n  const [mounted, setMounted] = useState(false);\n  const { formatMessage } = useIntl();\n\n  const PROGRESS_STATUSES = new Set([Status.PENDING, Status.PROCESSING]);\n\n  const [uploadedFiles, setUploadedFiles] = useState<readonly UploadedFile[]>(\n    multiple || files.length === 0 ? files : [files[0]],\n  );\n\n  const uploadedFilesListReference = useRef(multiple || files.length === 0 ? files : [files[0]]);\n\n  function addFileToList(recentUploadedFile: UploadedFile) {\n    function addToList(listToAddTo: readonly UploadedFile[]) {\n      return [...listToAddTo, recentUploadedFile];\n    }\n\n    setUploadedFiles(addToList);\n    uploadedFilesListReference.current = addToList(uploadedFilesListReference.current);\n  }\n\n  const removeFileFromList = (file: UploadedFile) => {\n    function filterOutFrom(listToFilterFrom: readonly UploadedFile[]) {\n      return listToFilterFrom.filter(\n        (fileInList) => file !== fileInList && file.id !== fileInList.id,\n      );\n    }\n\n    setUploadedFiles(filterOutFrom);\n    uploadedFilesListReference.current = filterOutFrom(uploadedFilesListReference.current);\n  };\n\n  const modifyFileInList = (file: UploadedFile, updates: Partial<UploadedFile>) => {\n    const updateListItem = (listToUpdate: readonly UploadedFile[]) =>\n      listToUpdate.map((fileInList) => {\n        return fileInList === file || fileInList.id === file.id\n          ? { ...file, ...updates }\n          : fileInList;\n      });\n\n    setUploadedFiles(updateListItem);\n    uploadedFilesListReference.current = updateListItem(uploadedFilesListReference.current);\n  };\n\n  const removeFile = (file: UploadedFile) => {\n    const { id, status } = file;\n\n    if (status === Status.FAILED) {\n      // If removing a failed upload, we're just updating the view\n      removeFileFromList(file);\n    } else if (onDeleteFile && id) {\n      // Set status to PROCESSING\n      modifyFileInList(file, { status: Status.PROCESSING, error: undefined });\n\n      // Notify host app about deletion\n      onDeleteFile(id)\n        .then(() => removeFileFromList(file))\n        .catch((error) => {\n          modifyFileInList(file, { error: error as UploadError });\n        });\n    }\n  };\n\n  function handleFileUploadFailure(file: File, failureMessage: string) {\n    const { name } = file;\n    const id = generateFileId(file);\n    const failedUpload = {\n      id,\n      filename: name,\n      status: Status.FAILED,\n      error: failureMessage,\n    };\n\n    addFileToList(failedUpload);\n\n    if (onValidationError) {\n      onValidationError(failedUpload);\n    }\n  }\n\n  function getNumberOfFilesUploaded() {\n    const uploadInitiatedStatus = new Set([Status.SUCCEEDED, Status.PENDING]);\n    const validFiles = uploadedFilesListReference.current.filter(\n      (file) => file.status && uploadInitiatedStatus.has(file.status),\n    );\n    return validFiles.length;\n  }\n\n  function areMaximumFilesUploadedAlready() {\n    if (!maxFiles) {\n      return false;\n    }\n\n    const numberOfValidFiles = getNumberOfFilesUploaded();\n    return numberOfValidFiles >= maxFiles;\n  }\n\n  // One or more files selected, create entries for them\n  const addFiles = (selectedFiles: FileList) => {\n    for (let i = 0; i < selectedFiles.length; i += 1) {\n      const file = selectedFiles.item(i);\n\n      // Returning a FormData[] array instead of FileList so we can filter out incorrect files\n      const formData = new FormData();\n\n      if (file) {\n        const { name } = file;\n        const id = generateFileId(file);\n\n        const allowedFileTypes = typeof fileTypes === 'string' ? fileTypes : fileTypes.join(',');\n\n        // Check if file type is valid\n        if (!isTypeValid(file, allowedFileTypes)) {\n          handleFileUploadFailure(file, formatMessage(MESSAGES.fileTypeNotSupported));\n          continue;\n        }\n\n        // Check if the filesize is valid\n        // Convert to rough bytes\n        if (!isSizeValid(file, sizeLimit * 1000)) {\n          const failureMessage = sizeLimitErrorMessage || formatMessage(MESSAGES.fileIsTooLarge);\n          handleFileUploadFailure(file, failureMessage);\n          continue;\n        }\n\n        if (areMaximumFilesUploadedAlready()) {\n          const failureMessage =\n            maxFilesErrorMessage ||\n            formatMessage(MESSAGES.maximumFilesAlreadyUploaded, { maxFilesAllowed: maxFiles });\n          handleFileUploadFailure(file, failureMessage);\n          continue;\n        }\n\n        formData.append(fileInputName, file);\n        const pendingFile = {\n          id,\n          filename: name,\n          status: Status.PENDING,\n        };\n\n        addFileToList(pendingFile);\n\n        // Start uploading the file\n        onUploadFile(formData)\n          .then(({ id, url, error }: UploadResponse) => {\n            // Replace the temporary id with the final one received from the API, and also set any errors\n            modifyFileInList(pendingFile, { id, url, error, status: Status.SUCCEEDED });\n          })\n          .catch((error) => {\n            modifyFileInList(pendingFile, { error: error as UploadError, status: Status.FAILED });\n          });\n\n        if (!multiple) {\n          // Only upload a single file\n          break;\n        }\n      }\n    }\n  };\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  useEffect(() => {\n    if (onFilesChange && mounted) {\n      onFilesChange([...uploadedFiles]);\n    }\n  }, [onFilesChange, uploadedFiles]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  return (\n    <>\n      <div className={classNames('np-upload-input', className, { disabled })}>\n        {uploadedFiles.map((file) => (\n          <UploadItem\n            key={file.id}\n            file={file}\n            singleFileUpload={!multiple}\n            canDelete={\n              (!!onDeleteFile || file.status === Status.FAILED) &&\n              (!file.status || !PROGRESS_STATUSES.has(file.status))\n            }\n            onDelete={\n              file.status === Status.FAILED\n                ? () => removeFile(file)\n                : () => setMarkedFileForDelete(file)\n            }\n            onDownload={onDownload}\n          />\n        ))}\n        {(multiple || (!multiple && !uploadedFiles.length)) && (\n          <UploadButton\n            id={id}\n            uploadButtonTitle={uploadButtonTitle}\n            disabled={areMaximumFilesUploadedAlready() || disabled}\n            multiple={multiple}\n            fileTypes={fileTypes}\n            sizeLimit={sizeLimit}\n            description={description}\n            maxFiles={maxFiles}\n            onChange={addFiles}\n          />\n        )}\n      </div>\n      <Modal\n        title={\n          deleteConfirm?.title !== undefined\n            ? deleteConfirm.title\n            : formatMessage(MESSAGES.deleteModalTitle)\n        }\n        body={\n          deleteConfirm?.body !== undefined\n            ? deleteConfirm.body\n            : formatMessage(MESSAGES.deleteModalBody)\n        }\n        open={!!markedFileForDelete}\n        footer={\n          <>\n            <Button\n              block\n              onClick={() => {\n                setMarkedFileForDelete(null);\n              }}\n            >\n              {deleteConfirm?.cancelText || formatMessage(MESSAGES.deleteModalCancelButtonText)}\n            </Button>\n            <Button\n              block\n              priority={Priority.SECONDARY}\n              type={ControlType.NEGATIVE}\n              onClick={() => {\n                if (markedFileForDelete) {\n                  removeFile(markedFileForDelete);\n                }\n                setMarkedFileForDelete(null);\n              }}\n            >\n              {deleteConfirm?.confirmText || formatMessage(MESSAGES.deleteModalConfirmButtonText)}\n            </Button>\n          </>\n        }\n        onClose={() => {\n          setMarkedFileForDelete(null);\n        }}\n      />\n    </>\n  );\n};\n\nexport default UploadInput;\n"],"names":["generateFileId","file","name","size","uploadTimeStamp","Date","getTime","UploadInput","files","fileInputName","className","deleteConfirm","disabled","multiple","fileTypes","imageFileTypes","sizeLimit","DEFAULT_SIZE_LIMIT","description","onUploadFile","onDeleteFile","onValidationError","onFilesChange","onDownload","maxFiles","maxFilesErrorMessage","id","sizeLimitErrorMessage","uploadButtonTitle","markedFileForDelete","setMarkedFileForDelete","useState","mounted","setMounted","formatMessage","useIntl","PROGRESS_STATUSES","Set","Status","PENDING","PROCESSING","uploadedFiles","setUploadedFiles","length","uploadedFilesListReference","useRef","addFileToList","recentUploadedFile","addToList","listToAddTo","current","removeFileFromList","filterOutFrom","listToFilterFrom","filter","fileInList","modifyFileInList","updates","updateListItem","listToUpdate","map","removeFile","status","FAILED","error","undefined","then","catch","handleFileUploadFailure","failureMessage","failedUpload","filename","getNumberOfFilesUploaded","uploadInitiatedStatus","SUCCEEDED","validFiles","has","areMaximumFilesUploadedAlready","numberOfValidFiles","addFiles","selectedFiles","i","item","formData","FormData","allowedFileTypes","join","isTypeValid","MESSAGES","fileTypeNotSupported","isSizeValid","fileIsTooLarge","maximumFilesAlreadyUploaded","maxFilesAllowed","append","pendingFile","url","useEffect","_jsxs","_Fragment","children","classNames","_jsx","UploadItem","singleFileUpload","canDelete","onDelete","UploadButton","onChange","Modal","title","deleteModalTitle","body","deleteModalBody","open","footer","Button","block","onClick","cancelText","deleteModalCancelButtonText","priority","Priority","SECONDARY","type","ControlType","NEGATIVE","confirmText","deleteModalConfirmButtonText","onClose"],"mappings":"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"}
+{"version":3,"file":"UploadInput.mjs","sources":["../../src/uploadInput/UploadInput.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { useEffect, useRef, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Button from '../button';\nimport { CommonProps, ControlType, Priority, Status } from '../common';\nimport { useInputAttributes } from '../inputs/contexts';\nimport Modal from '../modal';\nimport { isSizeValid } from '../upload/utils/isSizeValid';\nimport { isTypeValid } from '../upload/utils/isTypeValid';\n\nimport MESSAGES from './UploadInput.messages';\nimport { UploadedFile, UploadError, UploadResponse } from './types';\nimport UploadButton, { UploadButtonProps } from './uploadButton/UploadButton';\nimport { DEFAULT_SIZE_LIMIT, imageFileTypes } from './uploadButton/defaults';\nimport UploadItem, { UploadItemProps } from './uploadItem/UploadItem';\n\nexport type UploadInputProps = {\n  /**\n   * List of already existing, failed or in progress files\n   */\n  files?: readonly UploadedFile[];\n\n  /**\n   * The key of the file in the returned FormData object (default: file)\n   */\n  fileInputName?: string;\n\n  /**\n   * Callback that handles form submission\n   *\n   * @param formData\n   */\n  onUploadFile: (formData: FormData) => Promise<UploadResponse>;\n\n  /**\n   * Provide a callback if the file can be removed/deleted from the server\n   * Your app is responsible for reloading the uploaded files list and updating the component to ensure that the file has in fact been deleted successfully\n   *\n   * @param id\n   */\n  onDeleteFile?: (id: string | number) => Promise<any>;\n\n  /**\n   * Provide a callback to trigger on validation error\n   *\n   * @param file\n   */\n  onValidationError?: (file: UploadedFile) => void;\n\n  /**\n   * Provide a callback to trigger on change whenever the files are updated\n   *\n   * @param files\n   */\n  onFilesChange?: (files: UploadedFile[]) => void;\n\n  /**\n   * Confirmation modal displayed on delete\n   */\n  deleteConfirm?: {\n    /**\n     * The title of the confirmation modal on delete\n     */\n    title?: string;\n\n    /**\n     * The body of the confirmation modal on delete\n     */\n    body?: React.ReactNode;\n\n    /**\n     * The confirm button text of the confirmation modal on delete\n     */\n    confirmText?: string;\n\n    /**\n     * The cancel button text of the confirmation modal on delete\n     */\n    cancelText?: string;\n  };\n\n  /**\n   * Maximum number of files allowed, if provided, shows error below file item\n   */\n  maxFiles?: number;\n\n  /**\n   * Error message to show when the maximum number of files are uploaded already\n   */\n  maxFilesErrorMessage?: string;\n\n  /**\n   * Error message to show when files over a allowed size limit are uploaded\n   */\n  sizeLimitErrorMessage?: string;\n} & Pick<\n  UploadButtonProps,\n  'disabled' | 'multiple' | 'fileTypes' | 'sizeLimit' | 'description' | 'id' | 'uploadButtonTitle'\n> &\n  Pick<UploadItemProps, 'onDownload'> &\n  CommonProps;\n\nfunction generateFileId(file: File) {\n  const { name, size } = file;\n  const uploadTimeStamp = new Date().getTime();\n  return `${name}_${size}_${uploadTimeStamp}`;\n}\n\nconst UploadInput = ({\n  files = [],\n  fileInputName = 'file',\n  className,\n  deleteConfirm,\n  disabled,\n  multiple = false,\n  fileTypes = imageFileTypes,\n  sizeLimit = DEFAULT_SIZE_LIMIT,\n  description,\n  onUploadFile,\n  onDeleteFile,\n  onValidationError,\n  onFilesChange,\n  onDownload,\n  maxFiles,\n  maxFilesErrorMessage,\n  id,\n  sizeLimitErrorMessage,\n  uploadButtonTitle,\n}: UploadInputProps) => {\n  const inputAttributes = useInputAttributes({ nonLabelable: true });\n\n  const [markedFileForDelete, setMarkedFileForDelete] = useState<UploadedFile | null>(null);\n  const [mounted, setMounted] = useState(false);\n  const { formatMessage } = useIntl();\n\n  const PROGRESS_STATUSES = new Set([Status.PENDING, Status.PROCESSING]);\n\n  const [uploadedFiles, setUploadedFiles] = useState<readonly UploadedFile[]>(\n    multiple || files.length === 0 ? files : [files[0]],\n  );\n\n  const uploadedFilesListReference = useRef(multiple || files.length === 0 ? files : [files[0]]);\n\n  function addFileToList(recentUploadedFile: UploadedFile) {\n    function addToList(listToAddTo: readonly UploadedFile[]) {\n      return [...listToAddTo, recentUploadedFile];\n    }\n\n    setUploadedFiles(addToList);\n    uploadedFilesListReference.current = addToList(uploadedFilesListReference.current);\n  }\n\n  const removeFileFromList = (file: UploadedFile) => {\n    function filterOutFrom(listToFilterFrom: readonly UploadedFile[]) {\n      return listToFilterFrom.filter(\n        (fileInList) => file !== fileInList && file.id !== fileInList.id,\n      );\n    }\n\n    setUploadedFiles(filterOutFrom);\n    uploadedFilesListReference.current = filterOutFrom(uploadedFilesListReference.current);\n  };\n\n  const modifyFileInList = (file: UploadedFile, updates: Partial<UploadedFile>) => {\n    const updateListItem = (listToUpdate: readonly UploadedFile[]) =>\n      listToUpdate.map((fileInList) => {\n        return fileInList === file || fileInList.id === file.id\n          ? { ...file, ...updates }\n          : fileInList;\n      });\n\n    setUploadedFiles(updateListItem);\n    uploadedFilesListReference.current = updateListItem(uploadedFilesListReference.current);\n  };\n\n  const removeFile = (file: UploadedFile) => {\n    const { id, status } = file;\n\n    if (status === Status.FAILED) {\n      // If removing a failed upload, we're just updating the view\n      removeFileFromList(file);\n    } else if (onDeleteFile && id) {\n      // Set status to PROCESSING\n      modifyFileInList(file, { status: Status.PROCESSING, error: undefined });\n\n      // Notify host app about deletion\n      onDeleteFile(id)\n        .then(() => removeFileFromList(file))\n        .catch((error) => {\n          modifyFileInList(file, { error: error as UploadError });\n        });\n    }\n  };\n\n  function handleFileUploadFailure(file: File, failureMessage: string) {\n    const { name } = file;\n    const id = generateFileId(file);\n    const failedUpload = {\n      id,\n      filename: name,\n      status: Status.FAILED,\n      error: failureMessage,\n    };\n\n    addFileToList(failedUpload);\n\n    if (onValidationError) {\n      onValidationError(failedUpload);\n    }\n  }\n\n  function getNumberOfFilesUploaded() {\n    const uploadInitiatedStatus = new Set([Status.SUCCEEDED, Status.PENDING]);\n    const validFiles = uploadedFilesListReference.current.filter(\n      (file) => file.status && uploadInitiatedStatus.has(file.status),\n    );\n    return validFiles.length;\n  }\n\n  function areMaximumFilesUploadedAlready() {\n    if (!maxFiles) {\n      return false;\n    }\n\n    const numberOfValidFiles = getNumberOfFilesUploaded();\n    return numberOfValidFiles >= maxFiles;\n  }\n\n  // One or more files selected, create entries for them\n  const addFiles = (selectedFiles: FileList) => {\n    for (let i = 0; i < selectedFiles.length; i += 1) {\n      const file = selectedFiles.item(i);\n\n      // Returning a FormData[] array instead of FileList so we can filter out incorrect files\n      const formData = new FormData();\n\n      if (file) {\n        const { name } = file;\n        const id = generateFileId(file);\n\n        const allowedFileTypes = typeof fileTypes === 'string' ? fileTypes : fileTypes.join(',');\n\n        // Check if file type is valid\n        if (!isTypeValid(file, allowedFileTypes)) {\n          handleFileUploadFailure(file, formatMessage(MESSAGES.fileTypeNotSupported));\n          continue;\n        }\n\n        // Check if the filesize is valid\n        // Convert to rough bytes\n        if (!isSizeValid(file, sizeLimit * 1000)) {\n          const failureMessage = sizeLimitErrorMessage || formatMessage(MESSAGES.fileIsTooLarge);\n          handleFileUploadFailure(file, failureMessage);\n          continue;\n        }\n\n        if (areMaximumFilesUploadedAlready()) {\n          const failureMessage =\n            maxFilesErrorMessage ||\n            formatMessage(MESSAGES.maximumFilesAlreadyUploaded, { maxFilesAllowed: maxFiles });\n          handleFileUploadFailure(file, failureMessage);\n          continue;\n        }\n\n        formData.append(fileInputName, file);\n        const pendingFile = {\n          id,\n          filename: name,\n          status: Status.PENDING,\n        };\n\n        addFileToList(pendingFile);\n\n        // Start uploading the file\n        onUploadFile(formData)\n          .then(({ id, url, error }: UploadResponse) => {\n            // Replace the temporary id with the final one received from the API, and also set any errors\n            modifyFileInList(pendingFile, { id, url, error, status: Status.SUCCEEDED });\n          })\n          .catch((error) => {\n            modifyFileInList(pendingFile, { error: error as UploadError, status: Status.FAILED });\n          });\n\n        if (!multiple) {\n          // Only upload a single file\n          break;\n        }\n      }\n    }\n  };\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  useEffect(() => {\n    if (onFilesChange && mounted) {\n      onFilesChange([...uploadedFiles]);\n    }\n  }, [onFilesChange, uploadedFiles]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  return (\n    <>\n      <div\n        role=\"group\"\n        className={classNames('np-upload-input', className, { disabled })}\n        {...inputAttributes}\n      >\n        {uploadedFiles.map((file) => (\n          <UploadItem\n            key={file.id}\n            file={file}\n            singleFileUpload={!multiple}\n            canDelete={\n              (!!onDeleteFile || file.status === Status.FAILED) &&\n              (!file.status || !PROGRESS_STATUSES.has(file.status))\n            }\n            onDelete={\n              file.status === Status.FAILED\n                ? () => removeFile(file)\n                : () => setMarkedFileForDelete(file)\n            }\n            onDownload={onDownload}\n          />\n        ))}\n        {(multiple || (!multiple && !uploadedFiles.length)) && (\n          <UploadButton\n            id={id}\n            uploadButtonTitle={uploadButtonTitle}\n            disabled={areMaximumFilesUploadedAlready() || disabled}\n            multiple={multiple}\n            fileTypes={fileTypes}\n            sizeLimit={sizeLimit}\n            description={description}\n            maxFiles={maxFiles}\n            onChange={addFiles}\n          />\n        )}\n      </div>\n      <Modal\n        title={\n          deleteConfirm?.title !== undefined\n            ? deleteConfirm.title\n            : formatMessage(MESSAGES.deleteModalTitle)\n        }\n        body={\n          deleteConfirm?.body !== undefined\n            ? deleteConfirm.body\n            : formatMessage(MESSAGES.deleteModalBody)\n        }\n        open={!!markedFileForDelete}\n        footer={\n          <>\n            <Button\n              block\n              onClick={() => {\n                setMarkedFileForDelete(null);\n              }}\n            >\n              {deleteConfirm?.cancelText || formatMessage(MESSAGES.deleteModalCancelButtonText)}\n            </Button>\n            <Button\n              block\n              priority={Priority.SECONDARY}\n              type={ControlType.NEGATIVE}\n              onClick={() => {\n                if (markedFileForDelete) {\n                  removeFile(markedFileForDelete);\n                }\n                setMarkedFileForDelete(null);\n              }}\n            >\n              {deleteConfirm?.confirmText || formatMessage(MESSAGES.deleteModalConfirmButtonText)}\n            </Button>\n          </>\n        }\n        onClose={() => {\n          setMarkedFileForDelete(null);\n        }}\n      />\n    </>\n  );\n};\n\nexport default UploadInput;\n"],"names":["generateFileId","file","name","size","uploadTimeStamp","Date","getTime","UploadInput","files","fileInputName","className","deleteConfirm","disabled","multiple","fileTypes","imageFileTypes","sizeLimit","DEFAULT_SIZE_LIMIT","description","onUploadFile","onDeleteFile","onValidationError","onFilesChange","onDownload","maxFiles","maxFilesErrorMessage","id","sizeLimitErrorMessage","uploadButtonTitle","inputAttributes","useInputAttributes","nonLabelable","markedFileForDelete","setMarkedFileForDelete","useState","mounted","setMounted","formatMessage","useIntl","PROGRESS_STATUSES","Set","Status","PENDING","PROCESSING","uploadedFiles","setUploadedFiles","length","uploadedFilesListReference","useRef","addFileToList","recentUploadedFile","addToList","listToAddTo","current","removeFileFromList","filterOutFrom","listToFilterFrom","filter","fileInList","modifyFileInList","updates","updateListItem","listToUpdate","map","removeFile","status","FAILED","error","undefined","then","catch","handleFileUploadFailure","failureMessage","failedUpload","filename","getNumberOfFilesUploaded","uploadInitiatedStatus","SUCCEEDED","validFiles","has","areMaximumFilesUploadedAlready","numberOfValidFiles","addFiles","selectedFiles","i","item","formData","FormData","allowedFileTypes","join","isTypeValid","MESSAGES","fileTypeNotSupported","isSizeValid","fileIsTooLarge","maximumFilesAlreadyUploaded","maxFilesAllowed","append","pendingFile","url","useEffect","_jsxs","_Fragment","children","role","classNames","_jsx","UploadItem","singleFileUpload","canDelete","onDelete","UploadButton","onChange","Modal","title","deleteModalTitle","body","deleteModalBody","open","footer","Button","block","onClick","cancelText","deleteModalCancelButtonText","priority","Priority","SECONDARY","type","ControlType","NEGATIVE","confirmText","deleteModalConfirmButtonText","onClose"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.46.0",
+  "version": "46.47.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/inputs/InputGroup.spec.tsx

@@ -4,6 +4,7 @@ import { Field } from '../field/Field';
 import { mockResizeObserver, render, screen } from '../test-utils';
 import { Input } from './Input';
 import { InputGroup } from './InputGroup';
+import Button from '../button';
 
 mockResizeObserver();
 
@@ -16,11 +17,15 @@ describe('InputGroup', () => {
             content: <Search size={24} />,
             initialContentWidth: 24,
           }}
+          addonEnd={{
+            content: <Button>Go</Button>,
+            interactive: true,
+          }}
         >
           <Input />
         </InputGroup>
       </Field>,
     );
-    expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Search…/);
+    expect(screen.getByLabelText('Search…')).toHaveRole('textbox');
   });
 });

package/src/inputs/InputGroup.tsx

@@ -67,38 +67,23 @@ export function InputGroup({
   className,
   children,
 }: InputGroupProps) {
-  const inputAttributes = useInputAttributes({ nonLabelable: true });
-
   const [paddingStart, setPaddingStart] = useState(inputPaddingInitialState(addonStart));
   const [paddingEnd, setPaddingEnd] = useState(inputPaddingInitialState(addonEnd));
 
   return (
-    /* Prevent nested controls from being labeled redundantly */
-    <FieldLabelIdContextProvider value={undefined}>
-      <InputIdContextProvider value={undefined}>
-        <InputDescribedByProvider value={undefined}>
-          <InputInvalidProvider value={undefined}>
-            <InputPaddingStartContext.Provider
-              value={useMemo(() => [paddingStart, setPaddingStart], [paddingStart])}
-            >
-              <InputPaddingEndContext.Provider
-                value={useMemo(() => [paddingEnd, setPaddingEnd], [paddingEnd])}
-              >
-                <fieldset
-                  {...inputAttributes}
-                  disabled={disabled}
-                  className={classNames(className, 'np-input-group')}
-                >
-                  {addonStart != null ? <InputAddon placement="start" {...addonStart} /> : null}
-                  {children}
-                  {addonEnd != null ? <InputAddon placement="end" {...addonEnd} /> : null}
-                </fieldset>
-              </InputPaddingEndContext.Provider>
-            </InputPaddingStartContext.Provider>
-          </InputInvalidProvider>
-        </InputDescribedByProvider>
-      </InputIdContextProvider>
-    </FieldLabelIdContextProvider>
+    <InputPaddingStartContext.Provider
+      value={useMemo(() => [paddingStart, setPaddingStart], [paddingStart])}
+    >
+      <InputPaddingEndContext.Provider
+        value={useMemo(() => [paddingEnd, setPaddingEnd], [paddingEnd])}
+      >
+        <fieldset disabled={disabled} className={classNames(className, 'np-input-group')}>
+          {addonStart != null ? <InputAddon placement="start" {...addonStart} /> : null}
+          {children}
+          {addonEnd != null ? <InputAddon placement="end" {...addonEnd} /> : null}
+        </fieldset>
+      </InputPaddingEndContext.Provider>
+    </InputPaddingStartContext.Provider>
   );
 }
 
@@ -143,22 +128,31 @@ function InputAddon({
   });
 
   return (
-    <span
-      ref={ref}
-      className={classNames(
-        'np-input-addon',
-        {
-          'np-input-addon--placement-start': placement === 'start',
-          'np-input-addon--placement-end': placement === 'end',
-        },
-        interactive && 'np-input-addon--interactive',
-        {
-          'np-input-addon--padding-sm': padding === 'sm',
-          'np-input-addon--padding-md': padding === 'md',
-        },
-      )}
-    >
-      {content}
-    </span>
+    /* Prevent nested controls from being labeled redundantly */
+    <FieldLabelIdContextProvider value={undefined}>
+      <InputIdContextProvider value={undefined}>
+        <InputDescribedByProvider value={undefined}>
+          <InputInvalidProvider value={undefined}>
+            <span
+              ref={ref}
+              className={classNames(
+                'np-input-addon',
+                {
+                  'np-input-addon--placement-start': placement === 'start',
+                  'np-input-addon--placement-end': placement === 'end',
+                },
+                interactive && 'np-input-addon--interactive',
+                {
+                  'np-input-addon--padding-sm': padding === 'sm',
+                  'np-input-addon--padding-md': padding === 'md',
+                },
+              )}
+            >
+              {content}
+            </span>
+          </InputInvalidProvider>
+        </InputDescribedByProvider>
+      </InputIdContextProvider>
+    </FieldLabelIdContextProvider>
   );
 }

package/src/inputs/SearchInput.spec.tsx

@@ -11,6 +11,6 @@ describe('SearchInput', () => {
         <SearchInput />
       </Field>,
     );
-    expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Search…/);
+    expect(screen.getByLabelText('Search…')).toHaveRole('searchbox');
   });
 });

package/src/inputs/SelectInput.spec.tsx

@@ -214,6 +214,6 @@ describe('SelectInput', () => {
         <SelectInput items={[{ type: 'option', value: 'USD' }]} value="USD" />
       </Field>,
     );
-    expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Currency/);
+    expect(screen.getByLabelText('Currency')).toHaveAttribute('aria-haspopup');
   });
 });

package/src/uploadInput/UploadInput.spec.tsx

@@ -1,13 +1,14 @@
 import { within } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
+import { act } from 'react';
 
 import { Status } from '../common';
+import { Field } from '../field/Field';
 import { mockMatchMedia, render, screen, waitFor, waitForElementToBeRemoved } from '../test-utils';
 
 import UploadInput, { UploadInputProps } from './UploadInput';
 import { TEST_IDS as UPLOAD_BUTTON_TEST_IDS } from './uploadButton/UploadButton';
 import { TEST_IDS as UPLOAD_ITEM_TEST_IDS } from './uploadItem/UploadItem';
-import { act } from 'react';
 
 const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTimeAsync });
 
@@ -310,4 +311,16 @@ describe('UploadInput', () => {
       });
     });
   });
+
+  it('supports `Field` for error messages', () => {
+    render(
+      <Field message="Something went wrong" sentiment="negative">
+        <UploadInput {...props} />
+      </Field>,
+    );
+
+    const container = screen.getAllByRole('group')[0];
+    expect(container).toBeInvalid();
+    expect(container).toHaveAccessibleDescription('Something went wrong');
+  });
 });

package/src/uploadInput/UploadInput.story.tsx

@@ -1,5 +1,7 @@
 import { StoryFn, Meta } from '@storybook/react';
 
+import { Field } from '../field/Field';
+
 import UploadInput, { UploadInputProps } from './UploadInput';
 import { UploadResponse } from './types';
 
@@ -44,3 +46,12 @@ SingleFile.args = { ...props };
 
 export const MultipleFiles: Story = Template.bind({});
 MultipleFiles.args = { ...props, multiple: true };
+
+export const WithinField: Story = Template.bind({});
+WithinField.decorators = [
+  (Story) => (
+    <Field message="Something went wrong" sentiment="negative">
+      <Story />
+    </Field>
+  ),
+];

package/src/uploadInput/UploadInput.tsx

@@ -4,6 +4,7 @@ import { useIntl } from 'react-intl';
 
 import Button from '../button';
 import { CommonProps, ControlType, Priority, Status } from '../common';
+import { useInputAttributes } from '../inputs/contexts';
 import Modal from '../modal';
 import { isSizeValid } from '../upload/utils/isSizeValid';
 import { isTypeValid } from '../upload/utils/isTypeValid';
@@ -127,6 +128,8 @@ const UploadInput = ({
   sizeLimitErrorMessage,
   uploadButtonTitle,
 }: UploadInputProps) => {
+  const inputAttributes = useInputAttributes({ nonLabelable: true });
+
   const [markedFileForDelete, setMarkedFileForDelete] = useState<UploadedFile | null>(null);
   const [mounted, setMounted] = useState(false);
   const { formatMessage } = useIntl();
@@ -299,7 +302,11 @@ const UploadInput = ({
 
   return (
     <>
-      <div className={classNames('np-upload-input', className, { disabled })}>
+      <div
+        role="group"
+        className={classNames('np-upload-input', className, { disabled })}
+        {...inputAttributes}
+      >
         {uploadedFiles.map((file) => (
           <UploadItem
             key={file.id}