@carbon/react 1.65.0 → 1.66.0

package/lib/components/ComboBox/ComboBox.js

@@ -17,6 +17,8 @@ var React = require('react');
 require('../Text/index.js');
 var iconsReact = require('@carbon/icons-react');
 var index = require('../ListBox/index.js');
+var ListBoxSelection = require('../ListBox/next/ListBoxSelection.js');
+var ListBoxTrigger = require('../ListBox/next/ListBoxTrigger.js');
 var useId = require('../../internal/useId.js');
 var mergeRefs = require('../../tools/mergeRefs.js');
 var deprecate = require('../../prop-types/deprecate.js');
@@ -24,10 +26,9 @@ var usePrefix = require('../../internal/usePrefix.js');
 require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
 var react = require('@floating-ui/react');
+var floatingUi_core = require('../../node_modules/@floating-ui/core/dist/floating-ui.core.mjs.js');
 var Text = require('../Text/Text.js');
 var match = require('../../internal/keyboard/match.js');
-var ListBoxSelection = require('../ListBox/next/ListBoxSelection.js');
-var ListBoxTrigger = require('../ListBox/next/ListBoxTrigger.js');
 var ListBoxPropTypes = require('../ListBox/ListBoxPropTypes.js');
 var keys = require('../../internal/keyboard/keys.js');
 
