@carbon/react 1.29.0 → 1.30.0-rc.0

package/lib/components/ComboBox/ComboBox.js

@@ -16,10 +16,9 @@ var PropTypes = require('prop-types');
 var React = require('react');
 require('../Text/index.js');
 var iconsReact = require('@carbon/icons-react');
-var index$1 = require('../ListBox/index.js');
+var index = require('../ListBox/index.js');
 var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
 var mergeRefs = require('../../tools/mergeRefs.js');
-var index = require('../FeatureFlags/index.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
 require('../FluidForm/FluidForm.js');
@@ -42,12 +41,9 @@ const defaultItemToString = item => {
   if (typeof item === 'string') {
     return item;
   }
-
   return item && item.label;
 };
-
 const defaultShouldFilterItem = () => true;
-
 const getInputValue = _ref => {
   let {
     initialSelectedItem,
@@ -55,45 +51,34 @@ const getInputValue = _ref => {
     itemToString,
     selectedItem
   } = _ref;
-
   if (selectedItem) {
     return itemToString(selectedItem);
   }
-
   if (initialSelectedItem) {
     return itemToString(initialSelectedItem);
   }
-
   return inputValue || '';
 };
-
 const findHighlightedIndex = (_ref2, inputValue) => {
   let {
     items,
     itemToString = defaultItemToString
   } = _ref2;
-
   if (!inputValue) {
     return -1;
   }
-
   const searchValue = inputValue.toLowerCase();
-
   for (let i = 0; i < items.length; i++) {
     const item = itemToString(items[i]).toLowerCase();
-
     if (item.indexOf(searchValue) !== -1) {
       return i;
     }
   }
-
   return -1;
 };
-
 const getInstanceId = setupGetInstanceId["default"]();
 const ComboBox = /*#__PURE__*/React__default["default"].forwardRef((props, ref) => {
   var _Text;
-
   const {
     ['aria-label']: ariaLabel,
     ariaLabel: deprecatedAriaLabel,
@@ -142,7 +127,6 @@ const ComboBox = /*#__PURE__*/React__default["default"].forwardRef((props, ref)
   const [prevSelectedItem, setPrevSelectedItem] = React.useState();
   const [doneInitialSelectedItem, setDoneInitialSelectedItem] = React.useState(false);
   const savedOnInputChange = React.useRef(onInputChange);
-
   if (!doneInitialSelectedItem || prevSelectedItem !== selectedItem) {
     setDoneInitialSelectedItem(true);
     setPrevSelectedItem(selectedItem);
@@ -153,13 +137,11 @@ const ComboBox = /*#__PURE__*/React__default["default"].forwardRef((props, ref)
       selectedItem
     }));
   }
-
   const filterItems = (items, itemToString, inputValue) => items.filter(item => shouldFilterItem ? shouldFilterItem({
     item,
     itemToString,
     inputValue
   }) : defaultShouldFilterItem());
-
   const handleOnChange = selectedItem => {
     if (onChange) {
       onChange({
@@ -167,11 +149,9 @@ const ComboBox = /*#__PURE__*/React__default["default"].forwardRef((props, ref)
       });
     }
   };
-
   const handleOnInputValueChange = inputValue => {
     setInputValue(inputValue || '');
   };
-
   React.useEffect(() => {
     savedOnInputChange.current = onInputChange;
   }, [onInputChange]);
@@ -180,43 +160,37 @@ const ComboBox = /*#__PURE__*/React__default["default"].forwardRef((props, ref)
       savedOnInputChange.current(inputValue);
     }
   }, [inputValue]);
-
   const handleSelectionClear = () => {
-    if (textInput !== null && textInput !== void 0 && textInput.current) {
+    if (textInput?.current) {
       textInput.current.focus();
     }
   };
-
   const handleOnStateChange = (newState, _ref3) => {
     let {
       setHighlightedIndex
     } = _ref3;
-
     if (Object.prototype.hasOwnProperty.call(newState, 'inputValue')) {
       const {
         inputValue
       } = newState;
       const filteredItems = filterItems(items, itemToString, inputValue);
-      setHighlightedIndex(findHighlightedIndex({ ...props,
+      setHighlightedIndex(findHighlightedIndex({
+        ...props,
         items: filteredItems
       }, inputValue));
     }
   };
-
   const handleToggleClick = isOpen => event => {
     if (onToggleClick) {
       onToggleClick(event);
     }
-
     if (event.target === textInput.current && isOpen) {
       event.preventDownshiftDefault = true;
       event.persist();
     }
   };
-
-  const enabled = index.useFeatureFlag('enable-v11-release');
   const showWarning = !invalid && warn;
-  const className = cx__default["default"](`${prefix}--combo-box`, [enabled ? null : containerClassName], {
+  const className = cx__default["default"](`${prefix}--combo-box`, {
     [`${prefix}--list-box--up`]: direction === 'top',
     [`${prefix}--combo-box--warning`]: showWarning,
     [`${prefix}--combo-box--readonly`]: readOnly
@@ -228,28 +202,26 @@ const ComboBox = /*#__PURE__*/React__default["default"].forwardRef((props, ref)
   const helperClasses = cx__default["default"](`${prefix}--form__helper-text`, {
     [`${prefix}--form__helper-text--disabled`]: disabled
   });
-  const wrapperClasses = cx__default["default"](`${prefix}--list-box__wrapper`, [enabled ? containerClassName : null, {
+  const wrapperClasses = cx__default["default"](`${prefix}--list-box__wrapper`, [containerClassName, {
     [`${prefix}--list-box__wrapper--fluid--invalid`]: isFluid && invalid,
     [`${prefix}--list-box__wrapper--fluid--focus`]: isFluid && isFocused
   }]);
   const inputClasses = cx__default["default"](`${prefix}--text-input`, {
     [`${prefix}--text-input--empty`]: !inputValue,
     [`${prefix}--combo-box--input--focus`]: isFocused && !isFluid
-  }); // needs to be Capitalized for react to render it correctly
+  });
 
+  // needs to be Capitalized for react to render it correctly
   const ItemToElement = itemToElement;
   return /*#__PURE__*/React__default["default"].createElement(Downshift__default["default"], _rollupPluginBabelHelpers["extends"]({}, downshiftProps, {
     onChange: handleOnChange,
     onInputValueChange: handleOnInputValueChange,
     onStateChange: function () {
-      var _downshiftProps$onSta;
-
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
         args[_key] = arguments[_key];
       }
-
       handleOnStateChange(...args);
-      downshiftProps === null || downshiftProps === void 0 ? void 0 : (_downshiftProps$onSta = downshiftProps.onStateChange) === null || _downshiftProps$onSta === void 0 ? void 0 : _downshiftProps$onSta.call(downshiftProps, ...args);
+      downshiftProps?.onStateChange?.(...args);
     },
     inputValue: inputValue || '',
     itemToString: itemToString,
@@ -257,8 +229,6 @@ const ComboBox = /*#__PURE__*/React__default["default"].forwardRef((props, ref)
     inputId: id,
     selectedItem: selectedItem
   }), _ref4 => {
-    var _textInput$current;
-
     let {
       getInputProps,
       getItemProps,
@@ -273,7 +243,8 @@ const ComboBox = /*#__PURE__*/React__default["default"].forwardRef((props, ref)
       clearSelection,
       toggleMenu
     } = _ref4;
-    const rootProps = getRootProps( // @ts-ignore this is not supposed to be a required property
+    const rootProps = getRootProps(
+    // @ts-ignore this is not supposed to be a required property
     {}, {
       suppressRefError: true
     });
@@ -281,7 +252,6 @@ const ComboBox = /*#__PURE__*/React__default["default"].forwardRef((props, ref)
     const buttonProps = getToggleButtonProps({
       disabled: disabled || readOnly,
       onClick: handleToggleClick(isOpen),
-
       // When we moved the "root node" of Downshift to the <input> for
       // ARIA 1.2 compliance, we unfortunately hit this branch for the
       // "mouseup" event that downshift listens to:
@@ -296,27 +266,22 @@ const ComboBox = /*#__PURE__*/React__default["default"].forwardRef((props, ref)
           event.stopPropagation();
         }
       }
-
     });
     const inputProps = getInputProps({
       // Remove excess aria `aria-labelledby`. HTML <label for> provides this aria information.
       'aria-labelledby': null,
       disabled,
       placeholder,
-
       onClick() {
         toggleMenu();
       },
-
       onKeyDown: event => {
         if (match.match(event, keys.Space)) {
           event.stopPropagation();
         }
-
         if (match.match(event, keys.Enter) && !inputValue) {
           toggleMenu();
         }
-
         if (match.match(event, keys.Escape) && inputValue) {
           if (event.target === textInput.current && isOpen) {
             toggleMenu();
@@ -324,21 +289,17 @@ const ComboBox = /*#__PURE__*/React__default["default"].forwardRef((props, ref)
             event.persist();
           }
         }
-
         if (match.match(event, keys.Home)) {
           event.target.setSelectionRange(0, 0);
         }
-
         if (match.match(event, keys.End)) {
           event.target.setSelectionRange(event.target.value.length, event.target.value.length);
         }
       }
     });
-
     const handleFocus = evt => {
       setIsFocused(evt.type === 'focus');
     };
-
     const readOnlyEventHandlers = readOnly ? {
       onKeyDown: evt => {
         // This prevents the select from opening for the above keys
@@ -352,7 +313,7 @@ const ComboBox = /*#__PURE__*/React__default["default"].forwardRef((props, ref)
     }, titleText && /*#__PURE__*/React__default["default"].createElement(Text.Text, _rollupPluginBabelHelpers["extends"]({
       as: "label",
       className: titleClasses
-    }, labelProps), titleText), /*#__PURE__*/React__default["default"].createElement(index$1["default"], {
+    }, labelProps), titleText), /*#__PURE__*/React__default["default"].createElement(index["default"], {
       onFocus: handleFocus,
       onBlur: handleFocus,
       className: className,
@@ -376,7 +337,7 @@ const ComboBox = /*#__PURE__*/React__default["default"].forwardRef((props, ref)
       "aria-expanded": rootProps['aria-expanded'],
       "aria-haspopup": "listbox",
       "aria-controls": inputProps['aria-controls'],
-      title: textInput === null || textInput === void 0 ? void 0 : (_textInput$current = textInput.current) === null || _textInput$current === void 0 ? void 0 : _textInput$current.value
+      title: textInput?.current?.value
     }, inputProps, rest, readOnlyEventHandlers, {
       readOnly: readOnly,
       ref: mergeRefs["default"](textInput, ref),
@@ -394,20 +355,20 @@ const ComboBox = /*#__PURE__*/React__default["default"].forwardRef((props, ref)
     }), /*#__PURE__*/React__default["default"].createElement(ListBoxTrigger["default"], _rollupPluginBabelHelpers["extends"]({}, buttonProps, {
       isOpen: isOpen,
       translateWithId: translateWithId
-    }))), /*#__PURE__*/React__default["default"].createElement(index$1["default"].Menu, getMenuProps({
+    }))), /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, getMenuProps({
       'aria-label': deprecatedAriaLabel || ariaLabel
-    }), isOpen ? filterItems(items, itemToString, inputValue).map((item, index) => {
+    }), isOpen ? filterItems(items, itemToString, inputValue).map((item, index$1) => {
       const itemProps = getItemProps({
         item,
-        index,
+        index: index$1,
         ['aria-current']: selectedItem === item ? 'true' : 'false',
-        ['aria-selected']: highlightedIndex === index ? 'true' : 'false',
+        ['aria-selected']: highlightedIndex === index$1 ? 'true' : 'false',
         disabled: item.disabled
       });
-      return /*#__PURE__*/React__default["default"].createElement(index$1["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
+      return /*#__PURE__*/React__default["default"].createElement(index["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
         key: itemProps.id,
         isActive: selectedItem === item,
-        isHighlighted: highlightedIndex === index || (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) && (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) === item.id || false,
+        isHighlighted: highlightedIndex === index$1 || selectedItem?.id && selectedItem?.id === item.id || false,
         title: itemToElement ? item.text : itemToString ? itemToString(item) : undefined
       }, itemProps), itemToElement ?
       /*#__PURE__*/
@@ -431,86 +392,71 @@ ComboBox.propTypes = {
    * Specify a label to be read by screen readers on the container node
    */
   ['aria-label']: PropTypes__default["default"].string,
-
   /**
    * Deprecated, please use `aria-label` instead.
    * Specify a label to be read by screen readers on the container note.
    * 'aria-label' of the ListBox component.
    */
   ariaLabel: deprecate["default"](PropTypes__default["default"].string, 'This prop syntax has been deprecated. Please use the new `aria-label`.'),
-
   /**
    * An optional className to add to the container node
    */
   className: PropTypes__default["default"].string,
-
   /**
    * Specify the direction of the combobox dropdown. Can be either top or bottom.
    */
   direction: PropTypes__default["default"].oneOf(['top', 'bottom']),
-
   /**
    * Specify if the control should be disabled, or not
    */
   disabled: PropTypes__default["default"].bool,
-
   /**
    * Additional props passed to Downshift
    */
   // @ts-ignore
   downshiftProps: PropTypes__default["default"].shape(Downshift__default["default"].propTypes),
-
   /**
    * Provide helper text that is used alongside the control label for
    * additional help
    */
   helperText: PropTypes__default["default"].string,
-
   /**
    * Specify a custom `id` for the input
    */
   id: PropTypes__default["default"].string.isRequired,
-
   /**
    * Allow users to pass in an arbitrary item or a string (in case their items are an array of strings)
    * from their collection that are pre-selected
    */
   initialSelectedItem: PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].string, PropTypes__default["default"].number]),
-
   /**
    * Specify if the currently selected value is invalid.
    */
   invalid: PropTypes__default["default"].bool,
-
   /**
    * Message which is displayed if the value is invalid.
    */
   invalidText: PropTypes__default["default"].node,
-
   /**
    * Optional function to render items as custom components instead of strings.
    * Defaults to null and is overridden by a getter
    */
   itemToElement: PropTypes__default["default"].func,
-
   /**
    * Helper function passed to downshift that allows the library to render a
    * given item to a string label. By default, it extracts the `label` field
    * from a given item to serve as the item label in the list
    */
   itemToString: PropTypes__default["default"].func,
-
   /**
    * We try to stay as generic as possible here to allow individuals to pass
    * in a collection of whatever kind of data structure they prefer
    */
   items: PropTypes__default["default"].array.isRequired,
-
   /**
    * should use "light theme" (white background)?
    */
   light: deprecate["default"](PropTypes__default["default"].bool, 'The `light` prop for `Combobox` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'),
-
   /**
    * `onChange` is a utility for this controlled component to communicate to a
    * consuming component when a specific dropdown item is selected.
@@ -518,7 +464,6 @@ ComboBox.propTypes = {
    * @param {{ selectedItem }}
    */
   onChange: PropTypes__default["default"].func.isRequired,
-
   /**
    * Callback function to notify consumer when the text input changes.
    * This provides support to change available items based on the text.
@@ -526,71 +471,59 @@ ComboBox.propTypes = {
    * @param {string} inputText
    */
   onInputChange: PropTypes__default["default"].func,
-
   /**
    * Helper function passed to Downshift that allows the user to observe internal
    * state changes
    * `(changes, stateAndHelpers) => void`
    */
   onStateChange: PropTypes__default["default"].func,
-
   /**
    * Callback function that fires when the combobox menu toggle is clicked
    * `(evt) => void`
    * @param {MouseEvent} event
    */
   onToggleClick: PropTypes__default["default"].func,
-
   /**
    * Used to provide a placeholder text node before a user enters any input.
    * This is only present if the control has no items selected
    */
   placeholder: PropTypes__default["default"].string,
-
   /**
    * Is the ComboBox readonly?
    */
   readOnly: PropTypes__default["default"].bool,
-
   /**
    * For full control of the selection
    */
   selectedItem: PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].string, PropTypes__default["default"].number]),
-
   /**
    * Specify your own filtering logic by passing in a `shouldFilterItem`
    * function that takes in the current input and an item and passes back
    * whether or not the item should be filtered.
    */
   shouldFilterItem: PropTypes__default["default"].func,
-
   /**
    * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
    */
   size: ListBoxPropTypes.ListBoxSize,
-
   /**
    * Provide text to be used in a `<label>` element that is tied to the
    * combobox via ARIA attributes.
    */
   titleText: PropTypes__default["default"].node,
-
   /**
    * Specify a custom translation function that takes in a message identifier
    * and returns the localized string for the message
    */
   translateWithId: PropTypes__default["default"].func,
-
   /**
    * Currently supports either the default type, or an inline variant
    */
   type: ListBoxPropTypes.ListBoxType,
-
   /**
    * Specify whether the control is currently in warning state
    */
   warn: PropTypes__default["default"].bool,
-
   /**
    * Provide the text that is displayed when the control is in warning state
    */

package/lib/components/ComboBox/tools/filter.js

@@ -18,7 +18,6 @@ const defaultFilterItems = (items, _ref) => {
     if (!inputValue) {
       return true;
     }
-
     return itemToString(item).toLowerCase().includes(inputValue.toLowerCase());
   });
 };

package/lib/components/ComboButton/index.js

@@ -30,15 +30,12 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _ChevronDown;
 const spacing = 4; // top and bottom spacing between the button and the menu. in px
-
 const defaultTranslations = {
   'carbon.combo-button.additional-actions': 'Additional actions'
 };
-
 function defaultTranslateWithId(messageId) {
   return defaultTranslations[messageId];
 }
-
 const ComboButton = /*#__PURE__*/React__default["default"].forwardRef(function ComboButton(_ref, forwardRef) {
   let {
     children,
@@ -65,7 +62,6 @@ const ComboButton = /*#__PURE__*/React__default["default"].forwardRef(function C
     handleMousedown: handleTriggerMousedown,
     handleClose
   } = useAttachedMenu.useAttachedMenu(containerRef);
-
   function handleTriggerClick() {
     if (containerRef.current) {
       const {
@@ -75,17 +71,14 @@ const ComboButton = /*#__PURE__*/React__default["default"].forwardRef(function C
       hookOnClick();
     }
   }
-
   function handlePrimaryActionClick(e) {
     if (onClick) {
       onClick(e);
     }
   }
-
   function handleOpen() {
     menuRef.current.style.width = `${width}px`;
   }
-
   const containerClasses = cx__default["default"](`${prefix}--combo-button__container`, `${prefix}--combo-button__container--${size}`, {
     [`${prefix}--combo-button__container--open`]: open
   }, className);
@@ -128,37 +121,30 @@ ComboButton.propTypes = {
    * A collection of MenuItems to be rendered as additional actions for this ComboButton.
    */
   children: PropTypes__default["default"].node.isRequired,
-
   /**
    * Additional CSS class names.
    */
   className: PropTypes__default["default"].string,
-
   /**
    * Specify whether the ComboButton should be disabled, or not.
    */
   disabled: PropTypes__default["default"].bool,
-
   /**
    * Provide the label to be renderd on the primary action button.
    */
   label: PropTypes__default["default"].string.isRequired,
-
   /**
    * Provide an optional function to be called when the primary action element is clicked.
    */
   onClick: PropTypes__default["default"].func,
-
   /**
    * Specify the size of the buttons and menu.
    */
   size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg']),
-
   /**
    * Specify how the trigger tooltip should be aligned.
    */
   tooltipAlign: PropTypes__default["default"].oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
-
   /**
    * Optional method that takes in a message id and returns an
    * internationalized string.