@snack-uikit/breadcrumbs 0.11.21-preview-68d9b028.0 → 0.11.21

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.11.21 (2025-08-13)
+
+
+### Bug Fixes
+
+* **FF-0000:** render with outdated props from debounce ([ba0a749](https://github.com/cloud-ru-tech/snack-uikit/commit/ba0a74980b209c1f3f74c2453875ae1c02771030))
+
+
+
+
+
 ## 0.11.20 (2025-07-23)
 
 ### Only dependencies have been changed

package/dist/cjs/hooks.js

@@ -38,21 +38,6 @@ const selectConfig = (containerWidth, configs) => {
     };
   }
 };
-const useCustomDebounce = (delay, initFn) => {
-  const debounceRef = (0, react_1.useRef)(initFn);
-  const debouncedFn = (0, react_1.useMemo)(() => (0, lodash_debounce_1.default)(() => {
-    var _a;
-    return (_a = debounceRef === null || debounceRef === void 0 ? void 0 : debounceRef.current) === null || _a === void 0 ? void 0 : _a.call(debounceRef);
-  }, delay), [delay]);
-  const updateDebounceFn = (0, react_1.useCallback)(fn => {
-    debounceRef.current = fn;
-    debouncedFn();
-  }, [debouncedFn]);
-  return {
-    debouncedFn,
-    updateDebounceFn
-  };
-};
 /**
  * Расчет способа отображения breadcrumbs работает следующим образом:
  * Каждый item может быть отображен в одном из режимов:
@@ -68,47 +53,24 @@ const useCustomDebounce = (delay, initFn) => {
  *  Для того чтоб отобразить breadcrumbs, нужно подобрать конфиг, максимальный по ширине, влезающий в контейнер, но с минимальным весом (наименьшим количеством сокращений).
  */
 function useBreadcrumbsLayout(containerRef) {
-  const [currentConfig, setCurrentConfig] = (0, react_1.useState)(undefined);
   const [configs, setConfigs] = (0, react_1.useState)([]);
-  const {
-    debouncedFn,
-    updateDebounceFn
-  } = useCustomDebounce(100);
-  const selectConfigForWidth = (0, react_1.useCallback)(width => selectConfig(width, configs), [configs]);
-  /**
-   * Подбор подходящего конфига триггерится изменением ширины контейнера и изменением набора конфигов
-   */
+  const [width, setWidth] = (0, react_1.useState)(0);
   (0, react_1.useEffect)(() => {
     var _a;
     const visibleContainer = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
     if (!visibleContainer) {
       return;
     }
-    setCurrentConfig(selectConfig((0, utils_1.getMaxPossibleWidth)(visibleContainer), configs));
-  }, [configs, containerRef]);
-  (0, react_1.useEffect)(() => {
-    var _a;
-    const visibleContainer = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
-    if (!visibleContainer) {
-      return;
-    }
-    updateDebounceFn(() => {
-      const width = (0, utils_1.getMaxPossibleWidth)(visibleContainer);
-      setCurrentConfig(prevConfig => {
-        if ((prevConfig === null || prevConfig === void 0 ? void 0 : prevConfig.containerWidth) === width) {
-          return prevConfig;
-        }
-        const newConf = selectConfigForWidth(width);
-        return newConf || (prevConfig ? Object.assign(Object.assign({}, prevConfig), {
-          containerWidth: width
-        }) : prevConfig);
-      });
-    });
-    const visibleContainerObserver = new ResizeObserver(debouncedFn);
+    setWidth((0, utils_1.getMaxPossibleWidth)(visibleContainer));
+    const reselectConfig = (0, lodash_debounce_1.default)(() => {
+      setWidth((0, utils_1.getMaxPossibleWidth)(visibleContainer));
+    }, 100);
+    const visibleContainerObserver = new ResizeObserver(reselectConfig);
     visibleContainerObserver.observe(visibleContainer);
     visibleContainerObserver.observe(document.body);
     return () => visibleContainerObserver.disconnect();
-  }, [containerRef, selectConfigForWidth, debouncedFn, updateDebounceFn]);
+  }, [containerRef]);
+  const currentConfig = (0, react_1.useMemo)(() => selectConfig(width, configs), [width, configs]);
   return {
     setConfigs,
     currentConfig

package/dist/cjs/types.d.ts

@@ -4,7 +4,6 @@ import { ELEMENT_TYPE, ITEM_RENDER_MODE, SIZE } from './constants';
 export type Size = ValueOf<typeof SIZE>;
 export type ElementType = ValueOf<typeof ELEMENT_TYPE>;
 export type ItemRenderMode = ValueOf<typeof ITEM_RENDER_MODE>;
-export type Fn = () => void;
 export type Item = {
     id: string;
     label: string;

package/dist/esm/hooks.js

@@ -1,5 +1,5 @@
 import debounce from 'lodash.debounce';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { getMaxPossibleWidth } from './utils';
 const selectConfig = (containerWidth, configs) => {
     if (!configs.length) {
@@ -25,15 +25,6 @@ const selectConfig = (containerWidth, configs) => {
         return { chain: bestConfig.chain, containerWidth, chainWidth: bestConfig.width };
     }
 };
-const useCustomDebounce = (delay, initFn) => {
-    const debounceRef = useRef(initFn);
-    const debouncedFn = useMemo(() => debounce(() => { var _a; return (_a = debounceRef === null || debounceRef === void 0 ? void 0 : debounceRef.current) === null || _a === void 0 ? void 0 : _a.call(debounceRef); }, delay), [delay]);
-    const updateDebounceFn = useCallback((fn) => {
-        debounceRef.current = fn;
-        debouncedFn();
-    }, [debouncedFn]);
-    return { debouncedFn, updateDebounceFn };
-};
 /**
  * Расчет способа отображения breadcrumbs работает следующим образом:
  * Каждый item может быть отображен в одном из режимов:
@@ -49,41 +40,23 @@ const useCustomDebounce = (delay, initFn) => {
  *  Для того чтоб отобразить breadcrumbs, нужно подобрать конфиг, максимальный по ширине, влезающий в контейнер, но с минимальным весом (наименьшим количеством сокращений).
  */
 export function useBreadcrumbsLayout(containerRef) {
-    const [currentConfig, setCurrentConfig] = useState(undefined);
     const [configs, setConfigs] = useState([]);
-    const { debouncedFn, updateDebounceFn } = useCustomDebounce(100);
-    const selectConfigForWidth = useCallback((width) => selectConfig(width, configs), [configs]);
-    /**
-     * Подбор подходящего конфига триггерится изменением ширины контейнера и изменением набора конфигов
-     */
-    useEffect(() => {
-        var _a;
-        const visibleContainer = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
-        if (!visibleContainer) {
-            return;
-        }
-        setCurrentConfig(selectConfig(getMaxPossibleWidth(visibleContainer), configs));
-    }, [configs, containerRef]);
+    const [width, setWidth] = useState(0);
     useEffect(() => {
         var _a;
         const visibleContainer = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
         if (!visibleContainer) {
             return;
         }
-        updateDebounceFn(() => {
-            const width = getMaxPossibleWidth(visibleContainer);
-            setCurrentConfig(prevConfig => {
-                if ((prevConfig === null || prevConfig === void 0 ? void 0 : prevConfig.containerWidth) === width) {
-                    return prevConfig;
-                }
-                const newConf = selectConfigForWidth(width);
-                return newConf || (prevConfig ? Object.assign(Object.assign({}, prevConfig), { containerWidth: width }) : prevConfig);
-            });
-        });
-        const visibleContainerObserver = new ResizeObserver(debouncedFn);
+        setWidth(getMaxPossibleWidth(visibleContainer));
+        const reselectConfig = debounce(() => {
+            setWidth(getMaxPossibleWidth(visibleContainer));
+        }, 100);
+        const visibleContainerObserver = new ResizeObserver(reselectConfig);
         visibleContainerObserver.observe(visibleContainer);
         visibleContainerObserver.observe(document.body);
         return () => visibleContainerObserver.disconnect();
-    }, [containerRef, selectConfigForWidth, debouncedFn, updateDebounceFn]);
+    }, [containerRef]);
+    const currentConfig = useMemo(() => selectConfig(width, configs), [width, configs]);
     return { setConfigs, currentConfig };
 }

package/dist/esm/types.d.ts

@@ -4,7 +4,6 @@ import { ELEMENT_TYPE, ITEM_RENDER_MODE, SIZE } from './constants';
 export type Size = ValueOf<typeof SIZE>;
 export type ElementType = ValueOf<typeof ELEMENT_TYPE>;
 export type ItemRenderMode = ValueOf<typeof ITEM_RENDER_MODE>;
-export type Fn = () => void;
 export type Item = {
     id: string;
     label: string;

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Breadcrumbs",
-  "version": "0.11.21-preview-68d9b028.0",
+  "version": "0.11.21",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -42,5 +42,5 @@
     "classnames": "2.5.1",
     "lodash.debounce": "4.0.8"
   },
-  "gitHead": "f1998d9fa0d43601b504c1b4ca4a8755ac533567"
+  "gitHead": "30eefce4500ba1f3256ff1bbccc07af26ded88bf"
 }

