@carbon/react 1.29.1 → 1.30.0-rc.0

package/es/components/ComboBox/ComboBox.js

@@ -15,7 +15,6 @@ import { WarningFilled, WarningAltFilled, Checkmark } from '@carbon/icons-react'
 import ListBox from '../ListBox/index.js';
 import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
 import mergeRefs from '../../tools/mergeRefs.js';
-import { useFeatureFlag } from '../FeatureFlags/index.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import '../FluidForm/FluidForm.js';
@@ -31,12 +30,9 @@ const defaultItemToString = item => {
   if (typeof item === 'string') {
     return item;
   }
-
   return item && item.label;
 };
-
 const defaultShouldFilterItem = () => true;
-
 const getInputValue = _ref => {
   let {
     initialSelectedItem,
@@ -44,45 +40,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();
 const ComboBox = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   var _Text;
-
   const {
     ['aria-label']: ariaLabel,
     ariaLabel: deprecatedAriaLabel,
@@ -131,7 +116,6 @@ const ComboBox = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   const [prevSelectedItem, setPrevSelectedItem] = useState();
   const [doneInitialSelectedItem, setDoneInitialSelectedItem] = useState(false);
   const savedOnInputChange = useRef(onInputChange);
-
   if (!doneInitialSelectedItem || prevSelectedItem !== selectedItem) {
     setDoneInitialSelectedItem(true);
     setPrevSelectedItem(selectedItem);
@@ -142,13 +126,11 @@ const ComboBox = /*#__PURE__*/React__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({
@@ -156,11 +138,9 @@ const ComboBox = /*#__PURE__*/React__default.forwardRef((props, ref) => {
       });
     }
   };
-
   const handleOnInputValueChange = inputValue => {
     setInputValue(inputValue || '');
   };
-
   useEffect(() => {
     savedOnInputChange.current = onInputChange;
   }, [onInputChange]);
@@ -169,43 +149,37 @@ const ComboBox = /*#__PURE__*/React__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 = useFeatureFlag('enable-v11-release');
   const showWarning = !invalid && warn;
-  const className = cx(`${prefix}--combo-box`, [enabled ? null : containerClassName], {
+  const className = cx(`${prefix}--combo-box`, {
     [`${prefix}--list-box--up`]: direction === 'top',
     [`${prefix}--combo-box--warning`]: showWarning,
     [`${prefix}--combo-box--readonly`]: readOnly
@@ -217,28 +191,26 @@ const ComboBox = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   const helperClasses = cx(`${prefix}--form__helper-text`, {
     [`${prefix}--form__helper-text--disabled`]: disabled
   });
-  const wrapperClasses = cx(`${prefix}--list-box__wrapper`, [enabled ? containerClassName : null, {
+  const wrapperClasses = cx(`${prefix}--list-box__wrapper`, [containerClassName, {
     [`${prefix}--list-box__wrapper--fluid--invalid`]: isFluid && invalid,
     [`${prefix}--list-box__wrapper--fluid--focus`]: isFluid && isFocused
   }]);
   const inputClasses = cx(`${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.createElement(Downshift, _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,
@@ -246,8 +218,6 @@ const ComboBox = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     inputId: id,
     selectedItem: selectedItem
   }), _ref4 => {
-    var _textInput$current;
-
     let {
       getInputProps,
       getItemProps,
@@ -262,7 +232,8 @@ const ComboBox = /*#__PURE__*/React__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
     });
@@ -270,7 +241,6 @@ const ComboBox = /*#__PURE__*/React__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:
@@ -285,27 +255,22 @@ const ComboBox = /*#__PURE__*/React__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(event, Space)) {
           event.stopPropagation();
         }
-
         if (match(event, Enter) && !inputValue) {
           toggleMenu();
         }
-
         if (match(event, Escape) && inputValue) {
           if (event.target === textInput.current && isOpen) {
             toggleMenu();
@@ -313,21 +278,17 @@ const ComboBox = /*#__PURE__*/React__default.forwardRef((props, ref) => {
             event.persist();
           }
         }
-
         if (match(event, Home)) {
           event.target.setSelectionRange(0, 0);
         }
-
         if (match(event, 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
@@ -365,7 +326,7 @@ const ComboBox = /*#__PURE__*/React__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(textInput, ref),
@@ -396,7 +357,7 @@ const ComboBox = /*#__PURE__*/React__default.forwardRef((props, ref) => {
       return /*#__PURE__*/React__default.createElement(ListBox.MenuItem, _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 || selectedItem?.id && selectedItem?.id === item.id || false,
         title: itemToElement ? item.text : itemToString ? itemToString(item) : undefined
       }, itemProps), itemToElement ?
       /*#__PURE__*/
@@ -420,86 +381,71 @@ ComboBox.propTypes = {
    * Specify a label to be read by screen readers on the container node
    */
   ['aria-label']: PropTypes.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(PropTypes.string, 'This prop syntax has been deprecated. Please use the new `aria-label`.'),
-
   /**
    * An optional className to add to the container node
    */
   className: PropTypes.string,
-
   /**
    * Specify the direction of the combobox dropdown. Can be either top or bottom.
    */
   direction: PropTypes.oneOf(['top', 'bottom']),
-
   /**
    * Specify if the control should be disabled, or not
    */
   disabled: PropTypes.bool,
-
   /**
    * Additional props passed to Downshift
    */
   // @ts-ignore
   downshiftProps: PropTypes.shape(Downshift.propTypes),
-
   /**
    * Provide helper text that is used alongside the control label for
    * additional help
    */
   helperText: PropTypes.string,
-
   /**
    * Specify a custom `id` for the input
    */
   id: PropTypes.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.oneOfType([PropTypes.object, PropTypes.string, PropTypes.number]),
-
   /**
    * Specify if the currently selected value is invalid.
    */
   invalid: PropTypes.bool,
-
   /**
    * Message which is displayed if the value is invalid.
    */
   invalidText: PropTypes.node,
-
   /**
    * Optional function to render items as custom components instead of strings.
    * Defaults to null and is overridden by a getter
    */
   itemToElement: PropTypes.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.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.array.isRequired,
-
   /**
    * should use "light theme" (white background)?
    */
   light: deprecate(PropTypes.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.
@@ -507,7 +453,6 @@ ComboBox.propTypes = {
    * @param {{ selectedItem }}
    */
   onChange: PropTypes.func.isRequired,
-
   /**
    * Callback function to notify consumer when the text input changes.
    * This provides support to change available items based on the text.
@@ -515,71 +460,59 @@ ComboBox.propTypes = {
    * @param {string} inputText
    */
   onInputChange: PropTypes.func,
-
   /**
    * Helper function passed to Downshift that allows the user to observe internal
    * state changes
    * `(changes, stateAndHelpers) => void`
    */
   onStateChange: PropTypes.func,
-
   /**
    * Callback function that fires when the combobox menu toggle is clicked
    * `(evt) => void`
    * @param {MouseEvent} event
    */
   onToggleClick: PropTypes.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.string,
-
   /**
    * Is the ComboBox readonly?
    */
   readOnly: PropTypes.bool,
-
   /**
    * For full control of the selection
    */
   selectedItem: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.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.func,
-
   /**
    * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
    */
   size: ListBoxSize,
-
   /**
    * Provide text to be used in a `<label>` element that is tied to the
    * combobox via ARIA attributes.
    */
   titleText: PropTypes.node,
-
   /**
    * Specify a custom translation function that takes in a message identifier
    * and returns the localized string for the message
    */
   translateWithId: PropTypes.func,
-
   /**
    * Currently supports either the default type, or an inline variant
    */
   type: ListBoxType,
-
   /**
    * 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
    */

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

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

package/es/components/ComboButton/index.js

@@ -20,15 +20,12 @@ import { usePrefix } from '../../internal/usePrefix.js';
 
 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.forwardRef(function ComboButton(_ref, forwardRef) {
   let {
     children,
@@ -55,7 +52,6 @@ const ComboButton = /*#__PURE__*/React__default.forwardRef(function ComboButton(
     handleMousedown: handleTriggerMousedown,
     handleClose
   } = useAttachedMenu(containerRef);
-
   function handleTriggerClick() {
     if (containerRef.current) {
       const {
@@ -65,17 +61,14 @@ const ComboButton = /*#__PURE__*/React__default.forwardRef(function ComboButton(
       hookOnClick();
     }
   }
-
   function handlePrimaryActionClick(e) {
     if (onClick) {
       onClick(e);
     }
   }
-
   function handleOpen() {
     menuRef.current.style.width = `${width}px`;
   }
-
   const containerClasses = cx(`${prefix}--combo-button__container`, `${prefix}--combo-button__container--${size}`, {
     [`${prefix}--combo-button__container--open`]: open
   }, className);
@@ -118,37 +111,30 @@ ComboButton.propTypes = {
    * A collection of MenuItems to be rendered as additional actions for this ComboButton.
    */
   children: PropTypes.node.isRequired,
-
   /**
    * Additional CSS class names.
    */
   className: PropTypes.string,
-
   /**
    * Specify whether the ComboButton should be disabled, or not.
    */
   disabled: PropTypes.bool,
-
   /**
    * Provide the label to be renderd on the primary action button.
    */
   label: PropTypes.string.isRequired,
-
   /**
    * Provide an optional function to be called when the primary action element is clicked.
    */
   onClick: PropTypes.func,
-
   /**
    * Specify the size of the buttons and menu.
    */
   size: PropTypes.oneOf(['sm', 'md', 'lg']),
-
   /**
    * Specify how the trigger tooltip should be aligned.
    */
   tooltipAlign: PropTypes.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.