@plasmicpkgs/react-aria 0.0.113 → 0.0.115

package/skinny/registerRadioGroup.esm.js

@@ -1,12 +1,12 @@
 import React, { useState, useMemo, useEffect } from 'react';
 import { RadioGroup } from 'react-aria-components';
-import { g as getCommonProps, C as COMMON_STYLES } from './common-ceebbaea.esm.js';
+import { g as getCommonProps, C as COMMON_STYLES } from './common-616eb178.esm.js';
 import { e as PlasmicRadioGroupContext } from './contexts-5cb81c2f.esm.js';
 import { O as OptionsItemIdManager } from './OptionsItemIdManager-832b8cfe.esm.js';
 import { DESCRIPTION_COMPONENT_NAME } from './registerDescription.esm.js';
 import { LABEL_COMPONENT_NAME } from './registerLabel.esm.js';
 import { registerRadio, makeDefaultRadioChildren } from './registerRadio.esm.js';
-import { a as makeChildComponentName, r as registerComponentHelper, m as makeComponentName } from './utils-5d1b4c6b.esm.js';
+import { b as makeChildComponentName, r as registerComponentHelper, m as makeComponentName } from './utils-fd88ad47.esm.js';
 import { p as pickAriaComponentVariants } from './variant-utils-4405ebb0.esm.js';
 import './registerText.esm.js';
 import '@plasmicapp/host';

package/skinny/registerRadioGroup.stories.cjs.js

@@ -7,8 +7,8 @@ var React = require('react');
 var registerRadio = require('./registerRadio.cjs.js');
 var registerRadioGroup = require('./registerRadioGroup.cjs.js');
 require('react-aria-components');
-require('./common-b3b54c72.cjs.js');
-require('./utils-7d000fa4.cjs.js');
+require('./common-45acb83c.cjs.js');
+require('./utils-fc1ddd7c.cjs.js');
 require('@plasmicapp/host');
 require('@plasmicapp/host/registerComponent');
 require('./contexts-6d0cb2b1.cjs.js');

package/skinny/registerRadioGroup.stories.esm.js

@@ -3,8 +3,8 @@ import React from 'react';
 import { BaseRadio } from './registerRadio.esm.js';
 import { BaseRadioGroup } from './registerRadioGroup.esm.js';
 import 'react-aria-components';
-import './common-ceebbaea.esm.js';
-import './utils-5d1b4c6b.esm.js';
+import './common-616eb178.esm.js';
+import './utils-fd88ad47.esm.js';
 import '@plasmicapp/host';
 import '@plasmicapp/host/registerComponent';
 import './contexts-5cb81c2f.esm.js';

package/skinny/registerSection.cjs.js

@@ -2,10 +2,10 @@
 
 require('react');
 require('react-aria-components');
-require('./common-b3b54c72.cjs.js');
+require('./common-45acb83c.cjs.js');
 require('./contexts-6d0cb2b1.cjs.js');
-var registerSection = require('./registerListBox-a99736df.cjs.js');
-require('./utils-7d000fa4.cjs.js');
+var registerSection = require('./registerListBox-040b0374.cjs.js');
+require('./utils-fc1ddd7c.cjs.js');
 require('./OptionsItemIdManager-a89a28b9.cjs.js');
 require('./registerListBoxItem.cjs.js');
 require('./registerDescription.cjs.js');

package/skinny/registerSection.esm.js

@@ -1,9 +1,9 @@
 import 'react';
 import 'react-aria-components';
-import './common-ceebbaea.esm.js';
+import './common-616eb178.esm.js';
 import './contexts-5cb81c2f.esm.js';
-export { a as BaseSection, r as registerSection } from './registerListBox-49626f55.esm.js';
-import './utils-5d1b4c6b.esm.js';
+export { a as BaseSection, r as registerSection } from './registerListBox-21dc99fa.esm.js';
+import './utils-fd88ad47.esm.js';
 import './OptionsItemIdManager-832b8cfe.esm.js';
 import './registerListBoxItem.esm.js';
 import './registerDescription.esm.js';

package/skinny/registerSelect.cjs.js

@@ -2,14 +2,14 @@
 
 var React = require('react');
 var reactAriaComponents = require('react-aria-components');
-var common = require('./common-b3b54c72.cjs.js');
+var common = require('./common-45acb83c.cjs.js');
 var contexts = require('./contexts-6d0cb2b1.cjs.js');
 var OptionsItemIdManager = require('./OptionsItemIdManager-a89a28b9.cjs.js');
 var registerButton = require('./registerButton.cjs.js');
 var registerLabel = require('./registerLabel.cjs.js');
