carbon-react 118.6.0 → 119.0.1

package/esm/__internal__/form-field/form-field.component.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { MarginProps } from "styled-system";
 import { ValidationProps } from "../validations";
+import { LabelProps } from "../label";
 import { TagProps } from "../utils/helpers/tags/tags";
 import { IconType } from "../../components/icon";
 interface CommonFormFieldProps extends MarginProps, ValidationProps {
@@ -28,6 +29,7 @@ interface CommonFormFieldProps extends MarginProps, ValidationProps {
     labelSpacing?: 1 | 2;
     /** Label width */
     labelWidth?: number;
+    labelAs?: LabelProps["as"];
     /** If true the label switches position with the input */
     reverse?: boolean;
     /** Id of the validation icon */
@@ -57,7 +59,7 @@ export interface FormFieldProps extends CommonFormFieldProps, TagProps {
     useValidationIcon?: boolean;
 }
 declare const FormField: {
-    ({ children, "data-component": dataComponent, disabled, fieldHelp: fieldHelpContent, fieldHelpInline, error, warning, info, tooltipId, fieldHelpId, label, labelId, labelAlign, labelHelp, labelHelpIcon, labelInline, labelSpacing, labelWidth, id, reverse, isOptional, useValidationIcon, adaptiveLabelBreakpoint, isRequired, validationIconId, validationRedesignOptIn, ...rest }: FormFieldProps): React.JSX.Element;
+    ({ children, "data-component": dataComponent, disabled, fieldHelp: fieldHelpContent, fieldHelpInline, error, warning, info, tooltipId, fieldHelpId, label, labelId, labelAlign, labelHelp, labelHelpIcon, labelInline, labelSpacing, labelWidth, labelAs, id, reverse, isOptional, useValidationIcon, adaptiveLabelBreakpoint, isRequired, validationIconId, validationRedesignOptIn, ...rest }: FormFieldProps): React.JSX.Element;
     displayName: string;
 };
 export default FormField;

package/esm/__internal__/form-field/form-field.component.js

@@ -29,6 +29,7 @@ const FormField = _ref => {
     labelInline,
     labelSpacing = 2,
     labelWidth,
+    labelAs,
     id,
     reverse,
     isOptional,
@@ -104,7 +105,8 @@ const FormField = _ref => {
     pr: !reverse ? labelSpacing : undefined,
     pl: reverse ? labelSpacing : undefined,
     isRequired: isRequired,
-    validationIconId: validationIconId
+    validationIconId: validationIconId,
+    as: labelAs
   }, label), fieldHelpInline && fieldHelp, !reverse && children), !fieldHelpInline && fieldHelp);
 };
 FormField.displayName = "FormField";

package/esm/__internal__/label/label.component.d.ts

@@ -3,6 +3,7 @@ import { StyledLabelProps, StyledLabelContainerProps } from "./label.style";
 import { ValidationProps } from "../validations";
 import { IconType } from "../../components/icon";
 export interface LabelProps extends ValidationProps, StyledLabelProps, StyledLabelContainerProps {
+    as?: "span" | "label";
     /** Children elements */
     children?: React.ReactNode;
     /** A message that the Help component will display */
@@ -20,6 +21,6 @@ export interface LabelProps extends ValidationProps, StyledLabelProps, StyledLab
     /** Id of the validation icon */
     validationIconId?: string;
 }
-export declare const Label: ({ align, children, disabled, error, help, helpIcon, htmlFor, info, inline, isRequired, labelId, optional, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, }: LabelProps) => React.JSX.Element;
-declare const _default: React.MemoExoticComponent<({ align, children, disabled, error, help, helpIcon, htmlFor, info, inline, isRequired, labelId, optional, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, }: LabelProps) => React.JSX.Element>;
+export declare const Label: ({ align, as, children, disabled, error, help, helpIcon, htmlFor, info, inline, isRequired, labelId, optional, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, }: LabelProps) => React.JSX.Element;
+declare const _default: React.MemoExoticComponent<({ align, as, children, disabled, error, help, helpIcon, htmlFor, info, inline, isRequired, labelId, optional, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, }: LabelProps) => React.JSX.Element>;
 export default _default;

package/esm/__internal__/label/label.component.js

