@carbon/react 1.26.1 → 1.27.0

package/es/components/Switch/IconSwitch.js

@@ -0,0 +1,174 @@
+/**
+ * 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 { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default, { useState } from 'react';
+import cx from 'classnames';
+import { IconButton } from '../IconButton/index.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var _excluded = ["align", "children", "className", "disabled", "enterDelayMs", "index", "leaveDelayMs", "name", "onClick", "onKeyDown", "selected", "size", "text"];
+
+var noopFn = function noopFn() {};
+
+var IconSwitch = /*#__PURE__*/React__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 = 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 = _objectWithoutProperties(props, _excluded);
+
+  var prefix = usePrefix();
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isHovered = _useState2[0],
+      setIsHovered = _useState2[1];
+
+  var handleClick = function handleClick(e) {
+    e.preventDefault();
+    onClick({
+      index: index,
+      name: name,
+      text: text
+    });
+  };
+
+  var handleKeyDown = function handleKeyDown(event) {
+    var key = event.key || event.which;
+    onKeyDown({
+      index: index,
+      name: name,
+      text: text,
+      key: key
+    });
+  };
+
+  var handleMouseEnter = function handleMouseEnter() {
+    setIsHovered(true);
+  };
+
+  var handleMouseLeave = function handleMouseLeave() {
+    setIsHovered(false);
+  };
+
+  var classes = cx(className, "".concat(prefix, "--content-switcher-btn"), _defineProperty({}, "".concat(prefix, "--content-switcher--selected"), selected));
+  var iconButtonClasses = cx("".concat(prefix, "--content-switcher-popover__wrapper"), (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefix, "--content-switcher-popover--selected"), selected), _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.createElement(IconButton, _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.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.node,
+
+  /**
+   * Specify an optional className to be added to your Switch
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify whether or not the Switch should be disabled
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Specify the duration in milliseconds to delay before displaying the tooltip
+   */
+  enterDelayMs: PropTypes.number,
+
+  /**
+   * The index of your Switch in your ContentSwitcher that is used for event handlers.
+   * Reserved for usage in ContentSwitcher
+   */
+  index: PropTypes.number,
+
+  /**
+   * Specify the duration in milliseconds to delay before hiding the tooltip
+   */
+  leaveDelayMs: PropTypes.number,
+
+  /**
+   * Provide the name of your Switch that is used for event handlers
+   */
+  name: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /**
+   * A handler that is invoked when a user clicks on the control.
+   * Reserved for usage in ContentSwitcher
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * A handler that is invoked on the key down event for the control.
+   * Reserved for usage in ContentSwitcher
+   */
+  onKeyDown: PropTypes.func,
+
+  /**
+   * Whether your Switch is selected. Reserved for usage in ContentSwitcher
+   */
+  selected: PropTypes.bool,
+
+  /**
+   * Passed in from `ContentSwitcher` to render icon-only variant
+   */
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+
+  /**
+   * Provide the visible text displayed by the Tooltip
+   */
+  text: PropTypes.string
+};
+var IconSwitch$1 = IconSwitch;
+
+export { IconSwitch$1 as default };

package/es/components/Tabs/Tabs.js

@@ -28,7 +28,7 @@ import { ArrowRight, ArrowLeft, Home, End } from '../../internal/keyboard/keys.j
 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"];
 
