@carbon/react 1.25.0 → 1.26.0

package/lib/components/DataTable/TableExpandedRow.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import PropTypes from 'prop-types';
+import { ReactAttr } from '../../types/common';
+interface TableExpandedRowProps extends ReactAttr<HTMLTableRowElement> {
+    /**
+     * The width of the expanded row's internal cell
+     */
+    colSpan: number;
+}
+declare const TableExpandedRow: {
+    ({ className: customClassName, children, colSpan, ...rest }: TableExpandedRowProps): JSX.Element;
+    propTypes: {
+        /**
+         * Pass in the contents for your TableExpandedRow
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify an optional className to be applied to the container node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * The width of the expanded row's internal cell
+         */
+        colSpan: PropTypes.Validator<number>;
+    };
+};
+export default TableExpandedRow;

package/lib/components/DataTable/TableHead.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { ThHTMLAttributes } from 'react';
+export type TableHeadProps = ThHTMLAttributes<HTMLTableSectionElement>;
+declare const TableHead: React.FC<TableHeadProps>;
+export default TableHead;

package/lib/components/DataTable/TableHeader.d.ts

@@ -0,0 +1,64 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { MouseEventHandler } from 'react';
+import { ReactAttr } from '../../types/common';
+interface TableHeaderProps extends ReactAttr<HTMLTableCellElement & HTMLButtonElement> {
+    /**
+     * Pass in children that will be embedded in the table header label
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify an optional className to be applied to the container node
+     */
+    className?: string;
+    /**
+     * Specify `colSpan` as a non-negative integer value to indicate how
+     * many columns the TableHeader cell extends in a table
+     */
+    colSpan?: number;
+    /**
+     * Supply an id to the th element.
+     */
+    id?: string;
+    /**
+     * Specify whether this header is the header by which a table is being sorted
+     * by
+     */
+    isSortHeader?: boolean;
+    /**
+     * Specify whether this header is one through which a user can sort the table
+     */
+    isSortable?: boolean;
+    /**
+     * Hook that is invoked when the header is clicked
+     */
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Specify the scope of this table header. You can find more info about this
+     * attribute at the following URL:
+     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#attr-scope
+     */
+    scope: string;
+    /**
+     * Specify which direction we are currently sorting by, should be one of DESC,
+     * NONE, or ASC.
+     */
+    sortDirection?: string;
+    /**
+     * Supply a method to translate internal strings with your i18n tool of
+     * choice. Translation keys are available on the `translationKeys` field for
+     * this component.
+     */
+    translateWithId?: (key: string, { header, sortDirection, isSortHeader, sortStates }: {
+        header: any;
+        sortDirection: any;
+        isSortHeader: any;
+        sortStates: any;
+    }) => string;
+}
+declare const TableHeader: React.ForwardRefExoticComponent<TableHeaderProps & React.RefAttributes<HTMLTableCellElement>>;
+export default TableHeader;

package/lib/components/DataTable/TableHeader.js

@@ -32,48 +32,43 @@ var translationKeys = {
   buttonDescription: 'carbon.table.header.icon.description'
 };
 
