@dnb/eufemia 10.0.0 → 10.2.0

package/components/heading/HeadingCounter.js

@@ -10,7 +10,11 @@ export const initCounter = function () {
     });
   }
 
-  return props && props.counter || new Counter(props);
+  if (props !== null && props !== void 0 && props.counter) {
+    return props.counter;
+  }
+
+  return new Counter(props);
 };
 export class Counter {
   constructor() {
@@ -20,6 +24,8 @@ export class Counter {
 
     _defineProperty(this, "entry", 0);
 
+    _defineProperty(this, "lastResetLevel", null);
+
     _defineProperty(this, "_isReady", false);
 
     _defineProperty(this, "countHeadings", 0);
@@ -36,6 +42,10 @@ export class Counter {
 
     _defineProperty(this, "reports", []);
 
+    _defineProperty(this, "group", null);
+
+    _defineProperty(this, "children", null);
+
     props = props || {};
 
     if (props.group) {
@@ -85,7 +95,7 @@ export class Counter {
 
   setEntryLevel() {
     let level = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-    this.entry = parseFloat(level) || 1;
+    this.entry = parseFloat(String(level)) || 1;
   }
 
   isInContext() {
@@ -96,13 +106,6 @@ export class Counter {
     this.contextCounter = contextCounter;
   }
 
-  skipMakeMeReady() {
-    this._isReady = true;
-    this.entry = 1;
-    this.level = 1;
-    this.contextCounter.entry = 2;
-  }
-
   windup() {
     this.contextCounter.countHeadings++;
   }
@@ -117,6 +120,10 @@ export class Counter {
   }
 
   makeMeReady() {
+    let {
+      level
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
     if (!this.hasCorrection()) {
       if (this.contextCounter.level > 1) {
         this.level = this.contextCounter.level;
@@ -127,7 +134,7 @@ export class Counter {
       } else if (!this.contextCounter._isReady) {
         this.contextCounter._isReady = true;
 
-        if (!this.bypassChecks) {
+        if (!this.bypassChecks && !level) {
           this.level = 1;
         }
       }
@@ -179,19 +186,15 @@ export class Counter {
     var _globalSyncCounter$cu;
 
     let action = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'set';
-    level = parseFloat(level);
+    level = parseFloat(String(level));
     const report = [];
 
-    if (!this._isReady && this.level === 1 && (!globalSyncCounter.current || globalSyncCounter.current.level < 2)) {
-      return;
-    }
-
     if (((_globalSyncCounter$cu = globalSyncCounter.current) === null || _globalSyncCounter$cu === void 0 ? void 0 : _globalSyncCounter$cu.level) > 0) {
       level = this.factorCheck({
-        report,
         action,
         level,
-        current: globalSyncCounter.current.level
+        current: globalSyncCounter.current.level,
+        report
       });
     }
 

package/components/heading/HeadingHelpers.d.ts

@@ -1,27 +1,49 @@
-export function resetAllLevels(): void;
-export function resetLevels(level: any, { overwriteContext }?: {
+/**
+ * Web Heading Counter
+ *
+ */
+import { HeadingAllProps, InternalHeadingLevel } from './Heading';
+import { HeadingCounter } from './HeadingCounter';
+declare type GlobalSyncCounter = {
+    current: HeadingCounter;
+};
+declare type GlobalHeadingCounter = {
+    current: HeadingCounter;
+};
+export declare const globalSyncCounter: GlobalSyncCounter;
+export declare const globalHeadingCounter: GlobalHeadingCounter;
+declare type CorrectInternalHeadingLevel = {
+    counter: HeadingCounter;
+    level: InternalHeadingLevel;
+    ref?: HeadingAllProps;
+    reset?: HeadingAllProps['reset'];
+    inherit?: boolean;
+    increase?: boolean;
+    decrease?: boolean;
+    source?: HeadingAllProps['children'];
+    bypassChecks?: boolean;
+    isRerender?: boolean;
+    debug?: HeadingAllProps['debug'];
+};
+export declare const correctInternalHeadingLevel: ({ counter, level, ref, reset, inherit, increase, decrease, source, bypassChecks, isRerender, debug, }: CorrectInternalHeadingLevel) => import("./HeadingCounter").Counter;
+export declare function resetAllLevels(): void;
+export declare const globalResetNextTime: {
+    current: GlobalNextLevel;
+};
+export declare function resetLevels(level: InternalHeadingLevel, { overwriteContext }?: {
     overwriteContext?: boolean;
 }): void;
-export function setNextLevel(level: any, { overwriteContext }?: {
+declare type GlobalNextLevel = {
+    level: InternalHeadingLevel;
+    overwriteContext: boolean;
+};
+export declare const globalNextLevel: {
+    current: GlobalNextLevel;
+};
+export declare function setNextLevel(level: InternalHeadingLevel, { overwriteContext }?: {
     overwriteContext?: boolean;
 }): void;
-export function windupHeadings(): void;
-export function teardownHeadings(): void;
-export function debugCounter(counter: any): string;
-export const globalSyncCounter: React.RefObject<any>;
-export const globalHeadingCounter: React.RefObject<any>;
-export function correctHeadingLevel({ counter, level, ref, reset, inherit, increase, decrease, source, bypassChecks, debug, }: {
-    counter: any;
-    level: any;
-    ref?: any;
-    reset?: any;
-    inherit?: any;
-    increase?: boolean;
-    decrease?: boolean;
-    source?: any;
-    bypassChecks?: boolean;
-    debug?: any;
-}): any;
-export const globalResetNextTime: React.RefObject<any>;
-export const globalNextLevel: React.RefObject<any>;
-import React from "react";
+export declare function windupHeadings(): void;
+export declare function teardownHeadings(): void;
+export declare function debugCounter(counter: any): string;
+export {};

package/components/heading/HeadingHelpers.js

@@ -1,9 +1,14 @@
-import React from 'react';
 import { warn, convertJsxToString } from '../../shared/component-helper';
-export const globalSyncCounter = React.createRef();
-export const globalHeadingCounter = React.createRef(null);
-const refs = React.createRef();
-export const correctHeadingLevel = _ref => {
+export const globalSyncCounter = {
+  current: null
+};
+export const globalHeadingCounter = {
+  current: null
+};
+const refs = {
+  current: null
+};
+export const correctInternalHeadingLevel = _ref => {
   let {
     counter,
     level,
@@ -14,6 +19,7 @@ export const correctHeadingLevel = _ref => {
     decrease = false,
     source = null,
     bypassChecks = false,
+    isRerender = false,
     debug = null
   } = _ref;
 
@@ -32,7 +38,11 @@ export const correctHeadingLevel = _ref => {
   const update = level => {
     var _globalHeadingCounter;
 
-    counter.makeMeReady();
+    if (!isRerender) {
+      counter.makeMeReady({
+        level
+      });
+    }
 
     if (inherit) {
       if (globalSyncCounter.current) {
@@ -58,7 +68,7 @@ export const correctHeadingLevel = _ref => {
     }
   };
 
-  let skipThisTime = false;
+  let skipUpdateFromProp = false;
 
   const canBeManipulatedNextTime = overwriteContext => {
     return counter.contextCounter.isGlobal || counter.contextCounter.entry === 1 || overwriteContext;
@@ -74,7 +84,7 @@ export const correctHeadingLevel = _ref => {
     if (canBeManipulatedNextTime(overwriteContext) || counter.lastResetLevel === resetLevel) {
       counter.makeMeReady();
       counter.reset(resetLevel);
-      skipThisTime = true;
+      skipUpdateFromProp = true;
     }
   } else if (globalNextLevel.current) {
     const {
@@ -87,12 +97,12 @@ export const correctHeadingLevel = _ref => {
       counter.enableBypassChecks();
       update(nextLevel);
       counter.disableBypassChecks();
-      skipThisTime = true;
+      skipUpdateFromProp = true;
     }
   }
 
-  if (!skipThisTime) {
-    if (reset === true || reset === 'true' || parseFloat(reset) > -1) {
+  if (!skipUpdateFromProp) {
+    if (reset === true || parseFloat(String(reset)) > -1) {
       counter.reset(reset);
     } else {
       update(level);
@@ -145,7 +155,9 @@ export function resetAllLevels() {
   });
   teardownHeadings();
 }
-export const globalResetNextTime = React.createRef(false);
+export const globalResetNextTime = {
+  current: null
+};
 export function resetLevels(level) {
   let {
     overwriteContext = false
@@ -155,7 +167,9 @@ export function resetLevels(level) {
     overwriteContext
   };
 }
-export const globalNextLevel = React.createRef(null);
+export const globalNextLevel = {
+  current: null
+};
 export function setNextLevel(level) {
   let {
     overwriteContext = false

package/components/heading/HeadingProvider.d.ts

@@ -1,12 +1,9 @@
-import * as React from 'react';
-import type { HeadingProps } from './Heading';
-export interface HeadingProviderProps
-  extends React.HTMLProps<HTMLElement>,
-    HeadingProps {}
-export default class HeadingProvider extends React.Component<
-  HeadingProviderProps,
-  any
-> {
-  static defaultProps: object;
-  render(): JSX.Element;
-}
+/**
+ * Web Heading Provider
+ *
+ */
+import React from 'react';
+import { HeadingProps } from './Heading';
+export declare type HeadingProviderProps = HeadingProps;
+export declare type HeadingProviderAllProps = HeadingProviderProps & React.HTMLProps<HTMLElement>;
+export default function HeadingProvider(props: HeadingProviderAllProps): JSX.Element;

package/components/heading/HeadingProvider.js

@@ -5,38 +5,13 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import { isTrue } from '../../shared/component-helper';
 import HeadingContext from './HeadingContext';
-import { globalSyncCounter, globalHeadingCounter, correctHeadingLevel, windupHeadings, teardownHeadings, debugCounter } from './HeadingHelpers';
+import { globalSyncCounter, globalHeadingCounter, correctInternalHeadingLevel, windupHeadings, teardownHeadings, debugCounter } from './HeadingHelpers';
 import { initCounter } from './HeadingCounter';
-export default class HeadingProvider extends React.PureComponent {
-  static getDerivedStateFromProps(props, state) {
-    if (state._listenForPropChanges) {
-      const level = parseFloat(props.level);
-
-      if (state.prevLevel !== props.level && level > 0 && level !== state.level || props.relevel) {
-        var _state$context$headin, _state$context$headin2;
-
-        const {
-          level: newLevel
-        } = correctHeadingLevel({
-          counter: state.counter,
-          level,
-          bypassChecks: isTrue(props.skip_correction) || isTrue((_state$context$headin = state.context.heading) === null || _state$context$headin === void 0 ? void 0 : _state$context$headin.skip_correction),
-          source: props.text || props.children,
-          debug: props.debug || ((_state$context$headin2 = state.context.heading) === null || _state$context$headin2 === void 0 ? void 0 : _state$context$headin2.debug)
-        });
-        state.level = state.prevLevel = newLevel;
-      }
-
-      state._listenForPropChanges = true;
-      return state;
-    }
-  }
-
-  constructor(props, context) {
-    super(props);
+export default function HeadingProvider(props) {
+  const context = React.useContext(HeadingContext);
+  const [state, setState] = React.useState(() => {
     const state = {
       context,
       _listenForPropChanges: true
@@ -55,10 +30,10 @@ export default class HeadingProvider extends React.PureComponent {
       state.counter.setContextCounter(globalHeadingCounter.current);
     }
 
-    state.counter = correctHeadingLevel({
-      ref: props,
+    state.counter = correctInternalHeadingLevel({
       counter: state.counter,
-      level: parseFloat(props.level),
+      ref: props,
+      level: parseFloat(String(props.level)),
       inherit: isTrue(props.inherit),
       reset: props.reset,
       increase: isTrue(props.increase) || isTrue(props.up),
@@ -69,62 +44,43 @@ export default class HeadingProvider extends React.PureComponent {
     });
     globalSyncCounter.current = state.counter;
     state.level = state.counter.level;
-    state.prevLevel = state.newProps.level || state.counter.level;
-    this.state = state;
-  }
-
-  componentDidMount() {
+    state.prevLevel = parseFloat(String(state.newProps.level)) || state.counter.level;
+    return state;
+  });
+  React.useEffect(() => {
+    const level = parseFloat(String(props.level));
+
+    if (state.prevLevel !== props.level && level > 0 && level !== state.level) {
+      var _state$context$headin, _state$context$headin2;
+
+      const {
+        level: newLevel
+      } = correctInternalHeadingLevel({
+        counter: state.counter,
+        level,
+        bypassChecks: isTrue(props.skip_correction) || isTrue((_state$context$headin = state.context.heading) === null || _state$context$headin === void 0 ? void 0 : _state$context$headin.skip_correction),
+        source: props.text || props.children,
+        debug: props.debug || ((_state$context$headin2 = state.context.heading) === null || _state$context$headin2 === void 0 ? void 0 : _state$context$headin2.debug)
+      });
+      state.level = state.prevLevel = newLevel;
+      setState(_objectSpread({}, state));
+    }
+  }, [props.level]);
+  React.useEffect(() => {
     windupHeadings();
-  }
-
-  componentWillUnmount() {
-    teardownHeadings();
-  }
-
-  render() {
-    return React.createElement(HeadingContext.Provider, {
-      value: {
-        heading: _objectSpread(_objectSpread({}, this.state.newProps), this.state)
-      }
-    }, this.state.newProps.debug_counter && React.createElement("span", {
-      className: "dnb-heading__context"
-    }, React.createElement("span", {
-      className: "dnb-heading__debug"
-    }, "Context:", ' ', React.createElement("span", {
-      className: "dnb-code"
-    }, debugCounter(this.state.counter))), this.props.children) || this.props.children);
-  }
-
-}
-
-_defineProperty(HeadingProvider, "contextType", HeadingContext);
-
-_defineProperty(HeadingProvider, "defaultProps", {
-  id: null,
-  group: null,
-  level: null,
-  increase: null,
-  decrease: null,
-  up: null,
-  down: null,
-  inherit: null,
-  counter: null,
-  reset: null,
-  text: null,
-  children: null
-});
-
-process.env.NODE_ENV !== "production" ? HeadingProvider.propTypes = {
-  id: PropTypes.string,
-  group: PropTypes.string,
-  level: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  increase: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  decrease: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  up: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  down: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  inherit: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  counter: PropTypes.any,
-  reset: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.bool]),
-  text: PropTypes.any,
-  children: PropTypes.any
-} : void 0;
+    return () => {
+      teardownHeadings();
+    };
+  }, []);
+  return React.createElement(HeadingContext.Provider, {
+    value: {
+      heading: _objectSpread(_objectSpread({}, state.newProps), state)
+    }
+  }, state.newProps.debug_counter && React.createElement("span", {
+    className: "dnb-heading__context"
+  }, React.createElement("span", {
+    className: "dnb-heading__debug"
+  }, "Context:", ' ', React.createElement("span", {
+    className: "dnb-code"
+  }, debugCounter(state.counter))), props.children) || props.children);
+}

package/components/height-animation/HeightAnimation.d.ts

@@ -29,5 +29,5 @@ export declare type HeightAnimationProps = {
      */
     innerRef?: React.RefObject<HTMLElement>;
 } & useHeightAnimationOptions;
-export declare type HeightAnimationAllProps = HeightAnimationProps & SpacingProps & React.HTMLProps<HTMLElement>;
+export declare type HeightAnimationAllProps = HeightAnimationProps & SpacingProps & Omit<React.HTMLProps<HTMLElement>, 'ref'>;
 export default function HeightAnimation({ open, animate, keepInDOM, showOverflow, element, duration, className, innerRef, children, onInit, onOpen, onAnimationEnd, ...rest }: HeightAnimationAllProps): JSX.Element;

package/components/icon/Icon.d.ts

@@ -12,7 +12,7 @@ export type IconAttributes = string | Record<string, unknown>;
 export type IconChildren = React.ReactNode | ((...args: any[]) => any);
 export type IconColor = string;
 export interface IconProps
-  extends React.HTMLProps<HTMLElement>,
+  extends Omit<React.HTMLProps<HTMLElement>, 'ref'>,
     SpacingProps {
   /**
    * <em>(required)</em> a React SVG Component or the icon name (in case we use `IconPrimary` or `dnb-icon-primary`).

package/components/icon/Icon.js

@@ -383,7 +383,7 @@ export const prerenderIcon = function () {
     const mod = (listOfIcons.dnbIcons ? listOfIcons.dnbIcons : listOfIcons)[icon];
     return mod && mod.default ? mod.default : mod;
   } catch (e) {
-    new ErrorHandler(`Icon '${icon}' did not exist!`);
+    ErrorHandler(`Icon '${icon}' did not exist!`);
     return null;
   }
 };

package/components/icon-primary/IconPrimary.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { IconProps } from '../Icon';
 export interface IconPrimaryProps
   extends IconProps,
-    Omit<React.HTMLProps<HTMLElement>, 'size'> {}
+    Omit<React.HTMLProps<HTMLElement>, 'size' | 'ref'> {}
 export default class IconPrimary extends React.Component<
   IconPrimaryProps,
   any

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

@@ -11,7 +11,6 @@
   position: relative;
   padding: 1rem;
   overflow: hidden;
-  max-width: 60ch;
   background: var(--color-white);
   box-shadow: var(--shadow-default);
 }
@@ -36,6 +35,7 @@
 .dnb-info-card__content {
   flex-direction: column;
   margin-top: 0.1875rem;
+  max-width: 70ch;
 }
 .dnb-info-card--centered .dnb-info-card__content {
   margin-top: 0;

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

@@ -1 +1 @@
-.dnb-info-card{background:var(--color-white);box-shadow:var(--shadow-default);display:flex;flex-direction:row;max-width:60ch;overflow:hidden;padding:1rem;position:relative}.dnb-info-card:after{border:1px solid var(--color-black-8);bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.dnb-info-card,.dnb-info-card:after{border-radius:.25rem}.dnb-info-card--centered{align-items:center;flex-direction:column;text-align:center}.dnb-info-card__content{flex-direction:column;margin-top:.1875rem}.dnb-info-card--centered .dnb-info-card__content{margin-top:0}.dnb-info-card__icon{color:var(--color-emerald-green)}.dnb-info-card__image{height:4rem;width:4rem}.dnb-info-card__buttons{display:flex;flex-flow:row wrap}.dnb-info-card--centered .dnb-info-card__buttons{align-items:center;flex-direction:column;text-align:center}
+.dnb-info-card{background:var(--color-white);box-shadow:var(--shadow-default);display:flex;flex-direction:row;overflow:hidden;padding:1rem;position:relative}.dnb-info-card:after{border:1px solid var(--color-black-8);bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.dnb-info-card,.dnb-info-card:after{border-radius:.25rem}.dnb-info-card--centered{align-items:center;flex-direction:column;text-align:center}.dnb-info-card__content{flex-direction:column;margin-top:.1875rem;max-width:70ch}.dnb-info-card--centered .dnb-info-card__content{margin-top:0}.dnb-info-card__icon{color:var(--color-emerald-green)}.dnb-info-card__image{height:4rem;width:4rem}.dnb-info-card__buttons{display:flex;flex-flow:row wrap}.dnb-info-card--centered .dnb-info-card__buttons{align-items:center;flex-direction:column;text-align:center}

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

@@ -13,7 +13,6 @@
   padding: 1rem;
 
   overflow: hidden;
-  max-width: 60ch;
 
   background: var(--color-white);
 
@@ -41,6 +40,7 @@
   &__content {
     flex-direction: column;
     margin-top: 0.1875rem;
+    max-width: 70ch;
   }
 
   &--centered &__content {

package/components/input/Input.d.ts

@@ -30,7 +30,7 @@ export type InputSubmitButtonIcon =
   | ((...args: any[]) => any);
 export type InputChildren = React.ReactNode | ((...args: any[]) => any);
 export interface InputProps
-  extends React.HTMLProps<HTMLElement>,
+  extends Omit<React.HTMLProps<HTMLElement>, 'ref'>,
     SpacingProps {
   /**
    * Choose between `text`, `number`, `email`, `password`, `url`, `tel` and `search`.
@@ -175,7 +175,7 @@ export interface InputProps
   /**
    * 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?: any;
+  inner_ref?: React.Ref;
   readOnly?: boolean;
 
   /**

package/components/input/InputPassword.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { InputProps } from './Input';
 export interface InputPasswordProps
-  extends React.HTMLProps<HTMLElement>,
+  extends Omit<React.HTMLProps<HTMLElement>, 'ref'>,
     InputProps {
   show_password?: string;
   hide_password?: string;

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

@@ -48,7 +48,7 @@ export type InputMaskedChildren =
   | React.ReactNode
   | ((...args: any[]) => any);
 export interface InputMaskedProps
-  extends React.HTMLProps<HTMLElement>,
+  extends Omit<React.HTMLProps<HTMLElement>, 'ref'>,
     SpacingProps {
   /**
    * 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.
@@ -119,7 +119,7 @@ export interface InputMaskedProps
   /**
    * 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?: Record<string, unknown>;
+  inner_ref?: React.Ref;
 
   /**
    * 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 }`.

package/components/input-masked/InputMasked.js

@@ -52,7 +52,7 @@ process.env.NODE_ENV !== "production" ? InputMasked.propTypes = _objectSpread({
   pipe: PropTypes.func,
   keep_char_positions: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   placeholder_char: PropTypes.string,
-  inner_ref: PropTypes.object,
+  inner_ref: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
   on_change: PropTypes.func,
   on_submit: PropTypes.func,
   on_focus: PropTypes.func,

package/components/input-masked/InputMaskedHooks.js

@@ -149,7 +149,8 @@ export const useInputElement = () => {
     props
   } = React.useContext(InputMaskedContext);
   const {
-    pipe
+    pipe,
+    inner_ref
   } = props;
   const mask = useMask();
   const {
@@ -158,10 +159,14 @@ export const useInputElement = () => {
     placeholderChar,
     keepCharPositions
   } = useMaskParams();
-
-  const _ref = React.useRef();
-
-  const ref = (props === null || props === void 0 ? void 0 : props.inner_ref) || _ref;
+  const isFn = typeof inner_ref === 'function';
+  const refHook = React.useRef();
+  const ref = !isFn && inner_ref || refHook;
+  React.useLayoutEffect(() => {
+    if (isFn) {
+      inner_ref === null || inner_ref === void 0 ? void 0 : inner_ref(ref.current);
+    }
+  }, [ref.current]);
   const inputElementRef = React.useRef(React.createElement("input", {
     ref: ref
   }));
@@ -189,10 +194,10 @@ export const useInputElement = () => {
 
   return InputElement;
 };
-export const useEventMapping = _ref2 => {
+export const useEventMapping = _ref => {
   let {
     setLocalValue
-  } = _ref2;
+  } = _ref;
   const callEvent = useCallEvent({
     setLocalValue
   });
@@ -216,10 +221,10 @@ export const useEventMapping = _ref2 => {
   };
 };
 
-const useCallEvent = _ref3 => {
+const useCallEvent = _ref2 => {
   let {
     setLocalValue
-  } = _ref3;
+  } = _ref2;
   const {
     props
   } = React.useContext(InputMaskedContext);
@@ -228,11 +233,11 @@ const useCallEvent = _ref3 => {
   const decimalSeparators = /[,.'·]/;
   let isUnidentified = false;
 
-  const callEvent = (_ref4, name) => {
+  const callEvent = (_ref3, name) => {
     let {
       event,
       value
-    } = _ref4;
+    } = _ref3;
     value = value || event.target.value;
     const selStart = event.target.selectionStart;
     let keyCode = keycode(event);

package/components/input-masked/text-mask/createTextMaskInputElement.js

@@ -56,9 +56,7 @@ export default function createTextMaskInputElement(config) {
       }
 
       const safeRawValue = getSafeRawValue(rawValue);
-      const {
-        selectionEnd: currentCaretPosition
-      } = inputElement;
+      const currentCaretPosition = inputElement === null || inputElement === void 0 ? void 0 : inputElement.selectionEnd;
       const {
         previousConformedValue,
         previousPlaceholder