@plasmicpkgs/react-aria 0.0.35 → 0.0.37

package/dist/contexts.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import type { StrictItemType } from "./option-utils";
 import type { BaseListBoxProps } from "./registerListBox";
 export declare const PlasmicCheckboxGroupContext: React.Context<import("react-aria-components").CheckboxGroupProps | undefined>;
 export declare const PlasmicRadioGroupContext: React.Context<(import("react-aria-components").RadioGroupProps & React.RefAttributes<HTMLDivElement>) | undefined>;
@@ -7,7 +8,7 @@ export declare const PlasmicSliderContext: React.Context<import("./registerSlide
 export declare const PlasmicLabelContext: React.Context<(import("react-aria-components").LabelProps & React.RefAttributes<HTMLLabelElement>) | undefined>;
 export declare const PlasmicListBoxContext: React.Context<BaseListBoxProps | undefined>;
 export declare const PlasmicPopoverContext: React.Context<import("./registerPopover").BasePopoverProps | undefined>;
-export declare const PlasmicItemContext: React.Context<(import("react-aria-components").ListBoxItemProps<object> & React.RefAttributes<HTMLDivElement>) | undefined>;
+export declare const PlasmicItemContext: React.Context<StrictItemType | undefined>;
 export declare const PlasmicSectionContext: React.Context<import("./registerSection").BaseSectionProps | undefined>;
 export declare const PlasmicHeaderContext: React.Context<(React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>) | undefined>;
 export declare const PlasmicInputContext: React.Context<import("./registerInput").BaseInputProps | undefined>;

package/dist/interaction-variant-utils.d.ts

@@ -21,6 +21,10 @@ declare const ARIA_COMPONENTS_INTERACTION_VARIANTS: {
         cssSelector: string;
         displayName: string;
     };
+    selected: {
+        cssSelector: string;
+        displayName: string;
+    };
 };
 type AriaInteractionVariant = keyof typeof ARIA_COMPONENTS_INTERACTION_VARIANTS;
 type CodeComponentInteractionVariantsMeta = NonNullable<CodeComponentMeta<unknown>["interactionVariants"]>;

package/dist/react-aria.esm.js

@@ -1,5 +1,5 @@
-import React, { forwardRef, useImperativeHandle, Component, useMemo, useRef, useEffect } from 'react';
-import { Button, Label, Checkbox, Text, FieldError, CheckboxGroup, Input, ListBoxItem, Header, Section, Collection, ListBox, PopoverContext, Popover, ComboBox, ComboBoxStateContext, Heading, ModalOverlay, Modal, Dialog, DialogTrigger, Form, Radio, RadioGroup, Select, SelectValue, SliderOutput, SliderThumb, Slider, SliderTrack, Switch, TextArea, TextField } from 'react-aria-components';
+import React, { Component, forwardRef, useImperativeHandle, useMemo, useRef, useEffect } from 'react';
+import { Button, Label, Checkbox, Text, FieldError, CheckboxGroup, Input, ListBoxItem, ListBox, Header, Section, Collection, PopoverContext, SelectContext, Popover, ComboBox, ComboBoxStateContext, Heading, ModalOverlay, Modal, Dialog, DialogTrigger, Form, Radio, RadioGroup, Select, SelectValue, SliderOutput, SliderThumb, Slider, SliderTrack, Switch, TextArea, TextField } from 'react-aria-components';
 import registerComponent from '@plasmicapp/host/registerComponent';
 import { useFilter } from '@react-aria/i18n';
 import { mergeProps } from '@react-aria/utils';
@@ -78,6 +78,10 @@ const ARIA_COMPONENTS_INTERACTION_VARIANTS = {
   dragging: {
     cssSelector: "[data-dragging]",
     displayName: "Dragging"
+  },
+  selected: {
+    cssSelector: "[data-selected]",
+    displayName: "Selected"
   }
 };
 function ChangesObserver({
@@ -169,6 +173,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;
@@ -249,7 +256,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",
@@ -565,7 +573,10 @@ function registerText(loader, overrides) {
           }
         },
         slot: {
-          type: "string"
+          type: "choice",
+          options: ["label", "description"],
+          defaultValueHint: "label",
+          defaultValue: "label"
         }
       },
       trapsFocus: true
