@carbon/react 1.59.0 → 1.60.1

package/lib/components/FileUploader/FileUploaderItem.js

@@ -55,6 +55,9 @@ function FileUploaderItem(_ref) {
     [`${prefix}--file__selected-file--sm`]: size === 'sm'
   });
   const isInvalid = invalid ? `${prefix}--file-filename-container-wrap-invalid` : `${prefix}--file-filename-container-wrap`;
+  const filterSpaceName = name => {
+    return name?.replace(/\s+/g, '');
+  };
   const isEllipsisActive = element => {
     setIsEllipsisApplied(element.offsetWidth < element.scrollWidth);
     return element.offsetWidth < element.scrollWidth;
@@ -78,12 +81,12 @@ function FileUploaderItem(_ref) {
     as: "p",
     title: name,
     className: `${prefix}--file-filename-button`,
-    id: name
+    id: filterSpaceName(name)
   }, name)))) : /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     as: "p",
     title: name,
     className: `${prefix}--file-filename`,
-    id: name
+    id: filterSpaceName(name)
   }, name), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--file-container-item`
   }, /*#__PURE__*/React__default["default"].createElement("span", {
@@ -93,7 +96,7 @@ function FileUploaderItem(_ref) {
     iconDescription: iconDescription,
     status: status,
     invalid: invalid,
-    "aria-describedby": `${name}-id-error`,
+    "aria-describedby": invalid && errorSubject ? `${filterSpaceName(name)}-id-error` : undefined,
     onKeyDown: evt => {
       if (match.matches(evt, [keys.Enter, keys.Space])) {
         if (status === 'edit') {
@@ -114,7 +117,7 @@ function FileUploaderItem(_ref) {
   }))), invalid && errorSubject && /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--form-requirement`,
     role: "alert",
-    id: `${name}-id-error`
+    id: `${filterSpaceName(name)}-id-error`
   }, /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     as: "div",
     className: `${prefix}--form-requirement__title`

package/lib/components/Heading/index.d.ts

@@ -11,6 +11,6 @@ type SectionBaseProps = {
     level?: HeadingLevel;
 };
 type SectionProps<E extends ElementType> = PolymorphicProps<E, SectionBaseProps>;
-export declare const Section: React.ForwardRefExoticComponent<Omit<SectionProps<React.ElementType<any>>, "ref"> & React.RefAttributes<unknown>>;
+export declare const Section: React.ForwardRefExoticComponent<Omit<SectionProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<unknown>>;
 export declare const Heading: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
 export {};

package/lib/components/Link/Link.d.ts

@@ -49,5 +49,5 @@ export interface LinkBaseProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     visited?: boolean;
 }
 export type LinkProps<E extends ElementType> = PolymorphicProps<E, LinkBaseProps>;
-declare const Link: React.ForwardRefExoticComponent<Omit<LinkProps<React.ElementType<any>>, "ref"> & React.RefAttributes<unknown>>;
+declare const Link: React.ForwardRefExoticComponent<Omit<LinkProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<unknown>>;
 export default Link;

package/lib/components/ListBox/ListBoxMenu.js

@@ -53,7 +53,6 @@ ListBoxMenu.propTypes = {
     type: PropTypes__default["default"].oneOf([ListBoxMenuItem["default"]])
   }), PropTypes__default["default"].bool // used in Dropdown for closed state
   ]),
-
   /**
    * Specify a custom `id`
    */

package/lib/components/Menu/Menu.d.ts

@@ -53,7 +53,7 @@ interface MenuProps extends React.HTMLAttributes<HTMLUListElement> {
     /**
      * Specify a DOM node where the Menu should be rendered in. Defaults to document.body.
      */
-    target?: HTMLElement;
+    target?: Element;
     /**
      * Specify the x position of the Menu. Either pass a single number or an array with two numbers describing your activator's boundaries ([x1, x2])
      */
@@ -62,6 +62,7 @@ interface MenuProps extends React.HTMLAttributes<HTMLUListElement> {
      * Specify the y position of the Menu. Either pass a single number or an array with two numbers describing your activator's boundaries ([y1, y2])
      */
     y?: number | [number, number];
+    legacyAutoalign?: boolean;
 }
 declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLUListElement>>;
 export { Menu };

package/lib/components/Menu/Menu.js

@@ -18,6 +18,7 @@ var useMergedRefs = require('../../internal/useMergedRefs.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var warning = require('../../internal/warning.js');
 var MenuContext = require('./MenuContext.js');
+var environment = require('../../internal/environment.js');
 var useLayoutDirection = require('../LayoutDirection/useLayoutDirection.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
@@ -42,9 +43,9 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(_ref, forwardRef) {
     onOpen,
     open,
     size = 'sm',
-    // TODO: #16004
+    legacyAutoalign = 'true',
     // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
-    target = document.body,
+    target = environment.canUseDOM && document.body,
     x = 0,
     y = 0,
     ...rest
@@ -96,16 +97,18 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(_ref, forwardRef) {
   function handleOpen() {
     if (menu.current) {
       focusReturn.current = document.activeElement;
-      const pos = calculatePosition();
-      if ((document?.dir === 'rtl' || direction === 'rtl') && !rest?.id?.includes('MenuButton')) {
-        menu.current.style.insetInlineStart = `initial`;
-        menu.current.style.insetInlineEnd = `${pos[0]}px`;
-      } else {
-        menu.current.style.insetInlineStart = `${pos[0]}px`;
-        menu.current.style.insetInlineEnd = `initial`;
+      if (legacyAutoalign) {
+        const pos = calculatePosition();
+        if ((document?.dir === 'rtl' || direction === 'rtl') && !rest?.id?.includes('MenuButton')) {
+          menu.current.style.insetInlineStart = `initial`;
+          menu.current.style.insetInlineEnd = `${pos[0]}px`;
+        } else {
+          menu.current.style.insetInlineStart = `${pos[0]}px`;
+          menu.current.style.insetInlineEnd = `initial`;
+        }
+        menu.current.style.insetBlockStart = `${pos[1]}px`;
+        setPosition(pos);
       }
-      menu.current.style.insetBlockStart = `${pos[1]}px`;
-      setPosition(pos);
       menu.current.focus();
       if (onOpen) {
         onOpen();
@@ -287,7 +290,7 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(_ref, forwardRef) {
     // to avoid a flicker effect when opening.
     [`${prefix}--menu--box-shadow-top`]: menuAlignment && menuAlignment.slice(0, 3) === 'top',
     [`${prefix}--menu--open`]: open,
-    [`${prefix}--menu--shown`]: position[0] >= 0 && position[1] >= 0,
+    [`${prefix}--menu--shown`]: open && !legacyAutoalign || position[0] >= 0 && position[1] >= 0,
     [`${prefix}--menu--with-icons`]: childContext.state.hasIcons
   });
   const rendered = /*#__PURE__*/React__default["default"].createElement(MenuContext.MenuContext.Provider, {
@@ -301,6 +304,9 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(_ref, forwardRef) {
     onKeyDown: handleKeyDown,
     onBlur: handleBlur
   }), children));
+  if (!target) {
+    return rendered;
+  }
   return isRoot ? open && /*#__PURE__*/ReactDOM.createPortal(rendered, target) || null : rendered;
 });
 Menu.propTypes = {

package/lib/components/MenuButton/index.d.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { ComponentProps, ReactNode } from 'react';
+export type MenuAlignment = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
 export interface MenuButtonProps extends ComponentProps<'div'> {
     /**
      * A collection of MenuItems to be rendered as actions for this MenuButton.
@@ -29,7 +30,7 @@ export interface MenuButtonProps extends ComponentProps<'div'> {
     /**
      * Experimental property. Specify how the menu should align with the button element
      */
-    menuAlignment: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
+    menuAlignment: MenuAlignment;
     /**
      * Specify the size of the button and menu.
      */

package/lib/components/MenuButton/index.js

@@ -20,8 +20,9 @@ var Menu = require('../Menu/Menu.js');
 require('../Menu/MenuItem.js');
 var useAttachedMenu = require('../../internal/useAttachedMenu.js');
 var useId = require('../../internal/useId.js');
-var useMergedRefs = require('../../internal/useMergedRefs.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var react = require('@floating-ui/react');
+var mergeRefs = require('../../tools/mergeRefs.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -29,7 +30,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const spacing = 0; // top and bottom spacing between the button and the menu. in px
 const validButtonKinds = ['primary', 'tertiary', 'ghost'];
 const defaultButtonKind = 'primary';
 const MenuButton = /*#__PURE__*/React.forwardRef(function MenuButton(_ref, forwardRef) {
@@ -47,35 +47,57 @@ const MenuButton = /*#__PURE__*/React.forwardRef(function MenuButton(_ref, forwa
   const id = useId.useId('MenuButton');
   const prefix = usePrefix.usePrefix();
   const triggerRef = React.useRef(null);
-  const menuRef = React.useRef(null);
-  const ref = useMergedRefs.useMergedRefs([forwardRef, triggerRef]);
-  const [width, setWidth] = React.useState(0);
+  const middlewares = [react.flip({
+    crossAxis: false
+  })];
+  if (menuAlignment === 'bottom' || menuAlignment === 'top') {
+    middlewares.push(react.size({
+      apply(_ref2) {
+        let {
+          rects,
+          elements
+        } = _ref2;
+        Object.assign(elements.floating.style, {
+          width: `${rects.reference.width}px`
+        });
+      }
+    }));
+  }
+  const {
+    refs,
+    floatingStyles,
+    placement,
+    middlewareData
+  } = react.useFloating({
+    placement: menuAlignment,
+    // The floating element is positioned relative to its nearest
+    // containing block (usually the viewport). It will in many cases also
+    // “break” the floating element out of a clipping ancestor.
+    // https://floating-ui.com/docs/misc#clipping
+    strategy: 'fixed',
+    // Middleware order matters, arrow should be last
+    middleware: middlewares,
+    whileElementsMounted: react.autoUpdate
+  });
+  const ref = mergeRefs["default"](forwardRef, triggerRef);
   const {
     open,
-    x,
-    y,
     handleClick: hookOnClick,
     handleMousedown,
     handleClose
   } = useAttachedMenu.useAttachedMenu(triggerRef);
+  React.useLayoutEffect(() => {
+    Object.keys(floatingStyles).forEach(style => {
+      if (refs.floating.current) {
+        refs.floating.current.style[style] = floatingStyles[style];
+      }
+    });
+  }, [floatingStyles, refs.floating, middlewareData, placement, open]);
   function handleClick() {
     if (triggerRef.current) {
-      const {
-        width: w
-      } = triggerRef.current.getBoundingClientRect();
-      setWidth(w);
       hookOnClick();
     }
   }
-  function handleOpen() {
-    if (menuRef.current) {
-      menuRef.current.style.inlineSize = `${width}px`;
-      menuRef.current.style.minInlineSize = `${width}px`;
-      if (menuAlignment !== 'bottom' && menuAlignment !== 'top') {
-        menuRef.current.style.inlineSize = `fit-content`;
-      }
-    }
-  }
   const containerClasses = cx__default["default"](`${prefix}--menu-button__container`, className);
   const triggerClasses = cx__default["default"](`${prefix}--menu-button__trigger`, {
     [`${prefix}--menu-button__trigger--open`]: open
@@ -86,6 +108,7 @@ const MenuButton = /*#__PURE__*/React.forwardRef(function MenuButton(_ref, forwa
     "aria-owns": open ? id : undefined,
     className: containerClasses
   }), /*#__PURE__*/React__default["default"].createElement(Button["default"], {
+    ref: refs.setReference,
     className: triggerClasses,
     size: size,
     tabIndex: tabIndex,
@@ -101,16 +124,14 @@ const MenuButton = /*#__PURE__*/React.forwardRef(function MenuButton(_ref, forwa
     containerRef: triggerRef,
     menuAlignment: menuAlignment,
     className: menuClasses,
-    ref: menuRef,
+    ref: refs.setFloating,
     id: id,
+    legacyAutoalign: false,
     label: label,
     mode: "basic",
     size: size,
     open: open,
-    onClose: handleClose,
-    onOpen: handleOpen,
-    x: x,
-    y: [y[0] - spacing, y[1] + spacing]
+    onClose: handleClose
   }, children));
 });
 MenuButton.propTypes = {

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -243,6 +243,8 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
         return changes;
       case InputBlur:
       case InputKeyDownEscape:
+        setInputFocused(false);
+        setInputValue('');
         setIsOpen(false);
         return changes;
       case FunctionToggleMenu:
@@ -426,11 +428,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
         $input.setSelectionRange($value.length, $value.length);
       }
     },
-    onFocus: () => setInputFocused(true),
-    onBlur() {
-      setInputFocused(false);
-      setInputValue('');
-    }
+    onFocus: () => setInputFocused(true)
   }));
   const menuProps = getMenuProps({}, {
     suppressRefError: true

package/lib/components/MultiSelect/MultiSelect.js

@@ -138,7 +138,6 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
           }
         }
       }
-
       return true; // Return true if item is not an object with undefined values
     });
   }, [items]);

package/lib/components/NumberInput/NumberInput.js

@@ -219,6 +219,7 @@ const NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function N
     "data-invalid": normalizedProps.invalid ? true : undefined,
     "aria-invalid": normalizedProps.invalid,
     "aria-describedby": ariaDescribedBy,
+    "aria-readonly": readOnly,
     disabled: normalizedProps.disabled,
     ref: ref,
     id: id,

package/lib/components/Pagination/Pagination.js

@@ -251,6 +251,7 @@ const Pagination = /*#__PURE__*/React__default["default"].forwardRef(function Pa
     kind: "ghost",
     className: backButtonClasses,
     label: backwardText,
+    "aria-label": backwardText,
     onClick: decrementPage,
     ref: backBtnRef
   }, _CaretLeft || (_CaretLeft = /*#__PURE__*/React__default["default"].createElement(iconsReact.CaretLeft, null))), /*#__PURE__*/React__default["default"].createElement(index.IconButton, {
@@ -259,6 +260,7 @@ const Pagination = /*#__PURE__*/React__default["default"].forwardRef(function Pa
     kind: "ghost",
     className: forwardButtonClasses,
     label: forwardText,
+    "aria-label": forwardText,
     onClick: incrementPage,
     ref: forwardBtnRef
   }, _CaretRight || (_CaretRight = /*#__PURE__*/React__default["default"].createElement(iconsReact.CaretRight, null))))));

package/lib/components/PaginationNav/PaginationNav.js

@@ -263,6 +263,7 @@ const PaginationNav = /*#__PURE__*/React__default["default"].forwardRef(function
     className: `${prefix}--pagination-nav__list`
   }, /*#__PURE__*/React__default["default"].createElement(DirectionButton, {
     direction: "backward",
+    "aria-label": t('carbon.pagination-nav.previous'),
     label: t('carbon.pagination-nav.previous'),
     disabled: backwardButtonDisabled,
     onClick: jumpToPrevious
@@ -307,6 +308,7 @@ const PaginationNav = /*#__PURE__*/React__default["default"].forwardRef(function
     }
   }), /*#__PURE__*/React__default["default"].createElement(DirectionButton, {
     direction: "forward",
+    "aria-label": t('carbon.pagination-nav.next'),
     label: t('carbon.pagination-nav.next'),
     disabled: forwardButtonDisabled,
     onClick: jumpToNext

package/lib/components/Popover/index.js

@@ -142,7 +142,6 @@ const Popover = /*#__PURE__*/React__default["default"].forwardRef(function Popov
     whileElementsMounted: react.autoUpdate
   } : {} // When autoAlign is turned off, floating-ui will not be used
   );
-
   const value = React.useMemo(() => {
     return {
       floating,

package/lib/components/PrimaryButton/PrimaryButton.d.ts

@@ -6,5 +6,5 @@
  */
 import React from 'react';
 import { ButtonProps } from '../Button';
-declare const PrimaryButton: <T extends React.ElementType<any>>(props: ButtonProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const PrimaryButton: <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements>>(props: ButtonProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default PrimaryButton;

package/lib/components/RadioButton/RadioButton.d.ts

@@ -49,7 +49,7 @@ export interface RadioButtonProps extends Omit<React.InputHTMLAttributes<HTMLInp
      * Provide an optional `onChange` hook that is called each time the value of
      * the underlying `<input>` changes
      */
-    onChange?: (value: string | number, name: string | undefined, event: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (value: RadioButtonProps['value'], name: RadioButtonProps['name'], event: React.ChangeEvent<HTMLInputElement>) => void;
     /**
      * Provide a handler that is invoked when a user clicks on the control
      */
@@ -67,5 +67,5 @@ export interface RadioButtonProps extends Omit<React.InputHTMLAttributes<HTMLInp
      */
     required?: boolean;
 }
-declare const RadioButton: React.ForwardRefExoticComponent<RadioButtonProps & React.RefAttributes<unknown>>;
+declare const RadioButton: React.ForwardRefExoticComponent<RadioButtonProps & React.RefAttributes<HTMLInputElement>>;
 export default RadioButton;

package/lib/components/RadioButton/index.d.ts

@@ -4,6 +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 RadioButton from './RadioButton';
+import RadioButton, { RadioButtonProps } from './RadioButton';
 export default RadioButton;
 export { RadioButton };
+export type { RadioButtonProps };

package/lib/components/RadioButtonGroup/RadioButtonGroup.d.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { ReactNode } from 'react';
+import type { RadioButtonProps } from '../RadioButton';
 export declare const RadioButtonGroupContext: React.Context<null>;
 type ExcludedAttributes = 'onChange';
 export interface RadioButtonGroupProps extends Omit<React.InputHTMLAttributes<HTMLFieldSetElement>, ExcludedAttributes> {
@@ -19,7 +20,7 @@ export interface RadioButtonGroupProps extends Omit<React.InputHTMLAttributes<HT
     /**
      * Specify the `<RadioButton>` to be selected by default
      */
-    defaultSelected?: string | number;
+    defaultSelected?: RadioButtonProps['value'];
     /**
      * Specify whether the group is disabled
      */
@@ -53,7 +54,7 @@ export interface RadioButtonGroupProps extends Omit<React.InputHTMLAttributes<HT
      * Provide an optional `onChange` hook that is called whenever the value of
      * the group changes
      */
-    onChange?: (selection: React.ReactNode, name: string, event: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (selection: RadioButtonProps['value'], name: RadioButtonGroupProps['name'], event: React.ChangeEvent<HTMLInputElement>) => void;
     /**
      * Provide where radio buttons should be placed
      */
@@ -77,7 +78,7 @@ export interface RadioButtonGroupProps extends Omit<React.InputHTMLAttributes<HT
     /**
      * Specify the value that is currently selected in the group
      */
-    valueSelected?: string | number;
+    valueSelected?: RadioButtonProps['value'];
     /**
      * `true` to specify if input selection in group is required.
      */

package/lib/components/RadioButtonGroup/RadioButtonGroup.js

@@ -65,23 +65,21 @@ const RadioButtonGroup = /*#__PURE__*/React__default["default"].forwardRef((prop
   }
   function getRadioButtons() {
     const mappedChildren = React__default["default"].Children.map(children, radioButton => {
-      const {
-        value
-      } = radioButton?.props ?? undefined;
+      if (!radioButton) {
+        return;
+      }
       const newProps = {
         name: name,
-        key: value,
-        value: value,
+        key: radioButton.props.value,
+        value: radioButton.props.value,
         onChange: handleOnChange,
-        checked: value === selected,
+        checked: radioButton.props.value === selected,
         required: required
       };
-      if (!selected && radioButton?.props.checked) {
+      if (!selected && radioButton.props.checked) {
         newProps.checked = true;
       }
-      if (radioButton) {
-        return /*#__PURE__*/React__default["default"].cloneElement(radioButton, newProps);
-      }
+      return /*#__PURE__*/React__default["default"].cloneElement(radioButton, newProps);
     });
     return mappedChildren;
   }

package/lib/components/RadioButtonGroup/index.d.ts

@@ -4,6 +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 RadioButtonGroup from './RadioButtonGroup';
+import RadioButtonGroup, { RadioButtonGroupProps } from './RadioButtonGroup';
 export default RadioButtonGroup;
 export { RadioButtonGroup };
+export type { RadioButtonGroupProps };

package/lib/components/SecondaryButton/SecondaryButton.d.ts

@@ -6,5 +6,5 @@
  */
 import React from 'react';
 import { ButtonProps } from '../Button';
-declare const SecondaryButton: <T extends React.ElementType<any>>(props: ButtonProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const SecondaryButton: <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements>>(props: ButtonProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default SecondaryButton;

package/lib/components/Tabs/Tabs.js

@@ -262,13 +262,14 @@ function TabList(_ref2) {
     }
   });
   React.useEffect(() => {
-    setIsNextButtonVisible(ref.current ? scrollLeft + buttonWidth + ref.current.clientWidth < ref.current.scrollWidth : false);
+    //adding 1 in calculation for firefox support
+    setIsNextButtonVisible(ref.current ? scrollLeft + buttonWidth + ref.current.clientWidth + 1 < ref.current.scrollWidth : false);
     if (dismissable) {
       if (ref.current) {
         setIsScrollable(ref.current.scrollWidth > ref.current.clientWidth);
       }
     }
-  }, [scrollLeft, children, dismissable]);
+  }, [scrollLeft, children, dismissable, isScrollable]);
   useEffectOnce.useEffectOnce(() => {
     if (tabs.current[selectedIndex]?.disabled) {
       const activeTabs = tabs.current.filter(tab => {
@@ -282,11 +283,13 @@ function TabList(_ref2) {
   });
   useIsomorphicEffect["default"](() => {
     if (ref.current) {
-      setIsScrollable(ref.current.scrollWidth > ref.current.clientWidth);
+      //adding 1 in calculation for firefox support
+      setIsScrollable(ref.current.scrollWidth > ref.current.clientWidth + 1);
     }
     function handler() {
       if (ref.current) {
-        setIsScrollable(ref.current.scrollWidth > ref.current.clientWidth);
+        //adding 1 in calculation for firefox support
+        setIsScrollable(ref.current.scrollWidth > ref.current.clientWidth + 1);
       }
     }
     const debouncedHandler = debounce__default["default"](handler, 200);

package/lib/components/Tag/DismissibleTag.d.ts

@@ -54,7 +54,7 @@ export interface DismissibleTagBaseProps {
 }
 export type DismissibleTagProps<T extends React.ElementType> = PolymorphicProps<T, DismissibleTagBaseProps>;
 declare const DismissibleTag: {
-    <T extends React.ElementType<any>>({ className, disabled, id, renderIcon, title, onClose, slug, size, text, type, ...other }: DismissibleTagProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements>>({ className, disabled, id, renderIcon, title, onClose, slug, size, text, type, ...other }: DismissibleTagProps<T>): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Provide a custom className that is applied to the containing <span>

package/lib/components/Tag/OperationalTag.d.ts

@@ -59,7 +59,7 @@ export interface OperationalTagBaseProps {
 }
 export type OperationalTagProps<T extends React.ElementType> = PolymorphicProps<T, OperationalTagBaseProps>;
 declare const OperationalTag: {
-    <T extends React.ElementType<any>>({ className, disabled, id, renderIcon, slug, size, text, type, ...other }: OperationalTagProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements>>({ className, disabled, id, renderIcon, slug, size, text, type, ...other }: OperationalTagProps<T>): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Provide a custom className that is applied to the containing <span>

package/lib/components/Tag/SelectableTag.d.ts

@@ -46,7 +46,7 @@ export interface SelectableTagBaseProps {
 }
 export type SelectableTagProps<T extends React.ElementType> = PolymorphicProps<T, SelectableTagBaseProps>;
 declare const SelectableTag: {
-    <T extends React.ElementType<any>>({ className, disabled, id, renderIcon, selected, slug, size, text, ...other }: SelectableTagProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements>>({ className, disabled, id, renderIcon, selected, slug, size, text, ...other }: SelectableTagProps<T>): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Provide a custom className that is applied to the containing <span>

package/lib/components/Tag/Tag.d.ts

@@ -74,6 +74,6 @@ export interface TagBaseProps {
     type?: keyof typeof TYPES;
 }
 export type TagProps<T extends React.ElementType> = PolymorphicProps<T, TagBaseProps>;
-declare const Tag: React.ForwardRefExoticComponent<Omit<TagProps<React.ElementType<any>>, "ref"> & React.RefAttributes<HTMLElement | undefined>>;
+declare const Tag: React.ForwardRefExoticComponent<Omit<TagProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<HTMLElement | undefined>>;
 export declare const types: string[];
 export default Tag;

package/lib/components/Text/index.d.ts

@@ -9,10 +9,10 @@ import { Text, TextBaseProps, TextProps } from './Text';
 export { TextDirection, Text };
 export type { TextBaseProps, TextProps, TextDirectionProps, GetTextDirection, TextDir, };
 export declare const Label: {
-    (props: TextProps<import("react").ElementType<any>>): import("react/jsx-runtime").JSX.Element;
+    (props: TextProps<import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements>>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const Legend: {
-    (props: TextProps<import("react").ElementType<any>>): import("react/jsx-runtime").JSX.Element;
+    (props: TextProps<import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements>>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/lib/components/TextArea/TextArea.js

@@ -164,6 +164,7 @@ const TextArea = /*#__PURE__*/React__default["default"].forwardRef((props, forwa
   };
   const formItemClasses = cx__default["default"](`${prefix}--form-item`, className);
   const textAreaWrapperClasses = cx__default["default"](`${prefix}--text-area__wrapper`, {
+    [`${prefix}--text-area__wrapper--cols`]: other.cols,
     [`${prefix}--text-area__wrapper--readonly`]: other.readOnly,
     [`${prefix}--text-area__wrapper--warn`]: warn,
     [`${prefix}--text-area__wrapper--slug`]: slug

package/lib/components/Toggletip/index.d.ts

@@ -89,7 +89,7 @@ export type ToggleTipButtonProps<T extends React.ElementType> = PolymorphicProps
  * `ToggletipButton` controls the visibility of the Toggletip through mouse
  * clicks and keyboard interactions.
  */
-export declare const ToggletipButton: React.ForwardRefExoticComponent<Omit<ToggleTipButtonProps<React.ElementType<any>>, "ref"> & React.RefAttributes<unknown>>;
+export declare const ToggletipButton: React.ForwardRefExoticComponent<Omit<ToggleTipButtonProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<unknown>>;
 interface ToggletipContentProps {
     children?: ReactNode;
     className?: string | undefined;

package/lib/components/Tooltip/DefinitionTooltip.js

@@ -84,7 +84,28 @@ DefinitionTooltip.propTypes = {
   /**
    * Specify how the trigger should align with the tooltip
    */
-  align: PropTypes__default["default"].oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-bottom', 'left-top', 'right', 'right-bottom', 'right-top']),
+  align: PropTypes__default["default"].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']),
   /**
    * The `children` prop will be used as the value that is being defined
    */