@procore/core-react 11.20.0-vite.1 → 11.21.0

package/dist/Notation/Notation.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { SpanAttributes } from '../_utils/types';
+import { NotationProps } from './Notation.types';
+/**
+ * @deprecated Please use `<Typography italic />` component for plain text
+ * notations or the `<Required />` component for required notations. `Notation`
+ * will be removed in a future version.
+ *
+ *  @see [Storybook](https://procore.github.io/core/core-react/latest/?path=/story/coverage-notation--basic-props)
+ */
+export declare const Notation: React.ForwardRefExoticComponent<SpanAttributes & NotationProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/Notation/Notation.js

@@ -0,0 +1,63 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from 'styled-components';
+import { getTypographyIntent } from '../Typography/Typography.styles';
+import { useDeprecation } from '../_hooks/Deprecation';
+import { colors } from '../_styles/colors';
+var variantColorMap = {
+    required: 'orange50',
+    error: 'red50',
+    pagination: 'gray45',
+};
+var StyledNotation = styled.i(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  color: ", ";\n  font-style: italic;\n"], ["\n  ", "\n  color: ", ";\n  font-style: italic;\n"
+    /**
+     * @deprecated Please use `<Typography italic />` component for plain text
+     * notations or the `<Required />` component for required notations. `Notation`
+     * will be removed in a future version.
+     *
+     *  @see [Storybook](https://procore.github.io/core/core-react/latest/?path=/story/coverage-notation--basic-props)
+     */
+])), getTypographyIntent('small'), function (_a) {
+    var variant = _a.variant;
+    return variant ? colors[variantColorMap[variant]] : colors.gray15;
+});
+/**
+ * @deprecated Please use `<Typography italic />` component for plain text
+ * notations or the `<Required />` component for required notations. `Notation`
+ * will be removed in a future version.
+ *
+ *  @see [Storybook](https://procore.github.io/core/core-react/latest/?path=/story/coverage-notation--basic-props)
+ */
+export var Notation = React.forwardRef(function Notation(_a, ref) {
+    var children = _a.children, _b = _a.variant, variant = _b === void 0 ? '' : _b, props = __rest(_a, ["children", "variant"]);
+    useDeprecation({ oldThing: 'Notation', newThing: 'Typography or Required' });
+    return (React.createElement(StyledNotation, __assign({}, props, { variant: variant, ref: ref }), children));
+});
+Notation.displayName = 'Notation';
+var templateObject_1;
+//# sourceMappingURL=Notation.js.map

package/dist/Notation/Notation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Notation.js","sourceRoot":"","sources":["../../src/Notation/Notation.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAA;AACrE,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAI1C,IAAM,eAAe,GAAG;IACtB,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,OAAO;IACd,UAAU,EAAE,QAAQ;CACZ,CAAA;AAEV,IAAM,cAAc,GAAG,MAAM,CAAC,CAAC,sHAAe,MAC1C,EAA4B,aACrB,EACmD,4BAE7D;IACD;;;;;;OAMG;KAXC,mBAAmB,CAAC,OAAO,CAAC,EACrB,UAAC,EAAW;QAAT,OAAO,aAAA;IACjB,OAAA,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM;AAA1D,CAA0D,CAE7D,CAAA;AACD;;;;;;GAMG;AACH,MAAM,CAAC,IAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAGtC,SAAS,QAAQ,CAAC,EAAoC,EAAE,GAAG;IAAvC,IAAA,QAAQ,cAAA,EAAE,eAAY,EAAZ,OAAO,mBAAG,EAAE,KAAA,EAAK,KAAK,cAAlC,uBAAoC,CAAF;IACpD,cAAc,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,wBAAwB,EAAE,CAAC,CAAA;IAE5E,OAAO,CACL,oBAAC,cAAc,eAAK,KAAK,IAAE,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,KAClD,QAAQ,CACM,CAClB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAA"}

package/dist/Notation/Notation.types.d.ts

@@ -0,0 +1,16 @@
+import { Props } from '../_utils/types';
+export declare const notationVariant: {
+    readonly error: "error";
+    readonly none: "";
+    readonly pagination: "pagination";
+    readonly required: "required";
+};
+declare type NotationVariant = typeof notationVariant[keyof typeof notationVariant];
+export interface NotationProps extends Props {
+    /**
+     * The notation color variant
+     * @since 10.19.0
+     */
+    variant?: NotationVariant;
+}
+export {};

package/dist/Notation/Notation.types.js

