@pega/cosmos-react-core 4.0.0-dev.2.0 → 4.0.0-dev.21.0

package/lib/components/MultiStepForm/VerticalFormProgress.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import Flex from '../Flex';
+import Grid from '../Grid';
+import Text from '../Text';
+import { StepMarkerIcon, StyledBulletWrapper, StyledStepText } from './FormProgress.styles';
+const VerticalFormProgress = ({ steps, currentStepId, ...restProps }) => {
+    const curIdx = steps.findIndex(step => step.id === currentStepId);
+    const curStep = steps[curIdx];
+    return (_jsx(Flex, { ...restProps, container: { alignItems: 'start' }, role: 'progressbar', "aria-valuenow": curIdx, "aria-valuemin": 0, "aria-valuetext": curStep.name, "aria-valuemax": steps.length, children: _jsx(Grid, { container: {
+                cols: '2rem minmax(0, 1fr)',
+                colGap: 1
+            }, children: steps.map((step, index) => {
+                return (_jsxs(Fragment, { children: [_jsx(StyledBulletWrapper, { hasNext: index !== steps.length - 1, prior: index < curIdx, children: _jsx(StepMarkerIcon, { "aria-label": step.name, "aria-describedby": step.id, current: index === curIdx, prior: index < curIdx, depth: step.depth }) }), _jsx(Text, { variant: 'h4', as: StyledStepText, children: step.name })] }, step.id));
+            }) }) }));
+};
+export default VerticalFormProgress;
+//# sourceMappingURL=VerticalFormProgress.js.map

package/lib/components/MultiStepForm/VerticalFormProgress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VerticalFormProgress.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/VerticalFormProgress.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAqB,MAAM,OAAO,CAAC;AAGpD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAQ5F,MAAM,oBAAoB,GAAwD,CAAC,EACjF,KAAK,EACL,aAAa,EACb,GAAG,SAAS,EACb,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,aAAa,CAAC,CAAC;IAClE,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAE9B,OAAO,CACL,KAAC,IAAI,OACC,SAAS,EACb,SAAS,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,EAClC,IAAI,EAAC,aAAa,mBACH,MAAM,mBACN,CAAC,oBACA,OAAO,CAAC,IAAI,mBACb,KAAK,CAAC,MAAM,YAE3B,KAAC,IAAI,IACH,SAAS,EAAE;gBACT,IAAI,EAAE,qBAAqB;gBAC3B,MAAM,EAAE,CAAC;aACV,YAEA,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;gBACzB,OAAO,CACL,MAAC,QAAQ,eACP,KAAC,mBAAmB,IAAC,OAAO,EAAE,KAAK,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,KAAK,EAAE,KAAK,GAAG,MAAM,YAC7E,KAAC,cAAc,kBACD,IAAI,CAAC,IAAI,sBACH,IAAI,CAAC,EAAE,EACzB,OAAO,EAAE,KAAK,KAAK,MAAM,EACzB,KAAK,EAAE,KAAK,GAAG,MAAM,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB,GACkB,EACtB,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAE,cAAc,YAClC,IAAI,CAAC,IAAI,GACL,KAZM,IAAI,CAAC,EAAE,CAaX,CACZ,CAAC;YACJ,CAAC,CAAC,GACG,GACF,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,oBAAoB,CAAC","sourcesContent":["import { Fragment, FunctionComponent } from 'react';\n\nimport { ForwardProps } from '../../types';\nimport Flex from '../Flex';\nimport Grid from '../Grid';\nimport Text from '../Text';\n\nimport { StepMarkerIcon, StyledBulletWrapper, StyledStepText } from './FormProgress.styles';\nimport type MultiStepFormProps from './MultiStepForm.types';\n\ninterface FormProgressProps {\n  steps: MultiStepFormProps['steps'];\n  currentStepId: MultiStepFormProps['currentStepId'];\n}\n\nconst VerticalFormProgress: FunctionComponent<FormProgressProps & ForwardProps> = ({\n  steps,\n  currentStepId,\n  ...restProps\n}) => {\n  const curIdx = steps.findIndex(step => step.id === currentStepId);\n  const curStep = steps[curIdx];\n\n  return (\n    <Flex\n      {...restProps}\n      container={{ alignItems: 'start' }}\n      role='progressbar'\n      aria-valuenow={curIdx}\n      aria-valuemin={0}\n      aria-valuetext={curStep.name}\n      aria-valuemax={steps.length}\n    >\n      <Grid\n        container={{\n          cols: '2rem minmax(0, 1fr)',\n          colGap: 1\n        }}\n      >\n        {steps.map((step, index) => {\n          return (\n            <Fragment key={step.id}>\n              <StyledBulletWrapper hasNext={index !== steps.length - 1} prior={index < curIdx}>\n                <StepMarkerIcon\n                  aria-label={step.name}\n                  aria-describedby={step.id}\n                  current={index === curIdx}\n                  prior={index < curIdx}\n                  depth={step.depth}\n                />\n              </StyledBulletWrapper>\n              <Text variant='h4' as={StyledStepText}>\n                {step.name}\n              </Text>\n            </Fragment>\n          );\n        })}\n      </Grid>\n    </Flex>\n  );\n};\n\nexport default VerticalFormProgress;\n"]}

package/lib/components/NoValue/NoValue.d.ts

@@ -0,0 +1,3 @@
+declare const NoValue: () => JSX.Element;
+export default NoValue;
+//# sourceMappingURL=NoValue.d.ts.map

package/lib/components/NoValue/NoValue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NoValue.d.ts","sourceRoot":"","sources":["../../../src/components/NoValue/NoValue.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,OAAO,mBAQZ,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/lib/components/NoValue/NoValue.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useI18n } from '../../hooks';
+import VisuallyHiddenText from '../VisuallyHiddenText/VisuallyHiddenText';
+const NoValue = () => {
+    const t = useI18n();
+    return (_jsxs("span", { children: [_jsx("span", { "aria-hidden": true, children: "\u2013\u2013" }), _jsx(VisuallyHiddenText, { children: t('no_value') })] }));
+};
+export default NoValue;
+//# sourceMappingURL=NoValue.js.map

package/lib/components/NoValue/NoValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NoValue.js","sourceRoot":"","sources":["../../../src/components/NoValue/NoValue.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,kBAAkB,MAAM,0CAA0C,CAAC;AAE1E,MAAM,OAAO,GAAG,GAAG,EAAE;IACnB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,OAAO,CACL,2BACE,+DAAuC,EACvC,KAAC,kBAAkB,cAAE,CAAC,CAAC,UAAU,CAAC,GAAsB,IACnD,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import { useI18n } from '../../hooks';\nimport VisuallyHiddenText from '../VisuallyHiddenText/VisuallyHiddenText';\n\nconst NoValue = () => {\n  const t = useI18n();\n  return (\n    <span>\n      <span aria-hidden>&ndash;&ndash;</span>\n      <VisuallyHiddenText>{t('no_value')}</VisuallyHiddenText>\n    </span>\n  );\n};\n\nexport default NoValue;\n"]}

package/lib/components/NoValue/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './NoValue';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/NoValue/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/NoValue/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}

package/lib/components/NoValue/index.js

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

package/lib/components/NoValue/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/NoValue/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC","sourcesContent":["export { default } from './NoValue';\n"]}

package/lib/components/Number/Number.test-ids.d.ts

@@ -0,0 +1,3 @@
+export declare const getNumberInputTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly ["control", "plus", "minus", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
+export declare const getNumberRangeTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly ["min", "max", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
+//# sourceMappingURL=Number.test-ids.d.ts.map

package/lib/components/Number/Number.test-ids.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Number.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Number/Number.test-ids.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,qBAAqB,yLAKvB,CAAC;AAEZ,eAAO,MAAM,qBAAqB,2KAIvB,CAAC"}

package/lib/components/Number/Number.test-ids.js

@@ -0,0 +1,14 @@
+import { createTestIds } from '../../utils';
+import { elements } from '../FormField/FormField.test-ids';
+export const getNumberInputTestIds = createTestIds('number-input', [
+    'control',
+    'plus',
+    'minus',
+    ...elements
+]);
+export const getNumberRangeTestIds = createTestIds('number-range', [
+    'min',
+    'max',
+    ...elements
+]);
+//# sourceMappingURL=Number.test-ids.js.map

package/lib/components/Number/Number.test-ids.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Number.test-ids.js","sourceRoot":"","sources":["../../../src/components/Number/Number.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAE3D,MAAM,CAAC,MAAM,qBAAqB,GAAG,aAAa,CAAC,cAAc,EAAE;IACjE,SAAS;IACT,MAAM;IACN,OAAO;IACP,GAAG,QAAQ;CACH,CAAC,CAAC;AAEZ,MAAM,CAAC,MAAM,qBAAqB,GAAG,aAAa,CAAC,cAAc,EAAE;IACjE,KAAK;IACL,KAAK;IACL,GAAG,QAAQ;CACH,CAAC,CAAC","sourcesContent":["import { createTestIds } from '../../utils';\nimport { elements } from '../FormField/FormField.test-ids';\n\nexport const getNumberInputTestIds = createTestIds('number-input', [\n  'control',\n  'plus',\n  'minus',\n  ...elements\n] as const);\n\nexport const getNumberRangeTestIds = createTestIds('number-range', [\n  'min',\n  'max',\n  ...elements\n] as const);\n"]}

package/lib/components/Number/NumberDisplay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberDisplay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5E,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAK3E,MAAM,WAAW,kBAAmB,SAAQ,SAAS,EAAE,cAAc;IACnE,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,iBAAiB,CAAC,EAAE;QAClB;;;WAGG;QACH,QAAQ,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;QAClC;;;;WAIG;QACH,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB;;;WAGG;QACH,eAAe,CAAC,EAAE,OAAO,CAAC;KAC3B,CAAC;IACF,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC;CAC5B;AAED,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CA+BvE,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"NumberDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberDisplay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5E,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAM3E,MAAM,WAAW,kBAAmB,SAAQ,SAAS,EAAE,cAAc;IACnE,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,iBAAiB,CAAC,EAAE;QAClB;;;WAGG;QACH,QAAQ,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;QAClC;;;;WAIG;QACH,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB;;;WAGG;QACH,eAAe,CAAC,EAAE,OAAO,CAAC;KAC3B,CAAC;IACF,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC;CAC5B;AAED,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CA+BvE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/Number/NumberDisplay.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { useConfiguration } from '../../hooks';
+import NoValue from '../NoValue/NoValue';
 import { getFraction, getFormattedValue } from './utils';
 const NumberDisplay = forwardRef(({ value, unit = '', formattingOptions: { fractionDigits = getFraction(String(value)).substring(1).length, notation, groupSeparators = true } = {}, ...restProps }, ref) => {
     const { locale } = useConfiguration();
@@ -9,7 +10,7 @@ const NumberDisplay = forwardRef(({ value, unit = '', formattingOptions: { fract
             useGrouping: groupSeparators,
             maximumFractionDigits: fractionDigits,
             minimumFractionDigits: fractionDigits
-        })) : (_jsx("span", { "aria-hidden": 'true', children: "\u2013\u2013" })) }));
+        })) : (_jsx(NoValue, {})) }));
 });
 export default NumberDisplay;
 //# sourceMappingURL=NumberDisplay.js.map

