@infinite-table/infinite-react 5.0.0-canary.3 → 5.0.0-canary.4

package/index.mjs

@@ -1323,7 +1323,7 @@ function buildSubscriptionCallback(withRaf = false) {
 }
 
 // src/components/InfiniteTable/vars.css.ts
-var ThemeVars = { color: { accent: "var(--infinite-accent-color)", error: "var(--infinite-error-color)", color: "var(--infinite-color)" }, spacing: { "0": "var(--infinite-space-0)", "1": "var(--infinite-space-1)", "2": "var(--infinite-space-2)", "3": "var(--infinite-space-3)", "4": "var(--infinite-space-4)", "5": "var(--infinite-space-5)", "6": "var(--infinite-space-6)", "7": "var(--infinite-space-7)", "8": "var(--infinite-space-8)", "9": "var(--infinite-space-9)", "10": "var(--infinite-space-10)" }, fontSize: { "0": "var(--infinite-font-size-0)", "1": "var(--infinite-font-size-1)", "2": "var(--infinite-font-size-2)", "3": "var(--infinite-font-size-3)", "4": "var(--infinite-font-size-4)", "5": "var(--infinite-font-size-5)", "6": "var(--infinite-font-size-6)", "7": "var(--infinite-font-size-7)" }, fontFamily: "var(--infinite-font-family)", minHeight: "var(--infinite-min-height)", borderRadius: "var(--infinite-border-radius)", background: "var(--infinite-background)", iconSize: "var(--infinite-icon-size)", runtime: { bodyWidth: "var(--infinite-runtime-body-content-width)", totalVisibleColumnsWidthValue: "var(--infinite-runtime-total-visible-columns-width)", totalVisibleColumnsWidthVar: "var(--infinite-runtime-total-visible-columns-width-var)", visibleColumnsCount: "var(--infinite-runtime-visible-columns-count)", browserScrollbarWidth: "var(--infinite-runtime-browser-scrollbar-width)" }, components: { LoadMask: { padding: "var(--infinite-load-mask-padding)", color: "var(--infinite-load-mask-color)", textBackground: "var(--infinite-load-mask-text-background)", overlayBackground: "var(--infinite-load-mask-overlay-background)", overlayOpacity: "var(--infinite-load-mask-overlay-opacity)", borderRadius: "var(--infinite-load-mask-border-radius)" }, Header: { background: "var(--infinite-header-background)", color: "var(--infinite-header-color)", columnHeaderHeight: "var(--infinite-column-header-height)" }, HeaderCell: { background: "var(--infinite-header-cell-background)", hoverBackground: "var(--infinite-header-cell-hover-background)", border: "var(--infinite-header-cell-border)", padding: "var(--infinite-header-cell-padding)", paddingX: "var(--infinite-header-cell-padding-x)", paddingY: "var(--infinite-header-cell-padding-y)", iconSize: "var(--infinite-header-cell-icon-size)", menuIconLineWidth: "var(--infinite-header-cell-menu-icon-line-width)", sortIconMargin: "var(--infinite-header-cell-sort-icon-margin)", borderRight: "var(--infinite-header-cell-border-right)", resizeHandleActiveAreaWidth: "var(--infinite-resize-handle-active-area-width)", resizeHandleWidth: "var(--infinite-resize-handle-width)", resizeHandleHoverBackground: "var(--infinite-resize-handle-hover-background)", resizeHandleConstrainedHoverBackground: "var(--infinite-resize-handle-constrained-hover-background)", filterOperatorPaddingX: "var(--infinite-filter-operator-padding-x)", filterEditorPaddingX: "var(--infinite-filter-editor-padding-x)", filterEditorMarginX: "var(--infinite-filter-editor-margin-x)", filterOperatorPaddingY: "var(--infinite-filter-operator-padding-y)", filterEditorPaddingY: "var(--infinite-filter-editor-padding-y)", filterEditorMarginY: "var(--infinite-filter-editor-margin-y)", filterEditorBackground: "var(--infinite-filter-editor-background)", filterEditorBorder: "var(--infinite-filter-editor-border)", filterEditorFocusBorderColor: "var(--infinite-filter-editor-focus-border-color)", filterEditorBorderRadius: "var(--infinite-filter-editor-border-radius)", filterEditorColor: "var(--infinite-filter-editor-color)" }, ActiveCellIndicator: { inset: "var(--infinite-active-cell-indicator-inset)" }, Cell: { padding: "var(--infinite-cell-padding)", borderWidth: "var(--infinite-cell-border-width)", border: "var(--infinite-cell-border)", borderLeft: "var(--infinite-cell-border-left)", borderRight: "var(--infinite-cell-border-right)", borderTop: "var(--infinite-cell-border-top)", borderInvisible: "var(--infinite-cell-border-invisible)", borderRadius: "var(--infinite-cell-border-radius)", reorderEffectDuration: "var(--infinite-column-reorder-effect-duration)", pinnedBorder: "var(--infinite-pinned-cell-border)", color: "var(--infinite-cell-color)", selectedBackground: "var(--infinite-selected-cell-background)", selectedBackgroundDefault: "var(--infinite-selected-cell-background-default)", selectedBackgroundAlpha: "var(--infinite-selected-cell-background-alpha)", selectedBackgroundAlphaWhenTableUnfocused: "var(--infinite-selected-cell-background-alpha--table-unfocused)", selectedBorderColor: "var(--infinite-selected-cell-border-color)", selectedBorderWidth: "var(--infinite-selected-cell-border-width)", selectedBorderStyle: "var(--infinite-selected-cell-border-style)", selectedBorder: "var(--infinite-selected-cell-border)", activeBackgroundAlpha: "var(--infinite-active-cell-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-cell-background-alpha--table-unfocused)", activeBackground: "var(--infinite-active-cell-background)", activeBackgroundDefault: "var(--infinite-active-cell-background-default)", activeBorderColor: "var(--infinite-active-cell-border-color)", activeBorderWidth: "var(--infinite-active-cell-border-width)", activeBorderStyle: "var(--infinite-active-cell-border-style)", activeBorder: "var(--infinite-active-cell-border)" }, SelectionCheckBox: { marginInline: "var(--infinite-selection-checkbox-margin-inline)" }, Menu: { background: "var(--infinite-menu-background)", color: "var(--infinite-menu-color)", separatorColor: "var(--infinite-menu-separator-color)", padding: "var(--infinite-menu-padding)", cellPaddingVertical: "var(--infinite-menu-cell-padding-vertical)", cellPaddingHorizontal: "var(--infinite-menu-cell-padding-horizontal)", cellMarginVertical: "var(--infinite-menu-cell-margin-vertical)", itemDisabledBackground: "var(--infinite-menu-item-disabled-background)", itemActiveBackground: "var(--infinite-menu-item-active-background)", itemActiveOpacity: "var(--infinite-menu-item-active-opacity)", itemPressedOpacity: "var(--infinite-menu-item-pressed-opacity)", itemPressedBackground: "var(--infinite-menu-item-pressed-background)", itemDisabledOpacity: "var(--infinite-menu-item-disabled-opacity)", borderRadius: "var(--infinite-menu-border-radius)", shadowColor: "var(--infinite-menu-shadow-color)" }, RowDetail: { background: "var(--infinite-rowdetail-background)", padding: "var(--infinite-rowdetail-padding)", gridHeight: "var(--infinite-rowdetail-grid-height)" }, Row: { background: "var(--infinite-row-background)", oddBackground: "var(--infinite-row-odd-background)", disabledBackground: "var(--infinite-row-disabled-background)", oddDisabledBackground: "var(--infinite-row-odd-disabled-background)", selectedBackground: "var(--infinite-row-selected-background)", disabledOpacity: "var(--infinite-row-disabled-opacity)", activeBackground: "var(--infinite-active-row-background)", activeBorderColor: "var(--infinite-active-row-border-color)", activeBorderWidth: "var(--infinite-active-row-border-width)", activeBorderStyle: "var(--infinite-active-row-border-style)", activeBorder: "var(--infinite-active-row-border)", activeBackgroundAlpha: "var(--infinite-active-row-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-row-background-alpha--table-unfocused)", hoverBackground: "var(--infinite-row-hover-background)", selectedHoverBackground: "var(--infinite-row-selected-hover-background)", selectedDisabledBackground: "var(--infinite-row-selected-disabled-background)", groupRowBackground: "var(--infinite-group-row-background)", groupRowColumnNesting: "var(--infinite-group-row-column-nesting)", groupNesting: "var(--infinite-dont-override-group-row-nesting-length)", pointerEventsWhileScrolling: "var(--infinite-row-pointer-events-while-scrolling)" }, ColumnCell: { background: "var(--infinite-column-cell-bg-dont-override)" } } };
+var ThemeVars = { color: { accent: "var(--infinite-accent-color)", success: "var(--infinite-success-color)", error: "var(--infinite-error-color)", color: "var(--infinite-color)" }, spacing: { "0": "var(--infinite-space-0)", "1": "var(--infinite-space-1)", "2": "var(--infinite-space-2)", "3": "var(--infinite-space-3)", "4": "var(--infinite-space-4)", "5": "var(--infinite-space-5)", "6": "var(--infinite-space-6)", "7": "var(--infinite-space-7)", "8": "var(--infinite-space-8)", "9": "var(--infinite-space-9)", "10": "var(--infinite-space-10)" }, fontSize: { "0": "var(--infinite-font-size-0)", "1": "var(--infinite-font-size-1)", "2": "var(--infinite-font-size-2)", "3": "var(--infinite-font-size-3)", "4": "var(--infinite-font-size-4)", "5": "var(--infinite-font-size-5)", "6": "var(--infinite-font-size-6)", "7": "var(--infinite-font-size-7)" }, fontFamily: "var(--infinite-font-family)", minHeight: "var(--infinite-min-height)", borderRadius: "var(--infinite-border-radius)", background: "var(--infinite-background)", iconSize: "var(--infinite-icon-size)", runtime: { bodyWidth: "var(--infinite-runtime-body-content-width)", totalVisibleColumnsWidthValue: "var(--infinite-runtime-total-visible-columns-width)", totalVisibleColumnsWidthVar: "var(--infinite-runtime-total-visible-columns-width-var)", visibleColumnsCount: "var(--infinite-runtime-visible-columns-count)", browserScrollbarWidth: "var(--infinite-runtime-browser-scrollbar-width)" }, components: { LoadMask: { padding: "var(--infinite-load-mask-padding)", color: "var(--infinite-load-mask-color)", textBackground: "var(--infinite-load-mask-text-background)", overlayBackground: "var(--infinite-load-mask-overlay-background)", overlayOpacity: "var(--infinite-load-mask-overlay-opacity)", borderRadius: "var(--infinite-load-mask-border-radius)" }, Header: { background: "var(--infinite-header-background)", color: "var(--infinite-header-color)", columnHeaderHeight: "var(--infinite-column-header-height)" }, HeaderCell: { background: "var(--infinite-header-cell-background)", hoverBackground: "var(--infinite-header-cell-hover-background)", border: "var(--infinite-header-cell-border)", padding: "var(--infinite-header-cell-padding)", paddingX: "var(--infinite-header-cell-padding-x)", paddingY: "var(--infinite-header-cell-padding-y)", iconSize: "var(--infinite-header-cell-icon-size)", menuIconLineWidth: "var(--infinite-header-cell-menu-icon-line-width)", sortIconMargin: "var(--infinite-header-cell-sort-icon-margin)", borderRight: "var(--infinite-header-cell-border-right)", resizeHandleActiveAreaWidth: "var(--infinite-resize-handle-active-area-width)", resizeHandleWidth: "var(--infinite-resize-handle-width)", resizeHandleHoverBackground: "var(--infinite-resize-handle-hover-background)", resizeHandleConstrainedHoverBackground: "var(--infinite-resize-handle-constrained-hover-background)", filterOperatorPaddingX: "var(--infinite-filter-operator-padding-x)", filterEditorPaddingX: "var(--infinite-filter-editor-padding-x)", filterEditorMarginX: "var(--infinite-filter-editor-margin-x)", filterOperatorPaddingY: "var(--infinite-filter-operator-padding-y)", filterEditorPaddingY: "var(--infinite-filter-editor-padding-y)", filterEditorMarginY: "var(--infinite-filter-editor-margin-y)", filterEditorBackground: "var(--infinite-filter-editor-background)", filterEditorBorder: "var(--infinite-filter-editor-border)", filterEditorFocusBorderColor: "var(--infinite-filter-editor-focus-border-color)", filterEditorBorderRadius: "var(--infinite-filter-editor-border-radius)", filterEditorColor: "var(--infinite-filter-editor-color)" }, ActiveCellIndicator: { inset: "var(--infinite-active-cell-indicator-inset)" }, Cell: { flashingDuration: "var(--infinite-flashing-duration)", flashingAnimationName: "var(--infinite-flashing-animation-name)", flashingOverlayZIndex: "var(--infinite-flashing-overlay-z-index)", flashingBackground: "var(--infinite-flashing-background)", flashingUpBackground: "var(--infinite-flashing-up-background)", flashingDownBackground: "var(--infinite-flashing-down-background)", padding: "var(--infinite-cell-padding)", borderWidth: "var(--infinite-cell-border-width)", border: "var(--infinite-cell-border)", borderLeft: "var(--infinite-cell-border-left)", borderRight: "var(--infinite-cell-border-right)", borderTop: "var(--infinite-cell-border-top)", borderInvisible: "var(--infinite-cell-border-invisible)", borderRadius: "var(--infinite-cell-border-radius)", reorderEffectDuration: "var(--infinite-column-reorder-effect-duration)", pinnedBorder: "var(--infinite-pinned-cell-border)", color: "var(--infinite-cell-color)", selectedBackground: "var(--infinite-selected-cell-background)", selectedBackgroundDefault: "var(--infinite-selected-cell-background-default)", selectedBackgroundAlpha: "var(--infinite-selected-cell-background-alpha)", selectedBackgroundAlphaWhenTableUnfocused: "var(--infinite-selected-cell-background-alpha--table-unfocused)", selectedBorderColor: "var(--infinite-selected-cell-border-color)", selectedBorderWidth: "var(--infinite-selected-cell-border-width)", selectedBorderStyle: "var(--infinite-selected-cell-border-style)", selectedBorder: "var(--infinite-selected-cell-border)", activeBackgroundAlpha: "var(--infinite-active-cell-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-cell-background-alpha--table-unfocused)", activeBackground: "var(--infinite-active-cell-background)", activeBackgroundDefault: "var(--infinite-active-cell-background-default)", activeBorderColor: "var(--infinite-active-cell-border-color)", activeBorderWidth: "var(--infinite-active-cell-border-width)", activeBorderStyle: "var(--infinite-active-cell-border-style)", activeBorder: "var(--infinite-active-cell-border)" }, SelectionCheckBox: { marginInline: "var(--infinite-selection-checkbox-margin-inline)" }, Menu: { background: "var(--infinite-menu-background)", color: "var(--infinite-menu-color)", separatorColor: "var(--infinite-menu-separator-color)", padding: "var(--infinite-menu-padding)", cellPaddingVertical: "var(--infinite-menu-cell-padding-vertical)", cellPaddingHorizontal: "var(--infinite-menu-cell-padding-horizontal)", cellMarginVertical: "var(--infinite-menu-cell-margin-vertical)", itemDisabledBackground: "var(--infinite-menu-item-disabled-background)", itemActiveBackground: "var(--infinite-menu-item-active-background)", itemActiveOpacity: "var(--infinite-menu-item-active-opacity)", itemPressedOpacity: "var(--infinite-menu-item-pressed-opacity)", itemPressedBackground: "var(--infinite-menu-item-pressed-background)", itemDisabledOpacity: "var(--infinite-menu-item-disabled-opacity)", borderRadius: "var(--infinite-menu-border-radius)", shadowColor: "var(--infinite-menu-shadow-color)" }, RowDetail: { background: "var(--infinite-rowdetail-background)", padding: "var(--infinite-rowdetail-padding)", gridHeight: "var(--infinite-rowdetail-grid-height)" }, Row: { background: "var(--infinite-row-background)", oddBackground: "var(--infinite-row-odd-background)", disabledBackground: "var(--infinite-row-disabled-background)", oddDisabledBackground: "var(--infinite-row-odd-disabled-background)", selectedBackground: "var(--infinite-row-selected-background)", disabledOpacity: "var(--infinite-row-disabled-opacity)", activeBackground: "var(--infinite-active-row-background)", activeBorderColor: "var(--infinite-active-row-border-color)", activeBorderWidth: "var(--infinite-active-row-border-width)", activeBorderStyle: "var(--infinite-active-row-border-style)", activeBorder: "var(--infinite-active-row-border)", activeBackgroundAlpha: "var(--infinite-active-row-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-row-background-alpha--table-unfocused)", hoverBackground: "var(--infinite-row-hover-background)", selectedHoverBackground: "var(--infinite-row-selected-hover-background)", selectedDisabledBackground: "var(--infinite-row-selected-disabled-background)", groupRowBackground: "var(--infinite-group-row-background)", groupRowColumnNesting: "var(--infinite-group-row-column-nesting)", groupNesting: "var(--infinite-dont-override-group-row-nesting-length)", pointerEventsWhileScrolling: "var(--infinite-row-pointer-events-while-scrolling)" }, ColumnCell: { background: "var(--infinite-column-cell-bg-dont-override)" } } };
 var columnHeaderHeightName = "column-header-height";
 
 // src/components/HeadlessTable/ReactHeadlessTableRenderer.tsx
