@carbon/react 1.48.1 → 1.49.0-rc.0

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

@@ -0,0 +1,119 @@
+/**
+ * Copyright IBM Corp. 2023
+ *
+ * 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';
+interface MenuItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
+    /**
+     * Optionally provide another Menu to create a submenu. props.children can't be used to specify the content of the MenuItem itself. Use props.label instead.
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+    /**
+     * Specify whether the MenuItem is disabled or not.
+     */
+    disabled?: boolean;
+    /**
+     * Specify the kind of the MenuItem.
+     */
+    kind?: 'default' | 'danger';
+    /**
+     * A required label titling the MenuItem. Will be rendered as its text content.
+     */
+    label: string;
+    /**
+     * Provide an optional function to be called when the MenuItem is clicked.
+     */
+    onClick?: (event: React.KeyboardEvent<HTMLLIElement> | React.MouseEvent<HTMLLIElement>) => void;
+    /**
+     * Only applicable if the parent menu is in `basic` mode. Sets the menu item's icon.
+     */
+    renderIcon?: any;
+    /**
+     * Provide a shortcut for the action of this MenuItem. Note that the component will only render it as a hint but not actually register the shortcut.
+     */
+    shortcut?: string;
+}
+declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLLIElement>>;
+interface MenuItemSelectableProps {
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+    /**
+     * Specify whether the option should be selected by default.
+     */
+    defaultSelected?: boolean;
+    /**
+     * A required label titling this option.
+     */
+    label: string;
+    /**
+     * Provide an optional function to be called when the selection state changes.
+     */
+    onChange?: React.ChangeEventHandler<HTMLLIElement>;
+    /**
+     * Pass a bool to props.selected to control the state of this option.
+     */
+    selected?: boolean;
+}
+declare const MenuItemSelectable: React.ForwardRefExoticComponent<MenuItemSelectableProps & React.RefAttributes<HTMLLIElement>>;
+interface MenuItemGroupProps {
+    /**
+     * A collection of MenuItems to be rendered within this group.
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+    /**
+     * A required label titling this group.
+     */
+    label: string;
+}
+declare const MenuItemGroup: React.ForwardRefExoticComponent<MenuItemGroupProps & React.RefAttributes<HTMLLIElement>>;
+interface MenuItemRadioGroupProps {
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+    /**
+     * Specify the default selected item. Must match the type of props.items.
+     */
+    defaultSelectedItem?: any;
+    /**
+     * Provide a function to convert an item to the string that will be rendered. Defaults to item.toString().
+     */
+    itemToString?: (item: any) => string;
+    /**
+     * Provide the options for this radio group. Can be of any type, as long as you provide an appropriate props.itemToString function.
+     */
+    items?: any[];
+    /**
+     * A required label titling this radio group.
+     */
+    label: string;
+    /**
+     * Provide an optional function to be called when the selection changes.
+     */
+    onChange?: React.ChangeEventHandler<HTMLLIElement>;
+    /**
+     * Provide props.selectedItem to control the state of this radio group. Must match the type of props.items.
+     */
+    selectedItem?: any;
+}
+declare const MenuItemRadioGroup: React.ForwardRefExoticComponent<MenuItemRadioGroupProps & React.RefAttributes<HTMLLIElement>>;
+interface MenuItemDividerProps {
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+}
+declare const MenuItemDivider: React.ForwardRefExoticComponent<MenuItemDividerProps & React.RefAttributes<HTMLLIElement>>;
+export { MenuItem, MenuItemSelectable, MenuItemGroup, MenuItemRadioGroup, MenuItemDivider, };

package/lib/components/Menu/MenuItem.js

@@ -49,7 +49,7 @@ const MenuItem = /*#__PURE__*/React__default["default"].forwardRef(function Menu
   } = _ref;
   const prefix = usePrefix.usePrefix();
   const context = React.useContext(MenuContext.MenuContext);
