@carbon/react 1.30.0 → 1.31.0-rc.0

package/lib/components/OverflowMenu/index.js

@@ -9,10 +9,22 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var React = require('react');
+var index = require('../FeatureFlags/index.js');
+var index$1 = require('./next/index.js');
 var OverflowMenu$1 = require('./OverflowMenu.js');
 var createClassWrapper = require('../../internal/createClassWrapper.js');
 
-const OverflowMenu = createClassWrapper.createClassWrapper(OverflowMenu$1.OverflowMenu);
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const OverflowMenuV11 = createClassWrapper.createClassWrapper(OverflowMenu$1.OverflowMenu);
+function OverflowMenu(props) {
+  const enableV12OverflowMenu = index.useFeatureFlag('enable-v12-overflowmenu');
+  return enableV12OverflowMenu ? /*#__PURE__*/React__default["default"].createElement(index$1.OverflowMenu, props) : /*#__PURE__*/React__default["default"].createElement(OverflowMenuV11, props);
+}
+OverflowMenu.displayName = 'OverflowMenu';
 
 exports.OverflowMenu = OverflowMenu;
 exports["default"] = OverflowMenu;

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

@@ -0,0 +1,108 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var PropTypes = require('prop-types');
+var cx = require('classnames');
+var iconsReact = require('@carbon/icons-react');
+var index = require('../../IconButton/index.js');
+var Menu = require('../../Menu/Menu.js');
+var useId = require('../../../internal/useId.js');
+var usePrefix = require('../../../internal/usePrefix.js');
+var useAttachedMenu = require('../../../internal/useAttachedMenu.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+const defaultSize = 'md';
+const OverflowMenu = /*#__PURE__*/React__default["default"].forwardRef(function OverflowMenu(_ref, forwardRef) {
+  let {
+    children,
+    className,
+    label = 'Options',
+    renderIcon: IconElement = iconsReact.OverflowMenuVertical,
+    size = defaultSize,
+    tooltipAlignment,
+    ...rest
+  } = _ref;
+  const id = useId.useId('overflowmenu');
+  const prefix = usePrefix.usePrefix();
+  const triggerRef = React.useRef(null);
+  const {
+    open,
+    x,
+    y,
+    handleClick,
+    handleMousedown,
+    handleClose
+  } = useAttachedMenu.useAttachedMenu(triggerRef);
+  const containerClasses = cx__default["default"](className, `${prefix}--overflow-menu__container`);
+  const triggerClasses = cx__default["default"](`${prefix}--overflow-menu`, {
+    [`${prefix}--overflow-menu--open`]: open
+  }, size !== defaultSize && `${prefix}--overflow-menu--${size}`);
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
+    className: containerClasses,
+    "aria-owns": open ? id : null,
+    ref: forwardRef
+  }), /*#__PURE__*/React__default["default"].createElement(index.IconButton, {
+    "aria-controls": open ? id : null,
+    "aria-haspopup": true,
+    "aria-expanded": open,
+    className: triggerClasses,
+    onClick: handleClick,
+    onMouseDown: handleMousedown,
+    ref: triggerRef,
+    label: label,
+    align: tooltipAlignment
+  }, /*#__PURE__*/React__default["default"].createElement(IconElement, {
+    className: `${prefix}--overflow-menu__icon`
+  })), /*#__PURE__*/React__default["default"].createElement(Menu.Menu, {
+    id: id,
+    size: size,
+    open: open,
+    onClose: handleClose,
+    x: x,
+    y: y,
+    label: label
+  }, children));
+});
+OverflowMenu.propTypes = {
+  /**
+   * A collection of MenuItems to be rendered within this OverflowMenu.
+   */
+  children: PropTypes__default["default"].node,
+  /**
+   * Additional CSS class names for the trigger button.
+   */
+  className: PropTypes__default["default"].string,
+  /**
+   * A label describing the options available. Is used in the trigger tooltip and as the menu's accessible label.
+   */
+  label: PropTypes__default["default"].string,
+  /**
+   * Otionally provide a custom icon to be rendered on the trigger button.
+   */
+  renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
+  /**
+   * Specify the size of the menu, from a list of available sizes.
+   */
+  size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg']),
+  /**
+   * Specify how the trigger tooltip should be aligned.
+   */
+  tooltipAlignment: PropTypes__default["default"].oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right'])
+};
+
+exports.OverflowMenu = OverflowMenu;

package/lib/components/OverflowMenuV2/index.js

