@plasmicpkgs/react-aria 0.0.35 → 0.0.37

package/dist/react-aria.js

@@ -86,6 +86,10 @@ const ARIA_COMPONENTS_INTERACTION_VARIANTS = {
   dragging: {
     cssSelector: "[data-dragging]",
     displayName: "Dragging"
+  },
+  selected: {
+    cssSelector: "[data-selected]",
+    displayName: "Selected"
   }
 };
 function ChangesObserver({
@@ -177,6 +181,9 @@ function extractPlasmicDataProps(props) {
 function withoutNils(array) {
   return array.filter((x) => x != null);
 }
+function isDefined(thing) {
+  return thing !== void 0 && thing !== null;
+}
 
 var __defProp$p = Object.defineProperty;
 var __defProps$c = Object.defineProperties;
@@ -257,7 +264,8 @@ function registerButton(loader, overrides) {
         borderWidth: "1px",
         borderStyle: "solid",
         borderColor: "black",
-        padding: "2px 10px"
+        padding: "2px 10px",
+        cursor: "pointer"
       },
       props: __spreadProps$c(__spreadValues$p({}, getCommonInputProps("button", [
         "isDisabled",
@@ -573,7 +581,10 @@ function registerText(loader, overrides) {
           }
         },
         slot: {
-          type: "string"
+          type: "choice",
+          options: ["label", "description"],
+          defaultValueHint: "label",
+          defaultValue: "label"
         }
       },
       trapsFocus: true
@@ -1180,6 +1191,22 @@ function registerInput(loader, overrides) {
   );
 }
 
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError(_) {
+    return { hasError: true };
+  }
+  render() {
+    if (this.state.hasError) {
+      return this.props.fallback;
+    }
+    return this.props.children;
+  }
+}
+
 var __defProp$i = Object.defineProperty;
 var __defProps$8 = Object.defineProperties;
 var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
@@ -1202,7 +1229,8 @@ var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
 function BaseListBoxItem(props) {
   const contextProps = React__default.default.useContext(PlasmicItemContext);
   const mergedProps = utils.mergeProps(contextProps, props);
-  return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.ListBoxItem, __spreadProps$8(__spreadValues$i({}, mergedProps), { textValue: contextProps.label }), mergedProps.children);
+  const listboxItem = /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.ListBoxItem, __spreadProps$8(__spreadValues$i({}, mergedProps), { textValue: contextProps == null ? void 0 : contextProps.label }), mergedProps.children);
+  return /* @__PURE__ */ React__default.default.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.ListBox, null, listboxItem) }, listboxItem);
 }
 const makeDefaultListBoxItemChildren = (label, description) => ({
   type: "vbox",
@@ -1512,20 +1540,37 @@ var __objRest$b = (source, exclude) => {
     }
   return target;
 };
+const SHOULD_FLIP_INSIDE_SELECT = false;
 function BasePopover(props) {
-  const _a = props, { resetClassName } = _a, restProps = __objRest$b(_a, ["resetClassName"]);
+  const _a = props, { resetClassName, setControlContextData } = _a, restProps = __objRest$b(_a, ["resetClassName", "setControlContextData"]);
   const isStandalone = !React__default.default.useContext(reactAriaComponents.PopoverContext);
   const contextProps = React__default.default.useContext(PlasmicPopoverContext);
-  const mergedProps = utils.mergeProps(contextProps, restProps, {
-    className: `${resetClassName}`
-  });
+  const isInsideSelect = !!React__default.default.useContext(reactAriaComponents.SelectContext);
+  const mergedProps = utils.mergeProps(
+    contextProps,
+    restProps,
+    {
+      className: `${resetClassName}`
+    },
+    isInsideSelect && !isDefined(restProps.shouldFlip) ? { shouldFlip: SHOULD_FLIP_INSIDE_SELECT } : void 0
+  );
+  const isEditMode = !!host.usePlasmicCanvasContext();
   const triggerRef = React__default.default.useRef(null);
   const standaloneProps = isStandalone ? {
     triggerRef,
     isNonModal: true,
     isOpen: 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$e(__spreadValues$e({}, mergedProps), standaloneProps)));
+  setControlContextData == null ? void 0 : setControlContextData({
+    isStandalone,
+    isInsideSelect
+  });
+  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$e(__spreadValues$e({
+      isNonModal: isEditMode ? true : void 0
+    }, mergedProps), standaloneProps)
+  ));
 }
 const POPOVER_COMPONENT_NAME = makeComponentName("popover");
 const POPOVER_ARROW_IMG = {
@@ -1596,9 +1641,15 @@ function registerPopover(loader, overrides) {
           description: "Additional offset applied vertically between the popover and its trigger",
           defaultValueHint: 0
         },
+        shouldFlip: {
+          type: "boolean",
+          description: "Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely.",
+          defaultValueHint: (_ps, ctx) => (ctx == null ? void 0 : ctx.isInsideSelect) ? SHOULD_FLIP_INSIDE_SELECT : true
+        },
         placement: {
           type: "choice",
           description: "Default placement of the popover relative to the trigger, if there is enough space",
+          defaultValueHint: "bottom",
           options: [
             "bottom",
             "bottom left",
@@ -2346,22 +2397,6 @@ function registerForm(loader, overrides) {
   );
 }
 
-class ErrorBoundary extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { hasError: false };
-  }
-  static getDerivedStateFromError(_) {
-    return { hasError: true };
-  }
-  render() {
-    if (this.state.hasError) {
-      return this.props.fallback;
-    }
-    return this.props.children;
-  }
-}
-
 var __defProp$9 = Object.defineProperty;
 var __defProps$4 = Object.defineProperties;
 var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
