@zendeskgarden/react-buttons 8.69.2 → 8.69.4

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.2'
+  'data-garden-version': '8.69.4'
 }).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.2'
+  'data-garden-version': '8.69.4'
 }).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.2',
+  'data-garden-version': '8.69.4',
   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.2',
+  'data-garden-version': '8.69.4',
   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.2'
+  'data-garden-version': '8.69.4'
 }).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.2'
+  'data-garden-version': '8.69.4'
 }).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.2'
+  'data-garden-version': '8.69.4'
 }).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.2'
+  'data-garden-version': '8.69.4'
 }).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.2',
+  'data-garden-version': '8.69.4',
   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.2',
+  'data-garden-version': '8.69.4',
   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.2'
+  'data-garden-version': '8.69.4'
 }).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.2'
+  'data-garden-version': '8.69.4'
 }).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/elements/Anchor.d.ts

@@ -1,16 +1,16 @@
-/**
- * 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 { IAnchorProps } from '../types';
-/**
- * 1. role='img' on `svg` is valid WAI-ARIA usage in this context.
- *    https://dequeuniversity.com/rules/axe/4.2/svg-img-alt
- */
-/**
- * @extends AnchorHTMLAttributes<HTMLAnchorElement>
- */
-export declare const Anchor: React.ForwardRefExoticComponent<IAnchorProps & React.RefAttributes<HTMLAnchorElement>>;
+/**
+ * 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 { IAnchorProps } from '../types';
+/**
+ * 1. role='img' on `svg` is valid WAI-ARIA usage in this context.
+ *    https://dequeuniversity.com/rules/axe/4.2/svg-img-alt
+ */
+/**
+ * @extends AnchorHTMLAttributes<HTMLAnchorElement>
+ */
+export declare const Anchor: React.ForwardRefExoticComponent<IAnchorProps & React.RefAttributes<HTMLAnchorElement>>;

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

@@ -1,23 +1,23 @@
-/**
- * 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, { SVGAttributes } 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>
- */
-export declare const Button: React.ForwardRefExoticComponent<IButtonProps & React.RefAttributes<HTMLButtonElement>> & {
-    EndIcon: typeof EndIcon;
-    StartIcon: typeof StartIcon;
-};
+/**
+ * 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, { SVGAttributes } 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>
+ */
+export declare const Button: React.ForwardRefExoticComponent<IButtonProps & React.RefAttributes<HTMLButtonElement>> & {
+    EndIcon: typeof EndIcon;
+    StartIcon: typeof StartIcon;
+};

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

@@ -1,14 +1,14 @@
-/**
- * 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>>;
+/**
+ * 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/elements/ChevronButton.d.ts

@@ -1,12 +1,12 @@
-/**
- * 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 { IIconButtonProps } from '../types';
-/**
- * @extends ButtonHTMLAttributes<HTMLButtonElement>
- */
-export declare const ChevronButton: React.ForwardRefExoticComponent<IIconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * 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 { IIconButtonProps } from '../types';
+/**
+ * @extends ButtonHTMLAttributes<HTMLButtonElement>
+ */
+export declare const ChevronButton: React.ForwardRefExoticComponent<IIconButtonProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -1,12 +1,12 @@
-/**
- * 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 { IIconButtonProps } from '../types';
-/**
- * @extends ButtonHTMLAttributes<HTMLButtonElement>
- */
-export declare const IconButton: React.ForwardRefExoticComponent<IIconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * 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 { IIconButtonProps } from '../types';
+/**
+ * @extends ButtonHTMLAttributes<HTMLButtonElement>
+ */
+export declare const IconButton: React.ForwardRefExoticComponent<IIconButtonProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -1,11 +1,11 @@
-/**
- * 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';
-/**
- * @extends HTMLAttributes<HTMLDivElement>
- */
-export declare const SplitButton: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * 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';
+/**
+ * @extends HTMLAttributes<HTMLDivElement>
+ */
+export declare const SplitButton: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,12 +1,12 @@
-/**
- * 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 { IToggleButtonProps } from '../types';
-/**
- * @extends ButtonHTMLAttributes<HTMLButtonElement>
- */
-export declare const ToggleButton: React.ForwardRefExoticComponent<IToggleButtonProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * 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 { IToggleButtonProps } from '../types';
+/**
+ * @extends ButtonHTMLAttributes<HTMLButtonElement>
+ */
+export declare const ToggleButton: React.ForwardRefExoticComponent<IToggleButtonProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -1,12 +1,12 @@
-/**
- * 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 { IToggleIconButtonProps } from '../types';
-/**
- * @extends ButtonHTMLAttributes<HTMLButtonElement>
- */
-export declare const ToggleIconButton: React.ForwardRefExoticComponent<IToggleIconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * 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 { IToggleIconButtonProps } from '../types';
+/**
+ * @extends ButtonHTMLAttributes<HTMLButtonElement>
+ */
+export declare const ToggleIconButton: React.ForwardRefExoticComponent<IToggleIconButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/typings/elements/components/EndIcon.d.ts

