@carbon/ibm-products 2.32.0 → 2.33.0

package/lib/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.js

@@ -0,0 +1,85 @@
+/**
+ * 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 _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var index = require('../../../node_modules/prop-types/index.js');
+var cx = require('classnames');
+var react = require('@carbon/react');
+var devtools = require('../../../global/js/utils/devtools.js');
+var settings = require('../../../settings.js');
+var FilterPanelLabel = require('../FilterPanelLabel/FilterPanelLabel.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 = ["className", "count", "labelText", "title"];
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(settings.pkg.prefix, "--filter-panel-checkbox");
+var componentName = 'FilterPanelCheckbox';
+
+/**
+ * Provides a checkbox, label, and count.
+ */
+exports.FilterPanelCheckbox = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    count = _ref.count,
+    labelText = _ref.labelText,
+    title = _ref.title,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React__default["default"].createElement(react.Checkbox, _rollupPluginBabelHelpers["extends"]({}, rest, {
+    className: cx__default["default"](blockClass, className),
+    labelText: /*#__PURE__*/React__default["default"].createElement(FilterPanelLabel.FilterPanelLabel, {
+      count: count,
+      labelText: labelText,
+      title: title
+    }),
+    ref: ref
+  }, devtools.getDevtoolsProps(componentName)));
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+exports.FilterPanelCheckbox = settings.pkg.checkComponentEnabled(exports.FilterPanelCheckbox, componentName);
+exports.FilterPanelCheckbox.displayName = componentName;
+exports.FilterPanelCheckbox.propTypes = {
+  /**
+   * IMPORTANT NOTE
+   *
+   * This component is returning Carbon's Checkbox.
+   *
+   * All of Carbon Checkbox's props are directly available
+   * through "...rest", including id, onClick, etc.
+   */
+
+  /**
+   * Optional class to be applied to the containing node.
+   */
+  className: index["default"].string,
+  /**
+   * Number to be displayed with the checkbox.
+   */
+  count: index["default"].oneOfType([index["default"].number, index["default"].string]),
+  /**
+   * Unique identifier.
+   */
+  id: index["default"].string.isRequired,
+  /**
+   * Label to be displayed with the checkbox.
+   */
+  labelText: index["default"].node.isRequired,
+  /**
+   * Optional title attribute for the label.
+   */
+  title: index["default"].string
+};

package/lib/components/FilterPanel/FilterPanelLabel/FilterPanelLabel.d.ts

@@ -0,0 +1,5 @@
+/**
+ * A container with a label and optional count.
+ */
+export let FilterPanelLabel: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';

package/lib/components/FilterPanel/FilterPanelLabel/FilterPanelLabel.js

@@ -0,0 +1,70 @@
+/**
+ * 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 _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var index = require('../../../node_modules/prop-types/index.js');
+var cx = require('classnames');
+var devtools = require('../../../global/js/utils/devtools.js');
+var settings = require('../../../settings.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 = ["className", "count", "labelText", "title"];
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(settings.pkg.prefix, "--filter-panel-label");
+var componentName = 'FilterPanelLabel';
+
+/**
+ * A container with a label and optional count.
+ */
+exports.FilterPanelLabel = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    count = _ref.count,
+    labelText = _ref.labelText,
+    title = _ref.title,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React__default["default"].createElement("span", _rollupPluginBabelHelpers["extends"]({}, rest, {
+    className: cx__default["default"](blockClass, className),
+    ref: ref
+  }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(blockClass, "__text"),
+    title: title
+  }, labelText), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(blockClass, "__count")
+  }, count));
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+exports.FilterPanelLabel = settings.pkg.checkComponentEnabled(exports.FilterPanelLabel, componentName);
+exports.FilterPanelLabel.displayName = componentName;
+exports.FilterPanelLabel.propTypes = {
+  /**
+   * Optional class to be applied to the containing node.
+   */
+  className: index["default"].string,
+  /**
+   * Number to be displayed with the label.
+   */
+  count: index["default"].oneOfType([index["default"].number, index["default"].string]),
+  /**
+   * The label for the component.
+   */
+  labelText: index["default"].node.isRequired,
+  /**
+   * Optional title attribute for the label.
+   */
+  title: index["default"].string
+};

