@plasmicpkgs/react-aria 0.0.67 → 0.0.69

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",
@@ -1409,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: {
@@ -1490,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",
@@ -1582,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) {
@@ -1625,7 +1631,7 @@ function BaseListBoxItem(props) {
     isFocusVisible,
     isSelected,
     isDisabled
-  }) => withObservedValues$9(
+  }) => withObservedValues$a(
     children,
     {
       hovered: isHovered,
@@ -1688,11 +1694,11 @@ 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",
-          description: "A unique key for tracking the selected item in state",
+          description: "A unique value for tracking the selected item in state",
           required: true,
           displayName: "Value",
           validator: (_value, _props, ctx) => {
@@ -1818,7 +1824,7 @@ var __objRest$e = (source, exclude) => {
 };
 const listboxHelpers = {
   states: {
-    selectedKey: {
+    selectedValue: {
       onChangeArgsToValue: (value) => {
         return Array.from(value)[0];
       }
@@ -2017,10 +2023,9 @@ function registerListBox(loader, overrides) {
         },
         selectedKeys: {
           type: "choice",
-          description: "The selected keys of the listbox",
           editOnly: true,
           uncontrolledProp: "defaultSelectedKeys",
-          displayName: "Initial selected key",
+          displayName: "Initial selected item",
           options: (_props, ctx) => (ctx == null ? void 0 : ctx.itemIds) ? Array.from(ctx.itemIds) : [],
           hidden: (props, ctx) => !(ctx == null ? void 0 : ctx.isStandalone) || props.selectionMode === "none",
           // We do not support multiple selections yet (Because React Aria select and combobox only support single selections).
@@ -2028,16 +2033,17 @@ function registerListBox(loader, overrides) {
         },
         onSelectionChange: {
           type: "eventHandler",
-          argTypes: [{ name: "itemIds", type: "object" }]
+          argTypes: [{ name: "selectedValues", type: "object" }]
         }
       },
       states: {
-        selectedKey: __spreadValues$g({
+        selectedValue: __spreadValues$g({
           type: "writable",
           valueProp: "selectedKeys",
+          hidden: (props, ctx) => !(ctx == null ? void 0 : ctx.isStandalone) || props.selectionMode === "none",
           onChangeProp: "onSelectionChange",
           variableType: "text"
-        }, listboxHelpers.states.selectedKey)
+        }, listboxHelpers.states.selectedValue)
       },
       componentHelpers: {
         helpers: listboxHelpers,
@@ -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: {
@@ -2302,17 +2332,17 @@ function registerComboBox(loader) {
     ])), {
       selectedKey: {
         type: "choice",
-        description: "The selected keys of the listbox",
         editOnly: true,
         uncontrolledProp: "defaultSelectedKey",
-        displayName: "Initial selected key",
+        displayName: "Initial selected item",
         options: (_props, ctx) => (ctx == null ? void 0 : ctx.itemIds) ? Array.from(ctx.itemIds) : [],
-        // React Aria ComboBox do not support multiple comboBoxions yet
+        // React Aria ComboBox do not support multiple selections yet
         multiSelect: false
       },
       disabledKeys: {
         type: "choice",
-        description: "The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.",
+        displayName: "Disabled values",
+        description: "The items that are disabled. These items cannot be selected, focused, or otherwise interacted with.",
         options: (_props, ctx) => (ctx == null ? void 0 : ctx.itemIds) ? Array.from(ctx.itemIds) : [],
         multiSelect: true,
         advanced: true
@@ -2325,7 +2355,7 @@ function registerComboBox(loader) {
       },
       onSelectionChange: {
         type: "eventHandler",
-        argTypes: [{ name: "selectedKey", type: "string" }]
+        argTypes: [{ name: "selectedValue", type: "string" }]
       },
       onOpenChange: {
         type: "eventHandler",
@@ -2411,7 +2441,7 @@ function registerComboBox(loader) {
       }
     }),
     states: {
-      selectedKey: {
+      selectedValue: {
         type: "writable",
         valueProp: "selectedKey",
         onChangeProp: "onSelectionChange",
@@ -3239,21 +3269,21 @@ function registerSelect(loader) {
     ])), {
       selectedKey: {
         type: "choice",
-        description: "The selected keys of the listbox",
         editOnly: true,
         uncontrolledProp: "defaultSelectedKey",
-        displayName: "Initial selected key",
+        displayName: "Initial selected item",
         options: (_props, ctx) => (ctx == null ? void 0 : ctx.itemIds) ? Array.from(ctx.itemIds) : [],
         // React Aria Select do not support multiple selections yet
         multiSelect: false
       },
       onSelectionChange: {
         type: "eventHandler",
-        argTypes: [{ name: "value", type: "string" }]
+        argTypes: [{ name: "selectedValue", type: "string" }]
       },
       disabledKeys: {
         type: "choice",
-        description: "The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.",
+        displayName: "Disabled values",
+        description: "The items that are disabled. These items cannot be selected, focused, or otherwise interacted with.",
         options: (_props, ctx) => (ctx == null ? void 0 : ctx.itemIds) ? Array.from(ctx.itemIds) : [],
         multiSelect: true,
         advanced: true
@@ -3354,7 +3384,7 @@ function registerSelect(loader) {
       }
     }),
     states: {
-      selectedKey: {
+      selectedValue: {
         type: "writable",
         valueProp: "selectedKey",
         onChangeProp: "onSelectionChange",