@transferwise/components 0.0.0-experimental-7fb3545 → 0.0.0-experimental-930909f

package/build/index.js

@@ -11,8 +11,7 @@ var componentsTheming = require('@wise/components-theming');
 var formatting = require('@transferwise/formatting');
 var react$1 = require('@headlessui/react');
 var mergeProps = require('merge-props');
-var mergeRefs = require('react-merge-refs');
-var shim = require('use-sync-external-store/shim');
+var index_js = require('use-sync-external-store/shim/index.js');
 var react = require('@floating-ui/react');
 var focus = require('@react-aria/focus');
 var overlays = require('@react-aria/overlays');
@@ -53,7 +52,6 @@ var classNames__default = /*#__PURE__*/_interopDefault(classNames);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var mergeProps__default = /*#__PURE__*/_interopDefault(mergeProps);
-var mergeRefs__default = /*#__PURE__*/_interopDefault(mergeRefs);
 var throttle__default = /*#__PURE__*/_interopDefault(throttle);
 var commonmark__default = /*#__PURE__*/_interopDefault(commonmark);
 var clamp__default = /*#__PURE__*/_interopDefault(clamp$2);
@@ -1751,8 +1749,9 @@ const useHasIntersected = ({
   return [hasIntersected];
 };
 
+// eslint-disable-next-line import/extensions
 function useMedia(query) {
-  return shim.useSyncExternalStore(onStoreChange => {
+  return index_js.useSyncExternalStore(onStoreChange => {
     const mediaQueryList = window.matchMedia(query);
     mediaQueryList.addEventListener('change', onStoreChange);
     return () => {
@@ -1784,6 +1783,18 @@ const useLayout = () => {
   };
 };
 
+function mergeRefs(refs) {
+  return function (value) {
+    refs.forEach(function (ref) {
+      if (typeof ref === "function") {
+        ref(value);
+      } else if (ref != null) {
+        ref.current = value;
+      }
+    });
+  };
+}
+
 const EXIT_ANIMATION = 350;
 const SlidingPanel = /*#__PURE__*/React.forwardRef(({
   position = 'left',
@@ -1810,7 +1821,7 @@ const SlidingPanel = /*#__PURE__*/React.forwardRef(({
     appear: true,
     unmountOnExit: true
   }, /*#__PURE__*/jsxRuntime.jsx("div", {
-    ref: mergeRefs__default.default([reference, localReference]),
+    ref: mergeRefs([reference, localReference]),
     className: classNames__default.default('sliding-panel', `sliding-panel--open-${position}`, showSlidingPanelBorder && `sliding-panel--border-${position}`, slidingPanelPositionFixed && 'sliding-panel--fixed', className),
     children: children
   }));
@@ -2753,6 +2764,7 @@ const convertToLocalMidnight = date => {
   return new Date(utcDate.getUTCFullYear(), utcDate.getUTCMonth(), utcDate.getUTCDate());
 };
 
+const MonthBeforeDay = new Set(['en-US', 'ja-JP']);
 const DateInput = ({
   'aria-labelledby': ariaLabelledBy,
   'aria-label': ariaLabel,
@@ -2942,86 +2954,7 @@ const DateInput = ({
     'col-sm-8': monthYearOnly,
     'col-sm-5': !monthYearOnly
   });
-  const getMonth = () => {
-    return /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: monthWidth,
-      children: getSelectElement()
-    });
-  };
-  const getDay = () => {
-    return /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "col-sm-3",
-      children: /*#__PURE__*/jsxRuntime.jsxs("label", {
-        children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-          className: "sr-only",
-          children: dayLabel
-        }), /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: `input-group input-group-${size}`,
-          children: /*#__PURE__*/jsxRuntime.jsx(Input, {
-            type: "text",
-            inputMode: "numeric",
-            pattern: "[0-9]*",
-            name: "day",
-            autoComplete: dayAutoComplete,
-            value: day || '',
-            placeholder: placeholders?.day,
-            disabled: disabled,
-            min: 1,
-            onChange: event => handleDayChange(event)
-          })
-        })]
-      })
-    });
-  };
-  const getYear = () => {
-    return /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "col-sm-4",
-      children: /*#__PURE__*/jsxRuntime.jsxs("label", {
-        children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-          className: "sr-only",
-          children: yearLabel
-        }), /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: `input-group input-group-${size}`,
-          children: /*#__PURE__*/jsxRuntime.jsx(Input, {
-            type: "text",
-            inputMode: "numeric",
-            pattern: "[0-9]*",
-            name: "year",
-            autoComplete: yearAutoComplete,
-            placeholder: placeholders?.year,
-            value: year || '',
-            disabled: disabled,
-            min: 1,
-            onChange: event => handleYearChange(event)
-          })
-        })]
-      })
-    });
-  };
-  const MDY = new Set(['en-US']);
-  const YMD = new Set(['hu', 'hu-HU', 'zh-HK', 'zh-CN', 'ja', 'ja-JP']);
-  const monthBeforeDay = MDY.has(locale);
-  const yearFirst = YMD.has(locale);
-  const returnOrderedInputs = () => {
-    if (monthYearOnly) {
-      return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: ["!yearFirst && ", getMonth(), getYear(), "yearFirst && ", getMonth()]
-      });
-    }
-    if (monthBeforeDay) {
-      return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [getMonth(), getDay(), getYear()]
-      });
-    } else if (yearFirst) {
-      return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [getYear(), getMonth(), getDay()]
-      });
-    } else {
-      return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [getDay(), getMonth(), getYear()]
-      });
-    }
-  };
+  const monthBeforeDay = MonthBeforeDay.has(locale);
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: "tw-date",
     id: id,
