@commercetools-frontend/experimental-components 5.3.1 → 5.4.1

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

@@ -1601,7 +1601,7 @@ function formatMoneyRangeValue(value, intl) {
   return '';
 }
 function formatMoneyValue(amount, currency, intl) {
-  return formatMoney$1(_objectSpread$1l({
+  return formatMoney$2(_objectSpread$1l({
     centAmount: amount,
     fractionDigits: getFractionDigit(currency)
   }, currency ? {
@@ -1616,7 +1616,7 @@ function getFractionedAmount(moneyValue) {
   const amount = moneyValue.type === PRECISION_TYPES.highPrecision ? moneyValue.preciseAmount : moneyValue.centAmount;
   return amount / 10 ** fractionDigits;
 }
-function formatMoney$1(moneyValue, intl, options) {
+function formatMoney$2(moneyValue, intl, options) {
   var _moneyValue$fractione;
   return intl.formatNumber((_moneyValue$fractione = moneyValue.fractionedAmount) !== null && _moneyValue$fractione !== void 0 ? _moneyValue$fractione : getFractionedAmount(moneyValue), _objectSpread$1l({
     style: 'currency',
@@ -1667,10 +1667,10 @@ const formatLtext = _ref3 => {
     locale: language
   });
 };
-const formatMoney = _ref4 => {
+const formatMoney$1 = _ref4 => {
   let value = _ref4.value,
     intl = _ref4.intl;
-  return formatMoney$1(value, intl);
+  return formatMoney$2(value, intl);
 };
 const formatReference = _ref5 => {
   let value = _ref5.value;
@@ -1760,7 +1760,7 @@ const doNotFormat = _ref13 => {
   let value = _ref13.value;
   return value;
 };
-const getFormatter = type => isNil$1(type) ? formatNilType : type.name === 'nested' ? formatNested : type.name === 'set' ? formatSet : type.name === 'enum' ? formatEnum : type.name === 'lenum' ? formatLenum : type.name === 'ltext' ? formatLtext : type.name === 'money' ? formatMoney : type.name === 'reference' ? formatReference : type.name === 'date' ? formatDate : type.name === 'time' ? doNotFormat : type.name === 'datetime' ? formatDateTime : type.name === 'boolean' ? formatBoolean : type.name === 'text' ? doNotFormat : type.name === 'number' ? doNotFormat : formatUnknown;
+const getFormatter = type => isNil$1(type) ? formatNilType : type.name === 'nested' ? formatNested : type.name === 'set' ? formatSet : type.name === 'enum' ? formatEnum : type.name === 'lenum' ? formatLenum : type.name === 'ltext' ? formatLtext : type.name === 'money' ? formatMoney$1 : type.name === 'reference' ? formatReference : type.name === 'date' ? formatDate : type.name === 'time' ? doNotFormat : type.name === 'datetime' ? formatDateTime : type.name === 'boolean' ? formatBoolean : type.name === 'text' ? doNotFormat : type.name === 'number' ? doNotFormat : formatUnknown;
 function formatAttribute(_ref14) {
   let type = _ref14.type,
     value = _ref14.value,
@@ -4250,12 +4250,38 @@ const createAttributeTypeValue = attribute => {
       return attribute.type;
   }
 };
+
+/*
+ * Fixed price supports high precision. Action format is nested with the
+ * the type of the money. Absolute discount only works with cent precision,
+ * hence the action structure is flat.
+ */
+const formatMoney = valueType => money => {
+  if (valueType === 'fixed') {
+    return {
+      [money.type]: _objectSpread$10({
+        centAmount: money.centAmount,
+        currencyCode: money.currencyCode
+      }, money.type === PRECISION_TYPES.highPrecision && {
+        preciseAmount: money.preciseAmount,
+        fractionDigits: money.fractionDigits
+      })
+    };
+  } else if (valueType === 'absolute') {
+    return {
+      centAmount: money.centAmount,
+      currencyCode: money.currencyCode
+    };
+  } else {
+    throw new Error('Unexpected value type for money.');
+  }
+};
+
 /**
  * converts the `changeValue` action to GraphQL actions variable
  * @param {Object} actionPayload
  */
 const convertChangeValueAction = actionPayload => {
-  var _context2;
   const valueType = actionPayload.value.type;
   const possibleTypeKeys = {
     relative: ['permyriad'],
@@ -4264,7 +4290,11 @@ const convertChangeValueAction = actionPayload => {
     giftLineItem: ['product', 'variantId', 'distributionChannel', 'supplyChannel', 'ResourceIdentifierInput']
   };
   const filteredValue = pick(actionPayload.value, possibleTypeKeys[valueType]);
-  if (filteredValue.money) filteredValue.money = _mapInstanceProperty(_context2 = filteredValue.money).call(_context2, valueItem => omit(valueItem, '__typename'));
+  if (filteredValue.money) {
+    var _context2;
+    const moneyFormatter = formatMoney(valueType);
+    filteredValue.money = _mapInstanceProperty(_context2 = filteredValue.money).call(_context2, moneyFormatter);
+  }
   return {
     changeValue: {
       value: {
@@ -4273,6 +4303,7 @@ const convertChangeValueAction = actionPayload => {
     }
   };
 };
+
 /**
  * This function changes any payload after the actions have been computed.
  * Currently we only need to change the `setCustomField` action payload
@@ -7126,6 +7157,13 @@ function CustomInputSet(props) {
       children: jsx(Field, {
         name: props.name,
         validate: values => {
+          // This validate function overrides the one found in  CustomFieldInternal ,
+          // so we need to check if the field is required here.
+          if (props.fieldDefinition.required && isNil$1(dropEmptyEntries(values))) {
+            return {
+              missing: true
+            };
+          }
           const errors = getDuplicateErrors(values);
           return errors.length > 0 ? errors : undefined;
         },
@@ -7509,10 +7547,12 @@ const CustomFieldsInternal = props => {
       return jsx(FastField, {
         name: fieldName,
         validate: validate,
-        children: () => {
-          var _context3;
-          return jsxs(Spacings.Stack, {
-            scale: "xs",
+        children: () => jsx(Spacings.Stack, {
+          scale: "xs",
+          children: jsxs("div", {
+            "aria-invalid": _Object$keys(fieldErrors !== null && fieldErrors !== void 0 ? fieldErrors : {}).length > 0,
+            "aria-errormessage": "".concat(fieldName, "-error"),
+            id: "".concat(fieldName, "-error"),
             children: [jsx(CustomFieldsLabel, {
               name: fieldName,
               fieldDefinition: fieldDefinition
@@ -7527,26 +7567,22 @@ const CustomFieldsInternal = props => {
                 isReadOnly: props.isReadOnly,
                 onBlur: handleBlur,
                 setFieldValue: props.setFieldValue
-              }) : jsx("div", {
-                "aria-invalid": _Object$keys(fieldErrors !== null && fieldErrors !== void 0 ? fieldErrors : {}).length > 0,
-                "aria-errormessage": "".concat(fieldName, "-error"),
-                children: jsx(CustomFieldInput, {
-                  name: fieldName,
-                  value: value,
-                  fieldDefinition: fieldDefinition,
-                  isDisabled: props.isDisabled,
-                  isReadOnly: props.isReadOnly,
-                  onBlur: handleBlur,
-                  setFieldValue: props.setFieldValue,
-                  hasError: hasError
-                })
-              }, _concatInstanceProperty(_context3 = "".concat(fieldName, "-")).call(_context3, index)), jsx(CustomFieldErrors, {
+              }) : jsx(CustomFieldInput, {
+                name: fieldName,
+                value: value,
+                fieldDefinition: fieldDefinition,
+                isDisabled: props.isDisabled,
+                isReadOnly: props.isReadOnly,
+                onBlur: handleBlur,
+                setFieldValue: props.setFieldValue,
+                hasError: hasError
+              }), jsx(CustomFieldErrors, {
                 isTouched: isTouched,
                 errors: fieldErrors
               })]
             })]
-          });
-        }
+          })
+        })
       }, _concatInstanceProperty(_context2 = "".concat(fieldName, "-")).call(_context2, index));
     })
   });
@@ -8891,7 +8927,7 @@ function formatDiscount(discount, currencyCode, intl) {
   if (discount.type === 'relative') return "".concat(discount.permyriad / 100, "%");
   if (!discount.money) return null;
   const moneyForCurrencyCode = _findInstanceProperty(_context = discount.money).call(_context, discountMoney => discountMoney.currencyCode === currencyCode);
-  return moneyForCurrencyCode ? formatMoney$1(moneyForCurrencyCode, intl) : null;
+  return moneyForCurrencyCode ? formatMoney$2(moneyForCurrencyCode, intl) : null;
 }
 
 function formatPercentage(percentage) {
@@ -11220,6 +11256,10 @@ const ScrollToFieldError = () => {
   const formik = useFormikContext();
   const isValid = formik.isValid,
     submitCount = formik.submitCount;
+  const _useApplicationContex = useApplicationContext(applicationContext => ({
+      dataLocale: applicationContext.dataLocale
+    })),
+    dataLocale = _useApplicationContex.dataLocale;
   useEffect(() => {
     // Do not run the effect if the form hasn't been submitted yet.
     if (submitCount === 0) return;
@@ -11227,17 +11267,23 @@ const ScrollToFieldError = () => {
     if (isValid) return;
     const firstErrorElement = document.querySelector('[aria-invalid="true"]');
     if (firstErrorElement) {
-      var _ref, _document$querySelect, _elementToScrollTo$sc;
+      var _ref, _ref2, _document$querySelect, _elementToScrollTo$sc;
       // Get a reference to the label.
-      const id = firstErrorElement.getAttribute('id');
+      const firstElementId = firstErrorElement.getAttribute('id');
+      const localizedInputIndex = _indexOfInstanceProperty(firstElementId).call(firstElementId, ".".concat(dataLocale));
+
+      // check if locale is appended then remove it from id
+      const id = localizedInputIndex > -1 ? firstElementId.replace(".".concat(dataLocale), '') : firstElementId;
 
       // Scroll to the label (if found), otherwise to the input element itself.
-      const elementToScrollTo = (_ref = (_document$querySelect = document.querySelector("label[for=\"".concat(id, "\"]"))) !== null && _document$querySelect !== void 0 ? _document$querySelect : document.querySelector("label#".concat(id))) !== null && _ref !== void 0 ? _ref : firstErrorElement;
+
+      const elementToScrollTo = //  div is used only for custom fields
+      (_ref = (_ref2 = (_document$querySelect = document.querySelector("div[aria-errormessage=\"".concat(firstElementId, "\"]"))) !== null && _document$querySelect !== void 0 ? _document$querySelect : document.querySelector("label[for=\"".concat(id, "\"]"))) !== null && _ref2 !== void 0 ? _ref2 : document.querySelector("label#".concat(id))) !== null && _ref !== void 0 ? _ref : firstErrorElement;
       (_elementToScrollTo$sc = elementToScrollTo.scrollIntoView) === null || _elementToScrollTo$sc === void 0 || _elementToScrollTo$sc.call(elementToScrollTo, {
         behavior: 'smooth'
       });
     }
-  }, [isValid, submitCount]);
+  }, [dataLocale, isValid, submitCount]);
   return null;
 };
 
@@ -12539,7 +12585,7 @@ const computedProperties = {
       intl = _ref4.intl;
     const allVariants = _concatInstanceProperty(_context2 = product.variants).call(_context2, product.masterVariant);
     const variantPrices = flatMap(allVariants, variant => variant.prices);
-    return _mapInstanceProperty(_context3 = getMinimumPricesByCurrencyCode(variantPrices)).call(_context3, price => formatMoney$1(price, intl)).join(', ') || NO_VALUE_FALLBACK;
+    return _mapInstanceProperty(_context3 = getMinimumPricesByCurrencyCode(variantPrices)).call(_context3, price => formatMoney$2(price, intl)).join(', ') || NO_VALUE_FALLBACK;
   },
   sku(_ref5) {
     var _context4, _context5;
@@ -12844,13 +12890,18 @@ var messages = defineMessages({
     id: 'CustomTypesSubform.typesPlaceholder',
     description: 'The placeholder for the types',
     defaultMessage: 'Select...'
+  },
+  noInputValues: {
+    id: 'CustomTypesSubform.noInputValues',
+    description: 'The label when there are no input values defined for the custom fields.',
+    defaultMessage: 'There are no input values defined for the custom fields.'
   }
 });
 
 const FIELD_NAME = 'custom';
 
 function ownKeys$2(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$2(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys$2(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys$2(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context2 = ownKeys$2(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context3 = ownKeys$2(Object(t))).call(_context3, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 const typeDefinitionsExist = typeDefinitions => {
   return typeDefinitions.length > 0;
 };
@@ -12861,9 +12912,18 @@ const typeDefinitionSelected = formValues => {
 const typeDefinitionContainsFieldDefinitions = formValues => {
   return formValues[FIELD_NAME].type.obj.key && formValues[FIELD_NAME].type.obj.fieldDefinitions.length > 0;
 };
-const CustomFieldsInputWrapper = _ref => {
-  let typeDefinitions = _ref.typeDefinitions,
-    isReadOnly = _ref.isReadOnly;
+const fieldDefinitionsWithValues = formValues => {
+  var _context;
+  const fieldValues = formValues[FIELD_NAME].fields;
+  return _filterInstanceProperty(_context = formValues[FIELD_NAME].type.obj.fieldDefinitions).call(_context, _ref => {
+    let name = _ref.name;
+    return fieldValues[name] !== undefined;
+  });
+};
+const CustomFieldsInputWrapper = _ref2 => {
+  let typeDefinitions = _ref2.typeDefinitions,
+    isReadOnly = _ref2.isReadOnly,
+    hideEmptyFields = _ref2.hideEmptyFields;
   const _useFormikContext = useFormikContext(),
     formValues = _valuesInstanceProperty(_useFormikContext);
   if (!typeDefinitionsExist(typeDefinitions)) {
@@ -12875,12 +12935,15 @@ const CustomFieldsInputWrapper = _ref => {
   if (!typeDefinitionContainsFieldDefinitions(formValues)) {
     return jsx(FormattedMessage, _objectSpread$2({}, messages.noCustomFields));
   }
+  if (fieldDefinitionsWithValues(formValues).length === 0 && isReadOnly && hideEmptyFields) {
+    return jsx(FormattedMessage, _objectSpread$2({}, messages.noInputValues));
+  }
   return jsx(Constraints.Horizontal, {
     max: "scale",
     children: jsx(CustomFields, {
       isReadOnly: isReadOnly,
       name: "".concat(FIELD_NAME, ".fields"),
-      fieldDefinitions: formValues[FIELD_NAME].type.obj.fieldDefinitions
+      fieldDefinitions: isReadOnly && hideEmptyFields ? fieldDefinitionsWithValues(formValues) : formValues[FIELD_NAME].type.obj.fieldDefinitions
     })
   });
 };
@@ -12914,10 +12977,11 @@ const createFormStateFromTypeDefinition = selectedTypeDefinition => {
   };
 };
 const CustomTypeSubform = _ref => {
-  var _formValues$FIELD_NAM, _formValues$FIELD_NAM2;
+  var _formValues$FIELD_NAM3, _formValues$FIELD_NAM4;
   let typeDefinitions = _ref.typeDefinitions,
     isReadOnly = _ref.isReadOnly,
-    isCondensed = _ref.isCondensed;
+    isCondensed = _ref.isCondensed,
+    hideEmptyFields = _ref.hideEmptyFields;
   const _useFormikContext = useFormikContext(),
     formValues = _valuesInstanceProperty(_useFormikContext),
     setFieldValue = _useFormikContext.setFieldValue,
@@ -12944,19 +13008,26 @@ const CustomTypeSubform = _ref => {
       });
     }
   }, [typeDefinitions, setFieldValue, validateForm]);
+  const typeDefinitionSelected = formValues => {
+    var _formValues$FIELD_NAM, _formValues$FIELD_NAM2;
+    return ((_formValues$FIELD_NAM = formValues[FIELD_NAME]) === null || _formValues$FIELD_NAM === void 0 ? void 0 : _formValues$FIELD_NAM.type) && ((_formValues$FIELD_NAM2 = formValues[FIELD_NAME]) === null || _formValues$FIELD_NAM2 === void 0 || (_formValues$FIELD_NAM2 = _formValues$FIELD_NAM2.type) === null || _formValues$FIELD_NAM2 === void 0 ? void 0 : _formValues$FIELD_NAM2.obj);
+  };
+
+  // if the user has read-only permissions, empty fields are hidden, and no type definition is selected, hide the component
+  if (isReadOnly && hideEmptyFields && !typeDefinitionSelected(formValues)) return null;
   return jsx(CollapsiblePanel, {
     header: jsx(CollapsiblePanel.Header, {
       isCondensed: isCondensed,
       children: jsx(FormattedMessage, _objectSpread$1({}, messages.title))
     }),
     headerControls: typeDefinitions.length > 0 && jsx("div", {
-      css: /*#__PURE__*/css("min-width:", designTokens.constraint11, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:CustomTypeSubform;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImN1c3RvbS10eXBlLXN1YmZvcm0uanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtHb0IiLCJmaWxlIjoiY3VzdG9tLXR5cGUtc3ViZm9ybS5qc3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyB1c2VDYWxsYmFjayB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgeyB1c2VGb3JtaWtDb250ZXh0IH0gZnJvbSAnZm9ybWlrJztcbmltcG9ydCB7IEZvcm1hdHRlZE1lc3NhZ2UsIHVzZUludGwgfSBmcm9tICdyZWFjdC1pbnRsJztcbmltcG9ydCB7IHVzZUFwcGxpY2F0aW9uQ29udGV4dCB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLWZyb250ZW5kL2FwcGxpY2F0aW9uLXNoZWxsLWNvbm5lY3RvcnMnO1xuaW1wb3J0IHsgZm9ybWF0TG9jYWxpemVkU3RyaW5nIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtZnJvbnRlbmQvbDEwbic7XG5pbXBvcnQge1xuICBDb2xsYXBzaWJsZVBhbmVsLFxuICBTZWxlY3RJbnB1dCxcbiAgZGVzaWduVG9rZW5zLFxufSBmcm9tICdAY29tbWVyY2V0b29scy1mcm9udGVuZC91aS1raXQnO1xuaW1wb3J0IG1lc3NhZ2VzIGZyb20gJy4vbWVzc2FnZXMnO1xuaW1wb3J0IEN1c3RvbUZpZWxkc0lucHV0V3JhcHBlciBmcm9tICcuL2N1c3RvbS1maWVsZHMtaW5wdXQtd3JhcHBlcic7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBGSUVMRF9OQU1FIH0gZnJvbSAnLi9jb25zdGFudHMnO1xuXG4vLyBDcmVhdGVzIGRyb3Bkb3duIG9wdGlvbnNcbmV4cG9ydCBjb25zdCBtYXBUeXBlRGVmaW5pdGlvbnNUb09wdGlvbnMgPSAoXG4gIHR5cGVEZWZpbml0aW9ucyxcbiAgbGFuZ3VhZ2UsXG4gIGxhbmd1YWdlcyxcbiAgc2VsZWN0ZWRUeXBlRGVmaW5pdGlvbklkXG4pID0+IHtcbiAgcmV0dXJuIHR5cGVEZWZpbml0aW9ucy5tYXAoKHR5cGVEZWZpbml0aW9uKSA9PiAoe1xuICAgIGlzRGlzYWJsZWQ6XG4gICAgICBzZWxlY3RlZFR5cGVEZWZpbml0aW9uSWQgJiZcbiAgICAgIHNlbGVjdGVkVHlwZURlZmluaXRpb25JZCA9PT0gdHlwZURlZmluaXRpb24udHlwZS5pZCxcbiAgICB2YWx1ZTogdHlwZURlZmluaXRpb24udHlwZS5rZXksXG4gICAgbGFiZWw6IGZvcm1hdExvY2FsaXplZFN0cmluZyh0eXBlRGVmaW5pdGlvbi50eXBlLCB7XG4gICAgICBrZXk6ICduYW1lJyxcbiAgICAgIGxvY2FsZTogbGFuZ3VhZ2UsXG4gICAgICBmYWxsYmFja09yZGVyOiBsYW5ndWFnZXMsXG4gICAgfSksXG4gIH0pKTtcbn07XG5cbi8vIFVzZWQgdG8gZ2VuZXJhdGUgZm9ybSBzdGF0ZSB3aGVuIHRoZSB1c2VyIHNlbGVjdHMgYSB0eXBlIGRlZmluaXRpb24gZnJvbSB0aGUgZHJvcGRvd25cbmNvbnN0IGNyZWF0ZUZvcm1TdGF0ZUZyb21UeXBlRGVmaW5pdGlvbiA9IChzZWxlY3RlZFR5cGVEZWZpbml0aW9uKSA9PiB7XG4gIHJldHVybiB7XG4gICAgdHlwZToge1xuICAgICAgaWQ6IHNlbGVjdGVkVHlwZURlZmluaXRpb24udHlwZS5pZCxcbiAgICAgIG9iajoge1xuICAgICAgICBmaWVsZERlZmluaXRpb25zOiBzZWxlY3RlZFR5cGVEZWZpbml0aW9uLnR5cGUuZmllbGREZWZpbml0aW9ucyxcbiAgICAgICAga2V5OiBzZWxlY3RlZFR5cGVEZWZpbml0aW9uLnR5cGUua2V5LFxuICAgICAgfSxcbiAgICB9LFxuICAgIGZpZWxkczoge30sXG4gIH07XG59O1xuXG5jb25zdCBDdXN0b21UeXBlU3ViZm9ybSA9ICh7IHR5cGVEZWZpbml0aW9ucywgaXNSZWFkT25seSwgaXNDb25kZW5zZWQgfSkgPT4ge1xuICBjb25zdCB7XG4gICAgdmFsdWVzOiBmb3JtVmFsdWVzLFxuICAgIHNldEZpZWxkVmFsdWUsXG4gICAgdmFsaWRhdGVGb3JtLFxuICB9ID0gdXNlRm9ybWlrQ29udGV4dCgpO1xuICBjb25zdCB7IGZvcm1hdE1lc3NhZ2UgfSA9IHVzZUludGwoKTtcbiAgY29uc3QgeyBsYW5ndWFnZSwgbGFuZ3VhZ2VzIH0gPSB1c2VBcHBsaWNhdGlvbkNvbnRleHQoXG4gICAgKGFwcGxpY2F0aW9uQ29udGV4dCkgPT4gKHtcbiAgICAgIGxhbmd1YWdlOiBhcHBsaWNhdGlvbkNvbnRleHQuZGF0YUxvY2FsZSxcbiAgICAgIGxhbmd1YWdlczogYXBwbGljYXRpb25Db250ZXh0LnByb2plY3QubGFuZ3VhZ2VzLFxuICAgIH0pXG4gICk7XG5cbiAgY29uc3QgaGFuZGxlVHlwZURlZmluaXRpb25TZWxlY3QgPSB1c2VDYWxsYmFjayhcbiAgICAoZXZlbnQpID0+IHtcbiAgICAgIGNvbnN0IHNlbGVjdGVkVHlwZURlZmluaXRpb24gPSB0eXBlRGVmaW5pdGlvbnMuZmluZChcbiAgICAgICAgKHR5cGVEZWZpbml0aW9uKSA9PiB0eXBlRGVmaW5pdGlvbi50eXBlLmtleSA9PT0gZXZlbnQudGFyZ2V0LnZhbHVlXG4gICAgICApO1xuXG4gICAgICBpZiAoc2VsZWN0ZWRUeXBlRGVmaW5pdGlvbikge1xuICAgICAgICBjb25zdCBuZXh0Q3VzdG9tID0gY3JlYXRlRm9ybVN0YXRlRnJvbVR5cGVEZWZpbml0aW9uKFxuICAgICAgICAgIHNlbGVjdGVkVHlwZURlZmluaXRpb25cbiAgICAgICAgKTtcblxuICAgICAgICBzZXRGaWVsZFZhbHVlKEZJRUxEX05BTUUsIG5leHRDdXN0b20pLnRoZW4oKCkgPT4ge1xuICAgICAgICAgIHZhbGlkYXRlRm9ybSgpO1xuICAgICAgICB9KTtcbiAgICAgIH0gZWxzZSB7XG4gICAgICAgIC8vIGlmIHRoZSBkcm9wZG93biBzZWxlY3RvciBpcyBjbGVhcmVkLCByZW1vdmUgdGhlIGBjdXN0b21gIGZpZWxkIGZyb20gdGhlIGZvcm0gc3RhdGUgZW50aXJlbHlcbiAgICAgICAgc2V0RmllbGRWYWx1ZShGSUVMRF9OQU1FLCB1bmRlZmluZWQpLnRoZW4oKCkgPT4ge1xuICAgICAgICAgIHZhbGlkYXRlRm9ybSgpO1xuICAgICAgICB9KTtcbiAgICAgIH1cbiAgICB9LFxuICAgIFt0eXBlRGVmaW5pdGlvbnMsIHNldEZpZWxkVmFsdWUsIHZhbGlkYXRlRm9ybV1cbiAgKTtcblxuICByZXR1cm4gKFxuICAgIDxDb2xsYXBzaWJsZVBhbmVsXG4gICAgICBoZWFkZXI9e1xuICAgICAgICA8Q29sbGFwc2libGVQYW5lbC5IZWFkZXIgaXNDb25kZW5zZWQ9e2lzQ29uZGVuc2VkfT5cbiAgICAgICAgICA8Rm9ybWF0dGVkTWVzc2FnZSB7Li4ubWVzc2FnZXMudGl0bGV9IC8+XG4gICAgICAgIDwvQ29sbGFwc2libGVQYW5lbC5IZWFkZXI+XG4gICAgICB9XG4gICAgICBoZWFkZXJDb250cm9scz17XG4gICAgICAgIHR5cGVEZWZpbml0aW9ucy5sZW5ndGggPiAwICYmIChcbiAgICAgICAgICA8ZGl2XG4gICAgICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICAgICAgbWluLXdpZHRoOiAke2Rlc2lnblRva2Vucy5jb25zdHJhaW50MTF9O1xuICAgICAgICAgICAgYH1cbiAgICAgICAgICA+XG4gICAgICAgICAgICA8U2VsZWN0SW5wdXRcbiAgICAgICAgICAgICAgaXNDbGVhcmFibGVcbiAgICAgICAgICAgICAgZGF0YS10ZXN0aWQ9XCJjdXN0b20tdHlwZS1zZWxlY3RcIlxuICAgICAgICAgICAgICBuYW1lPXtgJHtGSUVMRF9OQU1FfS50eXBlLm9iai5rZXlgfVxuICAgICAgICAgICAgICBvcHRpb25zPXttYXBUeXBlRGVmaW5pdGlvbnNUb09wdGlvbnMoXG4gICAgICAgICAgICAgICAgdHlwZURlZmluaXRpb25zLFxuICAgICAgICAgICAgICAgIGxhbmd1YWdlLFxuICAgICAgICAgICAgICAgIGxhbmd1YWdlcyxcbiAgICAgICAgICAgICAgICBmb3JtVmFsdWVzW0ZJRUxEX05BTUVdPy50eXBlPy5pZFxuICAgICAgICAgICAgICApfVxuICAgICAgICAgICAgICB2YWx1ZT17Zm9ybVZhbHVlc1tGSUVMRF9OQU1FXT8udHlwZT8ub2JqPy5rZXl9XG4gICAgICAgICAgICAgIG9uQ2hhbmdlPXtoYW5kbGVUeXBlRGVmaW5pdGlvblNlbGVjdH1cbiAgICAgICAgICAgICAgcGxhY2Vob2xkZXI9e2Zvcm1hdE1lc3NhZ2UobWVzc2FnZXMudHlwZXNQbGFjZWhvbGRlcil9XG4gICAgICAgICAgICAgIGlzUmVhZE9ubHk9e2lzUmVhZE9ubHl9XG4gICAgICAgICAgICAvPlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICApXG4gICAgICB9XG4gICAgICBoZWFkZXJDb250cm9sc0FsaWdubWVudD1cInJpZ2h0XCJcbiAgICA+XG4gICAgICA8Q3VzdG9tRmllbGRzSW5wdXRXcmFwcGVyXG4gICAgICAgIHR5cGVEZWZpbml0aW9ucz17dHlwZURlZmluaXRpb25zfVxuICAgICAgICBpc1JlYWRPbmx5PXtpc1JlYWRPbmx5fVxuICAgICAgLz5cbiAgICA8L0NvbGxhcHNpYmxlUGFuZWw+XG4gICk7XG59O1xuXG5DdXN0b21UeXBlU3ViZm9ybS5kaXNwbGF5TmFtZSA9ICdDdXN0b21UeXBlU3ViZm9ybSc7XG5DdXN0b21UeXBlU3ViZm9ybS5wcm9wVHlwZXMgPSB7XG4gIHR5cGVEZWZpbml0aW9uczogUHJvcFR5cGVzLmFycmF5LmlzUmVxdWlyZWQsXG4gIGlzUmVhZE9ubHk6IFByb3BUeXBlcy5ib29sLFxuICBpc0NvbmRlbnNlZDogUHJvcFR5cGVzLmJvb2wsXG59O1xuXG5leHBvcnQgZGVmYXVsdCBDdXN0b21UeXBlU3ViZm9ybTtcbiJdfQ== */"),
+      css: /*#__PURE__*/css("min-width:", designTokens.constraint11, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:CustomTypeSubform;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImN1c3RvbS10eXBlLXN1YmZvcm0uanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQStHb0IiLCJmaWxlIjoiY3VzdG9tLXR5cGUtc3ViZm9ybS5qc3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyB1c2VDYWxsYmFjayB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgeyB1c2VGb3JtaWtDb250ZXh0IH0gZnJvbSAnZm9ybWlrJztcbmltcG9ydCB7IEZvcm1hdHRlZE1lc3NhZ2UsIHVzZUludGwgfSBmcm9tICdyZWFjdC1pbnRsJztcbmltcG9ydCB7IHVzZUFwcGxpY2F0aW9uQ29udGV4dCB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLWZyb250ZW5kL2FwcGxpY2F0aW9uLXNoZWxsLWNvbm5lY3RvcnMnO1xuaW1wb3J0IHsgZm9ybWF0TG9jYWxpemVkU3RyaW5nIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtZnJvbnRlbmQvbDEwbic7XG5pbXBvcnQge1xuICBDb2xsYXBzaWJsZVBhbmVsLFxuICBTZWxlY3RJbnB1dCxcbiAgZGVzaWduVG9rZW5zLFxufSBmcm9tICdAY29tbWVyY2V0b29scy1mcm9udGVuZC91aS1raXQnO1xuaW1wb3J0IG1lc3NhZ2VzIGZyb20gJy4vbWVzc2FnZXMnO1xuaW1wb3J0IEN1c3RvbUZpZWxkc0lucHV0V3JhcHBlciBmcm9tICcuL2N1c3RvbS1maWVsZHMtaW5wdXQtd3JhcHBlcic7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBGSUVMRF9OQU1FIH0gZnJvbSAnLi9jb25zdGFudHMnO1xuXG4vLyBDcmVhdGVzIGRyb3Bkb3duIG9wdGlvbnNcbmV4cG9ydCBjb25zdCBtYXBUeXBlRGVmaW5pdGlvbnNUb09wdGlvbnMgPSAoXG4gIHR5cGVEZWZpbml0aW9ucyxcbiAgbGFuZ3VhZ2UsXG4gIGxhbmd1YWdlcyxcbiAgc2VsZWN0ZWRUeXBlRGVmaW5pdGlvbklkXG4pID0+IHtcbiAgcmV0dXJuIHR5cGVEZWZpbml0aW9ucy5tYXAoKHR5cGVEZWZpbml0aW9uKSA9PiAoe1xuICAgIGlzRGlzYWJsZWQ6XG4gICAgICBzZWxlY3RlZFR5cGVEZWZpbml0aW9uSWQgJiZcbiAgICAgIHNlbGVjdGVkVHlwZURlZmluaXRpb25JZCA9PT0gdHlwZURlZmluaXRpb24udHlwZS5pZCxcbiAgICB2YWx1ZTogdHlwZURlZmluaXRpb24udHlwZS5rZXksXG4gICAgbGFiZWw6IGZvcm1hdExvY2FsaXplZFN0cmluZyh0eXBlRGVmaW5pdGlvbi50eXBlLCB7XG4gICAgICBrZXk6ICduYW1lJyxcbiAgICAgIGxvY2FsZTogbGFuZ3VhZ2UsXG4gICAgICBmYWxsYmFja09yZGVyOiBsYW5ndWFnZXMsXG4gICAgfSksXG4gIH0pKTtcbn07XG5cbi8vIFVzZWQgdG8gZ2VuZXJhdGUgZm9ybSBzdGF0ZSB3aGVuIHRoZSB1c2VyIHNlbGVjdHMgYSB0eXBlIGRlZmluaXRpb24gZnJvbSB0aGUgZHJvcGRvd25cbmNvbnN0IGNyZWF0ZUZvcm1TdGF0ZUZyb21UeXBlRGVmaW5pdGlvbiA9IChzZWxlY3RlZFR5cGVEZWZpbml0aW9uKSA9PiB7XG4gIHJldHVybiB7XG4gICAgdHlwZToge1xuICAgICAgaWQ6IHNlbGVjdGVkVHlwZURlZmluaXRpb24udHlwZS5pZCxcbiAgICAgIG9iajoge1xuICAgICAgICBmaWVsZERlZmluaXRpb25zOiBzZWxlY3RlZFR5cGVEZWZpbml0aW9uLnR5cGUuZmllbGREZWZpbml0aW9ucyxcbiAgICAgICAga2V5OiBzZWxlY3RlZFR5cGVEZWZpbml0aW9uLnR5cGUua2V5LFxuICAgICAgfSxcbiAgICB9LFxuICAgIGZpZWxkczoge30sXG4gIH07XG59O1xuXG5jb25zdCBDdXN0b21UeXBlU3ViZm9ybSA9ICh7XG4gIHR5cGVEZWZpbml0aW9ucyxcbiAgaXNSZWFkT25seSxcbiAgaXNDb25kZW5zZWQsXG4gIGhpZGVFbXB0eUZpZWxkcyxcbn0pID0+IHtcbiAgY29uc3Qge1xuICAgIHZhbHVlczogZm9ybVZhbHVlcyxcbiAgICBzZXRGaWVsZFZhbHVlLFxuICAgIHZhbGlkYXRlRm9ybSxcbiAgfSA9IHVzZUZvcm1pa0NvbnRleHQoKTtcbiAgY29uc3QgeyBmb3JtYXRNZXNzYWdlIH0gPSB1c2VJbnRsKCk7XG4gIGNvbnN0IHsgbGFuZ3VhZ2UsIGxhbmd1YWdlcyB9ID0gdXNlQXBwbGljYXRpb25Db250ZXh0KFxuICAgIChhcHBsaWNhdGlvbkNvbnRleHQpID0+ICh7XG4gICAgICBsYW5ndWFnZTogYXBwbGljYXRpb25Db250ZXh0LmRhdGFMb2NhbGUsXG4gICAgICBsYW5ndWFnZXM6IGFwcGxpY2F0aW9uQ29udGV4dC5wcm9qZWN0Lmxhbmd1YWdlcyxcbiAgICB9KVxuICApO1xuXG4gIGNvbnN0IGhhbmRsZVR5cGVEZWZpbml0aW9uU2VsZWN0ID0gdXNlQ2FsbGJhY2soXG4gICAgKGV2ZW50KSA9PiB7XG4gICAgICBjb25zdCBzZWxlY3RlZFR5cGVEZWZpbml0aW9uID0gdHlwZURlZmluaXRpb25zLmZpbmQoXG4gICAgICAgICh0eXBlRGVmaW5pdGlvbikgPT4gdHlwZURlZmluaXRpb24udHlwZS5rZXkgPT09IGV2ZW50LnRhcmdldC52YWx1ZVxuICAgICAgKTtcblxuICAgICAgaWYgKHNlbGVjdGVkVHlwZURlZmluaXRpb24pIHtcbiAgICAgICAgY29uc3QgbmV4dEN1c3RvbSA9IGNyZWF0ZUZvcm1TdGF0ZUZyb21UeXBlRGVmaW5pdGlvbihcbiAgICAgICAgICBzZWxlY3RlZFR5cGVEZWZpbml0aW9uXG4gICAgICAgICk7XG5cbiAgICAgICAgc2V0RmllbGRWYWx1ZShGSUVMRF9OQU1FLCBuZXh0Q3VzdG9tKS50aGVuKCgpID0+IHtcbiAgICAgICAgICB2YWxpZGF0ZUZvcm0oKTtcbiAgICAgICAgfSk7XG4gICAgICB9IGVsc2Uge1xuICAgICAgICAvLyBpZiB0aGUgZHJvcGRvd24gc2VsZWN0b3IgaXMgY2xlYXJlZCwgcmVtb3ZlIHRoZSBgY3VzdG9tYCBmaWVsZCBmcm9tIHRoZSBmb3JtIHN0YXRlIGVudGlyZWx5XG4gICAgICAgIHNldEZpZWxkVmFsdWUoRklFTERfTkFNRSwgdW5kZWZpbmVkKS50aGVuKCgpID0+IHtcbiAgICAgICAgICB2YWxpZGF0ZUZvcm0oKTtcbiAgICAgICAgfSk7XG4gICAgICB9XG4gICAgfSxcbiAgICBbdHlwZURlZmluaXRpb25zLCBzZXRGaWVsZFZhbHVlLCB2YWxpZGF0ZUZvcm1dXG4gICk7XG5cbiAgY29uc3QgdHlwZURlZmluaXRpb25TZWxlY3RlZCA9IChmb3JtVmFsdWVzKSA9PiB7XG4gICAgcmV0dXJuIGZvcm1WYWx1ZXNbRklFTERfTkFNRV0/LnR5cGUgJiYgZm9ybVZhbHVlc1tGSUVMRF9OQU1FXT8udHlwZT8ub2JqO1xuICB9O1xuXG4gIC8vIGlmIHRoZSB1c2VyIGhhcyByZWFkLW9ubHkgcGVybWlzc2lvbnMsIGVtcHR5IGZpZWxkcyBhcmUgaGlkZGVuLCBhbmQgbm8gdHlwZSBkZWZpbml0aW9uIGlzIHNlbGVjdGVkLCBoaWRlIHRoZSBjb21wb25lbnRcbiAgaWYgKGlzUmVhZE9ubHkgJiYgaGlkZUVtcHR5RmllbGRzICYmICF0eXBlRGVmaW5pdGlvblNlbGVjdGVkKGZvcm1WYWx1ZXMpKVxuICAgIHJldHVybiBudWxsO1xuXG4gIHJldHVybiAoXG4gICAgPENvbGxhcHNpYmxlUGFuZWxcbiAgICAgIGhlYWRlcj17XG4gICAgICAgIDxDb2xsYXBzaWJsZVBhbmVsLkhlYWRlciBpc0NvbmRlbnNlZD17aXNDb25kZW5zZWR9PlxuICAgICAgICAgIDxGb3JtYXR0ZWRNZXNzYWdlIHsuLi5tZXNzYWdlcy50aXRsZX0gLz5cbiAgICAgICAgPC9Db2xsYXBzaWJsZVBhbmVsLkhlYWRlcj5cbiAgICAgIH1cbiAgICAgIGhlYWRlckNvbnRyb2xzPXtcbiAgICAgICAgdHlwZURlZmluaXRpb25zLmxlbmd0aCA+IDAgJiYgKFxuICAgICAgICAgIDxkaXZcbiAgICAgICAgICAgIGNzcz17Y3NzYFxuICAgICAgICAgICAgICBtaW4td2lkdGg6ICR7ZGVzaWduVG9rZW5zLmNvbnN0cmFpbnQxMX07XG4gICAgICAgICAgICBgfVxuICAgICAgICAgID5cbiAgICAgICAgICAgIDxTZWxlY3RJbnB1dFxuICAgICAgICAgICAgICBpc0NsZWFyYWJsZVxuICAgICAgICAgICAgICBkYXRhLXRlc3RpZD1cImN1c3RvbS10eXBlLXNlbGVjdFwiXG4gICAgICAgICAgICAgIG5hbWU9e2Ake0ZJRUxEX05BTUV9LnR5cGUub2JqLmtleWB9XG4gICAgICAgICAgICAgIG9wdGlvbnM9e21hcFR5cGVEZWZpbml0aW9uc1RvT3B0aW9ucyhcbiAgICAgICAgICAgICAgICB0eXBlRGVmaW5pdGlvbnMsXG4gICAgICAgICAgICAgICAgbGFuZ3VhZ2UsXG4gICAgICAgICAgICAgICAgbGFuZ3VhZ2VzLFxuICAgICAgICAgICAgICAgIGZvcm1WYWx1ZXNbRklFTERfTkFNRV0/LnR5cGU/LmlkXG4gICAgICAgICAgICAgICl9XG4gICAgICAgICAgICAgIHZhbHVlPXtmb3JtVmFsdWVzW0ZJRUxEX05BTUVdPy50eXBlPy5vYmo/LmtleX1cbiAgICAgICAgICAgICAgb25DaGFuZ2U9e2hhbmRsZVR5cGVEZWZpbml0aW9uU2VsZWN0fVxuICAgICAgICAgICAgICBwbGFjZWhvbGRlcj17Zm9ybWF0TWVzc2FnZShtZXNzYWdlcy50eXBlc1BsYWNlaG9sZGVyKX1cbiAgICAgICAgICAgICAgaXNSZWFkT25seT17aXNSZWFkT25seX1cbiAgICAgICAgICAgIC8+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIClcbiAgICAgIH1cbiAgICAgIGhlYWRlckNvbnRyb2xzQWxpZ25tZW50PVwicmlnaHRcIlxuICAgID5cbiAgICAgIDxDdXN0b21GaWVsZHNJbnB1dFdyYXBwZXJcbiAgICAgICAgdHlwZURlZmluaXRpb25zPXt0eXBlRGVmaW5pdGlvbnN9XG4gICAgICAgIGlzUmVhZE9ubHk9e2lzUmVhZE9ubHl9XG4gICAgICAgIGhpZGVFbXB0eUZpZWxkcz17aGlkZUVtcHR5RmllbGRzfVxuICAgICAgLz5cbiAgICA8L0NvbGxhcHNpYmxlUGFuZWw+XG4gICk7XG59O1xuXG5DdXN0b21UeXBlU3ViZm9ybS5kaXNwbGF5TmFtZSA9ICdDdXN0b21UeXBlU3ViZm9ybSc7XG5DdXN0b21UeXBlU3ViZm9ybS5wcm9wVHlwZXMgPSB7XG4gIHR5cGVEZWZpbml0aW9uczogUHJvcFR5cGVzLmFycmF5LmlzUmVxdWlyZWQsXG4gIGlzUmVhZE9ubHk6IFByb3BUeXBlcy5ib29sLFxuICBpc0NvbmRlbnNlZDogUHJvcFR5cGVzLmJvb2wsXG4gIGhpZGVFbXB0eUZpZWxkczogUHJvcFR5cGVzLmJvb2wsXG59O1xuXG5leHBvcnQgZGVmYXVsdCBDdXN0b21UeXBlU3ViZm9ybTtcbiJdfQ== */"),
       children: jsx(SelectInput, {
         isClearable: true,
         "data-testid": "custom-type-select",
         name: "".concat(FIELD_NAME, ".type.obj.key"),
-        options: mapTypeDefinitionsToOptions(typeDefinitions, language, languages, (_formValues$FIELD_NAM = formValues[FIELD_NAME]) === null || _formValues$FIELD_NAM === void 0 || (_formValues$FIELD_NAM = _formValues$FIELD_NAM.type) === null || _formValues$FIELD_NAM === void 0 ? void 0 : _formValues$FIELD_NAM.id),
-        value: (_formValues$FIELD_NAM2 = formValues[FIELD_NAME]) === null || _formValues$FIELD_NAM2 === void 0 || (_formValues$FIELD_NAM2 = _formValues$FIELD_NAM2.type) === null || _formValues$FIELD_NAM2 === void 0 || (_formValues$FIELD_NAM2 = _formValues$FIELD_NAM2.obj) === null || _formValues$FIELD_NAM2 === void 0 ? void 0 : _formValues$FIELD_NAM2.key,
+        options: mapTypeDefinitionsToOptions(typeDefinitions, language, languages, (_formValues$FIELD_NAM3 = formValues[FIELD_NAME]) === null || _formValues$FIELD_NAM3 === void 0 || (_formValues$FIELD_NAM3 = _formValues$FIELD_NAM3.type) === null || _formValues$FIELD_NAM3 === void 0 ? void 0 : _formValues$FIELD_NAM3.id),
+        value: (_formValues$FIELD_NAM4 = formValues[FIELD_NAME]) === null || _formValues$FIELD_NAM4 === void 0 || (_formValues$FIELD_NAM4 = _formValues$FIELD_NAM4.type) === null || _formValues$FIELD_NAM4 === void 0 || (_formValues$FIELD_NAM4 = _formValues$FIELD_NAM4.obj) === null || _formValues$FIELD_NAM4 === void 0 ? void 0 : _formValues$FIELD_NAM4.key,
         onChange: handleTypeDefinitionSelect,
         placeholder: formatMessage(messages.typesPlaceholder),
         isReadOnly: isReadOnly
@@ -12965,7 +13036,8 @@ const CustomTypeSubform = _ref => {
     headerControlsAlignment: "right",
     children: jsx(CustomFieldsInputWrapper, {
       typeDefinitions: typeDefinitions,
-      isReadOnly: isReadOnly
+      isReadOnly: isReadOnly,
+      hideEmptyFields: hideEmptyFields
     })
   });
 };
@@ -13061,7 +13133,8 @@ const createGraphQlDocFromFormState = formState => {
 const CustomFieldsFormField = _ref => {
   let resources = _ref.resources,
     isReadOnly = _ref.isReadOnly,
-    isCondensed = _ref.isCondensed;
+    isCondensed = _ref.isCondensed,
+    hideEmptyFields = _ref.hideEmptyFields;
   const projectKey = useApplicationContext(applicationContext => applicationContext.project.key);
   return jsx(CustomFieldTypeDefinitionsConnector$1, {
     resources: resources,
@@ -13078,7 +13151,8 @@ const CustomFieldsFormField = _ref => {
       return jsx(CustomTypeSubform, {
         typeDefinitions: typeDefinitions,
         isReadOnly: isReadOnly,
-        isCondensed: isCondensed
+        isCondensed: isCondensed,
+        hideEmptyFields: hideEmptyFields
       });
     }
   });
@@ -13088,4 +13162,4 @@ CustomFieldsFormField.createGraphQlDocFromFormState = createGraphQlDocFromFormSt
 
 var CategorySearchPickerOptionFragment = { kind: "Document", definitions: [{ kind: "FragmentDefinition", name: { kind: "Name", value: "CategorySearchPickerOptionFragment" }, typeCondition: { kind: "NamedType", name: { kind: "Name", value: "CategorySearch" } }, directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "externalId" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "nameAllLocales" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "locale" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "slugAllLocales" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "locale" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "parent" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "nameAllLocales" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "locale" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }] } }] } }, { kind: "Field", name: { kind: "Name", value: "ancestors" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "nameAllLocales" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "locale" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }] } }] } }] } }], loc: { start: 0, end: 685, source: { body: "query SearchCategoryReference($locale: Locale!, $text: String!) {\n  categories: categoryAutocomplete(locale: $locale, text: $text) {\n    results {\n      ...CategorySearchPickerOptionFragment\n    }\n  }\n}\n\nquery FetchCategoriesByIds($where: String!) {\n  categories(where: $where) {\n    results {\n      id\n      nameAllLocales {\n        locale\n        value\n      }\n    }\n  }\n}\n\nfragment CategorySearchPickerOptionFragment on CategorySearch {\n  id\n  externalId\n  nameAllLocales {\n    locale\n    value\n  }\n  slugAllLocales {\n    locale\n    value\n  }\n  parent {\n    nameAllLocales {\n      locale\n      value\n    }\n  }\n  ancestors {\n    nameAllLocales {\n      locale\n      value\n    }\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
 
-export { booleanField as BooleanField, Button, CartDiscountReferenceSearch, CategoryReferenceSearch, CategorySearchPickerOptionFragment, CenteredLoadingSpinner, ChannelPickerInput, CountriesPicker, customFieldDefinitionsConnector as CustomFieldDefinitionsConnector, CustomFieldTypeDefinitionsConnector$1 as CustomFieldTypeDefinitionsConnector, CustomFields, CustomFieldsErrorTextNotification, CustomFieldsFormField, CustomerGroupPickerInput, DefaultPageSizes, Divider, EMAIL_REGEX, FileInput, FormattedDateTime$1 as FormattedDateTime, LabelRange, MissingValueField, MultiValueSearchInput, numericFormatInput as NumericFormatInput, PRECISION_TYPES, pimIndexerProvider as PimIndexerProvider, ProductAttributeInput, ProductAttributes, ProductPickerInput, ProductSelectionsPicker as ProductSelectionPicker, RequestCache, RequiredIndicator, ScrollToFieldError, searchInput as SearchInput, SelectableFieldSearchInput, StoreSelectField, StoreSelectInput, ThrottledField, VALIDATOR_INTEGER, VALIDATOR_NUMERIC, VALIDATOR_REQUIRED, WithPimIndexer, allowedProperties, and, attributesMapToNameValuePairs, base64ToString, messages$8 as booleanMessages, buildSearchQuery, businessRoleConstants, messages$r as businessRoleMessages, businessRoleKeys as businessRoles, capitalizeFirst, clone, coerceToInteger, computedProperties, convertApolloNetworkStatusToLoadingState, convertApolloQueryDataToConnectorData, convertProductSelectionFromGraphQl, convertRatioToPercentage, createGraphQlUpdateActions, createNextSortDefinition, createReducer, createResourceReducer, handlers$2 as customFieldDefinitionsMockHanders, customFields as customFieldsTransformer, dateTransformer$1 as dateTransformer, exact, exists, extractErrorFromGraphQlResponse, filterCustomTypeUpdateActionValues, filterDataAttributes, filterEmptyValues, formatCustomField, formatCustomerAddress, formatCustomerName, formatDateRangeValue, formatDateTime$1 as formatDateTime, formatDiscount, formatMoney$1 as formatMoney, formatMoneyRangeValue, formatMoneyValue, formatPercentage, formatAttribute as formatProductAttribute, getAncestors, getAttributeValueByType, getAttributeValueType, getBulkNotification, getCategoryLevel, getCountsFromBulkSummary, getDiscountValue, getDisplayName, getFractionedAmount, getIndexesOfInvalidValues, getMinimumPricesByCurrencyCode, getNetUnitPrice, getPathName, getPrefixSearchBounds, getPriceChannelName, getReferenceTypeId, getSelectedPrice, getTimeZoneId, getTimeZoneLabel, getTypeNameOfType, graphqlCategoryLevelTransformer, dateTransformer as graphqlDateTransformer, missingLocaleTransformer as graphqlMissingLocaleTransformer, missingTransformer as graphqlMissingTransformer, numberTransformer as graphqlNumberTransformer, graphqlQueryBuilder, referenceTransformer as graphqlReferenceTransformer, textTransformer as graphqlTextTransformer, hasInvalidInputError, hasSemanticError, injectCustomerGroupsPlatformLimits, injectCustomersPlatformLimits, injectDataTablePaginationState, injectModalState$1 as injectModalState, injectNotifications, injectPimIndexer, injectShippingMethodsPlatformLimits, injectStorage, injectTaxCategoriesPlatformLimits, injectModalState as injectToggleState, injectZonesPlatformLimits, isEmptyFilter as isEmpty, isEmptyValue, isUUID, isValidISODate, isValidISODateTime, isValidISOTime, keepDisplayName, mapStoresToOptions, mapTimeZonesToOptions, minusify, messages$7 as missingValueMessages, nameValuePairsToMap, normalizeProductSettings, not, omitDeep, omitSetsOfSets, or, commonPickerMessages as pickerMessages, handlers as platformLimitsMockHandlers, handlers$3 as productSelectionsFetcherMockHandler, handlers$4 as productSelectionsTotalFetcherMockHandler, range, reorderArrayItems, resolveStatusType, safelyAddFallback, sanitize, searchCategories, messages$F as searchInputMessages, setDisplayName, setToArray, shallowEqual, shouldUpdateAttributeInput, slugify, sortDataByIdsArray, sortRequiresLanguage, splitVariantAttributesByConstraint, handlers$5 as storesListConnectorMockHandlers, stringToBase64, swapArrayItems, transformAllToProperNounCase, transformCustomFieldsRawToCustomFields, transformLocalizedFieldsForCategory, truncate, unique, uniqueObjects, useCachedCategoryOptions, useCustomerGroupsPlatformLimits, useCustomersPlatformLimits, useDebouncedPromiseCallback, useFormatLocalizedFieldToString, useLocalizedKeyFallback, usePendingRequests, usePersistedTableConfiguration, usePimIndexer, usePrevious, useProductSelectionsFetcher, useProductSelectionsTotalFetcher, useRoleNotificationEffect, useShippingMethodsLimits as useShippingMethodsPlatformLimits, useStorage, useStoreKeysInDataFences, useStoresListFetcher, useTaxCategoriesLimits as useTaxCategoriesPlatformLimits, useTotalNumberOfStoresFetcher, handlers$1 as useTotalNumberOfStoresFetcherHandlers, validateFilter$2 as validateCustomField, validations as validateCustomFields, validateFilter$1 as validateDate, validateMultiOptionEnum, validateFilter as validateNumber, validateSingleOptionEnum, validateText, validatedInput, messages$K as validationMessages, withPendingRequests, withProps, withRedirectTo, withoutEmptyErrorsByField, wrapDisplayName };
+export { booleanField as BooleanField, Button, CartDiscountReferenceSearch, CategoryReferenceSearch, CategorySearchPickerOptionFragment, CenteredLoadingSpinner, ChannelPickerInput, CountriesPicker, customFieldDefinitionsConnector as CustomFieldDefinitionsConnector, CustomFieldTypeDefinitionsConnector$1 as CustomFieldTypeDefinitionsConnector, CustomFields, CustomFieldsErrorTextNotification, CustomFieldsFormField, CustomerGroupPickerInput, DefaultPageSizes, Divider, EMAIL_REGEX, FileInput, FormattedDateTime$1 as FormattedDateTime, LabelRange, MissingValueField, MultiValueSearchInput, numericFormatInput as NumericFormatInput, PRECISION_TYPES, pimIndexerProvider as PimIndexerProvider, ProductAttributeInput, ProductAttributes, ProductPickerInput, ProductSelectionsPicker as ProductSelectionPicker, RequestCache, RequiredIndicator, ScrollToFieldError, searchInput as SearchInput, SelectableFieldSearchInput, StoreSelectField, StoreSelectInput, ThrottledField, VALIDATOR_INTEGER, VALIDATOR_NUMERIC, VALIDATOR_REQUIRED, WithPimIndexer, allowedProperties, and, attributesMapToNameValuePairs, base64ToString, messages$8 as booleanMessages, buildSearchQuery, businessRoleConstants, messages$r as businessRoleMessages, businessRoleKeys as businessRoles, capitalizeFirst, clone, coerceToInteger, computedProperties, convertApolloNetworkStatusToLoadingState, convertApolloQueryDataToConnectorData, convertProductSelectionFromGraphQl, convertRatioToPercentage, createGraphQlUpdateActions, createNextSortDefinition, createReducer, createResourceReducer, handlers$2 as customFieldDefinitionsMockHanders, customFields as customFieldsTransformer, dateTransformer$1 as dateTransformer, exact, exists, extractErrorFromGraphQlResponse, filterCustomTypeUpdateActionValues, filterDataAttributes, filterEmptyValues, formatCustomField, formatCustomerAddress, formatCustomerName, formatDateRangeValue, formatDateTime$1 as formatDateTime, formatDiscount, formatMoney$2 as formatMoney, formatMoneyRangeValue, formatMoneyValue, formatPercentage, formatAttribute as formatProductAttribute, getAncestors, getAttributeValueByType, getAttributeValueType, getBulkNotification, getCategoryLevel, getCountsFromBulkSummary, getDiscountValue, getDisplayName, getFractionedAmount, getIndexesOfInvalidValues, getMinimumPricesByCurrencyCode, getNetUnitPrice, getPathName, getPrefixSearchBounds, getPriceChannelName, getReferenceTypeId, getSelectedPrice, getTimeZoneId, getTimeZoneLabel, getTypeNameOfType, graphqlCategoryLevelTransformer, dateTransformer as graphqlDateTransformer, missingLocaleTransformer as graphqlMissingLocaleTransformer, missingTransformer as graphqlMissingTransformer, numberTransformer as graphqlNumberTransformer, graphqlQueryBuilder, referenceTransformer as graphqlReferenceTransformer, textTransformer as graphqlTextTransformer, hasInvalidInputError, hasSemanticError, injectCustomerGroupsPlatformLimits, injectCustomersPlatformLimits, injectDataTablePaginationState, injectModalState$1 as injectModalState, injectNotifications, injectPimIndexer, injectShippingMethodsPlatformLimits, injectStorage, injectTaxCategoriesPlatformLimits, injectModalState as injectToggleState, injectZonesPlatformLimits, isEmptyFilter as isEmpty, isEmptyValue, isUUID, isValidISODate, isValidISODateTime, isValidISOTime, keepDisplayName, mapStoresToOptions, mapTimeZonesToOptions, minusify, messages$7 as missingValueMessages, nameValuePairsToMap, normalizeProductSettings, not, omitDeep, omitSetsOfSets, or, commonPickerMessages as pickerMessages, handlers as platformLimitsMockHandlers, handlers$3 as productSelectionsFetcherMockHandler, handlers$4 as productSelectionsTotalFetcherMockHandler, range, reorderArrayItems, resolveStatusType, safelyAddFallback, sanitize, searchCategories, messages$F as searchInputMessages, setDisplayName, setToArray, shallowEqual, shouldUpdateAttributeInput, slugify, sortDataByIdsArray, sortRequiresLanguage, splitVariantAttributesByConstraint, handlers$5 as storesListConnectorMockHandlers, stringToBase64, swapArrayItems, transformAllToProperNounCase, transformCustomFieldsRawToCustomFields, transformLocalizedFieldsForCategory, truncate, unique, uniqueObjects, useCachedCategoryOptions, useCustomerGroupsPlatformLimits, useCustomersPlatformLimits, useDebouncedPromiseCallback, useFormatLocalizedFieldToString, useLocalizedKeyFallback, usePendingRequests, usePersistedTableConfiguration, usePimIndexer, usePrevious, useProductSelectionsFetcher, useProductSelectionsTotalFetcher, useRoleNotificationEffect, useShippingMethodsLimits as useShippingMethodsPlatformLimits, useStorage, useStoreKeysInDataFences, useStoresListFetcher, useTaxCategoriesLimits as useTaxCategoriesPlatformLimits, useTotalNumberOfStoresFetcher, handlers$1 as useTotalNumberOfStoresFetcherHandlers, validateFilter$2 as validateCustomField, validations as validateCustomFields, validateFilter$1 as validateDate, validateMultiOptionEnum, validateFilter as validateNumber, validateSingleOptionEnum, validateText, validatedInput, messages$K as validationMessages, withPendingRequests, withProps, withRedirectTo, withoutEmptyErrorsByField, wrapDisplayName };

package/dist/styles.css

@@ -50,90 +50,6 @@
   border-bottom-left-radius: var(--border-radius-for-input);
   border-bottom-right-radius: var(--border-radius-for-input);
 }
-/*  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 search-input.module.css  */
 
 .search-input-module__block___1uM-y {
@@ -224,6 +140,16 @@
   flex-shrink: 1;
   margin-left: var(--spacing-s);
 }
+/*  imported from required-indicator.module.css  */
+
+.required-indicator-module__colored____YUFm {
+  color: var(--color-warning);
+}
+
+.required-indicator-module__indicatorAsterisk___3lEdX {
+  font-style: normal;
+  margin-left: 2px;
+}
 /*  imported from selectable-field-search-input.module.css  */
 
 .selectable-field-search-input-module__container___z2ltR {
@@ -240,16 +166,6 @@
   margin-top: 2px;
   position: absolute;
 }
-/*  imported from required-indicator.module.css  */
-
-.required-indicator-module__colored____YUFm {
-  color: var(--color-warning);
-}
-
-.required-indicator-module__indicatorAsterisk___3lEdX {
-  font-style: normal;
-  margin-left: 2px;
-}
 /*  imported from validated-input.module.css  */
 
 .validated-input-module__invalid___380EL {
@@ -261,6 +177,90 @@
 .validated-input-module__container___3L2KB {
   display: inline;
 }
+/*  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 */
@@ -500,6 +500,15 @@
   width: 1px;
   height: 1px;
 }
+/*  imported from centered-loading-spinner.module.css  */
+
+.centered-loading-spinner-module__loading-container___3_9-h {
+  height: 100%;
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  justify-content: center;
+}
 /*  imported from divider.module.css  */
 
 .divider-module__divider___4-vdy {
@@ -518,15 +527,6 @@
 .divider-module__divider-dashed___2Em8A {
   border-style: dashed;
 }
-/*  imported from centered-loading-spinner.module.css  */
-
-.centered-loading-spinner-module__loading-container___3_9-h {
-  height: 100%;
-  display: flex;
-  flex-grow: 1;
-  align-items: center;
-  justify-content: center;
-}
 /*  imported from reference-search.module.css  */
 
 .reference-search-module__container___3-iK3 {