@plasmicpkgs/react-aria 0.0.76 → 0.0.78

package/dist/contexts.d.ts

@@ -8,7 +8,7 @@ export declare const PlasmicDialogTriggerContext: React.Context<import("./regist
 export type PlasmicSliderContextType<T extends number | number[]> = React.ComponentProps<typeof BaseSlider<T>> | undefined;
 export declare const PlasmicSliderContext: React.Context<PlasmicSliderContextType<number | number[]>>;
 export declare const PlasmicLabelContext: React.Context<import("react-aria-components").LabelProps | undefined>;
-export declare const PlasmicPopoverContext: React.Context<import("./registerPopover").BasePopoverProps | undefined>;
+export declare const PlasmicPopoverTriggerContext: React.Context<boolean | undefined>;
 export declare const PlasmicListBoxContext: React.Context<{
     idManager: ListBoxItemIdManager;
 } | undefined>;

package/dist/react-aria.esm.js

@@ -30,9 +30,9 @@ function useAutoOpen({
   open,
   close
 }) {
-  var _a, _b;
+  var _a, _b, _c;
   const inPlasmicCanvas = !!usePlasmicCanvasContext();
-  const isSelected = (_b = (_a = usePlasmicCanvasComponentInfo(props)) == null ? void 0 : _a.isSelected) != null ? _b : false;
+  const isSelected = (_c = (_b = (_a = usePlasmicCanvasComponentInfo) == null ? void 0 : _a(props)) == null ? void 0 : _b.isSelected) != null ? _c : false;
   useEffect(() => {
     if (!inPlasmicCanvas) {
       return;
@@ -640,7 +640,7 @@ const PlasmicRadioGroupContext = React.createContext(void 0);
 const PlasmicDialogTriggerContext = React.createContext(void 0);
 const PlasmicSliderContext = React.createContext(void 0);
 React.createContext(void 0);
-const PlasmicPopoverContext = React.createContext(void 0);
+const PlasmicPopoverTriggerContext = React.createContext(void 0);
 const PlasmicListBoxContext = React.createContext(void 0);
 React.createContext(void 0);
 const PlasmicInputContext = React.createContext(void 0);
@@ -2115,14 +2115,24 @@ const POPOVER_VARIANTS = [
 ];
 const { variants: variants$a, withObservedValues: withObservedValues$9 } = pickAriaComponentVariants(POPOVER_VARIANTS);
 function BasePopover(props) {
-  const _a = props, { resetClassName, plasmicUpdateVariant } = _a, restProps = __objRest$e(_a, ["resetClassName", "plasmicUpdateVariant"]);
+  const _a = props, {
+    resetClassName,
+    plasmicUpdateVariant,
+    setControlContextData,
+    matchTriggerWidth
+  } = _a, restProps = __objRest$e(_a, [
+    "resetClassName",
+    "plasmicUpdateVariant",
+    "setControlContextData",
+    "matchTriggerWidth"
+  ]);
   const isStandalone = !React.useContext(PopoverContext);
-  const context = React.useContext(PlasmicPopoverContext);
+  const hasTrigger = !!React.useContext(PlasmicPopoverTriggerContext);
   const triggerRef = React.useRef(null);
   const canvasContext = usePlasmicCanvasContext();
+  const matchTriggerWidthProp = hasTrigger && matchTriggerWidth;
   const _b = mergeProps$1(
     {
-      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
@@ -2138,16 +2148,27 @@ function BasePopover(props) {
       isOpen: true
     } : null
   ), { children } = _b, mergedProps = __objRest$e(_b, ["children"]);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, isStandalone && /* @__PURE__ */ React.createElement("div", { ref: triggerRef }), /* @__PURE__ */ React.createElement(Popover, __spreadValues$f({}, mergedProps), ({ placement }) => withObservedValues$9(
-    children,
-    {
-      placementTop: placement === "top",
-      placementBottom: placement === "bottom",
-      placementLeft: placement === "left",
-      placementRight: placement === "right"
-    },
-    plasmicUpdateVariant
-  )));
+  useEffect(() => {
+    setControlContextData == null ? void 0 : setControlContextData({
+      canMatchTriggerWidth: hasTrigger
+    });
+  }, [hasTrigger, setControlContextData]);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, isStandalone && /* @__PURE__ */ React.createElement("div", { ref: triggerRef }), /* @__PURE__ */ React.createElement(
+    Popover,
+    __spreadValues$f({
+      style: matchTriggerWidthProp ? { width: `var(--trigger-width)` } : void 0
+    }, mergedProps),
+    ({ placement }) => withObservedValues$9(
+      children,
+      {
+        placementTop: placement === "top",
+        placementBottom: placement === "bottom",
+        placementLeft: placement === "left",
+        placementRight: placement === "right"
+      },
+      plasmicUpdateVariant
+    )
+  ));
 }
 const POPOVER_COMPONENT_NAME = makeComponentName("popover");
 const POPOVER_ARROW_IMG = {
@@ -2238,6 +2259,11 @@ function registerPopover(loader, overrides) {
         },
         resetClassName: {
           type: "themeResetClass"
+        },
+        matchTriggerWidth: {
+          type: "boolean",
+          defaultValue: true,
+          hidden: (_props, ctx) => !(ctx == null ? void 0 : ctx.canMatchTriggerWidth)
         }
       },
       // No isOpen state for popover, because we assume that its open state is always going to be controlled by a parent like Select, Combobox, DialogTrigger, etc.
@@ -2323,7 +2349,7 @@ function BaseComboBox(props) {
       isDisabled,
       className
     }, rest),
-    /* @__PURE__ */ React.createElement(PlasmicPopoverContext.Provider, { value: {} }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(PlasmicPopoverTriggerContext.Provider, { value: true }, /* @__PURE__ */ React.createElement(
       PlasmicListBoxContext.Provider,
       {
         value: {
@@ -2433,7 +2459,8 @@ function registerComboBox(loader) {
                 styles: {
                   backgroundColor: "white",
                   padding: "10px",
-                  overflow: "scroll"
+                  overflow: "scroll",
+                  width: "unset"
                 },
                 props: {
                   offset: 0,
@@ -2579,7 +2606,7 @@ const INLINE_STYLES = {
 };
 const BaseModal = forwardRef(
   function _BaseModal(props, ref) {
-    var _b;
+    var _b, _c, _d;
     const _a = props, {
       children,
       modalOverlayClass,
@@ -2597,7 +2624,7 @@ const BaseModal = forwardRef(
       "setControlContextData",
       "isDismissable"
     ]);
-    const { isSelected } = (_b = usePlasmicCanvasComponentInfo(props)) != null ? _b : {};
+    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 mergedProps = mergeProps(contextProps, rest, {
@@ -2783,12 +2810,12 @@ var __objRest$a = (source, exclude) => {
   return target;
 };
 function BaseDialogTrigger(props) {
-  var _b, _c;
+  var _b, _c, _d;
   const _a = props, { trigger, dialog, isOpen } = _a, rest = __objRest$a(_a, ["trigger", "dialog", "isOpen"]);
-  const { isSelected, selectedSlotName } = (_b = usePlasmicCanvasComponentInfo(props)) != null ? _b : {};
+  const { isSelected, selectedSlotName } = (_c = (_b = usePlasmicCanvasComponentInfo) == null ? void 0 : _b(props)) != null ? _c : {};
   const isAutoOpen = selectedSlotName !== "trigger" && isSelected;
   const mergedProps = __spreadProps$7(__spreadValues$b({}, rest), {
-    isOpen: (_c = isAutoOpen || isOpen) != null ? _c : false
+    isOpen: (_d = isAutoOpen || isOpen) != null ? _d : false
   });
   return /* @__PURE__ */ React.createElement(PlasmicDialogTriggerContext.Provider, { value: mergedProps }, /* @__PURE__ */ React.createElement(DialogTrigger, __spreadValues$b({}, mergedProps), trigger, dialog));
 }
@@ -3233,7 +3260,7 @@ function BaseSelect(props) {
       "aria-label": ariaLabel
     }, extractPlasmicDataProps(props)),
     /* @__PURE__ */ React.createElement(SelectAutoOpen, __spreadValues$8({}, props)),
-    /* @__PURE__ */ React.createElement(PlasmicPopoverContext.Provider, { value: {} }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(PlasmicPopoverTriggerContext.Provider, { value: true }, /* @__PURE__ */ React.createElement(
       PlasmicListBoxContext.Provider,
       {
         value: {
@@ -3375,7 +3402,8 @@ function registerSelect(loader) {
                 styles: {
                   backgroundColor: "white",
                   padding: "10px",
-                  overflow: "scroll"
+                  overflow: "scroll",
+                  width: "unset"
                 },
                 props: {
                   children: [
@@ -4615,7 +4643,7 @@ function TriggerWrapper(_a) {
   return /* @__PURE__ */ React.createElement("div", __spreadValues({ ref }, focusableProps), children);
 }
 function BaseTooltip(props) {
-  var _a;
+  var _a, _b;
   const {
     children,
     isDisabled,
@@ -4634,7 +4662,7 @@ function BaseTooltip(props) {
     onOpenChange,
     plasmicUpdateVariant
   } = props;
-  const { isSelected, selectedSlotName } = (_a = usePlasmicCanvasComponentInfo(props)) != null ? _a : {};
+  const { isSelected, selectedSlotName } = (_b = (_a = usePlasmicCanvasComponentInfo) == null ? void 0 : _a(props)) != null ? _b : {};
   const isAutoOpen = selectedSlotName !== "children" && isSelected;
   const _isOpen = isAutoOpen || isOpen;
   return /* @__PURE__ */ React.createElement(