@aws-amplify/ui-react 3.6.0 → 4.0.0

package/dist/styles.css

@@ -3,7 +3,7 @@
  */
 /**
  * Do not edit directly
- * Generated on Tue, 08 Nov 2022 23:57:24 GMT
+ * Generated on Mon, 14 Nov 2022 16:53:03 GMT
  */
 :root, [data-amplify-theme] {
   --amplify-transforms-slide-x-large: translateX(2em);
@@ -255,6 +255,15 @@
   --amplify-components-loader-linear-width: 100%;
   --amplify-components-loader-animation-duration: 1s;
   --amplify-components-loader-stroke-linecap: round;
+  --amplify-components-inappmessaging-dialog-width: 30vw;
+  --amplify-components-inappmessaging-dialog-min-width: 400px;
+  --amplify-components-inappmessaging-dialog-min-height: 400px;
+  --amplify-components-inappmessaging-dialog-height: 50vh;
+  --amplify-components-inappmessaging-button-color: black;
+  --amplify-components-inappmessaging-button-border-radius: 5px;
+  --amplify-components-inappmessaging-button-background-color: #e8e8e8;
+  --amplify-components-inappmessaging-banner-width: 400px ;
+  --amplify-components-inappmessaging-banner-height: 150px ;
   --amplify-components-image-object-position: initial;
   --amplify-components-image-object-fit: initial;
   --amplify-components-image-height: auto;
@@ -521,6 +530,8 @@
   --amplify-components-loader-font-size: var(--amplify-font-sizes-xs);
   --amplify-components-loader-height: var(--amplify-font-sizes-medium);
   --amplify-components-loader-width: var(--amplify-font-sizes-medium);
+  --amplify-components-inappmessaging-header-font-weight: 800;
+  --amplify-components-inappmessaging-header-font-size: var(--amplify-font-sizes-medium);
   --amplify-components-highlightmatch-highlighted-font-weight: 700;
   --amplify-components-heading-line-height: var(--amplify-line-heights-small);
   --amplify-components-heading-6-font-weight: 800;
@@ -990,7 +1001,7 @@ html,
 
 @supports (font-variation-settings: normal) {
   html,
-[data-amplify-theme] {
+  [data-amplify-theme] {
     font-family: var(--amplify-fonts-default-variable);
   }
 }
@@ -2503,7 +2514,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
   height: 100%;
 }
 
-[data-radix-popper-content-wrapper] {
+.amplify-menu-content-wrapper {
   z-index: 999999;
 }
 
@@ -3873,6 +3884,186 @@ html[dir=rtl] .amplify-field-group__inner-start {
   }
 }
 
+.amplify-inappmessaging-backdrop {
+  background-color: var(--amplify-colors-overlay-50);
+  inset: 0;
+  position: fixed;
+  z-index: 1000;
+}
+
+.amplify-inappmessaging-backdrop-content-container {
+  align-items: center;
+  inset: 0;
+  justify-content: center;
+  pointer-events: none;
+  position: fixed;
+  z-index: 1001;
+}
+
+.amplify-inappmessaging-backdrop-content {
+  pointer-events: auto;
+}
+
+.amplify-inappmessaging-bannermessage {
+  box-shadow: var(--amplify-shadows-medium);
+  height: var(--amplify-components-inappmessaging-banner-height);
+  margin: var(--amplify-space-small);
+  max-width: 50%;
+  position: fixed;
+  width: var(--amplify-components-inappmessaging-banner-width);
+}
+.amplify-inappmessaging-bannermessage--top {
+  top: 0;
+}
+.amplify-inappmessaging-bannermessage--middle {
+  bottom: 0;
+  margin: auto var(--amplify-space-small);
+  top: 0;
+}
+.amplify-inappmessaging-bannermessage--bottom {
+  bottom: 0;
+}
+.amplify-inappmessaging-bannermessage--left {
+  left: 0;
+}
+.amplify-inappmessaging-bannermessage--center {
+  left: 0;
+  margin: var(--amplify-space-small) auto;
+  right: 0;
+}
+.amplify-inappmessaging-bannermessage--right {
+  right: 0;
+}
+.amplify-inappmessaging-bannermessage--center-middle {
+  inset: 0;
+  margin: auto;
+}
+.amplify-inappmessaging-bannermessage--full-width {
+  max-width: initial;
+  width: calc(100% - 2 * var(--amplify-space-small));
+}
+
+.amplify-inappmessaging-fullscreenmessage {
+  height: var(--amplify-components-inappmessaging-dialog-height);
+  min-height: var(--amplify-components-inappmessaging-dialog-min-height);
+  min-width: var(--amplify-components-inappmessaging-dialog-min-width);
+  width: var(--amplify-components-inappmessaging-dialog-width);
+}
+.amplify-inappmessaging-fullscreenmessage--fullscreen {
+  height: auto;
+  inset: 0;
+  position: fixed;
+  width: auto;
+  z-index: 1000;
+}
+
+.amplify-inappmessaging-messagelayout {
+  background-color: var(--amplify-colors-background-primary);
+  flex-direction: column;
+  flex-grow: 1;
+  gap: var(--amplify-space-xxxs);
+  max-width: 100%;
+  padding: var(--amplify-space-medium);
+}
+.amplify-inappmessaging-messagelayout__button {
+  border-width: 0;
+  width: 100%;
+}
+.amplify-inappmessaging-messagelayout__button, .amplify-inappmessaging-messagelayout__button:active, .amplify-inappmessaging-messagelayout__button:visited, .amplify-inappmessaging-messagelayout__button:hover, .amplify-inappmessaging-messagelayout__button:focus {
+  background-color: var(--amplify-components-inappmessaging-button-background-color);
+  border-radius: var(--amplify-components-inappmessaging-button-border-radius);
+  color: var(--amplify-components-inappmessaging-button-color);
+}
+.amplify-inappmessaging-messagelayout__button--dark:active, .amplify-inappmessaging-messagelayout__button--dark:visited, .amplify-inappmessaging-messagelayout__button--light:active, .amplify-inappmessaging-messagelayout__button--light:visited {
+  filter: brightness(100%);
+}
+.amplify-inappmessaging-messagelayout__button--dark:hover, .amplify-inappmessaging-messagelayout__button--dark:focus {
+  filter: brightness(120%);
+}
+.amplify-inappmessaging-messagelayout__button--light:hover, .amplify-inappmessaging-messagelayout__button--light:focus {
+  filter: brightness(80%);
+}
+.amplify-inappmessaging-messagelayout__close-button {
+  color: var(--amplify-colors-neutral-80);
+}
+.amplify-inappmessaging-messagelayout__close-button:active, .amplify-inappmessaging-messagelayout__close-button:visited {
+  color: var(--amplify-colors-neutral-80);
+}
+.amplify-inappmessaging-messagelayout__close-button:hover, .amplify-inappmessaging-messagelayout__close-button:focus {
+  color: var(--amplify-colors-neutral-100);
+}
+.amplify-inappmessaging-messagelayout__content {
+  flex-grow: 1;
+  overflow: hidden;
+}
+.amplify-inappmessaging-messagelayout__content--horizontal {
+  flex-direction: row;
+}
+.amplify-inappmessaging-messagelayout__content--vertical {
+  flex-direction: column;
+  justify-content: center;
+}
+.amplify-inappmessaging-messagelayout__header {
+  flex-shrink: 0;
+  font-size: var(--amplify-components-inappmessaging-header-font-size);
+  font-weight: var(--amplify-components-inappmessaging-header-font-weight);
+}
+.amplify-inappmessaging-messagelayout__image-container {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  position: relative;
+}
+.amplify-inappmessaging-messagelayout__image-container img {
+  max-height: 100%;
+  max-width: 100%;
+  -o-object-fit: contain;
+     object-fit: contain;
+  position: absolute;
+}
+.amplify-inappmessaging-messagelayout__image-container--horizontal {
+  max-width: 15%;
+  min-width: 15%;
+}
+.amplify-inappmessaging-messagelayout__image-container--vertical {
+  max-height: 40%;
+  min-height: 40%;
+}
+.amplify-inappmessaging-messagelayout__text-container {
+  flex-direction: column;
+  overflow-y: auto;
+  gap: var(--amplify-space-xxxs);
+}
+.amplify-inappmessaging-messagelayout__text-container--horizontal {
+  flex-grow: 1;
+}
+.amplify-inappmessaging-messagelayout__text-container--vertical {
+  flex-grow: 0;
+}
+
+.amplify-inappmessaging-modalmessage {
+  align-items: center;
+  height: initial;
+  inset: 0;
+  justify-content: center;
+  pointer-events: none;
+  position: fixed;
+  width: initial;
+  z-index: 1000;
+}
+.amplify-inappmessaging-modalmessage__dialog {
+  box-shadow: var(--amplify-shadows-medium);
+  height: var(--amplify-components-inappmessaging-dialog-height);
+  min-height: var(--amplify-components-inappmessaging-dialog-min-height);
+  min-width: var(--amplify-components-inappmessaging-dialog-min-width);
+  pointer-events: auto;
+  width: var(--amplify-components-inappmessaging-dialog-width);
+}
+.amplify-inappmessaging-modalmessage__dialog--full-width {
+  width: 100%;
+  margin: var(--amplify-space-small);
+}
+
 [data-label-position=start] {
   flex-direction: row;
 }

package/dist/types/components/Authenticator/ConfirmSignIn/ConfirmSignIn.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { RouteProps } from '../RouteContainer';
 export declare const ConfirmSignIn: {
     ({ className, variation, }: RouteProps): JSX.Element;

package/dist/types/components/Authenticator/ConfirmSignUp/ConfirmSignUp.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { RouteProps } from '../RouteContainer';
 export declare function ConfirmSignUp({ className, variation, }: RouteProps): JSX.Element;
 export declare namespace ConfirmSignUp {

package/dist/types/components/Authenticator/FederatedSignIn/FederatedSignIn.d.ts

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

package/dist/types/components/Authenticator/FederatedSignIn/FederatedSignInButtons/FederatedSignInButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FederatedIdentityProviders, SocialProvider } from '@aws-amplify/ui';
 export interface FederatedSignInButtonProps {
     icon?: SocialProvider;

package/dist/types/components/Authenticator/ForceNewPassword/ForceNewPassword.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { RouteProps } from '../RouteContainer';
 export declare const ForceNewPassword: {
     ({ className, variation, }: RouteProps): JSX.Element;

package/dist/types/components/Authenticator/ResetPassword/ConfirmResetPassword.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { RouteProps } from '../RouteContainer';
 export declare const ConfirmResetPassword: {
     ({ className, variation, }: RouteProps): JSX.Element;

package/dist/types/components/Authenticator/ResetPassword/ResetPassword.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { RouteProps } from '../RouteContainer';
 export declare const ResetPassword: {
     ({ className, variation, }: RouteProps): JSX.Element;

package/dist/types/components/Authenticator/RouteContainer/RouteContainer.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { RouteContainerProps } from './types';
 export declare function RouteContainer({ children, className, variation, }: RouteContainerProps): JSX.Element;

package/dist/types/components/Authenticator/Router/Router.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { RouterProps } from './types';
 export declare function Router({ className, hideSignUp, variation, }: RouterProps): JSX.Element;

package/dist/types/components/Authenticator/SetupTOTP/SetupTOTP.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { RouteProps } from '../RouteContainer';
 export declare const SetupTOTP: {
     ({ className, variation, }: RouteProps): JSX.Element;

package/dist/types/components/Authenticator/SignIn/SignIn.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare function SignIn(): JSX.Element;
 export declare namespace SignIn {
     var Footer: () => JSX.Element;

package/dist/types/components/Authenticator/SignUp/SignUp.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare function SignUp(): JSX.Element;
 export declare namespace SignUp {
     var Header: () => JSX.Element;

package/dist/types/components/Authenticator/VerifyUser/ConfirmVerifyUser.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { RouteProps } from '../RouteContainer';
 export declare const ConfirmVerifyUser: {
     ({ className, variation, }: RouteProps): JSX.Element;

package/dist/types/components/Authenticator/VerifyUser/VerifyUser.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { RouteProps } from '../RouteContainer';
 export declare const VerifyUser: {
     ({ className, variation, }: RouteProps): JSX.Element;

package/dist/types/components/Authenticator/hooks/useCustomComponents/defaultComponents.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface Components {
     Footer?: () => JSX.Element;
     FormFields?: () => JSX.Element;

package/dist/types/components/Authenticator/shared/ConfirmSignInFooter.d.ts

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

package/dist/types/components/Authenticator/shared/ConfirmationCodeInput.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface ConfirmationCodeInputProps {
     errorText?: string;
     labelHidden?: boolean;

package/dist/types/components/Authenticator/shared/FormField.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FormFieldOptions } from '@aws-amplify/ui';
 export interface FormFieldProps extends Omit<FormFieldOptions, 'label'> {
     label: string;

package/dist/types/components/Authenticator/shared/FormFields.d.ts

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

package/dist/types/components/Authenticator/shared/RemoteErrorMessage.d.ts

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

package/dist/types/components/Authenticator/shared/SignInSignUpTabs.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { RouteProps } from '../RouteContainer';
 export declare const SignInSignUpTabs: ({ className, hideSignUp, variation, }: {
     hideSignUp: boolean;

package/dist/types/components/Authenticator/shared/TwoButtonSubmitFooter.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { AuthEventTypes } from '@aws-amplify/ui';
 export interface TwoButtonSubmitFooterProps {
     cancelButtonSendType: AuthEventTypes;

package/dist/types/components/Authenticator/shared/ValidationErrors.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface ValidationErrorsProps {
     errors: string[];
     id?: string;

package/dist/types/components/Geo/LocationSearch/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { LocationSearchProps } from 'maplibre-gl-geocoder';
 /**
  * The `<LocationSearch>` component provides location search.

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

@@ -0,0 +1,3 @@
+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 '../../../primitives/types';
+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,2 @@
+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,2 @@
+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';
+import { MessageOverrideStyle } from '../hooks';
+declare 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,2 @@
+import { CloseIconButtonProps } from './types';
+export declare function CloseIconButton({ className, dismissButtonLabel, onClick, style, ...rest }: CloseIconButtonProps): JSX.Element;

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

@@ -0,0 +1 @@
+export {};

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 '../../../primitives';
+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,2 @@
+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';
+import { MessageOverrideStyle } from '../hooks';
+export interface FullScreenMessageProps extends FullScreenMessageCommonProps<MessageOverrideStyle | undefined> {
+}

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

@@ -0,0 +1,9 @@
+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) => any;
+    var FullScreenMessage: typeof import("../FullScreenMessage").FullScreenMessage;
+    var ModalMessage: typeof import("../ModalMessage").ModalMessage;
+}
+export default InAppMessageDisplay;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,3 @@
+import { HandleMessageLinkAction } from '@aws-amplify/ui-react-core';
+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';
+import { BannerMessageProps } from '../BannerMessage';
+import { FullScreenMessageProps } from '../FullScreenMessage';
+import { ModalMessageProps } from '../ModalMessage';
+declare type BannerStyle = BannerMessageProps['style'];
+declare type CarouselStyle = any;
+declare type FullScreenStyle = FullScreenMessageProps['style'];
+declare 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,2 @@
+import { MessageLayoutProps } from './types';
+export declare function MessageLayout({ body, buttonSize, hasButtons, hasPrimaryButton, hasRenderableImage, hasSecondaryButton, header, image, onClose, orientation, primaryButton, secondaryButton, styles, }: MessageLayoutProps): JSX.Element;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,11 @@
+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 CONTENT_TEST_ID = "inappmessaging-messagelayout-content";
+export declare const IMAGE_CONTAINER_TEST_ID = "inappmessaging-messagelayout-imagecontainer";
+export declare const MESSAGE_LAYOUT_TEST_ID = "inappmessaging-messagelayout";
+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';
+import { ButtonProps } from '../../../primitives';
+import { MessageComponentStyles, MessageOverrideStyle, UseMessageProps } from '../hooks';
+declare type MessageLayoutOrientation = 'horizontal' | 'vertical';
+export declare 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,2 @@
+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';
+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/__tests__/useMessageImage.spec.d.ts

@@ -0,0 +1 @@
+export {};

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 declare 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';
+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/__tests__/useMessageProps.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export {};