@plasmicpkgs/react-aria 0.0.65 → 0.0.67

package/skinny/registerModal.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"registerModal.cjs.js","sources":["../src/registerModal.tsx"],"sourcesContent":["import {\n  usePlasmicCanvasComponentInfo,\n  usePlasmicCanvasContext,\n} from \"@plasmicapp/host\";\nimport React, { forwardRef, useImperativeHandle } from \"react\";\nimport { mergeProps } from \"react-aria\";\nimport {\n  Dialog,\n  Modal,\n  ModalOverlay,\n  ModalOverlayProps,\n} from \"react-aria-components\";\nimport { hasParent } from \"./common\";\nimport { PlasmicDialogTriggerContext } from \"./contexts\";\nimport { HEADING_COMPONENT_NAME } from \"./registerHeading\";\nimport {\n  CodeComponentMetaOverrides,\n  HasControlContextData,\n  makeComponentName,\n  Registerable,\n  registerComponentHelper,\n} from \"./utils\";\n\nexport interface BaseModalProps\n  extends ModalOverlayProps,\n    HasControlContextData {\n  heading: React.ReactNode;\n  modalOverlayClass: string;\n  resetClassName?: string;\n  children?: React.ReactNode;\n}\n\nexport interface BaseModalActions {\n  close(): void;\n  open(): void;\n}\n\nconst INLINE_STYLES = {\n  outline: \"none\",\n};\n\nexport const BaseModal = forwardRef<BaseModalActions, BaseModalProps>(\n  function _BaseModal(props, ref) {\n    const {\n      children,\n      modalOverlayClass,\n      className,\n      isOpen,\n      resetClassName,\n      setControlContextData,\n      ...rest\n    } = props;\n\n    const { isSelected } = usePlasmicCanvasComponentInfo(props) ?? {};\n\n    const contextProps = React.useContext(PlasmicDialogTriggerContext);\n    const isStandalone = !contextProps;\n    const mergedProps = mergeProps(contextProps, rest, {\n      isOpen: isStandalone ? isSelected || isOpen : contextProps.isOpen,\n    });\n\n    setControlContextData?.({\n      parent: isStandalone ? undefined : {},\n    });\n\n    // Expose close operation using useImperativeHandle\n    useImperativeHandle(ref, () => ({\n      close: () => {\n        mergedProps.onOpenChange?.(false);\n      },\n      open: () => {\n        mergedProps.onOpenChange?.(true);\n      },\n    }));\n\n    const isCanvas = usePlasmicCanvasContext();\n\n    {\n      /* <Dialog> cannot be used in canvas, because while the dialog is open on the canvas, the focus is trapped inside it, so any Studio modals like the Color Picker modal would glitch due to focus jumping back and forth */\n    }\n    const bodyInCanvas = <div style={INLINE_STYLES}>{children}</div>;\n\n    const bodyInPreview = <Dialog style={INLINE_STYLES}>{children}</Dialog>;\n\n    return (\n      <ModalOverlay\n        {...mergedProps}\n        className={`${resetClassName} ${modalOverlayClass}`}\n      >\n        <Modal className={className}>\n          {isCanvas ? bodyInCanvas : bodyInPreview}\n        </Modal>\n      </ModalOverlay>\n    );\n  }\n);\n\nexport const MODAL_COMPONENT_NAME = makeComponentName(\"modal\");\n\nexport function registerModal(\n  loader?: Registerable,\n  overrides?: CodeComponentMetaOverrides<typeof BaseModal>\n) {\n  registerComponentHelper(\n    loader,\n    BaseModal,\n    {\n      name: MODAL_COMPONENT_NAME,\n      displayName: \"Aria Modal\",\n      importPath: \"@plasmicpkgs/react-aria/skinny/registerModal\",\n      importName: \"BaseModal\",\n      styleSections: true,\n      defaultStyles: {\n        // centering the modal on the page by default\n        position: \"fixed\",\n        top: \"10%\",\n        left: \"50%\",\n        width: \"50%\",\n        transform: \"translateX(-50%)\",\n        borderWidth: \"1px\",\n        borderStyle: \"solid\",\n        borderColor: \"black\",\n        padding: \"20px\",\n        maxWidth: \"300px\",\n        backgroundColor: \"#FDE3C3\",\n      },\n      refActions: {\n        open: {\n          description: \"Open the modal\",\n          argTypes: [],\n        },\n        close: {\n          description: \"Close the modal\",\n          argTypes: [],\n        },\n      },\n      props: {\n        children: {\n          type: \"slot\",\n          mergeWithParent: true,\n          defaultValue: {\n            type: \"vbox\",\n            styles: {\n              width: \"stretch\",\n              padding: 0,\n              gap: \"10px\",\n              justifyContent: \"flex-start\",\n              alignItems: \"flex-start\",\n            },\n            children: [\n              {\n                type: \"component\",\n                name: HEADING_COMPONENT_NAME,\n              },\n              {\n                type: \"text\",\n                value: \"This is a Modal!\",\n              },\n              {\n                type: \"text\",\n                value: \"You can put anything you can imagine here!\",\n                styles: {\n                  fontWeight: 500,\n                },\n              },\n              {\n                type: \"text\",\n                value:\n                  \"Use it in a `Aria Dialog Trigger` component to trigger it on a button click!\",\n              },\n            ],\n          },\n        },\n        modalOverlayClass: {\n          type: \"class\",\n          displayName: \"Modal Overlay\",\n        },\n        isOpen: {\n          type: \"boolean\",\n          editOnly: true,\n          uncontrolledProp: \"defaultOpen\",\n          defaultValueHint: true,\n          defaultValue: true,\n          hidden: hasParent,\n        },\n        isDismissable: {\n          type: \"boolean\",\n          description:\n            \"Whether to close the modal when the user interacts outside it.\",\n        },\n        isKeyboardDismissDisabled: {\n          type: \"boolean\",\n          description:\n            \"Whether pressing the escape key to close the modal should be disabled.\",\n        },\n        onOpenChange: {\n          type: \"eventHandler\",\n          argTypes: [{ name: \"isOpen\", type: \"boolean\" }],\n        },\n        resetClassName: {\n          type: \"themeResetClass\",\n        },\n      },\n      states: {\n        isOpen: {\n          type: \"writable\",\n          valueProp: \"isOpen\",\n          onChangeProp: \"onOpenChange\",\n          variableType: \"boolean\",\n          hidden: hasParent,\n        },\n      },\n      trapsFocus: true,\n    },\n    overrides\n  );\n}\n"],"names":["forwardRef","React","PlasmicDialogTriggerContext","mergeProps","useImperativeHandle","_a","usePlasmicCanvasContext","Dialog","ModalOverlay","Modal","makeComponentName","registerComponentHelper","HEADING_COMPONENT_NAME","hasParent"],"mappings":"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"}
+{"version":3,"file":"registerModal.cjs.js","sources":["../src/registerModal.tsx"],"sourcesContent":["import {\n  usePlasmicCanvasComponentInfo,\n  usePlasmicCanvasContext,\n} from \"@plasmicapp/host\";\nimport React, { forwardRef, useImperativeHandle } from \"react\";\nimport { mergeProps } from \"react-aria\";\nimport {\n  Dialog,\n  Modal,\n  ModalOverlay,\n  ModalOverlayProps,\n} from \"react-aria-components\";\nimport { hasParent } from \"./common\";\nimport { PlasmicDialogTriggerContext } from \"./contexts\";\nimport { HEADING_COMPONENT_NAME } from \"./registerHeading\";\nimport {\n  CodeComponentMetaOverrides,\n  HasControlContextData,\n  makeComponentName,\n  Registerable,\n  registerComponentHelper,\n} from \"./utils\";\n\nexport interface BaseModalProps\n  extends ModalOverlayProps,\n    HasControlContextData {\n  heading: React.ReactNode;\n  modalOverlayClass: string;\n  resetClassName?: string;\n  children?: React.ReactNode;\n}\n\nexport interface BaseModalActions {\n  close(): void;\n  open(): void;\n}\n\nconst INLINE_STYLES = {\n  outline: \"none\",\n};\n\nexport const BaseModal = forwardRef<BaseModalActions, BaseModalProps>(\n  function _BaseModal(props, ref) {\n    const {\n      children,\n      modalOverlayClass,\n      className,\n      isOpen,\n      resetClassName,\n      setControlContextData,\n      isDismissable,\n      ...rest\n    } = props;\n\n    const { isSelected } = usePlasmicCanvasComponentInfo(props) ?? {};\n\n    const contextProps = React.useContext(PlasmicDialogTriggerContext);\n    const isStandalone = !contextProps;\n    const mergedProps = mergeProps(contextProps, rest, {\n      isOpen: isStandalone ? isSelected || isOpen : contextProps.isOpen,\n      /*\n        isDismissable on canvas (non-interactive mode) causes the following two issues:\n        1. Clicking anywhere inside the modal dismisses it\n        2. If the modal is auto-opened due to selection in outline tab, the modal stays open despite issue #1, but the text elements inside the modal are no longer selectable, and therefore the text or headings inside the modal are not editable.\n\n        To fix the above issue, we set an interim isDismissable state to false while the modal is auto-open (`isSelected` is true).\n        Also note that `isSelected` can only be true in canvas (non-interactive mode), so we can safely (temporarily) set `isDismissable` to false in this case, because it only matters in interactive mode.\n      */\n      isDismissable: isSelected ? false : isDismissable,\n    });\n\n    setControlContextData?.({\n      parent: isStandalone ? undefined : {},\n    });\n\n    // Expose close operation using useImperativeHandle\n    useImperativeHandle(ref, () => ({\n      close: () => {\n        mergedProps.onOpenChange?.(false);\n      },\n      open: () => {\n        mergedProps.onOpenChange?.(true);\n      },\n    }));\n\n    const isCanvas = usePlasmicCanvasContext();\n\n    {\n      /* <Dialog> cannot be used in canvas, because while the dialog is open on the canvas, the focus is trapped inside it, so any Studio modals like the Color Picker modal would glitch due to focus jumping back and forth */\n    }\n    const bodyInCanvas = <div style={INLINE_STYLES}>{children}</div>;\n\n    const bodyInPreview = <Dialog style={INLINE_STYLES}>{children}</Dialog>;\n\n    return (\n      <ModalOverlay\n        {...mergedProps}\n        className={`${resetClassName} ${modalOverlayClass}`}\n      >\n        <Modal className={className}>\n          {isCanvas ? bodyInCanvas : bodyInPreview}\n        </Modal>\n      </ModalOverlay>\n    );\n  }\n);\n\nexport const MODAL_COMPONENT_NAME = makeComponentName(\"modal\");\n\nexport function registerModal(\n  loader?: Registerable,\n  overrides?: CodeComponentMetaOverrides<typeof BaseModal>\n) {\n  registerComponentHelper(\n    loader,\n    BaseModal,\n    {\n      name: MODAL_COMPONENT_NAME,\n      displayName: \"Aria Modal\",\n      importPath: \"@plasmicpkgs/react-aria/skinny/registerModal\",\n      importName: \"BaseModal\",\n      styleSections: true,\n      defaultStyles: {\n        // centering the modal on the page by default\n        position: \"fixed\",\n        top: \"10%\",\n        left: \"50%\",\n        width: \"50%\",\n        transform: \"translateX(-50%)\",\n        borderWidth: \"1px\",\n        borderStyle: \"solid\",\n        borderColor: \"black\",\n        padding: \"20px\",\n        maxWidth: \"300px\",\n        backgroundColor: \"#FDE3C3\",\n      },\n      refActions: {\n        open: {\n          description: \"Open the modal\",\n          argTypes: [],\n        },\n        close: {\n          description: \"Close the modal\",\n          argTypes: [],\n        },\n      },\n      props: {\n        children: {\n          type: \"slot\",\n          mergeWithParent: true,\n          defaultValue: {\n            type: \"vbox\",\n            styles: {\n              width: \"stretch\",\n              padding: 0,\n              gap: \"10px\",\n              justifyContent: \"flex-start\",\n              alignItems: \"flex-start\",\n            },\n            children: [\n              {\n                type: \"component\",\n                name: HEADING_COMPONENT_NAME,\n              },\n              {\n                type: \"text\",\n                value: \"This is a Modal!\",\n              },\n              {\n                type: \"text\",\n                value: \"You can put anything you can imagine here!\",\n                styles: {\n                  fontWeight: 500,\n                },\n              },\n              {\n                type: \"text\",\n                value:\n                  \"Use it in a `Aria Dialog Trigger` component to trigger it on a button click!\",\n              },\n            ],\n          },\n        },\n        modalOverlayClass: {\n          type: \"class\",\n          displayName: \"Modal Overlay\",\n        },\n        isOpen: {\n          type: \"boolean\",\n          editOnly: true,\n          uncontrolledProp: \"defaultOpen\",\n          defaultValueHint: true,\n          defaultValue: true,\n          hidden: hasParent,\n        },\n        isDismissable: {\n          type: \"boolean\",\n          description:\n            \"Whether to close the modal when the user interacts outside it.\",\n        },\n        isKeyboardDismissDisabled: {\n          type: \"boolean\",\n          description:\n            \"Whether pressing the escape key to close the modal should be disabled.\",\n        },\n        onOpenChange: {\n          type: \"eventHandler\",\n          argTypes: [{ name: \"isOpen\", type: \"boolean\" }],\n        },\n        resetClassName: {\n          type: \"themeResetClass\",\n        },\n      },\n      states: {\n        isOpen: {\n          type: \"writable\",\n          valueProp: \"isOpen\",\n          onChangeProp: \"onOpenChange\",\n          variableType: \"boolean\",\n          hidden: hasParent,\n        },\n      },\n      trapsFocus: true,\n    },\n    overrides\n  );\n}\n"],"names":["forwardRef","React","PlasmicDialogTriggerContext","mergeProps","useImperativeHandle","_a","usePlasmicCanvasContext","Dialog","ModalOverlay","Modal","makeComponentName","registerComponentHelper","HEADING_COMPONENT_NAME","hasParent"],"mappings":"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"}

