@datarobot/design-system 28.2.2

package/esm/multiselect-searchable-list/multiselect-searchable-list.d.ts

@@ -0,0 +1,24 @@
+import React, { MouseEvent } from 'react';
+import { SearchableListPagination, SearchableListItem } from '../searchable-list';
+import './multiselect-searchable-list.less';
+export type MultiselectSearchableListProps = {
+    onSelectToggle: (item: SearchableListItem, index: number) => void;
+    onClearAll: (e: MouseEvent<HTMLButtonElement>) => void;
+    onSearch: (value: string) => void;
+    errorMessage?: string;
+    searchQuery?: string;
+    pagination: SearchableListPagination;
+    isLoading: boolean;
+    total: number;
+    header?: React.ReactNode;
+    selectedItemsMessage?: (count: number) => React.ReactNode;
+    noItemsMessage?: string;
+    selectedItems?: SearchableListItem[];
+    items?: SearchableListItem[];
+    itemNameKey?: string;
+    clearAllText?: string;
+    removeText?: string;
+    availableSizes?: number[];
+};
+declare const MultiselectSearchableList: ({ onSelectToggle, selectedItems, errorMessage, searchQuery, onClearAll, pagination, isLoading, onSearch, header, availableSizes, items, total, noItemsMessage, selectedItemsMessage, itemNameKey, clearAllText, removeText, }: MultiselectSearchableListProps) => import("react/jsx-runtime").JSX.Element;
+export default MultiselectSearchableList;

package/esm/multiselect-searchable-list/multiselect-searchable-list.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import { SearchableListLayout, SelectedItemsBoard } from './index';
+import { SearchableList } from '../searchable-list';
+import { TruncateWithTooltip } from '../truncate-with-tooltip';
+import { useTranslation } from '../hooks/use-translation';
+import { TOOLTIP_PLACEMENT_TYPES } from '../tooltip';
+import { jsx as _jsx } from "react/jsx-runtime";
+const MultiselectSearchableList = ({
+  onSelectToggle,
+  selectedItems = [],
+  errorMessage,
+  searchQuery,
+  onClearAll,
+  pagination,
+  isLoading,
+  onSearch,
+  header,
+  availableSizes,
+  items = [],
+  total,
+  noItemsMessage,
+  selectedItemsMessage = () => undefined,
+  itemNameKey = 'catalogName',
+  clearAllText,
+  removeText
+}) => {
+  const {
+    t
+  } = useTranslation();
+  return /*#__PURE__*/_jsx("div", {
+    className: "multiselect-items-list",
+    "test-id": "multiselect-items-list",
+    children: /*#__PURE__*/_jsx(SearchableListLayout, {
+      aside: /*#__PURE__*/_jsx(SelectedItemsBoard, {
+        items: selectedItems,
+        displayLabel: item => /*#__PURE__*/_jsx(TruncateWithTooltip, {
+          tooltipPlacement: TOOLTIP_PLACEMENT_TYPES.BOTTOM,
+          children: /*#__PURE__*/_jsx("span", {
+            children: item[itemNameKey]
+          })
+        }),
+        listKey: ({
+          id
+        }) => id,
+        header: selectedItemsMessage(selectedItems.length),
+        onItemRemove: onSelectToggle,
+        onClearAll: onClearAll,
+        clearAllText: clearAllText ?? t('Clear all'),
+        removeText: removeText ?? t('Remove')
+      }),
+      children: /*#__PURE__*/_jsx(SearchableList, {
+        errorMessage: errorMessage,
+        noItemsText: noItemsMessage,
+        isLoading: isLoading,
+        searchValue: searchQuery,
+        pagination: pagination,
+        onSearch: onSearch,
+        header: header,
+        total: total,
+        items: items,
+        availableSizes: availableSizes
+      })
+    })
+  });
+};
+export default MultiselectSearchableList;

