@pega/cosmos-react-core 3.0.0-dev.1.0 → 3.0.0-dev.10.0

package/lib/components/Number/NumberInput.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { forwardRef, useCallback, useMemo, useRef } from 'react';
 import Button from '../Button';
 import Icon, { registerIcon } from '../Icon';
 import * as plusIcon from '../Icon/icons/plus.icon';
@@ -8,53 +8,53 @@ import Text from '../Text';
 import Flex from '../Flex';
 import FormField from '../FormField';
 import Input from '../Input';
-import { useConfiguration, useConsolidatedRef, useI18n, useUID } from '../../hooks';
+import { useConfiguration, useConsolidatedRef, useI18n, useInputFormatter, useUID } from '../../hooks';
 import StyledNumberInput, { StyledStepperInput } from './NumberInput.styles';
 import { NUMBER_MAX_DECIMAL_PLACES } from './NumberInput.types';
-import { getCleanedValue, getDecimal, getDecrementedValue, getFormattedValue, getIncrementedValue, getInteger } from './utils';
+import { getCleanedValue, getDecimal, getDecrementedValue, getFormattedValue, getIncrementedValue } from './utils';
 registerIcon(minusIcon, plusIcon);
 const NumberInput = forwardRef((props, ref) => {
     const uid = useUID();
-    const { id = uid, status, label, labelHidden, info, required, disabled, readOnly, value = '', onChange, onBlur, unit, unitPlacement = 'after', 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, ...restProps } = props;
+    const { id = uid, status, label, labelHidden, info, required, disabled, readOnly, value = '', onChange, onFocus, onBlur, unit, unitPlacement = 'after', 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, ...restProps } = props;
     const { locale } = useConfiguration();
-    const [cursor, setCursor] = useState(0);
     const inputRef = useConsolidatedRef(ref);
     const containerRef = useRef(null);
-    const numberOfDecimals = useMemo(() => (showDecimal ? numberOfDecimalsProp : 0), [showDecimal, numberOfDecimalsProp]);
-    useEffect(() => {
-        inputRef.current?.setSelectionRange(cursor, cursor);
-    }, [cursor]);
-    const formattedValue = useMemo(() => getFormattedValue(!showDecimal ? getInteger(value) : value, locale, showGroupSeparators, numberOfDecimals), [showDecimal, value, numberOfDecimals, showGroupSeparators, locale]);
+    const numberOfDecimals = showDecimal ? numberOfDecimalsProp : 0;
+    const decimalSign = useMemo(() => getDecimal(locale), [locale]);
+    const formatValue = useCallback(number => {
+        return getFormattedValue(number, locale, showGroupSeparators, numberOfDecimals);
+    }, [numberOfDecimals, showGroupSeparators, locale]);
     const onInputChange = useCallback((e) => {
         const inputValue = e.target.value;
-        const selectionStart = e.target.selectionStart;
-        const decimal = getDecimal(locale);
-        const cleanedInputValue = getCleanedValue(inputValue, decimal, numberOfDecimals);
+        const cleanedInputValue = getCleanedValue(inputValue, decimalSign, numberOfDecimals);
         if (cleanedInputValue === value)
             return;
-        onChange?.(cleanedInputValue);
-        if (selectionStart !== undefined && selectionStart !== null) {
-            const formattedVal = getFormattedValue(cleanedInputValue, locale, showGroupSeparators, numberOfDecimals);
-            const cursorPosition = selectionStart + (formattedVal.length - e.target.value.length) || 1;
-            setCursor(cursorPosition);
-        }
-    }, [onChange, locale, value, numberOfDecimals, showDecimal, cursor, showGroupSeparators]);
-    const onKeyDown = useCallback((ev) => {
+        onChange(cleanedInputValue);
+    }, [onChange, decimalSign, value, numberOfDecimals]);
+    const onKeyDown = useCallback((e) => {
         if (readOnly)
             return;
-        switch (ev.key) {
+        switch (e.key) {
             case 'ArrowUp':
-                ev.preventDefault();
-                onChange?.(getIncrementedValue(value, min, max, step));
+                e.preventDefault();
+                onChange(getIncrementedValue(value, min, max, step));
                 break;
             case 'ArrowDown':
-                ev.preventDefault();
-                onChange?.(getDecrementedValue(value, min, max, step));
+                e.preventDefault();
+                onChange(getDecrementedValue(value, min, max, step));
+                break;
+            case decimalSign:
+                if (e.target.value.includes(decimalSign))
+                    e.preventDefault();
+                break;
+            case '-':
+                if (e.target.value.includes('-'))
+                    e.preventDefault();
                 break;
             default:
         }
-    }, [value, min, max, step, onChange]);
-    const onInputBlur = useCallback(() => {
+    }, [readOnly, onChange, value, min, max, step, decimalSign]);
+    const onInputFocusEvent = useCallback((e) => {
         let parsableValue = value;
         if (Number.isNaN(parseFloat(value))) {
             parsableValue = '';
@@ -62,23 +62,27 @@ const NumberInput = forwardRef((props, ref) => {
         else if (value?.endsWith('.')) {
             parsableValue = value.slice(0, -1);
         }
-        onBlur?.(parsableValue);
-    }, [value]);
+        if (e.type === 'focus')
+            onFocus?.(parsableValue);
+        else
+            onBlur?.(parsableValue);
+    }, [value, onBlur, onFocus]);
+    const formattedValue = useInputFormatter(inputRef, value, formatValue, `\\p{N}${decimalSign}-`);
     const t = useI18n();
-    const NumberInputComp = (_jsxs(_Fragment, { children: [unit && unitPlacement === 'before' && _jsx(Text, { children: unit }, void 0), _jsx(Input, { inputMode: 'numeric', ref: inputRef, value: formattedValue, onKeyDown: onKeyDown, onBlur: onInputBlur, "aria-label": `${ariaLabel || label}. ${unit ? t('measured_in', [unit]) : ''}`, ...{ onChange: onInputChange, id, readOnly, required, disabled, status, ...restProps } }, void 0), unit && unitPlacement === 'after' && _jsx(Text, { children: unit }, void 0)] }, void 0));
+    const NumberInputComp = (_jsxs(_Fragment, { children: [unit && unitPlacement === 'before' && _jsx(Text, { children: unit }), _jsx(Input, { inputMode: 'numeric', ref: inputRef, value: formattedValue, onKeyDown: onKeyDown, onFocus: onInputFocusEvent, onBlur: onInputFocusEvent, "aria-label": `${ariaLabel || label}. ${unit ? t('measured_in', [unit]) : ''}`, ...{ onChange: onInputChange, id, readOnly, required, disabled, status, ...restProps } }), unit && unitPlacement === 'after' && _jsx(Text, { children: unit })] }));
     const onMinusClick = () => {
         onChange?.(getDecrementedValue(value, min, max, step));
     };
     const onPlusClick = () => {
         onChange?.(getIncrementedValue(value, min, max, step));
     };
-    const StepperComp = (_jsxs(Flex, { as: StyledStepperInput, container: { alignItems: 'center', wrap: 'nowrap' }, status: status, readOnly: readOnly, disabled: disabled, size: formattedValue?.length, unitPlacement: unitPlacement, children: [_jsx(Button, { variant: 'simple', icon: true, onClick: onMinusClick, "aria-label": t('number_decrement_value_by', [step]), readOnly: readOnly, disabled: disabled, tabIndex: -1, children: _jsx(Icon, { name: 'minus' }, void 0) }, void 0), _jsx(Flex, { container: { alignItems: 'center', wrap: 'nowrap', justify: 'center' }, item: { grow: 1 }, ref: containerRef, onClick: (e) => {
+    const StepperComp = (_jsxs(Flex, { as: StyledStepperInput, container: { alignItems: 'center', wrap: 'nowrap' }, status: status, readOnly: readOnly, disabled: disabled, size: formattedValue?.length, unitPlacement: unitPlacement, children: [_jsx(Button, { variant: 'simple', icon: true, onClick: onMinusClick, "aria-label": t('number_decrement_value_by', [step]), readOnly: readOnly, disabled: disabled, tabIndex: -1, 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: NumberInputComp }, void 0), _jsx(Button, { variant: 'simple', icon: true, onClick: onPlusClick, "aria-label": t('number_increment_value_by', [step]), readOnly: readOnly, disabled: disabled, tabIndex: -1, children: _jsx(Icon, { name: 'plus' }, void 0) }, void 0)] }, void 0));
-    const NumberComp = (_jsx(Flex, { as: StyledNumberInput, container: { alignItems: 'center', wrap: 'nowrap' }, status: status, readOnly: readOnly, disabled: disabled, children: NumberInputComp }, void 0));
+                }, children: NumberInputComp }), _jsx(Button, { variant: 'simple', icon: true, onClick: onPlusClick, "aria-label": t('number_increment_value_by', [step]), readOnly: readOnly, disabled: disabled, tabIndex: -1, children: _jsx(Icon, { name: 'plus' }) })] }));
+    const NumberComp = (_jsx(Flex, { as: StyledNumberInput, container: { alignItems: 'center', wrap: 'nowrap' }, status: status, readOnly: readOnly, disabled: disabled, children: NumberInputComp }));
     const Comp = variant === 'stepper' && !readOnly ? StepperComp : NumberComp;
-    return label ? (_jsx(FormField, { ...{ label, labelHidden, id, info, status, required, disabled }, children: Comp }, void 0)) : (Comp);
+    return label ? (_jsx(FormField, { ...{ label, labelHidden, id, info, status, required, disabled }, children: Comp })) : (Comp);
 });
 export default NumberInput;
 //# 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  useEffect,\n  useMemo,\n  useRef,\n  useState\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 Text from '../Text';\nimport Flex from '../Flex';\nimport FormField from '../FormField';\nimport { ForwardProps } from '../../types';\nimport Input from '../Input';\nimport { useConfiguration, useConsolidatedRef, useI18n, useUID } from '../../hooks';\n\nimport StyledNumberInput, { StyledStepperInput } from './NumberInput.styles';\nimport NumberInputProps, { NUMBER_MAX_DECIMAL_PLACES } from './NumberInput.types';\nimport {\n  getCleanedValue,\n  getDecimal,\n  getDecrementedValue,\n  getFormattedValue,\n  getIncrementedValue,\n  getInteger\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      value = '',\n      onChange,\n      onBlur,\n      unit,\n      unitPlacement = 'after',\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      ...restProps\n    } = props;\n\n    const { locale } = useConfiguration();\n    const [cursor, setCursor] = useState(0);\n    const inputRef = useConsolidatedRef(ref);\n    const containerRef = useRef<HTMLElement>(null);\n    const numberOfDecimals = useMemo(\n      () => (showDecimal ? numberOfDecimalsProp : 0),\n      [showDecimal, numberOfDecimalsProp]\n    );\n\n    useEffect(() => {\n      inputRef.current?.setSelectionRange(cursor, cursor);\n    }, [cursor]);\n\n    const formattedValue = useMemo(\n      () =>\n        getFormattedValue(\n          !showDecimal ? getInteger(value) : value,\n          locale,\n          showGroupSeparators,\n          numberOfDecimals\n        ),\n      [showDecimal, value, numberOfDecimals, showGroupSeparators, locale]\n    );\n\n    const onInputChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        const inputValue = e.target.value;\n        const selectionStart = e.target.selectionStart;\n        const decimal = getDecimal(locale);\n        const cleanedInputValue = getCleanedValue(inputValue, decimal, numberOfDecimals);\n        if (cleanedInputValue === value) return;\n        onChange?.(cleanedInputValue);\n        if (selectionStart !== undefined && selectionStart !== null) {\n          const formattedVal = getFormattedValue(\n            cleanedInputValue,\n            locale,\n            showGroupSeparators,\n            numberOfDecimals\n          );\n          const cursorPosition =\n            selectionStart + (formattedVal.length - e.target.value.length) || 1;\n          setCursor(cursorPosition);\n        }\n      },\n      [onChange, locale, value, numberOfDecimals, showDecimal, cursor, showGroupSeparators]\n    );\n\n    const onKeyDown = useCallback(\n      (ev: KeyboardEvent<HTMLInputElement>) => {\n        if (readOnly) return;\n        switch (ev.key) {\n          case 'ArrowUp':\n            ev.preventDefault();\n            onChange?.(getIncrementedValue(value, min, max, step));\n            break;\n          case 'ArrowDown':\n            ev.preventDefault();\n            onChange?.(getDecrementedValue(value, min, max, step));\n            break;\n          default:\n        }\n      },\n      [value, min, max, step, onChange]\n    );\n\n    const onInputBlur = useCallback(() => {\n      let parsableValue = value;\n      if (Number.isNaN(parseFloat(value))) {\n        parsableValue = '';\n      } else if (value?.endsWith('.')) {\n        parsableValue = value.slice(0, -1);\n      }\n      onBlur?.(parsableValue);\n    }, [value]);\n\n    const t = useI18n();\n\n    const NumberInputComp = (\n      <>\n        {unit && unitPlacement === 'before' && <Text>{unit}</Text>}\n        <Input\n          inputMode='numeric'\n          ref={inputRef}\n          value={formattedValue}\n          onKeyDown={onKeyDown}\n          onBlur={onInputBlur}\n          aria-label={`${ariaLabel || label}. ${unit ? t('measured_in', [unit]) : ''}`}\n          {...{ onChange: onInputChange, id, readOnly, required, disabled, status, ...restProps }}\n        />\n        {unit && unitPlacement === 'after' && <Text>{unit}</Text>}\n      </>\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        container={{ alignItems: 'center', wrap: 'nowrap' }}\n        status={status}\n        readOnly={readOnly}\n        disabled={disabled}\n        size={formattedValue?.length}\n        unitPlacement={unitPlacement}\n      >\n        <Button\n          variant='simple'\n          icon\n          onClick={onMinusClick}\n          aria-label={t('number_decrement_value_by', [step])}\n          readOnly={readOnly}\n          disabled={disabled}\n          tabIndex={-1}\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          {NumberInputComp}\n        </Flex>\n        <Button\n          variant='simple'\n          icon\n          onClick={onPlusClick}\n          aria-label={t('number_increment_value_by', [step])}\n          readOnly={readOnly}\n          disabled={disabled}\n          tabIndex={-1}\n        >\n          <Icon name='plus' />\n        </Button>\n      </Flex>\n    );\n\n    const NumberComp = (\n      <Flex\n        as={StyledNumberInput}\n        container={{ alignItems: 'center', wrap: 'nowrap' }}\n        status={status}\n        readOnly={readOnly}\n        disabled={disabled}\n      >\n        {NumberInputComp}\n      </Flex>\n    );\n\n    const Comp = variant === 'stepper' && !readOnly ? StepperComp : NumberComp;\n\n    return label ? (\n      <FormField {...{ label, labelHidden, id, info, status, required, disabled }}>\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 Text from '../Text';\nimport Flex from '../Flex';\nimport FormField from '../FormField';\nimport { ForwardProps } from '../../types';\nimport Input from '../Input';\nimport {\n  useConfiguration,\n  useConsolidatedRef,\n  useI18n,\n  useInputFormatter,\n  useUID\n} from '../../hooks';\n\nimport StyledNumberInput, { StyledStepperInput } from './NumberInput.styles';\nimport NumberInputProps, { NUMBER_MAX_DECIMAL_PLACES } from './NumberInput.types';\nimport {\n  getCleanedValue,\n  getDecimal,\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      value = '',\n      onChange,\n      onFocus,\n      onBlur,\n      unit,\n      unitPlacement = 'after',\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      ...restProps\n    } = props;\n\n    const { locale } = useConfiguration();\n    const inputRef = useConsolidatedRef(ref);\n    const containerRef = useRef<HTMLElement>(null);\n    const numberOfDecimals = showDecimal ? numberOfDecimalsProp : 0;\n    const decimalSign = useMemo(() => getDecimal(locale), [locale]);\n\n    const formatValue = useCallback(\n      number => {\n        return getFormattedValue(number, locale, showGroupSeparators, numberOfDecimals);\n      },\n      [numberOfDecimals, showGroupSeparators, locale]\n    );\n\n    const onInputChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        const inputValue = e.target.value;\n        const cleanedInputValue = getCleanedValue(inputValue, decimalSign, numberOfDecimals);\n        if (cleanedInputValue === value) return;\n        onChange(cleanedInputValue);\n      },\n      [onChange, decimalSign, value, numberOfDecimals]\n    );\n\n    const onKeyDown = useCallback(\n      (e: KeyboardEvent<HTMLInputElement>) => {\n        if (readOnly) return;\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 ((e.target as HTMLInputElement).value.includes(decimalSign)) e.preventDefault();\n            break;\n          case '-':\n            if ((e.target as HTMLInputElement).value.includes('-')) e.preventDefault();\n            break;\n          default:\n        }\n      },\n      [readOnly, onChange, value, min, max, step, decimalSign]\n    );\n\n    const onInputFocusEvent = useCallback(\n      (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 onBlur?.(parsableValue);\n      },\n      [value, onBlur, onFocus]\n    );\n\n    const formattedValue = useInputFormatter(inputRef, value, formatValue, `\\\\p{N}${decimalSign}-`);\n\n    const t = useI18n();\n\n    const NumberInputComp = (\n      <>\n        {unit && unitPlacement === 'before' && <Text>{unit}</Text>}\n        <Input\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          {...{ onChange: onInputChange, id, readOnly, required, disabled, status, ...restProps }}\n        />\n        {unit && unitPlacement === 'after' && <Text>{unit}</Text>}\n      </>\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        container={{ alignItems: 'center', wrap: 'nowrap' }}\n        status={status}\n        readOnly={readOnly}\n        disabled={disabled}\n        size={formattedValue?.length}\n        unitPlacement={unitPlacement}\n      >\n        <Button\n          variant='simple'\n          icon\n          onClick={onMinusClick}\n          aria-label={t('number_decrement_value_by', [step])}\n          readOnly={readOnly}\n          disabled={disabled}\n          tabIndex={-1}\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          {NumberInputComp}\n        </Flex>\n        <Button\n          variant='simple'\n          icon\n          onClick={onPlusClick}\n          aria-label={t('number_increment_value_by', [step])}\n          readOnly={readOnly}\n          disabled={disabled}\n          tabIndex={-1}\n        >\n          <Icon name='plus' />\n        </Button>\n      </Flex>\n    );\n\n    const NumberComp = (\n      <Flex\n        as={StyledNumberInput}\n        container={{ alignItems: 'center', wrap: 'nowrap' }}\n        status={status}\n        readOnly={readOnly}\n        disabled={disabled}\n      >\n        {NumberInputComp}\n      </Flex>\n    );\n\n    const Comp = variant === 'stepper' && !readOnly ? StepperComp : NumberComp;\n\n    return label ? (\n      <FormField {...{ label, labelHidden, id, info, status, required, disabled }}>\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default NumberInput;\n"]}

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

@@ -34,7 +34,9 @@ export default interface NumberInputProps extends BaseProps, NoChildrenProp {
      */
     value?: string;
     /** Callback fired when input value changes. */
-    onChange?: (value: string) => void;
+    onChange: (value: string) => void;
+    /** Callback fired when the component gets focus. */
+    onFocus?: (value: string) => void;
     /** Callback fired when the component loses focus. */
     onBlur?: (value: string) => void;
     /** Defines unit of the number, like 'kg', 'miles' or '%'. */
@@ -44,11 +46,11 @@ export default interface NumberInputProps extends BaseProps, NoChildrenProp {
      * @default "after"
      */
     unitPlacement?: 'before' | 'after';
-    /** Determines whether decimal places should be shown. The value is simply truncated if true.
+    /** Determines whether decimal places should be shown. The value is rounded if true.
      * @default true
      */
     showDecimal?: boolean;
-    /** Determines the maximum number of decimal places. The value is simply truncated to the number of places.
+    /** Determines the maximum number of decimal places. The value is rounded to the number of places.
      * @default variable NUMBER_MAX_DECIMAL_PLACES. Recommended minimum: 1.
      */
     numberOfDecimals?: number;
@@ -71,11 +73,16 @@ export default interface NumberInputProps extends BaseProps, NoChildrenProp {
      * @default 1
      */
     step?: number;
-    variant?: 'stepper';
+    /**
+     * Component variation. Might be rendered as regular input or stepper.
+     * @default 'default'
+     */
+    variant?: 'default' | 'stepper';
     /** Ref for the wrapping element. */
     ref?: Ref<HTMLInputElement>;
     /** Optional manual override for generated aria label */
     'aria-label'?: string;
 }
-export declare const NUMBER_MAX_DECIMAL_PLACES = 100;
+/** Maximum fraction digits is 20. */
+export declare const NUMBER_MAX_DECIMAL_PLACES = 20;
 //# sourceMappingURL=NumberInput.types.d.ts.map

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":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAExD,MAAM,CAAC,OAAO,WAAW,gBAAiB,SAAQ,SAAS,EAAE,cAAc;IACzE;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC;;;OAGG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,yFAAyF;IACzF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,qDAAqD;IACrD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,6DAA6D;IAC7D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IACnC;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAC5B,wDAAwD;IACxD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,yBAAyB,MAAM,CAAC"}
+{"version":3,"file":"NumberInput.types.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAExD,MAAM,CAAC,OAAO,WAAW,gBAAiB,SAAQ,SAAS,EAAE,cAAc;IACzE;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC;;;OAGG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,yFAAyF;IACzF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,oDAAoD;IACpD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,qDAAqD;IACrD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,6DAA6D;IAC7D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IACnC;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAC5B,wDAAwD;IACxD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,qCAAqC;AACrC,eAAO,MAAM,yBAAyB,KAAK,CAAC"}

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

@@ -1,2 +1,3 @@
-export const NUMBER_MAX_DECIMAL_PLACES = 100;
+/** Maximum fraction digits is 20. */
+export const NUMBER_MAX_DECIMAL_PLACES = 20;
 //# sourceMappingURL=NumberInput.types.js.map

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":"AAkFA,MAAM,CAAC,MAAM,yBAAyB,GAAG,GAAG,CAAC","sourcesContent":["import { Ref } from 'react';\n\nimport { FormControlProps } from '../FormControl';\nimport { BaseProps, NoChildrenProp } from '../../types';\n\nexport default interface NumberInputProps 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  /**\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 loses focus. */\n  onBlur?: (value: string) => void;\n  /** Defines unit of the number, like 'kg', 'miles' or '%'. */\n  unit?: string;\n  /**\n   * Determines the placement of the unit.\n   * @default \"after\"\n   */\n  unitPlacement?: 'before' | 'after';\n  /** Determines whether decimal places should be shown. The value is simply truncated if true.\n   * @default true\n   */\n  showDecimal?: boolean;\n  /** Determines the maximum number of decimal places. The value is simply truncated 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  variant?: 'stepper';\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLInputElement>;\n  /** Optional manual override for generated aria label */\n  'aria-label'?: string;\n}\n\nexport const NUMBER_MAX_DECIMAL_PLACES = 100;\n"]}
+{"version":3,"file":"NumberInput.types.js","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.types.ts"],"names":[],"mappings":"AAwFA,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 default interface NumberInputProps 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  /**\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  /** Defines unit of the number, like 'kg', 'miles' or '%'. */\n  unit?: string;\n  /**\n   * Determines the placement of the unit.\n   * @default \"after\"\n   */\n  unitPlacement?: 'before' | 'after';\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  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLInputElement>;\n  /** Optional manual override for generated aria label */\n  'aria-label'?: string;\n}\n\n/** Maximum fraction digits is 20. */\nexport const NUMBER_MAX_DECIMAL_PLACES = 20;\n"]}

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

