@dt-dds/react-tag 1.0.0-beta.43

package/dist/index.js

@@ -0,0 +1,463 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// index.ts
+var tag_exports = {};
+__export(tag_exports, {
+  Tag: () => Tag
+});
+module.exports = __toCommonJS(tag_exports);
+
+// src/Tag.tsx
+var import_react_tooltip = require("@dt-dds/react-tooltip");
+var import_react3 = require("react");
+
+// ../../dt-dds-react/core/assets/svgs/AllOut.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Apis.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Apps.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/ArrowDropDown.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/ArrowDropUp.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/ArrowLeft.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/ArrowRight.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/AvatarThumbnail.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Bolt.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/CalendarMonth.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Cancel.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Check.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/CheckCircle.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/CheckCircleOutline.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Close.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var CloseIcon = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "svg",
+    __spreadProps(__spreadValues({
+      fill: "none",
+      height: "24",
+      viewBox: "0 0 24 24",
+      width: "24",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, props), {
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        "path",
+        {
+          d: "M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z",
+          fill: "currentColor"
+        }
+      )
+    })
+  );
+};
+var Close_default = CloseIcon;
+
+// ../../dt-dds-react/core/assets/svgs/Copy.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Delete.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Edit.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Email.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/EmailSend.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Error.tsx
+var import_react = require("@emotion/react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/ErrorOutline.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/EVStation.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Info.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/InfoOutline.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Input.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Language.tsx
+var import_jsx_runtime27 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/LocationOn.tsx
+var import_jsx_runtime28 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/LocationSearching.tsx
+var import_jsx_runtime29 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/MenuCompact.tsx
+var import_jsx_runtime30 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/MenuExpand.tsx
+var import_jsx_runtime31 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Menu.tsx
+var import_jsx_runtime32 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/MoreHorizontal.tsx
+var import_jsx_runtime33 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/MoreVertical.tsx
+var import_jsx_runtime34 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/NoData.tsx
+var import_react2 = require("@emotion/react");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/NotFound.tsx
+var import_jsx_runtime36 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/OutlinedArrowDropDown.tsx
+var import_jsx_runtime37 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/OutlinedArrowDropUp.tsx
+var import_jsx_runtime38 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/PhoneOutlined.tsx
+var import_jsx_runtime39 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Payments.tsx
+var import_jsx_runtime40 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Products.tsx
+var import_jsx_runtime41 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/RemoveCircleOutline.tsx
+var import_jsx_runtime42 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Share.tsx
+var import_jsx_runtime43 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Signout.tsx
+var import_jsx_runtime44 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Teams.tsx
+var import_jsx_runtime45 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Timeline.tsx
+var import_jsx_runtime46 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Topic.tsx
+var import_jsx_runtime47 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/UnfoldLess.tsx
+var import_jsx_runtime48 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/UnfoldMore.tsx
+var import_jsx_runtime49 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Username.tsx
+var import_jsx_runtime50 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/ViewAgenda.tsx
+var import_jsx_runtime51 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Visibility.tsx
+var import_jsx_runtime52 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/VisibilityOff.tsx
+var import_jsx_runtime53 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/WarningOutline.tsx
+var import_jsx_runtime54 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Warning.tsx
+var import_jsx_runtime55 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Wifi.tsx
+var import_jsx_runtime56 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Settings.tsx
+var import_jsx_runtime57 = require("react/jsx-runtime");
+
+// src/Tag.styled.ts
+var import_styled = __toESM(require("@emotion/styled"));
+
+// src/utils/tagVariantColors.ts
+var getColors = (variant, theme, isDisabled, color) => {
+  const resolvedColor = color === "primary" ? "accent" : color;
+  if (variant === "solid") {
+    const palette = theme.palette[resolvedColor];
+    return {
+      bgColor: isDisabled ? palette.light : palette.default,
+      hoveredBgColor: palette.dark
+    };
+  }
+  if (variant === "outlined") {
+    const palette = theme.palette[resolvedColor];
+    return {
+      bgColor: palette.light,
+      hoveredBgColor: palette.medium,
+      borderTextColor: isDisabled ? palette.medium : palette.default,
+      hoveredBorderTextColor: palette.dark
+    };
+  }
+};
+var tagVariantColors = ({
+  theme,
+  color,
+  variant,
+  hasHover,
+  isDisabled
+}) => {
+  const colors = getColors(variant, theme, isDisabled, color);
+  return {
+    solid: __spreadValues({
+      border: theme.spacing.none,
+      color: theme.palette.content.contrast,
+      backgroundColor: colors == null ? void 0 : colors.bgColor
+    }, hasHover && {
+      "&:hover": {
+        backgroundColor: colors == null ? void 0 : colors.hoveredBgColor,
+        color: theme.palette.content.contrast
+      }
+    }),
+    outlined: __spreadValues({
+      border: `1px solid ${colors == null ? void 0 : colors.borderTextColor}`,
+      color: colors == null ? void 0 : colors.borderTextColor,
+      backgroundColor: colors == null ? void 0 : colors.bgColor
+    }, hasHover && {
+      "&:hover": {
+        borderColor: colors == null ? void 0 : colors.hoveredBorderTextColor,
+        color: colors == null ? void 0 : colors.hoveredBorderTextColor,
+        backgroundColor: colors == null ? void 0 : colors.hoveredBgColor
+      }
+    })
+  }[variant];
+};
+
+// src/utils/tagVariantSize.ts
+var tagSizeStyles = (theme, size) => ({
+  medium: {
+    fontSize: "0.75rem",
+    fontWeight: "700",
+    lineHeight: "1rem",
+    padding: `${theme.spacing["4xs"]} ${theme.spacing["3xs"]}`,
+    height: "32px"
+  },
+  small: {
+    fontSize: "0.625rem",
+    fontWeight: "700",
+    lineHeight: "0.875rem",
+    padding: `${theme.spacing["6xs"]} ${theme.spacing["4xs"]}`,
+    height: "18px"
+  }
+})[size];
+
+// src/Tag.styled.ts
+var TagStyled = import_styled.default.div(
+  ({
+    theme,
+    border,
+    isDisabled,
+    isClickable,
+    isDismissible,
+    size,
+    variant,
+    color,
+    hasHover
+  }) => __spreadProps(__spreadValues(__spreadValues(__spreadValues(__spreadProps(__spreadValues(__spreadValues({}, tagSizeStyles(theme, size)), tagVariantColors({ theme, variant, color, hasHover, isDisabled })), {
+    display: "flex",
+    textTransform: "uppercase",
+    alignItems: "center",
+    maxWidth: "max-content",
+    gap: theme.spacing["5xs"],
+    borderRadius: theme.radius[border === "rounded" ? "s" : "none"],
+    width: "150px",
+    ["> :first-child"]: {
+      whiteSpace: "nowrap",
+      display: "block",
+      overflow: "hidden",
+      textOverflow: "ellipsis"
+    }
+  }), (isClickable || isDismissible) && { userSelect: "none" }), isClickable && { cursor: "pointer" }), isDisabled && { cursor: "not-allowed" }), {
+    ["&:focus-visible"]: {
+      outline: `2px solid ${theme.palette.border.dark}`,
+      outlineOffset: "1px"
+    }
+  })
+);
+var TagButtonCloseStyled = import_styled.default.button`
+  ${({ theme }) => ({
+  backgroundColor: "transparent",
+  color: "currentColor",
+  display: "inherit",
+  border: 0,
+  cursor: "pointer",
+  ["&:disabled"]: { cursor: "not-allowed" },
+  ["&:focus-visible"]: {
+    outline: `2px solid ${theme.palette.border.dark}`,
+    outlineOffset: "1px"
+  }
+})}
+`;
+
+// src/Tag.tsx
+var import_jsx_runtime58 = require("react/jsx-runtime");
+var Tag = (0, import_react3.forwardRef)(
+  ({
+    style,
+    children,
+    dataTestId,
+    variant = "solid",
+    color = "primary",
+    border = "squared",
+    size = "small",
+    isClickable = false,
+    isDisabled = false,
+    onClick,
+    onClose,
+    tooltipVariant = "opacity"
+  }, ref) => {
+    const dataTestIdName = dataTestId != null ? dataTestId : "tag";
+    const isDismissible = !!onClose;
+    const hasHoverStyle = !isDisabled && (!!onClick || isClickable || isDismissible);
+    const hasClickableStyle = !isDismissible && hasHoverStyle;
+    const handleClickTag = (event) => {
+      if (isDisabled || isDismissible) {
+        return;
+      }
+      onClick == null ? void 0 : onClick(event);
+    };
+    const cellRef = (0, import_react3.useRef)(null);
+    const [isOverflow, setIsOverflow] = (0, import_react3.useState)(false);
+    const handleClickOnEnterKey = (event) => {
+      if (event.code === "Enter") {
+        handleClickTag(event);
+      }
+    };
+    const handleCloseOnEnterKey = (event) => {
+      if (event.code === "Enter") {
+        onClose == null ? void 0 : onClose(event);
+      }
+    };
+    (0, import_react3.useEffect)(() => {
+      if (cellRef.current) {
+        const { current } = cellRef;
+        setIsOverflow(current.scrollWidth > current.clientWidth);
+      }
+    }, [children]);
+    return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_react_tooltip.Tooltip, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+        TagStyled,
+        __spreadProps(__spreadValues(__spreadProps(__spreadValues({
+          "aria-disabled": isDisabled,
+          border,
+          color,
+          "data-testid": dataTestIdName,
+          hasHover: hasHoverStyle,
+          isClickable: hasClickableStyle,
+          isDisabled,
+          isDismissible,
+          onClick: handleClickTag
+        }, isClickable && { onKeyDown: handleClickOnEnterKey }), {
+          ref,
+          size,
+          style
+        }), isClickable && { tabIndex: 0 }), {
+          variant,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { ref: cellRef, children }),
+            isDismissible ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+              TagButtonCloseStyled,
+              {
+                "aria-disabled": isDisabled,
+                color,
+                "data-testid": `${dataTestIdName}-close-button`,
+                disabled: isDisabled,
+                onClick: onClose,
+                onKeyDown: handleCloseOnEnterKey,
+                tabIndex: 0,
+                children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Close_default, { height: 12, width: 12 })
+              }
+            ) : null
+          ]
+        })
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_tooltip.Tooltip.Content, { background: tooltipVariant, children: isOverflow ? children : "" })
+    ] });
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Tag
+});