UNPKG

@infinite-table/infinite-react

Version:
1,496 lines (1,462 loc) 947 kB
var __create = Object.create; var __defProp = Object.defineProperty; var __getOwnPropDesc = Object.getOwnPropertyDescriptor; var __getOwnPropNames = Object.getOwnPropertyNames; var __getProtoOf = Object.getPrototypeOf; var __hasOwnProp = Object.prototype.hasOwnProperty; var __commonJS = (cb, mod) => function __require() { return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports; }; var __copyProps = (to, from, except, desc) => { if (from && typeof from === "object" || typeof from === "function") { for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); } return to; }; var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps( // If the importer is in node compatibility mode or this is not an ESM // file that has been converted to a CommonJS file using a Babel- // compatible transform (i.e. "__esModule" has not been set), then set // "default" to the CommonJS "module.exports" for node compatibility. isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod )); // ../node_modules/binary-search/index.js var require_binary_search = __commonJS({ "../node_modules/binary-search/index.js"(exports, module) { "use strict"; module.exports = function(haystack, needle, comparator, low, high) { var mid, cmp; if (low === void 0) low = 0; else { low = low | 0; if (low < 0 || low >= haystack.length) throw new RangeError("invalid lower bound"); } if (high === void 0) high = haystack.length - 1; else { high = high | 0; if (high < low || high >= haystack.length) throw new RangeError("invalid upper bound"); } while (low <= high) { mid = low + (high - low >>> 1); cmp = +comparator(haystack[mid], needle, mid, haystack); if (cmp < 0) low = mid + 1; else if (cmp > 0) high = mid - 1; else return mid; } return ~low; }; } }); // src/components/utils/debounce.ts function debounce(fn, { wait }) { let timeout = null; return function(...args) { const context = this; if (timeout !== null) { clearTimeout(timeout); } timeout = setTimeout(() => { fn.apply(context, args); }, wait); }; } // src/components/InfiniteTable/index.tsx import * as React70 from "react"; // src/utils/join.ts var join = (...args) => args.filter((x) => !!`${x}`).join(" "); // src/components/CSSNumericVariableWatch.tsx import * as React2 from "react"; import { useRef as useRef2 } from "react"; // src/components/utils/buildSubscriptionCallback.tsx function buildSubscriptionCallback(withRaf = false) { let lastCallValue = null; let fns = []; let rafId = null; const updater = (items, callback) => { const results = []; if (withRaf) { if (rafId != null) { cancelAnimationFrame(rafId); rafId = null; } requestAnimationFrame(() => { lastCallValue = items; rafId = null; for (let i = 0, len = fns.length; i < len; i++) { results.push(fns[i](items)); } callback?.(results); }); } else { lastCallValue = items; for (let i = 0, len = fns.length; i < len; i++) { results.push(fns[i](items)); } callback?.(results); } }; updater.get = () => lastCallValue; updater.onChange = (fn) => { fns.push(fn); return () => { fns = fns.filter((f) => f !== fn); }; }; updater.destroy = () => { updater(null); fns.length = 0; }; updater.getListenersCount = () => fns.length; return updater; } // src/utils/DeepMap/once.ts function once(fn) { let called = false; let result = null; const onceFn = (...args) => { if (called) { return result; } called = true; result = fn(...args); return result; }; return onceFn; } // src/utils/DeepMap/sortAscending.ts var sortAscending = (a, b) => a - b; // src/utils/DeepMap/index.ts var SORT_ASC_REVISION = (p1, p2) => sortAscending(p1.revision, p2.revision); var DeepMap = class _DeepMap { constructor(initial) { this.map = /* @__PURE__ */ new Map(); this.length = 0; this.revision = 0; this.emptyKey = Symbol("emptyKey"); this.visit = (fn) => { this.map.forEach((_, k) => this.visitKey(k, this.map, [], fn, false)); }; this.visitSome = (fn) => { this.visitWithNext([], fn, true); }; this.visitDepthFirst = (fn) => { this.visitWithNext([], fn, false); }; this.visitWithNext = (parentKeys, fn, earlyReturn, currentMap = this.map, depthLimit, skipSelfValue) => { if (!currentMap) { return; } let i = 0; const hasEmptyKey = currentMap.has(this.emptyKey); let allowEmptyKey = skipSelfValue ? false : true; if (depthLimit !== void 0) { if (depthLimit < 0) { return; } depthLimit--; } const iterator = (_, key) => { const pair = currentMap.get(key); if (!pair) { return; } const { map: map2 } = pair; const isEmptyKey = key === this.emptyKey; if (isEmptyKey && !allowEmptyKey) { return; } const keys = isEmptyKey ? [] : [...parentKeys, key]; let next = map2 ? () => this.visitWithNext( keys, fn, earlyReturn, map2, depthLimit !== void 0 ? depthLimit - 1 : void 0 ) : void 0; if (pair.hasOwnProperty("value")) { const res = fn(pair.value, keys, i, next, pair); if (earlyReturn && res === true) { return true; } i++; } else { next?.(); } return; }; if (hasEmptyKey) { iterator(void 0, this.emptyKey); allowEmptyKey = false; i = 0; } for (const [key, pair] of currentMap) { const res = iterator(pair, key); if (earlyReturn && res === true) { return res; } } return; }; this.fill(initial); } static clone(map2) { const clone = new _DeepMap(); map2.visit((pair, keys) => { clone.set(keys, pair.value); }); return clone; } fill(initial) { if (initial) { initial.forEach((entry) => { const [keys, value] = entry; this.set(keys, value); }); } } getValuesStartingWith(keys, excludeSelf, depthLimit) { const result = []; this.getStartingWith( keys, (_keys, value) => { result.push(value); }, excludeSelf, depthLimit ); return result; } getEntriesStartingWith(keys, excludeSelf, depthLimit) { const result = []; this.getStartingWith( keys, (keys2, value) => { result.push([keys2, value]); }, excludeSelf, depthLimit ); return result; } getUnnestedKeysStartingWith(keys, excludeSelf, depthLimit) { const pairs = []; const fn = (pair2) => { pairs.push(pair2); }; let currentMap = this.map; let pair; let stop = false; if (keys.length) { for (let i = 0, len = keys.length; i < len; i++) { const key = keys[i]; pair = currentMap.get(key); if (!pair || !pair.map) { stop = true; if (i === len - 1) { stop = true; break; } else { return []; } } currentMap = pair.map; } } else { if (!excludeSelf) { const hasEmptyKey = currentMap.has(this.emptyKey); if (hasEmptyKey) { return [[]]; } } } if (pair && pair.value !== void 0) { if (!excludeSelf) { fn({ ...pair, keys }); stop = true; } } if (stop) { return pairs.sort(SORT_ASC_REVISION).map((pair2) => pair2.keys); } this.visitWithNext( keys, (_value, keys2, _i, _next, pair2) => { fn({ ...pair2, keys: keys2 }); }, false, currentMap, depthLimit, excludeSelf ); return pairs.sort(SORT_ASC_REVISION).map((pair2) => pair2.keys); } getKeysStartingWith(keys, excludeSelf, depthLimit) { const result = []; this.getStartingWith( keys, (keys2) => { result.push(keys2); }, excludeSelf, depthLimit ); return result; } getStartingWith(keys, fn, excludeSelf, depthLimit) { let currentMap = this.map; let pair; let stop = false; if (keys.length) { for (let i = 0, len = keys.length; i < len; i++) { const key = keys[i]; pair = currentMap.get(key); if (!pair || !pair.map) { stop = true; if (i === len - 1) { stop = true; break; } else { return; } } currentMap = pair.map; } } if (pair && pair.value !== void 0) { if (!excludeSelf) { fn(keys, pair.value); } } if (stop) { return; } this.visitWithNext( keys, (value, keys2, _i, next) => { fn(keys2, value); next?.(); }, false, currentMap, depthLimit, excludeSelf ); } getMapAt(keys) { let currentMap = this.map; let pair; if (!keys.length) { return this.map; } for (let i = 0, len = keys.length; i < len; i++) { const key = keys[i]; pair = currentMap.get(key); if (!pair || !pair.map) { return void 0; } currentMap = pair.map; } return currentMap; } getAllChildrenSizeFor(keys) { let currentMap = this.map; let pair; if (!keys.length) { return this.length; } for (let i = 0, len = keys.length; i < len; i++) { const key = keys[i]; pair = currentMap.get(key); if (!pair || !pair.map) { return 0; } currentMap = pair.map; } return pair.length; } getDirectChildrenSizeFor(keys) { let currentMap = this.map; if (!keys.length) { keys = [this.emptyKey]; } for (let i = 0, len = keys.length; i < len; i++) { const key = keys[i]; const last = i === len - 1; const pair = currentMap.get(key); if (!pair || !pair.map) { return 0; } currentMap = pair.map; if (last) { return currentMap?.size ?? 0; } } return 0; } set(keys, value) { let currentMap = this.map; if (!keys.length) { keys = [this.emptyKey]; } for (let i = 0, len = keys.length; i < len; i++) { const key = keys[i]; const last = i === len - 1; const pair = currentMap.get(key) || { length: 0 }; if (last) { pair.revision = this.revision++; pair.value = value; currentMap.set(key, pair); this.length++; } else { if (!pair.map) { pair.map = /* @__PURE__ */ new Map(); currentMap.set(key, pair); } pair.length++; currentMap = pair.map; } } return this; } get(keys) { let currentMap = this.map; if (!keys.length) { keys = [this.emptyKey]; } for (let i = 0, len = keys.length; i < len; i++) { const key = keys[i]; const last = i === len - 1; const pair = currentMap.get(key); if (last) { return pair ? pair.value : void 0; } else { if (!pair || !pair.map) { return; } currentMap = pair.map; } } return; } get size() { return this.length; } clear() { const clearMap = (map2) => { map2.forEach((value, _key) => { const { map: map3 } = value; if (map3) { clearMap(map3); } }); map2.clear(); }; clearMap(this.map); this.length = 0; this.revision = 0; } delete(keys) { let currentMap = this.map; if (!keys.length) { keys = [this.emptyKey]; } else { keys = [...keys]; } const maps = [currentMap]; const pairs = []; let result = false; for (let i = 0, len = keys.length; i < len; i++) { const key = keys[i]; const last = i === len - 1; const pair = currentMap.get(key); if (last) { if (pair) { if (pair.hasOwnProperty("value")) { delete pair.value; delete pair.revision; result = true; pairs.forEach((pair2) => { pair2.length--; }); this.length--; } if (pair.map && pair.map.size === 0) { delete pair.map; } if (!pair.map) { currentMap.delete(key); } } break; } else { if (!pair || !pair.map) { result = false; break; } pairs.push(pair); currentMap = pair.map; maps.push(currentMap); } } while (maps.length) { const map2 = maps.pop(); const keysLen = keys.length; keys.pop(); if (keysLen > 0 && map2?.size === 0) { const parentMap = maps[maps.length - 1]; const parentKey = keys[keys.length - 1]; const pair = parentMap?.get(parentKey); if (pair) { delete pair.map; if (!pair.hasOwnProperty("value")) { parentMap.delete(parentKey); } } } } return result; } has(keys) { let currentMap = this.map; if (!keys.length) { keys = [this.emptyKey]; } for (let i = 0, len = keys.length; i < len; i++) { const key = keys[i]; const last = i === len - 1; const pair = currentMap.get(key); if (last) { return pair ? pair.hasOwnProperty("value") : false; } else { if (!pair || !pair.map) { return false; } currentMap = pair.map; } } return false; } visitKey(key, currentMap, parentKeys, fn, earlyReturn) { const pair = currentMap.get(key); if (!pair) { return; } const { map: map2 } = pair; const keys = key === this.emptyKey ? [] : [...parentKeys, key]; const next = once(() => { if (map2) { for (const [k] of map2) { const res = this.visitKey(k, map2, keys, fn, earlyReturn); if (earlyReturn && res === true) { return true; } } } return false; }); if (pair.hasOwnProperty("value")) { const res = fn(pair, keys, next); if (earlyReturn && res === true) { return true; } } next(); return; } getArray(fn) { const result = []; this.visit((pair, keys) => { const res = fn({ ...pair, keys }); if (keys.length === 0) { result.splice(0, 0, res); } else { result.push(res); } }); return result; } rawKeysAt(keys) { const map2 = this.getMapAt(keys); if (!map2) { return []; } return [...map2.keys()]; } valuesAt(keys) { const map2 = this.getMapAt(keys); if (!map2) { return []; } const result = []; map2.forEach((bag) => { if (bag.value !== void 0) { result.push(bag.value); } }); return result; } values() { return this.sortedIterator((pair) => pair.value); } keys() { const keys = this.sortedIterator((pair) => pair.keys); return keys; } entries() { return this.sortedIterator((pair) => [ pair.keys, pair.value ]); } topDownEntries() { return this.getArray((pair) => [ pair.keys, pair.value ]); } topDownKeys() { return this.getArray((pair) => pair.keys); } topDownValues() { return this.getArray((pair) => pair.value); } sortedIterator(fn) { const result = []; this.visit((pair, keys) => { result.push({ ...pair, keys }); }); result.sort(SORT_ASC_REVISION); function* makeIterator() { for (let i = 0, len = result.length; i < len; i++) { yield fn(result[i]); } } return makeIterator(); } // private iterator<ReturnType>( // fn: (pair: Pair<KeyType, ValueType> & { keys: KeyType[] }) => ReturnType, // ) { // const result: (Pair<KeyType, ValueType> & { keys: KeyType[] })[] = []; // this.visit((pair, keys) => { // result.push({ ...pair, keys }); // }); // function* makeIterator() { // for (let i = 0, len = result.length; i < len; i++) { // yield fn(result[i]); // } // } // return makeIterator(); // } }; // src/utils/getGlobal.ts function getGlobal() { return globalThis; } // src/utils/debugPackage.ts var COLORS = [ // '#0000CC', // '#0000FF', // '#0033CC', // '#0033FF', "#0066CC", "#0066FF", "#0099CC", "#0099FF", "#00CC00", "#00CC33", "#00CC66", "#00CC99", "#00CCCC", "#00CCFF", "#3300CC", "#3300FF", "#3333CC", "#3333FF", "#3366CC", "#3366FF", "#3399CC", "#3399FF", "#33CC00", "#33CC33", "#33CC66", "#33CC99", "#33CCCC", "#33CCFF", "#6600CC", "#6600FF", "#6633CC", "#6633FF", "#66CC00", "#66CC33", "#9900CC", "#9900FF", "#9933CC", "#9933FF", "#99CC00", "#99CC33", "#CC0000", "#CC0033", "#CC0066", "#CC0099", "#CC00CC", "#CC00FF", "#CC3300", "#CC3333", "#CC3366", "#CC3399", "#CC33CC", "#CC33FF", "#CC6600", "#CC6633", "#CC9900", "#CC9933", "#CCCC00", "#CCCC33", "#FF0000", "#FF0033", "#FF0066", "#FF0099", "#FF00CC", "#FF00FF", "#FF3300", "#FF3333", "#FF3366", "#FF3399", "#FF33CC", "#FF33FF", "#FF6600", "#FF6633", "#FF9900", "#FF9933", "#FFCC00", "#FFCC33" ]; var COLOR_SYMBOL = Symbol("color"); var USED_COLORS_MAP = /* @__PURE__ */ new WeakMap(); var GLOBAL_LOG_INTENT = buildSubscriptionCallback(); function initUsedColors(colors = COLORS) { USED_COLORS_MAP.set( colors, colors.map((_) => 0) ); } initUsedColors(); var getNextColor = (colors = COLORS) => { let usedColors = []; if (USED_COLORS_MAP.has(colors)) { usedColors = USED_COLORS_MAP.get(colors); } else { usedColors = colors.map((_) => 0); USED_COLORS_MAP.set(colors, usedColors); } const index = usedColors.reduce( (iMin, x, i, arr) => x < arr[iMin] ? i : iMin, 0 ); if (usedColors[index] != void 0) { usedColors[index]++; } return colors[index] ?? colors[0] ?? COLORS[0]; }; var CHANNEL_SEPARATOR = ":"; var CHANNEL_WILDCARD = "*"; var CHANNEL_NEGATION_CHAR = "-"; var STORAGE_SEPARATOR = ","; var STORAGE_KEY = "debug"; var STORAGE_DIFF_KEY = "diffdebug"; var DEFAULT_LOG_DIFF = false; var loggers = new DeepMap(); var enabledChannelsCache = /* @__PURE__ */ new Map(); function isChannelTargeted(channel, permissionToken) { const parts = channel.split(CHANNEL_SEPARATOR); const partsMap = new DeepMap(); partsMap.set(parts, true); const tokenParts = permissionToken.split(CHANNEL_SEPARATOR); const hasWildcard = new Set(tokenParts).has(CHANNEL_WILDCARD); const indexOfToken = tokenParts.indexOf(CHANNEL_WILDCARD); const storagePartsWithoutWildcard = hasWildcard ? tokenParts.slice(0, indexOfToken) : tokenParts; if (partsMap.getKeysStartingWith(storagePartsWithoutWildcard, hasWildcard).length > 0) { const remainingParts = tokenParts.slice(indexOfToken + 1); if (remainingParts.length) { return channel.endsWith(remainingParts.join(CHANNEL_SEPARATOR)); } return true; } return void 0; } function isChannelEnabled(channel, permissions) { const cacheKey = `channel=${channel}_permissions=${permissions}`; if (enabledChannelsCache.has(cacheKey)) { return enabledChannelsCache.get(cacheKey); } const permissionTokens = permissions.split(STORAGE_SEPARATOR); function done(result) { enabledChannelsCache.set(cacheKey, result); return result; } const exactTokens = []; const wildcardTokens = []; permissionTokens.forEach((permissionToken) => { if (permissionToken.includes(CHANNEL_WILDCARD)) { wildcardTokens.push(permissionToken); } else { exactTokens.push(permissionToken); } }); for (let i = 0; i < exactTokens.length; i++) { let exactToken = exactTokens[i]; const negative = exactToken.startsWith(CHANNEL_NEGATION_CHAR); if (negative) { exactToken = exactToken.substring(CHANNEL_NEGATION_CHAR.length); } if (isChannelTargeted(channel, exactToken)) { return done(negative ? false : true); } } for (let i = 0; i < wildcardTokens.length; i++) { let permissionToken = wildcardTokens[i]; const negated = permissionToken.startsWith("-"); if (negated) { permissionToken = permissionToken.substring(1); } if (isChannelTargeted(channel, permissionToken)) { return done(negated ? false : true); } } return done(false); } var getStorageKeyValue = () => debug.enable ?? (getGlobal() && getGlobal().localStorage?.getItem(STORAGE_KEY)) ?? ""; var getDiffStorageKeyValue = () => debug.diffenable ?? (getGlobal() && getGlobal().localStorage?.getItem(STORAGE_DIFF_KEY)) ?? `${DEFAULT_LOG_DIFF}`; var storageKeyValue = ""; var logDiffs = DEFAULT_LOG_DIFF; function updateStorageKeyValue(value) { logDiffs = `${getDiffStorageKeyValue()}` == "true"; if (storageKeyValue === value) { return; } storageKeyValue = value; enabledChannelsCache.clear(); } function debugPackage(channelName) { updateStorageKeyValue(getStorageKeyValue()); typeof getGlobal() !== "undefined" && getGlobal().addEventListener && getGlobal().addEventListener("storage", function() { updateStorageKeyValue(getStorageKeyValue()); }); function debugFactory(channelName2, parentChannel) { const channel = parentChannel ? `${parentChannel}${CHANNEL_SEPARATOR}${channelName2}` : channelName2; const channelParts = channel.split(CHANNEL_SEPARATOR); const foundLogger = loggers.get(channelParts); if (foundLogger) { return foundLogger; } const parentLogger = loggers.get(channelParts.slice(0, -1)); const defaultLogFn = (parentLogger ? parentLogger.logFn : debug.logFn) ?? defaultLogger; let logFn = defaultLogFn; let enabled; let lastMessageTimestamp = 0; const isEnabled = () => enabled ?? isChannelEnabled(channel, storageKeyValue); const color = getNextColor(debug.colors); const logger2 = Object.defineProperties( (...args) => { const intentListenersCount = GLOBAL_LOG_INTENT.getListenersCount(); let now; if (intentListenersCount > 0) { now = now ?? Date.now(); GLOBAL_LOG_INTENT({ color, channel, args, timestamp: now }); } if (isEnabled()) { now = now ?? Date.now(); if (lastMessageTimestamp && logDiffs) { const diff = now - lastMessageTimestamp; logFn(`%c[${channel}]`, `color: ${color}`, `+${diff}ms:`); } lastMessageTimestamp = now; const argsToLog = []; let textWithColors = void 0; args.forEach((arg) => { if (arg[COLOR_SYMBOL]) { if (textWithColors === void 0) { textWithColors = true; } argsToLog.push(...arg); } else { if (typeof arg !== "string" && typeof arg !== "number") { textWithColors = false; return; } argsToLog.push(`${arg}%s`); } }); if (textWithColors) { const theArgs = [ `%c[${channel}]%c %s`, `color: ${color}`, "", ...argsToLog, "" ]; logFn(...theArgs); } else { logFn(`%c[${channel}]%c %s`, `color: ${color}`, "", ...args); } } }, { channel: { value: channel }, color: { value: (colorName, ...args) => { const result = [ `%c${args.join(" ")}%c%s`, `color: ${colorName}`, "" ]; result.toString = () => args.join(" "); result[COLOR_SYMBOL] = true; return result; } }, extend: { value: (nextChannel) => { return debugFactory(nextChannel, channel); } }, enabled: { get: () => isEnabled(), set: (value) => { enabled = value; } }, logFn: { configurable: false, get: () => logFn, set: (fn) => { logFn = fn ?? defaultLogFn; } }, destroy: { value: () => { loggers.delete(channelParts); } } } ); loggers.set(channelParts, logger2); return logger2; } return debugFactory(channelName); } var defaultLogger = console.log.bind(console); var GLOBAL_ENABLE = void 0; Object.defineProperty(debugPackage, "enable", { get: () => GLOBAL_ENABLE, set: (value) => { GLOBAL_ENABLE = value; updateStorageKeyValue(getStorageKeyValue()); } }); var debug = debugPackage; debug.colors = COLORS; debug.logFn = defaultLogger; var onLogIntentGlobal = (intentChannel, fn) => { return GLOBAL_LOG_INTENT.onChange((options) => { if (!options) { return; } const { channel, args, color, timestamp } = options; if (isChannelTargeted(channel, intentChannel)) { fn({ channel, color, args, timestamp }); } }); }; debug.onLogIntent = onLogIntentGlobal; debug.destroyAll = () => { initUsedColors(); initUsedColors(debug.colors); loggers.clear(); enabledChannelsCache.clear(); }; if (false) { globalThis.debugPackage = debug; } // src/utils/debugLoggers.ts var dbg = (channelName) => { const result = debug( channelName ? `${channelName}:TYPE=debug` : "TYPE=debug" ); result.logFn = console.log.bind(console); return result; }; var err = (channelName) => { const result = debug( channelName ? `${channelName}:TYPE=error` : "TYPE=error" ); result.logFn = console.error.bind(console); return result; }; var emptyLogFn = () => emptyLogFn; emptyLogFn.extend = () => emptyLogFn; var Logger = class { constructor(channelName) { this.debug = emptyLogFn; this.error = emptyLogFn; if (false) { this.debug = dbg(channelName); this.error = err(channelName); } } }; // src/components/ResizeObserver/index.tsx import * as React from "react"; import { useMemo, useRef, useEffect, useLayoutEffect, useCallback } from "react"; var setupResizeObserver = (node, callback, config = { debounce: 0 }) => { const debounceTime = config.debounce ?? 0; const RO = window.ResizeObserver; const onResizeCallback = debounceTime ? debounce(callback, { wait: debounceTime }) : callback; const observer = new RO((entries) => { const entry = entries[0]; let { width, height: height2 } = entry.contentRect; if (entry.borderBoxSize?.[0]) { height2 = entry.borderBoxSize[0].blockSize; width = entry.borderBoxSize[0].inlineSize; } else { const rect = node.getBoundingClientRect(); height2 = rect.height; width = rect.width; } onResizeCallback({ width, height: height2 }); }); observer.observe(node); return () => { observer.disconnect(); }; }; var useResizeObserver = (ref, callback, config = { earlyAttach: false, debounce: 0 }) => { const sizeRef = useRef({ width: 0, height: 0 }); const effectFn = (callback2) => { let disconnect; if (ref.current) { disconnect = setupResizeObserver( ref.current, (size) => { size = { width: Math.round(size.width), height: Math.round(size.height) }; const prevSize = sizeRef.current; if (prevSize.width !== size.width || prevSize.height !== size.height) { sizeRef.current = size; callback2(size); } }, { debounce: config.debounce } ); } return () => { if (disconnect) { disconnect(); } }; }; useEffect(() => { if (!config.earlyAttach) { return effectFn(callback); } return () => { }; }, [ref.current, callback, config.earlyAttach, config.debounce]); useLayoutEffect(() => { if (config.earlyAttach) { return effectFn(callback); } return () => { }; }, [ref.current, callback, config.earlyAttach]); }; // src/components/CSSNumericVariableWatch.tsx var error = err("CSSVariableWatch"); var debug2 = dbg("CSSVariableWatch"); var WRAPPER_STYLE = { position: "absolute", pointerEvents: "none", width: 0, height: 0, lineHeight: 0, fontSize: 0, overflow: "hidden" }; var useCSSVariableWatch = (params) => { const lastValueRef = useRef2(0); const onResize = React2.useCallback( ({ height: height2 }) => { if (height2 != null && height2 !== lastValueRef.current) { lastValueRef.current = height2; params.onChange(height2); } }, [params.onChange] ); useResizeObserver(params.ref, onResize, { earlyAttach: true }); React2.useLayoutEffect(() => { const value = params.ref.current.getBoundingClientRect().height; if (value) { lastValueRef.current = value; debug2(`Variable ${params.varName} found and equals ${value}.`); return params.onChange(value); } else { error( `Specified variable ${params.varName} not found or does not have a numeric value.` ); } }, []); }; var CSSNumericVariableWatch = (props) => { const domRef = useRef2(null); useCSSVariableWatch({ ...props, ref: domRef }); const height2 = props.varName.startsWith("var(") ? props.varName : `var(${props.varName})`; const { allowInts = false } = props; return /* @__PURE__ */ React2.createElement( "div", { "data-name": "css-variable-watcher", "data-var": props.varName, style: WRAPPER_STYLE }, /* @__PURE__ */ React2.createElement( "div", { ref: domRef, style: { height: allowInts ? `calc(1px * ${height2})` : height2 // we do multiplication in order to support integer (without px) values as well } } ) ); }; // src/components/DataSource/publicHooks/useDataSourceState.ts import * as React5 from "react"; // src/components/DataSource/DataSourceContext.ts import * as React3 from "react"; var DSContext; function getDataSourceContext() { if (DSContext) { return DSContext; } return DSContext = React3.createContext({ api: null, getState: () => null, assignState: () => null, getDataSourceMasterContext: () => void 0, componentState: null, componentActions: null }); } // src/components/DataSource/DataSourceMasterDetailContext.ts import * as React4 from "react"; var DSMasterDetailContext; function getDataSourceMasterDetailContext() { if (DSMasterDetailContext) { return DSMasterDetailContext; } return DSMasterDetailContext = React4.createContext(void 0); } // src/components/DataSource/publicHooks/useDataSourceState.ts function useDataSourceState() { const DataSourceContext = getDataSourceContext(); const contextValue = React5.useContext(DataSourceContext); return contextValue.componentState; } function useDataSourceContextValue() { const DataSourceContext = getDataSourceContext(); const contextValue = React5.useContext(DataSourceContext); return contextValue; } function useMasterDetailContext() { const masterDetailContext = getDataSourceMasterDetailContext(); const contextValue = React5.useContext(masterDetailContext); return contextValue; } // src/components/HeadlessTable/index.tsx import * as React14 from "react"; import { useCallback as useCallback4, useEffect as useEffect5, useRef as useRef7, useState as useState3 } from "react"; // src/components/VirtualList/SpacePlaceholder.tsx import * as React6 from "react"; function SpacePlaceholderFn(props) { const { height: height2, width, count } = props; const style2 = { height: height2, width, zIndex: -1, opacity: 0, pointerEvents: "none", contain: "strict" }; return /* @__PURE__ */ React6.createElement( "div", { "data-count": count, "data-placeholder-width": false ? width : void 0, "data-placeholder-height": false ? height2 : void 0, "data-name": "SpacePlaceholder", style: style2 } ); } var SpacePlaceholder = React6.memo(SpacePlaceholderFn); // src/components/VirtualList/VirtualList.css.ts var scrollTransformTargetCls = "mlx2t3"; // src/components/VirtualScrollContainer/index.tsx import * as React7 from "react"; import { useRef as useRef3 } from "react"; // src/components/hooks/useOnScroll.ts import { useEffect as useEffect2 } from "react"; var useOnScroll = (domRef, onScroll) => { useEffect2(() => { const domNode = domRef?.current; const scrollFn = (event) => { const node = event.target; onScroll?.({ scrollTop: node.scrollTop, scrollLeft: node.scrollLeft }); }; const options = { passive: false }; domNode?.addEventListener("scroll", scrollFn, options); return () => { domNode?.removeEventListener("scroll", scrollFn); }; }, [onScroll, domRef?.current]); }; // src/components/VirtualScrollContainer/VirtualScrollContainer.css.ts var ScrollableCls = { true: "_1ueijco2", false: "_1ueijco3", visible: "_1ueijco4", auto: "_1ueijco5", hidden: "_1ueijco6" }; var ScrollableHorizontalCls = { true: "_1ueijco7", false: "_1ueijco8", visible: "_1ueijco9", auto: "_1ueijcoa", hidden: "_1ueijcob" }; var ScrollableVerticalCls = { true: "_1ueijcoc", false: "_1ueijcod", visible: "_1ueijcoe", auto: "_1ueijcof", hidden: "_1ueijcog" }; var VirtualScrollContainerChildToScrollCls = "_1ueijco1"; var VirtualScrollContainerCls = "_1ueijco0 _16lm1iw0"; // src/components/VirtualScrollContainer/getScrollableClassName.ts var getScrollableClassName = (scrollable) => { let scrollableClassName = ""; if (typeof scrollable === "boolean" || typeof scrollable === "string") { scrollableClassName = ScrollableCls[`${scrollable}`]; } else { scrollableClassName = join( ScrollableHorizontalCls[`${scrollable.horizontal}`], ScrollableVerticalCls[`${scrollable.vertical}`] ); } return scrollableClassName; }; // src/components/VirtualScrollContainer/index.tsx var rootClassName = "InfiniteVirtualScrollContainer"; var VirtualScrollContainer = React7.forwardRef( function VirtualScrollContainer2(props, ref) { const { children, scrollable = true, onContainerScroll, className, tabIndex, style: style2, autoFocus } = props; const domRef = ref ?? useRef3(null); useOnScroll(domRef, onContainerScroll); return /* @__PURE__ */ React7.createElement( "div", { ref: domRef, style: style2, autoFocus, tabIndex, className: join( className, rootClassName, VirtualScrollContainerCls, getScrollableClassName(scrollable) ) }, children ); } ); // src/components/HeadlessTable/RawTable.tsx import * as React11 from "react"; import { useLayoutEffect as useLayoutEffect4, useMemo as useMemo2 } from "react"; // src/components/RawList/AvoidReactDiff.tsx import * as React8 from "react"; import { useLayoutEffect as useLayoutEffect3, useRef as useRef4, useState } from "react"; function AvoidReactDiffFn(props) { const [children, setChildren] = useState(props.updater.get); const rafId = useRef4(null); useLayoutEffect3(() => { function onChange(children2) { if (props.useraf) { if (rafId.current != null) { cancelAnimationFrame(rafId.current); } rafId.current = requestAnimationFrame(() => { setChildren(children2); }); } else { setChildren(children2); } } const remove = props.updater.onChange(onChange); return () => { if (rafId.current != null) { cancelAnimationFrame(rafId.current); } remove(); }; }, [props.updater, props.useraf]); return children ?? null; } var AvoidReactDiff = React8.memo(AvoidReactDiffFn); // src/utils/selectParent.ts function selectParent(el, selector2) { let node = el; if (!node) { return null; } if (node && node.matches(selector2)) { return node; } while (node = node.parentElement) { if (node.matches(selector2)) { return node; } } return null; } function selectParentUntil(el, selector2, root) { let node = el; if (!node) { return null; } if (node && node.matches(selector2)) { return node; } while (node = node.parentElement) { if (node.matches(selector2)) { return node; } if (node === root) { return null; } } return null; } // src/utils/stripVar.ts function stripVar(cssVariableWithVarString) { return cssVariableWithVarString.slice(4, -1); } // src/components/InfiniteTable/internalProps.ts var rootClassName2 = "Infinite"; var internalProps = { rootClassName: rootClassName2 }; // src/components/InfiniteTable/internalVars.css.ts var InternalVars = { currentColumnTransformX: "var(--_16hkbkc0)", y: "var(--_16hkbkc1)", currentFlashingBackground: "var(--_16hkbkc2)", currentFlashingDuration: "var(--_16hkbkc3)", activeCellRowOffset: "var(--_16hkbkc4)", activeCellRowOffsetX: "var(--_16hkbkc5)", activeCellRowHeight: "var(--_16hkbkc6)", activeCellOffsetX: "var(--_16hkbkc7)", activeCellOffsetY: "var(--_16hkbkc8)", scrollTopForActiveRow: "var(--_16hkbkc9)", scrollLeftForActiveRowWhenHorizontalLayout: "var(--_16hkbkca)", activeCellColWidth: "var(--_16hkbkcb)", activeCellColOffset: "var(--_16hkbkcc)", columnReorderEffectDurationAtIndex: "var(--_16hkbkcd)", columnWidthAtIndex: "var(--_16hkbkce)", columnOffsetAtIndex: "var(--_16hkbkcf)", columnOffsetAtIndexWhileReordering: "var(--_16hkbkcg)", columnZIndexAtIndex: "var(--_16hkbkch)", pinnedStartWidth: "var(--_16hkbkci)", pinnedEndWidth: "var(--_16hkbkcj)", pinnedEndOffset: "var(--_16hkbkck)", computedVisibleColumnsCount: "var(--_16hkbkcl)", baseZIndexForCells: "var(--_16hkbkcm)", bodyWidth: "var(--_16hkbkcn)", bodyHeight: "var(--_16hkbkco)", scrollbarWidthHorizontal: "var(--_16hkbkcp)", scrollbarWidthVertical: "var(--_16hkbkcq)", scrollLeft: "var(--_16hkbkcr)", scrollTop: "var(--_16hkbkcs)" }; // src/components/InfiniteTable/vars.css.ts var CSS_LOADED_VALUE = "true"; var ThemeVars = { loaded: "var(--infinite-loaded)", themeName: "var(--infinite-theme-name)", themeMode: "var(--infinite-theme-mode)", 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)", horizontalLayoutColumnReorderDisabledPageOpacity: "var(--infinite-horizontal-layout-column-reorder-disabled-page-opacity)", 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)" }, ExpandCollapseIcon: { color: "var(--infinite-expand-collapse-icon-color)" }, 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/InfiniteTable/utils/infiniteDOMUtils.ts var InfiniteSelector = `.${internalProps.rootClassName}`; function getParentInfiniteNode(node) { return selectParent(node, InfiniteSelector); } var scrollLeft = stripVar(InternalVars.scrollLeft); var scrollTop = stripVar(InternalVars.scrollTop); var columnWidthAtIndex = stripVar(InternalVars.columnWidthAtIndex); var columnOffsetAtIndex = stripVar(InternalVars.columnOffsetAtIndex); var columnReorderEffectDurationAtIndex = stripVar( InternalVars.columnReorderEffectDurationAtIndex ); var columnOffsetAtIndexWhileReordering = stripVar( InternalVars.columnOffsetAtIndexWhileReordering ); var columnZIndexAtIndex = stripVar(InternalVars.columnZIndexAtIndex); function setInfiniteVarOnRoot(varName, varValue, node) { const infinite = node ? getParentInfiniteNode(node) : document.querySelector(InfiniteSelector); setInfiniteVarOnNode(varName, varValue, infinite); } function setInfiniteVarOnNode(varName, varValue, node) { if (node) { const name = varName; const prop = InternalVars[name] ? stripVar(InternalVars[name]) : varName; node.style.setProperty(prop, `${varValue}`); } } function setInfiniteVarsOnNode(vars, node) { if (node) { for (var varName in vars) { const propName = InternalVars[varName] ? stripVar(InternalVars[varName]) : varName; const propValue = `${vars[varName]}`; node.style.setProperty(propName, propValue); } } } function addToInfiniteColumnOffset(column, amountToAdd, node) { setInfiniteVarOnRoot( `${columnOffsetAtIndex}-${column.computedVisibleIndex}`, !column.computedPinned ? `${column.computedAbsoluteOffset + amountToAdd}px` : `calc( ${column.computedAbsoluteOffset + amountToAdd}px + var(${scrollLeft}))`, node ); } function setInfiniteColumnZIndex(colIndex, colZIndex, node) { setInfiniteVarOnRoot( `${columnZIndexAtIndex}-${colIndex}`, `${colZIndex}`, node ); } function setInfiniteColumnOffsetWhileReordering(colIndex, offset, node) { setInfiniteVarOnRoot( `${columnOffsetAtIndexWhileReordering}-${colIndex}`, typeof offset === "number" ? `calc( var(${columnOffsetAtIndex}-${colIndex}) + ${offset}px )` : offset, node ); } function clearInfiniteColumnReorde