@carbon/react 1.29.0 → 1.30.0-rc.0

package/lib/components/Grid/Column.js

@@ -58,7 +58,6 @@ function Column(_ref) {
     mode
   } = GridContext.useGridSettings();
   const prefix = usePrefix.usePrefix();
-
   if (mode === 'css-grid') {
     return /*#__PURE__*/React__default["default"].createElement(CSSGridColumn, _rollupPluginBabelHelpers["extends"]({
       as: BaseComponent,
@@ -70,18 +69,17 @@ function Column(_ref) {
       max: max
     }, rest), children);
   }
-
   const columnClassName = getClassNameForFlexGridBreakpoints([sm, md, lg, xlg, max], prefix);
   const className = cx__default["default"](customClassName, columnClassName, {
     [`${prefix}--col`]: columnClassName.length === 0
-  }); // cast as any to let TypeScript allow passing in attributes to base component
+  });
 
+  // cast as any to let TypeScript allow passing in attributes to base component
   const BaseComponentAsAny = BaseComponent;
   return /*#__PURE__*/React__default["default"].createElement(BaseComponentAsAny, _rollupPluginBabelHelpers["extends"]({
     className: className
   }, rest), children);
 }
-
 const percentSpanType = PropTypes__default["default"].oneOf(['25%', '50%', '75%', '100%']);
 const spanPropType = FeatureFlags__namespace.enabled('enable-css-grid') ? PropTypes__default["default"].oneOfType([PropTypes__default["default"].bool, PropTypes__default["default"].number, PropTypes__default["default"].shape({
   span: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, percentSpanType]),
@@ -97,17 +95,14 @@ Column.propTypes = {
    * Provide a custom element to render instead of the default <div>
    */
   as: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].elementType]),
-
   /**
    * Pass in content that will be rendered within the `Column`
    */
   children: PropTypes__default["default"].node,
-
   /**
    * Specify a custom className to be applied to the `Column`
    */
   className: PropTypes__default["default"].string,
-
   /**
    * Specify column span for the `lg` breakpoint (Default breakpoint up to 1312px)
    * This breakpoint supports 16 columns by default.
@@ -115,7 +110,6 @@ Column.propTypes = {
    * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
    */
   lg: spanPropType,
-
   /**
    * Specify column span for the `max` breakpoint. This breakpoint supports 16
    * columns by default.
@@ -123,7 +117,6 @@ Column.propTypes = {
    * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
    */
   max: spanPropType,
-
   /**
    * Specify column span for the `md` breakpoint (Default breakpoint up to 1056px)
    * This breakpoint supports 8 columns by default.
@@ -131,7 +124,6 @@ Column.propTypes = {
    * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
    */
   md: spanPropType,
-
   /**
    * Specify column span for the `sm` breakpoint (Default breakpoint up to 672px)
    * This breakpoint supports 4 columns by default.
@@ -139,7 +131,6 @@ Column.propTypes = {
    * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
    */
   sm: spanPropType,
-
   /**
    * Specify column span for the `xlg` breakpoint (Default breakpoint up to
    * 1584px) This breakpoint supports 16 columns by default.
@@ -148,7 +139,6 @@ Column.propTypes = {
    */
   xlg: spanPropType
 };
-
 function CSSGridColumn(_ref2) {
   let {
     as: BaseComponent = 'div',
@@ -172,23 +162,19 @@ function CSSGridColumn(_ref2) {
     className: className
   }, rest), children);
 }
-
 CSSGridColumn.propTypes = {
   /**
    * Provide a custom element to render instead of the default <div>
    */
   as: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].elementType]),
-
   /**
    * Pass in content that will be rendered within the `Column`
    */
   children: PropTypes__default["default"].node,
-
   /**
    * Specify a custom className to be applied to the `Column`
    */
   className: PropTypes__default["default"].string,
