@commercetools-frontend/application-components 22.22.0 → 22.23.0

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

@@ -95,7 +95,7 @@ var Stamp__default = /*#__PURE__*/_interopDefault(Stamp);
 var useResizeObserver__default = /*#__PURE__*/_interopDefault(useResizeObserver);
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "22.22.0";
+var version = "22.23.0";
 
 var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11;
 
@@ -790,6 +790,7 @@ jsxRuntime.jsx("div", _objectSpread$5(_objectSpread$5({}, props), {}, {
 // NOTE: the `MessageDescriptor` type is exposed by `react-intl`.
 // However, we need to explicitly define this otherwise the prop-types babel plugin
 // does not recognize the object shape.
+
 const defaultProps$d = {
   size: 'scale',
   getParentSelector: getDefaultParentSelector,
@@ -1048,9 +1049,12 @@ var messages$3 = reactIntl.defineMessages({
 
 var FetchCustomViewsQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "FetchCustomViewsByLocator" }, variableDefinitions: [{ kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "customViewLocatorCode" } }, type: { kind: "NonNullType", type: { kind: "NamedType", name: { kind: "Name", value: "String" } } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "allCustomViewsInstallationsByLocator" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "locator" }, value: { kind: "Variable", name: { kind: "Name", value: "customViewLocatorCode" } } }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "customView" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "defaultLabel" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "labelAllLocales" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "locale" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "url" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "type" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "typeSettings" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "size" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "locators" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "permissions" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "oAuthScopes" }, arguments: [], directives: [] }] } }] } }] } }] } }], loc: { start: 0, end: 405, source: { body: "query FetchCustomViewsByLocator($customViewLocatorCode: String!) {\n  allCustomViewsInstallationsByLocator(locator: $customViewLocatorCode) {\n    id\n    customView {\n      id\n      defaultLabel\n      labelAllLocales {\n        locale\n        value\n      }\n      url\n      type\n      typeSettings {\n        size\n      }\n      locators\n      permissions {\n        name\n        oAuthScopes\n      }\n    }\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
 const useCustomViewsConnector = _ref => {
-  var _data$allCustomViewsI;
+  var _enableCustomViews$va, _data$allCustomViewsI;
   let customViewLocatorCode = _ref.customViewLocatorCode;
-  const areCustomViewsEnabled = reactBroadcast.useFeatureToggle(constants.featureFlags.CUSTOM_VIEWS) && process.env.DISABLE_CUSTOM_VIEWS_FEATURE !== 'true';
+  const enableCustomViews = reactBroadcast.useFlagVariation(constants.featureFlags.CUSTOM_VIEWS);
+  const areCustomViewsEnabled =
+  // @ts-ignore In case it's coming from the MC API, it's an object { value: boolean }.
+  ((_enableCustomViews$va = enableCustomViews === null || enableCustomViews === void 0 ? void 0 : enableCustomViews.value) !== null && _enableCustomViews$va !== void 0 ? _enableCustomViews$va : enableCustomViews) && process.env.DISABLE_CUSTOM_VIEWS_FEATURE !== 'true';
   const _useMcQuery = applicationShellConnectors.useMcQuery(FetchCustomViewsQuery, {
       variables: {
         customViewLocatorCode
@@ -1809,6 +1813,7 @@ const getCustomViewsSelectorMargin = hasContentBelow => {
 // NOTE: the `MessageDescriptor` type is exposed by `react-intl`.
 // However, we need to explicitly define this otherwise the prop-types babel plugin
 // does not recognize the object shape.
+
 const defaultProps$7 = {
   hideControls: false
 };

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

@@ -94,7 +94,7 @@ var Stamp__default = /*#__PURE__*/_interopDefault(Stamp);
 var useResizeObserver__default = /*#__PURE__*/_interopDefault(useResizeObserver);
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "22.22.0";
+var version = "22.23.0";
 
 var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11;
 
@@ -629,6 +629,7 @@ jsxRuntime.jsx("div", _objectSpread$5(_objectSpread$5({}, props), {}, {
 // NOTE: the `MessageDescriptor` type is exposed by `react-intl`.
 // However, we need to explicitly define this otherwise the prop-types babel plugin
 // does not recognize the object shape.
+
 const defaultProps$d = {
   size: 'scale',
   getParentSelector: getDefaultParentSelector,
@@ -845,9 +846,12 @@ var messages$3 = reactIntl.defineMessages({
 
 var FetchCustomViewsQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "FetchCustomViewsByLocator" }, variableDefinitions: [{ kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "customViewLocatorCode" } }, type: { kind: "NonNullType", type: { kind: "NamedType", name: { kind: "Name", value: "String" } } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "allCustomViewsInstallationsByLocator" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "locator" }, value: { kind: "Variable", name: { kind: "Name", value: "customViewLocatorCode" } } }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "customView" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "defaultLabel" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "labelAllLocales" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "locale" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "url" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "type" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "typeSettings" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "size" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "locators" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "permissions" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "oAuthScopes" }, arguments: [], directives: [] }] } }] } }] } }] } }], loc: { start: 0, end: 405, source: { body: "query FetchCustomViewsByLocator($customViewLocatorCode: String!) {\n  allCustomViewsInstallationsByLocator(locator: $customViewLocatorCode) {\n    id\n    customView {\n      id\n      defaultLabel\n      labelAllLocales {\n        locale\n        value\n      }\n      url\n      type\n      typeSettings {\n        size\n      }\n      locators\n      permissions {\n        name\n        oAuthScopes\n      }\n    }\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
 const useCustomViewsConnector = _ref => {
-  var _data$allCustomViewsI;
+  var _enableCustomViews$va, _data$allCustomViewsI;
   let customViewLocatorCode = _ref.customViewLocatorCode;
-  const areCustomViewsEnabled = reactBroadcast.useFeatureToggle(constants.featureFlags.CUSTOM_VIEWS) && process.env.DISABLE_CUSTOM_VIEWS_FEATURE !== 'true';
+  const enableCustomViews = reactBroadcast.useFlagVariation(constants.featureFlags.CUSTOM_VIEWS);
+  const areCustomViewsEnabled =
+  // @ts-ignore In case it's coming from the MC API, it's an object { value: boolean }.
+  ((_enableCustomViews$va = enableCustomViews === null || enableCustomViews === void 0 ? void 0 : enableCustomViews.value) !== null && _enableCustomViews$va !== void 0 ? _enableCustomViews$va : enableCustomViews) && process.env.DISABLE_CUSTOM_VIEWS_FEATURE !== 'true';
   const _useMcQuery = applicationShellConnectors.useMcQuery(FetchCustomViewsQuery, {
       variables: {
         customViewLocatorCode
@@ -1376,6 +1380,7 @@ const getCustomViewsSelectorMargin = hasContentBelow => {
 // NOTE: the `MessageDescriptor` type is exposed by `react-intl`.
 // However, we need to explicitly define this otherwise the prop-types babel plugin
 // does not recognize the object shape.
+
 const defaultProps$7 = {
   hideControls: false
 };

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

@@ -34,7 +34,7 @@ import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance
 import { reportErrorToSentry } from '@commercetools-frontend/sentry';
 import AccessibleButton from '@commercetools-uikit/accessible-button';
 import Constraints from '@commercetools-uikit/constraints';
-import { useAllFeatureToggles, useFeatureToggle } from '@flopflip/react-broadcast';
+import { useAllFeatureToggles, useFlagVariation } from '@flopflip/react-broadcast';
 import { useShowNotification } from '@commercetools-frontend/actions-global';
 import { useApplicationContext, useMcQuery } from '@commercetools-frontend/application-shell-connectors';
 import _setTimeout from '@babel/runtime-corejs3/core-js-stable/set-timeout';
@@ -53,7 +53,7 @@ import useResizeObserver from '@react-hook/resize-observer';
 import { useMutationObserver } from '@commercetools-uikit/hooks';
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "22.22.0";
+var version = "22.23.0";
 
 var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11;
 
@@ -748,6 +748,7 @@ jsx("div", _objectSpread$5(_objectSpread$5({}, props), {}, {
 // NOTE: the `MessageDescriptor` type is exposed by `react-intl`.
 // However, we need to explicitly define this otherwise the prop-types babel plugin
 // does not recognize the object shape.
+
 const defaultProps$d = {
   size: 'scale',
   getParentSelector: getDefaultParentSelector,
@@ -1006,9 +1007,12 @@ var messages$3 = defineMessages({
 
 var FetchCustomViewsQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "FetchCustomViewsByLocator" }, variableDefinitions: [{ kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "customViewLocatorCode" } }, type: { kind: "NonNullType", type: { kind: "NamedType", name: { kind: "Name", value: "String" } } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "allCustomViewsInstallationsByLocator" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "locator" }, value: { kind: "Variable", name: { kind: "Name", value: "customViewLocatorCode" } } }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "customView" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "defaultLabel" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "labelAllLocales" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "locale" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "url" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "type" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "typeSettings" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "size" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "locators" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "permissions" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "oAuthScopes" }, arguments: [], directives: [] }] } }] } }] } }] } }], loc: { start: 0, end: 405, source: { body: "query FetchCustomViewsByLocator($customViewLocatorCode: String!) {\n  allCustomViewsInstallationsByLocator(locator: $customViewLocatorCode) {\n    id\n    customView {\n      id\n      defaultLabel\n      labelAllLocales {\n        locale\n        value\n      }\n      url\n      type\n      typeSettings {\n        size\n      }\n      locators\n      permissions {\n        name\n        oAuthScopes\n      }\n    }\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
 const useCustomViewsConnector = _ref => {
-  var _data$allCustomViewsI;
+  var _enableCustomViews$va, _data$allCustomViewsI;
   let customViewLocatorCode = _ref.customViewLocatorCode;
-  const areCustomViewsEnabled = useFeatureToggle(featureFlags.CUSTOM_VIEWS) && process.env.DISABLE_CUSTOM_VIEWS_FEATURE !== 'true';
+  const enableCustomViews = useFlagVariation(featureFlags.CUSTOM_VIEWS);
+  const areCustomViewsEnabled =
+  // @ts-ignore In case it's coming from the MC API, it's an object { value: boolean }.
+  ((_enableCustomViews$va = enableCustomViews === null || enableCustomViews === void 0 ? void 0 : enableCustomViews.value) !== null && _enableCustomViews$va !== void 0 ? _enableCustomViews$va : enableCustomViews) && process.env.DISABLE_CUSTOM_VIEWS_FEATURE !== 'true';
   const _useMcQuery = useMcQuery(FetchCustomViewsQuery, {
       variables: {
         customViewLocatorCode
@@ -1767,6 +1771,7 @@ const getCustomViewsSelectorMargin = hasContentBelow => {
 // NOTE: the `MessageDescriptor` type is exposed by `react-intl`.
 // However, we need to explicitly define this otherwise the prop-types babel plugin
 // does not recognize the object shape.
+
 const defaultProps$7 = {
   hideControls: false
 };

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

@@ -26,18 +26,18 @@ export declare const themesOverrides: {
         paddingForDetailPageHeader: string;
         paddingForMainPageHeader: string;
         paddingForTabularPageHeader: string;
-        backgroundColorForNavbar: "var(--color-primary-10, hsl(240, 66%, 19%))";
-        backgroundColorForNavbarExpander: "var(--color-primary-10, hsl(240, 66%, 19%))";
-        backgroundColorForNavbarExpanderWhenHovered: "var(--color-primary-10, hsl(240, 66%, 19%))";
-        backgroundColorForNavbarHeader: "var(--color-primary-10, hsl(240, 66%, 19%))";
+        backgroundColorForNavbar: "var(--color-primary-10, hsl(175, 55%, 10%))";
+        backgroundColorForNavbarExpander: "var(--color-primary-10, hsl(175, 55%, 10%))";
+        backgroundColorForNavbarExpanderWhenHovered: "var(--color-primary-10, hsl(175, 55%, 10%))";
+        backgroundColorForNavbarHeader: "var(--color-primary-10, hsl(175, 55%, 10%))";
         backgroundColorForNavbarMenuItemWhenActive: "var(--color-primary-25, hsl(175, 55%, 25%))";
         backgroundColorForNavbarSubmenuItemWhenActive: "var(--color-primary-40, hsl(175, 55%, 40%))";
         backgroundColorForNavbarMenuItemWhenHovered: "var(--color-primary-20, hsl(175, 55%, 20%))";
-        backgroundColorForNavbarSkeleton: "var(--color-primary-10, hsl(240, 66%, 19%))";
-        backgroundColorForNavbarSkeletonFooter: "var(--color-primary-10, hsl(240, 66%, 19%))";
+        backgroundColorForNavbarSkeleton: "var(--color-primary-10, hsl(175, 55%, 10%))";
+        backgroundColorForNavbarSkeletonFooter: "var(--color-primary-10, hsl(175, 55%, 10%))";
         borderColorForNotificationWhenSuccess: "var(--color-success-85, hsl(144, 69%, 80%))";
         fontColorForNotificationWhenSuccess: "var(--color-success, hsl(152, 77%, 39%))";
-        fontColorForNotificationWhenWarning: "var(--color-warning-60, hsl(35, 90%, 55%))";
+        fontColorForNotificationWhenWarning: "var(--color-warning-60, hsl(25.110132158590307, 90%, 60%))";
         fontColorForTabLabelWhenActive: "var(--color-primary, hsl(175, 55%, 45%))";
         visibilityForNavbarFaded: string;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercetools-frontend/application-components",
-  "version": "22.22.0",
+  "version": "22.23.0",
   "description": "Generic components for building Merchant Center applications",
   "bugs": "https://github.com/commercetools/merchant-center-application-kit/issues",
   "repository": {
@@ -36,31 +36,31 @@
   "dependencies": {
     "@babel/runtime": "^7.22.15",
     "@babel/runtime-corejs3": "^7.22.15",
-    "@commercetools-frontend/actions-global": "22.22.0",
-    "@commercetools-frontend/application-config": "22.22.0",
-    "@commercetools-frontend/application-shell-connectors": "22.22.0",
-    "@commercetools-frontend/assets": "22.22.0",
-    "@commercetools-frontend/constants": "22.22.0",
-    "@commercetools-frontend/i18n": "22.22.0",
-    "@commercetools-frontend/l10n": "22.22.0",
-    "@commercetools-frontend/sentry": "22.22.0",
-    "@commercetools-uikit/accessible-button": "^18.2.0",
-    "@commercetools-uikit/card": "^18.2.0",
-    "@commercetools-uikit/constraints": "^18.2.0",
-    "@commercetools-uikit/design-system": "^18.2.0",
-    "@commercetools-uikit/flat-button": "^18.2.0",
-    "@commercetools-uikit/hooks": "^18.2.0",
-    "@commercetools-uikit/icon-button": "^18.2.0",
-    "@commercetools-uikit/icons": "^18.2.0",
-    "@commercetools-uikit/label": "^18.2.0",
-    "@commercetools-uikit/messages": "^18.2.0",
-    "@commercetools-uikit/primary-button": "^18.2.0",
-    "@commercetools-uikit/secondary-button": "^18.2.0",
-    "@commercetools-uikit/secondary-icon-button": "^18.2.0",
-    "@commercetools-uikit/spacings": "^18.2.0",
-    "@commercetools-uikit/stamp": "^18.2.0",
-    "@commercetools-uikit/text": "^18.2.0",
-    "@commercetools-uikit/utils": "^18.2.0",
+    "@commercetools-frontend/actions-global": "22.23.0",
+    "@commercetools-frontend/application-config": "22.23.0",
+    "@commercetools-frontend/application-shell-connectors": "22.23.0",
+    "@commercetools-frontend/assets": "22.23.0",
+    "@commercetools-frontend/constants": "22.23.0",
+    "@commercetools-frontend/i18n": "22.23.0",
+    "@commercetools-frontend/l10n": "22.23.0",
+    "@commercetools-frontend/sentry": "22.23.0",
+    "@commercetools-uikit/accessible-button": "^19.0.0",
+    "@commercetools-uikit/card": "^19.0.0",
+    "@commercetools-uikit/constraints": "^19.0.0",
+    "@commercetools-uikit/design-system": "^19.0.0",
+    "@commercetools-uikit/flat-button": "^19.0.0",
+    "@commercetools-uikit/hooks": "^19.0.0",
+    "@commercetools-uikit/icon-button": "^19.0.0",
+    "@commercetools-uikit/icons": "^19.0.0",
+    "@commercetools-uikit/label": "^19.0.0",
+    "@commercetools-uikit/messages": "^19.0.0",
+    "@commercetools-uikit/primary-button": "^19.0.0",
+    "@commercetools-uikit/secondary-button": "^19.0.0",
+    "@commercetools-uikit/secondary-icon-button": "^19.0.0",
+    "@commercetools-uikit/spacings": "^19.0.0",
+    "@commercetools-uikit/stamp": "^19.0.0",
+    "@commercetools-uikit/text": "^19.0.0",
+    "@commercetools-uikit/utils": "^19.0.0",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
     "@flopflip/react-broadcast": "13.4.1",
@@ -87,11 +87,11 @@
     "@types/jest": "^29.5.4",
     "@types/raf-schd": "^4.0.1",
     "@types/testing-library__jest-dom": "^5.14.9",
-    "jest": "29.5.0",
+    "jest": "29.7.0",
     "msw": "0.49.3",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-intl": "^6.4.5",
+    "react-intl": "^6.4.7",
     "react-router-dom": "5.3.4"
   },
   "peerDependencies": {