@carbon/ibm-products 2.71.1 → 2.72.0-rc.0

package/es/components/{BigNumbers/BigNumbers.d.ts → BigNumber/BigNumber.d.ts}

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { ReactNode } from 'react';
-import { BigNumbersSizeValues } from './constants';
-export interface BigNumbersProps {
+import { BigNumberSizeValues } from './constants';
+export interface BigNumberProps {
     className?: string;
     forceShowTotal?: boolean;
     fractionDigits?: number;
@@ -15,7 +15,7 @@ export interface BigNumbersProps {
     label: string;
     locale?: string;
     percentage?: boolean;
-    size?: BigNumbersSizeValues;
+    size?: BigNumberSizeValues;
     tooltipDescription?: string;
     total?: number;
     trending?: boolean;
@@ -23,7 +23,7 @@ export interface BigNumbersProps {
     value?: number;
 }
 /**
- * BigNumbers is used to display large values in a small area. The display of
+ * BigNumber is used to display large values in a small area. The display of
  * values can be the value itself, or grouped in a `numerator/denominator` fashion.
  * Control over the total fraction decimals displayed as well as how the
  * values/totals are displayed are done via a locale prop. Other optional props
@@ -31,4 +31,4 @@ export interface BigNumbersProps {
  * of a button as well as tool tip functionality.
  * The default locale is English (`en-US`) if one is not provided or if the provided one is not supported.
  */
-export declare let BigNumbers: React.ForwardRefExoticComponent<BigNumbersProps & React.RefAttributes<HTMLDivElement>>;
+export declare let BigNumber: React.ForwardRefExoticComponent<BigNumberProps & React.RefAttributes<HTMLDivElement>>;

package/es/components/{BigNumbers/BigNumbers.js → BigNumber/BigNumber.js}

@@ -14,18 +14,18 @@ import { getSupportedLocale } from '../../global/js/utils/getSupportedLocale.js'
 import { pkg } from '../../settings.js';
 import { Information, ArrowUp } from '@carbon/react/icons';
 import { Tooltip } from '@carbon/react';
-import { BigNumbersSkeleton } from './BigNumbersSkeleton.js';
+import { BigNumberSkeleton } from './BigNumberSkeleton.js';
 import { DefaultLocale, formatValue, Characters, getIconSize } from './constants.js';
 import { TooltipTrigger } from '../TooltipTrigger/TooltipTrigger.js';
 
 var _Information;
-const blockClass = `${pkg.prefix}--big-numbers`;
-const componentName = 'BigNumbers';
+const blockClass = `${pkg.prefix}--big-number`;
+const componentName = 'BigNumber';
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
 /**
- * BigNumbers is used to display large values in a small area. The display of
+ * BigNumber is used to display large values in a small area. The display of
  * values can be the value itself, or grouped in a `numerator/denominator` fashion.
  * Control over the total fraction decimals displayed as well as how the
  * values/totals are displayed are done via a locale prop. Other optional props
@@ -33,7 +33,7 @@ const componentName = 'BigNumbers';
  * of a button as well as tool tip functionality.
  * The default locale is English (`en-US`) if one is not provided or if the provided one is not supported.
  */
-let BigNumbers = /*#__PURE__*/forwardRef((_ref, ref) => {
+let BigNumber = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     // The component props, in alphabetical order (for consistency).
     className,
@@ -53,7 +53,7 @@ let BigNumbers = /*#__PURE__*/forwardRef((_ref, ref) => {
     // Collect any other property values passed in.
     ...rest
   } = _ref;
-  const bigNumbersClasses = cx(className, {
+  const bigNumberClasses = cx(className, {
     [`${blockClass}--lg`]: size === 'lg',
     [`${blockClass}--xl`]: size === 'xl'
   });
@@ -62,14 +62,14 @@ let BigNumbers = /*#__PURE__*/forwardRef((_ref, ref) => {
   const truncatedTotal = formatValue(supportedLocale, total, fractionDigits, truncate) ?? 'Unknown';
   const shouldDisplayDenominator = forceShowTotal || !percentage && total && value && total > value && truncatedValue !== truncatedTotal;
   if (loading) {
-    return /*#__PURE__*/React__default.createElement(BigNumbersSkeleton, _extends({}, rest, {
+    return /*#__PURE__*/React__default.createElement(BigNumberSkeleton, _extends({}, rest, {
       ref: ref,
       className: className,
       size: size
     }, getDevtoolsProps(componentName)));
   }
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
-    className: cx(blockClass, bigNumbersClasses, className),
+    className: cx(blockClass, bigNumberClasses, className),
     ref: ref
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement("span", {
     className: `${blockClass}__row`
@@ -103,16 +103,16 @@ let BigNumbers = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 
 // Return a placeholder if not released and not enabled by feature flag
-BigNumbers = pkg.checkComponentEnabled(BigNumbers, componentName);
+BigNumber = pkg.checkComponentEnabled(BigNumber, componentName);
 
 // The display name of the component, used by React. Note that displayName
 // is used in preference to relying on function.name.
-BigNumbers.displayName = componentName;
+BigNumber.displayName = componentName;
 
 // The types and DocGen commentary for the component props,
 // in alphabetical order (for consistency).
 // See https://www.npmjs.com/package/prop-types#usage.
-BigNumbers.propTypes = {
+BigNumber.propTypes = {
   /**
    * Provide an optional class to be applied to the containing node.
    */
@@ -177,4 +177,4 @@ BigNumbers.propTypes = {
   value: PropTypes.number
 };
 
-export { BigNumbers };
+export { BigNumber };

package/es/components/BigNumber/BigNumberSkeleton.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 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 React from 'react';
+import { BigNumberProps } from './BigNumber';
+/**
+ * SkeletonBigNumber is used to display a skeleton version while
+ * content is loading (handled by the BigNumber prop `loading').
+ *
+ * Note: This component is only used within BigNumber.
+ */
+type BigNumberSkeletonProps = Pick<BigNumberProps, 'className' | 'size'>;
+export declare const BigNumberSkeleton: React.ForwardRefExoticComponent<BigNumberSkeletonProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/es/components/{BigNumbers/BigNumbersSkeleton.js → BigNumber/BigNumberSkeleton.js}

@@ -12,33 +12,33 @@ import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 import { SkeletonText } from '@carbon/react';
-import { BigNumbersSize } from './constants.js';
+import { BigNumberSize } from './constants.js';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
-const blockClass = `${pkg.prefix}--big-numbers-skeleton`;
-const componentName = 'BigNumbersSkeleton';
+const blockClass = `${pkg.prefix}--big-number-skeleton`;
+const componentName = 'BigNumberSkeleton';
 
 /**
- * SkeletonBigNumbers is used to display a skeleton version while
- * content is loading (handled by the BigNumbers prop `loading').
+ * SkeletonBigNumber is used to display a skeleton version while
+ * content is loading (handled by the BigNumber prop `loading').
  *
- * Note: This component is only used within BigNumbers.
+ * Note: This component is only used within BigNumber.
  */
 
-// Use the same properties and values as parent BigNumbersProps
+// Use the same properties and values as parent BigNumberProps
 
-const BigNumbersSkeleton = /*#__PURE__*/forwardRef((_ref, ref) => {
+const BigNumberSkeleton = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     className,
     size,
     ...rest
   } = _ref;
-  const bigNumbersSkeletonClasses = cx(className, blockClass, {
-    [`${blockClass}--lg`]: size === BigNumbersSize.Large,
-    [`${blockClass}--xl`]: size === BigNumbersSize.XLarge
+  const bigNumberSkeletonClasses = cx(className, blockClass, {
+    [`${blockClass}--lg`]: size === BigNumberSize.Large,
+    [`${blockClass}--xl`]: size === BigNumberSize.XLarge
   });
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
-    className: bigNumbersSkeletonClasses,
+    className: bigNumberSkeletonClasses,
     ref: ref
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement(SkeletonText, {
     className: `${blockClass}__label`
@@ -51,8 +51,8 @@ const BigNumbersSkeleton = /*#__PURE__*/forwardRef((_ref, ref) => {
 
 // The display name of the component, used by React. Note that displayName
 // is used in preference to relying on function.name.
-BigNumbersSkeleton.displayName = componentName;
-BigNumbersSkeleton.propTypes = {
+BigNumberSkeleton.displayName = componentName;
+BigNumberSkeleton.propTypes = {
   /**
    * Provide an optional class to be applied to the containing node.
    */
@@ -60,7 +60,7 @@ BigNumbersSkeleton.propTypes = {
   /**
    *
    */
-  size: PropTypes.oneOf([BigNumbersSize.Default, BigNumbersSize.Large, BigNumbersSize.XLarge])
+  size: PropTypes.oneOf([BigNumberSize.Default, BigNumberSize.Large, BigNumberSize.XLarge])
 };
 
-export { BigNumbersSkeleton };
+export { BigNumberSkeleton };

package/es/components/{BigNumbers → BigNumber}/constants.d.ts

@@ -4,16 +4,16 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-export declare enum BigNumbersSize {
+export declare enum BigNumberSize {
     Default = "default",
     Large = "lg",
     XLarge = "xl"
 }
-export type BigNumbersSizeValues = `${BigNumbersSize}`;
+export type BigNumberSizeValues = `${BigNumberSize}`;
 export declare enum Characters {
     Dash = "\u2013",
     Slash = "/"
 }
 export declare const DefaultLocale = "en-US";
 export declare const formatValue: (locale: Intl.LocalesArgument, value: number | null | undefined, fractionDigits: number, truncate: boolean) => string | null | undefined;
-export declare const getIconSize: (size: BigNumbersSizeValues) => number;
+export declare const getIconSize: (size: BigNumberSizeValues) => number;

package/es/components/{BigNumbers → BigNumber}/constants.js

@@ -5,11 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-let BigNumbersSize = /*#__PURE__*/function (BigNumbersSize) {
-  BigNumbersSize["Default"] = "default";
-  BigNumbersSize["Large"] = "lg";
-  BigNumbersSize["XLarge"] = "xl";
-  return BigNumbersSize;
+let BigNumberSize = /*#__PURE__*/function (BigNumberSize) {
+  BigNumberSize["Default"] = "default";
+  BigNumberSize["Large"] = "lg";
+  BigNumberSize["XLarge"] = "xl";
+  return BigNumberSize;
 }({});
 
 // = 'default' | 'lg' | 'xl'
@@ -41,4 +41,4 @@ const getIconSize = size => {
   }
 };
 
-export { BigNumbersSize, Characters, DefaultLocale, formatValue, getIconSize };
+export { BigNumberSize, Characters, DefaultLocale, formatValue, getIconSize };

package/es/components/{BigNumbers → BigNumber}/index.d.ts

@@ -1,7 +1,7 @@
 /**
- * Copyright IBM Corp. 2024, 2024
+ * Copyright IBM Corp. 2024, 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.
  */
-export { BigNumbers } from './BigNumbers';
+export { BigNumber } from './BigNumber';

package/es/components/Coachmark/next/Coachmark/Coachmark.d.ts

@@ -0,0 +1,72 @@
+/**
+ * Copyright IBM Corp. 2024, 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 React, { FC, ForwardRefExoticComponent, ReactNode, RefAttributes, RefObject } from 'react';
+import { CoachmarkContentProps } from './CoachmarkContent';
+import { NewPopoverAlignment } from '@carbon/react';
+export declare const blockClass: string;
+export interface CoachmarkProps {
+    /**
+     * Provide the contents of the Coachmark.
+     */
+    children: ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * The aria label applied to the Coachmark component
+     */
+    ariaLabel?: string;
+    /**
+     * Specifies whether the component is currently open.
+     */
+    open?: boolean;
+    /**
+     * Function to call when the close button is clicked.
+     */
+    onClose?: () => void;
+    /**
+     * Where to render the Coachmark relative to its target.
+     */
+    align?: NewPopoverAlignment;
+    /**
+     * Fine tune the position of the target in pixels.
+     */
+    position?: {
+        x: number;
+        y: number;
+    };
+    /**
+     * Specifies whether the component is floating or not.
+     */
+    floating?: boolean;
+}
+export type CoachmarkComponent = ForwardRefExoticComponent<CoachmarkProps & RefAttributes<HTMLDivElement>> & {
+    Content: FC<CoachmarkContentProps>;
+};
+interface CoachmarkContextType {
+    onClose?: () => void;
+    open?: boolean;
+    setOpen: (value: boolean) => void;
+    align?: NewPopoverAlignment;
+    triggerRef: RefObject<HTMLElement | null>;
+    position: {
+        x: number;
+        y: number;
+    };
+    contentRef: HTMLElement | null;
+    setContentRef: (value: any) => void;
+    floating?: boolean;
+}
+export declare const CoachmarkContext: React.Context<CoachmarkContextType>;
+/**
+ * Coachmarks are used to call out specific functionality or concepts
+ * within the UI that may not be intuitive but are important for the
+ * user to gain understanding of the product's main value and discover new use cases.
+ */
+export declare const Coachmark: CoachmarkComponent;
+export {};

package/es/components/Coachmark/next/Coachmark/Coachmark.js

@@ -0,0 +1,185 @@
+/**
+ * Copyright IBM Corp. 2020, 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 { extends as _extends } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { createContext, forwardRef, useRef, useState, useEffect } from 'react';
+import PropTypes from '../../../../_virtual/index.js';
+import cx from 'classnames';
+import { getDevtoolsProps } from '../../../../global/js/utils/devtools.js';
+import { pkg } from '../../../../settings.js';
+import CoachmarkContent from './CoachmarkContent.js';
+import { useIsomorphicEffect } from '../../../../global/js/hooks/useIsomorphicEffect.js';
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+const blockClass = `${pkg.prefix}--coachmark__next`;
+const componentName = 'Coachmark';
+
+// NOTE: the component SCSS is not imported here: it is rolled up separately.
+
+// Default values can be included here and then assigned to the prop params,
+// e.g. prop = defaults.prop,
+// This gathers default values together neatly and ensures non-primitive
+// values are initialized early to avoid react making unnecessary re-renders.
+// Note that default values are not required for props that are 'required',
+// nor for props where the component can apply undefined values reasonably.
+// Default values should be provided when the component needs to make a choice
+// or assumption when a prop is not supplied.
+
+// Define the type for Coachmark, extending it to include Trigger and Content
+
+const CoachmarkContext = /*#__PURE__*/createContext({
+  open: false,
+  setOpen: () => {},
+  align: 'bottom',
+  triggerRef: {
+    current: null
+  },
+  position: {
+    x: 0,
+    y: 0
+  },
+  contentRef: null,
+  setContentRef: value => {},
+  floating: false
+});
+/**
+ * Coachmarks are used to call out specific functionality or concepts
+ * within the UI that may not be intuitive but are important for the
+ * user to gain understanding of the product's main value and discover new use cases.
+ */
+const Coachmark = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    ariaLabel,
+    onClose,
+    align = 'bottom',
+    open,
+    position = {
+      x: 0,
+      y: 0
+    },
+    floating,
+    ...rest
+  } = props;
+  const triggerRef = useRef(null);
+  const internalRef = useRef(null);
+  const [contentRef, setContentRef] = useState(null);
+  const [openState, setOpenState] = useState(false);
+  const setOpen = value => {
+    if (!value) {
+      onClose?.();
+    }
+    if (open === undefined) {
+      setOpenState(value);
+    }
+  };
+  const currentOpen = open ?? openState;
+  useEffect(() => {
+    const container = internalRef.current;
+    if (!container) {
+      return;
+    }
+    const focusableElements = Array.from(container.querySelectorAll('*'));
+    const firstFocusable = focusableElements.find(el => el.tabIndex >= 0 && !el.hasAttribute('disabled'));
+    if (firstFocusable) {
+      triggerRef.current = firstFocusable;
+    }
+  }, [children]);
+  useIsomorphicEffect(() => {
+    const {
+      x = 0,
+      y = 0
+    } = position ?? {};
+    const el = internalRef.current;
+    if (el && (x !== 0 || y !== 0)) {
+      el.style.transform = `translate(${x}px, ${y}px)`;
+    }
+  }, [position]);
+  const setRef = node => {
+    internalRef.current = node;
+    if (typeof ref === 'function') {
+      ref(node);
+    } else if (ref) {
+      ref.current = node;
+    }
+  };
+  return /*#__PURE__*/React__default.createElement(CoachmarkContext.Provider, {
+    value: {
+      onClose,
+      open: currentOpen,
+      setOpen,
+      align,
+      triggerRef,
+      position,
+      contentRef,
+      setContentRef,
+      floating
+    }
+  }, /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
+    className: cx(blockClass,
+    // Apply the block class to the main HTML element
+    className,
+    // Apply any supplied class names to the main HTML element.
+    {
+      [`${blockClass}--floating`]: floating
+    }),
+    "aria-label": ariaLabel,
+    ref: setRef
+  }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement("div", {
+    className: `${blockClass}--container`
+  }, children)));
+});
+Coachmark.Content = CoachmarkContent;
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+Coachmark.displayName = componentName;
+
+// The types and DocGen commentary for the component props,
+// in alphabetical order (for consistency).
+// See https://www.npmjs.com/package/prop-types#usage.
+Coachmark.propTypes = {
+  /**
+   * Where to render the Coachmark relative to its target.
+   */
+  align: PropTypes.string,
+  /**
+   * The aria label applied to the Coachmark component
+   */
+  ariaLabel: PropTypes.string,
+  /**
+   * Provide the contents of the CoachmarkV2.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: PropTypes.string,
+  /**
+   * Specifies whether the component is currently open.
+   */
+  defaultOpen: PropTypes.bool,
+  /**
+   * Specifies whether the component is floating or not.
+   */
+  floating: PropTypes.bool,
+  /**
+   * Function to call when the close button is clicked.
+   */
+  onClose: PropTypes.func,
+  /**
+   * Fine tune the position of the target in pixels. Applies only to Beacons.
+   */
+  // @ts-ignore
+  position: PropTypes.shape({
+    x: PropTypes.number,
+    y: PropTypes.number
+  })
+};
+
+export { Coachmark, CoachmarkContext, blockClass };

package/es/components/Coachmark/next/Coachmark/CoachmarkBeacon/CoachmarkBeacon.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Copyright IBM Corp. 2024, 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 React, { ElementType } from 'react';
+import { ButtonProps } from '@carbon/react';
+/**
+ * Reserved for future expansion, i.e. "RING".
+ */
+export declare enum BEACON_KIND {
+    DEFAULT = "default"
+}
+export interface CoachmarkButtonProps extends ButtonProps<ElementType> {
+    onClick?(): void;
+    onDoubleClick?(): void;
+    tabIndex?: number;
+    ['aria-expanded']?: boolean;
+}
+export interface CoachmarkBeaconProps {
+    /**
+     * Optional class name for this component.
+     */
+    className?: string;
+    /**
+     * What style of beacon.
+     * BEACON_KIND is an enum from the Coachmark and can be used for this value.
+     * @see {@link BEACON_KIND}
+     */
+    kind?: BEACON_KIND;
+    /**
+     * The aria label.
+     */
+    label: string;
+    /**
+     * button props
+     */
+    buttonProps?: CoachmarkButtonProps;
+}
+/**
+ * Use beacon for the target prop of a Coachmark component.
+ */
+export declare const CoachmarkBeacon: React.ForwardRefExoticComponent<CoachmarkBeaconProps & React.RefAttributes<HTMLDivElement>>;

package/es/components/Coachmark/next/Coachmark/CoachmarkBeacon/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2024, 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.
+ */
+export { CoachmarkBeacon } from './CoachmarkBeacon';
+export type { CoachmarkBeaconProps } from './CoachmarkBeacon';

package/es/components/Coachmark/next/Coachmark/CoachmarkBubble/CoachmarkBubble.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @license
+ *
+ * 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 { NewPopoverAlignment } from '@carbon/react';
+import React, { HTMLProps, RefObject } from 'react';
+interface BubbleProps extends Omit<HTMLProps<HTMLDivElement>, 'target'> {
+    /**
+     * 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-end' | 'left-start' | 'right-end' | 'right-start';
+     **/
+    align?: NewPopoverAlignment;
+    /**
+     * Values can range from an Element, a ref of an Element, a string which will use query selector to select an Element.
+     **/
+    target: Element | RefObject<Element> | string | null | undefined;
+    /**
+     * Specify whether the component should be rendered on high-contrast.
+     */
+    highContrast?: boolean;
+    /**
+     * Specify whether a drop shadow should be rendered on the popover.
+     */
+    dropShadow?: boolean;
+    /**
+     * Specifies whether the component is currently open.
+     */
+    open: boolean;
+    /**
+     * Specify whether a caret should be rendered.
+     */
+    caret?: boolean;
+}
+declare const CoachmarkBubble: React.ForwardRefExoticComponent<Omit<BubbleProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { CoachmarkBubble };