@dnb/eufemia 9.19.0 → 9.20.0

package/es/components/timeline/Timeline.js

@@ -1,19 +1,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["className", "skeleton", "data", "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 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 const defaultProps = {
   className: null,
   skeleton: false,
@@ -21,27 +14,38 @@ export const defaultProps = {
   children: null
 };
 
-function Timeline(localProps) {
+const Timeline = localProps => {
   const context = React.useContext(Context);
 
-  const _extendPropsWithConte = extendPropsWithContext(_objectSpread(_objectSpread({}, defaultProps), localProps), defaultProps, context === null || context === void 0 ? void 0 : context.Timeline),
+  const _usePropsWithContext = usePropsWithContext(localProps, defaultProps, context === null || context === void 0 ? void 0 : context.Timeline),
         {
     className,
     skeleton,
     data,
-    children: childrenItems
-  } = _extendPropsWithConte,
-        props = _objectWithoutProperties(_extendPropsWithConte, _excluded);
+    children: childrenProp
+  } = _usePropsWithContext,
+        props = _objectWithoutProperties(_usePropsWithContext, _excluded);
 
   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 React.createElement("div", _extends({
     className: classnames('dnb-timeline', spacingClasses, className),
     "data-testid": "timeline"
-  }, props), data === null || data === void 0 ? void 0 : data.map(timelineItem => React.createElement(TimelineItem, _extends({
-    key: timelineItem.name,
+  }, props), data === null || data === void 0 ? void 0 : data.map((timelineItem, i) => React.createElement(TimelineItem, _extends({
+    key: i,
     skeleton: skeleton
-  }, timelineItem))), childrenItems);
-}
+  }, timelineItem))), children);
+};
 
 Timeline.Item = TimelineItem;
 export { TimelineItem };

package/es/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>
   )
 }

package/es/components/timeline/TimelineItem.js

@@ -1,15 +1,9 @@
 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;
 
 const _excluded = ["icon", "iconAlt", "name", "date", "infoMessage", "state", "skeleton"];