package/lib/components/FilterPanel/FilterPanelLabel/index.d.ts

@@ -0,0 +1 @@
+export { FilterPanelLabel } from "./FilterPanelLabel";

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

@@ -0,0 +1,3 @@
+export { FilterPanel } from "./FilterPanel";
+export { FilterPanelCheckbox } from "./FilterPanelCheckbox/FilterPanelCheckbox";
+export { FilterPanelLabel } from "./FilterPanelLabel/FilterPanelLabel";

package/lib/components/SidePanel/SidePanel.js

@@ -18,7 +18,6 @@ var useResizeObserver = require('../../global/js/hooks/useResizeObserver.js');
 var carbonMotion = require('@carbon/motion');
 var devtools = require('../../global/js/utils/devtools.js');
 var propsHelper = require('../../global/js/utils/props-helper.js');
-var wrapFocus = require('../../global/js/utils/wrapFocus.js');
 var settings = require('../../settings.js');
 var constants = require('./constants.js');
 var react = require('@carbon/react');
@@ -27,6 +26,7 @@ var variants = require('./motion/variants.js');
 var pconsole = require('../../global/js/utils/pconsole.js');
 var ActionSet = require('../ActionSet/ActionSet.js');
 var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
+var useFocus = require('../../global/js/hooks/useFocus.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -96,8 +96,6 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
   var localRef = React.useRef();
   var sidePanelRef = ref || localRef;
   var overlayRef = React.useRef();
-  var startTrapRef = React.useRef();
-  var endTrapRef = React.useRef();
   var innerContentRef = React.useRef();
   var closeRef = React.useRef();
   var animatedScrollRef = React.useRef();
@@ -117,6 +115,9 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
     _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
     doAnimateTitle = _useState6[0],
     setDoAnimateTitle = _useState6[1];
+  var _useFocus = useFocus.useFocus(sidePanelRef),
+    firstElement = _useFocus.firstElement,
+    keyDownListener = _useFocus.keyDownListener;
   var shouldReduceMotion = framerMotion.useReducedMotion();
   React.useEffect(function () {
     setDoAnimateTitle(animateTitle);
@@ -144,26 +145,6 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
     }
   }, [currentStep, sidePanelRef, size, previousState === null || previousState === void 0 ? void 0 : previousState.size, id]);
 
-  // set initial focus when side panel opens
-  React.useEffect(function () {
-    var initialFocus = function initialFocus(focusContainerElement) {
-      var containerElement = focusContainerElement;
-      var primaryFocusElement = containerElement && containerElement.querySelector(selectorPrimaryFocus);
-      if (primaryFocusElement) {
-        return primaryFocusElement;
-      } else {
-        return closeRef && closeRef.current;
-      }
-    };
-    var focusButton = function focusButton(focusContainerElement) {
-      var target = initialFocus(focusContainerElement);
-      target === null || target === void 0 || target.focus();
-    };
-    if (open && animationComplete) {
-      focusButton(innerContentRef.current);
-    }
-  }, [selectorPrimaryFocus, open, animationComplete]);
-
   // Add console warning if labelText is provided without a title.
   // This combination is not allowed.
   React.useEffect(function () {
@@ -310,23 +291,19 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
       }
     }
   }, [slideIn, selectorPageContent, placement, size, reducedMotion.matches, open]);
