Added the dropdown support inside section

packages/crayons-core/src/utils/draggable.ts

@@ -80,7 +80,7 @@ export class Draggable {
  bubbles: false,
  detail: {
  droppedElement: dragElement,
- dropToId: this.dragContainer.id, // Return the drop container ID
+ dragContainer: this.dragContainer, // Return the drop container ID
  },
  })
  );
@@ -99,18 +99,49 @@ export class Draggable {
 
  private isDropNotAllowed() {
  const inValidTypesForSection = [
- 'DROPDOWN',
  'DEPENDENT_FIELD',
  'MULTI_SELECT',
  'RELATIONSHIP',
  ];
  const dragId = this.dragContainer.id;
  const isSection = dragId.includes('sectionIdentifier-');
  const isFieldTypeNotAllowed = inValidTypesForSection.includes(
- dragElement.dataProvider.type
+ dragElement.dataProvider?.type
  );
+
+ // Check if the DROPDOWN is default field
+ const isDropdownDefaultField =
+ dragElement.dataProvider?.type === 'DROPDOWN' &&
+ !dragElement.dataProvider.custom;
+
+ const isNewField =
+ dragElement.dataProvider?.choices?.length > 0 &&
+ dragElement.dataProvider?.choices[0]?.value === '';
+
+ // Allow dropping if it's a new DROPDOWN field
+ const isAllowedNewDropdown =
+ dragElement.dataProvider?.type === 'DROPDOWN' && isNewField;
+
+ // Check if the DROPDOWN has field_options with hasSections
+ const hasSectionsInFieldOptions =
+ dragElement.dataProvider?.type === 'DROPDOWN' &&
+ dragElement.dataProvider?.field_options &&
+ dragElement.dataProvider?.field_options.has_sections;
+
+ // Check if the section already has the maximum number of fields
+ const isSectionFieldLimitExceeded =
+ this.dragContainer?.children?.length > 15;
+
+ // Check if the field is required
  const isFieldRequired = dragElement.dataProvider.required;
- return isSection && (isFieldTypeNotAllowed || isFieldRequired);
+ return (
+ isSection &&
+ (isFieldTypeNotAllowed ||
+ isFieldRequired ||
+ isSectionFieldLimitExceeded ||
+ (isDropdownDefaultField && !isAllowedNewDropdown) ||
+ hasSectionsInFieldOptions)
+ );
  }
 
  private onDragLeave = (e) => {
@@ -157,7 +188,7 @@ export class Draggable {
  bubbles: false,
  detail: {
  droppedElement: dragElement,
- dropToId: this.dragContainer.id, // Return the drop container ID
+ dragContainer: this.dragContainer, // Return the drop container ID
  },
  })
  );
@@ -198,7 +229,12 @@ export class Draggable {
  this.dropped = true;
  const sortContainerId = dragElement.parentElement.id;
  const newElement = this.placeholder || dragElement;
- const droppedIndex = [...this.dragContainer.children].indexOf(newElement);
+
+ // Get all children except the empty section
+ const relevantChildren = [...this.dragContainer.children].filter(
+ (child) => !child.classList.contains('empty-section')
+ );
+ const droppedIndex = [...relevantChildren].indexOf(newElement);
  if (this.placeholder) {
  if (this.options.addOnDrop) {
  const clone = this.options.copy

packages/crayons-extended/custom-objects/src/components/form-builder/components/fb-field-drag-drop-item.tsx

@@ -161,10 +161,13 @@ export class FormBuilderFieldDragDropItem {
  hasCustomProperty(this.dataProvider, objProductConfig.defaultTagKey) &&
  !this.dataProvider[objProductConfig.defaultTagKey];
 
+ const isCustomDropdownField =
+ !isDefaultNonCustomField && isDropdownField(this.dataProvider);
+
  const showDynamicFieldSections =
  this.dynamicSectionsBetaEnabled &&
- !isDefaultNonCustomField &&
- isDropdownField(this.dataProvider);
+ isCustomDropdownField &&
+ !this.sectionName;
 
  let choicesWithNoSectionCreated = [],
  noOfSections = 0,

packages/crayons-extended/custom-objects/src/components/form-builder/form-builder.tsx

@@ -531,13 +531,15 @@ export class FormBuilder {
  const objDetail = event.detail,
  elField = objDetail.droppedElement;
  let elFieldType = elField.dataProvider.type;
-
+ if (objDetail.dragContainer.children.length > 15) {
+ elFieldType = 'MAX_LIMIT';
+ }
  if (elField.dataProvider.required) {
  elFieldType = 'REQUIRED';
  }
-
  if (!elField.dataProvider.custom && elField.dataProvider.label) {
- elFieldType = 'DEFAULT';
+ elFieldType =
+ elFieldType === 'DEPENDENT_FIELD' ? 'DEPENDENT_FIELD' : 'DEFAULT';
  }
 
  this.dragErrorMessages = {

packages/crayons-i18n/i18n/en-US.json

@@ -218,7 +218,8 @@
  "DEPENDENT_FIELD" : "Dependent fields cannot be added into sections",
  "RELATIONSHIP" : "Lookup fields cannot be added into sections",
  "REQUIRED" : "Fields marked as required cannot be added into sections",
- "DEFAULT" : "Default fields cannot be added into sections"
+ "DEFAULT" : "Default fields cannot be added into sections",
+ "MAX_LIMIT": "Sections cannot contain more than 15 fields"
  }
  }
  },