@carbon/ibm-products 2.26.0 → 2.27.0

package/es/components/UserAvatar/UserAvatar.js

@@ -11,12 +11,11 @@ import PropTypes from '../../node_modules/prop-types/index.js';
 import cx from '../../node_modules/classnames/index.js';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
-import { User, Group } from '@carbon/react/icons';
 import { usePrefix, Tooltip } from '@carbon/react';
+import { User } from '@carbon/react/icons';
 import { TooltipTrigger } from '../TooltipTrigger/TooltipTrigger.js';
 
-var _excluded = ["backgroundColor", "className", "renderIcon", "tooltipText", "tooltipAlignment"];
-var _User, _User2, _Group;
+var _excluded = ["backgroundColor", "className", "name", "renderIcon", "size", "tooltipText", "tooltipAlignment"];
 // Carbon and package components we use.
 /* TODO: @import(s) of carbon components and other package components. */
 
@@ -45,54 +44,60 @@ var componentName = 'UserAvatar';
  */
 
 var defaults = {
-  renderIcon: function renderIcon() {
-    return _User || (_User = /*#__PURE__*/React__default.createElement(User, {
-      size: 32
-    }));
-  },
-  tooltipAlignment: 'bottom',
-  tooltipText: 'Thomas J. Watson'
+  size: 'md',
+  tooltipAlignment: 'bottom'
 };
 var UserAvatar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
-  var _SetItem;
   var backgroundColor = _ref.backgroundColor,
     className = _ref.className,
-    _ref$renderIcon = _ref.renderIcon,
-    renderIcon = _ref$renderIcon === void 0 ? defaults.renderIcon : _ref$renderIcon,
-    _ref$tooltipText = _ref.tooltipText,
-    tooltipText = _ref$tooltipText === void 0 ? defaults.tooltipText : _ref$tooltipText,
+    name = _ref.name,
+    RenderIcon = _ref.renderIcon,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? defaults.size : _ref$size,
+    tooltipText = _ref.tooltipText,
     _ref$tooltipAlignment = _ref.tooltipAlignment,
     tooltipAlignment = _ref$tooltipAlignment === void 0 ? defaults.tooltipAlignment : _ref$tooltipAlignment,
     rest = _objectWithoutProperties(_ref, _excluded);
   var carbonPrefix = usePrefix();
-  var icons = {
-    user: {
-      md: _User2 || (_User2 = /*#__PURE__*/React__default.createElement(User, {
-        size: 32
-      }))
-    },
-    group: {
-      md: _Group || (_Group = /*#__PURE__*/React__default.createElement(Group, {
-        size: 32
-      }))
+  var iconSize = {
+    sm: 16,
+    md: 20,
+    lg: 24,
+    xl: 32
+  };
+  var formatInitials = function formatInitials() {
+    var _ref2;
+    var parts = name.split(' ');
+    var firstChar = parts[0].charAt(0).toUpperCase();
+    var secondChar = parts[0].charAt(1).toUpperCase();
+    if (parts.length === 1) {
+      return firstChar + secondChar;
+    }
+    var lastChar = parts[parts.length - 1].charAt(0).toUpperCase();
+    var initials = [firstChar];
+    if (lastChar) {
+      initials.push(lastChar);
     }
+    return (_ref2 = '').concat.apply(_ref2, initials);
   };
-  var getItem = function getItem(renderIcon) {
-    if (renderIcon === User) {
-      return icons.user['md'];
-    } else if (renderIcon === Group) {
-      return icons.group['md'];
-    } else {
-      return renderIcon;
+  var getItem = function getItem() {
+    var iconProps = {
+      size: iconSize[size]
+    };
+    if (RenderIcon) {
+      return /*#__PURE__*/React__default.createElement(RenderIcon, iconProps);
     }
+    if (name) {
+      return formatInitials();
+    }
+    return /*#__PURE__*/React__default.createElement(User, iconProps);
   };
-  var SetItem = getItem(renderIcon);
-  var renderUserAvatar = function renderUserAvatar() {
+  var Avatar = function Avatar() {
     return /*#__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.
-      "".concat(blockClass, "--").concat(backgroundColor),
+      "".concat(blockClass, "--").concat(backgroundColor), "".concat(blockClass, "--").concat(size),
       // example: `${blockClass}__template-string-class-${kind}-n-${size}`,
       {
         // switched classes dependant on props or state
@@ -100,13 +105,16 @@ var UserAvatar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       }),
       ref: ref,
       role: "img"
-    }, getDevtoolsProps(componentName)), _SetItem || (_SetItem = /*#__PURE__*/React__default.createElement(SetItem, null)));
+    }, getDevtoolsProps(componentName)), getItem());
   };
