@commercetools-frontend/experimental-components 7.2.0 → 7.2.2

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

@@ -9078,11 +9078,11 @@ const RecurrentIntervalPicker = _ref => {
     formatMessage = _useIntl.formatMessage;
   const dataLocale = applicationShellConnectors.useApplicationContext(applicationContext => applicationContext.dataLocale);
   const formatLocalizedFieldToString = useFormatLocalizedFieldToString();
-  const skip = isReadOnly && !value;
+  const skipFetch = isReadOnly && !value;
   const where = isReadOnly && value ? `id="${value}"` : undefined;
   const _useRecurrenceInterva = useRecurrenceIntervals({
       where,
-      skip
+      skip: skipFetch
     }),
     recurrencePolicies = _useRecurrenceInterva.recurrencePolicies,
     loading = _useRecurrenceInterva.loading,
@@ -9107,7 +9107,7 @@ const RecurrentIntervalPicker = _ref => {
     }
     return mapped;
   }, [recurrencePolicies, selectedIsMissingInData, value, dataLocale, formatMessage, formatLocalizedFieldToString, loading]);
-  const noRecurrentIntervalsConfigured = !loading && recurrencePolicies.length === 0;
+  const noRecurrentIntervalsConfigured = !loading && !skipFetch && recurrencePolicies.length === 0;
   React.useEffect(() => {
     if (error && onError) {
       onError(error);
@@ -9133,7 +9133,7 @@ const RecurrentIntervalPicker = _ref => {
     }) : selectedIsMissingInData ? jsxRuntime.jsx(uiKit.Text.Body, {
       tone: "negative",
       intlMessage: messages$w.missingSelectedWarning
-    }) : null, !error && !skip && noRecurrentIntervalsConfigured && jsxRuntime.jsx(uiKit.ContentNotification, {
+    }) : null, !error && noRecurrentIntervalsConfigured && jsxRuntime.jsx(uiKit.ContentNotification, {
       type: "warning",
       children: jsxRuntime.jsx(uiKit.Text.Detail, {
         intlMessage: messages$w.noRecurrentIntervalsConfigured
@@ -9190,7 +9190,8 @@ const ScrollToFieldError = () => {
         //  div is used only for custom fields
         document.querySelector(`div[aria-errormessage="${firstElementId}"]`) ?? document.querySelector(`label[for="${id}"]`) ?? document.querySelector(`label#${id}`) ?? firstErrorElement;
         elementToScrollTo.scrollIntoView?.({
-          behavior: 'smooth'
+          behavior: 'smooth',
+          block: 'center'
         });
       }
     }

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

@@ -9056,11 +9056,11 @@ const RecurrentIntervalPicker = _ref => {
     formatMessage = _useIntl.formatMessage;
   const dataLocale = applicationShellConnectors.useApplicationContext(applicationContext => applicationContext.dataLocale);
   const formatLocalizedFieldToString = useFormatLocalizedFieldToString();
-  const skip = isReadOnly && !value;
+  const skipFetch = isReadOnly && !value;
   const where = isReadOnly && value ? `id="${value}"` : undefined;
   const _useRecurrenceInterva = useRecurrenceIntervals({
       where,
-      skip
+      skip: skipFetch
     }),
     recurrencePolicies = _useRecurrenceInterva.recurrencePolicies,
     loading = _useRecurrenceInterva.loading,
@@ -9085,7 +9085,7 @@ const RecurrentIntervalPicker = _ref => {
     }
     return mapped;
   }, [recurrencePolicies, selectedIsMissingInData, value, dataLocale, formatMessage, formatLocalizedFieldToString, loading]);
-  const noRecurrentIntervalsConfigured = !loading && recurrencePolicies.length === 0;
+  const noRecurrentIntervalsConfigured = !loading && !skipFetch && recurrencePolicies.length === 0;
   React.useEffect(() => {
     if (error && onError) {
       onError(error);
@@ -9111,7 +9111,7 @@ const RecurrentIntervalPicker = _ref => {
     }) : selectedIsMissingInData ? jsxRuntime.jsx(uiKit.Text.Body, {
       tone: "negative",
       intlMessage: messages$w.missingSelectedWarning
-    }) : null, !error && !skip && noRecurrentIntervalsConfigured && jsxRuntime.jsx(uiKit.ContentNotification, {
+    }) : null, !error && noRecurrentIntervalsConfigured && jsxRuntime.jsx(uiKit.ContentNotification, {
       type: "warning",
       children: jsxRuntime.jsx(uiKit.Text.Detail, {
         intlMessage: messages$w.noRecurrentIntervalsConfigured
@@ -9168,7 +9168,8 @@ const ScrollToFieldError = () => {
         //  div is used only for custom fields
         document.querySelector(`div[aria-errormessage="${firstElementId}"]`) ?? document.querySelector(`label[for="${id}"]`) ?? document.querySelector(`label#${id}`) ?? firstErrorElement;
         elementToScrollTo.scrollIntoView?.({
-          behavior: 'smooth'
+          behavior: 'smooth',
+          block: 'center'
         });
       }
     }

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

@@ -8976,11 +8976,11 @@ const RecurrentIntervalPicker = _ref => {
     formatMessage = _useIntl.formatMessage;
   const dataLocale = useApplicationContext(applicationContext => applicationContext.dataLocale);
   const formatLocalizedFieldToString = useFormatLocalizedFieldToString();
-  const skip = isReadOnly && !value;
+  const skipFetch = isReadOnly && !value;
   const where = isReadOnly && value ? `id="${value}"` : undefined;
   const _useRecurrenceInterva = useRecurrenceIntervals({
       where,
-      skip
+      skip: skipFetch
     }),
     recurrencePolicies = _useRecurrenceInterva.recurrencePolicies,
     loading = _useRecurrenceInterva.loading,
@@ -9005,7 +9005,7 @@ const RecurrentIntervalPicker = _ref => {
     }
     return mapped;
   }, [recurrencePolicies, selectedIsMissingInData, value, dataLocale, formatMessage, formatLocalizedFieldToString, loading]);
-  const noRecurrentIntervalsConfigured = !loading && recurrencePolicies.length === 0;
+  const noRecurrentIntervalsConfigured = !loading && !skipFetch && recurrencePolicies.length === 0;
   useEffect(() => {
     if (error && onError) {
       onError(error);
@@ -9031,7 +9031,7 @@ const RecurrentIntervalPicker = _ref => {
     }) : selectedIsMissingInData ? jsx(Text.Body, {
       tone: "negative",
       intlMessage: messages$w.missingSelectedWarning
-    }) : null, !error && !skip && noRecurrentIntervalsConfigured && jsx(ContentNotification, {
+    }) : null, !error && noRecurrentIntervalsConfigured && jsx(ContentNotification, {
       type: "warning",
       children: jsx(Text.Detail, {
         intlMessage: messages$w.noRecurrentIntervalsConfigured
@@ -9088,7 +9088,8 @@ const ScrollToFieldError = () => {
         //  div is used only for custom fields
         document.querySelector(`div[aria-errormessage="${firstElementId}"]`) ?? document.querySelector(`label[for="${id}"]`) ?? document.querySelector(`label#${id}`) ?? firstErrorElement;
         elementToScrollTo.scrollIntoView?.({
-          behavior: 'smooth'
+          behavior: 'smooth',
+          block: 'center'
         });
       }
     }

package/dist/declarations/src/components/recurrent-interval-picker/use-recurrence-intervals/mocks/handlers.d.ts

@@ -1,4 +1,4 @@
-import { TRecurrencePolicyQueryResult } from '../../../../../../types/src/generated/ctp';
+import type { TRecurrencePolicyQueryResult } from '../../../../../../types/src/generated/ctp';
 declare const handlers: {
     FetchRecurrencePolicies: {
         all: (policies?: TRecurrencePolicyQueryResult['results']) => import("msw").GraphQLHandler<import("msw").GraphQLRequest<import("msw").GraphQLVariables>>;

package/dist/styles.css

@@ -24,21 +24,39 @@
   margin-top: 2px;
   position: absolute;
 }
+/*  imported from validated-input.module.css  */
+
+.validated-input-module__invalid___380EL {
+  /* this needs !important because react-select has a :focus style that
+    stops the border colour being set unless the element is blurred */
+  border-color: var(--color-error) !important;
+}
+
+.validated-input-module__container___3L2KB {
+  display: inline;
+}
 /*  imported from store-select-input.module.css  */
 
 .store-select-input-module__customOption___2SC00 {
   margin-top: 10px;
 }
-/*  imported from validated-input.module.css  */
+/*  imported from label-range.module.css  */
 
-.validated-input-module__invalid___380EL {
+.label-range-module__label___3Tb0p {
+  font-size: 0.9rem;
+  font-weight: bold;
+}
+/*  imported from numeric-format-input.module.css  */
+
+.numeric-format-input-module__invalid___3LcyE {
   /* this needs !important because react-select has a :focus style that
     stops the border colour being set unless the element is blurred */
   border-color: var(--color-error) !important;
+  border: 1px solid;
 }
 
-.validated-input-module__container___3L2KB {
-  display: inline;
+.numeric-format-input-module__disabled___hb6h4 {
+  cursor: not-allowed;
 }
 /*  imported from multi-value-search-input.module.css  */
 
@@ -86,11 +104,77 @@
   border-bottom-left-radius: var(--border-radius-for-input);
   border-bottom-right-radius: var(--border-radius-for-input);
 }
-/*  imported from label-range.module.css  */
+/*  imported from throttled-field.module.css  */
 
-.label-range-module__label___3Tb0p {
-  font-size: 0.9rem;
-  font-weight: bold;
+.throttled-field-module__size___324jx {
+  width: 100%;
+}
+
+.throttled-field-module__size___324jx {
+  min-height: var(--height-for-input);
+}
+
+.throttled-field-module__input-text___3zFFp {
+  transition: 0.2s ease;
+  border-radius: 6px;
+  border-style: solid;
+  border-width: 1px;
+  color: var(--color-solid);
+  font-weight: 500;
+  font-size: 1rem;
+  font-family: 'Open Sans', sans-serif !important;
+  padding: 7.5px 10px;
+  outline: none;
+  box-shadow: none;
+  appearance: none;
+}
+
+.throttled-field-module__input-secondary___cFo9e {
+  background-color: var(--color-neutral-95);
+  border-color: var(--color-surface);
+  width: 100%;
+}
+
+.throttled-field-module__input-primary___26G3R {
+  border-color: var(--color-neutral);
+  background-color: var(--color-surface);
+}
+
+.throttled-field-module__textarea___3ZNEs {
+  width: 100%;
+  min-height: 36px;
+  resize: vertical;
+}
+
+.throttled-field-module__textarea-primary___24Wwt {
+  border-color: var(--color-neutral);
+  background-color: var(--color-surface);
+}
+
+.throttled-field-module__textarea-secondary___2rmFG {
+  background-color: var(--color-neutral-95);
+  border-color: var(--color-surface);
+  width: 100%;
+}
+
+.throttled-field-module__invalid___1yZLW {
+  /* this needs !important because react-select has a :focus style that
+    stops the border colour being set unless the element is blurred */
+  border-color: var(--color-error) !important;
+  border: 1px solid;
+}
+
+.throttled-field-module__disabled___qVj79 {
+  cursor: not-allowed;
+  background-color: var(--color-accent-98);
+  color: var(--color-solid);
+  opacity: 1; /* fix for mobile safari */
+}
+
+.throttled-field-module__granular___2LXJf {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  margin-left: 0;
 }
 /*  imported from search-input.module.css  */
 
@@ -182,90 +266,6 @@
   flex-shrink: 1;
   margin-left: var(--spacing-s);
 }
-/*  imported from numeric-format-input.module.css  */
-
-.numeric-format-input-module__invalid___3LcyE {
-  /* this needs !important because react-select has a :focus style that
-    stops the border colour being set unless the element is blurred */
-  border-color: var(--color-error) !important;
-  border: 1px solid;
-}
-
-.numeric-format-input-module__disabled___hb6h4 {
-  cursor: not-allowed;
-}
-/*  imported from throttled-field.module.css  */
-
-.throttled-field-module__size___324jx {
-  width: 100%;
-}
-
-.throttled-field-module__size___324jx {
-  min-height: var(--height-for-input);
-}
-
-.throttled-field-module__input-text___3zFFp {
-  transition: 0.2s ease;
-  border-radius: 6px;
-  border-style: solid;
-  border-width: 1px;
-  color: var(--color-solid);
-  font-weight: 500;
-  font-size: 1rem;
-  font-family: 'Open Sans', sans-serif !important;
-  padding: 7.5px 10px;
-  outline: none;
-  box-shadow: none;
-  appearance: none;
-}
-
-.throttled-field-module__input-secondary___cFo9e {
-  background-color: var(--color-neutral-95);
-  border-color: var(--color-surface);
-  width: 100%;
-}
-
-.throttled-field-module__input-primary___26G3R {
-  border-color: var(--color-neutral);
-  background-color: var(--color-surface);
-}
-
-.throttled-field-module__textarea___3ZNEs {
-  width: 100%;
-  min-height: 36px;
-  resize: vertical;
-}
-
-.throttled-field-module__textarea-primary___24Wwt {
-  border-color: var(--color-neutral);
-  background-color: var(--color-surface);
-}
-
-.throttled-field-module__textarea-secondary___2rmFG {
-  background-color: var(--color-neutral-95);
-  border-color: var(--color-surface);
-  width: 100%;
-}
-
-.throttled-field-module__invalid___1yZLW {
-  /* this needs !important because react-select has a :focus style that
-    stops the border colour being set unless the element is blurred */
-  border-color: var(--color-error) !important;
-  border: 1px solid;
-}
-
-.throttled-field-module__disabled___qVj79 {
-  cursor: not-allowed;
-  background-color: var(--color-accent-98);
-  color: var(--color-solid);
-  opacity: 1; /* fix for mobile safari */
-}
-
-.throttled-field-module__granular___2LXJf {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-  margin-left: 0;
-}
 /*  imported from button.module.css  */
 
 /* Generic button */
@@ -510,14 +510,20 @@
 .custom-money-input-module__container___1fdO2 {
   width: 100%;
 }
-/*  imported from centered-loading-spinner.module.css  */
+/*  imported from reference-search.module.css  */
 
-.centered-loading-spinner-module__loading-container___3_9-h {
-  height: 100%;
-  display: flex;
-  flex-grow: 1;
-  align-items: center;
-  justify-content: center;
+.reference-search-module__container___3-iK3 {
+  width: 100%;
+}
+
+.reference-search-module__container___3-iK3 > div {
+  width: 100%;
+}
+
+.reference-search-module__missing-label___az9AO {
+  color: var(--color-warning);
+  font-size: 0.9rem;
+  margin-left: var(--spacing-xs);
 }
 /*  imported from divider.module.css  */
 
@@ -546,20 +552,14 @@
 .divider-module__divider-dashed___2Em8A {
   border-style: dashed;
 }
-/*  imported from reference-search.module.css  */
-
-.reference-search-module__container___3-iK3 {
-  width: 100%;
-}
-
-.reference-search-module__container___3-iK3 > div {
-  width: 100%;
-}
+/*  imported from centered-loading-spinner.module.css  */
 
-.reference-search-module__missing-label___az9AO {
-  color: var(--color-warning);
-  font-size: 0.9rem;
-  margin-left: var(--spacing-xs);
+.centered-loading-spinner-module__loading-container___3_9-h {
+  height: 100%;
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  justify-content: center;
 }
 /*  imported from set-buttons.module.css  */
 
@@ -595,11 +595,6 @@
 .platform-limits-customers-status-module__status___3rXYM {
   min-width: max-content;
 }
-/*  imported from platform-limits-customers-combined.module.css  */
-
-.platform-limits-customers-combined-module__combined___OszDd {
-  margin-bottom: var(--spacing-s);
-}
 /*  imported from platform-limits-customer-groups-combined.module.css  */
 
 .platform-limits-customer-groups-combined-module__combined___WjRoI {
@@ -610,3 +605,8 @@
 .platform-limits-customer-groups-status-module__status___6099G {
   min-width: max-content;
 }
+/*  imported from platform-limits-customers-combined.module.css  */
+
+.platform-limits-customers-combined-module__combined___OszDd {
+  margin-bottom: var(--spacing-s);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercetools-frontend/experimental-components",
-  "version": "7.2.0",
+  "version": "7.2.2",
   "description": "",
   "repository": {
     "type": "git",
@@ -25,14 +25,14 @@
   "dependencies": {
     "@babel/core": "^7.22.11",
     "@babel/runtime-corejs3": "^7.21.0",
-    "@commercetools-frontend/actions-global": "24.1.0",
-    "@commercetools-frontend/application-components": "24.1.0",
-    "@commercetools-frontend/application-shell": "24.1.0",
-    "@commercetools-frontend/application-shell-connectors": "24.1.0",
-    "@commercetools-frontend/constants": "24.1.0",
-    "@commercetools-frontend/l10n": "24.1.0",
-    "@commercetools-frontend/sdk": "24.1.0",
-    "@commercetools-frontend/sentry": "24.1.0",
+    "@commercetools-frontend/actions-global": "24.2.1",
+    "@commercetools-frontend/application-components": "24.2.1",
+    "@commercetools-frontend/application-shell": "24.2.1",
+    "@commercetools-frontend/application-shell-connectors": "24.2.1",
+    "@commercetools-frontend/constants": "24.2.1",
+    "@commercetools-frontend/l10n": "24.2.1",
+    "@commercetools-frontend/sdk": "24.2.1",
+    "@commercetools-frontend/sentry": "24.2.1",
     "@commercetools-frontend/ui-kit": "20.0.0",
     "@commercetools-uikit/design-system": "20.0.0",
     "@commercetools-uikit/select-utils": "20.0.0",
@@ -61,7 +61,7 @@
   },
   "devDependencies": {
     "@apollo/client": "3.12.4",
-    "@commercetools/composable-commerce-test-data": "11.2.1",
+    "@commercetools/composable-commerce-test-data": "11.5.1",
     "@testing-library/react": "16.1.0",
     "@types/debounce-promise": "3.1.9",
     "@types/jest": "^29.5.2",
@@ -80,8 +80,8 @@
     "react-test-renderer": "17.0.2",
     "redux": "4.2.1",
     "typescript": "5.2.2",
-    "@commercetools-local/test-data": "1.2.20",
-    "@commercetools-local/test-utils": "1.2.21"
+    "@commercetools-local/test-data": "1.2.22",
+    "@commercetools-local/test-utils": "1.2.22"
   },
   "peerDependencies": {
     "@apollo/client": "3.x",