@carbon/react 1.63.1 → 1.64.0-rc.0

package/lib/components/{AiSkeleton/AiSkeletonIcon.d.ts → AISkeleton/AISkeletonIcon.d.ts}

@@ -6,7 +6,7 @@
  */
 import PropTypes from 'prop-types';
 import React from 'react';
-interface AiSkeletonIconProps {
+interface AISkeletonIconProps {
     /**
      * Specify an optional className to add.
      */
@@ -16,8 +16,8 @@ interface AiSkeletonIconProps {
      */
     style?: React.CSSProperties;
 }
-declare const AiSkeletonIcon: {
-    ({ className, ...rest }: AiSkeletonIconProps): import("react/jsx-runtime").JSX.Element;
+declare const AISkeletonIcon: {
+    ({ className, ...rest }: AISkeletonIconProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Specify an optional className to add.
@@ -29,4 +29,4 @@ declare const AiSkeletonIcon: {
         style: PropTypes.Requireable<object>;
     };
 };
-export default AiSkeletonIcon;
+export default AISkeletonIcon;

package/lib/components/{AiSkeleton/AiSkeletonIcon.js → AISkeleton/AISkeletonIcon.js}

@@ -22,20 +22,20 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const AiSkeletonIcon = _ref => {
+const AISkeletonIcon = _ref => {
   let {
     className,
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
-  const AiSkeletonIconClasses = cx__default["default"](className, {
+  const AISkeletonIconClasses = cx__default["default"](className, {
     [`${prefix}--skeleton__icon--ai`]: true
   });
   return /*#__PURE__*/React__default["default"].createElement(SkeletonIcon["default"], _rollupPluginBabelHelpers["extends"]({
-    className: AiSkeletonIconClasses
+    className: AISkeletonIconClasses
   }, rest));
 };
-AiSkeletonIcon.propTypes = {
+AISkeletonIcon.propTypes = {
   /**
    * Specify an optional className to add.
    */
@@ -46,4 +46,4 @@ AiSkeletonIcon.propTypes = {
   style: PropTypes__default["default"].object
 };
 
-exports["default"] = AiSkeletonIcon;
+exports["default"] = AISkeletonIcon;

package/lib/components/{AiSkeleton/AiSkeletonPlaceholder.d.ts → AISkeleton/AISkeletonPlaceholder.d.ts}

@@ -5,14 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
-export interface AiSkeletonPlaceholderProps {
+export interface AISkeletonPlaceholderProps {
     /**
      * Add a custom class to the component to set the height and width
      */
     className?: string;
 }
-declare const AiSkeletonPlaceholder: {
-    ({ className, ...other }: AiSkeletonPlaceholderProps): import("react/jsx-runtime").JSX.Element;
+declare const AISkeletonPlaceholder: {
+    ({ className, ...other }: AISkeletonPlaceholderProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Add a custom class to the component
@@ -21,4 +21,4 @@ declare const AiSkeletonPlaceholder: {
         className: PropTypes.Requireable<string>;
     };
 };
-export default AiSkeletonPlaceholder;
+export default AISkeletonPlaceholder;

package/lib/components/{AiSkeleton/AiSkeletonPlaceholder.js → AISkeleton/AISkeletonPlaceholder.js}

@@ -22,21 +22,21 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const AiSkeletonPlaceholder = _ref => {
+const AISkeletonPlaceholder = _ref => {
   let {
     className,
     ...other
   } = _ref;
   const prefix = usePrefix.usePrefix();
-  const AiSkeletonPlaceholderClasses = cx__default["default"]({
+  const AISkeletonPlaceholderClasses = cx__default["default"]({
     className,
     [`${prefix}--skeleton__placeholder--ai`]: true
   }, className);
   return /*#__PURE__*/React__default["default"].createElement(SkeletonPlaceholder["default"], _rollupPluginBabelHelpers["extends"]({
-    className: AiSkeletonPlaceholderClasses
+    className: AISkeletonPlaceholderClasses
   }, other));
 };
-AiSkeletonPlaceholder.propTypes = {
+AISkeletonPlaceholder.propTypes = {
   /**
    * Add a custom class to the component
    * to set the height and width
@@ -44,4 +44,4 @@ AiSkeletonPlaceholder.propTypes = {
   className: PropTypes__default["default"].string
 };
 
-exports["default"] = AiSkeletonPlaceholder;
+exports["default"] = AISkeletonPlaceholder;

package/lib/components/{AiSkeleton/AiSkeletonText.d.ts → AISkeleton/AISkeletonText.d.ts}

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
-interface AiSkeletonTextProps {
+interface AISkeletonTextProps {
     /**
      * Specify an optional className to be applied to the container node.
      */
@@ -27,8 +27,8 @@ interface AiSkeletonTextProps {
      */
     width?: string;
 }
-declare const AiSkeletonText: {
-    ({ className, ...rest }: AiSkeletonTextProps): import("react/jsx-runtime").JSX.Element;
+declare const AISkeletonText: {
+    ({ className, ...rest }: AISkeletonTextProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Specify an optional className to be applied to the container node
@@ -52,4 +52,4 @@ declare const AiSkeletonText: {
         width: PropTypes.Requireable<string>;
     };
 };
-export default AiSkeletonText;
+export default AISkeletonText;

package/lib/components/{AiSkeleton/AiSkeletonText.js → AISkeleton/AISkeletonText.js}

@@ -22,7 +22,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const AiSkeletonText = _ref => {
+const AISkeletonText = _ref => {
   let {
     className,
     ...rest
@@ -35,7 +35,7 @@ const AiSkeletonText = _ref => {
     className: aiSkeletonTextClasses
   }, rest));
 };
-AiSkeletonText.propTypes = {
+AISkeletonText.propTypes = {
   /**
    * Specify an optional className to be applied to the container node
    */
@@ -58,4 +58,4 @@ AiSkeletonText.propTypes = {
   width: PropTypes__default["default"].string
 };
 
-exports["default"] = AiSkeletonText;
+exports["default"] = AISkeletonText;

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

@@ -0,0 +1,10 @@
+/**
+ * Copyright IBM Corp. 2016, 2024
+ *
+ * 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 AISkeletonPlaceholder from './AISkeletonPlaceholder';
+import AISkeletonIcon from './AISkeletonIcon';
+import AISkeletonText from './AISkeletonText';
+export { AISkeletonText, AISkeletonIcon, AISkeletonPlaceholder };

package/lib/components/CheckboxGroup/CheckboxGroup.js

@@ -58,7 +58,7 @@ const CheckboxGroup = _ref => {
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if ( /*#__PURE__*/React__default["default"].isValidElement(slug) && slug['type']?.displayName === 'Slug') {
+  if ( /*#__PURE__*/React__default["default"].isValidElement(slug) && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
       size: 'mini',
       kind: 'default'

package/lib/components/ComboBox/ComboBox.d.ts

@@ -4,8 +4,8 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { UseComboboxProps } from 'downshift';
-import { type ReactNode, type ComponentType, type ReactElement, type RefAttributes, type PropsWithChildren, type PropsWithRef, type InputHTMLAttributes, type MouseEvent } from 'react';
+import { UseComboboxProps, UseComboboxActions } from 'downshift';
+import React, { type ReactNode, type ComponentType, type ReactElement, type RefAttributes, type PropsWithChildren, type PropsWithRef, type InputHTMLAttributes, type MouseEvent } from 'react';
 import { ListBoxSize } from '../ListBox';
 import { TranslateWithId } from '../../types/common';
 type ExcludedAttributes = 'id' | 'onChange' | 'onClick' | 'type' | 'size';
@@ -57,12 +57,27 @@ export interface ComboBoxProps<ItemType> extends Omit<InputHTMLAttributes<HTMLIn
      */
     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<UseComboboxProps<ItemType>>;
+    /**
+     * Provide a ref that will be mutated to contain an object of downshift
+     * action functions. These can be called to change the internal state of the
+     * downshift useCombobox hook.
+     *
+     * **Use with caution:** calling these actions modifies the internal state of
+     * downshift. It may conflict with or override the state management used within
+     * Combobox. 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.
+     */
+    downshiftActions?: React.MutableRefObject<UseComboboxActions<ItemType> | undefined>;
     /**
      * Provide helper text that is used alongside the control label for
      * additional help

package/lib/components/ComboBox/ComboBox.js

@@ -109,6 +109,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     className: containerClassName,
     direction = 'bottom',
     disabled = false,
+    downshiftActions,
     downshiftProps,
     helperText,
     id,
@@ -252,8 +253,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
       case ToggleButtonClick:
         if (changes.isOpen && !changes.selectedItem) {
           return {
-            ...changes,
-            highlightedIndex: 0
+            ...changes
           };
         }
         return changes;
@@ -293,6 +293,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
   };
   const showWarning = !invalid && warn;
   const className = cx__default["default"](`${prefix}--combo-box`, {
+    [`${prefix}--combo-box--invalid--focused`]: invalid && isFocused,
     [`${prefix}--list-box--up`]: direction === 'top',
     [`${prefix}--combo-box--warning`]: showWarning,
     [`${prefix}--combo-box--readonly`]: readOnly
@@ -313,7 +314,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
   }]);
   const inputClasses = cx__default["default"](`${prefix}--text-input`, {
     [`${prefix}--text-input--empty`]: !inputValue,
-    [`${prefix}--combo-box--input--focus`]: isFocused && !isFluid
+    [`${prefix}--combo-box--input--focus`]: isFocused
   });
 
   // needs to be Capitalized for react to render it correctly
@@ -321,23 +322,30 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
       size: 'mini'
     });
   }
   const {
+    // Prop getters
     getInputProps,
     getItemProps,
     getLabelProps,
     getMenuProps,
     getToggleButtonProps,
+    // State
     isOpen,
     highlightedIndex,
-    selectItem,
     selectedItem,
-    toggleMenu,
-    setHighlightedIndex
+    // Actions
+    closeMenu,
+    openMenu,
+    reset,
+    selectItem,
+    setHighlightedIndex,
+    setInputValue: downshiftSetInputValue,
+    toggleMenu
   } = Downshift.useCombobox({
     items: filterItems(items, itemToString, inputValue),
     inputValue: inputValue,
@@ -382,6 +390,22 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     },
     ...downshiftProps
   });
+  React.useEffect(() => {
+    // Used to expose the downshift actions to consumers for use with downshiftProps
+    // An odd pattern, here we mutate the value stored in the ref provided from the consumer.
+    // A riff of https://gist.github.com/gaearon/1a018a023347fe1c2476073330cc5509
+    if (downshiftActions) {
+      downshiftActions.current = {
+        closeMenu,
+        openMenu,
+        reset,
+        selectItem,
+        setHighlightedIndex,
+        setInputValue: downshiftSetInputValue,
+        toggleMenu
+      };
+    }
+  }, [closeMenu, openMenu, reset, selectItem, setHighlightedIndex, downshiftSetInputValue, toggleMenu]);
   const buttonProps = getToggleButtonProps({
     disabled: disabled || readOnly,
     onClick: handleToggleClick(isOpen),
@@ -454,9 +478,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, getInputProps({
     'aria-controls': isOpen ? undefined : menuProps.id,
     placeholder,
-    ref: {
-      ...mergeRefs["default"](textInput, ref)
-    },
+    ref: mergeRefs["default"](textInput, ref),
     onKeyDown: event => {
       if (match.match(event, keys.Space)) {
         event.stopPropagation();
@@ -596,12 +618,28 @@ ComboBox.propTypes = {
    */
   disabled: PropTypes__default["default"].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__default["default"].object,
+  /**
+   * Provide a ref that will be mutated to contain an object of downshift
+   * action functions. These can be called to change the internal state of the
+   * downshift useCombobox hook.
+   *
+   * **Use with caution:** calling these actions modifies the internal state of
+   * downshift. It may conflict with or override the state management used within
+   * Combobox. 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.
+   */
+  downshiftActions: PropTypes__default["default"].exact({
+    current: PropTypes__default["default"].any
+  }),
   /**
    * Provide helper text that is used alongside the control label for
    * additional help

package/lib/components/ComposedModal/ComposedModal.js

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

package/lib/components/DataTable/DataTable.js

@@ -19,7 +19,7 @@ var cells = require('./tools/cells.js');
 var denormalize = require('./tools/denormalize.js');
 var events = require('../../tools/events.js');
 var filter = require('./tools/filter.js');
-var instanceId = require('./tools/instanceId.js');
+var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
 var Table = require('./Table.js');
 var TableActionList = require('./TableActionList.js');
 var TableBatchAction = require('./TableBatchAction.js');
@@ -48,7 +48,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
 
-const getInstanceId = instanceId["default"]();
+const getInstanceId = setupGetInstanceId["default"]();
 const translationKeys = {
   expandRow: 'carbon.table.row.expand',
   collapseRow: 'carbon.table.row.collapse',

package/lib/components/DataTable/TableSelectRow.js

@@ -15,6 +15,7 @@ var React = require('react');
 var cx = require('classnames');
 var InlineCheckbox = require('../InlineCheckbox/InlineCheckbox.js');
 var RadioButton = require('../RadioButton/RadioButton.js');
+var useId = require('../../internal/useId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var deprecate = require('../../prop-types/deprecate.js');
 
@@ -38,7 +39,7 @@ const TableSelectRow = _ref => {
     className
   } = _ref;
   const prefix = usePrefix.usePrefix();
-  const uniqueNameId = React.useId();
+  const uniqueNameId = useId.useId();
   const selectionInputProps = {
     id,
     name: name ? name : uniqueNameId,

package/lib/components/DataTable/TableToolbarSearch.js

@@ -64,7 +64,7 @@ const TableToolbarSearch = _ref => {
   const [expandedState, setExpandedState] = React.useState(Boolean(defaultExpanded || defaultValue));
   const expanded = controlled ? expandedProp : expandedState;
   const [value, setValue] = React.useState(defaultValue || '');
-  const uniqueId = useId.useId();
+  const uniqueId = useId.useId('table-toolbar-search');
   const [focusTarget, setFocusTarget] = React.useState(null);
   const prefix = usePrefix.usePrefix();
   React.useEffect(() => {
@@ -111,7 +111,7 @@ const TableToolbarSearch = _ref => {
     disabled: disabled,
     className: searchClasses,
     value: value,
-    id: typeof id !== 'undefined' ? id : `table-toolbar-search-${uniqueId.toString()}`,
+    id: typeof id !== 'undefined' ? id : uniqueId,
     labelText: labelText || t('carbon.table.toolbar.search.label'),
     placeholder: placeholder || t('carbon.table.toolbar.search.placeholder'),
     onChange: onChange,

package/lib/components/DatePicker/DatePicker.js

@@ -185,25 +185,42 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
     }
   }, []);
   const lastStartValue = React.useRef('');
+  const [calendarCloseEvent, setCalendarCloseEvent] = React.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 = React.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
     });
   };
+  React.useEffect(() => {
+    if (calendarCloseEvent) {
+      const {
+        selectedDates,
+        dateStr,
+        instance
+      } = calendarCloseEvent;
+      handleCalendarClose(selectedDates, dateStr, instance);
+      setCalendarCloseEvent(null);
+    }
+  }, [calendarCloseEvent, handleCalendarClose]);
   const endInputField = React.useRef(null);
   const calendarRef = React.useRef(null);
   const savedOnChange = useSavedCallback.useSavedCallback(onChange);
-  const savedOnClose = useSavedCallback.useSavedCallback(datePickerType === 'range' ? onCalendarClose : onClose);
   const savedOnOpen = useSavedCallback.useSavedCallback(onOpen);
   const datePickerClasses = cx__default["default"](`${prefix}--date-picker`, {
     [`${prefix}--date-picker--short`]: short,
@@ -321,6 +338,7 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
     } = endInputField;
     const flatpickerconfig = {
       inline: inline ?? false,
+      onClose: onCalendarClose,
       disableMobile: true,
       defaultDate: value,
       closeOnSelect: closeOnSelect,
@@ -355,7 +373,6 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
           savedOnChange(...arguments);
         }
       },
-      onClose: savedOnClose,
       onReady: onHook,
       onMonthChange: onHook,
       onYearChange: onHook,
@@ -452,7 +469,7 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
       }
     };
     // 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()
@@ -499,6 +516,40 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
       calendarRef.current.set('inline', inline);
     }
   }, [inline]);
+  React.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]);
+  React.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]);
   React.useEffect(() => {
     if (calendarRef?.current?.set) {
       if (value !== undefined) {

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

@@ -22,6 +22,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.
    */
@@ -115,6 +124,7 @@ var carbonFlatpickrFixEventsPlugin = (config => fp => {
       inputTo.removeEventListener('blur', handleBlur, true);
     }
     inputFrom.removeEventListener('keydown', handleKeydown, true);
+    document.removeEventListener('click', handleClickOutside, true);
   };
 
   /**
@@ -131,6 +141,7 @@ var carbonFlatpickrFixEventsPlugin = (config => fp => {
       inputTo.addEventListener('keydown', handleKeydown, true);
       inputTo.addEventListener('blur', handleBlur, true);
     }
+    document.addEventListener('click', handleClickOutside, true);
   };
 
   /**

package/lib/components/DatePickerInput/DatePickerInput.js

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

package/lib/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>>;
     /**