@@ -1,3 +1,4 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React, { useState, useContext } from "react";
 import PropTypes from "prop-types";
 import Help from "../../components/help";
@@ -27,6 +28,7 @@ const tooltipPosition = _ref2 => {
 export const Label = _ref3 => {
   let {
     align = "right",
+    as = "label",
     children,
     disabled,
     error,
@@ -102,14 +104,17 @@ export const Label = _ref3 => {
     optional: optional,
     pr: pr,
     pl: pl
-  }, /*#__PURE__*/React.createElement(StyledLabel, {
+  }, /*#__PURE__*/React.createElement(StyledLabel, _extends({
     "data-element": "label",
     disabled: disabled,
-    id: labelId,
-    htmlFor: htmlFor,
+    id: labelId
+  }, as === "label" ? {
+    htmlFor
+  } : {}, {
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
-    isRequired: isRequired
-  }, children), icon());
+    isRequired: isRequired,
+    as: as
+  }), children), icon());
 };
 export default /*#__PURE__*/React.memo(Label);

package/esm/components/button-toggle/button-toggle-group/button-toggle-group.component.d.ts

@@ -0,0 +1,64 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
+export interface CustomEvent {
+    target: {
+        name?: string;
+        value?: string;
+    };
+}
+export interface ButtonToggleGroupProps extends MarginProps, TagProps {
+    /** Unique id for the root element of the component */
+    id: string;
+    /** Specifies the name prop to be applied to each button in the group */
+    name?: string;
+    /** Togglable buttons to be rendered. Only accepts children of type ButtonToggle */
+    children?: React.ReactNode;
+    /** aria-label for the group wrapper. Required for accessibility when no text label is provided */
+    "aria-label"?: string;
+    /** Text for the visible label of the button group. */
+    label?: string;
+    /** Text for the label's help tooltip. */
+    labelHelp?: React.ReactNode;
+    /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
+    labelSpacing?: 1 | 2;
+    /** The percentage width of the ButtonToggleGroup. */
+    inputWidth?: number | string;
+    /** The text for the field help. */
+    fieldHelp?: string;
+    /** Sets the field help to inline. */
+    fieldHelpInline?: boolean;
+    /** Sets the label to be inline. */
+    labelInline?: boolean;
+    /** The percentage width of the label. */
+    labelWidth?: number;
+    /** If true all ButtonToggle children will flex to the full width of the ButtonToggleGroup parent */
+    fullWidth?: boolean;
+    /** The alignment for the text in the label. */
+    labelAlign?: "left" | "right";
+    /** Callback triggered by pressing one of the child buttons. Use with controlled components to set the value prop to the value argument */
+    onChange?: (ev: React.MouseEvent<HTMLButtonElement>, value?: string, name?: string) => void;
+    /** Determines which child button is selected when the component is used as a controlled component */
+    value?: string;
+    /** Aria label for rendered help component */
+    helpAriaLabel?: string;
+    /** set this to true to allow the buttons within the group to be deselected when already selected, leaving no selected button */
+    allowDeselect?: boolean;
+}
+declare type ButtonToggleGroupContextType = {
+    onButtonClick: (value: string) => void;
+    handleKeyDown: (ev: React.KeyboardEvent<HTMLButtonElement>) => void;
+    pressedButtonValue?: string;
+    onChange?: (ev: React.MouseEvent<HTMLButtonElement>, value?: string, name?: string) => void;
+    name?: string;
+    allowDeselect?: boolean;
+    isInGroup: boolean;
+    firstButton?: HTMLButtonElement;
+    childButtonCallbackRef?: (button: HTMLButtonElement | null) => void;
+};
+export declare const ButtonToggleGroupContext: React.Context<ButtonToggleGroupContextType>;
+declare const ButtonToggleGroup: {
+    ({ children, fieldHelp, fieldHelpInline, "aria-label": ariaLabel, label, labelHelp, labelSpacing, inputWidth, fullWidth, labelInline, labelWidth, labelAlign, name, onChange, value, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, id, allowDeselect, ...props }: ButtonToggleGroupProps): React.JSX.Element;
+    displayName: string;
+};
+export default ButtonToggleGroup;

