@carbon/ibm-products 2.32.0 → 2.34.0

package/lib/components/StatusIcon/StatusIcon.js

@@ -35,298 +35,300 @@ _Status icons_ are an important method of communicating severity level
 information to users. The shapes and colors, communicate severity that enable
 users to quickly assess and identify status and respond accordingly.
  */
-exports.StatusIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+
+exports.StatusIcon = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   var _icons$kind;
-  var kind = _ref.kind,
-    theme = _ref.theme,
-    size = _ref.size,
-    className = _ref.className,
-    iconDescription = _ref.iconDescription,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var kind = _ref2.kind,
+    theme = _ref2.theme,
+    size = _ref2.size,
+    className = _ref2.className,
+    iconDescription = _ref2.iconDescription,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded);
+  var forwardedRef = ref;
   var icons$1 = {
     fatal: {
-      sm: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      sm: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.Misuse, _rollupPluginBabelHelpers["extends"]({
           size: 16,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      md: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      md: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.Misuse, _rollupPluginBabelHelpers["extends"]({
           size: 20,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      lg: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      lg: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.Misuse, _rollupPluginBabelHelpers["extends"]({
           size: 24,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      xl: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      xl: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.Misuse, _rollupPluginBabelHelpers["extends"]({
           size: 32,
-          ref: ref
+          ref: forwardedRef
         }, props));
       })
     },
     critical: {
-      sm: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      sm: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.ErrorFilled, _rollupPluginBabelHelpers["extends"]({
           size: 16,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      md: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      md: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.ErrorFilled, _rollupPluginBabelHelpers["extends"]({
           size: 20,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      lg: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      lg: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.ErrorFilled, _rollupPluginBabelHelpers["extends"]({
           size: 24,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      xl: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      xl: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.ErrorFilled, _rollupPluginBabelHelpers["extends"]({
           size: 32,
-          ref: ref
+          ref: forwardedRef
         }, props));
       })
     },
     'major-warning': {
-      sm: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      sm: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.WarningAltInvertedFilled, _rollupPluginBabelHelpers["extends"]({
           size: 16,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      md: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      md: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.WarningAltInvertedFilled, _rollupPluginBabelHelpers["extends"]({
           size: 20,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      lg: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      lg: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.WarningAltInvertedFilled, _rollupPluginBabelHelpers["extends"]({
           size: 24,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      xl: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      xl: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.WarningAltInvertedFilled, _rollupPluginBabelHelpers["extends"]({
           size: 32,
-          ref: ref
+          ref: forwardedRef
         }, props));
       })
     },
     'minor-warning': {
-      sm: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      sm: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.WarningAltFilled, _rollupPluginBabelHelpers["extends"]({
           size: 16,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      md: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      md: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.WarningAltFilled, _rollupPluginBabelHelpers["extends"]({
           size: 20,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      lg: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      lg: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.WarningAltFilled, _rollupPluginBabelHelpers["extends"]({
           size: 24,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      xl: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      xl: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.WarningAltFilled, _rollupPluginBabelHelpers["extends"]({
           size: 32,
-          ref: ref
+          ref: forwardedRef
         }, props));
       })
     },
     undefined: {
-      sm: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      sm: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.UndefinedFilled, _rollupPluginBabelHelpers["extends"]({
           size: 16,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      md: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      md: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.UndefinedFilled, _rollupPluginBabelHelpers["extends"]({
           size: 20,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      lg: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      lg: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.UndefinedFilled, _rollupPluginBabelHelpers["extends"]({
           size: 24,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      xl: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      xl: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.UndefinedFilled, _rollupPluginBabelHelpers["extends"]({
           size: 32,
-          ref: ref
+          ref: forwardedRef
         }, props));
       })
     },
     unknown: {
-      sm: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      sm: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.UnknownFilled, _rollupPluginBabelHelpers["extends"]({
           size: 16,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      md: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      md: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.UnknownFilled, _rollupPluginBabelHelpers["extends"]({
           size: 20,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      lg: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      lg: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.UnknownFilled, _rollupPluginBabelHelpers["extends"]({
           size: 24,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      xl: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      xl: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.UnknownFilled, _rollupPluginBabelHelpers["extends"]({
           size: 32,
-          ref: ref
+          ref: forwardedRef
         }, props));
       })
     },
     normal: {
-      sm: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      sm: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.CheckmarkFilled, _rollupPluginBabelHelpers["extends"]({
           size: 16,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      md: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      md: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.CheckmarkFilled, _rollupPluginBabelHelpers["extends"]({
           size: 20,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      lg: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      lg: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.CheckmarkFilled, _rollupPluginBabelHelpers["extends"]({
           size: 24,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      xl: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      xl: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.CheckmarkFilled, _rollupPluginBabelHelpers["extends"]({
           size: 32,
-          ref: ref
+          ref: forwardedRef
         }, props));
       })
     },
     info: {
-      sm: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      sm: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.InformationSquareFilled, _rollupPluginBabelHelpers["extends"]({
           size: 16,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      md: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      md: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.InformationSquareFilled, _rollupPluginBabelHelpers["extends"]({
           size: 20,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      lg: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      lg: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.InformationSquareFilled, _rollupPluginBabelHelpers["extends"]({
           size: 24,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      xl: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      xl: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.InformationSquareFilled, _rollupPluginBabelHelpers["extends"]({
           size: 32,
-          ref: ref
+          ref: forwardedRef
         }, props));
       })
     },
     'in-progress': {
-      sm: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      sm: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.InProgress, _rollupPluginBabelHelpers["extends"]({
           size: 16,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      md: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      md: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.InProgress, _rollupPluginBabelHelpers["extends"]({
           size: 20,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      lg: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      lg: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.InProgress, _rollupPluginBabelHelpers["extends"]({
           size: 24,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      xl: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      xl: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.InProgress, _rollupPluginBabelHelpers["extends"]({
           size: 32,
-          ref: ref
+          ref: forwardedRef
         }, props));
       })
     },
     running: {
-      sm: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      sm: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.CheckmarkOutline, _rollupPluginBabelHelpers["extends"]({
           size: 16,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      md: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      md: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.CheckmarkOutline, _rollupPluginBabelHelpers["extends"]({
           size: 20,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      lg: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      lg: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.CheckmarkOutline, _rollupPluginBabelHelpers["extends"]({
           size: 24,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      xl: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      xl: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.CheckmarkOutline, _rollupPluginBabelHelpers["extends"]({
           size: 32,
-          ref: ref
+          ref: forwardedRef
         }, props));
       })
     },
     pending: {
-      sm: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      sm: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.Pending, _rollupPluginBabelHelpers["extends"]({
           size: 16,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      md: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      md: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.Pending, _rollupPluginBabelHelpers["extends"]({
           size: 20,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      lg: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      lg: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.Pending, _rollupPluginBabelHelpers["extends"]({
           size: 24,
-          ref: ref
+          ref: forwardedRef
         }, props));
       }),
-      xl: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      xl: /*#__PURE__*/React.forwardRef(function (props, _ref) {
         return /*#__PURE__*/React__default["default"].createElement(icons.Pending, _rollupPluginBabelHelpers["extends"]({
           size: 32,
-          ref: ref
+          ref: forwardedRef
         }, props));
       })
     }

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/TruncatedList/TruncatedList.js

@@ -97,9 +97,11 @@ exports.TruncatedList = /*#__PURE__*/React__default["default"].forwardRef(functi
       var items = listRef.current.childNodes;
       var _listHeight = 0;
       for (var index = 0; index < numItemsToShow; 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;
-        _listHeight += parseInt(height);
+        if (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;
+          _listHeight += parseInt(height);
+        }
       }
       setListHeight(_listHeight);
     }

package/lib/components/UserAvatar/UserAvatar.js

@@ -123,7 +123,8 @@ exports.UserAvatar = /*#__PURE__*/React__default["default"].forwardRef(function
         // example: [`${blockClass}__here-if-small`]: size === 'sm',
       }),
       ref: ref,
-      role: "img"
+      role: "img",
+      "aria-hidden": "true"
     }, devtools.getDevtoolsProps(componentName)), getItem());
   };
   if (tooltipText) {
@@ -150,7 +151,7 @@ exports.UserAvatar.propTypes = {
   /**
    * Provide the background color need to be set for UserAvatar.
    */
-  backgroundColor: index["default"].oneOf(['light-cyan', 'dark-cyan']),
+  backgroundColor: index["default"].oneOf(['order-1-cyan', 'order-2-gray', 'order-3-green', 'order-4-magenta', 'order-5-purple', 'order-6-teal', 'order-7-cyan', 'order-8-gray', 'order-9-green', 'order-10-magenta', 'order-11-purple', 'order-12-teal']),
   /**
    * Provide an optional class to be applied to the containing node.
    */

package/lib/components/index.d.ts

@@ -44,13 +44,14 @@ 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 { ScrollGradient } from "./ScrollGradient";
 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 +64,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, FilterPanelAccordion, FilterPanelAccordionItem, FilterPanelCheckbox, FilterPanelCheckboxWithOverflow, FilterPanelGroup, 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

@@ -80,9 +80,18 @@ declare namespace defaults {
         let TruncatedList: boolean;
         let DelimitedList: boolean;
         let FullPageError: boolean;
+        let ScrollGradient: boolean;
         let StringFormatter: boolean;
         let StatusIndicator: boolean;
         let StatusIndicatorStep: boolean;
+        let ActionBar: boolean;
+        let FilterPanel: boolean;
+        let FilterPanelAccordion: boolean;
+        let FilterPanelAccordionItem: boolean;
+        let FilterPanelCheckbox: boolean;
+        let FilterPanelCheckboxWithOverflow: boolean;
+        let FilterPanelGroup: boolean;
+        let FilterPanelLabel: boolean;
         let Coachmark: boolean;
         let CoachmarkBeacon: boolean;
         let CoachmarkButton: boolean;
@@ -95,6 +104,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

@@ -83,9 +83,18 @@ var defaults = {
     TruncatedList: false,
     DelimitedList: false,
     FullPageError: false,
+    ScrollGradient: false,
     StringFormatter: false,
     StatusIndicator: false,
     StatusIndicatorStep: false,
+    ActionBar: false,
+    FilterPanel: false,
+    FilterPanelAccordion: false,
+    FilterPanelAccordionItem: false,
+    FilterPanelCheckbox: false,
+    FilterPanelCheckboxWithOverflow: false,
+    FilterPanelGroup: false,
+    FilterPanelLabel: false,
     /* new component flags here - comment used by generate CLI */
 
     // Novice to pro components not yet reviewed and released:
@@ -101,6 +110,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 */