@dnb/eufemia 9.19.0 → 9.20.0

package/es/components/button/Button.d.ts

@@ -1,15 +1,15 @@
 import * as React from 'react';
+import { SkeletonShow } from '../skeleton/Skeleton';
+import { IconPrimaryIcon } from '../icon-primary/IconPrimary';
 export type ButtonText = string | React.ReactNode;
 export type ButtonVariant =
   | 'primary'
   | 'secondary'
   | 'tertiary'
-  | 'signal';
+  | 'signal'
+  | 'unstyled';
 export type ButtonSize = 'default' | 'small' | 'medium' | 'large';
-export type ButtonIcon =
-  | string
-  | React.ReactNode
-  | ((...args: any[]) => any);
+export type ButtonIcon = IconPrimaryIcon;
 export type ButtonIconPosition = 'left' | 'right' | 'top';
 export type ButtonIconSize = string | number;
 export type ButtonTooltip =
@@ -26,7 +26,7 @@ export type ButtonTo = string | any | ((...args: any[]) => any);
 export type ButtonWrap = string | boolean;
 export type ButtonBounding = string | boolean;
 export type ButtonStretch = string | boolean;
-export type ButtonSkeleton = string | boolean;
+export type ButtonSkeleton = SkeletonShow;
 export type ButtonDisabled = string | boolean;
 export type ButtonChildren =
   | string
@@ -70,7 +70,11 @@ export type ButtonOnClick = string | ((...args: any[]) => any);
  * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
  */
 
