@pingux/astro 1.1.0-alpha.1 → 1.1.0-alpha.10

package/lib/cjs/components/OverlayPanel/OverlayPanel.stories.js

@@ -22,8 +22,6 @@ var _collections = require("@react-stately/collections");
 
 var _hooks = require("../../hooks");
 
-var _Button = _interopRequireDefault(require("../Button/Button"));
-
 var _OverlayPanel = _interopRequireDefault(require("./OverlayPanel"));
 
 var _index = require("../../index");
@@ -66,15 +64,18 @@ var Default = function Default(_ref) {
   var state = (0, _hooks.useOverlayPanelState)();
   return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
-    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_Button["default"], {
+    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_index.Button, {
       onPress: state.open
     }, "Open Panel"), (0, _react2.jsx)(_OverlayPanel["default"], (0, _extends2["default"])({
       isOpen: state.isOpen
-    }, args), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_Button["default"], {
+    }, args), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Button, {
       onPress: state.close
-    }, "Close Panel"), (0, _react2.jsx)(_index.Text, {
-      pt: "md"
-    }, "Children render here."))))
+    }, "Close Panel"), (0, _react2.jsx)(_index.AccordionGroup, args, (0, _react2.jsx)(_collections.Item, {
+      key: "accordionKey",
+      textValue: "accordionKey",
+      label: "Accordion Label",
+      "data-id": "accordionItem"
+    }, (0, _react2.jsx)(_index.Text, null, "Render me!"))))))
   );
 };
 
@@ -106,7 +107,7 @@ var InnerPanel = function InnerPanel(_ref2) {
     variant: "overlayPanel.overlayPanelInner" // applies higher z-index
     ,
     isOpen: innerState.isOpen
-  }, args), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_Button["default"], {
+  }, args), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Button, {
     onPress: innerState.close
   }, "Close Inner Panel"), (0, _react2.jsx)(_index.Text, {
     pt: "md"
@@ -121,7 +122,7 @@ var InnerPanel = function InnerPanel(_ref2) {
     sx: {
       p: '12px'
     }
-  }, (0, _react2.jsx)(_Button["default"], {
+  }, (0, _react2.jsx)(_index.Button, {
     onPress: closeOuterPanel
   }, "Close Panel"), (0, _react2.jsx)(_index.Text, {
     pt: "md",
@@ -164,14 +165,14 @@ var InnerPanel = function InnerPanel(_ref2) {
     mr: "auto"
   }, "Form 5")), (0, _react2.jsx)(_index.Separator, {
     margin: "0"
-  })), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_Button["default"], {
+  })), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_index.Button, {
     onPress: toggleMessagesOpen
-  }, "Toggle Messages"), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_Button["default"], {
+  }, "Toggle Messages"), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_index.Button, {
     onPress: innerState.open
   }, "Open Inner Panel"), inner)));
   return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
