@dnb/eufemia 9.17.2 → 9.21.0

package/es/components/step-indicator/StepIndicatorItem.d.ts

@@ -12,7 +12,7 @@ export type StepIndicatorItemIsActive = string | boolean;
 export interface StepIndicatorItemProps
   extends React.HTMLProps<HTMLElement> {
   /**
-   * Defines how the StepIndicator should work. Use `static` for non-interactive steps. Use `strict` for a chronological step order, also, the user can navigate between visited steps. Use `loose` if the user should be able to navigate freely.
+   * <em>(required)</em> defines how the StepIndicator should work. Use `static` for non-interactive steps. Use `strict` for a chronological step order, also, the user can navigate between visited steps. Use `loose` if the user should be able to navigate freely.
    */
   mode?: string;
   title: StepIndicatorItemTitle;
@@ -29,13 +29,13 @@ export interface StepIndicatorItemProps
   on_item_render?: (...args: any[]) => any;
 
   /**
-   * Will be called once the users visits actively a new step. Will be emitted only once. Returns an object `{ event, item, current_step }`.
+   * Will be called once the user visits actively a new step. Will be emitted only once. Returns an object `{ event, item, current_step }`.
    */
   on_change?: (...args: any[]) => any;
   on_render?: (...args: any[]) => any;
 
   /**
-   * Will be called once the users clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step }`.
+   * Will be called once the user clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step }`.
    */
   on_click?: (...args: any[]) => any;
   is_current?: boolean;

package/es/components/step-indicator/StepIndicatorItem.js

@@ -175,6 +175,7 @@ export default class StepIndicatorItem extends React.PureComponent {
     if (!buttonParams.onClick) {
       buttonParams.element = 'span';
       buttonParams.type = '';
+      buttonParams.on_click = undefined;
       isInactive = true;
     }
 

package/es/components/step-indicator/StepIndicatorSidebar.d.ts

@@ -13,7 +13,7 @@ export type StepIndicatorSidebarData =
       status_state?: 'warn' | 'info' | 'error';
 
       /**
-       * Will be called once the users clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step }`.
+       * Will be called once the user clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step }`.
        */
       on_click?: (...args: any[]) => any;
       on_render?: (...args: any[]) => any;
@@ -29,12 +29,12 @@ export type StepIndicatorSidebarData =
 export interface StepIndicatorSidebarProps
   extends React.HTMLProps<HTMLElement> {
   /**
-   * An unique string based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.
+   * <em>(required)</em> a unique string-based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.
    */
   sidebar_id: string;
 
   /**
-   * Defines how the StepIndicator should work. Use `static` for non-interactive steps. Use `strict` for a chronological step order, also, the user can navigate between visited steps. Use `loose` if the user should be able to navigate freely.
+   * <em>(required)</em> defines how the StepIndicator should work. Use `static` for non-interactive steps. Use `strict` for a chronological step order, also, the user can navigate between visited steps. Use `loose` if the user should be able to navigate freely.
    */
   mode?: StepIndicatorSidebarMode;
 
@@ -44,7 +44,7 @@ export interface StepIndicatorSidebarProps
   current_step?: StepIndicatorSidebarCurrentStep;
 
   /**
-   * Defines the data/steps showing up in a JavaScript Array or JSON format like `[{title,is_current}]`. See parameters and example above.
+   * <em>(required)</em> defines the data/steps showing up in a JavaScript Array or JSON format like `[{title,is_current}]`. See parameters and the example above.
    */
   data?: StepIndicatorSidebarData;
   internalId?: string;

package/es/components/step-indicator/StepIndicatorTriggerButton.d.ts

@@ -6,7 +6,7 @@ import * as React from 'react';
 export interface StepIndicatorTriggerButtonProps
   extends React.HTMLProps<HTMLElement> {
   /**
-   * An unique string based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.
+   * <em>(required)</em> a unique string-based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.
    */
   sidebar_id?: string;
   className?: string;

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/switch/Switch.d.ts

@@ -57,7 +57,7 @@ export type SwitchChildren = string | ((...args: any[]) => any);
  */
 export interface SwitchProps extends React.HTMLProps<HTMLElement> {
   /**
-   * Use either the `label` property or provide custom one.
+   * Use either the `label` property or provide a custom one.
    */
   label?: SwitchLabel;
 
@@ -67,13 +67,13 @@ export interface SwitchProps extends React.HTMLProps<HTMLElement> {
   label_position?: SwitchLabelPosition;
 
   /**
-   * The `title` of the input - describing it a bit further for accessibility reasons.
+   * <em>(required)</em> the `title` of the input - describing it a bit further for accessibility reasons.
    */
   title?: string;
   default_state?: SwitchDefaultState;
 
   /**
-   * Determine whether the switch is checked or not. Default will be `false`.
+   * Determine whether the switch is checked or not. The default will be `false`.
    */
   checked?: SwitchChecked;
   disabled?: SwitchDisabled;
@@ -90,7 +90,7 @@ export interface SwitchProps extends React.HTMLProps<HTMLElement> {
   status?: SwitchStatus;
 
   /**
-   * Defines the state of the status. Currently there are two statuses `[error, info]`. Defaults to `error`.
+   * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.
    */
   status_state?: string;
 
@@ -149,12 +149,12 @@ export interface SwitchProps extends React.HTMLProps<HTMLElement> {
   custom_method?: (...args: any[]) => any;
 
   /**
-   * Will be called on state changes made by the user. Returns an boolean `{ checked, event }`.
+   * Will be called on state changes made by the user. Returns a boolean `{ checked, event }`.
    */
   on_change?: (...args: any[]) => any;
 
   /**
-   * Will be called on state changes made by the user, but with a delay. This way the users sees the animation, before e.g. an error will be removed. Returns an boolean `{ checked, event }`.
+   * Will be called on state changes made by the user, but with a delay. This way the user sees the animation before e.g. an error will be removed. Returns a boolean `{ checked, event }`.
    */
   on_change_end?: (...args: any[]) => any;
   on_state_update?: (...args: any[]) => any;

package/es/components/tabs/Tabs.d.ts

@@ -66,12 +66,12 @@ export type TabsChildren =
  */
 export interface TabsProps extends React.HTMLProps<HTMLElement> {
   /**
-   * Defines the data structure to load as a JSON. e.g. `[{title: &#39;...&#39;, content: &#39;Current tab&#39;, key
+   * <em>(required)</em> defines the data structure to load as a JSON. e.g. `[{title: &#39;...&#39;, content: &#39;Current tab&#39;, key
    */
   data?: TabsData;
 
   /**
-   * The content to render. Can be a function, returning the current tab content `(key) => (&#39;Current tab&#39;)`, a React Component or an object with the keys and content `{key1: &#39;Current tab&#39;}`.
+   * <em>(required)</em> the content to render. Can be a function, returning the current tab content `(key) => (&#39;Current tab&#39;)`, a React Component or an object with the keys and content `{key1: &#39;Current tab&#39;}`.
    */
   content?: TabsContent;
 
@@ -81,7 +81,7 @@ export interface TabsProps extends React.HTMLProps<HTMLElement> {
   content_style?: string;
 
   /**
-   * To modify the `spacing` on to the content wrapper. Use a supported modifier from the <a href="/uilib/components/section/properties">Section component</a>. Defaults to `true`.
+   * To modify the `spacing` onto the content wrapper. Use a supported modifier from the <a href="/uilib/components/section/properties">Section component</a>. Defaults to `true`.
    */
   content_spacing?: TabsContentSpacing;
   label?: string;
@@ -107,7 +107,7 @@ export interface TabsProps extends React.HTMLProps<HTMLElement> {
   tabs_style?: string;
 
   /**
-   * To modify the `spacing` inside the tabs list. Use a supported modifier from the <a href="/uilib/components/section/properties">Section component</a>. Defaults to `false`.
+   * To modify the `spacing` inside the tab list. Use a supported modifier from the <a href="/uilib/components/section/properties">Section component</a>. Defaults to `false`.
    */
   tabs_spacing?: TabsTabsSpacing;
   use_hash?: TabsUseHash;
@@ -118,7 +118,7 @@ export interface TabsProps extends React.HTMLProps<HTMLElement> {
   prerender?: TabsPrerender;
 
   /**
-   * If set to `true`, the Tabs content will stay in the DOM. The visibility will be handled by using the `hidden` and `aria-hidden` HTML attributes. Similar to `prerender`, but in contrast, the content will render once the users is activating a tab. Defaults to `false`.
+   * If set to `true`, the Tabs content will stay in the DOM. The visibility will be handled by using the `hidden` and `aria-hidden` HTML attributes. Similar to `prerender`, but in contrast, the content will render once the user is activating a tab. Defaults to `false`.
    */
   prevent_rerender?: TabsPreventRerender;
 
@@ -161,7 +161,7 @@ export interface TabsProps extends React.HTMLProps<HTMLElement> {
   className?: string;
 
   /**
-   * The content to render. Can be a function, returning the current tab content `(key) => (&#39;Current tab&#39;)`, a React Component or an object with the keys and content `{key1: &#39;Current tab&#39;}`.
+   * <em>(required)</em> the content to render. Can be a function, returning the current tab content `(key) => (&#39;Current tab&#39;)`, a React Component or an object with the keys and content `{key1: &#39;Current tab&#39;}`.
    */
   children?: TabsChildren;
   render?: (...args: any[]) => any;
@@ -172,7 +172,7 @@ export interface TabsProps extends React.HTMLProps<HTMLElement> {
   on_change?: (...args: any[]) => any;
 
   /**
-   * This event gets triggered once the a users mouse enters a tab (hover). Returns `{ key, selected_key, focus_key, event }`.
+   * This event gets triggered once the user&#39;s mouse enters a tab (hover). Returns `{ key, selected_key, focus_key, event }`.
    */
   on_mouse_enter?: (...args: any[]) => any;
 
@@ -198,7 +198,7 @@ export default class Tabs extends React.Component<TabsProps, any> {
  */
 export interface DummyProps {
   /**
-   * The content to render. Can be a function, returning the current tab content `(key) => (&#39;Current tab&#39;)`, a React Component or an object with the keys and content `{key1: &#39;Current tab&#39;}`.
+   * <em>(required)</em> the content to render. Can be a function, returning the current tab content `(key) => (&#39;Current tab&#39;)`, a React Component or an object with the keys and content `{key1: &#39;Current tab&#39;}`.
    */
   children: React.ReactNode;
 }

package/es/components/tabs/TabsContentWrapper.d.ts

@@ -22,12 +22,12 @@ export interface ContentWrapperProps extends React.HTMLProps<HTMLElement> {
   content_style?: string;
 
   /**
-   * To modify the `spacing` on to the content wrapper. Use a supported modifier from the <a href="/uilib/components/section/properties">Section component</a>. Defaults to `true`.
+   * To modify the `spacing` onto the content wrapper. Use a supported modifier from the <a href="/uilib/components/section/properties">Section component</a>. Defaults to `true`.
    */
   content_spacing?: ContentWrapperContentSpacing;
 
   /**
-   * The content to render. Can be a function, returning the current tab content `(key) => (&#39;Current tab&#39;)`, a React Component or an object with the keys and content `{key1: &#39;Current tab&#39;}`.
+   * <em>(required)</em> the content to render. Can be a function, returning the current tab content `(key) => (&#39;Current tab&#39;)`, a React Component or an object with the keys and content `{key1: &#39;Current tab&#39;}`.
    */
   children?: ContentWrapperChildren;
 }

package/es/components/tabs/TabsCustomContent.d.ts

@@ -74,7 +74,7 @@ export interface CustomContentProps extends React.HTMLProps<HTMLElement> {
   left?: CustomContentLeft;
 
   /**
-   * The content to render. Can be a function, returning the current tab content `(key) => (&#39;Current tab&#39;)`, a React Component or an object with the keys and content `{key1: &#39;Current tab&#39;}`.
+   * <em>(required)</em> the content to render. Can be a function, returning the current tab content `(key) => (&#39;Current tab&#39;)`, a React Component or an object with the keys and content `{key1: &#39;Current tab&#39;}`.
    */
   children?: CustomContentChildren;
   className?: string;

package/es/components/tag/Tag.js

@@ -0,0 +1,112 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+
+var _IconPrimary;
+
+const _excluded = ["className", "skeleton", "children", "text", "onClick", "onDelete", "omitOnKeyUpDeleteEvent"];
+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 } from '../../shared/component-helper';
+import { usePropsWithContext } from '../../shared/hooks';
+import TagGroup from './TagGroup';
+import { TagGroupContext } from './TagContext';
+export const defaultProps = {
+  className: null,
+  skeleton: false,
+  text: null,
+  children: null,
+  icon: null,
+  onClick: null,
+  onDelete: null,
+  omitOnKeyUpDeleteEvent: false
+};
+
+const Tag = localProps => {
+  var _context$translation;
+
+  const context = React.useContext(Context);
+  const tagGroupContext = React.useContext(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,
+    children,
+    text,
+    onClick,
+    onDelete,
+    omitOnKeyUpDeleteEvent
+  } = _usePropsWithContext,
+        props = _objectWithoutProperties(_usePropsWithContext, _excluded);
+
+  const content = text || children;
+  const isClickable = !!onClick;
+  const isRemovable = !!onDelete && !isClickable;
+  const isInteractive = isClickable || isRemovable;
+  const tagClassNames = classnames('dnb-tag', className, isInteractive && 'dnb-tag--interactive', isRemovable && 'dnb-tag--removable');
+
+  const isDeleteKeyboardEvent = keyboardEvent => {
+    return keyboardEvent.key === 'Backspace' || keyboardEvent.key === 'Delete';
+  };
+
+  const handleKeyUp = event => {
+    if (onDelete && isDeleteKeyboardEvent(event)) {
+      onDelete(event);
+    }
+  };
+
+  const buttonAttr = props;
+
+  if (!isInteractive) {
+    buttonAttr.element = 'span';
+    buttonAttr.type = '';
+  }
+
+  if (isRemovable) {
+    buttonAttr.icon = getDeleteIcon();
+  }
+
+  if (!tagGroupContext) {
+    warn(`Tag group required: A Tag requires a Tag.Group with label description as a parent component. This is to ensure correct semantic and accessibility.`);
+  }
+
+  return React.createElement(Button, _extends({
+    "data-testid": "tag",
+    variant: "unstyled",
+    size: "small",
+    icon_position: isRemovable ? 'right' : 'left',
+    className: tagClassNames,
+    on_click: onClick || onDelete,
+    text: content,
+    skeleton: skeleton,
+    onKeyUp: isRemovable && !omitOnKeyUpDeleteEvent ? e => handleKeyUp(e) : undefined
+  }, buttonAttr));
+
+  function getDeleteIcon() {
+    return _IconPrimary || (_IconPrimary = React.createElement(IconPrimary, {
+      "data-testid": "tag-delete-icon",
+      inherit_color: false,
+      icon: React.createElement("svg", {
+        width: "16",
+        height: "16",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg"
+      }, React.createElement("path", {
+        d: "M0 8a8 8 0 1 1 16 0A8 8 0 1 1 0 8Z",
+        className: "dnb-icon-close-circle-path"
+      }), React.createElement("path", {
+        d: "m5.5 10.5 5-5m0 5-5-5",
+        className: "dnb-icon-close-cross-path",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }))
+    }));
+  }
+};
+
+Tag.Group = TagGroup;
+export default Tag;

package/es/components/tag/Tag.tsx

@@ -0,0 +1,196 @@
+import React from 'react'
+import classnames from 'classnames'
+
+// Components
+import IconPrimary, { IconPrimaryIcon } from '../icon-primary/IconPrimary'
+import Button, { ButtonProps } from '../button/Button'
+
+// Shared
+import Context from '../../shared/Context'
+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'
+import { TagGroupContext } from './TagContext'
+
+export interface TagProps {
+  /**
+   * The content of the tag element, can be a string or a React Element.
+   * Default: null
+   */
+  text?: string | React.ReactNode
+
+  /**
+   * Icon displaying on the left side
+   * Default: null
+   */
+  icon?: IconPrimaryIcon
+
+  /**
+   * Custom className on the component root
+   * Default: null
+   */
+  className?: string
+
+  /**
+   * Skeleton should be applied when loading content
+   * Default: null
+   */
+  skeleton?: SkeletonShow
+
+  /**
+   * The content of the tag element, can be a string or a React Element. Will be overwritten by text prop
+   * Default: null
+   */
+  children?: string | React.ReactNode // ReactNode allows multiple elements, strings, numbers, fragments, portals...
+
+  /**
+   * Handle the click event on 'tag' element
+   * Default: null
+   */
+  onClick?: React.MouseEventHandler<HTMLButtonElement>
+
+  /**
+   * Handle the delete event on 'tag' element
+   * Default: null
+   */
+  onDelete?: React.MouseEventHandler<HTMLButtonElement>
+
+  /**
+   * Handle the delete event on 'tag' element
+   * Default: null
+   */
+  omitOnKeyUpDeleteEvent?: boolean
+}
+
+export const defaultProps = {
+  className: null,
+  skeleton: false,
+  text: null,
+  children: null,
+  icon: null,
+  onClick: null,
+  onDelete: null,
+  omitOnKeyUpDeleteEvent: false,
+}
+
+const Tag = (localProps: TagProps & ISpacingProps) => {
+  // Every component should have a context
+  const context = React.useContext(Context)
+  const tagGroupContext = React.useContext(TagGroupContext)
+
+  // Extract additional props from global context
+  const {
+    className,
+    skeleton,
+    children,
+    text,
+    onClick,
+    onDelete,
+    omitOnKeyUpDeleteEvent,
+    ...props
+  } = usePropsWithContext(
+    localProps,
+    defaultProps,
+    context?.translation?.Tag,
+    context?.Tag,
+    tagGroupContext
+  )
+
+  const content = text || children
+  const isClickable = !!onClick
+  const isRemovable = !!onDelete && !isClickable
+  const isInteractive = isClickable || isRemovable
+
+  const tagClassNames = classnames(
+    'dnb-tag',
+    className,
+    isInteractive && 'dnb-tag--interactive',
+    isRemovable && 'dnb-tag--removable'
+  )
+
+  const isDeleteKeyboardEvent = (keyboardEvent) => {
+    return (
+      keyboardEvent.key === 'Backspace' || keyboardEvent.key === 'Delete'
+    )
+  }
+
+  const handleKeyUp = (event) => {
+    if (onDelete && isDeleteKeyboardEvent(event)) {
+      onDelete(event)
+    }
+  }
+
+  const buttonAttr: typeof props & Pick<ButtonProps, 'element' | 'type'> =
+    props
+
+  if (!isInteractive) {
+    buttonAttr.element = 'span'
+    buttonAttr.type = ''
+  }
+
+  if (isRemovable) {
+    buttonAttr.icon = getDeleteIcon()
+  }
+
+  if (!tagGroupContext) {
+    warn(
+      `Tag group required: A Tag requires a Tag.Group with label description as a parent component. This is to ensure correct semantic and accessibility.`
+    )
+  }
+
+  return (
+    <Button
+      data-testid="tag"
+      variant="unstyled"
+      size="small"
+      icon_position={isRemovable ? 'right' : 'left'}
+      className={tagClassNames}
+      on_click={onClick || onDelete}
+      text={content}
+      skeleton={skeleton}
+      onKeyUp={
+        isRemovable && !omitOnKeyUpDeleteEvent
+          ? (e) => handleKeyUp(e)
+          : undefined
+      }
+      {...buttonAttr}
+    />
+  )
+
+  function getDeleteIcon() {
+    return (
+      <IconPrimary
+        data-testid="tag-delete-icon"
+        inherit_color={false}
+        icon={
+          <svg
+            width="16"
+            height="16"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M0 8a8 8 0 1 1 16 0A8 8 0 1 1 0 8Z"
+              className="dnb-icon-close-circle-path"
+            />
+            <path
+              d="m5.5 10.5 5-5m0 5-5-5"
+              className="dnb-icon-close-cross-path"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        }
+      />
+    )
+  }
+}
+
+Tag.Group = TagGroup
+
+export default Tag

package/es/components/tag/TagContext.js

@@ -0,0 +1,2 @@
+import React from 'react';
+export const TagGroupContext = React.createContext(null);

package/es/components/tag/TagContext.tsx

@@ -0,0 +1,3 @@
+import React from 'react'
+
+export const TagGroupContext = React.createContext(null)

package/es/components/tag/TagGroup.js

@@ -0,0 +1,47 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["label", "className", "children"];
+import React from 'react';
+import classnames from 'classnames';
+import { createSpacingClasses } from '../space/SpacingHelper';
+import Context from '../../shared/Context';
+import { usePropsWithContext } from '../../shared/hooks';
+import { TagGroupContext } from './TagContext';
+export const defaultProps = {
+  label: null,
+  className: null,
+  children: null
+};
+
+const TagGroup = localProps => {
+  const context = React.useContext(Context);
+
+  const _usePropsWithContext = usePropsWithContext(localProps, defaultProps, context === null || context === void 0 ? void 0 : context.TagGroup),
+        {
+    label,
+    className,
+    children: childrenProp
+  } = _usePropsWithContext,
+        props = _objectWithoutProperties(_usePropsWithContext, _excluded);
+
+  let children = childrenProp;
+
+  if (Array.isArray(childrenProp)) {
+    children = [...childrenProp].map(child => {
+      return child;
+    });
+  }
+
+  const spacingClasses = createSpacingClasses(props);
+  return React.createElement(TagGroupContext.Provider, {
+    value: props
+  }, 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;