-  return SetItem && (tooltipText ? /*#__PURE__*/React__default.createElement(Tooltip, {
-    align: tooltipAlignment,
-    label: tooltipText,
-    className: "".concat(blockClass, "__tooltip ").concat(carbonPrefix, "--icon-tooltip")
-  }, /*#__PURE__*/React__default.createElement(TooltipTrigger, null, renderUserAvatar())) : renderUserAvatar());
+  if (tooltipText) {
+    return /*#__PURE__*/React__default.createElement(Tooltip, {
+      align: tooltipAlignment,
+      label: tooltipText,
+      className: "".concat(blockClass, "__tooltip ").concat(carbonPrefix, "--icon-tooltip")
+    }, /*#__PURE__*/React__default.createElement(TooltipTrigger, null, /*#__PURE__*/React__default.createElement(Avatar, null)));
+  }
+  return /*#__PURE__*/React__default.createElement(Avatar, null);
 });
 
 // Return a placeholder if not released and not enabled by feature flag
@@ -128,10 +136,18 @@ UserAvatar.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: PropTypes.string,
+  /**
+   * When passing the name prop, either send the initials to be used or the user's full name. The first two capital letters of the user's name will be used as the name.
+   */
+  name: PropTypes.string,
   /**
    * Provide a custom icon to use if you need to use an icon other than the default one
    */
-  renderIcon: PropTypes.func,
+  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  /**
+   * Set the size of the avatar circle
+   */
+  size: PropTypes.oneOf(['xl', 'lg', 'md', 'sm']),
   /**
    * Specify how the trigger should align with the tooltip
    */

package/es/components/index.d.ts

@@ -34,6 +34,7 @@ export { CoachmarkOverlayElement } from "./CoachmarkOverlayElement";
 export { CoachmarkOverlayElements } from "./CoachmarkOverlayElements";
 export { CoachmarkStack } from "./CoachmarkStack";
 export { NonLinearReading } from "./NonLinearReading";
+export { BigNumbers } from "./BigNumbers";
 export { TruncatedList } from "./TruncatedList";
 export { InterstitialScreen } from "./InterstitialScreen";
 export { InterstitialScreenView } from "./InterstitialScreenView";
@@ -41,6 +42,7 @@ export { InterstitialScreenViewModule } from "./InterstitialScreenViewModule";
 export { DelimitedList } from "./DelimitedList";
 export { FullPageError } from "./FullPageError";
 export { SearchBar } from "./SearchBar";
+export { StringFormatter } from "./StringFormatter";
 export { UserAvatar } from "./UserAvatar";
 export { ComboButton, ComboButtonItem } from "./ComboButton";
 export { CreateFullPage, CreateFullPageStep } from "./CreateFullPage";

package/es/global/js/hooks/index.d.ts

@@ -10,4 +10,5 @@ export { useValidCreateStepCount } from "./useValidCreateStepCount";
 export { useControllableState } from "./useControllableState";
 export { usePrefix } from "./usePrefix";
 export { useFocus } from "./useFocus";
+export { useIsomorphicEffect } from "./useIsomorphicEffect";
 export { useNearestScroll, useWindowScroll } from "./useWindowScroll";

package/es/global/js/hooks/useIsomorphicEffect.d.ts

@@ -0,0 +1,2 @@
+export const useIsomorphicEffect: typeof useEffect;
+import { useEffect } from 'react';

package/es/global/js/hooks/useIsomorphicEffect.js

@@ -0,0 +1,14 @@
+/**
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * 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 { useLayoutEffect, useEffect } from 'react';
+
+// Originally from `@carbon/react`, https://github.com/carbon-design-system/carbon/blob/main/packages/react/src/internal/useIsomorphicEffect.js
+// useLayoutEffect on the client, useEffect on the server
+var useIsomorphicEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
+export { useIsomorphicEffect };

package/es/global/js/package-settings.d.ts

@@ -75,9 +75,11 @@ declare namespace defaults {
         let EditTearsheetNarrow: boolean;
         let EditFullPage: boolean;
         let EditUpdateCards: boolean;
+        let BigNumbers: boolean;
         let TruncatedList: boolean;
         let DelimitedList: boolean;
         let FullPageError: boolean;
+        let StringFormatter: boolean;
         let Coachmark: boolean;
         let CoachmarkBeacon: boolean;
         let CoachmarkButton: boolean;

package/es/global/js/package-settings.js

@@ -74,9 +74,11 @@ var defaults = {
     EditTearsheetNarrow: false,
     EditFullPage: false,
     EditUpdateCards: false,
+    BigNumbers: false,
     TruncatedList: false,
     DelimitedList: false,
     FullPageError: false,
+    StringFormatter: false,
     /* new component flags here - comment used by generate CLI */
 
     // Novice to pro components not yet reviewed and released:

package/es/index.js

@@ -99,6 +99,7 @@ export { InlineTip } from './components/InlineTip/InlineTip.js';
 export { InlineTipButton } from './components/InlineTip/InlineTipButton.js';
 export { InlineTipLink } from './components/InlineTip/InlineTipLink.js';
 export { NonLinearReading } from './components/NonLinearReading/NonLinearReading.js';
+export { BigNumbers } from './components/BigNumbers/BigNumbers.js';
 export { TruncatedList } from './components/TruncatedList/TruncatedList.js';
 export { InterstitialScreen } from './components/InterstitialScreen/InterstitialScreen.js';
 export { InterstitialScreenView } from './components/InterstitialScreenView/InterstitialScreenView.js';
@@ -106,4 +107,5 @@ export { InterstitialScreenViewModule } from './components/InterstitialScreenVie
 export { DelimitedList } from './components/DelimitedList/DelimitedList.js';
 export { FullPageError } from './components/FullPageError/FullPageError.js';
 export { SearchBar } from './components/SearchBar/SearchBar.js';
+export { StringFormatter } from './components/StringFormatter/StringFormatter.js';
 export { UserAvatar } from './components/UserAvatar/UserAvatar.js';

package/es/settings.d.ts

@@ -61,9 +61,11 @@ export const pkg: {
         EditTearsheetNarrow: boolean;
         EditFullPage: boolean;
         EditUpdateCards: boolean;
+        BigNumbers: boolean;
         TruncatedList: boolean;
         DelimitedList: boolean;
         FullPageError: boolean;
+        StringFormatter: boolean;
         Coachmark: boolean;
         CoachmarkBeacon: boolean;
         CoachmarkButton: boolean;

package/lib/components/BigNumbers/BigNumbers.d.ts

@@ -0,0 +1,11 @@
+/**
+ * BigNumbers 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
+ * allow control over size, truncation, if the value is a percentage, the addition
+ * 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 let BigNumbers: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';

package/lib/components/BigNumbers/BigNumbers.js

@@ -0,0 +1,244 @@
+/**
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * 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 _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var index$1 = require('../../node_modules/prop-types/index.js');
+var index = require('../../node_modules/classnames/index.js');
+var devtools = require('../../global/js/utils/devtools.js');
+var settings = require('../../settings.js');
+var icons = require('@carbon/react/icons');
+var react = require('@carbon/react');
+var constants = require('./constants.js');
+var TooltipTrigger = require('../TooltipTrigger/TooltipTrigger.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var _Information;
+var _excluded = ["className", "forceShowTotal", "fractionDigits", "iconButton", "loading", "label", "locale", "percentage", "size", "tooltipDescription", "total", "trending", "truncate", "value"],
+  _excluded2 = ["className", "size"];
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(settings.pkg.prefix, "--big-numbers");
+var skeletonBlockClass = "".concat(settings.pkg.prefix, "--big-numbers-skeleton");
+var componentName = 'BigNumbers';
+
+// NOTE: the component SCSS is not imported here: it is rolled up separately.
+
+// Default values for props
+var defaults = {
+  forceShowTotal: false,
+  fractionDigits: 1,
+  loading: false,
+  locale: constants.DefaultLocale,
+  percentage: false,
+  size: constants.BigNumbersSize.Default,
+  total: 0,
+  trending: false,
+  truncate: true,
+  value: null
+};
+
+/**
+ * BigNumbers 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
+ * allow control over size, truncation, if the value is a percentage, the addition
+ * 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.
+ */
+exports.BigNumbers = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
+  var _formatValue, _formatValue2;
+  var className = _ref.className,
+    _ref$forceShowTotal = _ref.forceShowTotal,
+    forceShowTotal = _ref$forceShowTotal === void 0 ? defaults.forceShowTotal : _ref$forceShowTotal,
+    _ref$fractionDigits = _ref.fractionDigits,
+    fractionDigits = _ref$fractionDigits === void 0 ? defaults.fractionDigits : _ref$fractionDigits,
+    iconButton = _ref.iconButton,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? defaults.loading : _ref$loading,
+    label = _ref.label,
+    _ref$locale = _ref.locale,
+    locale = _ref$locale === void 0 ? defaults.locale : _ref$locale,
+    _ref$percentage = _ref.percentage,
+    percentage = _ref$percentage === void 0 ? defaults.percentage : _ref$percentage,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? defaults.size : _ref$size,
+    tooltipDescription = _ref.tooltipDescription,
+    _ref$total = _ref.total,
+    total = _ref$total === void 0 ? defaults.total : _ref$total,
+    _ref$trending = _ref.trending,
+    trending = _ref$trending === void 0 ? defaults.trending : _ref$trending,
+    _ref$truncate = _ref.truncate,
+    truncate = _ref$truncate === void 0 ? defaults.truncate : _ref$truncate,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? defaults.value : _ref$value,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var BigNumbersClasses = index["default"](className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--lg"), size === constants.BigNumbersSize.Large), "".concat(blockClass, "--xl"), size === constants.BigNumbersSize.XLarge));
+  var supportedLocale = constants.getSupportedLocale(locale);
+  var truncatedValue = (_formatValue = constants.formatValue(supportedLocale, value, fractionDigits, truncate)) !== null && _formatValue !== void 0 ? _formatValue : constants.Characters.Dash;
+  var truncatedTotal = (_formatValue2 = constants.formatValue(supportedLocale, total, fractionDigits, truncate)) !== null && _formatValue2 !== void 0 ? _formatValue2 : 'Unknown';
+  var shouldDisplayDenominator = !percentage && total > value && truncatedValue !== truncatedTotal || forceShowTotal && total > 0;
+  if (loading) {
+    return /*#__PURE__*/React__default["default"].createElement(SkeletonBigNumbers, _rollupPluginBabelHelpers["extends"]({}, rest, {
+      ref: ref,
+      className: className,
+      size: size
+    }, devtools.getDevtoolsProps(componentName)));
+  }
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
+    className: index["default"](blockClass, BigNumbersClasses, className),
+    ref: ref
+  }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(blockClass, "__row")
+  }, /*#__PURE__*/React__default["default"].createElement("h4", {
+    className: "".concat(blockClass, "__label")
+  }, label), tooltipDescription && /*#__PURE__*/React__default["default"].createElement(react.Tooltip, {
+    description: tooltipDescription,
+    align: "right",
+    className: "".concat(blockClass, "__info")
+  }, /*#__PURE__*/React__default["default"].createElement(TooltipTrigger.TooltipTrigger, {
+    className: "".concat(blockClass, "__tooltip-trigger")
+  }, _Information || (_Information = /*#__PURE__*/React__default["default"].createElement(icons.Information, {
+    size: 16
+  }))))), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(blockClass, "__row"),
+    role: "math"
+  }, trending && /*#__PURE__*/React__default["default"].createElement(icons.ArrowUp, {
+    className: "".concat(blockClass, "__trend"),
+    size: constants.getIconSize(size)
+  }), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(blockClass, "__value")
+  }, percentage ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(blockClass, "__percentage")
+  }, truncatedValue, /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(blockClass, "__percentage-mark")
+  }, "%")) : truncatedValue), shouldDisplayDenominator && /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(blockClass, "__total")
+  }, /*#__PURE__*/React__default["default"].createElement("span", null, constants.Characters.Slash, truncatedTotal)), iconButton));
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+exports.BigNumbers = settings.pkg.checkComponentEnabled(exports.BigNumbers, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+exports.BigNumbers.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.
+exports.BigNumbers.propTypes = {
+  /**
+   * Optional class name.
+   * @type number
+   */
+  className: index$1["default"].string,
+  /**
+   * Display the `total` even when the `value` is equal to
+   * the `total` when `forceShowTotal` prop is true on the
+   * condition that the `total` is greater than 0.
+   * @type bool
+   */
+  forceShowTotal: index$1["default"].bool,
+  /**
+   * Optional value to control the maximum fraction digits
+   * used when truncating the value and total.
+   * @type number
+   */
+  fractionDigits: index$1["default"].number,
+  /** Displays an iconButton next to the BigNumbers value
+   * @type node
+   */
+  iconButton: index$1["default"].node,
+  /**
+   * Text label for BigNumbers.
+   * @type string
+   */
+  label: index$1["default"].string.isRequired,
+  /** Specify if the BigNumbers is in a loading state
+   * @type bool
+   */
+  loading: index$1["default"].bool,
+  /**
+   * Locale value to determine approach to formatting numbers.
+   * @type string
+   */
+  locale: index$1["default"].string,
+  /**
+   * Format number to percentage when `percentage` prop is true.
+   * @type bool
+   */
+  percentage: index$1["default"].bool,
+  /** The size of the BigNumbers.
+   * @type string
+   */
+  size: index$1["default"].oneOf(Object.values(constants.BigNumbersSize)),
+  /** Label applied to a Tooltip - marked with the Information icon.
+   * @type string
+   */
+  tooltipDescription: index$1["default"].string,
+  /**
+   * Total value that the main BigNumbers value is a subset of.
+   * @type number
+   */
+  total: index$1["default"].number,
+  /** Display trending icon.
+   * @type boolean
+   */
+  trending: index$1["default"].bool,
+  /** Specify whether or not the values should be truncated.
+   * @type boolean
+   */
+  truncate: index$1["default"].bool,
+  /**
+   * The main BigNumbers value to display
+   * @type number
+   */
+  value: index$1["default"].number
+};
+
+/**
+ * SkeletonBigNumbers is used to display a skeleton version while
+ * content is loading (handled by the BigNumbers prop `loading').
+ *
+ * Note: This component is only used within BigNumbers.
+ */
+var SkeletonBigNumbers = /*#__PURE__*/React__default["default"].forwardRef(function (_ref2, ref) {
+  var className = _ref2.className,
+    size = _ref2.size,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded2);
+  var BigNumbersSkeletonClasses = index["default"](className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(skeletonBlockClass, "--lg"), size === constants.BigNumbersSize.Large), "".concat(skeletonBlockClass, "--xl"), size === constants.BigNumbersSize.XLarge));
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
+    className: index["default"](className, skeletonBlockClass, BigNumbersSkeletonClasses),
+    ref: ref
+  }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React__default["default"].createElement(react.SkeletonText, {
+    className: "".concat(skeletonBlockClass, "__label")
+  }), /*#__PURE__*/React__default["default"].createElement(react.SkeletonText, {
+    heading: true,
+    className: "".concat(skeletonBlockClass, "__value"),
+    width: "80%"
+  }));
+});
+SkeletonBigNumbers.propTypes = {
+  /**
+   * Optional class name.
+   * @type number
+   */
+  className: index$1["default"].string,
+  /** The size of the BigNumbers.
+   * @type string
+   */
+  size: index$1["default"].oneOf(Object.values(constants.BigNumbersSize))
+};

