@carbon/react 1.15.0 → 1.16.0-rc.0

package/es/components/FluidSelect/FluidSelect.Skeleton.js

@@ -0,0 +1,41 @@
+/**
+ * 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.
+ */
+
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import cx from 'classnames';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var _excluded = ["className"];
+
+var FluidSelectSkeleton = function FluidSelectSkeleton(_ref) {
+  var className = _ref.className,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var wrapperClasses = cx(className, "".concat(prefix, "--skeleton"), "".concat(prefix, "--list-box"));
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--list-box__wrapper--fluid")
+  }, /*#__PURE__*/React__default.createElement("div", _extends({
+    className: wrapperClasses
+  }, rest), /*#__PURE__*/React__default.createElement("span", {
+    className: "".concat(prefix, "--list-box__label")
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--list-box__field")
+  })));
+};
+
+FluidSelectSkeleton.propTypes = {
+  /**
+   * Specify an optional className to add.
+   */
+  className: PropTypes.string
+};
+var FluidSelectSkeleton$1 = FluidSelectSkeleton;
+
+export { FluidSelectSkeleton$1 as default };

package/es/components/FluidSelect/FluidSelect.js

@@ -0,0 +1,93 @@
+/**
+ * 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.
+ */
+
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import cx from 'classnames';
+import Select from '../Select/Select.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+import { FormContext } from '../FluidForm/FormContext.js';
+
+var _excluded = ["className", "children"];
+var FluidSelect = /*#__PURE__*/React__default.forwardRef(function FluidSelect(_ref, ref) {
+  var className = _ref.className,
+      children = _ref.children,
+      other = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var classNames = cx("".concat(prefix, "--select--fluid"), className);
+  return /*#__PURE__*/React__default.createElement(FormContext.Provider, {
+    value: {
+      isFluid: true
+    }
+  }, /*#__PURE__*/React__default.createElement(Select, _extends({
+    ref: ref,
+    className: classNames
+  }, other), children));
+});
+FluidSelect.propTypes = {
+  /**
+   * Provide the contents of your Select
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify an optional className to be applied to the node containing the label and the select box
+   */
+  className: PropTypes.string,
+
+  /**
+   * Optionally provide the default value of the `<select>`
+   */
+  defaultValue: PropTypes.any,
+
+  /**
+   * Specify whether the control is disabled
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Specify a custom `id` for the `<select>`
+   */
+  id: PropTypes.string.isRequired,
+
+  /**
+   * Specify if the currently value is invalid.
+   */
+  invalid: PropTypes.bool,
+
+  /**
+   * Message which is displayed if the value is invalid.
+   */
+  invalidText: PropTypes.node,
+
+  /**
+   * Provide label text to be read by screen readers when interacting with the
+   * control
+   */
+  labelText: PropTypes.node,
+
+  /**
+   * Provide an optional `onChange` hook that is called each time the value of
+   * the underlying `<input>` changes
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Specify whether the control is currently in warning state
+   */
+  warn: PropTypes.bool,
+
+  /**
+   * Provide the text that is displayed when the control is in warning state
+   */
+  warnText: PropTypes.node
+};
+var FluidSelect$1 = FluidSelect;
+
+export { FluidSelect$1 as default };

package/es/components/FluidTextArea/FluidTextArea.js

@@ -10,6 +10,7 @@ import PropTypes from 'prop-types';
 import React__default from 'react';
 import cx from 'classnames';
 import TextArea from '../TextArea/TextArea.js';
+import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 
@@ -92,7 +93,7 @@ FluidTextArea.propTypes = {
    * `true` to use the light version. For use on $ui-01 backgrounds only.
    * Don't use this to make tile background color same as container background color.
    */
-  light: PropTypes.bool,
+  light: deprecate(PropTypes.bool, 'The `light` prop for `FluidTextArea` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'),
 
   /**
    * Max character count allowed for the textarea. This is needed in order for enableCounter to display

package/es/components/InlineLoading/InlineLoading.js

@@ -21,7 +21,8 @@ function InlineLoading(_ref) {
       iconDescription = _ref.iconDescription,
       description = _ref.description,
       onSuccess = _ref.onSuccess,
-      successDelay = _ref.successDelay,
+      _ref$successDelay = _ref.successDelay,
+      successDelay = _ref$successDelay === void 0 ? 1500 : _ref$successDelay,
       other = _objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix();
@@ -108,8 +109,5 @@ InlineLoading.propTypes = {
    */
   successDelay: PropTypes.number
 };
-InlineLoading.defaultProps = {
-  successDelay: 1500
-};
 
 export { InlineLoading as default };

package/es/components/ListBox/ListBox.js