package/esm/multiselect-searchable-list/searchable-list-layout.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import './searchable-list-layout.less';
+export type SearchableListLayoutProps = {
+    aside: React.ReactNode;
+    children: React.ReactNode;
+};
+export default function SearchableListLayout({ aside, children, }: SearchableListLayoutProps): import("react/jsx-runtime").JSX.Element;

package/esm/multiselect-searchable-list/searchable-list-layout.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function SearchableListLayout({
+  aside,
+  children
+}) {
+  return /*#__PURE__*/_jsxs("div", {
+    className: "searchable-list-layout",
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "main-container",
+      "test-id": "searchable-list-main",
+      children: children
+    }), /*#__PURE__*/_jsx("aside", {
+      className: "aside-container",
+      "test-id": "searchable-list-aside",
+      children: aside
+    })]
+  });
+}

package/esm/multiselect-searchable-list/selected-items-board.d.ts

@@ -0,0 +1,15 @@
+import React, { MouseEvent } from 'react';
+import { SearchableListItem } from '../searchable-list';
+import './selected-items-board.less';
+export type SelectedItemsBoardProps = {
+    items: SearchableListItem[];
+    onItemRemove: (item: SearchableListItem, index: number) => void;
+    displayLabel: (item: SearchableListItem, index: number) => React.ReactNode;
+    onClearAll: (e: MouseEvent<HTMLButtonElement>) => void;
+    listKey: (item: SearchableListItem, index: number) => string;
+    header?: React.ReactNode;
+    getDefaultHeaderText?: (count: number) => React.ReactNode;
+    clearAllText?: string;
+    removeText?: string;
+};
+export default function SelectedItemsBoard({ displayLabel, onItemRemove, onClearAll, listKey, header, items, getDefaultHeaderText, clearAllText, removeText, }: SelectedItemsBoardProps): import("react/jsx-runtime").JSX.Element;

package/esm/multiselect-searchable-list/selected-items-board.js

@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+import { faChevronDown } from '@fortawesome/free-solid-svg-icons/faChevronDown';
+import { faChevronUp } from '@fortawesome/free-solid-svg-icons/faChevronUp';
+import { faCircleXmark } from '@fortawesome/free-solid-svg-icons/faCircleXmark';
+import { FontAwesomeIcon } from '../font-awesome-icon';
+import { Button, ACCENT_TYPES } from '../button';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export default function SelectedItemsBoard({
+  displayLabel,
+  onItemRemove,
+  onClearAll,
+  listKey,
+  header,
+  items,
+  getDefaultHeaderText,
+  clearAllText,
+  removeText
+}) {
+  const [isExpanded, toggleExpanded] = useState(true);
+  // not in default props because it depends on items length
+  const headerContent = header || getDefaultHeaderText?.(items.length);
+  return /*#__PURE__*/_jsxs("div", {
+    className: "selected-items-board",
+    children: [/*#__PURE__*/_jsx("header", {
+      className: "underlined",
+      children: /*#__PURE__*/_jsx(Button, {
+        onClick: () => toggleExpanded(!isExpanded),
+        testId: "selected-items-board-expand-toggler",
+        accentType: ACCENT_TYPES.COMMAND,
+        rightIcon: isExpanded ? faChevronDown : faChevronUp,
+        children: /*#__PURE__*/_jsx("span", {
+          children: headerContent
+        })
+      })
+    }), isExpanded && items.length > 0 && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx("ul", {
+        className: "items-list",
+        children: items.map((item, index) => /*#__PURE__*/_jsxs("li", {
+          className: "item-container",
+          "test-id": "selected-items-board-item-label",
+          children: [/*#__PURE__*/_jsx("div", {
+            className: "item-display-label",
+            children: displayLabel(item, index)
+          }), /*#__PURE__*/_jsx(Button, {
+            testId: "selected-items-board-remove-item-btn",
+            onClick: () => onItemRemove(item, index),
+            accentType: ACCENT_TYPES.ROUND_ICON,
+            className: "item-remove-button",
+            "aria-label": removeText,
+            children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
+              icon: faCircleXmark
+            })
+          })]
+        }, listKey(item, index)))
+      }), /*#__PURE__*/_jsx("div", {
+        className: "underlined clear-all-button-wrapper",
+        children: /*#__PURE__*/_jsx(Button, {
+          testId: "selected-items-board-clear-all-btn",
+          accentType: ACCENT_TYPES.COMMAND,
+          onClick: onClearAll,
+          children: clearAllText
+        })
+      })]
+    })]
+  });
+}

