@carbon/react 1.31.3 → 1.32.0

package/lib/components/ComposedModal/ComposedModal.d.ts

@@ -0,0 +1,70 @@
+import React, { type MouseEvent, type KeyboardEvent, type HTMLAttributes, type ReactNode } from 'react';
+export interface ModalBodyProps extends HTMLAttributes<HTMLDivElement> {
+    /** Specify the content to be placed in the ModalBody. */
+    children?: ReactNode;
+    /**
+     * Provide whether the modal content has a form element.
+     * If `true` is used here, non-form child content should have `bx--modal-content__regular-content` class.
+     */
+    hasForm?: boolean;
+    /**
+     * Specify whether the modal contains scrolling content
+     */
+    hasScrollingContent?: boolean;
+}
+export declare const ModalBody: React.ForwardRefExoticComponent<ModalBodyProps & React.RefAttributes<HTMLDivElement>>;
+export interface ComposedModalProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Specify the aria-label for bx--modal-container
+     */
+    'aria-label'?: string;
+    /**
+     * Specify the aria-labelledby for bx--modal-container
+     */
+    'aria-labelledby'?: string;
+    /**
+     * Specify the content to be placed in the ComposedModal
+     */
+    children?: ReactNode;
+    /**
+     * Specify an optional className to be applied to the modal root node
+     */
+    className?: string;
+    /**
+     * Specify an optional className to be applied to the modal node
+     */
+    containerClassName?: string;
+    /**
+     * Specify whether the primary button should be replaced with danger button.
+     * Note that this prop is not applied if you render primary/danger button by yourself
+     */
+    danger?: boolean;
+    /**
+     * Specify whether the Modal content should have any inner padding.
+     */
+    isFullWidth?: boolean;
+    /**
+     * Specify an optional handler for closing modal.
+     * Returning `false` here prevents closing modal.
+     */
+    onClose?(event: MouseEvent): void | boolean;
+    /**
+     * Called for all `onKeyDown` events that do not close the modal
+     */
+    onKeyDown?(evt: KeyboardEvent): void;
+    /**
+     * Specify whether the Modal is currently open
+     */
+    open?: boolean;
+    preventCloseOnClickOutside?: boolean;
+    /**
+     * Specify a CSS selector that matches the DOM element that should be
+     * focused when the Modal opens
+     */
+    selectorPrimaryFocus?: string;
+    /** Specify the CSS selectors that match the floating menus. */
+    selectorsFloatingMenus?: Array<string | null | undefined>;
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+}
+declare const ComposedModal: React.ForwardRefExoticComponent<ComposedModalProps & React.RefAttributes<HTMLDivElement>>;
+export default ComposedModal;

package/lib/components/ComposedModal/ComposedModal.js

@@ -11,6 +11,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
+var reactIs = require('react-is');
 var PropTypes = require('prop-types');
 var ModalHeader = require('./ModalHeader.js');
 var ModalFooter = require('./ModalFooter.js');
