df-ae-forms-package 1.0.80 → 1.0.81

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -785,6 +785,7 @@ interface DfFormTableProps {
785
785
  };
786
786
  onCreateIssue?: (issueData: any, attachments: File[]) => Promise<any>;
787
787
  onUpdateIssue?: (issueId: string, updateData: any) => Promise<void>;
788
+ shouldShowComponent?: (id: string) => boolean;
788
789
  }
789
790
  declare const DfFormTable: React.FC<DfFormTableProps>;
790
791
 
package/dist/index.esm.js CHANGED
@@ -6017,24 +6017,16 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
6017
6017
  }
6018
6018
  }
6019
6019
  }
6020
- // Handle nested components in table cells
6020
+ // Handle nested components in table cells (2D array: row → cell → components)
6021
6021
  if (component.cells && Array.isArray(component.cells)) {
6022
- component.cells.forEach((rowOrCell, _rowIndex) => {
6023
- // Handle 2D array (standard)
6024
- if (Array.isArray(rowOrCell)) {
6025
- rowOrCell.forEach((cell, _cellIndex) => {
6022
+ component.cells.forEach((row) => {
6023
+ if (Array.isArray(row)) {
6024
+ row.forEach((cell) => {
6026
6025
  if (cell && cell.components && Array.isArray(cell.components)) {
6027
6026
  initializeComponentValues(cell.components, values);
6028
6027
  }
6029
6028
  });
6030
6029
  }
6031
- // Handle 1D array (flat) structure
6032
- else if (typeof rowOrCell === 'object' && rowOrCell !== null) {
6033
- const cell = rowOrCell;
6034
- if (cell && cell.components && Array.isArray(cell.components)) {
6035
- initializeComponentValues(cell.components, values);
6036
- }
6037
- }
6038
6030
  });
6039
6031
  }
6040
6032
  // Handle nested components in datagrid entries
@@ -6146,26 +6138,10 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
6146
6138
  validatedComponent.children = getValidatedComponents(validatedComponent.children);
6147
6139
  }
6148
6140
  if (validatedComponent.cells && Array.isArray(validatedComponent.cells)) {
6149
- validatedComponent.cells = validatedComponent.cells.map((rowOrCell) => {
6150
- if (Array.isArray(rowOrCell)) {
6151
- // Standard 2D: rowOrCell is an array of cells
6152
- return rowOrCell.map((cell) => {
6153
- if (cell && cell.components && Array.isArray(cell.components)) {
6154
- return { ...cell, components: getValidatedComponents(cell.components) };
6155
- }
6156
- return cell;
6157
- });
6158
- }
6159
- else if (typeof rowOrCell === 'object' && rowOrCell !== null) {
6160
- // Flat 1D: rowOrCell IS the cell object
6161
- const cell = rowOrCell;
6162
- if (cell.components && Array.isArray(cell.components)) {
6163
- return { ...cell, components: getValidatedComponents(cell.components) };
6164
- }
6165
- return cell;
6166
- }
6167
- return rowOrCell;
6168
- });
6141
+ validatedComponent.cells = validatedComponent.cells.map((row) => row.map((cell) => ({
6142
+ ...cell,
6143
+ components: cell.components ? getValidatedComponents(cell.components) : []
6144
+ })));
6169
6145
  }
6170
6146
  if (validatedComponent.entries && Array.isArray(validatedComponent.entries)) {
6171
6147
  validatedComponent.entries = validatedComponent.entries.map((entry) => {
@@ -6245,24 +6221,16 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
6245
6221
  visibility[component.basic.label] = true;
6246
6222
  }
6247
6223
  }
6248
- // Handle nested components in table cells
6224
+ // Handle nested components in table cells (2D: row → cell → components)
6249
6225
  if (component.cells && Array.isArray(component.cells)) {
6250
- component.cells.forEach((rowOrCell) => {
6251
- // Handle 2D array (standard)
6252
- if (Array.isArray(rowOrCell)) {
6253
- rowOrCell.forEach((cell) => {
6226
+ component.cells.forEach((row) => {
6227
+ if (Array.isArray(row)) {
6228
+ row.forEach((cell) => {
6254
6229
  if (cell.components && Array.isArray(cell.components)) {
6255
6230
  evaluateComponentConditionalLogic(cell.components, visibility, currentFormValues, fullSchema);
6256
6231
  }
6257
6232
  });
6258
6233
  }
6259
- // Handle 1D array (flat) structure
6260
- else if (typeof rowOrCell === 'object' && rowOrCell !== null) {
6261
- const cell = rowOrCell;
6262
- if (cell.components && Array.isArray(cell.components)) {
6263
- evaluateComponentConditionalLogic(cell.components, visibility, currentFormValues, fullSchema);
6264
- }
6265
- }
6266
6234
  });
6267
6235
  }
6268
6236
  // Handle nested components in datagrid entries
@@ -7192,86 +7160,46 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
7192
7160
  } }));
7193
7161
  case 'table':
7194
7162
  return (jsx(React.Suspense, { fallback: jsx("div", { children: "Loading table..." }), children: jsx(DfFormTable$1, { ...commonProps, properties: component, formData: formValues, formTemplateId: formTemplateId, mode: commonProps.mode, validationErrors: validationErrors, touchedFields: touchedFields, formSubmitted: formSubmitted, onThresholdActionCompletion: handleThresholdActionCompletion, onThresholdIssueRaised: handleThresholdIssueRaised, workOrderNumber: workOrderNumber, assetNumber: assetNumber, onCreateIssue: onCreateIssue, onUpdateIssue: onUpdateIssue, onNotesChange: (componentId, notes) => {
7195
- // Handle notes change for table cell components
7196
7163
  const updatedComponents = formComponents.map(comp => {
7197
7164
  if (comp.id === component.id && comp.cells) {
7198
- const updatedCells = comp.cells.map((rowOrCell) => {
7199
- if (Array.isArray(rowOrCell)) {
7200
- return rowOrCell.map((cell) => {
7201
- if (cell.components) {
7202
- const updatedCellComponents = cell.components.map((cellComp) => {
7203
- if (cellComp.id === componentId) {
7204
- return { ...cellComp, basic: { ...cellComp.basic, notes } };
7205
- }
7206
- return cellComp;
7207
- });
7208
- return { ...cell, components: updatedCellComponents };
7209
- }
7210
- return cell;
7211
- });
7212
- }
7213
- else {
7214
- const cell = rowOrCell;
7215
- if (cell.components) {
7216
- const updatedCellComponents = cell.components.map((cellComp) => {
7217
- if (cellComp.id === componentId) {
7218
- return { ...cellComp, basic: { ...cellComp.basic, notes } };
7219
- }
7220
- return cellComp;
7221
- });
7222
- return { ...cell, components: updatedCellComponents };
7223
- }
7224
- return cell;
7165
+ const updatedCells = comp.cells.map((row) => row.map((cell) => {
7166
+ if (cell.components) {
7167
+ return {
7168
+ ...cell,
7169
+ components: cell.components.map((cellComp) => cellComp.id === componentId
7170
+ ? { ...cellComp, basic: { ...cellComp.basic, notes } }
7171
+ : cellComp)
7172
+ };
7225
7173
  }
7226
- });
7174
+ return cell;
7175
+ }));
7227
7176
  return { ...comp, cells: updatedCells };
7228
7177
  }
7229
7178
  return comp;
7230
7179
  });
7231
7180
  onFormDataChange?.(updatedComponents);
7232
7181
  }, onAttachmentChange: (componentId, attachments) => {
7233
- // Handle attachment change for table cell components
7234
7182
  const updatedComponents = formComponents.map(comp => {
7235
7183
  if (comp.id === component.id && comp.cells) {
7236
- const updatedCells = comp.cells.map((rowOrCell) => {
7237
- if (Array.isArray(rowOrCell)) {
7238
- return rowOrCell.map((cell) => {
7239
- if (cell.components) {
7240
- const updatedCellComponents = cell.components.map((cellComp) => {
7241
- if (cellComp.id === componentId) {
7242
- return { ...cellComp, basic: { ...cellComp.basic, attachments: attachments || [] } };
7243
- }
7244
- return cellComp;
7245
- });
7246
- return { ...cell, components: updatedCellComponents };
7247
- }
7248
- return cell;
7249
- });
7250
- }
7251
- else {
7252
- const cell = rowOrCell;
7253
- if (cell.components) {
7254
- const updatedCellComponents = cell.components.map((cellComp) => {
7255
- if (cellComp.id === componentId) {
7256
- return { ...cellComp, basic: { ...cellComp.basic, attachments: attachments || [] } };
7257
- }
7258
- return cellComp;
7259
- });
7260
- return { ...cell, components: updatedCellComponents };
7261
- }
7262
- return cell;
7184
+ const updatedCells = comp.cells.map((row) => row.map((cell) => {
7185
+ if (cell.components) {
7186
+ return {
7187
+ ...cell,
7188
+ components: cell.components.map((cellComp) => cellComp.id === componentId
7189
+ ? { ...cellComp, basic: { ...cellComp.basic, attachments: attachments || [] } }
7190
+ : cellComp)
7191
+ };
7263
7192
  }
7264
- });
7193
+ return cell;
7194
+ }));
7265
7195
  return { ...comp, cells: updatedCells };
7266
7196
  }
7267
7197
  return comp;
7268
7198
  });
7269
7199
  onFormDataChange?.(updatedComponents);
7270
7200
  }, renderFormComponent: (field) => {
7271
- // CRITICAL: Pass the field to renderFormComponent which has access to latest formValues
7272
- // renderFormComponent uses formValues[field.id] internally, so it will get the correct value
7273
7201
  return renderFormComponent(field);
7274
- } }) }));
7202
+ }, shouldShowComponent: shouldShowComponent }) }));
7275
7203
  case 'datagrid':
7276
7204
  return (jsx(DfFormDataGrid, { ...commonProps, properties: component, formData: formValues, formTemplateId: formTemplateId, mode: commonProps.mode, onThresholdActionCompletion: handleThresholdActionCompletion, onThresholdIssueRaised: handleThresholdIssueRaised, onNotesChange: (componentId, notes) => {
7277
7205
  handleComponentNotesChange(componentId, notes);
@@ -7581,12 +7509,13 @@ const ensureComponentHasId = (component) => {
7581
7509
  }
7582
7510
  return component;
7583
7511
  };
7584
- const SimpleTableComponent = ({ component, mode, renderFormComponent, formData = {}, formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChange, onAttachmentChange, workOrderNumber, assetNumber, user, onCreateIssue, onUpdateIssue }) => {
7512
+ const SimpleTableComponent = ({ component, mode, renderFormComponent, formData = {}, formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChange, onAttachmentChange, workOrderNumber, assetNumber, user, onCreateIssue, onUpdateIssue, shouldShowComponent }) => {
7585
7513
  const formValue = formData[component.id];
7514
+ const isVisible = shouldShowComponent ? shouldShowComponent(component.id) : true;
7586
7515
  // Check if component has notes or attachments for submission view
7587
7516
  const hasSubmissionData = mode === 'preview' && ((component.basic?.notes && component.basic.notes.trim().length > 0) ||
7588
7517
  (component.basic?.attachments && Array.isArray(component.basic.attachments) && component.basic.attachments.length > 0));
7589
- return (jsxs("div", { className: "simple-table-component", children: [renderFormComponent(component), !['section', 'table', 'heading', 'file', 'instructions', 'signature', 'location', 'datagrid'].includes(component.name) && (jsx(ComponentActionFeatures, { component: component, mode: "test", formTemplateId: formTemplateId, formValue: formValue, formData: formData, onThresholdActionCompletion: onThresholdActionCompletion, onThresholdIssueRaised: onThresholdIssueRaised, onNotesChange: onNotesChange ? (notes) => onNotesChange(component.id, notes) : undefined, onAttachmentChange: onAttachmentChange ? (attachments) => onAttachmentChange(component.id, attachments) : undefined, workOrderNumber: workOrderNumber, assetNumber: assetNumber, user: user, onCreateIssue: onCreateIssue, onUpdateIssue: onUpdateIssue })), hasSubmissionData && (jsx(ComponentSubmissionActions, { component: component }))] }));
7518
+ return (jsxs("div", { className: `simple-table-component ${(!isVisible && mode !== 'edit') ? 'conditionally-hidden' : ''}`, style: { display: (isVisible || mode === 'edit') ? undefined : 'none' }, children: [renderFormComponent(component), mode === 'test' && !['section', 'table', 'heading', 'file', 'instructions', 'signature', 'location', 'datagrid'].includes(component.name) && (jsx(ComponentActionFeatures, { component: component, mode: "test", formTemplateId: formTemplateId, formValue: formValue, formData: formData, onThresholdActionCompletion: onThresholdActionCompletion, onThresholdIssueRaised: onThresholdIssueRaised, onNotesChange: onNotesChange ? (notes) => onNotesChange(component.id, notes) : undefined, onAttachmentChange: onAttachmentChange ? (attachments) => onAttachmentChange(component.id, attachments) : undefined, workOrderNumber: workOrderNumber, assetNumber: assetNumber, user: user, onCreateIssue: onCreateIssue, onUpdateIssue: onUpdateIssue })), hasSubmissionData && (jsx(ComponentSubmissionActions, { component: component }))] }));
7590
7519
  };
7591
7520
  const DraggableTableComponent = ({ component, selectedComponent, mode, onComponentSelect, onComponentDelete, onComponentEdit, renderFormComponent, isOverlay = false, }) => {
7592
7521
  const { attributes, listeners, setNodeRef, transform, transition, isDragging, isSorting, } = useSortable({
@@ -7607,7 +7536,7 @@ const DraggableTableComponent = ({ component, selectedComponent, mode, onCompone
7607
7536
  onComponentDelete(component, e);
7608
7537
  }, type: "button", title: "Delete Component", children: jsx(Trash2, { size: 12 }) })] }))] }));