-    (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_Button["default"], {
+    (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Button, {
       onPress: state.open
     }, "Open Panel"), outer), messagesOpen && (0, _react2.jsx)(_index.Messages, {
       sx: {
@@ -192,14 +193,14 @@ var CustomWidth = function CustomWidth() {
     // readers when an overlay opens.
     //
     // For a custom width, provide the width via the 'sx' prop
-    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_Button["default"], {
+    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_index.Button, {
       onPress: state.open
     }, "Open Panel"), (0, _react2.jsx)(_OverlayPanel["default"], {
       isOpen: state.isOpen,
       sx: {
         width: '720px'
       }
-    }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_Button["default"], {
+    }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Button, {
       onPress: state.close
     }, "Close Panel"), (0, _react2.jsx)(_index.Text, {
       pt: "md"

package/lib/cjs/components/PopoverContainer/PopoverContainer.test.js

@@ -17,6 +17,13 @@ var _react2 = require("@emotion/react");
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return (0, _testWrapper.render)((0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_PopoverContainer["default"], props, (0, _react2.jsx)(_index.Box, null, "I am in a popover"))));
+};
+
+var getComponentInOverlayPanel = function getComponentInOverlayPanel() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react2.jsx)(_index.OverlayPanel, {
+    isOpen: true
+  }, (0, _react2.jsx)(_PopoverContainer["default"], props, (0, _react2.jsx)(_index.Box, null, "I am in a popover"))));
 }; // Need to be added to each test file to test accessibility using axe.
 
 
@@ -39,4 +46,12 @@ test('should render a popover with no arrow', function () {
   var arrow = _testWrapper.screen.queryByTestId('popover-arrow');
 
   expect(arrow).not.toBeInTheDocument();
+});
+test('popover will not open if wrapped in an overlayPanel', function () {
+  getComponentInOverlayPanel({
+    popoverProps: {
+      'data-test-id': 'popover-test'
+    }
+  });
+  expect(_testWrapper.screen.queryByTestId('popover-test')).not.toBeInTheDocument();
 });

package/lib/cjs/components/TextArea/TextArea.js

@@ -29,7 +29,11 @@ var _react2 = require("@emotion/react");
  */
 var TextArea = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   return (0, _react2.jsx)(_themeUi.Textarea, (0, _extends2["default"])({
-    ref: ref
+    ref: ref // this requires to fix safari resizing issue (UIP-4995)
+    ,
+    sx: {
+      position: 'relative'
+    }
   }, props));
 });
 TextArea.displayName = 'TextArea';

package/lib/cjs/styles/variants/accordion.js

@@ -27,11 +27,11 @@ var accordion = {
   alignItems: 'flex-start'
 };
 var accordionBody = {
-  display: 'none !important',
+  display: 'none',
   pt: 'md',
   width: '100%',
   '.is-open &': {
-    display: 'flex !important'
+    display: 'flex'
   }
 };
 var accordionGridHeader = {

package/lib/cjs/styles/variants/buttons.js

@@ -104,6 +104,10 @@ var iconButton = {
   }
 };
 
