carbon-react 118.6.0 → 119.0.0

package/lib/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/lib/components/button-toggle/button-toggle.component.js

@@ -9,13 +9,16 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _invariant = _interopRequireDefault(require("invariant"));
 var _buttonToggle = require("./button-toggle.style");
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
+var _buttonToggleGroup = require("./button-toggle-group/button-toggle-group.component");
 var _buttonToggleIcon = _interopRequireDefault(require("./button-toggle-icon.component"));
-var _buttonToggleInput = _interopRequireDefault(require("./button-toggle-input.component"));
-var _inputBehaviour = require("../../__internal__/input-behaviour");
 var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
+var _inputBehaviour = require("../../__internal__/input-behaviour");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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); }
+let deprecateCheckedWarnTriggered = false;
+let deprecateNameWarnTriggered = false;
 let deprecateUncontrolledWarnTriggered = false;
 const ButtonToggle = _ref => {
   let {
@@ -32,18 +35,48 @@ const ButtonToggle = _ref => {
     grouped,
     name,
     onBlur,
-    onChange,
     onFocus,
+    onClick,
+    pressed,
     size = "medium",
     value
   } = _ref;
   !!!(children || buttonIcon) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "Either prop `buttonIcon` must be defined, or this node must have children") : (0, _invariant.default)(false) : void 0;
+  if (checked !== undefined && !deprecateCheckedWarnTriggered) {
+    deprecateCheckedWarnTriggered = true;
+    _logger.default.deprecate("The `checked` prop in `ButtonToggle` component is deprecated and will soon be removed. Please use `pressed` instead.");
+  }
+  if (name && !deprecateNameWarnTriggered) {
+    deprecateNameWarnTriggered = true;
+    _logger.default.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 = (0, _react.useRef)(null);
   const {
     onMouseEnter,
-    onMouseLeave
+    onMouseLeave,
+    onBlur: inputGroupOnBlur,
+    onFocus: inputGroupOnFocus
   } = (0, _react.useContext)(_inputBehaviour.InputGroupContext);
-  const inputGuid = (0, _guid.default)();
-  const inputRef = (0, _react.useRef)(null);
+  const {
+    onButtonClick,
+    handleKeyDown,
+    pressedButtonValue,
+    onChange,
+    name: groupName,
+    allowDeselect,
+    isInGroup,
+    firstButton,
+    childButtonCallbackRef
+  } = (0, _react.useContext)(_buttonToggleGroup.ButtonToggleGroupContext);
+  const callbackRef = element => {
+    buttonRef.current = element;
+    if (childButtonCallbackRef) {
+      childButtonCallbackRef(element);
+    }
+  };
+  const inputGuid = (0, _react.useRef)((0, _guid.default)());
   let icon;
   if (buttonIcon) {
     icon = /*#__PURE__*/_react.default.createElement(_buttonToggleIcon.default, {
@@ -53,42 +86,76 @@ 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.default.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.default.createElement(_buttonToggle.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.default.createElement(_buttonToggle.StyledButtonToggleWrapper, {
     "data-component": dataComponent || "button-toggle",
     "data-element": dataElement,
     "data-role": dataRole,
-    grouped: grouped,
-    onClick: handleClick
-  }, /*#__PURE__*/_react.default.createElement(_buttonToggleInput.default, {
+    grouped: grouped
+  }, /*#__PURE__*/_react.default.createElement(_buttonToggle.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.default.createElement(_buttonToggle.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.default.createElement(_buttonToggle.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));
 };
 exports.ButtonToggle = ButtonToggle;
 ButtonToggle.displayName = "ButtonToggle";

package/lib/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, };

package/lib/components/button-toggle/button-toggle.style.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledButtonToggleLabel = exports.StyledButtonToggleInput = exports.StyledButtonToggleIcon = exports.StyledButtonToggleContentWrapper = exports.StyledButtonToggle = void 0;
+exports.StyledButtonToggleWrapper = exports.StyledButtonToggleIcon = exports.StyledButtonToggleContentWrapper = exports.StyledButtonToggle = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _icon = _interopRequireDefault(require("../icon/icon.style"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -43,8 +43,10 @@ const StyledButtonToggleContentWrapper = _styledComponents.default.div`
   flex-flow: wrap;
 `;
 exports.StyledButtonToggleContentWrapper = StyledButtonToggleContentWrapper;
-const StyledButtonToggleLabel = _styledComponents.default.label`
-  display: inline-block;
+const StyledButtonToggle = _styledComponents.default.button`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
   position: relative;
   box-sizing: border-box;
   max-width: 100%;
@@ -60,22 +62,32 @@ const StyledButtonToggleLabel = _styledComponents.default.label`
   `;
 }}
   font-weight: 700;
+  background-color: transparent;
   cursor: pointer;
+  text-align: start;
+  color: inherit;
+
   border: 1px solid var(--colorsActionMinor500);
-  ${_icon.default} {
-    color: var(--colorsActionMinor500);
+
+  :focus {
+    outline: 3px solid var(--colorsSemanticFocus500);
+    z-index: 100;
   }
-  input:checked ~ && {
+
+  &[aria-pressed="true"] {
     background-color: var(--colorsActionMinor300);
     color: var(--colorsActionMinor600);
-    cursor: auto;
-  }
-  input:focus ~ & {
-    outline: 3px solid var(--colorsSemanticFocus500);
-    z-index: 100;
+    ${_ref2 => {
+  let {
+    allowDeselect
+  } = _ref2;
+  return !allowDeselect && (0, _styledComponents.css)`
+        cursor: auto;
+      `;
+}}
   }
 
-  input:not(:checked):not(:disabled) ~ &:hover {
+  :not([aria-pressed="true"]):not(:disabled):hover {
     background-color: var(--colorsActionMinor200);
     border-color: var(--colorsActionMinor500);
     color: var(--colorsActionMinor500);
@@ -83,24 +95,27 @@ const StyledButtonToggleLabel = _styledComponents.default.label`
       color: var(--colorsActionMinor500);
     }
   }
-  ${_ref2 => {
+
+  ${_icon.default} {
+    color: var(--colorsActionMinor500);
+  }
+
+  ${_ref3 => {
   let {
     buttonIcon,
     buttonIconSize,
     size
-  } = _ref2;
+  } = _ref3;
   return buttonIcon && buttonIconSize === "large" && (0, _styledComponents.css)`
       height: ${heightLargeIconConfig[size]}px;
       padding: 0 ${paddingLargeIconConfig[size]}px;
-      ${StyledButtonToggleContentWrapper} {
-        flex-direction: column;
-      }
+      flex-direction: column;
     `;
 }}
-  ${_ref3 => {
+  ${_ref4 => {
   let {
     disabled
-  } = _ref3;
+  } = _ref4;
   return disabled && (0, _styledComponents.css)`
       & {
         border-color: var(--colorsActionDisabled500);
@@ -113,22 +128,22 @@ const StyledButtonToggleLabel = _styledComponents.default.label`
     `;
 }};
 `;
-exports.StyledButtonToggleLabel = StyledButtonToggleLabel;
+exports.StyledButtonToggle = StyledButtonToggle;
 const iconFontSizes = {
   smallIcon: 16,
   largeIcon: 32
 };
 const StyledButtonToggleIcon = _styledComponents.default.div`
-  ${_ref4 => {
+  ${_ref5 => {
   let {
     hasContent
-  } = _ref4;
+  } = _ref5;
   return hasContent && `margin-right: 8px;`;
 }}
-  ${_ref5 => {
+  ${_ref6 => {
   let {
     buttonIconSize
-  } = _ref5;
+  } = _ref6;
   return buttonIconSize === "large" && (0, _styledComponents.css)`
       margin-right: 0;
       ${_icon.default} {
@@ -148,18 +163,18 @@ const StyledButtonToggleIcon = _styledComponents.default.div`
 }}
 `;
 exports.StyledButtonToggleIcon = StyledButtonToggleIcon;
-const StyledButtonToggle = _styledComponents.default.div`
+const StyledButtonToggleWrapper = _styledComponents.default.div`
   display: inline-block;
   vertical-align: middle;
 
-  ${_ref6 => {
+  ${_ref7 => {
   let {
     grouped
-  } = _ref6;
+  } = _ref7;
   return (0, _styledComponents.css)`
       ${!grouped && (0, _styledComponents.css)`
         &&&& {
-          ${StyledButtonToggleLabel} {
+          ${StyledButtonToggle} {
             border-radius: var(--borderRadius400);
           }
         }
@@ -168,14 +183,14 @@ const StyledButtonToggle = _styledComponents.default.div`
       ${grouped && (0, _styledComponents.css)`
         &&&& {
           :first-of-type {
-            ${StyledButtonToggleLabel} {
+            ${StyledButtonToggle} {
               border-top-left-radius: var(--borderRadius400);
               border-bottom-left-radius: var(--borderRadius400);
             }
           }
 
           :last-of-type {
-            ${StyledButtonToggleLabel} {
+            ${StyledButtonToggle} {
               border-top-right-radius: var(--borderRadius400);
               border-bottom-right-radius: var(--borderRadius400);
             }
@@ -189,10 +204,10 @@ const StyledButtonToggle = _styledComponents.default.div`
     margin-left: 8px;
   }
 
-  ${_ref7 => {
+  ${_ref8 => {
   let {
     grouped
-  } = _ref7;
+  } = _ref8;
   return grouped && (0, _styledComponents.css)`
       &:not(:first-of-type) {
         margin-left: -1px;
@@ -200,11 +215,4 @@ const StyledButtonToggle = _styledComponents.default.div`
     `;
 }};
 `;
-exports.StyledButtonToggle = StyledButtonToggle;
-const StyledButtonToggleInput = _styledComponents.default.input`
-  position: absolute;
-  width: 0;
-  height: 0;
-  opacity: 0;
-`;
-exports.StyledButtonToggleInput = StyledButtonToggleInput;
+exports.StyledButtonToggleWrapper = StyledButtonToggleWrapper;

package/lib/components/button-toggle/index.d.ts

@@ -1,2 +1,4 @@
-export { default } from "./button-toggle.component";
+export { default as ButtonToggle } from "./button-toggle.component";
 export type { ButtonToggleProps } from "./button-toggle.component";
+export { default as ButtonToggleGroup } from "./button-toggle-group";
+export type { ButtonToggleGroupProps } from "./button-toggle-group";

package/lib/components/button-toggle/index.js

@@ -3,11 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "default", {
+Object.defineProperty(exports, "ButtonToggle", {
   enumerable: true,
   get: function () {
     return _buttonToggle.default;
   }
 });
+Object.defineProperty(exports, "ButtonToggleGroup", {
+  enumerable: true,
+  get: function () {
+    return _buttonToggleGroup.default;
+  }
+});
 var _buttonToggle = _interopRequireDefault(require("./button-toggle.component"));
+var _buttonToggleGroup = _interopRequireDefault(require("./button-toggle-group"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "118.6.0",
+  "version": "119.0.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",

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

@@ -1,25 +0,0 @@
-import React from "react";
-export interface ButtonToggleInputProps {
-    /** 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;
-    /** Set the checked value of the radio button */
-    checked?: boolean;
-    /** Disable all user interaction. */
-    disabled?: boolean;
-    /** Unique ID attribute for input */
-    guid?: string;
-    /** Name used on the hidden radio button. */
-    name?: string;
-    /** Callback triggered by blur event on the input. */
-    onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
-    /** Callback triggered by change event on the input. */
-    onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
-    /** Callback triggered by focus event on the input. */
-    onFocus?: (ev: React.FocusEvent<HTMLInputElement>) => void;
-    /** Value for the input */
-    value?: string;
-}
-declare const ButtonToggleInput: React.ForwardRefExoticComponent<ButtonToggleInputProps & React.RefAttributes<HTMLInputElement>>;
-export default ButtonToggleInput;

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

@@ -1,44 +0,0 @@
-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 } from "react";
-import PropTypes from "prop-types";
-import { StyledButtonToggleInput } from "./button-toggle.style";
-import { InputGroupContext } from "../../__internal__/input-behaviour";
-const ButtonToggleInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
-  const {
-    onFocus,
-    onBlur
-  } = useContext(InputGroupContext);
-  const handleBlur = ev => {
-    if (props.onBlur) {
-      props.onBlur(ev);
-    }
-    if (onBlur) onBlur();
-  };
-  const handleFocus = ev => {
-    if (props.onFocus) {
-      props.onFocus(ev);
-    }
-    if (onFocus) onFocus();
-  };
-  return /*#__PURE__*/React.createElement(StyledButtonToggleInput, _extends({}, props, {
-    type: "radio",
-    id: props.guid,
-    onBlur: handleBlur,
-    onFocus: handleFocus,
-    ref: forwardRef
-  }));
-});
-ButtonToggleInput.propTypes = {
-  "aria-label": PropTypes.string,
-  "aria-labelledby": PropTypes.string,
-  "checked": PropTypes.bool,
-  "disabled": PropTypes.bool,
-  "guid": PropTypes.string,
-  "name": PropTypes.string,
-  "onBlur": PropTypes.func,
-  "onChange": PropTypes.func,
-  "onFocus": PropTypes.func,
-  "value": PropTypes.string
-};
-ButtonToggleInput.displayName = "ButtonToggleInput";
-export default ButtonToggleInput;

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

@@ -1,47 +0,0 @@
-import React from "react";
-import { MarginProps } from "styled-system";
-import { ValidationProps } from "../../__internal__/validations";
-import { TagProps } from "../../__internal__/utils/helpers/tags";
-export interface ButtonToggleGroupProps extends ValidationProps, 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;
-    /** When true, validation icon will be placed on label instead of being placed on the input */
-    validationOnLabel?: boolean;
-    /** Text for the label. */
-    label?: string;
-    /** Text for the labels 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 blur event on the input. */
-    onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
-    /** Callback triggered by change event on the input. */
-    onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
-    /** The value of the Button Toggle Group */
-    value?: string;
-    /** Aria label for rendered help component */
-    helpAriaLabel?: string;
-}
-declare const ButtonToggleGroup: {
-    ({ children, name, error, warning, info, validationOnLabel, label, labelHelp, labelSpacing, inputWidth, fullWidth, fieldHelp, fieldHelpInline, labelInline, labelWidth, labelAlign, onChange, onBlur, value, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, id, ...props }: ButtonToggleGroupProps): React.JSX.Element;
-    displayName: string;
-};
-export default ButtonToggleGroup;