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

package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js

@@ -17,6 +17,7 @@ import { handleHeaderCellSelection } from './utils/handleHeaderCellSelection.js'
 import { selectAllCells } from './utils/selectAllCells.js';
 import { getSpreadsheetWidth } from './utils/getSpreadsheetWidth.js';
 import { checkForHoldingKey } from './utils/checkForHoldingKey.js';
+import { prepareProps } from '../../global/js/utils/props-helper.js';
 import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
 import { useSpreadsheetMouseMove } from './hooks/useSpreadsheetMouseMove.js';
 
@@ -51,12 +52,12 @@ var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
     setSelectedHeaderReorderActive = _useState4[1];
   var previousState = usePreviousValue({
     cellSize: cellSize
-  });
+  }) || {};
   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);
     }
@@ -70,15 +71,16 @@ var DataSpreadsheetHeader = /*#__PURE__*/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
       });
     };
   };
@@ -95,34 +97,36 @@ var DataSpreadsheetHeader = /*#__PURE__*/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 = 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 = 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({
@@ -133,10 +137,11 @@ var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
   return /*#__PURE__*/React__default.createElement("div", {
     className: cx("".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 = prepareProps(headerGroup.getHeaderGroupProps(), 'key');
     return /*#__PURE__*/React__default.createElement("div", _extends({
       key: "header_".concat(index)
-    }, headerGroup.getHeaderGroupProps(), {
+    }, headerProps, {
       style: _objectSpread2(_objectSpread2({}, headerGroup.getHeaderGroupProps().style), {}, {
         width: getSpreadsheetWidth({
           type: 'header',
@@ -144,6 +149,7 @@ var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
           scrollBarSizeValue: scrollBarSizeValue,
           totalVisibleColumns: totalVisibleColumns,
           defaultColumn: defaultColumn,
+          totalColumnsWidth: undefined,
           visibleColumns: visibleColumns
         }),
         overflow: 'hidden'
@@ -166,21 +172,22 @@ var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
       onClick: handleSelectAllClick,
       className: cx("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element"), "".concat(blockClass, "__th--select-all"), _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 = prepareProps(column.getHeaderProps(), 'key');
       var selectedHeader = checkSelectedHeaderCell(index, selectionAreas, 'column', rows);
       return /*#__PURE__*/React__default.createElement("div", _extends({
         key: "column_".concat(index),
         role: "columnheader",
         className: "".concat(blockClass, "__columnheader")
-      }, column.getHeaderProps()), /*#__PURE__*/React__default.createElement("button", {
+      }, colProps), /*#__PURE__*/React__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)
@@ -195,6 +202,7 @@ DataSpreadsheetHeader.propTypes = {
   /**
    * Object containing the active cell coordinates
    */
+  /**@ts-ignore */
   activeCellCoordinates: PropTypes.shape({
     row: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     column: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
@@ -214,6 +222,7 @@ DataSpreadsheetHeader.propTypes = {
   /**
    * Default spreadsheet sizing values
    */
+  /**@ts-ignore */
   defaultColumn: PropTypes.shape({
     rowHeight: PropTypes.number,
     rowHeaderWidth: PropTypes.number,
@@ -230,6 +239,7 @@ DataSpreadsheetHeader.propTypes = {
   /**
    * All of the spreadsheet row data
    */
+  /**@ts-ignore */
   rows: PropTypes.arrayOf(PropTypes.object),
   /**
    * The scrollbar width
@@ -242,6 +252,7 @@ DataSpreadsheetHeader.propTypes = {
   /**
    * All of the cell selection area items
    */
+  /**@ts-ignore */
   selectionAreas: PropTypes.arrayOf(PropTypes.object),
   /**
    * Setter fn for activeCellCoordinates value
@@ -275,6 +286,7 @@ DataSpreadsheetHeader.propTypes = {
   /**
    * Array of visible columns provided by react-table useTable hook
    */
+  /**@ts-ignore */
   visibleColumns: PropTypes.array
 };
 

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

@@ -15,12 +15,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
   useEffect(function () {
     performCreateActiveCell();
   }, [activeCellContent, performCreateActiveCell, isActiveHeaderCellChanged]);
-  var performCreateActiveCell = useCallback(function () {
+  performCreateActiveCell = 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/es/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/es/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/es/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/es/components/GetStartedCard/GetStartedCard.js

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

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

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

package/es/components/Guidebanner/Guidebanner.js

@@ -77,7 +77,6 @@ var Guidebanner = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     });
   };
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
-    "aria-expanded": !isCollapsed,
     className: cx(blockClass, className, collapsible && "".concat(blockClass, "__collapsible"), isCollapsed && "".concat(blockClass, "__collapsible-collapsed"), withLeftGutter && "".concat(blockClass, "__with-left-gutter")),
     ref: ref
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement(Idea, {
@@ -108,7 +107,8 @@ var Guidebanner = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     size: "md",
     className: "".concat(blockClass, "__toggle-button"),
     onClick: handleClickToggle,
-    ref: toggleRef
+    ref: toggleRef,
+    "aria-expanded": !isCollapsed
   }, isCollapsed ? expandButtonLabel : collapseButtonLabel), showNavigation && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
     className: cx("".concat(blockClass, "__back-button"), [scrollPosition === 0 ? "".concat(blockClass, "__back-button--disabled") : null])
   }, /*#__PURE__*/React__default.createElement(IconButton, {

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

@@ -209,9 +209,9 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
       return item.id === id;
     })[0];
     var trimLength = 88;
-    var description = notification.description;
-    var descriptionClassName = cx(["".concat(blockClass, "__notification-description"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__notification-long-description"), notification.showAll), "".concat(blockClass, "__notification-short-description"), !notification.showAll)]);
-    var showMoreButtonClassName = cx([_defineProperty(_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(["".concat(blockClass, "__notification-description"), _defineProperty(_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([_defineProperty(_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.createElement("div", null, /*#__PURE__*/React__default.createElement("p", {
       className: descriptionClassName
     }, description), description.length > trimLength && /*#__PURE__*/React__default.createElement(Button, {
@@ -222,14 +222,14 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
           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;
@@ -237,7 +237,7 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
         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(["".concat(blockClass, "__notification"), "".concat(blockClass, "__notification-").concat(group)]);
@@ -246,14 +246,13 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
       "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);
@@ -316,7 +315,7 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
     id: blockClass,
     className: cx(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
@@ -405,6 +404,7 @@ NotificationsPanel.propTypes = {
   /**
    * Array of data for Notifications component to render
    */
+  /**@ts-ignore*/
   data: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     type: PropTypes.oneOf(['error', 'warning', 'success', 'informational']),

package/es/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 {};