@plasmicpkgs/react-aria 0.0.112 → 0.0.113

package/dist/registerDialogTrigger.d.ts

@@ -1,9 +1,15 @@
 import React from "react";
 import { DialogTriggerProps } from "react-aria-components";
 import { CodeComponentMetaOverrides, Registerable, WithPlasmicCanvasComponentInfo } from "./utils";
+export interface TriggerWrapperProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare function TriggerWrapper({ children, className }: TriggerWrapperProps): React.JSX.Element;
 export interface BaseDialogTriggerProps extends Omit<DialogTriggerProps, "children">, WithPlasmicCanvasComponentInfo {
     trigger?: React.ReactNode;
     dialog?: React.ReactNode;
+    className?: string;
 }
 export declare function BaseDialogTrigger(props: BaseDialogTriggerProps): React.JSX.Element;
 export declare function registerDialogTrigger(loader?: Registerable, overrides?: CodeComponentMetaOverrides<typeof BaseDialogTrigger>): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plasmicpkgs/react-aria",
-  "version": "0.0.112",
+  "version": "0.0.113",
   "description": "Plasmic registration calls for react-aria based components",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -50,7 +50,6 @@
     "@react-aria/utils": "^3.24.0",
     "react-aria": "^3.33.0",
     "react-aria-components": "^1.2.0",
-    "react-is": "^19.0.0",
     "react-keyed-flatten-children": "^3.0.0",
     "react-stately": "^3.31.0"
   },
@@ -61,7 +60,6 @@
     "@rollup/plugin-node-resolve": "^9.0.0",
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
-    "@types/react-is": "^19.0.0",
     "glob": "^8.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -76,5 +74,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5250c8e2b194c67672d34c4366cd7de1ac842a49"
+  "gitHead": "426729813db7458ccbaced054ec11ba5ef8ae027"
 }

package/skinny/registerDialogTrigger.cjs.js

@@ -2,14 +2,14 @@
 
 var host = require('@plasmicapp/host');
 var React = require('react');
+var reactAria = require('react-aria');
 var reactAriaComponents = require('react-aria-components');
+var common = require('./common-b3b54c72.cjs.js');
 var contexts = require('./contexts-6d0cb2b1.cjs.js');
 var registerButton = require('./registerButton.cjs.js');
 var registerDialog = require('./registerDialog.cjs.js');
 var registerModal = require('./registerModal.cjs.js');
 var utils = require('./utils-7d000fa4.cjs.js');
-require('react-aria');
-require('./common-b3b54c72.cjs.js');
 require('./variant-utils-0ad70db8.cjs.js');
 require('@plasmicapp/host/registerComponent');
 
