@transferwise/components 45.13.0 → 45.14.0

package/build/index.js

@@ -1369,7 +1369,6 @@ const Badge = ({
     })]
   });
 };
-var Badge$1 = Badge;
 
 const OptionalBadge = ({
   url,
@@ -1379,7 +1378,7 @@ const OptionalBadge = ({
   ...rest
 }) => {
   if (url) {
-    return /*#__PURE__*/jsxRuntime.jsx(Badge$1, {
+    return /*#__PURE__*/jsxRuntime.jsx(Badge, {
       badge: /*#__PURE__*/jsxRuntime.jsx("img", {
         src: url,
         alt: altText
@@ -1389,7 +1388,7 @@ const OptionalBadge = ({
     });
   }
   if (statusIcon) {
-    return /*#__PURE__*/jsxRuntime.jsx(Badge$1, {
+    return /*#__PURE__*/jsxRuntime.jsx(Badge, {
       badge: /*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
         sentiment: statusIcon,
         size: exports.Size.SMALL
@@ -1398,18 +1397,9 @@ const OptionalBadge = ({
       children: children
     });
   }
-  return children;
-};
-OptionalBadge.propTypes = {
-  url: PropTypes__default.default.string,
-  altText: PropTypes__default.default.string,
-  statusIcon: PropTypes__default.default.oneOf([exports.Sentiment.POSITIVE, exports.Sentiment.NEGATIVE, exports.Sentiment.NEUTRAL, exports.Sentiment.WARNING, exports.Sentiment.PENDING]),
-  children: PropTypes__default.default.node.isRequired
-};
-OptionalBadge.defaultProps = {
-  url: undefined,
-  altText: undefined,
-  statusIcon: undefined
+  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: children
+  });
 };
 const AvatarWrapper = ({
   url,
@@ -1424,7 +1414,6 @@ const AvatarWrapper = ({
 }) => {
   const [hasImageLoadError, setImageLoadError] = React.useState(false);
   const isBusinessProfile = profileType === exports.ProfileType.BUSINESS;
-
   // Reset the errored state when url changes
   React.useEffect(() => setImageLoadError(false), [url]);
   const getAvatarProps = () => {
@@ -1486,29 +1475,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__default.default.string,
-  profileType: PropTypes__default.default.oneOf([exports.ProfileType.PERSONAL, exports.ProfileType.BUSINESS]),
-  profileId: PropTypes__default.default.number,
-  badgeUrl: PropTypes__default.default.string,
-  badgeAltText: PropTypes__default.default.string,
-  badgeStatusIcon: PropTypes__default.default.oneOf([exports.Sentiment.POSITIVE, exports.Sentiment.NEGATIVE, exports.Sentiment.NEUTRAL, exports.Sentiment.WARNING, exports.Sentiment.PENDING]),
-  name: PropTypes__default.default.string,
-  avatarProps: PropTypes__default.default.shape({}),
-  badgeProps: PropTypes__default.default.shape({})
-};
-var AvatarWrapper$1 = AvatarWrapper;
 
 const THROTTLE_MS = 100;
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
@@ -5770,11 +5736,11 @@ const Image = ({
   onError,
   className,
   loading,
-  stretch,
+  stretch = true,
   role,
-  shrink
+  shrink = true
 }) => {
-  const elementReference = React.useRef();
+  const elementReference = React.useRef(null);
   const [hasIntersected] = useHasIntersected({
     elRef: elementReference,
     loading
@@ -5783,7 +5749,7 @@ const Image = ({
   let imageOnLoad = onLoad;
   if (loading === 'lazy' && !hasIntersected) {
     imageSource = EmptyTransparentImage;
-    imageOnLoad = null;
+    imageOnLoad = undefined;
   }
   return /*#__PURE__*/jsxRuntime.jsx("img", {
     ref: elementReference,
@@ -5799,28 +5765,6 @@ const Image = ({
     onError: onError
   });
 };
-Image.propTypes = {
-  id: PropTypes__default.default.string,
-  src: PropTypes__default.default.string.isRequired,
-  alt: PropTypes__default.default.string.isRequired,
-  onLoad: PropTypes__default.default.func,
-  onError: PropTypes__default.default.func,
-  className: PropTypes__default.default.string,
-  loading: PropTypes__default.default.oneOf(['lazy', 'eager']),
-  stretch: PropTypes__default.default.bool,
-  shrink: PropTypes__default.default.bool,
-  role: PropTypes__default.default.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
 exports.InfoPresentation = void 0;
@@ -6056,18 +6000,23 @@ const typeClassMap = {
   [exports.Sentiment.ERROR]: 'danger',
   [exports.Sentiment.NEGATIVE]: 'danger'
 };
-const InlineAlert = props => {
+const InlineAlert = ({
+  id,
+  type = exports.Sentiment.NEUTRAL,
+  className,
+  children
+}) => {
   const {
     isModern
   } = componentsTheming.useTheme();
-  const typeClass = `alert-${typeClassMap[props.type] || props.type}`;
+  const typeClass = `alert-${typeClassMap[type] || type}`;
   if (isModern) {
     return /*#__PURE__*/jsxRuntime.jsxs("div", {
       role: "alert",
-      id: props.id,
-      className: classNames__default.default('alert alert-detach', typeClass, props.className),
-      children: [(props.type === 'error' || props.type === 'negative') && /*#__PURE__*/jsxRuntime.jsx(icons.AlertCircle, {}), /*#__PURE__*/jsxRuntime.jsx("div", {
-        children: props.children
+      id: id,
+      className: classNames__default.default('alert alert-detach', typeClass, className),
+      children: [(type === 'error' || type === 'negative') && /*#__PURE__*/jsxRuntime.jsx(icons.AlertCircle, {}), /*#__PURE__*/jsxRuntime.jsx("div", {
+        children: children
       })]
     });
   }
@@ -6077,28 +6026,137 @@ const InlineAlert = props => {
   }) => {
     return /*#__PURE__*/jsxRuntime.jsx("div", {
       role: "alert",
-      id: props.id,
+      id: id,
       className: classNames__default.default('alert alert-detach p-x-2 p-y-1', typeClass, className),
       children: children
     });
   };
   const AlertWithArrow = withArrow(getAlertContents, exports.AlertArrowPosition.TOP_LEFT);
   return /*#__PURE__*/jsxRuntime.jsx(AlertWithArrow, {
-    ...props
+    id,
+    type,
+    className,
+    children
   });
 };
-InlineAlert.propTypes = {
-  children: PropTypes__default.default.node.isRequired,
-  className: PropTypes__default.default.string,
-  id: PropTypes__default.default.string,
-  type: PropTypes__default.default.oneOf(['positive', 'negative', 'warning', 'neutral', 'success', 'info', 'error'])
-};
-InlineAlert.defaultProps = {
-  className: undefined,
-  id: undefined,
-  type: exports.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 = React.useRef(() => {
+    throw new Error('Cannot call an event handler while rendering.');
+  });
+  React.useEffect(() => {
+    ref.current = callback;
+  });
+  return React.useCallback((...args) => ref.current(...args), []);
+}
+
+function useResizeObserver(ref, callback) {
+  const handleCallback = useEffectEvent(callback);
+  React.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__*/React.createContext([undefined, () => {}]);
+const InputPaddingEndContext = /*#__PURE__*/React.createContext([undefined, () => {}]);
+function useInputPaddings() {
+  const [paddingStart] = React.useContext(InputPaddingStartContext);
+  const [paddingEnd] = React.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] = React.useState(inputPaddingInitialState(addonStart));
+  const [paddingEnd, setPaddingEnd] = React.useState(inputPaddingInitialState(addonEnd));
+  return /*#__PURE__*/jsxRuntime.jsx(InputPaddingStartContext.Provider, {
+    value: React.useMemo(() => [paddingStart, setPaddingStart], [paddingStart]),
+    children: /*#__PURE__*/jsxRuntime.jsx(InputPaddingEndContext.Provider, {
+      value: React.useMemo(() => [paddingEnd, setPaddingEnd], [paddingEnd]),
+      children: /*#__PURE__*/jsxRuntime.jsxs("fieldset", {
+        disabled: disabled,
+        className: classNames__default.default(className, 'np-input-group'),
+        children: [addonStart != null ? /*#__PURE__*/jsxRuntime.jsx(InputAddon, {
+          placement: "start",
+          ...addonStart
+        }) : null, children, addonEnd != null ? /*#__PURE__*/jsxRuntime.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] = React.useContext(placement === 'start' ? InputPaddingStartContext : InputPaddingEndContext);
+  const ref = React.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__*/jsxRuntime.jsx("span", {
+    ref: ref,
+    className: classNames__default.default('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'
@@ -6118,11 +6176,15 @@ const Input = /*#__PURE__*/React.forwardRef(function Input({
   className,
   ...restProps
 }, reference) {
+  const inputPaddings = useInputPaddings();
   return /*#__PURE__*/jsxRuntime.jsx("input", {
     ref: reference,
     className: classNames__default.default(className, formControlClassNameBase({
       size
-    })),
+    }))
+    // eslint-disable-next-line react/forbid-dom-props
+    ,
+    style: inputPaddings,
     ...restProps
   });
 });
@@ -9867,10 +9929,9 @@ const PromoCard = /*#__PURE__*/React.forwardRef(({
       className: classNames__default.default('np-Card-image', {
         imageClass
       }),
-      children: /*#__PURE__*/jsxRuntime.jsx(Image$1, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Image, {
         src: imageSource,
-        alt: imageAlt,
-        role: !imageAlt ? 'presentation' : null,
+        alt: imageAlt || '',
         loading: "lazy"
       })
     }), /*#__PURE__*/jsxRuntime.jsx(PromoCardIndicator, {
@@ -11975,7 +12036,7 @@ class Typeahead extends React.Component {
               children: /*#__PURE__*/jsxRuntime.jsx(icons.Cross, {})
             })
           })]
-        }), displayAlert && /*#__PURE__*/jsxRuntime.jsx(InlineAlert$1, {
+        }), displayAlert && /*#__PURE__*/jsxRuntime.jsx(InlineAlert, {
           type: alert.type,
           children: alert.message
         }), menu]
@@ -14362,8 +14423,8 @@ exports.ActionButton = ActionButton;
 exports.ActionOption = ActionOption;
 exports.Alert = Alert$1;
 exports.Avatar = Avatar;
-exports.AvatarWrapper = AvatarWrapper$1;
-exports.Badge = Badge$1;
+exports.AvatarWrapper = AvatarWrapper;
+exports.Badge = Badge;
 exports.BaseCard = Card;
 exports.Body = Body;
 exports.BottomSheet = BottomSheet$1;
@@ -14392,10 +14453,11 @@ exports.DynamicFieldDefinitionList = DynamicFieldDefinitionList$1;
 exports.Emphasis = Emphasis;
 exports.FlowNavigation = FlowNavigation;
 exports.Header = Header;
-exports.Image = Image$1;
+exports.Image = Image;
 exports.Info = Info;
-exports.InlineAlert = InlineAlert$1;
+exports.InlineAlert = InlineAlert;
 exports.Input = Input;
+exports.InputGroup = InputGroup;
 exports.InputWithDisplayFormat = InputWithDisplayFormat$1;
 exports.InstructionsList = InstructionsList$1;
 exports.LanguageProvider = LanguageProvider;