@carbon/react 1.26.0 → 1.27.0-rc.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/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';

package/lib/components/Checkbox/Checkbox.d.ts

@@ -25,6 +25,10 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
      * Specify whether the Checkbox should be disabled
      */
     disabled?: boolean;
+    /**
+     * Provide text for the form group for additional help
+     */
+    helperText?: React.ReactNode;
     /**
      * Specify whether the label should be hidden, or not
      */
@@ -33,6 +37,22 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
      * Specify whether the Checkbox is in an indeterminate state
      */
     indeterminate?: boolean;
+    /**
+     * Specify whether the Checkbox is currently invalid
+     */
+    invalid?: boolean;
+    /**
+     * Provide the text that is displayed when the Checkbox is in an invalid state
+     */
+    invalidText: React.ReactNode;
+    /**
+     * Specify whether the Checkbox is currently invalid
+     */
+    warn?: boolean;
+    /**
+     * Provide the text that is displayed when the Checkbox is in an invalid state
+     */
+    warnText: React.ReactNode;
     /**
      * Provide an optional handler that is called when the internal state of
      * Checkbox changes. This handler is called with event and state info.