package/src/hooks.tsx

@@ -1,7 +1,7 @@
 import debounce from 'lodash.debounce';
-import { RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { RefObject, useEffect, useMemo, useState } from 'react';
 
-import { BreadcrumbsConfig, CurrentConfigState, Fn } from './types';
+import { BreadcrumbsConfig, CurrentConfigState } from './types';
 import { getMaxPossibleWidth } from './utils';
 
 export type BreadcrumbsLayout = {
@@ -35,22 +35,6 @@ const selectConfig = (containerWidth: number, configs: BreadcrumbsConfig[]): Cur
   }
 };
 
-const useCustomDebounce = (delay: number, initFn?: Fn) => {
-  const debounceRef = useRef<Fn | undefined>(initFn);
-
-  const debouncedFn = useMemo(() => debounce(() => debounceRef?.current?.(), delay), [delay]);
-
-  const updateDebounceFn = useCallback(
-    (fn: Fn) => {
-      debounceRef.current = fn;
-      debouncedFn();
-    },
-    [debouncedFn],
-  );
-
-  return { debouncedFn, updateDebounceFn };
-};
-
 /**
  * Расчет способа отображения breadcrumbs работает следующим образом:
  * Каждый item может быть отображен в одном из режимов:
@@ -66,16 +50,9 @@ const useCustomDebounce = (delay: number, initFn?: Fn) => {
  *  Для того чтоб отобразить breadcrumbs, нужно подобрать конфиг, максимальный по ширине, влезающий в контейнер, но с минимальным весом (наименьшим количеством сокращений).
  */
 export function useBreadcrumbsLayout(containerRef: RefObject<HTMLElement>): BreadcrumbsLayout {
-  const [currentConfig, setCurrentConfig] = useState<CurrentConfigState | undefined>(undefined);
   const [configs, setConfigs] = useState<BreadcrumbsConfig[]>([]);
+  const [width, setWidth] = useState(0);
 
-  const { debouncedFn, updateDebounceFn } = useCustomDebounce(100);
-
-  const selectConfigForWidth = useCallback((width: number) => selectConfig(width, configs), [configs]);
-
-  /**
-   * Подбор подходящего конфига триггерится изменением ширины контейнера и изменением набора конфигов
-   */
   useEffect(() => {
     const visibleContainer = containerRef.current?.parentElement;
 
@@ -83,36 +60,20 @@ export function useBreadcrumbsLayout(containerRef: RefObject<HTMLElement>): Brea
       return;
     }
 
-    setCurrentConfig(selectConfig(getMaxPossibleWidth(visibleContainer), configs));
-  }, [configs, containerRef]);
+    setWidth(getMaxPossibleWidth(visibleContainer));
 