@@ -1172,6 +1183,22 @@ function registerInput(loader, overrides) {
   );
 }
 
+class ErrorBoundary extends 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;
@@ -1194,7 +1221,8 @@ var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
 function BaseListBoxItem(props) {
   const contextProps = React.useContext(PlasmicItemContext);
   const mergedProps = mergeProps(contextProps, props);
-  return /* @__PURE__ */ React.createElement(ListBoxItem, __spreadProps$8(__spreadValues$i({}, mergedProps), { textValue: contextProps.label }), mergedProps.children);
+  const listboxItem = /* @__PURE__ */ React.createElement(ListBoxItem, __spreadProps$8(__spreadValues$i({}, mergedProps), { textValue: contextProps == null ? void 0 : contextProps.label }), mergedProps.children);
+  return /* @__PURE__ */ React.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React.createElement(ListBox, null, listboxItem) }, listboxItem);
 }
 const makeDefaultListBoxItemChildren = (label, description) => ({
   type: "vbox",
@@ -1504,20 +1532,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.useContext(PopoverContext);
   const contextProps = React.useContext(PlasmicPopoverContext);
-  const mergedProps = mergeProps(contextProps, restProps, {
-    className: `${resetClassName}`
-  });
+  const isInsideSelect = !!React.useContext(SelectContext);
+  const mergedProps = mergeProps(
+    contextProps,
+    restProps,
+    {
+      className: `${resetClassName}`
+    },
+    isInsideSelect && !isDefined(restProps.shouldFlip) ? { shouldFlip: SHOULD_FLIP_INSIDE_SELECT } : void 0
+  );
+  const isEditMode = !!usePlasmicCanvasContext();
   const triggerRef = React.useRef(null);
   const standaloneProps = isStandalone ? {
     triggerRef,
     isNonModal: true,
     isOpen: true
   } : {};
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, isStandalone && /* @__PURE__ */ React.createElement("div", { ref: triggerRef }), /* @__PURE__ */ React.createElement(Popover, __spreadValues$e(__spreadValues$e({}, mergedProps), standaloneProps)));
+  setControlContextData == null ? void 0 : setControlContextData({
+    isStandalone,
+    isInsideSelect
+  });
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, isStandalone && /* @__PURE__ */ React.createElement("div", { ref: triggerRef }), /* @__PURE__ */ React.createElement(
+    Popover,
+    __spreadValues$e(__spreadValues$e({
+      isNonModal: isEditMode ? true : void 0
+    }, mergedProps), standaloneProps)
+  ));
 }
 const POPOVER_COMPONENT_NAME = makeComponentName("popover");
 const POPOVER_ARROW_IMG = {
@@ -1588,9 +1633,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",
@@ -2338,22 +2389,6 @@ function registerForm(loader, overrides) {
   );
 }
 
-class ErrorBoundary extends 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;
@@ -2389,28 +2424,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.useContext(PlasmicRadioGroupContext);
-  const radio = /* @__PURE__ */ React.createElement(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.createElement(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.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React.createElement(RadioGroup, null, radio) }, radio);
 }
 const makeDefaultRadioChildren = (label) => ({
@@ -2468,20 +2500,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
@@ -2668,7 +2688,7 @@ function BaseSelect(props) {
     "aria-label": ariaLabel
   } = props;
   const { options } = useStrictOptions(props);
-  const canvas = usePlasmicCanvasContext();
+  const isEditMode = !!usePlasmicCanvasContext();
   const disabledKeys = flattenOptions(options).filter((op) => op.isDisabled).map((op) => op.id);
   return /* @__PURE__ */ React.createElement(
     Select,
@@ -2682,7 +2702,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.createElement(
       PlasmicListBoxContext.Provider,
       {