@plasmicpkgs/react-aria 0.0.95 → 0.0.96

package/dist/react-aria.esm.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useMemo, useCallback, forwardRef, useImperativeHandle, Component } from 'react';
 import { mergeProps, useFocusable } from 'react-aria';
-import { Button, Checkbox, Text, Label, CheckboxGroup, Input, ListBoxItem, ListBox, Section, Header, PopoverContext, Popover, Dialog, ComboBox, ComboBoxStateContext, Heading, ModalOverlay, Modal, DialogTrigger, TooltipContext, OverlayArrow, Radio, RadioGroup, Select, SelectStateContext, SelectValue, SliderOutput, SliderThumb, Slider, SliderTrack, Switch, TextArea, TextField, TooltipTrigger, Tooltip } from 'react-aria-components';
+import { Button, Checkbox, Text, Label, CheckboxGroup, Input, ListBoxItem, ListBox, Section, Header, PopoverContext, Popover, ComboBox, ComboBoxStateContext, Dialog, Heading, ModalOverlay, Modal, DialogTrigger, TooltipContext, OverlayArrow, Radio, RadioGroup, Select, SelectStateContext, SelectValue, SliderOutput, SliderThumb, Slider, SliderTrack, Switch, TextArea, TextField, TooltipTrigger, Tooltip } from 'react-aria-components';
 import { usePlasmicCanvasContext, usePlasmicCanvasComponentInfo } from '@plasmicapp/host';
 import registerComponent from '@plasmicapp/host/registerComponent';
 import { mergeProps as mergeProps$1 } from '@react-aria/utils';
@@ -2150,8 +2150,6 @@ function BasePopover(props) {
   const triggerRef = React.useRef(null);
   const canvasContext = usePlasmicCanvasContext();
   const matchTriggerWidthProp = hasTrigger && matchTriggerWidth;
-  const dialogTriggerContext = React.useContext(PlasmicDialogTriggerContext);
-  const shouldTrapFocus = !canvasContext && !!dialogTriggerContext;
   const _b = mergeProps$1(
     {
       // isNonModal: Whether the popover is non-modal, i.e. elements outside the popover may be interacted with by assistive technologies.
@@ -2174,15 +2172,13 @@ function BasePopover(props) {
       canMatchTriggerWidth: hasTrigger
     });
   }, [hasTrigger, setControlContextData]);
-  const withoutDialog = /* @__PURE__ */ React.createElement("div", null, children);
-  const dialog = /* @__PURE__ */ React.createElement(Dialog, null, children);
   return /* @__PURE__ */ React.createElement(React.Fragment, null, isStandalone && /* @__PURE__ */ React.createElement("div", { ref: triggerRef }), /* @__PURE__ */ React.createElement(
     Popover,
     __spreadValues$g({
       style: __spreadValues$g(__spreadValues$g({}, matchTriggerWidthProp ? { width: `var(--trigger-width)` } : {}), COMMON_STYLES)
     }, mergedProps),
     ({ placement }) => withObservedValues$a(
-      shouldTrapFocus ? dialog : withoutDialog,
+      children,
       {
         placementTop: placement === "top",
         placementBottom: placement === "bottom",
@@ -2488,6 +2484,36 @@ function registerComboBox(loader) {
   });
 }
 
+function BaseDialog({ children, className }) {
+  const canvasContext = usePlasmicCanvasContext();
+  if (canvasContext) {
+    return /* @__PURE__ */ React.createElement("div", { className, style: COMMON_STYLES }, children);
+  } else {
+    return /* @__PURE__ */ React.createElement(Dialog, { className, style: COMMON_STYLES }, children);
+  }
+}
+const DIALOG_COMPONENT_NAME = makeComponentName("dialog");
+function registerDialog(loader, overrides) {
+  registerComponentHelper(
+    loader,
+    BaseDialog,
+    {
+      name: DIALOG_COMPONENT_NAME,
+      displayName: "Aria Dialog",
+      importPath: "@plasmicpkgs/react-aria/skinny/registerDialog",
+      importName: "BaseDialog",
+      props: {
+        children: {
+          type: "slot",
+          mergeWithParent: true
+        }
+      },
+      trapsFocus: true
+    },
+    overrides
+  );
+}
+
 var __defProp$e = Object.defineProperty;
 var __defProps$c = Object.defineProperties;
 var __getOwnPropDescs$c = Object.getOwnPropertyDescriptors;
@@ -2639,18 +2665,47 @@ const BaseModal = forwardRef(
         (_a2 = mergedProps.onOpenChange) == null ? void 0 : _a2.call(mergedProps, true);
       }
     }));
