@aws-amplify/ui-react-notifications 0.0.0-next-9e70d7e-20230511220500

package/dist/styles.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/dist/types/components/InAppMessaging/Backdrop/Backdrop.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { BackdropProps } from './types';
+export declare const BACKDROP_TEST_ID = "inappmessaging-backdrop";
+export declare function Backdrop({ onClick, ...rest }: BackdropProps): JSX.Element;

package/dist/types/components/InAppMessaging/Backdrop/index.d.ts

@@ -0,0 +1,2 @@
+export { Backdrop } from './Backdrop';
+export { withBackdrop } from './withBackdrop';

package/dist/types/components/InAppMessaging/Backdrop/types.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ViewProps } from '@aws-amplify/ui-react';
+export interface BackdropProps extends ViewProps {
+    /**
+     * Function called when backdrop is clicked
+     */
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+}

package/dist/types/components/InAppMessaging/Backdrop/withBackdrop.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { BackdropProps } from './types';
+export declare function withBackdrop<Props>(Content: (props: Props) => JSX.Element, options?: BackdropProps): (props: Props) => JSX.Element;

package/dist/types/components/InAppMessaging/BannerMessage/BannerMessage.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { BannerMessageProps } from './types';
+export declare function BannerMessage(props: BannerMessageProps): JSX.Element | null;

package/dist/types/components/InAppMessaging/BannerMessage/constants.d.ts

@@ -0,0 +1 @@
+export declare const BLOCK_CLASS = "amplify-inappmessaging-bannermessage";

package/dist/types/components/InAppMessaging/BannerMessage/index.d.ts

@@ -0,0 +1,2 @@
+export { BannerMessage } from './BannerMessage';
+export { BannerMessageProps } from './types';

package/dist/types/components/InAppMessaging/BannerMessage/types.d.ts

@@ -0,0 +1,7 @@
+import { BannerMessageCommonProps } from '@aws-amplify/ui-react-core-notifications';
+import { MessageOverrideStyle } from '../hooks';
+type BannerMessageAlignment = 'left' | 'center' | 'right';
+export interface BannerMessageProps extends BannerMessageCommonProps<MessageOverrideStyle | undefined> {
+    alignment?: BannerMessageAlignment;
+}
+export {};

package/dist/types/components/InAppMessaging/CloseIconButton/CloseIconButton.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { CloseIconButtonProps } from './types';
+export declare function CloseIconButton({ className, dismissButtonLabel, onClick, style, ...rest }: CloseIconButtonProps): JSX.Element;

package/dist/types/components/InAppMessaging/CloseIconButton/index.d.ts

@@ -0,0 +1 @@
+export { CloseIconButton } from './CloseIconButton';

package/dist/types/components/InAppMessaging/CloseIconButton/types.d.ts

@@ -0,0 +1,8 @@
+import { ButtonProps } from '@aws-amplify/ui-react';
+export interface CloseIconButtonProps extends ButtonProps {
+    /**
+     * @description
+     * Configures the accessible label for the close iconButton
+     */
+    dismissButtonLabel?: string;
+}

package/dist/types/components/InAppMessaging/FullScreenMessage/FullScreenMessage.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { FullScreenMessageProps } from './types';
+export declare function FullScreenMessage(props: FullScreenMessageProps): JSX.Element | null;

package/dist/types/components/InAppMessaging/FullScreenMessage/constants.d.ts

@@ -0,0 +1 @@
+export declare const BLOCK_CLASS = "amplify-inappmessaging-fullscreenmessage";

package/dist/types/components/InAppMessaging/FullScreenMessage/index.d.ts

@@ -0,0 +1,2 @@
+export { FullScreenMessage } from './FullScreenMessage';
+export { FullScreenMessageProps } from './types';

package/dist/types/components/InAppMessaging/FullScreenMessage/types.d.ts

@@ -0,0 +1,4 @@
+import { FullScreenMessageCommonProps } from '@aws-amplify/ui-react-core-notifications';
+import { MessageOverrideStyle } from '../hooks';
+export interface FullScreenMessageProps extends FullScreenMessageCommonProps<MessageOverrideStyle | undefined> {
+}

