@commercetools-frontend/application-shell 21.0.0 → 21.2.1

package/dist/{application-entry-point-31dfe59b.cjs.dev.js → application-entry-point-1126a3a0.cjs.dev.js}

@@ -101,7 +101,7 @@ var _pt__default = /*#__PURE__*/_interopDefault(_pt);
 var invariant__default = /*#__PURE__*/_interopDefault(invariant);
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "21.0.0";
+var version = "21.2.1";
 
 var isAddNotificationErrorAction = function isAddNotificationErrorAction(action) {
   var errorAction = action;

package/dist/{application-entry-point-bdf073d3.esm.js → application-entry-point-1d14f973.esm.js}

@@ -60,7 +60,7 @@ import { PageNotFound, PageUnauthorized } from '@commercetools-frontend/applicat
 import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "21.0.0";
+var version = "21.2.1";
 
 var isAddNotificationErrorAction = function isAddNotificationErrorAction(action) {
   var errorAction = action;

package/dist/{application-entry-point-9d705d31.cjs.prod.js → application-entry-point-c8e001b7.cjs.prod.js}

@@ -100,7 +100,7 @@ var _JSON$stringify__default = /*#__PURE__*/_interopDefault(_JSON$stringify);
 var invariant__default = /*#__PURE__*/_interopDefault(invariant);
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "21.0.0";
+var version = "21.2.1";
 
 var isAddNotificationErrorAction = function isAddNotificationErrorAction(action) {
   var errorAction = action;

package/dist/commercetools-frontend-application-shell.cjs.dev.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var applicationEntryPoint = require('./application-entry-point-31dfe59b.cjs.dev.js');
-var dist_commercetoolsFrontendApplicationShell = require('./index-1a2e380b.cjs.dev.js');
+var applicationEntryPoint = require('./application-entry-point-1126a3a0.cjs.dev.js');
+var dist_commercetoolsFrontendApplicationShell = require('./index-ba1e4ad6.cjs.dev.js');
 require('@babel/runtime-corejs3/core-js-stable/instance/filter');
 require('uuid');
 require('@babel/runtime-corejs3/core-js-stable/url');
@@ -102,7 +102,6 @@ require('memoize-one');
 require('@commercetools-uikit/select-input');
 require('@babel/runtime-corejs3/helpers/taggedTemplateLiteral');
 require('lodash/isNil');
-require('react-select');
 require('@babel/runtime-corejs3/helpers/asyncToGenerator');
 require('@babel/runtime-corejs3/regenerator');
 require('@babel/runtime-corejs3/core-js-stable/object/from-entries');

package/dist/commercetools-frontend-application-shell.cjs.prod.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var applicationEntryPoint = require('./application-entry-point-9d705d31.cjs.prod.js');
-var dist_commercetoolsFrontendApplicationShell = require('./index-415c01b8.cjs.prod.js');
+var applicationEntryPoint = require('./application-entry-point-c8e001b7.cjs.prod.js');
+var dist_commercetoolsFrontendApplicationShell = require('./index-4a064d3c.cjs.prod.js');
 require('@babel/runtime-corejs3/core-js-stable/instance/filter');
 require('uuid');
 require('@babel/runtime-corejs3/core-js-stable/url');
@@ -102,7 +102,6 @@ require('memoize-one');
 require('@commercetools-uikit/select-input');
 require('@babel/runtime-corejs3/helpers/taggedTemplateLiteral');
 require('lodash/isNil');
-require('react-select');
 require('@babel/runtime-corejs3/helpers/asyncToGenerator');
 require('@babel/runtime-corejs3/regenerator');
 require('@babel/runtime-corejs3/core-js-stable/object/from-entries');

package/dist/commercetools-frontend-application-shell.esm.js

@@ -1,5 +1,5 @@
-export { p as RouteCatchAll, q as applyDefaultMiddlewares, f as createApolloClient, n as selectProjectKeyFromUrl, t as selectUserId, v as version } from './application-entry-point-bdf073d3.esm.js';
-export { A as ApplicationShell, a as ApplicationShellProvider, C as ConfigureIntlProvider, G as GtmContext, b as GtmUserLogoutTracker, I as InjectReducers, S as SetupFlopFlipProvider, c as createApolloContextForProxyForwardTo, s as setupGlobalErrorListener, d as useMcLazyQuery, e as useMcMutation, u as useMcQuery } from './index-cc3be79d.esm.js';
+export { p as RouteCatchAll, q as applyDefaultMiddlewares, f as createApolloClient, n as selectProjectKeyFromUrl, t as selectUserId, v as version } from './application-entry-point-1d14f973.esm.js';
+export { A as ApplicationShell, a as ApplicationShellProvider, C as ConfigureIntlProvider, G as GtmContext, b as GtmUserLogoutTracker, I as InjectReducers, S as SetupFlopFlipProvider, c as createApolloContextForProxyForwardTo, s as setupGlobalErrorListener, d as useMcLazyQuery, e as useMcMutation, u as useMcQuery } from './index-4ffa508b.esm.js';
 import '@babel/runtime-corejs3/core-js-stable/instance/filter';
 import 'uuid';
 import '@babel/runtime-corejs3/core-js-stable/url';
@@ -98,7 +98,6 @@ import 'memoize-one';
 import '@commercetools-uikit/select-input';
 import '@babel/runtime-corejs3/helpers/taggedTemplateLiteral';
 import 'lodash/isNil';
-import 'react-select';
 import '@babel/runtime-corejs3/helpers/asyncToGenerator';
 import '@babel/runtime-corejs3/regenerator';
 import '@babel/runtime-corejs3/core-js-stable/object/from-entries';

package/dist/declarations/src/components/locale-switcher/locale-switcher.d.ts

@@ -1,7 +1,5 @@
-/// <reference types="commercetools-uikit__select-input" />
 import type { SingleValueProps } from 'react-select';
-import type { SelectInputOption } from '@commercetools-uikit/select-input';
-declare type CustomSingleValueProps = SingleValueProps<SelectInputOption, false> & {
+declare type CustomSingleValueProps = SingleValueProps & {
     localeCount: number;
 };
 declare type Props = {

package/dist/declarations/src/components/project-switcher/project-switcher.d.ts

@@ -1,16 +1,12 @@
 import type { OptionProps, ValueContainerProps } from 'react-select';
-import type { TProject } from '../../types/generated/mc';
 declare type Props = {
     projectKey?: string;
 };
-declare type OptionType = Pick<TProject, 'key' | 'name' | 'suspension' | 'expiry'> & {
-    label: string;
-};
-declare type CustomValueContainerProps = ValueContainerProps<OptionType, false> & {
+declare type CustomValueContainerProps = ValueContainerProps & {
     projectCount: number;
 };
 export declare const ProjectSwitcherValueContainer: ({ projectCount, ...restProps }: CustomValueContainerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export declare const ProjectSwitcherOption: (props: OptionProps<OptionType, false>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ProjectSwitcherOption: (props: OptionProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 declare const ProjectSwitcher: {
     (props: Props): import("@emotion/react/jsx-runtime").JSX.Element | null;
     displayName: string;

package/dist/{index-415c01b8.cjs.prod.js → index-4a064d3c.cjs.prod.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var applicationEntryPoint = require('./application-entry-point-9d705d31.cjs.prod.js');
+var applicationEntryPoint = require('./application-entry-point-c8e001b7.cjs.prod.js');
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 var _styled = require('@emotion/styled/base');
 var _pt = require('prop-types');
@@ -76,7 +76,6 @@ var SelectInput = require('@commercetools-uikit/select-input');
 var _taggedTemplateLiteral = require('@babel/runtime-corejs3/helpers/taggedTemplateLiteral');
 var ReactDOM = require('react-dom');
 var isNil = require('lodash/isNil');
-var reactSelect = require('react-select');
 var _asyncToGenerator = require('@babel/runtime-corejs3/helpers/asyncToGenerator');
 var _regeneratorRuntime = require('@babel/runtime-corejs3/regenerator');
 var _Object$fromEntries = require('@babel/runtime-corejs3/core-js-stable/object/from-entries');
@@ -1521,16 +1520,25 @@ function useApplicationsMenu(menuKey, config) {
   var apolloClient = client.useApolloClient();
   var mcProxyApiUrl = applicationShellConnectors.useApplicationContext(function (context) {
     return context.environment.mcProxyApiUrl;
-  }); // Fetch all menu links from the GraphQL API in the Merchant Center Proxy.
+  });
+
+  var _useState = react.useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      hasWrittenToCache = _useState2[0],
+      setHasWrittenToCache = _useState2[1]; // Fetch all menu links from the GraphQL API in the Merchant Center Proxy.
   // For local development, we don't fetch data from the remote server but use
   // only the configuration for the menu links defined for the application.
   // To do so, we manually write the data in the Apollo cache and use the
   // `fetchPolicy: cache-only` to instruct Apollo to read the data from the cache.
-  // NOTE: we lazily execute the query to ensure that (for development) we can
-  // write the data into the cache BEFORE the query attempts to read from it.
-  // If not, Apollo throws an error like `Can't find field 'applicationMenu' on ROOT_QUERY object`.
+  // NOTE: In development, we skip the query as long as the data hasn't been written
+  // into the cache. If not, Apollo throws an error like
+  // `Can't find field 'applicationMenu' on ROOT_QUERY object`.
 
-  var _useMcLazyQuery = useMcLazyQuery(FetchApplicationsMenu, {
+
+  var _useMcQuery = useMcQuery(FetchApplicationsMenu, {
+    skip: config.environment.servedByProxy ? // Production environment
+    false : // Development environment
+    !hasWrittenToCache,
     onError: (_config$queryOptions = config.queryOptions) === null || _config$queryOptions === void 0 ? void 0 : _config$queryOptions.onError,
     fetchPolicy: config.environment.servedByProxy ? 'cache-first' : 'cache-only',
     context: {
@@ -1539,29 +1547,22 @@ function useApplicationsMenu(menuKey, config) {
       skipGraphQlTargetCheck: true
     }
   }),
-      _useMcLazyQuery2 = _slicedToArray(_useMcLazyQuery, 2),
-      executeQuery = _useMcLazyQuery2[0],
-      _useMcLazyQuery2$ = _useMcLazyQuery2[1],
-      menuQueryResult = _useMcLazyQuery2$.data,
-      called = _useMcLazyQuery2$.called; // For development, we read the menu data from the configuration file and
+      menuQueryResult = _useMcQuery.data; // For development, we read the menu data from the configuration file and
   // write it into the Apollo cache.
 
 
   react.useEffect(function () {
     if (config.environment.__DEVELOPMENT__ && (config.environment.__DEVELOPMENT__.menuLinks || // @ts-expect-error: the `accountLinks` is not explicitly typed as it's only used by the account app.
-    config.environment.__DEVELOPMENT__.accountLinks)) {
+    config.environment.__DEVELOPMENT__.accountLinks) && !hasWrittenToCache) {
       var applicationMenu = mapApplicationMenuConfigToGraqhQLQueryResult(config.environment);
       apolloClient.writeQuery({
         query: FetchApplicationsMenu,
         data: applicationMenu
       });
-    }
-
-    if (!called) {
-      executeQuery();
+      setHasWrittenToCache(true);
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-  }, []); // Make sure to run this effect only once, otherwise we might end up in an infinite loop!
+  }, [hasWrittenToCache]); // Only subscribe to state changes.
 
   if (menuQueryResult && menuQueryResult.applicationsMenu) {
     return menuQueryResult.applicationsMenu[menuKey];
@@ -1937,12 +1938,13 @@ var _ref3$1 = {
 } ;
 
 var ProjectSwitcherOption = function ProjectSwitcherOption(props) {
+  var project = props.data;
   return jsxRuntime.jsx(SelectInput__default["default"].Option, _objectSpread$7(_objectSpread$7({}, props), {}, {
     children: jsxRuntime.jsxs("div", {
       css: _ref3$1,
       children: [jsxRuntime.jsxs("div", {
         css: /*#__PURE__*/react$2.css("color:", props.isDisabled ? designSystem.customProperties.colorNeutral : designSystem.customProperties.colorAccent, ";" + ("" ), "" ),
-        children: [props.data.name, props.isDisabled && jsxRuntime.jsx("span", {
+        children: [project.name, props.isDisabled && jsxRuntime.jsx("span", {
           css: _ref2$2,
           children: jsxRuntime.jsx(icons.ErrorIcon, {
             size: "medium"
@@ -1950,11 +1952,11 @@ var ProjectSwitcherOption = function ProjectSwitcherOption(props) {
         })]
       }), jsxRuntime.jsx("div", {
         css: /*#__PURE__*/react$2.css("font-size:11px;color:", props.isDisabled ? designSystem.customProperties.colorNeutral : 'inherit', ";" + ("" ), "" ),
-        children: props.data.key
-      }), props.data.suspension && props.data.suspension.isActive && jsxRuntime.jsx("div", {
+        children: project.key
+      }), project.suspension && project.suspension.isActive && jsxRuntime.jsx("div", {
         css: /*#__PURE__*/react$2.css("font-size:11px;color:", designSystem.customProperties.colorError, ";" + ("" ), "" ),
         children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$7({}, messages$3.suspended))
-      }), props.data.expiry && props.data.expiry.isActive && jsxRuntime.jsx("div", {
+      }), project.expiry && project.expiry.isActive && jsxRuntime.jsx("div", {
         css: /*#__PURE__*/react$2.css("font-size:11px;color:", designSystem.customProperties.colorError, ";" + ("" ), "" ),
         children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$7({}, messages$3.expired))
       })]
@@ -2022,7 +2024,8 @@ var ProjectSwitcher = function ProjectSwitcher(props) {
       },
       options: data && data.user && mapProjectsToOptions(data.user.projects.results),
       isOptionDisabled: function isOptionDisabled(option) {
-        return option.suspension.isActive || option.expiry.isActive;
+        var project = option;
+        return project.suspension.isActive || project.expiry.isActive;
       },
       components: {
         Option: ProjectSwitcherOption,
@@ -2279,7 +2282,7 @@ _SingleValue.propTypes = {};
 _SingleValue.displayName = 'SingleValue';
 
 var PatchedValueContainer = function PatchedValueContainer(props) {
-  return jsxRuntime.jsx(reactSelect.components.ValueContainer, _objectSpread$6(_objectSpread$6({}, props), {}, {
+  return jsxRuntime.jsx(SelectInput__default["default"].ValueContainer, _objectSpread$6(_objectSpread$6({}, props), {}, {
     innerProps: {
       style: {
         display: 'flex'
@@ -2329,19 +2332,19 @@ var LocaleSwitcher = function LocaleSwitcher(props) {
 LocaleSwitcher.propTypes = {};
 
 var ProjectNotFound = /*#__PURE__*/react.lazy(function () {
-  return Promise.resolve().then(function () { return require('./project-not-found-bfdafeeb.cjs.prod.js'
+  return Promise.resolve().then(function () { return require('./project-not-found-77c72212.cjs.prod.js'
   /* webpackChunkName: "project-not-found" */
   ); });
 });
 
 var ProjectExpired = /*#__PURE__*/react.lazy(function () {
-  return Promise.resolve().then(function () { return require('./project-expired-c73098dd.cjs.prod.js'
+  return Promise.resolve().then(function () { return require('./project-expired-c28b50d9.cjs.prod.js'
   /* webpackChunkName: "project-expired" */
   ); });
 });
 
 var ProjectNotInitialized = /*#__PURE__*/react.lazy(function () {
-  return Promise.resolve().then(function () { return require('./project-not-initialized-87e889d8.cjs.prod.js'
+  return Promise.resolve().then(function () { return require('./project-not-initialized-46b2b026.cjs.prod.js'
   /* webpackChunkName: "project-not-initialized" */
   ); });
 });
@@ -2388,7 +2391,7 @@ var RedirectToProjectCreate = function RedirectToProjectCreate() {
 RedirectToProjectCreate.displayName = 'RedirectToProjectCreate';
 
 var ProjectSuspended = /*#__PURE__*/react.lazy(function () {
-  return Promise.resolve().then(function () { return require('./project-suspended-259ced61.cjs.prod.js'
+  return Promise.resolve().then(function () { return require('./project-suspended-7dabf6de.cjs.prod.js'
   /* webpackChunkName: "project-suspended" */
   ); });
 });
@@ -3603,7 +3606,7 @@ var pimIndexerStates = {
 };
 
 var QuickAccess = /*#__PURE__*/react.lazy(function () {
-  return Promise.resolve().then(function () { return require('./quick-access-0fddc03b.cjs.prod.js'
+  return Promise.resolve().then(function () { return require('./quick-access-1ebebadc.cjs.prod.js'
   /* webpackChunkName: "quick-access" */
   ); });
 });