@carbon/ibm-products 2.34.0 → 2.36.0-alpha.27

package/es/components/Tearsheet/TearsheetNarrow.d.ts

@@ -1,3 +1,94 @@
+/**
+ * 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.
+ */
+/// <reference path="../../../src/custom-typings/index.d.ts" />
+import React, { ReactNode, PropsWithChildren } from 'react';
+import PropTypes from 'prop-types';
+import { ButtonProps } from '@carbon/react';
+type closeIconDescriptionTypes = {
+    hasCloseIcon: true;
+    closeIconDescription: string;
+};
+interface TearsheetNarrowProps extends PropsWithChildren {
+    /**
+     * The navigation actions to be shown as buttons in the action area at the
+     * bottom of the tearsheet. Each action is specified as an object with
+     * optional fields: 'label' to supply the button label, 'kind' to select the
+     * button kind (must be 'primary', 'secondary' or 'ghost'), 'loading' to
+     * display a loading indicator, and 'onClick' to receive notifications when
+     * the button is clicked. Additional fields in the object will be passed to
+     * the Button component, and these can include 'disabled', 'ref', 'className',
+     * and any other Button props. Any other fields in the object will be passed
+     * through to the button element as HTML attributes.
+     *
+     * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
+     */
+    actions?: ButtonProps[];
+    /**
+     * The aria-label for the tearsheet, which is optional.
+     * if it is not passed, the title will be used as the aria-label.
+     */
+    ariaLabel?: string;
+    /**
+     * An optional class or classes to be added to the outermost element.
+     */
+    className?: string;
+    /**
+     * The accessibility title for the close icon (if shown).
+     *
+     * **Note:** This prop is only required if a close icon is shown, i.e. if
+     * there are a no navigation actions and/or hasCloseIcon is true.
+     */
+    closeIconDescription?: closeIconDescriptionTypes;
+    /**
+     * A description of the flow, displayed in the header area of the tearsheet.
+     */
+    description?: ReactNode;
+    /**
+     * Enable a close icon ('x') in the header area of the tearsheet. By default,
+     * a tearsheet does not display a close icon, but one should be enabled if
+     * the tearsheet is read-only or has no navigation actions (sometimes called
+     * a "passive tearsheet").
+     */
+    hasCloseIcon?: boolean;
+    /**
+     * A label for the tearsheet, displayed in the header area of the tearsheet
+     * to maintain context for the tearsheet (e.g. as the title changes from page
+     * to page of a multi-page task).
+     */
+    label?: ReactNode;
+    /**
+     * An optional handler that is called when the user closes the tearsheet (by
+     * clicking the close button, if enabled, or clicking outside, if enabled).
+     * Returning `false` here prevents the modal from closing.
+     */
+    onClose?: () => boolean | void;
+    /**
+     * Specifies whether the tearsheet is currently open.
+     */
+    open?: boolean;
+    /**
+     * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
+     */
+    portalTarget?: ReactNode;
+    /**
+     * The main title of the tearsheet, displayed in the header area.
+     */
+    title?: ReactNode;
+    /**
+     * **Deprecated**
+     *
+     * The position of the top of tearsheet in the viewport. The 'normal'
+     * position is a short distance down from the top of the
+     * viewport, leaving room at the top for a global header bar to show through
+     * from below. The 'lower' position (the default) provides a little extra room at the top
+     * to allow an action bar navigation or breadcrumbs to also show through.
+     */
+    verticalPosition?: 'normal' | 'lower';
+}
 /**
  * A narrow tearsheet is a slimmer variant of the tearsheet, providing a dialog
  * that keeps users in-context and focused by bringing actionable content front
@@ -6,9 +97,17 @@
  * A narrow tearsheet comprises 3 zones: a heading area including a title, the
  * main content area, and a set of action buttons.
  */