-
-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';
@@ -19,7 +13,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';
 const defaultProps = {
   icon: null,
   iconAlt: null,
@@ -29,7 +23,8 @@ const defaultProps = {
   state: null,
   skeleton: false
 };
-export default function TimelineItem(localProps) {
+
+const TimelineItem = localProps => {
   var _span2, _span3, _span4, _FormStatus;
 
   const context = React.useContext(Context);
@@ -43,7 +38,7 @@ export default function TimelineItem(localProps) {
     }
   } = context;
 
-  const _extendPropsWithConte = extendPropsWithContext(_objectSpread(_objectSpread({}, defaultProps), localProps), defaultProps, context === null || context === void 0 ? void 0 : context.TimelineItem),
+  const _usePropsWithContext = usePropsWithContext(localProps, defaultProps, context === null || context === void 0 ? void 0 : context.TimelineItem),
         {
     icon,
     iconAlt,
@@ -52,8 +47,8 @@ export default function TimelineItem(localProps) {
     infoMessage,
     state,
     skeleton
-  } = _extendPropsWithConte,
-        props = _objectWithoutProperties(_extendPropsWithConte, _excluded);
+  } = _usePropsWithContext,
+        props = _objectWithoutProperties(_usePropsWithContext, _excluded);
 
   const stateIsCompleted = state === 'completed';
   const stateIsCurrent = state === 'current';
@@ -108,4 +103,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/es/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

package/es/elements/Div.d.ts

@@ -13,10 +13,10 @@ export type DivTop = string | number | boolean;
 export type DivRight = string | number | boolean;
 export type DivBottom = string | number | boolean;
 export type DivLeft = string | number | boolean;
-
 /**
  * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
  */
+
 export interface DivProps extends React.HTMLProps<HTMLElement> {
   space?: DivSpace;
   top?: DivTop;

package/es/elements/P.d.ts

@@ -25,7 +25,8 @@ export type PSize =
  * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
  */
 
-export interface PProps extends React.HTMLProps<HTMLElement> {
+export interface PProps
+  extends Omit<React.HTMLProps<HTMLElement>, 'size'> {
   space?: PSpace;
   top?: PTop;
   right?: PRight;

package/es/shared/AnimateHeight.js

@@ -56,6 +56,15 @@ export default class AnimateHeight {
     }
   }
 
+  _emitTransitionEnd() {
+    try {
+      const event = new CustomEvent('transitionend');
+      this.elem.dispatchEvent(event);
+    } catch (e) {
+      warn(e);
+    }
+  }
+
   setElement(elem, container = null) {
     var _this$elem;
 
@@ -140,25 +149,18 @@ export default class AnimateHeight {
   start(fromHeight, toHeight, {
     animate = true
   } = {}) {
-    var _this$opts;
+    var _window, _window$location, _window$location$href, _this$opts;
 
-    try {
-      if (window.location.href.includes('data-visual-test')) {
-        animate = false;
-      }
-    } catch (e) {}
+    if ((_window = window) !== null && _window !== void 0 && (_window$location = _window.location) !== null && _window$location !== void 0 && (_window$location$href = _window$location.href) !== null && _window$location$href !== void 0 && _window$location$href.includes('data-visual-test')) {
+      animate = false;
+    }
 
-    if (animate === false || ((_this$opts = this.opts) === null || _this$opts === void 0 ? void 0 : _this$opts.animate) === false) {
+    if (fromHeight === toHeight || animate === false || ((_this$opts = this.opts) === null || _this$opts === void 0 ? void 0 : _this$opts.animate) === false) {
       this.elem.style.height = `${toHeight}px`;
 
       this._callOnStart();
 
-      try {
-        const event = new CustomEvent('transitionend');
-        this.elem.dispatchEvent(event);
-      } catch (e) {
-        warn(e);
-      }
+      this._emitTransitionEnd();
 
       return;
     }

package/es/shared/helpers.js

@@ -317,8 +317,15 @@ export async function copyToClipboard(string) {
 
   return success;
 }
-export const warn = (...e) => {
+export const warn = (...params) => {
   if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && typeof console !== 'undefined' && typeof console.log === 'function') {
-    console.log('Eufemia:', ...e);
+    const isBrowser = typeof window !== 'undefined';
+
+    if (isBrowser) {
+      const styles = [`padding: 0.125rem 0.5rem ${IS_SAFARI ? '' : '0'}`, 'font-weight: bold', 'color: #00343E', 'background: #A5E1D2'].join(';');
+      console.log('%cEufemia', styles, ...params);
+    } else {
+      console.log('Eufemia:', ...params);
+    }
   }
 };

package/es/shared/hooks/index.js

@@ -0,0 +1 @@
+export { usePropsWithContext } from './usePropsWithContext';

package/es/shared/hooks/index.ts

@@ -0,0 +1 @@
+export { usePropsWithContext } from './usePropsWithContext'

package/es/shared/hooks/usePropsWithContext.js

@@ -0,0 +1,26 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+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; }
+
+function usePropsWithContext(props, defaults = {}, ...contexts) {
+  const context = contexts.reduce((acc, cur) => {
+    if (cur) {
+      acc = _objectSpread(_objectSpread({}, acc), cur);
+    }
+
+    return acc;
+  }, {});
+  props = _objectSpread(_objectSpread({}, defaults), props);
+  return _objectSpread(_objectSpread({}, props), Object.entries(context).reduce((acc, [key, value]) => {
+    if (typeof props[key] !== 'undefined' && props[key] === defaults[key]) {
+      acc[key] = value;
+    }
+
+    return acc;
+  }, {}));
+}
+
+export { usePropsWithContext };
+export default usePropsWithContext;

package/es/shared/hooks/usePropsWithContext.ts

@@ -0,0 +1,45 @@
+export type DefaultsProps = Record<string, unknown>
+export type Contexts = Array<Record<string, unknown>>
+
+/**
+ * Extends props from a given context
+ * but give the context second priority only
+ *
+ * @param props object of component properties
+ * @param defaults object of potential default values
+ * @param contexts the rest of all context to merge
+ * @returns merged properties
+ */
+function usePropsWithContext<Props>(
+  props: Props,
+  defaults: DefaultsProps = {},
+  ...contexts: Contexts
+) {
+  const context = contexts.reduce((acc, cur) => {
+    if (cur) {
+      acc = { ...acc, ...cur }
+    }
+    return acc
+  }, {})
+
+  props = { ...defaults, ...props }
+
+  return {
+    ...props,
+    ...Object.entries(context).reduce((acc, [key, value]) => {
+      if (
+        // check if a prop of the same name exists
+        typeof props[key] !== 'undefined' &&
+        // and if it was NOT defined as a component prop, because its still the same as the defaults
+        props[key] === defaults[key]
+      ) {
+        // then we use the context value
+        acc[key] = value
+      }
+      return acc
+    }, {}),
+  }
+}
+
+export { usePropsWithContext }
+export default usePropsWithContext

package/es/shared/interfaces.tsx

@@ -10,5 +10,3 @@ export interface ISpacingElementProps {
 }
 
 export type SpaceTypes = string | boolean | number
-
-export type SkeletonTypes = string | boolean

package/es/style/dnb-ui-components.css

@@ -1072,7 +1072,8 @@
       .dnb-avatar__group .dnb-avatar--size-x-large {
         margin-left: -1.5rem; }
       .dnb-avatar__group .dnb-avatar:nth-of-type(2) {
-        margin-left: 0; }
+        margin-left: 0;
+        border-left: none; }
     .dnb-avatar__group--elements-left {
       display: -webkit-inline-box;
       display: -ms-inline-flexbox;
@@ -1083,6 +1084,8 @@
       -webkit-box-pack: center;
           -ms-flex-pack: center;
               justify-content: center;
+      -ms-flex-negative: 0;
+          flex-shrink: 0;
       color: #737373;
       color: var(--color-black-55); }
       .dnb-avatar__group--elements-left--size-small {