@carbon/react 1.14.0 → 1.15.0-rc.0

package/es/components/Loading/Loading.js

@@ -17,11 +17,15 @@ var _excluded = ["active", "className", "withOverlay", "small", "description"];
 function Loading(_ref) {
   var _cx, _cx2;
 
-  var active = _ref.active,
+  var _ref$active = _ref.active,
+      active = _ref$active === void 0 ? true : _ref$active,
       customClassName = _ref.className,
-      withOverlay = _ref.withOverlay,
-      small = _ref.small,
-      description = _ref.description,
+      _ref$withOverlay = _ref.withOverlay,
+      withOverlay = _ref$withOverlay === void 0 ? true : _ref$withOverlay,
+      _ref$small = _ref.small,
+      small = _ref$small === void 0 ? false : _ref$small,
+      _ref$description = _ref.description,
+      description = _ref$description === void 0 ? 'loading' : _ref$description,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix();
@@ -81,11 +85,5 @@ Loading.propTypes = {
    */
   withOverlay: PropTypes.bool
 };
-Loading.defaultProps = {
-  active: true,
-  withOverlay: true,
-  small: false,
-  description: 'loading'
-};
 
 export { Loading as default };

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -27,7 +27,7 @@ import ListBoxSelection from '../ListBox/next/ListBoxSelection.js';
 import ListBoxTrigger from '../ListBox/next/ListBoxTrigger.js';
 import ListBox from '../ListBox/ListBox.js';
 import { ListBoxSize } from '../ListBox/ListBoxPropTypes.js';
-import { Space } from '../../internal/keyboard/keys.js';
+import { Space, Tab } from '../../internal/keyboard/keys.js';
 
 var FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function FilterableMultiSelect(_ref, ref) {
   var _cx, _cx2, _cx3, _cx4;
@@ -280,6 +280,10 @@ var FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Filt
             if (match(event, Space)) {
               event.stopPropagation();
             }
+
+            if (match(event, Tab)) {
+              handleOnMenuChange(false);
+            }
           },
           onFocus: function onFocus() {
             setInputFocused(true);

package/es/components/Search/Search.js

@@ -19,7 +19,7 @@ import { Escape } from '../../internal/keyboard/keys.js';
 
 var _Close;
 
-var _excluded = ["className", "type", "id", "placeHolderText", "placeholder", "labelText", "closeButtonLabelText", "small", "size", "light", "disabled", "onChange", "onKeyDown", "renderIcon", "onClear"];
+var _excluded = ["className", "type", "id", "placeHolderText", "placeholder", "labelText", "closeButtonLabelText", "small", "size", "light", "disabled", "onChange", "onKeyDown", "renderIcon", "onClear", "onExpand"];
 
 var Search = /*#__PURE__*/function (_Component) {
   _inherits(Search, _Component);
@@ -104,6 +104,7 @@ var Search = /*#__PURE__*/function (_Component) {
           onKeyDown = _this$props.onKeyDown,
           renderIcon = _this$props.renderIcon;
           _this$props.onClear;
+          _this$props.onExpand;
           var other = _objectWithoutProperties(_this$props, _excluded);
 
       var hasContent = this.state.hasContent;

package/es/components/Search/next/Search.js

@@ -78,19 +78,19 @@ var Search = /*#__PURE__*/React__default.forwardRef(function Search(_ref, forwar
     setPrevValue(value);
   }
 
-  function clearInput(event) {
+  function clearInput() {
     if (!value) {
       inputRef.current.value = '';
-      onChange(event);
-    } else {
-      var clearedEvt = Object.assign({}, event.target, {
-        target: {
-          value: ''
-        }
-      });
-      onChange(clearedEvt);
     }
 
+    var inputTarget = Object.assign({}, inputRef.current, {
+      value: ''
+    });
+    var clearedEvt = {
+      target: inputTarget,
+      type: 'change'
+    };
+    onChange(clearedEvt);
     onClear();
     setHasContent(false);
     focus(inputRef);
@@ -103,7 +103,7 @@ var Search = /*#__PURE__*/React__default.forwardRef(function Search(_ref, forwar
   function handleKeyDown(event) {
     if (match(event, Escape)) {
       event.stopPropagation();
-      clearInput(event);
+      clearInput();
     }
   }
 
@@ -114,11 +114,7 @@ var Search = /*#__PURE__*/React__default.forwardRef(function Search(_ref, forwar
   }, /*#__PURE__*/React__default.createElement("div", {
     role: onExpand ? 'button' : null,
     className: "".concat(prefix, "--search-magnifier"),
-    onClick: function onClick() {
-      if (onExpand) {
-        onExpand();
-      }
-    }
+    onClick: onExpand
   }, /*#__PURE__*/React__default.createElement(CustomSearchIcon, {
     icon: renderIcon
   })), /*#__PURE__*/React__default.createElement("label", {

package/es/components/Slider/Slider.js

@@ -206,13 +206,14 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
 
         _this.setState({
           value: value,
-          left: left,
-          needsOnRelease: true
+          left: left
         });
       }
     });
 
     _defineProperty(_assertThisInitialized(_this), "onBlur", function (evt) {
+      var _this$props$onBlur, _this$props;
+
       // Do nothing if we have no valid event, target, or value
       if (!evt || !('target' in evt) || typeof evt.target.value !== 'string') {
         return;
@@ -226,7 +227,7 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
         isValid: validity
       });
 
-      _this.props.onBlur({
+      (_this$props$onBlur = (_this$props = _this.props).onBlur) === null || _this$props$onBlur === void 0 ? void 0 : _this$props$onBlur.call(_this$props, {
         value: value
       });
     });
@@ -377,27 +378,27 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
     value: function render() {
       var _this2 = this;
 
-      var _this$props = this.props,
-          ariaLabelInput = _this$props.ariaLabelInput,
-          className = _this$props.className,
-          hideTextInput = _this$props.hideTextInput,
-          _this$props$id = _this$props.id,
-          id = _this$props$id === void 0 ? this.inputId = this.inputId || "__carbon-slider_".concat(Math.random().toString(36).substr(2)) : _this$props$id,
-          min = _this$props.min,
-          minLabel = _this$props.minLabel,
-          max = _this$props.max,
-          maxLabel = _this$props.maxLabel,
-          _this$props$formatLab = _this$props.formatLabel,
-          formatLabel = _this$props$formatLab === void 0 ? defaultFormatLabel : _this$props$formatLab,
-          labelText = _this$props.labelText,
-          step = _this$props.step;
-          _this$props.stepMultiplier;
-          var inputType = _this$props.inputType,
-          required = _this$props.required,
-          disabled = _this$props.disabled,
-          name = _this$props.name,
-          light = _this$props.light,
-          other = _objectWithoutProperties(_this$props, _excluded);
+      var _this$props2 = this.props,
+          ariaLabelInput = _this$props2.ariaLabelInput,
+          className = _this$props2.className,
+          hideTextInput = _this$props2.hideTextInput,
+          _this$props2$id = _this$props2.id,
+          id = _this$props2$id === void 0 ? this.inputId = this.inputId || "__carbon-slider_".concat(Math.random().toString(36).substr(2)) : _this$props2$id,
+          min = _this$props2.min,
+          minLabel = _this$props2.minLabel,
+          max = _this$props2.max,
+          maxLabel = _this$props2.maxLabel,
+          _this$props2$formatLa = _this$props2.formatLabel,
+          formatLabel = _this$props2$formatLa === void 0 ? defaultFormatLabel : _this$props2$formatLa,
+          labelText = _this$props2.labelText,
+          step = _this$props2.step;
+          _this$props2.stepMultiplier;
+          var inputType = _this$props2.inputType,
+          required = _this$props2.required,
+          disabled = _this$props2.disabled,
+          name = _this$props2.name,
+          light = _this$props2.light,
+          other = _objectWithoutProperties(_this$props2, _excluded);
 
       delete other.onRelease;
       delete other.invalid;

package/es/components/TextInput/TextInput.js

@@ -219,7 +219,7 @@ TextInput.propTypes = {
   light: PropTypes.bool,
 
   /**
-   * Max character count allowed for the textarea. This is needed in order for enableCounter to display
+   * Max character count allowed for the input. This is needed in order for enableCounter to display
    */
   maxCount: PropTypes.number,
 

package/es/index.js

@@ -92,6 +92,7 @@ export { default as TabsSkeleton } from './components/Tabs/Tabs.Skeleton.js';
 export { default as TextInputSkeleton } from './components/TextInput/TextInput.Skeleton.js';
 export { default as ToggleSmallSkeleton } from './components/ToggleSmall/ToggleSmall.Skeleton.js';
 export { default as IconSkeleton } from './components/Icon/Icon.Skeleton.js';
+import './components/ContainedList/index.js';
 export { FeatureFlags as unstable_FeatureFlags, useFeatureFlag as unstable_useFeatureFlag, useFeatureFlags as unstable_useFeatureFlags } from './components/FeatureFlags/index.js';
 export { Heading, Section } from './components/Heading/index.js';
 export { IconButton } from './components/IconButton/index.js';
@@ -120,9 +121,12 @@ export { default as SideNavFooter } from './components/UIShell/SideNavFooter.js'
 export { default as SideNavIcon } from './components/UIShell/SideNavIcon.js';
 export { default as SideNavItem } from './components/UIShell/SideNavItem.js';
 export { default as SideNavLinkText } from './components/UIShell/SideNavLinkText.js';
+export { default as unstable_ContainedListItem } from './components/ContainedList/ContainedListItem/ContainedListItem.js';
 export { default as unstable_useContextMenu } from './components/ContextMenu/useContextMenu.js';
-export { default as unstable__FluidTextInput } from './components/FluidTextInput/FluidTextInput.js';
 export { default as unstable__FluidTextArea } from './components/FluidTextArea/FluidTextArea.js';
+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';
@@ -134,6 +138,7 @@ export { default as ProgressBar } from './components/ProgressBar/ProgressBar.js'
 export { default as MultiSelect } from './components/MultiSelect/MultiSelect.js';
 export { default as TextInput } from './components/TextInput/TextInput.js';
 export { default as TreeView } from './components/TreeView/TreeView.js';
+export { default as unstable_ContainedList } from './components/ContainedList/ContainedList.js';
 export { default as unstable_Menu } from './components/Menu/Menu.js';
 export { default as Breadcrumb } from './components/Breadcrumb/Breadcrumb.js';
 export { default as BreadcrumbItem } from './components/Breadcrumb/BreadcrumbItem.js';
@@ -194,6 +199,8 @@ export { default as SideNavLink } from './components/UIShell/SideNavLink.js';
 export { SideNavMenu } from './components/UIShell/SideNavMenu.js';
 export { default as SideNavMenuItem } from './components/UIShell/SideNavMenuItem.js';
 export { default as SideNavSwitcher } from './components/UIShell/SideNavSwitcher.js';
+export { default as unstable__FluidDropdown } from './components/FluidDropdown/FluidDropdown.js';
+export { default as unstable__FluidDropdownSkeleton } from './components/FluidDropdown/FluidDropdown.Skeleton.js';
 export { LayoutDirection as unstable_LayoutDirection } from './components/Layout/LayoutDirection.js';
 export { useLayoutDirection as unstable_useLayoutDirection } from './components/Layout/useLayoutDirection.js';
 export { Stack } from './components/Stack/Stack.js';

package/lib/components/ContainedList/ContainedList.js

@@ -0,0 +1,77 @@
+/**
+ * Copyright IBM Corp. 2016, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var cx = require('classnames');
+var useId = require('../../internal/useId.js');
+var usePrefix = require('../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+var variants = ['on-page', 'disclosed'];
+
+function ContainedList(_ref) {
+  var action = _ref.action,
+      children = _ref.children,
+      className = _ref.className,
+      _ref$kind = _ref.kind,
+      kind = _ref$kind === void 0 ? variants[0] : _ref$kind,
+      label = _ref.label;
+  var labelId = "".concat(useId.useId('contained-list'), "-header");
+  var prefix = usePrefix.usePrefix();
+  var classes = cx__default["default"]("".concat(prefix, "--contained-list"), "".concat(prefix, "--contained-list--").concat(kind), className);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classes
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--contained-list__header")
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    id: labelId,
+    className: "".concat(prefix, "--contained-list__label")
+  }, label), action && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--contained-list__action")
+  }, action)), /*#__PURE__*/React__default["default"].createElement("ul", {
+    "aria-labelledby": labelId
+  }, children));
+}
+
+ContainedList.propTypes = {
+  /**
+   * A slot for a possible interactive element to render.
+   */
+  action: PropTypes__default["default"].node,
+
+  /**
+   * A collection of ContainedListItems to be rendered in the ContainedList
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Additional CSS class names.
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * The kind of ContainedList you want to display
+   */
+  kind: PropTypes__default["default"].oneOf(variants),
+
+  /**
+   * A label describing the contained list.
+   */
+  label: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].node]).isRequired
+};
+
+exports["default"] = ContainedList;

package/lib/components/ContainedList/ContainedListItem/ContainedListItem.js

@@ -0,0 +1,86 @@
+/**
+ * Copyright IBM Corp. 2016, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var PropTypes = require('prop-types');
+var cx = require('classnames');
+var usePrefix = require('../../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+function ContainedListItem(_ref) {
+  var _classNames;
+
+  var action = _ref.action,
+      children = _ref.children,
+      className = _ref.className,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      onClick = _ref.onClick,
+      IconElement = _ref.renderIcon;
+  var prefix = usePrefix.usePrefix();
+  var isClickable = onClick !== undefined;
+  var classes = cx__default["default"]("".concat(prefix, "--contained-list-item"), className, (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--contained-list-item--clickable"), isClickable), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--contained-list-item--with-icon"), IconElement), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--contained-list-item--with-action"), action), _classNames));
+  var content = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, IconElement && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--contained-list-item__icon")
+  }, /*#__PURE__*/React__default["default"].createElement(IconElement, null)), /*#__PURE__*/React__default["default"].createElement("div", null, children));
+  return /*#__PURE__*/React__default["default"].createElement("li", {
+    className: classes
+  }, isClickable ? /*#__PURE__*/React__default["default"].createElement("button", {
+    className: "".concat(prefix, "--contained-list-item__content"),
+    type: "button",
+    disabled: disabled,
+    onClick: onClick
+  }, content) : /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--contained-list-item__content")
+  }, content), action && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--contained-list-item__action")
+  }, action));
+}
+
+ContainedListItem.propTypes = {
+  /**
+   * A slot for a possible interactive element to render within the item.
+   */
+  action: PropTypes__default["default"].node,
+
+  /**
+   * The content of this item. Must not contain any interactive elements. Use props.action to include those.
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Additional CSS class names.
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Whether this item is disabled.
+   */
+  disabled: PropTypes__default["default"].bool,
+
+  /**
+   * Provide an optional function to be called when the item is clicked.
+   */
+  onClick: PropTypes__default["default"].func,
+
+  /**
+   * Provide an optional icon to render in front of the item's content.
+   */
+  renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object])
+};
+
+exports["default"] = ContainedListItem;

