@pushwoosh/smart-components-kit 2.1.3 → 2.1.4

package/DynamicContentPicker/DynamicContentPicker.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { arrow, autoPlacement, offset, useFloating } from '@floating-ui/react-dom';
-import { useEffect, useMemo, useReducer, useRef, useState } from 'react';
+import { useEffect, useMemo, useReducer, useState } from 'react';
 import { Color } from '@pushwoosh/kit-constants';
 import { elementAddListener, Horizontal, usePersistentFunction } from '@pushwoosh/kit-helpers';
 import { WarningRoundIcon } from '@pushwoosh/kit-icons';
@@ -32,10 +32,15 @@ export const DynamicContentPicker = ({
   error,
   renderDynamicContent
 }) => {
-  const arrowRef = useRef(null);
+  const [arrowElement, setArrowElement] = useState(null);
   const [activeVar, setActiveVar] = useState();
   const {
-    refs,
+    refs: {
+      reference,
+      floating,
+      setReference,
+      setFloating
+    },
     floatingStyles,
     update,
     middlewareData,
@@ -45,7 +50,7 @@ export const DynamicContentPicker = ({
     middleware: [offset(8), autoPlacement({
       allowedPlacements: ['left', 'left-start', 'left-end', 'right', 'right-start', 'right-end']
     }), arrow({
-      element: arrowRef
+      element: arrowElement
     })]
   });
   const [state, dispatch] = useReducer(reducer, initState || initialState);
@@ -74,14 +79,14 @@ export const DynamicContentPicker = ({
       return;
     }
     return elementAddListener(document, ['mousedown', 'touchstart', 'focusin'], event => {
-      if (refs.floating.current instanceof HTMLElement && !refs.floating.current.contains(event.target)) {
+      if (floating.current instanceof HTMLElement && !floating.current.contains(event.target)) {
         clickAwayHandler();
       }
     });
-  }, [clickAwayHandler, activeVar, refs.reference, refs.floating]);
+  }, [clickAwayHandler, activeVar, reference, floating]);
   return _jsxs(_Fragment, {
     children: [_jsxs(FieldPlace, {
-      ref: refs.setReference,
+      ref: setReference,
       children: [_jsxs(Horizontal, {
         "$padding": "8px 16px",
         "$justifyContent": "space-between",
@@ -121,7 +126,7 @@ export const DynamicContentPicker = ({
         })
       })]
     }), !!activeVar && _jsxs("div", {
-      ref: refs.setFloating,
+      ref: setFloating,
       style: floatingStyles,
       children: [renderDynamicContent ? renderDynamicContent({
         activeVar,
@@ -144,7 +149,7 @@ export const DynamicContentPicker = ({
         update: update
       }, activeVar), _jsx(Arrow, {
         "$direction": placementToDirection(placement),
-        ref: arrowRef,
+        ref: setArrowElement,
         style: {
           left: middlewareData.arrow?.x,
           top: middlewareData.arrow?.y

package/MediaStorage/CanvaImportDrawer.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { Button, Chip, Drawer, DrawerBody, DrawerHeader, DrawerTitle, NativeInput, useToast } from '@pushwoosh/dumb-components';
 import { FlexContainer, useAsync, Vertical } from '@pushwoosh/kit-helpers';
 import { CloseIcon } from '@pushwoosh/kit-icons';
@@ -40,8 +40,10 @@ export const CanvaImportDrawer = ({
   const runRef = useRef(0);
   const queryRef = useRef('');
   const isOpenRef = useRef(isOpen);
-  isOpenRef.current = isOpen;
-  queryRef.current = debouncedQuery;
+  useLayoutEffect(() => {
+    isOpenRef.current = isOpen;
+    queryRef.current = debouncedQuery;
+  }, [isOpen, debouncedQuery]);
   const isReady = status.connected && status.tokenValid;
   useEffect(() => {
     const timer = window.setTimeout(() => setDebouncedQuery(query.trim()), SEARCH_DELAY_MS);

package/MediaStorage/MediaStorage.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { Button, Checkbox, DropdownMenuButton, DropdownMenuItem, DropdownMenuSection, ModalConfirm, Tab, TabBar, TabPanel, Tabs, useToast } from '@pushwoosh/dumb-components';
 import { FlexContainer, useAsync } from '@pushwoosh/kit-helpers';
 import { CheckIcon, EditIcon, OpenIcon, TrashIcon, UploadIcon } from '@pushwoosh/kit-icons';
@@ -63,7 +63,9 @@ export const MediaStorage = ({
   // `uploadFiles` resolves asynchronously; read the latest page from the ref so
   // the post-upload decision isn't made on a value captured at click time.
   const pageRef = useRef(page);
-  pageRef.current = page;
+  useLayoutEffect(() => {
+    pageRef.current = page;
+  }, [page]);
   const [cropsByUuid, setCropsByUuid] = useState({});
   // Bumped to force a reload of the current page when the originals list changes
   // without the page prop changing (upload, delete of an original).
@@ -138,7 +140,9 @@ export const MediaStorage = ({
   const total = listAsync.value?.total ?? 0;
   // Read inside the async delete handler to avoid a stale-closure decision.
   const filesCountRef = useRef(files.length);
-  filesCountRef.current = files.length;
+  useLayoutEffect(() => {
+    filesCountRef.current = files.length;
+  }, [files.length]);
   useEffect(() => {
     if (listAsync.error) {
       openToast({

package/PickerSort/usePagedItems.js

@@ -55,7 +55,7 @@ export function usePagedItems(loadPage, resetKey, enabled = true) {
     }));
     requestPage(page);
   }, [requestPage]);
-  const resetDeps = [resetKey, enabled, requestPage];
+  const resetDeps = [resetKey, enabled, load];
   const [prevResetDeps, setPrevResetDeps] = useState(null);
   if (prevResetDeps === null || resetDeps.some((dep, index) => dep !== prevResetDeps[index])) {
     setPrevResetDeps(resetDeps);

package/Table/hooks/useDataTableGetParams.js

@@ -1,4 +1,4 @@
-import { useMemo, useRef } from 'react';
+import { useMemo, useState } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 import { usePersistentFunction } from '@pushwoosh/kit-helpers';
 import { mapKeys, shallowEqual } from './helpers';
@@ -13,10 +13,7 @@ export function useDataTableGetParams({
   const {
     search: locationSearch
   } = useLocation();
-  const customizeParamsRef = useRef(customizeParams);
-  customizeParamsRef.current = customizeParams;
-  const prevDataTableParamsRef = useRef({});
-  const dataTableParams = useMemo(() => {
+  const urlParams = useMemo(() => {
     const searchParams = new URLSearchParams(locationSearch);
     const searchParamsWoPrefix = mapKeys(Object.fromEntries(searchParams), key => key.startsWith(prefix) ? key.slice(prefix.length) : key);
     // eslint-disable-next-line no-nested-ternary
@@ -28,13 +25,28 @@ export function useDataTableGetParams({
       page: +searchParamsWoPrefix.page || 1,
       perPage: +searchParamsWoPrefix.perPage || defaultPerPage
     };
+    return {
+      searchParamsWoPrefix,
+      params
+    };
+  }, [locationSearch, defaultDirection, defaultOrder, defaultPerPage, prefix]);
+  const readParams = () => customizeParams ? customizeParams(urlParams.searchParamsWoPrefix, urlParams.params) : urlParams.params;
+  const [stableParams, setStableParams] = useState(() => ({
+    urlParams,
+    params: readParams()
+  }));
+  let dataTableParams = stableParams.params;
+  if (stableParams.urlParams !== urlParams) {
+    const resultParams = readParams();
     // it is necessary to compare with the previous parameters so that there are no extra rerenders
-    const resultParams = customizeParamsRef.current ? customizeParamsRef.current(searchParamsWoPrefix, params) : params;
-    if (!shallowEqual(resultParams, prevDataTableParamsRef.current)) {
-      prevDataTableParamsRef.current = resultParams;
+    if (!shallowEqual(resultParams, dataTableParams)) {
+      dataTableParams = resultParams;
     }
-    return prevDataTableParamsRef.current;
-  }, [locationSearch, defaultDirection, defaultOrder, defaultPerPage, prefix]);
+    setStableParams({
+      urlParams,
+      params: dataTableParams
+    });
+  }
   const changeDataTableParams = usePersistentFunction(params => {
     const searchParams = new URLSearchParams(locationSearch);
     const paramsWithPrefix = mapKeys(params, key => `${prefix}${key}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/smart-components-kit",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "description": "Stateful, data-connected React components shared by Pushwoosh micro-frontends",
   "repository": {
     "type": "git",