@pingux/astro 2.0.0-beta.0 → 2.0.0-rc.0

package/CHANGELOG.md

@@ -3,6 +3,66 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.44.1](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.44.0...@pingux/astro@1.44.1) (2023-03-22)
+
+**Note:** Version bump only for package @pingux/astro
+
+
+
+
+
+# [1.44.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.43.0...@pingux/astro@1.44.0) (2023-03-21)
+
+
+### Bug Fixes
+
+* [UIP-6040] NumberField: fix increment and decrement buttons focus ([9147d19](https://gitlab.corp.pingidentity.com/ux/pingux/commit/9147d196d8e07b7040ae2c1e5d835c37ee24a7a3))
+* [UIP-6114] Overlay Panel Colorfield Doesnt Update ([f806c76](https://gitlab.corp.pingidentity.com/ux/pingux/commit/f806c761101ccf8b28b7338cb95a66821295effd))
+* [UIP-6180] Update Close Button Aria Label ([f0489f8](https://gitlab.corp.pingidentity.com/ux/pingux/commit/f0489f8a6249afecf468d7c9a6f7cb60ea95210b))
+* [UIP-6182] Add aria-labels to list-item buttons ([634a755](https://gitlab.corp.pingidentity.com/ux/pingux/commit/634a755a4e313eb38940c1bba6fd87ba202073f3))
+* [UIP-6184] OverlayPanel: add visibility css prop ([8b69e03](https://gitlab.corp.pingidentity.com/ux/pingux/commit/8b69e030a933cf968336dbc73060fb1a72973b05))
+* [UIP-6194] Update PageHeader Recipe to match mock changes ([401f62f](https://gitlab.corp.pingidentity.com/ux/pingux/commit/401f62fcc280a58c4bdbaf92221a5b79e10ea164))
+* [UIP-6200] CollapsiblePanel Breadcrumbs Accessibility ([e0b569c](https://gitlab.corp.pingidentity.com/ux/pingux/commit/e0b569cc9ccc7b4ac79dde7807a6c1ff22e1d1a8))
+* [UIP-6202] Multivalues Select Item Screen Reader ([26e7571](https://gitlab.corp.pingidentity.com/ux/pingux/commit/26e7571076e04083d45af742cf40f0f6cf589fe0))
+
+
+### Features
+
+* [UIP-6206] Add requirementsListProps to PasswordField ([705f977](https://gitlab.corp.pingidentity.com/ux/pingux/commit/705f9777f0d8c5ce2841c1a649eb57d5e013ad0f))
+
+
+
+
+
+# [1.43.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.42.3...@pingux/astro@1.43.0) (2023-03-16)
+
+
+### Bug Fixes
+
+* [UIP-6152] UI Library overrides doesn't override hover for some buttons ([ed8b4b6](https://gitlab.corp.pingidentity.com/ux/pingux/commit/ed8b4b67661cf197c20eb1f2618942caabc18487))
+* [UIP-6183] Table Cell Support Ellipsis ([b564a3a](https://gitlab.corp.pingidentity.com/ux/pingux/commit/b564a3a85eebfff3c97fbce68b937226d0de2629))
+* [UIP-6203]: add useCopyToClipboard to list of hook exports ([66580ec](https://gitlab.corp.pingidentity.com/ux/pingux/commit/66580ec2322ae9ed3e5df6f6e23aa5cfb1b22c50))
+
+
+### Features
+
+* [UIP-6092] NavBar: possibility to add external link as primary item ([a6d3208](https://gitlab.corp.pingidentity.com/ux/pingux/commit/a6d320899b183b21f718122d86334595cbe46d1c))
+
+
+
+
+
+## [1.42.3](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.42.2...@pingux/astro@1.42.3) (2023-03-07)
+
+
+### Bug Fixes
+
+* [UIP-6181] DataTable error ([a99481e](https://gitlab.corp.pingidentity.com/ux/pingux/commit/a99481e31c31e74619cff883a7fde3c2da7a7ba5))
+
+
+
+
+
 ## [1.42.2](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.42.1...@pingux/astro@1.42.2) (2023-02-22)
 
 

package/README.md

@@ -1,6 +1,6 @@
 # `@pingux/astro`
 
-Astro is a lightweight, composable, and themeable React component library. Astro was created to help developers and designers create consistent, user friendly, and accessible UIs across all Ping products. Please visit https://pingidentity.design for more information and to read individual component documentation.
+Astro is a lightweight, composable, and themeable React component library. Astro was created to help developers and designers create consistent, user friendly, and accessible UIs across all Ping products. Please visit https://pingidentity.design for more information. To read individual component documentation, [our Storybook docs site](https://storybook.pingidentity.design) is a great resource.
 
 ## Installing
 
@@ -21,8 +21,8 @@ Yarn:
 
 All apps should be wrapped in an `<AstroWrapper>` for full functionality and styling.
 
-```
-import { AstroWrapper } from ‘@pingux/astro’;
+```js
+import { AstroWrapper } from '@pingux/astro';
 
 <AstroWrapper>
   <App />
@@ -37,9 +37,9 @@ Astro uses [Storybook](https://storybook.js.org/) for component documentation. O
 
 The Storybook server defaults to `https://localhost:6006`. This port can be customized by running the command start -p 9009. For example, this will start Storybook on port 9009. More information on customizing Storybook CLI options can be found at https://storybook.js.org/docs/react/api/cli-options. 
 
-Component prop documentation is available under the “documentation” tab per each component story. Most props can be toggled and configured for preview purposes within the prop table.
+Component prop documentation is available under the "documentation" tab per each component story. Most props can be toggled and configured for preview purposes within the prop table.
 
-For example, to view the disabled button styling, navigate to the Button story’s props table, locate the “isDisabled” prop, and toggle to “true”. This change allows you to preview the disabled button’s styling and functionality.
+For example, to view the disabled button styling, navigate to the Button story’s props table, locate the "isDisabled" prop, and toggle to "true". This change allows you to preview the disabled button’s styling and functionality.
 
 ## Yarn
 We use a modern version of [Yarn](https://yarnpkg.com/getting-started) for package management with the [Plug'n'Play](https://yarnpkg.com/features/pnp) feature enabled. This allows for a [Zero Install](https://yarnpkg.com/features/zero-installs) approach to be used.

package/lib/MIGRATION.md

@@ -0,0 +1,100 @@
+# Astro Version Migration Guide
+This document contains detailed information about breaking and non-breaking changes between versions and how to migrate from one version to another.
+
+
+1. [Troubleshooting](#troubleshooting)
+2. [1.x to 2.0.0](#1.x-to-2.0.0)
+    1. Introduction
+    2. Why Update
+    3. Non-breaking Changes
+        1. Yarn 2 Upgrade
+    5. Breaking Changes
+        1. Theme Restructuring
+        2. Deprecated Components and Variants
+        3. Field Component Prop Refactoring
+
+## Troubleshooting
+For internal Ping users please reach out via #ui-astro or a UX Development team member.
+For external users, please reach out via ux-development@pingidentity.com or open an issue in our GitHub repo.
+
+## 1.x to 2.0.0
+
+### Introduction
+V1 of the Astro component library was released in December of 2021. Since its initial release, the UX development team has identified areas of improvement including required dependency upgrades, removal of deprecated components and design patterns, and prop consistency. Unfortunately, necessary upgrades will potentially require breaking changes which must be released in a major version.
+
+**It is important to note this is not a design system change.** There will be no major visual design or design pattern changes.
+
+### Why Update
+The UX Development team recommends upgrading ASAP for continued support for the Astro library. UX Development will not be continuing 1.x development so if you need any future fixes or enhancements, you’ll need to update eventually.
+
+We’ve also written an ESLint plugin - `eslint-plugin-pingux-astro` - that should help point out code which needs to be changed. This includes linting rules for variant name changes and deprecated components.
+
+### Non-breaking Changes
+
+#### Yarn 2 Upgrade
+Upgrading to Yarn 2 offers several benefits to developers, including:
+
+* Improved performance
+* Better support for monorepos
+* Enhanced security
+* Improved developer experience
+
+Upgrading Astro to utilize Yarn 2 also guarantees that it will not impede applications that rely on Astro from following suit. A [migration guide](https://yarnpkg.com/getting-started/migration) is available for reference if your team is interested in making the switch.
+
+### Breaking Changes
+
+#### Theme Restructuring
+
+The structure of the Astro theme has been altered in Astro V2. While variants used internally by components should be updated automatically, this may cause breaking changes and visual regressions if custom variants and themes are not properly remapped. To identify which variant mappings have been changed and their updates, please take the following steps:
+1. Follow the install steps in the README within the [ESLint Plugin for Astro repo](https://gitlab.corp.pingidentity.com/ux/eslint-plugin-pingux-astro).
+2. After upgrading to Astro V2, run `yarn lint`.
+3. The linter should return a series of warnings that detail the old variant mapping and the new one suggested.
+4. Depending on your code editor, you should be able to find and replace all instances of the old variant with the new variant mappings. Re-run yarn lint after replacing to ensure the update has been made and there are no visual regressions.
+
+If you have custom themes built and applied (not those shipped with the Astro library - astro-nano, end-user, uiLibraryOverride) and have questions about the restructuring please reach out via #ui-astro.
+
+#### Deprecated Components and Variants
+The following components and variants have been removed from the Astro Library. Please see the table below for replacement suggestions:
+
+|Component / Variant|Replacement|
+|---|---|
+|List Component|ListView Component|
+|Modal, Variant=”dark”|No replacement, this style should not be used.|
+|Button, Variant= “icon”|IconButton Component|
+|Button, Variant=”danger”|Variant=”critical”|
+|Button, Variant=”text”|Variant=”link”|
+|Chip|Renamed to Badge|
+|Variants with “chip” in the name|The text has been swapped from “chip” to “badge” in all cases|
+
+
+
+#### Field Component Prop Refactoring
+Astro’s field components are composed components consisting of a wrapper, label, input, and help text. In order to help user’s better target specific elements these components contain the following props:  
+
+|Prop|Target|
+|---|---|
+|ContainerProps|Surrounds the label, wrapper, control, and help text|
+|WrapperProps|Directly surrounds the control|
+|ControlProps|The input|
+|LabelProps|The label|
+
+
+
+However, some field components did not include these props or they were not placed consistently in V1. The following components have changes, highlighted components are considered to have breaking changes:
+
+
+|Component|Updates|
+|---|---|
+|ColorField|Wrapper has been added and accepts wrapperProps|
+|ComboBox|Wrapper has been moved to consistently match other container to inside to target the control|
+|FileInputField|containerProps and wrapperProps have been switched|
+|ImageUploadField|Now accepts wrapperProps|
+|NumberField|Wrapper box now accepts wrapperProps|
+|PasswordField|Wrapper box now accepts wrapperProps|
+|RadioField|Wrapper box added and now accepts wrapperProps|
+|SearchField|Wrapper box now accepts wrapperProps|
+|SelectField|Wrapper box added and now accepts wrapperProps|
+|SwitchField|Wrapper box added and now accepts wrapperProps|
+|TextAreaField|Wrapper box added and now accepts wrapperProps|
+
+

package/lib/README.md

@@ -0,0 +1,92 @@
+# `@pingux/astro`
+
+Astro is a lightweight, composable, and themeable React component library. Astro was created to help developers and designers create consistent, user friendly, and accessible UIs across all Ping products. Please visit https://pingidentity.design for more information. To read individual component documentation, [our Storybook docs site](https://storybook.pingidentity.design) is a great resource.
+
+## Installing
+
+To consume Astro within your own project, install it via NPM or Yarn.
+
+NPM: 
+`npm install @pingux/astro`
+
+Yarn: 
+`yarn add @pingux/astro`
+
+## Requirements
+
+- Node: 16+
+- React: 16.8+
+
+## Usage
+
+All apps should be wrapped in an `<AstroWrapper>` for full functionality and styling.
+
+```js
+import { AstroWrapper } from '@pingux/astro';
+
+<AstroWrapper>
+  <App />
+</AstroWrapper>
+```
+
+## Running Storybook Locally
+
+Astro uses [Storybook](https://storybook.js.org/) for component documentation. Once Astro has been cloned, run the following commands to start a local Storybook server:
+
+`yarn start`
+
+The Storybook server defaults to `https://localhost:6006`. This port can be customized by running the command start -p 9009. For example, this will start Storybook on port 9009. More information on customizing Storybook CLI options can be found at https://storybook.js.org/docs/react/api/cli-options. 
+
+Component prop documentation is available under the "documentation" tab per each component story. Most props can be toggled and configured for preview purposes within the prop table.
+
+For example, to view the disabled button styling, navigate to the Button story’s props table, locate the "isDisabled" prop, and toggle to "true". This change allows you to preview the disabled button’s styling and functionality.
+
+## Yarn
+We use a modern version of [Yarn](https://yarnpkg.com/getting-started) for package management with the [Plug'n'Play](https://yarnpkg.com/features/pnp) feature enabled. This allows for a [Zero Install](https://yarnpkg.com/features/zero-installs) approach to be used.
+
+## Browser Compatibility
+
+Astro fully supports the following browsers and versions:
+
+| Browser     | Version     |
+| ----------- | ----------- |
+| Chrome      | 80+         |
+| Firefox     | 76+         |
+| Safari      | 12+         |
+| Edge        | 44+         |
+
+
+Support for IE11 is left up to developers and is not tested by the Astro team. Polyfills are necessary for full functionality.
+
+## Changelog
+
+Astro’s [changelog](CHANGELOG.md) notes all features and bug fixes within each release. Refactors and documentation updates are not included within the changelog.
+
+## Contributing and Bug Reports
+
+Astro is closed for open contributions. However, we are appreciative of bug reports and suggestions. Please use GitHub Issues to submit bug reports and suggestions.
+
+## VS Code Linting
+The Astro development team prefers to use VS Code as a code editor. To enable code highlighting and autolinting on save you will need to install the ESLint, Prettier and ZipFS plugins, plus add the 
+following settings in your `settings.json` file. 
+
+```
+{
+  "eslint.format.enable": true,
+  "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": true
+  },
+  "eslint.validate": [
+      "javascript",
+  ],
+}
+```
+
+You will need to have the monorepo open at the root directory in VS Code for linting and highlighting to work.
+
+Note: To make linting and highlighting work with Yarn 2, `yarn dlx @yarnpkg/sdks vscode` needs to be run in the root directory of the monorepo. If any changes are made to any 
+ESLint packages or versions these features may stop working. Run this command again to solve the issue. Be sure to commit the changes so others don't run into the same issue. 
+
+## Licensing
+
+This project is licensed under the Apache license. See the [LICENSE](LICENSE) file for more information.

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

@@ -65,7 +65,6 @@ var Default = function Default() {
       isLast: index === anyConditions.length - 1
     }), (0, _react2.jsx)(_index.Box, {
       mt: "md",
-      ml: "xs",
       variant: "forms.input.fieldControlWrapper",
       bg: "white",
       isRow: true,

package/lib/cjs/components/Button/Button.js

@@ -56,6 +56,8 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _useFocusRing = (0, _reactAria.useFocusRing)(),
     isFocusVisible = _useFocusRing.isFocusVisible,
     focusProps = _useFocusRing.focusProps;
+  var _usePress = (0, _interactions.usePress)(buttonRef),
+    isPressedFromContext = _usePress.isPressed;
   var _useButton = (0, _reactAria.useButton)(_objectSpread({
       elementType: 'button'
     }, props), buttonRef),
@@ -66,7 +68,7 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     isHovered = _useHover.isHovered;
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
       isHovered: isHovered,
-      isPressed: isPressed,
+      isPressed: isPressed || isPressedFromContext,
       isFocused: isFocusVisible,
       isDisabled: isDisabled
     }),

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

@@ -208,13 +208,17 @@ var CollapsiblePanelWithBadge = function CollapsiblePanelWithBadge(args) {
   }), (0, _react2.jsx)(_index.Breadcrumbs, {
     icon: _ChevronRightIcon["default"]
   }, (0, _react2.jsx)(_index.Item, {
+    "aria-label": "Ed Nepomuceno",
+    "data-id": "home",
+    href: "https://www.pingidentity.com",
     key: "home",
-    variant: "link",
-    "data-id": "home"
+    variant: "buttons.link"
   }, "Ed Nepomuceno"), (0, _react2.jsx)(_index.Item, {
+    "aria-label": "edit groups",
+    "data-id": "editGroups",
+    href: "https://www.pingidentity.com",
     key: "editGroups",
-    variant: "variants.collapsiblePanel.neutralText",
-    "data-id": "editGroups"
+    variant: "buttons.link"
   }, "Edit Groups"))), (0, _react2.jsx)(_index.Box, {
     isRow: true
   }, (0, _react2.jsx)(_index.IconButton, {

package/lib/cjs/components/ComboBox/ComboBoxInput.js

@@ -58,22 +58,19 @@ var ComboBoxInput = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     onSelectionChange = props.onSelectionChange,
     wrapperProps = props.wrapperProps,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  var _useHover = (0, _interactions.useHover)({}),
-    hoverProps = _useHover.hoverProps,
-    isHovered = _useHover.isHovered;
   var textFieldProps = _objectSpread({
     isDisabled: isDisabled,
     isReadOnly: isReadOnly,
-    containerProps: _objectSpread(_objectSpread({
-      sx: style,
-      variant: 'forms.comboBox.container'
-    }, hoverProps), containerProps)
+    containerProps: containerProps
   }, (0, _reactAria.mergeProps)(inputProps, others));
 
   // istanbul ignore next
   (0, _react.useImperativeHandle)(ref, function () {
     return inputRef.current;
   });
+  var _useHover = (0, _interactions.useHover)({}),
+    hoverProps = _useHover.hoverProps,
+    isHovered = _useHover.isHovered;
 
   // START - minimum delay time for loading indicator = 500ms
   var _useState = (0, _react.useState)(false),
@@ -138,10 +135,14 @@ var ComboBoxInput = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     focusClass: "is-focused",
     focusRingClass: "focus-ring",
     autoFocus: hasAutoFocus
-  }, (0, _react2.jsx)(_.TextField, (0, _extends2["default"])({}, textFieldProps, {
-    wrapperProps: _objectSpread({
+  }, (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+    isRow: true,
+    style: style,
+    variant: "forms.comboBox.container"
+  }, hoverProps, wrapperProps), (0, _react2.jsx)(_.TextField, (0, _extends2["default"])({}, textFieldProps, {
+    wrapperProps: {
       ref: inputWrapperRef
-    }, wrapperProps),
+    },
     controlProps: _objectSpread({
       variant: 'forms.comboBox.input'
     }, controlProps),
@@ -152,7 +153,7 @@ var ComboBoxInput = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     slots: {
       inContainer: button
     }
-  })));
+  }))));
 });
 ComboBoxInput.propTypes = _objectSpread({
   containerProps: _propTypes["default"].shape({}),

package/lib/cjs/components/DataTable/DataTable.styles.js

@@ -42,12 +42,12 @@ var tableCell = _objectSpread(_objectSpread({}, _Text.text.tableData), {}, {
 });
 var tableCellContents = {
   flex: '1 1 0%',
-  minWidth: '0px',
   overflow: 'hidden',
   whiteSpace: 'nowrap',
   textOverflow: 'ellipsis',
   fontWeight: '400',
-  justifyContent: 'center'
+  justifyContent: 'center',
+  maxWidth: '100%'
 };
 var tableRow = {
   position: 'relative',

package/lib/cjs/components/IconButton/IconButton.js

@@ -57,6 +57,8 @@ var IconButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   (0, _react.useImperativeHandle)(ref, function () {
     return buttonRef.current;
   });
+  var _usePress = (0, _interactions.usePress)(buttonRef),
+    isPressedFromContext = _usePress.isPressed;
   var _useButton = (0, _reactAria.useButton)(_objectSpread({}, props), buttonRef),
     buttonProps = _useButton.buttonProps,
     isPressed = _useButton.isPressed;
@@ -70,7 +72,7 @@ var IconButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     focusProps = _useFocusRing.focusProps;
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
       isHovered: isHovered,
-      isPressed: isPressed,
+      isPressed: isPressed || isPressedFromContext,
       isFocused: isFocusVisible,
       isDisabled: isDisabled
     }),

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

@@ -60,7 +60,9 @@ var Default = function Default(args) {
   }, "Fons Vernall")), (0, _react2.jsx)(_index.Box, {
     isRow: true,
     alignSelf: "center"
-  }, (0, _react2.jsx)(_index.IconButton, null, (0, _react2.jsx)(_index.Icon, {
+  }, (0, _react2.jsx)(_index.IconButton, {
+    "aria-label": "filter"
+  }, (0, _react2.jsx)(_index.Icon, {
     icon: _MoreVertIcon["default"],
     size: "sm",
     color: "neutral.20"
@@ -90,7 +92,9 @@ var WithSubtitle = function WithSubtitle(args) {
   }, "fvernall0@google.it"))), (0, _react2.jsx)(_index.Box, {
     isRow: true,
     alignSelf: "center"
-  }, (0, _react2.jsx)(_index.IconButton, null, (0, _react2.jsx)(_index.Icon, {
+  }, (0, _react2.jsx)(_index.IconButton, {
+    "aria-label": "filter"
+  }, (0, _react2.jsx)(_index.Icon, {
     icon: _MoreVertIcon["default"],
     size: "sm",
     color: "neutral.20"
@@ -140,7 +144,8 @@ var WithHoverHandlers = function WithHoverHandlers(args) {
     isRow: true,
     alignSelf: "center"
   }, (0, _react2.jsx)(_index.IconButton, {
-    size: 26
+    size: 26,
+    "aria-label": "filter"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _MoreVertIcon["default"],
     size: 20,

package/lib/cjs/components/ListViewItem/ListViewItem.styles.js

@@ -24,11 +24,11 @@ var container = {
   justifyContent: 'center',
   bg: 'accent.99',
   outline: 'none',
-  '& li': {
-    bg: 'white'
-  },
   '&.is-selected': {
-    bg: 'white'
+    bg: 'white',
+    '& li': {
+      bg: 'white'
+    }
   },
   '&.is-hovered': {
     bg: 'white',

package/lib/cjs/components/MultivaluesField/MultivaluesField.js

@@ -335,7 +335,7 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
       label: item.name,
       slots: item.slots
     }, item.badgeProps), (0, _react2.jsx)(_.IconButton, (0, _extends2["default"])({
-      "aria-label": "delete",
+      "aria-label": "delete ".concat(item.name),
       onPress: function onPress() {
         return deleteItem(item.key);
       },

package/lib/cjs/components/NumberField/NumberField.js

@@ -78,14 +78,14 @@ var NumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     variant: "forms.numberField.arrows"
   }, (0, _react2.jsx)(_.IconButton, (0, _extends2["default"])({}, incrementButtonProps, {
     ref: decRef,
-    tabIndex: "-1",
+    tabIndex: "0",
     p: 0
   }), (0, _react2.jsx)(_.Icon, {
     icon: _MenuUpIcon["default"],
     size: 18
   })), (0, _react2.jsx)(_.IconButton, (0, _extends2["default"])({}, decrementButtonProps, {
     ref: incrRef,
-    tabIndex: "-1",
+    tabIndex: "0",
     p: 0
   }), (0, _react2.jsx)(_.Icon, {
     icon: _MenuDownIcon["default"],

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

@@ -122,14 +122,14 @@ test('should show hintText text if prop is passed', function () {
   _react2.fireEvent.mouseEnter(helpHintButton);
   expect(_testWrapper.screen.getByText(hintText)).toBeInTheDocument();
 });
-test('increment and decrement buttons shouldn\'t be able to be focused via keyboard', function () {
+test('increment and decrement buttons should be able to be focused via keyboard', function () {
   getComponent();
   _userEvent["default"].tab();
   expect(_testWrapper.screen.getByLabelText(testLabel)).toHaveFocus();
   _userEvent["default"].tab();
-  expect(_testWrapper.screen.getByLabelText('arrow-up')).not.toHaveFocus();
+  expect(_testWrapper.screen.getByLabelText('arrow-up')).toHaveFocus();
   _userEvent["default"].tab();
-  expect(_testWrapper.screen.getByLabelText('arrow-down')).not.toHaveFocus();
+  expect(_testWrapper.screen.getByLabelText('arrow-down')).toHaveFocus();
 });
 test('number field input receiving name attribute', function () {
   var testName = 'testName';

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

@@ -9,10 +9,12 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.InnerPanel = exports.Expandable = exports.Default = exports.CustomWidth = void 0;
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectDestructuringEmpty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
+var _reactStately = require("react-stately");
 var _ArrowCollapseIcon = _interopRequireDefault(require("mdi-react/ArrowCollapseIcon"));
 var _ArrowTopRightBottomLeftIcon = _interopRequireDefault(require("mdi-react/ArrowTopRightBottomLeftIcon"));
 var _ChevronRightIcon = _interopRequireDefault(require("mdi-react/ChevronRightIcon"));
@@ -150,7 +152,7 @@ var InnerPanel = function InnerPanel(_ref2) {
   }, "Children render here."), (0, _react2.jsx)(_index.ListView, {
     items: items
   }, function (item) {
-    return (0, _react2.jsx)(_index.Item, {
+    return (0, _react2.jsx)(_reactStately.Item, {
       key: item.id
     }, (0, _react2.jsx)(_index.Text, {
       variant: "itemTitle",
@@ -176,7 +178,7 @@ var InnerPanel = function InnerPanel(_ref2) {
         zIndex: 11
       },
       onClose: toggleMessagesOpen
-    }, (0, _react2.jsx)(_index.Item, {
+    }, (0, _react2.jsx)(_reactStately.Item, {
       key: "message2",
       status: "success"
     }, "Z Index higher than inner pannel")))
@@ -297,6 +299,19 @@ var Expandable = function Expandable() {
   var onCloseHandler = function onCloseHandler() {
     return onClose(state, triggerRef);
   };
+  var _useState5 = (0, _react.useState)('#EACE91'),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    color = _useState6[0],
+    setColor = _useState6[1];
+  var handleColorChange = (0, _react.useCallback)(function (_ref3) {
+    var _context, _context2, _context3;
+    var rgb = _ref3.rgb;
+    var r = rgb.r,
+      b = rgb.b,
+      g = rgb.g,
+      a = rgb.a;
+    setColor((0, _concat["default"])(_context = (0, _concat["default"])(_context2 = (0, _concat["default"])(_context3 = "rgba(".concat(r, ", ")).call(_context3, g, ", ")).call(_context2, b, ", ")).call(_context, a, ")"));
+  }, []);
   var header = (0, _react2.jsx)(_index.Box, {
     sx: sx.header
   }, (0, _react2.jsx)(_index.Box, {
@@ -339,10 +354,10 @@ var Expandable = function Expandable() {
     sx: sx.header.breadcrumbsContainer
   }, (0, _react2.jsx)(_index.Breadcrumbs, {
     icon: _ChevronRightIcon["default"]
-  }, (0, _react2.jsx)(_index.Item, {
+  }, (0, _react2.jsx)(_reactStately.Item, {
     key: "home",
     "data-id": "home"
-  }, "Capability"), (0, _react2.jsx)(_index.Item, {
+  }, "Capability"), (0, _react2.jsx)(_reactStately.Item, {
     key: "editGroups",
     variant: "neutralText",
     "data-id": "editGroups"
@@ -356,11 +371,12 @@ var Expandable = function Expandable() {
     label: "Node Description",
     defaultValue: "The Value of the Text Input"
   }), (0, _react2.jsx)(_index.ColorField, {
-    value: "#EACE91",
+    value: color,
     label: "Node Background Color",
     buttonProps: {
       sx: sx.colorField
-    }
+    },
+    onChange: handleColorChange
   }), (0, _react2.jsx)(_index.SwitchField, {
     hintText: "Example Hint",
     labelProps: {
@@ -382,7 +398,7 @@ var Expandable = function Expandable() {
       hintText: 'Example Hint'
     }
   }, function (item) {
-    return (0, _react2.jsx)(_index.Item, {
+    return (0, _react2.jsx)(_reactStately.Item, {
       key: item.key,
       "data-id": item.name
     }, item.name);

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

@@ -18,6 +18,7 @@ var container = {
   borderLeft: '1px solid',
   borderLeftColor: 'neutral.80',
   boxShadow: '-2px 0px 2px 1px rgba(37, 55, 70, 0.15)',
+  display: 'none !important',
   p: '25px',
   transition: 'right 500ms',
   maxWidth: '100%',