@commercetools-frontend/application-components 21.1.0 → 21.3.0

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

@@ -12,6 +12,6 @@ declare type Props = {
 declare const DialogContainer: {
     (props: Props): import("@emotion/react/jsx-runtime").JSX.Element;
     displayName: string;
-    defaultProps: Pick<Props, "size" | "zIndex" | "getParentSelector">;
+    defaultProps: Pick<Props, "zIndex" | "size" | "getParentSelector">;
 };
 export default DialogContainer;

package/dist/declarations/src/components/{modal-pages/internals → internals}/default-form-buttons.d.ts

@@ -1,4 +1,4 @@
-import { SyntheticEvent } from 'react';
+import type { SyntheticEvent } from 'react';
 declare type MessageDescriptor = {
     id: string;
     description?: string | object;

package/dist/declarations/src/components/{modal-pages/internals/modal-page-header-title.d.ts → internals/page-header-title.d.ts}

@@ -1,13 +1,14 @@
-import { ReactElement } from 'react';
+import { type ReactElement } from 'react';
 declare type Props = {
     title: string;
     titleSize: 'big' | 'small';
+    truncate: boolean;
     subtitle?: string | ReactElement;
     children?: never;
 };
-declare const ModalPageHeaderTitle: {
+declare const PageHeaderTitle: {
     (props: Props): import("@emotion/react/jsx-runtime").JSX.Element;
     displayName: string;
-    defaultProps: Pick<Props, "titleSize">;
+    defaultProps: Pick<Props, "truncate" | "titleSize">;
 };
-export default ModalPageHeaderTitle;
+export default PageHeaderTitle;

package/dist/declarations/src/components/{modal-pages/internals/modal-page-header.d.ts → internals/page-header.d.ts}

@@ -1,11 +1,11 @@
-import { ReactElement, ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 declare type Props = {
     title: string;
     subtitle?: string | ReactElement;
     children?: ReactNode;
 };
-declare const ModalPageHeader: {
+declare const PageHeader: {
     (props: Props): import("@emotion/react/jsx-runtime").JSX.Element;
     displayName: string;
 };
-export default ModalPageHeader;
+export default PageHeader;

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

@@ -0,0 +1,20 @@
+import type { MouseEvent, KeyboardEvent, ReactNode } from 'react';
+declare type MessageDescriptor = {
+    id: string;
+    description?: string | object;
+    defaultMessage?: string;
+    values?: Record<string, ReactNode>;
+};
+declare type Label = string | MessageDescriptor;
+declare type Props = {
+    color: 'surface' | 'neutral';
+    previousPathLabel: Label;
+    onClick: (event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>) => void;
+    children?: never;
+};
+declare const PageTopBar: {
+    (props: Props): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+    defaultProps: Pick<Props, "color" | "previousPathLabel">;
+};
+export default PageTopBar;

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const ContentWrapper: 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 PageWrapper: 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/internals/tabular-page.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+declare type TControlsContainterProps = {
+    tabControls: ReactNode;
+    formControls?: ReactNode;
+    children?: never;
+};
+declare const ControlsContainter: {
+    (props: TControlsContainterProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare type TTabularPageContainerProps = {
+    children: ReactNode;
+    color: 'surface' | 'neutral';
+};
+declare const TabularPageContainer: {
+    (props: TTabularPageContainerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+    defaultProps: Pick<TTabularPageContainerProps, "color">;
+};
+declare const FormControlsContainer: 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 { ControlsContainter, TabularPageContainer, FormControlsContainer };

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const TRANSITION_DURATION = 200;
 declare type StyleProps = {
     level: number;
@@ -11,8 +10,4 @@ export declare const getAfterOpenContainerAnimation: () => import("@emotion/util
 export declare const getAfterOpenOverlayAnimation: () => import("@emotion/utils").SerializedStyles;
 export declare const getBeforeCloseContainerAnimation: () => import("@emotion/utils").SerializedStyles;
 export declare const getBeforeCloseOverlayAnimation: () => import("@emotion/utils").SerializedStyles;
-export declare const ContentWrapper: 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 {};

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

@@ -0,0 +1 @@
+export { default } from './tab-header';

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

@@ -0,0 +1,18 @@
+import { type MessageDescriptor } from 'react-intl';
+import type { ReactNode } from 'react';
+import type { LocationDescriptor } from 'history';
+export declare type TTabHeaderProps = {
+    to: string | LocationDescriptor;
+    label?: string;
+    intlMessage?: MessageDescriptor & {
+        values?: Record<string, ReactNode>;
+    };
+    isDisabled: boolean;
+    exactPathMatch: boolean;
+};
+export declare const TabHeader: {
+    (props: TTabHeaderProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+    defaultProps: Pick<TTabHeaderProps, "isDisabled" | "exactPathMatch">;
+};
+export default TabHeader;

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

@@ -0,0 +1,2 @@
+import { type Interpolation, type Theme } from '@emotion/react';
+export declare const getLinkStyles: (isActive: boolean, isDisabled: boolean) => Interpolation<Theme>;

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

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

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

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

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

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

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

@@ -0,0 +1,194 @@
+import type { ReactElement, ReactNode } from 'react';
+declare type TTabularMainPageProps = {
+    title: string;
+    subtitle?: string | ReactElement;
+    customTitleRow?: ReactNode;
+    children: ReactNode;
+    tabControls: ReactNode;
+    formControls?: ReactNode;
+    hideControls: boolean;
+};
+declare const TabularMainPage: {
+    (props: TTabularMainPageProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+    defaultProps: Pick<TTabularMainPageProps, "hideControls">;
+    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">;
+    };
+    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 TabularMainPage;

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

@@ -1,4 +1,7 @@
 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';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercetools-frontend/application-components",
-  "version": "21.1.0",
+  "version": "21.3.0",
   "description": "Generic components for building Merchant Center applications",
   "bugs": "https://github.com/commercetools/merchant-center-application-kit/issues",
   "repository": {
@@ -27,45 +27,49 @@
     "README.md"
   ],
   "dependencies": {
-    "@babel/runtime": "^7.16.7",
-    "@babel/runtime-corejs3": "^7.16.8",
-    "@commercetools-frontend/application-shell-connectors": "21.0.0",
+    "@babel/runtime": "^7.17.8",
+    "@babel/runtime-corejs3": "^7.17.8",
+    "@commercetools-frontend/application-shell-connectors": "21.3.0",
     "@commercetools-frontend/assets": "21.0.0",
-    "@commercetools-frontend/constants": "21.0.0",
-    "@commercetools-frontend/i18n": "21.1.0",
-    "@commercetools-frontend/l10n": "21.0.0",
-    "@commercetools-uikit/card": "^13.0.2",
-    "@commercetools-uikit/constraints": "^13.0.2",
-    "@commercetools-uikit/design-system": "^13.0.0",
-    "@commercetools-uikit/flat-button": "^13.0.2",
-    "@commercetools-uikit/icon-button": "^13.0.2",
-    "@commercetools-uikit/icons": "^13.0.2",
-    "@commercetools-uikit/messages": "^13.0.2",
-    "@commercetools-uikit/primary-button": "^13.0.2",
-    "@commercetools-uikit/secondary-button": "^13.0.2",
-    "@commercetools-uikit/secondary-icon-button": "^13.0.2",
-    "@commercetools-uikit/spacings": "^13.0.2",
-    "@commercetools-uikit/text": "^13.0.2",
-    "@emotion/react": "11.7.1",
-    "@emotion/styled": "11.6.0",
-    "@types/lodash": "^4.14.178",
+    "@commercetools-frontend/constants": "21.3.0",
+    "@commercetools-frontend/i18n": "21.3.0",
+    "@commercetools-frontend/l10n": "21.3.0",
+    "@commercetools-uikit/card": "^14.0.1",
+    "@commercetools-uikit/constraints": "^14.0.1",
+    "@commercetools-uikit/design-system": "^14.0.0",
+    "@commercetools-uikit/flat-button": "^14.0.2",
+    "@commercetools-uikit/icon-button": "^14.0.2",
+    "@commercetools-uikit/icons": "^14.0.1",
+    "@commercetools-uikit/messages": "^14.0.1",
+    "@commercetools-uikit/primary-button": "^14.0.1",
+    "@commercetools-uikit/secondary-button": "^14.0.2",
+    "@commercetools-uikit/secondary-icon-button": "^14.0.2",
+    "@commercetools-uikit/spacings": "^14.0.1",
+    "@commercetools-uikit/text": "^14.0.1",
+    "@commercetools-uikit/utils": "^14.0.1",
+    "@emotion/react": "11.8.2",
+    "@emotion/styled": "11.8.1",
+    "@types/history": "4.7.11",
+    "@types/lodash": "^4.14.181",
     "@types/prop-types": "^15.7.4",
-    "@types/react": "^17.0.38",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^17.0.43",
+    "@types/react-dom": "^17.0.14",
     "@types/react-modal": "^3.13.1",
+    "history": "4.10.1",
     "lodash": "4.17.21",
     "prop-types": "15.8.1",
-    "react-modal": "3.14.4",
-    "react-required-if": "1.0.3"
+    "react-modal": "3.14.4"
   },
   "devDependencies": {
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-intl": "5.24.3"
+    "react-intl": "5.24.8",
+    "react-router-dom": "5.3.0"
   },
   "peerDependencies": {
     "react": "17.x",
     "react-dom": "17.x",
-    "react-intl": "5.x"
+    "react-intl": "5.x",
+    "react-router-dom": "5.x"
   }
 }