@plasmicpkgs/react-aria 0.0.113 → 0.0.115

package/dist/contexts.d.ts

@@ -17,4 +17,4 @@ export declare const PlasmicListBoxContext: React.Context<{
     idManager: OptionsItemIdManager;
 } | undefined>;
 export declare const PlasmicSectionContext: React.Context<import("./registerSection").BaseSectionProps | undefined>;
-export declare const PlasmicInputContext: React.Context<import("./registerInput").BaseInputProps | undefined>;
+export declare const PlasmicInputContext: React.Context<(import("./registerInput").BaseInputProps & React.RefAttributes<HTMLInputElement>) | undefined>;

package/dist/react-aria.esm.js

@@ -1,7 +1,7 @@
 import { usePlasmicCanvasContext, usePlasmicCanvasComponentInfo, usePlasmicLink } from '@plasmicapp/host';
 import React, { useEffect, useState, useMemo, useCallback, forwardRef, useImperativeHandle, Component, useRef, useId } from 'react';
 import { mergeProps, useLink, useHover, useFocusRing, useButton, useFocusWithin } from 'react-aria';
-import { Button, Checkbox, Text, Label, CheckboxGroup, Input, ListBoxItem, ListBox, Section, Header, PopoverContext, Popover, ComboBox, ComboBoxStateContext, Dialog, ModalOverlay, Modal, DialogTrigger, Heading, TooltipContext, OverlayArrow, Radio, RadioGroup, Select, SelectStateContext, SelectValue, SliderOutput, SliderThumb, Slider, SliderTrack, Switch, TextArea, TextField, Provider, TooltipTriggerStateContext, Tooltip } from 'react-aria-components';
+import { Button, Checkbox, Text, Label, CheckboxGroup, useContextProps, InputContext, ListBoxItem, ListBox, Section, Header, PopoverContext, Popover, ComboBox, ComboBoxStateContext, Dialog, ModalOverlay, Modal, DialogTrigger, Heading, TooltipContext, OverlayArrow, Radio, RadioGroup, Select, SelectStateContext, SelectValue, SliderOutput, SliderThumb, Slider, SliderTrack, Switch, TextAreaContext, TextField, Provider, TooltipTriggerStateContext, Tooltip } from 'react-aria-components';
 import registerComponent from '@plasmicapp/host/registerComponent';
 import { mergeProps as mergeProps$1 } from '@react-aria/utils';
 import flattenChildren from 'react-keyed-flatten-children';
@@ -26,6 +26,33 @@ var __spreadValues$s = (a, b) => {
   return a;
 };
 var __spreadProps$n = (a, b) => __defProps$n(a, __getOwnPropDescs$n(b));
