react-restyle-components 0.4.26 → 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 +188 -160
- package/lib/src/core-components/src/tc.global.css +5 -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,8 @@ const FilterInputBase = styled.input `
|
|
|
14
15
|
height: 22px;
|
|
15
16
|
padding: 0 5px;
|
|
16
17
|
font-size: 10px;
|
|
18
|
+
font-weight: normal;
|
|
19
|
+
color: #000000;
|
|
17
20
|
border: 1px solid ${tokens.outline || '#e2e8f0'};
|
|
18
21
|
border-radius: 2px;
|
|
19
22
|
background: white;
|
|
@@ -40,6 +43,8 @@ const FilterSelectBase = styled.select `
|
|
|
40
43
|
height: 22px;
|
|
41
44
|
padding: 0 5px;
|
|
42
45
|
font-size: 10px;
|
|
46
|
+
font-weight: normal;
|
|
47
|
+
color: #000000;
|
|
43
48
|
border: 1px solid ${tokens.outline || '#e2e8f0'};
|
|
44
49
|
border-radius: 2px;
|
|
45
50
|
background: white;
|
|
@@ -62,6 +67,7 @@ const ComparatorSelect = styled.select `
|
|
|
62
67
|
height: 22px;
|
|
63
68
|
padding: 0 2px;
|
|
64
69
|
font-size: 9px;
|
|
70
|
+
font-weight: normal;
|
|
65
71
|
border: 1px solid ${tokens.outline || '#e2e8f0'};
|
|
66
72
|
border-radius: 2px;
|
|
67
73
|
background: white;
|
|
@@ -105,7 +111,7 @@ const ToggleButton = styled.button `
|
|
|
105
111
|
height: 22px;
|
|
106
112
|
padding: 0 5px;
|
|
107
113
|
font-size: 9px;
|
|
108
|
-
font-weight:
|
|
114
|
+
font-weight: normal;
|
|
109
115
|
border: 1px solid ${tokens.outline || '#e2e8f0'};
|
|
110
116
|
border-radius: 2px;
|
|
111
117
|
cursor: pointer;
|
|
@@ -132,68 +138,66 @@ const ToggleButton = styled.button `
|
|
|
132
138
|
* Internal Text filter component with options support
|
|
133
139
|
*/
|
|
134
140
|
const TextFilterComponent = ({ column, value, onChange, options }) => {
|
|
135
|
-
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)
|
|
136
143
|
const [internalValue, setInternalValue] = useState(value || defaultValue || '');
|
|
137
|
-
const
|
|
138
|
-
const
|
|
139
|
-
|
|
144
|
+
const internalValueRef = useRef(internalValue);
|
|
145
|
+
const inputRef = useRef(null);
|
|
146
|
+
const onChangeRef = useRef(onChange);
|
|
147
|
+
const onFilterRef = useRef(onFilter);
|
|
148
|
+
// Keep refs in sync
|
|
140
149
|
useEffect(() => {
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
150
|
+
internalValueRef.current = internalValue;
|
|
151
|
+
}, [internalValue]);
|
|
152
|
+
useEffect(() => {
|
|
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]);
|
|
163
|
+
// Provide filter instance via getFilter callback - only on mount
|
|
147
164
|
useEffect(() => {
|
|
148
165
|
if (getFilter) {
|
|
149
166
|
getFilter({
|
|
150
|
-
value
|
|
167
|
+
get value() {
|
|
168
|
+
return internalValueRef.current;
|
|
169
|
+
},
|
|
151
170
|
setValue: (newValue) => {
|
|
152
171
|
setInternalValue(newValue);
|
|
153
|
-
|
|
154
|
-
|
|
172
|
+
onChangeRef.current(newValue || null);
|
|
173
|
+
onFilterRef.current?.(newValue);
|
|
155
174
|
},
|
|
156
175
|
clear: () => {
|
|
157
176
|
setInternalValue('');
|
|
158
|
-
|
|
159
|
-
|
|
177
|
+
onChangeRef.current(null);
|
|
178
|
+
onFilterRef.current?.('');
|
|
160
179
|
},
|
|
161
180
|
});
|
|
162
181
|
}
|
|
163
|
-
|
|
182
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
183
|
+
}, [getFilter]);
|
|
184
|
+
// Simple change handler - just update local state
|
|
164
185
|
const handleChange = useCallback((e) => {
|
|
165
|
-
|
|
166
|
-
setInternalValue(newValue);
|
|
167
|
-
if (timeoutRef.current) {
|
|
168
|
-
clearTimeout(timeoutRef.current);
|
|
169
|
-
}
|
|
170
|
-
if (delay > 0) {
|
|
171
|
-
timeoutRef.current = setTimeout(() => {
|
|
172
|
-
onChange(newValue || null);
|
|
173
|
-
onFilter?.(newValue);
|
|
174
|
-
}, delay);
|
|
175
|
-
}
|
|
176
|
-
else {
|
|
177
|
-
onChange(newValue || null);
|
|
178
|
-
onFilter?.(newValue);
|
|
179
|
-
}
|
|
180
|
-
}, [onChange, onFilter, delay]);
|
|
181
|
-
// Cleanup timeout on unmount
|
|
182
|
-
useEffect(() => {
|
|
183
|
-
return () => {
|
|
184
|
-
if (timeoutRef.current) {
|
|
185
|
-
clearTimeout(timeoutRef.current);
|
|
186
|
-
}
|
|
187
|
-
};
|
|
186
|
+
setInternalValue(e.target.value);
|
|
188
187
|
}, []);
|
|
188
|
+
const inputStyle = {
|
|
189
|
+
fontWeight: 400,
|
|
190
|
+
...style,
|
|
191
|
+
};
|
|
189
192
|
// If custom className is provided, use plain input to allow full CSS control
|
|
190
193
|
if (className) {
|
|
191
|
-
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: {
|
|
192
195
|
width: '100%',
|
|
196
|
+
fontWeight: 400,
|
|
193
197
|
...style,
|
|
194
198
|
}, disabled: disabled }));
|
|
195
199
|
}
|
|
196
|
-
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 }));
|
|
197
201
|
};
|
|
198
202
|
export function TextFilter(optionsOrProps) {
|
|
199
203
|
// Check if it's being used as a factory function (options object without column/value/onChange)
|
|
@@ -214,72 +218,75 @@ export function TextFilter(optionsOrProps) {
|
|
|
214
218
|
* Internal Number filter component with options support
|
|
215
219
|
*/
|
|
216
220
|
const NumberFilterComponent = ({ column, value, onChange, options }) => {
|
|
217
|
-
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)
|
|
218
223
|
const [number, setNumber] = useState(value?.number || defaultValue?.number || '');
|
|
219
224
|
const [comparator, setComparator] = useState(value?.comparator || defaultValue?.comparator || defaultComparator);
|
|
220
|
-
const
|
|
221
|
-
|
|
225
|
+
const numberRef = useRef(number);
|
|
226
|
+
const comparatorRef = useRef(comparator);
|
|
227
|
+
const inputRef = useRef(null);
|
|
228
|
+
const onChangeRef = useRef(onChange);
|
|
229
|
+
const onFilterRef = useRef(onFilter);
|
|
230
|
+
// Keep refs in sync with state
|
|
222
231
|
useEffect(() => {
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
232
|
+
numberRef.current = number;
|
|
233
|
+
comparatorRef.current = comparator;
|
|
234
|
+
}, [number, comparator]);
|
|
235
|
+
useEffect(() => {
|
|
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]);
|
|
249
|
+
// Provide filter instance via getFilter callback - only on mount
|
|
229
250
|
useEffect(() => {
|
|
230
251
|
if (getFilter) {
|
|
231
252
|
getFilter({
|
|
232
|
-
value
|
|
253
|
+
get value() {
|
|
254
|
+
return numberRef.current
|
|
255
|
+
? { number: numberRef.current, comparator: comparatorRef.current }
|
|
256
|
+
: null;
|
|
257
|
+
},
|
|
233
258
|
setValue: (newValue) => {
|
|
234
259
|
if (newValue) {
|
|
235
260
|
setNumber(newValue.number);
|
|
236
261
|
setComparator(newValue.comparator);
|
|
237
|
-
|
|
238
|
-
|
|
262
|
+
onChangeRef.current(newValue);
|
|
263
|
+
onFilterRef.current?.(newValue);
|
|
239
264
|
}
|
|
240
265
|
else {
|
|
241
266
|
setNumber('');
|
|
242
|
-
|
|
243
|
-
|
|
267
|
+
onChangeRef.current(null);
|
|
268
|
+
onFilterRef.current?.(null);
|
|
244
269
|
}
|
|
245
270
|
},
|
|
246
271
|
clear: () => {
|
|
247
272
|
setNumber('');
|
|
248
273
|
setComparator(defaultComparator);
|
|
249
|
-
|
|
250
|
-
|
|
274
|
+
onChangeRef.current(null);
|
|
275
|
+
onFilterRef.current?.(null);
|
|
251
276
|
},
|
|
252
277
|
});
|
|
253
278
|
}
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
279
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
280
|
+
}, [getFilter]);
|
|
281
|
+
// Handle comparator change - trigger immediate filter update
|
|
282
|
+
const handleComparatorChange = useCallback((newComparator) => {
|
|
257
283
|
setComparator(newComparator);
|
|
258
|
-
if (
|
|
259
|
-
|
|
284
|
+
if (number) {
|
|
285
|
+
const newValue = { number, comparator: newComparator };
|
|
286
|
+
onChangeRef.current(newValue);
|
|
287
|
+
onFilterRef.current?.(newValue);
|
|
260
288
|
}
|
|
261
|
-
|
|
262
|
-
? { number: newNumber, comparator: newComparator }
|
|
263
|
-
: null;
|
|
264
|
-
if (delay > 0) {
|
|
265
|
-
timeoutRef.current = setTimeout(() => {
|
|
266
|
-
onChange(newValue);
|
|
267
|
-
onFilter?.(newValue);
|
|
268
|
-
}, delay);
|
|
269
|
-
}
|
|
270
|
-
else {
|
|
271
|
-
onChange(newValue);
|
|
272
|
-
onFilter?.(newValue);
|
|
273
|
-
}
|
|
274
|
-
}, [onChange, onFilter, delay]);
|
|
275
|
-
// Cleanup timeout on unmount
|
|
276
|
-
useEffect(() => {
|
|
277
|
-
return () => {
|
|
278
|
-
if (timeoutRef.current) {
|
|
279
|
-
clearTimeout(timeoutRef.current);
|
|
280
|
-
}
|
|
281
|
-
};
|
|
282
|
-
}, []);
|
|
289
|
+
}, [number]);
|
|
283
290
|
const comparatorSymbols = {
|
|
284
291
|
'=': '=',
|
|
285
292
|
'!=': '≠',
|
|
@@ -288,6 +295,11 @@ const NumberFilterComponent = ({ column, value, onChange, options }) => {
|
|
|
288
295
|
'<': '<',
|
|
289
296
|
'<=': '≤',
|
|
290
297
|
};
|
|
298
|
+
const inputStyle = {
|
|
299
|
+
flex: 1,
|
|
300
|
+
fontWeight: 400,
|
|
301
|
+
...style,
|
|
302
|
+
};
|
|
291
303
|
const inputProps = {
|
|
292
304
|
type: 'text',
|
|
293
305
|
id,
|
|
@@ -296,13 +308,13 @@ const NumberFilterComponent = ({ column, value, onChange, options }) => {
|
|
|
296
308
|
const val = e.target.value;
|
|
297
309
|
const pattern = allowDecimal ? /^[0-9.,]*$/ : /^[0-9]*$/;
|
|
298
310
|
if (pattern.test(val)) {
|
|
299
|
-
|
|
311
|
+
setNumber(val);
|
|
300
312
|
}
|
|
301
313
|
},
|
|
302
314
|
placeholder: placeholder || column.filterPlaceholder || 'Number...',
|
|
303
315
|
disabled,
|
|
304
316
|
};
|
|
305
|
-
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 }))] }));
|
|
306
318
|
};
|
|
307
319
|
export function NumberFilter(optionsOrProps) {
|
|
308
320
|
if (!('column' in optionsOrProps) &&
|
|
@@ -321,41 +333,62 @@ export function NumberFilter(optionsOrProps) {
|
|
|
321
333
|
*/
|
|
322
334
|
const DateFilterComponent = ({ column, value, onChange, options }) => {
|
|
323
335
|
const { className, style, defaultValue, defaultComparator = '=', defaultRangeMode = false, getFilter, onFilter, id, disabled, minDate, maxDate, } = options || {};
|
|
336
|
+
// Local state for immediate updates
|
|
324
337
|
const [startDate, setStartDate] = useState(value?.startDate || defaultValue?.startDate || '');
|
|
325
338
|
const [endDate, setEndDate] = useState(value?.endDate || defaultValue?.endDate || '');
|
|
326
339
|
const [diffFlag, setDiffFlag] = useState(value?.diffFlag ?? defaultValue?.diffFlag ?? defaultRangeMode);
|
|
327
340
|
const [comparator, setComparator] = useState(value?.comparator || defaultValue?.comparator || defaultComparator);
|
|
328
|
-
|
|
341
|
+
const stateRef = useRef({ startDate, endDate, diffFlag, comparator });
|
|
342
|
+
const onChangeRef = useRef(onChange);
|
|
343
|
+
const onFilterRef = useRef(onFilter);
|
|
344
|
+
// Keep refs in sync with state
|
|
329
345
|
useEffect(() => {
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
346
|
+
stateRef.current = { startDate, endDate, diffFlag, comparator };
|
|
347
|
+
}, [startDate, endDate, diffFlag, comparator]);
|
|
348
|
+
useEffect(() => {
|
|
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]);
|
|
368
|
+
// Provide filter instance via getFilter callback - only on mount
|
|
338
369
|
useEffect(() => {
|
|
339
370
|
if (getFilter) {
|
|
340
|
-
const currentValue = startDate || endDate
|
|
341
|
-
? { startDate, endDate, diffFlag, comparator }
|
|
342
|
-
: null;
|
|
343
371
|
getFilter({
|
|
344
|
-
value
|
|
372
|
+
get value() {
|
|
373
|
+
const { startDate: s, endDate: e, diffFlag: d, comparator: c, } = stateRef.current;
|
|
374
|
+
return s || e
|
|
375
|
+
? { startDate: s, endDate: e, diffFlag: d, comparator: c }
|
|
376
|
+
: null;
|
|
377
|
+
},
|
|
345
378
|
setValue: (newValue) => {
|
|
346
379
|
if (newValue) {
|
|
347
380
|
setStartDate(newValue.startDate || '');
|
|
348
381
|
setEndDate(newValue.endDate || '');
|
|
349
382
|
setDiffFlag(newValue.diffFlag ?? defaultRangeMode);
|
|
350
383
|
setComparator(newValue.comparator || defaultComparator);
|
|
351
|
-
|
|
352
|
-
|
|
384
|
+
onChangeRef.current(newValue);
|
|
385
|
+
onFilterRef.current?.(newValue);
|
|
353
386
|
}
|
|
354
387
|
else {
|
|
355
388
|
setStartDate('');
|
|
356
389
|
setEndDate('');
|
|
357
|
-
|
|
358
|
-
|
|
390
|
+
onChangeRef.current(null);
|
|
391
|
+
onFilterRef.current?.(null);
|
|
359
392
|
}
|
|
360
393
|
},
|
|
361
394
|
clear: () => {
|
|
@@ -363,48 +396,27 @@ const DateFilterComponent = ({ column, value, onChange, options }) => {
|
|
|
363
396
|
setEndDate('');
|
|
364
397
|
setDiffFlag(defaultRangeMode);
|
|
365
398
|
setComparator(defaultComparator);
|
|
366
|
-
|
|
367
|
-
|
|
399
|
+
onChangeRef.current(null);
|
|
400
|
+
onFilterRef.current?.(null);
|
|
368
401
|
},
|
|
369
402
|
});
|
|
370
403
|
}
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
comparator,
|
|
388
|
-
...updates,
|
|
389
|
-
};
|
|
390
|
-
if (updates.startDate !== undefined)
|
|
391
|
-
setStartDate(updates.startDate);
|
|
392
|
-
if (updates.endDate !== undefined)
|
|
393
|
-
setEndDate(updates.endDate);
|
|
394
|
-
if (updates.diffFlag !== undefined)
|
|
395
|
-
setDiffFlag(updates.diffFlag);
|
|
396
|
-
if (updates.comparator !== undefined)
|
|
397
|
-
setComparator(updates.comparator);
|
|
398
|
-
if (newValue.startDate || newValue.endDate) {
|
|
399
|
-
onChange(newValue);
|
|
400
|
-
onFilter?.(newValue);
|
|
401
|
-
}
|
|
402
|
-
else {
|
|
403
|
-
onChange(null);
|
|
404
|
-
onFilter?.(null);
|
|
405
|
-
}
|
|
406
|
-
}, [startDate, endDate, diffFlag, comparator, onChange, onFilter]);
|
|
407
|
-
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 })] }))] }));
|
|
404
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
405
|
+
}, [getFilter]);
|
|
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 } })] }))] }));
|
|
408
420
|
};
|
|
409
421
|
export function DateFilter(optionsOrProps) {
|
|
410
422
|
if (!('column' in optionsOrProps) &&
|
|
@@ -422,44 +434,60 @@ export function DateFilter(optionsOrProps) {
|
|
|
422
434
|
* Internal Select filter component with options support
|
|
423
435
|
*/
|
|
424
436
|
const SelectFilterComponent = ({ column, value, onChange, options }) => {
|
|
425
|
-
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
|
|
426
439
|
const [selectedValue, setSelectedValue] = useState(value || defaultValue || '');
|
|
427
|
-
|
|
440
|
+
const selectedValueRef = useRef(selectedValue);
|
|
441
|
+
const onChangeRef = useRef(onChange);
|
|
442
|
+
const onFilterRef = useRef(onFilter);
|
|
443
|
+
// Keep refs in sync with state
|
|
444
|
+
useEffect(() => {
|
|
445
|
+
selectedValueRef.current = selectedValue;
|
|
446
|
+
}, [selectedValue]);
|
|
428
447
|
useEffect(() => {
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
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]);
|
|
458
|
+
// Provide filter instance via getFilter callback - only on mount
|
|
432
459
|
useEffect(() => {
|
|
433
460
|
if (getFilter) {
|
|
434
461
|
getFilter({
|
|
435
|
-
value
|
|
462
|
+
get value() {
|
|
463
|
+
return selectedValueRef.current || null;
|
|
464
|
+
},
|
|
436
465
|
setValue: (newValue) => {
|
|
437
466
|
setSelectedValue(newValue || '');
|
|
438
|
-
|
|
439
|
-
|
|
467
|
+
onChangeRef.current(newValue);
|
|
468
|
+
onFilterRef.current?.(newValue);
|
|
440
469
|
},
|
|
441
470
|
clear: () => {
|
|
442
471
|
setSelectedValue('');
|
|
443
|
-
|
|
444
|
-
|
|
472
|
+
onChangeRef.current(null);
|
|
473
|
+
onFilterRef.current?.(null);
|
|
445
474
|
},
|
|
446
475
|
});
|
|
447
476
|
}
|
|
448
|
-
|
|
477
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
478
|
+
}, [getFilter]);
|
|
479
|
+
// Simple change handler - just update local state
|
|
449
480
|
const handleChange = useCallback((e) => {
|
|
450
|
-
const newValue = e.target.value || null;
|
|
451
481
|
setSelectedValue(e.target.value);
|
|
452
|
-
|
|
453
|
-
onFilter?.(newValue);
|
|
454
|
-
}, [onChange, onFilter]);
|
|
482
|
+
}, []);
|
|
455
483
|
// Use custom options if provided, otherwise fall back to column.filterOptions
|
|
456
484
|
const selectOptions = customOptions || column.filterOptions || [];
|
|
457
485
|
const selectContent = (_jsxs(_Fragment, { children: [_jsx("option", { value: "", children: placeholder }), selectOptions.map((opt) => (_jsx("option", { value: opt.value, children: opt.label }, opt.value)))] }));
|
|
458
486
|
// If custom className is provided, use plain select to allow full CSS control
|
|
459
487
|
if (className) {
|
|
460
|
-
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 }));
|
|
461
489
|
}
|
|
462
|
-
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 }));
|
|
463
491
|
};
|
|
464
492
|
export function SelectFilter(optionsOrProps) {
|
|
465
493
|
if (!('column' in optionsOrProps) &&
|
|
@@ -161,6 +161,11 @@
|
|
|
161
161
|
/*! 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 *){--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}
|
|
162
162
|
/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
|
|
163
163
|
/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
|
|
164
|
+
/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
|
|
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}}
|
|
164
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: }
|
|
165
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: }
|
|
166
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){}
|