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

package/lib/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/lib/components/Tearsheet/TearsheetNarrow.js

@@ -41,6 +41,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.
  */
+
 exports.TearsheetNarrow = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var _ref$verticalPosition = _ref.verticalPosition,
     verticalPosition = _ref$verticalPosition === void 0 ? defaults.verticalPosition : _ref$verticalPosition,
@@ -91,7 +92,8 @@ exports.TearsheetNarrow.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    *
    * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
    */
-  actions: propsHelper.allPropTypes([ActionSet.ActionSet.validateActions(function () {
+  actions: propsHelper.allPropTypes([/**@ts-ignore */
+  ActionSet.ActionSet.validateActions(function () {
     return 'lg';
   }), index["default"].arrayOf(index["default"].shape(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, react.Button.propTypes), {}, {
     kind: index["default"].oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
@@ -115,6 +117,7 @@ exports.TearsheetNarrow.propTypes = _rollupPluginBabelHelpers.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: index["default"].string.isRequired.if(function (_ref2) {
     var actions = _ref2.actions,
       hasCloseIcon = _ref2.hasCloseIcon;
@@ -130,6 +133,7 @@ exports.TearsheetNarrow.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * the tearsheet is read-only or has no navigation actions (sometimes called
    * a "passive tearsheet").
    */
+  /**@ts-ignore*/
   hasCloseIcon: index["default"].bool,
   /**
    * A label for the tearsheet, displayed in the header area of the tearsheet
@@ -150,6 +154,7 @@ exports.TearsheetNarrow.propTypes = _rollupPluginBabelHelpers.objectSpread2({
   /**
    * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
    */
+  /**@ts-ignore */
   portalTarget: TearsheetShell.portalType,
   /**
    * The main title of the tearsheet, displayed in the header area.

package/lib/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/lib/components/Toolbar/Toolbar.js

@@ -26,50 +26,54 @@ var _excluded = ["children", "className", "vertical"];
 var checkComponentEnabled = settings.pkg.checkComponentEnabled,
   prefix = settings.pkg.prefix;
 var blockClass = "".concat(prefix, "--toolbar");
-var ToolbarContext = /*#__PURE__*/React.createContext();
+var ToolbarContext = /*#__PURE__*/React.createContext({});
 
 /** Toolbars are a collection of action items that organize a program’s interaction patterns into a series of closely related commands. */
-exports.Toolbar = /*#__PURE__*/React.forwardRef(function (_ref2, r) {
-  var children = _ref2.children,
-    className = _ref2.className,
-    vertical = _ref2.vertical,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded);
+exports.Toolbar = /*#__PURE__*/React.forwardRef(function (_ref, r) {
+  var children = _ref.children,
+    className = _ref.className,
+    vertical = _ref.vertical,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var focusableElements = React.useRef();
   var getFocusableElements$1 = React.useCallback(function () {
     return focusableElements.current;
   }, [focusableElements]);
-  var _ref = React.useRef();
-  var ref = r || _ref;
-  var _useState = React.useState(),
+  var localRef = React.useRef(null);
+  var ref = r || localRef;
+  var _useState = React.useState(-1),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     focus = _useState2[0],
     setFocus = _useState2[1];
   React.useEffect(function () {
-    focusableElements.current = getFocusableElements.getFocusableElements(ref.current);
-    typeof focus !== 'undefined' && getFocusableElements$1().forEach(function (element, index) {
-      element[index !== focus ? 'setAttribute' : 'removeAttribute']('tabindex', -1);
-    });
+    var _getFocusableElements2;
+    focusableElements.current = getFocusableElements.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');
+    }));
   });
   React.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 = _rollupPluginBabelHelpers.slicedToArray(_ref3, 2),
-    arrowNext = _ref4[0],
-    arrowPrevious = _ref4[1];
+  var _ref2 = !vertical ? ['ArrowRight', 'ArrowLeft'] : ['ArrowDown', 'ArrowUp'],
+    _ref3 = _rollupPluginBabelHelpers.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/lib/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/lib/components/TruncatedList/TruncatedList.js

@@ -37,7 +37,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
@@ -93,13 +92,15 @@ exports.TruncatedList = /*#__PURE__*/React__default["default"].forwardRef(functi
   // list is both collapsed and expanded.
   React.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/lib/components/UserAvatar/UserAvatar.js

@@ -55,10 +55,12 @@ var componentName = 'UserAvatar';
 
 var defaults = {
   size: 'md',
-  tooltipAlignment: 'bottom'
+  tooltipAlignment: 'bottom',
+  backgroundColor: 'order-1-cyan'
 };
 exports.UserAvatar = /*#__PURE__*/React__default["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/lib/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/lib/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/lib/global/js/package-settings.js

@@ -87,6 +87,7 @@ var defaults = {
     StringFormatter: false,
     StatusIndicator: false,
     StatusIndicatorStep: false,
+    TagOverflow: false,
     ActionBar: false,
     FilterPanel: false,
     FilterPanelAccordion: false,
@@ -95,6 +96,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/lib/index.js

@@ -82,6 +82,7 @@ var useInlineEdit = require('./components/Datagrid/useInlineEdit.js');
 var useFiltering = require('./components/Datagrid/useFiltering.js');
 var getAutoSizedColumnWidth = require('./components/Datagrid/utils/getAutoSizedColumnWidth.js');
 var useFilterContext = require('./components/Datagrid/Datagrid/addons/Filtering/hooks/useFilterContext.js');
+var useEditableCell = require('./components/Datagrid/useEditableCell.js');
 var EditTearsheet = require('./components/EditTearsheet/EditTearsheet.js');
 var EditTearsheetForm = require('./components/EditTearsheet/EditTearsheetForm.js');
 var EditTearsheetNarrow = require('./components/EditTearsheetNarrow/EditTearsheetNarrow.js');
@@ -124,6 +125,7 @@ var StringFormatter = require('./components/StringFormatter/StringFormatter.js')
 var UserAvatar = require('./components/UserAvatar/UserAvatar.js');
 var ScrollGradient = require('./components/ScrollGradient/ScrollGradient.js');
 var StatusIndicator = require('./components/StatusIndicator/StatusIndicator.js');
+var TagOverflow = require('./components/TagOverflow/TagOverflow.js');
 var ActionBar = require('./components/ActionBar/ActionBar.js');
 var FilterPanel = require('./components/FilterPanel/FilterPanel.js');
 var FilterPanelAccordion = require('./components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.js');
@@ -132,6 +134,8 @@ var FilterPanelCheckbox = require('./components/FilterPanel/FilterPanelCheckbox/
 var FilterPanelCheckboxWithOverflow = require('./components/FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.js');
 var FilterPanelGroup = require('./components/FilterPanel/FilterPanelGroup/FilterPanelGroup.js');
 var FilterPanelLabel = require('./components/FilterPanel/FilterPanelLabel/FilterPanelLabel.js');
+var FilterPanelSearch = require('./components/FilterPanel/FilterPanelSearch/FilterPanelSearch.js');
+var ConditionBuilder = require('./components/ConditionBuilder/ConditionBuilder.js');
 
 
 
@@ -359,6 +363,7 @@ exports.useInlineEdit = useInlineEdit["default"];
 exports.useFiltering = useFiltering["default"];
 exports.getAutoSizedColumnWidth = getAutoSizedColumnWidth.getAutoSizedColumnWidth;
 exports.useFilterContext = useFilterContext["default"];
+exports.useEditableCell = useEditableCell["default"];
 Object.defineProperty(exports, 'EditTearsheet', {
 	enumerable: true,
 	get: function () { return EditTearsheet.EditTearsheet; }
@@ -527,6 +532,10 @@ Object.defineProperty(exports, 'StatusIndicator', {
 	enumerable: true,
 	get: function () { return StatusIndicator.StatusIndicator; }
 });
+Object.defineProperty(exports, 'TagOverflow', {
+	enumerable: true,
+	get: function () { return TagOverflow.TagOverflow; }
+});
 Object.defineProperty(exports, 'ActionBar', {
 	enumerable: true,
 	get: function () { return ActionBar.ActionBar; }
@@ -559,3 +568,11 @@ Object.defineProperty(exports, 'FilterPanelLabel', {
 	enumerable: true,
 	get: function () { return FilterPanelLabel.FilterPanelLabel; }
 });
+Object.defineProperty(exports, 'FilterPanelSearch', {
+	enumerable: true,
+	get: function () { return FilterPanelSearch.FilterPanelSearch; }
+});
+Object.defineProperty(exports, 'ConditionBuilder', {
+	enumerable: true,
+	get: function () { return ConditionBuilder.ConditionBuilder; }
+});

package/lib/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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.34.0",
+  "version": "2.36.0-alpha.27+3b4e0fa75",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -90,7 +90,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.23.9",
-    "@carbon/ibm-products-styles": "^2.32.0",
+    "@carbon/ibm-products-styles": "^2.33.0",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^7.0.0",
@@ -108,11 +108,11 @@
     "@carbon/grid": "^11.22.0",
     "@carbon/layout": "^11.21.0",
     "@carbon/motion": "^11.17.0",
-    "@carbon/react": "^1.53.0",
-    "@carbon/themes": "^11.33.0",
+    "@carbon/react": "^1.55.0",
+    "@carbon/themes": "^11.34.0",
     "@carbon/type": "^11.26.0",
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "8c3c324be171a801b4d966e94c54ca01a99eb82f"
+  "gitHead": "3b4e0fa7593382128900e68051863dbc949a319b"
 }

package/scss/components/Coachmark/_coachmark-dragbar.scss

@@ -8,7 +8,6 @@
 // Standard imports.
 @use '../../global/styles/project-settings' as c4p-settings;
 @use '../../global/styles/mixins';
-@use '@carbon/react';
 @use '@carbon/react/scss/theme' as *;
 
 // Define all component styles in a mixin which is then exported using

package/scss/components/Coachmark/_coachmark-tagline.scss

@@ -36,7 +36,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--coachmark-tagline;
   background: $purple-70;
   background-image: linear-gradient(90deg, $blue-90 0%, $purple-70 100%);
   color: $white-0 !important;
-  grid-template-columns: [ctacol] auto [closebtncol] $spacing-08;
+  grid-template-columns: [cta-col] auto [close-btn-col] $spacing-08;
   opacity: 1;
   // stylelint-disable-next-line carbon/motion-duration-use
   transition: opacity $duration-moderate-02 motion(exit, productive) 300ms;
@@ -86,7 +86,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--coachmark-tagline;
     border: none;
     background: transparent;
     color: $white-0 !important;
-    grid-template-columns: [iconcol] $spacing-07 [bodycol] auto;
+    grid-template-columns: [icon-col] $spacing-07 [body-col] auto;
     text-align: left;
     @include type.type-style('body-short-01');
 

package/scss/components/ConditionBuilder/_carbon-imports.scss

@@ -0,0 +1,9 @@
+//
+// 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 any Carbon component styles used from ConditionBuilder in this file.
+// ConditionBuilder uses the following Carbon components:

package/scss/components/ConditionBuilder/_condition-builder.scss

@@ -0,0 +1,25 @@
+//
+// 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.
+//
+
+// Standard imports.
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+
+// Other Carbon settings if needed
+// TODO: @use '@carbon/styles/scss/grid';
+// or
+// TODO: @use '@carbon/react/scss/grid';
+
+// ConditionBuilder uses the following Carbon for IBM Products components:
+// TODO: @use(s) of IBM Products component styles used by ConditionBuilder
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
+
+// .#{$block-class} {
+//   // TODO: Styles.
+// }

package/scss/components/ConditionBuilder/_index-with-carbon.scss

@@ -0,0 +1,9 @@
+//
+// 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.
+//
+
+@use './carbon-imports';
+@use './condition-builder';

package/scss/components/ConditionBuilder/_index.scss

@@ -0,0 +1,8 @@
+//
+// 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.
+//
+
+@use './condition-builder';