@carbon/ibm-products 2.80.0-rc.0 → 2.81.0-rc.0

package/lib/components/AddSelect/add-select-utils.js

@@ -1,133 +0,0 @@
-/**
- * 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.
- */
-
-'use strict';
-
-// Copyright IBM Corp. 2022, 2022
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-/**
- * to be able to more easily and efficiently the child entries the data needs to be
- * normalized. this function recursively goes through the data array to build a single
- * object who's keys are the id's of every single entry
- * @param {object} data
- * @returns an object of normalized data
- */
-const normalize = data => {
-  const items = data.entries.reduce((prev, cur) => {
-    const {
-      children,
-      ...item
-    } = cur;
-    prev[item.id] = item;
-    if (children) {
-      const childItems = normalize(children);
-      return {
-        ...prev,
-        ...childItems
-      };
-    }
-    return prev;
-  }, {});
-  return items;
-};
-
-/**
- * takes in a global filters array and a flat list of items
- * it then searches through the items and finds any with the matching filter properties
- * and adds those values to the array
- * globalFilters looks like [{ id: someProperty }]
- * the returned array would look like [{ id: someProperty, opts: [value, value]}]
- * @param {Array} globalFilters - list of filter properties
- * @param {Array} items - items to search through
- * @returns an array of filter values
- */
-const getGlobalFilterValues = (globalFilters, items) => {
-  const itemIds = Object.keys(items);
-  const results = globalFilters.reduce((prevFilter, curFilter) => {
-    const filterId = curFilter.id;
-    const filterOpts = itemIds.reduce((prevId, curId) => {
-      const curItem = items[curId];
-      const value = curItem[filterId];
-      if (value && !prevId.includes(value)) {
-        prevId.push(value);
-      }
-      return prevId;
-    }, []);
-    prevFilter.push({
-      opts: filterOpts,
-      ...curFilter
-    });
-    return prevFilter;
-  }, []);
-  return results;
-};
-const sortItems = (attribute, direction) => {
-  return (a, b) => {
-    const valueA = a[attribute]?.split(' ').join('');
-    const valueB = b[attribute]?.split(' ').join('');
-    if (direction === 'desc') {
-      return valueA > valueB ? -1 : 1;
-    }
-    return valueA < valueB ? -1 : 1;
-  };
-};
-const getFilteredItems = (useNormalizedItems, normalizedItems, searchTerm, globalFiltersApplied, globalFilterKeys, appliedGlobalFilters, sortFn, multi, items, path) => {
-  /**
-   * useNormalizedItems just specifies if the data is hierarchical. the data structure
-   * is an object and not an array.
-   */
-  if (useNormalizedItems) {
-    const itemIds = Object.keys(normalizedItems);
-    if (searchTerm || globalFiltersApplied) {
-      const results = itemIds.reduce((prev, cur) => {
-        if (normalizedItems[cur].title.toLowerCase().includes(searchTerm.toLowerCase())) {
-          prev.push(normalizedItems[cur]);
-        }
-        return prev;
-      }, []).filter(item => {
-        return globalFilterKeys.every(filter => item[filter] === appliedGlobalFilters[filter]);
-      }).sort(sortFn);
-      return results;
-    }
-    /**
-     * multi select with hierarchy requires special consideration because columns
-     * are built recursively, so the items are just returned
-     */
-    if (multi) {
-      return items;
-    }
-    /**
-     * because single add select with hierarchy isn't recursively built the data
-     * structure has to be built around the path to maintain the folder structure
-     */
-    if (path.length > 1) {
-      return path.reduce((prev, cur, curIdx) => {
-        // because the root of the path never changes we can skip it
-        if (curIdx === 0) {
-          return prev;
-        }
-        const item = prev.find(item => item.id === cur.id)?.children?.entries;
-        return item;
-      }, items.entries);
-    }
-    return items.entries;
-  } else {
-    if (searchTerm) {
-      return items.entries.filter(item => item.title.toLowerCase().includes(searchTerm.toLowerCase()));
-    }
-    return items.entries;
-  }
-};
-
-exports.getFilteredItems = getFilteredItems;
-exports.getGlobalFilterValues = getGlobalFilterValues;
-exports.normalize = normalize;
-exports.sortItems = sortItems;

