@pingux/astro 1.2.0-alpha.9 → 1.3.1

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import userEvent from '@testing-library/user-event';
 import GlobeIcon from 'mdi-react/GlobeIcon';
 import ViewDashboard from 'mdi-react/ViewDashboardIcon';
 import AccountMultiple from 'mdi-react/AccountMultipleIcon';
@@ -10,13 +11,22 @@ import Verify from 'mdi-react/VerifiedIcon';
 import NavBar from './NavBar';
 import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen } from '../../utils/testUtils/testWrapper';
-import { Box, NavBarSection } from '../../index';
+import { Box, NavBarSection, NavBarItem, NavBarItemButton, NavBarItemLink } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var data = [{
   icon: GlobeIcon,
   key: 'Overview',
   heading: 'Overview',
-  children: ['Users', 'Group', 'Populations', 'Attributes', 'A roles title that is really really really really long']
+  children: [___EmotionJSX(NavBarItemButton, {
+    key: "Credentials Button Users",
+    id: "Credentials Button Users",
+    "data-testid": "navItemButton"
+  }, "Users"), ___EmotionJSX(NavBarItemLink, {
+    key: "Experiences Link Roles",
+    id: "Experiences Link Roles",
+    href: "https://pingidentity.com/",
+    "data-testid": "navItemLink"
+  }, "Roles")]
 }, {
   icon: ViewDashboard,
   key: 'Dashboard',
@@ -71,6 +81,12 @@ var getComponent = function getComponent() {
   }), ___EmotionJSX(NavBarSection, {
     items: secondData,
     title: "test_title"
+  }), ___EmotionJSX(NavBarItem, {
+    id: "Overview",
+    key: "Overview",
+    text: "Overview",
+    icon: ViewDashboard,
+    "data-testid": "navItem"
   }))));
 };
 
@@ -89,4 +105,25 @@ test('should render title for itemBodies that have subTitles', function () {
   getComponent();
   var subTitle = screen.getByText('PingOne Services');
   expect(subTitle).toBeInTheDocument();
+});
+test('should select NavIemLink', function () {
+  getComponent();
+  var link = screen.getByTestId('navItemLink');
+  expect(link).toBeInTheDocument();
+  userEvent.click(link);
+  expect(link).toHaveClass('is-selected');
+});
+test('should select NavIem', function () {
+  getComponent();
+  var item = screen.getByTestId('navItem');
+  expect(item).toBeInTheDocument();
+  userEvent.click(item);
+  expect(item).toHaveClass('is-selected');
+});
+test('should select NavIemButton', function () {
+  getComponent();
+  var button = screen.getByTestId('navItemButton');
+  expect(button).toBeInTheDocument();
+  userEvent.click(button);
+  expect(button).toHaveClass('is-selected');
 });

package/lib/components/NavBarSection/NavBarItem.js