-
   /**
    * Specify column span for the `lg` breakpoint (Default breakpoint up to 1312px)
    * This breakpoint supports 16 columns by default.
@@ -196,7 +182,6 @@ CSSGridColumn.propTypes = {
    * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
    */
   lg: spanPropType,
-
   /**
    * Specify column span for the `max` breakpoint. This breakpoint supports 16
    * columns by default.
@@ -204,7 +189,6 @@ CSSGridColumn.propTypes = {
    * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
    */
   max: spanPropType,
-
   /**
    * Specify column span for the `md` breakpoint (Default breakpoint up to 1056px)
    * This breakpoint supports 8 columns by default.
@@ -212,7 +196,6 @@ CSSGridColumn.propTypes = {
    * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
    */
   md: spanPropType,
-
   /**
    * Specify column span for the `sm` breakpoint (Default breakpoint up to 672px)
    * This breakpoint supports 4 columns by default.
@@ -220,7 +203,6 @@ CSSGridColumn.propTypes = {
    * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
    */
   sm: spanPropType,
-
   /**
    * Specify constant column span, start,  or end values that will not change
    * based on breakpoint
@@ -230,7 +212,6 @@ CSSGridColumn.propTypes = {
     start: PropTypes__default["default"].number,
     end: PropTypes__default["default"].number
   })]),
-
   /**
    * Specify column span for the `xlg` breakpoint (Default breakpoint up to
    * 1584px) This breakpoint supports 16 columns by default.
@@ -240,6 +221,7 @@ CSSGridColumn.propTypes = {
   xlg: spanPropType
 };
 const breakpointNames = ['sm', 'md', 'lg', 'xlg', 'max'];
+
 /**
  * @typedef {object} Breakpoint
  * @property {boolean|number} [span]
@@ -251,39 +233,35 @@ const breakpointNames = ['sm', 'md', 'lg', 'xlg', 'max'];
  * @param {Array<boolean|number|Breakpoint>} breakpoints
  * @returns {string}
  */
-
 function getClassNameForBreakpoints(breakpoints, prefix) {
   const classNames = [];
-
   for (let i = 0; i < breakpoints.length; i++) {
     const breakpoint = breakpoints[i];
-
     if (breakpoint === undefined || breakpoint === null) {
       continue;
     }
+    const name = breakpointNames[i];
 
-    const name = breakpointNames[i]; // If our breakpoint is a boolean, the user has specified that the column
+    // If our breakpoint is a boolean, the user has specified that the column
     // should be "auto" at this size
-
     if (breakpoint === true) {
       classNames.push(`${prefix}--${name}:col-span-auto`);
       continue;
-    } // If our breakpoint is a string, the user has specified a percent
-    // they'd like this column to span.
-
+    }
 
+    // If our breakpoint is a string, the user has specified a percent
+    // they'd like this column to span.
     if (typeof breakpoint === 'string') {
       classNames.push(`${prefix}--${name}:col-span-${breakpoint.slice(0, -1)}`);
       continue;
-    } // If our breakpoint is a number, the user has specified the number of
-    // columns they'd like this column to span
-
+    }
 
+    // If our breakpoint is a number, the user has specified the number of
+    // columns they'd like this column to span
     if (typeof breakpoint === 'number') {
       classNames.push(`${prefix}--${name}:col-span-${breakpoint}`);
       continue;
     }
-
     if (typeof breakpoint === 'object') {
       const {
         span,
@@ -291,19 +269,15 @@ function getClassNameForBreakpoints(breakpoints, prefix) {
         start,
         end
       } = breakpoint;
-
       if (typeof offset === 'number' && offset > 0) {
         classNames.push(`${prefix}--${name}:col-start-${offset + 1}`);
       }
-
       if (typeof start === 'number') {
         classNames.push(`${prefix}--${name}:col-start-${start}`);
       }
-
       if (typeof end === 'number') {
         classNames.push(`${prefix}--${name}:col-end-${end}`);
       }
-
       if (typeof span === 'number') {
         classNames.push(`${prefix}--${name}:col-span-${span}`);
       } else if (typeof span === 'string') {
@@ -312,71 +286,60 @@ function getClassNameForBreakpoints(breakpoints, prefix) {
       }
     }
   }
-
   return classNames.join(' ');
 }
