@pushwoosh/smart-components-kit 2.1.0 → 2.1.2

package/DynamicContentPicker/assets/arrow.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="10" height="20" fill="none"><mask id="a" fill="#fff"><path fill-rule="evenodd" d="M0 2a2 2 0 0 1 4 0v1.26a2 2 0 0 0 .598 1.426L8.55 8.574a2 2 0 0 1 0 2.852l-3.953 3.888A2 2 0 0 0 4 16.74V18a2 2 0 1 1-4 0z" clip-rule="evenodd"/></mask><path fill="#F7F9FA" fill-rule="evenodd" d="M0 2a2 2 0 0 1 4 0v1.26a2 2 0 0 0 .598 1.426L8.55 8.574a2 2 0 0 1 0 2.852l-3.953 3.888A2 2 0 0 0 4 16.74V18a2 2 0 1 1-4 0z" clip-rule="evenodd"/><path fill="#DCE1E5" d="m4.598 15.314.7.713zM3 3.26V2h2v1.26zm4.85 6.027L3.896 5.4 5.3 3.973 9.252 7.86zm-3.954 5.314 3.954-3.888 1.402 1.426L5.3 16.027zM3 18v-1.26h2V18zM1 2v16h-2V2zm1 19a3 3 0 0 1-3-3h2a1 1 0 0 0 1 1zm3-3a3 3 0 0 1-3 3v-2a1 1 0 0 0 1-1zm.299-1.973A1 1 0 0 0 5 16.74H3a3 3 0 0 1 .896-2.138L5.3 16.026zm3.953-8.166a3 3 0 0 1 0 4.278L7.85 10.713a1 1 0 0 0 0-1.426zM5 3.26a1 1 0 0 0 .299.713L3.896 5.399A3 3 0 0 1 3 3.259zM2 1a1 1 0 0 0-1 1h-2a3 3 0 0 1 3-3zm0-2a3 3 0 0 1 3 3H3a1 1 0 0 0-1-1z" mask="url(#a)"/><path stroke="#F7F9FA" stroke-width="3" d="M1.5 0v20"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="20" fill="none"><mask id="a" fill="#fff"><path fill-rule="evenodd" d="M0 2a2 2 0 0 1 4 0v1.26a2 2 0 0 0 .598 1.426L8.55 8.574a2 2 0 0 1 0 2.852l-3.953 3.888A2 2 0 0 0 4 16.74V18a2 2 0 1 1-4 0z" clip-rule="evenodd"/></mask><path fill="var(--pw-color-frozen, #F7F9FA)" fill-rule="evenodd" d="M0 2a2 2 0 0 1 4 0v1.26a2 2 0 0 0 .598 1.426L8.55 8.574a2 2 0 0 1 0 2.852l-3.953 3.888A2 2 0 0 0 4 16.74V18a2 2 0 1 1-4 0z" clip-rule="evenodd"/><path fill="var(--pw-color-form, #DCE1E5)" d="m4.598 15.314.7.713zM3 3.26V2h2v1.26zm4.85 6.027L3.896 5.4 5.3 3.973 9.252 7.86zm-3.954 5.314 3.954-3.888 1.402 1.426L5.3 16.027zM3 18v-1.26h2V18zM1 2v16h-2V2zm1 19a3 3 0 0 1-3-3h2a1 1 0 0 0 1 1zm3-3a3 3 0 0 1-3 3v-2a1 1 0 0 0 1-1zm.299-1.973A1 1 0 0 0 5 16.74H3a3 3 0 0 1 .896-2.138L5.3 16.026zm3.953-8.166a3 3 0 0 1 0 4.278L7.85 10.713a1 1 0 0 0 0-1.426zM5 3.26a1 1 0 0 0 .299.713L3.896 5.399A3 3 0 0 1 3 3.259zM2 1a1 1 0 0 0-1 1h-2a3 3 0 0 1 3-3zm0-2a3 3 0 0 1 3 3H3a1 1 0 0 0-1-1z" mask="url(#a)"/><path stroke="var(--pw-color-frozen, #F7F9FA)" stroke-width="3" d="M1.5 0v20"/></svg>

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.0",
+  "version": "2.1.2",
   "description": "Stateful, data-connected React components shared by Pushwoosh micro-frontends",
   "repository": {
     "type": "git",
@@ -17,10 +17,10 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.2",
-    "@pushwoosh/dumb-components": "^4.2.0",
+    "@pushwoosh/dumb-components": "^4.4.0",
     "@pushwoosh/kit-constants": "^3.0.0",
     "@pushwoosh/kit-helpers": "^4.16.0",
-    "@pushwoosh/kit-icons": "^2.3.10",
+    "@pushwoosh/kit-icons": "^2.3.15",
     "@pushwoosh/kit-typography": "^2.0.0",
     "@pushwoosh/rpc-v2-http-api-data": "^0.2.409",
     "jwt-decode": "^4.0.0",
@@ -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",