@carbon/ibm-products 2.38.0 → 2.39.0

package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.d.ts

@@ -1,2 +1,89 @@
-export const DataSpreadsheetHeader: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+/**
+ * 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, { Dispatch, SetStateAction } from 'react';
+import { ActiveCellCoordinates, Column, ItemType, Size } from './types';
+interface DataSpreadsheetHeaderProps {
+    /**
+     * Object containing the active cell coordinates
+     */
+    activeCellCoordinates?: ActiveCellCoordinates | null;
+    /**
+     * Specifies the cell height
+     */
+    cellSize?: Size;
+    /**
+     * All of the spreadsheet columns
+     */
+    columns?: readonly Column[];
+    /**
+     * uuid that corresponds to the current selection area
+     */
+    currentMatcher?: string;
+    /**
+     * Default spreadsheet sizing values
+     */
+    defaultColumn?: Column;
+    /**
+     * Whether or not a click/hold is active on a header cell
+     */
+    headerCellHoldActive?: boolean;
+    /**
+     * Headers provided from useTable hook
+     */
+    headerGroups?: any[];
+    /**
+     * All of the spreadsheet row data
+     */
+    rows?: object[];
+    /**
+     * The scrollbar width
+     */
+    scrollBarSize?: number;
+    /**
+     * The aria label applied to the Select all button
+     */
+    selectAllAriaLabel: string;
+    /**
+     * All of the cell selection area items
+     */
+    selectionAreas?: ItemType[];
+    /**
+     * Setter fn for activeCellCoordinates value
+     */
+    setActiveCellCoordinates?: Dispatch<SetStateAction<ActiveCellCoordinates | null>>;
+    /**
+     * Setter fn for currentMatcher value
+     */
+    setCurrentMatcher?: Dispatch<SetStateAction<string>>;
+    /**
+     * Setter fn for header cell hold active value
+     */
+    setHeaderCellHoldActive?: (arg: boolean) => void;
+    /**
+     * Setter fn for selectionAreaData state value
+     */
+    setSelectionAreaData?: Dispatch<SetStateAction<object[]>>;
+    /**
+     * Setter fn for selectionAreas value
+     */
+    setSelectionAreas?: Dispatch<SetStateAction<object[]>>;
+    /**
+     * The total number of columns to be initially visible, additional columns will be rendered and
+     * visible via horizontal scrollbar
+     */
+    totalVisibleColumns?: number;
+    /**
+     * Function used to update the active cell coordinates
+     */
+    updateActiveCellCoordinates?: (arg: any) => void;
+    /**
+     * Array of visible columns provided by react-table useTable hook
+     */
+    visibleColumns?: [];
+}
+export declare const DataSpreadsheetHeader: React.ForwardRefExoticComponent<DataSpreadsheetHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js

@@ -61,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);
     }
@@ -80,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
       });
     };
   };
@@ -105,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({
@@ -143,7 +146,7 @@ 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)
@@ -155,6 +158,7 @@ var DataSpreadsheetHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           scrollBarSizeValue: scrollBarSizeValue,
           totalVisibleColumns: totalVisibleColumns,
           defaultColumn: defaultColumn,
+          totalColumnsWidth: undefined,
           visibleColumns: visibleColumns
         }),
         overflow: 'hidden'
@@ -188,11 +192,11 @@ var DataSpreadsheetHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         "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)
@@ -207,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])
@@ -226,6 +231,7 @@ DataSpreadsheetHeader.propTypes = {
   /**
    * Default spreadsheet sizing values
    */
+  /**@ts-ignore */
   defaultColumn: index["default"].shape({
     rowHeight: index["default"].number,
     rowHeaderWidth: index["default"].number,
@@ -242,6 +248,7 @@ DataSpreadsheetHeader.propTypes = {
   /**
    * All of the spreadsheet row data
    */
+  /**@ts-ignore */
   rows: index["default"].arrayOf(index["default"].object),
   /**
    * The scrollbar width
@@ -254,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
@@ -287,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/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/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/SidePanel/SidePanel.js

@@ -355,7 +355,7 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
       });
     }
     return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: cx__default["default"]("".concat(blockClass, "__header"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__header--on-detail-step"), currentStep > 0), "".concat(blockClass, "__header--no-title-animation"), !doAnimateTitle), "".concat(blockClass, "__header--reduced-motion"), reducedMotion.matches), "".concat(blockClass, "__header--has-title"), title)),
+      className: cx__default["default"]("".concat(blockClass, "__header"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__header--on-detail-step"), currentStep > 0), "".concat(blockClass, "__header--no-title-animation"), !animateTitle), "".concat(blockClass, "__header--reduced-motion"), reducedMotion.matches), "".concat(blockClass, "__header--has-title"), title)),
       ref: headerRef
     }, currentStep > 0 && /*#__PURE__*/React__default["default"].createElement(react.Button, {
       "aria-label": navigationBackIconDescription,

package/lib/components/TagOverflow/TagOverflow.d.ts

@@ -2,4 +2,9 @@
  * TODO: A description of the component.
  */
 export let TagOverflow: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+/**
+ * The strings shown in the showAllModal are only shown if we have more than allTagsModalSearchLThreshold
+ * @returns null if no problems
+ */
+export const string_required_if_more_than_10_tags: (props: any, propName: any, componentName: any, location: any, propFullName: any, secret: any) => any;
 import React from 'react';