@dnb/eufemia 10.16.0 → 10.18.0

package/components/input-masked/MultiInputMask.d.ts

@@ -47,6 +47,14 @@ export type MultiInputMaskProps<T extends string> = {
      * Runs when the input value changes. Has an object parameter with keys matching the id's defined in `inputs`. i.e. `{month: string, year: string}`
      */
     onChange?: (values: MultiInputMaskValue<T>) => void;
+    /**
+     * Runs when the input gains focus. Has an object parameter with keys matching the id's defined in `inputs`. i.e. `{month: string, year: string}`
+     */
+    onFocus?: (values: MultiInputMaskValue<T>) => void;
+    /**
+     * Runs when the input loses focus. Has an object parameter with keys matching the id's defined in `inputs`. i.e. `{month: string, year: string}`
+     */
+    onBlur?: (values: MultiInputMaskValue<T>) => void;
     /**
      * Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.
      */
@@ -63,8 +71,8 @@ export type MultiInputMaskProps<T extends string> = {
      * Text describing the content of the input more than the label. you can also send in a React component, so it gets wrapped inside the Input component.
      */
     suffix?: React.ReactNode;
-} & Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'ref' | 'value' | 'label'> & SpacingProps;
-declare function MultiInputMask<T extends string>({ label, labelDirection, inputs, delimiter, onChange: onChangeExternal, disabled, status, statusState, values: defaultValues, className, stretch, inputMode, suffix, ...props }: MultiInputMaskProps<T>): import("react/jsx-runtime").JSX.Element;
+} & Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'onFocus' | 'onBlur' | 'ref' | 'value' | 'label'> & SpacingProps;
+declare function MultiInputMask<T extends string>({ label, labelDirection, inputs, delimiter, onChange: onChangeExternal, disabled, status, statusState, values: defaultValues, className, stretch, inputMode, suffix, onBlur, onFocus, ...props }: MultiInputMaskProps<T>): import("react/jsx-runtime").JSX.Element;
 declare namespace MultiInputMask {
     var _formElement: boolean;
     var _supportsSpacingProps: boolean;

package/components/input-masked/MultiInputMask.js

@@ -1,9 +1,13 @@
 "use client";
 
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["label", "labelDirection", "inputs", "delimiter", "onChange", "disabled", "status", "statusState", "values", "className", "stretch", "inputMode", "suffix"],
-  _excluded2 = ["id", "label", "value", "mask", "placeholderCharacter", "delimiter", "disabled", "inputRef", "onKeyDown", "onChange"];
+const _excluded = ["label", "labelDirection", "inputs", "delimiter", "onChange", "disabled", "status", "statusState", "values", "className", "stretch", "inputMode", "suffix", "onBlur", "onFocus"],
+  _excluded2 = ["id", "label", "value", "mask", "placeholderCharacter", "delimiter", "disabled", "inputRef", "onKeyDown", "onChange", "onBlur", "onFocus"],
+  _excluded3 = ["target"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useRef } from 'react';
 import Input from '../Input';
 import TextMask from './TextMask';
@@ -27,7 +31,9 @@ function MultiInputMask(_ref) {
       className,
       stretch,
       inputMode,
-      suffix
+      suffix,
+      onBlur,
+      onFocus
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const [values, onChange] = useMultiInputValue({
@@ -63,6 +69,16 @@ function MultiInputMask(_ref) {
       delimiter: index !== inputs.length - 1 ? delimiter : undefined,
       onKeyDown: onKeyDown,
       onChange: onChange,
+      onFocus: () => {
+        if (onFocus) {
+          onFocus(values);
+        }
+      },
+      onBlur: () => {
+        if (onBlur) {
+          onBlur(values);
+        }
+      },
       disabled: disabled,
       inputRef: getInputRef
     })))
@@ -115,14 +131,17 @@ function MultiInputMaskInput(_ref3) {
       disabled,
       inputRef,
       onKeyDown,
-      onChange
+      onChange,
+      onBlur,
+      onFocus
     } = _ref3,
     attributes = _objectWithoutProperties(_ref3, _excluded2);
+  const shouldHighlight = !disabled && /\w+/.test(value);
   const markupId = `${id}-${makeUniqueId()}`;
   return React.createElement(React.Fragment, null, React.createElement(TextMask, _extends({
     id: `${markupId}__input`,
     "data-mask-id": id,
-    className: "dnb-input__input dnb-multi-input-mask__input" + (/\d+/.test(value) ? " dnb-multi-input-mask__input--highlight" : ""),
+    className: "dnb-input__input dnb-multi-input-mask__input" + (shouldHighlight ? " dnb-multi-input-mask__input--highlight" : ""),
     disabled: disabled,
     size: mask.length,
     mask: mask,
@@ -134,7 +153,20 @@ function MultiInputMaskInput(_ref3) {
     "aria-labelledby": `${markupId}__label`,
     ref: inputRef,
     onKeyDown: onKeyDown,
-    onFocus: onFocus,
+    onBlur: onBlur,
+    onFocus: _ref4 => {
+      let {
+          target
+        } = _ref4,
+        event = _objectWithoutProperties(_ref4, _excluded3);
+      target.focus();
+      target.select();
+      if (onFocus) {
+        onFocus(_objectSpread({
+          target
+        }, event));
+      }
+    },
     onChange: event => {
       onChange(id, removePlaceholder(event.target.value, placeholderCharacter));
     }
@@ -144,18 +176,11 @@ function MultiInputMaskInput(_ref3) {
     hidden: true
   }, label), delimiter && React.createElement("span", {
     "aria-hidden": true,
-    className: 'dnb-multi-input-mask__delimiter' + (value ? " dnb-multi-input-mask__delimiter--highlight" : "")
+    className: 'dnb-multi-input-mask__delimiter' + (shouldHighlight ? " dnb-multi-input-mask__delimiter--highlight" : "")
   }, delimiter));
   function removePlaceholder(value, placeholder) {
     return value.replace(RegExp(placeholder, 'gm'), '');
   }
-  function onFocus(_ref4) {
-    let {
-      target
-    } = _ref4;
-    target.focus();
-    target.select();
-  }
 }
 export default MultiInputMask;
 MultiInputMask._formElement = true;

package/components/input-masked/MultiInputMask.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiInputMask.js","names":["React","useRef","Input","TextMask","useHandleCursorPosition","classnames","FormLabel","createSpacingClasses","useMultiInputValue","makeUniqueId","MultiInputMask","_ref","label","labelDirection","inputs","delimiter","onChange","onChangeExternal","disabled","status","statusState","values","defaultValues","className","stretch","inputMode","suffix","props","_objectWithoutProperties","_excluded","callback","inputRefs","onKeyDown","current","getKeysToHandle","WrapperElement","createElement","element","onClick","onLegendClick","vertical","_extends","status_state","input_element","map","input","index","MultiInputMaskInput","key","id","value","length","undefined","inputRef","getInputRef","firstInput","focus","setSelectionRange","ref","includes","push","uniqueMasks","getUniqueMasks","size","pattern","next","replace","RegExp","reduce","keys","_ref2","mask","masks","Set","forEach","add","String","_ref3","placeholderCharacter","attributes","_excluded2","markupId","Fragment","test","placeholderChar","guide","showMask","keepCharPositions","onFocus","event","removePlaceholder","target","htmlFor","hidden","placeholder","_ref4","select","_formElement","_supportsSpacingProps"],"sources":["../../../../src/components/input-masked/MultiInputMask.tsx"],"sourcesContent":["import React, { Fragment, MutableRefObject, useRef } from 'react'\nimport Input from '../Input'\nimport TextMask from './TextMask'\nimport useHandleCursorPosition from './hooks/useHandleCursorPosition'\nimport classnames from 'classnames'\nimport FormLabel from '../FormLabel'\nimport { SpacingProps } from '../space/types'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport { FormStatusState, FormStatusText } from '../FormStatus'\nimport { useMultiInputValue } from './hooks/useMultiInputValues'\nimport { makeUniqueId } from '../../shared/component-helper'\n\nexport type MultiInputMaskInput<T extends string> = {\n  /**\n   * Defines the id for the input. This id is also used to map the input value to the correct property on the objects used for `values` and `onChange` parameters.\n   */\n  id: T\n  /**\n   * Label used by the input. The label itself is hidden, but required to uphold accessibility standards for screen readers.\n   */\n  label: React.ReactNode\n  /**\n   * Each RegExp item in the array defines what the mask should be for each subsequent character in the input. The length sets the size of the input, so an array of two items would produce an input of two characters\n   */\n  mask: RegExp[]\n  /**\n   * Sets the placeholder character used for the input.\n   */\n  placeholderCharacter: string\n} & Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'ref'>\n\nexport type MultiInputMaskValue<T extends string> = {\n  // eslint-disable-next-line no-unused-vars\n  [K in T]: string\n}\n\nexport type MultiInputMaskProps<T extends string> = {\n  /**\n   * The label describing the group of inputs inside the components.\n   */\n  label?: React.ReactNode\n  /**\n   * Use to change the label layout direction. Defaults to `horizontal`.\n   */\n  labelDirection?: 'vertical' | 'horizontal'\n  /**\n   * Used to define the different inputs representing the inputs in the component. The id's defined here is used to map input value to correct property in `values` parameters used in `onChange`\n   */\n  inputs: MultiInputMaskInput<T>[]\n  /**\n   * Values used for the inputs inside the component. Expects an object with keys matching the id's defined in `inputs`\n   */\n  values?: MultiInputMaskValue<T>\n  /**\n   * Defines the delimiter used to separate the inputs inside the component.\n   */\n  delimiter?: string\n  /**\n   * Runs when the input value changes. Has an object parameter with keys matching the id's defined in `inputs`. i.e. `{month: string, year: string}`\n   */\n  onChange?: (values: MultiInputMaskValue<T>) => void\n  /**\n   * Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.\n   */\n  status?: FormStatusText\n  /**\n   * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.\n   */\n  statusState?: FormStatusState\n  /**\n   * Set it to `true` in order to stretch the input to the available space. Defaults to false.\n   */\n  stretch?: boolean\n  /**\n   * Text describing the content of the input more than the label. you can also send in a React component, so it gets wrapped inside the Input component.\n   */\n  suffix?: React.ReactNode\n} & Omit<\n  React.HTMLProps<HTMLInputElement>,\n  'onChange' | 'ref' | 'value' | 'label'\n> &\n  SpacingProps\n\nfunction MultiInputMask<T extends string>({\n  label,\n  labelDirection = 'horizontal',\n  inputs,\n  delimiter,\n  onChange: onChangeExternal,\n  disabled,\n  status,\n  statusState,\n  values: defaultValues,\n  className,\n  stretch,\n  inputMode,\n  suffix,\n  ...props\n}: MultiInputMaskProps<T>) {\n  const [values, onChange] = useMultiInputValue({\n    inputs,\n    defaultValues,\n    callback: onChangeExternal,\n  })\n\n  const inputRefs = useRef<Array<MutableRefObject<HTMLInputElement>>>([])\n\n  const { onKeyDown } = useHandleCursorPosition(\n    inputRefs.current,\n    getKeysToHandle()\n  )\n\n  const WrapperElement = label ? 'fieldset' : 'div'\n\n  return (\n    <WrapperElement\n      className={classnames(\n        'dnb-multi-input-mask__fieldset',\n        labelDirection === 'horizontal' &&\n          'dnb-multi-input-mask__fieldset--horizontal',\n        createSpacingClasses(props)\n      )}\n    >\n      {label && (\n        <FormLabel\n          className={classnames(\n            'dnb-multi-input-mask__legend',\n            labelDirection === 'horizontal' &&\n              'dnb-multi-input-mask__legend--horizontal'\n          )}\n          element=\"legend\"\n          onClick={onLegendClick}\n          disabled={disabled}\n          vertical={labelDirection === 'vertical'}\n        >\n          {/* This <span/> wrapper is needed to make hover work in Safari Desktop */}\n          <span>{label}</span>\n        </FormLabel>\n      )}\n      <Input\n        {...props}\n        className={classnames('dnb-multi-input-mask', className)}\n        disabled={disabled}\n        status={status}\n        status_state={statusState}\n        suffix={suffix}\n        stretch={stretch}\n        input_element={inputs.map((input, index) => (\n          <MultiInputMaskInput\n            key={input.id}\n            {...input}\n            inputMode={inputMode}\n            value={values[input.id]}\n            delimiter={index !== inputs.length - 1 ? delimiter : undefined}\n            onKeyDown={onKeyDown}\n            onChange={onChange}\n            disabled={disabled}\n            inputRef={getInputRef}\n          />\n        ))}\n      />\n    </WrapperElement>\n  )\n\n  // Event handlers\n  function onLegendClick() {\n    if (disabled) {\n      return\n    }\n\n    const firstInput = inputRefs.current[0].current\n\n    firstInput.focus()\n    firstInput.setSelectionRange(0, 0)\n  }\n\n  // Utilities\n  function getInputRef(ref: any) {\n    const inputRef = ref?.inputRef\n\n    if (inputRef && !inputRefs.current.includes(inputRef)) {\n      inputRefs.current.push(inputRef)\n    }\n  }\n\n  function getKeysToHandle() {\n    const uniqueMasks = getUniqueMasks()\n\n    // Return the only one RegExp since all the inputs are using the same mask\n    if (uniqueMasks.size === 1) {\n      const pattern = uniqueMasks.values().next().value.replace(/\\//g, '')\n      return new RegExp(pattern)\n    }\n\n    // If there are multiple types of masks used, then map the maps to an object based on input ids\n    // So that useHandleCursorPosition can do a per character test to see if the pressed key should be handled or not\n    return inputs.reduce(\n      (keys, { id, mask }) => {\n        keys[id] = mask\n\n        return keys\n      },\n      {} as Record<T, RegExp[]>\n    )\n  }\n\n  function getUniqueMasks() {\n    const masks = new Set()\n\n    inputs.forEach((input) => {\n      input.mask.forEach((pattern) => masks.add(String(pattern)))\n    })\n\n    return masks\n  }\n}\n\ntype MultiInputMaskInputProps<T extends string> =\n  MultiInputMaskInput<T> & {\n    id: MultiInputMaskInput<T>['id']\n    label: MultiInputMaskInput<T>['label']\n    value: string\n    mask: MultiInputMaskInput<T>['mask']\n    placeholderCharacter: MultiInputMaskInput<T>['placeholderCharacter']\n    delimiter?: MultiInputMaskProps<T>['delimiter']\n    disabled: boolean\n    onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void\n    onChange: (\n      id: string,\n      placeholderCharacter: MultiInputMaskInput<T>['placeholderCharacter']\n    ) => void\n    inputRef: any\n  }\n\nfunction MultiInputMaskInput<T extends string>({\n  id,\n  label,\n  value,\n  mask,\n  placeholderCharacter,\n  delimiter,\n  disabled,\n  inputRef,\n  onKeyDown,\n  onChange,\n  ...attributes\n}: MultiInputMaskInputProps<T>) {\n  const markupId = `${id}-${makeUniqueId()}`\n\n  return (\n    <>\n      <TextMask\n        id={`${markupId}__input`}\n        data-mask-id={id}\n        className={classnames(\n          'dnb-input__input',\n          'dnb-multi-input-mask__input',\n          /\\d+/.test(value) && 'dnb-multi-input-mask__input--highlight'\n        )}\n        disabled={disabled}\n        size={mask.length}\n        mask={mask}\n        value={value ?? ''}\n        placeholderChar={placeholderCharacter}\n        guide={true}\n        showMask={true}\n        keepCharPositions={false} // so we can overwrite next value, if it already exists\n        aria-labelledby={`${markupId}__label`}\n        ref={inputRef}\n        onKeyDown={onKeyDown}\n        onFocus={onFocus}\n        onChange={(event) => {\n          onChange(\n            id,\n            removePlaceholder(event.target.value, placeholderCharacter)\n          )\n        }}\n        {...attributes}\n      />\n      <label\n        id={`${markupId}__label`}\n        htmlFor={`${markupId}__input`}\n        hidden\n      >\n        {label}\n      </label>\n      {delimiter && (\n        <span\n          aria-hidden\n          className={classnames(\n            'dnb-multi-input-mask__delimiter',\n            value && 'dnb-multi-input-mask__delimiter--highlight'\n          )}\n        >\n          {delimiter}\n        </span>\n      )}\n    </>\n  )\n\n  function removePlaceholder(value: string, placeholder: string) {\n    return value.replace(RegExp(placeholder, 'gm'), '')\n  }\n\n  function onFocus({ target }: React.FocusEvent<HTMLInputElement>) {\n    target.focus()\n    target.select()\n  }\n}\n\nexport default MultiInputMask\n\nMultiInputMask._formElement = true\nMultiInputMask._supportsSpacingProps = true\n"],"mappings":"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"}
+{"version":3,"file":"MultiInputMask.js","names":["React","useRef","Input","TextMask","useHandleCursorPosition","classnames","FormLabel","createSpacingClasses","useMultiInputValue","makeUniqueId","MultiInputMask","_ref","label","labelDirection","inputs","delimiter","onChange","onChangeExternal","disabled","status","statusState","values","defaultValues","className","stretch","inputMode","suffix","onBlur","onFocus","props","_objectWithoutProperties","_excluded","callback","inputRefs","onKeyDown","current","getKeysToHandle","WrapperElement","createElement","element","onClick","onLegendClick","vertical","_extends","status_state","input_element","map","input","index","MultiInputMaskInput","key","id","value","length","undefined","inputRef","getInputRef","firstInput","focus","setSelectionRange","ref","includes","push","uniqueMasks","getUniqueMasks","size","pattern","next","replace","RegExp","reduce","keys","_ref2","mask","masks","Set","forEach","add","String","_ref3","placeholderCharacter","attributes","_excluded2","shouldHighlight","test","markupId","Fragment","placeholderChar","guide","showMask","keepCharPositions","_ref4","target","event","_excluded3","select","_objectSpread","removePlaceholder","htmlFor","hidden","placeholder","_formElement","_supportsSpacingProps"],"sources":["../../../../src/components/input-masked/MultiInputMask.tsx"],"sourcesContent":["import React, { Fragment, MutableRefObject, useRef } from 'react'\nimport Input from '../Input'\nimport TextMask from './TextMask'\nimport useHandleCursorPosition from './hooks/useHandleCursorPosition'\nimport classnames from 'classnames'\nimport FormLabel from '../FormLabel'\nimport { SpacingProps } from '../space/types'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport { FormStatusState, FormStatusText } from '../FormStatus'\nimport { useMultiInputValue } from './hooks/useMultiInputValues'\nimport { makeUniqueId } from '../../shared/component-helper'\n\nexport type MultiInputMaskInput<T extends string> = {\n  /**\n   * Defines the id for the input. This id is also used to map the input value to the correct property on the objects used for `values` and `onChange` parameters.\n   */\n  id: T\n  /**\n   * Label used by the input. The label itself is hidden, but required to uphold accessibility standards for screen readers.\n   */\n  label: React.ReactNode\n  /**\n   * Each RegExp item in the array defines what the mask should be for each subsequent character in the input. The length sets the size of the input, so an array of two items would produce an input of two characters\n   */\n  mask: RegExp[]\n  /**\n   * Sets the placeholder character used for the input.\n   */\n  placeholderCharacter: string\n} & Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'ref'>\n\nexport type MultiInputMaskValue<T extends string> = {\n  // eslint-disable-next-line no-unused-vars\n  [K in T]: string\n}\n\nexport type MultiInputMaskProps<T extends string> = {\n  /**\n   * The label describing the group of inputs inside the components.\n   */\n  label?: React.ReactNode\n  /**\n   * Use to change the label layout direction. Defaults to `horizontal`.\n   */\n  labelDirection?: 'vertical' | 'horizontal'\n  /**\n   * Used to define the different inputs representing the inputs in the component. The id's defined here is used to map input value to correct property in `values` parameters used in `onChange`\n   */\n  inputs: MultiInputMaskInput<T>[]\n  /**\n   * Values used for the inputs inside the component. Expects an object with keys matching the id's defined in `inputs`\n   */\n  values?: MultiInputMaskValue<T>\n  /**\n   * Defines the delimiter used to separate the inputs inside the component.\n   */\n  delimiter?: string\n  /**\n   * Runs when the input value changes. Has an object parameter with keys matching the id's defined in `inputs`. i.e. `{month: string, year: string}`\n   */\n  onChange?: (values: MultiInputMaskValue<T>) => void\n  /**\n   * Runs when the input gains focus. Has an object parameter with keys matching the id's defined in `inputs`. i.e. `{month: string, year: string}`\n   */\n  onFocus?: (values: MultiInputMaskValue<T>) => void\n  /**\n   * Runs when the input loses focus. Has an object parameter with keys matching the id's defined in `inputs`. i.e. `{month: string, year: string}`\n   */\n  onBlur?: (values: MultiInputMaskValue<T>) => void\n  /**\n   * Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.\n   */\n  status?: FormStatusText\n  /**\n   * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.\n   */\n  statusState?: FormStatusState\n  /**\n   * Set it to `true` in order to stretch the input to the available space. Defaults to false.\n   */\n  stretch?: boolean\n  /**\n   * Text describing the content of the input more than the label. you can also send in a React component, so it gets wrapped inside the Input component.\n   */\n  suffix?: React.ReactNode\n} & Omit<\n  React.HTMLProps<HTMLInputElement>,\n  'onChange' | 'onFocus' | 'onBlur' | 'ref' | 'value' | 'label'\n> &\n  SpacingProps\n\nfunction MultiInputMask<T extends string>({\n  label,\n  labelDirection = 'horizontal',\n  inputs,\n  delimiter,\n  onChange: onChangeExternal,\n  disabled,\n  status,\n  statusState,\n  values: defaultValues,\n  className,\n  stretch,\n  inputMode,\n  suffix,\n  onBlur,\n  onFocus,\n  ...props\n}: MultiInputMaskProps<T>) {\n  const [values, onChange] = useMultiInputValue({\n    inputs,\n    defaultValues,\n    callback: onChangeExternal,\n  })\n\n  const inputRefs = useRef<Array<MutableRefObject<HTMLInputElement>>>([])\n\n  const { onKeyDown } = useHandleCursorPosition(\n    inputRefs.current,\n    getKeysToHandle()\n  )\n\n  const WrapperElement = label ? 'fieldset' : 'div'\n\n  return (\n    <WrapperElement\n      className={classnames(\n        'dnb-multi-input-mask__fieldset',\n        labelDirection === 'horizontal' &&\n          'dnb-multi-input-mask__fieldset--horizontal',\n        createSpacingClasses(props)\n      )}\n    >\n      {label && (\n        <FormLabel\n          className={classnames(\n            'dnb-multi-input-mask__legend',\n            labelDirection === 'horizontal' &&\n              'dnb-multi-input-mask__legend--horizontal'\n          )}\n          element=\"legend\"\n          onClick={onLegendClick}\n          disabled={disabled}\n          vertical={labelDirection === 'vertical'}\n        >\n          {/* This <span/> wrapper is needed to make hover work in Safari Desktop */}\n          <span>{label}</span>\n        </FormLabel>\n      )}\n      <Input\n        {...props}\n        className={classnames('dnb-multi-input-mask', className)}\n        disabled={disabled}\n        status={status}\n        status_state={statusState}\n        suffix={suffix}\n        stretch={stretch}\n        input_element={inputs.map((input, index) => (\n          <MultiInputMaskInput\n            key={input.id}\n            {...input}\n            inputMode={inputMode}\n            value={values[input.id]}\n            delimiter={index !== inputs.length - 1 ? delimiter : undefined}\n            onKeyDown={onKeyDown}\n            onChange={onChange}\n            onFocus={() => {\n              if (onFocus) {\n                onFocus(values)\n              }\n            }}\n            onBlur={() => {\n              if (onBlur) {\n                onBlur(values)\n              }\n            }}\n            disabled={disabled}\n            inputRef={getInputRef}\n          />\n        ))}\n      />\n    </WrapperElement>\n  )\n\n  // Event handlers\n  function onLegendClick() {\n    if (disabled) {\n      return\n    }\n\n    const firstInput = inputRefs.current[0].current\n\n    firstInput.focus()\n    firstInput.setSelectionRange(0, 0)\n  }\n\n  // Utilities\n  function getInputRef(ref: any) {\n    const inputRef = ref?.inputRef\n\n    if (inputRef && !inputRefs.current.includes(inputRef)) {\n      inputRefs.current.push(inputRef)\n    }\n  }\n\n  function getKeysToHandle() {\n    const uniqueMasks = getUniqueMasks()\n\n    // Return the only one RegExp since all the inputs are using the same mask\n    if (uniqueMasks.size === 1) {\n      const pattern = uniqueMasks.values().next().value.replace(/\\//g, '')\n      return new RegExp(pattern)\n    }\n\n    // If there are multiple types of masks used, then map the maps to an object based on input ids\n    // So that useHandleCursorPosition can do a per character test to see if the pressed key should be handled or not\n    return inputs.reduce(\n      (keys, { id, mask }) => {\n        keys[id] = mask\n\n        return keys\n      },\n      {} as Record<T, RegExp[]>\n    )\n  }\n\n  function getUniqueMasks() {\n    const masks = new Set()\n\n    inputs.forEach((input) => {\n      input.mask.forEach((pattern) => masks.add(String(pattern)))\n    })\n\n    return masks\n  }\n}\n\ntype MultiInputMaskInputProps<T extends string> =\n  MultiInputMaskInput<T> & {\n    id: MultiInputMaskInput<T>['id']\n    label: MultiInputMaskInput<T>['label']\n    value: string\n    mask: MultiInputMaskInput<T>['mask']\n    placeholderCharacter: MultiInputMaskInput<T>['placeholderCharacter']\n    delimiter?: MultiInputMaskProps<T>['delimiter']\n    disabled: boolean\n    onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void\n    onChange: (\n      id: string,\n      placeholderCharacter: MultiInputMaskInput<T>['placeholderCharacter']\n    ) => void\n    inputRef: any\n  }\n\nfunction MultiInputMaskInput<T extends string>({\n  id,\n  label,\n  value,\n  mask,\n  placeholderCharacter,\n  delimiter,\n  disabled,\n  inputRef,\n  onKeyDown,\n  onChange,\n  onBlur,\n  onFocus,\n  ...attributes\n}: MultiInputMaskInputProps<T>) {\n  const shouldHighlight = !disabled && /\\w+/.test(value)\n  const markupId = `${id}-${makeUniqueId()}`\n\n  return (\n    <>\n      <TextMask\n        id={`${markupId}__input`}\n        data-mask-id={id}\n        className={classnames(\n          'dnb-input__input',\n          'dnb-multi-input-mask__input',\n          shouldHighlight && 'dnb-multi-input-mask__input--highlight'\n        )}\n        disabled={disabled}\n        size={mask.length}\n        mask={mask}\n        value={value ?? ''}\n        placeholderChar={placeholderCharacter}\n        guide={true}\n        showMask={true}\n        keepCharPositions={false} // so we can overwrite next value, if it already exists\n        aria-labelledby={`${markupId}__label`}\n        ref={inputRef}\n        onKeyDown={onKeyDown}\n        onBlur={onBlur}\n        onFocus={({ target, ...event }) => {\n          target.focus()\n          target.select()\n\n          if (onFocus) {\n            onFocus({ target, ...event })\n          }\n        }}\n        onChange={(event) => {\n          onChange(\n            id,\n            removePlaceholder(event.target.value, placeholderCharacter)\n          )\n        }}\n        {...attributes}\n      />\n      <label\n        id={`${markupId}__label`}\n        htmlFor={`${markupId}__input`}\n        hidden\n      >\n        {label}\n      </label>\n      {delimiter && (\n        <span\n          aria-hidden\n          className={classnames(\n            'dnb-multi-input-mask__delimiter',\n            shouldHighlight && 'dnb-multi-input-mask__delimiter--highlight'\n          )}\n        >\n          {delimiter}\n        </span>\n      )}\n    </>\n  )\n\n  function removePlaceholder(value: string, placeholder: string) {\n    return value.replace(RegExp(placeholder, 'gm'), '')\n  }\n}\n\nexport default MultiInputMask\n\nMultiInputMask._formElement = true\nMultiInputMask._supportsSpacingProps = true\n"],"mappings":";;;;;;;;;;AAAA,OAAOA,KAAK,IAAgCC,MAAM,QAAQ,OAAO;AACjE,OAAOC,KAAK,MAAM,UAAU;AAC5B,OAAOC,QAAQ,MAAM,YAAY;AACjC,OAAOC,uBAAuB,MAAM,iCAAiC;AACrE,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,SAAS,MAAM,cAAc;AAEpC,SAASC,oBAAoB,QAAQ,wBAAwB;AAE7D,SAASC,kBAAkB,QAAQ,6BAA6B;AAChE,SAASC,YAAY,QAAQ,+BAA+B;AAiF5D,SAASC,cAAcA,CAAAC,IAAA,EAiBI;EAAA,IAjBe;MACxCC,KAAK;MACLC,cAAc,GAAG,YAAY;MAC7BC,MAAM;MACNC,SAAS;MACTC,QAAQ,EAAEC,gBAAgB;MAC1BC,QAAQ;MACRC,MAAM;MACNC,WAAW;MACXC,MAAM,EAAEC,aAAa;MACrBC,SAAS;MACTC,OAAO;MACPC,SAAS;MACTC,MAAM;MACNC,MAAM;MACNC;IAEsB,CAAC,GAAAjB,IAAA;IADpBkB,KAAK,GAAAC,wBAAA,CAAAnB,IAAA,EAAAoB,SAAA;EAER,MAAM,CAACV,MAAM,EAAEL,QAAQ,CAAC,GAAGR,kBAAkB,CAAC;IAC5CM,MAAM;IACNQ,aAAa;IACbU,QAAQ,EAAEf;EACZ,CAAC,CAAC;EAEF,MAAMgB,SAAS,GAAGhC,MAAM,CAA4C,EAAE,CAAC;EAEvE,MAAM;IAAEiC;EAAU,CAAC,GAAG9B,uBAAuB,CAC3C6B,SAAS,CAACE,OAAO,EACjBC,eAAe,CAAC,CAClB,CAAC;EAED,MAAMC,cAAc,GAAGzB,KAAK,GAAG,UAAU,GAAG,KAAK;EAEjD,OACEZ,KAAA,CAAAsC,aAAA,CAACD,cAAc;IACbd,SAAS,EAAElB,UAAU,CACnB,gCAAgC,EAGhCE,oBAAoB,CAACsB,KAAK,CAAC,EAF3BhB,cAAc,KAAK,YAAY,IAC7B,4CAEJ;EAAE,GAEDD,KAAK,IACJZ,KAAA,CAAAsC,aAAA,CAAChC,SAAS;IACRiB,SAAS,EACP,8BAA8B,IAC9BV,cAAc,KAAK,YAAY,oDAE/B;IACF0B,OAAO,EAAC,QAAQ;IAChBC,OAAO,EAAEC,aAAc;IACvBvB,QAAQ,EAAEA,QAAS;IACnBwB,QAAQ,EAAE7B,cAAc,KAAK;EAAW,GAGxCb,KAAA,CAAAsC,aAAA,eAAO1B,KAAY,CACV,CACZ,EACDZ,KAAA,CAAAsC,aAAA,CAACpC,KAAK,EAAAyC,QAAA,KACAd,KAAK;IACTN,SAAS,EAAElB,UAAU,CAAC,sBAAsB,EAAEkB,SAAS,CAAE;IACzDL,QAAQ,EAAEA,QAAS;IACnBC,MAAM,EAAEA,MAAO;IACfyB,YAAY,EAAExB,WAAY;IAC1BM,MAAM,EAAEA,MAAO;IACfF,OAAO,EAAEA,OAAQ;IACjBqB,aAAa,EAAE/B,MAAM,CAACgC,GAAG,CAAC,CAACC,KAAK,EAAEC,KAAK,KACrChD,KAAA,CAAAsC,aAAA,CAACW,mBAAmB,EAAAN,QAAA;MAClBO,GAAG,EAAEH,KAAK,CAACI;IAAG,GACVJ,KAAK;MACTtB,SAAS,EAAEA,SAAU;MACrB2B,KAAK,EAAE/B,MAAM,CAAC0B,KAAK,CAACI,EAAE,CAAE;MACxBpC,SAAS,EAAEiC,KAAK,KAAKlC,MAAM,CAACuC,MAAM,GAAG,CAAC,GAAGtC,SAAS,GAAGuC,SAAU;MAC/DpB,SAAS,EAAEA,SAAU;MACrBlB,QAAQ,EAAEA,QAAS;MACnBY,OAAO,EAAEA,CAAA,KAAM;QACb,IAAIA,OAAO,EAAE;UACXA,OAAO,CAACP,MAAM,CAAC;QACjB;MACF,CAAE;MACFM,MAAM,EAAEA,CAAA,KAAM;QACZ,IAAIA,MAAM,EAAE;UACVA,MAAM,CAACN,MAAM,CAAC;QAChB;MACF,CAAE;MACFH,QAAQ,EAAEA,QAAS;MACnBqC,QAAQ,EAAEC;IAAY,EACvB,CACF;EAAE,EACJ,CACa,CAAC;EAInB,SAASf,aAAaA,CAAA,EAAG;IACvB,IAAIvB,QAAQ,EAAE;MACZ;IACF;IAEA,MAAMuC,UAAU,GAAGxB,SAAS,CAACE,OAAO,CAAC,CAAC,CAAC,CAACA,OAAO;IAE/CsB,UAAU,CAACC,KAAK,CAAC,CAAC;IAClBD,UAAU,CAACE,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC;EACpC;EAGA,SAASH,WAAWA,CAACI,GAAQ,EAAE;IAC7B,MAAML,QAAQ,GAAGK,GAAG,aAAHA,GAAG,uBAAHA,GAAG,CAAEL,QAAQ;IAE9B,IAAIA,QAAQ,IAAI,CAACtB,SAAS,CAACE,OAAO,CAAC0B,QAAQ,CAACN,QAAQ,CAAC,EAAE;MACrDtB,SAAS,CAACE,OAAO,CAAC2B,IAAI,CAACP,QAAQ,CAAC;IAClC;EACF;EAEA,SAASnB,eAAeA,CAAA,EAAG;IACzB,MAAM2B,WAAW,GAAGC,cAAc,CAAC,CAAC;IAGpC,IAAID,WAAW,CAACE,IAAI,KAAK,CAAC,EAAE;MAC1B,MAAMC,OAAO,GAAGH,WAAW,CAAC1C,MAAM,CAAC,CAAC,CAAC8C,IAAI,CAAC,CAAC,CAACf,KAAK,CAACgB,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC;MACpE,OAAO,IAAIC,MAAM,CAACH,OAAO,CAAC;IAC5B;IAIA,OAAOpD,MAAM,CAACwD,MAAM,CAClB,CAACC,IAAI,EAAAC,KAAA,KAAmB;MAAA,IAAjB;QAAErB,EAAE;QAAEsB;MAAK,CAAC,GAAAD,KAAA;MACjBD,IAAI,CAACpB,EAAE,CAAC,GAAGsB,IAAI;MAEf,OAAOF,IAAI;IACb,CAAC,EACD,CAAC,CACH,CAAC;EACH;EAEA,SAASP,cAAcA,CAAA,EAAG;IACxB,MAAMU,KAAK,GAAG,IAAIC,GAAG,CAAC,CAAC;IAEvB7D,MAAM,CAAC8D,OAAO,CAAE7B,KAAK,IAAK;MACxBA,KAAK,CAAC0B,IAAI,CAACG,OAAO,CAAEV,OAAO,IAAKQ,KAAK,CAACG,GAAG,CAACC,MAAM,CAACZ,OAAO,CAAC,CAAC,CAAC;IAC7D,CAAC,CAAC;IAEF,OAAOQ,KAAK;EACd;AACF;AAmBA,SAASzB,mBAAmBA,CAAA8B,KAAA,EAcI;EAAA,IAde;MAC7C5B,EAAE;MACFvC,KAAK;MACLwC,KAAK;MACLqB,IAAI;MACJO,oBAAoB;MACpBjE,SAAS;MACTG,QAAQ;MACRqC,QAAQ;MACRrB,SAAS;MACTlB,QAAQ;MACRW,MAAM;MACNC;IAE2B,CAAC,GAAAmD,KAAA;IADzBE,UAAU,GAAAnD,wBAAA,CAAAiD,KAAA,EAAAG,UAAA;EAEb,MAAMC,eAAe,GAAG,CAACjE,QAAQ,IAAI,KAAK,CAACkE,IAAI,CAAChC,KAAK,CAAC;EACtD,MAAMiC,QAAQ,GAAI,GAAElC,EAAG,IAAG1C,YAAY,CAAC,CAAE,EAAC;EAE1C,OACET,KAAA,CAAAsC,aAAA,CAAAtC,KAAA,CAAAsF,QAAA,QACEtF,KAAA,CAAAsC,aAAA,CAACnC,QAAQ,EAAAwC,QAAA;IACPQ,EAAE,EAAG,GAAEkC,QAAS,SAAS;IACzB,gBAAclC,EAAG;IACjB5B,SAAS,oDAGP4D,eAAe,kDACf;IACFjE,QAAQ,EAAEA,QAAS;IACnB+C,IAAI,EAAEQ,IAAI,CAACpB,MAAO;IAClBoB,IAAI,EAAEA,IAAK;IACXrB,KAAK,EAAEA,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,EAAG;IACnBmC,eAAe,EAAEP,oBAAqB;IACtCQ,KAAK,EAAE,IAAK;IACZC,QAAQ,EAAE,IAAK;IACfC,iBAAiB,EAAE,KAAM;IACzB,mBAAkB,GAAEL,QAAS,SAAS;IACtCzB,GAAG,EAAEL,QAAS;IACdrB,SAAS,EAAEA,SAAU;IACrBP,MAAM,EAAEA,MAAO;IACfC,OAAO,EAAE+D,KAAA,IAA0B;MAAA,IAAzB;UAAEC;QAAiB,CAAC,GAAAD,KAAA;QAAPE,KAAK,GAAA/D,wBAAA,CAAA6D,KAAA,EAAAG,UAAA;MAC1BF,MAAM,CAAClC,KAAK,CAAC,CAAC;MACdkC,MAAM,CAACG,MAAM,CAAC,CAAC;MAEf,IAAInE,OAAO,EAAE;QACXA,OAAO,CAAAoE,aAAA;UAAGJ;QAAM,GAAKC,KAAK,CAAE,CAAC;MAC/B;IACF,CAAE;IACF7E,QAAQ,EAAG6E,KAAK,IAAK;MACnB7E,QAAQ,CACNmC,EAAE,EACF8C,iBAAiB,CAACJ,KAAK,CAACD,MAAM,CAACxC,KAAK,EAAE4B,oBAAoB,CAC5D,CAAC;IACH;EAAE,GACEC,UAAU,CACf,CAAC,EACFjF,KAAA,CAAAsC,aAAA;IACEa,EAAE,EAAG,GAAEkC,QAAS,SAAS;IACzBa,OAAO,EAAG,GAAEb,QAAS,SAAS;IAC9Bc,MAAM;EAAA,GAELvF,KACI,CAAC,EACPG,SAAS,IACRf,KAAA,CAAAsC,aAAA;IACE,mBAAW;IACXf,SAAS,EACP,iCAAiC,IACjC4D,eAAe;EACf,GAEDpE,SACG,CAER,CAAC;EAGL,SAASkF,iBAAiBA,CAAC7C,KAAa,EAAEgD,WAAmB,EAAE;IAC7D,OAAOhD,KAAK,CAACgB,OAAO,CAACC,MAAM,CAAC+B,WAAW,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC;EACrD;AACF;AAEA,eAAe1F,cAAc;AAE7BA,cAAc,CAAC2F,YAAY,GAAG,IAAI;AAClC3F,cAAc,CAAC4F,qBAAqB,GAAG,IAAI"}

package/components/input-masked/hooks/useHandleCursorPosition.js

@@ -15,13 +15,14 @@ function useHandleCursorPosition(inputRefs, keysToHandle) {
       keysToHandle,
       input
     })) === null || _getKeysToHandle === void 0 ? void 0 : _getKeysToHandle.test(pressedKey)) || /(ArrowRight|ArrowLeft|Backspace)/.test(pressedKey);
+    const hasSelection = hasSelectedValue(input);
+    const inputPosition = !hasSelection && getInputPosition(input, inputs);
     const initialSelectionStart = input.selectionStart;
-    const inputPosition = getInputPosition(input, inputs);
     window.requestAnimationFrame(() => {
-      const caretPosition = getCaretPosition(input);
-      if (!hasPressedKeysToHandle) {
+      if (!hasPressedKeysToHandle || hasSelection) {
         return;
       }
+      const caretPosition = getCaretPosition(input);
       if (caretPosition === 'last' && inputPosition !== 'last' && !(initialSelectionStart === 1 && pressedKey === 'ArrowRight')) {
         return goToInput('next', input, inputs);
       }
@@ -73,6 +74,9 @@ function getSelectionPositions(input) {
     end: Number(input.size)
   };
 }
+function hasSelectedValue(input) {
+  return input.selectionEnd > input.selectionStart;
+}
 function getCaretPosition(input) {
   const {
     start,

package/components/input-masked/hooks/useHandleCursorPosition.js.map

@@ -1 +1 @@
-{"version":3,"file":"useHandleCursorPosition.js","names":["useEffect","useRef","useHandleCursorPosition","inputRefs","keysToHandle","inputList","refsToInputList","current","onKeyDown","event","_getKeysToHandle","inputs","input","target","pressedKey","key","hasPressedKeysToHandle","getKeysToHandle","test","initialSelectionStart","selectionStart","inputPosition","getInputPosition","window","requestAnimationFrame","caretPosition","getCaretPosition","goToInput","map","ref","filter","Boolean","_ref","undefined","RegExp","masks","dataset","maskId","selection","selectionEnd","maskIndex","size","length","firstInput","lastInput","getSelectionPositions","start","end","Number","to","currentInputIndex","indexOf","siblingIndex","siblingInput","focus","setSelectionRange"],"sources":["../../../../../src/components/input-masked/hooks/useHandleCursorPosition.ts"],"sourcesContent":["import { MutableRefObject, useEffect, useRef } from 'react'\n\nfunction useHandleCursorPosition(\n  inputRefs: MutableRefObject<HTMLInputElement>[],\n  keysToHandle?: RegExp | { [inputId: string]: RegExp[] }\n) {\n  const inputList = useRef(refsToInputList(inputRefs))\n\n  // To keep the refs.current in synch with component of use, or else it wont be possible to navigate to the next input, without triggering a re-render first.\n  useEffect(() => {\n    inputList.current = refsToInputList(inputRefs)\n  }, [inputRefs])\n\n  function onKeyDown(event: React.KeyboardEvent) {\n    const inputs = inputList.current\n    const input = event.target as HTMLInputElement\n\n    const pressedKey = event.key\n\n    const hasPressedKeysToHandle =\n      getKeysToHandle({ keysToHandle, input })?.test(pressedKey) ||\n      /(ArrowRight|ArrowLeft|Backspace)/.test(pressedKey)\n\n    const initialSelectionStart = input.selectionStart\n\n    const inputPosition = getInputPosition(input, inputs)\n\n    window.requestAnimationFrame(() => {\n      const caretPosition = getCaretPosition(input)\n\n      if (!hasPressedKeysToHandle) {\n        return // stop here\n      }\n\n      if (\n        caretPosition === 'last' &&\n        inputPosition !== 'last' &&\n        !(initialSelectionStart === 1 && pressedKey === 'ArrowRight')\n      ) {\n        return goToInput('next', input, inputs)\n      }\n\n      if (\n        caretPosition === 'first' &&\n        inputPosition !== 'first' &&\n        !(\n          initialSelectionStart === 1 &&\n          (pressedKey === 'ArrowLeft' || pressedKey === 'Backspace')\n        )\n      ) {\n        return goToInput('previous', input, inputs)\n      }\n    })\n  }\n\n  return { onKeyDown }\n}\n\n// Helpers\nfunction refsToInputList(inputRefs: MutableRefObject<HTMLInputElement>[]) {\n  return inputRefs.map((ref) => ref.current).filter(Boolean)\n}\n\ntype GetKeysToHandleParams = {\n  keysToHandle: RegExp | { [inputId: string]: RegExp[] }\n  input: HTMLInputElement\n}\n\nfunction getKeysToHandle({ keysToHandle, input }: GetKeysToHandleParams) {\n  if (!keysToHandle) {\n    return undefined\n  }\n\n  if (keysToHandle instanceof RegExp) {\n    return keysToHandle\n  }\n\n  const masks = keysToHandle[input.dataset.maskId]\n\n  const selection =\n    input.selectionStart === input.selectionEnd\n      ? input.selectionStart\n      : undefined\n\n  if (!selection) {\n    return undefined\n  }\n\n  const maskIndex = selection === input.size ? masks.length - 1 : selection\n\n  return masks[maskIndex]\n}\n\nfunction getInputPosition(\n  input: HTMLInputElement,\n  inputs: HTMLInputElement[]\n) {\n  const firstInput = inputs[0]\n  const lastInput = inputs[inputs.length - 1]\n\n  if (input === firstInput) {\n    return 'first'\n  }\n\n  if (input === lastInput) {\n    return 'last'\n  }\n\n  return 'non-initial'\n}\n\nfunction getSelectionPositions(input: HTMLInputElement) {\n  return { start: 0, end: Number(input.size) }\n}\n\nfunction getCaretPosition(input: HTMLInputElement) {\n  const { start, end } = getSelectionPositions(input)\n\n  const selectionStart = input.selectionStart\n  const selectionEnd = input.selectionEnd\n\n  if (selectionStart === start && selectionEnd === start) {\n    return 'first'\n  }\n\n  if (selectionStart === end && selectionEnd === end) {\n    return 'last'\n  }\n\n  return 'non-initial'\n}\n\nfunction goToInput(\n  to: 'next' | 'previous',\n  input: HTMLInputElement,\n  inputs: HTMLInputElement[]\n) {\n  const currentInputIndex = inputs.indexOf(input)\n\n  const siblingIndex =\n    to === 'next'\n      ? currentInputIndex + 1\n      : to === 'previous'\n      ? currentInputIndex - 1\n      : 0\n\n  const siblingInput = inputs[siblingIndex]\n\n  const { start, end } = getSelectionPositions(siblingInput)\n\n  siblingInput.focus()\n\n  if (to === 'next') {\n    return siblingInput.setSelectionRange(start, start)\n  }\n\n  if (to === 'previous') {\n    return siblingInput.setSelectionRange(end, end)\n  }\n}\n\nexport default useHandleCursorPosition\n"],"mappings":"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"}
+{"version":3,"file":"useHandleCursorPosition.js","names":["useEffect","useRef","useHandleCursorPosition","inputRefs","keysToHandle","inputList","refsToInputList","current","onKeyDown","event","_getKeysToHandle","inputs","input","target","pressedKey","key","hasPressedKeysToHandle","getKeysToHandle","test","hasSelection","hasSelectedValue","inputPosition","getInputPosition","initialSelectionStart","selectionStart","window","requestAnimationFrame","caretPosition","getCaretPosition","goToInput","map","ref","filter","Boolean","_ref","undefined","RegExp","masks","dataset","maskId","selection","selectionEnd","maskIndex","size","length","firstInput","lastInput","getSelectionPositions","start","end","Number","to","currentInputIndex","indexOf","siblingIndex","siblingInput","focus","setSelectionRange"],"sources":["../../../../../src/components/input-masked/hooks/useHandleCursorPosition.ts"],"sourcesContent":["import { MutableRefObject, useEffect, useRef } from 'react'\n\nfunction useHandleCursorPosition(\n  inputRefs: MutableRefObject<HTMLInputElement>[],\n  keysToHandle?: RegExp | { [inputId: string]: RegExp[] }\n) {\n  const inputList = useRef(refsToInputList(inputRefs))\n\n  // To keep the refs.current in synch with component of use, or else it wont be possible to navigate to the next input, without triggering a re-render first.\n  useEffect(() => {\n    inputList.current = refsToInputList(inputRefs)\n  }, [inputRefs])\n\n  function onKeyDown(event: React.KeyboardEvent) {\n    const inputs = inputList.current\n    const input = event.target as HTMLInputElement\n\n    const pressedKey = event.key\n\n    const hasPressedKeysToHandle =\n      getKeysToHandle({ keysToHandle, input })?.test(pressedKey) ||\n      /(ArrowRight|ArrowLeft|Backspace)/.test(pressedKey)\n\n    const hasSelection = hasSelectedValue(input)\n\n    const inputPosition = !hasSelection && getInputPosition(input, inputs)\n\n    const initialSelectionStart = input.selectionStart\n\n    window.requestAnimationFrame(() => {\n      if (!hasPressedKeysToHandle || hasSelection) {\n        return // stop here\n      }\n\n      const caretPosition = getCaretPosition(input)\n\n      if (\n        caretPosition === 'last' &&\n        inputPosition !== 'last' &&\n        !(initialSelectionStart === 1 && pressedKey === 'ArrowRight')\n      ) {\n        return goToInput('next', input, inputs)\n      }\n\n      if (\n        caretPosition === 'first' &&\n        inputPosition !== 'first' &&\n        !(\n          initialSelectionStart === 1 &&\n          (pressedKey === 'ArrowLeft' || pressedKey === 'Backspace')\n        )\n      ) {\n        return goToInput('previous', input, inputs)\n      }\n    })\n  }\n\n  return { onKeyDown }\n}\n\n// Helpers\nfunction refsToInputList(inputRefs: MutableRefObject<HTMLInputElement>[]) {\n  return inputRefs.map((ref) => ref.current).filter(Boolean)\n}\n\ntype GetKeysToHandleParams = {\n  keysToHandle: RegExp | { [inputId: string]: RegExp[] }\n  input: HTMLInputElement\n}\n\nfunction getKeysToHandle({ keysToHandle, input }: GetKeysToHandleParams) {\n  if (!keysToHandle) {\n    return undefined\n  }\n\n  if (keysToHandle instanceof RegExp) {\n    return keysToHandle\n  }\n\n  const masks = keysToHandle[input.dataset.maskId]\n\n  const selection =\n    input.selectionStart === input.selectionEnd\n      ? input.selectionStart\n      : undefined\n\n  if (!selection) {\n    return undefined\n  }\n\n  const maskIndex = selection === input.size ? masks.length - 1 : selection\n\n  return masks[maskIndex]\n}\n\nfunction getInputPosition(\n  input: HTMLInputElement,\n  inputs: HTMLInputElement[]\n) {\n  const firstInput = inputs[0]\n  const lastInput = inputs[inputs.length - 1]\n\n  if (input === firstInput) {\n    return 'first'\n  }\n\n  if (input === lastInput) {\n    return 'last'\n  }\n\n  return 'non-initial'\n}\n\nfunction getSelectionPositions(input: HTMLInputElement) {\n  return { start: 0, end: Number(input.size) }\n}\n\nfunction hasSelectedValue(input: HTMLInputElement) {\n  return input.selectionEnd > input.selectionStart\n}\n\nfunction getCaretPosition(input: HTMLInputElement) {\n  const { start, end } = getSelectionPositions(input)\n\n  const selectionStart = input.selectionStart\n  const selectionEnd = input.selectionEnd\n\n  if (selectionStart === start && selectionEnd === start) {\n    return 'first'\n  }\n\n  if (selectionStart === end && selectionEnd === end) {\n    return 'last'\n  }\n\n  return 'non-initial'\n}\n\nfunction goToInput(\n  to: 'next' | 'previous',\n  input: HTMLInputElement,\n  inputs: HTMLInputElement[]\n) {\n  const currentInputIndex = inputs.indexOf(input)\n\n  const siblingIndex =\n    to === 'next'\n      ? currentInputIndex + 1\n      : to === 'previous'\n      ? currentInputIndex - 1\n      : 0\n\n  const siblingInput = inputs[siblingIndex]\n\n  const { start, end } = getSelectionPositions(siblingInput)\n\n  siblingInput.focus()\n\n  if (to === 'next') {\n    return siblingInput.setSelectionRange(start, start)\n  }\n\n  if (to === 'previous') {\n    return siblingInput.setSelectionRange(end, end)\n  }\n}\n\nexport default useHandleCursorPosition\n"],"mappings":"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"}

package/components/input-masked/hooks/useMultiInputValues.d.ts

@@ -1,8 +1,8 @@
 import { MultiInputMaskProps, MultiInputMaskValue } from '../MultiInputMask';
-type SteppedValuesHook<T extends string> = {
+type UseMultiInputValues<T extends string> = {
     inputs: MultiInputMaskProps<T>['inputs'];
     defaultValues?: MultiInputMaskProps<T>['values'];
     callback?: (values: MultiInputMaskProps<T>['values']) => void;
 };
-export declare function useMultiInputValue<T extends string>({ inputs, defaultValues, callback, }: SteppedValuesHook<T>): readonly [MultiInputMaskValue<T>, (id: string, value: string) => void];
+export declare function useMultiInputValue<T extends string>({ inputs, defaultValues, callback, }: UseMultiInputValues<T>): readonly [MultiInputMaskValue<T>, (id: string, value: string) => void];
 export {};

package/components/input-masked/hooks/useMultiInputValues.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMultiInputValues.js","names":["useState","useMultiInputValue","_ref","inputs","defaultValues","callback","values","setValues","createDefaultValues","reduce","input","id","onChange","value","updatedValues","_objectSpread"],"sources":["../../../../../src/components/input-masked/hooks/useMultiInputValues.ts"],"sourcesContent":["import { useState } from 'react'\nimport {\n  MultiInputMaskProps,\n  MultiInputMaskValue,\n} from '../MultiInputMask'\n\ntype SteppedValuesHook<T extends string> = {\n  inputs: MultiInputMaskProps<T>['inputs']\n  defaultValues?: MultiInputMaskProps<T>['values']\n  callback?: (values: MultiInputMaskProps<T>['values']) => void\n}\n\nexport function useMultiInputValue<T extends string>({\n  inputs,\n  defaultValues,\n  callback,\n}: SteppedValuesHook<T>) {\n  const [values, setValues] = useState<MultiInputMaskValue<T>>(\n    defaultValues ? defaultValues : createDefaultValues()\n  )\n\n  function createDefaultValues() {\n    return inputs.reduce((values, input) => {\n      values[input.id] = ''\n\n      return values\n    }, {} as MultiInputMaskValue<T>)\n  }\n\n  function onChange(id: string, value: string) {\n    const updatedValues = { ...values, [id]: value }\n\n    setValues(updatedValues)\n    if (callback) {\n      callback(updatedValues)\n    }\n  }\n\n  return [values, onChange] as const\n}\n"],"mappings":";;;;;AAAA,SAASA,QAAQ,QAAQ,OAAO;AAYhC,OAAO,SAASC,kBAAkBA,CAAAC,IAAA,EAIT;EAAA,IAJ4B;IACnDC,MAAM;IACNC,aAAa;IACbC;EACoB,CAAC,GAAAH,IAAA;EACrB,MAAM,CAACI,MAAM,EAAEC,SAAS,CAAC,GAAGP,QAAQ,CAClCI,aAAa,GAAGA,aAAa,GAAGI,mBAAmB,CAAC,CACtD,CAAC;EAED,SAASA,mBAAmBA,CAAA,EAAG;IAC7B,OAAOL,MAAM,CAACM,MAAM,CAAC,CAACH,MAAM,EAAEI,KAAK,KAAK;MACtCJ,MAAM,CAACI,KAAK,CAACC,EAAE,CAAC,GAAG,EAAE;MAErB,OAAOL,MAAM;IACf,CAAC,EAAE,CAAC,CAA2B,CAAC;EAClC;EAEA,SAASM,QAAQA,CAACD,EAAU,EAAEE,KAAa,EAAE;IAC3C,MAAMC,aAAa,GAAAC,aAAA,CAAAA,aAAA,KAAQT,MAAM;MAAE,CAACK,EAAE,GAAGE;IAAK,EAAE;IAEhDN,SAAS,CAACO,aAAa,CAAC;IACxB,IAAIT,QAAQ,EAAE;MACZA,QAAQ,CAACS,aAAa,CAAC;IACzB;EACF;EAEA,OAAO,CAACR,MAAM,EAAEM,QAAQ,CAAC;AAC3B"}
+{"version":3,"file":"useMultiInputValues.js","names":["useState","useMultiInputValue","_ref","inputs","defaultValues","callback","values","setValues","createDefaultValues","reduce","input","id","onChange","value","updatedValues","_objectSpread"],"sources":["../../../../../src/components/input-masked/hooks/useMultiInputValues.ts"],"sourcesContent":["import { useState } from 'react'\nimport {\n  MultiInputMaskProps,\n  MultiInputMaskValue,\n} from '../MultiInputMask'\n\ntype UseMultiInputValues<T extends string> = {\n  inputs: MultiInputMaskProps<T>['inputs']\n  defaultValues?: MultiInputMaskProps<T>['values']\n  callback?: (values: MultiInputMaskProps<T>['values']) => void\n}\n\nexport function useMultiInputValue<T extends string>({\n  inputs,\n  defaultValues,\n  callback,\n}: UseMultiInputValues<T>) {\n  const [values, setValues] = useState<MultiInputMaskValue<T>>(\n    defaultValues ? defaultValues : createDefaultValues()\n  )\n\n  function createDefaultValues() {\n    return inputs.reduce((values, input) => {\n      values[input.id] = ''\n\n      return values\n    }, {} as MultiInputMaskValue<T>)\n  }\n\n  function onChange(id: string, value: string) {\n    const updatedValues = { ...values, [id]: value }\n\n    setValues(updatedValues)\n    if (callback) {\n      callback(updatedValues)\n    }\n  }\n\n  return [values, onChange] as const\n}\n"],"mappings":";;;;;AAAA,SAASA,QAAQ,QAAQ,OAAO;AAYhC,OAAO,SAASC,kBAAkBA,CAAAC,IAAA,EAIP;EAAA,IAJ0B;IACnDC,MAAM;IACNC,aAAa;IACbC;EACsB,CAAC,GAAAH,IAAA;EACvB,MAAM,CAACI,MAAM,EAAEC,SAAS,CAAC,GAAGP,QAAQ,CAClCI,aAAa,GAAGA,aAAa,GAAGI,mBAAmB,CAAC,CACtD,CAAC;EAED,SAASA,mBAAmBA,CAAA,EAAG;IAC7B,OAAOL,MAAM,CAACM,MAAM,CAAC,CAACH,MAAM,EAAEI,KAAK,KAAK;MACtCJ,MAAM,CAACI,KAAK,CAACC,EAAE,CAAC,GAAG,EAAE;MAErB,OAAOL,MAAM;IACf,CAAC,EAAE,CAAC,CAA2B,CAAC;EAClC;EAEA,SAASM,QAAQA,CAACD,EAAU,EAAEE,KAAa,EAAE;IAC3C,MAAMC,aAAa,GAAAC,aAAA,CAAAA,aAAA,KAAQT,MAAM;MAAE,CAACK,EAAE,GAAGE;IAAK,EAAE;IAEhDN,SAAS,CAACO,aAAa,CAAC;IACxB,IAAIT,QAAQ,EAAE;MACZA,QAAQ,CAACS,aAAa,CAAC;IACzB;EACF;EAEA,OAAO,CAACR,MAAM,EAAEM,QAAQ,CAAC;AAC3B"}

package/components/number-format/NumberFormat.js

@@ -40,7 +40,7 @@ export default class NumberFormat extends React.PureComponent {
       }
     });
     _defineProperty(this, "onClickHandler", () => {
-      if (!hasSelectedText() || isTrue(this.props.always_selectall)) {
+      if ((isTrue(this.props.selectall) || isTrue(this.props.always_selectall)) && !hasSelectedText()) {
         this.setFocus();
       }
     });

package/components/number-format/NumberFormat.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberFormat.js","names":["React","PropTypes","classnames","Context","warn","isTrue","makeUniqueId","validateDOMAttributes","convertJsxToString","extendPropsWithContextInClassComponent","extend","detectOutsideClick","hasSelectedText","IS_IOS","spacingPropTypes","createSpacingClasses","skeletonDOMAttributes","createSkeletonClass","Tooltip","injectTooltipSemantic","format","showSelectionNotice","runIOSSelectionFix","NumberFormat","PureComponent","constructor","props","_defineProperty","_this$context$getTran","_this$context$getTran2","value","cleanedValue","label","context","getTranslation","clipboard_copy","run","_ref","current","setState","selected","clearTimeout","_selectAllTimeout","setTimeout","setFocus","always_selectall","createRef","_selectionRef","_id","id","state","omitCurrencySign","componentDidMount","hasiOSFix","componentWillUnmount","_this$outsideClick","outsideClick","remove","_this$_selectionRef$c","focus","selectAll","copy_selection","onBlurHandler","elem","selection","window","getSelection","range","document","createRange","selectNodeContents","removeAllRanges","addRange","e","runFix","comp","className","isValidElement","cloneElement","createElement","render","defaultProps","_value","prefix","suffix","children","currency","currency_display","currency_position","compact","ban","nin","phone","org","percent","link","_link","tooltip","skeleton","options","locale","decimals","omit_rounding","clean","selectall","clean_copy_value","srLabel","element","class","_className","_rest","_objectWithoutProperties","_excluded","rest","formatOptions","omit_currency_sign","returnAria","useContext","_objectSpread","number","display","aria","lang","attributes","ref","displayParams","onClick","onClickHandler","onContextMenu","onContextMenuHandler","Fragment","String","_extends","href","Element","tabIndex","onBlur","onCopy","shortcutHandler","targetElement","process","env","NODE_ENV","propTypes","string","oneOfType","node","func","bool","oneOf","object","_supportsSpacingProps"],"sources":["../../../../src/components/number-format/NumberFormat.js"],"sourcesContent":["/**\n * Web NumberFormat Component\n *\n */\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport classnames from 'classnames'\nimport Context from '../../shared/Context'\nimport {\n  warn,\n  isTrue,\n  makeUniqueId,\n  validateDOMAttributes,\n  convertJsxToString,\n  extendPropsWithContextInClassComponent,\n  extend,\n  detectOutsideClick,\n} from '../../shared/component-helper'\nimport { hasSelectedText, IS_IOS } from '../../shared/helpers'\nimport {\n  spacingPropTypes,\n  createSpacingClasses,\n} from '../space/SpacingHelper'\nimport {\n  skeletonDOMAttributes,\n  createSkeletonClass,\n} from '../skeleton/SkeletonHelper'\nimport Tooltip, { injectTooltipSemantic } from '../tooltip/Tooltip'\nimport {\n  format,\n  showSelectionNotice,\n  runIOSSelectionFix,\n} from './NumberUtils'\n\nexport default class NumberFormat extends React.PureComponent {\n  static contextType = Context\n\n  static propTypes = {\n    id: PropTypes.string,\n    value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n    locale: PropTypes.string,\n    prefix: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\n    suffix: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\n\n    // currency\n    currency: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    currency_display: PropTypes.oneOfType([\n      PropTypes.bool,\n      PropTypes.oneOf(['code', 'name', 'symbol', 'narrowSymbol', '']),\n    ]),\n    currency_position: PropTypes.oneOf(['auto', 'before', 'after']),\n\n    // shortens any number or currency including an abbreviation\n    compact: PropTypes.oneOfType([\n      PropTypes.oneOf(['short', 'long']),\n      PropTypes.bool,\n    ]),\n\n    // bank account number\n    ban: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n\n    // national identification number\n    nin: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n\n    // phone number\n    phone: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n\n    // organization number\n    org: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n\n    // percentage\n    percent: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n\n    // can be tel or sms\n    link: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n\n    options: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),\n    decimals: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n    selectall: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    always_selectall: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.bool,\n    ]),\n    copy_selection: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.bool,\n    ]),\n    clean_copy_value: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.bool,\n    ]),\n    omit_rounding: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    clean: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    srLabel: PropTypes.node,\n    element: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    tooltip: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.func,\n      PropTypes.node,\n    ]),\n    skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n\n    ...spacingPropTypes,\n\n    class: PropTypes.string,\n    className: PropTypes.string,\n    children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\n  }\n  static defaultProps = {\n    id: null,\n    value: null,\n    locale: null,\n    prefix: null,\n    suffix: null,\n    currency: null,\n    currency_display: null, // code, name, symbol\n    currency_position: null, // null, before, after\n    compact: null,\n    ban: null,\n    nin: null,\n    phone: null,\n    org: null,\n    percent: null,\n    link: null,\n    options: null,\n    decimals: null,\n    selectall: true,\n    always_selectall: false,\n    copy_selection: true,\n    clean_copy_value: false,\n    omit_rounding: null,\n    clean: null,\n    srLabel: null,\n    element: 'span', // span or abbr\n    tooltip: null,\n    skeleton: null,\n    class: null,\n\n    className: null,\n    children: null,\n  }\n\n  constructor(props) {\n    super(props)\n    this._ref = React.createRef()\n    this._selectionRef = React.createRef()\n\n    this._id = props.id || makeUniqueId()\n    this.state = { selected: false, omitCurrencySign: false }\n  }\n\n  componentDidMount() {\n    clearTimeout(this._selectAllTimeout)\n\n    // NB: This hack may be removed in future iOS versions\n    // in order that iOS v13 can select something on the first try, we run this add range trick\n    if (IS_IOS && !hasiOSFix) {\n      hasiOSFix = true\n      runIOSSelectionFix()\n    }\n  }\n\n  shortcutHandler = () => {\n    showSelectionNotice({\n      value: this.cleanedValue,\n      label: this.context.getTranslation(this.props)?.NumberFormat\n        ?.clipboard_copy,\n    }).run(this._ref.current)\n  }\n\n  onBlurHandler = () => {\n    this.setState({ selected: false })\n  }\n\n  onContextMenuHandler = () => {\n    if (!hasSelectedText()) {\n      clearTimeout(this._selectAllTimeout)\n      this._selectAllTimeout = setTimeout(() => {\n        this.setFocus()\n      }, 1)\n    }\n  }\n\n  onClickHandler = () => {\n    if (!hasSelectedText() || isTrue(this.props.always_selectall)) {\n      this.setFocus()\n    }\n  }\n\n  componentWillUnmount() {\n    this.outsideClick?.remove()\n  }\n\n  setFocus() {\n    this.setState({ selected: true }, () => {\n      this._selectionRef.current?.focus()\n      this.selectAll()\n\n      if (!isTrue(this.props.copy_selection)) {\n        this.outsideClick = detectOutsideClick(\n          this._ref.current,\n          this.onBlurHandler\n        )\n      }\n    })\n  }\n\n  selectAll() {\n    try {\n      const elem = this._selectionRef.current || this._ref.current\n      if (elem) {\n        const selection = window.getSelection()\n        const range = document.createRange()\n        range.selectNodeContents(elem)\n        selection.removeAllRanges()\n        selection.addRange(range)\n      }\n    } catch (e) {\n      warn(e)\n    }\n  }\n\n  runFix(comp, className) {\n    if (typeof comp === 'function') {\n      comp = comp()\n    }\n    if (React.isValidElement(comp)) {\n      return React.cloneElement(comp, {\n        className: classnames(comp.props.className, className),\n      })\n    }\n    return <span className={className}>{comp}</span>\n  }\n\n  render() {\n    // consume the global context\n    const props = extendPropsWithContextInClassComponent(\n      this.props,\n      NumberFormat.defaultProps,\n      this.context.getTranslation(this.props).NumberFormat,\n      this.context.NumberFormat\n    )\n\n    const {\n      id, // eslint-disable-line\n      value: _value,\n      prefix,\n      suffix,\n      children,\n      currency,\n      currency_display,\n      currency_position,\n      compact,\n      ban,\n      nin,\n      phone,\n      org,\n      percent,\n      link: _link,\n      tooltip,\n      skeleton,\n      options,\n      locale,\n      decimals,\n      omit_rounding,\n      clean,\n      selectall,\n      copy_selection,\n      clean_copy_value,\n      srLabel,\n      element,\n      class: _className,\n      className,\n      ..._rest\n    } = props\n    let rest = _rest\n\n    let link = _link\n    let value = _value\n\n    if (value === null && children !== null) {\n      value = children\n    }\n\n    const formatOptions = {\n      locale,\n      currency,\n      currency_display,\n      currency_position,\n      omit_currency_sign: this.state.omitCurrencySign,\n      compact,\n      ban,\n      nin,\n      phone,\n      org,\n      percent,\n      decimals,\n      omit_rounding: isTrue(omit_rounding),\n      options,\n      clean: isTrue(clean),\n      clean_copy_value: isTrue(clean_copy_value),\n      returnAria: true,\n    }\n\n    // use only the props from context, who are available here anyway\n    const useContext = extend(\n      true,\n      { locale: null, currency: null },\n      this.context\n    )\n\n    if (useContext) {\n      if (useContext.locale && !locale) {\n        formatOptions.locale = useContext.locale\n      }\n\n      // only replace if the prop is \"true\" and not actually a currency\n      if (useContext.currency && isTrue(currency)) {\n        formatOptions.options = formatOptions.options\n          ? { ...formatOptions.options }\n          : {}\n        formatOptions.options.currency = useContext.currency\n      }\n    }\n\n    let {\n      cleanedValue,\n      number: display,\n      aria,\n      locale: lang,\n    } = format(value, formatOptions)\n    this.cleanedValue = cleanedValue\n\n    if (tooltip) {\n      rest = injectTooltipSemantic(rest)\n    }\n\n    const attributes = {\n      ref: this._ref,\n      className: classnames(\n        'dnb-number-format',\n        className,\n        _className,\n        (isTrue(currency) || typeof currency === 'string') &&\n          'dnb-number-format--currency',\n        isTrue(selectall) && 'dnb-number-format--selectall',\n        this.state.selected && 'dnb-number-format--selected',\n        link && 'dnb-anchor',\n        createSpacingClasses(this.props)\n      ),\n      ...rest,\n    }\n\n    /**\n     * Works in VoiceOver and NVDA\n     * Makes the span with it's roles etc. appear as text.\n     * Special useful if a number is in side e.g. a paragraph alongside with numbers\n     */\n    attributes['role'] = 'text' // role=\"text\"\n\n    const displayParams = {}\n    if (isTrue(selectall) || isTrue(copy_selection)) {\n      displayParams.onClick = this.onClickHandler\n      displayParams.onContextMenu = this.onContextMenuHandler\n    }\n\n    validateDOMAttributes(this.props, attributes)\n    skeletonDOMAttributes(attributes, skeleton, this.context)\n\n    if (prefix) {\n      display = (\n        <>\n          {this.runFix(prefix, 'dnb-number-format__prefix')} {display}\n        </>\n      )\n      aria = String(\n        `${convertJsxToString(\n          this.runFix(prefix, 'dnb-number-format__prefix')\n        )} ${aria}`\n      )\n    }\n    if (suffix) {\n      display = (\n        <>\n          {display} {this.runFix(suffix, 'dnb-number-format__suffix')}\n        </>\n      )\n      aria = `${aria} ${convertJsxToString(\n        this.runFix(suffix, 'dnb-number-format__suffix')\n      )}`\n    }\n\n    if (link) {\n      if (isTrue(link)) {\n        link = 'tel'\n      }\n      return (\n        <a href={`${link}:${display}`} {...attributes}>\n          {display}\n        </a>\n      )\n    }\n\n    const Element = element\n\n    /**\n     * This approach is most NVDA friendly, and we used it now also for mac,\n     * because if the consistency and SSR JAM Stack build\n     */\n    return (\n      <Element lang={lang} {...attributes}>\n        {srLabel && (\n          <span className=\"dnb-sr-only\" data-text={srLabel + ' '} />\n        )}\n\n        <span\n          className={classnames(\n            'dnb-number-format__visible',\n            createSkeletonClass('font', skeleton, this.context)\n          )}\n          aria-describedby={this._id}\n          aria-hidden\n          {...displayParams}\n        >\n          {display}\n        </span>\n\n        <span\n          id={this._id}\n          className=\"dnb-number-format__sr-only dnb-sr-only\"\n          data-text={aria}\n        />\n\n        {isTrue(copy_selection) && (\n          <span\n            className=\"dnb-number-format__selection dnb-no-focus\"\n            ref={this._selectionRef}\n            tabIndex={-1}\n            onBlur={this.onBlurHandler}\n            onCopy={this.shortcutHandler}\n            aria-hidden\n          >\n            {this.state.selected && cleanedValue}\n          </span>\n        )}\n\n        {tooltip && (\n          <Tooltip\n            id={this._id + '-tooltip'}\n            targetElement={this._ref}\n            tooltip={tooltip}\n          />\n        )}\n      </Element>\n    )\n  }\n}\n\nlet hasiOSFix = false\n\nNumberFormat._supportsSpacingProps = true\n"],"mappings":"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"}
+{"version":3,"file":"NumberFormat.js","names":["React","PropTypes","classnames","Context","warn","isTrue","makeUniqueId","validateDOMAttributes","convertJsxToString","extendPropsWithContextInClassComponent","extend","detectOutsideClick","hasSelectedText","IS_IOS","spacingPropTypes","createSpacingClasses","skeletonDOMAttributes","createSkeletonClass","Tooltip","injectTooltipSemantic","format","showSelectionNotice","runIOSSelectionFix","NumberFormat","PureComponent","constructor","props","_defineProperty","_this$context$getTran","_this$context$getTran2","value","cleanedValue","label","context","getTranslation","clipboard_copy","run","_ref","current","setState","selected","clearTimeout","_selectAllTimeout","setTimeout","setFocus","selectall","always_selectall","createRef","_selectionRef","_id","id","state","omitCurrencySign","componentDidMount","hasiOSFix","componentWillUnmount","_this$outsideClick","outsideClick","remove","_this$_selectionRef$c","focus","selectAll","copy_selection","onBlurHandler","elem","selection","window","getSelection","range","document","createRange","selectNodeContents","removeAllRanges","addRange","e","runFix","comp","className","isValidElement","cloneElement","createElement","render","defaultProps","_value","prefix","suffix","children","currency","currency_display","currency_position","compact","ban","nin","phone","org","percent","link","_link","tooltip","skeleton","options","locale","decimals","omit_rounding","clean","clean_copy_value","srLabel","element","class","_className","_rest","_objectWithoutProperties","_excluded","rest","formatOptions","omit_currency_sign","returnAria","useContext","_objectSpread","number","display","aria","lang","attributes","ref","displayParams","onClick","onClickHandler","onContextMenu","onContextMenuHandler","Fragment","String","_extends","href","Element","tabIndex","onBlur","onCopy","shortcutHandler","targetElement","process","env","NODE_ENV","propTypes","string","oneOfType","node","func","bool","oneOf","object","_supportsSpacingProps"],"sources":["../../../../src/components/number-format/NumberFormat.js"],"sourcesContent":["/**\n * Web NumberFormat Component\n *\n */\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport classnames from 'classnames'\nimport Context from '../../shared/Context'\nimport {\n  warn,\n  isTrue,\n  makeUniqueId,\n  validateDOMAttributes,\n  convertJsxToString,\n  extendPropsWithContextInClassComponent,\n  extend,\n  detectOutsideClick,\n} from '../../shared/component-helper'\nimport { hasSelectedText, IS_IOS } from '../../shared/helpers'\nimport {\n  spacingPropTypes,\n  createSpacingClasses,\n} from '../space/SpacingHelper'\nimport {\n  skeletonDOMAttributes,\n  createSkeletonClass,\n} from '../skeleton/SkeletonHelper'\nimport Tooltip, { injectTooltipSemantic } from '../tooltip/Tooltip'\nimport {\n  format,\n  showSelectionNotice,\n  runIOSSelectionFix,\n} from './NumberUtils'\n\nexport default class NumberFormat extends React.PureComponent {\n  static contextType = Context\n\n  static propTypes = {\n    id: PropTypes.string,\n    value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n    locale: PropTypes.string,\n    prefix: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\n    suffix: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\n\n    // currency\n    currency: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    currency_display: PropTypes.oneOfType([\n      PropTypes.bool,\n      PropTypes.oneOf(['code', 'name', 'symbol', 'narrowSymbol', '']),\n    ]),\n    currency_position: PropTypes.oneOf(['auto', 'before', 'after']),\n\n    // shortens any number or currency including an abbreviation\n    compact: PropTypes.oneOfType([\n      PropTypes.oneOf(['short', 'long']),\n      PropTypes.bool,\n    ]),\n\n    // bank account number\n    ban: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n\n    // national identification number\n    nin: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n\n    // phone number\n    phone: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n\n    // organization number\n    org: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n\n    // percentage\n    percent: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n\n    // can be tel or sms\n    link: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n\n    options: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),\n    decimals: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n    selectall: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    always_selectall: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.bool,\n    ]),\n    copy_selection: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.bool,\n    ]),\n    clean_copy_value: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.bool,\n    ]),\n    omit_rounding: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    clean: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    srLabel: PropTypes.node,\n    element: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    tooltip: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.func,\n      PropTypes.node,\n    ]),\n    skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n\n    ...spacingPropTypes,\n\n    class: PropTypes.string,\n    className: PropTypes.string,\n    children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\n  }\n  static defaultProps = {\n    id: null,\n    value: null,\n    locale: null,\n    prefix: null,\n    suffix: null,\n    currency: null,\n    currency_display: null, // code, name, symbol\n    currency_position: null, // null, before, after\n    compact: null,\n    ban: null,\n    nin: null,\n    phone: null,\n    org: null,\n    percent: null,\n    link: null,\n    options: null,\n    decimals: null,\n    selectall: true,\n    always_selectall: false,\n    copy_selection: true,\n    clean_copy_value: false,\n    omit_rounding: null,\n    clean: null,\n    srLabel: null,\n    element: 'span', // span or abbr\n    tooltip: null,\n    skeleton: null,\n    class: null,\n\n    className: null,\n    children: null,\n  }\n\n  constructor(props) {\n    super(props)\n    this._ref = React.createRef()\n    this._selectionRef = React.createRef()\n\n    this._id = props.id || makeUniqueId()\n    this.state = { selected: false, omitCurrencySign: false }\n  }\n\n  componentDidMount() {\n    clearTimeout(this._selectAllTimeout)\n\n    // NB: This hack may be removed in future iOS versions\n    // in order that iOS v13 can select something on the first try, we run this add range trick\n    if (IS_IOS && !hasiOSFix) {\n      hasiOSFix = true\n      runIOSSelectionFix()\n    }\n  }\n\n  shortcutHandler = () => {\n    showSelectionNotice({\n      value: this.cleanedValue,\n      label: this.context.getTranslation(this.props)?.NumberFormat\n        ?.clipboard_copy,\n    }).run(this._ref.current)\n  }\n\n  onBlurHandler = () => {\n    this.setState({ selected: false })\n  }\n\n  onContextMenuHandler = () => {\n    if (!hasSelectedText()) {\n      clearTimeout(this._selectAllTimeout)\n      this._selectAllTimeout = setTimeout(() => {\n        this.setFocus()\n      }, 1)\n    }\n  }\n\n  onClickHandler = () => {\n    if (\n      (isTrue(this.props.selectall) ||\n        isTrue(this.props.always_selectall)) &&\n      !hasSelectedText()\n    ) {\n      this.setFocus()\n    }\n  }\n\n  componentWillUnmount() {\n    this.outsideClick?.remove()\n  }\n\n  setFocus() {\n    this.setState({ selected: true }, () => {\n      this._selectionRef.current?.focus()\n      this.selectAll()\n\n      if (!isTrue(this.props.copy_selection)) {\n        this.outsideClick = detectOutsideClick(\n          this._ref.current,\n          this.onBlurHandler\n        )\n      }\n    })\n  }\n\n  selectAll() {\n    try {\n      const elem = this._selectionRef.current || this._ref.current\n      if (elem) {\n        const selection = window.getSelection()\n        const range = document.createRange()\n        range.selectNodeContents(elem)\n        selection.removeAllRanges()\n        selection.addRange(range)\n      }\n    } catch (e) {\n      warn(e)\n    }\n  }\n\n  runFix(comp, className) {\n    if (typeof comp === 'function') {\n      comp = comp()\n    }\n    if (React.isValidElement(comp)) {\n      return React.cloneElement(comp, {\n        className: classnames(comp.props.className, className),\n      })\n    }\n    return <span className={className}>{comp}</span>\n  }\n\n  render() {\n    // consume the global context\n    const props = extendPropsWithContextInClassComponent(\n      this.props,\n      NumberFormat.defaultProps,\n      this.context.getTranslation(this.props).NumberFormat,\n      this.context.NumberFormat\n    )\n\n    const {\n      id, // eslint-disable-line\n      value: _value,\n      prefix,\n      suffix,\n      children,\n      currency,\n      currency_display,\n      currency_position,\n      compact,\n      ban,\n      nin,\n      phone,\n      org,\n      percent,\n      link: _link,\n      tooltip,\n      skeleton,\n      options,\n      locale,\n      decimals,\n      omit_rounding,\n      clean,\n      selectall,\n      copy_selection,\n      clean_copy_value,\n      srLabel,\n      element,\n      class: _className,\n      className,\n      ..._rest\n    } = props\n    let rest = _rest\n\n    let link = _link\n    let value = _value\n\n    if (value === null && children !== null) {\n      value = children\n    }\n\n    const formatOptions = {\n      locale,\n      currency,\n      currency_display,\n      currency_position,\n      omit_currency_sign: this.state.omitCurrencySign,\n      compact,\n      ban,\n      nin,\n      phone,\n      org,\n      percent,\n      decimals,\n      omit_rounding: isTrue(omit_rounding),\n      options,\n      clean: isTrue(clean),\n      clean_copy_value: isTrue(clean_copy_value),\n      returnAria: true,\n    }\n\n    // use only the props from context, who are available here anyway\n    const useContext = extend(\n      true,\n      { locale: null, currency: null },\n      this.context\n    )\n\n    if (useContext) {\n      if (useContext.locale && !locale) {\n        formatOptions.locale = useContext.locale\n      }\n\n      // only replace if the prop is \"true\" and not actually a currency\n      if (useContext.currency && isTrue(currency)) {\n        formatOptions.options = formatOptions.options\n          ? { ...formatOptions.options }\n          : {}\n        formatOptions.options.currency = useContext.currency\n      }\n    }\n\n    let {\n      cleanedValue,\n      number: display,\n      aria,\n      locale: lang,\n    } = format(value, formatOptions)\n    this.cleanedValue = cleanedValue\n\n    if (tooltip) {\n      rest = injectTooltipSemantic(rest)\n    }\n\n    const attributes = {\n      ref: this._ref,\n      className: classnames(\n        'dnb-number-format',\n        className,\n        _className,\n        (isTrue(currency) || typeof currency === 'string') &&\n          'dnb-number-format--currency',\n        isTrue(selectall) && 'dnb-number-format--selectall',\n        this.state.selected && 'dnb-number-format--selected',\n        link && 'dnb-anchor',\n        createSpacingClasses(this.props)\n      ),\n      ...rest,\n    }\n\n    /**\n     * Works in VoiceOver and NVDA\n     * Makes the span with it's roles etc. appear as text.\n     * Special useful if a number is in side e.g. a paragraph alongside with numbers\n     */\n    attributes['role'] = 'text' // role=\"text\"\n\n    const displayParams = {}\n    if (isTrue(selectall) || isTrue(copy_selection)) {\n      displayParams.onClick = this.onClickHandler\n      displayParams.onContextMenu = this.onContextMenuHandler\n    }\n\n    validateDOMAttributes(this.props, attributes)\n    skeletonDOMAttributes(attributes, skeleton, this.context)\n\n    if (prefix) {\n      display = (\n        <>\n          {this.runFix(prefix, 'dnb-number-format__prefix')} {display}\n        </>\n      )\n      aria = String(\n        `${convertJsxToString(\n          this.runFix(prefix, 'dnb-number-format__prefix')\n        )} ${aria}`\n      )\n    }\n    if (suffix) {\n      display = (\n        <>\n          {display} {this.runFix(suffix, 'dnb-number-format__suffix')}\n        </>\n      )\n      aria = `${aria} ${convertJsxToString(\n        this.runFix(suffix, 'dnb-number-format__suffix')\n      )}`\n    }\n\n    if (link) {\n      if (isTrue(link)) {\n        link = 'tel'\n      }\n      return (\n        <a href={`${link}:${display}`} {...attributes}>\n          {display}\n        </a>\n      )\n    }\n\n    const Element = element\n\n    /**\n     * This approach is most NVDA friendly, and we used it now also for mac,\n     * because if the consistency and SSR JAM Stack build\n     */\n    return (\n      <Element lang={lang} {...attributes}>\n        {srLabel && (\n          <span className=\"dnb-sr-only\" data-text={srLabel + ' '} />\n        )}\n\n        <span\n          className={classnames(\n            'dnb-number-format__visible',\n            createSkeletonClass('font', skeleton, this.context)\n          )}\n          aria-describedby={this._id}\n          aria-hidden\n          {...displayParams}\n        >\n          {display}\n        </span>\n\n        <span\n          id={this._id}\n          className=\"dnb-number-format__sr-only dnb-sr-only\"\n          data-text={aria}\n        />\n\n        {isTrue(copy_selection) && (\n          <span\n            className=\"dnb-number-format__selection dnb-no-focus\"\n            ref={this._selectionRef}\n            tabIndex={-1}\n            onBlur={this.onBlurHandler}\n            onCopy={this.shortcutHandler}\n            aria-hidden\n          >\n            {this.state.selected && cleanedValue}\n          </span>\n        )}\n\n        {tooltip && (\n          <Tooltip\n            id={this._id + '-tooltip'}\n            targetElement={this._ref}\n            tooltip={tooltip}\n          />\n        )}\n      </Element>\n    )\n  }\n}\n\nlet hasiOSFix = false\n\nNumberFormat._supportsSpacingProps = true\n"],"mappings":"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"}

package/components/textarea/style/dnb-textarea.css

@@ -78,6 +78,11 @@ html:not([data-visual-test]) .dnb-textarea__textarea {
     background-color: var(--scrollbar-thumb-hover-color, #666);
   }
 }
+@-moz-document url-prefix() {
+  .dnb-textarea__textarea {
+    overflow-x: clip;
+  }
+}
 .dnb-textarea__input:-webkit-autofill {
   box-shadow: 0 0 0 var(--border-width) var(--border-color), 0 0 0 10em var(--textarea-background-color) inset;
 }

package/components/textarea/style/dnb-textarea.min.css

@@ -1 +1 @@
-.dnb-textarea{--textarea-padding-width:0.5rem;--textarea-rows:2;--textarea-background-color:var(--color-white);display:inline-flex;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-textarea__inner{display:inline-flex;flex-direction:column;margin:var(--textarea-padding-width)}.dnb-textarea__shell{display:inline-flex;font-size:var(--font-size-basis);position:relative}.dnb-textarea__state{background-color:var(--color-white);border-radius:.25rem;bottom:-.5rem;box-shadow:0 0 0 .0625rem var(--color-sea-green);left:-.5rem;position:absolute;right:-.5rem;top:-.5rem;z-index:1}.dnb-textarea__row{display:inline-flex}.dnb-textarea__suffix.dnb-suffix{padding-left:1rem}.dnb-textarea__textarea{-webkit-overflow-scrolling:touch;-ms-overflow-style:auto;border:none;cursor:auto;font-size:var(--font-size-basis);line-height:var(--line-height-basis);margin:0;outline:none;overflow-y:auto;overscroll-behavior:contain;padding:0 var(--textarea-padding-width);position:relative;scrollbar-color:var(--scrollbar-thumb-color,#888) transparent;z-index:2}html:not([data-visual-test]) .dnb-textarea__textarea{scroll-behavior:smooth}@supports not (scrollbar-color:auto){.dnb-textarea__textarea::-webkit-scrollbar{background-color:var(--scrollbar-track-color,#eee);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-textarea__textarea::-webkit-scrollbar:vertical{width:var(--scrollbar-track-width,.5rem)}.dnb-textarea__textarea::-webkit-scrollbar:horizontal{height:var(--scrollbar-track-width,.5rem)}.dnb-textarea__textarea::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb-color,#888);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-textarea__textarea::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-thumb-hover-color,#666)}}.dnb-textarea__input:-webkit-autofill{box-shadow:0 0 0 var(--border-width) var(--border-color),0 0 0 10em var(--textarea-background-color) inset}.dnb-textarea__input:autofill{box-shadow:0 0 0 var(--border-width) var(--border-color),0 0 0 10em var(--textarea-background-color) inset}.dnb-textarea__placeholder{-webkit-box-orient:vertical;-webkit-line-clamp:var(--textarea-rows,2);border:none;cursor:auto;display:-webkit-box;font-size:var(--font-size-basis);height:100%;left:0;line-height:var(--line-height-basis);margin:0;outline:none;overflow:hidden;padding:0 var(--textarea-padding-width);pointer-events:none;position:absolute;top:0;width:100%;z-index:3}.dnb-textarea__placeholder,.dnb-textarea__textarea{text-align:left}.dnb-textarea__align--right .dnb-textarea__placeholder,.dnb-textarea__align--right .dnb-textarea__textarea{text-align:right}.dnb-textarea__autoresize .dnb-textarea__textarea{resize:none}.dnb-textarea--disabled .dnb-textarea__textarea,.dnb-textarea__textarea[disabled]{-webkit-user-select:none;user-select:none}.dnb-textarea--disabled .dnb-textarea__textarea::-webkit-scrollbar,.dnb-textarea__textarea[disabled]::-webkit-scrollbar{width:0}.dnb-textarea--focus .dnb-textarea__textarea:not([disabled]):not([readonly])~.dnb-textarea__placeholder,.dnb-textarea--has-content .dnb-textarea__textarea~.dnb-textarea__placeholder{display:none}.dnb-textarea__inner>.dnb-form-status{margin:1rem 0 0 calc(0px - var(--textarea-padding-width));order:2}.dnb-textarea:not(.dnb-textarea--vertical) .dnb-form-label{margin-top:.5rem}.dnb-textarea--vertical{align-items:flex-start;display:flex;flex-direction:column}.dnb-textarea:not(.dnb-textarea--vertical)[class*=__status]{align-items:flex-start}.dnb-textarea:not(.dnb-textarea--vertical)[class*=__status]>.dnb-form-label{margin-top:.25rem}@media screen and (max-width:40em){.dnb-textarea{flex-wrap:wrap}.dnb-textarea>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.dnb-textarea--stretch{display:flex;flex-grow:1}.dnb-textarea--stretch .dnb-textarea__inner{flex-grow:1}.dnb-textarea--stretch .dnb-textarea__inner,.dnb-textarea--stretch .dnb-textarea__shell,.dnb-textarea--stretch .dnb-textarea__textarea{width:100%}.dnb-textarea--stretch .dnb-form-label+.dnb-textarea__inner{width:auto}.dnb-form-row--horizontal .dnb-textarea--stretch,.dnb-textarea--vertical.dnb-textarea--stretch .dnb-textarea__inner{width:100%}@media screen and (max-width:40em){.dnb-responsive-component .dnb-textarea{align-items:flex-start;display:flex;flex-direction:column;margin-bottom:.5rem}.dnb-responsive-component .dnb-textarea>.dnb-form-label{margin-bottom:.5rem}}html[data-visual-test] .dnb-textarea__textarea{caret-color:var(--color-white)}.dnb-textarea.dnb-skeleton .dnb-textarea__inner{border-radius:.25rem;margin:0}.dnb-textarea.dnb-skeleton .dnb-textarea__inner .dnb-textarea__shell{margin:var(--textarea-padding-width)}.dnb-textarea.dnb-skeleton .dnb-textarea__state,.dnb-textarea.dnb-skeleton .dnb-textarea__textarea{visibility:hidden}
+.dnb-textarea{--textarea-padding-width:0.5rem;--textarea-rows:2;--textarea-background-color:var(--color-white);display:inline-flex;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-textarea__inner{display:inline-flex;flex-direction:column;margin:var(--textarea-padding-width)}.dnb-textarea__shell{display:inline-flex;font-size:var(--font-size-basis);position:relative}.dnb-textarea__state{background-color:var(--color-white);border-radius:.25rem;bottom:-.5rem;box-shadow:0 0 0 .0625rem var(--color-sea-green);left:-.5rem;position:absolute;right:-.5rem;top:-.5rem;z-index:1}.dnb-textarea__row{display:inline-flex}.dnb-textarea__suffix.dnb-suffix{padding-left:1rem}.dnb-textarea__textarea{-webkit-overflow-scrolling:touch;-ms-overflow-style:auto;border:none;cursor:auto;font-size:var(--font-size-basis);line-height:var(--line-height-basis);margin:0;outline:none;overflow-y:auto;overscroll-behavior:contain;padding:0 var(--textarea-padding-width);position:relative;scrollbar-color:var(--scrollbar-thumb-color,#888) transparent;z-index:2}html:not([data-visual-test]) .dnb-textarea__textarea{scroll-behavior:smooth}@supports not (scrollbar-color:auto){.dnb-textarea__textarea::-webkit-scrollbar{background-color:var(--scrollbar-track-color,#eee);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-textarea__textarea::-webkit-scrollbar:vertical{width:var(--scrollbar-track-width,.5rem)}.dnb-textarea__textarea::-webkit-scrollbar:horizontal{height:var(--scrollbar-track-width,.5rem)}.dnb-textarea__textarea::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb-color,#888);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-textarea__textarea::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-thumb-hover-color,#666)}}@-moz-document url-prefix(){.dnb-textarea__textarea{overflow-x:clip}}.dnb-textarea__input:-webkit-autofill{box-shadow:0 0 0 var(--border-width) var(--border-color),0 0 0 10em var(--textarea-background-color) inset}.dnb-textarea__input:autofill{box-shadow:0 0 0 var(--border-width) var(--border-color),0 0 0 10em var(--textarea-background-color) inset}.dnb-textarea__placeholder{-webkit-box-orient:vertical;-webkit-line-clamp:var(--textarea-rows,2);border:none;cursor:auto;display:-webkit-box;font-size:var(--font-size-basis);height:100%;left:0;line-height:var(--line-height-basis);margin:0;outline:none;overflow:hidden;padding:0 var(--textarea-padding-width);pointer-events:none;position:absolute;top:0;width:100%;z-index:3}.dnb-textarea__placeholder,.dnb-textarea__textarea{text-align:left}.dnb-textarea__align--right .dnb-textarea__placeholder,.dnb-textarea__align--right .dnb-textarea__textarea{text-align:right}.dnb-textarea__autoresize .dnb-textarea__textarea{resize:none}.dnb-textarea--disabled .dnb-textarea__textarea,.dnb-textarea__textarea[disabled]{-webkit-user-select:none;user-select:none}.dnb-textarea--disabled .dnb-textarea__textarea::-webkit-scrollbar,.dnb-textarea__textarea[disabled]::-webkit-scrollbar{width:0}.dnb-textarea--focus .dnb-textarea__textarea:not([disabled]):not([readonly])~.dnb-textarea__placeholder,.dnb-textarea--has-content .dnb-textarea__textarea~.dnb-textarea__placeholder{display:none}.dnb-textarea__inner>.dnb-form-status{margin:1rem 0 0 calc(0px - var(--textarea-padding-width));order:2}.dnb-textarea:not(.dnb-textarea--vertical) .dnb-form-label{margin-top:.5rem}.dnb-textarea--vertical{align-items:flex-start;display:flex;flex-direction:column}.dnb-textarea:not(.dnb-textarea--vertical)[class*=__status]{align-items:flex-start}.dnb-textarea:not(.dnb-textarea--vertical)[class*=__status]>.dnb-form-label{margin-top:.25rem}@media screen and (max-width:40em){.dnb-textarea{flex-wrap:wrap}.dnb-textarea>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.dnb-textarea--stretch{display:flex;flex-grow:1}.dnb-textarea--stretch .dnb-textarea__inner{flex-grow:1}.dnb-textarea--stretch .dnb-textarea__inner,.dnb-textarea--stretch .dnb-textarea__shell,.dnb-textarea--stretch .dnb-textarea__textarea{width:100%}.dnb-textarea--stretch .dnb-form-label+.dnb-textarea__inner{width:auto}.dnb-form-row--horizontal .dnb-textarea--stretch,.dnb-textarea--vertical.dnb-textarea--stretch .dnb-textarea__inner{width:100%}@media screen and (max-width:40em){.dnb-responsive-component .dnb-textarea{align-items:flex-start;display:flex;flex-direction:column;margin-bottom:.5rem}.dnb-responsive-component .dnb-textarea>.dnb-form-label{margin-bottom:.5rem}}html[data-visual-test] .dnb-textarea__textarea{caret-color:var(--color-white)}.dnb-textarea.dnb-skeleton .dnb-textarea__inner{border-radius:.25rem;margin:0}.dnb-textarea.dnb-skeleton .dnb-textarea__inner .dnb-textarea__shell{margin:var(--textarea-padding-width)}.dnb-textarea.dnb-skeleton .dnb-textarea__state,.dnb-textarea.dnb-skeleton .dnb-textarea__textarea{visibility:hidden}

package/components/textarea/style/dnb-textarea.scss

@@ -71,6 +71,10 @@
     @include textareaStyleCommon();
 
     @include scrollY(auto);
+
+    @include IS_FF() {
+      overflow-x: clip;
+    }
   }
 
   // change the autocomplete appearance once filled out

package/components/toggle-button/style/themes/dnb-toggle-button-theme-sbanken.css

@@ -40,7 +40,6 @@ html:not([data-whatintent=touch]) .dnb-toggle-button__button:hover:not([disabled
   --border-width: 0.09375rem;
   box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
-  background-color: var(--sb-color-gray-light);
   color: var(--sb-color-gray-dark);
 }
 html[data-whatinput=keyboard] .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus .dnb-radio__button {
@@ -59,6 +58,14 @@ html[data-whatinput=keyboard] .dnb-toggle-button__button:not([disabled]):not(:ac
 html[data-whatinput=keyboard] .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus .dnb-checkbox__gfx {
   color: var(--focus-ring-color);
 }
+.dnb-toggle-button--checked .dnb-toggle-button__button[disabled] {
+  --border-color: var(--sb-color-gray-light);
+  --border-width: 0.09375rem;
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+  background-color: var(--sb-color-gray-light);
+  color: var(--sb-color-gray-dark);
+}
 .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active) {
   background-color: var(--sb-color-violet);
   color: var(--sb-color-white);

package/components/toggle-button/style/themes/dnb-toggle-button-theme-sbanken.min.css

@@ -1 +1 @@
-.dnb-toggle-button__button{--border-color:var(--sb-color-violet);--border-width:0.09375rem;background-color:var(--sb-color-white);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--sb-color-violet)}html:not([data-whatintent=touch]) .dnb-toggle-button__button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-toggle-button__button:hover:not([disabled]){background-color:var(--sb-color-violet-light-3);color:var(--sb-color-violet)}.dnb-toggle-button__button:active[disabled],html:not([data-whatintent=touch]) .dnb-toggle-button__button:active[disabled]{cursor:not-allowed}.dnb-toggle-button__button:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-toggle-button__button:active:not([disabled]){--border-color:var(--sb-color-violet-light-3);--border-width:0.125rem;background-color:var(--sb-color-violet);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--sb-color-violet-light-3)}.dnb-toggle-button__button[disabled]{--border-color:var(--sb-color-gray-light);--border-width:0.09375rem;background-color:var(--sb-color-gray-light);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--sb-color-gray-dark)}html[data-whatinput=keyboard] .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus .dnb-radio__button{background-color:transparent;border-color:var(--focus-ring-color);box-shadow:0 0 0 .0625rem var(--focus-ring-color)}html[data-whatinput=keyboard] .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus .dnb-radio__dot{background-color:var(--focus-ring-color)}html[data-whatinput=keyboard] .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus .dnb-checkbox__button{background-color:transparent;border-color:var(--focus-ring-color);box-shadow:0 0 0 .0625rem var(--focus-ring-color)}html[data-whatinput=keyboard] .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus .dnb-checkbox__gfx{color:var(--focus-ring-color)}.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active){background-color:var(--sb-color-violet);box-shadow:none;color:var(--sb-color-white)}html:not([data-whatintent=touch]) .dnb-toggle-button--checked .dnb-toggle-button__button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]){--border-color:var(--sb-color-violet);--border-width:0.125rem;background-color:var(--sb-color-violet);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--sb-color-white)}.dnb-toggle-button--checked .dnb-toggle-button__button:active[disabled],html:not([data-whatintent=touch]) .dnb-toggle-button--checked .dnb-toggle-button__button:active[disabled]{cursor:not-allowed}.dnb-toggle-button--checked .dnb-toggle-button__button:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-toggle-button--checked .dnb-toggle-button__button:active:not([disabled]){--border-color:var(--sb-color-violet-light-3);--border-width:0.125rem;background-color:var(--sb-color-violet);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--sb-color-violet-light-3)}html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus{background-color:var(--sb-color-blue-light-2);color:var(--sb-color-blue-dark-2)}
+.dnb-toggle-button__button{--border-color:var(--sb-color-violet);--border-width:0.09375rem;background-color:var(--sb-color-white);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--sb-color-violet)}html:not([data-whatintent=touch]) .dnb-toggle-button__button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-toggle-button__button:hover:not([disabled]){background-color:var(--sb-color-violet-light-3);color:var(--sb-color-violet)}.dnb-toggle-button__button:active[disabled],html:not([data-whatintent=touch]) .dnb-toggle-button__button:active[disabled]{cursor:not-allowed}.dnb-toggle-button__button:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-toggle-button__button:active:not([disabled]){--border-color:var(--sb-color-violet-light-3);--border-width:0.125rem;background-color:var(--sb-color-violet);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--sb-color-violet-light-3)}.dnb-toggle-button__button[disabled]{--border-color:var(--sb-color-gray-light);--border-width:0.09375rem;border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--sb-color-gray-dark)}html[data-whatinput=keyboard] .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus .dnb-radio__button{background-color:transparent;border-color:var(--focus-ring-color);box-shadow:0 0 0 .0625rem var(--focus-ring-color)}html[data-whatinput=keyboard] .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus .dnb-radio__dot{background-color:var(--focus-ring-color)}html[data-whatinput=keyboard] .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus .dnb-checkbox__button{background-color:transparent;border-color:var(--focus-ring-color);box-shadow:0 0 0 .0625rem var(--focus-ring-color)}html[data-whatinput=keyboard] .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus .dnb-checkbox__gfx{color:var(--focus-ring-color)}.dnb-toggle-button--checked .dnb-toggle-button__button[disabled]{--border-color:var(--sb-color-gray-light);--border-width:0.09375rem;background-color:var(--sb-color-gray-light);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--sb-color-gray-dark)}.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active){background-color:var(--sb-color-violet);box-shadow:none;color:var(--sb-color-white)}html:not([data-whatintent=touch]) .dnb-toggle-button--checked .dnb-toggle-button__button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]){--border-color:var(--sb-color-violet);--border-width:0.125rem;background-color:var(--sb-color-violet);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--sb-color-white)}.dnb-toggle-button--checked .dnb-toggle-button__button:active[disabled],html:not([data-whatintent=touch]) .dnb-toggle-button--checked .dnb-toggle-button__button:active[disabled]{cursor:not-allowed}.dnb-toggle-button--checked .dnb-toggle-button__button:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-toggle-button--checked .dnb-toggle-button__button:active:not([disabled]){--border-color:var(--sb-color-violet-light-3);--border-width:0.125rem;background-color:var(--sb-color-violet);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--sb-color-violet-light-3)}html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus{background-color:var(--sb-color-blue-light-2);color:var(--sb-color-blue-dark-2)}