package/esm/components/button-toggle/button-toggle-group/button-toggle-group.component.js

@@ -0,0 +1,157 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React, { createContext, useMemo, useState, useRef } from "react";
+import PropTypes from "prop-types";
+import invariant from "invariant";
+import FormField from "../../../__internal__/form-field";
+import guid from "../../../__internal__/utils/helpers/guid";
+import StyledButtonToggleGroup, { StyledButtonToggleGroupWrapper } from "./button-toggle-group.style";
+import { ButtonToggle } from "..";
+import { filterStyledSystemMarginProps } from "../../../style/utils";
+import { TooltipProvider } from "../../../__internal__/tooltip-provider";
+import { InputGroupBehaviour } from "../../../__internal__/input-behaviour";
+import Logger from "../../../__internal__/utils/logger";
+import Events from "../../../__internal__/utils/helpers/events";
+let deprecateNameWarnTriggered = false;
+const BUTTON_TOGGLE_SELECTOR = '[data-element="button-toggle-button"]';
+export const ButtonToggleGroupContext = /*#__PURE__*/createContext({
+  onButtonClick: /* istanbul ignore next */() => {},
+  handleKeyDown: /* istanbul ignore next */() => {},
+  pressedButtonValue: undefined,
+  allowDeselect: false,
+  isInGroup: false
+});
+const ButtonToggleGroup = _ref => {
+  let {
+    children,
+    fieldHelp,
+    fieldHelpInline,
+    "aria-label": ariaLabel,
+    label,
+    labelHelp,
+    labelSpacing,
+    inputWidth,
+    fullWidth,
+    labelInline,
+    labelWidth,
+    labelAlign,
+    name,
+    onChange,
+    value,
+    "data-component": dataComponent = "button-toggle-group",
+    "data-element": dataElement,
+    "data-role": dataRole,
+    helpAriaLabel,
+    id,
+    allowDeselect,
+    ...props
+  } = _ref;
+  const hasCorrectItemStructure = useMemo(() => {
+    const incorrectChild = React.Children.toArray(children).find(child => {
+      return ! /*#__PURE__*/React.isValidElement(child) || child.type.displayName !== ButtonToggle.displayName;
+    });
+    return !incorrectChild;
+  }, [children]);
+  !hasCorrectItemStructure ? process.env.NODE_ENV !== "production" ? invariant(false, `\`ButtonToggleGroup\` only accepts children of type \`${ButtonToggle.displayName}\``) : invariant(false) : void 0;
+  const labelId = useRef(guid());
+  const wrapperRef = useRef(null);
+  const [pressedButtonValue, setPressedButtonValue] = useState();
+  if (name && !deprecateNameWarnTriggered) {
+    deprecateNameWarnTriggered = true;
+    Logger.deprecate(`The \`name\` prop in \`ButtonToggleGroup\` component is deprecated and will soon be removed. It does not provide any functionality
+      since the component can no longer be used in an uncontrolled fashion.`);
+  }
+  const onButtonClick = buttonValue => {
+    let newValue = buttonValue;
+    const currentValue = value || pressedButtonValue;
+    if (allowDeselect && currentValue === buttonValue) {
+      newValue = undefined;
+    }
+    setPressedButtonValue(newValue);
+  };
+  const getInnerButtons = () => wrapperRef.current?.querySelectorAll(BUTTON_TOGGLE_SELECTOR);
+  // needs to be state not ref, so that a rerender is triggered
+  const [firstButton, setFirstButton] = useState();
+  const handleKeyDown = ev => {
+    const innerButtons = getInnerButtons();
+    // istanbul ignore if
+    if (!innerButtons || !document.activeElement) {
+      return;
+    }
+    const focusedIndex = Array.from(innerButtons).indexOf(document.activeElement);
+    let nextElement;
+    if (Events.isLeftKey(ev)) {
+      const nextIndex = focusedIndex === 0 ? innerButtons.length - 1 : focusedIndex - 1;
+      nextElement = innerButtons[nextIndex];
+    } else if (Events.isRightKey(ev)) {
+      const nextIndex = (focusedIndex + 1) % innerButtons.length;
+      nextElement = innerButtons[nextIndex];
+    }
+    // istanbul ignore else
+    if (nextElement instanceof HTMLButtonElement) {
+      nextElement.focus();
+    }
+  };
+  const childButtonCallbackRef = button => {
+    // setTimeout needed as otherwise innerButtons aren't picked up by the query even though the ref is attached
+    setTimeout(() => {
+      // guard needed to avoid warnings about setting state on an unmounted component - the callback ref will
+      // get called with null when the component is about to be unmounted, and it has been unmounted by the time
+      // the setTimeout completes
+      if (button) {
+        const innerButtons = getInnerButtons();
+        if (!innerButtons) {
+          setFirstButton(undefined);
+        } else if (button === innerButtons[0]) {
+          setFirstButton(button);
+        }
+      }
+    }, 0);
+  };
+  return /*#__PURE__*/React.createElement(TooltipProvider, {
+    helpAriaLabel: helpAriaLabel
+  }, /*#__PURE__*/React.createElement(InputGroupBehaviour, null, /*#__PURE__*/React.createElement(FormField, _extends({
+    label: label,
+    labelHelp: labelHelp,
+    labelSpacing: labelSpacing,
+    fieldHelp: fieldHelp,
+    fieldHelpInline: fieldHelpInline,
+    labelInline: labelInline,
+    labelWidth: labelWidth,
+    labelAlign: labelAlign,
+    labelId: labelId.current,
+    "data-component": dataComponent,
+    "data-role": dataRole,
+    "data-element": dataElement,
+    id: id,
+    labelAs: "span"
+  }, filterStyledSystemMarginProps(props)), /*#__PURE__*/React.createElement(ButtonToggleGroupContext.Provider, {
+    value: {
+      onButtonClick,
+      handleKeyDown,
+      pressedButtonValue: value || pressedButtonValue,
+      onChange,
+      name,
+      allowDeselect,
+      isInGroup: true,
+      firstButton,
+      childButtonCallbackRef
+    }
+  }, /*#__PURE__*/React.createElement(StyledButtonToggleGroupWrapper, {
+    labelInline: labelInline,
+    ref: wrapperRef
+  }, /*#__PURE__*/React.createElement(StyledButtonToggleGroup, _extends({}, label ? {
+    "aria-labelledby": labelId.current
+  } : {
+    "aria-label": ariaLabel
+  }, {
+    inputWidth: inputWidth,
+    fullWidth: fullWidth,
+    role: "group",
+    "data-component": dataComponent,
+    "data-role": dataRole,
+    "data-element": dataElement,
+    id: id
+  }, filterStyledSystemMarginProps(props)), children))))));
+};
+ButtonToggleGroup.displayName = "ButtonToggleGroup";
+export default ButtonToggleGroup;

