@dnb/eufemia 10.11.0 → 10.12.0

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

@@ -0,0 +1,29 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+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 { useState } from 'react';
+export function useMultiInputValue(_ref) {
+  let {
+    inputs,
+    defaultValues,
+    callback
+  } = _ref;
+  const [values, setValues] = useState(defaultValues ? defaultValues : createDefaultValues());
+  function createDefaultValues() {
+    return inputs.reduce((values, input) => {
+      values[input.id] = '';
+      return values;
+    }, {});
+  }
+  function onChange(id, value) {
+    const updatedValues = _objectSpread(_objectSpread({}, values), {}, {
+      [id]: value
+    });
+    setValues(updatedValues);
+    if (callback) {
+      callback(updatedValues);
+    }
+  }
+  return [values, onChange];
+}
+//# sourceMappingURL=useMultiInputValues.js.map

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

@@ -0,0 +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"}

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

@@ -5,3 +5,5 @@
 import InputMasked from './InputMasked';
 export default InputMasked;
 export * from './InputMasked';
+export { default as MultiInputMask } from './MultiInputMask';
+export * from './MultiInputMask';

package/components/input-masked/index.js

@@ -1,4 +1,6 @@
 import InputMasked from './InputMasked';
 export default InputMasked;
 export * from './InputMasked';
+export { default as MultiInputMask } from './MultiInputMask';
+export * from './MultiInputMask';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["InputMasked"],"sources":["../../../../src/components/input-masked/index.ts"],"sourcesContent":["/**\n * Component Entry\n *\n */\n\nimport InputMasked from './InputMasked'\nexport default InputMasked\nexport * from './InputMasked'\n"],"mappings":"AAKA,OAAOA,WAAW,MAAM,eAAe;AACvC,eAAeA,WAAW;AAC1B,cAAc,eAAe"}
+{"version":3,"file":"index.js","names":["InputMasked","default","MultiInputMask"],"sources":["../../../../src/components/input-masked/index.ts"],"sourcesContent":["/**\n * Component Entry\n *\n */\n\nimport InputMasked from './InputMasked'\nexport default InputMasked\nexport * from './InputMasked'\n\nexport { default as MultiInputMask } from './MultiInputMask'\nexport * from './MultiInputMask'\n"],"mappings":"AAKA,OAAOA,WAAW,MAAM,eAAe;AACvC,eAAeA,WAAW;AAC1B,cAAc,eAAe;AAE7B,SAASC,OAAO,IAAIC,cAAc,QAAQ,kBAAkB;AAC5D,cAAc,kBAAkB"}

package/components/input-masked/style/dnb-input-masked.css

@@ -7,4 +7,61 @@
  */
 .dnb-input-masked--guide {
   font-family: var(--font-family-monospace);
+}
+
+.dnb-multi-input-mask__fieldset {
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+.dnb-multi-input-mask__fieldset--horizontal {
+  display: inline-flex;
+  flex-flow: row wrap;
+  align-items: baseline;
+  grid-gap: 1rem;
+  gap: 1rem;
+}
+
+.dnb-multi-input-mask__input {
+  display: inline-block;
+  width: auto;
+  margin: 0;
+  padding: 0 0.125rem;
+  transform: translateY(0);
+  outline: none;
+  font-family: var(--font-family-monospace);
+  text-align: center;
+  border: none;
+  background: transparent;
+  overflow: visible;
+  white-space: nowrap;
+}
+.dnb-multi-input-mask__input:first-of-type {
+  padding-left: 0.5rem;
+}
+.dnb-multi-input-mask__input:last-of-type {
+  padding-right: 0.5rem;
+}
+
+.dnb-multi-input-mask {
+  width: -moz-fit-content;
+  width: fit-content;
+}
+.dnb-multi-input-mask:not(.dnb-input__status--error) .dnb-multi-input-mask__input,
+.dnb-multi-input-mask:not(.dnb-input__status--error) .dnb-multi-input-mask__delimiter {
+  color: var(--color-black-55);
+}
+.dnb-multi-input-mask:not(.dnb-input__status--error) .dnb-multi-input-mask__input--highlight,
+.dnb-multi-input-mask:not(.dnb-input__status--error) .dnb-multi-input-mask__delimiter--highlight {
+  color: var(--color-black);
+}
+.dnb-multi-input-mask .dnb-input__shell:focus-within {
+  box-shadow: 0 0 0 var(--input-border-width--focus) var(--input-border-color--hover);
+}
+
+.dnb-multi-input-mask__legend--horizontal.dnb-form-label {
+  display: contents;
+}
+.dnb-multi-input-mask__legend:not([disabled]):hover ~ .dnb-multi-input-mask .dnb-input__shell {
+  box-shadow: 0 0 0 var(--input-border-width--focus) var(--input-border-color--hover);
 }

package/components/input-masked/style/dnb-input-masked.min.css

@@ -1 +1 @@
-.dnb-input-masked--guide{font-family:var(--font-family-monospace)}
+.dnb-input-masked--guide{font-family:var(--font-family-monospace)}.dnb-multi-input-mask__fieldset{border:none;margin:0;padding:0}.dnb-multi-input-mask__fieldset--horizontal{grid-gap:1rem;align-items:baseline;display:inline-flex;flex-flow:row wrap;gap:1rem}.dnb-multi-input-mask__input{background:transparent;border:none;display:inline-block;font-family:var(--font-family-monospace);margin:0;outline:none;overflow:visible;padding:0 .125rem;text-align:center;transform:translateY(0);white-space:nowrap;width:auto}.dnb-multi-input-mask__input:first-of-type{padding-left:.5rem}.dnb-multi-input-mask__input:last-of-type{padding-right:.5rem}.dnb-multi-input-mask{width:-moz-fit-content;width:fit-content}.dnb-multi-input-mask:not(.dnb-input__status--error) .dnb-multi-input-mask__delimiter,.dnb-multi-input-mask:not(.dnb-input__status--error) .dnb-multi-input-mask__input{color:var(--color-black-55)}.dnb-multi-input-mask:not(.dnb-input__status--error) .dnb-multi-input-mask__delimiter--highlight,.dnb-multi-input-mask:not(.dnb-input__status--error) .dnb-multi-input-mask__input--highlight{color:var(--color-black)}.dnb-multi-input-mask .dnb-input__shell:focus-within{box-shadow:0 0 0 var(--input-border-width--focus) var(--input-border-color--hover)}.dnb-multi-input-mask__legend--horizontal.dnb-form-label{display:contents}.dnb-multi-input-mask__legend:not([disabled]):hover~.dnb-multi-input-mask .dnb-input__shell{box-shadow:0 0 0 var(--input-border-width--focus) var(--input-border-color--hover)}

package/components/input-masked/style/dnb-input-masked.scss

@@ -10,3 +10,76 @@
     font-family: var(--font-family-monospace);
   }
 }
+
+// MultiInputMask
+.dnb-multi-input-mask__fieldset {
+  @include fieldsetReset();
+
+  &--horizontal {
+    display: inline-flex;
+    flex-flow: row wrap;
+    align-items: baseline;
+    // Adds the 1rem space between legend and input wrapper, as the `display: contents` in .dnb-multi-input-mask__legend makes the margins from .dnb-form-label not apply
+    gap: 1rem;
+  }
+}
+
+.dnb-multi-input-mask__input {
+  display: inline-block;
+  width: auto;
+
+  margin: 0;
+  padding: 0 0.125rem;
+
+  // reset vertical alignment
+  transform: translateY(0);
+
+  outline: none;
+
+  font-family: var(--font-family-monospace);
+  text-align: center;
+  border: none;
+  background: transparent;
+
+  overflow: visible;
+  white-space: nowrap;
+
+  &:first-of-type {
+    padding-left: 0.5rem;
+  }
+
+  &:last-of-type {
+    padding-right: 0.5rem;
+  }
+}
+
+.dnb-multi-input-mask {
+  width: fit-content;
+
+  &:not(.dnb-input__status--error) {
+    .dnb-multi-input-mask__input,
+    .dnb-multi-input-mask__delimiter {
+      color: var(--color-black-55);
+
+      &--highlight {
+        color: var(--color-black);
+      }
+    }
+  }
+
+  .dnb-input__shell:focus-within {
+    box-shadow: 0 0 0 var(--input-border-width--focus)
+      var(--input-border-color--hover);
+  }
+}
+
+.dnb-multi-input-mask__legend {
+  &--horizontal.dnb-form-label {
+    display: contents;
+  }
+
+  &:not([disabled]):hover ~ .dnb-multi-input-mask .dnb-input__shell {
+    box-shadow: 0 0 0 var(--input-border-width--focus)
+      var(--input-border-color--hover);
+  }
+}