-var registerSection = require('./registerListBox-a99736df.cjs.js');
+var registerSection = require('./registerListBox-040b0374.cjs.js');
 var registerPopover = require('./registerPopover.cjs.js');
-var utils = require('./utils-7d000fa4.cjs.js');
+var utils = require('./utils-fc1ddd7c.cjs.js');
 var variantUtils = require('./variant-utils-0ad70db8.cjs.js');
 require('@plasmicapp/host');
 require('react-aria');

package/skinny/registerSelect.esm.js

@@ -1,13 +1,13 @@
 import React, { useMemo, useEffect, useCallback } from 'react';
 import { SelectValue, Select, SelectStateContext } from 'react-aria-components';
-import { C as COMMON_STYLES, a as arrowDown, g as getCommonProps } from './common-ceebbaea.esm.js';
+import { C as COMMON_STYLES, a as arrowDown, g as getCommonProps } from './common-616eb178.esm.js';
 import { a as PlasmicPopoverTriggerContext, b as PlasmicListBoxContext } from './contexts-5cb81c2f.esm.js';
 import { O as OptionsItemIdManager } from './OptionsItemIdManager-832b8cfe.esm.js';
 import { BUTTON_COMPONENT_NAME } from './registerButton.esm.js';
 import { LABEL_COMPONENT_NAME } from './registerLabel.esm.js';
-import { L as LIST_BOX_COMPONENT_NAME } from './registerListBox-49626f55.esm.js';
+import { L as LIST_BOX_COMPONENT_NAME } from './registerListBox-21dc99fa.esm.js';
 import { POPOVER_COMPONENT_NAME } from './registerPopover.esm.js';
-import { e as extractPlasmicDataProps, r as registerComponentHelper, u as useAutoOpen, m as makeComponentName } from './utils-5d1b4c6b.esm.js';
+import { e as extractPlasmicDataProps, r as registerComponentHelper, u as useAutoOpen, m as makeComponentName } from './utils-fd88ad47.esm.js';
 import { p as pickAriaComponentVariants } from './variant-utils-4405ebb0.esm.js';
 import '@plasmicapp/host';
 import 'react-aria';

package/skinny/registerSelect.stories.cjs.js

@@ -6,14 +6,14 @@ var host = require('@plasmicapp/host');
 var test = require('@storybook/test');
 var React = require('react');
 var registerButton = require('./registerButton.cjs.js');
-var registerSection = require('./registerListBox-a99736df.cjs.js');
+var registerSection = require('./registerListBox-040b0374.cjs.js');
 var registerListBoxItem = require('./registerListBoxItem.cjs.js');
 var registerPopover = require('./registerPopover.cjs.js');
 var registerSelect = require('./registerSelect.cjs.js');
 require('react-aria');
 require('react-aria-components');
-require('./common-b3b54c72.cjs.js');
-require('./utils-7d000fa4.cjs.js');
+require('./common-45acb83c.cjs.js');
+require('./utils-fc1ddd7c.cjs.js');
 require('@plasmicapp/host/registerComponent');
 require('./variant-utils-0ad70db8.cjs.js');
 require('./contexts-6d0cb2b1.cjs.js');

package/skinny/registerSelect.stories.esm.js

@@ -2,14 +2,14 @@ import { PlasmicCanvasContext } from '@plasmicapp/host';
 import { fn, within, expect, userEvent, waitFor } from '@storybook/test';
 import React, { useState, useEffect } from 'react';
 import { BaseButton } from './registerButton.esm.js';
-import { B as BaseListBox } from './registerListBox-49626f55.esm.js';
+import { B as BaseListBox } from './registerListBox-21dc99fa.esm.js';
 import { BaseListBoxItem } from './registerListBoxItem.esm.js';
 import { BasePopover } from './registerPopover.esm.js';
 import { BaseSelect, BaseSelectValue } from './registerSelect.esm.js';
 import 'react-aria';
 import 'react-aria-components';
-import './common-ceebbaea.esm.js';
-import './utils-5d1b4c6b.esm.js';
+import './common-616eb178.esm.js';
+import './utils-fd88ad47.esm.js';
 import '@plasmicapp/host/registerComponent';
 import './variant-utils-4405ebb0.esm.js';
 import './contexts-5cb81c2f.esm.js';

package/skinny/registerSlider.cjs.js

@@ -2,13 +2,13 @@
 
 var React = require('react');
 var reactAriaComponents = require('react-aria-components');
