@carbon/react 1.83.0 → 1.84.0

package/es/components/Notification/Notification.js

@@ -33,8 +33,7 @@ import { Text } from '../Text/Text.js';
  * @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);
@@ -49,14 +48,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();
   const className = cx(customClassName, {
     [`${prefix}--actionable-notification__action-button`]: true
@@ -92,17 +90,16 @@ NotificationActionButton.propTypes = {
  * ==================
  */
 
-function NotificationButton(_ref2) {
-  let {
-    'aria-label': ariaLabel = 'close notification',
-    ariaLabel: deprecatedAriaLabel,
-    className,
-    type = 'button',
-    renderIcon: IconTag = Close,
-    name,
-    notificationType = 'toast',
-    ...rest
-  } = _ref2;
+function NotificationButton({
+  'aria-label': ariaLabel = 'close notification',
+  ariaLabel: deprecatedAriaLabel,
+  className,
+  type = 'button',
+  renderIcon: IconTag = Close,
+  name,
+  notificationType = 'toast',
+  ...rest
+}) {
   const prefix = usePrefix();
   const buttonClassName = cx(className, {
     [`${prefix}--${notificationType}-notification__close-button`]: notificationType
@@ -167,12 +164,11 @@ const iconTypes = {
   info: InformationFilled,
   ['info-square']: InformationSquareFilled
 };
-function NotificationIcon(_ref3) {
-  let {
-    iconDescription,
-    kind,
-    notificationType
-  } = _ref3;
+function NotificationIcon({
+  iconDescription,
+  kind,
+  notificationType
+}) {
   const prefix = usePrefix();
   const IconForKind = iconTypes[kind];
   if (!IconForKind) {
@@ -194,26 +190,25 @@ NotificationIcon.propTypes = {
  * =================
  */
 
-function ToastNotification(_ref4) {
-  let {
-    ['aria-label']: ariaLabel,
-    // @ts-expect-error: deprecated prop
-    ariaLabel: deprecatedAriaLabel,
-    role = 'status',
-    onClose,
-    onCloseButtonClick = 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,
+  statusIconDescription,
+  className,
+  children,
+  kind = 'error',
+  lowContrast,
+  hideCloseButton = false,
+  timeout = 0,
+  title,
+  caption,
+  subtitle,
+  ...rest
+}) {
   const [isOpen, setIsOpen] = useState(true);
   const prefix = usePrefix();
   const containerClassName = cx(className, {
@@ -351,22 +346,21 @@ ToastNotification.propTypes = {
  * ==================
  */
 
-function InlineNotification(_ref5) {
-  let {
-    ['aria-label']: ariaLabel,
-    children,
-    title,
-    subtitle,
-    role = 'status',
-    onClose,
-    onCloseButtonClick = noopFn,
-    statusIconDescription,
-    className,
-    kind = 'error',
-    lowContrast,
-    hideCloseButton = false,
-    ...rest
-  } = _ref5;
+function InlineNotification({
+  ['aria-label']: ariaLabel,
+  children,
+  title,
+  subtitle,
+  role = 'status',
+  onClose,
+  onCloseButtonClick = noopFn,
+  statusIconDescription,
+  className,
+  kind = 'error',
+  lowContrast,
+  hideCloseButton = false,
+  ...rest
+}) {
   const [isOpen, setIsOpen] = useState(true);
   const prefix = usePrefix();
   const containerClassName = cx(className, {
@@ -473,29 +467,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,
-    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,
+  statusIconDescription,
+  className,
+  inline = false,
+  kind = 'error',
+  lowContrast,
+  hideCloseButton = false,
+  hasFocus = true,
+  closeOnEscape = true,
+  title,
+  subtitle,
+  ...rest
+}) {
   const [isOpen, setIsOpen] = useState(true);
   const prefix = usePrefix();
   const id = useId('actionable-notification');
@@ -518,11 +511,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
@@ -708,20 +700,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();
   const containerClassName = cx(className, {
     [`${prefix}--actionable-notification`]: true,

package/es/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/es/components/NumberInput/NumberFormatPropTypes.js

@@ -0,0 +1,40 @@
+/**
+ * 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.
+ */
+
+import PropTypes from 'prop-types';
+
+const NumberFormatOptionsPropType = PropTypes.shape({
+  // Locale Options
+  localeMatcher: PropTypes.oneOf(['best fit', 'lookup']),
+  // Style Options
+  style: PropTypes.oneOf(['decimal', 'currency', 'percent', 'unit']),
+  currency: PropTypes.string,
+  // e.g., 'USD'
+  currencyDisplay: PropTypes.oneOf(['symbol', 'narrowSymbol', 'code', 'name']),
+  currencySign: PropTypes.oneOf(['standard', 'accounting']),
+  unit: PropTypes.string,
+  // e.g., 'liter', 'mile-per-hour'
+  unitDisplay: PropTypes.oneOf(['short', 'narrow', 'long']),
+  notation: PropTypes.oneOf(['standard', 'scientific', 'engineering', 'compact']),
+  compactDisplay: PropTypes.oneOf(['short', 'long']),
+  signDisplay: PropTypes.oneOf(['auto', 'never', 'always', 'exceptZero']),
+  // Digit Options
+  minimumIntegerDigits: PropTypes.number,
+  minimumFractionDigits: PropTypes.number,
+  maximumFractionDigits: PropTypes.number,
+  minimumSignificantDigits: PropTypes.number,
+  maximumSignificantDigits: PropTypes.number,
+  useGrouping: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['always', 'auto', 'min2'])]),
+  // Misc/Other Options
+  numberingSystem: PropTypes.string,
+  // e.g., 'latn', 'arab'
+  roundingIncrement: PropTypes.number,
+  roundingMode: PropTypes.oneOf(['ceil', 'floor', 'expand', 'trunc', 'halfCeil', 'halfFloor', 'halfExpand', 'halfTrunc', 'halfEven']),
+  trailingZeroDisplay: PropTypes.oneOf(['auto', 'stripIfInteger'])
+});
+
+export { NumberFormatOptionsPropType };

package/es/components/NumberInput/NumberInput.Skeleton.js

@@ -11,13 +11,12 @@ import React from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-function NumberInputSkeleton(_ref) {
-  let {
-    hideLabel,
-    className,
-    size = 'md',
-    ...rest
-  } = _ref;
+function NumberInputSkeleton({
+  hideLabel,
+  className,
+  size = 'md',
+  ...rest
+}) {
   const prefix = usePrefix();
   return /*#__PURE__*/React.createElement("div", _extends({
     className: cx(`${prefix}--form-item`, className)

package/es/components/NumberInput/NumberInput.d.ts

@@ -6,6 +6,7 @@
  */
 import React, { ReactNode } from 'react';
 import { TranslateWithId } from '../../types/common';
+import { type NumberFormatOptions } from '@carbon/utilities';
 export declare const translationIds: {
     readonly 'increment.number': "increment.number";
     readonly 'decrement.number': "decrement.number";
@@ -25,7 +26,8 @@ export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInp
      */
     className?: string;
     /**
-     * **Experimental**: Provide a `decorator` component to be rendered inside the `TextInput` component
+     * **Experimental**: Provide a `decorator` component to be rendered inside the
+     * `TextInput` component
      */
     decorator?: ReactNode;
     /**
@@ -40,6 +42,13 @@ export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInp
      * Specify if the control should be disabled, or not
      */
     disabled?: boolean;
+    /**
+     * **Experimental:** Specify Intl.NumberFormat options applied to internal
+     * number parsing and formatting. Use with `type="text"`, has no effect when
+     * `type="number"`.
+     * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options
+     */
+    formatOptions?: NumberFormatOptions;
     /**
      * Provide text that is used alongside the control label for additional help
      */
@@ -60,6 +69,12 @@ export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInp
      * Specify a custom `id` for the input
      */
     id: string;
+    /**
+     * Instruct the browser which keyboard to display on mobile devices. Note that
+     * standard numeric keyboards vary across devices and operating systems.
+     * @see https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/
+     */
+    inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode'];
     /**
      * Specify if the currently value is invalid.
      */
@@ -77,9 +92,16 @@ export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInp
      * `true` to use the light version.
      *
      * @deprecated The `light` prop for `NumberInput` is no longer needed and has
-     *     been deprecated in v11 in favor of the new `Layer` component. It will be moved in the next major release.
+     * been deprecated in v11 in favor of the new `Layer` component. It will be
+     * removed in the next major release.
      */
     light?: boolean;
+    /**
+     * **Experimental:** Specify a [BCP47](https://www.ietf.org/rfc/bcp/bcp47.txt)
+     * language code for parsing and formatting. Use with `type="text"`, has no
+     * effect when `type="number"`.
+     */
+    locale?: string;
     /**
      * The maximum value.
      */
@@ -91,9 +113,12 @@ export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInp
     /**
      * Provide an optional handler that is called when the internal state of
      * NumberInput changes. This handler is called with event and state info.
+     * When type="number", this is called on every change of the input.
+     * When type="text", this is only called on blur after the number has been
+     * parsed and formatted.
      * `(event, { value, direction }) => void`
      */
-    onChange?: (event: React.MouseEvent<HTMLButtonElement>, state: {
+    onChange?: (event: React.MouseEvent<HTMLButtonElement> | React.FocusEvent<HTMLInputElement> | React.KeyboardEvent<HTMLInputElement>, state: {
         value: number | string;
         direction: string;
     }) => void;
@@ -108,6 +133,11 @@ export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInp
      * Provide an optional function to be called when a key is pressed in the number input
      */
     onKeyUp?: React.KeyboardEventHandler<HTMLInputElement>;
+    /**
+     * When type="text", provide an optional pattern to restrict user input. Has
+     * no effect when type="number".
+     */
+    pattern?: string;
     /**
      * Specify if the component should be read-only
      */
@@ -125,6 +155,12 @@ export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInp
      * Specify how much the values should increase/decrease upon clicking on up/down button
      */
     step?: number;
+    /**
+     * **Experimental**: Specify if the input should be of type text or number.
+     * Use type="text" with `locale`, `formatOptions`, and guide user input with
+     * `pattern` and `inputMode`.
+     */
+    type?: 'number' | 'text';
     /**
      * Specify the value of the input
      */