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

package/build/index.js

@@ -14,11 +14,11 @@ var react$1 = require('@headlessui/react');
 var mergeProps = require('merge-props');
 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');
 var reactTransitionGroup = require('react-transition-group');
 var neptuneValidation = require('@transferwise/neptune-validation');
 var reactDom = require('react-dom');
-var focus = require('@react-aria/focus');
 var reactPopper = require('react-popper');
 var throttle = require('lodash.throttle');
 var art = require('@wise/art');
@@ -5521,35 +5521,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__*/jsxRuntime.jsx(react.FloatingFocusManager, {
-                context: context,
-                initialFocus: initialFocusRef,
-                children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-                  // Force inner state invalidation on open
-                  ref: refs.setFloating,
-                  className: "np-bottom-sheet-v2-content-inner-container",
-                  ...getFloatingProps(),
-                  children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-                    className: "np-bottom-sheet-v2-header",
-                    children: /*#__PURE__*/jsxRuntime.jsx(CloseButton, {
-                      size: exports.Size.SMALL,
-                      onClick: () => {
-                        onClose?.();
-                      }
-                    })
-                  }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-                    className: classNames__default.default('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__*/jsxRuntime.jsx("h2", {
-                      className: "np-bottom-sheet-v2-title np-text-title-body",
-                      children: title
-                    }) : null, /*#__PURE__*/jsxRuntime.jsx("div", {
-                      className: "np-bottom-sheet-v2-body np-text-body-default",
-                      children: children
+              children: /*#__PURE__*/jsxRuntime.jsx(focus.FocusScope, {
+                children: /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
+                  context: context,
+                  initialFocus: initialFocusRef,
+                  children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+                    // Force inner state invalidation on open
+                    ref: refs.setFloating,
+                    className: "np-bottom-sheet-v2-content-inner-container",
+                    ...getFloatingProps(),
+                    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+                      className: "np-bottom-sheet-v2-header",
+                      children: /*#__PURE__*/jsxRuntime.jsx(CloseButton, {
+                        size: exports.Size.SMALL,
+                        onClick: () => {
+                          onClose?.();
+                        }
+                      })
+                    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+                      className: classNames__default.default('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__*/jsxRuntime.jsx("h2", {
+                        className: "np-bottom-sheet-v2-title np-text-title-body",
+                        children: title
+                      }) : null, /*#__PURE__*/jsxRuntime.jsx("div", {
+                        className: "np-bottom-sheet-v2-body np-text-body-default",
+                        children: children
+                      })]
                     })]
-                  })]
-                }, floatingKey)
+                  }, floatingKey)
+                })
               })
             })
           })]
@@ -5650,32 +5652,34 @@ function Popover({
             setFloatingKey(prev => prev + 1);
           },
           afterLeave: onCloseEnd,
-          children: /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
-            context: context,
-            children: /*#__PURE__*/jsxRuntime.jsx("div", {
-              // Force inner state invalidation on open
-              ref: refs.setFloating,
-              className: classNames__default.default('np-popover-v2-container', {
-                'np-popover-v2-container--size-md': size === 'md',
-                'np-popover-v2-container--size-lg': size === 'lg'
-              })
-              // eslint-disable-next-line react/forbid-dom-props
-              ,
-              style: floatingStyles,
-              ...getFloatingProps(),
-              children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-                className: classNames__default.default('np-popover-v2', title && 'np-popover-v2--has-title', {
-                  'np-popover-v2--padding-md': padding === 'md'
-                }),
-                children: [title ? /*#__PURE__*/jsxRuntime.jsx("h2", {
-                  className: "np-popover-v2-title np-text-title-body",
-                  children: title
-                }) : null, /*#__PURE__*/jsxRuntime.jsx("div", {
-                  className: "np-popover-v2-content np-text-body-default",
-                  children: children
-                })]
-              })
-            }, floatingKey)
+          children: /*#__PURE__*/jsxRuntime.jsx(focus.FocusScope, {
+            children: /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
+              context: context,
+              children: /*#__PURE__*/jsxRuntime.jsx("div", {
+                // Force inner state invalidation on open
+                ref: refs.setFloating,
+                className: classNames__default.default('np-popover-v2-container', {
+                  'np-popover-v2-container--size-md': size === 'md',
+                  'np-popover-v2-container--size-lg': size === 'lg'
+                })
+                // eslint-disable-next-line react/forbid-dom-props
+                ,
+                style: floatingStyles,
+                ...getFloatingProps(),
+                children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+                  className: classNames__default.default('np-popover-v2', title && 'np-popover-v2--has-title', {
+                    'np-popover-v2--padding-md': padding === 'md'
+                  }),
+                  children: [title ? /*#__PURE__*/jsxRuntime.jsx("h2", {
+                    className: "np-popover-v2-title np-text-title-body",
+                    children: title
+                  }) : null, /*#__PURE__*/jsxRuntime.jsx("div", {
+                    className: "np-popover-v2-content np-text-body-default",
+                    children: children
+                  })]
+                })
+              }, floatingKey)
+            })
           })
         })
       })