@@ -325,12 +325,14 @@ function TabList(_ref2) {
     onKeyDown: onKeyDown
   }), React__default.Children.map(children, function (child, index) {
     return /*#__PURE__*/React__default.createElement(TabContext.Provider, {
-      value: index
+      value: {
+        index: index,
+        hasSecondaryLabel: hasSecondaryLabelTabs
+      }
     }, /*#__PURE__*/React__default.cloneElement(child, {
       ref: function ref(node) {
         tabs.current[index] = node;
-      },
-      hasSecondaryLabel: hasSecondaryLabelTabs
+      }
     }));
   })), /*#__PURE__*/React__default.createElement("button", _extends({
     "aria-hidden": "true",
@@ -456,7 +458,7 @@ var Tab = /*#__PURE__*/React__default.forwardRef(function Tab(_ref5, ref) {
       _onClick = _ref5.onClick,
       onKeyDown = _ref5.onKeyDown,
       secondaryLabel = _ref5.secondaryLabel,
-      hasSecondaryLabel = _ref5.hasSecondaryLabel,
+      Icon = _ref5.renderIcon,
       rest = _objectWithoutProperties(_ref5, _excluded2);
 
   var prefix = usePrefix();
@@ -466,7 +468,10 @@ var Tab = /*#__PURE__*/React__default.forwardRef(function Tab(_ref5, ref) {
       setSelectedIndex = _React$useContext2.setSelectedIndex,
       baseId = _React$useContext2.baseId;
 
-  var index = React__default.useContext(TabContext);
+  var _React$useContext3 = React__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("".concat(prefix, "--tabs__nav-item"), "".concat(prefix, "--tabs__nav-link"), customClassName, (_cx4 = {}, _defineProperty(_cx4, "".concat(prefix, "--tabs__nav-item--selected"), selectedIndex === index), _defineProperty(_cx4, "".concat(prefix, "--tabs__nav-item--disabled"), disabled), _cx4));
@@ -493,9 +498,15 @@ var Tab = /*#__PURE__*/React__default.forwardRef(function Tab(_ref5, ref) {
     onKeyDown: onKeyDown,
     tabIndex: selectedIndex === index ? '0' : '-1',
     type: "button"
-  }), /*#__PURE__*/React__default.createElement("span", {
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--tabs__nav-item-label-wrapper")
+  }, /*#__PURE__*/React__default.createElement("span", {
     className: "".concat(prefix, "--tabs__nav-item-label")
-  }, children), hasSecondaryLabel && /*#__PURE__*/React__default.createElement("div", {
+  }, children), Icon && /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--tabs__nav-item--icon")
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    size: 16
+  }))), hasSecondaryLabel && /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(prefix, "--tabs__nav-item-secondary-label")
   }, secondaryLabel));
 });
@@ -520,11 +531,6 @@ 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
    */
