@carbon/react 1.24.0 → 1.25.0

package/es/components/Select/Select.d.ts

@@ -0,0 +1,89 @@
+/**
+ * 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, { ChangeEventHandler, ComponentPropsWithRef, ReactNode } from 'react';
+type ExcludedAttributes = 'size';
+interface SelectProps extends Omit<ComponentPropsWithRef<'select'>, ExcludedAttributes> {
+    /**
+     * Provide the contents of your Select
+     */
+    children?: ReactNode;
+    /**
+     * Specify an optional className to be applied to the node containing the label and the select box
+     */
+    className?: string;
+    /**
+     * Optionally provide the default value of the `<select>`
+     */
+    defaultValue?: any;
+    /**
+     * Specify whether the control is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Provide text that is used alongside the control label for additional help
+     */
+    helperText?: ReactNode;
+    /**
+     * Specify whether the label should be hidden, or not
+     */
+    hideLabel?: boolean;
+    /**
+     * Specify a custom `id` for the `<select>`
+     */
+    id: string;
+    /**
+     * Specify whether you want the inline version of this control
+     */
+    inline?: boolean;
+    /**
+     * Specify if the currently value is invalid.
+     */
+    invalid?: boolean;
+    /**
+     * Message which is displayed if the value is invalid.
+     */
+    invalidText?: ReactNode;
+    /**
+     * Provide label text to be read by screen readers when interacting with the control.
+     */
+    labelText?: ReactNode;
+    /**
+     * `true` to use the light version. For use on $ui-01 backgrounds only.
+     * Don't use this to make tile background color same as container background color.
+     *
+     * @deprecated The `light` prop for `Select` is no longer needed and has been deprecated in v11 in favor of the new `Layer` component.
+     * It will be moved in the next major release.
+     */
+    light?: boolean;
+    /**
+     * Reserved for use with <Pagination> component. Will not render a label for the
+     * select since Pagination renders one for us.
+     */
+    noLabel?: boolean;
+    /**
+     * Provide an optional `onChange` hook that is called each time the value of the underlying `<input>` changes.
+     */
+    onChange?: ChangeEventHandler<HTMLSelectElement>;
+    /**
+     * Whether the select should be read-only
+     */
+    readOnly?: boolean;
+    /**
+     * Specify the size of the Select Input.
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * 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?: ReactNode;
+}
+declare const Select: React.ForwardRefExoticComponent<Pick<SelectProps, "value" | "children" | "className" | "disabled" | "size" | "form" | "slot" | "style" | "title" | "dir" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "autoComplete" | "multiple" | "key" | "id" | "onAnimationEnd" | "aria-controls" | "aria-expanded" | "onClick" | "onKeyDown" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "inline" | "name" | "readOnly" | "required" | "labelText" | "hideLabel" | "light" | "invalid" | "invalidText" | "warn" | "warnText" | "helperText" | "noLabel"> & React.RefAttributes<HTMLSelectElement>>;
+export default Select;

package/es/components/SelectItem/SelectItem.d.ts

@@ -0,0 +1,62 @@
+/**
+ * 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 { HTMLAttributes } from 'react';
+export interface SelectItemProps extends HTMLAttributes<HTMLOptionElement> {
+    /**
+     * Specify an optional className to be applied to the node
+     */
+    className?: string;
+    /**
+     * Specify whether the <SelectItem> should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specify whether the <SelectItem> is hidden
+     */
+    hidden?: boolean;
+    /**
+     * Provide the contents of your <SelectItem>
+     */
+    text: string;
+    /**
+     * Specify the value of the <SelectItem>
+     */
+    value: any;
+}
+declare const SelectItem: {
+    ({ className, value, disabled, hidden, text, ...other }: SelectItemProps): JSX.Element;
+    propTypes: {
+        /**
+         * Specify an optional className to be applied to the node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify whether the <SelectItem> should be disabled
+         */
+        disabled: PropTypes.Requireable<boolean>;
+        /**
+         * Specify whether the <SelectItem> is hidden
+         */
+        hidden: PropTypes.Requireable<boolean>;
+        /**
+         * Provide the contents of your <SelectItem>
+         */
+        text: PropTypes.Validator<string>;
+        /**
+         * Specify the value of the <SelectItem>
+         */
+        value: PropTypes.Validator<any>;
+    };
+    defaultProps: {
+        disabled: boolean;
+        hidden: boolean;
+        value: string;
+        text: string;
+    };
+};
+export default SelectItem;

package/es/components/SelectItem/SelectItem.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React__default from 'react';
 import cx from 'classnames';
@@ -14,8 +14,6 @@ import { usePrefix } from '../../internal/usePrefix.js';
 var _excluded = ["className", "value", "disabled", "hidden", "text"];
 
 var SelectItem = function SelectItem(_ref) {
-  var _classNames;
-
   var className = _ref.className,
       value = _ref.value,
       disabled = _ref.disabled,
@@ -24,7 +22,7 @@ var SelectItem = function SelectItem(_ref) {
       other = _objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix();
-  var selectItemClasses = cx((_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--select-option"), true), _defineProperty(_classNames, className, className), _classNames));
+  var selectItemClasses = cx(_objectSpread2(_defineProperty({}, "".concat(prefix, "--select-option"), true), className && _defineProperty({}, className, className)));
   return /*#__PURE__*/React__default.createElement("option", _extends({}, other, {
     className: selectItemClasses,
     value: value,

package/es/components/SelectItemGroup/SelectItemGroup.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 PropTypes from 'prop-types';
+import { HTMLAttributes, ReactNode } from 'react';
+export interface SelectItemGroupProps extends HTMLAttributes<HTMLOptGroupElement> {
+    /**
+     * Provide the contents of your <SelectItemGroup>
+     */
+    children?: ReactNode;
+    /**
+     * Specify an optional className to be applied to the node
+     */
+    className?: string;
+    /**
+     * Specify whether the <SelectItemGroup> should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specify the label to be displayed
+     */
+    label: string;
+}
+declare const SelectItemGroup: {
+    ({ children, className, disabled, label, ...other }: SelectItemGroupProps): JSX.Element;
+    propTypes: {
+        /**
+         * Provide the contents of your <SelectItemGroup>
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify an optional className to be applied to the node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify whether the <SelectItemGroup> should be disabled
+         */
+        disabled: PropTypes.Requireable<boolean>;
+        /**
+         * Specify the label to be displayed
+         */
+        label: PropTypes.Validator<string>;
+    };
+    defaultProps: {
+        disabled: boolean;
+        label: string | undefined;
+    };
+};
+export default SelectItemGroup;

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,

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,6 +21,7 @@ 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';
 
@@ -377,7 +379,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

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/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 };