package/components/lib.d.ts

@@ -118,7 +118,7 @@ export declare const getComponents: () => {
         _supportsSpacingProps: boolean;
     };
     Input: typeof Input;
-    InputMasked: import("react").FC<import("./input-masked/InputMasked").InputMaskedProps>;
+    InputMasked: any;
     Logo: typeof Logo;
     Modal: typeof import("./modal/Modal").OriginalComponent;
     NumberFormat: typeof NumberFormat;

package/components/section/Section.d.ts

@@ -36,11 +36,11 @@ export type SectionProps = {
      */
     variant?: SectionVariants | string;
     /**
-     * Define if the background color should break-out to a fullscreen view. Defualts to `true`.
+     * Define if the background color should break-out to a fullscreen view. Defaults to `true`.
      */
     breakout?: boolean | ResponsiveProp<boolean>;
     /**
-     * Define if the section should have rounded corners. Defualts to `false`.
+     * Define if the section should have rounded corners. Defaults to `false`.
      */
     roundedCorner?: boolean | ResponsiveProp<boolean>;
     /**

package/components/section/Section.js.map

@@ -1 +1 @@
-{"version":3,"file":"Section.js","names":["React","classnames","Context","isTrue","extendPropsWithContext","Space","defaultProps","element","Section","localProps","context","useContext","props","variant","breakout","roundedCorner","textColor","backgroundColor","outline","innerRef","className","children","spacing","style_type","inner_ref","attributes","_objectWithoutProperties","_excluded","params","_objectSpread","internalRef","useRef","elementRef","styleObj","computeStyle","value","getColor","String","style","createElement","_extends","test","undefined","property","name","valueCallback","media","small","medium","large","result","size","_media","_media2","_name","_supportsSpacingProps"],"sources":["../../../../src/components/section/Section.tsx"],"sourcesContent":["/**\n * Web Section Component\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport Context from '../../shared/Context'\nimport {\n  isTrue,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\nimport type {\n  DynamicElement,\n  ResponsiveProp,\n  SpacingProps,\n} from '../../shared/types'\nimport Space from '../space/Space'\n\nexport type SectionVariants = 'error' | 'info' | 'warning' | 'success'\n\nexport type SectionStyleTypes =\n  | 'divider'\n  | 'white'\n  | 'transparent'\n\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'lavender'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'pistachio'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'emerald-green'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'sea-green'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'fire-red'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'fire-red-8'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'sand-yellow'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'black-3'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'mint-green'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'mint-green-12'\n\nexport type SectionSpacing =\n  | boolean\n  | 'x-small'\n  | 'small'\n  | 'medium'\n  | 'large'\n  | 'x-large'\n  | 'xx-large'\n\nexport type TextColor = string\nexport type OutlineColor = string | boolean\nexport type BackgroundColor = string\n\nexport type SectionProps = {\n  /**\n   * Defines the semantic purpose and subsequently the style of the visual helper. Will take precedence over the style_type prop\n   */\n  variant?: SectionVariants | string\n\n  /**\n   * Define if the background color should break-out to a fullscreen view. Defualts to `true`.\n   */\n  breakout?: boolean | ResponsiveProp<boolean>\n\n  /**\n   * Define if the section should have rounded corners. Defualts to `false`.\n   */\n  roundedCorner?: boolean | ResponsiveProp<boolean>\n\n  /**\n   * Define a custom border color. Use a Eufemia color.\n   */\n  outline?: OutlineColor | ResponsiveProp<OutlineColor>\n\n  /**\n   * Define a custom text color to compliment the backgroundColor. Use a Eufemia color.\n   */\n  textColor?: TextColor | ResponsiveProp<TextColor>\n\n  /**\n   * Define a custom background color, instead of a variant. Use a Eufemia color.\n   */\n  backgroundColor?: BackgroundColor | ResponsiveProp<BackgroundColor>\n\n  /**\n   * Define what HTML element should be used. Defaults to `<section>`.\n   */\n  element?: DynamicElement\n\n  /**\n   * Define a React.Ref.\n   */\n  innerRef?: React.RefObject<HTMLElement>\n\n  /**\n   * @deprecated in v11 use \"innerSpace\" prop instead */\n  spacing?: SectionSpacing | ResponsiveProp<SectionSpacing>\n  /**\n   * @deprecated in v11 use \"background\" prop instead */\n  style_type?: SectionStyleTypes | string\n  /**\n   * @deprecated in v11 use \"innerRef\" prop instead */\n  inner_ref?: React.RefObject<HTMLElement>\n}\n\nexport type SectionAllProps = SectionProps &\n  SpacingProps &\n  Omit<React.HTMLProps<HTMLElement>, 'ref'>\n\ntype Attributes = Record<string, unknown> & { style?: React.CSSProperties }\n\nconst defaultProps = {\n  element: 'section',\n}\n\nexport default function Section(localProps: SectionAllProps) {\n  const context = React.useContext(Context)\n\n  // use only the props from context, who are available here anyway\n  const props = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context.Section\n  )\n\n  const {\n    element,\n    variant,\n    breakout = true,\n    roundedCorner,\n    textColor,\n    backgroundColor,\n    outline,\n    innerRef,\n\n    className,\n    children,\n\n    spacing,\n    style_type,\n    inner_ref,\n\n    ...attributes\n  } = props\n\n  const params = {\n    className: classnames(\n      'dnb-section',\n      `dnb-section--${variant ? variant : style_type || 'default'}`,\n      spacing &&\n        `dnb-section--spacing-${isTrue(spacing) ? 'large' : spacing}`,\n      className\n    ),\n    ...attributes,\n  } as Attributes\n\n  const internalRef = React.useRef<HTMLElement>()\n  const elementRef = innerRef || inner_ref || internalRef\n  params.innerRef = elementRef\n\n  const styleObj = {\n    ...computeStyle(\n      breakout,\n      'breakout',\n      (value) => `var(--breakout--${value ? 'on' : 'off'})`\n    ),\n    ...computeStyle(\n      roundedCorner,\n      'rounded-corner',\n      (value) => value && 'var(--rounded-corner--value)'\n    ),\n    ...computeStyle(textColor, 'text-color', (value) => getColor(value)),\n    ...computeStyle(backgroundColor, 'background-color', (value) =>\n      getColor(value)\n    ),\n    ...computeStyle(outline, 'outline-color', (value) =>\n      String(value) === 'true'\n        ? 'var(--outline-color--value)'\n        : getColor(value)\n    ),\n    ...params?.style,\n  } as React.CSSProperties\n\n  return (\n    <Space {...params} element={element} style={styleObj}>\n      {children}\n    </Space>\n  )\n}\n\nfunction getColor(value: string) {\n  return value\n    ? !/#|var/.test(value)\n      ? `var(--color-${value})`\n      : value\n    : undefined\n}\n\nfunction computeStyle(\n  property: ResponsiveProp<unknown> | boolean | string,\n  name: string,\n  valueCallback: (value: string) => string | undefined\n) {\n  let media = property as ResponsiveProp<unknown>\n\n  if (media !== null && typeof media !== 'object') {\n    media = {\n      small: property,\n      medium: property,\n      large: property,\n    } as ResponsiveProp<unknown>\n  }\n\n  const result = {}\n\n  for (const size in media as ResponsiveProp<unknown>) {\n    if (typeof media?.[size] !== 'undefined') {\n      const value = valueCallback(media?.[size])\n      if (typeof value === 'string') {\n        result[`--${name}--${size}`] = value\n      }\n    }\n  }\n\n  return result\n}\n\nSection._name = 'Section'\nSection._supportsSpacingProps = true\n"],"mappings":"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"}
+{"version":3,"file":"Section.js","names":["React","classnames","Context","isTrue","extendPropsWithContext","Space","defaultProps","element","Section","localProps","context","useContext","props","variant","breakout","roundedCorner","textColor","backgroundColor","outline","innerRef","className","children","spacing","style_type","inner_ref","attributes","_objectWithoutProperties","_excluded","params","_objectSpread","internalRef","useRef","elementRef","styleObj","computeStyle","value","getColor","String","style","createElement","_extends","test","undefined","property","name","valueCallback","media","small","medium","large","result","size","_media","_media2","_name","_supportsSpacingProps"],"sources":["../../../../src/components/section/Section.tsx"],"sourcesContent":["/**\n * Web Section Component\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport Context from '../../shared/Context'\nimport {\n  isTrue,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\nimport type {\n  DynamicElement,\n  ResponsiveProp,\n  SpacingProps,\n} from '../../shared/types'\nimport Space from '../space/Space'\n\nexport type SectionVariants = 'error' | 'info' | 'warning' | 'success'\n\nexport type SectionStyleTypes =\n  | 'divider'\n  | 'white'\n  | 'transparent'\n\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'lavender'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'pistachio'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'emerald-green'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'sea-green'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'fire-red'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'fire-red-8'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'sand-yellow'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'black-3'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'mint-green'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'mint-green-12'\n\nexport type SectionSpacing =\n  | boolean\n  | 'x-small'\n  | 'small'\n  | 'medium'\n  | 'large'\n  | 'x-large'\n  | 'xx-large'\n\nexport type TextColor = string\nexport type OutlineColor = string | boolean\nexport type BackgroundColor = string\n\nexport type SectionProps = {\n  /**\n   * Defines the semantic purpose and subsequently the style of the visual helper. Will take precedence over the style_type prop\n   */\n  variant?: SectionVariants | string\n\n  /**\n   * Define if the background color should break-out to a fullscreen view. Defaults to `true`.\n   */\n  breakout?: boolean | ResponsiveProp<boolean>\n\n  /**\n   * Define if the section should have rounded corners. Defaults to `false`.\n   */\n  roundedCorner?: boolean | ResponsiveProp<boolean>\n\n  /**\n   * Define a custom border color. Use a Eufemia color.\n   */\n  outline?: OutlineColor | ResponsiveProp<OutlineColor>\n\n  /**\n   * Define a custom text color to compliment the backgroundColor. Use a Eufemia color.\n   */\n  textColor?: TextColor | ResponsiveProp<TextColor>\n\n  /**\n   * Define a custom background color, instead of a variant. Use a Eufemia color.\n   */\n  backgroundColor?: BackgroundColor | ResponsiveProp<BackgroundColor>\n\n  /**\n   * Define what HTML element should be used. Defaults to `<section>`.\n   */\n  element?: DynamicElement\n\n  /**\n   * Define a React.Ref.\n   */\n  innerRef?: React.RefObject<HTMLElement>\n\n  /**\n   * @deprecated in v11 use \"innerSpace\" prop instead */\n  spacing?: SectionSpacing | ResponsiveProp<SectionSpacing>\n  /**\n   * @deprecated in v11 use \"background\" prop instead */\n  style_type?: SectionStyleTypes | string\n  /**\n   * @deprecated in v11 use \"innerRef\" prop instead */\n  inner_ref?: React.RefObject<HTMLElement>\n}\n\nexport type SectionAllProps = SectionProps &\n  SpacingProps &\n  Omit<React.HTMLProps<HTMLElement>, 'ref'>\n\ntype Attributes = Record<string, unknown> & { style?: React.CSSProperties }\n\nconst defaultProps = {\n  element: 'section',\n}\n\nexport default function Section(localProps: SectionAllProps) {\n  const context = React.useContext(Context)\n\n  // use only the props from context, who are available here anyway\n  const props = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context.Section\n  )\n\n  const {\n    element,\n    variant,\n    breakout = true,\n    roundedCorner,\n    textColor,\n    backgroundColor,\n    outline,\n    innerRef,\n\n    className,\n    children,\n\n    spacing,\n    style_type,\n    inner_ref,\n\n    ...attributes\n  } = props\n\n  const params = {\n    className: classnames(\n      'dnb-section',\n      `dnb-section--${variant ? variant : style_type || 'default'}`,\n      spacing &&\n        `dnb-section--spacing-${isTrue(spacing) ? 'large' : spacing}`,\n      className\n    ),\n    ...attributes,\n  } as Attributes\n\n  const internalRef = React.useRef<HTMLElement>()\n  const elementRef = innerRef || inner_ref || internalRef\n  params.innerRef = elementRef\n\n  const styleObj = {\n    ...computeStyle(\n      breakout,\n      'breakout',\n      (value) => `var(--breakout--${value ? 'on' : 'off'})`\n    ),\n    ...computeStyle(\n      roundedCorner,\n      'rounded-corner',\n      (value) => value && 'var(--rounded-corner--value)'\n    ),\n    ...computeStyle(textColor, 'text-color', (value) => getColor(value)),\n    ...computeStyle(backgroundColor, 'background-color', (value) =>\n      getColor(value)\n    ),\n    ...computeStyle(outline, 'outline-color', (value) =>\n      String(value) === 'true'\n        ? 'var(--outline-color--value)'\n        : getColor(value)\n    ),\n    ...params?.style,\n  } as React.CSSProperties\n\n  return (\n    <Space {...params} element={element} style={styleObj}>\n      {children}\n    </Space>\n  )\n}\n\nfunction getColor(value: string) {\n  return value\n    ? !/#|var/.test(value)\n      ? `var(--color-${value})`\n      : value\n    : undefined\n}\n\nfunction computeStyle(\n  property: ResponsiveProp<unknown> | boolean | string,\n  name: string,\n  valueCallback: (value: string) => string | undefined\n) {\n  let media = property as ResponsiveProp<unknown>\n\n  if (media !== null && typeof media !== 'object') {\n    media = {\n      small: property,\n      medium: property,\n      large: property,\n    } as ResponsiveProp<unknown>\n  }\n\n  const result = {}\n\n  for (const size in media as ResponsiveProp<unknown>) {\n    if (typeof media?.[size] !== 'undefined') {\n      const value = valueCallback(media?.[size])\n      if (typeof value === 'string') {\n        result[`--${name}--${size}`] = value\n      }\n    }\n  }\n\n  return result\n}\n\nSection._name = 'Section'\nSection._supportsSpacingProps = true\n"],"mappings":"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"}

package/es/components/button/Button.d.ts

@@ -38,9 +38,9 @@ export type ButtonChildren =
   | string
   | ((...args: any[]) => any)
   | React.ReactNode;
-export type ButtonElement = DynamicElement<
-  HTMLButtonElement | HTMLAnchorElement | AnchorProps
->;
+export type ButtonElement =
+  | DynamicElement<HTMLButtonElement | HTMLAnchorElement | AnchorProps>
+  | React.ReactNode;
 export type ButtonOnClick = string | ((...args: any[]) => any);
 export type ButtonProps = {
   /**

package/es/components/form-label/FormLabel.js

@@ -31,8 +31,9 @@ export default function FormLabel(localProps) {
       label_direction
     } = props,
     attributes = _objectWithoutProperties(props, _excluded);
+  const isInteractive = !props.disabled && !srOnly && (typeof props.onClick === 'function' || forId || for_id);
   const params = _objectSpread({
-    className: classnames('dnb-form-label', (isTrue(vertical) || label_direction === 'vertical') && `dnb-form-label--vertical`, (srOnly || isTrue(sr_only)) && 'dnb-sr-only', createSkeletonClass('font', skeleton, context), createSpacingClasses(props), className, size && `dnb-h--${size}`),
+    className: classnames('dnb-form-label', (isTrue(vertical) || label_direction === 'vertical') && `dnb-form-label--vertical`, (srOnly || isTrue(sr_only)) && 'dnb-sr-only', createSkeletonClass('font', skeleton, context), createSpacingClasses(props), className, size && `dnb-h--${size}`, isInteractive && 'dnb-form-label--interactive'),
     htmlFor: forId || for_id
   }, attributes);
   params['ref'] = innerRef;

package/es/components/form-label/FormLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormLabel.js","names":["React","classnames","extendPropsWithContext","isTrue","validateDOMAttributes","createSpacingClasses","createSkeletonClass","skeletonDOMAttributes","pickFormElementProps","Context","FormLabel","localProps","context","useContext","props","skeleton","FormRow","formElement","forId","text","srOnly","vertical","size","element","Element","innerRef","className","children","for_id","sr_only","label_direction","attributes","_objectWithoutProperties","_excluded","params","_objectSpread","htmlFor","createElement","_supportsSpacingProps"],"sources":["../../../../src/components/form-label/FormLabel.tsx"],"sourcesContent":["/**\n * Web FormLabel Component\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport {\n  extendPropsWithContext,\n  isTrue,\n  validateDOMAttributes,\n} from '../../shared/component-helper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport {\n  createSkeletonClass,\n  skeletonDOMAttributes,\n} from '../skeleton/SkeletonHelper'\nimport { pickFormElementProps } from '../../shared/helpers/filterValidProps'\nimport Context from '../../shared/Context'\nimport {\n  DynamicElement,\n  DynamicElementParams,\n  SpacingProps,\n} from '../../shared/types'\n\nexport type FormLabelProps = {\n  forId?: string\n  element?: DynamicElement<HTMLLabelElement>\n  text?: React.ReactNode\n  size?: 'basis' | 'medium' | 'large'\n  id?: string\n  skeleton?: boolean\n  label?: React.ReactNode\n  vertical?: boolean\n  srOnly?: boolean\n  innerRef?: React.RefObject<HTMLElement>\n\n  /** Is not a part of HTMLLabelElement and not documented as of now */\n  disabled?: boolean\n\n  /** @deprecated use forId instead */\n  for_id?: string\n  /** @deprecated use srOnly instead */\n  sr_only?: boolean\n  /** @deprecated use labelDirection instead (was not documented before) */\n  label_direction?: 'vertical' | 'horizontal'\n}\n\nexport type FormLabelAllProps = FormLabelProps &\n  React.HTMLAttributes<HTMLLabelElement> &\n  SpacingProps\n\nexport default function FormLabel(localProps: FormLabelAllProps) {\n  const context = React.useContext(Context)\n\n  // use only the props from context, who are available here anyway\n  const props = extendPropsWithContext(\n    localProps,\n    null,\n    { skeleton: context?.skeleton },\n    pickFormElementProps(context?.FormRow), // Deprecated – can be removed in v11\n    pickFormElementProps(context?.formElement),\n    context?.FormLabel\n  )\n\n  const {\n    forId,\n    text,\n    srOnly,\n    vertical,\n    size,\n    skeleton,\n    element: Element = 'label',\n    innerRef,\n    className,\n    children,\n\n    /** @deprecated can be removed in v11 */\n    for_id,\n    sr_only,\n    label_direction,\n\n    ...attributes\n  } = props\n\n  const params = {\n    className: classnames(\n      'dnb-form-label',\n      (isTrue(vertical) || label_direction === 'vertical') &&\n        `dnb-form-label--vertical`,\n      (srOnly || isTrue(sr_only)) && 'dnb-sr-only',\n      size && `dnb-h--${size}`,\n      createSkeletonClass('font', skeleton, context),\n      createSpacingClasses(props),\n      className\n    ),\n    htmlFor: forId || for_id,\n    ...(attributes as DynamicElementParams),\n  }\n\n  params['ref'] = innerRef\n\n  skeletonDOMAttributes(params, skeleton, context)\n  validateDOMAttributes(localProps, params)\n\n  return <Element {...params}>{text || children}</Element>\n}\n\nFormLabel._supportsSpacingProps = true\n"],"mappings":";;;;;AAKA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SACEC,sBAAsB,EACtBC,MAAM,EACNC,qBAAqB,QAChB,+BAA+B;AACtC,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,SACEC,mBAAmB,EACnBC,qBAAqB,QAChB,4BAA4B;AACnC,SAASC,oBAAoB,QAAQ,uCAAuC;AAC5E,OAAOC,OAAO,MAAM,sBAAsB;AAkC1C,eAAe,SAASC,SAASA,CAACC,UAA6B,EAAE;EAC/D,MAAMC,OAAO,GAAGZ,KAAK,CAACa,UAAU,CAACJ,OAAO,CAAC;EAGzC,MAAMK,KAAK,GAAGZ,sBAAsB,CAClCS,UAAU,EACV,IAAI,EACJ;IAAEI,QAAQ,EAAEH,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEG;EAAS,CAAC,EAC/BP,oBAAoB,CAACI,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEI,OAAO,CAAC,EACtCR,oBAAoB,CAACI,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEK,WAAW,CAAC,EAC1CL,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEF,SACX,CAAC;EAED,MAAM;MACJQ,KAAK;MACLC,IAAI;MACJC,MAAM;MACNC,QAAQ;MACRC,IAAI;MACJP,QAAQ;MACRQ,OAAO,EAAEC,OAAO,GAAG,OAAO;MAC1BC,QAAQ;MACRC,SAAS;MACTC,QAAQ;MAGRC,MAAM;MACNC,OAAO;MACPC;IAGF,CAAC,GAAGhB,KAAK;IADJiB,UAAU,GAAAC,wBAAA,CACXlB,KAAK,EAAAmB,SAAA;EAET,MAAMC,MAAM,GAAAC,aAAA;IACVT,SAAS,EAAEzB,UAAU,CACnB,gBAAgB,EAChB,CAACE,MAAM,CAACkB,QAAQ,CAAC,IAAIS,eAAe,KAAK,UAAU,KAChD,0BAAyB,EAC5B,CAACV,MAAM,IAAIjB,MAAM,CAAC0B,OAAO,CAAC,KAAK,aAAa,EAE5CvB,mBAAmB,CAAC,MAAM,EAAES,QAAQ,EAAEH,OAAO,CAAC,EAC9CP,oBAAoB,CAACS,KAAK,CAAC,EAC3BY,SAAS,EAHTJ,IAAI,IAAK,UAASA,IAAK,EAIzB,CAAC;IACDc,OAAO,EAAElB,KAAK,IAAIU;EAAM,GACpBG,UAAU,CACf;EAEDG,MAAM,CAAC,KAAK,CAAC,GAAGT,QAAQ;EAExBlB,qBAAqB,CAAC2B,MAAM,EAAEnB,QAAQ,EAAEH,OAAO,CAAC;EAChDR,qBAAqB,CAACO,UAAU,EAAEuB,MAAM,CAAC;EAEzC,OAAOlC,KAAA,CAAAqC,aAAA,CAACb,OAAO,EAAKU,MAAM,EAAGf,IAAI,IAAIQ,QAAkB,CAAC;AAC1D;AAEAjB,SAAS,CAAC4B,qBAAqB,GAAG,IAAI"}
+{"version":3,"file":"FormLabel.js","names":["React","classnames","extendPropsWithContext","isTrue","validateDOMAttributes","createSpacingClasses","createSkeletonClass","skeletonDOMAttributes","pickFormElementProps","Context","FormLabel","localProps","context","useContext","props","skeleton","FormRow","formElement","forId","text","srOnly","vertical","size","element","Element","innerRef","className","children","for_id","sr_only","label_direction","attributes","_objectWithoutProperties","_excluded","isInteractive","disabled","onClick","params","_objectSpread","htmlFor","createElement","_supportsSpacingProps"],"sources":["../../../../src/components/form-label/FormLabel.tsx"],"sourcesContent":["/**\n * Web FormLabel Component\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport {\n  extendPropsWithContext,\n  isTrue,\n  validateDOMAttributes,\n} from '../../shared/component-helper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport {\n  createSkeletonClass,\n  skeletonDOMAttributes,\n} from '../skeleton/SkeletonHelper'\nimport { pickFormElementProps } from '../../shared/helpers/filterValidProps'\nimport Context from '../../shared/Context'\nimport {\n  DynamicElement,\n  DynamicElementParams,\n  SpacingProps,\n} from '../../shared/types'\n\nexport type FormLabelProps = {\n  forId?: string\n  element?: DynamicElement<HTMLLabelElement>\n  text?: React.ReactNode\n  size?: 'basis' | 'medium' | 'large'\n  id?: string\n  skeleton?: boolean\n  label?: React.ReactNode\n  vertical?: boolean\n  srOnly?: boolean\n  innerRef?: React.RefObject<HTMLElement>\n\n  /** Is not a part of HTMLLabelElement and not documented as of now */\n  disabled?: boolean\n\n  /** @deprecated use forId instead */\n  for_id?: string\n  /** @deprecated use srOnly instead */\n  sr_only?: boolean\n  /** @deprecated use labelDirection instead (was not documented before) */\n  label_direction?: 'vertical' | 'horizontal'\n}\n\nexport type FormLabelAllProps = FormLabelProps &\n  React.HTMLAttributes<HTMLLabelElement> &\n  SpacingProps\n\nexport default function FormLabel(localProps: FormLabelAllProps) {\n  const context = React.useContext(Context)\n\n  // use only the props from context, who are available here anyway\n  const props = extendPropsWithContext(\n    localProps,\n    null,\n    { skeleton: context?.skeleton },\n    pickFormElementProps(context?.FormRow), // Deprecated – can be removed in v11\n    pickFormElementProps(context?.formElement),\n    context?.FormLabel\n  )\n\n  const {\n    forId,\n    text,\n    srOnly,\n    vertical,\n    size,\n    skeleton,\n    element: Element = 'label',\n    innerRef,\n    className,\n    children,\n\n    /** @deprecated can be removed in v11 */\n    for_id,\n    sr_only,\n    label_direction,\n\n    ...attributes\n  } = props\n\n  const isInteractive =\n    !props.disabled &&\n    !srOnly &&\n    (typeof props.onClick === 'function' || forId || for_id)\n\n  const params = {\n    className: classnames(\n      'dnb-form-label',\n      (isTrue(vertical) || label_direction === 'vertical') &&\n        `dnb-form-label--vertical`,\n      (srOnly || isTrue(sr_only)) && 'dnb-sr-only',\n      size && `dnb-h--${size}`,\n      isInteractive && 'dnb-form-label--interactive',\n      createSkeletonClass('font', skeleton, context),\n      createSpacingClasses(props),\n      className\n    ),\n    htmlFor: forId || for_id,\n    ...(attributes as DynamicElementParams),\n  }\n\n  params['ref'] = innerRef\n\n  skeletonDOMAttributes(params, skeleton, context)\n  validateDOMAttributes(localProps, params)\n\n  return <Element {...params}>{text || children}</Element>\n}\n\nFormLabel._supportsSpacingProps = true\n"],"mappings":";;;;;AAKA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SACEC,sBAAsB,EACtBC,MAAM,EACNC,qBAAqB,QAChB,+BAA+B;AACtC,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,SACEC,mBAAmB,EACnBC,qBAAqB,QAChB,4BAA4B;AACnC,SAASC,oBAAoB,QAAQ,uCAAuC;AAC5E,OAAOC,OAAO,MAAM,sBAAsB;AAkC1C,eAAe,SAASC,SAASA,CAACC,UAA6B,EAAE;EAC/D,MAAMC,OAAO,GAAGZ,KAAK,CAACa,UAAU,CAACJ,OAAO,CAAC;EAGzC,MAAMK,KAAK,GAAGZ,sBAAsB,CAClCS,UAAU,EACV,IAAI,EACJ;IAAEI,QAAQ,EAAEH,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEG;EAAS,CAAC,EAC/BP,oBAAoB,CAACI,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEI,OAAO,CAAC,EACtCR,oBAAoB,CAACI,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEK,WAAW,CAAC,EAC1CL,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEF,SACX,CAAC;EAED,MAAM;MACJQ,KAAK;MACLC,IAAI;MACJC,MAAM;MACNC,QAAQ;MACRC,IAAI;MACJP,QAAQ;MACRQ,OAAO,EAAEC,OAAO,GAAG,OAAO;MAC1BC,QAAQ;MACRC,SAAS;MACTC,QAAQ;MAGRC,MAAM;MACNC,OAAO;MACPC;IAGF,CAAC,GAAGhB,KAAK;IADJiB,UAAU,GAAAC,wBAAA,CACXlB,KAAK,EAAAmB,SAAA;EAET,MAAMC,aAAa,GACjB,CAACpB,KAAK,CAACqB,QAAQ,IACf,CAACf,MAAM,KACN,OAAON,KAAK,CAACsB,OAAO,KAAK,UAAU,IAAIlB,KAAK,IAAIU,MAAM,CAAC;EAE1D,MAAMS,MAAM,GAAAC,aAAA;IACVZ,SAAS,EAAEzB,UAAU,CACnB,gBAAgB,EAChB,CAACE,MAAM,CAACkB,QAAQ,CAAC,IAAIS,eAAe,KAAK,UAAU,KAChD,0BAAyB,EAC5B,CAACV,MAAM,IAAIjB,MAAM,CAAC0B,OAAO,CAAC,KAAK,aAAa,EAG5CvB,mBAAmB,CAAC,MAAM,EAAES,QAAQ,EAAEH,OAAO,CAAC,EAC9CP,oBAAoB,CAACS,KAAK,CAAC,EAC3BY,SAAS,EAJTJ,IAAI,IAAK,UAASA,IAAK,EAAC,EACxBY,aAAa,IAAI,6BAInB,CAAC;IACDK,OAAO,EAAErB,KAAK,IAAIU;EAAM,GACpBG,UAAU,CACf;EAEDM,MAAM,CAAC,KAAK,CAAC,GAAGZ,QAAQ;EAExBlB,qBAAqB,CAAC8B,MAAM,EAAEtB,QAAQ,EAAEH,OAAO,CAAC;EAChDR,qBAAqB,CAACO,UAAU,EAAE0B,MAAM,CAAC;EAEzC,OAAOrC,KAAA,CAAAwC,aAAA,CAAChB,OAAO,EAAKa,MAAM,EAAGlB,IAAI,IAAIQ,QAAkB,CAAC;AAC1D;AAEAjB,SAAS,CAAC+B,qBAAqB,GAAG,IAAI"}

package/es/components/form-label/style/themes/dnb-form-label-theme-ui.css

@@ -5,9 +5,9 @@
 .dnb-form-label {
   color: var(--color-black-80);
 }
-.dnb-form-label[for]:not([disabled]) {
+.dnb-form-label--interactive {
   cursor: pointer;
 }
-.dnb-form-label[for]:not([disabled]):hover {
+.dnb-form-label--interactive:hover {
   color: var(--color-sea-green);
 }

package/es/components/form-label/style/themes/dnb-form-label-theme-ui.min.css

@@ -1 +1 @@
-.dnb-form-label{color:var(--color-black-80)}.dnb-form-label[for]:not([disabled]){cursor:pointer}.dnb-form-label[for]:not([disabled]):hover{color:var(--color-sea-green)}
+.dnb-form-label{color:var(--color-black-80)}.dnb-form-label--interactive{cursor:pointer}.dnb-form-label--interactive:hover{color:var(--color-sea-green)}

package/es/components/form-label/style/themes/dnb-form-label-theme-ui.scss

@@ -6,7 +6,7 @@
 .dnb-form-label {
   color: var(--color-black-80);
 
-  &[for]:not([disabled]) {
+  &--interactive {
     cursor: pointer;
 
     &:hover {

package/es/components/input-masked/InputMasked.d.ts

@@ -254,5 +254,4 @@ export interface InputMaskedProps
   children?: InputMaskedChildren;
   on_state_update?: (...args: any[]) => any;
 }
-declare const InputMasked: React.FC<InputMaskedProps>;
 export default InputMasked;

package/es/components/input-masked/InputMasked.js

@@ -27,8 +27,6 @@ const InputMasked = props => {
     }
   }, _InputMaskedElement || (_InputMaskedElement = React.createElement(InputMaskedElement, null)));
 };
-InputMasked._supportsSpacingProps = true;
-export default InputMasked;
 process.env.NODE_ENV !== "production" ? InputMasked.propTypes = _objectSpread({
   mask: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.func]),
   number_mask: PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.object]),
@@ -75,4 +73,6 @@ InputMasked.defaultProps = _objectSpread(_objectSpread({}, Input.defaultProps),
   on_submit_focus: null,
   on_submit_blur: null
 });
+InputMasked._supportsSpacingProps = true;
+export default InputMasked;
 //# sourceMappingURL=InputMasked.js.map

package/es/components/input-masked/InputMasked.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputMasked.js","names":["React","PropTypes","extendPropsWithContext","InputMaskedContext","InputMaskedElement","Input","inputPropTypes","Context","InputMasked","props","context","useContext","mask","alias","key","test","contextAndProps","useCallback","defaultProps","createElement","Provider","value","_InputMaskedElement","_supportsSpacingProps","process","env","NODE_ENV","propTypes","_objectSpread","oneOfType","object","array","func","number_mask","string","bool","currency_mask","mask_options","number_format","locale","as_currency","as_number","as_percent","show_mask","show_guide","pipe","keep_char_positions","placeholder_char","inner_ref","on_change","on_submit","on_focus","on_blur","on_submit_focus","on_submit_blur"],"sources":["../../../../src/components/input-masked/InputMasked.js"],"sourcesContent":["/* eslint-disable react/no-unused-prop-types */\n/**\n * Web InputMasked Component\n *\n */\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport { extendPropsWithContext } from '../../shared/component-helper'\nimport InputMaskedContext from './InputMaskedContext'\nimport InputMaskedElement from './InputMaskedElement'\nimport Input, { inputPropTypes } from '../input/Input'\nimport Context from '../../shared/Context'\n\nconst InputMasked = (props) => {\n  const context = React.useContext(Context)\n\n  // Remove masks defined in Provider/Context, because it overwrites a custom mask\n  if (props?.mask) {\n    const alias = context?.InputMasked\n    for (const key in alias) {\n      if (/^as[_A-Z]|number_mask|currency_mask/.test(key)) {\n        delete alias[key]\n      }\n    }\n  }\n\n  const contextAndProps = React.useCallback(\n    extendPropsWithContext(\n      props,\n      InputMasked.defaultProps,\n      context?.InputMasked\n    ),\n    [props, InputMasked.defaultProps, context?.InputMasked]\n  )\n\n  return (\n    <InputMaskedContext.Provider\n      value={{\n        props: contextAndProps,\n        context,\n      }}\n    >\n      <InputMaskedElement />\n    </InputMaskedContext.Provider>\n  )\n}\n\nInputMasked._supportsSpacingProps = true\n\nexport default InputMasked\n\nInputMasked.propTypes = {\n  mask: PropTypes.oneOfType([\n    PropTypes.object,\n    PropTypes.array,\n    PropTypes.func,\n  ]),\n  number_mask: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.bool,\n    PropTypes.object,\n  ]),\n  currency_mask: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.bool,\n    PropTypes.object,\n  ]),\n  mask_options: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n  number_format: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n  locale: PropTypes.string,\n  as_currency: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  as_number: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  as_percent: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  show_mask: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  show_guide: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  pipe: PropTypes.func,\n  keep_char_positions: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.bool,\n  ]),\n  placeholder_char: PropTypes.string,\n  inner_ref: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),\n\n  on_change: PropTypes.func,\n  on_submit: PropTypes.func,\n  on_focus: PropTypes.func,\n  on_blur: PropTypes.func,\n  on_submit_focus: PropTypes.func,\n  on_submit_blur: PropTypes.func,\n\n  ...inputPropTypes,\n}\n\nInputMasked.defaultProps = {\n  ...Input.defaultProps,\n\n  mask: null,\n  number_mask: null,\n  currency_mask: null,\n  mask_options: null,\n  number_format: null,\n  as_currency: null,\n  as_number: null,\n  as_percent: null,\n  locale: null,\n  show_mask: false,\n  show_guide: true,\n  pipe: null,\n  keep_char_positions: false,\n  placeholder_char: null,\n  inner_ref: null,\n\n  on_change: null,\n  on_submit: null,\n  on_focus: null,\n  on_blur: null,\n  on_submit_focus: null,\n  on_submit_blur: null,\n}\n"],"mappings":"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"}
+{"version":3,"file":"InputMasked.js","names":["React","PropTypes","extendPropsWithContext","InputMaskedContext","InputMaskedElement","Input","inputPropTypes","Context","InputMasked","props","context","useContext","mask","alias","key","test","contextAndProps","useCallback","defaultProps","createElement","Provider","value","_InputMaskedElement","process","env","NODE_ENV","propTypes","_objectSpread","oneOfType","object","array","func","number_mask","string","bool","currency_mask","mask_options","number_format","locale","as_currency","as_number","as_percent","show_mask","show_guide","pipe","keep_char_positions","placeholder_char","inner_ref","on_change","on_submit","on_focus","on_blur","on_submit_focus","on_submit_blur","_supportsSpacingProps"],"sources":["../../../../src/components/input-masked/InputMasked.js"],"sourcesContent":["/* eslint-disable react/no-unused-prop-types */\n/**\n * Web InputMasked Component\n *\n */\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport { extendPropsWithContext } from '../../shared/component-helper'\nimport InputMaskedContext from './InputMaskedContext'\nimport InputMaskedElement from './InputMaskedElement'\nimport Input, { inputPropTypes } from '../input/Input'\nimport Context from '../../shared/Context'\n\nconst InputMasked = (props) => {\n  const context = React.useContext(Context)\n\n  // Remove masks defined in Provider/Context, because it overwrites a custom mask\n  if (props?.mask) {\n    const alias = context?.InputMasked\n    for (const key in alias) {\n      if (/^as[_A-Z]|number_mask|currency_mask/.test(key)) {\n        delete alias[key]\n      }\n    }\n  }\n\n  const contextAndProps = React.useCallback(\n    extendPropsWithContext(\n      props,\n      InputMasked.defaultProps,\n      context?.InputMasked\n    ),\n    [props, InputMasked.defaultProps, context?.InputMasked]\n  )\n\n  return (\n    <InputMaskedContext.Provider\n      value={{\n        props: contextAndProps,\n        context,\n      }}\n    >\n      <InputMaskedElement />\n    </InputMaskedContext.Provider>\n  )\n}\n\nInputMasked.propTypes = {\n  mask: PropTypes.oneOfType([\n    PropTypes.object,\n    PropTypes.array,\n    PropTypes.func,\n  ]),\n  number_mask: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.bool,\n    PropTypes.object,\n  ]),\n  currency_mask: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.bool,\n    PropTypes.object,\n  ]),\n  mask_options: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n  number_format: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n  locale: PropTypes.string,\n  as_currency: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  as_number: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  as_percent: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  show_mask: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  show_guide: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  pipe: PropTypes.func,\n  keep_char_positions: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.bool,\n  ]),\n  placeholder_char: PropTypes.string,\n  inner_ref: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),\n\n  on_change: PropTypes.func,\n  on_submit: PropTypes.func,\n  on_focus: PropTypes.func,\n  on_blur: PropTypes.func,\n  on_submit_focus: PropTypes.func,\n  on_submit_blur: PropTypes.func,\n\n  ...inputPropTypes,\n}\n\nInputMasked.defaultProps = {\n  ...Input.defaultProps,\n\n  mask: null,\n  number_mask: null,\n  currency_mask: null,\n  mask_options: null,\n  number_format: null,\n  as_currency: null,\n  as_number: null,\n  as_percent: null,\n  locale: null,\n  show_mask: false,\n  show_guide: true,\n  pipe: null,\n  keep_char_positions: false,\n  placeholder_char: null,\n  inner_ref: null,\n\n  on_change: null,\n  on_submit: null,\n  on_focus: null,\n  on_blur: null,\n  on_submit_focus: null,\n  on_submit_blur: null,\n}\n\nInputMasked._supportsSpacingProps = true\n\nexport default InputMasked\n"],"mappings":";;;;AAMA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,SAASC,sBAAsB,QAAQ,+BAA+B;AACtE,OAAOC,kBAAkB,MAAM,sBAAsB;AACrD,OAAOC,kBAAkB,MAAM,sBAAsB;AACrD,OAAOC,KAAK,IAAIC,cAAc,QAAQ,gBAAgB;AACtD,OAAOC,OAAO,MAAM,sBAAsB;AAE1C,MAAMC,WAAW,GAAIC,KAAK,IAAK;EAC7B,MAAMC,OAAO,GAAGV,KAAK,CAACW,UAAU,CAACJ,OAAO,CAAC;EAGzC,IAAIE,KAAK,aAALA,KAAK,eAALA,KAAK,CAAEG,IAAI,EAAE;IACf,MAAMC,KAAK,GAAGH,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEF,WAAW;IAClC,KAAK,MAAMM,GAAG,IAAID,KAAK,EAAE;MACvB,IAAI,qCAAqC,CAACE,IAAI,CAACD,GAAG,CAAC,EAAE;QACnD,OAAOD,KAAK,CAACC,GAAG,CAAC;MACnB;IACF;EACF;EAEA,MAAME,eAAe,GAAGhB,KAAK,CAACiB,WAAW,CACvCf,sBAAsB,CACpBO,KAAK,EACLD,WAAW,CAACU,YAAY,EACxBR,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEF,WACX,CAAC,EACD,CAACC,KAAK,EAAED,WAAW,CAACU,YAAY,EAAER,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEF,WAAW,CACxD,CAAC;EAED,OACER,KAAA,CAAAmB,aAAA,CAAChB,kBAAkB,CAACiB,QAAQ;IAC1BC,KAAK,EAAE;MACLZ,KAAK,EAAEO,eAAe;MACtBN;IACF;EAAE,GAAAY,mBAAA,KAAAA,mBAAA,GAEFtB,KAAA,CAAAmB,aAAA,CAACf,kBAAkB,MAAE,CAAC,CACK,CAAC;AAElC,CAAC;AAEDmB,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAAjB,WAAW,CAACkB,SAAS,GAAAC,aAAA;EACnBf,IAAI,EAAEX,SAAS,CAAC2B,SAAS,CAAC,CACxB3B,SAAS,CAAC4B,MAAM,EAChB5B,SAAS,CAAC6B,KAAK,EACf7B,SAAS,CAAC8B,IAAI,CACf,CAAC;EACFC,WAAW,EAAE/B,SAAS,CAAC2B,SAAS,CAAC,CAC/B3B,SAAS,CAACgC,MAAM,EAChBhC,SAAS,CAACiC,IAAI,EACdjC,SAAS,CAAC4B,MAAM,CACjB,CAAC;EACFM,aAAa,EAAElC,SAAS,CAAC2B,SAAS,CAAC,CACjC3B,SAAS,CAACgC,MAAM,EAChBhC,SAAS,CAACiC,IAAI,EACdjC,SAAS,CAAC4B,MAAM,CACjB,CAAC;EACFO,YAAY,EAAEnC,SAAS,CAAC2B,SAAS,CAAC,CAAC3B,SAAS,CAACgC,MAAM,EAAEhC,SAAS,CAAC4B,MAAM,CAAC,CAAC;EACvEQ,aAAa,EAAEpC,SAAS,CAAC2B,SAAS,CAAC,CAAC3B,SAAS,CAACgC,MAAM,EAAEhC,SAAS,CAAC4B,MAAM,CAAC,CAAC;EACxES,MAAM,EAAErC,SAAS,CAACgC,MAAM;EACxBM,WAAW,EAAEtC,SAAS,CAAC2B,SAAS,CAAC,CAAC3B,SAAS,CAACgC,MAAM,EAAEhC,SAAS,CAACiC,IAAI,CAAC,CAAC;EACpEM,SAAS,EAAEvC,SAAS,CAAC2B,SAAS,CAAC,CAAC3B,SAAS,CAACgC,MAAM,EAAEhC,SAAS,CAACiC,IAAI,CAAC,CAAC;EAClEO,UAAU,EAAExC,SAAS,CAAC2B,SAAS,CAAC,CAAC3B,SAAS,CAACgC,MAAM,EAAEhC,SAAS,CAACiC,IAAI,CAAC,CAAC;EACnEQ,SAAS,EAAEzC,SAAS,CAAC2B,SAAS,CAAC,CAAC3B,SAAS,CAACgC,MAAM,EAAEhC,SAAS,CAACiC,IAAI,CAAC,CAAC;EAClES,UAAU,EAAE1C,SAAS,CAAC2B,SAAS,CAAC,CAAC3B,SAAS,CAACgC,MAAM,EAAEhC,SAAS,CAACiC,IAAI,CAAC,CAAC;EACnEU,IAAI,EAAE3C,SAAS,CAAC8B,IAAI;EACpBc,mBAAmB,EAAE5C,SAAS,CAAC2B,SAAS,CAAC,CACvC3B,SAAS,CAACgC,MAAM,EAChBhC,SAAS,CAACiC,IAAI,CACf,CAAC;EACFY,gBAAgB,EAAE7C,SAAS,CAACgC,MAAM;EAClCc,SAAS,EAAE9C,SAAS,CAAC2B,SAAS,CAAC,CAAC3B,SAAS,CAAC4B,MAAM,EAAE5B,SAAS,CAAC8B,IAAI,CAAC,CAAC;EAElEiB,SAAS,EAAE/C,SAAS,CAAC8B,IAAI;EACzBkB,SAAS,EAAEhD,SAAS,CAAC8B,IAAI;EACzBmB,QAAQ,EAAEjD,SAAS,CAAC8B,IAAI;EACxBoB,OAAO,EAAElD,SAAS,CAAC8B,IAAI;EACvBqB,eAAe,EAAEnD,SAAS,CAAC8B,IAAI;EAC/BsB,cAAc,EAAEpD,SAAS,CAAC8B;AAAI,GAE3BzB,cAAc,CAClB;AAEDE,WAAW,CAACU,YAAY,GAAAS,aAAA,CAAAA,aAAA,KACnBtB,KAAK,CAACa,YAAY;EAErBN,IAAI,EAAE,IAAI;EACVoB,WAAW,EAAE,IAAI;EACjBG,aAAa,EAAE,IAAI;EACnBC,YAAY,EAAE,IAAI;EAClBC,aAAa,EAAE,IAAI;EACnBE,WAAW,EAAE,IAAI;EACjBC,SAAS,EAAE,IAAI;EACfC,UAAU,EAAE,IAAI;EAChBH,MAAM,EAAE,IAAI;EACZI,SAAS,EAAE,KAAK;EAChBC,UAAU,EAAE,IAAI;EAChBC,IAAI,EAAE,IAAI;EACVC,mBAAmB,EAAE,KAAK;EAC1BC,gBAAgB,EAAE,IAAI;EACtBC,SAAS,EAAE,IAAI;EAEfC,SAAS,EAAE,IAAI;EACfC,SAAS,EAAE,IAAI;EACfC,QAAQ,EAAE,IAAI;EACdC,OAAO,EAAE,IAAI;EACbC,eAAe,EAAE,IAAI;EACrBC,cAAc,EAAE;AAAI,EACrB;AAED7C,WAAW,CAAC8C,qBAAqB,GAAG,IAAI;AAExC,eAAe9C,WAAW"}

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

@@ -0,0 +1,60 @@
+import React from 'react';
+import { SpacingProps } from '../space/types';
+import { FormStatusState, FormStatusText } from '../FormStatus';
+export type MultiInputMaskInput<T extends string> = {
+    /**
+     * 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` paramaters.
+     */
+    id: T;
+    /**
+     * Label used by the input. The label itself is hidden, but required to uphold accesability standards for screen readers.
+     */
+    label: React.ReactNode;
+    /**
+     * 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
+     */
+    mask: RegExp[];
+    /**
+     * Sets the placeholder character used for the input.
+     */
+    placeholderCharacter: string;
+};
+export type MultiInputMaskValue<T extends string> = {
+    [K in T]: string;
+};
+export type MultiInputMaskProps<T extends string> = {
+    /**
+     * The label describing the group of inputs inside the components.
+     */
+    label?: React.ReactNode;
+    /**
+     * Use to change the label layout direction. Defaults to `horizontal`.
+     */
+    labelDirection?: 'vertical' | 'horizontal';
+    /**
+     * 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`
+     */
+    inputs: MultiInputMaskInput<T>[];
+    /**
+     * Values used for the inputs inside the component. Expects an object with keys matching the id's defined in `inputs`
+     */
+    values?: MultiInputMaskValue<T>;
+    /**
+     * Defines the delimiter used to seperate the inputs inside the component.
+     */
+    delimiter?: 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;
+    /**
+     * 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.
+     */
+    status?: FormStatusText;
+    /**
+     * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.
+     */
+    statusState?: FormStatusState;
+} & 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, ...props }: MultiInputMaskProps<T>): import("react/jsx-runtime").JSX.Element;
+export default MultiInputMask;

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

