@pingux/astro 1.2.0-alpha.8 → 1.3.0

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

@@ -4,6 +4,8 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 
 var _react = _interopRequireDefault(require("react"));
 
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
 var _GlobeIcon = _interopRequireDefault(require("mdi-react/GlobeIcon"));
 
 var _ViewDashboardIcon = _interopRequireDefault(require("mdi-react/ViewDashboardIcon"));
@@ -34,7 +36,16 @@ var data = [{
   icon: _GlobeIcon["default"],
   key: 'Overview',
   heading: 'Overview',
-  children: ['Users', 'Group', 'Populations', 'Attributes', 'A roles title that is really really really really long']
+  children: [(0, _react2.jsx)(_index.NavBarItemButton, {
+    key: "Credentials Button Users",
+    id: "Credentials Button Users",
+    "data-testid": "navItemButton"
+  }, "Users"), (0, _react2.jsx)(_index.NavBarItemLink, {
+    key: "Experiences Link Roles",
+    id: "Experiences Link Roles",
+    href: "https://pingidentity.com/",
+    "data-testid": "navItemLink"
+  }, "Roles")]
 }, {
   icon: _ViewDashboardIcon["default"],
   key: 'Dashboard',
@@ -89,6 +100,12 @@ var getComponent = function getComponent() {
   }), (0, _react2.jsx)(_index.NavBarSection, {
     items: secondData,
     title: "test_title"
+  }), (0, _react2.jsx)(_index.NavBarItem, {
+    id: "Overview",
+    key: "Overview",
+    text: "Overview",
+    icon: _ViewDashboardIcon["default"],
+    "data-testid": "navItem"
   }))));
 };
 
@@ -113,4 +130,37 @@ test('should render title for itemBodies that have subTitles', function () {
   var subTitle = _testWrapper.screen.getByText('PingOne Services');
 
   expect(subTitle).toBeInTheDocument();
+});
+test('should select NavIemLink', function () {
+  getComponent();
+
+  var link = _testWrapper.screen.getByTestId('navItemLink');
+
+  expect(link).toBeInTheDocument();
+
+  _userEvent["default"].click(link);
+
+  expect(link).toHaveClass('is-selected');
+});
+test('should select NavIem', function () {
+  getComponent();
+
+  var item = _testWrapper.screen.getByTestId('navItem');
+
+  expect(item).toBeInTheDocument();
+
+  _userEvent["default"].click(item);
+
+  expect(item).toHaveClass('is-selected');
+});
+test('should select NavIemButton', function () {
+  getComponent();
+
+  var button = _testWrapper.screen.getByTestId('navItemButton');
+
+  expect(button).toBeInTheDocument();
+
+  _userEvent["default"].click(button);
+
+  expect(button).toHaveClass('is-selected');
 });

package/lib/cjs/components/NavBarSection/NavBarItem.js