@@ -2,4 +2,5 @@ export { default as NumberInput } from './NumberInput';
 export { default as NumberInputProps } from './NumberInput.types';
 export { default as NumberDisplay } from './NumberDisplay';
 export { NumberDisplayProps } from './NumberDisplay';
+export { formatNumber } from './utils';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Number/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Number/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC"}

package/lib/components/Number/index.js

@@ -1,3 +1,4 @@
 export { default as NumberInput } from './NumberInput';
 export { default as NumberDisplay } from './NumberDisplay';
+export { formatNumber } from './utils';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Number/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AAEvD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC","sourcesContent":["export { default as NumberInput } from './NumberInput';\nexport { default as NumberInputProps } from './NumberInput.types';\nexport { default as NumberDisplay } from './NumberDisplay';\nexport { NumberDisplayProps } from './NumberDisplay';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Number/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AAEvD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAE3D,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC","sourcesContent":["export { default as NumberInput } from './NumberInput';\nexport { default as NumberInputProps } from './NumberInput.types';\nexport { default as NumberDisplay } from './NumberDisplay';\nexport { NumberDisplayProps } from './NumberDisplay';\nexport { formatNumber } from './utils';\n"]}

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

@@ -1,9 +1,15 @@
 export declare function getInteger(value: string): string;
 export declare function getDecimal(locale: string, options?: Intl.NumberFormatOptions): string;
 export declare function getFraction(value: string): string;
