@transferwise/components 46.42.1 → 46.44.0

package/build/index.mjs

@@ -2145,6 +2145,7 @@ const Carousel = ({
               }
             },
             href: card.href,
+            target: card.hrefTarget,
             rel: "noreferrer",
             onKeyDown: event => handleOnKeyDown(event, index),
             children: cardContent
@@ -2227,28 +2228,62 @@ const Card = /*#__PURE__*/forwardRef(function Card({
   });
 });
 
-const CheckboxButton = /*#__PURE__*/forwardRef(({
+const FieldLabelIdContext = /*#__PURE__*/createContext(undefined);
+const FieldLabelIdContextProvider = FieldLabelIdContext.Provider;
+const InputIdContext = /*#__PURE__*/createContext(undefined);
+const InputIdContextProvider = InputIdContext.Provider;
+const InputDescribedByContext = /*#__PURE__*/createContext(undefined);
+const InputDescribedByProvider = InputDescribedByContext.Provider;
+const InputInvalidContext = /*#__PURE__*/createContext(undefined);
+const InputInvalidProvider = InputInvalidContext.Provider;
+function useInputAttributes({
+  nonLabelable
+} = {}) {
+  const labelId = useContext(FieldLabelIdContext);
+  return {
+    id: useContext(InputIdContext),
+    'aria-labelledby': nonLabelable ? labelId : undefined,
+    'aria-describedby': useContext(InputDescribedByContext),
+    'aria-invalid': useContext(InputInvalidContext)
+  };
+}
+function withInputAttributes(Component, args) {
+  function ComponentWithInputAttributes(props) {
+    return /*#__PURE__*/jsx(Component, {
+      inputAttributes: useInputAttributes(args),
+      ...props
+    });
+  }
+  ComponentWithInputAttributes.displayName = `withInputAttributes(${Component.displayName || Component.name || 'Component'})`;
+  return ComponentWithInputAttributes;
+}
+
+const CheckboxButton = /*#__PURE__*/forwardRef(function CheckboxButton({
   checked,
   className,
   disabled,
   onChange,
   ...rest
-}, reference) => /*#__PURE__*/jsxs("span", {
-  className: classNames('np-checkbox-button', className, disabled && 'disabled'),
-  children: [/*#__PURE__*/jsx("input", {
-    ...rest,
-    ref: reference,
-    type: "checkbox",
-    disabled: disabled,
-    checked: checked,
-    onChange: onChange
-  }), /*#__PURE__*/jsx("span", {
-    className: "tw-checkbox-button",
-    children: /*#__PURE__*/jsx("span", {
-      className: "tw-checkbox-check"
-    })
-  })]
-}));
+}, reference) {
+  const inputAttributes = useInputAttributes();
+  return /*#__PURE__*/jsxs("span", {
+    className: classNames('np-checkbox-button', className, disabled && 'disabled'),
+    children: [/*#__PURE__*/jsx("input", {
+      ...inputAttributes,
+      ...rest,
+      ref: reference,
+      type: "checkbox",
+      disabled: disabled,
+      checked: checked,
+      onChange: onChange
+    }), /*#__PURE__*/jsx("span", {
+      className: "tw-checkbox-button",
+      children: /*#__PURE__*/jsx("span", {
+        className: "tw-checkbox-check"
+      })
+    })]
+  });
+});
 
 function Checkbox({
   id,
@@ -3049,36 +3084,6 @@ const isMonthAndYearFormat = dateString => validDateString(dateString) && dateSt
 const MDY = new Set(['en-US']);
 const YMD = new Set(['hu', 'hu-HU', 'zh-HK', 'zh-CN', 'ja', 'ja-JP']);
 
-const FieldLabelIdContext = /*#__PURE__*/createContext(undefined);
-const FieldLabelIdContextProvider = FieldLabelIdContext.Provider;
-const InputIdContext = /*#__PURE__*/createContext(undefined);
-const InputIdContextProvider = InputIdContext.Provider;
-const InputDescribedByContext = /*#__PURE__*/createContext(undefined);
-const InputDescribedByProvider = InputDescribedByContext.Provider;
-const InputInvalidContext = /*#__PURE__*/createContext(undefined);
-const InputInvalidProvider = InputInvalidContext.Provider;
-function useInputAttributes({
-  nonLabelable
-} = {}) {
-  const labelId = useContext(FieldLabelIdContext);
-  return {
-    id: useContext(InputIdContext),
-    'aria-labelledby': nonLabelable ? labelId : undefined,
-    'aria-describedby': useContext(InputDescribedByContext),
-    'aria-invalid': useContext(InputInvalidContext)
-  };
-}
-function withInputAttributes(Component, args) {
-  function ComponentWithInputAttributes(props) {
-    return /*#__PURE__*/jsx(Component, {
-      inputAttributes: useInputAttributes(args),
-      ...props
-    });
-  }
-  ComponentWithInputAttributes.displayName = `withInputAttributes(${Component.displayName || Component.name || 'Component'})`;
-  return ComponentWithInputAttributes;
-}
-
 var messages$9 = defineMessages({
   monthLabel: {
     id: "neptune.DateInput.month.label"
@@ -4896,11 +4901,11 @@ const Field = ({
               'has-error': hasError,
               'has-info': sentiment === Sentiment.NEUTRAL
             }, className),
-            children: [/*#__PURE__*/jsxs(Label, {
+            children: [label != null ? /*#__PURE__*/jsxs(Label, {
               id: labelId,
               htmlFor: inputId,
               children: [label, children]
-            }), message && /*#__PURE__*/jsx(InlineAlert, {
+            }) : children, message && /*#__PURE__*/jsx(InlineAlert, {
               type: sentiment,
               id: descriptionId,
               children: message
@@ -5737,25 +5742,45 @@ function InputGroup({
   className,
   children
 }) {
+  const inputAttributes = useInputAttributes({
+    nonLabelable: true
+  });
   const [paddingStart, setPaddingStart] = useState(inputPaddingInitialState(addonStart));
   const [paddingEnd, setPaddingEnd] = useState(inputPaddingInitialState(addonEnd));
-  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]
+  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]
+                })
+              })
+            })
+          })
+        })
       })
     })
-  });
+  );
 }
 const inputAddonContentWidthAddendByPadding = {
   none: 0,
@@ -6620,6 +6645,7 @@ function SelectInput({
   disabled,
   size = 'md',
   className,
+  UNSAFE_triggerButtonProps,
   onFilterChange = noop,
   onChange,
   onClose,
@@ -6688,6 +6714,7 @@ function SelectInput({
               triggerRef.current = node;
             },
             ...inputAttributes,
+            ...UNSAFE_triggerButtonProps,
             id,
             ...mergeProps({
               onClick: () => {