@@ -48,15 +48,26 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+function TriggerWrapper({ children, className }) {
+  const ref = React__default.default.useRef(null);
+  const { buttonProps } = reactAria.useButton({}, ref);
+  const mergedProps = reactAria.mergeProps(buttonProps, {
+    ref,
+    // We expose className to allow user control over the wrapper div's styling.
+    className,
+    style: common.COMMON_STYLES
+  });
+  return /* @__PURE__ */ React__default.default.createElement("div", __spreadValues({}, mergedProps), children);
+}
 function BaseDialogTrigger(props) {
   var _b, _c;
-  const _a = props, { trigger, dialog, isOpen } = _a, rest = __objRest(_a, ["trigger", "dialog", "isOpen"]);
+  const _a = props, { trigger, dialog, isOpen, className } = _a, rest = __objRest(_a, ["trigger", "dialog", "isOpen", "className"]);
   const { isSelected, selectedSlotName } = (_c = (_b = host.usePlasmicCanvasComponentInfo) == null ? void 0 : _b(props)) != null ? _c : {};
   const isAutoOpen = selectedSlotName !== "trigger" && isSelected;
   const mergedProps = __spreadProps(__spreadValues({}, rest), {
     isOpen: isAutoOpen || isOpen
   });
-  return /* @__PURE__ */ React__default.default.createElement(contexts.PlasmicDialogTriggerContext.Provider, { value: mergedProps }, /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.DialogTrigger, __spreadValues({}, mergedProps), trigger, dialog));
+  return /* @__PURE__ */ React__default.default.createElement(contexts.PlasmicDialogTriggerContext.Provider, { value: mergedProps }, /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.DialogTrigger, __spreadValues({}, mergedProps), trigger && /* @__PURE__ */ React__default.default.createElement(TriggerWrapper, { className }, trigger), dialog));
 }
 function registerDialogTrigger(loader, overrides) {
   utils.registerComponentHelper(
@@ -67,7 +78,6 @@ function registerDialogTrigger(loader, overrides) {
       displayName: "Aria Dialog Trigger",
       importPath: "@plasmicpkgs/react-aria/skinny/registerDialogTrigger",
       importName: "BaseDialogTrigger",
-      styleSections: false,
       props: {
         trigger: {
           type: "slot",
@@ -128,5 +138,6 @@ function registerDialogTrigger(loader, overrides) {
 }
 
 exports.BaseDialogTrigger = BaseDialogTrigger;
+exports.TriggerWrapper = TriggerWrapper;
 exports.registerDialogTrigger = registerDialogTrigger;
 //# sourceMappingURL=registerDialogTrigger.cjs.js.map

package/skinny/registerDialogTrigger.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"registerDialogTrigger.cjs.js","sources":["../src/registerDialogTrigger.tsx"],"sourcesContent":["import { usePlasmicCanvasComponentInfo } from \"@plasmicapp/host\";\nimport React from \"react\";\nimport { DialogTrigger, DialogTriggerProps } from \"react-aria-components\";\nimport { PlasmicDialogTriggerContext } from \"./contexts\";\nimport { BUTTON_COMPONENT_NAME } from \"./registerButton\";\nimport { DIALOG_COMPONENT_NAME } from \"./registerDialog\";\nimport {\n  MODAL_COMPONENT_NAME,\n  MODAL_DEFAULT_SLOT_CONTENT,\n} from \"./registerModal\";\nimport {\n  CodeComponentMetaOverrides,\n  Registerable,\n  WithPlasmicCanvasComponentInfo,\n  makeComponentName,\n  registerComponentHelper,\n} from \"./utils\";\n\nexport interface BaseDialogTriggerProps\n  extends Omit<DialogTriggerProps, \"children\">,\n    WithPlasmicCanvasComponentInfo {\n  trigger?: React.ReactNode;\n  dialog?: React.ReactNode;\n}\n\nexport function BaseDialogTrigger(props: BaseDialogTriggerProps) {\n  const { trigger, dialog, isOpen, ...rest } = props;\n\n  const { isSelected, selectedSlotName } =\n    usePlasmicCanvasComponentInfo?.(props) ?? {};\n  const isAutoOpen = selectedSlotName !== \"trigger\" && isSelected;\n\n  const mergedProps = {\n    ...rest,\n    isOpen: isAutoOpen || isOpen,\n  };\n\n  return (\n    <PlasmicDialogTriggerContext.Provider value={mergedProps}>\n      <DialogTrigger {...mergedProps}>\n        {trigger}\n        {dialog}\n      </DialogTrigger>\n    </PlasmicDialogTriggerContext.Provider>\n  );\n}\n\nexport function registerDialogTrigger(\n  loader?: Registerable,\n  overrides?: CodeComponentMetaOverrides<typeof BaseDialogTrigger>\n) {\n  registerComponentHelper(\n    loader,\n    BaseDialogTrigger,\n    {\n      name: makeComponentName(\"dialogTrigger\"),\n      displayName: \"Aria Dialog Trigger\",\n      importPath: \"@plasmicpkgs/react-aria/skinny/registerDialogTrigger\",\n      importName: \"BaseDialogTrigger\",\n      styleSections: false,\n      props: {\n        trigger: {\n          type: \"slot\",\n          mergeWithParent: true,\n          defaultValue: {\n            type: \"component\",\n            name: BUTTON_COMPONENT_NAME,\n            props: {\n              children: {\n                type: \"text\",\n                value: \"Open Dialog\",\n              },\n            },\n          },\n        },\n        dialog: {\n          type: \"slot\",\n          mergeWithParent: true,\n          defaultValue: [\n            {\n              type: \"component\",\n              name: MODAL_COMPONENT_NAME,\n              props: {\n                children: {\n                  type: \"component\",\n                  name: DIALOG_COMPONENT_NAME,\n                  props: {\n                    children: MODAL_DEFAULT_SLOT_CONTENT,\n                  },\n                },\n              },\n            },\n          ],\n        },\n        isOpen: {\n          type: \"boolean\",\n          defaultValueHint: false,\n          editOnly: true,\n          uncontrolledProp: \"defaultOpen\",\n        },\n        onOpenChange: {\n          type: \"eventHandler\",\n          argTypes: [{ name: \"isOpen\", type: \"boolean\" }],\n        },\n      },\n      states: {\n        isOpen: {\n          type: \"writable\",\n          valueProp: \"isOpen\",\n          onChangeProp: \"onOpenChange\",\n          variableType: \"boolean\",\n        },\n      },\n      trapsFocus: true,\n    },\n    overrides\n  );\n}\n"],"names":["usePlasmicCanvasComponentInfo","React","PlasmicDialogTriggerContext","DialogTrigger","registerComponentHelper","makeComponentName","BUTTON_COMPONENT_NAME","MODAL_COMPONENT_NAME","DIALOG_COMPONENT_NAME","MODAL_DEFAULT_SLOT_CONTENT"],"mappings":"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"}
+{"version":3,"file":"registerDialogTrigger.cjs.js","sources":["../src/registerDialogTrigger.tsx"],"sourcesContent":["import { usePlasmicCanvasComponentInfo } from \"@plasmicapp/host\";\nimport React from \"react\";\nimport { mergeProps, useButton } from \"react-aria\";\nimport { DialogTrigger, DialogTriggerProps } from \"react-aria-components\";\nimport { COMMON_STYLES } from \"./common\";\nimport { PlasmicDialogTriggerContext } from \"./contexts\";\nimport { BUTTON_COMPONENT_NAME } from \"./registerButton\";\nimport { DIALOG_COMPONENT_NAME } from \"./registerDialog\";\nimport {\n  MODAL_COMPONENT_NAME,\n  MODAL_DEFAULT_SLOT_CONTENT,\n} from \"./registerModal\";\nimport {\n  CodeComponentMetaOverrides,\n  Registerable,\n  WithPlasmicCanvasComponentInfo,\n  makeComponentName,\n  registerComponentHelper,\n} from \"./utils\";\n\nexport interface TriggerWrapperProps {\n  children?: React.ReactNode;\n  className?: string;\n}\n\n/*\n  React Aria's DialogTrigger requires a Aria Button as trigger.\n  (Aria Button works as a trigger because it uses useButton behind the scenes).\n  So we use useButton as well for our custom trigger.\n\n  Discussion (React-aria-components DialogTrigger with custom button):\n  https://github.com/adobe/react-spectrum/discussions/5119#discussioncomment-7084661\n\n  */\nexport function TriggerWrapper({ children, className }: TriggerWrapperProps) {\n  const ref = React.useRef<HTMLDivElement | null>(null);\n  const { buttonProps } = useButton({}, ref);\n\n  const mergedProps = mergeProps(buttonProps, {\n    ref,\n    // We expose className to allow user control over the wrapper div's styling.\n    className,\n    style: COMMON_STYLES,\n  });\n\n  return <div {...mergedProps}>{children}</div>;\n}\n\nexport interface BaseDialogTriggerProps\n  extends Omit<DialogTriggerProps, \"children\">,\n    WithPlasmicCanvasComponentInfo {\n  trigger?: React.ReactNode;\n  dialog?: React.ReactNode;\n  className?: string;\n}\n\nexport function BaseDialogTrigger(props: BaseDialogTriggerProps) {\n  const { trigger, dialog, isOpen, className, ...rest } = props;\n\n  const { isSelected, selectedSlotName } =\n    usePlasmicCanvasComponentInfo?.(props) ?? {};\n  const isAutoOpen = selectedSlotName !== \"trigger\" && isSelected;\n\n  const mergedProps = {\n    ...rest,\n    isOpen: isAutoOpen || isOpen,\n  };\n\n  return (\n    <PlasmicDialogTriggerContext.Provider value={mergedProps}>\n      <DialogTrigger {...mergedProps}>\n        {trigger && (\n          <TriggerWrapper className={className}>{trigger}</TriggerWrapper>\n        )}\n        {dialog}\n      </DialogTrigger>\n    </PlasmicDialogTriggerContext.Provider>\n  );\n}\n\nexport function registerDialogTrigger(\n  loader?: Registerable,\n  overrides?: CodeComponentMetaOverrides<typeof BaseDialogTrigger>\n) {\n  registerComponentHelper(\n    loader,\n    BaseDialogTrigger,\n    {\n      name: makeComponentName(\"dialogTrigger\"),\n      displayName: \"Aria Dialog Trigger\",\n      importPath: \"@plasmicpkgs/react-aria/skinny/registerDialogTrigger\",\n      importName: \"BaseDialogTrigger\",\n      props: {\n        trigger: {\n          type: \"slot\",\n          mergeWithParent: true,\n          defaultValue: {\n            type: \"component\",\n            name: BUTTON_COMPONENT_NAME,\n            props: {\n              children: {\n                type: \"text\",\n                value: \"Open Dialog\",\n              },\n            },\n          },\n        },\n        dialog: {\n          type: \"slot\",\n          mergeWithParent: true,\n          defaultValue: [\n            {\n              type: \"component\",\n              name: MODAL_COMPONENT_NAME,\n              props: {\n                children: {\n                  type: \"component\",\n                  name: DIALOG_COMPONENT_NAME,\n                  props: {\n                    children: MODAL_DEFAULT_SLOT_CONTENT,\n                  },\n                },\n              },\n            },\n          ],\n        },\n        isOpen: {\n          type: \"boolean\",\n          defaultValueHint: false,\n          editOnly: true,\n          uncontrolledProp: \"defaultOpen\",\n        },\n        onOpenChange: {\n          type: \"eventHandler\",\n          argTypes: [{ name: \"isOpen\", type: \"boolean\" }],\n        },\n      },\n      states: {\n        isOpen: {\n          type: \"writable\",\n          valueProp: \"isOpen\",\n          onChangeProp: \"onOpenChange\",\n          variableType: \"boolean\",\n        },\n      },\n      trapsFocus: true,\n    },\n    overrides\n  );\n}\n"],"names":["React","useButton","mergeProps","COMMON_STYLES","usePlasmicCanvasComponentInfo","PlasmicDialogTriggerContext","DialogTrigger","registerComponentHelper","makeComponentName","BUTTON_COMPONENT_NAME","MODAL_COMPONENT_NAME","DIALOG_COMPONENT_NAME","MODAL_DEFAULT_SLOT_CONTENT"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCO,SAAS,cAAe,CAAA,EAAE,QAAU,EAAA,SAAA,EAAkC,EAAA;AAC3E,EAAM,MAAA,GAAA,GAAMA,sBAAM,CAAA,MAAA,CAA8B,IAAI,CAAA,CAAA;AACpD,EAAA,MAAM,EAAE,WAAY,EAAA,GAAIC,mBAAU,CAAA,IAAI,GAAG,CAAA,CAAA;AAEzC,EAAM,MAAA,WAAA,GAAcC,qBAAW,WAAa,EAAA;AAAA,IAC1C,GAAA;AAAA;AAAA,IAEA,SAAA;AAAA,IACA,KAAO,EAAAC,oBAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAO,uBAAAH,sBAAA,CAAA,aAAA,CAAC,KAAQ,EAAA,cAAA,CAAA,EAAA,EAAA,WAAA,CAAA,EAAc,QAAS,CAAA,CAAA;AACzC,CAAA;AAUO,SAAS,kBAAkB,KAA+B,EAAA;AAxDjE,EAAA,IAAA,EAAA,EAAA,EAAA,CAAA;AAyDE,EAAA,MAAwD,EAAhD,GAAA,KAAA,EAAA,EAAA,OAAA,EAAS,MAAQ,EAAA,MAAA,EAAQ,SAzDnC,EAAA,GAyD0D,EAAT,EAAA,IAAA,GAAA,SAAA,CAAS,EAAT,EAAA,CAAvC,SAAS,EAAA,QAAA,EAAQ,QAAQ,EAAA,WAAA,CAAA,CAAA,CAAA;AAEjC,EAAA,MAAM,EAAE,UAAY,EAAA,gBAAA,MAClB,EAAgC,GAAA,CAAA,EAAA,GAAAI,kCAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAA,CAAA,KAAhC,YAA0C,EAAC,CAAA;AAC7C,EAAM,MAAA,UAAA,GAAa,qBAAqB,SAAa,IAAA,UAAA,CAAA;AAErD,EAAM,MAAA,WAAA,GAAc,iCACf,IADe,CAAA,EAAA;AAAA,IAElB,QAAQ,UAAc,IAAA,MAAA;AAAA,GACxB,CAAA,CAAA;AAEA,EAAA,4DACGC,oCAA4B,CAAA,QAAA,EAA5B,EAAqC,KAAA,EAAO,+BAC1CL,sBAAA,CAAA,aAAA,CAAAM,iCAAA,EAAA,cAAA,CAAA,EAAA,EAAkB,WAChB,CAAA,EAAA,OAAA,yDACE,cAAe,EAAA,EAAA,SAAA,EAAA,EAAuB,OAAQ,CAAA,EAEhD,MACH,CACF,CAAA,CAAA;AAEJ,CAAA;AAEgB,SAAA,qBAAA,CACd,QACA,SACA,EAAA;AACA,EAAAC,6BAAA;AAAA,IACE,MAAA;AAAA,IACA,iBAAA;AAAA,IACA;AAAA,MACE,IAAA,EAAMC,wBAAkB,eAAe,CAAA;AAAA,MACvC,WAAa,EAAA,qBAAA;AAAA,MACb,UAAY,EAAA,sDAAA;AAAA,MACZ,UAAY,EAAA,mBAAA;AAAA,MACZ,KAAO,EAAA;AAAA,QACL,OAAS,EAAA;AAAA,UACP,IAAM,EAAA,MAAA;AAAA,UACN,eAAiB,EAAA,IAAA;AAAA,UACjB,YAAc,EAAA;AAAA,YACZ,IAAM,EAAA,WAAA;AAAA,YACN,IAAM,EAAAC,oCAAA;AAAA,YACN,KAAO,EAAA;AAAA,cACL,QAAU,EAAA;AAAA,gBACR,IAAM,EAAA,MAAA;AAAA,gBACN,KAAO,EAAA,aAAA;AAAA,eACT;AAAA,aACF;AAAA,WACF;AAAA,SACF;AAAA,QACA,MAAQ,EAAA;AAAA,UACN,IAAM,EAAA,MAAA;AAAA,UACN,eAAiB,EAAA,IAAA;AAAA,UACjB,YAAc,EAAA;AAAA,YACZ;AAAA,cACE,IAAM,EAAA,WAAA;AAAA,cACN,IAAM,EAAAC,kCAAA;AAAA,cACN,KAAO,EAAA;AAAA,gBACL,QAAU,EAAA;AAAA,kBACR,IAAM,EAAA,WAAA;AAAA,kBACN,IAAM,EAAAC,oCAAA;AAAA,kBACN,KAAO,EAAA;AAAA,oBACL,QAAU,EAAAC,wCAAA;AAAA,mBACZ;AAAA,iBACF;AAAA,eACF;AAAA,aACF;AAAA,WACF;AAAA,SACF;AAAA,QACA,MAAQ,EAAA;AAAA,UACN,IAAM,EAAA,SAAA;AAAA,UACN,gBAAkB,EAAA,KAAA;AAAA,UAClB,QAAU,EAAA,IAAA;AAAA,UACV,gBAAkB,EAAA,aAAA;AAAA,SACpB;AAAA,QACA,YAAc,EAAA;AAAA,UACZ,IAAM,EAAA,cAAA;AAAA,UACN,UAAU,CAAC,EAAE,MAAM,QAAU,EAAA,IAAA,EAAM,WAAW,CAAA;AAAA,SAChD;AAAA,OACF;AAAA,MACA,MAAQ,EAAA;AAAA,QACN,MAAQ,EAAA;AAAA,UACN,IAAM,EAAA,UAAA;AAAA,UACN,SAAW,EAAA,QAAA;AAAA,UACX,YAAc,EAAA,cAAA;AAAA,UACd,YAAc,EAAA,SAAA;AAAA,SAChB;AAAA,OACF;AAAA,MACA,UAAY,EAAA,IAAA;AAAA,KACd;AAAA,IACA,SAAA;AAAA,GACF,CAAA;AACF;;;;;;"}

package/skinny/registerDialogTrigger.d.ts

@@ -1,9 +1,15 @@
 import React from "react";
 import { DialogTriggerProps } from "react-aria-components";
 import { CodeComponentMetaOverrides, Registerable, WithPlasmicCanvasComponentInfo } from "./utils";
+export interface TriggerWrapperProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare function TriggerWrapper({ children, className }: TriggerWrapperProps): React.JSX.Element;
 export interface BaseDialogTriggerProps extends Omit<DialogTriggerProps, "children">, WithPlasmicCanvasComponentInfo {
     trigger?: React.ReactNode;
     dialog?: React.ReactNode;
+    className?: string;
 }
 export declare function BaseDialogTrigger(props: BaseDialogTriggerProps): React.JSX.Element;
 export declare function registerDialogTrigger(loader?: Registerable, overrides?: CodeComponentMetaOverrides<typeof BaseDialogTrigger>): void;

package/skinny/registerDialogTrigger.esm.js

@@ -1,13 +1,13 @@
 import { usePlasmicCanvasComponentInfo } from '@plasmicapp/host';
 import React from 'react';
+import { useButton, mergeProps } from 'react-aria';
 import { DialogTrigger } from 'react-aria-components';
+import { C as COMMON_STYLES } from './common-ceebbaea.esm.js';
 import { d as PlasmicDialogTriggerContext } from './contexts-5cb81c2f.esm.js';
 import { BUTTON_COMPONENT_NAME } from './registerButton.esm.js';
 import { DIALOG_COMPONENT_NAME } from './registerDialog.esm.js';
 import { MODAL_COMPONENT_NAME, MODAL_DEFAULT_SLOT_CONTENT } from './registerModal.esm.js';
 import { r as registerComponentHelper, m as makeComponentName } from './utils-5d1b4c6b.esm.js';
-import 'react-aria';
-import './common-ceebbaea.esm.js';
 import './variant-utils-4405ebb0.esm.js';
 import '@plasmicapp/host/registerComponent';
 
@@ -42,15 +42,26 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+function TriggerWrapper({ children, className }) {
+  const ref = React.useRef(null);
+  const { buttonProps } = useButton({}, ref);
+  const mergedProps = mergeProps(buttonProps, {
+    ref,
+    // We expose className to allow user control over the wrapper div's styling.
+    className,
+    style: COMMON_STYLES
+  });
+  return /* @__PURE__ */ React.createElement("div", __spreadValues({}, mergedProps), children);
+}
 function BaseDialogTrigger(props) {
   var _b, _c;
-  const _a = props, { trigger, dialog, isOpen } = _a, rest = __objRest(_a, ["trigger", "dialog", "isOpen"]);
+  const _a = props, { trigger, dialog, isOpen, className } = _a, rest = __objRest(_a, ["trigger", "dialog", "isOpen", "className"]);
   const { isSelected, selectedSlotName } = (_c = (_b = usePlasmicCanvasComponentInfo) == null ? void 0 : _b(props)) != null ? _c : {};
   const isAutoOpen = selectedSlotName !== "trigger" && isSelected;
   const mergedProps = __spreadProps(__spreadValues({}, rest), {
     isOpen: isAutoOpen || isOpen
   });
-  return /* @__PURE__ */ React.createElement(PlasmicDialogTriggerContext.Provider, { value: mergedProps }, /* @__PURE__ */ React.createElement(DialogTrigger, __spreadValues({}, mergedProps), trigger, dialog));
+  return /* @__PURE__ */ React.createElement(PlasmicDialogTriggerContext.Provider, { value: mergedProps }, /* @__PURE__ */ React.createElement(DialogTrigger, __spreadValues({}, mergedProps), trigger && /* @__PURE__ */ React.createElement(TriggerWrapper, { className }, trigger), dialog));
 }
 function registerDialogTrigger(loader, overrides) {
   registerComponentHelper(
@@ -61,7 +72,6 @@ function registerDialogTrigger(loader, overrides) {
       displayName: "Aria Dialog Trigger",
       importPath: "@plasmicpkgs/react-aria/skinny/registerDialogTrigger",
       importName: "BaseDialogTrigger",
-      styleSections: false,
       props: {
         trigger: {
           type: "slot",
@@ -121,5 +131,5 @@ function registerDialogTrigger(loader, overrides) {
   );
 }
 
-export { BaseDialogTrigger, registerDialogTrigger };
+export { BaseDialogTrigger, TriggerWrapper, registerDialogTrigger };
 //# sourceMappingURL=registerDialogTrigger.esm.js.map

package/skinny/registerDialogTrigger.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"registerDialogTrigger.esm.js","sources":["../src/registerDialogTrigger.tsx"],"sourcesContent":["import { usePlasmicCanvasComponentInfo } from \"@plasmicapp/host\";\nimport React from \"react\";\nimport { DialogTrigger, DialogTriggerProps } from \"react-aria-components\";\nimport { PlasmicDialogTriggerContext } from \"./contexts\";\nimport { BUTTON_COMPONENT_NAME } from \"./registerButton\";\nimport { DIALOG_COMPONENT_NAME } from \"./registerDialog\";\nimport {\n  MODAL_COMPONENT_NAME,\n  MODAL_DEFAULT_SLOT_CONTENT,\n} from \"./registerModal\";\nimport {\n  CodeComponentMetaOverrides,\n  Registerable,\n  WithPlasmicCanvasComponentInfo,\n  makeComponentName,\n  registerComponentHelper,\n} from \"./utils\";\n\nexport interface BaseDialogTriggerProps\n  extends Omit<DialogTriggerProps, \"children\">,\n    WithPlasmicCanvasComponentInfo {\n  trigger?: React.ReactNode;\n  dialog?: React.ReactNode;\n}\n\nexport function BaseDialogTrigger(props: BaseDialogTriggerProps) {\n  const { trigger, dialog, isOpen, ...rest } = props;\n\n  const { isSelected, selectedSlotName } =\n    usePlasmicCanvasComponentInfo?.(props) ?? {};\n  const isAutoOpen = selectedSlotName !== \"trigger\" && isSelected;\n\n  const mergedProps = {\n    ...rest,\n    isOpen: isAutoOpen || isOpen,\n  };\n\n  return (\n    <PlasmicDialogTriggerContext.Provider value={mergedProps}>\n      <DialogTrigger {...mergedProps}>\n        {trigger}\n        {dialog}\n      </DialogTrigger>\n    </PlasmicDialogTriggerContext.Provider>\n  );\n}\n\nexport function registerDialogTrigger(\n  loader?: Registerable,\n  overrides?: CodeComponentMetaOverrides<typeof BaseDialogTrigger>\n) {\n  registerComponentHelper(\n    loader,\n    BaseDialogTrigger,\n    {\n      name: makeComponentName(\"dialogTrigger\"),\n      displayName: \"Aria Dialog Trigger\",\n      importPath: \"@plasmicpkgs/react-aria/skinny/registerDialogTrigger\",\n      importName: \"BaseDialogTrigger\",\n      styleSections: false,\n      props: {\n        trigger: {\n          type: \"slot\",\n          mergeWithParent: true,\n          defaultValue: {\n            type: \"component\",\n            name: BUTTON_COMPONENT_NAME,\n            props: {\n              children: {\n                type: \"text\",\n                value: \"Open Dialog\",\n              },\n            },\n          },\n        },\n        dialog: {\n          type: \"slot\",\n          mergeWithParent: true,\n          defaultValue: [\n            {\n              type: \"component\",\n              name: MODAL_COMPONENT_NAME,\n              props: {\n                children: {\n                  type: \"component\",\n                  name: DIALOG_COMPONENT_NAME,\n                  props: {\n                    children: MODAL_DEFAULT_SLOT_CONTENT,\n                  },\n                },\n              },\n            },\n          ],\n        },\n        isOpen: {\n          type: \"boolean\",\n          defaultValueHint: false,\n          editOnly: true,\n          uncontrolledProp: \"defaultOpen\",\n        },\n        onOpenChange: {\n          type: \"eventHandler\",\n          argTypes: [{ name: \"isOpen\", type: \"boolean\" }],\n        },\n      },\n      states: {\n        isOpen: {\n          type: \"writable\",\n          valueProp: \"isOpen\",\n          onChangeProp: \"onOpenChange\",\n          variableType: \"boolean\",\n        },\n      },\n      trapsFocus: true,\n    },\n    overrides\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"registerDialogTrigger.esm.js","sources":["../src/registerDialogTrigger.tsx"],"sourcesContent":["import { usePlasmicCanvasComponentInfo } from \"@plasmicapp/host\";\nimport React from \"react\";\nimport { mergeProps, useButton } from \"react-aria\";\nimport { DialogTrigger, DialogTriggerProps } from \"react-aria-components\";\nimport { COMMON_STYLES } from \"./common\";\nimport { PlasmicDialogTriggerContext } from \"./contexts\";\nimport { BUTTON_COMPONENT_NAME } from \"./registerButton\";\nimport { DIALOG_COMPONENT_NAME } from \"./registerDialog\";\nimport {\n  MODAL_COMPONENT_NAME,\n  MODAL_DEFAULT_SLOT_CONTENT,\n} from \"./registerModal\";\nimport {\n  CodeComponentMetaOverrides,\n  Registerable,\n  WithPlasmicCanvasComponentInfo,\n  makeComponentName,\n  registerComponentHelper,\n} from \"./utils\";\n\nexport interface TriggerWrapperProps {\n  children?: React.ReactNode;\n  className?: string;\n}\n\n/*\n  React Aria's DialogTrigger requires a Aria Button as trigger.\n  (Aria Button works as a trigger because it uses useButton behind the scenes).\n  So we use useButton as well for our custom trigger.\n\n  Discussion (React-aria-components DialogTrigger with custom button):\n  https://github.com/adobe/react-spectrum/discussions/5119#discussioncomment-7084661\n\n  */\nexport function TriggerWrapper({ children, className }: TriggerWrapperProps) {\n  const ref = React.useRef<HTMLDivElement | null>(null);\n  const { buttonProps } = useButton({}, ref);\n\n  const mergedProps = mergeProps(buttonProps, {\n    ref,\n    // We expose className to allow user control over the wrapper div's styling.\n    className,\n    style: COMMON_STYLES,\n  });\n\n  return <div {...mergedProps}>{children}</div>;\n}\n\nexport interface BaseDialogTriggerProps\n  extends Omit<DialogTriggerProps, \"children\">,\n    WithPlasmicCanvasComponentInfo {\n  trigger?: React.ReactNode;\n  dialog?: React.ReactNode;\n  className?: string;\n}\n\nexport function BaseDialogTrigger(props: BaseDialogTriggerProps) {\n  const { trigger, dialog, isOpen, className, ...rest } = props;\n\n  const { isSelected, selectedSlotName } =\n    usePlasmicCanvasComponentInfo?.(props) ?? {};\n  const isAutoOpen = selectedSlotName !== \"trigger\" && isSelected;\n\n  const mergedProps = {\n    ...rest,\n    isOpen: isAutoOpen || isOpen,\n  };\n\n  return (\n    <PlasmicDialogTriggerContext.Provider value={mergedProps}>\n      <DialogTrigger {...mergedProps}>\n        {trigger && (\n          <TriggerWrapper className={className}>{trigger}</TriggerWrapper>\n        )}\n        {dialog}\n      </DialogTrigger>\n    </PlasmicDialogTriggerContext.Provider>\n  );\n}\n\nexport function registerDialogTrigger(\n  loader?: Registerable,\n  overrides?: CodeComponentMetaOverrides<typeof BaseDialogTrigger>\n) {\n  registerComponentHelper(\n    loader,\n    BaseDialogTrigger,\n    {\n      name: makeComponentName(\"dialogTrigger\"),\n      displayName: \"Aria Dialog Trigger\",\n      importPath: \"@plasmicpkgs/react-aria/skinny/registerDialogTrigger\",\n      importName: \"BaseDialogTrigger\",\n      props: {\n        trigger: {\n          type: \"slot\",\n          mergeWithParent: true,\n          defaultValue: {\n            type: \"component\",\n            name: BUTTON_COMPONENT_NAME,\n            props: {\n              children: {\n                type: \"text\",\n                value: \"Open Dialog\",\n              },\n            },\n          },\n        },\n        dialog: {\n          type: \"slot\",\n          mergeWithParent: true,\n          defaultValue: [\n            {\n              type: \"component\",\n              name: MODAL_COMPONENT_NAME,\n              props: {\n                children: {\n                  type: \"component\",\n                  name: DIALOG_COMPONENT_NAME,\n                  props: {\n                    children: MODAL_DEFAULT_SLOT_CONTENT,\n                  },\n                },\n              },\n            },\n          ],\n        },\n        isOpen: {\n          type: \"boolean\",\n          defaultValueHint: false,\n          editOnly: true,\n          uncontrolledProp: \"defaultOpen\",\n        },\n        onOpenChange: {\n          type: \"eventHandler\",\n          argTypes: [{ name: \"isOpen\", type: \"boolean\" }],\n        },\n      },\n      states: {\n        isOpen: {\n          type: \"writable\",\n          valueProp: \"isOpen\",\n          onChangeProp: \"onOpenChange\",\n          variableType: \"boolean\",\n        },\n      },\n      trapsFocus: true,\n    },\n    overrides\n  );\n}\n"],"names":[],"mappings":"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"}

package/skinny/registerDialogTrigger.stories.cjs.js

@@ -24,6 +24,8 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var React__default = /*#__PURE__*/_interopDefault(React);
 
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -39,6 +41,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -59,20 +62,30 @@ const meta = {
     onOpenChange: test.fn()
   }
 };
+const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 const DefaultContent = () => /* @__PURE__ */ React__default.default.createElement("div", { "data-testid": "dialog-content" }, /* @__PURE__ */ React__default.default.createElement("h2", null, "Dialog Title"), /* @__PURE__ */ React__default.default.createElement("p", null, "Dialog content goes here"));
+const DefaultPopoverContent = (props) => /* @__PURE__ */ React__default.default.createElement(registerPopover.BasePopover, __spreadValues({}, props), /* @__PURE__ */ React__default.default.createElement(registerDialog.BaseDialog, null, /* @__PURE__ */ React__default.default.createElement(DefaultContent, null)));
+const DefaultModalContent = (props) => /* @__PURE__ */ React__default.default.createElement(registerModal.BaseModal, __spreadValues({}, props), /* @__PURE__ */ React__default.default.createElement(registerDialog.BaseDialog, null, /* @__PURE__ */ React__default.default.createElement(DefaultContent, null)));
 const WithModal = {
   args: {
-    trigger: /* @__PURE__ */ React__default.default.createElement(registerButton.BaseButton, null, "Open modal"),
-    dialog: /* @__PURE__ */ React__default.default.createElement(registerModal.BaseModal, { isDismissable: true, isKeyboardDismissDisabled: false }, /* @__PURE__ */ React__default.default.createElement(registerDialog.BaseDialog, null, /* @__PURE__ */ React__default.default.createElement(DefaultContent, null)))
+    trigger: /* @__PURE__ */ React__default.default.createElement("span", { tabIndex: 0 }, "Open modal"),
+    // anything can be used as a trigger
+    dialog: /* @__PURE__ */ React__default.default.createElement(
+      DefaultModalContent,
+      {
+        isDismissable: true,
+        isKeyboardDismissDisabled: false
+      }
+    )
   },
   play: async ({ canvasElement, args }) => {
     const canvas = test.within(canvasElement);
     const doc = test.within(document.body);
-    const button = canvas.getByText("Open modal");
+    const trigger = canvas.getByText("Open modal");
     await test.waitFor(() => {
       test.expect(doc.queryByTestId("dialog-content")).not.toBeInTheDocument();
     });
-    await test.userEvent.click(button);
+    await test.userEvent.click(trigger);
     await test.waitFor(() => {
       test.expect(doc.queryByTestId("dialog-content")).toBeInTheDocument();
     });
@@ -80,7 +93,12 @@ const WithModal = {
     await test.waitFor(() => {
       test.expect(doc.queryByTestId("dialog-content")).not.toBeInTheDocument();
     });
-    await test.userEvent.click(button);
+    await test.userEvent.tab();
+    test.expect(trigger).toHaveFocus();
+    await test.waitFor(() => {
+      test.expect(doc.queryByTestId("dialog-content")).not.toBeInTheDocument();
+    });
+    await test.userEvent.keyboard("[Space]");
     await test.waitFor(() => {
       test.expect(doc.queryByTestId("dialog-content")).toBeInTheDocument();
     });
@@ -91,19 +109,105 @@ const WithModal = {
     test.expect(args.onOpenChange).toHaveBeenCalledTimes(4);
   }
 };
+const TriggerWithCustomEventHandler = {
+  args: {
+    dialog: /* @__PURE__ */ React__default.default.createElement(
+      DefaultModalContent,
+      {
+        isDismissable: true,
+        isKeyboardDismissDisabled: false
+      }
+    )
+  },
+  parameters: {
+    customOnClick: test.fn()
+  },
+  render: (args, { parameters }) => {
+    return /* @__PURE__ */ React__default.default.createElement(
+      registerDialogTrigger.BaseDialogTrigger,
+      __spreadProps(__spreadValues({}, args), {
+        trigger: /* @__PURE__ */ React__default.default.createElement("span", { className: "custom-class", onClick: parameters.customOnClick }, "Open modal")
+      })
+    );
+  },
+  play: async ({ canvasElement, args, parameters }) => {
+    const canvas = test.within(canvasElement);
+    const doc = test.within(document.body);
+    const trigger = canvas.getByText("Open modal");
+    await test.waitFor(() => {
+      test.expect(doc.queryByTestId("dialog-content")).not.toBeInTheDocument();
+    });
+    test.expect(trigger).toHaveClass("custom-class");
+    test.expect(parameters.customOnClick).toHaveBeenCalledTimes(0);
+    await test.userEvent.click(trigger);
+    test.expect(parameters.customOnClick).toHaveBeenCalledTimes(1);
+    await test.waitFor(() => {
+      test.expect(doc.queryByTestId("dialog-content")).toBeInTheDocument();
+    });
+    await test.userEvent.click(document.body);
+    await test.waitFor(() => {
+      test.expect(doc.queryByTestId("dialog-content")).not.toBeInTheDocument();
+    });
+    test.expect(args.onOpenChange).toHaveBeenCalledTimes(2);
+  }
+};
+const WithNestedTrigger = {
+  args: {
+    dialog: /* @__PURE__ */ React__default.default.createElement(
+      DefaultModalContent,
+      {
+        isDismissable: true,
+        isKeyboardDismissDisabled: false
+      }
+    ),
+    trigger: /* @__PURE__ */ React__default.default.createElement("div", null, /* @__PURE__ */ React__default.default.createElement("span", { tabIndex: 0 }, "Open modal"), /* @__PURE__ */ React__default.default.createElement("span", { tabIndex: 0, onClick: (e) => e.stopPropagation() }, "Open modal"), /* @__PURE__ */ React__default.default.createElement("span", { tabIndex: 0 }, "Open modal"))
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = test.within(canvasElement);
+    const doc = test.within(document.body);
+    const triggers = canvas.getAllByText("Open modal");
+    await test.waitFor(() => {
+      test.expect(doc.queryByTestId("dialog-content")).not.toBeInTheDocument();
+    });
+    await test.userEvent.click(triggers[0]);
+    await test.waitFor(() => {
+      test.expect(doc.queryByTestId("dialog-content")).toBeInTheDocument();
+    });
+    await test.userEvent.click(triggers[0]);
+    await test.waitFor(() => {
+      test.expect(doc.queryByTestId("dialog-content")).not.toBeInTheDocument();
+    });
+    test.expect(args.onOpenChange).toHaveBeenCalledTimes(2);
+    await test.userEvent.click(triggers[1]);
+    await test.waitFor(() => {
+      test.expect(doc.queryByTestId("dialog-content")).not.toBeInTheDocument();
+    });
+    test.expect(args.onOpenChange).toHaveBeenCalledTimes(2);
+    await test.userEvent.click(triggers[2]);
+    await test.waitFor(() => {
+      test.expect(doc.queryByTestId("dialog-content")).toBeInTheDocument();
+    });
+    test.expect(args.onOpenChange).toHaveBeenCalledTimes(3);
+    await test.userEvent.keyboard("{Escape}");
+    test.expect(args.onOpenChange).toHaveBeenCalledTimes(4);
+    await test.userEvent.click(triggers[2]);
+    test.expect(args.onOpenChange).toHaveBeenCalledTimes(5);
+  }
+};
 const WithPopover = {
   args: {
-    trigger: /* @__PURE__ */ React__default.default.createElement(registerButton.BaseButton, null, "Open popover"),
-    dialog: /* @__PURE__ */ React__default.default.createElement(registerPopover.BasePopover, { isKeyboardDismissDisabled: false }, /* @__PURE__ */ React__default.default.createElement(registerDialog.BaseDialog, null, /* @__PURE__ */ React__default.default.createElement(DefaultContent, null)))
+    trigger: /* @__PURE__ */ React__default.default.createElement("span", { tabIndex: 0 }, "Open popover"),
+    // anything can be used as a trigger
+    dialog: /* @__PURE__ */ React__default.default.createElement(DefaultPopoverContent, { isKeyboardDismissDisabled: false })
   },
   play: async ({ canvasElement, args }) => {
     const canvas = test.within(canvasElement);
     const doc = test.within(document.body);
-    const button = canvas.getByText("Open popover");
+    const trigger = canvas.getByText("Open popover");
     await test.waitFor(() => {
       test.expect(doc.queryByTestId("dialog-content")).not.toBeInTheDocument();
     });
-    await test.userEvent.click(button);
+    await test.userEvent.click(trigger);
     await test.waitFor(() => {
       test.expect(doc.queryByTestId("dialog-content")).toBeInTheDocument();
     });
@@ -111,7 +215,9 @@ const WithPopover = {
     await test.waitFor(() => {
       test.expect(doc.queryByTestId("dialog-content")).not.toBeInTheDocument();
     });
-    await test.userEvent.click(button);
+    await test.userEvent.tab();
+    await test.expect(trigger).toHaveFocus();
+    await test.userEvent.keyboard("[Space]");
     await test.waitFor(() => {
       test.expect(doc.queryByTestId("dialog-content")).toBeInTheDocument();
     });
@@ -124,17 +230,24 @@ const WithPopover = {
 };
 const WithPopoverNonModal = {
   args: {
-    trigger: /* @__PURE__ */ React__default.default.createElement(registerButton.BaseButton, null, "Open popover"),
-    dialog: /* @__PURE__ */ React__default.default.createElement(registerPopover.BasePopover, { isNonModal: true, isKeyboardDismissDisabled: false }, /* @__PURE__ */ React__default.default.createElement(registerDialog.BaseDialog, null, /* @__PURE__ */ React__default.default.createElement(DefaultContent, null)))
+    trigger: /* @__PURE__ */ React__default.default.createElement("span", null, "Open popover"),
+    // anything can be used as a trigger
+    dialog: /* @__PURE__ */ React__default.default.createElement(
+      DefaultPopoverContent,
+      {
+        isNonModal: true,
+        isKeyboardDismissDisabled: false
+      }
+    )
   },
   play: async ({ canvasElement, args }) => {
     const canvas = test.within(canvasElement);
     const doc = test.within(document.body);
-    const button = canvas.getByText("Open popover");
+    const trigger = canvas.getByText("Open popover");
     await test.waitFor(() => {
       test.expect(doc.queryByTestId("dialog-content")).not.toBeInTheDocument();
     });
-    await test.userEvent.click(button);
+    await test.userEvent.click(trigger);
     await test.waitFor(() => {
       test.expect(doc.queryByTestId("dialog-content")).toBeInTheDocument();
     });
@@ -149,10 +262,66 @@ const WithPopoverNonModal = {
     test.expect(args.onOpenChange).toHaveBeenCalledTimes(2);
   }
 };
+const ControlledDialog = {
+  args: {
+    trigger: void 0,
+    dialog: /* @__PURE__ */ React__default.default.createElement(DefaultPopoverContent, null)
+  },
+  render: ({ isOpen, dialog }) => {
+    const [open, setOpen] = React.useState(isOpen);
+    return /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement("span", { onClick: () => setOpen((prev) => !prev) }, "Toggle"), /* @__PURE__ */ React__default.default.createElement(
+      registerDialogTrigger.BaseDialogTrigger,
+      {
+        isOpen: open,
+        onOpenChange: setOpen,
+        dialog
+      }
+    ));
+  },
+  play: async ({ canvasElement }) => {
+    const doc = test.within(document.body);
+    const canvas = test.within(canvasElement);
+    const trigger = canvas.getByText("Toggle");
+    await test.waitFor(() => {
+      test.expect(doc.queryByTestId("dialog-content")).not.toBeInTheDocument();
+    });
+    await trigger.click();
+    await test.waitFor(() => {
+      test.expect(doc.queryByTestId("dialog-content")).toBeInTheDocument();
+    });
+    await trigger.click();
+    await test.waitFor(() => {
+      test.expect(doc.queryByTestId("dialog-content")).not.toBeInTheDocument();
+    });
+  }
+};
+const AriaButtonTrigger = {
+  args: {
+    dialog: /* @__PURE__ */ React__default.default.createElement(DefaultModalContent, { isDismissable: true }),
+    trigger: /* @__PURE__ */ React__default.default.createElement(registerButton.BaseButton, null, "Open modal")
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = test.within(canvasElement);
+    const doc = test.within(document.body);
+    const trigger = canvas.getByText("Open modal");
+    await test.waitFor(() => {
+      test.expect(doc.queryByTestId("dialog-content")).not.toBeInTheDocument();
+    });
+    await test.userEvent.click(trigger);
+    await test.waitFor(() => {
+      test.expect(doc.queryByTestId("dialog-content")).toBeInTheDocument();
+    });
+    await test.userEvent.click(document.body);
+    await test.waitFor(() => {
+      test.expect(doc.queryByTestId("dialog-content")).not.toBeInTheDocument();
+    });
+    test.expect(args.onOpenChange).toHaveBeenCalledTimes(2);
+  }
+};
 const SelectedInCanvas = {
   args: {
-    trigger: /* @__PURE__ */ React__default.default.createElement(registerButton.BaseButton, null, "Open popover"),
-    dialog: /* @__PURE__ */ React__default.default.createElement(registerPopover.BasePopover, { isNonModal: true, isKeyboardDismissDisabled: false }, /* @__PURE__ */ React__default.default.createElement(registerDialog.BaseDialog, null, /* @__PURE__ */ React__default.default.createElement(DefaultContent, null)))
+    trigger: void 0,
+    dialog: /* @__PURE__ */ React__default.default.createElement(DefaultPopoverContent, { isKeyboardDismissDisabled: false })
   },
   render: (_a) => {
     var _b = _a, args = __objRest(_b, ["__plasmic_selection_prop__"]);
@@ -207,9 +376,77 @@ const SelectedInCanvas = {
     );
   }
 };
+const PopoverPosition = {
+  args: {
+    trigger: /* @__PURE__ */ React__default.default.createElement("span", null, "Open popover"),
+    // anything can be used as a trigger
+    dialog: /* @__PURE__ */ React__default.default.createElement(DefaultPopoverContent, null)
+  },
+  render: (args) => {
+    const [className, setClassName] = React.useState("popover");
+    React.useEffect(() => {
+      setTimeout(() => {
+        setClassName((prev) => `${prev} popover-right`);
+      }, 1e3);
+    }, []);
+    return /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(
+      "style",
+      {
+        dangerouslySetInnerHTML: {
+          __html: `
+              .popover {
+                display: inline-block;
+              }
+              .popover-right {
+                position: absolute;
+                right: 0;
+              }
+            `
+        }
+      }
+    ), /* @__PURE__ */ React__default.default.createElement(registerDialogTrigger.BaseDialogTrigger, __spreadProps(__spreadValues({}, args), { className })));
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = test.within(canvasElement);
+    const doc = test.within(document.body);
+    const trigger = canvas.getByText("Open popover");
+    await test.waitFor(() => {
+      test.expect(doc.queryByTestId("dialog-content")).not.toBeInTheDocument();
+    });
+    await test.userEvent.click(trigger);
+    let initialPopoverLeftPosition;
+    await test.waitFor(() => {
+      const popover = doc.getByTestId("dialog-content");
+      initialPopoverLeftPosition = popover.getBoundingClientRect().left;
+    });
+    await test.userEvent.click(trigger);
+    await sleep(500);
+    await test.userEvent.click(trigger);
+    await test.waitFor(async () => {
+      const popover = doc.getByTestId("dialog-content");
+      test.expect(initialPopoverLeftPosition).toEqual(
+        popover.getBoundingClientRect().left
+      );
+    });
+    await test.userEvent.click(trigger);
+    await sleep(500);
+    await test.userEvent.click(trigger);
+    await test.waitFor(() => {
+      const popover = doc.getByTestId("dialog-content");
+      test.expect(initialPopoverLeftPosition).not.toEqual(
+        popover.getBoundingClientRect().left
+      );
+    });
+  }
+};
 
+exports.AriaButtonTrigger = AriaButtonTrigger;
+exports.ControlledDialog = ControlledDialog;
+exports.PopoverPosition = PopoverPosition;
 exports.SelectedInCanvas = SelectedInCanvas;
+exports.TriggerWithCustomEventHandler = TriggerWithCustomEventHandler;
 exports.WithModal = WithModal;
+exports.WithNestedTrigger = WithNestedTrigger;
 exports.WithPopover = WithPopover;
 exports.WithPopoverNonModal = WithPopoverNonModal;
 exports.default = meta;