@kiwicom/orbit-components/lib/Tag/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com's products.

"use strict";
"use client";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _CloseCircle = _interopRequireDefault(require("../icons/CloseCircle"));
var _consts = require("./consts");
const buttonClickEmulation = (ev, callback) => {
  if (ev && ev.code === "Space") {
    ev.preventDefault();
    if (callback) callback();
  } else if (ev && ev.code === "Enter") {
    if (callback) callback();
  }
};
const Tag = ({
  selected,
  children,
  iconLeft,
  size = _consts.SIZES.NORMAL,
  onClick,
  onRemove,
  id,
  dataTest,
  type = _consts.TYPES.NEUTRAL,
  dateTag,
  labelDismiss,
  ref
}) => {
  return /*#__PURE__*/React.createElement("div", {
    className: (0, _clsx.default)("orbit-tag", "font-base rounded-150 box-border inline-flex items-stretch justify-center font-medium", "duration-fast transition-[color,_background-color,_box-shadow] ease-in-out", size === _consts.SIZES.SMALL && "text-small leading-small", size === _consts.SIZES.NORMAL && "text-normal leading-normal", !!onRemove && !onClick && "pointer-events-none", selected && ["text-white-normal", dateTag ? ["bg-ink-light-hover", !!(onClick || onRemove) && "hover:bg-ink-light-active focus:bg-ink-light-active active:bg-ink-light-hover"] : ["bg-blue-normal", !!(onClick || onRemove) && "hover:bg-blue-normal-hover focus:bg-blue-normal-hover active:bg-blue-normal-active"]], type === _consts.TYPES.NEUTRAL && ["text-ink-dark", !selected && ["bg-cloud-normal", !!(onClick || onRemove) && "hover:bg-cloud-normal-hover focus:bg-cloud-normal-hover active:bg-cloud-normal-active"]], type === _consts.TYPES.COLORED && ["text-blue-darker", !selected && ["bg-blue-light", !!(onClick || onRemove) && "hover:bg-blue-light-hover focus:bg-blue-light-hover active:bg-blue-light-active"]]),
    "data-test": dataTest
  }, /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
    className: (0, _clsx.default)("flex items-center", "focus:rounded-150 focus:z-default", onRemove ? "ps-200 py-200 pe-100 rounded-l-150" : "p-200 rounded-150", selected && [dateTag ? "focus-visible:bg-ink-light-active" : "focus-visible:bg-blue-normal-hover"], type === _consts.TYPES.NEUTRAL && !selected && "focus-visible:bg-cloud-normal-hover", type === _consts.TYPES.COLORED && !selected && "focus-visible:bg-blue-light-hover"),
    id: id,
    ref: ref
  }, onClick && {
    role: "button",
    tabIndex: 0,
    onClick,
    onKeyDown: ev => buttonClickEmulation(ev, onClick)
  }), iconLeft && /*#__PURE__*/React.createElement("div", {
    className: "pe-200 [&_svg]:size-icon-small flex flex-row items-center justify-center"
  }, iconLeft), children), onRemove && /*#__PURE__*/React.createElement("div", {
    className: (0, _clsx.default)("orbit-tag-close-container", "pe-200 ps-100 rounded-r-150 flex items-center justify-center", "duration-fast transition-[color,_opacity] ease-in-out", "focus:rounded-150 focus:z-default focus:opacity-100 active:opacity-100", !onClick && "pointer-events-auto", !selected && (type === _consts.TYPES.NEUTRAL ? "text-ink-normal active:text-ink-dark focus-visible:bg-cloud-normal-hover" : "text-blue-darker"), !selected && _consts.TYPES.COLORED && "focus-visible:bg-blue-light-hover", selected ? "text-white-normal opacity-100" : "opacity-50", selected && [dateTag ? "focus-visible:bg-ink-light-active" : "focus-visible:bg-blue-normal-hover"]),
    tabIndex: 0,
    "aria-label": labelDismiss,
    role: "button",
    onKeyDown: ev => {
      ev.stopPropagation();
      buttonClickEmulation(ev, onRemove);
    },
    onClick: ev => {
      ev.stopPropagation();
      onRemove();
    }
  }, /*#__PURE__*/React.createElement(_CloseCircle.default, {
    size: "small",
    ariaHidden: true
  })));
};
var _default = exports.default = Tag;