@carbon/react 1.30.0 → 1.31.0-rc.0

package/es/components/OverflowMenuV2/index.js

@@ -5,80 +5,22 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useRef } from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import { OverflowMenuVertical } from '@carbon/icons-react';
-import { Menu } from '../Menu/Menu.js';
-import { useId } from '../../internal/useId.js';
-import { usePrefix } from '../../internal/usePrefix.js';
-import { useAttachedMenu } from '../../internal/useAttachedMenu.js';
+import React__default from 'react';
+import { warning } from '../../internal/warning.js';
+import { FeatureFlags } from '../FeatureFlags/index.js';
+import OverflowMenu from '../OverflowMenu/index.js';
 
-const defaultSize = 'md';
-function OverflowMenuV2(_ref) {
-  let {
-    children,
-    className,
-    renderIcon: IconElement = OverflowMenuVertical,
-    size = defaultSize,
-    ...rest
-  } = _ref;
-  const id = useId('overflowmenu');
-  const prefix = usePrefix();
-  const triggerRef = useRef(null);
-  const {
-    open,
-    x,
-    y,
-    handleClick,
-    handleMousedown,
-    handleClose
-  } = useAttachedMenu(triggerRef);
-  const containerClasses = cx(`${prefix}--overflow-menu__container`);
-  const triggerClasses = cx(`${prefix}--overflow-menu`, {
-    [`${prefix}--overflow-menu--open`]: open,
-    [className]: className
-  }, size !== defaultSize && `${prefix}--overflow-menu--${size}`);
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: containerClasses,
-    "aria-owns": id
-  }, /*#__PURE__*/React__default.createElement("button", _extends({}, rest, {
-    type: "button",
-    "aria-haspopup": true,
-    "aria-expanded": open,
-    className: triggerClasses,
-    onClick: handleClick,
-    onMouseDown: handleMousedown,
-    ref: triggerRef
-  }), /*#__PURE__*/React__default.createElement(IconElement, {
-    className: `${prefix}--overflow-menu__icon`
-  })), /*#__PURE__*/React__default.createElement(Menu, {
-    id: id,
-    size: size,
-    open: open,
-    onClose: handleClose,
-    x: x,
-    y: y
-  }, children));
+let didWarnAboutDeprecation = false;
+function OverflowMenuV2(props) {
+  if (process.env.NODE_ENV !== "production") {
+    process.env.NODE_ENV !== "production" ? warning(didWarnAboutDeprecation, '`<OverflowMenuV2>` is deprecated and will be removed in the next major version. Use `<OverflowMenu>` with the `enable-v12-overflowmenu` feature flag instead.') : void 0;
+    didWarnAboutDeprecation = true;
+  }
+  return /*#__PURE__*/React__default.createElement(FeatureFlags, {
+    flags: {
+      'enable-v12-overflowmenu': true
+    }
+  }, /*#__PURE__*/React__default.createElement(OverflowMenu, props));
 }
-OverflowMenuV2.propTypes = {
-  /**
-   * A collection of MenuItems to be rendered within this OverflowMenu.
-   */
-  children: PropTypes.node,
-  /**
-   * Additional CSS class names for the trigger button.
-   */
-  className: PropTypes.string,
-  /**
-   * Otionally provide a custom icon to be rendered on the trigger button.
-   */
-  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-  /**
-   * Specify the size of the menu, from a list of available sizes.
-   */
-  size: PropTypes.oneOf(['sm', 'md', 'lg'])
-};
 
 export { OverflowMenuV2 };

package/es/components/Tabs/Tabs.js

