@zendeskgarden/react-buttons 9.0.0-next.1 → 9.0.0-next.3

package/README.md

@@ -57,30 +57,3 @@ const MediaButton = ({ children, ...props }) => {
   );
 };
 ```
-
-### Button group
-
-```jsx
-import React, { useState } from 'react';
-import { ButtonGroup, Button } from '@zendeskgarden/react-buttons';
-
-const MyButtonGroup = ({ children, initialItem, ...props }) => {
-  const [selectedItem, setSelectedItem] = useState(initialItem);
-
-  return (
-    <ButtonGroup
-      selectedItem={selectedItem}
-      onSelect={selectedItem => setSelectedItem(selectedItem)}
-      {...props}
-    >
-      {children}
-    </ButtonGroup>
-  );
-};
-
-<MyButtonGroup initialKey="item-1">
-  <Button key="item-1">Item 1</Button>
-  <Button key="item-2">Item 2</Button>
-  <Button key="item-3">Item 3</Button>
-</MyButtonGroup>;
-```

package/dist/index.cjs.js

@@ -9,12 +9,9 @@
 
 var React = require('react');
 var PropTypes = require('prop-types');
-var reactMergeRefs = require('react-merge-refs');
 var styled = require('styled-components');
 var reactTheming = require('@zendeskgarden/react-theming');
 var polished = require('polished');
-var containerSelection = require('@zendeskgarden/container-selection');
-var containerUtilities = require('@zendeskgarden/container-utilities');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -58,14 +55,14 @@ function _extends$2() {
 const SIZE = ['small', 'medium', 'large'];
 
 const COMPONENT_ID$5 = 'buttons.button_group_view';
-const StyledButtonGroup = styled__default.default.div.attrs({
+const StyledSplitButton = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.1'
+  'data-garden-version': '9.0.0-next.3'
 }).withConfig({
-  displayName: "StyledButtonGroup",
-  componentId: "sc-1fbpzef-0"
+  displayName: "StyledSplitButton",
+  componentId: "sc-1u4v04v-0"
 })(["display:inline-flex;position:relative;z-index:0;direction:", ";white-space:nowrap;", ";"], props => props.theme.rtl && 'rtl', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
-StyledButtonGroup.defaultProps = {
+StyledSplitButton.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
@@ -89,7 +86,7 @@ const StyledIcon = styled__default.default(_ref => {
   return React__namespace.default.cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.1'
+  'data-garden-version': '9.0.0-next.3'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-19meqgg-0"
@@ -119,7 +116,7 @@ const getHeight = props => {
 const colorStyles = props => {
   let retVal;
   let hue;
-  if (props.disabled || props.isNeutral && (props.isPrimary || props.isSelected) && !props.isDanger) {
+  if (props.disabled || props.isNeutral && props.isPrimary && !props.isDanger) {
     hue = 'neutralHue';
   } else if (props.isDanger) {
     hue = 'dangerHue';
@@ -142,8 +139,8 @@ const colorStyles = props => {
         outlineColor: focusColor
       }
     }), hoverColor, activeColor, disabledForegroundColor);
-  } else if (props.isPrimary || props.isSelected) {
-    retVal = styled.css(["outline-color:transparent;background-color:", ";color:", ";&:hover{background-color:", ";}", " &:active{background-color:", ";}&[aria-pressed='true'],&[aria-pressed='mixed']{background-color:", ";}&:disabled{background-color:", ";color:", ";}"], props.isPrimary && props.isSelected ? activeColor : baseColor, props.theme.palette.white, hoverColor, reactTheming.focusStyles({
+  } else if (props.isPrimary) {
+    retVal = styled.css(["outline-color:transparent;background-color:", ";color:", ";&:hover{background-color:", ";}", " &:active{background-color:", ";}&[aria-pressed='true'],&[aria-pressed='mixed']{background-color:", ";}&:disabled{background-color:", ";color:", ";}"], baseColor, props.theme.palette.white, hoverColor, reactTheming.focusStyles({
       theme: props.theme,
       inset: props.focusInset,
       shadowWidth: props.focusInset ? 'sm' : 'md',
@@ -172,7 +169,6 @@ const groupStyles = props => {
     theme,
     isPrimary,
     isBasic,
-    isSelected,
     isPill,
     focusInset
   } = props;
@@ -189,7 +185,7 @@ const groupStyles = props => {
   const disabledBackgroundColor = !isPrimary && getDisabledBackgroundColor(props);
   const borderColor = isBasic ? 'transparent' : 'revert';
   const focusColor = reactTheming.getColor('primaryHue', 600, theme);
-  const focusBoxShadow = isBasic && !isSelected && !isPrimary && reactTheming.getFocusBoxShadow({
+  const focusBoxShadow = isBasic && !isPrimary && reactTheming.getFocusBoxShadow({
     theme,
     inset: focusInset,
     spacerHue: focusColor,
@@ -227,12 +223,12 @@ const sizeStyles = props => {
 };
 const StyledButton = styled__default.default.button.attrs(props => ({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.1',
+  'data-garden-version': '9.0.0-next.3',
   type: props.type || 'button'
 })).withConfig({
   displayName: "StyledButton",
   componentId: "sc-qe3ace-0"
-})(["display:", ";align-items:", ";justify-content:", ";transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out,outline-color 0.1s ease-in-out,z-index 0.25s ease-in-out;margin:0;border:", ";border-radius:", ";cursor:pointer;width:", ";overflow:hidden;text-decoration:none;text-overflow:ellipsis;white-space:", ";font-family:inherit;font-weight:", ";-webkit-font-smoothing:subpixel-antialiased;box-sizing:border-box;user-select:", ";-webkit-touch-callout:none;", ";&::-moz-focus-inner{border:0;padding:0;}", "{text-decoration:none;}&:hover{text-decoration:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{transition:border-color 0.1s ease-in-out,background-color 0.1s ease-in-out,box-shadow 0.1s ease-in-out,color 0.1s ease-in-out,outline-color 0.1s ease-in-out,z-index 0.25s ease-in-out;text-decoration:", ";}", ";&:disabled{cursor:default;text-decoration:", ";}& ", "{", "}", " &&{", "}", ""], props => props.isLink ? 'inline' : 'inline-flex', props => !props.isLink && 'center', props => !props.isLink && 'center', props => `${props.isLink ? `0px solid` : props.theme.borders.sm} transparent`, props => getBorderRadius(props), props => props.isStretched ? '100%' : '', props => !props.isLink && 'nowrap', props => props.isLink ? 'inherit' : props.theme.fontWeights.regular, props => !props.isLink && 'none', props => sizeStyles(props), reactTheming.SELECTOR_FOCUS_VISIBLE, props => props.isLink ? 'underline' : 'none', props => props.isLink ? 'underline' : 'none', props => colorStyles(props), props => props.isLink && 'none', StyledIcon, props => iconStyles$1(props), StyledButtonGroup, props => groupStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
+})(["display:", ";align-items:", ";justify-content:", ";transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out,outline-color 0.1s ease-in-out,z-index 0.25s ease-in-out;margin:0;border:", ";border-radius:", ";cursor:pointer;width:", ";overflow:hidden;text-decoration:none;text-overflow:ellipsis;white-space:", ";font-family:inherit;font-weight:", ";-webkit-font-smoothing:subpixel-antialiased;box-sizing:border-box;user-select:", ";-webkit-touch-callout:none;", ";&::-moz-focus-inner{border:0;padding:0;}", "{text-decoration:none;}&:hover{text-decoration:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{transition:border-color 0.1s ease-in-out,background-color 0.1s ease-in-out,box-shadow 0.1s ease-in-out,color 0.1s ease-in-out,outline-color 0.1s ease-in-out,z-index 0.25s ease-in-out;text-decoration:", ";}", ";&:disabled{cursor:default;text-decoration:", ";}& ", "{", "}", " &&{", "}", ""], props => props.isLink ? 'inline' : 'inline-flex', props => !props.isLink && 'center', props => !props.isLink && 'center', props => `${props.isLink ? `0px solid` : props.theme.borders.sm} transparent`, props => getBorderRadius(props), props => props.isStretched ? '100%' : '', props => !props.isLink && 'nowrap', props => props.isLink ? 'inherit' : props.theme.fontWeights.regular, props => !props.isLink && 'none', props => sizeStyles(props), reactTheming.SELECTOR_FOCUS_VISIBLE, props => props.isLink ? 'underline' : 'none', props => props.isLink ? 'underline' : 'none', props => colorStyles(props), props => props.isLink && 'none', StyledIcon, props => iconStyles$1(props), StyledSplitButton, props => groupStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
 StyledButton.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -240,7 +236,7 @@ StyledButton.defaultProps = {
 const COMPONENT_ID$2 = 'buttons.anchor';
 const StyledAnchor = styled__default.default(StyledButton).attrs(props => ({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.1',
+  'data-garden-version': '9.0.0-next.3',
   as: 'a',
   dir: props.theme.rtl ? 'rtl' : undefined,
   isLink: true,
@@ -274,7 +270,7 @@ var SvgNewWindowStroke = function SvgNewWindowStroke(props) {
 const COMPONENT_ID$1 = 'buttons.external_icon';
 const StyledExternalIcon = styled__default.default(SvgNewWindowStroke).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.1'
+  'data-garden-version': '9.0.0-next.3'
 }).withConfig({
   displayName: "StyledExternalIcon",
   componentId: "sc-16oz07e-0"
@@ -301,7 +297,7 @@ const iconStyles = props => {
 };
 const StyledIconButton = styled__default.default(StyledButton).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.1'
+  'data-garden-version': '9.0.0-next.3'
 }).withConfig({
   displayName: "StyledIconButton",
   componentId: "sc-1t0ughp-0"
@@ -310,11 +306,6 @@ StyledIconButton.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const ButtonGroupContext = React.createContext(undefined);
-const useButtonGroupContext = () => {
-  return React.useContext(ButtonGroupContext);
-};
-
 const SplitButtonContext = React.createContext(undefined);
 const useSplitButtonContext = () => {
   return React.useContext(SplitButtonContext);
@@ -333,26 +324,13 @@ EndIconComponent.displayName = 'Button.EndIcon';
 const EndIcon = EndIconComponent;
 
 const ButtonComponent = React.forwardRef((props, ref) => {
-  const buttonGroupContext = useButtonGroupContext();
   const splitButtonContext = useSplitButtonContext();
-  let computedRef = ref;
-  let computedProps = {
+  const computedProps = {
     ...props,
-    focusInset: props.focusInset || buttonGroupContext !== undefined || splitButtonContext
+    focusInset: props.focusInset || splitButtonContext
   };
-  if (buttonGroupContext && !props.disabled) {
-    if (!props.value) {
-      throw new Error('"value" prop must be provided to Button when used within a ButtonGroup');
-    }
-    computedProps = buttonGroupContext.getButtonProps({
-      isSelected: props.value === buttonGroupContext.selectedItem,
-      ...computedProps
-    });
-    computedRef = reactMergeRefs.mergeRefs([
-    computedProps.ref, ref]);
-  }
   return React__namespace.default.createElement(StyledButton, _extends$2({}, computedProps, {
-    ref: computedRef
+    ref: ref
   }));
 });
 ButtonComponent.displayName = 'Button';
@@ -365,7 +343,6 @@ ButtonComponent.propTypes = {
   focusInset: PropTypes__default.default.bool,
   isLink: PropTypes__default.default.bool,
   isStretched: PropTypes__default.default.bool,
-  isSelected: PropTypes__default.default.bool,
   size: PropTypes__default.default.oneOf(SIZE)
 };
 ButtonComponent.defaultProps = {
@@ -412,58 +389,6 @@ Anchor.propTypes = {
   externalIconLabel: PropTypes__default.default.string
 };
 
-const ButtonGroup = React.forwardRef((_ref, ref) => {
-  let {
-    children,
-    onSelect,
-    selectedItem: controlledSelectedValue,
-    ...otherProps
-  } = _ref;
-  const {
-    rtl
-  } = React.useContext(styled.ThemeContext) || reactTheming.DEFAULT_THEME;
-  const [internalSelectedValue, setInternalSelectedValue] = React.useState();
-  const selectedValue = containerUtilities.getControlledValue(controlledSelectedValue, internalSelectedValue);
-  const values = React.useMemo(() => React.Children.toArray(children).reduce((buttons, child) => {
-    if ( React.isValidElement(child) && child.type !== 'string' && !child.props.disabled) {
-      buttons.push(child.props.value);
-    }
-    return buttons;
-  }, []), [children]);
-  const {
-    selectedValue: selectedItem,
-    getElementProps,
-    getGroupProps
-  } = containerSelection.useSelection({
-    rtl,
-    values,
-    defaultSelectedValue: values[0],
-    selectedValue,
-    onSelect: React.useCallback(value => {
-      onSelect && onSelect(value);
-      setInternalSelectedValue(value);
-    }, [onSelect])
-  });
-  const contextValue = React.useMemo(() => ({
-    selectedItem,
-    getButtonProps: props => getElementProps({
-      role: 'button',
-      selectedAriaKey: 'aria-pressed',
-      ...props
-    })
-  }), [selectedItem, getElementProps]);
-  return React__namespace.default.createElement(ButtonGroupContext.Provider, {
-    value: contextValue
-  }, React__namespace.default.createElement(StyledButtonGroup, _extends$2({
-    ref: ref
-  }, getGroupProps(otherProps)), children));
-});
-ButtonGroup.displayName = 'ButtonGroup';
-ButtonGroup.propTypes = {
-  selectedItem: PropTypes__default.default.any,
-  onSelect: PropTypes__default.default.func
-};
-
 const IconButton = React.forwardRef((_ref, ref) => {
   let {
     children,
@@ -535,7 +460,7 @@ const SplitButton = React.forwardRef((_ref, ref) => {
   } = _ref;
   return React__namespace.default.createElement(SplitButtonContext.Provider, {
     value: true
-  }, React__namespace.default.createElement(StyledButtonGroup, _extends$2({
+  }, React__namespace.default.createElement(StyledSplitButton, _extends$2({
     ref: ref
   }, other), children));
 });
@@ -583,7 +508,6 @@ ToggleIconButton.defaultProps = {
 
 exports.Anchor = Anchor;
 exports.Button = Button;
-exports.ButtonGroup = ButtonGroup;
 exports.ChevronButton = ChevronButton;
 exports.IconButton = IconButton;
 exports.SplitButton = SplitButton;

package/dist/index.esm.js

@@ -6,14 +6,11 @@
  */
 
 import * as React from 'react';
-import React__default, { Children, createContext, useContext, forwardRef, useState, useMemo, isValidElement, useCallback } from 'react';
+import React__default, { Children, createContext, useContext, forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import { mergeRefs } from 'react-merge-refs';
-import styled, { css, ThemeContext } from 'styled-components';
+import styled, { css } from 'styled-components';
 import { retrieveComponentStyles, DEFAULT_THEME, SELECTOR_FOCUS_VISIBLE, getColor, focusStyles, getFocusBoxShadow, useText } from '@zendeskgarden/react-theming';
 import { rgba, math, em } from 'polished';
-import { useSelection } from '@zendeskgarden/container-selection';
-import { getControlledValue } from '@zendeskgarden/container-utilities';
 
 function _extends$2() {
   _extends$2 = Object.assign ? Object.assign.bind() : function (target) {
@@ -33,14 +30,14 @@ function _extends$2() {
 const SIZE = ['small', 'medium', 'large'];
 
 const COMPONENT_ID$5 = 'buttons.button_group_view';
-const StyledButtonGroup = styled.div.attrs({
+const StyledSplitButton = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.1'
+  'data-garden-version': '9.0.0-next.3'
 }).withConfig({
-  displayName: "StyledButtonGroup",
-  componentId: "sc-1fbpzef-0"
+  displayName: "StyledSplitButton",
+  componentId: "sc-1u4v04v-0"
 })(["display:inline-flex;position:relative;z-index:0;direction:", ";white-space:nowrap;", ";"], props => props.theme.rtl && 'rtl', props => retrieveComponentStyles(COMPONENT_ID$5, props));
-StyledButtonGroup.defaultProps = {
+StyledSplitButton.defaultProps = {
   theme: DEFAULT_THEME
 };
 
@@ -64,7 +61,7 @@ const StyledIcon = styled(_ref => {
   return React__default.cloneElement(Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.1'
+  'data-garden-version': '9.0.0-next.3'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-19meqgg-0"
@@ -94,7 +91,7 @@ const getHeight = props => {
 const colorStyles = props => {
   let retVal;
   let hue;
-  if (props.disabled || props.isNeutral && (props.isPrimary || props.isSelected) && !props.isDanger) {
+  if (props.disabled || props.isNeutral && props.isPrimary && !props.isDanger) {
     hue = 'neutralHue';
   } else if (props.isDanger) {
     hue = 'dangerHue';
@@ -117,8 +114,8 @@ const colorStyles = props => {
         outlineColor: focusColor
       }
     }), hoverColor, activeColor, disabledForegroundColor);
-  } else if (props.isPrimary || props.isSelected) {
-    retVal = css(["outline-color:transparent;background-color:", ";color:", ";&:hover{background-color:", ";}", " &:active{background-color:", ";}&[aria-pressed='true'],&[aria-pressed='mixed']{background-color:", ";}&:disabled{background-color:", ";color:", ";}"], props.isPrimary && props.isSelected ? activeColor : baseColor, props.theme.palette.white, hoverColor, focusStyles({
+  } else if (props.isPrimary) {
+    retVal = css(["outline-color:transparent;background-color:", ";color:", ";&:hover{background-color:", ";}", " &:active{background-color:", ";}&[aria-pressed='true'],&[aria-pressed='mixed']{background-color:", ";}&:disabled{background-color:", ";color:", ";}"], baseColor, props.theme.palette.white, hoverColor, focusStyles({
       theme: props.theme,
       inset: props.focusInset,
       shadowWidth: props.focusInset ? 'sm' : 'md',
@@ -147,7 +144,6 @@ const groupStyles = props => {
     theme,
     isPrimary,
     isBasic,
-    isSelected,
     isPill,
     focusInset
   } = props;
@@ -164,7 +160,7 @@ const groupStyles = props => {
   const disabledBackgroundColor = !isPrimary && getDisabledBackgroundColor(props);
   const borderColor = isBasic ? 'transparent' : 'revert';
   const focusColor = getColor('primaryHue', 600, theme);
-  const focusBoxShadow = isBasic && !isSelected && !isPrimary && getFocusBoxShadow({
+  const focusBoxShadow = isBasic && !isPrimary && getFocusBoxShadow({
     theme,
     inset: focusInset,
     spacerHue: focusColor,
@@ -202,12 +198,12 @@ const sizeStyles = props => {
 };
 const StyledButton = styled.button.attrs(props => ({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.1',
+  'data-garden-version': '9.0.0-next.3',
   type: props.type || 'button'
 })).withConfig({
   displayName: "StyledButton",
   componentId: "sc-qe3ace-0"
-})(["display:", ";align-items:", ";justify-content:", ";transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out,outline-color 0.1s ease-in-out,z-index 0.25s ease-in-out;margin:0;border:", ";border-radius:", ";cursor:pointer;width:", ";overflow:hidden;text-decoration:none;text-overflow:ellipsis;white-space:", ";font-family:inherit;font-weight:", ";-webkit-font-smoothing:subpixel-antialiased;box-sizing:border-box;user-select:", ";-webkit-touch-callout:none;", ";&::-moz-focus-inner{border:0;padding:0;}", "{text-decoration:none;}&:hover{text-decoration:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{transition:border-color 0.1s ease-in-out,background-color 0.1s ease-in-out,box-shadow 0.1s ease-in-out,color 0.1s ease-in-out,outline-color 0.1s ease-in-out,z-index 0.25s ease-in-out;text-decoration:", ";}", ";&:disabled{cursor:default;text-decoration:", ";}& ", "{", "}", " &&{", "}", ""], props => props.isLink ? 'inline' : 'inline-flex', props => !props.isLink && 'center', props => !props.isLink && 'center', props => `${props.isLink ? `0px solid` : props.theme.borders.sm} transparent`, props => getBorderRadius(props), props => props.isStretched ? '100%' : '', props => !props.isLink && 'nowrap', props => props.isLink ? 'inherit' : props.theme.fontWeights.regular, props => !props.isLink && 'none', props => sizeStyles(props), SELECTOR_FOCUS_VISIBLE, props => props.isLink ? 'underline' : 'none', props => props.isLink ? 'underline' : 'none', props => colorStyles(props), props => props.isLink && 'none', StyledIcon, props => iconStyles$1(props), StyledButtonGroup, props => groupStyles(props), props => retrieveComponentStyles(COMPONENT_ID$3, props));
+})(["display:", ";align-items:", ";justify-content:", ";transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out,outline-color 0.1s ease-in-out,z-index 0.25s ease-in-out;margin:0;border:", ";border-radius:", ";cursor:pointer;width:", ";overflow:hidden;text-decoration:none;text-overflow:ellipsis;white-space:", ";font-family:inherit;font-weight:", ";-webkit-font-smoothing:subpixel-antialiased;box-sizing:border-box;user-select:", ";-webkit-touch-callout:none;", ";&::-moz-focus-inner{border:0;padding:0;}", "{text-decoration:none;}&:hover{text-decoration:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{transition:border-color 0.1s ease-in-out,background-color 0.1s ease-in-out,box-shadow 0.1s ease-in-out,color 0.1s ease-in-out,outline-color 0.1s ease-in-out,z-index 0.25s ease-in-out;text-decoration:", ";}", ";&:disabled{cursor:default;text-decoration:", ";}& ", "{", "}", " &&{", "}", ""], props => props.isLink ? 'inline' : 'inline-flex', props => !props.isLink && 'center', props => !props.isLink && 'center', props => `${props.isLink ? `0px solid` : props.theme.borders.sm} transparent`, props => getBorderRadius(props), props => props.isStretched ? '100%' : '', props => !props.isLink && 'nowrap', props => props.isLink ? 'inherit' : props.theme.fontWeights.regular, props => !props.isLink && 'none', props => sizeStyles(props), SELECTOR_FOCUS_VISIBLE, props => props.isLink ? 'underline' : 'none', props => props.isLink ? 'underline' : 'none', props => colorStyles(props), props => props.isLink && 'none', StyledIcon, props => iconStyles$1(props), StyledSplitButton, props => groupStyles(props), props => retrieveComponentStyles(COMPONENT_ID$3, props));
 StyledButton.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -215,7 +211,7 @@ StyledButton.defaultProps = {
 const COMPONENT_ID$2 = 'buttons.anchor';
 const StyledAnchor = styled(StyledButton).attrs(props => ({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.1',
+  'data-garden-version': '9.0.0-next.3',
   as: 'a',
   dir: props.theme.rtl ? 'rtl' : undefined,
   isLink: true,
@@ -249,7 +245,7 @@ var SvgNewWindowStroke = function SvgNewWindowStroke(props) {
 const COMPONENT_ID$1 = 'buttons.external_icon';
 const StyledExternalIcon = styled(SvgNewWindowStroke).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.1'
+  'data-garden-version': '9.0.0-next.3'
 }).withConfig({
   displayName: "StyledExternalIcon",
   componentId: "sc-16oz07e-0"
@@ -276,7 +272,7 @@ const iconStyles = props => {
 };
 const StyledIconButton = styled(StyledButton).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.1'
+  'data-garden-version': '9.0.0-next.3'
 }).withConfig({
   displayName: "StyledIconButton",
   componentId: "sc-1t0ughp-0"
@@ -285,11 +281,6 @@ StyledIconButton.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const ButtonGroupContext = createContext(undefined);
-const useButtonGroupContext = () => {
-  return useContext(ButtonGroupContext);
-};
-
 const SplitButtonContext = createContext(undefined);
 const useSplitButtonContext = () => {
   return useContext(SplitButtonContext);
@@ -308,26 +299,13 @@ EndIconComponent.displayName = 'Button.EndIcon';
 const EndIcon = EndIconComponent;
 
 const ButtonComponent = forwardRef((props, ref) => {
-  const buttonGroupContext = useButtonGroupContext();
   const splitButtonContext = useSplitButtonContext();
-  let computedRef = ref;
-  let computedProps = {
+  const computedProps = {
     ...props,
-    focusInset: props.focusInset || buttonGroupContext !== undefined || splitButtonContext
+    focusInset: props.focusInset || splitButtonContext
   };
-  if (buttonGroupContext && !props.disabled) {
-    if (!props.value) {
-      throw new Error('"value" prop must be provided to Button when used within a ButtonGroup');
-    }
-    computedProps = buttonGroupContext.getButtonProps({
-      isSelected: props.value === buttonGroupContext.selectedItem,
-      ...computedProps
-    });
-    computedRef = mergeRefs([
-    computedProps.ref, ref]);
-  }
   return React__default.createElement(StyledButton, _extends$2({}, computedProps, {
-    ref: computedRef
+    ref: ref
   }));
 });
 ButtonComponent.displayName = 'Button';
@@ -340,7 +318,6 @@ ButtonComponent.propTypes = {
   focusInset: PropTypes.bool,
   isLink: PropTypes.bool,
   isStretched: PropTypes.bool,
-  isSelected: PropTypes.bool,
   size: PropTypes.oneOf(SIZE)
 };
 ButtonComponent.defaultProps = {
@@ -387,58 +364,6 @@ Anchor.propTypes = {
   externalIconLabel: PropTypes.string
 };
 
-const ButtonGroup = forwardRef((_ref, ref) => {
-  let {
-    children,
-    onSelect,
-    selectedItem: controlledSelectedValue,
-    ...otherProps
-  } = _ref;
-  const {
-    rtl
-  } = useContext(ThemeContext) || DEFAULT_THEME;
-  const [internalSelectedValue, setInternalSelectedValue] = useState();
-  const selectedValue = getControlledValue(controlledSelectedValue, internalSelectedValue);
-  const values = useMemo(() => Children.toArray(children).reduce((buttons, child) => {
-    if ( isValidElement(child) && child.type !== 'string' && !child.props.disabled) {
-      buttons.push(child.props.value);
-    }
-    return buttons;
-  }, []), [children]);
-  const {
-    selectedValue: selectedItem,
-    getElementProps,
-    getGroupProps
-  } = useSelection({
-    rtl,
-    values,
-    defaultSelectedValue: values[0],
-    selectedValue,
-    onSelect: useCallback(value => {
-      onSelect && onSelect(value);
-      setInternalSelectedValue(value);
-    }, [onSelect])
-  });
-  const contextValue = useMemo(() => ({
-    selectedItem,
-    getButtonProps: props => getElementProps({
-      role: 'button',
-      selectedAriaKey: 'aria-pressed',
-      ...props
-    })
-  }), [selectedItem, getElementProps]);
-  return React__default.createElement(ButtonGroupContext.Provider, {
-    value: contextValue
-  }, React__default.createElement(StyledButtonGroup, _extends$2({
-    ref: ref
-  }, getGroupProps(otherProps)), children));
-});
-ButtonGroup.displayName = 'ButtonGroup';
-ButtonGroup.propTypes = {
-  selectedItem: PropTypes.any,
-  onSelect: PropTypes.func
-};
-
 const IconButton = forwardRef((_ref, ref) => {
   let {
     children,
@@ -510,7 +435,7 @@ const SplitButton = forwardRef((_ref, ref) => {
   } = _ref;
   return React__default.createElement(SplitButtonContext.Provider, {
     value: true
-  }, React__default.createElement(StyledButtonGroup, _extends$2({
+  }, React__default.createElement(StyledSplitButton, _extends$2({
     ref: ref
   }, other), children));
 });
@@ -556,4 +481,4 @@ ToggleIconButton.defaultProps = {
   size: 'medium'
 };
 
-export { Anchor, Button, ButtonGroup, ChevronButton, IconButton, SplitButton, ToggleButton, ToggleIconButton };
+export { Anchor, Button, ChevronButton, IconButton, SplitButton, ToggleButton, ToggleIconButton };

package/dist/typings/elements/Button.d.ts

@@ -4,16 +4,10 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-import React, { SVGAttributes } from 'react';
+import React from 'react';
 import { IButtonProps } from '../types';
 import { StartIcon } from './components/StartIcon';
 import { EndIcon } from './components/EndIcon';
-/**
- * @deprecated use IButtonStartIconProps or IButtonEndIconProps instead
- */
-export interface IIconProps extends SVGAttributes<SVGSVGElement> {
-    isRotated?: boolean;
-}
 /**
  * @extends ButtonHTMLAttributes<HTMLButtonElement>
  */

package/dist/typings/index.d.ts

@@ -4,12 +4,11 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-export { Button, type IIconProps } from './elements/Button';
+export { Button } from './elements/Button';
 export { Anchor } from './elements/Anchor';
-export { ButtonGroup } from './elements/ButtonGroup';
 export { ChevronButton } from './elements/ChevronButton';
 export { IconButton } from './elements/IconButton';
 export { SplitButton } from './elements/SplitButton';
 export { ToggleButton } from './elements/ToggleButton';
 export { ToggleIconButton } from './elements/ToggleIconButton';
-export type { IButtonProps, IButtonIconProps as IButtonEndIconProps, IButtonIconProps as IButtonStartIconProps, IAnchorProps, IIconButtonProps, IIconButtonProps as IChevronButtonProps, IToggleButtonProps, IToggleIconButtonProps, IButtonGroupProps } from './types';
+export type { IButtonProps, IButtonIconProps as IButtonEndIconProps, IButtonIconProps as IButtonStartIconProps, IAnchorProps, IIconButtonProps, IIconButtonProps as IChevronButtonProps, IToggleButtonProps, IToggleIconButtonProps } from './types';

package/dist/typings/styled/{StyledButtonGroup.d.ts → StyledSplitButton.d.ts}

@@ -7,7 +7,7 @@
 /**
  * Accepts all `<div>` props
  */
-export declare const StyledButtonGroup: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+export declare const StyledSplitButton: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
 }, "data-garden-id" | "data-garden-version">;

package/dist/typings/styled/index.d.ts

@@ -6,7 +6,7 @@
  */
 export * from './StyledAnchor';
 export * from './StyledButton';
-export * from './StyledButtonGroup';
+export * from './StyledSplitButton';
 export * from './StyledExternalIcon';
 export * from './StyledIcon';
 export * from './StyledIconButton';

package/dist/typings/types/index.d.ts

@@ -4,7 +4,7 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-import { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes, SVGAttributes } from 'react';
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, SVGAttributes } from 'react';
 export declare const SIZE: readonly ["small", "medium", "large"];
 export interface IButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /** Applies danger styling */
@@ -25,8 +25,6 @@ export interface IButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     isPill?: boolean;
     /** Applies inset `box-shadow` styling on focus */
     focusInset?: boolean;
-    /** @ignore prop used by `ButtonGroup` */
-    isSelected?: boolean;
 }
 export interface IToggleButtonProps extends IButtonProps {
     /**
@@ -56,13 +54,3 @@ export interface IAnchorProps extends Pick<IButtonProps, 'isDanger'>, AnchorHTML
      **/
     externalIconLabel?: string;
 }
-export interface IButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
-    /** Defines the currently selected button in the group */
-    selectedItem?: any;
-    /**
-     * Handles button selection
-     *
-     * @param {any} item The selected item
-     */
-    onSelect?: (item: any) => void;
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-buttons",
-  "version": "9.0.0-next.1",
+  "version": "9.0.0-next.3",
   "description": "Components relating to buttons in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -21,7 +21,6 @@
   "sideEffects": false,
   "types": "dist/typings/index.d.ts",
   "dependencies": {
-    "@zendeskgarden/container-selection": "^3.0.0",
     "@zendeskgarden/container-utilities": "^2.0.0",
     "polished": "^4.0.0",
     "prop-types": "^15.5.7",
@@ -34,7 +33,7 @@
     "styled-components": "^5.1.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.0.0-next.1",
+    "@zendeskgarden/react-theming": "^9.0.0-next.3",
     "@zendeskgarden/svg-icons": "7.0.0"
   },
   "keywords": [
@@ -47,5 +46,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "a9e4e776bf6ad8860a198fc24f27b2b5cbc83320"
+  "gitHead": "d5086e8a3ae0c8608361966954bf434ef03005ec"
 }

package/dist/typings/elements/ButtonGroup.d.ts

@@ -1,14 +0,0 @@
-/**
- * Copyright Zendesk, Inc.
- *
- * Use of this source code is governed under the Apache License, Version 2.0
- * found at http://www.apache.org/licenses/LICENSE-2.0.
- */
-import React from 'react';
-import { IButtonGroupProps } from '../types';
-/**
- * @deprecated this legacy component will be removed in a future release
- *
- * @extends HTMLAttributes<HTMLDivElement>
- */
-export declare const ButtonGroup: React.ForwardRefExoticComponent<IButtonGroupProps & React.RefAttributes<HTMLDivElement>>;

package/dist/typings/utils/useButtonGroupContext.d.ts

@@ -1,14 +0,0 @@
-/**
- * Copyright Zendesk, Inc.
- *
- * Use of this source code is governed under the Apache License, Version 2.0
- * found at http://www.apache.org/licenses/LICENSE-2.0.
- */
-/// <reference types="react" />
-interface IButtonGroupContext {
-    selectedItem: any;
-    getButtonProps: (props: any) => any;
-}
-export declare const ButtonGroupContext: import("react").Context<IButtonGroupContext | undefined>;
-export declare const useButtonGroupContext: () => IButtonGroupContext | undefined;
-export {};