package/esm/multiselect-searchable-list/toggle-select-button.d.ts

@@ -0,0 +1,10 @@
+import React, { SyntheticEvent } from 'react';
+import './toggle-select-button.less';
+export type ToggleSelectButtonProps = {
+    onToggle: (e: SyntheticEvent) => void;
+    deselectContent?: React.ReactNode;
+    selectContentText?: React.ReactNode;
+    isDisabled?: boolean;
+    isSelected?: boolean;
+};
+export default function ToggleSelectButton({ isSelected, onToggle, selectContentText: selectContentTextParams, isDisabled, deselectContent, }: ToggleSelectButtonProps): import("react/jsx-runtime").JSX.Element;

package/esm/multiselect-searchable-list/toggle-select-button.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { faCheck } from '@fortawesome/free-solid-svg-icons/faCheck';
+import { FontAwesomeIcon } from '../font-awesome-icon';
+import { ACCENT_TYPES, Button } from '../button';
+import { useTranslation } from '../hooks/use-translation';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function ToggleSelectButton({
+  isSelected,
+  onToggle,
+  selectContentText: selectContentTextParams,
+  isDisabled = false,
+  deselectContent = /*#__PURE__*/_jsx(FontAwesomeIcon, {
+    icon: faCheck
+  })
+}) {
+  const {
+    t
+  } = useTranslation();
+  const selectContentText = selectContentTextParams ?? t('Select');
+  return /*#__PURE__*/_jsx("span", {
+    className: "select-toggle-button",
+    children: /*#__PURE__*/_jsx(Button, {
+      accentType: ACCENT_TYPES.COMMAND,
+      testId: "select-toggle-button",
+      isDisabled: isDisabled,
+      onClick: onToggle,
+      children: isSelected ? deselectContent : selectContentText
+    })
+  });
+}

package/esm/notification-popup/index.d.ts

@@ -0,0 +1,8 @@
+export type { Notification, EventNotification, NotificationLevel, Events, } from './types';
+export type { NotificationPopupProps } from './notification-popup';
+export type { NotificationType } from './notification-popup-container';
+export { NotificationService } from './notification-service';
+export { NOTIFICATION_LEVEL, EVENTS, MIN_DISMISS_DELAY, MAX_DISMISS_DELAY, } from './types';
+export { NotificationPopup } from './notification-popup';
+export { NotificationPopupContainer } from './notification-popup-container';
+export { default as emitter } from './notification-emmiter';

package/esm/notification-popup/index.js

@@ -0,0 +1,5 @@
+export { NotificationService } from './notification-service';
+export { NOTIFICATION_LEVEL, EVENTS, MIN_DISMISS_DELAY, MAX_DISMISS_DELAY } from './types';
+export { NotificationPopup } from './notification-popup';
+export { NotificationPopupContainer } from './notification-popup-container';
+export { default as emitter } from './notification-emmiter';

package/esm/notification-popup/notification-emmiter.d.ts

@@ -0,0 +1,5 @@
+declare const emitter: import("mitt").Emitter<{
+    readonly NOTIFICATION_SHOW: "NOTIFICATION_SHOW";
+    readonly NOTIFICATIONS_DISMISS_ALL: "NOTIFICATIONS_DISMISS_ALL";
+}>;
+export default emitter;

