@plasmicpkgs/react-aria 0.0.82 → 0.0.83

package/dist/react-aria.esm.js

@@ -1,7 +1,7 @@
-import { usePlasmicCanvasContext, usePlasmicCanvasComponentInfo } from '@plasmicapp/host';
 import React, { useEffect, useState, useMemo, forwardRef, useImperativeHandle, Component } from 'react';
 import { mergeProps, useFocusable } from 'react-aria';
 import { Button, Checkbox, Text, Label, CheckboxGroup, Input, ListBoxItem, ListBox, Section, Header, PopoverContext, Popover, ComboBox, ComboBoxStateContext, Heading, ModalOverlay, Modal, Dialog, DialogTrigger, 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';
 import flattenChildren from 'react-keyed-flatten-children';
@@ -171,7 +171,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
   };
@@ -555,33 +555,25 @@ const BUTTON_VARIANTS = [
   "disabled"
 ];
 const { variants: variants$f, withObservedValues: withObservedValues$d } = pickAriaComponentVariants(BUTTON_VARIANTS);
-const BaseButton = React.forwardRef(
-  (props, ref) => {
-    var _b;
-    const _a = props, { submitsForm, resetsForm, children, plasmicUpdateVariant } = _a, rest = __objRest$m(_a, ["submitsForm", "resetsForm", "children", "plasmicUpdateVariant"]);
-    const canvasContext = (_b = usePlasmicCanvasContext) == null ? void 0 : _b();
-    const isEditMode = canvasContext && canvasContext.interactive === false;
-    const type = submitsForm ? "submit" : resetsForm ? "reset" : "button";
-    const mergedProps = 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.createElement(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.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 = mergeProps(rest, {
+    type,
+    ref
+  });
+  return /* @__PURE__ */ React.createElement(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(
@@ -2459,7 +2451,7 @@ const INLINE_STYLES = {
   outline: "none"
 };
 const BaseModal = forwardRef(
-  function _BaseModal(props, ref) {
+  function BaseModalInner(props, ref) {
     var _b, _c, _d;
     const _a = props, {
       children,
@@ -2478,6 +2470,8 @@ const BaseModal = forwardRef(
       "setControlContextData",
       "isDismissable"
     ]);
+    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;
@@ -2488,10 +2482,9 @@ const BaseModal = 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 : {}
@@ -2506,7 +2499,6 @@ const BaseModal = forwardRef(
         (_a2 = mergedProps.onOpenChange) == null ? void 0 : _a2.call(mergedProps, true);
       }
     }));
-    const isCanvas = usePlasmicCanvasContext();
     const bodyInCanvas = /* @__PURE__ */ React.createElement("div", { style: INLINE_STYLES }, children);
     const bodyInPreview = /* @__PURE__ */ React.createElement(Dialog, { style: INLINE_STYLES }, children);
     return /* @__PURE__ */ React.createElement(
@@ -2514,7 +2506,7 @@ const BaseModal = forwardRef(
       __spreadProps$8(__spreadValues$c({}, mergedProps), {
         className: `${resetClassName} ${modalOverlayClass}`
       }),
-      /* @__PURE__ */ React.createElement(Modal, { className }, isCanvas ? bodyInCanvas : bodyInPreview)
+      /* @__PURE__ */ React.createElement(Modal, { className }, canvasCtx ? bodyInCanvas : bodyInPreview)
     );
   }
 );
@@ -3057,7 +3049,17 @@ var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
 function SelectAutoOpen(props) {
   var _a;
   const { open, close } = (_a = React.useContext(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) => {