package/dist/types/components/InAppMessaging/InAppMessageDisplay/InAppMessageDisplay.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { InAppMessageDisplayProps } from './types';
+declare function InAppMessageDisplay({ components: overrideComponents, }: InAppMessageDisplayProps): JSX.Element;
+declare namespace InAppMessageDisplay {
+    var BannerMessage: typeof import("../BannerMessage").BannerMessage;
+    var CarouselMessage: <P>(_: P) => null;
+    var FullScreenMessage: typeof import("../FullScreenMessage").FullScreenMessage;
+    var ModalMessage: typeof import("../ModalMessage").ModalMessage;
+}
+export default InAppMessageDisplay;

package/dist/types/components/InAppMessaging/InAppMessageDisplay/handleMessageLinkAction.d.ts

@@ -0,0 +1,3 @@
+import { HandleMessageLinkAction } from '@aws-amplify/ui-react-core-notifications';
+declare const handleMessageLinkAction: HandleMessageLinkAction;
+export default handleMessageLinkAction;

package/dist/types/components/InAppMessaging/InAppMessageDisplay/index.d.ts

@@ -0,0 +1,2 @@
+export { default as InAppMessageDisplay } from './InAppMessageDisplay';
+export { MessageComponents } from './types';

package/dist/types/components/InAppMessaging/InAppMessageDisplay/types.d.ts

@@ -0,0 +1,23 @@
+import { BannerMessageComponent, CarouselMessageComponent, FullScreenMessageComponent, ModalMessageComponent } from '@aws-amplify/ui-react-core-notifications';
+import { BannerMessageProps } from '../BannerMessage';
+import { FullScreenMessageProps } from '../FullScreenMessage';
+import { ModalMessageProps } from '../ModalMessage';
+type BannerStyle = BannerMessageProps['style'];
+type CarouselStyle = any;
+type FullScreenStyle = FullScreenMessageProps['style'];
+type ModalStyle = ModalMessageProps['style'];
+export interface MessageDefaultComponents {
+    BannerMessage: BannerMessageComponent<BannerStyle>;
+    CarouselMessage: CarouselMessageComponent<CarouselStyle>;
+    FullScreenMessage: FullScreenMessageComponent<FullScreenStyle>;
+    ModalMessage: ModalMessageComponent<ModalStyle>;
+}
+export interface MessageComponents extends Partial<MessageDefaultComponents> {
+}
+export interface InAppMessageDisplayProps {
+    /**
+     * Message override UI components
+     */
+    components?: MessageComponents;
+}
+export {};

package/dist/types/components/InAppMessaging/MessageLayout/MessageLayout.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { MessageLayoutProps } from './types';
+export declare function MessageLayout({ body, buttonSize, hasRenderableImage, header, image, onClose, orientation, primaryButton, secondaryButton, styles, }: MessageLayoutProps): JSX.Element;

package/dist/types/components/InAppMessaging/MessageLayout/constants.d.ts

@@ -0,0 +1,16 @@
+export declare const BLOCK_CLASS = "amplify-inappmessaging-messagelayout";
+export declare const BUTTON_CLASS: string;
+export declare const CLOSE_BUTTON_CLASS: string;
+export declare const CONTENT_CLASS: string;
+export declare const HEADER_CLASS: string;
+export declare const IMAGE_CONTAINER_CLASS: string;
+export declare const TEXT_CONTAINER_CLASS: string;
+export declare const BODY_TEXT_TEST_ID = "inappmessaging-messagelayout-bodytext";
+export declare const BUTTON_GROUP_TEST_ID = "inappmessaging-messagelayout-buttongroup";
+export declare const CONTENT_TEST_ID = "inappmessaging-messagelayout-content";
+export declare const HEADER_TEXT_TEST_ID = "inappmessaging-messagelayout-headertext";
+export declare const IMAGE_CONTAINER_TEST_ID = "inappmessaging-messagelayout-imagecontainer";
+export declare const MESSAGE_LAYOUT_TEST_ID = "inappmessaging-messagelayout";
+export declare const PRIMARY_BUTTON_TEST_ID = "inappmessaging-messagelayout-primarybutton";
+export declare const SECONDARY_BUTTON_TEST_ID = "inappmessaging-messagelayout-secondarybutton";
+export declare const TEXT_CONTAINER_TEST_ID = "inappmessaging-messagelayout-textcontainer";