package/lib/components/ContainedList/index.js

@@ -0,0 +1,18 @@
+/**
+ * Copyright IBM Corp. 2016, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var ContainedList = require('./ContainedList.js');
+var ContainedListItem = require('./ContainedListItem/ContainedListItem.js');
+
+ContainedList["default"].ContainedListItem = ContainedListItem["default"];
+
+exports["default"] = ContainedList["default"];
+exports.ContainedListItem = ContainedListItem["default"];

package/lib/components/DataTable/DataTable.js

@@ -29,7 +29,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
 
 var _excluded = ["header", "onClick", "isSortable"],
-    _excluded2 = ["onClick"],
+    _excluded2 = ["onClick", "onExpand"],
     _excluded3 = ["row", "onClick"],
     _excluded4 = ["onClick", "row"];
 
@@ -107,6 +107,7 @@ var DataTable = /*#__PURE__*/function (_React$Component) {
     _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "getExpandHeaderProps", function () {
       var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
           onClick = _ref2.onClick,
+          onExpand = _ref2.onExpand,
           rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded2);
 
       var t = _this.props.translateWithId;
@@ -123,7 +124,7 @@ var DataTable = /*#__PURE__*/function (_React$Component) {
         isExpanded: isExpanded,
         // Compose the event handlers so we don't overwrite a consumer's `onClick`
         // handler
-        onExpand: events.composeEventHandlers([_this.handleOnExpandAll, onClick ? _this.handleOnExpandHeaderClick(onClick, {
+        onExpand: events.composeEventHandlers([_this.handleOnExpandAll, onExpand, onClick ? _this.handleOnExpandHeaderClick(onClick, {
           isExpanded: isExpanded
         }) : null])
       });

package/lib/components/DataTable/state/getDerivedStateFromProps.js

@@ -48,6 +48,9 @@ var getDerivedStateFromProps = function getDerivedStateFromProps(props, prevStat
     state.rowIds = _rowIds;
   }
 
+  state.isExpandedAll = state.rowIds.every(function (id) {
+    return state.rowsById[id].isExpanded === true;
+  });
   return state;
 };
 

package/lib/components/Dropdown/Dropdown.js

@@ -19,6 +19,7 @@ require('../ListBox/index.js');
 var mergeRefs = require('../../tools/mergeRefs.js');
 var index = require('../FeatureFlags/index.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var FormContext = require('../FluidForm/FormContext.js');
 var ListBox = require('../ListBox/ListBox.js');
 var ListBoxPropTypes = require('../ListBox/ListBoxPropTypes.js');
 
@@ -70,6 +71,9 @@ var Dropdown = /*#__PURE__*/React__default["default"].forwardRef(function Dropdo
 
   var prefix = usePrefix.usePrefix();
 
+  var _useContext = React.useContext(FormContext.FormContext),
+      isFluid = _useContext.isFluid;
+
   var selectProps = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, downshiftProps), {}, {
     items: items,
     itemToString: itemToString,
@@ -95,19 +99,26 @@ var Dropdown = /*#__PURE__*/React__default["default"].forwardRef(function Dropdo
   var inline = type === 'inline';
   var showWarning = !invalid && warn;
   var enabled = index.useFeatureFlag('enable-v11-release');
+
+  var _useState = React.useState(false),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      isFocused = _useState2[0],
+      setIsFocused = _useState2[1];
+
   var className = cx__default["default"]("".concat(prefix, "--dropdown"), [enabled ? null : containerClassName], (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--dropdown--invalid"), invalid), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--dropdown--warning"), showWarning), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--dropdown--open"), isOpen), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--dropdown--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--dropdown--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--dropdown--light"), light), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--dropdown--").concat(size), size), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box--up"), direction === 'top'), _cx));
   var titleClasses = cx__default["default"]("".concat(prefix, "--label"), (_cx2 = {}, _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--label--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--visually-hidden"), hideLabel), _cx2));
   var helperClasses = cx__default["default"]("".concat(prefix, "--form__helper-text"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), disabled));
-  var wrapperClasses = cx__default["default"]("".concat(prefix, "--dropdown__wrapper"), "".concat(prefix, "--list-box__wrapper"), [enabled ? containerClassName : null], (_cx4 = {}, _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--dropdown__wrapper--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--list-box__wrapper--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--dropdown__wrapper--inline--invalid"), inline && invalid), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--list-box__wrapper--inline--invalid"), inline && invalid), _cx4)); // needs to be Capitalized for react to render it correctly
+  var wrapperClasses = cx__default["default"]("".concat(prefix, "--dropdown__wrapper"), "".concat(prefix, "--list-box__wrapper"), [enabled ? containerClassName : null], (_cx4 = {}, _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--dropdown__wrapper--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--list-box__wrapper--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--dropdown__wrapper--inline--invalid"), inline && invalid), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--list-box__wrapper--inline--invalid"), inline && invalid), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--list-box__wrapper--fluid--invalid"), isFluid && invalid), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--list-box__wrapper--fluid--focus"), isFluid && isFocused && !isOpen), _cx4)); // needs to be Capitalized for react to render it correctly
 
   var ItemToElement = itemToElement;
   var toggleButtonProps = getToggleButtonProps();
