@commercetools-frontend-extensions/export-resources-modal 0.0.0-fec-202-react19-20250204105856 → 0.0.0-fec-202-react19-20250307085017

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

@@ -103,7 +103,7 @@ function getBold(msg) {
 }
 
 function getNewLine() {
-  return jsxRuntime.jsx("br", {}, "break");
+  return jsxRuntime.jsx("br", {}, crypto.randomUUID());
 }
 
 var messages = reactIntl.defineMessages({
@@ -401,6 +401,16 @@ var messages = reactIntl.defineMessages({
     id: 'ExportResourcesModal.fillRowsForProductExport',
     description: 'A checkbox label for filling rows for product export',
     defaultMessage: 'Include Product- and Variant-level information in every row'
+  },
+  loadMoreFields: {
+    id: 'ExportResourcesModal.loadMoreFields',
+    description: 'Load more fields message',
+    defaultMessage: 'Load more fields by using the search functionality'
+  },
+  itemCount: {
+    id: 'ExportResourcesModal.itemCount',
+    description: 'Label for item count',
+    defaultMessage: '{count, plural, one {# item} other {# items}}'
   }
 });
 
@@ -647,16 +657,16 @@ const isAnyDependentChecked = function (groups) {
 const areAllFieldsChecked = fields => {
   return _everyInstanceProperty__default["default"](fields).call(fields, field => field.fields ? areAllFieldsChecked(field.fields) : field.isChecked || field.isRequired || hasDependentFields(field));
 };
-const getTotalCheckedFields = group => {
-  const countCheckedFields = fields => {
+const getGroupSelectedFieldCount = group => {
+  const countSelectedFields = fields => {
     return _reduceInstanceProperty__default["default"](fields).call(fields, (total, field) => {
       if (field.fields) {
-        return total + countCheckedFields(field.fields);
+        return total + countSelectedFields(field.fields);
       }
       return total + (field.isChecked ? 1 : 0);
     }, 0);
   };
-  return countCheckedFields(group.fields);
+  return countSelectedFields(group.fields);
 };
 
 let Step = /*#__PURE__*/function (Step) {
@@ -895,12 +905,22 @@ const updateFieldGroupWithAdditionalFieldExtensions = groups => {
     });
   });
 };
+const getIsExpanded = (field, groupName, cachedExpandedGroups) => {
+  if (!field.isExpandable) {
+    return false;
+  }
+  if (field.fields && field.maxVisibleChildren && field.fields.length > field.maxVisibleChildren) {
+    return false;
+  }
+  const cacheKey = `${groupName}.${field.name}`;
+  return cachedExpandedGroups[cacheKey] ?? field.isExpanded ?? false;
+};
 const updateFieldGroupsWithIsExpandedValue = (groups, cachedExpandedGroups) => {
   function updateFields(fields, groupName) {
     return _mapInstanceProperty__default["default"](fields).call(fields, field => {
       let isExpanded = null;
       if (field.isExpandable) {
-        isExpanded = cachedExpandedGroups[`${groupName}.${field.name}`] ?? field.isExpanded ?? false;
+        isExpanded = getIsExpanded(field, groupName, cachedExpandedGroups);
       }
       if (field.fields) {
         field.fields = updateFields(field.fields, groupName);
@@ -978,8 +998,8 @@ const useInitialValues = props => {
     cachedExpandedGroups = _useStorage4[0];
   return React__default["default"].useMemo(() => {
     let groups = removeEmptyGroups(props.fieldGroups);
-    groups = updateFieldGroupsWithIsCheckedValue(groups, cachedSelectedGroups[props.resourceType] || {});
-    groups = updateFieldGroupsWithIsExpandedValue(groups, cachedExpandedGroups[props.resourceType] || {});
+    groups = updateFieldGroupsWithIsCheckedValue(groups, cachedSelectedGroups?.[props.resourceType] || {});
+    groups = updateFieldGroupsWithIsExpandedValue(groups, cachedExpandedGroups?.[props.resourceType] || {});
     return {
       outputFormat: props.outputFormat,
       fileName: `${resourceTypeToFileName(props.resourceType, userLocale)}`,
@@ -1261,7 +1281,6 @@ const ExportPreferenceSection = () => {
 function ownKeys$4(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$4(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$4(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$4(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 function ExportScopeSection() {
-  const intl = reactIntl.useIntl();
   const _useExportResourcesMo = useExportResourcesModalContext(),
     exportType = _useExportResourcesMo.exportType,
     totalResourcesCount = _useExportResourcesMo.totalResourcesCount,
@@ -1287,7 +1306,7 @@ function ExportScopeSection() {
         children: jsxRuntime.jsx(uiKit.Text.Body, {
           intlMessage: _objectSpread$4(_objectSpread$4({}, resourceTypeMessages[resourceType].exportScopeAll), {}, {
             values: {
-              total: intl.formatNumber(totalResourcesCount)
+              total: totalResourcesCount
             }
           })
         })
@@ -1298,7 +1317,7 @@ function ExportScopeSection() {
           tone: !filters.total || !hasFilters ? 'tertiary' : undefined,
           intlMessage: filters.total ? _objectSpread$4(_objectSpread$4({}, resourceTypeMessages[resourceType].exportScopeFiltered), {}, {
             values: {
-              total: intl.formatNumber(filters.total)
+              total: filters.total
             }
           }) : messages.exportScopeFilteredWithoutCount
         })
@@ -1309,7 +1328,7 @@ function ExportScopeSection() {
           tone: !selectedResourceIds?.length ? 'tertiary' : undefined,
           intlMessage: selectedResourceIds?.length ? _objectSpread$4(_objectSpread$4({}, resourceTypeMessages[resourceType].exportScopeSelected), {}, {
             values: {
-              total: intl.formatNumber(selectedResourceIds.length)
+              total: selectedResourceIds.length
             }
           }) : messages.exportScopeSelectedWithoutCount
         })
@@ -1449,7 +1468,7 @@ const ExportFieldSelectionProvider = _ref => {
     setCachedExpandedGroups = _useStorage2[1];
   const updateExpandedGroups = React.useCallback((name, value) => {
     setCachedExpandedGroups({
-      [resourceType]: _objectSpread$3(_objectSpread$3({}, cachedExpandedGroups[resourceType] || {}), {}, {
+      [resourceType]: _objectSpread$3(_objectSpread$3({}, cachedExpandedGroups?.[resourceType] || {}), {}, {
         [name]: value
       })
     });
@@ -1465,22 +1484,15 @@ const useExportFieldSelectionContext = () => {
   return React.useContext(ExportFieldSelectionContext);
 };
 
-const ExportFieldSelectionStamp = _ref => {
-  let group = _ref.group;
+const FieldsCountStamp = _ref => {
+  let count = _ref.count;
   const _useIntl = reactIntl.useIntl(),
     formatMessage = _useIntl.formatMessage;
-  return jsxRuntime.jsx(uiKit.Card, {
-    type: "flat",
-    insetScale: "m",
-    children: jsxRuntime.jsx(uiKit.Spacings.Inline, {
-      justifyContent: "flex-end",
-      children: jsxRuntime.jsx(uiKit.Stamp, {
-        tone: "secondary",
-        isCondensed: true,
-        label: formatMessage(messages.selected, {
-          total: getTotalCheckedFields(group)
-        })
-      })
+  return jsxRuntime.jsx(uiKit.Stamp, {
+    tone: "information",
+    isCondensed: true,
+    label: formatMessage(messages.itemCount, {
+      count
     })
   });
 };
@@ -1519,13 +1531,26 @@ const FieldSection = _ref3 => {
     parentKeys = _ref3.parentKeys,
     formik = _ref3.formik,
     isAnySiblingChecked = _ref3.isAnySiblingChecked,
-    isForceExpanded = _ref3.isForceExpanded,
-    groupName = _ref3.groupName;
+    isSearchActive = _ref3.isSearchActive,
+    groupName = _ref3.groupName,
+    maxVisibleChildren = _ref3.maxVisibleChildren;
   const _useExportFieldSelect = useExportFieldSelectionContext(),
     updateExpandedGroups = _useExportFieldSelect.updateExpandedGroups;
-  return jsxRuntime.jsx(uiKit.Spacings.Stack, {
+  const visibleFields = isSearchActive || !maxVisibleChildren ? fields : fields?.slice(0, maxVisibleChildren);
+  const hasMoreFields = maxVisibleChildren && !isSearchActive && fields && fields.length > maxVisibleChildren;
+  const visibleIndex = field => fields?.filter(f => !f.isHidden).indexOf(field) || -1;
+  const shouldDisplayField = field => {
+    if (field.isHidden) return false;
+    if (!maxVisibleChildren) return true;
+    return maxVisibleChildren && visibleIndex(field) < maxVisibleChildren;
+  };
+  const shouldDisplayChildrenCount = field => {
+    return Boolean(field.maxVisibleChildren);
+  };
+  return jsxRuntime.jsxs(uiKit.Spacings.Stack, {
     scale: "s",
-    children: fields?.map((field, index) => {
+    children: [visibleFields?.map((field, index) => {
+      const isChildrenCountDisplayed = shouldDisplayChildrenCount(field);
       const hasDependents = Boolean(field.dependentGroupNames?.length || field.dependentFieldNames?.length);
       const isAnyOfTheChildFieldsChecked = isAnyFieldChecked(field.fields || []);
       const allFieldsChecked = areAllFieldsChecked(field.fields || []);
@@ -1534,9 +1559,9 @@ const FieldSection = _ref3 => {
         if (isParent) return areAllFieldsChecked(field.fields);
         return field.isChecked;
       };
-      if (field.isHidden) return null;
+      if (!shouldDisplayField(field)) return null;
       return jsxRuntime.jsx(CollapsibleFieldWrapper, {
-        isForceExpanded: isForceExpanded,
+        isForceExpanded: isSearchActive,
         field: field,
         children: _ref4 => {
           let isOpen = _ref4.isOpen,
@@ -1551,17 +1576,17 @@ const FieldSection = _ref3 => {
                   left: `calc(-1 * ${uiKit.designTokens.spacingXl})`
                 },
                 onClick: () => {
-                  if (!isForceExpanded) {
+                  if (!isSearchActive) {
                     updateExpandedGroups(`${groupName}.${field.name}`, !isOpen);
                   }
                   toggle();
                 },
                 icon: isOpen ? jsxRuntime.jsx(uiKit.AngleDownIcon, {}) : jsxRuntime.jsx(uiKit.AngleRightIcon, {}),
                 label: ""
-              }), jsxRuntime.jsx(uiKit.Spacings.Inline, {
+              }), jsxRuntime.jsxs(uiKit.Spacings.Inline, {
                 scale: "s",
                 alignItems: "center",
-                children: jsxRuntime.jsxs(uiKit.CheckboxInput, {
+                children: [jsxRuntime.jsxs(uiKit.CheckboxInput, {
                   isIndeterminate: field.isExpandable && !allFieldsChecked && isAnyOfTheChildFieldsChecked,
                   isChecked: getIsChecked(),
                   isReadOnly: hasDependents || field.isRequired,
@@ -1592,26 +1617,60 @@ const FieldSection = _ref3 => {
                     updateAllChildFieldsChecked(path, checked);
                   },
                   children: [field.label, (hasDependents || field.isRequired) && ' *']
-                })
+                }), isChildrenCountDisplayed && field.fields && field.fields.length > 0 && jsxRuntime.jsx("div", {
+                  style: {
+                    flex: '0 0 auto'
+                  },
+                  children: jsxRuntime.jsx(FieldsCountStamp, {
+                    count: field.fields.length
+                  })
+                })]
               })]
-            }), field.fields && field.fields?.length > 0 && jsxRuntime.jsx(StyledExpandableContent, {
+            }), field.fields && field.fields.length > 0 && jsxRuntime.jsx(StyledExpandableContent, {
               ref: registerContentNode,
               isOpen: isOpen,
               children: isOpen && jsxRuntime.jsxs(uiKit.Spacings.Inline, {
                 scale: "xl",
                 children: [jsxRuntime.jsx("div", {}), jsxRuntime.jsx(FieldSection, {
                   fields: field.fields,
+                  maxVisibleChildren: field.maxVisibleChildren,
                   formik: formik,
                   parentKeys: [...parentKeys, `fields[${index}]`],
                   isAnySiblingChecked: isAnySiblingChecked,
-                  isForceExpanded: isForceExpanded,
+                  isSearchActive: isSearchActive,
                   groupName: groupName
                 })]
               })
             })]
           }, `${field.name}-${index}`);
         }
-      }, `${field.name}.${isForceExpanded}`);
+      }, `${field.name}.${isSearchActive}`);
+    }), hasMoreFields && jsxRuntime.jsx("div", {
+      css: /*#__PURE__*/react.css("padding-left:", uiKit.designTokens.spacingXs, ";" + ("" ), "" ),
+      children: jsxRuntime.jsx(uiKit.Text.Detail, {
+        tone: "tertiary",
+        intlMessage: messages.loadMoreFields
+      })
+    })]
+  });
+};
+
+const SelectedGroupFieldsCountStamp = _ref => {
+  let group = _ref.group;
+  const _useIntl = reactIntl.useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  return jsxRuntime.jsx(uiKit.Card, {
+    type: "flat",
+    insetScale: "m",
+    children: jsxRuntime.jsx(uiKit.Spacings.Inline, {
+      justifyContent: "flex-end",
+      children: jsxRuntime.jsx(uiKit.Stamp, {
+        tone: "secondary",
+        isCondensed: true,
+        label: formatMessage(messages.selected, {
+          total: getGroupSelectedFieldCount(group)
+        })
+      })
     })
   });
 };
@@ -1635,7 +1694,7 @@ const FieldGroupSection = _ref2 => {
   let group = _ref2.group,
     index = _ref2.index,
     formik = _ref2.formik,
-    isForceExpanded = _ref2.isForceExpanded;
+    isSearchActive = _ref2.isSearchActive;
   const allFieldsChecked = React.useMemo(() => areAllFieldsChecked(group.fields), [group.fields]);
   const isAnyFieldInGroupChecked = React.useMemo(() => isAnyFieldChecked(group.fields), [group.fields]);
   const _useExportFieldSelect = useExportFieldSelectionContext(),
@@ -1662,7 +1721,9 @@ const FieldGroupSection = _ref2 => {
   };
   if (group.isHidden) return null;
   return jsxRuntime.jsx(uiKit.CollapsibleMotion, {
-    isDefaultClosed: isForceExpanded ? false : !group.isExpanded,
+    isDefaultClosed: isSearchActive ? false : !group.isExpanded
+    // Reset collapse state when search input becomes active/inactive
+    ,
     children: _ref3 => {
       let isOpen = _ref3.isOpen,
         toggle = _ref3.toggle,
@@ -1679,7 +1740,7 @@ const FieldGroupSection = _ref2 => {
               children: [jsxRuntime.jsx(uiKit.IconButton, {
                 size: "20",
                 onClick: () => {
-                  if (!isForceExpanded) {
+                  if (!isSearchActive) {
                     updateExpandedGroups(group.groupName, !isOpen);
                   }
                   toggle();
@@ -1704,26 +1765,23 @@ const FieldGroupSection = _ref2 => {
                 type: "flat",
                 insetScale: "m",
                 showTopBorder: true,
-                children: isOpen && jsxRuntime.jsx(uiKit.Spacings.Stack, {
-                  scale: "s",
-                  children: jsxRuntime.jsx(FieldSection, {
-                    fields: group.fields,
-                    formik: formik,
-                    parentKeys: [parentKey],
-                    isAnySiblingChecked: isAnyFieldInGroupChecked,
-                    groupName: group.groupName,
-                    isForceExpanded: isForceExpanded
-                  })
+                children: isOpen && jsxRuntime.jsx(FieldSection, {
+                  fields: group.fields,
+                  formik: formik,
+                  parentKeys: [parentKey],
+                  isAnySiblingChecked: isAnyFieldInGroupChecked,
+                  groupName: group.groupName,
+                  isSearchActive: isSearchActive
                 })
               })
-            }), !isOpen && jsxRuntime.jsx(ExportFieldSelectionStamp, {
+            }), !isOpen && jsxRuntime.jsx(SelectedGroupFieldsCountStamp, {
               group: group
             })]
           })
         })]
       });
     }
-  }, `${isForceExpanded}`);
+  }, `${isSearchActive}`);
 };
 
 var _ref = {
@@ -1778,6 +1836,7 @@ const totalSpacing = 32 * 2 + (
 // MC header
 4; // borders
 
+const MIN_SEARCH_LENGTH = 3;
 const StyledGridCard = /*#__PURE__*/_styled__default["default"](uiKit.Card, {
   target: "e5mvpn60"
 } )("max-height:calc(100vh - ", totalSpacing, "px);overflow:auto;" + ("" ));
@@ -1800,9 +1859,9 @@ const ExportFieldsSelectionStep = () => {
     setCurrentStep = _useExportResourcesMo.setCurrentStep,
     resourceType = _useExportResourcesMo.resourceType,
     onClose = _useExportResourcesMo.onClose;
+  const isSearchActive = fieldSearchTerm?.trim()?.length >= MIN_SEARCH_LENGTH;
   React__default["default"].useEffect(() => {
     var _context2;
-    formik.validateForm();
     updateFieldDependenciesStatus(formik);
     const checkedFields = {};
     function getCheckedFields(field, groupName) {
@@ -1843,7 +1902,7 @@ const ExportFieldsSelectionStep = () => {
         });
       });
     };
-    if (!fieldSearchTerm?.trim()?.length) return _valuesInstanceProperty__default["default"](formik).groups;
+    if (!isSearchActive) return _valuesInstanceProperty__default["default"](formik).groups;
     const updateGroups = groups => {
       return _mapInstanceProperty__default["default"](groups).call(groups, group => {
         const updatedFields = updateFields(group.fields, false);
@@ -1855,12 +1914,12 @@ const ExportFieldsSelectionStep = () => {
       });
     };
     return updateGroups(_valuesInstanceProperty__default["default"](formik).groups);
-  }, [_valuesInstanceProperty__default["default"](formik).groups, fieldSearchTerm]);
+  }, [_valuesInstanceProperty__default["default"](formik).groups, fieldSearchTerm, isSearchActive]);
   const onSearchChange = React__default["default"].useCallback(event => {
     setFieldSearchTerm(event.target.value);
   }, [setFieldSearchTerm]);
   const hasResults = Boolean(_findInstanceProperty__default["default"](filteredGroups).call(filteredGroups, group => !group.isHidden));
-  const onSearchChangeDebounced = React__default["default"].useMemo(() => debounce__default["default"](onSearchChange, 300), [onSearchChange]);
+  const onSearchChangeDebounced = React__default["default"].useMemo(() => debounce__default["default"](onSearchChange, 500), [onSearchChange]);
   const onSearchReset = () => {
     setFieldSearchTerm('');
   };
@@ -1900,7 +1959,7 @@ const ExportFieldsSelectionStep = () => {
                 group: group,
                 index: index,
                 formik: formik,
-                isForceExpanded: fieldSearchTerm?.trim()?.length > 0
+                isSearchActive: isSearchActive
               }, group.groupName))
             })
           }) : jsxRuntime.jsx(NoSearchResults, {})]
@@ -1945,9 +2004,6 @@ const ExportResourcesProvider = _ref => {
     }),
     onSubmit
   });
-  React__default["default"].useEffect(() => {
-    formik$1.validateForm();
-  }, [currentStep]);
   return jsxRuntime.jsx(ExportResourcesContext.Provider, {
     value: {
       formik: formik$1,
@@ -1981,17 +2037,17 @@ const getChunkImport = locale => {
   const intlLocale = i18n.mapLocaleToIntlLocale(locale);
   switch (intlLocale) {
     case 'de':
-      return Promise.resolve().then(function () { return require(/* webpackChunkName: "export-resources-modal-i18n-de" */'./de-3d4cf3d0.cjs.prod.js'); });
+      return Promise.resolve().then(function () { return require(/* webpackChunkName: "export-resources-modal-i18n-de" */'./de-1903dccf.cjs.prod.js'); });
     case 'es':
-      return Promise.resolve().then(function () { return require(/* webpackChunkName: "export-resources-modal-i18n-es" */'./es-6360d546.cjs.prod.js'); });
+      return Promise.resolve().then(function () { return require(/* webpackChunkName: "export-resources-modal-i18n-es" */'./es-7959f578.cjs.prod.js'); });
     case 'fr-FR':
-      return Promise.resolve().then(function () { return require(/* webpackChunkName: "export-resources-modal-i18n-fr-FR" */'./fr-FR-ff7ec057.cjs.prod.js'); });
+      return Promise.resolve().then(function () { return require(/* webpackChunkName: "export-resources-modal-i18n-fr-FR" */'./fr-FR-0a721f97.cjs.prod.js'); });
     case 'ja':
       return Promise.resolve().then(function () { return require(/* webpackChunkName: "export-resources-modal-i18n-ja" */'./ja-37632763.cjs.prod.js'); });
     case 'pt-BR':
-      return Promise.resolve().then(function () { return require(/* webpackChunkName: "change-history-i18n-pt-BR" */'./pt-BR-d9b0a36d.cjs.prod.js'); });
+      return Promise.resolve().then(function () { return require(/* webpackChunkName: "change-history-i18n-pt-BR" */'./pt-BR-89644b77.cjs.prod.js'); });
     default:
-      return Promise.resolve().then(function () { return require(/* webpackChunkName: "export-resources-modal-i18n-en" */'./en-fc0085cc.cjs.prod.js'); });
+      return Promise.resolve().then(function () { return require(/* webpackChunkName: "export-resources-modal-i18n-en" */'./en-56c15954.cjs.prod.js'); });
   }
 };
 const loadMessages = async locale => {