package/dist/types/components/InAppMessaging/MessageLayout/index.d.ts

@@ -0,0 +1 @@
+export { MessageLayout } from './MessageLayout';

package/dist/types/components/InAppMessaging/MessageLayout/types.d.ts

@@ -0,0 +1,23 @@
+import { MessageComponentBaseProps } from '@aws-amplify/ui-react-core-notifications';
+import { ButtonProps } from '@aws-amplify/ui-react';
+import { MessageComponentStyles, MessageOverrideStyle, UseMessageProps } from '../hooks';
+type MessageLayoutOrientation = 'horizontal' | 'vertical';
+export type MessageLayoutButtonModifier = 'dark' | 'light';
+export interface MessageLayoutProps extends Omit<MessageComponentBaseProps<MessageOverrideStyle>, 'style'>, Omit<UseMessageProps, 'shouldRenderMessage' | 'styles'> {
+    /**
+     * @description
+     * Changes the size of the buttons.
+     */
+    buttonSize?: ButtonProps['size'];
+    /**
+     * @description
+     * The orientation determines how message content will be laid out.
+     */
+    orientation?: MessageLayoutOrientation;
+    /**
+     * @description
+     * Component styles - typically a combination of payload and override styles.
+     */
+    styles: MessageComponentStyles;
+}
+export {};

package/dist/types/components/InAppMessaging/MessageLayout/utils.d.ts

@@ -0,0 +1,13 @@
+import { MessageComponentStyles } from '../hooks/useMessageProps';
+import { MessageLayoutButtonModifier } from './types';
+/**
+ * Utility for determining the class modifier for an In-App Messaging button
+ * based on its background color
+ *
+ * @param buttonStyles button styles which should contain the background color
+ * @param defaultModifier modifier that should be returned in cases where
+ * background color is undefined
+ *
+ * @returns the modifier - either 'light' or 'dark'
+ */
+export declare const getButtonModifier: (buttonStyles: MessageComponentStyles['primaryButton' | 'primaryButton'], defaultModifier?: MessageLayoutButtonModifier) => MessageLayoutButtonModifier;

package/dist/types/components/InAppMessaging/ModalMessage/ModalMessage.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ModalMessageProps } from './types';
+export declare function ModalMessage(props: ModalMessageProps): JSX.Element | null;

package/dist/types/components/InAppMessaging/ModalMessage/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const BLOCK_CLASS = "amplify-inappmessaging-modalmessage";
+export declare const DIALOG_CLASS: string;

package/dist/types/components/InAppMessaging/ModalMessage/index.d.ts

@@ -0,0 +1,2 @@
+export { ModalMessage } from './ModalMessage';
+export { ModalMessageProps } from './types';

package/dist/types/components/InAppMessaging/ModalMessage/types.d.ts

@@ -0,0 +1,4 @@
+import { ModalMessageCommonProps } from '@aws-amplify/ui-react-core-notifications';
+import { MessageOverrideStyle } from '../hooks';
+export interface ModalMessageProps extends ModalMessageCommonProps<MessageOverrideStyle | undefined> {
+}

package/dist/types/components/InAppMessaging/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { useMessageImage } from './useMessageImage';
+export { MessageComponentStyles, MessageOverrideStyle, useMessageProps, UseMessageProps, } from './useMessageProps';

package/dist/types/components/InAppMessaging/hooks/useMessageImage/index.d.ts

@@ -0,0 +1 @@
+export { default as useMessageImage } from './useMessageImage';

package/dist/types/components/InAppMessaging/hooks/useMessageImage/types.d.ts

