@carbon/react 1.29.1 → 1.30.0

package/es/_virtual/_rollupPluginBabelHelpers.js

@@ -6,6 +6,7 @@
  */
 
 function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value: value,
@@ -16,25 +17,35 @@ 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);
+}
 
-export { _defineProperty as defineProperty, _extends as extends };
+export { _defineProperty as defineProperty, _extends as extends, _toPrimitive as toPrimitive, _toPropertyKey as toPropertyKey };

package/es/components/Accordion/Accordion.Skeleton.js

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

package/es/components/Accordion/Accordion.js

@@ -10,7 +10,6 @@ import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 import PropTypes from 'prop-types';
 import React__default from 'react';
-import * as FeatureFlags from '@carbon/feature-flags';
 
 function Accordion(_ref) {
   let {
@@ -36,37 +35,31 @@ function Accordion(_ref) {
     });
   }) : children);
 }
-
 Accordion.propTypes = {
   /**
    * Specify the alignment of the accordion heading title and chevron.
    */
   align: PropTypes.oneOf(['start', 'end']),
-
   /**
    * Pass in the children that will be rendered within the Accordion
    */
   children: PropTypes.node,
-
   /**
    * Specify an optional className to be applied to the container node
    */
   className: PropTypes.string,
-
   /**
    * Specify whether an individual AccordionItem should be disabled
    */
   disabled: PropTypes.bool,
-
   /**
    * Specify whether Accordion text should be flush, default is false, does not work with align="start"
    */
   isFlush: PropTypes.bool,
-
   /**
    * Specify the size of the Accordion. Currently supports the following:
    */
-  size: FeatureFlags.enabled('enable-v11-release') ? PropTypes.oneOf(['sm', 'md', 'lg']) : PropTypes.oneOf(['sm', 'md', 'lg', 'xl'])
+  size: PropTypes.oneOf(['sm', 'md', 'lg'])
 };
 
 export { Accordion as default };

package/es/components/Accordion/AccordionItem.js

@@ -21,7 +21,6 @@ import { Escape } from '../../internal/keyboard/keys.js';
 const defaultRenderToggle = props => /*#__PURE__*/React__default.createElement("button", _extends({
   type: "button"
 }, props));
-
 function AccordionItem(_ref) {
   let {
     children,
@@ -55,15 +54,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
@@ -72,23 +70,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(event, Escape)) {
       setIsOpen(false);
     }
   }
-
   function handleAnimationEnd(event) {
     if (rest.handleAnimationEnd) {
       rest.handleAnimationEnd(event);
     }
-
     setAnimation('');
   }
-
   return /*#__PURE__*/React__default.createElement("li", _extends({
     className: className
   }, rest, {
@@ -111,50 +106,41 @@ function AccordionItem(_ref) {
     className: `${prefix}--accordion__content`
   }, children));
 }
