@dnb/eufemia 9.19.0 → 9.20.0

package/components/modal/ModalContent.tsx

@@ -47,6 +47,10 @@ declare global {
   }
 }
 
+interface CSSPropertiesWithVars extends React.CSSProperties {
+  '--modal-background-color': string
+}
+
 export default class ModalContent extends React.PureComponent<
   ModalContentProps,
   ModalContentState
@@ -476,9 +480,9 @@ export default class ModalContent extends React.PureComponent<
               tabIndex={-1}
               className="dnb-modal__content__spacing dnb-no-focus"
               style={
-                color
+                (color
                   ? { '--modal-background-color': `var(--color-${color})` }
-                  : null
+                  : null) as CSSPropertiesWithVars
               }
               ref={this._contentRef}
             >

package/components/modal/components/ModalHeader.tsx

@@ -21,7 +21,7 @@ interface ModalHeaderProps {
   /**
    * The modal/drawer title. Displays on the very top of the content.
    */
-  title?: React.ReactNode | string
+  title?: React.ReactNode
 
   /**
    * Give the inner content wrapper a class name (maps to `dnb-modal__content__inner`).
@@ -30,7 +30,7 @@ interface ModalHeaderProps {
 }
 
 export default class ModalHeader extends React.PureComponent<
-  ModalHeaderProps & SectionProps
+  ModalHeaderProps & Omit<SectionProps, 'title'>
 > {
   static contextType = ModalContext
   render() {

package/components/modal/types.ts

@@ -180,7 +180,7 @@ export interface ModalContentProps {
   /**
    * The modal/drawer title. Displays on the very top of the content.
    */
-  title?: React.ReactNode | string
+  title?: React.ReactNode
 
   dialog_title?: string
 
@@ -255,7 +255,7 @@ export interface ModalContentProps {
    */
   overlay_class?: string
 
-  closeModal: (...args: any[]) => any
+  closeModal?: (...args: any[]) => any
 
   /**
    * Give the inner content wrapper a class name (maps to `dnb-modal__content__inner`).

package/components/pagination/Pagination.d.ts

@@ -128,7 +128,7 @@ export interface PaginationProps extends React.HTMLProps<HTMLElement> {
   skeleton?: PaginationSkeleton;
 
   /**
-   * If set to `infinity`, then the pagination bar will be now shown and but infinity scrolling will do the content presentation. Defaults to `pagination`.
+   * If set to `infinity`, then the pagination bar will be now shown and but infinity scrolling will do the content presentation. For more information, check out the <a href="https://eufemia.dnb.no/uilib/components/pagination/infinity-scroller">Infinity Scroller</a>. Defaults to `pagination`.
    */
   mode?: PaginationMode;
 
@@ -214,7 +214,7 @@ export interface PaginationProps extends React.HTMLProps<HTMLElement> {
   is_loading_text?: string;
 
   /**
-   * Used during infinity mode. If `use_load_button` is set to true, then a button is show on the bottom. If the `startup_page` is higher than 1, . Defaults to `Vis mer innhold`.
+   * Used during infinity mode. If `use_load_button` is set to true, then a button is show on the bottom. If the `startup_page` is higher than 1. Defaults to `Vis mer innhold`.
    */
   load_button_text?: string;
 
@@ -406,7 +406,7 @@ export interface PaginationInstanceProps {
   skeleton?: PaginationInstanceSkeleton;
 
   /**
-   * If set to `infinity`, then the pagination bar will be now shown and but infinity scrolling will do the content presentation. Defaults to `pagination`.
+   * If set to `infinity`, then the pagination bar will be now shown and but infinity scrolling will do the content presentation. For more information, check out the <a href="https://eufemia.dnb.no/uilib/components/pagination/infinity-scroller">Infinity Scroller</a>. Defaults to `pagination`.
    */
   mode?: PaginationInstanceMode;
 
@@ -492,7 +492,7 @@ export interface PaginationInstanceProps {
   is_loading_text?: string;
 
   /**
-   * Used during infinity mode. If `use_load_button` is set to true, then a button is show on the bottom. If the `startup_page` is higher than 1, . Defaults to `Vis mer innhold`.
+   * Used during infinity mode. If `use_load_button` is set to true, then a button is show on the bottom. If the `startup_page` is higher than 1. Defaults to `Vis mer innhold`.
    */
   load_button_text?: string;
 
@@ -686,7 +686,7 @@ export interface InfinityMarkerProps {
   skeleton?: InfinityMarkerSkeleton;
 
   /**
-   * If set to `infinity`, then the pagination bar will be now shown and but infinity scrolling will do the content presentation. Defaults to `pagination`.
+   * If set to `infinity`, then the pagination bar will be now shown and but infinity scrolling will do the content presentation. For more information, check out the <a href="https://eufemia.dnb.no/uilib/components/pagination/infinity-scroller">Infinity Scroller</a>. Defaults to `pagination`.
    */
   mode?: InfinityMarkerMode;
 
@@ -772,7 +772,7 @@ export interface InfinityMarkerProps {
   is_loading_text?: string;
 
   /**
-   * Used during infinity mode. If `use_load_button` is set to true, then a button is show on the bottom. If the `startup_page` is higher than 1, . Defaults to `Vis mer innhold`.
+   * Used during infinity mode. If `use_load_button` is set to true, then a button is show on the bottom. If the `startup_page` is higher than 1. Defaults to `Vis mer innhold`.
    */
   load_button_text?: string;
 

package/components/pagination/Pagination.js

@@ -205,13 +205,13 @@ var PaginationInstance = function (_React$PureComponent2) {
           var pageNumber = _ref.pageNumber;
           return pageNumber === currentPage;
         })) === null || _items$find === void 0 ? void 0 : _items$find.content;
-        return React.createElement(React.Fragment, null, this.context.pagination.mode === 'infinity' && typeof children !== 'function' && children, React.createElement("div", mainParams, React.createElement(PaginationBar, {
+        return React.createElement("div", mainParams, React.createElement(PaginationBar, {
           contentRef: this._contentRef
         }, children), items.length > 0 && React.createElement(PaginationContent, {
           ref: this._contentRef
         }, content || React.createElement(PaginationIndicator, {
           indicator_element: indicator_element || fallback_element
-        }))));
+        })));
       }
 
       return _InfinityScroller || (_InfinityScroller = React.createElement(InfinityScroller, null));

package/components/skeleton/SkeletonHelper.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { SkeletonShow } from './Skeleton';
 export interface AutoSizeProps {
   __element?: React.ReactNode;
   children?: React.ReactNode;
@@ -20,7 +21,7 @@ export interface SkeletonContextProps {
 }
 export const createSkeletonClass: (
   method: 'shape' | 'font',
-  skeleton: boolean,
+  skeleton: SkeletonShow,
   context?: SkeletonContextProps
 ) => React.HTMLProps<HTMLElement>;
 export interface skeletonDOMAttributesContext {

package/components/step-indicator/StepIndicatorTriggerButton.js

@@ -64,6 +64,8 @@ var StepIndicatorTriggerButton = function (_React$PureComponent) {
     key: "componentDidMount",
     value: function componentDidMount() {
       this._heightAnim.setElement(this._buttonRef.current);
+
+      this._prevStep = this.context.activeStep;
     }
   }, {
     key: "componentWillUnmount",
@@ -76,12 +78,10 @@ var StepIndicatorTriggerButton = function (_React$PureComponent) {
       if (this._prevStep !== this.context.activeStep) {
         var toHeight = this._heightAnim.getUnknownHeight();
 
-        this._heightAnim.adjustFrom(height);
-
         this._heightAnim.adjustTo(height, toHeight);
-      }
 
-      this._prevStep = this.context.activeStep;
+        this._prevStep = this.context.activeStep;
+      }
     }
   }, {
     key: "render",

package/components/tag/Tag.js

@@ -1,28 +1,16 @@
-import "core-js/modules/es.object.keys.js";
-import "core-js/modules/es.symbol.js";
-import "core-js/modules/es.array.filter.js";
-import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/es.object.get-own-property-descriptor.js";
-import "core-js/modules/web.dom-collections.for-each.js";
-import "core-js/modules/es.object.get-own-property-descriptors.js";
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 
 var _IconPrimary;
 
 var _excluded = ["className", "skeleton", "children", "text", "onClick", "onDelete", "omitOnKeyUpDeleteEvent"];
-
-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 classnames from 'classnames';
 import IconPrimary from '../icon-primary/IconPrimary';
 import Button from '../button/Button';
 import Context from '../../shared/Context';
-import { warn, extendPropsWithContext } from '../../shared/component-helper';
+import { warn } from '../../shared/component-helper';
+import { usePropsWithContext } from '../../shared/hooks';
 import TagGroup from './TagGroup';
 import { TagGroupContext } from './TagContext';
 export var defaultProps = {
@@ -42,15 +30,15 @@ var Tag = function Tag(localProps) {
   var context = React.useContext(Context);
   var tagGroupContext = React.useContext(TagGroupContext);
 
-  var _extendPropsWithConte = extendPropsWithContext(_objectSpread(_objectSpread({}, defaultProps), localProps), defaultProps, context === null || context === void 0 ? void 0 : (_context$translation = context.translation) === null || _context$translation === void 0 ? void 0 : _context$translation.Tag, context === null || context === void 0 ? void 0 : context.Tag, tagGroupContext),
-      className = _extendPropsWithConte.className,
-      skeleton = _extendPropsWithConte.skeleton,
-      children = _extendPropsWithConte.children,
-      text = _extendPropsWithConte.text,
-      onClick = _extendPropsWithConte.onClick,
-      onDelete = _extendPropsWithConte.onDelete,
-      omitOnKeyUpDeleteEvent = _extendPropsWithConte.omitOnKeyUpDeleteEvent,
-      props = _objectWithoutProperties(_extendPropsWithConte, _excluded);
+  var _usePropsWithContext = usePropsWithContext(localProps, defaultProps, context === null || context === void 0 ? void 0 : (_context$translation = context.translation) === null || _context$translation === void 0 ? void 0 : _context$translation.Tag, context === null || context === void 0 ? void 0 : context.Tag, tagGroupContext),
+      className = _usePropsWithContext.className,
+      skeleton = _usePropsWithContext.skeleton,
+      children = _usePropsWithContext.children,
+      text = _usePropsWithContext.text,
+      onClick = _usePropsWithContext.onClick,
+      onDelete = _usePropsWithContext.onDelete,
+      omitOnKeyUpDeleteEvent = _usePropsWithContext.omitOnKeyUpDeleteEvent,
+      props = _objectWithoutProperties(_usePropsWithContext, _excluded);
 
   var content = text || children;
   var isClickable = !!onClick;
@@ -68,13 +56,15 @@ var Tag = function Tag(localProps) {
     }
   };
 
+  var buttonAttr = props;
+
   if (!isInteractive) {
-    props.element = 'span';
-    props.type = '';
+    buttonAttr.element = 'span';
+    buttonAttr.type = '';
   }
 
   if (isRemovable) {
-    props.icon = getDeleteIcon();
+    buttonAttr.icon = getDeleteIcon();
   }
 
   if (!tagGroupContext) {
@@ -93,7 +83,7 @@ var Tag = function Tag(localProps) {
     onKeyUp: isRemovable && !omitOnKeyUpDeleteEvent ? function (e) {
       return handleKeyUp(e);
     } : undefined
-  }, props));
+  }, buttonAttr));
 
   function getDeleteIcon() {
     return _IconPrimary || (_IconPrimary = React.createElement(IconPrimary, {

package/components/tag/Tag.tsx

@@ -3,15 +3,14 @@ import classnames from 'classnames'
 
 // Components
 import IconPrimary, { IconPrimaryIcon } from '../icon-primary/IconPrimary'
-import Button from '../button/Button'
+import Button, { ButtonProps } from '../button/Button'
 
 // Shared
 import Context from '../../shared/Context'
-import { ISpacingProps, SkeletonTypes } from '../../shared/interfaces'
-import {
-  warn,
-  extendPropsWithContext,
-} from '../../shared/component-helper'
+import { ISpacingProps } from '../../shared/interfaces'
+import { SkeletonShow } from '../skeleton/Skeleton'
+import { warn } from '../../shared/component-helper'
+import { usePropsWithContext } from '../../shared/hooks'
 
 // Internal
 import TagGroup from './TagGroup'
@@ -40,7 +39,7 @@ export interface TagProps {
    * Skeleton should be applied when loading content
    * Default: null
    */
-  skeleton?: SkeletonTypes
+  skeleton?: SkeletonShow
 
   /**
    * The content of the tag element, can be a string or a React Element. Will be overwritten by text prop
@@ -93,8 +92,8 @@ const Tag = (localProps: TagProps & ISpacingProps) => {
     onDelete,
     omitOnKeyUpDeleteEvent,
     ...props
-  } = extendPropsWithContext(
-    { ...defaultProps, ...localProps },
+  } = usePropsWithContext(
+    localProps,
     defaultProps,
     context?.translation?.Tag,
     context?.Tag,
@@ -125,13 +124,16 @@ const Tag = (localProps: TagProps & ISpacingProps) => {
     }
   }
 
+  const buttonAttr: typeof props & Pick<ButtonProps, 'element' | 'type'> =
+    props
+
   if (!isInteractive) {
-    props.element = 'span'
-    props.type = ''
+    buttonAttr.element = 'span'
+    buttonAttr.type = ''
   }
 
   if (isRemovable) {
-    props.icon = getDeleteIcon()
+    buttonAttr.icon = getDeleteIcon()
   }
 
   if (!tagGroupContext) {
@@ -155,7 +157,7 @@ const Tag = (localProps: TagProps & ISpacingProps) => {
           ? (e) => handleKeyUp(e)
           : undefined
       }
-      {...props}
+      {...buttonAttr}
     />
   )
 

package/components/tag/TagGroup.js

@@ -1,26 +1,13 @@
-import "core-js/modules/es.object.keys.js";
-import "core-js/modules/es.symbol.js";
-import "core-js/modules/es.array.filter.js";
-import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/es.object.get-own-property-descriptor.js";
-import "core-js/modules/web.dom-collections.for-each.js";
-import "core-js/modules/es.object.get-own-property-descriptors.js";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["label", "className", "children"];
 import "core-js/modules/es.array.map.js";
-
-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 classnames from 'classnames';
 import { createSpacingClasses } from '../space/SpacingHelper';
 import Context from '../../shared/Context';
-import { extendPropsWithContext } from '../../shared/component-helper';
+import { usePropsWithContext } from '../../shared/hooks';
 import { TagGroupContext } from './TagContext';
 export var defaultProps = {
   label: null,
@@ -28,14 +15,14 @@ export var defaultProps = {
   children: null
 };
 
-function TagGroup(localProps) {
+var TagGroup = function TagGroup(localProps) {
   var context = React.useContext(Context);
 
-  var _extendPropsWithConte = extendPropsWithContext(_objectSpread(_objectSpread({}, defaultProps), localProps), defaultProps, context === null || context === void 0 ? void 0 : context.TagGroup),
-      label = _extendPropsWithConte.label,
-      className = _extendPropsWithConte.className,
-      childrenProp = _extendPropsWithConte.children,
-      props = _objectWithoutProperties(_extendPropsWithConte, _excluded);
+  var _usePropsWithContext = usePropsWithContext(localProps, defaultProps, context === null || context === void 0 ? void 0 : context.TagGroup),
+      label = _usePropsWithContext.label,
+      className = _usePropsWithContext.className,
+      childrenProp = _usePropsWithContext.children,
+      props = _objectWithoutProperties(_usePropsWithContext, _excluded);
 
   var children = childrenProp;
 
@@ -48,13 +35,13 @@ function TagGroup(localProps) {
   var spacingClasses = createSpacingClasses(props);
   return React.createElement(TagGroupContext.Provider, {
     value: props
-  }, React.createElement("div", _extends({
+  }, React.createElement("span", _extends({
     className: classnames('dnb-tag__group', spacingClasses, className),
     "data-testid": "tag-group"
   }, props), React.createElement("span", {
     "data-testid": "tag-group-label",
     className: "dnb-sr-only"
   }, label), children));
-}
+};
 
 export default TagGroup;

package/components/tag/TagGroup.tsx

@@ -7,7 +7,7 @@ import { createSpacingClasses } from '../space/SpacingHelper'
 // Shared
 import Context from '../../shared/Context'
 import { ISpacingProps } from '../../shared/interfaces'
-import { extendPropsWithContext } from '../../shared/component-helper'
+import { usePropsWithContext } from '../../shared/hooks'
 import { TagGroupContext } from './TagContext'
 
 export interface TagGroupProps {
@@ -15,7 +15,7 @@ export interface TagGroupProps {
    * Aria label to describe the tag group
    * Default: null
    */
-  label: string
+  label: React.ReactNode
 
   /**
    * Custom className on the component root
@@ -36,7 +36,7 @@ export const defaultProps = {
   children: null,
 }
 
-function TagGroup(localProps: TagGroupProps & ISpacingProps) {
+const TagGroup = (localProps: TagGroupProps & ISpacingProps) => {
   // Every component should have a context
   const context = React.useContext(Context)
   // Extract additional props from global context
@@ -45,11 +45,7 @@ function TagGroup(localProps: TagGroupProps & ISpacingProps) {
     className,
     children: childrenProp,
     ...props
-  } = extendPropsWithContext(
-    { ...defaultProps, ...localProps },
-    defaultProps,
-    context?.TagGroup
-  )
+  } = usePropsWithContext(localProps, defaultProps, context?.TagGroup)
 
   let children = childrenProp
 
@@ -63,7 +59,7 @@ function TagGroup(localProps: TagGroupProps & ISpacingProps) {
 
   return (
     <TagGroupContext.Provider value={props}>
-      <div
+      <span
         className={classnames('dnb-tag__group', spacingClasses, className)}
         data-testid="tag-group"
         {...props}
@@ -72,7 +68,7 @@ function TagGroup(localProps: TagGroupProps & ISpacingProps) {
           {label}
         </span>
         {children}
-      </div>
+      </span>
     </TagGroupContext.Provider>
   )
 }

package/components/timeline/Timeline.js

@@ -1,28 +1,13 @@
-import "core-js/modules/es.object.keys.js";
-import "core-js/modules/es.symbol.js";
-import "core-js/modules/es.array.filter.js";
-import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/es.object.get-own-property-descriptor.js";
-import "core-js/modules/web.dom-collections.for-each.js";
-import "core-js/modules/es.object.get-own-property-descriptors.js";
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["className", "skeleton", "data", "children"];
 import "core-js/modules/es.array.map.js";
-import "core-js/modules/es.function.name.js";
-
-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 classnames from 'classnames';
 import { createSpacingClasses } from '../space/SpacingHelper';
 import Context from '../../shared/Context';
-import { extendPropsWithContext } from '../../shared/component-helper';
+import { usePropsWithContext } from '../../shared/hooks';
 import TimelineItem from './TimelineItem';
-export * from './TimelineItem';
 export var defaultProps = {
   className: null,
   skeleton: false,
@@ -30,27 +15,38 @@ export var defaultProps = {
   children: null
 };
 
-function Timeline(localProps) {
+var Timeline = function Timeline(localProps) {
   var context = React.useContext(Context);
 
-  var _extendPropsWithConte = extendPropsWithContext(_objectSpread(_objectSpread({}, defaultProps), localProps), defaultProps, context === null || context === void 0 ? void 0 : context.Timeline),
-      className = _extendPropsWithConte.className,
-      skeleton = _extendPropsWithConte.skeleton,
-      data = _extendPropsWithConte.data,
-      childrenItems = _extendPropsWithConte.children,
-      props = _objectWithoutProperties(_extendPropsWithConte, _excluded);
+  var _usePropsWithContext = usePropsWithContext(localProps, defaultProps, context === null || context === void 0 ? void 0 : context.Timeline),
+      className = _usePropsWithContext.className,
+      skeleton = _usePropsWithContext.skeleton,
+      data = _usePropsWithContext.data,
+      childrenProp = _usePropsWithContext.children,
+      props = _objectWithoutProperties(_usePropsWithContext, _excluded);
 
   var spacingClasses = createSpacingClasses(props);
+  var children = childrenProp;
+
+  if (Array.isArray(childrenProp)) {
+    children = childrenProp.map(function (child, i) {
+      return React.cloneElement(child, {
+        skeleton: skeleton,
+        key: i
+      });
+    });
+  }
+
   return React.createElement("div", _extends({
     className: classnames('dnb-timeline', spacingClasses, className),
     "data-testid": "timeline"
-  }, props), data === null || data === void 0 ? void 0 : data.map(function (timelineItem) {
+  }, props), data === null || data === void 0 ? void 0 : data.map(function (timelineItem, i) {
     return React.createElement(TimelineItem, _extends({
-      key: timelineItem.name,
+      key: i,
       skeleton: skeleton
     }, timelineItem));
-  }), childrenItems);
-}
+  }), children);
+};
 
 Timeline.Item = TimelineItem;
 export { TimelineItem };

package/components/timeline/Timeline.tsx

@@ -6,14 +6,13 @@ import { createSpacingClasses } from '../space/SpacingHelper'
 
 // Shared
 import Context from '../../shared/Context'
-import { ISpacingProps, SkeletonTypes } from '../../shared/interfaces'
-import { extendPropsWithContext } from '../../shared/component-helper'
+import { ISpacingProps } from '../../shared/interfaces'
+import { SkeletonShow } from '../skeleton/Skeleton'
+import { usePropsWithContext } from '../../shared/hooks'
 
 // Internal
 import TimelineItem, { TimelineItemProps } from './TimelineItem'
 
-export * from './TimelineItem'
-
 export interface TimelineProps {
   /**
    * Custom className on the component root
@@ -25,7 +24,7 @@ export interface TimelineProps {
    * Skeleton should be applied when loading content
    * Default: null
    */
-  skeleton?: SkeletonTypes
+  skeleton?: SkeletonShow
 
   /**
    * Pass in a list of your events as objects of timelineitem, to render them as timelineitems.
@@ -37,7 +36,9 @@ export interface TimelineProps {
    * The content of the component. Can be used instead of prop "data".
    * Default: null
    */
-  children?: TimelineItemProps[]
+  children?:
+    | React.ReactElement<TimelineItemProps>[]
+    | React.ReactElement<TimelineItemProps>
 }
 
 export const defaultProps = {
@@ -47,7 +48,7 @@ export const defaultProps = {
   children: null,
 }
 
-function Timeline(localProps: TimelineProps & ISpacingProps) {
+const Timeline = (localProps: TimelineProps & ISpacingProps) => {
   // Every component should have a context
   const context = React.useContext(Context)
   // Extract additional props from global context
@@ -55,31 +56,34 @@ function Timeline(localProps: TimelineProps & ISpacingProps) {
     className,
     skeleton,
     data,
-    children: childrenItems,
+    children: childrenProp,
     ...props
-  } = extendPropsWithContext(
-    { ...defaultProps, ...localProps },
-    defaultProps,
-    context?.Timeline
-  )
+  } = usePropsWithContext(localProps, defaultProps, context?.Timeline)
 
   const spacingClasses = createSpacingClasses(props)
 
+  let children = childrenProp
+
+  if (Array.isArray(childrenProp)) {
+    children = childrenProp.map((child, i) => {
+      return React.cloneElement(child, {
+        skeleton: skeleton,
+        key: i,
+      })
+    })
+  }
+
   return (
     <div
       className={classnames('dnb-timeline', spacingClasses, className)}
       data-testid="timeline"
       {...props}
     >
-      {data?.map((timelineItem: TimelineItemProps) => (
-        <TimelineItem
-          key={timelineItem.name}
-          skeleton={skeleton}
-          {...timelineItem}
-        />
+      {data?.map((timelineItem, i) => (
+        <TimelineItem key={i} skeleton={skeleton} {...timelineItem} />
       ))}
 
-      {childrenItems}
+      {children}
     </div>
   )
 }