-var common = require('./common-b3b54c72.cjs.js');
+var common = require('./common-45acb83c.cjs.js');
 var contexts = require('./contexts-6d0cb2b1.cjs.js');
 var registerLabel = require('./registerLabel.cjs.js');
 var registerSliderOutput = require('./registerSliderOutput.cjs.js');
 var registerSliderThumb = require('./registerSliderThumb.cjs.js');
 var registerSliderTrack = require('./registerSliderTrack.cjs.js');
-var utils = require('./utils-7d000fa4.cjs.js');
+var utils = require('./utils-fc1ddd7c.cjs.js');
 var variantUtils = require('./variant-utils-0ad70db8.cjs.js');
 require('react-keyed-flatten-children');
 require('@plasmicapp/host');

package/skinny/registerSlider.esm.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import { Slider } from 'react-aria-components';
-import { g as getCommonProps, C as COMMON_STYLES } from './common-ceebbaea.esm.js';
+import { g as getCommonProps, C as COMMON_STYLES } from './common-616eb178.esm.js';
 import { f as PlasmicSliderContext } from './contexts-5cb81c2f.esm.js';
 import { LABEL_COMPONENT_NAME } from './registerLabel.esm.js';
 import { registerSliderOutput } from './registerSliderOutput.esm.js';
 import { registerSliderThumb } from './registerSliderThumb.esm.js';
 import { registerSliderTrack } from './registerSliderTrack.esm.js';
-import { r as registerComponentHelper, m as makeComponentName } from './utils-5d1b4c6b.esm.js';
+import { r as registerComponentHelper, m as makeComponentName } from './utils-fd88ad47.esm.js';
 import { p as pickAriaComponentVariants } from './variant-utils-4405ebb0.esm.js';
 import 'react-keyed-flatten-children';
 import '@plasmicapp/host';

package/skinny/registerSlider.stories.cjs.js

@@ -10,8 +10,8 @@ var registerSliderOutput = require('./registerSliderOutput.cjs.js');
 var registerSliderThumb = require('./registerSliderThumb.cjs.js');
 var registerSliderTrack = require('./registerSliderTrack.cjs.js');
 require('react-aria-components');
-require('./common-b3b54c72.cjs.js');
-require('./utils-7d000fa4.cjs.js');
+require('./common-45acb83c.cjs.js');
+require('./utils-fc1ddd7c.cjs.js');
 require('@plasmicapp/host');
 require('@plasmicapp/host/registerComponent');
 require('./contexts-6d0cb2b1.cjs.js');

package/skinny/registerSlider.stories.esm.js

@@ -6,8 +6,8 @@ import { BaseSliderOutput } from './registerSliderOutput.esm.js';
 import { BaseSliderThumb } from './registerSliderThumb.esm.js';
 import { BaseSliderTrack } from './registerSliderTrack.esm.js';
 import 'react-aria-components';
-import './common-ceebbaea.esm.js';
-import './utils-5d1b4c6b.esm.js';
+import './common-616eb178.esm.js';
+import './utils-fd88ad47.esm.js';
 import '@plasmicapp/host';
 import '@plasmicapp/host/registerComponent';
 import './contexts-5cb81c2f.esm.js';

package/skinny/registerSliderOutput.cjs.js

@@ -2,8 +2,8 @@
 
 var React = require('react');
 var reactAriaComponents = require('react-aria-components');
-var common = require('./common-b3b54c72.cjs.js');
-var utils = require('./utils-7d000fa4.cjs.js');
+var common = require('./common-45acb83c.cjs.js');
+var utils = require('./utils-fc1ddd7c.cjs.js');
 var variantUtils = require('./variant-utils-0ad70db8.cjs.js');
 require('@plasmicapp/host');
 require('@plasmicapp/host/registerComponent');

package/skinny/registerSliderOutput.esm.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { SliderOutput } from 'react-aria-components';
-import { C as COMMON_STYLES } from './common-ceebbaea.esm.js';
-import { m as makeComponentName, r as registerComponentHelper } from './utils-5d1b4c6b.esm.js';
+import { C as COMMON_STYLES } from './common-616eb178.esm.js';
+import { m as makeComponentName, r as registerComponentHelper } from './utils-fd88ad47.esm.js';
 import { p as pickAriaComponentVariants } from './variant-utils-4405ebb0.esm.js';
 import '@plasmicapp/host';
 import '@plasmicapp/host/registerComponent';

package/skinny/registerSliderThumb.cjs.js

