@carbon/react 1.27.0 → 1.28.0-rc.0

package/es/internal/Selection.js

@@ -5,22 +5,24 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray, inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, defineProperty as _defineProperty, assertThisInitialized as _assertThisInitialized, createClass as _createClass } from '../_virtual/_rollupPluginBabelHelpers.js';
+import { defineProperty as _defineProperty } from '../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useRef, useState, useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import isEqual from 'lodash.isequal';
 
 function callOnChangeHandler(_ref) {
-  var isControlled = _ref.isControlled,
-      isMounted = _ref.isMounted,
-      onChangeHandlerControlled = _ref.onChangeHandlerControlled,
-      onChangeHandlerUncontrolled = _ref.onChangeHandlerUncontrolled,
-      selectedItems = _ref.selectedItems;
+  let {
+    isControlled,
+    isMounted,
+    onChangeHandlerControlled,
+    onChangeHandlerUncontrolled,
+    selectedItems
+  } = _ref;
 
   if (isControlled) {
     if (isMounted && onChangeHandlerControlled) {
       onChangeHandlerControlled({
-        selectedItems: selectedItems
+        selectedItems
       });
     }
   } else {
@@ -29,38 +31,34 @@ function callOnChangeHandler(_ref) {
 }
 
 function useSelection(_ref2) {
-  var disabled = _ref2.disabled,
-      onChange = _ref2.onChange,
-      _ref2$initialSelected = _ref2.initialSelectedItems,
-      initialSelectedItems = _ref2$initialSelected === void 0 ? [] : _ref2$initialSelected,
-      controlledItems = _ref2.selectedItems;
-  var isMounted = useRef(false);
-  var savedOnChange = useRef(onChange);
-
-  var _useState = useState(initialSelectedItems),
-      _useState2 = _slicedToArray(_useState, 2),
-      uncontrolledItems = _useState2[0],
-      setUncontrolledItems = _useState2[1];
-
-  var isControlled = !!controlledItems;
-  var selectedItems = isControlled ? controlledItems : uncontrolledItems;
-  var onItemChange = useCallback(function (item) {
+  let {
+    disabled,
+    onChange,
+    initialSelectedItems = [],
+    selectedItems: controlledItems
+  } = _ref2;
+  const isMounted = useRef(false);
+  const savedOnChange = useRef(onChange);
+  const [uncontrolledItems, setUncontrolledItems] = useState(initialSelectedItems);
+  const isControlled = !!controlledItems;
+  const selectedItems = isControlled ? controlledItems : uncontrolledItems;
+  const onItemChange = useCallback(item => {
     if (disabled) {
       return;
     }
 
-    var selectedIndex;
-    selectedItems.forEach(function (selectedItem, index) {
+    let selectedIndex;
+    selectedItems.forEach((selectedItem, index) => {
       if (isEqual(selectedItem, item)) {
         selectedIndex = index;
       }
     });
-    var newSelectedItems;
+    let newSelectedItems;
 
     if (selectedIndex === undefined) {
       newSelectedItems = selectedItems.concat(item);
       callOnChangeHandler({
-        isControlled: isControlled,
+        isControlled,
         isMounted: isMounted.current,
         onChangeHandlerControlled: savedOnChange.current,
         onChangeHandlerUncontrolled: setUncontrolledItems,
@@ -71,156 +69,139 @@ function useSelection(_ref2) {
 
     newSelectedItems = removeAtIndex(selectedItems, selectedIndex);
     callOnChangeHandler({
-      isControlled: isControlled,
+      isControlled,
       isMounted: isMounted.current,
       onChangeHandlerControlled: savedOnChange.current,
       onChangeHandlerUncontrolled: setUncontrolledItems,
       selectedItems: newSelectedItems
     });
   }, [disabled, isControlled, selectedItems]);
-  var clearSelection = useCallback(function () {
+  const clearSelection = useCallback(() => {
     if (disabled) {
       return;
     }
 
     callOnChangeHandler({
-      isControlled: isControlled,
+      isControlled,
       isMounted: isMounted.current,
       onChangeHandlerControlled: savedOnChange.current,
       onChangeHandlerUncontrolled: setUncontrolledItems,
       selectedItems: []
     });
   }, [disabled, isControlled]);
-  useEffect(function () {
+  useEffect(() => {
     savedOnChange.current = onChange;
   }, [onChange]);
-  useEffect(function () {
+  useEffect(() => {
     if (isMounted.current && savedOnChange.current && !isControlled) {
       savedOnChange.current({
-        selectedItems: selectedItems
+        selectedItems
       });
     }
   }, [isControlled, selectedItems]);
-  useEffect(function () {
+  useEffect(() => {
     isMounted.current = true;
-    return function () {
+    return () => {
       isMounted.current = false;
     };
   }, []);
   return {
-    selectedItems: selectedItems,
-    onItemChange: onItemChange,
-    clearSelection: clearSelection
+    selectedItems,
+    onItemChange,
+    clearSelection
   };
 }
+class Selection extends React__default.Component {
+  constructor(props) {
+    super(props);
 
-var Selection = /*#__PURE__*/function (_React$Component) {
-  _inherits(Selection, _React$Component);
-
-  var _super = _createSuper(Selection);
-
-  function Selection(props) {
-    var _this;
-
-    _classCallCheck(this, Selection);
-
-    _this = _super.call(this, props);
-
-    _defineProperty(_assertThisInitialized(_this), "internalSetState", function (stateToSet, callback) {
-      return _this.setState(stateToSet, function () {
-        if (callback) {
-          callback();
-        }
+    _defineProperty(this, "internalSetState", (stateToSet, callback) => this.setState(stateToSet, () => {
+      if (callback) {
+        callback();
+      }
 
-        if (_this.props.onChange) {
-          _this.props.onChange(_this.state);
-        }
-      });
-    });
+      if (this.props.onChange) {
+        this.props.onChange(this.state);
+      }
+    }));
 
-    _defineProperty(_assertThisInitialized(_this), "handleClearSelection", function () {
-      if (_this.props.disabled) {
+    _defineProperty(this, "handleClearSelection", () => {
+      if (this.props.disabled) {
         return;
       }
 
-      _this.internalSetState({
+      this.internalSetState({
         selectedItems: []
       });
     });
 
-    _defineProperty(_assertThisInitialized(_this), "handleSelectItem", function (item) {
-      _this.internalSetState(function (state) {
-        return {
-          selectedItems: state.selectedItems.concat(item)
-        };
-      });
+    _defineProperty(this, "handleSelectItem", item => {
+      this.internalSetState(state => ({
+        selectedItems: state.selectedItems.concat(item)
+      }));
     });
 
-    _defineProperty(_assertThisInitialized(_this), "handleRemoveItem", function (index) {
-      _this.internalSetState(function (state) {
-        return {
-          selectedItems: removeAtIndex(state.selectedItems, index)
-        };
-      });
+    _defineProperty(this, "handleRemoveItem", index => {
+      this.internalSetState(state => ({
+        selectedItems: removeAtIndex(state.selectedItems, index)
+      }));
     });
 
-    _defineProperty(_assertThisInitialized(_this), "handleOnItemChange", function (item) {
-      if (_this.props.disabled) {
+    _defineProperty(this, "handleOnItemChange", item => {
+      if (this.props.disabled) {
         return;
       }
 
-      var selectedItems = _this.state.selectedItems;
-      var selectedIndex;
-      selectedItems.forEach(function (selectedItem, index) {
+      const {
+        selectedItems
+      } = this.state;
+      let selectedIndex;
+      selectedItems.forEach((selectedItem, index) => {
         if (isEqual(selectedItem, item)) {
           selectedIndex = index;
         }
       });
 
       if (selectedIndex === undefined) {
-        _this.handleSelectItem(item);
-
+        this.handleSelectItem(item);
         return;
       }
 
-      _this.handleRemoveItem(selectedIndex);
+      this.handleRemoveItem(selectedIndex);
     });
 
-    _this.state = {
+    this.state = {
       selectedItems: props.initialSelectedItems
     };
-    return _this;
   }
 
-  _createClass(Selection, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          children = _this$props.children,
-          render = _this$props.render;
-      var selectedItems = this.state.selectedItems;
-      var renderProps = {
-        selectedItems: selectedItems,
-        onItemChange: this.handleOnItemChange,
-        clearSelection: this.handleClearSelection
-      };
-
-      if (render !== undefined) {
-        return render(renderProps);
-      }
+  render() {
+    const {
+      children,
+      render
+    } = this.props;
+    const {
+      selectedItems
+    } = this.state;
+    const renderProps = {
+      selectedItems,
+      onItemChange: this.handleOnItemChange,
+      clearSelection: this.handleClearSelection
+    };
 
-      if (children !== undefined) {
-        return children(renderProps);
-      }
+    if (render !== undefined) {
+      return render(renderProps);
+    }
 
-      return null;
+    if (children !== undefined) {
+      return children(renderProps);
     }
-  }]);
 
-  return Selection;
-}(React__default.Component); // Generic utility for safely removing an element at a given index from an
-// array.
+    return null;
+  }
 
+} // Generic utility for safely removing an element at a given index from an
+// array.
 
 _defineProperty(Selection, "propTypes", {
   children: PropTypes.func,
@@ -234,8 +215,8 @@ _defineProperty(Selection, "defaultProps", {
   initialSelectedItems: []
 });
 
-var removeAtIndex = function removeAtIndex(array, index) {
-  var result = array.slice();
+const removeAtIndex = (array, index) => {
+  const result = array.slice();
   result.splice(index, 1);
   return result;
 };

package/es/internal/createClassWrapper.js

@@ -20,8 +20,8 @@ function createClassWrapper(Component) {
     return /*#__PURE__*/React__default.createElement(Component, props);
   }
 
-  var name = Component.displayName || Component.name;
-  ClassWrapper.displayName = "ClassWrapper(".concat(name, ")");
+  const name = Component.displayName || Component.name;
+  ClassWrapper.displayName = `ClassWrapper(${name})`;
   return ClassWrapper;
 }
 

package/es/internal/deprecateFieldOnObject.js

@@ -7,19 +7,21 @@
 
 import { warning } from './warning.js';
 
-var didWarnAboutDeprecation = {};
+const didWarnAboutDeprecation = {};
 
 function deprecateFieldOnObject(object, field, Component, message) {
   Object.defineProperty(object, field, {
     enumerable: true,
-    get: function get() {
+
+    get() {
       if (!didWarnAboutDeprecation[field]) {
-        process.env.NODE_ENV !== "production" ? warning(false, message || "The ".concat(field, " field has been deprecated on the ").concat(object.displayName, " object. ") + "Please import and use ".concat(Component.displayName || Component.name || 'the field', " directly.")) : void 0;
+        process.env.NODE_ENV !== "production" ? warning(false, message || `The ${field} field has been deprecated on the ${object.displayName} object. ` + `Please import and use ${Component.displayName || Component.name || 'the field'} directly.`) : void 0;
         didWarnAboutDeprecation[field] = true;
       }
 
       return Component;
     }
+
   });
 }
 

package/es/internal/environment.js

@@ -10,6 +10,6 @@
  *
  * @see https://github.com/facebook/fbjs/blob/4d1751311d3f67af2dcce2e40df8512a23c7b9c6/packages/fbjs/src/core/ExecutionEnvironment.js#L12
  */
-var canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
+const canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
 
 export { canUseDOM };

package/es/internal/focus/index.js

@@ -6,7 +6,7 @@
  */
 
 function focus(elementOrRef) {
-  var element = elementOrRef.current || elementOrRef;
+  const element = elementOrRef.current || elementOrRef;
 
   if (element && element.focus && document.activeElement !== element) {
     element.focus();

package/es/internal/keyboard/keys.js

@@ -5,68 +5,68 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-var Tab = {
+const Tab = {
   key: 'Tab',
   which: 9,
   keyCode: 9,
   code: 'Tab'
 };
-var Enter = {
+const Enter = {
   key: 'Enter',
   which: 13,
   keyCode: 13,
   code: 'Enter'
 };
-var Escape = {
+const Escape = {
   key: ['Escape', // IE11 Escape
   'Esc'],
   which: 27,
   keyCode: 27,
   code: 'Esc'
 };
-var Space = {
+const Space = {
   key: ' ',
   which: 32,
   keyCode: 32,
   code: 'Space'
 };
-var End = {
+const End = {
   key: 'End',
   which: 35,
   keyCode: 35,
   code: 'Numpad1'
 };
-var Home = {
+const Home = {
   key: 'Home',
   which: 36,
   keyCode: 36,
   code: 'Numpad7'
 };
-var ArrowLeft = {
+const ArrowLeft = {
   key: 'ArrowLeft',
   which: 37,
   keyCode: 37,
   code: 'ArrowLeft'
 };
-var ArrowUp = {
+const ArrowUp = {
   key: 'ArrowUp',
   which: 38,
   keyCode: 38,
   code: 'ArrowUp'
 };
-var ArrowRight = {
+const ArrowRight = {
   key: 'ArrowRight',
   which: 39,
   keyCode: 39,
   code: 'ArrowRight'
 };
-var ArrowDown = {
+const ArrowDown = {
   key: 'ArrowDown',
   which: 40,
   keyCode: 40,
   code: 'ArrowDown'
 };
-var Delete = {
+const Delete = {
   key: 'Delete',
   which: 8 ,
   keyCode: 8 ,

package/es/internal/keyboard/match.js

@@ -31,7 +31,7 @@
  * @returns {boolean}
  */
 function matches(event, keysToMatch) {
-  for (var i = 0; i < keysToMatch.length; i++) {
+  for (let i = 0; i < keysToMatch.length; i++) {
     if (match(event, keysToMatch[i])) {
       return true;
     }
@@ -59,11 +59,12 @@ function matches(event, keysToMatch) {
  */
 
 function match(eventOrCode) {
-  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-      key = _ref.key,
-      which = _ref.which,
-      keyCode = _ref.keyCode,
-      code = _ref.code;
+  let {
+    key,
+    which,
+    keyCode,
+    code
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
   if (typeof eventOrCode === 'string') {
     return eventOrCode === key;

package/es/internal/keyboard/navigation.js

@@ -24,7 +24,7 @@ import { match } from './match.js';
  * 	getNextIndex(keyCodes.RIGHT, 0, 4)
  */
 
-var getNextIndex = function getNextIndex(key, index, arrayLength) {
+const getNextIndex = (key, index, arrayLength) => {
   if (match(key, ArrowRight)) {
     return (index + 1) % arrayLength;
   }
@@ -38,24 +38,34 @@ var getNextIndex = function getNextIndex(key, index, arrayLength) {
  * that indicates `target` is located earlier than `node` in the document or `target` contains `node`.
  */
 
-var DOCUMENT_POSITION_BROAD_PRECEDING = // Checks `typeof Node` for `react-docgen`
+const DOCUMENT_POSITION_BROAD_PRECEDING = // Checks `typeof Node` for `react-docgen`
 typeof Node !== 'undefined' && Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_POSITION_CONTAINS;
 /**
  * A flag `node.compareDocumentPosition(target)` returns,
  * that indicates `target` is located later than `node` in the document or `node` contains `target`.
  */
 
-var DOCUMENT_POSITION_BROAD_FOLLOWING = // Checks `typeof Node` for `react-docgen`
+const DOCUMENT_POSITION_BROAD_FOLLOWING = // Checks `typeof Node` for `react-docgen`
 typeof Node !== 'undefined' && Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_CONTAINED_BY;
 /**
  * CSS selector that selects major nodes that are sequential-focusable.
  */
 
-var selectorTabbable = "\n  a[href], area[href], input:not([disabled]):not([tabindex='-1']),\n  button:not([disabled]):not([tabindex='-1']),select:not([disabled]):not([tabindex='-1']),\n  textarea:not([disabled]):not([tabindex='-1']),\n  iframe, object, embed, *[tabindex]:not([tabindex='-1']):not([disabled]), *[contenteditable=true]\n";
+const selectorTabbable = `
+  a[href], area[href], input:not([disabled]):not([tabindex='-1']),
+  button:not([disabled]):not([tabindex='-1']),select:not([disabled]):not([tabindex='-1']),
+  textarea:not([disabled]):not([tabindex='-1']),
+  iframe, object, embed, *[tabindex]:not([tabindex='-1']):not([disabled]), *[contenteditable=true]
+`;
 /**
  * CSS selector that selects major nodes that are click focusable
  */
 
-var selectorFocusable = "\n  a[href], area[href], input:not([disabled]),\n  button:not([disabled]),select:not([disabled]),\n  textarea:not([disabled]),\n  iframe, object, embed, *[tabindex]:not([disabled]), *[contenteditable=true]\n";
+const selectorFocusable = `
+  a[href], area[href], input:not([disabled]),
+  button:not([disabled]),select:not([disabled]),
+  textarea:not([disabled]),
+  iframe, object, embed, *[tabindex]:not([disabled]), *[contenteditable=true]
+`;
 
 export { DOCUMENT_POSITION_BROAD_FOLLOWING, DOCUMENT_POSITION_BROAD_PRECEDING, getNextIndex, selectorFocusable, selectorTabbable };

package/es/internal/useAnnouncer.js

@@ -6,10 +6,10 @@
  */
 
 function useAnnouncer(textCount, maxCount) {
-  var lastTen = maxCount - 10;
+  const lastTen = maxCount - 10;
 
   if (textCount >= lastTen) {
-    return "".concat(maxCount - textCount, " characters left.");
+    return `${maxCount - textCount} characters left.`;
   }
 }
 

package/es/internal/useAttachedMenu.js

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { useState } from 'react';
 
 /**
@@ -26,26 +25,19 @@ import { useState } from 'react';
  */
 
 function useAttachedMenu(anchor) {
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      open = _useState2[0],
-      setOpen = _useState2[1];
-
-  var _useState3 = useState([[-1, -1], [-1, -1]]),
-      _useState4 = _slicedToArray(_useState3, 2),
-      position = _useState4[0],
-      setPosition = _useState4[1];
+  const [open, setOpen] = useState(false);
+  const [position, setPosition] = useState([[-1, -1], [-1, -1]]);
 
   function openMenu() {
-    var anchorEl = (anchor === null || anchor === void 0 ? void 0 : anchor.current) || anchor;
+    const anchorEl = (anchor === null || anchor === void 0 ? void 0 : anchor.current) || anchor;
 
     if (anchorEl) {
-      var _anchorEl$getBounding = anchorEl.getBoundingClientRect(),
-          left = _anchorEl$getBounding.left,
-          top = _anchorEl$getBounding.top,
-          right = _anchorEl$getBounding.right,
-          bottom = _anchorEl$getBounding.bottom;
-
+      const {
+        left,
+        top,
+        right,
+        bottom
+      } = anchorEl.getBoundingClientRect();
       setPosition([[left, right], [top, bottom]]);
     }
 
@@ -73,11 +65,11 @@ function useAttachedMenu(anchor) {
   }
 
   return {
-    open: open,
+    open,
     x: position[0],
     y: position[1],
-    handleClick: handleClick,
-    handleMousedown: handleMousedown,
+    handleClick,
+    handleMousedown,
     handleClose: closeMenu
   };
 }

package/es/internal/useControllableState.js

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { useState, useRef, useEffect } from 'react';
 import { warning } from './warning.js';
 
@@ -32,25 +31,21 @@ import { warning } from './warning.js';
  */
 
 function useControllableState(_ref) {
-  var defaultValue = _ref.defaultValue,
-      _ref$name = _ref.name,
-      name = _ref$name === void 0 ? 'custom' : _ref$name,
-      onChange = _ref.onChange,
-      value = _ref.value;
-
-  var _useState = useState(value !== null && value !== void 0 ? value : defaultValue),
-      _useState2 = _slicedToArray(_useState, 2),
-      state = _useState2[0],
-      internalSetState = _useState2[1];
-
-  var controlled = useRef(null);
+  let {
+    defaultValue,
+    name = 'custom',
+    onChange,
+    value
+  } = _ref;
+  const [state, internalSetState] = useState(value ?? defaultValue);
+  const controlled = useRef(null);
 
   if (controlled.current === null) {
     controlled.current = value !== undefined;
   }
 
   function setState(stateOrUpdater) {
-    var value = typeof stateOrUpdater === 'function' ? stateOrUpdater(state) : stateOrUpdater;
+    const value = typeof stateOrUpdater === 'function' ? stateOrUpdater(state) : stateOrUpdater;
 
     if (controlled.current === false) {
       internalSetState(value);
@@ -61,8 +56,8 @@ function useControllableState(_ref) {
     }
   }
 
-  useEffect(function () {
-    var controlledValue = value !== undefined; // Uncontrolled -> Controlled
+  useEffect(() => {
+    const controlledValue = value !== undefined; // Uncontrolled -> Controlled
     // If the component prop is uncontrolled, the prop value should be undefined
 
     if (controlled.current === false && controlledValue) {