7609
7538
  };
7610
- const TableCellComponent = ({ cell, mode, onComponentSelect, onComponentDelete, onComponentEdit, selectedComponent, renderFormComponent, formData = {}, formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, tableId, onNotesChange, onAttachmentChange, workOrderNumber, assetNumber, user, onCreateIssue, onUpdateIssue }) => {
7539
+ const TableCellComponent = ({ cell, mode, onComponentSelect, onComponentDelete, onComponentEdit, selectedComponent, renderFormComponent, formData = {}, formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, tableId, onNotesChange, onAttachmentChange, workOrderNumber, assetNumber, user, onCreateIssue, onUpdateIssue, shouldShowComponent }) => {
7611
7540
  const dropZoneId = `table-cell-${tableId}-${cell.row}-${cell.column}`;
7612
7541
  const { setNodeRef, isOver } = useDroppable({
7613
7542
  id: dropZoneId,
@@ -7642,7 +7571,7 @@ const TableCellComponent = ({ cell, mode, onComponentSelect, onComponentDelete,
7642
7571
  cell.components.map((component) => {
7643
7572
  // Only ensure ID if it's truly missing - don't regenerate existing IDs
7644
7573
  const componentWithId = component.id ? component : ensureComponentHasId(component);
7645
- return (jsx(SimpleTableComponent, { component: componentWithId, mode: mode, renderFormComponent: renderFormComponent, formData: formData, formTemplateId: formTemplateId, onThresholdActionCompletion: onThresholdActionCompletion, onThresholdIssueRaised: onThresholdIssueRaised, onNotesChange: onNotesChange, onAttachmentChange: onAttachmentChange, workOrderNumber: workOrderNumber, assetNumber: assetNumber, user: user, onCreateIssue: onCreateIssue, onUpdateIssue: onUpdateIssue }, componentWithId.id));
7574
+ return (jsx(SimpleTableComponent, { component: componentWithId, mode: mode, renderFormComponent: renderFormComponent, formData: formData, formTemplateId: formTemplateId, onThresholdActionCompletion: onThresholdActionCompletion, onThresholdIssueRaised: onThresholdIssueRaised, onNotesChange: onNotesChange, onAttachmentChange: onAttachmentChange, workOrderNumber: workOrderNumber, assetNumber: assetNumber, user: user, onCreateIssue: onCreateIssue, onUpdateIssue: onUpdateIssue, shouldShowComponent: shouldShowComponent }, componentWithId.id));
7646
7575
  }))) : (
7647
7576
  // Only show drop zone content in edit mode
7648
7577
  mode === 'edit' ? (jsx("div", { className: "empty-cell-placeholder", children: jsxs("div", { className: "cell-info", children: [jsx("span", { className: "drop-zone-text", children: "Drag and Drop a form component" }), jsxs("span", { className: "cell-coordinates", children: ["Cell (", cell.row + 1, ", ", cell.column + 1, ")"] })] }) })) : (
@@ -7653,44 +7582,13 @@ const TableCellComponent = ({ cell, mode, onComponentSelect, onComponentDelete,
7653
7582
  visibility: 'hidden' // Hide content but maintain space
7654
7583
  }, children: "\u00A0" }))) }) }));