@@ -3031,9 +2964,59 @@ const DateInput = ({
     ,
     onFocus: event => shouldPropagateOnFocus(event) ? onFocus && onFocus(event) : event.stopPropagation(),
     onBlur: event => shouldPropagateOnBlur(event) ? onBlur && onBlur(event) : event.stopPropagation(),
-    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "row",
-      children: returnOrderedInputs()
+      children: [monthBeforeDay && /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: monthWidth,
+        children: getSelectElement()
+      }), !monthYearOnly && /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "col-sm-3",
+        children: /*#__PURE__*/jsxRuntime.jsxs("label", {
+          children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+            className: "sr-only",
+            children: dayLabel
+          }), /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: `input-group input-group-${size}`,
+            children: /*#__PURE__*/jsxRuntime.jsx(Input, {
+              type: "text",
+              inputMode: "numeric",
+              pattern: "[0-9]*",
+              name: "day",
+              autoComplete: dayAutoComplete,
+              value: day || '',
+              placeholder: placeholders.day,
+              disabled: disabled,
+              min: 1,
+              onChange: event => handleDayChange(event)
+            })
+          })]
+        })
+      }), !monthBeforeDay && /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: monthWidth,
+        children: getSelectElement()
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "col-sm-4",
+        children: /*#__PURE__*/jsxRuntime.jsxs("label", {
+          children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+            className: "sr-only",
+            children: yearLabel
+          }), /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: `input-group input-group-${size}`,
+            children: /*#__PURE__*/jsxRuntime.jsx(Input, {
+              type: "text",
+              inputMode: "numeric",
+              pattern: "[0-9]*",
+              name: "year",
+              autoComplete: yearAutoComplete,
+              placeholder: placeholders.year,
+              value: year || '',
+              disabled: disabled,
+              min: 1,
+              onChange: event => handleYearChange(event)
+            })
+          })]
+        })
+      })]
     })
   });
 };
@@ -6602,7 +6585,7 @@ function SelectInput({
         }) => /*#__PURE__*/jsxRuntime.jsx(SelectInputTriggerButtonPropsContext.Provider, {
           // eslint-disable-next-line react/jsx-no-constructed-context-values
           value: {
-            ref: mergeRefs__default.default([ref, triggerRef]),
+            ref: mergeRefs([ref, triggerRef]),
             id,
             ...mergeProps__default.default({
               onClick: () => {
@@ -15103,13 +15086,12 @@ const translations = {
   cs,
   de,
   en,
-  'en-US': en,
   es,
   fr,
   hu,
   id,
   it,
-  'ja-JP': ja,
+  ja,
   pl,
   pt,
   ro,