-var translateWithId = function translateWithId(key, _ref) {
-  var header = _ref.header,
-      sortDirection = _ref.sortDirection,
-      isSortHeader = _ref.isSortHeader,
-      sortStates = _ref.sortStates;
-
-  if (key === translationKeys.buttonDescription) {
-    if (isSortHeader) {
+var translateWithId = function translateWithId(key, args) {
+  if (args && key === translationKeys.buttonDescription) {
+    if (args.isSortHeader && sortStates.sortStates) {
       // When transitioning, we know that the sequence of states is as follows:
       // NONE -> ASC -> DESC -> NONE
-      if (sortDirection === sortStates.NONE) {
-        return "Click to sort rows by ".concat(header, " header in ascending order");
+      if (args.sortDirection === sortStates.sortStates.NONE) {
+        return "Click to sort rows by ".concat(args.header, " header in ascending order");
       }
 
-      if (sortDirection === sortStates.ASC) {
-        return "Click to sort rows by ".concat(header, " header in descending order");
+      if (args.sortDirection === sortStates.sortStates.ASC) {
+        return "Click to sort rows by ".concat(args.header, " header in descending order");
       }
 
-      return "Click to unsort rows by ".concat(header, " header");
+      return "Click to unsort rows by ".concat(args.header, " header");
     }
 
-    return "Click to sort rows by ".concat(header, " header in ascending order");
+    return "Click to sort rows by ".concat(args.header, " header in ascending order");
   }
 
   return '';
 };
 
 var sortDirections = (_sortDirections = {}, _rollupPluginBabelHelpers.defineProperty(_sortDirections, sortStates.sortStates.NONE, 'none'), _rollupPluginBabelHelpers.defineProperty(_sortDirections, sortStates.sortStates.ASC, 'ascending'), _rollupPluginBabelHelpers.defineProperty(_sortDirections, sortStates.sortStates.DESC, 'descending'), _sortDirections);
-var TableHeader = /*#__PURE__*/React__default["default"].forwardRef(function TableHeader(_ref2, ref) {
+var TableHeader = /*#__PURE__*/React__default["default"].forwardRef(function TableHeader(_ref, ref) {
   var _cx;
 
-  var headerClassName = _ref2.className,
-      children = _ref2.children,
-      colSpan = _ref2.colSpan,
-      isSortable = _ref2.isSortable,
-      isSortHeader = _ref2.isSortHeader,
-      onClick = _ref2.onClick,
-      scope = _ref2.scope,
-      sortDirection = _ref2.sortDirection,
-      t = _ref2.translateWithId,
-      id = _ref2.id,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded);
+  var headerClassName = _ref.className,
+      children = _ref.children,
+      colSpan = _ref.colSpan,
+      isSortable = _ref.isSortable,
+      isSortHeader = _ref.isSortHeader,
+      onClick = _ref.onClick,
+      scope = _ref.scope,
+      sortDirection = _ref.sortDirection,
+      t = _ref.translateWithId,
+      id = _ref.id,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix.usePrefix();
   var uniqueId = useId.useId('table-sort');
@@ -91,8 +86,8 @@ var TableHeader = /*#__PURE__*/React__default["default"].forwardRef(function Tab
   }
 
   var className = cx__default["default"](headerClassName, (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--table-sort"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--table-sort--active"), isSortHeader && sortDirection !== sortStates.sortStates.NONE), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--table-sort--descending"), isSortHeader && sortDirection === sortStates.sortStates.DESC), _cx));
-  var ariaSort = !isSortHeader ? 'none' : sortDirections[sortDirection];
-  var sortDescription = t('carbon.table.header.icon.description', {
+  var ariaSort = !isSortHeader || !sortDirection ? 'none' : sortDirections[sortDirection];
+  var sortDescription = t && t('carbon.table.header.icon.description', {
     header: children,
     sortDirection: sortDirection,
     isSortHeader: isSortHeader,

package/lib/components/DataTable/TableRow.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import PropTypes from 'prop-types';
+import { ReactAttr } from '../../types/common';
+export interface TableRowProps extends ReactAttr<HTMLTableRowElement> {
+    /**
+     * Specify an optional className to be applied to the container node
+     */
+    className?: string;
+    /**
+     * Specify if the row is selected
+     */
+    isSelected?: boolean;
+}
+declare const TableRow: {
+    (props: TableRowProps): JSX.Element;
+    propTypes: {
+        /**
+         * Specify an optional className to be applied to the container node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify if the row is selected
+         */
+        isSelected: PropTypes.Requireable<boolean>;
+    };
+};
+export default TableRow;

package/lib/components/DataTable/TableSelectAll.js

@@ -35,7 +35,7 @@ var TableSelectAll = function TableSelectAll(_ref) {
     scope: "col",
     className: cx__default["default"]("".concat(prefix, "--table-column-checkbox"), className)
   }, /*#__PURE__*/React__default["default"].createElement(InlineCheckbox["default"], {
-    ariaLabel: ariaLabel,
+    "aria-label": ariaLabel,
     checked: checked,
     id: id,
     indeterminate: indeterminate,

package/lib/components/DataTable/TableSelectRow.js

@@ -49,9 +49,7 @@ var TableSelectRow = function TableSelectRow(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(InlineInputComponent, _rollupPluginBabelHelpers["extends"]({}, selectionInputProps, radio && {
     labelText: ariaLabel,
     hideLabel: true
-  }, !radio && {
-    ariaLabel: ariaLabel
-  })));
+  }, !radio && _rollupPluginBabelHelpers.defineProperty({}, 'aria-label', ariaLabel))));
 };
 
 TableSelectRow.propTypes = {

package/lib/components/DataTable/TableToolbarContent.d.ts

@@ -7,13 +7,11 @@
 declare const TableToolbarContent: {
     ({ className: baseClassName, ...other }: {
         [x: string]: any;
-        className: any;
-    }): import("react").CElement<{
+        className?: string | undefined;
+    }): import("react").ReactElement<{
         className: string | undefined;
-    }, import("react").Component<{
-        className: string | undefined;
-    }, any, any>>;
-    displayName: any;
+    }, string | import("react").JSXElementConstructor<any>>;
+    displayName: string;
     propTypes: {
         className: import("prop-types").Requireable<string>;
     };

package/lib/components/DataTable/TableToolbarSearch.js

@@ -14,6 +14,7 @@ var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
 var Search = require('../Search/Search.js');
+require('../Search/Search.Skeleton.js');
 var instanceId = require('./tools/instanceId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 

package/lib/components/ExpandableSearch/ExpandableSearch.js

@@ -13,6 +13,7 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var React = require('react');
 var cx = require('classnames');
 var Search = require('../Search/Search.js');
+require('../Search/Search.Skeleton.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var events = require('../../tools/events.js');
 

package/lib/components/FileUploader/FileUploaderButton.js

@@ -99,11 +99,13 @@ function FileUploaderButton(_ref) {
 
   function onClick(event) {
     event.target.value = null;
+    inputNode.current.value = '';
     inputNode.current.click();
   }
 
   function onKeyDown(event) {
     if (match.matches(event, [keys.Enter, keys.Space])) {
+      inputNode.current.value = '';
       inputNode.current.click();
     }
   }

package/lib/components/InlineCheckbox/InlineCheckbox.js

@@ -9,8 +9,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var PropTypes = require('prop-types');
 var React = require('react');
+var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var useMergedRefs = require('../../internal/useMergedRefs.js');
 
@@ -19,10 +21,12 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+var _InlineCheckbox$propT;
 /** @type any */
 
 var InlineCheckbox = /*#__PURE__*/React__default["default"].forwardRef(function InlineCheckbox(props, forwardRef) {
-  var ariaLabel = props.ariaLabel,
+  var ariaLabel = props['aria-label'],
+      deprecatedAriaLabel = props.ariaLabel,
       _props$checked = props.checked,
       checked = _props$checked === void 0 ? false : _props$checked,
       disabled = props.disabled,
@@ -69,64 +73,14 @@ var InlineCheckbox = /*#__PURE__*/React__default["default"].forwardRef(function
   React__default["default"].createElement("label", {
     htmlFor: id,
     className: "".concat(prefix, "--checkbox-label"),
-    "aria-label": ariaLabel,
+    "aria-label": deprecatedAriaLabel || ariaLabel,
     title: title,
     onClick: function onClick(evt) {
       evt.stopPropagation();
     }
   }));
 });
-InlineCheckbox.propTypes = {
-  /**
-   * Specify the label for the control
-   */
-  ariaLabel: PropTypes__default["default"].string.isRequired,
-
-  /**
-   * Specify whether the underlying control is checked, or not
-   */
-  checked: PropTypes__default["default"].bool,
-
-  /**
-   * Specify whether the underlying input control should be disabled
-   */
-  disabled: PropTypes__default["default"].bool,
-
-  /**
-   * Provide an `id` for the underlying input control
-   */
-  id: PropTypes__default["default"].string.isRequired,
-
-  /**
-   * Specify whether the control is in an indterminate state
-   */
-  indeterminate: PropTypes__default["default"].bool,
-
-  /**
-   * Provide a `name` for the underlying input control
-   */
-  name: PropTypes__default["default"].string.isRequired,
-
-  /**
-   * Provide an optional hook that is called each time the input is updated
-   */
-  onChange: PropTypes__default["default"].func,
-
-  /**
-   * Provide a handler that is invoked when a user clicks on the control
-   */
-  onClick: PropTypes__default["default"].func,
-
-  /**
-   * Provide a handler that is invoked on the key down event for the control
-   */
-  onKeyDown: PropTypes__default["default"].func,
-
-  /**
-   * Provide an optional tooltip for the InlineCheckbox
-   */
-  title: PropTypes__default["default"].string
-};
+InlineCheckbox.propTypes = (_InlineCheckbox$propT = {}, _rollupPluginBabelHelpers.defineProperty(_InlineCheckbox$propT, 'aria-label', PropTypes__default["default"].string.isRequired), _rollupPluginBabelHelpers.defineProperty(_InlineCheckbox$propT, "ariaLabel", deprecate["default"](PropTypes__default["default"].string.isRequired, 'The `ariaLabel` prop has been deprecated in favor of `aria-label`. This prop will be removed in the next major release.')), _rollupPluginBabelHelpers.defineProperty(_InlineCheckbox$propT, "checked", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_InlineCheckbox$propT, "disabled", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_InlineCheckbox$propT, "id", PropTypes__default["default"].string.isRequired), _rollupPluginBabelHelpers.defineProperty(_InlineCheckbox$propT, "indeterminate", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_InlineCheckbox$propT, "name", PropTypes__default["default"].string.isRequired), _rollupPluginBabelHelpers.defineProperty(_InlineCheckbox$propT, "onChange", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_InlineCheckbox$propT, "onClick", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_InlineCheckbox$propT, "onKeyDown", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_InlineCheckbox$propT, "title", PropTypes__default["default"].string), _InlineCheckbox$propT);
 var InlineCheckbox$1 = InlineCheckbox;
 
 exports["default"] = InlineCheckbox$1;

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -104,7 +104,7 @@ var FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(fu
       inputValue = _useState8[0],
       setInputValue = _useState8[1];
 
-  var _useState9 = React.useState([]),
+  var _useState9 = React.useState(initialSelectedItems !== null && initialSelectedItems !== void 0 ? initialSelectedItems : []),
       _useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
       topItems = _useState10[0],
       setTopItems = _useState10[1];
@@ -119,6 +119,11 @@ var FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(fu
       highlightedIndex = _useState14[0],
       setHighlightedIndex = _useState14[1];
 
+  var _useState15 = React.useState(initialSelectedItems !== null && initialSelectedItems !== void 0 ? initialSelectedItems : []),
+      _useState16 = _rollupPluginBabelHelpers.slicedToArray(_useState15, 2),
+      currentSelectedItems = _useState16[0],
+      setCurrentSelectedItems = _useState16[1];
+
   var textInput = React.useRef();
   var filterableMultiSelectInstanceId = useId.useId();
   var enabled = index.useFeatureFlag('enable-v11-release');
@@ -143,8 +148,15 @@ var FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(fu
   }, helperText) : null;
   var menuId = "".concat(id, "__menu");
   var inputId = "".concat(id, "-input");
+  React.useEffect(function () {
+    if (!isOpen) {
+      setTopItems(currentSelectedItems);
+    }
+  }, [currentSelectedItems, isOpen, setTopItems]);
 
   function handleOnChange(changes) {
+    setCurrentSelectedItems(changes.selectedItems);
+
     if (onChange) {
       onChange(changes);
     }
@@ -163,11 +175,7 @@ var FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(fu
     handleOnMenuChange(false);
   }
 
-  function handleOnStateChange(changes, downshift) {
-    if (changes.isOpen && !isOpen) {
-      setTopItems(downshift.selectedItem);
-    }
-
+  function handleOnStateChange(changes) {
     var type = changes.type;
     var stateChangeTypes = Downshift__default["default"].stateChangeTypes;
 

package/lib/components/MultiSelect/MultiSelect.js

@@ -47,7 +47,6 @@ var _ref = Downshift.useSelect.stateChangeTypes,
     MenuBlur = _ref.MenuBlur,
     MenuKeyDownArrowDown = _ref.MenuKeyDownArrowDown,
     MenuKeyDownArrowUp = _ref.MenuKeyDownArrowUp,
-    MenuKeyDownEnter = _ref.MenuKeyDownEnter,
     MenuKeyDownEscape = _ref.MenuKeyDownEscape,
     MenuKeyDownSpaceButton = _ref.MenuKeyDownSpaceButton,
     ToggleButtonClick = _ref.ToggleButtonClick;
@@ -247,7 +246,6 @@ var MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function Mul
     switch (type) {
       case ItemClick:
       case MenuKeyDownSpaceButton:
-      case MenuKeyDownEnter:
         if (changes.selectedItem === undefined) {
           break;
         }

package/lib/components/NumberInput/NumberInput.js

@@ -525,13 +525,21 @@ function disableWheel(e) {
 }
 /**
  * Clamp the given value between the upper bound `max` and the lower bound `min`
+ *
+ * 16 digit min/max more precise than Infinity. Somewhere in 9 quadrillion,
+ * there will be integer display issues at runtime. 9quad is a safe cutoff.
  * @param {number} max
  * @param {number} min
  * @param {number} value
  */
 
 
-function clamp(max, min, value) {
+var boundLimit = 9000000000000000; // 16 digit, 9 quadrillion
+
+function clamp() {
+  var max = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : boundLimit;
+  var min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : -boundLimit;
+  var value = arguments.length > 2 ? arguments[2] : undefined;
   return Math.min(max, Math.max(min, value));
 }
 

package/lib/components/RadioButton/RadioButton.Skeleton.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import PropTypes from 'prop-types';
+import React from 'react';
+export interface RadioButtonSkeletonProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    /**
+     * Specify an optional className to add.
+     */
+    className?: string;
+}
+declare function RadioButtonSkeleton(props: RadioButtonSkeletonProps): JSX.Element;
+declare namespace RadioButtonSkeleton {
+    var propTypes: {
+        /**
+         * Specify an optional className to add.
+         */
+        className: PropTypes.Requireable<string>;
+    };
+}
+export default RadioButtonSkeleton;
+export { RadioButtonSkeleton };

package/lib/components/RadioButton/RadioButton.Skeleton.js

@@ -23,9 +23,9 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _excluded = ["className"];
 
-function RadioButtonSkeleton(_ref) {
-  var className = _ref.className,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+function RadioButtonSkeleton(props) {
+  var className = props.className,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
 
   var prefix = usePrefix.usePrefix();
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({

package/lib/components/RadioButton/RadioButton.d.ts

@@ -0,0 +1,64 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { ReactNodeLike } from 'prop-types';
+import React from 'react';
+type ExcludedAttributes = 'onChange';
+export interface RadioButtonProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
+    /**
+     * Specify whether the `<RadioButton>` is currently checked
+     */
+    checked?: boolean;
+    /**
+     * Provide an optional className to be applied to the containing node
+     */
+    className?: string;
+    /**
+     * Specify whether the `<RadioButton>` should be checked by default
+     */
+    defaultChecked?: boolean;
+    /**
+     * Specify whether the control is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specify whether the label should be hidden, or not
+     */
+    hideLabel?: boolean;
+    /**
+     * Provide a unique id for the underlying `<input>` node
+     */
+    id?: string;
+    /**
+     * Provide where label text should be placed
+     * NOTE: `top`/`bottom` are deprecated
+     */
+    labelPosition?: 'left' | 'right';
+    /**
+     * Provide label text to be read by screen readers when interacting with the
+     * control
+     */
+    labelText: ReactNodeLike;
+    /**
+     * Provide a name for the underlying `<input>` node
+     */
+    name?: string;
+    /**
+     * Provide an optional `onChange` hook that is called each time the value of
+     * the underlying `<input>` changes
+     */
+    onChange?: (value: string | number, name: string | undefined, event: any) => void;
+    /**
+     * Provide a handler that is invoked when a user clicks on the control
+     */
+    onClick?: (evt: React.MouseEvent<HTMLInputElement>) => void;
+    /**
+     * Specify the value of the `<RadioButton>`
+     */
+    value?: string | number;
+}
+declare const RadioButton: React.ForwardRefExoticComponent<RadioButtonProps & React.RefAttributes<unknown>>;
+export default RadioButton;

package/lib/components/RadioButton/RadioButton.js

@@ -16,6 +16,7 @@ var cx = require('classnames');
 require('../Text/index.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var useId = require('../../internal/useId.js');
+var mergeRefs = require('../../tools/mergeRefs.js');
 var Text = require('../Text/Text.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -25,21 +26,21 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _excluded = ["className", "disabled", "hideLabel", "id", "labelPosition", "labelText", "name", "onChange", "value"];
-var RadioButton = /*#__PURE__*/React__default["default"].forwardRef(function RadioButton(_ref, ref) {
-  var className = _ref.className,
-      disabled = _ref.disabled,
-      hideLabel = _ref.hideLabel,
-      id = _ref.id,
-      _ref$labelPosition = _ref.labelPosition,
-      labelPosition = _ref$labelPosition === void 0 ? 'right' : _ref$labelPosition,
-      _ref$labelText = _ref.labelText,
-      labelText = _ref$labelText === void 0 ? '' : _ref$labelText,
-      name = _ref.name,
-      _ref$onChange = _ref.onChange,
-      onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
-      _ref$value = _ref.value,
-      value = _ref$value === void 0 ? '' : _ref$value,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+var RadioButton = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
+  var className = props.className,
+      disabled = props.disabled,
+      hideLabel = props.hideLabel,
+      id = props.id,
+      _props$labelPosition = props.labelPosition,
+      labelPosition = _props$labelPosition === void 0 ? 'right' : _props$labelPosition,
+      _props$labelText = props.labelText,
+      labelText = _props$labelText === void 0 ? '' : _props$labelText,
+      name = props.name,
+      _props$onChange = props.onChange,
+      onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
+      _props$value = props.value,
+      value = _props$value === void 0 ? '' : _props$value,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
 
   var prefix = usePrefix.usePrefix();
   var uid = useId.useId('radio-button');
@@ -51,6 +52,7 @@ var RadioButton = /*#__PURE__*/React__default["default"].forwardRef(function Rad
 
   var innerLabelClasses = cx__default["default"]("".concat(prefix, "--radio-button__label-text"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--visually-hidden"), hideLabel));
   var wrapperClasses = cx__default["default"](className, "".concat(prefix, "--radio-button-wrapper"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--radio-button-wrapper--label-").concat(labelPosition), labelPosition !== 'right'));
+  var inputRef = React.useRef(null);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: wrapperClasses
   }, /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({}, rest, {
@@ -58,7 +60,7 @@ var RadioButton = /*#__PURE__*/React__default["default"].forwardRef(function Rad
     className: "".concat(prefix, "--radio-button"),
     onChange: handleOnChange,
     id: uniqueId,
-    ref: ref,
+    ref: mergeRefs["default"](inputRef, ref),
     disabled: disabled,
     value: value,
     name: name