@commercetools-frontend/application-components 22.30.3 → 22.32.0

package/dist/declarations/src/components/detail-pages/form-detail-page/form-detail-page.d.ts

@@ -6,26 +6,77 @@ type MessageDescriptor = {
 };
 type Label = string | MessageDescriptor;
 type FormDetailPageProps = {
+    /**
+     * The title of the page.
+     */
     title?: string;
+    /**
+     * The subtitle of the page.
+     */
     subtitle?: string | ReactElement;
+    /**
+     * Replaces the title/subtitle row with a custom one (for special use cases).
+     */
     customTitleRow?: ReactNode;
+    /**
+     * This code is used to configure which Custom Views are available for this page.
+     */
     customViewLocatorCode?: string;
+    /**
+     * Any React node displayed as the content within the page.
+     */
     children: ReactNode;
+    /**
+     * A return route path label.
+     */
     previousPathLabel?: string | MessageDescriptor;
+    /**
+     * Function called when back button is pressed.
+     */
     onPreviousPathClick: (event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>) => void;
+    /**
+     * Indicates whether the primary button is deactivated or not.
+     */
     isPrimaryButtonDisabled?: boolean;
+    /**
+     * Indicates whether the secondary button is deactivated or not.
+     */
     isSecondaryButtonDisabled?: boolean;
+    /**
+     * Use this prop to pass `data-` attributes to the primary button
+     */
     dataAttributesPrimaryButton?: {
         [key: string]: string;
     };
+    /**
+     * Use this prop to pass `data-` attributes to the secondary button.
+     */
     dataAttributesSecondaryButton?: {
         [key: string]: string;
     };
+    /**
+     * `Save` | The label for the primary button as a string, or as an Intl message.
+     */
     labelPrimaryButton?: Label;
+    /**
+     * `Cancel` | The label for the secondary button as a string, or as an Intl message.
+     */
     labelSecondaryButton?: Label;
+    /**
+     * Called when the primary button is clicked.
+     */
     onPrimaryButtonClick: (event: SyntheticEvent) => void;
+    /**
+     * Called when the secondary button is clicked.
+     */
     onSecondaryButtonClick: (event: SyntheticEvent) => void;
+    /**
+     * Hides the form controls.
+     */
     hideControls: boolean;
+    /**
+     * The Icon for the secondary button label
+     */
     iconLeftSecondaryButton?: ReactElement;
 };
 declare const FormDetailPage: {
@@ -87,7 +138,9 @@ declare const FormDetailPage: {
             defaultMessage: string;
         };
         close: {
-            id: string;
+            id: string; /**
+             * Any React node displayed as the content within the page.
+             */
             defaultMessage: string;
         };
         edit: {

package/dist/declarations/src/components/detail-pages/info-detail-page/info-detail-page.d.ts

@@ -6,12 +6,33 @@ type MessageDescriptor = {
     values?: Record<string, ReactNode>;
 };
 type InfoDetailPageProps = {
+    /**
+     * The title of the page.
+     */
     title?: string;
+    /**
+     * The subtitle of the page.
+     */
     subtitle?: string | ReactElement;
+    /**
+     * Replaces the title/subtitle row with a custom one (for special use cases)
+     */
     customTitleRow?: ReactNode;
+    /**
+     * Any React node displayed as the content within the page.
+     */
     children: ReactNode;
+    /**
+     * A return route path label.
+     */
     previousPathLabel?: string | MessageDescriptor;
+    /**
+     * This code is used to configure which Custom Views are available for this page.
+     */
     customViewLocatorCode?: string;
+    /**
+     * Function called when back button is pressed.
+     */
     onPreviousPathClick: (event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>) => void;
 };
 declare const InfoDetailPage: {

package/dist/declarations/src/components/detail-pages/tabular-detail-page/tabular-detail-page.d.ts

@@ -7,15 +7,45 @@ type MessageDescriptor = {
     values?: Record<string, ReactNode>;
 };
 type TTabularDetailPageProps = {
+    /**
+     * The title of the page.
+     */
     title?: string;
+    /**
+     * The subtitle of the page.
+     */
     subtitle?: string | ReactElement;
+    /**
+     * Replaces the title/subtitle row with a custom one (for special use cases)
+     */
     customTitleRow?: ReactNode;
+    /**
+     * Any React node displayed as the tab panel.
+     */
     children: ReactNode;
+    /**
+     * A composition of tab components.
+     */
     tabControls: ReactNode;
+    /**
+     * Any React node to be rendered as the form controls
+     */
     formControls?: ReactNode;
+    /**
+     * Determines if the form controls should be rendered.
+     */
     hideControls: boolean;
+    /**
+     * These codes are used to configure which Custom Views are available for every tab.
+     */
     customViewLocatorCodes?: Record<string, LocationDescriptor>;
+    /**
+     * A return route path label.
+     */
     previousPathLabel?: string | MessageDescriptor;
+    /**
+     * Function called when back button is pressed.
+     */
     onPreviousPathClick: (event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>) => void;
 };
 declare const TabularDetailPage: {

package/dist/declarations/src/components/dialogs/form-dialog/form-dialog.d.ts

@@ -26,6 +26,7 @@ export type TFormDialogProps = {
     };
     getParentSelector?: () => HTMLElement;
     iconLeftSecondaryButton?: ReactElement;
+    footerContent?: ReactNode;
 };
 declare const FormDialog: {
     (props: TFormDialogProps): import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;

package/dist/declarations/src/components/dialogs/internals/dialog-footer.d.ts

@@ -1,4 +1,4 @@
-import type { ReactElement, SyntheticEvent } from 'react';
+import type { ReactElement, SyntheticEvent, ReactNode } from 'react';
 type MessageDescriptor = {
     id: string;
     description?: string | object;
@@ -19,6 +19,7 @@ type Props = {
     };
     children?: never;
     iconLeftSecondaryButton?: ReactElement;
+    footerContent?: ReactNode;
 };
 declare const DialogFooter: {
     (props: Props): import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;

package/dist/declarations/src/components/internals/page-header.d.ts

@@ -2,6 +2,9 @@ import type { ReactElement, ReactNode } from 'react';
 type Props = {
     title: string;
     subtitle?: string | ReactElement;
+    /**
+     * This code is used to configure which Custom Views are available for this page.
+     */
     customViewLocatorCode?: string;
     children?: ReactNode;
 };

package/dist/declarations/src/components/main-pages/custom-form-main-page/custom-form-main-page.d.ts

@@ -1,12 +1,37 @@
 import type { ReactElement, ReactNode } from 'react';
 type CustomFormMainPageProps = {
+    /**
+     * The title of the page.
+     */
     title?: string;
+    /**
+     * The subtitle of the page.
+     */
     subtitle?: string | ReactElement;
+    /**
+     * Replaces the title/subtitle row with a custom one (for special use cases).
+     */
     customTitleRow?: ReactNode;
+    /**
+     * This code is used to configure which Custom Views are available for this page.
+     */
     customViewLocatorCode?: string;
+    /**
+     * Any React node displayed as the content within the page.
+     */
     children: ReactNode;
+    /**
+     * Any React node to be rendered as the form controls.
+     */
     formControls?: ReactNode;
+    /**
+     * Determines if the form controls should be rendered.
+     */
     hideControls?: boolean;
+    /**
+     * Determines whether the divider between header and content should be hidden.
+     * (default: false)
+     */
     hideDivider?: boolean;
 };
 declare const CustomFormMainPage: {
@@ -154,11 +179,15 @@ declare const CustomFormMainPage: {
         };
         add: {
             id: string;
-            defaultMessage: string;
+            defaultMessage: string; /**
+             * The subtitle of the page.
+             */
         };
         remove: {
             id: string;
-            defaultMessage: string;
+            defaultMessage: string; /**
+             * Replaces the title/subtitle row with a custom one (for special use cases).
+             */
         };
         close: {
             id: string;
@@ -186,7 +215,10 @@ declare const CustomFormMainPage: {
         };
         inactive: {
             id: string;
-            defaultMessage: string;
+            defaultMessage: string; /**
+             * Determines whether the divider between header and content should be hidden.
+             * (default: false)
+             */
         };
         enable: {
             id: string;

package/dist/declarations/src/components/main-pages/form-main-page/form-main-page.d.ts

@@ -6,24 +6,69 @@ type MessageDescriptor = {
 };
 type Label = string | MessageDescriptor;
 type FormMainPageProps = {
+    /**
+     * The title of the page.
+     */
     title?: string;
+    /**
+     * The subtitle of the page.
+     */
     subtitle?: string | ReactElement;
+    /**
+     * Replaces the title/subtitle row with a custom one (for special use cases)
+     */
     customTitleRow?: ReactNode;
+    /**
+     * Any React node displayed as the content within the page.
+     */
     children: ReactNode;
+    /**
+     * Determines if the form controls should be rendered.
+     */
     hideControls?: boolean;
+    /**
+     * Indicates whether the primary button is deactivated or not.
+     */
     isPrimaryButtonDisabled?: boolean;
+    /**
+     * Indicates whether the secondary button is deactivated or not.
+     */
     isSecondaryButtonDisabled?: boolean;
+    /**
+     * Use this prop to pass `data-` attributes to the primary button
+     */
     dataAttributesPrimaryButton?: {
         [key: string]: string;
     };
+    /**
+     * Use this prop to pass `data-` attributes to the secondary button.
+     */
     dataAttributesSecondaryButton?: {
         [key: string]: string;
     };
+    /**
+     * `Save` | The label for the primary button as a string, or as an Intl message.
+     */
     labelPrimaryButton?: Label;
+    /**
+     * `Cancel` | The label for the secondary button as a string, or as an Intl message.
+     */
     labelSecondaryButton?: Label;
+    /**
+     * The Icon for the secondary button label
+     */
     iconLeftSecondaryButton?: ReactElement;
+    /**
+     * This code is used to configure which Custom Views are available for this page.
+     */
     customViewLocatorCode?: string;
+    /**
+     * Called when the primary button is clicked.
+     */
     onPrimaryButtonClick: (event: SyntheticEvent) => void;
+    /**
+     * Called when the secondary button is clicked.
+     */
     onSecondaryButtonClick: (event: SyntheticEvent) => void;
 };
 declare const FormMainPage: {
@@ -62,7 +107,9 @@ declare const FormMainPage: {
         };
         save: {
             id: string;
-            defaultMessage: string;
+            defaultMessage: string; /**
+             * The title of the page.
+             */
         };
         update: {
             id: string;
@@ -81,7 +128,9 @@ declare const FormMainPage: {
             defaultMessage: string;
         };
         remove: {
-            id: string;
+            id: string; /**
+             * Determines if the form controls should be rendered.
+             */
             defaultMessage: string;
         };
         close: {

package/dist/declarations/src/components/main-pages/info-main-page/info-main-page.d.ts

@@ -1,9 +1,24 @@
 import type { ReactElement, ReactNode } from 'react';
 type InfoMainPageProps = {
+    /**
+     * The title of the page.
+     */
     title?: string;
+    /**
+     * The subtitle of the page.
+     */
     subtitle?: string | ReactElement;
+    /**
+     * Replaces the title/subtitle row with a custom one (for special use cases).
+     */
     customTitleRow?: ReactNode;
+    /**
+     * This code is used to configure which Custom Views are available for this page.
+     */
     customViewLocatorCode?: string;
+    /**
+     * Any React node displayed as the content within the page.
+     */
     children: ReactNode;
 };
 declare const InfoMainPage: {

package/dist/declarations/src/components/main-pages/tabular-main-page/tabular-main-page.d.ts

@@ -1,13 +1,37 @@
 import type { ReactElement, ReactNode } from 'react';
 import type { LocationDescriptor } from 'history';
 type TTabularMainPageProps = {
+    /**
+     * The title of the page.
+     */
     title?: string;
+    /**
+     * The subtitle of the page.
+     */
     subtitle?: string | ReactElement;
+    /**
+     * Replaces the title/subtitle row with a custom one (for special use cases)
+     */
     customTitleRow?: ReactNode;
+    /**
+     * Any React node displayed as the tab panel.
+     */
     children: ReactNode;
+    /**
+     * A composition of tab components.
+     */
     tabControls: ReactNode;
+    /**
+     * Any React node to be rendered as the form controls.
+     */
     formControls?: ReactNode;
+    /**
+     * Determines if the form controls should be rendered.
+     */
     hideControls: boolean;
+    /**
+     * These codes are used to configure which Custom Views are available for every tab.
+     */
     customViewLocatorCodes?: Record<string, LocationDescriptor>;
 };
 declare const TabularMainPage: {
@@ -160,7 +184,9 @@ declare const TabularMainPage: {
         remove: {
             id: string;
             defaultMessage: string;
-        };
+        }; /**
+         * The title of the page.
+         */
         close: {
             id: string;
             defaultMessage: string;

package/dist/declarations/src/components/modal-pages/custom-form-modal-page/custom-form-modal-page.d.ts

@@ -7,13 +7,22 @@ type MessageDescriptor = {
 };
 type Label = string | MessageDescriptor;
 type Props = {
+    /**
+     * @deprecated Not used anymore, as the value is controlled via the Stacking Layer System.
+     */
     level?: number;
     title: string;
     isOpen: boolean;
+    /**
+     * This code is used to configure which Custom Views are available for this page.
+     */
     customViewLocatorCode?: string;
     onClose?: (event: SyntheticEvent) => void;
     children: ReactNode;
     zIndex?: number;
+    /**
+     * @deprecated Not used anymore, as the value is controlled via the Stacking Layer System.
+     */
     baseZIndex?: number;
     getParentSelector?: () => HTMLElement;
     shouldDelayOnClose?: boolean;

package/dist/declarations/src/components/modal-pages/form-modal-page/form-modal-page.d.ts

@@ -7,13 +7,22 @@ type MessageDescriptor = {
 };
 type Label = string | MessageDescriptor;
 type Props = {
+    /**
+     * @deprecated Not used anymore, as the value is controlled via the Stacking Layer System.
+     */
     level?: number;
     title: string;
     isOpen: boolean;
     onClose?: (event: SyntheticEvent) => void;
+    /**
+     * This code is used to configure which Custom Views are available for this page.
+     */
     customViewLocatorCode?: string;
     children: ReactNode;
     zIndex?: number;
+    /**
+     * @deprecated Not used anymore, as the value is controlled via the Stacking Layer System.
+     */
     baseZIndex?: number;
     getParentSelector?: () => HTMLElement;
     shouldDelayOnClose?: boolean;
@@ -54,7 +63,9 @@ declare const FormModalPage: {
             defaultMessage: string;
         };
         save: {
-            id: string;
+            id: string; /**
+             * @deprecated Not used anymore, as the value is controlled via the Stacking Layer System.
+             */
             defaultMessage: string;
         };
         update: {

package/dist/declarations/src/components/modal-pages/info-modal-page/info-modal-page.d.ts

@@ -7,13 +7,22 @@ type MessageDescriptor = {
 };
 type Label = string | MessageDescriptor;
 type Props = {
+    /**
+     * @deprecated Not used anymore, as the value is controlled via the Stacking Layer System.
+     */
     level?: number;
     title: string;
     isOpen: boolean;
+    /**
+     * This code is used to configure which Custom Views are available for this page.
+     */
     customViewLocatorCode?: string;
     onClose?: (event: SyntheticEvent) => void;
     children: ReactNode;
     zIndex?: number;
+    /**
+     * @deprecated Not used anymore, as the value is controlled via the Stacking Layer System.
+     */
     baseZIndex?: number;
     getParentSelector?: () => HTMLElement;
     shouldDelayOnClose?: boolean;

package/dist/declarations/src/components/modal-pages/internals/modal-page.d.ts

@@ -9,12 +9,18 @@ type MessageDescriptor = {
 type Label = string | MessageDescriptor;
 export type TModalPageSize = 10 | 20 | 30 | 'scale';
 type Props = {
+    /**
+     * @deprecated Not used anymore, as the value is controlled via the Stacking Layer System.
+     */
     level?: number;
     title: string;
     isOpen: boolean;
     onClose?: (event: SyntheticEvent) => void;
     children: ReactNode;
     zIndex?: number;
+    /**
+     * @deprecated Not used anymore, as the value is controlled via the Stacking Layer System.
+     */
     baseZIndex?: number;
     getParentSelector: typeof getDefaultParentSelector;
     shouldDelayOnClose: boolean;

package/dist/declarations/src/components/modal-pages/tabular-modal-page/tabular-modal-page.d.ts

@@ -8,13 +8,22 @@ type MessageDescriptor = {
 };
 type Label = string | MessageDescriptor;
 type Props = {
+    /**
+     * @deprecated Not used anymore, as the value is controlled via the Stacking Layer System.
+     */
     level?: number;
     title: string;
     isOpen: boolean;
+    /**
+     * These codes are used to configure which Custom Views are available for every tab.
+     */
     customViewLocatorCodes?: Record<string, LocationDescriptor>;
     onClose?: (event: SyntheticEvent) => void;
     children: ReactNode;
     zIndex?: number;
+    /**
+     * @deprecated Not used anymore, as the value is controlled via the Stacking Layer System.
+     */
     baseZIndex?: number;
     getParentSelector?: () => HTMLElement;
     shouldDelayOnClose?: boolean;

package/dist/declarations/src/components/portals-container/portals-container.d.ts

@@ -4,11 +4,40 @@ type TLayoutRefs = {
     notificationsPageRef: MutableRefObject<HTMLDivElement>;
 };
 type TPortalsContainerProps = {
+    /**
+     * The offset value for positioning the container from the top, when opened.
+     * Usually this corresponds to the height of the header section.
+     * Defaults to `0px`.
+     */
     offsetTop?: string;
+    /**
+     * The offset value for positioning the container from the left, when opened.
+     * Usually this corresponds to the min width of the nav menu.
+     * Defaults to `0px`.
+     */
     offsetLeft?: string;
+    /**
+     * The offset value for positioning the container from the left, when opened.
+     * The value is only applied when the `.body__menu-open` global class is added to the DOM.
+     * Usually this corresponds to the width of the expanded nav menu.
+     * Defaults to `0px`.
+     */
     offsetLeftOnExpandedMenu?: string;
+    /**
+     * The CSS selector to apply the `overflow: hidden` style to (preventing scrolling)
+     * when a modal container is open.
+     * Defaults to `main`.
+     */
     containerSelectorToPreventScrollingOnOpen?: string;
+    /**
+     * The `z-index` value to apply to the portal container..
+     * Defaults to `10000`.
+     */
     zIndex?: number;
+    /**
+     * The base `z-index` value to apply to each modal container.
+     * Defaults to `1000`.
+     */
     baseModalZIndex?: number;
 };
 declare const PortalsContainer: import("react").ForwardRefExoticComponent<TPortalsContainerProps & import("react").RefAttributes<TLayoutRefs>>;

package/dist/declarations/src/components/public-page-layout/public-page-layout.d.ts

@@ -1,8 +1,25 @@
 import { FC, ReactNode } from 'react';
 type TProps = {
+    /**
+     * The text to be displayed below the commercetools logo.
+     */
     welcomeMessage?: string;
+    /**
+     * Renders a node below the content. This is usually the place for rendering
+     * links to the privacy, terms, etc pages.
+     */
     legalMessage?: ReactNode;
+    /**
+     * The `normal` scale uses an horizontal contraint size of `8` (384px).
+     * The `wide` scale uses an horizontal contraint size of `15` (742px).
+     * The `wide` scale can be used for rendering the content in 2 columns.
+     */
     contentScale?: 'normal' | 'wide';
+    /**
+     * If `contentScale` is `normal`, the content is rendered in one column.
+     * If `contentScale` is `wide`, you need to pass 2 children as they will be displayed
+     * in two columns.
+     */
     children: ReactNode;
 };
 declare const PublicPageLayout: FC<TProps>;

package/dist/declarations/src/components/public-page-layout/public-page-layout.styles.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+export declare const Container: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ContainerColumn: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ContainerColumnWide: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const GradientBackgroundContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/declarations/src/components/tab-header/tab-header.d.ts

@@ -2,12 +2,31 @@ import type { ReactNode } from 'react';
 import type { LocationDescriptor } from 'history';
 import { type MessageDescriptor } from 'react-intl';
 export type TTabHeaderProps = {
+    /**
+     * A route path to redirect to when the tab is clicked.
+     */
     to: string | LocationDescriptor;
+    /**
+     * The label of the tab.
+     * * <br />
+     * Required if `intlMessage` is not provided.
+     */
     label?: string;
+    /**
+     * The label of the tab, using an `intl` message object.
+     * <br />
+     * Required if `label` is not provided.
+     */
     intlMessage?: MessageDescriptor & {
         values?: Record<string, ReactNode>;
     };
+    /**
+     * If `true`, indicates that the element is in a disabled state.
+     */
     isDisabled: boolean;
+    /**
+     * If `true`, marks the tab as active if the link matches exactly the route.
+     */
     exactPathMatch: boolean;
 };
 export declare const TabHeader: {