@carbon/react 1.25.0 → 1.26.0

package/es/components/TextInput/PasswordInput.d.ts

@@ -0,0 +1,125 @@
+import React, { InputHTMLAttributes } from 'react';
+import { ReactNodeLike } from 'prop-types';
+type ExcludedAttributes = 'size';
+export interface PasswordInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
+    /**
+     * Provide a custom className that is applied directly to the underlyling `<input>` node
+     */
+    className?: string;
+    /**
+     * Optionally provide the default value of the `<input>`
+     */
+    defaultValue?: string | number;
+    /**
+     * Specify whether the control is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specify whether to display the character counter
+     */
+    enableCounter?: boolean;
+    /**
+     * Provide text that is used alongside the control label for additional help
+     */
+    helperText?: ReactNodeLike;
+    /**
+     * Specify whether or not the underlying label is visually hidden
+     */
+    hideLabel?: boolean;
+    /**
+     * "Hide password" tooltip text on password visibility toggle
+     */
+    hidePasswordLabel?: string;
+    /**
+     * Provide a unique identifier for the input field
+     */
+    id: string;
+    /**
+     * `true` to use the inline version
+     */
+    inline?: boolean;
+    /**
+     * Specify whether the control is currently invalid
+     */
+    invalid?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in an invalid state
+     */
+    invalidText?: ReactNodeLike;
+    /**
+     * Provide the text that will be read by a screen reader when visiting this control
+     */
+    labelText: ReactNodeLike;
+    /**
+     * @deprecated The `light` prop for `PasswordInput` has been deprecated in favor of the new `Layer` component. It will be removed in the next major release.
+     * `true` to use the light version. For use on $ui-01 backgrounds only.
+     * Don't use this to make tile background color same as container background color.
+     */
+    light?: boolean;
+    /**
+     * Max character count allowed for the input. This is needed in order for enableCounter to display
+     */
+    maxCount?: number;
+    /**
+     * Optionally provide an `onChange` handler that is called whenever `<input>` is updated
+     * @param evt Change event triggered by `<input>`
+     * @returns {void}
+     */
+    onChange?: (evt: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Optionally provide an `onClick` handler that is called whenever the `<input>` is returned
+     * @param evt Mouse event triggered by `<input>`
+     * @returns {void}
+     */
+    onClick?: (evt: React.MouseEvent<HTMLInputElement>) => void;
+    /**
+     * Callback function that is called whenever the toggle password visibility button is clicked
+     * @param evt Mouse event triggered by the password visibility `<button>`
+     * @returns {void}
+     */
+    onTogglePasswordVisibility?: (evt: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Specify the placeholder attribute for the `<input>`
+     */
+    placeholder?: string;
+    /**
+     * Whether the input should be read-only
+     */
+    readOnly?: boolean;
+    /**
+     * "Show password" tooltip text on password visibility toggle
+     */
+    showPasswordLabel?: string;
+    /**
+     * Specify the size of the Text Input. Supports `sm`, `md`, or `lg`.
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Specify the alignment of the tooltip to the icon-only button.
+     * Can be one of: `start`, `center`, or `end`.
+     */
+    tooltipAlignment?: 'start' | 'center' | 'end';
+    /**
+     * Specify the direction of the tooltip for the icon-only button.
+     * Can be either `top`, `right`, `bottom`, or `left`
+     */
+    tooltipPosition?: 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * The input type, either `password` or `text`
+     */
+    type?: 'password' | 'text';
+    /**
+     * Provide the current value of the `<input>`
+     */
+    value?: string | number;
+    /**
+     * Specify whether the control is currently in warning state
+     */
+    warn?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in warning state
+     */
+    warnText?: ReactNodeLike;
+}
+declare const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps & React.RefAttributes<unknown>>;
+export default PasswordInput;

package/es/components/TextInput/PasswordInput.js

@@ -14,11 +14,10 @@ import { useNormalizedInputProps } from '../../internal/useNormalizedInputProps.
 import { textInputProps } from './util.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
-import * as FeatureFlags from '@carbon/feature-flags';
 import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-var _excluded = ["className", "disabled", "helperText", "hideLabel", "hidePasswordLabel", "id", "inline", "invalid", "invalidText", "labelText", "light", "onChange", "onClick", "onTogglePasswordVisibility", "placeholder", "size", "showPasswordLabel", "tooltipPosition", "tooltipAlignment", "type", "warn", "warnText"];
+var _excluded = ["className", "disabled", "helperText", "hideLabel", "hidePasswordLabel", "id", "inline", "invalid", "invalidText", "labelText", "light", "onChange", "onClick", "onTogglePasswordVisibility", "placeholder", "readOnly", "size", "showPasswordLabel", "tooltipPosition", "tooltipAlignment", "type", "warn", "warnText"];
 var PasswordInput = /*#__PURE__*/React__default.forwardRef(function PasswordInput(_ref, ref) {
   var _classNames, _classNames2, _classNames3, _classNames4, _classNames7, _classNames8;
 
@@ -42,6 +41,7 @@ var PasswordInput = /*#__PURE__*/React__default.forwardRef(function PasswordInpu
       _onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
       onTogglePasswordVisibility = _ref.onTogglePasswordVisibility,
       placeholder = _ref.placeholder,
+      readOnly = _ref.readOnly,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'md' : _ref$size,
       _ref$showPasswordLabe = _ref.showPasswordLabel,
@@ -52,7 +52,8 @@ var PasswordInput = /*#__PURE__*/React__default.forwardRef(function PasswordInpu
       tooltipAlignment = _ref$tooltipAlignment === void 0 ? 'center' : _ref$tooltipAlignment,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'password' : _ref$type,
-      warn = _ref.warn,
+      _ref$warn = _ref.warn,
+      warn = _ref$warn === void 0 ? false : _ref$warn,
       warnText = _ref.warnText,
       rest = _objectWithoutProperties(_ref, _excluded);
 
@@ -67,7 +68,9 @@ var PasswordInput = /*#__PURE__*/React__default.forwardRef(function PasswordInpu
     invalid: invalid,
     invalidText: invalidText,
     warn: warn,
-    warnText: warnText
+    warnText: warnText,
+    readOnly: readOnly,
+    disabled: disabled
   });
 
   var _useContext = useContext(FormContext),
@@ -140,6 +143,7 @@ var PasswordInput = /*#__PURE__*/React__default.forwardRef(function PasswordInpu
   useEffect(function () {
     setInputType(type);
   }, [type]);
+  var Icon = normalizedProps.icon;
   return /*#__PURE__*/React__default.createElement("div", {
     className: inputWrapperClasses
   }, !inline ? label : /*#__PURE__*/React__default.createElement("div", {
@@ -149,7 +153,7 @@ var PasswordInput = /*#__PURE__*/React__default.forwardRef(function PasswordInpu
   }, /*#__PURE__*/React__default.createElement("div", {
     className: fieldWrapperClasses,
     "data-invalid": normalizedProps.invalid || null
-  }, normalizedProps.icon && /*#__PURE__*/React__default.createElement(normalizedProps.icon, {
+  }, Icon && /*#__PURE__*/React__default.createElement(Icon, {
     className: iconClasses
   }), input, isFluid && !inline && normalizedProps.validation), !isFluid && !inline && (normalizedProps.validation || helper)));
 });
@@ -249,7 +253,7 @@ PasswordInput.propTypes = {
   /**
    * Specify the size of the Text Input. Supports `sm`, `md`, or `lg`.
    */
-  size: FeatureFlags.enabled('enable-v11-release') ? PropTypes.oneOf(['sm', 'md', 'lg']) : PropTypes.string,
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
 
   /**
    * Specify the alignment of the tooltip to the icon-only button.

package/es/components/TextInput/TextInput.Skeleton.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import PropTypes from 'prop-types';
+import React from 'react';
+export interface TextInputSkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Specify an optional className to add to the form item wrapper.
+     */
+    className?: string;
+    /**
+     * Specify whether the label should be hidden or not.
+     */
+    hideLabel?: boolean;
+}
+declare const TextInputSkeleton: {
+    ({ hideLabel, className, ...rest }: TextInputSkeletonProps): JSX.Element;
+    propTypes: {
+        /**
+         * Specify an optional className to add to the form item wrapper.
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify whether the label should be hidden, or not
+         */
+        hideLabel: PropTypes.Requireable<boolean>;
+    };
+};
+export default TextInputSkeleton;
+export { TextInputSkeleton };

package/es/components/TextInput/index.js

@@ -10,6 +10,7 @@ import ControlledPasswordInput from './ControlledPasswordInput.js';
 import PasswordInput from './PasswordInput.js';
 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;

package/es/components/Tile/Tile.js

@@ -22,7 +22,7 @@ import { Enter, Space } from '../../internal/keyboard/keys.js';
 var _CheckboxCheckedFille, _Checkbox, _ChevronDown, _ChevronDown2;
 
 var _excluded = ["children", "className", "light"],
-    _excluded2 = ["children", "className", "clicked", "href", "light", "onClick", "onKeyDown"],
+    _excluded2 = ["children", "className", "clicked", "disabled", "href", "light", "onClick", "onKeyDown"],
     _excluded3 = ["children", "className", "disabled", "id", "light", "name", "onClick", "onChange", "onKeyDown", "selected", "tabIndex", "title", "value"],
     _excluded4 = ["tabIndex", "className", "children", "expanded", "tileMaxHeight", "tilePadding", "onClick", "onKeyUp", "tileCollapsedIconText", "tileExpandedIconText", "tileCollapsedLabel", "tileExpandedLabel", "light"];
 var Tile = /*#__PURE__*/React__default.forwardRef(function Tile(_ref, ref) {
@@ -64,6 +64,7 @@ var ClickableTile = /*#__PURE__*/React__default.forwardRef(function ClickableTil
       className = _ref2.className,
       _ref2$clicked = _ref2.clicked,
       clicked = _ref2$clicked === void 0 ? false : _ref2$clicked,
+      disabled = _ref2.disabled,
       href = _ref2.href,
       light = _ref2.light,
       _ref2$onClick = _ref2.onClick,
@@ -101,9 +102,10 @@ var ClickableTile = /*#__PURE__*/React__default.forwardRef(function ClickableTil
   return /*#__PURE__*/React__default.createElement(Link, _extends({
     className: classes,
     href: href,
-    onClick: handleOnClick,
+    onClick: !disabled ? handleOnClick : null,
     onKeyDown: handleOnKeyDown,
-    ref: ref
+    ref: ref,
+    disabled: disabled
   }, rest), children);
 });
 ClickableTile.displayName = 'ClickableTile';
@@ -123,6 +125,11 @@ ClickableTile.propTypes = {
    */
   clicked: PropTypes.bool,
 
+  /**
+   * Specify whether the ClickableTile should be disabled
+   */
+  disabled: PropTypes.bool,
+
   /**
    * The href for the link.
    */
@@ -359,7 +366,7 @@ function ExpandableTile(_ref4) {
       isExpanded = _useState18[0],
       setIsExpanded = _useState18[1];
 
-  var _useState19 = useState(false),
+  var _useState19 = useState(true),
       _useState20 = _slicedToArray(_useState19, 2),
       interactive = _useState20[0],
       setInteractive = _useState20[1];
@@ -429,11 +436,11 @@ function ExpandableTile(_ref4) {
     setIsTilePadding(paddingTop + paddingBottom);
   }, [isTileMaxHeight]);
   useIsomorphicEffect(function () {
-    if (getInteractiveContent(belowTheFold.current)) {
-      setInteractive(true);
+    if (!getInteractiveContent(belowTheFold.current)) {
+      setInteractive(false);
       return;
-    } else if (getInteractiveContent(aboveTheFold.current)) {
-      setInteractive(true);
+    } else if (!getInteractiveContent(aboveTheFold.current)) {
+      setInteractive(false);
     }
   }, []);
   useIsomorphicEffect(function () {

package/es/components/UIShell/HeaderMenu.js

@@ -12,10 +12,11 @@ import React__default from 'react';
 import PropTypes from 'prop-types';
 import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
 import { PrefixContext } from '../../internal/usePrefix.js';
+import deprecate from '../../prop-types/deprecate.js';
 import { matches } from '../../internal/keyboard/match.js';
 import { Enter, Space, Escape } from '../../internal/keyboard/keys.js';
 
-var _excluded = ["isCurrentPage", "aria-label", "aria-labelledby", "className", "children", "renderMenuContent", "menuLinkName", "focusRef"];
+var _excluded = ["isActive", "isCurrentPage", "aria-label", "aria-labelledby", "className", "children", "renderMenuContent", "menuLinkName", "focusRef"];
 /**
  * `HeaderMenu` is used to render submenu's in the `Header`. Most often children
  * will be a `HeaderMenuItem`. It handles certain keyboard events to help
@@ -149,6 +150,7 @@ var HeaderMenu = /*#__PURE__*/function (_React$Component) {
       var prefix = this.context;
 
       var _this$props = this.props,
+          isActive = _this$props.isActive,
           isCurrentPage = _this$props.isCurrentPage,
           ariaLabel = _this$props['aria-label'],
           ariaLabelledBy = _this$props['aria-labelledby'],
@@ -164,7 +166,8 @@ var HeaderMenu = /*#__PURE__*/function (_React$Component) {
         'aria-labelledby': ariaLabelledBy
       };
       var itemClassName = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--header__submenu"), true), _defineProperty(_cx, customClassName, !!customClassName), _cx));
-      var linkClassName = cx((_cx2 = {}, _defineProperty(_cx2, "".concat(prefix, "--header__menu-item"), true), _defineProperty(_cx2, "".concat(prefix, "--header__menu-title"), true), _defineProperty(_cx2, "".concat(prefix, "--header__menu-item--current"), isCurrentPage), _cx2)); // Notes on eslint comments and based on the examples in:
+      var isActivePage = isActive ? isActive : isCurrentPage;
+      var linkClassName = cx((_cx2 = {}, _defineProperty(_cx2, "".concat(prefix, "--header__menu-item"), true), _defineProperty(_cx2, "".concat(prefix, "--header__menu-title"), true), _defineProperty(_cx2, "".concat(prefix, "--header__menu-item--current"), isActivePage), _cx2)); // Notes on eslint comments and based on the examples in:
       // https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-1/menubar-1.html#
       // - The focus is handled by the <a> menuitem, onMouseOver is for mouse
       // users
@@ -218,9 +221,15 @@ _defineProperty(HeaderMenu, "propTypes", _objectSpread2(_objectSpread2({}, AriaL
   focusRef: PropTypes.func,
 
   /**
-   * Applies selected styles to the item if a user sets this to true and aria-current !== 'page'.
+   * Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`.
    */
-  isCurrentPage: PropTypes.bool,
+  isActive: PropTypes.bool,
+
+  /**
+   * Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`.
+   * @deprecated Please use `isActive` instead. This will be removed in the next major release.
+   */
+  isCurrentPage: deprecate(PropTypes.bool, 'The `isCurrentPage` prop for `HeaderMenu` has ' + 'been deprecated. Please use `isActive` instead. This will be removed in the next major release.'),
 
   /**
    * Provide a label for the link text

package/es/components/UIShell/HeaderMenuItem.js

@@ -11,12 +11,14 @@ import React__default from 'react';
 import cx from 'classnames';
 import Link, { LinkPropTypes } from './Link.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import deprecate from '../../prop-types/deprecate.js';
 
-var _excluded = ["className", "isCurrentPage", "aria-current", "children", "role", "tabIndex"];
+var _excluded = ["className", "isActive", "isCurrentPage", "aria-current", "children", "role", "tabIndex"];
 var HeaderMenuItem = /*#__PURE__*/React__default.forwardRef(function HeaderMenuItem(_ref, ref) {
   var _cx;
 
   var className = _ref.className,
+      isActive = _ref.isActive,
       isCurrentPage = _ref.isCurrentPage,
       ariaCurrent = _ref['aria-current'],
       children = _ref.children,
@@ -26,7 +28,12 @@ var HeaderMenuItem = /*#__PURE__*/React__default.forwardRef(function HeaderMenuI
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix();
-  var linkClassName = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--header__menu-item"), true), _defineProperty(_cx, "".concat(prefix, "--header__menu-item--current"), isCurrentPage && ariaCurrent !== 'page'), _cx));
+
+  if (isCurrentPage) {
+    isActive = isCurrentPage;
+  }
+
+  var linkClassName = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--header__menu-item"), true), _defineProperty(_cx, "".concat(prefix, "--header__menu-item--current"), isActive && ariaCurrent !== 'page'), _cx));
   return /*#__PURE__*/React__default.createElement("li", {
     className: className,
     role: role
@@ -53,9 +60,15 @@ HeaderMenuItem.propTypes = _objectSpread2(_objectSpread2({}, LinkPropTypes), {},
   className: PropTypes.string,
 
   /**
-   * Applies selected styles to the item if a user sets this to true and aria-current !== 'page'.
+   * Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`.
+   */
+  isActive: PropTypes.bool,
+
+  /**
+   * Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`.
+   * @deprecated Please use `isActive` instead. This will be removed in the next major release.
    */
-  isCurrentPage: PropTypes.bool,
+  isCurrentPage: deprecate(PropTypes.bool, 'The `isCurrentPage` prop for `HeaderMenuItem` has ' + 'been deprecated. Please use `isActive` instead. This will be removed in the next major release.'),
 
   /**
    * Optionally supply a role for the underlying `<li>` node. Useful for resetting

package/es/tools/wrapComponent.js

@@ -12,12 +12,21 @@ import cx from 'classnames';
 import { usePrefix } from '../internal/usePrefix.js';
 
 var _excluded = ["className"];
+/**
+ * @param {{ name: string, type: string, className?: string | (prefix: string) => string }} props
+ * @returns
+ */
 
 var wrapComponent = function wrapComponent(_ref) {
   var name = _ref.name,
       getClassName = _ref.className,
       type = _ref.type;
 
+  /**
+   *
+   * @param {{ className?: string, [x: string]: any}} param0
+   * @returns
+   */
   function Component(_ref2) {
     var baseClassName = _ref2.className,
         other = _objectWithoutProperties(_ref2, _excluded);

package/lib/components/Button/Button.js

@@ -27,7 +27,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _excluded = ["as", "children", "className", "dangerDescription", "disabled", "hasIconOnly", "href", "iconDescription", "isExpressive", "isSelected", "kind", "onBlur", "onClick", "onFocus", "onMouseEnter", "onMouseLeave", "renderIcon", "size", "tabIndex", "tooltipAlignment", "tooltipPosition", "type"];
 var Button = /*#__PURE__*/React__default["default"].forwardRef(function Button(_ref, ref) {
-  var _classNames;
+  var _classNames, _rest$ariaPressed;
 
   var as = _ref.as,
       children = _ref.children,
@@ -92,7 +92,7 @@ var Button = /*#__PURE__*/React__default["default"].forwardRef(function Button(_
     disabled: disabled,
     type: type,
     'aria-describedby': dangerButtonVariants.includes(kind) ? assistiveId : null,
-    'aria-pressed': hasIconOnly && kind === 'ghost' ? isSelected : null
+    'aria-pressed': (_rest$ariaPressed = rest['aria-pressed']) !== null && _rest$ariaPressed !== void 0 ? _rest$ariaPressed : hasIconOnly && kind === 'ghost' ? isSelected : null
   };
   var anchorProps = {
     href: href

package/lib/components/DataTable/Table.d.ts

@@ -0,0 +1,74 @@
+/**
+ * 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 { PropsWithChildren } from 'react';
+import PropTypes from 'prop-types';
+interface TableProps {
+    className?: string;
+    /**
+     * `false` If true, will apply sorting styles
+     */
+    isSortable?: boolean;
+    /**
+     * Specify whether the overflow menu (if it exists) should be shown always, or only on hover
+     */
+    overflowMenuOnHover?: boolean;
+    /**
+     *  Change the row height of table. Currently supports `xs`, `sm`, `md`, `lg`, and `xl`.
+     */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * `false` If true, will keep the header sticky (only data rows will scroll)
+     */
+    stickyHeader?: boolean;
+    /**
+     * `false` If true, will use a width of 'auto' instead of 100%
+     */
+    useStaticWidth?: boolean;
+    /**
+     * `true` to add useZebraStyles striping.
+     */
+    useZebraStyles?: boolean;
+}
+export declare const Table: {
+    ({ className, children, useZebraStyles, size, isSortable, useStaticWidth, stickyHeader, overflowMenuOnHover, ...other }: PropsWithChildren<TableProps>): JSX.Element;
+    propTypes: {
+        /**
+         * Pass in the children that will be rendered within the Table
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+        /**
+         * `false` If true, will apply sorting styles
+         */
+        isSortable: PropTypes.Requireable<boolean>;
+        /**
+         * Specify whether the overflow menu (if it exists) should be shown always, or only on hover
+         */
+        overflowMenuOnHover: PropTypes.Requireable<boolean>;
+        /**
+         *  Change the row height of table. Currently supports `xs`, `sm`, `md`, `lg`, and `xl`.
+         */
+        size: PropTypes.Requireable<string>;
+        /**
+         * `false` If true, will keep the header sticky (only data rows will scroll)
+         */
+        stickyHeader: PropTypes.Requireable<boolean>;
+        /**
+         * `false` If true, will use a width of 'auto' instead of 100%
+         */
+        useStaticWidth: PropTypes.Requireable<boolean>;
+        /**
+         * `true` to add useZebraStyles striping.
+         */
+        useZebraStyles: PropTypes.Requireable<boolean>;
+    };
+    defaultProps: {
+        isSortable: boolean;
+        overflowMenuOnHover: boolean;
+    };
+};
+export default Table;

package/lib/components/DataTable/Table.js

@@ -30,10 +30,12 @@ var Table = function Table(_ref) {
       children = _ref.children,
       useZebraStyles = _ref.useZebraStyles,
       size = _ref.size,
-      isSortable = _ref.isSortable,
+      _ref$isSortable = _ref.isSortable,
+      isSortable = _ref$isSortable === void 0 ? false : _ref$isSortable,
       useStaticWidth = _ref.useStaticWidth,
       stickyHeader = _ref.stickyHeader,
-      overflowMenuOnHover = _ref.overflowMenuOnHover,
+      _ref$overflowMenuOnHo = _ref.overflowMenuOnHover,
+      overflowMenuOnHover = _ref$overflowMenuOnHo === void 0 ? true : _ref$overflowMenuOnHo,
       other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var _useContext = React.useContext(TableContext.TableContext),

package/lib/components/DataTable/TableCell.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.
+ */
+import { TdHTMLAttributes } from 'react';
+export type TableCellProps = TdHTMLAttributes<HTMLTableCellElement>;
+declare const TableCell: React.FC<TableCellProps>;
+export default TableCell;

package/lib/components/DataTable/TableContext.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 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.
+ */
+/// <reference types="react" />
+interface TableContextType {
+    titleId?: string;
+    descriptionId?: string;
+}
+export declare const TableContext: import("react").Context<TableContextType>;
+export {};

package/lib/components/DataTable/TableContext.js

@@ -12,8 +12,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 
 var TableContext = /*#__PURE__*/React.createContext({
-  titleId: null,
-  descriptionId: null
+  titleId: undefined,
+  descriptionId: undefined
 });
 
 exports.TableContext = TableContext;

package/lib/components/DataTable/TableExpandRow.d.ts

@@ -0,0 +1,67 @@
+/**
+ * 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 { MouseEventHandler, PropsWithChildren } from 'react';
+import { TableRowProps } from './TableRow';
+interface TableExpandRowProps extends PropsWithChildren<TableRowProps> {
+    /**
+     * Specify the string read by a voice reader when the expand trigger is
+     * focused
+     */
+    ariaLabel: string;
+    /**
+     * The id of the matching th node in the table head. Addresses a11y concerns outlined here: https://www.ibm.com/able/guidelines/ci162/info_and_relationships.html and https://www.w3.org/TR/WCAG20-TECHS/H43
+     */
+    expandHeader?: string;
+    /**
+     * The description of the chevron right icon, to be put in its SVG `<title>` element.
+     */
+    expandIconDescription?: string;
+    /**
+     * Specify whether this row is expanded or not. This helps coordinate data
+     * attributes so that `TableExpandRow` and `TableExpandedRow` work together
+     */
+    isExpanded: boolean;
+    /**
+     * Hook for when a listener initiates a request to expand the given row
+     */
+    onExpand: MouseEventHandler<HTMLButtonElement>;
+}
+declare const TableExpandRow: {
+    ({ ariaLabel, className: rowClassName, children, isExpanded, onExpand, expandIconDescription, isSelected, expandHeader, ...rest }: TableExpandRowProps): JSX.Element;
+    propTypes: {
+        /**
+         * Specify the string read by a voice reader when the expand trigger is
+         * focused
+         */
+        ariaLabel: PropTypes.Validator<string>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+        /**
+         * The id of the matching th node in the table head. Addresses a11y concerns outlined here: https://www.ibm.com/able/guidelines/ci162/info_and_relationships.html and https://www.w3.org/TR/WCAG20-TECHS/H43
+         */
+        expandHeader: PropTypes.Requireable<string>;
+        /**
+         * The description of the chevron right icon, to be put in its SVG `<title>` element.
+         */
+        expandIconDescription: PropTypes.Requireable<string>;
+        /**
+         * Specify whether this row is expanded or not. This helps coordinate data
+         * attributes so that `TableExpandRow` and `TableExpandedRow` work together
+         */
+        isExpanded: PropTypes.Validator<boolean>;
+        /**
+         * Specify if the row is selected
+         */
+        isSelected: PropTypes.Requireable<boolean>;
+        /**
+         * Hook for when a listener initiates a request to expand the given row
+         */
+        onExpand: PropTypes.Validator<(...args: any[]) => any>;
+    };
+};
+export default TableExpandRow;