@carbon/react 1.59.0-rc.0 → 1.60.0-rc.0

package/lib/components/Menu/Menu.js

@@ -42,6 +42,7 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(_ref, forwardRef) {
     onOpen,
     open,
     size = 'sm',
+    legacyAutoalign = 'true',
     // TODO: #16004
     // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
     target = document.body,
@@ -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, {

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

package/lib/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/lib/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/lib/components/UIShell/Link.js

@@ -21,6 +21,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 // 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,

package/lib/components/UIShell/SideNav.js

@@ -32,6 +32,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
 // TO-DO: comment back in when footer is added for rails
 // import SideNavFooter from './SideNavFooter';
+
 const SideNavContext = /*#__PURE__*/React.createContext({});
 function SideNavRenderFunction(_ref, ref) {
   let {

package/lib/components/UIShell/SwitcherItem.d.ts

@@ -57,5 +57,5 @@ interface SwitcherItemWithAriaLabelledBy extends BaseSwitcherItemProps {
     'aria-labelledby': string;
 }
 type SwitcherItemProps = SwitcherItemWithAriaLabel | SwitcherItemWithAriaLabelledBy;
-declare const SwitcherItem: React.ForwardRefExoticComponent<SwitcherItemProps & React.RefAttributes<React.ElementType<any>>>;
+declare const SwitcherItem: React.ForwardRefExoticComponent<SwitcherItemProps & React.RefAttributes<React.ElementType<any, keyof React.JSX.IntrinsicElements>>>;
 export default SwitcherItem;

package/lib/index.js

@@ -185,7 +185,6 @@ var FluidTextInput = require('./components/FluidTextInput/FluidTextInput.js');
 var FluidTextInput_Skeleton = require('./components/FluidTextInput/FluidTextInput.Skeleton.js');
 var PageSelector = require('./components/Pagination/experimental/PageSelector.js');
 var Pagination = require('./components/Pagination/experimental/Pagination.js');
-var CheckboxGroup = require('./components/CheckboxGroup/CheckboxGroup.js');
 var ContainedListItem = require('./components/ContainedList/ContainedListItem/ContainedListItem.js');
 var ContainedList = require('./components/ContainedList/ContainedList.js');
 var useContextMenu = require('./components/ContextMenu/useContextMenu.js');
@@ -212,6 +211,7 @@ var ChatButton = require('./components/ChatButton/ChatButton.js');
 var ChatButton_Skeleton = require('./components/ChatButton/ChatButton.Skeleton.js');
 var Text = require('./components/Text/Text.js');
 var TextDirection = require('./components/Text/TextDirection.js');
+var CheckboxGroup = require('./components/CheckboxGroup/CheckboxGroup.js');
 var DataTable = require('./components/DataTable/DataTable.js');
 var Table = require('./components/DataTable/Table.js');
 var TableActionList = require('./components/DataTable/TableActionList.js');
@@ -457,7 +457,6 @@ exports.unstable__FluidTextInput = FluidTextInput["default"];
 exports.unstable__FluidTextInputSkeleton = FluidTextInput_Skeleton["default"];
 exports.unstable_PageSelector = PageSelector["default"];
 exports.unstable_Pagination = Pagination["default"];
-exports.CheckboxGroup = CheckboxGroup["default"];
 exports.ContainedListItem = ContainedListItem["default"];
 exports.ContainedList = ContainedList["default"];
 exports.useContextMenu = useContextMenu["default"];
@@ -484,6 +483,7 @@ exports.unstable__ChatButton = ChatButton["default"];
 exports.unstable__ChatButtonSkeleton = ChatButton_Skeleton["default"];
 exports.unstable_Text = Text.Text;
 exports.unstable_TextDirection = TextDirection.TextDirection;
+exports.CheckboxGroup = CheckboxGroup["default"];
 exports.DataTable = DataTable["default"];
 exports.Table = Table.Table;
 exports.TableActionList = TableActionList["default"];