package/esm/notification-popup/notification-emmiter.js

@@ -0,0 +1,3 @@
+import mitt from 'mitt';
+const emitter = mitt();
+export default emitter;

package/esm/notification-popup/notification-popup-container.d.ts

@@ -0,0 +1,13 @@
+import { NotificationLevel } from './types';
+import './notification-popup.less';
+export type NotificationPopupContainerType = {
+    closeButtonText?: string;
+    retryText?: string;
+};
+export type NotificationType = {
+    message: string;
+    level: NotificationLevel;
+    retry?: () => void;
+    title?: string;
+};
+export declare function NotificationPopupContainer({ closeButtonText, retryText: retryTextParams, }: NotificationPopupContainerType): import("react/jsx-runtime").JSX.Element;

package/esm/notification-popup/notification-popup-container.js

@@ -0,0 +1,50 @@
+import React, { useState, useEffect } from 'react';
+import { NotificationService, EVENTS } from './notification-service';
+import { NotificationPopup } from './notification-popup';
+import { useTranslation } from '../hooks/use-translation';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function NotificationPopupContainer({
+  closeButtonText,
+  retryText: retryTextParams
+}) {
+  const {
+    t
+  } = useTranslation();
+  const retryText = retryTextParams ?? t('Retry');
+  const [shownNotifications, setShownNotifications] = useState([]);
+  function handleShowNotification(customNotification) {
+    const newNotification = {
+      ...customNotification,
+      title: customNotification.retry ? customNotification.title ?? retryText : customNotification.title
+    };
+    if (!newNotification) {
+      return;
+    }
+    setShownNotifications(existingNotifications => {
+      const messageAlreadyShown = existingNotifications.some(notification => notification.message === newNotification.message);
+      return messageAlreadyShown ? existingNotifications : [newNotification, ...existingNotifications];
+    });
+  }
+  useEffect(() => {
+    const subscriptions = [NotificationService.subscribe(EVENTS.NOTIFICATION_SHOW, handleShowNotification), NotificationService.subscribe(EVENTS.NOTIFICATIONS_DISMISS_ALL, () => setShownNotifications([]))];
+    return () => subscriptions.forEach(subscription => subscription.cancel());
+  }, []);
+  function onNotificationHidden(hiddenNotification) {
+    setShownNotifications(existingNotifications => {
+      return existingNotifications.filter(notification => {
+        return notification.message !== hiddenNotification.message;
+      });
+    });
+  }
+  return /*#__PURE__*/_jsx("div", {
+    className: "notification-popup-container",
+    "test-id": "notification-popup-container",
+    children: shownNotifications.map(notification => {
+      return /*#__PURE__*/_jsx(NotificationPopup, {
+        notification: notification,
+        onHidden: onNotificationHidden,
+        closeButtonText: closeButtonText ?? t('Close')
+      }, notification.message);
+    })
+  });
+}

package/esm/notification-popup/notification-popup.d.ts

@@ -0,0 +1,23 @@
+import { Notification } from './types';
+import './notification-popup.less';
+export type NotificationPopupProps = {
+    notification: Notification;
+    onHidden: (notification: Notification) => void;
+    closeButtonText: string;
+};
+/**
+ * Notification Popup.
+ * Used to provide feedback about recent user actions.
+ * Use NotificationPopupService to show a notification.
+ * Use <NotificationPopupContainer /> where to display a notifications.
+ * Different types of notifications are supported.
+ * Notification can be actionable.
+ * Notification disappears automatically after a specific amount of time
+ * or can be dismissed immediately.
+ * [CAPITALIZATION] Use sentence case
+ * [CAPITALIZATION] Keep as brief as possible, ideally not a complete sentence/no punctuation at the end
+ * [CAPITALIZATION] If you feel there are multiple thoughts (sentences), use punctuation. But consider whether a popup notification is appropriate.
+ * @midnight-gray-supported
+ * @alpine-light-supported
+ * */
+export declare function NotificationPopup({ notification, onHidden, closeButtonText, }: NotificationPopupProps): import("react/jsx-runtime").JSX.Element | null;

