@carbon/react 1.83.0-rc.0 → 1.84.0-rc.0

package/es/components/Search/Search.js

@@ -9,7 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import { Close, Search as Search$1 } from '@carbon/icons-react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default, { useContext, useRef, useState } from 'react';
+import React, { useContext, useRef, useState } from 'react';
 import { Escape, Enter, Space } from '../../internal/keyboard/keys.js';
 import { match } from '../../internal/keyboard/match.js';
 import { useId } from '../../internal/useId.js';
@@ -22,30 +22,29 @@ import { FormContext } from '../FluidForm/FormContext.js';
 import { noopFn } from '../../internal/noopFn.js';
 
 var _Close;
-const Search = /*#__PURE__*/React__default.forwardRef(function Search(_ref, forwardRef) {
-  let {
-    autoComplete = 'off',
-    className,
-    closeButtonLabelText = 'Clear search input',
-    defaultValue,
-    disabled,
-    isExpanded = true,
-    id,
-    labelText,
-    // @ts-expect-error: deprecated prop
-    light,
-    onChange = () => {},
-    onClear = () => {},
-    onKeyDown,
-    onExpand,
-    placeholder = 'Search',
-    renderIcon,
-    role = 'searchbox',
-    size = 'md',
-    type = 'text',
-    value,
-    ...rest
-  } = _ref;
+const Search = /*#__PURE__*/React.forwardRef(function Search({
+  autoComplete = 'off',
+  className,
+  closeButtonLabelText = 'Clear search input',
+  defaultValue,
+  disabled,
+  isExpanded = true,
+  id,
+  labelText,
+  // @ts-expect-error: deprecated prop
+  light,
+  onChange = () => {},
+  onClear = () => {},
+  onKeyDown,
+  onExpand,
+  placeholder = 'Search',
+  renderIcon,
+  role = 'searchbox',
+  size = 'md',
+  type = 'text',
+  value,
+  ...rest
+}, forwardRef) {
   const hasPropValue = value || defaultValue ? true : false;
   const prefix = usePrefix();
   const {
@@ -130,11 +129,11 @@ const Search = /*#__PURE__*/React__default.forwardRef(function Search(_ref, forw
       }
     }
   }
-  return /*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     role: "search",
     "aria-label": placeholder,
     className: searchClasses
-  }, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     "aria-label": onExpand ? 'button' : undefined,
     "aria-labelledby": onExpand ? searchId : undefined,
     role: onExpand ? 'button' : undefined,
@@ -145,13 +144,13 @@ const Search = /*#__PURE__*/React__default.forwardRef(function Search(_ref, forw
     ref: expandButtonRef,
     "aria-expanded": onExpand && isExpanded ? true : onExpand && !isExpanded ? false : undefined,
     "aria-controls": onExpand ? uniqueId : undefined
-  }, /*#__PURE__*/React__default.createElement(CustomSearchIcon, {
+  }, /*#__PURE__*/React.createElement(CustomSearchIcon, {
     icon: renderIcon
-  })), /*#__PURE__*/React__default.createElement("label", {
+  })), /*#__PURE__*/React.createElement("label", {
     id: searchId,
     htmlFor: uniqueId,
     className: `${prefix}--label`
-  }, labelText), /*#__PURE__*/React__default.createElement("input", _extends({
+  }, labelText), /*#__PURE__*/React.createElement("input", _extends({
     autoComplete: autoComplete,
     className: `${prefix}--search-input`,
     defaultValue: defaultValue,
@@ -165,14 +164,14 @@ const Search = /*#__PURE__*/React__default.forwardRef(function Search(_ref, forw
     type: type,
     value: value,
     tabIndex: onExpand && !isExpanded ? -1 : undefined
-  }, rest)), /*#__PURE__*/React__default.createElement("button", {
+  }, rest)), /*#__PURE__*/React.createElement("button", {
     "aria-label": closeButtonLabelText,
     className: clearClasses,
     disabled: disabled,
     onClick: clearInput,
     title: closeButtonLabelText,
     type: "button"
-  }, _Close || (_Close = /*#__PURE__*/React__default.createElement(Close, null))));
+  }, _Close || (_Close = /*#__PURE__*/React.createElement(Close, null))));
 });
 Search.displayName = 'Search';
 Search.propTypes = {
@@ -256,17 +255,16 @@ Search.propTypes = {
    */
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
-function CustomSearchIcon(_ref2) {
-  let {
-    icon: Icon
-  } = _ref2;
+function CustomSearchIcon({
+  icon: Icon
+}) {
   const prefix = usePrefix();
   if (Icon) {
-    return /*#__PURE__*/React__default.createElement(Icon, {
+    return /*#__PURE__*/React.createElement(Icon, {
       className: `${prefix}--search-magnifier-icon`
     });
   }
-  return /*#__PURE__*/React__default.createElement(Search$1, {
+  return /*#__PURE__*/React.createElement(Search$1, {
     className: `${prefix}--search-magnifier-icon`
   });
 }

package/es/components/SecondaryButton/SecondaryButton.js

@@ -6,11 +6,11 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default from 'react';
+import React from 'react';
 import Button from '../Button/Button.js';
 import '../Button/Button.Skeleton.js';
 
-const SecondaryButton = props => /*#__PURE__*/React__default.createElement(Button, _extends({
+const SecondaryButton = props => /*#__PURE__*/React.createElement(Button, _extends({
   kind: "secondary"
 }, props));
 

package/es/components/Select/Select.Skeleton.js

@@ -7,24 +7,23 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-const SelectSkeleton = _ref => {
-  let {
-    hideLabel,
-    className,
-    ...rest
-  } = _ref;
+const SelectSkeleton = ({
+  hideLabel,
+  className,
+  ...rest
+}) => {
   const prefix = usePrefix();
-  return /*#__PURE__*/React__default.createElement("div", _extends({
+  return /*#__PURE__*/React.createElement("div", _extends({
     className: cx(`${prefix}--form-item`, className)
-  }, rest), !hideLabel && /*#__PURE__*/React__default.createElement("span", {
+  }, rest), !hideLabel && /*#__PURE__*/React.createElement("span", {
     className: `${prefix}--label ${prefix}--skeleton`
-  }), /*#__PURE__*/React__default.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--select ${prefix}--skeleton`
-  }, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--select-input`
   })));
 };

package/es/components/Select/Select.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default, { useContext, useState } from 'react';
+import React, { useContext, useState } from 'react';
 import cx from 'classnames';
 import { ChevronDown, WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 import deprecate from '../../prop-types/deprecate.js';
@@ -19,31 +19,30 @@ import { composeEventHandlers } from '../../tools/events.js';
 import '../Text/index.js';
 import { Text } from '../Text/Text.js';
 
-const Select = /*#__PURE__*/React__default.forwardRef(function Select(_ref, ref) {
-  let {
-    className,
-    decorator,
-    id,
-    inline = false,
-    labelText = 'Select',
-    disabled = false,
-    children,
-    // reserved for use with Pagination component
-    noLabel = false,
-    // eslint-disable-next-line no-unused-vars
-    hideLabel = false,
-    invalid = false,
-    invalidText = '',
-    helperText = '',
-    light = false,
-    readOnly,
-    size,
-    warn = false,
-    warnText,
-    onChange,
-    slug,
-    ...other
-  } = _ref;
+const Select = /*#__PURE__*/React.forwardRef(function Select({
+  className,
+  decorator,
+  id,
+  inline = false,
+  labelText = 'Select',
+  disabled = false,
+  children,
+  // reserved for use with Pagination component
+  noLabel = false,
+  // eslint-disable-next-line no-unused-vars
+  hideLabel = false,
+  invalid = false,
+  invalidText = '',
+  helperText = '',
+  light = false,
+  readOnly,
+  size,
+  warn = false,
+  warnText,
+  onChange,
+  slug,
+  ...other
+}, ref) {
   const prefix = usePrefix();
   const {
     isFluid
@@ -51,7 +50,7 @@ const Select = /*#__PURE__*/React__default.forwardRef(function Select(_ref, ref)
   const [isFocused, setIsFocused] = useState(false);
   const selectInstanceId = useId();
   // Convert children to an array of valid elements once using type narrowing
-  const validChildren = React__default.Children.toArray(children).filter(child => /*#__PURE__*/React__default.isValidElement(child));
+  const validChildren = React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child));
 
   // Find the default option based on the specified defaultValue
   const defaultOption = validChildren.find(child => child.props?.value === other?.defaultValue);
@@ -89,7 +88,7 @@ const Select = /*#__PURE__*/React__default.forwardRef(function Select(_ref, ref)
       return warnText;
     }
   })();
-  const error = invalid || warn ? /*#__PURE__*/React__default.createElement(Text, {
+  const error = invalid || warn ? /*#__PURE__*/React.createElement(Text, {
     as: "div",
     className: `${prefix}--form-requirement`,
     id: errorId
@@ -98,7 +97,7 @@ const Select = /*#__PURE__*/React__default.forwardRef(function Select(_ref, ref)
     [`${prefix}--form__helper-text--disabled`]: disabled
   });
   const helperId = !helperText ? undefined : `select-helper-text-${selectInstanceId}`;
-  const helper = helperText ? /*#__PURE__*/React__default.createElement(Text, {
+  const helper = helperText ? /*#__PURE__*/React.createElement(Text, {
     as: "div",
     id: helperId,
     className: helperTextClasses
@@ -135,14 +134,14 @@ const Select = /*#__PURE__*/React__default.forwardRef(function Select(_ref, ref)
   };
 
   // AILabel always size `mini`
-  let normalizedDecorator = /*#__PURE__*/React__default.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
+  let normalizedDecorator = /*#__PURE__*/React.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
   if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
-    normalizedDecorator = /*#__PURE__*/React__default.cloneElement(normalizedDecorator, {
+    normalizedDecorator = /*#__PURE__*/React.cloneElement(normalizedDecorator, {
       size: 'mini'
     });
   }
   const input = (() => {
-    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("select", _extends({}, other, ariaProps, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("select", _extends({}, other, ariaProps, {
       id: id,
       className: inputClasses,
       disabled: disabled || undefined,
@@ -152,35 +151,35 @@ const Select = /*#__PURE__*/React__default.forwardRef(function Select(_ref, ref)
       onChange: composeEventHandlers([onChange, handleChange])
     }, readOnlyEventHandlers, {
       ref: ref
-    }), children), /*#__PURE__*/React__default.createElement(ChevronDown, {
+    }), children), /*#__PURE__*/React.createElement(ChevronDown, {
       className: `${prefix}--select__arrow`
-    }), invalid && /*#__PURE__*/React__default.createElement(WarningFilled, {
+    }), invalid && /*#__PURE__*/React.createElement(WarningFilled, {
       className: `${prefix}--select__invalid-icon`
-    }), !invalid && warn && /*#__PURE__*/React__default.createElement(WarningAltFilled, {
+    }), !invalid && warn && /*#__PURE__*/React.createElement(WarningAltFilled, {
       className: `${prefix}--select__invalid-icon ${prefix}--select__invalid-icon--warning`
     }));
   })();
-  return /*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: cx(`${prefix}--form-item`, className)
-  }, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: selectClasses
-  }, !noLabel && /*#__PURE__*/React__default.createElement(Text, {
+  }, !noLabel && /*#__PURE__*/React.createElement(Text, {
     as: "label",
     htmlFor: id,
     className: labelClasses
-  }, labelText), inline && /*#__PURE__*/React__default.createElement("div", {
+  }, labelText), inline && /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--select-input--inline__wrapper`
-  }, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--select-input__wrapper`,
     "data-invalid": invalid || null
-  }, input), error), !inline && /*#__PURE__*/React__default.createElement("div", {
+  }, input), error), !inline && /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--select-input__wrapper`,
     "data-invalid": invalid || null,
     onFocus: handleFocus,
     onBlur: handleFocus
-  }, input, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default.createElement("div", {
+  }, input, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--select__inner-wrapper--decorator`
-  }, normalizedDecorator) : '', isFluid && /*#__PURE__*/React__default.createElement("hr", {
+  }, normalizedDecorator) : '', isFluid && /*#__PURE__*/React.createElement("hr", {
     className: `${prefix}--select__divider`
   }), isFluid && error ? error : null), !inline && !isFluid && error ? error : helper));
 });

package/es/components/SelectItem/SelectItem.js

@@ -7,19 +7,18 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-const SelectItem = _ref => {
-  let {
-    className,
-    value = '',
-    disabled = false,
-    hidden = false,
-    text = '',
-    ...other
-  } = _ref;
+const SelectItem = ({
+  className,
+  value = '',
+  disabled = false,
+  hidden = false,
+  text = '',
+  ...other
+}) => {
   const prefix = usePrefix();
   const selectItemClasses = cx({
     [`${prefix}--select-option`]: true,
@@ -27,7 +26,7 @@ const SelectItem = _ref => {
       [className]: className
     })
   });
-  return /*#__PURE__*/React__default.createElement("option", _extends({}, other, {
+  return /*#__PURE__*/React.createElement("option", _extends({}, other, {
     className: selectItemClasses,
     value: value,
     disabled: disabled,

package/es/components/SelectItemGroup/SelectItemGroup.js

@@ -7,21 +7,20 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-const SelectItemGroup = _ref => {
-  let {
-    children,
-    className,
-    disabled = false,
-    label,
-    ...other
-  } = _ref;
+const SelectItemGroup = ({
+  children,
+  className,
+  disabled = false,
+  label,
+  ...other
+}) => {
   const prefix = usePrefix();
   const classNames = cx(`${prefix}--select-optgroup`, className);
-  return /*#__PURE__*/React__default.createElement("optgroup", _extends({
+  return /*#__PURE__*/React.createElement("optgroup", _extends({
     className: classNames,
     label: label,
     disabled: disabled

package/es/components/ShapeIndicator/index.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { Critical, CriticalSeverity, Caution, DiamondFill, LowSeverity, CircleFill, CircleStroke } from '@carbon/icons-react';
@@ -16,20 +16,20 @@ var _path;
 const ShapeIndicatorKinds = ['failed', 'critical', 'high', 'medium', 'low', 'cautious', 'undefined', 'stable', 'informative', 'incomplete', 'draft'];
 
 // TODO: update to import '@carbon/icons-react'
-const incompleteIcon = props => /*#__PURE__*/React__default.createElement("svg", _extends({
+const incompleteIcon = props => /*#__PURE__*/React.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
   height: 16,
   fill: "none",
   "aria-hidden": "true"
-}, props), /*#__PURE__*/React__default.createElement("path", {
+}, props), /*#__PURE__*/React.createElement("path", {
   fill: "#fff",
   fillOpacity: 0.01,
   d: "M0 0h16v16H0z",
   style: {
     mixBlendMode: 'multiply'
   }
-}), _path || (_path = /*#__PURE__*/React__default.createElement("path", {
+}), _path || (_path = /*#__PURE__*/React.createElement("path", {
   fill: "#161616",
   d: "M8 2a6 6 0 1 0 0 12A6 6 0 0 0 8 2Zm0 2a4.004 4.004 0 0 1 4 4H4a4.004 4.004 0 0 1 4-4Z"
 })));
@@ -46,14 +46,13 @@ const shapeTypes = {
   incomplete: incompleteIcon,
   draft: CircleStroke
 };
-const ShapeIndicator = /*#__PURE__*/React__default.forwardRef(function ShapeIndicatorContent(_ref, ref) {
-  let {
-    className: customClassName,
-    kind,
-    label,
-    textSize = 12,
-    ...rest
-  } = _ref;
+const ShapeIndicator = /*#__PURE__*/React.forwardRef(function ShapeIndicatorContent({
+  className: customClassName,
+  kind,
+  label,
+  textSize = 12,
+  ...rest
+}, ref) {
   const prefix = usePrefix();
   const classNames = cx(`${prefix}--shape-indicator`, customClassName, {
     [`${prefix}--shape-indicator--14`]: textSize == 14
@@ -62,10 +61,10 @@ const ShapeIndicator = /*#__PURE__*/React__default.forwardRef(function ShapeIndi
   if (!ShapeForKind) {
     return null;
   }
-  return /*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: classNames,
     ref: ref
-  }, /*#__PURE__*/React__default.createElement(ShapeForKind, {
+  }, /*#__PURE__*/React.createElement(ShapeForKind, {
     size: 16,
     className: `${prefix}--shape-indicator--${kind}`
   }), label);

package/es/components/SkeletonIcon/SkeletonIcon.d.ts

@@ -4,10 +4,6 @@ export interface SkeletonIconProps {
      * Specify an optional className to add.
      */
     className?: string;
-    /**
-     * The CSS styles.
-     */
-    style?: React.CSSProperties;
 }
 declare const SkeletonIcon: React.FC<SkeletonIconProps>;
 export default SkeletonIcon;

package/es/components/SkeletonIcon/SkeletonIcon.js

@@ -7,20 +7,19 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-const SkeletonIcon = _ref => {
-  let {
-    className,
-    ...other
-  } = _ref;
+const SkeletonIcon = ({
+  className,
+  ...other
+}) => {
   const prefix = usePrefix();
   const skeletonIconClasses = cx(className, {
     [`${prefix}--icon--skeleton`]: true
   });
-  return /*#__PURE__*/React__default.createElement("div", _extends({
+  return /*#__PURE__*/React.createElement("div", _extends({
     className: skeletonIconClasses
   }, other));
 };
@@ -28,11 +27,7 @@ SkeletonIcon.propTypes = {
   /**
    * Specify an optional className to add.
    */
-  className: PropTypes.string,
-  /**
-   * The CSS styles.
-   */
-  style: PropTypes.object
+  className: PropTypes.string
 };
 
 export { SkeletonIcon as default };

package/es/components/SkeletonPlaceholder/SkeletonPlaceholder.js

@@ -6,21 +6,20 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-const SkeletonPlaceholder = _ref => {
-  let {
-    className,
-    ...other
-  } = _ref;
+const SkeletonPlaceholder = ({
+  className,
+  ...other
+}) => {
   const prefix = usePrefix();
   const skeletonPlaceholderClasses = cx({
     [`${prefix}--skeleton__placeholder`]: true
   }, className);
-  return /*#__PURE__*/React__default.createElement("div", _extends({
+  return /*#__PURE__*/React.createElement("div", _extends({
     className: skeletonPlaceholderClasses
   }, other));
 };

package/es/components/SkeletonText/SkeletonText.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default, { useRef } from 'react';
+import React, { useRef } from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
@@ -16,15 +16,14 @@ const randoms = [0.973051493507435, 0.15334737213558558, 0.5671034553053769];
 function getRandomInt(min, max, n) {
   return Math.floor(randoms[n % 3] * (max - min + 1)) + min;
 }
-const SkeletonText = _ref => {
-  let {
-    paragraph = false,
-    lineCount = 3,
-    width = '100%',
-    heading = false,
-    className = '',
-    ...rest
-  } = _ref;
+const SkeletonText = ({
+  paragraph = false,
+  lineCount = 3,
+  width = '100%',
+  heading = false,
+  className = '',
+  ...rest
+}) => {
   const prefix = usePrefix();
   const skeletonTextClasses = cx({
     [`${prefix}--skeleton__text`]: true,
@@ -56,7 +55,7 @@ const SkeletonText = _ref => {
   }, [lineCountNumber, paragraph, refs, width, widthNum, widthPercent, widthPx]);
   const lines = [];
   for (let i = 0; i < lineCountNumber; i++) {
-    lines.push(/*#__PURE__*/React__default.createElement("p", _extends({
+    lines.push(/*#__PURE__*/React.createElement("p", _extends({
       className: skeletonTextClasses,
       key: i,
       ref: el => {
@@ -65,11 +64,11 @@ const SkeletonText = _ref => {
     }, rest)));
   }
   if (lineCountNumber !== 1) {
-    return /*#__PURE__*/React__default.createElement("div", null, lines);
+    return /*#__PURE__*/React.createElement("div", null, lines);
   }
 
   // eslint-disable-next-line react/jsx-no-useless-fragment
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, lines);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, lines);
 };
 SkeletonText.propTypes = {
   /**