@transferwise/components 46.140.1 → 46.142.0

package/src/inputs/TextArea.tsx

@@ -3,7 +3,7 @@ import { forwardRef } from 'react';
 
 import { Merge } from '../utils';
 import { inputClassNameBase } from './_common';
-import { useInputAttributes } from './contexts';
+import { useTextareaCharacterCount, useInputAttributes } from './contexts';
 
 export interface TextAreaProps extends Merge<
   React.ComponentPropsWithRef<'textarea'>,
@@ -13,15 +13,20 @@ export interface TextAreaProps extends Merge<
 > {}
 
 export const TextArea = forwardRef(function TextArea(
-  { className, ...restProps }: TextAreaProps,
+  { className, maxLength, ...restProps }: TextAreaProps,
   reference: React.ForwardedRef<HTMLTextAreaElement | null>,
 ) {
   const inputAttributes = useInputAttributes();
+  const value = restProps.value ?? restProps.defaultValue ?? '';
+  const currentLength = typeof value === 'string' ? value.length : String(value).length;
+
+  useTextareaCharacterCount(currentLength, maxLength);
 
   return (
     <textarea
       ref={reference}
       className={clsx(className, inputClassNameBase(), 'np-text-area')}
+      maxLength={maxLength}
       {...inputAttributes}
       {...restProps}
     />

package/src/inputs/contexts.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext } from 'react';
+import { createContext, useContext, useEffect } from 'react';
 
 type FieldLabelContextType = {
   id?: string;
@@ -36,6 +36,23 @@ export function useFieldLabelRef() {
   return useContext(FieldLabelContext)?.ref;
 }
 
+export type TextareaCharacterCountState = { current: number; max: number } | null;
+
+const TextareaCharacterCountContext = createContext<
+  ((state: TextareaCharacterCountState) => void) | undefined
+>(undefined);
+export const TextareaCharacterCountProvider = TextareaCharacterCountContext.Provider;
+
+export function useTextareaCharacterCount(current: number, max: number | undefined) {
+  const setCharacterCount = useContext(TextareaCharacterCountContext);
+  useEffect(() => {
+    if (setCharacterCount && max != null) {
+      setCharacterCount({ current, max });
+      return () => setCharacterCount(null);
+    }
+  }, [setCharacterCount, current, max]);
+}
+
 export interface WithInputAttributesProps {
   inputAttributes: ReturnType<typeof useInputAttributes>;
 }

package/src/main.css

@@ -3238,7 +3238,16 @@ a,
 .np-text-display-extra-large,
 .np-text-display-large,
 .np-text-display-medium,
-.np-text-display-small {
+.np-text-display-small,
+.display-1--forced,
+.display-2--forced,
+.display-3--forced,
+.display-4--forced,
+.display-5--forced,
+.np-text-display-extra-large--forced,
+.np-text-display-large--forced,
+.np-text-display-medium--forced,
+.np-text-display-small--forced {
   font-family: 'Wise Sans', 'Inter', sans-serif;
   font-family: var(--font-family-display);
   font-synthesis: none;
@@ -3285,9 +3294,14 @@ a,
      * of Japanese ones for the logged out ones (exposed by the Editorial DS). Unfortunately,
      * font files are browser-cached and we carried over to launchpad, where it causes issues
      * for unsupported locales, especially those that share glyphs, like Japanese and Chinese.
+     * There are exceptions for small UI parts where Wise Sans is fine or expected — e.g. the
+     * numeric input of ExpressiveMoneyInput.
+     * Add `--forced` BEM modifier to the original class name to guarantee it.
      */
   font-family: 'Inter', Helvetica, Arial, sans-serif;
   font-family: var(--font-family-regular);
+  line-height: 1.2;
+  line-height: var(--line-height-title);
 }
 
 /* DEPRECATED(.np-text-display-extra-large): use .np-text-display-large instead */
@@ -26633,10 +26647,10 @@ a[data-toggle="tooltip"] {
 }
 
 .np-dot-mask {
-  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
-          mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
-  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
-          mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
+  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
+          mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
+  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
+          mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
 }
 
 .np-dot-badge {
@@ -29935,18 +29949,36 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   stroke-dasharray: var(--wds-list-item-spotlight-strokeDashSize) var(--wds-list-item-spotlight-strokeDashSize);
 }
 
-.np-field-control,
-.np-field__prompt {
+.np-field-control {
   margin-top: 4px;
   margin-top: var(--size-4);
 }
 
+.np-field-validation {
+  display: flex;
+  align-items: flex-start;
+  margin-top: 4px;
+  margin-top: var(--size-4);
+  gap: 8px;
+  gap: var(--size-8);
+}
+
+.np-field-textarea-char-counter {
+  min-width: 55px;
+  text-align: right;
+  margin-left: auto;
+  padding: 4px 0;
+  padding: var(--size-4) 0;
+  color: #768e9c;
+  color: var(--color-content-tertiary);
+}
+
 .np-field .form-group--typeahead[class],
 .np-field .np-checkbox-label[class] {
   margin-bottom: 0;
 }
 
-.np-field:has(.wds-radio-group) .np-field__prompt {
+.np-field:has(.wds-radio-group) .np-field-validation {
   margin-top: 12px;
   margin-top: var(--size-12);
 }
@@ -31052,6 +31084,7 @@ button.np-link {
   flex-grow: 1;
   text-align: right;
   background-color: transparent;
+  line-height: inherit;
 }
 
 .wds-amount-input-input:focus-visible {
@@ -31062,6 +31095,7 @@ button.np-link {
   flex-grow: 0;
   display: flex;
   align-items: center;
+  line-height: inherit;
 }
 
 .wds-currency-selector:disabled {

package/src/nudge/Nudge.tsx

@@ -1,6 +1,6 @@
 import { Illustration, Assets, type IllustrationNames } from '@wise/art';
 import { clsx } from 'clsx';
-import { ReactNode, useEffect, useState, MouseEvent } from 'react';
+import { ReactNode, useEffect, useState, MouseEvent, useCallback } from 'react';
 
 import Body from '../body';
 import { Typography } from '../common';
@@ -96,8 +96,27 @@ const Nudge = ({
   action,
 }: Props) => {
   const intl = useIntl();
-  const [isDismissed, setIsDismissed] = useState(false);
-  const [isMounted, setIsMounted] = useState(false);
+  const getIsDismissed = useCallback(
+    () => (persistDismissal && id ? !!getLocalStorage()?.find((item) => item === id) : false),
+    [persistDismissal, id],
+  );
+
+  const [nudgeState, setNudgeState] = useState(() => ({
+    isDismissed: getIsDismissed(),
+    isMounted: false,
+  }));
+
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- Setting mount state in mount effect
+    setNudgeState((prev) => ({ ...prev, isMounted: true }));
+  }, []);
+
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- Syncing dismissed state from localStorage on prop change
+    setNudgeState((prev) => ({ ...prev, isDismissed: getIsDismissed() }));
+  }, [getIsDismissed, id, persistDismissal]);
+
+  const { isDismissed } = nudgeState;
 
   const handleOnDismiss = () => {
     const dismissedNudgesStorage = getLocalStorage();
@@ -105,9 +124,9 @@ const Nudge = ({
     if (persistDismissal && id) {
       try {
         localStorage.setItem(STORAGE_NAME, JSON.stringify([...dismissedNudgesStorage, id]));
-      } catch (error) {}
+      } catch {}
 
-      setIsDismissed(true);
+      setNudgeState((prev) => ({ ...prev, isDismissed: true }));
     }
 
     if (onDismiss) {
@@ -116,25 +135,15 @@ const Nudge = ({
   };
 
   useEffect(() => {
-    if (persistDismissal && id) {
+    if (persistDismissal && id && isPreviouslyDismissed) {
       const dismissedNudgesStorage = getLocalStorage();
-      let isDismissed = false;
-
-      if (dismissedNudgesStorage?.find((item) => item === id)) {
-        setIsDismissed(true);
-        isDismissed = true;
-      }
-
-      if (isPreviouslyDismissed) {
-        isPreviouslyDismissed(isDismissed);
-      }
+      const wasDismissed = !!dismissedNudgesStorage?.find((item) => item === id);
+      isPreviouslyDismissed(wasDismissed);
     }
-
-    setIsMounted(true);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [id, persistDismissal]);
 
-  if (persistDismissal && (isDismissed || !isMounted)) {
+  if (persistDismissal && (isDismissed || !nudgeState.isMounted)) {
     return null;
   }
 
@@ -143,7 +152,7 @@ const Nudge = ({
       {!!mediaName && (
         <div className="wds-nudge-media">
           <Illustration
-            name={mediaName as IllustrationNames}
+            name={mediaName}
             className={clsx(`wds-nudge-media-${mediaName}`)}
             size="small"
             disablePadding

package/src/phoneNumberInput/PhoneNumberInput.test.tsx

@@ -283,6 +283,22 @@ describe('PhoneNumberInput', () => {
         expect(props.onChange).toHaveBeenCalledWith('+201111111', '+20');
       });
     });
+
+    describe('onChange deduplication', () => {
+      it('should not call onChange when the composed phone number has not changed', () => {
+        const onChangeMock = jest.fn();
+        const { rerender } = render(
+          <PhoneNumberInput initialValue="+441234567890" onChange={onChangeMock} />,
+        );
+
+        onChangeMock.mockClear();
+
+        // Rerender with the same initialValue - internal state should not trigger onChange
+        rerender(<PhoneNumberInput initialValue="+441234567890" onChange={onChangeMock} />);
+
+        expect(onChangeMock).not.toHaveBeenCalled();
+      });
+    });
   });
 
   describe('when selectProps is supplied', () => {

package/src/phoneNumberInput/PhoneNumberInput.tsx

@@ -75,12 +75,13 @@ const PhoneNumberInput = ({
 
   const { locale, formatMessage } = useIntl();
 
+  const [randomId] = useState(() => Math.random().toString(36).slice(2, 8));
+
   const createId = (customID: string | undefined, backup: string): string => {
     if (customID) {
       return customID + (backup ? `-${backup}` : '');
     }
-    const random = Math.random().toString(36).slice(2, 8);
-    return `${backup}-${random}`;
+    return `${backup}-${randomId}`;
   };
 
   // Link the first non-disabled input to the the Field label, if present
@@ -107,14 +108,16 @@ const PhoneNumberInput = ({
 
     return explodeNumberModel(cleanValue);
   });
-  const [broadcastedValue, setBroadcastedValue] = useState<PhoneNumber | null>(null);
+  const broadcastedValueRef = useRef<PhoneNumber>(internalValue);
 
   const [suffixDirty, setSuffixDirty] = useState(false);
+
   useEffect(() => {
-    if (internalValue.suffix) {
+    if (!suffixDirty && internalValue.suffix) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect -- Tracking when suffix becomes dirty
       setSuffixDirty(true);
     }
-  }, [internalValue.suffix]);
+  }, [internalValue.suffix, suffixDirty]);
 
   const countriesByPrefix = useMemo(
     () =>
@@ -152,13 +155,8 @@ const PhoneNumberInput = ({
   };
 
   useEffect(() => {
-    if (broadcastedValue === null) {
-      setBroadcastedValue(internalValue);
-      return;
-    }
-
     const internalPhoneNumber = `${internalValue.prefix ?? ''}${internalValue.suffix}`;
-    const broadcastedPhoneNumber = `${broadcastedValue.prefix ?? ''}${broadcastedValue.suffix}`;
+    const broadcastedPhoneNumber = `${broadcastedValueRef.current.prefix ?? ''}${broadcastedValueRef.current.suffix}`;
 
     if (internalPhoneNumber === broadcastedPhoneNumber) {
       return;
@@ -172,8 +170,8 @@ const PhoneNumberInput = ({
       newValue,
       internalValue.prefix ?? '', // TODO: Allow `null` in public API
     );
-    setBroadcastedValue(internalValue);
-  }, [onChange, broadcastedValue, internalValue]);
+    broadcastedValueRef.current = internalValue;
+  }, [onChange, internalValue]);
 
   useEffect(() => {
     const labelRef = fieldLabelRef?.current;

package/src/promoCard/PromoCard.story.tsx

@@ -47,7 +47,7 @@ export const TaskCard: Story = {
     isSmall: true,
     useDisplayFont: false,
     className: 'taskCard',
-  } as PromoCardLinkProps,
+  },
   decorators: [
     (Story) => (
       <div>
@@ -90,7 +90,7 @@ export const TaskCardWithCustomIcon: Story = {
   args: {
     ...TaskCard.args,
     indicatorIcon: <StarFill size={24} aria-hidden="true" />,
-  } as PromoCardLinkProps,
+  },
   decorators: TaskCard.decorators,
 };
 
@@ -101,7 +101,7 @@ export const TaskCardCompleted: Story = {
     href: undefined,
     indicatorIcon: 'check',
     className: 'taskCard taskCard--completed np-theme--personal np-theme-personal--forest-green',
-  } as PromoCardLinkProps,
+  },
   decorators: TaskCard.decorators,
 };
 

package/src/promoCard/PromoCardGroup.tsx

@@ -67,8 +67,45 @@ const PromoCardGroup: FunctionComponent<PromoCardGroupProps> = ({
   onChange = () => {},
   testId,
 }) => {
-  const [state, setState] = useState<string>(defaultChecked);
-  const [containerRole, setContainerRole] = useState<string | null>(null);
+  const [promoCardState, setPromoCardState] = useState<{
+    defaultChecked: string;
+    state: string;
+  }>({
+    defaultChecked,
+    state: defaultChecked,
+  });
+
+  useEffect(() => {
+    if (promoCardState.defaultChecked !== defaultChecked) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect -- Syncing defaultChecked prop to internal state
+      setPromoCardState({
+        defaultChecked,
+        state: defaultChecked,
+      });
+    }
+  }, [defaultChecked, promoCardState.defaultChecked]);
+
+  const { state } = promoCardState;
+  const setState = (newState: string) =>
+    setPromoCardState((prev) => ({ ...prev, state: newState }));
+
+  // Derive container role from children
+  const containerRole = useMemo(() => {
+    // Collect an array of types from the children PromoCard components
+    const types =
+      React.Children.map(children, (child) => {
+        if (React.isValidElement<PromoCardProps>(child) && child.props.type) {
+          return child.props.type;
+        }
+        return null;
+      })?.filter((type): type is 'radio' | 'checkbox' => type !== null && type !== undefined) ?? [];
+
+    // Check if all types are the same
+    const allTypesAreTheSame = types.every((type) => type === types[0]);
+
+    // If all types are the same and the type is 'radio', return 'radiogroup'
+    return allTypesAreTheSame && types[0] === 'radio' ? 'radiogroup' : null;
+  }, [children]);
 
   /**
    * The context value for the PromoCardGroup.
@@ -103,25 +140,6 @@ const PromoCardGroup: FunctionComponent<PromoCardGroupProps> = ({
     role: containerRole as AriaRoleRadioGroup | undefined, // Add the role attribute here
   };
 
-  useEffect(() => {
-    setState(defaultChecked);
-
-    // Collect an array of types from the children PromoCard components
-    const types =
-      React.Children.map(children, (child) => {
-        if (React.isValidElement<PromoCardProps>(child) && child.props.type) {
-          return child.props.type;
-        }
-        return null;
-      })?.filter((type): type is 'radio' | 'checkbox' => type !== null && type !== undefined) ?? [];
-
-    // Check if all types are the same
-    const allTypesAreTheSame = types.every((type) => type === types[0]);
-
-    // If all types are the same and the type is 'radio', set the container role
-    setContainerRole(allTypesAreTheSame && types[0] === 'radio' ? 'radiogroup' : null);
-  }, [defaultChecked, children]);
-
   return (
     <PromoCardContext.Provider value={contextValue}>
       <div {...commonProps}>{children}</div>

package/src/segmentedControl/SegmentedControl.test.tsx

@@ -188,4 +188,29 @@ describe('SegmentedControl', () => {
       'SegmentedControl only supports up to 3 segments. Please refer to: https://wise.design/components/segmented-control',
     );
   });
+
+  describe('animation behavior', () => {
+    it('skips animation on initial render', () => {
+      renderSegmentedControl();
+
+      // On initial render, the component should render without triggering animation
+      // The isMountedRef ensures animation is skipped on first render
+      const segmentedControl = screen.getByTestId('segmented-control');
+
+      // Verify the component renders successfully
+      expect(segmentedControl).toBeInTheDocument();
+    });
+
+    it('enables animation after value change', async () => {
+      renderSegmentedControl();
+
+      // Change value by clicking on a different segment
+      const payroll = screen.getByRole('radio', { name: 'Payroll' });
+      await userEvent.click(payroll);
+
+      // After a value change, the component should have completed at least one update cycle
+      // verifying that the isMountedRef tracking works correctly
+      expect(onChange).toHaveBeenCalledWith('payroll');
+    });
+  });
 });

package/src/segmentedControl/SegmentedControl.tsx

@@ -38,6 +38,7 @@ const SegmentedControl = ({
   segments,
   onChange,
 }: SegmentedControlProps) => {
+  const isMountedRef = useRef(false);
   const [animate, setAnimate] = useState(false);
 
   const segmentsRef = useRef<HTMLDivElement>(null);
@@ -67,7 +68,12 @@ const SegmentedControl = ({
   };
 
   useEffect(() => {
-    setAnimate(true);
+    if (isMountedRef.current) {
+      setAnimate(true);
+    } else {
+      isMountedRef.current = true;
+    }
+
     updateSegmentPosition();
 
     const handleWindowSizeChange = () => {

package/src/select/Select.story.tsx

@@ -43,7 +43,7 @@ const ImageIcon = () => (
 );
 
 const isSelectOptionItem = (option: SelectItem | null): option is SelectOptionItem => {
-  return option !== null && typeof option.value !== 'undefined';
+  return typeof option?.value !== 'undefined';
 };
 
 export const Basic: Story = {

package/src/styles/less/core/_typography.less

@@ -8,7 +8,17 @@
 
 /* DEPRECATED: use .np-text-*-title instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
-.h1, .h2, .h3, .h4, .h5, .h6, .title-1, .title-2, .title-3, .title-4, .title-5,
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6,
+.title-1,
+.title-2,
+.title-3,
+.title-4,
+.title-5,
 h1,
 h2,
 h3,
@@ -114,8 +124,12 @@ h6,
 
 /* DEPRECATED: use .np-text-body-default instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
-.body-2, .body-3, .small, .tiny,
-body, small,
+.body-2,
+.body-3,
+.small,
+.tiny,
+body,
+small,
 .np-text-body-default {
   font-size: var(--font-size-14);
   line-height: 155%;
@@ -139,7 +153,8 @@ body, small,
 
 /* DEPRECATED: use .np-text-body-large instead  */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
-.body-1, .value,
+.body-1,
+.value,
 .np-text-body-large {
   font-weight: var(--font-weight-regular);
   font-size: var(--font-size-16);
@@ -204,8 +219,11 @@ a,
 .np-text-display-large,
 .np-text-display-medium,
 .np-text-display-small {
-  font-family: var(--font-family-display);
-  font-synthesis: none;
+  &,
+  &--forced {
+    font-family: var(--font-family-display);
+    font-synthesis: none;
+  }
 
   :lang(ja) &,
   :lang(th) &,
@@ -216,8 +234,12 @@ a,
      * of Japanese ones for the logged out ones (exposed by the Editorial DS). Unfortunately,
      * font files are browser-cached and we carried over to launchpad, where it causes issues
      * for unsupported locales, especially those that share glyphs, like Japanese and Chinese.
+     * There are exceptions for small UI parts where Wise Sans is fine or expected — e.g. the
+     * numeric input of ExpressiveMoneyInput.
+     * Add `--forced` BEM modifier to the original class name to guarantee it.
      */
     font-family: var(--font-family-regular);
+    line-height: var(--line-height-title);
   }
 }
 

package/src/styles/less/neptune.css

@@ -3238,7 +3238,16 @@ a,
 .np-text-display-extra-large,
 .np-text-display-large,
 .np-text-display-medium,
-.np-text-display-small {
+.np-text-display-small,
+.display-1--forced,
+.display-2--forced,
+.display-3--forced,
+.display-4--forced,
+.display-5--forced,
+.np-text-display-extra-large--forced,
+.np-text-display-large--forced,
+.np-text-display-medium--forced,
+.np-text-display-small--forced {
   font-family: 'Wise Sans', 'Inter', sans-serif;
   font-family: var(--font-family-display);
   font-synthesis: none;
@@ -3285,9 +3294,14 @@ a,
      * of Japanese ones for the logged out ones (exposed by the Editorial DS). Unfortunately,
      * font files are browser-cached and we carried over to launchpad, where it causes issues
      * for unsupported locales, especially those that share glyphs, like Japanese and Chinese.
+     * There are exceptions for small UI parts where Wise Sans is fine or expected — e.g. the
+     * numeric input of ExpressiveMoneyInput.
+     * Add `--forced` BEM modifier to the original class name to guarantee it.
      */
   font-family: 'Inter', Helvetica, Arial, sans-serif;
   font-family: var(--font-family-regular);
+  line-height: 1.2;
+  line-height: var(--line-height-title);
 }
 
 /* DEPRECATED(.np-text-display-extra-large): use .np-text-display-large instead */

package/src/tabs/Tabs.tsx

@@ -254,7 +254,7 @@ export default class Tabs extends Component<TabsProps, TabsState> {
   };
 
   onKeyDown = (index: number) => (event: React.KeyboardEvent<HTMLLIElement>) => {
-    if (event && event.key === 'Enter') {
+    if (event?.key === 'Enter') {
       this.switchTab(index);
     }
   };

package/src/textareaWithDisplayFormat/TextareaWithDisplayFormat.story.tsx

@@ -21,6 +21,7 @@ export const Basic: Story = {
         <TextareaWithDisplayFormat
           id={id}
           value="0000"
+          maxLength={20}
           displayPattern="**** - **** - ****"
           onChange={console.log}
         />

package/src/tooltip/Tooltip.tsx

@@ -51,6 +51,7 @@ const Tooltip = ({
     middleware: [
       offset(16),
       flip({ fallbackPlacements: [Position.TOP] }),
+      // eslint-disable-next-line react-hooks/refs -- arrowRef is passed to floating-ui middleware, legitimate API usage
       arrowMiddleware({ element: arrowRef, padding: 8 }),
     ],
     whileElementsMounted: open ? autoUpdate : undefined,
@@ -63,6 +64,7 @@ const Tooltip = ({
   };
 
   return (
+    /* eslint-disable react-hooks/refs -- setReference and setFloating are callback refs from floating-ui, safe to pass during render */
     <span
       ref={refs.setReference}
       className="tw-tooltip-container"
@@ -96,6 +98,7 @@ const Tooltip = ({
         </div>
       </div>
     </span>
+    /* eslint-enable react-hooks/refs */
   );
 };
 

package/src/uploadInput/UploadInput.test.tsx

@@ -66,6 +66,25 @@ describe('UploadInput', () => {
     jest.useRealTimers();
   });
 
+  describe('onFilesChange mount behavior', () => {
+    it('should not call onFilesChange on initial mount', () => {
+      const onFilesChange = jest.fn();
+      renderComponent({
+        ...props,
+        files: [
+          {
+            id: 1,
+            filename: 'existing-file.pdf',
+            status: Status.SUCCEEDED,
+          },
+        ],
+        onFilesChange,
+      });
+
+      expect(onFilesChange).not.toHaveBeenCalled();
+    });
+  });
+
   describe('single file upload', () => {
     it('should trigger onUploadFiles & onFilesChange with a single FormData entry containing `file` field', async () => {
       const date = Date.now();