@@ -1,15 +1,15 @@
-/**
- * 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 { IButtonIconProps } from '../../types';
-/**
- * @extends SVGAttributes<SVGElement>
- */
-export declare const EndIcon: {
-    (props: IButtonIconProps): React.JSX.Element;
-    displayName: string;
-};
+/**
+ * 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 { IButtonIconProps } from '../../types';
+/**
+ * @extends SVGAttributes<SVGElement>
+ */
+export declare const EndIcon: {
+    (props: IButtonIconProps): React.JSX.Element;
+    displayName: string;
+};

package/dist/typings/elements/components/StartIcon.d.ts

@@ -1,15 +1,15 @@
-/**
- * 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 { IButtonIconProps } from '../../types';
-/**
- * @extends SVGAttributes<SVGElement>
- */
-export declare const StartIcon: {
-    (props: IButtonIconProps): React.JSX.Element;
-    displayName: string;
-};
+/**
+ * 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 { IButtonIconProps } from '../../types';
+/**
+ * @extends SVGAttributes<SVGElement>
+ */
+export declare const StartIcon: {
+    (props: IButtonIconProps): React.JSX.Element;
+    displayName: string;
+};

package/dist/typings/index.d.ts

@@ -1,16 +1,15 @@
-/**
- * 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.
- */
-export { Button } from './elements/Button';
-export type { IIconProps } 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';
+/**
+ * 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.
+ */
+export { Button, type IIconProps } 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';

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

@@ -1,17 +1,17 @@
-/**
- * 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.
- */
-/**
- * Accepts all `<a>` props
- */
-export declare const StyledAnchor: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, import("..").IButtonProps & {
-    'data-garden-id': string;
-    'data-garden-version': string;
-    as: string;
-    dir: "rtl" | undefined;
-    isLink: boolean;
-    type: undefined;
-}, "type" | "dir" | "data-garden-id" | "data-garden-version" | "as" | "isLink">;
+/**
+ * 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.
+ */
+/**
+ * Accepts all `<a>` props
+ */
+export declare const StyledAnchor: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, import("..").IButtonProps & {
+    'data-garden-id': string;
+    'data-garden-version': string;
+    as: string;
+    dir: "rtl" | undefined;
+    isLink: boolean;
+    type: undefined;
+}, "type" | "dir" | "data-garden-id" | "data-garden-version" | "as" | "isLink">;

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

@@ -1,15 +1,15 @@
-/**
- * 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 { DefaultTheme, ThemeProps } from 'styled-components';
-import { IButtonProps } from '../types';
-export declare const getHeight: (props: IButtonProps & ThemeProps<DefaultTheme>) => string;
-/**
- * 1. FF <input type="submit"> fix
- * 2. <a> element reset
- * 3. Shifting :focus-visible from LVHFA order to preserve `text-decoration` on hover
- */
-export declare const StyledButton: import("styled-components").StyledComponent<"button", DefaultTheme, IButtonProps, never>;
+/**
+ * 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 { DefaultTheme, ThemeProps } from 'styled-components';
+import { IButtonProps } from '../types';
+export declare const getHeight: (props: IButtonProps & ThemeProps<DefaultTheme>) => string;
+/**
+ * 1. FF <input type="submit"> fix
+ * 2. <a> element reset
+ * 3. Shifting :focus-visible from LVHFA order to preserve `text-decoration` on hover
+ */
+export declare const StyledButton: import("styled-components").StyledComponent<"button", DefaultTheme, IButtonProps, never>;

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

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