@@ -2397,28 +2432,25 @@ const RADIO_INTERACTION_VARIANTS = [
   "hovered",
   "pressed",
   "focused",
-  "focusVisible"
+  "focusVisible",
+  "selected"
 ];
 const { interactionVariants: interactionVariants$4, withObservedValues: withObservedValues$3 } = pickAriaComponentVariants(
   RADIO_INTERACTION_VARIANTS
 );
 function BaseRadio(props) {
-  const _a = props, { children, updateInteractionVariant, setControlContextData } = _a, rest = __objRest$7(_a, ["children", "updateInteractionVariant", "setControlContextData"]);
-  const contextProps = React__default.default.useContext(PlasmicRadioGroupContext);
-  const radio = /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Radio, __spreadValues$9({}, rest), ({ isHovered, isPressed, isFocused, isFocusVisible }) => withObservedValues$3(
+  const _a = props, { children, updateInteractionVariant } = _a, rest = __objRest$7(_a, ["children", "updateInteractionVariant"]);
+  const radio = /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Radio, __spreadValues$9({}, rest), ({ isHovered, isPressed, isFocused, isFocusVisible, isSelected }) => withObservedValues$3(
     children,
     {
       hovered: isHovered,
       pressed: isPressed,
       focused: isFocused,
-      focusVisible: isFocusVisible
+      focusVisible: isFocusVisible,
+      selected: isSelected
     },
     updateInteractionVariant
   ));
-  const isStandalone = !contextProps;
-  setControlContextData == null ? void 0 : setControlContextData({
-    isStandalone
-  });
   return /* @__PURE__ */ React__default.default.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.RadioGroup, null, radio) }, radio);
 }
 const makeDefaultRadioChildren = (label) => ({
@@ -2476,20 +2508,8 @@ function registerRadio(loader, overrides) {
         value: {
           type: "string",
           description: "The value of the input element, used when submitting an HTML form."
-        },
-        onSelectionChange: {
-          type: "eventHandler",
-          argTypes: [{ name: "isSelected", type: "boolean" }]
         }
       }),
-      states: {
-        isSelected: {
-          type: "readonly",
-          onChangeProp: "onSelectionChange",
-          variableType: "boolean",
-          hidden: (_ps, ctx) => !(ctx == null ? void 0 : ctx.isStandalone)
-        }
-      },
       trapsFocus: true
     },
     overrides
@@ -2676,7 +2696,7 @@ function BaseSelect(props) {
     "aria-label": ariaLabel
   } = props;
   const { options } = useStrictOptions(props);
-  const canvas = host.usePlasmicCanvasContext();
+  const isEditMode = !!host.usePlasmicCanvasContext();
   const disabledKeys = flattenOptions(options).filter((op) => op.isDisabled).map((op) => op.id);
   return /* @__PURE__ */ React__default.default.createElement(
     reactAriaComponents.Select,
@@ -2690,7 +2710,7 @@ function BaseSelect(props) {
       style,
       name,
       "aria-label": ariaLabel
-    }, previewOpen && canvas ? { isOpen: previewOpen } : void 0), extractPlasmicDataProps(props)),
+    }, isEditMode ? { isOpen: previewOpen } : void 0), extractPlasmicDataProps(props)),
     /* @__PURE__ */ React__default.default.createElement(
       PlasmicListBoxContext.Provider,
       {