colibri-ui 0.8.87 → 0.8.88

package/Drawer/Drawer.js

@@ -3,6 +3,7 @@
 var tslib = require('tslib');
 var React = require('react');
 var ReactDOM = require('react-dom');
+var index = require('../hooks/useLatestRef/index.js');
 var styles = require('./Drawer.module.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -46,11 +47,11 @@ const Drawer = /*#__PURE__*/React.forwardRef(function DrawerRoot(_a, forwardedRe
   const previousFocus = React.useRef(null);
   const [rendered, setRendered] = React.useState(opened);
   const [closing, setClosing] = React.useState(false);
-  // The latest callback without restarting the closing timer.
-  const onClosedRef = React.useRef(onClosed);
-  React.useEffect(() => {
-    onClosedRef.current = onClosed;
-  }, [onClosed]);
+  // Callbacks from props change on every parent render; effects read them
+  // from refs, so focus, scroll lock and the closing timer do not restart.
+  const onClosedRef = index.useLatestRef(onClosed);
+  const onCloseRef = index.useLatestRef(onClose);
+  const onEscKeyDownRef = index.useLatestRef(onEscKeyDown);
   const setPanelRef = element => {
     panelRef.current = element;
     if (typeof forwardedRef === "function") forwardedRef(element);else if (forwardedRef) forwardedRef.current = element;
@@ -70,7 +71,7 @@ const Drawer = /*#__PURE__*/React.forwardRef(function DrawerRoot(_a, forwardedRe
       (_a = onClosedRef.current) === null || _a === void 0 ? void 0 : _a.call(onClosedRef);
     }, 200);
     return () => window.clearTimeout(timeout);
-  }, [opened, rendered]);
+  }, [onClosedRef, opened, rendered]);
   React.useEffect(() => {
     if (!opened || typeof document === "undefined") return;
     previousFocus.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
@@ -83,9 +84,10 @@ const Drawer = /*#__PURE__*/React.forwardRef(function DrawerRoot(_a, forwardedRe
       (_d = (_c = (_b = initialFocusRef === null || initialFocusRef === void 0 ? void 0 : initialFocusRef.current) !== null && _b !== void 0 ? _b : firstFocusable) !== null && _c !== void 0 ? _c : panelRef.current) === null || _d === void 0 ? void 0 : _d.focus();
     });
     const handleKeyDown = event => {
+      var _a, _b;
       if (event.key === "Escape" && closeOnEsc) {
-        onEscKeyDown === null || onEscKeyDown === void 0 ? void 0 : onEscKeyDown(event);
-        if (!event.defaultPrevented) onClose === null || onClose === void 0 ? void 0 : onClose();
+        (_a = onEscKeyDownRef.current) === null || _a === void 0 ? void 0 : _a.call(onEscKeyDownRef, event);
+        if (!event.defaultPrevented) (_b = onCloseRef.current) === null || _b === void 0 ? void 0 : _b.call(onCloseRef);
         return;
       }
       if (!asModal || event.key !== "Tab" || !panelRef.current) return;
@@ -113,7 +115,7 @@ const Drawer = /*#__PURE__*/React.forwardRef(function DrawerRoot(_a, forwardedRe
       if (asModal) document.body.style.overflow = previousOverflow;
       (_a = focusAfterElement !== null && focusAfterElement !== void 0 ? focusAfterElement : previousFocus.current) === null || _a === void 0 ? void 0 : _a.focus();
     };
-  }, [opened, asModal, closeOnEsc, focusAfterRef, initialFocusRef, onClose, onEscKeyDown]);
+  }, [opened, asModal, closeOnEsc, focusAfterRef, initialFocusRef, onCloseRef, onEscKeyDownRef]);
   if (!rendered || typeof document === "undefined") return null;
   const sidePlacement = placement === "left" || placement === "right";
   const panelStyle = Object.assign(Object.assign({}, style), {

package/Sheet/Sheet.js

@@ -4,6 +4,7 @@ var tslib = require('tslib');
 var React = require('react');
 var ReactDOM = require('react-dom');
 var clsx = require('clsx');
+var index$1 = require('../hooks/useLatestRef/index.js');
 var index = require('../hooks/useModalStack/index.js');
 var styles = require('./Sheet.module.css');
 
@@ -89,11 +90,10 @@ const Sheet = /*#__PURE__*/React.forwardRef(function SheetComponent(_a, forwarde
     if (!controlledSnap) setInternalSnap(next);
     onSnapPointChange === null || onSnapPointChange === void 0 ? void 0 : onSnapPointChange(next);
   };
-  // The latest callback without restarting the closing timer.
-  const onClosedRef = React.useRef(onClosed);
-  React.useEffect(() => {
-    onClosedRef.current = onClosed;
-  }, [onClosed]);
+  // Callbacks from props change on every parent render; effects read them
+  // from refs, so focus, scroll lock and the closing timer do not restart.
+  const onClosedRef = index$1.useLatestRef(onClosed);
+  const onOpenChangeRef = index$1.useLatestRef(onOpenChange);
   React.useEffect(() => {
     if (open) {
       setRendered(true);
@@ -110,7 +110,7 @@ const Sheet = /*#__PURE__*/React.forwardRef(function SheetComponent(_a, forwarde
       (_a = onClosedRef.current) === null || _a === void 0 ? void 0 : _a.call(onClosedRef);
     }, Number.isFinite(duration) ? duration : 220);
     return () => window.clearTimeout(timer);
-  }, [open, rendered]);
+  }, [onClosedRef, open, rendered]);
   React.useEffect(() => {
     var _a;
     if (!open || typeof document === "undefined") return;
@@ -127,7 +127,7 @@ const Sheet = /*#__PURE__*/React.forwardRef(function SheetComponent(_a, forwarde
       if (event.defaultPrevented || !isTopmost()) return;
       if (event.key === "Escape" && closeOnEscape) {
         event.preventDefault();
-        onOpenChange(false, "escape");
+        onOpenChangeRef.current(false, "escape");
         return;
       }
       if (!modal || event.key !== "Tab" || !panelRef.current) return;
@@ -154,7 +154,7 @@ const Sheet = /*#__PURE__*/React.forwardRef(function SheetComponent(_a, forwarde
       if (modal && lockBodyScroll) document.body.style.overflow = previousOverflow;
       returnFocusElement === null || returnFocusElement === void 0 ? void 0 : returnFocusElement.focus();
     };
-  }, [open, modal, lockBodyScroll, closeOnEscape, onOpenChange, initialFocusRef, returnFocusRef, isTopmost]);
+  }, [open, modal, lockBodyScroll, closeOnEscape, onOpenChangeRef, initialFocusRef, returnFocusRef, isTopmost]);
   const startDrag = event => {
     if (!draggable || !panelRef.current) return;
     event.currentTarget.setPointerCapture(event.pointerId);

package/esm/Drawer/Drawer.js

@@ -1,6 +1,7 @@
 import { __rest } from 'tslib';
 import React, { forwardRef, useRef, useState, useEffect } from 'react';
 import { createPortal } from 'react-dom';
+import { useLatestRef } from '../hooks/useLatestRef/index.js';
 import styles from './Drawer.module.css';
 
 const cx = (...classNames) => classNames.filter(Boolean).join(" ");
@@ -39,11 +40,11 @@ const Drawer = /*#__PURE__*/forwardRef(function DrawerRoot(_a, forwardedRef) {
   const previousFocus = useRef(null);
   const [rendered, setRendered] = useState(opened);
   const [closing, setClosing] = useState(false);
-  // The latest callback without restarting the closing timer.
-  const onClosedRef = useRef(onClosed);
-  useEffect(() => {
-    onClosedRef.current = onClosed;
-  }, [onClosed]);
+  // Callbacks from props change on every parent render; effects read them
+  // from refs, so focus, scroll lock and the closing timer do not restart.
+  const onClosedRef = useLatestRef(onClosed);
+  const onCloseRef = useLatestRef(onClose);
+  const onEscKeyDownRef = useLatestRef(onEscKeyDown);
   const setPanelRef = element => {
     panelRef.current = element;
     if (typeof forwardedRef === "function") forwardedRef(element);else if (forwardedRef) forwardedRef.current = element;
@@ -63,7 +64,7 @@ const Drawer = /*#__PURE__*/forwardRef(function DrawerRoot(_a, forwardedRef) {
       (_a = onClosedRef.current) === null || _a === void 0 ? void 0 : _a.call(onClosedRef);
     }, 200);
     return () => window.clearTimeout(timeout);
-  }, [opened, rendered]);
+  }, [onClosedRef, opened, rendered]);
   useEffect(() => {
     if (!opened || typeof document === "undefined") return;
     previousFocus.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
@@ -76,9 +77,10 @@ const Drawer = /*#__PURE__*/forwardRef(function DrawerRoot(_a, forwardedRef) {
       (_d = (_c = (_b = initialFocusRef === null || initialFocusRef === void 0 ? void 0 : initialFocusRef.current) !== null && _b !== void 0 ? _b : firstFocusable) !== null && _c !== void 0 ? _c : panelRef.current) === null || _d === void 0 ? void 0 : _d.focus();
     });
     const handleKeyDown = event => {
+      var _a, _b;
       if (event.key === "Escape" && closeOnEsc) {
-        onEscKeyDown === null || onEscKeyDown === void 0 ? void 0 : onEscKeyDown(event);
-        if (!event.defaultPrevented) onClose === null || onClose === void 0 ? void 0 : onClose();
+        (_a = onEscKeyDownRef.current) === null || _a === void 0 ? void 0 : _a.call(onEscKeyDownRef, event);
+        if (!event.defaultPrevented) (_b = onCloseRef.current) === null || _b === void 0 ? void 0 : _b.call(onCloseRef);
         return;
       }
       if (!asModal || event.key !== "Tab" || !panelRef.current) return;
@@ -106,7 +108,7 @@ const Drawer = /*#__PURE__*/forwardRef(function DrawerRoot(_a, forwardedRef) {
       if (asModal) document.body.style.overflow = previousOverflow;
       (_a = focusAfterElement !== null && focusAfterElement !== void 0 ? focusAfterElement : previousFocus.current) === null || _a === void 0 ? void 0 : _a.focus();
     };
-  }, [opened, asModal, closeOnEsc, focusAfterRef, initialFocusRef, onClose, onEscKeyDown]);
+  }, [opened, asModal, closeOnEsc, focusAfterRef, initialFocusRef, onCloseRef, onEscKeyDownRef]);
   if (!rendered || typeof document === "undefined") return null;
   const sidePlacement = placement === "left" || placement === "right";
   const panelStyle = Object.assign(Object.assign({}, style), {

package/esm/Sheet/Sheet.js

@@ -2,6 +2,7 @@ import { __rest } from 'tslib';
 import React, { forwardRef, useState, useRef, useId, useMemo, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import clsx from 'clsx';
+import { useLatestRef } from '../hooks/useLatestRef/index.js';
 import { useModalStack } from '../hooks/useModalStack/index.js';
 import styles from './Sheet.module.css';
 
@@ -81,11 +82,10 @@ const Sheet = /*#__PURE__*/forwardRef(function SheetComponent(_a, forwardedRef)
     if (!controlledSnap) setInternalSnap(next);
     onSnapPointChange === null || onSnapPointChange === void 0 ? void 0 : onSnapPointChange(next);
   };
-  // The latest callback without restarting the closing timer.
-  const onClosedRef = useRef(onClosed);
-  useEffect(() => {
-    onClosedRef.current = onClosed;
-  }, [onClosed]);
+  // Callbacks from props change on every parent render; effects read them
+  // from refs, so focus, scroll lock and the closing timer do not restart.
+  const onClosedRef = useLatestRef(onClosed);
+  const onOpenChangeRef = useLatestRef(onOpenChange);
   useEffect(() => {
     if (open) {
       setRendered(true);
@@ -102,7 +102,7 @@ const Sheet = /*#__PURE__*/forwardRef(function SheetComponent(_a, forwardedRef)
       (_a = onClosedRef.current) === null || _a === void 0 ? void 0 : _a.call(onClosedRef);
     }, Number.isFinite(duration) ? duration : 220);
     return () => window.clearTimeout(timer);
-  }, [open, rendered]);
+  }, [onClosedRef, open, rendered]);
   useEffect(() => {
     var _a;
     if (!open || typeof document === "undefined") return;
@@ -119,7 +119,7 @@ const Sheet = /*#__PURE__*/forwardRef(function SheetComponent(_a, forwardedRef)
       if (event.defaultPrevented || !isTopmost()) return;
       if (event.key === "Escape" && closeOnEscape) {
         event.preventDefault();
-        onOpenChange(false, "escape");
+        onOpenChangeRef.current(false, "escape");
         return;
       }
       if (!modal || event.key !== "Tab" || !panelRef.current) return;
@@ -146,7 +146,7 @@ const Sheet = /*#__PURE__*/forwardRef(function SheetComponent(_a, forwardedRef)
       if (modal && lockBodyScroll) document.body.style.overflow = previousOverflow;
       returnFocusElement === null || returnFocusElement === void 0 ? void 0 : returnFocusElement.focus();
     };
-  }, [open, modal, lockBodyScroll, closeOnEscape, onOpenChange, initialFocusRef, returnFocusRef, isTopmost]);
+  }, [open, modal, lockBodyScroll, closeOnEscape, onOpenChangeRef, initialFocusRef, returnFocusRef, isTopmost]);
   const startDrag = event => {
     if (!draggable || !panelRef.current) return;
     event.currentTarget.setPointerCapture(event.pointerId);

package/esm/hooks/useLatestRef/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Keeps the latest value in a ref. Effects read callbacks from it, so a new
+ * inline callback from the parent does not restart them.
+ */
+export declare const useLatestRef: <T>(value: T) => import("react").RefObject<T>;

package/esm/hooks/useLatestRef/index.js

@@ -0,0 +1,15 @@
+import { useRef, useEffect } from 'react';
+
+/**
+ * Keeps the latest value in a ref. Effects read callbacks from it, so a new
+ * inline callback from the parent does not restart them.
+ */
+const useLatestRef = value => {
+  const ref = useRef(value);
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref;
+};
+
+export { useLatestRef };

package/hooks/useLatestRef/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Keeps the latest value in a ref. Effects read callbacks from it, so a new
+ * inline callback from the parent does not restart them.
+ */
+export declare const useLatestRef: <T>(value: T) => import("react").RefObject<T>;

package/hooks/useLatestRef/index.js

@@ -0,0 +1,17 @@
+'use strict';
+
+var React = require('react');
+
+/**
+ * Keeps the latest value in a ref. Effects read callbacks from it, so a new
+ * inline callback from the parent does not restart them.
+ */
+const useLatestRef = value => {
+  const ref = React.useRef(value);
+  React.useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref;
+};
+
+exports.useLatestRef = useLatestRef;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "colibri-ui",
-  "version": "0.8.87",
+  "version": "0.8.88",
   "description": "React UI components library",
   "main": "index.js",
   "types": "index.d.ts",