@carbon/react 1.29.1 → 1.30.0

package/es/internal/useNoInteractiveChildren.js

@@ -9,18 +9,17 @@ import { useEffect } from 'react';
 
 function useNoInteractiveChildren(ref) {
   let message = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'component should have no interactive child nodes';
-
   if (process.env.NODE_ENV !== "production") {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
       const node = ref.current ? getInteractiveContent(ref.current) : false;
-
       if (node) {
         throw new Error(`Error: ${message}.\n\nInstead found: ${node.outerHTML}`);
       }
     });
   }
 }
+
 /**
  * Determines if a given DOM node has interactive content, or is itself
  * interactive. It returns the interactive node if one is found
@@ -28,26 +27,22 @@ function useNoInteractiveChildren(ref) {
  * @param {HTMLElement} node
  * @returns {HTMLElement}
  */
-
 function getInteractiveContent(node) {
   if (!node || !node.childNodes) {
     return null;
   }
-
   if (isFocusable(node)) {
     return node;
   }
-
   for (const childNode of node.childNodes) {
     const interactiveNode = getInteractiveContent(childNode);
-
     if (interactiveNode) {
       return interactiveNode;
     }
   }
-
   return null;
 }
+
 /**
  * Determines if the given element is focusable, or not
  *
@@ -55,28 +50,22 @@ function getInteractiveContent(node) {
  * @returns {boolean}
  * @see https://github.com/w3c/aria-practices/blob/0553bb51588ffa517506e2a1b2ca1422ed438c5f/examples/js/utils.js#L68
  */
