@dnb/eufemia 9.17.1 → 9.20.0

package/components/info-card/InfoCard.tsx

@@ -0,0 +1,250 @@
+import React from 'react'
+import classnames from 'classnames'
+
+// Components
+import Button, { ButtonProps } from '../button/Button'
+import IconPrimary, { IconPrimaryIcon } from '../icon-primary/IconPrimary'
+import Img, { ImgProps } from '../../elements/Img'
+import Div from '../../elements/Div'
+import H3 from '../../elements/H3'
+import P from '../../elements/P'
+
+// Icons
+import { lightbulb_medium as LightbulbIcon } from '../../icons'
+
+// Shared
+import { createSpacingClasses } from '../space/SpacingHelper'
+import { createSkeletonClass } from '../skeleton/SkeletonHelper'
+import { SkeletonShow } from '../skeleton/Skeleton'
+import Context from '../../shared/Context'
+import { ISpacingProps } from '../../shared/interfaces'
+import { usePropsWithContext } from '../../shared/hooks'
+
+export interface InfoCardProps {
+  /**
+   * Used in combination with `src` to provide an alt attribute for the `img` element.
+   * Default: null
+   */
+  alt?: React.ReactNode
+  /**
+   * Aligns the content to center, rather than left
+   * Default: false
+   */
+  centered?: boolean
+  /**
+   * Custom className on the component root
+   * Default: null
+   */
+  className?: string
+  /**
+   * Replace the default icon with custom icon.
+   * Default: Lightbulb (icon)
+   */
+  icon?: IconPrimaryIcon
+  /**
+   * Props applied to the `img` element if the component is used to display an image. Replace the 'icon'
+   * Default: null
+   */
+  imgProps?: ImgProps
+  /**
+   * Skeleton should be applied when loading content
+   * Default: null
+   */
+  skeleton?: SkeletonShow
+  /**
+   * Specifies the path to the image
+   * Default: null
+   */
+  src?: string
+  /**
+   * Image src, will replace the 'icon' with the image
+   * Default: null
+   */
+  text: React.ReactNode
+  /**
+   * Component title
+   * Default: null
+   */
+  title?: React.ReactNode
+  /**
+   * Is called when the close button is clicked
+   * Default: null
+   */
+  onClose?: React.MouseEventHandler<HTMLButtonElement>
+  /**
+   * The text of the close button.
+   * Default: null
+   */
+  closeButtonText?: React.ReactNode
+  /**
+   * Is called when the accept button is clicked
+   * Default: null
+   */
+  onAccept?: React.MouseEventHandler<HTMLButtonElement>
+  /**
+   * The text of the accept button.
+   * Default: null
+   */
+  acceptButtonText?: React.ReactNode
+  /**
+   * Additional attributes for the close button.
+   * Default: null
+   */
+  closeButtonAttributes?: ButtonProps
+  /**
+   * Additional attributes for the accept button
+   * Default: null
+   */
+  acceptButtonAttributes?: ButtonProps
+}
+
+export const defaultProps = {
+  alt: null,
+  centered: false,
+  className: null,
+  skeleton: false,
+  icon: LightbulbIcon,
+  imgProps: null,
+  src: null,
+  title: null,
+  onAccept: null,
+  onClose: null,
+  closeButtonText: null,
+  acceptButtonText: null,
+  closeButtonAttributes: null,
+  acceptButtonAttributes: null,
+}
+
+const InfoCard = (localProps: InfoCardProps & ISpacingProps) => {
+  // Every component should have a context
+  const context = React.useContext(Context)
+  // Extract additional props from global context
+  const {
+    alt,
+    centered,
+    title,
+    skeleton,
+    className,
+    icon,
+    src,
+    imgProps,
+    text,
+    onClose,
+    onAccept,
+    closeButtonText,
+    acceptButtonText,
+    closeButtonAttributes,
+    acceptButtonAttributes,
+    ...props
+  } = usePropsWithContext({
+    ...defaultProps,
+    ...localProps,
+  })
+
+  const skeletonClasses = createSkeletonClass('shape', skeleton, context)
+  const spacingClasses = createSpacingClasses(props)
+
+  const closeButtonIsHidden = !onClose && !closeButtonText
+  const acceptButtonIsHidden = !onAccept && !acceptButtonText
+
+  return (
+    <Div
+      className={classnames(
+        'dnb-info-card',
+        skeletonClasses,
+        spacingClasses,
+        centered && 'dnb-info-card--centered',
+        className
+      )}
+      data-testid="info-card"
+      {...props}
+    >
+      <Div right={!centered && 'small'} bottom={centered && 'small'}>
+        {getIllustration()}
+      </Div>
+
+      <div
+        className="dnb-info-card--content"
+        data-testid="info-card-content"
+      >
+        {title && (
+          <H3
+            size="small"
+            data-testid="info-card-title"
+            bottom="x-small"
+            top="0"
+          >
+            {title}
+          </H3>
+        )}
+        <P size="small" data-testid="info-card-text" bottom="0">
+          {text}
+        </P>
+
+        {getButtons()}
+      </div>
+    </Div>
+  )
+
+  function getButtons() {
+    if (closeButtonIsHidden && acceptButtonIsHidden) return null
+
+    return (
+      <Div
+        top={centered ? 'medium' : 'small'}
+        className={classnames(
+          'dnb-info-card--buttons',
+          centered && 'dnb-info-card--buttons-centered'
+        )}
+      >
+        {!acceptButtonIsHidden && (
+          <Button
+            type="button"
+            data-testid="info-card-accept-button"
+            variant="secondary"
+            right={!centered && 'small'}
+            on_click={onAccept}
+            text={acceptButtonText}
+            {...acceptButtonAttributes}
+          />
+        )}
+        {!closeButtonIsHidden && (
+          <Button
+            type="button"
+            data-testid="info-card-close-button"
+            variant="tertiary"
+            top={centered && 'small'}
+            on_click={onClose}
+            icon="close"
+            icon_position="left"
+            text={closeButtonText}
+            {...closeButtonAttributes}
+          />
+        )}
+      </Div>
+    )
+  }
+
+  function getIllustration() {
+    if (src || imgProps) {
+      const imageProps = { src, alt, ...imgProps }
+      return (
+        <Img
+          data-testid="info-card-image"
+          className="dnb-info-card--image"
+          {...imageProps}
+        />
+      )
+    }
+    return (
+      <IconPrimary
+        size="medium"
+        className="dnb-info-card--icon"
+        icon={icon}
+        data-testid="info-card-icon"
+      />
+    )
+  }
+}
+
+export default InfoCard

