@carbon/react 1.23.0 → 1.23.1

package/es/components/Menu/MenuItem.js

@@ -5,54 +5,432 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default from 'react';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import cx from 'classnames';
 import PropTypes from 'prop-types';
-import MenuOption from './MenuOption.js';
+import React__default, { useContext, useRef, useState, useEffect } from 'react';
+import { CaretRight, Checkmark } from '@carbon/react/icons';
+import { useControllableState } from '../../internal/useControllableState.js';
+import { useMergedRefs } from '../../internal/useMergedRefs.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+import { Menu } from './Menu.js';
+import { MenuContext } from './MenuContext.js';
+import { match } from '../../internal/keyboard/match.js';
+import { ArrowRight, Enter, Space } from '../../internal/keyboard/keys.js';
 
-var _excluded = ["label", "children", "disabled", "kind", "shortcut"];
+var _CaretRight;
 
-function MenuItem(_ref) {
-  var label = _ref.label,
-      children = _ref.children,
+var _excluded = ["children", "className", "disabled", "kind", "label", "onClick", "renderIcon", "shortcut"],
+    _excluded2 = ["className", "defaultSelected", "label", "onChange", "selected"],
+    _excluded3 = ["children", "className", "label"],
+    _excluded4 = ["className", "defaultSelectedItem", "items", "itemToString", "label", "onChange", "selectedItem"],
+    _excluded5 = ["className"];
+var hoverIntentDelay = 150; // in ms
+
+var MenuItem = /*#__PURE__*/React__default.forwardRef(function MenuItem(_ref, forwardRef) {
+  var _cx;
+
+  var children = _ref.children,
+      className = _ref.className,
       disabled = _ref.disabled,
-      kind = _ref.kind,
+      _ref$kind = _ref.kind,
+      kind = _ref$kind === void 0 ? 'default' : _ref$kind,
+      label = _ref.label,
+      onClick = _ref.onClick,
+      IconElement = _ref.renderIcon,
       shortcut = _ref.shortcut,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React__default.createElement(MenuOption, _extends({}, rest, {
-    label: label,
-    disabled: disabled,
-    kind: kind,
-    shortcut: shortcut
-  }), children);
-}
+  var prefix = usePrefix();
+  var context = useContext(MenuContext);
+  var menuItem = useRef();
+  var ref = useMergedRefs([forwardRef, menuItem]);
+
+  var _useState = useState({
+    x: -1,
+    y: -1
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      boundaries = _useState2[0],
+      setBoundaries = _useState2[1];
+
+  var hasChildren = Boolean(children);
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      submenuOpen = _useState4[0],
+      setSubmenuOpen = _useState4[1];
+
+  var hoverIntentTimeout = useRef(null);
+
+  function registerItem() {
+    context.dispatch({
+      type: 'registerItem',
+      payload: {
+        ref: menuItem,
+        disabled: Boolean(disabled)
+      }
+    });
+  }
+
+  function openSubmenu() {
+    var _menuItem$current$get = menuItem.current.getBoundingClientRect(),
+        x = _menuItem$current$get.x,
+        y = _menuItem$current$get.y,
+        width = _menuItem$current$get.width,
+        height = _menuItem$current$get.height;
+
+    setBoundaries({
+      x: [x, x + width],
+      y: [y, y + height]
+    });
+    setSubmenuOpen(true);
+  }
+
+  function closeSubmenu() {
+    setSubmenuOpen(false);
+    setBoundaries({
+      x: -1,
+      y: -1
+    });
+  }
+
+  function handleClick(e) {
+    if (hasChildren) {
+      openSubmenu();
+    } else {
+      context.state.requestCloseRoot(e);
 
+      if (onClick) {
+        onClick(e);
+      }
+    }
+  }
+
+  function handleMouseEnter() {
+    hoverIntentTimeout.current = setTimeout(function () {
+      openSubmenu();
+    }, hoverIntentDelay);
+  }
+
+  function handleMouseLeave() {
+    clearTimeout(hoverIntentTimeout.current);
+    closeSubmenu();
+    menuItem.current.focus();
+  }
+
+  function handleKeyDown(e) {
+    if (hasChildren && match(e, ArrowRight)) {
+      openSubmenu();
+    }
+
+    if (match(e, Enter) || match(e, Space)) {
+      handleClick(e);
+    }
+
+    if (rest.onKeyDown) {
+      rest.onKeyDown(e);
+    }
+  }
+
+  var classNames = cx(className, "".concat(prefix, "--menu-item"), (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--menu-item--disabled"), disabled), _defineProperty(_cx, "".concat(prefix, "--menu-item--").concat(kind), kind !== 'default'), _cx)); // on first render, register this menuitem in the context's state
+  // (used for keyboard navigation)
+
+  useEffect(function () {
+    registerItem(); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/React__default.createElement("li", _extends({
+    role: "menuitem"
+  }, rest, {
+    ref: ref,
+    className: classNames,
+    tabIndex: "-1",
+    "aria-disabled": disabled,
+    "aria-haspopup": hasChildren || null,
+    "aria-expanded": hasChildren ? submenuOpen : null,
+    onClick: handleClick,
+    onMouseEnter: hasChildren ? handleMouseEnter : null,
+    onMouseLeave: hasChildren ? handleMouseLeave : null,
+    onKeyDown: handleKeyDown
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--menu-item__icon")
+  }, IconElement && /*#__PURE__*/React__default.createElement(IconElement, null)), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--menu-item__label")
+  }, label), shortcut && !hasChildren && /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--menu-item__shortcut")
+  }, shortcut), hasChildren && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--menu-item__shortcut")
+  }, _CaretRight || (_CaretRight = /*#__PURE__*/React__default.createElement(CaretRight, null))), /*#__PURE__*/React__default.createElement(Menu, {
+    label: label,
+    open: submenuOpen,
+    onClose: function onClose() {
+      closeSubmenu();
+      menuItem.current.focus();
+    },
+    x: boundaries.x,
+    y: boundaries.y
+  }, children)));
+});
 MenuItem.propTypes = {
   /**
-   * Specify the children of the MenuItem
+   * Optionally provide another Menu to create a submenu. props.children can't be used to specify the content of the MenuItem itself. Use props.label instead.
    */
   children: PropTypes.node,
 
   /**
-   * Specify whether this MenuItem is disabled
+   * Additional CSS class names.
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify whether the MenuItem is disabled or not.
    */
   disabled: PropTypes.bool,
 
   /**
-   * Optional prop to specify the kind of the MenuItem
+   * Specify the kind of the MenuItem.
    */
   kind: PropTypes.oneOf(['default', 'danger']),
 
   /**
-   * Rendered label for the MenuItem
+   * A required label titling the MenuItem. Will be rendered as its text content.
    */
-  label: PropTypes.node.isRequired,
+  label: PropTypes.string.isRequired,
+
+  /**
+   * Provide an optional function to be called when the MenuItem is clicked.
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * This prop is not intended for use. The only supported icons are Checkmarks to depict single- and multi-selects. This prop is used by MenuItemSelectable and MenuItemRadioGroup automatically.
+   */
+  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+
+  /**
+   * Provide a shortcut for the action of this MenuItem. Note that the component will only render it as a hint but not actually register the shortcut.
+   */
+  shortcut: PropTypes.string
+};
+var MenuItemSelectable = /*#__PURE__*/React__default.forwardRef(function MenuItemSelectable(_ref2, forwardRef) {
+  var className = _ref2.className,
+      defaultSelected = _ref2.defaultSelected,
+      label = _ref2.label,
+      onChange = _ref2.onChange,
+      selected = _ref2.selected,
+      rest = _objectWithoutProperties(_ref2, _excluded2);
+
+  var prefix = usePrefix();
+  var context = useContext(MenuContext);
+
+  var _useControllableState = useControllableState({
+    value: selected,
+    onChange: onChange,
+    defaultValue: defaultSelected
+  }),
+      _useControllableState2 = _slicedToArray(_useControllableState, 2),
+      checked = _useControllableState2[0],
+      setChecked = _useControllableState2[1];
+
+  function handleClick(e) {
+    setChecked(!checked);
+
+    if (onChange) {
+      onChange(e);
+    }
+  }
+
+  useEffect(function () {
+    if (!context.state.hasIcons) {
+      context.dispatch({
+        type: 'enableIcons'
+      });
+    }
+  }, [context.state.hasIcons, context]);
+  var classNames = cx(className, "".concat(prefix, "--menu-item-selectable--selected"));
+  return /*#__PURE__*/React__default.createElement(MenuItem, _extends({}, rest, {
+    ref: forwardRef,
+    label: label,
+    className: classNames,
+    role: "menuitemcheckbox",
+    "aria-checked": checked,
+    renderIcon: checked && Checkmark,
+    onClick: handleClick
+  }));
+});
+MenuItemSelectable.propTypes = {
+  /**
+   * Additional CSS class names.
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify whether the option should be selected by default.
+   */
+  defaultSelected: PropTypes.bool,
+
+  /**
+   * A required label titling this option.
+   */
+  label: PropTypes.string.isRequired,
+
+  /**
+   * Provide an optional function to be called when the selection state changes.
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Pass a bool to props.selected to control the state of this option.
+   */
+  selected: PropTypes.bool
+};
+var MenuItemGroup = /*#__PURE__*/React__default.forwardRef(function MenuItemGroup(_ref3, forwardRef) {
+  var children = _ref3.children,
+      className = _ref3.className,
+      label = _ref3.label,
+      rest = _objectWithoutProperties(_ref3, _excluded3);
+
+  var prefix = usePrefix();
+  var classNames = cx(className, "".concat(prefix, "--menu-item-group"));
+  return /*#__PURE__*/React__default.createElement("li", {
+    className: classNames,
+    role: "none",
+    ref: forwardRef
+  }, /*#__PURE__*/React__default.createElement("ul", _extends({}, rest, {
+    role: "group",
+    "aria-label": label
+  }), children));
+});
+MenuItemGroup.propTypes = {
+  /**
+   * A collection of MenuItems to be rendered within this group.
+   */
+  children: PropTypes.node,
+
+  /**
+   * Additional CSS class names.
+   */
+  className: PropTypes.string,
+
+  /**
+   * A required label titling this group.
+   */
+  label: PropTypes.string.isRequired
+};
+var MenuItemRadioGroup = /*#__PURE__*/React__default.forwardRef(function MenuItemRadioGroup(_ref4, forwardRef) {
+  var className = _ref4.className,
+      defaultSelectedItem = _ref4.defaultSelectedItem,
+      items = _ref4.items,
+      _ref4$itemToString = _ref4.itemToString,
+      itemToString = _ref4$itemToString === void 0 ? function (item) {
+    return item.toString();
+  } : _ref4$itemToString,
+      label = _ref4.label,
+      onChange = _ref4.onChange,
+      selectedItem = _ref4.selectedItem,
+      rest = _objectWithoutProperties(_ref4, _excluded4);
+
+  var prefix = usePrefix();
+  var context = useContext(MenuContext);
+
+  var _useControllableState3 = useControllableState({
+    value: selectedItem,
+    onChange: onChange,
+    defaultValue: defaultSelectedItem
+  }),
+      _useControllableState4 = _slicedToArray(_useControllableState3, 2),
+      selection = _useControllableState4[0],
+      setSelection = _useControllableState4[1];
+
+  function handleClick(item, e) {
+    setSelection(item);
+
+    if (onChange) {
+      onChange(e);
+    }
+  }
+
+  useEffect(function () {
+    if (!context.state.hasIcons) {
+      context.dispatch({
+        type: 'enableIcons'
+      });
+    }
+  }, [context.state.hasIcons, context]);
+  var classNames = cx(className, "".concat(prefix, "--menu-item-radio-group"));
+  return /*#__PURE__*/React__default.createElement("li", {
+    className: classNames,
+    role: "none",
+    ref: forwardRef
+  }, /*#__PURE__*/React__default.createElement("ul", _extends({}, rest, {
+    role: "group",
+    "aria-label": label
+  }), items.map(function (item, i) {
+    return /*#__PURE__*/React__default.createElement(MenuItem, {
+      key: i,
+      label: itemToString(item),
+      role: "menuitemradio",
+      "aria-checked": item === selection,
+      renderIcon: item === selection && Checkmark,
+      onClick: function onClick(e) {
+        handleClick(item, e);
+      }
+    });
+  })));
+});
+MenuItemRadioGroup.propTypes = {
+  /**
+   * Additional CSS class names.
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify the default selected item. Must match the type of props.items.
+   */
+  defaultSelectedItem: PropTypes.any,
+
+  /**
+   * Provide a function to convert an item to the string that will be rendered. Defaults to item.toString().
+   */
+  itemToString: PropTypes.func,
+
+  /**
+   * Provide the options for this radio group. Can be of any type, as long as you provide an appropriate props.itemToString function.
+   */
+  items: PropTypes.array,
+
+  /**
+   * A required label titling this radio group.
+   */
+  label: PropTypes.string.isRequired,
+
+  /**
+   * Provide an optional function to be called when the selection changes.
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Provide props.selectedItem to control the state of this radio group. Must match the type of props.items.
+   */
+  selectedItem: PropTypes.any
+};
+var MenuItemDivider = /*#__PURE__*/React__default.forwardRef(function MenuItemDivider(_ref5, forwardRef) {
+  var className = _ref5.className,
+      rest = _objectWithoutProperties(_ref5, _excluded5);
 
+  var prefix = usePrefix();
+  var classNames = cx(className, "".concat(prefix, "--menu-item-divider"));
+  return /*#__PURE__*/React__default.createElement("li", _extends({}, rest, {
+    className: classNames,
+    role: "separator",
+    ref: forwardRef
+  }));
+});
+MenuItemDivider.propTypes = {
   /**
-   * Rendered shortcut for the MenuItem
+   * Additional CSS class names.
    */
-  shortcut: PropTypes.node
+  className: PropTypes.string
 };
 
