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

DNB Eufemia Design System UI Library

"use client";

var _svg;
import React from 'react';
import clsx from 'clsx';
import withComponentMarkers from "../../shared/helpers/withComponentMarkers.js";
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 { applySpacing } from "../space/SpacingUtils.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const defaultProps = {
  skeleton: null,
  omitOnKeyUpDeleteEvent: false
};
const Tag = localProps => {
  var _context$translation;
  const context = React.useContext(Context);
  const tagGroupContext = React.useContext(TagGroupContext);
  const allProps = extendPropsWithContext(localProps, defaultProps, context === null || context === 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 {
    className,
    skeleton,
    children,
    text,
    hasLabel,
    variant = 'default',
    onClick,
    omitOnKeyUpDeleteEvent,
    icon,
    removeIconTitle,
    addIconTitle,
    ...props
  } = allProps;
  const content = text || children;
  const usedVariant = onClick && variant === 'default' ? 'clickable' : variant;
  const addIcon = usedVariant === 'removable' || variant === 'addable';
  const isInteractive = usedVariant !== 'default';
  const tagProps = applySpacing(props, {
    className: clsx(`dnb-tag dnb-tag--${usedVariant}`, className, isInteractive && 'dnb-tag--interactive')
  });
  const additionalButtonParams = {};
  const isDeleteKeyboardEvent = keyboardEvent => {
    return keyboardEvent.key === 'Backspace' || keyboardEvent.key === 'Delete';
  };
  const handleDeleteKeyUp = event => {
    if (isDeleteKeyboardEvent(event) && onClick) {
      onClick(event);
    }
  };
  if (!isInteractive) {
    additionalButtonParams.element = 'span';
    additionalButtonParams.type = '';
  }
  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 _jsx(Button, {
    variant: "unstyled",
    size: "small",
    icon: addIcon ? getIcon(variant === 'addable' ? addIconTitle : removeIconTitle) : icon,
    iconPosition: addIcon ? 'right' : 'left',
    ...tagProps,
    onClick: onClick,
    text: content,
    skeleton: skeleton,
    onKeyUp: variant === 'removable' && !omitOnKeyUpDeleteEvent ? e => handleDeleteKeyUp(e) : undefined,
    ...additionalButtonParams,
    ...props
  });
};
const getIcon = title => _jsx(IconPrimary, {
  title: title,
  inheritColor: false,
  icon: _svg || (_svg = _jsxs("svg", {
    width: "16",
    height: "16",
    fill: "none",
    xmlns: "http://www.w3.org/2000/svg",
    children: [_jsx("path", {
      d: "M0 8a8 8 0 1 1 16 0A8 8 0 1 1 0 8Z",
      className: "dnb-icon-close-circle-path"
    }), _jsx("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;
withComponentMarkers(Tag, {
  _formElement: true,
  _supportsSpacingProps: true
});
export default Tag;
//# sourceMappingURL=Tag.js.map