colibri-ui 0.8.86 → 0.8.87

package/Drawer/Drawer.js

@@ -34,17 +34,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);
+  // The latest callback without restarting the closing timer.
+  const onClosedRef = React.useRef(onClosed);
+  React.useEffect(() => {
+    onClosedRef.current = onClosed;
+  }, [onClosed]);
   const setPanelRef = element => {
     panelRef.current = element;
     if (typeof forwardedRef === "function") forwardedRef(element);else if (forwardedRef) forwardedRef.current = element;
@@ -58,8 +64,10 @@ 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]);

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

@@ -32,6 +32,7 @@ const Sheet = /*#__PURE__*/React.forwardRef(function SheetComponent(_a, forwarde
   var {
       open,
       onOpenChange,
+      onClosed,
       title,
       description,
       header,
@@ -58,7 +59,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 +89,11 @@ 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]);
   React.useEffect(() => {
     if (open) {
       setRendered(true);
@@ -98,8 +104,10 @@ 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]);

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;