package/esm/notification-popup/notification-popup.js

@@ -0,0 +1,160 @@
+import React, { useState, useEffect, useRef } from 'react';
+import classnames from 'classnames';
+import { faCircleInfo } from '@fortawesome/free-solid-svg-icons/faCircleInfo';
+import { faCircleCheck } from '@fortawesome/free-solid-svg-icons/faCircleCheck';
+import { faCircleXmark } from '@fortawesome/pro-solid-svg-icons/faCircleXmark';
+import { faCircleExclamation } from '@fortawesome/free-solid-svg-icons/faCircleExclamation';
+import { faXmark } from '@fortawesome/free-solid-svg-icons/faXmark';
+import { Button, ACCENT_TYPES } from '../button';
+import { FontAwesomeIcon } from '../font-awesome-icon';
+import { NOTIFICATION_LEVEL, MIN_DISMISS_DELAY, MAX_DISMISS_DELAY } from './types';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const {
+  INFO,
+  SUCCESS,
+  WARNING,
+  FAILURE
+} = NOTIFICATION_LEVEL;
+function isActionButtonVisible(notification) {
+  return !!notification?.action;
+}
+function isActionLinkVisible(notification) {
+  return !!notification?.href;
+}
+const getLinkComponent = ({
+  LinkComponent,
+  ...props
+}) => LinkComponent ? /*#__PURE__*/_jsx(LinkComponent, {
+  className: "anchor notification-action",
+  testId: "notification-popup-action",
+  ...props
+}) : /*#__PURE__*/_jsx("a", {
+  href: props.href,
+  className: "anchor notification-action",
+  "test-id": "notification-popup-action",
+  target: props.target,
+  children: /*#__PURE__*/_jsxs("span", {
+    children: [props.actionIcon && /*#__PURE__*/_jsx(FontAwesomeIcon, {
+      icon: props.actionIcon,
+      "test-id": "notification-popup-action-icon",
+      className: "notification-action-icon"
+    }), props.title]
+  })
+});
+function getIcon(notification) {
+  switch (notification.level) {
+    case INFO:
+      return faCircleInfo;
+    case SUCCESS:
+      return faCircleCheck;
+    case WARNING:
+      return faCircleExclamation;
+    case FAILURE:
+      return faCircleXmark;
+    default:
+      return faCircleInfo;
+  }
+}
+/**
+ * Notification Popup.
+ * Used to provide feedback about recent user actions.
+ * Use NotificationPopupService to show a notification.
+ * Use <NotificationPopupContainer /> where to display a notifications.
+ * Different types of notifications are supported.
+ * Notification can be actionable.
+ * Notification disappears automatically after a specific amount of time
+ * or can be dismissed immediately.
+ * [CAPITALIZATION] Use sentence case
+ * [CAPITALIZATION] Keep as brief as possible, ideally not a complete sentence/no punctuation at the end
+ * [CAPITALIZATION] If you feel there are multiple thoughts (sentences), use punctuation. But consider whether a popup notification is appropriate.
+ * @midnight-gray-supported
+ * @alpine-light-supported
+ * */
+export function NotificationPopup({
+  notification,
+  onHidden,
+  closeButtonText
+}) {
+  const [isVisible, setVisibility] = useState(true);
+  const dismissTimer = useRef(null);
+  useEffect(() => {
+    if (notification?.level === NOTIFICATION_LEVEL.FAILURE || notification?.disableAutoDismiss) {
+      return;
+    }
+    clearDismissTimerTimeout();
+    setVisibility(true);
+    const dismissDelay = isActionButtonVisible(notification) ? MAX_DISMISS_DELAY : MIN_DISMISS_DELAY;
+
+    // We can't fix this without making some breaking changes
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    dismissTimer.current = setTimeout(() => {
+      setVisibility(false);
+    }, dismissDelay);
+    return () => {
+      clearDismissTimerTimeout();
+    };
+  }, []);
+  function handleActionApply() {
+    notification.action?.();
+    handleDismiss();
+  }
+  function clearDismissTimerTimeout() {
+    if (dismissTimer.current) {
+      clearTimeout(dismissTimer.current);
+    }
+  }
+  function handleDismiss() {
+    clearDismissTimerTimeout();
+    setVisibility(false);
+    onHidden(notification);
+  }
+  function handleNotificationCleanup() {
+    if (!isVisible) {
+      onHidden(notification);
+    }
+  }
+  if (!notification) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs("div", {
+    className: classnames('notification-popup', notification.level.toLowerCase(), {
+      dismissed: !isVisible
+    }),
+    onAnimationEnd: handleNotificationCleanup,
+    "test-id": "notification-popup",
+    role: "alert",
+    children: [/*#__PURE__*/_jsx("span", {
+      className: "notification-icon",
+      children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
+        icon: getIcon(notification),
+        "test-id": "notification-popup-glyph"
+      })
+    }), /*#__PURE__*/_jsxs("div", {
+      className: "notification-content",
+      children: [/*#__PURE__*/_jsxs("div", {
+        children: [/*#__PURE__*/_jsx("p", {
+          className: "notification-text",
+          "test-id": "notification-text",
+          children: notification.message
+        }), isActionButtonVisible(notification) ? /*#__PURE__*/_jsx(Button, {
+          accentType: ACCENT_TYPES.COMMAND,
+          onClick: handleActionApply,
+          leftIcon: notification.actionIcon,
+          className: "notification-action",
+          testId: "notification-popup-action",
+          children: notification.title
+        }) : null, isActionLinkVisible(notification) && getLinkComponent(notification)]
+      }), /*#__PURE__*/_jsx(Button, {
+        className: "notification-dismiss",
+        accentType: ACCENT_TYPES.COMMAND,
+        "aria-label": closeButtonText,
+        onClick: handleDismiss,
+        testId: "notification-popup-dismiss",
+        children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
+          icon: faXmark
+        })
+      })]
+    })]
+  });
+}

