@commercetools-frontend/application-components 0.0.0-FEC-157-preview-releases-20241126230331

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

@@ -0,0 +1,240 @@
+import type { ReactElement, ReactNode, MouseEvent, KeyboardEvent } from 'react';
+import { LocationDescriptor } from 'history';
+type MessageDescriptor = {
+    id: string;
+    description?: string | object;
+    defaultMessage?: string;
+    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: {
+    (props: TTabularDetailPageProps): import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+    displayName: string;
+    defaultProps: Pick<TTabularDetailPageProps, "hideControls">;
+    FormPrimaryButton: {
+        (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/types/jsx-namespace").EmotionJSX.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/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: 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/types/jsx-namespace").EmotionJSX.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" | "medium";
+            truncate: boolean;
+            subtitle?: string | ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+            children?: undefined;
+        }): import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+        displayName: string;
+        defaultProps: Pick<{
+            title: string;
+            titleSize: "big" | "small" | "medium";
+            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/dialogs/confirmation-dialog/confirmation-dialog.d.ts

@@ -0,0 +1,111 @@
+import { ReactNode, SyntheticEvent } from 'react';
+type MessageDescriptor = {
+    id: string;
+    description?: string | object;
+    defaultMessage?: string;
+};
+type Label = string | MessageDescriptor;
+export type TConfirmationDialogProps = {
+    isOpen: boolean;
+    onClose?: (event: SyntheticEvent) => void;
+    title: ReactNode;
+    'aria-label'?: string;
+    size?: 'm' | 'l' | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 16 | 'scale';
+    zIndex?: number;
+    children: ReactNode;
+    labelSecondary: Label;
+    labelPrimary: Label;
+    isPrimaryButtonDisabled?: boolean;
+    onCancel: (event: SyntheticEvent) => void;
+    onConfirm: (event: SyntheticEvent) => void;
+    dataAttributesSecondaryButton?: {
+        [key: string]: string;
+    };
+    dataAttributesPrimaryButton?: {
+        [key: string]: string;
+    };
+    getParentSelector?: () => HTMLElement;
+};
+declare const ConfirmationDialog: {
+    (props: TConfirmationDialogProps): import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+    displayName: string;
+    defaultProps: Pick<TConfirmationDialogProps, "labelSecondary" | "labelPrimary">;
+    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;
+        };
+    };
+    TextTitle: (props: {
+        title: string;
+    }) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+};
+export default ConfirmationDialog;

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

@@ -0,0 +1 @@
+export { default, type TConfirmationDialogProps } from './confirmation-dialog';

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

@@ -0,0 +1,113 @@
+import type { SyntheticEvent, ReactNode, ReactElement } from 'react';
+type MessageDescriptor = {
+    id: string;
+    description?: string | object;
+    defaultMessage?: string;
+};
+type Label = string | MessageDescriptor;
+export type TFormDialogProps = {
+    isOpen: boolean;
+    onClose?: (event: SyntheticEvent) => void;
+    title: ReactNode;
+    'aria-label'?: string;
+    size?: 'm' | 'l' | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 16 | 'scale';
+    zIndex?: number;
+    children: ReactNode;
+    labelSecondary: Label;
+    labelPrimary: Label;
+    isPrimaryButtonDisabled?: boolean;
+    onSecondaryButtonClick: (event: SyntheticEvent) => void;
+    onPrimaryButtonClick: (event: SyntheticEvent) => void;
+    dataAttributesSecondaryButton?: {
+        [key: string]: string;
+    };
+    dataAttributesPrimaryButton?: {
+        [key: string]: string;
+    };
+    getParentSelector?: () => HTMLElement;
+    iconLeftSecondaryButton?: ReactElement;
+    footerContent?: ReactNode;
+};
+declare const FormDialog: {
+    (props: TFormDialogProps): import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+    displayName: string;
+    defaultProps: Pick<TFormDialogProps, "labelSecondary" | "labelPrimary">;
+    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;
+        };
+    };
+    TextTitle: (props: {
+        title: string;
+    }) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+};
+export default FormDialog;

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

@@ -0,0 +1 @@
+export { default, type TFormDialogProps } from './form-dialog';

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

@@ -0,0 +1 @@
+export { default, type TInfoDialogProps } from './info-dialog';

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

@@ -0,0 +1,19 @@
+import { SyntheticEvent, ReactNode } from 'react';
+export type TInfoDialogProps = {
+    isOpen: boolean;
+    onClose?: (event: SyntheticEvent) => void;
+    size?: 'm' | 'l' | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 16 | 'scale';
+    zIndex?: number;
+    title: ReactNode;
+    'aria-label'?: string;
+    children: ReactNode;
+    getParentSelector?: () => HTMLElement;
+};
+declare const InfoDialog: {
+    (props: TInfoDialogProps): import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+    displayName: string;
+    TextTitle: (props: {
+        title: string;
+    }) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+};
+export default InfoDialog;

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

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

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const DialogContent: 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 default DialogContent;

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

@@ -0,0 +1,29 @@
+import type { ReactElement, SyntheticEvent, ReactNode } from 'react';
+type MessageDescriptor = {
+    id: string;
+    description?: string | object;
+    defaultMessage?: string;
+};
+type Label = string | MessageDescriptor;
+type Props = {
+    labelSecondary: Label;
+    labelPrimary: Label;
+    onCancel: (event: SyntheticEvent) => void;
+    onConfirm: (event: SyntheticEvent) => void;
+    isPrimaryButtonDisabled: boolean;
+    dataAttributesPrimaryButton: {
+        [key: string]: string;
+    };
+    dataAttributesSecondaryButton: {
+        [key: string]: string;
+    };
+    children?: never;
+    iconLeftSecondaryButton?: ReactElement;
+    footerContent?: ReactNode;
+};
+declare const DialogFooter: {
+    (props: Props): import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+    displayName: string;
+    defaultProps: Pick<Props, "isPrimaryButtonDisabled" | "dataAttributesSecondaryButton" | "dataAttributesPrimaryButton">;
+};
+export default DialogFooter;

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

@@ -0,0 +1,15 @@
+import type { ReactNode, SyntheticEvent } from 'react';
+type Props = {
+    title: ReactNode;
+    onClose?: (event: SyntheticEvent) => void;
+    children?: never;
+};
+type TTextTitleProps = {
+    title: string;
+};
+export declare const TextTitle: (props: TTextTitleProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+declare const DialogHeader: {
+    (props: Props): import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+    displayName: string;
+};
+export default DialogHeader;

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

@@ -0,0 +1,8 @@
+import { type SerializedStyles } from '@emotion/react';
+type StyleProps = {
+    size: 'm' | 'l' | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 16 | 'scale';
+    zIndex?: number;
+};
+export declare const getModalContentStyles: (props: StyleProps) => SerializedStyles;
+export declare const getOverlayStyles: (props: StyleProps) => SerializedStyles;
+export {};