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

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

@@ -103,7 +103,7 @@ function getBold(msg) {
 }
 
 function getNewLine() {
-  return jsxRuntime.jsx("br", {}, crypto.randomUUID());
+  return jsxRuntime.jsx("br", {}, "break");
 }
 
 var messages = reactIntl.defineMessages({
@@ -401,16 +401,6 @@ 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}}'
   }
 });
 
@@ -657,16 +647,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 getGroupSelectedFieldCount = group => {
-  const countSelectedFields = fields => {
+const getTotalCheckedFields = group => {
+  const countCheckedFields = fields => {
     return _reduceInstanceProperty__default["default"](fields).call(fields, (total, field) => {
       if (field.fields) {
-        return total + countSelectedFields(field.fields);
+        return total + countCheckedFields(field.fields);
       }
       return total + (field.isChecked ? 1 : 0);
     }, 0);
   };
-  return countSelectedFields(group.fields);
+  return countCheckedFields(group.fields);
 };
 
 let Step = /*#__PURE__*/function (Step) {
@@ -905,22 +895,12 @@ 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 = getIsExpanded(field, groupName, cachedExpandedGroups);
+        isExpanded = cachedExpandedGroups[`${groupName}.${field.name}`] ?? field.isExpanded ?? false;
       }
       if (field.fields) {
         field.fields = updateFields(field.fields, groupName);
@@ -1485,15 +1465,22 @@ const useExportFieldSelectionContext = () => {
   return React.useContext(ExportFieldSelectionContext);
 };
 
-const FieldsCountStamp = _ref => {
-  let count = _ref.count;
+const ExportFieldSelectionStamp = _ref => {
+  let group = _ref.group;
   const _useIntl = reactIntl.useIntl(),
     formatMessage = _useIntl.formatMessage;
-  return jsxRuntime.jsx(uiKit.Stamp, {
-    tone: "information",
-    isCondensed: true,
-    label: formatMessage(messages.itemCount, {
-      count
+  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)
+        })
+      })
     })
   });
 };