-    const dialogInCanvas = /* @__PURE__ */ React.createElement("div", { style: COMMON_STYLES, className }, children);
-    const dialog = /* @__PURE__ */ React.createElement(Dialog, { style: COMMON_STYLES, className }, children);
     return /* @__PURE__ */ React.createElement(
       ModalOverlay,
       __spreadProps$b(__spreadValues$d({}, mergedProps), {
         className: `${resetClassName} ${modalOverlayClass}`
       }),
-      /* @__PURE__ */ React.createElement(Modal, null, canvasCtx ? dialogInCanvas : dialog)
+      /* @__PURE__ */ React.createElement(Modal, { className }, children)
     );
   }
 );
 const MODAL_COMPONENT_NAME = makeComponentName("modal");
+const MODAL_DEFAULT_SLOT_CONTENT = {
+  type: "vbox",
+  styles: {
+    width: "stretch",
+    padding: 0,
+    gap: "10px",
+    justifyContent: "flex-start",
+    alignItems: "flex-start"
+  },
+  children: [
+    {
+      type: "component",
+      name: HEADING_COMPONENT_NAME
+    },
+    {
+      type: "text",
+      value: "This is a Modal!"
+    },
+    {
+      type: "text",
+      value: "You can put anything you can imagine here!",
+      styles: {
+        fontWeight: 500
+      }
+    },
+    {
+      type: "text",
+      value: "Use it in a `Aria Dialog Trigger` component to trigger it on a button click!"
+    }
+  ]
+};
 function registerModal(loader, overrides) {
   registerComponentHelper(
     loader,
@@ -2689,37 +2744,7 @@ function registerModal(loader, overrides) {
         children: {
           type: "slot",
           mergeWithParent: true,
-          defaultValue: {
-            type: "vbox",
-            styles: {
-              width: "stretch",
-              padding: 0,
-              gap: "10px",
-              justifyContent: "flex-start",
-              alignItems: "flex-start"
-            },
-            children: [
-              {
-                type: "component",
-                name: HEADING_COMPONENT_NAME
-              },
-              {
-                type: "text",
-                value: "This is a Modal!"
-              },
-              {
-                type: "text",
-                value: "You can put anything you can imagine here!",
-                styles: {
-                  fontWeight: 500
-                }
-              },
-              {
-                type: "text",
-                value: "Use it in a `Aria Dialog Trigger` component to trigger it on a button click!"
-              }
-            ]
-          }
+          defaultValue: MODAL_DEFAULT_SLOT_CONTENT
         },
         modalOverlayClass: {
           type: "class",
@@ -2815,7 +2840,6 @@ function registerDialogTrigger(loader, overrides) {
       importPath: "@plasmicpkgs/react-aria/skinny/registerDialogTrigger",
       importName: "BaseDialogTrigger",
       styleSections: false,
-      isAttachment: true,
       props: {
         trigger: {
           type: "slot",
@@ -2834,10 +2858,21 @@ function registerDialogTrigger(loader, overrides) {
         dialog: {
           type: "slot",
           mergeWithParent: true,
-          defaultValue: {
-            type: "component",
-            name: MODAL_COMPONENT_NAME
-          }
+          defaultValue: [
+            {
+              type: "component",
+              name: MODAL_COMPONENT_NAME,
+              props: {
+                children: {
+                  type: "component",
+                  name: DIALOG_COMPONENT_NAME,
+                  props: {
+                    children: MODAL_DEFAULT_SLOT_CONTENT
+                  }
+                }
+              }
+            }
+          ]
         },
         isOpen: {
           type: "boolean",
@@ -4927,6 +4962,7 @@ function registerAll(loader) {
   registerText(loader);
   registerHeading(loader);
   registerDescription(loader);
+  registerDialog(loader);
   registerOverlayArrow(loader);
   registerSelect(loader);
   registerComboBox(loader);