@@ -0,0 +1,111 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+import React, { useRef, forwardRef, useImperativeHandle } from 'react';
+import PropTypes from 'prop-types';
+import { useHover, usePress } from '@react-aria/interactions';
+import { mergeProps } from '@react-aria/utils';
+import { useFocusRing } from '@react-aria/focus';
+import { Box, Icon, Text } from '../../index';
+import { useStatusClasses, useNavBarPress } from '../../hooks';
+import { useNavBarContext } from '../../context/NavBarContext';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var NavBarItem = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _context, _context2;
+
+  var icon = props.icon,
+      text = props.text,
+      className = props.className,
+      key = props.id,
+      onPressCallback = props.onPress,
+      others = _objectWithoutProperties(props, ["icon", "text", "className", "id", "onPress"]);
+
+  var navItemRef = useRef();
+  /* istanbul ignore next */
+
+  useImperativeHandle(ref, function () {
+    return navItemRef.current;
+  });
+
+  var _useHover = useHover({}),
+      hoverProps = _useHover.hoverProps,
+      isHovered = _useHover.isHovered;
+
+  var _useFocusRing = useFocusRing({
+    within: true
+  }),
+      focusWithinProps = _useFocusRing.focusProps;
+
+  var _useFocusRing2 = useFocusRing(),
+      focusProps = _useFocusRing2.focusProps,
+      isFocusVisible = _useFocusRing2.isFocusVisible;
+
+  var state = useNavBarContext();
+
+  var isSelected = _includesInstanceProperty(_context = state.selectedKeys).call(_context, key);
+
+  var _useNavBarPress = useNavBarPress({
+    key: key,
+    onPressCallback: onPressCallback
+  }, state),
+      onNavPress = _useNavBarPress.onNavPress;
+
+  var _usePress = usePress({
+    ref: navItemRef,
+    onPress: onNavPress
+  }),
+      pressProps = _usePress.pressProps,
+      isPressed = _usePress.isPressed;
+
+  var mergedProps = mergeProps.apply(void 0, _concatInstanceProperty(_context2 = [pressProps, hoverProps, focusWithinProps, focusProps]).call(_context2, others));
+
+  var _useStatusClasses = useStatusClasses(className, {
+    isPressed: isPressed,
+    isHovered: isHovered,
+    isSelected: isSelected,
+    isFocused: isFocusVisible
+  }),
+      classNames = _useStatusClasses.classNames;
+
+  return ___EmotionJSX(Box, _extends({
+    id: key,
+    variant: "accordion.accordionGridNavItem",
+    isRow: true,
+    className: classNames,
+    ref: navItemRef
+  }, mergedProps, {
+    sx: {
+      maxHeight: '30px'
+    }
+  }), ___EmotionJSX(Box, {
+    isRow: true,
+    sx: {
+      alignItems: 'center'
+    }
+  }, icon && ___EmotionJSX(Icon, {
+    icon: icon,
+    size: 20,
+    sx: {
+      mr: '10px',
+      color: 'white',
+      fill: 'white'
+    }
+  }), ___EmotionJSX(Text, {
+    variant: "navBarHeaderText"
+  }, text)));
+});
+NavBarItem.propTypes = {
+  /**  Handler that is called when the press is released over the target. */
+  onPress: PropTypes.func,
+
+  /** The icon to render in between each node. */
+  icon: PropTypes.elementType,
+
+  /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
+  id: PropTypes.string,
+
+  /** Text that will render within the component */
+  text: PropTypes.string
+};
+export default NavBarItem;

package/lib/components/NavBarSection/NavBarItemButton.js

