@dnb/eufemia/es/components/tag/Tag.js

DNB Eufemia Design System UI Library

"use client";

import _extends from "@babel/runtime/helpers/esm/extends";
var _svg;
import React from 'react';
import classnames from 'classnames';
import IconPrimary from "../icon-primary/IconPrimary.js";
import Button from "../button/Button.js";
import Context from "../../shared/Context.js";
import { warn, extendPropsWithContext } from "../../shared/component-helper.js";
import TagGroup from "./TagGroup.js";
import { TagGroupContext } from "./TagContext.js";
import { createSpacingClasses } from "../space/SpacingHelper.js";
export const defaultProps = {
  skeleton: null,
  omitOnKeyUpDeleteEvent: false
};
const Tag = localProps => {
  const context = React.useContext(Context);
  const tagGroupContext = React.useContext(TagGroupContext);
  const allProps = extendPropsWithContext(localProps, defaultProps, context?.translation?.Tag, context?.Tag, tagGroupContext);
  const {
    className,
    skeleton,
    children,
    text,
    hasLabel,
    variant = 'default',
    onClick,
    omitOnKeyUpDeleteEvent,
    removeIconTitle,
    addIconTitle,
    ...props
  } = handleDeprecatedBehavior(allProps);
  const content = text || children;
  const addIcon = variant === 'removable' || variant === 'addable';
  const isInteractive = variant !== 'default';
  const spacingClasses = createSpacingClasses(props);
  const tagClassNames = classnames(`dnb-tag dnb-tag--${variant}`, className, spacingClasses, isInteractive && 'dnb-tag--interactive');
  const buttonAttr = props;
  const isDeleteKeyboardEvent = keyboardEvent => {
    return keyboardEvent.key === 'Backspace' || keyboardEvent.key === 'Delete';
  };
  const handleDeleteKeyUp = event => {
    if (isDeleteKeyboardEvent(event) && onClick) {
      onClick(event);
    }
  };
  if (!isInteractive) {
    buttonAttr.element = 'span';
    buttonAttr.type = '';
  }
  if (addIcon) {
    buttonAttr.icon = getIcon(variant === 'addable' ? addIconTitle : removeIconTitle);
  }
  if (!tagGroupContext && !hasLabel) {
    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({
    variant: "unstyled",
    size: "small",
    icon_position: addIcon ? 'right' : 'left',
    className: tagClassNames,
    on_click: onClick,
    text: content,
    skeleton: skeleton,
    onKeyUp: variant === 'removable' && !omitOnKeyUpDeleteEvent ? e => handleDeleteKeyUp(e) : undefined
  }, buttonAttr));
};
const handleDeprecatedBehavior = ({
  onDelete,
  ...allProps
}) => {
  if (!allProps.variant) {
    if (allProps.onClick) {
      allProps.variant = 'clickable';
    } else if (onDelete) {
      allProps.onClick = onDelete;
      allProps.variant = 'removable';
    }
  }
  return allProps;
};
const getIcon = title => React.createElement(IconPrimary, {
  title: title,
  inheritColor: false,
  icon: _svg || (_svg = 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;
Tag._formElement = true;
Tag._supportsSpacingProps = true;
export default Tag;
//# sourceMappingURL=Tag.js.map