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

package/lib/components/CodeView/CodeView.test.js

@@ -0,0 +1,171 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
+import _trimInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/trim";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context5; _forEachInstanceProperty(_context5 = ownKeys(Object(source), true)).call(_context5, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context6; _forEachInstanceProperty(_context6 = ownKeys(Object(source))).call(_context6, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import axeTest from '../../utils/testUtils/testAxe';
+import { act, fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
+import { CodeView } from '../..';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var testId = 'test-code-sample';
+
+var originalClipboard = _objectSpread({}, global.navigator.clipboard);
+
+var originalExecCommand = global.document.execCommand;
+var defaultProps = {
+  'data-testid': testId
+};
+var textValue = "\nexport const Default = args => (\n  <>\n    <Text sx={{ fontWeight: 2 }}>JSON</Text>\n    <CodeView {...args} />\n  </>\n);\n";
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(CodeView, _extends({}, defaultProps, props), textValue));
+}; // Need to be added to each test file to test accessibility using axe.
+
+
+axeTest(getComponent);
+test('renders component in the default state', function () {
+  getComponent();
+  var container = screen.getByTestId(testId);
+  expect(container).toBeInstanceOf(HTMLDivElement);
+  expect(container).toBeInTheDocument();
+});
+test('tooltip renders on hover', function () {
+  getComponent();
+  var container = screen.getByTestId(testId);
+  fireEvent.mouseMove(container);
+  fireEvent.mouseEnter(container);
+  expect(screen.queryByRole('tooltip')).toBeInTheDocument();
+  expect(screen.queryByRole('tooltip')).toHaveTextContent('Copy to clipboard');
+});
+test('content and copy button are focused via keyboard', function () {
+  getComponent();
+  var container = screen.getByTestId(testId);
+  expect(container).not.toHaveFocus();
+  userEvent.tab();
+  expect(container).toHaveFocus();
+  var copyBtn = screen.getByLabelText('copy');
+  expect(copyBtn).not.toHaveFocus();
+  userEvent.tab();
+  expect(copyBtn).toHaveFocus();
+  expect(copyBtn).toHaveClass('is-focused');
+});
+test('doesn\'t render copy button and tooltip with prop hasNoCopyButton', function () {
+  getComponent({
+    hasNoCopyButton: true
+  });
+  var container = screen.getByTestId(testId);
+  fireEvent.mouseMove(container);
+  fireEvent.mouseEnter(container);
+  expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+  expect(screen.queryByLabelText('copy')).not.toBeInTheDocument();
+});
+test('renders line numbers with prop hasLineNumbers', function () {
+  var linesLength = (_trimInstanceProperty(textValue).call(textValue).split('\n').length - 1).toString();
+  getComponent();
+  expect(screen.queryByText('1')).not.toBeInTheDocument();
+  expect(screen.queryByText(linesLength)).not.toBeInTheDocument();
+  getComponent({
+    hasLineNumbers: true
+  });
+  expect(screen.queryByText('1')).toBeInTheDocument();
+  expect(screen.queryByText(linesLength)).toBeInTheDocument();
+});
+beforeEach(function () {
+  var mockClipboard = {
+    writeText: jest.fn()
+  };
+  global.navigator.clipboard = mockClipboard;
+  global.document.execCommand = jest.fn();
+  global.document.execCommand.mockReturnValue(true);
+});
+afterEach(function () {
+  jest.resetAllMocks();
+  global.navigator.clipboard = originalClipboard;
+  global.document.execCommand = originalExecCommand;
+});
+test('click on copy button copies data to the clipboard', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+  var button;
+  return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+    while (1) {
+      switch (_context2.prev = _context2.next) {
+        case 0:
+          getComponent();
+          button = screen.getByLabelText('copy');
+          _context2.next = 4;
+          return act( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+            return _regeneratorRuntime.wrap(function _callee$(_context) {
+              while (1) {
+                switch (_context.prev = _context.next) {
+                  case 0:
+                    return _context.abrupt("return", userEvent.click(button));
+
+                  case 1:
+                  case "end":
+                    return _context.stop();
+                }
+              }
+            }, _callee);
+          })));
+
+        case 4:
+          expect(navigator.clipboard.writeText).toBeCalledTimes(1);
+          expect(navigator.clipboard.writeText).toHaveBeenCalledWith(textValue);
+
+        case 6:
+        case "end":
+          return _context2.stop();
+      }
+    }
+  }, _callee2);
+})));
+test('after button click, the tooltip renders with the text "Copied!"', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+  var button;
+  return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+    while (1) {
+      switch (_context4.prev = _context4.next) {
+        case 0:
+          getComponent();
+          button = screen.getByLabelText('copy');
+          _context4.next = 4;
+          return act( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+            return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+              while (1) {
+                switch (_context3.prev = _context3.next) {
+                  case 0:
+                    return _context3.abrupt("return", userEvent.click(button));
+
+                  case 1:
+                  case "end":
+                    return _context3.stop();
+                }
+              }
+            }, _callee3);
+          })));
+
+        case 4:
+          expect(screen.queryByRole('tooltip')).toBeInTheDocument();
+          expect(screen.queryByRole('tooltip')).toHaveTextContent('Copied!');
+
+        case 6:
+        case "end":
+          return _context4.stop();
+      }
+    }
+  }, _callee4);
+})));