-
-  // adds focus trap functionality
-  /* istanbul ignore next */
-  var handleBlur = function handleBlur(_ref2) {
-    var oldActiveNode = _ref2.target,
-      currentActiveNode = _ref2.relatedTarget;
-    // focus trap should only be set if the side panel is a `slideOver` type
-    if (open && innerContentRef && !slideIn) {
-      wrapFocus["default"]({
-        bodyNode: innerContentRef.current,
-        startTrapRef: startTrapRef,
-        endTrapRef: endTrapRef,
-        currentActiveNode: currentActiveNode,
-        oldActiveNode: oldActiveNode
-      });
+  React.useEffect(function () {
+    if (open) {
+      setTimeout(function () {
+        var _document;
+        var primeFocusEl = (_document = document) === null || _document === void 0 ? void 0 : _document.querySelector(selectorPrimaryFocus);
+        if (selectorPrimaryFocus && primeFocusEl) {
+          primeFocusEl.focus();
+        } else {
+          firstElement === null || firstElement === void 0 || firstElement.focus();
+        }
+      }, 0);
     }
-  };
+  }, [animationComplete, firstElement, open, selectorPrimaryFocus]);
   var primaryActionContainerClassNames = cx__default["default"](["".concat(blockClass, "__actions-container"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__actions-container--condensed"), condensedActions)]);
   var mainPanelClassNames = cx__default["default"]([blockClass, className, "".concat(blockClass), "".concat(blockClass, "--").concat(size), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--right-placement"), placement === 'right'), "".concat(blockClass, "--left-placement"), placement === 'left'), "".concat(blockClass, "--slide-in"), slideIn), "".concat(blockClass, "--has-slug"), slug), "".concat(blockClass, "--condensed-actions"), condensedActions), "".concat(blockClass, "--animated-title"), doAnimateTitle), "".concat(blockClass, "--has-overlay"), includeOverlay)]);
   var renderTitle = function renderTitle() {
@@ -392,17 +369,17 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
       ref: subtitleRef
     }, subtitle), actionToolbarButtons && actionToolbarButtons.length && /*#__PURE__*/React__default["default"].createElement("div", {
       className: "".concat(blockClass, "__action-toolbar")
-    }, actionToolbarButtons.map(function (_ref5) {
-      var label = _ref5.label,
-        kind = _ref5.kind,
-        icon = _ref5.icon,
-        tooltipPosition = _ref5.tooltipPosition,
-        tooltipAlignment = _ref5.tooltipAlignment,
-        leading = _ref5.leading,
-        disabled = _ref5.disabled,
-        className = _ref5.className,
-        onClick = _ref5.onClick,
-        rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref5, _excluded2);
+    }, actionToolbarButtons.map(function (_ref4) {
+      var label = _ref4.label,
+        kind = _ref4.kind,
+        icon = _ref4.icon,
+        tooltipPosition = _ref4.tooltipPosition,
+        tooltipAlignment = _ref4.tooltipAlignment,
+        leading = _ref4.leading,
+        disabled = _ref4.disabled,
+        className = _ref4.className,
+        onClick = _ref4.onClick,
+        rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref4, _excluded2);
       return /*#__PURE__*/React__default["default"].createElement(react.Button, _rollupPluginBabelHelpers["extends"]({}, rest, {
         key: label,
         kind: kind || 'ghost',
@@ -428,7 +405,6 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
   return /*#__PURE__*/React__default["default"].createElement(framerMotion.AnimatePresence, null, open && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(framerMotion.motion.div, _rollupPluginBabelHelpers["extends"]({}, devtools.getDevtoolsProps(componentName), rest, {
     id: id,
     className: mainPanelClassNames,
-    onBlur: handleBlur,
     ref: sidePanelRef,
     role: "complementary",
     "aria-label": title,
@@ -443,13 +419,9 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
     custom: {
       placement: placement,
       shouldReduceMotion: shouldReduceMotion
-    }
-  }), /*#__PURE__*/React__default["default"].createElement("span", {
-    ref: startTrapRef,
-    tabIndex: "0",
-    role: "link",
-    className: "".concat(blockClass, "__visually-hidden")
-  }, "Focus sentinel"), doAnimateTitle ? /*#__PURE__*/React__default["default"].createElement("div", {
+    },
+    onKeyDown: keyDownListener
+  }), doAnimateTitle ? /*#__PURE__*/React__default["default"].createElement("div", {
     ref: animatedScrollRef,
     className: "".concat(blockClass, "__animated-scroll-wrapper ").concat(blockClass, "--scrolls")
   }, renderHeader(), renderMain()) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, renderHeader(), renderMain()), /*#__PURE__*/React__default["default"].createElement(MotionActionSet, {
@@ -458,12 +430,7 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
     size: size === 'xs' ? 'sm' : size,
     custom: shouldReduceMotion,
     variants: variants.actionSetVariants
-  }), /*#__PURE__*/React__default["default"].createElement("span", {
-    ref: endTrapRef,
-    tabIndex: "0",
-    role: "link",
-    className: "".concat(blockClass, "__visually-hidden")
-  }, "Focus sentinel")), /*#__PURE__*/React__default["default"].createElement(framerMotion.AnimatePresence, null, includeOverlay && /*#__PURE__*/React__default["default"].createElement(framerMotion.motion.div, {
+  })), /*#__PURE__*/React__default["default"].createElement(framerMotion.AnimatePresence, null, includeOverlay && /*#__PURE__*/React__default["default"].createElement(framerMotion.motion.div, {
     variants: variants.overlayVariants,
     initial: "hidden",
     animate: "visible",
@@ -583,8 +550,8 @@ exports.SidePanel.propTypes = {
    * This is the selector to the element that contains all of the page content that will shrink if the panel is a slide in.
    * This prop is required when using the `slideIn` variant of the side panel.
    */
-  selectorPageContent: index["default"].string.isRequired.if(function (_ref7) {
-    var slideIn = _ref7.slideIn;
+  selectorPageContent: index["default"].string.isRequired.if(function (_ref6) {
+    var slideIn = _ref6.slideIn;
     return slideIn;
   }),
   /**
@@ -611,8 +578,8 @@ exports.SidePanel.propTypes = {
   /**
    * Sets the title text
    */
-  title: index["default"].string.isRequired.if(function (_ref8) {
-    var labelText = _ref8.labelText;
+  title: index["default"].string.isRequired.if(function (_ref7) {
+    var labelText = _ref7.labelText;
     return labelText;
   })
 };

package/lib/components/Tearsheet/TearsheetShell.js

@@ -149,7 +149,15 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
         firstElement === null || firstElement === void 0 || firstElement.focus();
       }, 0);
     }
-  }, [open, firstElement]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+  React.useEffect(function () {
+    if (open && position !== depth) {
+      setTimeout(function () {
+        firstElement === null || firstElement === void 0 || firstElement.focus();
+      }, 0);
+    }
+  }, [position, depth, firstElement, open]);
   React.useEffect(function () {
     var notify = function notify() {
       return stack.all.forEach(function (handler) {

package/lib/components/Toolbar/ToolbarGroup.d.ts

@@ -1,3 +1,18 @@
+/**
+ * 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.
+ */
+import React, { ReactNode } from 'react';
+interface ToolbarGroupProps {
+    /** Provide the content of the `ToolbarGroup` */
+    children?: ReactNode;
+    /** Provide an optional class to be applied to the containing node */
+    className?: string;
+}
 /** Toolbar groups organize the commands within a toolbar into related groups. */
-export let ToolbarGroup: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let ToolbarGroup: React.ForwardRefExoticComponent<ToolbarGroupProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/Toolbar/ToolbarGroup.js

@@ -22,7 +22,6 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var _excluded = ["className", "children"];
-
 /** Toolbar groups organize the commands within a toolbar into related groups. */
 exports.ToolbarGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,

package/lib/components/index.d.ts

@@ -44,13 +44,13 @@ export { Decorator } from "./Decorator";
 export { DecoratorLink } from "./DecoratorLink";
 export { DecoratorSingleButton } from "./DecoratorSingleButton";
 export { DecoratorDualButton } from "./DecoratorDualButton";
-export { DescriptionList } from "./DescriptionList";
 export { FullPageError } from "./FullPageError";
 export { SearchBar } from "./SearchBar";
 export { Nav } from "./Nav";
 export { StringFormatter } from "./StringFormatter";
 export { UserAvatar } from "./UserAvatar";
 export { StatusIndicator } from "./StatusIndicator";
+export { ActionBar } from "./ActionBar";
 export { ComboButton, ComboButtonItem } from "./ComboButton";
 export { CreateFullPage, CreateFullPageStep } from "./CreateFullPage";
 export { CreateTearsheet, CreateTearsheetStep, CreateTearsheetDivider } from "./CreateTearsheet";
@@ -63,3 +63,5 @@ export { Datagrid, useDatagrid, useInfiniteScroll, useNestedRows, useSelectRows,
 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, FilterPanelCheckbox, FilterPanelLabel } from "./FilterPanel";

package/lib/global/js/hooks/useFocus.js

@@ -31,10 +31,17 @@ var useFocus = function useFocus(modalRef) {
   var query = "".concat(queryButton, ",").concat(queryLink, ",").concat(queryInput, ",").concat(querySelect, ",").concat(queryTextarea, ", ").concat(queryTabIndex);
   var modalEl = modalRef === null || modalRef === void 0 ? void 0 : modalRef.current;
   var getFocusable = React.useCallback(function () {
+    var _focusableElements, _focusableElements2, _focusableElements3, _focusableElements4;
     // Selecting all focusable elements based on the above conditions
     var focusableElements = modalEl === null || modalEl === void 0 ? void 0 : modalEl.querySelectorAll("".concat(query));
-    var first = focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements[0];
-    var last = focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements[(focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements.length) - 1];
+    if ((_focusableElements = focusableElements) !== null && _focusableElements !== void 0 && _focusableElements.length) {
+      focusableElements = Array.prototype.filter.call(focusableElements, function (el) {
+        var _window;
+        return ((_window = window) === null || _window === void 0 || (_window = _window.getComputedStyle(el)) === null || _window === void 0 ? void 0 : _window.display) !== 'none';
+      });
+    }
+    var first = (_focusableElements2 = focusableElements) === null || _focusableElements2 === void 0 ? void 0 : _focusableElements2[0];
+    var last = (_focusableElements3 = focusableElements) === null || _focusableElements3 === void 0 ? void 0 : _focusableElements3[((_focusableElements4 = focusableElements) === null || _focusableElements4 === void 0 ? void 0 : _focusableElements4.length) - 1];
     var all = focusableElements;
     return {
       first: first,

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

@@ -83,6 +83,10 @@ declare namespace defaults {
         let StringFormatter: boolean;
         let StatusIndicator: boolean;
         let StatusIndicatorStep: boolean;
+        let ActionBar: boolean;
+        let FilterPanel: boolean;
+        let FilterPanelCheckbox: boolean;
+        let FilterPanelLabel: boolean;
         let Coachmark: boolean;
         let CoachmarkBeacon: boolean;
         let CoachmarkButton: boolean;
@@ -95,6 +99,9 @@ declare namespace defaults {
         let DecoratorSingleButton: boolean;
         let DecoratorDualButton: boolean;
         let DescriptionList: boolean;
+        let DescriptionListBody: boolean;
+        let DescriptionListCell: boolean;
+        let DescriptionListRow: boolean;
         let SearchBar: boolean;
         let UserAvatar: boolean;
         let Checklist: boolean;

package/lib/global/js/package-settings.js

@@ -86,6 +86,10 @@ var defaults = {
     StringFormatter: false,
     StatusIndicator: false,
     StatusIndicatorStep: false,
+    ActionBar: false,
+    FilterPanel: false,
+    FilterPanelCheckbox: false,
+    FilterPanelLabel: false,
     /* new component flags here - comment used by generate CLI */
 
     // Novice to pro components not yet reviewed and released:
@@ -101,6 +105,9 @@ var defaults = {
     DecoratorSingleButton: false,
     DecoratorDualButton: false,
     DescriptionList: false,
+    DescriptionListBody: false,
+    DescriptionListCell: false,
+    DescriptionListRow: false,
     SearchBar: false,
     UserAvatar: false,
     /* new component flags here - comment used by generate CLI */

package/lib/index.js

@@ -114,12 +114,19 @@ var DecoratorLink = require('./components/DecoratorLink/DecoratorLink.js');
 var DecoratorSingleButton = require('./components/DecoratorSingleButton/DecoratorSingleButton.js');
 var DecoratorDualButton = require('./components/DecoratorDualButton/DecoratorDualButton.js');
 var DescriptionList = require('./components/DescriptionList/DescriptionList.js');
+var DescriptionListBody = require('./components/DescriptionList/DescriptionListBody.js');
+var DescriptionListCell = require('./components/DescriptionList/DescriptionListCell.js');
+var DescriptionListRow = require('./components/DescriptionList/DescriptionListRow.js');
 var FullPageError = require('./components/FullPageError/FullPageError.js');
 var SearchBar = require('./components/SearchBar/SearchBar.js');
 var Nav = require('./components/Nav/Nav.js');
 var StringFormatter = require('./components/StringFormatter/StringFormatter.js');
 var UserAvatar = require('./components/UserAvatar/UserAvatar.js');
 var StatusIndicator = require('./components/StatusIndicator/StatusIndicator.js');
+var ActionBar = require('./components/ActionBar/ActionBar.js');
+var FilterPanel = require('./components/FilterPanel/FilterPanel.js');
+var FilterPanelCheckbox = require('./components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.js');
+var FilterPanelLabel = require('./components/FilterPanel/FilterPanelLabel/FilterPanelLabel.js');
 
 
 
@@ -475,6 +482,18 @@ Object.defineProperty(exports, 'DescriptionList', {
 	enumerable: true,
 	get: function () { return DescriptionList.DescriptionList; }
 });
+Object.defineProperty(exports, 'DescriptionListBody', {
+	enumerable: true,
+	get: function () { return DescriptionListBody.DescriptionListBody; }
+});
+Object.defineProperty(exports, 'DescriptionListCell', {
+	enumerable: true,
+	get: function () { return DescriptionListCell.DescriptionListCell; }
+});
+Object.defineProperty(exports, 'DescriptionListRow', {
+	enumerable: true,
+	get: function () { return DescriptionListRow.DescriptionListRow; }
+});
 Object.defineProperty(exports, 'FullPageError', {
 	enumerable: true,
 	get: function () { return FullPageError.FullPageError; }
@@ -499,3 +518,19 @@ Object.defineProperty(exports, 'StatusIndicator', {
 	enumerable: true,
 	get: function () { return StatusIndicator.StatusIndicator; }
 });
+Object.defineProperty(exports, 'ActionBar', {
+	enumerable: true,
+	get: function () { return ActionBar.ActionBar; }
+});
+Object.defineProperty(exports, 'FilterPanel', {
+	enumerable: true,
+	get: function () { return FilterPanel.FilterPanel; }
+});
+Object.defineProperty(exports, 'FilterPanelCheckbox', {
+	enumerable: true,
+	get: function () { return FilterPanelCheckbox.FilterPanelCheckbox; }
+});
+Object.defineProperty(exports, 'FilterPanelLabel', {
+	enumerable: true,
+	get: function () { return FilterPanelLabel.FilterPanelLabel; }
+});

package/lib/settings.d.ts

@@ -69,6 +69,10 @@ export const pkg: {
         StringFormatter: boolean;
         StatusIndicator: boolean;
         StatusIndicatorStep: boolean;
+        ActionBar: boolean;
+        FilterPanel: boolean;
+        FilterPanelCheckbox: boolean;
+        FilterPanelLabel: boolean;
         Coachmark: boolean;
         CoachmarkBeacon: boolean;
         CoachmarkButton: boolean;
@@ -81,6 +85,9 @@ export const pkg: {
         DecoratorSingleButton: boolean;
         DecoratorDualButton: boolean;
         DescriptionList: boolean;
+        DescriptionListBody: boolean;
+        DescriptionListCell: boolean;
+        DescriptionListRow: boolean;
         SearchBar: boolean;
         UserAvatar: boolean;
         Checklist: boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.32.0",
+  "version": "2.33.0",
   "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.30.1",
+    "@carbon/ibm-products-styles": "^2.31.0",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^7.0.0",
@@ -114,5 +114,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "1785ad497681a5f69574c808db00e251625c4be9"
+  "gitHead": "389407c790f9238df195d0c53a384d7a06075f06"
 }

package/scss/components/FilterPanel/_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 FilterPanel in this file.
+// FilterPanel uses the following Carbon components:

package/scss/components/FilterPanel/_filter-panel-checkbox.scss

@@ -0,0 +1,32 @@
+//
+// 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.
+//
+
+/* stylelint-disable max-nesting-depth */
+
+// Standard imports.
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+
+@use '@carbon/styles/scss/type';
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--filter-panel-checkbox;
+$label: #{c4p-settings.$pkg-prefix}--filter-panel-label;
+
+// Set Carbon's Checkbox label to 100% the width of its container.
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--checkbox-label,
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--checkbox-label-text {
+  width: 100%;
+}
+
+.#{$block-class} .#{$label}__text {
+  @include type.type-style('body-compact-01');
+}
+
+.#{$block-class} .#{$label}__count {
+  @include type.type-style('label-01');
+}