@carbon/react 1.83.0 → 1.84.0-rc.0

package/es/components/UIShell/SideNavFooter.js

@@ -17,13 +17,12 @@ var _Close, _ChevronRight;
  * navigation that is a part of the UI Shell. It is responsible for handling the
  * user interaction to expand or collapse the side navigation.
  */
-function SideNavFooter(_ref) {
-  let {
-    assistiveText = 'Toggle opening or closing the side navigation',
-    className: customClassName,
-    expanded,
-    onToggle
-  } = _ref;
+function SideNavFooter({
+  assistiveText = 'Toggle opening or closing the side navigation',
+  className: customClassName,
+  expanded,
+  onToggle
+}) {
   const prefix = usePrefix();
   const className = cx(`${prefix}--side-nav__footer`, customClassName);
   return /*#__PURE__*/React.createElement("footer", {

package/es/components/UIShell/SideNavHeader.js

@@ -11,12 +11,11 @@ import React from 'react';
 import SideNavIcon from './SideNavIcon.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-const SideNavHeader = _ref => {
-  let {
-    children,
-    className: customClassName,
-    renderIcon: IconElement
-  } = _ref;
+const SideNavHeader = ({
+  children,
+  className: customClassName,
+  renderIcon: IconElement
+}) => {
   const prefix = usePrefix();
   const className = cx(`${prefix}--side-nav__header`, customClassName);
   return /*#__PURE__*/React.createElement("header", {

package/es/components/UIShell/SideNavIcon.js

@@ -10,12 +10,11 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-const SideNavIcon = _ref => {
-  let {
-    children,
-    className: customClassName,
-    small = false
-  } = _ref;
+const SideNavIcon = ({
+  children,
+  className: customClassName,
+  small = false
+}) => {
   const prefix = usePrefix();
   const className = cx({
     [`${prefix}--side-nav__icon`]: true,

package/es/components/UIShell/SideNavItem.js

@@ -10,12 +10,11 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-const SideNavItem = _ref => {
-  let {
-    className: customClassName,
-    children,
-    large = false
-  } = _ref;
+const SideNavItem = ({
+  className: customClassName,
+  children,
+  large = false
+}) => {
   const prefix = usePrefix();
   const className = cx({
     [`${prefix}--side-nav__item`]: true,

package/es/components/UIShell/SideNavItems.js

@@ -11,12 +11,11 @@ import React from 'react';
 import { CARBON_SIDENAV_ITEMS } from './_utils.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-const SideNavItems = _ref => {
-  let {
-    className: customClassName,
-    children,
-    isSideNavExpanded
-  } = _ref;
+const SideNavItems = ({
+  className: customClassName,
+  children,
+  isSideNavExpanded
+}) => {
   const prefix = usePrefix();
   const className = cx([`${prefix}--side-nav__items`], customClassName);
   const childrenWithExpandedState = React.Children.map(children, child => {

package/es/components/UIShell/SideNavLink.js

@@ -18,17 +18,16 @@ import { SideNavContext } from './SideNav.js';
 
 // First define a non-generic base component to work with forwardRef
 
-const SideNavLinkBase = (_ref, ref) => {
-  let {
-    children,
-    className: customClassName,
-    renderIcon: IconElement,
-    isActive,
-    isSideNavExpanded,
-    large = false,
-    tabIndex,
-    ...rest
-  } = _ref;
+const SideNavLinkBase = ({
+  children,
+  className: customClassName,
+  renderIcon: IconElement,
+  isActive,
+  isSideNavExpanded,
+  large = false,
+  tabIndex,
+  ...rest
+}, ref) => {
   const isRail = useContext(SideNavContext);
   const prefix = usePrefix();
   const className = cx({

package/es/components/UIShell/SideNavLinkText.js

@@ -11,12 +11,11 @@ import React from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 import PropTypes from 'prop-types';
 
-function SideNavLinkText(_ref) {
-  let {
-    className: customClassName,
-    children,
-    ...rest
-  } = _ref;
+function SideNavLinkText({
+  className: customClassName,
+  children,
+  ...rest
+}) {
   const prefix = usePrefix();
   const className = cx(`${prefix}--side-nav__link-text`, customClassName);
   return /*#__PURE__*/React.createElement("span", _extends({}, rest, {

package/es/components/UIShell/SideNavMenu.js

@@ -16,18 +16,17 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import { SideNavContext } from './SideNav.js';
 
 var _ChevronDown;
-const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref) {
-  let {
-    className: customClassName,
-    children,
-    defaultExpanded = false,
-    isActive = false,
-    large = false,
-    renderIcon: IconElement,
-    isSideNavExpanded,
-    tabIndex,
-    title
-  } = _ref;
+const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu({
+  className: customClassName,
+  children,
+  defaultExpanded = false,
+  isActive = false,
+  large = false,
+  renderIcon: IconElement,
+  isSideNavExpanded,
+  tabIndex,
+  title
+}, ref) {
   const {
     isRail
   } = useContext(SideNavContext);

package/es/components/UIShell/SkipToContent.js

@@ -11,14 +11,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-function SkipToContent(_ref) {
-  let {
-    children = 'Skip to main content',
-    className: customClassName,
-    href = '#main-content',
-    tabIndex = 0,
-    ...rest
-  } = _ref;
+function SkipToContent({
+  children = 'Skip to main content',
+  className: customClassName,
+  href = '#main-content',
+  tabIndex = 0,
+  ...rest
+}) {
   const prefix = usePrefix();
   const className = cx(`${prefix}--skip-to-content`, customClassName);
   return /*#__PURE__*/React.createElement("a", _extends({}, rest, {

package/es/components/UIShell/Switcher.js

@@ -32,11 +32,10 @@ const Switcher = /*#__PURE__*/forwardRef(function Switcher(props, forwardRef) {
   const className = cx(`${prefix}--switcher`, {
     [customClassName || '']: !!customClassName
   });
-  const handleSwitcherItemFocus = _ref => {
-    let {
-      currentIndex,
-      direction
-    } = _ref;
+  const handleSwitcherItemFocus = ({
+    currentIndex,
+    direction
+  }) => {
     const enabledIndices = React.Children.toArray(children).reduce((acc, curr, i) => {
       if (/*#__PURE__*/React.isValidElement(curr) && Object.keys(curr.props).length !== 0 && curr.type === SwitcherItem) {
         acc.push(i);

package/es/components/UIShell/SwitcherDivider.js

@@ -11,11 +11,10 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-const SwitcherDivider = _ref => {
-  let {
-    className: customClassName,
-    ...other
-  } = _ref;
+const SwitcherDivider = ({
+  className: customClassName,
+  ...other
+}) => {
   const prefix = usePrefix();
   const classNames = cx(`${prefix}--switcher__item--divider`, {
     [customClassName || '']: !!customClassName

package/es/components/UnorderedList/UnorderedList.js

@@ -11,13 +11,12 @@ import React from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-function UnorderedList(_ref) {
-  let {
-    className,
-    nested = false,
-    isExpressive = false,
-    ...other
-  } = _ref;
+function UnorderedList({
+  className,
+  nested = false,
+  isExpressive = false,
+  ...other
+}) {
   const prefix = usePrefix();
   const classNames = cx(`${prefix}--list--unordered`, className, {
     [`${prefix}--list--nested`]: nested,

package/es/index.js

@@ -28,7 +28,7 @@ export { default as ComposedModal, ModalBody } from './components/ComposedModal/
 export { ModalHeader } from './components/ComposedModal/ModalHeader.js';
 export { ModalFooter } from './components/ComposedModal/ModalFooter.js';
 import './components/ContainedList/index.js';
-export { default as ContentSwitcher } from './components/ContentSwitcher/index.js';
+export { ContentSwitcher } from './components/ContentSwitcher/ContentSwitcher.js';
 export { default as useContextMenu } from './components/ContextMenu/useContextMenu.js';
 export { default as Copy } from './components/Copy/Copy.js';
 export { default as CopyButton } from './components/CopyButton/CopyButton.js';
@@ -162,7 +162,7 @@ export { default as Header } from './components/UIShell/Header.js';
 export { default as HeaderContainer } from './components/UIShell/HeaderContainer.js';
 export { default as HeaderGlobalAction } from './components/UIShell/HeaderGlobalAction.js';
 export { default as HeaderGlobalBar } from './components/UIShell/HeaderGlobalBar.js';
-export { default as HeaderMenu } from './components/UIShell/HeaderMenu.js';
+export { HeaderMenu } from './components/UIShell/HeaderMenu.js';
 export { default as HeaderMenuButton } from './components/UIShell/HeaderMenuButton.js';
 export { default as HeaderMenuItem } from './components/UIShell/HeaderMenuItem.js';
 export { default as HeaderName } from './components/UIShell/HeaderName.js';

package/es/internal/FloatingMenu.js

@@ -25,16 +25,15 @@ const DIRECTION_BOTTOM = 'bottom';
  * Computes the floating menu's position based on the menu size, trigger element
  * position, offset, direction, and container.
  */
-const getFloatingPosition = _ref => {
-  let {
-    menuSize,
-    refPosition,
-    offset,
-    direction,
-    scrollX,
-    scrollY,
-    container
-  } = _ref;
+const getFloatingPosition = ({
+  menuSize,
+  refPosition,
+  offset,
+  direction,
+  scrollX,
+  scrollY,
+  container
+}) => {
   const {
     left: refLeft = 0,
     top: refTop = 0,
@@ -77,24 +76,23 @@ const getFloatingPosition = _ref => {
   };
   return positions[direction]();
 };
-const FloatingMenu = _ref2 => {
-  let {
-    children,
-    flipped,
-    focusTrap,
-    menuDirection = DIRECTION_BOTTOM,
-    menuOffset = {
-      top: 0,
-      left: 0
-    },
-    menuRef: externalMenuRef,
-    onPlace,
-    selectorPrimaryFocus,
-    styles,
-    target = () => document.body,
-    triggerRef,
-    updateOrientation
-  } = _ref2;
+const FloatingMenu = ({
+  children,
+  flipped,
+  focusTrap,
+  menuDirection = DIRECTION_BOTTOM,
+  menuOffset = {
+    top: 0,
+    left: 0
+  },
+  menuRef: externalMenuRef,
+  onPlace,
+  selectorPrimaryFocus,
+  styles,
+  target = () => document.body,
+  triggerRef,
+  updateOrientation
+}) => {
   const prefix = useContext(PrefixContext);
   const [floatingPosition, setFloatingPosition] = useState(undefined);
   const menuBodyRef = useRef(null);

package/es/internal/Selection.js

@@ -8,14 +8,13 @@
 import { useRef, useState, useCallback, useEffect } from 'react';
 import isEqual from 'react-fast-compare';
 
-const callOnChangeHandler = _ref => {
-  let {
-    isControlled,
-    isMounted,
-    onChangeHandlerControlled,
-    onChangeHandlerUncontrolled,
-    selectedItems
-  } = _ref;
+const callOnChangeHandler = ({
+  isControlled,
+  isMounted,
+  onChangeHandlerControlled,
+  onChangeHandlerUncontrolled,
+  selectedItems
+}) => {
   if (isControlled) {
     if (isMounted && onChangeHandlerControlled) {
       onChangeHandlerControlled({
@@ -26,15 +25,14 @@ const callOnChangeHandler = _ref => {
     onChangeHandlerUncontrolled(selectedItems);
   }
 };
-const useSelection = _ref2 => {
-  let {
-    disabled,
-    onChange,
-    initialSelectedItems = [],
-    selectedItems: controlledItems,
-    selectAll = false,
-    filteredItems = []
-  } = _ref2;
+const useSelection = ({
+  disabled,
+  onChange,
+  initialSelectedItems = [],
+  selectedItems: controlledItems,
+  selectAll = false,
+  filteredItems = []
+}) => {
   const isMounted = useRef(false);
   const savedOnChange = useRef(onChange);
   const [uncontrolledItems, setUncontrolledItems] = useState(initialSelectedItems);

package/es/internal/getAnnouncement.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2016, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/** Returns an announcement message when the remaining count is low. */
+export declare const getAnnouncement: (count: number, maxCount?: number, singularEntityName?: string, pluralEntityName?: string) => string | null;

package/es/internal/getAnnouncement.js

@@ -0,0 +1,22 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** Returns an announcement message when the remaining count is low. */
+const getAnnouncement = (count, maxCount, singularEntityName = 'character', pluralEntityName = 'characters') => {
+  if (typeof maxCount === 'undefined') return null;
+  const remaining = maxCount - count;
+  if (remaining <= 10 && remaining > 0) {
+    const entityName = remaining === 1 ? singularEntityName : pluralEntityName;
+    return `${remaining} ${entityName} left.`;
+  }
+  if (remaining <= 0) {
+    return `Maximum ${pluralEntityName} reached.`;
+  }
+  return null;
+};
+
+export { getAnnouncement };

package/es/internal/keyboard/match.js

@@ -30,13 +30,12 @@ const matches = (event, keysToMatch) => {
  * @param keyObj - An object with key properties to match against.
  * @returns `true` if the event or code matches the key definition.
  */
-const match = (eventOrCode, _ref) => {
-  let {
-    key,
-    which,
-    keyCode,
-    code
-  } = _ref;
+const match = (eventOrCode, {
+  key,
+  which,
+  keyCode,
+  code
+}) => {
   if (typeof eventOrCode === 'string') {
     return eventOrCode === key;
   }

package/es/internal/useControllableState.d.ts

@@ -30,5 +30,5 @@ interface UseControllableStateConfig<T> {
  * Note: This hook will warn if the component switches between controlled and
  * uncontrolled states.
  */
-export declare const useControllableState: <T>({ defaultValue, name, onChange, value, }: UseControllableStateConfig<T>) => [T, (stateOrUpdater: T | ((prev: T) => T)) => void];
+export declare const useControllableState: <T>({ defaultValue, name, onChange, value, }: UseControllableStateConfig<T>) => [T, (stateOrUpdater: T | ((prev: T) => T)) => void, boolean];
 export {};

package/es/internal/useControllableState.js

@@ -16,13 +16,12 @@ import { warning } from './warning.js';
  * Note: This hook will warn if the component switches between controlled and
  * uncontrolled states.
  */
-const useControllableState = _ref => {
-  let {
-    defaultValue,
-    name = 'custom',
-    onChange,
-    value
-  } = _ref;
+const useControllableState = ({
+  defaultValue,
+  name = 'custom',
+  onChange,
+  value
+}) => {
   const [state, internalSetState] = useState(typeof value !== 'undefined' ? value : defaultValue);
   const controlled = useRef(null);
   if (controlled.current === null) {
@@ -51,9 +50,9 @@ const useControllableState = _ref => {
     }
   }, [name, value]);
   if (controlled.current === true) {
-    return [value, setState];
+    return [value, setState, controlled.current];
   }
-  return [state, setState];
+  return [state, setState, controlled.current];
 };
 
 export { useControllableState };

package/es/internal/useDelayedState.js

@@ -23,8 +23,7 @@ function useDelayedState(initialState) {
   const timeoutId = useRef(null);
   // We use `useCallback` to match the signature of React's `useState` which will
   // always return the same reference for the `setState` updater
-  const setStateWithDelay = useCallback(function (stateToSet) {
-    let delayMs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  const setStateWithDelay = useCallback((stateToSet, delayMs = 0) => {
     window.clearTimeout(timeoutId.current ?? undefined);
     timeoutId.current = null;
     if (delayMs === 0) {

package/es/internal/useDocumentLang.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * React hook that returns the current document language and updates on changes.
+ *
+ * @returns {string} The current document language code.
+ */
+export declare function useDocumentLang(): string;

package/es/internal/useId.js

@@ -30,8 +30,7 @@ const defaultId = 'id';
  * @param {string} [prefix]
  * @returns {string}
  */
-function useCompatibleId() {
-  let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultId;
+function useCompatibleId(prefix = defaultId) {
   const contextPrefix = useIdPrefix();
   const [id, setId] = useState(() => {
     if (serverHandoffCompleted) {
@@ -58,8 +57,7 @@ function useCompatibleId() {
  * @param {string} [prefix]
  * @returns {string}
  */
-function useReactId() {
-  let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultId;
+function useReactId(prefix = defaultId) {
   const contextPrefix = useIdPrefix();
   return `${contextPrefix ? `${contextPrefix}-` : ``}${prefix}-${_React.useId()}`;
 }

package/es/internal/useMatchMedia.js

@@ -13,8 +13,7 @@ import { useState, useEffect } from 'react';
  * @param defaultState - The initial state to return before the media query is evaluated. Defaults to `false`.
  * @returns Whether the media query matches.
  */
-const useMatchMedia = function (mediaQuery) {
-  let defaultState = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+const useMatchMedia = (mediaQuery, defaultState = false) => {
   const [matches, setMatches] = useState(defaultState);
   useEffect(() => {
     const listener = event => {

package/es/internal/useMergedRefs.d.ts

@@ -13,4 +13,4 @@ import { type ForwardedRef, type Ref } from 'react';
  * accepts an array of refs and returns a callback ref that, when attached to a
  * node, assigns that node to every ref in the array.
  */
-export declare const useMergedRefs: <T>(refs: ForwardedRef<T>[]) => Ref<T>;
+export declare const useMergedRefs: <T>(refs: (ForwardedRef<T> | undefined)[]) => Ref<T>;

package/es/internal/useNoInteractiveChildren.js

@@ -7,8 +7,7 @@
 
 import { useEffect } from 'react';
 
-function useNoInteractiveChildren(ref) {
-  let message = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'component should have no interactive child nodes';
+function useNoInteractiveChildren(ref, message = 'component should have no interactive child nodes') {
   if (process.env.NODE_ENV !== 'production') {
     // TODO: https://github.com/carbon-design-system/carbon/issues/19005
     /*
@@ -25,8 +24,7 @@ function useNoInteractiveChildren(ref) {
     }, []);
   }
 }
-function useInteractiveChildrenNeedDescription(ref) {
-  let message = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : `interactive child node(s) should have an \`aria-describedby\` property`;
+function useInteractiveChildrenNeedDescription(ref, message = `interactive child node(s) should have an \`aria-describedby\` property`) {
   if (process.env.NODE_ENV !== 'production') {
     // TODO: https://github.com/carbon-design-system/carbon/issues/19005
     /*

package/es/internal/useNormalizedInputProps.js

@@ -20,16 +20,15 @@ import { Text } from '../components/Text/Text.js';
  * helper messages, and conditionally provides the appropriate validation
  * message and accompanying icon.
  */
-const useNormalizedInputProps = _ref => {
-  let {
-    id,
-    readOnly,
-    disabled,
-    invalid,
-    invalidText,
-    warn,
-    warnText
-  } = _ref;
+const useNormalizedInputProps = ({
+  id,
+  readOnly,
+  disabled,
+  invalid,
+  invalidText,
+  warn,
+  warnText
+}) => {
   const prefix = usePrefix();
   const normalizedProps = {
     disabled: !readOnly && disabled,

package/es/internal/useResizeObserver.js

@@ -7,11 +7,10 @@
 
 import { useState, useRef, useEffect, useLayoutEffect } from 'react';
 
-const useResizeObserver = _ref => {
-  let {
-    ref,
-    onResize
-  } = _ref;
+const useResizeObserver = ({
+  ref,
+  onResize
+}) => {
   const [width, setWidth] = useState(-1);
   const [height, setHeight] = useState(-1);
   const entriesToHandle = useRef(null);

package/es/internal/useSavedCallback.js

@@ -20,9 +20,7 @@ const useSavedCallback = callback => {
   useEffect(() => {
     savedCallback.current = callback;
   }, [callback]);
-  return useCallback(function () {
-    return savedCallback.current ? savedCallback.current(...arguments) : undefined;
-  }, []);
+  return useCallback((...args) => savedCallback.current ? savedCallback.current(...args) : undefined, []);
 };
 
 export { useSavedCallback };