@carbon/ibm-products 2.38.0-alpha.5 → 2.39.0

package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js

@@ -21,6 +21,7 @@ var handleHeaderCellSelection = require('./utils/handleHeaderCellSelection.js');
 var selectAllCells = require('./utils/selectAllCells.js');
 var getSpreadsheetWidth = require('./utils/getSpreadsheetWidth.js');
 var checkForHoldingKey = require('./utils/checkForHoldingKey.js');
+var propsHelper = require('../../global/js/utils/props-helper.js');
 var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
 var useSpreadsheetMouseMove = require('./hooks/useSpreadsheetMouseMove.js');
 
@@ -60,12 +61,12 @@ var DataSpreadsheetHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     setSelectedHeaderReorderActive = _useState4[1];
   var previousState = usePreviousValue.usePreviousValue({
     cellSize: cellSize
-  });
+  }) || {};
   React.useEffect(function () {
     if ((previousState === null || previousState === void 0 ? void 0 : previousState.cellSize) !== cellSize) {
-      var _ref$current;
-      var scrollContainer = ref === null || ref === void 0 || (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$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);
+      var _current;
+      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;
       setScrollBarSizeValue(scrollBarValue);
     }
@@ -79,15 +80,16 @@ var DataSpreadsheetHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         activeCellCoordinates: activeCellCoordinates,
         rows: rows,
         columns: columns,
+        currentMatcher: currentMatcher,
         setActiveCellCoordinates: setActiveCellCoordinates,
         setCurrentMatcher: setCurrentMatcher,
         setSelectionAreas: setSelectionAreas,
         spreadsheetRef: ref,
         index: index,
+        isKeyboard: undefined,
         setSelectionAreaData: setSelectionAreaData,
         isHoldingCommandKey: isHoldingCommandKey,
-        isHoldingShiftKey: isHoldingShiftKey,
-        currentMatcher: currentMatcher
+        isHoldingShiftKey: isHoldingShiftKey
       });
     };
   };