package/lib/components/BigNumbers/constants.d.ts

@@ -0,0 +1,13 @@
+export namespace BigNumbersSize {
+    let Default: string;
+    let Large: string;
+    let XLarge: string;
+}
+export namespace Characters {
+    let Dash: string;
+    let Slash: string;
+}
+export const DefaultLocale: "en-US";
+export function formatValue(locale: string, value: number, fractionDigits: number, truncate: boolean): string | null;
+export function getIconSize(size: string): 16 | 20 | 24;
+export function getSupportedLocale(locale: string): string;

package/lib/components/BigNumbers/constants.js

@@ -0,0 +1,76 @@
+/**
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * 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 });
+
+/* **************************** | CONSTANTS | ***************************** */
+
+var BigNumbersSize = {
+  Default: 'default',
+  Large: 'lg',
+  XLarge: 'xl'
+};
+var Characters = {
+  Dash: '–',
+  Slash: '/'
+};
+var DefaultLocale = 'en-US';
+
+/* ************************ | UTILITY FUNCTIONS | ************************* */
+
+/**
+ * Ensure that the value is formatted correctly based on whether it should be truncated or not.
+ * @param {string} locale Locale value to be used in formatting numbers.
+ * @param {number} value The value to format.
+ * @param {number} fractionDigits How many significant figures should be displayed.
+ * @param {boolean} truncate Whether or not the value should be truncated.
+ * @returns {string | null} The formatted value.
+ */
+var formatValue = function formatValue(locale, value, fractionDigits, truncate) {
+  if (value === null || value === undefined || typeof value !== 'number') {
+    return null;
+  }
+  return truncate ? Intl.NumberFormat(locale, {
+    notation: 'compact',
+    minimumFractionDigits: 0,
+    maximumFractionDigits: Math.round(fractionDigits)
+  }).format(value) : Intl.NumberFormat(locale).format(value);
+};
+
+/**
+ * Function which takes a size and returns a numeric value for sizing icons
+ * @param {string} size Size of desired icon. Expected values are 'default', 'lg', or 'xl'.
+ */
+var getIconSize = function getIconSize(size) {
+  switch (size) {
+    case BigNumbersSize.Large:
+      return 20;
+    case BigNumbersSize.XLarge:
+      return 24;
+    default:
+      return 16;
+  }
+};
+
+/**
+ * Function which takes a locale and returns a supported locale or the default
+ * @param {string} locale Desired locale for number formatting.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#locales
+ */
+var getSupportedLocale = function getSupportedLocale(locale) {
+  return Intl.NumberFormat.supportedLocalesOf(locale).length > 0 ? locale : DefaultLocale;
+};
+
+exports.BigNumbersSize = BigNumbersSize;
+exports.Characters = Characters;
+exports.DefaultLocale = DefaultLocale;
+exports.formatValue = formatValue;
+exports.getIconSize = getIconSize;
+exports.getSupportedLocale = getSupportedLocale;

