@carbon/react 1.26.1 → 1.27.0

package/lib/components/StructuredList/StructuredList.js

@@ -141,12 +141,13 @@ function StructuredListRow(props) {
       setHasFocusWithin = _useState2[1];
 
   var id = useId.useId('grid-input');
+  var selectedRow = React__default["default"].useContext(GridSelectedRowStateContext);
   var setSelectedRow = React__default["default"].useContext(GridSelectedRowDispatchContext);
   var prefix = usePrefix.usePrefix();
   var value = {
     id: id
   };
-  var classes = cx__default["default"]("".concat(prefix, "--structured-list-row"), className, (_classNames2 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--structured-list-row--header-row"), head), _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--structured-list-row--focused-within"), hasFocusWithin), _classNames2));
+  var classes = cx__default["default"]("".concat(prefix, "--structured-list-row"), className, (_classNames2 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--structured-list-row--header-row"), head), _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--structured-list-row--focused-within"), hasFocusWithin), _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--structured-list-row--selected"), selectedRow === id), _classNames2));
   return head ? /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     role: "row"
   }, other, {

package/lib/components/Switch/IconSwitch.js

@@ -0,0 +1,184 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+var cx = require('classnames');
+var index = require('../IconButton/index.js');
+var usePrefix = require('../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+var _excluded = ["align", "children", "className", "disabled", "enterDelayMs", "index", "leaveDelayMs", "name", "onClick", "onKeyDown", "selected", "size", "text"];
+
+var noopFn = function noopFn() {};
+
+var IconSwitch = /*#__PURE__*/React__default["default"].forwardRef(function Switch(props, tabRef) {
+  var _classNames2;
+
+  var align = props.align,
+      children = props.children,
+      className = props.className,
+      disabled = props.disabled,
+      enterDelayMs = props.enterDelayMs,
+      index$1 = props.index,
+      _props$leaveDelayMs = props.leaveDelayMs,
+      leaveDelayMs = _props$leaveDelayMs === void 0 ? 0 : _props$leaveDelayMs,
+      name = props.name,
+      _props$onClick = props.onClick,
+      onClick = _props$onClick === void 0 ? noopFn : _props$onClick,
+      _props$onKeyDown = props.onKeyDown,
+      onKeyDown = _props$onKeyDown === void 0 ? noopFn : _props$onKeyDown,
+      _props$selected = props.selected,
+      selected = _props$selected === void 0 ? false : _props$selected,
+      size = props.size,
+      text = props.text,
+      other = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+
+  var _useState = React.useState(false),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      isHovered = _useState2[0],
+      setIsHovered = _useState2[1];
+
+  var handleClick = function handleClick(e) {
+    e.preventDefault();
+    onClick({
+      index: index$1,
+      name: name,
+      text: text
+    });
+  };
+
+  var handleKeyDown = function handleKeyDown(event) {
+    var key = event.key || event.which;
+    onKeyDown({
+      index: index$1,
+      name: name,
+      text: text,
+      key: key
+    });
+  };
+
+  var handleMouseEnter = function handleMouseEnter() {
+    setIsHovered(true);
+  };
+
+  var handleMouseLeave = function handleMouseLeave() {
+    setIsHovered(false);
+  };
+
+  var classes = cx__default["default"](className, "".concat(prefix, "--content-switcher-btn"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--content-switcher--selected"), selected));
+  var iconButtonClasses = cx__default["default"]("".concat(prefix, "--content-switcher-popover__wrapper"), (_classNames2 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--content-switcher-popover--selected"), selected), _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--content-switcher-popover--disabled"), disabled), _classNames2));
+  var commonProps = {
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    className: classes,
+    disabled: disabled,
+    align: align,
+    enterDelayMs: enterDelayMs,
+    leaveDelayMs: leaveDelayMs,
+    size: size
+  };
+  return /*#__PURE__*/React__default["default"].createElement(index.IconButton, _rollupPluginBabelHelpers["extends"]({
+    label: text,
+    type: "button",
+    ref: tabRef,
+    role: "tab",
+    tabIndex: selected || isHovered ? 0 : -1,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    onFocus: handleMouseEnter,
+    onBlur: handleMouseLeave,
+    "aria-selected": selected,
+    "aria-label": text,
+    wrapperClasses: iconButtonClasses
+  }, other, commonProps), children);
+});
+IconSwitch.displayName = 'IconSwitch';
+IconSwitch.propTypes = {
+  /**
+   * Specify how the trigger should align with the tooltip
+   */
+  align: PropTypes__default["default"].oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
+
+  /**
+   * Provide child elements to be rendered inside of the Switch
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Specify an optional className to be added to your Switch
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify whether or not the Switch should be disabled
+   */
+  disabled: PropTypes__default["default"].bool,
+
+  /**
+   * Specify the duration in milliseconds to delay before displaying the tooltip
+   */
+  enterDelayMs: PropTypes__default["default"].number,
+
+  /**
+   * The index of your Switch in your ContentSwitcher that is used for event handlers.
+   * Reserved for usage in ContentSwitcher
+   */
+  index: PropTypes__default["default"].number,
+
+  /**
+   * Specify the duration in milliseconds to delay before hiding the tooltip
+   */
+  leaveDelayMs: PropTypes__default["default"].number,
+
+  /**
+   * Provide the name of your Switch that is used for event handlers
+   */
+  name: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
+
+  /**
+   * A handler that is invoked when a user clicks on the control.
+   * Reserved for usage in ContentSwitcher
+   */
+  onClick: PropTypes__default["default"].func,
+
+  /**
+   * A handler that is invoked on the key down event for the control.
+   * Reserved for usage in ContentSwitcher
+   */
+  onKeyDown: PropTypes__default["default"].func,
+
+  /**
+   * Whether your Switch is selected. Reserved for usage in ContentSwitcher
+   */
+  selected: PropTypes__default["default"].bool,
+
+  /**
+   * Passed in from `ContentSwitcher` to render icon-only variant
+   */
+  size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg']),
+
+  /**
+   * Provide the visible text displayed by the Tooltip
+   */
+  text: PropTypes__default["default"].string
+};
+var IconSwitch$1 = IconSwitch;
+
+exports["default"] = IconSwitch$1;

package/lib/components/Tabs/Tabs.js

@@ -39,7 +39,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var _ChevronLeft, _ChevronRight;
 
 var _excluded = ["activation", "aria-label", "children", "className", "contained", "iconSize", "leftOverflowButtonProps", "light", "rightOverflowButtonProps", "scrollDebounceWait", "scrollIntoView"],
-    _excluded2 = ["as", "children", "className", "disabled", "onClick", "onKeyDown", "secondaryLabel", "hasSecondaryLabel"],
+    _excluded2 = ["as", "children", "className", "disabled", "onClick", "onKeyDown", "secondaryLabel", "renderIcon"],
     _excluded3 = ["children", "className", "defaultOpen", "enterDelayMs", "leaveDelayMs", "label"],
     _excluded4 = ["children", "className"];
 
@@ -336,12 +336,14 @@ function TabList(_ref2) {
     onKeyDown: onKeyDown
   }), React__default["default"].Children.map(children, function (child, index) {
     return /*#__PURE__*/React__default["default"].createElement(TabContext.Provider, {
-      value: index
+      value: {
+        index: index,
+        hasSecondaryLabel: hasSecondaryLabelTabs
+      }
     }, /*#__PURE__*/React__default["default"].cloneElement(child, {
       ref: function ref(node) {
         tabs.current[index] = node;
-      },
-      hasSecondaryLabel: hasSecondaryLabelTabs
+      }
     }));
   })), /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
     "aria-hidden": "true",