@@ -9,86 +9,26 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var PropTypes = require('prop-types');
-var cx = require('classnames');
-var iconsReact = require('@carbon/icons-react');
-var Menu = require('../Menu/Menu.js');
-var useId = require('../../internal/useId.js');
-var usePrefix = require('../../internal/usePrefix.js');
-var useAttachedMenu = require('../../internal/useAttachedMenu.js');
+var warning = require('../../internal/warning.js');
+var index = require('../FeatureFlags/index.js');
+var index$1 = require('../OverflowMenu/index.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const defaultSize = 'md';
-function OverflowMenuV2(_ref) {
-  let {
-    children,
-    className,
-    renderIcon: IconElement = iconsReact.OverflowMenuVertical,
-    size = defaultSize,
-    ...rest
-  } = _ref;
-  const id = useId.useId('overflowmenu');
-  const prefix = usePrefix.usePrefix();
-  const triggerRef = React.useRef(null);
-  const {
-    open,
-    x,
-    y,
-    handleClick,
-    handleMousedown,
-    handleClose
-  } = useAttachedMenu.useAttachedMenu(triggerRef);
-  const containerClasses = cx__default["default"](`${prefix}--overflow-menu__container`);
-  const triggerClasses = cx__default["default"](`${prefix}--overflow-menu`, {
-    [`${prefix}--overflow-menu--open`]: open,
-    [className]: className
-  }, size !== defaultSize && `${prefix}--overflow-menu--${size}`);
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: containerClasses,
-    "aria-owns": id
-  }, /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({}, rest, {
-    type: "button",
-    "aria-haspopup": true,
-    "aria-expanded": open,
-    className: triggerClasses,
-    onClick: handleClick,
-    onMouseDown: handleMousedown,
-    ref: triggerRef
-  }), /*#__PURE__*/React__default["default"].createElement(IconElement, {
-    className: `${prefix}--overflow-menu__icon`
-  })), /*#__PURE__*/React__default["default"].createElement(Menu.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.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["default"].createElement(index.FeatureFlags, {
+    flags: {
+      'enable-v12-overflowmenu': true
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(index$1["default"], props));
 }
-OverflowMenuV2.propTypes = {
-  /**
-   * A collection of MenuItems to be rendered within this OverflowMenu.
-   */
-  children: PropTypes__default["default"].node,
-  /**
-   * Additional CSS class names for the trigger button.
-   */
-  className: PropTypes__default["default"].string,
-  /**
-   * Otionally provide a custom icon to be rendered on the trigger button.
-   */
-  renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
-  /**
-   * Specify the size of the menu, from a list of available sizes.
-   */
-  size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg'])
-};
 
 exports.OverflowMenuV2 = OverflowMenuV2;

package/lib/components/Tabs/Tabs.js

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

package/lib/components/Tag/Tag.js

@@ -59,6 +59,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/lib/components/TextArea/TextArea.Skeleton.js

@@ -46,7 +46,6 @@ TextAreaSkeleton.propTypes = {
    */
   hideLabel: PropTypes__default["default"].bool
 };
-var TextAreaSkeleton$1 = TextAreaSkeleton;
 
 exports.TextAreaSkeleton = TextAreaSkeleton;
-exports["default"] = TextAreaSkeleton$1;
+exports["default"] = TextAreaSkeleton;

package/lib/components/TextArea/TextArea.js

@@ -279,6 +279,5 @@ TextArea.defaultProps = {
   warn: false,
   warnText: ''
 };
-var TextArea$1 = TextArea;
 
-exports["default"] = TextArea$1;
+exports["default"] = TextArea;

package/lib/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/lib/components/TextInput/PasswordInput.js

@@ -285,6 +285,5 @@ PasswordInput.propTypes = {
    */
   warnText: PropTypes__default["default"].node
 };
-var PasswordInput$1 = PasswordInput;
 
-exports["default"] = PasswordInput$1;
+exports["default"] = PasswordInput;

package/lib/components/TextInput/TextInput.Skeleton.js

@@ -46,7 +46,6 @@ TextInputSkeleton.propTypes = {
    */
   hideLabel: PropTypes__default["default"].bool
 };
-var TextInputSkeleton$1 = TextInputSkeleton;
 
 exports.TextInputSkeleton = TextInputSkeleton;
-exports["default"] = TextInputSkeleton$1;
+exports["default"] = TextInputSkeleton;

package/lib/components/TextInput/TextInput.js

@@ -44,7 +44,7 @@ const TextInput = /*#__PURE__*/React__default["default"].forwardRef(function Tex
     onClick = () => {},
     placeholder,
     readOnly,
-    size = 'md',
+    size,
     type = 'text',
     warn = false,
     warnText,
@@ -71,7 +71,9 @@ const TextInput = /*#__PURE__*/React__default["default"].forwardRef(function Tex
     [`${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,
@@ -270,6 +272,5 @@ TextInput.propTypes = {
    */
   warnText: PropTypes__default["default"].node
 };
-var TextInput$1 = TextInput;
 
-exports["default"] = TextInput$1;
+exports["default"] = TextInput;

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

@@ -15,6 +15,7 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var usePrefix = require('../../internal/usePrefix.js');
 var deprecate = require('../../prop-types/deprecate.js');
+var iconsReact = require('@carbon/icons-react');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -31,6 +32,8 @@ const TimePicker = /*#__PURE__*/React__default["default"].forwardRef(function Ti
     id,
     invalidText = 'Invalid time format.',
     invalid = false,
+    warningText = 'Warning message.',
+    warning = false,
     labelText,
     light = false,
     maxLength = 5,
@@ -75,12 +78,14 @@ const TimePicker = /*#__PURE__*/React__default["default"].forwardRef(function Ti
     }
   }
   const timePickerInputClasses = cx__default["default"](`${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__default["default"]({
     [`${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 && {
@@ -95,9 +100,6 @@ const TimePicker = /*#__PURE__*/React__default["default"].forwardRef(function Ti
     htmlFor: id,
     className: labelClasses
   }, labelText) : null;
-  const error = invalid ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${prefix}--form-requirement`
-  }, invalidText) : null;
   function getInternalPickerSelects() {
     const readOnlyEventHandlers = {
       onMouseDown: evt => {
@@ -150,7 +152,17 @@ const TimePicker = /*#__PURE__*/React__default["default"].forwardRef(function Ti
     ref: ref,
     type: type,
     value: value
-  }, rest, readOnlyProps))), getInternalPickerSelects()), error);
+  }, rest, readOnlyProps)), (invalid || warning) && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--time-picker__error__icon`
+  }, invalid ? /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
+    className: `${prefix}--checkbox__invalid-icon`,
+    size: 16
+  }) : /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningAltFilled, {
+    className: `${prefix}--text-input__invalid-icon--warning`,
+    size: 16
+  }))), getInternalPickerSelects()), (invalid || warning) && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--form-requirement`
+  }, invalid ? invalidText : warningText));
 });
 TimePicker.propTypes = {
   /**
@@ -232,7 +244,15 @@ TimePicker.propTypes = {
   /**
    * Specify the value of the `<input>`
    */
-  value: PropTypes__default["default"].string
+  value: PropTypes__default["default"].string,
+  /**
+   * Specify a warning message
+   */
+  warning: PropTypes__default["default"].bool,
+  /**
+   * Provide the text that is displayed when the control is in an warning state
+   */
+  warningText: PropTypes__default["default"].node
 };
 var TimePicker$1 = TimePicker;
 

