@carbon/ibm-products 2.39.0 → 2.40.1-canary.10

package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js

@@ -68,6 +68,11 @@ var DataSpreadsheetHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       var scrollContainer = ref === null || ref === void 0 || (_current = ref.current) === null || _current === void 0 ? void 0 : _current.querySelector(".".concat(blockClass, "__list--container"));
       var hasScrollBar = (scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollHeight) && (scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.clientHeight) && (scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollHeight) > (scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.clientHeight);
       var scrollBarValue = hasScrollBar ? 0 : scrollBarSize;
+
+      // fix for a11y violation element_scrollable_tabbable
+      if (!(scrollContainer !== null && scrollContainer !== void 0 && scrollContainer.getAttribute('tabIndex'))) {
+        scrollContainer === null || scrollContainer === void 0 || scrollContainer.setAttribute('tabIndex', '0');
+      }
       setScrollBarSizeValue(scrollBarValue);
     }
   }, [cellSize, ref, scrollBarSize, previousState === null || previousState === void 0 ? void 0 : previousState.cellSize]);

package/lib/components/Datagrid/Datagrid/DatagridContent.js

@@ -96,7 +96,7 @@ var DatagridContent = function DatagridContent(_ref) {
   var renderTable = function renderTable() {
     var _getTableProps;
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(react.Table, _rollupPluginBabelHelpers["extends"]({}, getTableProps(), {
-      className: cx__default["default"](withVirtualScroll ? '' : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__table-grid-active"), gridActive), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__table-is-resizing"), typeof (columnResizing === null || columnResizing === void 0 ? void 0 : columnResizing.isResizingColumn) === 'string'), (_getTableProps = getTableProps()) === null || _getTableProps === void 0 ? void 0 : _getTableProps.className),
+      className: cx__default["default"](withVirtualScroll ? "".concat(blockClass, "__table-virtual-scroll") : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__table-grid-active"), gridActive), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__table-is-resizing"), typeof (columnResizing === null || columnResizing === void 0 ? void 0 : columnResizing.isResizingColumn) === 'string'), (_getTableProps = getTableProps()) === null || _getTableProps === void 0 ? void 0 : _getTableProps.className),
       role: withInlineEdit ? 'grid' : undefined,
       tabIndex: withInlineEdit ? 0 : -1,
       onKeyDown: /* istanbul ignore next */
@@ -115,7 +115,7 @@ var DatagridContent = function DatagridContent(_ref) {
         return handleGridFocus.handleGridFocus(inlineEditState, dispatch);
       },
       title: title
-    }), !withVirtualScroll && /*#__PURE__*/React__default["default"].createElement(DatagridHead["default"], datagridState), /*#__PURE__*/React__default["default"].createElement(DatagridBody["default"], _rollupPluginBabelHelpers["extends"]({}, datagridState, {
+    }), (!withVirtualScroll || withVirtualScroll && !isFetching && !contentRows.length) && /*#__PURE__*/React__default["default"].createElement(DatagridHead["default"], datagridState), /*#__PURE__*/React__default["default"].createElement(DatagridBody["default"], _rollupPluginBabelHelpers["extends"]({}, datagridState, {
       rows: contentRows
     }))), (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && renderPagination());
   };

package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js

@@ -29,7 +29,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var _th;
 var _excluded = ["role"],
   _excluded2 = ["className", "role"],
