@plasmicpkgs/react-aria 0.0.67 → 0.0.69

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",
@@ -1401,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: {
@@ -1482,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",
@@ -1574,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) {
@@ -1617,7 +1623,7 @@ function BaseListBoxItem(props) {
     isFocusVisible,
     isSelected,
     isDisabled
-  }) => withObservedValues$9(
+  }) => withObservedValues$a(
     children,
     {
       hovered: isHovered,
@@ -1680,11 +1686,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) => {
@@ -1810,7 +1816,7 @@ var __objRest$e = (source, exclude) => {
 };
 const listboxHelpers = {
   states: {
-    selectedKey: {
+    selectedValue: {
       onChangeArgsToValue: (value) => {
         return Array.from(value)[0];
       }
@@ -2009,10 +2015,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).
@@ -2020,16 +2025,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,
@@ -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: {
@@ -2294,17 +2324,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
@@ -2317,7 +2347,7 @@ function registerComboBox(loader) {
       },
       onSelectionChange: {
         type: "eventHandler",
-        argTypes: [{ name: "selectedKey", type: "string" }]
+        argTypes: [{ name: "selectedValue", type: "string" }]
       },
       onOpenChange: {
         type: "eventHandler",
@@ -2403,7 +2433,7 @@ function registerComboBox(loader) {
       }
     }),
     states: {
-      selectedKey: {
+      selectedValue: {
         type: "writable",
         valueProp: "selectedKey",
         onChangeProp: "onSelectionChange",
@@ -3231,21 +3261,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
@@ -3346,7 +3376,7 @@ function registerSelect(loader) {
       }
     }),
     states: {
-      selectedKey: {
+      selectedValue: {
         type: "writable",
         valueProp: "selectedKey",
         onChangeProp: "onSelectionChange",