package/lib/components/Tooltip/Tooltip.js

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

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

@@ -18,6 +18,7 @@ var _utils = require('./_utils.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var useMergedRefs = require('../../internal/useMergedRefs.js');
 var useEvent = require('../../internal/useEvent.js');
+var useDelayedState = require('../../internal/useDelayedState.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
 
@@ -49,27 +50,28 @@ function SideNavRenderFunction(_ref, ref) {
     addMouseListeners = true,
     onOverlayClick,
     onSideNavBlur,
+    enterDelayMs = 100,
     ...other
   } = _ref;
   const prefix = usePrefix.usePrefix();
   const {
     current: controlled
   } = React.useRef(expandedProp !== undefined);
-  const [expandedState, setExpandedState] = React.useState(defaultExpanded);
-  const [expandedViaHoverState, setExpandedViaHoverState] = React.useState(defaultExpanded);
+  const [expandedState, setExpandedState] = useDelayedState.useDelayedState(defaultExpanded);
+  const [expandedViaHoverState, setExpandedViaHoverState] = useDelayedState.useDelayedState(defaultExpanded);
   const expanded = controlled ? expandedProp : expandedState;
   const sideNavRef = React.useRef(null);
   const navRef = useMergedRefs.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 = {
@@ -140,8 +142,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);
+    };
   }
   useEvent.useWindowEvent('keydown', event => {
     const focusedElement = document.activeElement;
@@ -184,6 +198,10 @@ SideNav.propTypes = {
    * If `true`, the SideNav will be open on initial render.
    */
   defaultExpanded: PropTypes__default["default"].bool,
+  /**
+   * Specify the duration in milliseconds to delay before displaying the sidenavigation
+   */
+  enterDelayMs: PropTypes__default["default"].number,
   /**
    * If `true`, the SideNav will be expanded, otherwise it will be collapsed.
    * Using this prop causes SideNav to become a controled component.