refactor(buttons): button group react v18 uplift

packages/buttons/.size-snapshot.json

@@ -1,21 +1,21 @@
 {
   "index.esm.js": {
-    "bundled": 22437,
-    "minified": 15858,
-    "gzipped": 4398,
+    "bundled": 23371,
+    "minified": 16336,
+    "gzipped": 4621,
     "treeshaked": {
       "rollup": {
-        "code": 12786,
-        "import_statements": 498
+        "code": 13223,
+        "import_statements": 667
       },
       "webpack": {
-        "code": 13799
+        "code": 14267
       }
     }
   },
   "index.cjs.js": {
-    "bundled": 24510,
-    "minified": 17730,
-    "gzipped": 4644
+    "bundled": 25539,
+    "minified": 18281,
+    "gzipped": 4873
   }
 }

packages/buttons/package.json

@@ -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",

packages/buttons/src/elements/Button.tsx

@@ -5,8 +5,9 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import React, { forwardRef, SVGAttributes } from 'react';
+import React, { forwardRef, MutableRefObject, SVGAttributes } from 'react';
 import PropTypes from 'prop-types';
+import mergeRefs from 'react-merge-refs';
 import { IButtonProps, SIZE } from '../types';
 import { StyledButton } from '../styled';
 import { useButtonGroupContext } from '../utils/useButtonGroupContext';
@@ -25,6 +26,7 @@ const ButtonComponent = forwardRef<HTMLButtonElement, IButtonProps>((props, ref)
   const buttonGroupContext = useButtonGroupContext();
   const splitButtonContext = useSplitButtonContext();
 
+  let computedRef = ref;
   let computedProps = {
     ...props,
     focusInset: props.focusInset || buttonGroupContext !== undefined || splitButtonContext
@@ -36,14 +38,17 @@ const ButtonComponent = forwardRef<HTMLButtonElement, IButtonProps>((props, ref)
     }
 
     computedProps = buttonGroupContext.getButtonProps({
-      item: props.value,
-      focusRef: React.createRef(),
       isSelected: props.value === buttonGroupContext.selectedItem,
       ...computedProps
     });
+    computedRef = mergeRefs([
+      // a `ref` is added by the `useSelection` container which we need to merge with the forwarded `ref`
+      (computedProps as IButtonProps & { ref: MutableRefObject<HTMLButtonElement> }).ref,
+      ref
+    ]);
   }
 
-  return <StyledButton ref={ref} {...computedProps} />;
+  return <StyledButton {...computedProps} ref={computedRef} />;
 });
 
 ButtonComponent.displayName = 'Button';

packages/buttons/src/elements/ButtonGroup.spec.tsx

@@ -41,6 +41,24 @@ describe('ButtonGroup', () => {
     console.error = originalError;
   });
 