@@ -467,7 +469,7 @@ var Tab = /*#__PURE__*/React__default["default"].forwardRef(function Tab(_ref5,
       _onClick = _ref5.onClick,
       onKeyDown = _ref5.onKeyDown,
       secondaryLabel = _ref5.secondaryLabel,
-      hasSecondaryLabel = _ref5.hasSecondaryLabel,
+      Icon = _ref5.renderIcon,
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref5, _excluded2);
 
   var prefix = usePrefix.usePrefix();
@@ -477,7 +479,10 @@ var Tab = /*#__PURE__*/React__default["default"].forwardRef(function Tab(_ref5,
       setSelectedIndex = _React$useContext2.setSelectedIndex,
       baseId = _React$useContext2.baseId;
 
-  var index = React__default["default"].useContext(TabContext);
+  var _React$useContext3 = React__default["default"].useContext(TabContext),
+      index = _React$useContext3.index,
+      hasSecondaryLabel = _React$useContext3.hasSecondaryLabel;
+
   var id = "".concat(baseId, "-tab-").concat(index);
   var panelId = "".concat(baseId, "-tabpanel-").concat(index);
   var className = cx__default["default"]("".concat(prefix, "--tabs__nav-item"), "".concat(prefix, "--tabs__nav-link"), customClassName, (_cx4 = {}, _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--tabs__nav-item--selected"), selectedIndex === index), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--tabs__nav-item--disabled"), disabled), _cx4));
@@ -504,9 +509,15 @@ var Tab = /*#__PURE__*/React__default["default"].forwardRef(function Tab(_ref5,
     onKeyDown: onKeyDown,
     tabIndex: selectedIndex === index ? '0' : '-1',
     type: "button"
-  }), /*#__PURE__*/React__default["default"].createElement("span", {
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--tabs__nav-item-label-wrapper")
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
     className: "".concat(prefix, "--tabs__nav-item-label")
-  }, children), hasSecondaryLabel && /*#__PURE__*/React__default["default"].createElement("div", {
+  }, children), Icon && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--tabs__nav-item--icon")
+  }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+    size: 16
+  }))), hasSecondaryLabel && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(prefix, "--tabs__nav-item-secondary-label")
   }, secondaryLabel));
 });