-export declare function getCleanedValue(value: string, decimal: string, maximumFractionDigits: number): string;
+export declare function getCleanedValue(value: string, decimalSign: string, maximumFractionDigits: number): string;
 export declare function getFormattedValue(value: string, locale: string, showGroupSeparators: boolean, maximumFractionDigits?: number): string;
 export declare function isValueInRange(value: number, min: number | undefined, max: number | undefined): boolean;
 export declare function getIncrementedValue(value: string, min: number, max: number, step: number): string;
 export declare function getDecrementedValue(value: string, min: number, max: number, step: number): string;
+interface NumberFormatOptions {
+    locale: string;
+    options?: Intl.NumberFormatOptions;
+}
+export declare function formatNumber(value: number | bigint, { locale, options }: NumberFormatOptions): string;
+export {};
 //# sourceMappingURL=utils.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Number/utils.ts"],"names":[],"mappings":"AAEA,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAIhD;AAED,wBAAgB,UAAU,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,IAAI,CAAC,mBAAmB,UAM5E;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,UAIxC;AAED,wBAAgB,eAAe,CAC7B,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,MAAM,EACf,qBAAqB,EAAE,MAAM,GAC5B,MAAM,CAcR;AAED,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,mBAAmB,EAAE,OAAO,EAC5B,qBAAqB,GAAE,MAAU,GAChC,MAAM,CAyBR;AAED,wBAAgB,cAAc,CAC5B,KAAK,EAAE,MAAM,EACb,GAAG,EAAE,MAAM,GAAG,SAAS,EACvB,GAAG,EAAE,MAAM,GAAG,SAAS,GACtB,OAAO,CAET;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAUjG;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAUjG"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Number/utils.ts"],"names":[],"mappings":"AAEA,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAIhD;AAED,wBAAgB,UAAU,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,IAAI,CAAC,mBAAmB,UAM5E;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,UAIxC;AAED,wBAAgB,eAAe,CAC7B,KAAK,EAAE,MAAM,EACb,WAAW,EAAE,MAAM,EACnB,qBAAqB,EAAE,MAAM,GAC5B,MAAM,CAUR;AAED,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,mBAAmB,EAAE,OAAO,EAC5B,qBAAqB,GAAE,MAAU,GAChC,MAAM,CAeR;AAED,wBAAgB,cAAc,CAC5B,KAAK,EAAE,MAAM,EACb,GAAG,EAAE,MAAM,GAAG,SAAS,EACvB,GAAG,EAAE,MAAM,GAAG,SAAS,GACtB,OAAO,CAET;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAUjG;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAUjG;AAED,UAAU,mBAAmB;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC,mBAAmB,CAAC;CACpC;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,mBAAmB,UAI5F"}

package/lib/components/Number/utils.js

@@ -14,46 +14,33 @@ export function getFraction(value) {
     const substrLength = decPos === -1 ? value.length : decPos;
     return value.substring(substrLength);
 }
-export function getCleanedValue(value, decimal, maximumFractionDigits) {
-    const regex = new RegExp(`[^-\\d${decimal}]`, 'g');
-    value = value.trim().replace(regex, '');
-    if (decimal) {
-        const decimalString = new RegExp(`\\${decimal}`, 'g');
-        value = value.replace(decimalString, '.');
-    }
-    if (value.startsWith('.'))
-        value = `0${value}`;
-    if (value.startsWith('-.'))
-        value = `-0${value.substring(1)}`;
-    const match = value.match(new RegExp(`-?\\d*(\\.\\d{0,${maximumFractionDigits}})?`));
+export function getCleanedValue(value, decimalSign, maximumFractionDigits) {
+    let rawValue = value.replace(new RegExp(`[^${decimalSign}\\d-]+`, 'gu'), '');
+    if (decimalSign && decimalSign !== '.')
+        rawValue = rawValue.replace(decimalSign, '.');
+    if (rawValue.startsWith('.'))
+        rawValue = `0${value}`;
+    if (rawValue.startsWith('-.'))
+        rawValue = `-0${value.substring(1)}`;
+    const match = rawValue.match(new RegExp(`-?\\d*(\\.\\d{0,${maximumFractionDigits}})?`));
     if (match && match.length > 0) {
-        value = match[0];
+        rawValue = match[0];
     }
-    return value;
+    return rawValue;
 }
 export function getFormattedValue(value, locale, showGroupSeparators, maximumFractionDigits = 0) {
     let valueNumber;
-    let sign = '';
-    const cleanedValue = getCleanedValue(value, '.', maximumFractionDigits);
-    let integer = getInteger(cleanedValue);
+    const integer = getInteger(value);
     const decimal = getDecimal(locale);
-    const fractionPart = getFraction(cleanedValue).replace('.', decimal);
-    if (integer && integer.startsWith('-')) {
-        sign = '-';
-        integer = integer.substring(1);
-    }
-    if (!integer && maximumFractionDigits && fractionPart.startsWith(decimal)) {
-        integer = '0';
-    }
-    if (cleanedValue && !Number.isNaN(parseFloat(integer))) {
+    const fractionPart = getFraction(value).replace('.', decimal);
+    if (value && !Number.isNaN(parseFloat(integer))) {
         valueNumber = BigInt(integer);
-        return (sign +
-            new Intl.NumberFormat(locale, { useGrouping: showGroupSeparators })
-                .format(valueNumber)
-                .trim() +
-            (maximumFractionDigits ? fractionPart : ''));
+        return (new Intl.NumberFormat(locale, { useGrouping: showGroupSeparators })
+            .format(valueNumber)
+            .trim() +
+            (maximumFractionDigits ? fractionPart.slice(0, maximumFractionDigits + decimal.length) : ''));
     }
-    return cleanedValue;
+    return value;
 }
 export function isValueInRange(value, min, max) {
     return !((min !== undefined && value < min) || (max !== undefined && value > max));
@@ -80,4 +67,8 @@ export function getDecrementedValue(value, min, max, step) {
     }
     return value;
 }
+export function formatNumber(value, { locale, options }) {
+    const formatter = new Intl.NumberFormat(locale, options);
+    return formatter.format(value);
+}
 //# sourceMappingURL=utils.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/Number/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import BigNumber from 'bignumber.js';\n\nexport function getInteger(value: string): string {\n  const decPos = value.indexOf('.');\n  const substrLength = decPos === -1 ? value.length : decPos;\n  return value.substring(0, substrLength);\n}\n\nexport function getDecimal(locale: string, options?: Intl.NumberFormatOptions) {\n  return (\n    new Intl.NumberFormat(locale, options)\n      .formatToParts(0.1)\n      .filter((part: { type: string; value: string }) => part.type === 'decimal')[0]?.value || ''\n  );\n}\n\nexport function getFraction(value: string) {\n  const decPos = value.indexOf('.');\n  const substrLength = decPos === -1 ? value.length : decPos;\n  return value.substring(substrLength);\n}\n\nexport function getCleanedValue(\n  value: string,\n  decimal: string,\n  maximumFractionDigits: number\n): string {\n  const regex = new RegExp(`[^-\\\\d${decimal}]`, 'g');\n  value = value.trim().replace(regex, '');\n  if (decimal) {\n    const decimalString = new RegExp(`\\\\${decimal}`, 'g');\n    value = value.replace(decimalString, '.');\n  }\n  if (value.startsWith('.')) value = `0${value}`;\n  if (value.startsWith('-.')) value = `-0${value.substring(1)}`;\n  const match = value.match(new RegExp(`-?\\\\d*(\\\\.\\\\d{0,${maximumFractionDigits}})?`));\n  if (match && match.length > 0) {\n    value = match[0];\n  }\n  return value;\n}\n\nexport function getFormattedValue(\n  value: string,\n  locale: string,\n  showGroupSeparators: boolean,\n  maximumFractionDigits: number = 0\n): string {\n  let valueNumber;\n  let sign = '';\n  const cleanedValue = getCleanedValue(value, '.', maximumFractionDigits);\n  let integer = getInteger(cleanedValue);\n  const decimal = getDecimal(locale);\n  const fractionPart = getFraction(cleanedValue).replace('.', decimal);\n  if (integer && integer.startsWith('-')) {\n    sign = '-';\n    integer = integer.substring(1);\n  }\n  if (!integer && maximumFractionDigits && fractionPart.startsWith(decimal)) {\n    integer = '0';\n  }\n  if (cleanedValue && !Number.isNaN(parseFloat(integer))) {\n    valueNumber = BigInt(integer);\n    return (\n      sign +\n      new Intl.NumberFormat(locale, { useGrouping: showGroupSeparators })\n        .format(valueNumber)\n        .trim() +\n      (maximumFractionDigits ? fractionPart : '')\n    );\n  }\n  return cleanedValue;\n}\n\nexport function isValueInRange(\n  value: number,\n  min: number | undefined,\n  max: number | undefined\n): boolean {\n  return !((min !== undefined && value < min) || (max !== undefined && value > max));\n}\n\nexport function getIncrementedValue(value: string, min: number, max: number, step: number): string {\n  const numberValue = parseFloat(value) || 0;\n  const newValue = new BigNumber(numberValue).plus(step);\n  if (isValueInRange(newValue.toNumber(), min, max)) {\n    return newValue.toFixed();\n  }\n  if (min !== undefined && newValue.toNumber() < min) {\n    return min.toString();\n  }\n  return value;\n}\n\nexport function getDecrementedValue(value: string, min: number, max: number, step: number): string {\n  const numberValue = parseFloat(value) || 0;\n  const newValue = new BigNumber(numberValue).minus(step);\n  if (isValueInRange(newValue.toNumber(), min, max)) {\n    return newValue.toFixed();\n  }\n  if (max !== undefined && newValue.toNumber() > max) {\n    return max.toString();\n  }\n  return value;\n}\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/Number/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import BigNumber from 'bignumber.js';\n\nexport function getInteger(value: string): string {\n  const decPos = value.indexOf('.');\n  const substrLength = decPos === -1 ? value.length : decPos;\n  return value.substring(0, substrLength);\n}\n\nexport function getDecimal(locale: string, options?: Intl.NumberFormatOptions) {\n  return (\n    new Intl.NumberFormat(locale, options)\n      .formatToParts(0.1)\n      .filter((part: { type: string; value: string }) => part.type === 'decimal')[0]?.value || ''\n  );\n}\n\nexport function getFraction(value: string) {\n  const decPos = value.indexOf('.');\n  const substrLength = decPos === -1 ? value.length : decPos;\n  return value.substring(substrLength);\n}\n\nexport function getCleanedValue(\n  value: string,\n  decimalSign: string,\n  maximumFractionDigits: number\n): string {\n  let rawValue = value.replace(new RegExp(`[^${decimalSign}\\\\d-]+`, 'gu'), '');\n  if (decimalSign && decimalSign !== '.') rawValue = rawValue.replace(decimalSign, '.');\n  if (rawValue.startsWith('.')) rawValue = `0${value}`;\n  if (rawValue.startsWith('-.')) rawValue = `-0${value.substring(1)}`;\n  const match = rawValue.match(new RegExp(`-?\\\\d*(\\\\.\\\\d{0,${maximumFractionDigits}})?`));\n  if (match && match.length > 0) {\n    rawValue = match[0];\n  }\n  return rawValue;\n}\n\nexport function getFormattedValue(\n  value: string,\n  locale: string,\n  showGroupSeparators: boolean,\n  maximumFractionDigits: number = 0\n): string {\n  let valueNumber;\n  const integer = getInteger(value);\n  const decimal = getDecimal(locale);\n  const fractionPart = getFraction(value).replace('.', decimal);\n  if (value && !Number.isNaN(parseFloat(integer))) {\n    valueNumber = BigInt(integer);\n    return (\n      new Intl.NumberFormat(locale, { useGrouping: showGroupSeparators })\n        .format(valueNumber)\n        .trim() +\n      (maximumFractionDigits ? fractionPart.slice(0, maximumFractionDigits + decimal.length) : '')\n    );\n  }\n  return value;\n}\n\nexport function isValueInRange(\n  value: number,\n  min: number | undefined,\n  max: number | undefined\n): boolean {\n  return !((min !== undefined && value < min) || (max !== undefined && value > max));\n}\n\nexport function getIncrementedValue(value: string, min: number, max: number, step: number): string {\n  const numberValue = parseFloat(value) || 0;\n  const newValue = new BigNumber(numberValue).plus(step);\n  if (isValueInRange(newValue.toNumber(), min, max)) {\n    return newValue.toFixed();\n  }\n  if (min !== undefined && newValue.toNumber() < min) {\n    return min.toString();\n  }\n  return value;\n}\n\nexport function getDecrementedValue(value: string, min: number, max: number, step: number): string {\n  const numberValue = parseFloat(value) || 0;\n  const newValue = new BigNumber(numberValue).minus(step);\n  if (isValueInRange(newValue.toNumber(), min, max)) {\n    return newValue.toFixed();\n  }\n  if (max !== undefined && newValue.toNumber() > max) {\n    return max.toString();\n  }\n  return value;\n}\n\ninterface NumberFormatOptions {\n  locale: string;\n  options?: Intl.NumberFormatOptions;\n}\n\nexport function formatNumber(value: number | bigint, { locale, options }: NumberFormatOptions) {\n  const formatter = new Intl.NumberFormat(locale, options);\n\n  return formatter.format(value);\n}\n"]}

package/lib/components/PageTemplates/CategorySubPage.js

@@ -12,7 +12,7 @@ import Progress from '../Progress';
 import { StyledTemplate, StyledTemplateRow, StyledPageArticle, StyledArticleHeader, StyledPageActionCol, StyledPageTitle, StyledMenuColumn, StyledCategoryHeadingRow, StyledCategoryIconBlock, StyledNav, StyledNavList, StyledNavGroup, StyledNavGroupList, StyledNavGroupHeader, StyledNavItem, StyledSkipNavigation } from './CategorySubPage.styles';
 const NavItem = ({ item: { href, text, active, ...restProps } }) => {
     const isAnchor = !!href;
-    return (_jsx(StyledNavItem, { as: 'li', selected: !!active, tabType: 'horizontal', inverted: false, "aria-current": active ? 'page' : undefined, children: _jsx(Button, { ...restProps, href: isAnchor ? href : undefined, variant: 'text', children: text }, void 0) }, void 0));
+    return (_jsx(StyledNavItem, { as: 'li', selected: !!active, tabType: 'horizontal', inverted: false, "aria-current": active ? 'page' : undefined, children: _jsx(Button, { ...restProps, href: isAnchor ? href : undefined, variant: 'text', children: text }) }));
 };
 const NavGroup = ({ item }) => {
     const mappedGroupedItems = useMemo(() => {
@@ -29,13 +29,13 @@ const NavGroup = ({ item }) => {
     }, [item.title, item.items]);
     const groupLabelId = useUID();
     if (titledGroup) {
-        return (_jsxs(StyledNavGroup, { as: 'li', children: [_jsx(StyledNavGroupHeader, { variant: 'h3', id: groupLabelId, children: item.title }, void 0), _jsx(StyledNavGroupList, { "aria-labelledby": groupLabelId, children: mappedGroupedItems }, void 0)] }, void 0));
+        return (_jsxs(StyledNavGroup, { as: 'li', children: [_jsx(StyledNavGroupHeader, { variant: 'h3', id: groupLabelId, children: item.title }), _jsx(StyledNavGroupList, { "aria-labelledby": groupLabelId, children: mappedGroupedItems })] }));
     }
     if (anonGroup) {
-        return _jsx(StyledNavGroup, { children: mappedGroupedItems }, void 0);
+        return _jsx(StyledNavGroup, { children: mappedGroupedItems });
     }
     if (item.items.length === 1) {
-        return _jsx(NavItem, { item: item.items[0] }, void 0);
+        return _jsx(NavItem, { item: item.items[0] });
     }
     return null;
 };
@@ -45,20 +45,20 @@ const CategorySubPage = forwardRef(({ viewLoading = false, category, categoryIco
     const mappedAction = useCallback((action) => {
         const { id, text, icon, label, ...rest } = action;
         return (_createElement(Button, { ...rest, key: id, icon: !!icon && !text, label: label || text },
-            !!icon && _jsx(Icon, { name: icon }, void 0),
+            !!icon && _jsx(Icon, { name: icon }),
             !!text && text));
     }, []);
     return (_jsx(StyledTemplate, { children: _jsxs(Flex, { ...restProps, ref: templateRef, as: StyledTemplateRow, container: { alignItems: 'stretch', wrap: 'nowrap' }, children: [_jsxs(StyledMenuColumn, { children: [_jsx(StyledSkipNavigation, { onClick: () => {
                                 if (articleRef.current)
                                     articleRef.current.focus();
-                            }, children: "Skip to page content" }, void 0), _jsxs(Flex, { as: StyledCategoryHeadingRow, container: { alignItems: 'center' }, children: [categoryIcon && (_jsx(Flex, { as: StyledCategoryIconBlock, container: { alignItems: 'center', justify: 'center' }, children: _jsx(Icon, { name: categoryIcon }, void 0) }, void 0)), _jsx(Text, { variant: 'h1', children: category }, void 0)] }, void 0), _jsx(StyledNav, { children: _jsx(StyledNavList, { children: navItemGroups.map((navItem, index) => {
+                            }, children: "Skip to page content" }), _jsxs(Flex, { as: StyledCategoryHeadingRow, container: { alignItems: 'center' }, children: [categoryIcon && (_jsx(Flex, { as: StyledCategoryIconBlock, container: { alignItems: 'center', justify: 'center' }, children: _jsx(Icon, { name: categoryIcon }) })), _jsx(Text, { variant: 'h1', children: category })] }), _jsx(StyledNav, { children: _jsx(StyledNavList, { children: navItemGroups.map((navItem, index) => {
                                     const key = hasProp(navItem, 'title') ? navItem.title : `navItem${index}`;
                                     return _jsx(NavGroup, { item: navItem }, key);
-                                }) }, void 0) }, void 0)] }, void 0), _jsxs(Flex, { as: StyledPageArticle, item: { grow: 1 }, ref: articleRef, "aria-label": pageTitle || 'Main Content', tabIndex: 0, children: [viewLoading && _jsx(Progress, { placement: 'local' }, void 0), !viewLoading && (_jsxs(_Fragment, { children: [(pageTitle || pageActions) && (_jsxs(Flex, { as: StyledArticleHeader, container: {
+                                }) }) })] }), _jsxs(Flex, { as: StyledPageArticle, item: { grow: 1 }, ref: articleRef, "aria-label": pageTitle || 'Main Content', tabIndex: 0, children: [viewLoading && _jsx(Progress, { placement: 'local' }), !viewLoading && (_jsxs(_Fragment, { children: [(pageTitle || pageActions) && (_jsxs(Flex, { as: StyledArticleHeader, container: {
                                         justify: 'between',
                                         alignItems: 'center',
                                         wrap: 'wrap'
-                                    }, children: [pageTitle && _jsx(StyledPageTitle, { children: pageTitle }, void 0), pageActions && !!pageActions.length && (_jsxs(_Fragment, { children: [pageActions.length <= maxActions && (_jsx(StyledPageActionCol, { children: pageActions.reverse().map(mappedAction) }, void 0)), pageActions.length > maxActions && (_jsxs(StyledPageActionCol, { children: [_jsx(MenuButton, { text: 'Actions', menu: {
+                                    }, children: [pageTitle && _jsx(StyledPageTitle, { children: pageTitle }), pageActions && !!pageActions.length && (_jsxs(_Fragment, { children: [pageActions.length <= maxActions && (_jsx(StyledPageActionCol, { children: pageActions.reverse().map(mappedAction) })), pageActions.length > maxActions && (_jsxs(StyledPageActionCol, { children: [_jsx(MenuButton, { text: 'Actions', menu: {
                                                                 items: pageActions
                                                                     .slice(maxActions - 1)
                                                                     .map(({ id, text, onClick, ...rest }) => ({
@@ -67,10 +67,10 @@ const CategorySubPage = forwardRef(({ viewLoading = false, category, categoryIco
                                                                     onClick,
                                                                     ...rest
                                                                 }))
-                                                            } }, void 0), pageActions
+                                                            } }), pageActions
                                                             .slice(0, maxActions - 1)
                                                             .reverse()
-                                                            .map(mappedAction)] }, void 0))] }, void 0))] }, void 0)), region] }, void 0))] }, void 0)] }, void 0) }, void 0));
+                                                            .map(mappedAction)] }))] }))] })), region] }))] })] }) }));
 });
 export default CategorySubPage;
 //# sourceMappingURL=CategorySubPage.js.map

package/lib/components/PageTemplates/CategorySubPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"CategorySubPage.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/CategorySubPage.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  createRef,\n  Ref,\n  forwardRef,\n  PropsWithoutRef,\n  FunctionComponent,\n  ReactNode,\n  useCallback,\n  useMemo,\n  MouseEventHandler\n} from 'react';\n\nimport { hasProp } from '../../utils';\nimport { useConsolidatedRef, useUID } from '../../hooks';\nimport Button, { ButtonProps } from '../Button';\nimport Flex from '../Flex';\nimport Icon from '../Icon';\nimport MenuButton from '../MenuButton';\nimport Text from '../Text';\nimport Progress from '../Progress';\nimport { Action, ForwardProps } from '../../types';\n\nimport {\n  StyledTemplate,\n  StyledTemplateRow,\n  StyledPageArticle,\n  StyledArticleHeader,\n  StyledPageActionCol,\n  StyledPageTitle,\n  StyledMenuColumn,\n  StyledCategoryHeadingRow,\n  StyledCategoryIconBlock,\n  StyledNav,\n  StyledNavList,\n  StyledNavGroup,\n  StyledNavGroupList,\n  StyledNavGroupHeader,\n  StyledNavItem,\n  StyledSkipNavigation\n} from './CategorySubPage.styles';\n\ninterface NavItemType extends ForwardProps {\n  text: string;\n  active?: boolean;\n  onClick?: MouseEventHandler;\n  href?: string;\n}\n\ninterface NavGroupType {\n  title?: string;\n  items: NavItemType[];\n}\n\ninterface PageAction\n  extends Pick<Action, 'id' | 'icon' | 'href' | 'onClick' | 'disabled'>,\n    Pick<ButtonProps, 'variant' | 'label' | 'aria-label' | 'loading'>,\n    ForwardProps {\n  /** Optional text to replace required text string in Action type */\n  text?: string;\n}\n\nexport interface TemplateProps {\n  /** Indicates that the primary view for the page cannot yet be rendered */\n  /** @default false */\n  viewLoading?: boolean;\n  /** Parent Category of page and all navigation items */\n  category: string;\n  /** Parent Category icon */\n  categoryIcon?: string;\n  navItemGroups: NavGroupType[];\n  pageTitle?: string;\n  /** Actions to render in fixed page header. Ordered by priority */\n  pageActions?: PageAction[];\n  /** Maximum top-level action buttons to render in header. Actions passed exceeding this limit will render in an action menu. */\n  /** @default 3 */\n  maxActions?: number;\n  /** Primary page content region */\n  region: ReactNode;\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst NavItem = ({ item: { href, text, active, ...restProps } }: { item: NavItemType }) => {\n  const isAnchor = !!href;\n\n  return (\n    <StyledNavItem\n      as='li'\n      selected={!!active}\n      tabType='horizontal'\n      inverted={false}\n      aria-current={active ? 'page' : undefined}\n    >\n      <Button {...restProps} href={isAnchor ? href : undefined} variant='text'>\n        {text}\n      </Button>\n    </StyledNavItem>\n  );\n};\n\nconst NavGroup = ({ item }: { item: NavGroupType }) => {\n  const mappedGroupedItems = useMemo(() => {\n    return item.items.map(groupedItem => {\n      const key = groupedItem.text;\n      return <NavItem item={groupedItem} key={key} />;\n    });\n  }, [item.items]);\n\n  const titledGroup: boolean = useMemo(() => {\n    return !!item.title && !!item.items.length;\n  }, [item.title, item.items]);\n\n  const anonGroup: boolean = useMemo(() => {\n    return !item.title && item.items.length > 1;\n  }, [item.title, item.items]);\n\n  const groupLabelId = useUID();\n  if (titledGroup) {\n    return (\n      <StyledNavGroup as='li'>\n        <StyledNavGroupHeader variant='h3' id={groupLabelId}>\n          {(item as NavGroupType).title}\n        </StyledNavGroupHeader>\n\n        <StyledNavGroupList aria-labelledby={groupLabelId}>{mappedGroupedItems}</StyledNavGroupList>\n      </StyledNavGroup>\n    );\n  }\n\n  if (anonGroup) {\n    return <StyledNavGroup>{mappedGroupedItems}</StyledNavGroup>;\n  }\n\n  if (item.items.length === 1) {\n    return <NavItem item={item.items[0]} />;\n  }\n\n  return null;\n};\n\nconst CategorySubPage: FunctionComponent<TemplateProps & ForwardProps> = forwardRef(\n  (\n    {\n      viewLoading = false,\n      category,\n      categoryIcon,\n      navItemGroups,\n      pageTitle,\n      pageActions,\n      region,\n      maxActions = 3,\n      ...restProps\n    }: PropsWithoutRef<TemplateProps>,\n    ref: TemplateProps['ref']\n  ) => {\n    const articleRef = createRef<HTMLElement>();\n    const templateRef = useConsolidatedRef(ref);\n\n    const mappedAction = useCallback((action: PageAction) => {\n      const { id, text, icon, label, ...rest } = action;\n\n      return (\n        <Button {...rest} key={id} icon={!!icon && !text} label={label || text}>\n          {!!icon && <Icon name={icon} />}\n          {!!text && text}\n        </Button>\n      );\n    }, []);\n\n    return (\n      <StyledTemplate>\n        <Flex\n          {...restProps}\n          ref={templateRef}\n          as={StyledTemplateRow}\n          container={{ alignItems: 'stretch', wrap: 'nowrap' }}\n        >\n          <StyledMenuColumn>\n            <StyledSkipNavigation\n              onClick={() => {\n                if (articleRef.current) articleRef.current.focus();\n              }}\n            >\n              Skip to page content\n            </StyledSkipNavigation>\n\n            <Flex as={StyledCategoryHeadingRow} container={{ alignItems: 'center' }}>\n              {categoryIcon && (\n                <Flex\n                  as={StyledCategoryIconBlock}\n                  container={{ alignItems: 'center', justify: 'center' }}\n                >\n                  <Icon name={categoryIcon} />\n                </Flex>\n              )}\n              <Text variant='h1'>{category}</Text>\n            </Flex>\n\n            <StyledNav>\n              <StyledNavList>\n                {navItemGroups.map((navItem, index) => {\n                  const key = hasProp(navItem, 'title') ? navItem.title : `navItem${index}`;\n\n                  return <NavGroup key={key} item={navItem} />;\n                })}\n              </StyledNavList>\n            </StyledNav>\n          </StyledMenuColumn>\n\n          <Flex\n            as={StyledPageArticle}\n            item={{ grow: 1 }}\n            ref={articleRef}\n            aria-label={pageTitle || 'Main Content'}\n            tabIndex={0}\n          >\n            {viewLoading && <Progress placement='local' />}\n\n            {!viewLoading && (\n              <>\n                {(pageTitle || pageActions) && (\n                  <Flex\n                    as={StyledArticleHeader}\n                    container={{\n                      justify: 'between',\n                      alignItems: 'center',\n                      wrap: 'wrap'\n                    }}\n                  >\n                    {pageTitle && <StyledPageTitle>{pageTitle}</StyledPageTitle>}\n\n                    {pageActions && !!pageActions.length && (\n                      <>\n                        {pageActions.length <= maxActions && (\n                          <StyledPageActionCol>\n                            {pageActions.reverse().map(mappedAction)}\n                          </StyledPageActionCol>\n                        )}\n\n                        {pageActions.length > maxActions && (\n                          <StyledPageActionCol>\n                            <MenuButton\n                              text='Actions'\n                              menu={{\n                                items: (pageActions as Action[])\n                                  .slice(maxActions - 1)\n                                  .map(({ id, text, onClick, ...rest }) => ({\n                                    id,\n                                    primary: text,\n                                    onClick,\n                                    ...rest\n                                  }))\n                              }}\n                            />\n\n                            {pageActions\n                              .slice(0, maxActions - 1)\n                              .reverse()\n                              .map(mappedAction)}\n                          </StyledPageActionCol>\n                        )}\n                      </>\n                    )}\n                  </Flex>\n                )}\n\n                {region}\n              </>\n            )}\n          </Flex>\n        </Flex>\n      </StyledTemplate>\n    );\n  }\n);\n\nexport default CategorySubPage;\n"]}
+{"version":3,"file":"CategorySubPage.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/CategorySubPage.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  createRef,\n  Ref,\n  forwardRef,\n  PropsWithoutRef,\n  FunctionComponent,\n  ReactNode,\n  useCallback,\n  useMemo,\n  MouseEventHandler\n} from 'react';\n\nimport { hasProp } from '../../utils';\nimport { useConsolidatedRef, useUID } from '../../hooks';\nimport Button, { ButtonProps } from '../Button';\nimport Flex from '../Flex';\nimport Icon from '../Icon';\nimport MenuButton from '../MenuButton';\nimport Text from '../Text';\nimport Progress from '../Progress';\nimport { Action, ForwardProps } from '../../types';\n\nimport {\n  StyledTemplate,\n  StyledTemplateRow,\n  StyledPageArticle,\n  StyledArticleHeader,\n  StyledPageActionCol,\n  StyledPageTitle,\n  StyledMenuColumn,\n  StyledCategoryHeadingRow,\n  StyledCategoryIconBlock,\n  StyledNav,\n  StyledNavList,\n  StyledNavGroup,\n  StyledNavGroupList,\n  StyledNavGroupHeader,\n  StyledNavItem,\n  StyledSkipNavigation\n} from './CategorySubPage.styles';\n\ninterface NavItemType extends ForwardProps {\n  text: string;\n  active?: boolean;\n  onClick?: MouseEventHandler;\n  href?: string;\n}\n\ninterface NavGroupType {\n  title?: string;\n  items: NavItemType[];\n}\n\ninterface PageAction\n  extends Pick<Action, 'id' | 'icon' | 'href' | 'onClick' | 'disabled'>,\n    Pick<ButtonProps, 'variant' | 'label' | 'aria-label' | 'loading'>,\n    ForwardProps {\n  /** Optional text to replace required text string in Action type */\n  text?: string;\n}\n\nexport interface TemplateProps {\n  /** Indicates that the primary view for the page cannot yet be rendered */\n  /** @default false */\n  viewLoading?: boolean;\n  /** Parent Category of page and all navigation items */\n  category: string;\n  /** Parent Category icon */\n  categoryIcon?: string;\n  navItemGroups: NavGroupType[];\n  pageTitle?: string;\n  /** Actions to render in fixed page header. Ordered by priority */\n  pageActions?: PageAction[];\n  /** Maximum top-level action buttons to render in header. Actions passed exceeding this limit will render in an action menu. */\n  /** @default 3 */\n  maxActions?: number;\n  /** Primary page content region */\n  region: ReactNode;\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst NavItem = ({ item: { href, text, active, ...restProps } }: { item: NavItemType }) => {\n  const isAnchor = !!href;\n\n  return (\n    <StyledNavItem\n      as='li'\n      selected={!!active}\n      tabType='horizontal'\n      inverted={false}\n      aria-current={active ? 'page' : undefined}\n    >\n      <Button {...restProps} href={isAnchor ? href : undefined} variant='text'>\n        {text}\n      </Button>\n    </StyledNavItem>\n  );\n};\n\nconst NavGroup = ({ item }: { item: NavGroupType }) => {\n  const mappedGroupedItems = useMemo(() => {\n    return item.items.map(groupedItem => {\n      const key = groupedItem.text;\n      return <NavItem item={groupedItem} key={key} />;\n    });\n  }, [item.items]);\n\n  const titledGroup: boolean = useMemo(() => {\n    return !!item.title && !!item.items.length;\n  }, [item.title, item.items]);\n\n  const anonGroup: boolean = useMemo(() => {\n    return !item.title && item.items.length > 1;\n  }, [item.title, item.items]);\n\n  const groupLabelId = useUID();\n  if (titledGroup) {\n    return (\n      <StyledNavGroup as='li'>\n        <StyledNavGroupHeader variant='h3' id={groupLabelId}>\n          {(item as NavGroupType).title}\n        </StyledNavGroupHeader>\n\n        <StyledNavGroupList aria-labelledby={groupLabelId}>{mappedGroupedItems}</StyledNavGroupList>\n      </StyledNavGroup>\n    );\n  }\n\n  if (anonGroup) {\n    return <StyledNavGroup>{mappedGroupedItems}</StyledNavGroup>;\n  }\n\n  if (item.items.length === 1) {\n    return <NavItem item={item.items[0]} />;\n  }\n\n  return null;\n};\n\nconst CategorySubPage: FunctionComponent<TemplateProps & ForwardProps> = forwardRef(\n  (\n    {\n      viewLoading = false,\n      category,\n      categoryIcon,\n      navItemGroups,\n      pageTitle,\n      pageActions,\n      region,\n      maxActions = 3,\n      ...restProps\n    }: PropsWithoutRef<TemplateProps>,\n    ref: TemplateProps['ref']\n  ) => {\n    const articleRef = createRef<HTMLElement>();\n    const templateRef = useConsolidatedRef(ref);\n\n    const mappedAction = useCallback((action: PageAction) => {\n      const { id, text, icon, label, ...rest } = action;\n\n      return (\n        <Button {...rest} key={id} icon={!!icon && !text} label={label || text}>\n          {!!icon && <Icon name={icon} />}\n          {!!text && text}\n        </Button>\n      );\n    }, []);\n\n    return (\n      <StyledTemplate>\n        <Flex\n          {...restProps}\n          ref={templateRef}\n          as={StyledTemplateRow}\n          container={{ alignItems: 'stretch', wrap: 'nowrap' }}\n        >\n          <StyledMenuColumn>\n            <StyledSkipNavigation\n              onClick={() => {\n                if (articleRef.current) articleRef.current.focus();\n              }}\n            >\n              Skip to page content\n            </StyledSkipNavigation>\n\n            <Flex as={StyledCategoryHeadingRow} container={{ alignItems: 'center' }}>\n              {categoryIcon && (\n                <Flex\n                  as={StyledCategoryIconBlock}\n                  container={{ alignItems: 'center', justify: 'center' }}\n                >\n                  <Icon name={categoryIcon} />\n                </Flex>\n              )}\n              <Text variant='h1'>{category}</Text>\n            </Flex>\n\n            <StyledNav>\n              <StyledNavList>\n                {navItemGroups.map((navItem, index) => {\n                  const key = hasProp(navItem, 'title') ? navItem.title : `navItem${index}`;\n\n                  return <NavGroup key={key} item={navItem} />;\n                })}\n              </StyledNavList>\n            </StyledNav>\n          </StyledMenuColumn>\n\n          <Flex\n            as={StyledPageArticle}\n            item={{ grow: 1 }}\n            ref={articleRef}\n            aria-label={pageTitle || 'Main Content'}\n            tabIndex={0}\n          >\n            {viewLoading && <Progress placement='local' />}\n\n            {!viewLoading && (\n              <>\n                {(pageTitle || pageActions) && (\n                  <Flex\n                    as={StyledArticleHeader}\n                    container={{\n                      justify: 'between',\n                      alignItems: 'center',\n                      wrap: 'wrap'\n                    }}\n                  >\n                    {pageTitle && <StyledPageTitle>{pageTitle}</StyledPageTitle>}\n\n                    {pageActions && !!pageActions.length && (\n                      <>\n                        {pageActions.length <= maxActions && (\n                          <StyledPageActionCol>\n                            {pageActions.reverse().map(mappedAction)}\n                          </StyledPageActionCol>\n                        )}\n\n                        {pageActions.length > maxActions && (\n                          <StyledPageActionCol>\n                            <MenuButton\n                              text='Actions'\n                              menu={{\n                                items: (pageActions as Action[])\n                                  .slice(maxActions - 1)\n                                  .map(({ id, text, onClick, ...rest }) => ({\n                                    id,\n                                    primary: text,\n                                    onClick,\n                                    ...rest\n                                  }))\n                              }}\n                            />\n\n                            {pageActions\n                              .slice(0, maxActions - 1)\n                              .reverse()\n                              .map(mappedAction)}\n                          </StyledPageActionCol>\n                        )}\n                      </>\n                    )}\n                  </Flex>\n                )}\n\n                {region}\n              </>\n            )}\n          </Flex>\n        </Flex>\n      </StyledTemplate>\n    );\n  }\n);\n\nexport default CategorySubPage;\n"]}

package/lib/components/PageTemplates/DashboardPage.d.ts

@@ -18,6 +18,7 @@ export declare const StyledFilterRegion: import("styled-components").StyledCompo
 export declare const StyledDashboardRegion: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledDashboardPageLayout: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     scrollContent: boolean | undefined;
+    minContentHeight?: number | undefined;
 } & Pick<DashboardPageProps, "fitToViewport">, never>;
 declare const DashboardPage: FunctionComponent<DashboardPageProps & ForwardProps>;
 export default DashboardPage;