@@ -19,6 +20,8 @@ var toggleClass = require('../../tools/toggleClass.js');
 var requiredIfGivenPropIsTruthy = require('../../prop-types/requiredIfGivenPropIsTruthy.js');
 var wrapFocus = require('../../internal/wrapFocus.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var match = require('../../internal/keyboard/match.js');
+var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -35,12 +38,7 @@ const ModalBody = /*#__PURE__*/React__default["default"].forwardRef(function Mod
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
-  const contentClass = cx__default["default"]({
-    [`${prefix}--modal-content`]: true,
-    [`${prefix}--modal-content--with-form`]: hasForm,
-    [`${prefix}--modal-scroll-content`]: hasScrollingContent,
-    [customClassName]: customClassName
-  });
+  const contentClass = cx__default["default"](`${prefix}--modal-content`, hasForm && `${prefix}--modal-content--with-form`, hasScrollingContent && `${prefix}--modal-scroll-content`, customClassName);
   const hasScrollingContentProps = hasScrollingContent ? {
     tabIndex: 0,
     role: 'region'
@@ -57,6 +55,7 @@ ModalBody.propTypes = {
   /**
    * Required props for the accessibility label of the header
    */
+  // @ts-expect-error: Built-in prop-types > TS logic doesn't jive well with custom validators
   ['aria-label']: requiredIfGivenPropIsTruthy["default"]('hasScrollingContent', PropTypes__default["default"].string),
   /**
    * Specify the content to be placed in the ModalBody
@@ -95,28 +94,38 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
     ...rest
   } = _ref2;
   const prefix = usePrefix.usePrefix();
-  const [isOpen, setisOpen] = React.useState(open);
-  const [prevOpen, setPrevOpen] = React.useState(open);
-  const innerModal = React.useRef();
-  const button = React.useRef();
-  const startSentinel = React.useRef();
-  const endSentinel = React.useRef();
-  if (open !== prevOpen) {
-    setisOpen(open);
-    setPrevOpen(open);
-  }
+  const [isOpen, setIsOpen] = React.useState(!!open);
+  const [wasOpen, setWasOpen] = React.useState(!!open);
+  const innerModal = React.useRef(null);
+  const button = React.useRef(null);
+  const startSentinel = React.useRef(null);
+  const endSentinel = React.useRef(null);
+
+  // Kepp track of modal open/close state
+  // and propagate it to the document.body
+  React.useEffect(() => {
+    if (open !== wasOpen) {
+      setIsOpen(!!open);
+      setWasOpen(!!open);
+      toggleClass["default"](document.body, `${prefix}--body--with-modal-open`, !!open);
+    }
+  }, [open, wasOpen, prefix]);
+  // Remove the document.body className on unmount
+  React.useEffect(() => {
+    return () => {
+      toggleClass["default"](document.body, `${prefix}--body--with-modal-open`, false);
+    };
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
   function handleKeyDown(evt) {
-    // Esc key
-    if (evt.which === 27) {
+    if (match.match(evt, keys.Escape)) {
       closeModal(evt);
     }
-    onKeyDown(evt);
+    onKeyDown?.(evt);
   }
   function handleMousedown(evt) {
-    if (!innerModal.current.contains(evt.target) && preventCloseOnClickOutside) {
-      return;
-    }
-    if (innerModal.current && !innerModal.current.contains(evt.target)) {
+    const isInside = innerModal.current?.contains(evt.target);
+    if (!isInside && !preventCloseOnClickOutside) {
       closeModal(evt);
     }
   }
@@ -125,7 +134,7 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
       target: oldActiveNode,
       relatedTarget: currentActiveNode
     } = _ref3;
-    if (open && currentActiveNode && oldActiveNode) {
+    if (open && currentActiveNode && oldActiveNode && innerModal.current) {
       const {
         current: bodyNode
       } = innerModal;
@@ -137,62 +146,46 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
       } = endSentinel;
       wrapFocus["default"]({
         bodyNode,
-        startSentinelNode,
-        endSentinelNode,
+        startTrapNode: startSentinelNode,
+        endTrapNode: endSentinelNode,
         currentActiveNode,
         oldActiveNode,
-        selectorsFloatingMenus
+        selectorsFloatingMenus: selectorsFloatingMenus?.filter(Boolean)
       });
     }
   }
   function closeModal(evt) {
     if (!onClose || onClose(evt) !== false) {
-      setisOpen(false);
+      setIsOpen(false);
     }
   }
-  const modalClass = cx__default["default"]({
-    [`${prefix}--modal`]: true,
-    'is-visible': isOpen,
-    [customClassName]: customClassName,
-    [`${prefix}--modal--danger`]: danger
-  });
-  const containerClass = cx__default["default"]({
-    [`${prefix}--modal-container`]: true,
-    [`${prefix}--modal-container--${size}`]: size,
-    [`${prefix}--modal-container--full-width`]: isFullWidth,
-    [containerClassName]: containerClassName
-  });
+  const modalClass = cx__default["default"](`${prefix}--modal`, isOpen && 'is-visible', danger && `${prefix}--modal--danger`, customClassName);
+  const containerClass = cx__default["default"](`${prefix}--modal-container`, size && `${prefix}--modal-container--${size}`, isFullWidth && `${prefix}--modal-container--full-width`, containerClassName);
 
   // Generate aria-label based on Modal Header label if one is not provided (L253)
   let generatedAriaLabel;
   const childrenWithProps = React__default["default"].Children.toArray(children).map(child => {
-    switch (child.type) {
-      case React__default["default"].createElement(ModalHeader.ModalHeader).type:
-        generatedAriaLabel = child.props.label;
-        return /*#__PURE__*/React__default["default"].cloneElement(child, {
-          closeModal: closeModal
-        });
-      case React__default["default"].createElement(ModalFooter.ModalFooter).type:
-        return /*#__PURE__*/React__default["default"].cloneElement(child, {
-          closeModal: closeModal,
-          inputref: button
-        });
+    switch (true) {
+      case reactIs.isElement(child) && child.type === React__default["default"].createElement(ModalHeader.ModalHeader).type:
+        {
+          const el = child;
+          generatedAriaLabel = el.props.label;
+          return /*#__PURE__*/React__default["default"].cloneElement(el, {
+            closeModal
+          });
+        }
+      case reactIs.isElement(child) && child.type === React__default["default"].createElement(ModalFooter.ModalFooter).type:
+        {
+          const el = child;
+          return /*#__PURE__*/React__default["default"].cloneElement(el, {
+            closeModal,
+            inputref: button
+          });
+        }
       default:
         return child;
     }
   });
-  React.useEffect(() => {
-    if (prevOpen !== isOpen) {
-      toggleClass["default"](document.body, `${prefix}--body--with-modal-open`, isOpen);
-    }
-  });
-  React.useEffect(() => {
-    return () => toggleClass["default"](document.body, `${prefix}--body--with-modal-open`, false);
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
-  React.useEffect(() => {
-    toggleClass["default"](document.body, `${prefix}--body--with-modal-open`, open);
-  }, [open, prefix]);
   React.useEffect(() => {
     const focusButton = focusContainerElement => {
       if (focusContainerElement) {
@@ -267,7 +260,7 @@ ComposedModal.propTypes = {
    */
   danger: PropTypes__default["default"].bool,
   /**
-   * Specify whether or not the Modal content should have any inner padding.
+   * Specify whether the Modal content should have any inner padding.
    */
   isFullWidth: PropTypes__default["default"].bool,
   /**
@@ -300,10 +293,8 @@ ComposedModal.propTypes = {
   size: PropTypes__default["default"].oneOf(['xs', 'sm', 'md', 'lg'])
 };
 ComposedModal.defaultProps = {
-  onKeyDown: () => {},
   selectorPrimaryFocus: '[data-modal-primary-focus]'
 };
-var ComposedModal$1 = ComposedModal;
 
 exports.ModalBody = ModalBody;
-exports["default"] = ComposedModal$1;
+exports["default"] = ComposedModal;

package/lib/components/ComposedModal/ModalFooter.d.ts

@@ -0,0 +1,71 @@
+import React, { type ReactNode, type MouseEvent, type Ref } from 'react';
+interface SecondaryButtonProps {
+    buttonText: ReactNode;
+    onClick(evt: MouseEvent): void;
+}
+export interface SecondaryButtonSetProps {
+    closeModal(evt: MouseEvent): void;
+    onRequestClose(evt: MouseEvent): void;
+    secondaryButtonText?: string;
+    secondaryButtons?: [SecondaryButtonProps, SecondaryButtonProps];
+    secondaryClassName?: string;
+}
+export interface ModalFooterProps {
+    /**
+     * Pass in content that will be rendered in the Modal Footer
+     */
+    children: ReactNode;
+    /**
+     * Specify a custom className to be applied to the Modal Footer container
+     */
+    className?: string;
+    /**
+     * Specify an optional function that is called whenever the modal is closed
+     */
+    closeModal?(evt: MouseEvent): void;
+    /**
+     * Specify whether the primary button should be replaced with danger button.
+     * Note that this prop is not applied if you render primary/danger button by yourself
+     */
+    danger?: boolean;
+    /**
+     * The `ref` callback for the primary button.
+     */
+    inputref?: Ref<HTMLButtonElement>;
+    /**
+     * Specify an optional function for when the modal is requesting to be
+     * closed
+     */
+    onRequestClose?(): void;
+    /**
+     * Specify an optional function for when the modal is requesting to be
+     * submitted
+     */
+    onRequestSubmit?(): void;
+    /**
+     * Specify whether the primary button should be disabled
+     */
+    primaryButtonDisabled?: boolean;
+    /**
+     * Specify the text for the primary button
+     */
+    primaryButtonText?: string;
+    /**
+     * Specify a custom className to be applied to the primary button
+     */
+    primaryClassName?: string;
+    /**
+     * Specify the text for the secondary button
+     */
+    secondaryButtonText?: string;
+    /**
+     * Specify an array of config objects for secondary buttons
+     */
+    secondaryButtons?: [SecondaryButtonProps, SecondaryButtonProps];
+    /**
+     * Specify a custom className to be applied to the secondary button
+     */
+    secondaryClassName?: string;
+}
+export declare const ModalFooter: React.ForwardRefExoticComponent<ModalFooterProps & React.RefAttributes<HTMLElement>>;
+export {};

package/lib/components/ComposedModal/ModalFooter.js

@@ -13,6 +13,7 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var React = require('react');
 var PropTypes = require('prop-types');
 var Button = require('../Button/Button.js');
+require('../Button/Button.Skeleton.js');
 var ButtonSet = require('../ButtonSet/ButtonSet.js');
 var cx = require('classnames');
 var usePrefix = require('../../internal/usePrefix.js');
@@ -97,11 +98,7 @@ const ModalFooter = /*#__PURE__*/React__default["default"].forwardRef(function M
     ...rest
   } = _ref3;
   const prefix = usePrefix.usePrefix();
-  const footerClass = cx__default["default"]({
-    [`${prefix}--modal-footer`]: true,
-    [customClassName]: customClassName,
-    [`${prefix}--modal-footer--three-button`]: Array.isArray(secondaryButtons) && secondaryButtons.length === 2
-  });
+  const footerClass = cx__default["default"](`${prefix}--modal-footer`, customClassName, Array.isArray(secondaryButtons) && secondaryButtons.length === 2 ? `${prefix}--modal-footer--three-button` : null);
   const secondaryButtonProps = {
     closeModal,
     secondaryButtons,
@@ -109,17 +106,21 @@ const ModalFooter = /*#__PURE__*/React__default["default"].forwardRef(function M
     secondaryClassName,
     onRequestClose
   };
-  return /*#__PURE__*/React__default["default"].createElement(ButtonSet["default"], _rollupPluginBabelHelpers["extends"]({
-    className: footerClass
-  }, rest, {
-    ref: ref
-  }), /*#__PURE__*/React__default["default"].createElement(SecondaryButtonSet, secondaryButtonProps), primaryButtonText && /*#__PURE__*/React__default["default"].createElement(Button["default"], {
-    onClick: onRequestSubmit,
-    className: primaryClassName,
-    disabled: primaryButtonDisabled,
-    kind: danger ? 'danger' : 'primary',
-    ref: inputref
-  }, primaryButtonText), children);
+  return (
+    /*#__PURE__*/
+    // @ts-expect-error: Invalid derived types, will be fine once explicit types are added
+    React__default["default"].createElement(ButtonSet["default"], _rollupPluginBabelHelpers["extends"]({
+      className: footerClass
+    }, rest, {
+      ref: ref
+    }), /*#__PURE__*/React__default["default"].createElement(SecondaryButtonSet, secondaryButtonProps), primaryButtonText && /*#__PURE__*/React__default["default"].createElement(Button["default"], {
+      onClick: onRequestSubmit,
+      className: primaryClassName,
+      disabled: primaryButtonDisabled,
+      kind: danger ? 'danger' : 'primary',
+      ref: inputref
+    }, primaryButtonText), children)
+  );
 });
 ModalFooter.propTypes = {
   /**
@@ -142,6 +143,7 @@ ModalFooter.propTypes = {
   /**
    * The `ref` callback for the primary button.
    */
+  // @ts-expect-error: Invalid derived type
   inputref: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].shape({
     current: PropTypes__default["default"].any
   })]),
@@ -198,10 +200,11 @@ ModalFooter.propTypes = {
    */
   secondaryClassName: PropTypes__default["default"].string
 };
+const noop = () => {};
 ModalFooter.defaultProps = {
-  onRequestClose: () => {},
-  onRequestSubmit: () => {},
-  closeModal: () => {}
+  onRequestClose: noop,
+  onRequestSubmit: noop,
+  closeModal: noop
 };
 
 exports.ModalFooter = ModalFooter;

package/lib/components/ComposedModal/ModalHeader.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 React, { type ReactNode, type MouseEvent, type HTMLAttributes } from 'react';
+type DivProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'>;
+export interface ModalHeaderProps extends DivProps {
+    /**
+     * Provide an optional function to be called when the close button is
+     * clicked
+     */
+    buttonOnClick?(event: MouseEvent): void;
+    /**
+     * Specify the content to be placed in the ModalHeader
+     */
+    children?: ReactNode;
+    /**
+     * Specify an optional className to be applied to the modal header
+     */
+    className?: string;
+    /**
+     * Specify an optional className to be applied to the modal close node
+     */
+    closeClassName?: string;
+    /**
+     * Specify an optional className to be applied to the modal close icon node
+     */
+    closeIconClassName?: string;
+    /**
+     * Provide an optional function to be called when the modal is closed
+     */
+    closeModal?(event: MouseEvent): void;
+    /**
+     * Specify a description for the close icon that can be read by screen
+     * readers
+     */
+    iconDescription?: string;
+    /**
+     * Specify an optional label to be displayed
+     */
+    label?: ReactNode;
+    /**
+     * Specify an optional className to be applied to the modal header label
+     */
+    labelClassName?: string;
+    /**
+     * Specify an optional title to be displayed
+     */
+    title?: ReactNode;
+    /**
+     * Specify an optional className to be applied to the modal heading
+     */
+    titleClassName?: string;
+}
+export declare const ModalHeader: React.ForwardRefExoticComponent<ModalHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/ComposedModal/ModalHeader.js

@@ -39,29 +39,14 @@ const ModalHeader = /*#__PURE__*/React__default["default"].forwardRef(function M
   } = _ref;
   const prefix = usePrefix.usePrefix();
   function handleCloseButtonClick(evt) {
-    closeModal(evt);
-    buttonOnClick();
+    closeModal?.(evt);
+    buttonOnClick?.(evt);
   }
-  const headerClass = cx__default["default"]({
-    [`${prefix}--modal-header`]: true,
-    [customClassName]: customClassName
-  });
-  const labelClass = cx__default["default"]({
-    [`${prefix}--modal-header__label ${prefix}--type-delta`]: true,
-    [labelClassName]: labelClassName
-  });
-  const titleClass = cx__default["default"]({
-    [`${prefix}--modal-header__heading ${prefix}--type-beta`]: true,
-    [titleClassName]: titleClassName
-  });
-  const closeClass = cx__default["default"]({
-    [`${prefix}--modal-close`]: true,
-    [closeClassName]: closeClassName
-  });
-  const closeIconClass = cx__default["default"]({
-    [`${prefix}--modal-close__icon`]: true,
-    [closeIconClassName]: closeIconClassName
-  });
+  const headerClass = cx__default["default"](`${prefix}--modal-header`, customClassName);
+  const labelClass = cx__default["default"](`${prefix}--modal-header__label ${prefix}--type-delta`, labelClassName);
+  const titleClass = cx__default["default"](`${prefix}--modal-header__heading ${prefix}--type-beta`, titleClassName);
+  const closeClass = cx__default["default"](`${prefix}--modal-close`, closeClassName);
+  const closeIconClass = cx__default["default"](`${prefix}--modal-close__icon`, closeIconClassName);
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: headerClass
   }, rest, {
@@ -130,9 +115,7 @@ ModalHeader.propTypes = {
   titleClassName: PropTypes__default["default"].string
 };
 ModalHeader.defaultProps = {
-  iconDescription: 'Close',
-  buttonOnClick: () => {},
-  closeModal: () => {}
+  iconDescription: 'Close'
 };
 
 exports.ModalHeader = ModalHeader;

package/lib/components/ComposedModal/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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.
+ */
+export { default as ComposedModal, type ComposedModalProps, ModalBody, type ModalBodyProps, } from './ComposedModal';
+export { ModalHeader, type ModalHeaderProps } from './ModalHeader';
+export { ModalFooter, type ModalFooterProps } from './ModalFooter';

package/lib/components/ContainedList/ContainedList.js

@@ -80,7 +80,18 @@ function ContainedList(_ref) {
       max: 'xl'
     },
     className: `${prefix}--contained-list__action`
-  }, action)), children && /*#__PURE__*/React__default["default"].createElement("ul", {
+  }, action)), children &&
+  /*#__PURE__*/
+  /**
+   * Webkit removes implicit "list" semantics when "list-style-type: none" is set.
+   * Explicitly setting the "list" role ensures assistive technology in webkit
+   * browsers correctly announce the semantics.
+   *
+   * Ref https://bugs.webkit.org/show_bug.cgi?id=170179#c1
+   */
+  // eslint-disable-next-line jsx-a11y/no-redundant-roles
+  React__default["default"].createElement("ul", {
+    role: "list",
     "aria-labelledby": labelId
   }, isActionSearch ? filteredChildren : renderedChildren));
 }

