@plasmicpkgs/react-aria 0.0.66 → 0.0.68

package/dist/react-aria.js

@@ -458,6 +458,12 @@ const ARIA_COMPONENTS_VARIANTS = {
     cssSelector: "[data-indeterminate]",
     displayName: "Indeterminate"
   },
+  /*
+    NOTE: Placement should be managed as variants, not just props.
+    When `shouldFlip` is true, the placement prop may not represent the final position
+    (e.g., if placement is set to "bottom" but lacks space, the popover/tooltip may flip to "top").
+    However, data-selectors will consistently indicate the actual placement of the popover/tooltip.
+  */
   placementLeft: {
     cssSelector: "[data-placement]=left",
     displayName: "Placement (Left)"
@@ -537,12 +543,12 @@ const BUTTON_VARIANTS = [
   "focusVisible",
   "disabled"
 ];
-const { variants: variants$e, withObservedValues: withObservedValues$c } = pickAriaComponentVariants(BUTTON_VARIANTS);
+const { variants: variants$f, withObservedValues: withObservedValues$d } = pickAriaComponentVariants(BUTTON_VARIANTS);
 const BaseButton = React__default.default.forwardRef(
   (props, ref) => {
     const _a = props, { submitsForm, resetsForm, children, plasmicUpdateVariant } = _a, rest = __objRest$n(_a, ["submitsForm", "resetsForm", "children", "plasmicUpdateVariant"]);
     const type = submitsForm ? "submit" : resetsForm ? "reset" : "button";
-    return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Button, __spreadValues$q({ type, ref }, rest), ({ isHovered, isPressed, isFocused, isFocusVisible, isDisabled }) => withObservedValues$c(
+    return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Button, __spreadValues$q({ type, ref }, rest), ({ isHovered, isPressed, isFocused, isFocusVisible, isDisabled }) => withObservedValues$d(
       children,
       {
         hovered: isHovered,
@@ -565,7 +571,7 @@ function registerButton(loader, overrides) {
       displayName: "Aria Button",
       importPath: "@plasmicpkgs/react-aria/skinny/registerButton",
       importName: "BaseButton",
-      variants: variants$e,
+      variants: variants$f,
       defaultStyles: {
         borderWidth: "1px",
         borderStyle: "solid",
@@ -666,7 +672,7 @@ const CHECKBOX_VARIANTS = [
   "readonly",
   "selected"
 ];
-const { variants: variants$d, withObservedValues: withObservedValues$b } = pickAriaComponentVariants(CHECKBOX_VARIANTS);
+const { variants: variants$e, withObservedValues: withObservedValues$c } = pickAriaComponentVariants(CHECKBOX_VARIANTS);
 function BaseCheckbox(props) {
   const _a = props, { children, plasmicUpdateVariant, setControlContextData } = _a, rest = __objRest$m(_a, ["children", "plasmicUpdateVariant", "setControlContextData"]);
   const contextProps = React__default.default.useContext(PlasmicCheckboxGroupContext);
@@ -682,7 +688,7 @@ function BaseCheckbox(props) {
     isIndeterminate,
     isSelected,
     isReadOnly
-  }) => withObservedValues$b(
+  }) => withObservedValues$c(
     children,
     {
       hovered: isHovered,
@@ -752,7 +758,7 @@ function registerCheckbox(loader, overrides) {
       displayName: "Aria Checkbox",
       importPath: "@plasmicpkgs/react-aria/skinny/registerCheckbox",
       importName: "BaseCheckbox",
-      variants: variants$d,
+      variants: variants$e,
       props: __spreadProps$f(__spreadValues$p({}, getCommonProps("checkbox", [
         "name",
         "isDisabled",
@@ -1177,12 +1183,12 @@ var __objRest$i = (source, exclude) => {
   return target;
 };
 const CHECKBOX_GROUP_VARIANTS = ["disabled", "readonly"];
-const { variants: variants$c, withObservedValues: withObservedValues$a } = pickAriaComponentVariants(
+const { variants: variants$d, withObservedValues: withObservedValues$b } = pickAriaComponentVariants(
   CHECKBOX_GROUP_VARIANTS
 );
 function BaseCheckboxGroup(props) {
   const _a = props, { children, plasmicUpdateVariant } = _a, rest = __objRest$i(_a, ["children", "plasmicUpdateVariant"]);
-  return /* @__PURE__ */ React__default.default.createElement(PlasmicCheckboxGroupContext.Provider, { value: rest }, /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.CheckboxGroup, __spreadValues$k({}, rest), ({ isDisabled, isReadOnly }) => withObservedValues$a(
+  return /* @__PURE__ */ React__default.default.createElement(PlasmicCheckboxGroupContext.Provider, { value: rest }, /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.CheckboxGroup, __spreadValues$k({}, rest), ({ isDisabled, isReadOnly }) => withObservedValues$b(
     children,
     {
       disabled: isDisabled,
@@ -1210,7 +1216,7 @@ function registerCheckboxGroup(loader, overrides) {
       displayName: "Aria Checkbox Group",
       importPath: "@plasmicpkgs/react-aria/skinny/registerCheckboxGroup",
       importName: "BaseCheckboxGroup",
-      variants: variants$c,
+      variants: variants$d,
       props: __spreadProps$b(__spreadValues$k({}, getCommonProps("checkbox group", [
         "name",
         "isDisabled",
@@ -1365,6 +1371,7 @@ class ListBoxItemIdManager {
   }
   subscribe(observer) {
     this._observers.add(observer);
+    observer(this.ids);
   }
   // Notify all observers about an event.
   notify() {
@@ -1408,7 +1415,7 @@ const INPUT_VARIANTS = [
   "hovered",
   "disabled"
 ];
-const { variants: variants$b } = pickAriaComponentVariants(INPUT_VARIANTS);
+const { variants: variants$c } = pickAriaComponentVariants(INPUT_VARIANTS);
 const inputHelpers$1 = {
   states: {
     value: {
@@ -1489,7 +1496,7 @@ function registerInput(loader, overrides) {
       displayName: "Aria Input",
       importPath: "@plasmicpkgs/react-aria/skinny/registerInput",
       importName: "BaseInput",
-      variants: variants$b,
+      variants: variants$c,
       defaultStyles: {
         width: "300px",
         borderWidth: "1px",
@@ -1581,7 +1588,7 @@ const LIST_BOX_ITEM_VARIANTS = [
   "selected",
   "disabled"
 ];
-const { variants: variants$a, withObservedValues: withObservedValues$9 } = pickAriaComponentVariants(
+const { variants: variants$b, withObservedValues: withObservedValues$a } = pickAriaComponentVariants(
   LIST_BOX_ITEM_VARIANTS
 );
 function BaseListBoxItem(props) {
@@ -1624,7 +1631,7 @@ function BaseListBoxItem(props) {
     isFocusVisible,
     isSelected,
     isDisabled
-  }) => withObservedValues$9(
+  }) => withObservedValues$a(
     children,
     {
       hovered: isHovered,
@@ -1687,7 +1694,7 @@ function registerListBoxItem(loader, overrides) {
       displayName: "Aria ListBoxItem",
       importPath: "@plasmicpkgs/react-aria/skinny/registerListBoxItem",
       importName: "BaseListBoxItem",
-      variants: variants$a,
+      variants: variants$b,
       props: {
         id: {
           type: "string",
@@ -1850,7 +1857,6 @@ function BaseListBox(props) {
     []
   );
   React.useEffect(() => {
-    console.log("sarah useEffect", { setControlContextData, ids });
     setControlContextData == null ? void 0 : setControlContextData({
       itemIds: ids,
       isStandalone
@@ -2078,14 +2084,29 @@ var __objRest$d = (source, exclude) => {
     }
   return target;
 };
+const POPOVER_VARIANTS = [
+  "placementTop",
+  "placementBottom",
+  "placementLeft",
+  "placementRight"
+];
+const { variants: variants$a, withObservedValues: withObservedValues$9 } = pickAriaComponentVariants(POPOVER_VARIANTS);
 function BasePopover(props) {
-  var _b;
-  const _a = props, { resetClassName, setControlContextData } = _a, restProps = __objRest$d(_a, ["resetClassName", "setControlContextData"]);
+  var _c;
+  const _a = props, {
+    resetClassName,
+    setControlContextData,
+    plasmicUpdateVariant
+  } = _a, restProps = __objRest$d(_a, [
+    "resetClassName",
+    "setControlContextData",
+    "plasmicUpdateVariant"
+  ]);
   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 mergedProps = utils.mergeProps(
+  const _b = utils.mergeProps(
     {
       isOpen: context == null ? void 0 : context.isOpen,
       shouldFlip: context == null ? void 0 : context.defaultShouldFlip
@@ -2108,11 +2129,20 @@ function BasePopover(props) {
        *  */
       isOpen: true
     } : null
-  );
+  ), { children } = _b, mergedProps = __objRest$d(_b, ["children"]);
   setControlContextData == null ? void 0 : setControlContextData({
-    defaultShouldFlip: (_b = context == null ? void 0 : context.defaultShouldFlip) != null ? _b : true
+    defaultShouldFlip: (_c = context == null ? void 0 : context.defaultShouldFlip) != null ? _c : true
   });
-  return /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, isStandalone && /* @__PURE__ */ React__default.default.createElement("div", { ref: triggerRef }), /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Popover, __spreadValues$f({}, mergedProps)));
+  return /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, isStandalone && /* @__PURE__ */ React__default.default.createElement("div", { ref: triggerRef }), /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Popover, __spreadValues$f({}, 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 = {
@@ -2136,6 +2166,7 @@ function registerPopover(loader, overrides) {
       displayName: "Aria Popover",
       importPath: "@plasmicpkgs/react-aria/skinny/registerPopover",
       importName: "BasePopover",
+      variants: variants$a,
       defaultStyles: {
         borderWidth: "1px",
         borderStyle: "solid",
@@ -2193,12 +2224,11 @@ function registerPopover(loader, overrides) {
           description: "Default placement of the popover relative to the trigger, if there is enough space",
           defaultValueHint: "bottom",
           options: [
-            "bottom",
-            "bottom left",
-            "bottom right",
+            // Not allowing other placement options here because of https://github.com/adobe/react-spectrum/issues/6825
             "top",
-            "top left",
-            "top right"
+            "bottom",
+            "left",
+            "right"
           ]
         },
         resetClassName: {