@@ -104,34 +106,36 @@ var DataSpreadsheetHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   };
   var handleHeaderMouseDown = function handleHeaderMouseDown(index) {
     return function (event) {
-      var _selectionAreaToClone;
+      var _selectionAreaToClone, _selectionAreaToClone2, _selectionAreaToClone3, _document;
       if (event.shiftKey) {
         // Remove columns, need to call handleHeaderCellSelection
         return;
       }
       setSelectedHeaderReorderActive(true);
-      var selectionAreaToClone = selectionAreas.filter(function (item) {
+      var selectionAreaToClone = selectionAreas === null || selectionAreas === void 0 ? void 0 : selectionAreas.filter(function (item) {
         return (item === null || item === void 0 ? void 0 : item.matcher) === currentMatcher;
       });
-      var selectionAreaElement = ref.current.querySelector("[data-matcher-id=\"".concat((_selectionAreaToClone = selectionAreaToClone[0]) === null || _selectionAreaToClone === void 0 ? void 0 : _selectionAreaToClone.matcher, "\"]"));
+      var selectionAreaElement = ref.current.querySelector("[data-matcher-id=\"".concat(selectionAreaToClone === null || selectionAreaToClone === void 0 || (_selectionAreaToClone = selectionAreaToClone[0]) === null || _selectionAreaToClone === void 0 ? void 0 : _selectionAreaToClone.matcher, "\"]"));
       var clickXPosition = event.clientX;
       var headerButtonCoords = event.target.getBoundingClientRect();
       var headerIndex = event.target.getAttribute('data-column-index');
       var offsetXValue = clickXPosition - headerButtonCoords.left;
-      var lowestColumnIndexFromSelectionArea = Math.min(selectionAreaToClone[0].point1.column, selectionAreaToClone[0].point2.column);
-      var selectionAreaCoords = selectionAreaElement.getBoundingClientRect();
-      var updatedOffsetDifference = lowestColumnIndexFromSelectionArea < parseInt(headerIndex) ? offsetXValue + (headerButtonCoords.left - selectionAreaCoords.left) : offsetXValue;
-      var bodyContainer = document.querySelector(".".concat(blockClass, "__list--container")).firstElementChild;
-      var selectionAreaClonedElement = selectionAreaElement.cloneNode();
-      var reorderIndicatorLine = selectionAreaElement.cloneNode();
-      reorderIndicatorLine.className = "".concat(blockClass, "__reorder-indicator-line");
-      reorderIndicatorLine.style.width = layout.px(2);
+      var lowestColumnIndexFromSelectionArea = Math.min((selectionAreaToClone === null || selectionAreaToClone === void 0 || (_selectionAreaToClone2 = selectionAreaToClone[0]) === null || _selectionAreaToClone2 === void 0 || (_selectionAreaToClone2 = _selectionAreaToClone2.point1) === null || _selectionAreaToClone2 === void 0 ? void 0 : _selectionAreaToClone2.column) || 0, (selectionAreaToClone === null || selectionAreaToClone === void 0 || (_selectionAreaToClone3 = selectionAreaToClone[0]) === null || _selectionAreaToClone3 === void 0 || (_selectionAreaToClone3 = _selectionAreaToClone3.point2) === null || _selectionAreaToClone3 === void 0 ? void 0 : _selectionAreaToClone3.column) || 0);
+      var selectionAreaCoords = (selectionAreaElement === null || selectionAreaElement === void 0 ? void 0 : selectionAreaElement.getBoundingClientRect()) || new DOMRect();
+      var updatedOffsetDifference = lowestColumnIndexFromSelectionArea < parseInt(headerIndex) ? offsetXValue + (headerButtonCoords.left - (selectionAreaCoords === null || selectionAreaCoords === void 0 ? void 0 : selectionAreaCoords.left)) : offsetXValue;
+      var bodyContainer = (_document = document) === null || _document === void 0 || (_document = _document.querySelector(".".concat(blockClass, "__list--container"))) === null || _document === void 0 ? void 0 : _document.firstElementChild;
+      var selectionAreaClonedElement = selectionAreaElement === null || selectionAreaElement === void 0 ? void 0 : selectionAreaElement.cloneNode();
+      var reorderIndicatorLine = selectionAreaElement === null || selectionAreaElement === void 0 ? void 0 : selectionAreaElement.cloneNode();
+      if (reorderIndicatorLine) {
+        reorderIndicatorLine.className = "".concat(blockClass, "__reorder-indicator-line");
+        reorderIndicatorLine.style.width = layout.px(2);
+      }
       selectionAreaClonedElement.classList.add("".concat(blockClass, "__selection-area--element-cloned"));
-      selectionAreaClonedElement.setAttribute('data-clone-offset-x', updatedOffsetDifference);
+      selectionAreaClonedElement.setAttribute('data-clone-offset-x', "".concat(updatedOffsetDifference));
       selectionAreaClonedElement.setAttribute('data-column-index-original', index);
-      bodyContainer.appendChild(selectionAreaClonedElement);
-      bodyContainer.appendChild(reorderIndicatorLine);
-      setHeaderCellHoldActive(true);
+      bodyContainer === null || bodyContainer === void 0 || bodyContainer.appendChild(selectionAreaClonedElement);
+      bodyContainer === null || bodyContainer === void 0 || bodyContainer.appendChild(reorderIndicatorLine);
+      setHeaderCellHoldActive === null || setHeaderCellHoldActive === void 0 || setHeaderCellHoldActive(true);
     };
   };
   useSpreadsheetMouseMove.useSpreadsheetMouseMove({
@@ -142,10 +146,11 @@ var DataSpreadsheetHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: cx__default["default"]("".concat(blockClass, "__header--container")),
     role: "rowgroup"
-  }, headerGroups.map(function (headerGroup, index) {
+  }, headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.map(function (headerGroup, index) {
+    var headerProps = propsHelper.prepareProps(headerGroup.getHeaderGroupProps(), 'key');
     return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
       key: "header_".concat(index)
-    }, headerGroup.getHeaderGroupProps(), {
+    }, headerProps, {
       style: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, headerGroup.getHeaderGroupProps().style), {}, {
         width: getSpreadsheetWidth.getSpreadsheetWidth({
           type: 'header',
@@ -153,6 +158,7 @@ var DataSpreadsheetHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           scrollBarSizeValue: scrollBarSizeValue,
           totalVisibleColumns: totalVisibleColumns,
           defaultColumn: defaultColumn,
+          totalColumnsWidth: undefined,
           visibleColumns: visibleColumns
         }),
         overflow: 'hidden'
@@ -175,21 +181,22 @@ var DataSpreadsheetHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       onClick: handleSelectAllClick,
       className: cx__default["default"]("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element"), "".concat(blockClass, "__th--select-all"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header' && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header'))
     }, "\xA0")), headerGroup.headers.map(function (column, index) {
+      var colProps = propsHelper.prepareProps(column.getHeaderProps(), 'key');
       var selectedHeader = checkSelectedHeaderCell.checkSelectedHeaderCell(index, selectionAreas, 'column', rows);
       return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
         key: "column_".concat(index),
         role: "columnheader",
         className: "".concat(blockClass, "__columnheader")
-      }, column.getHeaderProps()), /*#__PURE__*/React__default["default"].createElement("button", {
+      }, colProps), /*#__PURE__*/React__default["default"].createElement("button", {
         id: "".concat(blockClass, "__cell--header--").concat(index),
         "data-row-index": "header",
         "data-column-index": index,
         tabIndex: -1,
-        onMouseDown: selectedHeader ? handleHeaderMouseDown(index) : null,
+        onMouseDown: selectedHeader ? handleHeaderMouseDown(index) : undefined,
         onMouseUp: selectedHeader ? function () {
           return setSelectedHeaderReorderActive(false);
-        } : null,
-        onClick: !selectedHeader ? handleColumnHeaderClick(index) : null,
+        } : undefined,
+        onClick: !selectedHeader ? handleColumnHeaderClick(index) : undefined,
         style: {
           height: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight,
           width: (column === null || column === void 0 ? void 0 : column.width) || (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.width)
@@ -204,6 +211,7 @@ DataSpreadsheetHeader.propTypes = {
   /**
    * Object containing the active cell coordinates
    */
+  /**@ts-ignore */
   activeCellCoordinates: index["default"].shape({
     row: index["default"].oneOfType([index["default"].number, index["default"].string]),
     column: index["default"].oneOfType([index["default"].number, index["default"].string])
@@ -223,6 +231,7 @@ DataSpreadsheetHeader.propTypes = {
   /**
    * Default spreadsheet sizing values
    */
+  /**@ts-ignore */
   defaultColumn: index["default"].shape({
     rowHeight: index["default"].number,
     rowHeaderWidth: index["default"].number,
@@ -239,6 +248,7 @@ DataSpreadsheetHeader.propTypes = {
   /**
    * All of the spreadsheet row data
    */
+  /**@ts-ignore */
   rows: index["default"].arrayOf(index["default"].object),
   /**
    * The scrollbar width
@@ -251,6 +261,7 @@ DataSpreadsheetHeader.propTypes = {
   /**
    * All of the cell selection area items
    */
+  /**@ts-ignore */
   selectionAreas: index["default"].arrayOf(index["default"].object),
   /**
    * Setter fn for activeCellCoordinates value
@@ -284,6 +295,7 @@ DataSpreadsheetHeader.propTypes = {
   /**
    * Array of visible columns provided by react-table useTable hook
    */
+  /**@ts-ignore */
   visibleColumns: index["default"].array
 };
 

package/lib/components/DataSpreadsheet/hooks/useMoveActiveCell.js

@@ -19,12 +19,13 @@ var useMoveActiveCell = function useMoveActiveCell(_ref) {
     createActiveCell = _ref.createActiveCell,
     activeCellContent = _ref.activeCellContent,
     isActiveHeaderCellChanged = _ref.isActiveHeaderCellChanged;
+  var performCreateActiveCell;
   //new active cell is created when the activeCellContent changes or navigate through headers
   // Otherwise new active cell will display the old value in a glance
   React.useEffect(function () {
     performCreateActiveCell();
   }, [activeCellContent, performCreateActiveCell, isActiveHeaderCellChanged]);
-  var performCreateActiveCell = React.useCallback(function () {
+  performCreateActiveCell = React.useCallback(function () {
     var activeCellPlacementElement = spreadsheetRef === null || spreadsheetRef === void 0 ? void 0 : spreadsheetRef.current.querySelector("[data-row-index=\"".concat(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, "\"][data-column-index=\"").concat(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column, "\"]"));
     var shouldPlaceActiveCellInHeader = (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header' && true;
     var selectAllElement = spreadsheetRef === null || spreadsheetRef === void 0 ? void 0 : spreadsheetRef.current.querySelector("[data-row-index=\"header\"][data-column-index=\"header\"]");

package/lib/components/DataSpreadsheet/types/index.d.ts

@@ -0,0 +1,30 @@
+export type Size = 'xs' | 'sm' | 'md' | 'lg';
+export type Theme = 'light' | 'dark';
+export interface Column {
+    Header?: string;
+    accessor?: string | (() => void);
+    Cell?: () => void;
+    rowHeight?: number;
+    rowHeaderWidth?: number;
+    width?: number;
+}
+export interface ActiveCellCoordinates {
+    row?: number | string;
+    column?: number | string;
+}
+export interface PrevState {
+    activeCellCoordinates?: ActiveCellCoordinates;
+    isEditing?: boolean;
+    selectionAreaData?: object[];
+    clickAndHoldActive?: boolean;
+    rowHeight?: number;
+    cellSize?: Size;
+}
+export interface Point {
+    column?: number;
+}
+export interface ItemType {
+    matcher?: string;
+    point1?: Point;
+    point2?: Point;
+}

package/lib/components/EditTearsheetNarrow/EditTearsheetNarrow.d.ts

@@ -1,5 +1,22 @@
+/**
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { ReactNode } from 'react';
+interface EditTearsheetNarrowProps {
+    /**
+     * Provide the contents of the EditTearsheetNarrow.
+     */
+    children: ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+}
 /**
  * Use a narrow tearsheet as an alternative to a modal when there is scrolling. See usage guidance for further information.
  */
-export let EditTearsheetNarrow: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let EditTearsheetNarrow: React.ForwardRefExoticComponent<EditTearsheetNarrowProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/GetStartedCard/GetStartedCard.d.ts

@@ -0,0 +1,5 @@
+/**
+ * GetStartedCard a card with icon, number, and media variants
+ */
+export let GetStartedCard: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';

package/lib/components/GetStartedCard/GetStartedCard.js

@@ -0,0 +1,88 @@
+/**
+ * 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 devtools = require('../../global/js/utils/devtools.js');
+var settings = require('../../settings.js');
+var Card = require('../Card/Card.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var componentName = 'GetStartedCard';
+
+/**
+ * GetStartedCard a card with icon, number, and media variants
+ */
+exports.GetStartedCard = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
+  var rest = _rollupPluginBabelHelpers["extends"]({}, (_rollupPluginBabelHelpers.objectDestructuringEmpty(_ref), _ref));
+  return /*#__PURE__*/React__default["default"].createElement(Card.Card, _rollupPluginBabelHelpers["extends"]({
+    getStarted: true,
+    ref: ref
+  }, rest, devtools.getDevtoolsProps(componentName)));
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+exports.GetStartedCard = settings.pkg.checkComponentEnabled(exports.GetStartedCard, componentName);
+exports.GetStartedCard.displayName = componentName;
+exports.GetStartedCard.propTypes = {
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: index["default"].string,
+  /**
+   * Optional if the card should be disabled
+   */
+  disabled: index["default"].bool,
+  /**
+   * Provides the action icon that's displayed at the footer of the card
+   */
+  footerActionIcon: index["default"].oneOfType([index["default"].func, index["default"].object]),
+  /**
+   * Optional label for the top of the card
+   */
+  label: index["default"].oneOfType([index["default"].string, index["default"].object, index["default"].node]),
+  /**
+   * Optional media content like an image to be placed in the card
+   */
+  media: index["default"].node,
+  /**
+   * Icons that are displayed on the card showing the time and skill needed
+   */
+  metadata: index["default"].arrayOf(index["default"].shape({
+    id: index["default"].string,
+    icon: index["default"].oneOfType([index["default"].func, index["default"].object]),
+    iconDescription: index["default"].string
+  })),
+  /**
+   * Provides the callback for a clickable card
+   */
+  onClick: index["default"].func.isRequired,
+  /**
+   * Provides the icon that's displayed at the top of the card
+   */
+  pictogram: index["default"].oneOfType([index["default"].func, index["default"].object]),
+  /**
+   * Provides number for card for tasks in a sequential order
+   */
+  sequence: index["default"].number,
+  /**
+   * Provides the status that's displayed at the top of the card
+   */
+  status: index["default"].oneOf(['complete', 'incomplete']),
+  /**
+   * Title that's displayed at the top of the card
+   */
+  title: index["default"].oneOfType([index["default"].string, index["default"].object, index["default"].node])
+};

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

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

package/lib/components/Guidebanner/Guidebanner.js

@@ -86,7 +86,6 @@ 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, {
@@ -117,7 +116,8 @@ exports.Guidebanner = /*#__PURE__*/React__default["default"].forwardRef(function
     size: "md",
     className: "".concat(blockClass, "__toggle-button"),
     onClick: handleClickToggle,
-    ref: toggleRef
+    ref: toggleRef,
+    "aria-expanded": !isCollapsed
   }, 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, {

package/lib/components/NotificationsPanel/NotificationsPanel.d.ts

@@ -1,2 +1,163 @@
-export let NotificationsPanel: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+/**
+ * Copyright IBM Corp. 2020, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/// <reference path="../../../src/custom-typings/index.d.ts" />
 import React from 'react';
+import { Link } from '@carbon/react';
+interface Link {
+    url: string;
+    text: string;
+}
+interface Data {
+    id?: string | number;
+    type?: 'error' | 'warning' | 'success' | 'informational';
+    timestamp?: Date;
+    title?: string;
+    description?: string;
+    link?: Link;
+    unread?: boolean;
+    onNotificationClick?: () => void;
+}
+interface NotificationsPanelProps {
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * Array of data for Notifications component to render
+     */
+    data: Data[];
+    /**
+     * Sets the `days ago` label text
+     */
+    daysAgoText?: (value: number) => string;
+    /**
+     * Label for Dismiss all button
+     */
+    dismissAllLabel?: string;
+    /**
+     * Label for Dismiss single notification icon button
+     */
+    dismissSingleNotificationIconDescription?: string;
+    /**
+     * Optional: Determines if the `Do not disturb` toggle is on or off when the component is rendered
+     */
+    doNotDisturbDefaultToggled?: boolean;
+    /**
+     * Optional: Label for Do not disturb toggle
+     */
+    doNotDisturbLabel?: string;
+    /**
+     * Sets the empty state label text when there are no notifications
+     */
+    emptyStateLabel?: string;
+    /**
+     * Sets the `hour ago` label text
+     */
+    hourAgoText?: (value: number) => string;
+    /**
+     * Sets the `hours ago` label text
+     */
+    hoursAgoText?: (value: number) => string;
+    /**
+     * Sets the `minute ago` label text
+     */
+    minuteAgoText?: (value: number) => string;
+    /**
+     * Sets the `minutes ago` label text
+     */
+    minutesAgoText?: (value: number) => string;
+    /**
+     * Sets the `month ago` label text
+     */
+    monthAgoText?: (value: number) => string;
+    /**
+     * Sets the `months ago` label text
+     */
+    monthsAgoText?: (value: number) => string;
+    /**
+     * Sets the `now` label text
+     */
+    nowText?: string;
+    /**
+     * Sets the notifications panel open state
+     */
+    onClickOutside: () => void;
+    /**
+     * Function that will dismiss all notifications
+     */
+    onDismissAllNotifications?: () => void;
+    /**
+     * Function that will dismiss a single notification
+     */
+    onDismissSingleNotification?: (prop: any) => void;
+    /**
+     * Optional: function that returns the current selected value of the disable notification toggle
+     */
+    onDoNotDisturbChange?: (prop: any) => void;
+    /**
+     * Event handler for the View all button
+     */
+    onSettingsClick?: () => void;
+    /**
+     * Event handler for the View all button
+     */
+    onViewAllClick?: () => void;
+    /**
+     * Determines whether the notifications panel should render or not
+     */
+    open: boolean;
+    /**
+     * Sets the previous label text
+     */
+    previousLabel?: string;
+    /**
+     * Sets the `read less` label text
+     */
+    readLessLabel?: string;
+    /**
+     * Sets the `read more` label text
+     */
+    readMoreLabel?: string;
+    /**
+     * Sets the `seconds ago` label text
+     */
+    secondsAgoText?: (value: number) => string;
+    /**
+     * Sets the settings icon description text
+     */
+    settingsIconDescription?: string;
+    /**
+     * Sets the title for the Notifications panel
+     */
+    title?: string;
+    /**
+     * Sets the today label text
+     */
+    todayLabel?: string;
+    /**
+     * Sets the View all button text
+     */
+    viewAllLabel?: (value: number) => string;
+    /**
+     * Sets the `year ago` label text
+     */
+    yearAgoText?: (value: number) => string;
+    /**
+     * Sets the `years ago` label text
+     */
+    yearsAgoText?: (value: number) => string;
+    /**
+     * Sets the `Yesterday at` label text
+     */
+    yesterdayAtText?: (value: number) => string;
+    /**
+     * Sets the yesterday label text
+     */
+    yesterdayLabel?: string;
+}
+export declare let NotificationsPanel: React.ForwardRefExoticComponent<NotificationsPanelProps & React.RefAttributes<unknown>>;
+export {};

package/lib/components/NotificationsPanel/NotificationsPanel.js

@@ -218,9 +218,9 @@ exports.NotificationsPanel = /*#__PURE__*/React__default["default"].forwardRef(f
       return item.id === id;
     })[0];
     var trimLength = 88;
-    var description = notification.description;
-    var descriptionClassName = cx__default["default"](["".concat(blockClass, "__notification-description"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__notification-long-description"), notification.showAll), "".concat(blockClass, "__notification-short-description"), !notification.showAll)]);
-    var showMoreButtonClassName = cx__default["default"]([_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__notification-read-less-button"), notification.showAll), "".concat(blockClass, "__notification-read-more-button"), !notification.showAll)]);
+    var description = notification === null || notification === void 0 ? void 0 : notification['description'];
+    var descriptionClassName = cx__default["default"](["".concat(blockClass, "__notification-description"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__notification-long-description"), notification === null || notification === void 0 ? void 0 : notification['showAll']), "".concat(blockClass, "__notification-short-description"), !(notification !== null && notification !== void 0 && notification['showAll']))]);
+    var showMoreButtonClassName = cx__default["default"]([_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__notification-read-less-button"), notification === null || notification === void 0 ? void 0 : notification['showAll']), "".concat(blockClass, "__notification-read-more-button"), !(notification !== null && notification !== void 0 && notification['showAll']))]);
     return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("p", {
       className: descriptionClassName
     }, description), description.length > trimLength && /*#__PURE__*/React__default["default"].createElement(react.Button, {
@@ -231,14 +231,14 @@ exports.NotificationsPanel = /*#__PURE__*/React__default["default"].forwardRef(f
           size: 16
         }, props));
       },
-      iconDescription: notification.showAll ? readLessLabel : readMoreLabel,
+      iconDescription: notification !== null && notification !== void 0 && notification['showAll'] ? readLessLabel : readMoreLabel,
       onClick: function onClick(event) {
         event.preventDefault();
         event.stopPropagation();
         var newData = allNotifications.map(function (item) {
-          if (item.id === notification.id) {
+          if (item.id === (notification === null || notification === void 0 ? void 0 : notification['id'])) {
             return Object.assign({}, item, {
-              showAll: !item.showAll
+              showAll: !(item !== null && item !== void 0 && item['showAll'])
             });
           }
           return item;
@@ -246,7 +246,7 @@ exports.NotificationsPanel = /*#__PURE__*/React__default["default"].forwardRef(f
         setAllNotifications(newData);
       },
       className: showMoreButtonClassName
-    }, notification.showAll ? readLessLabel : readMoreLabel));
+    }, notification !== null && notification !== void 0 && notification['showAll'] ? readLessLabel : readMoreLabel));
   };
   var renderNotification = function renderNotification(group, notification, index) {
     var notificationClassName = cx__default["default"](["".concat(blockClass, "__notification"), "".concat(blockClass, "__notification-").concat(group)]);
@@ -255,14 +255,13 @@ exports.NotificationsPanel = /*#__PURE__*/React__default["default"].forwardRef(f
       "aria-label": notification.title,
       key: "".concat(notification.timestamp, "-").concat(notification.title, "-").concat(index),
       className: notificationClassName,
-      type: "button",
       role: "button",
       tabIndex: 0,
       onClick: function onClick() {
         return notification.onNotificationClick(notification);
       },
       onKeyDown: function onKeyDown(event) {
-        if (event.target.classList.contains("".concat(blockClass, "__dismiss-single-button"))) {
+        if (event.target instanceof HTMLElement && event.target.classList.contains("".concat(blockClass, "__dismiss-single-button"))) {
           return;
         }
         event.which === 13 && notification.onNotificationClick(notification);
@@ -325,7 +324,7 @@ exports.NotificationsPanel = /*#__PURE__*/React__default["default"].forwardRef(f
     id: blockClass,
     className: cx__default["default"](blockClass, className, "".concat(blockClass, "__container")),
     style: {
-      animation: !reducedMotion ? "".concat(open ? 'fade-in 250ms' : 'fade-out forwards 250ms') : null
+      animation: !reducedMotion ? "".concat(open ? 'fade-in 250ms' : 'fade-out forwards 250ms') : undefined
     },
     onAnimationEnd: onAnimationEnd,
     ref: ref || notificationPanelRef
@@ -414,6 +413,7 @@ exports.NotificationsPanel.propTypes = {
   /**
    * Array of data for Notifications component to render
    */
+  /**@ts-ignore*/
   data: index["default"].arrayOf(index["default"].shape({
     id: index["default"].oneOfType([index["default"].string, index["default"].number]),
     type: index["default"].oneOf(['error', 'warning', 'success', 'informational']),

package/lib/components/SearchBar/SearchBar.d.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { PropsWithChildren } from 'react';
+import PropTypes from 'prop-types';
 type Scopes = string[] | object[];
 interface SearchBarProps extends PropsWithChildren {
     /** @type {string} Optional additional class name. */
@@ -22,7 +23,7 @@ interface SearchBarProps extends PropsWithChildren {
     /** @type {Function} Function handler for when the user submits a search. */
     onSubmit?: (event: any) => void;
     /** @type {string} Placeholder text to be displayed in the search input. */
-    placeHolderText: string;
+    placeholderText: string;
     /** @type {Function} Function to get the text for each scope to display in dropdown. */
     scopeToString?: () => void;
     /** @type {Array<any>} Array of allowed search scopes. */
@@ -50,4 +51,12 @@ interface SearchBarProps extends PropsWithChildren {
 }
 export declare let SearchBar: React.ForwardRefExoticComponent<SearchBarProps & React.RefAttributes<HTMLFormElement>>;
 declare const conditionalScopePropValidator: (props: any, propName: any, componentName: any, ...rest: any[]) => Error | null;
+export declare const deprecatedProps: {
+    /**
+     * **Deprecated**
+     *
+     * Provide accessible label text for the scopes MultiSelect.
+     */
+    titleText: PropTypes.Requireable<string>;
+};
 export {};