@pushwoosh/dumb-components 4.7.0 → 4.7.1

package/Calendar/CalendarDropdown/CalendarDropdown.js

@@ -66,7 +66,12 @@ export const CalendarDropdown = props => {
     setIsOpen(true);
   };
   const {
-    refs,
+    refs: {
+      reference,
+      floating,
+      setReference,
+      setFloating
+    },
     floatingStyles
   } = useFloating({
     open: isOpen,
@@ -84,7 +89,7 @@ export const CalendarDropdown = props => {
     isOpen,
     onClose: closePopover
   });
-  useOnClickOutside([refs.reference, refs.floating], () => {
+  useOnClickOutside([reference, floating], () => {
     if (isOpen) closePopover();
   });
   const onChangeHandler = val => {
@@ -106,7 +111,7 @@ export const CalendarDropdown = props => {
   return _jsxs(Horizontal, {
     "$justifyContent": "start",
     children: [_jsx(Button, {
-      boxRef: refs.setReference,
+      boxRef: setReference,
       type: "button",
       view: buttonView,
       size: buttonSize,
@@ -119,7 +124,7 @@ export const CalendarDropdown = props => {
       isOpen: isOpen,
       children: buttonTextCustom ?? buttonText
     }), isOpen && createPortal(_jsx(PopoverContent, {
-      ref: refs.setFloating,
+      ref: setFloating,
       style: {
         ...floatingStyles,
         zIndex

package/Calendar/CalendarSuperForm/components/CalendarRangePicker/CalendarRangePicker.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef } from 'react';
+import { useState } from 'react';
 import { getDisabledRanges } from './getDisabledRanges';
 import { CalendarMonthSlider } from '../../../CalendarMonthSlider/CalendarMonthSlider';
 import { compareStructs } from '../../../helpers';
@@ -18,17 +18,16 @@ export const CalendarRangePicker = ({
   firstDayOfWeek,
   initialVisibleMonth
 }) => {
-  const startMonthRef = useRef(undefined);
-  if (!startMonthRef.current) {
+  const [startMonth] = useState(() => {
     const d = new Date();
-    startMonthRef.current = initialVisibleMonth ?? value[0] ?? {
+    return initialVisibleMonth ?? value[0] ?? {
       year: d.getFullYear(),
       month: d.getMonth() + 1,
       day: d.getDate()
     };
-  }
+  });
   return _jsx(CalendarMonthSlider, {
-    startMonth: startMonthRef.current,
+    startMonth: startMonth,
     visibleCount: visibleCount,
     monthWidth: monthWidth,
     gap: gap,

package/hooks/useLayer.js

@@ -100,9 +100,11 @@ export function useLayer({
 }) {
   const id = useId();
   const onCloseRef = useRef(onClose);
-  onCloseRef.current = onClose;
   const zIndexRef = useRef(zIndex);
-  zIndexRef.current = zIndex;
+  useLayoutEffect(() => {
+    onCloseRef.current = onClose;
+    zIndexRef.current = zIndex;
+  });
   useLayoutEffect(() => {
     if (!isOpen) {
       return undefined;

package/hooks/useThemeName.js

@@ -11,7 +11,7 @@ function readThemeName(element) {
  * @param ref - element inside the theme scope, so a light island wins over the document theme
  * @param isEnabled - pass `false` when the caller already knows the theme and needs no observer */
 export function useThemeName(ref, isEnabled = true) {
-  const [themeName, setThemeName] = useState(() => readThemeName(ref?.current ?? null));
+  const [themeName, setThemeName] = useState(() => readThemeName(null));
   useLayoutEffect(() => {
     if (!isEnabled) {
       return undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "4.7.0",
+  "version": "4.7.1",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",
@@ -37,7 +37,7 @@
     "@floating-ui/react-dom": "^2.1.2",
     "@lezer/highlight": "^1.2.1",
     "@pushwoosh/kit-constants": "^3.0.0",
-    "@pushwoosh/kit-helpers": "^4.16.0",
+    "@pushwoosh/kit-helpers": "^4.16.1",
     "@pushwoosh/kit-icons": "^2.3.15",
     "@pushwoosh/kit-typography": "^2.0.0",
     "@tippyjs/react": "^4.2.6",

package/shared/dropdownField/useAsyncItems.js

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { DEFAULT_DEBOUNCE_MS } from './constants';
 import { useDebouncedValue } from './useDebouncedValue';
 /**
@@ -20,7 +20,9 @@ export function useAsyncItems({
   });
   const debouncedQuery = useDebouncedValue(query, debounceMs);
   const loadItemsRef = useRef(loadItems);
-  loadItemsRef.current = loadItems;
+  useLayoutEffect(() => {
+    loadItemsRef.current = loadItems;
+  });
   const sessionRef = useRef(0);
   const pageRef = useRef(0);
   const queryRef = useRef('');

package/shared/dropdownField/useFieldOpenEffects.js

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useEffectEvent, useRef } from 'react';
 /**
  * Side effects tied to a Combobox field's open state: optional autofocus on mount
  * and firing `onClose` when the field closes.
@@ -11,11 +11,10 @@ export function useFieldOpenEffects({
   disabled,
   inputRef
 }) {
-  const onCloseRef = useRef(onClose);
-  onCloseRef.current = onClose;
+  const onCloseEvent = useEffectEvent(() => onClose?.());
   const wasOpenRef = useRef(isOpen);
   useEffect(() => {
-    if (wasOpenRef.current && !isOpen) onCloseRef.current?.();
+    if (wasOpenRef.current && !isOpen) onCloseEvent();
     wasOpenRef.current = isOpen;
   }, [isOpen]);
   const didAutoFocusRef = useRef(false);