@carbon/react 1.80.1 → 1.81.0

package/es/components/MultiSelect/MultiSelect.js

@@ -11,7 +11,7 @@ import cx from 'classnames';
 import { useSelect } from 'downshift';
 import isEqual from 'react-fast-compare';
 import PropTypes from 'prop-types';
-import React__default, { useMemo, useContext, useState, useLayoutEffect, isValidElement } from 'react';
+import React__default, { useMemo, useContext, useState, useLayoutEffect, isValidElement, useCallback } from 'react';
 import ListBox from '../ListBox/index.js';
 import { sortingPropTypes } from './MultiSelectPropTypes.js';
 import { defaultSortItems, defaultCompareItems } from './tools/sorting.js';
@@ -424,7 +424,20 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   const menuProps = useMemo(() => getMenuProps({
     ref: enableFloatingStyles ? refs.setFloating : null
   }), [enableFloatingStyles, getMenuProps, refs.setFloating]);
-  const labelProps = ! /*#__PURE__*/isValidElement(titleText) ? getLabelProps() : null;
+  const allLabelProps = getLabelProps();
+  const labelProps = /*#__PURE__*/isValidElement(titleText) ? {
+    id: allLabelProps.id
+  } : allLabelProps;
+  const getSelectionStats = useCallback((selectedItems, filteredItems) => {
+    const hasIndividualSelections = selectedItems.some(selected => !selected.isSelectAll);
+    const nonSelectAllSelectedCount = selectedItems.filter(selected => !selected.isSelectAll).length;
+    const totalSelectableCount = filteredItems.filter(item => !item.isSelectAll && !item.disabled).length;
+    return {
+      hasIndividualSelections,
+      nonSelectAllSelectedCount,
+      totalSelectableCount
+    };
+  }, [selectedItems, filteredItems]);
   return /*#__PURE__*/React__default.createElement("div", {
     className: wrapperClasses
   }, /*#__PURE__*/React__default.createElement("label", _extends({
@@ -478,7 +491,12 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     className: `${prefix}--list-box__inner-wrapper--decorator`
   }, normalizedDecorator) : ''), /*#__PURE__*/React__default.createElement(ListBox.Menu, menuProps, isOpen && sortItems(filteredItems, sortOptions).map((item, index) => {
     const isChecked = selectedItems.filter(selected => isEqual(selected, item)).length > 0;
-    const isIndeterminate = selectedItems.length !== 0 && item['isSelectAll'] && !isChecked;
+    const {
+      hasIndividualSelections,
+      nonSelectAllSelectedCount,
+      totalSelectableCount
+    } = getSelectionStats(selectedItems, filteredItems);
+    const isIndeterminate = item['isSelectAll'] && hasIndividualSelections && nonSelectAllSelectedCount < totalSelectableCount;
     const itemProps = getItemProps({
       item,
       // we don't want Downshift to set aria-selected for us
@@ -701,4 +719,4 @@ MultiSelect.propTypes = {
   warnText: PropTypes.node
 };
 
-export { MultiSelect as default };
+export { MultiSelect };

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

@@ -4,7 +4,5 @@
  * 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 MultiSelect from './MultiSelect';
-import { default as FilterableMultiSelect } from './FilterableMultiSelect';
-export { FilterableMultiSelect, MultiSelect };
-export default MultiSelect;
+export * from './FilterableMultiSelect';
+export * from './MultiSelect';

package/es/components/NumberInput/NumberInput.js

@@ -17,6 +17,7 @@ import deprecate from '../../prop-types/deprecate.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import '../Text/index.js';
+import { clamp } from '../../internal/clamp.js';
 import { Text } from '../Text/Text.js';
 
 var _Subtract, _Add;
@@ -173,7 +174,7 @@ const NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(
       const rawValue = direction === 'up' ? currentValue + step : currentValue - step;
       const precision = Math.max(getDecimalPlaces(currentValue), getDecimalPlaces(step));
       const floatValue = parseFloat(rawValue.toFixed(precision));
-      const newValue = typeof min !== 'undefined' && typeof max !== 'undefined' ? Math.min(Math.max(floatValue, min), max) : floatValue;
+      const newValue = clamp(floatValue, min ?? -Infinity, max ?? Infinity);
       const state = {
         value: allowEmpty && inputRef.current.value === '' && step === 0 ? '' : newValue,
         direction

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

@@ -6,6 +6,7 @@
  */
 import React, { type ElementType, type ReactNode, type Ref } from 'react';
 import { type MenuDirection, type MenuOffset } from '../../internal/FloatingMenu';
+import { PopoverAlignment } from '../Popover';
 /**
  * Calculates the offset for the floating menu.
  *
@@ -16,6 +17,10 @@ import { type MenuDirection, type MenuOffset } from '../../internal/FloatingMenu
  */
 export declare const getMenuOffset: MenuOffset;
 export interface OverflowMenuProps {
+    /**
+     * Specify how the trigger tooltip should be aligned.
+     */
+    align?: PopoverAlignment;
     /**
      * Specify a label to be read by screen readers on the container node
      */
@@ -105,7 +110,8 @@ export interface OverflowMenuProps {
      */
     size?: 'sm' | 'md' | 'lg';
     /**
-     * The ref to the HTML element that should receive focus when the OverflowMenu opens
+     * The ref to the overflow menu's trigger button element.
+     * @deprecated Use the standard React `ref` prop instead.
      */
     innerRef?: Ref<any>;
 }

package/es/components/OverflowMenu/OverflowMenu.js

@@ -11,7 +11,6 @@ import { OverflowMenuVertical } from '@carbon/icons-react';
 import cx from 'classnames';
 import invariant from 'invariant';
 import PropTypes from 'prop-types';
-import { ClickListener } from '../../internal/ClickListener.js';
 import { DIRECTION_TOP, DIRECTION_BOTTOM, FloatingMenu } from '../../internal/FloatingMenu.js';
 import { ArrowUp, ArrowRight, ArrowDown, ArrowLeft, Escape } from '../../internal/keyboard/keys.js';
 import { matches } from '../../internal/keyboard/match.js';
@@ -19,8 +18,10 @@ import { noopFn } from '../../internal/noopFn.js';
 import { PrefixContext } from '../../internal/usePrefix.js';
 import deprecate from '../../prop-types/deprecate.js';
 import mergeRefs from '../../tools/mergeRefs.js';
-import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
+import { setupGetInstanceId } from '../../tools/setupGetInstanceId.js';
 import { IconButton } from '../IconButton/index.js';
+import { useOutsideClick } from '../../internal/useOutsideClick.js';
+import deprecateValuesWithin from '../../prop-types/deprecateValuesWithin.js';
 
 const getInstanceId = setupGetInstanceId();
 const on = function (target) {
@@ -89,8 +90,25 @@ const getMenuOffset = (menuBody, direction, trigger, flip) => {
       };
   }
 };
+
+// TODO: Replace this code when align mapping is consolidated.
+// https://github.com/carbon-design-system/carbon/pull/19081
+const propMappingFunction = deprecatedValue => {
+  const mapping = {
+    'top-left': 'top-start',
+    'top-right': 'top-end',
+    'bottom-left': 'bottom-start',
+    'bottom-right': 'bottom-end',
+    'left-bottom': 'left-end',
+    'left-top': 'left-start',
+    'right-bottom': 'right-end',
+    'right-top': 'right-start'
+  };
+  return mapping[deprecatedValue];
+};
 const OverflowMenu = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
+    align,
     ['aria-label']: ariaLabel = null,
     ariaLabel: deprecatedAriaLabel,
     children,
@@ -112,6 +130,7 @@ const OverflowMenu = /*#__PURE__*/forwardRef((_ref, ref) => {
     renderIcon: IconElement = OverflowMenuVertical,
     selectorPrimaryFocus = '[data-floating-menu-primary-focus]',
     size = 'md',
+    innerRef,
     ...other
   } = _ref;
   const prefix = useContext(PrefixContext);
@@ -127,6 +146,7 @@ const OverflowMenu = /*#__PURE__*/forwardRef((_ref, ref) => {
   const prevOpenState = useRef(open);
   /** The element ref of the tooltip's trigger button. */
   const triggerRef = useRef(null);
+  const wrapperRef = useRef(null);
 
   // Sync open prop changes.
   useEffect(() => {
@@ -150,6 +170,14 @@ const OverflowMenu = /*#__PURE__*/forwardRef((_ref, ref) => {
     }
     prevOpenState.current = open;
   }, [open, onClose]);
+  useOutsideClick(wrapperRef, _ref2 => {
+    let {
+      target
+    } = _ref2;
+    if (open && (!menuBodyRef.current || target instanceof Node && !menuBodyRef.current.contains(target))) {
+      closeMenu();
+    }
+  });
   const focusMenuEl = useCallback(() => {
     if (triggerRef.current) {
       triggerRef.current.focus();
@@ -200,23 +228,18 @@ const OverflowMenu = /*#__PURE__*/forwardRef((_ref, ref) => {
       evt.stopPropagation();
     }
   };
-  const handleClickOutside = evt => {
-    if (open && (!menuBodyRef.current || evt.target instanceof Node && !menuBodyRef.current.contains(evt.target))) {
-      closeMenu();
-    }
-  };
 
   /**
    * Focuses the next enabled overflow menu item given the currently focused
    * item index and direction to move.
    */
-  const handleOverflowMenuItemFocus = _ref2 => {
+  const handleOverflowMenuItemFocus = _ref3 => {
     let {
-      currentIndex,
+      currentIndex = 0,
       direction
-    } = _ref2;
+    } = _ref3;
     const enabledIndices = Children.toArray(children).reduce((acc, curr, i) => {
-      if (/*#__PURE__*/isValidElement(curr) && !curr.props.disabled) {
+      if (/*#__PURE__*/React__default.isValidElement(curr) && !curr.props.disabled) {
         acc.push(i);
       }
       return acc;
@@ -314,12 +337,13 @@ const OverflowMenu = /*#__PURE__*/forwardRef((_ref, ref) => {
   }, /*#__PURE__*/cloneElement(menuBody, {
     'data-floating-menu-direction': direction
   }));
-  return /*#__PURE__*/React__default.createElement(ClickListener, {
-    onClickOutside: handleClickOutside
-  }, /*#__PURE__*/React__default.createElement("span", {
+  const combinedRef = innerRef ? mergeRefs(triggerRef, innerRef, ref) : mergeRefs(triggerRef, ref);
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
     className: `${prefix}--overflow-menu__wrapper`,
-    "aria-owns": open ? menuBodyId : undefined
+    "aria-owns": open ? menuBodyId : undefined,
+    ref: wrapperRef
   }, /*#__PURE__*/React__default.createElement(IconButton, _extends({}, other, {
+    align: align,
     type: "button",
     "aria-haspopup": true,
     "aria-expanded": open,
@@ -327,7 +351,7 @@ const OverflowMenu = /*#__PURE__*/forwardRef((_ref, ref) => {
     className: overflowMenuClasses,
     onClick: handleClick,
     id: id,
-    ref: mergeRefs(triggerRef, ref),
+    ref: combinedRef,
     size: size,
     label: iconDescription,
     kind: "ghost"
@@ -337,6 +361,35 @@ const OverflowMenu = /*#__PURE__*/forwardRef((_ref, ref) => {
   })), open && hasMountedTrigger && wrappedMenuBody));
 });
 OverflowMenu.propTypes = {
+  /**
+   * Specify how the trigger should align with the tooltip
+   */
+  align: deprecateValuesWithin(PropTypes.oneOf(['top', 'top-left',
+  // deprecated use top-start instead
+  'top-right',
+  // deprecated use top-end instead
+
+  'bottom', 'bottom-left',
+  // deprecated use bottom-start instead
+  'bottom-right',
+  // deprecated use bottom-end instead
+
+  'left', 'left-bottom',
+  // deprecated use left-end instead
+  'left-top',
+  // deprecated use left-start instead
+
+  'right', 'right-bottom',
+  // deprecated use right-end instead
+  'right-top',
+  // deprecated use right-start instead
+
+  // new values to match floating-ui
+  'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']),
+  //allowed prop values
+  ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'],
+  //optional mapper function
+  propMappingFunction),
   /**
    * Specify a label to be read by screen readers on the container node
    */
@@ -428,7 +481,6 @@ OverflowMenu.propTypes = {
   /**
    * A component used to render an icon.
    */
-  // @ts-expect-error: PropTypes are not expressive enough to cover this case
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * Specify a CSS selector that matches the DOM element that should

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

@@ -4,10 +4,8 @@
  * 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 { type OverflowMenuProps } from './OverflowMenu';
-declare const OverflowMenu: {
-    (props: OverflowMenuProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare const OverflowMenu: React.ForwardRefExoticComponent<OverflowMenuProps & React.RefAttributes<HTMLDivElement>>;
 export default OverflowMenu;
 export { OverflowMenu, type OverflowMenuProps };

package/es/components/OverflowMenu/index.js

@@ -5,17 +5,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React__default from 'react';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { OverflowMenu as OverflowMenu$2 } from './next/index.js';
 import { OverflowMenu as OverflowMenu$1 } from './OverflowMenu.js';
-import { createClassWrapper } from '../../internal/createClassWrapper.js';
 
-const OverflowMenuV11 = createClassWrapper(OverflowMenu$1);
-const OverflowMenu = props => {
+const OverflowMenu = /*#__PURE__*/forwardRef((props, ref) => {
   const enableV12OverflowMenu = useFeatureFlag('enable-v12-overflowmenu');
-  return enableV12OverflowMenu ? /*#__PURE__*/React__default.createElement(OverflowMenu$2, props) : /*#__PURE__*/React__default.createElement(OverflowMenuV11, props);
-};
+  return enableV12OverflowMenu ? /*#__PURE__*/React__default.createElement(OverflowMenu$2, _extends({}, props, {
+    ref: ref
+  })) : /*#__PURE__*/React__default.createElement(OverflowMenu$1, _extends({}, props, {
+    ref: ref
+  }));
+});
 OverflowMenu.displayName = 'OverflowMenu';
+OverflowMenu.propTypes = OverflowMenu$1.propTypes;
 
 export { OverflowMenu, OverflowMenu as default };

package/es/components/OverflowMenu/next/index.js

@@ -167,7 +167,6 @@ OverflowMenu.propTypes = {
   /**
    * A component used to render an icon.
    */
-  // @ts-expect-error: PropTypes are not expressive enough to cover this case
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * Specify the size of the menu, from a list of available sizes.

package/es/components/OverflowMenuItem/OverflowMenuItem.d.ts

@@ -40,6 +40,10 @@ export interface OverflowMenuItemProps extends React.HTMLAttributes<HTMLElement>
      * `true` to make this menu item a danger button.
      */
     isDelete?: boolean;
+    /**
+     * accepts a ref to the button element
+     */
+    ref?: (element: HTMLElement) => void;
     /**
      * `true` to require the title attribute.
      */

package/es/components/PageHeader/PageHeader.d.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { type ComponentType, type FunctionComponent } from 'react';
+import { Tabs as BaseTabs } from '../Tabs/Tabs';
 /**
  * ----------
  * PageHeader
@@ -87,6 +88,11 @@ interface PageHeaderTabBarProps {
     className?: string;
 }
 declare const PageHeaderTabBar: React.ForwardRefExoticComponent<PageHeaderTabBarProps & React.RefAttributes<HTMLDivElement>>;
+interface PageHeaderTabsProps extends React.ComponentProps<typeof BaseTabs> {
+    children?: React.ReactNode;
+    className?: string;
+}
+declare const PageHeaderTabs: React.ForwardRefExoticComponent<PageHeaderTabsProps & React.RefAttributes<HTMLDivElement>>;
 /**
  * -------
  * Exports
@@ -97,5 +103,6 @@ declare const BreadcrumbBar: React.ForwardRefExoticComponent<PageHeaderBreadcrum
 declare const Content: React.ForwardRefExoticComponent<PageHeaderContentProps & React.RefAttributes<HTMLDivElement>>;
 declare const HeroImage: React.ForwardRefExoticComponent<PageHeaderHeroImageProps & React.RefAttributes<HTMLDivElement>>;
 declare const TabBar: React.ForwardRefExoticComponent<PageHeaderTabBarProps & React.RefAttributes<HTMLDivElement>>;
-export { PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderHeroImage, PageHeaderTabBar, Root, BreadcrumbBar, Content, HeroImage, TabBar, };
-export type { PageHeaderProps, PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderHeroImageProps, PageHeaderTabBarProps, };
+declare const Tabs: React.ForwardRefExoticComponent<PageHeaderTabsProps & React.RefAttributes<HTMLDivElement>>;
+export { PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderHeroImage, PageHeaderTabBar, PageHeaderTabs, Root, BreadcrumbBar, Content, HeroImage, TabBar, Tabs, };
+export type { PageHeaderProps, PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderHeroImageProps, PageHeaderTabBarProps, PageHeaderTabsProps, };

package/es/components/PageHeader/PageHeader.js

@@ -16,9 +16,10 @@ import '../Text/index.js';
 import { DefinitionTooltip } from '../Tooltip/DefinitionTooltip.js';
 import '../Tooltip/Tooltip.js';
 import AspectRatio from '../AspectRatio/AspectRatio.js';
+import { Tabs as Tabs$1 } from '../Tabs/Tabs.js';
 import { Text } from '../Text/Text.js';
 
-var _p, _p2, _p3;
+var _p, _p2;
 
 /**
  * ----------
@@ -143,7 +144,7 @@ PageHeaderContent.propTypes = {
   /**
    * Provide an optional icon to render in front of the PageHeaderContent's title.
    */
-  // @ts-expect-error: PropTypes are not expressive enough to cover this case
+
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * The PageHeaderContent's title
@@ -218,9 +219,18 @@ const PageHeaderTabBar = /*#__PURE__*/React__default.forwardRef(function PageHea
   return /*#__PURE__*/React__default.createElement("div", _extends({
     className: classNames,
     ref: ref
-  }, other), _p3 || (_p3 = /*#__PURE__*/React__default.createElement("p", null, "page header tab bar")), children);
+  }, other), children);
 });
 PageHeaderTabBar.displayName = 'PageHeaderTabBar';
+const PageHeaderTabs = /*#__PURE__*/React__default.forwardRef(function PageHeaderTabs(_ref6, ref) {
+  let {
+    className,
+    children,
+    ...other
+  } = _ref6;
+  return /*#__PURE__*/React__default.createElement(Tabs$1, other, children);
+});
+PageHeaderTabs.displayName = 'PageHeaderTabs';
 
 /**
  * -------
@@ -237,5 +247,7 @@ const HeroImage = PageHeaderHeroImage;
 HeroImage.displayName = 'PageHeaderHeroImage';
 const TabBar = PageHeaderTabBar;
 TabBar.displayName = 'PageHeaderTabBar';
+const Tabs = PageHeaderTabs;
+Tabs.displayName = 'PageHeader.Tabs';
 
-export { BreadcrumbBar, Content, HeroImage, PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderHeroImage, PageHeaderTabBar, Root, TabBar };
+export { BreadcrumbBar, Content, HeroImage, PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderHeroImage, PageHeaderTabBar, PageHeaderTabs, Root, TabBar, Tabs };

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

@@ -4,5 +4,5 @@
  * 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 { PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderTabBar, PageHeaderHeroImage, Root, BreadcrumbBar, Content, TabBar, HeroImage, } from './PageHeader';
-export type { PageHeaderProps, PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderTabBarProps, PageHeaderHeroImageProps, } from './PageHeader';
+export { PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderTabBar, PageHeaderHeroImage, PageHeaderTabs, Root, BreadcrumbBar, Content, TabBar, HeroImage, Tabs, } from './PageHeader';
+export type { PageHeaderProps, PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderTabBarProps, PageHeaderHeroImageProps, PageHeaderTabsProps, } from './PageHeader';

package/es/components/PageHeader/index.js

@@ -5,4 +5,4 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export { BreadcrumbBar, Content, HeroImage, PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderHeroImage, PageHeaderTabBar, Root, TabBar } from './PageHeader.js';
+export { BreadcrumbBar, Content, HeroImage, PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderHeroImage, PageHeaderTabBar, PageHeaderTabs, Root, TabBar, Tabs } from './PageHeader.js';

package/es/components/PaginationNav/PaginationNav.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2020
+ * Copyright IBM Corp. 2020, 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/PaginationNav/PaginationNav.js

@@ -14,6 +14,7 @@ import { IconButton } from '../IconButton/index.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { breakpoints } from '@carbon/layout';
 import { useMatchMedia } from '../../internal/useMatchMedia.js';
+import { clamp } from '../../internal/clamp.js';
 
 var _CaretRight, _CaretLeft, _option;
 const translationIds = {
@@ -189,7 +190,7 @@ const PaginationNav = /*#__PURE__*/React__default.forwardRef(function Pagination
       numberOfPages = itemsShown === 4 ? itemsShown : 5;
       break;
     case 'sm':
-      numberOfPages = Math.max(4, Math.min(itemsShown, 7));
+      numberOfPages = clamp(itemsShown, 4, 7);
       break;
     default:
       numberOfPages = 4;

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

@@ -1,10 +1,11 @@
 /**
- * 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 React, { type WeakValidationMap } from 'react';
+import { WeakValidationMap } from 'prop-types';
+import React from 'react';
 import { type Boundary } from '@floating-ui/react';
 import { PolymorphicComponentPropWithRef } from '../../internal/PolymorphicProps';
 export interface PopoverContext {

package/es/components/Popover/index.js

@@ -46,7 +46,9 @@ const propMappingFunction = deprecatedValue => {
   };
   return mapping[deprecatedValue];
 };
-const Popover = /*#__PURE__*/React__default.forwardRef(function PopoverRenderFunction(_ref, forwardRef) {
+const Popover = /*#__PURE__*/React__default.forwardRef(function PopoverRenderFunction(_ref,
+//this is a workaround, have to come back and fix this.
+forwardRef) {
   let {
     isTabTip,
     align: initialAlign = isTabTip ? 'bottom-start' : 'bottom',
@@ -76,8 +78,11 @@ const Popover = /*#__PURE__*/React__default.forwardRef(function PopoverRenderFun
       onRequestClose?.();
     }
   });
-  useWindowEvent('click', event => {
-    if (open && !popover?.current?.contains(event.target)) {
+  useWindowEvent('click', _ref2 => {
+    let {
+      target
+    } = _ref2;
+    if (open && target instanceof Node && !popover.current?.contains(target)) {
       onRequestClose?.();
     }
   });
@@ -351,12 +356,12 @@ Popover.propTypes = {
   open: PropTypes.bool.isRequired
 };
 function PopoverContentRenderFunction(// eslint-disable-next-line react/prop-types
-_ref2, forwardRef) {
+_ref3, forwardRef) {
   let {
     className,
     children,
     ...rest
-  } = _ref2;
+  } = _ref3;
   const prefix = usePrefix();
   const {
     setFloating,

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

@@ -13,7 +13,7 @@ export interface PortalProps {
     /**
      * Provide a ref for a container node to render the portal
      */
-    container?: React.RefObject<HTMLElement>;
+    container?: React.RefObject<HTMLElement | null>;
 }
 /**
  * Helper component for rendering content within a portal. By default, the

package/es/components/Search/Search.js

@@ -222,7 +222,6 @@ Search.propTypes = {
   /**
    * A component used to render an icon.
    */
-  // @ts-expect-error: PropTypes are not expressive enough to cover this case
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * Specify the role for the underlying `<input>`, defaults to `searchbox`

package/es/components/SkeletonText/SkeletonText.js

@@ -59,7 +59,9 @@ const SkeletonText = _ref => {
     lines.push(/*#__PURE__*/React__default.createElement("p", _extends({
       className: skeletonTextClasses,
       key: i,
-      ref: el => refs.current = [...refs.current, el]
+      ref: el => {
+        refs.current = [...refs.current, el];
+      }
     }, rest)));
   }
   if (lineCountNumber !== 1) {

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`.
      */