@commercetools-frontend-extensions/export-resources-modal 4.11.1 → 4.12.0

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

@@ -99,11 +99,11 @@ function getBold(msg) {
     as: "span",
     isBold: true,
     children: msg
-  });
+  }, `bold-${msg}`);
 }
 
 function getNewLine() {
-  return jsxRuntime.jsx("br", {});
+  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) {
@@ -750,7 +760,7 @@ function getExportLogsLink(projectKey, msg) {
   return jsxRuntime.jsx(uiKit.Link, {
     to: `/${projectKey}/operations/export/logs`,
     children: msg
-  });
+  }, "link");
 }
 const extractFieldNamesAndAdditionalFieldExtensions = fields => {
   const result = _reduceInstanceProperty__default["default"](fields).call(fields, (acc, field) => {
@@ -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);
@@ -1465,22 +1485,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 +1532,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 +1560,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 +1577,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 +1618,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 +1695,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 +1722,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 +1741,7 @@ const FieldGroupSection = _ref2 => {
               children: [jsxRuntime.jsx(uiKit.IconButton, {
                 size: "20",
                 onClick: () => {
-                  if (!isForceExpanded) {
+                  if (!isSearchActive) {
                     updateExpandedGroups(group.groupName, !isOpen);
                   }
                   toggle();
@@ -1704,26 +1766,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 +1837,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 +1860,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 +1903,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 +1915,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 +1960,7 @@ const ExportFieldsSelectionStep = () => {
                 group: group,
                 index: index,
                 formik: formik,
-                isForceExpanded: fieldSearchTerm?.trim()?.length > 0
+                isSearchActive: isSearchActive
               }, group.groupName))
             })
           }) : jsxRuntime.jsx(NoSearchResults, {})]
@@ -1945,9 +2005,6 @@ const ExportResourcesProvider = _ref => {
     }),
     onSubmit
   });
-  React__default["default"].useEffect(() => {
-    formik$1.validateForm();
-  }, [currentStep]);
   return jsxRuntime.jsx(ExportResourcesContext.Provider, {
     value: {
       formik: formik$1,