package/lib/components/AddSelect/hooks/useFocus.d.ts

@@ -1,2 +0,0 @@
-export default useFocus;
-declare function useFocus(size: any): (string | import("react").Dispatch<import("react").SetStateAction<string>>)[];

package/lib/components/AddSelect/hooks/useFocus.js

@@ -1,40 +0,0 @@
-/**
- * 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.
- */
-
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-
-const useFocus = size => {
-  // the state should represent the location of the item in the array
-  // make it '' initially so that it doesn't automatically focus the first item
-  const [currentFocus, setCurrentFocus] = React.useState('');
-  const handleKeyDown = React.useCallback(e => {
-    const focus = currentFocus === '' ? 0 : currentFocus;
-    if (e.keyCode === 40) {
-      // Down arrow
-      e.preventDefault();
-      setCurrentFocus(focus === size - 1 ? 0 : focus + 1);
-    } else if (e.keyCode === 38) {
-      // Up arrow
-      e.preventDefault();
-      setCurrentFocus(focus === 0 ? size - 1 : focus - 1);
-    }
-  }, [size, currentFocus, setCurrentFocus]);
-  React.useEffect(() => {
-    const el = document.querySelector('#add-select-focus');
-    el.addEventListener('keydown', handleKeyDown, false);
-    return () => {
-      el.removeEventListener('keydown', handleKeyDown, false);
-    };
-  }, [handleKeyDown]);
-  return [currentFocus, setCurrentFocus];
-};
-
-exports.default = useFocus;

package/lib/components/AddSelect/hooks/useItemSort.d.ts

@@ -1,6 +0,0 @@
-export function useItemSort(): {
-    sortDirection: string;
-    setSortDirection: import("react").Dispatch<import("react").SetStateAction<string>>;
-    sortAttribute: string;
-    setSortAttribute: import("react").Dispatch<import("react").SetStateAction<string>>;
-};

package/lib/components/AddSelect/hooks/useItemSort.js

@@ -1,29 +0,0 @@
-/**
- * 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.
- */
-
-'use strict';
-
-var React = require('react');
-
-// Copyright IBM Corp. 2022, 2022
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-const useItemSort = () => {
-  const [sortDirection, setSortDirection] = React.useState('');
-  const [sortAttribute, setSortAttribute] = React.useState('');
-  return {
-    sortDirection,
-    setSortDirection,
-    sortAttribute,
-    setSortAttribute
-  };
-};
-
-exports.useItemSort = useItemSort;

package/lib/components/AddSelect/hooks/useParentSelect.d.ts

@@ -1,5 +0,0 @@
-export default useParentSelect;
-declare function useParentSelect(): {
-    parentSelected: null;
-    setParentSelected: import("react").Dispatch<import("react").SetStateAction<null>>;
-};

package/lib/components/AddSelect/hooks/useParentSelect.js

@@ -1,28 +0,0 @@
-/**
- * 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.
- */
-
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-
-// Copyright IBM Corp. 2022, 2022
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-const useParentSelect = () => {
-  const [parentSelected, setParentSelected] = React.useState(null);
-  return {
-    parentSelected,
-    setParentSelected
-  };
-};
-
-exports.default = useParentSelect;

package/lib/components/AddSelect/hooks/usePath.d.ts

@@ -1,10 +0,0 @@
-export default usePath;
-declare function usePath(itemsLabel?: string): {
-    path: {
-        id: string;
-        title: string;
-    }[];
-    setPath: (id: any, title: any, parentId: any) => void;
-    pathOnclick: (idx: any) => void;
-    resetPath: () => void;
-};

package/lib/components/AddSelect/hooks/usePath.js