+var square = _objectSpread(_objectSpread({}, iconButton), {}, {
+  borderRadius: '2px'
+});
+
 var modalCloseButton = _objectSpread(_objectSpread({}, iconButton), {}, {
   position: 'absolute',
   top: 14,
@@ -241,6 +245,10 @@ var inverted = _objectSpread(_objectSpread({}, iconButton), {}, {
   }
 });
 
+var invertedSquare = _objectSpread(_objectSpread({}, inverted), {}, {
+  borderRadius: '2px'
+});
+
 var applicationPortal = _objectSpread(_objectSpread({}, iconButton), {}, {
   background: 'transparent',
   '&.is-focused': _objectSpread({}, defaultFocus),
@@ -532,6 +540,8 @@ var _default = {
   modalCloseButton: modalCloseButton,
   applicationPortalPinned: applicationPortalPinned,
   applicationPortal: applicationPortal,
+  square: square,
+  invertedSquare: invertedSquare,
   tooltipChip: tooltipChip,
   tooltipIconButton: tooltipIconButton,
   tooltipInline: tooltipInline

package/lib/components/AccordionGridGroup/AccordionGridGroup.test.js

@@ -4,7 +4,7 @@ import { Item } from '@react-stately/collections';
 import userEvent from '@testing-library/user-event';
 import axeTest from '../../utils/testUtils/testAxe';
 import { act, fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
-import { Link, Box } from '../../index';
+import { Link, Box, OverlayPanel } from '../../index';
 import AccordionGridGroup from '../AccordionGridGroup';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-accordion';
@@ -26,6 +26,22 @@ var getComponent = function getComponent() {
   }, ___EmotionJSX(Box, null, ___EmotionJSX(Link, null, "Header Button"), ___EmotionJSX(Link, null, "Second Header Button")), ___EmotionJSX(Box, null, ___EmotionJSX(Link, null, "Body Button"), ___EmotionJSX(Link, null, "Second Body Button")))));
 };
 
+var getComponentInOverlayPanel = function getComponentInOverlayPanel() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(OverlayPanel, {
+    isOpen: true
+  }, ___EmotionJSX(AccordionGridGroup, _extends({}, defaultProps, props), ___EmotionJSX(Item, {
+    key: "first",
+    textValue: "Duplicate"
+  }, ___EmotionJSX(Box, null, ___EmotionJSX(Link, null, "Header Button"), ___EmotionJSX(Link, null, "Second Header Button")), ___EmotionJSX(Box, null, ___EmotionJSX(Link, null, "Body Button"), ___EmotionJSX(Link, null, "Second Body Button"))), ___EmotionJSX(Item, {
+    key: "second",
+    textValue: "Duplicate"
+  }, ___EmotionJSX(Box, null, ___EmotionJSX(Link, null, "Header Button"), ___EmotionJSX(Link, null, "Second Header Button")), ___EmotionJSX(Box, null, ___EmotionJSX(Link, null, "Body Button"), ___EmotionJSX(Link, null, "Second Body Button"))), ___EmotionJSX(Item, {
+    key: "third",
+    textValue: "Duplicate"
+  }, ___EmotionJSX(Box, null, ___EmotionJSX(Link, null, "Header Button"), ___EmotionJSX(Link, null, "Second Header Button")), ___EmotionJSX(Box, null, ___EmotionJSX(Link, null, "Body Button"), ___EmotionJSX(Link, null, "Second Body Button"))))));
+};
+
 axeTest(getComponent, {
   // landmark-unique rule conflicts with react-aria role definition
   rules: {
@@ -166,4 +182,10 @@ test('default expanded keys expands an accordion item', function () {
   var row = screen.getAllByRole('row');
   var selectedRow = row[0];
   expect(selectedRow).toHaveAttribute('aria-selected', 'true');
+});
+test('items do not automatically expand if wrapped in an open OverlayPanel', function () {
+  getComponentInOverlayPanel();
+  var row = screen.getAllByRole('row');
+  var selectedRow = row[0];
+  expect(selectedRow).not.toHaveAttribute('aria-selected', 'true');
 });

package/lib/components/AccordionGridItem/AccordionGridItemBody.js

@@ -52,7 +52,7 @@ var AccordionGridItemBody = /*#__PURE__*/forwardRef(function (props, ref) {
   }, mergedProps, {
     isSelected: isSelected,
     className: classNames,
-    "aria-label": ariaLabel || 'Grid Cell'
+    "aria-label": ariaLabel
   }), children);
 });
 AccordionGridItemBody.propTypes = {

package/lib/components/AccordionGridItem/AccordionGridItemHeader.js

@@ -76,7 +76,7 @@ var AccordionGridItemHeader = /*#__PURE__*/forwardRef(function (props, ref) {
     isSelected: isSelected,
     className: classNames
   }, others, {
-    "aria-label": ariaLabel || 'Grid Cell'
+    "aria-label": ariaLabel
   }), ___EmotionJSX(Box, {
     isRow: true
   }, children, ___EmotionJSX(Box, {

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

@@ -7,6 +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 { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-accordion';
 var defaultProps = {
@@ -16,6 +17,28 @@ var defaultProps = {
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(AccordionGroup, _extends({}, defaultProps, props), ___EmotionJSX(Item, {
+    key: "first",
+    textValue: "Duplicate",
+    "data-id": "first",
+    label: "Accordion item"
+  }, ___EmotionJSX(Text, null, "Render me!")), ___EmotionJSX(Item, {
+    key: "second",
+    textValue: "Duplicate",
+    "data-id": "second",
+    label: "Accordion item"
+  }, ___EmotionJSX(Text, null, "Render me!")), ___EmotionJSX(Item, {
+    key: "third",
+    textValue: "Duplicate",
+    "data-id": "third",
+    label: "Accordion item"
+  }, ___EmotionJSX(Text, null, "Render me!"))));
+};
+
+var getComponentInOverlayPanel = function getComponentInOverlayPanel() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(OverlayPanel, {
+    isOpen: true
+  }, ___EmotionJSX(AccordionGroup, _extends({}, defaultProps, props), ___EmotionJSX(Item, {
     key: "first",
     textValue: "Duplicate",
     "data-id": "first"
@@ -27,7 +50,7 @@ var getComponent = function getComponent() {
     key: "third",
     textValue: "Duplicate",
     "data-id": "third"
-  }, ___EmotionJSX(Text, null, "Render me!"))));
+  }, ___EmotionJSX(Text, null, "Render me!")))));
 }; // Need to be added to each test file to test accessibility using axe.
 
 
