@carbon/react 1.78.1 → 1.79.0-rc.0

package/es/components/Button/Button.js

@@ -76,23 +76,34 @@ const Button = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     if (tooltipPosition === 'right' || tooltipPosition === 'left') {
       align = tooltipPosition;
     }
-    return /*#__PURE__*/React__default.createElement(IconButton, _extends({}, rest, {
-      ref: ref,
-      as: as,
-      align: align,
-      label: iconDescription,
-      kind: kind,
-      size: size,
-      highContrast: tooltipHighContrast,
-      dropShadow: tooltipDropShadow,
-      onMouseEnter: onMouseEnter,
-      onMouseLeave: onMouseLeave,
-      onFocus: onFocus,
-      onBlur: onBlur,
-      autoAlign: autoAlign,
-      onClick: composeEventHandlers([onClick, handleClick]),
-      renderIcon: iconOnlyImage ? null : ButtonImageElement // avoid doubling the icon.
-    }), iconOnlyImage ?? children);
+    return (
+      /*#__PURE__*/
+      // @ts-expect-error - `IconButton` does not support all `size`s that
+      // `Button` supports.
+      //
+      // TODO: What should be done here?
+      // 1. Should the `IconButton` not be rendered if the `size` is not
+      //    supported?
+      // 2. Should an error be thrown?
+      // 3. Something else?
+      React__default.createElement(IconButton, _extends({}, rest, {
+        ref: ref,
+        as: as,
+        align: align,
+        label: iconDescription,
+        kind: kind,
+        size: size,
+        highContrast: tooltipHighContrast,
+        dropShadow: tooltipDropShadow,
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave,
+        onFocus: onFocus,
+        onBlur: onBlur,
+        autoAlign: autoAlign,
+        onClick: composeEventHandlers([onClick, handleClick]),
+        renderIcon: iconOnlyImage ? null : ButtonImageElement // avoid doubling the icon.
+      }), iconOnlyImage ?? children)
+    );
   }
 });
 Button.displayName = 'Button';

package/es/components/Button/ButtonBase.js