@@ -1,71 +0,0 @@
-/**
- * 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.
- */
-
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-
-// Copyright IBM Corp. 2022, 2022
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-const usePath = function () {
-  let itemsLabel = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  const [path, setPath] = React.useState([{
-    id: 'base_of_path',
-    title: itemsLabel
-  }]);
-  React.useEffect(() => {
-    setPath([{
-      id: 'base_of_path',
-      title: itemsLabel
-    }]);
-  }, [itemsLabel]);
-  const handler = (id, title, parentId) => {
-    if (path.find(entry => entry.id === id)) {
-      return;
-    }
-    const pathEntry = {
-      id,
-      title,
-      ...(parentId && {
-        parentId
-      })
-    };
-    if (path.find(entry => entry.parentId === parentId)) {
-      const parentIdx = path.findIndex(entry => entry.id === parentId);
-      const pathCopy = [...path];
-      pathCopy.length = parentIdx + 1;
-      setPath([...pathCopy, pathEntry]);
-    } else {
-      setPath([...path, pathEntry]);
-    }
-  };
-  const pathClickHandler = idx => {
-    const pathCopy = [...path];
-    pathCopy.length = idx + 1;
-    setPath([...pathCopy]);
-  };
-  const resetPath = () => {
-    setPath([{
-      id: 'base_of_path',
-      title: itemsLabel
-    }]);
-  };
-  return {
-    path,
-    setPath: handler,
-    pathOnclick: pathClickHandler,
-    resetPath
-  };
-};
-
-exports.default = usePath;

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

@@ -1,2 +0,0 @@
-export { AddSelect } from './AddSelect';
-export type { AddSelectProps } from './AddSelect';

package/lib/components/AddSelect/types/index.d.ts

