@dt-dds/react-breadcrumb 1.0.0-beta.51

package/dist/index.mjs

@@ -0,0 +1,414 @@
+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/Breadcrumb.tsx
+import { Tooltip } from "@dt-dds/react-tooltip";
+import { Children as Children2, cloneElement as cloneElement2, isValidElement as isValidElement2 } 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";
+var ArrowRight = (props) => {
+  return /* @__PURE__ */ jsx7(
+    "svg",
+    __spreadProps(__spreadValues({
+      fill: "none",
+      height: "12",
+      viewBox: "0 0 8 12",
+      width: "8",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, props), {
+      children: /* @__PURE__ */ jsx7(
+        "path",
+        {
+          clipRule: "evenodd",
+          d: "M6.99468 4.99507C7.18215 5.1826 7.28747 5.4369 7.28747 5.70207C7.28747 5.96723 7.18215 6.22154 6.99468 6.40907L2.40168 11.0021C2.21539 11.1846 1.96458 11.2863 1.70375 11.285C1.44292 11.2837 1.19315 11.1795 1.00871 10.995C0.824278 10.8106 0.72008 10.5608 0.718763 10.3C0.717445 10.0392 0.819115 9.78836 1.00168 9.60207L4.90168 5.70207L1.00168 1.80207C0.819115 1.61578 0.717445 1.36497 0.718763 1.10414C0.72008 0.843312 0.824278 0.593541 1.00871 0.409105C1.19315 0.224668 1.44292 0.120471 1.70375 0.119153C1.96458 0.117836 2.21539 0.219506 2.40168 0.402069L6.99468 4.99507Z",
+          fill: "currentColor",
+          fillRule: "evenodd"
+        }
+      )
+    })
+  );
+};
+var ArrowRight_default = ArrowRight;
+
+// ../../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";
+
+// ../../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";
+var MoreHorizontal = (props) => {
+  return /* @__PURE__ */ jsx33(
+    "svg",
+    __spreadProps(__spreadValues({
+      fill: "currentColor",
+      height: "24",
+      viewBox: "0 0 24 24",
+      width: "24",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, props), {
+      children: /* @__PURE__ */ jsx33("path", { d: "M6 10C4.9 10 4 10.9 4 12C4 13.1 4.9 14 6 14C7.1 14 8 13.1 8 12C8 10.9 7.1 10 6 10ZM18 10C16.9 10 16 10.9 16 12C16 13.1 16.9 14 18 14C19.1 14 20 13.1 20 12C20 10.9 19.1 10 18 10ZM12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10Z" })
+    })
+  );
+};
+var MoreHorizontal_default = MoreHorizontal;
+
+// ../../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/Breadcrumb.styled.ts
+import styled from "@emotion/styled";
+var BreadcrumbStyled = styled.nav`
+  ${({ theme }) => `
+    ${theme.fontStyles.body2}
+    color: ${theme.palette.secondary.default};
+    overflow: hidden;
+  `}
+`;
+var ListStyled = styled.ul`
+  padding: 0px;
+  margin: 0px;
+  width: 100%;
+  list-style: none;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  gap: ${({ theme }) => theme.spacing["4xs"]};
+`;
+var ItemStyled = styled.li`
+  ${({ theme }) => `
+    display: flex;
+
+    &:not(:last-child) {
+      ${theme.fontStyles.link2}
+      color: ${theme.palette.accent.default};
+      cursor: pointer;
+
+      svg {
+        color: ${theme.palette.accent.default};
+      }
+      
+      & * {
+        text-decoration: underline;
+      }
+      
+      &:hover {
+        color: ${theme.palette.accent.dark};
+
+        svg {
+          color: ${theme.palette.accent.dark};
+        }
+      }
+    }
+
+    a {
+      color: inherit;
+    }
+
+    svg {
+      color: ${theme.palette.secondary.default};
+    }
+
+    &:last-child * {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  `}
+`;
+var ItemContainerStyled = styled.div`
+  ${({ theme }) => `
+    display: flex;
+    align-items: center;
+    gap: ${theme.spacing["5xs"]};
+  `}
+`;
+
+// src/hooks/useCollapsedBreadcrumb.tsx
+import { useDebounceResize, useMedia } from "@dt-dds/react-core";
+import { useTheme as useTheme3 } from "@emotion/react";
+import {
+  Children,
+  isValidElement,
+  cloneElement,
+  useCallback,
+  useRef,
+  useState
+} from "react";
+import { jsx as jsx58 } from "react/jsx-runtime";
+var isBreadcrumbRefValid = (breadcrumbRef, breadcrumbListRef) => {
+  return !!breadcrumbRef.current && !!breadcrumbListRef.current;
+};
+var useCollapsedBreadcrumb = (children) => {
+  const breadcrumbRef = useRef(null);
+  const breadcrumbListRef = useRef(null);
+  const theme = useTheme3();
+  const isDesktop = useMedia(`(min-width: ${theme.breakpoints.m}px)`);
+  const [visibleChildren, setVisibleChildren] = useState(children);
+  const breadcrumbResize = useCallback(() => {
+    if (isDesktop || !isBreadcrumbRefValid(breadcrumbRef, breadcrumbListRef)) {
+      setVisibleChildren(children);
+      return;
+    }
+    const childrenArray = Children.toArray(children);
+    const isBreadcrumbsTooLarge = breadcrumbListRef.current.scrollWidth > breadcrumbRef.current.clientWidth;
+    if (isBreadcrumbsTooLarge) {
+      const lastChild = childrenArray[childrenArray.length - 1];
+      const modifiedChildren = [
+        childrenArray[0],
+        /* @__PURE__ */ jsx58(Breadcrumb.Item, { children: /* @__PURE__ */ jsx58(MoreHorizontal_default, {}) }, "more-icon"),
+        isValidElement(lastChild) ? cloneElement(lastChild, __spreadProps(__spreadValues({}, lastChild.props), {
+          style: { overflow: "hidden" }
+        })) : lastChild
+      ];
+      setVisibleChildren(modifiedChildren);
+    }
+  }, [children, isDesktop, breadcrumbRef, breadcrumbListRef]);
+  useDebounceResize(breadcrumbResize);
+  return { visibleChildren, breadcrumbRef, breadcrumbListRef };
+};
+
+// src/Breadcrumb.tsx
+import { Fragment, jsx as jsx59, jsxs as jsxs25 } from "react/jsx-runtime";
+var BREADCRUMB_CHARACTER_LIMIT = 30;
+var Breadcrumb = ({
+  children,
+  separator = "slash"
+}) => {
+  const { visibleChildren, breadcrumbRef, breadcrumbListRef } = useCollapsedBreadcrumb(children);
+  return /* @__PURE__ */ jsx59(
+    BreadcrumbStyled,
+    {
+      "aria-label": "Breadcrumb",
+      "data-testid": "breadcrumb",
+      ref: breadcrumbRef,
+      children: /* @__PURE__ */ jsx59(ListStyled, { ref: breadcrumbListRef, children: withSeparator(visibleChildren, separator) })
+    }
+  );
+};
+var BreadcrumbItem = ({ children, style }) => {
+  const { truncatedChildren, tooltip } = mapTruncateChildren(children);
+  return /* @__PURE__ */ jsx59(ItemStyled, { style, children: /* @__PURE__ */ jsxs25(Tooltip, { style: { overflow: "hidden" }, children: [
+    /* @__PURE__ */ jsx59(ItemContainerStyled, { children: truncatedChildren }),
+    /* @__PURE__ */ jsx59(Tooltip.Content, { children: tooltip })
+  ] }) });
+};
+var truncateText = (text) => {
+  if (text.length >= BREADCRUMB_CHARACTER_LIMIT) {
+    return `${text.substring(0, BREADCRUMB_CHARACTER_LIMIT)}...`;
+  }
+  return text;
+};
+var mapTruncateChildren = (children) => {
+  let tooltip = "";
+  return {
+    truncatedChildren: Children2.map(children, (child) => {
+      if (typeof child === "string") {
+        const truncatedText = truncateText(child);
+        tooltip = truncatedText !== child ? child : "";
+        return truncatedText;
+      } else if (isValidElement2(child)) {
+        const { truncatedChildren, tooltip: childTooltip } = mapTruncateChildren(child.props.children);
+        tooltip = childTooltip;
+        return cloneElement2(child, __spreadProps(__spreadValues({}, child.props), {
+          children: truncatedChildren
+        }));
+      } else {
+        return null;
+      }
+    }),
+    tooltip
+  };
+};
+var withSeparator = (children, separator) => {
+  const addSeparator = () => ({
+    slash: /* @__PURE__ */ jsx59("span", { children: "/" }),
+    arrow: /* @__PURE__ */ jsx59(ArrowRight_default, {})
+  })[separator];
+  const isLastBreadcrumb = (index) => Children2.count(children) - 1 === index;
+  return Children2.map(children, (child, index) => /* @__PURE__ */ jsxs25(Fragment, { children: [
+    child,
+    !isLastBreadcrumb(index) && addSeparator()
+  ] }));
+};
+Breadcrumb.Item = BreadcrumbItem;
+export {
+  Breadcrumb
+};

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@dt-dds/react-breadcrumb",
+  "version": "1.0.0-beta.51",
+  "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",
+    "@dt-dds/react-icon": "1.0.0-beta.42"
+  },
+  "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"
+  }
+}