@transferwise/components 0.0.0-experimental-8e32d17 → 0.0.0-experimental-3f120da

package/build/index.js

@@ -2622,26 +2622,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__*/React.createContext(undefined);
-const FieldLabelIdContextProvider = FieldLabelIdContext.Provider;
-const InputIdContext = /*#__PURE__*/React.createContext(undefined);
-const InputIdContextProvider = InputIdContext.Provider;
-const InputDescribedByContext = /*#__PURE__*/React.createContext(undefined);
-const InputDescribedByProvider = InputDescribedByContext.Provider;
-const InputInvalidContext = /*#__PURE__*/React.createContext(undefined);
-const InputInvalidProvider = InputInvalidContext.Provider;
-function useInputAttributes({
-  nonLabelable = false
-} = {}) {
-  const labelId = React.useContext(FieldLabelIdContext);
-  return {
-    id: React.useContext(InputIdContext),
-    'aria-labelledby': nonLabelable ? labelId : undefined,
-    'aria-describedby': React.useContext(InputDescribedByContext),
-    'aria-invalid': React.useContext(InputInvalidContext)
-  };
-}
-
 var messages$9 = reactIntl.defineMessages({
   monthLabel: {
     id: "neptune.DateInput.month.label"
@@ -2666,7 +2646,7 @@ const convertToLocalMidnight = date => {
 };
 
 const DateInput = ({
-  'aria-labelledby': ariaLabelledByProp,
+  'aria-labelledby': ariaLabelledBy,
   'aria-label': ariaLabel,
   disabled = false,
   size = exports.Size.MEDIUM,
@@ -2682,14 +2662,9 @@ const DateInput = ({
   onFocus,
   onBlur,
   placeholders,
-  id: idProp,
+  id,
   selectProps = {}
 }) => {
-  const inputAttributes = useInputAttributes({
-    nonLabelable: true
-  });
-  const id = idProp ?? inputAttributes.id;
-  const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes['aria-labelledby'];
   const {
     locale,
     formatMessage
@@ -2726,9 +2701,9 @@ const DateInput = ({
   const [year, setYear] = React.useState(() => getInitialDate('year'));
   const [lastBroadcastedValue, setLastBroadcastedValue] = React.useState(getDateObject);
   const monthNames = getMonthNames(locale, monthFormat);
-  dayLabel ||= formatMessage(messages$9.dayLabel);
-  monthLabel ||= formatMessage(messages$9.monthLabel);
-  yearLabel ||= formatMessage(messages$9.yearLabel);
+  dayLabel = dayLabel || formatMessage(messages$9.dayLabel);
+  monthLabel = monthLabel || formatMessage(messages$9.monthLabel);
+  yearLabel = yearLabel || formatMessage(messages$9.yearLabel);
   placeholders = {
     day: placeholders?.day || formatMessage(messages$9.dayPlaceholder),
     month: placeholders?.month || formatMessage(messages$9.monthLabel),
@@ -2919,7 +2894,6 @@ const DateInput = ({
   const yearFirst = YMD.has(locale);
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: "tw-date",
-    ...inputAttributes,
     id: id,
     "aria-labelledby": ariaLabelledBy,
     "aria-label": ariaLabel,
@@ -2939,15 +2913,15 @@ const DateInput = ({
           return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
             children: [getMonth(), getDay(), getYear()]
           });
-        }
-        if (yearFirst) {
+        } else if (yearFirst) {
           return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
             children: [getYear(), getMonth(), getDay()]
           });
+        } else {
+          return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [getDay(), getMonth(), getYear()]
+          });
         }
-        return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-          children: [getDay(), getMonth(), getYear()]
-        });
       })()
     })
   });