@@ -9973,12 +9977,11 @@ Select.defaultProps = {
 
 const SegmentedControl = ({
   name,
-  defaultValue,
+  value,
   mode = 'input',
   segments,
   onChange
 }) => {
-  const [selectedValue, setSelectedValue] = React.useState(defaultValue || segments[0].value);
   const [animate, setAnimate] = React.useState(false);
   const segmentsRef = React.useRef(null);
   if (segments.length > 3) {
@@ -9989,7 +9992,7 @@ const SegmentedControl = ({
     ref: /*#__PURE__*/React.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
@@ -10002,6 +10005,7 @@ const SegmentedControl = ({
     }
   };
   React.useEffect(() => {
+    setAnimate(true);
     updateSegmentPosition();
     const handleWindowSizeChange = () => {
       setAnimate(false);
@@ -10012,7 +10016,7 @@ const SegmentedControl = ({
       window.removeEventListener('resize', handleWindowSizeChange);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [segmentsWithRefs, selectedValue]);
+  }, [segmentsWithRefs, value]);
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     ref: segmentsRef,
     "data-testid": "segmented-control",
@@ -10027,14 +10031,13 @@ const SegmentedControl = ({
       children: segmentsWithRefs.map(segment => {
         const onSelect = () => {
           setAnimate(true);
-          setSelectedValue(segment.value);
           onChange(segment.value);
         };
         return mode === 'input' ? /*#__PURE__*/jsxRuntime.jsxs("label", {
           ref: segment.ref,
           htmlFor: segment.id,
           className: classNames__default.default('segmented-control__segment', {
-            'segmented-control__selected-segment': selectedValue === segment.value
+            'segmented-control__selected-segment': value === segment.value
           }),
           children: [/*#__PURE__*/jsxRuntime.jsx("input", {
             type: "radio",
@@ -10042,12 +10045,12 @@ const SegmentedControl = ({
             id: segment.id,
             name: name,
             value: segment.value,
-            checked: selectedValue === segment.value,
+            checked: value === segment.value,
             onChange: onSelect
           }), /*#__PURE__*/jsxRuntime.jsx(Body, {
             className: "segmented-control__text",
             as: "span",
-            type: selectedValue === segment.value ? exports.Typography.BODY_DEFAULT_BOLD : exports.Typography.BODY_DEFAULT,
+            type: value === segment.value ? exports.Typography.BODY_DEFAULT_BOLD : exports.Typography.BODY_DEFAULT,
             children: segment.label
           })]
         }, segment.id) : /*#__PURE__*/jsxRuntime.jsx("button", {
@@ -10056,15 +10059,15 @@ const SegmentedControl = ({
           role: "tab",
           id: segment.id,
           "aria-controls": segment.controls,
-          "aria-selected": selectedValue === segment.value,
+          "aria-selected": value === segment.value,
           className: classNames__default.default('segmented-control__segment', 'segmented-control__button', {
-            'segmented-control__selected-segment': selectedValue === segment.value
+            'segmented-control__selected-segment': value === segment.value
           }),
           onClick: onSelect,
           children: /*#__PURE__*/jsxRuntime.jsx(Body, {
             as: "span",
             className: "segmented-control__text",
-            type: selectedValue === segment.value ? exports.Typography.BODY_DEFAULT_BOLD : exports.Typography.BODY_DEFAULT,
+            type: value === segment.value ? exports.Typography.BODY_DEFAULT_BOLD : exports.Typography.BODY_DEFAULT,
             children: segment.label
           })
         }, segment.id);