@carbon/ibm-products 2.38.0 → 2.39.0

package/lib/components/Checklist/Checklist.d.ts

@@ -1,8 +1,106 @@
+/**
+ * Copyright IBM Corp. 2023, 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.
+ */
+/// <reference path="../../../src/custom-typings/index.d.ts" />
+/**
+ * TODO: Breakdown titles, icons, clickable items into sub-components
+ * See
+ *   ModifiedTabs (ModifiedTabLabelNew, ModifiedTabLabelWithClose)
+ *   PageHeader (PageHeaderTitle, PageHeaderUtils)
+ */
+import React, { ReactNode } from 'react';
+import { IconButton } from '@carbon/react';
+import { Kind, Theme } from './Checklist.types';
+type Task = {
+    kind: Kind;
+    label: string;
+    onClick?(task?: Task): void;
+};
+type TaskList = {
+    title?: string;
+    tasks: Array<Task>;
+};
+interface ChecklistProps {
+    /**
+     * Define both `chartLabel` and `chartValue` to show the chart and its label together.
+     */
+    chartLabel?: string;
+    /**
+     * A number between 0 and 1.
+     *
+     * Define both `chartLabel` and `chartValue` to show the chart and its label together.
+     */
+    chartValue?: number;
+    /**
+     * Aria-label for the Checklist component.
+     */
+    checklistAriaLabel?: string;
+    /**
+     * Aria-label for the Checklist's toggle component.
+     */
+    checklistToggleAriaLabel?: string;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * Whether or not to show the open/close toggle.
+     */
+    enableToggle?: boolean;
+    /**
+     * Callback for the "View all" button. See also `viewAllLabel`.
+     */
+    onClickViewAll?(): void;
+    /**
+     * Optional callback for when the list is opened/closed.
+     */
+    onToggle?(isOpen?: boolean): void;
+    /**
+     * Specifies whether the component is opened or closed.
+     * This can be set during initialization, or changed after being rendered.
+     */
+    open?: boolean;
+    /**
+     * The task list can be broken down into sub-lists.
+     *
+     * Each sub-list can include an optional `title`.
+     *
+     * Each task must specify the appropriate icon (`kind`) and `label`.
+     *
+     * If any task has an `onClick` callback function defined,
+     * then the `label` will be rendered as a button,
+     * else the `label` will be rendered as plain text.
+     */
+    taskLists: Array<TaskList>;
+    /**
+     * Determines the theme of the component.
+     */
+    theme?: Theme;
+    /**
+     * The title of the component.
+     */
+    title?: ReactNode;
+    /**
+     * The label for the toggle's tooltip.
+     */
+    toggleLabel?: string;
+    /**
+     * The alignment of the toggle's tooltip.
+     */
+    toggleLabelAlign?: React.ComponentProps<typeof IconButton>['align'];
+    /**
+     * If defined, will show and enable the "View all (#)" button at the bottom of the list.
+     */
+    viewAllLabel?: string;
+}
 /**
  * The Checklist tracks a user's progress much like Your Learning or
  * WalkMe. Each item in the list can be clickable, and each item has
  * an icon that defines the item's state as "not started", "in progress",
  * and "complete".
  */
-export let Checklist: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let Checklist: React.ForwardRefExoticComponent<ChecklistProps & React.RefAttributes<HTMLElement>>;
+export {};

package/lib/components/Checklist/Checklist.js

@@ -20,6 +20,7 @@ var react = require('@carbon/react');
 var icons = require('@carbon/react/icons');
 var ChecklistIcon = require('./ChecklistIcon.js');
 var ChecklistChart = require('./ChecklistChart.js');
+var Checklist_types = require('./Checklist.types.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -52,7 +53,7 @@ var defaults = {
   open: true,
   enableToggle: true,
   taskLists: [],
-  theme: 'light',
+  theme: Checklist_types.Themes.light,
   toggleLabel: 'Toggle',
   toggleLabelAlign: 'top'
 };