@@ -41,6 +41,8 @@ const ButtonBase = /*#__PURE__*/React__default.forwardRef(function ButtonBase(_r
     // TODO: V12 - Remove this class
     [`${prefix}--btn--md`]: size === 'md' && !isExpressive,
     // TODO: V12 - Remove this class
+    [`${prefix}--btn--lg`]: size === 'lg' && !isExpressive,
+    // TODO: V12 - Remove this class
     [`${prefix}--btn--xl`]: size === 'xl',
     // TODO: V12 - Remove this class
     [`${prefix}--btn--2xl`]: size === '2xl',

package/es/components/DataTable/TableContainer.js

@@ -12,6 +12,7 @@ import React__default, { useMemo } from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useId } from '../../internal/useId.js';
 import { TableContext } from './TableContext.js';
+import { Section, Heading } from '../Heading/index.js';
 
 const TableContainer = _ref => {
   let {
@@ -39,11 +40,11 @@ const TableContainer = _ref => {
   }, [title, description, titleId, descriptionId]);
   return /*#__PURE__*/React__default.createElement(TableContext.Provider, {
     value: value
-  }, /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
+  }, /*#__PURE__*/React__default.createElement(Section, _extends({}, rest, {
     className: tableContainerClasses
   }), (title || description) && /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--data-table-header`
-  }, title && /*#__PURE__*/React__default.createElement("h4", {
+  }, title && /*#__PURE__*/React__default.createElement(Heading, {
     className: `${prefix}--data-table-header__title`,
     id: titleId
   }, title), description && /*#__PURE__*/React__default.createElement("p", {

package/es/components/Grid/Column.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import { PolymorphicProps } from '../../types/common';
+import { PolymorphicComponentPropWithRef } from '../../internal/PolymorphicProps';
 type ColumnSpanPercent = '25%' | '50%' | '75%' | '100%';
 type ColumnSpanSimple = boolean | number | ColumnSpanPercent;
 export interface ColumnSpanObject {
@@ -65,7 +65,7 @@ export interface ColumnBaseProps {
      */
     span?: ColumnSpan;
 }
-export type ColumnProps<T extends React.ElementType> = PolymorphicProps<T, ColumnBaseProps>;
+export type ColumnProps<T extends React.ElementType> = PolymorphicComponentPropWithRef<T, ColumnBaseProps>;
 export interface ColumnComponent {
     <T extends React.ElementType>(props: ColumnProps<T>, context?: any): React.ReactElement<any, any> | null;
 }

package/es/components/Grid/Column.js

@@ -13,9 +13,9 @@ import React__default from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useGridSettings } from './GridContext.js';
 
-function Column(_ref) {
+const Column = /*#__PURE__*/React__default.forwardRef(function Column(_ref, ref) {
   let {
-    as: BaseComponent = 'div',
+    as,
     children,
     className: customClassName,
     sm,
@@ -29,6 +29,7 @@ function Column(_ref) {
     mode
   } = useGridSettings();
   const prefix = usePrefix();
+  const BaseComponent = as || 'div';
   if (mode === 'css-grid') {
     return /*#__PURE__*/React__default.createElement(CSSGridColumn, _extends({
       as: BaseComponent,
@@ -44,13 +45,11 @@ function Column(_ref) {
   const className = cx(customClassName, columnClassName, {
     [`${prefix}--col`]: columnClassName.length === 0
   });
-
-  // cast as any to let TypeScript allow passing in attributes to base component
-  const BaseComponentAsAny = BaseComponent;
-  return /*#__PURE__*/React__default.createElement(BaseComponentAsAny, _extends({
-    className: className
+  return /*#__PURE__*/React__default.createElement(BaseComponent, _extends({
+    className: className,
+    ref: ref
   }, rest), children);
-}
+});
 const percentSpanType = PropTypes.oneOf(['25%', '50%', '75%', '100%']);
 const spanPropType = FeatureFlags.enabled('enable-css-grid') ? PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.shape({
   span: PropTypes.oneOfType([PropTypes.number, percentSpanType]),

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

@@ -86,9 +86,9 @@ export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
      */
     rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>['rel'];
     /**
-     * Specify the size of the Button. Defaults to `md`.
+     * Specify the size of the Button.
      */
-    size?: ButtonSize;
+    size?: Extract<ButtonSize, 'sm' | 'md' | 'lg'>;
     /**
      * Optionally specify a `target` when using an `<a>` element.
      */

package/es/components/IconButton/index.js

@@ -184,7 +184,7 @@ IconButton.propTypes = {
    */
   rel: PropTypes.string,
   /**
-   * Specify the size of the Button. Defaults to `md`.
+   * Specify the size of the Button.
    */
   size: PropTypes.oneOf(['sm', 'md', 'lg']),
   /**

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

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/es/components/MultiSelect/index.js

@@ -5,16 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { deprecateFieldOnObject } from '../../internal/deprecateFieldOnObject.js';
 import MultiSelect from './MultiSelect.js';
 export { default as MultiSelect, default } from './MultiSelect.js';
 import FilterableMultiSelect from './FilterableMultiSelect.js';
 export { default as FilterableMultiSelect } from './FilterableMultiSelect.js';
 
-FilterableMultiSelect.displayName = 'MultiSelect.Filterable';
-// @ts-expect-error: The attribute indeed does not exist on the object,
-// but since it is already deprecated, we do not have to fix it.
-MultiSelect.Filterable = FilterableMultiSelect;
-if (process.env.NODE_ENV !== "production") {
-  deprecateFieldOnObject(MultiSelect, 'Filterable', FilterableMultiSelect);
-}
+FilterableMultiSelect.displayName = 'FilterableMultiSelect';

package/es/components/OverflowMenu/OverflowMenu.d.ts

@@ -4,9 +4,16 @@
  * 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 ElementType, type ReactNode, type Ref } from 'react';
 import { type MenuDirection, type MenuOffset } from '../../internal/FloatingMenu';
-import React from 'react';
-import PropTypes from 'prop-types';
+/**
+ * Calculates the offset for the floating menu.
+ *
+ * @param menuBody - The menu body with the menu arrow.
+ * @param direction - The floating menu direction.
+ * @returns The adjustment of the floating menu position, upon the position of
+ *          the menu arrow.
+ */
 export declare const getMenuOffset: MenuOffset;
 export interface OverflowMenuProps {
     /**
@@ -14,18 +21,18 @@ export interface OverflowMenuProps {
      */
     ['aria-label']?: string;
     /**
-     * Deprecated, please use `aria-label` instead.
      * Specify a label to be read by screen readers on the container note.
-     * @deprecated
-     * */
-    ariaLabel: string;
+     *
+     * @deprecated - Use `aria-label` instead.
+     */
+    ariaLabel?: string;
     /**
      * The child nodes.
-     * */
-    children: React.ReactNode;
+     */
+    children: ReactNode;
     /**
-     *  The CSS class names.
-     *  */
+     * The CSS class names.
+     */
     className?: string;
     /**
      * The menu direction.
@@ -87,7 +94,7 @@ export interface OverflowMenuProps {
     /**
      * A component used to render an icon.
      */
-    renderIcon?: React.ElementType;
+    renderIcon?: ElementType;
     /**
      * Specify a CSS selector that matches the DOM element that should
      * be focused when the OverflowMenu opens
@@ -100,189 +107,7 @@ export interface OverflowMenuProps {
     /**
      * The ref to the HTML element that should receive focus when the OverflowMenu opens
      */
-    innerRef?: React.Ref<any>;
-}
-export interface OverflowMenuState {
-    open: boolean;
-    prevOpen?: boolean;
-    hasMountedTrigger: boolean;
-    click: boolean;
-}
-interface ReleaseHandle {
-    release: () => null;
-}
-declare class OverflowMenu extends React.Component<OverflowMenuProps, OverflowMenuState> {
-    state: OverflowMenuState;
-    instanceId: number;
-    static propTypes: {
-        /**
-         * Specify a label to be read by screen readers on the container node
-         */
-        "aria-label": PropTypes.Requireable<string>;
-        /**
-         * Deprecated, please use `aria-label` instead.
-         * Specify a label to be read by screen readers on the container note.
-         */
-        ariaLabel: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
-        /**
-         * The child nodes.
-         */
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        /**
-         * The CSS class names.
-         */
-        className: PropTypes.Requireable<string>;
-        /**
-         * The menu direction.
-         */
-        direction: PropTypes.Requireable<string>;
-        /**
-         * `true` if the menu alignment should be flipped.
-         */
-        flipped: PropTypes.Requireable<boolean>;
-        /**
-         * Enable or disable focus trap behavior
-         */
-        focusTrap: PropTypes.Requireable<boolean>;
-        /**
-         * The CSS class for the icon.
-         */
-        iconClass: PropTypes.Requireable<string>;
-        /**
-         * The icon description.
-         */
-        iconDescription: PropTypes.Requireable<string>;
-        /**
-         * The element ID.
-         */
-        id: PropTypes.Requireable<string>;
-        /**
-         * `true` to use the light version. For use on $ui-01 backgrounds only.
-         * Don't use this to make OverflowMenu background color same as container background color.
-         */
-        light: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
-        /**
-         * The adjustment in position applied to the floating menu.
-         */
-        menuOffset: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.InferProps<{
-            top: PropTypes.Requireable<number>;
-            left: PropTypes.Requireable<number>;
-        }> | null | undefined>>;
-        /**
-         * The adjustment in position applied to the floating menu.
-         */
-        menuOffsetFlip: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.InferProps<{
-            top: PropTypes.Requireable<number>;
-            left: PropTypes.Requireable<number>;
-        }> | null | undefined>>;
-        /**
-         * The class to apply to the menu options
-         */
-        menuOptionsClass: PropTypes.Requireable<string>;
-        /**
-         * The event handler for the `click` event.
-         */
-        onClick: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * Function called when menu is closed
-         */
-        onClose: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * The event handler for the `focus` event.
-         */
-        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * The event handler for the `keydown` event.
-         */
-        onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * Function called when menu is opened
-         */
-        onOpen: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * `true` if the menu should be open.
-         */
-        open: PropTypes.Requireable<boolean>;
-        /**
-         * A component used to render an icon.
-         */
-        renderIcon: PropTypes.Requireable<object>;
-        /**
-         * Specify a CSS selector that matches the DOM element that should
-         * be focused when the OverflowMenu opens
-         */
-        selectorPrimaryFocus: PropTypes.Requireable<string>;
-        /**
-         * Specify the size of the OverflowMenu. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
-         */
-        size: PropTypes.Requireable<string>;
-    };
-    static contextType: React.Context<string>;
-    /**
-     * The handle of `onfocusin` or `focus` event handler.
-     * @private
-     */
-    _hFocusIn: ReleaseHandle | null;
-    /**
-     * The timeout handle for handling `blur` event.
-     * @private
-     */
-    _hBlurTimeout: any;
-    /**
-     * The element ref of the tooltip's trigger button.
-     * @type {React.RefObject<HTMLElement>}
-     * @private
-     */
-    _triggerRef: React.RefObject<HTMLElement>;
-    componentDidUpdate(_: any, prevState: any): void;
-    componentDidMount(): void;
-    static getDerivedStateFromProps({ open }: {
-        open: any;
-    }, state: any): {
-        open: any;
-        prevOpen: any;
-    } | null;
-    componentWillUnmount(): void;
-    handleClick: (evt: any) => void;
-    closeMenuAndFocus: () => void;
-    closeMenuOnEscape: () => void;
-    handleKeyPress: (evt: any) => void;
-    handleClickOutside: (evt: any) => void;
-    closeMenu: (onCloseMenu?: any) => void;
-    focusMenuEl: () => void;
-    /**
-     * Focuses the next enabled overflow menu item given the currently focused
-     * item index and direction to move
-     * @param {object} params
-     * @param {number} params.currentIndex - the index of the currently focused
-     * overflow menu item in the list of overflow menu items
-     * @param {number} params.direction - number denoting the direction to move
-     * focus (1 for forwards, -1 for backwards)
-     */
-    handleOverflowMenuItemFocus: ({ currentIndex, direction }: {
-        currentIndex: any;
-        direction: any;
-    }) => void;
-    /**
-     * Handles the floating menu being unmounted or non-floating menu being
-     * mounted or unmounted.
-     * @param {Element} menuBody The DOM element of the menu body.
-     * @private
-     */
-    _menuBody: HTMLElement | null;
-    _bindMenuBody: (menuBody: HTMLElement | null) => void;
-    /**
-     * Handles the floating menu being placed.
-     * @param {Element} menuBody The DOM element of the menu body.
-     * @private
-     */
-    _handlePlace: (menuBody: any) => void;
-    /**
-     * @returns {Element} The DOM element where the floating menu is placed in.
-     */
-    _getTarget: () => Element;
-    render(): import("react/jsx-runtime").JSX.Element;
+    innerRef?: Ref<any>;
 }
-export { OverflowMenu };
-declare const _default: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<unknown>>;
-export default _default;
+export declare const OverflowMenu: React.ForwardRefExoticComponent<OverflowMenuProps & React.RefAttributes<HTMLButtonElement>>;
+export default OverflowMenu;