@dt-dds/react-breadcrumb 1.0.0-beta.63 → 1.0.0-beta.65

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @dt-ui/react-breadcrumb
 
+## 1.0.0-beta.65
+
+### Minor Changes
+
+- feat(core): share responsive HOC from core package
+
+### Patch Changes
+
+- Updated dependencies
+  - @dt-dds/react-core@1.0.0-beta.53
+  - @dt-dds/react-icon@1.0.0-beta.56
+  - @dt-dds/react-tooltip@1.0.0-beta.62
+
+## 1.0.0-beta.64
+
+### Patch Changes
+
+- fix(config): update ESLint, TS, and Storybook config
+- fix(icon-button): add missing @dt-dds/react-icon devDependency
+- Updated dependencies
+- Updated dependencies
+  - @dt-dds/react-core@1.0.0-beta.52
+  - @dt-dds/react-icon@1.0.0-beta.55
+  - @dt-dds/react-tooltip@1.0.0-beta.61
+  - @dt-dds/themes@1.0.0-beta.10
+
 ## 1.0.0-beta.63
 
 ### Minor Changes

package/dist/index.js

@@ -52,8 +52,81 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/Breadcrumb.tsx
-var import_react_tooltip = require("@dt-dds/react-tooltip");
 var import_react5 = require("react");
+var import_react_tooltip = require("@dt-dds/react-tooltip");
+
+// src/Breadcrumb.styled.ts
+var import_styled = __toESM(require("@emotion/styled"));
+var BreadcrumbStyled = import_styled.default.nav`
+  ${({ theme }) => `
+    ${theme.fontStyles.bodyMdRegular}
+    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.spacing_30};
+`;
+var ItemStyled = import_styled.default.li`
+  ${({ theme }) => `
+    display: flex;
+
+    &:not(:last-child) {
+      ${theme.fontStyles.linkMdRegular}
+      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.spacing_20};
+  `}
+`;
+
+// src/hooks/useCollapsedBreadcrumb.tsx
+var import_react3 = require("react");
+var import_react4 = require("@emotion/react");
+var import_react_core = require("@dt-dds/react-core");
 
 // ../../dt-dds-react/core/assets/svgs/AllOut.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -266,101 +339,30 @@ 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.bodyMdRegular}
-    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.spacing_30};
-`;
-var ItemStyled = import_styled.default.li`
-  ${({ theme }) => `
-    display: flex;
-
-    &:not(:last-child) {
-      ${theme.fontStyles.linkMdRegular}
-      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.spacing_20};
-  `}
-`;
-
 // 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 breadcrumbRef = (0, import_react3.useRef)(null);
+  const breadcrumbListRef = (0, import_react3.useRef)(null);
+  const theme = (0, import_react4.useTheme)();
   const isDesktop = (0, import_react_core.useMedia)(`(min-width: ${theme.breakpoints.mq3}px)`);
-  const [visibleChildren, setVisibleChildren] = (0, import_react4.useState)(children);
-  const breadcrumbResize = (0, import_react4.useCallback)(() => {
+  const [visibleChildren, setVisibleChildren] = (0, import_react3.useState)(children);
+  const breadcrumbResize = (0, import_react3.useCallback)(() => {
     if (isDesktop || !isBreadcrumbRefValid(breadcrumbRef, breadcrumbListRef)) {
       setVisibleChildren(children);
       return;
     }
-    const childrenArray = import_react4.Children.toArray(children);
+    const childrenArray = import_react3.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), {
+        (0, import_react3.isValidElement)(lastChild) ? (0, import_react3.cloneElement)(lastChild, __spreadProps(__spreadValues({}, lastChild.props), {
           style: { overflow: "hidden" }
         })) : lastChild
       ];

package/dist/index.mjs

@@ -19,8 +19,88 @@ var __spreadValues = (a, b) => {
 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";
+import { Tooltip } from "@dt-dds/react-tooltip";
+
+// src/Breadcrumb.styled.ts
+import styled from "@emotion/styled";
+var BreadcrumbStyled = styled.nav`
+  ${({ theme }) => `
+    ${theme.fontStyles.bodyMdRegular}
+    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.spacing_30};
+`;
+var ItemStyled = styled.li`
+  ${({ theme }) => `
+    display: flex;
+
+    &:not(:last-child) {
+      ${theme.fontStyles.linkMdRegular}
+      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.spacing_20};
+  `}
+`;
+
+// src/hooks/useCollapsedBreadcrumb.tsx
+import {
+  Children,
+  isValidElement,
+  cloneElement,
+  useCallback,
+  useRef,
+  useState
+} from "react";
+import { useTheme as useTheme3 } from "@emotion/react";
+import { useDebounceResize, useMedia } from "@dt-dds/react-core";
 
 // ../../dt-dds-react/core/assets/svgs/AllOut.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -233,85 +313,7 @@ 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.bodyMdRegular}
-    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.spacing_30};
-`;
-var ItemStyled = styled.li`
-  ${({ theme }) => `
-    display: flex;
-
-    &:not(:last-child) {
-      ${theme.fontStyles.linkMdRegular}
-      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.spacing_20};
-  `}
-`;
-
 // 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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dt-dds/react-breadcrumb",
-  "version": "1.0.0-beta.63",
+  "version": "1.0.0-beta.65",
   "license": "MIT",
   "exports": {
     ".": "./dist/index.js"
@@ -20,10 +20,10 @@
     "test:update:snapshot": "jest -u"
   },
   "dependencies": {
-    "@dt-dds/react-core": "1.0.0-beta.51",
-    "@dt-dds/react-tooltip": "1.0.0-beta.60",
-    "@dt-dds/react-icon": "1.0.0-beta.54",
-    "@dt-dds/themes": "1.0.0-beta.9"
+    "@dt-dds/react-core": "1.0.0-beta.53",
+    "@dt-dds/react-tooltip": "1.0.0-beta.62",
+    "@dt-dds/react-icon": "1.0.0-beta.56",
+    "@dt-dds/themes": "1.0.0-beta.10"
   },
   "devDependencies": {
     "@babel/core": "^7.22.9",