@carbon/react 1.24.0 → 1.26.0-rc.0

package/es/components/SkeletonText/SkeletonText.js

@@ -46,7 +46,7 @@ var SkeletonText = function SkeletonText(_ref) {
   useIsomorphicEffect(function () {
     refs.current.map(function (item, j) {
       var randomPercentWidth = getRandomInt(0, 75, j) + 'px';
-      var randomPxWidth = getRandomInt(widthNum - 75, widthNum, j) + 'px';
+      var randomPxWidth = getRandomInt(Math.max(widthNum - 75, 0), widthNum, j) + 'px';
 
       if (item) {
         if (widthPercent && paragraph) {

package/es/components/StructuredList/StructuredList.js

@@ -13,7 +13,9 @@ import { useId } from '../../internal/useId.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-var _excluded = ["children", "selection", "className", "ariaLabel", "isCondensed", "isFlush"],
+var _StructuredListWrappe;
+
+var _excluded = ["children", "selection", "className", "aria-label", "ariaLabel", "isCondensed", "isFlush"],
     _excluded2 = ["children", "className"],
     _excluded3 = ["children", "className"],
     _excluded4 = ["onKeyDown", "children", "className", "head"],
@@ -27,7 +29,8 @@ function StructuredListWrapper(props) {
   var children = props.children,
       selection = props.selection,
       className = props.className,
-      ariaLabel = props.ariaLabel,
+      ariaLabel = props['aria-label'],
+      deprecatedAriaLabel = props.ariaLabel,
       isCondensed = props.isCondensed,
       isFlush = props.isFlush,
       other = _objectWithoutProperties(props, _excluded);
@@ -48,46 +51,15 @@ function StructuredListWrapper(props) {
     role: "table",
     className: classes
   }, other, {
-    "aria-label": ariaLabel
+    "aria-label": deprecatedAriaLabel || ariaLabel
   }), children)));
 }
-StructuredListWrapper.propTypes = {
-  /**
-   * Specify a label to be read by screen readers on the container node
-   */
-  ariaLabel: PropTypes.string,
-
-  /**
-   * Provide the contents of your StructuredListWrapper
-   */
-  children: PropTypes.node,
-
-  /**
-   * Specify an optional className to be applied to the container node
-   */
-  className: PropTypes.string,
-
-  /**
-   * Specify if structured list is condensed, default is false
-   */
-  isCondensed: PropTypes.bool,
-
-  /**
-   * Specify if structured list is flush, default is false
-   */
-  isFlush: PropTypes.bool,
-
-  /**
-   * Specify whether your StructuredListWrapper should have selections
-   */
-  selection: PropTypes.bool
-};
-StructuredListWrapper.defaultProps = {
+StructuredListWrapper.propTypes = (_StructuredListWrappe = {}, _defineProperty(_StructuredListWrappe, 'aria-label', PropTypes.string), _defineProperty(_StructuredListWrappe, "ariaLabel", deprecate(PropTypes.string, 'This prop syntax has been deprecated. Please use the new `aria-label`.')), _defineProperty(_StructuredListWrappe, "children", PropTypes.node), _defineProperty(_StructuredListWrappe, "className", PropTypes.string), _defineProperty(_StructuredListWrappe, "isCondensed", PropTypes.bool), _defineProperty(_StructuredListWrappe, "isFlush", PropTypes.bool), _defineProperty(_StructuredListWrappe, "selection", PropTypes.bool), _StructuredListWrappe);
+StructuredListWrapper.defaultProps = _defineProperty({
   selection: false,
   isCondensed: false,
-  isFlush: false,
-  ariaLabel: 'Structured list section'
-};
+  isFlush: false
+}, 'aria-label', 'Structured list section');
 function StructuredListHead(props) {
   var children = props.children,
       className = props.className,
@@ -274,7 +246,7 @@ StructuredListInput.propTypes = {
   /**
    * Provide an optional hook that is called each time the input is updated
    */
-  onChange: deprecate(PropTypes.func, "\nThe prop `onChange` will be removed in the next major version of Carbon."),
+  onChange: PropTypes.func,
 
   /**
    * Provide a `title` for the input

package/es/components/Tabs/Tabs.js

@@ -11,6 +11,7 @@ import cx from 'classnames';
 import debounce from 'lodash.debounce';
 import PropTypes from 'prop-types';
 import React__default, { useState, useRef, useCallback, useEffect } from 'react';
+import '../Tooltip/DefinitionTooltip.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import { useControllableState } from '../../internal/useControllableState.js';
 import { useEffectOnce } from '../../internal/useEffectOnce.js';
@@ -20,13 +21,14 @@ import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { getInteractiveContent } from '../../internal/useNoInteractiveChildren.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { usePressable } from './usePressable.js';
+import deprecate from '../../prop-types/deprecate.js';
 import { matches, match } from '../../internal/keyboard/match.js';
 import { ArrowRight, ArrowLeft, Home, End } from '../../internal/keyboard/keys.js';
 
 var _ChevronLeft, _ChevronRight;
 
 var _excluded = ["activation", "aria-label", "children", "className", "contained", "iconSize", "leftOverflowButtonProps", "light", "rightOverflowButtonProps", "scrollDebounceWait", "scrollIntoView"],
-    _excluded2 = ["as", "children", "className", "disabled", "onClick", "onKeyDown"],
+    _excluded2 = ["as", "children", "className", "disabled", "onClick", "onKeyDown", "secondaryLabel", "hasSecondaryLabel"],
     _excluded3 = ["children", "className", "defaultOpen", "enterDelayMs", "leaveDelayMs", "label"],
     _excluded4 = ["children", "className"];
 
@@ -164,7 +166,10 @@ function TabList(_ref2) {
       scrollLeft = _useState6[0],
       setScrollLeft = _useState6[1];
 
-  var className = cx("".concat(prefix, "--tabs"), customClassName, (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--tabs--contained"), contained), _defineProperty(_cx, "".concat(prefix, "--tabs--light"), light), _defineProperty(_cx, "".concat(prefix, "--tabs__icon--default"), iconSize === 'default'), _defineProperty(_cx, "".concat(prefix, "--tabs__icon--lg"), iconSize === 'lg'), _cx)); // Previous Button
+  var hasSecondaryLabelTabs = contained && !!React__default.Children.toArray(children).filter(function (child) {
+    return child.props.secondaryLabel;
+  }).length;
+  var className = cx("".concat(prefix, "--tabs"), customClassName, (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--tabs--contained"), contained), _defineProperty(_cx, "".concat(prefix, "--tabs--light"), light), _defineProperty(_cx, "".concat(prefix, "--tabs__icon--default"), iconSize === 'default'), _defineProperty(_cx, "".concat(prefix, "--tabs__icon--lg"), iconSize === 'lg'), _defineProperty(_cx, "".concat(prefix, "--tabs--tall"), hasSecondaryLabelTabs), _cx)); // Previous Button
   // VISIBLE IF:
   //   SCROLLABLE
   //   AND SCROLL_LEFT > 0
@@ -324,7 +329,8 @@ function TabList(_ref2) {
     }, /*#__PURE__*/React__default.cloneElement(child, {
       ref: function ref(node) {
         tabs.current[index] = node;
-      }
+      },
+      hasSecondaryLabel: hasSecondaryLabelTabs
     }));
   })), /*#__PURE__*/React__default.createElement("button", _extends({
     "aria-hidden": "true",
@@ -377,7 +383,7 @@ TabList.propTypes = {
   /**
    * Specify whether or not to use the light component variant
    */
-  light: PropTypes.bool,
+  light: deprecate(PropTypes.bool, 'The `light` prop for `TabList` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'),
 
   /**
    * Provide the props that describe the right overflow button
@@ -449,6 +455,8 @@ var Tab = /*#__PURE__*/React__default.forwardRef(function Tab(_ref5, ref) {
       disabled = _ref5.disabled,
       _onClick = _ref5.onClick,
       onKeyDown = _ref5.onKeyDown,
+      secondaryLabel = _ref5.secondaryLabel,
+      hasSecondaryLabel = _ref5.hasSecondaryLabel,
       rest = _objectWithoutProperties(_ref5, _excluded2);
 
   var prefix = usePrefix();
@@ -485,7 +493,11 @@ var Tab = /*#__PURE__*/React__default.forwardRef(function Tab(_ref5, ref) {
     onKeyDown: onKeyDown,
     tabIndex: selectedIndex === index ? '0' : '-1',
     type: "button"
-  }), children);
+  }), /*#__PURE__*/React__default.createElement("span", {
+    className: "".concat(prefix, "--tabs__nav-item-label")
+  }, children), hasSecondaryLabel && /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--tabs__nav-item-secondary-label")
+  }, secondaryLabel));
 });
 Tab.propTypes = {
   /**
@@ -508,6 +520,11 @@ Tab.propTypes = {
    */
   disabled: PropTypes.bool,
 
+  /*
+   * Internal use only, determines wether a tab should render as a secondary label tab
+   **/
+  hasSecondaryLabel: PropTypes.bool,
+
   /**
    * Provide a handler that is invoked when a user clicks on the control
    */
@@ -523,7 +540,13 @@ Tab.propTypes = {
    * Useful for using Tab along with react-router or other client
    * side router libraries.
    **/
-  renderButton: PropTypes.func
+  renderButton: PropTypes.func,
+
+  /*
+   * An optional label to render under the primary tab label.
+  /* This prop is only useful for conained tabs
+   **/
+  secondaryLabel: PropTypes.string
 };
 var IconTab = /*#__PURE__*/React__default.forwardRef(function IconTab(_ref6, ref) {
   var children = _ref6.children,

package/es/components/TextArea/TextArea.Skeleton.d.ts

@@ -0,0 +1,33 @@
+/**
+ * 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 TextAreaSkeletonProps extends React.InputHTMLAttributes<HTMLDivElement> {
+    /**
+     * Specify an optional className to add to the form item wrapper.
+     */
+    className?: string;
+    /**
+     * Specify whether the label should be hidden, or not
+     */
+    hideLabel?: boolean;
+}
+declare const TextAreaSkeleton: {
+    (props: TextAreaSkeletonProps): JSX.Element;
+    propTypes: {
+        /**
+         * Specify an optional className to add to the form item wrapper.
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify whether the label should be hidden, or not
+         */
+        hideLabel: PropTypes.Requireable<boolean>;
+    };
+};
+export default TextAreaSkeleton;
+export { TextAreaSkeleton };

package/es/components/TextArea/TextArea.Skeleton.js

@@ -11,12 +11,12 @@ import React__default from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-var _excluded = ["hideLabel", "className"];
+var _excluded = ["className", "hideLabel"];
 
-var TextAreaSkeleton = function TextAreaSkeleton(_ref) {
-  var hideLabel = _ref.hideLabel,
-      className = _ref.className,
-      rest = _objectWithoutProperties(_ref, _excluded);
+var TextAreaSkeleton = function TextAreaSkeleton(props) {
+  var className = props.className,
+      hideLabel = props.hideLabel,
+      rest = _objectWithoutProperties(props, _excluded);
 
   var prefix = usePrefix();
   return /*#__PURE__*/React__default.createElement("div", _extends({

package/es/components/TextArea/TextArea.d.ts

@@ -6,8 +6,7 @@
  */
 import { ReactNodeLike } from 'prop-types';
 import React from 'react';
-type ExcludedAttributes = '';
-export interface TextAreaProps extends Omit<React.InputHTMLAttributes<HTMLTextAreaElement>, ExcludedAttributes> {
+export interface TextAreaProps extends React.InputHTMLAttributes<HTMLTextAreaElement> {
     /**
      * Provide a custom className that is applied directly to the underlying
      * `<textarea>` node
@@ -90,6 +89,14 @@ export interface TextAreaProps extends Omit<React.InputHTMLAttributes<HTMLTextAr
      * Provide the current value of the `<textarea>`
      */
     value?: string | number;
+    /**
+     * Specify whether the control is currently in warning state
+     */
+    warn?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in warning state
+     */
+    warnText?: ReactNodeLike;
 }
 declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<unknown>>;
 export default TextArea;

package/es/components/TextArea/TextArea.js

@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
 import React__default, { useContext, useState, useRef } from 'react';
 import cx from 'classnames';
 import deprecate from '../../prop-types/deprecate.js';
-import { WarningFilled } from '@carbon/icons-react';
+import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import '../FluidForm/FluidForm.js';
@@ -19,9 +19,9 @@ import { useAnnouncer } from '../../internal/useAnnouncer.js';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 
-var _excluded = ["className", "id", "labelText", "hideLabel", "onChange", "onClick", "invalid", "invalidText", "helperText", "light", "placeholder", "enableCounter", "maxCount"];
+var _excluded = ["className", "id", "labelText", "hideLabel", "onChange", "onClick", "invalid", "invalidText", "helperText", "light", "placeholder", "enableCounter", "maxCount", "warn", "warnText"];
 var TextArea = /*#__PURE__*/React__default.forwardRef(function (props, forwardRef) {
-  var _classNames, _classNames4;
+  var _classNames, _classNames4, _classNames5;
 
   var className = props.className,
       id = props.id,
@@ -36,6 +36,9 @@ var TextArea = /*#__PURE__*/React__default.forwardRef(function (props, forwardRe
       placeholder = props.placeholder,
       enableCounter = props.enableCounter,
       maxCount = props.maxCount,
+      _props$warn = props.warn,
+      warn = _props$warn === void 0 ? false : _props$warn,
+      warnText = props.warnText,
       other = _objectWithoutProperties(props, _excluded);
 
   var prefix = usePrefix();
@@ -97,7 +100,13 @@ var TextArea = /*#__PURE__*/React__default.forwardRef(function (props, forwardRe
   }, invalidText, isFluid && /*#__PURE__*/React__default.createElement(WarningFilled, {
     className: "".concat(prefix, "--text-area__invalid-icon")
   })) : null;
-  var textareaClasses = cx("".concat(prefix, "--text-area"), [enabled ? null : className], (_classNames4 = {}, _defineProperty(_classNames4, "".concat(prefix, "--text-area--light"), light), _defineProperty(_classNames4, "".concat(prefix, "--text-area--invalid"), invalid), _classNames4));
+  var warning = warn ? /*#__PURE__*/React__default.createElement("div", {
+    role: "alert",
+    className: "".concat(prefix, "--form-requirement")
+  }, warnText, isFluid && /*#__PURE__*/React__default.createElement(WarningAltFilled, {
+    className: "".concat(prefix, "--text-area__invalid-icon ").concat(prefix, "--text-area__invalid-icon--warning")
+  })) : null;
+  var textareaClasses = cx("".concat(prefix, "--text-area"), [enabled ? null : className], (_classNames4 = {}, _defineProperty(_classNames4, "".concat(prefix, "--text-area--light"), light), _defineProperty(_classNames4, "".concat(prefix, "--text-area--invalid"), invalid), _defineProperty(_classNames4, "".concat(prefix, "--text-area--warn"), warn), _classNames4));
   var textareaRef = useRef(null);
   var ref = useMergedRefs([forwardRef, textareaRef]);
   useIsomorphicEffect(function () {
@@ -122,16 +131,18 @@ var TextArea = /*#__PURE__*/React__default.forwardRef(function (props, forwardRe
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(prefix, "--text-area__label-wrapper")
   }, label, counter), /*#__PURE__*/React__default.createElement("div", {
-    className: cx("".concat(prefix, "--text-area__wrapper"), _defineProperty({}, "".concat(prefix, "--text-area__wrapper--readonly"), other.readOnly)),
+    className: cx("".concat(prefix, "--text-area__wrapper"), (_classNames5 = {}, _defineProperty(_classNames5, "".concat(prefix, "--text-area__wrapper--readonly"), other.readOnly), _defineProperty(_classNames5, "".concat(prefix, "--text-area__wrapper--warn"), warn), _classNames5)),
     "data-invalid": invalid || null
   }, invalid && !isFluid && /*#__PURE__*/React__default.createElement(WarningFilled, {
     className: "".concat(prefix, "--text-area__invalid-icon")
+  }), warn && !invalid && !isFluid && /*#__PURE__*/React__default.createElement(WarningAltFilled, {
+    className: "".concat(prefix, "--text-area__invalid-icon ").concat(prefix, "--text-area__invalid-icon--warning")
   }), input, /*#__PURE__*/React__default.createElement("span", {
     className: "".concat(prefix, "--text-area__counter-alert"),
     role: "alert"
   }, ariaAnnouncement), isFluid && /*#__PURE__*/React__default.createElement("hr", {
     className: "".concat(prefix, "--text-area__divider")
-  }), isFluid && invalid ? error : null), invalid && !isFluid ? error : helper);
+  }), isFluid && invalid ? error : null, isFluid && warn && !invalid ? warning : null), !invalid && !warn && !isFluid ? helper : null, invalid && !isFluid ? error : null, warn && !invalid && !isFluid ? warning : null);
 });
 TextArea.displayName = 'TextArea';
 TextArea.propTypes = {
@@ -233,7 +244,17 @@ TextArea.propTypes = {
   /**
    * Provide the current value of the `<textarea>`
    */
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /**
+   * Specify whether the control is currently in warning state
+   */
+  warn: PropTypes.bool,
+
+  /**
+   * Provide the text that is displayed when the control is in warning state
+   */
+  warnText: PropTypes.node
 };
 TextArea.defaultProps = {
   disabled: false,
@@ -245,7 +266,9 @@ TextArea.defaultProps = {
   invalidText: '',
   helperText: '',
   enableCounter: false,
-  maxCount: undefined
+  maxCount: undefined,
+  warn: false,
+  warnText: ''
 };
 var TextArea$1 = TextArea;
 

package/es/components/TextArea/index.js

@@ -7,3 +7,4 @@
 
 import TextArea from './TextArea.js';
 export { default as TextArea, default } from './TextArea.js';
+export { default as TextAreaSkeleton } from './TextArea.Skeleton.js';

package/es/components/TextInput/TextInput.Skeleton.d.ts

@@ -0,0 +1,33 @@
+/**
+ * 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 TextInputSkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Specify an optional className to add to the form item wrapper.
+     */
+    className?: string;
+    /**
+     * Specify whether the label should be hidden or not.
+     */
+    hideLabel?: boolean;
+}
+declare const TextInputSkeleton: {
+    ({ hideLabel, className, ...rest }: TextInputSkeletonProps): JSX.Element;
+    propTypes: {
+        /**
+         * Specify an optional className to add to the form item wrapper.
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify whether the label should be hidden, or not
+         */
+        hideLabel: PropTypes.Requireable<boolean>;
+    };
+};
+export default TextInputSkeleton;
+export { TextInputSkeleton };

package/es/components/TextInput/index.js

@@ -10,6 +10,7 @@ import ControlledPasswordInput from './ControlledPasswordInput.js';
 import PasswordInput from './PasswordInput.js';
 import TextInput from './TextInput.js';
 export { default as TextInput, default } from './TextInput.js';
+export { default as TextInputSkeleton } from './TextInput.Skeleton.js';
 
 TextInput.ControlledPasswordInput = ControlledPasswordInput;
 TextInput.PasswordInput = PasswordInput;

package/es/components/Tile/Tile.js

@@ -22,7 +22,7 @@ import { Enter, Space } from '../../internal/keyboard/keys.js';
 var _CheckboxCheckedFille, _Checkbox, _ChevronDown, _ChevronDown2;
 
 var _excluded = ["children", "className", "light"],
-    _excluded2 = ["children", "className", "clicked", "href", "light", "onClick", "onKeyDown"],
+    _excluded2 = ["children", "className", "clicked", "disabled", "href", "light", "onClick", "onKeyDown"],
     _excluded3 = ["children", "className", "disabled", "id", "light", "name", "onClick", "onChange", "onKeyDown", "selected", "tabIndex", "title", "value"],
     _excluded4 = ["tabIndex", "className", "children", "expanded", "tileMaxHeight", "tilePadding", "onClick", "onKeyUp", "tileCollapsedIconText", "tileExpandedIconText", "tileCollapsedLabel", "tileExpandedLabel", "light"];
 var Tile = /*#__PURE__*/React__default.forwardRef(function Tile(_ref, ref) {
@@ -64,6 +64,7 @@ var ClickableTile = /*#__PURE__*/React__default.forwardRef(function ClickableTil
       className = _ref2.className,
       _ref2$clicked = _ref2.clicked,
       clicked = _ref2$clicked === void 0 ? false : _ref2$clicked,
+      disabled = _ref2.disabled,
       href = _ref2.href,
       light = _ref2.light,
       _ref2$onClick = _ref2.onClick,
@@ -101,9 +102,10 @@ var ClickableTile = /*#__PURE__*/React__default.forwardRef(function ClickableTil
   return /*#__PURE__*/React__default.createElement(Link, _extends({
     className: classes,
     href: href,
-    onClick: handleOnClick,
+    onClick: !disabled ? handleOnClick : null,
     onKeyDown: handleOnKeyDown,
-    ref: ref
+    ref: ref,
+    disabled: disabled
   }, rest), children);
 });
 ClickableTile.displayName = 'ClickableTile';
@@ -123,6 +125,11 @@ ClickableTile.propTypes = {
    */
   clicked: PropTypes.bool,
 
+  /**
+   * Specify whether the ClickableTile should be disabled
+   */
+  disabled: PropTypes.bool,
+
   /**
    * The href for the link.
    */
@@ -359,7 +366,7 @@ function ExpandableTile(_ref4) {
       isExpanded = _useState18[0],
       setIsExpanded = _useState18[1];
 
-  var _useState19 = useState(false),
+  var _useState19 = useState(true),
       _useState20 = _slicedToArray(_useState19, 2),
       interactive = _useState20[0],
       setInteractive = _useState20[1];
@@ -429,11 +436,11 @@ function ExpandableTile(_ref4) {
     setIsTilePadding(paddingTop + paddingBottom);
   }, [isTileMaxHeight]);
   useIsomorphicEffect(function () {
-    if (getInteractiveContent(belowTheFold.current)) {
-      setInteractive(true);
+    if (!getInteractiveContent(belowTheFold.current)) {
+      setInteractive(false);
       return;
-    } else if (getInteractiveContent(aboveTheFold.current)) {
-      setInteractive(true);
+    } else if (!getInteractiveContent(aboveTheFold.current)) {
+      setInteractive(false);
     }
   }, []);
   useIsomorphicEffect(function () {

package/es/components/Toggle/Toggle.js

@@ -64,8 +64,8 @@ function Toggle(_ref) {
 
   var isSm = size === 'sm';
   var sideLabel = hideLabel ? labelText : checked ? labelB : labelA;
-  var renderSideLabel = !(hideLabel && ariaLabelledby);
-  var LabelComponent = ariaLabelledby ? 'div' : 'label';
+  var renderSideLabel = !(hideLabel && !labelText);
+  var LabelComponent = labelText ? 'label' : 'div';
   var wrapperClasses = cx("".concat(prefix, "--toggle"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--toggle--disabled"), disabled), _defineProperty(_classNames, "".concat(prefix, "--toggle--readonly"), readOnly), _classNames), className);
   var labelTextClasses = cx("".concat(prefix, "--toggle__label-text"), _defineProperty({}, "".concat(prefix, "--visually-hidden"), hideLabel));
   var appearanceClasses = cx("".concat(prefix, "--toggle__appearance"), _defineProperty({}, "".concat(prefix, "--toggle__appearance--sm"), isSm));
@@ -75,7 +75,7 @@ function Toggle(_ref) {
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
     React__default.createElement("div", {
       className: wrapperClasses,
-      onClick: ariaLabelledby ? function (e) {
+      onClick: !labelText ? function (e) {
         // the underlying <button> can only be activated by keyboard as it is visually hidden;
         // therefore, if this event's target is the <button>, it had to be triggered by
         // the keyboard event which already calls handleClick. if we wouldn't catch this, the
@@ -141,10 +141,7 @@ Toggle.propTypes = {
 
   /**
    * If true, the side labels (props.labelA and props.labelB) will be replaced by
-   * props.labelText, so that the toggle doesn't render a top label. In order to fully
-   * hide any labels, you can use props['aria-labelledby'] to refer to another element
-   * that labels the toggle. props.labelText would no longer be required in that case
-   * and can therefore be omitted.
+   * props.labelText (if passed), so that the toggle doesn't render a top label.
    */
   hideLabel: PropTypes.bool,
 
@@ -165,19 +162,11 @@ Toggle.propTypes = {
 
   /**
    * Provide the text that will be read by a screen reader when visiting this
-   * control. This is required unless 'aria-labelledby' is provided instead
+   * control. This should be provided unless 'aria-labelledby' is set instead
+   * or you use an external <label> element with its "for" attribute set to the
+   * toggle's id.
    */
-  labelText: function labelText(props) {
-    if (!props['aria-labelledby'] && !props.labelText) {
-      return new Error('labelText property is required if no aria-labelledby is provided.');
-    }
-
-    for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-      rest[_key - 1] = arguments[_key];
-    }
-
-    return PropTypes.node.apply(PropTypes, [props].concat(rest));
-  },
+  labelText: PropTypes.string,
 
   /**
    * Provide an event listener that is called when the control is clicked

package/es/components/Tooltip/DefinitionTooltip.d.ts

@@ -0,0 +1,52 @@
+/**
+ * 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 from 'react';
+import { PopoverAlignment } from '../Popover';
+export interface DefinitionTooltipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'id' | 'classname' | 'children' | 'type'> {
+    /**
+     * Specify how the trigger should align with the tooltip
+     */
+    align?: PopoverAlignment;
+    /**
+     * The `children` prop will be used as the value that is being defined
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify an optional className to be applied to the container node
+     */
+    className?: string;
+    /**
+     * Specify whether the tooltip should be open when it first renders
+     */
+    defaultOpen?: boolean;
+    /**
+     * The `definition` prop is used as the content inside of the tooltip that
+     * appears when a user interacts with the element rendered by the `children`
+     * prop
+     */
+    definition: React.ReactNode;
+    /**
+     * Provide a value that will be assigned as the id of the tooltip
+     */
+    id?: string;
+    /**
+     * Specifies whether or not the `DefinitionTooltip` should open on hover or not
+     */
+    openOnHover?: boolean;
+    /**
+     * @deprecated [Deprecated in v11] Please use the `definition` prop instead.
+     *
+     * Provide the text that will be displayed in the tooltip when it is rendered.
+     */
+    tooltipText?: React.ReactNode;
+    /**
+     * The CSS class name of the trigger element
+     */
+    triggerClassName?: string;
+}
+declare const DefinitionTooltip: React.FC<DefinitionTooltipProps>;
+export { DefinitionTooltip };

package/es/components/Tooltip/DefinitionTooltip.js

@@ -18,7 +18,7 @@ import { Escape } from '../../internal/keyboard/keys.js';
 
 var _excluded = ["align", "className", "children", "definition", "defaultOpen", "id", "openOnHover", "tooltipText", "triggerClassName"];
 
-function DefinitionTooltip(_ref) {
+var DefinitionTooltip = function DefinitionTooltip(_ref) {
   var _ref$align = _ref.align,
       align = _ref$align === void 0 ? 'bottom-left' : _ref$align,
       className = _ref.className,
@@ -75,7 +75,7 @@ function DefinitionTooltip(_ref) {
     className: "".concat(prefix, "--definition-tooltip"),
     id: tooltipId
   }, tooltipText !== null && tooltipText !== void 0 ? tooltipText : definition));
-}
+};
 
 DefinitionTooltip.propTypes = {
   /**