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

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -73,48 +73,47 @@ const {
  * ends up just being defined as "string".)
  */
 
-const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableMultiSelect(_ref, ref) {
-  let {
-    autoAlign = false,
-    className: containerClassName,
-    clearSelectionDescription = 'Total items selected: ',
-    clearSelectionText = 'To clear selection, press Delete or Backspace',
-    compareItems = sorting.defaultCompareItems,
-    decorator,
-    direction = 'bottom',
-    disabled = false,
-    downshiftProps,
-    filterItems = filter.defaultFilterItems,
-    helperText,
-    hideLabel,
-    id,
-    initialSelectedItems = [],
-    invalid,
-    invalidText,
-    items,
-    itemToElement: ItemToElement,
-    // needs to be capitalized for react to render it correctly
-    itemToString: itemToString$1 = itemToString.defaultItemToString,
-    light,
-    locale = 'en',
-    onInputValueChange,
-    open = false,
-    onChange,
-    onMenuChange,
-    placeholder,
-    readOnly,
-    titleText,
-    type,
-    selectionFeedback = 'top-after-reopen',
-    selectedItems: selected,
-    size,
-    sortItems = sorting.defaultSortItems,
-    translateWithId,
-    useTitleInItem,
-    warn,
-    warnText,
-    slug
-  } = _ref;
+const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableMultiSelect({
+  autoAlign = false,
+  className: containerClassName,
+  clearSelectionDescription = 'Total items selected: ',
+  clearSelectionText = 'To clear selection, press Delete or Backspace',
+  compareItems = sorting.defaultCompareItems,
+  decorator,
+  direction = 'bottom',
+  disabled = false,
+  downshiftProps,
+  filterItems = filter.defaultFilterItems,
+  helperText,
+  hideLabel,
+  id,
+  initialSelectedItems = [],
+  invalid,
+  invalidText,
+  items,
+  itemToElement: ItemToElement,
+  // needs to be capitalized for react to render it correctly
+  itemToString: itemToString$1 = itemToString.defaultItemToString,
+  light,
+  locale = 'en',
+  onInputValueChange,
+  open = false,
+  onChange,
+  onMenuChange,
+  placeholder,
+  readOnly,
+  titleText,
+  type,
+  selectionFeedback = 'top-after-reopen',
+  selectedItems: selected,
+  size,
+  sortItems = sorting.defaultSortItems,
+  translateWithId,
+  useTitleInItem,
+  warn,
+  warnText,
+  slug
+}, ref) {
   const {
     isFluid
   } = React.useContext(FormContext.FormContext);
@@ -150,11 +149,10 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
     middleware: [react.flip({
       crossAxis: false
     }), react.size({
-      apply(_ref2) {
-        let {
-          rects,
-          elements
-        } = _ref2;
+      apply({
+        rects,
+        elements
+      }) {
         Object.assign(elements.floating.style, {
           width: `${rects.reference.width}px`
         });
@@ -555,11 +553,7 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
       }
     }
   } : {};
-  const clearSelectionContent = controlledSelectedItems.length > 0 ? /*#__PURE__*/React__default["default"].createElement("span", {
-    className: `${prefix}--visually-hidden`
-  }, clearSelectionDescription, " ", controlledSelectedItems.length, ",", clearSelectionText) : /*#__PURE__*/React__default["default"].createElement("span", {
-    className: `${prefix}--visually-hidden`
-  }, clearSelectionDescription, ": 0");
+  const clearSelectionContent = controlledSelectedItems.length > 0 ? `${clearSelectionDescription} ${controlledSelectedItems.length}. ${clearSelectionText}.` : `${clearSelectionDescription} 0.`;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: wrapperClasses
   }, titleText ? /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({

package/lib/components/MultiSelect/MultiSelect.js

@@ -69,46 +69,45 @@ const defaultItemToString = item => {
   }
   return '';
 };
-const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
-  let {
-    autoAlign = false,
-    className: containerClassName,
-    decorator,
-    id,
-    items,
-    itemToElement,
-    itemToString = defaultItemToString,
-    titleText = false,
-    hideLabel,
-    helperText,
-    label,
-    type = 'default',
-    size,
-    disabled = false,
-    initialSelectedItems = [],
-    sortItems = sorting.defaultSortItems,
-    compareItems = sorting.defaultCompareItems,
-    clearSelectionText = 'To clear selection, press Delete or Backspace',
-    clearAnnouncement = 'all items have been cleared',
-    clearSelectionDescription = 'Total items selected: ',
-    light,
-    invalid,
-    invalidText,
-    warn,
-    warnText,
-    useTitleInItem,
-    translateWithId,
-    downshiftProps,
-    open = false,
-    selectionFeedback = 'top-after-reopen',
-    onChange,
-    onMenuChange,
-    direction = 'bottom',
-    selectedItems: selected,
-    readOnly,
-    locale = 'en',
-    slug
-  } = _ref;
+const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(({
+  autoAlign = false,
+  className: containerClassName,
+  decorator,
+  id,
+  items,
+  itemToElement,
+  itemToString = defaultItemToString,
+  titleText = false,
+  hideLabel,
+  helperText,
+  label,
+  type = 'default',
+  size,
+  disabled = false,
+  initialSelectedItems = [],
+  sortItems = sorting.defaultSortItems,
+  compareItems = sorting.defaultCompareItems,
+  clearSelectionText = 'To clear selection, press Delete or Backspace',
+  clearAnnouncement = 'all items have been cleared',
+  clearSelectionDescription = 'Total items selected: ',
+  light,
+  invalid,
+  invalidText,
+  warn,
+  warnText,
+  useTitleInItem,
+  translateWithId,
+  downshiftProps,
+  open = false,
+  selectionFeedback = 'top-after-reopen',
+  onChange,
+  onMenuChange,
+  direction = 'bottom',
+  selectedItems: selected,
+  readOnly,
+  locale = 'en',
+  slug
+}, ref) => {
   const filteredItems = React.useMemo(() => {
     return items.filter(item => {
       if (typeof item === 'object' && item !== null) {
@@ -153,11 +152,10 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
     middleware: [autoAlign && react.flip({
       crossAxis: false
     }), react.size({
-      apply(_ref2) {
-        let {
-          rects,
-          elements
-        } = _ref2;
+      apply({
+        rects,
+        elements
+      }) {
         Object.assign(elements.floating.style, {
           width: `${rects.reference.width}px`
         });

package/lib/components/MultiSelect/tools/sorting.js

@@ -20,25 +20,21 @@ Object.defineProperty(exports, '__esModule', { value: true });
  * @returns {number} A negative number if itemA comes before itemB, a positive
  *   number if itemA comes after itemB, or 0 if they are equal.
  */
-const defaultCompareItems = (itemA, itemB, _ref) => {
-  let {
-    locale
-  } = _ref;
-  return itemA.localeCompare(itemB, locale, {
-    numeric: true
-  });
-};
+const defaultCompareItems = (itemA, itemB, {
+  locale
+}) => itemA.localeCompare(itemB, locale, {
+  numeric: true
+});
 
 /**
  * Default sorting algorithm for options in a selection control
  */
-const defaultSortItems = (items, _ref2) => {
-  let {
-    selectedItems = [],
-    itemToString,
-    compareItems,
-    locale = 'en'
-  } = _ref2;
+const defaultSortItems = (items, {
+  selectedItems = [],
+  itemToString,
+  compareItems,
+  locale = 'en'
+}) => {
   return items.sort((itemA, itemB) => {
     // Always place "select all" option at the beginning
     if (itemA.isSelectAll) return -1;

package/lib/components/Notification/Notification.js

@@ -43,8 +43,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
  * @param {func} callback - function to be called
  * @param {bool} override - escape hatch to conditionally call the callback
  */
-function useEscapeToClose(ref, callback) {
-  let override = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+function useEscapeToClose(ref, callback, override = true) {
   const handleKeyDown = event => {
     // The callback should only be called when focus is on or within the container
     const elementContainsFocus = ref.current && document.activeElement === ref.current || ref.current?.contains(document.activeElement);
@@ -59,14 +58,13 @@ function useEscapeToClose(ref, callback) {
     return () => document.removeEventListener('keydown', handleKeyDown, false);
   });
 }
-function NotificationActionButton(_ref) {
-  let {
-    children,
-    className: customClassName,
-    onClick,
-    inline,
-    ...rest
-  } = _ref;
+function NotificationActionButton({
+  children,
+  className: customClassName,
+  onClick,
+  inline,
+  ...rest
+}) {
   const prefix = usePrefix.usePrefix();
   const className = cx__default["default"](customClassName, {
     [`${prefix}--actionable-notification__action-button`]: true
@@ -102,17 +100,16 @@ NotificationActionButton.propTypes = {
  * ==================
  */
 
-function NotificationButton(_ref2) {
-  let {
-    'aria-label': ariaLabel = 'close notification',
-    ariaLabel: deprecatedAriaLabel,
-    className,
-    type = 'button',
-    renderIcon: IconTag = iconsReact.Close,
-    name,
-    notificationType = 'toast',
-    ...rest
-  } = _ref2;
+function NotificationButton({
+  'aria-label': ariaLabel = 'close notification',
+  ariaLabel: deprecatedAriaLabel,
+  className,
+  type = 'button',
+  renderIcon: IconTag = iconsReact.Close,
+  name,
+  notificationType = 'toast',
+  ...rest
+}) {
   const prefix = usePrefix.usePrefix();
   const buttonClassName = cx__default["default"](className, {
     [`${prefix}--${notificationType}-notification__close-button`]: notificationType
@@ -177,12 +174,11 @@ const iconTypes = {
   info: iconsReact.InformationFilled,
   ['info-square']: iconsReact.InformationSquareFilled
 };
-function NotificationIcon(_ref3) {
-  let {
-    iconDescription,
-    kind,
-    notificationType
-  } = _ref3;
+function NotificationIcon({
+  iconDescription,
+  kind,
+  notificationType
+}) {
   const prefix = usePrefix.usePrefix();
   const IconForKind = iconTypes[kind];
   if (!IconForKind) {
@@ -204,26 +200,25 @@ NotificationIcon.propTypes = {
  * =================
  */
 
-function ToastNotification(_ref4) {
-  let {
-    ['aria-label']: ariaLabel,
-    // @ts-expect-error: deprecated prop
-    ariaLabel: deprecatedAriaLabel,
-    role = 'status',
-    onClose,
-    onCloseButtonClick = noopFn.noopFn,
-    statusIconDescription,
-    className,
-    children,
-    kind = 'error',
-    lowContrast,
-    hideCloseButton = false,
-    timeout = 0,
-    title,
-    caption,
-    subtitle,
-    ...rest
-  } = _ref4;
+function ToastNotification({
+  ['aria-label']: ariaLabel,
+  // @ts-expect-error: deprecated prop
+  ariaLabel: deprecatedAriaLabel,
+  role = 'status',
+  onClose,
+  onCloseButtonClick = noopFn.noopFn,
+  statusIconDescription,
+  className,
+  children,
+  kind = 'error',
+  lowContrast,
+  hideCloseButton = false,
+  timeout = 0,
+  title,
+  caption,
+  subtitle,
+  ...rest
+}) {
   const [isOpen, setIsOpen] = React.useState(true);
   const prefix = usePrefix.usePrefix();
   const containerClassName = cx__default["default"](className, {
@@ -361,22 +356,21 @@ ToastNotification.propTypes = {
  * ==================
  */
 
-function InlineNotification(_ref5) {
-  let {
-    ['aria-label']: ariaLabel,
-    children,
-    title,
-    subtitle,
-    role = 'status',
-    onClose,
-    onCloseButtonClick = noopFn.noopFn,
-    statusIconDescription,
-    className,
-    kind = 'error',
-    lowContrast,
-    hideCloseButton = false,
-    ...rest
-  } = _ref5;
+function InlineNotification({
+  ['aria-label']: ariaLabel,
+  children,
+  title,
+  subtitle,
+  role = 'status',
+  onClose,
+  onCloseButtonClick = noopFn.noopFn,
+  statusIconDescription,
+  className,
+  kind = 'error',
+  lowContrast,
+  hideCloseButton = false,
+  ...rest
+}) {
   const [isOpen, setIsOpen] = React.useState(true);
   const prefix = usePrefix.usePrefix();
   const containerClassName = cx__default["default"](className, {
@@ -483,29 +477,28 @@ InlineNotification.propTypes = {
  * ======================
  */
 
-function ActionableNotification(_ref6) {
-  let {
-    actionButtonLabel,
-    ['aria-label']: ariaLabel,
-    // @ts-expect-error: deprecated prop
-    ariaLabel: deprecatedAriaLabel,
-    children,
-    role = 'alertdialog',
-    onActionButtonClick,
-    onClose,
-    onCloseButtonClick = noopFn.noopFn,
-    statusIconDescription,
-    className,
-    inline = false,
-    kind = 'error',
-    lowContrast,
-    hideCloseButton = false,
-    hasFocus = true,
-    closeOnEscape = true,
-    title,
-    subtitle,
-    ...rest
-  } = _ref6;
+function ActionableNotification({
+  actionButtonLabel,
+  ['aria-label']: ariaLabel,
+  // @ts-expect-error: deprecated prop
+  ariaLabel: deprecatedAriaLabel,
+  children,
+  role = 'alertdialog',
+  onActionButtonClick,
+  onClose,
+  onCloseButtonClick = noopFn.noopFn,
+  statusIconDescription,
+  className,
+  inline = false,
+  kind = 'error',
+  lowContrast,
+  hideCloseButton = false,
+  hasFocus = true,
+  closeOnEscape = true,
+  title,
+  subtitle,
+  ...rest
+}) {
   const [isOpen, setIsOpen] = React.useState(true);
   const prefix = usePrefix.usePrefix();
   const id = useId.useId('actionable-notification');
@@ -528,11 +521,10 @@ function ActionableNotification(_ref6) {
       button?.focus();
     }
   });
-  function handleBlur(_ref7) {
-    let {
-      target: oldActiveNode,
-      relatedTarget: currentActiveNode
-    } = _ref7;
+  function handleBlur({
+    target: oldActiveNode,
+    relatedTarget: currentActiveNode
+  }) {
     if (isOpen && currentActiveNode && oldActiveNode && role === 'alertdialog') {
       const {
         current: bodyNode
@@ -718,20 +710,19 @@ const propMappingFunction = deprecatedValue => {
   };
   return mapping[deprecatedValue];
 };
-function Callout(_ref8) {
-  let {
-    actionButtonLabel,
-    children,
-    onActionButtonClick,
-    title,
-    titleId,
-    subtitle,
-    statusIconDescription,
-    className,
-    kind = 'info',
-    lowContrast,
-    ...rest
-  } = _ref8;
+function Callout({
+  actionButtonLabel,
+  children,
+  onActionButtonClick,
+  title,
+  titleId,
+  subtitle,
+  statusIconDescription,
+  className,
+  kind = 'info',
+  lowContrast,
+  ...rest
+}) {
   const prefix = usePrefix.usePrefix();
   const containerClassName = cx__default["default"](className, {
     [`${prefix}--actionable-notification`]: true,

package/lib/components/NumberInput/NumberFormatPropTypes.d.ts

@@ -0,0 +1,29 @@
+/**
+ * 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.
+ */
+import PropTypes from 'prop-types';
+export declare const NumberFormatOptionsPropType: PropTypes.Requireable<PropTypes.InferProps<{
+    localeMatcher: PropTypes.Requireable<string>;
+    style: PropTypes.Requireable<string>;
+    currency: PropTypes.Requireable<string>;
+    currencyDisplay: PropTypes.Requireable<string>;
+    currencySign: PropTypes.Requireable<string>;
+    unit: PropTypes.Requireable<string>;
+    unitDisplay: PropTypes.Requireable<string>;
+    notation: PropTypes.Requireable<string>;
+    compactDisplay: PropTypes.Requireable<string>;
+    signDisplay: PropTypes.Requireable<string>;
+    minimumIntegerDigits: PropTypes.Requireable<number>;
+    minimumFractionDigits: PropTypes.Requireable<number>;
+    maximumFractionDigits: PropTypes.Requireable<number>;
+    minimumSignificantDigits: PropTypes.Requireable<number>;
+    maximumSignificantDigits: PropTypes.Requireable<number>;
+    useGrouping: PropTypes.Requireable<NonNullable<string | boolean | null | undefined>>;
+    numberingSystem: PropTypes.Requireable<string>;
+    roundingIncrement: PropTypes.Requireable<number>;
+    roundingMode: PropTypes.Requireable<string>;
+    trailingZeroDisplay: PropTypes.Requireable<string>;
+}>>;

package/lib/components/NumberInput/NumberFormatPropTypes.js

@@ -0,0 +1,48 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var PropTypes = require('prop-types');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+
+const NumberFormatOptionsPropType = PropTypes__default["default"].shape({
+  // Locale Options
+  localeMatcher: PropTypes__default["default"].oneOf(['best fit', 'lookup']),
+  // Style Options
+  style: PropTypes__default["default"].oneOf(['decimal', 'currency', 'percent', 'unit']),
+  currency: PropTypes__default["default"].string,
+  // e.g., 'USD'
+  currencyDisplay: PropTypes__default["default"].oneOf(['symbol', 'narrowSymbol', 'code', 'name']),
+  currencySign: PropTypes__default["default"].oneOf(['standard', 'accounting']),
+  unit: PropTypes__default["default"].string,
+  // e.g., 'liter', 'mile-per-hour'
+  unitDisplay: PropTypes__default["default"].oneOf(['short', 'narrow', 'long']),
+  notation: PropTypes__default["default"].oneOf(['standard', 'scientific', 'engineering', 'compact']),
+  compactDisplay: PropTypes__default["default"].oneOf(['short', 'long']),
+  signDisplay: PropTypes__default["default"].oneOf(['auto', 'never', 'always', 'exceptZero']),
+  // Digit Options
+  minimumIntegerDigits: PropTypes__default["default"].number,
+  minimumFractionDigits: PropTypes__default["default"].number,
+  maximumFractionDigits: PropTypes__default["default"].number,
+  minimumSignificantDigits: PropTypes__default["default"].number,
+  maximumSignificantDigits: PropTypes__default["default"].number,
+  useGrouping: PropTypes__default["default"].oneOfType([PropTypes__default["default"].bool, PropTypes__default["default"].oneOf(['always', 'auto', 'min2'])]),
+  // Misc/Other Options
+  numberingSystem: PropTypes__default["default"].string,
+  // e.g., 'latn', 'arab'
+  roundingIncrement: PropTypes__default["default"].number,
+  roundingMode: PropTypes__default["default"].oneOf(['ceil', 'floor', 'expand', 'trunc', 'halfCeil', 'halfFloor', 'halfExpand', 'halfTrunc', 'halfEven']),
+  trailingZeroDisplay: PropTypes__default["default"].oneOf(['auto', 'stripIfInteger'])
+});
+
+exports.NumberFormatOptionsPropType = NumberFormatOptionsPropType;

package/lib/components/NumberInput/NumberInput.Skeleton.js

@@ -21,13 +21,12 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-function NumberInputSkeleton(_ref) {
-  let {
-    hideLabel,
-    className,
-    size = 'md',
-    ...rest
-  } = _ref;
+function NumberInputSkeleton({
+  hideLabel,
+  className,
+  size = 'md',
+  ...rest
+}) {
   const prefix = usePrefix.usePrefix();
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: cx__default["default"](`${prefix}--form-item`, className)