@carbon/ibm-products 2.38.0-alpha.5 → 2.39.0

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

@@ -22,6 +22,7 @@ var defaults = {
     AboutModal: true,
     APIKeyModal: true,
     Cascade: true,
+    Checklist: true,
     CreateModal: true,
     CreateFullPage: true,
     CreateFullPageStep: true,
@@ -94,6 +95,7 @@ var defaults = {
     FilterPanelLabel: false,
     FilterPanelSearch: false,
     ConditionBuilder: false,
+    GetStartedCard: false,
     /* new component flags here - comment used by generate CLI */
 
     // Novice to pro components not yet reviewed and released:
@@ -117,7 +119,6 @@ var defaults = {
     /* new component flags here - comment used by generate CLI */
 
     // Novice to pro components not yet reviewed and released:
-    Checklist: false,
     EmptyStateV2: false,
     Guidebanner: false,
     GuidebannerElement: false,

package/es/index.js

@@ -132,3 +132,4 @@ export { FilterPanelGroup } from './components/FilterPanel/FilterPanelGroup/Filt
 export { FilterPanelLabel } from './components/FilterPanel/FilterPanelLabel/FilterPanelLabel.js';
 export { FilterPanelSearch } from './components/FilterPanel/FilterPanelSearch/FilterPanelSearch.js';
 export { ConditionBuilder } from './components/ConditionBuilder/ConditionBuilder.js';
+export { GetStartedCard } from './components/GetStartedCard/GetStartedCard.js';

package/es/node_modules/@carbon/colors/es/index.js

@@ -5,7 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+var purple50 = '#a56eff';
 var purple70 = '#6929c4';
 var blue90 = '#001d6c';
+var gray20 = '#e0e0e0';
+var gray70 = '#525252';
 
-export { blue90, purple70 };
+export { blue90, gray20, gray70, purple50, purple70 };

package/es/settings.d.ts

@@ -10,6 +10,7 @@ export const pkg: {
         AboutModal: boolean;
         APIKeyModal: boolean;
         Cascade: boolean;
+        Checklist: boolean;
         CreateModal: boolean;
         CreateFullPage: boolean;
         CreateFullPageStep: boolean;
@@ -81,6 +82,7 @@ export const pkg: {
         FilterPanelLabel: boolean;
         FilterPanelSearch: boolean;
         ConditionBuilder: boolean;
+        GetStartedCard: boolean;
         Coachmark: boolean;
         CoachmarkBeacon: boolean;
         CoachmarkButton: boolean;
@@ -98,7 +100,6 @@ export const pkg: {
         DescriptionListRow: boolean;
         SearchBar: boolean;
         UserAvatar: boolean;
-        Checklist: boolean;
         EmptyStateV2: boolean;
         Guidebanner: boolean;
         GuidebannerElement: boolean;

package/lib/components/ActionSet/ActionSet.js

@@ -107,9 +107,10 @@ var ActionSet = /*#__PURE__*/React__default["default"].forwardRef(function (_ref
     role: "presentation",
     stacked: stacking
   }), buttons.map(function (action, index) {
+    var actionProps = propsHelper.prepareProps(action, ['key']);
     return /*#__PURE__*/React__default["default"].createElement(ActionSetButton, _rollupPluginBabelHelpers["extends"]({
       key: action.key || index
-    }, action, {
+    }, actionProps, {
       size: buttonSize
     }));
   }));

package/lib/components/Card/Card.js

@@ -13,6 +13,7 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var React = require('react');
 var cx = require('classnames');
 var react = require('@carbon/react');
+var icons = require('@carbon/react/icons');
 var index = require('../../node_modules/prop-types/index.js');
 var CardHeader = require('./CardHeader.js');
 var CardFooter = require('./CardFooter.js');
@@ -23,7 +24,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["actionIcons", "actionsPlacement", "children", "className", "clickZone", "description", "label", "media", "mediaPosition", "onClick", "onKeyDown", "onPrimaryButtonClick", "overflowActions", "overflowAriaLabel", "onSecondaryButtonClick", "pictogram", "primaryButtonDisabled", "primaryButtonHref", "primaryButtonIcon", "primaryButtonKind", "primaryButtonPlacement", "primaryButtonText", "productive", "secondaryButtonDisabled", "secondaryButtonHref", "secondaryButtonIcon", "secondaryButtonKind", "secondaryButtonPlacement", "secondaryButtonText", "slug", "title", "titleSize"],
+var _Incomplete, _CheckmarkOutline;
+var _excluded = ["actionIcons", "actionsPlacement", "metadata", "children", "className", "clickZone", "description", "disabled", "footerActionIcon", "getStarted", "label", "media", "mediaPosition", "onClick", "onKeyDown", "onPrimaryButtonClick", "overflowActions", "overflowAriaLabel", "onSecondaryButtonClick", "pictogram", "primaryButtonDisabled", "primaryButtonHref", "primaryButtonIcon", "primaryButtonKind", "primaryButtonPlacement", "primaryButtonText", "productive", "secondaryButtonDisabled", "secondaryButtonHref", "secondaryButtonIcon", "secondaryButtonKind", "secondaryButtonPlacement", "secondaryButtonText", "slug", "status", "sequence", "title", "titleSize"],
   _excluded2 = ["id"],
   _excluded3 = ["id", "icon", "onClick", "iconDescription", "href"];
 var componentName = 'Card';
@@ -47,11 +49,16 @@ var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     actionIcons = _ref$actionIcons === void 0 ? defaults.actionIcons : _ref$actionIcons,
     _ref$actionsPlacement = _ref.actionsPlacement,
     actionsPlacement = _ref$actionsPlacement === void 0 ? defaults.actionsPlacement : _ref$actionsPlacement,
+    _ref$metadata = _ref.metadata,
+    metadata = _ref$metadata === void 0 ? defaults.actionIcons : _ref$metadata,
     children = _ref.children,
     className = _ref.className,
     _ref$clickZone = _ref.clickZone,
     clickZone = _ref$clickZone === void 0 ? defaults.clickZone : _ref$clickZone,
     description = _ref.description,
+    disabled = _ref.disabled,
+    footerActionIcon = _ref.footerActionIcon,
+    getStarted = _ref.getStarted,
     label = _ref.label,
     media = _ref.media,
     _ref$mediaPosition = _ref.mediaPosition,
@@ -83,12 +90,18 @@ var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     secondaryButtonPlacement = _ref$secondaryButtonP === void 0 ? defaults.secondaryButtonPlacement : _ref$secondaryButtonP,
     secondaryButtonText = _ref.secondaryButtonText,
     slug = _ref.slug,
+    status = _ref.status,
+    sequence = _ref.sequence,
     title = _ref.title,
     _ref$titleSize = _ref.titleSize,
     titleSize = _ref$titleSize === void 0 ? defaults.titleSize : _ref$titleSize,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var getIcons = function getIcons() {
+    return getStarted ? metadata : actionIcons;
+  };
   var blockClass = "".concat(settings.pkg.prefix, "--card");
-  var hasActions = actionIcons.length > 0 || overflowActions.length > 0 || !!primaryButtonText && primaryButtonPlacement === 'top';
+  var hasActions = getIcons().length > 0 || overflowActions.length > 0 || !!primaryButtonText && primaryButtonPlacement === 'top';
+  var hasHeaderActions = hasActions && actionsPlacement === 'top';
   var hasFooterActions = hasActions && actionsPlacement === 'bottom';
   var hasFooterButton = !!secondaryButtonText || !!primaryButtonText && primaryButtonPlacement === 'bottom';
   var hasBottomBar = hasFooterActions || hasFooterButton;
@@ -120,13 +133,21 @@ var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         }, rest));
       })));
     }
