@plasmicpkgs/react-aria 0.0.112 → 0.0.114

package/skinny/registerDialog.cjs.js

@@ -3,8 +3,8 @@
 var host = require('@plasmicapp/host');
 var React = require('react');
 var reactAriaComponents = require('react-aria-components');
-var common = require('./common-b3b54c72.cjs.js');
-var utils = require('./utils-7d000fa4.cjs.js');
+var common = require('./common-c8beb360.cjs.js');
+var utils = require('./utils-91eee672.cjs.js');
 require('@plasmicapp/host/registerComponent');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

package/skinny/registerDialog.esm.js

@@ -1,8 +1,8 @@
 import { usePlasmicCanvasContext } from '@plasmicapp/host';
 import React from 'react';
 import { Dialog } from 'react-aria-components';
-import { C as COMMON_STYLES } from './common-ceebbaea.esm.js';
-import { m as makeComponentName, r as registerComponentHelper } from './utils-5d1b4c6b.esm.js';
+import { C as COMMON_STYLES } from './common-10d1b069.esm.js';
+import { m as makeComponentName, r as registerComponentHelper } from './utils-59f72eb9.esm.js';
 import '@plasmicapp/host/registerComponent';
 
 function BaseDialog({ children, className }) {

package/skinny/registerDialogTrigger.cjs.js

@@ -1,15 +1,15 @@
 'use strict';
 
-var host = require('@plasmicapp/host');
 var React = require('react');
+var reactAria = require('react-aria');
 var reactAriaComponents = require('react-aria-components');
+var common = require('./common-c8beb360.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');
+var utils = require('./utils-91eee672.cjs.js');
+require('@plasmicapp/host');
 require('./variant-utils-0ad70db8.cjs.js');
 require('@plasmicapp/host/registerComponent');
 
@@ -48,15 +48,28 @@ 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 { isSelected, selectedSlotName } = (_c = (_b = host.usePlasmicCanvasComponentInfo) == null ? void 0 : _b(props)) != null ? _c : {};
-  const isAutoOpen = selectedSlotName !== "trigger" && isSelected;
+  const _a = props, { trigger, dialog, isOpen, className, __plasmic_selection_prop__ } = _a, rest = __objRest(_a, ["trigger", "dialog", "isOpen", "className", "__plasmic_selection_prop__"]);
+  const isOpen2 = utils.useIsOpen({
+    triggerSlotName: "trigger",
+    isOpen,
+    __plasmic_selection_prop__
+  });
   const mergedProps = __spreadProps(__spreadValues({}, rest), {
-    isOpen: isAutoOpen || isOpen
+    isOpen: isOpen2
   });
-  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 +80,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 +140,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 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  useIsOpen,\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, __plasmic_selection_prop__, ...rest } =\n    props;\n\n  const isOpen2 = useIsOpen({\n    triggerSlotName: \"trigger\",\n    isOpen,\n    __plasmic_selection_prop__,\n  });\n\n  const mergedProps = {\n    ...rest,\n    isOpen: isOpen2,\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","useIsOpen","PlasmicDialogTriggerContext","DialogTrigger","registerComponentHelper","makeComponentName","BUTTON_COMPONENT_NAME","MODAL_COMPONENT_NAME","DIALOG_COMPONENT_NAME","MODAL_DEFAULT_SLOT_CONTENT"],"mappings":"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"}

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-10d1b069.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 { a as useIsOpen, r as registerComponentHelper, m as makeComponentName } from './utils-59f72eb9.esm.js';
+import '@plasmicapp/host';
 import './variant-utils-4405ebb0.esm.js';
 import '@plasmicapp/host/registerComponent';
 
@@ -42,15 +42,28 @@ 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 { isSelected, selectedSlotName } = (_c = (_b = usePlasmicCanvasComponentInfo) == null ? void 0 : _b(props)) != null ? _c : {};
-  const isAutoOpen = selectedSlotName !== "trigger" && isSelected;
+  const _a = props, { trigger, dialog, isOpen, className, __plasmic_selection_prop__ } = _a, rest = __objRest(_a, ["trigger", "dialog", "isOpen", "className", "__plasmic_selection_prop__"]);
+  const isOpen2 = useIsOpen({
+    triggerSlotName: "trigger",
+    isOpen,
+    __plasmic_selection_prop__
+  });
   const mergedProps = __spreadProps(__spreadValues({}, rest), {
-    isOpen: isAutoOpen || isOpen
+    isOpen: isOpen2
   });