package/skinny/registerModal.esm.js

@@ -51,20 +51,31 @@ const BaseModal = forwardRef(
       className,
       isOpen,
       resetClassName,
-      setControlContextData
+      setControlContextData,
+      isDismissable
     } = _a, rest = __objRest(_a, [
       "children",
       "modalOverlayClass",
       "className",
       "isOpen",
       "resetClassName",
-      "setControlContextData"
+      "setControlContextData",
+      "isDismissable"
     ]);
     const { isSelected } = (_b = usePlasmicCanvasComponentInfo(props)) != null ? _b : {};
     const contextProps = React.useContext(PlasmicDialogTriggerContext);
     const isStandalone = !contextProps;
     const mergedProps = mergeProps(contextProps, rest, {
-      isOpen: isStandalone ? isSelected || isOpen : contextProps.isOpen
+      isOpen: isStandalone ? isSelected || isOpen : contextProps.isOpen,
+      /*
+              isDismissable on canvas (non-interactive mode) causes the following two issues:
+              1. Clicking anywhere inside the modal dismisses it
+              2. If the modal is auto-opened due to selection in outline tab, the modal stays open despite issue #1, but the text elements inside the modal are no longer selectable, and therefore the text or headings inside the modal are not editable.
+      
+              To fix the above issue, we set an interim isDismissable state to false while the modal is auto-open (`isSelected` is true).
+              Also note that `isSelected` can only be true in canvas (non-interactive mode), so we can safely (temporarily) set `isDismissable` to false in this case, because it only matters in interactive mode.
+            */
+      isDismissable: isSelected ? false : isDismissable
     });
     setControlContextData == null ? void 0 : setControlContextData({
       parent: isStandalone ? void 0 : {}

package/skinny/registerModal.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"registerModal.esm.js","sources":["../src/registerModal.tsx"],"sourcesContent":["import {\n  usePlasmicCanvasComponentInfo,\n  usePlasmicCanvasContext,\n} from \"@plasmicapp/host\";\nimport React, { forwardRef, useImperativeHandle } from \"react\";\nimport { mergeProps } from \"react-aria\";\nimport {\n  Dialog,\n  Modal,\n  ModalOverlay,\n  ModalOverlayProps,\n} from \"react-aria-components\";\nimport { hasParent } from \"./common\";\nimport { PlasmicDialogTriggerContext } from \"./contexts\";\nimport { HEADING_COMPONENT_NAME } from \"./registerHeading\";\nimport {\n  CodeComponentMetaOverrides,\n  HasControlContextData,\n  makeComponentName,\n  Registerable,\n  registerComponentHelper,\n} from \"./utils\";\n\nexport interface BaseModalProps\n  extends ModalOverlayProps,\n    HasControlContextData {\n  heading: React.ReactNode;\n  modalOverlayClass: string;\n  resetClassName?: string;\n  children?: React.ReactNode;\n}\n\nexport interface BaseModalActions {\n  close(): void;\n  open(): void;\n}\n\nconst INLINE_STYLES = {\n  outline: \"none\",\n};\n\nexport const BaseModal = forwardRef<BaseModalActions, BaseModalProps>(\n  function _BaseModal(props, ref) {\n    const {\n      children,\n      modalOverlayClass,\n      className,\n      isOpen,\n      resetClassName,\n      setControlContextData,\n      ...rest\n    } = props;\n\n    const { isSelected } = usePlasmicCanvasComponentInfo(props) ?? {};\n\n    const contextProps = React.useContext(PlasmicDialogTriggerContext);\n    const isStandalone = !contextProps;\n    const mergedProps = mergeProps(contextProps, rest, {\n      isOpen: isStandalone ? isSelected || isOpen : contextProps.isOpen,\n    });\n\n    setControlContextData?.({\n      parent: isStandalone ? undefined : {},\n    });\n\n    // Expose close operation using useImperativeHandle\n    useImperativeHandle(ref, () => ({\n      close: () => {\n        mergedProps.onOpenChange?.(false);\n      },\n      open: () => {\n        mergedProps.onOpenChange?.(true);\n      },\n    }));\n\n    const isCanvas = usePlasmicCanvasContext();\n\n    {\n      /* <Dialog> cannot be used in canvas, because while the dialog is open on the canvas, the focus is trapped inside it, so any Studio modals like the Color Picker modal would glitch due to focus jumping back and forth */\n    }\n    const bodyInCanvas = <div style={INLINE_STYLES}>{children}</div>;\n\n    const bodyInPreview = <Dialog style={INLINE_STYLES}>{children}</Dialog>;\n\n    return (\n      <ModalOverlay\n        {...mergedProps}\n        className={`${resetClassName} ${modalOverlayClass}`}\n      >\n        <Modal className={className}>\n          {isCanvas ? bodyInCanvas : bodyInPreview}\n        </Modal>\n      </ModalOverlay>\n    );\n  }\n);\n\nexport const MODAL_COMPONENT_NAME = makeComponentName(\"modal\");\n\nexport function registerModal(\n  loader?: Registerable,\n  overrides?: CodeComponentMetaOverrides<typeof BaseModal>\n) {\n  registerComponentHelper(\n    loader,\n    BaseModal,\n    {\n      name: MODAL_COMPONENT_NAME,\n      displayName: \"Aria Modal\",\n      importPath: \"@plasmicpkgs/react-aria/skinny/registerModal\",\n      importName: \"BaseModal\",\n      styleSections: true,\n      defaultStyles: {\n        // centering the modal on the page by default\n        position: \"fixed\",\n        top: \"10%\",\n        left: \"50%\",\n        width: \"50%\",\n        transform: \"translateX(-50%)\",\n        borderWidth: \"1px\",\n        borderStyle: \"solid\",\n        borderColor: \"black\",\n        padding: \"20px\",\n        maxWidth: \"300px\",\n        backgroundColor: \"#FDE3C3\",\n      },\n      refActions: {\n        open: {\n          description: \"Open the modal\",\n          argTypes: [],\n        },\n        close: {\n          description: \"Close the modal\",\n          argTypes: [],\n        },\n      },\n      props: {\n        children: {\n          type: \"slot\",\n          mergeWithParent: true,\n          defaultValue: {\n            type: \"vbox\",\n            styles: {\n              width: \"stretch\",\n              padding: 0,\n              gap: \"10px\",\n              justifyContent: \"flex-start\",\n              alignItems: \"flex-start\",\n            },\n            children: [\n              {\n                type: \"component\",\n                name: HEADING_COMPONENT_NAME,\n              },\n              {\n                type: \"text\",\n                value: \"This is a Modal!\",\n              },\n              {\n                type: \"text\",\n                value: \"You can put anything you can imagine here!\",\n                styles: {\n                  fontWeight: 500,\n                },\n              },\n              {\n                type: \"text\",\n                value:\n                  \"Use it in a `Aria Dialog Trigger` component to trigger it on a button click!\",\n              },\n            ],\n          },\n        },\n        modalOverlayClass: {\n          type: \"class\",\n          displayName: \"Modal Overlay\",\n        },\n        isOpen: {\n          type: \"boolean\",\n          editOnly: true,\n          uncontrolledProp: \"defaultOpen\",\n          defaultValueHint: true,\n          defaultValue: true,\n          hidden: hasParent,\n        },\n        isDismissable: {\n          type: \"boolean\",\n          description:\n            \"Whether to close the modal when the user interacts outside it.\",\n        },\n        isKeyboardDismissDisabled: {\n          type: \"boolean\",\n          description:\n            \"Whether pressing the escape key to close the modal should be disabled.\",\n        },\n        onOpenChange: {\n          type: \"eventHandler\",\n          argTypes: [{ name: \"isOpen\", type: \"boolean\" }],\n        },\n        resetClassName: {\n          type: \"themeResetClass\",\n        },\n      },\n      states: {\n        isOpen: {\n          type: \"writable\",\n          valueProp: \"isOpen\",\n          onChangeProp: \"onOpenChange\",\n          variableType: \"boolean\",\n          hidden: hasParent,\n        },\n      },\n      trapsFocus: true,\n    },\n    overrides\n  );\n}\n"],"names":["_a"],"mappings":"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"}
+{"version":3,"file":"registerModal.esm.js","sources":["../src/registerModal.tsx"],"sourcesContent":["import {\n  usePlasmicCanvasComponentInfo,\n  usePlasmicCanvasContext,\n} from \"@plasmicapp/host\";\nimport React, { forwardRef, useImperativeHandle } from \"react\";\nimport { mergeProps } from \"react-aria\";\nimport {\n  Dialog,\n  Modal,\n  ModalOverlay,\n  ModalOverlayProps,\n} from \"react-aria-components\";\nimport { hasParent } from \"./common\";\nimport { PlasmicDialogTriggerContext } from \"./contexts\";\nimport { HEADING_COMPONENT_NAME } from \"./registerHeading\";\nimport {\n  CodeComponentMetaOverrides,\n  HasControlContextData,\n  makeComponentName,\n  Registerable,\n  registerComponentHelper,\n} from \"./utils\";\n\nexport interface BaseModalProps\n  extends ModalOverlayProps,\n    HasControlContextData {\n  heading: React.ReactNode;\n  modalOverlayClass: string;\n  resetClassName?: string;\n  children?: React.ReactNode;\n}\n\nexport interface BaseModalActions {\n  close(): void;\n  open(): void;\n}\n\nconst INLINE_STYLES = {\n  outline: \"none\",\n};\n\nexport const BaseModal = forwardRef<BaseModalActions, BaseModalProps>(\n  function _BaseModal(props, ref) {\n    const {\n      children,\n      modalOverlayClass,\n      className,\n      isOpen,\n      resetClassName,\n      setControlContextData,\n      isDismissable,\n      ...rest\n    } = props;\n\n    const { isSelected } = usePlasmicCanvasComponentInfo(props) ?? {};\n\n    const contextProps = React.useContext(PlasmicDialogTriggerContext);\n    const isStandalone = !contextProps;\n    const mergedProps = mergeProps(contextProps, rest, {\n      isOpen: isStandalone ? isSelected || isOpen : contextProps.isOpen,\n      /*\n        isDismissable on canvas (non-interactive mode) causes the following two issues:\n        1. Clicking anywhere inside the modal dismisses it\n        2. If the modal is auto-opened due to selection in outline tab, the modal stays open despite issue #1, but the text elements inside the modal are no longer selectable, and therefore the text or headings inside the modal are not editable.\n\n        To fix the above issue, we set an interim isDismissable state to false while the modal is auto-open (`isSelected` is true).\n        Also note that `isSelected` can only be true in canvas (non-interactive mode), so we can safely (temporarily) set `isDismissable` to false in this case, because it only matters in interactive mode.\n      */\n      isDismissable: isSelected ? false : isDismissable,\n    });\n\n    setControlContextData?.({\n      parent: isStandalone ? undefined : {},\n    });\n\n    // Expose close operation using useImperativeHandle\n    useImperativeHandle(ref, () => ({\n      close: () => {\n        mergedProps.onOpenChange?.(false);\n      },\n      open: () => {\n        mergedProps.onOpenChange?.(true);\n      },\n    }));\n\n    const isCanvas = usePlasmicCanvasContext();\n\n    {\n      /* <Dialog> cannot be used in canvas, because while the dialog is open on the canvas, the focus is trapped inside it, so any Studio modals like the Color Picker modal would glitch due to focus jumping back and forth */\n    }\n    const bodyInCanvas = <div style={INLINE_STYLES}>{children}</div>;\n\n    const bodyInPreview = <Dialog style={INLINE_STYLES}>{children}</Dialog>;\n\n    return (\n      <ModalOverlay\n        {...mergedProps}\n        className={`${resetClassName} ${modalOverlayClass}`}\n      >\n        <Modal className={className}>\n          {isCanvas ? bodyInCanvas : bodyInPreview}\n        </Modal>\n      </ModalOverlay>\n    );\n  }\n);\n\nexport const MODAL_COMPONENT_NAME = makeComponentName(\"modal\");\n\nexport function registerModal(\n  loader?: Registerable,\n  overrides?: CodeComponentMetaOverrides<typeof BaseModal>\n) {\n  registerComponentHelper(\n    loader,\n    BaseModal,\n    {\n      name: MODAL_COMPONENT_NAME,\n      displayName: \"Aria Modal\",\n      importPath: \"@plasmicpkgs/react-aria/skinny/registerModal\",\n      importName: \"BaseModal\",\n      styleSections: true,\n      defaultStyles: {\n        // centering the modal on the page by default\n        position: \"fixed\",\n        top: \"10%\",\n        left: \"50%\",\n        width: \"50%\",\n        transform: \"translateX(-50%)\",\n        borderWidth: \"1px\",\n        borderStyle: \"solid\",\n        borderColor: \"black\",\n        padding: \"20px\",\n        maxWidth: \"300px\",\n        backgroundColor: \"#FDE3C3\",\n      },\n      refActions: {\n        open: {\n          description: \"Open the modal\",\n          argTypes: [],\n        },\n        close: {\n          description: \"Close the modal\",\n          argTypes: [],\n        },\n      },\n      props: {\n        children: {\n          type: \"slot\",\n          mergeWithParent: true,\n          defaultValue: {\n            type: \"vbox\",\n            styles: {\n              width: \"stretch\",\n              padding: 0,\n              gap: \"10px\",\n              justifyContent: \"flex-start\",\n              alignItems: \"flex-start\",\n            },\n            children: [\n              {\n                type: \"component\",\n                name: HEADING_COMPONENT_NAME,\n              },\n              {\n                type: \"text\",\n                value: \"This is a Modal!\",\n              },\n              {\n                type: \"text\",\n                value: \"You can put anything you can imagine here!\",\n                styles: {\n                  fontWeight: 500,\n                },\n              },\n              {\n                type: \"text\",\n                value:\n                  \"Use it in a `Aria Dialog Trigger` component to trigger it on a button click!\",\n              },\n            ],\n          },\n        },\n        modalOverlayClass: {\n          type: \"class\",\n          displayName: \"Modal Overlay\",\n        },\n        isOpen: {\n          type: \"boolean\",\n          editOnly: true,\n          uncontrolledProp: \"defaultOpen\",\n          defaultValueHint: true,\n          defaultValue: true,\n          hidden: hasParent,\n        },\n        isDismissable: {\n          type: \"boolean\",\n          description:\n            \"Whether to close the modal when the user interacts outside it.\",\n        },\n        isKeyboardDismissDisabled: {\n          type: \"boolean\",\n          description:\n            \"Whether pressing the escape key to close the modal should be disabled.\",\n        },\n        onOpenChange: {\n          type: \"eventHandler\",\n          argTypes: [{ name: \"isOpen\", type: \"boolean\" }],\n        },\n        resetClassName: {\n          type: \"themeResetClass\",\n        },\n      },\n      states: {\n        isOpen: {\n          type: \"writable\",\n          valueProp: \"isOpen\",\n          onChangeProp: \"onOpenChange\",\n          variableType: \"boolean\",\n          hidden: hasParent,\n        },\n      },\n      trapsFocus: true,\n    },\n    overrides\n  );\n}\n"],"names":["_a"],"mappings":"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"}

package/skinny/registerRadio.cjs.js

@@ -6,7 +6,7 @@ var common = require('./common-2e984ab4.cjs.js');
 var contexts = require('./contexts-baa37b74.cjs.js');
 var registerLabel = require('./registerLabel.cjs.js');
 var utils = require('./utils-8dbb4d1f.cjs.js');
-var variantUtils = require('./variant-utils-db5b9590.cjs.js');
+var variantUtils = require('./variant-utils-6c6ef452.cjs.js');
 require('@plasmicapp/host/registerComponent');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

package/skinny/registerRadio.esm.js

@@ -4,7 +4,7 @@ import { g as getCommonProps } from './common-0c4336fe.esm.js';
 import { e as PlasmicRadioGroupContext } from './contexts-081d65a0.esm.js';
 import { LABEL_COMPONENT_NAME } from './registerLabel.esm.js';
 import { r as registerComponentHelper, a as makeComponentName } from './utils-c7662a47.esm.js';
-import { p as pickAriaComponentVariants } from './variant-utils-23360776.esm.js';
+import { p as pickAriaComponentVariants } from './variant-utils-5f90385f.esm.js';
 import '@plasmicapp/host/registerComponent';
 
 var __defProp = Object.defineProperty;

package/skinny/registerRadioGroup.cjs.js

@@ -9,7 +9,7 @@ var registerFieldError = require('./registerFieldError.cjs.js');
 var registerLabel = require('./registerLabel.cjs.js');
 var registerRadio = require('./registerRadio.cjs.js');
 var utils = require('./utils-8dbb4d1f.cjs.js');
-var variantUtils = require('./variant-utils-db5b9590.cjs.js');
+var variantUtils = require('./variant-utils-6c6ef452.cjs.js');
 require('./registerText.cjs.js');
 require('@plasmicapp/host/registerComponent');
 

package/skinny/registerRadioGroup.esm.js

@@ -7,7 +7,7 @@ import { registerFieldError } from './registerFieldError.esm.js';
 import { registerLabel, LABEL_COMPONENT_NAME } from './registerLabel.esm.js';
 import { registerRadio, makeDefaultRadioChildren } from './registerRadio.esm.js';
 import { m as makeChildComponentName, r as registerComponentHelper, a as makeComponentName } from './utils-c7662a47.esm.js';
-import { p as pickAriaComponentVariants } from './variant-utils-23360776.esm.js';
+import { p as pickAriaComponentVariants } from './variant-utils-5f90385f.esm.js';
 import './registerText.esm.js';
 import '@plasmicapp/host/registerComponent';
 

package/skinny/registerSelect.cjs.js

@@ -5,7 +5,7 @@ var React = require('react');
 var reactAriaComponents = require('react-aria-components');
 var common = require('./common-2e984ab4.cjs.js');
 var contexts = require('./contexts-baa37b74.cjs.js');
-var registerListBox = require('./registerListBox-4761c48d.cjs.js');
+var registerListBox = require('./registerListBox-62e01fbb.cjs.js');
 var registerButton = require('./registerButton.cjs.js');
 var registerLabel = require('./registerLabel.cjs.js');
 var registerPopover = require('./registerPopover.cjs.js');
@@ -13,7 +13,7 @@ var utils = require('./utils-8dbb4d1f.cjs.js');
 require('./registerListBoxItem.cjs.js');
 require('./registerDescription.cjs.js');
 require('./registerText.cjs.js');
-require('./variant-utils-db5b9590.cjs.js');
+require('./variant-utils-6c6ef452.cjs.js');
 require('./registerSection.cjs.js');
 require('@react-aria/utils');
 require('@plasmicapp/host/registerComponent');

package/skinny/registerSelect.esm.js

@@ -3,7 +3,7 @@ import React, { useMemo, useEffect } from 'react';
 import { SelectValue, Select } from 'react-aria-components';
 import { g as getCommonProps } from './common-0c4336fe.esm.js';
 import { a as PlasmicPopoverContext, b as PlasmicListBoxContext } from './contexts-081d65a0.esm.js';
-import { L as ListBoxItemIdManager, a as LIST_BOX_COMPONENT_NAME } from './registerListBox-8c096263.esm.js';
+import { L as ListBoxItemIdManager, a as LIST_BOX_COMPONENT_NAME } from './registerListBox-5425b5fe.esm.js';
 import { BUTTON_COMPONENT_NAME } from './registerButton.esm.js';
 import { LABEL_COMPONENT_NAME } from './registerLabel.esm.js';
 import { POPOVER_COMPONENT_NAME } from './registerPopover.esm.js';
@@ -11,7 +11,7 @@ import { e as extractPlasmicDataProps, r as registerComponentHelper, a as makeCo
 import './registerListBoxItem.esm.js';
 import './registerDescription.esm.js';
 import './registerText.esm.js';
-import './variant-utils-23360776.esm.js';
+import './variant-utils-5f90385f.esm.js';
 import './registerSection.esm.js';
 import '@react-aria/utils';
 import '@plasmicapp/host/registerComponent';

package/skinny/registerSlider.cjs.js

@@ -9,7 +9,7 @@ var registerSliderOutput = require('./registerSliderOutput.cjs.js');
 var registerSliderThumb = require('./registerSliderThumb.cjs.js');
 var registerSliderTrack = require('./registerSliderTrack.cjs.js');
 var utils = require('./utils-8dbb4d1f.cjs.js');
-var variantUtils = require('./variant-utils-db5b9590.cjs.js');
+var variantUtils = require('./variant-utils-6c6ef452.cjs.js');
 require('react-aria');
 require('react-keyed-flatten-children');
 require('@plasmicapp/host/registerComponent');

package/skinny/registerSlider.esm.js

@@ -7,7 +7,7 @@ import { registerSliderOutput } from './registerSliderOutput.esm.js';
 import { registerSliderThumb } from './registerSliderThumb.esm.js';
 import { registerSliderTrack } from './registerSliderTrack.esm.js';
 import { r as registerComponentHelper, a as makeComponentName } from './utils-c7662a47.esm.js';
-import { p as pickAriaComponentVariants } from './variant-utils-23360776.esm.js';
+import { p as pickAriaComponentVariants } from './variant-utils-5f90385f.esm.js';
 import 'react-aria';
 import 'react-keyed-flatten-children';
 import '@plasmicapp/host/registerComponent';

package/skinny/registerSliderOutput.cjs.js

@@ -3,7 +3,7 @@
 var React = require('react');
 var reactAriaComponents = require('react-aria-components');
 var utils = require('./utils-8dbb4d1f.cjs.js');
-var variantUtils = require('./variant-utils-db5b9590.cjs.js');
+var variantUtils = require('./variant-utils-6c6ef452.cjs.js');
 require('@plasmicapp/host/registerComponent');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

package/skinny/registerSliderOutput.esm.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { SliderOutput } from 'react-aria-components';
 import { a as makeComponentName, r as registerComponentHelper } from './utils-c7662a47.esm.js';
-import { p as pickAriaComponentVariants } from './variant-utils-23360776.esm.js';
+import { p as pickAriaComponentVariants } from './variant-utils-5f90385f.esm.js';
 import '@plasmicapp/host/registerComponent';
 
 var __defProp = Object.defineProperty;

package/skinny/registerSliderThumb.cjs.js

@@ -6,7 +6,7 @@ var reactAriaComponents = require('react-aria-components');
 var common = require('./common-2e984ab4.cjs.js');
 var contexts = require('./contexts-baa37b74.cjs.js');
 var utils = require('./utils-8dbb4d1f.cjs.js');
-var variantUtils = require('./variant-utils-db5b9590.cjs.js');
+var variantUtils = require('./variant-utils-6c6ef452.cjs.js');
 require('@plasmicapp/host/registerComponent');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

package/skinny/registerSliderThumb.esm.js

@@ -4,7 +4,7 @@ import { SliderThumb, Slider, SliderTrack } from 'react-aria-components';
 import { g as getCommonProps } from './common-0c4336fe.esm.js';
 import { f as PlasmicSliderContext } from './contexts-081d65a0.esm.js';
 import { a as makeComponentName, r as registerComponentHelper } from './utils-c7662a47.esm.js';
-import { p as pickAriaComponentVariants } from './variant-utils-23360776.esm.js';
+import { p as pickAriaComponentVariants } from './variant-utils-5f90385f.esm.js';
 import '@plasmicapp/host/registerComponent';
 
 class ErrorBoundary extends Component {

package/skinny/registerSliderTrack.cjs.js

@@ -6,7 +6,7 @@ var reactAriaComponents = require('react-aria-components');
 var flattenChildren = require('react-keyed-flatten-children');
 var contexts = require('./contexts-baa37b74.cjs.js');
 var utils = require('./utils-8dbb4d1f.cjs.js');
-var variantUtils = require('./variant-utils-db5b9590.cjs.js');
+var variantUtils = require('./variant-utils-6c6ef452.cjs.js');
 require('@plasmicapp/host/registerComponent');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

package/skinny/registerSliderTrack.esm.js

@@ -4,7 +4,7 @@ import { SliderTrack, Slider } from 'react-aria-components';
 import flattenChildren from 'react-keyed-flatten-children';
 import { f as PlasmicSliderContext } from './contexts-081d65a0.esm.js';
 import { i as isDefined, a as makeComponentName, r as registerComponentHelper } from './utils-c7662a47.esm.js';
-import { p as pickAriaComponentVariants } from './variant-utils-23360776.esm.js';
+import { p as pickAriaComponentVariants } from './variant-utils-5f90385f.esm.js';
 import '@plasmicapp/host/registerComponent';
 
 var __defProp = Object.defineProperty;

package/skinny/registerSwitch.cjs.js

@@ -6,7 +6,7 @@ var common = require('./common-2e984ab4.cjs.js');
 var registerDescription = require('./registerDescription.cjs.js');
 var registerLabel = require('./registerLabel.cjs.js');
 var utils = require('./utils-8dbb4d1f.cjs.js');
-var variantUtils = require('./variant-utils-db5b9590.cjs.js');
+var variantUtils = require('./variant-utils-6c6ef452.cjs.js');
 require('./registerText.cjs.js');
 require('@plasmicapp/host/registerComponent');
 

package/skinny/registerSwitch.esm.js

@@ -4,7 +4,7 @@ import { g as getCommonProps } from './common-0c4336fe.esm.js';
 import { DESCRIPTION_COMPONENT_NAME } from './registerDescription.esm.js';
 import { LABEL_COMPONENT_NAME } from './registerLabel.esm.js';
 import { r as registerComponentHelper, a as makeComponentName } from './utils-c7662a47.esm.js';
-import { p as pickAriaComponentVariants } from './variant-utils-23360776.esm.js';
+import { p as pickAriaComponentVariants } from './variant-utils-5f90385f.esm.js';
 import './registerText.esm.js';
 import '@plasmicapp/host/registerComponent';
 

package/skinny/registerTextArea.cjs.js

@@ -6,7 +6,7 @@ var reactAriaComponents = require('react-aria-components');
 var common = require('./common-2e984ab4.cjs.js');
 var contexts = require('./contexts-baa37b74.cjs.js');
 var utils = require('./utils-8dbb4d1f.cjs.js');
-var variantUtils = require('./variant-utils-db5b9590.cjs.js');
+var variantUtils = require('./variant-utils-6c6ef452.cjs.js');
 require('@plasmicapp/host/registerComponent');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

package/skinny/registerTextArea.esm.js

@@ -4,7 +4,7 @@ import { TextArea } from 'react-aria-components';
 import { g as getCommonProps } from './common-0c4336fe.esm.js';
 import { g as PlasmicTextFieldContext } from './contexts-081d65a0.esm.js';
 import { r as registerComponentHelper, a as makeComponentName } from './utils-c7662a47.esm.js';
-import { p as pickAriaComponentVariants } from './variant-utils-23360776.esm.js';
+import { p as pickAriaComponentVariants } from './variant-utils-5f90385f.esm.js';
 import '@plasmicapp/host/registerComponent';
 
 var __defProp = Object.defineProperty;

package/skinny/registerTextField.cjs.js

@@ -10,7 +10,7 @@ var registerInput = require('./registerInput.cjs.js');
 var registerLabel = require('./registerLabel.cjs.js');
 var registerTextArea = require('./registerTextArea.cjs.js');
 var utils = require('./utils-8dbb4d1f.cjs.js');
-var variantUtils = require('./variant-utils-db5b9590.cjs.js');
+var variantUtils = require('./variant-utils-6c6ef452.cjs.js');
 require('./registerText.cjs.js');
 require('react-aria');
 require('@plasmicapp/host/registerComponent');

package/skinny/registerTextField.esm.js

@@ -8,7 +8,7 @@ import { registerInput, INPUT_COMPONENT_NAME } from './registerInput.esm.js';
 import { registerLabel, LABEL_COMPONENT_NAME } from './registerLabel.esm.js';
 import { registerTextArea } from './registerTextArea.esm.js';
 import { a as makeComponentName, r as registerComponentHelper, m as makeChildComponentName } from './utils-c7662a47.esm.js';
-import { p as pickAriaComponentVariants } from './variant-utils-23360776.esm.js';
+import { p as pickAriaComponentVariants } from './variant-utils-5f90385f.esm.js';
 import './registerText.esm.js';
 import 'react-aria';
 import '@plasmicapp/host/registerComponent';

package/skinny/registerTooltip.cjs.js

@@ -1,12 +1,12 @@
 'use strict';
 
 var host = require('@plasmicapp/host');
-var utils = require('@react-aria/utils');
 var React = require('react');
 var reactAria = require('react-aria');
+var reactAriaComponents = require('react-aria-components');
 var flattenChildren = require('react-keyed-flatten-children');
-var reactStately = require('react-stately');
-var utils$1 = require('./utils-8dbb4d1f.cjs.js');
+var utils = require('./utils-8dbb4d1f.cjs.js');
+var variantUtils = require('./variant-utils-6c6ef452.cjs.js');
 require('@plasmicapp/host/registerComponent');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -15,6 +15,8 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var flattenChildren__default = /*#__PURE__*/_interopDefault(flattenChildren);
 
 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;
@@ -30,52 +32,94 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-function BaseTooltip(props) {
-  var _b;
-  const _a = props, { children, tooltipContent, className, resetClassName } = _a, restProps = __objRest(_a, ["children", "tooltipContent", "className", "resetClassName"]);
-  const { isSelected, selectedSlotName } = (_b = host.usePlasmicCanvasComponentInfo(props)) != null ? _b : {};
-  const isAutoOpen = selectedSlotName !== "children" && isSelected;
-  const state = reactStately.useTooltipTriggerState(restProps);
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+function isForwardRefComponent(element) {
+  var _a;
+  return ((_a = element == null ? void 0 : element.type) == null ? void 0 : _a.$$typeof) === Symbol.for("react.forward_ref");
+}
+const TOOLTIP_VARIANTS = [
+  "placementTop",
+  "placementBottom",
+  "placementLeft",
+  "placementRight"
+];
+const { variants, withObservedValues } = variantUtils.pickAriaComponentVariants(TOOLTIP_VARIANTS);
+function TooltipButton(props) {
   const ref = React__default.default.useRef(null);
-  const { triggerProps, tooltipProps } = reactAria.useTooltipTrigger(
-    restProps,
-    state,
+  const { buttonProps } = reactAria.useButton(props, ref);
+  const { children } = props;
+  if (!isForwardRefComponent(children)) {
+    return children;
+  }
+  return React__default.default.cloneElement(children, __spreadProps(__spreadValues({}, buttonProps), {
     ref
-  );
-  const hasContent = tooltipContent && tooltipContent.type.name !== "CanvasSlotPlaceholder";
+  }));
+}
+function BaseTooltip(props) {
+  var _a;
+  const {
+    children,
+    isDisabled,
+    delay,
+    closeDelay,
+    trigger,
+    isOpen,
+    defaultOpen,
+    tooltipContent,
+    resetClassName,
+    placement,
+    offset,
+    crossOffset,
+    shouldFlip,
+    arrowBoundaryOffset,
+    className,
+    onOpenChange,
+    plasmicUpdateVariant
+  } = props;
+  const { isSelected, selectedSlotName } = (_a = host.usePlasmicCanvasComponentInfo(props)) != null ? _a : {};
+  const isAutoOpen = selectedSlotName !== "children" && isSelected;
   const focusableChild = flattenChildren__default.default(children)[0];
+  const _isOpen = isAutoOpen || isOpen;
   return /* @__PURE__ */ React__default.default.createElement(
-    "div",
+    reactAriaComponents.TooltipTrigger,
     {
-      style: { position: "relative" },
-      className: resetClassName
+      isDisabled,
+      delay,
+      closeDelay,
+      trigger,
+      isOpen: _isOpen,
+      defaultOpen,
+      onOpenChange
     },
-    React__default.default.isValidElement(focusableChild) ? React__default.default.cloneElement(focusableChild, __spreadValues({
-      ref
-    }, utils.mergeProps(
-      focusableChild.props,
-      triggerProps
-    ))) : null,
-    (isAutoOpen || state.isOpen) && /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, React__default.default.cloneElement(
-      hasContent ? tooltipContent : /* @__PURE__ */ React__default.default.createElement("p", null, "Add some content to the tooltip..."),
-      utils.mergeProps(tooltipProps, tooltipContent == null ? void 0 : tooltipContent.props.attrs, { className })
-    ))
+    /* @__PURE__ */ React__default.default.createElement(TooltipButton, null, focusableChild),
+    /* @__PURE__ */ React__default.default.createElement(
+      reactAriaComponents.Tooltip,
+      {
+        isOpen: _isOpen,
+        offset,
+        crossOffset,
+        shouldFlip,
+        arrowBoundaryOffset,
+        defaultOpen,
+        className: `${className} ${resetClassName}`,
+        onOpenChange,
+        placement
+      },
+      ({ placement: _placement }) => withObservedValues(
+        tooltipContent,
+        {
+          placementTop: _placement === "top",
+          placementBottom: _placement === "bottom",
+          placementLeft: _placement === "left",
+          placementRight: _placement === "right"
+        },
+        plasmicUpdateVariant
+      )
+    )
   );
 }
 function registerTooltip(loader, overrides) {
-  utils$1.registerComponentHelper(
+  utils.registerComponentHelper(
     loader,
     BaseTooltip,
     {
@@ -85,14 +129,18 @@ function registerTooltip(loader, overrides) {
       importName: "BaseTooltip",
       isAttachment: true,
       styleSections: true,
+      variants,
       props: {
         children: {
           type: "slot",
-          displayName: "Trigger",
           mergeWithParent: true,
+          displayName: "Trigger",
           defaultValue: {
             type: "text",
-            value: "Hover me!"
+            value: "Hover me!",
+            styles: {
+              width: "hug"
+            }
           }
         },
         tooltipContent: {
@@ -102,7 +150,11 @@ function registerTooltip(loader, overrides) {
           // NOTE: This is not applied in attachment
           defaultValue: {
             type: "text",
-            value: "Hello from Tooltip!"
+            value: "Hello from Tooltip!",
+            styles: {
+              // So the text does not overlap with existing content
+              backgroundColor: "white"
+            }
           }
         },
         resetClassName: {
@@ -113,12 +165,16 @@ function registerTooltip(loader, overrides) {
         },
         delay: {
           type: "number",
-          defaultValueHint: 1500,
+          // Default value is explicitly set to 0 to prevent users from mistakenly thinking the tooltip isn’t opening due to a delay.
+          defaultValue: 0,
+          defaultValueHint: 0,
           description: "The delay (in milliseconds) for the tooltip to show up."
         },
         closeDelay: {
           type: "number",
-          defaultValueHint: 500,
+          // Default value is explicitly set to 0 to prevent users from mistakenly thinking the tooltip isn’t closing due to a delay.
+          defaultValue: 0,
+          defaultValueHint: 0,
           description: "The delay (in milliseconds) for the tooltip to close."
         },
         trigger: {
@@ -126,6 +182,21 @@ function registerTooltip(loader, overrides) {
           options: ["focus", "focus and hover"],
           defaultValueHint: "focus and hover"
         },
+        placement: {
+          type: "choice",
+          description: "Default placement of the popover relative to the trigger, if there is enough space",
+          defaultValueHint: "top",
+          // Not providing more options because https://github.com/adobe/react-spectrum/issues/6517
+          options: ["top", "bottom", "left", "right"]
+        },
+        isOpen: {
+          type: "boolean",
+          editOnly: true,
+          uncontrolledProp: "defaultOpen",
+          description: "Whether the overlay is open by default",
+          defaultValueHint: false,
+          hidden: () => true
+        },
         onOpenChange: {
           type: "eventHandler",
           argTypes: [{ name: "isOpen", type: "boolean" }]
@@ -133,7 +204,8 @@ function registerTooltip(loader, overrides) {
       },
       states: {
         isOpen: {
-          type: "readonly",
+          type: "writable",
+          valueProp: "isOpen",
           onChangeProp: "onOpenChange",
           variableType: "boolean"
         }