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

package/lib/components/Accordion/AccordionItem.js

@@ -32,20 +32,19 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 const defaultRenderToggle = props => /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
   type: "button"
 }, props));
-function AccordionItem(_ref) {
-  let {
-    children,
-    className: customClassName = '',
-    open = false,
-    onHeadingClick,
-    renderExpando = defaultRenderToggle,
-    // remove renderExpando in next major release
-    renderToggle,
-    title = 'title',
-    disabled: controlledDisabled,
-    handleAnimationEnd,
-    ...rest
-  } = _ref;
+function AccordionItem({
+  children,
+  className: customClassName = '',
+  open = false,
+  onHeadingClick,
+  renderExpando = defaultRenderToggle,
+  // remove renderExpando in next major release
+  renderToggle,
+  title = 'title',
+  disabled: controlledDisabled,
+  handleAnimationEnd,
+  ...rest
+}) {
   const [isOpen, setIsOpen] = React.useState(open);
   const [prevIsOpen, setPrevIsOpen] = React.useState(open);
   const accordionState = React.useContext(AccordionProvider.AccordionContext);

package/lib/components/Accordion/AccordionProvider.js

@@ -18,11 +18,10 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 const AccordionContext = /*#__PURE__*/React.createContext({
   disabled: false
 });
-const AccordionProvider = _ref => {
-  let {
-    disabled,
-    children
-  } = _ref;
+const AccordionProvider = ({
+  disabled,
+  children
+}) => {
   return /*#__PURE__*/React__default["default"].createElement(AccordionContext.Provider, {
     value: {
       disabled

package/lib/components/AspectRatio/AspectRatio.js

@@ -27,14 +27,13 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  * This is often useful alongside our grid components, or for media assets like
  * images or videos.
  */
-const AspectRatio = _ref => {
-  let {
-    as: BaseComponent = 'div',
-    className: containerClassName,
-    children,
-    ratio = '1x1',
-    ...rest
-  } = _ref;
+const AspectRatio = ({
+  as: BaseComponent = 'div',
+  className: containerClassName,
+  children,
+  ratio = '1x1',
+  ...rest
+}) => {
   const prefix = usePrefix.usePrefix();
   const className = cx__default["default"](containerClassName, `${prefix}--aspect-ratio`, `${prefix}--aspect-ratio--${ratio}`);
   return /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({

package/lib/components/BadgeIndicator/index.js

@@ -21,12 +21,11 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const BadgeIndicator = /*#__PURE__*/React__default["default"].forwardRef(function BadgeIndicatorContent(_ref, ref) {
-  let {
-    className: customClassName,
-    count,
-    ...rest
-  } = _ref;
+const BadgeIndicator = /*#__PURE__*/React__default["default"].forwardRef(function BadgeIndicatorContent({
+  className: customClassName,
+  count,
+  ...rest
+}, ref) {
   const prefix = usePrefix.usePrefix();
   const classNames = cx__default["default"](`${prefix}--badge-indicator`, customClassName, {
     [`${prefix}--badge-indicator--count`]: count

package/lib/components/Breadcrumb/Breadcrumb.Skeleton.js

@@ -30,11 +30,10 @@ function Item() {
     className: `${prefix}--link`
   }, "\xA0"));
 }
-function BreadcrumbSkeleton(_ref) {
-  let {
-    className,
-    ...rest
-  } = _ref;
+function BreadcrumbSkeleton({
+  className,
+  ...rest
+}) {
   const prefix = usePrefix.usePrefix();
   const classes = cx__default["default"](`${prefix}--breadcrumb`, `${prefix}--skeleton`, className);
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({

package/lib/components/Button/Button.Skeleton.js

@@ -21,14 +21,13 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const ButtonSkeleton = _ref => {
-  let {
-    className,
-    small = false,
-    href,
-    size = 'lg',
-    ...rest
-  } = _ref;
+const ButtonSkeleton = ({
+  className,
+  small = false,
+  href,
+  size = 'lg',
+  ...rest
+}) => {
   const prefix = usePrefix.usePrefix();
   const buttonClasses = cx__default["default"](className, {
     [`${prefix}--skeleton`]: true,

package/lib/components/Button/ButtonBase.js

@@ -19,30 +19,29 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const ButtonBase = /*#__PURE__*/React__default["default"].forwardRef(function ButtonBase(_ref, ref) {
-  let {
-    as,
-    children,
-    className,
-    dangerDescription = 'danger',
-    disabled = false,
-    hasIconOnly = false,
-    href,
-    iconDescription,
-    isExpressive = false,
-    isSelected,
-    kind = 'primary',
-    onBlur,
-    onClick,
-    onFocus,
-    onMouseEnter,
-    onMouseLeave,
-    renderIcon: ButtonImageElement,
-    size,
-    tabIndex,
-    type = 'button',
-    ...rest
-  } = _ref;
+const ButtonBase = /*#__PURE__*/React__default["default"].forwardRef(function ButtonBase({
+  as,
+  children,
+  className,
+  dangerDescription = 'danger',
+  disabled = false,
+  hasIconOnly = false,
+  href,
+  iconDescription,
+  isExpressive = false,
+  isSelected,
+  kind = 'primary',
+  onBlur,
+  onClick,
+  onFocus,
+  onMouseEnter,
+  onMouseLeave,
+  renderIcon: ButtonImageElement,
+  size,
+  tabIndex,
+  type = 'button',
+  ...rest
+}, ref) {
   const prefix = usePrefix.usePrefix();
   const buttonClasses = cx__default["default"](className, {
     [`${prefix}--btn`]: true,

package/lib/components/ChatButton/ChatButton.Skeleton.js

@@ -21,12 +21,11 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const ChatButtonSkeleton = _ref => {
-  let {
-    className,
-    size,
-    ...rest
-  } = _ref;
+const ChatButtonSkeleton = ({
+  className,
+  size,
+  ...rest
+}) => {
   const prefix = usePrefix.usePrefix();
   const skeletonClasses = cx__default["default"](className, `${prefix}--skeleton`, `${prefix}--btn`, `${prefix}--chat-btn`, {
     [`${prefix}--layout--size-${size}`]: size

package/lib/components/ChatButton/ChatButton.js

@@ -23,18 +23,17 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const ChatButton = /*#__PURE__*/React__default["default"].forwardRef(function ChatButton(_ref, ref) {
-  let {
-    className,
-    children,
-    disabled,
-    isQuickAction,
-    isSelected,
-    kind,
-    renderIcon,
-    size,
-    ...other
-  } = _ref;
+const ChatButton = /*#__PURE__*/React__default["default"].forwardRef(function ChatButton({
+  className,
+  children,
+  disabled,
+  isQuickAction,
+  isSelected,
+  kind,
+  renderIcon,
+  size,
+  ...other
+}, ref) {
   const prefix = usePrefix.usePrefix();
   const classNames = cx__default["default"](className, {
     [`${prefix}--chat-btn`]: true,

package/lib/components/Checkbox/Checkbox.Skeleton.js

@@ -21,11 +21,10 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const CheckboxSkeleton = _ref => {
-  let {
-    className,
-    ...rest
-  } = _ref;
+const CheckboxSkeleton = ({
+  className,
+  ...rest
+}) => {
   const prefix = usePrefix.usePrefix();
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: cx__default["default"](`${prefix}--form-item`, `${prefix}--checkbox-wrapper`, `${prefix}--checkbox-skeleton`, className)

package/lib/components/Checkbox/Checkbox.js

@@ -27,26 +27,25 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const Checkbox = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
-  let {
-    className,
-    decorator,
-    helperText,
-    id,
-    labelText,
-    onChange = noopFn.noopFn,
-    onClick,
-    indeterminate = false,
-    invalid,
-    invalidText,
-    hideLabel,
-    readOnly,
-    title = '',
-    warn,
-    warnText,
-    slug,
-    ...other
-  } = _ref;
+const Checkbox = /*#__PURE__*/React__default["default"].forwardRef(({
+  className,
+  decorator,
+  helperText,
+  id,
+  labelText,
+  onChange = noopFn.noopFn,
+  onClick,
+  indeterminate = false,
+  invalid,
+  invalidText,
+  hideLabel,
+  readOnly,
+  title = '',
+  warn,
+  warnText,
+  slug,
+  ...other
+}, ref) => {
   const prefix = usePrefix.usePrefix();
   const showWarning = !readOnly && !invalid && warn;
   const showHelper = !invalid && !warn;

package/lib/components/CheckboxGroup/CheckboxGroup.js

@@ -24,23 +24,22 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const CheckboxGroup = _ref => {
-  let {
-    children,
-    className,
-    decorator,
-    helperText,
-    invalid,
-    invalidText,
-    legendId,
-    legendText,
-    readOnly,
-    warn,
-    warnText,
-    slug,
-    orientation = 'vertical',
-    ...rest
-  } = _ref;
+const CheckboxGroup = ({
+  children,
+  className,
+  decorator,
+  helperText,
+  invalid,
+  invalidText,
+  legendId,
+  legendText,
+  readOnly,
+  warn,
+  warnText,
+  slug,
+  orientation = 'vertical',
+  ...rest
+}) => {
   const prefix = usePrefix.usePrefix();
   const showWarning = !readOnly && !invalid && warn;
   const showHelper = !invalid && !warn;

package/lib/components/ClassPrefix/index.js

@@ -18,11 +18,10 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-function ClassPrefix(_ref) {
-  let {
-    children,
-    prefix
-  } = _ref;
+function ClassPrefix({
+  children,
+  prefix
+}) {
   return /*#__PURE__*/React__default["default"].createElement(usePrefix.PrefixContext.Provider, {
     value: prefix
   }, children);

package/lib/components/CodeSnippet/CodeSnippet.Skeleton.js

@@ -22,12 +22,11 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var _span, _span2, _span3, _span4;
-function CodeSnippetSkeleton(_ref) {
-  let {
-    className: containerClassName,
-    type = 'single',
-    ...rest
-  } = _ref;
+function CodeSnippetSkeleton({
+  className: containerClassName,
+  type = 'single',
+  ...rest
+}) {
   const prefix = usePrefix.usePrefix();
   const className = cx__default["default"](containerClassName, {
     [`${prefix}--snippet`]: true,

package/lib/components/CodeSnippet/CodeSnippet.js

@@ -13,7 +13,7 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
-var useResizeObserver = require('use-resize-observer');
+var useResizeObserver = require('../../internal/useResizeObserver.js');
 var iconsReact = require('@carbon/icons-react');
 var Copy = require('../Copy/Copy.js');
 var Button = require('../Button/Button.js');
@@ -31,7 +31,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-var useResizeObserver__default = /*#__PURE__*/_interopDefaultLegacy(useResizeObserver);
 var copy__default = /*#__PURE__*/_interopDefaultLegacy(copy);
 
 const rowHeightInPixels = 16;
@@ -39,32 +38,31 @@ const defaultMaxCollapsedNumberOfRows = 15;
 const defaultMaxExpandedNumberOfRows = 0;
 const defaultMinCollapsedNumberOfRows = 3;
 const defaultMinExpandedNumberOfRows = 16;
-function CodeSnippet(_ref) {
-  let {
-    align = 'bottom',
-    autoAlign = false,
-    className,
-    type = 'single',
-    children,
-    disabled,
-    feedback,
-    feedbackTimeout,
-    onClick,
-    ['aria-label']: ariaLabel = 'Copy to clipboard',
-    ariaLabel: deprecatedAriaLabel,
-    copyText,
-    copyButtonDescription,
-    light,
-    showMoreText = 'Show more',
-    showLessText = 'Show less',
-    hideCopyButton,
-    wrapText = false,
-    maxCollapsedNumberOfRows = defaultMaxCollapsedNumberOfRows,
-    maxExpandedNumberOfRows = defaultMaxExpandedNumberOfRows,
-    minCollapsedNumberOfRows = defaultMinCollapsedNumberOfRows,
-    minExpandedNumberOfRows = defaultMinExpandedNumberOfRows,
-    ...rest
-  } = _ref;
+function CodeSnippet({
+  align = 'bottom',
+  autoAlign = false,
+  className,
+  type = 'single',
+  children,
+  disabled,
+  feedback,
+  feedbackTimeout,
+  onClick,
+  ['aria-label']: ariaLabel = 'Copy to clipboard',
+  ariaLabel: deprecatedAriaLabel,
+  copyText,
+  copyButtonDescription,
+  light,
+  showMoreText = 'Show more',
+  showLessText = 'Show less',
+  hideCopyButton,
+  wrapText = false,
+  maxCollapsedNumberOfRows = defaultMaxCollapsedNumberOfRows,
+  maxExpandedNumberOfRows = defaultMaxExpandedNumberOfRows,
+  minCollapsedNumberOfRows = defaultMinCollapsedNumberOfRows,
+  minExpandedNumberOfRows = defaultMinExpandedNumberOfRows,
+  ...rest
+}) {
   const [expandedCode, setExpandedCode] = React.useState(false);
   const [shouldShowMoreLessBtn, setShouldShowMoreLessBtn] = React.useState(false);
   const {
@@ -112,7 +110,7 @@ function CodeSnippet(_ref) {
     setHasLeftOverflow(horizontalOverflow && !!codeScrollLeft);
     setHasRightOverflow(horizontalOverflow && codeScrollLeft + codeClientWidth !== codeScrollWidth);
   }, [type, getCodeRefDimensions]);
-  useResizeObserver__default["default"]({
+  useResizeObserver.useResizeObserver({
     // Cast the ref until the hook supports React 19
     // https://github.com/ZeeCoder/use-resize-observer/issues/108
     ref: getCodeRef(),

package/lib/components/ComboBox/ComboBox.js

@@ -65,11 +65,10 @@ const defaultItemToString = item => {
   return '';
 };
 const defaultShouldFilterItem = () => true;
-const autocompleteCustomFilter = _ref => {
-  let {
-    item,
-    inputValue
-  } = _ref;
+const autocompleteCustomFilter = ({
+  item,
+  inputValue
+}) => {
   if (inputValue === null || inputValue === '') {
     return true; // Show all items if there's no input
   }
@@ -77,13 +76,12 @@ const autocompleteCustomFilter = _ref => {
   const lowercaseInput = inputValue.toLowerCase();
   return lowercaseItem.startsWith(lowercaseInput);
 };
-const getInputValue = _ref2 => {
-  let {
-    initialSelectedItem,
-    itemToString,
-    selectedItem,
-    prevSelectedItem
-  } = _ref2;
+const getInputValue = ({
+  initialSelectedItem,
+  itemToString,
+  selectedItem,
+  prevSelectedItem
+}) => {
   // If there's a current selection (even if it's an object or string), use it.
   if (selectedItem !== null && typeof selectedItem !== 'undefined') {
     return itemToString(selectedItem);
@@ -99,11 +97,10 @@ const getInputValue = _ref2 => {
   // string.
   return '';
 };
-const findHighlightedIndex = (_ref3, inputValue) => {
-  let {
-    items,
-    itemToString = defaultItemToString
-  } = _ref3;
+const findHighlightedIndex = ({
+  items,
+  itemToString = defaultItemToString
+}, inputValue) => {
   if (!inputValue) {
     return -1;
   }
@@ -482,18 +479,16 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     itemToString: item => {
       return itemToString(item);
     },
-    onInputValueChange(_ref4) {
-      let {
-        inputValue
-      } = _ref4;
+    onInputValueChange({
+      inputValue
+    }) {
       const normalizedInput = inputValue || '';
       setInputValue(normalizedInput);
       setHighlightedIndex(indexToHighlight(normalizedInput));
     },
-    onHighlightedIndexChange: _ref5 => {
-      let {
-        highlightedIndex
-      } = _ref5;
+    onHighlightedIndexChange: ({
+      highlightedIndex
+    }) => {
       if (highlightedIndex > -1 && typeof window !== undefined) {
         const itemArray = document.querySelectorAll(`li.${prefix}--list-box__menu-item[role="option"]`);
         const highlightedItem = itemArray[highlightedIndex];
@@ -512,11 +507,10 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
       return item?.disabled;
     },
     ...downshiftProps,
-    onStateChange: _ref6 => {
-      let {
-        type,
-        selectedItem: newSelectedItem
-      } = _ref6;
+    onStateChange: ({
+      type,
+      selectedItem: newSelectedItem
+    }) => {
       downshiftProps?.onStateChange?.({
         type,
         selectedItem: newSelectedItem

package/lib/components/ComboBox/tools/filter.js

@@ -9,17 +9,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const defaultFilterItems = (items, _ref) => {
-  let {
-    itemToString,
-    inputValue
-  } = _ref;
-  return items.filter(item => {
-    if (!inputValue) {
-      return true;
-    }
-    return itemToString(item).toLowerCase().includes(inputValue.toLowerCase());
-  });
-};
+const defaultFilterItems = (items, {
+  itemToString,
+  inputValue
+}) => items.filter(item => {
+  if (!inputValue) {
+    return true;
+  }
+  return itemToString(item).toLowerCase().includes(inputValue.toLowerCase());
+});
 
 exports.defaultFilterItems = defaultFilterItems;

package/lib/components/ComboButton/index.js

@@ -46,19 +46,18 @@ const defaultTranslations = {
 function defaultTranslateWithId(messageId) {
   return defaultTranslations[messageId];
 }
-const ComboButton = /*#__PURE__*/React__default["default"].forwardRef(function ComboButton(_ref, forwardRef) {
-  let {
-    children,
-    className,
-    disabled,
-    label,
-    onClick,
-    size = 'lg',
-    menuAlignment = 'bottom',
-    tooltipAlignment,
-    translateWithId: t = defaultTranslateWithId,
-    ...rest
-  } = _ref;
+const ComboButton = /*#__PURE__*/React__default["default"].forwardRef(function ComboButton({
+  children,
+  className,
+  disabled,
+  label,
+  onClick,
+  size = 'lg',
+  menuAlignment = 'bottom',
+  tooltipAlignment,
+  translateWithId: t = defaultTranslateWithId,
+  ...rest
+}, forwardRef) {
   // feature flag utilized to separate out only the dynamic styles from @floating-ui
   // flag is turned on when collision detection (ie. flip, hide) logic is not desired
   const enableOnlyFloatingStyles = index.useFeatureFlag('enable-v12-dynamic-floating-styles');
@@ -73,11 +72,10 @@ const ComboButton = /*#__PURE__*/React__default["default"].forwardRef(function C
   }
   if (menuAlignment === 'bottom' || menuAlignment === 'top') {
     middlewares.push(react.size({
-      apply(_ref2) {
-        let {
-          rects,
-          elements
-        } = _ref2;
+      apply({
+        rects,
+        elements
+      }) {
         Object.assign(elements.floating.style, {
           width: `${rects.reference.width}px`
         });