@transferwise/components 0.0.0-experimental-cc11279 → 0.0.0-experimental-b300585

package/build/index.mjs

@@ -13,11 +13,11 @@ import { Transition, Listbox } from '@headlessui/react';
 import mergeProps from 'merge-props';
 import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';
 import { useFloating, useDismiss, useRole, useInteractions, FloatingPortal, FloatingFocusManager, offset, flip, shift, size, autoUpdate } from '@floating-ui/react';
+import { FocusScope } from '@react-aria/focus';
 import { usePreventScroll } from '@react-aria/overlays';
 import { CSSTransition } from 'react-transition-group';
 import { isUndefined, isNumber, isEmpty, isNull } from '@transferwise/neptune-validation';
 import { createPortal } from 'react-dom';
-import { FocusScope } from '@react-aria/focus';
 import { usePopper } from 'react-popper';
 import throttle from 'lodash.throttle';
 import { Flag, Illustration } from '@wise/art';
@@ -5490,35 +5490,37 @@ function BottomSheet({
               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__*/jsx(FloatingFocusManager, {
-                context: context,
-                initialFocus: initialFocusRef,
-                children: /*#__PURE__*/jsxs("div", {
-                  // Force inner state invalidation on open
-                  ref: refs.setFloating,
-                  className: "np-bottom-sheet-v2-content-inner-container",
-                  ...getFloatingProps(),
-                  children: [/*#__PURE__*/jsx("div", {
-                    className: "np-bottom-sheet-v2-header",
-                    children: /*#__PURE__*/jsx(CloseButton, {
-                      size: Size.SMALL,
-                      onClick: () => {
-                        onClose?.();
-                      }
-                    })
-                  }), /*#__PURE__*/jsxs("div", {
-                    className: classNames('np-bottom-sheet-v2-content-inner', title && 'np-bottom-sheet-v2-content-inner--has-title', {
-                      'np-bottom-sheet-v2-content-inner--padding-md': padding === 'md'
-                    }),
-                    children: [title ? /*#__PURE__*/jsx("h2", {
-                      className: "np-bottom-sheet-v2-title np-text-title-body",
-                      children: title
-                    }) : null, /*#__PURE__*/jsx("div", {
-                      className: "np-bottom-sheet-v2-body np-text-body-default",
-                      children: children
+              children: /*#__PURE__*/jsx(FocusScope, {
+                children: /*#__PURE__*/jsx(FloatingFocusManager, {
+                  context: context,
+                  initialFocus: initialFocusRef,
+                  children: /*#__PURE__*/jsxs("div", {
+                    // Force inner state invalidation on open
+                    ref: refs.setFloating,
+                    className: "np-bottom-sheet-v2-content-inner-container",
+                    ...getFloatingProps(),
+                    children: [/*#__PURE__*/jsx("div", {
+                      className: "np-bottom-sheet-v2-header",
+                      children: /*#__PURE__*/jsx(CloseButton, {
+                        size: Size.SMALL,
+                        onClick: () => {
+                          onClose?.();
+                        }
+                      })
+                    }), /*#__PURE__*/jsxs("div", {
+                      className: classNames('np-bottom-sheet-v2-content-inner', title && 'np-bottom-sheet-v2-content-inner--has-title', {
+                        'np-bottom-sheet-v2-content-inner--padding-md': padding === 'md'
+                      }),
+                      children: [title ? /*#__PURE__*/jsx("h2", {
+                        className: "np-bottom-sheet-v2-title np-text-title-body",
+                        children: title
+                      }) : null, /*#__PURE__*/jsx("div", {
+                        className: "np-bottom-sheet-v2-body np-text-body-default",
+                        children: children
+                      })]
                     })]
-                  })]
-                }, floatingKey)
+                  }, floatingKey)
+                })
               })
             })
           })]
@@ -5619,32 +5621,34 @@ function Popover({
             setFloatingKey(prev => prev + 1);
           },
           afterLeave: onCloseEnd,
-          children: /*#__PURE__*/jsx(FloatingFocusManager, {
-            context: context,
-            children: /*#__PURE__*/jsx("div", {
-              // Force inner state invalidation on open
-              ref: refs.setFloating,
-              className: classNames('np-popover-v2-container', {
-                'np-popover-v2-container--size-md': size$1 === 'md',
-                'np-popover-v2-container--size-lg': size$1 === 'lg'
-              })
-              // eslint-disable-next-line react/forbid-dom-props
-              ,
-              style: floatingStyles,
-              ...getFloatingProps(),
-              children: /*#__PURE__*/jsxs("div", {
-                className: classNames('np-popover-v2', title && 'np-popover-v2--has-title', {
-                  'np-popover-v2--padding-md': padding === 'md'
-                }),
-                children: [title ? /*#__PURE__*/jsx("h2", {
-                  className: "np-popover-v2-title np-text-title-body",
-                  children: title
-                }) : null, /*#__PURE__*/jsx("div", {
-                  className: "np-popover-v2-content np-text-body-default",
-                  children: children
-                })]
-              })
-            }, floatingKey)
+          children: /*#__PURE__*/jsx(FocusScope, {
+            children: /*#__PURE__*/jsx(FloatingFocusManager, {
+              context: context,
+              children: /*#__PURE__*/jsx("div", {
+                // Force inner state invalidation on open
+                ref: refs.setFloating,
+                className: classNames('np-popover-v2-container', {
+                  'np-popover-v2-container--size-md': size$1 === 'md',
+                  'np-popover-v2-container--size-lg': size$1 === 'lg'
+                })
+                // eslint-disable-next-line react/forbid-dom-props
+                ,
+                style: floatingStyles,
+                ...getFloatingProps(),
+                children: /*#__PURE__*/jsxs("div", {
+                  className: classNames('np-popover-v2', title && 'np-popover-v2--has-title', {
+                    'np-popover-v2--padding-md': padding === 'md'
+                  }),
+                  children: [title ? /*#__PURE__*/jsx("h2", {
+                    className: "np-popover-v2-title np-text-title-body",
+                    children: title
+                  }) : null, /*#__PURE__*/jsx("div", {
+                    className: "np-popover-v2-content np-text-body-default",
+                    children: children
+                  })]
+                })
+              }, floatingKey)
+            })
           })
         })
       })
@@ -9942,12 +9946,11 @@ Select.defaultProps = {
 
 const SegmentedControl = ({
   name,
-  defaultValue,
+  value,
   mode = 'input',
   segments,
   onChange
 }) => {
-  const [selectedValue, setSelectedValue] = useState(defaultValue || segments[0].value);
   const [animate, setAnimate] = useState(false);
   const segmentsRef = useRef(null);
   if (segments.length > 3) {
@@ -9958,7 +9961,7 @@ const SegmentedControl = ({
     ref: /*#__PURE__*/createRef()
   }));
   const updateSegmentPosition = () => {
-    const selectedSegmentRef = segmentsWithRefs.find(segment => segment.value === selectedValue)?.ref;
+    const selectedSegmentRef = segmentsWithRefs.find(segment => segment.value === value)?.ref;
     // We grab the active segments style object from the ref
     // and set the css variables to the selected segments width and x position.
     // This is so we can animate the highlight to the selected segment
@@ -9971,6 +9974,7 @@ const SegmentedControl = ({
     }
   };
   useEffect(() => {
+    setAnimate(true);
     updateSegmentPosition();
     const handleWindowSizeChange = () => {
       setAnimate(false);
@@ -9981,7 +9985,7 @@ const SegmentedControl = ({
       window.removeEventListener('resize', handleWindowSizeChange);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [segmentsWithRefs, selectedValue]);
+  }, [segmentsWithRefs, value]);
   return /*#__PURE__*/jsx("div", {
     ref: segmentsRef,
     "data-testid": "segmented-control",
@@ -9996,14 +10000,13 @@ const SegmentedControl = ({
       children: segmentsWithRefs.map(segment => {
         const onSelect = () => {
           setAnimate(true);
-          setSelectedValue(segment.value);
           onChange(segment.value);
         };
         return mode === 'input' ? /*#__PURE__*/jsxs("label", {
           ref: segment.ref,
           htmlFor: segment.id,
           className: classNames('segmented-control__segment', {
-            'segmented-control__selected-segment': selectedValue === segment.value
+            'segmented-control__selected-segment': value === segment.value
           }),
           children: [/*#__PURE__*/jsx("input", {
             type: "radio",
@@ -10011,12 +10014,12 @@ const SegmentedControl = ({
             id: segment.id,
             name: name,
             value: segment.value,
-            checked: selectedValue === segment.value,
+            checked: value === segment.value,
             onChange: onSelect
           }), /*#__PURE__*/jsx(Body, {
             className: "segmented-control__text",
             as: "span",
-            type: selectedValue === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT,
+            type: value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT,
             children: segment.label
           })]
         }, segment.id) : /*#__PURE__*/jsx("button", {
@@ -10025,15 +10028,15 @@ const SegmentedControl = ({
           role: "tab",
           id: segment.id,
           "aria-controls": segment.controls,
-          "aria-selected": selectedValue === segment.value,
+          "aria-selected": value === segment.value,
           className: classNames('segmented-control__segment', 'segmented-control__button', {
-            'segmented-control__selected-segment': selectedValue === segment.value
+            'segmented-control__selected-segment': value === segment.value
           }),
           onClick: onSelect,
           children: /*#__PURE__*/jsx(Body, {
             as: "span",
             className: "segmented-control__text",
-            type: selectedValue === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT,
+            type: value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT,
             children: segment.label
           })
         }, segment.id);