@pingux/astro 1.2.0-alpha.9 → 1.2.1

package/lib/cjs/components/AccordionGridItem/AccordionGridItem.js

@@ -30,7 +30,7 @@ var _grid = require("@react-aria/grid");
 
 var _utils = require("@react-aria/utils");
 
-var _AccordionGridContext = require("../AccordionGridGroup/AccordionGridContext");
+var _AccordionGridContext = require("../../context/AccordionGridContext");
 
 var _Box = _interopRequireDefault(require("../Box"));
 
@@ -38,6 +38,8 @@ var _AccordionGridItemHeader = _interopRequireDefault(require("./AccordionGridIt
 
 var _AccordionGridItemBody = _interopRequireDefault(require("./AccordionGridItemBody"));
 
+var _hooks = require("../../hooks");
+
 var _react2 = require("@emotion/react");
 
 var AccordionGridItem = function AccordionGridItem(props) {
@@ -47,7 +49,8 @@ var AccordionGridItem = function AccordionGridItem(props) {
       headerProps = props.headerProps,
       bodyProps = props.bodyProps,
       children = props.children,
-      others = (0, _objectWithoutProperties2["default"])(props, ["item", "headerProps", "bodyProps", "children"]);
+      className = props.className,
+      others = (0, _objectWithoutProperties2["default"])(props, ["item", "headerProps", "bodyProps", "children", "className"]);
 
   var _React$Children$toArr = _react["default"].Children.toArray(children),
       _React$Children$toArr2 = (0, _toArray2["default"])(_React$Children$toArr),
@@ -57,10 +60,18 @@ var AccordionGridItem = function AccordionGridItem(props) {
 
   var cellNode = (0, _concat["default"])(_context = []).call(_context, item.childNodes)[0];
 
-  var _useContext = (0, _react.useContext)(_AccordionGridContext.AccordionGridContext),
-      state = _useContext.state;
+  var _useAccordionGridCont = (0, _AccordionGridContext.useAccordionGridContext)(),
+      state = _useAccordionGridCont.state; // Treat first cell as a row, fixes focus and keyboard interactions
+
+
+  var isDisabled = state.disabledKeys.has(cellNode.key);
+  var isSelected = state.selectionManager.isSelected(cellNode.key); // Sync selection between the first cell and the row
 
-  var isDisabled = state.disabledKeys.has(item.key);
+  (0, _react.useEffect)(function () {
+    if (isSelected !== state.selectionManager.isSelected(item.key)) {
+      state.selectionManager.toggleSelection(item.key);
+    }
+  }, [isSelected, state.selectionManager, item.key]);
   var rowRef = (0, _react.useRef)();
   var cellRef = (0, _react.useRef)();
   var cellBodyRef = (0, _react.useRef)();
@@ -70,20 +81,24 @@ var AccordionGridItem = function AccordionGridItem(props) {
   }, state, rowRef),
       rowProps = _useGridRow.rowProps;
 
-  var isSelected = state.selectionManager.isSelected(item.key);
-  return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
-    as: "div",
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
+    isSelected: isSelected,
     isDisabled: isDisabled
+  }),
+      classNames = _useStatusClasses.classNames;
+
+  return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+    as: "div"
   }, (0, _utils.mergeProps)(rowProps, others), {
-    ref: rowRef,
-    role: "row"
+    "aria-selected": isSelected,
+    className: classNames,
+    ref: rowRef
   }), (0, _react2.jsx)(_AccordionGridItemHeader["default"], (0, _extends2["default"])({
     item: item,
-    cellNode: cellNode,
-    ref: cellRef
-  }, headerProps, {
+    ref: cellRef,
+    isDisabled: isDisabled,
     isSelected: isSelected
-  }), header), (0, _react2.jsx)(_AccordionGridItemBody["default"], (0, _extends2["default"])({
+  }, headerProps), header), (0, _react2.jsx)(_AccordionGridItemBody["default"], (0, _extends2["default"])({
     item: item,
     ref: cellBodyRef,
     isSelected: isSelected

package/lib/cjs/components/AccordionGridItem/AccordionGridItemBody.js

@@ -26,7 +26,7 @@ var _grid = require("@react-aria/grid");
 
 var _interactions = require("@react-aria/interactions");
 
-var _AccordionGridContext = require("../AccordionGridGroup/AccordionGridContext");
+var _AccordionGridContext = require("../../context/AccordionGridContext");
 
 var _Box = _interopRequireDefault(require("../Box"));
 
@@ -42,8 +42,8 @@ var AccordionGridItemBody = /*#__PURE__*/(0, _react.forwardRef)(function (props,
       children = props.children,
       isSelected = props.isSelected;
 
-  var _useContext = (0, _react.useContext)(_AccordionGridContext.AccordionGridContext),
-      state = _useContext.state;
+  var _useAccordionGridCont = (0, _AccordionGridContext.useAccordionGridContext)(),
+      state = _useAccordionGridCont.state;
 
   var cellNode = (0, _concat["default"])(_context = []).call(_context, item.childNodes)[1];
 

package/lib/cjs/components/AccordionGridItem/AccordionGridItemHeader.js

@@ -34,7 +34,7 @@ var _MenuDownIcon = _interopRequireDefault(require("mdi-react/MenuDownIcon"));
 
 var _MenuUpIcon = _interopRequireDefault(require("mdi-react/MenuUpIcon"));
 
-var _AccordionGridContext = require("../AccordionGridGroup/AccordionGridContext");
+var _AccordionGridContext = require("../../context/AccordionGridContext");
 
 var _Box = _interopRequireDefault(require("../Box"));
 
@@ -50,20 +50,26 @@ var AccordionGridItemHeader = /*#__PURE__*/(0, _react.forwardRef)(function (prop
   var item = props.item,
       className = props.className,
       children = props.children,
-      key = props.key,
       isSelected = props.isSelected,
-      others = (0, _objectWithoutProperties2["default"])(props, ["item", "className", "children", "key", "isSelected"]);
+      others = (0, _objectWithoutProperties2["default"])(props, ["item", "className", "children", "isSelected"]);
 
-  var _useContext = (0, _react.useContext)(_AccordionGridContext.AccordionGridContext),
-      state = _useContext.state;
+  var _useAccordionGridCont = (0, _AccordionGridContext.useAccordionGridContext)(),
+      state = _useAccordionGridCont.state;
 
+  var cellRef = (0, _react.useRef)();
+  /* istanbul ignore next */
+
+  (0, _react.useImperativeHandle)(ref, function () {
+    return cellRef.current;
+  });
   var cellNode = (0, _concat["default"])(_context = []).call(_context, item.childNodes)[0];
 
   var _useGridCell = (0, _grid.useGridCell)({
     node: cellNode,
     focusMode: 'cell'
-  }, state, ref),
-      gridCellProps = _useGridCell.gridCellProps;
+  }, state, cellRef),
+      gridCellProps = _useGridCell.gridCellProps,
+      isPressed = _useGridCell.isPressed;
 
   var _useHover = (0, _interactions.useHover)({}),
       hoverProps = _useHover.hoverProps,
@@ -78,14 +84,7 @@ var AccordionGridItemHeader = /*#__PURE__*/(0, _react.forwardRef)(function (prop
       focusProps = _useFocusRing2.focusProps,
       isFocusVisible = _useFocusRing2.isFocusVisible;
 
-  var _usePress = (0, _interactions.usePress)({
-    ref: ref,
-    isPressed: item.props.isPressed
-  }),
-      pressProps = _usePress.pressProps,
-      isPressed = _usePress.isPressed;
-
-  var mergedProps = (0, _utils.mergeProps)(gridCellProps, hoverProps, focusWithinProps, focusProps, pressProps);
+  var mergedProps = (0, _utils.mergeProps)(gridCellProps, hoverProps, focusWithinProps, focusProps);
 
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
     isPressed: isPressed,
@@ -98,9 +97,8 @@ var AccordionGridItemHeader = /*#__PURE__*/(0, _react.forwardRef)(function (prop
   var ariaLabel = props['aria-label'];
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     as: "div",
-    ref: ref
+    ref: cellRef
   }, mergedProps, {
-    role: "gridcell",
     variant: "accordion.accordionGridHeader",
     isFocused: isFocusVisible,
     isSelected: isSelected,
@@ -123,8 +121,8 @@ var AccordionGridItemHeader = /*#__PURE__*/(0, _react.forwardRef)(function (prop
 AccordionGridItemHeader.propTypes = {
   'aria-label': _propTypes["default"].string,
   isSelected: _propTypes["default"].bool,
-  key: _propTypes["default"].string,
   item: _propTypes["default"].shape({
+    key: _propTypes["default"].string,
     childNodes: _propTypes["default"].arrayOf(_propTypes["default"].shape({})),
     props: _propTypes["default"].shape({
       isPressed: _propTypes["default"].bool

package/lib/cjs/components/AccordionGroup/AccordionGroup.js

@@ -57,8 +57,9 @@ var AccordionGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   var _useAccordion = (0, _accordion.useAccordion)(props, state, accordionRef),
       accordionProps = _useAccordion.accordionProps;
-  /* istanbul ignore next */
 
+  delete accordionProps.onMouseDown;
+  /* istanbul ignore next */
 
   (0, _react.useImperativeHandle)(ref, function () {
     return accordionRef.current;

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

@@ -46,7 +46,11 @@ var getComponent = function getComponent() {
     textValue: "Duplicate",
     "data-id": "third",
     label: "Accordion item"
-  }, (0, _react2.jsx)(_Text["default"], null, "Render me!"))));
+  }, (0, _react2.jsx)(_index.TextField, {
+    role: "form",
+    label: "Example Label",
+    "data-testid": "testField"
+  }))));
 };
 
 var getComponentInOverlayPanel = function getComponentInOverlayPanel() {
@@ -280,6 +284,21 @@ test('expanded keys expands an accordion item', function () {
   var selectedItem = buttons[0];
   expect(selectedItem).toHaveAttribute('aria-expanded', 'true');
 });
+test('able to click a textfield that is the rendered child of an accordion', function () {
+  getComponent({
+    expandedKeys: ['third']
+  });
+
+  var field = _testWrapper.screen.getByTestId('testField');
+
+  var input = _testWrapper.screen.getByRole('form');
+
+  _userEvent["default"].click(input);
+
+  _userEvent["default"].type(input, 'banana');
+
+  expect(field).toHaveClass('has-focus-within');
+});
 test('Item accepts a data-id and the data-id can be found in the DOM', function () {
   getComponent();
 

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

@@ -63,15 +63,15 @@ var Default = function Default(args) {
     onAction: onAction
   }, args), (0, _react2.jsx)(_collections.Item, {
     key: "home",
-    variant: "text",
+    variant: "link",
     "data-id": "home"
   }, "Home"), (0, _react2.jsx)(_collections.Item, {
     key: "trendy",
-    variant: "text",
+    variant: "link",
     "data-id": "trendy"
   }, "Trendy"), (0, _react2.jsx)(_collections.Item, {
     key: "march 2020 assets",
-    variant: "text",
+    variant: "link",
     "data-id": "march"
   }, "March 2020 Assets"));
 };

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

@@ -71,7 +71,8 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       onPressChange = props.onPressChange,
       onPressUp = props.onPressUp,
       children = props.children,
-      others = (0, _objectWithoutProperties2["default"])(props, ["className", "isDisabled", "isLoading", "onHoverStart", "onHoverChange", "onHoverEnd", "onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp", "children"]);
+      variant = props.variant,
+      others = (0, _objectWithoutProperties2["default"])(props, ["className", "isDisabled", "isLoading", "onHoverStart", "onHoverChange", "onHoverEnd", "onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp", "children", "variant"]);
   var buttonRef = (0, _react.useRef)();
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
   /* istanbul ignore next */
@@ -102,7 +103,17 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }),
       classNames = _useStatusClasses.classNames;
 
+  (0, _hooks.useDeprecationWarning)('The "icon" variant for `Button` is deprecated in Astro-UI 1.0.0, use the `IconButton` component instead.', {
+    isActive: props.variant === 'icon'
+  });
+  (0, _hooks.useDeprecationWarning)('The "danger" variant for `Button` will be deprecated in Astro-UI 2.0.0, use the `critical` variant instead.', {
+    isActive: props.variant === 'danger'
+  });
+  (0, _hooks.useDeprecationWarning)('The "text" variant for `Button` will be deprecated in Astro-UI 2.0.0, use the `link` variant instead.', {
+    isActive: props.variant === 'text'
+  });
   var ariaLabel = props['aria-label'];
+  (0, _hooks.useAriaLabelWarning)('Button', ariaLabel, variant === 'filter');
   return (0, _react2.jsx)(_themeUi.Button, (0, _extends2["default"])({
     "aria-label": ariaLabel,
     ref: buttonRef,
@@ -113,7 +124,8 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       display: 'flex',
       justifyContent: 'center',
       alignItems: 'center'
-    }
+    },
+    variant: variant
   }, others, (0, _utils.mergeProps)(hoverProps, focusProps, buttonProps)), isLoading ? (0, _react2.jsx)("span", {
     style: {
       visibility: 'hidden'

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

@@ -8,7 +8,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports.ColorBlockButton = exports.InlineButton = exports.TextButton = exports.TextIconButton = exports.Disabled = exports.Default = exports["default"] = void 0;
+exports.FilterButton = exports.ColorBlockButton = exports.InlineButton = exports.TextIconButton = exports.Disabled = exports.Default = exports["default"] = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
@@ -20,16 +20,12 @@ var _AddCircleIcon = _interopRequireDefault(require("mdi-react/AddCircleIcon"));
 
 var _CreateIcon = _interopRequireDefault(require("mdi-react/CreateIcon"));
 
-var _Box = _interopRequireDefault(require("../Box"));
-
-var _ = _interopRequireDefault(require("."));
-
-var _Icon = _interopRequireDefault(require("../Icon"));
-
-var _Text = _interopRequireDefault(require("../Text"));
+var _FilterIcon = _interopRequireDefault(require("mdi-react/FilterIcon"));
 
 var _variants = require("../../utils/devUtils/constants/variants");
 
+var _index = require("../../index");
+
 var _react2 = require("@emotion/react");
 
 // removing the iconButton variants from this story.
@@ -41,7 +37,7 @@ delete variants.INVERTED; // add designer approved variants for devs to use here
 var variantOptions = ['critical', 'danger', 'default', 'inline', 'link', 'primary', 'success', 'text'];
 var _default = {
   title: 'Button',
-  component: _["default"],
+  component: _index.Button,
   argTypes: {
     variant: {
       control: {
@@ -74,13 +70,13 @@ var _default = {
 exports["default"] = _default;
 
 var Default = function Default(args) {
-  return (0, _react2.jsx)(_["default"], args);
+  return (0, _react2.jsx)(_index.Button, args);
 };
 
 exports.Default = Default;
 
 var Disabled = function Disabled() {
-  return (0, _react2.jsx)(_["default"], {
+  return (0, _react2.jsx)(_index.Button, {
     isDisabled: true
   }, "Button Text");
 };
@@ -88,12 +84,12 @@ var Disabled = function Disabled() {
 exports.Disabled = Disabled;
 
 var TextIconButton = function TextIconButton() {
-  return (0, _react2.jsx)(_["default"], {
+  return (0, _react2.jsx)(_index.Button, {
     mb: "sm"
-  }, (0, _react2.jsx)(_Box["default"], {
+  }, (0, _react2.jsx)(_index.Box, {
     isRow: true,
     alignItems: "center"
-  }, (0, _react2.jsx)(_Icon["default"], {
+  }, (0, _react2.jsx)(_index.Icon, {
     icon: _AddCircleIcon["default"],
     mr: "sm",
     color: "active",
@@ -103,21 +99,8 @@ var TextIconButton = function TextIconButton() {
 
 exports.TextIconButton = TextIconButton;
 
-var TextButton = function TextButton() {
-  return (0, _react2.jsx)(_["default"], {
-    mb: "sm",
-    variant: "text",
-    "aria-label": "Add option"
-  }, (0, _react2.jsx)(_Text["default"], {
-    variant: "label",
-    color: "active"
-  }, " + Add Option"));
-};
-
-exports.TextButton = TextButton;
-
 var InlineButton = function InlineButton() {
-  return (0, _react2.jsx)(_["default"], {
+  return (0, _react2.jsx)(_index.Button, {
     mb: "sm",
     variant: "inline"
   }, "Inline");
@@ -129,14 +112,14 @@ var ColorBlockButton = function ColorBlockButton(args) {
   // Change `isConfigured` property in storybook controls
   var isConfigured = args.isConfigured,
       props = (0, _objectWithoutProperties2["default"])(args, ["isConfigured"]);
-  return (0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, props, {
+  return (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({}, props, {
     variant: "colorBlock",
     className: isConfigured ? 'is-configured' : ''
-  }), (0, _react2.jsx)(_Box["default"], null, (0, _react2.jsx)(_Text["default"], {
+  }), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
     variant: "buttonTitle"
-  }, "Title"), (0, _react2.jsx)(_Text["default"], {
+  }, "Title"), (0, _react2.jsx)(_index.Text, {
     variant: "buttonSubtitle"
-  }, "Info")), (0, _react2.jsx)(_Icon["default"], {
+  }, "Info")), (0, _react2.jsx)(_index.Icon, {
     icon: _CreateIcon["default"]
   }));
 };
@@ -151,4 +134,21 @@ ColorBlockButton.story = {
       defaultValue: false
     }
   }
-};
+};
+
+var FilterButton = function FilterButton() {
+  return (0, _react2.jsx)(_index.Box, {
+    p: "xx",
+    isRow: true,
+    gap: "md"
+  }, (0, _react2.jsx)(_index.SearchField, {
+    "aria-label": "search items"
+  }), (0, _react2.jsx)(_index.Button, {
+    variant: "filter",
+    "aria-label": "filter button"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _FilterIcon["default"]
+  })));
+};
+
+exports.FilterButton = FilterButton;

package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js

@@ -313,9 +313,11 @@ EnvironmentBreadcrumb.propTypes = {
   /** The list of environments. */
   items: _isIterable.isIterableProp,
 
-  /** Filter function to generate a filtered list of nodes.
-   * (nodes: Iterable<Node>) => Iterable<Node>
-   * */
+  /**
+   * Filter function to generate a filtered list of nodes.
+   *
+   * `(nodes: Iterable<Node>) => Iterable<Node>`
+   */
   itemsFilter: _propTypes["default"].func,
 
   /** Callback function that fires when the dropdown is opened. */

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

@@ -37,7 +37,8 @@ var _react2 = require("@emotion/react");
 var Link = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var className = props.className,
       isDisabled = props.isDisabled,
-      others = (0, _objectWithoutProperties2["default"])(props, ["className", "isDisabled"]);
+      onPress = props.onPress,
+      others = (0, _objectWithoutProperties2["default"])(props, ["className", "isDisabled", "onPress"]);
   var linkRef = (0, _react.useRef)();
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
   /* istanbul ignore next */

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

@@ -45,8 +45,6 @@ var _grid = require("@react-stately/grid");
 
 var _grid2 = require("@react-aria/grid");
 
-var _utils = require("@react-aria/utils");
-
 var _layout = require("@react-stately/layout");
 
 var _list = require("@react-stately/list");
@@ -103,12 +101,9 @@ function useListLayout(state) {
 }
 
 var ListView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var disabledKeys = props.disabledKeys,
-      loadingState = props.loadingState,
-      selectedKeys = props.selectedKeys,
+  var loadingState = props.loadingState,
       onLoadMore = props.onLoadMore,
-      onSelectionChange = props.onSelectionChange,
-      selectionMode = props.selectionMode;
+      selectionStyle = props.selectionStyle;
   var isLoading = loadingState === _loadingStates["default"].LOADING_MORE || loadingState === _loadingStates["default"].LOADING;
 
   var renderWrapper = function renderWrapper(parent, reusableView) {
@@ -160,11 +155,9 @@ var ListView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     });
   }, [collection]);
   var state = (0, _grid.useGridState)(_objectSpread(_objectSpread({}, props), {}, {
-    disabledKeys: disabledKeys,
-    selectedKeys: selectedKeys,
     collection: gridCollection,
-    selectionMode: selectionMode,
-    onSelectionChange: onSelectionChange
+    focusMode: 'cell',
+    selectionBehavior: selectionStyle === 'highlight' ? 'replace' : 'toggle'
   }));
   var layout = useListLayout(state);
   var keyboardDelegate = (0, _react.useMemo)(function () {
@@ -199,7 +192,7 @@ var ListView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       state: state,
       keyboardDelegate: keyboardDelegate
     }
-  }, (0, _react2.jsx)(_virtualizer.Virtualizer, (0, _extends2["default"])({}, (0, _utils.mergeProps)(gridProps), {
+  }, (0, _react2.jsx)(_virtualizer.Virtualizer, (0, _extends2["default"])({}, gridProps, {
     onLoadMore: onLoadMore,
     ref: listViewRef,
     focusedKey: focusedKey,
@@ -266,6 +259,9 @@ ListView.propTypes = {
   /** The type of selection that is allowed in the collection. */
   selectionMode: _propTypes["default"].oneOf(['none', 'single', 'multiple']),
 
+  /** */
+  selectionStyle: _propTypes["default"].oneOf(['highlight', undefined]),
+
   /** Callback function that fires when the selected key changes. */
   onSelectionChange: _propTypes["default"].func,
 
@@ -278,7 +274,7 @@ ListView.propTypes = {
 };
 ListView.defaultProps = {
   'aria-label': 'listView',
-  'selectionMode': 'single'
+  selectionMode: 'single'
 };
 var _default = ListView;
 exports["default"] = _default;

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

@@ -28,6 +28,8 @@ var _grid = require("@react-aria/grid");
 
 var _interactions = require("@react-aria/interactions");
 
+var _selection = require("@react-aria/selection");
+
 var _ListViewContext = require("../ListView/ListViewContext");
 
 var _Box = _interopRequireDefault(require("../Box"));
@@ -40,7 +42,9 @@ var ListViewItem = function ListViewItem(props) {
   var _context;
 
   var item = props.item,
-      _props$item$props = props.item.props,
+      _props$item = props.item,
+      key = _props$item.key,
+      _props$item$props = _props$item.props,
       listItemProps = _props$item$props.listItemProps,
       rowProps = _props$item$props.rowProps,
       _props$item$props$has = _props$item$props.hasSeparator,
@@ -75,7 +79,7 @@ var ListViewItem = function ListViewItem(props) {
   }, state, rowRef),
       raRowProps = _useGridRow.rowProps;
 
-  var isSelected = raRowProps['aria-selected'];
+  var isSelected = state.selectionManager.isSelected(item.key);
 
   var _useGridCell = (0, _grid.useGridCell)({
     node: cellNode,
@@ -83,7 +87,15 @@ var ListViewItem = function ListViewItem(props) {
   }, state, cellRef),
       gridCellProps = _useGridCell.gridCellProps;
 
-  var mergedProps = (0, _utils.mergeProps)(gridCellProps, hoverProps, focusWithinProps, focusProps);
+  var _useSelectableItem = (0, _selection.useSelectableItem)({
+    isDisabled: isDisabled,
+    selectionManager: state.selectionManager,
+    key: key,
+    ref: cellRef
+  }),
+      selectableItemProps = _useSelectableItem.itemProps;
+
+  var mergedProps = (0, _utils.mergeProps)(gridCellProps, hoverProps, focusWithinProps, focusProps, selectableItemProps);
 
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
     isHovered: isHovered,

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

@@ -163,7 +163,7 @@ var DarkVariant = function DarkVariant() {
       onPress: state.close,
       "aria-label": "Yes"
     }, "Yes"), (0, _react2.jsx)(_index.Button, {
-      variant: "text",
+      variant: "link",
       onPress: state.close,
       "aria-label": "Cancel"
     }, "Cancel"))))

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