@carbon/react 1.59.0 → 1.60.1

package/es/components/Menu/Menu.js

@@ -14,6 +14,7 @@ import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { warning } from '../../internal/warning.js';
 import { MenuContext, menuReducer } from './MenuContext.js';
+import { canUseDOM } from '../../internal/environment.js';
 import { useLayoutDirection } from '../LayoutDirection/useLayoutDirection.js';
 import { match } from '../../internal/keyboard/match.js';
 import { Escape, ArrowLeft, ArrowUp, ArrowDown } from '../../internal/keyboard/keys.js';
@@ -32,9 +33,9 @@ const Menu = /*#__PURE__*/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 = canUseDOM && document.body,
     x = 0,
     y = 0,
     ...rest
@@ -86,16 +87,18 @@ const Menu = /*#__PURE__*/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();
@@ -277,7 +280,7 @@ const Menu = /*#__PURE__*/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.createElement(MenuContext.Provider, {
@@ -291,6 +294,9 @@ const Menu = /*#__PURE__*/forwardRef(function Menu(_ref, forwardRef) {
     onKeyDown: handleKeyDown,
     onBlur: handleBlur
   }), children));
+  if (!target) {
+    return rendered;
+  }
   return isRoot ? open && /*#__PURE__*/createPortal(rendered, target) || null : rendered;
 });
 Menu.propTypes = {

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

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { forwardRef, useRef, useState } from 'react';
+import React__default, { forwardRef, useRef, useLayoutEffect } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { ChevronDown } from '@carbon/icons-react';
@@ -16,10 +16,10 @@ import { Menu } from '../Menu/Menu.js';
 import '../Menu/MenuItem.js';
 import { useAttachedMenu } from '../../internal/useAttachedMenu.js';
 import { useId } from '../../internal/useId.js';
-import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { flip, size, useFloating, autoUpdate } from '@floating-ui/react';
+import mergeRefs from '../../tools/mergeRefs.js';
 
-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__*/forwardRef(function MenuButton(_ref, forwardRef) {
@@ -29,7 +29,7 @@ const MenuButton = /*#__PURE__*/forwardRef(function MenuButton(_ref, forwardRef)
     disabled,
     kind = defaultButtonKind,
     label,
-    size = 'lg',
+    size: size$1 = 'lg',
     menuAlignment = 'bottom',
     tabIndex = 0,
     ...rest
@@ -37,35 +37,57 @@ const MenuButton = /*#__PURE__*/forwardRef(function MenuButton(_ref, forwardRef)
   const id = useId('MenuButton');
   const prefix = usePrefix();
   const triggerRef = useRef(null);
-  const menuRef = useRef(null);
-  const ref = useMergedRefs([forwardRef, triggerRef]);
-  const [width, setWidth] = useState(0);
+  const middlewares = [flip({
+    crossAxis: false
+  })];
+  if (menuAlignment === 'bottom' || menuAlignment === 'top') {
+    middlewares.push(size({
+      apply(_ref2) {
+        let {
+          rects,
+          elements
+        } = _ref2;
+        Object.assign(elements.floating.style, {
+          width: `${rects.reference.width}px`
+        });
+      }
+    }));
+  }
+  const {
+    refs,
+    floatingStyles,
+    placement,
+    middlewareData
+  } = 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: autoUpdate
+  });
+  const ref = mergeRefs(forwardRef, triggerRef);
   const {
     open,
-    x,
-    y,
     handleClick: hookOnClick,
     handleMousedown,
     handleClose
   } = useAttachedMenu(triggerRef);
+  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(`${prefix}--menu-button__container`, className);
   const triggerClasses = cx(`${prefix}--menu-button__trigger`, {
     [`${prefix}--menu-button__trigger--open`]: open
@@ -76,8 +98,9 @@ const MenuButton = /*#__PURE__*/forwardRef(function MenuButton(_ref, forwardRef)
     "aria-owns": open ? id : undefined,
     className: containerClasses
   }), /*#__PURE__*/React__default.createElement(Button, {
+    ref: refs.setReference,
     className: triggerClasses,
-    size: size,
+    size: size$1,
     tabIndex: tabIndex,
     kind: kind,
     renderIcon: ChevronDown,
@@ -91,16 +114,14 @@ const MenuButton = /*#__PURE__*/forwardRef(function MenuButton(_ref, forwardRef)
     containerRef: triggerRef,
     menuAlignment: menuAlignment,
     className: menuClasses,
-    ref: menuRef,
+    ref: refs.setFloating,
     id: id,
+    legacyAutoalign: false,
     label: label,
     mode: "basic",
-    size: size,
+    size: size$1,
     open: open,
-    onClose: handleClose,
-    onOpen: handleOpen,
-    x: x,
-    y: [y[0] - spacing, y[1] + spacing]
+    onClose: handleClose
   }, children));
 });
 MenuButton.propTypes = {

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -231,6 +231,8 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
         return changes;
       case InputBlur:
       case InputKeyDownEscape:
+        setInputFocused(false);
+        setInputValue('');
         setIsOpen(false);
         return changes;
       case FunctionToggleMenu:
@@ -414,11 +416,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
         $input.setSelectionRange($value.length, $value.length);
       }
     },
-    onFocus: () => setInputFocused(true),
-    onBlur() {
-      setInputFocused(false);
-      setInputValue('');
-    }
+    onFocus: () => setInputFocused(true)
   }));
   const menuProps = getMenuProps({}, {
     suppressRefError: true

package/es/components/MultiSelect/MultiSelect.js

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

package/es/components/NumberInput/NumberInput.js

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

package/es/components/Pagination/Pagination.js

@@ -241,6 +241,7 @@ const Pagination = /*#__PURE__*/React__default.forwardRef(function Pagination(_r
     kind: "ghost",
     className: backButtonClasses,
     label: backwardText,
+    "aria-label": backwardText,
     onClick: decrementPage,
     ref: backBtnRef
   }, _CaretLeft || (_CaretLeft = /*#__PURE__*/React__default.createElement(CaretLeft, null))), /*#__PURE__*/React__default.createElement(IconButton, {
@@ -249,6 +250,7 @@ const Pagination = /*#__PURE__*/React__default.forwardRef(function Pagination(_r
     kind: "ghost",
     className: forwardButtonClasses,
     label: forwardText,
+    "aria-label": forwardText,
     onClick: incrementPage,
     ref: forwardBtnRef
   }, _CaretRight || (_CaretRight = /*#__PURE__*/React__default.createElement(CaretRight, null))))));

package/es/components/PaginationNav/PaginationNav.js

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

package/es/components/Popover/index.js

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

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

@@ -55,23 +55,21 @@ const RadioButtonGroup = /*#__PURE__*/React__default.forwardRef((props, ref) =>
   }
   function getRadioButtons() {
     const mappedChildren = React__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.cloneElement(radioButton, newProps);
-      }
+      return /*#__PURE__*/React__default.cloneElement(radioButton, newProps);
     });
     return mappedChildren;
   }

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