-  const menuItem = React.useRef();
+  const menuItem = React.useRef(null);
   const ref = useMergedRefs.useMergedRefs([forwardRef, menuItem]);
   const [boundaries, setBoundaries] = React.useState({
     x: -1,
@@ -71,6 +71,9 @@ const MenuItem = /*#__PURE__*/React__default["default"].forwardRef(function Menu
     });
   }
   function openSubmenu() {
+    if (!menuItem.current) {
+      return;
+    }
     const {
       x,
       y,
@@ -115,9 +118,11 @@ const MenuItem = /*#__PURE__*/React__default["default"].forwardRef(function Menu
     }, hoverIntentDelay);
   }
   function handleMouseLeave() {
-    clearTimeout(hoverIntentTimeout.current);
-    closeSubmenu();
-    menuItem.current.focus();
+    if (hoverIntentTimeout.current) {
+      clearTimeout(hoverIntentTimeout.current);
+      closeSubmenu();
+      menuItem.current?.focus();
+    }
   }
   function handleKeyDown(e) {
     if (hasChildren && match.match(e, keys.ArrowRight)) {
@@ -167,13 +172,13 @@ const MenuItem = /*#__PURE__*/React__default["default"].forwardRef(function Menu
   }, rest, {
     ref: ref,
     className: classNames,
-    tabIndex: "-1",
-    "aria-disabled": isDisabled || null,
-    "aria-haspopup": hasChildren || null,
-    "aria-expanded": hasChildren ? submenuOpen : null,
+    tabIndex: -1,
+    "aria-disabled": isDisabled,
+    "aria-haspopup": hasChildren || undefined,
+    "aria-expanded": hasChildren ? submenuOpen : undefined,
     onClick: handleClick,
-    onMouseEnter: hasChildren ? handleMouseEnter : null,
-    onMouseLeave: hasChildren ? handleMouseLeave : null,
+    onMouseEnter: hasChildren ? handleMouseEnter : undefined,
+    onMouseLeave: hasChildren ? handleMouseLeave : undefined,
     onKeyDown: handleKeyDown
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--menu-item__icon`
@@ -190,7 +195,7 @@ const MenuItem = /*#__PURE__*/React__default["default"].forwardRef(function Menu
     open: submenuOpen,
     onClose: () => {
       closeSubmenu();
-      menuItem.current.focus();
+      menuItem.current?.focus();
     },
     x: boundaries.x,
     y: boundaries.y
@@ -370,7 +375,7 @@ const MenuItemRadioGroup = /*#__PURE__*/React__default["default"].forwardRef(fun
   }, /*#__PURE__*/React__default["default"].createElement("ul", _rollupPluginBabelHelpers["extends"]({}, rest, {
     role: "group",
     "aria-label": label
-  }), items.map((item, i) => /*#__PURE__*/React__default["default"].createElement(MenuItem, {
+  }), items?.map((item, i) => /*#__PURE__*/React__default["default"].createElement(MenuItem, {
     key: i,
     label: itemToString(item),
     role: "menuitemradio",

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

@@ -0,0 +1,9 @@
+/**
+ * Copyright IBM Corp. 2023
+ *
+ * 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 { Menu } from './Menu';
+import { MenuItem, MenuItemDivider, MenuItemGroup, MenuItemRadioGroup, MenuItemSelectable } from './MenuItem';
+export { Menu, MenuItem, MenuItemDivider, MenuItemGroup, MenuItemRadioGroup, MenuItemSelectable, };

package/lib/components/MenuButton/index.js

@@ -17,6 +17,7 @@ var iconsReact = require('@carbon/icons-react');
 var Button = require('../Button/Button.js');
 require('../Button/Button.Skeleton.js');
 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');

package/lib/components/ModalWrapper/ModalWrapper.d.ts

@@ -70,6 +70,6 @@ export default class ModalWrapper extends React.Component<ModalWrapperProps, Mod
     handleOpen: () => void;
     handleClose: (evt: React.KeyboardEvent<HTMLDivElement>) => void;
     handleOnRequestSubmit: (evt: React.KeyboardEvent<HTMLDivElement>) => void;
-    render(): JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }
 export {};

package/lib/components/Notification/Notification.d.ts

@@ -25,7 +25,7 @@ export interface NotificationActionButtonProps extends ButtonProps<'button'> {
      */
     onClick?(): void;
 }
-export declare function NotificationActionButton({ children, className: customClassName, onClick, inline, ...rest }: NotificationActionButtonProps): JSX.Element;
+export declare function NotificationActionButton({ children, className: customClassName, onClick, inline, ...rest }: NotificationActionButtonProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace NotificationActionButton {
     var propTypes: {
         /**
@@ -82,7 +82,7 @@ export interface NotificationButtonProps extends ButtonHTMLAttributes<HTMLButton
         name?: string;
     }>;
 }
-export declare function NotificationButton({ 'aria-label': ariaLabel, ariaLabel: deprecatedAriaLabel, className, type, renderIcon: IconTag, name, notificationType, ...rest }: NotificationButtonProps): JSX.Element;
+export declare function NotificationButton({ 'aria-label': ariaLabel, ariaLabel: deprecatedAriaLabel, className, type, renderIcon: IconTag, name, notificationType, ...rest }: NotificationButtonProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace NotificationButton {
     var propTypes: {
         /**
@@ -186,7 +186,7 @@ export interface ToastNotificationProps extends HTMLAttributes<HTMLDivElement> {
      */
     title?: string;
 }
-export declare function ToastNotification({ ['aria-label']: ariaLabel, ariaLabel: deprecatedAriaLabel, role, onClose, onCloseButtonClick, statusIconDescription, className, children, kind, lowContrast, hideCloseButton, timeout, title, caption, subtitle, ...rest }: ToastNotificationProps): JSX.Element | null;
+export declare function ToastNotification({ ['aria-label']: ariaLabel, ariaLabel: deprecatedAriaLabel, role, onClose, onCloseButtonClick, statusIconDescription, className, children, kind, lowContrast, hideCloseButton, timeout, title, caption, subtitle, ...rest }: ToastNotificationProps): import("react/jsx-runtime").JSX.Element | null;
 export declare namespace ToastNotification {
     var propTypes: {
         /**
@@ -308,7 +308,7 @@ export interface InlineNotificationProps extends HTMLAttributes<HTMLDivElement>
      */
     title?: string;
 }
-export declare function InlineNotification({ ['aria-label']: ariaLabel, children, title, subtitle, role, onClose, onCloseButtonClick, statusIconDescription, className, kind, lowContrast, hideCloseButton, ...rest }: InlineNotificationProps): JSX.Element | null;
+export declare function InlineNotification({ ['aria-label']: ariaLabel, children, title, subtitle, role, onClose, onCloseButtonClick, statusIconDescription, className, kind, lowContrast, hideCloseButton, ...rest }: InlineNotificationProps): import("react/jsx-runtime").JSX.Element | null;
 export declare namespace InlineNotification {
     var propTypes: {
         /**
@@ -388,6 +388,7 @@ export interface ActionableNotificationProps extends HTMLAttributes<HTMLDivEleme
      */
     closeOnEscape?: boolean;
     /**
+     * @deprecated use StaticNotification once it's available. Issue #15532
      * Specify if focus should be moved to the component when the notification contains actions
      */
     hasFocus?: boolean;
@@ -435,7 +436,7 @@ export interface ActionableNotificationProps extends HTMLAttributes<HTMLDivEleme
      */
     title?: string;
 }
-export declare function ActionableNotification({ actionButtonLabel, ['aria-label']: ariaLabel, ariaLabel: deprecatedAriaLabel, children, role, onActionButtonClick, onClose, onCloseButtonClick, statusIconDescription, className, inline, kind, lowContrast, hideCloseButton, hasFocus, closeOnEscape, title, subtitle, ...rest }: ActionableNotificationProps): JSX.Element | null;
+export declare function ActionableNotification({ actionButtonLabel, ['aria-label']: ariaLabel, ariaLabel: deprecatedAriaLabel, children, role, onActionButtonClick, onClose, onCloseButtonClick, statusIconDescription, className, inline, kind, lowContrast, hideCloseButton, hasFocus, closeOnEscape, title, subtitle, ...rest }: ActionableNotificationProps): import("react/jsx-runtime").JSX.Element | null;
 export declare namespace ActionableNotification {
     var propTypes: {
         /**
@@ -464,9 +465,10 @@ export declare namespace ActionableNotification {
          */
         closeOnEscape: PropTypes.Requireable<boolean>;
         /**
+         * Deprecated, please use StaticNotification once it's available. Issue #15532
          * Specify if focus should be moved to the component when the notification contains actions
          */
-        hasFocus: PropTypes.Requireable<boolean>;
+        hasFocus: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
         /**
          * Specify the close button should be disabled, or not
          */

package/lib/components/Notification/Notification.js

@@ -637,9 +637,10 @@ ActionableNotification.propTypes = {
    */
   closeOnEscape: PropTypes__default["default"].bool,
   /**
+   * Deprecated, please use StaticNotification once it's available. Issue #15532
    * Specify if focus should be moved to the component when the notification contains actions
    */
-  hasFocus: PropTypes__default["default"].bool,
+  hasFocus: deprecate["default"](PropTypes__default["default"].bool),
   /**
    * Specify the close button should be disabled, or not
    */

package/lib/components/NumberInput/NumberInput.Skeleton.d.ts

@@ -16,7 +16,7 @@ export interface NumberInputSkeletonProps extends HTMLAttributes<HTMLDivElement>
      */
     hideLabel?: boolean;
 }
-declare function NumberInputSkeleton({ hideLabel, className, ...rest }: NumberInputSkeletonProps): JSX.Element;
+declare function NumberInputSkeleton({ hideLabel, className, ...rest }: NumberInputSkeletonProps): import("react/jsx-runtime").JSX.Element;
 declare namespace NumberInputSkeleton {
     var propTypes: {
         /**

package/lib/components/OrderedList/OrderedList.d.ts

@@ -11,7 +11,7 @@ interface OrderedListProps extends ComponentProps<'ol'> {
     native?: boolean | undefined;
     isExpressive?: boolean | undefined;
 }
-declare function OrderedList({ className, nested, native, isExpressive, ...other }: OrderedListProps): JSX.Element;
+declare function OrderedList({ className, nested, native, isExpressive, ...other }: OrderedListProps): import("react/jsx-runtime").JSX.Element;
 declare namespace OrderedList {
     var propTypes: {
         /**

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

@@ -16,6 +16,7 @@ var cx = require('classnames');
 var iconsReact = require('@carbon/icons-react');
 var index = require('../../IconButton/index.js');
 var Menu = require('../../Menu/Menu.js');
+require('../../Menu/MenuItem.js');
 var useId = require('../../../internal/useId.js');
 var usePrefix = require('../../../internal/usePrefix.js');
 var useAttachedMenu = require('../../../internal/useAttachedMenu.js');

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>) => JSX.Element;
+declare const PrimaryButton: <T extends React.ElementType<any>>(props: ButtonProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default PrimaryButton;

package/lib/components/ProgressBar/ProgressBar.d.ts

@@ -4,7 +4,6 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/// <reference types="react" />
 import PropTypes from 'prop-types';
 interface ProgressBarProps {
     /**
@@ -44,7 +43,7 @@ interface ProgressBarProps {
      */
     value?: number;
 }
-declare function ProgressBar({ className, helperText, hideLabel, label, max, size, status, type, value, }: ProgressBarProps): JSX.Element;
+declare function ProgressBar({ className, helperText, hideLabel, label, max, size, status, type, value, }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ProgressBar {
     var propTypes: {
         /**

package/lib/components/ProgressIndicator/ProgressIndicator.Skeleton.d.ts

@@ -4,7 +4,6 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/// <reference types="react" />
 import PropTypes from 'prop-types';
 interface ProgressIndicatorSkeletonProps {
     /**
@@ -16,7 +15,7 @@ interface ProgressIndicatorSkeletonProps {
      */
     vertical?: boolean;
 }
-declare function ProgressIndicatorSkeleton({ className, vertical, ...rest }: ProgressIndicatorSkeletonProps): JSX.Element;
+declare function ProgressIndicatorSkeleton({ className, vertical, ...rest }: ProgressIndicatorSkeletonProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ProgressIndicatorSkeleton {
     var propTypes: {
         /**

package/lib/components/ProgressIndicator/ProgressIndicator.d.ts

@@ -33,7 +33,7 @@ interface ProgressIndicatorProps extends Omit<React.HTMLAttributes<HTMLUListElem
      */
     vertical?: boolean;
 }
-declare function ProgressIndicator({ children, className: customClassName, currentIndex: controlledIndex, onChange, spaceEqually, vertical, ...rest }: ProgressIndicatorProps): JSX.Element;
+declare function ProgressIndicator({ children, className: customClassName, currentIndex: controlledIndex, onChange, spaceEqually, vertical, ...rest }: ProgressIndicatorProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ProgressIndicator {
     var propTypes: {
         /**
@@ -118,7 +118,7 @@ interface ProgressStepProps {
      */
     translateWithId?: (id: string) => string;
 }
-declare function ProgressStep({ label, description, className, current, complete, invalid, secondaryLabel, disabled, onClick, translateWithId: t, ...rest }: ProgressStepProps): JSX.Element;
+declare function ProgressStep({ label, description, className, current, complete, invalid, secondaryLabel, disabled, onClick, translateWithId: t, ...rest }: ProgressStepProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ProgressStep {
     var propTypes: {
         /**

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

@@ -12,7 +12,7 @@ export interface RadioButtonSkeletonProps extends React.InputHTMLAttributes<HTML
      */
     className?: string;
 }
-declare function RadioButtonSkeleton(props: RadioButtonSkeletonProps): JSX.Element;
+declare function RadioButtonSkeleton(props: RadioButtonSkeletonProps): import("react/jsx-runtime").JSX.Element;
 declare namespace RadioButtonSkeleton {
     var propTypes: {
         /**

package/lib/components/Search/Search.Skeleton.d.ts

@@ -17,7 +17,7 @@ export interface SearchSkeletonProps extends React.HTMLAttributes<HTMLDivElement
     small?: boolean;
 }
 declare const SearchSkeleton: {
-    ({ small, className, ...rest }: SearchSkeletonProps): JSX.Element;
+    ({ small, className, ...rest }: SearchSkeletonProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Specify an optional className to add.

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>) => JSX.Element;
+declare const SecondaryButton: <T extends React.ElementType<any>>(props: ButtonProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default SecondaryButton;

package/lib/components/Select/Select.Skeleton.d.ts

@@ -17,7 +17,7 @@ export interface SelectSkeletonProps extends HTMLAttributes<HTMLDivElement> {
     hideLabel?: boolean;
 }
 declare const SelectSkeleton: {
-    ({ hideLabel, className, ...rest }: SelectSkeletonProps): JSX.Element;
+    ({ hideLabel, className, ...rest }: SelectSkeletonProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Specify an optional className to add to the form item wrapper.

package/lib/components/Select/Select.d.ts

@@ -90,5 +90,5 @@ interface SelectProps extends Omit<ComponentPropsWithRef<'select'>, ExcludedAttr
      */
     warnText?: ReactNode;
 }
-declare const Select: React.ForwardRefExoticComponent<Pick<SelectProps, "value" | "children" | "disabled" | "form" | "slot" | "style" | "title" | "className" | "size" | "dir" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "autoComplete" | "multiple" | "key" | "id" | "aria-controls" | "aria-expanded" | "onClick" | "onKeyDown" | "onTransitionEnd" | "tabIndex" | "color" | "lang" | "name" | "role" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEndCapture" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "inline" | "readOnly" | "required" | "light" | "invalid" | "labelText" | "helperText" | "invalidText" | "hideLabel" | "warn" | "warnText" | "slug" | "noLabel"> & React.RefAttributes<HTMLSelectElement>>;
+declare const Select: React.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & React.RefAttributes<HTMLSelectElement>>;
 export default Select;

package/lib/components/SelectItem/SelectItem.d.ts

@@ -29,7 +29,7 @@ export interface SelectItemProps extends HTMLAttributes<HTMLOptionElement> {
     value: any;
 }
 declare const SelectItem: {
-    ({ className, value, disabled, hidden, text, ...other }: SelectItemProps): JSX.Element;
+    ({ className, value, disabled, hidden, text, ...other }: SelectItemProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Specify an optional className to be applied to the node

package/lib/components/SelectItemGroup/SelectItemGroup.d.ts

@@ -25,7 +25,7 @@ export interface SelectItemGroupProps extends HTMLAttributes<HTMLOptGroupElement
     label: string;
 }
 declare const SelectItemGroup: {
-    ({ children, className, disabled, label, ...other }: SelectItemGroupProps): JSX.Element;
+    ({ children, className, disabled, label, ...other }: SelectItemGroupProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Provide the contents of your <SelectItemGroup>

package/lib/components/SkeletonPlaceholder/SkeletonPlaceholder.d.ts

@@ -12,7 +12,7 @@ export interface SkeletonPlaceholderProps {
     className?: string;
 }
 declare const SkeletonPlaceholder: {
-    ({ className, ...other }: SkeletonPlaceholderProps): JSX.Element;
+    ({ className, ...other }: SkeletonPlaceholderProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Add a custom class to the component

package/lib/components/SkeletonText/SkeletonText.d.ts

@@ -28,7 +28,7 @@ interface SkeletonTextProps {
     width?: string;
 }
 declare const SkeletonText: {
-    ({ paragraph, lineCount, width, heading, className, ...rest }: SkeletonTextProps): JSX.Element;
+    ({ paragraph, lineCount, width, heading, className, ...rest }: SkeletonTextProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Specify an optional className to be applied to the container node

package/lib/components/Slider/Slider.Skeleton.d.ts

@@ -21,7 +21,7 @@ export interface SliderSkeletonProps extends HTMLAttributes<HTMLDivElement> {
     twoHandles?: boolean;
 }
 declare const SliderSkeleton: {
-    ({ hideLabel, className, twoHandles, ...rest }: SliderSkeletonProps): JSX.Element;
+    ({ hideLabel, className, twoHandles, ...rest }: SliderSkeletonProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Specify an optional className to add to the form item wrapper.

package/lib/components/Slider/Slider.d.ts

@@ -492,6 +492,6 @@ declare class Slider extends PureComponent<SliderProps> {
     getClientXFromEvent(event: MouseEvent | TouchEvent): any;
     hasTwoHandles(): boolean;
     static getDerivedStateFromProps(props: any, state: any): {} | null;
-    render(): JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }
 export default Slider;

package/lib/components/Slider/SliderHandles.d.ts

@@ -1,4 +1,4 @@
-export declare const LowerHandle: () => JSX.Element;
-export declare const LowerHandleFocus: () => JSX.Element;
-export declare const UpperHandle: () => JSX.Element;
-export declare const UpperHandleFocus: () => JSX.Element;
+export declare const LowerHandle: () => import("react/jsx-runtime").JSX.Element;
+export declare const LowerHandleFocus: () => import("react/jsx-runtime").JSX.Element;
+export declare const UpperHandle: () => import("react/jsx-runtime").JSX.Element;
+export declare const UpperHandleFocus: () => import("react/jsx-runtime").JSX.Element;

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

@@ -4,8 +4,9 @@
  * 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 { ReactNode } from 'react';
 import { Stack } from './Stack';
-declare const HStack: React.ForwardRefExoticComponent<React.RefAttributes<unknown>>;
-declare const VStack: React.ForwardRefExoticComponent<React.RefAttributes<unknown>>;
+import { ForwardRefReturn } from '../../types/common';
+declare const HStack: ForwardRefReturn<ReactNode>;
+declare const VStack: ForwardRefReturn<ReactNode>;
 export { HStack, Stack, VStack };

package/lib/components/StructuredList/StructuredList.Skeleton.d.ts

@@ -4,7 +4,6 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/// <reference types="react" />
 import PropTypes from 'prop-types';
 export interface StructuredListSkeletonProps {
     /**
@@ -16,7 +15,7 @@ export interface StructuredListSkeletonProps {
      */
     rowCount?: number;
 }
-declare function StructuredListSkeleton({ rowCount, className, ...rest }: StructuredListSkeletonProps): JSX.Element;
+declare function StructuredListSkeleton({ rowCount, className, ...rest }: StructuredListSkeletonProps): import("react/jsx-runtime").JSX.Element;
 declare namespace StructuredListSkeleton {
     var propTypes: {
         /**

package/lib/components/StructuredList/StructuredList.d.ts

@@ -33,7 +33,7 @@ export interface StructuredListWrapperProps extends DivAttrs {
      */
     selection?: boolean;
 }
-export declare function StructuredListWrapper(props: StructuredListWrapperProps): JSX.Element;
+export declare function StructuredListWrapper(props: StructuredListWrapperProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace StructuredListWrapper {
     var propTypes: {
         /**
@@ -77,7 +77,7 @@ export interface StructuredListHeadProps extends DivAttrs {
      */
     className?: string;
 }
-export declare function StructuredListHead(props: any): JSX.Element;
+export declare function StructuredListHead(props: any): import("react/jsx-runtime").JSX.Element;
 export declare namespace StructuredListHead {
     var propTypes: {
         /**
@@ -105,7 +105,7 @@ export interface StructuredListBodyProps extends DivAttrs {
      */
     onKeyDown?(event: KeyboardEvent): void;
 }
-export declare function StructuredListBody(props: StructuredListBodyProps): JSX.Element;
+export declare function StructuredListBody(props: StructuredListBodyProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace StructuredListBody {
     var propTypes: {
         /**
@@ -145,7 +145,7 @@ export interface StructuredListRowProps extends DivAttrs {
      */
     onKeyDown?(event: KeyboardEvent): void;
 }
-export declare function StructuredListRow(props: StructuredListRowProps): JSX.Element;
+export declare function StructuredListRow(props: StructuredListRowProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace StructuredListRow {
     var propTypes: {
         /**
@@ -196,7 +196,7 @@ export interface StructuredListInputProps extends DivAttrs {
      */
     title?: string;
 }
-export declare function StructuredListInput(props: StructuredListInputProps): JSX.Element;
+export declare function StructuredListInput(props: StructuredListInputProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace StructuredListInput {
     var propTypes: {
         /**
@@ -247,7 +247,7 @@ export interface StructuredListCellProps extends DivAttrs {
      */
     noWrap?: boolean;
 }
-export declare function StructuredListCell(props: StructuredListCellProps): JSX.Element;
+export declare function StructuredListCell(props: StructuredListCellProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace StructuredListCell {
     var propTypes: {
         /**

package/lib/components/TabContent/TabContent.d.ts

@@ -20,7 +20,7 @@ export interface TabContentProps extends HTMLAttributes<HTMLDivElement> {
      */
     selected?: boolean;
 }
-declare function TabContent(props: any): JSX.Element;
+declare function TabContent(props: any): import("react/jsx-runtime").JSX.Element;
 declare namespace TabContent {
     var propTypes: {
         /**

package/lib/components/Tabs/Tabs.Skeleton.d.ts

@@ -16,7 +16,7 @@ export interface TabsSkeletonProps extends HTMLAttributes<HTMLDivElement> {
      */
     contained?: boolean;
 }
-declare function TabsSkeleton({ className, contained, ...rest }: TabsSkeletonProps): JSX.Element;
+declare function TabsSkeleton({ className, contained, ...rest }: TabsSkeletonProps): import("react/jsx-runtime").JSX.Element;
 declare namespace TabsSkeleton {
     var propTypes: {
         /**