7655
7584
  };
7656
- const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationErrors = {}, touchedFields = {}, formSubmitted = false, onValueChange, onSelect, isSelected = false, className = '', onTableSelect, onComponentSelect, onComponentDelete, onComponentEdit, selectedComponent, renderFormComponent, formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChange, onAttachmentChange, workOrderNumber, assetNumber, user, onCreateIssue, onUpdateIssue }) => {
7657
- const [isCollapsed, setIsCollapsed] = useState(false); // Always start expanded to show drop zones
7658
- // Normalize cells: API may return a flat 1D array of cells (each with .row/.column)
7659
- // or a proper 2D array of rows. Always convert to 2D for consistent rendering.
7660
- const normalizedCells = useMemo(() => {
7661
- const raw = properties.cells;
7662
- if (!raw || !Array.isArray(raw) || raw.length === 0)
7663
- return [];
7664
- // DEBUG: Log cell structure to understand API format
7665
- console.log('[DfFormTable] raw cells (first item):', JSON.stringify(raw[0], null, 2));
7666
- console.log('[DfFormTable] is first item array?', Array.isArray(raw[0]));
7667
- console.log('[DfFormTable] total cells:', raw.length);
7668
- // Check if it's already a 2D array (first element is an array)
7669
- if (Array.isArray(raw[0])) {
7670
- console.log('[DfFormTable] Using 2D array format');
7671
- return raw;
7672
- }
7673
- // It's a flat 1D array — reconstruct 2D using each cell's row/column
7674
- console.log('[DfFormTable] Using 1D flat format, reconstructing 2D grid');
7675
- const grid = [];
7676
- raw.forEach((cell) => {
7677
- const r = typeof cell.row === 'number' ? cell.row : 0;
7678
- const c = typeof cell.column === 'number' ? cell.column : 0;
7679
- console.log(`[DfFormTable] Cell at row=${r} col=${c}, components count:`, cell.components?.length ?? 0);
7680
- if (!grid[r])
7681
- grid[r] = [];
7682
- grid[r][c] = cell;
7683
- });
7684
- return grid;
7685
- }, [properties.cells]);
7585
+ const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationErrors = {}, touchedFields = {}, formSubmitted = false, onValueChange, onSelect, isSelected = false, className = '', onTableSelect, onComponentSelect, onComponentDelete, onComponentEdit, selectedComponent, renderFormComponent, formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChange, onAttachmentChange, workOrderNumber, assetNumber, user, onCreateIssue, onUpdateIssue, shouldShowComponent }) => {
7586
+ const [isCollapsed, setIsCollapsed] = useState(false);
7587
+ // By the time cells arrive here, DfFormPreview.getValidatedComponents has already
7588
+ // normalized them from 1D flat (API format) to proper 2D arrays.
7589
+ // So we can use properties.cells directly, exactly like the website version.
7686
7590
  // Check if table has any components in any cells
7687
- const hasAnyComponents = normalizedCells.some(row => Array.isArray(row) && row.some(cell => cell && cell.components && cell.components.length > 0)) || false;
7688
- // Initialize and update table cells when rows/columns change
7689
- // CRITICAL: Skip cell initialization updates to prevent flickering when user types
7690
- useEffect(() => {
7691
- // Skip updates to prevent flickering - cells are already initialized
7692
- return;
7693
- }, [properties.table?.rows, properties.table?.columns, properties.basic?.rows, properties.basic?.columns, properties.cells, id, onValueChange]); // Watch for rows/columns changes
7591
+ const hasAnyComponents = properties.cells?.some((row) => Array.isArray(row) && row.some((cell) => cell && cell.components && cell.components.length > 0)) || false;
7694
7592
  const handleTableClick = useCallback((event) => {
7695
7593
  event.stopPropagation();
7696
7594
  onSelect?.();
@@ -7706,54 +7604,29 @@ const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationE
7706
7604
  };
7707
7605
  const handleComponentDelete = useCallback((component, event) => {
7708
7606
  event.stopPropagation();
7709
- // Find and remove the component from the table cell
7710
- const updatedCells = normalizedCells.map(row => (Array.isArray(row) ? row : []).map(cell => {
7607
+ const updatedCells = properties.cells.map((row) => row.map((cell) => {
7711
7608
  if (cell && cell.components && cell.components.some((comp) => comp.id === component.id)) {
7712
- const filteredComponents = cell.components.filter((comp) => comp.id !== component.id);
7713
- return {
7714
- ...cell,
7715
- components: filteredComponents
7716
- };
7609
+ return { ...cell, components: cell.components.filter((comp) => comp.id !== component.id) };
7717
7610
  }
7718
7611
  return cell;
7719
7612
  }));
7720
- // Update the table with the modified cells
7721
- if (onValueChange) {
7722
- onValueChange({
7723
- id,
7724
- value: { ...properties, cells: updatedCells }
7725
- });
7726
- }
7727
- // Don't call parent delete handler for table cell components
7728
- // The parent delete handler is for deleting entire fields, not components within table cells
7613
+ onValueChange?.({ id, value: { ...properties, cells: updatedCells } });
7729
7614
  }, [onComponentDelete, properties, onValueChange, id]);
7730
- // CRITICAL FIX: Ensure all table cell components have proper IDs with table and cell position
7731
- // Use useMemo to prevent ID regeneration on every render
7732
- // Uses normalizedCells so it works whether API returns 1D or 2D cell arrays
7733
- const cellsWithIds = useMemo(() => {
7734
- if (!normalizedCells || normalizedCells.length === 0)
7735
- return [];
7736
- return normalizedCells.map((row, rowIndex) => (Array.isArray(row) ? row : []).map((cell, cellIndex) => ({
7615
+ // Ensure all table cell components have IDs (matching website ensureTableCellComponentsHaveIds)
7616
+ const ensureTableCellComponentsHaveIds = (cells) => {
7617
+ return cells.map((row) => (Array.isArray(row) ? row : []).map((cell) => ({
7737
7618
  ...cell,
7738
- components: (cell && cell.components && Array.isArray(cell.components))
7739
- ? cell.components.map((comp, compIndex) => {
7740
- // CRITICAL: Only generate ID if it's missing - never regenerate existing IDs
7741
- // This prevents component remounting and losing input state
7742
- if (comp.id && typeof comp.id === 'string' && comp.id.trim() !== '') {
7743
- // ID already exists - keep it as is
7744
- return comp;
7745
- }
7746
- // Generate unique ID that includes table ID, row, cell, and component index
7747
- // This ensures no conflicts with other components
7748
- const uniqueId = `${comp.name || 'component'}-table-${id}-row-${rowIndex}-cell-${cellIndex}-comp-${compIndex}`;
7749
- return {
7750
- ...comp,
7751
- id: uniqueId
7752
- };
7753
- })
7754
- : []
7619
+ components: (cell?.components || []).map((comp) => {
7620
+ if (!comp.id || comp.id.trim() === '') {
7621
+ return { ...comp, id: `table-cell-${comp.name}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}` };
7622
+ }
7623
+ return comp;
7624
+ })
7755
7625
  })));
7756
- }, [normalizedCells, id]); // Only recalculate if cells or table ID changes
7626
+ };
7627
+ const cellsWithIds = properties.cells && properties.cells.length > 0
7628
+ ? ensureTableCellComponentsHaveIds(properties.cells)
7629
+ : [];
7757
7630
  // CRITICAL FIX: Update the parent component with the cells that have proper IDs
7758
7631
  // Skip this in package to prevent flickering - cells are managed by parent
7759
7632
  // useEffect(() => {
@@ -7881,7 +7754,7 @@ const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationE
7881
7754
  fontSize: '14px',
7882
7755
  textAlign: 'center'
7883
7756
  }, children: columnName }, `header-${colIndex}`));
7884
- }) }) })), jsx("tbody", { children: cellsWithIds.filter(row => Array.isArray(row) && row.length > 0).map((row, rowIndex) => (jsx("tr", { className: "table-row", children: row.filter(cell => cell != null).map((cell) => (jsx(TableCellComponent, { cell: cell, mode: mode, onComponentSelect: onComponentSelect || (() => { }), onComponentDelete: handleComponentDelete, onComponentEdit: onComponentEdit, selectedComponent: selectedComponent || null, renderFormComponent: renderComponent, formData: formData, formTemplateId: formTemplateId, onThresholdActionCompletion: onThresholdActionCompletion, onThresholdIssueRaised: onThresholdIssueRaised, tableId: id, onNotesChange: onNotesChange, onAttachmentChange: onAttachmentChange, workOrderNumber: workOrderNumber, assetNumber: assetNumber, user: user, onCreateIssue: onCreateIssue, onUpdateIssue: onUpdateIssue }, cell.id))) }, rowIndex))) })] })] }))] }));
7757
+ }) }) })), jsx("tbody", { children: cellsWithIds.filter(row => Array.isArray(row) && row.length > 0).map((row, rowIndex) => (jsx("tr", { className: "table-row", children: row.filter(cell => cell != null).map((cell) => (jsx(TableCellComponent, { cell: cell, mode: mode, onComponentSelect: onComponentSelect || (() => { }), onComponentDelete: handleComponentDelete, onComponentEdit: onComponentEdit, selectedComponent: selectedComponent || null, renderFormComponent: renderComponent, formData: formData, formTemplateId: formTemplateId, onThresholdActionCompletion: onThresholdActionCompletion, onThresholdIssueRaised: onThresholdIssueRaised, tableId: id, onNotesChange: onNotesChange, onAttachmentChange: onAttachmentChange, workOrderNumber: workOrderNumber, assetNumber: assetNumber, user: user, onCreateIssue: onCreateIssue, onUpdateIssue: onUpdateIssue, shouldShowComponent: shouldShowComponent }, cell.id))) }, rowIndex))) })] })] }))] }));
7885
7758
  };
7886
7759
 
7887
7760
  var dfFormTable = /*#__PURE__*/Object.freeze({