@carbon/ibm-products 2.32.0 → 2.33.0

package/es/components/FilterPanel/FilterPanel.js

@@ -0,0 +1,55 @@
+/**
+ * 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.
+ */
+
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import PropTypes from '../../node_modules/prop-types/index.js';
+import cx from 'classnames';
+import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
+import { pkg } from '../../settings.js';
+
+var _excluded = ["children", "className", "title"];
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(pkg.prefix, "--filter-panel");
+var componentName = 'FilterPanel';
+
+/**
+ * The container for filter panel subcomponents.
+ */
+var FilterPanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    title = _ref.title,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React__default.createElement("section", _extends({}, rest, {
+    className: cx(blockClass, className),
+    ref: ref
+  }, getDevtoolsProps(componentName)), title && /*#__PURE__*/React__default.createElement("h1", {
+    className: "".concat(blockClass, "__title")
+  }, title), children);
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+FilterPanel = pkg.checkComponentEnabled(FilterPanel, componentName);
+FilterPanel.displayName = componentName;
+FilterPanel.propTypes = {
+  /**
+   * Provide the contents of the FilterPanel.
+   */
+  children: PropTypes.node,
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: PropTypes.string,
+  /**
+   * Title text for the filter panel.
+   */
+  title: PropTypes.node
+};
+
+export { FilterPanel };

package/es/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Provides a checkbox, label, and count.
+ */
+export let FilterPanelCheckbox: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';

package/es/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.js

@@ -0,0 +1,78 @@
+/**
+ * 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.
+ */
+
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import PropTypes from '../../../node_modules/prop-types/index.js';
+import cx from 'classnames';
+import { Checkbox } from '@carbon/react';
+import { getDevtoolsProps } from '../../../global/js/utils/devtools.js';
+import { pkg } from '../../../settings.js';
+import { FilterPanelLabel } from '../FilterPanelLabel/FilterPanelLabel.js';
+
+var _excluded = ["className", "count", "labelText", "title"];
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(pkg.prefix, "--filter-panel-checkbox");
+var componentName = 'FilterPanelCheckbox';
+
+/**
+ * Provides a checkbox, label, and count.
+ */
+var FilterPanelCheckbox = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    count = _ref.count,
+    labelText = _ref.labelText,
+    title = _ref.title,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React__default.createElement(Checkbox, _extends({}, rest, {
+    className: cx(blockClass, className),
+    labelText: /*#__PURE__*/React__default.createElement(FilterPanelLabel, {
+      count: count,
+      labelText: labelText,
+      title: title
+    }),
+    ref: ref
+  }, getDevtoolsProps(componentName)));
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+FilterPanelCheckbox = pkg.checkComponentEnabled(FilterPanelCheckbox, componentName);
+FilterPanelCheckbox.displayName = componentName;
+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: PropTypes.string,
+  /**
+   * Number to be displayed with the checkbox.
+   */
+  count: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * Unique identifier.
+   */
+  id: PropTypes.string.isRequired,
+  /**
+   * Label to be displayed with the checkbox.
+   */
+  labelText: PropTypes.node.isRequired,
+  /**
+   * Optional title attribute for the label.
+   */
+  title: PropTypes.string
+};
+
+export { FilterPanelCheckbox };

package/es/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/es/components/FilterPanel/FilterPanelLabel/FilterPanelLabel.js

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

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

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

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

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

package/es/components/SidePanel/SidePanel.js

@@ -14,7 +14,6 @@ import { useResizeObserver } from '../../global/js/hooks/useResizeObserver.js';
 import { moderate02 } from '@carbon/motion';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { allPropTypes } from '../../global/js/utils/props-helper.js';
-import wrapFocus from '../../global/js/utils/wrapFocus.js';
 import { pkg } from '../../settings.js';
 import { SIDE_PANEL_SIZES } from './constants.js';
 import { Button } from '@carbon/react';
@@ -23,6 +22,7 @@ import { actionSetVariants, overlayVariants, panelVariants } from './motion/vari
 import pconsole from '../../global/js/utils/pconsole.js';
 import { ActionSet } from '../ActionSet/ActionSet.js';
 import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
+import { useFocus } from '../../global/js/hooks/useFocus.js';
 
 var _excluded = ["actionToolbarButtons", "actions", "animateTitle", "children", "className", "closeIconDescription", "condensedActions", "currentStep", "id", "includeOverlay", "labelText", "navigationBackIconDescription", "onNavigationBack", "onRequestClose", "onUnmount", "open", "placement", "preventCloseOnClickOutside", "selectorPageContent", "selectorPrimaryFocus", "size", "slideIn", "slug", "subtitle", "title"],
   _excluded2 = ["label", "kind", "icon", "tooltipPosition", "tooltipAlignment", "leading", "disabled", "className", "onClick"];