-  var helper = helperText ? /*#__PURE__*/React__default["default"].createElement("div", {
+  var helper = helperText && !isFluid ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: helperClasses
   }, helperText) : null;
 
   function onSelectedItemChange(_ref2) {
     var selectedItem = _ref2.selectedItem;
+    setIsFocused(false);
 
     if (onChange) {
       onChange({
@@ -119,11 +130,18 @@ var Dropdown = /*#__PURE__*/React__default["default"].forwardRef(function Dropdo
   var menuItemOptionRefs = React.useRef(items.map(function (_) {
     return /*#__PURE__*/React__default["default"].createRef();
   }));
+
+  var handleFocus = function handleFocus(evt) {
+    setIsFocused(evt.type === 'focus' ? true : false);
+  };
+
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: wrapperClasses
   }, other), titleText && /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({
     className: titleClasses
   }, getLabelProps()), titleText), /*#__PURE__*/React__default["default"].createElement(ListBox["default"], {
+    onFocus: handleFocus,
+    onBlur: handleFocus,
     "aria-label": ariaLabel,
     size: size,
     className: className,

package/lib/components/ExpandableSearch/ExpandableSearch.js

@@ -14,13 +14,22 @@ var React = require('react');
 var cx = require('classnames');
 var index = require('../Search/index.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var events = require('../../tools/events.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-function ExpandableSearch(props) {
+var _excluded = ["onBlur", "onChange", "onExpand", "onFocus"];
+
+function ExpandableSearch(_ref) {
+  var onBlur = _ref.onBlur,
+      onChange = _ref.onChange,
+      onExpand = _ref.onExpand,
+      onFocus = _ref.onFocus,
+      props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
   var _useState = React.useState(false),
       _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
       expanded = _useState2[0],
@@ -48,20 +57,24 @@ function ExpandableSearch(props) {
     }
   }
 
+  function handleChange(evt) {
+    setHasContent(evt.target.value !== '');
+  }
+
+  function handleExpand() {
+    var _searchRef$current$fo, _searchRef$current;
+
+    (_searchRef$current$fo = (_searchRef$current = searchRef.current).focus) === null || _searchRef$current$fo === void 0 ? void 0 : _searchRef$current$fo.call(_searchRef$current);
+  }
+
   var classes = cx__default["default"]("".concat(prefix, "--search--expandable"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--search--expanded"), expanded), props.className);
   return /*#__PURE__*/React__default["default"].createElement(index["default"], _rollupPluginBabelHelpers["extends"]({}, props, {
     ref: searchRef,
     className: classes,
-    onFocus: handleFocus,
-    onBlur: handleBlur,
-    onChange: function onChange(event) {
-      setHasContent(event.target.value !== '');
-    },
-    onExpand: function onExpand() {
-      var _searchRef$current$fo, _searchRef$current;
-
-      (_searchRef$current$fo = (_searchRef$current = searchRef.current).focus) === null || _searchRef$current$fo === void 0 ? void 0 : _searchRef$current$fo.call(_searchRef$current);
-    }
+    onFocus: events.composeEventHandlers([onFocus, handleFocus]),
+    onBlur: events.composeEventHandlers([onBlur, handleBlur]),
+    onChange: events.composeEventHandlers([onChange, handleChange]),
+    onExpand: events.composeEventHandlers([onExpand, handleExpand])
   }));
 }
 

package/lib/components/FluidDropdown/FluidDropdown.Skeleton.js

@@ -0,0 +1,51 @@
+/**
+ * Copyright IBM Corp. 2016, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+var cx = require('classnames');
+var usePrefix = require('../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+var _excluded = ["className"];
+
+var FluidDropdownSkeleton = function FluidDropdownSkeleton(_ref) {
+  var className = _ref.className,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var wrapperClasses = cx__default["default"](className, "".concat(prefix, "--skeleton"), "".concat(prefix, "--list-box"));
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--list-box__wrapper--fluid")
+  }, /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    className: wrapperClasses
+  }, rest), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(prefix, "--list-box__label")
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--list-box__field")
+  })));
+};
+
+FluidDropdownSkeleton.propTypes = {
+  /**
+   * Specify an optional className to add.
+   */
+  className: PropTypes__default["default"].string
+};
+var FluidDropdownSkeleton$1 = FluidDropdownSkeleton;
+
+exports["default"] = FluidDropdownSkeleton$1;