+
 /**
  * Build the appropriate className for the given set of breakpoints.
  * @param {Array<boolean|number|Breakpoint>} breakpoints
  * @returns {string}
  */
-
-
 function getClassNameForFlexGridBreakpoints(breakpoints, prefix) {
   const classNames = [];
-
   for (let i = 0; i < breakpoints.length; i++) {
     const breakpoint = breakpoints[i];
-
     if (breakpoint === undefined || breakpoint === null) {
       continue;
     }
+    const name = breakpointNames[i];
 
-    const name = breakpointNames[i]; // If our breakpoint is a boolean, the user has specified that the column
+    // If our breakpoint is a boolean, the user has specified that the column
     // should be "auto" at this size
-
     if (breakpoint === true) {
       classNames.push(`${prefix}--col-${name}`);
       continue;
-    } // If our breakpoint is a number, the user has specified the number of
-    // columns they'd like this column to span
-
+    }
 
+    // If our breakpoint is a number, the user has specified the number of
+    // columns they'd like this column to span
     if (typeof breakpoint === 'number') {
       classNames.push(`${prefix}--col-${name}-${breakpoint}`);
       continue;
     }
-
     if (typeof breakpoint === 'object') {
       const {
         span,
         offset
       } = breakpoint;
-
       if (typeof span === 'number') {
         classNames.push(`${prefix}--col-${name}-${span}`);
       }
-
       if (span === true) {
         classNames.push(`${prefix}--col-${name}`);
       }
-
       if (typeof offset === 'number') {
         classNames.push(`${prefix}--offset-${name}-${offset}`);
       }
     }
   }
-
   return classNames.join(' ');
 }
+
 /**
  * Build the appropriate className for a span value
  */
-
-
 function getClassNameForSpan(value, prefix) {
   const classNames = [];
-
   if (typeof value === 'number' || typeof value === 'string') {
     classNames.push(`${prefix}--col-span-${value}`);
   } else if (typeof value === 'object') {
@@ -385,20 +348,16 @@ function getClassNameForSpan(value, prefix) {
       start,
       end
     } = value;
-
     if (span !== undefined && span !== null) {
       classNames.push(`${prefix}--col-span-${span}`);
     }
-
     if (start !== undefined && start !== null) {
       classNames.push(`${prefix}--col-start-${start}`);
     }
-
     if (end !== undefined && end !== null) {
       classNames.push(`${prefix}--col-end-${end}`);
     }
   }
-
   return classNames.join('');
 }
 

package/lib/components/Grid/ColumnHang.js

@@ -33,25 +33,22 @@ function ColumnHang(_ref) {
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
-  const className = cx__default["default"](customClassName, `${prefix}--grid-column-hang`); // cast as any to let TypeScript allow passing in attributes to base component
-
+  const className = cx__default["default"](customClassName, `${prefix}--grid-column-hang`);
+  // cast as any to let TypeScript allow passing in attributes to base component
   const BaseComponentAsAny = BaseComponent;
   return /*#__PURE__*/React__default["default"].createElement(BaseComponentAsAny, _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: className
   }), children);
 }
-
 ColumnHang.propTypes = {
   /**
    * Provide a custom element to render instead of the default <div>
    */
   as: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].elementType]),
-
   /**
    * Pass in content that will be rendered within the `Grid`
    */
   children: PropTypes__default["default"].node,
-
   /**
    * Specify a custom className to be applied to the `Grid`
    */

package/lib/components/Grid/FlexGrid.js