package/esm/components/button-toggle/button-toggle-group/button-toggle-group.style.d.ts

@@ -0,0 +1,6 @@
+import { ButtonToggleGroupProps } from ".";
+declare type StyledButtonToggleGroupProps = Pick<ButtonToggleGroupProps, "inputWidth" | "fullWidth">;
+declare type StyledButtonToggleGroupWrapperProps = Pick<ButtonToggleGroupProps, "labelInline">;
+export declare const StyledButtonToggleGroupWrapper: import("styled-components").StyledComponent<"div", any, StyledButtonToggleGroupWrapperProps, never>;
+declare const StyledButtonToggleGroup: import("styled-components").StyledComponent<"div", any, StyledButtonToggleGroupProps, never>;
+export default StyledButtonToggleGroup;

package/esm/components/button-toggle/button-toggle-group/button-toggle-group.style.js

@@ -0,0 +1,64 @@
+import styled, { css } from "styled-components";
+import { margin } from "styled-system";
+import { baseTheme } from "../../../style/themes";
+import { StyledButtonToggle, StyledButtonToggleWrapper } from "../button-toggle.style";
+export const StyledButtonToggleGroupWrapper = styled.div`
+  ${_ref => {
+  let {
+    labelInline
+  } = _ref;
+  return labelInline && css`
+      display: flex;
+    `;
+}}
+`;
+const StyledButtonToggleGroup = styled.div`
+  ${margin}
+
+  display: flex;
+
+  ${StyledButtonToggle}:not(:first-of-type):not(:last-of-type) {
+    border-radius: var(--borderRadius000);
+  }
+
+  ${StyledButtonToggle}:first-of-type ${StyledButtonToggle} {
+    border-top-left-radius: var(--borderRadius400);
+    border-bottom-left-radius: var(--borderRadius400);
+    border-top-right-radius: var(--borderRadius000);
+    border-bottom-right-radius: var(--borderRadius000);
+  }
+
+  ${StyledButtonToggle}:last-of-type ${StyledButtonToggle} {
+    border-top-left-radius: var(--borderRadius000);
+    border-bottom-left-radius: var(--borderRadius000);
+    border-top-right-radius: var(--borderRadius400);
+    border-bottom-right-radius: var(--borderRadius400);
+  }
+
+  ${_ref2 => {
+  let {
+    fullWidth
+  } = _ref2;
+  return fullWidth && css`
+      ${StyledButtonToggle} {
+        width: 100%;
+      }
+      ${StyledButtonToggleWrapper} {
+        flex: auto;
+      }
+    `;
+}}
+
+  ${_ref3 => {
+  let {
+    inputWidth
+  } = _ref3;
+  return inputWidth && css`
+      width: ${`${inputWidth}%`};
+    `;
+}}
+`;
+StyledButtonToggleGroup.defaultProps = {
+  theme: baseTheme
+};
+export default StyledButtonToggleGroup;

