@plasmicpkgs/react-aria 0.0.112 → 0.0.114

package/dist/react-aria.esm.js

@@ -1,6 +1,6 @@
 import { usePlasmicCanvasContext, usePlasmicCanvasComponentInfo, usePlasmicLink } from '@plasmicapp/host';
 import React, { useEffect, useState, useMemo, useCallback, forwardRef, useImperativeHandle, Component, useRef, useId } from 'react';
-import { mergeProps, useLink, useHover, useFocusRing, useFocusWithin } from 'react-aria';
+import { mergeProps, useLink, useHover, useFocusRing, useButton, useFocusWithin } from 'react-aria';
 import { Button, Checkbox, Text, Label, CheckboxGroup, Input, ListBoxItem, ListBox, Section, Header, PopoverContext, Popover, ComboBox, ComboBoxStateContext, Dialog, ModalOverlay, Modal, DialogTrigger, Heading, TooltipContext, OverlayArrow, Radio, RadioGroup, Select, SelectStateContext, SelectValue, SliderOutput, SliderThumb, Slider, SliderTrack, Switch, TextArea, TextField, Provider, TooltipTriggerStateContext, Tooltip } from 'react-aria-components';
 import registerComponent from '@plasmicapp/host/registerComponent';
 import { mergeProps as mergeProps$1 } from '@react-aria/utils';
@@ -26,6 +26,21 @@ var __spreadValues$s = (a, b) => {
   return a;
 };
 var __spreadProps$n = (a, b) => __defProps$n(a, __getOwnPropDescs$n(b));
