npm - @commercetools-frontend-extensions/export-resources-modal - Versions diffs - 5.15.0 → 5.15.1 - Mend

@commercetools-frontend-extensions/export-resources-modal 5.15.0 → 5.15.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/commercetools-frontend-extensions-export-resources-modal.cjs.dev.js CHANGED Viewed

@@ -1603,7 +1603,10 @@ const updateFieldDependenciesStatus = formik => {
     _forEachInstanceProperty__default["default"](fields).call(fields, (field, index) => {
       const currentPath = `${path}.fields[${index}]`;
       if (hasDependentFields(field)) {
-        formik.setFieldValue(`${currentPath}.isChecked`, isAnyDependentChecked(_valuesInstanceProperty__default["default"](formik).groups, field.dependentGroupNames, field.dependentFieldNames), false);
+        const nextIsChecked = isAnyDependentChecked(_valuesInstanceProperty__default["default"](formik).groups, field.dependentGroupNames, field.dependentFieldNames);
+        if (field.isChecked !== nextIsChecked) {
+          formik.setFieldValue(`${currentPath}.isChecked`, nextIsChecked, false);
+        }
       }
       if (field.fields) {
         updateFields(field.fields, currentPath);
@@ -3255,23 +3258,18 @@ const ExportResourcesProvider = _ref => {
   React__default["default"].useEffect(() => {
     formik$1.validateForm();
   }, [currentStep, fieldSelectionMode, importedHeaders, exportType]);
-  // The modal can be mounted before the data backing `fieldGroups` is ready
-  // (the consumer opens it immediately and passes `isLoading`). Formik snapshots
-  // the initial values once and does not reinitialize, so when the groups
-  // arrive we set just the `groups` field — leaving any file settings the user
-  // already changed on step 1 untouched. Guarded to run once, and only when the
-  // form actually mounted without groups (a no-op for consumers that pass the
-  // full `fieldGroups` upfront).
+  const mountedWhileLoadingRef = React__default["default"].useRef(Boolean(props.isLoading));
   const hasPopulatedFieldGroups = React__default["default"].useRef(false);
   React__default["default"].useLayoutEffect(() => {
-    if (hasPopulatedFieldGroups.current) return;
-    if (_valuesInstanceProperty__default["default"](formik$1).groups.length === 0 && initialValues.groups.length > 0) {
+    if (!mountedWhileLoadingRef.current || hasPopulatedFieldGroups.current) {
+      return;
+    }
+    if (!props.isLoading && initialValues.groups.length > 0) {
       formik$1.setFieldValue('groups', initialValues.groups);
       hasPopulatedFieldGroups.current = true;
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [initialValues.groups]);
+  }, [props.isLoading, initialValues.groups]);
   return jsxRuntime.jsx(ExportResourcesContext.Provider, {
     value: {
       formik: formik$1,
@@ -3346,7 +3344,7 @@ const FieldsPreview = _ref => {
 };
 function ownKeys$3(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$3(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$3(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys$3(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys$3(Object(t))).call(_context3, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const ExportConfirmationStep = () => {
   const intl = reactIntl.useIntl();
   const _useApplicationContex = applicationShellConnectors.useApplicationContext(applicationContext => ({
@@ -3360,10 +3358,16 @@ const ExportConfirmationStep = () => {
     localeOption = _useExportResourcesMo.localeOption,
     setCurrentStep = _useExportResourcesMo.setCurrentStep,
     onClose = _useExportResourcesMo.onClose;
-  const groupsWithSelectedFields = getGroupsWithSelectedFields(_valuesInstanceProperty__default["default"](formik).groups);
   const isUsingImportedCsvTemplate = fieldSelectionMode === 'imported-csv-template';
   const isUsingImportedCsvLocales = localeOption === 'onlyLocalesFoundInCsvFile';
-  const allSelectedFieldCount = isUsingImportedCsvTemplate ? importedHeaders.length : getAllSelectedFieldCount(_valuesInstanceProperty__default["default"](formik).groups);
+  const selectedFieldsByGroup = React.useMemo(() => {
+    var _context;
+    return _mapInstanceProperty__default["default"](_context = getGroupsWithSelectedFields(_valuesInstanceProperty__default["default"](formik).groups)).call(_context, group => ({
+      group,
+      fields: getSelectedFieldLabels(group)
+    }));
+  }, [_valuesInstanceProperty__default["default"](formik).groups]);
+  const allSelectedFieldCount = React.useMemo(() => isUsingImportedCsvTemplate ? importedHeaders.length : getAllSelectedFieldCount(_valuesInstanceProperty__default["default"](formik).groups), [isUsingImportedCsvTemplate, importedHeaders, _valuesInstanceProperty__default["default"](formik).groups]);
   const returnToFieldsSelection = () => setCurrentStep(Step.FieldsSelection);
   return jsxRuntime.jsx(applicationComponents.FormDialog, {
     isOpen: true,
@@ -3410,11 +3414,12 @@ const ExportConfirmationStep = () => {
               })]
             }), isUsingImportedCsvTemplate ? jsxRuntime.jsx(FieldsPreview, {
               fields: importedHeaders
-            }) : _mapInstanceProperty__default["default"](groupsWithSelectedFields).call(groupsWithSelectedFields, group => {
-              const selectedFields = getSelectedFieldLabels(group);
+            }) : _mapInstanceProperty__default["default"](selectedFieldsByGroup).call(selectedFieldsByGroup, _ref => {
+              let group = _ref.group,
+                fields = _ref.fields;
               return jsxRuntime.jsx(FieldsPreview, {
                 previewGroupLabel: group.previewGroupLabel,
-                fields: selectedFields
+                fields: fields
               }, group.groupName);
             })]
           })

package/dist/commercetools-frontend-extensions-export-resources-modal.cjs.prod.js CHANGED Viewed

@@ -1603,7 +1603,10 @@ const updateFieldDependenciesStatus = formik => {
     _forEachInstanceProperty__default["default"](fields).call(fields, (field, index) => {
       const currentPath = `${path}.fields[${index}]`;
       if (hasDependentFields(field)) {
-        formik.setFieldValue(`${currentPath}.isChecked`, isAnyDependentChecked(_valuesInstanceProperty__default["default"](formik).groups, field.dependentGroupNames, field.dependentFieldNames), false);
+        const nextIsChecked = isAnyDependentChecked(_valuesInstanceProperty__default["default"](formik).groups, field.dependentGroupNames, field.dependentFieldNames);
+        if (field.isChecked !== nextIsChecked) {
+          formik.setFieldValue(`${currentPath}.isChecked`, nextIsChecked, false);
+        }
       }
       if (field.fields) {
         updateFields(field.fields, currentPath);
@@ -3222,23 +3225,18 @@ const ExportResourcesProvider = _ref => {
   React__default["default"].useEffect(() => {
     formik$1.validateForm();
   }, [currentStep, fieldSelectionMode, importedHeaders, exportType]);
-  // The modal can be mounted before the data backing `fieldGroups` is ready
-  // (the consumer opens it immediately and passes `isLoading`). Formik snapshots
-  // the initial values once and does not reinitialize, so when the groups
-  // arrive we set just the `groups` field — leaving any file settings the user
-  // already changed on step 1 untouched. Guarded to run once, and only when the
-  // form actually mounted without groups (a no-op for consumers that pass the
-  // full `fieldGroups` upfront).
+  const mountedWhileLoadingRef = React__default["default"].useRef(Boolean(props.isLoading));
   const hasPopulatedFieldGroups = React__default["default"].useRef(false);
   React__default["default"].useLayoutEffect(() => {
-    if (hasPopulatedFieldGroups.current) return;
-    if (_valuesInstanceProperty__default["default"](formik$1).groups.length === 0 && initialValues.groups.length > 0) {
+    if (!mountedWhileLoadingRef.current || hasPopulatedFieldGroups.current) {
+      return;
+    }
+    if (!props.isLoading && initialValues.groups.length > 0) {
       formik$1.setFieldValue('groups', initialValues.groups);
       hasPopulatedFieldGroups.current = true;
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [initialValues.groups]);
+  }, [props.isLoading, initialValues.groups]);
   return jsxRuntime.jsx(ExportResourcesContext.Provider, {
     value: {
       formik: formik$1,
@@ -3313,7 +3311,7 @@ const FieldsPreview = _ref => {
 };
 function ownKeys$3(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$3(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$3(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys$3(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys$3(Object(t))).call(_context3, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const ExportConfirmationStep = () => {
   const intl = reactIntl.useIntl();
   const _useApplicationContex = applicationShellConnectors.useApplicationContext(applicationContext => ({
@@ -3327,10 +3325,16 @@ const ExportConfirmationStep = () => {
     localeOption = _useExportResourcesMo.localeOption,
     setCurrentStep = _useExportResourcesMo.setCurrentStep,
     onClose = _useExportResourcesMo.onClose;
-  const groupsWithSelectedFields = getGroupsWithSelectedFields(_valuesInstanceProperty__default["default"](formik).groups);
   const isUsingImportedCsvTemplate = fieldSelectionMode === 'imported-csv-template';
   const isUsingImportedCsvLocales = localeOption === 'onlyLocalesFoundInCsvFile';
-  const allSelectedFieldCount = isUsingImportedCsvTemplate ? importedHeaders.length : getAllSelectedFieldCount(_valuesInstanceProperty__default["default"](formik).groups);
+  const selectedFieldsByGroup = React.useMemo(() => {
+    var _context;
+    return _mapInstanceProperty__default["default"](_context = getGroupsWithSelectedFields(_valuesInstanceProperty__default["default"](formik).groups)).call(_context, group => ({
+      group,
+      fields: getSelectedFieldLabels(group)
+    }));
+  }, [_valuesInstanceProperty__default["default"](formik).groups]);
+  const allSelectedFieldCount = React.useMemo(() => isUsingImportedCsvTemplate ? importedHeaders.length : getAllSelectedFieldCount(_valuesInstanceProperty__default["default"](formik).groups), [isUsingImportedCsvTemplate, importedHeaders, _valuesInstanceProperty__default["default"](formik).groups]);
   const returnToFieldsSelection = () => setCurrentStep(Step.FieldsSelection);
   return jsxRuntime.jsx(applicationComponents.FormDialog, {
     isOpen: true,
@@ -3377,11 +3381,12 @@ const ExportConfirmationStep = () => {
               })]
             }), isUsingImportedCsvTemplate ? jsxRuntime.jsx(FieldsPreview, {
               fields: importedHeaders
-            }) : _mapInstanceProperty__default["default"](groupsWithSelectedFields).call(groupsWithSelectedFields, group => {
-              const selectedFields = getSelectedFieldLabels(group);
+            }) : _mapInstanceProperty__default["default"](selectedFieldsByGroup).call(selectedFieldsByGroup, _ref => {
+              let group = _ref.group,
+                fields = _ref.fields;
               return jsxRuntime.jsx(FieldsPreview, {
                 previewGroupLabel: group.previewGroupLabel,
-                fields: selectedFields
+                fields: fields
               }, group.groupName);
             })]
           })

package/dist/commercetools-frontend-extensions-export-resources-modal.esm.js CHANGED Viewed

@@ -1560,7 +1560,10 @@ const updateFieldDependenciesStatus = formik => {
     _forEachInstanceProperty(fields).call(fields, (field, index) => {
       const currentPath = `${path}.fields[${index}]`;
       if (hasDependentFields(field)) {
-        formik.setFieldValue(`${currentPath}.isChecked`, isAnyDependentChecked(_valuesInstanceProperty(formik).groups, field.dependentGroupNames, field.dependentFieldNames), false);
+        const nextIsChecked = isAnyDependentChecked(_valuesInstanceProperty(formik).groups, field.dependentGroupNames, field.dependentFieldNames);
+        if (field.isChecked !== nextIsChecked) {
+          formik.setFieldValue(`${currentPath}.isChecked`, nextIsChecked, false);
+        }
       }
       if (field.fields) {
         updateFields(field.fields, currentPath);
@@ -3212,23 +3215,18 @@ const ExportResourcesProvider = _ref => {
   React.useEffect(() => {
     formik.validateForm();
   }, [currentStep, fieldSelectionMode, importedHeaders, exportType]);
-  // The modal can be mounted before the data backing `fieldGroups` is ready
-  // (the consumer opens it immediately and passes `isLoading`). Formik snapshots
-  // the initial values once and does not reinitialize, so when the groups
-  // arrive we set just the `groups` field — leaving any file settings the user
-  // already changed on step 1 untouched. Guarded to run once, and only when the
-  // form actually mounted without groups (a no-op for consumers that pass the
-  // full `fieldGroups` upfront).
+  const mountedWhileLoadingRef = React.useRef(Boolean(props.isLoading));
   const hasPopulatedFieldGroups = React.useRef(false);
   React.useLayoutEffect(() => {
-    if (hasPopulatedFieldGroups.current) return;
-    if (_valuesInstanceProperty(formik).groups.length === 0 && initialValues.groups.length > 0) {
+    if (!mountedWhileLoadingRef.current || hasPopulatedFieldGroups.current) {
+      return;
+    }
+    if (!props.isLoading && initialValues.groups.length > 0) {
       formik.setFieldValue('groups', initialValues.groups);
       hasPopulatedFieldGroups.current = true;
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [initialValues.groups]);
+  }, [props.isLoading, initialValues.groups]);
   return jsx(ExportResourcesContext.Provider, {
     value: {
       formik,
@@ -3303,7 +3301,7 @@ const FieldsPreview = _ref => {
 };
 function ownKeys$3(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys$3(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys$3(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context2 = ownKeys$3(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context3 = ownKeys$3(Object(t))).call(_context3, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 const ExportConfirmationStep = () => {
   const intl = useIntl();
   const _useApplicationContex = useApplicationContext(applicationContext => ({
@@ -3317,10 +3315,16 @@ const ExportConfirmationStep = () => {
     localeOption = _useExportResourcesMo.localeOption,
     setCurrentStep = _useExportResourcesMo.setCurrentStep,
     onClose = _useExportResourcesMo.onClose;
-  const groupsWithSelectedFields = getGroupsWithSelectedFields(_valuesInstanceProperty(formik).groups);
   const isUsingImportedCsvTemplate = fieldSelectionMode === 'imported-csv-template';
   const isUsingImportedCsvLocales = localeOption === 'onlyLocalesFoundInCsvFile';
-  const allSelectedFieldCount = isUsingImportedCsvTemplate ? importedHeaders.length : getAllSelectedFieldCount(_valuesInstanceProperty(formik).groups);
+  const selectedFieldsByGroup = useMemo(() => {
+    var _context;
+    return _mapInstanceProperty(_context = getGroupsWithSelectedFields(_valuesInstanceProperty(formik).groups)).call(_context, group => ({
+      group,
+      fields: getSelectedFieldLabels(group)
+    }));
+  }, [_valuesInstanceProperty(formik).groups]);
+  const allSelectedFieldCount = useMemo(() => isUsingImportedCsvTemplate ? importedHeaders.length : getAllSelectedFieldCount(_valuesInstanceProperty(formik).groups), [isUsingImportedCsvTemplate, importedHeaders, _valuesInstanceProperty(formik).groups]);
   const returnToFieldsSelection = () => setCurrentStep(Step.FieldsSelection);
   return jsx(FormDialog, {
     isOpen: true,
@@ -3367,11 +3371,12 @@ const ExportConfirmationStep = () => {
               })]
             }), isUsingImportedCsvTemplate ? jsx(FieldsPreview, {
               fields: importedHeaders
-            }) : _mapInstanceProperty(groupsWithSelectedFields).call(groupsWithSelectedFields, group => {
-              const selectedFields = getSelectedFieldLabels(group);
+            }) : _mapInstanceProperty(selectedFieldsByGroup).call(selectedFieldsByGroup, _ref => {
+              let group = _ref.group,
+                fields = _ref.fields;
               return jsx(FieldsPreview, {
                 previewGroupLabel: group.previewGroupLabel,
-                fields: selectedFields
+                fields: fields
               }, group.groupName);
             })]
           })

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-frontend-extensions/export-resources-modal",
   "description": "Shared export modal for exporting resources",
-  "version": "5.15.0",
+  "version": "5.15.1",
   "license": "BSD-3-Clause",
   "publishConfig": {
     "access": "public"