@@ -87,8 +87,6 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var localRef = useRef();
   var sidePanelRef = ref || localRef;
   var overlayRef = useRef();
-  var startTrapRef = useRef();
-  var endTrapRef = useRef();
   var innerContentRef = useRef();
   var closeRef = useRef();
   var animatedScrollRef = useRef();
@@ -108,6 +106,9 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     doAnimateTitle = _useState6[0],
     setDoAnimateTitle = _useState6[1];
+  var _useFocus = useFocus(sidePanelRef),
+    firstElement = _useFocus.firstElement,
+    keyDownListener = _useFocus.keyDownListener;
   var shouldReduceMotion = useReducedMotion();
   useEffect(function () {
     setDoAnimateTitle(animateTitle);
@@ -135,26 +136,6 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     }
   }, [currentStep, sidePanelRef, size, previousState === null || previousState === void 0 ? void 0 : previousState.size, id]);
 
-  // set initial focus when side panel opens
-  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.
   useEffect(function () {
@@ -301,23 +282,19 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       }
     }
   }, [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({
-        bodyNode: innerContentRef.current,
-        startTrapRef: startTrapRef,
-        endTrapRef: endTrapRef,
-        currentActiveNode: currentActiveNode,
-        oldActiveNode: oldActiveNode
-      });
+  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(["".concat(blockClass, "__actions-container"), _defineProperty({}, "".concat(blockClass, "__actions-container--condensed"), condensedActions)]);
   var mainPanelClassNames = cx([blockClass, className, "".concat(blockClass), "".concat(blockClass, "--").concat(size), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_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() {
@@ -383,17 +360,17 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       ref: subtitleRef
     }, subtitle), actionToolbarButtons && actionToolbarButtons.length && /*#__PURE__*/React__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 = _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 = _objectWithoutProperties(_ref4, _excluded2);
       return /*#__PURE__*/React__default.createElement(Button, _extends({}, rest, {
         key: label,
         kind: kind || 'ghost',
@@ -419,7 +396,6 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   return /*#__PURE__*/React__default.createElement(AnimatePresence, null, open && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(motion.div, _extends({}, getDevtoolsProps(componentName), rest, {
     id: id,
     className: mainPanelClassNames,
-    onBlur: handleBlur,
     ref: sidePanelRef,
     role: "complementary",
     "aria-label": title,
@@ -434,13 +410,9 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     custom: {
       placement: placement,
       shouldReduceMotion: shouldReduceMotion
-    }
-  }), /*#__PURE__*/React__default.createElement("span", {
-    ref: startTrapRef,
-    tabIndex: "0",
-    role: "link",
-    className: "".concat(blockClass, "__visually-hidden")
-  }, "Focus sentinel"), doAnimateTitle ? /*#__PURE__*/React__default.createElement("div", {
+    },
+    onKeyDown: keyDownListener
+  }), doAnimateTitle ? /*#__PURE__*/React__default.createElement("div", {
     ref: animatedScrollRef,
     className: "".concat(blockClass, "__animated-scroll-wrapper ").concat(blockClass, "--scrolls")
   }, renderHeader(), renderMain()) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, renderHeader(), renderMain()), /*#__PURE__*/React__default.createElement(MotionActionSet, {
@@ -449,12 +421,7 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     size: size === 'xs' ? 'sm' : size,
     custom: shouldReduceMotion,
     variants: actionSetVariants
-  }), /*#__PURE__*/React__default.createElement("span", {
-    ref: endTrapRef,
-    tabIndex: "0",
-    role: "link",
-    className: "".concat(blockClass, "__visually-hidden")
-  }, "Focus sentinel")), /*#__PURE__*/React__default.createElement(AnimatePresence, null, includeOverlay && /*#__PURE__*/React__default.createElement(motion.div, {
+  })), /*#__PURE__*/React__default.createElement(AnimatePresence, null, includeOverlay && /*#__PURE__*/React__default.createElement(motion.div, {
     variants: overlayVariants,
     initial: "hidden",
     animate: "visible",
@@ -574,8 +541,8 @@ 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: PropTypes.string.isRequired.if(function (_ref7) {
-    var slideIn = _ref7.slideIn;
+  selectorPageContent: PropTypes.string.isRequired.if(function (_ref6) {
+    var slideIn = _ref6.slideIn;
     return slideIn;
   }),
   /**
@@ -602,8 +569,8 @@ SidePanel.propTypes = {
   /**
    * Sets the title text
    */
-  title: PropTypes.string.isRequired.if(function (_ref8) {
-    var labelText = _ref8.labelText;
+  title: PropTypes.string.isRequired.if(function (_ref7) {
+    var labelText = _ref7.labelText;
     return labelText;
   })
 };

package/es/components/Tearsheet/TearsheetShell.js

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

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

@@ -13,7 +13,6 @@ import { pkg } from '../../settings.js';
 import { blockClass } from './Toolbar.js';
 
 var _excluded = ["className", "children"];
-
 /** Toolbar groups organize the commands within a toolbar into related groups. */
 var ToolbarGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,

package/es/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/es/global/js/hooks/useFocus.js

@@ -27,10 +27,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 = 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/es/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/es/global/js/package-settings.js

@@ -82,6 +82,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:
@@ -97,6 +101,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/es/index.js

@@ -110,9 +110,16 @@ export { DecoratorLink } from './components/DecoratorLink/DecoratorLink.js';
 export { DecoratorSingleButton } from './components/DecoratorSingleButton/DecoratorSingleButton.js';
 export { DecoratorDualButton } from './components/DecoratorDualButton/DecoratorDualButton.js';
 export { DescriptionList } from './components/DescriptionList/DescriptionList.js';
+export { DescriptionListBody } from './components/DescriptionList/DescriptionListBody.js';
+export { DescriptionListCell } from './components/DescriptionList/DescriptionListCell.js';
+export { DescriptionListRow } from './components/DescriptionList/DescriptionListRow.js';
 export { FullPageError } from './components/FullPageError/FullPageError.js';
 export { SearchBar } from './components/SearchBar/SearchBar.js';
 export { Nav } from './components/Nav/Nav.js';
 export { StringFormatter } from './components/StringFormatter/StringFormatter.js';
 export { UserAvatar } from './components/UserAvatar/UserAvatar.js';
 export { StatusIndicator } from './components/StatusIndicator/StatusIndicator.js';
+export { ActionBar } from './components/ActionBar/ActionBar.js';
+export { FilterPanel } from './components/FilterPanel/FilterPanel.js';
+export { FilterPanelCheckbox } from './components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.js';
+export { FilterPanelLabel } from './components/FilterPanel/FilterPanelLabel/FilterPanelLabel.js';

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

@@ -34,13 +34,19 @@ var _excluded = ["actions", "className", "maxVisible", "menuOptionsClass", "onWi
 var blockClass = "".concat(settings.pkg.prefix, "--action-bar");
 var componentName = 'ActionBar';
 
+// Default values for props
+var defaults = {
+  actions: Object.freeze([])
+};
+
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
 /**
  * The ActionBar is used internally by the PageHeader to wrap ActionBarItems.
  */
-var ActionBar = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
-  var actions = _ref.actions,
+exports.ActionBar = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
+  var _ref$actions = _ref.actions,
+    actions = _ref$actions === void 0 ? defaults.actions : _ref$actions,
     className = _ref.className,
     maxVisible = _ref.maxVisible,
     menuOptionsClass = _ref.menuOptionsClass,
@@ -197,8 +203,9 @@ var ActionBar = /*#__PURE__*/React__default["default"].forwardRef(function (_ref
     className: cx__default["default"](["".concat(blockClass, "__displayed-items"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__displayed-items--right"), rightAlign)])
   }, displayedItems));
 });
-ActionBar.displayName = componentName;
-ActionBar.propTypes = {
+exports.ActionBar = settings.pkg.checkComponentEnabled(exports.ActionBar, componentName);
+exports.ActionBar.displayName = componentName;
+exports.ActionBar.propTypes = {
   /**
    * Specifies the action bar items. Each item is specified as an object
    * with required fields: key for array rendering, renderIcon, iconDescription and
@@ -252,5 +259,3 @@ ActionBar.propTypes = {
    */
   rightAlign: index["default"].bool
 };
-
-exports.ActionBar = ActionBar;

package/lib/components/CreateTearsheet/CreateTearsheetDivider.d.ts

@@ -1,2 +1,13 @@
-export let CreateTearsheetDivider: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+/**
+ * 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 from 'react';
+interface CreateTearsheetDividerProps {
+    /** Specifies an optional className to be added to the tearsheet divider */
+    className?: string;
+}
+export declare let CreateTearsheetDivider: React.FC<CreateTearsheetDividerProps>;
+export {};

package/lib/components/CreateTearsheet/CreateTearsheetDivider.js

@@ -36,7 +36,7 @@ exports.CreateTearsheetDivider = /*#__PURE__*/React.forwardRef(function (_ref, r
 exports.CreateTearsheetDivider = settings.pkg.checkComponentEnabled(exports.CreateTearsheetDivider, componentName);
 exports.CreateTearsheetDivider.propTypes = {
   /**
-   * Sets an optional className to be added to the tearsheet step
+   * Sets an optional className to be added to the tearsheet divider
    */
   className: index["default"].string
 };