@@ -38,8 +38,8 @@ function FlexGrid(_ref) {
     [`${prefix}--grid--condensed`]: condensed,
     [`${prefix}--grid--narrow`]: narrow,
     [`${prefix}--grid--full-width`]: fullWidth
-  }); // cast as any to let TypeScript allow passing in attributes to base component
-
+  });
+  // cast as any to let TypeScript allow passing in attributes to base component
   const BaseComponentAsAny = BaseComponent;
   return /*#__PURE__*/React__default["default"].createElement(GridContext.GridSettings, {
     mode: "flexbox",
@@ -48,34 +48,28 @@ function FlexGrid(_ref) {
     className: className
   }, rest), children));
 }
-
 FlexGrid.propTypes = {
   /**
    * Provide a custom element to render instead of the default <div>
    */
   as: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].elementType]),
-
   /**
    * Pass in content that will be rendered within the `FlexGrid`
    */
   children: PropTypes__default["default"].node,
-
   /**
    * Specify a custom className to be applied to the `FlexGrid`
    */
   className: PropTypes__default["default"].string,
-
   /**
    * Collapse the gutter to 1px. Useful for fluid layouts.
    * Rows have 1px of margin between them to match gutter.
    */
   condensed: PropTypes__default["default"].bool,
-
   /**
    * Remove the default max width that the grid has set
    */
   fullWidth: PropTypes__default["default"].bool,
-
   /**
    * Container hangs 16px into the gutter. Useful for
    * typographic alignment with and without containers.

package/lib/components/Grid/Grid.js

@@ -22,41 +22,33 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function Grid(props) {
   const enableCSSGrid = index.useFeatureFlag('enable-css-grid');
-
   if (enableCSSGrid) {
     return /*#__PURE__*/React__default["default"].createElement(CSSGrid.CSSGrid, props);
   }
-
   return /*#__PURE__*/React__default["default"].createElement(FlexGrid.FlexGrid, props);
 }
-
 Grid.propTypes = {
   /**
    * Provide a custom element to render instead of the default <div>
    */
   as: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].elementType]),
-
   /**
    * Pass in content that will be rendered within the `Grid`
    */
   children: PropTypes__default["default"].node,
-
   /**
    * Specify a custom className to be applied to the `Grid`
    */
   className: PropTypes__default["default"].string,
-
   /**
    * Collapse the gutter to 1px. Useful for fluid layouts.
    * Rows have 1px of margin between them to match gutter.
    */
   condensed: PropTypes__default["default"].bool,
-
   /**
    * Remove the default max width that the grid has set
    */
   fullWidth: PropTypes__default["default"].bool,
-
   /**
    * Container hangs 16px into the gutter. Useful for
    * typographic alignment with and without containers.

package/lib/components/Grid/GridContext.js

@@ -66,21 +66,19 @@ GridSettings.propTypes = {
    * component
    */
   children: PropTypes__default["default"].node,
-
   /**
    * Specify the grid mode for the GridContext
    */
   mode: PropTypes__default["default"].oneOf(gridModes).isRequired,
-
   /**
    * Specify whether subgrid should be enabled
    */
   subgrid: PropTypes__default["default"].bool
 };
+
 /**
  * Helper function for accessing the GridContext value
  */
-
 const useGridSettings = () => {
   return React__namespace.useContext(GridSettingsContext);
 };

package/lib/components/Grid/Row.js

@@ -35,36 +35,31 @@ function Row(_ref) {
     [`${prefix}--row`]: true,
     [`${prefix}--row--condensed`]: condensed,
     [`${prefix}--row--narrow`]: narrow
-  }); // TypeScript type validation reports conflicts on different instances of keyof JSX.IntrinsicElements
-
+  });
+  // TypeScript type validation reports conflicts on different instances of keyof JSX.IntrinsicElements
   const BaseComponentAsAny = BaseComponent;
   return /*#__PURE__*/React__default["default"].createElement(BaseComponentAsAny, _rollupPluginBabelHelpers["extends"]({
     className: className
   }, rest), children);
 }
