@linzjs/lui 21.34.1-3 → 21.35.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [21.35.0](https://github.com/linz/lui/compare/v21.34.0...v21.35.0) (2024-06-26)
+
+
+### Features
+
+* **useToast:** upgrade toasts ([#1125](https://github.com/linz/lui/issues/1125)) ([b1a293c](https://github.com/linz/lui/commit/b1a293c02195b43c266c22aa58bde974b0a4e4ab)), closes [#1](https://github.com/linz/lui/issues/1)
+
 # [21.34.0](https://github.com/linz/lui/compare/v21.33.0...v21.34.0) (2024-06-05)
 
 

package/dist/components/Toast/Helpers/ToastSection.d.ts

@@ -0,0 +1,9 @@
+import './ToastSection.scss';
+import * as React from 'react';
+import { IToast, ToastPosition } from './ToastTypes';
+export declare const ToastSection: ({ position, list, remove, defaultTimeout, }: {
+    position: ToastPosition;
+    list: IToast[];
+    remove: (id: number) => void;
+    defaultTimeout: number;
+}) => React.ReactPortal;

package/dist/components/Toast/Helpers/ToastTypes.d.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+declare type VerticalSide = 'top' | 'bottom';
+declare type HorizontalSide = 'Left' | 'Center' | 'Right';
+export declare type ToastPosition = `${VerticalSide}${HorizontalSide}`;
+export declare type ToastNode = ReactNode | ((e: {
+    close: () => void;
+}) => ReactNode);
+export declare type ToastOptions = {
+    timeout?: number;
+    position?: ToastPosition;
+    onLeave?: (id: number) => void;
+};
+export declare type ToastAction = {
+    type: 'add';
+    notification: ToastNode;
+    options?: ToastOptions;
+    id: number;
+} | {
+    type: 'remove';
+    id: number;
+} | {
+    type: 'update';
+    notification: ToastNode;
+    options?: ToastOptions;
+    id: number;
+};
+export interface IToast {
+    id: number;
+    notification: ToastNode;
+    options?: ToastOptions;
+    createdAt: number;
+    updatedAt: number;
+}
+export {};

package/dist/components/Toast/Helpers/getToastProviderEl.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Retrieves the toast provider container element. It creates a new
+ * one if it hasn't been created already.
+ *
+ * @description It is expected that application A, renders application B, that happens to render
+ * the new toasts as well. In this case, application B will still render the context
+ * provider to handle their toasts, but it will re-use the portal created by A.
+ *
+ * When the provider is created, it will observe older toasts coming to the screen
+ * to make them visually align with the new ones. This needs to happens when the portal is
+ * created, regardless of what app has created it.
+ *
+ * @returns HTMLDivElement
+ */
+export declare const getToastProviderEl: () => HTMLDivElement;

package/dist/components/Toast/Helpers/toastUsage.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ToastUsage: () => JSX.Element;

package/dist/components/Toast/Helpers/useToastState.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { IToast, ToastAction } from './ToastTypes';
+declare type ToastState = {
+    toasts: IToast[];
+    stack: number;
+};
+export declare const reducer: (state: ToastState, action: ToastAction) => ToastState;
+export declare const useToastState: ({ stack }: {
+    stack: number;
+}) => {
+    toasts: {
+        topLeft: IToast[];
+        topCenter: IToast[];
+        topRight: IToast[];
+        bottomLeft: IToast[];
+        bottomCenter: IToast[];
+        bottomRight: IToast[];
+    };
+    dispatch: import("react").Dispatch<ToastAction>;
+};
+export {};

package/dist/components/Toast/ToastProvider.d.ts

@@ -0,0 +1,10 @@
+import './ToastProvider.scss';
+import * as React from 'react';
+import { ReactNode } from 'react';
+import { ToastAction } from './Helpers/ToastTypes';
+export declare const ToastContext: React.Context<React.Dispatch<ToastAction> | undefined>;
+export declare const ToastProvider: ({ children, defaultTimeout, stack, }: {
+    defaultTimeout?: number | undefined;
+    stack?: number | undefined;
+    children: ReactNode;
+}) => JSX.Element;

package/dist/components/Toast/Upgrade/LuiToastMessageCompatibleInterface.d.ts

@@ -0,0 +1,5 @@
+import { ComponentProps } from 'react';
+import { LuiToastMessage } from '../../LuiToastMessage/LuiToastMessage';
+declare type Props = ComponentProps<typeof LuiToastMessage>;
+export declare const LuiToastMessageCompatibleInterface: (props: Props) => JSX.Element;
+export {};

package/dist/components/Toast/Upgrade/index.d.ts

@@ -0,0 +1,14 @@
+import { ComponentProps, ReactNode } from 'react';
+import { LuiToastMessage as LuiToastMessageOld } from '../../LuiToastMessage/LuiToastMessage';
+declare type ProviderProps = {
+    children: ReactNode;
+    upgrade?: boolean;
+};
+/**
+ * @deprecated Use ToastProvider or LuiMessagingContextProvider with upgrade prop set to true to get the new designs
+ */
+export declare const LuiMessagingContextProvider: (props: ProviderProps) => JSX.Element;
+export declare const useShowLUIMessage: () => (props: import("../../../contexts/LuiMessagingContextProvider").ShowMessageProps) => void;
+declare type LuiToastMessageProps = ComponentProps<typeof LuiToastMessageOld>;
+export declare const LuiToastMessage: (props: LuiToastMessageProps) => JSX.Element;
+export {};

package/dist/components/Toast/Upgrade/observeOlderToasts.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Observes DOM changes in the elements tree to identify older toasts
+ * that have been added to the page, to calculate a CSS top value so
+ * that these are stacked below the new ones, if any.
+ */
+export declare const observeOlderToasts: (portal: HTMLDivElement) => void;

package/dist/components/Toast/Upgrade/useShowLUIMessageCompatibleInterface.d.ts

@@ -0,0 +1,5 @@
+import { ShowMessageProps } from '../../../contexts/LuiMessagingContextProvider';
+/**
+ * Provide new toast hook with old interface from original useShowLUIMessage
+ */
+export declare const useShowLUIMessageCompatibleInterface: () => (props: ShowMessageProps) => void;

package/dist/components/Toast/index.d.ts

@@ -0,0 +1,2 @@
+export { ToastProvider } from './ToastProvider';
+export { useToast } from './useToast';

package/dist/components/Toast/useToast.d.ts

@@ -0,0 +1,16 @@
+import './ToastProvider.scss';
+import { ReactNode } from 'react';
+import { ToastNode, ToastOptions } from './Helpers/ToastTypes';
+declare type BannerToast = (children: ReactNode, config?: ToastOptions) => number;
+declare type Result = {
+    toast: (notification: ToastNode, options?: ToastOptions) => number;
+    update: (toastId: number, notification: ToastNode, options?: ToastOptions) => number;
+    dismiss: (toastId: number) => void;
+    info: BannerToast;
+    success: BannerToast;
+    error: BannerToast;
+    warning: BannerToast;
+    plain: BannerToast;
+};
+export declare const useToast: () => Result;
+export {};

package/dist/components/common/Hooks.d.ts

@@ -5,7 +5,6 @@
  * @param onEscape the handler function
  */
 export declare const useEscapeFunction: (onEscape: () => void) => void;
-export declare const useEscapeFunction2: (onEscape: (e: KeyboardEvent) => void | Promise<void>, trigger?: 'keyup' | 'keydown') => void;
 /**
  * A hook which allows handling of click event anywhere on the page.
  * Provides a way of handling clicks done inside or outside the element bound to the returned react ref.

package/dist/hooks/useClickedOutsideElement.d.ts

@@ -1,4 +1,4 @@
-import { MutableRefObject, RefObject } from 'react';
+import React from 'react';
 /**
  * This hook will callback with handleClickOutside() when "mousedown" dom event occurs off the refElement
  * usage:
@@ -11,4 +11,4 @@ import { MutableRefObject, RefObject } from 'react';
   return <button ref={refElement}>Click Me!</button>;
  ```
  */
-export declare function useClickedOutsideElement(refElement: RefObject<HTMLElement> | MutableRefObject<HTMLElement>, handleClickOutside: CallableFunction): void;
+export declare function useClickedOutsideElement(refElement: React.RefObject<HTMLElement>, handleClickOutside: CallableFunction): void;

package/dist/index.d.ts

@@ -2,8 +2,8 @@ export { LuiBanner, LuiBannerContent } from './components/LuiBanner/LuiBanner';
 export { LuiStaticMessage } from './components/LuiStaticMessage/LuiStaticMessage';
 export { LuiButton } from './components/LuiButton/LuiButton';
 export { LuiFloatingWindow, type ILuiFloatingWindowProps, LUI_WINDOW_NAME, LuiFloatingWindowContextProvider, useLuiFloatingWindow, } from './components/LuiFloatingWindow/LuiFloatingWindow';
-export * from './components/LuiToastMessage/LuiToastMessage';
-export * from './contexts/LuiMessagingContextProvider';
+export { type ILuiToastMessageLevels } from './components/LuiToastMessage/LuiToastMessage';
+export { type MessageLevel, type MessageType, type IUIMessagingContext, type ShowMessageProps, } from './contexts/LuiMessagingContextProvider';
 export { LuiButtonGroup } from './components/LuiButton/LuiButton';
 export { LuiExpandableBanner } from './components/LuiExpandableBanner/LuiExpandableBanner';
 export { LuiMenu, LuiControlledMenu } from './components/LuiMenu/LuiMenu';
@@ -37,8 +37,6 @@ export * from './components/LuiHeaderMenu/LuiHeaderMenus';
 export * from './components/LuiHeaderMenuV2/LuiHeaderMenusV2';
 export { LuiUpdatesSplashModal } from './components/LuiUpdateSplashModal/LuiUpdatesSplashModal';
 export { LuiModal, LuiAlertModal, LuiAlertModalButtons, } from './components/LuiModal/LuiModal';
-export { LuiModalV2, LuiModalV2Buttons, LuiModalV2HeadingText, type LuiModalV2Props, } from './components/LuiModal/LuiModalV2';
-export { LuiAlertModalV2, type LuiAlertModalLevel, type LuiAlertModalV2Props, } from './components/LuiModal/LuiAlertModalV2';
 export { type ISearchInputProps, LuiSearchInput, } from './components/LuiSearchInput/LuiSearchInput';
 export { type ISearchGroupedResult, type ISearchResult, } from './components/LuiSearchInput/ResultsDisplay';
 export { type ISearchMenuOption, type ILuiSearchBoxProps, LuiSearchBox, } from './components/LuiSearchBox/LuiSearchBox';
@@ -74,3 +72,5 @@ export { LuiPagination } from './components/LuiPagination/LuiPagination';
 export { Splitter } from './components/Splitter/Splitter';
 export { useSplitterRef } from './components/Splitter/useSplitterRef';
 export { LuiBannerV2 } from './components/LuiBannerV2/LuiBannerV2';
+export { useToast, ToastProvider } from './components/Toast';
+export { LuiMessagingContextProvider, useShowLUIMessage, LuiToastMessage, } from './components/Toast/Upgrade';