@@ -1364,7 +1364,7 @@ function stripVar(cssVariableWithVarString) {
 }
 
 // src/components/InfiniteTable/internalVars.css.ts
-var InternalVars = { currentColumnTransformX: "var(--currentColumnTransformX__16hkbkc0)", y: "var(--y__16hkbkc1)", activeCellRowOffset: "var(--activeCellRowOffset__16hkbkc2)", activeCellRowOffsetX: "var(--activeCellRowOffsetX__16hkbkc3)", activeCellRowHeight: "var(--activeCellRowHeight__16hkbkc4)", activeCellOffsetX: "var(--activeCellOffsetX__16hkbkc5)", activeCellOffsetY: "var(--activeCellOffsetY__16hkbkc6)", scrollTopForActiveRow: "var(--scrollTopForActiveRow__16hkbkc7)", scrollLeftForActiveRowWhenHorizontalLayout: "var(--scrollLeftForActiveRowWhenHorizontalLayout__16hkbkc8)", activeCellColWidth: "var(--activeCellColWidth__16hkbkc9)", activeCellColOffset: "var(--activeCellColOffset__16hkbkca)", columnReorderEffectDurationAtIndex: "var(--columnReorderEffectDurationAtIndex__16hkbkcb)", columnWidthAtIndex: "var(--columnWidthAtIndex__16hkbkcc)", columnOffsetAtIndex: "var(--columnOffsetAtIndex__16hkbkcd)", columnOffsetAtIndexWhileReordering: "var(--columnOffsetAtIndexWhileReordering__16hkbkce)", columnZIndexAtIndex: "var(--columnZIndexAtIndex__16hkbkcf)", pinnedStartWidth: "var(--pinnedStartWidth__16hkbkcg)", pinnedEndWidth: "var(--pinnedEndWidth__16hkbkch)", pinnedEndOffset: "var(--pinnedEndOffset__16hkbkci)", computedVisibleColumnsCount: "var(--computedVisibleColumnsCount__16hkbkcj)", baseZIndexForCells: "var(--baseZIndexForCells__16hkbkck)", bodyWidth: "var(--bodyWidth__16hkbkcl)", bodyHeight: "var(--bodyHeight__16hkbkcm)", scrollbarWidthHorizontal: "var(--scrollbarWidthHorizontal__16hkbkcn)", scrollbarWidthVertical: "var(--scrollbarWidthVertical__16hkbkco)", scrollLeft: "var(--scrollLeft__16hkbkcp)", scrollTop: "var(--scrollTop__16hkbkcq)" };
+var InternalVars = { currentColumnTransformX: "var(--currentColumnTransformX__16hkbkc0)", y: "var(--y__16hkbkc1)", currentFlashingBackground: "var(--currentFlashingBackground__16hkbkc2)", currentFlashingDuration: "var(--currentFlashingDuration__16hkbkc3)", activeCellRowOffset: "var(--activeCellRowOffset__16hkbkc4)", activeCellRowOffsetX: "var(--activeCellRowOffsetX__16hkbkc5)", activeCellRowHeight: "var(--activeCellRowHeight__16hkbkc6)", activeCellOffsetX: "var(--activeCellOffsetX__16hkbkc7)", activeCellOffsetY: "var(--activeCellOffsetY__16hkbkc8)", scrollTopForActiveRow: "var(--scrollTopForActiveRow__16hkbkc9)", scrollLeftForActiveRowWhenHorizontalLayout: "var(--scrollLeftForActiveRowWhenHorizontalLayout__16hkbkca)", activeCellColWidth: "var(--activeCellColWidth__16hkbkcb)", activeCellColOffset: "var(--activeCellColOffset__16hkbkcc)", columnReorderEffectDurationAtIndex: "var(--columnReorderEffectDurationAtIndex__16hkbkcd)", columnWidthAtIndex: "var(--columnWidthAtIndex__16hkbkce)", columnOffsetAtIndex: "var(--columnOffsetAtIndex__16hkbkcf)", columnOffsetAtIndexWhileReordering: "var(--columnOffsetAtIndexWhileReordering__16hkbkcg)", columnZIndexAtIndex: "var(--columnZIndexAtIndex__16hkbkch)", pinnedStartWidth: "var(--pinnedStartWidth__16hkbkci)", pinnedEndWidth: "var(--pinnedEndWidth__16hkbkcj)", pinnedEndOffset: "var(--pinnedEndOffset__16hkbkck)", computedVisibleColumnsCount: "var(--computedVisibleColumnsCount__16hkbkcl)", baseZIndexForCells: "var(--baseZIndexForCells__16hkbkcm)", bodyWidth: "var(--bodyWidth__16hkbkcn)", bodyHeight: "var(--bodyHeight__16hkbkco)", scrollbarWidthHorizontal: "var(--scrollbarWidthHorizontal__16hkbkcp)", scrollbarWidthVertical: "var(--scrollbarWidthVertical__16hkbkcq)", scrollLeft: "var(--scrollLeft__16hkbkcr)", scrollTop: "var(--scrollTop__16hkbkcs)" };
 
 // src/utils/selectParent.ts
 function selectParent(el, selector2) {
@@ -8086,8 +8086,9 @@ function objectValuesExcept(obj, exceptList) {
 
 // src/components/InfiniteTable/components/cell.css.ts
 var ColumnCellCls = "cell_ColumnCellCls__1eexc2a6 cell_CellCls__1eexc2a5 utilities_display_flex__16lm1iwz utilities_flexFlow_row__16lm1iw1o utilities_alignItems_center__16lm1iw1q utilities_position_absolute__16lm1iw2 utilities_willChange_transform__16lm1iw22 utilities_whiteSpace_nowrap__16lm1iw23 utilities_userSelect_none__16lm1iw17";
-var ColumnCellRecipe = createRuntimeFn({ defaultClassName: "cell_ColumnCellRecipe__1eexc2ah", variantClassNames: { dragging: { false: "cell_ColumnCellRecipe_dragging_false__1eexc2ai", true: "cell_ColumnCellRecipe_dragging_true__1eexc2aj" }, cellSelected: { false: "cell_ColumnCellRecipe_cellSelected_false__1eexc2ak", true: "cell_ColumnCellRecipe_cellSelected_true__1eexc2al" }, align: { start: "cell_ColumnCellRecipe_align_start__1eexc2am", end: "cell_ColumnCellRecipe_align_end__1eexc2an", center: "cell_ColumnCellRecipe_align_center__1eexc2ao" }, verticalAlign: { start: "cell_ColumnCellRecipe_verticalAlign_start__1eexc2ap", end: "cell_ColumnCellRecipe_verticalAlign_end__1eexc2aq", center: "cell_ColumnCellRecipe_verticalAlign_center__1eexc2ar" }, rowActive: { false: "cell_ColumnCellRecipe_rowActive_false__1eexc2as", true: "cell_ColumnCellRecipe_rowActive_true__1eexc2at" }, groupRow: { false: "cell_ColumnCellRecipe_groupRow_false__1eexc2au", true: "cell_ColumnCellRecipe_groupRow_true__1eexc2av" }, groupCell: { false: "cell_ColumnCellRecipe_groupCell_false__1eexc2aw", true: "cell_ColumnCellRecipe_groupCell_true__1eexc2ax" }, rowDisabled: { false: "cell_ColumnCellRecipe_rowDisabled_false__1eexc2ay", true: "cell_ColumnCellRecipe_rowDisabled_true__1eexc2az" }, zebra: { false: "cell_ColumnCellRecipe_zebra_false__1eexc2a10", even: "cell_ColumnCellRecipe_zebra_even__1eexc2a11", odd: "cell_ColumnCellRecipe_zebra_odd__1eexc2a12" }, rowSelected: { true: "cell_ColumnCellRecipe_rowSelected_true__1eexc2a13", false: "cell_ColumnCellRecipe_rowSelected_false__1eexc2a14", null: "cell_ColumnCellRecipe_rowSelected_null__1eexc2a15" }, first: { true: "cell_ColumnCellRecipe_first_true__1eexc2a16", false: "cell_ColumnCellRecipe_first_false__1eexc2a17" }, last: { true: "cell_ColumnCellRecipe_last_true__1eexc2a18", false: "cell_ColumnCellRecipe_last_false__1eexc2a19" }, groupByField: { true: "cell_ColumnCellRecipe_groupByField_true__1eexc2a1a", false: "cell_ColumnCellRecipe_groupByField_false__1eexc2a1b" }, firstInCategory: { true: "cell_ColumnCellRecipe_firstInCategory_true__1eexc2a1c", false: "cell_ColumnCellRecipe_firstInCategory_false__1eexc2a1d" }, firstRow: { true: "cell_ColumnCellRecipe_firstRow_true__1eexc2a1e", false: "cell_ColumnCellRecipe_firstRow_false__1eexc2a1f" }, firstRowInHorizontalLayoutPage: { true: "cell_ColumnCellRecipe_firstRowInHorizontalLayoutPage_true__1eexc2a1g", false: "cell_ColumnCellRecipe_firstRowInHorizontalLayoutPage_false__1eexc2a1h" }, lastInCategory: { true: "cell_ColumnCellRecipe_lastInCategory_true__1eexc2a1i", false: "cell_ColumnCellRecipe_lastInCategory_false__1eexc2a1j" }, pinned: { start: "cell_ColumnCellRecipe_pinned_start__1eexc2a1k", end: "cell_ColumnCellRecipe_pinned_end__1eexc2a1l", false: "cell_ColumnCellRecipe_pinned_false__1eexc2a1m" }, filtered: { true: "cell_ColumnCellRecipe_filtered_true__1eexc2a1n", false: "cell_ColumnCellRecipe_filtered_false__1eexc2a1o" } }, defaultVariants: {}, compoundVariants: [[{ firstRowInHorizontalLayoutPage: true, firstRow: false }, "cell_ColumnCellRecipe_compound_0__1eexc2a1p"], [{ pinned: "start", lastInCategory: true }, "cell_ColumnCellRecipe_compound_1__1eexc2a1q"], [{ pinned: "start", firstInCategory: true }, "cell_ColumnCellRecipe_compound_2__1eexc2a1r"], [{ pinned: "end", firstInCategory: true }, "cell_ColumnCellRecipe_compound_3__1eexc2a1s"], [{ pinned: "end", lastInCategory: true }, "cell_ColumnCellRecipe_compound_4__1eexc2a1t"], [{ align: "center", groupCell: false }, "cell_ColumnCellRecipe_compound_5__1eexc2a1u"], [{ rowDisabled: true, zebra: "odd" }, "cell_ColumnCellRecipe_compound_6__1eexc2a1v"]] });
-var ColumnCellSelectionIndicatorRecipe = createRuntimeFn({ defaultClassName: "cell_ColumnCellSelectionIndicatorRecipe__1eexc2a8", variantClassNames: { right: { true: "cell_ColumnCellSelectionIndicatorRecipe_right_true__1eexc2a9", false: "cell_ColumnCellSelectionIndicatorRecipe_right_false__1eexc2aa" }, left: { true: "cell_ColumnCellSelectionIndicatorRecipe_left_true__1eexc2ab", false: "cell_ColumnCellSelectionIndicatorRecipe_left_false__1eexc2ac" }, top: { true: "cell_ColumnCellSelectionIndicatorRecipe_top_true__1eexc2ad", false: "cell_ColumnCellSelectionIndicatorRecipe_top_false__1eexc2ae" }, bottom: { true: "cell_ColumnCellSelectionIndicatorRecipe_bottom_true__1eexc2af", false: "cell_ColumnCellSelectionIndicatorRecipe_bottom_false__1eexc2ag" } }, defaultVariants: {}, compoundVariants: [] });
+var ColumnCellRecipe = createRuntimeFn({ defaultClassName: "cell_ColumnCellRecipe__1eexc2am", variantClassNames: { dragging: { false: "cell_ColumnCellRecipe_dragging_false__1eexc2an", true: "cell_ColumnCellRecipe_dragging_true__1eexc2ao" }, cellSelected: { false: "cell_ColumnCellRecipe_cellSelected_false__1eexc2ap", true: "cell_ColumnCellRecipe_cellSelected_true__1eexc2aq" }, align: { start: "cell_ColumnCellRecipe_align_start__1eexc2ar", end: "cell_ColumnCellRecipe_align_end__1eexc2as", center: "cell_ColumnCellRecipe_align_center__1eexc2at" }, verticalAlign: { start: "cell_ColumnCellRecipe_verticalAlign_start__1eexc2au", end: "cell_ColumnCellRecipe_verticalAlign_end__1eexc2av", center: "cell_ColumnCellRecipe_verticalAlign_center__1eexc2aw" }, rowActive: { false: "cell_ColumnCellRecipe_rowActive_false__1eexc2ax", true: "cell_ColumnCellRecipe_rowActive_true__1eexc2ay" }, groupRow: { false: "cell_ColumnCellRecipe_groupRow_false__1eexc2az", true: "cell_ColumnCellRecipe_groupRow_true__1eexc2a10" }, groupCell: { false: "cell_ColumnCellRecipe_groupCell_false__1eexc2a11", true: "cell_ColumnCellRecipe_groupCell_true__1eexc2a12" }, rowDisabled: { false: "cell_ColumnCellRecipe_rowDisabled_false__1eexc2a13", true: "cell_ColumnCellRecipe_rowDisabled_true__1eexc2a14" }, zebra: { false: "cell_ColumnCellRecipe_zebra_false__1eexc2a15", even: "cell_ColumnCellRecipe_zebra_even__1eexc2a16", odd: "cell_ColumnCellRecipe_zebra_odd__1eexc2a17" }, rowSelected: { true: "cell_ColumnCellRecipe_rowSelected_true__1eexc2a18", false: "cell_ColumnCellRecipe_rowSelected_false__1eexc2a19", null: "cell_ColumnCellRecipe_rowSelected_null__1eexc2a1a" }, first: { true: "cell_ColumnCellRecipe_first_true__1eexc2a1b", false: "cell_ColumnCellRecipe_first_false__1eexc2a1c" }, last: { true: "cell_ColumnCellRecipe_last_true__1eexc2a1d", false: "cell_ColumnCellRecipe_last_false__1eexc2a1e" }, groupByField: { true: "cell_ColumnCellRecipe_groupByField_true__1eexc2a1f", false: "cell_ColumnCellRecipe_groupByField_false__1eexc2a1g" }, firstInCategory: { true: "cell_ColumnCellRecipe_firstInCategory_true__1eexc2a1h", false: "cell_ColumnCellRecipe_firstInCategory_false__1eexc2a1i" }, firstRow: { true: "cell_ColumnCellRecipe_firstRow_true__1eexc2a1j", false: "cell_ColumnCellRecipe_firstRow_false__1eexc2a1k" }, firstRowInHorizontalLayoutPage: { true: "cell_ColumnCellRecipe_firstRowInHorizontalLayoutPage_true__1eexc2a1l", false: "cell_ColumnCellRecipe_firstRowInHorizontalLayoutPage_false__1eexc2a1m" }, lastInCategory: { true: "cell_ColumnCellRecipe_lastInCategory_true__1eexc2a1n", false: "cell_ColumnCellRecipe_lastInCategory_false__1eexc2a1o" }, pinned: { start: "cell_ColumnCellRecipe_pinned_start__1eexc2a1p", end: "cell_ColumnCellRecipe_pinned_end__1eexc2a1q", false: "cell_ColumnCellRecipe_pinned_false__1eexc2a1r" }, filtered: { true: "cell_ColumnCellRecipe_filtered_true__1eexc2a1s", false: "cell_ColumnCellRecipe_filtered_false__1eexc2a1t" } }, defaultVariants: {}, compoundVariants: [[{ firstRowInHorizontalLayoutPage: true, firstRow: false }, "cell_ColumnCellRecipe_compound_0__1eexc2a1u"], [{ pinned: "start", lastInCategory: true }, "cell_ColumnCellRecipe_compound_1__1eexc2a1v"], [{ pinned: "start", firstInCategory: true }, "cell_ColumnCellRecipe_compound_2__1eexc2a1w"], [{ pinned: "end", firstInCategory: true }, "cell_ColumnCellRecipe_compound_3__1eexc2a1x"], [{ pinned: "end", lastInCategory: true }, "cell_ColumnCellRecipe_compound_4__1eexc2a1y"], [{ align: "center", groupCell: false }, "cell_ColumnCellRecipe_compound_5__1eexc2a1z"], [{ rowDisabled: true, zebra: "odd" }, "cell_ColumnCellRecipe_compound_6__1eexc2a20"]] });
+var ColumnCellSelectionIndicatorRecipe = createRuntimeFn({ defaultClassName: "cell_ColumnCellSelectionIndicatorRecipe__1eexc2ad", variantClassNames: { right: { true: "cell_ColumnCellSelectionIndicatorRecipe_right_true__1eexc2ae", false: "cell_ColumnCellSelectionIndicatorRecipe_right_false__1eexc2af" }, left: { true: "cell_ColumnCellSelectionIndicatorRecipe_left_true__1eexc2ag", false: "cell_ColumnCellSelectionIndicatorRecipe_left_false__1eexc2ah" }, top: { true: "cell_ColumnCellSelectionIndicatorRecipe_top_true__1eexc2ai", false: "cell_ColumnCellSelectionIndicatorRecipe_top_false__1eexc2aj" }, bottom: { true: "cell_ColumnCellSelectionIndicatorRecipe_bottom_true__1eexc2ak", false: "cell_ColumnCellSelectionIndicatorRecipe_bottom_false__1eexc2al" } }, defaultVariants: {}, compoundVariants: [] });
+var FlashingColumnCellRecipe = createRuntimeFn({ defaultClassName: "cell_FlashingColumnCellRecipe__1eexc2a9", variantClassNames: { direction: { up: "cell_FlashingColumnCellRecipe_direction_up__1eexc2aa", down: "cell_FlashingColumnCellRecipe_direction_down__1eexc2ab", neutral: "cell_FlashingColumnCellRecipe_direction_neutral__1eexc2ac" } }, defaultVariants: {}, compoundVariants: [] });
 var SelectionCheckboxCls = "cell_SelectionCheckboxCls__1eexc2a7";
 
 // src/components/InfiniteTable/components/CheckBox.tsx
@@ -18376,6 +18377,8 @@ function initSetupState2({
     cellContextMenu: buildSubscriptionCallback(),
     contextMenu: buildSubscriptionCallback(),
     onFilterOperatorMenuClick: buildSubscriptionCallback(),
+    flashingDurationCSSVarValue: null,
+    onFlashingDurationCSSVarChange: buildSubscriptionCallback(),
     onRowHeightCSSVarChange: buildSubscriptionCallback(),
     onRowDetailHeightCSSVarChange: buildSubscriptionCallback(),
     onColumnHeaderHeightCSSVarChange: buildSubscriptionCallback(),
@@ -18529,6 +18532,7 @@ var cleanupState = (state) => {
   state.headerBrain.destroy();
   state.renderer.destroy();
   state.onRenderUpdater.destroy();
+  state.onFlashingDurationCSSVarChange.destroy();
   state.onRowHeightCSSVarChange.destroy();
   state.onColumnHeaderHeightCSSVarChange.destroy();
   state.onColumnMenuClick.destroy();
@@ -19485,6 +19489,14 @@ function useComputed() {
         componentActions.rowHeight = rowHeight2;
       }
     });
+    componentState.onFlashingDurationCSSVarChange.onChange(
+      (flashingDuration) => {
+        const num = flashingDuration ? flashingDuration * 1 : null;
+        if (num != null && !isNaN(num)) {
+          componentActions.flashingDurationCSSVarValue = num;
+        }
+      }
+    );
     componentState.onRowDetailHeightCSSVarChange.onChange((rowDetailHeight2) => {
       if (rowDetailHeight2) {
         componentActions.rowDetailHeight = rowDetailHeight2;
@@ -19809,7 +19821,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "5.0.0-canary.3"
+      version: "5.0.0-canary.4"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -23722,6 +23734,7 @@ var InfiniteTableComponent = React68.memo(
       domRef,
       portalDOMRef,
       onRowHeightCSSVarChange,
+      onFlashingDurationCSSVarChange,
       onRowDetailHeightCSSVarChange,
       onColumnHeaderHeightCSSVarChange,
       rowHeightCSSVar,
@@ -23812,18 +23825,29 @@ var InfiniteTableComponent = React68.memo(
     ), rowHeightCSSVar ? /* @__PURE__ */ React68.createElement(
       CSSNumericVariableWatch,
       {
+        key: "row-height",
         varName: rowHeightCSSVar,
         onChange: onRowHeightCSSVarChange
       }
-    ) : null, rowDetailHeightCSSVar ? /* @__PURE__ */ React68.createElement(
+    ) : null, /* @__PURE__ */ React68.createElement(
+      CSSNumericVariableWatch,
+      {
+        key: "flashing-duration",
+        allowInts: true,
+        varName: ThemeVars.components.Cell.flashingDuration,
+        onChange: onFlashingDurationCSSVarChange
+      }
+    ), rowDetailHeightCSSVar ? /* @__PURE__ */ React68.createElement(
       CSSNumericVariableWatch,
       {
+        key: "row-detail-height",
         varName: rowDetailHeightCSSVar,
         onChange: onRowDetailHeightCSSVarChange
       }
     ) : null, columnHeaderHeightCSSVar ? /* @__PURE__ */ React68.createElement(
       CSSNumericVariableWatch,
       {
+        key: "column-header-height",
         varName: columnHeaderHeightCSSVar,
         onChange: onColumnHeaderHeightCSSVarChange
       }
@@ -24321,6 +24345,157 @@ var _WeakFixedSizeSet = class {
 var WeakFixedSizeSet = _WeakFixedSizeSet;
 WeakFixedSizeSet.DEFAULT_SIZE = 10;
 
+// src/components/hooks/useEffectWhenSameDeps.ts
+import { useEffect as useEffect40, useRef as useRef31 } from "react";
+var isSameDeps = (deps, prevDeps) => {
+  return deps.every((dep, index) => dep === prevDeps[index]);
+};
+var useEffectWhenSameDeps = (callback, deps) => {
+  const depsRef = useRef31(deps);
+  const sameDeps = isSameDeps(deps, depsRef.current);
+  const isInitialRef = useRef31(true);
+  depsRef.current = deps;
+  const effectDepsRef = useRef31(["same"]);
+  const effectDeps = sameDeps ? [Date.now()] : effectDepsRef.current;
+  effectDepsRef.current = effectDeps;
+  const callbackRef = useRef31(callback);
+  callbackRef.current = callback;
+  useEffect40(() => {
+    if (isInitialRef.current) {
+      isInitialRef.current = false;
+      return;
+    }
+    return callbackRef.current();
+  }, effectDeps);
+};
+
+// src/components/hooks/useEffectWhen.ts
+import { useEffect as useEffect41, useRef as useRef32 } from "react";
+var isSameDeps2 = (deps, prevDeps, compare) => {
+  return deps.every((dep, index) => {
+    if (compare) {
+      return compare(dep, prevDeps[index]);
+    }
+    return dep === prevDeps[index];
+  });
+};
+var useEffectWhen = (callback, options) => {
+  const { same: depsForSame, different: depsForDifferent, compare } = options;
+  const sameDepsRef = useRef32(depsForSame);
+  const differentDepsRef = useRef32(depsForDifferent);
+  const sameRespected = isSameDeps2(depsForSame, sameDepsRef.current, compare);
+  const differentRespected = !isSameDeps2(
+    depsForDifferent,
+    differentDepsRef.current,
+    compare
+  );
+  const isInitialRef = useRef32(true);
+  sameDepsRef.current = depsForSame;
+  differentDepsRef.current = depsForDifferent;
+  const effectDepsRef = useRef32(["same"]);
+  const effectDeps = sameRespected && differentRespected ? [Date.now()] : effectDepsRef.current;
+  effectDepsRef.current = effectDeps;
+  const callbackRef = useRef32(callback);
+  callbackRef.current = callback;
+  if (sameRespected && differentRespected) {
+    isInitialRef.current = false;
+  }
+  useEffect41(() => {
+    if (isInitialRef.current) {
+      return;
+    }
+    return callbackRef.current();
+  }, effectDeps);
+};
+
+// src/components/InfiniteTable/components/InfiniteTableRow/FlashingColumnCell.tsx
+import * as React69 from "react";
+var currentFlashingDurationVar = stripVar(
+  InternalVars.currentFlashingDuration
+);
+var defaultRender = ({ children }) => {
+  return /* @__PURE__ */ React69.createElement(React69.Fragment, null, children);
+};
+var DEFAULT_FLASH_DURATION = 1e3;
+var createFlashingColumnCellComponent = (options = {}) => {
+  const {
+    flashDuration: FLASH_DURATION,
+    // fadeDuration,
+    flashClassName,
+    // fadeClassName,
+    render = defaultRender
+  } = options;
+  const FlashingColumnCell2 = React69.forwardRef(
+    (props, _ref) => {
+      var _a;
+      const cellContext = useInfiniteColumnCell();
+      const {
+        state: { flashingDurationCSSVarValue }
+      } = useInfiniteTable();
+      const duration = typeof flashingDurationCSSVarValue === "number" ? (_a = flashingDurationCSSVarValue != null ? flashingDurationCSSVarValue : FLASH_DURATION) != null ? _a : DEFAULT_FLASH_DURATION : FLASH_DURATION != null ? FLASH_DURATION : DEFAULT_FLASH_DURATION;
+      const { domRef, value, column, rowInfo, htmlElementRef } = cellContext;
+      const rowId = rowInfo.id;
+      const columnId = column.id;
+      const initialRef = React69.useRef(true);
+      const oldValueRef = React69.useRef(value);
+      const oldValue = initialRef.current ? null : oldValueRef.current;
+      initialRef.current = false;
+      const flashTimeoutIdRef = React69.useRef();
+      const fadeTimeoutIdRef = React69.useRef();
+      useEffectWhen(
+        () => {
+          if (value === oldValueRef.current) {
+            return;
+          }
+          if (flashTimeoutIdRef.current) {
+            clearTimeout(flashTimeoutIdRef.current);
+          }
+          if (fadeTimeoutIdRef.current) {
+            clearTimeout(fadeTimeoutIdRef.current);
+          }
+          const el = htmlElementRef.current;
+          oldValueRef.current = value;
+          if (!el) {
+            return;
+          }
+          const flashDirection = typeof value === "number" ? value > oldValue ? "up" : "down" : "neutral";
+          const internalflashCls = FlashingColumnCellRecipe({
+            direction: flashDirection
+          }).split(" ");
+          el.style.setProperty(currentFlashingDurationVar, `${duration}`);
+          if (flashClassName) {
+            el.classList.add(flashClassName);
+          }
+          el.classList.add(...internalflashCls);
+          flashTimeoutIdRef.current = setTimeout(() => {
+            flashTimeoutIdRef.current = void 0;
+            if (flashClassName) {
+              el.classList.remove(flashClassName);
+            }
+            el.classList.remove(...internalflashCls);
+            el.style.removeProperty(currentFlashingDurationVar);
+          }, duration);
+          return () => {
+            if (flashTimeoutIdRef.current) {
+              clearTimeout(flashTimeoutIdRef.current);
+            }
+            if (fadeTimeoutIdRef.current) {
+              clearTimeout(fadeTimeoutIdRef.current);
+            }
+          };
+        },
+        {
+          same: [columnId, rowId],
+          different: [value]
+        }
+      );
+      return /* @__PURE__ */ React69.createElement("div", __spreadProps(__spreadValues({ ref: domRef }, props), { className: join(props.className) }), render({ children: props.children, oldValue }));
+    }
+  );
+  return FlashingColumnCell2;
+};
+var FlashingColumnCell = createFlashingColumnCellComponent();
+
 // src/index.tsx
 var components = {
   CheckBox: InfiniteCheckBox,
@@ -24336,6 +24511,7 @@ export {
   DataSourceActionType,
   DeepMap,
   FixedSizeSet,
+  FlashingColumnCell,
   GroupRowsState,
   InfiniteTable,
   InfiniteTableClassName,
@@ -24347,6 +24523,7 @@ export {
   RowSelectionState,
   WeakFixedSizeSet,
   components,
+  createFlashingColumnCellComponent,
   debounce,
   debug,
   defaultFilterTypes2 as defaultFilterTypes,
@@ -24362,6 +24539,8 @@ export {
   useManagedComponentState as useComponentState,
   useDataSourceInternal,
   useDataSourceState,
+  useEffectWhen,
+  useEffectWhenSameDeps,
   useEffectWithChanges,
   useEffectWithObject,
   useGridScroll,
@@ -24373,6 +24552,7 @@ export {
   useMasterRowInfo,
   useOverlay,
   useOverlayPortal,
+  usePrevious,
   useRowInfoReducers,
   useVisibleColumnSizes
 };

package/package.json

@@ -25,7 +25,7 @@
   "bugs": {
     "url": "https://github.com/infinite-table/infinite-react/issues"
   },
-  "version": "5.0.0-canary.3",
+  "version": "5.0.0-canary.4",
   "main": "index.js",
   "module": "index.mjs",
   "typings": "index.d.ts",
@@ -34,5 +34,5 @@
   },
   "license": "Commercial & Open Source",
   "//": "will be updated at build time",
-  "publishedAt": 1727210493082
+  "publishedAt": 1727299420068
 }