package/esm/components/button-toggle/button-toggle.component.d.ts

@@ -1,7 +1,12 @@
 import React from "react";
-import { StyledButtonToggleLabelProps } from "./button-toggle.style";
-import { ButtonToggleInputProps } from "./button-toggle-input.component";
-export interface ButtonToggleProps extends ButtonToggleInputProps, Partial<StyledButtonToggleLabelProps> {
+import { StyledButtonToggleProps } from "./button-toggle.style";
+export interface ButtonToggleProps extends Partial<StyledButtonToggleProps> {
+    /** Prop to specify the aria-label of the component */
+    "aria-label"?: string;
+    /** Prop to specify the aria-labelledby property of the component */
+    "aria-labelledby"?: string;
+    /** DEPRECATED: A synonym for pressed, to keep backwards compatibility. */
+    checked?: boolean;
     /** Text to display for the button. */
     children?: React.ReactNode;
     /** Identifier used for testing purposes, applied to the root element of the component. */
@@ -10,15 +15,23 @@ export interface ButtonToggleProps extends ButtonToggleInputProps, Partial<Style
     "data-element"?: string;
     /** Identifier used for testing purposes, applied to the root element of the component. */
     "data-role"?: string;
-    /** Set the default value of the Group if component is meant to be used as uncontrolled. */
-    defaultChecked?: boolean;
     /** Remove spacing from between buttons. */
     grouped?: boolean;
-    /** Callback triggered by click event on the input. */
-    onClick?: (ev: React.MouseEvent<HTMLInputElement>) => void;
+    /** An optional string by which to identify the button in an onChange handler on the parent ButtonToggleGroup. */
+    name?: string;
+    /** Callback triggered by blur event on the button. */
+    onBlur?: (ev: React.FocusEvent<HTMLButtonElement>) => void;
+    /** Callback triggered by focus event on the button. */
+    onFocus?: (ev: React.FocusEvent<HTMLButtonElement>) => void;
+    /** Callback triggered by click event on the button. */
+    onClick?: (ev: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Set the pressed state of the toggle button */
+    pressed?: boolean;
+    /** An optional string by which to identify the button in either an onClick handler, or an onChange handler on the parent ButtonToggleGroup. */
+    value?: string;
 }
 export declare const ButtonToggle: {
-    ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, buttonIcon, buttonIconSize, checked, children, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, disabled, grouped, name, onBlur, onChange, onFocus, size, value, }: ButtonToggleProps): React.JSX.Element;
+    ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, buttonIcon, buttonIconSize, checked, children, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, disabled, grouped, name, onBlur, onFocus, onClick, pressed, size, value, }: ButtonToggleProps): React.JSX.Element;
     displayName: string;
 };
 export default ButtonToggle;

package/esm/components/button-toggle/button-toggle.component.js

