@carbon/react 1.63.1 → 1.64.0-rc.0

package/es/components/DatePicker/DatePicker.js

@@ -173,25 +173,42 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
     }
   }, []);
   const lastStartValue = useRef('');
+  const [calendarCloseEvent, setCalendarCloseEvent] = useState(null);
 
   // fix datepicker deleting the selectedDate when the calendar closes
-  const onCalendarClose = (selectedDates, dateStr) => {
-    endInputField?.current?.focus();
-    calendarRef?.current?.calendarContainer?.classList.remove('open');
-    setTimeout(() => {
-      if (lastStartValue.current && selectedDates[0] && !startInputField.current.value) {
-        startInputField.current.value = lastStartValue.current;
-        calendarRef.current.setDate([startInputField.current.value, endInputField?.current?.value], true, calendarRef.current.config.dateFormat);
-      }
-      if (onClose) {
-        onClose(calendarRef.current.selectedDates, dateStr, calendarRef.current);
-      }
+  const handleCalendarClose = useCallback((selectedDates, dateStr, instance) => {
+    if (lastStartValue.current && selectedDates[0] && !startInputField.current.value) {
+      startInputField.current.value = lastStartValue.current;
+      calendarRef.current.setDate([startInputField.current.value, endInputField?.current?.value], true, calendarRef.current.config.dateFormat);
+    }
+    if (onClose) {
+      onClose(selectedDates, dateStr, instance);
+    }
+  }, [onClose]);
+  const onCalendarClose = (selectedDates, dateStr, instance, e) => {
+    if (e && e.type === 'clickOutside') {
+      return;
+    }
+    setCalendarCloseEvent({
+      selectedDates,
+      dateStr,
+      instance
     });
   };
+  useEffect(() => {
+    if (calendarCloseEvent) {
+      const {
+        selectedDates,
+        dateStr,
+        instance
+      } = calendarCloseEvent;
+      handleCalendarClose(selectedDates, dateStr, instance);
+      setCalendarCloseEvent(null);
+    }
+  }, [calendarCloseEvent, handleCalendarClose]);
   const endInputField = useRef(null);
   const calendarRef = useRef(null);
   const savedOnChange = useSavedCallback(onChange);
-  const savedOnClose = useSavedCallback(datePickerType === 'range' ? onCalendarClose : onClose);
   const savedOnOpen = useSavedCallback(onOpen);
   const datePickerClasses = cx(`${prefix}--date-picker`, {
     [`${prefix}--date-picker--short`]: short,
@@ -309,6 +326,7 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
     } = endInputField;
     const flatpickerconfig = {
       inline: inline ?? false,
+      onClose: onCalendarClose,
       disableMobile: true,
       defaultDate: value,
       closeOnSelect: closeOnSelect,
@@ -343,7 +361,6 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
           savedOnChange(...arguments);
         }
       },
-      onClose: savedOnClose,
       onReady: onHook,
       onMonthChange: onHook,
       onYearChange: onHook,
@@ -440,7 +457,7 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
       }
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [savedOnChange, savedOnClose, savedOnOpen, readOnly, closeOnSelect, hasInput]);
+  }, [savedOnChange, savedOnOpen, readOnly, closeOnSelect, hasInput]);
 
   // this hook allows consumers to access the flatpickr calendar
   // instance for cases where functions like open() or close()
@@ -487,6 +504,40 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
       calendarRef.current.set('inline', inline);
     }
   }, [inline]);