+var __objRest$o = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$s.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$s)
+    for (var prop of __getOwnPropSymbols$s(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$s.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function useIsOpen({
+  triggerSlotName,
+  isOpen,
+  __plasmic_selection_prop__
+}) {
+  var _a, _b;
+  const canvasContext = usePlasmicCanvasContext();
+  const { isSelected, selectedSlotName } = (_b = (_a = usePlasmicCanvasComponentInfo) == null ? void 0 : _a({ __plasmic_selection_prop__ })) != null ? _b : {};
+  if (!canvasContext) {
+    return isOpen;
+  }
+  const isTriggerSlotSelected = isDefined(selectedSlotName) && selectedSlotName === triggerSlotName;
+  const isAutoOpenedBySelection = isSelected && !isTriggerSlotSelected;
+  return Boolean(isAutoOpenedBySelection || isOpen);
+}
 function useAutoOpen({
   props,
   open,
@@ -84,6 +111,14 @@ function extractPlasmicDataProps(props) {
 function isDefined(thing) {
   return thing !== void 0 && thing !== null;
 }
+function filterHoverProps(props) {
+  const _a = props, otherProps = __objRest$o(_a, [
+    "onHoverStart",
+    "onHoverChange",
+    "onHoverEnd"
+  ]);
+  return otherProps;
+}
 
 var __defProp$r = Object.defineProperty;
 var __getOwnPropSymbols$r = Object.getOwnPropertySymbols;
@@ -1525,14 +1560,14 @@ const inputHelpers$1 = {
     }
   }
 };
-function BaseInput(props) {
+function BaseInput_(props, ref) {
   const _a = props, {
     plasmicUpdateVariant,
     setControlContextData,
     autoComplete,
     value,
     className
-  } = _a, rest = __objRest$i(_a, [
+  } = _a, restProps = __objRest$i(_a, [
     "plasmicUpdateVariant",
     "setControlContextData",
     "autoComplete",
@@ -1541,33 +1576,55 @@ function BaseInput(props) {
   ]);
   const textFieldContext = React.useContext(PlasmicTextFieldContext);
   const context = React.useContext(PlasmicInputContext);
+  const [inputContextProps, inputRef] = useContextProps(
+    restProps,
+    ref,
+    InputContext
+  );
+  const { hoverProps, isHovered } = useHover(props);
+  const { isFocused, isFocusVisible, focusProps } = useFocusRing({
+    isTextInput: true,
+    autoFocus: inputContextProps.autoFocus
+  });
+  const mergedProps = mergeProps(
+    filterHoverProps(inputContextProps),
+    focusProps,
+    hoverProps,
+    {
+      style: COMMON_STYLES,
+      value: (context == null ? void 0 : context.isUncontrolled) ? void 0 : value,
+      autoComplete: resolveAutoComplete(autoComplete),
+      className
+    }
+  );
+  const isDisabled = mergedProps.disabled || false;
+  const isInvalid = !!mergedProps["aria-invalid"] && mergedProps["aria-invalid"] !== "false";
   setControlContextData == null ? void 0 : setControlContextData({
     parent: textFieldContext
   });
-  const classNameProp = useCallback(
-    ({
-      isDisabled,
-      isFocusVisible,
-      isFocused,
-      isHovered
-    }) => {
-      plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
+  useEffect(() => {
+    if (plasmicUpdateVariant) {
+      plasmicUpdateVariant({
         disabled: isDisabled,
         focused: isFocused,
         focusVisible: isFocusVisible,
         hovered: isHovered
       });
-      return className != null ? className : "";
-    },
-    [className, plasmicUpdateVariant]
+    }
+  }, [isFocused, isFocusVisible, isHovered, isDisabled, plasmicUpdateVariant]);
+  return /* @__PURE__ */ React.createElement(
+    "input",
+    __spreadProps$g(__spreadValues$k({}, mergedProps), {
+      ref: inputRef,
+      "data-focused": isFocused || void 0,
+      "data-disabled": isDisabled || void 0,
+      "data-hovered": isHovered || void 0,
+      "data-focus-visible": isFocusVisible || void 0,
+      "data-invalid": isInvalid || void 0
+    })
   );
-  const mergedProps = mergeProps(rest, {
-    value: (context == null ? void 0 : context.isUncontrolled) ? void 0 : value,
-    autoComplete: resolveAutoComplete(autoComplete),
-    className: classNameProp
-  });
-  return /* @__PURE__ */ React.createElement(Input, __spreadProps$g(__spreadValues$k({}, mergedProps), { style: COMMON_STYLES }));
 }
+const BaseInput = React.forwardRef(BaseInput_);
 const INPUT_COMPONENT_NAME = makeComponentName("input");
 function registerInput(loader, overrides) {
   registerComponentHelper(
@@ -2630,7 +2687,6 @@ var __objRest$c = (source, exclude) => {
 };
 const BaseModal = forwardRef(
   function BaseModalInner(props, ref) {
-    var _b, _c, _d;
     const _a = props, {
       children,
       modalOverlayClass,
@@ -2638,7 +2694,9 @@ const BaseModal = forwardRef(
       isOpen,
       resetClassName,
       setControlContextData,
-      isDismissable
+      isDismissable,
+      defaultOpen,
+      __plasmic_selection_prop__
     } = _a, rest = __objRest$c(_a, [
       "children",
       "modalOverlayClass",
@@ -2646,22 +2704,24 @@ const BaseModal = forwardRef(
       "isOpen",
       "resetClassName",
       "setControlContextData",
-      "isDismissable"
+      "isDismissable",
+      "defaultOpen",
+      "__plasmic_selection_prop__"
     ]);
     const canvasCtx = usePlasmicCanvasContext();
     const isEditMode = canvasCtx && canvasCtx.interactive === false;
-    const isSelected = (_d = (_c = (_b = usePlasmicCanvasComponentInfo) == null ? void 0 : _b(props)) == null ? void 0 : _c.isSelected) != null ? _d : false;
     const contextProps = React.useContext(PlasmicDialogTriggerContext);
     const isStandalone = !contextProps;
+    const isOpen2 = useIsOpen({ isOpen, __plasmic_selection_prop__ });
     const mergedProps = mergeProps(rest, {
-      isOpen: isStandalone ? isSelected || isOpen : contextProps.isOpen,
-      /*
-              isDismissable on canvas (non-interactive mode) causes the following two issues:
-              1. Clicking anywhere inside the modal dismisses it
-              2. If the modal is auto-opened due to selection in outline tab, the modal stays open despite issue #1, but the text elements inside the modal are no longer selectable, and therefore the text or headings inside the modal are not editable.
-      
-              To fix the above issue, we set an interim isDismissable state to false in edit mode, because it only matters in interactive mode.
-            */
+      // Since open/defaultOpen props are hidden when the modal is inside dialogTrigger, we also unset them here.
+      isOpen: isStandalone ? isOpen2 : void 0,
+      defaultOpen: isStandalone ? defaultOpen : void 0,
+      // isDismissable on canvas (non-interactive mode) causes the following two issues:
+      // 1. Clicking anywhere inside the modal dismisses it
+      // 2. If the modal is auto-opened due to selection in outline tab, the modal stays open despite issue #1, but the text elements inside the modal are no longer selectable, and therefore the text or headings inside the modal are not editable.
+      //
+      // To fix the above issue, we set an interim isDismissable state to false in edit mode, because it only matters in interactive mode.
       isDismissable: isEditMode ? false : isDismissable
     });
     setControlContextData == null ? void 0 : setControlContextData({
@@ -2767,6 +2827,7 @@ function registerModal(loader, overrides) {
           type: "boolean",
           editOnly: true,
           uncontrolledProp: "defaultOpen",
+          // standalone Modals should default to open so that they are visible when inserted
           defaultValueHint: true,
           defaultValue: true,
           hidden: hasParent
@@ -2845,12 +2906,14 @@ function TriggerWrapper$1({ children, className }) {
   return /* @__PURE__ */ React.createElement("div", __spreadValues$d({}, mergedProps), children);
 }
 function BaseDialogTrigger(props) {
-  var _b, _c;
-  const _a = props, { trigger, dialog, isOpen, className } = _a, rest = __objRest$b(_a, ["trigger", "dialog", "isOpen", "className"]);
-  const { isSelected, selectedSlotName } = (_c = (_b = usePlasmicCanvasComponentInfo) == null ? void 0 : _b(props)) != null ? _c : {};
-  const isAutoOpen = selectedSlotName !== "trigger" && isSelected;
+  const _a = props, { trigger, dialog, isOpen, className, __plasmic_selection_prop__ } = _a, rest = __objRest$b(_a, ["trigger", "dialog", "isOpen", "className", "__plasmic_selection_prop__"]);
+  const isOpen2 = useIsOpen({
+    triggerSlotName: "trigger",
+    isOpen,
+    __plasmic_selection_prop__
+  });
   const mergedProps = __spreadProps$b(__spreadValues$d({}, rest), {
-    isOpen: isAutoOpen || isOpen
+    isOpen: isOpen2
   });
   return /* @__PURE__ */ React.createElement(PlasmicDialogTriggerContext.Provider, { value: mergedProps }, /* @__PURE__ */ React.createElement(DialogTrigger, __spreadValues$d({}, mergedProps), trigger && /* @__PURE__ */ React.createElement(TriggerWrapper$1, { className }, trigger), dialog));
 }
@@ -4603,34 +4666,64 @@ const inputHelpers = {
     }
   }
 };
-function BaseTextArea(props) {
-  const _a = props, { className, plasmicUpdateVariant, setControlContextData } = _a, rest = __objRest$2(_a, ["className", "plasmicUpdateVariant", "setControlContextData"]);
+function BaseTextArea_(props, ref) {
+  const _a = props, {
+    className,
+    plasmicUpdateVariant,
+    setControlContextData
+  } = _a, restProps = __objRest$2(_a, [
+    "className",
+    "plasmicUpdateVariant",
+    "setControlContextData"
+  ]);
   const textFieldContext = React.useContext(PlasmicTextFieldContext);
+  const [textAreaContextProps, textAreaRef] = useContextProps(
+    restProps,
+    ref,
+    TextAreaContext
+  );
+  const { hoverProps, isHovered } = useHover(textAreaContextProps);
+  const { isFocused, isFocusVisible, focusProps } = useFocusRing({
+    isTextInput: true,
+    autoFocus: textAreaContextProps.autoFocus
+  });
+  const mergedProps = mergeProps(
+    filterHoverProps(textAreaContextProps),
+    focusProps,
+    hoverProps,
+    {
+      style: COMMON_STYLES,
+      className
+    }
+  );
+  const isDisabled = mergedProps.disabled || false;
+  const isInvalid = !!mergedProps["aria-invalid"] && mergedProps["aria-invalid"] !== "false";
   setControlContextData == null ? void 0 : setControlContextData({
     parent: textFieldContext
   });
-  const classNameProp = useCallback(
-    ({
-      isDisabled,
-      isFocusVisible,
-      isFocused,
-      isHovered
-    }) => {
-      plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
+  useEffect(() => {
+    if (plasmicUpdateVariant) {
+      plasmicUpdateVariant({
         disabled: isDisabled,
         focused: isFocused,
         focusVisible: isFocusVisible,
         hovered: isHovered
       });
-      return className != null ? className : "";
-    },
-    [className, plasmicUpdateVariant]
+    }
+  }, [isFocused, isFocusVisible, isHovered, isDisabled, plasmicUpdateVariant]);
+  return /* @__PURE__ */ React.createElement(
+    "textarea",
+    __spreadProps$2(__spreadValues$2({}, mergedProps), {
+      ref: textAreaRef,
+      "data-focused": isFocused || void 0,
+      "data-disabled": isDisabled || void 0,
+      "data-hovered": isHovered || void 0,
+      "data-focus-visible": isFocusVisible || void 0,
+      "data-invalid": isInvalid || void 0
+    })
   );
-  const mergedProps = mergeProps(rest, {
-    className: classNameProp
-  });
-  return /* @__PURE__ */ React.createElement(TextArea, __spreadProps$2(__spreadValues$2({}, mergedProps), { style: COMMON_STYLES }));
 }
+const BaseTextArea = React.forwardRef(BaseTextArea_);
 function registerTextArea(loader, overrides) {
   registerComponentHelper(
     loader,
@@ -4916,7 +5009,6 @@ function UncontrolledBaseTooltip(_a) {
   );
 }
 function ControlledBaseTooltip(props) {
-  var _a, _b;
   const {
     children,
     isDisabled = false,
@@ -4933,11 +5025,14 @@ function ControlledBaseTooltip(props) {
     className,
     onOpenChange = () => {
     },
-    plasmicUpdateVariant
+    plasmicUpdateVariant,
+    __plasmic_selection_prop__
   } = props;
-  const { isSelected, selectedSlotName } = (_b = (_a = usePlasmicCanvasComponentInfo) == null ? void 0 : _a(props)) != null ? _b : {};
-  const isSelectedOnCanvas = selectedSlotName !== "children" && isSelected;
-  const _isOpen = isSelectedOnCanvas || isOpen;
+  const isOpen2 = useIsOpen({
+    triggerSlotName: "children",
+    isOpen,
+    __plasmic_selection_prop__
+  });
   const ref = useRef(null);
   const tooltipId = useId();
   const state = useTooltipTriggerState(__spreadProps(__spreadValues({}, props), {
@@ -4948,7 +5043,7 @@ function ControlledBaseTooltip(props) {
     {
       ref,
       className,
-      tooltipId: _isOpen ? tooltipId : void 0,
+      tooltipId: isOpen2 ? tooltipId : void 0,
       isDisabled,
       onOpenChange,
       triggerOnFocusOnly: trigger === "focus"
@@ -4959,7 +5054,7 @@ function ControlledBaseTooltip(props) {
     {
       triggerRef: ref,
       id: tooltipId,
-      isOpen: _isOpen,
+      isOpen: isOpen2,
       offset,
       delay,
       closeDelay,