@@ -1,12 +1,15 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React, { useContext, useRef } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
-import { StyledButtonToggle, StyledButtonToggleLabel, StyledButtonToggleContentWrapper } from "./button-toggle.style";
+import { StyledButtonToggle, StyledButtonToggleWrapper } from "./button-toggle.style";
 import guid from "../../__internal__/utils/helpers/guid";
+import { ButtonToggleGroupContext } from "./button-toggle-group/button-toggle-group.component";
 import ButtonToggleIcon from "./button-toggle-icon.component";
-import ButtonToggleInput from "./button-toggle-input.component";
-import { InputGroupContext } from "../../__internal__/input-behaviour";
 import Logger from "../../__internal__/utils/logger";
+import { InputGroupContext } from "../../__internal__/input-behaviour";
+let deprecateCheckedWarnTriggered = false;
+let deprecateNameWarnTriggered = false;
 let deprecateUncontrolledWarnTriggered = false;
 export const ButtonToggle = _ref => {
   let {
@@ -23,18 +26,48 @@ export const ButtonToggle = _ref => {
     grouped,
     name,
     onBlur,
-    onChange,
     onFocus,
+    onClick,
+    pressed,
     size = "medium",
     value
   } = _ref;
   !!!(children || buttonIcon) ? process.env.NODE_ENV !== "production" ? invariant(false, "Either prop `buttonIcon` must be defined, or this node must have children") : invariant(false) : void 0;
+  if (checked !== undefined && !deprecateCheckedWarnTriggered) {
+    deprecateCheckedWarnTriggered = true;
+    Logger.deprecate("The `checked` prop in `ButtonToggle` component is deprecated and will soon be removed. Please use `pressed` instead.");
+  }
+  if (name && !deprecateNameWarnTriggered) {
+    deprecateNameWarnTriggered = true;
+    Logger.deprecate(`The \`name\` prop in \`ButtonToggle\` component is deprecated and will soon be removed. It does not provide any functionality
+      since the component can no longer be used in an uncontrolled fashion.`);
+  }
+  const pressedPropValue = pressed === undefined ? checked : pressed;
+  const buttonRef = useRef(null);
   const {
     onMouseEnter,
-    onMouseLeave
+    onMouseLeave,
+    onBlur: inputGroupOnBlur,
+    onFocus: inputGroupOnFocus
   } = useContext(InputGroupContext);
-  const inputGuid = guid();
-  const inputRef = useRef(null);
+  const {
+    onButtonClick,
+    handleKeyDown,
+    pressedButtonValue,
+    onChange,
+    name: groupName,
+    allowDeselect,
+    isInGroup,
+    firstButton,
+    childButtonCallbackRef
+  } = useContext(ButtonToggleGroupContext);
+  const callbackRef = element => {
+    buttonRef.current = element;
+    if (childButtonCallbackRef) {
+      childButtonCallbackRef(element);
+    }
+  };
+  const inputGuid = useRef(guid());
   let icon;
   if (buttonIcon) {
     icon = /*#__PURE__*/React.createElement(ButtonToggleIcon, {
@@ -44,42 +77,76 @@ export const ButtonToggle = _ref => {
       hasContent: !!children
     });
   }
-  function handleClick() {
-    inputRef.current?.focus();
+  function handleClick(ev) {
+    if (onClick) {
+      onClick(ev);
+    }
+    if (onChange) {
+      let newValue = value;
+      if (allowDeselect && pressedButtonValue === value) {
+        newValue = undefined;
+      }
+      onChange(ev, newValue, groupName || name);
+    }
+    if (value) {
+      onButtonClick(value);
+    }
   }
   if (!deprecateUncontrolledWarnTriggered && !onChange) {
     deprecateUncontrolledWarnTriggered = true;
     Logger.deprecate("Uncontrolled behaviour in `Button Toggle` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
   }
-  return /*#__PURE__*/React.createElement(StyledButtonToggle, {
+  function handleFocus(ev) {
+    if (onFocus) {
+      onFocus(ev);
+    }
+    if (inputGroupOnFocus) {
+      inputGroupOnFocus();
+    }
+  }
+  function handleBlur(ev) {
+    if (onBlur) {
+      onBlur(ev);
+    }
+    if (inputGroupOnBlur) {
+      inputGroupOnBlur();
+    }
+  }
+  const isPressed = isInGroup ? pressedButtonValue === value : pressedPropValue;
+  const isFirstButton = buttonRef.current === firstButton;
+
+  // if we're in a ButtonToggleGroup, only one button should be tabbable - the pressed button if there is one, or
+  // the first one if not
+  const tabbable = !isInGroup || isPressed || !pressedButtonValue && isFirstButton;
+  return /*#__PURE__*/React.createElement(StyledButtonToggleWrapper, {
     "data-component": dataComponent || "button-toggle",
     "data-element": dataElement,
     "data-role": dataRole,
-    grouped: grouped,
-    onClick: handleClick
-  }, /*#__PURE__*/React.createElement(ButtonToggleInput, {
+    grouped: grouped
+  }, /*#__PURE__*/React.createElement(StyledButtonToggle, _extends({
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
-    "data-element": "button-toggle-input",
-    name: name,
-    checked: checked,
-    disabled: disabled,
-    guid: inputGuid,
-    value: value,
-    onChange: onChange,
-    onFocus: onFocus,
-    onBlur: onBlur,
-    ref: inputRef
-  }), /*#__PURE__*/React.createElement(StyledButtonToggleLabel, {
+    "aria-pressed": !!isPressed,
     buttonIcon: buttonIcon,
     buttonIconSize: buttonIconSize,
+    "data-element": "button-toggle-button",
     disabled: disabled,
-    htmlFor: inputGuid,
+    id: inputGuid.current,
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
     size: size,
-    grouped: grouped
-  }, /*#__PURE__*/React.createElement(StyledButtonToggleContentWrapper, null, icon, children)));
+    grouped: grouped,
+    value: value,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown
+  }, tabbable ? {} : {
+    tabIndex: -1
+  }, {
+    allowDeselect: allowDeselect,
+    ref: callbackRef
+  }), icon, children));
 };
 ButtonToggle.displayName = "ButtonToggle";
 export default ButtonToggle;

package/esm/components/button-toggle/button-toggle.style.d.ts

@@ -1,7 +1,7 @@
 import { IconType } from "../icon";
 export declare type ButtonToggleIconSizes = "small" | "large";
 declare const StyledButtonToggleContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export interface StyledButtonToggleLabelProps {
+export interface StyledButtonToggleProps {
     /** The icon to be rendered inside of the button */
     buttonIcon?: IconType;
     /** Sets the size of the buttonIcon (eg. large) */
@@ -11,17 +11,18 @@ export interface StyledButtonToggleLabelProps {
     /** ButtonToggle size */
     size: "small" | "medium" | "large";
     grouped?: boolean;
+    /** set this to true to allow the button to be deselected when already selected */
+    allowDeselect?: boolean;
 }
-declare const StyledButtonToggleLabel: import("styled-components").StyledComponent<"label", any, StyledButtonToggleLabelProps, never>;
+declare const StyledButtonToggle: import("styled-components").StyledComponent<"button", any, StyledButtonToggleProps, never>;
 export interface StyledButtonToggleIconProps {
     /** Sets the size of the buttonIcon (eg. large) */
     buttonIconSize?: ButtonToggleIconSizes;
     hasContent?: boolean;
 }
 declare const StyledButtonToggleIcon: import("styled-components").StyledComponent<"div", any, StyledButtonToggleIconProps, never>;
-export interface StyledButtonToggleProps {
+export interface StyledButtonToggleWrapperProps {
     grouped?: boolean;
 }
-declare const StyledButtonToggle: import("styled-components").StyledComponent<"div", any, StyledButtonToggleProps, never>;
-declare const StyledButtonToggleInput: import("styled-components").StyledComponent<"input", any, {}, never>;
-export { StyledButtonToggle, StyledButtonToggleLabel, StyledButtonToggleIcon, StyledButtonToggleInput, StyledButtonToggleContentWrapper, };
+declare const StyledButtonToggleWrapper: import("styled-components").StyledComponent<"div", any, StyledButtonToggleWrapperProps, never>;
+export { StyledButtonToggle, StyledButtonToggleWrapper, StyledButtonToggleIcon, StyledButtonToggleContentWrapper, };