@@ -531,11 +542,6 @@ Tab.propTypes = {
    */
   disabled: PropTypes__default["default"].bool,
 
-  /*
-   * Internal use only, determines wether a tab should render as a secondary label tab
-   **/
-  hasSecondaryLabel: PropTypes__default["default"].bool,
-
   /**
    * Provide a handler that is invoked when a user clicks on the control
    */
@@ -553,6 +559,12 @@ Tab.propTypes = {
    **/
   renderButton: PropTypes__default["default"].func,
 
+  /**
+   * Optional prop to render an icon next to the label.
+   * Can be a React component class
+   */
+  renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
+
   /*
    * An optional label to render under the primary tab label.
   /* This prop is only useful for conained tabs
@@ -570,7 +582,7 @@ var IconTab = /*#__PURE__*/React__default["default"].forwardRef(function IconTab
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref6, _excluded3);
 
   var prefix = usePrefix.usePrefix();
-  var classNames = cx__default["default"]("".concat(prefix, "--tabs__nav-item--icon"), customClassName);
+  var classNames = cx__default["default"]("".concat(prefix, "--tabs__nav-item--icon-only"), customClassName);
   return /*#__PURE__*/React__default["default"].createElement(Tooltip.Tooltip, {
     align: "bottom",
     defaultOpen: defaultOpen,
@@ -636,9 +648,9 @@ var TabPanel = /*#__PURE__*/React__default["default"].forwardRef(function TabPan
       interactiveContent = _useState10[0],
       setInteractiveContent = _useState10[1];
 
-  var _React$useContext3 = React__default["default"].useContext(TabsContext),
-      selectedIndex = _React$useContext3.selectedIndex,
-      baseId = _React$useContext3.baseId;
+  var _React$useContext4 = React__default["default"].useContext(TabsContext),
+      selectedIndex = _React$useContext4.selectedIndex,
+      baseId = _React$useContext4.baseId;
 
   var index = React__default["default"].useContext(TabPanelContext);
   var id = "".concat(baseId, "-tabpanel-").concat(index);

package/lib/components/TextArea/TextArea.js

@@ -22,6 +22,7 @@ var FormContext = require('../FluidForm/FormContext.js');
 var useAnnouncer = require('../../internal/useAnnouncer.js');
 var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
 var useMergedRefs = require('../../internal/useMergedRefs.js');
+var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -30,6 +31,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _excluded = ["className", "id", "labelText", "hideLabel", "onChange", "onClick", "invalid", "invalidText", "helperText", "light", "placeholder", "enableCounter", "maxCount", "warn", "warnText"];
+var getInstanceId = setupGetInstanceId["default"]();
 var TextArea = /*#__PURE__*/React__default["default"].forwardRef(function (props, forwardRef) {
   var _classNames, _classNames4, _classNames5;
 
@@ -66,6 +68,9 @@ var TextArea = /*#__PURE__*/React__default["default"].forwardRef(function (props
       textCount = _useState2[0],
       setTextCount = _useState2[1];
 
+  var _useRef = React.useRef(getInstanceId()),
+      textAreaInstanceId = _useRef.current;
+
   var textareaProps = {
     id: id,
     onChange: function onChange(evt) {
@@ -99,7 +104,9 @@ var TextArea = /*#__PURE__*/React__default["default"].forwardRef(function (props
     className: counterClasses
   }, "".concat(textCount, "/").concat(maxCount)) : null;
   var helperTextClasses = cx__default["default"]("".concat(prefix, "--form__helper-text"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), other.disabled));
+  var helperId = !helperText ? undefined : "text-area-helper-text-".concat(textAreaInstanceId);
   var helper = helperText ? /*#__PURE__*/React__default["default"].createElement("div", {
+    id: helperId,
     className: helperTextClasses
   }, helperText) : null;
   var errorId = id + '-error-msg';
@@ -127,11 +134,19 @@ var TextArea = /*#__PURE__*/React__default["default"].forwardRef(function (props
       textareaRef.current.style.width = "100%";
     }
   }, [other.cols]);
+  var ariaDescribedBy;
+
+  if (invalid) {
+    ariaDescribedBy = errorId;
+  } else if (!invalid && !warn && !isFluid && helperText) {
+    ariaDescribedBy = helperId;
+  }
+
   var input = /*#__PURE__*/React__default["default"].createElement("textarea", _rollupPluginBabelHelpers["extends"]({}, other, textareaProps, {
     placeholder: placeholder,
     className: textareaClasses,
     "aria-invalid": invalid,
-    "aria-describedby": invalid ? errorId : undefined,
+    "aria-describedby": ariaDescribedBy,
     disabled: other.disabled,
     readOnly: other.readOnly,
     ref: ref

package/lib/components/TextInput/ControlledPasswordInput.js

@@ -18,6 +18,7 @@ var util = require('./util.js');
 var warning = require('../../internal/warning.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -26,6 +27,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
 var _excluded = ["labelText", "className", "id", "placeholder", "onChange", "onClick", "hideLabel", "invalid", "invalidText", "helperText", "light", "type", "togglePasswordVisibility", "tooltipPosition", "tooltipAlignment", "hidePasswordLabel", "showPasswordLabel", "size"];
+var getInstanceId = setupGetInstanceId["default"]();
 var didWarnAboutDeprecation = false;
 var ControlledPasswordInput = /*#__PURE__*/React__default["default"].forwardRef(function ControlledPasswordInput(_ref, ref) {
   var _classNames, _classNames2, _classNames4;
@@ -57,6 +59,9 @@ var ControlledPasswordInput = /*#__PURE__*/React__default["default"].forwardRef(
 
   var prefix = usePrefix.usePrefix();
 
+  var _useRef = React.useRef(getInstanceId()),
+      controlledPasswordInstanceId = _useRef.current;
+
   if (process.env.NODE_ENV !== "production") {
     process.env.NODE_ENV !== "production" ? warning.warning(didWarnAboutDeprecation, '`<TextInput.ControlledPasswordInput>` has been deprecated in favor of `<TextInput.PasswordInput />` and will be removed in the next major release of `carbon-components-react`') : void 0;
     didWarnAboutDeprecation = true;
@@ -100,10 +105,13 @@ var ControlledPasswordInput = /*#__PURE__*/React__default["default"].forwardRef(
     className: "".concat(prefix, "--icon-visibility-on")
   });
   var passwordVisibilityToggleClasses = cx__default["default"]("".concat(prefix, "--text-input--password__visibility__toggle"), "".concat(prefix, "--btn"), "".concat(prefix, "--btn--icon-only"), "".concat(prefix, "--tooltip__trigger"), "".concat(prefix, "--tooltip--a11y"), (_classNames4 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames4, "".concat(prefix, "--tooltip--").concat(tooltipPosition), tooltipPosition), _rollupPluginBabelHelpers.defineProperty(_classNames4, "".concat(prefix, "--tooltip--align-").concat(tooltipAlignment), tooltipAlignment), _classNames4));
+  var helperId = !helperText ? undefined : "controlled-password-helper-text-".concat(controlledPasswordInstanceId);
   var input = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({}, util.textInputProps({
     invalid: invalid,
     sharedTextInputProps: sharedTextInputProps,
-    invalidId: errorId
+    invalidId: errorId,
+    hasHelper: !error && helperText,
+    helperId: helperId
   }), {
     "data-toggle-password-visibility": type === 'password'
   })), /*#__PURE__*/React__default["default"].createElement("button", {
@@ -114,6 +122,7 @@ var ControlledPasswordInput = /*#__PURE__*/React__default["default"].forwardRef(
     className: "".concat(prefix, "--assistive-text")
   }, passwordIsVisible ? hidePasswordLabel : showPasswordLabel), passwordVisibilityIcon));
   var helper = helperText ? /*#__PURE__*/React__default["default"].createElement("div", {
+    id: helperId,
     className: helperTextClasses
   }, helperText) : null;
   return /*#__PURE__*/React__default["default"].createElement("div", {

package/lib/components/TextInput/PasswordInput.js

@@ -122,6 +122,7 @@ var PasswordInput = /*#__PURE__*/React__default["default"].forwardRef(function P
     className: labelClasses
   }, labelText) : null;
   var helper = helperText ? /*#__PURE__*/React__default["default"].createElement("div", {
+    id: normalizedProps.helperId,
     className: helperTextClasses
   }, helperText) : null;
   var passwordIsVisible = inputType === 'text';
@@ -136,7 +137,9 @@ var PasswordInput = /*#__PURE__*/React__default["default"].forwardRef(function P
     invalid: normalizedProps.invalid,
     invalidId: normalizedProps.invalidId,
     warn: normalizedProps.warn,
-    warnId: normalizedProps.warnId
+    warnId: normalizedProps.warnId,
+    hasHelper: Boolean(helperText && !isFluid && (inline || !inline && !normalizedProps.validation)),
+    helperId: normalizedProps.helperId
   }), {
     disabled: disabled,
     "data-toggle-password-visibility": inputType === 'password'

package/lib/components/TextInput/index.js

@@ -15,9 +15,6 @@ var PasswordInput = require('./PasswordInput.js');
 var TextInput = require('./TextInput.js');
 var TextInput_Skeleton = require('./TextInput.Skeleton.js');
 
-TextInput["default"].ControlledPasswordInput = ControlledPasswordInput["default"];
-TextInput["default"].PasswordInput = PasswordInput["default"];
-
 if (process.env.NODE_ENV !== "production") {
   deprecateFieldOnObject.deprecateFieldOnObject(TextInput["default"], 'ControlledPasswordInput', ControlledPasswordInput["default"]);
   deprecateFieldOnObject.deprecateFieldOnObject(TextInput["default"], 'PasswordInput', PasswordInput["default"]);

package/lib/components/TextInput/util.js

@@ -25,13 +25,26 @@ var warnProps = function warnProps(warnId) {
   };
 };
 
+var helperProps = function helperProps(helperId) {
+  return {
+    'aria-describedby': helperId
+  };
+};
+/**
+ * @param {{sharedTextInputProps: object, invalid?: boolean, invalidId?: string, warn?: boolean, warnId?: string, hasHelper?: boolean, helperId?: string}} config
+ * @returns {object}
+ */
+
+
 var textInputProps = function textInputProps(_ref) {
   var sharedTextInputProps = _ref.sharedTextInputProps,
       invalid = _ref.invalid,
       invalidId = _ref.invalidId,
       warn = _ref.warn,
-      warnId = _ref.warnId;
-  return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, sharedTextInputProps), invalid ? invalidProps(invalidId) : {}), warn ? warnProps(warnId) : {});
+      warnId = _ref.warnId,
+      hasHelper = _ref.hasHelper,
+      helperId = _ref.helperId;
+  return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, sharedTextInputProps), invalid ? invalidProps(invalidId) : {}), warn ? warnProps(warnId) : {}), hasHelper ? helperProps(helperId) : {});
 };
 
 exports.textInputProps = textInputProps;

package/lib/components/Tile/Tile.js

@@ -20,6 +20,7 @@ var events = require('../../tools/events.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
 var useNoInteractiveChildren = require('../../internal/useNoInteractiveChildren.js');
+var useMergedRefs = require('../../internal/useMergedRefs.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
 
@@ -328,7 +329,7 @@ SelectableTile.propTypes = {
    */
   value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]).isRequired
 };
-function ExpandableTile(_ref4) {
+var ExpandableTile = /*#__PURE__*/React__default["default"].forwardRef(function ExpandableTile(_ref4, forwardRef) {
   var _cx4, _cx5;
 
   var tabIndex = _ref4.tabIndex,
@@ -386,6 +387,7 @@ function ExpandableTile(_ref4) {
   var tileContent = React.useRef(null);
   var tile = React.useRef(null);
   var prefix = usePrefix.usePrefix();
+  var ref = useMergedRefs.useMergedRefs([forwardRef, tile]);
 
   if (expanded !== prevExpanded) {
     setIsExpanded(expanded);
@@ -473,7 +475,7 @@ function ExpandableTile(_ref4) {
     };
   }, []);
   return interactive ? /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
-    ref: tile,
+    ref: ref,
     className: interactiveClassNames,
     "aria-expanded": isExpanded
   }, rest), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -493,7 +495,7 @@ function ExpandableTile(_ref4) {
     className: "".concat(prefix, "--tile-content")
   }, childrenAsArray[1]))) : /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
     type: "button",
-    ref: tile,
+    ref: ref,
     className: classNames,
     "aria-expanded": isExpanded,
     title: isExpanded ? tileExpandedIconText : tileCollapsedIconText
@@ -512,7 +514,7 @@ function ExpandableTile(_ref4) {
     ref: belowTheFold,
     className: "".concat(prefix, "--tile-content")
   }, childrenAsArray[1])));
-}
+});
 ExpandableTile.propTypes = {
   /**
    * The child nodes.

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

@@ -0,0 +1,58 @@
+/**
+ * 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';
+type ToggleSkeletonProps = {
+    'aria-label': string;
+    /**
+     * Specify an optional className to add to the form item wrapper.
+     */
+    className?: string;
+    /**
+     * Provide an id that unique represents the underlying `<input>`
+     */
+    id?: string;
+    /**
+     * Provide the text that will be read by a screen reader when visiting this
+     * control
+     * `aria-label` is always required but will be null if `labelText` is also
+     * provided
+     */
+    labelText?: string;
+    /**
+     * Specify the size of the Toggle. Currently only supports 'sm' or 'md' (default)
+     */
+    size?: 'sm' | 'md';
+} & React.HTMLAttributes<HTMLDivElement>;
+declare class ToggleSkeleton extends React.Component<ToggleSkeletonProps> {
+    static propTypes: {
+        "aria-label": PropTypes.Validator<string>;
+        /**
+         * Specify an optional className to add to the form item wrapper.
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Provide an id that unique represents the underlying `<input>`
+         */
+        id: PropTypes.Requireable<string>;
+        /**
+         * Provide the text that will be read by a screen reader when visiting this
+         * control
+         * `aria-label` is always required but will be undefined if `labelText` is also
+         * provided
+         */
+        labelText: PropTypes.Requireable<string>;
+        /**
+         * Specify the size of the Toggle. Currently only supports 'sm' or 'md' (default)
+         */
+        size: PropTypes.Requireable<string>;
+    };
+    static defaultProps: Partial<ToggleSkeletonProps>;
+    render(): JSX.Element;
+}
+export default ToggleSkeleton;
+export { ToggleSkeleton };