@@ -2,8 +2,8 @@
 
 var React = require('react');
 var reactAriaComponents = require('react-aria-components');
-var common = require('./common-b3b54c72.cjs.js');
-var utils = require('./utils-7d000fa4.cjs.js');
+var common = require('./common-45acb83c.cjs.js');
+var utils = require('./utils-fc1ddd7c.cjs.js');
 var variantUtils = require('./variant-utils-0ad70db8.cjs.js');
 require('@plasmicapp/host');
 require('@plasmicapp/host/registerComponent');

package/skinny/registerSliderThumb.esm.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { SliderThumb, Slider, SliderTrack } from 'react-aria-components';
-import { g as getCommonProps, C as COMMON_STYLES } from './common-ceebbaea.esm.js';
-import { m as makeComponentName, r as registerComponentHelper } from './utils-5d1b4c6b.esm.js';
+import { g as getCommonProps, C as COMMON_STYLES } from './common-616eb178.esm.js';
+import { m as makeComponentName, r as registerComponentHelper } from './utils-fd88ad47.esm.js';
 import { p as pickAriaComponentVariants } from './variant-utils-4405ebb0.esm.js';
 import '@plasmicapp/host';
 import '@plasmicapp/host/registerComponent';

package/skinny/registerSliderTrack.cjs.js

@@ -3,9 +3,9 @@
 var React = require('react');
 var reactAriaComponents = require('react-aria-components');
 var flattenChildren = require('react-keyed-flatten-children');
-var common = require('./common-b3b54c72.cjs.js');
+var common = require('./common-45acb83c.cjs.js');
 var contexts = require('./contexts-6d0cb2b1.cjs.js');
-var utils = require('./utils-7d000fa4.cjs.js');
+var utils = require('./utils-fc1ddd7c.cjs.js');
 var variantUtils = require('./variant-utils-0ad70db8.cjs.js');
 require('@plasmicapp/host');
 require('@plasmicapp/host/registerComponent');

package/skinny/registerSliderTrack.esm.js

@@ -1,9 +1,9 @@
 import React, { useMemo } from 'react';
 import { SliderTrack, Slider } from 'react-aria-components';
 import flattenChildren from 'react-keyed-flatten-children';
-import { C as COMMON_STYLES } from './common-ceebbaea.esm.js';
+import { C as COMMON_STYLES } from './common-616eb178.esm.js';
 import { f as PlasmicSliderContext } from './contexts-5cb81c2f.esm.js';
-import { m as makeComponentName, r as registerComponentHelper, i as isDefined } from './utils-5d1b4c6b.esm.js';
+import { m as makeComponentName, r as registerComponentHelper, i as isDefined } from './utils-fd88ad47.esm.js';
 import { p as pickAriaComponentVariants } from './variant-utils-4405ebb0.esm.js';
 import '@plasmicapp/host';
 import '@plasmicapp/host/registerComponent';

package/skinny/registerSwitch.cjs.js

@@ -2,10 +2,10 @@
 
 var React = require('react');
 var reactAriaComponents = require('react-aria-components');
-var common = require('./common-b3b54c72.cjs.js');
+var common = require('./common-45acb83c.cjs.js');
 var registerDescription = require('./registerDescription.cjs.js');
 var registerLabel = require('./registerLabel.cjs.js');
-var utils = require('./utils-7d000fa4.cjs.js');
+var utils = require('./utils-fc1ddd7c.cjs.js');
 var variantUtils = require('./variant-utils-0ad70db8.cjs.js');
 require('./registerText.cjs.js');
 require('@plasmicapp/host');

package/skinny/registerSwitch.esm.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Switch } from 'react-aria-components';
-import { g as getCommonProps, C as COMMON_STYLES } from './common-ceebbaea.esm.js';
+import { g as getCommonProps, C as COMMON_STYLES } from './common-616eb178.esm.js';
 import { DESCRIPTION_COMPONENT_NAME } from './registerDescription.esm.js';
 import { LABEL_COMPONENT_NAME } from './registerLabel.esm.js';
-import { r as registerComponentHelper, m as makeComponentName } from './utils-5d1b4c6b.esm.js';
+import { r as registerComponentHelper, m as makeComponentName } from './utils-fd88ad47.esm.js';
 import { p as pickAriaComponentVariants } from './variant-utils-4405ebb0.esm.js';
 import './registerText.esm.js';
 import '@plasmicapp/host';

package/skinny/registerSwitch.stories.cjs.js

