@carbon/react 1.78.0 → 1.78.1

package/es/components/Dialog/index.js

@@ -0,0 +1,177 @@
+/**
+ * Copyright IBM Corp. 2016, 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 { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default, { useRef, useEffect } from 'react';
+import { usePrefix } from '../../internal/usePrefix.js';
+import cx from 'classnames';
+import { Close } from '@carbon/icons-react';
+import { IconButton } from '../IconButton/index.js';
+import { noopFn } from '../../internal/noopFn.js';
+
+const unstable__Dialog = /*#__PURE__*/React__default.forwardRef((_ref, forwardRef) => {
+  let {
+    children,
+    className,
+    modal,
+    onCancel = noopFn,
+    onClick = noopFn,
+    onClose = noopFn,
+    onRequestClose = noopFn,
+    open = false,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix();
+
+  // This component needs access to a ref, placed on the dialog, to call the
+  // various imperative dialog functions (show(), close(), etc.).
+  // If the parent component has not passed a ref for forwardRef, forwardRef
+  // will be null. A "backup" ref is needed to ensure the dialog's instance
+  // methods can always be called within this component.
+  const backupRef = useRef(null);
+  const ref = forwardRef ?? backupRef;
+
+  // Clicks on the backdrop of an open modal dialog should request the consuming component to close
+  // the dialog. Clicks elsewhere, or on non-modal dialogs should not request
+  // to close the dialog.
+  function handleModalBackdropClick(e) {
+    if (open && modal && e.target === ref.current) {
+      onRequestClose(e);
+    }
+  }
+  function handleClick(e) {
+    handleModalBackdropClick(e);
+
+    // onClick should always be called, no matter if the target is a modal
+    // dialog, modal dialog backdrop, or non-modal dialog.
+    onClick(e);
+  }
+  useEffect(() => {
+    if (ref.current) {
+      if (open) {
+        if (modal) {
+          // Display the dialog as a modal, over the top of any other dialogs
+          // that might be present. Everything outside the dialog are inert
+          // with interactions outside the dialog being blocked.
+          ref.current.showModal();
+        } else {
+          // Display the dialog modelessly, i.e. still allowing interaction
+          // with content outside of the dialog.
+          ref.current.show();
+        }
+      } else {
+        ref.current.close();
+      }
+    }
+  }, [modal, open]);
+  return /*#__PURE__*/React__default.createElement("dialog", _extends({}, rest, {
+    className: cx(`${prefix}--dialog`, {
+      [`${prefix}--dialog--modal`]: modal
+    }, className),
+    ref: ref,
+    onCancel: onCancel,
+    onClick: handleClick,
+    onClose: onClose
+  }), children);
+});
+unstable__Dialog.displayName = 'Dialog';
+unstable__Dialog.propTypes = {
+  /**
+   * Provide children to be rendered inside of the Dialog
+   */
+  children: PropTypes.node,
+  /**
+   * Specify an optional className to be applied to the modal root node
+   */
+  className: PropTypes.string,
+  /**
+   * Modal specifies whether the Dialog is modal or non-modal. This cannot be
+   * changed while open=true
+   */
+  modal: PropTypes.bool,
+  /**
+   * Specify a handler for closing Dialog.
+   * The handler should care of closing Dialog, e.g. changing `open` prop.
+   */
+  onRequestClose: PropTypes.func,
+  /**
+   * open initial state
+   */
+  open: PropTypes.bool
+};
+const DialogHeader = /*#__PURE__*/React__default.forwardRef((_ref2, ref) => {
+  let {
+    children,
+    ...rest
+  } = _ref2;
+  const prefix = usePrefix();
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: `${prefix}--dialog__header`,
+    ref: ref
+  }, rest), children);
+});
+DialogHeader.propTypes = {
+  /**
+   * Provide the contents to be rendered inside of this component
+   */
+  children: PropTypes.node
+};
+const DialogControls = /*#__PURE__*/React__default.forwardRef((_ref3, ref) => {
+  let {
+    children,
+    ...rest
+  } = _ref3;
+  const prefix = usePrefix();
+  return (
+    /*#__PURE__*/
+    // @ts-ignore
+    React__default.createElement("div", _extends({
+      className: `${prefix}--dialog__header-controls`,
+      ref: ref
+    }, rest), children)
+  );
+});
+DialogControls.propTypes = {
+  /**
+   * Provide children to be rendered inside of this component
+   */
+  children: PropTypes.node
+};
+const DialogCloseButton = /*#__PURE__*/React__default.forwardRef((_ref4, ref) => {
+  let {
+    onClick,
+    ...rest
+  } = _ref4;
+  const prefix = usePrefix();
+  return (
+    /*#__PURE__*/
+    // @ts-ignore
+    React__default.createElement(IconButton, _extends({
+      kind: "ghost",
+      className: `${prefix}--dialog__close`,
+      label: "Close",
+      title: "Close",
+      "aria-label": "Close",
+      align: "left",
+      onClick: onClick
+    }, rest), /*#__PURE__*/React__default.createElement(Close, {
+      size: 20,
+      "aria-hidden": "true",
+      tabIndex: "-1",
+      className: `${prefix}--icon__close`
+    }))
+  );
+});
+DialogCloseButton.propTypes = {
+  /**
+   * Specify a click handler applied to the IconButton
+   */
+  onClick: PropTypes.func
+};
+
+export { DialogCloseButton, DialogControls, DialogHeader, unstable__Dialog };

