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

package/dist/index.mjs

@@ -0,0 +1,429 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+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));
+
+// src/Tag.tsx
+import { Tooltip } from "@dt-dds/react-tooltip";
+import { forwardRef, useEffect, useRef, useState } from "react";
+
+// ../../dt-dds-react/core/assets/svgs/AllOut.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Apis.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Apps.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/ArrowDropDown.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/ArrowDropUp.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/ArrowLeft.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/ArrowRight.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/AvatarThumbnail.tsx
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Bolt.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/CalendarMonth.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Cancel.tsx
+import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Check.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/CheckCircle.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/CheckCircleOutline.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Close.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+var CloseIcon = (props) => {
+  return /* @__PURE__ */ jsx15(
+    "svg",
+    __spreadProps(__spreadValues({
+      fill: "none",
+      height: "24",
+      viewBox: "0 0 24 24",
+      width: "24",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, props), {
+      children: /* @__PURE__ */ jsx15(
+        "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
+import { jsx as jsx16, jsxs as jsxs6 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Delete.tsx
+import { jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Edit.tsx
+import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Email.tsx
+import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/EmailSend.tsx
+import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Error.tsx
+import { useTheme } from "@emotion/react";
+import { jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/ErrorOutline.tsx
+import { jsx as jsx22 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/EVStation.tsx
+import { jsx as jsx23 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Info.tsx
+import { jsx as jsx24 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/InfoOutline.tsx
+import { jsx as jsx25 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Input.tsx
+import { jsx as jsx26, jsxs as jsxs12 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Language.tsx
+import { jsx as jsx27 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/LocationOn.tsx
+import { jsx as jsx28, jsxs as jsxs13 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/LocationSearching.tsx
+import { jsx as jsx29 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/MenuCompact.tsx
+import { jsx as jsx30 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/MenuExpand.tsx
+import { jsx as jsx31 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Menu.tsx
+import { jsx as jsx32 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/MoreHorizontal.tsx
+import { jsx as jsx33 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/MoreVertical.tsx
+import { jsx as jsx34 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/NoData.tsx
+import { useTheme as useTheme2 } from "@emotion/react";
+import { jsx as jsx35, jsxs as jsxs14 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/NotFound.tsx
+import { jsx as jsx36, jsxs as jsxs15 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/OutlinedArrowDropDown.tsx
+import { jsx as jsx37 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/OutlinedArrowDropUp.tsx
+import { jsx as jsx38 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/PhoneOutlined.tsx
+import { jsx as jsx39 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Payments.tsx
+import { jsx as jsx40 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Products.tsx
+import { jsx as jsx41, jsxs as jsxs16 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/RemoveCircleOutline.tsx
+import { jsx as jsx42 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Share.tsx
+import { jsx as jsx43, jsxs as jsxs17 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Signout.tsx
+import { jsx as jsx44 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Teams.tsx
+import { jsx as jsx45, jsxs as jsxs18 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Timeline.tsx
+import { jsx as jsx46, jsxs as jsxs19 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Topic.tsx
+import { jsx as jsx47, jsxs as jsxs20 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/UnfoldLess.tsx
+import { jsx as jsx48 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/UnfoldMore.tsx
+import { jsx as jsx49 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Username.tsx
+import { jsx as jsx50, jsxs as jsxs21 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/ViewAgenda.tsx
+import { jsx as jsx51, jsxs as jsxs22 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Visibility.tsx
+import { jsx as jsx52, jsxs as jsxs23 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/VisibilityOff.tsx
+import { jsx as jsx53, jsxs as jsxs24 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/WarningOutline.tsx
+import { jsx as jsx54 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Warning.tsx
+import { jsx as jsx55 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Wifi.tsx
+import { jsx as jsx56 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Settings.tsx
+import { jsx as jsx57 } from "react/jsx-runtime";
+
+// src/Tag.styled.ts
+import styled from "@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 = styled.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 = styled.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
+import { jsx as jsx58, jsxs as jsxs25 } from "react/jsx-runtime";
+var Tag = 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 = useRef(null);
+    const [isOverflow, setIsOverflow] = useState(false);
+    const handleClickOnEnterKey = (event) => {
+      if (event.code === "Enter") {
+        handleClickTag(event);
+      }
+    };
+    const handleCloseOnEnterKey = (event) => {
+      if (event.code === "Enter") {
+        onClose == null ? void 0 : onClose(event);
+      }
+    };
+    useEffect(() => {
+      if (cellRef.current) {
+        const { current } = cellRef;
+        setIsOverflow(current.scrollWidth > current.clientWidth);
+      }
+    }, [children]);
+    return /* @__PURE__ */ jsxs25(Tooltip, { children: [
+      /* @__PURE__ */ jsxs25(
+        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__ */ jsx58("span", { ref: cellRef, children }),
+            isDismissible ? /* @__PURE__ */ jsx58(
+              TagButtonCloseStyled,
+              {
+                "aria-disabled": isDisabled,
+                color,
+                "data-testid": `${dataTestIdName}-close-button`,
+                disabled: isDisabled,
+                onClick: onClose,
+                onKeyDown: handleCloseOnEnterKey,
+                tabIndex: 0,
+                children: /* @__PURE__ */ jsx58(Close_default, { height: 12, width: 12 })
+              }
+            ) : null
+          ]
+        })
+      ),
+      /* @__PURE__ */ jsx58(Tooltip.Content, { background: tooltipVariant, children: isOverflow ? children : "" })
+    ] });
+  }
+);
+export {
+  Tag
+};

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@dt-dds/react-tag",
+  "version": "1.0.0-beta.43",
+  "license": "MIT",
+  "exports": {
+    ".": "./dist/index.js"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/**"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint --cache .",
+    "test": "jest",
+    "test:report": "open ./jest-coverage/lcov-report/index.html",
+    "test:update:snapshot": "jest -u"
+  },
+  "dependencies": {
+    "@dt-dds/react-core": "1.0.0-beta.41",
+    "@dt-dds/react-tooltip": "1.0.0-beta.49"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.22.9",
+    "@babel/preset-env": "^7.22.9",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/preset-typescript": "^7.23.3",
+    "@emotion/babel-plugin": "^11.11.0",
+    "@emotion/css": "^11.7.1",
+    "@emotion/jest": "^11.10.0",
+    "@emotion/react": "^11.8.2",
+    "@emotion/styled": "^11.8.1",
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.4",
+    "babel-loader": "^8.3.0",
+    "eslint-config-custom": "*",
+    "eslint-plugin-storybook": "^9.1.0",
+    "jest-config": "*",
+    "react": "^18.1.0",
+    "react-dom": "^18.2.0",
+    "tsconfig": "*",
+    "tsup": "^6.6.3",
+    "typescript": "^4.5.3"
+  },
+  "peerDependencies": {
+    "@emotion/css": "^11.7.1",
+    "@emotion/react": "^11.8.2",
+    "@emotion/styled": "^11.8.1",
+    "react": ">=17.0.2",
+    "react-dom": ">=17.0.2"
+  }
+}