@@ -1,51 +0,0 @@
-/**
- * Copyright IBM Corp. 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 { ReactNode } from 'react';
-export type Theme = 'light' | 'dark';
-export interface Filter {
-    id?: string;
-    label?: string;
-}
-export interface Modifier {
-    id?: string;
-    label?: string;
-    options?: string[];
-    multiSelect?: boolean;
-}
-export interface Avatar {
-    alt?: string;
-    icon?: () => void;
-    src?: string;
-    theme?: Theme;
-}
-export interface Meta {
-    id?: string;
-    title?: string;
-    value?: string;
-}
-export interface Entry {
-    id: string;
-    title: string;
-    value: string;
-    avatar?: Avatar;
-    children?: ReactNode;
-    icon?: () => void | object;
-    meta?: Meta[] | ReactNode;
-    subtitle?: string;
-}
-export interface Item {
-    entries: Entry[];
-    modifiers?: Modifier;
-    sortBy?: string[];
-    filterBy?: string[];
-}
-export interface SortOption {
-    id?: string;
-    direction?: string;
-    attribute?: string;
-    label?: string;
-}

package/lib/components/BigNumber/BigNumber.d.ts

@@ -1,34 +0,0 @@
-/**
- * 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, { ReactNode } from 'react';
-import { BigNumberSizeValues } from './constants';
-export interface BigNumberProps {
-    className?: string;
-    forceShowTotal?: boolean;
-    fractionDigits?: number;
-    iconButton?: ReactNode;
-    loading?: boolean;
-    label: string;
-    locale?: string;
-    percentage?: boolean;
-    size?: BigNumberSizeValues;
-    tooltipDescription?: string;
-    total?: number;
-    trending?: boolean;
-    truncate?: boolean;
-    value?: number;
-}
-/**
- * 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
- * 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 declare const BigNumber: React.ForwardRefExoticComponent<BigNumberProps & React.RefAttributes<HTMLDivElement>>;

package/lib/components/BigNumber/BigNumber.js

@@ -1,179 +0,0 @@
-/**
- * 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.
- */
-
-'use strict';
-
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var React = require('react');
-var index = require('../../_virtual/index.js');
-var cx = require('classnames');
-var devtools = require('../../global/js/utils/devtools.js');
-var getSupportedLocale = require('../../global/js/utils/getSupportedLocale.js');
-var settings = require('../../settings.js');
-var icons = require('@carbon/react/icons');
-var react = require('@carbon/react');
-var BigNumberSkeleton = require('./BigNumberSkeleton.js');
-var constants = require('./constants.js');
-var TooltipTrigger = require('../TooltipTrigger/TooltipTrigger.js');
-
-var _Information;
-const blockClass = `${settings.pkg.prefix}--big-number`;
-const componentName = 'BigNumber';
-
-// NOTE: the component SCSS is not imported here: it is rolled up separately.
-
-/**
- * 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
- * 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.
- */
-const BigNumber = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    // The component props, in alphabetical order (for consistency).
-    className,
-    forceShowTotal = false,
-    fractionDigits = 1,
-    iconButton,
-    loading = false,
-    label,
-    locale = constants.DefaultLocale,
-    percentage = false,
-    size = 'default',
-    tooltipDescription,
-    total,
-    trending = false,
-    truncate = true,
-    value,
-    // Collect any other property values passed in.
-    ...rest
-  } = _ref;
-  const bigNumberClasses = cx(className, {
-    [`${blockClass}--lg`]: size === 'lg',
-    [`${blockClass}--xl`]: size === 'xl'
-  });
-  const supportedLocale = getSupportedLocale.getSupportedLocale(locale, constants.DefaultLocale);
-  const truncatedValue = constants.formatValue(supportedLocale, value, fractionDigits, truncate) ?? constants.Characters.Dash;
-  const truncatedTotal = constants.formatValue(supportedLocale, total, fractionDigits, truncate) ?? 'Unknown';
-  const shouldDisplayDenominator = forceShowTotal || !percentage && total && value && total > value && truncatedValue !== truncatedTotal;
-  if (loading) {
-    return /*#__PURE__*/React.createElement(BigNumberSkeleton.BigNumberSkeleton, _rollupPluginBabelHelpers.extends({}, rest, {
-      ref: ref,
-      className: className,
-      size: size
-    }, devtools.getDevtoolsProps(componentName)));
-  }
-  return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
-    className: cx(blockClass, bigNumberClasses, className),
-    ref: ref
-  }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("span", {
-    className: `${blockClass}__row`
-  }, /*#__PURE__*/React.createElement("h4", {
-    className: `${blockClass}__label`
-  }, label), tooltipDescription && /*#__PURE__*/React.createElement(react.Tooltip, {
-    description: tooltipDescription,
-    align: "right",
-    className: `${blockClass}__info`
-  }, /*#__PURE__*/React.createElement(TooltipTrigger.TooltipTrigger, {
-    className: `${blockClass}__tooltip-trigger`
-  }, _Information || (_Information = /*#__PURE__*/React.createElement(icons.Information, {
-    size: 16
-  }))))), /*#__PURE__*/React.createElement("span", {
-    className: `${blockClass}__row`,
-    role: "math"
-  }, trending && /*#__PURE__*/React.createElement(icons.ArrowUp, {
-    className: `${blockClass}__trend`,
-    size: constants.getIconSize(size)
-  }), /*#__PURE__*/React.createElement("span", {
-    className: `${blockClass}__value`
-  }, percentage ? /*#__PURE__*/React.createElement("div", {
-    className: `${blockClass}__percentage`
-  }, truncatedValue, /*#__PURE__*/React.createElement("span", {
-    className: `${blockClass}__percentage-mark`
-  }, "%")) : truncatedValue), shouldDisplayDenominator && /*#__PURE__*/React.createElement("span", {
-    className: `${blockClass}__total`
-  }, /*#__PURE__*/React.createElement("span", null, `${constants.Characters.Slash}${truncatedTotal}`)), /*#__PURE__*/React.createElement("span", {
-    className: `${blockClass}__icon-button`
-  }, iconButton)));
-});
-
-// The display name of the component, used by React. Note that displayName
-// is used in preference to relying on function.name.
-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.
-BigNumber.propTypes = {
-  /**
-   * Provide an optional class to be applied to the containing node.
-   */
-  className: index.default.string,
-  /**
-   * The default behavior will hide `total` if `undefined` or is the same as `value`.
-   *
-   * Set to `true` to ignore the default behavior and show the `total`.
-   */
-  forceShowTotal: index.default.bool,
-  /**
-   * Specifies the number of fraction digits when truncating `value` and `total`.
-   */
-  fractionDigits: index.default.number,
-  /**
-   * Displays an icon button next to `value`.
-   */
-  iconButton: index.default.node,
-  /**
-   * Text label above the `value`.
-   */
-  label: index.default.string.isRequired,
-  /**
-   * When `true`, will show the loading state.
-   */
-  loading: index.default.bool,
-  /**
-   * Determines how `value` and `total` will be formatted.
-   */
-  locale: index.default.string,
-  /**
-   * Appends a percent sign (_%_) after `value` and hides `total`.
-   */
-  percentage: index.default.bool,
-  /**
-   *
-   */
-  size: index.default.oneOf(['default', 'lg', 'xl']),
-  /**
-   * When applied, an information icon will be rendered next to the
-   * `label` and the description will be applied to its tooltip.
-   */
-  tooltipDescription: index.default.string,
-  /**
-   * The number that will appear after the slash (i.e. the "denominator" of a fraction).
-   *
-   * This number will not be rendered if it's the same as `value` or
-   * `percentage` is true. See also the **forceShowTotal** prop.
-   */
-  total: index.default.number,
-  /**
-   * When `true`, will render a "trending up" icon.
-   */
-  trending: index.default.bool,
-  /**
-   * Abbreviates the number when `true`. E.g. from _1,000_ to _1K_.
-   */
-  truncate: index.default.bool,
-  /**
-   * The primary value to display (or the "numerator" of a fraction).
-   */
-  value: index.default.number
-};
-
-exports.BigNumber = BigNumber;

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