@@ -176,11 +177,13 @@ exports.Checklist = /*#__PURE__*/React__default["default"].forwardRef(function (
         className: "".concat(blockClass, "__list-item"),
         key: "".concat(item.label, "-").concat(index)
       }, /*#__PURE__*/React__default["default"].createElement(ChecklistIcon.ChecklistIcon, {
-        kind: item.kind
+        kind: item.kind,
+        theme: theme
       }), typeof item.onClick === 'function' ? /*#__PURE__*/React__default["default"].createElement(react.Button, {
         className: cx__default["default"]("".concat(blockClass, "__button"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__button--error"), item.kind === 'error')),
         onClick: function onClick() {
-          item.onClick(item);
+          var _item$onClick;
+          (_item$onClick = item.onClick) === null || _item$onClick === void 0 || _item$onClick.call(item, item);
         },
         size: "sm",
         title: item.label
@@ -256,10 +259,11 @@ exports.Checklist.propTypes = {
    * then the `label` will be rendered as a button,
    * else the `label` will be rendered as plain text.
    */
+  /**@ts-ignore */
   taskLists: index["default"].arrayOf(index["default"].shape({
     title: index["default"].string,
     tasks: index["default"].arrayOf(index["default"].shape({
-      kind: index["default"].oneOf(['unchecked', 'indeterminate', 'checked', 'disabled', 'error']).isRequired,
+      kind: index["default"].oneOf([Checklist_types.Kinds.unchecked, Checklist_types.Kinds.indeterminate, Checklist_types.Kinds.checked, Checklist_types.Kinds.disabled, Checklist_types.Kinds.error]).isRequired,
       label: index["default"].string.isRequired,
       onClick: index["default"].func
     })).isRequired
@@ -267,7 +271,7 @@ exports.Checklist.propTypes = {
   /**
    * Determines the theme of the component.
    */
-  theme: index["default"].oneOf(['light', 'dark']),
+  theme: index["default"].oneOf([Checklist_types.Themes.light, Checklist_types.Themes.dark]),
   /**
    * The title of the component.
    */

package/lib/components/Checklist/Checklist.types.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright IBM Corp. 2024, 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.
+ */
+export declare enum Themes {
+    light = "light",
+    dark = "dark"
+}
+export type Theme = Themes.light | Themes.dark;
+export declare enum Kinds {
+    unchecked = "unchecked",
+    indeterminate = "indeterminate",
+    checked = "checked",
+    disabled = "disabled",
+    error = "error"
+}
+export type Kind = Kinds.unchecked | Kinds.indeterminate | Kinds.checked | Kinds.disabled | Kinds.error;

package/lib/components/Checklist/Checklist.types.js

@@ -0,0 +1,27 @@
+/**
+ * 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 Themes = /*#__PURE__*/function (Themes) {
+  Themes["light"] = "light";
+  Themes["dark"] = "dark";
+  return Themes;
+}({});
+var Kinds = /*#__PURE__*/function (Kinds) {
+  Kinds["unchecked"] = "unchecked";
+  Kinds["indeterminate"] = "indeterminate";
+  Kinds["checked"] = "checked";
+  Kinds["disabled"] = "disabled";
+  Kinds["error"] = "error";
+  return Kinds;
+}({});
+
+exports.Kinds = Kinds;
+exports.Themes = Themes;

package/lib/components/Checklist/ChecklistChart.d.ts

@@ -1,5 +1,9 @@
 /**
  * Custom chart component used within Checklist PLG component
  */
-export let ChecklistChart: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+export let ChecklistChart: React.ForwardRefExoticComponent<{
+    className?: string | undefined;
+    value: number;
+    theme?: import("./Checklist.types").Theme | undefined;
+} & React.RefAttributes<any>>;
 import React from 'react';

package/lib/components/Checklist/ChecklistChart.js

@@ -11,12 +11,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var index = require('../../node_modules/prop-types/index.js');
+var index$1 = require('../../node_modules/prop-types/index.js');
 var cx = require('classnames');
 var clamp = require('lodash/clamp');
-var index$1 = require('../../node_modules/@carbon/colors/es/index.js');
+var index = require('../../node_modules/@carbon/colors/es/index.js');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
+var Checklist_types = require('./Checklist.types.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -28,21 +29,25 @@ var _excluded = ["className", "value", "theme"];
 var blockClass = "".concat(settings.pkg.prefix, "--checklist__chart");
 var componentName = 'ChecklistChart';
 var defaults = {
-  theme: 'light'
+  theme: Checklist_types.Themes.light
 };
 
 /**
  * Custom chart component used within Checklist PLG component
  */
-var ChecklistChart = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
+var ChecklistChart = /*#__PURE__*/React__default["default"].forwardRef(
+/**
+ * @param {{className?: string, value: number, theme?: import('./Checklist.types').Theme}} props type description
+ */
+function (_ref, ref) {
   var className = _ref.className,
     value = _ref.value,
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var numDegrees = clamp__default["default"](value * 360, 0, 360);
-  var circleColor = theme === 'light' ? index$1.gray20 : index$1.gray70; // $ui-03 (-ish)
-  var progressColor = index$1.purple50;
+  var circleColor = theme === Checklist_types.Themes.light ? index.gray20 : index.gray70; // $ui-03 (-ish)
+  var progressColor = index.purple50;
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: cx__default["default"](blockClass, className),
     style: {
@@ -62,15 +67,15 @@ ChecklistChart.propTypes = {
   /**
    * Optional class name for this component.
    */
-  className: index["default"].string,
+  className: index$1["default"].string,
   /**
    * Determines the theme of the component.
    */
-  theme: index["default"].oneOf(['light', 'dark']),
+  theme: index$1["default"].oneOf([Checklist_types.Themes.light, Checklist_types.Themes.dark]),
   /**
    * Number between 0 and 1.
    */
-  value: index["default"].number.isRequired
+  value: index$1["default"].number.isRequired
 };
 
 exports.ChecklistChart = ChecklistChart;

package/lib/components/Checklist/ChecklistIcon.d.ts

@@ -1,5 +1,9 @@
 /**
  * TODO: A description of the component.
  */
-export let ChecklistIcon: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+export let ChecklistIcon: React.ForwardRefExoticComponent<{
+    className?: string | undefined;
+    kind?: import("./Checklist.types").Kind | undefined;
+    theme?: import("./Checklist.types").Theme | undefined;
+} & React.RefAttributes<any>>;
 import React from 'react';

package/lib/components/Checklist/ChecklistIcon.js

@@ -16,6 +16,7 @@ var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 var icons = require('@carbon/react/icons');
+var Checklist_types = require('./Checklist.types.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -41,13 +42,17 @@ var componentName = 'ChecklistIcon';
 
 // Default values for props
 var defaults = {
-  theme: 'light'
+  theme: Checklist_types.Themes.light
 };
 
 /**
  * TODO: A description of the component.
  */
-var ChecklistIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
+var ChecklistIcon = /*#__PURE__*/React__default["default"].forwardRef(
+/**
+ * @param {{className?: string, kind?: import('./Checklist.types').Kind, theme?: import('./Checklist.types').Theme}} props type description
+ */
+function (_ref, ref) {
   var className = _ref.className,
     kind = _ref.kind,
     _ref$theme = _ref.theme,
@@ -95,11 +100,11 @@ ChecklistIcon.propTypes = {
   /**
    * The icon to be displayed.
    */
-  kind: index["default"].oneOf(['unchecked', 'indeterminate', 'checked', 'disabled', 'error']),
+  kind: index["default"].oneOf([Checklist_types.Kinds.unchecked, Checklist_types.Kinds.indeterminate, Checklist_types.Kinds.checked, Checklist_types.Kinds.disabled, Checklist_types.Kinds.error]),
   /**
    * Determines the theme of the component.
    */
-  theme: index["default"].oneOf(['light', 'dark'])
+  theme: index["default"].oneOf([Checklist_types.Themes.light, Checklist_types.Themes.dark])
 };
 
 exports.ChecklistIcon = ChecklistIcon;

package/lib/components/CoachmarkButton/CoachmarkButton.d.ts

@@ -1,5 +1,22 @@
 /**
- * Use CoachmarkButton for the target prop of a Coachmark component.
+ * Copyright IBM Corp. 2023, 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.
  */
-export let CoachmarkButton: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';
+interface CoachmarkButtonProps {
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * The aria label.
+     */
+    label: string;
+}
+/**
+ * Use CoachmarkButton for the target prop of a Coachmark component.
+ */
+export declare let CoachmarkButton: React.ForwardRefExoticComponent<CoachmarkButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/lib/components/CoachmarkOverlayElements/CoachmarkOverlayElements.d.ts

@@ -1,6 +1,50 @@
+/**
+ * Copyright IBM Corp. 2023, 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 React, { ReactNode } from 'react';
+interface CoachmarkOverlayElementsProps {
+    /**
+     * CoachmarkOverlayElements should be used with one or many CoachmarkOverlayElement components as children.
+     * @see CoachmarkOverlayElement
+     */
+    children: ReactNode;
+    /**
+     * Optional class name for this component.
+     */
+    className?: string;
+    /**
+     * The visibility of CoachmarkOverlayElements is
+     * managed in the parent component.
+     */
+    isVisible?: boolean;
+    /**
+     * The object describing an image in one of two shapes.
+     * If a single media element is required, use `{render}`.
+     * If a stepped animation is required, use `{filePaths}`.
+     */
+    media?: {
+        render?: () => ReactNode;
+        filePaths?: string[];
+    };
+    /**
+     * The label for the Next button.
+     */
+    nextButtonText?: string;
+    /**
+     * The label for the Previous button.
+     */
+    previousButtonLabel?: string;
+    /**
+     * The label for the Close button.
+     */
+    closeButtonLabel?: string;
+}
 /**
  * Composable container to allow for the displaying of CoachmarkOverlayElement
  * components in a carousel fashion.
  */
-export let CoachmarkOverlayElements: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let CoachmarkOverlayElements: React.ForwardRefExoticComponent<CoachmarkOverlayElementsProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js

@@ -28,11 +28,9 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _excluded = ["className", "children", "isVisible", "media", "nextButtonText", "previousButtonLabel", "closeButtonLabel"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--coachmark-overlay-elements");
 var componentName = 'CoachmarkOverlayElements';
-
 // 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,
@@ -145,8 +143,9 @@ exports.CoachmarkOverlayElements = /*#__PURE__*/React__default["default"].forwar
     title: previousButtonLabel,
     disabled: scrollPosition === 0,
     onClick: function onClick() {
+      var _scrollRef$current, _scrollRef$current$sc;
       var targetStep = lodash.clamp(currentProgStep - 1, progStepFloor, progStepCeil);
-      scrollRef.current.scrollToView(targetStep);
+      scrollRef === null || scrollRef === void 0 || (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 || (_scrollRef$current$sc = _scrollRef$current.scrollToView) === null || _scrollRef$current$sc === void 0 || _scrollRef$current$sc.call(_scrollRef$current, targetStep);
       setCurrentProgStep(targetStep);
     }
   }, previousButtonLabel), currentProgStep < progStepCeil ? /*#__PURE__*/React__default["default"].createElement(react.Button, {
@@ -155,8 +154,9 @@ exports.CoachmarkOverlayElements = /*#__PURE__*/React__default["default"].forwar
     title: nextButtonText,
     disabled: scrollPosition === 1,
     onClick: function onClick() {
+      var _scrollRef$current2, _scrollRef$current2$s;
       var targetStep = lodash.clamp(currentProgStep + 1, progStepFloor, progStepCeil);
-      scrollRef.current.scrollToView(targetStep);
+      scrollRef === null || scrollRef === void 0 || (_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === void 0 || (_scrollRef$current2$s = _scrollRef$current2.scrollToView) === null || _scrollRef$current2$s === void 0 || _scrollRef$current2$s.call(_scrollRef$current2, targetStep);
       setCurrentProgStep(targetStep);
     }
   }, nextButtonText) : closeButtonLabel && /*#__PURE__*/React__default["default"].createElement(react.Button, _rollupPluginBabelHelpers["extends"]({
@@ -201,6 +201,7 @@ exports.CoachmarkOverlayElements.propTypes = {
    * If a single media element is required, use `{render}`.
    * If a stepped animation is required, use `{filePaths}`.
    */
+  /**@ts-ignore*/
   media: index["default"].oneOfType([index["default"].shape({
     render: index["default"].func
   }), index["default"].shape({

package/lib/components/CreateInfluencer/CreateInfluencer.d.ts

@@ -1,23 +1,61 @@
-export function CreateInfluencer({ className, currentStep, stepData, title }: {
-    className: any;
-    currentStep: any;
-    stepData: any;
-    title: any;
-}): import("react/jsx-runtime").JSX.Element;
-export namespace CreateInfluencer {
-    export { componentName as displayName };
-    export namespace propTypes {
-        let className: PropTypes.Requireable<string>;
-        let currentStep: PropTypes.Validator<number>;
-        let stepData: PropTypes.Requireable<(PropTypes.InferProps<{
+/**
+ * Copyright IBM Corp. 2021, 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.
+ */
+import { PropsWithChildren, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import '../../global/js/utils/props-helper';
+interface Step {
+    introStep?: boolean;
+    secondaryLabel?: string;
+    shouldIncludeStep?: boolean;
+    title?: ReactNode;
+}
+interface CreateInfluencerProps {
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * Provide the current step number.
+     */
+    currentStep: number;
+    /**
+     * Provide the Set Data.
+     */
+    stepData: Step[];
+    /**
+     * Title.
+     */
+    title?: string | undefined;
+}
+export declare const CreateInfluencer: {
+    ({ className, currentStep, stepData, title, }: PropsWithChildren<CreateInfluencerProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    propTypes: {
+        /**
+         * Provide an optional class to be applied to the containing node.
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Used to mark the current step on the ProgressIndicator component
+         */
+        currentStep: PropTypes.Validator<number>;
+        /**
+         * The step data that renders the progress items
+         */
+        stepData: PropTypes.Requireable<(PropTypes.InferProps<{
             introStep: PropTypes.Requireable<boolean>;
             secondaryLabel: PropTypes.Requireable<string>;
             shouldIncludeStep: PropTypes.Requireable<boolean>;
             title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         }> | null | undefined)[]>;
-        let title: PropTypes.Requireable<string>;
-    }
-}
-declare const componentName: "CreateInfluencer";
-import PropTypes from 'prop-types';
+        /**
+         * The main title of the full page, displayed in the influencer area.
+         */
+        title: PropTypes.Requireable<string>;
+    };
+};
 export {};

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

@@ -1,5 +1,70 @@
 /**
- * DataSpreadsheet: used to organize and display large amounts of structured data, separated by columns and rows in a grid-like format.
+ * 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.
  */
-export let DataSpreadsheet: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';
+import { Column, Size, Theme } from './types';
+interface DataSpreadsheetProps {
+    /**
+     * Specifies the cell height
+     */
+    cellSize?: Size;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * The data that will build the column headers
+     */
+    columns?: readonly Column[];
+    /**
+     * The spreadsheet data that will be rendered in the body of the spreadsheet component
+     */
+    data?: readonly object[];
+    /**
+     * Sets the number of empty rows to be created when there is no data provided
+     */
+    defaultEmptyRowCount?: number;
+    /**
+     * The spreadsheet id
+     */
+    id?: number | string;
+    /**
+     * The event handler that is called when the active cell changes
+     */
+    onActiveCellChange?: () => void;
+    /**
+     * The setter fn for the data prop
+     */
+    onDataUpdate?: ({ ...args }: {
+        [x: string]: any;
+    }) => void;
+    /**
+     * The event handler that is called when the selection area values change
+     */
+    onSelectionAreaChange?: () => void;
+    /**
+     * The aria label applied to the Select all button
+     */
+    selectAllAriaLabel: string;
+    /**
+     * The aria label applied to the Data spreadsheet component
+     */
+    spreadsheetAriaLabel: string;
+    /**
+     * The theme the DataSpreadsheet should use (only used to render active cell/selection area colors on dark theme)
+     */
+    theme?: Theme;
+    /**
+     * The total number of columns to be initially visible, additional columns will be rendered and
+     * visible via horizontal scrollbar
+     */
+    totalVisibleColumns?: number;
+}
+/**
+ * DataSpreadsheet: used to organize and display large amounts of structured data, separated by columns and rows in a grid-like format.
+ */
+export declare let DataSpreadsheet: React.ForwardRefExoticComponent<DataSpreadsheetProps & React.RefAttributes<HTMLDivElement>>;
+export {};