@transferwise/components 0.0.0-experimental-7a528f1 → 0.0.0-experimental-3f857d7

package/build/index.esm.js

@@ -6454,6 +6454,12 @@ const PolymorphicWithOverrides = /*#__PURE__*/forwardRef(function PolymorphicWit
   });
 });
 
+function wrapInFragment(value) {
+  return /*#__PURE__*/jsx(Fragment, {
+    children: value
+  });
+}
+
 var messages$4 = defineMessages({
   noResultsFound: {
     id: "neptune.SelectInput.noResultsFound"
@@ -6794,10 +6800,10 @@ const defaultRenderTrigger = ({
   children: /*#__PURE__*/jsx(SelectInputTriggerButton, {
     as: ButtonInput,
     size: size,
-    children: /*#__PURE__*/jsx("span", {
-      className: classNames('np-select-input-content', placeholderShown && 'np-select-input-placeholder'),
-      children: content
-    })
+    children: placeholderShown ? /*#__PURE__*/jsxs("span", {
+      className: "np-select-input-placeholder",
+      children: [" ", content]
+    }) : content
   })
 });
 function SelectInputClearButton({
@@ -6818,13 +6824,12 @@ function SelectInputClearButton({
 const noop = () => {};
 function SelectInput({
   name,
-  multiple,
   placeholder,
   items,
   defaultValue,
   value: controlledValue,
   compareValues,
-  renderValue = String,
+  renderValue = wrapInFragment,
   renderFooter,
   renderTrigger = defaultRenderTrigger,
   filterable,
@@ -6853,7 +6858,6 @@ function SelectInput({
   const controllerRef = filterable ? searchInputRef : listboxRef;
   return /*#__PURE__*/jsx(Listbox, {
     name: name,
-    multiple: multiple,
     defaultValue: defaultValue,
     value: controlledValue
     // TODO: Remove assertion when upgrading TypeScript to v5
@@ -6862,78 +6866,73 @@ function SelectInput({
     by: compareValues,
     disabled: disabled,
     onChange: value => {
-      if (!multiple) {
-        setOpen(false);
-      }
+      setOpen(false);
       onChange?.(value);
     },
     children: ({
       disabled: uiDisabled,
       value
-    }) => {
-      const placeholderShown = multiple && Array.isArray(value) ? value.length === 0 : value == null;
-      return /*#__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: () => {
+    }) => /*#__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);
+            },
+            onKeyDown: event => {
+              if (event.key === ' ' || event.key === 'Enter' || event.key === 'ArrowDown' || event.key === 'ArrowUp') {
                 setOpen(prev => !prev);
-              },
-              onKeyDown: event => {
-                if (event.key === ' ' || event.key === 'Enter' || event.key === 'ArrowDown' || event.key === 'ArrowUp') {
-                  setOpen(prev => !prev);
-                }
               }
-            }, getInteractionProps())
-          },
-          children: renderTrigger({
-            content: !placeholderShown ? /*#__PURE__*/jsx(SelectInputOptionContentWithinTriggerContext.Provider, {
-              value: true,
-              children: multiple && Array.isArray(value) ? value.map(option => renderValue(option, true)).join(', ') : renderValue(value, true)
-            }) : placeholder,
-            placeholderShown,
-            clear: onClear != null ? () => {
-              onClear();
-              triggerRef.current?.focus({
-                preventScroll: true
-              });
-            } : undefined,
-            disabled: uiDisabled,
-            size,
-            className
-          })
-        }),
-        initialFocusRef: controllerRef,
-        size: filterable ? 'lg' : 'md',
-        padding: "none",
-        onClose: () => {
-          setOpen(false);
-        },
-        onCloseEnd: () => {
-          if (filterQuery !== '') {
-            setFilterQuery('');
-          }
+            }
+          }, getInteractionProps())
         },
-        children: /*#__PURE__*/jsx(SelectInputOptions, {
-          items: items,
-          renderValue: renderValue,
-          renderFooter: renderFooter,
-          filterable: filterable,
-          filterPlaceholder: filterPlaceholder,
-          searchInputRef: searchInputRef,
-          listboxRef: listboxRef,
-          filterQuery: filterQuery,
-          onFilterChange: setFilterQuery
+        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,
+      size: filterable ? 'lg' : 'md',
+      padding: "none",
+      onClose: () => {
+        setOpen(false);
+      },
+      onCloseEnd: () => {
+        if (filterQuery !== '') {
+          setFilterQuery('');
+        }
+      },
+      children: /*#__PURE__*/jsx(SelectInputOptions, {
+        items: items,
+        renderValue: renderValue,
+        renderFooter: renderFooter,
+        filterable: filterable,
+        filterPlaceholder: filterPlaceholder,
+        searchInputRef: searchInputRef,
+        listboxRef: listboxRef,
+        filterQuery: filterQuery,
+        onFilterChange: setFilterQuery
+      })
+    })
   });
 }
 function SelectInputTriggerButton({
@@ -6996,7 +6995,7 @@ const SelectInputOptionsContainer = /*#__PURE__*/forwardRef(function SelectInput
 });
 function SelectInputOptions({
   items,
-  renderValue = String,
+  renderValue = wrapInFragment,
   renderFooter,
   filterable = false,
   filterPlaceholder,
@@ -11200,6 +11199,102 @@ Select.defaultProps = {
   dropdownProps: {}
 };
 
+const SegmentedControl = ({
+  name,
+  defaultValue,
+  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) {
+    throw new Error('SegmentedControl only supports up to 3 segments');
+  }
+  const segmentsWithRefs = segments.map(segment => ({
+    ...segment,
+    ref: /*#__PURE__*/createRef()
+  }));
+  const updateSegmentPosition = () => {
+    const selectedSegmentRef = segmentsWithRefs.find(segment => segment.value === selectedValue)?.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
+    if (selectedSegmentRef?.current && segmentsRef.current) {
+      const {
+        style
+      } = segmentsRef.current;
+      style.setProperty('--segment-highlight-width', `${selectedSegmentRef.current.offsetWidth}px`);
+      style.setProperty('--segment-highlight-x', `${selectedSegmentRef.current.offsetLeft}px`);
+    }
+  };
+  useEffect(() => {
+    updateSegmentPosition();
+    const handleWindowSizeChange = () => {
+      setAnimate(false);
+      updateSegmentPosition();
+    };
+    window.addEventListener('resize', handleWindowSizeChange);
+    return () => {
+      window.removeEventListener('resize', handleWindowSizeChange);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [segmentsWithRefs, selectedValue]);
+  useEffect(() => {
+    onChange(selectedValue);
+  }, [onChange, selectedValue]);
+  return /*#__PURE__*/jsx("div", {
+    ref: segmentsRef,
+    "data-testid": "segmented-control",
+    className: classNames('segmented-control', {
+      'segmented-control--input': mode === 'input'
+    }),
+    children: /*#__PURE__*/jsx("div", {
+      className: classNames('segmented-control__segments', {
+        'segmented-control__segments--no-animate': !animate
+      }),
+      children: segmentsWithRefs.map(segment => mode === 'input' ? /*#__PURE__*/jsxs("label", {
+        ref: segment.ref,
+        htmlFor: segment.id,
+        className: classNames('segmented-control__segment', {
+          'segmented-control__selected-segment': selectedValue === segment.value
+        }),
+        children: [/*#__PURE__*/jsx("input", {
+          type: "radio",
+          className: "segmented-control__radio-input",
+          id: segment.id,
+          name: name,
+          value: segment.value,
+          checked: selectedValue === segment.value,
+          onChange: () => {
+            setAnimate(true);
+            setSelectedValue(segment.value);
+          }
+        }), /*#__PURE__*/jsx("div", {
+          className: "segmented-control__label-text",
+          children: segment.label
+        })]
+      }, segment.id) : /*#__PURE__*/jsx("button", {
+        ref: segment.ref,
+        type: "button",
+        role: "tab",
+        id: segment.id,
+        "aria-controls": segment.controls,
+        "aria-selected": selectedValue === segment.value,
+        className: classNames('segmented-control__segment', 'segmented-control__button', {
+          'segmented-control__selected-segment': selectedValue === segment.value
+        }),
+        onClick: () => {
+          setAnimate(true);
+          setSelectedValue(segment.value);
+        },
+        children: segment.label
+      }, segment.id))
+    })
+  });
+};
+
 const CSS_TRANSITION_DURATION = 400;
 class Snackbar extends Component {
   /** @type {RefObject<HTMLSpanElement>} */
@@ -15598,5 +15693,5 @@ const translations = {
   'zh-HK': zhHK
 };
 
-export { Accordion, ActionButton, ActionOption, Alert$1 as Alert, ArrowPosition as AlertArrowPosition, Avatar, AvatarType, AvatarWrapper, Badge, Card as BaseCard, Body, BottomSheet$2 as BottomSheet, Breakpoint, Button, Card$2 as Card, Checkbox$1 as Checkbox, CheckboxButton$1 as CheckboxButton, CheckboxOption, Chevron, Chip, Chips, CircularButton$1 as CircularButton, ControlType, CriticalCommsBanner, DEFAULT_LANG, DEFAULT_LOCALE, DateInput$1 as DateInput, DateLookup$1 as DateLookup, DateMode, Decision$1 as Decision, Presentation as DecisionPresentation, Type as DecisionType, DefinitionList$1 as DefinitionList, Dimmer$1 as Dimmer, Direction, DirectionProvider, Display, Drawer$1 as Drawer, DropFade, DynamicFieldDefinitionList$1 as DynamicFieldDefinitionList, Emphasis, FileType, FlowNavigation, Header, Image, Info, InfoPresentation, InlineAlert, Input, InputGroup, InputWithDisplayFormat, InstructionsList$1 as InstructionsList, LanguageProvider, Layout$1 as Layout, Link, ListItem$1 as ListItem, Loader$1 as Loader, Logo$1 as Logo, LogoType, Markdown$1 as Markdown, MarkdownNodeType, Modal, Money$1 as Money, MoneyInput$1 as MoneyInput, MonthFormat, NavigationOption, NavigationOptionList$1 as NavigationOptionsList, Nudge, Option$2 as Option, OverlayHeader$1 as OverlayHeader, PhoneNumberInput$1 as PhoneNumberInput, Popover$2 as Popover, Position, Priority, ProcessIndicator$1 as ProcessIndicator, ProfileType, Progress, ProgressBar, PromoCard$1 as PromoCard, PromoCard$1 as PromoCardGroup, Provider$1 as Provider, RTL_LANGUAGES, Radio$1 as Radio, RadioGroup$1 as RadioGroup, RadioOption$1 as RadioOption, SUPPORTED_LANGUAGES, Scroll, SearchInput, Section, Select, SelectInput, SelectInputOptionContent, SelectInputTriggerButton, Sentiment, Size, SlidingPanel$1 as SlidingPanel, SnackbarConsumer, SnackbarContext, SnackbarPortal, SnackbarProvider$1 as SnackbarProvider, Status, StatusIcon, Stepper, Sticky$1 as Sticky, Summary, Switch, SwitchOption, Tabs$1 as Tabs, TextArea, TextareaWithDisplayFormat, Theme, Title, Tooltip$1 as Tooltip, Type$1 as Type, Typeahead, Typography, Upload$1 as Upload, UploadInput, UploadStep, Variant, Width, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale, isBrowser, isServerSide, translations, useDirection, useLayout, useScreenSize, useSnackbar };
+export { Accordion, ActionButton, ActionOption, Alert$1 as Alert, ArrowPosition as AlertArrowPosition, Avatar, AvatarType, AvatarWrapper, Badge, Card as BaseCard, Body, BottomSheet$2 as BottomSheet, Breakpoint, Button, Card$2 as Card, Checkbox$1 as Checkbox, CheckboxButton$1 as CheckboxButton, CheckboxOption, Chevron, Chip, Chips, CircularButton$1 as CircularButton, ControlType, CriticalCommsBanner, DEFAULT_LANG, DEFAULT_LOCALE, DateInput$1 as DateInput, DateLookup$1 as DateLookup, DateMode, Decision$1 as Decision, Presentation as DecisionPresentation, Type as DecisionType, DefinitionList$1 as DefinitionList, Dimmer$1 as Dimmer, Direction, DirectionProvider, Display, Drawer$1 as Drawer, DropFade, DynamicFieldDefinitionList$1 as DynamicFieldDefinitionList, Emphasis, FileType, FlowNavigation, Header, Image, Info, InfoPresentation, InlineAlert, Input, InputGroup, InputWithDisplayFormat, InstructionsList$1 as InstructionsList, LanguageProvider, Layout$1 as Layout, Link, ListItem$1 as ListItem, Loader$1 as Loader, Logo$1 as Logo, LogoType, Markdown$1 as Markdown, MarkdownNodeType, Modal, Money$1 as Money, MoneyInput$1 as MoneyInput, MonthFormat, NavigationOption, NavigationOptionList$1 as NavigationOptionsList, Nudge, Option$2 as Option, OverlayHeader$1 as OverlayHeader, PhoneNumberInput$1 as PhoneNumberInput, Popover$2 as Popover, Position, Priority, ProcessIndicator$1 as ProcessIndicator, ProfileType, Progress, ProgressBar, PromoCard$1 as PromoCard, PromoCard$1 as PromoCardGroup, Provider$1 as Provider, RTL_LANGUAGES, Radio$1 as Radio, RadioGroup$1 as RadioGroup, RadioOption$1 as RadioOption, SUPPORTED_LANGUAGES, Scroll, SearchInput, Section, SegmentedControl, Select, SelectInput, SelectInputOptionContent, SelectInputTriggerButton, Sentiment, Size, SlidingPanel$1 as SlidingPanel, SnackbarConsumer, SnackbarContext, SnackbarPortal, SnackbarProvider$1 as SnackbarProvider, Status, StatusIcon, Stepper, Sticky$1 as Sticky, Summary, Switch, SwitchOption, Tabs$1 as Tabs, TextArea, TextareaWithDisplayFormat, Theme, Title, Tooltip$1 as Tooltip, Type$1 as Type, Typeahead, Typography, Upload$1 as Upload, UploadInput, UploadStep, Variant, Width, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale, isBrowser, isServerSide, translations, useDirection, useLayout, useScreenSize, useSnackbar };
 //# sourceMappingURL=index.esm.js.map