@vibe/core 3.2.1-alpha-fb25f.0 → 3.4.0

package/dist/components/{Modal/Modal.d.ts → LegacyModal/LegacyModal.d.ts}

@@ -1,7 +1,7 @@
 import React, { ReactElement } from "react";
 import { ModalWidth as ModalWidthEnum } from "./ModalHelper";
-import { ModalWidth } from "./Modal.types";
-export interface ModalProps {
+import { ModalWidth } from "./LegacyModal.types";
+export interface LegacyModalProps {
     /**
      * Id of the modal, used internally and for accessibility
      */
@@ -65,9 +65,9 @@ export interface ModalProps {
      */
     unmountOnClose?: boolean;
 }
-declare const _default: ((import("../../types/VibeComponent").default<ModalProps, unknown> & Partial<{
+declare const _default: ((import("../../types/VibeComponent").default<LegacyModalProps, unknown> & Partial<{
     width: typeof ModalWidthEnum;
-}>) | (React.FC<ModalProps> & Partial<{
+}>) | (React.FC<LegacyModalProps> & Partial<{
     width: typeof ModalWidthEnum;
 }>)) & {
     width: typeof ModalWidthEnum;

package/dist/components/LegacyModal/LegacyModalContent/LegacyModalContent.d.ts

@@ -0,0 +1,7 @@
+import { FC, ReactElement } from "react";
+import VibeComponentProps from "../../../types/VibeComponentProps";
+export interface LegacyModalContentProps extends VibeComponentProps {
+    children: ReactElement | ReactElement[] | string;
+}
+declare const LegacyModalContent: FC<LegacyModalContentProps>;
+export default LegacyModalContent;

package/dist/components/LegacyModal/LegacyModalFooter/LegacyModalFooter.d.ts

@@ -0,0 +1,7 @@
+import { FC, ReactElement } from "react";
+import VibeComponentProps from "../../../types/VibeComponentProps";
+export interface LegacyModalFooterProps extends VibeComponentProps {
+    children: ReactElement | ReactElement[] | string;
+}
+declare const LegacyModalFooter: FC<LegacyModalFooterProps>;
+export default LegacyModalFooter;

package/dist/components/{Modal/ModalFooter/ModalFooterButtons/ModalFooterButtons.d.ts → LegacyModal/LegacyModalFooter/LegacyModalFooterButtons/LegacyModalFooterButtons.d.ts}

@@ -1,11 +1,11 @@
 import VibeComponentProps from "../../../../types/VibeComponentProps";
 import VibeComponent from "../../../../types/VibeComponent";
-export interface ModalFooterButtonsProps extends VibeComponentProps {
+export interface LegacyModalFooterButtonsProps extends VibeComponentProps {
     primaryButtonText: string;
     secondaryButtonText?: string;
     disablePrimaryButton?: boolean;
     onPrimaryButtonClick?: () => void;
     onSecondaryButtonClick?: () => void;
 }
-declare const ModalFooterButtons: VibeComponent<ModalFooterButtonsProps>;
-export default ModalFooterButtons;
+declare const LegacyModalFooterButtons: VibeComponent<LegacyModalFooterButtonsProps>;
+export default LegacyModalFooterButtons;

package/dist/components/{Modal/ModalHeader/ModalHeader.d.ts → LegacyModal/LegacyModalHeader/LegacyModalHeader.d.ts}

@@ -2,7 +2,7 @@ import { FC } from "react";
 import VibeComponentProps from "../../../types/VibeComponentProps";
 import { ElementContent } from "src/types/ElementContent";
 import { SubIcon } from "../../../types/SubIcon";
-interface BaseModalHeaderProps extends VibeComponentProps {
+interface BaseLegacyModalHeaderProps extends VibeComponentProps {
     /**
      * Description of the modal - pure string description is a recommended standard, use JSX ability only if there is a need to add links
      */
@@ -44,14 +44,14 @@ interface BaseModalHeaderProps extends VibeComponentProps {
      */
     closeButtonAriaLabel?: string;
 }
-interface ModalHeaderWithOnlyTitle extends BaseModalHeaderProps {
+interface LegacyModalHeaderWithOnlyTitle extends BaseLegacyModalHeaderProps {
     title: ElementContent;
     children?: never;
 }
-interface ModalHeaderWithOnlyChildren extends BaseModalHeaderProps {
+interface LegacyModalHeaderWithOnlyChildren extends BaseLegacyModalHeaderProps {
     title?: never;
     children: ElementContent;
 }
-export type ModalHeaderProps = ModalHeaderWithOnlyTitle | ModalHeaderWithOnlyChildren;
-declare const ModalHeader: FC<ModalHeaderProps>;
-export default ModalHeader;
+export type LegacyModalHeaderProps = LegacyModalHeaderWithOnlyTitle | LegacyModalHeaderWithOnlyChildren;
+declare const LegacyModalHeader: FC<LegacyModalHeaderProps>;
+export default LegacyModalHeader;

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

@@ -0,0 +1,6 @@
+export { default as Modal, LegacyModalProps as ModalProps } from "./LegacyModal";
+export { default as ModalHeader, LegacyModalHeaderProps as ModalHeaderProps } from "./LegacyModalHeader/LegacyModalHeader";
+export { default as ModalContent, LegacyModalContentProps as ModalContentProps } from "./LegacyModalContent/LegacyModalContent";
+export { default as ModalFooter, LegacyModalFooterProps as ModalFooterProps } from "./LegacyModalFooter/LegacyModalFooter";
+export { default as ModalFooterButtons, LegacyModalFooterButtonsProps as ModalFooterButtonsProps } from "./LegacyModalFooter/LegacyModalFooterButtons/LegacyModalFooterButtons";
+export * from "./LegacyModal.types";

package/dist/components/ModalNew/Modal/Modal.types.d.ts

@@ -1,16 +1,56 @@
 import { VibeComponentProps } from "../../../types";
 import React from "react";
 import { ModalTopActionsProps } from "../ModalTopActions/ModalTopActions.types";
+import { PortalTarget } from "../hooks/usePortalTarget/usePortalTarget.types";
 export type ModalSize = "small" | "medium" | "large";
 export type ModalCloseEvent = React.MouseEvent<HTMLDivElement | HTMLButtonElement> | React.KeyboardEvent<HTMLBodyElement>;
 export interface ModalProps extends VibeComponentProps {
+    /**
+     * Unique identifier for the modal.
+     */
     id: string;
+    /**
+     * Controls the visibility of the modal.
+     */
     show: boolean;
+    /**
+     * Determines the width and max-height of the modal.
+     */
     size?: ModalSize;
-    closeButtonTheme?: ModalTopActionsProps["color"];
+    /**
+     * Theme color for the close button.
+     */
+    closeButtonTheme?: ModalTopActionsProps["theme"];
+    /**
+     * Accessibility label for the close button.
+     */
     closeButtonAriaLabel?: ModalTopActionsProps["closeButtonAriaLabel"];
+    /**
+     * Callback fired when the modal should close.
+     */
     onClose?: (event: ModalCloseEvent) => void;
+    /**
+     * Additional action to render in the header area.
+     */
     renderHeaderAction?: ModalTopActionsProps["renderAction"];
+    /**
+     * Reference to an element that triggered the modal, used for animations.
+     */
     anchorElementRef?: React.RefObject<HTMLElement>;
+    /**
+     * When true, prevents closing the modal when clicking the overlay ("click-outside") or pressing ESC.
+     */
+    alertModal?: boolean;
+    /**
+     * The target element to render the modal into.
+     */
+    container?: PortalTarget;
+    /**
+     * Modal content.
+     */
     children: React.ReactNode;
+    /**
+     * Additional inline styles for the modal.
+     */
+    style?: React.CSSProperties;
 }

package/dist/components/ModalNew/ModalContent/ModalContent.types.d.ts

@@ -1,5 +1,8 @@
 import React from "react";
 import { VibeComponentProps } from "../../../types";
 export interface ModalContentProps extends VibeComponentProps {
+    /**
+     * Main content of the modal.
+     */
     children?: React.ReactNode;
 }

package/dist/components/ModalNew/ModalHeader/ModalHeader.types.d.ts

@@ -5,13 +5,24 @@ interface WithoutDescription {
     descriptionIcon?: never;
 }
 interface WithDescription {
+    /**
+     * Descriptive text or content below the title.
+     * When supplied, would also add an aria-describedby attribute to the modal dialog element.
+     */
     description: string | React.ReactNode;
+    /**
+     * Icon to display before the description. Can only be passed when description is supplied.
+     */
     descriptionIcon?: SubIcon | {
         name: SubIcon;
         className?: string;
     };
 }
 export type ModalHeaderProps = {
+    /**
+     * Main heading text of the modal.
+     * When supplied, would also add an aria-labelledby attribute to the modal dialog element.
+     */
     title: string;
-} & (WithoutDescription | WithDescription) & VibeComponentProps;
+} & (WithDescription | WithoutDescription) & VibeComponentProps;
 export {};

package/dist/components/ModalNew/ModalTopActions/ModalTopActions.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { ModalTopActionsProps } from "./ModalTopActions.types";
-declare const ModalTopActions: ({ renderAction, color, closeButtonAriaLabel, onClose }: ModalTopActionsProps) => React.JSX.Element;
+declare const ModalTopActions: ({ renderAction, theme, closeButtonAriaLabel, onClose }: ModalTopActionsProps) => React.JSX.Element;
 export default ModalTopActions;

package/dist/components/ModalNew/ModalTopActions/ModalTopActions.types.d.ts

@@ -2,15 +2,24 @@ import React from "react";
 import MenuButton from "../../MenuButton/MenuButton";
 import IconButton from "../../IconButton/IconButton";
 import { ButtonColor } from "../../Button/ButtonConstants";
-export type ModalTopActionsColor = "light" | "dark";
+export type ModalTopActionsTheme = "light" | "dark";
 export type ModalTopActionsButtonColor = ButtonColor.PRIMARY | ButtonColor.ON_PRIMARY_COLOR | ButtonColor.ON_INVERTED_BACKGROUND;
 export interface ModalTopActionsProps {
     /**
-     * action can be passed either as a function or direct
-     * it allows passing back to consumer the color he chose, so he won't have to define it twice
+     * Action element or render function for the top-right area.
+     * When provided as a function, receives the current button color theme
      */
     renderAction?: React.ReactElement<typeof MenuButton | typeof IconButton> | ((color?: ModalTopActionsButtonColor) => React.ReactElement<typeof MenuButton | typeof IconButton>);
-    color?: ModalTopActionsColor;
+    /**
+     * Color theme for the top actions
+     */
+    theme?: ModalTopActionsTheme;
+    /**
+     * Accessibility label for the close button
+     */
     closeButtonAriaLabel?: string;
+    /**
+     * Callback fired when the close button is clicked
+     */
     onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 }

package/dist/components/ModalNew/context/ModalContext.types.d.ts

@@ -1,11 +1,28 @@
 import React from "react";
 export type ModalContextProps = ModalProviderValue;
 export type ModalProviderValue = {
+    /**
+     * Unique identifier for the modal.
+     * In use to set the modal title and description IDs to be unique.
+     */
     modalId: string;
+    /**
+     * Callback to set the title element ID for accessibility.
+     */
     setTitleId: (id: string) => void;
+    /**
+     * Callback to set the description element ID for accessibility.
+     */
     setDescriptionId: (id: string) => void;
 };
 export interface ModalProviderProps {
+    /**
+     * Context value containing modal state and handlers.
+     */
     value: ModalProviderValue;
+    /**
+     * Modal provider children.
+     * Should be the Modal root.
+     */
     children: React.ReactNode;
 }

package/dist/components/ModalNew/footers/ModalFooter/ModalFooter.types.d.ts

@@ -1,5 +1,8 @@
 import React from "react";
 import { ModalFooterBaseProps } from "../ModalFooterBase/ModalFooterBase.types";
 export interface ModalFooterProps extends Omit<ModalFooterBaseProps, "renderAction"> {
+    /**
+     * Optional content to render on the left side of the footer.
+     */
     renderSideAction?: React.ReactNode;
 }

package/dist/components/ModalNew/footers/ModalFooterBase/ModalFooterBase.types.d.ts

@@ -1,11 +1,23 @@
 import { ButtonProps } from "../../../Button";
 import React from "react";
 import { VibeComponentProps } from "../../../../types";
-export interface ModalFooterActionProps extends Omit<ButtonProps, "children" | "kind"> {
+export interface ModalFooterActionProps extends Omit<ButtonProps, "children" | "kind" | "size"> {
+    /**
+     * Text to display as the Button's content.
+     */
     text: string;
 }
 export interface ModalFooterBaseProps extends VibeComponentProps {
+    /**
+     * Props for the primary action button.
+     */
     primaryButton: ModalFooterActionProps;
+    /**
+     * Props for the optional secondary action button.
+     */
     secondaryButton?: ModalFooterActionProps;
+    /**
+     * Additional content to render in the footer.
+     */
     renderAction?: React.ReactNode;
 }

package/dist/components/ModalNew/footers/ModalFooterWizard/ModalFooterWizard.d.ts

@@ -1,10 +1,4 @@
 import React from "react";
-import { VibeComponentProps } from "../../../../types";
-import { ModalFooterBaseProps } from "../ModalFooterBase/ModalFooterBase.types";
-export interface ModalFooterWizardProps extends Required<Pick<ModalFooterBaseProps, "primaryButton" | "secondaryButton">>, VibeComponentProps {
-    stepCount: number;
-    activeStep: number;
-    onDotClick: (e: React.MouseEvent, stepIndex: number) => void;
-}
+import { ModalFooterWizardProps } from "./ModalFooterWizard.types";
 declare const ModalFooterWizard: React.ForwardRefExoticComponent<ModalFooterWizardProps & React.RefAttributes<HTMLDivElement>>;
 export default ModalFooterWizard;

package/dist/components/ModalNew/footers/ModalFooterWizard/ModalFooterWizard.types.d.ts

@@ -0,0 +1,18 @@
+import { ModalFooterBaseProps } from "../ModalFooterBase/ModalFooterBase.types";
+import { VibeComponentProps } from "../../../../types";
+export interface ModalFooterWizardProps extends Required<Pick<ModalFooterBaseProps, "primaryButton" | "secondaryButton">>, VibeComponentProps {
+    /**
+     * Total number of steps in the wizard.
+     * This would render the appropriate number of step indicators ("dots") in the footer.
+     */
+    stepCount: number;
+    /**
+     * Current active step (0-based index).
+     * This would highlight the corresponding step indicator ("dot") in the footer.
+     */
+    activeStep: number;
+    /**
+     * Callback fired when a step indicator ("dot") is clicked.
+     */
+    onStepClick: (stepIndex: number) => void;
+}

package/dist/components/ModalNew/hooks/usePortalTarget/usePortalTarget.d.ts

@@ -0,0 +1,3 @@
+import { PortalTarget } from "./usePortalTarget.types";
+declare const usePortalTarget: (portalTarget?: PortalTarget) => Element | DocumentFragment;
+export default usePortalTarget;

package/dist/components/ModalNew/hooks/usePortalTarget/usePortalTarget.types.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export type PortalTarget = string | React.RefObject<Element> | Element | DocumentFragment;

package/dist/components/ModalNew/layouts/ModalBasicLayout/ModalBasicLayout.types.d.ts

@@ -1,5 +1,10 @@
 import React from "react";
 import { VibeComponentProps } from "../../../../types";
 export interface ModalBasicLayoutProps extends VibeComponentProps {
+    /**
+     * Layout children in the following order:
+     * 1. Header content
+     * 2. Main content
+     */
     children: React.ReactNode;
 }

package/dist/components/ModalNew/layouts/ModalFooterShadow.d.ts

@@ -1,3 +1,4 @@
 import React from "react";
-declare const ModalFooterShadow: () => React.JSX.Element;
+import { ModalFooterShadowProps } from "./ModalFooterShadow.types";
+declare const ModalFooterShadow: ({ show }: ModalFooterShadowProps) => React.JSX.Element;
 export default ModalFooterShadow;

package/dist/components/ModalNew/layouts/ModalFooterShadow.types.d.ts

@@ -0,0 +1,6 @@
+export interface ModalFooterShadowProps {
+    /**
+     * Controls the visibility of the shadow.
+     */
+    show: boolean;
+}

package/dist/components/ModalNew/layouts/ModalLayoutScrollableContent.types.d.ts

@@ -1,6 +1,15 @@
 import { ReactNode, UIEventHandler } from "react";
 export interface ModalLayoutScrollableContentProps {
+    /**
+     * Callback fired when the content is scrolled.
+     */
     onScroll?: UIEventHandler<HTMLDivElement>;
+    /**
+     * Additional class name.
+     */
     className?: string;
+    /**
+     * Scrollable content.
+     */
     children: ReactNode;
 }

package/dist/components/ModalNew/layouts/ModalMedia.types.d.ts

@@ -1,5 +1,8 @@
 import React from "react";
 import { VibeComponentProps } from "../../../types";
 export interface ModalMediaProps extends VibeComponentProps {
+    /**
+     * Media content to be displayed in the modal (image, video, Lottie, etc.).
+     */
     children: React.ReactNode;
 }

package/dist/components/ModalNew/layouts/ModalMediaLayout/ModalMediaLayout.types.d.ts

@@ -1,5 +1,11 @@
 import React from "react";
 import { VibeComponentProps } from "../../../../types";
 export interface ModalMediaLayoutProps extends VibeComponentProps {
+    /**
+     * Layout children in the following order:
+     * 1. Media content
+     * 2. Header content
+     * 3. Main content
+     */
     children: React.ReactNode;
 }

package/dist/components/ModalNew/layouts/ModalSideBySideLayout/ModalSideBySideLayout.types.d.ts

@@ -1,5 +1,11 @@
 import { VibeComponentProps } from "../../../../types";
 import React from "react";
 export interface ModalSideBySideLayoutProps extends VibeComponentProps {
+    /**
+     * Layout children in the following order:
+     * 1. Header content
+     * 2. Main content
+     * 3. Media content
+     */
     children: React.ReactNode;
 }

package/dist/components/Typography/Typography.types.d.ts

@@ -1,2 +1,2 @@
 export type TypographyColor = "primary" | "secondary" | "onPrimary" | "onInverted" | "fixedLight" | "fixedDark" | "inherit";
-export type TypographyAlign = "start" | "center" | "end";
+export type TypographyAlign = "start" | "center" | "end" | "inherit";

package/dist/components/Typography/TypographyConstants.d.ts

@@ -16,5 +16,6 @@ export declare enum TypographyColor {
 export declare enum TypographyAlign {
     START = "start",
     CENTER = "center",
-    END = "end"
+    END = "end",
+    INHERIT = "inherit"
 }

package/dist/components/index.d.ts

@@ -40,7 +40,7 @@ export * from "./ListTitle";
 export * from "./Loader";
 export * from "./Menu";
 export * from "./MenuButton";
-export * from "./Modal";
+export * from "./LegacyModal";
 export * from "./MultiStepIndicator";
 export * from "./ProgressBars";
 export * from "./RadioButton";

package/dist/mocked_classnames/components/{Modal/Modal.d.ts → LegacyModal/LegacyModal.d.ts}

@@ -1,7 +1,7 @@
 import React, { ReactElement } from "react";
 import { ModalWidth as ModalWidthEnum } from "./ModalHelper";
-import { ModalWidth } from "./Modal.types";
-export interface ModalProps {
+import { ModalWidth } from "./LegacyModal.types";
+export interface LegacyModalProps {
     /**
      * Id of the modal, used internally and for accessibility
      */
@@ -65,9 +65,9 @@ export interface ModalProps {
      */
     unmountOnClose?: boolean;
 }
-declare const _default: ((import("../../types/VibeComponent").default<ModalProps, unknown> & Partial<{
+declare const _default: ((import("../../types/VibeComponent").default<LegacyModalProps, unknown> & Partial<{
     width: typeof ModalWidthEnum;
-}>) | (React.FC<ModalProps> & Partial<{
+}>) | (React.FC<LegacyModalProps> & Partial<{
     width: typeof ModalWidthEnum;
 }>)) & {
     width: typeof ModalWidthEnum;

package/dist/mocked_classnames/components/LegacyModal/LegacyModalContent/LegacyModalContent.d.ts

@@ -0,0 +1,7 @@
+import { FC, ReactElement } from "react";
+import VibeComponentProps from "../../../types/VibeComponentProps";
+export interface LegacyModalContentProps extends VibeComponentProps {
+    children: ReactElement | ReactElement[] | string;
+}
+declare const LegacyModalContent: FC<LegacyModalContentProps>;
+export default LegacyModalContent;

package/dist/mocked_classnames/components/LegacyModal/LegacyModalFooter/LegacyModalFooter.d.ts

@@ -0,0 +1,7 @@
+import { FC, ReactElement } from "react";
+import VibeComponentProps from "../../../types/VibeComponentProps";
+export interface LegacyModalFooterProps extends VibeComponentProps {
+    children: ReactElement | ReactElement[] | string;
+}
+declare const LegacyModalFooter: FC<LegacyModalFooterProps>;
+export default LegacyModalFooter;

package/dist/mocked_classnames/components/{Modal/ModalFooter/ModalFooterButtons/ModalFooterButtons.d.ts → LegacyModal/LegacyModalFooter/LegacyModalFooterButtons/LegacyModalFooterButtons.d.ts}

@@ -1,11 +1,11 @@
 import VibeComponentProps from "../../../../types/VibeComponentProps";
 import VibeComponent from "../../../../types/VibeComponent";
-export interface ModalFooterButtonsProps extends VibeComponentProps {
+export interface LegacyModalFooterButtonsProps extends VibeComponentProps {
     primaryButtonText: string;
     secondaryButtonText?: string;
     disablePrimaryButton?: boolean;
     onPrimaryButtonClick?: () => void;
     onSecondaryButtonClick?: () => void;
 }
-declare const ModalFooterButtons: VibeComponent<ModalFooterButtonsProps>;
-export default ModalFooterButtons;
+declare const LegacyModalFooterButtons: VibeComponent<LegacyModalFooterButtonsProps>;
+export default LegacyModalFooterButtons;

package/dist/mocked_classnames/components/{Modal/ModalHeader/ModalHeader.d.ts → LegacyModal/LegacyModalHeader/LegacyModalHeader.d.ts}

@@ -2,7 +2,7 @@ import { FC } from "react";
 import VibeComponentProps from "../../../types/VibeComponentProps";
 import { ElementContent } from "src/types/ElementContent";
 import { SubIcon } from "../../../types/SubIcon";
-interface BaseModalHeaderProps extends VibeComponentProps {
+interface BaseLegacyModalHeaderProps extends VibeComponentProps {
     /**
      * Description of the modal - pure string description is a recommended standard, use JSX ability only if there is a need to add links
      */
@@ -44,14 +44,14 @@ interface BaseModalHeaderProps extends VibeComponentProps {
      */
     closeButtonAriaLabel?: string;
 }
-interface ModalHeaderWithOnlyTitle extends BaseModalHeaderProps {
+interface LegacyModalHeaderWithOnlyTitle extends BaseLegacyModalHeaderProps {
     title: ElementContent;
     children?: never;
 }
-interface ModalHeaderWithOnlyChildren extends BaseModalHeaderProps {
+interface LegacyModalHeaderWithOnlyChildren extends BaseLegacyModalHeaderProps {
     title?: never;
     children: ElementContent;
 }
-export type ModalHeaderProps = ModalHeaderWithOnlyTitle | ModalHeaderWithOnlyChildren;
-declare const ModalHeader: FC<ModalHeaderProps>;
-export default ModalHeader;
+export type LegacyModalHeaderProps = LegacyModalHeaderWithOnlyTitle | LegacyModalHeaderWithOnlyChildren;
+declare const LegacyModalHeader: FC<LegacyModalHeaderProps>;
+export default LegacyModalHeader;

package/dist/mocked_classnames/components/LegacyModal/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Modal, LegacyModalProps as ModalProps } from "./LegacyModal";
+export { default as ModalHeader, LegacyModalHeaderProps as ModalHeaderProps } from "./LegacyModalHeader/LegacyModalHeader";
+export { default as ModalContent, LegacyModalContentProps as ModalContentProps } from "./LegacyModalContent/LegacyModalContent";
+export { default as ModalFooter, LegacyModalFooterProps as ModalFooterProps } from "./LegacyModalFooter/LegacyModalFooter";
+export { default as ModalFooterButtons, LegacyModalFooterButtonsProps as ModalFooterButtonsProps } from "./LegacyModalFooter/LegacyModalFooterButtons/LegacyModalFooterButtons";
+export * from "./LegacyModal.types";

package/dist/mocked_classnames/components/ModalNew/Modal/Modal.types.d.ts

@@ -1,16 +1,56 @@
 import { VibeComponentProps } from "../../../types";
 import React from "react";
 import { ModalTopActionsProps } from "../ModalTopActions/ModalTopActions.types";
+import { PortalTarget } from "../hooks/usePortalTarget/usePortalTarget.types";
 export type ModalSize = "small" | "medium" | "large";
 export type ModalCloseEvent = React.MouseEvent<HTMLDivElement | HTMLButtonElement> | React.KeyboardEvent<HTMLBodyElement>;
 export interface ModalProps extends VibeComponentProps {
+    /**
+     * Unique identifier for the modal.
+     */
     id: string;
+    /**
+     * Controls the visibility of the modal.
+     */
     show: boolean;
+    /**
+     * Determines the width and max-height of the modal.
+     */
     size?: ModalSize;
-    closeButtonTheme?: ModalTopActionsProps["color"];
+    /**
+     * Theme color for the close button.
+     */
+    closeButtonTheme?: ModalTopActionsProps["theme"];
+    /**
+     * Accessibility label for the close button.
+     */
     closeButtonAriaLabel?: ModalTopActionsProps["closeButtonAriaLabel"];
+    /**
+     * Callback fired when the modal should close.
+     */
     onClose?: (event: ModalCloseEvent) => void;
+    /**
+     * Additional action to render in the header area.
+     */
     renderHeaderAction?: ModalTopActionsProps["renderAction"];
+    /**
+     * Reference to an element that triggered the modal, used for animations.
+     */
     anchorElementRef?: React.RefObject<HTMLElement>;
+    /**
+     * When true, prevents closing the modal when clicking the overlay ("click-outside") or pressing ESC.
+     */
+    alertModal?: boolean;
+    /**
+     * The target element to render the modal into.
+     */
+    container?: PortalTarget;
+    /**
+     * Modal content.
+     */
     children: React.ReactNode;
+    /**
+     * Additional inline styles for the modal.
+     */
+    style?: React.CSSProperties;
 }

package/dist/mocked_classnames/components/ModalNew/ModalContent/ModalContent.types.d.ts

@@ -1,5 +1,8 @@
 import React from "react";
 import { VibeComponentProps } from "../../../types";
 export interface ModalContentProps extends VibeComponentProps {
+    /**
+     * Main content of the modal.
+     */
     children?: React.ReactNode;
 }

package/dist/mocked_classnames/components/ModalNew/ModalHeader/ModalHeader.types.d.ts

@@ -5,13 +5,24 @@ interface WithoutDescription {
     descriptionIcon?: never;
 }
 interface WithDescription {
+    /**
+     * Descriptive text or content below the title.
+     * When supplied, would also add an aria-describedby attribute to the modal dialog element.
+     */
     description: string | React.ReactNode;
+    /**
+     * Icon to display before the description. Can only be passed when description is supplied.
+     */
     descriptionIcon?: SubIcon | {
         name: SubIcon;
         className?: string;
     };
 }
 export type ModalHeaderProps = {
+    /**
+     * Main heading text of the modal.
+     * When supplied, would also add an aria-labelledby attribute to the modal dialog element.
+     */
     title: string;
-} & (WithoutDescription | WithDescription) & VibeComponentProps;
+} & (WithDescription | WithoutDescription) & VibeComponentProps;
 export {};

package/dist/mocked_classnames/components/ModalNew/ModalTopActions/ModalTopActions.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { ModalTopActionsProps } from "./ModalTopActions.types";
-declare const ModalTopActions: ({ renderAction, color, closeButtonAriaLabel, onClose }: ModalTopActionsProps) => React.JSX.Element;
+declare const ModalTopActions: ({ renderAction, theme, closeButtonAriaLabel, onClose }: ModalTopActionsProps) => React.JSX.Element;
 export default ModalTopActions;