@@ -0,0 +1,137 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _interactions = require("@react-aria/interactions");
+
+var _utils = require("@react-aria/utils");
+
+var _focus = require("@react-aria/focus");
+
+var _index = require("../../index");
+
+var _hooks = require("../../hooks");
+
+var _NavBarContext = require("../../context/NavBarContext");
+
+var _react2 = require("@emotion/react");
+
+var NavBarItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _context, _context2;
+
+  var icon = props.icon,
+      text = props.text,
+      className = props.className,
+      key = props.id,
+      onPressCallback = props.onPress,
+      others = (0, _objectWithoutProperties2["default"])(props, ["icon", "text", "className", "id", "onPress"]);
+  var navItemRef = (0, _react.useRef)();
+  /* istanbul ignore next */
+
+  (0, _react.useImperativeHandle)(ref, function () {
+    return navItemRef.current;
+  });
+
+  var _useHover = (0, _interactions.useHover)({}),
+      hoverProps = _useHover.hoverProps,
+      isHovered = _useHover.isHovered;
+
+  var _useFocusRing = (0, _focus.useFocusRing)({
+    within: true
+  }),
+      focusWithinProps = _useFocusRing.focusProps;
+
+  var _useFocusRing2 = (0, _focus.useFocusRing)(),
+      focusProps = _useFocusRing2.focusProps,
+      isFocusVisible = _useFocusRing2.isFocusVisible;
+
+  var state = (0, _NavBarContext.useNavBarContext)();
+  var isSelected = (0, _includes["default"])(_context = state.selectedKeys).call(_context, key);
+
+  var _useNavBarPress = (0, _hooks.useNavBarPress)({
+    key: key,
+    onPressCallback: onPressCallback
+  }, state),
+      onNavPress = _useNavBarPress.onNavPress;
+
+  var _usePress = (0, _interactions.usePress)({
+    ref: navItemRef,
+    onPress: onNavPress
+  }),
+      pressProps = _usePress.pressProps,
+      isPressed = _usePress.isPressed;
+
+  var mergedProps = _utils.mergeProps.apply(void 0, (0, _concat["default"])(_context2 = [pressProps, hoverProps, focusWithinProps, focusProps]).call(_context2, others));
+
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
+    isPressed: isPressed,
+    isHovered: isHovered,
+    isSelected: isSelected,
+    isFocused: isFocusVisible
+  }),
+      classNames = _useStatusClasses.classNames;
+
+  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+    id: key,
+    variant: "accordion.accordionGridNavItem",
+    isRow: true,
+    className: classNames,
+    ref: navItemRef
+  }, mergedProps, {
+    sx: {
+      maxHeight: '30px'
+    }
+  }), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    sx: {
+      alignItems: 'center'
+    }
+  }, icon && (0, _react2.jsx)(_index.Icon, {
+    icon: icon,
+    size: 20,
+    sx: {
+      mr: '10px',
+      color: 'white',
+      fill: 'white'
+    }
+  }), (0, _react2.jsx)(_index.Text, {
+    variant: "navBarHeaderText"
+  }, text)));
+});
+NavBarItem.propTypes = {
+  /**  Handler that is called when the press is released over the target. */
+  onPress: _propTypes["default"].func,
+
+  /** The icon to render in between each node. */
+  icon: _propTypes["default"].elementType,
+
+  /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
+  id: _propTypes["default"].string,
+
+  /** Text that will render within the component */
+  text: _propTypes["default"].string
+};
+var _default = NavBarItem;
+exports["default"] = _default;

package/lib/cjs/components/NavBarSection/NavBarItemButton.js

