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

DNB Eufemia Design System UI Library

"use strict";
"use client";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _withComponentMarkers = _interopRequireDefault(require("../../shared/helpers/withComponentMarkers.js"));
var _IconPrimary = _interopRequireDefault(require("../icon-primary/IconPrimary.js"));
var _Button = _interopRequireDefault(require("../button/Button.js"));
var _Context = _interopRequireDefault(require("../../shared/Context.js"));
var _componentHelper = require("../../shared/component-helper.js");
var _TagGroup = _interopRequireDefault(require("./TagGroup.js"));
var _TagContext = require("./TagContext.js");
var _SpacingUtils = require("../space/SpacingUtils.js");
var _jsxRuntime = require("react/jsx-runtime");
var _svg;
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const defaultProps = {
  skeleton: null,
  omitOnKeyUpDeleteEvent: false
};
const Tag = localProps => {
  var _context$translation;
  const context = _react.default.useContext(_Context.default);
  const tagGroupContext = _react.default.useContext(_TagContext.TagGroupContext);
  const allProps = (0, _componentHelper.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 = (0, _SpacingUtils.applySpacing)(props, {
    className: (0, _clsx.default)(`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) {
    (0, _componentHelper.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 (0, _jsxRuntime.jsx)(_Button.default, {
    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 => (0, _jsxRuntime.jsx)(_IconPrimary.default, {
  title: title,
  inheritColor: false,
  icon: _svg || (_svg = (0, _jsxRuntime.jsxs)("svg", {
    width: "16",
    height: "16",
    fill: "none",
    xmlns: "http://www.w3.org/2000/svg",
    children: [(0, _jsxRuntime.jsx)("path", {
      d: "M0 8a8 8 0 1 1 16 0A8 8 0 1 1 0 8Z",
      className: "dnb-icon-close-circle-path"
    }), (0, _jsxRuntime.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.default;
(0, _withComponentMarkers.default)(Tag, {
  _formElement: true,
  _supportsSpacingProps: true
});
var _default = exports.default = Tag;
//# sourceMappingURL=Tag.js.map