package/esm/notification-popup/notification-service.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types';
+import { EVENTS, Events } from './types';
+type NotificationOptions = {
+    title?: string;
+    retry?: () => void;
+    action?: () => void;
+    actionIcon?: IconDefinition;
+    href?: string;
+    target?: string;
+    disableAutoDismiss?: boolean;
+    extraData?: any;
+};
+declare class NotificationServiceCreator {
+    subscriptionCallback: (() => void) | undefined;
+    subscribe(event: Events, callback: (value?: React.SetStateAction<any>) => void): {
+        cancel: () => void;
+    };
+    info(message: string, options?: NotificationOptions): void;
+    success(message: string, options?: NotificationOptions): void;
+    warn(message: string, options?: NotificationOptions): void;
+    error(message: string, options?: NotificationOptions): void;
+    block(): void;
+    unblock(): void;
+    /**
+     *dismiss all shown notifications at once
+     */
+    dismissAll(): void;
+}
+declare const NotificationService: NotificationServiceCreator;
+export { NotificationService, EVENTS };

package/esm/notification-popup/notification-service.js

@@ -0,0 +1,56 @@
+import emitter from './notification-emmiter';
+import { NOTIFICATION_LEVEL, EVENTS } from './types';
+function showNotification(message, level, options) {
+  const notification = {
+    ...options,
+    message,
+    level
+  };
+  if (options?.retry) {
+    notification.title = options.title;
+    notification.action = options.retry;
+  }
+  // Using 'any' since there are no existing type patterns
+  emitter.emit(EVENTS.NOTIFICATION_SHOW, notification);
+}
+class NotificationServiceCreator {
+  subscribe(event, callback) {
+    this.subscriptionCallback = callback;
+    emitter.on(event, callback);
+    return {
+      cancel: () => emitter.off(event, callback)
+    };
+  }
+  info(message, options) {
+    return showNotification(message, NOTIFICATION_LEVEL.INFO, options);
+  }
+  success(message, options) {
+    return showNotification(message, NOTIFICATION_LEVEL.SUCCESS, options);
+  }
+  warn(message, options) {
+    return showNotification(message, NOTIFICATION_LEVEL.WARNING, options);
+  }
+  error(message, options) {
+    return showNotification(message, NOTIFICATION_LEVEL.FAILURE, options);
+  }
+  block() {
+    if (this.subscriptionCallback) {
+      emitter.off(EVENTS.NOTIFICATION_SHOW, this.subscriptionCallback);
+    }
+  }
+  unblock() {
+    if (this.subscriptionCallback) {
+      emitter.on(EVENTS.NOTIFICATION_SHOW, this.subscriptionCallback);
+    }
+  }
+
+  /**
+   *dismiss all shown notifications at once
+   */
+  dismissAll() {
+    // Using 'any' since there are no existing type patterns
+    emitter.emit(EVENTS.NOTIFICATIONS_DISMISS_ALL);
+  }
+}
+const NotificationService = new NotificationServiceCreator();
+export { NotificationService, EVENTS };