+  useEffect(() => {
+    //when value prop is set to empty, this clears the faltpicker's calendar instance and text input
+    if (value === '') {
+      calendarRef.current?.clear();
+      if (startInputField.current) {
+        startInputField.current.value = '';
+      }
+      if (endInputField.current) {
+        endInputField.current.value = '';
+      }
+    }
+  }, [value]);
+  useEffect(() => {
+    const handleMouseDown = event => {
+      if (calendarRef.current && calendarRef.current.isOpen && !calendarRef.current.calendarContainer.contains(event.target) && !startInputField.current.contains(event.target) && !endInputField.current?.contains(event.target)) {
+        // Close the calendar immediately on mousedown
+        closeCalendar();
+      }
+    };
+    const closeCalendar = event => {
+      calendarRef.current.close();
+      // Remove focus from endDate calendar input
+      if (document.activeElement instanceof HTMLElement) {
+        document.activeElement.blur();
+      }
+      onCalendarClose(calendarRef.current.selectedDates, '', calendarRef.current, {
+        type: 'clickOutside'
+      });
+    };
+    document.addEventListener('mousedown', handleMouseDown, true);
+    return () => {
+      document.removeEventListener('mousedown', handleMouseDown, true);
+    };
+  }, [calendarRef, startInputField, endInputField, onCalendarClose]);
   useEffect(() => {
     if (calendarRef?.current?.set) {
       if (value !== undefined) {

package/es/components/DatePicker/plugins/fixEventsPlugin.js

@@ -18,6 +18,15 @@ var carbonFlatpickrFixEventsPlugin = (config => fp => {
     inputTo,
     lastStartValue
   } = config;
+  /**
+   * Handles `click` outside to close calendar
+   */
+  const handleClickOutside = event => {
+    if (!fp.isOpen || fp.calendarContainer.contains(event.target) || event.target === inputFrom || event.target === inputTo) {
+      return;
+    }
+    fp.close();
+  };
   /**
    * Handles `keydown` event.
    */
@@ -111,6 +120,7 @@ var carbonFlatpickrFixEventsPlugin = (config => fp => {
       inputTo.removeEventListener('blur', handleBlur, true);
     }
     inputFrom.removeEventListener('keydown', handleKeydown, true);
+    document.removeEventListener('click', handleClickOutside, true);
   };
 
   /**
@@ -127,6 +137,7 @@ var carbonFlatpickrFixEventsPlugin = (config => fp => {
       inputTo.addEventListener('keydown', handleKeydown, true);
       inputTo.addEventListener('blur', handleBlur, true);
     }
+    document.addEventListener('click', handleClickOutside, true);
   };
 
   /**

package/es/components/DatePickerInput/DatePickerInput.js

@@ -97,7 +97,7 @@ const DatePickerInput = /*#__PURE__*/React__default.forwardRef(function DatePick
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'mini'
     });

package/es/components/Dropdown/Dropdown.d.ts

@@ -36,10 +36,12 @@ export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>,
      */
     disabled?: boolean;
     /**
-     * Additional props passed to Downshift. Use with caution: anything you define
-     * here overrides the components' internal handling of that prop. Downshift
-     * internals are subject to change, and in some cases they can not be shimmed
-     * to shield you from potentially breaking changes.
+     * Additional props passed to Downshift.
+     *
+     * **Use with caution:** anything you define here overrides the components'
+     * internal handling of that prop. Downshift APIs and internals are subject to
+     * change, and in some cases they can not be shimmed by Carbon to shield you
+     * from potentially breaking changes.
      */
     downshiftProps?: Partial<UseSelectProps<ItemType>>;
     /**

package/es/components/Dropdown/Dropdown.js

@@ -19,6 +19,7 @@ import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import { useId } from '../../internal/useId.js';
 import { useFloating, size, flip, autoUpdate } from '@floating-ui/react';
+import { hide } from '../../node_modules/@floating-ui/core/dist/floating-ui.core.mjs.js';
 import { ListBoxSize, ListBoxType } from '../ListBox/ListBoxPropTypes.js';
 
 const {
@@ -72,7 +73,8 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   } = _ref;
   const {
     refs,
-    floatingStyles
+    floatingStyles,
+    middlewareData
   } = useFloating(autoAlign ? {
     placement: direction,
     // The floating element is positioned relative to its nearest
@@ -91,15 +93,19 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
           width: `${rects.reference.width}px`
         });
       }
-    }), flip()],
+    }), flip(), hide()],
     whileElementsMounted: autoUpdate
   } : {} // When autoAlign is turned off, floating-ui will not be used
   );
   useEffect(() => {
     if (autoAlign) {
-      Object.keys(floatingStyles).forEach(style => {
+      const updatedFloatingStyles = {
+        ...floatingStyles,
+        visibility: middlewareData.hide?.referenceHidden ? 'hidden' : 'visible'
+      };
+      Object.keys(updatedFloatingStyles).forEach(style => {
         if (refs.floating.current) {
-          refs.floating.current.style[style] = floatingStyles[style];
+          refs.floating.current.style[style] = updatedFloatingStyles[style];
         }
       });
     }
@@ -260,11 +266,11 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   };
   const menuProps = useMemo(() => getMenuProps({
     ref: autoAlign ? refs.setFloating : null
-  }), [autoAlign]);
+  }), [autoAlign, getMenuProps, refs.setFloating]);
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'mini'
     });
@@ -360,10 +366,12 @@ Dropdown.propTypes = {
    */
   disabled: PropTypes.bool,
   /**
-   * Additional props passed to Downshift. Use with caution: anything you define
-   * here overrides the components' internal handling of that prop. Downshift
-   * internals are subject to change, and in some cases they can not be shimmed
-   * to shield you from potentially breaking changes.
+   * Additional props passed to Downshift.
+   *
+   * **Use with caution:** anything you define here overrides the components'
+   * internal handling of that prop. Downshift APIs and internals are subject to
+   * change, and in some cases they can not be shimmed by Carbon to shield you
+   * from potentially breaking changes.
    */
   downshiftProps: PropTypes.object,
   /**

package/es/components/FluidMultiSelect/FluidMultiSelect.js

@@ -53,7 +53,8 @@ FluidMultiSelect.propTypes = {
   clearSelectionText: PropTypes.string,
   /**
    * Provide a compare function that is used to determine the ordering of
-   * options. See 'sortItems' for more control.
+   * options. See 'sortItems' for more control. Consider declaring function
+   * with `useCallback` to prevent unnecessary re-renders.
    */
   compareItems: PropTypes.func,
   /**
@@ -65,10 +66,12 @@ FluidMultiSelect.propTypes = {
    */
   disabled: PropTypes.bool,
   /**
-   * Additional props passed to Downshift. Use with caution: anything you define
-   * here overrides the components' internal handling of that prop. Downshift
-   * internals are subject to change, and in some cases they can not be shimmed
-   * to shield you from potentially breaking changes.
+   * Additional props passed to Downshift.
+   *
+   * **Use with caution:** anything you define here overrides the components'
+   * internal handling of that prop. Downshift APIs and internals are subject to
+   * change, and in some cases they can not be shimmed by Carbon to shield you
+   * from potentially breaking changes.
    */
   downshiftProps: PropTypes.object,
   /**
@@ -104,7 +107,8 @@ FluidMultiSelect.propTypes = {
   /**
    * Helper function passed to downshift that allows the library to render a
    * given item to a string label. By default, it extracts the `label` field
-   * from a given item to serve as the item label in the list.
+   * from a given item to serve as the item label in the list. Consider
+   * declaring function with `useCallback` to prevent unnecessary re-renders.
    */
   itemToString: PropTypes.func,
   /**

package/es/components/Menu/MenuItem.js

@@ -8,7 +8,8 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default, { forwardRef, useContext, useRef, useState, useEffect } from 'react';
+import React__default, { forwardRef, useState, useContext, useRef, useEffect } from 'react';
+import { useFloating, autoUpdate, offset, useInteractions, useHover, safePolygon, FloatingFocusManager } from '@floating-ui/react';
 import { CaretLeft, CaretRight, Checkmark } from '@carbon/icons-react';
 import { useControllableState } from '../../internal/useControllableState.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
@@ -23,9 +24,6 @@ import { match } from '../../internal/keyboard/match.js';
 import { ArrowRight, Enter, Space } from '../../internal/keyboard/keys.js';
 
 var _CaretLeft, _CaretRight;
-const hoverIntentDelay = 150; // in ms
-const leaveIntentDelay = 300; // in ms
-
 const MenuItem = /*#__PURE__*/forwardRef(function MenuItem(_ref, forwardRef) {
   let {
     children,
@@ -38,19 +36,37 @@ const MenuItem = /*#__PURE__*/forwardRef(function MenuItem(_ref, forwardRef) {
     shortcut,
     ...rest
   } = _ref;
+  const [submenuOpen, setSubmenuOpen] = useState(false);
+  const [rtl, setRtl] = useState(false);
+  const {
+    refs,
+    floatingStyles,
+    context: floatingContext
+  } = useFloating({
+    open: submenuOpen,
+    onOpenChange: setSubmenuOpen,
+    placement: rtl ? 'left-start' : 'right-start',
+    whileElementsMounted: autoUpdate,
+    middleware: [offset({
+      mainAxis: -6,
+      crossAxis: -6
+    })]
+  });
+  const {
+    getReferenceProps,
+    getFloatingProps
+  } = useInteractions([useHover(floatingContext, {
+    delay: 100,
+    enabled: true,
+    handleClose: safePolygon({
+      requireIntent: false
+    })
+  })]);
   const prefix = usePrefix();
   const context = useContext(MenuContext);
   const menuItem = useRef(null);
-  const ref = useMergedRefs([forwardRef, menuItem]);
-  const [boundaries, setBoundaries] = useState({
-    x: -1,
-    y: -1
-  });
-  const [rtl, setRtl] = useState(false);
+  const ref = useMergedRefs([forwardRef, menuItem, refs.setReference]);
   const hasChildren = Boolean(children);
-  const [submenuOpen, setSubmenuOpen] = useState(false);
-  const hoverIntentTimeout = useRef(null);
-  const leaveIntentTimeout = useRef(null);
   const isDisabled = disabled && !hasChildren;
   const isDanger = kind === 'danger' && !hasChildren;
   function registerItem() {
@@ -66,31 +82,10 @@ const MenuItem = /*#__PURE__*/forwardRef(function MenuItem(_ref, forwardRef) {
     if (!menuItem.current) {
       return;
     }
-    const {
-      x,
-      y,
-      width,
-      height
-    } = menuItem.current.getBoundingClientRect();
-    if (rtl) {
-      setBoundaries({
-        x: [-x, x - width],
-        y: [y, y + height]
-      });
-    } else {
-      setBoundaries({
-        x: [x, x + width],
-        y: [y, y + height]
-      });
-    }
     setSubmenuOpen(true);
   }
   function closeSubmenu() {
     setSubmenuOpen(false);
-    setBoundaries({
-      x: -1,
-      y: -1
-    });
   }
   function handleClick(e) {
     if (!isDisabled) {
@@ -104,27 +99,6 @@ const MenuItem = /*#__PURE__*/forwardRef(function MenuItem(_ref, forwardRef) {
       }
     }
   }
-  function handleMouseEnter() {
-    if (leaveIntentTimeout.current) {
-      // When mouse reenters before closing keep sub menu open
-      clearTimeout(leaveIntentTimeout.current);
-      leaveIntentTimeout.current = null;
-    }
-    hoverIntentTimeout.current = setTimeout(() => {
-      openSubmenu();
-    }, hoverIntentDelay);
-  }
-  function handleMouseLeave() {
-    if (hoverIntentTimeout.current) {
-      clearTimeout(hoverIntentTimeout.current);
-      // Avoid closing the sub menu as soon as mouse leaves
-      // prevents accidental closure due to scroll bar
-      leaveIntentTimeout.current = setTimeout(() => {
-        closeSubmenu();
-        menuItem.current?.focus();
-      }, leaveIntentDelay);
-    }
-  }
   function handleKeyDown(e) {
     if (hasChildren && match(e, ArrowRight)) {
       openSubmenu();
@@ -169,7 +143,18 @@ const MenuItem = /*#__PURE__*/forwardRef(function MenuItem(_ref, forwardRef) {
       });
     }
   }, [iconsAllowed, IconElement, context.state.hasIcons, context]);
-  return /*#__PURE__*/React__default.createElement("li", _extends({
+  useEffect(() => {
+    Object.keys(floatingStyles).forEach(style => {
+      if (refs.floating.current && style !== 'position') {
+        refs.floating.current.style[style] = floatingStyles[style];
+      }
+    });
+  }, [floatingStyles, refs.floating]);
+  return /*#__PURE__*/React__default.createElement(FloatingFocusManager, {
+    context: floatingContext,
+    order: ['reference', 'floating'],
+    modal: false
+  }, /*#__PURE__*/React__default.createElement("li", _extends({
     role: "menuitem"
   }, rest, {
     ref: ref,
@@ -179,10 +164,8 @@ const MenuItem = /*#__PURE__*/forwardRef(function MenuItem(_ref, forwardRef) {
     "aria-haspopup": hasChildren ?? undefined,
     "aria-expanded": hasChildren ? submenuOpen : undefined,
     onClick: handleClick,
-    onMouseEnter: hasChildren ? handleMouseEnter : undefined,
-    onMouseLeave: hasChildren ? handleMouseLeave : undefined,
     onKeyDown: handleKeyDown
-  }), /*#__PURE__*/React__default.createElement("div", {
+  }, getReferenceProps()), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--menu-item__icon`
   }, iconsAllowed && IconElement && /*#__PURE__*/React__default.createElement(IconElement, null)), /*#__PURE__*/React__default.createElement(Text, {
     as: "div",
@@ -192,16 +175,15 @@ const MenuItem = /*#__PURE__*/forwardRef(function MenuItem(_ref, forwardRef) {
     className: `${prefix}--menu-item__shortcut`
   }, shortcut), hasChildren && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--menu-item__shortcut`
-  }, rtl ? _CaretLeft || (_CaretLeft = /*#__PURE__*/React__default.createElement(CaretLeft, null)) : _CaretRight || (_CaretRight = /*#__PURE__*/React__default.createElement(CaretRight, null))), /*#__PURE__*/React__default.createElement(Menu, {
+  }, rtl ? _CaretLeft || (_CaretLeft = /*#__PURE__*/React__default.createElement(CaretLeft, null)) : _CaretRight || (_CaretRight = /*#__PURE__*/React__default.createElement(CaretRight, null))), /*#__PURE__*/React__default.createElement(Menu, _extends({
     label: label,
     open: submenuOpen,
     onClose: () => {
       closeSubmenu();
       menuItem.current?.focus();
     },
-    x: boundaries.x,
-    y: boundaries.y
-  }, children)));
+    ref: refs.setFloating
+  }, getFloatingProps()), children))));
 });
 MenuItem.propTypes = {
   /**

package/es/components/Modal/Modal.js

@@ -229,7 +229,7 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
 
   // Slug is always size `sm`
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'sm'
     });

package/es/components/MultiSelect/FilterableMultiSelect.d.ts

@@ -48,10 +48,12 @@ export interface FilterableMultiSelectProps<ItemType> extends MultiSelectSorting
      */
     disabled?: boolean;
     /**
-     * Additional props passed to Downshift. Use with caution: anything you define
-     * here overrides the components' internal handling of that prop. Downshift
-     * internals are subject to change, and in some cases they can not be shimmed
-     * to shield you from potentially breaking changes.
+     * Additional props passed to Downshift.
+     *
+     * **Use with caution:** anything you define here overrides the components'
+     * internal handling of that prop. Downshift APIs and internals are subject to
+     * change, and in some cases they can not be shimmed by Carbon to shield you
+     * from potentially breaking changes.
      */
     downshiftProps?: UseMultipleSelectionProps<ItemType>;
     /**

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -11,7 +11,7 @@ import cx from 'classnames';
 import Downshift, { useCombobox, useMultipleSelection } from 'downshift';
 import isEqual from 'react-fast-compare';
 import PropTypes from 'prop-types';
-import React__default, { useContext, useState, useLayoutEffect, useRef, useEffect, useMemo } from 'react';
+import React__default, { useContext, useState, useLayoutEffect, useRef, useMemo, useEffect } from 'react';
 import { defaultFilterItems } from '../ComboBox/tools/filter.js';
 import { sortingPropTypes } from './MultiSelectPropTypes.js';
 import ListBox from '../ListBox/index.js';
@@ -164,20 +164,23 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
     setPrevOpen(open);
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  const sortedItems = sortItems(filterItems(items, {
-    itemToString,
-    inputValue
-  }), {
-    selectedItems: {
-      top: controlledSelectedItems,
-      fixed: [],
-      'top-after-reopen': topItems
-    }[selectionFeedback],
-    itemToString,
-    compareItems,
-    locale
-  });
+  // memoize sorted items to reduce unnecessary expensive sort on rerender
+  const sortedItems = useMemo(() => {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    return sortItems(filterItems(items, {
+      itemToString,
+      inputValue
+    }), {
+      selectedItems: {
+        top: controlledSelectedItems,
+        fixed: [],
+        'top-after-reopen': topItems
+      }[selectionFeedback],
+      itemToString,
+      compareItems,
+      locale
+    });
+  }, [items, inputValue, controlledSelectedItems, topItems, selectionFeedback, itemToString, compareItems, locale]);
   const inline = type === 'inline';
   const showWarning = !invalid && warn;
   const wrapperClasses = cx(`${prefix}--multi-select__wrapper`, `${prefix}--multi-select--filterable__wrapper`, `${prefix}--list-box__wrapper`, containerClassName, {
@@ -217,9 +220,15 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
       setTopItems(controlledSelectedItems);
     }
   }, [controlledSelectedItems, isOpen, setTopItems]);
+  const validateHighlightFocus = () => {
+    if (controlledSelectedItems.length > 0) {
+      setHighlightedIndex(0);
+    }
+  };
   function handleMenuChange(forceIsOpen) {
     const nextIsOpen = forceIsOpen ?? !isOpen;
     setIsOpen(nextIsOpen);
+    validateHighlightFocus();
     if (onMenuChange) {
       onMenuChange(nextIsOpen);
     }
@@ -237,9 +246,8 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
   } = useCombobox({
     isOpen,
     items: sortedItems,
+    // defaultHighlightedIndex: 0, // after selection, highlight the first item.
     itemToString,
-    defaultHighlightedIndex: 0,
-    // after selection, highlight the first item.
     id,
     labelId,
     menuId,
@@ -284,24 +292,37 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
         return changes;
       case FunctionToggleMenu:
       case ToggleButtonClick:
+        validateHighlightFocus();
         if (changes.isOpen && !changes.selectedItem) {
           return {
-            ...changes,
-            highlightedIndex: 0
+            ...changes
           };
         }
-        return changes;
+        return {
+          ...changes,
+          highlightedIndex: null
+        };
       case InputChange:
         if (onInputValueChange) {
           onInputValueChange(changes.inputValue);
         }
         setInputValue(changes.inputValue ?? '');
         setIsOpen(true);
-        return changes;
+        return {
+          ...changes,
+          highlightedIndex: 0
+        };
       case InputClick:
+        validateHighlightFocus();
+        if (changes.isOpen && !changes.selectedItem) {
+          return {
+            ...changes
+          };
+        }
         return {
           ...changes,
-          isOpen: false
+          isOpen: false,
+          highlightedIndex: null
         };
       case MenuMouseLeave:
         return {
@@ -385,7 +406,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'mini'
     });
@@ -622,10 +643,12 @@ FilterableMultiSelect.propTypes = {
    */
   disabled: PropTypes.bool,
   /**
-   * Additional props passed to Downshift. Use with caution: anything you define
-   * here overrides the components' internal handling of that prop. Downshift
-   * internals are subject to change, and in some cases they can not be shimmed
-   * to shield you from potentially breaking changes.
+   * Additional props passed to Downshift.
+   *
+   * **Use with caution:** anything you define here overrides the components'
+   * internal handling of that prop. Downshift APIs and internals are subject to
+   * change, and in some cases they can not be shimmed by Carbon to shield you
+   * from potentially breaking changes.
    */
   // @ts-ignore
   downshiftProps: PropTypes.shape(Downshift.propTypes),

package/es/components/MultiSelect/MultiSelect.d.ts

@@ -42,10 +42,12 @@ export interface MultiSelectProps<ItemType> extends MultiSelectSortingProps<Item
      */
     disabled?: ListBoxProps['disabled'];
     /**
-     * Additional props passed to Downshift. Use with caution: anything you define
-     * here overrides the components' internal handling of that prop. Downshift
-     * internals are subject to change, and in some cases they can not be shimmed
-     * to shield you from potentially breaking changes.
+     * Additional props passed to Downshift.
+     *
+     * **Use with caution:** anything you define here overrides the components'
+     * internal handling of that prop. Downshift APIs and internals are subject to
+     * change, and in some cases they can not be shimmed by Carbon to shield you
+     * from potentially breaking changes.
      */
     downshiftProps?: Partial<UseSelectProps<ItemType>>;
     /**