@@ -9,6 +9,7 @@ import { objectWithoutProperties as _objectWithoutProperties, defineProperty as
 import cx from 'classnames';
 import React__default, { useContext } from 'react';
 import PropTypes from 'prop-types';
+import deprecate from '../../prop-types/deprecate.js';
 import { ListBoxSize, ListBoxType } from './ListBoxPropTypes.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import ListBoxField from './ListBoxField.js';
@@ -109,7 +110,7 @@ ListBox.propTypes = {
    * `true` to use the light version. For use on $ui-01 backgrounds only.
    * Don't use this to make tile background color same as container background color.
    */
-  light: PropTypes.bool,
+  light: deprecate(PropTypes.bool, 'The `light` prop for `ListBox` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'),
 
   /**
    * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -11,17 +11,19 @@ import cx from 'classnames';
 import Downshift from 'downshift';
 import isEqual from 'lodash.isequal';
 import PropTypes from 'prop-types';
-import React__default, { useState, useRef } from 'react';
+import React__default, { useContext, useState, useRef } from 'react';
 import { defaultFilterItems } from '../ComboBox/tools/filter.js';
 import { sortingPropTypes } from './MultiSelectPropTypes.js';
 import '../ListBox/index.js';
 import Selection from '../../internal/Selection.js';
 import { defaultItemToString } from './tools/itemToString.js';
 import mergeRefs from '../../tools/mergeRefs.js';
+import deprecate from '../../prop-types/deprecate.js';
 import { useId } from '../../internal/useId.js';
 import { defaultCompareItems, defaultSortItems } from './tools/sorting.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { FormContext } from '../FluidForm/FormContext.js';
 import { match } from '../../internal/keyboard/match.js';
 import ListBoxSelection from '../ListBox/next/ListBoxSelection.js';
 import ListBoxTrigger from '../ListBox/next/ListBoxTrigger.js';
@@ -65,35 +67,43 @@ var FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Filt
       warn = _ref.warn,
       warnText = _ref.warnText;
 
-  var _useState = useState(open),
+  var _useContext = useContext(FormContext),
+      isFluid = _useContext.isFluid;
+
+  var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
-      isOpen = _useState2[0],
-      setIsOpen = _useState2[1];
+      isFocused = _useState2[0],
+      setIsFocused = _useState2[1];
 
   var _useState3 = useState(open),
       _useState4 = _slicedToArray(_useState3, 2),
-      prevOpen = _useState4[0],
-      setPrevOpen = _useState4[1];
+      isOpen = _useState4[0],
+      setIsOpen = _useState4[1];
 
-  var _useState5 = useState(''),
+  var _useState5 = useState(open),
       _useState6 = _slicedToArray(_useState5, 2),
-      inputValue = _useState6[0],
-      setInputValue = _useState6[1];
+      prevOpen = _useState6[0],
+      setPrevOpen = _useState6[1];
 
-  var _useState7 = useState([]),
+  var _useState7 = useState(''),
       _useState8 = _slicedToArray(_useState7, 2),
-      topItems = _useState8[0],
-      setTopItems = _useState8[1];
+      inputValue = _useState8[0],
+      setInputValue = _useState8[1];
 
-  var _useState9 = useState(false),
+  var _useState9 = useState([]),
       _useState10 = _slicedToArray(_useState9, 2),
-      inputFocused = _useState10[0],
-      setInputFocused = _useState10[1];
+      topItems = _useState10[0],
+      setTopItems = _useState10[1];
 
-  var _useState11 = useState(null),
+  var _useState11 = useState(false),
       _useState12 = _slicedToArray(_useState11, 2),
-      highlightedIndex = _useState12[0],
-      setHighlightedIndex = _useState12[1];
+      inputFocused = _useState12[0],
+      setInputFocused = _useState12[1];
+
+  var _useState13 = useState(null),
+      _useState14 = _slicedToArray(_useState13, 2),
+      highlightedIndex = _useState14[0],
+      setHighlightedIndex = _useState14[1];
 
   var textInput = useRef();
   var filterableMultiSelectInstanceId = useId();
@@ -107,7 +117,7 @@ var FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Filt
 
   var inline = type === 'inline';
   var showWarning = !invalid && warn;
-  var wrapperClasses = cx("".concat(prefix, "--multi-select__wrapper"), "".concat(prefix, "--list-box__wrapper"), [enabled ? containerClassName : null], (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--multi-select__wrapper--inline"), inline), _defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--inline"), inline), _defineProperty(_cx, "".concat(prefix, "--multi-select__wrapper--inline--invalid"), inline && invalid), _defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--inline--invalid"), inline && invalid), _defineProperty(_cx, "".concat(prefix, "--list-box--up"), direction === 'top'), _cx));
+  var wrapperClasses = cx("".concat(prefix, "--multi-select__wrapper"), "".concat(prefix, "--list-box__wrapper"), [enabled ? containerClassName : null], (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--multi-select__wrapper--inline"), inline), _defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--inline"), inline), _defineProperty(_cx, "".concat(prefix, "--multi-select__wrapper--inline--invalid"), inline && invalid), _defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--inline--invalid"), inline && invalid), _defineProperty(_cx, "".concat(prefix, "--list-box--up"), direction === 'top'), _defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--fluid--invalid"), isFluid && invalid), _defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--fluid--focus"), isFluid && isFocused), _cx));
   var helperId = !helperText ? undefined : "filterablemultiselect-helper-text-".concat(filterableMultiSelectInstanceId);
   var labelId = "".concat(id, "-label");
   var titleClasses = cx((_cx2 = {}, _defineProperty(_cx2, "".concat(prefix, "--label"), true), _defineProperty(_cx2, "".concat(prefix, "--label--disabled"), disabled), _defineProperty(_cx2, "".concat(prefix, "--visually-hidden"), hideLabel), _cx2));
@@ -297,11 +307,22 @@ var FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Filt
         }, {
           suppressRefError: true
         });
+
+        var handleFocus = function handleFocus(evt) {
+          if (evt.target.classList.contains("".concat(prefix, "--tag__close-icon")) || evt.target.classList.contains("".concat(prefix, "--list-box__selection"))) {
+            setIsFocused(false);
+          } else {
+            setIsFocused(evt.type === 'focus' ? true : false);
+          }
+        };
+
         return /*#__PURE__*/React__default.createElement("div", {
           className: wrapperClasses
         }, titleText ? /*#__PURE__*/React__default.createElement("label", _extends({
           className: titleClasses
         }, labelProps), titleText) : null, /*#__PURE__*/React__default.createElement(ListBox, {
+          onFocus: isFluid ? handleFocus : null,
+          onBlur: isFluid ? handleFocus : null,
           className: className,
           disabled: disabled,
           light: light,
@@ -459,7 +480,7 @@ FilterableMultiSelect.propTypes = _objectSpread2(_objectSpread2({
   /**
    * `true` to use the light version.
    */
-  light: PropTypes.bool,
+  light: deprecate(PropTypes.bool, 'The `light` prop for `FilterableMultiSelect` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'),
 
   /**
    * Specify the locale of the control. Used for the default `compareItems`
@@ -539,7 +560,6 @@ FilterableMultiSelect.defaultProps = {
   itemToString: defaultItemToString,
   locale: 'en',
   sortItems: defaultSortItems,
-  light: false,
   open: false,
   selectionFeedback: 'top-after-reopen'
 };

package/es/components/MultiSelect/MultiSelect.js

@@ -11,7 +11,7 @@ import cx from 'classnames';
 import Downshift, { useSelect } from 'downshift';
 import isEqual from 'lodash.isequal';
 import PropTypes from 'prop-types';
-import React__default, { useRef, useState } from 'react';
+import React__default, { useContext, useRef, useState } from 'react';
 import '../ListBox/index.js';
 import { sortingPropTypes } from './MultiSelectPropTypes.js';
 import { defaultItemToString } from './tools/itemToString.js';
@@ -19,8 +19,10 @@ import { defaultCompareItems, defaultSortItems } from './tools/sorting.js';
 import { useSelection } from '../../internal/Selection.js';
 import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
 import mergeRefs from '../../tools/mergeRefs.js';
+import deprecate from '../../prop-types/deprecate.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { FormContext } from '../FluidForm/FormContext.js';
 import { match } from '../../internal/keyboard/match.js';
 import ListBox from '../ListBox/ListBox.js';
 import { ListBoxSize } from '../ListBox/ListBoxPropTypes.js';
@@ -74,6 +76,9 @@ var MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(_r
       selected = _ref.selectedItems;
   var prefix = usePrefix();
 
+  var _useContext = useContext(FormContext),
+      isFluid = _useContext.isFluid;
+
   var _useRef = useRef(getInstanceId()),
       multiSelectInstanceId = _useRef.current;
 
@@ -82,20 +87,25 @@ var MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(_r
       highlightedIndex = _useState2[0],
       setHighlightedIndex = _useState2[1];
 
-  var _useState3 = useState(open),
+  var _useState3 = useState(false),
       _useState4 = _slicedToArray(_useState3, 2),
-      isOpen = _useState4[0],
-      setIsOpen = _useState4[1];
+      isFocused = _useState4[0],
+      setIsFocused = _useState4[1];
 
   var _useState5 = useState(open),
       _useState6 = _slicedToArray(_useState5, 2),
-      prevOpenProp = _useState6[0],
-      setPrevOpenProp = _useState6[1];
+      isOpen = _useState6[0],
+      setIsOpen = _useState6[1];
 
-  var _useState7 = useState([]),
+  var _useState7 = useState(open),
       _useState8 = _slicedToArray(_useState7, 2),
-      topItems = _useState8[0],
-      setTopItems = _useState8[1];
+      prevOpenProp = _useState8[0],
+      setPrevOpenProp = _useState8[1];
+
+  var _useState9 = useState([]),
+      _useState10 = _slicedToArray(_useState9, 2),
+      topItems = _useState10[0],
+      setTopItems = _useState10[1];
 
   var _useSelection = useSelection({
     disabled: disabled,
@@ -149,7 +159,7 @@ var MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(_r
   var inline = type === 'inline';
   var showWarning = !invalid && warn;
   var enabled = useFeatureFlag('enable-v11-release');
-  var wrapperClasses = cx("".concat(prefix, "--multi-select__wrapper"), "".concat(prefix, "--list-box__wrapper"), [enabled ? containerClassName : null], (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--multi-select__wrapper--inline"), inline), _defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--inline"), inline), _defineProperty(_cx, "".concat(prefix, "--multi-select__wrapper--inline--invalid"), inline && invalid), _defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--inline--invalid"), inline && invalid), _cx));
+  var wrapperClasses = cx("".concat(prefix, "--multi-select__wrapper"), "".concat(prefix, "--list-box__wrapper"), [enabled ? containerClassName : null], (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--multi-select__wrapper--inline"), inline), _defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--inline"), inline), _defineProperty(_cx, "".concat(prefix, "--multi-select__wrapper--inline--invalid"), inline && invalid), _defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--inline--invalid"), inline && invalid), _defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--fluid--invalid"), isFluid && invalid), _defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--fluid--focus"), !isOpen && isFluid && isFocused), _cx));
   var titleClasses = cx("".concat(prefix, "--label"), (_cx2 = {}, _defineProperty(_cx2, "".concat(prefix, "--label--disabled"), disabled), _defineProperty(_cx2, "".concat(prefix, "--visually-hidden"), hideLabel), _cx2));
   var helperId = !helperText ? undefined : "multiselect-helper-text-".concat(multiSelectInstanceId);
   var fieldLabelId = "multiselect-field-label-".concat(multiSelectInstanceId);
@@ -214,6 +224,11 @@ var MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(_r
   };
 
   var toggleButtonProps = getToggleButtonProps();
+
+  var handleFocus = function handleFocus(evt) {
+    evt.target.classList.contains("".concat(prefix, "--tag__close-icon")) ? setIsFocused(false) : setIsFocused(evt.type === 'focus' ? true : false);
+  };
+
   return /*#__PURE__*/React__default.createElement("div", {
     className: wrapperClasses
   }, /*#__PURE__*/React__default.createElement("label", _extends({
@@ -221,6 +236,8 @@ var MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(_r
   }, getLabelProps()), titleText && titleText, selectedItems.length > 0 && /*#__PURE__*/React__default.createElement("span", {
     className: "".concat(prefix, "--visually-hidden")
   }, clearSelectionDescription, " ", selectedItems.length, ",", clearSelectionText)), /*#__PURE__*/React__default.createElement(ListBox, {
+    onFocus: isFluid ? handleFocus : null,
+    onBlur: isFluid ? handleFocus : null,
     type: type,
     size: size,
     className: className,
@@ -371,7 +388,7 @@ MultiSelect.propTypes = _objectSpread2(_objectSpread2({}, sortingPropTypes), {},
   /**
    * `true` to use the light version.
    */
-  light: PropTypes.bool,
+  light: deprecate(PropTypes.bool, 'The `light` prop for `MultiSelect` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'),
 
   /**
    * Specify the locale of the control. Used for the default `compareItems`
@@ -453,7 +470,6 @@ MultiSelect.defaultProps = {
   initialSelectedItems: [],
   sortItems: defaultSortItems,
   type: 'default',
-  light: false,
   title: false,
   open: false,
   selectionFeedback: 'top-after-reopen',

package/es/components/OverflowMenu/OverflowMenu.js

@@ -496,8 +496,8 @@ _defineProperty(OverflowMenu, "propTypes", {
 _defineProperty(OverflowMenu, "contextType", PrefixContext);
 
 _defineProperty(OverflowMenu, "defaultProps", {
-  ariaLabel: FeatureFlags.enabled('enable-v11-release') ? null : 'open and close list of options',
-  iconDescription: 'open and close list of options',
+  ariaLabel: FeatureFlags.enabled('enable-v11-release') ? null : 'Open and close list of options',
+  iconDescription: 'Open and close list of options',
   open: false,
   direction: DIRECTION_BOTTOM,
   flipped: false,