package/esm/notification-popup/types.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types';
+import { ValueOf } from '../types';
+export declare const NOTIFICATION_LEVEL: {
+    readonly INFO: "INFO";
+    readonly SUCCESS: "SUCCESS";
+    readonly WARNING: "WARNING";
+    readonly FAILURE: "FAILURE";
+};
+export type NotificationLevel = ValueOf<typeof NOTIFICATION_LEVEL>;
+export declare const EVENTS: {
+    readonly NOTIFICATION_SHOW: "NOTIFICATION_SHOW";
+    readonly NOTIFICATIONS_DISMISS_ALL: "NOTIFICATIONS_DISMISS_ALL";
+};
+export type Events = ValueOf<typeof EVENTS>;
+export declare const MIN_DISMISS_DELAY = 6000;
+export declare const MAX_DISMISS_DELAY = 8000;
+export type Notification = {
+    message: string;
+    level: NotificationLevel;
+    title?: string;
+    disableAutoDismiss?: boolean;
+    action?: () => void;
+    actionIcon?: IconDefinition;
+    href?: string;
+    target?: string;
+    LinkComponent?: React.ComponentType<LinkComponentProps>;
+};
+export interface LinkComponentProps extends Notification {
+    className: string;
+    testId: string;
+}
+export type EventNotification = {
+    type: Events;
+    option?: Notification;
+};

package/esm/notification-popup/types.js

@@ -0,0 +1,12 @@
+export const NOTIFICATION_LEVEL = {
+  INFO: 'INFO',
+  SUCCESS: 'SUCCESS',
+  WARNING: 'WARNING',
+  FAILURE: 'FAILURE'
+};
+export const EVENTS = {
+  NOTIFICATION_SHOW: 'NOTIFICATION_SHOW',
+  NOTIFICATIONS_DISMISS_ALL: 'NOTIFICATIONS_DISMISS_ALL'
+};
+export const MIN_DISMISS_DELAY = 6000;
+export const MAX_DISMISS_DELAY = 8000;

package/esm/outside-click-listener/index.d.ts

@@ -0,0 +1,2 @@
+export type { OutsideClickListenerProps } from './outside-click-listener';
+export { OutsideClickListener, OUTSIDE_CLICK_IGNORED_CLASS, } from './outside-click-listener';

package/esm/outside-click-listener/index.js

@@ -0,0 +1 @@
+export { OutsideClickListener, OUTSIDE_CLICK_IGNORED_CLASS } from './outside-click-listener';