package/lib/components/CodeView/index.js

@@ -0,0 +1 @@
+export { default } from './CodeView';

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/CopyText/CopyText.js

@@ -1,8 +1,8 @@
-import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-import React, { forwardRef, useEffect, useState } from 'react';
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useFocusRing } from '@react-aria/focus';
 import { Pressable, useHover } from '@react-aria/interactions';
@@ -14,19 +14,20 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 
 var TooltipWrapper = function TooltipWrapper(_ref) {
   var children = _ref.children,
-      isOpen = _ref.isOpen,
-      tooltip = _ref.tooltip;
-  return ___EmotionJSX(TooltipTrigger, {
+      tooltip = _ref.tooltip,
+      others = _objectWithoutProperties(_ref, ["children", "tooltip"]);
+
+  return ___EmotionJSX(TooltipTrigger, _extends({
     key: tooltip,
     direction: "top",
     isNotFlippable: true,
-    isOpen: isOpen,
     offset: 5
-  }, children, ___EmotionJSX(Tooltip, null, tooltip));
+  }, others), children, ___EmotionJSX(Tooltip, null, tooltip));
 };
 
 TooltipWrapper.propTypes = {
   isOpen: PropTypes.bool,
+  targetRef: PropTypes.shape({}),
   tooltip: PropTypes.string
 };
 /**
@@ -38,7 +39,9 @@ var CopyText = /*#__PURE__*/forwardRef(function (props, ref) {
       textToCopy = props.textToCopy,
       tooltipText = props.tooltipText,
       mode = props.mode,
-      others = _objectWithoutProperties(props, ["children", "textToCopy", "tooltipText", "mode"]);
+      tooltipProps = props.tooltipProps,
+      wrapperProps = props.wrapperProps,
+      others = _objectWithoutProperties(props, ["children", "textToCopy", "tooltipText", "mode", "tooltipProps", "wrapperProps"]);
 
   var value = textToCopy || (mode === 'link' ? children.props.href : children.props.children);
 
@@ -75,13 +78,28 @@ var CopyText = /*#__PURE__*/forwardRef(function (props, ref) {
     return undefined;
   }, [isCopied]);
   var copyToClipboard = useCopyToClipboard(value, setIsCopied);
-  var content = mode === 'link' ? children : ___EmotionJSX(Button, _extends({
+  var content = mode === 'link' || mode === 'nonClickableContent' ? children : ___EmotionJSX(Button, _extends({
     variant: "quiet",
     onPress: copyToClipboard,
     "aria-label": "copy-content"
   }, focusProps), children);
   var tooltip = isCopied ? 'Copied!' : tooltipText;
   var isTooltipOpen = isFocusVisible || isHovered || isCopied;
+  var wrapperRef = useRef();
+
+  if (mode === 'nonClickableContent') {
+    return ___EmotionJSX(TooltipWrapper, _extends({
+      isOpen: isTooltipOpen,
+      tooltip: tooltip,
+      targetRef: wrapperRef
+    }, tooltipProps), ___EmotionJSX(Box, _extends({
+      ref: wrapperRef,
+      isRow: true,
+      tabIndex: 0
+    }, mergeProps(hoverProps, others), wrapperProps), content, ___EmotionJSX(CopyButton, _extends({
+      onPress: copyToClipboard
+    }, focusProps))));
+  }
 
   if (mode === 'link') {
     return ___EmotionJSX(Box, _extends({
@@ -109,13 +127,19 @@ var CopyText = /*#__PURE__*/forwardRef(function (props, ref) {
 });
 CopyText.propTypes = {
   /** The behavioral pattern to apply to the component. */
-  mode: PropTypes.oneOf(['text', 'link']),
+  mode: PropTypes.oneOf(['text', 'link', 'nonClickableContent']),
 
   /** The text to be copied instead of the text inside the child component. */
   textToCopy: PropTypes.string,
 
   /** The text to be displayed in the tooltip. */
-  tooltipText: PropTypes.string
+  tooltipText: PropTypes.string,
+
+  /** Props to apply to the tooltip in nonClickableContent mode. */
+  tooltipProps: PropTypes.shape({}),
+
+  /** Props to apply to the wrapper in nonClickableContent mode. */
+  wrapperProps: PropTypes.shape({})
 };
 CopyText.defaultProps = {
   mode: 'text',

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

package/lib/components/ListBox/ListBox.test.js

@@ -29,11 +29,13 @@ var itemsWithSections = [{
 }];
 var defaultProps = {
   'data-testid': testId,
+  'aria-label': 'listbox',
   'aria-labelledby': 'label',
   items: items
 };
 var defaultWithSectionsProps = {
   'data-testid': testId,
+  'aria-label': 'listbox',
   'aria-labelledby': 'label',
   items: itemsWithSections
 };

package/lib/components/ListBox/Option.js

@@ -63,7 +63,13 @@ var Option = /*#__PURE__*/forwardRef(function (props, ref) {
     isSelected: isSelected
   }),
       classNames = _useStatusClasses.classNames;
+  /* Related to UIP-4992
+   * Need to remove these properties to avoid errors in the console on the external app.
+   * By the way, these properties return "undefined", so it shouldn't create issues */
 
+
+  delete optionProps.onPressStart;
+  delete optionProps.onPressUp;
   return ___EmotionJSX(Box, _extends({
     as: "li",
     isRow: true,

package/lib/components/Messages/Message.js

@@ -20,8 +20,8 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 export var icons = {
   "default": AlertCircleOutlineIcon,
   success: CheckCircleIcon,
-  error: AlertCircleOutlineIcon,
-  warning: AlertCircleIcon
+  error: AlertCircleIcon,
+  warning: AlertCircleOutlineIcon
 };
 
 var CloseButton = function CloseButton(_ref) {

package/lib/components/MultivaluesField/MultivaluesField.js

@@ -311,7 +311,8 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     hasAutoFocus: hasAutoFocus,
     hasVirtualFocus: true,
     hasNoEmptySelection: true,
-    state: state
+    state: state,
+    "aria-label": "List of options"
   })), ___EmotionJSX(DismissButton, {
     onDismiss: close
   }));

package/lib/components/NavBar/NavBar.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import Box from '../Box/Box';
+/**
+ * Composed component that spreads children.
+ *
+ * This component is built to have the NavBarSection component passed into it.
+ *
+ * NavBarSection is an iterative component that
+ * will build an AccordionGridGroup using
+ * the array of objects that is passed into it.
+ *
+ */
+
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var NavBar = function NavBar(props) {
+  return ___EmotionJSX(Box, {
+    variant: "boxes.navBar",
+    role: "navigation",
+    as: "nav"
+  }, props.children);
+};
+
+export default NavBar;