@plasmicpkgs/react-aria 0.0.71 → 0.0.72

package/dist/react-aria.js

@@ -2,8 +2,8 @@
 
 var React = require('react');
 var reactAriaComponents = require('react-aria-components');
-var registerComponent = require('@plasmicapp/host/registerComponent');
 var host = require('@plasmicapp/host');
+var registerComponent = require('@plasmicapp/host/registerComponent');
 var reactAria = require('react-aria');
 var utils = require('@react-aria/utils');
 var flattenChildren = require('react-keyed-flatten-children');
@@ -33,6 +33,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 = !!host.usePlasmicCanvasContext();
+  const isSelected = (_b = (_a = host.usePlasmicCanvasComponentInfo(props)) == null ? void 0 : _a.isSelected) != null ? _b : false;
+  React.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), {
@@ -2096,27 +2115,22 @@ function BasePopover(props) {
   const isStandalone = !React__default.default.useContext(reactAriaComponents.PopoverContext);
   const context = React__default.default.useContext(PlasmicPopoverContext);
   const triggerRef = React__default.default.useRef(null);
-  const isEditMode = !!host.usePlasmicCanvasContext();
+  const canvasContext = host.usePlasmicCanvasContext();
   const _b = utils.mergeProps(
     {
-      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"]);
@@ -2263,24 +2277,21 @@ var __objRest$c = (source, exclude) => {
 };
 const COMBOBOX_NAME = makeComponentName("combobox");
 function ComboboxAutoOpen(props) {
-  var _a, _b;
-  const isEditMode = !!host.usePlasmicCanvasContext();
-  const { isSelected } = (_a = host.usePlasmicCanvasComponentInfo(props)) != null ? _a : {};
-  const { open, close } = (_b = React__default.default.useContext(reactAriaComponents.ComboBoxStateContext)) != null ? _b : {};
-  React.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__default.default.useContext(reactAriaComponents.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 = React.useMemo(() => new ListBoxItemIdManager(), []);
   React.useEffect(() => {
     idManager.subscribe((ids) => {
@@ -2289,7 +2300,7 @@ function BaseComboBox(props) {
       });
     });
   }, []);
-  return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.ComboBox, __spreadValues$e({}, rest), /* @__PURE__ */ React__default.default.createElement(PlasmicPopoverContext.Provider, { value: { isOpen } }, /* @__PURE__ */ React__default.default.createElement(
+  return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.ComboBox, __spreadValues$e({}, rest), /* @__PURE__ */ React__default.default.createElement(PlasmicPopoverContext.Provider, { value: {} }, /* @__PURE__ */ React__default.default.createElement(
     PlasmicListBoxContext.Provider,
     {
       value: {
@@ -3139,13 +3150,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__default.default.useContext(reactAriaComponents.SelectStateContext)) != null ? _a : {};
+  useAutoOpen({ props, open, close });
+  return null;
+}
 const BaseSelectValue = (props) => {
-  const { children, customize } = props;
-  return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.SelectValue, null, ({ isPlaceholder, selectedText }) => /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, isPlaceholder ? /* @__PURE__ */ React__default.default.createElement("span", null, "Select an item") : /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement("span", null, customize ? children : selectedText))));
+  const { children, customize, className } = props;
+  const placeholder = customize ? children : "Select an item";
+  return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.SelectValue, { className }, ({ isPlaceholder, selectedText }) => /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, isPlaceholder ? placeholder : selectedText));
 };
 const SELECT_NAME = makeComponentName("select");
 function BaseSelect(props) {
-  var _a, _b;
   const {
     selectedKey,
     onSelectionChange,
@@ -3157,12 +3174,9 @@ function BaseSelect(props) {
     children,
     disabledKeys,
     name,
-    isOpen,
     setControlContextData,
     "aria-label": ariaLabel
   } = props;
-  const { isSelected } = (_a = host.usePlasmicCanvasComponentInfo(props)) != null ? _a : {};
-  const _isOpen = (_b = isSelected || isOpen) != null ? _b : false;
   let idManager = React.useMemo(() => new ListBoxItemIdManager(), []);
   React.useEffect(() => {
     idManager.subscribe((ids) => {
@@ -3183,10 +3197,10 @@ function BaseSelect(props) {
       style,
       name,
       disabledKeys,
-      "aria-label": ariaLabel,
-      isOpen: _isOpen
+      "aria-label": ariaLabel
     }, extractPlasmicDataProps(props)),
-    /* @__PURE__ */ React__default.default.createElement(PlasmicPopoverContext.Provider, { value: { isOpen: _isOpen } }, /* @__PURE__ */ React__default.default.createElement(
+    /* @__PURE__ */ React__default.default.createElement(SelectAutoOpen, __spreadValues$8({}, props)),
+    /* @__PURE__ */ React__default.default.createElement(PlasmicPopoverContext.Provider, { value: {} }, /* @__PURE__ */ React__default.default.createElement(
       PlasmicListBoxContext.Provider,
       {
         value: {
@@ -3218,15 +3232,6 @@ function registerSelect(loader) {
           }
         ],
         hidden: (props) => !props.customize
-      },
-      className: {
-        type: "class",
-        selectors: [
-          {
-            selector: ":self[data-placeholder]",
-            label: "Placeholder"
-          }
-        ]
       }
     },
     trapsFocus: true