@@ -0,0 +1,10 @@
+export declare enum ImagePrefetchStatus {
+    Aborted = "ABORTED",
+    Failure = "FAILURE",
+    Fetching = "FETCHING",
+    Success = "SUCCESS"
+}
+export type UseMessageImage = {
+    hasRenderableImage: boolean;
+    isImageFetching: boolean;
+};

package/dist/types/components/InAppMessaging/hooks/useMessageImage/useMessageImage.d.ts

@@ -0,0 +1,9 @@
+import { MessageImage } from '@aws-amplify/ui-react-core-notifications';
+import { UseMessageImage } from './types';
+/**
+ * Handles prefetching for message images
+ *
+ * @param image contains image source
+ * @returns message image dimensions and fetching related booleans
+ */
+export default function useMessageImage(image: MessageImage | undefined): UseMessageImage;

package/dist/types/components/InAppMessaging/hooks/useMessageProps/index.d.ts

@@ -0,0 +1,2 @@
+export { default as useMessageProps } from './useMessageProps';
+export { MessageComponentStyles, MessageOverrideStyle, UseMessageProps, } from './types';

package/dist/types/components/InAppMessaging/hooks/useMessageProps/types.d.ts

@@ -0,0 +1,39 @@
+/// <reference types="react" />
+import { MessagePayloadStyle } from '@aws-amplify/ui-react-core-notifications';
+/**
+ * Inline style props for message components. Can be overridden by customer
+ */
+export interface MessageComponentStyles {
+    body: React.CSSProperties;
+    closeIconButton: React.CSSProperties;
+    container: React.CSSProperties;
+    header: React.CSSProperties;
+    image: React.CSSProperties;
+    primaryButton: React.CSSProperties;
+    secondaryButton: React.CSSProperties;
+}
+export interface UseMessageProps {
+    hasRenderableImage: boolean;
+    shouldRenderMessage: boolean;
+    styles: MessageComponentStyles;
+}
+export interface MessageStyleParams {
+    /**
+     * style params to derive resolved style from
+     */
+    styleParams: StyleParams;
+}
+export interface StyleParams {
+    /**
+     * message specific styles in the message payload
+     */
+    payloadStyle: MessagePayloadStyle;
+    /**
+     * custom component style passed as style prop to message UI components
+     */
+    overrideStyle?: MessageOverrideStyle;
+}
+/**
+ * Override style props
+ */
+export type MessageOverrideStyle = Partial<MessageComponentStyles>;

package/dist/types/components/InAppMessaging/hooks/useMessageProps/useMessageProps.d.ts

@@ -0,0 +1,11 @@
+import { MessageComponentBaseProps } from '@aws-amplify/ui-react-core-notifications';
+import { MessageOverrideStyle, UseMessageProps } from './types';
+/**
+ * Handle common message UI component prop logic including render booleans, and
+ * style resolving
+ *
+ * @param props message UI component props
+ *
+ * @returns message UI component render related booleans and styles
+ */
+export default function useMessageProps(props: MessageComponentBaseProps<MessageOverrideStyle>): UseMessageProps;

package/dist/types/components/InAppMessaging/hooks/useMessageProps/utils.d.ts

@@ -0,0 +1,23 @@
+import { MessageComponentBaseProps, MessagePayloadStyle } from '@aws-amplify/ui-react-core-notifications';
+import { MessageComponentStyles, MessageStyleParams } from './types';
+/**
+ * Utility for extracting message payload style
+ *
+ * @param props message props
+ *
+ * @returns message payload-specific styles
+ */
+export declare const getPayloadStyle: ({ body, container, header, primaryButton, secondaryButton, }: MessageComponentBaseProps) => MessagePayloadStyle;
+/**
+ * Receives message styling and returns style property values for use with in-app message
+ * UI components. Handles resolving style precedence between payload and custom styles
+ *
+ * Styles resolve precedence from lowest to highest:
+ *   1. Payload styles
+ *   2. Custom (override) styles
+ *
+ * @param params message style params
+ *
+ * @returns message component styles
+ */
+export declare function getMessageStyles({ styleParams, }: MessageStyleParams): MessageComponentStyles;