@@ -4907,7 +4881,7 @@ const FlowNavigation = ({
         }) : /*#__PURE__*/jsxRuntime.jsx("div", {
           className: "np-flow-header__left",
           children: logo
-        }), !screenSm && /*#__PURE__*/jsxRuntime.jsx(AnimatedLabel, {
+        }), !screenSm && !done && /*#__PURE__*/jsxRuntime.jsx(AnimatedLabel, {
           className: "m-x-1",
           labels: steps.map(step => step.label),
           activeLabel: activeStep
@@ -4929,84 +4903,6 @@ const FlowNavigation = ({
   });
 };
 
-function InlineAlert({
-  id,
-  type = 'neutral',
-  className,
-  children
-}) {
-  const danger = type === 'negative' || type === 'error';
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    role: "alert",
-    id: id,
-    className: classNames__default.default('alert alert-detach', `alert-${danger ? 'danger' : type}`, className),
-    children: [danger && /*#__PURE__*/jsxRuntime.jsx(icons.AlertCircle, {}), /*#__PURE__*/jsxRuntime.jsx("div", {
-      children: children
-    })]
-  });
-}
-
-const Label = ({
-  id,
-  htmlFor,
-  className,
-  children
-}) => {
-  return /*#__PURE__*/jsxRuntime.jsx("label", {
-    id: id,
-    htmlFor: htmlFor,
-    className: classNames__default.default('control-label d-flex flex-column gap-y-1 m-b-0', className),
-    children: children
-  });
-};
-
-const Field = ({
-  id,
-  label,
-  hint,
-  error,
-  className,
-  children
-}) => {
-  const hasError = Boolean(error);
-  const hasHint = Boolean(hint) && !hasError;
-  const labelId = reactId.useId();
-  const fallbackInputId = reactId.useId(); // TODO: Use `React.useId()` when react>=18
-  const inputId = id !== null ? id ?? fallbackInputId : undefined;
-  const descriptionId = reactId.useId(); // TODO: Use `React.useId()` when react>=18
-  return /*#__PURE__*/jsxRuntime.jsx(FieldLabelIdContextProvider, {
-    value: labelId,
-    children: /*#__PURE__*/jsxRuntime.jsx(InputIdContextProvider, {
-      value: inputId,
-      children: /*#__PURE__*/jsxRuntime.jsx(InputDescribedByProvider, {
-        value: hasError || hasHint ? descriptionId : undefined,
-        children: /*#__PURE__*/jsxRuntime.jsx(InputInvalidProvider, {
-          value: hasError,
-          children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: classNames__default.default('form-group d-block', {
-              'has-error': hasError,
-              'has-info': hasHint
-            }, className),
-            children: [/*#__PURE__*/jsxRuntime.jsxs(Label, {
-              id: labelId,
-              htmlFor: inputId,
-              children: [label, children]
-            }), hasHint && /*#__PURE__*/jsxRuntime.jsx(InlineAlert, {
-              type: exports.Sentiment.NEUTRAL,
-              id: descriptionId,
-              children: hint
-            }), hasError && /*#__PURE__*/jsxRuntime.jsx(InlineAlert, {
-              type: exports.Sentiment.NEGATIVE,
-              id: descriptionId,
-              children: error
-            })]
-          })
-        })
-      })
-    })
-  });
-};
-
 const HeaderAction = ({
   action
 }) => {
@@ -5339,16 +5235,20 @@ const Info = ({
   });
 };
 
-function inputClassNameBase({
-  size = 'auto'
-} = {}) {
-  return classNames__default.default('form-control',
-  // TODO: Deprecate
-  'np-form-control', {
-    'np-form-control--size-auto': size === 'auto',
-    'np-form-control--size-sm': size === 'sm',
-    'np-form-control--size-md': size === 'md',
-    'np-form-control--size-lg': size === 'lg'
+function InlineAlert({
+  id,
+  type = 'neutral',
+  className,
+  children
+}) {
+  const danger = type === 'negative' || type === 'error';
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    role: "alert",
+    id: id,
+    className: classNames__default.default('alert alert-detach', `alert-${danger ? 'danger' : type}`, className),
+    children: [danger && /*#__PURE__*/jsxRuntime.jsx(icons.AlertCircle, {}), /*#__PURE__*/jsxRuntime.jsx("div", {
+      children: children
+    })]
   });
 }
 
@@ -5470,17 +5370,29 @@ function InputAddon({
   });
 }
 
