@carbon/react 1.36.0 → 1.37.0-rc.0

package/lib/components/MultiSelect/MultiSelect.js

@@ -33,7 +33,6 @@ var keys = require('../../internal/keyboard/keys.js');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-var Downshift__default = /*#__PURE__*/_interopDefaultLegacy(Downshift);
 var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
@@ -42,12 +41,16 @@ const noop = () => {};
 const getInstanceId = setupGetInstanceId["default"]();
 const {
   ItemClick,
-  MenuBlur,
-  MenuKeyDownArrowDown,
-  MenuKeyDownArrowUp,
-  MenuKeyDownEscape,
-  MenuKeyDownSpaceButton,
-  ToggleButtonClick
+  ToggleButtonBlur,
+  ToggleButtonKeyDownArrowDown,
+  ToggleButtonKeyDownArrowUp,
+  ToggleButtonKeyDownEnter,
+  ToggleButtonKeyDownEscape,
+  ToggleButtonKeyDownSpaceButton,
+  ItemMouseMove,
+  ToggleButtonClick,
+  ToggleButtonKeyDownHome,
+  ToggleButtonKeyDownEnd
 } = Downshift.useSelect.stateChangeTypes;
 const defaultItemToString = item => {
   if (typeof item === 'string') {
@@ -61,7 +64,7 @@ const defaultItemToString = item => {
   }
   return '';
 };
-const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function MultiSelect(_ref, ref) {
+const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
   let {
     className: containerClassName,
     id,
@@ -104,7 +107,6 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function M
   const {
     current: multiSelectInstanceId
   } = React.useRef(getInstanceId());
-  const [highlightedIndex, setHighlightedIndex] = React.useState();
   const [isFocused, setIsFocused] = React.useState(false);
   const [inputFocused, setInputFocused] = React.useState(false);
   const [isOpen, setIsOpen] = React.useState(open || false);
@@ -120,31 +122,46 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function M
     onChange,
     selectedItems: selected
   });
-  const {
-    getToggleButtonProps,
-    getLabelProps,
-    getMenuProps,
-    getItemProps,
-    selectedItem
-  } = Downshift.useSelect({
+  const selectProps = {
     ...downshiftProps,
-    highlightedIndex,
+    stateReducer,
     isOpen,
     itemToString: items => {
       return Array.isArray(items) && items.map(function (item) {
         return itemToString(item);
       }).join(', ') || '';
     },
-    onStateChange,
     selectedItem: controlledSelectedItems,
-    items
-  });
+    items,
+    isItemDisabled(item, _index) {
+      return item.disabled;
+    }
+  };
+  const {
+    getToggleButtonProps,
+    getLabelProps,
+    getMenuProps,
+    getItemProps,
+    selectedItem,
+    highlightedIndex
+  } = Downshift.useSelect(selectProps);
   const toggleButtonProps = getToggleButtonProps({
     onFocus: () => {
       setInputFocused(true);
     },
     onBlur: () => {
       setInputFocused(false);
+    },
+    onKeyDown: e => {
+      if (!disabled) {
+        if ((match.match(e, keys.Delete) || match.match(e, keys.Escape)) && !isOpen) {
+          clearSelection();
+          e.stopPropagation();
+        }
+        if ((match.match(e, keys.Space) || match.match(e, keys.ArrowDown) || match.match(e, keys.Enter)) && !isOpen) {
+          setIsOpenWrapper(true);
+        }
+      }
     }
   });
   const mergedRef = mergeRefs["default"](toggleButtonProps.ref, ref);
@@ -210,47 +227,54 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function M
   } else if (selectionFeedback === 'top-after-reopen') {
     sortOptions.selectedItems = topItems;
   }
