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

package/dist/index.js

@@ -0,0 +1,441 @@
+"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 breadcrumb_exports = {};
+__export(breadcrumb_exports, {
+  Breadcrumb: () => Breadcrumb
+});
+module.exports = __toCommonJS(breadcrumb_exports);
+
+// src/Breadcrumb.tsx
+var import_react_tooltip = require("@dt-dds/react-tooltip");
+var import_react5 = 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");
+var ArrowRight = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "svg",
+    __spreadProps(__spreadValues({
+      fill: "none",
+      height: "12",
+      viewBox: "0 0 8 12",
+      width: "8",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, props), {
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "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
+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");
+
+// ../../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");
+var MoreHorizontal = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    "svg",
+    __spreadProps(__spreadValues({
+      fill: "currentColor",
+      height: "24",
+      viewBox: "0 0 24 24",
+      width: "24",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, props), {
+      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("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
+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/Breadcrumb.styled.ts
+var import_styled = __toESM(require("@emotion/styled"));
+var BreadcrumbStyled = import_styled.default.nav`
+  ${({ theme }) => `
+    ${theme.fontStyles.body2}
+    color: ${theme.palette.secondary.default};
+    overflow: hidden;
+  `}
+`;
+var ListStyled = import_styled.default.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 = import_styled.default.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 = import_styled.default.div`
+  ${({ theme }) => `
+    display: flex;
+    align-items: center;
+    gap: ${theme.spacing["5xs"]};
+  `}
+`;
+
+// src/hooks/useCollapsedBreadcrumb.tsx
+var import_react_core = require("@dt-dds/react-core");
+var import_react3 = require("@emotion/react");
+var import_react4 = require("react");
+var import_jsx_runtime58 = require("react/jsx-runtime");
+var isBreadcrumbRefValid = (breadcrumbRef, breadcrumbListRef) => {
+  return !!breadcrumbRef.current && !!breadcrumbListRef.current;
+};
+var useCollapsedBreadcrumb = (children) => {
+  const breadcrumbRef = (0, import_react4.useRef)(null);
+  const breadcrumbListRef = (0, import_react4.useRef)(null);
+  const theme = (0, import_react3.useTheme)();
+  const isDesktop = (0, import_react_core.useMedia)(`(min-width: ${theme.breakpoints.m}px)`);
+  const [visibleChildren, setVisibleChildren] = (0, import_react4.useState)(children);
+  const breadcrumbResize = (0, import_react4.useCallback)(() => {
+    if (isDesktop || !isBreadcrumbRefValid(breadcrumbRef, breadcrumbListRef)) {
+      setVisibleChildren(children);
+      return;
+    }
+    const childrenArray = import_react4.Children.toArray(children);
+    const isBreadcrumbsTooLarge = breadcrumbListRef.current.scrollWidth > breadcrumbRef.current.clientWidth;
+    if (isBreadcrumbsTooLarge) {
+      const lastChild = childrenArray[childrenArray.length - 1];
+      const modifiedChildren = [
+        childrenArray[0],
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Breadcrumb.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(MoreHorizontal_default, {}) }, "more-icon"),
+        (0, import_react4.isValidElement)(lastChild) ? (0, import_react4.cloneElement)(lastChild, __spreadProps(__spreadValues({}, lastChild.props), {
+          style: { overflow: "hidden" }
+        })) : lastChild
+      ];
+      setVisibleChildren(modifiedChildren);
+    }
+  }, [children, isDesktop, breadcrumbRef, breadcrumbListRef]);
+  (0, import_react_core.useDebounceResize)(breadcrumbResize);
+  return { visibleChildren, breadcrumbRef, breadcrumbListRef };
+};
+
+// src/Breadcrumb.tsx
+var import_jsx_runtime59 = require("react/jsx-runtime");
+var BREADCRUMB_CHARACTER_LIMIT = 30;
+var Breadcrumb = ({
+  children,
+  separator = "slash"
+}) => {
+  const { visibleChildren, breadcrumbRef, breadcrumbListRef } = useCollapsedBreadcrumb(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+    BreadcrumbStyled,
+    {
+      "aria-label": "Breadcrumb",
+      "data-testid": "breadcrumb",
+      ref: breadcrumbRef,
+      children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ListStyled, { ref: breadcrumbListRef, children: withSeparator(visibleChildren, separator) })
+    }
+  );
+};
+var BreadcrumbItem = ({ children, style }) => {
+  const { truncatedChildren, tooltip } = mapTruncateChildren(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ItemStyled, { style, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_react_tooltip.Tooltip, { style: { overflow: "hidden" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ItemContainerStyled, { children: truncatedChildren }),
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react_tooltip.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: import_react5.Children.map(children, (child) => {
+      if (typeof child === "string") {
+        const truncatedText = truncateText(child);
+        tooltip = truncatedText !== child ? child : "";
+        return truncatedText;
+      } else if ((0, import_react5.isValidElement)(child)) {
+        const { truncatedChildren, tooltip: childTooltip } = mapTruncateChildren(child.props.children);
+        tooltip = childTooltip;
+        return (0, import_react5.cloneElement)(child, __spreadProps(__spreadValues({}, child.props), {
+          children: truncatedChildren
+        }));
+      } else {
+        return null;
+      }
+    }),
+    tooltip
+  };
+};
+var withSeparator = (children, separator) => {
+  const addSeparator = () => ({
+    slash: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { children: "/" }),
+    arrow: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ArrowRight_default, {})
+  })[separator];
+  const isLastBreadcrumb = (index) => import_react5.Children.count(children) - 1 === index;
+  return import_react5.Children.map(children, (child, index) => /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
+    child,
+    !isLastBreadcrumb(index) && addSeparator()
+  ] }));
+};
+Breadcrumb.Item = BreadcrumbItem;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Breadcrumb
+});