package/lib/components/ContentSwitcher/ContentSwitcher.d.ts

@@ -0,0 +1,109 @@
+/**
+ * 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, { HTMLAttributes, ReactElement } from 'react';
+interface SwitchEventHandlersParams {
+    index?: number;
+    name?: string | number;
+    text?: string;
+    key?: string | number;
+}
+export interface ContentSwitcherProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {
+    /**
+     * Pass in Switch components to be rendered in the ContentSwitcher
+     */
+    children?: ReactElement[];
+    /**
+     * Specify an optional className to be added to the container node
+     */
+    className?: string;
+    /**
+     * `true` to use the light version.
+     *
+     * @deprecated The `light` prop for `ContentSwitcher` has
+     *     been deprecated in favor of the new `Layer` component. It will be removed in the next major release.
+     */
+    light?: boolean;
+    /**
+     * Specify an `onChange` handler that is called whenever the ContentSwitcher
+     * changes which item is selected
+     */
+    onChange: (params: SwitchEventHandlersParams) => void;
+    /**
+     * Specify a selected index for the initially selected content
+     */
+    selectedIndex: number;
+    /**
+     * Choose whether or not to automatically change selection on focus
+     */
+    selectionMode: 'automatic' | 'manual';
+    /**
+     * Specify the size of the Content Switcher. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
+     */
+    size: 'sm' | 'md' | 'lg';
+}
+interface ContentSwitcherState {
+    selectedIndex?: number;
+}
+export default class ContentSwitcher extends React.Component<ContentSwitcherProps, ContentSwitcherState> {
+    /**
+     * The DOM references of child `<Switch>`.
+     * @type {Array<Element>}
+     * @private
+     */
+    _switchRefs: HTMLButtonElement[];
+    state: {
+        selectedIndex: undefined;
+    };
+    static propTypes: {
+        /**
+         * Pass in Switch components to be rendered in the ContentSwitcher
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify an optional className to be added to the container node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * `true` to use the light variant.
+         */
+        light: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+        /**
+         * Specify an `onChange` handler that is called whenever the ContentSwitcher
+         * changes which item is selected
+         */
+        onChange: PropTypes.Validator<(...args: any[]) => any>;
+        /**
+         * Specify a selected index for the initially selected content
+         */
+        selectedIndex: PropTypes.Requireable<number>;
+        /**
+         * Choose whether or not to automatically change selection on focus
+         */
+        selectionMode: PropTypes.Requireable<string>;
+        /**
+         * Specify the size of the Content Switcher. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
+         */
+        size: PropTypes.Requireable<string>;
+    };
+    static contextType: React.Context<string>;
+    static defaultProps: {
+        selectedIndex: number;
+        selectionMode: string;
+        onChange: () => void;
+    };
+    static getDerivedStateFromProps({ selectedIndex }: {
+        selectedIndex: any;
+    }, state: any): {
+        selectedIndex: any;
+        prevSelectedIndex: any;
+    } | null;
+    handleItemRef: (index: any) => (ref: any) => void;
+    handleChildChange: (data: any) => void;
+    render(): JSX.Element;
+}
+export {};