agnosticui-core 2.0.0-alpha.22 → 2.0.0-alpha.23

package/dist/components/Drawer/react/ReactDrawer.d.ts

@@ -1,13 +1,26 @@
-import { EventName } from '@lit/react';
-import { AgnosticDrawer, DrawerProps, DrawerOpenEvent, DrawerCloseEvent, DrawerCancelEvent } from '../core/Drawer';
+import { AgnosticDrawer, DrawerProps } from '../core/Drawer';
 import * as React from 'react';
 /**
- * React-specific props for Drawer
+ * React-specific props for Drawer.
+ *
+ * Includes onOpenChange for controlled-component support. This is necessary
+ * because the underlying Lit web component manages its own open state internally
+ * (e.g. it sets this.open = false on Escape or backdrop click). @lit/react's
+ * createComponent only bridges DOM events -> React props, so without explicitly
+ * calling onOpenChange(false) on close/cancel, React's state never learns the
+ * drawer closed. The stale open={true} is then re-applied on the next render,
+ * causing previously dismissed drawers to reappear when other drawers are opened.
  */
 export interface ReactDrawerProps extends DrawerProps {
     children?: React.ReactNode;
     className?: string;
     id?: string;
+    /**
+     * Called with the new open state whenever the drawer opens or closes.
+     * Wire this to your React state setter (e.g. onOpenChange={setIsOpen}) so
+     * React stays in sync when the drawer closes itself internally.
+     */
+    onOpenChange?: (open: boolean) => void;
 }
 /**
  * Helper component for drawer header slot
@@ -21,11 +34,17 @@ export interface DrawerHeaderProps {
 export interface DrawerFooterProps {
     children?: React.ReactNode;
 }
-export declare const ReactDrawer: import('@lit/react').ReactWebComponent<AgnosticDrawer, {
-    onDrawerOpen: EventName<DrawerOpenEvent>;
-    onDrawerClose: EventName<DrawerCloseEvent>;
-    onDrawerCancel: EventName<DrawerCancelEvent>;
-}>;
+/**
+ * ReactDrawer wraps _ReactDrawerBase to add onOpenChange support.
+ *
+ * The Lit element fires "drawer-close" when the close button is clicked and
+ * "drawer-cancel" when the user presses Escape or clicks the backdrop. Both
+ * mean the drawer is now closed. We intercept those two events and call
+ * onOpenChange(false) so React state reflects the new closed state immediately,
+ * preventing the stale open={true} from being pushed back into the element on
+ * the next render.
+ */
+export declare const ReactDrawer: React.ForwardRefExoticComponent<ReactDrawerProps & React.RefAttributes<AgnosticDrawer>>;
 export declare const DrawerHeader: React.FC<DrawerHeaderProps>;
 export declare const DrawerFooter: React.FC<DrawerFooterProps>;
 export type { DrawerOpenEvent, DrawerCloseEvent, DrawerCancelEvent } from '../core/Drawer';

