@carbon/react 1.31.0-rc.0 → 1.31.0

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/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/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/Link/Link.d.ts

@@ -0,0 +1,53 @@
+/**
+ * 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, { AriaAttributes, ComponentType, HTMLAttributeAnchorTarget } from 'react';
+interface LinkProps {
+    /**
+     * @description Indicates the element that represents the
+     *   current item within a container or set of related
+     *   elements.
+     */
+    'aria-current'?: AriaAttributes['aria-current'];
+    /**
+     * @description Provide a custom className to be applied to
+     *   the containing `<a>` node.
+     */
+    className?: string;
+    /**
+     * @description Specify if the control should be disabled, or not.
+     */
+    disabled?: boolean;
+    /**
+     * @description Provide the `href` attribute for the `<a>` node.
+     */
+    href?: string;
+    /**
+     * @description Specify whether you want the inline version of this control.
+     */
+    inline?: boolean;
+    /**
+     * @description Optional prop to render an icon next to the link.
+     *   Can be a React component class
+     */
+    renderIcon?: ComponentType;
+    /**
+     * Specify the size of the Link. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * @description Specify the target attribute for the `<a>` node.
+     */
+    target?: HTMLAttributeAnchorTarget;
+    /**
+     * Specify whether you want the link to receive visited styles after the link has been clicked
+     */
+    visited?: boolean;
+}
+declare const Link: React.ForwardRefExoticComponent<LinkProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLAnchorElement>>;
+export default Link;

package/es/components/Link/Link.js