-export let TearsheetNarrow: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-export namespace deprecatedProps {
-    let verticalPosition: PropTypes.Requireable<string>;
-}
-import React from 'react';
-import PropTypes from 'prop-types';
+export declare let TearsheetNarrow: React.ForwardRefExoticComponent<TearsheetNarrowProps & React.RefAttributes<unknown>>;
+export declare const deprecatedProps: {
+    /**
+     * **Deprecated**
+     *
+     * The position of the top of tearsheet in the viewport. The 'normal'
+     * position is a short distance down from the top of the
+     * viewport, leaving room at the top for a global header bar to show through
+     * from below. The 'lower' position (the default) provides a little extra room at the top
+     * to allow an action bar navigation or breadcrumbs to also show through.
+     */
+    verticalPosition: PropTypes.Requireable<string>;
+};
+export {};

package/es/components/Tearsheet/TearsheetNarrow.js

@@ -33,6 +33,7 @@ var defaults = {
  * A narrow tearsheet comprises 3 zones: a heading area including a title, the
  * main content area, and a set of action buttons.
  */
+
 var TearsheetNarrow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var _ref$verticalPosition = _ref.verticalPosition,
     verticalPosition = _ref$verticalPosition === void 0 ? defaults.verticalPosition : _ref$verticalPosition,
@@ -83,7 +84,8 @@ TearsheetNarrow.propTypes = _objectSpread2({
    *
    * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
    */
-  actions: allPropTypes([ActionSet.validateActions(function () {
+  actions: allPropTypes([/**@ts-ignore */
+  ActionSet.validateActions(function () {
     return 'lg';
   }), PropTypes.arrayOf(PropTypes.shape(_objectSpread2(_objectSpread2({}, Button.propTypes), {}, {
     kind: PropTypes.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
@@ -107,6 +109,7 @@ TearsheetNarrow.propTypes = _objectSpread2({
    * **Note:** This prop is only required if a close icon is shown, i.e. if
    * there are a no navigation actions and/or hasCloseIcon is true.
    */
+  /**@ts-ignore */
   closeIconDescription: PropTypes.string.isRequired.if(function (_ref2) {
     var actions = _ref2.actions,
       hasCloseIcon = _ref2.hasCloseIcon;
@@ -122,6 +125,7 @@ TearsheetNarrow.propTypes = _objectSpread2({
    * the tearsheet is read-only or has no navigation actions (sometimes called
    * a "passive tearsheet").
    */
+  /**@ts-ignore*/
   hasCloseIcon: PropTypes.bool,
   /**
    * A label for the tearsheet, displayed in the header area of the tearsheet
@@ -142,6 +146,7 @@ TearsheetNarrow.propTypes = _objectSpread2({
   /**
    * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
    */
+  /**@ts-ignore */
   portalTarget: portalType,
   /**
    * The main title of the tearsheet, displayed in the header area.

package/es/components/Toolbar/Toolbar.d.ts

@@ -1,6 +1,24 @@
-export const blockClass: string;
-export const componentName: "Toolbar";
-/** Toolbars are a collection of action items that organize a program’s interaction patterns into a series of closely related commands. */
-export let Toolbar: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-export const ToolbarContext: React.Context<any>;
+/**
+ * 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 React from 'react';
+declare const blockClass: string;
+interface ToolbarProps {
+    /** Provide an optional class to be applied to the containing node */
+    className?: string;
+    /** Determines whether the `Toolbar` is rendered vertically */
+    vertical?: boolean;
+}
+interface ToolbarContextType {
+    vertical?: boolean;
+}
+declare const ToolbarContext: React.Context<ToolbarContextType>;
+/** Toolbars are a collection of action items that organize a program’s interaction patterns into a series of closely related commands. */
+declare let Toolbar: React.ForwardRefExoticComponent<ToolbarProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const componentName = "Toolbar";
+export { blockClass, componentName, Toolbar, ToolbarContext };

package/es/components/Toolbar/Toolbar.js

@@ -17,50 +17,54 @@ var _excluded = ["children", "className", "vertical"];
 var checkComponentEnabled = pkg.checkComponentEnabled,
   prefix = pkg.prefix;
 var blockClass = "".concat(prefix, "--toolbar");
-var ToolbarContext = /*#__PURE__*/createContext();
+var ToolbarContext = /*#__PURE__*/createContext({});
 
 /** Toolbars are a collection of action items that organize a program’s interaction patterns into a series of closely related commands. */
-var Toolbar = /*#__PURE__*/forwardRef(function (_ref2, r) {
-  var children = _ref2.children,
-    className = _ref2.className,
-    vertical = _ref2.vertical,
-    rest = _objectWithoutProperties(_ref2, _excluded);
+var Toolbar = /*#__PURE__*/forwardRef(function (_ref, r) {
+  var children = _ref.children,
+    className = _ref.className,
+    vertical = _ref.vertical,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var focusableElements = useRef();
   var getFocusableElements$1 = useCallback(function () {
     return focusableElements.current;
   }, [focusableElements]);
-  var _ref = useRef();
-  var ref = r || _ref;
-  var _useState = useState(),
+  var localRef = useRef(null);
+  var ref = r || localRef;
+  var _useState = useState(-1),
     _useState2 = _slicedToArray(_useState, 2),
     focus = _useState2[0],
     setFocus = _useState2[1];
   useEffect(function () {
-    focusableElements.current = getFocusableElements(ref.current);
-    typeof focus !== 'undefined' && getFocusableElements$1().forEach(function (element, index) {
-      element[index !== focus ? 'setAttribute' : 'removeAttribute']('tabindex', -1);
-    });
+    var _getFocusableElements2;
+    focusableElements.current = getFocusableElements(ref === null || ref === void 0 ? void 0 : ref['current']);
+    focus !== -1 && ((_getFocusableElements2 = getFocusableElements$1()) === null || _getFocusableElements2 === void 0 ? void 0 : _getFocusableElements2.forEach(function (element, index) {
+      element[index !== focus ? 'setAttribute' : 'removeAttribute']('tabindex', '-1');
+    }));
   });
   useEffect(function () {
-    typeof focus !== 'undefined' && getFocusableElements$1()[focus].focus();
+    var _getFocusableElements3;
+    focus !== -1 && ((_getFocusableElements3 = getFocusableElements$1()) === null || _getFocusableElements3 === void 0 ? void 0 : _getFocusableElements3[focus].focus());
   }, [focus, getFocusableElements$1]);
-  var _ref3 = !vertical ? ['ArrowRight', 'ArrowLeft'] : ['ArrowDown', 'ArrowUp'],
-    _ref4 = _slicedToArray(_ref3, 2),
-    arrowNext = _ref4[0],
-    arrowPrevious = _ref4[1];
+  var _ref2 = !vertical ? ['ArrowRight', 'ArrowLeft'] : ['ArrowDown', 'ArrowUp'],
+    _ref3 = _slicedToArray(_ref2, 2),
+    arrowNext = _ref3[0],
+    arrowPrevious = _ref3[1];
   function onArrowDown(increment) {
+    var _getFocusableElements4;
     var nextFocus = focus + increment;
-    getFocusableElements$1()[nextFocus] && setFocus(nextFocus);
+    ((_getFocusableElements4 = getFocusableElements$1()) === null || _getFocusableElements4 === void 0 ? void 0 : _getFocusableElements4[nextFocus]) && setFocus(nextFocus);
   }
-  function onFocus(_ref5) {
-    var target = _ref5.target;
+  function onFocus(_ref4) {
+    var target = _ref4.target;
     var elements = getFocusableElements$1();
-    elements.includes(target) && setFocus(elements.indexOf(target));
+    (elements === null || elements === void 0 ? void 0 : elements.includes(target)) && setFocus(elements.indexOf(target));
   }
-  function onKeyDown(_ref6) {
-    var key = _ref6.key,
-      target = _ref6.target;
-    if (getFocusableElements$1().includes(target)) {
+  function onKeyDown(_ref5) {
+    var _getFocusableElements5;
+    var key = _ref5.key,
+      target = _ref5.target;
+    if ((_getFocusableElements5 = getFocusableElements$1()) !== null && _getFocusableElements5 !== void 0 && _getFocusableElements5.includes(target)) {
       switch (key) {
         case arrowNext:
           onArrowDown(1);

package/es/components/TruncatedList/TruncatedList.d.ts

@@ -1,7 +1,52 @@
+/**
+ * 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.
+ */
+import React, { PropsWithChildren, ReactNode } from 'react';
+interface TruncatedListProps extends PropsWithChildren {
+    as?: React.ElementType | string;
+    /**
+     * Optional class name for expand/collapse button.
+     */
+    buttonClassName?: string;
+    /**
+     * The contents of the TruncatedList.
+     */
+    children: ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * Number of items to render and display when the list is truncated and collapsed.
+     * Scrolling is not enabled when collapsed. The smallest number is 1.
+     */
+    collapsedItemsLimit?: number;
+    /**
+     * Maximum number of items to show when the list is expanded. All
+     * items are rendered when the list is expanded. Scrolling is enabled
+     * if there are more items to display than this number.
+     */
+    expandedItemsLimit?: number;
+    /**
+     * Optional callback reports the collapsed state of the list.
+     */
+    onClick?: (value: any) => void;
+    /**
+     * Text label for when the list is expanded.
+     */
+    viewLessLabel?: string;
+    /**
+     * Callback function for building the label when the list is collapsed.
+     */
+    viewMoreLabel?: (value: any) => void;
+}
 /**
  * The `TruncatedList` allows consumers to control how many items are
  * revealed to the user while giving the user the ability to expand
  * and see the entire list.
  */
-export let TruncatedList: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let TruncatedList: React.ForwardRefExoticComponent<TruncatedListProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/es/components/TruncatedList/TruncatedList.js

@@ -28,7 +28,6 @@ var defaults = {
     return "View more (".concat(value, ")");
   }
 };
-
 /**
  * The `TruncatedList` allows consumers to control how many items are
  * revealed to the user while giving the user the ability to expand
@@ -84,13 +83,15 @@ var TruncatedList = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
   // list is both collapsed and expanded.
   useEffect(function () {
     if (listRef && childrenArray.length > 0) {
+      var _listRef$current;
       var numItemsToShow = isCollapsed ? minItems : maxItems;
-      var items = listRef.current.childNodes;
+      var items = (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.childNodes;
       var _listHeight = 0;
       for (var index = 0; index < numItemsToShow; index++) {
-        if (items[index]) {
+        if (items && items[index]) {
           var _window;
-          var height = ((_window = window) === null || _window === void 0 || (_window = _window.getComputedStyle(items[index])) === null || _window === void 0 ? void 0 : _window.height) || 16;
+          var itemElement = items[index];
+          var height = ((_window = window) === null || _window === void 0 || (_window = _window.getComputedStyle(itemElement)) === null || _window === void 0 ? void 0 : _window.height) || '16';
           _listHeight += parseInt(height);
         }
       }

package/es/components/UserAvatar/UserAvatar.js

@@ -46,10 +46,12 @@ var componentName = 'UserAvatar';
 
 var defaults = {
   size: 'md',
-  tooltipAlignment: 'bottom'
+  tooltipAlignment: 'bottom',
+  backgroundColor: 'order-1-cyan'
 };
 var UserAvatar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
-  var backgroundColor = _ref.backgroundColor,
+  var _ref$backgroundColor = _ref.backgroundColor,
+    backgroundColor = _ref$backgroundColor === void 0 ? defaults.backgroundColor : _ref$backgroundColor,
     className = _ref.className,
     image = _ref.image,
     imageDescription = _ref.imageDescription,

package/es/components/index.d.ts

@@ -51,7 +51,9 @@ export { StringFormatter } from "./StringFormatter";
 export { UserAvatar } from "./UserAvatar";
 export { ScrollGradient } from "./ScrollGradient";
 export { StatusIndicator } from "./StatusIndicator";
+export { TagOverflow } from "./TagOverflow";
 export { ActionBar } from "./ActionBar";
+export { ConditionBuilder } from "./ConditionBuilder";
 export { ComboButton, ComboButtonItem } from "./ComboButton";
 export { CreateFullPage, CreateFullPageStep } from "./CreateFullPage";
 export { CreateTearsheet, CreateTearsheetStep, CreateTearsheetDivider } from "./CreateTearsheet";
@@ -60,9 +62,9 @@ export { HTTPError403, HTTPError404, HTTPErrorOther } from "./HTTPErrors";
 export { Tearsheet, TearsheetNarrow } from "./Tearsheet";
 export { Toolbar, ToolbarButton, ToolbarGroup } from "./Toolbar";
 export { WebTerminal, WebTerminalContentWrapper, useWebTerminal, WebTerminalProvider } from "./WebTerminal";
-export { Datagrid, useDatagrid, useInfiniteScroll, useNestedRows, useSelectRows, useExpandedRow, useOnRowClick, useSortableColumns, useRowIsMouseOver, useColumnCenterAlign, useColumnRightAlign, useDisableSelectRows, useStickyColumn, useActionsColumn, useCustomizeColumns, useSelectAllWithToggle, useColumnOrder, useInlineEdit, useFiltering, getAutoSizedColumnWidth, useFilterContext } from "./Datagrid";
+export { Datagrid, useDatagrid, useInfiniteScroll, useNestedRows, useSelectRows, useExpandedRow, useOnRowClick, useSortableColumns, useRowIsMouseOver, useColumnCenterAlign, useColumnRightAlign, useDisableSelectRows, useStickyColumn, useActionsColumn, useCustomizeColumns, useSelectAllWithToggle, useColumnOrder, useInlineEdit, useFiltering, getAutoSizedColumnWidth, useFilterContext, useEditableCell } from "./Datagrid";
 export { EditTearsheet, EditTearsheetForm } from "./EditTearsheet";
 export { Guidebanner, GuidebannerElement, GuidebannerElementButton, GuidebannerElementLink } from "./Guidebanner";
 export { InlineTip, InlineTipButton, InlineTipLink } from "./InlineTip";
 export { DescriptionList, DescriptionListBody, DescriptionListCell, DescriptionListRow } from "./DescriptionList";
-export { FilterPanel, FilterPanelAccordion, FilterPanelAccordionItem, FilterPanelCheckbox, FilterPanelCheckboxWithOverflow, FilterPanelGroup, FilterPanelLabel } from "./FilterPanel";
+export { FilterPanel, FilterPanelAccordion, FilterPanelAccordionItem, FilterPanelCheckbox, FilterPanelCheckboxWithOverflow, FilterPanelGroup, FilterPanelLabel, FilterPanelSearch } from "./FilterPanel";

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

@@ -84,6 +84,7 @@ declare namespace defaults {
         let StringFormatter: boolean;
         let StatusIndicator: boolean;
         let StatusIndicatorStep: boolean;
+        let TagOverflow: boolean;
         let ActionBar: boolean;
         let FilterPanel: boolean;
         let FilterPanelAccordion: boolean;
@@ -92,6 +93,8 @@ declare namespace defaults {
         let FilterPanelCheckboxWithOverflow: boolean;
         let FilterPanelGroup: boolean;
         let FilterPanelLabel: boolean;
+        let FilterPanelSearch: boolean;
+        let ConditionBuilder: boolean;
         let Coachmark: boolean;
         let CoachmarkBeacon: boolean;
         let CoachmarkButton: boolean;

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

@@ -83,6 +83,7 @@ var defaults = {
     StringFormatter: false,
     StatusIndicator: false,
     StatusIndicatorStep: false,
+    TagOverflow: false,
     ActionBar: false,
     FilterPanel: false,
     FilterPanelAccordion: false,
@@ -91,6 +92,8 @@ var defaults = {
     FilterPanelCheckboxWithOverflow: false,
     FilterPanelGroup: false,
     FilterPanelLabel: false,
+    FilterPanelSearch: false,
+    ConditionBuilder: false,
     /* new component flags here - comment used by generate CLI */
 
     // Novice to pro components not yet reviewed and released:

package/es/index.js

@@ -78,6 +78,7 @@ export { default as useInlineEdit } from './components/Datagrid/useInlineEdit.js
 export { default as useFiltering } from './components/Datagrid/useFiltering.js';
 export { getAutoSizedColumnWidth } from './components/Datagrid/utils/getAutoSizedColumnWidth.js';
 export { default as useFilterContext } from './components/Datagrid/Datagrid/addons/Filtering/hooks/useFilterContext.js';
+export { default as useEditableCell } from './components/Datagrid/useEditableCell.js';
 export { EditTearsheet } from './components/EditTearsheet/EditTearsheet.js';
 export { EditTearsheetForm } from './components/EditTearsheet/EditTearsheetForm.js';
 export { EditTearsheetNarrow } from './components/EditTearsheetNarrow/EditTearsheetNarrow.js';
@@ -120,6 +121,7 @@ export { StringFormatter } from './components/StringFormatter/StringFormatter.js
 export { UserAvatar } from './components/UserAvatar/UserAvatar.js';
 export { ScrollGradient } from './components/ScrollGradient/ScrollGradient.js';
 export { StatusIndicator } from './components/StatusIndicator/StatusIndicator.js';
+export { TagOverflow } from './components/TagOverflow/TagOverflow.js';
 export { ActionBar } from './components/ActionBar/ActionBar.js';
 export { FilterPanel } from './components/FilterPanel/FilterPanel.js';
 export { FilterPanelAccordion } from './components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.js';
@@ -128,3 +130,5 @@ export { FilterPanelCheckbox } from './components/FilterPanel/FilterPanelCheckbo
 export { FilterPanelCheckboxWithOverflow } from './components/FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.js';
 export { FilterPanelGroup } from './components/FilterPanel/FilterPanelGroup/FilterPanelGroup.js';
 export { FilterPanelLabel } from './components/FilterPanel/FilterPanelLabel/FilterPanelLabel.js';
+export { FilterPanelSearch } from './components/FilterPanel/FilterPanelSearch/FilterPanelSearch.js';
+export { ConditionBuilder } from './components/ConditionBuilder/ConditionBuilder.js';

package/es/settings.d.ts

@@ -70,6 +70,7 @@ export const pkg: {
         StringFormatter: boolean;
         StatusIndicator: boolean;
         StatusIndicatorStep: boolean;
+        TagOverflow: boolean;
         ActionBar: boolean;
         FilterPanel: boolean;
         FilterPanelAccordion: boolean;
@@ -78,6 +79,8 @@ export const pkg: {
         FilterPanelCheckboxWithOverflow: boolean;
         FilterPanelGroup: boolean;
         FilterPanelLabel: boolean;
+        FilterPanelSearch: boolean;
+        ConditionBuilder: boolean;
         Coachmark: boolean;
         CoachmarkBeacon: boolean;
         CoachmarkButton: boolean;

package/lib/components/ActionSet/ActionSet.d.ts

@@ -1,3 +1,39 @@
+/**
+ * Copyright IBM Corp. 2021, 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" />
+import React from 'react';
+import { ButtonProps } from '@carbon/react';
+export declare const ButtonSizes: readonly ["sm", "md", "lg", "xl", "2xl"];
+export type ButtonSize = (typeof ButtonSizes)[number];
+interface ActionSetProps {
+    /**
+     * The action buttons to show. Each action is specified as an object
+     * representation of a Carbon button.
+     *
+     * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
+     */
+    actions: ButtonProps[];
+    /**
+     * The size of buttons to use for the actions. The allowed values are
+     * those for the size prop of carbon Button. If this prop is specified, all
+     * the buttons will be set to this size, overriding any 'size' values (if any)
+     * supplied in the actions array (if any).
+     */
+    buttonSize?: ButtonSize;
+    /**
+     * An optional class or classes to be added to the outermost element.
+     */
+    className?: string;
+    /**
+     * The size of the action set. Different button arrangements are used at
+     * different sizes, to make best use of the available space.
+     */
+    size?: ButtonSize;
+}
 /**
  * An ActionSet presents a set of action buttons, constructed from bundles
  * of prop values and applying some layout rules. When the size is 'sm'
@@ -10,5 +46,5 @@
  * it appears at the left side. If there is a primary button it appears at the
  * right.
  */
-export const ActionSet: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare const ActionSet: React.ForwardRefExoticComponent<ActionSetProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/ActionSet/ActionSet.js

@@ -27,9 +27,6 @@ var _excluded = ["className", "disabled", "kind", "label", "loading", "isExpress
   _excluded2 = ["actions", "buttonSize", "className", "size"];
 var blockClass = "".concat(settings.pkg.prefix, "--action-set");
 var componentName = 'ActionSet';
-
-// NOTE: the component SCSS is not imported here: it is rolled up separately.
-
 var ActionSetButton = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var className = _ref.className,
     disabled = _ref.disabled,
@@ -62,7 +59,6 @@ var willStack = function willStack(size, numberOfActions) {
 var defaults = {
   size: 'md'
 };
-
 /**
  * An ActionSet presents a set of action buttons, constructed from bundles
  * of prop values and applying some layout rules. When the size is 'sm'
@@ -133,6 +129,7 @@ ActionSet.displayName = componentName;
  * @returns null if the actions meet the requirements, or an Error object with
  * an explanatory message.
  */
+/**@ts-ignore*/
 ActionSet.validateActions = function (sizeFn) {
   return function (props, propName, componentName, location, propFullName) {
     var name = propFullName || propName;
@@ -175,7 +172,8 @@ ActionSet.propTypes = {
    *
    * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
    */
-  actions: propsHelper.allPropTypes([ActionSet.validateActions(), index["default"].arrayOf(index["default"].shape(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, react.Button.propTypes), {}, {
+  actions: propsHelper.allPropTypes([/**@ts-ignore*/
+  ActionSet.validateActions(), index["default"].arrayOf(index["default"].shape(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, react.Button.propTypes), {}, {
     kind: index["default"].oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
     label: index["default"].string,
     loading: index["default"].bool,

package/lib/components/Coachmark/utils/enums.d.ts

@@ -1,23 +1,37 @@
-export namespace BEACON_KIND {
-    let DEFAULT: string;
-}
-export namespace COACHMARK_OVERLAY_KIND {
-    let TOOLTIP: string;
-    let FLOATING: string;
-    let FIXED: string;
-    let STACKED: string;
-}
-export namespace COACHMARK_ALIGNMENT {
-    let BOTTOM: string;
-    let BOTTOM_LEFT: string;
-    let BOTTOM_RIGHT: string;
-    let LEFT: string;
-    let LEFT_TOP: string;
-    let LEFT_BOTTOM: string;
-    let RIGHT: string;
-    let RIGHT_TOP: string;
-    let RIGHT_BOTTOM: string;
-    let TOP: string;
-    let TOP_LEFT: string;
-    let TOP_RIGHT: string;
+/**
+ * Reserved for future expansion, i.e. "RING".
+ */
+export declare enum BEACON_KIND {
+    DEFAULT = "default"
 }
+/**
+ * Describes the style and behavior of a Coachmark.
+ * @param TOOLTIP includes a caret pointing to the animated beacon.
+ * @param FLOATING includes a drag handle across the top.
+ * @param FIXED is fixed to the bottom-right of the viewport.
+ * @param STACKED is fixed to the bottom-right of the viewport, includes links to show more, stackable Coachmarks if included.
+ */
+export declare const COACHMARK_OVERLAY_KIND: {
+    TOOLTIP: string;
+    FLOATING: string;
+    FIXED: string;
+    STACKED: string;
+};
+/**
+ * Where to render the Coachmark relative to its target.
+ * Applies only to Floating and Tooltip Coachmarks.
+ */
+export declare const COACHMARK_ALIGNMENT: {
+    BOTTOM: string;
+    BOTTOM_LEFT: string;
+    BOTTOM_RIGHT: string;
+    LEFT: string;
+    LEFT_TOP: string;
+    LEFT_BOTTOM: string;
+    RIGHT: string;
+    RIGHT_TOP: string;
+    RIGHT_BOTTOM: string;
+    TOP: string;
+    TOP_LEFT: string;
+    TOP_RIGHT: string;
+};

package/lib/components/CoachmarkBeacon/CoachmarkBeacon.d.ts

@@ -1,5 +1,29 @@
 /**
- * Use beacon 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 CoachmarkBeacon: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';
+import { BEACON_KIND } from '../Coachmark';
+interface CoachmarkBeaconProps {
+    /**
+     * Optional class name for this component.
+     */
+    className?: string;
+    /**
+     * What style of beacon.
+     * BEACON_KIND is an exported enum from the Coachmark and can be used for this value.
+     * @see {@link BEACON_KIND}
+     */
+    kind?: BEACON_KIND;
+    /**
+     * The aria label.
+     */
+    label: string;
+}
+/**
+ * Use beacon for the target prop of a Coachmark component.
+ */
+export declare let CoachmarkBeacon: React.ForwardRefExoticComponent<CoachmarkBeaconProps & React.RefAttributes<HTMLDivElement>>;
+export {};