@carbon/react 1.30.0 → 1.31.0

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/HeaderMenuItem.d.ts

@@ -0,0 +1,22 @@
+/**
+ * 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, { type ComponentProps, type ReactNode, ElementType } from 'react';
+import { LinkProps } from './Link';
+type HeaderMenuItemProps<E extends ElementType> = LinkProps<E> & {
+    className?: string | undefined;
+    isActive?: boolean | undefined;
+    isCurrentPage?: boolean | undefined;
+    'aria-current'?: string | undefined;
+    children: ReactNode;
+    role?: ComponentProps<'li'>['role'];
+    tabIndex?: number | undefined;
+};
+declare const HeaderMenuItem: (<E extends React.ElementType<any> = "a">(props: HeaderMenuItemProps<E>) => JSX.Element) & {
+    displayName?: string | undefined;
+    propTypes?: React.WeakValidationMap<HeaderMenuItemProps<any>> | undefined;
+};
+export default HeaderMenuItem;

package/es/components/UIShell/HeaderMenuItem.js

@@ -7,13 +7,13 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React__default, { forwardRef } from 'react';
 import cx from 'classnames';
 import Link, { LinkPropTypes } from './Link.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import deprecate from '../../prop-types/deprecate.js';
 
-const HeaderMenuItem = /*#__PURE__*/React__default.forwardRef(function HeaderMenuItem(_ref, ref) {
+function HeaderMenuItemRenderFunction(_ref, ref) {
   let {
     className,
     isActive,
@@ -45,7 +45,8 @@ const HeaderMenuItem = /*#__PURE__*/React__default.forwardRef(function HeaderMen
   }), /*#__PURE__*/React__default.createElement("span", {
     className: `${prefix}--text-truncate--end`
   }, children)));
-});
+}
+const HeaderMenuItem = /*#__PURE__*/forwardRef(HeaderMenuItemRenderFunction);
 HeaderMenuItem.displayName = 'HeaderMenuItem';
 HeaderMenuItem.propTypes = {
   /**

package/es/components/UIShell/HeaderPanel.js

@@ -9,38 +9,30 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import React__default from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
 const HeaderPanel = /*#__PURE__*/React__default.forwardRef(function HeaderPanel(_ref, ref) {
   let {
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledBy,
     children,
     className: customClassName,
     expanded,
     ...other
   } = _ref;
   const prefix = usePrefix();
-  const accessibilityLabel = {
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledBy
-  };
   const className = cx(`${prefix}--header-panel`, {
     [`${prefix}--header-panel--expanded`]: expanded,
     [customClassName]: !!customClassName
   });
   return /*#__PURE__*/React__default.createElement("div", _extends({}, other, {
-    className: className
-  }, accessibilityLabel, {
+    className: className,
     ref: ref
   }), children);
 });
 HeaderPanel.propTypes = {
   /**
-   * Required props for accessibility label on the underlying menu
+   * The content that will render inside of the `HeaderPanel`
    */
-  ...AriaLabelPropType,
+  children: PropTypes.node,
   /**
    * Optionally provide a custom class to apply to the underlying `<li>` node
    */

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

@@ -0,0 +1,48 @@
+/**
+ * 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 PropTypes from 'prop-types';
+import React, { type ElementType, type Ref } from 'react';
+import { type PolymorphicProps } from '../../types/common';
+type LinkBaseProps<E extends ElementType> = {
+    /**
+     * @deprecated Use `as` instead
+     */
+    element?: E | undefined;
+    ref?: Ref<E>;
+};
+export type LinkProps<E extends ElementType> = PolymorphicProps<E, LinkBaseProps<E>>;
+/**
+ * Link is a custom component that allows us to supporting rendering elements
+ * other than `a` in our markup. The goal is to allow users to support passing
+ * in their own components to support use-cases like `react-router` or
+ * `@reach/router`
+ */
+declare const Link: (<E extends React.ElementType<any> = "a">(props: LinkProps<E>) => JSX.Element) & {
+    displayName?: string | undefined;
+    propTypes?: React.WeakValidationMap<LinkProps<any>> | undefined;
+};
+declare const LinkPropTypes: {
+    /**
+     * Provide a custom element or component to render the top-level node for the
+     * component.
+     */
+    as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
+    /**
+     * The base element to use to build the link. Defaults to `a`, can also accept
+     * alternative tag names or custom components like `Link` from `react-router`.
+     * @deprecated Use `as` instead
+     *
+     */
+    element: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+    /**
+     * Property to indicate if the side nav container is open (or not). Use to
+     * keep local state and styling in step with the SideNav expansion state.
+     */
+    isSideNavExpanded: PropTypes.Requireable<boolean>;
+};
+export { LinkPropTypes };
+export default Link;

package/es/components/UIShell/Link.js

@@ -5,8 +5,27 @@
  * 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 from 'react';
+import React__default, { forwardRef } from 'react';
+import deprecate from '../../prop-types/deprecate.js';
+
+// Note: Maybe we should use `as` instead of `element`? `as` appears to be
+// standard and is used in other places in this project.
+function LinkRenderFunction(_ref, ref) {
+  let {
+    element,
+    as: BaseComponent,
+    // Captured here to prevent it from being passed into the created element.
+    // See https://github.com/carbon-design-system/carbon/issues/3970
+    isSideNavExpanded: _isSideNavExpanded,
+    ...rest
+  } = _ref;
+  const BaseComponentAsAny = BaseComponent ?? element ?? 'a';
+  return /*#__PURE__*/React__default.createElement(BaseComponentAsAny, _extends({
+    ref: ref
+  }, rest));
+}
 
 /**
  * Link is a custom component that allows us to supporting rendering elements
@@ -14,24 +33,20 @@ import React__default from 'react';
  * in their own components to support use-cases like `react-router` or
  * `@reach/router`
  */
-const Link = /*#__PURE__*/React__default.forwardRef(function Link(props, ref) {
-  const {
-    element,
-    isSideNavExpanded,
-    // eslint-disable-line no-unused-vars
-    ...rest
-  } = props;
-  return /*#__PURE__*/React__default.createElement(element, {
-    ...rest,
-    ref
-  });
-});
+const Link = /*#__PURE__*/forwardRef(LinkRenderFunction);
 const LinkPropTypes = {
+  /**
+   * Provide a custom element or component to render the top-level node for the
+   * component.
+   */
+  as: PropTypes.elementType,
   /**
    * The base element to use to build the link. Defaults to `a`, can also accept
    * alternative tag names or custom components like `Link` from `react-router`.
+   * @deprecated Use `as` instead
+   *
    */
-  element: PropTypes.elementType,
+  element: deprecate(PropTypes.elementType, 'The `element` prop for `Link` has been deprecated. Please use `as` ' + 'instead. This will be removed in the next major release.'),
   /**
    * Property to indicate if the side nav container is open (or not). Use to
    * keep local state and styling in step with the SideNav expansion state.
@@ -40,9 +55,5 @@ const LinkPropTypes = {
 };
 Link.displayName = 'Link';
 Link.propTypes = LinkPropTypes;
-Link.defaultProps = {
-  element: 'a'
-};
-var Link$1 = Link;
 
-export { LinkPropTypes, Link$1 as default };
+export { LinkPropTypes, Link as default };

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';