-export { MenuItem as default };
+export { MenuItem, MenuItemDivider, MenuItemGroup, MenuItemRadioGroup, MenuItemSelectable };

package/es/components/MultiSelect/MultiSelect.js

@@ -327,6 +327,12 @@ var MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(_r
 });
 MultiSelect.displayName = 'MultiSelect';
 MultiSelect.propTypes = _objectSpread2(_objectSpread2({}, sortingPropTypes), {}, {
+  /**
+   * Provide a custom class name to be added to the outermost node in the
+   * component
+   */
+  className: PropTypes.string,
+
   /**
    * Specify the text that should be read for screen readers that describes total items selected
    */

package/es/components/OverflowMenu/OverflowMenu.js

@@ -39,14 +39,14 @@ var on = function on(element) {
 };
 /**
  * The CSS property names of the arrow keyed by the floating menu direction.
- * @type {object<string, string>}
+ * @type {Object<string, string>}
  */
 
 
 var triggerButtonPositionProps = (_triggerButtonPositio = {}, _defineProperty(_triggerButtonPositio, DIRECTION_TOP, 'bottom'), _defineProperty(_triggerButtonPositio, DIRECTION_BOTTOM, 'top'), _triggerButtonPositio);
 /**
  * Determines how the position of arrow should affect the floating menu position.
- * @type {object<string, number>}
+ * @type {Object<string, number>}
  */
 
 var triggerButtonPositionFactors = (_triggerButtonPositio2 = {}, _defineProperty(_triggerButtonPositio2, DIRECTION_TOP, -2), _defineProperty(_triggerButtonPositio2, DIRECTION_BOTTOM, -1), _triggerButtonPositio2);

package/es/components/OverflowMenuV2/index.js

@@ -11,11 +11,8 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { OverflowMenuVertical } from '@carbon/icons-react';
 import { useId } from '../../internal/useId.js';
-import '../Menu/index.js';
+import { Menu } from '../Menu/Menu.js';
 import { usePrefix } from '../../internal/usePrefix.js';
-import Menu from '../Menu/Menu.js';
-import { matches } from '../../internal/keyboard/match.js';
-import { ArrowUp, ArrowRight, ArrowDown, ArrowLeft } from '../../internal/keyboard/keys.js';
 
 var _excluded = ["children", "className", "renderIcon", "size"];
 var defaultSize = 'md';
@@ -80,12 +77,6 @@ function OverflowMenuV2(_ref) {
     e.preventDefault();
   }
 
-  function handleKeyPress(e) {
-    if (open && matches(e, [ArrowUp, ArrowRight, ArrowDown, ArrowLeft])) {
-      e.preventDefault();
-    }
-  }
-
   var containerClasses = cx("".concat(prefix, "--overflow-menu__container"));
   var triggerClasses = cx("".concat(prefix, "--overflow-menu"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--overflow-menu--open"), open), _defineProperty(_classNames, className, className), _classNames), size !== defaultSize && "".concat(prefix, "--overflow-menu--").concat(size));
   return /*#__PURE__*/React__default.createElement("div", {
@@ -98,7 +89,6 @@ function OverflowMenuV2(_ref) {
     className: triggerClasses,
     onClick: handleClick,
     onMouseDown: handleMousedown,
-    onKeyDown: handleKeyPress,
     ref: triggerRef
   }), /*#__PURE__*/React__default.createElement(IconElement, {
     className: "".concat(prefix, "--overflow-menu__icon")
@@ -114,17 +104,17 @@ function OverflowMenuV2(_ref) {
 
 OverflowMenuV2.propTypes = {
   /**
-   * Specify the children of the OverflowMenu
+   * A collection of MenuItems to be rendered within this OverflowMenu.
    */
   children: PropTypes.node,
 
   /**
-   * Optional className for the trigger button
+   * Additional CSS class names for the trigger button.
    */
   className: PropTypes.string,
 
   /**
-   * Function called to override icon rendering.
+   * Otionally provide a custom icon to be rendered on the trigger button.
    */
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 

package/es/components/Search/Search.js

@@ -247,11 +247,11 @@ Search.propTypes = {
 };
 
 function CustomSearchIcon(_ref2) {
-  var icon = _ref2.icon;
+  var Icon = _ref2.icon;
   var prefix = usePrefix();
 
-  if (icon) {
-    return /*#__PURE__*/React__default.cloneElement(icon, {
+  if (Icon) {
+    return /*#__PURE__*/React__default.createElement(Icon, {
       className: "".concat(prefix, "--search-magnifier-icon")
     });
   }

package/es/index.d.ts

@@ -105,7 +105,7 @@ 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, MenuDivider as unstable_MenuDivider, MenuGroup as unstable_MenuGroup, MenuItem as unstable_MenuItem, MenuRadioGroup as unstable_MenuRadioGroup, MenuSelectableItem as unstable_MenuSelectableItem, } from './components/Menu';
+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 { OverflowMenuV2 as unstable_OverflowMenuV2 } from './components/OverflowMenuV2';
 export { PageSelector as unstable_PageSelector, Pagination as unstable_Pagination, } from './components/Pagination/experimental';
 export * from './components/Popover';

package/es/index.js

@@ -50,11 +50,6 @@ export { default as unstable__FluidTextArea } from './components/FluidTextArea/F
 export { default as unstable__FluidTextAreaSkeleton } from './components/FluidTextArea/FluidTextArea.Skeleton.js';
 export { default as unstable__FluidTextInput } from './components/FluidTextInput/FluidTextInput.js';
 export { default as unstable__FluidTextInputSkeleton } from './components/FluidTextInput/FluidTextInput.Skeleton.js';
-export { default as unstable_MenuDivider } from './components/Menu/MenuDivider.js';
-export { default as unstable_MenuGroup } from './components/Menu/MenuGroup.js';
-export { default as unstable_MenuItem } from './components/Menu/MenuItem.js';
-export { default as unstable_MenuRadioGroup } from './components/Menu/MenuRadioGroup.js';
-export { default as unstable_MenuSelectableItem } from './components/Menu/MenuSelectableItem.js';
 export { default as unstable_PageSelector } from './components/Pagination/experimental/PageSelector.js';
 export { default as unstable_Pagination } from './components/Pagination/experimental/Pagination.js';
 export { default as AccordionItem } from './components/Accordion/AccordionItem.js';
@@ -110,7 +105,8 @@ export { default as unstable__FluidTimePickerSkeleton } from './components/Fluid
 export { default as unstable__FluidTimePickerSelect } from './components/FluidTimePickerSelect/FluidTimePickerSelect.js';
 export { LayoutDirection as unstable_LayoutDirection } from './components/Layout/LayoutDirection.js';
 export { useLayoutDirection as unstable_useLayoutDirection } from './components/Layout/useLayoutDirection.js';
-export { default as unstable_Menu } from './components/Menu/Menu.js';
+export { Menu as unstable_Menu } from './components/Menu/Menu.js';
+export { MenuItem as unstable_MenuItem, MenuItemDivider as unstable_MenuItemDivider, MenuItemGroup as unstable_MenuItemGroup, MenuItemRadioGroup as unstable_MenuItemRadioGroup, MenuItemSelectable as unstable_MenuItemSelectable } from './components/Menu/MenuItem.js';
 export { Text as unstable_Text } from './components/Text/Text.js';
 export { TextDirection as unstable_TextDirection } from './components/Text/TextDirection.js';
 export { default as Breadcrumb } from './components/Breadcrumb/Breadcrumb.js';

package/es/prop-types/isRequiredOneOf.js

@@ -15,8 +15,8 @@ import { objectSpread2 as _objectSpread2, defineProperty as _defineProperty } fr
  */
 
 /**
- * @param {object<string, Function>} propTypes The list of type checkers, keyed by prop names.
- * @returns {object<string, Function>}
+ * @param {Object<string, Function>} propTypes The list of type checkers, keyed by prop names.
+ * @returns {Object<string, Function>}
  *   The new prop type checkers that checks if one of the given props exist,
  *   in addition to the original type checkings.
  */

package/lib/components/Dropdown/Dropdown.Skeleton.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 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 from 'react';
+import { ListBoxSize } from '../ListBox';
+import { ReactAttr } from '../../types/common';
+export interface DropdownSkeletonProps extends ReactAttr<HTMLDivElement> {
+    size?: ListBoxSize;
+}
+declare const DropdownSkeleton: React.FC<DropdownSkeletonProps>;
+export default DropdownSkeleton;
+export { DropdownSkeleton };

package/lib/components/Dropdown/Dropdown.Skeleton.js

@@ -52,7 +52,6 @@ DropdownSkeleton.propTypes = {
    */
   size: ListBoxPropTypes.ListBoxSize
 };
-var DropdownSkeleton$1 = DropdownSkeleton;
 
 exports.DropdownSkeleton = DropdownSkeleton;
-exports["default"] = DropdownSkeleton$1;
+exports["default"] = DropdownSkeleton;

package/lib/components/Dropdown/index.js

@@ -10,8 +10,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var Dropdown = require('./Dropdown.js');
+var Dropdown_Skeleton = require('./Dropdown.Skeleton.js');
 
 
 
 exports.Dropdown = Dropdown["default"];
 exports["default"] = Dropdown["default"];
+exports.DropdownSkeleton = Dropdown_Skeleton["default"];

package/lib/components/FluidDropdown/FluidDropdown.js

@@ -14,6 +14,7 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
 var Dropdown = require('../Dropdown/Dropdown.js');
+require('../Dropdown/Dropdown.Skeleton.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var FormContext = require('../FluidForm/FormContext.js');