@@ -138,19 +139,24 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
   } = props;
   const {
     refs,
-    floatingStyles
+    floatingStyles,
+    middlewareData
   } = react.useFloating(autoAlign ? {
     placement: direction,
     strategy: 'fixed',
-    middleware: [react.flip()],
+    middleware: [react.flip(), floatingUi_core.hide()],
     whileElementsMounted: react.autoUpdate
   } : {});
   const parentWidth = refs?.reference?.current?.clientWidth;
   React.useEffect(() => {
     if (autoAlign) {
-      Object.keys(floatingStyles).forEach(style => {
+      const updatedFloatingStyles = {
+        ...floatingStyles,
+        visibility: middlewareData.hide?.referenceHidden ? 'hidden' : 'visible'
+      };
+      Object.keys(updatedFloatingStyles).forEach(style => {
         if (refs.floating.current) {
-          refs.floating.current.style[style] = floatingStyles[style];
+          refs.floating.current.style[style] = updatedFloatingStyles[style];
         }
       });
       if (parentWidth && refs.floating.current) {
@@ -217,17 +223,30 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     } = changes;
     switch (type) {
       case InputBlur:
-        if (state.inputValue && highlightedIndex == '-1' && changes.selectedItem) {
-          return {
-            ...changes,
-            inputValue: itemToString(changes.selectedItem)
-          };
-        } else if (state.inputValue && highlightedIndex == '-1' && !allowCustomValue && !changes.selectedItem) {
-          return {
-            ...changes,
-            inputValue: ''
-          };
-        } else {
+        {
+          if (allowCustomValue && highlightedIndex == '-1') {
+            const customValue = inputValue;
+            changes.selectedItem = customValue;
+            if (onChange) {
+              onChange({
+                selectedItem: inputValue,
+                inputValue
+              });
+            }
+            return changes;
+          }
+          if (state.inputValue && highlightedIndex == '-1' && changes.selectedItem) {
+            return {
+              ...changes,
+              inputValue: itemToString(changes.selectedItem)
+            };
+          }
+          if (state.inputValue && highlightedIndex == '-1' && !allowCustomValue && !changes.selectedItem) {
+            return {
+              ...changes,
+              inputValue: ''
+            };
+          }
           return changes;
         }
       case InputKeyDownEnter:
@@ -296,7 +315,8 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     [`${prefix}--combo-box--invalid--focused`]: invalid && isFocused,
     [`${prefix}--list-box--up`]: direction === 'top',
     [`${prefix}--combo-box--warning`]: showWarning,
-    [`${prefix}--combo-box--readonly`]: readOnly
+    [`${prefix}--combo-box--readonly`]: readOnly,
+    [`${prefix}--autoalign`]: autoAlign
   });
   const titleClasses = cx__default["default"](`${prefix}--label`, {
     [`${prefix}--label--disabled`]: disabled
@@ -543,7 +563,6 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     onClearSelection: handleSelectionClear,
     selectionCount: 0
   }), /*#__PURE__*/React__default["default"].createElement(ListBoxTrigger["default"], _rollupPluginBabelHelpers["extends"]({}, buttonProps, {
-    // @ts-expect-error
     isOpen: isOpen,
     translateWithId: translateWithId
   }))), normalizedSlug, /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, menuProps, isOpen ? filterItems(items, itemToString, inputValue).map((item, index$1) => {

package/lib/components/ComboButton/index.js

@@ -24,6 +24,7 @@ var useId = require('../../internal/useId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var react = require('@floating-ui/react');
 var mergeRefs = require('../../tools/mergeRefs.js');
+var floatingUi_core = require('../../node_modules/@floating-ui/core/dist/floating-ui.core.mjs.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -61,7 +62,7 @@ const ComboButton = /*#__PURE__*/React__default["default"].forwardRef(function C
   const containerRef = React.useRef(null);
   const middlewares = [react.flip({
     crossAxis: false
-  })];
+  }), floatingUi_core.hide()];
   if (menuAlignment === 'bottom' || menuAlignment === 'top') {
     middlewares.push(react.size({
       apply(_ref2) {
@@ -99,9 +100,13 @@ const ComboButton = /*#__PURE__*/React__default["default"].forwardRef(function C
     handleClose
   } = useAttachedMenu.useAttachedMenu(containerRef);
   React.useLayoutEffect(() => {
-    Object.keys(floatingStyles).forEach(style => {
+    const updatedFloatingStyles = {
+      ...floatingStyles,
+      visibility: middlewareData.hide?.referenceHidden ? 'hidden' : 'visible'
+    };
+    Object.keys(updatedFloatingStyles).forEach(style => {
       if (refs.floating.current) {
-        refs.floating.current.style[style] = floatingStyles[style];
+        refs.floating.current.style[style] = updatedFloatingStyles[style];
       }
     });
   }, [floatingStyles, refs.floating, middlewareData, placement, open]);

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

@@ -4,6 +4,8 @@
  * 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 ComposedModal from './ComposedModal';
 export { default as ComposedModal, type ComposedModalProps, ModalBody, type ModalBodyProps, } from './ComposedModal';
 export { ModalHeader, type ModalHeaderProps } from './ModalHeader';
 export { ModalFooter, type ModalFooterProps } from './ModalFooter';
+export default ComposedModal;

package/lib/components/Copy/Copy.d.ts

@@ -11,6 +11,10 @@ interface CopyProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
      * Specify how the trigger should align with the tooltip
      */
     align?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right';
+    /**
+     * **Experimental**: Will attempt to automatically align the tooltip
+     */
+    autoAlign?: boolean;
     /**
      * Specify an optional className to be applied to the underlying `<button>`
      */
@@ -35,13 +39,17 @@ interface CopyProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
      */
     onClick?: MouseEventHandler<HTMLButtonElement>;
 }
-declare function Copy({ align, children, className, feedback, feedbackTimeout, onAnimationEnd, onClick, ...other }: PropsWithChildren<CopyProps>): import("react/jsx-runtime").JSX.Element;
+declare function Copy({ align, autoAlign, children, className, feedback, feedbackTimeout, onAnimationEnd, onClick, ...other }: PropsWithChildren<CopyProps>): import("react/jsx-runtime").JSX.Element;
 declare namespace Copy {
     var propTypes: {
         /**
          * Specify how the trigger should align with the tooltip
          */
         align: PropTypes.Requireable<string>;
+        /**
+         * **Experimental**: Will attempt to automatically align the tooltip
+         */
+        autoAlign: PropTypes.Requireable<boolean>;
         /**
          * Pass in content to be rendered in the underlying `<button>`
          */

package/lib/components/Copy/Copy.js

@@ -29,6 +29,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 function Copy(_ref) {
   let {
     align = 'bottom',
+    autoAlign = false,
     children,
     className,
     feedback = 'Copied!',
@@ -63,6 +64,7 @@ function Copy(_ref) {
   return /*#__PURE__*/React__default["default"].createElement(index.IconButton, _rollupPluginBabelHelpers["extends"]({
     closeOnActivation: false,
     align: align,
+    autoAlign: autoAlign,
     className: classNames,
     label: animation ? feedback : initialLabel,
     onClick: events.composeEventHandlers([onClick, handleClick]),
@@ -76,6 +78,10 @@ Copy.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', 'right']),
+  /**
+   * **Experimental**: Will attempt to automatically align the tooltip
+   */
+  autoAlign: PropTypes__default["default"].bool,
   /**
    * Pass in content to be rendered in the underlying `<button>`
    */

package/lib/components/CopyButton/CopyButton.d.ts

@@ -12,6 +12,10 @@ export interface CopyButtonProps extends ButtonProps<'button'> {
      * Specify how the trigger should align with the tooltip
      */
     align?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right';
+    /**
+     * **Experimental**: Will attempt to automatically align the tooltip
+     */
+    autoAlign?: boolean;
     /**
      * Specify an optional className to be applied to the underlying `<button>`
      */
@@ -36,13 +40,17 @@ export interface CopyButtonProps extends ButtonProps<'button'> {
      */
     onClick?: MouseEventHandler<HTMLButtonElement>;
 }
-declare function CopyButton({ align, feedback, feedbackTimeout, iconDescription, className, onClick, ...other }: CopyButtonProps): import("react/jsx-runtime").JSX.Element;
+declare function CopyButton({ align, autoAlign, feedback, feedbackTimeout, iconDescription, className, onClick, ...other }: CopyButtonProps): import("react/jsx-runtime").JSX.Element;
 declare namespace CopyButton {
     var propTypes: {
         /**
          * Specify how the trigger should align with the tooltip
          */
         align: PropTypes.Requireable<string>;
+        /**
+         * **Experimental**: Will attempt to automatically align the tooltip
+         */
+        autoAlign: PropTypes.Requireable<boolean>;
         /**
          * Specify an optional className to be applied to the underlying `<button>`
          */

package/lib/components/CopyButton/CopyButton.js

@@ -28,6 +28,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 function CopyButton(_ref) {
   let {
     align = 'bottom',
+    autoAlign = false,
     feedback = 'Copied!',
     feedbackTimeout = 2000,
     iconDescription = 'Copy to clipboard',
@@ -46,6 +47,7 @@ function CopyButton(_ref) {
     feedbackTimeout: feedbackTimeout,
     onClick: onClick,
     align: align,
+    autoAlign: autoAlign,
     className: cx__default["default"](className, `${prefix}--copy-btn`),
     "aria-label": iconDescription
   }, other), /*#__PURE__*/React__default["default"].createElement(iconsReact.Copy, {
@@ -57,6 +59,10 @@ CopyButton.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', 'right']),
+  /**
+   * **Experimental**: Will attempt to automatically align the tooltip
+   */
+  autoAlign: PropTypes__default["default"].bool,
   /**
    * Specify an optional className to be applied to the underlying `<button>`
    */

package/lib/components/DataTable/TableSlugRow.d.ts

@@ -18,6 +18,7 @@ export interface TableSlugRowProps {
 }
 declare const TableSlugRow: {
     ({ className, slug }: TableSlugRowProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
     propTypes: {
         /**
          * The CSS class names of the cell that wraps the underlying input control

package/lib/components/DataTable/TableSlugRow.js

@@ -45,6 +45,7 @@ const TableSlugRow = _ref => {
     className: TableSlugRowClasses
   }, normalizedSlug);
 };
+TableSlugRow.displayName = 'TableSlugRow';
 TableSlugRow.propTypes = {
   /**
    * The CSS class names of the cell that wraps the underlying input control

package/lib/components/Dropdown/Dropdown.js

@@ -195,7 +195,7 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     [`${prefix}--dropdown--readonly`]: readOnly,
     [`${prefix}--dropdown--${size}`]: size,
     [`${prefix}--list-box--up`]: direction === 'top',
-    [`${prefix}--dropdown--autoalign`]: autoAlign
+    [`${prefix}--autoalign`]: autoAlign
   });
   const titleClasses = cx__default["default"](`${prefix}--label`, {
     [`${prefix}--label--disabled`]: disabled,

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

@@ -0,0 +1,20 @@
+import PropTypes from 'prop-types';
+export interface FluidTextAreaSkeletonProps {
+    /**
+     * Specify an optional className to be applied to the outer FluidForm wrapper
+     */
+    className?: string;
+}
+declare function FluidTextAreaSkeleton({ className, ...other }: {
+    [x: string]: any;
+    className: any;
+}): void;
+declare namespace FluidTextAreaSkeleton {
+    var propTypes: {
+        /**
+         * Specify an optional className to be applied to the outer FluidForm wrapper
+         */
+        className: PropTypes.Requireable<string>;
+    };
+}
+export default FluidTextAreaSkeleton;

package/lib/components/FluidTextArea/FluidTextArea.Skeleton.js

@@ -9,36 +9,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var PropTypes = require('prop-types');
-var React = require('react');
-var cx = require('classnames');
+require('react');
+require('classnames');
 var usePrefix = require('../../internal/usePrefix.js');
-var FormContext = require('../FluidForm/FormContext.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 function FluidTextAreaSkeleton(_ref) {
-  let {
-    className,
-    ...other
-  } = _ref;
-  const prefix = usePrefix.usePrefix();
-  return /*#__PURE__*/React__default["default"].createElement(FormContext.FormContext.Provider, {
-    value: {
-      isFluid: true
-    }
-  }, /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
-    className: cx__default["default"](`${prefix}--form-item ${prefix}--text-area--fluid__skeleton`, className)
-  }, other), /*#__PURE__*/React__default["default"].createElement("span", {
-    className: `${prefix}--label ${prefix}--skeleton`
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${prefix}--skeleton ${prefix}--text-area`
-  })));
+  usePrefix.usePrefix();
 }
 FluidTextAreaSkeleton.propTypes = {
   /**

package/lib/components/FluidTextArea/FluidTextArea.d.ts

@@ -0,0 +1,96 @@
+/**
+ * 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 React from 'react';
+export interface FluidTextAreaProps {
+    /**
+     * Provide a custom className that is applied directly to the underlying
+     * `<textarea>` node
+     */
+    className?: string;
+    /**
+     * Specify the `cols` attribute for the underlying `<textarea>` node
+     */
+    cols?: number;
+    /**
+     * Optionally provide the default value of the `<textarea>`
+     */
+    defaultValue?: string | number;
+    /**
+     * Specify whether the control is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specify whether to display the character counter
+     */
+    enableCounter?: boolean;
+    /**
+     * Provide text that is used alongside the control label for additional help
+     */
+    helperText?: React.ReactNode;
+    /**
+     * Specify whether you want the underlying label to be visually hidden
+     */
+    hideLabel?: boolean;
+    /**
+     * Provide a unique identifier for the control
+     */
+    id?: string;
+    /**
+     * Specify whether the control is currently invalid
+     */
+    invalid?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in an invalid state
+     */
+    invalidText?: React.ReactNode;
+    /**
+     * Provide the text that will be read by a screen reader when visiting this
+     * control
+     */
+    labelText: React.ReactNode;
+    /**
+     * `true` to use the light version. For use on $ui-01 backgrounds only.
+     * Don't use this to make tile background color same as container background color.
+     */
+    light?: boolean;
+    /**
+     * Max character count allowed for the textarea. This is needed in order for enableCounter to display
+     */
+    maxCount?: number;
+    /**
+     * Optionally provide an `onChange` handler that is called whenever `<textarea>`
+     * is updated
+     */
+    onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
+    /**
+     * Optionally provide an `onClick` handler that is called whenever the
+     * `<textarea>` is clicked
+     */
+    onClick?: React.MouseEventHandler<HTMLTextAreaElement>;
+    /**
+     * Specify the placeholder attribute for the `<textarea>`
+     */
+    placeholder?: string;
+    /**
+     * Specify the rows attribute for the `<textarea>`
+     */
+    rows?: number;
+    /**
+     * Provide the current value of the `<textarea>`
+     */
+    value?: string | number;
+    /**
+     * Specify whether the control is currently in warning state
+     */
+    warn?: boolean;
+    /**
+     *  Provide the text that is displayed when the control is in warning state
+     */
+    warnText?: React.ReactNode;
+}
+declare const FluidTextArea: React.FC<FluidTextAreaProps>;
+export default FluidTextArea;

package/lib/components/FluidTextArea/FluidTextArea.js

@@ -25,7 +25,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-function FluidTextArea(_ref) {
+const FluidTextArea = _ref => {
   let {
     className,
     ...other
@@ -39,7 +39,7 @@ function FluidTextArea(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(TextArea["default"], _rollupPluginBabelHelpers["extends"]({
     className: classNames
   }, other)));
-}
+};
 FluidTextArea.propTypes = {
   /**
    * Provide a custom className that is applied directly to the underlying

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

@@ -0,0 +1,12 @@
+/**
+ * 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 FluidTextArea from './FluidTextArea';
+import { type FluidTextAreaProps } from './FluidTextArea';
+import { type FluidTextAreaSkeletonProps } from './FluidTextArea.Skeleton';
+export default FluidTextArea;
+export { FluidTextArea, type FluidTextAreaProps, type FluidTextAreaSkeletonProps, };
+export { default as FluidTextAreaSkeleton } from './FluidTextArea.Skeleton';

package/lib/components/Grid/Column.js

@@ -274,11 +274,11 @@ function getClassNameForBreakpoints(breakpoints, prefix) {
         start,
         end
       } = breakpoint;
-      if (typeof offset === 'number' && offset > 0) {
-        classNames.push(`${prefix}--${name}:col-start-${offset + 1}`);
+      if (typeof offset === 'number') {
+        classNames.push(`${prefix}--${name}:col-start-${offset > 0 ? offset + 1 : 'auto'}`);
       }
       if (typeof start === 'number') {
-        classNames.push(`${prefix}--${name}:col-start-${start}`);
+        classNames.push(`${prefix}--${name}:col-start-${start ? start : 'auto'}`);
       }
       if (typeof end === 'number') {
         classNames.push(`${prefix}--${name}:col-end-${end}`);

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

@@ -13,6 +13,10 @@ interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
      * Specify how the trigger should align with the tooltip
      */
     align?: 'top' | 'top-left' | 'top-start' | 'top-right' | 'top-end' | 'bottom' | 'bottom-left' | 'bottom-start' | 'bottom-right' | 'bottom-end' | 'left' | 'right';
+    /**
+     * **Experimental**: Will attempt to automatically align the tooltip
+     */
+    autoAlign?: boolean;
     /**
      * Provide an icon or asset to be rendered inside of the IconButton
      */

package/lib/components/IconButton/index.js

@@ -28,6 +28,7 @@ const IconButtonKinds = ['primary', 'secondary', 'ghost', 'tertiary'];
 const IconButton = /*#__PURE__*/React__default["default"].forwardRef(function IconButton(_ref, ref) {
   let {
     align,
+    autoAlign = false,
     children,
     className,
     closeOnActivation = true,
@@ -48,6 +49,7 @@ const IconButton = /*#__PURE__*/React__default["default"].forwardRef(function Ic
   });
   return /*#__PURE__*/React__default["default"].createElement(Tooltip.Tooltip, {
     align: align,
+    autoAlign: autoAlign,
     closeOnActivation: closeOnActivation,
     className: tooltipClasses,
     defaultOpen: defaultOpen,
@@ -69,6 +71,10 @@ IconButton.propTypes = {
    * Specify how the trigger should align with the tooltip
    */
   align: PropTypes__default["default"].oneOf(['top', 'top-left', 'top-start', 'top-right', 'top-end', 'bottom', 'bottom-left', 'bottom-start', 'bottom-right', 'bottom-end', 'left', 'right']),
+  /**
+   * **Experimental**: Will attempt to automatically align the tooltip
+   */
+  autoAlign: PropTypes__default["default"].bool,
   /**
    * Provide an icon or asset to be rendered inside of the IconButton
    */

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

@@ -4,9 +4,14 @@
  * 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 } from 'react';
+import React, { ForwardedRef, ReactNode } from 'react';
 import { ForwardRefReturn, ReactAttr } from '../../types/common';
 export interface ListBoxMenuItemProps extends ReactAttr<HTMLLIElement> {
+    /**
+     * Specify any children nodes that should be rendered inside of the ListBox
+     * Menu Item
+     */
+    children?: ReactNode;
     /**
      * Specify whether the current menu item is "active".
      */
@@ -19,6 +24,10 @@ export interface ListBoxMenuItemProps extends ReactAttr<HTMLLIElement> {
      * Specify whether the item should be disabled
      */
     disabled?: boolean;
+    /**
+     * Provide an optional tooltip for the ListBoxMenuItem
+     */
+    title?: string;
 }
 export type ListBoxMenuItemForwardedRef = (ForwardedRef<HTMLLIElement> & {
     menuItemOptionRef?: React.Ref<HTMLDivElement>;