@plasmicpkgs/react-aria 0.0.71 → 0.0.72

package/dist/react-aria.esm.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useMemo, forwardRef, useImperativeHandle, Component } from 'react';
-import { Button, Checkbox, Text, FieldError, Label, CheckboxGroup, Input, ListBoxItem, ListBox, Section, Header, PopoverContext, Popover, ComboBox, ComboBoxStateContext, Heading, ModalOverlay, Modal, Dialog, DialogTrigger, Radio, RadioGroup, Select, SelectValue, SliderOutput, SliderThumb, Slider, SliderTrack, Switch, TextArea, TextField, TooltipTrigger, Tooltip } from 'react-aria-components';
-import registerComponent from '@plasmicapp/host/registerComponent';
+import { Button, Checkbox, Text, FieldError, 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, useButton } from 'react-aria';
 import { mergeProps as mergeProps$1 } from '@react-aria/utils';
 import flattenChildren from 'react-keyed-flatten-children';
@@ -25,6 +25,25 @@ var __spreadValues$r = (a, b) => {
   return a;
 };
 var __spreadProps$h = (a, b) => __defProps$h(a, __getOwnPropDescs$h(b));
+function useAutoOpen({
+  props,
+  open,
+  close
+}) {
+  var _a, _b;
+  const inPlasmicCanvas = !!usePlasmicCanvasContext();
+  const isSelected = (_b = (_a = usePlasmicCanvasComponentInfo(props)) == null ? void 0 : _a.isSelected) != null ? _b : false;
+  useEffect(() => {
+    if (!inPlasmicCanvas) {
+      return;
+    }
+    if (isSelected) {
+      open == null ? void 0 : open();
+    } else {
+      close == null ? void 0 : close();
+    }
+  }, [isSelected, inPlasmicCanvas]);
+}
 function registerComponentHelper(loader, component, meta, overrides) {
   var _a;
   meta = __spreadProps$h(__spreadValues$r({}, meta), {
@@ -2088,27 +2107,22 @@ function BasePopover(props) {
   const isStandalone = !React.useContext(PopoverContext);
   const context = React.useContext(PlasmicPopoverContext);
   const triggerRef = React.useRef(null);
-  const isEditMode = !!usePlasmicCanvasContext();
+  const canvasContext = usePlasmicCanvasContext();
   const _b = mergeProps$1(
     {
-      isOpen: context == null ? void 0 : context.isOpen
+      isOpen: context == null ? void 0 : context.isOpen,
+      // isNonModal: Whether the popover is non-modal, i.e. elements outside the popover may be interacted with by assistive technologies.
+      // Setting isNonModal to true in edit mode (canvas) means that the popover will not prevent the user from interacting with the canvas while the popover is open.
+      isNonModal: canvasContext && !canvasContext.interactive
     },
-    /**
-     * isNonModal: Whether the popover is non-modal, i.e. elements outside the popover may be interacted with by assistive technologies. *
-     *
-     * Setting isNonModal to true in edit mode (canvas) means that the popover will not prevent the user from interacting with the canvas while the popover is open.
-     */
-    isEditMode ? { isNonModal: true } : null,
     restProps,
     { className: `${resetClassName}` },
     // Override some props if the popover is standalone
     isStandalone ? {
       triggerRef,
       isNonModal: true,
-      /**
-       * Always true, because we assume that popover is always going to be controlled by a parent like Select, Combobox, DialogTrigger, etc, and its only really standalone in component view
-       * In component view, we never want to start with an empty artboard, so isOpen has to be true
-       *  */
+      // Always true, because we assume that popover is always going to be controlled by a parent like Select, Combobox, DialogTrigger, etc, and its only really standalone in component view
+      // In component view, we never want to start with an empty artboard, so isOpen has to be true
       isOpen: true
     } : null
   ), { children } = _b, mergedProps = __objRest$d(_b, ["children"]);
@@ -2255,24 +2269,21 @@ var __objRest$c = (source, exclude) => {
 };
 const COMBOBOX_NAME = makeComponentName("combobox");
 function ComboboxAutoOpen(props) {
-  var _a, _b;
-  const isEditMode = !!usePlasmicCanvasContext();
-  const { isSelected } = (_a = usePlasmicCanvasComponentInfo(props)) != null ? _a : {};
-  const { open, close } = (_b = React.useContext(ComboBoxStateContext)) != null ? _b : {};
-  useEffect(() => {
-    if (!isEditMode) {
-      return;
-    }
-    if (isSelected) {
-      open == null ? void 0 : open(void 0, "manual");
-    } else {
-      close == null ? void 0 : close();
-    }
-  }, [isSelected, isEditMode]);
+  var _a;
+  const { open, close } = (_a = React.useContext(ComboBoxStateContext)) != null ? _a : {};
+  useAutoOpen({ props, open, close });
   return null;
 }
 function BaseComboBox(props) {
-  const _a = props, { children, setControlContextData, isOpen } = _a, rest = __objRest$c(_a, ["children", "setControlContextData", "isOpen"]);
+  const _a = props, {
+    children,
+    setControlContextData,
+    isOpen: _isOpen
+  } = _a, rest = __objRest$c(_a, [
+    "children",
+    "setControlContextData",
+    "isOpen"
+  ]);
   const idManager = useMemo(() => new ListBoxItemIdManager(), []);
   useEffect(() => {
     idManager.subscribe((ids) => {
@@ -2281,7 +2292,7 @@ function BaseComboBox(props) {
       });
     });
   }, []);
-  return /* @__PURE__ */ React.createElement(ComboBox, __spreadValues$e({}, rest), /* @__PURE__ */ React.createElement(PlasmicPopoverContext.Provider, { value: { isOpen } }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(ComboBox, __spreadValues$e({}, rest), /* @__PURE__ */ React.createElement(PlasmicPopoverContext.Provider, { value: {} }, /* @__PURE__ */ React.createElement(
     PlasmicListBoxContext.Provider,
     {
       value: {
@@ -3131,13 +3142,19 @@ var __spreadValues$8 = (a, b) => {
   return a;
 };
 var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
+function SelectAutoOpen(props) {
+  var _a;
+  const { open, close } = (_a = React.useContext(SelectStateContext)) != null ? _a : {};
+  useAutoOpen({ props, open, close });
+  return null;
+}
 const BaseSelectValue = (props) => {
-  const { children, customize } = props;
-  return /* @__PURE__ */ React.createElement(SelectValue, null, ({ isPlaceholder, selectedText }) => /* @__PURE__ */ React.createElement(React.Fragment, null, isPlaceholder ? /* @__PURE__ */ React.createElement("span", null, "Select an item") : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", null, customize ? children : selectedText))));
+  const { children, customize, className } = props;
+  const placeholder = customize ? children : "Select an item";
+  return /* @__PURE__ */ React.createElement(SelectValue, { className }, ({ isPlaceholder, selectedText }) => /* @__PURE__ */ React.createElement(React.Fragment, null, isPlaceholder ? placeholder : selectedText));
 };
 const SELECT_NAME = makeComponentName("select");
 function BaseSelect(props) {
-  var _a, _b;
   const {
     selectedKey,
     onSelectionChange,
@@ -3149,12 +3166,9 @@ function BaseSelect(props) {
     children,
     disabledKeys,
     name,
-    isOpen,
     setControlContextData,
     "aria-label": ariaLabel
   } = props;
-  const { isSelected } = (_a = usePlasmicCanvasComponentInfo(props)) != null ? _a : {};
-  const _isOpen = (_b = isSelected || isOpen) != null ? _b : false;
   let idManager = useMemo(() => new ListBoxItemIdManager(), []);
   useEffect(() => {
     idManager.subscribe((ids) => {
@@ -3175,10 +3189,10 @@ function BaseSelect(props) {
       style,
       name,
       disabledKeys,
-      "aria-label": ariaLabel,
-      isOpen: _isOpen
+      "aria-label": ariaLabel
     }, extractPlasmicDataProps(props)),
-    /* @__PURE__ */ React.createElement(PlasmicPopoverContext.Provider, { value: { isOpen: _isOpen } }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(SelectAutoOpen, __spreadValues$8({}, props)),
+    /* @__PURE__ */ React.createElement(PlasmicPopoverContext.Provider, { value: {} }, /* @__PURE__ */ React.createElement(
       PlasmicListBoxContext.Provider,
       {
         value: {
@@ -3210,15 +3224,6 @@ function registerSelect(loader) {
           }
         ],
         hidden: (props) => !props.customize
-      },
-      className: {
-        type: "class",
-        selectors: [
-          {
-            selector: ":self[data-placeholder]",
-            label: "Placeholder"
-          }
-        ]
       }
     },
     trapsFocus: true