@khester/dynamics-cell-renderers 1.1.0

package/dist/index.esm.js

@@ -0,0 +1,2107 @@
+import { mergeStyles, Text, Icon, Toggle, IconButton, TextField, DatePicker, ComboBox, Dropdown, Callout, DirectionalHint } from '@fluentui/react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useCallback, useState, useRef, useEffect, useMemo } from 'react';
+import { formatCurrency, formatDateTime, formatDate, formatNumber, getContrastColor, normalizeHexColor } from '@khester/dynamics-utils';
+
+/**
+ * Dynamics 365 Grid color tokens.
+ * Inlined for standalone package use.
+ */
+const dynamicsGridColors = {
+    headerBackground: '#f8f8f8',
+    headerBorder: '#e1e1e1',
+    rowSelected: '#cce4f6',
+    rowSelectedBorder: '#0078d4',
+    rowSelectedHover: '#b3d7f2',
+    rowHover: '#f3f2f1'};
+// ============================================================================
+// Cell-Level Styles
+// ============================================================================
+/**
+ * Cell container - ensures proper vertical alignment.
+ */
+const cellClass = mergeStyles({
+    display: 'flex',
+    alignItems: 'center',
+    height: '100%',
+});
+/**
+ * Link cell style - clickable text with hover underline.
+ */
+const linkCellClass = mergeStyles({
+    fontWeight: 600,
+    color: '#0078d4',
+    cursor: 'pointer',
+    '&:hover': {
+        textDecoration: 'underline',
+    },
+    '&:focus': {
+        outline: '2px solid #0078d4',
+        outlineOffset: 2,
+    },
+});
+/**
+ * Colored cell badge style.
+ */
+const coloredBadgeClass = mergeStyles({
+    padding: '2px 8px',
+    borderRadius: 4,
+    fontSize: 12,
+    fontWeight: 600,
+    display: 'inline-block',
+});
+/**
+ * Currency cell style - right-aligned numbers.
+ */
+const currencyCellClass = mergeStyles({
+    textAlign: 'right',
+    fontFamily: 'Consolas, "Courier New", monospace',
+});
+/**
+ * Progress bar container.
+ */
+const progressBarContainerClass = mergeStyles({
+    display: 'flex',
+    alignItems: 'center',
+    gap: 8,
+    width: '100%',
+});
+/**
+ * Progress bar background.
+ */
+const progressBarBackgroundClass = mergeStyles({
+    flex: 1,
+    height: 8,
+    backgroundColor: '#edebe9',
+    borderRadius: 4,
+    overflow: 'hidden',
+});
+/**
+ * Progress bar fill (requires dynamic width via style prop).
+ */
+const progressBarFillClass = mergeStyles({
+    height: '100%',
+    backgroundColor: '#0078d4',
+    borderRadius: 4,
+    transition: 'width 0.3s ease',
+});
+/**
+ * Progress bar label.
+ */
+const progressBarLabelClass = mergeStyles({
+    fontSize: 12,
+    color: '#605e5c',
+    minWidth: 40,
+    textAlign: 'right',
+});
+/**
+ * Icon button cell style.
+ */
+const iconButtonCellClass = mergeStyles({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+});
+/**
+ * Rating cell container - row of star glyphs.
+ */
+const ratingCellClass = mergeStyles({
+    display: 'flex',
+    alignItems: 'center',
+    gap: 2,
+    height: '100%',
+});
+/**
+ * Single rating star glyph.
+ */
+const ratingStarClass = mergeStyles({
+    fontSize: 16,
+    lineHeight: 1,
+    userSelect: 'none',
+});
+/**
+ * Composite cell container - lays out ordered slots.
+ */
+const compositeCellClass = mergeStyles({
+    display: 'flex',
+    height: '100%',
+});
+/**
+ * Editable cell container - base wrapper for inline edit controls.
+ */
+const editableCellClass = mergeStyles({
+    display: 'flex',
+    alignItems: 'center',
+    height: '100%',
+    width: '100%',
+    position: 'relative',
+});
+/**
+ * Editable cell input wrapper - provides the dirty/error border indicators.
+ */
+const editableCellInputWrapperClass = mergeStyles({
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%',
+    position: 'relative',
+});
+/**
+ * Dirty cell indicator - blue left border on edited cells.
+ * Apply as additional class when cell is dirty.
+ */
+const dirtyCellIndicatorClass = mergeStyles({
+    '&::before': {
+        content: '""',
+        position: 'absolute',
+        left: -8,
+        top: 0,
+        bottom: 0,
+        width: 3,
+        backgroundColor: '#0078d4',
+        borderRadius: '1px',
+    },
+});
+/**
+ * Error cell indicator - red left border on cells with validation errors.
+ * Apply as additional class when cell has error.
+ */
+const errorCellIndicatorClass = mergeStyles({
+    '&::before': {
+        content: '""',
+        position: 'absolute',
+        left: -8,
+        top: 0,
+        bottom: 0,
+        width: 3,
+        backgroundColor: '#d13438',
+        borderRadius: '1px',
+    },
+});
+/**
+ * Error message text below field.
+ */
+const cellErrorTextClass = mergeStyles({
+    color: '#d13438',
+    fontSize: 11,
+    position: 'absolute',
+    bottom: -14,
+    left: 0,
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    maxWidth: '100%',
+});
+// ============================================================================
+// Lookup Cell Styles
+// ============================================================================
+/**
+ * Lookup cell container - wrapper for the search input and dropdown.
+ */
+const lookupCellContainerClass = mergeStyles({
+    position: 'relative',
+    width: '100%',
+    display: 'flex',
+    alignItems: 'center',
+});
+/**
+ * Lookup dropdown container - positioned below the input.
+ */
+const lookupDropdownClass = mergeStyles({
+    position: 'absolute',
+    top: '100%',
+    left: -8,
+    right: -8,
+    zIndex: 1000,
+    backgroundColor: 'white',
+    border: '1px solid #edebe9',
+    boxShadow: '0 3px 6px rgba(0, 0, 0, 0.16)',
+    maxHeight: 200,
+    overflowY: 'auto',
+    borderRadius: 2,
+    marginTop: 2,
+});
+/**
+ * Lookup dropdown item - each selectable option.
+ */
+const lookupDropdownItemClass = mergeStyles({
+    padding: '8px 12px',
+    cursor: 'pointer',
+    fontSize: 13,
+    '&:hover': {
+        backgroundColor: '#f3f2f1',
+    },
+});
+/**
+ * Lookup dropdown item - active/selected state.
+ */
+const lookupDropdownItemActiveClass = mergeStyles({
+    backgroundColor: '#f3f2f1',
+});
+/**
+ * Lookup dropdown item - none option (clear selection).
+ */
+const lookupDropdownNoneOptionClass = mergeStyles({
+    padding: '8px 12px',
+    cursor: 'pointer',
+    fontSize: 13,
+    fontStyle: 'italic',
+    color: '#605e5c',
+    borderBottom: '1px solid #edebe9',
+    '&:hover': {
+        backgroundColor: '#f3f2f1',
+    },
+});
+/**
+ * Lookup loading indicator.
+ */
+const lookupLoadingClass = mergeStyles({
+    padding: '8px 12px',
+    fontSize: 13,
+    color: '#605e5c',
+    fontStyle: 'italic',
+});
+/**
+ * Lookup no results message.
+ */
+const lookupNoResultsClass = mergeStyles({
+    padding: '8px 12px',
+    fontSize: 13,
+    color: '#605e5c',
+    fontStyle: 'italic',
+});
+/**
+ * Lookup clear button - positioned inside the input.
+ */
+const lookupClearButtonClass = mergeStyles({
+    position: 'absolute',
+    right: 4,
+    top: '50%',
+    transform: 'translateY(-50%)',
+    width: 20,
+    height: 20,
+    minWidth: 20,
+    padding: 0,
+    border: 'none',
+    backgroundColor: 'transparent',
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    color: '#605e5c',
+    '&:hover': {
+        color: '#323130',
+        backgroundColor: '#f3f2f1',
+        borderRadius: 2,
+    },
+});
+/**
+ * Lookup read mode link - displays lookup value as clickable link.
+ */
+const lookupReadModeLinkClass = mergeStyles({
+    color: '#0078d4',
+    cursor: 'pointer',
+    textDecoration: 'none',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    '&:hover': {
+        textDecoration: 'underline',
+    },
+    '&:focus': {
+        outline: '2px solid #0078d4',
+        outlineOffset: 2,
+    },
+});
+// ============================================================================
+// Grid-Level Styles (for consumers building full grids)
+// ============================================================================
+/**
+ * Get DetailsList styles for consistent Dynamics CE look.
+ */
+function getDetailsListStyles() {
+    return {
+        root: {},
+        headerWrapper: {
+            '.ms-DetailsHeader': {
+                backgroundColor: dynamicsGridColors.headerBackground,
+                borderBottom: `1px solid ${dynamicsGridColors.headerBorder}`,
+                paddingTop: 0,
+                height: 42,
+            },
+            '.ms-DetailsHeader-cell': {
+                fontSize: 13,
+                fontWeight: 600,
+                color: '#323130',
+            },
+            '.ms-DetailsHeader-cellTitle': {
+                fontSize: 13,
+                fontWeight: 600,
+            },
+        },
+    };
+}
+/**
+ * Get row styles for consistent hover behavior.
+ */
+function getRowStyles() {
+    return {
+        root: {
+            cursor: 'pointer',
+            '&:hover': {
+                backgroundColor: '#f3f2f1',
+            },
+        },
+    };
+}
+/**
+ * Get row styles with selection highlighting (Dynamics 365 native look).
+ * @param isSelected - Whether the row is currently selected
+ */
+function getRowStylesWithSelection(isSelected) {
+    return {
+        root: {
+            cursor: 'pointer',
+            backgroundColor: isSelected ? dynamicsGridColors.rowSelected : undefined,
+            borderLeft: isSelected ? `3px solid ${dynamicsGridColors.rowSelectedBorder}` : '3px solid transparent',
+            '&:hover': {
+                backgroundColor: isSelected
+                    ? dynamicsGridColors.rowSelectedHover
+                    : dynamicsGridColors.rowHover,
+            },
+        },
+    };
+}
+
+/**
+ * Basic text cell renderer.
+ * Displays text with optional truncation and tooltip.
+ */
+function TextCell({ value, column, item }) {
+    const displayValue = column.formatValue
+        ? column.formatValue(value, item)
+        : value;
+    const textValue = displayValue !== null && displayValue !== undefined
+        ? String(displayValue)
+        : '-';
+    return (jsx("div", { className: cellClass, children: jsx(Text, { title: textValue !== '-' ? textValue : undefined, styles: {
+                root: {
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                },
+            }, children: textValue }) }));
+}
+
+/**
+ * Link cell renderer.
+ * Displays a clickable link with hover underline.
+ */
+function LinkCell({ item, value, column }) {
+    const displayValue = column.formatValue
+        ? column.formatValue(value, item)
+        : value;
+    const textValue = displayValue !== null && displayValue !== undefined
+        ? String(displayValue)
+        : '(No Name)';
+    const handleClick = useCallback(() => {
+        if (column.onLinkClick) {
+            column.onLinkClick(item);
+        }
+    }, [column, item]);
+    const handleKeyDown = useCallback((event) => {
+        if ((event.key === 'Enter' || event.key === ' ') && column.onLinkClick) {
+            event.preventDefault();
+            column.onLinkClick(item);
+        }
+    }, [column, item]);
+    return (jsx("div", { className: cellClass, children: jsx("span", { className: linkCellClass, onClick: handleClick, onKeyDown: handleKeyDown, role: "button", tabIndex: 0, title: textValue, children: textValue }) }));
+}
+
+/**
+ * Currency cell renderer.
+ * Displays formatted currency values with locale support.
+ */
+function CurrencyCell({ value, column, item }) {
+    const numericValue = typeof value === 'number' ? value : null;
+    const displayValue = column.formatValue
+        ? column.formatValue(value, item)
+        : numericValue !== null
+            ? formatCurrency(numericValue, column.currencyCode || 'USD', column.locale || 'en-US')
+            : '-';
+    return (jsx("div", { className: cellClass, children: jsx(Text, { className: currencyCellClass, title: displayValue, children: displayValue }) }));
+}
+
+/**
+ * Date cell renderer.
+ * Displays formatted date or datetime values.
+ */
+function DateCell({ value, column, item }) {
+    const stringValue = value !== null && value !== undefined ? String(value) : null;
+    const locale = column.locale || 'en-US';
+    let displayValue;
+    if (column.formatValue) {
+        displayValue = column.formatValue(value, item);
+    }
+    else if (stringValue) {
+        displayValue = column.fieldType === 'datetime'
+            ? formatDateTime(stringValue, locale)
+            : formatDate(stringValue, locale);
+    }
+    else {
+        displayValue = '-';
+    }
+    return (jsx("div", { className: cellClass, children: jsx(Text, { title: displayValue !== '-' ? displayValue : undefined, children: displayValue }) }));
+}
+
+/**
+ * Number cell renderer.
+ * Displays formatted numeric values with locale support.
+ */
+function NumberCell({ value, column, item }) {
+    const numericValue = typeof value === 'number' ? value : null;
+    const locale = column.locale || 'en-US';
+    const displayValue = column.formatValue
+        ? column.formatValue(value, item)
+        : numericValue !== null
+            ? formatNumber(numericValue, locale)
+            : '-';
+    return (jsx("div", { className: cellClass, children: jsx(Text, { title: displayValue !== '-' ? displayValue : undefined, styles: {
+                root: {
+                    textAlign: 'right',
+                    width: '100%',
+                },
+            }, children: displayValue }) }));
+}
+
+/**
+ * Default colors for option set values.
+ */
+const DEFAULT_OPTIONSET_COLORS = {
+    0: '#107c10', // Active/Yes (green)
+    1: '#d13438', // Inactive/No (red)
+    2: '#0078d4', // Open (blue)
+    3: '#ffb900', // Pending (yellow)
+    4: '#605e5c', // Closed (gray)
+};
+/**
+ * Resolve one optionset value → a badge (label + background + optional icon).
+ * Returns null for empty/unlabeled values. Color precedence: per-option `color` >
+ * `getBackgroundColor` > `colorMap` > numeric default > gray. Label precedence:
+ * per-option `label` > `formatValue` > raw string.
+ */
+function resolveBadge(v, column, item) {
+    if (v === null || v === undefined || v === '')
+        return null;
+    const option = column.optionSetOptions?.find((o) => String(o.value) === String(v));
+    const label = option?.label ?? (column.formatValue ? column.formatValue(v, item) : String(v));
+    if (!label || label === '-')
+        return null;
+    let bg = option?.color;
+    if (!bg && column.getBackgroundColor)
+        bg = column.getBackgroundColor(v);
+    if (!bg && column.colorMap) {
+        const key = typeof v === 'number' ? v : String(v);
+        bg = column.colorMap[key];
+    }
+    if (!bg && typeof v === 'number' && v in DEFAULT_OPTIONSET_COLORS)
+        bg = DEFAULT_OPTIONSET_COLORS[v];
+    if (!bg)
+        bg = '#c8c6c4';
+    return { label, bg: normalizeHexColor(bg), iconName: option?.iconName };
+}
+/**
+ * OptionSet cell renderer. Displays a colored badge per value — one for a single
+ * value, several for a multi-select array. Per-option `iconName` renders a Fluent
+ * `<Icon>` (requires `initializeIcons()` on the host).
+ */
+function OptionSetCell({ item, value, column }) {
+    const multi = Array.isArray(value);
+    const values = multi ? value : [value];
+    const badges = values.map((v) => resolveBadge(v, column, item)).filter((b) => b !== null);
+    if (badges.length === 0) {
+        return jsx("div", { className: cellClass, children: "-" });
+    }
+    return (jsx("div", { className: cellClass, style: multi ? { display: 'flex', gap: 4, flexWrap: 'wrap' } : undefined, children: badges.map((b, i) => (jsxs("span", { className: coloredBadgeClass, style: {
+                backgroundColor: b.bg,
+                color: getContrastColor(b.bg),
+                ...(b.iconName ? { display: 'inline-flex', alignItems: 'center', gap: 4 } : {}),
+            }, children: [b.iconName && jsx(Icon, { iconName: b.iconName, style: { fontSize: 12 }, "aria-hidden": true }), b.label] }, `${b.label}-${i}`))) }));
+}
+
+/**
+ * Toggle cell renderer.
+ * Displays a toggle switch for boolean values.
+ */
+function ToggleCell({ item, value, column, itemKey }) {
+    const boolValue = Boolean(value);
+    const handleChange = useCallback((_event, checked) => {
+        if (column.onToggleChange && column.fieldName) {
+            column.onToggleChange(itemKey, column.fieldName, checked ?? false);
+        }
+    }, [column, itemKey]);
+    // Stop propagation to prevent row click when clicking toggle
+    const handleClick = useCallback((event) => {
+        event.stopPropagation();
+    }, []);
+    return (jsx("div", { className: cellClass, onClick: handleClick, children: jsx(Toggle, { checked: boolValue, onText: column.toggleOnText || 'Yes', offText: column.toggleOffText || 'No', onChange: handleChange, disabled: !column.editable, styles: {
+                root: { margin: 0 },
+            } }) }));
+}
+
+/**
+ * Icon cell renderer.
+ * Displays an icon button with click handler.
+ */
+function IconCell({ item, column }) {
+    const iconProps = {
+        iconName: column.iconName || 'More',
+    };
+    const handleClick = useCallback((event) => {
+        event.stopPropagation(); // Prevent row click
+        if (column.onIconClick) {
+            column.onIconClick(item);
+        }
+    }, [column, item]);
+    return (jsx("div", { className: iconButtonCellClass, children: jsx(IconButton, { iconProps: iconProps, title: column.iconTitle || column.name, ariaLabel: column.iconTitle || column.name, onClick: handleClick, styles: {
+                root: {
+                    width: 32,
+                    height: 32,
+                },
+                rootHovered: {
+                    backgroundColor: '#f3f2f1',
+                },
+            } }) }));
+}
+
+/**
+ * Progress bar cell renderer.
+ * Displays a horizontal progress bar with optional label.
+ */
+function ProgressBarCell({ value, column }) {
+    const numericValue = typeof value === 'number' ? value : 0;
+    const maxValue = column.progressMax || 100;
+    const percentage = Math.min(100, Math.max(0, (numericValue / maxValue) * 100));
+    const progressColor = column.progressColor || '#0078d4';
+    const showLabel = column.showProgressLabel !== false;
+    return (jsxs("div", { className: progressBarContainerClass, children: [jsx("div", { className: progressBarBackgroundClass, children: jsx("div", { className: progressBarFillClass, style: {
+                        width: `${percentage}%`,
+                        backgroundColor: progressColor,
+                    } }) }), showLabel && (jsxs("span", { className: progressBarLabelClass, children: [Math.round(percentage), "%"] }))] }));
+}
+
+/**
+ * Colored cell renderer.
+ * Displays text with a colored background based on value.
+ */
+function ColoredCell({ item, value, column }) {
+    // Get display text
+    const displayValue = column.formatValue
+        ? column.formatValue(value, item)
+        : value !== null && value !== undefined
+            ? String(value)
+            : '-';
+    if (displayValue === '-') {
+        return jsx("div", { className: cellClass, children: "-" });
+    }
+    // Get background color
+    let backgroundColor;
+    if (column.getBackgroundColor && value !== null && value !== undefined) {
+        backgroundColor = column.getBackgroundColor(value);
+    }
+    else if (column.colorMap && value !== null && value !== undefined) {
+        const key = typeof value === 'number' ? value : String(value);
+        backgroundColor = column.colorMap[key];
+    }
+    // If no color mapping, render as plain text
+    if (!backgroundColor) {
+        return (jsx("div", { className: cellClass, children: displayValue }));
+    }
+    const normalizedBg = normalizeHexColor(backgroundColor);
+    const textColor = getContrastColor(normalizedBg);
+    return (jsx("div", { className: cellClass, children: jsx("span", { className: coloredBadgeClass, style: {
+                backgroundColor: normalizedBg,
+                color: textColor,
+            }, children: displayValue }) }));
+}
+
+/**
+ * Lookup cell renderer.
+ * Displays lookup field values with optional click handler or Dynamics navigation.
+ *
+ * Navigation is enabled when:
+ * - dynamicsBaseUrl is provided
+ * - column.lookupTargetEntity is configured
+ * - The lookup has a value (not null)
+ */
+function LookupCell({ item, value, column, dynamicsBaseUrl }) {
+    // For lookup fields, try to get display value from the lookup display field
+    let displayValue;
+    if (column.formatValue) {
+        displayValue = column.formatValue(value, item);
+    }
+    else if (column.lookupDisplayField && typeof item === 'object' && item !== null) {
+        const lookupValue = item[column.lookupDisplayField];
+        displayValue = lookupValue !== null && lookupValue !== undefined
+            ? String(lookupValue)
+            : '-';
+    }
+    else if (typeof value === 'object' && value !== null) {
+        // Try common lookup value patterns
+        const lookupObj = value;
+        displayValue = String(lookupObj.name || lookupObj.fullname || lookupObj.title || '-');
+    }
+    else {
+        displayValue = value !== null && value !== undefined ? String(value) : '-';
+    }
+    // Extract lookup ID for navigation
+    // Dynamics stores lookup IDs in different formats depending on $expand usage:
+    // 1. Without $expand: _fieldname_value (e.g., _primarycontactid_value)
+    // 2. With $expand: item.fieldname.entityid (e.g., item.primarycontactid.contactid)
+    const fieldName = column.fieldName || column.key;
+    const itemRecord = item;
+    // Try _fieldname_value format first (non-expanded)
+    const lookupIdKey = `_${fieldName}_value`;
+    let lookupId = itemRecord[lookupIdKey];
+    // If not found, try expanded object format
+    if (!lookupId && column.lookupPrimaryIdAttribute) {
+        const expandedValue = itemRecord[fieldName];
+        if (expandedValue && typeof expandedValue === 'object') {
+            const expanded = expandedValue;
+            lookupId = expanded[column.lookupPrimaryIdAttribute];
+        }
+    }
+    // Fallback: try common ID patterns in expanded object
+    if (!lookupId) {
+        const expandedValue = itemRecord[fieldName];
+        if (expandedValue && typeof expandedValue === 'object') {
+            const expanded = expandedValue;
+            // Try targetentityid (e.g., contactid, accountid)
+            if (column.lookupTargetEntity) {
+                lookupId = expanded[`${column.lookupTargetEntity}id`];
+            }
+            // Try generic patterns
+            if (!lookupId) {
+                lookupId = (expanded.id || expanded.Id);
+            }
+        }
+    }
+    // Determine if navigation is available
+    const canNavigate = !!(dynamicsBaseUrl && column.lookupTargetEntity && lookupId && displayValue !== '-');
+    // Handle navigation to Dynamics record
+    const handleNavigate = () => {
+        if (canNavigate) {
+            const url = `${dynamicsBaseUrl}/main.aspx?etn=${column.lookupTargetEntity}&id=${lookupId}&pagetype=entityrecord`;
+            window.open(url, '_blank');
+        }
+    };
+    const handleKeyDown = (event) => {
+        if ((event.key === 'Enter' || event.key === ' ')) {
+            event.preventDefault();
+            if (column.onLinkClick) {
+                column.onLinkClick(item);
+            }
+            else if (canNavigate) {
+                handleNavigate();
+            }
+        }
+    };
+    // If there's a custom click handler, use it (priority over navigation)
+    if (column.onLinkClick && displayValue !== '-') {
+        const handleClick = () => {
+            if (column.onLinkClick) {
+                column.onLinkClick(item);
+            }
+        };
+        return (jsx("div", { className: cellClass, children: jsx("span", { className: linkCellClass, onClick: handleClick, onKeyDown: handleKeyDown, role: "button", tabIndex: 0, title: displayValue, children: displayValue }) }));
+    }
+    // If navigation is available, render as clickable link
+    if (canNavigate) {
+        return (jsx("div", { className: cellClass, children: jsx("span", { className: linkCellClass, onClick: handleNavigate, onKeyDown: handleKeyDown, role: "link", tabIndex: 0, title: `Open ${displayValue} in Dynamics 365`, children: displayValue }) }));
+    }
+    // Default: render as plain text
+    return (jsx("div", { className: cellClass, children: jsx(Text, { title: displayValue !== '-' ? displayValue : undefined, children: displayValue }) }));
+}
+
+/**
+ * Shared emoji-rating data + helpers for the 'emoji' rating style.
+ *
+ * Ported from the form-designer rating control (sentiment faces, 2–5 count).
+ * Used by both the read-only `RatingCell` (single selected face) and the
+ * `EditableRatingCell` (clickable face row).
+ *
+ * NOTE: the emoji style renders Fluent `<Icon>` faces, which require the host to
+ * have called `initializeIcons()`. The 'stars' style stays icon-registration-free.
+ */
+/** Fluent icon names + accessible labels per face count (2–5). */
+const EMOJI_SETS = {
+    2: { icons: ['EmojiDisappointed', 'Emoji'], labels: ['Unhappy', 'Happy'] },
+    3: {
+        icons: ['EmojiDisappointed', 'EmojiNeutral', 'Emoji'],
+        labels: ['Unhappy', 'Neutral', 'Happy'],
+    },
+    4: {
+        icons: ['EmojiDisappointed', 'Sad', 'Emoji2', 'Emoji'],
+        labels: ['Very Unhappy', 'Unhappy', 'Happy', 'Very Happy'],
+    },
+    5: {
+        icons: ['EmojiDisappointed', 'Sad', 'EmojiNeutral', 'Emoji2', 'Emoji'],
+        labels: ['Very Unhappy', 'Unhappy', 'Neutral', 'Happy', 'Very Happy'],
+    },
+};
+/** Sentiment colors (red→green) per face count, aligned to `EMOJI_SETS`. */
+const EMOJI_COLORS = {
+    2: ['#d13438', '#107c10'],
+    3: ['#d13438', '#c8c820', '#107c10'],
+    4: ['#d13438', '#ca5010', '#498205', '#107c10'],
+    5: ['#d13438', '#ca5010', '#c8c820', '#498205', '#107c10'],
+};
+/** Clamp a face count into the supported 2–5 range, falling back to ratingMax then 5. */
+function clampFaceCount(faceCount, ratingMax) {
+    const raw = faceCount ?? ratingMax ?? 5;
+    const n = Math.floor(Number(raw));
+    return Math.max(2, Math.min(5, Number.isFinite(n) ? n : 5));
+}
+/** 1-based selected face index from a numeric value (0 = none/unset). */
+function selectedFaceIndex(value, faceCount) {
+    const raw = typeof value === 'number' ? value : Number(value);
+    if (!Number.isFinite(raw) || raw <= 0)
+        return 0;
+    return Math.min(faceCount, Math.max(1, Math.round(raw)));
+}
+
+/**
+ * Rating cell renderer.
+ * Displays a star rating (e.g. 0–5) from a numeric value. With `ratingAllowHalf`
+ * (default true) each star fills to the exact fraction of the value (so 3.5 shows
+ * three and a half filled stars); set it false to floor to whole stars.
+ *
+ * NOTE: the default `ratingStyle: 'stars'` uses unicode stars colored via CSS
+ * `background-clip: text`, so no Fluent icon registration is required. The
+ * `ratingStyle: 'emoji'` (sentiment faces) variant renders Fluent `<Icon>`s and
+ * therefore REQUIRES the host to have called `initializeIcons()` (same as IconCell).
+ */
+function RatingCell({ value, column }) {
+    // Emoji (sentiment) style: a single selected face, optionally sentiment-colored.
+    if (column.ratingStyle === 'emoji') {
+        const faceCount = clampFaceCount(column.ratingFaceCount, column.ratingMax);
+        const set = EMOJI_SETS[faceCount];
+        const idx = selectedFaceIndex(value, faceCount); // 1-based, 0 = none
+        if (idx === 0) {
+            return (jsx("div", { className: ratingCellClass, role: "img", "aria-label": "No rating", children: "\u2013" }));
+        }
+        const useColor = column.ratingUseSentimentColor !== false; // default true for emoji
+        const color = useColor ? EMOJI_COLORS[faceCount][idx - 1] : column.ratingColor || '#605e5c';
+        return (jsx("div", { className: ratingCellClass, role: "img", "aria-label": `${set.labels[idx - 1]} (${idx} out of ${faceCount})`, children: jsx(Icon, { iconName: set.icons[idx - 1], style: { color, fontSize: 18 } }) }));
+    }
+    const max = column.ratingMax && column.ratingMax > 0 ? Math.floor(column.ratingMax) : 5;
+    const filledColor = column.ratingColor || '#ffb900';
+    const emptyColor = '#c8c6c4';
+    const allowHalf = column.ratingAllowHalf !== false;
+    const raw = typeof value === 'number' ? value : Number(value);
+    const rating = Number.isFinite(raw) ? Math.min(max, Math.max(0, raw)) : 0;
+    const stars = [];
+    for (let i = 1; i <= max; i++) {
+        // Fraction of THIS star that is filled (0..1).
+        let frac = Math.max(0, Math.min(1, rating - (i - 1)));
+        if (!allowHalf)
+            frac = frac >= 1 ? 1 : 0; // whole-star (floor) rounding
+        const pct = Math.round(frac * 100);
+        stars.push(jsx("span", { className: ratingStarClass, style: {
+                background: `linear-gradient(90deg, ${filledColor} ${pct}%, ${emptyColor} ${pct}%)`,
+                WebkitBackgroundClip: 'text',
+                backgroundClip: 'text',
+                color: 'transparent',
+                WebkitTextFillColor: 'transparent',
+            }, "aria-hidden": "true", children: "\u2605" }, i));
+    }
+    // Announce what is actually shown: the exact value (half mode) or the floored
+    // whole-star count.
+    const announced = allowHalf ? rating : Math.floor(rating);
+    return (jsx("div", { className: ratingCellClass, role: "img", "aria-label": `${announced} out of ${max}`, children: stars }));
+}
+
+/** Read a (possibly nested-free) field off the row. */
+function getField(item, field) {
+    if (!field || item === null || typeof item !== 'object')
+        return undefined;
+    return item[field];
+}
+/** Coerce to a number, treating empty/null/undefined as NaN (not 0). */
+function asNum(x) {
+    if (x === '' || x === null || x === undefined)
+        return NaN;
+    return typeof x === 'number' ? x : Number(x);
+}
+/** Evaluate a single conditional-style rule against the row. */
+function conditionMatches(cond, item) {
+    const actual = getField(item, cond.field);
+    const a = asNum(actual);
+    const c = asNum(cond.value);
+    const bothNumeric = Number.isFinite(a) && Number.isFinite(c);
+    switch (cond.operator) {
+        case 'eq':
+            // Numeric equality when both sides are numbers (so 1 === '1' and
+            // 5 === 5.0), else exact string compare.
+            return bothNumeric ? a === c : String(actual) === String(cond.value);
+        case 'gt':
+            return bothNumeric && a > c;
+        case 'lt':
+            return bothNumeric && a < c;
+        case 'gte':
+            return bothNumeric && a >= c;
+        case 'lte':
+            return bothNumeric && a <= c;
+        case 'contains':
+            return String(actual ?? '')
+                .toLowerCase()
+                .includes(String(cond.value).toLowerCase());
+        case 'between': {
+            const to = asNum(cond.valueTo !== undefined ? cond.valueTo : cond.value);
+            return Number.isFinite(a) && Number.isFinite(c) && Number.isFinite(to) && a >= c && a <= to;
+        }
+        default:
+            return false;
+    }
+}
+/** Resolve a slot's style: first matching conditional style, else default. */
+function resolveSlotStyle(slot, item) {
+    if (slot.conditionalStyles) {
+        for (const cs of slot.conditionalStyles) {
+            if (conditionMatches(cs, item))
+                return cs.style;
+        }
+    }
+    return slot.defaultStyle || {};
+}
+function renderSlot(slot, item) {
+    const style = resolveSlotStyle(slot, item);
+    const bound = getField(item, slot.fieldBinding);
+    const text = bound !== undefined && bound !== null ? String(bound) : slot.staticValue ?? '';
+    switch (slot.type) {
+        case 'spacer':
+            return jsx("span", { style: { flex: 1, ...style } }, slot.id);
+        case 'icon':
+            return (jsx(Icon, { iconName: slot.staticValue || (bound ? String(bound) : 'CircleFill'), style: style }, slot.id));
+        case 'image':
+            return (jsx("img", { src: text, alt: "", style: { height: 20, width: 20, objectFit: 'cover', borderRadius: 2, ...style } }, slot.id));
+        case 'badge':
+            return (jsx("span", { style: { padding: '2px 8px', borderRadius: 4, fontSize: 12, fontWeight: 600, ...style }, children: text }, slot.id));
+        case 'link':
+            return (jsx("a", { href: "#", onClick: (e) => e.preventDefault(), style: { color: '#0078d4', cursor: 'pointer', textDecoration: 'none', ...style }, children: text }, slot.id));
+        case 'progress': {
+            const pct = Math.min(100, Math.max(0, Number(bound) || 0));
+            return (jsx("span", { style: {
+                    display: 'inline-block',
+                    width: 60,
+                    height: 8,
+                    background: '#edebe9',
+                    borderRadius: 4,
+                    overflow: 'hidden',
+                    ...style,
+                }, children: jsx("span", { style: { display: 'block', height: '100%', width: `${pct}%`, background: '#0078d4' } }) }, slot.id));
+        }
+        case 'rating': {
+            const r = Math.round(Number(bound) || 0);
+            return (jsxs("span", { style: { color: '#ffb900', ...style }, children: ['★'.repeat(Math.max(0, r)), '☆'.repeat(Math.max(0, 5 - r))] }, slot.id));
+        }
+        case 'text':
+        default:
+            return (jsx("span", { style: style, children: text }, slot.id));
+    }
+}
+/**
+ * Composite cell renderer.
+ * Renders an ordered list of slots (icon/text/badge/link/image/spacer/progress/
+ * rating) in one cell, each with optional conditional styling. Configured via
+ * `column.compositeSlots` / `compositeLayout` / `compositeGap`.
+ *
+ * NOTE: the `icon` slot uses Fluent UI's `Icon`, so the host app must call
+ * `initializeIcons()` once at startup or icon slots render blank.
+ */
+function CompositeCell({ item, column }) {
+    const slots = column.compositeSlots || [];
+    const layout = column.compositeLayout || 'horizontal';
+    const gap = column.compositeGap ?? 4;
+    return (jsx("div", { className: compositeCellClass, style: {
+            flexDirection: layout === 'vertical' ? 'column' : 'row',
+            alignItems: layout === 'vertical' ? 'flex-start' : 'center',
+            gap,
+        }, children: slots.map((slot) => renderSlot(slot, item)) }));
+}
+
+// Styles for the text field in edit mode
+const textFieldStyles = {
+    root: {
+        width: '100%',
+    },
+    fieldGroup: {
+        height: 28,
+        minHeight: 28,
+        border: 'none',
+        backgroundColor: 'transparent',
+        selectors: {
+            ':hover': {
+                border: '1px solid #c8c6c4',
+                backgroundColor: 'white',
+            },
+            ':focus-within': {
+                border: '1px solid #0078d4',
+                backgroundColor: 'white',
+            },
+        },
+    },
+    field: {
+        fontSize: 13,
+        padding: '0 8px',
+    },
+};
+const textFieldErrorStyles = {
+    ...textFieldStyles,
+    fieldGroup: {
+        ...textFieldStyles.fieldGroup,
+        border: '1px solid #d13438',
+        selectors: {
+            ':hover': {
+                border: '1px solid #d13438',
+                backgroundColor: 'white',
+            },
+            ':focus-within': {
+                border: '1px solid #d13438',
+                backgroundColor: 'white',
+            },
+        },
+    },
+};
+const readOnlyClass$2 = mergeStyles({
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    fontSize: 13,
+});
+/**
+ * Editable text cell renderer.
+ * Displays as text in read mode, as TextField in edit mode.
+ * Shows blue indicator when dirty, red indicator when has validation error.
+ */
+function EditableTextCell({ item, column, value, itemKey, isEditMode, isDirty, editedValue, onValueChange, errorMessage, onValidationError, }) {
+    const fieldName = column.fieldName || column.key;
+    const currentValue = editedValue !== undefined ? editedValue : value;
+    const stringValue = currentValue !== null && currentValue !== undefined
+        ? String(currentValue)
+        : '';
+    // Local state for immediate input feedback
+    const [localValue, setLocalValue] = useState(stringValue);
+    const inputRef = useRef(null);
+    // Sync local value when props change
+    useEffect(() => {
+        setLocalValue(stringValue);
+    }, [stringValue]);
+    // Handle input change
+    const handleChange = useCallback((_, newValue) => {
+        const val = newValue ?? '';
+        setLocalValue(val);
+        // Validate if column has validate function
+        const col = column;
+        if (col.validate && onValidationError) {
+            const error = col.validate(val, itemKey);
+            onValidationError(itemKey, fieldName, error);
+        }
+        // Notify parent of change
+        onValueChange(itemKey, fieldName, val || null, value);
+    }, [column, fieldName, itemKey, value, onValueChange, onValidationError]);
+    // Handle blur - final validation
+    const handleBlur = useCallback(() => {
+        const col = column;
+        if (col.validate && onValidationError) {
+            const error = col.validate(localValue, itemKey);
+            onValidationError(itemKey, fieldName, error);
+        }
+    }, [column, fieldName, itemKey, localValue, onValidationError]);
+    // If not in edit mode, show read-only text
+    if (!isEditMode) {
+        const displayValue = column.formatValue
+            ? column.formatValue(value, item)
+            : stringValue || '-';
+        return (jsx("div", { className: editableCellClass, children: jsx("span", { className: readOnlyClass$2, title: displayValue !== '-' ? displayValue : undefined, children: displayValue }) }));
+    }
+    // Determine indicator class
+    let indicatorClass = '';
+    if (errorMessage) {
+        indicatorClass = errorCellIndicatorClass;
+    }
+    else if (isDirty) {
+        indicatorClass = dirtyCellIndicatorClass;
+    }
+    const wrapperClass = mergeStyles(editableCellInputWrapperClass, indicatorClass);
+    return (jsx("div", { className: editableCellClass, children: jsxs("div", { className: wrapperClass, children: [jsx(TextField, { componentRef: inputRef, value: localValue, onChange: handleChange, onBlur: handleBlur, borderless: true, styles: errorMessage ? textFieldErrorStyles : textFieldStyles, ariaLabel: `${column.name} for ${item.key}` }), errorMessage && (jsx("span", { className: cellErrorTextClass, title: errorMessage, children: errorMessage }))] }) }));
+}
+
+// Styles for the number input in edit mode
+const numberFieldStyles = {
+    root: {
+        width: '100%',
+    },
+    fieldGroup: {
+        height: 28,
+        minHeight: 28,
+        border: 'none',
+        backgroundColor: 'transparent',
+        selectors: {
+            ':hover': {
+                border: '1px solid #c8c6c4',
+                backgroundColor: 'white',
+            },
+            ':focus-within': {
+                border: '1px solid #0078d4',
+                backgroundColor: 'white',
+            },
+        },
+    },
+    field: {
+        fontSize: 13,
+        padding: '0 8px',
+        textAlign: 'right',
+    },
+};
+const numberFieldErrorStyles = {
+    ...numberFieldStyles,
+    fieldGroup: {
+        ...numberFieldStyles.fieldGroup,
+        border: '1px solid #d13438',
+        selectors: {
+            ':hover': {
+                border: '1px solid #d13438',
+                backgroundColor: 'white',
+            },
+            ':focus-within': {
+                border: '1px solid #d13438',
+                backgroundColor: 'white',
+            },
+        },
+    },
+};
+const readOnlyClass$1 = mergeStyles({
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    fontSize: 13,
+    textAlign: 'right',
+    width: '100%',
+});
+/**
+ * Parse a string to a number, handling currency formats.
+ */
+function parseNumericValue(value) {
+    if (!value || value.trim() === '')
+        return null;
+    // Remove currency symbols, thousands separators, and whitespace
+    const cleaned = value.replace(/[$\u20ac\u00a3\u00a5,\s]/g, '');
+    const num = parseFloat(cleaned);
+    return isNaN(num) ? null : num;
+}
+/**
+ * Editable number cell renderer.
+ * Displays formatted number/currency in read mode, as TextField in edit mode.
+ * Shows blue indicator when dirty, red indicator when has validation error.
+ */
+function EditableNumberCell({ item, column, value, itemKey, isEditMode, isDirty, editedValue, onValueChange, errorMessage, onValidationError, isCurrency = false, }) {
+    const fieldName = column.fieldName || column.key;
+    const currentValue = editedValue !== undefined ? editedValue : value;
+    const numericValue = typeof currentValue === 'number' ? currentValue : null;
+    // For edit mode, show raw number
+    const editDisplayValue = numericValue !== null ? String(numericValue) : '';
+    // Local state for immediate input feedback
+    const [localValue, setLocalValue] = useState(editDisplayValue);
+    const inputRef = useRef(null);
+    // Sync local value when props change
+    useEffect(() => {
+        setLocalValue(editDisplayValue);
+    }, [editDisplayValue]);
+    // Handle input change
+    const handleChange = useCallback((_, newValue) => {
+        const val = newValue ?? '';
+        setLocalValue(val);
+        // Parse to number
+        const parsedValue = parseNumericValue(val);
+        // Validate if column has validate function
+        const col = column;
+        if (col.validate && onValidationError) {
+            const error = col.validate(parsedValue, itemKey);
+            onValidationError(itemKey, fieldName, error);
+        }
+        // Notify parent of change
+        onValueChange(itemKey, fieldName, parsedValue, value);
+    }, [column, fieldName, itemKey, value, onValueChange, onValidationError]);
+    // Handle blur - validate and format
+    const handleBlur = useCallback(() => {
+        const parsedValue = parseNumericValue(localValue);
+        const col = column;
+        if (col.validate && onValidationError) {
+            const error = col.validate(parsedValue, itemKey);
+            onValidationError(itemKey, fieldName, error);
+        }
+        // Update local value to show the parsed number
+        if (parsedValue !== null) {
+            setLocalValue(String(parsedValue));
+        }
+        else if (localValue.trim() === '') {
+            setLocalValue('');
+        }
+    }, [column, fieldName, itemKey, localValue, onValidationError]);
+    // If not in edit mode, show formatted read-only text
+    if (!isEditMode) {
+        const locale = column.locale || 'en-US';
+        const currencyCode = column.currencyCode || 'USD';
+        let displayValue;
+        if (column.formatValue) {
+            displayValue = column.formatValue(value, item);
+        }
+        else if (numericValue !== null) {
+            displayValue = isCurrency || column.fieldType === 'currency'
+                ? formatCurrency(numericValue, currencyCode, locale)
+                : formatNumber(numericValue, locale);
+        }
+        else {
+            displayValue = '-';
+        }
+        return (jsx("div", { className: editableCellClass, children: jsx("span", { className: mergeStyles(readOnlyClass$1, isCurrency || column.fieldType === 'currency' ? currencyCellClass : ''), title: displayValue !== '-' ? displayValue : undefined, children: displayValue }) }));
+    }
+    // Determine indicator class
+    let indicatorClass = '';
+    if (errorMessage) {
+        indicatorClass = errorCellIndicatorClass;
+    }
+    else if (isDirty) {
+        indicatorClass = dirtyCellIndicatorClass;
+    }
+    const wrapperClass = mergeStyles(editableCellInputWrapperClass, indicatorClass);
+    return (jsx("div", { className: editableCellClass, children: jsxs("div", { className: wrapperClass, children: [jsx(TextField, { componentRef: inputRef, value: localValue, onChange: handleChange, onBlur: handleBlur, borderless: true, styles: errorMessage ? numberFieldErrorStyles : numberFieldStyles, ariaLabel: `${column.name} for ${item.key}`, type: "text", inputMode: "decimal" }), errorMessage && (jsx("span", { className: cellErrorTextClass, title: errorMessage, children: errorMessage }))] }) }));
+}
+
+// Styles for the DatePicker in edit mode
+const datePickerStyles = {
+    root: {
+        width: '100%',
+    },
+    textField: {
+        fieldGroup: {
+            height: 28,
+            minHeight: 28,
+            border: 'none',
+            backgroundColor: 'transparent',
+            selectors: {
+                ':hover': {
+                    border: '1px solid #c8c6c4',
+                    backgroundColor: 'white',
+                },
+                ':focus-within': {
+                    border: '1px solid #0078d4',
+                    backgroundColor: 'white',
+                },
+            },
+        },
+        field: {
+            fontSize: 13,
+            padding: '0 8px',
+            lineHeight: '28px',
+        },
+    },
+};
+const datePickerErrorStyles = {
+    ...datePickerStyles,
+    textField: {
+        ...datePickerStyles.textField,
+        fieldGroup: {
+            ...datePickerStyles.textField.fieldGroup,
+            border: '1px solid #d13438',
+            selectors: {
+                ':hover': {
+                    border: '1px solid #d13438',
+                    backgroundColor: 'white',
+                },
+                ':focus-within': {
+                    border: '1px solid #d13438',
+                    backgroundColor: 'white',
+                },
+            },
+        },
+    },
+};
+// Narrower DatePicker when shown alongside time picker
+const dateTimePickerStyles = {
+    ...datePickerStyles,
+    root: {
+        flex: '1 1 60%',
+        minWidth: 0,
+    },
+};
+const dateTimePickerErrorStyles = {
+    ...datePickerErrorStyles,
+    root: {
+        flex: '1 1 60%',
+        minWidth: 0,
+    },
+};
+// Styles for the time ComboBox -- match DatePicker's 28px height exactly
+const timeComboBoxStyles = {
+    root: {
+        flex: '1 1 40%',
+        minWidth: 0,
+        height: 28,
+    },
+    container: {
+        height: 28,
+        minHeight: 28,
+        selectors: {
+            '::after': {
+                // Remove Fluent's default focus border (we handle it ourselves)
+                border: 'none',
+            },
+        },
+    },
+    input: {
+        height: 26,
+        fontSize: 13,
+        padding: '0 0 0 8px',
+        boxSizing: 'border-box',
+    },
+    rootHovered: {
+        border: '1px solid #c8c6c4',
+        backgroundColor: 'white',
+    },
+    rootFocused: {
+        border: '1px solid #0078d4',
+        backgroundColor: 'white',
+    },
+    rootPressed: {
+        border: '1px solid #0078d4',
+        backgroundColor: 'white',
+    },
+};
+const dateTimeRowClass = mergeStyles({
+    display: 'flex',
+    gap: 4,
+    width: '100%',
+    alignItems: 'flex-start',
+});
+/**
+ * Build time options in 15-minute increments (12-hour format).
+ */
+function buildTimeOptions() {
+    const options = [];
+    for (let h = 0; h < 24; h++) {
+        for (let m = 0; m < 60; m += 15) {
+            const hour12 = h === 0 ? 12 : h > 12 ? h - 12 : h;
+            const ampm = h < 12 ? 'AM' : 'PM';
+            const label = `${hour12}:${m.toString().padStart(2, '0')} ${ampm}`;
+            const key = `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}`;
+            options.push({ key, text: label });
+        }
+    }
+    return options;
+}
+const TIME_OPTIONS = buildTimeOptions();
+/**
+ * Parse an ISO string or Date into a Date object. Returns null if invalid.
+ */
+function parseToDate(value) {
+    if (!value)
+        return null;
+    if (value instanceof Date)
+        return isNaN(value.getTime()) ? null : value;
+    const d = new Date(String(value));
+    return isNaN(d.getTime()) ? null : d;
+}
+/**
+ * Format a Date for display in the DatePicker.
+ */
+function formatDateForDisplay(date) {
+    if (!date)
+        return '';
+    return date.toLocaleDateString('en-US', {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+    });
+}
+/**
+ * Get HH:MM key from a Date for the time ComboBox.
+ * Rounds to nearest 15-minute increment.
+ */
+function getTimeKey(date) {
+    const h = date.getHours();
+    const m = Math.round(date.getMinutes() / 15) * 15;
+    const adjustedH = m === 60 ? h + 1 : h;
+    const adjustedM = m === 60 ? 0 : m;
+    const finalH = adjustedH % 24;
+    return `${finalH.toString().padStart(2, '0')}:${adjustedM.toString().padStart(2, '0')}`;
+}
+/**
+ * Build an ISO date-only string (YYYY-MM-DD) from a Date.
+ */
+function toDateOnlyISO(date) {
+    const y = date.getFullYear();
+    const m = (date.getMonth() + 1).toString().padStart(2, '0');
+    const d = date.getDate().toString().padStart(2, '0');
+    return `${y}-${m}-${d}`;
+}
+/**
+ * Build an ISO datetime string from a Date.
+ */
+function toDateTimeISO(date) {
+    return date.toISOString();
+}
+/**
+ * Editable date/datetime cell renderer.
+ * - Date-only fields: Fluent UI DatePicker (calendar popup)
+ * - DateTime fields: DatePicker + time ComboBox side by side
+ * Shows blue indicator when dirty, red indicator when has validation error.
+ */
+function EditableDateCell({ item, column, value, itemKey, isEditMode, isDirty, editedValue, onValueChange, errorMessage, onValidationError, }) {
+    const fieldName = column.fieldName || column.key;
+    const currentValue = editedValue !== undefined ? editedValue : value;
+    const isDateTime = column.fieldType === 'datetime';
+    // Parse current value to a Date
+    const currentDate = useMemo(() => parseToDate(currentValue), [currentValue]);
+    // Current time key for the time ComboBox
+    const currentTimeKey = useMemo(() => (currentDate ? getTimeKey(currentDate) : '09:00'), [currentDate]);
+    // Validate helper
+    const runValidation = useCallback((newValue) => {
+        const col = column;
+        if (col.validate && onValidationError) {
+            const error = col.validate(newValue, itemKey);
+            onValidationError(itemKey, fieldName, error);
+        }
+    }, [column, fieldName, itemKey, onValidationError]);
+    // Handle date selection from DatePicker
+    const handleDateSelect = useCallback((date) => {
+        if (!date) {
+            // Cleared
+            runValidation(null);
+            onValueChange(itemKey, fieldName, null, value);
+            return;
+        }
+        if (isDateTime) {
+            // Preserve existing time or default to 09:00
+            const existingDate = parseToDate(currentValue);
+            if (existingDate) {
+                date.setHours(existingDate.getHours(), existingDate.getMinutes(), 0, 0);
+            }
+            else {
+                date.setHours(9, 0, 0, 0);
+            }
+            const isoValue = toDateTimeISO(date);
+            runValidation(isoValue);
+            onValueChange(itemKey, fieldName, isoValue, value);
+        }
+        else {
+            const isoValue = toDateOnlyISO(date);
+            runValidation(isoValue);
+            onValueChange(itemKey, fieldName, isoValue, value);
+        }
+    }, [isDateTime, currentValue, itemKey, fieldName, value, onValueChange, runValidation]);
+    // Handle time selection from ComboBox
+    const handleTimeChange = useCallback((_, option, _index, text) => {
+        // Determine the time key from selection or typed text
+        let timeKey = option?.key;
+        if (!timeKey && text) {
+            // Try to parse typed text like "2:30 PM"
+            const match = text.match(/^(\d{1,2}):(\d{2})\s*(AM|PM)?$/i);
+            if (match) {
+                let h = parseInt(match[1], 10);
+                const m = parseInt(match[2], 10);
+                const ampm = match[3]?.toUpperCase();
+                if (ampm === 'PM' && h < 12)
+                    h += 12;
+                if (ampm === 'AM' && h === 12)
+                    h = 0;
+                timeKey = `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}`;
+            }
+        }
+        if (!timeKey)
+            return;
+        const [hours, minutes] = timeKey.split(':').map(Number);
+        const baseDate = parseToDate(currentValue) || new Date();
+        const newDate = new Date(baseDate);
+        newDate.setHours(hours, minutes, 0, 0);
+        const isoValue = toDateTimeISO(newDate);
+        runValidation(isoValue);
+        onValueChange(itemKey, fieldName, isoValue, value);
+    }, [currentValue, itemKey, fieldName, value, onValueChange, runValidation]);
+    // If not in edit mode, delegate to DateCell
+    if (!isEditMode) {
+        return (jsx(DateCell, { item: item, column: column, value: value, itemKey: itemKey }));
+    }
+    // Determine indicator class
+    let indicatorClass = '';
+    if (errorMessage) {
+        indicatorClass = errorCellIndicatorClass;
+    }
+    else if (isDirty) {
+        indicatorClass = dirtyCellIndicatorClass;
+    }
+    const wrapperClass = mergeStyles(editableCellInputWrapperClass, indicatorClass);
+    if (isDateTime) {
+        // DateTime: DatePicker + Time ComboBox side by side
+        return (jsx("div", { className: editableCellClass, children: jsxs("div", { className: wrapperClass, children: [jsxs("div", { className: dateTimeRowClass, children: [jsx(DatePicker, { value: currentDate || undefined, onSelectDate: handleDateSelect, formatDate: formatDateForDisplay, placeholder: "Select date", styles: errorMessage ? dateTimePickerErrorStyles : dateTimePickerStyles, ariaLabel: `${column.name} date for ${item.key}`, allowTextInput: true }), jsx(ComboBox, { selectedKey: currentDate ? currentTimeKey : undefined, options: TIME_OPTIONS, onChange: handleTimeChange, placeholder: "Time", styles: timeComboBoxStyles, ariaLabel: `${column.name} time for ${item.key}`, allowFreeform: true, autoComplete: "on" })] }), errorMessage && (jsx("span", { className: cellErrorTextClass, title: errorMessage, children: errorMessage }))] }) }));
+    }
+    // Date-only: DatePicker
+    return (jsx("div", { className: editableCellClass, children: jsxs("div", { className: wrapperClass, children: [jsx(DatePicker, { value: currentDate || undefined, onSelectDate: handleDateSelect, formatDate: formatDateForDisplay, placeholder: "Select date", styles: errorMessage ? datePickerErrorStyles : datePickerStyles, ariaLabel: `${column.name} for ${item.key}`, allowTextInput: true }), errorMessage && (jsx("span", { className: cellErrorTextClass, title: errorMessage, children: errorMessage }))] }) }));
+}
+
+// Styles for the dropdown in edit mode
+const dropdownStyles = {
+    root: {
+        width: '100%',
+    },
+    dropdown: {
+        height: 28,
+        minHeight: 28,
+        border: 'none',
+        backgroundColor: 'transparent',
+        selectors: {
+            ':hover': {
+                border: '1px solid #c8c6c4',
+                backgroundColor: 'white',
+            },
+            ':focus::after': {
+                border: '1px solid #0078d4',
+            },
+        },
+    },
+    title: {
+        height: 28,
+        lineHeight: '26px',
+        fontSize: 13,
+        border: 'none',
+        backgroundColor: 'transparent',
+    },
+    caretDownWrapper: {
+        height: 28,
+        lineHeight: '28px',
+    },
+    dropdownItem: {
+        fontSize: 13,
+        minHeight: 32,
+    },
+    dropdownItemSelected: {
+        fontSize: 13,
+        minHeight: 32,
+    },
+};
+const dropdownErrorStyles = {
+    ...dropdownStyles,
+    dropdown: {
+        ...dropdownStyles.dropdown,
+        border: '1px solid #d13438',
+        selectors: {
+            ':hover': {
+                border: '1px solid #d13438',
+                backgroundColor: 'white',
+            },
+            ':focus::after': {
+                border: '1px solid #d13438',
+            },
+        },
+    },
+};
+/**
+ * Editable option set cell renderer.
+ * Displays as colored badge (OptionSetCell) in read mode, as Dropdown in edit mode.
+ * Shows blue indicator when dirty, red indicator when has validation error.
+ */
+function EditableOptionSetCell({ item, column, value, itemKey, isEditMode, isDirty, editedValue, onValueChange, errorMessage, onValidationError, }) {
+    const fieldName = column.fieldName || column.key;
+    const currentValue = editedValue !== undefined ? editedValue : value;
+    const isMulti = !!column.optionSetMultiSelect;
+    const hasIcons = column.optionSetOptions?.some((o) => !!o.iconName) ?? false;
+    // Build dropdown options. Keys preserve the option's value type (number or
+    // string) — no Number() coercion. Single-select prepends a (None) option;
+    // multi-select clears by de-selecting. `data` carries icon/color for rendering.
+    const dropdownOptions = useMemo(() => {
+        const options = isMulti ? [] : [{ key: '__none__', text: '(None)' }];
+        column.optionSetOptions?.forEach((opt) => {
+            options.push({
+                key: opt.value,
+                text: opt.label,
+                data: { iconName: opt.iconName, color: opt.color },
+            });
+        });
+        return options;
+    }, [column.optionSetOptions, isMulti]);
+    const validate = useCallback((next) => {
+        const col = column;
+        if (col.validate && onValidationError) {
+            onValidationError(itemKey, fieldName, col.validate(next, itemKey));
+        }
+    }, [column, fieldName, itemKey, onValidationError]);
+    // Single-select change → the picked value (type preserved) or null for (None).
+    const handleChangeSingle = useCallback((_, option) => {
+        if (!option)
+            return;
+        const newValue = option.key === '__none__' ? null : option.key;
+        validate(newValue);
+        onValueChange(itemKey, fieldName, newValue, value);
+    }, [fieldName, itemKey, value, onValueChange, validate]);
+    // Multi-select change → toggle the option into/out of the value array.
+    const handleChangeMulti = useCallback((_, option) => {
+        if (!option)
+            return;
+        const prev = Array.isArray(currentValue) ? [...currentValue] : [];
+        const next = option.selected
+            ? [...prev, option.key]
+            : prev.filter((k) => String(k) !== String(option.key));
+        validate(next);
+        onValueChange(itemKey, fieldName, next, value);
+    }, [currentValue, fieldName, itemKey, value, onValueChange, validate]);
+    // If not in edit mode, delegate to OptionSetCell for the colored badge display.
+    if (!isEditMode) {
+        return jsx(OptionSetCell, { item: item, column: column, value: value, itemKey: itemKey });
+    }
+    // Render per-option icon + label (only wired when some option has an icon).
+    const onRenderOption = (option) => {
+        if (!option)
+            return null;
+        const data = option.data;
+        return (jsxs("span", { style: { display: 'inline-flex', alignItems: 'center', gap: 6 }, children: [data?.iconName && jsx(Icon, { iconName: data.iconName, style: { color: data.color, fontSize: 14 } }), jsx("span", { children: option.text })] }));
+    };
+    let indicatorClass = '';
+    if (errorMessage) {
+        indicatorClass = errorCellIndicatorClass;
+    }
+    else if (isDirty) {
+        indicatorClass = dirtyCellIndicatorClass;
+    }
+    const wrapperClass = mergeStyles(editableCellInputWrapperClass, indicatorClass);
+    const selectedKey = currentValue !== null && currentValue !== undefined ? currentValue : '__none__';
+    // Cast to Fluent's homogeneous-array prop type; an optionset's keys are all the
+    // same type at runtime (all numeric or all string), so this is safe.
+    const selectedKeys = (Array.isArray(currentValue)
+        ? currentValue
+        : []);
+    return (jsx("div", { className: editableCellClass, children: jsxs("div", { className: wrapperClass, children: [jsx(Dropdown, { multiSelect: isMulti || undefined, selectedKey: isMulti ? undefined : selectedKey, selectedKeys: isMulti ? selectedKeys : undefined, options: dropdownOptions, onChange: isMulti ? handleChangeMulti : handleChangeSingle, onRenderOption: hasIcons ? onRenderOption : undefined, styles: errorMessage ? dropdownErrorStyles : dropdownStyles, ariaLabel: `${column.name} for ${item.key}` }), errorMessage && (jsx("span", { className: cellErrorTextClass, title: errorMessage, children: errorMessage }))] }) }));
+}
+
+/** Normalize a consumer search result to a `LookupOption` (accepts `{id,name}` or `{key,text}`). */
+function normalizeLookupOption(o) {
+    if (o && typeof o === 'object' && 'id' in o) {
+        return { id: String(o.id), name: String(o.name ?? '') };
+    }
+    const alt = o;
+    return { id: String(alt?.key ?? ''), name: String(alt?.text ?? '') };
+}
+// Styles for the search input in edit mode
+const lookupFieldStyles = {
+    root: {
+        width: '100%',
+    },
+    fieldGroup: {
+        height: 28,
+        minHeight: 28,
+        border: 'none',
+        backgroundColor: 'transparent',
+        selectors: {
+            ':hover': {
+                border: '1px solid #c8c6c4',
+                backgroundColor: 'white',
+            },
+            ':focus-within': {
+                border: '1px solid #0078d4',
+                backgroundColor: 'white',
+            },
+        },
+    },
+    field: {
+        fontSize: 13,
+        padding: '0 28px 0 8px', // Extra padding for clear button
+    },
+};
+const lookupFieldErrorStyles = {
+    ...lookupFieldStyles,
+    fieldGroup: {
+        ...lookupFieldStyles.fieldGroup,
+        border: '1px solid #d13438',
+        selectors: {
+            ':hover': {
+                border: '1px solid #d13438',
+                backgroundColor: 'white',
+            },
+            ':focus-within': {
+                border: '1px solid #d13438',
+                backgroundColor: 'white',
+            },
+        },
+    },
+};
+const readOnlyClass = mergeStyles({
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    fontSize: 13,
+    width: '100%',
+});
+/**
+ * Extract the lookup display value from the item.
+ * Handles various formats: OData annotations, expanded objects, formatted values.
+ */
+function extractLookupDisplayValue(item, column, value) {
+    const fieldName = column.fieldName || column.key;
+    // 1. Check for custom format function
+    if (column.formatValue) {
+        const formatted = column.formatValue(value, item);
+        if (formatted && formatted !== '')
+            return formatted;
+    }
+    // 2. Check for OData formatted value annotation on lookup
+    const formattedKey = `_${fieldName}_value@OData.Community.Display.V1.FormattedValue`;
+    const itemRecord = item;
+    if (itemRecord[formattedKey] !== undefined) {
+        return String(itemRecord[formattedKey]);
+    }
+    // 3. Check for lookupDisplayField on the item
+    if (column.lookupDisplayField && itemRecord[column.lookupDisplayField] !== undefined) {
+        return String(itemRecord[column.lookupDisplayField]);
+    }
+    // 4. Check for expanded lookup object
+    if (value && typeof value === 'object') {
+        const expanded = value;
+        // Try common display field patterns
+        if (expanded.fullname)
+            return String(expanded.fullname);
+        if (expanded.name)
+            return String(expanded.name);
+        if (expanded.title)
+            return String(expanded.title);
+    }
+    return '';
+}
+/**
+ * Extract the lookup ID value from the item.
+ */
+function extractLookupId(item, column, value) {
+    const fieldName = column.fieldName || column.key;
+    const itemRecord = item;
+    // Check for _fieldname_value format (OData lookup reference)
+    const lookupValueKey = `_${fieldName}_value`;
+    if (itemRecord[lookupValueKey]) {
+        return String(itemRecord[lookupValueKey]);
+    }
+    // Check expanded object
+    if (value && typeof value === 'object') {
+        const expanded = value;
+        // Try to find the ID from expanded lookup
+        const idField = column.lookupPrimaryIdAttribute || 'id';
+        if (expanded[idField])
+            return String(expanded[idField]);
+        // Check for common ID patterns
+        if (expanded.contactid)
+            return String(expanded.contactid);
+        if (expanded.accountid)
+            return String(expanded.accountid);
+        if (expanded.systemuserid)
+            return String(expanded.systemuserid);
+    }
+    return null;
+}
+/**
+ * Editable lookup cell renderer.
+ * Displays as a clickable link in read mode, as a searchable dropdown in edit mode.
+ * Shows blue indicator when dirty, red indicator when has validation error.
+ */
+function EditableLookupCell({ item, column, value, itemKey, isEditMode, isDirty, editedValue, onValueChange, errorMessage, onValidationError, apiService, dynamicsBaseUrl, searchLookup, }) {
+    const fieldName = column.fieldName || column.key;
+    // Prefer the consumer search callback (direct prop or column config) over apiService.
+    const search = searchLookup ?? column.lookupSearch;
+    // Extract current lookup value
+    const originalDisplayValue = extractLookupDisplayValue(item, column, value);
+    const originalId = extractLookupId(item, column, value);
+    // Current value (edited or original)
+    const currentValue = useMemo(() => {
+        if (editedValue !== undefined) {
+            return editedValue;
+        }
+        if (originalId && originalDisplayValue) {
+            return { id: originalId, name: originalDisplayValue };
+        }
+        return null;
+    }, [editedValue, originalId, originalDisplayValue]);
+    // Local state
+    // Initialize with original display value to ensure it shows immediately
+    const initialDisplayValue = currentValue?.name || originalDisplayValue || '';
+    const [searchText, setSearchText] = useState(initialDisplayValue);
+    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+    const [searchResults, setSearchResults] = useState([]);
+    const [isSearching, setIsSearching] = useState(false);
+    const [activeIndex, setActiveIndex] = useState(-1);
+    const [hasSearched, setHasSearched] = useState(false);
+    const inputRef = useRef(null);
+    const containerRef = useRef(null);
+    const debounceTimerRef = useRef(null);
+    // Sync search text when edited value changes OR when initial value is available
+    useEffect(() => {
+        const displayValue = currentValue?.name || originalDisplayValue || '';
+        setSearchText(displayValue);
+    }, [currentValue, originalDisplayValue]);
+    // Handle Callout dismiss
+    const handleCalloutDismiss = useCallback(() => {
+        setIsDropdownOpen(false);
+    }, []);
+    // Execute the search API call
+    const executeSearchQuery = useCallback(async (query, useContains) => {
+        const searchField = column.lookupSearchField || 'name';
+        const primaryIdAttr = column.lookupPrimaryIdAttribute || `${column.lookupTargetEntity}id`;
+        const additionalFields = column.lookupSelectFields || '';
+        // Build select fields
+        const selectFields = [primaryIdAttr, searchField];
+        if (additionalFields) {
+            additionalFields.split(',').forEach(f => {
+                const trimmed = f.trim();
+                if (trimmed && !selectFields.includes(trimmed)) {
+                    selectFields.push(trimmed);
+                }
+            });
+        }
+        // Build OData query
+        let options = `?$select=${selectFields.join(',')}&$top=15&$orderby=${searchField} asc`;
+        // Build filter conditions
+        const filterConditions = [];
+        // Add search filter if query is provided
+        if (query.trim()) {
+            const escapedQuery = query.replace(/'/g, "''");
+            // Use contains for more flexible matching (finds "Nancy" anywhere in the name)
+            // startswith is faster but less flexible
+            if (useContains) {
+                filterConditions.push(`contains(${searchField}, '${escapedQuery}')`);
+            }
+            else {
+                filterConditions.push(`startswith(${searchField}, '${escapedQuery}')`);
+            }
+        }
+        // Add custom filter from column config (e.g., "statecode eq 0" for active only)
+        if (column.lookupFilter) {
+            filterConditions.push(`(${column.lookupFilter})`);
+        }
+        // Combine filters with 'and'
+        if (filterConditions.length > 0) {
+            options += `&$filter=${filterConditions.join(' and ')}`;
+        }
+        const result = await apiService.retrieveMultipleRecords(column.lookupEntitySetName, options);
+        return result.value.map((record) => ({
+            id: String(record[primaryIdAttr]),
+            name: String(record[searchField] || ''),
+        }));
+    }, [apiService, column.lookupEntitySetName, column.lookupSearchField, column.lookupPrimaryIdAttribute, column.lookupTargetEntity, column.lookupFilter, column.lookupSelectFields]);
+    // Search for lookup records
+    const performSearch = useCallback(async (query) => {
+        // Fetch-free path: a consumer-supplied search callback (grid-kit's contract).
+        // The consumer owns any startswith/contains fallback server-side.
+        if (search) {
+            setIsSearching(true);
+            setHasSearched(true);
+            try {
+                const raw = await search(query);
+                setSearchResults(raw.map(normalizeLookupOption));
+                setActiveIndex(-1);
+            }
+            catch (err) {
+                console.error('[EditableLookupCell] searchLookup error:', err);
+                setSearchResults([]);
+            }
+            finally {
+                setIsSearching(false);
+            }
+            return;
+        }
+        // apiService path (unchanged).
+        if (!apiService || !column.lookupEntitySetName) {
+            setSearchResults([]);
+            return;
+        }
+        setIsSearching(true);
+        setHasSearched(true);
+        try {
+            // First try with startswith (faster)
+            let results = await executeSearchQuery(query, false);
+            // If no results and we have a search query, try with contains (more flexible)
+            if (results.length === 0 && query.trim()) {
+                results = await executeSearchQuery(query, true);
+            }
+            setSearchResults(results);
+            setActiveIndex(-1);
+        }
+        catch (err) {
+            console.error('[EditableLookupCell] Search error:', err);
+            setSearchResults([]);
+        }
+        finally {
+            setIsSearching(false);
+        }
+    }, [search, apiService, column.lookupEntitySetName, executeSearchQuery]);
+    // Debounced search
+    const debouncedSearch = useCallback((query) => {
+        if (debounceTimerRef.current) {
+            window.clearTimeout(debounceTimerRef.current);
+        }
+        debounceTimerRef.current = window.setTimeout(() => {
+            performSearch(query);
+        }, 300);
+    }, [performSearch]);
+    // Handle input change
+    const handleInputChange = useCallback((_, newValue) => {
+        const val = newValue ?? '';
+        setSearchText(val);
+        // Open dropdown and trigger search
+        setIsDropdownOpen(true);
+        debouncedSearch(val);
+    }, [debouncedSearch]);
+    // Handle input focus - always load initial options
+    const handleFocus = useCallback(() => {
+        setIsDropdownOpen(true);
+        // Always do an empty search on focus to populate with available options
+        // This ensures users see options even if there's a current value
+        if (!hasSearched || searchResults.length === 0) {
+            // Search with empty string to get initial list of all options
+            performSearch('');
+        }
+    }, [hasSearched, performSearch, searchResults.length]);
+    // Handle selection of a lookup option
+    const handleSelect = useCallback((option) => {
+        setIsDropdownOpen(false);
+        if (option === null) {
+            // Clear selection
+            setSearchText('');
+            onValueChange(itemKey, fieldName, null, value);
+        }
+        else {
+            // Set new selection
+            setSearchText(option.name);
+            const newValue = {
+                id: option.id,
+                name: option.name,
+                entitySetName: column.lookupEntitySetName,
+            };
+            onValueChange(itemKey, fieldName, newValue, value);
+        }
+        // Clear any validation errors
+        if (onValidationError) {
+            onValidationError(itemKey, fieldName, undefined);
+        }
+    }, [itemKey, fieldName, value, column.lookupEntitySetName, onValueChange, onValidationError]);
+    // Handle keyboard navigation
+    const handleKeyDown = useCallback((event) => {
+        if (!isDropdownOpen) {
+            if (event.key === 'ArrowDown' || event.key === 'Enter') {
+                setIsDropdownOpen(true);
+                if (!hasSearched) {
+                    performSearch(searchText);
+                }
+            }
+            return;
+        }
+        // Total items: 1 (None option) + searchResults.length
+        const totalItems = searchResults.length + 1;
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                setActiveIndex((prev) => (prev < totalItems - 1 ? prev + 1 : prev));
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                setActiveIndex((prev) => (prev > 0 ? prev - 1 : 0));
+                break;
+            case 'Enter':
+                event.preventDefault();
+                if (activeIndex === 0) {
+                    // None option selected
+                    handleSelect(null);
+                }
+                else if (activeIndex > 0 && activeIndex <= searchResults.length) {
+                    // Regular option selected
+                    handleSelect(searchResults[activeIndex - 1]);
+                }
+                else if (searchResults.length === 1) {
+                    // Auto-select single result
+                    handleSelect(searchResults[0]);
+                }
+                break;
+            case 'Tab':
+                // Select active or first result on tab
+                if (activeIndex === 0) {
+                    handleSelect(null);
+                }
+                else if (activeIndex > 0 && activeIndex <= searchResults.length) {
+                    handleSelect(searchResults[activeIndex - 1]);
+                }
+                else if (searchResults.length > 0) {
+                    handleSelect(searchResults[0]);
+                }
+                setIsDropdownOpen(false);
+                break;
+            case 'Escape':
+                event.preventDefault();
+                setIsDropdownOpen(false);
+                setSearchText(currentValue?.name || '');
+                break;
+        }
+    }, [isDropdownOpen, activeIndex, searchResults, hasSearched, performSearch, searchText, handleSelect, currentValue]);
+    // Handle clear button click
+    const handleClear = useCallback((event) => {
+        event.stopPropagation();
+        handleSelect(null);
+    }, [handleSelect]);
+    // Handle click on read-mode link (open in Dynamics)
+    const handleLinkClick = useCallback(() => {
+        if (!dynamicsBaseUrl || !currentValue?.id || !column.lookupTargetEntity)
+            return;
+        const url = `${dynamicsBaseUrl}/main.aspx?etn=${column.lookupTargetEntity}&id=${currentValue.id}&pagetype=entityrecord`;
+        window.open(url, '_blank');
+    }, [dynamicsBaseUrl, currentValue, column.lookupTargetEntity]);
+    // Handle link keydown for accessibility
+    const handleLinkKeyDown = useCallback((event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            handleLinkClick();
+        }
+    }, [handleLinkClick]);
+    // ============================================================================
+    // Read Mode Rendering
+    // ============================================================================
+    if (!isEditMode) {
+        const displayValue = currentValue?.name || originalDisplayValue || '-';
+        // Consumer-supplied click handler (e.g. grid-kit navigation) wins over the
+        // built-in dynamicsBaseUrl link — keeps read-mode parity with LookupCell.
+        if (column.onLinkClick && displayValue !== '-') {
+            const onClick = () => column.onLinkClick(item);
+            return (jsx("div", { className: editableCellClass, children: jsx("span", { className: lookupReadModeLinkClass, onClick: onClick, onKeyDown: (e) => {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                            e.preventDefault();
+                            onClick();
+                        }
+                    }, role: "button", tabIndex: 0, title: displayValue, children: displayValue }) }));
+        }
+        // If we have a link and a valid lookup, show as clickable link
+        if (dynamicsBaseUrl && column.lookupTargetEntity && currentValue?.id && displayValue !== '-') {
+            return (jsx("div", { className: editableCellClass, children: jsx("span", { className: lookupReadModeLinkClass, onClick: handleLinkClick, onKeyDown: handleLinkKeyDown, role: "button", tabIndex: 0, title: `Open ${displayValue} in Dynamics 365`, children: displayValue }) }));
+        }
+        // Plain text display
+        return (jsx("div", { className: editableCellClass, children: jsx("span", { className: readOnlyClass, title: displayValue !== '-' ? displayValue : undefined, children: displayValue }) }));
+    }
+    // ============================================================================
+    // Edit Mode Rendering
+    // ============================================================================
+    // Determine indicator class
+    let indicatorClass = '';
+    if (errorMessage) {
+        indicatorClass = errorCellIndicatorClass;
+    }
+    else if (isDirty) {
+        indicatorClass = dirtyCellIndicatorClass;
+    }
+    const wrapperClass = mergeStyles(editableCellInputWrapperClass, indicatorClass);
+    // Callout styles
+    const calloutStyles = {
+        root: {
+            padding: 0,
+            boxShadow: '0 3px 6px rgba(0, 0, 0, 0.16)',
+        },
+        calloutMain: {
+            padding: 0,
+            maxHeight: 200,
+            overflowY: 'auto',
+            minWidth: 200,
+        },
+    };
+    return (jsx("div", { className: editableCellClass, children: jsxs("div", { className: wrapperClass, children: [jsxs("div", { className: lookupCellContainerClass, ref: containerRef, children: [jsx(TextField, { componentRef: inputRef, value: searchText, onChange: handleInputChange, onFocus: handleFocus, onKeyDown: handleKeyDown, borderless: true, styles: errorMessage ? lookupFieldErrorStyles : lookupFieldStyles, ariaLabel: `${column.name} lookup for ${item.key}`, placeholder: originalDisplayValue || "Search...", autoComplete: "off" }), searchText && (jsx("button", { className: lookupClearButtonClass, onClick: handleClear, type: "button", "aria-label": "Clear selection", tabIndex: -1, children: jsx(Icon, { iconName: "Cancel", style: { fontSize: 10 } }) }))] }), isDropdownOpen && containerRef.current && (jsxs(Callout, { target: containerRef.current, onDismiss: handleCalloutDismiss, isBeakVisible: false, directionalHint: DirectionalHint.bottomLeftEdge, styles: calloutStyles, calloutMaxHeight: 200, setInitialFocus: false, children: [jsx("div", { className: mergeStyles(lookupDropdownNoneOptionClass, activeIndex === 0 ? lookupDropdownItemActiveClass : ''), onClick: () => handleSelect(null), role: "option", "aria-selected": activeIndex === 0, children: "(None)" }), isSearching && (jsx("div", { className: lookupLoadingClass, children: "Searching..." })), !isSearching && searchResults.length > 0 && searchResults.map((option, index) => (jsx("div", { className: mergeStyles(lookupDropdownItemClass, activeIndex === index + 1 ? lookupDropdownItemActiveClass : ''), onClick: () => handleSelect(option), role: "option", "aria-selected": activeIndex === index + 1, children: option.name }, option.id))), !isSearching && hasSearched && searchResults.length === 0 && (jsx("div", { className: lookupNoResultsClass, children: "No results found" }))] })), errorMessage && (jsx("span", { className: cellErrorTextClass, title: errorMessage, children: errorMessage }))] }) }));
+}
+
+const btnBaseStyle = {
+    background: 'none',
+    border: 'none',
+    padding: 0,
+    margin: 0,
+    cursor: 'pointer',
+    lineHeight: 1,
+};
+const starBtnStyle = { ...btnBaseStyle, fontSize: 16 };
+/**
+ * Editable rating cell renderer.
+ * Read mode delegates to `RatingCell` (stars or a single sentiment emoji);
+ * edit mode renders clickable stars / faces (click to set, click the selected
+ * one again to clear, arrow keys to adjust). Shows blue indicator when dirty,
+ * red when it has a validation error.
+ *
+ * NOTE: `ratingStyle: 'emoji'` renders Fluent `<Icon>`s — the host must have
+ * called `initializeIcons()`.
+ */
+function EditableRatingCell({ item, column, value, itemKey, isEditMode, isDirty, editedValue, onValueChange, errorMessage, onValidationError, }) {
+    const fieldName = column.fieldName || column.key;
+    const isEmoji = column.ratingStyle === 'emoji';
+    const count = isEmoji
+        ? clampFaceCount(column.ratingFaceCount, column.ratingMax)
+        : column.ratingMax && column.ratingMax > 0
+            ? Math.floor(column.ratingMax)
+            : 5;
+    const current = editedValue !== undefined ? editedValue : value;
+    const rawCurrent = typeof current === 'number' ? current : Number(current);
+    const selected = Number.isFinite(rawCurrent) ? Math.min(count, Math.max(0, Math.round(rawCurrent))) : 0;
+    const commit = useCallback((n) => {
+        const next = n <= 0 ? null : n;
+        const col = column;
+        if (col.validate && onValidationError) {
+            onValidationError(itemKey, fieldName, col.validate(next, itemKey));
+        }
+        onValueChange(itemKey, fieldName, next, value);
+    }, [column, fieldName, itemKey, value, onValueChange, onValidationError]);
+    // Read mode → shared display (stars or single sentiment face).
+    if (!isEditMode) {
+        return jsx(RatingCell, { item: item, column: column, value: value, itemKey: itemKey });
+    }
+    const handleKeyDown = (e) => {
+        if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {
+            e.preventDefault();
+            commit(Math.min(count, selected + 1));
+        }
+        else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {
+            e.preventDefault();
+            commit(Math.max(0, selected - 1));
+        }
+        else if (e.key === 'Home') {
+            e.preventDefault();
+            commit(0);
+        }
+        else if (e.key === 'End') {
+            e.preventDefault();
+            commit(count);
+        }
+    };
+    let indicatorClass = '';
+    if (errorMessage)
+        indicatorClass = errorCellIndicatorClass;
+    else if (isDirty)
+        indicatorClass = dirtyCellIndicatorClass;
+    const wrapperClass = mergeStyles(editableCellInputWrapperClass, indicatorClass);
+    const buttons = [];
+    for (let i = 1; i <= count; i++) {
+        // Click the currently-selected value again to clear it.
+        const onClick = () => commit(i === selected ? 0 : i);
+        if (isEmoji) {
+            const set = EMOJI_SETS[count];
+            const isSel = i === selected;
+            const useColor = column.ratingUseSentimentColor !== false;
+            const color = isSel
+                ? useColor
+                    ? EMOJI_COLORS[count][i - 1]
+                    : column.ratingColor || '#0078d4'
+                : '#c8c6c4';
+            buttons.push(jsx("button", { type: "button", onClick: onClick, title: set.labels[i - 1], "aria-label": set.labels[i - 1], "aria-hidden": true, tabIndex: -1, style: btnBaseStyle, children: jsx(Icon, { iconName: set.icons[i - 1], style: { color, fontSize: 18 } }) }, i));
+        }
+        else {
+            const filledColor = column.ratingColor || '#ffb900';
+            buttons.push(jsx("button", { type: "button", onClick: onClick, "aria-label": `${i} of ${count}`, "aria-hidden": true, tabIndex: -1, style: { ...starBtnStyle, color: i <= selected ? filledColor : '#c8c6c4' }, children: "\u2605" }, i));
+        }
+    }
+    return (jsx("div", { className: editableCellClass, children: jsxs("div", { className: wrapperClass, children: [jsx("div", { role: "slider", "aria-valuemin": 0, "aria-valuemax": count, "aria-valuenow": selected, "aria-label": `${column.name} for ${item.key}`, tabIndex: 0, onKeyDown: handleKeyDown, style: { display: 'flex', gap: 2, alignItems: 'center' }, children: buttons }), errorMessage && (jsx("span", { className: cellErrorTextClass, title: errorMessage, children: errorMessage }))] }) }));
+}
+
+export { ColoredCell, CompositeCell, CurrencyCell, DateCell, EditableDateCell, EditableLookupCell, EditableNumberCell, EditableOptionSetCell, EditableRatingCell, EditableTextCell, IconCell, LinkCell, LookupCell, NumberCell, OptionSetCell, ProgressBarCell, RatingCell, TextCell, ToggleCell, cellClass, cellErrorTextClass, coloredBadgeClass, compositeCellClass, currencyCellClass, dirtyCellIndicatorClass, editableCellClass, editableCellInputWrapperClass, errorCellIndicatorClass, getDetailsListStyles, getRowStyles, getRowStylesWithSelection, iconButtonCellClass, linkCellClass, lookupCellContainerClass, lookupClearButtonClass, lookupDropdownClass, lookupDropdownItemActiveClass, lookupDropdownItemClass, lookupDropdownNoneOptionClass, lookupLoadingClass, lookupNoResultsClass, lookupReadModeLinkClass, progressBarBackgroundClass, progressBarContainerClass, progressBarFillClass, progressBarLabelClass, ratingCellClass, ratingStarClass };
+//# sourceMappingURL=index.esm.js.map