colibri-ui 0.8.86 → 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 }; }
@@ -34,17 +35,23 @@ const Drawer = /*#__PURE__*/React.forwardRef(function DrawerRoot(_a, forwardedRe
       focusAfterRef,
       portalContainer,
       onClose,
+      onClosed,
       onEscKeyDown,
       onOverlayClick,
       className,
       style,
       children
     } = _a,
-    rest = tslib.__rest(_a, ["opened", "placement", "width", "height", "offset", "zIndex", "asModal", "withBlur", "closeOnEsc", "closeOnOverlayClick", "borderRadius", "customBackgroundColor", "customContentBackgroundColor", "animationInfo", "initialFocusRef", "focusAfterRef", "portalContainer", "onClose", "onEscKeyDown", "onOverlayClick", "className", "style", "children"]);
+    rest = tslib.__rest(_a, ["opened", "placement", "width", "height", "offset", "zIndex", "asModal", "withBlur", "closeOnEsc", "closeOnOverlayClick", "borderRadius", "customBackgroundColor", "customContentBackgroundColor", "animationInfo", "initialFocusRef", "focusAfterRef", "portalContainer", "onClose", "onClosed", "onEscKeyDown", "onOverlayClick", "className", "style", "children"]);
   const panelRef = React.useRef(null);
   const previousFocus = React.useRef(null);
   const [rendered, setRendered] = React.useState(opened);
   const [closing, setClosing] = React.useState(false);
+  // 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;
@@ -58,11 +65,13 @@ const Drawer = /*#__PURE__*/React.forwardRef(function DrawerRoot(_a, forwardedRe
     if (!rendered) return;
     setClosing(true);
     const timeout = window.setTimeout(() => {
+      var _a;
       setRendered(false);
       setClosing(false);
+      (_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;
@@ -75,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;
@@ -105,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/Drawer/index.props.d.ts

@@ -24,6 +24,8 @@ export interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, "onAni
     focusAfterRef?: RefObject<HTMLElement | null>;
     portalContainer?: HTMLElement | null;
     onClose?: () => void;
+    /** Called once the closing animation has finished and the drawer is removed. */
+    onClosed?: () => void;
     onEscKeyDown?: (event: KeyboardEvent) => void;
     onOverlayClick?: MouseEventHandler<HTMLDivElement>;
 }

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');
 
@@ -32,6 +33,7 @@ const Sheet = /*#__PURE__*/React.forwardRef(function SheetComponent(_a, forwarde
   var {
       open,
       onOpenChange,
+      onClosed,
       title,
       description,
       header,
@@ -58,7 +60,7 @@ const Sheet = /*#__PURE__*/React.forwardRef(function SheetComponent(_a, forwarde
       "aria-labelledby": ariaLabelledBy,
       "aria-describedby": ariaDescribedBy
     } = _a,
-    rest = tslib.__rest(_a, ["open", "onOpenChange", "title", "description", "header", "footer", "snapPoints", "snapPoint", "defaultSnapPoint", "onSnapPointChange", "modal", "blurOverlay", "closeOnOverlayClick", "closeOnEscape", "draggable", "showHandle", "lockBodyScroll", "portalContainer", "initialFocusRef", "returnFocusRef", "zIndex", "className", "style", "children", "aria-label", "aria-labelledby", "aria-describedby"]);
+    rest = tslib.__rest(_a, ["open", "onOpenChange", "onClosed", "title", "description", "header", "footer", "snapPoints", "snapPoint", "defaultSnapPoint", "onSnapPointChange", "modal", "blurOverlay", "closeOnOverlayClick", "closeOnEscape", "draggable", "showHandle", "lockBodyScroll", "portalContainer", "initialFocusRef", "returnFocusRef", "zIndex", "className", "style", "children", "aria-label", "aria-labelledby", "aria-describedby"]);
   const normalizedPoints = snapPoints.length ? snapPoints : defaultSnapPoints;
   const controlledSnap = snapPoint !== undefined;
   const [internalSnap, setInternalSnap] = React.useState(() => findPoint(normalizedPoints, defaultSnapPoint));
@@ -88,6 +90,10 @@ const Sheet = /*#__PURE__*/React.forwardRef(function SheetComponent(_a, forwarde
     if (!controlledSnap) setInternalSnap(next);
     onSnapPointChange === null || onSnapPointChange === void 0 ? void 0 : onSnapPointChange(next);
   };
+  // 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);
@@ -98,11 +104,13 @@ const Sheet = /*#__PURE__*/React.forwardRef(function SheetComponent(_a, forwarde
     setClosing(true);
     const duration = panelRef.current ? Number.parseFloat(getComputedStyle(panelRef.current).animationDuration) * 1000 : 220;
     const timer = window.setTimeout(() => {
+      var _a;
       setRendered(false);
       setClosing(false);
+      (_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;
@@ -119,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;
@@ -146,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/Sheet/index.props.d.ts

@@ -4,6 +4,8 @@ export type SheetCloseReason = "overlay" | "escape" | "drag";
 export interface SheetProps extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "onChange"> {
     open: boolean;
     onOpenChange: (open: boolean, reason?: SheetCloseReason) => void;
+    /** Called once the closing animation has finished and the sheet is removed. */
+    onClosed?: () => void;
     title?: ReactNode;
     description?: ReactNode;
     header?: ReactNode;