colibri-ui 0.8.87 → 0.8.89

package/Accordion/Accordion.module.css

@@ -10,6 +10,10 @@
   transition: block-size 0.2s ease-in-out;
 }
 
+.inner {
+  display: flow-root;
+}
+
 .button {
   align-items: center;
   background: none;

package/Accordion/index.js

@@ -18,15 +18,29 @@ const Accordion = ({
   boldTitle = false,
   children,
   className,
-  tabIndex
+  tabIndex,
+  defaultOpen = false
 }) => {
-  const [isOpen, setIsOpen] = React.useState(false);
+  const [isOpen, setIsOpen] = React.useState(defaultOpen);
   const contentRef = React.useRef(null);
+  const innerRef = React.useRef(null);
   const toggleAccordion = () => setIsOpen(!isOpen);
-  React.useEffect(() => {
-    if (contentRef.current) {
-      contentRef.current.style.blockSize = isOpen ? `${contentRef.current.scrollHeight}px` : "0";
+  React.useLayoutEffect(() => {
+    const content = contentRef.current;
+    const inner = innerRef.current;
+    if (!content || !inner) return;
+    if (!isOpen) {
+      content.style.blockSize = "0";
+      return;
     }
+    const updateBlockSize = () => {
+      content.style.blockSize = `${inner.scrollHeight}px`;
+    };
+    updateBlockSize();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(updateBlockSize);
+    observer.observe(inner);
+    return () => observer.disconnect();
   }, [isOpen]);
   return /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default(styles__default.default.root, className)
@@ -53,7 +67,10 @@ const Accordion = ({
   }))), /*#__PURE__*/React__default.default.createElement("div", {
     ref: contentRef,
     className: styles__default.default.content
-  }, children));
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    ref: innerRef,
+    className: styles__default.default.inner
+  }, children)));
 };
 
 exports.Accordion = Accordion;

package/Accordion/index.props.d.ts

@@ -4,4 +4,6 @@ export type AccordionProps = PropsWithChildren<{
     className?: string;
     boldTitle?: boolean;
     tabIndex?: number;
+    /** Initial expanded state. Defaults to `false`. */
+    defaultOpen?: boolean;
 }>;

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/Accordion/Accordion.module.css

@@ -10,6 +10,10 @@
   transition: block-size 0.2s ease-in-out;
 }
 
+.inner {
+  display: flow-root;
+}
+
 .button {
   align-items: center;
   background: none;

package/esm/Accordion/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useLayoutEffect } from 'react';
 import clsx from 'clsx';
 import 'tslib';
 import { Chevron } from '../Icons/Chevron.js';
@@ -10,15 +10,29 @@ const Accordion = ({
   boldTitle = false,
   children,
   className,
-  tabIndex
+  tabIndex,
+  defaultOpen = false
 }) => {
-  const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(defaultOpen);
   const contentRef = useRef(null);
+  const innerRef = useRef(null);
   const toggleAccordion = () => setIsOpen(!isOpen);
-  useEffect(() => {
-    if (contentRef.current) {
-      contentRef.current.style.blockSize = isOpen ? `${contentRef.current.scrollHeight}px` : "0";
+  useLayoutEffect(() => {
+    const content = contentRef.current;
+    const inner = innerRef.current;
+    if (!content || !inner) return;
+    if (!isOpen) {
+      content.style.blockSize = "0";
+      return;
     }
+    const updateBlockSize = () => {
+      content.style.blockSize = `${inner.scrollHeight}px`;
+    };
+    updateBlockSize();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(updateBlockSize);
+    observer.observe(inner);
+    return () => observer.disconnect();
   }, [isOpen]);
   return /*#__PURE__*/React.createElement("div", {
     className: clsx(styles.root, className)
@@ -45,7 +59,10 @@ const Accordion = ({
   }))), /*#__PURE__*/React.createElement("div", {
     ref: contentRef,
     className: styles.content
-  }, children));
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: innerRef,
+    className: styles.inner
+  }, children)));
 };
 
 export { Accordion };

package/esm/Accordion/index.props.d.ts

@@ -4,4 +4,6 @@ export type AccordionProps = PropsWithChildren<{
     className?: string;
     boldTitle?: boolean;
     tabIndex?: number;
+    /** Initial expanded state. Defaults to `false`. */
+    defaultOpen?: boolean;
 }>;

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.89",
   "description": "React UI components library",
   "main": "index.js",
   "types": "index.d.ts",