+function useIsOpen({
+  triggerSlotName,
+  isOpen,
+  __plasmic_selection_prop__
+}) {
+  var _a, _b;
+  const canvasContext = usePlasmicCanvasContext();
+  const { isSelected, selectedSlotName } = (_b = (_a = usePlasmicCanvasComponentInfo) == null ? void 0 : _a({ __plasmic_selection_prop__ })) != null ? _b : {};
+  if (!canvasContext) {
+    return isOpen;
+  }
+  const isTriggerSlotSelected = isDefined(selectedSlotName) && selectedSlotName === triggerSlotName;
+  const isAutoOpenedBySelection = isSelected && !isTriggerSlotSelected;
+  return Boolean(isAutoOpenedBySelection || isOpen);
+}
 function useAutoOpen({
   props,
   open,
@@ -2630,7 +2645,6 @@ var __objRest$c = (source, exclude) => {
 };
 const BaseModal = forwardRef(
   function BaseModalInner(props, ref) {
-    var _b, _c, _d;
     const _a = props, {
       children,
       modalOverlayClass,
@@ -2638,7 +2652,9 @@ const BaseModal = forwardRef(
       isOpen,
       resetClassName,
       setControlContextData,
-      isDismissable
+      isDismissable,
+      defaultOpen,
+      __plasmic_selection_prop__
     } = _a, rest = __objRest$c(_a, [
       "children",
       "modalOverlayClass",
@@ -2646,22 +2662,24 @@ const BaseModal = forwardRef(
       "isOpen",
       "resetClassName",
       "setControlContextData",
-      "isDismissable"
+      "isDismissable",
+      "defaultOpen",
+      "__plasmic_selection_prop__"
     ]);
     const canvasCtx = usePlasmicCanvasContext();
     const isEditMode = canvasCtx && canvasCtx.interactive === false;
-    const isSelected = (_d = (_c = (_b = usePlasmicCanvasComponentInfo) == null ? void 0 : _b(props)) == null ? void 0 : _c.isSelected) != null ? _d : false;
     const contextProps = React.useContext(PlasmicDialogTriggerContext);
     const isStandalone = !contextProps;
+    const isOpen2 = useIsOpen({ isOpen, __plasmic_selection_prop__ });
     const mergedProps = mergeProps(rest, {
-      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 in edit mode, because it only matters in interactive mode.
-            */
+      // Since open/defaultOpen props are hidden when the modal is inside dialogTrigger, we also unset them here.
+      isOpen: isStandalone ? isOpen2 : void 0,
+      defaultOpen: isStandalone ? defaultOpen : void 0,
+      // 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 in edit mode, because it only matters in interactive mode.
       isDismissable: isEditMode ? false : isDismissable
     });
     setControlContextData == null ? void 0 : setControlContextData({
@@ -2767,6 +2785,7 @@ function registerModal(loader, overrides) {
           type: "boolean",
           editOnly: true,
           uncontrolledProp: "defaultOpen",
+          // standalone Modals should default to open so that they are visible when inserted
           defaultValueHint: true,
           defaultValue: true,
           hidden: hasParent
@@ -2833,15 +2852,28 @@ var __objRest$b = (source, exclude) => {
     }
   return target;
 };
+function TriggerWrapper$1({ 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$d({}, mergedProps), children);
+}
 function BaseDialogTrigger(props) {
-  var _b, _c;
-  const _a = props, { trigger, dialog, isOpen } = _a, rest = __objRest$b(_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$b(_a, ["trigger", "dialog", "isOpen", "className", "__plasmic_selection_prop__"]);
+  const isOpen2 = useIsOpen({
+    triggerSlotName: "trigger",
+    isOpen,
+    __plasmic_selection_prop__
+  });
   const mergedProps = __spreadProps$b(__spreadValues$d({}, rest), {
-    isOpen: isAutoOpen || isOpen
+    isOpen: isOpen2
   });
-  return /* @__PURE__ */ React.createElement(PlasmicDialogTriggerContext.Provider, { value: mergedProps }, /* @__PURE__ */ React.createElement(DialogTrigger, __spreadValues$d({}, mergedProps), trigger, dialog));
+  return /* @__PURE__ */ React.createElement(PlasmicDialogTriggerContext.Provider, { value: mergedProps }, /* @__PURE__ */ React.createElement(DialogTrigger, __spreadValues$d({}, mergedProps), trigger && /* @__PURE__ */ React.createElement(TriggerWrapper$1, { className }, trigger), dialog));
 }
 function registerDialogTrigger(loader, overrides) {
   registerComponentHelper(
@@ -2852,7 +2884,6 @@ function registerDialogTrigger(loader, overrides) {
       displayName: "Aria Dialog Trigger",
       importPath: "@plasmicpkgs/react-aria/skinny/registerDialogTrigger",
       importName: "BaseDialogTrigger",
-      styleSections: false,
       props: {
         trigger: {
           type: "slot",
@@ -4906,7 +4937,6 @@ function UncontrolledBaseTooltip(_a) {
   );
 }
 function ControlledBaseTooltip(props) {
-  var _a, _b;
   const {
     children,
     isDisabled = false,
@@ -4923,11 +4953,14 @@ function ControlledBaseTooltip(props) {
     className,
     onOpenChange = () => {
     },
-    plasmicUpdateVariant
+    plasmicUpdateVariant,
+    __plasmic_selection_prop__
   } = props;
-  const { isSelected, selectedSlotName } = (_b = (_a = usePlasmicCanvasComponentInfo) == null ? void 0 : _a(props)) != null ? _b : {};
-  const isSelectedOnCanvas = selectedSlotName !== "children" && isSelected;
-  const _isOpen = isSelectedOnCanvas || isOpen;
+  const isOpen2 = useIsOpen({
+    triggerSlotName: "children",
+    isOpen,
+    __plasmic_selection_prop__
+  });
   const ref = useRef(null);
   const tooltipId = useId();
   const state = useTooltipTriggerState(__spreadProps(__spreadValues({}, props), {
@@ -4938,7 +4971,7 @@ function ControlledBaseTooltip(props) {
     {
       ref,
       className,
-      tooltipId: _isOpen ? tooltipId : void 0,
+      tooltipId: isOpen2 ? tooltipId : void 0,
       isDisabled,
       onOpenChange,
       triggerOnFocusOnly: trigger === "focus"
@@ -4949,7 +4982,7 @@ function ControlledBaseTooltip(props) {
     {
       triggerRef: ref,
       id: tooltipId,
-      isOpen: _isOpen,
+      isOpen: isOpen2,
       offset,
       delay,
       closeDelay,