@@ -1,13 +1,13 @@
-/**
- * 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.
- */
-/**
- * Accepts all `<svg>` props
- */
-export declare const StyledExternalIcon: import("styled-components").StyledComponent<any, import("styled-components").DefaultTheme, object & {
-    'data-garden-id': string;
-    'data-garden-version': string;
-}, string | number | symbol>;
+/**
+ * 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.
+ */
+/**
+ * Accepts all `<svg>` props
+ */
+export declare const StyledExternalIcon: import("styled-components").StyledComponent<any, import("styled-components").DefaultTheme, object & {
+    'data-garden-id': string;
+    'data-garden-version': string;
+}, string | number | symbol>;

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

@@ -1,17 +1,17 @@
-/**
- * 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 { DefaultTheme } from 'styled-components';
-import React from 'react';
-interface IStyledIconProps {
-    isRotated: boolean;
-    position?: 'start' | 'end';
-}
-export declare const StyledIcon: import("styled-components").StyledComponent<({ children, isRotated, theme, ...props }: any) => React.DetailedReactHTMLElement<any, HTMLElement>, DefaultTheme, {
-    'data-garden-id': string;
-    'data-garden-version': string;
-} & IStyledIconProps, "data-garden-id" | "data-garden-version">;
-export {};
+/**
+ * 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 { DefaultTheme } from 'styled-components';
+import React from 'react';
+interface IStyledIconProps {
+    isRotated: boolean;
+    position?: 'start' | 'end';
+}
+export declare const StyledIcon: import("styled-components").StyledComponent<({ children, isRotated, theme, ...props }: any) => React.DetailedReactHTMLElement<any, HTMLElement>, DefaultTheme, {
+    'data-garden-id': string;
+    'data-garden-version': string;
+} & IStyledIconProps, "data-garden-id" | "data-garden-version">;
+export {};

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

@@ -1,12 +1,12 @@
-/**
- * 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 { DefaultTheme } from 'styled-components';
-import { IButtonProps } from '../types';
-export declare const StyledIconButton: import("styled-components").StyledComponent<"button", DefaultTheme, {
-    'data-garden-id': string;
-    'data-garden-version': string;
-} & IButtonProps, "data-garden-id" | "data-garden-version">;
+/**
+ * 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 { DefaultTheme } from 'styled-components';
+import { IButtonProps } from '../types';
+export declare const StyledIconButton: import("styled-components").StyledComponent<"button", DefaultTheme, {
+    'data-garden-id': string;
+    'data-garden-version': string;
+} & IButtonProps, "data-garden-id" | "data-garden-version">;

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

@@ -1,12 +1,12 @@
-/**
- * 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.
- */
-export * from './StyledAnchor';
-export * from './StyledButton';
-export * from './StyledButtonGroup';
-export * from './StyledExternalIcon';
-export * from './StyledIcon';
-export * from './StyledIconButton';
+/**
+ * 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.
+ */
+export * from './StyledAnchor';
+export * from './StyledButton';
+export * from './StyledButtonGroup';
+export * from './StyledExternalIcon';
+export * from './StyledIcon';
+export * from './StyledIconButton';

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