-  _excluded3 = ["role", "className"];
+  _excluded3 = ["role"];
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
 var getAccessibilityProps = function getAccessibilityProps(header) {
   var props = {};
@@ -185,11 +185,10 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
     var originalCol = visibleColumns[index];
     var _header$getHeaderProp = header.getHeaderProps();
       _header$getHeaderProp.role;
-      var headerClassName = _header$getHeaderProp.className,
-      headerProps = _rollupPluginBabelHelpers.objectWithoutProperties(_header$getHeaderProp, _excluded3);
+      var headerProps = _rollupPluginBabelHelpers.objectWithoutProperties(_header$getHeaderProp, _excluded3);
     var resizerProps = header === null || header === void 0 || (_header$getResizerPro = header.getResizerProps) === null || _header$getResizerPro === void 0 ? void 0 : _header$getResizerPro.call(header);
     return /*#__PURE__*/React__default["default"].createElement(react.TableHeader, _rollupPluginBabelHelpers["extends"]({}, headerProps, {
-      className: cx__default["default"](headerClassName, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__resizableColumn"), resizerProps), "".concat(blockClass, "__isResizing"), header.isResizing), "".concat(blockClass, "__sortableColumn"), datagridState.isTableSortable && header.id !== 'spacer'), "".concat(blockClass, "__isSorted"), header.isSorted), "".concat(blockClass, "__header-actions-column"), header.isAction), "".concat(blockClass, "__with-slug"), header.slug && /*#__PURE__*/React__default["default"].isValidElement(header.slug))),
+      className: cx__default["default"](header.className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__resizableColumn"), resizerProps), "".concat(blockClass, "__isResizing"), header.isResizing), "".concat(blockClass, "__sortableColumn"), datagridState.isTableSortable && header.id !== 'spacer'), "".concat(blockClass, "__isSorted"), header.isSorted), "".concat(blockClass, "__header-actions-column"), header.isAction), "".concat(blockClass, "__with-slug"), header.slug && /*#__PURE__*/React__default["default"].isValidElement(header.slug))),
       key: header.id,
       "aria-hidden": header.id === 'spacer' && 'true'
     }, getAccessibilityProps(header)), header.render('Header'), renderSlug(header.slug), resizerProps && !header.isAction && /*#__PURE__*/React__default["default"].createElement(ResizeHeader, {

package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js

@@ -47,7 +47,8 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
     page = datagridState.page,
     handleResize = datagridState.handleResize,
     gridRef = datagridState.gridRef,
-    tableId = datagridState.tableId;
+    tableId = datagridState.tableId,
+    onVirtualScroll = datagridState.onVirtualScroll;
 
   /* istanbul ignore next */
   var handleVirtualGridResize = function handleVirtualGridResize() {
@@ -97,6 +98,9 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
     },
     estimatedItemSize: rowHeight,
     onScroll: onScroll,
+    onItemsRendered: function onItemsRendered(e) {
+      return onVirtualScroll === null || onVirtualScroll === void 0 ? void 0 : onVirtualScroll(e);
+    },
     innerRef: innerListRef,
     outerRef: testRef,
     ref: listRef,

package/lib/components/ExpressiveCard/ExpressiveCard.d.ts

@@ -1,4 +1,5 @@
 import React, { PropsWithChildren, ReactNode } from 'react';
+import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
 type ActionIcon = {
     id?: string;
     icon?: () => void | object;
@@ -50,7 +51,7 @@ interface ExpressiveCardProps extends PropsWithChildren {
     /**
      * Provides the icon that's displayed at the top of the card
      */
-    pictogram?: () => void | object;
+    pictogram?: CarbonIconType;
     /**
      * Optionally specify an href for your Button to become an <a> element
      */

package/lib/components/Guidebanner/Guidebanner.d.ts

@@ -1,6 +1,66 @@
+/**
+ * Copyright IBM Corp. 2023, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { ReactNode } from 'react';
+interface GuidebannerProps {
+    /**
+     * Provide the contents of the Guidebanner.
+     * One or more GuidebannerElement components are required.
+     */
+    children: ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * Tooltip text and aria label for the Close button icon.
+     */
+    closeIconDescription?: string;
+    /**
+     * Text label for the Collapse button.
+     */
+    collapseButtonLabel?: string;
+    /**
+     * When true, the Guidebanner will initialize in a collapsed state,
+     * showing the title and the Expand button.
+     *
+     * When expanded, it will show the GuidebannerElement child components and the Collapse button.
+     */
+    collapsible?: boolean;
+    /**
+     * Text label for the Expand button.
+     */
+    expandButtonLabel?: string;
+    /**
+     * Tooltip text and aria label for the Next button icon.
+     */
+    nextIconDescription?: string;
+    /**
+     * If defined, a Close button will render in the top-right corner and a
+     * callback function will be triggered when button is clicked.
+     */
+    onClose?: () => void;
+    /**
+     * Tooltip text and aria label for the Back button icon.
+     */
+    previousIconDescription?: string;
+    /**
+     * Title text.
+     */
+    title: string;
+    /**
+     * If true, insert 1 rem of "space" on the left of the component.
+     * This will allow the component's content to line up with other
+     * content on the page under special circumstances.
+     */
+    withLeftGutter?: boolean;
+}
 /**
  * The guide banner sits at the top of a page, or page-level tab,
  * to introduce foundational concepts related to the page's content.
  */
-export let Guidebanner: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let Guidebanner: React.ForwardRefExoticComponent<GuidebannerProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/Guidebanner/Guidebanner.js

@@ -66,8 +66,8 @@ exports.Guidebanner = /*#__PURE__*/React__default["default"].forwardRef(function
     previousIconDescription = _ref$previousIconDesc === void 0 ? defaults.previousIconDescription : _ref$previousIconDesc,
     title = _ref.title,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var scrollRef = React.useRef();
-  var toggleRef = React.useRef();
+  var scrollRef = React.useRef(null);
+  var toggleRef = React.useRef(null);
   var _useState = React.useState(0),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     scrollPosition = _useState2[0],
@@ -86,6 +86,7 @@ exports.Guidebanner = /*#__PURE__*/React__default["default"].forwardRef(function
     });
   };
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
+    "aria-expanded": !isCollapsed,
     className: cx__default["default"](blockClass, className, collapsible && "".concat(blockClass, "__collapsible"), isCollapsed && "".concat(blockClass, "__collapsible-collapsed"), withLeftGutter && "".concat(blockClass, "__with-left-gutter")),
     ref: ref
   }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React__default["default"].createElement(icons.Idea, {
@@ -116,8 +117,7 @@ exports.Guidebanner = /*#__PURE__*/React__default["default"].forwardRef(function
     size: "md",
     className: "".concat(blockClass, "__toggle-button"),
     onClick: handleClickToggle,
-    ref: toggleRef,
-    "aria-expanded": !isCollapsed
+    ref: toggleRef
   }, isCollapsed ? expandButtonLabel : collapseButtonLabel), showNavigation && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
     className: cx__default["default"]("".concat(blockClass, "__back-button"), [scrollPosition === 0 ? "".concat(blockClass, "__back-button--disabled") : null])
   }, /*#__PURE__*/React__default["default"].createElement(react.IconButton, {
@@ -181,9 +181,10 @@ exports.Guidebanner.propTypes = {
     React__default["default"].Children.forEach(prop, function (child) {
       if (child.type.displayName !== 'GuidebannerElement') {
         var _child$type, _child$type2;
-        // If not GuidebannerElement, then show:
-        // React component name(child.type?.name) or
-        // HTML element name(child.type).
+        // If child element is not `GuidebannerElement`, then show:
+        // Carbon Products component's `displayName` (child.type.displayName) or
+        // React component's `name` (child.type.name) or
+        // HTML element's tag name (child.type).
         error = new Error("`Guidebanner` only accepts children of type `GuidebannerElement`, found `".concat(((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) || ((_child$type2 = child.type) === null || _child$type2 === void 0 ? void 0 : _child$type2.name) || child.type, "` instead."));
       }
     });

package/lib/components/Guidebanner/GuidebannerElement.d.ts

@@ -1,19 +1,32 @@
-export function GuidebannerElement({ button, className, description, title, ...rest }: {
-    [x: string]: any;
-    button: any;
-    className: any;
-    description: any;
-    title: any;
-}): import("react/jsx-runtime").JSX.Element;
-export namespace GuidebannerElement {
-    export { componentName as displayName };
-    export namespace propTypes {
-        let button: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        let className: PropTypes.Requireable<string>;
-        let description: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactNodeLike>>>;
-        let title: PropTypes.Requireable<string>;
-    }
+/**
+ * Copyright IBM Corp. 2023, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { ReactNode } from 'react';
+interface GuidebannerElementProps {
+    /**
+     * An optional button can be rendered below the description.
+     * This can be a link, button, Coachmark button, etc.
+     */
+    button?: ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * The description of the element.
+     */
+    description: ReactNode;
+    /**
+     * The title of the element.
+     */
+    title?: string;
 }
-declare const componentName: "GuidebannerElement";
-import PropTypes from 'prop-types';
+/**
+ * The GuidebannerElement is a required child component of the Guidebanner,
+ * and acts as a container for a CarouselItem.
+ */
+export declare let GuidebannerElement: React.ForwardRefExoticComponent<GuidebannerElementProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/lib/components/Guidebanner/GuidebannerElement.js

@@ -26,19 +26,19 @@ var _excluded = ["button", "className", "description", "title"];
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--guidebanner__element");
 var componentName = 'GuidebannerElement';
-
 /**
  * The GuidebannerElement is a required child component of the Guidebanner,
  * and acts as a container for a CarouselItem.
  */
-exports.GuidebannerElement = function GuidebannerElement(_ref) {
+exports.GuidebannerElement = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var button = _ref.button,
     className = _ref.className,
     description = _ref.description,
     title = _ref.title,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
-    className: cx__default["default"](blockClass, className)
+    className: cx__default["default"](blockClass, className),
+    ref: ref
   }, devtools.getDevtoolsProps(componentName)), title && /*#__PURE__*/React__default["default"].createElement("h2", {
     className: "".concat(blockClass, "-title")
   }, title), description && /*#__PURE__*/React__default["default"].createElement("p", {
@@ -46,7 +46,7 @@ exports.GuidebannerElement = function GuidebannerElement(_ref) {
   }, description), button && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(blockClass, "-buttons")
   }, button));
-};
+});
 
 // Return a placeholder if not released and not enabled by feature flag
 exports.GuidebannerElement = settings.pkg.checkComponentEnabled(exports.GuidebannerElement, componentName);

package/lib/components/Guidebanner/GuidebannerElementButton.d.ts

@@ -1,17 +1,31 @@
-export function GuidebannerElementButton({ children, className, type, ...rest }: {
-    [x: string]: any;
-    children: any;
-    className: any;
-    type: any;
-}): import("react/jsx-runtime").JSX.Element;
-export namespace GuidebannerElementButton {
-    export { componentName as displayName };
-    export namespace propTypes {
-        let children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
-        let className: PropTypes.Requireable<string>;
-        let type: PropTypes.Requireable<string>;
-    }
+/**
+ * Copyright IBM Corp. 2023, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { ReactNode } from 'react';
+interface GuidebannerElementButtonProps {
+    /**
+     * Provide the contents of the GuidebannerElementLink.
+     */
+    children: ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * Provide a description for the icon.
+     */
+    iconDescription?: string;
+    /**
+     * If type is "primary", then return a tertiary button with the "crossroads" icon,
+     * else return a ghost button.
+     */
+    type?: string;
 }
-declare const componentName: "GuidebannerElementButton";
-import PropTypes from 'prop-types';
+/**
+ * One of two buttons styled specifically for the GuidebannerElement.
+ */
+export declare let GuidebannerElementButton: React.ForwardRefExoticComponent<GuidebannerElementButtonProps & React.RefAttributes<Button>>;
 export {};

package/lib/components/Guidebanner/GuidebannerElementButton.js

@@ -24,25 +24,31 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _Crossroads;
-var _excluded = ["children", "className", "type"];
+var _excluded = ["children", "className", "iconDescription", "type"];
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--guidebanner__element-button");
 var componentName = 'GuidebannerElementButton';
+var defaults = {
+  iconDescription: 'Crossroads'
+};
 
 /**
  * One of two buttons styled specifically for the GuidebannerElement.
  */
-exports.GuidebannerElementButton = function GuidebannerElementButton(_ref) {
+exports.GuidebannerElementButton = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
+    _ref$iconDescription = _ref.iconDescription,
+    iconDescription = _ref$iconDescription === void 0 ? defaults.iconDescription : _ref$iconDescription,
     type = _ref.type,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   if (type === 'primary') {
     return /*#__PURE__*/React__default["default"].createElement(react.Button, _rollupPluginBabelHelpers["extends"]({}, rest, {
       className: cx__default["default"](blockClass, className),
-      iconDescription: 'Crossroads',
+      iconDescription: iconDescription,
       kind: "tertiary",
+      ref: ref,
       renderIcon: function renderIcon() {
         return _Crossroads || (_Crossroads = /*#__PURE__*/React__default["default"].createElement(icons.Crossroads, {
           size: 16
@@ -58,7 +64,7 @@ exports.GuidebannerElementButton = function GuidebannerElementButton(_ref) {
     role: "button",
     size: "md"
   }, devtools.getDevtoolsProps(componentName)), children);
-};
+});
 
 // Return a placeholder if not released and not enabled by feature flag
 exports.GuidebannerElementButton = settings.pkg.checkComponentEnabled(exports.GuidebannerElementButton, componentName);

package/lib/components/Guidebanner/GuidebannerElementLink.d.ts

@@ -1,15 +1,22 @@
-export function GuidebannerElementLink({ children, className, ...rest }: {
-    [x: string]: any;
-    children: any;
-    className: any;
-}): import("react/jsx-runtime").JSX.Element;
-export namespace GuidebannerElementLink {
-    export { componentName as displayName };
-    export namespace propTypes {
-        let children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
-        let className: PropTypes.Requireable<string>;
-    }
+/**
+ * Copyright IBM Corp. 2023, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { ReactNode } from 'react';
+interface GuidebannerElementLinkProps {
+    /**
+     * Provide the contents of the GuidebannerElementLink.
+     */
+    children: ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
 }
-declare const componentName: "GuidebannerElementLink";
-import PropTypes from 'prop-types';
+/**
+ * A link styled specifically for the GuidebannerElement.
+ */
+export declare let GuidebannerElementLink: React.ForwardRefExoticComponent<GuidebannerElementLinkProps & React.RefAttributes<Link>>;
 export {};

package/lib/components/Guidebanner/GuidebannerElementLink.js

@@ -27,21 +27,21 @@ var _excluded = ["children", "className"];
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--guidebanner__element-link");
 var componentName = 'GuidebannerElementLink';
-
 /**
  * A link styled specifically for the GuidebannerElement.
  */
-exports.GuidebannerElementLink = function GuidebannerElementLink(_ref) {
+exports.GuidebannerElementLink = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React__default["default"].createElement(react.Link, _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: cx__default["default"](blockClass, className),
     kind: "ghost",
+    ref: ref,
     role: "link",
     size: "md"
   }, devtools.getDevtoolsProps(componentName)), children);
-};
+});
 
 // Return a placeholder if not released and not enabled by feature flag
 exports.GuidebannerElementLink = settings.pkg.checkComponentEnabled(exports.GuidebannerElementLink, componentName);

package/lib/components/InterstitialScreen/InterstitialScreen.js

@@ -223,6 +223,7 @@ exports.InterstitialScreen = /*#__PURE__*/React__default["default"].forwardRef(f
       className,
       // Apply any supplied class names to the main HTML element.
       variantClass, isVisibleClass),
+      role: "main",
       "aria-label": interstitialAriaLabel,
       ref: ref
     }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -248,7 +249,8 @@ exports.InterstitialScreen = /*#__PURE__*/React__default["default"].forwardRef(f
   var renderBody = function renderBody() {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: cx__default["default"]("".concat(blockClass, "--body")),
-      ref: bodyScrollRef
+      ref: bodyScrollRef,
+      tabIndex: 0
     }, mediaIsDefined ? /*#__PURE__*/React__default["default"].createElement(react.FlexGrid, {
       fullWidth: true,
       className: cx__default["default"]("".concat(blockClass, "--body-grid"))

package/lib/components/MultiAddSelect/MultiAddSelect.d.ts

@@ -1,5 +1,137 @@
+import React, { ReactNode } from 'react';
+type Filter = {
+    id?: string;
+    label?: string;
+};
+type Modifier = {
+    label?: string;
+    options?: string[];
+};
+interface Entry {
+    avatar?: {
+        alt?: string;
+        icon?: () => void;
+        src?: string;
+        theme?: 'light' | 'dark';
+    };
+    children?: ReactNode;
+    icon?: () => void;
+    id: string;
+    subtitle?: string;
+    title: string;
+    value: string;
+}
+type Theme = 'light' | 'dark';
+type ItemType = {
+    entries?: Entry[];
+    modifiers: Modifier;
+    sortBy: string[];
+    filterBy: string[];
+};
+interface MultiAddSelectProps {
+    /**
+     * optional class name
+     */
+    className?: string;
+    /**
+     * placeholder for column input filter
+     */
+    columnInputPlaceholder?: string;
+    /**
+     * text description that appears under the title
+     */
+    description?: string;
+    /**
+     * options to display in the global filter box. values are generated
+     * from the id which should correlate with a specific property in an
+     * item entry
+     */
+    globalFilters?: Filter[];
+    globalFiltersIconDescription?: string;
+    /**
+     * placeholder text for the global filter dropdown
+     */
+    globalFiltersPlaceholderText?: string;
+    /**
+     * text for the global filter primary button
+     */
+    globalFiltersPrimaryButtonText?: string;
+    /**
+     * text for the global filter secondary button
+     */
+    globalFiltersSecondaryButtonText?: string;
+    /**
+     * label for global search input
+     */
+    globalSearchLabel?: string;
+    /**
+     * placeholder for global search input
+     */
+    globalSearchPlaceholder?: string;
+    /**
+     * the theme for the empty state illustration
+     */
+    illustrationTheme?: Theme;
+    /**
+     * title that displays in the sidebar / influencer
+     */
+    influencerTitle?: string;
+    /**
+     * object that contains the item data. for more information reference the
+     * "Structuring items" section in the docs tab
+     */
+    items?: ItemType;
+    /**
+     * label that display above the list of items
+     */
+    itemsLabel?: string;
+    /**
+     * text to display when no results are found from the global search
+     */
+    noResultsDescription?: string;
+    /**
+     * title to display when no results are found from the global search
+     */
+    noResultsTitle?: string;
+    /**
+     * text body that displays in the sidebar when nothing is selected
+     */
+    noSelectionDescription?: string;
+    /**
+     * title that displays in the sidebar when nothing is selected
+     */
+    noSelectionTitle?: string;
+    /**
+     * function to call when the close button clicked
+     */
+    onClose?: () => void;
+    /**
+     * text for close button
+     */
+    onCloseButtonText?: string;
+    /**
+     * function to call when the submit button is clicked. returns a selection
+     */
+    onSubmit?: () => void;
+    /**
+     * text for the submit button
+     */
+    onSubmitButtonText?: string;
+    /**
+     * specifies if the component is open or not
+     */
+    open?: boolean;
+    /**
+     * text that displays when displaying filtered items
+     */
+    searchResultsTitle?: string;
+    /**
+     * header text
+     */
+    title?: string;
+}
 /**
  * Used to add or select multiple or more items from larger lists or hierarchies.
  */
-export let MultiAddSelect: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let MultiAddSelect: React.ForwardRefExoticComponent<MultiAddSelectProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/MultiAddSelect/MultiAddSelect.js

@@ -21,7 +21,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var componentName = 'MultiAddSelect';
-
 /**
  * Used to add or select multiple or more items from larger lists or hierarchies.
  */
@@ -50,6 +49,7 @@ exports.MultiAddSelect.propTypes = {
    * from the id which should correlate with a specific property in an
    * item entry
    */
+  /**@ts-ignore */
   globalFilters: index["default"].arrayOf(index["default"].shape({
     id: index["default"].string,
     label: index["default"].string
@@ -87,6 +87,7 @@ exports.MultiAddSelect.propTypes = {
    * object that contains the item data. for more information reference the
    * "Structuring items" section in the docs tab
    */
+  /**@ts-ignore */
   items: index["default"].shape({
     modifiers: index["default"].shape({
       label: index["default"].string,

package/lib/components/NotificationsPanel/NotificationsPanel.js

@@ -252,7 +252,6 @@ exports.NotificationsPanel = /*#__PURE__*/React__default["default"].forwardRef(f
     var notificationClassName = cx__default["default"](["".concat(blockClass, "__notification"), "".concat(blockClass, "__notification-").concat(group)]);
     var notificationHeaderClassName = cx__default["default"](["".concat(blockClass, "__notification-title"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__notification-title-unread"), notification.unread)]);
     return /*#__PURE__*/React__default["default"].createElement("div", {
-      "aria-label": notification.title,
       key: "".concat(notification.timestamp, "-").concat(notification.title, "-").concat(index),
       className: notificationClassName,
       role: "button",