@transferwise/components 46.140.1 → 46.142.0

package/build/expressiveMoneyInput/amountInput/AmountInput.mjs

@@ -1,7 +1,7 @@
 import { formatAmount } from '@transferwise/formatting';
 import { clsx } from 'clsx';
 import { AnimatePresence } from 'framer-motion';
-import { useState, useMemo, useRef, useEffect } from 'react';
+import { useState, useRef, useMemo, useEffect } from 'react';
 import { useIntl } from 'react-intl';
 import { AnimatedNumber } from '../animatedNumber/AnimatedNumber.mjs';
 import { useFocus } from '../hooks/useFocus.mjs';
@@ -26,11 +26,12 @@ const AmountInput = ({
     visualFocus,
     setVisualFocus
   } = useFocus();
-  const [value, setValue] = useState(amount ? getFormattedString({
+  const [value, setValue] = useState(() => amount ? getFormattedString({
     value: amount,
     currency,
     locale: intl.locale
   }) : '');
+  const prevAmountRef = useRef(amount);
   const numericValue = useMemo(() => {
     return getUnformattedNumber({
       value,
@@ -59,18 +60,22 @@ const AmountInput = ({
   const decimalPart = getDecimalPart(value, decimalSeparator);
   const decimalMode = decimalSeparator && value.includes(decimalSeparator);
   useEffect(() => {
-    if (!focus) {
-      setValue(amount ? getFormattedString({
-        value: amount,
-        currency,
-        locale: intl.locale
-      }) : '');
+    if (prevAmountRef.current !== amount) {
+      prevAmountRef.current = amount;
+      // Only update the displayed value if not focused (preserve user input when focused)
+      if (!focus) {
+        // eslint-disable-next-line react-hooks/set-state-in-effect -- Syncing external prop to internal state when unfocused
+        setValue(amount ? getFormattedString({
+          value: amount,
+          currency,
+          locale: intl.locale
+        }) : '');
+      }
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [amount]);
+  }, [amount, focus, currency, intl.locale]);
   useEffect(() => {
     onFocusChange?.(visualFocus);
-  }, [visualFocus]);
+  }, [onFocusChange, visualFocus]);
   const shouldReformatAfterUserInput = newValue => {
     // don't reformat if formatting would wipe out user's input
     if (reformatValue(newValue) === '') {
@@ -188,6 +193,7 @@ const AmountInput = ({
   const addonContent = useMemo(() => {
     // because we're using a separate "addon" element for the placeholder decimals, there is a possibility that the input itself will become scrollable
     // and the decimals will appear on top of the input. Safest thing to do is to just hide the addon if there is not enough room
+    // eslint-disable-next-line react-hooks/refs -- Reading layout dimensions for overflow detection
     if (isInputPossiblyOverflowing({
       ref,
       value
@@ -217,13 +223,13 @@ const AmountInput = ({
     // whenever decimals are shown, we need to account for the full decimal part for the font size calculation
     value: addonContent ? valueWithFullDecimals : value,
     focus: visualFocus,
-    inputElement: ref.current,
+    inputElement: ref,
     loading
   });
   return /*#__PURE__*/jsx("div", {
     className: "wds-amount-input-container",
     children: /*#__PURE__*/jsxs("div", {
-      className: clsx('wds-amount-input-input-container', 'np-text-display-large'),
+      className: clsx('wds-amount-input-input-container', 'np-text-display-large--forced'),
       style: style,
       children: [/*#__PURE__*/jsx("input", {
         ref: ref,

package/build/expressiveMoneyInput/amountInput/AmountInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AmountInput.mjs","sources":["../../../src/expressiveMoneyInput/amountInput/AmountInput.tsx"],"sourcesContent":["import { formatAmount } from '@transferwise/formatting';\nimport { clsx } from 'clsx';\nimport { AnimatePresence } from 'framer-motion';\nimport { type ChangeEvent, type KeyboardEvent, useEffect, useMemo, useRef, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Props as ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';\nimport { AnimatedNumber } from '../animatedNumber/AnimatedNumber';\nimport { useFocus } from '../hooks/useFocus';\nimport { useInputStyle } from '../hooks/useInputStyle';\nimport {\n  getDecimalCount,\n  getDecimalSeparator,\n  getEnteredDecimalsCount,\n  getFormattedString,\n  getGroupSeparator,\n  getUnformattedNumber,\n  isAllowedInputKey,\n  isInputPossiblyOverflowing,\n} from './utils';\n\ntype Props = {\n  id: string;\n  describedById?: string;\n  amount?: number | null;\n  currency: string;\n  autoFocus?: boolean;\n  onChange: (amount: number | null) => void;\n  onFocusChange?: (focused: boolean) => void;\n} & Pick<ExpressiveMoneyInputProps, 'loading'>;\n\nexport const AmountInput = ({\n  id,\n  describedById,\n  amount,\n  currency,\n  autoFocus,\n  onChange,\n  onFocusChange,\n  loading,\n}: Props) => {\n  const intl = useIntl();\n  const { focus, setFocus, visualFocus, setVisualFocus } = useFocus();\n\n  const [value, setValue] = useState<string>(\n    amount\n      ? getFormattedString({\n          value: amount,\n          currency,\n          locale: intl.locale,\n        })\n      : '',\n  );\n  const numericValue = useMemo(() => {\n    return getUnformattedNumber({\n      value,\n      currency,\n      locale: intl.locale,\n    });\n  }, [value, currency, intl.locale]);\n\n  const valueWithFullDecimals = useMemo(() => {\n    return getFormattedString({\n      value: numericValue ?? 0,\n      currency,\n      locale: intl.locale,\n      alwaysShowDecimals: true,\n    });\n  }, [numericValue, currency, intl.locale]);\n\n  const ref = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (autoFocus) {\n      ref.current?.focus();\n    }\n  }, []);\n\n  const placeholder = getPlaceholder(currency, intl.locale);\n  const groupSeparator = getGroupSeparator(currency, intl.locale);\n  const decimalSeparator = getDecimalSeparator(currency, intl.locale);\n  const maxDecimalCount = getDecimalCount(currency, intl.locale);\n\n  const decimalPart = getDecimalPart(value, decimalSeparator);\n  const decimalMode = decimalSeparator && value.includes(decimalSeparator);\n\n  useEffect(() => {\n    if (!focus) {\n      setValue(\n        amount\n          ? getFormattedString({\n              value: amount,\n              currency,\n              locale: intl.locale,\n            })\n          : '',\n      );\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [amount]);\n\n  useEffect(() => {\n    onFocusChange?.(visualFocus);\n  }, [visualFocus]);\n\n  const shouldReformatAfterUserInput = (newValue: string) => {\n    // don't reformat if formatting would wipe out user's input\n    if (reformatValue(newValue) === '') {\n      return false;\n    }\n\n    const endsWithDecimalSeparator = decimalSeparator && newValue.endsWith(decimalSeparator);\n    const endsWithGroupSeparator = groupSeparator && newValue.endsWith(groupSeparator);\n\n    // if the user has entered a seperator to the end, formatting would delete it\n    if (endsWithDecimalSeparator || endsWithGroupSeparator) {\n      return false;\n    }\n\n    const containsDecimalSeparator = decimalSeparator && newValue.includes(decimalSeparator);\n\n    if (containsDecimalSeparator) {\n      const enteredDecimalsCount = getEnteredDecimalsCount(newValue, decimalSeparator);\n      // don't reformat until user has entered all the allowed decimals\n      // for example, we don't want 1.1 to be reformatted to 1.10 immediately\n      if (enteredDecimalsCount < maxDecimalCount) {\n        return false;\n      }\n    }\n\n    return true;\n  };\n\n  const reformatValue = (newValue: string) => {\n    const unformattedValue = getUnformattedNumber({\n      value: newValue,\n      currency,\n      locale: intl.locale,\n    });\n    const formattedValue = unformattedValue\n      ? getFormattedString({\n          value: unformattedValue,\n          currency,\n          locale: intl.locale,\n        })\n      : '';\n    return formattedValue;\n  };\n\n  const handleChange = (newValue: string) => {\n    const oldCursorPosition = ref.current?.selectionStart ?? 0;\n\n    const newFormattedString = shouldReformatAfterUserInput(newValue)\n      ? reformatValue(newValue)\n      : newValue;\n    setValue(newFormattedString);\n\n    const newNumber = getUnformattedNumber({\n      value: newFormattedString,\n      currency,\n      locale: intl.locale,\n    });\n\n    if (newNumber !== numericValue) {\n      if (numericValue || newNumber) {\n        onChange(newNumber);\n      }\n    }\n\n    const newCursorPosition = oldCursorPosition + (newFormattedString.length - newValue.length);\n    requestAnimationFrame(() => {\n      ref?.current?.setSelectionRange(newCursorPosition, newCursorPosition);\n    });\n  };\n\n  const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {\n    e.preventDefault();\n\n    const clipboardData = e.clipboardData?.getData('text/plain');\n    if (!clipboardData) {\n      return;\n    }\n\n    // need to sanitise the pasted value otherwise other validation logic will ignore the input entirely\n    const sanitisedValue = reformatValue(clipboardData);\n\n    handleChange(sanitisedValue);\n  };\n\n  const handleBlur = () => {\n    setFocus(false);\n    setValue(reformatValue(value));\n  };\n\n  const handleBackspace = (e: KeyboardEvent<HTMLInputElement>) => {\n    const input = e.target as HTMLInputElement;\n    // using the updated selection range after the backspace key has been processed, instead of the current selection range in state\n    const { value: currentValue, selectionStart, selectionEnd } = input;\n\n    if (selectionStart === selectionEnd && selectionStart && selectionStart > 0) {\n      const charBeforeCursor = currentValue[selectionStart - 1];\n\n      // if the user deletes a thousands separator, remove the digit before it as well\n      if (charBeforeCursor === groupSeparator) {\n        e.preventDefault();\n        const beforeCursor = currentValue.slice(0, selectionStart - 2);\n        const afterCursor = currentValue.slice(selectionStart);\n        const newValue = `${beforeCursor}${afterCursor}`;\n        input.setSelectionRange(beforeCursor.length, beforeCursor.length);\n        handleChange(newValue);\n      }\n    }\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n    setFocus(true);\n    if (!isAllowedInputKey(e)) {\n      e.preventDefault();\n    }\n\n    if (e.key === 'Backspace') {\n      handleBackspace(e);\n    }\n  };\n\n  const isAllowedInput = (e: ChangeEvent<HTMLInputElement>) => {\n    const hasMultipleDecimalSeparators =\n      decimalSeparator && e.target.value.split(decimalSeparator).length > 2;\n    if (hasMultipleDecimalSeparators) {\n      return false;\n    }\n\n    const newNumericValue = getUnformattedNumber({\n      value: e.target.value,\n      currency,\n      locale: intl.locale,\n    });\n    const maxLength = Number.MAX_SAFE_INTEGER.toString().length;\n    if (String(newNumericValue).length > maxLength) {\n      return false;\n    }\n\n    return true;\n  };\n\n  const addonContent = useMemo((): string | null | undefined => {\n    // because we're using a separate \"addon\" element for the placeholder decimals, there is a possibility that the input itself will become scrollable\n    // and the decimals will appear on top of the input. Safest thing to do is to just hide the addon if there is not enough room\n    if (isInputPossiblyOverflowing({ ref, value })) {\n      return null;\n    }\n    if (!decimalSeparator || !value) {\n      return null;\n    }\n\n    // if the user has typed a decimal separator, show the full decimal part as a placeholder\n    // this returns a string even if there is no content, typing should replace the placeholder immediately without animation\n    // otherwise there is an ugly animation when going from 1.23 to 1.2 due to AnimatePresence\n    if (focus && decimalMode) {\n      // reuse getDecimalPart\n      const fullDecimalPart = getDecimalPart(valueWithFullDecimals, decimalSeparator);\n      // show only the characters that are not already displayed by the input\n      return fullDecimalPart?.slice(decimalPart?.length);\n    }\n\n    // in unfocused state, always show the full decimal part unless the user has already entered decimals\n    if (!focus && !decimalMode) {\n      const [_, decimalPlaceholder] = placeholder.split(decimalSeparator);\n      return decimalSeparator + decimalPlaceholder;\n    }\n\n    return null;\n  }, [\n    decimalMode,\n    decimalPart?.length,\n    decimalSeparator,\n    focus,\n    placeholder,\n    value,\n    valueWithFullDecimals,\n  ]);\n\n  const style = useInputStyle({\n    // whenever decimals are shown, we need to account for the full decimal part for the font size calculation\n    value: addonContent ? valueWithFullDecimals : value,\n    focus: visualFocus,\n    inputElement: ref.current,\n    loading,\n  });\n\n  return (\n    <div className=\"wds-amount-input-container\">\n      <div\n        className={clsx('wds-amount-input-input-container', 'np-text-display-large')}\n        style={style}\n      >\n        <input\n          ref={ref}\n          className=\"wds-amount-input-input\"\n          id={id}\n          autoComplete=\"off\"\n          inputMode=\"decimal\"\n          value={value}\n          type=\"text\"\n          placeholder={placeholder}\n          aria-describedby={describedById}\n          /* without this, the input tries to keep an aspect ratio and doesn't respect CSS width rules */\n          size={1}\n          onChange={(e) => {\n            if (isAllowedInput(e)) {\n              handleChange(e.target.value);\n            }\n          }}\n          onBlurCapture={() => handleBlur()}\n          onPaste={(e) => handlePaste(e)}\n          onFocus={() => {\n            setFocus(true);\n          }}\n          onBlur={() => {\n            setTimeout(() => setVisualFocus(false), 30);\n          }}\n          onKeyDown={(e) => handleKeyDown(e)}\n        />\n        <AnimatePresence initial={false}>\n          {addonContent !== null && (\n            <AnimatedNumber\n              className={clsx(\n                'wds-amount-input-placeholder',\n                visualFocus && 'wds-amount-input-placeholder-focus',\n              )}\n              onClick={() => ref.current?.focus()}\n            >\n              {addonContent}\n            </AnimatedNumber>\n          )}\n        </AnimatePresence>\n      </div>\n    </div>\n  );\n};\n\nconst getPlaceholder = (currency: string, locale: string) => {\n  return formatAmount(0, currency, locale, { alwaysShowDecimals: true });\n};\n\nconst getDecimalPart = (value: string, decimalSeparator: string | null) => {\n  if (!value || !decimalSeparator) {\n    return undefined;\n  }\n\n  const [_, decimalPart] = value.split(decimalSeparator);\n  return decimalPart ?? undefined;\n};\n"],"names":["AmountInput","id","describedById","amount","currency","autoFocus","onChange","onFocusChange","loading","intl","useIntl","focus","setFocus","visualFocus","setVisualFocus","useFocus","value","setValue","useState","getFormattedString","locale","numericValue","useMemo","getUnformattedNumber","valueWithFullDecimals","alwaysShowDecimals","ref","useRef","useEffect","current","placeholder","getPlaceholder","groupSeparator","getGroupSeparator","decimalSeparator","getDecimalSeparator","maxDecimalCount","getDecimalCount","decimalPart","getDecimalPart","decimalMode","includes","shouldReformatAfterUserInput","newValue","reformatValue","endsWithDecimalSeparator","endsWith","endsWithGroupSeparator","containsDecimalSeparator","enteredDecimalsCount","getEnteredDecimalsCount","unformattedValue","formattedValue","handleChange","oldCursorPosition","selectionStart","newFormattedString","newNumber","newCursorPosition","length","requestAnimationFrame","setSelectionRange","handlePaste","e","preventDefault","clipboardData","getData","sanitisedValue","handleBlur","handleBackspace","input","target","currentValue","selectionEnd","charBeforeCursor","beforeCursor","slice","afterCursor","handleKeyDown","isAllowedInputKey","key","isAllowedInput","hasMultipleDecimalSeparators","split","newNumericValue","maxLength","Number","MAX_SAFE_INTEGER","toString","String","addonContent","isInputPossiblyOverflowing","fullDecimalPart","_","decimalPlaceholder","style","useInputStyle","inputElement","_jsx","className","children","_jsxs","clsx","autoComplete","inputMode","type","size","onBlurCapture","onPaste","onFocus","onBlur","setTimeout","onKeyDown","AnimatePresence","initial","AnimatedNumber","onClick","formatAmount","undefined"],"mappings":"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"}
+{"version":3,"file":"AmountInput.mjs","sources":["../../../src/expressiveMoneyInput/amountInput/AmountInput.tsx"],"sourcesContent":["import { formatAmount } from '@transferwise/formatting';\nimport { clsx } from 'clsx';\nimport { AnimatePresence } from 'framer-motion';\nimport { type ChangeEvent, type KeyboardEvent, useEffect, useMemo, useRef, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Props as ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';\nimport { AnimatedNumber } from '../animatedNumber/AnimatedNumber';\nimport { useFocus } from '../hooks/useFocus';\nimport { useInputStyle } from '../hooks/useInputStyle';\nimport {\n  getDecimalCount,\n  getDecimalSeparator,\n  getEnteredDecimalsCount,\n  getFormattedString,\n  getGroupSeparator,\n  getUnformattedNumber,\n  isAllowedInputKey,\n  isInputPossiblyOverflowing,\n} from './utils';\n\ntype Props = {\n  id: string;\n  describedById?: string;\n  amount?: number | null;\n  currency: string;\n  autoFocus?: boolean;\n  onChange: (amount: number | null) => void;\n  onFocusChange?: (focused: boolean) => void;\n} & Pick<ExpressiveMoneyInputProps, 'loading'>;\n\nexport const AmountInput = ({\n  id,\n  describedById,\n  amount,\n  currency,\n  autoFocus,\n  onChange,\n  onFocusChange,\n  loading,\n}: Props) => {\n  const intl = useIntl();\n  const { focus, setFocus, visualFocus, setVisualFocus } = useFocus();\n\n  const [value, setValue] = useState<string>(() =>\n    amount\n      ? getFormattedString({\n          value: amount,\n          currency,\n          locale: intl.locale,\n        })\n      : '',\n  );\n  const prevAmountRef = useRef<string | number | null | undefined>(amount);\n  const numericValue = useMemo(() => {\n    return getUnformattedNumber({\n      value,\n      currency,\n      locale: intl.locale,\n    });\n  }, [value, currency, intl.locale]);\n\n  const valueWithFullDecimals = useMemo(() => {\n    return getFormattedString({\n      value: numericValue ?? 0,\n      currency,\n      locale: intl.locale,\n      alwaysShowDecimals: true,\n    });\n  }, [numericValue, currency, intl.locale]);\n\n  const ref = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (autoFocus) {\n      ref.current?.focus();\n    }\n  }, []);\n\n  const placeholder = getPlaceholder(currency, intl.locale);\n  const groupSeparator = getGroupSeparator(currency, intl.locale);\n  const decimalSeparator = getDecimalSeparator(currency, intl.locale);\n  const maxDecimalCount = getDecimalCount(currency, intl.locale);\n\n  const decimalPart = getDecimalPart(value, decimalSeparator);\n  const decimalMode = decimalSeparator && value.includes(decimalSeparator);\n\n  useEffect(() => {\n    if (prevAmountRef.current !== amount) {\n      prevAmountRef.current = amount;\n\n      // Only update the displayed value if not focused (preserve user input when focused)\n      if (!focus) {\n        // eslint-disable-next-line react-hooks/set-state-in-effect -- Syncing external prop to internal state when unfocused\n        setValue(\n          amount\n            ? getFormattedString({\n                value: amount,\n                currency,\n                locale: intl.locale,\n              })\n            : '',\n        );\n      }\n    }\n  }, [amount, focus, currency, intl.locale]);\n\n  useEffect(() => {\n    onFocusChange?.(visualFocus);\n  }, [onFocusChange, visualFocus]);\n\n  const shouldReformatAfterUserInput = (newValue: string) => {\n    // don't reformat if formatting would wipe out user's input\n    if (reformatValue(newValue) === '') {\n      return false;\n    }\n\n    const endsWithDecimalSeparator = decimalSeparator && newValue.endsWith(decimalSeparator);\n    const endsWithGroupSeparator = groupSeparator && newValue.endsWith(groupSeparator);\n\n    // if the user has entered a seperator to the end, formatting would delete it\n    if (endsWithDecimalSeparator || endsWithGroupSeparator) {\n      return false;\n    }\n\n    const containsDecimalSeparator = decimalSeparator && newValue.includes(decimalSeparator);\n\n    if (containsDecimalSeparator) {\n      const enteredDecimalsCount = getEnteredDecimalsCount(newValue, decimalSeparator);\n      // don't reformat until user has entered all the allowed decimals\n      // for example, we don't want 1.1 to be reformatted to 1.10 immediately\n      if (enteredDecimalsCount < maxDecimalCount) {\n        return false;\n      }\n    }\n\n    return true;\n  };\n\n  const reformatValue = (newValue: string) => {\n    const unformattedValue = getUnformattedNumber({\n      value: newValue,\n      currency,\n      locale: intl.locale,\n    });\n    const formattedValue = unformattedValue\n      ? getFormattedString({\n          value: unformattedValue,\n          currency,\n          locale: intl.locale,\n        })\n      : '';\n    return formattedValue;\n  };\n\n  const handleChange = (newValue: string) => {\n    const oldCursorPosition = ref.current?.selectionStart ?? 0;\n\n    const newFormattedString = shouldReformatAfterUserInput(newValue)\n      ? reformatValue(newValue)\n      : newValue;\n    setValue(newFormattedString);\n\n    const newNumber = getUnformattedNumber({\n      value: newFormattedString,\n      currency,\n      locale: intl.locale,\n    });\n\n    if (newNumber !== numericValue) {\n      if (numericValue || newNumber) {\n        onChange(newNumber);\n      }\n    }\n\n    const newCursorPosition = oldCursorPosition + (newFormattedString.length - newValue.length);\n    requestAnimationFrame(() => {\n      ref?.current?.setSelectionRange(newCursorPosition, newCursorPosition);\n    });\n  };\n\n  const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {\n    e.preventDefault();\n\n    const clipboardData = e.clipboardData?.getData('text/plain');\n    if (!clipboardData) {\n      return;\n    }\n\n    // need to sanitise the pasted value otherwise other validation logic will ignore the input entirely\n    const sanitisedValue = reformatValue(clipboardData);\n\n    handleChange(sanitisedValue);\n  };\n\n  const handleBlur = () => {\n    setFocus(false);\n    setValue(reformatValue(value));\n  };\n\n  const handleBackspace = (e: KeyboardEvent<HTMLInputElement>) => {\n    const input = e.target as HTMLInputElement;\n    // using the updated selection range after the backspace key has been processed, instead of the current selection range in state\n    const { value: currentValue, selectionStart, selectionEnd } = input;\n\n    if (selectionStart === selectionEnd && selectionStart && selectionStart > 0) {\n      const charBeforeCursor = currentValue[selectionStart - 1];\n\n      // if the user deletes a thousands separator, remove the digit before it as well\n      if (charBeforeCursor === groupSeparator) {\n        e.preventDefault();\n        const beforeCursor = currentValue.slice(0, selectionStart - 2);\n        const afterCursor = currentValue.slice(selectionStart);\n        const newValue = `${beforeCursor}${afterCursor}`;\n        input.setSelectionRange(beforeCursor.length, beforeCursor.length);\n        handleChange(newValue);\n      }\n    }\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n    setFocus(true);\n    if (!isAllowedInputKey(e)) {\n      e.preventDefault();\n    }\n\n    if (e.key === 'Backspace') {\n      handleBackspace(e);\n    }\n  };\n\n  const isAllowedInput = (e: ChangeEvent<HTMLInputElement>) => {\n    const hasMultipleDecimalSeparators =\n      decimalSeparator && e.target.value.split(decimalSeparator).length > 2;\n    if (hasMultipleDecimalSeparators) {\n      return false;\n    }\n\n    const newNumericValue = getUnformattedNumber({\n      value: e.target.value,\n      currency,\n      locale: intl.locale,\n    });\n    const maxLength = Number.MAX_SAFE_INTEGER.toString().length;\n    if (String(newNumericValue).length > maxLength) {\n      return false;\n    }\n\n    return true;\n  };\n\n  const addonContent = useMemo((): string | null | undefined => {\n    // because we're using a separate \"addon\" element for the placeholder decimals, there is a possibility that the input itself will become scrollable\n    // and the decimals will appear on top of the input. Safest thing to do is to just hide the addon if there is not enough room\n    // eslint-disable-next-line react-hooks/refs -- Reading layout dimensions for overflow detection\n    if (isInputPossiblyOverflowing({ ref, value })) {\n      return null;\n    }\n    if (!decimalSeparator || !value) {\n      return null;\n    }\n\n    // if the user has typed a decimal separator, show the full decimal part as a placeholder\n    // this returns a string even if there is no content, typing should replace the placeholder immediately without animation\n    // otherwise there is an ugly animation when going from 1.23 to 1.2 due to AnimatePresence\n    if (focus && decimalMode) {\n      // reuse getDecimalPart\n      const fullDecimalPart = getDecimalPart(valueWithFullDecimals, decimalSeparator);\n      // show only the characters that are not already displayed by the input\n      return fullDecimalPart?.slice(decimalPart?.length);\n    }\n\n    // in unfocused state, always show the full decimal part unless the user has already entered decimals\n    if (!focus && !decimalMode) {\n      const [_, decimalPlaceholder] = placeholder.split(decimalSeparator);\n      return decimalSeparator + decimalPlaceholder;\n    }\n\n    return null;\n  }, [\n    decimalMode,\n    decimalPart?.length,\n    decimalSeparator,\n    focus,\n    placeholder,\n    value,\n    valueWithFullDecimals,\n  ]);\n\n  const style = useInputStyle({\n    // whenever decimals are shown, we need to account for the full decimal part for the font size calculation\n    value: addonContent ? valueWithFullDecimals : value,\n    focus: visualFocus,\n    inputElement: ref,\n    loading,\n  });\n\n  return (\n    <div className=\"wds-amount-input-container\">\n      <div\n        className={clsx('wds-amount-input-input-container', 'np-text-display-large--forced')}\n        style={style}\n      >\n        <input\n          ref={ref}\n          className=\"wds-amount-input-input\"\n          id={id}\n          autoComplete=\"off\"\n          inputMode=\"decimal\"\n          value={value}\n          type=\"text\"\n          placeholder={placeholder}\n          aria-describedby={describedById}\n          /* without this, the input tries to keep an aspect ratio and doesn't respect CSS width rules */\n          size={1}\n          onChange={(e) => {\n            if (isAllowedInput(e)) {\n              handleChange(e.target.value);\n            }\n          }}\n          onBlurCapture={() => handleBlur()}\n          onPaste={(e) => handlePaste(e)}\n          onFocus={() => {\n            setFocus(true);\n          }}\n          onBlur={() => {\n            setTimeout(() => setVisualFocus(false), 30);\n          }}\n          onKeyDown={(e) => handleKeyDown(e)}\n        />\n        <AnimatePresence initial={false}>\n          {addonContent !== null && (\n            <AnimatedNumber\n              className={clsx(\n                'wds-amount-input-placeholder',\n                visualFocus && 'wds-amount-input-placeholder-focus',\n              )}\n              onClick={() => ref.current?.focus()}\n            >\n              {addonContent}\n            </AnimatedNumber>\n          )}\n        </AnimatePresence>\n      </div>\n    </div>\n  );\n};\n\nconst getPlaceholder = (currency: string, locale: string) => {\n  return formatAmount(0, currency, locale, { alwaysShowDecimals: true });\n};\n\nconst getDecimalPart = (value: string, decimalSeparator: string | null) => {\n  if (!value || !decimalSeparator) {\n    return undefined;\n  }\n\n  const [_, decimalPart] = value.split(decimalSeparator);\n  return decimalPart ?? undefined;\n};\n"],"names":["AmountInput","id","describedById","amount","currency","autoFocus","onChange","onFocusChange","loading","intl","useIntl","focus","setFocus","visualFocus","setVisualFocus","useFocus","value","setValue","useState","getFormattedString","locale","prevAmountRef","useRef","numericValue","useMemo","getUnformattedNumber","valueWithFullDecimals","alwaysShowDecimals","ref","useEffect","current","placeholder","getPlaceholder","groupSeparator","getGroupSeparator","decimalSeparator","getDecimalSeparator","maxDecimalCount","getDecimalCount","decimalPart","getDecimalPart","decimalMode","includes","shouldReformatAfterUserInput","newValue","reformatValue","endsWithDecimalSeparator","endsWith","endsWithGroupSeparator","containsDecimalSeparator","enteredDecimalsCount","getEnteredDecimalsCount","unformattedValue","formattedValue","handleChange","oldCursorPosition","selectionStart","newFormattedString","newNumber","newCursorPosition","length","requestAnimationFrame","setSelectionRange","handlePaste","e","preventDefault","clipboardData","getData","sanitisedValue","handleBlur","handleBackspace","input","target","currentValue","selectionEnd","charBeforeCursor","beforeCursor","slice","afterCursor","handleKeyDown","isAllowedInputKey","key","isAllowedInput","hasMultipleDecimalSeparators","split","newNumericValue","maxLength","Number","MAX_SAFE_INTEGER","toString","String","addonContent","isInputPossiblyOverflowing","fullDecimalPart","_","decimalPlaceholder","style","useInputStyle","inputElement","_jsx","className","children","_jsxs","clsx","autoComplete","inputMode","type","size","onBlurCapture","onPaste","onFocus","onBlur","setTimeout","onKeyDown","AnimatePresence","initial","AnimatedNumber","onClick","formatAmount","undefined"],"mappings":"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"}

package/build/expressiveMoneyInput/hooks/useInputStyle.js

@@ -9,8 +9,8 @@ const useInputStyle = ({
   loading
 }) => {
   const initialRender = !useTimeout(300);
-  const inputWidth = useFirstDefinedValue(inputElement?.clientWidth, [inputElement, value]);
-  const getStyle = () => {
+  const inputWidth = useFirstDefinedValue(inputElement?.current?.clientWidth, [inputElement?.current, value]);
+  const getStyle = React.useCallback(() => {
     const fontSize = getFontSize(value, focus, inputWidth);
     return {
       fontSize,
@@ -21,11 +21,12 @@ const useInputStyle = ({
       transition: initialRender ? 'none' : undefined,
       color: loading ? 'var(--color-interactive-secondary)' : undefined
     };
-  };
-  const [style, setStyle] = React.useState(getStyle());
+  }, [value, focus, inputWidth, loading, initialRender]);
+  const [style, setStyle] = React.useState(() => getStyle());
   React.useLayoutEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- Computing style based on layout measurements
     setStyle(getStyle());
-  }, [value, focus, loading, inputWidth]);
+  }, [value, focus, loading, inputWidth, getStyle]);
   return style;
 };
 function getFontSize(inputValue, isFocused, inputWidth) {
@@ -48,10 +49,11 @@ const useFirstDefinedValue = (newValue, dependencies) => {
   const [value, setValue] = React.useState(newValue);
   React.useLayoutEffect(() => {
     if (typeof newValue !== 'undefined' && typeof value === 'undefined') {
+      // eslint-disable-next-line react-hooks/set-state-in-effect -- Lazy initialization from prop
       setValue(newValue);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [...dependencies, value]);
+  }, [...dependencies, value, newValue]);
   return value;
 };
 const useTimeout = delay => {

package/build/expressiveMoneyInput/hooks/useInputStyle.js.map

@@ -1 +1 @@
-{"version":3,"file":"useInputStyle.js","sources":["../../../src/expressiveMoneyInput/hooks/useInputStyle.ts"],"sourcesContent":["import { type CSSProperties, useEffect, useLayoutEffect, useState } from 'react';\nimport { Props as ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';\n\ntype InputStyleObject = {\n  value: string;\n  focus: boolean;\n  inputElement: HTMLInputElement | null;\n} & Pick<ExpressiveMoneyInputProps, 'loading'>;\n\nexport const useInputStyle = ({ value, focus, inputElement, loading }: InputStyleObject) => {\n  const initialRender = !useTimeout(300);\n  const inputWidth = useFirstDefinedValue(inputElement?.clientWidth, [inputElement, value]);\n\n  const getStyle = (): CSSProperties => {\n    const fontSize = getFontSize(value, focus, inputWidth);\n\n    return {\n      fontSize,\n      height: fontSize,\n      // aligns the top of the digit with the currency button\n      marginTop: fontSize * -0.19,\n      // if the input loads with a pre-filled value, we don't want to animate the font-size immediately\n      transition: initialRender ? 'none' : undefined,\n      color: loading ? 'var(--color-interactive-secondary)' : undefined,\n    };\n  };\n\n  const [style, setStyle] = useState(getStyle());\n\n  useLayoutEffect(() => {\n    setStyle(getStyle());\n  }, [value, focus, loading, inputWidth]);\n\n  return style;\n};\n\nfunction getFontSize(inputValue: string, isFocused: boolean, inputWidth: number | undefined) {\n  const defaultFontSize = 52;\n  const focusFontSize = 90;\n  const minimumFontSize = 34;\n\n  let fontSize = isFocused ? focusFontSize : defaultFontSize;\n\n  if (typeof inputWidth === 'undefined') {\n    return fontSize;\n  }\n  const textLength = inputValue.length;\n  const maxCharactersWithoutShrinking = Math.floor(inputWidth / 40);\n\n  if (textLength > maxCharactersWithoutShrinking) {\n    const adjustedSize = Math.round((inputWidth / textLength) * 1.9);\n    fontSize = Math.min(fontSize, adjustedSize);\n  }\n\n  return Math.max(fontSize, minimumFontSize);\n}\n\nconst useFirstDefinedValue = (newValue: number | undefined, dependencies: unknown[]) => {\n  const [value, setValue] = useState<number | undefined>(newValue);\n\n  useLayoutEffect(() => {\n    if (typeof newValue !== 'undefined' && typeof value === 'undefined') {\n      setValue(newValue);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [...dependencies, value]);\n\n  return value;\n};\n\nconst useTimeout = (delay: number) => {\n  const [ready, setReady] = useState(false);\n\n  useEffect(() => {\n    const timeout = setTimeout(() => {\n      setReady(true);\n    }, delay);\n\n    return () => {\n      clearTimeout(timeout);\n    };\n  }, [delay]);\n\n  return ready;\n};\n"],"names":["useInputStyle","value","focus","inputElement","loading","initialRender","useTimeout","inputWidth","useFirstDefinedValue","clientWidth","getStyle","fontSize","getFontSize","height","marginTop","transition","undefined","color","style","setStyle","useState","useLayoutEffect","inputValue","isFocused","defaultFontSize","focusFontSize","minimumFontSize","textLength","length","maxCharactersWithoutShrinking","Math","floor","adjustedSize","round","min","max","newValue","dependencies","setValue","delay","ready","setReady","useEffect","timeout","setTimeout","clearTimeout"],"mappings":"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"}
+{"version":3,"file":"useInputStyle.js","sources":["../../../src/expressiveMoneyInput/hooks/useInputStyle.ts"],"sourcesContent":["import {\n  type CSSProperties,\n  type RefObject,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useState,\n} from 'react';\nimport { Props as ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';\n\ntype InputStyleObject = {\n  value: string;\n  focus: boolean;\n  inputElement: RefObject<HTMLInputElement> | null;\n} & Pick<ExpressiveMoneyInputProps, 'loading'>;\n\nexport const useInputStyle = ({ value, focus, inputElement, loading }: InputStyleObject) => {\n  const initialRender = !useTimeout(300);\n  const inputWidth = useFirstDefinedValue(inputElement?.current?.clientWidth, [\n    inputElement?.current,\n    value,\n  ]);\n\n  const getStyle = useCallback((): CSSProperties => {\n    const fontSize = getFontSize(value, focus, inputWidth);\n\n    return {\n      fontSize,\n      height: fontSize,\n      // aligns the top of the digit with the currency button\n      marginTop: fontSize * -0.19,\n      // if the input loads with a pre-filled value, we don't want to animate the font-size immediately\n      transition: initialRender ? 'none' : undefined,\n      color: loading ? 'var(--color-interactive-secondary)' : undefined,\n    };\n  }, [value, focus, inputWidth, loading, initialRender]);\n\n  const [style, setStyle] = useState<CSSProperties>(() => getStyle());\n\n  useLayoutEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- Computing style based on layout measurements\n    setStyle(getStyle());\n  }, [value, focus, loading, inputWidth, getStyle]);\n\n  return style;\n};\n\nfunction getFontSize(inputValue: string, isFocused: boolean, inputWidth: number | undefined) {\n  const defaultFontSize = 52;\n  const focusFontSize = 90;\n  const minimumFontSize = 34;\n\n  let fontSize = isFocused ? focusFontSize : defaultFontSize;\n\n  if (typeof inputWidth === 'undefined') {\n    return fontSize;\n  }\n  const textLength = inputValue.length;\n  const maxCharactersWithoutShrinking = Math.floor(inputWidth / 40);\n\n  if (textLength > maxCharactersWithoutShrinking) {\n    const adjustedSize = Math.round((inputWidth / textLength) * 1.9);\n    fontSize = Math.min(fontSize, adjustedSize);\n  }\n\n  return Math.max(fontSize, minimumFontSize);\n}\n\nconst useFirstDefinedValue = (newValue: number | undefined, dependencies: unknown[]) => {\n  const [value, setValue] = useState<number | undefined>(newValue);\n\n  useLayoutEffect(() => {\n    if (typeof newValue !== 'undefined' && typeof value === 'undefined') {\n      // eslint-disable-next-line react-hooks/set-state-in-effect -- Lazy initialization from prop\n      setValue(newValue);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [...dependencies, value, newValue]);\n\n  return value;\n};\n\nconst useTimeout = (delay: number) => {\n  const [ready, setReady] = useState(false);\n\n  useEffect(() => {\n    const timeout = setTimeout(() => {\n      setReady(true);\n    }, delay);\n\n    return () => {\n      clearTimeout(timeout);\n    };\n  }, [delay]);\n\n  return ready;\n};\n"],"names":["useInputStyle","value","focus","inputElement","loading","initialRender","useTimeout","inputWidth","useFirstDefinedValue","current","clientWidth","getStyle","useCallback","fontSize","getFontSize","height","marginTop","transition","undefined","color","style","setStyle","useState","useLayoutEffect","inputValue","isFocused","defaultFontSize","focusFontSize","minimumFontSize","textLength","length","maxCharactersWithoutShrinking","Math","floor","adjustedSize","round","min","max","newValue","dependencies","setValue","delay","ready","setReady","useEffect","timeout","setTimeout","clearTimeout"],"mappings":"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"}

package/build/expressiveMoneyInput/hooks/useInputStyle.mjs

@@ -1,4 +1,4 @@
-import { useState, useLayoutEffect, useEffect } from 'react';
+import { useCallback, useState, useLayoutEffect, useEffect } from 'react';
 
 const useInputStyle = ({
   value,
@@ -7,8 +7,8 @@ const useInputStyle = ({
   loading
 }) => {
   const initialRender = !useTimeout(300);
-  const inputWidth = useFirstDefinedValue(inputElement?.clientWidth, [inputElement, value]);
-  const getStyle = () => {
+  const inputWidth = useFirstDefinedValue(inputElement?.current?.clientWidth, [inputElement?.current, value]);
+  const getStyle = useCallback(() => {
     const fontSize = getFontSize(value, focus, inputWidth);
     return {
       fontSize,
@@ -19,11 +19,12 @@ const useInputStyle = ({
       transition: initialRender ? 'none' : undefined,
       color: loading ? 'var(--color-interactive-secondary)' : undefined
     };
-  };
-  const [style, setStyle] = useState(getStyle());
+  }, [value, focus, inputWidth, loading, initialRender]);
+  const [style, setStyle] = useState(() => getStyle());
   useLayoutEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- Computing style based on layout measurements
     setStyle(getStyle());
-  }, [value, focus, loading, inputWidth]);
+  }, [value, focus, loading, inputWidth, getStyle]);
   return style;
 };
 function getFontSize(inputValue, isFocused, inputWidth) {
@@ -46,10 +47,11 @@ const useFirstDefinedValue = (newValue, dependencies) => {
   const [value, setValue] = useState(newValue);
   useLayoutEffect(() => {
     if (typeof newValue !== 'undefined' && typeof value === 'undefined') {
+      // eslint-disable-next-line react-hooks/set-state-in-effect -- Lazy initialization from prop
       setValue(newValue);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [...dependencies, value]);
+  }, [...dependencies, value, newValue]);
   return value;
 };
 const useTimeout = delay => {

package/build/expressiveMoneyInput/hooks/useInputStyle.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useInputStyle.mjs","sources":["../../../src/expressiveMoneyInput/hooks/useInputStyle.ts"],"sourcesContent":["import { type CSSProperties, useEffect, useLayoutEffect, useState } from 'react';\nimport { Props as ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';\n\ntype InputStyleObject = {\n  value: string;\n  focus: boolean;\n  inputElement: HTMLInputElement | null;\n} & Pick<ExpressiveMoneyInputProps, 'loading'>;\n\nexport const useInputStyle = ({ value, focus, inputElement, loading }: InputStyleObject) => {\n  const initialRender = !useTimeout(300);\n  const inputWidth = useFirstDefinedValue(inputElement?.clientWidth, [inputElement, value]);\n\n  const getStyle = (): CSSProperties => {\n    const fontSize = getFontSize(value, focus, inputWidth);\n\n    return {\n      fontSize,\n      height: fontSize,\n      // aligns the top of the digit with the currency button\n      marginTop: fontSize * -0.19,\n      // if the input loads with a pre-filled value, we don't want to animate the font-size immediately\n      transition: initialRender ? 'none' : undefined,\n      color: loading ? 'var(--color-interactive-secondary)' : undefined,\n    };\n  };\n\n  const [style, setStyle] = useState(getStyle());\n\n  useLayoutEffect(() => {\n    setStyle(getStyle());\n  }, [value, focus, loading, inputWidth]);\n\n  return style;\n};\n\nfunction getFontSize(inputValue: string, isFocused: boolean, inputWidth: number | undefined) {\n  const defaultFontSize = 52;\n  const focusFontSize = 90;\n  const minimumFontSize = 34;\n\n  let fontSize = isFocused ? focusFontSize : defaultFontSize;\n\n  if (typeof inputWidth === 'undefined') {\n    return fontSize;\n  }\n  const textLength = inputValue.length;\n  const maxCharactersWithoutShrinking = Math.floor(inputWidth / 40);\n\n  if (textLength > maxCharactersWithoutShrinking) {\n    const adjustedSize = Math.round((inputWidth / textLength) * 1.9);\n    fontSize = Math.min(fontSize, adjustedSize);\n  }\n\n  return Math.max(fontSize, minimumFontSize);\n}\n\nconst useFirstDefinedValue = (newValue: number | undefined, dependencies: unknown[]) => {\n  const [value, setValue] = useState<number | undefined>(newValue);\n\n  useLayoutEffect(() => {\n    if (typeof newValue !== 'undefined' && typeof value === 'undefined') {\n      setValue(newValue);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [...dependencies, value]);\n\n  return value;\n};\n\nconst useTimeout = (delay: number) => {\n  const [ready, setReady] = useState(false);\n\n  useEffect(() => {\n    const timeout = setTimeout(() => {\n      setReady(true);\n    }, delay);\n\n    return () => {\n      clearTimeout(timeout);\n    };\n  }, [delay]);\n\n  return ready;\n};\n"],"names":["useInputStyle","value","focus","inputElement","loading","initialRender","useTimeout","inputWidth","useFirstDefinedValue","clientWidth","getStyle","fontSize","getFontSize","height","marginTop","transition","undefined","color","style","setStyle","useState","useLayoutEffect","inputValue","isFocused","defaultFontSize","focusFontSize","minimumFontSize","textLength","length","maxCharactersWithoutShrinking","Math","floor","adjustedSize","round","min","max","newValue","dependencies","setValue","delay","ready","setReady","useEffect","timeout","setTimeout","clearTimeout"],"mappings":"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"}
+{"version":3,"file":"useInputStyle.mjs","sources":["../../../src/expressiveMoneyInput/hooks/useInputStyle.ts"],"sourcesContent":["import {\n  type CSSProperties,\n  type RefObject,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useState,\n} from 'react';\nimport { Props as ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';\n\ntype InputStyleObject = {\n  value: string;\n  focus: boolean;\n  inputElement: RefObject<HTMLInputElement> | null;\n} & Pick<ExpressiveMoneyInputProps, 'loading'>;\n\nexport const useInputStyle = ({ value, focus, inputElement, loading }: InputStyleObject) => {\n  const initialRender = !useTimeout(300);\n  const inputWidth = useFirstDefinedValue(inputElement?.current?.clientWidth, [\n    inputElement?.current,\n    value,\n  ]);\n\n  const getStyle = useCallback((): CSSProperties => {\n    const fontSize = getFontSize(value, focus, inputWidth);\n\n    return {\n      fontSize,\n      height: fontSize,\n      // aligns the top of the digit with the currency button\n      marginTop: fontSize * -0.19,\n      // if the input loads with a pre-filled value, we don't want to animate the font-size immediately\n      transition: initialRender ? 'none' : undefined,\n      color: loading ? 'var(--color-interactive-secondary)' : undefined,\n    };\n  }, [value, focus, inputWidth, loading, initialRender]);\n\n  const [style, setStyle] = useState<CSSProperties>(() => getStyle());\n\n  useLayoutEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- Computing style based on layout measurements\n    setStyle(getStyle());\n  }, [value, focus, loading, inputWidth, getStyle]);\n\n  return style;\n};\n\nfunction getFontSize(inputValue: string, isFocused: boolean, inputWidth: number | undefined) {\n  const defaultFontSize = 52;\n  const focusFontSize = 90;\n  const minimumFontSize = 34;\n\n  let fontSize = isFocused ? focusFontSize : defaultFontSize;\n\n  if (typeof inputWidth === 'undefined') {\n    return fontSize;\n  }\n  const textLength = inputValue.length;\n  const maxCharactersWithoutShrinking = Math.floor(inputWidth / 40);\n\n  if (textLength > maxCharactersWithoutShrinking) {\n    const adjustedSize = Math.round((inputWidth / textLength) * 1.9);\n    fontSize = Math.min(fontSize, adjustedSize);\n  }\n\n  return Math.max(fontSize, minimumFontSize);\n}\n\nconst useFirstDefinedValue = (newValue: number | undefined, dependencies: unknown[]) => {\n  const [value, setValue] = useState<number | undefined>(newValue);\n\n  useLayoutEffect(() => {\n    if (typeof newValue !== 'undefined' && typeof value === 'undefined') {\n      // eslint-disable-next-line react-hooks/set-state-in-effect -- Lazy initialization from prop\n      setValue(newValue);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [...dependencies, value, newValue]);\n\n  return value;\n};\n\nconst useTimeout = (delay: number) => {\n  const [ready, setReady] = useState(false);\n\n  useEffect(() => {\n    const timeout = setTimeout(() => {\n      setReady(true);\n    }, delay);\n\n    return () => {\n      clearTimeout(timeout);\n    };\n  }, [delay]);\n\n  return ready;\n};\n"],"names":["useInputStyle","value","focus","inputElement","loading","initialRender","useTimeout","inputWidth","useFirstDefinedValue","current","clientWidth","getStyle","useCallback","fontSize","getFontSize","height","marginTop","transition","undefined","color","style","setStyle","useState","useLayoutEffect","inputValue","isFocused","defaultFontSize","focusFontSize","minimumFontSize","textLength","length","maxCharactersWithoutShrinking","Math","floor","adjustedSize","round","min","max","newValue","dependencies","setValue","delay","ready","setReady","useEffect","timeout","setTimeout","clearTimeout"],"mappings":"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"}

package/build/field/Field.js

@@ -2,6 +2,8 @@
 
 var clsx = require('clsx');
 var React = require('react');
+var reactIntl = require('react-intl');
+var Body = require('../body/Body.js');
 require('../common/theme.js');
 require('../common/direction.js');
 require('../common/propsValues/control.js');
@@ -23,11 +25,10 @@ require('../common/propsValues/markdownNodeType.js');
 require('../common/fileType.js');
 require('@transferwise/formatting');
 require('@transferwise/icons');
-require('react-intl');
 require('../common/closeButton/CloseButton.messages.js');
 var jsxRuntime = require('react/jsx-runtime');
+var Field_messages = require('./Field.messages.js');
 var InlinePrompt = require('../prompt/InlinePrompt/InlinePrompt.js');
-require('../body/Body.js');
 require('../button/Button.resolver.js');
 require('../prompt/PrimitivePrompt/PrimitivePrompt.js');
 require('../badge/Badge.js');
@@ -56,6 +57,9 @@ const Field = ({
   children,
   ...props
 }) => {
+  const {
+    formatMessage
+  } = reactIntl.useIntl();
   const labelRef = React.useRef(null);
   const sentiment$1 = props.error ? sentiment.Sentiment.NEGATIVE : propType;
   const message = propMessage || props.error;
@@ -65,6 +69,10 @@ const Field = ({
   const inputId = id !== null ? id ?? fallbackInputId : undefined;
   const messageId = React.useId();
   const descriptionId = React.useId();
+  const textareaCharCounterId = React.useId();
+  const [textareaCharacterCount, setTextareaCharacterCount] = React.useState(null);
+  const handleTextareaCharacterCount = React.useCallback(state => setTextareaCharacterCount(state), []);
+  const isNearCharLimit = textareaCharacterCount != null && textareaCharacterCount.current >= textareaCharacterCount.max * 0.8;
   /**
    * form control can have multiple messages to describe it,
    * e.g the description underneath the label and inline alert
@@ -77,6 +85,9 @@ const Field = ({
     if (message) {
       messageIds.push(messageId);
     }
+    if (textareaCharacterCount) {
+      messageIds.push(textareaCharCounterId);
+    }
     return messageIds.length > 0 ? messageIds.join(' ') : undefined;
   }
   return /*#__PURE__*/jsxRuntime.jsx(contexts.FieldLabelContextProvider, {
@@ -90,37 +101,57 @@ const Field = ({
         value: ariaDescribedbyByIds(),
         children: /*#__PURE__*/jsxRuntime.jsx(contexts.InputInvalidProvider, {
           value: hasError,
-          children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: clsx.clsx('np-field form-group d-block', {
-              'has-success': sentiment$1 === sentiment.Sentiment.POSITIVE,
-              'has-warning': sentiment$1 === sentiment.Sentiment.WARNING,
-              'has-error': hasError,
-              'has-info': sentiment$1 === sentiment.Sentiment.NEUTRAL
-            }, className),
-            children: [label != null ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-              children: [/*#__PURE__*/jsxRuntime.jsx(Label.Label, {
-                ref: labelRef,
-                id: labelId,
-                htmlFor: inputId,
-                children: required ? label : /*#__PURE__*/jsxRuntime.jsx(Label.Label.Optional, {
-                  children: label
-                })
-              }), /*#__PURE__*/jsxRuntime.jsx(Label.Label.Description, {
-                id: descriptionId,
-                children: description
-              }), /*#__PURE__*/jsxRuntime.jsx("div", {
-                className: "np-field-control",
-                children: children
+          children: /*#__PURE__*/jsxRuntime.jsx(contexts.TextareaCharacterCountProvider, {
+            value: handleTextareaCharacterCount,
+            children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+              className: clsx.clsx('np-field form-group d-block', {
+                'has-success': sentiment$1 === sentiment.Sentiment.POSITIVE,
+                'has-warning': sentiment$1 === sentiment.Sentiment.WARNING,
+                'has-error': hasError,
+                'has-info': sentiment$1 === sentiment.Sentiment.NEUTRAL
+              }, className),
+              children: [label != null ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                children: [/*#__PURE__*/jsxRuntime.jsx(Label.Label, {
+                  ref: labelRef,
+                  id: labelId,
+                  htmlFor: inputId,
+                  children: required ? label : /*#__PURE__*/jsxRuntime.jsx(Label.Label.Optional, {
+                    children: label
+                  })
+                }), /*#__PURE__*/jsxRuntime.jsx(Label.Label.Description, {
+                  id: descriptionId,
+                  children: description
+                }), /*#__PURE__*/jsxRuntime.jsx("div", {
+                  className: "np-field-control",
+                  children: children
+                })]
+              }) : children, (message || textareaCharacterCount) && /*#__PURE__*/jsxRuntime.jsxs("div", {
+                className: "np-field-validation",
+                children: [message && /*#__PURE__*/jsxRuntime.jsx(InlinePrompt.InlinePrompt, {
+                  sentiment: sentiment$1,
+                  id: messageId,
+                  mediaLabel: messageIconLabel,
+                  className: "np-field__prompt",
+                  loading: messageLoading,
+                  width: "full",
+                  children: message
+                }), textareaCharacterCount && /*#__PURE__*/jsxRuntime.jsxs(Body.default, {
+                  as: "span",
+                  id: textareaCharCounterId,
+                  ...(isNearCharLimit ? {
+                    role: 'status',
+                    'aria-live': 'polite',
+                    'aria-atomic': 'true'
+                  } : {}),
+                  "aria-label": formatMessage(Field_messages.default.characterCount, {
+                    current: textareaCharacterCount.current,
+                    max: textareaCharacterCount.max
+                  }),
+                  className: "np-field-textarea-char-counter",
+                  children: [textareaCharacterCount.current, "/", textareaCharacterCount.max]
+                })]
               })]
-            }) : children, message && /*#__PURE__*/jsxRuntime.jsx(InlinePrompt.InlinePrompt, {
-              sentiment: sentiment$1,
-              id: messageId,
-              mediaLabel: messageIconLabel,
-              className: "np-field__prompt",
-              loading: messageLoading,
-              width: "full",
-              children: message
-            })]
+            })
           })
         })
       })

package/build/field/Field.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.js","sources":["../../src/field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useRef } from 'react';\n\nimport { Sentiment } from '../common';\nimport { InlinePrompt, type InlinePromptProps } from '../prompt';\nimport {\n  FieldLabelContextProvider,\n  InputDescribedByProvider,\n  InputIdContextProvider,\n  InputInvalidProvider,\n} from '../inputs/contexts';\nimport { Label } from '../label';\n\nexport type FieldProps = {\n  /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */\n  id?: string | null;\n  /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */\n  label?: React.ReactNode;\n  /** @default true */\n  required?: boolean;\n  /** @deprecated Use `description` prop instead. */\n  hint?: React.ReactNode;\n  message?: React.ReactNode;\n  /**\n   * Override for the [InlinePrompt icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n   * announced by the screen readers\n   * */\n  messageIconLabel?: string;\n  /**\n   * If true, shows a loading spinner in place of the message icon of the InlinePrompt\n   * @default false\n   */\n  messageLoading?: boolean;\n  description?: React.ReactNode;\n  /** @deprecated Use `message` and `type={Sentiment.NEGATIVE}` prop instead. */\n  error?: React.ReactNode;\n  /** @default Sentiment.NEUTRAL */\n  sentiment?: InlinePromptProps['sentiment'];\n  className?: string;\n  children?: React.ReactNode;\n};\n\nexport const Field = ({\n  id,\n  label,\n  required = true,\n  message: propMessage,\n  messageIconLabel,\n  messageLoading,\n  hint,\n  description = hint,\n  sentiment: propType = Sentiment.NEUTRAL,\n  className,\n  children,\n  ...props\n}: FieldProps) => {\n  const labelRef = useRef<HTMLLabelElement>(null);\n  const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n  const message = propMessage || props.error;\n  const hasError = sentiment === Sentiment.NEGATIVE;\n\n  const labelId = useId();\n\n  const fallbackInputId = useId();\n  const inputId = id !== null ? (id ?? fallbackInputId) : undefined;\n\n  const messageId = useId();\n  const descriptionId = useId();\n\n  /**\n   * form control can have multiple messages to describe it,\n   * e.g the description underneath the label and inline alert\n   */\n  function ariaDescribedbyByIds() {\n    const messageIds = [];\n    if (description) {\n      messageIds.push(descriptionId);\n    }\n    if (message) {\n      messageIds.push(messageId);\n    }\n    return messageIds.length > 0 ? messageIds.join(' ') : undefined;\n  }\n\n  return (\n    <FieldLabelContextProvider value={{ id: labelId, ref: labelRef }}>\n      <InputIdContextProvider value={inputId}>\n        <InputDescribedByProvider value={ariaDescribedbyByIds()}>\n          <InputInvalidProvider value={hasError}>\n            <div\n              className={clsx(\n                'np-field form-group d-block',\n                {\n                  'has-success': sentiment === Sentiment.POSITIVE,\n                  'has-warning': sentiment === Sentiment.WARNING,\n                  'has-error': hasError,\n                  'has-info': sentiment === Sentiment.NEUTRAL,\n                },\n                className,\n              )}\n            >\n              {label != null ? (\n                <>\n                  <Label ref={labelRef} id={labelId} htmlFor={inputId}>\n                    {required ? label : <Label.Optional>{label}</Label.Optional>}\n                  </Label>\n                  <Label.Description id={descriptionId}>{description}</Label.Description>\n                  <div className=\"np-field-control\">{children}</div>\n                </>\n              ) : (\n                children\n              )}\n\n              {message && (\n                <InlinePrompt\n                  sentiment={sentiment}\n                  id={messageId}\n                  mediaLabel={messageIconLabel}\n                  className=\"np-field__prompt\"\n                  loading={messageLoading}\n                  width=\"full\"\n                >\n                  {message}\n                </InlinePrompt>\n              )}\n            </div>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelContextProvider>\n  );\n};\n"],"names":["Field","id","label","required","message","propMessage","messageIconLabel","messageLoading","hint","description","sentiment","propType","Sentiment","NEUTRAL","className","children","props","labelRef","useRef","error","NEGATIVE","hasError","labelId","useId","fallbackInputId","inputId","undefined","messageId","descriptionId","ariaDescribedbyByIds","messageIds","push","length","join","_jsx","FieldLabelContextProvider","value","ref","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","_jsxs","clsx","POSITIVE","WARNING","_Fragment","Label","htmlFor","Optional","Description","InlinePrompt","mediaLabel","loading","width"],"mappings":"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"}
+{"version":3,"file":"Field.js","sources":["../../src/field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useCallback, useId, useRef, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../body';\nimport { Sentiment } from '../common';\nimport messages from './Field.messages';\nimport { InlinePrompt, type InlinePromptProps } from '../prompt';\nimport {\n  TextareaCharacterCountProvider,\n  type TextareaCharacterCountState,\n  FieldLabelContextProvider,\n  InputDescribedByProvider,\n  InputIdContextProvider,\n  InputInvalidProvider,\n} from '../inputs/contexts';\nimport { Label } from '../label';\n\nexport type FieldProps = {\n  /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */\n  id?: string | null;\n  /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */\n  label?: React.ReactNode;\n  /** @default true */\n  required?: boolean;\n  /** @deprecated Use `description` prop instead. */\n  hint?: React.ReactNode;\n  message?: React.ReactNode;\n  /**\n   * Override for the [InlinePrompt icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n   * announced by the screen readers\n   * */\n  messageIconLabel?: string;\n  /**\n   * If true, shows a loading spinner in place of the message icon of the InlinePrompt\n   * @default false\n   */\n  messageLoading?: boolean;\n  description?: React.ReactNode;\n  /** @deprecated Use `message` and `type={Sentiment.NEGATIVE}` prop instead. */\n  error?: React.ReactNode;\n  /** @default Sentiment.NEUTRAL */\n  sentiment?: InlinePromptProps['sentiment'];\n  className?: string;\n  children?: React.ReactNode;\n};\n\nexport const Field = ({\n  id,\n  label,\n  required = true,\n  message: propMessage,\n  messageIconLabel,\n  messageLoading,\n  hint,\n  description = hint,\n  sentiment: propType = Sentiment.NEUTRAL,\n  className,\n  children,\n  ...props\n}: FieldProps) => {\n  const { formatMessage } = useIntl();\n  const labelRef = useRef<HTMLLabelElement>(null);\n  const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n  const message = propMessage || props.error;\n  const hasError = sentiment === Sentiment.NEGATIVE;\n\n  const labelId = useId();\n\n  const fallbackInputId = useId();\n  const inputId = id !== null ? (id ?? fallbackInputId) : undefined;\n\n  const messageId = useId();\n  const descriptionId = useId();\n  const textareaCharCounterId = useId();\n\n  const [textareaCharacterCount, setTextareaCharacterCount] =\n    useState<TextareaCharacterCountState>(null);\n  const handleTextareaCharacterCount = useCallback(\n    (state: TextareaCharacterCountState) => setTextareaCharacterCount(state),\n    [],\n  );\n\n  const isNearCharLimit =\n    textareaCharacterCount != null &&\n    textareaCharacterCount.current >= textareaCharacterCount.max * 0.8;\n\n  /**\n   * form control can have multiple messages to describe it,\n   * e.g the description underneath the label and inline alert\n   */\n  function ariaDescribedbyByIds() {\n    const messageIds = [];\n    if (description) {\n      messageIds.push(descriptionId);\n    }\n    if (message) {\n      messageIds.push(messageId);\n    }\n    if (textareaCharacterCount) {\n      messageIds.push(textareaCharCounterId);\n    }\n    return messageIds.length > 0 ? messageIds.join(' ') : undefined;\n  }\n\n  return (\n    <FieldLabelContextProvider value={{ id: labelId, ref: labelRef }}>\n      <InputIdContextProvider value={inputId}>\n        <InputDescribedByProvider value={ariaDescribedbyByIds()}>\n          <InputInvalidProvider value={hasError}>\n            <TextareaCharacterCountProvider value={handleTextareaCharacterCount}>\n              <div\n                className={clsx(\n                  'np-field form-group d-block',\n                  {\n                    'has-success': sentiment === Sentiment.POSITIVE,\n                    'has-warning': sentiment === Sentiment.WARNING,\n                    'has-error': hasError,\n                    'has-info': sentiment === Sentiment.NEUTRAL,\n                  },\n                  className,\n                )}\n              >\n                {label != null ? (\n                  <>\n                    <Label ref={labelRef} id={labelId} htmlFor={inputId}>\n                      {required ? label : <Label.Optional>{label}</Label.Optional>}\n                    </Label>\n                    <Label.Description id={descriptionId}>{description}</Label.Description>\n                    <div className=\"np-field-control\">{children}</div>\n                  </>\n                ) : (\n                  children\n                )}\n\n                {(message || textareaCharacterCount) && (\n                  <div className=\"np-field-validation\">\n                    {message && (\n                      <InlinePrompt\n                        sentiment={sentiment}\n                        id={messageId}\n                        mediaLabel={messageIconLabel}\n                        className=\"np-field__prompt\"\n                        loading={messageLoading}\n                        width=\"full\"\n                      >\n                        {message}\n                      </InlinePrompt>\n                    )}\n                    {textareaCharacterCount && (\n                      <Body\n                        as=\"span\"\n                        id={textareaCharCounterId}\n                        {...(isNearCharLimit\n                          ? {\n                              role: 'status' as const,\n                              'aria-live': 'polite' as const,\n                              'aria-atomic': 'true' as const,\n                            }\n                          : {})}\n                        aria-label={formatMessage(messages.characterCount, {\n                          current: textareaCharacterCount.current,\n                          max: textareaCharacterCount.max,\n                        })}\n                        className=\"np-field-textarea-char-counter\"\n                      >\n                        {textareaCharacterCount.current}/{textareaCharacterCount.max}\n                      </Body>\n                    )}\n                  </div>\n                )}\n              </div>\n            </TextareaCharacterCountProvider>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelContextProvider>\n  );\n};\n"],"names":["Field","id","label","required","message","propMessage","messageIconLabel","messageLoading","hint","description","sentiment","propType","Sentiment","NEUTRAL","className","children","props","formatMessage","useIntl","labelRef","useRef","error","NEGATIVE","hasError","labelId","useId","fallbackInputId","inputId","undefined","messageId","descriptionId","textareaCharCounterId","textareaCharacterCount","setTextareaCharacterCount","useState","handleTextareaCharacterCount","useCallback","state","isNearCharLimit","current","max","ariaDescribedbyByIds","messageIds","push","length","join","_jsx","FieldLabelContextProvider","value","ref","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","TextareaCharacterCountProvider","_jsxs","clsx","POSITIVE","WARNING","_Fragment","Label","htmlFor","Optional","Description","InlinePrompt","mediaLabel","loading","width","Body","as","role","messages","characterCount"],"mappings":"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"}

package/build/field/Field.messages.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactIntl = require('react-intl');
+
+var messages = reactIntl.defineMessages({
+  characterCount: {
+    id: "neptune.Field.characterCount"
+  }
+});
+
+exports.default = messages;
+//# sourceMappingURL=Field.messages.js.map

package/build/field/Field.messages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.messages.js","sources":["../../src/field/Field.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  characterCount: {\n    id: 'neptune.Field.characterCount',\n    defaultMessage: '{current} of {max} characters used',\n  },\n});\n"],"names":["defineMessages","characterCount","id"],"mappings":";;;;;;AAEA,eAAeA,wBAAc,CAAC;AAC5BC,EAAAA,cAAc,EAAE;IACdC,EAAE,EAAA;AAEH;AACF,CAAA,CAAC;;;;"}

package/build/field/Field.messages.mjs

@@ -0,0 +1,10 @@
+import { defineMessages } from 'react-intl';
+
+var messages = defineMessages({
+  characterCount: {
+    id: "neptune.Field.characterCount"
+  }
+});
+
+export { messages as default };
+//# sourceMappingURL=Field.messages.mjs.map

package/build/field/Field.messages.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.messages.mjs","sources":["../../src/field/Field.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  characterCount: {\n    id: 'neptune.Field.characterCount',\n    defaultMessage: '{current} of {max} characters used',\n  },\n});\n"],"names":["defineMessages","characterCount","id"],"mappings":";;AAEA,eAAeA,cAAc,CAAC;AAC5BC,EAAAA,cAAc,EAAE;IACdC,EAAE,EAAA;AAEH;AACF,CAAA,CAAC;;;;"}