@stevederico/skateboard-ui 5.5.0 → 5.6.0

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+5.6.0
+
+  Add Sheet onUserClose
+
 5.5.0
 
   Enlarge tap targets

package/dist/components/Sheet.d.ts

@@ -11,6 +11,8 @@ export interface SheetProps {
     title?: string;
     minHeight?: string;
     children?: ReactNode;
+    /** Called when the person closes the sheet (swipe, outside tap, Escape), not when code calls hide(). */
+    onUserClose?: () => void;
 }
 /**
  * Bottom sheet (drawer) component with imperative open/close API.
@@ -21,6 +23,7 @@ export interface SheetProps {
  * @param {string} [props.title=""] - Sheet header title
  * @param {string} [props.minHeight="auto"] - Minimum sheet height CSS value
  * @param {React.ReactNode} props.children - Sheet body content
+ * @param {Function} [props.onUserClose] - Called when the person closes the sheet, not when code calls hide()
  * @param {React.Ref} ref - Ref exposing { show, hide, open, close, toggle }
  * @returns {JSX.Element} Drawer sheet
  *

package/dist/components/Sheet.js

@@ -10,6 +10,7 @@ import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, } from "../ui/drawer.
  * @param {string} [props.title=""] - Sheet header title
  * @param {string} [props.minHeight="auto"] - Minimum sheet height CSS value
  * @param {React.ReactNode} props.children - Sheet body content
+ * @param {Function} [props.onUserClose] - Called when the person closes the sheet, not when code calls hide()
  * @param {React.Ref} ref - Ref exposing { show, hide, open, close, toggle }
  * @returns {JSX.Element} Drawer sheet
  *
@@ -30,7 +31,7 @@ import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, } from "../ui/drawer.
  * }
  */
 const MySheet = forwardRef(function MySheet(props, ref) {
-    const { title = "", minHeight = "auto", children } = props;
+    const { title = "", minHeight = "auto", children, onUserClose } = props;
     const [isOpen, setIsOpen] = useState(false);
     useImperativeHandle(ref, () => ({
         show: () => setIsOpen(true),
@@ -39,6 +40,10 @@ const MySheet = forwardRef(function MySheet(props, ref) {
         close: () => setIsOpen(false),
         toggle: () => setIsOpen(prev => !prev)
     }));
-    return (_jsx(Drawer, { open: isOpen, onOpenChange: setIsOpen, children: _jsxs(DrawerContent, { style: { minHeight }, children: [_jsx(DrawerHeader, { children: _jsx(DrawerTitle, { children: title }) }), _jsx("div", { className: "px-4 pb-4", children: children })] }) }));
+    return (_jsx(Drawer, { open: isOpen, onOpenChange: (open) => {
+            setIsOpen(open);
+            if (!open)
+                onUserClose?.();
+        }, children: _jsxs(DrawerContent, { style: { minHeight }, children: [_jsx(DrawerHeader, { children: _jsx(DrawerTitle, { children: title }) }), _jsx("div", { className: "px-4 pb-4", children: children })] }) }));
 });
 export default MySheet;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stevederico/skateboard-ui",
   "private": false,
-  "version": "5.5.0",
+  "version": "5.6.0",
   "type": "module",
   "exports": {
     ".": {