-export interface ButtonProps extends React.HTMLProps<HTMLElement> {
+export interface ButtonProps
+  extends Omit<
+    React.HTMLProps<HTMLElement>,
+    'disabled' | 'size' | 'title' | 'wrap'
+  > {
   /**
    * The content of the button can be a string or a React Element.
    */

package/es/components/icon-primary/IconPrimary.d.ts

@@ -53,7 +53,8 @@ export type IconPrimaryChildren =
  * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
  */
 
-export interface IconPrimaryProps extends React.HTMLProps<HTMLElement> {
+export interface IconPrimaryProps
+  extends Omit<React.HTMLProps<HTMLElement>, 'size'> {
   /**
    * <em>(required)</em> a React SVG Component or the icon name (in case we use `IconPrimary` or `dnb-icon-primary`).
    */

package/es/components/info-card/InfoCard.js

@@ -19,7 +19,7 @@ import { lightbulb_medium as LightbulbIcon } from '../../icons';
 import { createSpacingClasses } from '../space/SpacingHelper';
 import { createSkeletonClass } from '../skeleton/SkeletonHelper';
 import Context from '../../shared/Context';
-import { extendPropsWithContext } from '../../shared/component-helper';
+import { usePropsWithContext } from '../../shared/hooks';
 export const defaultProps = {
   alt: null,
   centered: false,
@@ -37,12 +37,12 @@ export const defaultProps = {
   acceptButtonAttributes: null
 };
 
-function InfoCard(localProps) {
+const InfoCard = localProps => {
   var _IconPrimary;
 
   const context = React.useContext(Context);
 
-  const _extendPropsWithConte = extendPropsWithContext(_objectSpread(_objectSpread({}, defaultProps), localProps)),
+  const _usePropsWithContext = usePropsWithContext(_objectSpread(_objectSpread({}, defaultProps), localProps)),
         {
     alt,
     centered,
@@ -59,8 +59,8 @@ function InfoCard(localProps) {
     acceptButtonText,
     closeButtonAttributes,
     acceptButtonAttributes
-  } = _extendPropsWithConte,
-        props = _objectWithoutProperties(_extendPropsWithConte, _excluded);
+  } = _usePropsWithContext,
+        props = _objectWithoutProperties(_usePropsWithContext, _excluded);
 
   const skeletonClasses = createSkeletonClass('shape', skeleton, context);
   const spacingClasses = createSpacingClasses(props);
@@ -93,14 +93,14 @@ function InfoCard(localProps) {
       className: 'dnb-info-card--buttons' + (centered ? " dnb-info-card--buttons-centered" : "")
     }, !acceptButtonIsHidden && React.createElement(Button, _extends({
       type: "button",
-      "data-testid": "into-card-accept-button",
+      "data-testid": "info-card-accept-button",
       variant: "secondary",
       right: !centered && 'small',
       on_click: onAccept,
       text: acceptButtonText
     }, acceptButtonAttributes)), !closeButtonIsHidden && React.createElement(Button, _extends({
       type: "button",
-      "data-testid": "into-card-close-button",
+      "data-testid": "info-card-close-button",
       variant: "tertiary",
       top: centered && 'small',
       on_click: onClose,
@@ -130,6 +130,6 @@ function InfoCard(localProps) {
       "data-testid": "info-card-icon"
     }));
   }
-}
+};
 
 export default InfoCard;

package/es/components/info-card/InfoCard.tsx

@@ -15,16 +15,17 @@ import { lightbulb_medium as LightbulbIcon } from '../../icons'
 // Shared
 import { createSpacingClasses } from '../space/SpacingHelper'
 import { createSkeletonClass } from '../skeleton/SkeletonHelper'
+import { SkeletonShow } from '../skeleton/Skeleton'
 import Context from '../../shared/Context'
-import { ISpacingProps, SkeletonTypes } from '../../shared/interfaces'
-import { extendPropsWithContext } from '../../shared/component-helper'
+import { ISpacingProps } from '../../shared/interfaces'
+import { usePropsWithContext } from '../../shared/hooks'
 
 export interface InfoCardProps {
   /**
    * Used in combination with `src` to provide an alt attribute for the `img` element.
    * Default: null
    */
-  alt?: string
+  alt?: React.ReactNode
   /**
    * Aligns the content to center, rather than left
    * Default: false
@@ -49,7 +50,7 @@ export interface InfoCardProps {
    * Skeleton should be applied when loading content
    * Default: null
    */
-  skeleton?: SkeletonTypes
+  skeleton?: SkeletonShow
   /**
    * Specifies the path to the image
    * Default: null
@@ -59,12 +60,12 @@ export interface InfoCardProps {
    * Image src, will replace the 'icon' with the image
    * Default: null
    */
-  text: string
+  text: React.ReactNode
   /**
    * Component title
    * Default: null
    */
-  title?: string
+  title?: React.ReactNode
   /**
    * Is called when the close button is clicked
    * Default: null
@@ -74,7 +75,7 @@ export interface InfoCardProps {
    * The text of the close button.
    * Default: null
    */
-  closeButtonText?: string
+  closeButtonText?: React.ReactNode
   /**
    * Is called when the accept button is clicked
    * Default: null
@@ -84,7 +85,7 @@ export interface InfoCardProps {
    * The text of the accept button.
    * Default: null
    */
-  acceptButtonText?: string
+  acceptButtonText?: React.ReactNode
   /**
    * Additional attributes for the close button.
    * Default: null
@@ -114,7 +115,7 @@ export const defaultProps = {
   acceptButtonAttributes: null,
 }
 
-function InfoCard(localProps: InfoCardProps & ISpacingProps) {
+const InfoCard = (localProps: InfoCardProps & ISpacingProps) => {
   // Every component should have a context
   const context = React.useContext(Context)
   // Extract additional props from global context
@@ -135,7 +136,7 @@ function InfoCard(localProps: InfoCardProps & ISpacingProps) {
     closeButtonAttributes,
     acceptButtonAttributes,
     ...props
-  } = extendPropsWithContext({
+  } = usePropsWithContext({
     ...defaultProps,
     ...localProps,
   })
@@ -199,7 +200,7 @@ function InfoCard(localProps: InfoCardProps & ISpacingProps) {
         {!acceptButtonIsHidden && (
           <Button
             type="button"
-            data-testid="into-card-accept-button"
+            data-testid="info-card-accept-button"
             variant="secondary"
             right={!centered && 'small'}
             on_click={onAccept}
@@ -210,7 +211,7 @@ function InfoCard(localProps: InfoCardProps & ISpacingProps) {
         {!closeButtonIsHidden && (
           <Button
             type="button"
-            data-testid="into-card-close-button"
+            data-testid="info-card-close-button"
             variant="tertiary"
             top={centered && 'small'}
             on_click={onClose}

package/es/components/modal/Modal.tsx

@@ -25,7 +25,7 @@ import ModalHeader from './components/ModalHeader'
 import ModalHeaderBar from './components/ModalHeaderBar'
 import CloseButton from './components/CloseButton'
 import ModalRoot from './ModalRoot'
-import { ISpacingProps } from 'packages/dnb-eufemia/build/shared/interfaces'
+import { ISpacingProps } from '../../shared/interfaces'
 
 export const ANIMATION_DURATION = 300
 

package/es/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/es/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/es/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/es/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/es/components/pagination/Pagination.js

@@ -161,13 +161,13 @@ class PaginationInstance extends React.PureComponent {
       const content = (_items$find = items.find(({
         pageNumber
       }) => 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/es/components/skeleton/Skeleton.d.ts

@@ -39,10 +39,10 @@ export type SkeletonChildren =
   | string
   | ((...args: any[]) => any)
   | React.ReactNode;
-
 /**
  * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
  */
+
 export interface SkeletonProps extends React.HTMLProps<HTMLElement> {
   /**
    * Use `true` to enable/show the skeleton for the component used inside. Defaults to `false`.

package/es/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/es/components/step-indicator/StepIndicatorTriggerButton.js

@@ -32,6 +32,8 @@ export default class StepIndicatorTriggerButton extends React.PureComponent {
 
   componentDidMount() {
     this._heightAnim.setElement(this._buttonRef.current);
+
+    this._prevStep = this.context.activeStep;
   }
 
   componentWillUnmount() {
@@ -42,12 +44,10 @@ export default class StepIndicatorTriggerButton extends React.PureComponent {
     if (this._prevStep !== this.context.activeStep) {
       const toHeight = this._heightAnim.getUnknownHeight();
 
-      this._heightAnim.adjustFrom(height);
-
       this._heightAnim.adjustTo(height, toHeight);
-    }
 
-    this._prevStep = this.context.activeStep;
+      this._prevStep = this.context.activeStep;
+    }
   }
 
   render() {

package/es/components/tag/Tag.js

@@ -1,21 +1,16 @@
 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;
 
 const _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 const defaultProps = {
@@ -35,7 +30,7 @@ const Tag = localProps => {
   const context = React.useContext(Context);
   const tagGroupContext = React.useContext(TagGroupContext);
 
-  const _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),
+  const _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,
     skeleton,
@@ -44,8 +39,8 @@ const Tag = localProps => {
     onClick,
     onDelete,
     omitOnKeyUpDeleteEvent
-  } = _extendPropsWithConte,
-        props = _objectWithoutProperties(_extendPropsWithConte, _excluded);
+  } = _usePropsWithContext,
+        props = _objectWithoutProperties(_usePropsWithContext, _excluded);
 
   const content = text || children;
   const isClickable = !!onClick;
@@ -63,13 +58,15 @@ const Tag = localProps => {
     }
   };
 
+  const buttonAttr = props;
+
   if (!isInteractive) {
-    props.element = 'span';
-    props.type = '';
+    buttonAttr.element = 'span';
+    buttonAttr.type = '';
   }
 
   if (isRemovable) {
-    props.icon = getDeleteIcon();
+    buttonAttr.icon = getDeleteIcon();
   }
 
   if (!tagGroupContext) {
@@ -86,7 +83,7 @@ const Tag = localProps => {
     text: content,
     skeleton: skeleton,
     onKeyUp: isRemovable && !omitOnKeyUpDeleteEvent ? e => handleKeyUp(e) : undefined
-  }, props));
+  }, buttonAttr));
 
   function getDeleteIcon() {
     return _IconPrimary || (_IconPrimary = React.createElement(IconPrimary, {

package/es/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/es/components/tag/TagGroup.js

@@ -1,17 +1,11 @@
 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 = ["label", "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 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 const defaultProps = {
   label: null,
@@ -19,16 +13,16 @@ export const defaultProps = {
   children: null
 };
 
-function TagGroup(localProps) {
+const TagGroup = localProps => {
   const context = React.useContext(Context);
 
-  const _extendPropsWithConte = extendPropsWithContext(_objectSpread(_objectSpread({}, defaultProps), localProps), defaultProps, context === null || context === void 0 ? void 0 : context.TagGroup),
+  const _usePropsWithContext = usePropsWithContext(localProps, defaultProps, context === null || context === void 0 ? void 0 : context.TagGroup),
         {
     label,
     className,
     children: childrenProp
-  } = _extendPropsWithConte,
-        props = _objectWithoutProperties(_extendPropsWithConte, _excluded);
+  } = _usePropsWithContext,
+        props = _objectWithoutProperties(_usePropsWithContext, _excluded);
 
   let children = childrenProp;
 
@@ -41,13 +35,13 @@ function TagGroup(localProps) {
   const 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/es/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>
   )
 }