@@ -0,0 +1,145 @@
+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"];
+import React, { Fragment, useRef } from 'react';
+import Input from '../Input';
+import TextMask from './TextMask';
+import useHandleCursorPosition from './hooks/useHandleCursorPosition';
+import classnames from 'classnames';
+import FormLabel from '../FormLabel';
+import { createSpacingClasses } from '../space/SpacingHelper';
+import { useMultiInputValue } from './hooks/useMultiInputValues';
+function MultiInputMask(_ref) {
+  let {
+      label,
+      labelDirection = 'horizontal',
+      inputs,
+      delimiter,
+      onChange: onChangeExternal,
+      disabled,
+      status,
+      statusState,
+      values: defaultValues,
+      className
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const [values, onChange] = useMultiInputValue({
+    inputs,
+    defaultValues,
+    callback: onChangeExternal
+  });
+  const inputRefs = useRef([]);
+  const {
+    onKeyDown
+  } = useHandleCursorPosition(inputRefs.current, getKeysToHandle());
+  const WrapperElement = label ? 'fieldset' : 'div';
+  return React.createElement(WrapperElement, {
+    className: classnames('dnb-multi-input-mask__fieldset', createSpacingClasses(props), labelDirection === 'horizontal' && 'dnb-multi-input-mask__fieldset--horizontal')
+  }, label && React.createElement(FormLabel, {
+    className: 'dnb-multi-input-mask__legend' + (labelDirection === 'horizontal' ? " dnb-multi-input-mask__legend--horizontal" : ""),
+    element: "legend",
+    onClick: onLegendClick,
+    disabled: disabled,
+    vertical: labelDirection === 'vertical'
+  }, React.createElement("span", null, label)), React.createElement(Input, _extends({}, props, {
+    className: classnames('dnb-multi-input-mask', className),
+    disabled: disabled,
+    status: status,
+    status_state: statusState,
+    input_element: inputs.map((input, index) => React.createElement(Fragment, {
+      key: input.id
+    }, React.createElement(MultiInputMaskInput, _extends({}, input, {
+      value: values[input.id],
+      delimiter: index !== inputs.length - 1 ? delimiter : undefined,
+      onKeyDown: onKeyDown,
+      onChange: onChange,
+      disabled: disabled,
+      inputRef: getInputRef
+    }))))
+  })));
+  function onLegendClick() {
+    if (disabled) {
+      return;
+    }
+    const firstInput = inputRefs.current[0].current;
+    firstInput.focus();
+    firstInput.setSelectionRange(0, 0);
+  }
+  function getInputRef(ref) {
+    const inputRef = ref === null || ref === void 0 ? void 0 : ref.inputRef;
+    if (inputRef && !inputRefs.current.includes(inputRef)) {
+      inputRefs.current.push(inputRef);
+    }
+  }
+  function getKeysToHandle() {
+    const uniqueMasks = getUniqueMasks();
+    if (uniqueMasks.size === 1) {
+      const pattern = uniqueMasks.values().next().value.replace(/\//g, '');
+      return new RegExp(pattern);
+    }
+    return inputs.reduce((keys, {
+      id,
+      mask
+    }) => {
+      keys[`${id}__input`] = mask;
+      return keys;
+    }, {});
+  }
+  function getUniqueMasks() {
+    const masks = new Set();
+    inputs.forEach(input => {
+      input.mask.forEach(pattern => masks.add(String(pattern)));
+    });
+    return masks;
+  }
+}
+function MultiInputMaskInput({
+  id,
+  label,
+  value,
+  mask,
+  placeholderCharacter,
+  delimiter,
+  disabled,
+  inputRef,
+  onKeyDown,
+  onChange
+}) {
+  return React.createElement(React.Fragment, null, React.createElement(TextMask, {
+    id: `${id}__input`,
+    className: "dnb-input__input dnb-multi-input-mask__input" + (value ? " dnb-multi-input-mask__input--highlight" : ""),
+    disabled: disabled,
+    size: mask.length,
+    mask: mask,
+    value: value ?? '',
+    placeholderChar: placeholderCharacter,
+    guide: true,
+    showMask: true,
+    keepCharPositions: false,
+    "aria-labelledby": `${id}__label`,
+    ref: inputRef,
+    onKeyDown: onKeyDown,
+    onFocus: onFocus,
+    onChange: event => {
+      onChange(id, removePlaceholder(event.target.value, placeholderCharacter));
+    }
+  }), React.createElement("label", {
+    id: `${id}__label`,
+    htmlFor: `${id}__input`,
+    hidden: true
+  }, label), delimiter && React.createElement("span", {
+    "aria-hidden": true,
+    className: 'dnb-multi-input-mask__delimiter' + (value ? " dnb-multi-input-mask__delimiter--highlight" : "")
+  }, delimiter));
+  function removePlaceholder(value, placeholder) {
+    return value.replace(RegExp(placeholder, 'gm'), '');
+  }
+  function onFocus({
+    target
+  }) {
+    target.focus();
+    target.select();
+  }
+}
+export default MultiInputMask;
+//# sourceMappingURL=MultiInputMask.js.map