@pushwoosh/smart-components-kit 2.1.1 → 2.1.2

package/MediaStorage/CanvaImportDrawer.js

@@ -53,10 +53,13 @@ export const CanvaImportDrawer = ({
       query: debouncedQuery
     });
   }, [rpcGateway, isOpen, isReady, debouncedQuery]);
-  useEffect(() => {
+  const designsDeps = [designsAsync.value];
+  const [prevDesignsDeps, setPrevDesignsDeps] = useState(null);
+  if (prevDesignsDeps === null || designsDeps.some((dep, index) => dep !== prevDesignsDeps[index])) {
+    setPrevDesignsDeps(designsDeps);
     setDesigns(designsAsync.value?.designs ?? []);
     setContinuation(designsAsync.value?.continuation ?? '');
-  }, [designsAsync.value]);
+  }
   useEffect(() => {
     if (designsAsync.error) {
       openToast({

package/MediaStorage/CreateCropDrawer.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useLayoutEffect, useRef, useState } from 'react';
 import { Button, Chip, Drawer, DrawerBody, DrawerHeader, DrawerTitle, ModalConfirm, NativeInput, useToast } from '@pushwoosh/dumb-components';
 import { Color } from '@pushwoosh/kit-constants';
 import { Columns, Vertical } from '@pushwoosh/kit-helpers';
@@ -96,7 +96,10 @@ export const CreateCropDrawer = ({
   // The drawer mounts once and is toggled via `isOpen`, so reset every field
   // whenever it opens for a different original — otherwise values (and the
   // `ratioExists` guard) leak from the previously edited image.
-  useEffect(() => {
+  const originalDeps = [original];
+  const [prevOriginalDeps, setPrevOriginalDeps] = useState(null);
+  if (prevOriginalDeps === null || originalDeps.some((dep, index) => dep !== prevOriginalDeps[index])) {
+    setPrevOriginalDeps(originalDeps);
     if (original) {
       setRatio('original');
       setLastEdited('width');
@@ -105,7 +108,7 @@ export const CreateCropDrawer = ({
       setViewedCrop(null);
       setFocal(CENTER_FOCAL);
     }
-  }, [original]);
+  }
   const isJpeg = /jpe?g/i.test(original?.mimeType ?? '');
   const sizeValue = Number(size);
   const isSizeValid = Number.isFinite(sizeValue) && sizeValue > 0;

package/MediaStorage/MediaStorage.js

@@ -153,11 +153,18 @@ export const MediaStorage = ({
   // resolves, fetch each one's crops in the background and let the
   // "N crops" badge appear per file as soon as its request resolves. The
   // cleanup flag drops results of a page that has since been replaced.
+  const listDeps = [listAsync.value];
+  const [prevListDeps, setPrevListDeps] = useState(null);
+  if (prevListDeps === null || listDeps.some((dep, index) => dep !== prevListDeps[index])) {
+    setPrevListDeps(listDeps);
+    if (listAsync.value?.files) {
+      setCropsByUuid({});
+      setSelectedUuids([]);
+    }
+  }
   useEffect(() => {
     const originals = listAsync.value?.files;
     if (!originals) return undefined;
-    setCropsByUuid({});
-    setSelectedUuids([]);
     let cancelled = false;
     originals.forEach(file => {
       void (async () => {

package/ModalCloningJourney/ModalCloningJourney.js

@@ -49,7 +49,10 @@ export function ModalCloningJourney({
       }))
     }));
   }, [rpcGateway]);
-  useEffect(() => {
+  const applicationsDeps = [applications.value];
+  const [prevApplicationsDeps, setPrevApplicationsDeps] = useState(null);
+  if (prevApplicationsDeps === null || applicationsDeps.some((dep, index) => dep !== prevApplicationsDeps[index])) {
+    setPrevApplicationsDeps(applicationsDeps);
     if (applications.value && applications.value.length > 0) {
       const filteredApplications = applications.value.reduce((acc, item) => {
         if (item.platforms.length > 0) {
@@ -62,7 +65,7 @@ export function ModalCloningJourney({
       }, []);
       setApplicationsOptions(filteredApplications);
     }
-  }, [applications]);
+  }
   const contentOptions = [{
     label: lang({
       message: 'SMART.MODAL_CLONING_JOURNEY.CONTENT_OPTION.KEEP'

package/PickerSort/usePagedItems.js

@@ -15,14 +15,9 @@ export function usePagedItems(loadPage, resetKey, enabled = true) {
     hasMore: true,
     isFetching: false
   });
-  const fetchPage = useCallback(page => {
+  const requestPage = useCallback(page => {
     const run = runRef.current;
     cursorRef.current.isFetching = true;
-    setState(prev => ({
-      ...prev,
-      isLoading: true,
-      isError: false
-    }));
     load(page).then(({
       items,
       hasMore
@@ -52,25 +47,38 @@ export function usePagedItems(loadPage, resetKey, enabled = true) {
       }
     });
   }, [load]);
-  useEffect(() => {
-    cursorRef.current = {
-      next: 0,
-      hasMore: true,
-      isFetching: false
-    };
+  const fetchPage = useCallback(page => {
+    setState(prev => ({
+      ...prev,
+      isLoading: true,
+      isError: false
+    }));
+    requestPage(page);
+  }, [requestPage]);
+  const resetDeps = [resetKey, enabled, requestPage];
+  const [prevResetDeps, setPrevResetDeps] = useState(null);
+  if (prevResetDeps === null || resetDeps.some((dep, index) => dep !== prevResetDeps[index])) {
+    setPrevResetDeps(resetDeps);
     setState({
       items: [],
       hasMore: true,
       isLoading: enabled,
       isError: false
     });
+  }
+  useEffect(() => {
+    cursorRef.current = {
+      next: 0,
+      hasMore: true,
+      isFetching: false
+    };
     if (enabled) {
-      fetchPage(0);
+      requestPage(0);
     }
     return () => {
       runRef.current += 1;
     };
-  }, [resetKey, enabled, fetchPage]);
+  }, [resetKey, enabled, requestPage]);
   const loadMore = useCallback(() => {
     const {
       next,

package/Table/components/DataTableSearchInput/DataTableSearchInput.js

@@ -1,16 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef, useState, useEffect, useContext } from 'react';
+import { useRef, useState, useContext } from 'react';
 import { SearchInput } from '@pushwoosh/dumb-components';
 import { DataTableContext } from '../../context';
 export function DataTableSearchInput(props) {
   const context = useContext(DataTableContext);
   const [inputValue, setInputValue] = useState(context.params.search);
   const timeoutRef = useRef(undefined);
-  useEffect(() => {
+  const searchDeps = [context.params.search];
+  const [prevSearchDeps, setPrevSearchDeps] = useState(null);
+  if (prevSearchDeps === null || searchDeps.some((dep, index) => dep !== prevSearchDeps[index])) {
+    setPrevSearchDeps(searchDeps);
     if (inputValue !== context.params.search) {
       setInputValue(context.params.search);
     }
-  }, [context.params.search]); // eslint-disable-line react-hooks/exhaustive-deps
+  }
   return _jsx(SearchInput, {
     ...props,
     value: inputValue,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/smart-components-kit",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "Stateful, data-connected React components shared by Pushwoosh micro-frontends",
   "repository": {
     "type": "git",
@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.2",
-    "@pushwoosh/dumb-components": "^4.3.1",
+    "@pushwoosh/dumb-components": "^4.4.0",
     "@pushwoosh/kit-constants": "^3.0.0",
     "@pushwoosh/kit-helpers": "^4.16.0",
     "@pushwoosh/kit-icons": "^2.3.15",
@@ -28,7 +28,7 @@
   },
   "devDependencies": {
     "@pushwoosh/frontend-builder-engine": "^4.0.0",
-    "@pushwoosh/spa-context": "^3.3.0",
+    "@pushwoosh/spa-context": "^3.3.1",
     "@svgr/webpack": "^8.1.0",
     "@types/node": "^24.19.1",
     "@types/react": "^19.3.0",