@@ -1,68 +1,68 @@
-/**
- * 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 { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes, SVGAttributes } from 'react';
-export declare const SIZE: readonly ["small", "medium", "large"];
-export interface IButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    /** Applies danger styling */
-    isDanger?: boolean;
-    /** Specifies the button size */
-    size?: (typeof SIZE)[number];
-    /** Stretches the button fill to its container width */
-    isStretched?: boolean;
-    /** Applies neutral button styling */
-    isNeutral?: boolean;
-    /** Applies primary button styling */
-    isPrimary?: boolean;
-    /** Applies basic button styling */
-    isBasic?: boolean;
-    /** Applies link (anchor) button styling */
-    isLink?: boolean;
-    /** Applies pill button styling */
-    isPill?: boolean;
-    /** Applies inset `box-shadow` styling on focus */
-    focusInset?: boolean;
-    /** @ignore prop used by `ButtonGroup` */
-    isSelected?: boolean;
-}
-export interface IToggleButtonProps extends IButtonProps {
-    /**
-     * Determines if the button is pressed. Use "mixed" to indicate that
-     * the toggle controls other elements which do not share the same value.
-     */
-    isPressed?: boolean | 'mixed';
-}
-export interface IIconButtonProps extends Omit<IButtonProps, 'isStretched' | 'isLink'> {
-    /** Rotates icon 180 degrees */
-    isRotated?: boolean;
-}
-export interface IToggleIconButtonProps extends IIconButtonProps, Pick<IToggleButtonProps, 'isPressed'> {
-}
-export interface IButtonIconProps extends Pick<IIconButtonProps, 'isRotated'>, SVGAttributes<SVGElement> {
-}
-export interface IAnchorProps extends Pick<IButtonProps, 'isDanger'>, AnchorHTMLAttributes<HTMLAnchorElement> {
-    /**
-     * Attaches `target="_blank"` and `rel="noopener noreferrer"` to an anchor that
-     * navigates to an external resource. This ensures that the anchor is a
-     * safe [cross-origin destination link](https://web.dev/external-anchors-use-rel-noopener/).
-     **/
-    isExternal?: boolean;
-    /**
-     * Allows a customized/translated text label to be passed to the external link icon,
-     * making that icon accessible to assistive technology
-     **/
-    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;
-}
+/**
+ * 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 { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes, SVGAttributes } from 'react';
+export declare const SIZE: readonly ["small", "medium", "large"];
+export interface IButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Applies danger styling */
+    isDanger?: boolean;
+    /** Specifies the button size */
+    size?: (typeof SIZE)[number];
+    /** Stretches the button fill to its container width */
+    isStretched?: boolean;
+    /** Applies neutral button styling */
+    isNeutral?: boolean;
+    /** Applies primary button styling */
+    isPrimary?: boolean;
+    /** Applies basic button styling */
+    isBasic?: boolean;
+    /** Applies link (anchor) button styling */
+    isLink?: boolean;
+    /** Applies pill button styling */
+    isPill?: boolean;
+    /** Applies inset `box-shadow` styling on focus */
+    focusInset?: boolean;
+    /** @ignore prop used by `ButtonGroup` */
+    isSelected?: boolean;
+}
+export interface IToggleButtonProps extends IButtonProps {
+    /**
+     * Determines if the button is pressed. Use "mixed" to indicate that
+     * the toggle controls other elements which do not share the same value.
+     */
+    isPressed?: boolean | 'mixed';
+}
+export interface IIconButtonProps extends Omit<IButtonProps, 'isStretched' | 'isLink'> {
+    /** Rotates icon 180 degrees */
+    isRotated?: boolean;
+}
+export interface IToggleIconButtonProps extends IIconButtonProps, Pick<IToggleButtonProps, 'isPressed'> {
+}
+export interface IButtonIconProps extends Pick<IIconButtonProps, 'isRotated'>, SVGAttributes<SVGElement> {
+}
+export interface IAnchorProps extends Pick<IButtonProps, 'isDanger'>, AnchorHTMLAttributes<HTMLAnchorElement> {
+    /**
+     * Attaches `target="_blank"` and `rel="noopener noreferrer"` to an anchor that
+     * navigates to an external resource. This ensures that the anchor is a
+     * safe [cross-origin destination link](https://web.dev/external-anchors-use-rel-noopener/).
+     **/
+    isExternal?: boolean;
+    /**
+     * Allows a customized/translated text label to be passed to the external link icon,
+     * making that icon accessible to assistive technology
+     **/
+    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/dist/typings/utils/useButtonGroupContext.d.ts

@@ -1,14 +1,14 @@
-/**
- * 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 {};
+/**
+ * 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 {};

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

@@ -1,9 +1,9 @@
-/**
- * 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" />
-export declare const SplitButtonContext: import("react").Context<boolean | undefined>;
-export declare const useSplitButtonContext: () => boolean | undefined;
+/**
+ * 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" />
+export declare const SplitButtonContext: import("react").Context<boolean | undefined>;
+export declare const useSplitButtonContext: () => boolean | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-buttons",
-  "version": "8.69.2",
+  "version": "8.69.4",
   "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.2",
+    "@zendeskgarden/react-theming": "^8.69.4",
     "@zendeskgarden/svg-icons": "6.33.0"
   },
   "keywords": [
@@ -46,5 +47,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "a39f2b421375013a50990d206610e3813abc0bd7"
+  "gitHead": "4911fa867a3c7e72f0c78dcea8748893c3070c17"
 }