@zendeskgarden/react-buttons 8.69.3 → 8.69.5

package/dist/index.cjs.js

@@ -9,10 +9,12 @@
 
 var React = require('react');
 var PropTypes = require('prop-types');
+var mergeRefs = require('react-merge-refs');
 var styled = require('styled-components');
 var reactTheming = require('@zendeskgarden/react-theming');
 var polished = require('polished');
-var containerButtongroup = require('@zendeskgarden/container-buttongroup');
+var containerSelection = require('@zendeskgarden/container-selection');
+var containerUtilities = require('@zendeskgarden/container-utilities');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -36,6 +38,7 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var mergeRefs__default = /*#__PURE__*/_interopDefault(mergeRefs);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 
 function _extends$2() {
@@ -58,7 +61,7 @@ const SIZE = ['small', 'medium', 'large'];
 const COMPONENT_ID$5 = 'buttons.button_group_view';
 const StyledButtonGroup = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.69.3'
+  'data-garden-version': '8.69.5'
 }).withConfig({
   displayName: "StyledButtonGroup",
   componentId: "sc-1fbpzef-0"
@@ -87,7 +90,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': '8.69.3'
+  'data-garden-version': '8.69.5'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-19meqgg-0"
@@ -225,7 +228,7 @@ const sizeStyles = props => {
 };
 const StyledButton = styled__default.default.button.attrs(props => ({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.69.3',
+  'data-garden-version': '8.69.5',
   type: props.type || 'button'
 })).withConfig({
   displayName: "StyledButton",
@@ -238,7 +241,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': '8.69.3',
+  'data-garden-version': '8.69.5',
   as: 'a',
   dir: props.theme.rtl ? 'rtl' : undefined,
   isLink: true,
@@ -272,7 +275,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': '8.69.3'
+  'data-garden-version': '8.69.5'
 }).withConfig({
   displayName: "StyledExternalIcon",
   componentId: "sc-16oz07e-0"
@@ -299,7 +302,7 @@ const iconStyles = props => {
 };
 const StyledIconButton = styled__default.default(StyledButton).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.69.3'
+  'data-garden-version': '8.69.5'
 }).withConfig({
   displayName: "StyledIconButton",
   componentId: "sc-1t0ughp-0"
@@ -333,6 +336,7 @@ const EndIcon = EndIconComponent;
 const ButtonComponent = React.forwardRef((props, ref) => {
   const buttonGroupContext = useButtonGroupContext();
   const splitButtonContext = useSplitButtonContext();
+  let computedRef = ref;
   let computedProps = {
     ...props,
     focusInset: props.focusInset || buttonGroupContext !== undefined || splitButtonContext
@@ -342,15 +346,15 @@ const ButtonComponent = React.forwardRef((props, ref) => {
       throw new Error('"value" prop must be provided to Button when used within a ButtonGroup');
     }
     computedProps = buttonGroupContext.getButtonProps({
-      item: props.value,
-      focusRef: React__namespace.default.createRef(),
       isSelected: props.value === buttonGroupContext.selectedItem,
       ...computedProps
     });
+    computedRef = mergeRefs__default.default([
+    computedProps.ref, ref]);
   }
-  return React__namespace.default.createElement(StyledButton, _extends$2({
-    ref: ref
-  }, computedProps));
+  return React__namespace.default.createElement(StyledButton, _extends$2({}, computedProps, {
+    ref: computedRef
+  }));
 });
 ButtonComponent.displayName = 'Button';
 ButtonComponent.propTypes = {
@@ -413,22 +417,42 @@ const ButtonGroup = React.forwardRef((_ref, ref) => {
   let {
     children,
     onSelect,
-    selectedItem: controlledSelectedItem,
+    selectedItem: controlledSelectedValue,
     ...otherProps
   } = _ref;
   const {
-    selectedItem,
-    getButtonProps,
+    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
-  } = containerButtongroup.useButtonGroup({
-    selectedItem: controlledSelectedItem,
-    defaultSelectedIndex: 0,
-    onSelect
+  } = containerSelection.useSelection({
+    rtl,
+    values,
+    defaultSelectedValue: values[0],
+    selectedValue,
+    onSelect: React.useCallback(value => {
+      onSelect && onSelect(value);
+      setInternalSelectedValue(value);
+    }, [onSelect])
   });
   const contextValue = React.useMemo(() => ({
     selectedItem,
-    getButtonProps
-  }), [selectedItem, getButtonProps]);
+    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({

package/dist/index.esm.js

@@ -6,12 +6,14 @@
  */
 
 import * as React from 'react';
-import React__default, { Children, createContext, useContext, forwardRef, useMemo } from 'react';
+import React__default, { Children, createContext, useContext, forwardRef, useState, useMemo, isValidElement, useCallback } from 'react';
 import PropTypes from 'prop-types';
-import styled, { css } from 'styled-components';
+import mergeRefs from 'react-merge-refs';
+import styled, { css, ThemeContext } 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 { useButtonGroup } from '@zendeskgarden/container-buttongroup';
+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,7 +35,7 @@ const SIZE = ['small', 'medium', 'large'];
 const COMPONENT_ID$5 = 'buttons.button_group_view';
 const StyledButtonGroup = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.69.3'
+  'data-garden-version': '8.69.5'
 }).withConfig({
   displayName: "StyledButtonGroup",
   componentId: "sc-1fbpzef-0"
@@ -62,7 +64,7 @@ const StyledIcon = styled(_ref => {
   return React__default.cloneElement(Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.69.3'
+  'data-garden-version': '8.69.5'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-19meqgg-0"
@@ -200,7 +202,7 @@ const sizeStyles = props => {
 };
 const StyledButton = styled.button.attrs(props => ({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.69.3',
+  'data-garden-version': '8.69.5',
   type: props.type || 'button'
 })).withConfig({
   displayName: "StyledButton",
@@ -213,7 +215,7 @@ StyledButton.defaultProps = {
 const COMPONENT_ID$2 = 'buttons.anchor';
 const StyledAnchor = styled(StyledButton).attrs(props => ({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.69.3',
+  'data-garden-version': '8.69.5',
   as: 'a',
   dir: props.theme.rtl ? 'rtl' : undefined,
   isLink: true,
@@ -247,7 +249,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': '8.69.3'
+  'data-garden-version': '8.69.5'
 }).withConfig({
   displayName: "StyledExternalIcon",
   componentId: "sc-16oz07e-0"
@@ -274,7 +276,7 @@ const iconStyles = props => {
 };
 const StyledIconButton = styled(StyledButton).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.69.3'
+  'data-garden-version': '8.69.5'
 }).withConfig({
   displayName: "StyledIconButton",
   componentId: "sc-1t0ughp-0"
@@ -308,6 +310,7 @@ const EndIcon = EndIconComponent;
 const ButtonComponent = forwardRef((props, ref) => {
   const buttonGroupContext = useButtonGroupContext();
   const splitButtonContext = useSplitButtonContext();
+  let computedRef = ref;
   let computedProps = {
     ...props,
     focusInset: props.focusInset || buttonGroupContext !== undefined || splitButtonContext
@@ -317,15 +320,15 @@ const ButtonComponent = forwardRef((props, ref) => {
       throw new Error('"value" prop must be provided to Button when used within a ButtonGroup');
     }
     computedProps = buttonGroupContext.getButtonProps({
-      item: props.value,
-      focusRef: React__default.createRef(),
       isSelected: props.value === buttonGroupContext.selectedItem,
       ...computedProps
     });
+    computedRef = mergeRefs([
+    computedProps.ref, ref]);
   }
-  return React__default.createElement(StyledButton, _extends$2({
-    ref: ref
-  }, computedProps));
+  return React__default.createElement(StyledButton, _extends$2({}, computedProps, {
+    ref: computedRef
+  }));
 });
 ButtonComponent.displayName = 'Button';
 ButtonComponent.propTypes = {
@@ -388,22 +391,42 @@ const ButtonGroup = forwardRef((_ref, ref) => {
   let {
     children,
     onSelect,
-    selectedItem: controlledSelectedItem,
+    selectedItem: controlledSelectedValue,
     ...otherProps
   } = _ref;
   const {
-    selectedItem,
-    getButtonProps,
+    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
-  } = useButtonGroup({
-    selectedItem: controlledSelectedItem,
-    defaultSelectedIndex: 0,
-    onSelect
+  } = useSelection({
+    rtl,
+    values,
+    defaultSelectedValue: values[0],
+    selectedValue,
+    onSelect: useCallback(value => {
+      onSelect && onSelect(value);
+      setInternalSelectedValue(value);
+    }, [onSelect])
   });
   const contextValue = useMemo(() => ({
     selectedItem,
-    getButtonProps
-  }), [selectedItem, getButtonProps]);
+    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({

package/dist/typings/index.d.ts

@@ -4,8 +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.
  */
-export { Button } from './elements/Button';
-export type { IIconProps } from './elements/Button';
+export { Button, type IIconProps } from './elements/Button';
 export { Anchor } from './elements/Anchor';
 export { ButtonGroup } from './elements/ButtonGroup';
 export { ChevronButton } from './elements/ChevronButton';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-buttons",
-  "version": "8.69.3",
+  "version": "8.69.5",
   "description": "Components relating to buttons in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -21,10 +21,11 @@
   "sideEffects": false,
   "types": "dist/typings/index.d.ts",
   "dependencies": {
-    "@zendeskgarden/container-buttongroup": "^1.0.0",
-    "@zendeskgarden/container-keyboardfocus": "^1.0.0",
+    "@zendeskgarden/container-selection": "^3.0.0",
+    "@zendeskgarden/container-utilities": "^1.0.6",
     "polished": "^4.0.0",
-    "prop-types": "^15.5.7"
+    "prop-types": "^15.5.7",
+    "react-merge-refs": "^1.1.0"
   },
   "peerDependencies": {
     "@zendeskgarden/react-theming": "^8.67.0",
@@ -33,7 +34,7 @@
     "styled-components": "^4.2.0 || ^5.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^8.69.3",
+    "@zendeskgarden/react-theming": "^8.69.5",
     "@zendeskgarden/svg-icons": "6.33.0"
   },
   "keywords": [
@@ -46,5 +47,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "c861fbeb70120b66b05d2ce3a26ccf3047659aa0"
+  "gitHead": "610a2e79728debaa8ea03de256d81b83cf4e595f"
 }