react-restyle-components 0.4.27 → 0.4.28
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/src/core-components/src/components/Table/filters.d.ts +2 -0
- package/lib/src/core-components/src/components/Table/filters.d.ts.map +1 -1
- package/lib/src/core-components/src/components/Table/filters.js +137 -137
- package/lib/src/core-components/src/tc.global.css +3 -0
- package/package.json +1 -1
|
@@ -104,6 +104,8 @@ export interface SelectFilterOptions {
|
|
|
104
104
|
style?: React.CSSProperties;
|
|
105
105
|
/** Default selected value */
|
|
106
106
|
defaultValue?: string;
|
|
107
|
+
/** Debounce delay in milliseconds */
|
|
108
|
+
delay?: number;
|
|
107
109
|
/** Options for the select */
|
|
108
110
|
options?: Array<{
|
|
109
111
|
value: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filters.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Table/filters.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAGtE,OAAO,EAAC,gBAAgB,EAAC,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"filters.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Table/filters.tsx"],"names":[],"mappings":"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"}
|
|
@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
|
|
|
3
3
|
import { useState, useCallback, useEffect, useRef } from 'react';
|
|
4
4
|
import { styled, css } from 'styled-components';
|
|
5
5
|
import { tokens } from '../../utils/designTokens';
|
|
6
|
+
import { useDebouncedValue } from '../../utils/hooks/useDebouncedValue';
|
|
6
7
|
// Styled components for filters
|
|
7
8
|
const FilterContainer = styled.div `
|
|
8
9
|
display: flex;
|
|
@@ -14,6 +15,7 @@ const FilterInputBase = styled.input `
|
|
|
14
15
|
height: 22px;
|
|
15
16
|
padding: 0 5px;
|
|
16
17
|
font-size: 10px;
|
|
18
|
+
font-weight: normal;
|
|
17
19
|
color: #000000;
|
|
18
20
|
border: 1px solid ${tokens.outline || '#e2e8f0'};
|
|
19
21
|
border-radius: 2px;
|
|
@@ -41,6 +43,7 @@ const FilterSelectBase = styled.select `
|
|
|
41
43
|
height: 22px;
|
|
42
44
|
padding: 0 5px;
|
|
43
45
|
font-size: 10px;
|
|
46
|
+
font-weight: normal;
|
|
44
47
|
color: #000000;
|
|
45
48
|
border: 1px solid ${tokens.outline || '#e2e8f0'};
|
|
46
49
|
border-radius: 2px;
|
|
@@ -64,6 +67,7 @@ const ComparatorSelect = styled.select `
|
|
|
64
67
|
height: 22px;
|
|
65
68
|
padding: 0 2px;
|
|
66
69
|
font-size: 9px;
|
|
70
|
+
font-weight: normal;
|
|
67
71
|
border: 1px solid ${tokens.outline || '#e2e8f0'};
|
|
68
72
|
border-radius: 2px;
|
|
69
73
|
background: white;
|
|
@@ -134,22 +138,28 @@ const ToggleButton = styled.button `
|
|
|
134
138
|
* Internal Text filter component with options support
|
|
135
139
|
*/
|
|
136
140
|
const TextFilterComponent = ({ column, value, onChange, options }) => {
|
|
137
|
-
const { placeholder, className, style, defaultValue, delay =
|
|
141
|
+
const { placeholder, className, style, defaultValue, delay = 500, getFilter, onFilter, id, disabled, } = options || {};
|
|
142
|
+
// Local state for immediate input updates (maintains focus)
|
|
138
143
|
const [internalValue, setInternalValue] = useState(value || defaultValue || '');
|
|
139
|
-
const timeoutRef = useRef(null);
|
|
140
|
-
const isFirstRender = useRef(true);
|
|
141
144
|
const internalValueRef = useRef(internalValue);
|
|
142
|
-
|
|
145
|
+
const inputRef = useRef(null);
|
|
146
|
+
const onChangeRef = useRef(onChange);
|
|
147
|
+
const onFilterRef = useRef(onFilter);
|
|
148
|
+
// Keep refs in sync
|
|
143
149
|
useEffect(() => {
|
|
144
150
|
internalValueRef.current = internalValue;
|
|
145
151
|
}, [internalValue]);
|
|
146
|
-
// Sync with external value changes
|
|
147
152
|
useEffect(() => {
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
+
onChangeRef.current = onChange;
|
|
154
|
+
onFilterRef.current = onFilter;
|
|
155
|
+
}, [onChange, onFilter]);
|
|
156
|
+
// Debounce the internal value
|
|
157
|
+
const [debouncedValue] = useDebouncedValue(internalValue, { wait: delay });
|
|
158
|
+
// Propagate debounced value to parent
|
|
159
|
+
useEffect(() => {
|
|
160
|
+
onChangeRef.current(debouncedValue || null);
|
|
161
|
+
onFilterRef.current?.(debouncedValue);
|
|
162
|
+
}, [debouncedValue]);
|
|
153
163
|
// Provide filter instance via getFilter callback - only on mount
|
|
154
164
|
useEffect(() => {
|
|
155
165
|
if (getFilter) {
|
|
@@ -159,51 +169,35 @@ const TextFilterComponent = ({ column, value, onChange, options }) => {
|
|
|
159
169
|
},
|
|
160
170
|
setValue: (newValue) => {
|
|
161
171
|
setInternalValue(newValue);
|
|
162
|
-
|
|
163
|
-
|
|
172
|
+
onChangeRef.current(newValue || null);
|
|
173
|
+
onFilterRef.current?.(newValue);
|
|
164
174
|
},
|
|
165
175
|
clear: () => {
|
|
166
176
|
setInternalValue('');
|
|
167
|
-
|
|
168
|
-
|
|
177
|
+
onChangeRef.current(null);
|
|
178
|
+
onFilterRef.current?.('');
|
|
169
179
|
},
|
|
170
180
|
});
|
|
171
181
|
}
|
|
172
182
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
173
183
|
}, [getFilter]);
|
|
184
|
+
// Simple change handler - just update local state
|
|
174
185
|
const handleChange = useCallback((e) => {
|
|
175
|
-
|
|
176
|
-
setInternalValue(newValue);
|
|
177
|
-
if (timeoutRef.current) {
|
|
178
|
-
clearTimeout(timeoutRef.current);
|
|
179
|
-
}
|
|
180
|
-
if (delay > 0) {
|
|
181
|
-
timeoutRef.current = setTimeout(() => {
|
|
182
|
-
onChange(newValue || null);
|
|
183
|
-
onFilter?.(newValue);
|
|
184
|
-
}, delay);
|
|
185
|
-
}
|
|
186
|
-
else {
|
|
187
|
-
onChange(newValue || null);
|
|
188
|
-
onFilter?.(newValue);
|
|
189
|
-
}
|
|
190
|
-
}, [onChange, onFilter, delay]);
|
|
191
|
-
// Cleanup timeout on unmount
|
|
192
|
-
useEffect(() => {
|
|
193
|
-
return () => {
|
|
194
|
-
if (timeoutRef.current) {
|
|
195
|
-
clearTimeout(timeoutRef.current);
|
|
196
|
-
}
|
|
197
|
-
};
|
|
186
|
+
setInternalValue(e.target.value);
|
|
198
187
|
}, []);
|
|
188
|
+
const inputStyle = {
|
|
189
|
+
fontWeight: 400,
|
|
190
|
+
...style,
|
|
191
|
+
};
|
|
199
192
|
// If custom className is provided, use plain input to allow full CSS control
|
|
200
193
|
if (className) {
|
|
201
|
-
return (_jsx("input", { type: "text", id: id, value: internalValue, onChange: handleChange, placeholder: placeholder || column.filterPlaceholder || `Filter ${column.text}...`, className: className, style: {
|
|
194
|
+
return (_jsx("input", { ref: inputRef, type: "text", id: id, value: internalValue, onChange: handleChange, placeholder: placeholder || column.filterPlaceholder || `Filter ${column.text}...`, className: className, style: {
|
|
202
195
|
width: '100%',
|
|
196
|
+
fontWeight: 400,
|
|
203
197
|
...style,
|
|
204
198
|
}, disabled: disabled }));
|
|
205
199
|
}
|
|
206
|
-
return (_jsx(FilterInputBase, { type: "text", id: id, value: internalValue, onChange: handleChange, placeholder: placeholder || column.filterPlaceholder || `Filter ${column.text}...`, style:
|
|
200
|
+
return (_jsx(FilterInputBase, { ref: inputRef, type: "text", id: id, value: internalValue, onChange: handleChange, placeholder: placeholder || column.filterPlaceholder || `Filter ${column.text}...`, style: inputStyle, disabled: disabled }));
|
|
207
201
|
};
|
|
208
202
|
export function TextFilter(optionsOrProps) {
|
|
209
203
|
// Check if it's being used as a factory function (options object without column/value/onChange)
|
|
@@ -224,24 +218,34 @@ export function TextFilter(optionsOrProps) {
|
|
|
224
218
|
* Internal Number filter component with options support
|
|
225
219
|
*/
|
|
226
220
|
const NumberFilterComponent = ({ column, value, onChange, options }) => {
|
|
227
|
-
const { placeholder, className, style, defaultValue, delay =
|
|
221
|
+
const { placeholder, className, style, defaultValue, delay = 500, defaultComparator = '=', allowDecimal = true, getFilter, onFilter, id, disabled, hideComparator, comparators = ['=', '!=', '>', '>=', '<', '<='], } = options || {};
|
|
222
|
+
// Local state for immediate input updates (maintains focus)
|
|
228
223
|
const [number, setNumber] = useState(value?.number || defaultValue?.number || '');
|
|
229
224
|
const [comparator, setComparator] = useState(value?.comparator || defaultValue?.comparator || defaultComparator);
|
|
230
|
-
const timeoutRef = useRef(null);
|
|
231
225
|
const numberRef = useRef(number);
|
|
232
226
|
const comparatorRef = useRef(comparator);
|
|
227
|
+
const inputRef = useRef(null);
|
|
228
|
+
const onChangeRef = useRef(onChange);
|
|
229
|
+
const onFilterRef = useRef(onFilter);
|
|
233
230
|
// Keep refs in sync with state
|
|
234
231
|
useEffect(() => {
|
|
235
232
|
numberRef.current = number;
|
|
236
233
|
comparatorRef.current = comparator;
|
|
237
234
|
}, [number, comparator]);
|
|
238
|
-
// Sync with external value changes
|
|
239
235
|
useEffect(() => {
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
236
|
+
onChangeRef.current = onChange;
|
|
237
|
+
onFilterRef.current = onFilter;
|
|
238
|
+
}, [onChange, onFilter]);
|
|
239
|
+
// Debounce the number value
|
|
240
|
+
const [debouncedNumber] = useDebouncedValue(number, { wait: delay });
|
|
241
|
+
// Propagate debounced value to parent
|
|
242
|
+
useEffect(() => {
|
|
243
|
+
const newValue = debouncedNumber
|
|
244
|
+
? { number: debouncedNumber, comparator: comparatorRef.current }
|
|
245
|
+
: null;
|
|
246
|
+
onChangeRef.current(newValue);
|
|
247
|
+
onFilterRef.current?.(newValue);
|
|
248
|
+
}, [debouncedNumber]);
|
|
245
249
|
// Provide filter instance via getFilter callback - only on mount
|
|
246
250
|
useEffect(() => {
|
|
247
251
|
if (getFilter) {
|
|
@@ -255,53 +259,34 @@ const NumberFilterComponent = ({ column, value, onChange, options }) => {
|
|
|
255
259
|
if (newValue) {
|
|
256
260
|
setNumber(newValue.number);
|
|
257
261
|
setComparator(newValue.comparator);
|
|
258
|
-
|
|
259
|
-
|
|
262
|
+
onChangeRef.current(newValue);
|
|
263
|
+
onFilterRef.current?.(newValue);
|
|
260
264
|
}
|
|
261
265
|
else {
|
|
262
266
|
setNumber('');
|
|
263
|
-
|
|
264
|
-
|
|
267
|
+
onChangeRef.current(null);
|
|
268
|
+
onFilterRef.current?.(null);
|
|
265
269
|
}
|
|
266
270
|
},
|
|
267
271
|
clear: () => {
|
|
268
272
|
setNumber('');
|
|
269
273
|
setComparator(defaultComparator);
|
|
270
|
-
|
|
271
|
-
|
|
274
|
+
onChangeRef.current(null);
|
|
275
|
+
onFilterRef.current?.(null);
|
|
272
276
|
},
|
|
273
277
|
});
|
|
274
278
|
}
|
|
275
279
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
276
280
|
}, [getFilter]);
|
|
277
|
-
|
|
278
|
-
|
|
281
|
+
// Handle comparator change - trigger immediate filter update
|
|
282
|
+
const handleComparatorChange = useCallback((newComparator) => {
|
|
279
283
|
setComparator(newComparator);
|
|
280
|
-
if (
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
? { number: newNumber, comparator: newComparator }
|
|
285
|
-
: null;
|
|
286
|
-
if (delay > 0) {
|
|
287
|
-
timeoutRef.current = setTimeout(() => {
|
|
288
|
-
onChange(newValue);
|
|
289
|
-
onFilter?.(newValue);
|
|
290
|
-
}, delay);
|
|
284
|
+
if (number) {
|
|
285
|
+
const newValue = { number, comparator: newComparator };
|
|
286
|
+
onChangeRef.current(newValue);
|
|
287
|
+
onFilterRef.current?.(newValue);
|
|
291
288
|
}
|
|
292
|
-
|
|
293
|
-
onChange(newValue);
|
|
294
|
-
onFilter?.(newValue);
|
|
295
|
-
}
|
|
296
|
-
}, [onChange, onFilter, delay]);
|
|
297
|
-
// Cleanup timeout on unmount
|
|
298
|
-
useEffect(() => {
|
|
299
|
-
return () => {
|
|
300
|
-
if (timeoutRef.current) {
|
|
301
|
-
clearTimeout(timeoutRef.current);
|
|
302
|
-
}
|
|
303
|
-
};
|
|
304
|
-
}, []);
|
|
289
|
+
}, [number]);
|
|
305
290
|
const comparatorSymbols = {
|
|
306
291
|
'=': '=',
|
|
307
292
|
'!=': '≠',
|
|
@@ -310,6 +295,11 @@ const NumberFilterComponent = ({ column, value, onChange, options }) => {
|
|
|
310
295
|
'<': '<',
|
|
311
296
|
'<=': '≤',
|
|
312
297
|
};
|
|
298
|
+
const inputStyle = {
|
|
299
|
+
flex: 1,
|
|
300
|
+
fontWeight: 400,
|
|
301
|
+
...style,
|
|
302
|
+
};
|
|
313
303
|
const inputProps = {
|
|
314
304
|
type: 'text',
|
|
315
305
|
id,
|
|
@@ -318,13 +308,13 @@ const NumberFilterComponent = ({ column, value, onChange, options }) => {
|
|
|
318
308
|
const val = e.target.value;
|
|
319
309
|
const pattern = allowDecimal ? /^[0-9.,]*$/ : /^[0-9]*$/;
|
|
320
310
|
if (pattern.test(val)) {
|
|
321
|
-
|
|
311
|
+
setNumber(val);
|
|
322
312
|
}
|
|
323
313
|
},
|
|
324
314
|
placeholder: placeholder || column.filterPlaceholder || 'Number...',
|
|
325
315
|
disabled,
|
|
326
316
|
};
|
|
327
|
-
return (_jsxs(FilterContainer, { children: [!hideComparator && (_jsx(ComparatorSelect, { value: comparator, onChange: (e) =>
|
|
317
|
+
return (_jsxs(FilterContainer, { children: [!hideComparator && (_jsx(ComparatorSelect, { value: comparator, onChange: (e) => handleComparatorChange(e.target.value), disabled: disabled, children: comparators.map((comp) => (_jsx("option", { value: comp, children: comparatorSymbols[comp] || comp }, comp))) })), className ? (_jsx("input", { ref: inputRef, ...inputProps, className: className, style: { flex: 1, width: '100%', fontWeight: 400, ...style } })) : (_jsx(FilterInputBase, { ref: inputRef, ...inputProps, style: inputStyle }))] }));
|
|
328
318
|
};
|
|
329
319
|
export function NumberFilter(optionsOrProps) {
|
|
330
320
|
if (!('column' in optionsOrProps) &&
|
|
@@ -343,24 +333,38 @@ export function NumberFilter(optionsOrProps) {
|
|
|
343
333
|
*/
|
|
344
334
|
const DateFilterComponent = ({ column, value, onChange, options }) => {
|
|
345
335
|
const { className, style, defaultValue, defaultComparator = '=', defaultRangeMode = false, getFilter, onFilter, id, disabled, minDate, maxDate, } = options || {};
|
|
336
|
+
// Local state for immediate updates
|
|
346
337
|
const [startDate, setStartDate] = useState(value?.startDate || defaultValue?.startDate || '');
|
|
347
338
|
const [endDate, setEndDate] = useState(value?.endDate || defaultValue?.endDate || '');
|
|
348
339
|
const [diffFlag, setDiffFlag] = useState(value?.diffFlag ?? defaultValue?.diffFlag ?? defaultRangeMode);
|
|
349
340
|
const [comparator, setComparator] = useState(value?.comparator || defaultValue?.comparator || defaultComparator);
|
|
350
341
|
const stateRef = useRef({ startDate, endDate, diffFlag, comparator });
|
|
351
|
-
|
|
342
|
+
const onChangeRef = useRef(onChange);
|
|
343
|
+
const onFilterRef = useRef(onFilter);
|
|
344
|
+
// Keep refs in sync with state
|
|
352
345
|
useEffect(() => {
|
|
353
346
|
stateRef.current = { startDate, endDate, diffFlag, comparator };
|
|
354
347
|
}, [startDate, endDate, diffFlag, comparator]);
|
|
355
|
-
// Sync with external value changes
|
|
356
348
|
useEffect(() => {
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
349
|
+
onChangeRef.current = onChange;
|
|
350
|
+
onFilterRef.current = onFilter;
|
|
351
|
+
}, [onChange, onFilter]);
|
|
352
|
+
// Debounce the date values
|
|
353
|
+
const [debouncedStartDate] = useDebouncedValue(startDate, { wait: 500 });
|
|
354
|
+
const [debouncedEndDate] = useDebouncedValue(endDate, { wait: 500 });
|
|
355
|
+
// Propagate debounced value to parent
|
|
356
|
+
useEffect(() => {
|
|
357
|
+
const newValue = debouncedStartDate || debouncedEndDate
|
|
358
|
+
? {
|
|
359
|
+
startDate: debouncedStartDate,
|
|
360
|
+
endDate: debouncedEndDate,
|
|
361
|
+
diffFlag,
|
|
362
|
+
comparator,
|
|
363
|
+
}
|
|
364
|
+
: null;
|
|
365
|
+
onChangeRef.current(newValue);
|
|
366
|
+
onFilterRef.current?.(newValue);
|
|
367
|
+
}, [debouncedStartDate, debouncedEndDate, diffFlag, comparator]);
|
|
364
368
|
// Provide filter instance via getFilter callback - only on mount
|
|
365
369
|
useEffect(() => {
|
|
366
370
|
if (getFilter) {
|
|
@@ -377,14 +381,14 @@ const DateFilterComponent = ({ column, value, onChange, options }) => {
|
|
|
377
381
|
setEndDate(newValue.endDate || '');
|
|
378
382
|
setDiffFlag(newValue.diffFlag ?? defaultRangeMode);
|
|
379
383
|
setComparator(newValue.comparator || defaultComparator);
|
|
380
|
-
|
|
381
|
-
|
|
384
|
+
onChangeRef.current(newValue);
|
|
385
|
+
onFilterRef.current?.(newValue);
|
|
382
386
|
}
|
|
383
387
|
else {
|
|
384
388
|
setStartDate('');
|
|
385
389
|
setEndDate('');
|
|
386
|
-
|
|
387
|
-
|
|
390
|
+
onChangeRef.current(null);
|
|
391
|
+
onFilterRef.current?.(null);
|
|
388
392
|
}
|
|
389
393
|
},
|
|
390
394
|
clear: () => {
|
|
@@ -392,39 +396,27 @@ const DateFilterComponent = ({ column, value, onChange, options }) => {
|
|
|
392
396
|
setEndDate('');
|
|
393
397
|
setDiffFlag(defaultRangeMode);
|
|
394
398
|
setComparator(defaultComparator);
|
|
395
|
-
|
|
396
|
-
|
|
399
|
+
onChangeRef.current(null);
|
|
400
|
+
onFilterRef.current?.(null);
|
|
397
401
|
},
|
|
398
402
|
});
|
|
399
403
|
}
|
|
400
404
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
401
405
|
}, [getFilter]);
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
if (updates.comparator !== undefined)
|
|
417
|
-
setComparator(updates.comparator);
|
|
418
|
-
if (newValue.startDate || newValue.endDate) {
|
|
419
|
-
onChange(newValue);
|
|
420
|
-
onFilter?.(newValue);
|
|
421
|
-
}
|
|
422
|
-
else {
|
|
423
|
-
onChange(null);
|
|
424
|
-
onFilter?.(null);
|
|
425
|
-
}
|
|
426
|
-
}, [startDate, endDate, diffFlag, comparator, onChange, onFilter]);
|
|
427
|
-
return (_jsxs(FilterContainer, { className: className, style: style, children: [_jsx(ToggleButton, { "$active": diffFlag, onClick: () => handleChange({ diffFlag: !diffFlag }), title: "Date range mode", disabled: disabled, children: diffFlag ? 'Range' : 'Single' }), !diffFlag && (_jsxs(ComparatorSelect, { value: comparator, onChange: (e) => handleChange({ comparator: e.target.value }), disabled: disabled, children: [_jsx("option", { value: "=", children: "=" }), _jsx("option", { value: ">=", children: "\u2265" }), _jsx("option", { value: "<", children: "<" })] })), _jsx(DateInput, { type: "date", id: id, value: startDate, onChange: (e) => handleChange({ startDate: e.target.value }), disabled: disabled, min: minDate, max: maxDate }), diffFlag && (_jsxs(_Fragment, { children: [_jsx("span", { style: { color: '#6b7280', fontSize: 12 }, children: "to" }), _jsx(DateInput, { type: "date", value: endDate, onChange: (e) => handleChange({ endDate: e.target.value }), disabled: disabled, min: minDate, max: maxDate })] }))] }));
|
|
406
|
+
// Simple change handlers - just update local state
|
|
407
|
+
const handleStartDateChange = useCallback((e) => {
|
|
408
|
+
setStartDate(e.target.value);
|
|
409
|
+
}, []);
|
|
410
|
+
const handleEndDateChange = useCallback((e) => {
|
|
411
|
+
setEndDate(e.target.value);
|
|
412
|
+
}, []);
|
|
413
|
+
const handleDiffFlagChange = useCallback(() => {
|
|
414
|
+
setDiffFlag((prev) => !prev);
|
|
415
|
+
}, []);
|
|
416
|
+
const handleComparatorChange = useCallback((e) => {
|
|
417
|
+
setComparator(e.target.value);
|
|
418
|
+
}, []);
|
|
419
|
+
return (_jsxs(FilterContainer, { className: className, style: style, children: [_jsx(ToggleButton, { "$active": diffFlag, onClick: handleDiffFlagChange, title: "Date range mode", disabled: disabled, children: diffFlag ? 'Range' : 'Single' }), !diffFlag && (_jsxs(ComparatorSelect, { value: comparator, onChange: handleComparatorChange, disabled: disabled, style: { fontWeight: 400 }, children: [_jsx("option", { value: "=", children: "=" }), _jsx("option", { value: ">=", children: "\u2265" }), _jsx("option", { value: "<", children: "<" })] })), _jsx(DateInput, { type: "date", id: id, value: startDate, onChange: handleStartDateChange, disabled: disabled, min: minDate, max: maxDate, style: { fontWeight: 400 } }), diffFlag && (_jsxs(_Fragment, { children: [_jsx("span", { style: { color: '#6b7280', fontSize: 12, fontWeight: 400 }, children: "to" }), _jsx(DateInput, { type: "date", value: endDate, onChange: handleEndDateChange, disabled: disabled, min: minDate, max: maxDate, style: { fontWeight: 400 } })] }))] }));
|
|
428
420
|
};
|
|
429
421
|
export function DateFilter(optionsOrProps) {
|
|
430
422
|
if (!('column' in optionsOrProps) &&
|
|
@@ -442,17 +434,27 @@ export function DateFilter(optionsOrProps) {
|
|
|
442
434
|
* Internal Select filter component with options support
|
|
443
435
|
*/
|
|
444
436
|
const SelectFilterComponent = ({ column, value, onChange, options }) => {
|
|
445
|
-
const { placeholder = 'All', className, style, defaultValue, options: customOptions, getFilter, onFilter, id, disabled, } = options || {};
|
|
437
|
+
const { placeholder = 'All', className, style, defaultValue, delay = 300, options: customOptions, getFilter, onFilter, id, disabled, } = options || {};
|
|
438
|
+
// Local state for immediate updates
|
|
446
439
|
const [selectedValue, setSelectedValue] = useState(value || defaultValue || '');
|
|
447
440
|
const selectedValueRef = useRef(selectedValue);
|
|
448
|
-
|
|
441
|
+
const onChangeRef = useRef(onChange);
|
|
442
|
+
const onFilterRef = useRef(onFilter);
|
|
443
|
+
// Keep refs in sync with state
|
|
449
444
|
useEffect(() => {
|
|
450
445
|
selectedValueRef.current = selectedValue;
|
|
451
446
|
}, [selectedValue]);
|
|
452
|
-
// Sync with external value changes
|
|
453
447
|
useEffect(() => {
|
|
454
|
-
|
|
455
|
-
|
|
448
|
+
onChangeRef.current = onChange;
|
|
449
|
+
onFilterRef.current = onFilter;
|
|
450
|
+
}, [onChange, onFilter]);
|
|
451
|
+
// Debounce the selected value
|
|
452
|
+
const [debouncedValue] = useDebouncedValue(selectedValue, { wait: delay });
|
|
453
|
+
// Propagate debounced value to parent
|
|
454
|
+
useEffect(() => {
|
|
455
|
+
onChangeRef.current(debouncedValue || null);
|
|
456
|
+
onFilterRef.current?.(debouncedValue || null);
|
|
457
|
+
}, [debouncedValue]);
|
|
456
458
|
// Provide filter instance via getFilter callback - only on mount
|
|
457
459
|
useEffect(() => {
|
|
458
460
|
if (getFilter) {
|
|
@@ -462,32 +464,30 @@ const SelectFilterComponent = ({ column, value, onChange, options }) => {
|
|
|
462
464
|
},
|
|
463
465
|
setValue: (newValue) => {
|
|
464
466
|
setSelectedValue(newValue || '');
|
|
465
|
-
|
|
466
|
-
|
|
467
|
+
onChangeRef.current(newValue);
|
|
468
|
+
onFilterRef.current?.(newValue);
|
|
467
469
|
},
|
|
468
470
|
clear: () => {
|
|
469
471
|
setSelectedValue('');
|
|
470
|
-
|
|
471
|
-
|
|
472
|
+
onChangeRef.current(null);
|
|
473
|
+
onFilterRef.current?.(null);
|
|
472
474
|
},
|
|
473
475
|
});
|
|
474
476
|
}
|
|
475
477
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
476
478
|
}, [getFilter]);
|
|
479
|
+
// Simple change handler - just update local state
|
|
477
480
|
const handleChange = useCallback((e) => {
|
|
478
|
-
const newValue = e.target.value || null;
|
|
479
481
|
setSelectedValue(e.target.value);
|
|
480
|
-
|
|
481
|
-
onFilter?.(newValue);
|
|
482
|
-
}, [onChange, onFilter]);
|
|
482
|
+
}, []);
|
|
483
483
|
// Use custom options if provided, otherwise fall back to column.filterOptions
|
|
484
484
|
const selectOptions = customOptions || column.filterOptions || [];
|
|
485
485
|
const selectContent = (_jsxs(_Fragment, { children: [_jsx("option", { value: "", children: placeholder }), selectOptions.map((opt) => (_jsx("option", { value: opt.value, children: opt.label }, opt.value)))] }));
|
|
486
486
|
// If custom className is provided, use plain select to allow full CSS control
|
|
487
487
|
if (className) {
|
|
488
|
-
return (_jsx("select", { id: id, value: selectedValue, onChange: handleChange, className: className, style: { width: '100%', ...style }, disabled: disabled, children: selectContent }));
|
|
488
|
+
return (_jsx("select", { id: id, value: selectedValue, onChange: handleChange, className: className, style: { width: '100%', fontWeight: 400, ...style }, disabled: disabled, children: selectContent }));
|
|
489
489
|
}
|
|
490
|
-
return (_jsx(FilterSelectBase, { id: id, value: selectedValue, onChange: handleChange, style: style, disabled: disabled, children: selectContent }));
|
|
490
|
+
return (_jsx(FilterSelectBase, { id: id, value: selectedValue, onChange: handleChange, style: { fontWeight: 400, ...style }, disabled: disabled, children: selectContent }));
|
|
491
491
|
};
|
|
492
492
|
export function SelectFilter(optionsOrProps) {
|
|
493
493
|
if (!('column' in optionsOrProps) &&
|
|
@@ -163,6 +163,9 @@
|
|
|
163
163
|
/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
|
|
164
164
|
/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
|
|
165
165
|
/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
|
|
166
|
+
/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
|
|
167
|
+
/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
|
|
168
|
+
/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
|
|
166
169
|
/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}*,.dark\:bg-black:is(.dark *),.dark\:border-gray-600:is(.dark *),:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
|
|
167
170
|
/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}.dark\:bg-black:is(.dark *),.dark\:border-gray-600:is(.dark *),*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
|
|
168
171
|
/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/fieldset,legend{padding:0}.container{width:100%}@media (min-width:0px){.container{max-width:0}}@media (min-width:20rem){.container{max-width:20rem}}@media (min-width:23.4375rem){.container{max-width:23.4375rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:90rem){.container{max-width:90rem}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.form-input,.form-input::-webkit-datetime-edit,.form-input::-webkit-datetime-edit-day-field,.form-input::-webkit-datetime-edit-hour-field,.form-input::-webkit-datetime-edit-meridiem-field,.form-input::-webkit-datetime-edit-millisecond-field,.form-input::-webkit-datetime-edit-minute-field,.form-input::-webkit-datetime-edit-month-field,.form-input::-webkit-datetime-edit-second-field,.form-input::placeholder,.form-input:focus,.form-multiselect,.form-multiselect:focus,.form-select,.form-select:focus,table{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}table:is(.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}table tr:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}select:is(.dark *){--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.25rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.25rem*var(--tw-space-x-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-bottom-width:calc(1px*var(--tw-divide-y-reverse));border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)))}.divide-gray-100>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(243 244 246/var(--tw-divide-opacity,1))}.divide-teal-50>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(240 253 250/var(--tw-divide-opacity,1))}.bg-purple-900\/50{background-color:#581c8780}.p-0\.5{padding:.125rem}.blur,.filter,.ring,.ring-2,.shadow,.shadow-inner,.shadow-md,body{font-family:Arima Regular;font-size:14px}.hover\:bg-white\/20:hover{background-color:#fff3}.dark\:border-gray-600:is(.dark *),.focus\:ring-0:focus,.dark\:bg-black:is(.dark *){--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.dark\:bg-boxdark:is(.dark *){--tw-bg-opacity:1;background-color:rgb(36 48 63/var(--tw-bg-opacity,1))}.dark\:bg-gray-700:is(.dark *){--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.dark\:bg-gray-800:is(.dark *){--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1))}.dark\:text-black:is(.dark *){--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.dark\:text-gray-100:is(.dark *){--tw-text-opacity:1;color:rgb(243 244 246/var(--tw-text-opacity,1))}.dark\:text-gray-200:is(.dark *){--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity,1))}.dark\:text-gray-300:is(.dark *){--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.dark\:text-gray-400:is(.dark *){--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.dark\:text-gray-500:is(.dark *){--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.dark\:text-red-400:is(.dark *){--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.dark\:text-white:is(.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.dark\:placeholder-gray-400:is(.dark *)::placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity,1))}.dark\:ring-offset-gray-800:is(.dark *){--tw-ring-offset-color:#1f2937}.dark\:hover\:bg-blue-900:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(30 58 138/var(--tw-bg-opacity,1))}.dark\:hover\:bg-gray-600:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(75 85 99/var(--tw-bg-opacity,1))}.dark\:hover\:bg-gray-700:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.dark\:focus\:ring-blue-600:focus:is(.dark *){--tw-ring-opacity:1;--tw-ring-color:rgb(37 99 235/var(--tw-ring-opacity,1))}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}@font-face{font-family:ArimaRegular;src:url(library/assets/fonts/arima/arima-regular.ttf)}.container{width:100%}@media (min-width:0px){.container{max-width:0}}@media (min-width:20rem){.container{max-width:20rem}}@media (min-width:23.4375rem){.container{max-width:23.4375rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:90rem){.container{max-width:90rem}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.form-input,.form-multiselect,.form-select,.form-input:focus,.form-multiselect:focus,.form-select:focus,.form-input::placeholder,.form-input::-webkit-datetime-edit,.form-input::-webkit-datetime-edit-day-field,.form-input::-webkit-datetime-edit-hour-field,.form-input::-webkit-datetime-edit-meridiem-field,.form-input::-webkit-datetime-edit-millisecond-field,.form-input::-webkit-datetime-edit-minute-field,.form-input::-webkit-datetime-edit-month-field,.form-input::-webkit-datetime-edit-second-field,table{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}table:is(.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}table tr:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}select:is(.dark *){--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}@keyframes spin{to{transform:rotate(1turn)}}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.25rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.25rem*var(--tw-space-x-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-bottom-width:calc(1px*var(--tw-divide-y-reverse));border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)))}.divide-gray-100>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(243 244 246/var(--tw-divide-opacity,1))}.divide-teal-50>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(240 253 250/var(--tw-divide-opacity,1))}.bg-purple-900\/50{background-color:#581c8780}.p-0\.5{padding:.125rem}.shadow,.shadow-inner,.shadow-md,.ring,.ring-2,.blur,.filter,body{font-family:Arima Regular;font-size:14px}.menu ul{list-style:none;margin:0;padding:0}.menu li{border-bottom:1px solid #ddd;padding:10px}.menu li:last-child{border-bottom:none}.hover\:bg-white\/20:hover{background-color:#fff3}.focus\:ring-0:focus,.focus\:ring-1:focus,.dark\:border-gray-600:is(.dark *){--tw-border-opacity:1;border-color:rgb(75 85 99/var(--tw-border-opacity,1))}.dark\:bg-black:is(.dark *){--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.dark\:bg-boxdark:is(.dark *){--tw-bg-opacity:1;background-color:rgb(36 48 63/var(--tw-bg-opacity,1))}.dark\:bg-gray-700:is(.dark *){--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.dark\:bg-gray-800:is(.dark *){--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1))}.dark\:text-black:is(.dark *){--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.dark\:text-gray-100:is(.dark *){--tw-text-opacity:1;color:rgb(243 244 246/var(--tw-text-opacity,1))}.dark\:text-gray-200:is(.dark *){--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity,1))}.dark\:text-gray-300:is(.dark *){--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.dark\:text-gray-400:is(.dark *){--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.dark\:text-gray-500:is(.dark *){--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.dark\:text-red-400:is(.dark *){--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.dark\:text-white:is(.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.dark\:placeholder-gray-400:is(.dark *)::placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity,1))}.dark\:ring-offset-gray-800:is(.dark *){--tw-ring-offset-color:#1f2937}.dark\:hover\:bg-blue-900:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(30 58 138/var(--tw-bg-opacity,1))}.dark\:hover\:bg-gray-600:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(75 85 99/var(--tw-bg-opacity,1))}.dark\:hover\:bg-gray-700:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.dark\:focus\:ring-blue-600:focus:is(.dark *){--tw-ring-opacity:1;--tw-ring-color:rgb(37 99 235/var(--tw-ring-opacity,1))}@media (min-width:0px) and (max-width:767px){}
|