@@ -542,6 +548,12 @@ Tab.propTypes = {
    **/
   renderButton: PropTypes.func,
 
+  /**
+   * Optional prop to render an icon next to the label.
+   * Can be a React component class
+   */
+  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+
   /*
    * An optional label to render under the primary tab label.
   /* This prop is only useful for conained tabs
@@ -559,7 +571,7 @@ var IconTab = /*#__PURE__*/React__default.forwardRef(function IconTab(_ref6, ref
       rest = _objectWithoutProperties(_ref6, _excluded3);
 
   var prefix = usePrefix();
-  var classNames = cx("".concat(prefix, "--tabs__nav-item--icon"), customClassName);
+  var classNames = cx("".concat(prefix, "--tabs__nav-item--icon-only"), customClassName);
   return /*#__PURE__*/React__default.createElement(Tooltip, {
     align: "bottom",
     defaultOpen: defaultOpen,
@@ -625,9 +637,9 @@ var TabPanel = /*#__PURE__*/React__default.forwardRef(function TabPanel(_ref7, f
       interactiveContent = _useState10[0],
       setInteractiveContent = _useState10[1];
 
-  var _React$useContext3 = React__default.useContext(TabsContext),
-      selectedIndex = _React$useContext3.selectedIndex,
-      baseId = _React$useContext3.baseId;
+  var _React$useContext4 = React__default.useContext(TabsContext),
+      selectedIndex = _React$useContext4.selectedIndex,
+      baseId = _React$useContext4.baseId;
 
   var index = React__default.useContext(TabPanelContext);
   var id = "".concat(baseId, "-tabpanel-").concat(index);

package/es/components/TextArea/TextArea.js

@@ -18,8 +18,10 @@ import { FormContext } from '../FluidForm/FormContext.js';
 import { useAnnouncer } from '../../internal/useAnnouncer.js';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
+import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
 
 var _excluded = ["className", "id", "labelText", "hideLabel", "onChange", "onClick", "invalid", "invalidText", "helperText", "light", "placeholder", "enableCounter", "maxCount", "warn", "warnText"];
+var getInstanceId = setupGetInstanceId();
 var TextArea = /*#__PURE__*/React__default.forwardRef(function (props, forwardRef) {
   var _classNames, _classNames4, _classNames5;
 
@@ -56,6 +58,9 @@ var TextArea = /*#__PURE__*/React__default.forwardRef(function (props, forwardRe
       textCount = _useState2[0],
       setTextCount = _useState2[1];
 
+  var _useRef = useRef(getInstanceId()),
+      textAreaInstanceId = _useRef.current;
+
   var textareaProps = {
     id: id,
     onChange: function onChange(evt) {
@@ -89,7 +94,9 @@ var TextArea = /*#__PURE__*/React__default.forwardRef(function (props, forwardRe
     className: counterClasses
   }, "".concat(textCount, "/").concat(maxCount)) : null;
   var helperTextClasses = cx("".concat(prefix, "--form__helper-text"), _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.createElement("div", {
+    id: helperId,
     className: helperTextClasses
   }, helperText) : null;
   var errorId = id + '-error-msg';
@@ -117,11 +124,19 @@ var TextArea = /*#__PURE__*/React__default.forwardRef(function (props, forwardRe
       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.createElement("textarea", _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/es/components/TextInput/ControlledPasswordInput.js

@@ -6,7 +6,7 @@
  */
 
 import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, objectSpread2 as _objectSpread2, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default from 'react';
+import React__default, { useRef } from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import { WarningFilled, ViewOff, View } from '@carbon/icons-react';
@@ -14,8 +14,10 @@ import { textInputProps } from './util.js';
 import { warning } from '../../internal/warning.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
 
 var _excluded = ["labelText", "className", "id", "placeholder", "onChange", "onClick", "hideLabel", "invalid", "invalidText", "helperText", "light", "type", "togglePasswordVisibility", "tooltipPosition", "tooltipAlignment", "hidePasswordLabel", "showPasswordLabel", "size"];
+var getInstanceId = setupGetInstanceId();
 var didWarnAboutDeprecation = false;
 var ControlledPasswordInput = /*#__PURE__*/React__default.forwardRef(function ControlledPasswordInput(_ref, ref) {
   var _classNames, _classNames2, _classNames4;
@@ -47,6 +49,9 @@ var ControlledPasswordInput = /*#__PURE__*/React__default.forwardRef(function Co
 
   var prefix = usePrefix();
 
+  var _useRef = useRef(getInstanceId()),
+      controlledPasswordInstanceId = _useRef.current;
+
   if (process.env.NODE_ENV !== "production") {
     process.env.NODE_ENV !== "production" ? 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;
@@ -90,10 +95,13 @@ var ControlledPasswordInput = /*#__PURE__*/React__default.forwardRef(function Co
     className: "".concat(prefix, "--icon-visibility-on")
   });
   var passwordVisibilityToggleClasses = cx("".concat(prefix, "--text-input--password__visibility__toggle"), "".concat(prefix, "--btn"), "".concat(prefix, "--btn--icon-only"), "".concat(prefix, "--tooltip__trigger"), "".concat(prefix, "--tooltip--a11y"), (_classNames4 = {}, _defineProperty(_classNames4, "".concat(prefix, "--tooltip--").concat(tooltipPosition), tooltipPosition), _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.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("input", _extends({}, textInputProps({
     invalid: invalid,
     sharedTextInputProps: sharedTextInputProps,
-    invalidId: errorId
+    invalidId: errorId,
+    hasHelper: !error && helperText,
+    helperId: helperId
   }), {
     "data-toggle-password-visibility": type === 'password'
   })), /*#__PURE__*/React__default.createElement("button", {
@@ -104,6 +112,7 @@ var ControlledPasswordInput = /*#__PURE__*/React__default.forwardRef(function Co
     className: "".concat(prefix, "--assistive-text")
   }, passwordIsVisible ? hidePasswordLabel : showPasswordLabel), passwordVisibilityIcon));
   var helper = helperText ? /*#__PURE__*/React__default.createElement("div", {
+    id: helperId,
     className: helperTextClasses
   }, helperText) : null;
   return /*#__PURE__*/React__default.createElement("div", {

package/es/components/TextInput/PasswordInput.js

@@ -112,6 +112,7 @@ var PasswordInput = /*#__PURE__*/React__default.forwardRef(function PasswordInpu
     className: labelClasses
   }, labelText) : null;
   var helper = helperText ? /*#__PURE__*/React__default.createElement("div", {
+    id: normalizedProps.helperId,
     className: helperTextClasses
   }, helperText) : null;
   var passwordIsVisible = inputType === 'text';
@@ -126,7 +127,9 @@ var PasswordInput = /*#__PURE__*/React__default.forwardRef(function PasswordInpu
     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/es/components/TextInput/index.js

@@ -12,9 +12,6 @@ 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;
-
 if (process.env.NODE_ENV !== "production") {
   deprecateFieldOnObject(TextInput, 'ControlledPasswordInput', ControlledPasswordInput);
   deprecateFieldOnObject(TextInput, 'PasswordInput', PasswordInput);

package/es/components/TextInput/util.js

@@ -21,13 +21,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 _objectSpread2(_objectSpread2(_objectSpread2({}, sharedTextInputProps), invalid ? invalidProps(invalidId) : {}), warn ? warnProps(warnId) : {});
+      warnId = _ref.warnId,
+      hasHelper = _ref.hasHelper,
+      helperId = _ref.helperId;
+  return _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, sharedTextInputProps), invalid ? invalidProps(invalidId) : {}), warn ? warnProps(warnId) : {}), hasHelper ? helperProps(helperId) : {});
 };
 
 export { textInputProps };

package/es/components/Tile/Tile.js

@@ -16,6 +16,7 @@ import { composeEventHandlers } from '../../tools/events.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import { getInteractiveContent } from '../../internal/useNoInteractiveChildren.js';
+import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { matches } from '../../internal/keyboard/match.js';
 import { Enter, Space } from '../../internal/keyboard/keys.js';
 
@@ -318,7 +319,7 @@ SelectableTile.propTypes = {
    */
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
 };
-function ExpandableTile(_ref4) {
+var ExpandableTile = /*#__PURE__*/React__default.forwardRef(function ExpandableTile(_ref4, forwardRef) {
   var _cx4, _cx5;
 
   var tabIndex = _ref4.tabIndex,
@@ -376,6 +377,7 @@ function ExpandableTile(_ref4) {
   var tileContent = useRef(null);
   var tile = useRef(null);
   var prefix = usePrefix();
+  var ref = useMergedRefs([forwardRef, tile]);
 
   if (expanded !== prevExpanded) {
     setIsExpanded(expanded);
@@ -463,7 +465,7 @@ function ExpandableTile(_ref4) {
     };
   }, []);
   return interactive ? /*#__PURE__*/React__default.createElement("div", _extends({
-    ref: tile,
+    ref: ref,
     className: interactiveClassNames,
     "aria-expanded": isExpanded
   }, rest), /*#__PURE__*/React__default.createElement("div", {
@@ -483,7 +485,7 @@ function ExpandableTile(_ref4) {
     className: "".concat(prefix, "--tile-content")
   }, childrenAsArray[1]))) : /*#__PURE__*/React__default.createElement("button", _extends({
     type: "button",
-    ref: tile,
+    ref: ref,
     className: classNames,
     "aria-expanded": isExpanded,
     title: isExpanded ? tileExpandedIconText : tileCollapsedIconText
@@ -502,7 +504,7 @@ function ExpandableTile(_ref4) {
     ref: belowTheFold,
     className: "".concat(prefix, "--tile-content")
   }, childrenAsArray[1])));
-}
+});
 ExpandableTile.propTypes = {
   /**
    * The child nodes.

package/es/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/es/components/Toggle/Toggle.Skeleton.js

@@ -50,7 +50,7 @@ var ToggleSkeleton = /*#__PURE__*/function (_React$Component) {
         }), /*#__PURE__*/React__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.createElement("div", null, labelText)) : null, /*#__PURE__*/React__default.createElement("span", {
           className: "".concat(prefix, "--toggle__switch")
         }, /*#__PURE__*/React__default.createElement("span", {

package/es/components/ToggleSmall/ToggleSmall.Skeleton.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { inherits as _inherits, createSuper as _createSuper, createClass as _createClass, defineProperty as _defineProperty, classCallCheck as _classCallCheck, objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, createClass as _createClass, objectWithoutProperties as _objectWithoutProperties, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React__default from 'react';
 import cx from 'classnames';

package/es/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/es/components/UIShell/HeaderMenu.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { inherits as _inherits, createSuper as _createSuper, createClass as _createClass, defineProperty as _defineProperty, objectSpread2 as _objectSpread2, extends as _extends, classCallCheck as _classCallCheck, assertThisInitialized as _assertThisInitialized, objectWithoutProperties as _objectWithoutProperties } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, defineProperty as _defineProperty, assertThisInitialized as _assertThisInitialized, createClass as _createClass, objectWithoutProperties as _objectWithoutProperties, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { ChevronDown } from '@carbon/icons-react';
 import cx from 'classnames';
 import React__default from 'react';

package/es/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';

package/es/index.js

@@ -10,6 +10,7 @@ export { default as Checkbox } from './components/Checkbox/Checkbox.js';
 export { default as CheckboxSkeleton } from './components/Checkbox/Checkbox.Skeleton.js';
 export { ClassPrefix } from './components/ClassPrefix/index.js';
 export { default as ContentSwitcher } from './components/ContentSwitcher/index.js';
+import './components/DataTable/index.js';
 export { default as Dropdown } from './components/Dropdown/Dropdown.js';
 export { default as DropdownSkeleton } from './components/Dropdown/Dropdown.Skeleton.js';
 export { default as FluidForm } from './components/FluidForm/FluidForm.js';
@@ -60,6 +61,7 @@ export { default as AccordionSkeleton } from './components/Accordion/Accordion.S
 export { default as Accordion } from './components/Accordion/Accordion.js';
 export { default as AspectRatio } from './components/AspectRatio/AspectRatio.js';
 export { default as BreadcrumbSkeleton } from './components/Breadcrumb/Breadcrumb.Skeleton.js';
+export { default as CheckboxGroup } from './components/CheckboxGroup/CheckboxGroup.js';
 export { default as CodeSnippetSkeleton } from './components/CodeSnippet/CodeSnippet.Skeleton.js';
 export { default as CodeSnippet } from './components/CodeSnippet/CodeSnippet.js';
 export { default as ContainedListItem } from './components/ContainedList/ContainedListItem/ContainedListItem.js';
@@ -122,7 +124,7 @@ export { ModalFooter } from './components/ComposedModal/ModalFooter.js';
 export { ModalHeader } from './components/ComposedModal/ModalHeader.js';
 export { default as DangerButton } from './components/DangerButton/DangerButton.js';
 export { default as DataTable } from './components/DataTable/DataTable.js';
-export { default as Table } from './components/DataTable/Table.js';
+export { Table } from './components/DataTable/Table.js';
 export { default as TableActionList } from './components/DataTable/TableActionList.js';
 export { default as TableBatchAction } from './components/DataTable/TableBatchAction.js';
 export { default as TableBatchActions } from './components/DataTable/TableBatchActions.js';
@@ -176,6 +178,7 @@ export { default as Select } from './components/Select/Select.js';
 export { default as SelectItem } from './components/SelectItem/SelectItem.js';
 export { default as SelectItemGroup } from './components/SelectItemGroup/SelectItemGroup.js';
 export { default as Switch } from './components/Switch/Switch.js';
+export { default as IconSwitch } from './components/Switch/IconSwitch.js';
 export { default as SliderSkeleton } from './components/Slider/Slider.Skeleton.js';
 export { default as StructuredListSkeleton } from './components/StructuredList/StructuredList.Skeleton.js';
 export { StructuredListBody, StructuredListCell, StructuredListHead, StructuredListInput, StructuredListRow, StructuredListWrapper } from './components/StructuredList/StructuredList.js';