@dnb/eufemia 10.0.0 → 10.2.0

package/es/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 = ({
+export const globalSyncCounter = {
+  current: null
+};
+export const globalHeadingCounter = {
+  current: null
+};
+const refs = {
+  current: null
+};
+export const correctInternalHeadingLevel = ({
   counter,
   level,
   ref = null,
@@ -13,6 +18,7 @@ export const correctHeadingLevel = ({
   decrease = false,
   source = null,
   bypassChecks = false,
+  isRerender = false,
   debug = null
 }) => {
   if (ref && refs.current) {
@@ -30,7 +36,11 @@ export const correctHeadingLevel = ({
   const update = level => {
     var _globalHeadingCounter;
 
-    counter.makeMeReady();
+    if (!isRerender) {
+      counter.makeMeReady({
+        level
+      });
+    }
 
     if (inherit) {
       if (globalSyncCounter.current) {
@@ -56,7 +66,7 @@ export const correctHeadingLevel = ({
     }
   };
 
-  let skipThisTime = false;
+  let skipUpdateFromProp = false;
 
   const canBeManipulatedNextTime = overwriteContext => {
     return counter.contextCounter.isGlobal || counter.contextCounter.entry === 1 || overwriteContext;
@@ -72,7 +82,7 @@ export const correctHeadingLevel = ({
     if (canBeManipulatedNextTime(overwriteContext) || counter.lastResetLevel === resetLevel) {
       counter.makeMeReady();
       counter.reset(resetLevel);
-      skipThisTime = true;
+      skipUpdateFromProp = true;
     }
   } else if (globalNextLevel.current) {
     const {
@@ -85,12 +95,12 @@ export const correctHeadingLevel = ({
       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);
@@ -139,7 +149,9 @@ export function resetAllLevels() {
   });
   teardownHeadings();
 }
-export const globalResetNextTime = React.createRef(false);
+export const globalResetNextTime = {
+  current: null
+};
 export function resetLevels(level, {
   overwriteContext = false
 } = {}) {
@@ -148,7 +160,9 @@ export function resetLevels(level, {
     overwriteContext
   };
 }
-export const globalNextLevel = React.createRef(null);
+export const globalNextLevel = {
+  current: null
+};
 export function setNextLevel(level, {
   overwriteContext = false
 } = {}) {

package/es/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/es/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/es/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/es/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/es/components/icon/Icon.js

@@ -367,7 +367,7 @@ export const prerenderIcon = ({
     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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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
   }));

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

@@ -54,9 +54,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

package/es/components/lib.d.ts

@@ -59,9 +59,9 @@ import VisuallyHidden from './visually-hidden/VisuallyHidden';
 export { Accordion, Anchor, Autocomplete, Avatar, Badge, Breadcrumb, Button, Checkbox, DatePicker, Dialog, Drawer, Dropdown, FormLabel, FormRow, FormSet, FormStatus, GlobalError, GlobalStatus, Heading, HeightAnimation, HelpButton, Icon, IconPrimary, InfoCard, Input, InputMasked, Logo, Modal, NumberFormat, Pagination, ProgressIndicator, Radio, Section, Skeleton, SkipContent, Slider, Space, StepIndicator, Switch, Table, Tabs, Tag, Textarea, Timeline, ToggleButton, Tooltip, Upload, VisuallyHidden, };
 export declare const getComponents: () => {
     Accordion: typeof Accordion;
-    Anchor: import("react").ForwardRefExoticComponent<Pick<import("./anchor/Anchor").AnchorProps & import("react").HTMLProps<HTMLAnchorElement> & import("./space/types").SpacingElementProps & {
+    Anchor: import("react").ForwardRefExoticComponent<import("./anchor/Anchor").AnchorProps & Omit<import("react").HTMLProps<HTMLAnchorElement>, "ref"> & import("./space/types").SpacingElementProps & {
         space?: import("./space/types").SpaceType | import("./space/types").SpacingElementProps;
-    }, "aria-hidden" | "cite" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "accessKey" | "key" | "value" | "space" | "top" | "right" | "bottom" | "left" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "className" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "innerRef" | "list" | "tooltip" | "step" | "shape" | "skeleton" | "as" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "size" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "target" | "type" | "useMap" | "width" | "wmode" | "wrap" | "to" | "icon" | "element" | "targetBlankTitle" | "iconPosition" | "omitClass" | "inner_ref"> & import("react").RefAttributes<HTMLAnchorElement>>;
+    } & import("react").RefAttributes<HTMLAnchorElement>>;
     Autocomplete: typeof Autocomplete;
     Avatar: {
         (localProps: import("./avatar/Avatar").AvatarProps & import("./space/types").SpacingElementProps & {

package/es/components/logo/Logo.d.ts

@@ -6,7 +6,7 @@ export type LogoRatio = number | string;
 export type LogoWidth = number | string;
 export type LogoHeight = number | string;
 export interface LogoProps
-  extends React.HTMLProps<HTMLElement>,
+  extends Omit<React.HTMLProps<HTMLElement>, 'ref'>,
     SpacingProps {
   /**
    * Define the size of the logo. Sets the height. The width will be calculated by the ratio. Also, `inherit` will use the inherited height. Defaults to `auto`.

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

@@ -16,7 +16,7 @@ import { hasSelectedText, IS_IOS } from '../../shared/helpers';
 import { spacingPropTypes, createSpacingClasses } from '../space/SpacingHelper';
 import { skeletonDOMAttributes, createSkeletonClass } from '../skeleton/SkeletonHelper';
 import Tooltip, { injectTooltipSemantic } from '../tooltip/Tooltip';
-import { format, showSelectionNotice } from './NumberUtils';
+import { format, showSelectionNotice, runIOSSelectionFix } from './NumberUtils';
 export default class NumberFormat extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -347,12 +347,4 @@ process.env.NODE_ENV !== "production" ? NumberFormat.propTypes = _objectSpread(_
   className: PropTypes.string,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
 }) : void 0;
-let hasiOSFix = false;
-export function runIOSSelectionFix() {
-  try {
-    const selection = window.getSelection();
-    const range = document.createRange();
-    selection.removeAllRanges();
-    selection.addRange(range);
-  } catch (e) {}
-}
+let hasiOSFix = false;

package/es/components/number-format/NumberUtils.d.ts

@@ -124,4 +124,16 @@ export const countDecimals: (
 ) => number;
 
 type copy = (content: string, HTMLElement) => void;
+
+/**
+ * Only for internal use as of now. So its not documented.
+ */
 export const useCopyWithNotice: () => { copy: copy };
+
+/**
+ * Only for internal use as of now. So its not documented.
+ *
+ * So iOS v13 can select something on the first try, we run this add range trick.
+ * NB: This hack may be removed in future iOS versions.
+ */
+export const runIOSSelectionFix = () => null;

package/es/components/pagination/Pagination.d.ts

@@ -35,7 +35,7 @@ type PaginationIndicatorElement =
   | string;
 type PaginationChildren = React.ReactNode | ((...args: any[]) => any);
 export interface PaginationProps
-  extends React.HTMLProps<HTMLElement>,
+  extends Omit<React.HTMLProps<HTMLElement>, 'ref'>,
     SpacingProps {
   /**
    * The page shown in the very beginning. If `current_page` is set, then it may not make too much sense to set this as well.

package/es/components/radio/Radio.d.ts

@@ -21,7 +21,7 @@ export type RadioSuffix =
 export type RadioAttributes = string | Record<string, unknown>;
 export type RadioChildren = string | ((...args: any[]) => any);
 export interface RadioProps
-  extends React.HTMLProps<HTMLElement>,
+  extends Omit<React.HTMLProps<HTMLElement>, 'ref'>,
     SpacingProps {
   /**
    * Use either the `label` property or provide a custom one.

package/es/components/radio/RadioGroup.d.ts

@@ -21,7 +21,7 @@ export type RadioGroupChildren =
   | ((...args: any[]) => any)
   | React.ReactNode;
 export interface RadioGroupProps
-  extends React.HTMLProps<HTMLElement>,
+  extends Omit<React.HTMLProps<HTMLElement>, 'ref'>,
     SpacingProps {
   /**
    * Use either the `label` property or provide a custom one.

package/es/components/section/Section.d.ts

@@ -23,5 +23,5 @@ export declare type SectionProps = {
     className?: string;
     children?: React.ReactNode;
 };
-export declare type SectionAllProps = SectionProps & SpacingProps & React.HTMLProps<HTMLElement>;
+export declare type SectionAllProps = SectionProps & SpacingProps & Omit<React.HTMLProps<HTMLElement>, 'ref'>;
 export default function Section(localProps: SectionAllProps): JSX.Element;

package/es/components/skeleton/Skeleton.d.ts

@@ -10,7 +10,7 @@ export type SkeletonChildren =
   | ((...args: any[]) => any)
   | React.ReactNode;
 export interface SkeletonProps
-  extends React.HTMLProps<HTMLElement>,
+  extends Omit<React.HTMLProps<HTMLElement>, 'ref'>,
     SpacingProps {
   /**
    * Use `true` to enable/show the skeleton for the component used inside. Defaults to `false`.

package/es/components/space/Space.d.ts

@@ -40,7 +40,7 @@ export declare type SpaceProps = {
      */
     innerRef?: React.RefObject<HTMLElement>;
 } & SpacingProps;
-export declare type SpaceAllProps = SpaceProps & React.HTMLProps<HTMLElement>;
+export declare type SpaceAllProps = SpaceProps & Omit<React.HTMLProps<HTMLElement>, 'ref'>;
 export default class Space extends React.PureComponent<SpaceAllProps | React.HTMLProps<HTMLElement>> {
     static contextType: React.Context<import("../../shared/Context").ContextProps>;
     static propTypes: {

package/es/components/step-indicator/StepIndicator.d.ts

@@ -23,7 +23,7 @@ export type StepIndicatorChildren =
   | React.ReactNode
   | ((...args: any[]) => any);
 export interface StepIndicatorProps
-  extends React.HTMLProps<HTMLElement>,
+  extends Omit<React.HTMLProps<HTMLAnchorElement>, 'ref'>,
     SpacingProps {
   /**
    * <em>(required)</em> a unique string-based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.

package/es/components/step-indicator/StepIndicatorItem.d.ts

@@ -47,7 +47,7 @@ export default class StepIndicatorItem extends React.Component<
 }
 export interface StepItemButtonProps {
   children?: React.ReactNode;
-  inner_ref?: Record<string, unknown>;
+  inner_ref?: React.RefObject<HTMLElement>;
   className?: string;
   status?: FormStatusText;
   status_state?: StepIndicatorStatusState;

package/es/components/step-indicator/StepIndicatorSidebar.d.ts

@@ -3,13 +3,15 @@ import type { SpacingProps } from '../../shared/types';
 import type { StepIndicatorProps } from './StepIndicator';
 export interface StepIndicatorSidebarProps
   extends SpacingProps,
-    Pick<
-      StepIndicatorProps,
-      'sidebar_id' | 'mode' | 'current_step' | 'data'
-    >,
-    React.HTMLProps<HTMLElement> {
+    Pick<StepIndicatorProps, 'mode' | 'current_step' | 'data'>,
+    Omit<React.HTMLProps<HTMLAnchorElement>, 'ref'> {
   internalId?: string;
   showInitialData?: boolean;
+
+  /**
+   * <em>(required)</em> a unique string-based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.
+   */
+  sidebar_id: string;
 }
 export default class StepIndicatorSidebar extends React.Component<
   StepIndicatorSidebarProps,