@carbon/react 1.83.0 → 1.84.0-rc.0

package/es/components/InlineLoading/InlineLoading.js

@@ -13,16 +13,15 @@ import { ErrorFilled, CheckmarkFilled } from '@carbon/icons-react';
 import Loading from '../Loading/Loading.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-const InlineLoading = _ref => {
-  let {
-    className,
-    status = 'active',
-    iconDescription,
-    description,
-    onSuccess,
-    successDelay = 1500,
-    ...rest
-  } = _ref;
+const InlineLoading = ({
+  className,
+  status = 'active',
+  iconDescription,
+  description,
+  onSuccess,
+  successDelay = 1500,
+  ...rest
+}) => {
   const prefix = usePrefix();
   const loadingClasses = cx(`${prefix}--inline-loading`, className);
   const timerRef = useRef(null);

package/es/components/Layer/index.js

@@ -25,15 +25,14 @@ function useLayer() {
     level
   };
 }
-const Layer = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    as,
-    className: customClassName,
-    children,
-    level: overrideLevel,
-    withBackground = false,
-    ...rest
-  } = _ref;
+const Layer = /*#__PURE__*/React.forwardRef(({
+  as,
+  className: customClassName,
+  children,
+  level: overrideLevel,
+  withBackground = false,
+  ...rest
+}, ref) => {
   const contextLevel = React.useContext(LayerContext);
   const level = overrideLevel ?? contextLevel;
   const prefix = usePrefix();

package/es/components/Layout/index.js

@@ -22,15 +22,14 @@ const densities = ['condensed', 'normal'];
  * Size of components within this layout
  */
 
-const Layout = /*#__PURE__*/React.forwardRef(function Layout(_ref, forwardRef) {
-  let {
-    as: BaseComponent = 'div',
-    children,
-    className,
-    density,
-    size,
-    ...rest
-  } = _ref;
+const Layout = /*#__PURE__*/React.forwardRef(function Layout({
+  as: BaseComponent = 'div',
+  children,
+  className,
+  density,
+  size,
+  ...rest
+}, forwardRef) {
   const prefix = usePrefix();
   const classes = cx(className, `${prefix}--layout`, {
     [`${prefix}--layout--size-${size}`]: size && sizes.includes(size),
@@ -65,27 +64,23 @@ Layout.propTypes = {
    */
   size: PropTypes.oneOf(sizes)
 };
-const LayoutConstraint = /*#__PURE__*/React.forwardRef(function Layout(_ref2, forwardRef) {
-  let {
-    as: BaseComponent = 'div',
-    children,
-    className,
-    density,
-    size,
-    ...rest
-  } = _ref2;
+const LayoutConstraint = /*#__PURE__*/React.forwardRef(function Layout({
+  as: BaseComponent = 'div',
+  children,
+  className,
+  density,
+  size,
+  ...rest
+}, forwardRef) {
   const prefix = usePrefix();
   const classes = cx(className, Object.entries({
     size,
     density
-  }).map(_ref3 => {
-    let [group, constraints] = _ref3;
-    return {
-      [`${prefix}--layout-constraint--${group}__default-${constraints?.default}`]: constraints?.default,
-      [`${prefix}--layout-constraint--${group}__min-${constraints?.min}`]: constraints?.min,
-      [`${prefix}--layout-constraint--${group}__max-${constraints?.max}`]: constraints?.max
-    };
-  }));
+  }).map(([group, constraints]) => ({
+    [`${prefix}--layout-constraint--${group}__default-${constraints?.default}`]: constraints?.default,
+    [`${prefix}--layout-constraint--${group}__min-${constraints?.min}`]: constraints?.min,
+    [`${prefix}--layout-constraint--${group}__max-${constraints?.max}`]: constraints?.max
+  })));
   return /*#__PURE__*/React.createElement(BaseComponent, _extends({}, rest, {
     ref: forwardRef,
     className: classes

package/es/components/LayoutDirection/LayoutDirection.js

@@ -11,13 +11,12 @@ import React from 'react';
 import { LayoutDirectionContext } from './LayoutDirectionContext.js';
 export { LayoutDirectionContext } from './LayoutDirectionContext.js';
 
-function LayoutDirection(_ref) {
-  let {
-    as: BaseComponent = 'div',
-    children,
-    dir,
-    ...rest
-  } = _ref;
+function LayoutDirection({
+  as: BaseComponent = 'div',
+  children,
+  dir,
+  ...rest
+}) {
   const value = React.useMemo(() => {
     return {
       direction: dir

package/es/components/Link/Link.d.ts

@@ -35,7 +35,7 @@ export interface LinkBaseProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
      */
     renderIcon?: ComponentType;
     /**
-     * Specify the size of the Link. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
+     * Specify the size of the Link. Currently supports either `sm`, `md` (default) or `lg` as an option.
      */
     size?: 'sm' | 'md' | 'lg';
     /**

package/es/components/Link/Link.js

@@ -12,20 +12,19 @@ import React from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 
 // First create the component with basic types
-const LinkBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    as: BaseComponent,
-    children,
-    className: customClassName,
-    href,
-    disabled = false,
-    inline = false,
-    visited = false,
-    renderIcon: Icon,
-    size,
-    target,
-    ...rest
-  } = _ref;
+const LinkBase = /*#__PURE__*/React.forwardRef(({
+  as: BaseComponent,
+  children,
+  className: customClassName,
+  href,
+  disabled = false,
+  inline = false,
+  visited = false,
+  renderIcon: Icon,
+  size,
+  target,
+  ...rest
+}, ref) => {
   const prefix = usePrefix();
   const className = cx(`${prefix}--link`, customClassName, {
     [`${prefix}--link--disabled`]: disabled,
@@ -88,7 +87,7 @@ Link.propTypes = {
    */
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
-   * Specify the size of the Link. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
+   * Specify the size of the Link. Currently supports either `sm`, `md` (default) or `lg` as an option.
    */
   size: PropTypes.oneOf(['sm', 'md', 'lg']),
   /**

package/es/components/ListBox/ListBoxField.js

@@ -15,13 +15,12 @@ import { usePrefix } from '../../internal/usePrefix.js';
  * elements inside of a field. It also provides a11y-related attributes like
  * `role` to make sure a user can focus the given field.
  */
-function ListBoxField(_ref) {
-  let {
-    children,
-    disabled,
-    tabIndex,
-    ...rest
-  } = _ref;
+function ListBoxField({
+  children,
+  disabled,
+  tabIndex,
+  ...rest
+}) {
   const prefix = usePrefix();
   return /*#__PURE__*/React.createElement("div", _extends({
     className: `${prefix}--list-box__field`,

package/es/components/ListBox/ListBoxMenu.js

@@ -18,12 +18,11 @@ const frFn = forwardRef;
  * class into a single component. It is also being used to validate given
  * `children` components.
  */
-const ListBoxMenu = frFn((_ref, ref) => {
-  let {
-    children,
-    id,
-    ...rest
-  } = _ref;
+const ListBoxMenu = frFn(({
+  children,
+  id,
+  ...rest
+}, ref) => {
   const prefix = usePrefix();
   return /*#__PURE__*/React.createElement("ul", _extends({
     ref: ref,

package/es/components/ListBox/ListBoxMenuIcon.js

@@ -20,11 +20,10 @@ 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`
  */
-const ListBoxMenuIcon = _ref => {
-  let {
-    isOpen,
-    translateWithId: t = defaultTranslateWithId
-  } = _ref;
+const ListBoxMenuIcon = ({
+  isOpen,
+  translateWithId: t = defaultTranslateWithId
+}) => {
   const prefix = usePrefix();
   const className = cx(`${prefix}--list-box__menu-icon`, {
     [`${prefix}--list-box__menu-icon--open`]: isOpen

package/es/components/ListBox/ListBoxMenuItem.js

@@ -22,8 +22,7 @@ import { useMergedRefs } from '../../internal/useMergedRefs.js';
  * @param deps - Dependencies to re-run the truncation check.
  * @returns An object containing the truncation state and the merged ref.
  */
-const useIsTruncated = function (forwardedRef) {
-  let deps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+const useIsTruncated = (forwardedRef, deps = []) => {
   const localRef = useRef(null);
   const mergedRef = useMergedRefs([...(forwardedRef ? [forwardedRef] : []), localRef]);
   const [isTruncated, setIsTruncated] = useState(false);
@@ -47,14 +46,13 @@ const useIsTruncated = function (forwardedRef) {
  * name, alongside any classes for any corresponding states, for a generic list
  * box menu item.
  */
-const ListBoxMenuItem = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
-  let {
-    children,
-    isActive = false,
-    isHighlighted = false,
-    title,
-    ...rest
-  } = _ref;
+const ListBoxMenuItem = /*#__PURE__*/forwardRef(({
+  children,
+  isActive = false,
+  isHighlighted = false,
+  title,
+  ...rest
+}, forwardedRef) => {
   const prefix = usePrefix();
   const menuItemOptionRefProp = forwardedRef && typeof forwardedRef !== 'function' ? forwardedRef.menuItemOptionRef : undefined;
   const {

package/es/components/ListBox/ListBoxSelection.js

@@ -32,15 +32,14 @@ const defaultTranslateWithId = id => defaultTranslations[id];
  * addition to conditionally rendering a badge if the control has more than one
  * selection.
  */
-const ListBoxSelection = _ref => {
-  let {
-    clearSelection,
-    selectionCount,
-    translateWithId: t = defaultTranslateWithId,
-    disabled,
-    onClearSelection,
-    readOnly
-  } = _ref;
+const ListBoxSelection = ({
+  clearSelection,
+  selectionCount,
+  translateWithId: t = defaultTranslateWithId,
+  disabled,
+  onClearSelection,
+  readOnly
+}) => {
   const prefix = usePrefix();
   const className = cx(`${prefix}--list-box__selection`, {
     [`${prefix}--tag--filter`]: selectionCount,

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

@@ -20,16 +20,15 @@ const defaultTranslations = {
 function defaultTranslateWithId(id) {
   return defaultTranslations[id];
 }
-function ListBoxSelection(_ref) {
-  let {
-    clearSelection,
-    selectionCount,
-    translateWithId: t = defaultTranslateWithId,
-    disabled,
-    readOnly,
-    onClearSelection,
-    ...rest
-  } = _ref;
+function ListBoxSelection({
+  clearSelection,
+  selectionCount,
+  translateWithId: t = defaultTranslateWithId,
+  disabled,
+  readOnly,
+  onClearSelection,
+  ...rest
+}) {
   const prefix = usePrefix();
   const className = cx(`${prefix}--list-box__selection`, {
     [`${prefix}--tag--filter`]: selectionCount,

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

@@ -27,12 +27,11 @@ const defaultTranslateWithId = id => defaultTranslations[id];
  * state of the menu for a given `ListBox`
  */
 
-const ListBoxTrigger = /*#__PURE__*/React.forwardRef(function ListBoxTrigger(_ref, ref) {
-  let {
-    isOpen,
-    translateWithId: t = defaultTranslateWithId,
-    ...rest
-  } = _ref;
+const ListBoxTrigger = /*#__PURE__*/React.forwardRef(function ListBoxTrigger({
+  isOpen,
+  translateWithId: t = defaultTranslateWithId,
+  ...rest
+}, ref) {
   const prefix = usePrefix();
   const className = cx({
     [`${prefix}--list-box__menu-icon`]: true,

package/es/components/ListItem/ListItem.js

@@ -13,12 +13,11 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import '../Text/index.js';
 import { Text } from '../Text/Text.js';
 
-function ListItem(_ref) {
-  let {
-    className,
-    children,
-    ...other
-  } = _ref;
+function ListItem({
+  className,
+  children,
+  ...other
+}) {
   const prefix = usePrefix();
   const classNames = cx(`${prefix}--list__item`, className);
   return /*#__PURE__*/React.createElement(Text, _extends({

package/es/components/Loading/Loading.js

@@ -12,15 +12,14 @@ import React from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 import deprecate from '../../prop-types/deprecate.js';
 
-function Loading(_ref) {
-  let {
-    active = true,
-    className: customClassName,
-    withOverlay = true,
-    small = false,
-    description = 'loading',
-    ...rest
-  } = _ref;
+function Loading({
+  active = true,
+  className: customClassName,
+  withOverlay = true,
+  small = false,
+  description = 'loading',
+  ...rest
+}) {
   const prefix = usePrefix();
   const loadingClassName = cx(customClassName, {
     [`${prefix}--loading`]: true,

package/es/components/Menu/Menu.js

@@ -22,30 +22,29 @@ import { canUseDOM } from '../../internal/environment.js';
 
 const spacing = 8; // distance to keep to window edges, in px
 
-const Menu = /*#__PURE__*/forwardRef(function Menu(_ref, forwardRef) {
-  let {
-    children,
-    className,
-    containerRef,
-    label,
-    menuAlignment,
-    mode,
-    onClose,
-    onOpen,
-    open,
-    size = 'sm',
-    legacyAutoalign = 'true',
-    // TODO: `ssr-friendly` doesn't support ESLint v9.
-    // https://github.com/kopiro/eslint-plugin-ssr-friendly/issues/30
-    // https://github.com/carbon-design-system/carbon/issues/18991
-    /*
-    // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
-    */
-    target = canUseDOM && document.body,
-    x = 0,
-    y = 0,
-    ...rest
-  } = _ref;
+const Menu = /*#__PURE__*/forwardRef(function Menu({
+  children,
+  className,
+  containerRef,
+  label,
+  menuAlignment,
+  mode,
+  onClose,
+  onOpen,
+  open,
+  size = 'sm',
+  legacyAutoalign = 'true',
+  // TODO: `ssr-friendly` doesn't support ESLint v9.
+  // https://github.com/kopiro/eslint-plugin-ssr-friendly/issues/30
+  // https://github.com/carbon-design-system/carbon/issues/18991
+  /*
+  // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
+  */
+  target = canUseDOM && document.body,
+  x = 0,
+  y = 0,
+  ...rest
+}, forwardRef) {
   const prefix = usePrefix();
   const focusReturn = useRef(null);
   const context = useContext(MenuContext);

package/es/components/Menu/MenuItem.js

@@ -24,18 +24,17 @@ import '../Text/index.js';
 import { Text } from '../Text/Text.js';
 
 var _Checkmark, _CaretLeft, _CaretRight;
-const MenuItem = /*#__PURE__*/forwardRef(function MenuItem(_ref, forwardRef) {
-  let {
-    children,
-    className,
-    disabled,
-    kind = 'default',
-    label,
-    onClick,
-    renderIcon: IconElement,
-    shortcut,
-    ...rest
-  } = _ref;
+const MenuItem = /*#__PURE__*/forwardRef(function MenuItem({
+  children,
+  className,
+  disabled,
+  kind = 'default',
+  label,
+  onClick,
+  renderIcon: IconElement,
+  shortcut,
+  ...rest
+}, forwardRef) {
   const [submenuOpen, setSubmenuOpen] = useState(false);
   const [rtl, setRtl] = useState(false);
   const {
@@ -234,15 +233,14 @@ MenuItem.propTypes = {
   // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   shortcut: PropTypes.string
 };
-const MenuItemSelectable = /*#__PURE__*/forwardRef(function MenuItemSelectable(_ref2, forwardRef) {
-  let {
-    className,
-    defaultSelected,
-    label,
-    onChange,
-    selected,
-    ...rest
-  } = _ref2;
+const MenuItemSelectable = /*#__PURE__*/forwardRef(function MenuItemSelectable({
+  className,
+  defaultSelected,
+  label,
+  onChange,
+  selected,
+  ...rest
+}, forwardRef) {
   const prefix = usePrefix();
   const context = useContext(MenuContext);
   const [checked, setChecked] = useControllableState({
@@ -296,13 +294,12 @@ MenuItemSelectable.propTypes = {
   // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   selected: PropTypes.bool
 };
-const MenuItemGroup = /*#__PURE__*/forwardRef(function MenuItemGroup(_ref3, forwardRef) {
-  let {
-    children,
-    className,
-    label,
-    ...rest
-  } = _ref3;
+const MenuItemGroup = /*#__PURE__*/forwardRef(function MenuItemGroup({
+  children,
+  className,
+  label,
+  ...rest
+}, forwardRef) {
   const prefix = usePrefix();
   const classNames = cx(className, `${prefix}--menu-item-group`);
   return /*#__PURE__*/React.createElement("li", {
@@ -329,17 +326,16 @@ MenuItemGroup.propTypes = {
   label: PropTypes.string.isRequired
 };
 const defaultItemToString = item => item.toString();
-const MenuItemRadioGroup = /*#__PURE__*/forwardRef(function MenuItemRadioGroup(_ref4, forwardRef) {
-  let {
-    className,
-    defaultSelectedItem,
-    items,
-    itemToString = defaultItemToString,
-    label,
-    onChange,
-    selectedItem,
-    ...rest
-  } = _ref4;
+const MenuItemRadioGroup = /*#__PURE__*/forwardRef(function MenuItemRadioGroup({
+  className,
+  defaultSelectedItem,
+  items,
+  itemToString = defaultItemToString,
+  label,
+  onChange,
+  selectedItem,
+  ...rest
+}, forwardRef) {
   const prefix = usePrefix();
   const context = useContext(MenuContext);
   const [selection, setSelection] = useControllableState({
@@ -409,11 +405,10 @@ MenuItemRadioGroup.propTypes = {
    */
   selectedItem: PropTypes.any
 };
-const MenuItemDivider = /*#__PURE__*/forwardRef(function MenuItemDivider(_ref5, forwardRef) {
-  let {
-    className,
-    ...rest
-  } = _ref5;
+const MenuItemDivider = /*#__PURE__*/forwardRef(function MenuItemDivider({
+  className,
+  ...rest
+}, forwardRef) {
   const prefix = usePrefix();
   const classNames = cx(className, `${prefix}--menu-item-divider`);
   return /*#__PURE__*/React.createElement("li", _extends({}, rest, {

package/es/components/MenuButton/index.js

@@ -23,19 +23,18 @@ import mergeRefs from '../../tools/mergeRefs.js';
 
 const validButtonKinds = ['primary', 'tertiary', 'ghost'];
 const defaultButtonKind = 'primary';
-const MenuButton = /*#__PURE__*/forwardRef(function MenuButton(_ref, forwardRef) {
-  let {
-    children,
-    className,
-    disabled,
-    kind = defaultButtonKind,
-    label,
-    size: size$1 = 'lg',
-    menuAlignment = 'bottom',
-    tabIndex = 0,
-    menuTarget,
-    ...rest
-  } = _ref;
+const MenuButton = /*#__PURE__*/forwardRef(function MenuButton({
+  children,
+  className,
+  disabled,
+  kind = defaultButtonKind,
+  label,
+  size: size$1 = 'lg',
+  menuAlignment = 'bottom',
+  tabIndex = 0,
+  menuTarget,
+  ...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 = useFeatureFlag('enable-v12-dynamic-floating-styles');
@@ -50,11 +49,10 @@ const MenuButton = /*#__PURE__*/forwardRef(function MenuButton(_ref, forwardRef)
   }
   if (menuAlignment === 'bottom' || menuAlignment === 'top') {
     middlewares.push(size({
-      apply(_ref2) {
-        let {
-          rects,
-          elements
-        } = _ref2;
+      apply({
+        rects,
+        elements
+      }) {
         Object.assign(elements.floating.style, {
           width: `${rects.reference.width}px`
         });