@@ -0,0 +1,7 @@
+export var notationVariant = {
+    error: 'error',
+    none: '',
+    pagination: 'pagination',
+    required: 'required',
+};
+//# sourceMappingURL=Notation.types.js.map

package/dist/Notation/Notation.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Notation.types.js","sourceRoot":"","sources":["../../src/Notation/Notation.types.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,IAAM,eAAe,GAAG;IAC7B,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,EAAE;IACR,UAAU,EAAE,YAAY;IACxB,QAAQ,EAAE,UAAU;CACZ,CAAA"}

package/dist/Notation/index.d.ts

@@ -0,0 +1,2 @@
+export { Notation } from './Notation';
+export { NotationProps } from './Notation.types';

package/dist/Notation/index.js

@@ -0,0 +1,2 @@
+export { Notation } from './Notation';
+//# sourceMappingURL=index.js.map

package/dist/Notation/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Notation/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA"}

package/dist/NumberInput/NumberInput.constants.d.ts

@@ -0,0 +1,3 @@
+export declare const defaultCurrencyDecimalScale = 2;
+export declare const defaultCurrencyFillDecimalScale = "onBlur";
+export declare const defaultCurrencyInputPrefix = "$";

package/dist/NumberInput/NumberInput.constants.js

@@ -0,0 +1,4 @@
+export var defaultCurrencyDecimalScale = 2;
+export var defaultCurrencyFillDecimalScale = 'onBlur';
+export var defaultCurrencyInputPrefix = '$';
+//# sourceMappingURL=NumberInput.constants.js.map

package/dist/NumberInput/NumberInput.constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberInput.constants.js","sourceRoot":"","sources":["../../src/NumberInput/NumberInput.constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,IAAM,2BAA2B,GAAG,CAAC,CAAA;AAC5C,MAAM,CAAC,IAAM,+BAA+B,GAAG,QAAQ,CAAA;AACvD,MAAM,CAAC,IAAM,0BAA0B,GAAG,GAAG,CAAA"}

package/dist/NumberInput/NumberInput.d.ts

@@ -0,0 +1,20 @@
+import { CurrencyDisplay } from '@procore/globalization-toolkit';
+import React from 'react';
+import { CurrencyInputProps, CurrencyProps, NumberInputProps } from './NumberInput.types';
+/**
+
+ The number input allows users to add numbers to a given form or table.
+ The currency input will be used for data with a monetary value.
+ Both components allow characters 0-9, periods, and commas. In order to avoid
+ the loss of precision, the number length is limited by 15 digits.
+
+ @since 10.19.0
+
+ @see [Storybook](https://procore.github.io/core/core-react/latest/?path=/story/demos-numberinput--demo-number-input)
+
+ @see [Design Guidelines](https://design.procore.com/number-and-currency-input)
+
+ */
+export declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;
+export declare const getCurrencyProps: (locale: string, _decimalScale: NumberInputProps['decimalScale'], symbol?: string, currencyIsoCode?: string, currencyDisplay?: CurrencyDisplay) => CurrencyProps;
+export declare const CurrencyInput: React.ForwardRefExoticComponent<CurrencyInputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/NumberInput/NumberInput.hooks.d.ts

@@ -0,0 +1,21 @@
+import { InputValue, UseNumberFormatConfig } from './NumberInput.types';
+export declare function usePrevious<T>(value: T): T;
+export declare function useNumberFormat({ decimalScale: _decimalScale, fillDecimalScale, locale: _locale, }: UseNumberFormatConfig): {
+    formatValue: (value: InputValue) => string;
+    getValueLengthInfo: (value: InputValue, isNumericString?: any) => {
+        length: number;
+        safeLength: number;
+        isSafeLength: boolean;
+        safelyTruncatedValue: string;
+        integerLength: number;
+        safeIntegerLength: number;
+        isSafeIntegerLength: boolean;
+        fractionLength: number;
+        safeFractionLength: number;
+        isSafeFractionLength: boolean;
+    };
+    locale: string[];
+    fixedDecimalScale: boolean;
+    fillDecimalScaleOnBlur: boolean;
+    decimalScale: number;
+};

package/dist/NumberInput/NumberInput.hooks.js