-    var icons = actionIcons.map(function (_ref3) {
+    var icons = getIcons().map(function (_ref3) {
       var id = _ref3.id,
         Icon = _ref3.icon,
         onClick = _ref3.onClick,
         iconDescription = _ref3.iconDescription,
         href = _ref3.href,
         rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref3, _excluded3);
+      if (getStarted) {
+        return /*#__PURE__*/React__default["default"].createElement("span", {
+          key: id,
+          className: "".concat(blockClass, "__icon")
+        }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+          "aria-label": iconDescription
+        }), iconDescription);
+      }
       if (productive) {
         return /*#__PURE__*/React__default["default"].createElement(react.Button, _rollupPluginBabelHelpers["extends"]({}, rest, {
           key: id,
@@ -166,7 +187,7 @@ var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var clickable = hasClickEvent && !productive || hasClickEvent && productive && clickZone === 'one';
     var cardProps = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rest), {}, {
       ref: ref,
-      className: cx__default["default"](blockClass, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__productive"), productive), "".concat(blockClass, "__clickable"), clickable), "".concat(blockClass, "__media-left"), mediaPosition === 'left'), "".concat(blockClass, "--has-slug"), !!slug), className)
+      className: cx__default["default"](blockClass, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__disabled"), disabled), "".concat(blockClass, "__get-started"), getStarted), "".concat(blockClass, "__productive"), productive), "".concat(blockClass, "__clickable"), clickable), "".concat(blockClass, "__media-left"), mediaPosition === 'left'), "".concat(blockClass, "--has-slug"), !!slug), className)
     }, clickable && clickableProps);
     return cardProps;
   };
@@ -182,7 +203,7 @@ var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var getHeaderProps = function getHeaderProps() {
     return {
       actions: actionsPlacement === 'top' ? getActions() : '',
-      noActionIcons: actionIcons.length > 0 && actionsPlacement === 'top' ? false : true,
+      noActionIcons: getIcons().length > 0 && actionsPlacement === 'top' ? false : true,
       actionsPlacement: actionsPlacement,
       onPrimaryButtonClick: onPrimaryButtonClick,
       onSecondaryButtonClick: onSecondaryButtonClick,
@@ -191,7 +212,7 @@ var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       primaryButtonText: primaryButtonText,
       primaryButtonDisabled: primaryButtonDisabled,
       description: description,
-      hasActions: hasActions,
+      hasActions: hasHeaderActions,
       inClickableCard: hasClickEvent,
       label: label,
       secondaryButtonDisabled: secondaryButtonDisabled,
@@ -215,6 +236,8 @@ var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     return {
       actions: actionsPlacement === 'bottom' ? getActions() : '',
       actionsPlacement: actionsPlacement,
+      disabled: disabled,
+      footerActionIcon: footerActionIcon,
       hasActions: hasFooterActions,
       hasButton: hasFooterButton,
       onPrimaryButtonClick: onPrimaryButtonClick,
@@ -234,13 +257,21 @@ var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       secondaryButtonText: secondaryButtonText
     };
   };
-  return /*#__PURE__*/React__default["default"].createElement("div", getCardProps(), media && /*#__PURE__*/React__default["default"].createElement("div", {
+  return /*#__PURE__*/React__default["default"].createElement("div", getCardProps(), !getStarted && media && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(blockClass, "__media")
   }, media), Pictogram && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(blockClass, "__pictogram")
-  }, /*#__PURE__*/React__default["default"].createElement(Pictogram, null)), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement(Pictogram, null)), getStarted && sequence && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(blockClass, "__sequence")
+  }, sequence), getStarted && status && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(blockClass, "__status")
+  }, status === 'incomplete' && (_Incomplete || (_Incomplete = /*#__PURE__*/React__default["default"].createElement(icons.Incomplete, null))), status === 'complete' && (_CheckmarkOutline || (_CheckmarkOutline = /*#__PURE__*/React__default["default"].createElement(icons.CheckmarkOutline, null)))), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(blockClass, "__content-container")
-  }, /*#__PURE__*/React__default["default"].createElement("div", getHeaderBodyProps(), /*#__PURE__*/React__default["default"].createElement(CardHeader.CardHeader, getHeaderProps()), /*#__PURE__*/React__default["default"].createElement("div", getBodyProps(), children)), hasBottomBar && /*#__PURE__*/React__default["default"].createElement(CardFooter.CardFooter, getFooterProps())));
+  }, /*#__PURE__*/React__default["default"].createElement("div", getHeaderBodyProps(), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(blockClass, "__header-container")
+  }, /*#__PURE__*/React__default["default"].createElement(CardHeader.CardHeader, getHeaderProps()), /*#__PURE__*/React__default["default"].createElement("div", getBodyProps(), children)), getStarted && media && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(blockClass, "__media")
+  }, media)), hasBottomBar && /*#__PURE__*/React__default["default"].createElement(CardFooter.CardFooter, getFooterProps())));
 });
 Card.propTypes = {
   actionIcons: index["default"].arrayOf(index["default"].shape({
@@ -256,9 +287,17 @@ Card.propTypes = {
   className: index["default"].string,
   clickZone: index["default"].oneOf(['one', 'two', 'three']),
   description: index["default"].oneOfType([index["default"].string, index["default"].object, index["default"].node]),
+  disabled: index["default"].bool,
+  footerActionIcon: index["default"].oneOfType([index["default"].func, index["default"].object]),
+  getStarted: index["default"].bool,
   label: index["default"].oneOfType([index["default"].string, index["default"].object, index["default"].node]),
   media: index["default"].node,
   mediaPosition: index["default"].oneOf(['top', 'left']),
+  metadata: index["default"].arrayOf(index["default"].shape({
+    id: index["default"].string,
+    icon: index["default"].oneOfType([index["default"].func, index["default"].object]),
+    iconDescription: index["default"].string
+  })),
   onClick: index["default"].func,
   onKeyDown: index["default"].func,
   onPrimaryButtonClick: index["default"].func,
@@ -284,11 +323,13 @@ Card.propTypes = {
   secondaryButtonKind: index["default"].oneOf(['secondary', 'ghost']),
   secondaryButtonPlacement: index["default"].oneOf(['top', 'bottom']),
   secondaryButtonText: index["default"].string,
+  sequence: index["default"].number,
   /**
    * **Experimental:** For all cases a `Slug` component can be provided.
    * Clickable tiles only accept a boolean value of true and display a hollow slug.
    */
   slug: index["default"].oneOfType([index["default"].node, index["default"].bool]),
+  status: index["default"].oneOf(['complete', 'incomplete']),
   title: index["default"].oneOfType([index["default"].string, index["default"].object, index["default"].node]),
   titleSize: index["default"].oneOf(['default', 'large'])
 };

package/lib/components/Card/CardFooter.d.ts

@@ -1,5 +1,7 @@
-export function CardFooter({ actions, hasActions, hasButton, onPrimaryButtonClick, onSecondaryButtonClick, primaryButtonDisabled, primaryButtonHref, primaryButtonIcon, primaryButtonKind, primaryButtonPlacement, primaryButtonText, productive, secondaryButtonDisabled, secondaryButtonHref, secondaryButtonIcon, secondaryButtonKind, secondaryButtonPlacement, secondaryButtonText, }: {
+export function CardFooter({ actions, disabled, footerActionIcon: FooterActionIcon, hasActions, hasButton, onPrimaryButtonClick, onSecondaryButtonClick, primaryButtonDisabled, primaryButtonHref, primaryButtonIcon, primaryButtonKind, primaryButtonPlacement, primaryButtonText, productive, secondaryButtonDisabled, secondaryButtonHref, secondaryButtonIcon, secondaryButtonKind, secondaryButtonPlacement, secondaryButtonText, }: {
     actions?: any[] | undefined;
+    disabled: any;
+    footerActionIcon: any;
     hasActions: any;
     hasButton: any;
     onPrimaryButtonClick: any;
@@ -21,6 +23,8 @@ export function CardFooter({ actions, hasActions, hasButton, onPrimaryButtonClic
 export namespace CardFooter {
     export namespace propTypes {
         let actions: PropTypes.Requireable<NonNullable<any[] | PropTypes.ReactNodeLike>>;
+        let disabled: PropTypes.Requireable<boolean>;
+        let footerActionIcon: PropTypes.Requireable<object>;
         let hasActions: PropTypes.Requireable<boolean>;
         let hasButton: PropTypes.Requireable<boolean>;
         let onPrimaryButtonClick: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/components/Card/CardFooter.js

@@ -15,12 +15,14 @@ var cx = require('classnames');
 var react = require('@carbon/react');
 var index = require('../../node_modules/prop-types/index.js');
 var settings = require('../../settings.js');
+var icons = require('@carbon/react/icons');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
+var _Error;
 var componentName = 'CardFooter';
 var defaults = {
   actions: Object.freeze([]),
@@ -31,6 +33,8 @@ var defaults = {
 var CardFooter = function CardFooter(_ref) {
   var _ref$actions = _ref.actions,
     actions = _ref$actions === void 0 ? defaults.actions : _ref$actions,
+    disabled = _ref.disabled,
+    FooterActionIcon = _ref.footerActionIcon,
     hasActions = _ref.hasActions,
     hasButton = _ref.hasButton,
     onPrimaryButtonClick = _ref.onPrimaryButtonClick,
@@ -72,10 +76,16 @@ var CardFooter = function CardFooter(_ref) {
     disabled: primaryButtonDisabled
   }, primaryButtonText), hasActions && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(blockClass, "__actions")
-  }, actions));
+  }, actions), FooterActionIcon && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(blockClass, "__action-icon")
+  }, disabled ? _Error || (_Error = /*#__PURE__*/React__default["default"].createElement(icons.Error, {
+    size: 16
+  })) : /*#__PURE__*/React__default["default"].createElement(FooterActionIcon, null)));
 };
 CardFooter.propTypes = {
   actions: index["default"].oneOfType([index["default"].array, index["default"].node]),
+  disabled: index["default"].bool,
+  footerActionIcon: index["default"].oneOfType([index["default"].func, index["default"].object]),
   hasActions: index["default"].bool,
   hasButton: index["default"].bool,
   onPrimaryButtonClick: index["default"].func,

package/lib/components/Carousel/Carousel.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { ReactNode } from 'react';
-interface CarouselProps {
+export interface CarouselProps {
     /**
      * Provide the contents of the Carousel.
      */
@@ -41,6 +41,10 @@ interface CarouselProps {
      * a value between 0 and 1.
      */
     onScroll?: (scrollPercent: number) => void;
+    /**
+     * Additional props passed to the component.
+     */
+    [key: string]: any;
 }
 /**
  * The Carousel acts as a scaffold for other Novice to Pro content.
@@ -58,5 +62,5 @@ interface CarouselProps {
  * 2. From the right-aligned position, when scrolling left,
  *      the left-most item should again be left-aligned.
  */
-declare const Carousel: React.ForwardRefExoticComponent<CarouselProps & React.RefAttributes<HTMLDivElement>>;
+declare const Carousel: React.ForwardRefExoticComponent<Omit<CarouselProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { Carousel };

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,13 +20,14 @@ 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 }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["chartValue", "chartLabel", "checklistAriaLabel", "checklistToggleAriaLabel", "className", "onClickViewAll", "onToggle", "open", "showToggle", "taskLists", "theme", "title", "toggleLabel", "toggleLabelAlign", "viewAllLabel"];
+var _excluded = ["chartValue", "chartLabel", "checklistAriaLabel", "checklistToggleAriaLabel", "className", "onClickViewAll", "onToggle", "open", "enableToggle", "taskLists", "theme", "title", "toggleLabel", "toggleLabelAlign", "viewAllLabel"];
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--checklist");
@@ -50,9 +51,9 @@ var defaults = {
   onClickViewAll: function onClickViewAll() {},
   onToggle: function onToggle() {},
   open: true,
-  showToggle: true,
+  enableToggle: true,
   taskLists: [],
-  theme: 'light',
+  theme: Checklist_types.Themes.light,
   toggleLabel: 'Toggle',
   toggleLabelAlign: 'top'
 };
@@ -77,8 +78,8 @@ exports.Checklist = /*#__PURE__*/React__default["default"].forwardRef(function (
     onToggle = _ref$onToggle === void 0 ? defaults.onToggle : _ref$onToggle,
     _ref$open = _ref.open,
     open = _ref$open === void 0 ? defaults.open : _ref$open,
-    _ref$showToggle = _ref.showToggle,
-    showToggle = _ref$showToggle === void 0 ? defaults.showToggle : _ref$showToggle,
+    _ref$enableToggle = _ref.enableToggle,
+    enableToggle = _ref$enableToggle === void 0 ? defaults.enableToggle : _ref$enableToggle,
     _ref$taskLists = _ref.taskLists,
     taskLists = _ref$taskLists === void 0 ? defaults.taskLists : _ref$taskLists,
     _ref$theme = _ref.theme,
@@ -142,7 +143,7 @@ exports.Checklist = /*#__PURE__*/React__default["default"].forwardRef(function (
   }, title), chartLabelAndValue && /*#__PURE__*/React__default["default"].createElement("h3", {
     id: chartLabelId,
     className: "".concat(blockClass, "__chart-label")
-  }, chartLabel)), showToggle && /*#__PURE__*/React__default["default"].createElement(react.IconButton, {
+  }, chartLabel)), enableToggle && /*#__PURE__*/React__default["default"].createElement(react.IconButton, {
     align: toggleLabelAlign,
     "aria-controls": listContainerId,
     "aria-expanded": isOpen,
@@ -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
@@ -228,6 +231,10 @@ exports.Checklist.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: index["default"].string,
+  /**
+   * Whether or not to show the open/close toggle.
+   */
+  enableToggle: index["default"].bool,
   /**
    * Callback for the "View all" button. See also `viewAllLabel`.
    */
@@ -241,10 +248,6 @@ exports.Checklist.propTypes = {
    * This can be set during initialization, or changed after being rendered.
    */
   open: index["default"].bool,
-  /**
-   * Whether or not to show the open/close toggle.
-   */
-  showToggle: index["default"].bool,
   /**
    * The task list can be broken down into sub-lists.
    *
@@ -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,11 +271,11 @@ 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.
    */
-  title: index["default"].string,
+  title: index["default"].node,
   /**
    * The label for the toggle's tooltip.
    */

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 @@
 /**
- * TODO: A description of the component.
+ * 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';