@@ -6,8 +6,8 @@ var test = require('@storybook/test');
 var React = require('react');
 var registerSwitch = require('./registerSwitch.cjs.js');
 require('react-aria-components');
-require('./common-b3b54c72.cjs.js');
-require('./utils-7d000fa4.cjs.js');
+require('./common-45acb83c.cjs.js');
+require('./utils-fc1ddd7c.cjs.js');
 require('@plasmicapp/host');
 require('@plasmicapp/host/registerComponent');
 require('./registerDescription.cjs.js');

package/skinny/registerSwitch.stories.esm.js

@@ -2,8 +2,8 @@ import { fn, within, expect, userEvent, waitFor } from '@storybook/test';
 import React, { useState } from 'react';
 import { BaseSwitch } from './registerSwitch.esm.js';
 import 'react-aria-components';
-import './common-ceebbaea.esm.js';
-import './utils-5d1b4c6b.esm.js';
+import './common-616eb178.esm.js';
+import './utils-fd88ad47.esm.js';
 import '@plasmicapp/host';
 import '@plasmicapp/host/registerComponent';
 import './registerDescription.esm.js';

package/skinny/registerText.cjs.js

@@ -2,8 +2,8 @@
 
 var React = require('react');
 var reactAriaComponents = require('react-aria-components');
-var common = require('./common-b3b54c72.cjs.js');
-var utils = require('./utils-7d000fa4.cjs.js');
+var common = require('./common-45acb83c.cjs.js');
+var utils = require('./utils-fc1ddd7c.cjs.js');
 require('@plasmicapp/host');
 require('@plasmicapp/host/registerComponent');
 

package/skinny/registerText.esm.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Text } from 'react-aria-components';
-import { C as COMMON_STYLES } from './common-ceebbaea.esm.js';
-import { e as extractPlasmicDataProps, m as makeComponentName, r as registerComponentHelper } from './utils-5d1b4c6b.esm.js';
+import { C as COMMON_STYLES } from './common-616eb178.esm.js';
+import { e as extractPlasmicDataProps, m as makeComponentName, r as registerComponentHelper } from './utils-fd88ad47.esm.js';
 import '@plasmicapp/host';
 import '@plasmicapp/host/registerComponent';
 

package/skinny/registerTextArea.cjs.js

@@ -3,9 +3,9 @@
 var React = require('react');
 var reactAria = require('react-aria');
 var reactAriaComponents = require('react-aria-components');
-var common = require('./common-b3b54c72.cjs.js');
+var common = require('./common-45acb83c.cjs.js');
 var contexts = require('./contexts-6d0cb2b1.cjs.js');
-var utils = require('./utils-7d000fa4.cjs.js');
+var utils = require('./utils-fc1ddd7c.cjs.js');
 var variantUtils = require('./variant-utils-0ad70db8.cjs.js');
 require('@plasmicapp/host');
 require('@plasmicapp/host/registerComponent');
@@ -61,34 +61,64 @@ const inputHelpers = {
     }
   }
 };