@@ -0,0 +1,69 @@
+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 _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+
+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 _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source), true)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context3; _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useNavBarContext } from '../../context/NavBarContext';
+import { useStatusClasses, useNavBarPress } from '../../hooks';
+import { Button } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var NavBarItemButton = function NavBarItemButton(props) {
+  var _context;
+
+  var className = props.className,
+      key = props.id,
+      onPressCallback = props.onPress,
+      sx = props.sx,
+      others = _objectWithoutProperties(props, ["className", "id", "onPress", "sx"]);
+
+  var state = useNavBarContext();
+
+  var isSelected = _includesInstanceProperty(_context = state.selectedKeys).call(_context, key);
+
+  var _useNavBarPress = useNavBarPress({
+    key: key,
+    onPressCallback: onPressCallback
+  }, state),
+      onNavPress = _useNavBarPress.onNavPress;
+
+  var _useStatusClasses = useStatusClasses(className, {
+    isSelected: isSelected
+  }),
+      classNames = _useStatusClasses.classNames;
+
+  return ___EmotionJSX(Button, _extends({
+    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.func,
+
+  /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
+  id: PropTypes.string.isRequired
+};
+export default NavBarItemButton;

package/lib/components/NavBarSection/NavBarItemHeader.js

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

package/lib/components/NavBarSection/NavBarItemLink.js

@@ -0,0 +1,71 @@
+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 _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+
+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 _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source), true)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context3; _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from '../../index';
+import { useNavBarContext } from '../../context/NavBarContext';
+import { useStatusClasses, useNavBarPress } from '../../hooks';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var NavBarItemLink = function NavBarItemLink(props) {
+  var _context;
+
+  var className = props.className,
+      key = props.id,
+      onPressCallback = props.onPress,
+      others = _objectWithoutProperties(props, ["className", "id", "onPress"]);
+
+  var state = useNavBarContext();
+
+  var isSelected = _includesInstanceProperty(_context = state.selectedKeys).call(_context, key);
+
+  var _useNavBarPress = useNavBarPress({
+    key: key,
+    onPressCallback: onPressCallback
+  }, state),
+      onNavPress = _useNavBarPress.onNavPress;
+
+  var _useStatusClasses = useStatusClasses(className, {
+    isSelected: isSelected
+  }),
+      classNames = _useStatusClasses.classNames;
+
+  return ___EmotionJSX(Link, _extends({
+    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.string,
+
+  /**  Handler that is called when the press is released over the target. */
+  onPress: PropTypes.func,
+
+  /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
+  id: PropTypes.string.isRequired
+};
+export default NavBarItemLink;

package/lib/components/NavBarSection/NavBarSection.js

@@ -1,3 +1,4 @@
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Separator, AccordionGridGroup, Text, Item, Box } from '../../index';
@@ -16,19 +17,19 @@ var NavBarSection = function NavBarSection(props) {
       title = props.title,
       items = props.items;
   return ___EmotionJSX(React.Fragment, null, title && ___EmotionJSX(Text, {
-    variant: "text.navBarSubtitle",
-    sx: {
-      mt: '25px',
-      mb: '15px',
-      ml: '15px'
-    }
+    variant: "text.navBarSubtitle"
   }, title), ___EmotionJSX(AccordionGridGroup, {
-    items: items
+    items: _filterInstanceProperty(items).call(items, function (i) {
+      return i.children;
+    })
   }, function (item) {
     return ___EmotionJSX(Item, {
       headerProps: {
         variant: 'accordion.accordionGridHeaderNav'
       },
+      bodyProps: {
+        variant: 'navBar.sectionBody'
+      },
       textValue: item
     }, ___EmotionJSX(NavBarItemHeader, {
       item: item
@@ -39,7 +40,7 @@ var NavBarSection = function NavBarSection(props) {
     sx: {
       pl: '15px',
       pr: '15px',
-      mt: '25px'
+      my: '10px'
     }
   }, ___EmotionJSX(Separator, {
     variant: "separator.navBarSeparator"

package/lib/components/NavBarSection/index.js

@@ -1 +1,4 @@
-export { default } from './NavBarSection';
+export { default } from './NavBarSection';
+export { default as NavBarItemButton } from './NavBarItemButton';
+export { default as NavBarItemLink } from './NavBarItemLink';
+export { default as NavBarItem } from './NavBarItem';

package/lib/components/NumberField/NumberField.js

@@ -14,10 +14,10 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-import React, { forwardRef, useImperativeHandle } from 'react';
+import React, { forwardRef, useCallback, useImperativeHandle, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import ArrowDropUpIcon from 'mdi-react/ArrowDropUpIcon';
-import ArrowDropDownIcon from 'mdi-react/ArrowDropDownIcon';
+import MenuUp from 'mdi-react/MenuUpIcon';
+import MenuDown from 'mdi-react/MenuDownIcon';
 import { useNumberField } from '@react-aria/numberfield';
 import { useNumberFieldState } from '@react-stately/numberfield';
 import { useLocale } from '@react-aria/i18n';
@@ -73,18 +73,38 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "numberField.arrows"
   }, ___EmotionJSX(IconButton, _extends({}, incrementButtonProps, {
     ref: decRef,
-    tabIndex: "-1"
+    tabIndex: "-1",
+    p: 0
   }), ___EmotionJSX(Icon, {
-    icon: ArrowDropUpIcon,
-    size: 12
+    icon: MenuUp,
+    size: 18
   })), ___EmotionJSX(IconButton, _extends({}, decrementButtonProps, {
     ref: incrRef,
-    tabIndex: "-1"
+    tabIndex: "-1",
+    p: 0
   }), ___EmotionJSX(Icon, {
-    icon: ArrowDropDownIcon,
-    size: 12
-  })));
-
+    icon: MenuDown,
+    size: 18
+  }))); // this needed to remove console warning in React 16
+  // I believe once we update to 17 - we can remove this
+
+
+  var onInputFocus = useCallback(function (e) {
+    e.persist();
+    fieldControlProps.onFocus(e);
+    inputProps.onFocus(e);
+  }, [fieldControlProps, inputProps]);
+  var onInputBlur = useCallback(function (e) {
+    e.persist();
+    fieldControlProps.onBlur(e);
+    inputProps.onBlur(e);
+  }, [fieldControlProps, inputProps]);
+  var updatedFieldControlProps = useMemo(function () {
+    return _objectSpread(_objectSpread({}, fieldControlProps), {}, {
+      onFocus: onInputFocus,
+      onBlur: onInputBlur
+    });
+  }, [fieldControlProps, onInputBlur, onInputFocus]);
   return ___EmotionJSX(Box, fieldContainerProps, ___EmotionJSX(Label, mergeProps(fieldLabelProps, labelProps)), ___EmotionJSX(Box, _extends({
     variant: "numberField.noDefaultArrows"
   }, groupProps), ___EmotionJSX(Box, {
@@ -95,7 +115,7 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: inputRef // we don't want to merge this props, we want to
     // overwrite them like defaultValue, value, ect.
 
-  }, fieldControlProps, omit(inputProps, 'name'))), ControlArrows), helperText && ___EmotionJSX(FieldHelperText, {
+  }, updatedFieldControlProps, omit(inputProps, ['name', 'onFocus', 'onBlur']))), ControlArrows), helperText && ___EmotionJSX(FieldHelperText, {
     status: status
   }, helperText)));
 });

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

@@ -135,4 +135,9 @@ test('number field input receiving name attribute', function () {
     name: testName
   });
   expect(screen.getByLabelText(testLabel)).toHaveAttribute('name', testName);
+});
+test('number field can be focused', function () {
+  getComponent();
+  userEvent.tab();
+  expect(screen.getByLabelText(testLabel)).toHaveClass('is-focused');
 });