+  it('passes ref to underlying DOM elements', () => {
+    const groupRef = React.createRef<HTMLButtonElement>();
+    const btnRef = React.createRef<HTMLButtonElement>();
+    const { getAllByRole } = render(
+      <ButtonGroup data-test-id="group" ref={groupRef as any}>
+        <Button value="button-1" data-test-id="button" ref={btnRef}>
+          Button 1
+        </Button>
+        <Button value="button-2" data-test-id="button">
+          Button 2
+        </Button>
+      </ButtonGroup>
+    );
+
+    expect(getAllByRole('group')[0]).toBe(groupRef.current);
+    expect(getAllByRole('button')[0]).toBe(btnRef.current);
+  });
+
   it('applies selected styling to currently selected tab', async () => {
     const { getAllByTestId } = render(<BasicExample />);
     const lastButton = getAllByTestId('button')[1];

packages/buttons/src/elements/ButtonGroup.tsx

@@ -5,9 +5,20 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import React, { forwardRef, useMemo } from 'react';
+import React, {
+  Children,
+  forwardRef,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+  isValidElement
+} from 'react';
 import PropTypes from 'prop-types';
-import { useButtonGroup } from '@zendeskgarden/container-buttongroup';
+import { ThemeContext } from 'styled-components';
+import { useSelection } from '@zendeskgarden/container-selection';
+import { getControlledValue } from '@zendeskgarden/container-utilities';
+import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
 import { IButtonGroupProps } from '../types';
 import { StyledButtonGroup } from '../styled';
 import { ButtonGroupContext } from '../utils/useButtonGroupContext';
@@ -18,16 +29,52 @@ import { ButtonGroupContext } from '../utils/useButtonGroupContext';
  * @extends HTMLAttributes<HTMLDivElement>
  */
 export const ButtonGroup = forwardRef<HTMLDivElement, IButtonGroupProps>(
-  ({ children, onSelect, selectedItem: controlledSelectedItem, ...otherProps }, ref) => {
-    const { selectedItem, getButtonProps, getGroupProps } = useButtonGroup({
-      selectedItem: controlledSelectedItem,
-      defaultSelectedIndex: 0,
-      onSelect
+  ({ 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 as any[]).push(child.props.value);
+          }
+
+          return buttons;
+        }, []) as any[],
+      [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 }),
-      [selectedItem, getButtonProps]
+      () => ({
+        selectedItem,
+        getButtonProps: (props: any) =>
+          getElementProps({
+            role: 'button',
+            selectedAriaKey: 'aria-pressed',
+            ...props
+          })
+      }),
+      [selectedItem, getElementProps]
     );
 
     return (

packages/buttons/yarn.lock

@@ -21,33 +21,17 @@
   resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.18.0.tgz#4f3cebe093dd436eeaff633809bf0f68f4f9d2ee"
   integrity sha512-KdVMdpTgDyK8FzdKO9SCpiibuy/kbv3pwgfXshTI6tEcQT1OOwj7BAksnzGC0rPz0UholwC+AgkqEl3EJX3M1A==
 
-"@zendeskgarden/container-buttongroup@^1.0.0":
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/@zendeskgarden/container-buttongroup/-/container-buttongroup-1.0.6.tgz#f6feb7acfcfd35cf52d986a8fcfb6c0c067f477b"
-  integrity sha512-Aqcou4Azv+tRa8hiK3ZcPGOKHoV6p1bDGRYTpnO97Q5E+c/uxOME14E8/YIn509pP9iuzlBWMYemDyZHlJJr2w==
-  dependencies:
-    "@babel/runtime" "^7.8.4"
-    "@zendeskgarden/container-selection" "^2.0.6"
-
 "@zendeskgarden/container-focusvisible@^1.0.0":
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/@zendeskgarden/container-focusvisible/-/container-focusvisible-1.0.6.tgz#89986125f6e1d00e739e184f1ffdd150944ea195"
   integrity sha512-cTJW2vWKPGLo6kUooRmvfeFE730gHH7DIleeplze+1GhnY6bC5SgNm1L3WpoZmbuyl35CdWGjFah0oMUcr18rg==
   dependencies:
     "@babel/runtime" "^7.8.4"
 
-"@zendeskgarden/container-keyboardfocus@^1.0.0":
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/@zendeskgarden/container-keyboardfocus/-/container-keyboardfocus-1.0.6.tgz#f9895bf63de54fff3ad9204f92643816ff90e718"
-  integrity sha512-RdBi+8ZSaRJw9E1WLG/IAHFNg9FkiXGJTf1/rbNMZULz2APskJAq5WENmNDCSuJZPR1B/p8kYudivTwoG4PPIQ==
-  dependencies:
-    "@babel/runtime" "^7.8.4"
-    "@zendeskgarden/container-utilities" "^1.0.6"
-
-"@zendeskgarden/container-selection@^2.0.6":
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/@zendeskgarden/container-selection/-/container-selection-2.0.6.tgz#7a78edb831f584e84dca87c2a9ee1bbe3f2801d1"
-  integrity sha512-TjVxmwepKGAKW2vR0G4mJsFR/AmrRKpPfZTfttfI2j9z5w00gYTxxN0Mxy4QUZou/TAKQsnSpcA/+6jJQQ5QhA==
+"@zendeskgarden/container-selection@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@zendeskgarden/container-selection/-/container-selection-3.0.0.tgz#b8ef4764d67cbd2da1dbd15cffe6dc1f17ca9e83"
+  integrity sha512-gDhuCsDRGlly1Loa/p8bVgaKZuLHjWYxkggctAgUZ8oI8TlPsCcPrBrDgF+NSeEf38hGR4RN36vcZzmJoYrdXA==
   dependencies:
     "@babel/runtime" "^7.8.4"
     "@zendeskgarden/container-utilities" "^1.0.6"
@@ -119,6 +103,11 @@ react-is@^16.13.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-merge-refs@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/react-merge-refs/-/react-merge-refs-1.1.0.tgz#73d88b892c6c68cbb7a66e0800faa374f4c38b06"
+  integrity sha512-alTKsjEL0dKH/ru1Iyn7vliS2QRcBp9zZPGoWxUOvRGWPUYgjo+V01is7p04It6KhgrzhJGnIj9GgX8W4bZoCQ==
+
 regenerator-runtime@^0.13.11:
   version "0.13.11"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"