package/dist/types/components/InAppMessaging/index.d.ts

@@ -0,0 +1,6 @@
+export { InAppMessagingProvider, useInAppMessaging, } from '@aws-amplify/ui-react-core-notifications';
+export { BannerMessageProps } from './BannerMessage';
+export { FullScreenMessageProps } from './FullScreenMessage';
+export { InAppMessageDisplay, MessageComponents } from './InAppMessageDisplay';
+export { ModalMessageProps } from './ModalMessage';
+export { withInAppMessaging } from './withInAppMessaging';

package/dist/types/components/InAppMessaging/withInAppMessaging/index.d.ts

@@ -0,0 +1 @@
+export { default as withInAppMessaging } from './withInAppMessaging';

package/dist/types/components/InAppMessaging/withInAppMessaging/withInAppMessaging.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { MessageComponents } from '../InAppMessageDisplay';
+export default function withInAppMessaging<Props = {}>(Component: React.ComponentType<Props>, options?: {
+    components?: MessageComponents;
+}): (props: Props) => JSX.Element;

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+export * from './components/InAppMessaging';

package/dist/types/styles.d.ts

@@ -0,0 +1 @@
+import './styles.css';

package/package.json

@@ -0,0 +1,87 @@
+{
+  "name": "@aws-amplify/ui-react-notifications",
+  "version": "0.0.0-next-9e70d7e-20230511220500",
+  "main": "dist/index.js",
+  "module": "dist/esm/index.mjs",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/esm/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "browser": {
+    "./styles.css": "./dist/styles.css"
+  },
+  "types": "dist/types/index.d.ts",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/aws-amplify/amplify-ui",
+    "directory": "packages/react-notifications"
+  },
+  "files": [
+    "dist",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "yarn build:rollup",
+    "build:rollup": "rollup --config",
+    "check:esm": "node --input-type=module --eval 'import \"@aws-amplify/ui-react-notifications\"'",
+    "clean": "rimraf dist node_modules",
+    "dev": "yarn build:rollup --watch",
+    "lint": "yarn typecheck && eslint src --ext .js,.ts,.tsx",
+    "prebuild": "rimraf dist",
+    "size": "yarn size-limit",
+    "test": "jest",
+    "test:ci": "yarn test && yarn check:esm",
+    "test:watch": "yarn test --watch",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@aws-amplify/ui": "0.0.0-next-9e70d7e-20230511220500",
+    "@aws-amplify/ui-react": "0.0.0-next-9e70d7e-20230511220500",
+    "@aws-amplify/ui-react-core-notifications": "0.0.0-next-9e70d7e-20230511220500",
+    "classnames": "2.3.1"
+  },
+  "peerDependencies": {
+    "aws-amplify": ">= 5.0.1",
+    "react": ">= 16.14.0",
+    "react-dom": ">= 16.14.0"
+  },
+  "devDependencies": {
+    "@aws-amplify/eslint-config-amplify-ui": "0.0.0",
+    "@rollup/plugin-typescript": "^8.3.1",
+    "@size-limit/preset-big-lib": "^7.0.8",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.0.0",
+    "@testing-library/react-hooks": "^7.0.1",
+    "@testing-library/user-event": "^13.2.1",
+    "@types/jest": "^26.0.23",
+    "@types/react": "^17.0.2",
+    "@types/testing-library__jest-dom": "^5.14.1",
+    "eslint": "^8.13.0",
+    "jest": "^27.0.4",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.70.0",
+    "rollup-plugin-node-externals": "^4.1.1",
+    "rollup-plugin-styles": "^4.0.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "size-limit": "^7.0.8",
+    "ts-jest": "^27.0.3"
+  },
+  "sideEffects": [
+    "dist/**/*.css"
+  ],
+  "size-limit": [
+    {
+      "name": "InAppMessaging",
+      "path": "dist/esm/index.mjs",
+      "import": "{ InAppMessagingProvider, InAppMessageDisplay }",
+      "limit": "110 kB"
+    }
+  ]
+}