@@ -21,6 +21,7 @@ const Link = /*#__PURE__*/React__default.forwardRef(function Link(_ref, ref) {
     visited = false,
     renderIcon: Icon,
     size,
+    target,
     ...rest
   } = _ref;
   const prefix = usePrefix();
@@ -30,7 +31,7 @@ const Link = /*#__PURE__*/React__default.forwardRef(function Link(_ref, ref) {
     [`${prefix}--link--visited`]: visited,
     [`${prefix}--link--${size}`]: size
   });
-  const rel = rest.target === '_blank' ? 'noopener' : null;
+  const rel = target === '_blank' ? 'noopener' : undefined;
   const linkProps = {
     className,
     rel
@@ -76,6 +77,7 @@ Link.propTypes = {
    * Optional prop to render an icon next to the link.
    * Can be a React component class
    */
+  // @ts-expect-error - PropTypes are unable to cover this case.
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * Specify the size of the Link. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
@@ -86,6 +88,5 @@ Link.propTypes = {
    */
   visited: PropTypes.bool
 };
-var Link$1 = Link;
 
-export { Link$1 as default };
+export { Link as default };

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

package/es/components/RadioButtonGroup/RadioButtonGroup.js

@@ -106,7 +106,6 @@ const RadioButtonGroup = /*#__PURE__*/React__default.forwardRef((props, ref) =>
     className: fieldsetClasses,
     disabled: disabled,
     "data-invalid": invalid ? true : undefined,
-    "aria-readonly": readOnly,
     "aria-describedby": showHelper && helperText ? helperId : undefined
   }, rest), legendText && /*#__PURE__*/React__default.createElement(Legend, {
     className: `${prefix}--label`

package/es/components/Search/Search.d.ts

@@ -28,6 +28,10 @@ export interface SearchProps extends InputPropsBase {
      * Specify whether the `<input>` should be disabled
      */
     disabled?: boolean;
+    /**
+     * Specify whether or not ExpandableSearch should render expanded or not
+     */
+    isExpanded?: boolean;
     /**
      * Specify a custom `id` for the input
      */

package/es/components/Search/Search.js

@@ -29,6 +29,7 @@ const Search = /*#__PURE__*/React__default.forwardRef(function Search(_ref, forw
     closeButtonLabelText = 'Clear search input',
     defaultValue,
     disabled,
+    isExpanded = true,
     id,
     labelText,
     // @ts-expect-error: deprecated prop
@@ -45,6 +46,7 @@ const Search = /*#__PURE__*/React__default.forwardRef(function Search(_ref, forw
     value,
     ...rest
   } = _ref;
+  const hasPropValue = value || defaultValue ? true : false;
   const prefix = usePrefix();
   const {
     isFluid
@@ -54,7 +56,7 @@ const Search = /*#__PURE__*/React__default.forwardRef(function Search(_ref, forw
   const inputId = useId('search-input');
   const uniqueId = id || inputId;
   const searchId = `${uniqueId}-search`;
-  const [hasContent, setHasContent] = useState(value || defaultValue || false);
+  const [hasContent, setHasContent] = useState(hasPropValue || false);
   const [prevValue, setPrevValue] = useState(value);
   const searchClasses = cx({
     [`${prefix}--search`]: true,
@@ -67,7 +69,7 @@ const Search = /*#__PURE__*/React__default.forwardRef(function Search(_ref, forw
   }, className);
   const clearClasses = cx({
     [`${prefix}--search-close`]: true,
-    [`${prefix}--search-close--hidden`]: !hasContent
+    [`${prefix}--search-close--hidden`]: !hasContent || !isExpanded
   });
   if (value !== prevValue) {
     setHasContent(!!value);
@@ -162,6 +164,10 @@ Search.propTypes = {
    * Specify a custom `id` for the input
    */
   id: PropTypes.string,
+  /**
+   * Specify whether or not ExpandableSearch should render expanded or not
+   */
+  isExpanded: PropTypes.bool,
   /**
    * Provide the label text for the Search icon
    */

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" | "invalid" | "name" | "readOnly" | "required" | "labelText" | "helperText" | "invalidText" | "hideLabel" | "warn" | "warnText" | "light" | "noLabel"> & React.RefAttributes<HTMLSelectElement>>;
+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>>;
 export default Select;

package/es/components/UIShell/HeaderMenuItem.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { type ComponentProps, type ReactNode, ElementType } from 'react';
+import { LinkProps } from './Link';
+type HeaderMenuItemProps<E extends ElementType> = LinkProps<E> & {
+    className?: string | undefined;
+    isActive?: boolean | undefined;
+    isCurrentPage?: boolean | undefined;
+    'aria-current'?: string | undefined;
+    children: ReactNode;
+    role?: ComponentProps<'li'>['role'];
+    tabIndex?: number | undefined;
+};
+declare const HeaderMenuItem: (<E extends React.ElementType<any> = "a">(props: HeaderMenuItemProps<E>) => JSX.Element) & {
+    displayName?: string | undefined;
+    propTypes?: React.WeakValidationMap<HeaderMenuItemProps<any>> | undefined;
+};
+export default HeaderMenuItem;

package/es/components/UIShell/HeaderMenuItem.js

@@ -7,13 +7,13 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React__default, { forwardRef } 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';
 
-const HeaderMenuItem = /*#__PURE__*/React__default.forwardRef(function HeaderMenuItem(_ref, ref) {
+function HeaderMenuItemRenderFunction(_ref, ref) {
   let {
     className,
     isActive,
@@ -45,7 +45,8 @@ const HeaderMenuItem = /*#__PURE__*/React__default.forwardRef(function HeaderMen
   }), /*#__PURE__*/React__default.createElement("span", {
     className: `${prefix}--text-truncate--end`
   }, children)));
-});
+}
+const HeaderMenuItem = /*#__PURE__*/forwardRef(HeaderMenuItemRenderFunction);
 HeaderMenuItem.displayName = 'HeaderMenuItem';
 HeaderMenuItem.propTypes = {
   /**

package/es/components/UIShell/HeaderPanel.js

@@ -9,38 +9,30 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import React__default from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
 const HeaderPanel = /*#__PURE__*/React__default.forwardRef(function HeaderPanel(_ref, ref) {
   let {
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledBy,
     children,
     className: customClassName,
     expanded,
     ...other
   } = _ref;
   const prefix = usePrefix();
-  const accessibilityLabel = {
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledBy
-  };
   const className = cx(`${prefix}--header-panel`, {
     [`${prefix}--header-panel--expanded`]: expanded,
     [customClassName]: !!customClassName
   });
   return /*#__PURE__*/React__default.createElement("div", _extends({}, other, {
-    className: className
-  }, accessibilityLabel, {
+    className: className,
     ref: ref
   }), children);
 });
 HeaderPanel.propTypes = {
   /**
-   * Required props for accessibility label on the underlying menu
+   * The content that will render inside of the `HeaderPanel`
    */
-  ...AriaLabelPropType,
+  children: PropTypes.node,
   /**
    * Optionally provide a custom class to apply to the underlying `<li>` node
    */