-  useEffect(() => {
-    const visibleContainer = containerRef.current?.parentElement;
-
-    if (!visibleContainer) {
-      return;
-    }
-
-    updateDebounceFn(() => {
-      const width = getMaxPossibleWidth(visibleContainer);
-
-      setCurrentConfig(prevConfig => {
-        if (prevConfig?.containerWidth === width) {
-          return prevConfig;
-        }
-
-        const newConf = selectConfigForWidth(width);
-        return newConf || (prevConfig ? { ...prevConfig, containerWidth: width } : prevConfig);
-      });
-    });
-
-    const visibleContainerObserver = new ResizeObserver(debouncedFn);
+    const reselectConfig = debounce(() => {
+      setWidth(getMaxPossibleWidth(visibleContainer));
+    }, 100);
 
+    const visibleContainerObserver = new ResizeObserver(reselectConfig);
     visibleContainerObserver.observe(visibleContainer);
     visibleContainerObserver.observe(document.body);
 
     return () => visibleContainerObserver.disconnect();
-  }, [containerRef, selectConfigForWidth, debouncedFn, updateDebounceFn]);
+  }, [containerRef]);
+
+  const currentConfig = useMemo(() => selectConfig(width, configs), [width, configs]);
 
   return { setConfigs, currentConfig };
 }

package/src/types.ts

@@ -10,8 +10,6 @@ export type ElementType = ValueOf<typeof ELEMENT_TYPE>;
 
 export type ItemRenderMode = ValueOf<typeof ITEM_RENDER_MODE>;
 
-export type Fn = () => void;
-
 export type Item = {
   id: string;
   label: string;