@commercetools-frontend/application-shell 22.7.1 → 22.8.0

package/dist/declarations/src/components/navbar/navbar-new/menu-items.d.ts

@@ -0,0 +1,102 @@
+import { MouseEventHandler, type ReactNode, type SyntheticEvent } from 'react';
+import type { TNormalizedMenuVisibilities, TNormalizedPermissions, TNormalizedActionRights, TNormalizedDataFences } from '@commercetools-frontend/application-shell-connectors';
+import { BackIcon } from '@commercetools-uikit/icons';
+import type { TDataFence, TActionRight, TLocalizedField } from '../../../types/generated/proxy';
+type TProjectPermissions = {
+    permissions: TNormalizedPermissions | null;
+    actionRights: TNormalizedActionRights | null;
+    dataFences: TNormalizedDataFences | null;
+};
+type IconProps = Parameters<typeof BackIcon>[0];
+type IconSwitcherProps = {
+    icon: string;
+} & IconProps;
+declare const IconSwitcher: {
+    ({ icon, ...iconProps }: IconSwitcherProps): import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+    displayName: string;
+};
+type MenuExpanderProps = {
+    isVisible: boolean;
+    onClick: MouseEventHandler<HTMLDivElement>;
+    isMenuOpen: boolean;
+};
+declare const MenuExpander: {
+    (props: MenuExpanderProps): import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+    displayName: string;
+};
+declare const Faded: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+type MenuGroupProps = {
+    id: string;
+    level: 1 | 2;
+    isActive?: boolean;
+    isExpanded?: boolean;
+    hasSubmenu?: boolean;
+    children?: ReactNode;
+    submenuVerticalPosition?: number;
+    isSubmenuAboveMenuItem?: boolean;
+};
+declare const MenuGroup: import("react").ForwardRefExoticComponent<MenuGroupProps & import("react").RefAttributes<HTMLUListElement>>;
+type MenuItemProps = {
+    hasSubmenu: boolean;
+    isActive: boolean;
+    isMainMenuRouteActive?: boolean;
+    isMenuOpen: boolean;
+    onClick: MouseEventHandler<HTMLElement>;
+    onMouseEnter?: MouseEventHandler<HTMLElement>;
+    onMouseLeave?: MouseEventHandler<HTMLElement>;
+    children: ReactNode;
+};
+declare const MenuItem: import("react").ForwardRefExoticComponent<MenuItemProps & import("react").RefAttributes<HTMLDivElement>>;
+export type MenuItemLinkProps = {
+    linkTo?: string;
+    exactMatch: boolean;
+    children: ReactNode;
+    onClick?: (event: SyntheticEvent<HTMLAnchorElement>) => void;
+    useFullRedirectsForLinks?: boolean;
+    isSubmenuLink?: boolean;
+};
+declare const MenuItemLink: {
+    (props: MenuItemLinkProps): import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+    displayName: string;
+    defaultProps: Pick<MenuItemLinkProps, "exactMatch">;
+};
+type RestrictedMenuItemProps = {
+    featureToggle?: string;
+    namesOfMenuVisibilities?: string[];
+    projectPermissions: TProjectPermissions;
+    menuVisibilities: TNormalizedMenuVisibilities | null;
+    keyOfMenuItem: string;
+    permissions: string[];
+    actionRights?: TActionRight[];
+    dataFences?: TDataFence[];
+    children: ReactNode;
+};
+declare const RestrictedMenuItem: {
+    (props: RestrictedMenuItemProps): import("@emotion/react/types/jsx-namespace").EmotionJSX.Element | null;
+    displayName: string;
+    defaultProps: Pick<RestrictedMenuItemProps, "permissions">;
+};
+type MenuLabelProps = {
+    labelAllLocales: TLocalizedField[];
+    defaultLabel?: string;
+    applicationLocale: string;
+};
+declare const MenuLabel: (props: MenuLabelProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+type TNavBarLayoutProps = {
+    children: ReactNode;
+};
+declare const NavBarLayout: import("react").ForwardRefExoticComponent<TNavBarLayoutProps & import("react").RefAttributes<HTMLElement>>;
+type ItemContainerProps = {
+    labelAllLocales: TLocalizedField[];
+    defaultLabel?: string;
+    applicationLocale: string;
+    icon: string;
+};
+declare const ItemContainer: {
+    (props: ItemContainerProps): import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+    displayName: string;
+};
+export { RestrictedMenuItem, MenuItem, MenuItemLink, IconSwitcher, MenuGroup, MenuLabel, MenuExpander, Faded, NavBarLayout, ItemContainer, };

package/dist/declarations/src/components/navbar/navbar-new/navbar.d.ts

@@ -0,0 +1,48 @@
+import { type MouseEventHandler } from 'react';
+import type { RouteComponentProps } from 'react-router-dom';
+import type { TApplicationContext, TNormalizedMenuVisibilities, TNormalizedPermissions, TNormalizedActionRights, TNormalizedDataFences } from '@commercetools-frontend/application-shell-connectors';
+import type { TFetchProjectQuery } from '../../../types/generated/mc';
+import type { TNavbarMenu } from '../../../types/generated/proxy';
+import { type MenuItemLinkProps } from './menu-items';
+type TProjectPermissions = {
+    permissions: TNormalizedPermissions | null;
+    actionRights: TNormalizedActionRights | null;
+    dataFences: TNormalizedDataFences | null;
+};
+type TMenuWithDefaultLabel = TNavbarMenu & {
+    defaultLabel?: string;
+};
+type ApplicationMenuProps = {
+    location: RouteComponentProps['location'];
+    menu: TMenuWithDefaultLabel;
+    isActive: boolean;
+    isMenuOpen: boolean;
+    shouldCloseMenuFly: MouseEventHandler<HTMLElement>;
+    projectPermissions: TProjectPermissions;
+    menuVisibilities: TNormalizedMenuVisibilities | null;
+    handleToggleItem: () => void;
+    applicationLocale: string;
+    projectKey: string;
+    useFullRedirectsForLinks: boolean;
+    onMenuItemClick?: MenuItemLinkProps['onClick'];
+};
+export declare const ApplicationMenu: {
+    (props: ApplicationMenuProps): import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+    displayName: string;
+};
+export type TNavbarProps = {
+    applicationLocale?: string;
+    projectKey: string;
+    environment: TApplicationContext<{
+        useFullRedirectsForLinks?: boolean;
+    }>['environment'];
+    project: TFetchProjectQuery['project'];
+    onMenuItemClick?: MenuItemLinkProps['onClick'];
+    isLoading: boolean;
+    isNewNavigationEnabledEvaluationReady: boolean;
+};
+declare const NavBar: {
+    (props: TNavbarProps): import("@emotion/react/types/jsx-namespace").EmotionJSX.Element | null;
+    displayName: string;
+};
+export default NavBar;

package/dist/declarations/src/components/navbar/navbar-old/compiled/navbar.css.json.d.ts

@@ -0,0 +1,3 @@
+/* eslint-disable prettier/prettier */
+    declare const styles: {"left-navigation":"navbar-mod__left-navigation___B11QL","list":"navbar-mod__list___xLBjv","scrollable-menu":"navbar-mod__scrollable-menu___GUrXv","list-item":"navbar-mod__list-item___PtOVL","item-link":"navbar-mod__item-link___3b3a7","item-icon-text":"navbar-mod__item-icon-text___ZlMLY","icon":"navbar-mod__icon___xOiRj","icon__active":"navbar-mod__icon__active___8IKeB","title":"navbar-mod__title___uOjhW","expander":"navbar-mod__expander___1CChn","expand-icon":"navbar-mod__expand-icon___biAt6","item--bottom":"navbar-mod__item--bottom___RE98P","item__active":"navbar-mod__item__active___S-P3x","item_menu-open":"navbar-mod__item_menu-open___4wsej","item_menu-collapsed":"navbar-mod__item_menu-collapsed___SNDmx","item__no-submenu":"navbar-mod__item__no-submenu___mua5w","sublist":"navbar-mod__sublist___5VV4O","sublist-no-children":"navbar-mod__sublist-no-children___5Bwqb","title-copy":"navbar-mod__title-copy___SdRqf","sublist__inactive":"navbar-mod__sublist__inactive___9A4qo","sublist-item":"navbar-mod__sublist-item___d-8UM","text":"navbar-mod__text___a585r","text-link":"navbar-mod__text-link___pVuV6","item_menu__active":"navbar-mod__item_menu__active___c95PT","icon-container":"navbar-mod__icon-container___-yU8W","fixed-menu":"navbar-mod__fixed-menu___0HE2b","sublist-expanded__active":"navbar-mod__sublist-expanded__active___Fett-","sublist-collapsed__active":"navbar-mod__sublist-collapsed__active___NPTQn","highlighted":"navbar-mod__highlighted___WWk0R","hidden":"navbar-mod__hidden___kfXoC","divider":"navbar-mod__divider___A9rwl","loading-dot-container":"navbar-mod__loading-dot-container___8P8Tl"};
+    export default styles;

package/dist/declarations/src/components/navbar/{menu-items.d.ts → navbar-old/menu-items.d.ts}

@@ -1,7 +1,7 @@
-import { MouseEventHandler, ReactNode, SyntheticEvent } from 'react';
+import { MouseEventHandler, type ReactNode, type SyntheticEvent } from 'react';
 import type { TNormalizedMenuVisibilities, TNormalizedPermissions, TNormalizedActionRights, TNormalizedDataFences } from '@commercetools-frontend/application-shell-connectors';
 import { BackIcon } from '@commercetools-uikit/icons';
-import type { TDataFence, TActionRight, TLocalizedField } from '../../types/generated/proxy';
+import type { TDataFence, TActionRight, TLocalizedField } from '../../../types/generated/proxy';
 type TProjectPermissions = {
     permissions: TNormalizedPermissions | null;
     actionRights: TNormalizedActionRights | null;
@@ -36,7 +36,6 @@ type MenuGroupProps = {
     hasSubmenu?: boolean;
     children?: ReactNode;
     verticalPosition?: number;
-    isNewNavigationEnabled?: boolean;
 };
 declare const MenuGroup: {
     (props: MenuGroupProps): import("@emotion/react/types/jsx-namespace").EmotionJSX.Element | null;
@@ -52,14 +51,16 @@ type MenuItemProps = {
     onMouseLeave?: MouseEventHandler<HTMLElement>;
     children: ReactNode;
 };
-declare const MenuItem: import("react").ForwardRefExoticComponent<MenuItemProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const MenuItem: {
+    (props: MenuItemProps): import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+    displayName: string;
+};
 export type MenuItemLinkProps = {
     linkTo?: string;
     exactMatch: boolean;
     children: ReactNode;
     onClick?: (event: SyntheticEvent<HTMLAnchorElement>) => void;
     useFullRedirectsForLinks?: boolean;
-    isNewNavigationEnabled?: boolean;
 };
 declare const MenuItemLink: {
     (props: MenuItemLinkProps): import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
@@ -94,7 +95,6 @@ type MenuLabelProps = {
 declare const MenuLabel: (props: MenuLabelProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
 type TNavBarLayoutProps = {
     children: ReactNode;
-    isNewNavigationEnabled?: boolean;
 };
 declare const NavBarLayout: import("react").ForwardRefExoticComponent<TNavBarLayoutProps & import("react").RefAttributes<HTMLElement>>;
 export { RestrictedMenuItem, MenuItem, MenuItemLink, IconSwitcher, MenuGroup, MenuLabel, MenuItemDivider, MenuExpander, Faded, NavBarLayout, };

package/dist/declarations/src/components/navbar/navbar-old/navbar.d.ts

@@ -0,0 +1,48 @@
+import { type MouseEventHandler } from 'react';
+import type { RouteComponentProps } from 'react-router-dom';
+import type { TApplicationContext, TNormalizedMenuVisibilities, TNormalizedPermissions, TNormalizedActionRights, TNormalizedDataFences } from '@commercetools-frontend/application-shell-connectors';
+import type { TFetchProjectQuery } from '../../../types/generated/mc';
+import type { TNavbarMenu } from '../../../types/generated/proxy';
+import { type MenuItemLinkProps } from './menu-items';
+type TProjectPermissions = {
+    permissions: TNormalizedPermissions | null;
+    actionRights: TNormalizedActionRights | null;
+    dataFences: TNormalizedDataFences | null;
+};
+type TMenuWithDefaultLabel = TNavbarMenu & {
+    defaultLabel?: string;
+};
+type ApplicationMenuProps = {
+    location: RouteComponentProps['location'];
+    menu: TMenuWithDefaultLabel;
+    isActive: boolean;
+    isMenuOpen: boolean;
+    shouldCloseMenuFly: MouseEventHandler<HTMLElement>;
+    projectPermissions: TProjectPermissions;
+    menuVisibilities: TNormalizedMenuVisibilities | null;
+    handleToggleItem: () => void;
+    applicationLocale: string;
+    projectKey: string;
+    useFullRedirectsForLinks: boolean;
+    onMenuItemClick?: MenuItemLinkProps['onClick'];
+};
+export declare const ApplicationMenu: {
+    (props: ApplicationMenuProps): import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+    displayName: string;
+};
+export type TNavbarProps = {
+    applicationLocale?: string;
+    projectKey: string;
+    environment: TApplicationContext<{
+        useFullRedirectsForLinks?: boolean;
+    }>['environment'];
+    project: TFetchProjectQuery['project'];
+    onMenuItemClick?: MenuItemLinkProps['onClick'];
+    isLoading: boolean;
+    isNewNavigationEnabledEvaluationReady: boolean;
+};
+declare const NavBar: {
+    (props: TNavbarProps): import("@emotion/react/types/jsx-namespace").EmotionJSX.Element | null;
+    displayName: string;
+};
+export default NavBar;

package/dist/declarations/src/components/navbar/navbar-old/navbar.styles.d.ts

@@ -0,0 +1,7 @@
+declare type Styles = {
+  global: string;
+  jsonMap: typeof import('./compiled/navbar.css.json').default;
+};
+
+declare const styles: Styles;
+export default styles;

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

@@ -1,20 +1,8 @@
-import type { TApplicationContext } from '@commercetools-frontend/application-shell-connectors';
-import type { TFetchProjectQuery } from '../../types/generated/mc';
-import { type MenuItemLinkProps } from './menu-items';
-type TNavbarProps = {
-    applicationLocale?: string;
-    projectKey: string;
-    environment: TApplicationContext<{
-        useFullRedirectsForLinks?: boolean;
-    }>['environment'];
-    project: TFetchProjectQuery['project'];
-    onMenuItemClick?: MenuItemLinkProps['onClick'];
-    isLoading: boolean;
-    isNewNavigationEnabled: boolean;
-    isNewNavigationEnabledEvaluationReady: boolean;
-};
+import { type TNavbarProps } from './navbar-new/navbar';
 declare const NavBar: {
-    (props: TNavbarProps): import("@emotion/react/types/jsx-namespace").EmotionJSX.Element | null;
+    (props: TNavbarProps & {
+        isNewNavigationEnabled: boolean;
+    }): import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
     displayName: string;
 };
 export default NavBar;

package/dist/declarations/src/components/navbar/use-navbar-state-manager.d.ts

@@ -3,6 +3,7 @@ import type { TApplicationContext } from '@commercetools-frontend/application-sh
 import type { TNavbarMenu } from '../../types/generated/proxy';
 type HookProps = {
     environment: TApplicationContext<{}>['environment'];
+    newNavigation?: boolean;
 };
 declare const useNavbarStateManager: (props: HookProps) => {
     navBarNode: import("react").RefObject<HTMLElement>;

package/dist/declarations/src/components/project-container/index.d.ts

@@ -50,25 +50,7 @@ declare const ProjectContainer: import("react").LazyExoticComponent<{
         } | null | undefined;
         environment: {
             enableSignUp?: boolean | undefined;
-        } & {
-            applicationId: string;
-            customViewId?: string | undefined;
-            applicationName: string;
-            entryPointUriPath: string;
-            revision: string;
-            env: string;
-            location: string;
-            cdnUrl: string;
-            mcApiUrl: string;
-            frontendHost: string;
-            servedByProxy: boolean;
-            ldClientSideId?: string | undefined;
-            trackingSentry?: string | undefined;
-            __DEVELOPMENT__?: {
-                oidc?: import("@commercetools-frontend/constants").ApplicationOidcForDevelopmentConfig | undefined;
-                menuLinks?: import("@commercetools-frontend/constants").ApplicationMenuLinksForDevelopmentConfig | undefined;
-            } | undefined;
-        };
+        } & import("@commercetools-frontend/constants").ApplicationRuntimeEnvironment;
         disableRoutePermissionCheck?: boolean | undefined;
         render?: (() => JSX.Element) | undefined;
         children?: import("react").ReactNode;

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

@@ -3,6 +3,14 @@ export declare const DIMENSIONS: {
     readonly headerItemDivider: "24px";
     readonly navMenu: "64px";
     readonly navMenuExpanded: "245px";
+    readonly navMenuItemHeight: "48px";
+    readonly newNavMenu: "80px";
+    readonly newNavMenuExpanded: "256px";
+};
+export declare const WINDOW_SIZES: {
+    readonly NARROW: 918;
+    readonly STANDARD: 1024;
+    readonly WIDE: 1200;
 };
 export declare const SUPPORTED_HEADERS: {
     readonly ACCEPT: "Accept";

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

@@ -3,8 +3,8 @@ export { default as version } from './version';
 export { default as ApplicationShell } from './components/application-shell';
 export { default as ApplicationShellProvider } from './components/application-shell-provider';
 export { default as ApplicationPageTitle } from './components/application-page-title';
+export { default as CustomViewLoader } from './components/custom-view-loader';
 export { default as CustomViewShell } from './components/custom-view-shell';
-export * from './components/custom-view-context';
 export { default as createApolloClient } from './configure-apollo';
 export { applyDefaultMiddlewares } from './configure-store';
 export { default as InjectReducers } from './components/inject-reducers';

package/dist/declarations/src/test-utils/custom-views-utils.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+import type { RenderResult } from '@testing-library/react';
+import type { CustomViewData } from '@commercetools-frontend/constants';
+type TRenderCustomViewParams = {
+    locale: string;
+    projectKey?: string;
+    customViewHostUrl?: string;
+    customViewConfig?: Partial<CustomViewData>;
+    children: ReactNode;
+};
+export declare const renderCustomView: (props: TRenderCustomViewParams) => RenderResult;
+export {};

package/dist/declarations/src/test-utils/index.d.ts

@@ -1 +1,2 @@
 export * from './test-utils';
+export * from './custom-views-utils';