@genesislcap/grid-tabulator 14.281.2 → 14.282.0

package/dist/esm/cell-formatters/select.formatter.js

@@ -1,32 +1,181 @@
+import { DOM } from '@microsoft/fast-element';
+import { getDataTestId } from '../utils';
 /**
- * Formatter that displays a value from a select list of options
- * Styled to match grid-pro select renderer.
+ * Set up global styles for selects only once
+ */
+function setupGlobalStyles() {
+    const styleId = 'tabulator-select-styles';
+    if (!document.getElementById(styleId)) {
+        const style = document.createElement('style');
+        style.id = styleId;
+        style.textContent = `
+      .tabulator-row {
+        overflow: visible !important;
+      }
+      .tabulator {
+        overflow: visible !important;
+      }
+      /* All select wrappers need these styles */
+      .select-wrapper {
+        overflow: visible !important;
+      }
+      /* Target select dropdown part */
+      .select-renderer::part(listbox) {
+        position: fixed !important;
+        z-index: 99999 !important;
+      }
+      /* Force dropdown options to wrap text */
+      .select-renderer::part(option) {
+        white-space: normal !important;
+        word-break: break-word !important;
+      }
+    `;
+        document.head.appendChild(style);
+    }
+}
+/**
+ * Handle positioning and width of the dropdown when it opens
+ */
+function setupSelectDropdownHandler(selectElement, cellElement) {
+    // Function to update listbox dimensions
+    const updateListboxDimensions = () => {
+        var _a;
+        const listbox = (_a = selectElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('[part="listbox"]');
+        if (listbox) {
+            const cellWidth = cellElement.offsetWidth;
+            listbox.style.width = `${cellWidth}px`;
+            listbox.style.maxWidth = `${cellWidth}px`;
+        }
+    };
+    // Setup a mutation observer to catch when the listbox is added to the DOM
+    const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+            if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
+                updateListboxDimensions();
+            }
+        });
+    });
+    // Start observing the shadow DOM
+    if (selectElement.shadowRoot) {
+        observer.observe(selectElement.shadowRoot, { childList: true, subtree: true });
+    }
+    // Handle the click event to ensure proper positioning
+    selectElement.addEventListener('click', updateListboxDimensions);
+    // Clean up observer when select is removed
+    const cleanupObserver = () => {
+        observer.disconnect();
+        selectElement.removeEventListener('click', updateListboxDimensions);
+    };
+    // Setup cleanup when element is removed from DOM
+    if (typeof window.MutationObserver !== 'undefined') {
+        const documentObserver = new MutationObserver((mutations) => {
+            if (!document.body.contains(selectElement)) {
+                cleanupObserver();
+                documentObserver.disconnect();
+            }
+        });
+        documentObserver.observe(document.body, { childList: true, subtree: true });
+    }
+}
+/**
+ * Formatter that displays a select component with options.
+ * Returns a wrapped div containing the select, similar to boolean.formatter.
  *
  * @param cell - The cell component provided by Tabulator
  * @param formatterParams - Select formatter parameters
- * @returns Text content for the selected option
+ * @returns An empty string, as the component is added directly to the cell element
  * @public
  */
 export function selectFormatter(cell, formatterParams) {
     const value = cell.getValue();
-    const { options = [], prefix = 'foundation', nullText = '', dataTestId } = formatterParams;
-    // Generate test ID if needed
-    const testIdAttr = dataTestId ? ` data-test-id="${dataTestId}"` : '';
-    // Handle null/undefined values
-    if (value === null || value === undefined) {
-        return `<div style="display: flex; width: 100%; height: 100%; align-items: center; justify-content: center;">
-      <span${testIdAttr} class="${prefix}-select-formatter ${prefix}-select-formatter--null">${nullText}</span>
-    </div>`;
+    const rowData = cell.getRow().getData();
+    const { options = [], prefix = 'foundation', nullText = '', dataTestId, onChange, } = formatterParams;
+    // Ensure global styles are set up
+    setupGlobalStyles();
+    // Create a div wrapper like in boolean.formatter.ts
+    const wrapper = document.createElement('div');
+    wrapper.className = 'select-wrapper';
+    wrapper.style.cssText =
+        'align-items: center; display: flex; height: 100%; width: 100%; position: relative; overflow: visible;';
+    // Create the select element
+    const selectElementTag = `${prefix}-select`;
+    const optionElementTag = `${prefix}-option`;
+    // Create the select component
+    const selectElement = document.createElement(selectElementTag);
+    selectElement.className = 'select-renderer';
+    selectElement.style.cssText = 'width: 100%; height: 100%; min-width: 0;';
+    // Set high z-index for dropdown
+    selectElement.style.setProperty('--listbox-z-index', '99999');
+    selectElement.style.setProperty('--listbox-position', 'fixed');
+    selectElement.style.setProperty('--listbox-max-height', '200px');
+    // Add data-test-id if provided
+    const testId = getDataTestId(dataTestId, rowData);
+    if (testId) {
+        selectElement.setAttribute('data-test-id', testId);
+    }
+    // Add event listener for changes if onChange is provided
+    if (onChange) {
+        selectElement.addEventListener('change', (e) => {
+            const newValue = e.target.value;
+            onChange(newValue, rowData);
+            // Update the cell value if field exists
+            if (cell.getField()) {
+                cell.getData()[cell.getField()] = newValue;
+            }
+        });
     }
-    // If using standard options
-    const matchingOption = options.find((option) => option.value === value);
-    if (matchingOption) {
-        return `<div style="display: flex; width: 100%; height: 100%; align-items: center; justify-content: center;">
-      <span${testIdAttr} class="${prefix}-select-formatter">${matchingOption.label}</span>
-    </div>`;
+    // Create default option
+    const defaultOption = document.createElement(optionElementTag);
+    defaultOption.value = '';
+    defaultOption.textContent = nullText || 'Select option';
+    defaultOption.style.display = 'none';
+    defaultOption.defaultSelected = true;
+    // Append default option to select
+    selectElement.appendChild(defaultOption);
+    // Process all options
+    options.forEach((option) => {
+        const optionElement = document.createElement(optionElementTag);
+        optionElement.value = String(option.value);
+        optionElement.textContent = option.label;
+        // Set selected state
+        if (value === option.value) {
+            optionElement.selected = true;
+        }
+        // Handle disabled state
+        if (typeof option.isDisabled === 'function') {
+            try {
+                const isDisabled = option.isDisabled(rowData);
+                if (isDisabled) {
+                    optionElement.disabled = true;
+                }
+            }
+            catch (error) {
+                console.error('Error executing select option isDisabled callback:', error);
+            }
+        }
+        // Add option to select element
+        selectElement.appendChild(optionElement);
+    });
+    // Set the current value if exists
+    if (value !== undefined && value !== null) {
+        selectElement.value = String(value);
     }
-    // If no matching option found, return the original value as string
-    return `<div style="display: flex; width: 100%; height: 100%; align-items: center; justify-content: center;">
-    <span${testIdAttr} class="${prefix}-select-formatter">${String(value)}</span>
-  </div>`;
+    // Add select to wrapper
+    wrapper.appendChild(selectElement);
+    // Get the cell element and ensure overflow visibility
+    const cellElement = cell.getElement();
+    cellElement.style.overflow = 'visible';
+    // Use DOM.queueUpdate to properly handle component initialization
+    DOM.queueUpdate(() => {
+        // Clear any existing content first
+        while (cellElement.firstChild) {
+            cellElement.removeChild(cellElement.firstChild);
+        }
+        // Add our wrapper with the select
+        cellElement.appendChild(wrapper);
+        // Setup dropdown handler
+        setupSelectDropdownHandler(selectElement, cellElement);
+    });
+    // Return empty string since we've appended the component directly
+    return '';
 }

package/dist/esm/cell-formatters/text.formatter.js

@@ -1,3 +1,4 @@
+import { getDataTestId } from '../utils';
 /**
  * Text formatter for customized display of values.
  * Styled to match grid-pro text renderer.
@@ -9,9 +10,11 @@
  */
 export function textFormatter(cell, formatterParams = {}) {
     const value = cell.getValue();
+    const rowData = cell.getData();
     const { specialValue = 2012, specialColor = 'orange', specialFontWeight = 'bold', prefix = 'foundation', dataTestId, nullText = '', } = formatterParams;
     // Generate test ID if needed
-    const testIdAttr = dataTestId ? ` data-test-id="${dataTestId}"` : '';
+    const testId = getDataTestId(dataTestId, rowData);
+    const testIdAttr = testId ? ` data-test-id="${testId}"` : '';
     // Handle null/undefined values
     if (value === null || value === undefined) {
         return `<div style="display: flex; width: 100%; height: 100%; align-items: center;">

package/dist/esm/utils/index.js

@@ -1,2 +1,3 @@
 export * from './logger';
 export * from './string-utils';
+export * from './test-id-utils';

package/dist/esm/utils/test-id-utils.js

@@ -0,0 +1,15 @@
+/**
+ * Resolves a dataTestId value that can be either a string or a function
+ *
+ * @param dataTestId - The dataTestId value (string or function)
+ * @param rowData - The row data to pass to the function if dataTestId is a function
+ * @returns The resolved test ID string or undefined if not provided
+ * @alpha
+ */
+export function getDataTestId(dataTestId, rowData) {
+    if (!dataTestId)
+        return undefined;
+    if (typeof dataTestId === 'function')
+        return dataTestId(rowData);
+    return dataTestId;
+}