@@ -541,7 +541,11 @@ const Tab = /*#__PURE__*/React__default.forwardRef(function Tab(_ref5, forwardRe
     type: "button"
   }), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--tabs__nav-item-label-wrapper`
-  }, /*#__PURE__*/React__default.createElement("span", {
+  }, dismissable && Icon && /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--tabs__nav-item--icon-left`
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    size: 16
+  })), /*#__PURE__*/React__default.createElement("span", {
     className: `${prefix}--tabs__nav-item-label`
   }, children), /*#__PURE__*/React__default.createElement("div", {
     className: cx(`${prefix}--tabs__nav-item--icon`, {

package/es/components/Tag/Tag.js

@@ -49,6 +49,8 @@ const Tag = _ref => {
     [`${prefix}--tag--disabled`]: disabled,
     [`${prefix}--tag--filter`]: filter,
     [`${prefix}--tag--${size}`]: size,
+    // TODO: V12 - Remove this class
+    [`${prefix}--layout--size-${size}`]: size,
     [`${prefix}--tag--${type}`]: type,
     [`${prefix}--tag--interactive`]: other.onClick && !filter
   });

package/es/components/TextArea/TextArea.Skeleton.js

@@ -36,6 +36,5 @@ TextAreaSkeleton.propTypes = {
    */
   hideLabel: PropTypes.bool
 };
-var TextAreaSkeleton$1 = TextAreaSkeleton;
 
-export { TextAreaSkeleton, TextAreaSkeleton$1 as default };
+export { TextAreaSkeleton, TextAreaSkeleton as default };

package/es/components/TextArea/TextArea.js

@@ -269,6 +269,5 @@ TextArea.defaultProps = {
   warn: false,
   warnText: ''
 };
-var TextArea$1 = TextArea;
 
-export { TextArea$1 as default };
+export { TextArea as default };

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

@@ -0,0 +1,10 @@
+/**
+ * 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 TextArea from './TextArea';
+export { default as TextAreaSkeleton } from './TextArea.Skeleton';
+export default TextArea;
+export { TextArea };

package/es/components/TextInput/PasswordInput.js

@@ -275,6 +275,5 @@ PasswordInput.propTypes = {
    */
   warnText: PropTypes.node
 };
-var PasswordInput$1 = PasswordInput;
 
-export { PasswordInput$1 as default };
+export { PasswordInput as default };

package/es/components/TextInput/TextInput.Skeleton.js

@@ -36,6 +36,5 @@ TextInputSkeleton.propTypes = {
    */
   hideLabel: PropTypes.bool
 };
-var TextInputSkeleton$1 = TextInputSkeleton;
 
-export { TextInputSkeleton, TextInputSkeleton$1 as default };
+export { TextInputSkeleton, TextInputSkeleton as default };

package/es/components/TextInput/TextInput.js

@@ -34,7 +34,7 @@ const TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref
     onClick = () => {},
     placeholder,
     readOnly,
-    size = 'md',
+    size,
     type = 'text',
     warn = false,
     warnText,
@@ -61,7 +61,9 @@ const TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref
     [`${prefix}--text-input--light`]: light,
     [`${prefix}--text-input--invalid`]: normalizedProps.invalid,
     [`${prefix}--text-input--warning`]: normalizedProps.warn,
-    [`${prefix}--text-input--${size}`]: size
+    [`${prefix}--text-input--${size}`]: size,
+    // TODO: V12 - Remove this class
+    [`${prefix}--layout--size-${size}`]: size
   });
   const sharedTextInputProps = {
     id,
@@ -260,6 +262,5 @@ TextInput.propTypes = {
    */
   warnText: PropTypes.node
 };
-var TextInput$1 = TextInput;
 
-export { TextInput$1 as default };
+export { TextInput as default };

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

@@ -0,0 +1,4 @@
+import TextInput from './TextInput';
+export { default as TextInputSkeleton } from './TextInput.Skeleton';
+export default TextInput;
+export { TextInput };

package/es/components/TimePicker/TimePicker.d.ts

@@ -36,6 +36,14 @@ export interface TimePickerProps extends Omit<ReactAttr<HTMLInputElement>, Exclu
      * Provide the text that is displayed when the control is in an invalid state
      */
     invalidText?: React.ReactNode;
+    /**
+     * Specify a warning message
+     */
+    warning?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in an warning state
+     */
+    warningText?: React.ReactNode;
     /**
      * Provide the text that will be read by a screen reader when visiting this
      * control

package/es/components/TimePicker/TimePicker.js

@@ -11,6 +11,7 @@ import PropTypes from 'prop-types';
 import React__default from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 import deprecate from '../../prop-types/deprecate.js';
+import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 
 const TimePicker = /*#__PURE__*/React__default.forwardRef(function TimePicker(_ref, ref) {
   let {
@@ -21,6 +22,8 @@ const TimePicker = /*#__PURE__*/React__default.forwardRef(function TimePicker(_r
     id,
     invalidText = 'Invalid time format.',
     invalid = false,
+    warningText = 'Warning message.',
+    warning = false,
     labelText,
     light = false,
     maxLength = 5,
@@ -65,12 +68,14 @@ const TimePicker = /*#__PURE__*/React__default.forwardRef(function TimePicker(_r
     }
   }
   const timePickerInputClasses = cx(`${prefix}--time-picker__input-field`, `${prefix}--text-input`, [className], {
-    [`${prefix}--text-input--light`]: light
+    [`${prefix}--text-input--light`]: light,
+    [`${prefix}--time-picker__input-field-error`]: invalid || warning
   });
   const timePickerClasses = cx({
     [`${prefix}--time-picker`]: true,
     [`${prefix}--time-picker--light`]: light,
     [`${prefix}--time-picker--invalid`]: invalid,
+    [`${prefix}--time-picker--warning`]: warning,
     [`${prefix}--time-picker--readonly`]: readOnly,
     [`${prefix}--time-picker--${size}`]: size,
     ...(className && {
@@ -85,9 +90,6 @@ const TimePicker = /*#__PURE__*/React__default.forwardRef(function TimePicker(_r
     htmlFor: id,
     className: labelClasses
   }, labelText) : null;
-  const error = invalid ? /*#__PURE__*/React__default.createElement("div", {
-    className: `${prefix}--form-requirement`
-  }, invalidText) : null;
   function getInternalPickerSelects() {
     const readOnlyEventHandlers = {
       onMouseDown: evt => {
@@ -140,7 +142,17 @@ const TimePicker = /*#__PURE__*/React__default.forwardRef(function TimePicker(_r
     ref: ref,
     type: type,
     value: value
-  }, rest, readOnlyProps))), getInternalPickerSelects()), error);
+  }, rest, readOnlyProps)), (invalid || warning) && /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--time-picker__error__icon`
+  }, invalid ? /*#__PURE__*/React__default.createElement(WarningFilled, {
+    className: `${prefix}--checkbox__invalid-icon`,
+    size: 16
+  }) : /*#__PURE__*/React__default.createElement(WarningAltFilled, {
+    className: `${prefix}--text-input__invalid-icon--warning`,
+    size: 16
+  }))), getInternalPickerSelects()), (invalid || warning) && /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--form-requirement`
+  }, invalid ? invalidText : warningText));
 });
 TimePicker.propTypes = {
   /**
@@ -222,7 +234,15 @@ TimePicker.propTypes = {
   /**
    * Specify the value of the `<input>`
    */
-  value: PropTypes.string
+  value: PropTypes.string,
+  /**
+   * Specify a warning message
+   */
+  warning: PropTypes.bool,
+  /**
+   * Provide the text that is displayed when the control is in an warning state
+   */
+  warningText: PropTypes.node
 };
 var TimePicker$1 = TimePicker;
 

package/es/components/Tooltip/Tooltip.js

@@ -94,10 +94,12 @@ function Tooltip(_ref) {
     onMouseLeave: onMouseLeave,
     open: open,
     ref: containerRef
-  }), child !== undefined ? /*#__PURE__*/React__default.cloneElement(child, {
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--tooltip-trigger__wrapper`
+  }, child !== undefined ? /*#__PURE__*/React__default.cloneElement(child, {
     ...triggerProps,
     ...getChildEventHandlers(child.props)
-  }) : null, /*#__PURE__*/React__default.createElement(PopoverContent, {
+  }) : null), /*#__PURE__*/React__default.createElement(PopoverContent, {
     "aria-hidden": "true",
     className: `${prefix}--tooltip-content`,
     id: id,

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

@@ -18,6 +18,7 @@ interface SideNavProps extends ComponentProps<'nav'> {
     addMouseListeners?: boolean | undefined;
     onOverlayClick?: MouseEventHandler<HTMLDivElement> | undefined;
     onSideNavBlur?: () => void | undefined;
+    enterDelayMs?: number;
 }
-declare const SideNav: React.ForwardRefExoticComponent<Pick<SideNavProps, "children" | "className" | "slot" | "style" | "title" | "dir" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "onToggle" | "key" | "id" | "onAnimationEnd" | "aria-controls" | "aria-expanded" | "onClick" | "onKeyDown" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "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" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "href" | "expanded" | "defaultExpanded" | "isChildOfHeader" | "isFixedNav" | "isRail" | "isPersistent" | "addFocusListeners" | "addMouseListeners" | "onOverlayClick" | "onSideNavBlur"> & React.RefAttributes<HTMLElement>>;
+declare const SideNav: React.ForwardRefExoticComponent<Pick<SideNavProps, "children" | "className" | "slot" | "style" | "title" | "dir" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "onToggle" | "key" | "id" | "onAnimationEnd" | "aria-controls" | "aria-expanded" | "onClick" | "onKeyDown" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "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" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "href" | "enterDelayMs" | "expanded" | "defaultExpanded" | "isChildOfHeader" | "isFixedNav" | "isRail" | "isPersistent" | "addFocusListeners" | "addMouseListeners" | "onOverlayClick" | "onSideNavBlur"> & React.RefAttributes<HTMLElement>>;
 export default SideNav;

package/es/components/UIShell/SideNav.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useRef, useState, isValidElement } from 'react';
+import React__default, { useRef, isValidElement } from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
@@ -14,6 +14,7 @@ import { CARBON_SIDENAV_ITEMS } from './_utils.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { useWindowEvent } from '../../internal/useEvent.js';
+import { useDelayedState } from '../../internal/useDelayedState.js';
 import { match } from '../../internal/keyboard/match.js';
 import { Tab, Escape } from '../../internal/keyboard/keys.js';
 
@@ -39,27 +40,28 @@ function SideNavRenderFunction(_ref, ref) {
     addMouseListeners = true,
     onOverlayClick,
     onSideNavBlur,
+    enterDelayMs = 100,
     ...other
   } = _ref;
   const prefix = usePrefix();
   const {
     current: controlled
   } = useRef(expandedProp !== undefined);
-  const [expandedState, setExpandedState] = useState(defaultExpanded);
-  const [expandedViaHoverState, setExpandedViaHoverState] = useState(defaultExpanded);
+  const [expandedState, setExpandedState] = useDelayedState(defaultExpanded);
+  const [expandedViaHoverState, setExpandedViaHoverState] = useDelayedState(defaultExpanded);
   const expanded = controlled ? expandedProp : expandedState;
   const sideNavRef = useRef(null);
   const navRef = useMergedRefs([sideNavRef, ref]);
   const handleToggle = function (event) {
     let value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !expanded;
     if (!controlled) {
-      setExpandedState(value);
+      setExpandedState(value, enterDelayMs);
     }
     if (onToggle) {
       onToggle(event, value);
     }
     if (controlled || isRail) {
-      setExpandedViaHoverState(value);
+      setExpandedViaHoverState(value, enterDelayMs);
     }
   };
   const accessibilityLabel = {
@@ -130,8 +132,20 @@ function SideNavRenderFunction(_ref, ref) {
     };
   }
   if (addMouseListeners && isRail) {
-    eventHandlers.onMouseEnter = () => handleToggle(true, true);
-    eventHandlers.onMouseLeave = () => handleToggle(false, false);
+    eventHandlers.onMouseEnter = () => {
+      handleToggle(true, true);
+    };
+    eventHandlers.onMouseLeave = () => {
+      setExpandedState(false);
+      setExpandedViaHoverState(false);
+      handleToggle(false, false);
+    };
+    eventHandlers.onClick = () => {
+      //if delay is enabled, and user intentionally clicks it to see it expanded immediately
+      setExpandedState(true);
+      setExpandedViaHoverState(true);
+      handleToggle(true, true);
+    };
   }
   useWindowEvent('keydown', event => {
     const focusedElement = document.activeElement;
@@ -174,6 +188,10 @@ SideNav.propTypes = {
    * If `true`, the SideNav will be open on initial render.
    */
   defaultExpanded: PropTypes.bool,
+  /**
+   * Specify the duration in milliseconds to delay before displaying the sidenavigation
+   */
+  enterDelayMs: PropTypes.number,
   /**
    * If `true`, the SideNav will be expanded, otherwise it will be collapsed.
    * Using this prop causes SideNav to become a controled component.

package/es/index.d.ts

@@ -16,30 +16,37 @@ export * from './components/CheckboxGroup';
 export * from './components/ClassPrefix';
 export * from './components/CodeSnippet';
 export * from './components/ComboBox';
+export * from './components/ComboButton';
 export * from './components/ComposedModal';
 export * from './components/ContainedList';
 export * from './components/ContentSwitcher';
+export * from './components/ContextMenu';
 export * from './components/Copy';
 export * from './components/CopyButton';
 export * from './components/DangerButton';
 export * from './components/DataTable';
+export * from './components/DataTableSkeleton';
 export * from './components/DatePicker';
 export * from './components/DatePickerInput';
 export * from './components/Dropdown';
 export * from './components/ErrorBoundary';
+export * from './components/ExpandableSearch';
 export * from './components/FileUploader';
 export * from './components/FilterableMultiSelect';
-export * from './components/Form';
 export * from './components/FluidForm';
+export * from './components/Form';
 export * from './components/FormGroup';
 export * from './components/FormItem';
 export * from './components/FormLabel';
 export * from './components/Grid';
+export * from './components/Icon/Icon.Skeleton';
 export * from './components/IdPrefix';
 export * from './components/InlineLoading';
 export * from './components/Link';
 export * from './components/ListItem';
 export * from './components/Loading';
+export * from './components/Menu';
+export * from './components/MenuButton';
 export * from './components/Modal';
 export * from './components/ModalWrapper';
 export * from './components/MultiSelect';
@@ -49,48 +56,44 @@ export * from './components/OrderedList';
 export * from './components/OverflowMenu';
 export * from './components/OverflowMenuItem';
 export * from './components/Pagination';
+export * from './components/Pagination/Pagination.Skeleton';
 export * from './components/PaginationNav';
 export * from './components/PasswordInput';
 export * from './components/PrimaryButton';
 export * from './components/ProgressIndicator';
 export * from './components/RadioButton';
+export * from './components/RadioButton/RadioButton.Skeleton';
 export * from './components/RadioButtonGroup';
+export * from './components/RadioTile';
 export * from './components/Search';
-export * from './components/ExpandableSearch';
 export * from './components/SecondaryButton';
 export * from './components/Select';
 export * from './components/SelectItem';
 export * from './components/SelectItemGroup';
-export * from './components/Switch';
+export * from './components/SkeletonIcon';
+export * from './components/SkeletonPlaceholder';
+export * from './components/SkeletonText';
 export * from './components/Slider';
 export * from './components/StructuredList';
+export * from './components/Switch';
 export * from './components/Tab';
 export * from './components/TabContent';
 export * from './components/Tabs';
 export * from './components/Tag';
+export * from './components/Tag/Tag.Skeleton';
 export * from './components/TextArea';
 export * from './components/TextInput';
 export * from './components/Tile';
-export * from './components/RadioTile';
 export * from './components/TileGroup';
 export * from './components/TimePicker';
 export * from './components/TimePickerSelect';
 export * from './components/Toggle';
-export * from './components/Toggletip';
-export * from './components/TreeView';
-export * from './components/UnorderedList';
-export * from './components/SkeletonText';
-export * from './components/SkeletonPlaceholder';
-export * from './components/SkeletonIcon';
-export * from './components/DataTableSkeleton';
-export * from './components/Pagination/Pagination.Skeleton';
-export * from './components/RadioButton/RadioButton.Skeleton';
-export * from './components/Tag/Tag.Skeleton';
 export * from './components/Toggle/Toggle.Skeleton';
 export * from './components/ToggleSmall/ToggleSmall.Skeleton';
-export * from './components/Icon/Icon.Skeleton';
+export * from './components/Toggletip';
+export * from './components/TreeView';
 export * from './components/UIShell';
-export { useContextMenu as unstable_useContextMenu } from './components/ContextMenu';
+export * from './components/UnorderedList';
 export { FeatureFlags as unstable_FeatureFlags, useFeatureFlag as unstable_useFeatureFlag, useFeatureFlags as unstable_useFeatureFlags, } from './components/FeatureFlags';
 export { FluidComboBox as unstable__FluidComboBox, FluidComboBoxSkeleton as unstable__FluidComboBoxSkeleton, } from './components/FluidComboBox';
 export { FluidDatePicker as unstable__FluidDatePicker, FluidDatePickerSkeleton as unstable__FluidDatePickerSkeleton, } from './components/FluidDatePicker';
@@ -105,11 +108,9 @@ export { FluidTimePickerSelect as unstable__FluidTimePickerSelect } from './comp
 export * from './components/Heading';
 export * from './components/IconButton';
 export * from './components/Layer';
-export { LayoutDirection as unstable_LayoutDirection, useLayoutDirection as unstable_useLayoutDirection, } from './components/Layout';
-export { Menu as unstable_Menu, MenuItem as unstable_MenuItem, MenuItemDivider as unstable_MenuItemDivider, MenuItemGroup as unstable_MenuItemGroup, MenuItemRadioGroup as unstable_MenuItemRadioGroup, MenuItemSelectable as unstable_MenuItemSelectable, } from './components/Menu';
+export { Layout as unstable_Layout } from './components/Layout';
+export { LayoutDirection as unstable_LayoutDirection, useLayoutDirection as unstable_useLayoutDirection, } from './components/LayoutDirection';
 export { OverflowMenuV2 as unstable_OverflowMenuV2 } from './components/OverflowMenuV2';
-export { ComboButton as unstable_ComboButton } from './components/ComboButton';
-export { MenuButton as unstable_MenuButton } from './components/MenuButton';
 export { PageSelector as unstable_PageSelector, Pagination as unstable_Pagination, } from './components/Pagination/experimental';
 export * from './components/Popover';
 export * from './components/ProgressBar';