package/components/toggle-button/style/themes/dnb-toggle-button-theme-sbanken.scss

@@ -24,7 +24,6 @@
 
     &[disabled] {
       @include fakeBorder(var(--sb-color-gray-light), 0.09375rem, inset);
-      background-color: var(--sb-color-gray-light);
       color: var(--sb-color-gray-dark);
     }
 
@@ -55,6 +54,12 @@
 
   /* stylelint-disable no-descending-specificity */
   &--checked &__button {
+    &[disabled] {
+      @include fakeBorder(var(--sb-color-gray-light), 0.09375rem, inset);
+      background-color: var(--sb-color-gray-light);
+      color: var(--sb-color-gray-dark);
+    }
+
     &:not([disabled]):not(:active) {
       background-color: var(--sb-color-violet);
       color: var(--sb-color-white);

package/components/toggle-button/style/themes/dnb-toggle-button-theme-ui.css

@@ -21,6 +21,10 @@
 .dnb-toggle-button .dnb-radio__input:not([disabled]) ~ .dnb-radio__button {
   box-shadow: 0 0 0 0.0318rem var(--color-sea-green);
 }
+.dnb-toggle-button--checked .dnb-toggle-button__button[disabled], .dnb-toggle-button--checked .dnb-toggle-button__button:focus[disabled], .dnb-toggle-button--checked .dnb-toggle-button__button:hover[disabled] {
+  background-color: var(--color-mint-green);
+  color: var(--color-white);
+}
 .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active), .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active), .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active) {
   background-color: var(--color-emerald-green);
   color: var(--color-mint-green);