+function formControlClassNameBase({
+  size = 'auto'
+} = {}) {
+  return classNames__default.default('form-control',
+  // TODO: Deprecate
+  'np-form-control', {
+    'np-form-control--size-auto': size === 'auto',
+    'np-form-control--size-sm': size === 'sm',
+    'np-form-control--size-md': size === 'md',
+    'np-form-control--size-lg': size === 'lg'
+  });
+}
+
 const Input = /*#__PURE__*/React.forwardRef(function Input({
   size = 'auto',
   shape = 'rectangle',
   className,
   ...restProps
 }, reference) {
-  const inputAttributes = useInputAttributes();
   const inputPaddings = useInputPaddings();
   return /*#__PURE__*/jsxRuntime.jsx("input", {
     ref: reference,
-    className: classNames__default.default(className, inputClassNameBase({
+    className: classNames__default.default(className, formControlClassNameBase({
       size
     }), 'np-input', {
       'np-input--shape-rectangle': shape === 'rectangle',
@@ -5489,7 +5401,6 @@ const Input = /*#__PURE__*/React.forwardRef(function Input({
     // eslint-disable-next-line react/forbid-dom-props
     ,
     style: inputPaddings,
-    ...inputAttributes,
     ...restProps
   });
 });
@@ -5911,6 +5822,12 @@ const PolymorphicWithOverrides = /*#__PURE__*/React.forwardRef(function Polymorp
   });
 });
 
+var messages$5 = reactIntl.defineMessages({
+  noResultsFound: {
+    id: "neptune.SelectInput.noResultsFound"
+  }
+});
+
 function PreventScroll() {
   overlays.usePreventScroll();
   return null;
@@ -6030,7 +5947,7 @@ const ButtonInput = /*#__PURE__*/React.forwardRef(function ButtonInput({
   return /*#__PURE__*/jsxRuntime.jsx("button", {
     ref: ref,
     type: "button",
-    className: classNames__default.default(className, inputClassNameBase({
+    className: classNames__default.default(className, formControlClassNameBase({
       size
     }), 'np-button-input')
     // eslint-disable-next-line react/forbid-dom-props
@@ -6146,12 +6063,6 @@ function Popover({
   });
 }
 
-var messages$5 = reactIntl.defineMessages({
-  noResultsFound: {
-    id: "neptune.SelectInput.noResultsFound"
-  }
-});
-
 function searchableString(value) {
   return value.trim().replace(/\s+/gu, ' ').normalize('NFKC').toLowerCase();
 }
@@ -6271,7 +6182,7 @@ function SelectInputClearButton({
 }
 const noop = () => {};
 function SelectInput({
-  id: idProp,
+  id,
   name,
   multiple,
   placeholder,
@@ -6292,8 +6203,6 @@ function SelectInput({
   onClose,
   onClear
 }) {
-  const inputAttributes = useInputAttributes();
-  const id = idProp ?? inputAttributes.id;
   const [open, setOpen] = React.useState(false);
   const initialized = React.useRef(false);
   const handleClose = useEffectEvent(onClose ?? (() => {}));
@@ -6354,7 +6263,6 @@ function SelectInput({
               ref(node);
               triggerRef.current = node;
             },
-            ...inputAttributes,
             id,
             ...mergeProps__default.default({
               onClick: () => {
@@ -6708,11 +6616,9 @@ const TextArea = /*#__PURE__*/React.forwardRef(function TextArea({
   className,
   ...restProps
 }, reference) {
-  const inputAttributes = useInputAttributes();
   return /*#__PURE__*/jsxRuntime.jsx("textarea", {
     ref: reference,
-    className: classNames__default.default(className, inputClassNameBase(), 'np-text-area'),
-    ...inputAttributes,
+    className: classNames__default.default(className, formControlClassNameBase(), 'np-text-area'),
     ...restProps
   });
 });
@@ -9458,13 +9364,9 @@ function RadioGroup({
   selectedValue: controlledValue,
   onChange
 }) {
-  const inputAttributes = useInputAttributes({
-    nonLabelable: true
-  });
   const [uncontrolledValue, setUncontrolledValue] = React.useState(controlledValue);
   return radios.length > 0 ? /*#__PURE__*/jsxRuntime.jsx("div", {
     role: "radiogroup",
-    ...inputAttributes,
     children: radios.map(({
       value = '',
       ...restProps
@@ -10576,18 +10478,13 @@ const Summary = ({
 };
 
 const Switch = props => {
-  const inputAttributes = useInputAttributes({
-    nonLabelable: true
-  });
   const {
     isModern
   } = componentsTheming.useTheme();
   const {
     checked,
     className,
-    id = inputAttributes.id,
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledbyProp,
+    id,
     onClick,
     disabled
   } = props;
@@ -10618,18 +10515,19 @@ const Switch = props => {
       })
     });
   };
-  const ariaLabelledby = (ariaLabel ? undefined : ariaLabelledbyProp) ?? inputAttributes['aria-labelledby'];
+  const ariaLabel = props['aria-label'];
+  const ariaLabelledby = ariaLabel ? undefined : props['aria-labelledby'];
+  logActionRequiredIf('Switch now expects either `aria-label` or `aria-labelledby`, and will soon make these props required. Please update your usage to provide one or the other.', !ariaLabel && !ariaLabelledby);
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
     className: classNames__default.default('np-switch', {
       'np-switch--unchecked': !checked,
       'np-switch--checked': checked,
-      disabled
+      disabled: disabled
     }, className),
     tabIndex: 0,
     role: "switch",
     "aria-checked": checked,
     "aria-label": ariaLabel,
-    ...inputAttributes,
     "aria-labelledby": ariaLabelledby,
     id: id,
     "aria-disabled": disabled,
@@ -14517,7 +14415,6 @@ exports.Display = Display;
 exports.Drawer = Drawer$1;
 exports.DropFade = DropFade;
 exports.Emphasis = Emphasis;
-exports.Field = Field;
 exports.FlowNavigation = FlowNavigation;
 exports.Header = Header;
 exports.Image = Image;
@@ -14527,7 +14424,6 @@ exports.Input = Input;
 exports.InputGroup = InputGroup;
 exports.InputWithDisplayFormat = InputWithDisplayFormat;
 exports.InstructionsList = InstructionsList;
-exports.Label = Label;
 exports.LanguageProvider = LanguageProvider;
 exports.Link = Link;
 exports.ListItem = ListItem$1;