@carbon/react 1.80.1 → 1.81.0-rc.0

package/es/components/Slider/Slider.d.ts

@@ -319,9 +319,9 @@ declare class Slider extends PureComponent<SliderProps> {
         correctedPosition: null;
         isRtl: boolean;
     };
-    thumbRef: React.RefObject<HTMLDivElement>;
-    thumbRefUpper: React.RefObject<HTMLDivElement>;
-    filledTrackRef: React.RefObject<HTMLDivElement>;
+    thumbRef: React.RefObject<HTMLDivElement | null>;
+    thumbRefUpper: React.RefObject<HTMLDivElement | null>;
+    filledTrackRef: React.RefObject<HTMLDivElement | null>;
     element: HTMLDivElement | null;
     inputId: string;
     track: HTMLDivElement | null | undefined;
@@ -339,16 +339,6 @@ declare class Slider extends PureComponent<SliderProps> {
      * should be called.
      */
     componentDidUpdate(prevProps: any, prevState: any): void;
-    /**
-     * Synonymous to ECMA2017+ `Math.clamp`.
-     *
-     * @param {number} val
-     * @param {number} min
-     * @param {number} max
-     *
-     * @returns `val` if `max>=val>=min`; `min` if `val<min`; `max` if `val>max`.
-     */
-    clamp(val: any, min: any, max: any): number;
     /**
      * Rounds a given value to the nearest step defined by the slider's `step`
      * prop.

package/es/components/Slider/Slider.js

@@ -19,6 +19,7 @@ import '../Text/index.js';
 import '../Tooltip/DefinitionTooltip.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import { LowerHandle, LowerHandleFocus, UpperHandle, UpperHandleFocus } from './SliderHandles.js';
+import { clamp } from '../../internal/clamp.js';
 import { throttle } from '../../node_modules/es-toolkit/dist/compat/function/throttle.mjs.js';
 import { Text } from '../Text/Text.js';
 
@@ -564,7 +565,7 @@ class Slider extends PureComponent {
         range
       });
       /** `leftPercentRaw` clamped between 0 and 1. */
-      const leftPercent = Math.min(1, Math.max(0, leftPercentRaw));
+      const leftPercent = clamp(leftPercentRaw, 0, 1);
       if (useRawValue) {
         return {
           value,
@@ -855,19 +856,6 @@ class Slider extends PureComponent {
     }
   }
 
-  /**
-   * Synonymous to ECMA2017+ `Math.clamp`.
-   *
-   * @param {number} val
-   * @param {number} min
-   * @param {number} max
-   *
-   * @returns `val` if `max>=val>=min`; `min` if `val<min`; `max` if `val>max`.
-   */
-  clamp(val, min, max) {
-    return Math.max(min, Math.min(val, max));
-  }
-
   /**
    * Rounds a given value to the nearest step defined by the slider's `step`
    * prop.

package/es/components/Tabs/Tabs.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
-import React, { type ReactNode, type MouseEvent, type KeyboardEvent, type HTMLAttributes, type ComponentType, type ReactHTML } from 'react';
+import React, { type ReactNode, type MouseEvent, type KeyboardEvent, type HTMLAttributes, type ComponentType, type HTMLElementType } from 'react';
 type DivAttributes = HTMLAttributes<HTMLDivElement>;
 /**
  * Tabs
@@ -312,7 +312,7 @@ export interface TabProps extends HTMLAttributes<HTMLElement> {
     /**
      * Provide a custom element to render instead of the default button
      */
-    as?: keyof ReactHTML | ComponentType;
+    as?: HTMLElementType | ComponentType;
     /**
      * Provide child elements to be rendered inside `Tab`.
      */

package/es/components/Tabs/Tabs.js

@@ -10,7 +10,7 @@ import { ChevronLeft, ChevronRight, Close } from '@carbon/icons-react';
 import { breakpoints } from '@carbon/layout';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default, { useState, useRef, useCallback, useEffect, forwardRef, createContext, useMemo } from 'react';
+import React__default, { useState, useRef, useCallback, useEffect, forwardRef, createContext, useMemo, isValidElement } from 'react';
 import '../Grid/FlexGrid.js';
 import { Grid as GridAsGridComponent } from '../Grid/Grid.js';
 import '../Grid/Row.js';
@@ -78,6 +78,9 @@ function Tabs(_ref) {
     onTabCloseRequest
   } = _ref;
   const baseId = useId('ccs');
+  if (dismissable && !onTabCloseRequest) {
+    console.error('dismissable property specified without also providing an onTabCloseRequest property.');
+  }
   // The active index is used to track the element which has focus in our tablist
   const [activeIndex, setActiveIndex] = useState(defaultSelectedIndex);
   // The selected index is used for the tab/panel pairing which is "visible"
@@ -279,7 +282,8 @@ function TabList(_ref4) {
   let hasSecondaryLabelTabs = false;
   if (contained) {
     hasSecondaryLabelTabs = React__default.Children.toArray(children).some(child => {
-      return isElement(child) && !!child.props.secondaryLabel;
+      const _child = child;
+      return /*#__PURE__*/React__default.isValidElement(child) && !!_child.props.secondaryLabel;
     });
   }
   const isLg = useMatchMedia(lgMediaQuery);
@@ -643,7 +647,7 @@ function TabListVertical(_ref8) {
       if (containerTop && containerHeight) {
         // scrolls so selected tab is in view
         if (selectedPositionTop - halfTabHeight < containerTop || selectedPositionTop - containerTop + verticalTabHeight + halfTabHeight > containerHeight) {
-          ref.current.scrollTo({
+          ref.current && ref.current.scrollTo({
             top: (selectedIndex - 1) * verticalTabHeight,
             behavior: 'smooth'
           });
@@ -984,7 +988,6 @@ Tab.propTypes = {
   /**
    * Provide a custom element to render instead of the default button
    */
-  // @ts-expect-error: Invalid prop type derivation
   as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
   /**
    * Provide child elements to be rendered inside `Tab`.
@@ -1015,7 +1018,6 @@ Tab.propTypes = {
   /**
    * A component used to render an icon.
    */
-  // @ts-expect-error: Invalid prop type derivation
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * An optional label to render under the primary tab label.
@@ -1044,7 +1046,7 @@ const IconTab = /*#__PURE__*/React__default.forwardRef(function IconTab(_ref11,
   const value = useMemo(() => ({
     badgeIndicator
   }), [badgeIndicator]);
-  const hasSize20 = /*#__PURE__*/React__default.isValidElement(children) && children.props?.size === 20;
+  const hasSize20 = /*#__PURE__*/isValidElement(children) && children.props.size === 20;
   const classNames = cx(`${prefix}--tabs__nav-item--icon-only`, customClassName, {
     [`${prefix}--tabs__nav-item--icon-only__20`]: hasSize20
   });

package/es/components/Tabs/usePressable.js

@@ -10,7 +10,7 @@ import { useRef, useState, useEffect } from 'react';
 /* istanbul ignore file */
 
 /**
- * @param {React.RefObject<HTMLElement>} ref
+ * @param {React.RefObject<HTMLElement | null>} ref
  *
  * @param {{
  *   onPress?(state: { longPress: boolean }): void,

package/es/components/Tag/Tag.js

@@ -40,7 +40,7 @@ const SIZES = {
   md: 'md',
   lg: 'lg'
 };
-const Tag = /*#__PURE__*/React__default.forwardRef((_ref, forwardRef) => {
+const TagBase = /*#__PURE__*/React__default.forwardRef((_ref, forwardRef) => {
   let {
     children,
     className,
@@ -61,7 +61,13 @@ const Tag = /*#__PURE__*/React__default.forwardRef((_ref, forwardRef) => {
     ...other
   } = _ref;
   const prefix = usePrefix();
-  const tagRef = useRef();
+  const tagRef = useRef(null);
+  if (filter) {
+    console.warn('The `filter` prop for Tag has been deprecated and will be removed in the next major version. Use DismissibleTag instead.');
+  }
+  if (onClose) {
+    console.warn('The `onClose` prop for Tag has been deprecated and will be removed in the next major version. Use DismissibleTag instead.');
+  }
   const ref = useMergedRefs([forwardRef, tagRef]);
   const tagId = id || `tag-${useId()}`;
   const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
@@ -141,6 +147,7 @@ const Tag = /*#__PURE__*/React__default.forwardRef((_ref, forwardRef) => {
     className: `${prefix}--tag__decorator`
   }, normalizedDecorator) : '');
 });
+const Tag = TagBase;
 Tag.propTypes = {
   /**
    * Provide an alternative tag or component to use instead of the default

package/es/components/Text/Text.js

@@ -7,11 +7,11 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default, { forwardRef, useContext, Children } from 'react';
+import React__default, { useContext, Children } from 'react';
 import './index.js';
 import { TextDirectionContext } from './TextDirectionContext.js';
 
-const Text = /*#__PURE__*/forwardRef((_ref, ref) => {
+const TextBase = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
     as,
     children,
@@ -54,6 +54,7 @@ const Text = /*#__PURE__*/forwardRef((_ref, ref) => {
     ref: ref
   }, rest, textProps), children));
 });
+const Text = TextBase;
 Text.propTypes = {
   /**
    * Provide a custom element type used to render the outermost node

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

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2023, 2024
+ * Copyright IBM Corp. 2023, 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/TextInput/ControlledPasswordInput.js

@@ -11,13 +11,11 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import { WarningFilled, ViewOff, View } from '@carbon/icons-react';
 import { textInputProps } from './util.js';
-import { warning } from '../../internal/warning.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useId } from '../../internal/useId.js';
 import { noopFn } from '../../internal/noopFn.js';
 
-let didWarnAboutDeprecation = false;
 const ControlledPasswordInput = /*#__PURE__*/React__default.forwardRef(function ControlledPasswordInput(_ref, ref) {
   let {
     labelText,
@@ -45,10 +43,6 @@ const ControlledPasswordInput = /*#__PURE__*/React__default.forwardRef(function
   } = _ref;
   const prefix = usePrefix();
   const controlledPasswordInstanceId = useId();
-  if (process.env.NODE_ENV !== 'production') {
-    process.env.NODE_ENV !== "production" ? warning(didWarnAboutDeprecation, '`<TextInput.ControlledPasswordInput>` has been deprecated in favor of `<TextInput.PasswordInput />` and will be removed in the next major release of `carbon-components-react`') : void 0;
-    didWarnAboutDeprecation = true;
-  }
   const errorId = id + '-error-msg';
   const textInputClasses = cx(`${prefix}--text-input`, `${prefix}--password-input`, className, {
     [`${prefix}--text-input--light`]: light,

package/es/components/TextInput/TextInput.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/TextInput/TextInput.js

@@ -9,8 +9,6 @@ import PropTypes from 'prop-types';
 import React__default, { useState, useContext, useRef, useEffect } from 'react';
 import cx from 'classnames';
 import { useNormalizedInputProps } from '../../internal/useNormalizedInputProps.js';
-import PasswordInput from './PasswordInput.js';
-import ControlledPasswordInput from './ControlledPasswordInput.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { textInputProps } from './util.js';
 import '../FluidForm/FluidForm.js';
@@ -212,8 +210,6 @@ const TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref
   }), isFluid && !inline && normalizedProps.validation), !isFluid && !inline && (normalizedProps.validation || helper)));
 });
 TextInput.displayName = 'TextInput';
-TextInput.PasswordInput = PasswordInput;
-TextInput.ControlledPasswordInput = ControlledPasswordInput;
 TextInput.propTypes = {
   /**
    * Specify an optional className to be applied to the `<input>` node

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

@@ -1,3 +1,9 @@
+/**
+ * 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.
+ */
 import TextInput, { type TextInputProps } from './TextInput';
 import { type TextInputSkeletonProps } from './TextInput.Skeleton';
 export { default as TextInputSkeleton } from './TextInput.Skeleton';

package/es/components/TextInput/index.js

@@ -5,14 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { deprecateFieldOnObject } from '../../internal/deprecateFieldOnObject.js';
-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';
-
-if (process.env.NODE_ENV !== 'production') {
-  deprecateFieldOnObject(TextInput, 'ControlledPasswordInput', ControlledPasswordInput);
-  deprecateFieldOnObject(TextInput, 'PasswordInput', PasswordInput);
-}

package/es/components/Tile/Tile.js

@@ -203,7 +203,6 @@ ClickableTile.propTypes = {
   /**
    * A component used to render an icon.
    */
-  // @ts-expect-error: Invalid derived prop type, seemingly no real solution.
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
 };
 const SelectableTile = /*#__PURE__*/React__default.forwardRef(function SelectableTile(_ref3, ref) {

package/es/components/Toggle/Toggle.d.ts

@@ -6,7 +6,7 @@
  */
 import React, { type KeyboardEventHandler, type MouseEventHandler } from 'react';
 import PropTypes from 'prop-types';
-type ExcludedAttributes = 'aria-labelledby' | 'aria-checked' | 'type' | 'role' | 'id' | 'size' | 'onClick';
+type ExcludedAttributes = 'aria-labelledby' | 'aria-checked' | 'type' | 'role' | 'id' | 'size' | 'onClick' | 'onToggle';
 export interface ToggleProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, ExcludedAttributes> {
     /**
      * Specify another element's id to be used as the label for this toggle

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

@@ -1,11 +1,10 @@
 /**
- * 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.
  */
 import PropTypes from 'prop-types';
-import React from 'react';
 export interface ToggleSmallSkeletonProps {
     ['aria-label']: string;
     /**
@@ -18,14 +17,14 @@ export interface ToggleSmallSkeletonProps {
     id?: string;
     /**
      * Provide the text that will be read by a screen reader when visiting this
-     * control
-     * `aria-label` is always required but will be null if `labelText` is also
-     * provided
+     * control. `aria-label` is always required but will be `null` if `labelText`
+     * is also provided.
      */
     labelText?: string;
 }
-declare class ToggleSmallSkeleton extends React.Component<ToggleSmallSkeletonProps> {
-    static propTypes: {
+export declare const ToggleSmallSkeleton: {
+    ({ id, labelText, className, ...rest }: ToggleSmallSkeletonProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
         "aria-label": PropTypes.Validator<string>;
         /**
          * Specify an optional className to add to the form item wrapper.
@@ -37,13 +36,9 @@ declare class ToggleSmallSkeleton extends React.Component<ToggleSmallSkeletonPro
         id: PropTypes.Requireable<string>;
         /**
          * Provide the text that will be read by a screen reader when visiting this
-         * control
-         * `aria-label` is always required but will be null if `labelText` is also
-         * provided
+         * control. `aria-label` is always required but will be `null` if `labelText`
+         * is also provided.
          */
         labelText: PropTypes.Requireable<string>;
     };
-    render(): import("react/jsx-runtime").JSX.Element;
-}
-export default ToggleSmallSkeleton;
-export { ToggleSmallSkeleton };
+};

package/es/components/ToggleSmall/ToggleSmall.Skeleton.js

@@ -5,47 +5,44 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React__default, { useContext } from 'react';
 import cx from 'classnames';
 import { PrefixContext } from '../../internal/usePrefix.js';
 
 var _path;
-class ToggleSmallSkeleton extends React__default.Component {
-  render() {
-    const {
-      id,
-      labelText,
-      className,
-      ...rest
-    } = this.props;
-    return /*#__PURE__*/React__default.createElement(PrefixContext.Consumer, null, prefix => {
-      return /*#__PURE__*/React__default.createElement("div", _extends({
-        className: cx(`${prefix}--form-item`, className)
-      }, rest), /*#__PURE__*/React__default.createElement("input", {
-        type: "checkbox",
-        id: id,
-        className: `${prefix}--toggle ${prefix}--toggle--small ${prefix}--skeleton`
-      }), /*#__PURE__*/React__default.createElement("label", {
-        className: `${prefix}--toggle__label ${prefix}--skeleton`,
-        htmlFor: id
-      }, labelText && /*#__PURE__*/React__default.createElement("span", {
-        className: `${prefix}--toggle__label-text`
-      }, labelText), /*#__PURE__*/React__default.createElement("span", {
-        className: `${prefix}--toggle__appearance`
-      }, /*#__PURE__*/React__default.createElement("svg", {
-        className: `${prefix}--toggle__check`,
-        width: "6px",
-        height: "5px",
-        viewBox: "0 0 6 5"
-      }, _path || (_path = /*#__PURE__*/React__default.createElement("path", {
-        d: "M2.2403 2.7299L4.9245 0 6 1.1117 2.2384 5 0 2.6863 1.0612 1.511z"
-      }))))));
-    });
-  }
-}
-_defineProperty(ToggleSmallSkeleton, "propTypes", {
+const ToggleSmallSkeleton = _ref => {
+  let {
+    id,
+    labelText,
+    className,
+    ...rest
+  } = _ref;
+  const prefix = useContext(PrefixContext);
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: cx(`${prefix}--form-item`, className)
+  }, rest), /*#__PURE__*/React__default.createElement("input", {
+    type: "checkbox",
+    id: id,
+    className: `${prefix}--toggle ${prefix}--toggle--small ${prefix}--skeleton`
+  }), /*#__PURE__*/React__default.createElement("label", {
+    className: `${prefix}--toggle__label ${prefix}--skeleton`,
+    htmlFor: id
+  }, labelText && /*#__PURE__*/React__default.createElement("span", {
+    className: `${prefix}--toggle__label-text`
+  }, labelText), /*#__PURE__*/React__default.createElement("span", {
+    className: `${prefix}--toggle__appearance`
+  }, /*#__PURE__*/React__default.createElement("svg", {
+    className: `${prefix}--toggle__check`,
+    width: "6px",
+    height: "5px",
+    viewBox: "0 0 6 5"
+  }, _path || (_path = /*#__PURE__*/React__default.createElement("path", {
+    d: "M2.2403 2.7299L4.9245 0 6 1.1117 2.2384 5 0 2.6863 1.0612 1.511z"
+  }))))));
+};
+ToggleSmallSkeleton.propTypes = {
   ['aria-label']: PropTypes.string.isRequired,
   /**
    * Specify an optional className to add to the form item wrapper.
@@ -57,11 +54,10 @@ _defineProperty(ToggleSmallSkeleton, "propTypes", {
   id: PropTypes.string,
   /**
    * Provide the text that will be read by a screen reader when visiting this
-   * control
-   * `aria-label` is always required but will be null if `labelText` is also
-   * provided
+   * control. `aria-label` is always required but will be `null` if `labelText`
+   * is also provided.
    */
   labelText: PropTypes.string
-});
+};
 
-export { ToggleSmallSkeleton, ToggleSmallSkeleton as default };
+export { ToggleSmallSkeleton };

package/es/components/Toggletip/index.js

@@ -127,8 +127,11 @@ function Toggletip(_ref2) {
       actions.close();
     }
   });
-  useWindowEvent('click', event => {
-    if (open && ref.current && !ref.current.contains(event.target)) {
+  useWindowEvent('click', _ref3 => {
+    let {
+      target
+    } = _ref3;
+    if (open && target instanceof Node && !ref.current?.contains(target)) {
       actions.close();
     }
   });
@@ -206,14 +209,14 @@ Toggletip.propTypes = {
  * clicks and keyboard interactions.
  */
 
-const ToggletipButton = /*#__PURE__*/React__default.forwardRef(function ToggletipButton(_ref3, ref) {
+const ToggletipButton = /*#__PURE__*/React__default.forwardRef(function ToggletipButton(_ref4, ref) {
   let {
     children,
     className: customClassName,
     label = 'Show information',
     as: BaseComponent,
     ...rest
-  } = _ref3;
+  } = _ref4;
   const toggletip = useToggletip();
   const prefix = usePrefix();
   const className = cx(`${prefix}--toggletip-button`, customClassName);
@@ -251,11 +254,11 @@ ToggletipButton.displayName = 'ToggletipButton';
  * `children` passed in as a prop inside of `PopoverContent` so that they will
  * be rendered inside of the popover for this component.
  */
-const ToggletipContent = /*#__PURE__*/React__default.forwardRef(function ToggletipContent(_ref4, ref) {
+const ToggletipContent = /*#__PURE__*/React__default.forwardRef(function ToggletipContent(_ref5, ref) {
   let {
     children,
     className: customClassName
-  } = _ref4;
+  } = _ref5;
   const toggletip = useToggletip();
   const prefix = usePrefix();
   return /*#__PURE__*/React__default.createElement(PopoverContent, _extends({
@@ -283,11 +286,11 @@ ToggletipContent.displayName = 'ToggletipContent';
  * `ToggletipActions` is a container for one or two actions present at the base
  * of a toggletip. It is used for layout of these items.
  */
-function ToggletipActions(_ref5) {
+function ToggletipActions(_ref6) {
   let {
     children,
     className: customClassName
-  } = _ref5;
+  } = _ref6;
   const prefix = usePrefix();
   const className = cx(`${prefix}--toggletip-actions`, customClassName);
   return /*#__PURE__*/React__default.createElement("div", {

package/es/components/Tooltip/Tooltip.d.ts

@@ -15,7 +15,7 @@ interface TooltipBaseProps {
     /**
      * Pass in the child to which the tooltip will be applied
      */
-    children?: React.ReactElement;
+    children?: React.ReactElement<any>;
     /**
      * Specify an optional className to be applied to the container node
      */

package/es/components/TreeView/TreeView.d.ts

@@ -4,7 +4,7 @@
  * 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 from 'react';
+import React, { type JSX } from 'react';
 import TreeNode, { TreeNodeProps } from './TreeNode';
 export type TreeViewProps = {
     /**

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

@@ -28,11 +28,13 @@ declare const Content: {
         suppressContentEditableWarning?: boolean | undefined;
         suppressHydrationWarning?: boolean | undefined;
         accessKey?: string | undefined;
+        autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
         autoFocus?: boolean | undefined;
         contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
         contextMenu?: string | undefined;
         dir?: string | undefined;
         draggable?: (boolean | "true" | "false") | undefined;
+        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
         hidden?: boolean | undefined;
         id?: string | undefined;
         lang?: string | undefined;
@@ -56,7 +58,6 @@ declare const Content: {
         rev?: string | undefined;
         typeof?: string | undefined;
         vocab?: string | undefined;
-        autoCapitalize?: string | undefined;
         autoCorrect?: string | undefined;
         autoSave?: string | undefined;
         color?: string | undefined;
@@ -68,6 +69,10 @@ declare const Content: {
         results?: number | undefined;
         security?: string | undefined;
         unselectable?: "on" | "off" | undefined;
+        popover?: "" | "auto" | "manual" | undefined;
+        popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
+        popoverTarget?: string | undefined;
+        inert?: boolean | undefined;
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
         is?: string | undefined;
         "aria-activedescendant"?: string | undefined;
@@ -284,8 +289,16 @@ declare const Content: {
         onAnimationEndCapture?: React.AnimationEventHandler<HTMLElement> | undefined;
         onAnimationIteration?: React.AnimationEventHandler<HTMLElement> | undefined;
         onAnimationIterationCapture?: React.AnimationEventHandler<HTMLElement> | undefined;
+        onToggle?: React.ToggleEventHandler<HTMLElement> | undefined;
+        onBeforeToggle?: React.ToggleEventHandler<HTMLElement> | undefined;
+        onTransitionCancel?: React.TransitionEventHandler<HTMLElement> | undefined;
+        onTransitionCancelCapture?: React.TransitionEventHandler<HTMLElement> | undefined;
         onTransitionEnd?: React.TransitionEventHandler<HTMLElement> | undefined;
         onTransitionEndCapture?: React.TransitionEventHandler<HTMLElement> | undefined;
+        onTransitionRun?: React.TransitionEventHandler<HTMLElement> | undefined;
+        onTransitionRunCapture?: React.TransitionEventHandler<HTMLElement> | undefined;
+        onTransitionStart?: React.TransitionEventHandler<HTMLElement> | undefined;
+        onTransitionStartCapture?: React.TransitionEventHandler<HTMLElement> | undefined;
     }, Element>;
     propTypes: {
         /**

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

@@ -7,5 +7,5 @@
 /**
  * Generic container for `HeaderGlobalAction` components
  */
-declare const HeaderGlobalBar: (props: import("../../types/common").ReactAttr<"div">) => React.ReactElement;
+declare const HeaderGlobalBar: (props: import("../../types/common").ReactAttr<"div">) => React.ReactElement<any>;
 export default HeaderGlobalBar;