@carbon/react 1.29.1 → 1.30.0-rc.0

package/lib/components/InlineCheckbox/InlineCheckbox.js

@@ -21,7 +21,6 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 /** @type any */
-
 const InlineCheckbox = /*#__PURE__*/React__default["default"].forwardRef(function InlineCheckbox(props, forwardRef) {
   const {
     ['aria-label']: ariaLabel,
@@ -53,11 +52,9 @@ const InlineCheckbox = /*#__PURE__*/React__default["default"].forwardRef(functio
     ref,
     type: 'checkbox'
   };
-
   if (indeterminate) {
     inputProps.checked = false;
   }
-
   React.useEffect(() => {
     inputRef.current.indeterminate = indeterminate;
   }, [indeterminate]);
@@ -65,7 +62,6 @@ const InlineCheckbox = /*#__PURE__*/React__default["default"].forwardRef(functio
     className: `${prefix}--checkbox--inline`
   }, /*#__PURE__*/React__default["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["default"].createElement("label", {
     htmlFor: id,
@@ -82,53 +78,43 @@ InlineCheckbox.propTypes = {
    * Specify the label for the control
    */
   ['aria-label']: PropTypes__default["default"].string.isRequired,
-
   /**
    * Deprecated, please use `aria-label` instead.
    * Specify the label for the control
    */
   ariaLabel: deprecate["default"](PropTypes__default["default"].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__default["default"].bool,
-
   /**
    * Specify whether the underlying input control should be disabled
    */
   disabled: PropTypes__default["default"].bool,
-
   /**
    * Provide an `id` for the underlying input control
    */
   id: PropTypes__default["default"].string.isRequired,
-
   /**
    * Specify whether the control is in an indterminate state
    */
   indeterminate: PropTypes__default["default"].bool,
-
   /**
    * Provide a `name` for the underlying input control
    */
   name: PropTypes__default["default"].string.isRequired,
-
   /**
    * Provide an optional hook that is called each time the input is updated
    */
   onChange: PropTypes__default["default"].func,
-
   /**
    * Provide a handler that is invoked when a user clicks on the control
    */
   onClick: PropTypes__default["default"].func,
-
   /**
    * Provide a handler that is invoked on the key down event for the control
    */
   onKeyDown: PropTypes__default["default"].func,
-
   /**
    * Provide an optional tooltip for the InlineCheckbox
    */

package/lib/components/InlineLoading/InlineLoading.js

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

package/lib/components/Layer/index.js

@@ -24,12 +24,12 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 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["default"].useContext(LayerContext.LayerContext);
   return {
@@ -47,8 +47,8 @@ function Layer(_ref) {
   const contextLevel = React__default["default"].useContext(LayerContext.LayerContext);
   const level = overrideLevel ?? contextLevel;
   const prefix = usePrefix.usePrefix();
-  const className = cx__default["default"](`${prefix}--layer-${levels[level]}`, customClassName); // The level should be between 0 and MAX_LEVEL
-
+  const className = cx__default["default"](`${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["default"].createElement(LayerContext.LayerContext.Provider, {
     value: value
@@ -62,18 +62,15 @@ Layer.propTypes = {
    * element in the component
    */
   as: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].string, PropTypes__default["default"].elementType]),
-
   /**
    * Provide child elements to be rendered inside of `Theme`
    */
   children: PropTypes__default["default"].node,
-
   /**
    * Provide a custom class name to be used on the outermost element rendered by
    * the component
    */
   className: PropTypes__default["default"].string,
-
   /**
    * Specify the layer level and override any existing levels based on hierarchy
    */

package/lib/components/Layout/LayoutDirection.js

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

package/lib/components/Layout/useLayoutDirection.js

@@ -15,7 +15,6 @@ var LayoutDirectionContext = require('./LayoutDirectionContext.js');
 /**
  * Get access to the current layout direction in context
  */
-
 function useLayoutDirection() {
   return React.useContext(LayoutDirectionContext.LayoutDirectionContext);
 }

package/lib/components/Link/Link.js

@@ -44,16 +44,16 @@ const Link = /*#__PURE__*/React__default["default"].forwardRef(function Link(_re
   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["default"].createElement("a", _rollupPluginBabelHelpers["extends"]({
     ref: ref
   }, linkProps, rest), children, !inline && Icon && /*#__PURE__*/React__default["default"].createElement("div", {
@@ -66,38 +66,31 @@ Link.propTypes = {
    * Provide the content for the Link
    */
   children: PropTypes__default["default"].node,
-
   /**
    * Provide a custom className to be applied to the containing `<a>` node
    */
   className: PropTypes__default["default"].string,
-
   /**
    * Specify if the control should be disabled, or not
    */
   disabled: PropTypes__default["default"].bool,
-
   /**
    * Provide the `href` attribute for the `<a>` node
    */
   href: PropTypes__default["default"].string,
-
   /**
    * Specify whether you want the inline version of this control
    */
   inline: PropTypes__default["default"].bool,
-
   /**
    * Optional prop to render an icon next to the link.
    * Can be a React component class
    */
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
-
   /**
    * Specify the size of the Link. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
    */
   size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg']),
-
   /**
    * Specify whether you want the link to receive visited styles after the link has been clicked
    */

package/lib/components/ListBox/ListBox.js

@@ -30,12 +30,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.
@@ -60,7 +58,8 @@ const ListBox = /*#__PURE__*/React__default["default"].forwardRef(function ListB
     isFluid
   } = React.useContext(FormContext.FormContext);
   const showWarning = !invalid && warn;
-  const className = cx__default["default"]({ ...(containerClassName && {
+  const className = cx__default["default"]({
+    ...(containerClassName && {
       [containerClassName]: true
     }),
     [`${prefix}--list-box`]: true,
@@ -92,54 +91,44 @@ ListBox.propTypes = {
    * Provide the contents of your ListBox
    */
   children: PropTypes__default["default"].node,
-
   /**
    * Specify a class name to be applied on the containing list box node
    */
   className: PropTypes__default["default"].string,
-
   /**
    * Specify whether the ListBox is currently disabled
    */
   disabled: PropTypes__default["default"].bool.isRequired,
-
   /**
    * Specify whether the control is currently invalid
    */
   invalid: PropTypes__default["default"].bool,
-
   /**
    * Specify the text to be displayed when the control is invalid
    */
   invalidText: PropTypes__default["default"].node,
-
   /**
    * Specify if the control should render open
    */
   isOpen: PropTypes__default["default"].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["default"](PropTypes__default["default"].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: ListBoxPropTypes.ListBoxSize,
-
   /**
    * Specify the "type" of the ListBox. Currently supports either `default` or
    * `inline` as an option.
    */
   type: ListBoxPropTypes.ListBoxType.isRequired,
-
   /**
    * Specify whether the control is currently in warning state
    */
   warn: PropTypes__default["default"].bool,
-
   /**
    * Provide the text that is displayed when the control is in warning state
    */

package/lib/components/ListBox/ListBoxField.js

@@ -37,30 +37,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__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].bool]),
-
   /**
    * Provide the contents of your ListBoxField
    */
   children: PropTypes__default["default"].node,
-
   /**
    * Specify if the parent <ListBox> is disabled
    */
   disabled: PropTypes__default["default"].bool,
-
   /**
    * The role for the component, should be set by `getToggleButtonProps` coming
    * from Downshift
    */
   role: PropTypes__default["default"].string,
-
   /**
    * Optional prop to specify the tabIndex of the <ListBox> trigger button
    */

package/lib/components/ListBox/ListBoxMenuIcon.js

@@ -29,9 +29,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`
@@ -53,14 +51,12 @@ const ListBoxMenuIcon = _ref => {
     "aria-label": description
   }, /*#__PURE__*/React__default["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__default["default"].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

package/lib/components/ListBox/ListBoxMenuItem.js

@@ -32,7 +32,6 @@ function useIsTruncated(ref) {
   }, [ref, setIsTruncated]);
   return isTruncated;
 }
-
 /**
  * `ListBoxMenuItem` is a helper component for managing the container class
  * name, alongside any classes for any corresponding states, for a generic list
@@ -48,7 +47,7 @@ const ListBoxMenuItem = /*#__PURE__*/React__default["default"].forwardRef(functi
   } = _ref;
   const prefix = usePrefix.usePrefix();
   const ref = React.useRef(null);
-  const isTruncated = useIsTruncated((forwardedRef === null || forwardedRef === void 0 ? void 0 : forwardedRef.menuItemOptionRef) || ref);
+  const isTruncated = useIsTruncated(forwardedRef?.menuItemOptionRef || ref);
   const className = cx__default["default"](`${prefix}--list-box__menu-item`, {
     [`${prefix}--list-box__menu-item--active`]: isActive,
     [`${prefix}--list-box__menu-item--highlighted`]: isHighlighted
@@ -59,7 +58,7 @@ const ListBoxMenuItem = /*#__PURE__*/React__default["default"].forwardRef(functi
     tabIndex: -1
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--list-box__menu-item__option`,
-    ref: (forwardedRef === null || forwardedRef === void 0 ? void 0 : forwardedRef.menuItemOptionRef) || ref
+    ref: forwardedRef?.menuItemOptionRef || ref
   }, children));
 });
 ListBoxMenuItem.displayName = 'ListBoxMenuItem';
@@ -69,17 +68,14 @@ ListBoxMenuItem.propTypes = {
    * Menu Item
    */
   children: PropTypes__default["default"].node,
-
   /**
    * Specify whether the current menu item is "active".
    */
   isActive: PropTypes__default["default"].bool.isRequired,
-
   /**
    * Specify whether the current menu item is "highlighted".
    */
   isHighlighted: PropTypes__default["default"].bool.isRequired,
-
   /**
    * Provide an optional tooltip for the ListBoxMenuItem
    */

package/lib/components/ListBox/ListBoxPropTypes.d.ts

@@ -7,8 +7,8 @@
 import PropTypes from 'prop-types';
 declare const listBoxTypes: readonly ["default", "inline"];
 declare const listBoxSizes: readonly ["sm", "md", "lg"];
-export type ListBoxType = typeof listBoxTypes[number];
-export type ListBoxSize = typeof listBoxSizes[number];
+export type ListBoxType = (typeof listBoxTypes)[number];
+export type ListBoxSize = (typeof listBoxSizes)[number];
 export declare const ListBoxType: PropTypes.Requireable<"default" | "inline">;
 export declare const ListBoxSize: PropTypes.Requireable<"md" | "sm" | "lg">;
 export {};

package/lib/components/ListBox/ListBoxSelection.js

@@ -22,7 +22,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
 var _Close, _Close2;
-
 /**
  * `ListBoxSelection` is used to provide controls for clearing a selection, in
  * addition to conditionally rendering a badge if the control has more than one
@@ -42,27 +41,22 @@ const ListBoxSelection = _ref => {
     [`${prefix}--tag--filter`]: selectionCount,
     [`${prefix}--list-box__selection--multi`]: selectionCount
   });
-
   const handleOnClick = event => {
     event.stopPropagation();
-
     if (disabled || readOnly) {
       return;
     }
-
     clearSelection(event);
-
     if (onClearSelection) {
       onClearSelection(event);
     }
   };
-
   const description = selectionCount ? t('clear.all') : t('clear.selection');
   const tagClasses = cx__default["default"](`${prefix}--tag`, `${prefix}--tag--filter`, `${prefix}--tag--high-contrast`, {
     [`${prefix}--tag--disabled`]: disabled
   });
-  /* eslint-disable jsx-a11y/click-events-have-key-events */
 
+  /* eslint-disable jsx-a11y/click-events-have-key-events */
   return selectionCount ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: tagClasses
   }, /*#__PURE__*/React__default["default"].createElement("span", {
@@ -85,7 +79,6 @@ const ListBoxSelection = _ref => {
     title: description
   }, selectionCount, _Close2 || (_Close2 = /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, null)));
 };
-
 const translationIds = {
   'clear.all': 'clear.all',
   'clear.selection': 'clear.selection'
@@ -100,29 +93,24 @@ ListBoxSelection.propTypes = {
    * selection element.
    */
   clearSelection: PropTypes__default["default"].func.isRequired,
-
   /**
    * Specify whether or not the clear selection element should be disabled
    */
   disabled: PropTypes__default["default"].bool,
-
   /**
    * Specify an optional `onClearSelection` handler that is called when the underlying
    * element is cleared
    */
   onClearSelection: PropTypes__default["default"].func,
-
   /**
    * Whether or not the Dropdown is readonly
    */
   readOnly: PropTypes__default["default"].bool,
-
   /**
    * Specify an optional `selectionCount` value that will be used to determine
    * whether the selection should display a badge or a single clear icon.
    */
   selectionCount: PropTypes__default["default"].number,
-
   /**
    * i18n hook used to provide the appropriate description for the given menu
    * icon. This function takes in an id defined in `translationIds` and should

package/lib/components/ListBox/next/ListBoxSelection.js

@@ -23,12 +23,12 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
 var _Close, _Close2;
+
 /**
  * `ListBoxSelection` is used to provide controls for clearing a selection, in
  * addition to conditionally rendering a badge if the control has more than one
  * selection.
  */
-
 function ListBoxSelection(_ref) {
   let {
     clearSelection,
@@ -47,21 +47,16 @@ function ListBoxSelection(_ref) {
   const tagClasses = cx__default["default"](`${prefix}--tag`, `${prefix}--tag--filter`, `${prefix}--tag--high-contrast`, {
     [`${prefix}--tag--disabled`]: disabled
   });
-
   function onClick(event) {
     event.stopPropagation();
-
     if (disabled) {
       return;
     }
-
     clearSelection(event);
-
     if (onClearSelection) {
       onClearSelection(event);
     }
   }
-
   if (selectionCount) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: tagClasses
@@ -78,7 +73,6 @@ function ListBoxSelection(_ref) {
       type: "button"
     }, _Close || (_Close = /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, null))));
   }
-
   return /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({}, rest, {
     "aria-label": description,
     className: className,
@@ -89,7 +83,6 @@ function ListBoxSelection(_ref) {
     type: "button"
   }), _Close2 || (_Close2 = /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, null)));
 }
-
 const translationIds = {
   'clear.all': 'clear.all',
   'clear.selection': 'clear.selection'
@@ -104,36 +97,30 @@ ListBoxSelection.propTypes = {
    * selection element.
    */
   clearSelection: PropTypes__default["default"].func.isRequired,
-
   /**
    * Specify whether or not the clear selection element should be disabled
    */
   disabled: PropTypes__default["default"].bool,
-
   /**
    * Specify an optional `onClearSelection` handler that is called when the underlying
    * element is cleared
    */
   onClearSelection: PropTypes__default["default"].func,
-
   /**
    * Specify an optional `onClick` handler that is called when the underlying
    * clear selection element is clicked
    */
   onClick: PropTypes__default["default"].func,
-
   /**
    * Specify an optional `onKeyDown` handler that is called when the underlying
    * clear selection element fires a keydown event
    */
   onKeyDown: PropTypes__default["default"].func,
-
   /**
    * Specify an optional `selectionCount` value that will be used to determine
    * whether the selection should display a badge or a single clear icon.
    */
   selectionCount: PropTypes__default["default"].number,
-
   /**
    * i18n hook used to provide the appropriate description for the given menu
    * icon. This function takes in an id defined in `translationIds` and should

package/lib/components/ListBox/next/ListBoxTrigger.js

@@ -31,11 +31,11 @@ const defaultTranslations = {
   [translationIds['close.menu']]: 'Close',
   [translationIds['open.menu']]: 'Open'
 };
+
 /**
  * `ListBoxTrigger` is used to orient the icon up or down depending on the
  * state of the menu for a given `ListBox`
  */
-
 const ListBoxTrigger = _ref => {
   let {
     isOpen,
@@ -56,14 +56,12 @@ const ListBoxTrigger = _ref => {
     tabIndex: "-1"
   }), _ChevronDown || (_ChevronDown = /*#__PURE__*/React__default["default"].createElement(iconsReact.ChevronDown, null)));
 };
-
 ListBoxTrigger.propTypes = {
   /**
    * Specify whether the menu is currently open, which will influence the
    * direction of the menu icon
    */
   isOpen: PropTypes__default["default"].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