@transferwise/components 45.13.0 → 45.14.1

package/build/index.esm.js

@@ -1336,7 +1336,6 @@ const Badge = ({
     })]
   });
 };
-var Badge$1 = Badge;
 
 const OptionalBadge = ({
   url,
@@ -1346,7 +1345,7 @@ const OptionalBadge = ({
   ...rest
 }) => {
   if (url) {
-    return /*#__PURE__*/jsx(Badge$1, {
+    return /*#__PURE__*/jsx(Badge, {
       badge: /*#__PURE__*/jsx("img", {
         src: url,
         alt: altText
@@ -1356,7 +1355,7 @@ const OptionalBadge = ({
     });
   }
   if (statusIcon) {
-    return /*#__PURE__*/jsx(Badge$1, {
+    return /*#__PURE__*/jsx(Badge, {
       badge: /*#__PURE__*/jsx(StatusIcon, {
         sentiment: statusIcon,
         size: Size.SMALL
@@ -1365,18 +1364,9 @@ const OptionalBadge = ({
       children: children
     });
   }
-  return children;
-};
-OptionalBadge.propTypes = {
-  url: PropTypes.string,
-  altText: PropTypes.string,
-  statusIcon: PropTypes.oneOf([Sentiment.POSITIVE, Sentiment.NEGATIVE, Sentiment.NEUTRAL, Sentiment.WARNING, Sentiment.PENDING]),
-  children: PropTypes.node.isRequired
-};
-OptionalBadge.defaultProps = {
-  url: undefined,
-  altText: undefined,
-  statusIcon: undefined
+  return /*#__PURE__*/jsx(Fragment, {
+    children: children
+  });
 };
 const AvatarWrapper = ({
   url,
@@ -1391,7 +1381,6 @@ const AvatarWrapper = ({
 }) => {
   const [hasImageLoadError, setImageLoadError] = useState(false);
   const isBusinessProfile = profileType === ProfileType.BUSINESS;
-
   // Reset the errored state when url changes
   useEffect(() => setImageLoadError(false), [url]);
   const getAvatarProps = () => {
@@ -1453,29 +1442,6 @@ function getInitials(name) {
   }
   return allInitials[0] + allInitials.slice(-1);
 }
-AvatarWrapper.defaultProps = {
-  url: undefined,
-  profileType: undefined,
-  profileId: undefined,
-  badgeUrl: undefined,
-  badgeAltText: undefined,
-  badgeStatusIcon: undefined,
-  name: undefined,
-  avatarProps: {},
-  badgeProps: {}
-};
-AvatarWrapper.propTypes = {
-  url: PropTypes.string,
-  profileType: PropTypes.oneOf([ProfileType.PERSONAL, ProfileType.BUSINESS]),
-  profileId: PropTypes.number,
-  badgeUrl: PropTypes.string,
-  badgeAltText: PropTypes.string,
-  badgeStatusIcon: PropTypes.oneOf([Sentiment.POSITIVE, Sentiment.NEGATIVE, Sentiment.NEUTRAL, Sentiment.WARNING, Sentiment.PENDING]),
-  name: PropTypes.string,
-  avatarProps: PropTypes.shape({}),
-  badgeProps: PropTypes.shape({})
-};
-var AvatarWrapper$1 = AvatarWrapper;
 
 const THROTTLE_MS = 100;
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
@@ -5737,11 +5703,11 @@ const Image = ({
   onError,
   className,
   loading,
-  stretch,
+  stretch = true,
   role,
-  shrink
+  shrink = true
 }) => {
-  const elementReference = useRef();
+  const elementReference = useRef(null);
   const [hasIntersected] = useHasIntersected({
     elRef: elementReference,
     loading
@@ -5750,7 +5716,7 @@ const Image = ({
   let imageOnLoad = onLoad;
   if (loading === 'lazy' && !hasIntersected) {
     imageSource = EmptyTransparentImage;
-    imageOnLoad = null;
+    imageOnLoad = undefined;
   }
   return /*#__PURE__*/jsx("img", {
     ref: elementReference,
@@ -5766,28 +5732,6 @@ const Image = ({
     onError: onError
   });
 };
-Image.propTypes = {
-  id: PropTypes.string,
-  src: PropTypes.string.isRequired,
-  alt: PropTypes.string.isRequired,
-  onLoad: PropTypes.func,
-  onError: PropTypes.func,
-  className: PropTypes.string,
-  loading: PropTypes.oneOf(['lazy', 'eager']),
-  stretch: PropTypes.bool,
-  shrink: PropTypes.bool,
-  role: PropTypes.string
-};
-Image.defaultProps = {
-  id: null,
-  className: '',
-  onLoad: () => {},
-  onError: () => {},
-  loading: 'eager',
-  stretch: true,
-  shrink: true
-};
-var Image$1 = Image;
 
 // TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum
 var InfoPresentation;
@@ -6023,18 +5967,23 @@ const typeClassMap = {
   [Sentiment.ERROR]: 'danger',
   [Sentiment.NEGATIVE]: 'danger'
 };
-const InlineAlert = props => {
+const InlineAlert = ({
+  id,
+  type = Sentiment.NEUTRAL,
+  className,
+  children
+}) => {
   const {
     isModern
   } = useTheme();
-  const typeClass = `alert-${typeClassMap[props.type] || props.type}`;
+  const typeClass = `alert-${typeClassMap[type] || type}`;
   if (isModern) {
     return /*#__PURE__*/jsxs("div", {
       role: "alert",
-      id: props.id,
-      className: classNames('alert alert-detach', typeClass, props.className),
-      children: [(props.type === 'error' || props.type === 'negative') && /*#__PURE__*/jsx(AlertCircle, {}), /*#__PURE__*/jsx("div", {
-        children: props.children
+      id: id,
+      className: classNames('alert alert-detach', typeClass, className),
+      children: [(type === 'error' || type === 'negative') && /*#__PURE__*/jsx(AlertCircle, {}), /*#__PURE__*/jsx("div", {
+        children: children
       })]
     });
   }
@@ -6044,28 +5993,137 @@ const InlineAlert = props => {
   }) => {
     return /*#__PURE__*/jsx("div", {
       role: "alert",
-      id: props.id,
+      id: id,
       className: classNames('alert alert-detach p-x-2 p-y-1', typeClass, className),
       children: children
     });
   };
   const AlertWithArrow = withArrow(getAlertContents, ArrowPosition.TOP_LEFT);
   return /*#__PURE__*/jsx(AlertWithArrow, {
-    ...props
+    id,
+    type,
+    className,
+    children
   });
 };
-InlineAlert.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-  id: PropTypes.string,
-  type: PropTypes.oneOf(['positive', 'negative', 'warning', 'neutral', 'success', 'info', 'error'])
-};
-InlineAlert.defaultProps = {
-  className: undefined,
-  id: undefined,
-  type: Sentiment.NEUTRAL
-};
-var InlineAlert$1 = InlineAlert;
+
+/*
+ * Inspired by:
+ *
+ * - https://react.dev/learn/separating-events-from-effects#declaring-an-effect-event
+ * - https://legacy.reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback
+ */
+function useEffectEvent(callback) {
+  const ref = useRef(() => {
+    throw new Error('Cannot call an event handler while rendering.');
+  });
+  useEffect(() => {
+    ref.current = callback;
+  });
+  return useCallback((...args) => ref.current(...args), []);
+}
+
+function useResizeObserver(ref, callback) {
+  const handleCallback = useEffectEvent(callback);
+  useEffect(() => {
+    if (ref.current != null) {
+      const resizeObserver = new ResizeObserver(([entry]) => {
+        handleCallback(entry);
+      });
+      resizeObserver.observe(ref.current, {
+        box: 'border-box'
+      });
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }
+    return () => {};
+  }, [handleCallback, ref]);
+}
+
+function cssValueWithUnit(value) {
+  return typeof value === 'number' ? `${value}px` : value;
+}
+
+const InputPaddingStartContext = /*#__PURE__*/createContext([undefined, () => {}]);
+const InputPaddingEndContext = /*#__PURE__*/createContext([undefined, () => {}]);
+function useInputPaddings() {
+  const [paddingStart] = useContext(InputPaddingStartContext);
+  const [paddingEnd] = useContext(InputPaddingEndContext);
+  return {
+    paddingInlineStart: paddingStart,
+    paddingInlineEnd: paddingEnd
+  };
+}
+function inputPaddingInitialState({
+  initialContentWidth,
+  padding = inputAddonDefaultPadding
+} = {}) {
+  return () => initialContentWidth != null ? `calc(${cssValueWithUnit(initialContentWidth)} + ${cssValueWithUnit(inputAddonContentWidthAddendByPadding[padding])})` : undefined;
+}
+function InputGroup({
+  addonStart,
+  addonEnd,
+  disabled,
+  className,
+  children
+}) {
+  const [paddingStart, setPaddingStart] = useState(inputPaddingInitialState(addonStart));
+  const [paddingEnd, setPaddingEnd] = useState(inputPaddingInitialState(addonEnd));
+  return /*#__PURE__*/jsx(InputPaddingStartContext.Provider, {
+    value: useMemo(() => [paddingStart, setPaddingStart], [paddingStart]),
+    children: /*#__PURE__*/jsx(InputPaddingEndContext.Provider, {
+      value: useMemo(() => [paddingEnd, setPaddingEnd], [paddingEnd]),
+      children: /*#__PURE__*/jsxs("fieldset", {
+        disabled: disabled,
+        className: classNames(className, 'np-input-group'),
+        children: [addonStart != null ? /*#__PURE__*/jsx(InputAddon, {
+          placement: "start",
+          ...addonStart
+        }) : null, children, addonEnd != null ? /*#__PURE__*/jsx(InputAddon, {
+          placement: "end",
+          ...addonEnd
+        }) : null]
+      })
+    })
+  });
+}
+const inputAddonContentWidthAddendByPadding = {
+  none: 0,
+  sm: '1rem',
+  md: '1.5rem'
+};
+const inputAddonDefaultPadding = 'md';
+function InputAddon({
+  placement,
+  content,
+  interactive,
+  padding = inputAddonDefaultPadding
+}) {
+  const [, setInputPadding] = useContext(placement === 'start' ? InputPaddingStartContext : InputPaddingEndContext);
+  const ref = useRef(null);
+  useResizeObserver(ref, entry => {
+    // TODO: Remove fallback once most browsers support `borderBoxSize`
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (entry.borderBoxSize != null) {
+      setInputPadding(entry.borderBoxSize[0].inlineSize);
+    } else {
+      const targetStyle = getComputedStyle(entry.target);
+      setInputPadding(entry.contentRect.width + Number.parseFloat(targetStyle.paddingInlineStart) + Number.parseFloat(targetStyle.paddingInlineEnd));
+    }
+  });
+  return /*#__PURE__*/jsx("span", {
+    ref: ref,
+    className: classNames('np-input-addon', {
+      'np-input-addon--placement-start': placement === 'start',
+      'np-input-addon--placement-end': placement === 'end'
+    }, interactive && 'np-input-addon--interactive', {
+      'np-input-addon--padding-sm': padding === 'sm',
+      'np-input-addon--padding-md': padding === 'md'
+    }),
+    children: content
+  });
+}
 
 function formControlClassNameBase({
   size = 'auto'
@@ -6085,11 +6143,15 @@ const Input = /*#__PURE__*/forwardRef(function Input({
   className,
   ...restProps
 }, reference) {
+  const inputPaddings = useInputPaddings();
   return /*#__PURE__*/jsx("input", {
     ref: reference,
     className: classNames(className, formControlClassNameBase({
       size
-    })),
+    }))
+    // eslint-disable-next-line react/forbid-dom-props
+    ,
+    style: inputPaddings,
     ...restProps
   });
 });
@@ -9834,10 +9896,9 @@ const PromoCard = /*#__PURE__*/forwardRef(({
       className: classNames('np-Card-image', {
         imageClass
       }),
-      children: /*#__PURE__*/jsx(Image$1, {
+      children: /*#__PURE__*/jsx(Image, {
         src: imageSource,
-        alt: imageAlt,
-        role: !imageAlt ? 'presentation' : null,
+        alt: imageAlt || '',
         loading: "lazy"
       })
     }), /*#__PURE__*/jsx(PromoCardIndicator, {
@@ -11942,7 +12003,7 @@ class Typeahead extends Component {
               children: /*#__PURE__*/jsx(Cross, {})
             })
           })]
-        }), displayAlert && /*#__PURE__*/jsx(InlineAlert$1, {
+        }), displayAlert && /*#__PURE__*/jsx(InlineAlert, {
           type: alert.type,
           children: alert.message
         }), menu]
@@ -14324,5 +14385,5 @@ const translations = {
   zh
 };
 
-export { Accordion, ActionButton, ActionOption, Alert$1 as Alert, ArrowPosition as AlertArrowPosition, Avatar, AvatarType, AvatarWrapper$1 as AvatarWrapper, Badge$1 as Badge, Card as BaseCard, Body, BottomSheet$1 as BottomSheet, Breakpoint, Button, Card$2 as Card, Checkbox$1 as Checkbox, CheckboxButton$1 as CheckboxButton, CheckboxOption, Chevron$1 as 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$1 as Image, Info, InfoPresentation, InlineAlert$1 as InlineAlert, Input, InputWithDisplayFormat$1 as 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$1 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, Section, Select, 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$1 as 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, useSnackbar };
+export { Accordion, ActionButton, ActionOption, Alert$1 as Alert, ArrowPosition as AlertArrowPosition, Avatar, AvatarType, AvatarWrapper, Badge, Card as BaseCard, Body, BottomSheet$1 as BottomSheet, Breakpoint, Button, Card$2 as Card, Checkbox$1 as Checkbox, CheckboxButton$1 as CheckboxButton, CheckboxOption, Chevron$1 as 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$1 as 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$1 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, Section, Select, 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$1 as 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, useSnackbar };
 //# sourceMappingURL=index.esm.js.map