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

DNB Eufemia Design System UI Library

"use strict";
"use client";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.defaultProps = exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
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 _SpacingHelper = require("../space/SpacingHelper.js");
var _svg;
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const defaultProps = exports.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,
    removeIconTitle,
    addIconTitle,
    ...props
  } = handleDeprecatedBehavior(allProps);
  const content = text || children;
  const addIcon = variant === 'removable' || variant === 'addable';
  const isInteractive = variant !== 'default';
  const spacingClasses = (0, _SpacingHelper.createSpacingClasses)(props);
  const tagClassNames = (0, _classnames.default)(`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) {
    (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 _react.default.createElement(_Button.default, _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.default.createElement(_IconPrimary.default, {
  title: title,
  inheritColor: false,
  icon: _svg || (_svg = _react.default.createElement("svg", {
    width: "16",
    height: "16",
    fill: "none",
    xmlns: "http://www.w3.org/2000/svg"
  }, _react.default.createElement("path", {
    d: "M0 8a8 8 0 1 1 16 0A8 8 0 1 1 0 8Z",
    className: "dnb-icon-close-circle-path"
  }), _react.default.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.default;
Tag._formElement = true;
Tag._supportsSpacingProps = true;
var _default = exports.default = Tag;
//# sourceMappingURL=Tag.js.map