@plasmicpkgs/react-aria 0.0.66 → 0.0.68

package/dist/react-aria.esm.js

@@ -450,6 +450,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)"
@@ -529,12 +535,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.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.createElement(Button, __spreadValues$q({ type, ref }, rest), ({ isHovered, isPressed, isFocused, isFocusVisible, isDisabled }) => withObservedValues$c(
+    return /* @__PURE__ */ React.createElement(Button, __spreadValues$q({ type, ref }, rest), ({ isHovered, isPressed, isFocused, isFocusVisible, isDisabled }) => withObservedValues$d(
       children,
       {
         hovered: isHovered,
@@ -557,7 +563,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",
@@ -658,7 +664,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.useContext(PlasmicCheckboxGroupContext);
@@ -674,7 +680,7 @@ function BaseCheckbox(props) {
     isIndeterminate,
     isSelected,
     isReadOnly
-  }) => withObservedValues$b(
+  }) => withObservedValues$c(
     children,
     {
       hovered: isHovered,
@@ -744,7 +750,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",
@@ -1169,12 +1175,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.createElement(PlasmicCheckboxGroupContext.Provider, { value: rest }, /* @__PURE__ */ React.createElement(CheckboxGroup, __spreadValues$k({}, rest), ({ isDisabled, isReadOnly }) => withObservedValues$a(
+  return /* @__PURE__ */ React.createElement(PlasmicCheckboxGroupContext.Provider, { value: rest }, /* @__PURE__ */ React.createElement(CheckboxGroup, __spreadValues$k({}, rest), ({ isDisabled, isReadOnly }) => withObservedValues$b(
     children,
     {
       disabled: isDisabled,
@@ -1202,7 +1208,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",
@@ -1357,6 +1363,7 @@ class ListBoxItemIdManager {
   }
   subscribe(observer) {
     this._observers.add(observer);
+    observer(this.ids);
   }
   // Notify all observers about an event.
   notify() {
@@ -1400,7 +1407,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: {
@@ -1481,7 +1488,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",
@@ -1573,7 +1580,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) {
@@ -1616,7 +1623,7 @@ function BaseListBoxItem(props) {
     isFocusVisible,
     isSelected,
     isDisabled
-  }) => withObservedValues$9(
+  }) => withObservedValues$a(
     children,
     {
       hovered: isHovered,
@@ -1679,7 +1686,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",
@@ -1842,7 +1849,6 @@ function BaseListBox(props) {
     []
   );
   useEffect(() => {
-    console.log("sarah useEffect", { setControlContextData, ids });
     setControlContextData == null ? void 0 : setControlContextData({
       itemIds: ids,
       isStandalone
@@ -2070,14 +2076,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.useContext(PopoverContext);
   const context = React.useContext(PlasmicPopoverContext);
   const triggerRef = React.useRef(null);
   const isEditMode = !!usePlasmicCanvasContext();
-  const mergedProps = mergeProps$1(
+  const _b = mergeProps$1(
     {
       isOpen: context == null ? void 0 : context.isOpen,
       shouldFlip: context == null ? void 0 : context.defaultShouldFlip
@@ -2100,11 +2121,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.createElement(React.Fragment, null, isStandalone && /* @__PURE__ */ React.createElement("div", { ref: triggerRef }), /* @__PURE__ */ React.createElement(Popover, __spreadValues$f({}, mergedProps)));
+  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
+  )));
 }
 const POPOVER_COMPONENT_NAME = makeComponentName("popover");
 const POPOVER_ARROW_IMG = {
@@ -2128,6 +2158,7 @@ function registerPopover(loader, overrides) {
       displayName: "Aria Popover",
       importPath: "@plasmicpkgs/react-aria/skinny/registerPopover",
       importName: "BasePopover",
+      variants: variants$a,
       defaultStyles: {
         borderWidth: "1px",
         borderStyle: "solid",
@@ -2185,12 +2216,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: {