@carbon/react 1.30.0 → 1.31.0

package/es/components/Accordion/Accordion.js

@@ -18,13 +18,15 @@ function Accordion(_ref) {
     className: customClassName,
     disabled = false,
     isFlush = false,
-    size = 'md',
+    size,
     ...rest
   } = _ref;
   const prefix = usePrefix();
   const className = cx(`${prefix}--accordion`, customClassName, {
     [`${prefix}--accordion--${align}`]: align,
     [`${prefix}--accordion--${size}`]: size,
+    // TODO: V12 - Remove this class
+    [`${prefix}--layout--size-${size}`]: size,
     [`${prefix}--accordion--flush`]: isFlush && align !== 'start'
   });
   return /*#__PURE__*/React__default.createElement("ul", _extends({

package/es/components/AspectRatio/AspectRatio.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 { PropsWithChildren, ReactHTML } from 'react';
+interface AspectRatioProps {
+    /**
+     * Provide a custom component or string to be rendered as
+     * the outermost node of the component. This is useful if you want
+     * to deviate from the default `div` tag, where you could specify
+     * `section` or `article` instead.
+     *
+     * ```jsx
+     * <AspectRatio as="article">My content</AspectRatio>
+     * ```
+     */
+    as?: keyof ReactHTML;
+    /**
+     * Specify a class name for the outermost node
+     * of the component.
+     */
+    className?: string;
+    /**
+     * Specify the ratio to be used by the aspect ratio
+     * container. This will  determine what aspect ratio your content
+     * will be displayed in.
+     */
+    ratio?: '1x1' | '2x3' | '3x2' | '3x4' | '4x3' | '1x2' | '2x1' | '9x16' | '16x9';
+}
+/**
+ * The AspectRatio component provides a `ratio` prop that will be used to
+ * specify the aspect ratio that the children you provide will be displayed in.
+ * This is often useful alongside our grid components, or for media assets like
+ * images or videos.
+ */
+declare const AspectRatio: {
+    ({ as: BaseComponent, className: containerClassName, children, ratio, ...rest }: PropsWithChildren<AspectRatioProps>): JSX.Element;
+    propTypes: {
+        /**
+         * Provide a custom component or string to be rendered as the outermost node
+         * of the component. This is useful if you want to deviate from the default
+         * `div` tag, where you could specify `section` or `article` instead.
+         *
+         * ```jsx
+         * <AspectRatio as="article">My content</AspectRatio>
+         * ```
+         */
+        as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
+        /**
+         * Specify the content that will be placed in the aspect ratio
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify a class name for the outermost node of the component
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify the ratio to be used by the aspect ratio container. This will
+         * determine what aspect ratio your content will be displayed in.
+         */
+        ratio: PropTypes.Requireable<string>;
+    };
+};
+export default AspectRatio;

package/es/components/AspectRatio/AspectRatio.js

@@ -17,7 +17,7 @@ import { usePrefix } from '../../internal/usePrefix.js';
  * This is often useful alongside our grid components, or for media assets like
  * images or videos.
  */
-function AspectRatio(_ref) {
+const AspectRatio = _ref => {
   let {
     as: BaseComponent = 'div',
     className: containerClassName,
@@ -30,7 +30,7 @@ function AspectRatio(_ref) {
   return /*#__PURE__*/React__default.createElement(BaseComponent, _extends({
     className: className
   }, rest), children);
-}
+};
 AspectRatio.propTypes = {
   /**
    * Provide a custom component or string to be rendered as the outermost node

package/es/components/AspectRatio/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 { default as AspectRatio } from './AspectRatio';

package/es/components/Button/Button.js

@@ -34,7 +34,7 @@ const Button = /*#__PURE__*/React__default.forwardRef(function Button(_ref, ref)
     onMouseEnter,
     onMouseLeave,
     renderIcon: ButtonImageElement,
-    size = 'lg',
+    size,
     tabIndex,
     tooltipAlignment = 'center',
     tooltipPosition = 'top',
@@ -53,9 +53,14 @@ const Button = /*#__PURE__*/React__default.forwardRef(function Button(_ref, ref)
   const buttonClasses = cx(className, {
     [`${prefix}--btn`]: true,
     [`${prefix}--btn--sm`]: size === 'sm' && !isExpressive,
+    // TODO: V12 - Remove this class
     [`${prefix}--btn--md`]: size === 'md' && !isExpressive,
+    // TODO: V12 - Remove this class
     [`${prefix}--btn--xl`]: size === 'xl',
+    // TODO: V12 - Remove this class
     [`${prefix}--btn--2xl`]: size === '2xl',
+    // TODO: V12 - Remove this class
+    [`${prefix}--layout--size-${size}`]: size,
     [`${prefix}--btn--${kind}`]: kind,
     [`${prefix}--btn--disabled`]: disabled,
     [`${prefix}--btn--expressive`]: isExpressive,

package/es/components/Checkbox/Checkbox.js

@@ -67,8 +67,8 @@ const Checkbox = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     className: `${prefix}--checkbox`,
     id: id,
     ref: el => {
-      if (el && indeterminate) {
-        el.indeterminate = indeterminate;
+      if (el) {
+        el.indeterminate = indeterminate ?? false;
       }
       if (typeof ref === 'function') {
         ref(el);

package/es/components/CodeSnippet/CodeSnippet.js

@@ -199,6 +199,7 @@ function CodeSnippet(_ref) {
   }), hasRightOverflow && type !== 'multi' && /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--snippet__overflow-indicator--right`
   }), !hideCopyButton && /*#__PURE__*/React__default.createElement(CopyButton, {
+    size: type === 'multi' ? 'sm' : 'md',
     disabled: disabled,
     onClick: handleCopyClick,
     feedback: feedback,

package/es/components/ComboButton/index.js

@@ -34,7 +34,7 @@ const ComboButton = /*#__PURE__*/React__default.forwardRef(function ComboButton(
     label,
     onClick,
     size = 'lg',
-    tooltipAlign,
+    tooltipAlignment,
     translateWithId: t = defaultTranslateWithId,
     ...rest
   } = _ref;
@@ -76,7 +76,8 @@ const ComboButton = /*#__PURE__*/React__default.forwardRef(function ComboButton(
   const triggerClasses = cx(`${prefix}--combo-button__trigger`);
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     className: containerClasses,
-    ref: ref
+    ref: ref,
+    "aria-owns": open ? id : null
   }), /*#__PURE__*/React__default.createElement("div", {
     className: primaryActionClasses
   }, /*#__PURE__*/React__default.createElement(Button, {
@@ -88,12 +89,12 @@ const ComboButton = /*#__PURE__*/React__default.forwardRef(function ComboButton(
     label: t('carbon.combo-button.additional-actions'),
     size: size,
     disabled: disabled,
-    align: tooltipAlign,
+    align: tooltipAlignment,
     "aria-haspopup": true,
     "aria-expanded": open,
     onClick: handleTriggerClick,
     onMouseDown: handleTriggerMousedown,
-    "aria-owns": open ? id : null
+    "aria-controls": open ? id : null
   }, _ChevronDown || (_ChevronDown = /*#__PURE__*/React__default.createElement(ChevronDown, null))), /*#__PURE__*/React__default.createElement(Menu, {
     ref: menuRef,
     id: id,
@@ -134,7 +135,7 @@ ComboButton.propTypes = {
   /**
    * Specify how the trigger tooltip should be aligned.
    */
-  tooltipAlign: PropTypes.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
+  tooltipAlignment: PropTypes.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
   /**
    * Optional method that takes in a message id and returns an
    * internationalized string.

package/es/components/ContainedList/ContainedList.js

@@ -8,6 +8,7 @@
 import React__default from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
+import { LayoutConstraint } from '../Layout/index.js';
 import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
@@ -43,13 +44,16 @@ function ContainedList(_ref) {
     isInset,
     kind = variants[0],
     label,
-    size = 'lg'
+    size
   } = _ref;
   const labelId = `${useId('contained-list')}-header`;
   const prefix = usePrefix();
   const classes = cx(`${prefix}--contained-list`, {
-    [`${prefix}--contained-list--inset-rulers`]: isInset
-  }, `${prefix}--contained-list--${kind}`, `${prefix}--contained-list--${size}`, className);
+    [`${prefix}--contained-list--inset-rulers`]: isInset,
+    [`${prefix}--contained-list--${size}`]: size,
+    // TODO: V12 - Remove this class
+    [`${prefix}--layout--size-${size}`]: size
+  }, `${prefix}--contained-list--${kind}`, className);
   const filteredChildren = filterChildren(children);
   const isActionSearch = ['Search', 'ExpandableSearch'].includes(action?.type?.displayName);
   const renderedChildren = renderChildren(children);
@@ -60,7 +64,11 @@ function ContainedList(_ref) {
   }, /*#__PURE__*/React__default.createElement("div", {
     id: labelId,
     className: `${prefix}--contained-list__label`
-  }, label), /*#__PURE__*/React__default.createElement("div", {
+  }, label), /*#__PURE__*/React__default.createElement(LayoutConstraint, {
+    size: {
+      min: 'sm',
+      max: 'xl'
+    },
     className: `${prefix}--contained-list__action`
   }, action)), children && /*#__PURE__*/React__default.createElement("ul", {
     "aria-labelledby": labelId

package/es/components/ContainedList/ContainedListItem/ContainedListItem.js

@@ -8,6 +8,7 @@
 import React__default from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
+import { LayoutConstraint } from '../../Layout/index.js';
 import { usePrefix } from '../../../internal/usePrefix.js';
 
 function ContainedListItem(_ref) {
@@ -38,7 +39,11 @@ function ContainedListItem(_ref) {
     onClick: onClick
   }, content) : /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--contained-list-item__content`
-  }, content), action && /*#__PURE__*/React__default.createElement("div", {
+  }, content), action && /*#__PURE__*/React__default.createElement(LayoutConstraint, {
+    size: {
+      min: 'sm',
+      max: 'lg'
+    },
     className: `${prefix}--contained-list-item__action`
   }, action));
 }

package/es/components/ContentSwitcher/ContentSwitcher.js

@@ -10,6 +10,7 @@ import PropTypes from 'prop-types';
 import React__default from 'react';
 import cx from 'classnames';
 import deprecate from '../../prop-types/deprecate.js';
+import { LayoutConstraint } from '../Layout/index.js';
 import { composeEventHandlers } from '../../tools/events.js';
 import { PrefixContext } from '../../internal/usePrefix.js';
 import { matches } from '../../internal/keyboard/match.js';
@@ -107,9 +108,17 @@ class ContentSwitcher extends React__default.Component {
     const classes = cx(`${prefix}--content-switcher`, className, {
       [`${prefix}--content-switcher--light`]: light,
       [`${prefix}--content-switcher--${size}`]: size,
+      // TODO: V12 - Remove this class
+      [`${prefix}--layout--size-${size}`]: size,
       [`${prefix}--content-switcher--icon-only`]: isIconOnly
     });
-    return /*#__PURE__*/React__default.createElement("div", _extends({}, other, {
+    return /*#__PURE__*/React__default.createElement(LayoutConstraint, _extends({
+      size: {
+        default: 'md',
+        min: 'sm',
+        max: 'lg'
+      }
+    }, other, {
       className: classes,
       role: "tablist"
     }), React__default.Children.map(children, (child, index) => /*#__PURE__*/React__default.cloneElement(child, {

package/es/components/CopyButton/CopyButton.js

@@ -11,6 +11,7 @@ import React__default from 'react';
 import cx from 'classnames';
 import { Copy as Copy$1 } from '@carbon/icons-react';
 import Copy from '../Copy/Copy.js';
+import { LayoutConstraint } from '../Layout/index.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
 function CopyButton(_ref) {
@@ -20,12 +21,17 @@ function CopyButton(_ref) {
     ...other
   } = _ref;
   const prefix = usePrefix();
-  return /*#__PURE__*/React__default.createElement(Copy, _extends({
+  return /*#__PURE__*/React__default.createElement(LayoutConstraint, {
+    size: {
+      default: 'md',
+      max: 'lg'
+    }
+  }, /*#__PURE__*/React__default.createElement(Copy, _extends({
     className: cx(className, `${prefix}--copy-btn`),
     "aria-label": iconDescription
   }, other), /*#__PURE__*/React__default.createElement(Copy$1, {
     className: `${prefix}--snippet__icon`
-  }));
+  })));
 }
 CopyButton.propTypes = {
   /**

package/es/components/DataTable/DataTable.js

@@ -234,7 +234,8 @@ class DataTable extends React__default.Component {
         isSortable,
         useStaticWidth,
         stickyHeader,
-        overflowMenuOnHover
+        overflowMenuOnHover,
+        experimentalAutoAlign
       } = this.props;
       return {
         useZebraStyles,
@@ -242,7 +243,8 @@ class DataTable extends React__default.Component {
         isSortable,
         useStaticWidth,
         stickyHeader,
-        overflowMenuOnHover
+        overflowMenuOnHover,
+        experimentalAutoAlign
       };
     });
     _defineProperty(this, "getTableContainerProps", () => {
@@ -621,6 +623,10 @@ class DataTable extends React__default.Component {
   }
 }
 _defineProperty(DataTable, "propTypes", {
+  /**
+   * Experimental property. Allows table to align cell contents to the top if there is text wrapping in the content. Might have performance issues, intended for smaller tables
+   */
+  experimentalAutoAlign: PropTypes.bool,
   /**
    * Optional hook to manually control filtering of the rows from the
    * TableToolbarSearch component

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

@@ -7,6 +7,7 @@
 import { PropsWithChildren } from 'react';
 import PropTypes from 'prop-types';
 interface TableProps {
+    experimentalAutoAlign?: boolean;
     className?: string;
     /**
      * `false` If true, will apply sorting styles
@@ -34,13 +35,17 @@ interface TableProps {
     useZebraStyles?: boolean;
 }
 export declare const Table: {
-    ({ className, children, useZebraStyles, size, isSortable, useStaticWidth, stickyHeader, overflowMenuOnHover, ...other }: PropsWithChildren<TableProps>): JSX.Element;
+    ({ className, children, useZebraStyles, size, isSortable, useStaticWidth, stickyHeader, overflowMenuOnHover, experimentalAutoAlign, ...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>;
+        /**
+         * Experimental property. Allows table to align cell contents to the top if there is text wrapping in the content. Might have performance issues, intended for smaller tables
+         */
+        experimentalAutoAlign: PropTypes.Requireable<boolean>;
         /**
          * `false` If true, will apply sorting styles
          */

package/es/components/DataTable/Table.js

@@ -6,22 +6,53 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useContext } from 'react';
+import React__default, { useContext, useRef, useCallback, useLayoutEffect } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
+import debounce from 'lodash.debounce';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { TableContext } from './TableContext.js';
+import { useWindowEvent } from '../../internal/useEvent.js';
 
+const isElementWrappingContent = (element, context) => {
+  if (element.children.length > 0) {
+    return false;
+  }
+  const computedStyles = window.getComputedStyle(element);
+  context.font = computedStyles.font ? computedStyles.font : `${computedStyles.fontSize}" "${computedStyles.fontFamily}`;
+  const measuredText = context?.measureText(element.textContent ?? '');
+  let textWidth = measuredText.width ?? 0;
+  // account for letter spacing
+  const letterSpacing = computedStyles.letterSpacing?.split('px');
+  if (letterSpacing && letterSpacing.length && !isNaN(Number(letterSpacing[0]))) {
+    textWidth += Number(letterSpacing[0]) * (element.textContent?.length ?? 0);
+  }
+  // account for padding
+  const paddingLeft = computedStyles.paddingLeft?.split('px');
+  if (paddingLeft && paddingLeft.length && !isNaN(Number(paddingLeft[0]))) {
+    textWidth += Number(paddingLeft[0]);
+  }
+  const paddingRight = computedStyles.paddingLeft?.split('px');
+  if (paddingRight && paddingRight.length && !isNaN(Number(paddingRight[0]))) {
+    textWidth += Number(paddingRight[0]);
+  }
+  // if measured textWidth is larger than the cell's width, then the content is being wrapped
+  if (textWidth > element.getBoundingClientRect().width) {
+    return true;
+  }
+  return false;
+};
 const Table = _ref => {
   let {
     className,
     children,
     useZebraStyles,
-    size,
+    size = 'lg',
     isSortable = false,
     useStaticWidth,
     stickyHeader,
     overflowMenuOnHover = true,
+    experimentalAutoAlign = false,
     ...other
   } = _ref;
   const {
@@ -29,6 +60,7 @@ const Table = _ref => {
     descriptionId
   } = useContext(TableContext);
   const prefix = usePrefix();
+  const tableRef = useRef(null);
   const componentClass = cx(`${prefix}--data-table`, className, {
     [`${prefix}--data-table--${size}`]: size,
     [`${prefix}--data-table--sort`]: isSortable,
@@ -37,13 +69,52 @@ const Table = _ref => {
     [`${prefix}--data-table--sticky-header`]: stickyHeader,
     [`${prefix}--data-table--visible-overflow-menu`]: !overflowMenuOnHover
   });
+  const toggleTableBodyAlignmentClass = useCallback(function () {
+    let alignTop = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    alignTop ? tableRef.current?.classList.add(`${prefix}--data-table--top-aligned-body`) : tableRef.current?.classList.remove(`${prefix}--data-table--top-aligned-body`);
+  }, [prefix]);
+  const toggleTableHeaderAlignmentClass = useCallback(function () {
+    let alignTop = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    alignTop ? tableRef.current?.classList.add(`${prefix}--data-table--top-aligned-header`) : tableRef.current?.classList.remove(`${prefix}--data-table--top-aligned-header`);
+  }, [prefix]);
+  const setTableAlignment = useCallback(() => {
+    if (experimentalAutoAlign) {
+      const canvas = document.createElement('canvas');
+      const context = canvas.getContext('2d');
+      if (tableRef.current && context) {
+        const isBodyMultiline = Array.from(tableRef.current.querySelectorAll('td')).some(td => isElementWrappingContent(td, context));
+        const isHeaderMultiline = Array.from(tableRef.current.querySelectorAll('th')).some(th => {
+          const label = th.querySelector(`.${prefix}--table-header-label`);
+          return label && isElementWrappingContent(label, context);
+        });
+        toggleTableBodyAlignmentClass(isBodyMultiline);
+        toggleTableHeaderAlignmentClass(isHeaderMultiline);
+      }
+    } else {
+      toggleTableBodyAlignmentClass(false);
+      toggleTableHeaderAlignmentClass(false);
+    }
+  }, [experimentalAutoAlign, toggleTableBodyAlignmentClass, toggleTableHeaderAlignmentClass, prefix]);
+  const debouncedSetTableAlignment = debounce(setTableAlignment, 100);
+  useWindowEvent('resize', debouncedSetTableAlignment);
+
+  // recalculate table alignment once fonts have loaded
+  if (document?.fonts?.status && document.fonts.status !== 'loaded') {
+    document.fonts.ready.then(() => {
+      setTableAlignment();
+    });
+  }
+  useLayoutEffect(() => {
+    setTableAlignment();
+  }, [setTableAlignment, size]);
   const table = /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--data-table-content`
   }, /*#__PURE__*/React__default.createElement("table", _extends({
     "aria-labelledby": titleId,
     "aria-describedby": descriptionId
   }, other, {
-    className: componentClass
+    className: componentClass,
+    ref: tableRef
   }), children));
   return stickyHeader ? /*#__PURE__*/React__default.createElement("section", {
     className: `${prefix}--data-table_inner-container`
@@ -55,6 +126,10 @@ Table.propTypes = {
    */
   children: PropTypes.node,
   className: PropTypes.string,
+  /**
+   * Experimental property. Allows table to align cell contents to the top if there is text wrapping in the content. Might have performance issues, intended for smaller tables
+   */
+  experimentalAutoAlign: PropTypes.bool,
   /**
    * `false` If true, will apply sorting styles
    */

package/es/components/DataTable/TableHeader.js

@@ -80,10 +80,11 @@ const TableHeader = /*#__PURE__*/React__default.forwardRef(function TableHeader(
     isSortHeader,
     sortStates
   });
+  const headerClasses = cx(headerClassName, `${prefix}--table-sort__header`);
   return /*#__PURE__*/React__default.createElement("th", {
     id: id,
     "aria-sort": ariaSort,
-    className: headerClassName,
+    className: headerClasses,
     colSpan: colSpan,
     ref: ref,
     scope: scope

package/es/components/DataTableSkeleton/DataTableSkeleton.js

@@ -111,6 +111,5 @@ DataTableSkeleton.defaultProps = {
   showHeader: true,
   showToolbar: true
 };
-var DataTableSkeleton$1 = DataTableSkeleton;
 
-export { DataTableSkeleton$1 as default };
+export { DataTableSkeleton as default };

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

package/es/components/ExpandableSearch/ExpandableSearch.d.ts

@@ -6,7 +6,7 @@
  */
 import React from 'react';
 import { type SearchProps } from '../Search';
-declare function ExpandableSearch({ onBlur, onChange, onExpand, onFocus, ...props }: SearchProps): JSX.Element;
+declare function ExpandableSearch({ onBlur, onChange, onExpand, onFocus, defaultValue, isExpanded, ...props }: SearchProps): JSX.Element;
 declare namespace ExpandableSearch {
     var propTypes: React.WeakValidationMap<SearchProps & React.RefAttributes<HTMLInputElement>> | undefined;
     var displayName: string;

package/es/components/ExpandableSearch/ExpandableSearch.js

@@ -19,10 +19,12 @@ function ExpandableSearch(_ref) {
     onChange,
     onExpand,
     onFocus,
+    defaultValue,
+    isExpanded,
     ...props
   } = _ref;
-  const [expanded, setExpanded] = useState(false);
-  const [hasContent, setHasContent] = useState(false);
+  const [expanded, setExpanded] = useState(isExpanded || false);
+  const [hasContent, setHasContent] = useState(defaultValue ? true : false);
   const searchRef = useRef(null);
   const prefix = usePrefix();
   function handleFocus() {
@@ -46,6 +48,8 @@ function ExpandableSearch(_ref) {
     [`${prefix}--search--expanded`]: expanded
   }, props.className);
   return /*#__PURE__*/React__default.createElement(Search, _extends({}, props, {
+    defaultValue: defaultValue,
+    isExpanded: expanded,
     ref: searchRef,
     className: classes,
     onFocus: composeEventHandlers([onFocus, handleFocus]),

package/es/components/FileUploader/FileUploaderButton.js

@@ -46,7 +46,8 @@ function FileUploaderButton(_ref) {
     [`${prefix}--btn--disabled`]: disabled,
     // V11: remove field, small
     [`${prefix}--btn--md`]: size === 'field' || size === 'md',
-    [`${prefix}--btn--sm`]: size === 'small' || size === 'sm'
+    [`${prefix}--btn--sm`]: size === 'small' || size === 'sm',
+    [`${prefix}--layout--size-${size}`]: size
   });
 
   // Adjust label text state based on changes to the labelText prop

package/es/components/IconButton/index.js

@@ -21,16 +21,19 @@ const IconButton = /*#__PURE__*/React__default.forwardRef(function IconButton(pr
     className,
     closeOnActivation = true,
     defaultOpen = false,
+    disabled,
     enterDelayMs,
     kind,
     label,
     leaveDelayMs,
     wrapperClasses,
-    size = 'md',
+    size,
     ...rest
   } = props;
   const prefix = usePrefix();
-  const tooltipClasses = cx(wrapperClasses, `${prefix}--icon-tooltip`);
+  const tooltipClasses = cx(wrapperClasses, `${prefix}--icon-tooltip`, {
+    [`${prefix}--icon-tooltip--disabled`]: disabled
+  });
   return /*#__PURE__*/React__default.createElement(Tooltip, {
     align: align,
     closeOnActivation: closeOnActivation,
@@ -40,6 +43,7 @@ const IconButton = /*#__PURE__*/React__default.forwardRef(function IconButton(pr
     label: label,
     leaveDelayMs: leaveDelayMs
   }, /*#__PURE__*/React__default.createElement(Button, _extends({}, rest, {
+    disabled: disabled,
     kind: kind,
     ref: ref,
     size: size,
@@ -67,6 +71,10 @@ IconButton.propTypes = {
    * Specify whether the tooltip should be open when it first renders
    */
   defaultOpen: PropTypes.bool,
+  /**
+   * Specify whether the Button should be disabled, or not
+   */
+  disabled: PropTypes.bool,
   /**
    * Specify the duration in milliseconds to delay before displaying the tooltip
    */