@commercetools-frontend/application-components 22.12.0 → 22.13.0

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

@@ -23,7 +23,7 @@ declare const CustomFormDetailPage: {
     PageHeaderTitle: {
         (props: {
             title: string;
-            titleSize: "big" | "small";
+            titleSize: "big" | "small" | "medium";
             truncate: boolean;
             subtitle?: string | ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
             children?: undefined;
@@ -31,7 +31,7 @@ declare const CustomFormDetailPage: {
         displayName: string;
         defaultProps: Pick<{
             title: string;
-            titleSize: "big" | "small";
+            titleSize: "big" | "small" | "medium";
             truncate: boolean;
             subtitle?: string | ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
             children?: undefined;

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

@@ -35,7 +35,7 @@ declare const FormDetailPage: {
     PageHeaderTitle: {
         (props: {
             title: string;
-            titleSize: "big" | "small";
+            titleSize: "big" | "small" | "medium";
             truncate: boolean;
             subtitle?: string | ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
             children?: undefined;
@@ -43,7 +43,7 @@ declare const FormDetailPage: {
         displayName: string;
         defaultProps: Pick<{
             title: string;
-            titleSize: "big" | "small";
+            titleSize: "big" | "small" | "medium";
             truncate: boolean;
             subtitle?: string | ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
             children?: undefined;

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

@@ -20,7 +20,7 @@ declare const InfoDetailPage: {
     PageHeaderTitle: {
         (props: {
             title: string;
-            titleSize: "big" | "small";
+            titleSize: "big" | "small" | "medium";
             truncate: boolean;
             subtitle?: string | ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
             children?: undefined;
@@ -28,7 +28,7 @@ declare const InfoDetailPage: {
         displayName: string;
         defaultProps: Pick<{
             title: string;
-            titleSize: "big" | "small";
+            titleSize: "big" | "small" | "medium";
             truncate: boolean;
             subtitle?: string | ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
             children?: undefined;

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

@@ -116,7 +116,7 @@ declare const TabularDetailPage: {
     PageHeaderTitle: {
         (props: {
             title: string;
-            titleSize: "big" | "small";
+            titleSize: "big" | "small" | "medium";
             truncate: boolean;
             subtitle?: string | ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
             children?: undefined;
@@ -124,7 +124,7 @@ declare const TabularDetailPage: {
         displayName: string;
         defaultProps: Pick<{
             title: string;
-            titleSize: "big" | "small";
+            titleSize: "big" | "small" | "medium";
             truncate: boolean;
             subtitle?: string | ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
             children?: undefined;

package/dist/declarations/src/components/drawer/drawer.d.ts

@@ -0,0 +1,180 @@
+import type { ReactElement, ReactNode, SyntheticEvent } from 'react';
+import { type CSSObject } from '@emotion/styled';
+type MessageDescriptor = {
+    id: string;
+    description?: string | object;
+    defaultMessage?: string;
+};
+type Label = string | MessageDescriptor;
+type TDrawerSize = 10 | 20 | 30;
+type TDrawerProps = {
+    size: TDrawerSize;
+    isOpen: boolean;
+    onClose?: (event: SyntheticEvent) => void;
+    children: ReactNode;
+    topBarColor?: 'neutral' | 'surface';
+    title: string;
+    subtitle?: string;
+    zIndex?: number;
+    getParentSelector?: () => HTMLElement;
+    shouldDelayOnClose?: boolean;
+    afterOpenStyles?: string | CSSObject;
+    customViewLocatorCode?: string;
+    hideControls?: boolean;
+    formControls?: ReactNode;
+    isPrimaryButtonDisabled?: boolean;
+    isSecondaryButtonDisabled?: boolean;
+    dataAttributesPrimaryButton?: {
+        [key: string]: string;
+    };
+    dataAttributesSecondaryButton?: {
+        [key: string]: string;
+    };
+    labelPrimaryButton?: Label;
+    labelSecondaryButton?: Label;
+    onPrimaryButtonClick: (event: SyntheticEvent) => void;
+    onSecondaryButtonClick: (event: SyntheticEvent) => void;
+    iconLeftSecondaryButton?: ReactElement;
+};
+declare function Drawer(props: TDrawerProps): import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+declare namespace Drawer {
+    var displayName: string;
+    var defaultProps: Pick<TDrawerProps, "size" | "onSecondaryButtonClick" | "onPrimaryButtonClick" | "hideControls">;
+    var FormPrimaryButton: {
+        (props: {
+            label: string | {
+                id: string;
+                description?: string | object | undefined;
+                defaultMessage?: string | undefined;
+            };
+            onClick: (event: SyntheticEvent<Element, Event>) => void;
+            isDisabled: boolean;
+            dataAttributes: {
+                [key: string]: string;
+            };
+            children?: undefined;
+        }): import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+        displayName: string;
+        defaultProps: Pick<{
+            label: string | {
+                id: string;
+                description?: string | object | undefined;
+                defaultMessage?: string | undefined;
+            };
+            onClick: (event: SyntheticEvent<Element, Event>) => void;
+            isDisabled: boolean;
+            dataAttributes: {
+                [key: string]: string;
+            };
+            children?: undefined;
+        }, "label" | "isDisabled" | "dataAttributes">;
+    };
+    var FormSecondaryButton: {
+        (props: {
+            iconLeft?: ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+        } & {
+            label: string | {
+                id: string;
+                description?: string | object | undefined;
+                defaultMessage?: string | undefined;
+            };
+            onClick: (event: SyntheticEvent<Element, Event>) => void;
+            isDisabled: boolean;
+            dataAttributes: {
+                [key: string]: string;
+            };
+            children?: undefined;
+        }): import("@emotion/react/types/jsx-namespace").EmotionJSX.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: SyntheticEvent<Element, Event>) => void;
+            isDisabled: boolean;
+            dataAttributes: {
+                [key: string]: string;
+            };
+            children?: undefined;
+        }, "label" | "isDisabled" | "dataAttributes">;
+    };
+    var 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 Drawer;

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

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

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

@@ -1,7 +1,8 @@
 import { type ReactElement } from 'react';
+type TTitleSize = 'big' | 'medium' | 'small';
 type Props = {
     title: string;
-    titleSize: 'big' | 'small';
+    titleSize: TTitleSize;
     truncate: boolean;
     subtitle?: string | ReactElement;
     children?: never;

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

@@ -16,7 +16,7 @@ declare const CustomFormMainPage: {
     PageHeaderTitle: {
         (props: {
             title: string;
-            titleSize: "big" | "small";
+            titleSize: "big" | "small" | "medium";
             truncate: boolean;
             subtitle?: string | ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
             children?: undefined;
@@ -24,7 +24,7 @@ declare const CustomFormMainPage: {
         displayName: string;
         defaultProps: Pick<{
             title: string;
-            titleSize: "big" | "small";
+            titleSize: "big" | "small" | "medium";
             truncate: boolean;
             subtitle?: string | ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
             children?: undefined;

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

@@ -33,7 +33,7 @@ declare const FormMainPage: {
     PageHeaderTitle: {
         (props: {
             title: string;
-            titleSize: "big" | "small";
+            titleSize: "big" | "small" | "medium";
             truncate: boolean;
             subtitle?: string | ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
             children?: undefined;
@@ -41,7 +41,7 @@ declare const FormMainPage: {
         displayName: string;
         defaultProps: Pick<{
             title: string;
-            titleSize: "big" | "small";
+            titleSize: "big" | "small" | "medium";
             truncate: boolean;
             subtitle?: string | ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
             children?: undefined;

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

@@ -12,7 +12,7 @@ declare const InfoMainPage: {
     PageHeaderTitle: {
         (props: {
             title: string;
-            titleSize: "big" | "small";
+            titleSize: "big" | "small" | "medium";
             truncate: boolean;
             subtitle?: string | ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
             children?: undefined;
@@ -20,7 +20,7 @@ declare const InfoMainPage: {
         displayName: string;
         defaultProps: Pick<{
             title: string;
-            titleSize: "big" | "small";
+            titleSize: "big" | "small" | "medium";
             truncate: boolean;
             subtitle?: string | ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
             children?: undefined;

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

@@ -108,7 +108,7 @@ declare const TabularMainPage: {
     PageHeaderTitle: {
         (props: {
             title: string;
-            titleSize: "big" | "small";
+            titleSize: "big" | "small" | "medium";
             truncate: boolean;
             subtitle?: string | ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
             children?: undefined;
@@ -116,7 +116,7 @@ declare const TabularMainPage: {
         displayName: string;
         defaultProps: Pick<{
             title: string;
-            titleSize: "big" | "small";
+            titleSize: "big" | "small" | "medium";
             truncate: boolean;
             subtitle?: string | ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
             children?: undefined;

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

@@ -1,4 +1,10 @@
-import { type SyntheticEvent } from 'react';
+import { type SyntheticEvent, type ReactElement } from 'react';
+import { type TSecondaryButtonIconProps } from '@commercetools-uikit/secondary-icon-button';
+type TLargeIconWrapperProps = {
+    children: ReactElement;
+    size?: TSecondaryButtonIconProps['size'];
+};
+export declare const LargeIconWrapper: (props: TLargeIconWrapperProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
 type MessageDescriptor = {
     id: string;
     description?: string | object;

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

@@ -7,6 +7,7 @@ type MessageDescriptor = {
     defaultMessage?: string;
 };
 type Label = string | MessageDescriptor;
+export type TModalPageSize = 10 | 20 | 30 | 'scale';
 type Props = {
     level?: number;
     title: string;
@@ -23,7 +24,8 @@ type Props = {
     currentPathLabel?: string;
     previousPathLabel?: Label;
     hidePathLabel?: boolean;
-    size?: 'small' | 'large';
+    size: TModalPageSize;
+    hideTopBar?: boolean;
 };
 declare const ModalPage: {
     (props: Props): import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;

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

@@ -1,13 +1,31 @@
 import { type SerializedStyles } from '@emotion/react';
-export declare const TRANSITION_DURATION = 200;
+import type { TModalPageSize } from './modal-page';
 type StyleProps = {
     zIndex?: number;
-    size?: 'small' | 'large';
+    size: TModalPageSize;
 };
-export declare const getContainerStyles: (_props: StyleProps) => SerializedStyles;
+export declare const stylesBySize: {
+    '10': {
+        width: string;
+        transitionTime: number;
+    };
+    '20': {
+        width: string;
+        transitionTime: number;
+    };
+    '30': {
+        width: string;
+        transitionTime: number;
+    };
+    scale: {
+        width: string;
+        transitionTime: number;
+    };
+};
+export declare const getContainerStyles: (props: StyleProps) => SerializedStyles;
 export declare const getOverlayStyles: (props: StyleProps) => SerializedStyles;
 export declare const getAfterOpenContainerAnimation: () => SerializedStyles;
 export declare const getAfterOpenOverlayAnimation: () => SerializedStyles;
-export declare const getBeforeCloseContainerAnimation: () => SerializedStyles;
+export declare const getBeforeCloseContainerAnimation: (props: StyleProps) => SerializedStyles;
 export declare const getBeforeCloseOverlayAnimation: () => SerializedStyles;
 export {};

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

@@ -25,7 +25,7 @@ export { default as PageContentWide } from './components/page-content-containers
 export type { TPageContentWide } from './components/page-content-containers/page-content-wide';
 export { default as PageContentFull } from './components/page-content-containers/page-content-full';
 export type { TPageContentFull } from './components/page-content-containers/page-content-full';
-export { default as CustomPanel } from './components/custom-views/custom-panel';
+export { default as Drawer } from './components/drawer';
 export { default as CustomViewLoader } from './components/custom-views/custom-view-loader';
 export { default as CustomViewsSelector } from './components/custom-views/custom-views-selector';
 export { default as PortalsContainer } from './components/portals-container';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercetools-frontend/application-components",
-  "version": "22.12.0",
+  "version": "22.13.0",
   "description": "Generic components for building Merchant Center applications",
   "bugs": "https://github.com/commercetools/merchant-center-application-kit/issues",
   "repository": {
@@ -36,14 +36,14 @@
   "dependencies": {
     "@babel/runtime": "^7.22.15",
     "@babel/runtime-corejs3": "^7.22.15",
-    "@commercetools-frontend/actions-global": "22.12.0",
-    "@commercetools-frontend/application-config": "22.12.0",
-    "@commercetools-frontend/application-shell-connectors": "22.12.0",
-    "@commercetools-frontend/assets": "22.12.0",
-    "@commercetools-frontend/constants": "22.12.0",
-    "@commercetools-frontend/i18n": "22.12.0",
-    "@commercetools-frontend/l10n": "22.12.0",
-    "@commercetools-frontend/sentry": "22.12.0",
+    "@commercetools-frontend/actions-global": "22.13.0",
+    "@commercetools-frontend/application-config": "22.13.0",
+    "@commercetools-frontend/application-shell-connectors": "22.13.0",
+    "@commercetools-frontend/assets": "22.13.0",
+    "@commercetools-frontend/constants": "22.13.0",
+    "@commercetools-frontend/i18n": "22.13.0",
+    "@commercetools-frontend/l10n": "22.13.0",
+    "@commercetools-frontend/sentry": "22.13.0",
     "@commercetools-uikit/card": "^16.7.3",
     "@commercetools-uikit/constraints": "^16.7.3",
     "@commercetools-uikit/design-system": "^16.7.3",

package/dist/declarations/src/components/custom-views/custom-panel/custom-panel.d.ts

@@ -1,9 +0,0 @@
-import { ReactNode } from 'react';
-type TCustomPanelProps = {
-    title: string;
-    size: 'small' | 'large';
-    onClose: () => void;
-    children: ReactNode;
-};
-declare function CustomPanel(props: TCustomPanelProps): import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
-export default CustomPanel;

package/dist/declarations/src/components/custom-views/custom-panel/index.d.ts

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

package/dist/{public-page-layout-0e1daa2e.cjs.prod.js → public-page-layout-295bf2b5.cjs.prod.js}

@@ -40,9 +40,9 @@ require('@commercetools-frontend/sentry');
 require('@commercetools-uikit/constraints');
 require('@commercetools-frontend/actions-global');
 require('@commercetools-frontend/application-shell-connectors');
-require('@flopflip/react-broadcast');
-require('@commercetools-uikit/flat-button');
 require('@commercetools-uikit/icon-button');
+require('@commercetools-uikit/flat-button');
+require('@flopflip/react-broadcast');
 require('@babel/runtime-corejs3/core-js-stable/instance/find');
 require('@babel/runtime-corejs3/core-js-stable/object/entries');
 require('@commercetools-frontend/assets/images/page-not-found.svg');

package/dist/{public-page-layout-82978d93.esm.js → public-page-layout-c0dbc038.esm.js}

@@ -38,9 +38,9 @@ import '@commercetools-frontend/sentry';
 import '@commercetools-uikit/constraints';
 import '@commercetools-frontend/actions-global';
 import '@commercetools-frontend/application-shell-connectors';
-import '@flopflip/react-broadcast';
-import '@commercetools-uikit/flat-button';
 import '@commercetools-uikit/icon-button';
+import '@commercetools-uikit/flat-button';
+import '@flopflip/react-broadcast';
 import '@babel/runtime-corejs3/core-js-stable/instance/find';
 import '@babel/runtime-corejs3/core-js-stable/object/entries';
 import '@commercetools-frontend/assets/images/page-not-found.svg';

package/dist/{public-page-layout-4e26387d.cjs.dev.js → public-page-layout-e590ce5b.cjs.dev.js}

@@ -40,9 +40,9 @@ require('@commercetools-frontend/sentry');
 require('@commercetools-uikit/constraints');
 require('@commercetools-frontend/actions-global');
 require('@commercetools-frontend/application-shell-connectors');
-require('@flopflip/react-broadcast');
-require('@commercetools-uikit/flat-button');
 require('@commercetools-uikit/icon-button');
+require('@commercetools-uikit/flat-button');
+require('@flopflip/react-broadcast');
 require('@babel/runtime-corejs3/core-js-stable/instance/find');
 require('@babel/runtime-corejs3/core-js-stable/object/entries');
 require('@commercetools-frontend/assets/images/page-not-found.svg');