@carbon/react 1.29.1 → 1.30.0-rc.0

package/es/components/Grid/FlexGrid.js

@@ -28,8 +28,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.createElement(GridSettings, {
     mode: "flexbox",
@@ -38,34 +38,28 @@ function FlexGrid(_ref) {
     className: className
   }, rest), children));
 }
-
 FlexGrid.propTypes = {
   /**
    * Provide a custom element to render instead of the default <div>
    */
   as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
-
   /**
    * Pass in content that will be rendered within the `FlexGrid`
    */
   children: PropTypes.node,
-
   /**
    * Specify a custom className to be applied to the `FlexGrid`
    */
   className: PropTypes.string,
-
   /**
    * Collapse the gutter to 1px. Useful for fluid layouts.
    * Rows have 1px of margin between them to match gutter.
    */
   condensed: PropTypes.bool,
-
   /**
    * Remove the default max width that the grid has set
    */
   fullWidth: PropTypes.bool,
-
   /**
    * Container hangs 16px into the gutter. Useful for
    * typographic alignment with and without containers.

package/es/components/Grid/Grid.js

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

package/es/components/Grid/GridContext.js

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

package/es/components/Grid/Row.js

@@ -25,36 +25,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.createElement(BaseComponentAsAny, _extends({
     className: className
   }, rest), children);
 }
-
 Row.propTypes = {
   /**
    * Provide a custom element to render instead of the default <div>
    */
   as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
-
   /**
    * Pass in content that will be rendered within the `Row`
    */
   children: PropTypes.node,
-
   /**
    * Specify a custom className to be applied to the `Row`
    */
   className: PropTypes.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.bool,
-
   /**
    * Specify a single row as narrow. The container will hang
    * 16px into the gutter.

package/es/components/Heading/index.js

@@ -28,17 +28,14 @@ Section.propTypes = {
    * <section> element
    */
   as: PropTypes.elementType,
-
   /**
    * Specify the content that will be placed in the component
    */
   children: PropTypes.node,
-
   /**
    * Specify a class name for the outermost node of the component
    */
   className: PropTypes.string,
-
   /**
    * Overrides the level of the section
    */
@@ -53,7 +50,6 @@ Heading.propTypes = {
    * Specify the content that will be placed in the component
    */
   children: PropTypes.node,
-
   /**
    * Specify a class name for the outermost node of the component
    */

package/es/components/Icon/Icon.Skeleton.js

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

package/es/components/IconButton/index.js

@@ -51,37 +51,30 @@ IconButton.propTypes = {
    * Specify how the trigger should align with the tooltip
    */
   align: PropTypes.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.node,
-
   /**
    * Specify an optional className to be added to your Button
    */
   className: PropTypes.string,
-
   /**
    * Determines whether the tooltip should close when inner content is activated (click, Enter or Space)
    */
   closeOnActivation: PropTypes.bool,
-
   /**
    * Specify whether the tooltip should be open when it first renders
    */
   defaultOpen: PropTypes.bool,
-
   /**
    * Specify the duration in milliseconds to delay before displaying the tooltip
    */
   enterDelayMs: PropTypes.number,
-
   /**
    * Specify the type of button to be used as the base for the IconButton
    */
   kind: PropTypes.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.
@@ -89,17 +82,14 @@ IconButton.propTypes = {
    * announced to the screen reader.
    */
   label: PropTypes.node.isRequired,
-
   /**
    * Specify the duration in milliseconds to delay before hiding the tooltip
    */
   leaveDelayMs: PropTypes.number,
-
   /**
    * Specify the size of the Button. Defaults to `md`.
    */
   size: PropTypes.oneOf(['sm', 'md', 'lg']),
-
   /**
    * Specify an optional className to be added to your Tooltip wrapper
    */

package/es/components/IdPrefix/index.js

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

package/es/components/InlineCheckbox/InlineCheckbox.js

@@ -12,7 +12,6 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 
 /** @type any */
-
 const InlineCheckbox = /*#__PURE__*/React__default.forwardRef(function InlineCheckbox(props, forwardRef) {
   const {
     ['aria-label']: ariaLabel,
@@ -44,11 +43,9 @@ const InlineCheckbox = /*#__PURE__*/React__default.forwardRef(function InlineChe
     ref,
     type: 'checkbox'
   };
-
   if (indeterminate) {
     inputProps.checked = false;
   }
-
   useEffect(() => {
     inputRef.current.indeterminate = indeterminate;
   }, [indeterminate]);
@@ -56,7 +53,6 @@ const InlineCheckbox = /*#__PURE__*/React__default.forwardRef(function InlineChe
     className: `${prefix}--checkbox--inline`
   }, /*#__PURE__*/React__default.createElement("input", inputProps),
   /*#__PURE__*/
-
   /* eslint-disable jsx-a11y/label-has-for,jsx-a11y/label-has-associated-control,jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions */
   React__default.createElement("label", {
     htmlFor: id,
@@ -73,53 +69,43 @@ InlineCheckbox.propTypes = {
    * Specify the label for the control
    */
   ['aria-label']: PropTypes.string.isRequired,
-
   /**
    * Deprecated, please use `aria-label` instead.
    * Specify the label for the control
    */
   ariaLabel: deprecate(PropTypes.string.isRequired, 'The `ariaLabel` prop has been deprecated in favor of `aria-label`. This prop will be removed in the next major release.'),
-
   /**
    * Specify whether the underlying control is checked, or not
    */
   checked: PropTypes.bool,
-
   /**
    * Specify whether the underlying input control should be disabled
    */
   disabled: PropTypes.bool,
-
   /**
    * Provide an `id` for the underlying input control
    */
   id: PropTypes.string.isRequired,
-
   /**
    * Specify whether the control is in an indterminate state
    */
   indeterminate: PropTypes.bool,
-
   /**
    * Provide a `name` for the underlying input control
    */
   name: PropTypes.string.isRequired,
-
   /**
    * Provide an optional hook that is called each time the input is updated
    */
   onChange: PropTypes.func,
-
   /**
    * Provide a handler that is invoked when a user clicks on the control
    */
   onClick: PropTypes.func,
-
   /**
    * Provide a handler that is invoked on the key down event for the control
    */
   onKeyDown: PropTypes.func,
-
   /**
    * Provide an optional tooltip for the InlineCheckbox
    */

package/es/components/InlineLoading/InlineLoading.js

@@ -25,16 +25,13 @@ function InlineLoading(_ref) {
   } = _ref;
   const prefix = usePrefix();
   const loadingClasses = cx(`${prefix}--inline-loading`, className);
-
   const getLoading = () => {
     let iconLabel = iconDescription ? iconDescription : status;
-
     if (status === 'error') {
       return /*#__PURE__*/React__default.createElement(ErrorFilled, {
         className: `${prefix}--inline-loading--error`
       }, /*#__PURE__*/React__default.createElement("title", null, iconLabel));
     }
-
     if (status === 'finished') {
       setTimeout(() => {
         if (onSuccess) {
@@ -45,12 +42,10 @@ function InlineLoading(_ref) {
         className: `${prefix}--inline-loading__checkmark-container`
       }, /*#__PURE__*/React__default.createElement("title", null, iconLabel));
     }
-
     if (status === 'inactive' || status === 'active') {
       if (!iconDescription) {
         iconLabel = status === 'active' ? 'loading' : 'not loading';
       }
-
       return /*#__PURE__*/React__default.createElement(Loading, {
         small: true,
         description: iconLabel,
@@ -58,10 +53,8 @@ function InlineLoading(_ref) {
         active: status === 'active'
       });
     }
-
     return undefined;
   };
-
   const loadingText = /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--inline-loading__text`
   }, description);
@@ -80,28 +73,23 @@ InlineLoading.propTypes = {
    * Specify a custom className to be applied to the container node
    */
   className: PropTypes.string,
-
   /**
    * Specify the description for the inline loading text
    */
   description: PropTypes.node,
-
   /**
    * Specify the description for the inline loading text
    */
   iconDescription: PropTypes.string,
-
   /**
    * Provide an optional handler to be invoked when <InlineLoading> is
    * successful
    */
   onSuccess: PropTypes.func,
-
   /**
    * Specify the loading status
    */
   status: PropTypes.oneOf(['inactive', 'active', 'finished', 'error']),
-
   /**
    * Provide a delay for the `setTimeout` for success
    */

package/es/components/Layer/index.js

@@ -14,12 +14,12 @@ import { LayerContext } from './LayerContext.js';
 
 const levels = ['one', 'two', 'three'];
 const MAX_LEVEL = levels.length - 1;
+
 /**
  * A custom hook that will return information about the current layer. A common
  * field to pull from this is the `level` for the layer that the component that
  * calls this hook is currently in
  */
-
 function useLayer() {
   const level = React__default.useContext(LayerContext);
   return {
@@ -37,8 +37,8 @@ function Layer(_ref) {
   const contextLevel = React__default.useContext(LayerContext);
   const level = overrideLevel ?? contextLevel;
   const prefix = usePrefix();
-  const className = cx(`${prefix}--layer-${levels[level]}`, customClassName); // The level should be between 0 and MAX_LEVEL
-
+  const className = cx(`${prefix}--layer-${levels[level]}`, customClassName);
+  // The level should be between 0 and MAX_LEVEL
   const value = Math.max(0, Math.min(level + 1, MAX_LEVEL));
   return /*#__PURE__*/React__default.createElement(LayerContext.Provider, {
     value: value
@@ -52,18 +52,15 @@ Layer.propTypes = {
    * element in the component
    */
   as: PropTypes.oneOfType([PropTypes.func, PropTypes.string, PropTypes.elementType]),
-
   /**
    * Provide child elements to be rendered inside of `Theme`
    */
   children: PropTypes.node,
-
   /**
    * Provide a custom class name to be used on the outermost element rendered by
    * the component
    */
   className: PropTypes.string,
-
   /**
    * Specify the layer level and override any existing levels based on hierarchy
    */

package/es/components/Layout/LayoutDirection.js

@@ -29,19 +29,16 @@ function LayoutDirection(_ref) {
     dir: dir
   }, rest), children));
 }
-
 LayoutDirection.propTypes = {
   /**
    * Customize the element type used to render the outermost node
    */
   as: PropTypes.oneOfType([PropTypes.func, PropTypes.string, PropTypes.elementType]),
-
   /**
    * Provide child elements or components to be rendered inside of this
    * component
    */
   children: PropTypes.node,
-
   /**
    * Specify the layout direction of this part of the page
    */

package/es/components/Layout/useLayoutDirection.js

@@ -11,7 +11,6 @@ import { LayoutDirectionContext } from './LayoutDirectionContext.js';
 /**
  * Get access to the current layout direction in context
  */
-
 function useLayoutDirection() {
   return useContext(LayoutDirectionContext);
 }

package/es/components/Link/Link.js

@@ -34,16 +34,16 @@ const Link = /*#__PURE__*/React__default.forwardRef(function Link(_ref, ref) {
   const linkProps = {
     className,
     rel
-  }; // Reference for disabled links:
-  // https://www.scottohara.me/blog/2021/05/28/disabled-links.html
+  };
 
+  // Reference for disabled links:
+  // https://www.scottohara.me/blog/2021/05/28/disabled-links.html
   if (!disabled) {
     linkProps.href = href;
   } else {
     linkProps.role = 'link';
     linkProps['aria-disabled'] = true;
   }
-
   return /*#__PURE__*/React__default.createElement("a", _extends({
     ref: ref
   }, linkProps, rest), children, !inline && Icon && /*#__PURE__*/React__default.createElement("div", {
@@ -56,38 +56,31 @@ Link.propTypes = {
    * Provide the content for the Link
    */
   children: PropTypes.node,
-
   /**
    * Provide a custom className to be applied to the containing `<a>` node
    */
   className: PropTypes.string,
-
   /**
    * Specify if the control should be disabled, or not
    */
   disabled: PropTypes.bool,
-
   /**
    * Provide the `href` attribute for the `<a>` node
    */
   href: PropTypes.string,
-
   /**
    * Specify whether you want the inline version of this control
    */
   inline: PropTypes.bool,
-
   /**
    * Optional prop to render an icon next to the link.
    * Can be a React component class
    */
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-
   /**
    * Specify the size of the Link. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
    */
   size: PropTypes.oneOf(['sm', 'md', 'lg']),
-
   /**
    * Specify whether you want the link to receive visited styles after the link has been clicked
    */

package/es/components/ListBox/ListBox.js

@@ -20,12 +20,10 @@ const handleOnKeyDown = event => {
     event.stopPropagation();
   }
 };
-
 const handleClick = event => {
   event.preventDefault();
   event.stopPropagation();
 };
-
 /**
  * `ListBox` is a generic container component that handles creating the
  * container class name in response to certain props.
@@ -50,7 +48,8 @@ const ListBox = /*#__PURE__*/React__default.forwardRef(function ListBox(_ref, re
     isFluid
   } = useContext(FormContext);
   const showWarning = !invalid && warn;
-  const className = cx({ ...(containerClassName && {
+  const className = cx({
+    ...(containerClassName && {
       [containerClassName]: true
     }),
     [`${prefix}--list-box`]: true,
@@ -82,54 +81,44 @@ ListBox.propTypes = {
    * Provide the contents of your ListBox
    */
   children: PropTypes.node,
-
   /**
    * Specify a class name to be applied on the containing list box node
    */
   className: PropTypes.string,
-
   /**
    * Specify whether the ListBox is currently disabled
    */
   disabled: PropTypes.bool.isRequired,
-
   /**
    * Specify whether the control is currently invalid
    */
   invalid: PropTypes.bool,
-
   /**
    * Specify the text to be displayed when the control is invalid
    */
   invalidText: PropTypes.node,
-
   /**
    * Specify if the control should render open
    */
   isOpen: PropTypes.bool,
-
   /**
    * `true` to use the light version. For use on $ui-01 backgrounds only.
    * Don't use this to make tile background color same as container background color.
    */
   light: deprecate(PropTypes.bool, 'The `light` prop for `ListBox` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'),
-
   /**
    * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
    */
   size: ListBoxSize,
-
   /**
    * Specify the "type" of the ListBox. Currently supports either `default` or
    * `inline` as an option.
    */
   type: ListBoxType.isRequired,
-
   /**
    * Specify whether the control is currently in warning state
    */
   warn: PropTypes.bool,
-
   /**
    * Provide the text that is displayed when the control is in warning state
    */

package/es/components/ListBox/ListBoxField.js

@@ -28,30 +28,25 @@ function ListBoxField(_ref) {
     tabIndex: !disabled && tabIndex || -1
   }, rest), children);
 }
-
 ListBoxField.propTypes = {
   /**
    * Typically set by `getToggleButtonProps`, this should specify whether the
    * field has a popup.
    */
   'aria-haspopup': PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-
   /**
    * Provide the contents of your ListBoxField
    */
   children: PropTypes.node,
-
   /**
    * Specify if the parent <ListBox> is disabled
    */
   disabled: PropTypes.bool,
-
   /**
    * The role for the component, should be set by `getToggleButtonProps` coming
    * from Downshift
    */
   role: PropTypes.string,
-
   /**
    * Optional prop to specify the tabIndex of the <ListBox> trigger button
    */

package/es/components/ListBox/ListBoxMenuIcon.js

@@ -19,9 +19,7 @@ const defaultTranslations = {
   [translationIds['close.menu']]: 'Close menu',
   [translationIds['open.menu']]: 'Open menu'
 };
-
 const defaultTranslateWithId = id => defaultTranslations[id];
-
 /**
  * `ListBoxMenuIcon` is used to orient the icon up or down depending on the
  * state of the menu for a given `ListBox`
@@ -43,14 +41,12 @@ const ListBoxMenuIcon = _ref => {
     "aria-label": description
   }, /*#__PURE__*/React__default.createElement("title", null, description)));
 };
-
 ListBoxMenuIcon.propTypes = {
   /**
    * Specify whether the menu is currently open, which will influence the
    * direction of the menu icon
    */
   isOpen: PropTypes.bool.isRequired,
-
   /**
    * i18n hook used to provide the appropriate description for the given menu
    * icon. This function takes in an id defined in `translationIds` and should