package/components/info-card/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Component Entry
+ *
+ */
+
+import InfoCard from './InfoCard';
+export default InfoCard;
+export * from './InfoCard';

package/components/info-card/index.js

@@ -0,0 +1,3 @@
+import InfoCard from './InfoCard';
+export default InfoCard;
+export * from './InfoCard';

package/components/info-card/style/_info-card.scss

@@ -0,0 +1,52 @@
+/*
+* InfoCard component
+*
+*/
+
+.dnb-info-card {
+  display: flex;
+  flex-direction: row;
+
+  background: white;
+
+  border: 1px solid var(--color-black-8);
+  border-radius: 0.25rem;
+  padding: 1rem;
+
+  @include defaultDropShadow();
+
+  &--centered {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+
+  &--content {
+    flex-direction: column;
+    margin-top: 0.1875rem;
+  }
+
+  &--centered &--content {
+    flex-direction: column;
+    margin-top: 0;
+  }
+
+  &--icon {
+    color: var(--color-emerald-green);
+  }
+
+  &--image {
+    height: 4rem;
+    width: 4rem;
+  }
+
+  &--buttons {
+    display: flex;
+    flex-direction: row;
+    &-centered {
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+    }
+  }
+}

package/components/info-card/style/dnb-info-card.css

@@ -0,0 +1,135 @@
+/*
+* DNB InfoCard
+*
+*/
+/**
+ * This file is only used to make components independent
+ * so that they can get imported individually, without the core styles
+ *
+ */
+/*
+ * Utilities
+ */
+/*
+ * Scopes
+ *
+ */
+/*
+ * Document Reset
+ *
+ */
+.dnb-info-card {
+  font-family: 'DNB', sans-serif;
+  font-family: var(--font-family-default);
+  font-weight: normal;
+  font-weight: var(--font-weight-basis);
+  font-size: 1rem;
+  font-size: var(--font-size-small);
+  font-style: normal;
+  line-height: 1.5rem;
+  line-height: var(--line-height-basis);
+  color: #333;
+  color: var(--color-black-80, #333);
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  /**
+  * Ensure consistency and use the same as HTML reset -> html {...}
+  * between base and code package
+  */
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+     tab-size: 4;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  word-break: break-word;
+  /**
+  * 1. Remove repeating backgrounds in all browsers (opinionated).
+  * 2. Add border box sizing in all browsers (opinionated).
+  */
+  /**
+  * 1. Add text decoration inheritance in all browsers (opinionated).
+  * 2. Add vertical alignment inheritance in all browsers (opinionated).
+  */
+  margin: 0;
+  padding: 0; }
+  .dnb-info-card *,
+  .dnb-info-card ::before,
+  .dnb-info-card ::after {
+    background-repeat: no-repeat;
+    /* 1 */
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+    /* 2 */ }
+  .dnb-info-card ::before,
+  .dnb-info-card ::after {
+    text-decoration: inherit;
+    /* 1 */
+    vertical-align: inherit;
+    /* 2 */ }
+
+/*
+* InfoCard component
+*
+*/
+.dnb-info-card {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  background: white;
+  border: 1px solid #ebebeb;
+  border: 1px solid var(--color-black-8);
+  border-radius: 0.25rem;
+  padding: 1rem;
+  -webkit-box-shadow: 0 8px 16px rgba(51, 51, 51, 0.08);
+          box-shadow: 0 8px 16px rgba(51, 51, 51, 0.08);
+  -webkit-box-shadow: var(--shadow-default);
+          box-shadow: var(--shadow-default); }
+  .dnb-info-card--centered {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    text-align: center; }
+  .dnb-info-card--content {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    margin-top: 0.1875rem; }
+  .dnb-info-card--centered .dnb-info-card--content {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    margin-top: 0; }
+  .dnb-info-card--icon {
+    color: #14555a;
+    color: var(--color-emerald-green); }
+  .dnb-info-card--image {
+    height: 4rem;
+    width: 4rem; }
+  .dnb-info-card--buttons {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: row;
+            flex-direction: row; }
+    .dnb-info-card--buttons-centered {
+      -webkit-box-orient: vertical;
+      -webkit-box-direction: normal;
+          -ms-flex-direction: column;
+              flex-direction: column;
+      -webkit-box-align: center;
+          -ms-flex-align: center;
+              align-items: center;
+      text-align: center; }

package/components/info-card/style/dnb-info-card.min.css

@@ -0,0 +1 @@
+.dnb-info-card{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;color:var(--color-black-80,#333);font-family:DNB,sans-serif;font-family:var(--font-family-default);font-size:1rem;font-size:var(--font-size-small);font-style:normal;font-weight:400;font-weight:var(--font-weight-basis);line-height:1.5rem;line-height:var(--line-height-basis);margin:0;padding:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:break-word}.dnb-info-card *,.dnb-info-card :after,.dnb-info-card :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-info-card :after,.dnb-info-card :before{text-decoration:inherit;vertical-align:inherit}.dnb-info-card{-webkit-box-orient:horizontal;-webkit-box-direction:normal;background:#fff;border:1px solid #ebebeb;border:1px solid var(--color-black-8);border-radius:.25rem;-webkit-box-shadow:0 8px 16px rgba(51,51,51,.08);box-shadow:0 8px 16px rgba(51,51,51,.08);-webkit-box-shadow:var(--shadow-default);box-shadow:var(--shadow-default);display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;padding:1rem}.dnb-info-card--centered{-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center}.dnb-info-card--centered,.dnb-info-card--content{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.dnb-info-card--content{margin-top:.1875rem}.dnb-info-card--centered .dnb-info-card--content{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-top:0}.dnb-info-card--icon{color:#14555a;color:var(--color-emerald-green)}.dnb-info-card--image{height:4rem;width:4rem}.dnb-info-card--buttons{-webkit-box-orient:horizontal;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}.dnb-info-card--buttons-centered{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;text-align:center}

package/components/info-card/style/dnb-info-card.scss

@@ -0,0 +1,12 @@
+/*
+* DNB InfoCard
+*
+*/
+
+@import '../../../style/components/imports.scss';
+
+.dnb-info-card {
+  @include componentReset();
+}
+
+@import './_info-card.scss';

package/components/info-card/style/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Web Style Import
+ *
+ */
+
+import './dnb-info-card.scss';

package/components/info-card/style/index.js

@@ -0,0 +1 @@
+import "./dnb-info-card.min.css";

package/components/info-card/style.js

@@ -0,0 +1 @@
+import "./style/dnb-info-card.min.css";

package/components/input/Input.d.ts

@@ -43,7 +43,8 @@ export type InputSubmitButtonVariant =
   | 'primary'
   | 'secondary'
   | 'tertiary'
-  | 'signal';
+  | 'signal'
+  | 'unstyled';
 export type InputSubmitButtonIcon =
   | string
   | React.ReactNode
@@ -89,7 +90,7 @@ export interface InputProps extends React.HTMLProps<HTMLElement> {
   type?: string;
 
   /**
-   * The sizes you can sue is `small` (1.5rem), `default` (2rem), `medium` (2.5rem) and `large` (3rem) are supported component sizes. Defaults to `default` / `null`. Also, if You define a number like `size="2"` then the it will be forwarded as the input element attribute.
+   * The sizes you can sue is `small` (1.5rem), `default` (2rem), `medium` (2.5rem) and `large` (3rem) are supported component sizes. Defaults to `default` / `null`. Also, if You define a number like `size="2"` then it will be forwarded as the input element attribute.
    */
   size?: InputSize;
 
@@ -120,7 +121,7 @@ export interface InputProps extends React.HTMLProps<HTMLElement> {
   status?: InputStatus;
 
   /**
-   * Defines the state of the status. Currently there are two statuses `[error, info]`. Defaults to `error`.
+   * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.
    */
   status_state?: string;
 
@@ -141,7 +142,7 @@ export interface InputProps extends React.HTMLProps<HTMLElement> {
   global_status_id?: string;
 
   /**
-   * Defaults to `off`. Set to `on` or any of <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete">allowed `attributes`</a>. Keep in mind, 1. you may have to define a `name`, 2. have the input as a descendants of a `<form>` element, 3. and have a submit button inside the form.
+   * Defaults to `off`. Set to `on` or any of <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete">allowed `attributes`</a>. Keep in mind, 1. you may have to define a `name`, 2. have the input as a descendant of a `<form>` element, 3. and have a submit button inside the form.
    */
   autocomplete?: string;
 
@@ -162,7 +163,7 @@ export interface InputProps extends React.HTMLProps<HTMLElement> {
   clear?: InputClear;
 
   /**
-   * Set to `true` in case the `placeholder` has to be kept during focus. By default the placeholder disappears on focus.
+   * Set to `true` in case the `placeholder` has to be kept during focus. By default, the placeholder disappears on focus.
    */
   keep_placeholder?: InputKeepPlaceholder;
 
@@ -199,17 +200,17 @@ export interface InputProps extends React.HTMLProps<HTMLElement> {
   input_class?: string;
 
   /**
-   * Provide the Input element with any attributes by using an Object `input_attributes={{size:&#39;2&#39;}}` or a JSON Object `input_attributes=&#39;{"size":"2"}&#39;`. "NB:" Keep in mind, that also every not listed component property will be send along and set as a Input element attribute.
+   * Provide the Input element with any attributes by using an Object `input_attributes={{size:&#39;2&#39;}}` or a JSON Object `input_attributes=&#39;{"size":"2"}&#39;`. "NB:" Keep in mind, that also every not listed component property will be sent along and set as an Input element attribute.
    */
   input_attributes?: InputInputAttributes;
 
   /**
-   * <em>(internal)</em> by providing a new component we can change the internal used element. Also supports a string only, like `input_element="input"`.
+   * <em>(internal)</em> by providing a new component we can change the internally used element. Also supports a string only, like `input_element="input"`.
    */
   input_element?: InputInputElement;
 
   /**
-   * Icon to show before or after the input / placeholder. Can be either a string defining a primary icon, or a Component using a SVG icon of either 16px or 24px.
+   * Icon to show before or after the input / placeholder. Can be either a string defining a primary icon or a Component using an SVG icon of either 16px or 24px.
    */
   icon?: InputIcon;
 
@@ -224,7 +225,7 @@ export interface InputProps extends React.HTMLProps<HTMLElement> {
   icon_position?: InputIconPosition;
 
   /**
-   * By providing a React.ref we can get the internal used input element (DOM). E.g. `inner_ref={myRef}` by using `React.createRef()` or `React.useRef()`.
+   * By providing a React.ref we can get the internally used input element (DOM). E.g. `inner_ref={myRef}` by using `React.createRef()` or `React.useRef()`.
    */
   inner_ref?: InputInnerRef;
   readOnly?: InputReadOnly;
@@ -267,7 +268,7 @@ export interface InputProps extends React.HTMLProps<HTMLElement> {
   custom_method?: (...args: any[]) => any;
 
   /**
-   * Will be called on value changes made by the user. Returns an object with the value as a string and the a native event: `{ value, event }`.
+   * Will be called on value changes made by the user. Returns an object with the value as a string and the native event: `{ value, event }`.
    */
   on_change?: (...args: any[]) => any;
 

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

@@ -96,7 +96,7 @@ export type InputMaskedChildren =
  */
 export interface InputMaskedProps extends React.HTMLProps<HTMLElement> {
   /**
-   * A mask can be define both as a <a href="https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md#readme">RegExp style of characters</a> or a callback function. Example below.
+   * A mask can be defined both as a <a href="https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md#readme">RegExp style of characters</a> or a callback function. Example below.
    */
   mask?: InputMaskedMask;
 
@@ -106,7 +106,7 @@ export interface InputMaskedProps extends React.HTMLProps<HTMLElement> {
   number_mask?: InputMaskedNumberMask;
 
   /**
-   * Set to `true` or set the <em>valuta</em> (currency_mask="kr") to enable the a custom currency mask – or give an `object` containing the number mask properties. More details below. Can be a JSON string as well, containing the number mask properties. Is disabled by default. Defaults to `kr`.
+   * Set to `true` or set the <em>valuta</em> (currency_mask="kr") to enable a custom currency mask – or give an `object` containing the number mask properties. More details below. Can be a JSON string as well, containing the number mask properties. Is disabled by default. Defaults to `kr`.
    */
   currency_mask?: InputMaskedCurrencyMask;
 
@@ -162,12 +162,12 @@ export interface InputMaskedProps extends React.HTMLProps<HTMLElement> {
   placeholder_char?: string;
 
   /**
-   * By providing a React.ref we can get the internal used input element (DOM). E.g. `inner_ref={myRef}` by using `React.createRef()` or `React.useRef()`.
+   * By providing a React.ref we can get the internally used input element (DOM). E.g. `inner_ref={myRef}` by using `React.createRef()` or `React.useRef()`.
    */
   inner_ref?: Object;
 
   /**
-   * Will be called on value changes made by the user. Returns an object with the value as a string and the a native event: `{ value, event }`.
+   * Will be called on value changes made by the user. Returns an object with the value as a string and the native event: `{ value, event }`.
    */
   on_change?: (...args: any[]) => any;
 
@@ -194,7 +194,7 @@ export interface InputMaskedProps extends React.HTMLProps<HTMLElement> {
   type?: string;
 
   /**
-   * The sizes you can sue is `small` (1.5rem), `default` (2rem), `medium` (2.5rem) and `large` (3rem) are supported component sizes. Defaults to `default` / `null`. Also, if You define a number like `size="2"` then the it will be forwarded as the input element attribute.
+   * The sizes you can sue is `small` (1.5rem), `default` (2rem), `medium` (2.5rem) and `large` (3rem) are supported component sizes. Defaults to `default` / `null`. Also, if You define a number like `size="2"` then it will be forwarded as the input element attribute.
    */
   size?: InputMaskedSize;
 
@@ -225,7 +225,7 @@ export interface InputMaskedProps extends React.HTMLProps<HTMLElement> {
   status?: InputMaskedStatus;
 
   /**
-   * Defines the state of the status. Currently there are two statuses `[error, info]`. Defaults to `error`.
+   * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.
    */
   status_state?: string;
 
@@ -246,7 +246,7 @@ export interface InputMaskedProps extends React.HTMLProps<HTMLElement> {
   global_status_id?: string;
 
   /**
-   * Defaults to `off`. Set to `on` or any of <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete">allowed `attributes`</a>. Keep in mind, 1. you may have to define a `name`, 2. have the input as a descendants of a `<form>` element, 3. and have a submit button inside the form.
+   * Defaults to `off`. Set to `on` or any of <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete">allowed `attributes`</a>. Keep in mind, 1. you may have to define a `name`, 2. have the input as a descendant of a `<form>` element, 3. and have a submit button inside the form.
    */
   autocomplete?: string;
 
@@ -267,7 +267,7 @@ export interface InputMaskedProps extends React.HTMLProps<HTMLElement> {
   clear?: InputMaskedClear;
 
   /**
-   * Set to `true` in case the `placeholder` has to be kept during focus. By default the placeholder disappears on focus.
+   * Set to `true` in case the `placeholder` has to be kept during focus. By default, the placeholder disappears on focus.
    */
   keep_placeholder?: InputMaskedKeepPlaceholder;
 
@@ -304,17 +304,17 @@ export interface InputMaskedProps extends React.HTMLProps<HTMLElement> {
   input_class?: string;
 
   /**
-   * Provide the Input element with any attributes by using an Object `input_attributes={{size:&#39;2&#39;}}` or a JSON Object `input_attributes=&#39;{"size":"2"}&#39;`. "NB:" Keep in mind, that also every not listed component property will be send along and set as a Input element attribute.
+   * Provide the Input element with any attributes by using an Object `input_attributes={{size:&#39;2&#39;}}` or a JSON Object `input_attributes=&#39;{"size":"2"}&#39;`. "NB:" Keep in mind, that also every not listed component property will be sent along and set as an Input element attribute.
    */
   input_attributes?: InputMaskedInputAttributes;
 
   /**
-   * <em>(internal)</em> by providing a new component we can change the internal used element. Also supports a string only, like `input_element="input"`.
+   * <em>(internal)</em> by providing a new component we can change the internally used element. Also supports a string only, like `input_element="input"`.
    */
   input_element?: InputMaskedInputElement;
 
   /**
-   * Icon to show before or after the input / placeholder. Can be either a string defining a primary icon, or a Component using a SVG icon of either 16px or 24px.
+   * Icon to show before or after the input / placeholder. Can be either a string defining a primary icon or a Component using an SVG icon of either 16px or 24px.
    */
   icon?: InputMaskedIcon;
 

package/components/input-masked/InputMasked.js

@@ -15,18 +15,20 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { registerElement } from '../../shared/component-helper';
+import { registerElement, extendPropsWithContext } from '../../shared/component-helper';
 import InputMaskedContext from './InputMaskedContext';
 import InputMaskedElement from './InputMaskedElement';
 import Input, { inputPropTypes } from '../input/Input';
 import Context from '../../shared/Context';
 var InputMasked = React.forwardRef(function (props, ref) {
   var context = React.useContext(Context);
+  var contextAndProps = React.useCallback(extendPropsWithContext(props, InputMasked.defaultProps, context === null || context === void 0 ? void 0 : context.InputMasked), [props, InputMasked.defaultProps, context === null || context === void 0 ? void 0 : context.InputMasked]);
   return React.createElement(InputMaskedContext.Provider, {
-    value: _objectSpread({
+    value: {
       inner_ref: ref,
-      props: props
-    }, context)
+      props: contextAndProps,
+      context: context
+    }
   }, _InputMaskedElement || (_InputMaskedElement = React.createElement(InputMaskedElement, null)));
 });
 export default InputMasked;