@@ -0,0 +1,47 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import React from 'react';
+import { defaultLocale, format, getLengthInfo, verifyDecimalScale, } from './NumberInput.utils';
+export function usePrevious(value) {
+    var ref = React.useRef();
+    React.useEffect(function () {
+        ref.current = value;
+    });
+    return ref.current;
+}
+export function useNumberFormat(_a) {
+    var _b = _a.decimalScale, _decimalScale = _b === void 0 ? true : _b, _c = _a.fillDecimalScale, fillDecimalScale = _c === void 0 ? 'none' : _c, _d = _a.locale, _locale = _d === void 0 ? defaultLocale : _d;
+    var locale = React.useMemo(function () {
+        return __spreadArray(__spreadArray([], (Array.isArray(_locale) ? _locale : [_locale]), true), [
+            defaultLocale,
+        ], false);
+    }, [_locale]);
+    var _e = React.useMemo(function () { return ({
+        fixedDecimalScale: fillDecimalScale === 'always',
+        fillDecimalScaleOnBlur: fillDecimalScale === 'onBlur',
+    }); }, [fillDecimalScale]), fixedDecimalScale = _e.fixedDecimalScale, fillDecimalScaleOnBlur = _e.fillDecimalScaleOnBlur;
+    var decimalScale = React.useMemo(function () { return verifyDecimalScale(_decimalScale); }, [_decimalScale]);
+    var formatValue = React.useCallback(function (value) {
+        return format(locale, decimalScale, fillDecimalScale, value);
+    }, [locale, decimalScale, fillDecimalScale]);
+    var getValueLengthInfo = React.useCallback(function (value, isNumericString) {
+        if (isNumericString === void 0) { isNumericString = false; }
+        return getLengthInfo(locale, value, decimalScale, fillDecimalScale, isNumericString);
+    }, [locale, decimalScale, fillDecimalScale]);
+    return {
+        formatValue: formatValue,
+        getValueLengthInfo: getValueLengthInfo,
+        locale: locale,
+        fixedDecimalScale: fixedDecimalScale,
+        fillDecimalScaleOnBlur: fillDecimalScaleOnBlur,
+        decimalScale: decimalScale,
+    };
+}
+//# sourceMappingURL=NumberInput.hooks.js.map

package/dist/NumberInput/NumberInput.hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberInput.hooks.js","sourceRoot":"","sources":["../../src/NumberInput/NumberInput.hooks.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EACL,aAAa,EACb,MAAM,EACN,aAAa,EACb,kBAAkB,GACnB,MAAM,qBAAqB,CAAA;AAE5B,MAAM,UAAU,WAAW,CAAI,KAAQ;IACrC,IAAM,GAAG,GAAG,KAAK,CAAC,MAAM,EAAK,CAAA;IAC7B,KAAK,CAAC,SAAS,CAAC;QACd,GAAG,CAAC,OAAO,GAAG,KAAK,CAAA;IACrB,CAAC,CAAC,CAAA;IACF,OAAO,GAAG,CAAC,OAAY,CAAA;AACzB,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,EAIR;QAHtB,oBAAkC,EAApB,aAAa,mBAAG,IAAI,KAAA,EAClC,wBAAyB,EAAzB,gBAAgB,mBAAG,MAAM,KAAA,EACzB,cAA+B,EAAvB,OAAO,mBAAG,aAAa,KAAA;IAE/B,IAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAC1B;QACE,OAAA,gCACK,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;YACjD,aAAa;iBACF;IAHb,CAGa,EACf,CAAC,OAAO,CAAC,CACV,CAAA;IAEK,IAAA,KAAgD,KAAK,CAAC,OAAO,CACjE,cAAM,OAAA,CAAC;QACL,iBAAiB,EAAE,gBAAgB,KAAK,QAAQ;QAChD,sBAAsB,EAAE,gBAAgB,KAAK,QAAQ;KACtD,CAAC,EAHI,CAGJ,EACF,CAAC,gBAAgB,CAAC,CACnB,EANO,iBAAiB,uBAAA,EAAE,sBAAsB,4BAMhD,CAAA;IAED,IAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAChC,cAAM,OAAA,kBAAkB,CAAC,aAAa,CAAC,EAAjC,CAAiC,EACvC,CAAC,aAAa,CAAC,CAChB,CAAA;IAED,IAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CACnC,UAAC,KAAiB;QAChB,OAAA,MAAM,CAAC,MAAM,EAAE,YAAY,EAAE,gBAAgB,EAAE,KAAK,CAAC;IAArD,CAAqD,EACvD,CAAC,MAAM,EAAE,YAAY,EAAE,gBAAgB,CAAC,CACzC,CAAA;IAED,IAAM,kBAAkB,GAAG,KAAK,CAAC,WAAW,CAC1C,UAAC,KAAiB,EAAE,eAAuB;QAAvB,gCAAA,EAAA,uBAAuB;QACzC,OAAA,aAAa,CACX,MAAM,EACN,KAAK,EACL,YAAY,EACZ,gBAAgB,EAChB,eAAe,CAChB;IAND,CAMC,EACH,CAAC,MAAM,EAAE,YAAY,EAAE,gBAAgB,CAAC,CACzC,CAAA;IAED,OAAO;QACL,WAAW,aAAA;QACX,kBAAkB,oBAAA;QAClB,MAAM,QAAA;QACN,iBAAiB,mBAAA;QACjB,sBAAsB,wBAAA;QACtB,YAAY,cAAA;KACb,CAAA;AACH,CAAC"}