-function BaseTextArea(props) {
-  const _a = props, { className, plasmicUpdateVariant, setControlContextData } = _a, rest = __objRest(_a, ["className", "plasmicUpdateVariant", "setControlContextData"]);
+function BaseTextArea_(props, ref) {
+  const _a = props, {
+    className,
+    plasmicUpdateVariant,
+    setControlContextData
+  } = _a, restProps = __objRest(_a, [
+    "className",
+    "plasmicUpdateVariant",
+    "setControlContextData"
+  ]);
   const textFieldContext = React__default.default.useContext(contexts.PlasmicTextFieldContext);
+  const [textAreaContextProps, textAreaRef] = reactAriaComponents.useContextProps(
+    restProps,
+    ref,
+    reactAriaComponents.TextAreaContext
+  );
+  const { hoverProps, isHovered } = reactAria.useHover(textAreaContextProps);
+  const { isFocused, isFocusVisible, focusProps } = reactAria.useFocusRing({
+    isTextInput: true,
+    autoFocus: textAreaContextProps.autoFocus
+  });
+  const mergedProps = reactAria.mergeProps(
+    utils.filterHoverProps(textAreaContextProps),
+    focusProps,
+    hoverProps,
+    {
+      style: common.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 = React.useCallback(
-    ({
-      isDisabled,
-      isFocusVisible,
-      isFocused,
-      isHovered
-    }) => {
-      plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
+  React.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__default.default.createElement(
+    "textarea",
+    __spreadProps(__spreadValues({}, 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 = reactAria.mergeProps(rest, {
-    className: classNameProp
-  });
-  return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.TextArea, __spreadProps(__spreadValues({}, mergedProps), { style: common.COMMON_STYLES }));
 }
+const BaseTextArea = React__default.default.forwardRef(BaseTextArea_);
 function registerTextArea(loader, overrides) {
   utils.registerComponentHelper(
     loader,

package/skinny/registerTextArea.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"registerTextArea.cjs.js","sources":["../src/registerTextArea.tsx"],"sourcesContent":["import React, { ChangeEvent, useCallback } from \"react\";\nimport { mergeProps } from \"react-aria\";\nimport type { InputRenderProps, TextAreaProps } from \"react-aria-components\";\nimport { TextArea } from \"react-aria-components\";\nimport { COMMON_STYLES, getCommonProps } from \"./common\";\nimport { PlasmicTextFieldContext } from \"./contexts\";\nimport {\n  CodeComponentMetaOverrides,\n  HasControlContextData,\n  makeComponentName,\n  Registerable,\n  registerComponentHelper,\n} from \"./utils\";\nimport { pickAriaComponentVariants, WithVariants } from \"./variant-utils\";\n\nconst TEXTAREA_VARIANTS = [\n  \"focused\" as const,\n  \"focusVisible\" as const,\n  \"hovered\" as const,\n  \"disabled\" as const,\n];\n\nconst { variants } = pickAriaComponentVariants(TEXTAREA_VARIANTS);\n\nexport interface BaseTextAreaProps\n  extends Omit<TextAreaProps, \"className\">,\n    HasControlContextData,\n    WithVariants<typeof TEXTAREA_VARIANTS> {\n  className?: string;\n}\n\nexport const inputHelpers = {\n  states: {\n    value: {\n      onChangeArgsToValue: (e: ChangeEvent<HTMLInputElement>) => {\n        return e.target.value;\n      },\n    },\n  },\n};\n\nexport function BaseTextArea(props: BaseTextAreaProps) {\n  const { className, plasmicUpdateVariant, setControlContextData, ...rest } =\n    props;\n\n  const textFieldContext = React.useContext(PlasmicTextFieldContext);\n\n  setControlContextData?.({\n    parent: textFieldContext,\n  });\n\n  const classNameProp = useCallback(\n    ({\n      isDisabled,\n      isFocusVisible,\n      isFocused,\n      isHovered,\n    }: InputRenderProps) => {\n      plasmicUpdateVariant?.({\n        disabled: isDisabled,\n        focused: isFocused,\n        focusVisible: isFocusVisible,\n        hovered: isHovered,\n      });\n      return className ?? \"\";\n    },\n    [className, plasmicUpdateVariant]\n  );\n\n  const mergedProps = mergeProps(rest, {\n    className: classNameProp,\n  });\n\n  return <TextArea {...mergedProps} style={COMMON_STYLES} />;\n}\n\nexport function registerTextArea(\n  loader?: Registerable,\n  overrides?: CodeComponentMetaOverrides<typeof BaseTextArea>\n) {\n  registerComponentHelper(\n    loader,\n    BaseTextArea,\n    {\n      name: makeComponentName(\"textarea\"),\n      displayName: \"Aria TextArea\",\n      importPath: \"@plasmicpkgs/react-aria/skinny/registerTextArea\",\n      importName: \"BaseTextArea\",\n      variants,\n      props: {\n        ...getCommonProps<BaseTextAreaProps>(\"Text Area\", [\n          \"name\",\n          \"disabled\",\n          \"readOnly\",\n          \"autoFocus\",\n          \"aria-label\",\n          \"required\",\n          \"placeholder\",\n          \"value\",\n          \"maxLength\",\n          \"minLength\",\n          \"inputMode\",\n          \"onChange\",\n          \"onFocus\",\n          \"onBlur\",\n          \"onKeyDown\",\n          \"onKeyUp\",\n          \"onCopy\",\n          \"onCut\",\n          \"onPaste\",\n          \"onCompositionStart\",\n          \"onCompositionEnd\",\n          \"onCompositionUpdate\",\n          \"onSelect\",\n          \"onBeforeInput\",\n          \"onInput\",\n        ]),\n      },\n      states: {\n        value: {\n          type: \"writable\",\n          valueProp: \"value\",\n          onChangeProp: \"onChange\",\n          variableType: \"text\",\n          ...inputHelpers.states.value,\n        },\n      },\n      componentHelpers: {\n        helpers: inputHelpers,\n        importName: \"inputHelpers\",\n        importPath: \"@plasmicpkgs/react-aria/skinny/registerTextArea\",\n      },\n    },\n    overrides\n  );\n}\n"],"names":["pickAriaComponentVariants","React","PlasmicTextFieldContext","useCallback","mergeProps","TextArea","COMMON_STYLES","registerComponentHelper","makeComponentName","getCommonProps"],"mappings":"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"}
+{"version":3,"file":"registerTextArea.cjs.js","sources":["../src/registerTextArea.tsx"],"sourcesContent":["import React, { ChangeEvent, ForwardedRef, useEffect } from \"react\";\nimport { mergeProps, useFocusRing, useHover } from \"react-aria\";\nimport {\n  TextAreaContext,\n  TextAreaProps,\n  useContextProps,\n} from \"react-aria-components\";\nimport { COMMON_STYLES, getCommonProps } from \"./common\";\nimport { PlasmicTextFieldContext } from \"./contexts\";\nimport {\n  CodeComponentMetaOverrides,\n  filterHoverProps,\n  HasControlContextData,\n  makeComponentName,\n  Registerable,\n  registerComponentHelper,\n} from \"./utils\";\nimport { pickAriaComponentVariants, WithVariants } from \"./variant-utils\";\n\nconst TEXTAREA_VARIANTS = [\n  \"focused\" as const,\n  \"focusVisible\" as const,\n  \"hovered\" as const,\n  \"disabled\" as const,\n];\n\nconst { variants } = pickAriaComponentVariants(TEXTAREA_VARIANTS);\n\nexport interface BaseTextAreaProps\n  extends Omit<TextAreaProps, \"className\">,\n    HasControlContextData,\n    WithVariants<typeof TEXTAREA_VARIANTS> {\n  className?: string;\n}\n\nexport const inputHelpers = {\n  states: {\n    value: {\n      onChangeArgsToValue: (e: ChangeEvent<HTMLInputElement>) => {\n        return e.target.value;\n      },\n    },\n  },\n};\n\nfunction BaseTextArea_(\n  props: BaseTextAreaProps,\n  ref: ForwardedRef<HTMLTextAreaElement>\n) {\n  const {\n    className,\n    plasmicUpdateVariant,\n    setControlContextData,\n    ...restProps\n  } = props;\n\n  const textFieldContext = React.useContext(PlasmicTextFieldContext);\n  const [textAreaContextProps, textAreaRef] = useContextProps(\n    restProps,\n    ref,\n    TextAreaContext\n  );\n\n  const { hoverProps, isHovered } = useHover(textAreaContextProps);\n  const { isFocused, isFocusVisible, focusProps } = useFocusRing({\n    isTextInput: true,\n    autoFocus: textAreaContextProps.autoFocus,\n  });\n\n  const mergedProps = mergeProps(\n    filterHoverProps(textAreaContextProps),\n    focusProps,\n    hoverProps,\n    {\n      style: COMMON_STYLES,\n      className,\n    }\n  );\n\n  const isDisabled = mergedProps.disabled || false;\n  const isInvalid =\n    !!mergedProps[\"aria-invalid\"] && mergedProps[\"aria-invalid\"] !== \"false\";\n\n  setControlContextData?.({\n    parent: textFieldContext,\n  });\n\n  useEffect(() => {\n    if (plasmicUpdateVariant) {\n      plasmicUpdateVariant({\n        disabled: isDisabled,\n        focused: isFocused,\n        focusVisible: isFocusVisible,\n        hovered: isHovered,\n      });\n    }\n  }, [isFocused, isFocusVisible, isHovered, isDisabled, plasmicUpdateVariant]);\n\n  return (\n    <textarea\n      {...mergedProps}\n      ref={textAreaRef}\n      data-focused={isFocused || undefined}\n      data-disabled={isDisabled || undefined}\n      data-hovered={isHovered || undefined}\n      data-focus-visible={isFocusVisible || undefined}\n      data-invalid={isInvalid || undefined}\n    />\n  );\n}\n\nexport const BaseTextArea = React.forwardRef(BaseTextArea_);\n\nexport function registerTextArea(\n  loader?: Registerable,\n  overrides?: CodeComponentMetaOverrides<typeof BaseTextArea>\n) {\n  registerComponentHelper(\n    loader,\n    BaseTextArea,\n    {\n      name: makeComponentName(\"textarea\"),\n      displayName: \"Aria TextArea\",\n      importPath: \"@plasmicpkgs/react-aria/skinny/registerTextArea\",\n      importName: \"BaseTextArea\",\n      variants,\n      props: {\n        ...getCommonProps<BaseTextAreaProps>(\"Text Area\", [\n          \"name\",\n          \"disabled\",\n          \"readOnly\",\n          \"autoFocus\",\n          \"aria-label\",\n          \"required\",\n          \"placeholder\",\n          \"value\",\n          \"maxLength\",\n          \"minLength\",\n          \"inputMode\",\n          \"onChange\",\n          \"onFocus\",\n          \"onBlur\",\n          \"onKeyDown\",\n          \"onKeyUp\",\n          \"onCopy\",\n          \"onCut\",\n          \"onPaste\",\n          \"onCompositionStart\",\n          \"onCompositionEnd\",\n          \"onCompositionUpdate\",\n          \"onSelect\",\n          \"onBeforeInput\",\n          \"onInput\",\n        ]),\n      },\n      states: {\n        value: {\n          type: \"writable\",\n          valueProp: \"value\",\n          onChangeProp: \"onChange\",\n          variableType: \"text\",\n          ...inputHelpers.states.value,\n        },\n      },\n      componentHelpers: {\n        helpers: inputHelpers,\n        importName: \"inputHelpers\",\n        importPath: \"@plasmicpkgs/react-aria/skinny/registerTextArea\",\n      },\n    },\n    overrides\n  );\n}\n"],"names":["pickAriaComponentVariants","React","PlasmicTextFieldContext","useContextProps","TextAreaContext","useHover","useFocusRing","mergeProps","filterHoverProps","COMMON_STYLES","useEffect","registerComponentHelper","makeComponentName","getCommonProps"],"mappings":"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"}

package/skinny/registerTextArea.d.ts

@@ -1,5 +1,5 @@
 import React, { ChangeEvent } from "react";
-import type { TextAreaProps } from "react-aria-components";
+import { TextAreaProps } from "react-aria-components";
 import { CodeComponentMetaOverrides, HasControlContextData, Registerable } from "./utils";
 import { WithVariants } from "./variant-utils";
 declare const TEXTAREA_VARIANTS: ("disabled" | "hovered" | "focused" | "focusVisible")[];
@@ -13,6 +13,6 @@ export declare const inputHelpers: {
         };
     };
 };
-export declare function BaseTextArea(props: BaseTextAreaProps): React.JSX.Element;
+export declare const BaseTextArea: React.ForwardRefExoticComponent<BaseTextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
 export declare function registerTextArea(loader?: Registerable, overrides?: CodeComponentMetaOverrides<typeof BaseTextArea>): void;
 export {};

package/skinny/registerTextArea.esm.js

@@ -1,9 +1,9 @@
-import React, { useCallback } from 'react';
-import { mergeProps } from 'react-aria';
-import { TextArea } from 'react-aria-components';
-import { g as getCommonProps, C as COMMON_STYLES } from './common-ceebbaea.esm.js';
+import React, { useEffect } from 'react';
+import { useHover, useFocusRing, mergeProps } from 'react-aria';
+import { useContextProps, TextAreaContext } from 'react-aria-components';
+import { C as COMMON_STYLES, g as getCommonProps } from './common-616eb178.esm.js';
 import { g as PlasmicTextFieldContext } from './contexts-5cb81c2f.esm.js';
-import { r as registerComponentHelper, m as makeComponentName } from './utils-5d1b4c6b.esm.js';
+import { f as filterHoverProps, r as registerComponentHelper, m as makeComponentName } from './utils-fd88ad47.esm.js';
 import { p as pickAriaComponentVariants } from './variant-utils-4405ebb0.esm.js';
 import '@plasmicapp/host';
 import '@plasmicapp/host/registerComponent';
@@ -55,34 +55,64 @@ const inputHelpers = {
     }
   }
 };
-function BaseTextArea(props) {
-  const _a = props, { className, plasmicUpdateVariant, setControlContextData } = _a, rest = __objRest(_a, ["className", "plasmicUpdateVariant", "setControlContextData"]);
+function BaseTextArea_(props, ref) {
+  const _a = props, {
+    className,
+    plasmicUpdateVariant,
+    setControlContextData
+  } = _a, restProps = __objRest(_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(__spreadValues({}, 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(__spreadValues({}, mergedProps), { style: COMMON_STYLES }));
 }
+const BaseTextArea = React.forwardRef(BaseTextArea_);
 function registerTextArea(loader, overrides) {
   registerComponentHelper(
     loader,