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