@pingux/astro 1.2.0-alpha.14 → 1.2.0-alpha.15

package/lib/components/AccordionGridItem/AccordionGridItem.js

@@ -3,14 +3,15 @@ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
 import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
 import _toArray from "@babel/runtime-corejs3/helpers/esm/toArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-import React, { useContext, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useGridRow } from '@react-aria/grid';
 import { mergeProps } from '@react-aria/utils';
-import { AccordionGridContext } from '../AccordionGridGroup/AccordionGridContext';
+import { useAccordionGridContext } from '../../context/AccordionGridContext';
 import Box from '../Box';
 import AccordionGridItemHeader from './AccordionGridItemHeader';
 import AccordionGridItemBody from './AccordionGridItemBody';
+import { useStatusClasses } from '../../hooks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
 var AccordionGridItem = function AccordionGridItem(props) {
@@ -20,7 +21,8 @@ var AccordionGridItem = function AccordionGridItem(props) {
       headerProps = props.headerProps,
       bodyProps = props.bodyProps,
       children = props.children,
-      others = _objectWithoutProperties(props, ["item", "headerProps", "bodyProps", "children"]);
+      className = props.className,
+      others = _objectWithoutProperties(props, ["item", "headerProps", "bodyProps", "children", "className"]);
 
   var _React$Children$toArr = React.Children.toArray(children),
       _React$Children$toArr2 = _toArray(_React$Children$toArr),
@@ -30,10 +32,18 @@ var AccordionGridItem = function AccordionGridItem(props) {
 
   var cellNode = _concatInstanceProperty(_context = []).call(_context, item.childNodes)[0];
 
-  var _useContext = useContext(AccordionGridContext),
-      state = _useContext.state;
+  var _useAccordionGridCont = useAccordionGridContext(),
+      state = _useAccordionGridCont.state; // Treat first cell as a row, fixes focus and keyboard interactions
 
-  var isDisabled = state.disabledKeys.has(item.key);
+
+  var isDisabled = state.disabledKeys.has(cellNode.key);
+  var isSelected = state.selectionManager.isSelected(cellNode.key); // Sync selection between the first cell and the row
+
+  useEffect(function () {
+    if (isSelected !== state.selectionManager.isSelected(item.key)) {
+      state.selectionManager.toggleSelection(item.key);
+    }
+  }, [isSelected, state.selectionManager, item.key]);
   var rowRef = useRef();
   var cellRef = useRef();
   var cellBodyRef = useRef();
@@ -43,20 +53,24 @@ var AccordionGridItem = function AccordionGridItem(props) {
   }, state, rowRef),
       rowProps = _useGridRow.rowProps;
 
-  var isSelected = state.selectionManager.isSelected(item.key);
-  return ___EmotionJSX(Box, _extends({
-    as: "div",
+  var _useStatusClasses = useStatusClasses(className, {
+    isSelected: isSelected,
     isDisabled: isDisabled
+  }),
+      classNames = _useStatusClasses.classNames;
+
+  return ___EmotionJSX(Box, _extends({
+    as: "div"
   }, mergeProps(rowProps, others), {
-    ref: rowRef,
-    role: "row"
+    "aria-selected": isSelected,
+    className: classNames,
+    ref: rowRef
   }), ___EmotionJSX(AccordionGridItemHeader, _extends({
     item: item,
-    cellNode: cellNode,
-    ref: cellRef
-  }, headerProps, {
+    ref: cellRef,
+    isDisabled: isDisabled,
     isSelected: isSelected
-  }), header), ___EmotionJSX(AccordionGridItemBody, _extends({
+  }, headerProps), header), ___EmotionJSX(AccordionGridItemBody, _extends({
     item: item,
     ref: cellBodyRef,
     isSelected: isSelected

package/lib/components/AccordionGridItem/AccordionGridItemBody.js

@@ -1,11 +1,11 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-import React, { useContext, forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import { mergeProps } from '@react-aria/utils';
 import PropTypes from 'prop-types';
 import { useGridCell } from '@react-aria/grid';
 import { useHover } from '@react-aria/interactions';
-import { AccordionGridContext } from '../AccordionGridGroup/AccordionGridContext';
+import { useAccordionGridContext } from '../../context/AccordionGridContext';
 import Box from '../Box';
 import { useStatusClasses } from '../../hooks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -17,8 +17,8 @@ var AccordionGridItemBody = /*#__PURE__*/forwardRef(function (props, ref) {
       children = props.children,
       isSelected = props.isSelected;
 
-  var _useContext = useContext(AccordionGridContext),
-      state = _useContext.state;
+  var _useAccordionGridCont = useAccordionGridContext(),
+      state = _useAccordionGridCont.state;
 
   var cellNode = _concatInstanceProperty(_context = []).call(_context, item.childNodes)[1];
 

package/lib/components/AccordionGridItem/AccordionGridItemHeader.js

@@ -1,15 +1,15 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-import React, { useContext, forwardRef } from 'react';
+import React, { forwardRef, useRef, useImperativeHandle } from 'react';
 import { mergeProps } from '@react-aria/utils';
 import { useFocusRing } from '@react-aria/focus';
 import PropTypes from 'prop-types';
 import { useGridCell } from '@react-aria/grid';
-import { useHover, usePress } from '@react-aria/interactions';
+import { useHover } from '@react-aria/interactions';
 import MenuDown from 'mdi-react/MenuDownIcon';
 import MenuUp from 'mdi-react/MenuUpIcon';
-import { AccordionGridContext } from '../AccordionGridGroup/AccordionGridContext';
+import { useAccordionGridContext } from '../../context/AccordionGridContext';
 import Box from '../Box';
 import Icon from '../Icon';
 import { useStatusClasses } from '../../hooks';
@@ -20,20 +20,27 @@ var AccordionGridItemHeader = /*#__PURE__*/forwardRef(function (props, ref) {
   var item = props.item,
       className = props.className,
       children = props.children,
-      key = props.key,
       isSelected = props.isSelected,
-      others = _objectWithoutProperties(props, ["item", "className", "children", "key", "isSelected"]);
+      others = _objectWithoutProperties(props, ["item", "className", "children", "isSelected"]);
 
-  var _useContext = useContext(AccordionGridContext),
-      state = _useContext.state;
+  var _useAccordionGridCont = useAccordionGridContext(),
+      state = _useAccordionGridCont.state;
+
+  var cellRef = useRef();
+  /* istanbul ignore next */
+
+  useImperativeHandle(ref, function () {
+    return cellRef.current;
+  });
 
   var cellNode = _concatInstanceProperty(_context = []).call(_context, item.childNodes)[0];
 
   var _useGridCell = useGridCell({
     node: cellNode,
     focusMode: 'cell'
-  }, state, ref),
-      gridCellProps = _useGridCell.gridCellProps;
+  }, state, cellRef),
+      gridCellProps = _useGridCell.gridCellProps,
+      isPressed = _useGridCell.isPressed;
 
   var _useHover = useHover({}),
       hoverProps = _useHover.hoverProps,
@@ -48,14 +55,7 @@ var AccordionGridItemHeader = /*#__PURE__*/forwardRef(function (props, ref) {
       focusProps = _useFocusRing2.focusProps,
       isFocusVisible = _useFocusRing2.isFocusVisible;
 
-  var _usePress = usePress({
-    ref: ref,
-    isPressed: item.props.isPressed
-  }),
-      pressProps = _usePress.pressProps,
-      isPressed = _usePress.isPressed;
-
-  var mergedProps = mergeProps(gridCellProps, hoverProps, focusWithinProps, focusProps, pressProps);
+  var mergedProps = mergeProps(gridCellProps, hoverProps, focusWithinProps, focusProps);
 
   var _useStatusClasses = useStatusClasses(className, {
     isPressed: isPressed,
@@ -68,9 +68,8 @@ var AccordionGridItemHeader = /*#__PURE__*/forwardRef(function (props, ref) {
   var ariaLabel = props['aria-label'];
   return ___EmotionJSX(Box, _extends({
     as: "div",
-    ref: ref
+    ref: cellRef
   }, mergedProps, {
-    role: "gridcell",
     variant: "accordion.accordionGridHeader",
     isFocused: isFocusVisible,
     isSelected: isSelected,
@@ -93,8 +92,8 @@ var AccordionGridItemHeader = /*#__PURE__*/forwardRef(function (props, ref) {
 AccordionGridItemHeader.propTypes = {
   'aria-label': PropTypes.string,
   isSelected: PropTypes.bool,
-  key: PropTypes.string,
   item: PropTypes.shape({
+    key: PropTypes.string,
     childNodes: PropTypes.arrayOf(PropTypes.shape({})),
     props: PropTypes.shape({
       isPressed: PropTypes.bool

package/lib/components/AccordionGroup/AccordionGroup.js

@@ -32,8 +32,9 @@ var AccordionGroup = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var _useAccordion = useAccordion(props, state, accordionRef),
       accordionProps = _useAccordion.accordionProps;
-  /* istanbul ignore next */
 
+  delete accordionProps.onMouseDown;
+  /* istanbul ignore next */
 
   useImperativeHandle(ref, function () {
     return accordionRef.current;

package/lib/components/AccordionGroup/AccordionGroup.test.js

@@ -7,7 +7,7 @@ import axeTest from '../../utils/testUtils/testAxe';
 import { act, fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
 import Text from '../Text';
 import AccordionGroup from '../AccordionGroup';
-import { OverlayPanel } from '../../index';
+import { OverlayPanel, TextField } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-accordion';
 var defaultProps = {
@@ -31,7 +31,11 @@ var getComponent = function getComponent() {
     textValue: "Duplicate",
     "data-id": "third",
     label: "Accordion item"
-  }, ___EmotionJSX(Text, null, "Render me!"))));
+  }, ___EmotionJSX(TextField, {
+    role: "form",
+    label: "Example Label",
+    "data-testid": "testField"
+  }))));
 };
 
 var getComponentInOverlayPanel = function getComponentInOverlayPanel() {
@@ -214,6 +218,16 @@ test('expanded keys expands an accordion item', function () {
   var selectedItem = buttons[0];
   expect(selectedItem).toHaveAttribute('aria-expanded', 'true');
 });
+test('able to click a textfield that is the rendered child of an accordion', function () {
+  getComponent({
+    expandedKeys: ['third']
+  });
+  var field = screen.getByTestId('testField');
+  var input = screen.getByRole('form');
+  userEvent.click(input);
+  userEvent.type(input, 'banana');
+  expect(field).toHaveClass('has-focus-within');
+});
 test('Item accepts a data-id and the data-id can be found in the DOM', function () {
   getComponent();
   var buttons = screen.getAllByRole('button');

package/lib/components/ListView/ListView.js

@@ -19,7 +19,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { useMemo, forwardRef, useRef, useImperativeHandle } from 'react';
 import { GridCollection, useGridState } from '@react-stately/grid';
 import { GridKeyboardDelegate, useGrid } from '@react-aria/grid';
-import { mergeProps } from '@react-aria/utils';
 import { ListLayout } from '@react-stately/layout';
 import { useListState } from '@react-stately/list';
 import PropTypes from 'prop-types';
@@ -58,12 +57,9 @@ export function useListLayout(state) {
   return layout;
 }
 var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
-  var disabledKeys = props.disabledKeys,
-      loadingState = props.loadingState,
-      selectedKeys = props.selectedKeys,
+  var loadingState = props.loadingState,
       onLoadMore = props.onLoadMore,
-      onSelectionChange = props.onSelectionChange,
-      selectionMode = props.selectionMode;
+      selectionStyle = props.selectionStyle;
   var isLoading = loadingState === loadingStates.LOADING_MORE || loadingState === loadingStates.LOADING;
 
   var renderWrapper = function renderWrapper(parent, reusableView) {
@@ -115,11 +111,9 @@ var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
     });
   }, [collection]);
   var state = useGridState(_objectSpread(_objectSpread({}, props), {}, {
-    disabledKeys: disabledKeys,
-    selectedKeys: selectedKeys,
     collection: gridCollection,
-    selectionMode: selectionMode,
-    onSelectionChange: onSelectionChange
+    focusMode: 'cell',
+    selectionBehavior: selectionStyle === 'highlight' ? 'replace' : 'toggle'
   }));
   var layout = useListLayout(state);
   var keyboardDelegate = useMemo(function () {
@@ -154,7 +148,7 @@ var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
       state: state,
       keyboardDelegate: keyboardDelegate
     }
-  }, ___EmotionJSX(Virtualizer, _extends({}, mergeProps(gridProps), {
+  }, ___EmotionJSX(Virtualizer, _extends({}, gridProps, {
     onLoadMore: onLoadMore,
     ref: listViewRef,
     focusedKey: focusedKey,
@@ -221,6 +215,9 @@ ListView.propTypes = {
   /** The type of selection that is allowed in the collection. */
   selectionMode: PropTypes.oneOf(['none', 'single', 'multiple']),
 
+  /** */
+  selectionStyle: PropTypes.oneOf(['highlight', undefined]),
+
   /** Callback function that fires when the selected key changes. */
   onSelectionChange: PropTypes.func,
 
@@ -233,6 +230,6 @@ ListView.propTypes = {
 };
 ListView.defaultProps = {
   'aria-label': 'listView',
-  'selectionMode': 'single'
+  selectionMode: 'single'
 };
 export default ListView;

package/lib/components/ListViewItem/ListViewItem.js

@@ -6,6 +6,7 @@ import { useFocusRing } from '@react-aria/focus';
 import PropTypes from 'prop-types';
 import { useGridCell, useGridRow } from '@react-aria/grid';
 import { useHover } from '@react-aria/interactions';
+import { useSelectableItem } from '@react-aria/selection';
 import { ListViewContext } from '../ListView/ListViewContext';
 import Box from '../Box';
 import { useStatusClasses } from '../../hooks';
@@ -15,7 +16,9 @@ var ListViewItem = function ListViewItem(props) {
   var _context;
 
   var item = props.item,
-      _props$item$props = props.item.props,
+      _props$item = props.item,
+      key = _props$item.key,
+      _props$item$props = _props$item.props,
       listItemProps = _props$item$props.listItemProps,
       rowProps = _props$item$props.rowProps,
       _props$item$props$has = _props$item$props.hasSeparator,
@@ -51,7 +54,7 @@ var ListViewItem = function ListViewItem(props) {
   }, state, rowRef),
       raRowProps = _useGridRow.rowProps;
 
-  var isSelected = raRowProps['aria-selected'];
+  var isSelected = state.selectionManager.isSelected(item.key);
 
   var _useGridCell = useGridCell({
     node: cellNode,
@@ -59,7 +62,15 @@ var ListViewItem = function ListViewItem(props) {
   }, state, cellRef),
       gridCellProps = _useGridCell.gridCellProps;
 
-  var mergedProps = mergeProps(gridCellProps, hoverProps, focusWithinProps, focusProps);
+  var _useSelectableItem = useSelectableItem({
+    isDisabled: isDisabled,
+    selectionManager: state.selectionManager,
+    key: key,
+    ref: cellRef
+  }),
+      selectableItemProps = _useSelectableItem.itemProps;
+
+  var mergedProps = mergeProps(gridCellProps, hoverProps, focusWithinProps, focusProps, selectableItemProps);
 
   var _useStatusClasses = useStatusClasses(className, {
     isHovered: isHovered,

package/lib/components/RockerButton/RockerButton.js

@@ -17,26 +17,18 @@ import React, { forwardRef, useContext, useImperativeHandle, useRef } from 'reac
 import PropTypes from 'prop-types';
 import { Item } from '@react-stately/collections';
 import { useFocusRing } from '@react-aria/focus';
-import { mergeProps } from '@react-aria/utils';
 import { useRockerButton, useStatusClasses, usePropWarning } from '../../hooks';
-import Button from '../Button';
+import { Box } from '../../index';
 import { RockerContext } from '../RockerButtonGroup';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var CollectionRockerButton = /*#__PURE__*/forwardRef(function (props, ref) {
   var className = props.className,
-      item = props.item,
-      buttonGroupDisabled = props.isDisabled;
-  var defaultSelectedStyles = {
-    bg: 'active'
-  };
+      item = props.item;
   var key = item.key,
       rendered = item.rendered,
       itemProps = item.props;
-  var _itemProps$selectedSt = itemProps.selectedStyles,
-      selectedStyles = _itemProps$selectedSt === void 0 ? defaultSelectedStyles : _itemProps$selectedSt,
-      rockerButtonDisabled = itemProps.isDisabled;
-  var isDisabled = buttonGroupDisabled || rockerButtonDisabled;
   var state = useContext(RockerContext);
+  var isDisabled = state.disabledKeys.has(key);
 
   var _useFocusRing = useFocusRing(),
       isFocusVisible = _useFocusRing.isFocusVisible,
@@ -46,7 +38,8 @@ export var CollectionRockerButton = /*#__PURE__*/forwardRef(function (props, ref
 
   var _useStatusClasses = useStatusClasses(className, {
     isFocused: isFocusVisible,
-    isSelected: isSelected
+    isSelected: isSelected,
+    isDisabled: isDisabled
   }),
       classNames = _useStatusClasses.classNames;
 
@@ -60,25 +53,25 @@ export var CollectionRockerButton = /*#__PURE__*/forwardRef(function (props, ref
 
   var _useRockerButton = useRockerButton({
     item: item,
-    isDisabled: isDisabled
+    isDisabled: isDisabled,
+    isSelected: isSelected
   }, state, rockerButtonRef),
       rockerButtonProps = _useRockerButton.rockerButtonProps;
 
-  return ___EmotionJSX(Button, _extends({
+  return ___EmotionJSX(Box, _extends({
+    as: "button",
     className: classNames,
-    variant: "rocker"
-  }, itemProps, mergeProps(focusProps, rockerButtonProps), {
-    ref: rockerButtonRef,
+    variant: "buttons.rocker"
+  }, rockerButtonProps, {
+    ref: rockerButtonRef
+  }, focusProps, itemProps, {
     sx: {
-      '&.is-selected': _objectSpread({}, selectedStyles)
+      '&.is-selected': _objectSpread({}, itemProps.selectedStyles)
     }
   }), rendered);
 });
 CollectionRockerButton.displayName = 'CollectionRockerButton';
 CollectionRockerButton.propTypes = {
-  /** Whether the button is disabled. */
-  isDisabled: PropTypes.bool,
-
   /** Allows custom styles to be passed to button. */
   selectedStyles: PropTypes.shape({}),
   // adding to surface in props table

package/lib/components/RockerButtonGroup/RockerButtonGroup.js

@@ -34,10 +34,10 @@ var RockerButtonGroup = /*#__PURE__*/forwardRef(function (props, ref) {
   var _context;
 
   var children = props.children,
-      isDisabled = props.isDisabled,
       onSelectionChange = props.onSelectionChange,
       tabListProps = props.tabListProps,
-      others = _objectWithoutProperties(props, ["children", "isDisabled", "onSelectionChange", "tabListProps"]);
+      disabledKeys = props.disabledKeys,
+      others = _objectWithoutProperties(props, ["children", "onSelectionChange", "tabListProps", "disabledKeys"]);
 
   var buttonGroupRef = useRef();
   usePropWarning(props, 'disabled', 'isDisabled');
@@ -67,8 +67,7 @@ var RockerButtonGroup = /*#__PURE__*/forwardRef(function (props, ref) {
   }), _mapInstanceProperty(_context = _Array$from(state.collection)).call(_context, function (item) {
     return ___EmotionJSX(CollectionRockerButton, {
       key: item.key,
-      item: item,
-      isDisabled: isDisabled
+      item: item
     });
   }))));
 });
@@ -79,14 +78,11 @@ RockerButtonGroup.propTypes = {
   /** The button key that is currently selected. (controlled) */
   selectedKey: PropTypes.string,
 
-  /** Whether the entire button group is disabled. */
-  isDisabled: PropTypes.bool,
+  /** Which keys should be disabled. */
+  disabledKeys: PropTypes.arrayOf(PropTypes.string),
 
   /** Handler that is called when the selected button has changed. */
   onSelectionChange: PropTypes.func
 };
-RockerButtonGroup.defaultProps = {
-  isDisabled: false
-};
 RockerButtonGroup.displayName = 'RockerButtonGroup';
 export default RockerButtonGroup;

package/lib/components/RockerButtonGroup/RockerButtonGroup.stories.js

@@ -96,23 +96,8 @@ export var withCustomSelectedColors = function withCustomSelectedColors() {
 };
 export var DisabledSingleButton = function DisabledSingleButton() {
   return ___EmotionJSX(RockerButtonGroup, {
-    defaultSelectedKey: "or"
-  }, ___EmotionJSX(RockerButton, {
-    name: "and",
-    key: "and",
-    isDisabled: true
-  }, "And"), ___EmotionJSX(RockerButton, {
-    name: "or",
-    key: "or"
-  }, "Or"), ___EmotionJSX(RockerButton, {
-    name: "maybe",
-    key: "maybe"
-  }, "Maybe"));
-};
-export var DisabledRockerButtonGroup = function DisabledRockerButtonGroup() {
-  return ___EmotionJSX(RockerButtonGroup, {
-    isDisabled: true,
-    defaultSelectedKey: "and"
+    defaultSelectedKey: "or",
+    disabledKeys: ['and']
   }, ___EmotionJSX(RockerButton, {
     name: "and",
     key: "and"

package/lib/components/RockerButtonGroup/RockerButtonGroup.test.js

@@ -66,9 +66,11 @@ test('buttonGroup is not disabled by default', function () {
     expect(buttonKey).not.toHaveClass('is-disabled');
   });
 });
-test('each button is disabled when isDisabled prop is passed to RockerButtonGroup', function () {
+test('rocker button is disabled when its key is included in disabledKeys', function () {
   getComponent({
-    isDisabled: true
+    disabledKeys: _mapInstanceProperty(testButtons).call(testButtons, function (button) {
+      return button.key;
+    })
   });
 
   _forEachInstanceProperty(testButtons).call(testButtons, function (button) {
@@ -82,24 +84,16 @@ test('rockerButton renders selectedStyles prop when selected', function () {
   expect(buttonColorKey).toHaveClass('is-selected');
 });
 test('selected button can be changed by keyboard interaction', function () {
-  getComponent(); // FIXME: Keyboard events must fire twice tests - unsure why at this time.
-
-  userEvent.tab();
+  getComponent();
   userEvent.tab();
   var button0 = screen.getByText(testButtons[0].key);
   expect(button0).toHaveClass('is-selected');
   var button1 = screen.getByText(testButtons[1].key);
   expect(button1).not.toHaveClass('is-selected');
-  userEvent.tab();
-  userEvent.tab();
   fireEvent.keyDown(screen.getByText(testButtons[0].key), {
     key: 'ArrowRight',
     code: 'ArrowRight'
   });
-  fireEvent.keyDown(screen.getByText(testButtons[1].key), {
-    key: 'ArrowRight',
-    code: 'ArrowRight'
-  });
   expect(screen.getByText(testButtons[1].key)).toHaveClass('is-selected');
   expect(screen.getByText(testButtons[0].key)).not.toHaveClass('is-selected');
 });

package/lib/components/TextAreaField/TextAreaField.js

@@ -14,8 +14,9 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-import React, { forwardRef, useRef, useImperativeHandle, useEffect } from 'react';
+import React, { forwardRef, useRef, useImperativeHandle, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
+import { useLayoutEffect, useResizeObserver } from '@react-aria/utils';
 import { useColumnStyles, useField, useLabelHeight, usePropWarning } from '../../hooks';
 import statuses from '../../utils/devUtils/constants/statuses';
 import Box from '../Box';
@@ -31,7 +32,8 @@ var TextAreaField = /*#__PURE__*/forwardRef(function (props, ref) {
   var helperText = props.helperText,
       isUnresizable = props.isUnresizable,
       rows = props.rows,
-      status = props.status;
+      status = props.status,
+      slots = props.slots;
   var statusClasses = {
     isUnresizable: isUnresizable
   };
@@ -45,6 +47,9 @@ var TextAreaField = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var textAreaRef = useRef();
   var labelRef = useRef();
+  var containerRef = useRef();
+  var inputContainerRef = useRef();
+  var slotContainer = useRef();
   usePropWarning(props, 'disabled', 'isDisabled');
   /* istanbul ignore next */
 
@@ -57,6 +62,24 @@ var TextAreaField = /*#__PURE__*/forwardRef(function (props, ref) {
     /* istanbul ignore next */
     labelRef.current.style.width = textAreaRef.current.style.width;
   };
+  /* istanbul ignore next */
+
+
+  var resizeSlotContainer = function resizeSlotContainer() {
+    inputContainerRef.current.style.width = textAreaRef.current.style.width;
+  };
+
+  var onResize = useCallback(function () {
+    /* istanbul ignore next */
+    if (slots === null || slots === void 0 ? void 0 : slots.inContainer) {
+      resizeSlotContainer();
+    }
+  }, [slotContainer]);
+  useResizeObserver({
+    ref: textAreaRef,
+    onResize: onResize
+  });
+  useLayoutEffect(onResize, [onResize]);
 
   var _useLabelHeight = useLabelHeight({
     labelRef: labelRef,
@@ -68,18 +91,22 @@ var TextAreaField = /*#__PURE__*/forwardRef(function (props, ref) {
     labelMode: props.labelMode
   });
   useEffect(function () {
+    var thisRef = textAreaRef.current;
+
     if (!props.isUnresizable && props.labelMode === 'float') {
-      textAreaRef.current.addEventListener('mousemove', props.resizeCallback ? props.resizeCallback : resizeFloatLabel);
+      thisRef.addEventListener('mousemove', props.resizeCallback ? props.resizeCallback : resizeFloatLabel);
     }
 
     return function () {
-      textAreaRef.current.removeEventListener('mousemove', props.resizeCallback ? props.resizeCallback : resizeFloatLabel);
+      thisRef.removeEventListener('mousemove', props.resizeCallback ? props.resizeCallback : resizeFloatLabel);
     };
-  }, []);
+  }, [props.isUnresizable, props.labelMode, props.resizeCallback]);
   return ___EmotionJSX(Box, _extends({
     variant: "forms.input.wrapper"
   }, fieldContainerProps, {
-    sx: _objectSpread(_objectSpread({}, columnStyleProps === null || columnStyleProps === void 0 ? void 0 : columnStyleProps.sx), fieldContainerProps === null || fieldContainerProps === void 0 ? void 0 : fieldContainerProps.sx)
+    sx: _objectSpread(_objectSpread({}, columnStyleProps === null || columnStyleProps === void 0 ? void 0 : columnStyleProps.sx), fieldContainerProps === null || fieldContainerProps === void 0 ? void 0 : fieldContainerProps.sx),
+    ref: containerRef,
+    maxWidth: "100%"
   }), ___EmotionJSX(Label, _extends({
     ref: labelRef
   }, fieldLabelProps, {
@@ -87,12 +114,23 @@ var TextAreaField = /*#__PURE__*/forwardRef(function (props, ref) {
       gridRow: '1/5'
     }
   })), ___EmotionJSX(Box, {
+    isRow: true,
     variant: "forms.input.container",
-    className: fieldControlProps.className
+    className: fieldControlProps.className,
+    minWidth: "40px",
+    maxWidth: "100%",
+    ref: inputContainerRef
   }, ___EmotionJSX(TextArea, _extends({
     ref: textAreaRef,
     rows: rows
-  }, fieldControlProps))), helperText && ___EmotionJSX(FieldHelperText, {
+  }, fieldControlProps, {
+    sx: (slots === null || slots === void 0 ? void 0 : slots.inContainer) && {
+      paddingRight: '35px'
+    }
+  })), (slots === null || slots === void 0 ? void 0 : slots.inContainer) && ___EmotionJSX(Box, {
+    variant: "boxes.textFieldInContainerSlot",
+    ref: slotContainer
+  }, slots === null || slots === void 0 ? void 0 : slots.inContainer)), helperText && ___EmotionJSX(FieldHelperText, {
     status: status
   }, helperText));
 });
@@ -187,7 +225,13 @@ TextAreaField.propTypes = {
   controlProps: PropTypes.shape({}),
 
   /** Props object that is spread directly into the label element. */
-  labelProps: PropTypes.shape({})
+  labelProps: PropTypes.shape({}),
+
+  /** Provides a way to insert markup in specified places. */
+  slots: PropTypes.shape({
+    /** The given node will be inserted into the field container. */
+    inContainer: PropTypes.node
+  })
 };
 TextAreaField.defaultProps = {
   hasAutoFocus: false,