-  function onStateChange(changes) {
-    if (changes.isOpen && !isOpen) {
-      setTopItems(controlledSelectedItems);
-    }
+  function stateReducer(state, actionAndChanges) {
     const {
+      changes,
+      props,
       type
+    } = actionAndChanges;
+    const {
+      highlightedIndex
     } = changes;
+    if (changes.isOpen && !isOpen) {
+      setTopItems(controlledSelectedItems);
+    }
     switch (type) {
       case ItemClick:
-      case MenuKeyDownSpaceButton:
+      case ToggleButtonKeyDownSpaceButton:
+      case ToggleButtonKeyDownEnter:
         if (changes.selectedItem === undefined) {
           break;
         }
         onItemChange(changes.selectedItem);
-        break;
-      case MenuKeyDownArrowDown:
-      case MenuKeyDownArrowUp:
-        setHighlightedIndex(changes.highlightedIndex);
-        break;
-      case MenuBlur:
-      case MenuKeyDownEscape:
+        return {
+          ...changes,
+          highlightedIndex: state.highlightedIndex
+        };
+      case ToggleButtonBlur:
+      case ToggleButtonKeyDownEscape:
         setIsOpenWrapper(false);
-        setHighlightedIndex(changes.highlightedIndex);
         break;
       case ToggleButtonClick:
         setIsOpenWrapper(changes.isOpen || false);
-        setHighlightedIndex(changes.highlightedIndex);
         break;
+      case ToggleButtonKeyDownArrowDown:
+      case ToggleButtonKeyDownArrowUp:
+      case ToggleButtonKeyDownHome:
+      case ToggleButtonKeyDownEnd:
+        if (highlightedIndex > -1) {
+          const itemArray = document.querySelectorAll(`li.${prefix}--list-box__menu-item[role="option"]`);
+          props.scrollIntoView(itemArray[highlightedIndex]);
+        }
+        return changes;
+      case ItemMouseMove:
+        return {
+          ...changes,
+          highlightedIndex: state.highlightedIndex
+        };
     }
+    return changes;
   }
-  const onKeyDown = e => {
-    if (!disabled) {
-      if (match.match(e, keys.Delete) || match.match(e, keys.Escape)) {
-        clearSelection();
-        e.stopPropagation();
-      }
-      if (match.match(e, keys.Space) || match.match(e, keys.ArrowDown)) {
-        setIsOpenWrapper(true);
-      }
-    }
-  };
   const multiSelectFieldWrapperClasses = cx__default["default"](`${prefix}--list-box__field--wrapper`, {
     [`${prefix}--list-box__field--wrapper--input-focused`]: inputFocused
   });
@@ -315,17 +339,14 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function M
     "aria-disabled": disabled || readOnly,
     "aria-describedby": !inline && !invalid && !warn && helperText ? helperId : undefined
   }, toggleButtonProps, {
-    ref: mergedRef,
-    onKeyDown: onKeyDown
+    ref: mergedRef
   }, readOnlyEventHandlers), /*#__PURE__*/React__default["default"].createElement("span", {
     id: fieldLabelId,
     className: `${prefix}--list-box__label`
   }, label), /*#__PURE__*/React__default["default"].createElement(index["default"].MenuIcon, {
     isOpen: isOpen,
     translateWithId: translateWithId
-  }))), /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, _rollupPluginBabelHelpers["extends"]({
-    "aria-multiselectable": "true"
-  }, getMenuProps()), isOpen &&
+  }))), /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, getMenuProps(), isOpen &&
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   sortItems(items, sortOptions).map((item, index$1) => {
     const isChecked = selectedItems.filter(selected => isEqual__default["default"](selected, item)).length > 0;
@@ -333,8 +354,7 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function M
       item,
       // we don't want Downshift to set aria-selected for us
       // we also don't want to set 'false' for reader verbosity's sake
-      ['aria-selected']: isChecked ? true : undefined,
-      disabled: item.disabled
+      ['aria-selected']: isChecked
     });
     const itemText = itemToString(item);
     return /*#__PURE__*/React__default["default"].createElement(index["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
@@ -342,7 +362,8 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function M
       isActive: isChecked,
       "aria-label": itemText,
       isHighlighted: highlightedIndex === index$1,
-      title: itemText
+      title: itemText,
+      disabled: itemProps['aria-disabled']
     }, itemProps), /*#__PURE__*/React__default["default"].createElement("div", {
       className: `${prefix}--checkbox-wrapper`
     }, /*#__PURE__*/React__default["default"].createElement("span", {
@@ -385,8 +406,7 @@ MultiSelect.propTypes = {
   /**
    * Additional props passed to Downshift
    */
-  // @ts-ignore
-  downshiftProps: PropTypes__default["default"].shape(Downshift__default["default"].propTypes),
+  downshiftProps: PropTypes__default["default"].object,
   /**
    * Provide helper text that is used alongside the control label for
    * additional help

package/lib/components/NumberInput/NumberInput.d.ts

@@ -128,5 +128,5 @@ export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInp
      */
     warnText?: ReactNode;
 }
-declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<unknown>>;
+declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;
 export { NumberInput };

package/lib/components/NumberInput/NumberInput.js

@@ -159,6 +159,22 @@ const NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function N
     [`${prefix}--number-input--fluid--disabled`]: isFluid && disabled
   });
   const Icon = normalizedProps.icon;
+  function handleStepperClick(event, direction) {
+    if (inputRef.current) {
+      direction === 'up' ? inputRef.current.stepUp() : inputRef.current.stepDown();
+      const state = {
+        value: Number(inputRef.current.value),
+        direction: direction
+      };
+      setValue(state.value);
+      if (onChange) {
+        onChange(event, state);
+      }
+      if (onClick) {
+        onClick(event, state);
+      }
+    }
+  }
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: outerElementClasses,
     onFocus: isFluid ? handleFocus : undefined,
@@ -214,19 +230,7 @@ const NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function N
     "aria-label": decrementNumLabel || iconDescription,
     className: `${prefix}--number__control-btn down-icon`,
     disabled: disabled || readOnly,
-    onClick: event => {
-      const state = {
-        value: clamp(max, min, parseInt(value) - step),
-        direction: 'down'
-      };
-      setValue(state.value);
-      if (onChange) {
-        onChange(event, state);
-      }
-      if (onClick) {
-        onClick(event, state);
-      }
-    },
+    onClick: event => handleStepperClick(event, 'down'),
     tabIndex: -1,
     title: decrementNumLabel || iconDescription,
     type: "button"
@@ -238,19 +242,7 @@ const NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function N
     "aria-label": incrementNumLabel || iconDescription,
     className: `${prefix}--number__control-btn up-icon`,
     disabled: disabled || readOnly,
-    onClick: event => {
-      const state = {
-        value: clamp(max, min, parseInt(value) + step),
-        direction: 'up'
-      };
-      setValue(state.value);
-      if (onChange) {
-        onChange(event, state);
-      }
-      if (onClick) {
-        onClick(event, state);
-      }
-    },
+    onClick: event => handleStepperClick(event, 'up'),
     tabIndex: -1,
     title: incrementNumLabel || iconDescription,
     type: "button"
@@ -477,23 +469,5 @@ function disableWheel(e) {
   e.preventDefault();
 }
 
-/**
- * Clamp the given value between the upper bound `max` and the lower bound `min`
- *
- * 16 digit min/max more precise than Infinity. Somewhere in 9 quadrillion,
- * there will be integer display issues at runtime. 9quad is a safe cutoff.
- * @param {number} max
- * @param {number} min
- * @param {number} value
- */
-const boundLimit = 9000000000000000; // 16 digit, 9 quadrillion
-
-function clamp() {
-  let max = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : boundLimit;
-  let min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : -boundLimit;
-  let value = arguments.length > 2 ? arguments[2] : undefined;
-  return Math.min(max, Math.max(min, value));
-}
-
 exports.NumberInput = NumberInput;
 exports.translationIds = translationIds;

package/lib/components/Slider/Slider.d.ts

@@ -300,6 +300,12 @@ export default class Slider extends PureComponent<SliderProps> {
      * @returns `val` if `max>=val>=min`; `min` if `val<min`; `max` if `val>max`.
      */
     clamp(val: any, min: any, max: any): number;
+    /**
+     * Takes a value and ensures it fits to the steps of the range
+     * @param value
+     * @returns value of the nearest step
+     */
+    nearestStepValue(value: any): number;
     /**
      * Sets up "drag" event handlers and calls `this.onDrag` in case dragging
      * started on somewhere other than the thumb without a corresponding "move"

package/lib/components/Slider/Slider.js

@@ -140,7 +140,7 @@ class Slider extends React.PureComponent {
         clientX
       });
       this.setState({
-        value,
+        value: this.nearestStepValue(value),
         left,
         isValid: true
       });
@@ -189,7 +189,7 @@ class Slider extends React.PureComponent {
         value: (delta > 0 ? Math.floor(this.state.value / (this.props.step ?? Slider.defaultProps.step)) * (this.props.step ?? Slider.defaultProps.step) : this.state.value) + delta
       });
       this.setState({
-        value,
+        value: this.nearestStepValue(value),
         left,
         isValid: true
       });
@@ -399,6 +399,21 @@ class Slider extends React.PureComponent {
   clamp(val, min, max) {
     return Math.max(min, Math.min(val, max));
   }
+
+  /**
+   * Takes a value and ensures it fits to the steps of the range
+   * @param value
+   * @returns value of the nearest step
+   */
+  nearestStepValue(value) {
+    const tempInput = document.createElement('input');
+    tempInput.type = 'range';
+    tempInput.min = `${this.props.min}`;
+    tempInput.max = `${this.props.max}`;
+    tempInput.step = `${this.props.step}`;
+    tempInput.value = `${value}`;
+    return parseFloat(tempInput.value);
+  }
   // syncs invalid state and prop
   static getDerivedStateFromProps(props, state) {
     const {

package/lib/components/TextArea/TextArea.js

@@ -69,7 +69,7 @@ const TextArea = /*#__PURE__*/React__default["default"].forwardRef((props, forwa
     id,
     onChange: evt => {
       if (!other.disabled && onChange) {
-        evt.persist();
+        evt?.persist?.();
         // delay textCount assignation to give the textarea element value time to catch up if is a controlled input
         setTimeout(() => {
           setTextCount(evt.target?.value?.length);

package/lib/components/Tile/Tile.js

@@ -82,12 +82,12 @@ const ClickableTile = /*#__PURE__*/React__default["default"].forwardRef(function
   const classes = cx__default["default"](`${prefix}--tile`, `${prefix}--tile--clickable`, clicked && `${prefix}--tile--is-clicked`, light && `${prefix}--tile--light`, className);
   const [isSelected, setIsSelected] = React.useState(clicked);
   function handleOnClick(evt) {
-    evt.persist();
+    evt?.persist?.();
     setIsSelected(!isSelected);
     onClick(evt);
   }
   function handleOnKeyDown(evt) {
-    evt.persist();
+    evt?.persist?.();
     if (match.matches(evt, [keys.Enter, keys.Space])) {
       evt.preventDefault();
       setIsSelected(!isSelected);
@@ -191,7 +191,7 @@ const SelectableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
   // TODO: rename to handleClick when handleClick prop is deprecated
   function handleOnClick(evt) {
     evt.preventDefault();
-    evt.persist();
+    evt?.persist?.();
     setIsSelected(!isSelected);
     clickHandler(evt);
     onChange(evt);
@@ -199,7 +199,7 @@ const SelectableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
 
   // TODO: rename to handleKeyDown when handleKeyDown prop is deprecated
   function handleOnKeyDown(evt) {
-    evt.persist();
+    evt?.persist?.();
     if (match.matches(evt, [keys.Enter, keys.Space])) {
       evt.preventDefault();
       setIsSelected(!isSelected);
@@ -345,7 +345,7 @@ const ExpandableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
     }
   }
   function handleClick(evt) {
-    evt.persist();
+    evt?.persist?.();
     setIsExpanded(!isExpanded);
     setMaxHeight();
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.36.0",
+  "version": "1.37.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -52,7 +52,7 @@
     "@carbon/telemetry": "0.1.0",
     "classnames": "2.3.2",
     "copy-to-clipboard": "^3.3.1",
-    "downshift": "5.2.1",
+    "downshift": "8.1.0",
     "flatpickr": "4.6.9",
     "invariant": "^2.2.3",
     "lodash.debounce": "^4.0.8",
@@ -138,5 +138,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "34d9b328b856918ec5a3bfc720f4b3ba3d45daf4"
+  "gitHead": "41aa48117e9c5ce799621dd4d3477a848ca655c9"
 }