@commercetools-frontend/application-components 21.4.0 → 21.6.0

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

@@ -0,0 +1,201 @@
+import type { ReactElement, ReactNode, MouseEvent, KeyboardEvent } from 'react';
+declare type MessageDescriptor = {
+    id: string;
+    description?: string | object;
+    defaultMessage?: string;
+    values?: Record<string, ReactNode>;
+};
+declare type CustomFormDetailPageProps = {
+    title?: string;
+    subtitle?: string | ReactElement;
+    customTitleRow?: ReactNode;
+    children: ReactNode;
+    formControls?: ReactNode;
+    hideControls?: boolean;
+    previousPathLabel?: string | MessageDescriptor;
+    onPreviousPathClick: (event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>) => void;
+};
+declare const CustomFormDetailPage: {
+    (props: CustomFormDetailPageProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+    defaultProps: Pick<CustomFormDetailPageProps, "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: {
+            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">;
+    };
+    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 CustomFormDetailPage;

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

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

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

@@ -0,0 +1,125 @@
+import type { ReactElement, ReactNode, MouseEvent, KeyboardEvent, SyntheticEvent } from 'react';
+declare type MessageDescriptor = {
+    id: string;
+    description?: string | object;
+    defaultMessage?: string;
+};
+declare type Label = string | MessageDescriptor;
+declare type FormDetailPageProps = {
+    title?: string;
+    subtitle?: string | ReactElement;
+    customTitleRow?: ReactNode;
+    children: ReactNode;
+    previousPathLabel?: string | MessageDescriptor;
+    onPreviousPathClick: (event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>) => void;
+    isPrimaryButtonDisabled?: boolean;
+    isSecondaryButtonDisabled?: boolean;
+    dataAttributesPrimaryButton?: {
+        [key: string]: string;
+    };
+    dataAttributesSecondaryButton?: {
+        [key: string]: string;
+    };
+    labelPrimaryButton?: Label;
+    labelSecondaryButton?: Label;
+    onPrimaryButtonClick: (event: SyntheticEvent) => void;
+    onSecondaryButtonClick: (event: SyntheticEvent) => void;
+    hideControls: boolean;
+};
+declare const FormDetailPage: {
+    (props: FormDetailPageProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+    defaultProps: Pick<FormDetailPageProps, "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 FormDetailPage;

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

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

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

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

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

@@ -0,0 +1,37 @@
+import type { ReactElement, ReactNode, MouseEvent, KeyboardEvent } from 'react';
+declare type MessageDescriptor = {
+    id: string;
+    description?: string | object;
+    defaultMessage?: string;
+    values?: Record<string, ReactNode>;
+};
+declare type InfoDetailPageProps = {
+    title?: string;
+    subtitle?: string | ReactElement;
+    customTitleRow?: ReactNode;
+    children: ReactNode;
+    previousPathLabel?: string | MessageDescriptor;
+    onPreviousPathClick: (event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>) => void;
+};
+declare const InfoDetailPage: {
+    (props: InfoDetailPageProps): 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 InfoDetailPage;

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

@@ -1,10 +1,10 @@
-import { ReactNode, SyntheticEvent } from 'react';
+import type { ReactNode, SyntheticEvent } from 'react';
 declare const getDefaultParentSelector: () => HTMLElement;
 declare type Props = {
     isOpen: boolean;
     onClose?: (event: SyntheticEvent) => void;
     size: 'm' | 'l' | 7 | 8 | 9 | 10 | 'scale';
-    zIndex: number;
+    zIndex?: number;
     title: string;
     children: ReactNode;
     getParentSelector: typeof getDefaultParentSelector;
@@ -12,6 +12,6 @@ declare type Props = {
 declare const DialogContainer: {
     (props: Props): import("@emotion/react/jsx-runtime").JSX.Element;
     displayName: string;
-    defaultProps: Pick<Props, "zIndex" | "size" | "getParentSelector">;
+    defaultProps: Pick<Props, "size" | "getParentSelector">;
 };
 export default DialogContainer;

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

@@ -1,4 +1,4 @@
-import { SyntheticEvent } from 'react';
+import type { SyntheticEvent } from 'react';
 declare type Props = {
     title: string;
     onClose?: (event: SyntheticEvent) => void;

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

@@ -1,6 +1,7 @@
 declare type StyleProps = {
     size: 'm' | 'l' | 7 | 8 | 9 | 10 | 'scale';
+    zIndex?: number;
 };
 export declare const getModalContentStyles: (props: StyleProps) => import("@emotion/utils").SerializedStyles;
-export declare const getModalOverlayStyles: () => import("@emotion/utils").SerializedStyles;
+export declare const getOverlayStyles: (props: StyleProps) => import("@emotion/utils").SerializedStyles;
 export {};

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

@@ -1,5 +1,5 @@
-import type { CSSObject } from '@emotion/react';
-import { ReactNode, SyntheticEvent } from 'react';
+import { type ReactNode, type SyntheticEvent } from 'react';
+import { type CSSObject } from '@emotion/react';
 declare const getDefaultParentSelector: () => HTMLElement;
 declare type MessageDescriptor = {
     id: string;
@@ -8,13 +8,13 @@ declare type MessageDescriptor = {
 };
 declare type Label = string | MessageDescriptor;
 declare type Props = {
-    level: number;
+    level?: number;
     title: string;
     isOpen: boolean;
     onClose?: (event: SyntheticEvent) => void;
     children: ReactNode;
     zIndex?: number;
-    baseZIndex: number;
+    baseZIndex?: number;
     getParentSelector: typeof getDefaultParentSelector;
     shouldDelayOnClose: boolean;
     afterOpenStyles?: string | CSSObject;
@@ -25,6 +25,6 @@ declare type Props = {
 declare const ModalPage: {
     (props: Props): import("@emotion/react/jsx-runtime").JSX.Element;
     displayName: string;
-    defaultProps: Pick<Props, "getParentSelector" | "level" | "baseZIndex" | "shouldDelayOnClose">;
+    defaultProps: Pick<Props, "getParentSelector" | "shouldDelayOnClose">;
 };
 export default ModalPage;

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

@@ -1,10 +1,8 @@
 export declare const TRANSITION_DURATION = 200;
 declare type StyleProps = {
-    level: number;
     zIndex?: number;
-    baseZIndex: number;
 };
-export declare const getContainerStyles: (props: StyleProps) => import("@emotion/utils").SerializedStyles;
+export declare const getContainerStyles: (_props: StyleProps) => import("@emotion/utils").SerializedStyles;
 export declare const getOverlayStyles: (props: StyleProps) => import("@emotion/utils").SerializedStyles;
 export declare const getAfterOpenContainerAnimation: () => import("@emotion/utils").SerializedStyles;
 export declare const getAfterOpenOverlayAnimation: () => import("@emotion/utils").SerializedStyles;

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

@@ -4,11 +4,12 @@ declare type TLayoutRefs = {
     notificationsPageRef: MutableRefObject<HTMLDivElement>;
 };
 declare type TPortalsContainerProps = {
-    offsetTop: string;
-    offsetLeft: string;
-    offsetLeftOnExpandedMenu: string;
-    containerSelectorToPreventScrollingOnOpen: string;
-    zIndex: number;
+    offsetTop?: string;
+    offsetLeft?: string;
+    offsetLeftOnExpandedMenu?: string;
+    containerSelectorToPreventScrollingOnOpen?: string;
+    zIndex?: number;
+    baseModalZIndex?: number;
 };
 declare const PortalsContainer: import("react").ForwardRefExoticComponent<TPortalsContainerProps & import("react").RefAttributes<TLayoutRefs>>;
 export default PortalsContainer;

package/dist/declarations/src/hooks/use-mutation-observer/index.d.ts

@@ -0,0 +1 @@
+export { default } from './use-mutation-observer';

package/dist/declarations/src/hooks/use-mutation-observer/use-mutation-observer.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+declare type TUseMutationObserverCallback = (mutationRecord: MutationRecord, observer: MutationObserver) => void;
+declare function useMutationObserver<T extends HTMLElement>(target: React.RefObject<T> | T | null, callback: TUseMutationObserverCallback, options?: MutationObserverInit): MutationObserver;
+export default useMutationObserver;

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

@@ -1,7 +1,6 @@
 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 TabularDetailPage } from './components/tabular-detail-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';
@@ -9,6 +8,10 @@ export { default as InfoModalPage } from './components/modal-pages/info-modal-pa
 export { default as FormModalPage } from './components/modal-pages/form-modal-page';
 export { default as TabularModalPage } from './components/modal-pages/tabular-modal-page';
 export { default as CustomFormModalPage } from './components/modal-pages/custom-form-modal-page';
+export { default as CustomFormDetailPage } from './components/detail-pages/custom-form-detail-page';
+export { default as FormDetailPage } from './components/detail-pages/form-detail-page';
+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 MaintenancePageLayout } from './components/maintenance-page-layout';
 export { default as PageNotFound } from './components/page-not-found';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercetools-frontend/application-components",
-  "version": "21.4.0",
+  "version": "21.6.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.17.9",
     "@babel/runtime-corejs3": "^7.17.9",
-    "@commercetools-frontend/application-shell-connectors": "21.3.4",
+    "@commercetools-frontend/application-shell-connectors": "21.6.0",
     "@commercetools-frontend/assets": "21.0.0",
     "@commercetools-frontend/constants": "21.3.4",
-    "@commercetools-frontend/i18n": "21.4.0",
-    "@commercetools-frontend/l10n": "21.3.4",
+    "@commercetools-frontend/i18n": "21.6.0",
+    "@commercetools-frontend/l10n": "21.6.0",
     "@commercetools-uikit/card": "^15.0.0",
     "@commercetools-uikit/constraints": "^15.0.0",
     "@commercetools-uikit/design-system": "^15.0.0",
@@ -49,6 +49,7 @@
     "@commercetools-uikit/utils": "^15.0.0",
     "@emotion/react": "11.9.0",
     "@emotion/styled": "11.8.1",
+    "@react-hook/latest": "1.0.3",
     "@react-hook/resize-observer": "1.2.5",
     "@types/history": "4.7.11",
     "@types/lodash": "^4.14.181",
@@ -59,13 +60,14 @@
     "history": "4.10.1",
     "lodash": "4.17.21",
     "prop-types": "15.8.1",
-    "react-modal": "3.14.4"
+    "raf-schd": "^4.0.3",
+    "react-modal": "3.15.1"
   },
   "devDependencies": {
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-intl": "^5.25.0",
-    "react-router-dom": "5.3.0"
+    "react-router-dom": "5.3.1"
   },
   "peerDependencies": {
     "react": "17.x",