@dnb/eufemia 10.1.0 → 10.2.0

package/components/heading/Heading.js

@@ -1,23 +1,22 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-const _excluded = ["text", "relevel", "group", "debug", "debug_counter", "reset", "skip_correction", "increase", "decrease", "up", "down", "inherit", "level", "size", "skeleton", "element", "class", "className", "children"];
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["text", "group", "debug", "debug_counter", "reset", "skip_correction", "increase", "decrease", "up", "down", "inherit", "level", "size", "skeleton", "element", "className", "children"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = 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 classnames from 'classnames';
 import { isTrue, validateDOMAttributes } from '../../shared/component-helper';
 import '../../shared/helpers';
-import { spacingPropTypes, createSpacingClasses } from '../space/SpacingHelper';
+import { createSpacingClasses } from '../space/SpacingHelper';
 import HeadingContext from './HeadingContext';
 import Context from '../../shared/Context';
 import HeadingProvider from './HeadingProvider';
 import { createSkeletonClass } from '../skeleton/SkeletonHelper';
-import { correctHeadingLevel, resetLevels, resetAllLevels, setNextLevel, globalSyncCounter, globalHeadingCounter, windupHeadings, teardownHeadings, debugCounter } from './HeadingHelpers';
+import { correctInternalHeadingLevel, resetLevels, resetAllLevels, setNextLevel, globalSyncCounter, globalHeadingCounter, windupHeadings, teardownHeadings, debugCounter } from './HeadingHelpers';
 import { initCounter } from './HeadingCounter';
 export const levelResolution = {
   1: 'xx-large',
@@ -27,205 +26,138 @@ export const levelResolution = {
   5: 'small',
   6: 'x-small'
 };
-export default class Heading 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;
-
-        state.counter.skipMakeMeReady();
-        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) {
-    var _context$heading, _state$context$headin3, _state$context$headin4;
+export default function Heading(props) {
+  var _headingContext$headi2, _headingContext$headi3;
+
+  const context = React.useContext(Context);
+  const headingContext = React.useContext(HeadingContext);
+
+  const _ref = React.useRef();
+
+  const {
+    text,
+    group: _group,
+    debug: _debug,
+    debug_counter: _debug_counter,
+    reset: _reset,
+    skip_correction: _skip_correction,
+    increase: _increase,
+    decrease: _decrease,
+    up: _up,
+    down: _down,
+    inherit: _inherit,
+    level: _level,
+    size: _size = 'auto',
+    skeleton: _skeleton,
+    element: _element,
+    className,
+    children
+  } = props,
+        rest = _objectWithoutProperties(props, _excluded);
+
+  const [state, setState] = React.useState(() => {
+    var _headingContext$headi, _state$headingContext, _state$headingContext2, _state$headingContext3, _state$headingContext4;
 
-    super(props);
-    this._ref = React.createRef();
     const state = {
+      level: null,
+      counter: null,
       context,
-      _listenForPropChanges: true
+      headingContext
     };
-
-    if ((_context$heading = context.heading) !== null && _context$heading !== void 0 && _context$heading.counter) {
-      state.counter = initCounter(props);
-      state.counter.setContextCounter(context.heading.counter);
-      state.counter.isHeading = true;
-    } else {
-      state.counter = initCounter(props);
-      state.counter.setContextCounter(globalHeadingCounter.current);
-      state.counter.isHeading = true;
-    }
-
-    state.counter = correctHeadingLevel({
-      ref: props,
+    state.counter = initCounter(props);
+    const counter = (_headingContext$headi = headingContext.heading) !== null && _headingContext$headi !== void 0 && _headingContext$headi.counter ? headingContext.heading.counter : globalHeadingCounter.current;
+    state.counter.setContextCounter(counter);
+    state.counter.isHeading = true;
+    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),
       decrease: isTrue(props.decrease) || isTrue(props.down),
-      bypassChecks: isTrue(props.skip_correction) || isTrue((_state$context$headin3 = state.context.heading) === null || _state$context$headin3 === void 0 ? void 0 : _state$context$headin3.skip_correction),
+      bypassChecks: isTrue(props.skip_correction) || isTrue((_state$headingContext = state.headingContext) === null || _state$headingContext === void 0 ? void 0 : (_state$headingContext2 = _state$headingContext.heading) === null || _state$headingContext2 === void 0 ? void 0 : _state$headingContext2.skip_correction),
       source: props.text || props.children,
-      debug: props.debug || ((_state$context$headin4 = state.context.heading) === null || _state$context$headin4 === void 0 ? void 0 : _state$context$headin4.debug)
+      debug: props.debug || ((_state$headingContext3 = state.headingContext) === null || _state$headingContext3 === void 0 ? void 0 : (_state$headingContext4 = _state$headingContext3.heading) === null || _state$headingContext4 === void 0 ? void 0 : _state$headingContext4.debug)
     });
     globalSyncCounter.current = state.counter;
     state.level = state.counter.level;
-    state.prevLevel = props.level;
-    this.state = state;
-  }
-
-  componentDidMount() {
+    state.prevLevel = parseFloat(String(props.level));
+    return state;
+  });
+  React.useEffect(() => {
     windupHeadings();
-    this.state.counter.windup();
-  }
-
-  componentWillUnmount() {
-    teardownHeadings();
-    this.state.counter.teardown();
-  }
-
-  render() {
-    var _this$context$heading, _this$context$heading2;
-
-    const _this$props = this.props,
-          {
-      text,
-      relevel: _relevel,
-      group: _group,
-      debug: _debug,
-      debug_counter: _debug_counter,
-      reset: _reset,
-      skip_correction: _skip_correction,
-      increase: _increase,
-      decrease: _decrease,
-      up: _up,
-      down: _down,
-      inherit: _inherit,
-      level: _level,
-      size: _size,
-      skeleton: _skeleton,
-      element: _element,
-      class: _className,
-      className,
-      children
-    } = _this$props,
-          rest = _objectWithoutProperties(_this$props, _excluded);
-
-    let {
-      size,
-      element,
-      skeleton
-    } = this.props;
-    const {
-      level
-    } = this.state;
-    const debug = _debug || ((_this$context$heading = this.context.heading) === null || _this$context$heading === void 0 ? void 0 : _this$context$heading.debug);
-    const debug_counter = _debug_counter || ((_this$context$heading2 = this.context.heading) === null || _this$context$heading2 === void 0 ? void 0 : _this$context$heading2.debug_counter);
-
-    const attributes = _objectSpread({}, rest);
-
-    if (element === 'auto' || element === null) {
-      element = `h${level || '6'}`;
-
-      if (_size === 'auto' || _size === null) {
-        size = levelResolution[level || '6'];
-      }
-    } else {
-      if (!attributes.role) {
-        attributes.role = 'heading';
-      }
+    state.counter.windup();
+    return () => {
+      teardownHeadings();
+      state.counter.teardown();
+    };
+  }, []);
+  React.useEffect(() => {
+    const level = parseFloat(String(props.level));
+
+    if (state.prevLevel !== props.level && level > 0 && level !== state.level) {
+      var _state$headingContext5, _state$headingContext6, _state$headingContext7, _state$headingContext8;
+
+      const {
+        level: newLevel
+      } = correctInternalHeadingLevel({
+        counter: state.counter,
+        isRerender: true,
+        level,
+        bypassChecks: isTrue(props.skip_correction) || isTrue((_state$headingContext5 = state.headingContext) === null || _state$headingContext5 === void 0 ? void 0 : (_state$headingContext6 = _state$headingContext5.heading) === null || _state$headingContext6 === void 0 ? void 0 : _state$headingContext6.skip_correction),
+        source: props.text || props.children,
+        debug: props.debug || ((_state$headingContext7 = state.headingContext) === null || _state$headingContext7 === void 0 ? void 0 : (_state$headingContext8 = _state$headingContext7.heading) === null || _state$headingContext8 === void 0 ? void 0 : _state$headingContext8.debug)
+      });
+      state.level = state.prevLevel = newLevel;
+      setState(_objectSpread({}, state));
+    }
+  }, [props.level]);
+  let {
+    size,
+    element = 'auto',
+    skeleton
+  } = props;
+  const {
+    level
+  } = state;
+  const debug = _debug || (headingContext === null || headingContext === void 0 ? void 0 : (_headingContext$headi2 = headingContext.heading) === null || _headingContext$headi2 === void 0 ? void 0 : _headingContext$headi2.debug);
+  const debug_counter = _debug_counter || (headingContext === null || headingContext === void 0 ? void 0 : (_headingContext$headi3 = headingContext.heading) === null || _headingContext$headi3 === void 0 ? void 0 : _headingContext$headi3.debug_counter);
+
+  const attributes = _objectSpread({}, rest);
+
+  if (element === 'auto' || element === null) {
+    element = `h${level || 'x-small'}`;
+
+    if (_size === 'auto' || _size === null) {
+      size = levelResolution[level || 'x-small'];
+    }
+  } else {
+    if (!attributes.role) {
+      attributes.role = 'heading';
+    }
 
-      if (!attributes['aria-level']) {
-        attributes['aria-level'] = String(level);
-      }
+    if (!attributes['aria-level']) {
+      attributes['aria-level'] = String(level);
     }
+  }
 
-    validateDOMAttributes(this.props, attributes);
-    const Element = element;
-    return React.createElement(Context.Consumer, null, context => {
-      if (typeof (context === null || context === void 0 ? void 0 : context.skeleton) !== 'undefined') {
-        skeleton = context.skeleton;
-      }
+  validateDOMAttributes(props, attributes);
 
-      attributes.className = classnames(`dnb-heading dnb-h--${size}`, createSkeletonClass('font', skeleton, this.context), className, _className, createSpacingClasses(this.props));
-      attributes.children = React.createElement(React.Fragment, null, debug && React.createElement("span", {
-        className: "dnb-heading__debug"
-      }, `[h${level || '6'}] `, debug_counter && React.createElement(React.Fragment, null, ' ', React.createElement("span", {
-        className: "dnb-code"
-      }, debugCounter(this.state.counter)))), text || children);
-      return React.createElement(Element, _extends({
-        ref: this._ref
-      }, attributes));
-    });
+  if (typeof (context === null || context === void 0 ? void 0 : context.skeleton) !== 'undefined') {
+    skeleton = context.skeleton;
   }
 
+  const Element = element;
+  return React.createElement(Element, _extends({}, attributes, {
+    ref: _ref,
+    className: classnames(`dnb-heading dnb-h--${size}`, createSkeletonClass('font', skeleton, headingContext), className, createSpacingClasses(props))
+  }), debug && React.createElement("span", {
+    className: "dnb-heading__debug"
+  }, `[h${level || '6'}] `, debug_counter && React.createElement(React.Fragment, null, ' ', React.createElement("span", {
+    className: "dnb-code"
+  }, debugCounter(state.counter)))), text || children);
 }
-
-_defineProperty(Heading, "contextType", HeadingContext);
-
-_defineProperty(Heading, "defaultProps", {
-  id: null,
-  group: null,
-  text: null,
-  size: 'auto',
-  level: null,
-  increase: null,
-  decrease: null,
-  up: null,
-  down: null,
-  skip_correction: null,
-  debug: null,
-  debug_counter: null,
-  counter: null,
-  reset: null,
-  inherit: null,
-  skeleton: null,
-  element: 'auto',
-  class: null,
-  className: null,
-  children: null
-});
-
-process.env.NODE_ENV !== "production" ? Heading.propTypes = _objectSpread(_objectSpread({
-  id: PropTypes.string,
-  group: PropTypes.string,
-  text: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  size: PropTypes.oneOf(['auto', 'xx-large', 'x-large', 'large', 'medium', 'basis', 'small', 'x-small']),
-  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]),
-  skip_correction: PropTypes.bool,
-  debug: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
-  debug_counter: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
-  counter: PropTypes.any,
-  inherit: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  reset: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.bool]),
-  skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  element: PropTypes.string
-}, spacingPropTypes), {}, {
-  class: PropTypes.string,
-  className: PropTypes.string,
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
-}) : void 0;
 Heading.Level = HeadingProvider;
 
 Heading.Increase = props => React.createElement(HeadingProvider, _extends({

package/components/heading/HeadingContext.d.ts

@@ -1,5 +1,12 @@
-export default Context;
-declare const Context: React.Context<{
-    heading: any;
-}>;
-import React from "react";
+/**
+ * Web Heading Context
+ *
+ */
+import React from 'react';
+import { SkeletonContextProps } from '../skeleton/SkeletonHelper';
+import { HeadingProps } from './Heading';
+export declare type HeadingContextProps = {
+    heading?: HeadingProps;
+} & SkeletonContextProps;
+declare const HeadingContext: React.Context<HeadingContextProps>;
+export default HeadingContext;

package/components/heading/HeadingContext.js

@@ -1,5 +1,5 @@
 import React from 'react';
-const Context = React.createContext({
+const HeadingContext = React.createContext({
   heading: null
 });
-export default Context;
+export default HeadingContext;

package/components/heading/HeadingCounter.d.ts

@@ -1,18 +1,42 @@
-export function initCounter(props?: any): any;
-export class Counter {
-    constructor(props?: any);
-    level: number;
-    entry: number;
+/**
+ * Web Heading Counter Instance
+ *
+ */
+import { HeadingAllProps, InternalHeadingLevel } from './Heading';
+export declare type HeadingCounter = Counter;
+export declare type HeadingDebugCounter = boolean | (() => void);
+export declare type ContextCounter = {
+    level: InternalHeadingLevel;
+    entry: InternalHeadingLevel;
+    countHeadings: number;
+    _initCount: number;
+    _isReady: boolean;
+    isGlobal?: boolean;
+};
+export declare const initCounter: (props?: CounterProps) => Counter;
+export declare type CounterGroup = HeadingAllProps['group'];
+export declare type CounterChildren = HeadingAllProps['children'];
+export declare type CounterProps = {
+    isGlobal?: boolean;
+    group?: CounterGroup;
+    children?: CounterChildren;
+    counter?: CounterProps;
+};
+export declare class Counter {
+    level: InternalHeadingLevel;
+    entry: InternalHeadingLevel;
+    lastResetLevel: InternalHeadingLevel;
     _isReady: boolean;
     countHeadings: number;
     _initCount: number;
     isGlobal: boolean;
     isHeading: boolean;
     bypassChecks: boolean;
-    contextCounter: any;
+    contextCounter: ContextCounter;
     reports: any[];
-    group: any;
-    children: any;
+    group: CounterGroup;
+    children: CounterChildren;
+    constructor(props?: CounterProps);
     report(...str: any[]): void;
     useLastReport(): any;
     enableBypassChecks(): void;
@@ -20,23 +44,23 @@ export class Counter {
     getLevel(): number;
     hasEntryLevel(): boolean;
     hasCorrection(): boolean;
-    setEntryLevel(level?: any): void;
+    setEntryLevel(level?: InternalHeadingLevel): void;
     isInContext(): boolean;
-    setContextCounter(contextCounter: any): void;
-    skipMakeMeReady(): void;
+    setContextCounter(contextCounter: ContextCounter): void;
     windup(): void;
     teardown(): void;
-    makeMeReady(): void;
+    makeMeReady({ level }?: {
+        level?: InternalHeadingLevel;
+    }): void;
     factorCheck({ action, level, current, report }: {
         action: any;
         level: any;
         current: any;
         report: any;
     }): any;
-    setLevel(level: any, action?: string): void;
+    setLevel(level: InternalHeadingLevel, action?: string): void;
     increment(): void;
     decrement(): void;
     force(level?: number): void;
     reset(toLevel?: any): void;
-    lastResetLevel: any;
 }

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 {};