@@ -1,17 +0,0 @@
-/**
- * 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/lib/components/BigNumber/BigNumberSkeleton.js

@@ -1,68 +0,0 @@
-/**
- * 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.
- */
-
-'use strict';
-
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var React = require('react');
-var index = require('../../_virtual/index.js');
-var cx = require('classnames');
-var devtools = require('../../global/js/utils/devtools.js');
-var settings = require('../../settings.js');
-var react = require('@carbon/react');
-var constants = require('./constants.js');
-
-// The block part of our conventional BEM class names (blockClass__E--M).
-const blockClass = `${settings.pkg.prefix}--big-number-skeleton`;
-const componentName = 'BigNumberSkeleton';
-
-/**
- * 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.
- */
-
-// Use the same properties and values as parent BigNumberProps
-
-const BigNumberSkeleton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    className,
-    size,
-    ...rest
-  } = _ref;
-  const bigNumberSkeletonClasses = cx(className, blockClass, {
-    [`${blockClass}--lg`]: size === constants.BigNumberSize.Large,
-    [`${blockClass}--xl`]: size === constants.BigNumberSize.XLarge
-  });
-  return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
-    className: bigNumberSkeletonClasses,
-    ref: ref
-  }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(react.SkeletonText, {
-    className: `${blockClass}__label`
-  }), /*#__PURE__*/React.createElement(react.SkeletonText, {
-    heading: true,
-    className: `${blockClass}__value`,
-    width: "80%"
-  }));
-});
-
-// The display name of the component, used by React. Note that displayName
-// is used in preference to relying on function.name.
-BigNumberSkeleton.displayName = componentName;
-BigNumberSkeleton.propTypes = {
-  /**
-   * Provide an optional class to be applied to the containing node.
-   */
-  className: index.default.string,
-  /**
-   *
-   */
-  size: index.default.oneOf([constants.BigNumberSize.Default, constants.BigNumberSize.Large, constants.BigNumberSize.XLarge])
-};
-
-exports.BigNumberSkeleton = BigNumberSkeleton;