@carbon/react 1.31.2 → 1.32.0-rc.0

package/es/components/Notification/Notification.js

@@ -12,6 +12,7 @@ import deprecate from '../../prop-types/deprecate.js';
 import cx from 'classnames';
 import { Close, ErrorFilled, CheckmarkFilled, WarningFilled, WarningAltFilled, InformationFilled, InformationSquareFilled } from '@carbon/icons-react';
 import Button from '../Button/Button.js';
+import '../Button/Button.Skeleton.js';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import { useNoInteractiveChildren } from '../../internal/useNoInteractiveChildren.js';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -76,9 +77,16 @@ NotificationActionButton.propTypes = {
    */
   onClick: PropTypes.func
 };
+
+/**
+ * NotificationButton
+ * ==================
+ */
+
 function NotificationButton(_ref2) {
   let {
-    ['aria-label']: ariaLabel,
+    'aria-label': ariaLabel,
+    // @ts-expect-error: deprecated prop
     ariaLabel: deprecatedAriaLabel,
     className,
     type,
@@ -144,6 +152,12 @@ NotificationButton.defaultProps = {
   type: 'button',
   renderIcon: Close
 };
+
+/**
+ * NotificationIcon
+ * ================
+ */
+
 const iconTypes = {
   error: ErrorFilled,
   success: CheckmarkFilled,
@@ -173,9 +187,16 @@ NotificationIcon.propTypes = {
   kind: PropTypes.oneOf(['error', 'success', 'warning', 'warning-alt', 'info', 'info-square']).isRequired,
   notificationType: PropTypes.oneOf(['inline', 'toast']).isRequired
 };
+
+/**
+ * ToastNotification
+ * =================
+ */
+
 function ToastNotification(_ref4) {
   let {
     ['aria-label']: ariaLabel,
+    // @ts-expect-error: deprecated prop
     ariaLabel: deprecatedAriaLabel,
     role,
     onClose,
@@ -255,7 +276,7 @@ function ToastNotification(_ref4) {
     onClick: handleCloseButtonClick,
     "aria-hidden": "true",
     "aria-label": deprecatedAriaLabel || ariaLabel,
-    tabIndex: "-1"
+    tabIndex: -1
   }));
 }
 ToastNotification.propTypes = {
@@ -310,7 +331,7 @@ ToastNotification.propTypes = {
    */
   statusIconDescription: PropTypes.string,
   /**
-   * Specify the sub-title
+   * Specify the subtitle
    */
   subtitle: PropTypes.string,
   /**
@@ -329,6 +350,12 @@ ToastNotification.defaultProps = {
   hideCloseButton: false,
   timeout: 0
 };
+
+/**
+ * InlineNotification
+ * ==================
+ */
+
 function InlineNotification(_ref5) {
   let {
     ['aria-label']: ariaLabel,
@@ -391,7 +418,7 @@ function InlineNotification(_ref5) {
     onClick: handleCloseButtonClick,
     "aria-hidden": "true",
     "aria-label": ariaLabel,
-    tabIndex: "-1"
+    tabIndex: -1
   }));
 }
 InlineNotification.propTypes = {
@@ -437,7 +464,7 @@ InlineNotification.propTypes = {
    */
   statusIconDescription: PropTypes.string,
   /**
-   * Specify the sub-title
+   * Specify the subtitle
    */
   subtitle: PropTypes.string,
   /**
@@ -451,10 +478,17 @@ InlineNotification.defaultProps = {
   onCloseButtonClick: () => {},
   hideCloseButton: false
 };
+
+/**
+ * ActionableNotification
+ * ======================
+ */
+
 function ActionableNotification(_ref6) {
   let {
     actionButtonLabel,
     ['aria-label']: ariaLabel,
+    // @ts-expect-error: deprecated prop
     ariaLabel: deprecatedAriaLabel,
     children,
     role,
@@ -599,7 +633,7 @@ ActionableNotification.propTypes = {
    */
   statusIconDescription: PropTypes.string,
   /**
-   * Specify the sub-title
+   * Specify the subtitle
    */
   subtitle: PropTypes.string,
   /**

package/es/components/Notification/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 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 { NotificationActionButton, type NotificationActionButtonProps, NotificationButton, type NotificationButtonProps, ToastNotification, type ToastNotificationProps, InlineNotification, type InlineNotificationProps, ActionableNotification, type ActionableNotificationProps, } from './Notification';

package/es/components/PrimaryButton/PrimaryButton.js

@@ -8,6 +8,7 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import Button from '../Button/Button.js';
+import '../Button/Button.Skeleton.js';
 
 const PrimaryButton = props => /*#__PURE__*/React__default.createElement(Button, _extends({
   kind: "primary"

package/es/components/SecondaryButton/SecondaryButton.js

@@ -8,6 +8,7 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import Button from '../Button/Button.js';
+import '../Button/Button.Skeleton.js';
 
 const SecondaryButton = props => /*#__PURE__*/React__default.createElement(Button, _extends({
   kind: "secondary"

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

@@ -85,5 +85,5 @@ interface SelectProps extends Omit<ComponentPropsWithRef<'select'>, ExcludedAttr
      */
     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" | "invalid" | "labelText" | "helperText" | "invalidText" | "hideLabel" | "warn" | "warnText" | "light" | "noLabel"> & React.RefAttributes<HTMLSelectElement>>;
+declare const Select: React.ForwardRefExoticComponent<Pick<SelectProps, "value" | "children" | "disabled" | "form" | "slot" | "style" | "title" | "className" | "size" | "dir" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "autoComplete" | "multiple" | "key" | "id" | "aria-controls" | "aria-expanded" | "onClick" | "onAnimationEnd" | "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" | "light" | "invalid" | "labelText" | "helperText" | "invalidText" | "hideLabel" | "warn" | "warnText" | "noLabel"> & React.RefAttributes<HTMLSelectElement>>;
 export default Select;

package/es/components/SkeletonText/SkeletonText.d.ts

@@ -0,0 +1,61 @@
+/**
+ * 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';
+interface SkeletonTextProps {
+    /**
+     * Specify an optional className to be applied to the container node.
+     */
+    className?: string;
+    /**
+     * Generates skeleton text at a larger size.
+     */
+    heading?: boolean;
+    /**
+     * The number of lines shown if paragraph is true.
+     */
+    lineCount?: number;
+    /**
+     * Set this to true to generate multiple lines of text.
+     */
+    paragraph?: boolean;
+    /**
+     * Width (in px or %) of single line of text or max-width of paragraph lines.
+     */
+    width?: string;
+}
+declare const SkeletonText: {
+    ({ paragraph, lineCount, width, heading, className, ...rest }: SkeletonTextProps): JSX.Element;
+    propTypes: {
+        /**
+         * Specify an optional className to be applied to the container node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * generates skeleton text at a larger size
+         */
+        heading: PropTypes.Requireable<boolean>;
+        /**
+         * the number of lines shown if paragraph is true
+         */
+        lineCount: PropTypes.Requireable<number>;
+        /**
+         * will generate multiple lines of text
+         */
+        paragraph: PropTypes.Requireable<boolean>;
+        /**
+         * width (in px or %) of single line of text or max-width of paragraph lines
+         */
+        width: PropTypes.Requireable<string>;
+    };
+    defaultProps: {
+        paragraph: boolean;
+        width: string;
+        heading: boolean;
+        lineCount: number;
+    };
+};
+export default SkeletonText;

package/es/components/SkeletonText/SkeletonText.js

@@ -18,12 +18,12 @@ function getRandomInt(min, max, n) {
 }
 const SkeletonText = _ref => {
   let {
-    paragraph,
-    lineCount,
-    width,
-    heading,
-    className,
-    ...other
+    paragraph = false,
+    lineCount = 3,
+    width = '100%',
+    heading = false,
+    className = '',
+    ...rest
   } = _ref;
   const prefix = usePrefix();
   const skeletonTextClasses = cx({
@@ -34,10 +34,8 @@ const SkeletonText = _ref => {
   const widthNum = parseInt(width, 10);
   const widthPx = width.includes('px');
   const widthPercent = width.includes('%');
-  let lineCountNumber;
-  if (!paragraph) {
-    lineCountNumber = '1';
-  } else {
+  let lineCountNumber = 1;
+  if (paragraph) {
     lineCountNumber = lineCount;
   }
   const refs = useRef([]);
@@ -57,18 +55,19 @@ const SkeletonText = _ref => {
     });
   }, [lineCountNumber, paragraph, refs, width, widthNum, widthPercent, widthPx]);
   const lines = [];
-  for (var i = 0; i < lineCountNumber; i++) {
+  for (let i = 0; i < lineCountNumber; i++) {
     lines.push( /*#__PURE__*/React__default.createElement("p", _extends({
       className: skeletonTextClasses,
       key: i,
       ref: el => refs.current = [...refs.current, el]
-    }, other)));
+    }, rest)));
   }
-  if (lineCountNumber !== '1') {
+  if (lineCountNumber !== 1) {
     return /*#__PURE__*/React__default.createElement("div", null, lines);
-  } else {
-    return lines;
   }
+
+  // eslint-disable-next-line react/jsx-no-useless-fragment
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, lines);
 };
 SkeletonText.propTypes = {
   /**
@@ -98,6 +97,5 @@ SkeletonText.defaultProps = {
   heading: false,
   lineCount: 3
 };
-var SkeletonText$1 = SkeletonText;
 
-export { SkeletonText$1 as default };
+export { SkeletonText as default };

package/es/components/SkeletonText/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.
+ */
+import SkeletonText from './SkeletonText';
+export default SkeletonText;
+export { SkeletonText };

package/es/components/Switch/Switch.d.ts

@@ -0,0 +1,56 @@
+/**
+ * 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, { ButtonHTMLAttributes, ReactNode } from 'react';
+interface SwitchEventHandlersParams {
+    index?: number;
+    name?: string | number;
+    text?: string;
+    key?: string | number;
+}
+export interface SwitchProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'name' | 'onClick' | 'onKeyDown'> {
+    /**
+     * Provide child elements to be rendered inside of the Switch
+     */
+    children?: ReactNode;
+    /**
+     * Specify an optional className to be added to your Switch
+     */
+    className?: string;
+    /**
+     * Specify whether or not the Switch should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * The index of your Switch in your ContentSwitcher that is used for event handlers.
+     * Reserved for usage in ContentSwitcher
+     */
+    index?: number;
+    /**
+     * Provide the name of your Switch that is used for event handlers
+     */
+    name?: string | number;
+    /**
+     * A handler that is invoked when a user clicks on the control.
+     * Reserved for usage in ContentSwitcher
+     */
+    onClick?: (params: SwitchEventHandlersParams) => void;
+    /**
+     * A handler that is invoked on the key down event for the control.
+     * Reserved for usage in ContentSwitcher
+     */
+    onKeyDown?: (params: SwitchEventHandlersParams) => void;
+    /**
+     * Whether your Switch is selected. Reserved for usage in ContentSwitcher
+     */
+    selected?: boolean;
+    /**
+     * Provide the contents of your Switch
+     */
+    text?: string;
+}
+declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
+export default Switch;

package/es/components/Switch/Switch.js

@@ -20,14 +20,14 @@ const Switch = /*#__PURE__*/React__default.forwardRef(function Switch(props, tab
     name,
     onClick,
     onKeyDown,
-    selected,
+    selected = false,
     text,
     ...other
   } = props;
   const prefix = usePrefix();
   const handleClick = e => {
     e.preventDefault();
-    onClick({
+    onClick?.({
       index,
       name,
       text
@@ -35,7 +35,7 @@ const Switch = /*#__PURE__*/React__default.forwardRef(function Switch(props, tab
   };
   const handleKeyDown = event => {
     const key = event.key || event.which;
-    onKeyDown({
+    onKeyDown?.({
       index,
       name,
       text,
@@ -55,7 +55,7 @@ const Switch = /*#__PURE__*/React__default.forwardRef(function Switch(props, tab
     type: "button",
     ref: tabRef,
     role: "tab",
-    tabIndex: selected ? '0' : '-1',
+    tabIndex: selected ? 0 : -1,
     "aria-selected": selected
   }, other, commonProps), /*#__PURE__*/React__default.createElement("span", {
     className: `${prefix}--content-switcher__label`,

package/es/components/Tab/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.
+ */
+import { Tab } from '../Tabs/Tabs';
+export default Tab;
+export { Tab };

package/es/components/TabContent/TabContent.d.ts

@@ -0,0 +1,40 @@
+/**
+ * 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 { type HTMLAttributes, type ReactNode } from 'react';
+export interface TabContentProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Pass in content to render inside the TabContent
+     */
+    children?: ReactNode;
+    /**
+     * Provide a className for the tab content container
+     */
+    className?: string;
+    /**
+     * Specify whether the TabContent is selected
+     */
+    selected?: boolean;
+}
+declare function TabContent(props: any): JSX.Element;
+declare namespace TabContent {
+    var propTypes: {
+        /**
+         * Pass in content to render inside the TabContent
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide a className for the tab content container
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify whether the TabContent is selected
+         */
+        selected: PropTypes.Requireable<boolean>;
+    };
+}
+export default TabContent;

package/es/components/TabContent/TabContent.js

@@ -22,12 +22,12 @@ function useTabbableContent(ref) {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   useIsomorphicEffect(() => {
     if (ref.current) {
-      setHasTabbableContent(ref.current.querySelector(selectorTabbable));
+      setHasTabbableContent(!!ref.current.querySelector(selectorTabbable));
     }
   });
   return hasTabbableContent;
 }
-const TabContent = props => {
+function TabContent(props) {
   const {
     className,
     selected,
@@ -35,9 +35,7 @@ const TabContent = props => {
     ...other
   } = props;
   const prefix = usePrefix();
-  const tabContentClasses = cx(`${prefix}--tab-content`, {
-    [className]: className
-  });
+  const tabContentClasses = cx(`${prefix}--tab-content`, className);
   const ref = useRef(null);
   const hasTabbableContent = useTabbableContent(ref);
   return /*#__PURE__*/React__default.createElement("div", _extends({
@@ -49,10 +47,10 @@ const TabContent = props => {
     ref: ref,
     tabIndex: hasTabbableContent ? undefined : 0
   }), children);
-};
+}
 TabContent.propTypes = {
   /**
-   * Pass in content to render inside of the TabContent
+   * Pass in content to render inside the TabContent
    */
   children: PropTypes.node,
   /**
@@ -64,9 +62,5 @@ TabContent.propTypes = {
    */
   selected: PropTypes.bool
 };
-TabContent.defaultProps = {
-  selected: false
-};
-var TabContent$1 = TabContent;
 
-export { TabContent$1 as default };
+export { TabContent as default };

package/es/components/TabContent/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 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 { type TabContentProps } from './TabContent';
+import TabContent from './TabContent';
+export default TabContent;
+export { TabContent };

package/es/components/Tabs/Tabs.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 { type HTMLAttributes } from 'react';
+export interface TabsSkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Specify an optional className to add.
+     */
+    className?: string;
+    /**
+     * Provide the type of Tab
+     */
+    contained?: boolean;
+}
+declare function TabsSkeleton({ className, contained, ...rest }: TabsSkeletonProps): JSX.Element;
+declare namespace TabsSkeleton {
+    var propTypes: {
+        /**
+         * Specify an optional className to add.
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Provide the type of Tab
+         */
+        contained: PropTypes.Requireable<boolean>;
+    };
+}
+export default TabsSkeleton;
+export { TabsSkeleton };

package/es/components/Tabs/Tabs.Skeleton.js

@@ -11,7 +11,7 @@ import React__default from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-var _span;
+var _span, _Tab, _Tab2, _Tab3, _Tab4, _Tab5;
 function Tab() {
   const prefix = usePrefix();
   return /*#__PURE__*/React__default.createElement("li", {
@@ -34,7 +34,7 @@ function TabsSkeleton(_ref) {
     className: tabClasses
   }, rest), /*#__PURE__*/React__default.createElement("ul", {
     className: `${prefix}--tabs__nav`
-  }, Tab(), Tab(), Tab(), Tab(), Tab()));
+  }, _Tab || (_Tab = /*#__PURE__*/React__default.createElement(Tab, null)), _Tab2 || (_Tab2 = /*#__PURE__*/React__default.createElement(Tab, null)), _Tab3 || (_Tab3 = /*#__PURE__*/React__default.createElement(Tab, null)), _Tab4 || (_Tab4 = /*#__PURE__*/React__default.createElement(Tab, null)), _Tab5 || (_Tab5 = /*#__PURE__*/React__default.createElement(Tab, null))));
 }
 TabsSkeleton.propTypes = {
   /**