@transferwise/components 45.21.0 → 45.21.2

package/build/index.esm.js

@@ -5503,6 +5503,11 @@ const Logo = ({
   });
   const isSmall = clientWidth < Breakpoint.SMALL;
   const LogoSvg = isSmall ? svgPaths[`WISE_FLAG${inverse ? '_INVERSE' : ''}`] : svgPaths[`${type}${inverse ? '_INVERSE' : ''}`];
+
+  // If clientWidth is not defined, don't render anything
+  if (clientWidth === null) {
+    return null;
+  }
   return /*#__PURE__*/jsx(LogoSvg, {
     className: classNames('np-logo-svg', className),
     alt: type === LogoType.WISE ? 'Wise' : 'Wise business'
@@ -6632,13 +6637,6 @@ function inferSearchableStrings(value) {
   }
   return [];
 }
-const SelectInputItemCheckPaddingContext = /*#__PURE__*/createContext(false);
-function useSelectInputItemCheckPadding() {
-  const checkPadding = useContext(SelectInputItemCheckPaddingContext);
-  // Avoid layout shifts during transitions via caching
-  const [initialCheckPadding] = useState(checkPadding);
-  return initialCheckPadding;
-}
 const SelectInputTriggerButtonPropsContext = /*#__PURE__*/createContext({});
 const SelectInputOptionContentWithinTriggerContext = /*#__PURE__*/createContext(false);
 function dedupeSelectInputOptionItem(item, existingValues) {
@@ -6783,54 +6781,51 @@ function SelectInput({
     children: ({
       disabled: uiDisabled,
       value
-    }) => /*#__PURE__*/jsx(SelectInputItemCheckPaddingContext.Provider, {
-      value: Boolean(filterable) || value != null,
-      children: /*#__PURE__*/jsx(OptionsOverlay, {
-        placement: "bottom-start",
-        open: open,
-        renderTrigger: ({
-          ref,
-          getInteractionProps
-        }) => /*#__PURE__*/jsx(SelectInputTriggerButtonPropsContext.Provider, {
-          // eslint-disable-next-line react/jsx-no-constructed-context-values
-          value: {
-            ref: mergeRefs([ref, triggerRef]),
-            ...mergeProps({
-              onClick: () => {
-                setOpen(prev => !prev);
-              }
-            }, getInteractionProps())
-          },
-          children: renderTrigger({
-            content: value != null ? /*#__PURE__*/jsx(SelectInputOptionContentWithinTriggerContext.Provider, {
-              value: true,
-              children: renderValue(value, true)
-            }) : placeholder,
-            placeholderShown: value == null,
-            clear: onClear != null ? () => {
-              onClear();
-              triggerRef.current?.focus({
-                preventScroll: true
-              });
-            } : undefined,
-            disabled: uiDisabled,
-            size,
-            className
-          })
-        }),
-        initialFocusRef: controllerRef,
-        padding: "none",
-        onClose: () => {
-          setOpen(false);
+    }) => /*#__PURE__*/jsx(OptionsOverlay, {
+      placement: "bottom-start",
+      open: open,
+      renderTrigger: ({
+        ref,
+        getInteractionProps
+      }) => /*#__PURE__*/jsx(SelectInputTriggerButtonPropsContext.Provider, {
+        // eslint-disable-next-line react/jsx-no-constructed-context-values
+        value: {
+          ref: mergeRefs([ref, triggerRef]),
+          ...mergeProps({
+            onClick: () => {
+              setOpen(prev => !prev);
+            }
+          }, getInteractionProps())
         },
-        children: /*#__PURE__*/jsx(SelectInputOptions, {
-          items: items,
-          renderValue: renderValue,
-          filterable: filterable,
-          filterPlaceholder: filterPlaceholder,
-          searchInputRef: searchInputRef,
-          listboxRef: listboxRef
+        children: renderTrigger({
+          content: value != null ? /*#__PURE__*/jsx(SelectInputOptionContentWithinTriggerContext.Provider, {
+            value: true,
+            children: renderValue(value, true)
+          }) : placeholder,
+          placeholderShown: value == null,
+          clear: onClear != null ? () => {
+            onClear();
+            triggerRef.current?.focus({
+              preventScroll: true
+            });
+          } : undefined,
+          disabled: uiDisabled,
+          size,
+          className
         })
+      }),
+      initialFocusRef: controllerRef,
+      padding: "none",
+      onClose: () => {
+        setOpen(false);
+      },
+      children: /*#__PURE__*/jsx(SelectInputOptions, {
+        items: items,
+        renderValue: renderValue,
+        filterable: filterable,
+        filterPlaceholder: filterPlaceholder,
+        searchInputRef: searchInputRef,
+        listboxRef: listboxRef
       })
     })
   });
@@ -7020,7 +7015,6 @@ function SelectInputGroupItemView({
   needle
 }) {
   const headerId = useId();
-  const checkPadding = useSelectInputItemCheckPadding();
   return (
     /*#__PURE__*/
     // An empty container may be rendered when no options match `needle`
@@ -7029,13 +7023,11 @@ function SelectInputGroupItemView({
       role: "group",
       "aria-labelledby": headerId,
       className: classNames(needle === null && 'np-select-input-group-item--without-needle'),
-      children: [needle == null ? /*#__PURE__*/jsxs("header", {
+      children: [needle == null ? /*#__PURE__*/jsx("header", {
         id: headerId,
         role: "presentation",
         className: "np-select-input-group-item-header np-text-title-group",
-        children: [checkPadding ? /*#__PURE__*/jsx("span", {
-          className: "np-select-input-option-check-placeholder"
-        }) : null, item.label]
+        children: item.label
       }) : null, item.options.map((option, index) => /*#__PURE__*/jsx(SelectInputItemView
       // eslint-disable-next-line react/no-array-index-key
       , {
@@ -7051,7 +7043,6 @@ function SelectInputOption({
   disabled,
   children
 }) {
-  const checkPadding = useSelectInputItemCheckPadding();
   return /*#__PURE__*/jsx(Listbox.Option, {
     as: "div",
     value: value,
@@ -7063,12 +7054,12 @@ function SelectInputOption({
     children: ({
       selected
     }) => /*#__PURE__*/jsxs(Fragment, {
-      children: [checkPadding ? /*#__PURE__*/jsx(Check, {
-        size: 16,
-        className: classNames('np-select-input-option-check', !selected && 'np-select-input-option-check--not-selected')
-      }) : null, /*#__PURE__*/jsx("div", {
+      children: [/*#__PURE__*/jsx("div", {
         className: "np-select-input-option",
         children: children
+      }), /*#__PURE__*/jsx(Check, {
+        size: 16,
+        className: classNames('np-select-input-option-check', !selected && 'np-select-input-option-check--not-selected')
       })]
     })
   });