@@ -197,4 +220,10 @@ test('Item accepts a data-id and the data-id can be found in the DOM', function
   var selectedItem = buttons[0];
   var parentElement = selectedItem.parentElement;
   expect(parentElement).toHaveAttribute('data-id', 'first');
+});
+test('items do not automatically expand if wrapped in an open OverlayPanel', function () {
+  getComponentInOverlayPanel();
+  var buttons = screen.getAllByRole('button');
+  var selectedItem = buttons[0];
+  expect(selectedItem).not.toHaveAttribute('aria-expanded', 'true');
 });

package/lib/components/AccordionItem/AccordionItem.js

@@ -11,7 +11,7 @@ import { useAccordionItem } from '@react-aria/accordion';
 import { useButton } from '@react-aria/button';
 import { useFocusRing } from '@react-aria/focus';
 import { Text, Icon, Box } from '../../index';
-import { useAriaLabelWarning, useStatusClasses } from '../../hooks';
+import { useStatusClasses } from '../../hooks';
 import { AccordionContext } from '../../context/AccordionContext';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var AccordionItem = /*#__PURE__*/forwardRef(function (props, ref) {
@@ -72,12 +72,11 @@ var AccordionItem = /*#__PURE__*/forwardRef(function (props, ref) {
       buttonClasses = _useStatusClasses2.classNames;
 
   var ariaLabel = props['aria-label'] || item.props.label;
-  useAriaLabelWarning('AccordionItem', ariaLabel);
   return ___EmotionJSX(Box, _extends({
     variant: "accordion.accordion",
     className: itemClasses
   }, others, containerProps), ___EmotionJSX(ThemeUIButton, _extends({
-    "aria-label": ariaLabel || 'Accordion',
+    "aria-label": ariaLabel,
     ref: buttonRef,
     sx: {
       display: 'flex',
@@ -94,9 +93,11 @@ var AccordionItem = /*#__PURE__*/forwardRef(function (props, ref) {
     ml: "5px"
   }, ___EmotionJSX(Icon, {
     icon: isOpen ? MenuUp : MenuDown
-  }))), ___EmotionJSX(Box, _extends({
+  }))), isOpen && ___EmotionJSX(Box, _extends({
     variant: "accordion.accordionBody"
-  }, accordionRegionProps, regionProps), item.rendered));
+  }, accordionRegionProps, regionProps, {
+    className: itemClasses
+  }), item.rendered));
 });
 AccordionItem.propTypes = {
   'aria-label': PropTypes.string,

package/lib/components/Button/Button.js

@@ -21,7 +21,7 @@ import { useButton } from '@react-aria/button';
 import { useHover } from '@react-aria/interactions';
 import { useFocusRing } from '@react-aria/focus';
 import { mergeProps } from '@react-aria/utils';
-import { useAriaLabelWarning, useStatusClasses, usePropWarning } from '../../hooks';
+import { useStatusClasses, usePropWarning } from '../../hooks';
 import Loader from '../Loader';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Button = /*#__PURE__*/forwardRef(function (props, ref) {
@@ -70,9 +70,8 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
       classNames = _useStatusClasses.classNames;
 
   var ariaLabel = props['aria-label'];
-  useAriaLabelWarning('Button', ariaLabel);
   return ___EmotionJSX(ThemeUIButton, _extends({
-    "aria-label": ariaLabel || 'Button',
+    "aria-label": ariaLabel,
     ref: buttonRef,
     className: classNames,
     role: "button",

package/lib/components/Button/Button.stories.js

@@ -62,7 +62,8 @@ export var TextIconButton = function TextIconButton() {
 export var TextButton = function TextButton() {
   return ___EmotionJSX(Button, {
     mb: "sm",
-    variant: "text"
+    variant: "text",
+    "aria-label": "Add option"
   }, ___EmotionJSX(Text, {
     variant: "label",
     color: "active"

package/lib/components/Button/Button.test.js

@@ -7,7 +7,8 @@ import Button from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-button';
 var defaultProps = {
-  'data-testid': testId
+  'data-testid': testId,
+  'aria-label': 'Test button'
 };
 
 var getComponent = function getComponent() {

package/lib/components/ColorField/ColorField.js

@@ -108,6 +108,7 @@ var ColorField = /*#__PURE__*/forwardRef(function (props, ref) {
     return _concatInstanceProperty(_context2 = _concatInstanceProperty(_context3 = _concatInstanceProperty(_context4 = "rgba(".concat(colorValue === null || colorValue === void 0 ? void 0 : colorValue.red, ", ")).call(_context4, colorValue === null || colorValue === void 0 ? void 0 : colorValue.green, ", ")).call(_context3, colorValue === null || colorValue === void 0 ? void 0 : colorValue.blue, ", ")).call(_context2, colorValue === null || colorValue === void 0 ? void 0 : colorValue.alpha, ")");
   }, []);
   return ___EmotionJSX(Box, fieldContainerProps, label && ___EmotionJSX(Label, fieldLabelProps), ___EmotionJSX(Button, _extends({
+    "aria-label": "Select color",
     bg: getRgbaFromState(state),
     onPress: handleButtonPress,
     ref: triggerRef,

package/lib/components/ComboBoxField/ComboBoxField.js

@@ -116,6 +116,12 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
   useImperativeHandle(ref, function () {
     return inputRef.current;
   });
+  /* istanbul ignore next */
+
+  var onSelectionChangeHandler = function onSelectionChangeHandler(key) {
+    var newVal = key || selectedKey || '';
+    if (onSelectionChange) onSelectionChange(newVal);
+  };
 
   var _useFilter = useFilter({
     sensitivity: 'base'
@@ -123,6 +129,7 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
       contains = _useFilter.contains;
 
   var state = useComboBoxState(_objectSpread(_objectSpread({}, comboBoxOptions), {}, {
+    onSelectionChange: hasCustomValue ? onSelectionChangeHandler : onSelectionChange,
     defaultFilter: contains
   }));
 

package/lib/components/ComboBoxField/ComboBoxField.stories.js

@@ -330,6 +330,27 @@ export var ControlledFiltering = function ControlledFiltering() {
     }, item.name);
   }));
 };
+export var ControlledWithCustomValue = function ControlledWithCustomValue() {
+  var _useState9 = useState(''),
+      _useState10 = _slicedToArray(_useState9, 2),
+      inputValue = _useState10[0],
+      setInputValue = _useState10[1];
+
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({
+    label: "Example label",
+    defaultItems: items
+  }, actions, {
+    inputValue: inputValue,
+    selectedKey: inputValue,
+    onInputChange: setInputValue,
+    onSelectionChange: setInputValue,
+    hasCustomValue: true
+  }), function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.name
+    }, item.name);
+  }));
+};
 export var AllowCustomValue = function AllowCustomValue() {
   return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({
     label: "Example label",

package/lib/components/ComboBoxField/ComboBoxField.test.js

@@ -639,6 +639,41 @@ test('two listbox can not be open at the same time', function () {
     name: 'Tango'
   })).toBeInTheDocument();
 });
+test('should handle selecting custom option', function () {
+  getComponent({
+    hasCustomValue: true
+  });
+  var input = screen.queryByRole('combobox');
+  expect(input).toHaveValue(''); // type something
+
+  userEvent.type(input, 'custom'); // set input value as selected
+
+  userEvent.type(input, '{enter}', {
+    skipClick: true
+  });
+  expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(screen.queryByRole('combobox')).toHaveValue('custom'); // blur input
+
+  userEvent.tab();
+  expect(input).toHaveValue('custom');
+});
+test('onSelectionChange works properly with custom value', function () {
+  var onSelectionChange = jest.fn();
+  getComponent({
+    hasCustomValue: true,
+    onSelectionChange: onSelectionChange,
+    onInputChange: onSelectionChange
+  });
+  var input = screen.queryByRole('combobox');
+  expect(input).toHaveValue('');
+  expect(onSelectionChange).not.toHaveBeenCalled(); // Should fire when input value was typed, and enter was pressed
+
+  userEvent.type(input, 'custom{enter}');
+  expect(onSelectionChange).toHaveBeenCalledWith('custom'); // Should fire when input is cleared
+
+  userEvent.type(input, '{selectall}{backspace}{enter}');
+  expect(onSelectionChange).toHaveBeenCalledWith('');
+});
 test('should have no accessibility violations', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
   var _getComponent6, container, results;
 

package/lib/components/FileInputField/FileItem.js

@@ -37,7 +37,8 @@ var FileItem = function FileItem(props) {
 
       default:
         return {
-          icon: InsertDriveFileIcon
+          icon: InsertDriveFileIcon,
+          color: 'neutral.10'
         };
     }
   }, [status]);

package/lib/components/IconButton/IconButton.js

@@ -83,7 +83,7 @@ var IconButton = /*#__PURE__*/forwardRef(function (props, ref) {
     tabIndex: 0,
     ref: buttonRef,
     className: classNames,
-    "aria-label": ariaLabel || 'Icon Button',
+    "aria-label": ariaLabel,
     sx: chipBg && isHovered && {
       'path': {
         fill: chipBg

package/lib/components/IconButton/IconButton.stories.js

@@ -35,29 +35,23 @@ export default {
     isDisabled: {},
     variant: {
       control: {
-        type: 'none'
-      }
+        type: 'select',
+        options: ['iconButton', 'inverted', 'square', 'invertedSquare']
+      },
+      defaultValue: 'iconButton'
     }
   }
 };
 export var Default = function Default(args) {
   return ___EmotionJSX(IconButton, _extends({
-    "aria-label": "my-label"
+    "aria-label": "default icon button"
   }, args), ___EmotionJSX(Icon, {
     icon: CreateIcon
   }));
 };
-export var Inverted = function Inverted() {
-  return ___EmotionJSX(IconButton, {
-    "aria-label": "my-label",
-    variant: "inverted"
-  }, ___EmotionJSX(Icon, {
-    icon: CreateIcon
-  }));
-};
 export var WithTooltip = function WithTooltip() {
   return ___EmotionJSX(IconButton, {
-    "aria-label": "my-label",
+    "aria-label": "icon button with tooltip",
     title: "Edit"
   }, ___EmotionJSX(Icon, {
     icon: CreateIcon
@@ -65,7 +59,7 @@ export var WithTooltip = function WithTooltip() {
 };
 export var Disabled = function Disabled() {
   return ___EmotionJSX(IconButton, {
-    "aria-label": "my-label",
+    "aria-label": "disabled icon button",
     isDisabled: true
   }, ___EmotionJSX(Icon, {
     icon: CreateIcon

package/lib/components/IconButton/IconButton.test.js

@@ -17,7 +17,8 @@ var Icon = function Icon(props) {
 var testId = 'test-button';
 var defaultProps = {
   'data-testid': testId,
-  icon: Icon
+  icon: Icon,
+  'aria-label': 'Create'
 };
 
 var getComponent = function getComponent() {
@@ -115,10 +116,8 @@ test('tooltip is not shown on hover or focus when prop is not passed', function
   expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
 });
 test('the button should be getting aria label attribute', function () {
-  var testLabel = 'test label';
-  getComponent({
-    'aria-label': testLabel
-  });
+  var testLabel = defaultProps['aria-label'];
+  getComponent();
   expect(screen.getByLabelText(testLabel)).toBeInTheDocument();
 });
 test('show button isDisabled status', function () {

package/lib/components/ImageUploadField/ImagePreviewButton.js

@@ -92,7 +92,8 @@ var ImagePreviewButton = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: buttonRef,
     variant: "imageUpload",
     sx: widthHeightSx,
-    "data-testid": "image-preview-button"
+    "data-testid": "image-preview-button",
+    "aria-label": "Image preview"
   }, mergeProps(focusProps, others)), previewImage && isImageType ? imagePreview : noImagePreview, isLoading && loadingPreview, (isHovered || isFocusVisible) && !isLoading && hoveredPreview));
 });
 ImagePreviewButton.propTypes = {

package/lib/components/List/List.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 import React, { forwardRef } from 'react';
 import Box from '../Box/Box';
+import { useDeprecationWarning } from '../../hooks';
 /**
  * The intended use of List is to hold a collection of <ListItem/> components.
  * Accepts most of the styling props from [styled-system](https://styled-system.com/table).
@@ -12,6 +13,7 @@ var List = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
       others = _objectWithoutProperties(props, ["children"]);
 
+  useDeprecationWarning('The  List component will be deprecated in Astro-UI 2.0.0, use ListView instead.');
   return ___EmotionJSX(Box, _extends({
     ref: ref,
     role: "list",

package/lib/components/List/List.stories.js

@@ -3,10 +3,14 @@ import List from '.';
 import ListItem from '../ListItem';
 import Text from '../Text';
 import Separator from '../Separator';
+import withDeprecationWarning from '../../utils/devUtils/decorators/withDeprecationWarning';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'List',
-  component: [List, ListItem]
+  title: 'Deprecated/List',
+  component: [List, ListItem],
+  decorators: [function (Story, context) {
+    return withDeprecationWarning(Story, context, 'The `List` component will be deprecated in Astro-UI 2.0.0, use `ListView` instead.');
+  }]
 };
 export var Default = function Default() {
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Text, {

package/lib/components/ListBox/ListBox.js

@@ -24,7 +24,6 @@ import { useCollator } from '@react-aria/i18n';
 import { ListLayout } from '@react-stately/layout';
 import { ListBoxContext } from './ListBoxContext';
 import { Option } from './index.js';
-import { useAriaLabelWarning } from '../../hooks';
 import { isIterableProp } from '../../utils/devUtils/props/isIterable';
 import Loader from '../Loader';
 import ListBoxSection from './ListBoxSection';
@@ -77,13 +76,12 @@ var ListBox = /*#__PURE__*/forwardRef(function (props, ref) {
       selectedKeys = props.selectedKeys,
       selectionMode = props.selectionMode,
       state = props.state,
+      ariaLabel = props['aria-label'],
       ariaLabelledby = props['aria-labelledby'],
       ariaDescribedby = props['aria-describedby'],
       ariaDetails = props['aria-details'],
-      others = _objectWithoutProperties(props, ["defaultSelectedKeys", "disabledKeys", "hasAutoFocus", "hasFocusWrap", "hasNoEmptySelection", "hasVirtualFocus", "id", "isLoading", "isFocusedOnHover", "isSelectedOnPressUp", "isVirtualized", "items", "keyboardDelegate", "label", "onLoadMore", "onScroll", "onSelectionChange", "renderEmptyState", "selectedKeys", "selectionMode", "state", "aria-labelledby", "aria-describedby", "aria-details"]);
+      others = _objectWithoutProperties(props, ["defaultSelectedKeys", "disabledKeys", "hasAutoFocus", "hasFocusWrap", "hasNoEmptySelection", "hasVirtualFocus", "id", "isLoading", "isFocusedOnHover", "isSelectedOnPressUp", "isVirtualized", "items", "keyboardDelegate", "label", "onLoadMore", "onScroll", "onSelectionChange", "renderEmptyState", "selectedKeys", "selectionMode", "state", "aria-label", "aria-labelledby", "aria-describedby", "aria-details"]);
 
-  var ariaLabel = props['aria-label'];
-  useAriaLabelWarning('ListBox', ariaLabel);
   var focusStrategy = state.focusStrategy; // Object matching React Aria API with all options
 
   var listBoxOptions = {
@@ -107,7 +105,7 @@ var ListBox = /*#__PURE__*/forwardRef(function (props, ref) {
     shouldFocusWrap: hasFocusWrap,
     shouldSelectOnPressUp: isSelectedOnPressUp,
     shouldUseVirtualFocus: hasVirtualFocus,
-    'aria-label': ariaLabel || 'ListBox',
+    'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledby,
     'aria-describedby': ariaDescribedby,
     'aria-details': ariaDetails