@@ -1532,26 +1519,13 @@ const FieldSection = _ref3 => {
     parentKeys = _ref3.parentKeys,
     formik = _ref3.formik,
     isAnySiblingChecked = _ref3.isAnySiblingChecked,
-    isSearchActive = _ref3.isSearchActive,
-    groupName = _ref3.groupName,
-    maxVisibleChildren = _ref3.maxVisibleChildren;
+    isForceExpanded = _ref3.isForceExpanded,
+    groupName = _ref3.groupName;
   const _useExportFieldSelect = useExportFieldSelectionContext(),
     updateExpandedGroups = _useExportFieldSelect.updateExpandedGroups;
-  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, {
+  return jsxRuntime.jsx(uiKit.Spacings.Stack, {
     scale: "s",
-    children: [visibleFields?.map((field, index) => {
-      const isChildrenCountDisplayed = shouldDisplayChildrenCount(field);
+    children: fields?.map((field, index) => {
       const hasDependents = Boolean(field.dependentGroupNames?.length || field.dependentFieldNames?.length);
       const isAnyOfTheChildFieldsChecked = isAnyFieldChecked(field.fields || []);
       const allFieldsChecked = areAllFieldsChecked(field.fields || []);
@@ -1560,9 +1534,9 @@ const FieldSection = _ref3 => {
         if (isParent) return areAllFieldsChecked(field.fields);
         return field.isChecked;
       };
-      if (!shouldDisplayField(field)) return null;
+      if (field.isHidden) return null;
       return jsxRuntime.jsx(CollapsibleFieldWrapper, {
-        isForceExpanded: isSearchActive,
+        isForceExpanded: isForceExpanded,
         field: field,
         children: _ref4 => {
           let isOpen = _ref4.isOpen,
@@ -1577,17 +1551,17 @@ const FieldSection = _ref3 => {
                   left: `calc(-1 * ${uiKit.designTokens.spacingXl})`
                 },
                 onClick: () => {
-                  if (!isSearchActive) {
+                  if (!isForceExpanded) {
                     updateExpandedGroups(`${groupName}.${field.name}`, !isOpen);
                   }
                   toggle();
                 },
                 icon: isOpen ? jsxRuntime.jsx(uiKit.AngleDownIcon, {}) : jsxRuntime.jsx(uiKit.AngleRightIcon, {}),
                 label: ""
-              }), jsxRuntime.jsxs(uiKit.Spacings.Inline, {
+              }), jsxRuntime.jsx(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,
@@ -1618,60 +1592,26 @@ 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,
-                  isSearchActive: isSearchActive,
+                  isForceExpanded: isForceExpanded,
                   groupName: groupName
                 })]
               })
             })]
           }, `${field.name}-${index}`);
         }
-      }, `${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)
-        })
-      })
+      }, `${field.name}.${isForceExpanded}`);
     })
   });
 };
@@ -1695,7 +1635,7 @@ const FieldGroupSection = _ref2 => {
   let group = _ref2.group,
     index = _ref2.index,
     formik = _ref2.formik,
-    isSearchActive = _ref2.isSearchActive;
+    isForceExpanded = _ref2.isForceExpanded;
   const allFieldsChecked = React.useMemo(() => areAllFieldsChecked(group.fields), [group.fields]);
   const isAnyFieldInGroupChecked = React.useMemo(() => isAnyFieldChecked(group.fields), [group.fields]);
   const _useExportFieldSelect = useExportFieldSelectionContext(),
@@ -1722,9 +1662,7 @@ const FieldGroupSection = _ref2 => {
   };
   if (group.isHidden) return null;
   return jsxRuntime.jsx(uiKit.CollapsibleMotion, {
-    isDefaultClosed: isSearchActive ? false : !group.isExpanded
-    // Reset collapse state when search input becomes active/inactive
-    ,
+    isDefaultClosed: isForceExpanded ? false : !group.isExpanded,
     children: _ref3 => {
       let isOpen = _ref3.isOpen,
         toggle = _ref3.toggle,
@@ -1741,7 +1679,7 @@ const FieldGroupSection = _ref2 => {
               children: [jsxRuntime.jsx(uiKit.IconButton, {
                 size: "20",
                 onClick: () => {
-                  if (!isSearchActive) {
+                  if (!isForceExpanded) {
                     updateExpandedGroups(group.groupName, !isOpen);
                   }
                   toggle();
@@ -1766,23 +1704,26 @@ const FieldGroupSection = _ref2 => {
                 type: "flat",
                 insetScale: "m",
                 showTopBorder: true,
-                children: isOpen && jsxRuntime.jsx(FieldSection, {
-                  fields: group.fields,
-                  formik: formik,
-                  parentKeys: [parentKey],
-                  isAnySiblingChecked: isAnyFieldInGroupChecked,
-                  groupName: group.groupName,
-                  isSearchActive: isSearchActive
+                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
+                  })
                 })
               })
-            }), !isOpen && jsxRuntime.jsx(SelectedGroupFieldsCountStamp, {
+            }), !isOpen && jsxRuntime.jsx(ExportFieldSelectionStamp, {
               group: group
             })]
           })
         })]
       });
     }
-  }, `${isSearchActive}`);
+  }, `${isForceExpanded}`);
 };
 
 var _ref = {
@@ -1837,7 +1778,6 @@ 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;" + ("" ));
@@ -1860,9 +1800,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) {
@@ -1903,7 +1843,7 @@ const ExportFieldsSelectionStep = () => {
         });
       });
     };
-    if (!isSearchActive) return _valuesInstanceProperty__default["default"](formik).groups;
+    if (!fieldSearchTerm?.trim()?.length) return _valuesInstanceProperty__default["default"](formik).groups;
     const updateGroups = groups => {
       return _mapInstanceProperty__default["default"](groups).call(groups, group => {
         const updatedFields = updateFields(group.fields, false);
@@ -1915,12 +1855,12 @@ const ExportFieldsSelectionStep = () => {
       });
     };
     return updateGroups(_valuesInstanceProperty__default["default"](formik).groups);
-  }, [_valuesInstanceProperty__default["default"](formik).groups, fieldSearchTerm, isSearchActive]);
+  }, [_valuesInstanceProperty__default["default"](formik).groups, fieldSearchTerm]);
   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, 500), [onSearchChange]);
+  const onSearchChangeDebounced = React__default["default"].useMemo(() => debounce__default["default"](onSearchChange, 300), [onSearchChange]);
   const onSearchReset = () => {
     setFieldSearchTerm('');
   };
@@ -1960,7 +1900,7 @@ const ExportFieldsSelectionStep = () => {
                 group: group,
                 index: index,
                 formik: formik,
-                isSearchActive: isSearchActive
+                isForceExpanded: fieldSearchTerm?.trim()?.length > 0
               }, group.groupName))
             })
           }) : jsxRuntime.jsx(NoSearchResults, {})]
@@ -2005,6 +1945,9 @@ const ExportResourcesProvider = _ref => {
     }),
     onSubmit
   });
+  React__default["default"].useEffect(() => {
+    formik$1.validateForm();
+  }, [currentStep]);
   return jsxRuntime.jsx(ExportResourcesContext.Provider, {
     value: {
       formik: formik$1,