@snack-uikit/breadcrumbs 0.8.55 → 0.8.56

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.8.56 (2024-09-23)
+
+
+### Bug Fixes
+
+* **PDS-480:** remove direct usage of browser api elements ([1231ff7](https://github.com/cloud-ru-tech/snack-uikit/commit/1231ff7ab7a1b210b579a7b694633ef23bffcf44))
+
+
+
+
+
 ## 0.8.55 (2024-09-06)
 
 ### Only dependencies have been changed

package/dist/components/Collapse/styles.module.css

@@ -10,7 +10,7 @@
   outline-width:var(--border-state-focus-s-border-width, 2px);
   outline-style:var(--border-state-focus-s-border-style, solid);
   outline-color:var(--border-state-focus-s-border-color, );
-  outline-color:var(--sys-available-complementary, #15151b);
+  outline-color:var(--sys-available-complementary, #1c1c24);
 }
 
 .collapsedRow{

package/dist/components/Crumb/styles.module.css

@@ -30,7 +30,7 @@
   outline-width:var(--border-state-focus-s-border-width, 2px);
   outline-style:var(--border-state-focus-s-border-style, solid);
   outline-color:var(--border-state-focus-s-border-color, );
-  outline-color:var(--sys-available-complementary, #15151b);
+  outline-color:var(--sys-available-complementary, #1c1c24);
 }
 .crumb[data-size=xs], a.crumb[data-size=xs]{
   height:var(--size-breadcrumbs-xs, 16px);

package/dist/hooks.js

@@ -72,7 +72,7 @@ export function useBreadcrumbsLayout(containerRef) {
         }, 100);
         const visibleContainerObserver = new ResizeObserver(reselectConfig);
         visibleContainerObserver.observe(visibleContainer);
-        visibleContainerObserver.observe(window.document.body);
+        visibleContainerObserver.observe(document.body);
         return () => visibleContainerObserver.disconnect();
     }, [containerRef, selectConfigForWidth]);
     return { setConfigs, currentConfig };

package/dist/utils/getMaxPossibleWidth.js

@@ -1,3 +1,4 @@
+import { isBrowser } from '@snack-uikit/utils';
 /**
  * Функция предназначена для измерения максимально возможной ширины контейнера
  * она вставляет широкую распорку, замеряет ширину и удаляет ее
@@ -7,10 +8,13 @@ export const getMaxPossibleWidth = (element) => {
     if (!element) {
         return 0;
     }
-    const spreader = document.createElement('DIV');
-    spreader.style.width = '10000px';
-    element.append(spreader);
-    const width = element.getBoundingClientRect().width;
-    element.removeChild(spreader);
-    return width;
+    if (isBrowser()) {
+        const spreader = document.createElement('div');
+        spreader.style.width = '10000px';
+        element.append(spreader);
+        const width = element.getBoundingClientRect().width;
+        element.removeChild(spreader);
+        return width;
+    }
+    return 0;
 };

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Breadcrumbs",
-  "version": "0.8.55",
+  "version": "0.8.56",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -32,11 +32,11 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/list": "0.16.1",
-    "@snack-uikit/typography": "0.6.2",
-    "@snack-uikit/utils": "3.3.0",
+    "@snack-uikit/list": "0.16.2",
+    "@snack-uikit/typography": "0.6.3",
+    "@snack-uikit/utils": "3.4.0",
     "classnames": "2.3.2",
     "lodash.debounce": "4.0.8"
   },
-  "gitHead": "f238fd8b9d363de790ebcfd189aa17cbe101f3eb"
+  "gitHead": "f9212fe04b0dbba9bedea1bb3a034ab612287841"
 }

package/src/hooks.tsx

@@ -77,6 +77,7 @@ export function useBreadcrumbsLayout(containerRef: RefObject<HTMLElement>): Brea
 
     const reselectConfig = debounce(() => {
       const width = getMaxPossibleWidth(visibleContainer);
+
       setCurrentConfig(prevConfig => {
         if (prevConfig?.containerWidth === width) {
           return prevConfig;
@@ -90,7 +91,7 @@ export function useBreadcrumbsLayout(containerRef: RefObject<HTMLElement>): Brea
     const visibleContainerObserver = new ResizeObserver(reselectConfig);
 
     visibleContainerObserver.observe(visibleContainer);
-    visibleContainerObserver.observe(window.document.body);
+    visibleContainerObserver.observe(document.body);
 
     return () => visibleContainerObserver.disconnect();
   }, [containerRef, selectConfigForWidth]);

package/src/utils/getMaxPossibleWidth.ts

@@ -1,3 +1,5 @@
+import { isBrowser } from '@snack-uikit/utils';
+
 /**
  * Функция предназначена для измерения максимально возможной ширины контейнера
  * она вставляет широкую распорку, замеряет ширину и удаляет ее
@@ -7,11 +9,16 @@ export const getMaxPossibleWidth = (element: HTMLElement): number => {
   if (!element) {
     return 0;
   }
-  const spreader = document.createElement('DIV');
-  spreader.style.width = '10000px';
-  element.append(spreader);
-  const width = element.getBoundingClientRect().width;
-  element.removeChild(spreader);
 
-  return width;
+  if (isBrowser()) {
+    const spreader = document.createElement('div');
+    spreader.style.width = '10000px';
+    element.append(spreader);
+    const width = element.getBoundingClientRect().width;
+    element.removeChild(spreader);
+
+    return width;
+  }
+
+  return 0;
 };