@integration-app/react 2.0.3-beta.0 → 2.0.3-beta.2

package/dist/cjs/components/DataBuilder/Nested/ArrayItems.cjs

@@ -0,0 +1,82 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var index$1 = require('../../DataBuilderUI/index.cjs');
+var index$2 = require('../../SvgIcon/index.cjs');
+var fieldContext = require('../field-context.cjs');
+var FieldDelete = require('../FieldDelete.cjs');
+var index$3 = require('../FieldValue/index.cjs');
+var Nested = require('../Nested.cjs');
+var index = require('./FieldControlPanel/index.cjs');
+
+function DataBuilderFormNestedArrayItems({
+  field,
+  onChange
+}) {
+  const allowToAdd = !field.schema?.maxItems || (field?.subFields ?? [])?.length < field.schema.maxItems;
+  function handleAddItem() {
+    onChange([...field.value ?? [], null]);
+  }
+  if (Array.isArray(field.value)) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ArrayItems, { field, onChange }),
+      allowToAdd && /* @__PURE__ */ jsxRuntime.jsx(index.DataBuilderFieldControlPanel, { field, onAdd: handleAddItem })
+    ] });
+  } else if (field.value) {
+    return null;
+  } else {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: allowToAdd && /* @__PURE__ */ jsxRuntime.jsx(index.DataBuilderFieldControlPanel, { field, onAdd: handleAddItem }) });
+  }
+}
+function ArrayItems({ field, onChange }) {
+  function handleItemChange(index, value) {
+    const newValue = [...field.value || []];
+    newValue[index] = value;
+    onChange(newValue);
+  }
+  function handleDeleteItem(index) {
+    const newValue = [...field.value || []];
+    newValue.splice(index, 1);
+    onChange(newValue.length > 0 ? newValue : void 0);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: field.subFields.map((itemField, index) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      DataComposerFieldArrayItem,
+      {
+        field: itemField,
+        onChange: (value) => handleItemChange(index, value),
+        onDelete: () => handleDeleteItem(index)
+      },
+      index
+    );
+  }) });
+}
+function DataComposerFieldArrayItem({
+  field,
+  onChange,
+  onDelete = void 0
+}) {
+  function handleChange(value) {
+    onChange?.(value);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(fieldContext.DataBuilderFieldProvider, { field, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(index$1.NestedLevel, { level: field.level, children: /* @__PURE__ */ jsxRuntime.jsxs(index$1.Row, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(index$1.Cell.Icon, { type: index$2.SvgIconType.Array }),
+      /* @__PURE__ */ jsxRuntime.jsx(index$1.Cell.Combobox, { grow: true, children: /* @__PURE__ */ jsxRuntime.jsx(index$3.default, { field, onChange: handleChange }) }),
+      onDelete && /* @__PURE__ */ jsxRuntime.jsx(FieldDelete.FieldDelete, { onClick: onDelete })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Nested.default, { field, onChange: handleChange })
+  ] });
+}
+
+exports.default = DataBuilderFormNestedArrayItems;

package/dist/cjs/components/DataBuilder/Nested/FieldControlPanel/AddingFieldSelector.cjs

@@ -0,0 +1,54 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var sdk = require('@integration-app/sdk');
+var index$1 = require('../../../DataBuilderUI/index.cjs');
+var index$2 = require('../../../ComboBox/index.cjs');
+var index = require('../../../SvgIcon/index.cjs');
+var TagPlaceholder = require('../../../Tag/TagPlaceholder.cjs');
+var dataField = require('../../data-field.cjs');
+
+function AddingFieldSelector({
+  parentField,
+  fieldsToAdd,
+  onChange,
+  onClose
+}) {
+  const allowAdditionalProperties = dataField.isObjectAllowedAdditionalProperties(parentField);
+  const options = fieldsToAdd.map((f) => ({
+    value: f.key,
+    label: sdk.getFullNameForLocator(parentField.schema, f.key) || dataField.fieldLabel(f)
+  }));
+  allowAdditionalProperties && options.unshift({
+    value: "",
+    label: "Add custom field",
+    iconType: index.SvgIconType.Add
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(index$1.Row, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(index$1.Cell.Combobox, { width: "14rem", children: /* @__PURE__ */ jsxRuntime.jsx(
+      index$2.ComboBox,
+      {
+        value: void 0,
+        options,
+        schema: {
+          type: "string",
+          allowCustom: allowAdditionalProperties
+        },
+        onChange,
+        onClose,
+        autoOpen: true
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(index$1.Cell.Combobox, { grow: true, disabled: true, children: /* @__PURE__ */ jsxRuntime.jsx(TagPlaceholder.TagPlaceholder, { children: "Select value" }) })
+  ] });
+}
+
+exports.AddingFieldSelector = AddingFieldSelector;

package/dist/cjs/components/DataBuilder/Nested/FieldControlPanel/ControlPanel.cjs

@@ -0,0 +1,110 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var index$2 = require('../../../Truncate/index.cjs');
+var dataField = require('../../data-field.cjs');
+var useEventStopPropagation = require('../../../../hooks/useEventStopPropagation.cjs');
+var index$1 = require('../../../SvgIcon/index.cjs');
+var fieldContext = require('../../field-context.cjs');
+var hooks = require('../../hooks.cjs');
+var AddingFieldSelector = require('./AddingFieldSelector.cjs');
+require('../../../DataBuilderUI/index.cjs');
+var index = require('../../../DataBuilderUI/FieldControlPanel/index.cjs');
+
+function ControlPanel({
+  field,
+  additionalFields = [],
+  addFieldLabel = "Add Field",
+  onAdd
+}) {
+  const fieldIsVisible = dataField.isFieldVisible(field);
+  const [showFieldSelector, setShowFieldSelector] = React.useState(false);
+  const fieldCanUseVarFromVariables = hooks.useDataBuilderFieldCanUseVarFromVariables();
+  const showAddFieldButtonGroup = dataField.isObjectAllowedAdditionalProperties(field) || additionalFields.length > 0;
+  const showUseFromVariablesButtonGroup = fieldIsVisible && fieldCanUseVarFromVariables;
+  if (showFieldSelector) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      AddingFieldSelector.AddingFieldSelector,
+      {
+        parentField: field,
+        fieldsToAdd: additionalFields,
+        onChange: onAdd,
+        onClose: () => setShowFieldSelector(false)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    showAddFieldButtonGroup && /* @__PURE__ */ jsxRuntime.jsx(
+      GroupAddField,
+      {
+        additionalFields,
+        addFieldLabel,
+        onAdd,
+        onShowFieldSelector: () => setShowFieldSelector(true)
+      }
+    ),
+    showUseFromVariablesButtonGroup && /* @__PURE__ */ jsxRuntime.jsx(GroupUseFromVariables, { labelOr: showAddFieldButtonGroup })
+  ] });
+}
+function GroupAddField({
+  additionalFields = [],
+  addFieldLabel = "Add Field",
+  onAdd,
+  onShowFieldSelector
+}) {
+  const handleAddNewFieldClick = useEventStopPropagation.default(() => {
+    if (additionalFields.length > 0) {
+      onShowFieldSelector();
+    } else {
+      onAdd(dataField.DEFAULT_FIELD_KEY);
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(index.FieldControlPanel.ButtonGroup, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    index.FieldControlPanel.Button,
+    {
+      onClick: handleAddNewFieldClick,
+      "aria-label": addFieldLabel,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(index$1.SvgIcon, { type: index$1.SvgIconType.Add }),
+        /* @__PURE__ */ jsxRuntime.jsx(index$2.Truncate, { mode: "middle", children: addFieldLabel })
+      ]
+    }
+  ) });
+}
+function GroupUseFromVariables({ labelOr }) {
+  const { setAutoOpen, localSchema } = fieldContext.default();
+  const localSchemaType = localSchema?.type;
+  function handleUseVarsFromVariables() {
+    setAutoOpen(true);
+  }
+  if (!["array", "object"].includes(localSchemaType)) {
+    return null;
+  }
+  const title = getButtonUseFromVariablesTitle(localSchemaType);
+  const Wrapper = labelOr ? index.FieldControlPanel : React.Fragment;
+  return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper, { noWrap: true, children: [
+    labelOr && /* @__PURE__ */ jsxRuntime.jsx(index.FieldControlPanel.Text, { children: "or" }),
+    /* @__PURE__ */ jsxRuntime.jsx(index.FieldControlPanel.ButtonGroup, { children: /* @__PURE__ */ jsxRuntime.jsx(index.FieldControlPanel.Button, { onClick: handleUseVarsFromVariables, children: /* @__PURE__ */ jsxRuntime.jsx(index$2.Truncate, { mode: "end", children: title }) }) })
+  ] });
+}
+function getButtonUseFromVariablesTitle(schemaType) {
+  switch (schemaType) {
+    case "array":
+      return "Use list from variables";
+    case "object":
+      return "Use object from variables";
+    default:
+      return "Use from variables";
+  }
+}
+
+exports.ControlPanel = ControlPanel;

package/dist/cjs/components/DataBuilder/Nested/FieldControlPanel/ControlPanelForNonObjectRootField.cjs

@@ -0,0 +1,29 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var useEventStopPropagation = require('../../../../hooks/useEventStopPropagation.cjs');
+var index$1 = require('../../../SvgIcon/index.cjs');
+var dataField = require('../../data-field.cjs');
+require('../../../DataBuilderUI/index.cjs');
+var index = require('../../../DataBuilderUI/FieldControlPanel/index.cjs');
+
+function ControlPanelForNonObjectRootField({
+  addFieldLabel = "Add Field",
+  onAdd
+}) {
+  const handleOnClick = useEventStopPropagation.default(() => onAdd(dataField.DEFAULT_FIELD_KEY));
+  return /* @__PURE__ */ jsxRuntime.jsx(index.FieldControlPanel.ButtonGroup, { children: /* @__PURE__ */ jsxRuntime.jsxs(index.FieldControlPanel.Button, { onClick: handleOnClick, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(index$1.SvgIcon, { type: index$1.SvgIconType.Add }),
+    addFieldLabel
+  ] }) });
+}
+
+exports.ControlPanelForNonObjectRootField = ControlPanelForNonObjectRootField;

package/dist/cjs/components/DataBuilder/Nested/FieldControlPanel/index.cjs

@@ -0,0 +1,78 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var index = require('../../../DataBuilderUI/index.cjs');
+var dataField = require('../../data-field.cjs');
+var fieldContext = require('../../field-context.cjs');
+var ControlPanelForNonObjectRootField = require('./ControlPanelForNonObjectRootField.cjs');
+var ControlPanel = require('./ControlPanel.cjs');
+var index$1 = require('../../../DataBuilderUI/FieldControlPanel/index.cjs');
+
+function DataBuilderFieldControlPanel({
+  field,
+  onAdd,
+  addFieldLabel,
+  additionalFields = []
+}) {
+  const showAddFieldButton = dataField.isObjectAllowedAdditionalProperties(field) || additionalFields.length !== 0;
+  const fieldIsVisible = dataField.isFieldVisible(field);
+  let level = field.level;
+  const computedAddFieldLabel = useAddFieldLabel(addFieldLabel);
+  if (level < 0 || !showAddFieldButton) {
+    return null;
+  }
+  if (!fieldIsVisible) {
+    level--;
+  }
+  if (field?.schema?.type !== "object" && level <= 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(FieldControlPanelWrapper, { field, children: /* @__PURE__ */ jsxRuntime.jsx(
+      ControlPanelForNonObjectRootField.ControlPanelForNonObjectRootField,
+      {
+        addFieldLabel: computedAddFieldLabel,
+        onAdd
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(FieldControlPanelWrapper, { field, children: /* @__PURE__ */ jsxRuntime.jsx(
+    ControlPanel.ControlPanel,
+    {
+      field,
+      addFieldLabel: computedAddFieldLabel,
+      onAdd,
+      additionalFields
+    }
+  ) });
+}
+function FieldControlPanelWrapper({
+  field,
+  children
+}) {
+  const fieldIsVisible = dataField.isFieldVisible(field);
+  const level = fieldIsVisible ? field.level + 1 : field.level;
+  return /* @__PURE__ */ jsxRuntime.jsx(index.NestedLevel, { level, children: /* @__PURE__ */ jsxRuntime.jsx(index$1.FieldControlPanel, { compact: fieldIsVisible, children }) });
+}
+function useAddFieldLabel(labelFromProps) {
+  const { field, localSchema } = fieldContext.default();
+  if (labelFromProps) {
+    return labelFromProps;
+  }
+  const resultArray = ["Add"];
+  const label = dataField.fieldLabel(field);
+  if (label) {
+    resultArray.push(label);
+  }
+  resultArray.push(localSchema?.type === "object" ? "Field" : "Item");
+  return resultArray.join(" ");
+}
+
+exports.ControlPanelForNonObjectRootField = ControlPanelForNonObjectRootField.ControlPanelForNonObjectRootField;
+exports.ControlPanel = ControlPanel.ControlPanel;
+exports.DataBuilderFieldControlPanel = DataBuilderFieldControlPanel;

package/dist/cjs/components/DataBuilder/Nested/FieldListWrapper/FieldListWrapper.module.css.cjs

@@ -0,0 +1,18 @@
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styleInject = require('style-inject');
+
+var css_248z = ".FieldListWrapper-module_container__gog9U {\n\n  padding-bottom: 0.25rem;\n\n  padding-top: 0.75rem;\n\n  cursor: pointer\n}\n.FieldListWrapper-module_container__collapsed__9x5Po {\n\n  margin-top: -2.5rem;\n\n  padding-top: 2.5rem;\n\n  position: relative;\n\n  z-index: 10;\n\n  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));\n\n  --tw-gradient-from: transparent var(--tw-gradient-from-position);\n\n  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);\n\n  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n\n  --tw-gradient-to: #fff var(--tw-gradient-to-position);\n\n  --tw-gradient-stops: var(--tw-gradient-from),\n    var(--tw-gradient-to, transparent) 40%\n}\n.FieldListWrapper-module_button__fkFJa {\n\n  padding-left: 0px;\n\n  padding-right: 0px;\n\n  padding-top: 0.125rem;\n\n  padding-bottom: 0.125rem;\n\n  border-bottom-width: 1px;\n\n  border-color: transparent;\n\n  display: flex;\n\n  flex-direction: row;\n\n  align-items: center;\n\n  gap: 0.25rem;\n\n  --tw-text-opacity: 1;\n\n  color: rgb(13 121 194 / var(--tw-text-opacity))\n}\n.FieldListWrapper-module_button__fkFJa svg {\n\n  height: 1rem;\n\n  width: 1rem\n}\n.FieldListWrapper-module_button__fkFJa:hover,\n.FieldListWrapper-module_container__gog9U:hover button {\n\n  border-style: dashed;\n\n  --tw-border-opacity: 1;\n\n  border-color: rgb(13 121 194 / var(--tw-border-opacity))\n}\n";
+var classes = {"container":"FieldListWrapper-module_container__gog9U","container__collapsed":"FieldListWrapper-module_container__collapsed__9x5Po","button":"FieldListWrapper-module_button__fkFJa"};
+styleInject(css_248z);
+
+exports.default = classes;

package/dist/cjs/components/DataBuilder/Nested/FieldListWrapper/index.cjs

@@ -0,0 +1,47 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var FieldListWrapper_module = require('./FieldListWrapper.module.css.cjs');
+var index = require('../../../SvgIcon/index.cjs');
+
+function FieldListWrapper({
+  children,
+  onClick,
+  fieldsToShow,
+  collapsed
+}) {
+  const buttonTitle = collapsed ? `Show ${fieldsToShow} more fields` : "Collapse fields";
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: clsx(
+          FieldListWrapper_module.default.container,
+          collapsed && FieldListWrapper_module.default.container__collapsed
+        ),
+        onClick,
+        children: /* @__PURE__ */ jsxRuntime.jsxs("button", { className: FieldListWrapper_module.default.button, children: [
+          buttonTitle,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            index.SvgIcon,
+            {
+              type: collapsed ? index.SvgIconType.ChevronDown : index.SvgIconType.ChevronUp
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+}
+
+exports.FieldListWrapper = FieldListWrapper;

package/dist/cjs/components/DataBuilder/Nested/NoSchema.cjs

@@ -0,0 +1,31 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var sdk = require('@integration-app/sdk');
+var ArrayItems = require('./ArrayItems.cjs');
+var ObjectFields = require('./ObjectFields.cjs');
+
+function DataBuilderFormNestedNoSchema({
+  field,
+  onChange
+}) {
+  if (Array.isArray(field.value)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ArrayItems.default, { field, onChange });
+  } else if (typeof field.value === "object" && field.value !== null && !sdk.isFormula(field.value)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ObjectFields.default, { field, onChange });
+  } else {
+    return null;
+  }
+}
+
+exports.default = DataBuilderFormNestedNoSchema;

package/dist/cjs/components/DataBuilder/Nested/ObjectFields.cjs

@@ -0,0 +1,207 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var dataField = require('../data-field.cjs');
+var Field = require('../Field.cjs');
+var index = require('./FieldControlPanel/index.cjs');
+var index$1 = require('./FieldListWrapper/index.cjs');
+var dataBuilderContext = require('../data-builder-context.cjs');
+
+function DataBuilderFormNestedObjectFields({
+  field,
+  onChange
+}) {
+  const { showNullValueFields, hideReadOnlyFields } = dataBuilderContext.default();
+  const [fieldToShowKeys, setFieldToShowKeys] = React.useState(
+    getInitialFieldsToShow(field)
+  );
+  function handleNewValue(newValue) {
+    if (Object.keys(newValue ?? {}).length > 0) {
+      onChange(newValue);
+    } else {
+      onChange(void 0);
+    }
+  }
+  function handlePropertyKeyChange(oldKey, newKey) {
+    const newProperties = {};
+    for (const [key, value] of Object.entries(field.value)) {
+      if (key == oldKey) {
+        newProperties[newKey] = value;
+      } else {
+        newProperties[key] = value;
+      }
+    }
+    handleNewValue(newProperties);
+    setFieldToShowKeys(
+      fieldToShowKeys.map((key) => key === oldKey ? newKey : key)
+    );
+  }
+  function handlePropertyValueChange(key, value) {
+    const newProperties = { ...field.value };
+    newProperties[key] = value;
+    handleNewValue(newProperties);
+  }
+  function handleAddProperty(fieldKey = dataField.DEFAULT_FIELD_KEY) {
+    handleNewValue({
+      ...field.value || {},
+      [fieldKey]: null
+    });
+    setFieldToShowKeys([...fieldToShowKeys, fieldKey]);
+  }
+  function handleDeleteProperty(propertyField) {
+    const newValue = { ...field.value || {} };
+    delete newValue[propertyField.key];
+    handleNewValue(newValue);
+    setFieldToShowKeys(fieldToShowKeys.filter((x) => x !== propertyField.key));
+  }
+  function isFieldHidden(field2) {
+    return hideReadOnlyFields && field2?.schema?.readOnly;
+  }
+  function isFieldDisplayedByDefault(field2) {
+    const isFieldRequired = field2?.isRequired;
+    const isFieldFilled = !!field2?.value || showNullValueFields && field2?.value === null;
+    const isFieldToShow = field2?.key !== void 0 ? fieldToShowKeys.includes(field2.key) : false;
+    return isFieldRequired || isFieldFilled || isFieldToShow;
+  }
+  function sortFieldByFieldToShowKey(fieldA, fieldB) {
+    const fieldAIndex = fieldToShowKeys.indexOf(fieldA.key);
+    const fieldBIndex = fieldToShowKeys.indexOf(fieldB.key);
+    if (fieldAIndex !== -1 && fieldBIndex !== -1) {
+      if (fieldAIndex === -1 || fieldAIndex < fieldBIndex) return -1;
+      if (fieldBIndex === -1 || fieldAIndex > fieldBIndex) return 1;
+    }
+    return 0;
+  }
+  const baseFields = (field?.subFields ?? []).filter((f) => !isFieldHidden(f)).filter(isFieldDisplayedByDefault).sort(sortFieldByFieldToShowKey);
+  const additionalFields = (field?.subFields ?? []).filter((f) => !isFieldHidden(f)).filter((x) => !isFieldDisplayedByDefault(x));
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    FieldListCollapsible,
+    {
+      field,
+      baseFields,
+      additionalFields,
+      onChange: handlePropertyValueChange,
+      onKeyChange: handlePropertyKeyChange,
+      onDelete: handleDeleteProperty,
+      onAdd: handleAddProperty
+    }
+  );
+}
+function getInitialFieldsToShow(field) {
+  const subFields = field?.subFields ?? [];
+  const getKeysFromSubFields = (subFields2) => {
+    return subFields2.map((x) => x.key).filter((x) => x !== void 0);
+  };
+  const requiredFieldKeys = getKeysFromSubFields(
+    subFields.filter((x) => x.isRequired)
+  );
+  const fieldsWithValueKeys = getKeysFromSubFields(
+    subFields.filter((x) => x.value !== void 0)
+  );
+  const amountFieldsToShow = requiredFieldKeys.length + fieldsWithValueKeys.length;
+  if (dataField.isRootField(field) && amountFieldsToShow === 0) {
+    return getKeysFromSubFields(subFields);
+  }
+  return [...requiredFieldKeys, ...fieldsWithValueKeys];
+}
+function FieldListCollapsible({
+  field,
+  baseFields,
+  additionalFields,
+  onChange,
+  onKeyChange,
+  onDelete,
+  onAdd
+}) {
+  const { collapsedDataBuilder, initialVisibleFieldCount } = dataBuilderContext.default();
+  const isRoot = field.level === 1;
+  const showCollapseWrapper = isRoot && collapsedDataBuilder && baseFields.length > initialVisibleFieldCount;
+  const [collapsed, setCollapsed] = React.useState(isRoot);
+  function toggleCollapsed() {
+    setCollapsed(!collapsed);
+  }
+  if (!isRoot || !showCollapseWrapper) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        BaseFieldsList,
+        {
+          baseFields,
+          onChange,
+          onKeyChange,
+          onAdd,
+          onDelete
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        index.DataBuilderFieldControlPanel,
+        {
+          field,
+          onAdd,
+          additionalFields
+        }
+      )
+    ] });
+  }
+  const renderedFields = collapsed ? baseFields.slice(0, initialVisibleFieldCount) : baseFields;
+  const fieldsToShow = baseFields.length - initialVisibleFieldCount;
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    index$1.FieldListWrapper,
+    {
+      collapsed,
+      onClick: toggleCollapsed,
+      fieldsToShow,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          BaseFieldsList,
+          {
+            baseFields: renderedFields,
+            onChange,
+            onKeyChange,
+            onAdd,
+            onDelete
+          }
+        ),
+        !collapsed && /* @__PURE__ */ jsxRuntime.jsx(
+          index.DataBuilderFieldControlPanel,
+          {
+            field,
+            onAdd,
+            additionalFields
+          }
+        )
+      ]
+    }
+  ) });
+}
+function BaseFieldsList({
+  baseFields,
+  onChange,
+  onKeyChange,
+  onDelete,
+  onAdd
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: baseFields.map((field, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+    Field.default,
+    {
+      field,
+      onChange: (value) => onChange(field.key, value),
+      onKeyChange: (newKey) => onKeyChange(field.key, newKey),
+      onDelete: () => onDelete(field),
+      onEnter: onAdd
+    },
+    idx
+  )) });
+}
+
+exports.default = DataBuilderFormNestedObjectFields;