@plasmicpkgs/react-aria 0.0.82 → 0.0.84

package/dist/react-aria.js

@@ -1,9 +1,9 @@
 'use strict';
 
-var host = require('@plasmicapp/host');
 var React = require('react');
 var reactAria = require('react-aria');
 var reactAriaComponents = require('react-aria-components');
+var host = require('@plasmicapp/host');
 var registerComponent = require('@plasmicapp/host/registerComponent');
 var utils = require('@react-aria/utils');
 var flattenChildren = require('react-keyed-flatten-children');
@@ -179,7 +179,7 @@ function createAriaLabelProp(componentName) {
   return {
     type: "string",
     displayName: "ARIA label",
-    description: `Label for this ${componentName}, if no visible label is used, to identify the element to assistive technology`,
+    description: `Assistive technology uses this if there is no visible label for this ${componentName}`,
     advanced: true,
     hidden: hasParent
   };
@@ -484,19 +484,19 @@ const ARIA_COMPONENTS_VARIANTS = {
     However, data-selectors will consistently indicate the actual placement of the popover/tooltip.
   */
   placementLeft: {
-    cssSelector: "[data-placement]=left",
+    cssSelector: "[data-placement=left]",
     displayName: "Placement (Left)"
   },
   placementRight: {
-    cssSelector: "[data-placement]=right",
+    cssSelector: "[data-placement=right]",
     displayName: "Placement (Right)"
   },
   placementTop: {
-    cssSelector: "[data-placement]=top",
+    cssSelector: "[data-placement=top]",
     displayName: "Placement (Top)"
   },
   placementBottom: {
-    cssSelector: "[data-placement]=bottom",
+    cssSelector: "[data-placement=bottom]",
     displayName: "Placement (Bottom)"
   }
 };
@@ -563,33 +563,25 @@ const BUTTON_VARIANTS = [
   "disabled"
 ];
 const { variants: variants$f, withObservedValues: withObservedValues$d } = pickAriaComponentVariants(BUTTON_VARIANTS);
-const BaseButton = React__default.default.forwardRef(
-  (props, ref) => {
-    var _b;
-    const _a = props, { submitsForm, resetsForm, children, plasmicUpdateVariant } = _a, rest = __objRest$m(_a, ["submitsForm", "resetsForm", "children", "plasmicUpdateVariant"]);
-    const canvasContext = (_b = host.usePlasmicCanvasContext) == null ? void 0 : _b();
-    const isEditMode = canvasContext && canvasContext.interactive === false;
-    const type = submitsForm ? "submit" : resetsForm ? "reset" : "button";
-    const mergedProps = reactAria.mergeProps(rest, {
-      type,
-      ref,
-      // The rich text editor can cancel effect of clicks/hover, but not of key strokes.
-      // When pressing space key, the button's "pressed" state is triggered, and the rich text editor loses focus as a result.
-      preventFocusOnPress: isEditMode
-    });
-    return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Button, __spreadValues$p({}, mergedProps), ({ isHovered, isPressed, isFocused, isFocusVisible, isDisabled }) => withObservedValues$d(
-      children,
-      {
-        hovered: isHovered,
-        pressed: isPressed,
-        focused: isFocused,
-        focusVisible: isFocusVisible,
-        disabled: isDisabled
-      },
-      plasmicUpdateVariant
-    ));
-  }
-);
+const BaseButton = React__default.default.forwardRef(function BaseButtonInner(props, ref) {
+  const _a = props, { submitsForm, resetsForm, children, plasmicUpdateVariant } = _a, rest = __objRest$m(_a, ["submitsForm", "resetsForm", "children", "plasmicUpdateVariant"]);
+  const type = submitsForm ? "submit" : resetsForm ? "reset" : "button";
+  const mergedProps = reactAria.mergeProps(rest, {
+    type,
+    ref
+  });
+  return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Button, __spreadValues$p({}, mergedProps), ({ isHovered, isPressed, isFocused, isFocusVisible, isDisabled }) => withObservedValues$d(
+    children,
+    {
+      hovered: isHovered,
+      pressed: isPressed,
+      focused: isFocused,
+      focusVisible: isFocusVisible,
+      disabled: isDisabled
+    },
+    plasmicUpdateVariant
+  ));
+});
 const BUTTON_COMPONENT_NAME = makeComponentName("button");
 function registerButton(loader, overrides) {
   registerComponentHelper(
@@ -2467,7 +2459,7 @@ const INLINE_STYLES = {
   outline: "none"
 };
 const BaseModal = React.forwardRef(
-  function _BaseModal(props, ref) {
+  function BaseModalInner(props, ref) {
     var _b, _c, _d;
     const _a = props, {
       children,
@@ -2486,6 +2478,8 @@ const BaseModal = React.forwardRef(
       "setControlContextData",
       "isDismissable"
     ]);
+    const canvasCtx = host.usePlasmicCanvasContext();
+    const isEditMode = canvasCtx && canvasCtx.interactive === false;
     const isSelected = (_d = (_c = (_b = host.usePlasmicCanvasComponentInfo) == null ? void 0 : _b(props)) == null ? void 0 : _c.isSelected) != null ? _d : false;
     const contextProps = React__default.default.useContext(PlasmicDialogTriggerContext);
     const isStandalone = !contextProps;
@@ -2496,10 +2490,9 @@ const BaseModal = React.forwardRef(
               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.
+              To fix the above issue, we set an interim isDismissable state to false in edit mode, because it only matters in interactive mode.
             */
-      isDismissable: isSelected ? false : isDismissable
+      isDismissable: isEditMode ? false : isDismissable
     });
     setControlContextData == null ? void 0 : setControlContextData({
       parent: isStandalone ? void 0 : {}
@@ -2514,7 +2507,6 @@ const BaseModal = React.forwardRef(
         (_a2 = mergedProps.onOpenChange) == null ? void 0 : _a2.call(mergedProps, true);
       }
     }));
-    const isCanvas = host.usePlasmicCanvasContext();
     const bodyInCanvas = /* @__PURE__ */ React__default.default.createElement("div", { style: INLINE_STYLES }, children);
     const bodyInPreview = /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Dialog, { style: INLINE_STYLES }, children);
     return /* @__PURE__ */ React__default.default.createElement(
@@ -2522,7 +2514,7 @@ const BaseModal = React.forwardRef(
       __spreadProps$8(__spreadValues$c({}, mergedProps), {
         className: `${resetClassName} ${modalOverlayClass}`
       }),
-      /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Modal, { className }, isCanvas ? bodyInCanvas : bodyInPreview)
+      /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Modal, { className }, canvasCtx ? bodyInCanvas : bodyInPreview)
     );
   }
 );
@@ -3065,7 +3057,17 @@ var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
 function SelectAutoOpen(props) {
   var _a;
   const { open, close } = (_a = React__default.default.useContext(reactAriaComponents.SelectStateContext)) != null ? _a : {};
-  useAutoOpen({ props, open, close });
+  useAutoOpen({
+    props,
+    open: () => {
+      open == null ? void 0 : open();
+      setTimeout(() => {
+        var _a2, _b;
+        (_b = (_a2 = window.parent.document.activeElement) == null ? void 0 : _a2.blur) == null ? void 0 : _b.call(_a2);
+      });
+    },
+    close
+  });
   return null;
 }
 const BaseSelectValue = (props) => {