package/es/components/ExpandableSearch/ExpandableSearch.js

@@ -12,9 +12,9 @@ import Search from '../Search/Search.js';
 import '../Search/Search.Skeleton.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { composeEventHandlers } from '../../tools/events.js';
-import mergeRefs from '../../tools/mergeRefs.js';
-import { match } from '../../internal/keyboard/match.js';
 import { Escape } from '../../internal/keyboard/keys.js';
+import { match } from '../../internal/keyboard/match.js';
+import mergeRefs from '../../tools/mergeRefs.js';
 
 const ExpandableSearch = /*#__PURE__*/React__default.forwardRef(function ExpandableSearch(_ref, forwardedRef) {
   let {

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

@@ -14,6 +14,7 @@ export interface FeatureFlagsProps {
     enableV12Overflowmenu?: boolean;
     enableTreeviewControllable?: boolean;
     enableExperimentalFocusWrapWithoutSentinels?: boolean;
+    enableDialogElement?: boolean;
     enableV12DynamicFloatingStyles?: boolean;
 }
 /**
@@ -26,7 +27,7 @@ declare const FeatureFlagContext: React.Context<any>;
  * along with the current `FeatureFlagContext` to provide consumers to check if
  * a feature flag is enabled or disabled in a given React tree
  */
-declare function FeatureFlags({ children, flags, enableV12TileDefaultIcons, enableV12TileRadioIcons, enableV12Overflowmenu, enableTreeviewControllable, enableExperimentalFocusWrapWithoutSentinels, enableV12DynamicFloatingStyles, }: FeatureFlagsProps): JSX.Element;
+declare function FeatureFlags({ children, flags, enableV12TileDefaultIcons, enableV12TileRadioIcons, enableV12Overflowmenu, enableTreeviewControllable, enableExperimentalFocusWrapWithoutSentinels, enableDialogElement, enableV12DynamicFloatingStyles, }: FeatureFlagsProps): JSX.Element;
 declare namespace FeatureFlags {
     var propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
@@ -39,6 +40,7 @@ declare namespace FeatureFlags {
         enableV12Overflowmenu: PropTypes.Requireable<boolean>;
         enableTreeviewControllable: PropTypes.Requireable<boolean>;
         enableExperimentalFocusWrapWithoutSentinels: PropTypes.Requireable<boolean>;
+        enableDialogElement: PropTypes.Requireable<boolean>;
         enableV12DynamicFloatingStyles: PropTypes.Requireable<boolean>;
     };
 }

package/es/components/FeatureFlags/index.js

@@ -30,6 +30,7 @@ function FeatureFlags(_ref) {
     enableV12Overflowmenu = false,
     enableTreeviewControllable = false,
     enableExperimentalFocusWrapWithoutSentinels = false,
+    enableDialogElement = false,
     enableV12DynamicFloatingStyles = false
   } = _ref;
   const parentScope = useContext(FeatureFlagContext);
@@ -40,6 +41,7 @@ function FeatureFlags(_ref) {
     'enable-v12-overflowmenu': enableV12Overflowmenu,
     'enable-treeview-controllable': enableTreeviewControllable,
     'enable-experimental-focus-wrap-without-sentinels': enableExperimentalFocusWrapWithoutSentinels,
+    'enable-dialog-element': enableDialogElement,
     'enable-v12-dynamic-floating-styles': enableV12DynamicFloatingStyles,
     ...flags
   };
@@ -78,6 +80,7 @@ FeatureFlags.propTypes = {
   enableV12Overflowmenu: PropTypes.bool,
   enableTreeviewControllable: PropTypes.bool,
   enableExperimentalFocusWrapWithoutSentinels: PropTypes.bool,
+  enableDialogElement: PropTypes.bool,
   enableV12DynamicFloatingStyles: PropTypes.bool
 };
 

package/es/components/FileUploader/FileUploader.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/es/components/FileUploader/FileUploader.js

@@ -12,12 +12,12 @@ import React__default, { useState, useImperativeHandle } from 'react';
 import Filename from './Filename.js';
 import FileUploaderButton from './FileUploaderButton.js';
 import { ButtonKinds } from '../Button/Button.js';
+import { Enter, Space } from '../../internal/keyboard/keys.js';
+import { matches } from '../../internal/keyboard/match.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import '../Text/index.js';
 import { useId } from '../../internal/useId.js';
-import { matches } from '../../internal/keyboard/match.js';
 import { Text } from '../Text/Text.js';
-import { Enter, Space } from '../../internal/keyboard/keys.js';
 
 const FileUploader = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {

package/es/components/FileUploader/FileUploaderButton.js

@@ -9,13 +9,13 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React__default, { useState, useRef } from 'react';
+import { Enter, Space } from '../../internal/keyboard/keys.js';
+import { matches } from '../../internal/keyboard/match.js';
 import { ButtonKinds } from '../../prop-types/types.js';
 import uniqueId from '../../tools/uniqueId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { noopFn } from '../../internal/noopFn.js';
-import { matches } from '../../internal/keyboard/match.js';
-import { Enter, Space } from '../../internal/keyboard/keys.js';
 
 function FileUploaderButton(_ref) {
   let {

package/es/components/FileUploader/FileUploaderDropContainer.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/es/components/FileUploader/FileUploaderDropContainer.js

@@ -9,13 +9,13 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import React__default, { useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
+import { Enter, Space } from '../../internal/keyboard/keys.js';
+import { matches } from '../../internal/keyboard/match.js';
 import uniqueId from '../../tools/uniqueId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { composeEventHandlers } from '../../tools/events.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { noopFn } from '../../internal/noopFn.js';
-import { matches } from '../../internal/keyboard/match.js';
-import { Enter, Space } from '../../internal/keyboard/keys.js';
 
 function FileUploaderDropContainer(_ref) {
   let {
@@ -71,14 +71,16 @@ function FileUploaderDropContainer(_ref) {
   }
   function handleChange(event) {
     const files = [...(event.target.files ?? [])];
-    const addedFiles = validateFiles(files);
+    const filesToValidate = multiple ? files : [files[0]];
+    const addedFiles = validateFiles(filesToValidate);
     return onAddFiles(event, {
       addedFiles
     });
   }
   function handleDrop(event) {
     const files = [...event.dataTransfer.files];
-    const addedFiles = validateFiles(files);
+    const filesToValidate = multiple ? files : [files[0]];
+    const addedFiles = validateFiles(filesToValidate);
     return onAddFiles(event, {
       addedFiles
     });

package/es/components/FileUploader/FileUploaderItem.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/es/components/FileUploader/FileUploaderItem.js

@@ -10,15 +10,15 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React__default, { useRef, useState, useLayoutEffect } from 'react';
 import Filename from './Filename.js';
+import { Enter, Space } from '../../internal/keyboard/keys.js';
+import { matches } from '../../internal/keyboard/match.js';
 import uniqueId from '../../tools/uniqueId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { noopFn } from '../../internal/noopFn.js';
 import '../Text/index.js';
 import '../Tooltip/DefinitionTooltip.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
-import { matches } from '../../internal/keyboard/match.js';
 import { Text } from '../Text/Text.js';
-import { Enter, Space } from '../../internal/keyboard/keys.js';
 
 function FileUploaderItem(_ref) {
   let {

package/es/components/Grid/CSSGrid.js

@@ -12,10 +12,10 @@ import React__default from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useGridSettings, GridSettings } from './GridContext.js';
 
-function CSSGrid(_ref) {
+const CSSGrid = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
     align,
-    as: BaseComponent = 'div',
+    as,
     children,
     className: customClassName,
     condensed = false,
@@ -38,7 +38,8 @@ function CSSGrid(_ref) {
       mode: "css-grid",
       subgrid: true
     }, /*#__PURE__*/React__default.createElement(Subgrid, _extends({
-      as: BaseComponent,
+      ref: ref,
+      as: as,
       className: customClassName,
       mode: mode
     }, rest), children));
@@ -53,23 +54,24 @@ function CSSGrid(_ref) {
   });
 
   // cast as any to let TypeScript allow passing in attributes to base component
-  const BaseComponentAsAny = BaseComponent;
+  const BaseComponent = as || 'div';
   return /*#__PURE__*/React__default.createElement(GridSettings, {
     mode: "css-grid",
     subgrid: true
-  }, /*#__PURE__*/React__default.createElement(BaseComponentAsAny, _extends({
-    className: className
+  }, /*#__PURE__*/React__default.createElement(BaseComponent, _extends({
+    className: className,
+    ref: ref
   }, rest), children));
-}
+});
 CSSGrid.propTypes = {
-  /**
-   * Specify grid alignment. Default is center
-   */
-  align: PropTypes.oneOf(['start', 'center', 'end']),
   /**
    * Provide a custom element to render instead of the default <div>
    */
   as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+  /**
+   * Specify grid alignment. Default is center
+   */
+  align: PropTypes.oneOf(['start', 'center', 'end']),
   /**
    * Pass in content that will be rendered within the `Grid`
    */
@@ -93,9 +95,9 @@ CSSGrid.propTypes = {
    */
   narrow: PropTypes.bool
 };
-const Subgrid = _ref2 => {
+const Subgrid = /*#__PURE__*/React__default.forwardRef((_ref2, ref) => {
   let {
-    as: BaseComponent = 'div',
+    as,
     className: customClassName,
     children,
     mode,
@@ -108,10 +110,12 @@ const Subgrid = _ref2 => {
     [`${prefix}--subgrid--narrow`]: mode === 'narrow',
     [`${prefix}--subgrid--wide`]: mode === 'wide'
   });
+  const BaseComponent = as || 'div';
   return /*#__PURE__*/React__default.createElement(BaseComponent, _extends({}, rest, {
+    ref: ref,
     className: className
   }), children);
-};
+});
 Subgrid.propTypes = {
   /**
    * Provide a custom element to render instead of the default <div>

package/es/components/Grid/FlexGrid.js

@@ -12,9 +12,9 @@ import React__default from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { GridSettings } from './GridContext.js';
 
-function FlexGrid(_ref) {
+const FlexGrid = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
-    as: BaseComponent = 'div',
+    as,
     condensed = false,
     narrow = false,
     fullWidth = false,
@@ -30,14 +30,15 @@ function FlexGrid(_ref) {
     [`${prefix}--grid--full-width`]: fullWidth
   });
   // cast as any to let TypeScript allow passing in attributes to base component
-  const BaseComponentAsAny = BaseComponent;
+  const BaseComponent = as || 'div';
   return /*#__PURE__*/React__default.createElement(GridSettings, {
     mode: "flexbox",
     subgrid: false
-  }, /*#__PURE__*/React__default.createElement(BaseComponentAsAny, _extends({
-    className: className
+  }, /*#__PURE__*/React__default.createElement(BaseComponent, _extends({
+    className: className,
+    ref: ref
   }, rest), children));
-}
+});
 FlexGrid.propTypes = {
   /**
    * Provide a custom element to render instead of the default <div>

package/es/components/Grid/GridTypes.d.ts

@@ -4,7 +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 { PolymorphicProps } from '../../types/common';
+import { PolymorphicComponentPropWithRef } from '../../internal/PolymorphicProps';
 export interface GridBaseProps {
     /**
      * Pass in content that will be rendered within the `Grid`
@@ -29,7 +29,9 @@ export interface GridBaseProps {
      */
     narrow?: boolean;
 }
-export type GridProps<T extends React.ElementType> = PolymorphicProps<T, GridBaseProps>;
+export type GridProps<T extends React.ElementType> = PolymorphicComponentPropWithRef<T, GridBaseProps>;
 export interface GridComponent {
-    <T extends React.ElementType>(props: GridProps<T>, context?: any): React.ReactElement<any, any> | null;
+    <T extends React.ElementType = 'div'>(props: GridProps<T>): React.ReactElement | null;
+    displayName?: string;
+    propTypes?: React.WeakValidationMap<GridProps<any>>;
 }

package/es/components/IconButton/index.js

@@ -76,9 +76,9 @@ const IconButton = /*#__PURE__*/React__default.forwardRef(function IconButton(_r
     kind: kind,
     ref: ref,
     size: size,
-    className: cx(`${prefix}--btn--icon-only`, {
-      [`${prefix}--btn--selected`]: isSelected
-    }, className),
+    isSelected: isSelected,
+    hasIconOnly: true,
+    className: className,
     "aria-describedby": badgeCount && badgeId
   }), children, !disabled && badgeCount !== undefined && /*#__PURE__*/React__default.createElement(BadgeIndicator, {
     id: badgeId,

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

@@ -6,7 +6,7 @@
  */
 import React from 'react';
 import { LayerLevel } from './LayerLevel';
-import { PolymorphicProps } from '../../types/common';
+import { PolymorphicComponentPropWithRef } from '../../internal/PolymorphicProps';
 /**
  * A custom hook that will return information about the current layer. A common
  * field to pull from this is the `level` for the layer that the component that
@@ -30,8 +30,6 @@ export interface LayerBaseProps {
      */
     level?: LayerLevel;
 }
-export type LayerProps<T extends React.ElementType> = PolymorphicProps<T, LayerBaseProps>;
-export interface LayerComponent {
-    <T extends React.ElementType>(props: LayerProps<T>, context?: any): React.ReactElement<any, any> | null;
-}
-export declare const Layer: LayerComponent;
+export type LayerProps<T extends React.ElementType> = PolymorphicComponentPropWithRef<T, LayerBaseProps>;
+declare const Layer: React.ForwardRefExoticComponent<Omit<LayerProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<unknown>>;
+export { Layer };

package/es/components/Layer/index.js

@@ -24,9 +24,9 @@ function useLayer() {
     level
   };
 }
-const LayerRenderFunction = /*#__PURE__*/React__default.forwardRef(function Layer(_ref, ref) {
+const Layer = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
-    as = 'div',
+    as,
     className: customClassName,
     children,
     level: overrideLevel,
@@ -38,7 +38,7 @@ const LayerRenderFunction = /*#__PURE__*/React__default.forwardRef(function Laye
   const className = cx(`${prefix}--layer-${levels[level]}`, customClassName);
   // The level should be between MIN_LEVEL and MAX_LEVEL
   const value = Math.max(MIN_LEVEL, Math.min(level + 1, MAX_LEVEL));
-  const BaseComponent = as;
+  const BaseComponent = as || 'div';
   return /*#__PURE__*/React__default.createElement(LayerContext.Provider, {
     value: value
   }, /*#__PURE__*/React__default.createElement(BaseComponent, _extends({
@@ -47,8 +47,8 @@ const LayerRenderFunction = /*#__PURE__*/React__default.forwardRef(function Laye
     className: className
   }), children));
 });
-LayerRenderFunction.displayName = 'Layer';
-LayerRenderFunction.propTypes = {
+Layer.displayName = 'Layer';
+Layer.propTypes = {
   /**
    * Specify a custom component or element to be rendered as the top-level
    * element in the component
@@ -68,6 +68,5 @@ LayerRenderFunction.propTypes = {
    */
   level: PropTypes.oneOf([0, 1, 2])
 };
-const Layer = LayerRenderFunction;
 
 export { Layer, useLayer };

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

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -31,8 +31,7 @@ export interface LinkBaseProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
      */
     inline?: boolean;
     /**
-     * @description Optional prop to render an icon next to the link.
-     *   Can be a React component class
+     * A component used to render an icon.
      */
     renderIcon?: ComponentType;
     /**

package/es/components/Link/Link.js

@@ -82,8 +82,7 @@ Link.propTypes = {
    */
   inline: PropTypes.bool,
   /**
-   * Optional prop to render an icon next to the link.
-   * Can be a React component class
+   * A component used to render an icon.
    */
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**

package/es/components/ListBox/ListBoxMenuItem.d.ts

@@ -1,10 +1,10 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, { ForwardedRef, ReactNode } from 'react';
+import { ForwardedRef, ReactNode, type Ref } from 'react';
 import { ForwardRefReturn, ReactAttr } from '../../types/common';
 export interface ListBoxMenuItemProps extends ReactAttr<HTMLLIElement> {
     /**
@@ -30,7 +30,7 @@ export interface ListBoxMenuItemProps extends ReactAttr<HTMLLIElement> {
     title?: string;
 }
 export type ListBoxMenuItemForwardedRef = (ForwardedRef<HTMLLIElement> & {
-    menuItemOptionRef?: React.Ref<HTMLDivElement>;
+    menuItemOptionRef?: Ref<HTMLDivElement>;
 }) | null;
 export type ListBoxMenuItemComponent = ForwardRefReturn<ListBoxMenuItemForwardedRef, ListBoxMenuItemProps>;
 declare const _default: ListBoxMenuItemComponent;