@pingux/astro 1.17.0 → 1.18.0

package/CHANGELOG.md

@@ -3,6 +3,27 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.18.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.17.0...@pingux/astro@1.18.0) (2022-06-15)
+
+
+### Bug Fixes
+
+* [UIP-5424] CollapsiblePanel focus and visual defects ([86e5bff](https://gitlab.corp.pingidentity.com/ux/pingux/commit/86e5bff440e1e7cb2c640ea32d9cc2f78bd26e7d))
+* [UIP-5461] OverlayPanel UI Descrepencies ([6d379e7](https://gitlab.corp.pingidentity.com/ux/pingux/commit/6d379e7aa79693eef5f41759f8f6c24e566c5699))
+* [UIP-5477] Updating z-index for RockerButtonGroup Accessibility border ([ab0e65c](https://gitlab.corp.pingidentity.com/ux/pingux/commit/ab0e65c18c984ccf2aede4b5c8ec501ff6129025))
+* [UIP-5478] use FocusRing component instead of useFocusRing hook ([594a564](https://gitlab.corp.pingidentity.com/ux/pingux/commit/594a564bb4ebe5591adc434518988f7f68d1ee62))
+* [UIP-5496] Button and link fix focus tests ([63a3d1a](https://gitlab.corp.pingidentity.com/ux/pingux/commit/63a3d1aaf1f96837b4d02114ae6daf188598213f))
+
+
+### Features
+
+* [UIP-5491] inline primary button variant ([ee8d395](https://gitlab.corp.pingidentity.com/ux/pingux/commit/ee8d395ff103f7821da377038637fd3cee17c049))
+* [UIP-5495] ColorField focus ([032b98c](https://gitlab.corp.pingidentity.com/ux/pingux/commit/032b98c3bdc4ee34df50dd3deb51a57666d1a3cf))
+
+
+
+
+
 # [1.17.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.16.0...@pingux/astro@1.17.0) (2022-06-09)
 
 

package/NOTICE.html

@@ -146,7 +146,7 @@
 
   <main class="u-padding--xl">
     <h1>Snyk Licenses Attribution Report</h1>
-    <h4>Report date: 6/9/2022</h4>
+    <h4>Report date: 6/15/2022</h4>
       <h2>Organization: <a href="https://app.snyk.io/org/ux-fbf">UX</a></h2>
     <div class="u-padding-top--sm">
       <h1>

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

@@ -35,7 +35,7 @@ delete variants.ICON;
 delete variants.ICON_BUTTON;
 delete variants.INVERTED; // add designer approved variants for devs to use here
 
-var variantOptions = ['critical', 'danger', 'default', 'inline', 'link', 'primary', 'success', 'text'];
+var variantOptions = ['critical', 'danger', 'default', 'inline', 'inlinePrimary', 'link', 'primary', 'success', 'text'];
 var _default = {
   title: 'Button',
   component: _index.Button,
@@ -101,10 +101,15 @@ var TextIconButton = function TextIconButton() {
 exports.TextIconButton = TextIconButton;
 
 var InlineButton = function InlineButton() {
-  return (0, _react2.jsx)(_index.Button, {
+  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Button, {
     mb: "sm",
+    mr: "auto",
     variant: "inline"
-  }, "Inline");
+  }, "Inline"), (0, _react2.jsx)(_index.Button, {
+    mb: "sm",
+    mr: "auto",
+    variant: "inlinePrimary"
+  }, "Inline primary"));
 };
 
 exports.InlineButton = InlineButton;

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

@@ -137,6 +137,11 @@ test('color block button renders in default state', function () {
 
   expect(button).toHaveClass('is-focused');
   expect(button).toHaveFocus();
+
+  _userEvent["default"].tab();
+
+  expect(button).not.toHaveClass('is-focused');
+  expect(button).not.toHaveFocus();
 });
 test('color block button renders in configured state', function () {
   getComponent({

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

@@ -8,7 +8,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports["default"] = exports.Default = exports.ChipWithIcon = exports.ChipWithCustomColors = void 0;
+exports["default"] = exports.Default = exports.Count = exports.ChipWithIcon = exports.ChipWithCustomColors = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
@@ -30,6 +30,8 @@ var _Icon = _interopRequireDefault(require("../Icon"));
 
 var _IconButton = _interopRequireDefault(require("../IconButton"));
 
+var _Box = _interopRequireDefault(require("../Box"));
+
 var _colors = require("../../styles/colors.js");
 
 var _react2 = require("@emotion/react");
@@ -88,6 +90,21 @@ var Default = function Default(_ref5) {
 
 exports.Default = Default;
 
+var Count = function Count(_ref6) {
+  var args = (0, _extends2["default"])({}, _ref6);
+  return (0, _react2.jsx)(_Box["default"], null, (0, _react2.jsx)(_Chip["default"], (0, _extends2["default"])({
+    color: "white"
+  }, args, {
+    label: "1",
+    variant: "boxes.chipCount"
+  })), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_Chip["default"], (0, _extends2["default"])({}, args, {
+    label: "1",
+    variant: "boxes.countNeutral"
+  })));
+};
+
+exports.Count = Count;
+
 var ChipWithCustomColors = function ChipWithCustomColors() {
   return (0, _react2.jsx)(_Chip["default"], {
     label: "Custom Colors",

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

@@ -98,6 +98,7 @@ var CollapsiblePanel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     variant: "collapsiblePanelTitle"
   }, listTitle), selectedFilterCount && (0, _react2.jsx)(_CollapsiblePanelBadge["default"], {
     margin: "0",
+    className: "title-badge",
     selectedFilterCount: selectedFilterCount
   })), (0, _react2.jsx)(_index.Box, {
     pl: "xs",
@@ -106,6 +107,7 @@ var CollapsiblePanel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     items: items,
     onSelectionChange: onSelectionChange,
     selectionMode: "none",
+    selectionStyle: "highlight",
     style: {
       width: '100%'
     },

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

@@ -2,13 +2,25 @@
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
-var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
 
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 
-var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
 
-var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _filterInstanceProperty2 = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
 
 _Object$defineProperty(exports, "__esModule", {
   value: true
@@ -18,15 +30,27 @@ exports["default"] = exports.Default = exports.CollapsiblePanelWithBadge = void
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
+var _some = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/some"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _sort = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/sort"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _AccountGroupIcon = _interopRequireDefault(require("mdi-react/AccountGroupIcon"));
 
-var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
-
 var _ChevronRightIcon = _interopRequireDefault(require("mdi-react/ChevronRightIcon"));
 
-var _FilterIcon = _interopRequireDefault(require("mdi-react/FilterIcon"));
+var _CheckIcon = _interopRequireDefault(require("mdi-react/CheckIcon"));
+
+var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
 
 var _SearchIcon = _interopRequireDefault(require("mdi-react/SearchIcon"));
 
@@ -44,6 +68,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty2(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 _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 var _default = {
   title: 'CollapsiblePanel',
   component: _CollapsiblePanel["default"],
@@ -69,13 +97,14 @@ var _default = {
   }
 };
 exports["default"] = _default;
-var items = [{
+var data = [{
   id: '1',
   icon: 'Group',
   key: 'Avengers',
   name: 'Avengers',
   subtitle: 'Default',
-  chipValue: '25'
+  chipValue: '25',
+  isDefaultSelected: true
 }, {
   id: '2',
   icon: 'Group',
@@ -96,7 +125,8 @@ var items = [{
   key: 'Digital Investors',
   name: 'Digital Investors',
   subtitle: 'N America',
-  chipValue: '12'
+  chipValue: '12',
+  isDefaultSelected: true
 }, {
   id: '5',
   icon: 'Group',
@@ -133,23 +163,6 @@ var items = [{
   subtitle: '',
   chipValue: '29'
 }];
-var mockData = [{
-  id: '10',
-  key: 'Avengers',
-  name: 'Avengers'
-}, {
-  id: '11',
-  key: 'Digital Investors',
-  name: 'Digital Investors'
-}, {
-  id: '12',
-  key: 'A very long title as well',
-  name: 'A very long title as well'
-}];
-
-var changeSelection = function changeSelection(selected) {
-  console.log(selected);
-};
 
 var Default = function Default(args) {
   return (0, _react2.jsx)(_CollapsiblePanel["default"], args);
@@ -158,11 +171,41 @@ var Default = function Default(args) {
 exports.Default = Default;
 
 var CollapsiblePanelWithBadge = function CollapsiblePanelWithBadge(args) {
+  var _useState = (0, _react.useState)(data),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      items = _useState2[0],
+      setItems = _useState2[1];
+
   var _useOverlayPanelState = (0, _hooks.useOverlayPanelState)(),
       state = _useOverlayPanelState.state,
       onClose = _useOverlayPanelState.onClose;
 
   var triggerRef = (0, _react.useRef)();
+  var selectedItems = (0, _react.useMemo)(function () {
+    var _context;
+
+    return (0, _sort["default"])(_context = (0, _filter["default"])(items).call(items, function (item) {
+      return item.isDefaultSelected || item.isSelected;
+    }) // sort elements to display "default selected" at first place
+    ).call(_context, function (a, b) {
+      return Number(!!b.isDefaultSelected) - Number(!!a.isDefaultSelected);
+    });
+  }, [items]);
+
+  var changeSelection = function changeSelection(key) {
+    setItems(function (prevItems) {
+      return (0, _map["default"])(prevItems).call(prevItems, function (el) {
+        if (el.key === key) {
+          return _objectSpread(_objectSpread({}, el), {}, {
+            isSelected: !el.isSelected
+          });
+        }
+
+        return el;
+      });
+    });
+  };
+
   return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Button, {
     ref: triggerRef,
     onPress: state.open
@@ -219,7 +262,10 @@ var CollapsiblePanelWithBadge = function CollapsiblePanelWithBadge(args) {
     pt: "25px"
   }, (0, _react2.jsx)(_index.Box, {
     isRow: true,
-    justifyContent: "space-between"
+    justifyContent: "space-between",
+    sx: {
+      marginTop: '5px'
+    }
   }, (0, _react2.jsx)(_index.Box, {
     width: "100%"
   }, (0, _react2.jsx)(_index.SearchField, {
@@ -228,11 +274,13 @@ var CollapsiblePanelWithBadge = function CollapsiblePanelWithBadge(args) {
     placeholder: "Search",
     width: "100%",
     mt: "0px",
-    mr: "sm"
+    mr: "sm",
+    mb: "xs"
   }), (0, _react2.jsx)(_index.ListView, {
     items: items,
     style: {
-      width: '108%'
+      width: '100%',
+      outline: 'none'
     }
   }, function (item) {
     return (0, _react2.jsx)(_index.Item, {
@@ -240,8 +288,12 @@ var CollapsiblePanelWithBadge = function CollapsiblePanelWithBadge(args) {
       textValue: item.name,
       "data-id": item.key,
       listItemProps: {
+        isRow: true,
         sx: {
           bg: 'white',
+          width: '100%',
+          justifyContent: 'space-between',
+          alignItems: 'center',
           '&.is-hovered': {
             bg: 'accent.99'
           }
@@ -271,9 +323,46 @@ var CollapsiblePanelWithBadge = function CollapsiblePanelWithBadge(args) {
       }
     })), (0, _react2.jsx)(_index.Text, {
       variant: "listSubtitle"
-    }, item.subtitle))));
+    }, item.subtitle))), item.isDefaultSelected ? (0, _react2.jsx)(_index.Box, {
+      isRow: true,
+      sx: {
+        border: '1px solid',
+        borderColor: 'neutral.80',
+        borderRadius: 5,
+        minHeight: 22,
+        justifyContent: 'center',
+        alignItems: 'center',
+        p: 'xs',
+        maxWidth: '50%'
+      }
+    }, (0, _react2.jsx)(_index.Icon, {
+      icon: _CheckIcon["default"],
+      color: "neutral.20",
+      size: 13,
+      sx: {
+        flexShrink: 0
+      }
+    }), (0, _react2.jsx)(_index.Text, {
+      sx: {
+        fontSize: 'sm',
+        pl: 'xs',
+        maxHeight: 32,
+        overflow: 'hidden'
+      }
+    }, "Added by Filter")) : (0, _react2.jsx)(_index.CheckboxField, {
+      controlProps: {
+        color: 'neutral.10',
+        'aria-label': 'Select'
+      },
+      onChange: function onChange() {
+        return changeSelection(item.key);
+      },
+      isSelected: (0, _some["default"])(selectedItems).call(selectedItems, function (el) {
+        return el.key === item.key;
+      })
+    }));
   })), (0, _react2.jsx)(_CollapsiblePanel["default"], (0, _extends2["default"])({
-    items: mockData,
+    items: selectedItems,
     onSelectionChange: changeSelection,
     selectedFilterCount: "1000+"
   }, args), function (item) {
@@ -283,7 +372,11 @@ var CollapsiblePanelWithBadge = function CollapsiblePanelWithBadge(args) {
       "data-id": item.key
     }, (0, _react2.jsx)(_index.CollapsiblePanelItem, {
       text: item.name,
-      icon: _FilterIcon["default"]
+      icon: item.isDefaultSelected ? _CheckIcon["default"] : _CloseIcon["default"],
+      onPress: function onPress() {
+        return changeSelection(item.key);
+      },
+      isDefaultSelected: item.isDefaultSelected
     }));
   })))));
 };

package/lib/cjs/components/CollapsiblePanelContainer/CollapsiblePanelContainer.js

@@ -2,25 +2,13 @@
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-
-var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
-var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
-
-var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
-
-var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
-
 var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
 
-var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 
-var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
 
-var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
 
 _Object$defineProperty(exports, "__esModule", {
   value: true
@@ -30,8 +18,6 @@ exports["default"] = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -58,10 +44,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); 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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 /**
  * The CollapsiblePanelContainer serves as a wrapper around a list and its associated trigger,
  * linking the list's open state with the trigger's press state and providing necessary context.
@@ -128,7 +110,7 @@ var CollapsiblePanelContainer = /*#__PURE__*/(0, _react.forwardRef)(function (pr
     "data-testid": "collapsible-panel-badge",
     margin: "auto",
     selectedFilterCount: selectedFilterCount
-  })), state.isOpen && _objectSpread({}, children));
+  })), children);
 });
 CollapsiblePanelContainer.propTypes = {
   /** Amount of selected items indicator. */

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

@@ -74,17 +74,17 @@ test('updates aria label when button is clicked', function () {
 
   var button = _testWrapper.screen.getByTestId(collapsiblePanelButtonId);
 
-  _userEvent["default"].click(button);
+  var container = _testWrapper.screen.getByTestId(testId);
 
-  var collapsiblePanel = _testWrapper.screen.queryByTestId(collapsiblePanelId);
+  _userEvent["default"].click(button);
 
   expect(button).toHaveAttribute('aria-label', 'Close filter menu?');
-  expect(collapsiblePanel).toBeInTheDocument();
+  expect(container).toHaveClass('is-open');
 
   _userEvent["default"].click(button);
 
   expect(button).toHaveAttribute('aria-label', 'Open filter menu?');
-  expect(collapsiblePanel).not.toBeInTheDocument();
+  expect(container).not.toHaveClass('is-open');
 });
 test('shows children when isOpen is true', function () {
   getComponent({
@@ -100,13 +100,13 @@ test('should hide children when pressing the escape key', function () {
 
   var button = _testWrapper.screen.getByTestId(collapsiblePanelButtonId);
 
-  _userEvent["default"].click(button);
+  var container = _testWrapper.screen.getByTestId(testId);
 
-  var collapsiblePanel = _testWrapper.screen.queryByTestId(collapsiblePanelId);
+  _userEvent["default"].click(button);
 
-  expect(collapsiblePanel).toBeInTheDocument();
+  expect(container).toHaveClass('is-open');
 
   _userEvent["default"].type(button, '{esc}');
 
-  expect(collapsiblePanel).not.toBeInTheDocument();
+  expect(container).not.toHaveClass('is-open');
 });

package/lib/cjs/components/CollapsiblePanelItem/CollapsiblePanelItem.js

@@ -47,8 +47,8 @@ var CollapsiblePanelItem = /*#__PURE__*/(0, _react.forwardRef)(function (props,
     variant: "collapsiblePanellItem"
   }, text), iconElement && (isDefaultSelected ? iconElement : (0, _react2.jsx)(_index.IconButton, {
     sx: {
-      width: 13,
-      height: 13,
+      width: 20,
+      height: 20,
       alignSelf: 'auto',
       '& path': {
         fill: 'inherit'

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

@@ -65,6 +65,11 @@ test('link shows focus status', function () {
 
   expect(link).toHaveFocus();
   expect(link).toHaveClass('is-focused');
+
+  _userEvent["default"].tab();
+
+  expect(link).not.toHaveFocus();
+  expect(link).not.toHaveClass('is-focused');
 });
 test('link shows disabled status', function () {
   // Needs href to have a tabindex

package/lib/cjs/components/ListView/ListView.js

@@ -198,6 +198,7 @@ var ListView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   layout.isLoading = isLoading;
   var focusedItem = gridCollection.getFirstKey();
+  delete gridProps.onMouseDown;
   return (0, _react2.jsx)(_ListViewContext.ListViewContext.Provider, {
     value: {
       state: state,

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

@@ -189,7 +189,7 @@ var InnerPanel = function InnerPanel(_ref2) {
       onPress: state.open
     }, "Open Panel"), outer), messagesOpen && (0, _react2.jsx)(_index.Messages, {
       sx: {
-        zIndex: 3
+        zIndex: 11
       }
     }, (0, _react2.jsx)(_collections.Item, {
       key: "message2",

package/lib/cjs/components/RockerButton/RockerButton.js

@@ -64,15 +64,9 @@ var CollectionRockerButton = /*#__PURE__*/(0, _react.forwardRef)(function (props
       itemProps = item.props;
   var state = (0, _react.useContext)(_RockerButtonGroup.RockerContext);
   var isDisabled = state.disabledKeys.has(key);
-
-  var _useFocusRing = (0, _focus.useFocusRing)(),
-      isFocusVisible = _useFocusRing.isFocusVisible,
-      focusProps = _useFocusRing.focusProps;
-
   var isSelected = state.selectedKey === key;
 
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
-    isFocused: isFocusVisible,
     isSelected: isSelected,
     isDisabled: isDisabled
   }),
@@ -93,17 +87,19 @@ var CollectionRockerButton = /*#__PURE__*/(0, _react.forwardRef)(function (props
   }, state, rockerButtonRef),
       rockerButtonProps = _useRockerButton.rockerButtonProps;
 
-  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+  return (0, _react2.jsx)(_focus.FocusRing, {
+    focusRingClass: "is-focused"
+  }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     as: "button",
     className: classNames,
     variant: "buttons.rocker"
   }, rockerButtonProps, {
     ref: rockerButtonRef
-  }, focusProps, itemProps, {
+  }, itemProps, {
     sx: {
       '&.is-selected': _objectSpread({}, itemProps.selectedStyles)
     }
-  }), rendered);
+  }), rendered));
 });
 exports.CollectionRockerButton = CollectionRockerButton;
 CollectionRockerButton.displayName = 'CollectionRockerButton';

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

@@ -134,6 +134,23 @@ var chip = {
 };
 exports.chip = chip;
 
+var countDefault = _objectSpread(_objectSpread({}, chip), {}, {
+  width: 'fit-content',
+  minWidth: '17px',
+  height: '17px'
+});
+
+var chipCount = _objectSpread(_objectSpread({}, countDefault), {}, {
+  backgroundColor: '#640099 !important'
+});
+
+var countNeutral = _objectSpread(_objectSpread({}, chipCount), {}, {
+  backgroundColor: '#E4E6E9 !important',
+  '& span': {
+    color: 'neutral.20'
+  }
+});
+
 var multivaluesChip = _objectSpread(_objectSpread({}, chip), {}, {
   alignSelf: 'center',
   cursor: 'default',
@@ -336,6 +353,8 @@ var _default = {
   base: base,
   card: card,
   chip: chip,
+  chipCount: chipCount,
+  countNeutral: countNeutral,
   selectedItemChip: selectedItemChip,
   readOnlyChip: readOnlyChip,
   copy: copy,