package/lib/components/Number/NumberDisplay.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberDisplay.js","sourceRoot":"","sources":["../../../src/components/Number/NumberDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAG5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AA8BzD,MAAM,aAAa,GAAyD,UAAU,CACpF,CACE,EACE,KAAK,EACL,IAAI,GAAG,EAAE,EACT,iBAAiB,EAAE,EACjB,cAAc,GAAG,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,MAAM,EAC/D,QAAQ,EACR,eAAe,GAAG,IAAI,EACvB,GAAG,EAAE,EACN,GAAG,SAAS,EACwB,EACtC,GAA8B,EAC9B,EAAE;IACF,MAAM,EAAE,MAAM,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAEtC,OAAO,CACL,eAAM,GAAG,EAAE,GAAG,KAAM,SAAS,YAC1B,KAAK,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CACtB,iBAAiB,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;YAChD,QAAQ;YACR,WAAW,EAAE,eAAe;YAC5B,qBAAqB,EAAE,cAAc;YACrC,qBAAqB,EAAE,cAAc;SACtC,CAAC,CACH,CAAC,CAAC,CAAC,CACF,8BAAkB,MAAM,6BAAsB,CAC/C,GACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\n\nimport type { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { useConfiguration } from '../../hooks';\n\nimport { getFraction, getFormattedValue } from './utils';\n\nexport interface NumberDisplayProps extends BaseProps, NoChildrenProp {\n  /** Number value */\n  value?: number | bigint;\n  /** Unit to be included in the text, for example '%' */\n  unit?: string;\n\n  formattingOptions?: {\n    /**\n     * Value display notation.\n     * @default 'standard'\n     */\n    notation?: 'standard' | 'compact';\n    /**\n     * Determines the fixed number of fraction digits. The value is rounded to the given precision.\n     * Maximum is 20, default is value precision.\n     * @default variable\n     */\n    fractionDigits?: number;\n    /**\n     * Determines whether group separators should be shown.\n     * @default true\n     */\n    groupSeparators?: boolean;\n  };\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLSpanElement>;\n}\n\nconst NumberDisplay: FunctionComponent<NumberDisplayProps & ForwardProps> = forwardRef(\n  (\n    {\n      value,\n      unit = '',\n      formattingOptions: {\n        fractionDigits = getFraction(String(value)).substring(1).length,\n        notation,\n        groupSeparators = true\n      } = {},\n      ...restProps\n    }: PropsWithoutRef<NumberDisplayProps>,\n    ref: NumberDisplayProps['ref']\n  ) => {\n    const { locale } = useConfiguration();\n\n    return (\n      <span ref={ref} {...restProps}>\n        {value || value === 0 ? (\n          getFormattedValue(value.toString(), locale, unit, {\n            notation,\n            useGrouping: groupSeparators,\n            maximumFractionDigits: fractionDigits,\n            minimumFractionDigits: fractionDigits\n          })\n        ) : (\n          <span aria-hidden='true'>&ndash;&ndash;</span>\n        )}\n      </span>\n    );\n  }\n);\n\nexport default NumberDisplay;\n"]}
+{"version":3,"file":"NumberDisplay.js","sourceRoot":"","sources":["../../../src/components/Number/NumberDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAG5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,OAAO,MAAM,oBAAoB,CAAC;AAEzC,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AA8BzD,MAAM,aAAa,GAAyD,UAAU,CACpF,CACE,EACE,KAAK,EACL,IAAI,GAAG,EAAE,EACT,iBAAiB,EAAE,EACjB,cAAc,GAAG,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,MAAM,EAC/D,QAAQ,EACR,eAAe,GAAG,IAAI,EACvB,GAAG,EAAE,EACN,GAAG,SAAS,EACwB,EACtC,GAA8B,EAC9B,EAAE;IACF,MAAM,EAAE,MAAM,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAEtC,OAAO,CACL,eAAM,GAAG,EAAE,GAAG,KAAM,SAAS,YAC1B,KAAK,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CACtB,iBAAiB,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;YAChD,QAAQ;YACR,WAAW,EAAE,eAAe;YAC5B,qBAAqB,EAAE,cAAc;YACrC,qBAAqB,EAAE,cAAc;SACtC,CAAC,CACH,CAAC,CAAC,CAAC,CACF,KAAC,OAAO,KAAG,CACZ,GACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\n\nimport type { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { useConfiguration } from '../../hooks';\nimport NoValue from '../NoValue/NoValue';\n\nimport { getFraction, getFormattedValue } from './utils';\n\nexport interface NumberDisplayProps extends BaseProps, NoChildrenProp {\n  /** Number value */\n  value?: number | bigint;\n  /** Unit to be included in the text, for example '%' */\n  unit?: string;\n\n  formattingOptions?: {\n    /**\n     * Value display notation.\n     * @default 'standard'\n     */\n    notation?: 'standard' | 'compact';\n    /**\n     * Determines the fixed number of fraction digits. The value is rounded to the given precision.\n     * Maximum is 20, default is value precision.\n     * @default variable\n     */\n    fractionDigits?: number;\n    /**\n     * Determines whether group separators should be shown.\n     * @default true\n     */\n    groupSeparators?: boolean;\n  };\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLSpanElement>;\n}\n\nconst NumberDisplay: FunctionComponent<NumberDisplayProps & ForwardProps> = forwardRef(\n  (\n    {\n      value,\n      unit = '',\n      formattingOptions: {\n        fractionDigits = getFraction(String(value)).substring(1).length,\n        notation,\n        groupSeparators = true\n      } = {},\n      ...restProps\n    }: PropsWithoutRef<NumberDisplayProps>,\n    ref: NumberDisplayProps['ref']\n  ) => {\n    const { locale } = useConfiguration();\n\n    return (\n      <span ref={ref} {...restProps}>\n        {value || value === 0 ? (\n          getFormattedValue(value.toString(), locale, unit, {\n            notation,\n            useGrouping: groupSeparators,\n            maximumFractionDigits: fractionDigits,\n            minimumFractionDigits: fractionDigits\n          })\n        ) : (\n          <NoValue />\n        )}\n      </span>\n    );\n  }\n);\n\nexport default NumberDisplay;\n"]}

package/lib/components/Number/NumberInput.d.ts

@@ -1,6 +1,8 @@
 import { FunctionComponent } from 'react';
 import { ForwardProps } from '../../types';
 import { NumberInputProps } from './NumberInput.types';
-declare const NumberInput: FunctionComponent<NumberInputProps & ForwardProps>;
-export default NumberInput;
+declare const _default: FunctionComponent<NumberInputProps & ForwardProps> & {
+    getTestIds: (testIdProp?: string | undefined) => import("../../types").TestIdsRecord<readonly ["control", "plus", "minus", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
+};
+export default _default;
 //# sourceMappingURL=NumberInput.d.ts.map

package/lib/components/Number/NumberInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAQf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAW3C,OAAO,EAAE,gBAAgB,EAA6B,MAAM,qBAAqB,CAAC;AAWlF,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAiOnE,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAQf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAa3C,OAAO,EAAE,gBAAgB,EAA6B,MAAM,qBAAqB,CAAC;;;;AAwPlF,wBAA+D"}

package/lib/components/Number/NumberInput.js

@@ -6,15 +6,18 @@ import * as plusIcon from '../Icon/icons/plus.icon';
 import * as minusIcon from '../Icon/icons/minus.icon';
 import Flex from '../Flex';
 import FormField from '../FormField';
-import { useConfiguration, useConsolidatedRef, useI18n, useInputFormatter, useUID } from '../../hooks';
+import { useConfiguration, useConsolidatedRef, useI18n, useInputFormatter, useTestIds, useUID } from '../../hooks';
 import StyledInput from '../Input/Input.styles';
+import { withTestIds } from '../../utils';
 import StyledNumberInput, { StyledStepperInput } from './NumberInput.styles';
 import { NUMBER_MAX_DECIMAL_PLACES } from './NumberInput.types';
 import { getCleanedValue, getDecimalSign, getDecrementedValue, getFormattedValue, getIncrementedValue } from './utils';
+import { getNumberInputTestIds } from './Number.test-ids';
 registerIcon(minusIcon, plusIcon);
 const NumberInput = forwardRef((props, ref) => {
     const uid = useUID();
-    const { id = uid, status, label, labelHidden, info, required, disabled, readOnly, additionalInfo, value = '', onChange, onFocus, onBlur, onResolveSuggestion, unit, showDecimal = true, numberOfDecimals: numberOfDecimalsProp = NUMBER_MAX_DECIMAL_PLACES, showGroupSeparators = true, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER, step = 1, variant, 'aria-label': ariaLabel, autoFocus, ...restProps } = props;
+    const { testId, id = uid, status, label, labelHidden, info, required, disabled, readOnly, additionalInfo, value = '', onChange, onFocus, onBlur, onResolveSuggestion, unit, showDecimal = true, numberOfDecimals: numberOfDecimalsProp = NUMBER_MAX_DECIMAL_PLACES, showGroupSeparators = true, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER, step = 1, variant, 'aria-label': ariaLabel, autoFocus, ...restProps } = props;
+    const testIds = useTestIds(testId, getNumberInputTestIds);
     const { locale } = useConfiguration();
     const inputRef = useConsolidatedRef(ref);
     const containerRef = useRef(null);
@@ -85,19 +88,20 @@ const NumberInput = forwardRef((props, ref) => {
     };
     const formattedValue = useInputFormatter(inputRef, value, formatValue, `\\p{N}${decimalSign}-`);
     const t = useI18n();
-    const NumberInputComp = (_jsx(Flex, { as: StyledNumberInput, hasSuggestion: status === 'pending' && !!onResolveSuggestion, container: { alignItems: 'center', wrap: 'nowrap' }, status: status, readOnly: readOnly, disabled: disabled, children: _jsx(StyledInput, { ...{ onChange: onInputChange, id, readOnly, required, disabled, status, ...restProps }, inputMode: 'numeric', ref: inputRef, value: formattedValue, onKeyDown: onKeyDown, onFocus: onInputFocusEvent, onBlur: onInputFocusEvent, "aria-label": `${ariaLabel || label}. ${unit ? t('measured_in', [unit]) : ''}`, maxLength: 16, autoFocus: autoFocus, "aria-describedby": info ? `${id}-info` : undefined }) }));
+    const numberInput = (_jsx(Flex, { "data-testid": testIds.root, as: StyledNumberInput, hasSuggestion: status === 'pending' && !!onResolveSuggestion, container: { alignItems: 'center', wrap: 'nowrap' }, status: status, readOnly: readOnly, disabled: disabled, children: _jsx(StyledInput, { "data-testid": testIds.control, ...{ onChange: onInputChange, id, readOnly, required, disabled, status, ...restProps }, inputMode: 'numeric', ref: inputRef, value: formattedValue, onKeyDown: onKeyDown, onFocus: onInputFocusEvent, onBlur: onInputFocusEvent, "aria-label": `${ariaLabel || label}. ${unit ? t('measured_in', [unit]) : ''}`, maxLength: 16, autoFocus: autoFocus, "aria-describedby": info ? `${id}-info` : undefined }) }));
     const onMinusClick = () => {
         onChange?.(getDecrementedValue(value, min, max, step));
     };
     const onPlusClick = () => {
         onChange?.(getIncrementedValue(value, min, max, step));
     };
-    const StepperComp = (_jsxs(Flex, { as: StyledStepperInput, hasSuggestion: status === 'pending' && !!onResolveSuggestion, container: { alignItems: 'center', wrap: 'nowrap' }, status: status, readOnly: readOnly, disabled: disabled, size: formattedValue?.length, children: [_jsx(Button, { variant: 'simple', icon: true, onClick: onMinusClick, readOnly: readOnly, disabled: disabled, tabIndex: -1, "aria-hidden": 'true', children: _jsx(Icon, { name: 'minus' }) }), _jsx(Flex, { container: { alignItems: 'center', wrap: 'nowrap', justify: 'center' }, item: { grow: 1 }, ref: containerRef, onClick: (e) => {
+    const stepper = (_jsxs(Flex, { as: StyledStepperInput, hasSuggestion: status === 'pending' && !!onResolveSuggestion, container: { alignItems: 'center', wrap: 'nowrap' }, status: status, readOnly: readOnly, disabled: disabled, size: formattedValue?.length, children: [_jsx(Button, { "data-testid": testIds.minus, variant: 'simple', icon: true, onClick: onMinusClick, readOnly: readOnly, disabled: disabled, tabIndex: -1, "aria-hidden": 'true', children: _jsx(Icon, { name: 'minus' }) }), _jsx(Flex, { container: { alignItems: 'center', wrap: 'nowrap', justify: 'center' }, item: { grow: 1 }, ref: containerRef, onClick: (e) => {
                     if (e.target === containerRef.current)
                         inputRef?.current?.focus();
-                }, children: _jsx(StyledInput, { ...{ onChange: onInputChange, id, readOnly, required, disabled, status, ...restProps }, inputMode: 'numeric', ref: inputRef, value: formattedValue, onKeyDown: onKeyDown, onFocus: onInputFocusEvent, onBlur: onInputFocusEvent, "aria-label": `${ariaLabel || label}. ${unit ? t('measured_in', [unit]) : ''}`, maxLength: 16, autoFocus: autoFocus, "aria-describedby": `${id}-info` }) }), _jsx(Button, { variant: 'simple', icon: true, onClick: onPlusClick, readOnly: readOnly, disabled: disabled, tabIndex: -1, "aria-hidden": 'true', children: _jsx(Icon, { name: 'plus' }) })] }));
-    const Comp = variant === 'stepper' && !readOnly ? StepperComp : NumberInputComp;
+                }, children: _jsx(StyledInput, { "data-testid": testIds.control, ...{ onChange: onInputChange, id, readOnly, required, disabled, status, ...restProps }, inputMode: 'numeric', ref: inputRef, value: formattedValue, onKeyDown: onKeyDown, onFocus: onInputFocusEvent, onBlur: onInputFocusEvent, "aria-label": `${ariaLabel || label}. ${unit ? t('measured_in', [unit]) : ''}`, maxLength: 16, autoFocus: autoFocus, "aria-describedby": `${id}-info` }) }), _jsx(Button, { "data-testid": testIds.plus, variant: 'simple', icon: true, onClick: onPlusClick, readOnly: readOnly, disabled: disabled, tabIndex: -1, "aria-hidden": 'true', children: _jsx(Icon, { name: 'plus' }) })] }));
+    const Comp = variant === 'stepper' && !readOnly ? stepper : numberInput;
     return label ? (_jsx(FormField, { ...{
+            testId: testIds,
             label,
             labelHidden,
             id,
@@ -110,5 +114,5 @@ const NumberInput = forwardRef((props, ref) => {
             onResolveSuggestion
         }, children: Comp })) : (Comp);
 });
-export default NumberInput;
+export default withTestIds(NumberInput, getNumberInputTestIds);
 //# sourceMappingURL=NumberInput.js.map

package/lib/components/Number/NumberInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.js","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeEvent,\n  forwardRef,\n  FunctionComponent,\n  KeyboardEvent,\n  PropsWithoutRef,\n  useCallback,\n  useMemo,\n  useRef,\n  FocusEvent\n} from 'react';\n\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as plusIcon from '../Icon/icons/plus.icon';\nimport * as minusIcon from '../Icon/icons/minus.icon';\nimport Flex from '../Flex';\nimport FormField from '../FormField';\nimport { ForwardProps } from '../../types';\nimport {\n  useConfiguration,\n  useConsolidatedRef,\n  useI18n,\n  useInputFormatter,\n  useUID\n} from '../../hooks';\nimport StyledInput from '../Input/Input.styles';\n\nimport StyledNumberInput, { StyledStepperInput } from './NumberInput.styles';\nimport { NumberInputProps, NUMBER_MAX_DECIMAL_PLACES } from './NumberInput.types';\nimport {\n  getCleanedValue,\n  getDecimalSign,\n  getDecrementedValue,\n  getFormattedValue,\n  getIncrementedValue\n} from './utils';\n\nregisterIcon(minusIcon, plusIcon);\n\nconst NumberInput: FunctionComponent<NumberInputProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<NumberInputProps>, ref: NumberInputProps['ref']) => {\n    const uid = useUID();\n    const {\n      id = uid,\n      status,\n      label,\n      labelHidden,\n      info,\n      required,\n      disabled,\n      readOnly,\n      additionalInfo,\n      value = '',\n      onChange,\n      onFocus,\n      onBlur,\n      onResolveSuggestion,\n      unit,\n      showDecimal = true,\n      numberOfDecimals: numberOfDecimalsProp = NUMBER_MAX_DECIMAL_PLACES,\n      showGroupSeparators = true,\n      min = Number.MIN_SAFE_INTEGER,\n      max = Number.MAX_SAFE_INTEGER,\n      step = 1,\n      variant,\n      'aria-label': ariaLabel,\n      autoFocus,\n      ...restProps\n    } = props;\n\n    const { locale } = useConfiguration();\n    const inputRef = useConsolidatedRef(ref);\n    const containerRef = useRef<HTMLElement>(null);\n    const maximumFractionDigits = showDecimal ? numberOfDecimalsProp : 0;\n    const decimalSign = useMemo(() => getDecimalSign(locale), [locale]);\n\n    const formatValue = useCallback(\n      number => {\n        return getFormattedValue(number, locale, unit, {\n          useGrouping: showGroupSeparators,\n          maximumFractionDigits\n        });\n      },\n      [locale, unit, showGroupSeparators, maximumFractionDigits]\n    );\n\n    const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n      const inputValue = e.target.value;\n      const cleanedInputValue = getCleanedValue(inputValue, decimalSign, maximumFractionDigits);\n      if (cleanedInputValue === value) return;\n      onChange(cleanedInputValue);\n    };\n\n    const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n      if (readOnly) return;\n      const input = e.currentTarget;\n      switch (e.key) {\n        case 'ArrowUp':\n          e.preventDefault();\n          onChange(getIncrementedValue(value, min, max, step));\n          break;\n        case 'ArrowDown':\n          e.preventDefault();\n          onChange(getDecrementedValue(value, min, max, step));\n          break;\n        case decimalSign:\n          if (input.value.includes(decimalSign)) {\n            if (input.selectionStart && input.value.charAt(input.selectionStart) === decimalSign) {\n              input.setSelectionRange(input.selectionStart + 1, input.selectionStart + 1);\n            }\n            e.preventDefault();\n          } else if (\n            input.selectionStart !== null &&\n            !input.value.charAt(input.selectionStart - 1).match(/\\d/)\n          ) {\n            onChange(\n              getCleanedValue(`${input.value}0${decimalSign}`, decimalSign, maximumFractionDigits)\n            );\n            e.preventDefault();\n          }\n          break;\n        case '-':\n          if (value.startsWith('-')) e.preventDefault();\n          break;\n        default:\n      }\n    };\n\n    const onInputFocusEvent = (e: FocusEvent<HTMLInputElement>) => {\n      let parsableValue = value;\n\n      if (Number.isNaN(parseFloat(value))) {\n        parsableValue = '';\n      } else if (value?.endsWith('.')) {\n        parsableValue = value.slice(0, -1);\n      }\n\n      if (e.type === 'focus') onFocus?.(parsableValue);\n      else {\n        if (parsableValue !== value) {\n          onChange(parsableValue);\n        }\n\n        onBlur?.(parsableValue);\n      }\n    };\n\n    const formattedValue = useInputFormatter(inputRef, value, formatValue, `\\\\p{N}${decimalSign}-`);\n\n    const t = useI18n();\n\n    const NumberInputComp = (\n      <Flex\n        as={StyledNumberInput}\n        hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n        container={{ alignItems: 'center', wrap: 'nowrap' }}\n        status={status}\n        readOnly={readOnly}\n        disabled={disabled}\n      >\n        <StyledInput\n          {...{ onChange: onInputChange, id, readOnly, required, disabled, status, ...restProps }}\n          inputMode='numeric'\n          ref={inputRef}\n          value={formattedValue}\n          onKeyDown={onKeyDown}\n          onFocus={onInputFocusEvent}\n          onBlur={onInputFocusEvent}\n          aria-label={`${ariaLabel || label}. ${unit ? t('measured_in', [unit]) : ''}`}\n          maxLength={16}\n          autoFocus={autoFocus}\n          aria-describedby={info ? `${id}-info` : undefined}\n        />\n      </Flex>\n    );\n\n    const onMinusClick = () => {\n      onChange?.(getDecrementedValue(value, min, max, step));\n    };\n\n    const onPlusClick = () => {\n      onChange?.(getIncrementedValue(value, min, max, step));\n    };\n\n    const StepperComp = (\n      <Flex\n        as={StyledStepperInput}\n        hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n        container={{ alignItems: 'center', wrap: 'nowrap' }}\n        status={status}\n        readOnly={readOnly}\n        disabled={disabled}\n        size={formattedValue?.length}\n      >\n        <Button\n          variant='simple'\n          icon\n          onClick={onMinusClick}\n          readOnly={readOnly}\n          disabled={disabled}\n          tabIndex={-1}\n          aria-hidden='true'\n        >\n          <Icon name='minus' />\n        </Button>\n        <Flex\n          container={{ alignItems: 'center', wrap: 'nowrap', justify: 'center' }}\n          item={{ grow: 1 }}\n          ref={containerRef}\n          onClick={(e: MouseEvent) => {\n            if (e.target === containerRef.current) inputRef?.current?.focus();\n          }}\n        >\n          <StyledInput\n            {...{ onChange: onInputChange, id, readOnly, required, disabled, status, ...restProps }}\n            inputMode='numeric'\n            ref={inputRef}\n            value={formattedValue}\n            onKeyDown={onKeyDown}\n            onFocus={onInputFocusEvent}\n            onBlur={onInputFocusEvent}\n            aria-label={`${ariaLabel || label}. ${unit ? t('measured_in', [unit]) : ''}`}\n            maxLength={16}\n            autoFocus={autoFocus}\n            aria-describedby={`${id}-info`}\n          />\n        </Flex>\n        <Button\n          variant='simple'\n          icon\n          onClick={onPlusClick}\n          readOnly={readOnly}\n          disabled={disabled}\n          tabIndex={-1}\n          aria-hidden='true'\n        >\n          <Icon name='plus' />\n        </Button>\n      </Flex>\n    );\n\n    const Comp = variant === 'stepper' && !readOnly ? StepperComp : NumberInputComp;\n\n    return label ? (\n      <FormField\n        {...{\n          label,\n          labelHidden,\n          id,\n          info,\n          status,\n          required,\n          readOnly,\n          disabled,\n          additionalInfo,\n          onResolveSuggestion\n        }}\n      >\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default NumberInput;\n"]}
+{"version":3,"file":"NumberInput.js","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeEvent,\n  forwardRef,\n  FunctionComponent,\n  KeyboardEvent,\n  PropsWithoutRef,\n  useCallback,\n  useMemo,\n  useRef,\n  FocusEvent\n} from 'react';\n\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as plusIcon from '../Icon/icons/plus.icon';\nimport * as minusIcon from '../Icon/icons/minus.icon';\nimport Flex from '../Flex';\nimport FormField from '../FormField';\nimport { ForwardProps } from '../../types';\nimport {\n  useConfiguration,\n  useConsolidatedRef,\n  useI18n,\n  useInputFormatter,\n  useTestIds,\n  useUID\n} from '../../hooks';\nimport StyledInput from '../Input/Input.styles';\nimport { withTestIds } from '../../utils';\n\nimport StyledNumberInput, { StyledStepperInput } from './NumberInput.styles';\nimport { NumberInputProps, NUMBER_MAX_DECIMAL_PLACES } from './NumberInput.types';\nimport {\n  getCleanedValue,\n  getDecimalSign,\n  getDecrementedValue,\n  getFormattedValue,\n  getIncrementedValue\n} from './utils';\nimport { getNumberInputTestIds } from './Number.test-ids';\n\nregisterIcon(minusIcon, plusIcon);\n\nconst NumberInput: FunctionComponent<NumberInputProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<NumberInputProps>, ref: NumberInputProps['ref']) => {\n    const uid = useUID();\n    const {\n      testId,\n      id = uid,\n      status,\n      label,\n      labelHidden,\n      info,\n      required,\n      disabled,\n      readOnly,\n      additionalInfo,\n      value = '',\n      onChange,\n      onFocus,\n      onBlur,\n      onResolveSuggestion,\n      unit,\n      showDecimal = true,\n      numberOfDecimals: numberOfDecimalsProp = NUMBER_MAX_DECIMAL_PLACES,\n      showGroupSeparators = true,\n      min = Number.MIN_SAFE_INTEGER,\n      max = Number.MAX_SAFE_INTEGER,\n      step = 1,\n      variant,\n      'aria-label': ariaLabel,\n      autoFocus,\n      ...restProps\n    } = props;\n\n    const testIds = useTestIds(testId, getNumberInputTestIds);\n\n    const { locale } = useConfiguration();\n    const inputRef = useConsolidatedRef(ref);\n    const containerRef = useRef<HTMLElement>(null);\n    const maximumFractionDigits = showDecimal ? numberOfDecimalsProp : 0;\n    const decimalSign = useMemo(() => getDecimalSign(locale), [locale]);\n\n    const formatValue = useCallback(\n      number => {\n        return getFormattedValue(number, locale, unit, {\n          useGrouping: showGroupSeparators,\n          maximumFractionDigits\n        });\n      },\n      [locale, unit, showGroupSeparators, maximumFractionDigits]\n    );\n\n    const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n      const inputValue = e.target.value;\n      const cleanedInputValue = getCleanedValue(inputValue, decimalSign, maximumFractionDigits);\n      if (cleanedInputValue === value) return;\n      onChange(cleanedInputValue);\n    };\n\n    const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n      if (readOnly) return;\n      const input = e.currentTarget;\n      switch (e.key) {\n        case 'ArrowUp':\n          e.preventDefault();\n          onChange(getIncrementedValue(value, min, max, step));\n          break;\n        case 'ArrowDown':\n          e.preventDefault();\n          onChange(getDecrementedValue(value, min, max, step));\n          break;\n        case decimalSign:\n          if (input.value.includes(decimalSign)) {\n            if (input.selectionStart && input.value.charAt(input.selectionStart) === decimalSign) {\n              input.setSelectionRange(input.selectionStart + 1, input.selectionStart + 1);\n            }\n            e.preventDefault();\n          } else if (\n            input.selectionStart !== null &&\n            !input.value.charAt(input.selectionStart - 1).match(/\\d/)\n          ) {\n            onChange(\n              getCleanedValue(`${input.value}0${decimalSign}`, decimalSign, maximumFractionDigits)\n            );\n            e.preventDefault();\n          }\n          break;\n        case '-':\n          if (value.startsWith('-')) e.preventDefault();\n          break;\n        default:\n      }\n    };\n\n    const onInputFocusEvent = (e: FocusEvent<HTMLInputElement>) => {\n      let parsableValue = value;\n\n      if (Number.isNaN(parseFloat(value))) {\n        parsableValue = '';\n      } else if (value?.endsWith('.')) {\n        parsableValue = value.slice(0, -1);\n      }\n\n      if (e.type === 'focus') onFocus?.(parsableValue);\n      else {\n        if (parsableValue !== value) {\n          onChange(parsableValue);\n        }\n\n        onBlur?.(parsableValue);\n      }\n    };\n\n    const formattedValue = useInputFormatter(inputRef, value, formatValue, `\\\\p{N}${decimalSign}-`);\n\n    const t = useI18n();\n\n    const numberInput = (\n      <Flex\n        data-testid={testIds.root}\n        as={StyledNumberInput}\n        hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n        container={{ alignItems: 'center', wrap: 'nowrap' }}\n        status={status}\n        readOnly={readOnly}\n        disabled={disabled}\n      >\n        <StyledInput\n          data-testid={testIds.control}\n          {...{ onChange: onInputChange, id, readOnly, required, disabled, status, ...restProps }}\n          inputMode='numeric'\n          ref={inputRef}\n          value={formattedValue}\n          onKeyDown={onKeyDown}\n          onFocus={onInputFocusEvent}\n          onBlur={onInputFocusEvent}\n          aria-label={`${ariaLabel || label}. ${unit ? t('measured_in', [unit]) : ''}`}\n          maxLength={16}\n          autoFocus={autoFocus}\n          aria-describedby={info ? `${id}-info` : undefined}\n        />\n      </Flex>\n    );\n\n    const onMinusClick = () => {\n      onChange?.(getDecrementedValue(value, min, max, step));\n    };\n\n    const onPlusClick = () => {\n      onChange?.(getIncrementedValue(value, min, max, step));\n    };\n\n    const stepper = (\n      <Flex\n        as={StyledStepperInput}\n        hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n        container={{ alignItems: 'center', wrap: 'nowrap' }}\n        status={status}\n        readOnly={readOnly}\n        disabled={disabled}\n        size={formattedValue?.length}\n      >\n        <Button\n          data-testid={testIds.minus}\n          variant='simple'\n          icon\n          onClick={onMinusClick}\n          readOnly={readOnly}\n          disabled={disabled}\n          tabIndex={-1}\n          aria-hidden='true'\n        >\n          <Icon name='minus' />\n        </Button>\n        <Flex\n          container={{ alignItems: 'center', wrap: 'nowrap', justify: 'center' }}\n          item={{ grow: 1 }}\n          ref={containerRef}\n          onClick={(e: MouseEvent) => {\n            if (e.target === containerRef.current) inputRef?.current?.focus();\n          }}\n        >\n          <StyledInput\n            data-testid={testIds.control}\n            {...{ onChange: onInputChange, id, readOnly, required, disabled, status, ...restProps }}\n            inputMode='numeric'\n            ref={inputRef}\n            value={formattedValue}\n            onKeyDown={onKeyDown}\n            onFocus={onInputFocusEvent}\n            onBlur={onInputFocusEvent}\n            aria-label={`${ariaLabel || label}. ${unit ? t('measured_in', [unit]) : ''}`}\n            maxLength={16}\n            autoFocus={autoFocus}\n            aria-describedby={`${id}-info`}\n          />\n        </Flex>\n        <Button\n          data-testid={testIds.plus}\n          variant='simple'\n          icon\n          onClick={onPlusClick}\n          readOnly={readOnly}\n          disabled={disabled}\n          tabIndex={-1}\n          aria-hidden='true'\n        >\n          <Icon name='plus' />\n        </Button>\n      </Flex>\n    );\n\n    const Comp = variant === 'stepper' && !readOnly ? stepper : numberInput;\n\n    return label ? (\n      <FormField\n        {...{\n          testId: testIds,\n          label,\n          labelHidden,\n          id,\n          info,\n          status,\n          required,\n          readOnly,\n          disabled,\n          additionalInfo,\n          onResolveSuggestion\n        }}\n      >\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default withTestIds(NumberInput, getNumberInputTestIds);\n"]}

package/lib/components/Number/NumberInput.styles.d.ts

@@ -1,10 +1,10 @@
 interface StyledStepperProps {
     size: number;
 }
-export declare const StyledStepperInput: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../..").OmitStrict<import("../FormControl").FormControlProps, never> & Required<Pick<import("../FormControl").FormControlProps, never>> & {
+export declare const StyledStepperInput: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<import("../FormControl").FormControlProps, keyof import("../FormControl").FormControlProps> & Required<Pick<import("../FormControl").FormControlProps, never>> & {
     hasSuggestion?: boolean | undefined;
 } & StyledStepperProps, never>;
-declare const StyledNumberInput: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../..").OmitStrict<import("../FormControl").FormControlProps, never> & Required<Pick<import("../FormControl").FormControlProps, never>> & {
+declare const StyledNumberInput: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<import("../FormControl").FormControlProps, keyof import("../FormControl").FormControlProps> & Required<Pick<import("../FormControl").FormControlProps, never>> & {
     hasSuggestion?: boolean | undefined;
 }, never>;
 export default StyledNumberInput;

package/lib/components/Number/NumberInput.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.styles.ts"],"names":[],"mappings":"AASA,UAAU,kBAAkB;IAC1B,IAAI,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,kBAAkB;;8BAqD7B,CAAC;AAIH,QAAA,MAAM,iBAAiB;;SAoCrB,CAAC;AAIH,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"NumberInput.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.styles.ts"],"names":[],"mappings":"AASA,UAAU,kBAAkB;IAC1B,IAAI,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,kBAAkB;;8BAuD7B,CAAC;AAIH,QAAA,MAAM,iBAAiB;;SAqCrB,CAAC;AAIH,eAAe,iBAAiB,CAAC"}