-
 Row.propTypes = {
   /**
    * Provide a custom element to render instead of the default <div>
    */
   as: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].elementType]),
-
   /**
    * Pass in content that will be rendered within the `Row`
    */
   children: PropTypes__default["default"].node,
-
   /**
    * Specify a custom className to be applied to the `Row`
    */
   className: PropTypes__default["default"].string,
-
   /**
    * Specify a single row as condensed.Rows that are adjacent
    * and are condensed will have 2px of margin between them to match gutter.
    */
   condensed: PropTypes__default["default"].bool,
-
   /**
    * Specify a single row as narrow. The container will hang
    * 16px into the gutter.

package/lib/components/Heading/index.js

@@ -37,17 +37,14 @@ Section.propTypes = {
    * <section> element
    */
   as: PropTypes__default["default"].elementType,
-
   /**
    * Specify the content that will be placed in the component
    */
   children: PropTypes__default["default"].node,
-
   /**
    * Specify a class name for the outermost node of the component
    */
   className: PropTypes__default["default"].string,
-
   /**
    * Overrides the level of the section
    */
@@ -62,7 +59,6 @@ Heading.propTypes = {
    * Specify the content that will be placed in the component
    */
   children: PropTypes__default["default"].node,
-
   /**
    * Specify a class name for the outermost node of the component
    */

package/lib/components/Icon/Icon.Skeleton.js

@@ -27,13 +27,13 @@ const IconSkeleton = _ref => {
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
-  const props = { ...rest
+  const props = {
+    ...rest
   };
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: cx__default["default"](`${prefix}--icon--skeleton`, className)
   }, props));
 };
-
 IconSkeleton.propTypes = {
   /**
    * Specify an optional className to add.

package/lib/components/IconButton/index.js

@@ -61,37 +61,30 @@ IconButton.propTypes = {
    * Specify how the trigger should align with the tooltip
    */
   align: PropTypes__default["default"].oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
-
   /**
    * Provide an icon or asset to be rendered inside of the IconButton
    */
   children: PropTypes__default["default"].node,
-
   /**
    * Specify an optional className to be added to your Button
    */
   className: PropTypes__default["default"].string,
-
   /**
    * Determines whether the tooltip should close when inner content is activated (click, Enter or Space)
    */
   closeOnActivation: PropTypes__default["default"].bool,
-
   /**
    * Specify whether the tooltip should be open when it first renders
    */
   defaultOpen: PropTypes__default["default"].bool,
-
   /**
    * Specify the duration in milliseconds to delay before displaying the tooltip
    */
   enterDelayMs: PropTypes__default["default"].number,
-
   /**
    * Specify the type of button to be used as the base for the IconButton
    */
   kind: PropTypes__default["default"].oneOf(['primary', 'secondary', 'ghost', 'tertiary']),
-
   /**
    * Provide the label to be rendered inside of the Tooltip. The label will use
    * `aria-labelledby` and will fully describe the child node that is provided.
@@ -99,17 +92,14 @@ IconButton.propTypes = {
    * announced to the screen reader.
    */
   label: PropTypes__default["default"].node.isRequired,
-
   /**
    * Specify the duration in milliseconds to delay before hiding the tooltip
    */
   leaveDelayMs: PropTypes__default["default"].number,
-
   /**
    * Specify the size of the Button. Defaults to `md`.
    */
   size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg']),
-
   /**
    * Specify an optional className to be added to your Tooltip wrapper
    */

package/lib/components/IdPrefix/index.js

@@ -27,10 +27,8 @@ function IdPrefix(_ref) {
     value: prefix
   }, children);
 }
-
 IdPrefix.propTypes = {
   children: PropTypes__default["default"].node,
-
   /**
    * The value used to prefix the auto-generated id placed on some DOM elements
    */