package/lib/components/PageHeader/PageHeader.js

@@ -4,12 +4,14 @@ import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import Text from '../Text/Text';
 import Box from '../Box/Box';
+import { useDeprecationWarning } from '../../hooks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var PageHeader = /*#__PURE__*/forwardRef(function (props, ref) {
   var title = props.title,
       children = props.children,
       others = _objectWithoutProperties(props, ["title", "children"]);
 
+  useDeprecationWarning('The Page Header component will be deprecated in Astro-UI 2.0.0.');
   return ___EmotionJSX(Box, _extends({
     isRow: true,
     justifyContent: "space-between",

package/lib/components/PageHeader/PageHeader.stories.js

@@ -2,10 +2,14 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import PageHeader from '../PageHeader/PageHeader';
 import Button from '../Button/Button';
+import withDeprecationWarning from '../../utils/devUtils/decorators/withDeprecationWarning';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'PageHeader',
+  title: 'Deprecated/PageHeader',
   component: PageHeader,
+  decorators: [function (Story, context) {
+    return withDeprecationWarning(Story, context, 'The `PageHeader` component will be deprecated in Astro-UI 2.0.0.');
+  }],
   argTypes: {
     title: {
       control: {

package/lib/components/RadioGroupField/RadioGroupField.js

@@ -63,17 +63,21 @@ var RadioGroupField = /*#__PURE__*/forwardRef(function (props, ref) {
   }, radioGroupProps), ___EmotionJSX(Label, _extends({
     isDisabled: isDisabled,
     hintText: hintText,
-    isRequired: isRequired
-  }, labelProps), label), helperText && ___EmotionJSX(FieldHelperText, {
-    status: status
-  }, helperText), ___EmotionJSX(Box, {
+    isRequired: isRequired,
+    variant: "forms.label.radioGroup"
+  }, labelProps), label), ___EmotionJSX(Box, {
     variant: "forms.radioGroupWrapper",
     isRow: orientation === ORIENTATION.HORIZONTAL
   }, ___EmotionJSX(RadioContext.Provider, {
     value: _objectSpread({
       isDisabled: isDisabled
     }, state)
-  }, children)));
+  }, children)), helperText && ___EmotionJSX(FieldHelperText, {
+    status: status,
+    sx: {
+      pt: 'xs'
+    }
+  }, helperText));
 });
 RadioGroupField.propTypes = {
   /** The name of the RadioGroupField, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name_and_radio_buttons). */

package/lib/components/RockerButton/RockerButton.js

@@ -17,26 +17,18 @@ import React, { forwardRef, useContext, useImperativeHandle, useRef } from 'reac
 import PropTypes from 'prop-types';
 import { Item } from '@react-stately/collections';
 import { useFocusRing } from '@react-aria/focus';
-import { mergeProps } from '@react-aria/utils';
 import { useRockerButton, useStatusClasses, usePropWarning } from '../../hooks';
-import Button from '../Button';
+import { Box } from '../../index';
 import { RockerContext } from '../RockerButtonGroup';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var CollectionRockerButton = /*#__PURE__*/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 = useContext(RockerContext);
+  var isDisabled = state.disabledKeys.has(key);
 
   var _useFocusRing = useFocusRing(),
       isFocusVisible = _useFocusRing.isFocusVisible,
@@ -46,7 +38,8 @@ export var CollectionRockerButton = /*#__PURE__*/forwardRef(function (props, ref
 
   var _useStatusClasses = useStatusClasses(className, {
     isFocused: isFocusVisible,
-    isSelected: isSelected
+    isSelected: isSelected,
+    isDisabled: isDisabled
   }),
       classNames = _useStatusClasses.classNames;
 
@@ -60,25 +53,25 @@ export var CollectionRockerButton = /*#__PURE__*/forwardRef(function (props, ref
 
   var _useRockerButton = useRockerButton({
     item: item,
-    isDisabled: isDisabled
+    isDisabled: isDisabled,
+    isSelected: isSelected
   }, state, rockerButtonRef),
       rockerButtonProps = _useRockerButton.rockerButtonProps;
 
-  return ___EmotionJSX(Button, _extends({
+  return ___EmotionJSX(Box, _extends({
+    as: "button",
     className: classNames,
-    variant: "rocker"
-  }, itemProps, mergeProps(focusProps, rockerButtonProps), {
-    ref: rockerButtonRef,
+    variant: "buttons.rocker"
+  }, rockerButtonProps, {
+    ref: rockerButtonRef
+  }, focusProps, itemProps, {
     sx: {
-      '&.is-selected': _objectSpread({}, selectedStyles)
+      '&.is-selected': _objectSpread({}, itemProps.selectedStyles)
     }
   }), rendered);
 });
 CollectionRockerButton.displayName = 'CollectionRockerButton';
 CollectionRockerButton.propTypes = {
-  /** Whether the button is disabled. */
-  isDisabled: PropTypes.bool,
-
   /** Allows custom styles to be passed to button. */
   selectedStyles: PropTypes.shape({}),
   // adding to surface in props table

package/lib/components/RockerButtonGroup/RockerButtonGroup.js

@@ -34,10 +34,10 @@ var RockerButtonGroup = /*#__PURE__*/forwardRef(function (props, ref) {
   var _context;
 
   var children = props.children,
-      isDisabled = props.isDisabled,
       onSelectionChange = props.onSelectionChange,
       tabListProps = props.tabListProps,
-      others = _objectWithoutProperties(props, ["children", "isDisabled", "onSelectionChange", "tabListProps"]);
+      disabledKeys = props.disabledKeys,
+      others = _objectWithoutProperties(props, ["children", "onSelectionChange", "tabListProps", "disabledKeys"]);
 
   var buttonGroupRef = useRef();
   usePropWarning(props, 'disabled', 'isDisabled');
@@ -67,8 +67,7 @@ var RockerButtonGroup = /*#__PURE__*/forwardRef(function (props, ref) {
   }), _mapInstanceProperty(_context = _Array$from(state.collection)).call(_context, function (item) {
     return ___EmotionJSX(CollectionRockerButton, {
       key: item.key,
-      item: item,
-      isDisabled: isDisabled
+      item: item
     });
   }))));
 });
@@ -79,14 +78,11 @@ RockerButtonGroup.propTypes = {
   /** The button key that is currently selected. (controlled) */
   selectedKey: PropTypes.string,
 
-  /** Whether the entire button group is disabled. */
-  isDisabled: PropTypes.bool,
+  /** Which keys should be disabled. */
+  disabledKeys: PropTypes.arrayOf(PropTypes.string),
 
   /** Handler that is called when the selected button has changed. */
   onSelectionChange: PropTypes.func
 };
-RockerButtonGroup.defaultProps = {
-  isDisabled: false
-};
 RockerButtonGroup.displayName = 'RockerButtonGroup';
 export default RockerButtonGroup;

package/lib/components/RockerButtonGroup/RockerButtonGroup.stories.js

@@ -96,23 +96,8 @@ export var withCustomSelectedColors = function withCustomSelectedColors() {
 };
 export var DisabledSingleButton = function DisabledSingleButton() {
   return ___EmotionJSX(RockerButtonGroup, {
-    defaultSelectedKey: "or"
-  }, ___EmotionJSX(RockerButton, {
-    name: "and",
-    key: "and",
-    isDisabled: true
-  }, "And"), ___EmotionJSX(RockerButton, {
-    name: "or",
-    key: "or"
-  }, "Or"), ___EmotionJSX(RockerButton, {
-    name: "maybe",
-    key: "maybe"
-  }, "Maybe"));
-};
-export var DisabledRockerButtonGroup = function DisabledRockerButtonGroup() {
-  return ___EmotionJSX(RockerButtonGroup, {
-    isDisabled: true,
-    defaultSelectedKey: "and"
+    defaultSelectedKey: "or",
+    disabledKeys: ['and']
   }, ___EmotionJSX(RockerButton, {
     name: "and",
     key: "and"