-  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 +74,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 +133,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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBO,SAAS,kBAAkB,KAA+B,EAAA;AAzBjE,EAAA,IAAA,EAAA,EAAA,EAAA,CAAA;AA0BE,EAA6C,MAAA,EAAA,GAAA,KAAA,EAArC,EAAS,OAAA,EAAA,MAAA,EAAQ,MA1B3B,EAAA,GA0B+C,IAAT,IAAS,GAAA,SAAA,CAAA,EAAA,EAAT,CAA5B,SAAA,EAAS,QAAQ,EAAA,QAAA,CAAA,CAAA,CAAA;AAEzB,EAAA,MAAM,EAAE,UAAY,EAAA,gBAAA,MAClB,EAAgC,GAAA,CAAA,EAAA,GAAA,6BAAA,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,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,2BAA4B,CAAA,QAAA,EAA5B,EAAqC,KAAA,EAAO,WAC3C,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,aAAkB,EAAA,cAAA,CAAA,EAAA,EAAA,WAAA,CAAA,EAChB,OACA,EAAA,MACH,CACF,CAAA,CAAA;AAEJ,CAAA;AAEgB,SAAA,qBAAA,CACd,QACA,SACA,EAAA;AACA,EAAA,uBAAA;AAAA,IACE,MAAA;AAAA,IACA,iBAAA;AAAA,IACA;AAAA,MACE,IAAA,EAAM,kBAAkB,eAAe,CAAA;AAAA,MACvC,WAAa,EAAA,qBAAA;AAAA,MACb,UAAY,EAAA,sDAAA;AAAA,MACZ,UAAY,EAAA,mBAAA;AAAA,MACZ,aAAe,EAAA,KAAA;AAAA,MACf,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,EAAA,qBAAA;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,EAAA,oBAAA;AAAA,cACN,KAAO,EAAA;AAAA,gBACL,QAAU,EAAA;AAAA,kBACR,IAAM,EAAA,WAAA;AAAA,kBACN,IAAM,EAAA,qBAAA;AAAA,kBACN,KAAO,EAAA;AAAA,oBACL,QAAU,EAAA,0BAAA;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;;;;"}
+{"version":3,"file":"registerDialogTrigger.esm.js","sources":["../src/registerDialogTrigger.tsx"],"sourcesContent":["import 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  useIsOpen,\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, __plasmic_selection_prop__, ...rest } =\n    props;\n\n  const isOpen2 = useIsOpen({\n    triggerSlotName: \"trigger\",\n    isOpen,\n    __plasmic_selection_prop__,\n  });\n\n  const mergedProps = {\n    ...rest,\n    isOpen: isOpen2,\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

@@ -12,8 +12,8 @@ var registerModal = require('./registerModal.cjs.js');
 var registerPopover = require('./registerPopover.cjs.js');
 require('react-aria');
 require('react-aria-components');
-require('./common-b3b54c72.cjs.js');
-require('./utils-7d000fa4.cjs.js');
+require('./common-c8beb360.cjs.js');
+require('./utils-91eee672.cjs.js');
 require('@plasmicapp/host/registerComponent');
 require('./variant-utils-0ad70db8.cjs.js');
 require('./contexts-6d0cb2b1.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,32 @@ 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,
+      {
+        defaultOpen: true,
+        isOpen: true,
+        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 +95,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 +111,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 +217,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 +232,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 +264,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__"]);
@@ -189,6 +360,8 @@ const SelectedInCanvas = {
     );
   },
   play: async () => {
+    const consoleWarnSpy = test.spyOn(console, "warn").mockImplementation(() => {
+    });
     const doc = test.within(document.body);
     await test.waitFor(() => {
       test.expect(doc.queryByTestId("dialog-content")).not.toBeInTheDocument();
@@ -205,11 +378,80 @@ const SelectedInCanvas = {
       },
       { timeout: 1100 }
     );
+    test.expect(consoleWarnSpy).not.toHaveBeenCalled();
+  }
+};
+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;