-
 function isFocusable(element) {
   if (element.tabIndex < 0) {
     return false;
   }
-
   if (element.disabled) {
     return false;
   }
-
   switch (element.nodeName) {
     case 'A':
       return !!element.href && element.rel !== 'ignore';
-
     case 'INPUT':
       return element.type !== 'hidden';
-
     case 'BUTTON':
     case 'SELECT':
     case 'TEXTAREA':
       return true;
-
     default:
       return false;
   }

package/es/internal/useNormalizedInputProps.js

@@ -45,7 +45,6 @@ import { usePrefix } from './usePrefix.js';
  * @param {InputProps} props - The props passed to the component
  * @returns {NormalizedInputProps}
  */
-
 function useNormalizedInputProps(_ref) {
   let {
     id,
@@ -67,7 +66,6 @@ function useNormalizedInputProps(_ref) {
     icon: null,
     helperId: `${id}-helper-text`
   };
-
   if (normalizedProps.invalid) {
     normalizedProps.icon = WarningFilled;
     normalizedProps.validation = /*#__PURE__*/React__default.createElement("div", {
@@ -81,7 +79,6 @@ function useNormalizedInputProps(_ref) {
       id: normalizedProps.warnId
     }, warnText);
   }
-
   return normalizedProps;
 }
 

package/es/internal/useSavedCallback.js

@@ -16,7 +16,6 @@ import { useRef, useEffect, useCallback } from 'react';
  * @param {Function | undefined} callback
  * @returns {Function}
  */
-
 function useSavedCallback(callback) {
   const savedCallback = useRef(callback);
   useEffect(() => {

package/es/internal/warning.js

@@ -6,16 +6,13 @@
  */
 
 const emptyFunction = function () {};
-
 const warning = process.env.NODE_ENV !== "production" ? function warning(condition, format) {
   for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
     args[_key - 2] = arguments[_key];
   }
-
   if (format === undefined) {
     throw new Error('`warning(condition, format, ...args)` requires a warning ' + 'format argument');
   }
-
   if (!condition) {
     let index = 0;
     const message = format.replace(/%s/g, () => {

package/es/internal/wrapFocus.js

@@ -13,15 +13,14 @@ import { DOCUMENT_POSITION_BROAD_PRECEDING, selectorTabbable, DOCUMENT_POSITION_
  * @param {string[]} selectorsFloatingMenus The CSS selectors that matches floating menus.
  * @returns {boolean} `true` of the given `node` is in a floating menu.
  */
-
 function elementOrParentIsFloatingMenu(node) {
   let selectorsFloatingMenus = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-
   if (node && typeof node.closest === 'function') {
     const allSelectorsFloatingMenus = [`.cds--overflow-menu-options`, `.cds--tooltip`, '.flatpickr-calendar', ...selectorsFloatingMenus];
     return allSelectorsFloatingMenus.some(selector => node.closest(selector));
   }
 }
+
 /**
  * Ensures the focus is kept in the given `modalNode`, implementing "focus-wrap" behavior.
  * @param {object} options The options.
@@ -32,8 +31,6 @@ function elementOrParentIsFloatingMenu(node) {
  * @param {Node} options.oldActiveNode The DOM node that previously had focus.
  * @param {Node} [options.selectorsFloatingMenus] The CSS selectors that matches floating menus.
  */
-
-
 function wrapFocus(_ref) {
   let {
     bodyNode,
@@ -43,13 +40,10 @@ function wrapFocus(_ref) {
     oldActiveNode,
     selectorsFloatingMenus
   } = _ref;
-
   if (bodyNode && currentActiveNode && oldActiveNode && !bodyNode.contains(currentActiveNode) && !elementOrParentIsFloatingMenu(currentActiveNode, selectorsFloatingMenus)) {
     const comparisonResult = oldActiveNode.compareDocumentPosition(currentActiveNode);
-
     if (currentActiveNode === startTrapNode || comparisonResult & DOCUMENT_POSITION_BROAD_PRECEDING) {
       const tabbable = findLast(bodyNode.querySelectorAll(selectorTabbable), elem => Boolean(elem.offsetParent));
-
       if (tabbable) {
         tabbable.focus();
       } else if (bodyNode !== oldActiveNode) {
@@ -57,7 +51,6 @@ function wrapFocus(_ref) {
       }
     } else if (currentActiveNode === endTrapNode || comparisonResult & DOCUMENT_POSITION_BROAD_FOLLOWING) {
       const tabbable = Array.prototype.find.call(bodyNode.querySelectorAll(selectorTabbable), elem => Boolean(elem.offsetParent));
-
       if (tabbable) {
         tabbable.focus();
       } else if (bodyNode !== oldActiveNode) {

package/es/prop-types/deprecate.js

@@ -13,21 +13,18 @@ function deprecate(propType, message) {
     if (props[propName] === undefined) {
       return;
     }
-
     if (!didWarnAboutDeprecation[componentName] || !didWarnAboutDeprecation[componentName][propName]) {
-      didWarnAboutDeprecation[componentName] = { ...didWarnAboutDeprecation[componentName],
+      didWarnAboutDeprecation[componentName] = {
+        ...didWarnAboutDeprecation[componentName],
         [propName]: true
       };
       process.env.NODE_ENV !== "production" ? warning(false, message || `The prop \`${propName}\` has been deprecated for the ` + `${componentName} component. It will be removed in the next major ` + `release`) : void 0;
     }
-
     for (var _len = arguments.length, rest = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
       rest[_key - 3] = arguments[_key];
     }
-
     return propType(props, propName, componentName, ...rest);
   }
-
   return checker;
 }
 

package/es/prop-types/isRequiredOneOf.js

@@ -13,20 +13,17 @@
  */
 function isRequiredOneOf(propTypes) {
   const names = Object.keys(propTypes);
-
   const checker = propType => function (props, propName, componentName) {
     if (process.env.NODE_ENV !== "production" && names.every(name => typeof props[name] === 'undefined')) {
       return new Error(`${componentName} requires one of the following props: ${names.join(', ')}`);
     }
-
     for (var _len = arguments.length, rest = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
       rest[_key - 3] = arguments[_key];
     }
-
     return propType(props, propName, componentName, ...rest);
   };
-
-  return names.reduce((o, name) => ({ ...o,
+  return names.reduce((o, name) => ({
+    ...o,
     [name]: checker(propTypes[name])
   }), {});
 }

package/es/prop-types/requiredIfGivenPropIsTruthy.js

@@ -17,11 +17,9 @@ function requiredIfGivenPropIsTruthy(name, propType) {
     if (process.env.NODE_ENV !== "production" && props[name] == true && props[propName] == null) {
       return new Error(`You must provide a value for \`${propName}\` in \`${componentName}\` if \`${name}\` exists.`);
     }
-
     for (var _len = arguments.length, rest = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
       rest[_key - 3] = arguments[_key];
     }
-
     return propType(props, propName, componentName, ...rest);
   };
 }

package/es/tools/array.js

@@ -15,17 +15,14 @@ function equals(arr1, arr2) {
   if (!Array.isArray(arr1) || !Array.isArray(arr2) || arr1.length !== arr2.length) {
     return false;
   }
-
   if (arr1 === arr2) {
     return true;
   }
-
   for (let i = 0; i < arr1.length; i++) {
     if (arr1[i] !== arr2[i]) {
       return false;
     }
   }
-
   return true;
 }
 

package/es/tools/events.js

@@ -25,14 +25,11 @@ const composeEventHandlers = fns => function (event) {
   for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
     args[_key - 1] = arguments[_key];
   }
-
   for (let i = 0; i < fns.length; i++) {
     if (event.defaultPrevented) {
       break;
     }
-
     const fn = fns[i];
-
     if (typeof fn === 'function') {
       fn(event, ...args);
     }

package/es/tools/mergeRefs.js

@@ -13,7 +13,6 @@ const mergeRefs = function () {
   for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
     refs[_key] = arguments[_key];
   }
-
   return el => {
     refs.forEach(ref => {
       // https://github.com/facebook/react/issues/13029#issuecomment-410002316
@@ -25,7 +24,6 @@ const mergeRefs = function () {
     });
   };
 };
-
 var mergeRefs$1 = mergeRefs;
 
 export { mergeRefs$1 as default };

package/es/tools/wrapComponent.js

@@ -14,14 +14,12 @@ import { usePrefix } from '../internal/usePrefix.js';
  * @param {{ name: string, type: string, className?: string | (prefix: string) => string }} props
  * @returns
  */
-
 const wrapComponent = _ref => {
   let {
     name,
     className: getClassName,
     type
   } = _ref;
-
   /**
    *
    * @param {{ className?: string, [x: string]: any}} param0
@@ -34,21 +32,20 @@ const wrapComponent = _ref => {
     } = _ref2;
     const prefix = usePrefix();
     const componentClass = cx(typeof getClassName === 'function' ? getClassName(prefix) : getClassName, baseClassName);
-    return /*#__PURE__*/React__default.createElement(type, { ...other,
+    return /*#__PURE__*/React__default.createElement(type, {
+      ...other,
       // Prevent Weird quirk where `cx` will evaluate to an empty string, '',
       // and so we have empty `class` attributes in the resulting markup
       // eslint-disable-next-line no-extra-boolean-cast
       className: !!componentClass ? componentClass : undefined
     });
   }
-
   Component.displayName = name;
   Component.propTypes = {
     className: PropTypes.string
   };
   return Component;
 };
-
 var wrapComponent$1 = wrapComponent;
 
 export { wrapComponent$1 as default };

package/lib/_virtual/_rollupPluginBabelHelpers.js

@@ -10,6 +10,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value: value,
@@ -20,26 +21,38 @@ function _defineProperty(obj, key, value) {
   } else {
     obj[key] = value;
   }
-
   return obj;
 }
-
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
-
     return target;
   };
   return _extends.apply(this, arguments);
 }
+function _toPrimitive(input, hint) {
+  if (typeof input !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (typeof res !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return typeof key === "symbol" ? key : String(key);
+}
 
 exports.defineProperty = _defineProperty;
 exports["extends"] = _extends;
+exports.toPrimitive = _toPrimitive;
+exports.toPropertyKey = _toPropertyKey;

package/lib/components/Accordion/Accordion.Skeleton.js

@@ -24,7 +24,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _SkeletonText, _SkeletonText2, _SkeletonText3;
-
 function AccordionSkeleton(_ref) {
   let {
     align,
@@ -64,28 +63,23 @@ function AccordionSkeleton(_ref) {
     key: i
   })));
 }
-
 AccordionSkeleton.propTypes = {
   /**
    * Specify the alignment of the accordion heading title and chevron.
    */
   align: PropTypes__default["default"].oneOf(['start', 'end']),
-
   /**
    * Specify an optional className to add.
    */
   className: PropTypes__default["default"].string,
-
   /**
    * Set number of items to render
    */
   count: PropTypes__default["default"].number,
-
   /**
    * Specify whether an individual AccordionItem should be flush, default is false
    */
   isFlush: PropTypes__default["default"].bool,
-
   /**
    * `false` to not display the first item opened
    */
@@ -96,7 +90,6 @@ AccordionSkeleton.defaultProps = {
   count: 4,
   align: 'end'
 };
-
 function AccordionSkeletonItem() {
   const prefix = usePrefix.usePrefix();
   return /*#__PURE__*/React__default["default"].createElement("li", {

package/lib/components/Accordion/Accordion.js

@@ -14,32 +14,12 @@ var cx = require('classnames');
 var usePrefix = require('../../internal/usePrefix.js');
 var PropTypes = require('prop-types');
 var React = require('react');
-var FeatureFlags = require('@carbon/feature-flags');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n["default"] = e;
-  return Object.freeze(n);
-}
-
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
 
 function Accordion(_ref) {
   let {
@@ -65,37 +45,31 @@ function Accordion(_ref) {
     });
   }) : children);
 }
-
 Accordion.propTypes = {
   /**
    * Specify the alignment of the accordion heading title and chevron.
    */
   align: PropTypes__default["default"].oneOf(['start', 'end']),
-
   /**
    * Pass in the children that will be rendered within the Accordion
    */
   children: PropTypes__default["default"].node,
-
   /**
    * Specify an optional className to be applied to the container node
    */
   className: PropTypes__default["default"].string,
-
   /**
    * Specify whether an individual AccordionItem should be disabled
    */
   disabled: PropTypes__default["default"].bool,
-
   /**
    * Specify whether Accordion text should be flush, default is false, does not work with align="start"
    */
   isFlush: PropTypes__default["default"].bool,
-
   /**
    * Specify the size of the Accordion. Currently supports the following:
    */
-  size: FeatureFlags__namespace.enabled('enable-v11-release') ? PropTypes__default["default"].oneOf(['sm', 'md', 'lg']) : PropTypes__default["default"].oneOf(['sm', 'md', 'lg', 'xl'])
+  size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg'])
 };
 
 exports["default"] = Accordion;

package/lib/components/Accordion/AccordionItem.js

@@ -31,7 +31,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 const defaultRenderToggle = props => /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
   type: "button"
 }, props));
-
 function AccordionItem(_ref) {
   let {
     children,
@@ -65,15 +64,14 @@ function AccordionItem(_ref) {
     setAnimation(isOpen ? 'collapsing' : 'expanding');
     setIsOpen(open);
     setPrevIsOpen(open);
-  } // When the AccordionItem heading is clicked, toggle the open state of the
-  // panel
-
+  }
 
+  // When the AccordionItem heading is clicked, toggle the open state of the
+  // panel
   function onClick(event) {
     const nextValue = !isOpen;
     setAnimation(isOpen ? 'collapsing' : 'expanding');
     setIsOpen(nextValue);
-
     if (onHeadingClick) {
       // TODO: normalize signature, potentially:
       // onHeadingClick :: (event: Event, state: { isOpen: Boolean }) => any
@@ -82,23 +80,20 @@ function AccordionItem(_ref) {
         event
       });
     }
-  } // If the AccordionItem is open, and the user hits the ESC key, then close it
-
+  }
 
+  // If the AccordionItem is open, and the user hits the ESC key, then close it
   function onKeyDown(event) {
     if (isOpen && match.match(event, keys.Escape)) {
       setIsOpen(false);
     }
   }
-
   function handleAnimationEnd(event) {
     if (rest.handleAnimationEnd) {
       rest.handleAnimationEnd(event);
     }
-
     setAnimation('');
   }
-
   return /*#__PURE__*/React__default["default"].createElement("li", _rollupPluginBabelHelpers["extends"]({
     className: className
   }, rest, {
@@ -121,50 +116,41 @@ function AccordionItem(_ref) {
     className: `${prefix}--accordion__content`
   }, children));
 }
-
 AccordionItem.propTypes = {
   /**
    * Provide the contents of your AccordionItem
    */
   children: PropTypes__default["default"].node,
-
   /**
    * Specify an optional className to be applied to the container node
    */
   className: PropTypes__default["default"].string,
-
   /**
    * Specify whether an individual AccordionItem should be disabled
    */
   disabled: PropTypes__default["default"].bool,
-
   /**
    * The handler of the massaged `click` event.
    */
   onClick: PropTypes__default["default"].func,
-
   /**
    * The handler of the massaged `click` event on the heading.
    */
   onHeadingClick: PropTypes__default["default"].func,
-
   /**
    * `true` to open the expand.
    */
   open: PropTypes__default["default"].bool,
-
   /**
    * The callback function to render the expand button.
    * Can be a React component class.
    */
   renderExpando: deprecate["default"](PropTypes__default["default"].func, 'The `renderExpando` prop has been deprecated and will be removed in the next major release of Carbon. Use the `renderToggle` prop instead.'),
-
   /**
    * The callback function to render the expand button.
    * Can be a React component class.
    */
   renderToggle: PropTypes__default["default"].func,
-
   /**
    * The accordion title.
    */

package/lib/components/AspectRatio/AspectRatio.js

@@ -27,7 +27,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  * This is often useful alongside our grid components, or for media assets like
  * images or videos.
  */
-
 function AspectRatio(_ref) {
   let {
     as: BaseComponent = 'div',
@@ -42,7 +41,6 @@ function AspectRatio(_ref) {
     className: className
   }, rest), children);
 }
-
 AspectRatio.propTypes = {
   /**
    * Provide a custom component or string to be rendered as the outermost node
@@ -54,17 +52,14 @@ AspectRatio.propTypes = {
    * ```
    */
   as: PropTypes__default["default"].elementType,
-
   /**
    * Specify the content that will be placed in the aspect ratio
    */
   children: PropTypes__default["default"].node,
-
   /**
    * Specify a class name for the outermost node of the component
    */
   className: PropTypes__default["default"].string,
-
   /**
    * Specify the ratio to be used by the aspect ratio container. This will
    * determine what aspect ratio your content will be displayed in.

package/lib/components/Breadcrumb/Breadcrumb.Skeleton.js

@@ -22,7 +22,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _Item, _Item2, _Item3;
-
 function Item() {
   const prefix = usePrefix.usePrefix();
   return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -31,7 +30,6 @@ function Item() {
     className: `${prefix}--link`
   }, "\xA0"));
 }
-
 function BreadcrumbSkeleton(_ref) {
   let {
     className,
@@ -43,7 +41,6 @@ function BreadcrumbSkeleton(_ref) {
     className: classes
   }, rest), _Item || (_Item = /*#__PURE__*/React__default["default"].createElement(Item, null)), _Item2 || (_Item2 = /*#__PURE__*/React__default["default"].createElement(Item, null)), _Item3 || (_Item3 = /*#__PURE__*/React__default["default"].createElement(Item, null)));
 }
-
 BreadcrumbSkeleton.propTypes = {
   /**
    * Specify an optional className to add.

package/lib/components/Breadcrumb/Breadcrumb.js

@@ -48,17 +48,14 @@ Breadcrumb.propTypes = {
    * Specify the label for the breadcrumb container
    */
   'aria-label': PropTypes__default["default"].string,
-
   /**
    * Pass in the BreadcrumbItem's for your Breadcrumb
    */
   children: PropTypes__default["default"].node,
-
   /**
    * Specify an optional className to be applied to the container node
    */
   className: PropTypes__default["default"].string,
-
   /**
    * Optional prop to omit the trailing slash for the breadcrumbs
    */