package/lib/components/Number/NumberInput.styles.js

@@ -6,7 +6,7 @@ import { defaultThemeProp } from '../../theme';
 import { StyledButton } from '../Button';
 import { StyledFlex } from '../Flex';
 export const StyledStepperInput = styled(StyledFormControl)(props => {
-    const { theme: { base: { spacing, 'border-radius': baseBorderRadius, palette }, components: { input: { height }, 'form-control': { 'border-radius': formBorderRadius, 'foreground-color': fgColor, 'border-width': borderWidth, ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow } } } }, size } = props;
+    const { theme: { base: { spacing, 'border-radius': baseBorderRadius, 'hit-area': hitArea, palette }, components: { input: { height }, 'form-control': { 'border-radius': formBorderRadius, 'foreground-color': fgColor, 'border-width': borderWidth, ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow } } } }, size } = props;
     return css `
     &:focus-within:not([disabled]) {
       border-color: ${focusBorderColor};
@@ -25,6 +25,8 @@ export const StyledStepperInput = styled(StyledFormControl)(props => {
       border: 0;
       padding: 0;
       background-color: ${palette['primary-background']};
+      height: calc(${height} - 2 * ${borderWidth});
+      min-height: calc(${hitArea['mouse-min']} - 2 * ${borderWidth});
       &:focus:not([disabled]) {
         box-shadow: none;
       }
@@ -40,14 +42,14 @@ export const StyledStepperInput = styled(StyledFormControl)(props => {
       &:enabled {
         color: ${fgColor};
       }
-      min-height: calc(${height} - 2 * ${borderWidth});
       height: calc(${height} - 2 * ${borderWidth});
+      min-height: calc(${hitArea['mouse-min']} - 2 * ${borderWidth});
     }
   `;
 });
 StyledStepperInput.defaultProps = defaultThemeProp;
 const StyledNumberInput = styled(StyledFormControl)(props => {
-    const { readOnly, theme: { base: { spacing, palette }, components: { 'form-control': { 'foreground-color': fgColor, ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow }, ':read-only': { 'background-color': readOnlyBackgroundColor } } } } } = props;
+    const { theme: { base: { spacing, 'hit-area': hitArea }, components: { 'form-control': { ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow }, 'border-width': borderWidth }, input: { height } } } } = props;
     return css `
     padding: 0 calc(0.5 * ${spacing});
     &:focus-within:not([disabled]) {
@@ -55,11 +57,13 @@ const StyledNumberInput = styled(StyledFormControl)(props => {
       box-shadow: ${shadow};
     }
     ${StyledInput} {
-      color: ${fgColor};
+      color: inherit;
       outline: none;
       border: 0;
       padding: 0 calc(0.5 * ${spacing});
-      background-color: ${readOnly ? readOnlyBackgroundColor : palette['primary-background']};
+      background-color: initial;
+      height: calc(${height} - 2 * ${borderWidth});
+      min-height: calc(${hitArea['mouse-min']} - 2 * ${borderWidth});
       &:focus:not([disabled]) {
         box-shadow: none;
       }

package/lib/components/Number/NumberInput.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.styles.js","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAMrC,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAqB,KAAK,CAAC,EAAE;IACtF,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,OAAO,EAAE,EAC7D,UAAU,EAAE,EACV,KAAK,EAAE,EAAE,MAAM,EAAE,EACjB,cAAc,EAAE,EACd,eAAe,EAAE,gBAAgB,EACjC,kBAAkB,EAAE,OAAO,EAC3B,cAAc,EAAE,WAAW,EAC3B,QAAQ,EAAE,EAAE,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,EAAE,EACrE,EACF,EACF,EACD,IAAI,EACL,GAAG,KAAK,CAAC;IACV,OAAO,GAAG,CAAA;;sBAEU,gBAAgB;oBAClB,MAAM;;MAEpB,UAAU;;6BAEa,OAAO;2BACT,OAAO;;MAE5B,WAAW;eACF,OAAO;eACP,IAAI;;;;;0BAKO,OAAO,CAAC,oBAAoB,CAAC;;;;;MAKjD,UAAU;8BACc,OAAO;;;QAG7B,YAAY;4BACQ,gBAAgB,MAAM,gBAAgB;;;;iBAIjD,OAAO;;yBAEC,MAAM,UAAU,WAAW;qBAC/B,MAAM,UAAU,WAAW;;GAE7C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,iBAAiB,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC,KAAK,CAAC,EAAE;IAC1D,MAAM,EACJ,QAAQ,EACR,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,EAC1B,UAAU,EAAE,EACV,cAAc,EAAE,EACd,kBAAkB,EAAE,OAAO,EAC3B,QAAQ,EAAE,EAAE,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,EAAE,EACpE,YAAY,EAAE,EAAE,kBAAkB,EAAE,uBAAuB,EAAE,EAC9D,EACF,EACF,EACF,GAAG,KAAK,CAAC;IAEV,OAAO,GAAG,CAAA;4BACgB,OAAO;;sBAEb,gBAAgB;oBAClB,MAAM;;MAEpB,WAAW;eACF,OAAO;;;8BAGQ,OAAO;0BACX,QAAQ,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,OAAO,CAAC,oBAAoB,CAAC;;;;;MAKtF,UAAU;8BACc,OAAO;;;GAGlC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,eAAe,iBAAiB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { StyledFormControl } from '../FormControl';\nimport StyledInput from '../Input/Input.styles';\nimport { StyledText } from '../Text/Text';\nimport { defaultThemeProp } from '../../theme';\nimport { StyledButton } from '../Button';\nimport { StyledFlex } from '../Flex';\n\ninterface StyledStepperProps {\n  size: number;\n}\n\nexport const StyledStepperInput = styled(StyledFormControl)<StyledStepperProps>(props => {\n  const {\n    theme: {\n      base: { spacing, 'border-radius': baseBorderRadius, palette },\n      components: {\n        input: { height },\n        'form-control': {\n          'border-radius': formBorderRadius,\n          'foreground-color': fgColor,\n          'border-width': borderWidth,\n          ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow }\n        }\n      }\n    },\n    size\n  } = props;\n  return css`\n    &:focus-within:not([disabled]) {\n      border-color: ${focusBorderColor};\n      box-shadow: ${shadow};\n    }\n    ${StyledFlex} {\n      overflow: auto;\n      margin-inline-start: ${spacing};\n      margin-inline-end: ${spacing};\n    }\n    ${StyledInput} {\n      color: ${fgColor};\n      width: ${size}ch;\n      min-width: 1ch;\n      outline: none;\n      border: 0;\n      padding: 0;\n      background-color: ${palette['primary-background']};\n      &:focus:not([disabled]) {\n        box-shadow: none;\n      }\n    }\n    ${StyledText} {\n      padding: 0 calc(0.5 * ${spacing});\n      white-space: nowrap;\n    }\n    > ${StyledButton} {\n      border-radius: calc(${baseBorderRadius} * ${formBorderRadius});\n      margin-inline-start: auto;\n      border: 0;\n      &:enabled {\n        color: ${fgColor};\n      }\n      min-height: calc(${height} - 2 * ${borderWidth});\n      height: calc(${height} - 2 * ${borderWidth});\n    }\n  `;\n});\n\nStyledStepperInput.defaultProps = defaultThemeProp;\n\nconst StyledNumberInput = styled(StyledFormControl)(props => {\n  const {\n    readOnly,\n    theme: {\n      base: { spacing, palette },\n      components: {\n        'form-control': {\n          'foreground-color': fgColor,\n          ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow },\n          ':read-only': { 'background-color': readOnlyBackgroundColor }\n        }\n      }\n    }\n  } = props;\n\n  return css`\n    padding: 0 calc(0.5 * ${spacing});\n    &:focus-within:not([disabled]) {\n      border-color: ${focusBorderColor};\n      box-shadow: ${shadow};\n    }\n    ${StyledInput} {\n      color: ${fgColor};\n      outline: none;\n      border: 0;\n      padding: 0 calc(0.5 * ${spacing});\n      background-color: ${readOnly ? readOnlyBackgroundColor : palette['primary-background']};\n      &:focus:not([disabled]) {\n        box-shadow: none;\n      }\n    }\n    ${StyledText} {\n      padding: 0 calc(0.5 * ${spacing});\n      white-space: nowrap;\n    }\n  `;\n});\n\nStyledNumberInput.defaultProps = defaultThemeProp;\n\nexport default StyledNumberInput;\n"]}
+{"version":3,"file":"NumberInput.styles.js","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAMrC,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAqB,KAAK,CAAC,EAAE;IACtF,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,EAClF,UAAU,EAAE,EACV,KAAK,EAAE,EAAE,MAAM,EAAE,EACjB,cAAc,EAAE,EACd,eAAe,EAAE,gBAAgB,EACjC,kBAAkB,EAAE,OAAO,EAC3B,cAAc,EAAE,WAAW,EAC3B,QAAQ,EAAE,EAAE,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,EAAE,EACrE,EACF,EACF,EACD,IAAI,EACL,GAAG,KAAK,CAAC;IACV,OAAO,GAAG,CAAA;;sBAEU,gBAAgB;oBAClB,MAAM;;MAEpB,UAAU;;6BAEa,OAAO;2BACT,OAAO;;MAE5B,WAAW;eACF,OAAO;eACP,IAAI;;;;;0BAKO,OAAO,CAAC,oBAAoB,CAAC;qBAClC,MAAM,UAAU,WAAW;yBACvB,OAAO,CAAC,WAAW,CAAC,UAAU,WAAW;;;;;MAK5D,UAAU;8BACc,OAAO;;;QAG7B,YAAY;4BACQ,gBAAgB,MAAM,gBAAgB;;;;iBAIjD,OAAO;;qBAEH,MAAM,UAAU,WAAW;yBACvB,OAAO,CAAC,WAAW,CAAC,UAAU,WAAW;;GAE/D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,iBAAiB,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC,KAAK,CAAC,EAAE;IAC1D,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,EACtC,UAAU,EAAE,EACV,cAAc,EAAE,EACd,QAAQ,EAAE,EAAE,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,EAAE,EACpE,cAAc,EAAE,WAAW,EAC5B,EACD,KAAK,EAAE,EAAE,MAAM,EAAE,EAClB,EACF,EACF,GAAG,KAAK,CAAC;IAEV,OAAO,GAAG,CAAA;4BACgB,OAAO;;sBAEb,gBAAgB;oBAClB,MAAM;;MAEpB,WAAW;;;;8BAIa,OAAO;;qBAEhB,MAAM,UAAU,WAAW;yBACvB,OAAO,CAAC,WAAW,CAAC,UAAU,WAAW;;;;;MAK5D,UAAU;8BACc,OAAO;;;GAGlC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,eAAe,iBAAiB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { StyledFormControl } from '../FormControl';\nimport StyledInput from '../Input/Input.styles';\nimport { StyledText } from '../Text/Text';\nimport { defaultThemeProp } from '../../theme';\nimport { StyledButton } from '../Button';\nimport { StyledFlex } from '../Flex';\n\ninterface StyledStepperProps {\n  size: number;\n}\n\nexport const StyledStepperInput = styled(StyledFormControl)<StyledStepperProps>(props => {\n  const {\n    theme: {\n      base: { spacing, 'border-radius': baseBorderRadius, 'hit-area': hitArea, palette },\n      components: {\n        input: { height },\n        'form-control': {\n          'border-radius': formBorderRadius,\n          'foreground-color': fgColor,\n          'border-width': borderWidth,\n          ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow }\n        }\n      }\n    },\n    size\n  } = props;\n  return css`\n    &:focus-within:not([disabled]) {\n      border-color: ${focusBorderColor};\n      box-shadow: ${shadow};\n    }\n    ${StyledFlex} {\n      overflow: auto;\n      margin-inline-start: ${spacing};\n      margin-inline-end: ${spacing};\n    }\n    ${StyledInput} {\n      color: ${fgColor};\n      width: ${size}ch;\n      min-width: 1ch;\n      outline: none;\n      border: 0;\n      padding: 0;\n      background-color: ${palette['primary-background']};\n      height: calc(${height} - 2 * ${borderWidth});\n      min-height: calc(${hitArea['mouse-min']} - 2 * ${borderWidth});\n      &:focus:not([disabled]) {\n        box-shadow: none;\n      }\n    }\n    ${StyledText} {\n      padding: 0 calc(0.5 * ${spacing});\n      white-space: nowrap;\n    }\n    > ${StyledButton} {\n      border-radius: calc(${baseBorderRadius} * ${formBorderRadius});\n      margin-inline-start: auto;\n      border: 0;\n      &:enabled {\n        color: ${fgColor};\n      }\n      height: calc(${height} - 2 * ${borderWidth});\n      min-height: calc(${hitArea['mouse-min']} - 2 * ${borderWidth});\n    }\n  `;\n});\n\nStyledStepperInput.defaultProps = defaultThemeProp;\n\nconst StyledNumberInput = styled(StyledFormControl)(props => {\n  const {\n    theme: {\n      base: { spacing, 'hit-area': hitArea },\n      components: {\n        'form-control': {\n          ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow },\n          'border-width': borderWidth\n        },\n        input: { height }\n      }\n    }\n  } = props;\n\n  return css`\n    padding: 0 calc(0.5 * ${spacing});\n    &:focus-within:not([disabled]) {\n      border-color: ${focusBorderColor};\n      box-shadow: ${shadow};\n    }\n    ${StyledInput} {\n      color: inherit;\n      outline: none;\n      border: 0;\n      padding: 0 calc(0.5 * ${spacing});\n      background-color: initial;\n      height: calc(${height} - 2 * ${borderWidth});\n      min-height: calc(${hitArea['mouse-min']} - 2 * ${borderWidth});\n      &:focus:not([disabled]) {\n        box-shadow: none;\n      }\n    }\n    ${StyledText} {\n      padding: 0 calc(0.5 * ${spacing});\n      white-space: nowrap;\n    }\n  `;\n});\n\nStyledNumberInput.defaultProps = defaultThemeProp;\n\nexport default StyledNumberInput;\n"]}

package/lib/components/Number/NumberInput.types.d.ts

@@ -1,7 +1,7 @@
 import { Ref } from 'react';
-import { FormControlProps } from '../FormControl';
-import { BaseProps, NoChildrenProp } from '../../types';
-export interface NumberProps extends BaseProps, NoChildrenProp {
+import { FormControlProps, HandleValue } from '../FormControl';
+import { BaseProps, NoChildrenProp, TestIdProp } from '../../types';
+export interface NumberProps extends BaseProps, NoChildrenProp, TestIdProp {
     /**
      * Sets DOM id for the control and associates label element via 'for' attribute.
      * If an id is not pass, a random id will be generated for any render.
@@ -117,6 +117,8 @@ export interface NumberRangeInputProps extends NumberProps {
     fromAdditionalInfo?: FormControlProps['additionalInfo'];
     /** Pass an object with "heading" and "content" properties to show AdditionalInfo for second part of NumberRangeInput. */
     toAdditionalInfo?: FormControlProps['additionalInfo'];
+    /** Imperative handle */
+    handle?: Ref<HandleValue>;
 }
 /** Maximum fraction digits is 20. */
 export declare const NUMBER_MAX_DECIMAL_PLACES = 20;

package/lib/components/Number/NumberInput.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.types.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"NumberInput.types.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.types.ts"],"names":[],"mappings":"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"}

package/lib/components/Number/NumberInput.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.types.js","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.types.ts"],"names":[],"mappings":"AAiHA,qCAAqC;AACrC,MAAM,CAAC,MAAM,yBAAyB,GAAG,EAAE,CAAC","sourcesContent":["import { Ref } from 'react';\n\nimport { FormControlProps } from '../FormControl';\nimport { BaseProps, NoChildrenProp } from '../../types';\n\nexport interface NumberProps extends BaseProps, NoChildrenProp {\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /**\n   * Visually hides the label region.\n   * @default false\n   */\n  labelHidden?: FormControlProps['labelHidden'];\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: FormControlProps['info'];\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /** Placeholder text. The browser defaults to an empty string. */\n  placeholder?: string;\n  /** Disable the control. The browser defaults to false. */\n  disabled?: FormControlProps['disabled'];\n  /** Makes the component non editable and non clickable. The browser defaults to false. */\n  readOnly?: FormControlProps['readOnly'];\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /** Button when clicked will show additional information */\n  additionalInfo?: FormControlProps['additionalInfo'];\n  /** Defines unit of the number, like 'kg', 'miles' or '%'. */\n  unit?: string;\n  /**\n  *\n /** Determines whether decimal places should be shown. The value is rounded if true.\n  * @default true\n  */\n  showDecimal?: boolean;\n  /** Determines the maximum number of decimal places. The value is rounded to the number of places.\n   * @default variable NUMBER_MAX_DECIMAL_PLACES. Recommended minimum: 1.\n   */\n  numberOfDecimals?: number;\n  /** Determines whether group separators should be shown.\n   * @default true\n   */\n  showGroupSeparators?: boolean;\n  /** The minimum value to accept for this input.\n   *  This value must be less than or equal to the value of the max attribute.\n   *  @default Number.MIN_SAFE_INTEGER\n   */\n  min?: number;\n  /**\n   * The maximum value to accept for this input.\n   *  This value must be greater than or equal to the value of the min attribute.\n   *  @default Number.MAX_SAFE_INTEGER\n   */\n  max?: number;\n  /** A stepping interval to use when using up and down arrows to adjust the value.\n   * @default 1\n   */\n  step?: number;\n  /**\n   * Component variation. Might be rendered as regular input or stepper.\n   * @default 'default'\n   */\n  variant?: 'default' | 'stepper';\n  /** Optional manual override for generated aria label */\n  'aria-label'?: string;\n  /** Automatically focuses the input on render. */\n  autoFocus?: boolean;\n}\n\nexport interface NumberInputProps extends NumberProps {\n  /**\n   * CurrencyInput input value.\n   * Requires an onChange handler to update value.\n   */\n  value?: string;\n  /** Callback fired when input value changes. */\n  onChange: (value: string) => void;\n  /** Callback fired when the component gets focus. */\n  onFocus?: (value: string) => void;\n  /** Callback fired when the component loses focus. */\n  onBlur?: (value: string) => void;\n  /** Callback fired when AI suggestion is accepted/rejected */\n  onResolveSuggestion?: FormControlProps['onResolveSuggestion'];\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLInputElement>;\n}\n\nexport interface NumberRangeInputProps extends NumberProps {\n  /** Range as a tuple of start and end. */\n  value?: { start?: string; end?: string };\n  /** Callback for any modifications to the range */\n  onChange: (value: { start: string; end: string }) => void;\n  /** Callback fired when the component loses focus. */\n  onBlur?: (value: { start: string; end: string }) => void;\n  /** Callback fired when the component gets focus. */\n  onFocus?: (value: { start: string; end: string }) => void;\n  /** Pass a string or a fragment with an Icon and string for first part of NumberRangeInput. */\n  fromLabel?: FormControlProps['label'];\n  /** Pass a string or a fragment with an Icon and string for second part of NumberRangeInput. */\n  toLabel?: FormControlProps['label'];\n  /** Pass an object with \"heading\" and \"content\" properties to show AdditionalInfo for first part of NumberRangeInput. */\n  fromAdditionalInfo?: FormControlProps['additionalInfo'];\n  /** Pass an object with \"heading\" and \"content\" properties to show AdditionalInfo for second part of NumberRangeInput. */\n  toAdditionalInfo?: FormControlProps['additionalInfo'];\n}\n\n/** Maximum fraction digits is 20. */\nexport const NUMBER_MAX_DECIMAL_PLACES = 20;\n"]}
+{"version":3,"file":"NumberInput.types.js","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.types.ts"],"names":[],"mappings":"AAmHA,qCAAqC;AACrC,MAAM,CAAC,MAAM,yBAAyB,GAAG,EAAE,CAAC","sourcesContent":["import { Ref } from 'react';\n\nimport { FormControlProps, HandleValue } from '../FormControl';\nimport { BaseProps, NoChildrenProp, TestIdProp } from '../../types';\n\nexport interface NumberProps extends BaseProps, NoChildrenProp, TestIdProp {\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /**\n   * Visually hides the label region.\n   * @default false\n   */\n  labelHidden?: FormControlProps['labelHidden'];\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: FormControlProps['info'];\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /** Placeholder text. The browser defaults to an empty string. */\n  placeholder?: string;\n  /** Disable the control. The browser defaults to false. */\n  disabled?: FormControlProps['disabled'];\n  /** Makes the component non editable and non clickable. The browser defaults to false. */\n  readOnly?: FormControlProps['readOnly'];\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /** Button when clicked will show additional information */\n  additionalInfo?: FormControlProps['additionalInfo'];\n  /** Defines unit of the number, like 'kg', 'miles' or '%'. */\n  unit?: string;\n  /**\n  *\n /** Determines whether decimal places should be shown. The value is rounded if true.\n  * @default true\n  */\n  showDecimal?: boolean;\n  /** Determines the maximum number of decimal places. The value is rounded to the number of places.\n   * @default variable NUMBER_MAX_DECIMAL_PLACES. Recommended minimum: 1.\n   */\n  numberOfDecimals?: number;\n  /** Determines whether group separators should be shown.\n   * @default true\n   */\n  showGroupSeparators?: boolean;\n  /** The minimum value to accept for this input.\n   *  This value must be less than or equal to the value of the max attribute.\n   *  @default Number.MIN_SAFE_INTEGER\n   */\n  min?: number;\n  /**\n   * The maximum value to accept for this input.\n   *  This value must be greater than or equal to the value of the min attribute.\n   *  @default Number.MAX_SAFE_INTEGER\n   */\n  max?: number;\n  /** A stepping interval to use when using up and down arrows to adjust the value.\n   * @default 1\n   */\n  step?: number;\n  /**\n   * Component variation. Might be rendered as regular input or stepper.\n   * @default 'default'\n   */\n  variant?: 'default' | 'stepper';\n  /** Optional manual override for generated aria label */\n  'aria-label'?: string;\n  /** Automatically focuses the input on render. */\n  autoFocus?: boolean;\n}\n\nexport interface NumberInputProps extends NumberProps {\n  /**\n   * CurrencyInput input value.\n   * Requires an onChange handler to update value.\n   */\n  value?: string;\n  /** Callback fired when input value changes. */\n  onChange: (value: string) => void;\n  /** Callback fired when the component gets focus. */\n  onFocus?: (value: string) => void;\n  /** Callback fired when the component loses focus. */\n  onBlur?: (value: string) => void;\n  /** Callback fired when AI suggestion is accepted/rejected */\n  onResolveSuggestion?: FormControlProps['onResolveSuggestion'];\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLInputElement>;\n}\n\nexport interface NumberRangeInputProps extends NumberProps {\n  /** Range as a tuple of start and end. */\n  value?: { start?: string; end?: string };\n  /** Callback for any modifications to the range */\n  onChange: (value: { start: string; end: string }) => void;\n  /** Callback fired when the component loses focus. */\n  onBlur?: (value: { start: string; end: string }) => void;\n  /** Callback fired when the component gets focus. */\n  onFocus?: (value: { start: string; end: string }) => void;\n  /** Pass a string or a fragment with an Icon and string for first part of NumberRangeInput. */\n  fromLabel?: FormControlProps['label'];\n  /** Pass a string or a fragment with an Icon and string for second part of NumberRangeInput. */\n  toLabel?: FormControlProps['label'];\n  /** Pass an object with \"heading\" and \"content\" properties to show AdditionalInfo for first part of NumberRangeInput. */\n  fromAdditionalInfo?: FormControlProps['additionalInfo'];\n  /** Pass an object with \"heading\" and \"content\" properties to show AdditionalInfo for second part of NumberRangeInput. */\n  toAdditionalInfo?: FormControlProps['additionalInfo'];\n  /** Imperative handle */\n  handle?: Ref<HandleValue>;\n}\n\n/** Maximum fraction digits is 20. */\nexport const NUMBER_MAX_DECIMAL_PLACES = 20;\n"]}

package/lib/components/Number/NumberRangeInput.d.ts

@@ -1,6 +1,8 @@
 import { FunctionComponent } from 'react';
 import type { ForwardProps } from '../../types';
 import type { NumberRangeInputProps } from './NumberInput.types';
-declare const NumberRangeInput: FunctionComponent<NumberRangeInputProps & ForwardProps>;
-export default NumberRangeInput;
+declare const _default: FunctionComponent<NumberRangeInputProps & ForwardProps> & {
+    getTestIds: (testIdProp?: string | undefined) => import("../../types").TestIdsRecord<readonly ["min", "max", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
+};
+export default _default;
 //# sourceMappingURL=NumberRangeInput.d.ts.map

package/lib/components/Number/NumberRangeInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberRangeInput.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberRangeInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAoB,MAAM,OAAO,CAAC;AAExE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAOhD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAEjE,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CA0F7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"NumberRangeInput.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberRangeInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAMlB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAQhD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;;;;AAyLjE,wBAAoE"}

package/lib/components/Number/NumberRangeInput.js

@@ -1,18 +1,56 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback } from 'react';
-import { useConsolidatedRef, useI18n, useFocusWithin } from '../../hooks';
+import { forwardRef, useCallback, useImperativeHandle, useReducer, useRef } from 'react';
+import { useConsolidatedRef, useI18n, useFocusWithin, useTestIds } from '../../hooks';
 import { StyledRangeInputContainer } from '../Input/Input.styles';
 import FormField from '../FormField';
 import Flex from '../Flex';
+import { withTestIds } from '../../utils';
 import NumberInput from './NumberInput';
-const NumberRangeInput = forwardRef(({ value = {}, onChange, onBlur, onFocus, label, fromLabel, toLabel, labelHidden, placeholder, disabled, readOnly, required, unit, showDecimal, numberOfDecimals, showGroupSeparators, min, max, step, variant, fromAdditionalInfo, toAdditionalInfo, autoFocus, ...restProps }, ref) => {
+import { getNumberRangeTestIds } from './Number.test-ids';
+const reducer = (prevState, { type, value }) => {
+    switch (type) {
+        case 'start': {
+            return { ...prevState, start: value };
+        }
+        case 'end': {
+            return { ...prevState, end: value };
+        }
+        default:
+            return prevState;
+    }
+};
+const NumberRangeInput = forwardRef(({ testId, value = {}, onChange, onBlur, onFocus, label, fromLabel, toLabel, labelHidden, placeholder, disabled, readOnly, required, status, unit, showDecimal, numberOfDecimals, showGroupSeparators, min, max, step, variant, fromAdditionalInfo, toAdditionalInfo, autoFocus, handle, ...restProps }, ref) => {
+    const testIds = useTestIds(testId, getNumberRangeTestIds);
     const t = useI18n();
+    const startValueInputRef = useRef(null);
+    const endValueInputRef = useRef(null);
+    const [state, dispatch] = useReducer(reducer, {
+        start: value.start ?? '',
+        end: value.end ?? ''
+    });
+    // Need to keep the value in ref also, to be able to call onBlur with newest value
+    const startValueRef = useRef(state.start);
+    const endValueRef = useRef(state.end);
     const onFocusChange = useCallback((focused) => {
-        (focused ? onFocus : onBlur)?.({ start: value.start ?? '', end: value.end ?? '' });
+        (focused ? onFocus : onBlur)?.({ start: startValueRef.current, end: endValueRef.current });
     }, [onBlur, value.start, value.end]);
     const containerRef = useConsolidatedRef(ref);
     useFocusWithin([containerRef], onFocusChange);
+    useImperativeHandle(handle, () => ({
+        clear: () => {
+            if (startValueInputRef.current)
+                startValueInputRef.current.value = '';
+            if (endValueInputRef.current)
+                endValueInputRef.current.value = '';
+            startValueRef.current = '';
+            endValueRef.current = '';
+            dispatch({ type: 'start', value: '' });
+            dispatch({ type: 'end', value: '' });
+            onChange({ start: '', end: '' });
+        }
+    }), [onChange]);
     const commonProps = {
+        status,
         placeholder,
         readOnly,
         required,
@@ -24,7 +62,39 @@ const NumberRangeInput = forwardRef(({ value = {}, onChange, onBlur, onFocus, la
         max,
         variant
     };
-    return (_jsx(FormField, { as: 'fieldset', ...restProps, ref: containerRef, container: { wrap: 'nowrap' }, labelHidden: labelHidden, labelAs: 'legend', label: label, disabled: disabled, required: required, readOnly: readOnly, children: _jsxs(Flex, { container: true, as: StyledRangeInputContainer, children: [_jsx(NumberInput, { ...commonProps, value: value.start, onChange: fromValue => onChange({ start: fromValue, end: value.end ?? '' }), label: fromLabel, "aria-label": `${t('range_from_numeric') + (label ? ` - ${label}` : '')}`, additionalInfo: fromAdditionalInfo, autoFocus: autoFocus }), _jsx(NumberInput, { ...commonProps, value: value.end, onChange: toValue => onChange({ start: value.start ?? '', end: toValue }), label: toLabel, "aria-label": `${t('range_to_numeric') + (label ? ` - ${label}` : '')}`, additionalInfo: toAdditionalInfo })] }) }));
+    return (_jsx(FormField, { testId: testIds, as: 'fieldset', ...restProps, ref: containerRef, container: { wrap: 'nowrap' }, labelHidden: labelHidden, labelAs: 'legend', label: label, disabled: disabled, required: required, readOnly: readOnly, status: status, children: _jsxs(Flex, { container: true, as: StyledRangeInputContainer, children: [_jsx(NumberInput, { testId: testIds.min, ...commonProps, value: state.start, onChange: fromValue => {
+                        onChange({ start: fromValue, end: value.end ?? '' });
+                        dispatch({
+                            type: 'start',
+                            value: fromValue ?? ''
+                        });
+                    }, onBlur: changedValue => {
+                        dispatch({
+                            type: 'start',
+                            value: changedValue ?? ''
+                        });
+                        startValueRef.current = changedValue ?? '';
+                        onChange({
+                            start: changedValue ?? '',
+                            end: state.end
+                        });
+                    }, label: fromLabel, "aria-label": `${t('range_from_numeric') + (label ? ` - ${label}` : '')}`, additionalInfo: fromAdditionalInfo, autoFocus: autoFocus, ref: startValueInputRef }), _jsx(NumberInput, { testId: testIds.max, ...commonProps, value: state.end, onChange: toValue => {
+                        onChange({ start: value.start ?? '', end: toValue });
+                        dispatch({
+                            type: 'end',
+                            value: toValue ?? ''
+                        });
+                    }, onBlur: changedValue => {
+                        dispatch({
+                            type: 'end',
+                            value: changedValue ?? ''
+                        });
+                        endValueRef.current = changedValue ?? '';
+                        onChange({
+                            start: state.start,
+                            end: changedValue ?? ''
+                        });
+                    }, label: toLabel, "aria-label": `${t('range_to_numeric') + (label ? ` - ${label}` : '')}`, additionalInfo: toAdditionalInfo, ref: endValueInputRef })] }) }));
 });
-export default NumberRangeInput;
+export default withTestIds(NumberRangeInput, getNumberRangeTestIds);
 //# sourceMappingURL=NumberRangeInput.js.map