package/lib/components/BigNumbers/index.d.ts

@@ -0,0 +1 @@
+export { BigNumbers } from "./BigNumbers";

package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js

@@ -24,6 +24,7 @@ var checkActiveHeaderCell = require('./utils/checkActiveHeaderCell.js');
 var checkSelectedHeaderCell = require('./utils/checkSelectedHeaderCell.js');
 var handleHeaderCellSelection = require('./utils/handleHeaderCellSelection.js');
 var getSpreadsheetWidth = require('./utils/getSpreadsheetWidth.js');
+var checkForHoldingKey = require('./utils/checkForHoldingKey.js');
 var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
 var useSpreadsheetMouseUp = require('./hooks/useSpreadsheetMouseUp.js');
 
@@ -212,8 +213,8 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       var closestBodyCell = event.target.closest(".".concat(blockClass, "__body--td"));
       var isValidSelectionAreaStart = closestBodyCell.classList.contains("".concat(blockClass, "__body--td"));
       setValidStartingPoint(isValidSelectionAreaStart);
-      var isHoldingCommandKey = event.metaKey || event.ctrlKey;
-      var isHoldingShiftKey = event.shiftKey;
+      var isHoldingCommandKey = checkForHoldingKey.checkForHoldingKey(event, 'cmd');
+      var isHoldingShiftKey = checkForHoldingKey.checkForHoldingKey(event, 'shiftKey');
       setContainerHasFocus(true);
       var activeCoordinates = {
         row: cell.row.index,
@@ -315,7 +316,7 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, [clickAndHoldActive, currentMatcher, setSelectionAreas]);
   var handleRowHeaderClick = React.useCallback(function (index) {
     return function (event) {
-      var isHoldingCommandKey = event.metaKey || event.ctrlKey;
+      var isHoldingCommandKey = checkForHoldingKey.checkForHoldingKey(event, 'cmd');
       handleHeaderCellSelection.handleHeaderCellSelection({
         type: 'row',
         activeCellCoordinates: activeCellCoordinates,

package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js

@@ -20,6 +20,7 @@ var checkSelectedHeaderCell = require('./utils/checkSelectedHeaderCell.js');
 var handleHeaderCellSelection = require('./utils/handleHeaderCellSelection.js');
 var selectAllCells = require('./utils/selectAllCells.js');
 var getSpreadsheetWidth = require('./utils/getSpreadsheetWidth.js');
+var checkForHoldingKey = require('./utils/checkForHoldingKey.js');
 var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
 var useSpreadsheetMouseMove = require('./hooks/useSpreadsheetMouseMove.js');
 
@@ -70,8 +71,8 @@ var DataSpreadsheetHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, [cellSize, ref, scrollBarSize, previousState === null || previousState === void 0 ? void 0 : previousState.cellSize]);
   var handleColumnHeaderClick = function handleColumnHeaderClick(index) {
     return function (event) {
-      var isHoldingCommandKey = event.metaKey || event.ctrlKey;
-      var isHoldingShiftKey = event.shiftKey;
+      var isHoldingCommandKey = checkForHoldingKey.checkForHoldingKey(event, 'cmd');
+      var isHoldingShiftKey = checkForHoldingKey.checkForHoldingKey(event, 'shiftKey');
       handleHeaderCellSelection.handleHeaderCellSelection({
         type: 'column',
         activeCellCoordinates: activeCellCoordinates,

package/lib/components/DataSpreadsheet/utils/checkForHoldingKey.d.ts

@@ -0,0 +1 @@
+export function checkForHoldingKey(event: any, key: any): any;