@@ -251,13 +251,14 @@ function TabList(_ref2) {
     }
   });
   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(() => {
     if (tabs.current[selectedIndex]?.disabled) {
       const activeTabs = tabs.current.filter(tab => {
@@ -271,11 +272,13 @@ function TabList(_ref2) {
   });
   useIsomorphicEffect(() => {
     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(handler, 200);

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

@@ -154,6 +154,7 @@ const TextArea = /*#__PURE__*/React__default.forwardRef((props, forwardRef) => {
   };
   const formItemClasses = cx(`${prefix}--form-item`, className);
   const textAreaWrapperClasses = cx(`${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/es/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/es/components/Tooltip/DefinitionTooltip.js

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

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

@@ -29,7 +29,7 @@ declare const Content: {
         suppressHydrationWarning?: boolean | undefined;
         accessKey?: string | undefined;
         autoFocus?: boolean | undefined;
-        contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
+        contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
         contextMenu?: string | undefined;
         dir?: string | undefined;
         draggable?: (boolean | "true" | "false") | undefined;
@@ -37,7 +37,6 @@ declare const Content: {
         id?: string | undefined;
         lang?: string | undefined;
         nonce?: string | undefined;
-        placeholder?: string | undefined;
         slot?: string | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
         style?: React.CSSProperties | undefined;
@@ -69,7 +68,7 @@ declare const Content: {
         results?: number | undefined;
         security?: string | undefined;
         unselectable?: "on" | "off" | undefined;
-        inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+        inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
         is?: string | undefined;
         "aria-activedescendant"?: string | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
@@ -83,7 +82,7 @@ declare const Content: {
         "aria-colindextext"?: string | undefined;
         "aria-colspan"?: number | undefined;
         "aria-controls"?: string | undefined;
-        "aria-current"?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
+        "aria-current"?: boolean | "true" | "false" | "time" | "page" | "step" | "location" | "date" | undefined;
         "aria-describedby"?: string | undefined;
         "aria-description"?: string | undefined;
         "aria-details"?: string | undefined;
@@ -93,7 +92,7 @@ declare const Content: {
         "aria-expanded"?: (boolean | "true" | "false") | undefined;
         "aria-flowto"?: string | undefined;
         "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-        "aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
+        "aria-haspopup"?: boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree" | undefined;
         "aria-hidden"?: (boolean | "true" | "false") | undefined;
         "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
         "aria-keyshortcuts"?: string | undefined;
@@ -266,9 +265,7 @@ declare const Content: {
         onPointerCancel?: React.PointerEventHandler<HTMLElement> | undefined;
         onPointerCancelCapture?: React.PointerEventHandler<HTMLElement> | undefined;
         onPointerEnter?: React.PointerEventHandler<HTMLElement> | undefined;
-        onPointerEnterCapture?: React.PointerEventHandler<HTMLElement> | undefined;
         onPointerLeave?: React.PointerEventHandler<HTMLElement> | undefined;
-        onPointerLeaveCapture?: React.PointerEventHandler<HTMLElement> | undefined;
         onPointerOver?: React.PointerEventHandler<HTMLElement> | undefined;
         onPointerOverCapture?: React.PointerEventHandler<HTMLElement> | undefined;
         onPointerOut?: React.PointerEventHandler<HTMLElement> | undefined;

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

@@ -21,7 +21,7 @@ export type LinkProps<E extends ElementType> = PolymorphicProps<E, LinkBaseProps
  * in their own components to support use-cases like `react-router` or
  * `@reach/router`
  */
-declare const Link: (<E extends React.ElementType<any> = "a">(props: LinkProps<E>) => JSX.Element) & {
+declare const Link: (<E extends React.ElementType<any, keyof React.JSX.IntrinsicElements> = "a">(props: LinkProps<E>) => JSX.Element) & {
     displayName?: string | undefined;
     propTypes?: React.WeakValidationMap<LinkProps<any>> | undefined;
 };

package/es/components/UIShell/Link.js

@@ -12,6 +12,7 @@ import deprecate from '../../prop-types/deprecate.js';
 
 // Note: Maybe we should use `as` instead of `element`? `as` appears to be
 // standard and is used in other places in this project.
+
 function LinkRenderFunction(_ref, ref) {
   let {
     element,