@transferwise/components 45.19.5 → 45.20.0

package/build/index.js

@@ -6413,9 +6413,7 @@ function BottomSheet({
       }
     }
   });
-  const dismiss = react.useDismiss(context, {
-    outsidePressEvent: 'mousedown'
-  });
+  const dismiss = react.useDismiss(context);
   const role = react.useRole(context);
   const {
     getReferenceProps,
@@ -6449,20 +6447,20 @@ function BottomSheet({
             children: /*#__PURE__*/jsxRuntime.jsx("div", {
               className: "np-bottom-sheet-v2-backdrop"
             })
-          }), /*#__PURE__*/jsxRuntime.jsx(FocusBoundary, {
-            children: /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
-              context: context,
-              initialFocus: initialFocusRef,
-              guards: false,
-              modal: false,
-              children: /*#__PURE__*/jsxRuntime.jsx("div", {
-                className: "np-bottom-sheet-v2",
-                children: /*#__PURE__*/jsxRuntime.jsx(react$1.Transition.Child, {
-                  className: "np-bottom-sheet-v2-content",
-                  enter: "np-bottom-sheet-v2-content--enter",
-                  enterFrom: "np-bottom-sheet-v2-content--enter-from",
-                  leave: "np-bottom-sheet-v2-content--leave",
-                  leaveTo: "np-bottom-sheet-v2-content--leave-to",
+          }), /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "np-bottom-sheet-v2",
+            children: /*#__PURE__*/jsxRuntime.jsx(react$1.Transition.Child, {
+              className: "np-bottom-sheet-v2-content",
+              enter: "np-bottom-sheet-v2-content--enter",
+              enterFrom: "np-bottom-sheet-v2-content--enter-from",
+              leave: "np-bottom-sheet-v2-content--leave",
+              leaveTo: "np-bottom-sheet-v2-content--leave-to",
+              children: /*#__PURE__*/jsxRuntime.jsx(FocusBoundary, {
+                children: /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
+                  context: context,
+                  initialFocus: initialFocusRef,
+                  guards: false,
+                  modal: false,
                   children: /*#__PURE__*/jsxRuntime.jsxs("div", {
                     // Force inner state invalidation on open
                     ref: refs.setFloating,
@@ -6560,9 +6558,7 @@ function Popover({
       }
     }
   });
-  const dismiss = react.useDismiss(context, {
-    outsidePressEvent: 'mousedown'
-  });
+  const dismiss = react.useDismiss(context);
   const role = react.useRole(context);
   const {
     getReferenceProps,
@@ -6635,7 +6631,13 @@ function inferSearchableStrings(value) {
   }
   return [];
 }
-const SelectInputHasValueContext = /*#__PURE__*/React.createContext(false);
+const SelectInputItemCheckPaddingContext = /*#__PURE__*/React.createContext(false);
+function useSelectInputItemCheckPadding() {
+  const checkPadding = React.useContext(SelectInputItemCheckPaddingContext);
+  // Avoid layout shifts during transitions via caching
+  const [initialCheckPadding] = React.useState(checkPadding);
+  return initialCheckPadding;
+}
 const SelectInputTriggerButtonPropsContext = /*#__PURE__*/React.createContext({});
 const SelectInputOptionContentWithinTriggerContext = /*#__PURE__*/React.createContext(false);
 function dedupeSelectInputOptionItem(item, existingValues) {
@@ -6762,9 +6764,10 @@ function SelectInput({
     children: ({
       disabled: uiDisabled,
       value
-    }) => /*#__PURE__*/jsxRuntime.jsx(SelectInputHasValueContext.Provider, {
-      value: value != null,
+    }) => /*#__PURE__*/jsxRuntime.jsx(SelectInputItemCheckPaddingContext.Provider, {
+      value: Boolean(filterable) || value != null,
       children: /*#__PURE__*/jsxRuntime.jsx(OptionsOverlay, {
+        placement: "bottom-start",
         open: open,
         renderTrigger: ({
           ref,
@@ -6865,7 +6868,7 @@ const SelectInputOptionsContainer = /*#__PURE__*/React.forwardRef(function Selec
 function SelectInputOptions({
   items,
   renderValue = wrapInFragment,
-  filterable,
+  filterable = false,
   filterPlaceholder,
   searchInputRef,
   listboxRef
@@ -6981,6 +6984,7 @@ function SelectInputGroupItemView({
   needle
 }) {
   const headerId = reactId.useId();
+  const checkPadding = useSelectInputItemCheckPadding();
   return (
     /*#__PURE__*/
     // An empty container may be rendered when no options match `needle`
@@ -6989,11 +6993,13 @@ function SelectInputGroupItemView({
       role: "group",
       "aria-labelledby": headerId,
       className: classNames__default.default(needle === null && 'np-select-input-group-item--without-needle'),
-      children: [needle == null ? /*#__PURE__*/jsxRuntime.jsx("header", {
+      children: [needle == null ? /*#__PURE__*/jsxRuntime.jsxs("header", {
         id: headerId,
         role: "presentation",
         className: "np-select-input-group-item-header np-text-title-group",
-        children: item.label
+        children: [checkPadding ? /*#__PURE__*/jsxRuntime.jsx("span", {
+          className: "np-select-input-option-check-placeholder"
+        }) : null, item.label]
       }) : null, item.options.map((option, index) => /*#__PURE__*/jsxRuntime.jsx(SelectInputItemView
       // eslint-disable-next-line react/no-array-index-key
       , {
@@ -7009,24 +7015,24 @@ function SelectInputOption({
   disabled,
   children
 }) {
+  const checkPadding = useSelectInputItemCheckPadding();
   return /*#__PURE__*/jsxRuntime.jsx(react$1.Listbox.Option, {
     as: "div",
     value: value,
     disabled: disabled,
     className: ({
       active,
-      selected,
       disabled: uiDisabled
-    }) => classNames__default.default('np-select-input-option-container np-text-body-large', active && 'np-select-input-option-container--active', selected && 'np-select-input-option-container--selected', uiDisabled && 'np-select-input-option-container--disabled'),
+    }) => classNames__default.default('np-select-input-option-container np-text-body-large', active && 'np-select-input-option-container--active', uiDisabled && 'np-select-input-option-container--disabled'),
     children: ({
       selected
     }) => /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      children: [checkPadding ? /*#__PURE__*/jsxRuntime.jsx(icons.Check, {
+        size: 16,
+        className: classNames__default.default('np-select-input-option-check', !selected && 'np-select-input-option-check--not-selected')
+      }) : null, /*#__PURE__*/jsxRuntime.jsx("div", {
         className: "np-select-input-option",
         children: children
-      }), selected && /*#__PURE__*/jsxRuntime.jsx(icons.Check, {
-        size: 24,
-        className: classNames__default.default('np-select-input-option-check')
       })]
     })
   });