package/dist/NumberInput/NumberInput.js

@@ -0,0 +1,376 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { formatCurrencyToParts, } from '@procore/globalization-toolkit';
+import { findIndex } from 'ramda';
+import React from 'react';
+import { useI18nContext } from '../_hooks/I18n';
+import { spacing } from '../_styles/spacing';
+import { mergeRefs } from '../_utils/mergeRefs';
+import { defaultCurrencyFillDecimalScale, defaultCurrencyInputPrefix, } from './NumberInput.constants';
+import { useNumberFormat, usePrevious } from './NumberInput.hooks';
+import { addonRootFontFamily, addonRootFontSize, addonRootPadding, inputDefaultXPadding, StyledIncrementerButton, StyledIncrementerWrapper, StyledInput, StyledPrefix, StyledSuffix, StyledWrapper, } from './NumberInput.styles';
+import { backspaceKey, commaKey, controlKey, copyKey, defaultLocale, deleteKey, emptyString, format, getNewCursorPosition, getSeparators, highlightAllKey, identicalLocales, identifyPressedKey, maxDigitLength, metaKeyIdentifier, minus, numericKeypadKey, periodKey, prepareValueToFormatting, toFixed, unformat, } from './NumberInput.utils';
+function noop() { }
+var PlusIcon = function () { return (React.createElement("svg", { width: "8", height: "8", viewBox: "0 0 8 8", xmlns: "http://www.w3.org/2000/svg" },
+    React.createElement("path", { d: "M4.5 0H3.5V3.5H0V4.5H3.5V8H4.5V4.5H8V3.5H4.5V0Z" }))); };
+var MinusIcon = function () { return (React.createElement("svg", { width: "8", height: "2", viewBox: "0 0 8 2", xmlns: "http://www.w3.org/2000/svg" },
+    React.createElement("path", { d: "M4.5 0.5H3.5H0V1.5H3.5H4.5H8V0.5H4.5Z" }))); };
+/**
+
+ The number input allows users to add numbers to a given form or table.
+ The currency input will be used for data with a monetary value.
+ Both components allow characters 0-9, periods, and commas. In order to avoid
+ the loss of precision, the number length is limited by 15 digits.
+
+ @since 10.19.0
+
+ @see [Storybook](https://procore.github.io/core/core-react/latest/?path=/story/demos-numberinput--demo-number-input)
+
+ @see [Design Guidelines](https://design.procore.com/number-and-currency-input)
+
+ */
+export var NumberInput = React.forwardRef(function (_a, ref) {
+    var _b = _a.decimalScale, decimalScale = _b === void 0 ? true : _b, defaultValue = _a.defaultValue, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.error, error = _d === void 0 ? false : _d, _e = _a.fillDecimalScale, fillDecimalScale = _e === void 0 ? 'none' : _e, _locale = _a.locale, _onChange = _a.onChange, _f = _a.onKeyDown, _onKeyDown = _f === void 0 ? noop : _f, _g = _a.onBlur, _onBlur = _g === void 0 ? noop : _g, _h = _a.prefix, prefix = _h === void 0 ? emptyString : _h, readOnly = _a.readOnly, _j = _a.step, step = _j === void 0 ? 0 : _j, style = _a.style, _k = _a.suffix, suffix = _k === void 0 ? emptyString : _k, value = _a.value, qa = _a.qa, props = __rest(_a, ["decimalScale", "defaultValue", "disabled", "error", "fillDecimalScale", "locale", "onChange", "onKeyDown", "onBlur", "prefix", "readOnly", "step", "style", "suffix", "value", "qa"]);
+    var I18n = useI18nContext();
+    var contextLocale = _locale || I18n.locale || defaultLocale;
+    var inputRef = React.useRef(null);
+    var _l = useNumberFormat({
+        decimalScale: decimalScale,
+        fillDecimalScale: fillDecimalScale,
+        locale: contextLocale,
+    }), verifiedDecimalScale = _l.decimalScale, fillDecimalScaleOnBlur = _l.fillDecimalScaleOnBlur, fixedDecimalScale = _l.fixedDecimalScale, formatValue = _l.formatValue, getValueLengthInfo = _l.getValueLengthInfo, locale = _l.locale;
+    var isControlled = value !== undefined;
+    var isControlledWithoutOnChangeHandlerAndReadOnlyAttribute = isControlled && !_onChange && !readOnly;
+    var hasIncrementer = step > 0 && !readOnly;
+    var _m = React.useMemo(function () { return getSeparators(locale); }, [locale]), group = _m.group, decimal = _m.decimal;
+    var decimalSeparatorKey = React.useMemo(function () {
+        return decimal === periodKey ? periodKey : commaKey;
+    }, [decimal]);
+    var inputPadding = React.useMemo(function () {
+        var fontContext = "".concat(addonRootFontSize, " \"").concat(addonRootFontFamily, "\"");
+        if (prefix || suffix) {
+            var element = document.createElement('canvas');
+            var context = element === null || element === void 0 ? void 0 : element.getContext('2d');
+            if (context) {
+                context.font = fontContext;
+                var extraBasePadding = inputDefaultXPadding + addonRootPadding;
+                var suffixPadding_1 = extraBasePadding + Math.ceil(context.measureText(suffix).width);
+                var getRightPadding = function () {
+                    if (hasIncrementer && suffix) {
+                        return suffixPadding_1 + spacing.xl;
+                    }
+                    if (suffix) {
+                        return suffixPadding_1;
+                    }
+                    return null;
+                };
+                return {
+                    left: prefix
+                        ? extraBasePadding + Math.ceil(context.measureText(prefix).width)
+                        : inputDefaultXPadding,
+                    right: getRightPadding(),
+                };
+            }
+        }
+        return {
+            left: inputDefaultXPadding,
+            right: null,
+        };
+    }, [prefix, suffix, hasIncrementer]);
+    var getValueChange = React.useCallback(function (value) {
+        var parsedNumber = unformat(locale, value).parsedNumber;
+        return {
+            value: value,
+            parsedNumber: isNaN(parsedNumber) ? null : parsedNumber,
+        };
+    }, [locale]);
+    var externalOnChange = React.useCallback(function (value) { return _onChange && _onChange(getValueChange(value)); }, [_onChange, getValueChange]);
+    var _o = React.useState(formatValue(defaultValue)), inputValue = _o[0], setInputValue = _o[1];
+    var _p = React.useState(isControlled ? formatValue(value) : inputValue), prevValue = _p[0], setPrevValue = _p[1];
+    var _q = React.useState({
+        selectionStart: 0,
+        selectionEnd: 0,
+        selection: emptyString,
+    }), prevCursorPosition = _q[0], setPrevCursorPosition = _q[1];
+    var _r = React.useState(), pressedKey = _r[0], setPressedKey = _r[1];
+    var prevLocale = usePrevious(locale);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    React.useLayoutEffect(function () {
+        var formattedValue = formatValue(value);
+        if (isControlled && inputValue !== formattedValue) {
+            setInputValue(formattedValue);
+        }
+        if (isControlledWithoutOnChangeHandlerAndReadOnlyAttribute) {
+            console.error("Warning: Failed prop type: You provided a `value` prop to a form field without an `onChange` handler.\n        This will render a read-only field. If the field should be mutable use `defaultValue`.\n        Otherwise, set either `onChange` or `readOnly`.");
+        }
+    }, [value]);
+    React.useEffect(function () {
+        if (prevLocale && !identicalLocales(prevLocale, locale)) {
+            setInputValue(function (prev) {
+                var newValue = formatValue(unformat(prevLocale, prev).parsedNumber);
+                externalOnChange(newValue);
+                return newValue;
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [prevLocale, formatValue]);
+    React.useLayoutEffect(function () {
+        var _a;
+        var displayValue = ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) || '';
+        if (!_onChange || !displayValue) {
+            return;
+        }
+        var formattedValue = formatValue(value);
+        if (displayValue !== formattedValue) {
+            var lastChar = displayValue[displayValue.length - 1];
+            var lastCharIsPending = [periodKey, commaKey].includes(lastChar);
+            var decimals = displayValue.split(decimal)[1] || '';
+            var lastDecimalIsZero = decimals && decimals[decimals.length - 1] === '0';
+            // a client state and display mismatch is only valid when
+            if (lastCharIsPending || lastDecimalIsZero) {
+                return;
+            }
+            // otherwise sync display with client state
+            setInputValue(formattedValue);
+        }
+    });
+    var getNewValueAndCursorPosition = function (value, pressedKey) {
+        var preparedValue = prepareValueToFormatting(decimal, decimalSeparatorKey, group, pressedKey, prevCursorPosition, prevValue, verifiedDecimalScale, value);
+        var newValue = formatValue(preparedValue);
+        return {
+            newValue: newValue,
+            newCursorPosition: getNewCursorPosition(decimal, decimalSeparatorKey, group, newValue, pressedKey, prevCursorPosition, prevValue, value, verifiedDecimalScale, locale, fillDecimalScale),
+        };
+    };
+    var adjustCursor = function (newPosition) {
+        var _a;
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(newPosition, newPosition);
+        // Mobile Chrome adjustment
+        setTimeout(function () { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(newPosition, newPosition); }, 0);
+    };
+    var makeStep = function (down) {
+        if (down === void 0) { down = false; }
+        var getSignificantPrecision = function (fraction) {
+            var reversedFraction = fraction.split(emptyString).reverse();
+            var indexOfLastSignificantFractionDigit = findIndex(function (i) { return i !== '0'; }, reversedFraction);
+            return indexOfLastSignificantFractionDigit > -1
+                ? reversedFraction.slice(indexOfLastSignificantFractionDigit).length
+                : 0;
+        };
+        var _a = unformat(locale, inputValue), parsedNumber = _a.parsedNumber, fraction = _a.fraction;
+        var stepFraction = unformat(locale, step).fraction;
+        var prevValuePrecision = fraction.length || 0;
+        var prevValueSignificantPrecision = getSignificantPrecision(fraction);
+        var rawStepPrecision = stepFraction.length || 0;
+        var rawStepPrecisionExceedsDecimalScale = rawStepPrecision > verifiedDecimalScale;
+        var stepPrecision = rawStepPrecisionExceedsDecimalScale
+            ? verifiedDecimalScale
+            : rawStepPrecision;
+        if (rawStepPrecisionExceedsDecimalScale) {
+            console.warn("WARNING: Step's value was rounded since its scale (".concat(rawStepPrecision, ") exceeds the decimal scale (").concat(verifiedDecimalScale, ")."));
+        }
+        var diff = toFixed(step, stepPrecision) * (down ? -1 : 1);
+        var precision = Math.max(stepPrecision, fixedDecimalScale ? verifiedDecimalScale : prevValuePrecision);
+        var significantPrecision = Math.max(prevValueSignificantPrecision, stepPrecision);
+        var calculated = inputValue
+            ? ((parsedNumber || 0) + diff).toFixed(significantPrecision)
+            : diff;
+        var _b = getValueLengthInfo(calculated, true), isSafeLength = _b.isSafeLength, isSafeIntegerLength = _b.isSafeIntegerLength;
+        var rejectStepByLengthLimit = !isSafeLength || !isSafeIntegerLength;
+        if (rejectStepByLengthLimit) {
+            console.warn("WARNING: Incrementer's step was not fulfilled since result oversteps input ".concat(maxDigitLength, "-digit limit and can't be presented without a loss of precision."));
+            return;
+        }
+        var formatted = format(locale, precision, 'always', calculated, true);
+        setInputValue(formatted);
+        externalOnChange(formatted);
+    };
+    var internalOnKeyDown = function (e) {
+        var ctrlKey = e.ctrlKey, metaKey = e.metaKey, key = e.key, _a = e.target, value = _a.value, selectionStart = _a.selectionStart, selectionEnd = _a.selectionEnd;
+        var selection = value.slice(selectionStart, selectionEnd);
+        setPressedKey(key);
+        setPrevCursorPosition({
+            selectionStart: selectionStart,
+            selectionEnd: selectionEnd,
+            selection: selection,
+        });
+        setPrevValue(value);
+        var preserveDecimalSeparator = function () {
+            var decimalBackspaced = !selection &&
+                [backspaceKey].includes(key) &&
+                value[selectionEnd - 1] === decimal;
+            var decimalDeleted = !selection &&
+                [deleteKey, numericKeypadKey].includes(key) &&
+                value[selectionEnd] === decimal;
+            var nonReplacingKeys = [metaKeyIdentifier, controlKey, highlightAllKey, copyKey].includes(key) &&
+                (ctrlKey || metaKey);
+            var decimalReplacedAsSelection = selection &&
+                selection.includes(decimal) &&
+                selection.length < value.length &&
+                !nonReplacingKeys;
+            var preserveDecimal = decimalBackspaced || decimalDeleted || decimalReplacedAsSelection;
+            if (preserveDecimal) {
+                var base = decimalReplacedAsSelection
+                    ? selectionStart
+                    : selectionEnd;
+                var shift = (decimalBackspaced && -1) || (decimalDeleted && 1) || 0;
+                var cursorPosition = base + shift;
+                e.preventDefault();
+                adjustCursor(cursorPosition);
+            }
+        };
+        var isDecimalSeparatorPreserved = function () {
+            var _a = getValueLengthInfo(value), safeIntegerLength = _a.safeIntegerLength, integerLength = _a.integerLength, fractionLength = _a.fractionLength;
+            var decimalSeparatorCanNotBeRemoved = safeIntegerLength - integerLength < fractionLength;
+            return ((fillDecimalScaleOnBlur && decimalSeparatorCanNotBeRemoved) ||
+                fixedDecimalScale);
+        };
+        if (isDecimalSeparatorPreserved()) {
+            preserveDecimalSeparator();
+        }
+        var handleIncrementer = function () {
+            switch (key) {
+                case 'ArrowUp':
+                case 'Up':
+                    e.preventDefault();
+                    makeStep();
+                    break;
+                case 'ArrowDown':
+                case 'Down':
+                    e.preventDefault();
+                    makeStep(true);
+                    break;
+            }
+        };
+        if (hasIncrementer) {
+            handleIncrementer();
+        }
+        _onKeyDown(e);
+    };
+    var internalOnChange = function (e) {
+        if (isControlledWithoutOnChangeHandlerAndReadOnlyAttribute)
+            return;
+        var value = e.target.value, inputType = e.nativeEvent.inputType;
+        var _a = getNewValueAndCursorPosition(value, identifyPressedKey(decimalSeparatorKey, inputType, pressedKey, prevValue, value)), newValue = _a.newValue, newCursorPosition = _a.newCursorPosition;
+        // Prevent cursor flickering
+        e.target.value = newValue;
+        setInputValue(newValue);
+        adjustCursor(newCursorPosition);
+        if (newValue !== prevValue) {
+            externalOnChange(newValue);
+        }
+    };
+    var internalOnBlur = function (e) {
+        var _a = unformat(locale, inputValue), integer = _a.integer, fraction = _a.fraction;
+        var shouldValueBeCleared = inputValue === minus ||
+            inputValue === decimal ||
+            inputValue === "".concat(minus).concat(decimal);
+        var shouldIntegerPartBeFilled = fraction.length > 0 && (integer === emptyString || integer === minus);
+        var isDecimalSeparatorRedundant = verifiedDecimalScale > 0 &&
+            inputValue[inputValue.length - 1] === decimal &&
+            !fillDecimalScaleOnBlur;
+        var isDecimalScaleNotFilled = verifiedDecimalScale - fraction.length > 0;
+        var shouldDecimalScaleBeFilled = fillDecimalScaleOnBlur && isDecimalScaleNotFilled;
+        if (shouldValueBeCleared ||
+            shouldIntegerPartBeFilled ||
+            isDecimalSeparatorRedundant ||
+            shouldDecimalScaleBeFilled) {
+            var getNewValue = function () {
+                if (shouldValueBeCleared) {
+                    return emptyString;
+                }
+                if (shouldIntegerPartBeFilled) {
+                    var numberOfZerosToPad = verifiedDecimalScale - fraction.length;
+                    return "".concat(integer, "0").concat(decimal).concat(shouldDecimalScaleBeFilled
+                        ? fraction.concat(Array.from({ length: numberOfZerosToPad }, function (_) { return '0'; }).join(emptyString))
+                        : fraction);
+                }
+                if (isDecimalSeparatorRedundant) {
+                    return inputValue.replace(new RegExp("[".concat(decimal, "]"), 'g'), emptyString);
+                }
+                if (shouldDecimalScaleBeFilled) {
+                    return format(locale, verifiedDecimalScale, 'always', inputValue);
+                }
+                return inputValue;
+            };
+            var newValue = getNewValue();
+            setInputValue(newValue);
+            externalOnChange(newValue);
+        }
+        _onBlur(e);
+    };
+    return (React.createElement(StyledWrapper, { hasIncrementer: hasIncrementer, "data-qa": qa === null || qa === void 0 ? void 0 : qa.wrapper },
+        React.createElement(StyledInput, __assign({ value: inputValue, disabled: disabled, error: error, onKeyDown: internalOnKeyDown, onChange: internalOnChange, onBlur: internalOnBlur, inputMode: "numeric", readOnly: readOnly, style: __assign(__assign({}, style), {
+                paddingLeft: "".concat(inputPadding.left, "px"),
+                paddingRight: "".concat(inputPadding.right, "px"),
+            }) }, props, { ref: mergeRefs(ref, inputRef) })),
+        prefix && React.createElement(StyledPrefix, { disabled: disabled }, prefix),
+        suffix && (React.createElement(StyledSuffix, { withIncrementer: hasIncrementer, disabled: disabled }, suffix)),
+        hasIncrementer && (React.createElement(StyledIncrementerWrapper, null,
+            React.createElement(StyledIncrementerButton, { "aria-hidden": "true", type: "button", disabled: disabled, tabIndex: -1, "data-qa": qa === null || qa === void 0 ? void 0 : qa.increment, onClick: function () { return makeStep(); } },
+                React.createElement(PlusIcon, null)),
+            React.createElement(StyledIncrementerButton, { "aria-hidden": "true", type: "button", disabled: disabled, tabIndex: -1, "data-qa": qa === null || qa === void 0 ? void 0 : qa.decrement, onClick: function () { return makeStep(true); } },
+                React.createElement(MinusIcon, null))))));
+});
+NumberInput.displayName = 'NumberInput';
+export var getCurrencyProps = function (locale, _decimalScale, symbol, currencyIsoCode, currencyDisplay) {
+    var _a, _b;
+    var currencyOptions = {
+        locale: locale,
+        currencyIsoCode: currencyIsoCode || 'USD',
+        currencyDisplay: currencyDisplay || 'narrowSymbol',
+    };
+    var parts = formatCurrencyToParts(1, currencyOptions);
+    var formatterDecimalScale = ((_a = parts.find(function (part) { return part.type === 'fraction'; })) === null || _a === void 0 ? void 0 : _a.value.length) || 0;
+    var decimalScale = _decimalScale || formatterDecimalScale;
+    var placement = parts.findIndex(function (object) {
+        return object.type === 'currency';
+    }) <
+        parts.findIndex(function (part) {
+            return part.type === 'integer';
+        })
+        ? 'prefix'
+        : 'suffix';
+    var currencyIsoSymbol = currencyIsoCode
+        ? (_b = parts.find(function (part) { return part.type === 'currency'; })) === null || _b === void 0 ? void 0 : _b.value.toString()
+        : undefined;
+    var currencyProps = placement === 'prefix'
+        ? {
+            decimalScale: decimalScale,
+            prefix: currencyIsoSymbol || symbol || '',
+        }
+        : {
+            decimalScale: decimalScale,
+            suffix: currencyIsoSymbol || symbol || '',
+        };
+    return currencyProps;
+};
+export var CurrencyInput = React.forwardRef(function (_a, ref) {
+    var currencyDisplay = _a.currencyDisplay, currencyIsoCode = _a.currencyIsoCode, _decimalScale = _a.decimalScale, _b = _a.fillDecimalScale, fillDecimalScale = _b === void 0 ? defaultCurrencyFillDecimalScale : _b, _c = _a.prefix, prefix = _c === void 0 ? defaultCurrencyInputPrefix : _c, suffix = _a.suffix, props = __rest(_a, ["currencyDisplay", "currencyIsoCode", "decimalScale", "fillDecimalScale", "prefix", "suffix"]);
+    var I18n = useI18nContext();
+    var contextLocale = props.locale || I18n.locale || defaultLocale;
+    var currencyProps = getCurrencyProps(contextLocale, _decimalScale, prefix || suffix, currencyIsoCode, currencyDisplay);
+    return (React.createElement(NumberInput, __assign({ fillDecimalScale: fillDecimalScale }, props, currencyProps, { ref: ref })));
+});
+CurrencyInput.displayName = 'CurrencyInput';
+//# sourceMappingURL=NumberInput.js.map