@dnb/eufemia 9.19.0 → 9.20.0

package/esm/components/timeline/TimelineItem.js

@@ -1,23 +1,10 @@
-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 _span;
 
 var _excluded = ["icon", "iconAlt", "name", "date", "infoMessage", "state", "skeleton"];
 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 FormStatus from '../form-status/FormStatus';
@@ -27,7 +14,7 @@ import checkIcon from '../../icons/check';
 import calendarIcon from '../../icons/calendar';
 import pinIcon from '../../icons/pin';
 import Context from '../../shared/Context';
-import { extendPropsWithContext } from '../../shared/component-helper';
+import { usePropsWithContext } from '../../shared/hooks';
 var defaultProps = {
   icon: null,
   iconAlt: null,
@@ -37,7 +24,8 @@ var defaultProps = {
   state: null,
   skeleton: false
 };
-export default function TimelineItem(localProps) {
+
+var TimelineItem = function TimelineItem(localProps) {
   var _span2, _span3, _span4, _FormStatus;
 
   var context = React.useContext(Context);
@@ -46,15 +34,15 @@ export default function TimelineItem(localProps) {
       alt_label_current = _context$translation$.alt_label_current,
       alt_label_upcoming = _context$translation$.alt_label_upcoming;
 
-  var _extendPropsWithConte = extendPropsWithContext(_objectSpread(_objectSpread({}, defaultProps), localProps), defaultProps, context === null || context === void 0 ? void 0 : context.TimelineItem),
-      icon = _extendPropsWithConte.icon,
-      iconAlt = _extendPropsWithConte.iconAlt,
-      name = _extendPropsWithConte.name,
-      date = _extendPropsWithConte.date,
-      infoMessage = _extendPropsWithConte.infoMessage,
-      state = _extendPropsWithConte.state,
-      skeleton = _extendPropsWithConte.skeleton,
-      props = _objectWithoutProperties(_extendPropsWithConte, _excluded);
+  var _usePropsWithContext = usePropsWithContext(localProps, defaultProps, context === null || context === void 0 ? void 0 : context.TimelineItem),
+      icon = _usePropsWithContext.icon,
+      iconAlt = _usePropsWithContext.iconAlt,
+      name = _usePropsWithContext.name,
+      date = _usePropsWithContext.date,
+      infoMessage = _usePropsWithContext.infoMessage,
+      state = _usePropsWithContext.state,
+      skeleton = _usePropsWithContext.skeleton,
+      props = _objectWithoutProperties(_usePropsWithContext, _excluded);
 
   var stateIsCompleted = state === 'completed';
   var stateIsCurrent = state === 'current';
@@ -109,4 +97,6 @@ export default function TimelineItem(localProps) {
     "data-testid": "timeline-item",
     "aria-current": stateIsCurrent ? 'step' : undefined
   }, props), React.createElement(TimelineItemLabel, null), React.createElement(TimelineItemContent, null));
-}
+};
+
+export default TimelineItem;

package/esm/components/timeline/TimelineItem.tsx

@@ -13,8 +13,8 @@ import pinIcon from '../../icons/pin'
 
 // Shared
 import Context from '../../shared/Context'
-import { SkeletonTypes } from '../../shared/interfaces'
-import { extendPropsWithContext } from '../../shared/component-helper'
+import { SkeletonShow } from '../skeleton/Skeleton'
+import { usePropsWithContext } from '../../shared/hooks'
 
 export interface TimelineItemProps {
   /**
@@ -32,7 +32,7 @@ export interface TimelineItemProps {
   /**
    * Text displaying the name of the timeline item.
    */
-  name: React.ReactNode
+  name: React.ReactNode & string
 
   /**
    * Text displaying the date of the timeline item.
@@ -54,7 +54,7 @@ export interface TimelineItemProps {
    * Skeleton should be applied when loading content
    * Default: null
    */
-  skeleton?: SkeletonTypes
+  skeleton?: SkeletonShow
 }
 
 const defaultProps = {
@@ -67,7 +67,7 @@ const defaultProps = {
   skeleton: false,
 }
 
-export default function TimelineItem(localProps: TimelineItemProps) {
+const TimelineItem = (localProps: TimelineItemProps) => {
   // Every component should have a context
   const context = React.useContext(Context)
   const {
@@ -90,11 +90,7 @@ export default function TimelineItem(localProps: TimelineItemProps) {
     state,
     skeleton,
     ...props
-  } = extendPropsWithContext(
-    { ...defaultProps, ...localProps },
-    defaultProps,
-    context?.TimelineItem
-  )
+  } = usePropsWithContext(localProps, defaultProps, context?.TimelineItem)
 
   const stateIsCompleted = state === 'completed'
   const stateIsCurrent = state === 'current'
@@ -191,3 +187,5 @@ export default function TimelineItem(localProps: TimelineItemProps) {
     </div>
   )
 }
+
+export default TimelineItem