package/lib/components/Toggle/Toggle.Skeleton.js

@@ -60,7 +60,7 @@ var ToggleSkeleton = /*#__PURE__*/function (_React$Component) {
         }), /*#__PURE__*/React__default["default"].createElement("label", {
           className: "".concat(prefix, "--toggle-input__label"),
           htmlFor: id,
-          "aria-label": labelText ? null : _this.props['aria-label']
+          "aria-label": labelText ? undefined : _this.props['aria-label']
         }, labelText ? _div || (_div = /*#__PURE__*/React__default["default"].createElement("div", null, labelText)) : null, /*#__PURE__*/React__default["default"].createElement("span", {
           className: "".concat(prefix, "--toggle__switch")
         }, /*#__PURE__*/React__default["default"].createElement("span", {

package/lib/components/Tooltip/Tooltip.d.ts

@@ -22,7 +22,7 @@ interface TooltipBaseProps {
      */
     className?: string;
     /**
-     * Determines wether the tooltip should close when inner content is activated (click, Enter or Space)
+     * Determines whether the tooltip should close when inner content is activated (click, Enter or Space)
      */
     closeOnActivation?: boolean;
     /**

package/lib/index.d.ts

@@ -12,6 +12,7 @@ export * from './components/Breadcrumb';
 export * from './components/Button';
 export * from './components/ButtonSet';
 export * from './components/Checkbox';
+export * from './components/CheckboxGroup';
 export * from './components/ClassPrefix';
 export * from './components/CodeSnippet';
 export * from './components/ComboBox';