@plasmicpkgs/react-aria 0.0.114 → 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,18 @@ 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,
@@ -99,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;
@@ -1540,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",
@@ -1556,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(
@@ -4624,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,