-
 AccordionItem.propTypes = {
   /**
    * Provide the contents of your AccordionItem
    */
   children: PropTypes.node,
-
   /**
    * Specify an optional className to be applied to the container node
    */
   className: PropTypes.string,
-
   /**
    * Specify whether an individual AccordionItem should be disabled
    */
   disabled: PropTypes.bool,
-
   /**
    * The handler of the massaged `click` event.
    */
   onClick: PropTypes.func,
-
   /**
    * The handler of the massaged `click` event on the heading.
    */
   onHeadingClick: PropTypes.func,
-
   /**
    * `true` to open the expand.
    */
   open: PropTypes.bool,
-
   /**
    * The callback function to render the expand button.
    * Can be a React component class.
    */
   renderExpando: deprecate(PropTypes.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.func,
-
   /**
    * The accordion title.
    */

package/es/components/AspectRatio/AspectRatio.js

@@ -17,7 +17,6 @@ import { usePrefix } from '../../internal/usePrefix.js';
  * This is often useful alongside our grid components, or for media assets like
  * images or videos.
  */
-
 function AspectRatio(_ref) {
   let {
     as: BaseComponent = 'div',
@@ -32,7 +31,6 @@ function AspectRatio(_ref) {
     className: className
   }, rest), children);
 }
-
 AspectRatio.propTypes = {
   /**
    * Provide a custom component or string to be rendered as the outermost node
@@ -44,17 +42,14 @@ AspectRatio.propTypes = {
    * ```
    */
   as: PropTypes.elementType,
-
   /**
    * Specify the content that will be placed in the aspect ratio
    */
   children: PropTypes.node,
-
   /**
    * Specify a class name for the outermost node of the component
    */
   className: PropTypes.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/es/components/Breadcrumb/Breadcrumb.Skeleton.js

@@ -12,7 +12,6 @@ import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 
 var _Item, _Item2, _Item3;
-
 function Item() {
   const prefix = usePrefix();
   return /*#__PURE__*/React__default.createElement("div", {
@@ -21,7 +20,6 @@ function Item() {
     className: `${prefix}--link`
   }, "\xA0"));
 }
-
 function BreadcrumbSkeleton(_ref) {
   let {
     className,
@@ -33,7 +31,6 @@ function BreadcrumbSkeleton(_ref) {
     className: classes
   }, rest), _Item || (_Item = /*#__PURE__*/React__default.createElement(Item, null)), _Item2 || (_Item2 = /*#__PURE__*/React__default.createElement(Item, null)), _Item3 || (_Item3 = /*#__PURE__*/React__default.createElement(Item, null)));
 }
-
 BreadcrumbSkeleton.propTypes = {
   /**
    * Specify an optional className to add.

package/es/components/Breadcrumb/Breadcrumb.js

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

package/es/components/Breadcrumb/BreadcrumbItem.js

@@ -30,7 +30,6 @@ const BreadcrumbItem = /*#__PURE__*/React__default.forwardRef(function Breadcrum
     [`${prefix}--breadcrumb-item--current`]: isCurrentPage && ariaCurrent !== 'page',
     [customClassName]: !!customClassName
   });
-
   if (children.type && children.type.displayName !== undefined && children.type.displayName.includes('OverflowMenu')) {
     const horizontalOverflowIcon = /*#__PURE__*/React__default.createElement(OverflowMenuHorizontal, {
       className: `${prefix}--overflow-menu__icon`
@@ -46,7 +45,6 @@ const BreadcrumbItem = /*#__PURE__*/React__default.forwardRef(function Breadcrum
       renderIcon: () => horizontalOverflowIcon
     }));
   }
-
   if (typeof children === 'string') {
     return /*#__PURE__*/React__default.createElement("li", _extends({
       className: className,
@@ -58,7 +56,6 @@ const BreadcrumbItem = /*#__PURE__*/React__default.forwardRef(function Breadcrum
       className: `${prefix}--link`
     }, children));
   }
-
   return /*#__PURE__*/React__default.createElement("li", _extends({
     className: className,
     ref: ref
@@ -70,22 +67,18 @@ const BreadcrumbItem = /*#__PURE__*/React__default.forwardRef(function Breadcrum
 BreadcrumbItem.displayName = 'BreadcrumbItem';
 BreadcrumbItem.propTypes = {
   'aria-current': PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-
   /**
    * Pass in content that will be inside of the BreadcrumbItem
    */
   children: PropTypes.node,
-
   /**
    * Specify an optional className to be applied to the container node
    */
   className: PropTypes.string,
-
   /**
    * Optional string representing the link location for the BreadcrumbItem
    */
   href: PropTypes.string,
-
   /**
    * Provide if this breadcrumb item represents the current page
    */

package/es/components/Button/Button.Skeleton.js

@@ -10,14 +10,13 @@ import PropTypes from 'prop-types';
 import React__default from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
-import * as FeatureFlags from '@carbon/feature-flags';
 
 const ButtonSkeleton = _ref => {
   let {
     className,
     small = false,
     href,
-    size = FeatureFlags.enabled('enable-v11-release') ? 'lg' : 'default',
+    size = 'lg',
     ...rest
   } = _ref;
   const prefix = usePrefix();
@@ -42,25 +41,21 @@ const ButtonSkeleton = _ref => {
 
   return href ? anchor : button;
 };
-
 ButtonSkeleton.propTypes = {
   /**
    * Specify an optional className to add.
    */
   className: PropTypes.string,
-
   /**
    * Optionally specify an href for your Button to become an `<a>` element
    */
   href: PropTypes.string,
-
   /**
    * Specify the size of the button, from a list of available sizes.
    * For `default` buttons, this prop can remain unspecified or use `default`.
    * In the next major release of Carbon, `default`, `field`, and `small` will be removed
    */
-  size: FeatureFlags.enabled('enable-v11-release') ? PropTypes.oneOf(['sm', 'md', 'lg', 'xl', '2xl']) : PropTypes.oneOf(['default', 'field', 'small', 'sm', 'md', 'lg', 'xl', '2xl']),
-
+  size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl', '2xl']),
   /**
    * Specify whether the Button should be a small variant
    */

package/es/components/Button/Button.js

@@ -43,7 +43,6 @@ const Button = /*#__PURE__*/React__default.forwardRef(function Button(_ref, ref)
   } = _ref;
   const tooltipRef = useRef(null);
   const prefix = usePrefix();
-
   const handleClick = evt => {
     // Prevent clicks on the tooltip from triggering the button click event
     if (evt.target === tooltipRef.current) {
@@ -51,7 +50,6 @@ const Button = /*#__PURE__*/React__default.forwardRef(function Button(_ref, ref)
       return;
     }
   };
-
   const buttonClasses = cx(className, {
     [`${prefix}--btn`]: true,
     [`${prefix}--btn--sm`]: size === 'sm' && !isExpressive,
@@ -88,7 +86,6 @@ const Button = /*#__PURE__*/React__default.forwardRef(function Button(_ref, ref)
     href
   };
   let assistiveText;
-
   if (dangerButtonVariants.includes(kind)) {
     assistiveText = /*#__PURE__*/React__default.createElement("span", {
       id: assistiveId,
@@ -97,17 +94,16 @@ const Button = /*#__PURE__*/React__default.forwardRef(function Button(_ref, ref)
   } else {
     assistiveText = null;
   }
-
   if (as) {
     component = as;
-    otherProps = { ...otherProps,
+    otherProps = {
+      ...otherProps,
       ...anchorProps
     };
   } else if (href && !disabled) {
     component = 'a';
     otherProps = anchorProps;
   }
-
   const Button = /*#__PURE__*/React__default.createElement(component, {
     onMouseEnter,
     onMouseLeave,
@@ -118,28 +114,22 @@ const Button = /*#__PURE__*/React__default.forwardRef(function Button(_ref, ref)
     ...commonProps,
     ...otherProps
   }, assistiveText, children, buttonImage);
-
   if (hasIconOnly) {
     let align;
-
     if (tooltipPosition === 'top' || tooltipPosition === 'bottom') {
       if (tooltipAlignment === 'center') {
         align = tooltipPosition;
       }
-
       if (tooltipAlignment === 'end') {
         align = `${tooltipPosition}-right`;
       }
-
       if (tooltipAlignment === 'start') {
         align = `${tooltipPosition}-left`;
       }
     }
-
     if (tooltipPosition === 'right' || tooltipPosition === 'left') {
       align = tooltipPosition;
     }
-
     return /*#__PURE__*/React__default.createElement(IconButton, _extends({
       as: as,
       align: align,
@@ -153,7 +143,6 @@ const Button = /*#__PURE__*/React__default.forwardRef(function Button(_ref, ref)
       onClick: composeEventHandlers([onClick, handleClick])
     }, rest, commonProps, otherProps), iconOnlyImage ? iconOnlyImage : children);
   }
-
   return Button;
 });
 Button.displayName = 'Button';
@@ -163,37 +152,30 @@ Button.propTypes = {
    * Make sure to apply all props to the root node and render children appropriately
    */
   as: PropTypes.oneOfType([PropTypes.func, PropTypes.string, PropTypes.elementType]),
-
   /**
    * Specify the content of your Button
    */
   children: PropTypes.node,
-
   /**
    * Specify an optional className to be added to your Button
    */
   className: PropTypes.string,
-
   /**
    * Specify the message read by screen readers for the danger button variant
    */
   dangerDescription: PropTypes.string,
-
   /**
    * Specify whether the Button should be disabled, or not
    */
   disabled: PropTypes.bool,
-
   /**
    * Specify if the button is an icon-only button
    */
   hasIconOnly: PropTypes.bool,
-
   /**
    * Optionally specify an href for your Button to become an `<a>` element
    */
   href: PropTypes.string,
-
   /**
    * If specifying the `renderIcon` prop, provide a description for that icon that can
    * be read by screen readers
@@ -202,88 +184,72 @@ Button.propTypes = {
     if (props.renderIcon && !props.children && !props.iconDescription) {
       return new Error('renderIcon property specified without also providing an iconDescription property.');
     }
-
     return undefined;
   },
-
   /**
    * Specify whether the Button is expressive, or not
    */
   isExpressive: PropTypes.bool,
-
   /**
    * Specify whether the Button is currently selected. Only applies to the Ghost variant.
    */
   isSelected: PropTypes.bool,
-
   /**
    * Specify the kind of Button you want to create
    */
   kind: PropTypes.oneOf(ButtonKinds),
-
   /**
    * Provide an optional function to be called when the button element
    * loses focus
    */
   onBlur: PropTypes.func,
-
   /**
    * Provide an optional function to be called when the button element
    * is clicked
    */
   onClick: PropTypes.func,
-
   /**
    * Provide an optional function to be called when the button element
    * receives focus
    */
   onFocus: PropTypes.func,
-
   /**
    * Provide an optional function to be called when the mouse
    * enters the button element
    */
   onMouseEnter: PropTypes.func,
-
   /**
    * Provide an optional function to be called when the mouse
    * leaves the button element
    */
   onMouseLeave: PropTypes.func,
-
   /**
    * Optional prop to allow overriding the icon rendering.
    * Can be a React component class
    */
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-
   /**
    * Optional prop to specify the role of the Button
    */
   role: PropTypes.string,
-
   /**
    * Specify the size of the button, from the following list of sizes:
    */
   size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl', '2xl']),
-
   /**
    * Optional prop to specify the tabIndex of the Button
    */
   tabIndex: PropTypes.number,
-
   /**
    * Specify the alignment of the tooltip to the icon-only button.
    * Can be one of: start, center, or end.
    */
   tooltipAlignment: PropTypes.oneOf(['start', 'center', 'end']),
-
   /**
    * Specify the direction of the tooltip for icon-only buttons.
    * Can be either top, right, bottom, or left.
    */
   tooltipPosition: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
-
   /**
    * Optional prop to specify the type of the Button
    */

package/es/components/ButtonSet/ButtonSet.js

@@ -33,12 +33,10 @@ ButtonSet.propTypes = {
    * Specify the content of your ButtonSet
    */
   children: PropTypes.node,
-
   /**
    * Specify an optional className to be added to your ButtonSet
    */
   className: PropTypes.string,
-
   /**
    * Specify the button arrangement of the set (vertically stacked or
    * horizontal)

package/es/components/Checkbox/Checkbox.Skeleton.js

@@ -25,7 +25,6 @@ const CheckboxSkeleton = _ref => {
     className: `${prefix}--checkbox-label-text ${prefix}--skeleton`
   })));
 };
-
 CheckboxSkeleton.propTypes = {
   /**
    * Specify an optional className to add.