package/dist/components/Drawer/react/ReactDrawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReactDrawer.d.ts","sourceRoot":"","sources":["../../../../src/components/Drawer/react/ReactDrawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC;AAC7D,OAAO,EACL,cAAc,EACd,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,gBAAgB,EACrB,KAAK,iBAAiB,EACvB,MAAM,gBAAgB,CAAC;AAExB;;GAEG;AACH,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAGD,eAAO,MAAM,WAAW;kBAKW,SAAS,CAAC,eAAe,CAAC;mBACxB,SAAS,CAAC,gBAAgB,CAAC;oBACzB,SAAS,CAAC,iBAAiB,CAAC;EAEjE,CAAC;AAGH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAEpD,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAEpD,CAAC;AAGF,YAAY,EAAE,eAAe,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"ReactDrawer.d.ts","sourceRoot":"","sources":["../../../../src/components/Drawer/react/ReactDrawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,cAAc,EACd,KAAK,WAAW,EAIjB,MAAM,gBAAgB,CAAC;AAExB;;;;;;;;;;GAUG;AACH,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAeD;;;;;;;;;GASG;AACH,eAAO,MAAM,WAAW,yFA4BvB,CAAC;AAKF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAEpD,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAEpD,CAAC;AAGF,YAAY,EAAE,eAAe,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/Drawer/react/ReactDrawer.js

@@ -1,20 +1,42 @@
-import { j as e } from "../../../jsx-runtime-BzflLqGi.js";
+import { j as a } from "../../../jsx-runtime-BzflLqGi.js";
 import * as o from "react";
-import { o as a } from "../../../create-component-BPMDMe-q.js";
+import { o as m } from "../../../create-component-BPMDMe-q.js";
 import "../core/Drawer.js";
-import { AgnosticDrawer as t } from "../core/_drawer.js";
-const w = a({
+import { AgnosticDrawer as i } from "../core/_drawer.js";
+const p = m({
   tagName: "ag-drawer",
-  elementClass: t,
+  elementClass: i,
   react: o,
   events: {
     onDrawerOpen: "drawer-open",
     onDrawerClose: "drawer-close",
     onDrawerCancel: "drawer-cancel"
   }
-}), i = ({ children: r }) => /* @__PURE__ */ e.jsx("div", { slot: "header", children: r }), p = ({ children: r }) => /* @__PURE__ */ e.jsx("div", { slot: "footer", children: r });
+}), f = o.forwardRef(
+  ({ onOpenChange: r, onDrawerOpen: t, onDrawerClose: s, onDrawerCancel: n, ...w }, c) => {
+    const l = (e) => {
+      t?.(e), r?.(!0);
+    }, D = (e) => {
+      s?.(e), r?.(!1);
+    }, d = (e) => {
+      n?.(e), r?.(!1);
+    };
+    return /* @__PURE__ */ a.jsx(
+      p,
+      {
+        ref: c,
+        onDrawerOpen: l,
+        onDrawerClose: D,
+        onDrawerCancel: d,
+        ...w
+      }
+    );
+  }
+);
+f.displayName = "ReactDrawer";
+const C = ({ children: r }) => /* @__PURE__ */ a.jsx("div", { slot: "header", children: r }), v = ({ children: r }) => /* @__PURE__ */ a.jsx("div", { slot: "footer", children: r });
 export {
-  p as DrawerFooter,
-  i as DrawerHeader,
-  w as ReactDrawer
+  v as DrawerFooter,
+  C as DrawerHeader,
+  f as ReactDrawer
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agnosticui-core",
-  "version": "2.0.0-alpha.22",
+  "version": "2.0.0-alpha.23",
   "author": "AgnosticUI",
   "license": "Apache-2.0",
   "type": "module",

package/src/components/Drawer/react/ReactDrawer.tsx

@@ -9,12 +9,26 @@ import {
 } from '../core/Drawer';
 
 /**
- * React-specific props for Drawer
+ * React-specific props for Drawer.
+ *
+ * Includes onOpenChange for controlled-component support. This is necessary
+ * because the underlying Lit web component manages its own open state internally
+ * (e.g. it sets this.open = false on Escape or backdrop click). @lit/react's
+ * createComponent only bridges DOM events -> React props, so without explicitly
+ * calling onOpenChange(false) on close/cancel, React's state never learns the
+ * drawer closed. The stale open={true} is then re-applied on the next render,
+ * causing previously dismissed drawers to reappear when other drawers are opened.
  */
 export interface ReactDrawerProps extends DrawerProps {
   children?: React.ReactNode;
   className?: string;
   id?: string;
+  /**
+   * Called with the new open state whenever the drawer opens or closes.
+   * Wire this to your React state setter (e.g. onOpenChange={setIsOpen}) so
+   * React stays in sync when the drawer closes itself internally.
+   */
+  onOpenChange?: (open: boolean) => void;
 }
 
 /**
@@ -31,8 +45,9 @@ export interface DrawerFooterProps {
   children?: React.ReactNode;
 }
 
-// Create Drawer component with @lit/react
-export const ReactDrawer = createComponent({
+// Raw @lit/react bridge — maps Lit custom events to React prop callbacks.
+// Does NOT handle onOpenChange; that requires the wrapper below.
+const _ReactDrawerBase = createComponent({
   tagName: 'ag-drawer',
   elementClass: AgnosticDrawer,
   react: React,
@@ -43,6 +58,48 @@ export const ReactDrawer = createComponent({
   },
 });
 
+/**
+ * ReactDrawer wraps _ReactDrawerBase to add onOpenChange support.
+ *
+ * The Lit element fires "drawer-close" when the close button is clicked and
+ * "drawer-cancel" when the user presses Escape or clicks the backdrop. Both
+ * mean the drawer is now closed. We intercept those two events and call
+ * onOpenChange(false) so React state reflects the new closed state immediately,
+ * preventing the stale open={true} from being pushed back into the element on
+ * the next render.
+ */
+export const ReactDrawer = React.forwardRef<AgnosticDrawer, ReactDrawerProps>(
+  ({ onOpenChange, onDrawerOpen, onDrawerClose, onDrawerCancel, ...props }, ref) => {
+    const handleDrawerOpen = (event: DrawerOpenEvent) => {
+      onDrawerOpen?.(event);
+      onOpenChange?.(true);
+    };
+
+    // Both close and cancel mean the drawer is no longer open — notify React.
+    const handleDrawerClose = (event: DrawerCloseEvent) => {
+      onDrawerClose?.(event);
+      onOpenChange?.(false);
+    };
+
+    const handleDrawerCancel = (event: DrawerCancelEvent) => {
+      onDrawerCancel?.(event);
+      onOpenChange?.(false);
+    };
+
+    return (
+      <_ReactDrawerBase
+        ref={ref}
+        onDrawerOpen={handleDrawerOpen}
+        onDrawerClose={handleDrawerClose}
+        onDrawerCancel={handleDrawerCancel}
+        {...props}
+      />
+    );
+  }
+);
+
+ReactDrawer.displayName = 'ReactDrawer';
+
 // Helper components for slots (simple React components)
 export const DrawerHeader: React.FC<DrawerHeaderProps> = ({ children }) => {
   return <div slot="header">{children}</div>;