@@ -0,0 +1,96 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty2 = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty2(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-property"));
+
+var _defineProperties = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-properties"));
+
+var _getOwnPropertyDescriptors = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _getOwnPropertyDescriptor = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _defineProperty3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _NavBarContext = require("../../context/NavBarContext");
+
+var _hooks = require("../../hooks");
+
+var _index = require("../../index");
+
+var _react2 = require("@emotion/react");
+
+function ownKeys(object, enumerableOnly) { var keys = (0, _keys["default"])(object); if (_getOwnPropertySymbols["default"]) { var symbols = (0, _getOwnPropertySymbols["default"])(object); if (enumerableOnly) symbols = (0, _filter["default"])(symbols).call(symbols, function (sym) { return (0, _getOwnPropertyDescriptor["default"])(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 _context2; (0, _forEach["default"])(_context2 = ownKeys(Object(source), true)).call(_context2, function (key) { (0, _defineProperty3["default"])(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors["default"]) { (0, _defineProperties["default"])(target, (0, _getOwnPropertyDescriptors["default"])(source)); } else { var _context3; (0, _forEach["default"])(_context3 = ownKeys(Object(source))).call(_context3, function (key) { (0, _defineProperty2["default"])(target, key, (0, _getOwnPropertyDescriptor["default"])(source, key)); }); } } return target; }
+
+var NavBarItemButton = function NavBarItemButton(props) {
+  var _context;
+
+  var className = props.className,
+      key = props.id,
+      onPressCallback = props.onPress,
+      sx = props.sx,
+      others = (0, _objectWithoutProperties2["default"])(props, ["className", "id", "onPress", "sx"]);
+  var state = (0, _NavBarContext.useNavBarContext)();
+  var isSelected = (0, _includes["default"])(_context = state.selectedKeys).call(_context, key);
+
+  var _useNavBarPress = (0, _hooks.useNavBarPress)({
+    key: key,
+    onPressCallback: onPressCallback
+  }, state),
+      onNavPress = _useNavBarPress.onNavPress;
+
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
+    isSelected: isSelected
+  }),
+      classNames = _useStatusClasses.classNames;
+
+  return (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
+    id: key,
+    variant: "navItemButton",
+    onPress: onNavPress,
+    className: classNames
+  }, others, {
+    sx: _objectSpread({
+      paddingLeft: '45px',
+      paddingRight: '45px'
+    }, sx)
+  }));
+};
+
+NavBarItemButton.propTypes = {
+  /**  Handler that is called when the press is released over the target. */
+  onPress: _propTypes["default"].func,
+
+  /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
+  id: _propTypes["default"].string.isRequired
+};
+var _default = NavBarItemButton;
+exports["default"] = _default;

package/lib/cjs/components/NavBarSection/NavBarItemHeader.js

@@ -22,7 +22,7 @@ var NavBarItemHeader = function NavBarItemHeader(props) {
   var item = props.item;
   var icon = item.icon;
   return (0, _react2.jsx)(_index.Box, {
-    variant: "boxes.navBarItemHeaderContainer",
+    variant: "navBar.itemHeaderContainer",
     isRow: true
   }, icon && (0, _react2.jsx)(_index.Icon, {
     icon: icon,

package/lib/cjs/components/NavBarSection/NavBarItemLink.js

@@ -0,0 +1,98 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty2 = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty2(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-property"));
+
+var _defineProperties = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-properties"));
+
+var _getOwnPropertyDescriptors = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _getOwnPropertyDescriptor = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _defineProperty3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _index = require("../../index");
+
+var _NavBarContext = require("../../context/NavBarContext");
+
+var _hooks = require("../../hooks");
+
+var _react2 = require("@emotion/react");
+
+function ownKeys(object, enumerableOnly) { var keys = (0, _keys["default"])(object); if (_getOwnPropertySymbols["default"]) { var symbols = (0, _getOwnPropertySymbols["default"])(object); if (enumerableOnly) symbols = (0, _filter["default"])(symbols).call(symbols, function (sym) { return (0, _getOwnPropertyDescriptor["default"])(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 _context2; (0, _forEach["default"])(_context2 = ownKeys(Object(source), true)).call(_context2, function (key) { (0, _defineProperty3["default"])(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors["default"]) { (0, _defineProperties["default"])(target, (0, _getOwnPropertyDescriptors["default"])(source)); } else { var _context3; (0, _forEach["default"])(_context3 = ownKeys(Object(source))).call(_context3, function (key) { (0, _defineProperty2["default"])(target, key, (0, _getOwnPropertyDescriptor["default"])(source, key)); }); } } return target; }
+
+var NavBarItemLink = function NavBarItemLink(props) {
+  var _context;
+
+  var className = props.className,
+      key = props.id,
+      onPressCallback = props.onPress,
+      others = (0, _objectWithoutProperties2["default"])(props, ["className", "id", "onPress"]);
+  var state = (0, _NavBarContext.useNavBarContext)();
+  var isSelected = (0, _includes["default"])(_context = state.selectedKeys).call(_context, key);
+
+  var _useNavBarPress = (0, _hooks.useNavBarPress)({
+    key: key,
+    onPressCallback: onPressCallback
+  }, state),
+      onNavPress = _useNavBarPress.onNavPress;
+
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
+    isSelected: isSelected
+  }),
+      classNames = _useStatusClasses.classNames;
+
+  return (0, _react2.jsx)(_index.Link, (0, _extends2["default"])({
+    id: key,
+    variant: "buttons.navItemButton",
+    className: classNames,
+    onPress: onNavPress
+  }, others, {
+    sx: _objectSpread({
+      paddingLeft: '45px',
+      paddingRight: '45px'
+    }, props.sx)
+  }));
+};
+
+NavBarItemLink.propTypes = {
+  /**  Specifies the location of the URL */
+  href: _propTypes["default"].string,
+
+  /**  Handler that is called when the press is released over the target. */
+  onPress: _propTypes["default"].func,
+
+  /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
+  id: _propTypes["default"].string.isRequired
+};
+var _default = NavBarItemLink;
+exports["default"] = _default;

package/lib/cjs/components/NavBarSection/NavBarSection.js

@@ -10,6 +10,8 @@ _Object$defineProperty(exports, "__esModule", {
 
 exports["default"] = void 0;
 
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -32,19 +34,19 @@ var NavBarSection = function NavBarSection(props) {
       title = props.title,
       items = props.items;
   return (0, _react2.jsx)(_react["default"].Fragment, null, title && (0, _react2.jsx)(_index.Text, {
-    variant: "text.navBarSubtitle",
-    sx: {
-      mt: '25px',
-      mb: '15px',
-      ml: '15px'
-    }
+    variant: "text.navBarSubtitle"
   }, title), (0, _react2.jsx)(_index.AccordionGridGroup, {
-    items: items
+    items: (0, _filter["default"])(items).call(items, function (i) {
+      return i.children;
+    })
   }, function (item) {
     return (0, _react2.jsx)(_index.Item, {
       headerProps: {
         variant: 'accordion.accordionGridHeaderNav'
       },
+      bodyProps: {
+        variant: 'navBar.sectionBody'
+      },
       textValue: item
     }, (0, _react2.jsx)(_NavBarItemHeader["default"], {
       item: item
@@ -55,7 +57,7 @@ var NavBarSection = function NavBarSection(props) {
     sx: {
       pl: '15px',
       pr: '15px',
-      mt: '25px'
+      my: '10px'
     }
   }, (0, _react2.jsx)(_index.Separator, {
     variant: "separator.navBarSeparator"

package/lib/cjs/components/NavBarSection/index.js

@@ -15,4 +15,31 @@ _Object$defineProperty(exports, "default", {
   }
 });
 
-var _NavBarSection = _interopRequireDefault(require("./NavBarSection"));
+_Object$defineProperty(exports, "NavBarItemButton", {
+  enumerable: true,
+  get: function get() {
+    return _NavBarItemButton["default"];
+  }
+});
+
+_Object$defineProperty(exports, "NavBarItemLink", {
+  enumerable: true,
+  get: function get() {
+    return _NavBarItemLink["default"];
+  }
+});
+
+_Object$defineProperty(exports, "NavBarItem", {
+  enumerable: true,
+  get: function get() {
+    return _NavBarItem["default"];
+  }
+});
+
+var _NavBarSection = _interopRequireDefault(require("./NavBarSection"));
+
+var _NavBarItemButton = _interopRequireDefault(require("./NavBarItemButton"));
+
+var _NavBarItemLink = _interopRequireDefault(require("./NavBarItemLink"));
+
+var _NavBarItem = _interopRequireDefault(require("./NavBarItem"));

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

@@ -18,8 +18,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -52,14 +50,8 @@ var OverlayPanel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       onClose = _useOverlayPanelState.onClose;
 
   var overlayPanelRef = (0, _react.useRef)();
-
-  var _useState = (0, _react.useState)(true),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      contain = _useState2[0],
-      setIsContained = _useState2[1];
   /* istanbul ignore next */
 
-
   (0, _react.useImperativeHandle)(ref, function () {
     return overlayPanelRef.current;
   });
@@ -73,18 +65,12 @@ var OverlayPanel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     e.stopPropagation();
 
     if (e.key === 'Escape') {
-      setIsContained(false);
+      onClose(state, triggerRef, onCloseProp);
     }
   };
 
-  (0, _react.useEffect)(function () {
-    if (!contain && onClose) {
-      onClose(state, triggerRef, onCloseProp);
-    }
-  }, [contain]);
   return (0, _react2.jsx)(_focus.FocusScope, {
-    autoFocus: true,
-    contain: contain
+    autoFocus: true
   }, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     variant: "overlayPanel.overlayPanel",
     ref: overlayPanelRef

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

@@ -79,6 +79,15 @@ test('onClose callback fires when provided', function () {
 
   expect(onClose).toHaveBeenCalled();
 });
+test('custom classname can be passed', function () {
+  getComponent({
+    className: 'testing-class'
+  });
+
+  var overlayPanel = _testWrapper.screen.getByTestId(testId);
+
+  expect(overlayPanel).toHaveClass('testing-class');
+});
 test('neither callback fires when not provided', function () {
   var onClose = jest.fn();
   getComponent({
@@ -137,4 +146,39 @@ test('triggerRef.current.focus() fires when provided', function () {
   });
 
   expect(focusFunction).toHaveBeenCalled();
+});
+test('triggerRef.current.focus() does not fire when key other than esc is pressed', function () {
+  var onClose = jest.fn();
+  var focusFunction = jest.fn();
+  var state = {
+    close: onClose
+  };
+  var triggerRef = {
+    current: {
+      focus: focusFunction
+    }
+  };
+  getComponent({
+    state: state,
+    children: (0, _react2.jsx)("div", null, "Test"),
+    triggerRef: triggerRef
+  });
+
+  var overlayPanel = _testWrapper.screen.getByTestId(testId);
+
+  _testWrapper.fireEvent.keyDown(overlayPanel, {
+    key: 'KeyA',
+    code: 'KeyA',
+    keyCode: 65,
+    charCode: 65
+  });
+
+  _testWrapper.fireEvent.keyUp(overlayPanel, {
+    key: 'KeyA',
+    code: 'KeyA',
+    keyCode: 65,
+    charCode: 65
+  });
+
+  expect(focusFunction).not.toHaveBeenCalled();
 });

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

@@ -40,11 +40,9 @@ var _collections = require("@react-stately/collections");
 
 var _focus = require("@react-aria/focus");
 
-var _utils = require("@react-aria/utils");
-
 var _hooks = require("../../hooks");
 
-var _Button = _interopRequireDefault(require("../Button"));
+var _index = require("../../index");
 
 var _RockerButtonGroup = require("../RockerButtonGroup");
 
@@ -56,19 +54,12 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 var CollectionRockerButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var className = props.className,
-      item = props.item,
-      buttonGroupDisabled = props.isDisabled;
-  var defaultSelectedStyles = {
-    bg: 'active'
-  };
+      item = props.item;
   var key = item.key,
       rendered = item.rendered,
       itemProps = item.props;
-  var _itemProps$selectedSt = itemProps.selectedStyles,
-      selectedStyles = _itemProps$selectedSt === void 0 ? defaultSelectedStyles : _itemProps$selectedSt,
-      rockerButtonDisabled = itemProps.isDisabled;
-  var isDisabled = buttonGroupDisabled || rockerButtonDisabled;
   var state = (0, _react.useContext)(_RockerButtonGroup.RockerContext);
+  var isDisabled = state.disabledKeys.has(key);
 
   var _useFocusRing = (0, _focus.useFocusRing)(),
       isFocusVisible = _useFocusRing.isFocusVisible,
@@ -78,7 +69,8 @@ var CollectionRockerButton = /*#__PURE__*/(0, _react.forwardRef)(function (props
 
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
     isFocused: isFocusVisible,
-    isSelected: isSelected
+    isSelected: isSelected,
+    isDisabled: isDisabled
   }),
       classNames = _useStatusClasses.classNames;
 
@@ -92,26 +84,26 @@ var CollectionRockerButton = /*#__PURE__*/(0, _react.forwardRef)(function (props
 
   var _useRockerButton = (0, _hooks.useRockerButton)({
     item: item,
-    isDisabled: isDisabled
+    isDisabled: isDisabled,
+    isSelected: isSelected
   }, state, rockerButtonRef),
       rockerButtonProps = _useRockerButton.rockerButtonProps;
 
-  return (0, _react2.jsx)(_Button["default"], (0, _extends2["default"])({
+  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+    as: "button",
     className: classNames,
-    variant: "rocker"
-  }, itemProps, (0, _utils.mergeProps)(focusProps, rockerButtonProps), {
-    ref: rockerButtonRef,
+    variant: "buttons.rocker"
+  }, rockerButtonProps, {
+    ref: rockerButtonRef
+  }, focusProps, itemProps, {
     sx: {
-      '&.is-selected': _objectSpread({}, selectedStyles)
+      '&.is-selected': _objectSpread({}, itemProps.selectedStyles)
     }
   }), rendered);
 });
 exports.CollectionRockerButton = CollectionRockerButton;
 CollectionRockerButton.displayName = 'CollectionRockerButton';
 CollectionRockerButton.propTypes = {
-  /** Whether the button is disabled. */
-  isDisabled: _propTypes["default"].bool,
-
   /** Allows custom styles to be passed to button. */
   selectedStyles: _propTypes["default"].shape({}),
   // adding to surface in props table