@commercetools-frontend/application-components 21.12.0 → 21.14.0

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

@@ -67,6 +67,8 @@ declare const CustomFormDetailPage: {
     };
     FormSecondaryButton: {
         (props: {
+            iconLeft?: ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+        } & {
             label: string | {
                 id: string;
                 description?: string | object | undefined;
@@ -81,6 +83,8 @@ declare const CustomFormDetailPage: {
         }): import("@emotion/react/jsx-runtime").JSX.Element;
         displayName: string;
         defaultProps: Pick<{
+            iconLeft?: ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+        } & {
             label: string | {
                 id: string;
                 description?: string | object | undefined;

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

@@ -25,6 +25,7 @@ declare type FormDetailPageProps = {
     onPrimaryButtonClick: (event: SyntheticEvent) => void;
     onSecondaryButtonClick: (event: SyntheticEvent) => void;
     hideControls: boolean;
+    iconLeftSecondaryButton?: ReactElement;
 };
 declare const FormDetailPage: {
     (props: FormDetailPageProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -51,6 +51,8 @@ declare const TabularDetailPage: {
     };
     FormSecondaryButton: {
         (props: {
+            iconLeft?: ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+        } & {
             label: string | {
                 id: string;
                 description?: string | object | undefined;
@@ -65,6 +67,8 @@ declare const TabularDetailPage: {
         }): import("@emotion/react/jsx-runtime").JSX.Element;
         displayName: string;
         defaultProps: Pick<{
+            iconLeft?: ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+        } & {
             label: string | {
                 id: string;
                 description?: string | object | undefined;

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

@@ -1,4 +1,4 @@
-import { SyntheticEvent, ReactNode } from 'react';
+import type { SyntheticEvent, ReactNode, ReactElement } from 'react';
 declare type MessageDescriptor = {
     id: string;
     description?: string | object;
@@ -24,6 +24,7 @@ declare type Props = {
         [key: string]: string;
     };
     getParentSelector?: () => HTMLElement;
+    iconLeftSecondaryButton?: ReactElement;
 };
 declare const FormDialog: {
     (props: Props): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
-import { SyntheticEvent } from 'react';
+import type { ReactElement, SyntheticEvent } from 'react';
 declare type MessageDescriptor = {
     id: string;
     description?: string | object;
@@ -18,6 +18,7 @@ declare type Props = {
         [key: string]: string;
     };
     children?: never;
+    iconLeftSecondaryButton?: ReactElement;
 };
 declare const DialogFooter: {
     (props: Props): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/declarations/src/components/internals/default-form-buttons.d.ts

@@ -1,4 +1,4 @@
-import type { SyntheticEvent } from 'react';
+import type { ReactElement, SyntheticEvent } from 'react';
 declare type MessageDescriptor = {
     id: string;
     description?: string | object;
@@ -19,10 +19,13 @@ declare const FormPrimaryButton: {
     displayName: string;
     defaultProps: Pick<Props, "label" | "isDisabled" | "dataAttributes">;
 };
+declare type SecondaryButtonProps = {
+    iconLeft?: ReactElement;
+} & Props;
 declare const FormSecondaryButton: {
-    (props: Props): import("@emotion/react/jsx-runtime").JSX.Element;
+    (props: SecondaryButtonProps): import("@emotion/react/jsx-runtime").JSX.Element;
     displayName: string;
-    defaultProps: Pick<Props, "label" | "isDisabled" | "dataAttributes">;
+    defaultProps: Pick<SecondaryButtonProps, "label" | "isDisabled" | "dataAttributes">;
 };
 declare const FormDeleteButton: {
     (props: Props): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,197 @@
+import type { ReactElement, ReactNode } from 'react';
+declare type CustomFormMainPageProps = {
+    title?: string;
+    subtitle?: string | ReactElement;
+    customTitleRow?: ReactNode;
+    children: ReactNode;
+    formControls?: ReactNode;
+    hideControls?: boolean;
+};
+declare const CustomFormMainPage: {
+    (props: CustomFormMainPageProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+    defaultProps: Pick<CustomFormMainPageProps, "hideControls">;
+    PageHeaderTitle: {
+        (props: {
+            title: string;
+            titleSize: "big" | "small";
+            truncate: boolean;
+            subtitle?: string | ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+            children?: undefined;
+        }): import("@emotion/react/jsx-runtime").JSX.Element;
+        displayName: string;
+        defaultProps: Pick<{
+            title: string;
+            titleSize: "big" | "small";
+            truncate: boolean;
+            subtitle?: string | ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+            children?: undefined;
+        }, "truncate" | "titleSize">;
+    };
+    FormPrimaryButton: {
+        (props: {
+            label: string | {
+                id: string;
+                description?: string | object | undefined;
+                defaultMessage?: string | undefined;
+            };
+            onClick: (event: import("react").SyntheticEvent<Element, Event>) => void;
+            isDisabled: boolean;
+            dataAttributes: {
+                [key: string]: string;
+            };
+            children?: undefined;
+        }): import("@emotion/react/jsx-runtime").JSX.Element;
+        displayName: string;
+        defaultProps: Pick<{
+            label: string | {
+                id: string;
+                description?: string | object | undefined;
+                defaultMessage?: string | undefined;
+            };
+            onClick: (event: import("react").SyntheticEvent<Element, Event>) => void;
+            isDisabled: boolean;
+            dataAttributes: {
+                [key: string]: string;
+            };
+            children?: undefined;
+        }, "label" | "isDisabled" | "dataAttributes">;
+    };
+    FormSecondaryButton: {
+        (props: {
+            iconLeft?: ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+        } & {
+            label: string | {
+                id: string;
+                description?: string | object | undefined;
+                defaultMessage?: string | undefined;
+            };
+            onClick: (event: import("react").SyntheticEvent<Element, Event>) => void;
+            isDisabled: boolean;
+            dataAttributes: {
+                [key: string]: string;
+            };
+            children?: undefined;
+        }): import("@emotion/react/jsx-runtime").JSX.Element;
+        displayName: string;
+        defaultProps: Pick<{
+            iconLeft?: ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+        } & {
+            label: string | {
+                id: string;
+                description?: string | object | undefined;
+                defaultMessage?: string | undefined;
+            };
+            onClick: (event: import("react").SyntheticEvent<Element, Event>) => void;
+            isDisabled: boolean;
+            dataAttributes: {
+                [key: string]: string;
+            };
+            children?: undefined;
+        }, "label" | "isDisabled" | "dataAttributes">;
+    };
+    FormDeleteButton: {
+        (props: {
+            label: string | {
+                id: string;
+                description?: string | object | undefined;
+                defaultMessage?: string | undefined;
+            };
+            onClick: (event: import("react").SyntheticEvent<Element, Event>) => void;
+            isDisabled: boolean;
+            dataAttributes: {
+                [key: string]: string;
+            };
+            children?: undefined;
+        }): import("@emotion/react/jsx-runtime").JSX.Element;
+        displayName: string;
+        defaultProps: Pick<{
+            label: string | {
+                id: string;
+                description?: string | object | undefined;
+                defaultMessage?: string | undefined;
+            };
+            onClick: (event: import("react").SyntheticEvent<Element, Event>) => void;
+            isDisabled: boolean;
+            dataAttributes: {
+                [key: string]: string;
+            };
+            children?: undefined;
+        }, "label" | "isDisabled" | "dataAttributes">;
+    };
+    Intl: {
+        cancel: {
+            id: string;
+            defaultMessage: string;
+        };
+        revert: {
+            id: string;
+            defaultMessage: string;
+        };
+        confirm: {
+            id: string;
+            defaultMessage: string;
+        };
+        save: {
+            id: string;
+            defaultMessage: string;
+        };
+        update: {
+            id: string;
+            defaultMessage: string;
+        };
+        create: {
+            id: string;
+            defaultMessage: string;
+        };
+        delete: {
+            id: string;
+            defaultMessage: string;
+        };
+        add: {
+            id: string;
+            defaultMessage: string;
+        };
+        remove: {
+            id: string;
+            defaultMessage: string;
+        };
+        close: {
+            id: string;
+            defaultMessage: string;
+        };
+        edit: {
+            id: string;
+            defaultMessage: string;
+        };
+        open: {
+            id: string;
+            defaultMessage: string;
+        };
+        activate: {
+            id: string;
+            defaultMessage: string;
+        };
+        deactivate: {
+            id: string;
+            defaultMessage: string;
+        };
+        active: {
+            id: string;
+            defaultMessage: string;
+        };
+        inactive: {
+            id: string;
+            defaultMessage: string;
+        };
+        enable: {
+            id: string;
+            defaultMessage: string;
+        };
+        disable: {
+            id: string;
+            defaultMessage: string;
+        };
+    };
+};
+export default CustomFormMainPage;

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

@@ -0,0 +1 @@
+export { default } from './custom-form-main-page';

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

@@ -0,0 +1,124 @@
+import type { ReactElement, ReactNode, SyntheticEvent } from 'react';
+declare type MessageDescriptor = {
+    id: string;
+    description?: string | object;
+    defaultMessage?: string;
+};
+declare type Label = string | MessageDescriptor;
+declare type FormMainPageProps = {
+    title?: string;
+    subtitle?: string | ReactElement;
+    customTitleRow?: ReactNode;
+    children: ReactNode;
+    hideControls?: boolean;
+    isPrimaryButtonDisabled?: boolean;
+    isSecondaryButtonDisabled?: boolean;
+    dataAttributesPrimaryButton?: {
+        [key: string]: string;
+    };
+    dataAttributesSecondaryButton?: {
+        [key: string]: string;
+    };
+    labelPrimaryButton?: Label;
+    labelSecondaryButton?: Label;
+    iconLeftSecondaryButton?: ReactElement;
+    onPrimaryButtonClick: (event: SyntheticEvent) => void;
+    onSecondaryButtonClick: (event: SyntheticEvent) => void;
+};
+declare const FormMainPage: {
+    (props: FormMainPageProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+    defaultProps: Pick<FormMainPageProps, "hideControls">;
+    PageHeaderTitle: {
+        (props: {
+            title: string;
+            titleSize: "big" | "small";
+            truncate: boolean;
+            subtitle?: string | ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+            children?: undefined;
+        }): import("@emotion/react/jsx-runtime").JSX.Element;
+        displayName: string;
+        defaultProps: Pick<{
+            title: string;
+            titleSize: "big" | "small";
+            truncate: boolean;
+            subtitle?: string | ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+            children?: undefined;
+        }, "truncate" | "titleSize">;
+    };
+    Intl: {
+        cancel: {
+            id: string;
+            defaultMessage: string;
+        };
+        revert: {
+            id: string;
+            defaultMessage: string;
+        };
+        confirm: {
+            id: string;
+            defaultMessage: string;
+        };
+        save: {
+            id: string;
+            defaultMessage: string;
+        };
+        update: {
+            id: string;
+            defaultMessage: string;
+        };
+        create: {
+            id: string;
+            defaultMessage: string;
+        };
+        delete: {
+            id: string;
+            defaultMessage: string;
+        };
+        add: {
+            id: string;
+            defaultMessage: string;
+        };
+        remove: {
+            id: string;
+            defaultMessage: string;
+        };
+        close: {
+            id: string;
+            defaultMessage: string;
+        };
+        edit: {
+            id: string;
+            defaultMessage: string;
+        };
+        open: {
+            id: string;
+            defaultMessage: string;
+        };
+        activate: {
+            id: string;
+            defaultMessage: string;
+        };
+        deactivate: {
+            id: string;
+            defaultMessage: string;
+        };
+        active: {
+            id: string;
+            defaultMessage: string;
+        };
+        inactive: {
+            id: string;
+            defaultMessage: string;
+        };
+        enable: {
+            id: string;
+            defaultMessage: string;
+        };
+        disable: {
+            id: string;
+            defaultMessage: string;
+        };
+    };
+};
+export default FormMainPage;

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

@@ -0,0 +1 @@
+export { default } from './form-main-page';

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

@@ -0,0 +1 @@
+export { default } from './info-main-page';

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

@@ -0,0 +1,29 @@
+import type { ReactElement, ReactNode } from 'react';
+declare type InfoMainPageProps = {
+    title?: string;
+    subtitle?: string | ReactElement;
+    customTitleRow?: ReactNode;
+    children: ReactNode;
+};
+declare const InfoMainPage: {
+    (props: InfoMainPageProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+    PageHeaderTitle: {
+        (props: {
+            title: string;
+            titleSize: "big" | "small";
+            truncate: boolean;
+            subtitle?: string | ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+            children?: undefined;
+        }): import("@emotion/react/jsx-runtime").JSX.Element;
+        displayName: string;
+        defaultProps: Pick<{
+            title: string;
+            titleSize: "big" | "small";
+            truncate: boolean;
+            subtitle?: string | ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+            children?: undefined;
+        }, "truncate" | "titleSize">;
+    };
+};
+export default InfoMainPage;

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export declare const MainPageContainer: 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 Divider: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHRElement>, HTMLHRElement>, {}>;
+export declare const MainPageContent: 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/{tabular-main-page → main-pages/tabular-main-page}/tabular-main-page.d.ts

@@ -43,6 +43,8 @@ declare const TabularMainPage: {
     };
     FormSecondaryButton: {
         (props: {
+            iconLeft?: ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+        } & {
             label: string | {
                 id: string;
                 description?: string | object | undefined;
@@ -57,6 +59,8 @@ declare const TabularMainPage: {
         }): import("@emotion/react/jsx-runtime").JSX.Element;
         displayName: string;
         defaultProps: Pick<{
+            iconLeft?: ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+        } & {
             label: string | {
                 id: string;
                 description?: string | object | undefined;

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

@@ -57,6 +57,8 @@ declare const CustomFormModalPage: {
     };
     FormSecondaryButton: {
         (props: {
+            iconLeft?: ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+        } & {
             label: string | {
                 id: string;
                 description?: string | object | undefined;
@@ -71,6 +73,8 @@ declare const CustomFormModalPage: {
         }): import("@emotion/react/jsx-runtime").JSX.Element;
         displayName: string;
         defaultProps: Pick<{
+            iconLeft?: ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+        } & {
             label: string | {
                 id: string;
                 description?: string | object | undefined;

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

@@ -33,6 +33,7 @@ declare type Props = {
     onPrimaryButtonClick: (event: SyntheticEvent) => void;
     onSecondaryButtonClick: (event: SyntheticEvent) => void;
     hideControls: boolean;
+    iconLeftSecondaryButton?: ReactElement;
 };
 declare const FormModalPage: {
     (props: Props): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -60,6 +60,8 @@ declare const TabularModalPage: {
     };
     FormSecondaryButton: {
         (props: {
+            iconLeft?: ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+        } & {
             label: string | {
                 id: string;
                 description?: string | object | undefined;
@@ -74,6 +76,8 @@ declare const TabularModalPage: {
         }): import("@emotion/react/jsx-runtime").JSX.Element;
         displayName: string;
         defaultProps: Pick<{
+            iconLeft?: ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+        } & {
             label: string | {
                 id: string;
                 description?: string | object | undefined;

package/dist/declarations/src/index.d.ts

@@ -1,6 +1,5 @@
 export { default as version } from './version';
 export { default as TabHeader } from './components/tab-header';
-export { default as TabularMainPage } from './components/tabular-main-page';
 export { default as InfoDialog } from './components/dialogs/info-dialog';
 export { default as ConfirmationDialog } from './components/dialogs/confirmation-dialog';
 export { default as FormDialog } from './components/dialogs/form-dialog';
@@ -13,6 +12,10 @@ export { default as FormDetailPage } from './components/detail-pages/form-detail
 export { default as InfoDetailPage } from './components/detail-pages/info-detail-page';
 export { default as TabularDetailPage } from './components/detail-pages/tabular-detail-page';
 export { default as PublicPageLayout } from './components/public-page-layout';
+export { default as FormMainPage } from './components/main-pages/form-main-page';
+export { default as CustomFormMainPage } from './components/main-pages/custom-form-main-page';
+export { default as InfoMainPage } from './components/main-pages/info-main-page';
+export { default as TabularMainPage } from './components/main-pages/tabular-main-page';
 export { default as MaintenancePageLayout } from './components/maintenance-page-layout';
 export { default as PageNotFound } from './components/page-not-found';
 export { default as PageUnauthorized } from './components/page-unauthorized';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercetools-frontend/application-components",
-  "version": "21.12.0",
+  "version": "21.14.0",
   "description": "Generic components for building Merchant Center applications",
   "bugs": "https://github.com/commercetools/merchant-center-application-kit/issues",
   "repository": {
@@ -29,11 +29,11 @@
   "dependencies": {
     "@babel/runtime": "^7.18.6",
     "@babel/runtime-corejs3": "^7.18.6",
-    "@commercetools-frontend/application-shell-connectors": "21.12.0",
-    "@commercetools-frontend/assets": "21.12.0",
-    "@commercetools-frontend/constants": "21.12.0",
-    "@commercetools-frontend/i18n": "21.12.0",
-    "@commercetools-frontend/l10n": "21.12.0",
+    "@commercetools-frontend/application-shell-connectors": "21.14.0",
+    "@commercetools-frontend/assets": "21.14.0",
+    "@commercetools-frontend/constants": "21.14.0",
+    "@commercetools-frontend/i18n": "21.14.0",
+    "@commercetools-frontend/l10n": "21.14.0",
     "@commercetools-uikit/card": "^15.1.0",
     "@commercetools-uikit/constraints": "^15.1.0",
     "@commercetools-uikit/design-system": "^15.1.0",
@@ -50,7 +50,7 @@
     "@emotion/react": "11.9.3",
     "@emotion/styled": "11.9.3",
     "@react-hook/latest": "1.0.3",
-    "@react-hook/resize-observer": "1.2.5",
+    "@react-hook/resize-observer": "1.2.6",
     "@types/history": "^4.7.11",
     "@types/lodash": "^4.14.182",
     "@types/prop-types": "^15.7.5",
@@ -64,10 +64,11 @@
     "react-modal": "3.15.1"
   },
   "devDependencies": {
+    "@types/raf-schd": "^4.0.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-intl": "^5.25.1",
-    "react-router-dom": "5.3.1"
+    "react-router-dom": "5.3.3"
   },
   "peerDependencies": {
     "react": "17.x",