@adaptabletools/adaptable 23.0.8 → 23.0.10
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/index.css +51 -6
- package/package.json +1 -1
- package/src/Api/ColumnApi.d.ts +7 -0
- package/src/Api/Implementation/ColumnApiImpl.d.ts +1 -0
- package/src/Api/Implementation/ColumnApiImpl.js +10 -0
- package/src/View/Components/AdaptableDateInput/index.d.ts +1 -0
- package/src/View/Components/AdaptableDateInput/index.js +2 -1
- package/src/View/Components/ColumnFilter/FloatingFilter.js +13 -13
- package/src/View/Components/ColumnFilter/components/ColumnFilterInput.d.ts +3 -0
- package/src/View/Components/ColumnFilter/components/ColumnFilterInput.js +6 -5
- package/src/View/Components/ColumnFilter/components/FloatingFilterInputList.js +33 -21
- package/src/components/Combobox/index.js +30 -2
- package/src/components/Datepicker/index.d.ts +1 -0
- package/src/components/Datepicker/index.js +2 -2
- package/src/env.js +2 -2
- package/tsconfig.esm.tsbuildinfo +1 -1
package/index.css
CHANGED
|
@@ -405,9 +405,6 @@
|
|
|
405
405
|
.twa\:-mx-1 {
|
|
406
406
|
margin-inline: calc(var(--ab-base-space) * -1);
|
|
407
407
|
}
|
|
408
|
-
.twa\:mx-0\.5 {
|
|
409
|
-
margin-inline: calc(var(--ab-base-space) * 0.5);
|
|
410
|
-
}
|
|
411
408
|
.twa\:mx-1 {
|
|
412
409
|
margin-inline: var(--ab-base-space);
|
|
413
410
|
}
|
|
@@ -1379,9 +1376,6 @@
|
|
|
1379
1376
|
.twa\:gap-y-3 {
|
|
1380
1377
|
row-gap: calc(var(--ab-base-space) * 3);
|
|
1381
1378
|
}
|
|
1382
|
-
.twa\:self-center {
|
|
1383
|
-
align-self: center;
|
|
1384
|
-
}
|
|
1385
1379
|
.twa\:self-end {
|
|
1386
1380
|
align-self: flex-end;
|
|
1387
1381
|
}
|
|
@@ -1825,6 +1819,9 @@
|
|
|
1825
1819
|
.twa\:px-0 {
|
|
1826
1820
|
padding-inline: 0;
|
|
1827
1821
|
}
|
|
1822
|
+
.twa\:px-0\.5 {
|
|
1823
|
+
padding-inline: calc(var(--ab-base-space) * 0.5);
|
|
1824
|
+
}
|
|
1828
1825
|
.twa\:px-1 {
|
|
1829
1826
|
padding-inline: var(--ab-base-space);
|
|
1830
1827
|
}
|
|
@@ -2756,6 +2753,16 @@
|
|
|
2756
2753
|
}
|
|
2757
2754
|
}
|
|
2758
2755
|
}
|
|
2756
|
+
@media (hover: hover) {
|
|
2757
|
+
.twa\:hover\:bg-current\/15:hover {
|
|
2758
|
+
background-color: currentcolor;
|
|
2759
|
+
}
|
|
2760
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
2761
|
+
.twa\:hover\:bg-current\/15:hover {
|
|
2762
|
+
background-color: color-mix(in oklab, currentcolor 15%, transparent);
|
|
2763
|
+
}
|
|
2764
|
+
}
|
|
2765
|
+
}
|
|
2759
2766
|
@media (hover: hover) {
|
|
2760
2767
|
.twa\:hover\:bg-destructive\/20:hover {
|
|
2761
2768
|
background-color: var(--ab-color-destructive);
|
|
@@ -3630,6 +3637,9 @@
|
|
|
3630
3637
|
:is(.twa\:\*\:\[\[role\=button\]\]\:absolute > *):is([role=button]) {
|
|
3631
3638
|
position: absolute;
|
|
3632
3639
|
}
|
|
3640
|
+
:is(.twa\:\*\:\[\[role\=button\]\]\:relative > *):is([role=button]) {
|
|
3641
|
+
position: relative;
|
|
3642
|
+
}
|
|
3633
3643
|
:is(.twa\:\*\:\[\[role\=button\]\]\:inset-x-0\.5 > *):is([role=button]) {
|
|
3634
3644
|
inset-inline: calc(var(--ab-base-space) * 0.5);
|
|
3635
3645
|
}
|
|
@@ -3639,12 +3649,31 @@
|
|
|
3639
3649
|
:is(.twa\:\*\:\[\[role\=button\]\]\:h-auto > *):is([role=button]) {
|
|
3640
3650
|
height: auto;
|
|
3641
3651
|
}
|
|
3652
|
+
:is(.twa\:\*\:\[\[role\=button\]\]\:h-full > *):is([role=button]) {
|
|
3653
|
+
height: 100%;
|
|
3654
|
+
}
|
|
3655
|
+
:is(.twa\:\*\:\[\[role\=button\]\]\:min-w-0 > *):is([role=button]) {
|
|
3656
|
+
min-width: 0;
|
|
3657
|
+
}
|
|
3658
|
+
:is(.twa\:\*\:\[\[role\=button\]\]\:flex-1 > *):is([role=button]) {
|
|
3659
|
+
flex: 1;
|
|
3660
|
+
}
|
|
3661
|
+
:is(.twa\:\*\:\[\[role\=button\]\]\:basis-0 > *):is([role=button]) {
|
|
3662
|
+
flex-basis: 0;
|
|
3663
|
+
}
|
|
3642
3664
|
:is(.twa\:\*\:\[\[role\=button\]\]\:rounded-input > *):is([role=button]) {
|
|
3643
3665
|
border-radius: var(--ab-border-radius-input);
|
|
3644
3666
|
}
|
|
3667
|
+
:is(.twa\:\*\:\[\[role\=button\]\]\:border-none > *):is([role=button]) {
|
|
3668
|
+
--tw-border-style: none;
|
|
3669
|
+
border-style: none;
|
|
3670
|
+
}
|
|
3645
3671
|
:is(.twa\:\*\:\[input\]\:absolute > *):is(input) {
|
|
3646
3672
|
position: absolute;
|
|
3647
3673
|
}
|
|
3674
|
+
:is(.twa\:\*\:\[input\]\:relative > *):is(input) {
|
|
3675
|
+
position: relative;
|
|
3676
|
+
}
|
|
3648
3677
|
:is(.twa\:\*\:\[input\]\:inset-x-0\.5 > *):is(input) {
|
|
3649
3678
|
inset-inline: calc(var(--ab-base-space) * 0.5);
|
|
3650
3679
|
}
|
|
@@ -3654,9 +3683,25 @@
|
|
|
3654
3683
|
:is(.twa\:\*\:\[input\]\:h-auto > *):is(input) {
|
|
3655
3684
|
height: auto;
|
|
3656
3685
|
}
|
|
3686
|
+
:is(.twa\:\*\:\[input\]\:h-full > *):is(input) {
|
|
3687
|
+
height: 100%;
|
|
3688
|
+
}
|
|
3689
|
+
:is(.twa\:\*\:\[input\]\:min-w-0 > *):is(input) {
|
|
3690
|
+
min-width: 0;
|
|
3691
|
+
}
|
|
3692
|
+
:is(.twa\:\*\:\[input\]\:flex-1 > *):is(input) {
|
|
3693
|
+
flex: 1;
|
|
3694
|
+
}
|
|
3695
|
+
:is(.twa\:\*\:\[input\]\:basis-0 > *):is(input) {
|
|
3696
|
+
flex-basis: 0;
|
|
3697
|
+
}
|
|
3657
3698
|
:is(.twa\:\*\:\[input\]\:rounded-input > *):is(input) {
|
|
3658
3699
|
border-radius: var(--ab-border-radius-input);
|
|
3659
3700
|
}
|
|
3701
|
+
:is(.twa\:\*\:\[input\]\:border-none > *):is(input) {
|
|
3702
|
+
--tw-border-style: none;
|
|
3703
|
+
border-style: none;
|
|
3704
|
+
}
|
|
3660
3705
|
:is(.twa\:\*\*\:\[input\]\:min-h-auto\! *):is(input) {
|
|
3661
3706
|
min-height: auto !important;
|
|
3662
3707
|
}
|
package/package.json
CHANGED
package/src/Api/ColumnApi.d.ts
CHANGED
|
@@ -330,6 +330,13 @@ export interface ColumnApi {
|
|
|
330
330
|
* @param columnId Column to use
|
|
331
331
|
*/
|
|
332
332
|
getAGGridColDefForColumnId(columnId: string): ColDef | ColGroupDef;
|
|
333
|
+
/**
|
|
334
|
+
* Returns the AdapTable Column that maps to a given AG Grid ColDef
|
|
335
|
+
*
|
|
336
|
+
* The ColDef is matched to a Column by `colId` (falling back to `field`), mirroring how AG Grid derives a Column's `colId`
|
|
337
|
+
* @param colDef AG Grid ColDef to look up
|
|
338
|
+
*/
|
|
339
|
+
getColumnForColDef(colDef: ColDef): AdaptableColumn | undefined;
|
|
333
340
|
/**
|
|
334
341
|
* Returns the AG Grid Column for a given ColumnId
|
|
335
342
|
* @param columnId Column to use
|
|
@@ -89,6 +89,7 @@ export declare class ColumnApiImpl extends ApiBase implements ColumnApi {
|
|
|
89
89
|
getRowGroupedColumns(): AdaptableColumn[];
|
|
90
90
|
setColumnCaption(columnId: string, caption: string): void;
|
|
91
91
|
getAGGridColDefForColumnId(columnId: string): ColDef | ColGroupDef;
|
|
92
|
+
getColumnForColDef(colDef: ColDef): AdaptableColumn | undefined;
|
|
92
93
|
getAGGridColumnForColumnId(columnId: string): Column;
|
|
93
94
|
hasColumnType(columnIdentifier: string | ColDef, columnType: string): boolean;
|
|
94
95
|
getColumnSummaryForColumnId(columnId: string): AdaptableColumnSummary;
|
|
@@ -522,6 +522,16 @@ export class ColumnApiImpl extends ApiBase {
|
|
|
522
522
|
getAGGridColDefForColumnId(columnId) {
|
|
523
523
|
return this.getAgGridApi().getColumnDef(columnId);
|
|
524
524
|
}
|
|
525
|
+
getColumnForColDef(colDef) {
|
|
526
|
+
if (!colDef) {
|
|
527
|
+
return undefined;
|
|
528
|
+
}
|
|
529
|
+
const candidateColumnId = colDef.colId ?? colDef.field;
|
|
530
|
+
if (candidateColumnId == undefined) {
|
|
531
|
+
return undefined;
|
|
532
|
+
}
|
|
533
|
+
return this.getColumnWithColumnId(candidateColumnId, false);
|
|
534
|
+
}
|
|
525
535
|
getAGGridColumnForColumnId(columnId) {
|
|
526
536
|
return this.getAgGridApi().getColumn(columnId);
|
|
527
537
|
}
|
|
@@ -2,6 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
import { AdaptableInputProps } from '../AdaptableInput';
|
|
3
3
|
export type AdaptableDateInputProps = AdaptableInputProps & {
|
|
4
4
|
showClearButton?: boolean;
|
|
5
|
+
showTriggerButton?: boolean;
|
|
5
6
|
};
|
|
6
7
|
declare const AdaptableDateInput: React.ForwardRefExoticComponent<Omit<AdaptableDateInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
|
|
7
8
|
export default AdaptableDateInput;
|
|
@@ -6,7 +6,7 @@ import useProperty from '../../../components/utils/useProperty';
|
|
|
6
6
|
import { dateToISO, parseDateValue } from '../../../Utilities/Helpers/DateHelper';
|
|
7
7
|
const AdaptableDateInput = React.forwardRef(function AdaptableDateInputCmp(props, ref) {
|
|
8
8
|
const dateInputOptions = useAdaptable().adaptableOptions.userInterfaceOptions.dateInputOptions;
|
|
9
|
-
const { value: _, defaultValue: __, onChange, required, disabled, showClearButton, ...inputProps } = props;
|
|
9
|
+
const { value: _, defaultValue: __, onChange, required, disabled, showClearButton, showTriggerButton, ...inputProps } = props;
|
|
10
10
|
const [value, setValue] = useProperty(props, 'value', undefined, {
|
|
11
11
|
onChange: (dateString) => props.onChange?.({
|
|
12
12
|
target: {
|
|
@@ -28,6 +28,7 @@ const AdaptableDateInput = React.forwardRef(function AdaptableDateInputCmp(props
|
|
|
28
28
|
showOutsideDays: dateInputOptions.showOutsideDays,
|
|
29
29
|
datepickerButtons: dateInputOptions.datepickerButtons,
|
|
30
30
|
showClearButton,
|
|
31
|
+
showTriggerButton: showTriggerButton ?? true,
|
|
31
32
|
...inputProps,
|
|
32
33
|
};
|
|
33
34
|
return _jsx(Datepicker, { ref: ref, ...datepickerProps });
|
|
@@ -44,18 +44,18 @@ export const FloatingFilter = (props) => {
|
|
|
44
44
|
}));
|
|
45
45
|
const renderTriggerValue = () => (_jsxs(Flex, { alignItems: "center", className: "twa:min-w-0", children: [_jsx(Box, { className: "twa:flex twa:items-center", children: !isManualApply && singleFilterPredicateDef?.icon ? (singleFilterPredicateDef?.icon) : (_jsx(AdaptableIconComponent, { icon: { name: 'filter' } })) }), showLabel && (_jsx(Box, { className: "ab-FloatingFilter-label twa:ml-2 twa:flex-1 twa:truncate", title: label, children: label }))] }));
|
|
46
46
|
let filterDropdown = null;
|
|
47
|
-
const filterDropdownSelect = (_jsx(SingleSelect, { chevronIcon: null, "data-name": "floating-filter-button", ariaLabel: `Column Filter Operator Dropdown: current operator is ${label}`,
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
47
|
+
const filterDropdownSelect = (_jsx("div", { className: cn('twa:flex twa:box-border twa:self-stretch twa:min-h-0 twa:h-full twa:py-0.5 twa:px-0.5', !isInlineEditable && 'twa:min-w-0 twa:flex-1'), children: _jsx(SingleSelect, { chevronIcon: null, "data-name": "floating-filter-button", ariaLabel: `Column Filter Operator Dropdown: current operator is ${label}`, stopMouseDownPropagation: true, disabled: props.disabled, open: selectOpen, extraWidthChars: 5, onOpenChange: (nextOpen) => {
|
|
48
|
+
if (nextOpen && !isInlineEditable) {
|
|
49
|
+
adaptable.api.filterApi.columnFilterApi.internalApi.openColumnFilterPopup(props.columnId);
|
|
50
|
+
return;
|
|
51
|
+
}
|
|
52
|
+
setSelectOpen(nextOpen);
|
|
53
|
+
}, value: currentOperator, placeholder: label, items: operatorOptions, showItemTooltip: true, renderValue: renderTriggerValue, onValueChange: (operator) => {
|
|
54
|
+
props.onPredicateChange({
|
|
55
|
+
operator: props.predicate.operator,
|
|
56
|
+
args: [{ operator: operator, args: [] }],
|
|
57
|
+
});
|
|
58
|
+
}, className: cn('twa:h-full twa:w-full twa:min-h-0 twa:text-left twa:px-0.5 twa:py-0.5 twa:border-none', 'twa:shadow-none twa:cursor-pointer', 'twa:text-primary-foreground twa:hover:bg-current/15') }) }));
|
|
59
59
|
if (isInlineEditable) {
|
|
60
60
|
filterDropdown = showQuickFilterDropdown && filterDropdownSelect;
|
|
61
61
|
}
|
|
@@ -91,7 +91,7 @@ export const FloatingFilter = (props) => {
|
|
|
91
91
|
refreshed[Math.min(nextIndex, refreshed.length - 1)]?.focus();
|
|
92
92
|
}
|
|
93
93
|
});
|
|
94
|
-
}, children: [filterDropdown, isInlineEditable && (_jsx(Flex, { className: "twa:flex-1 twa:min-w-0", children: _jsx(FloatingFilterInputList, { onKeyDown: props.onKeydown, columnId: props.columnId, disabled: props.disabled, predicate: props.predicate.args[0], predicateDefs: props.predicateDefs, onPredicateChange: (predicate) => {
|
|
94
|
+
}, children: [filterDropdown, isInlineEditable && (_jsx(Flex, { className: "twa:flex-1 twa:min-w-0 twa:min-h-0 twa:h-full", children: _jsx(FloatingFilterInputList, { onKeyDown: props.onKeydown, columnId: props.columnId, disabled: props.disabled, predicate: props.predicate.args[0], predicateDefs: props.predicateDefs, onPredicateChange: (predicate) => {
|
|
95
95
|
props.onPredicateChange({
|
|
96
96
|
operator: props.predicate.operator,
|
|
97
97
|
args: [predicate],
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
import { AdaptableInputProps } from '../../AdaptableInput';
|
|
3
|
+
import { AdaptableDateInputProps } from '../../AdaptableDateInput';
|
|
2
4
|
type ColumnFilterEditorChangeProps = {
|
|
3
5
|
type: 'text';
|
|
4
6
|
value: string;
|
|
@@ -23,5 +25,6 @@ export declare const ColumnFilterInput: (props: {
|
|
|
23
25
|
filterType?: "floating" | "default";
|
|
24
26
|
usePrimitiveInputs?: boolean;
|
|
25
27
|
columnId: string;
|
|
28
|
+
inputProps?: AdaptableInputProps | AdaptableDateInputProps;
|
|
26
29
|
} & ColumnFilterEditorChangeProps) => React.JSX.Element;
|
|
27
30
|
export {};
|
|
@@ -7,11 +7,12 @@ import { PermittedValuesSelector } from '../../Selectors/PermittedValuesSelector
|
|
|
7
7
|
import { useAdaptable } from '../../../AdaptableContext';
|
|
8
8
|
import { debounce } from '../../../../Utilities/Helpers/TimingHelper';
|
|
9
9
|
import { useCallback } from 'react';
|
|
10
|
+
import { cn } from '../../../../lib/utils';
|
|
10
11
|
function debounceOrImmediate(fn, time) {
|
|
11
12
|
return time && time > 0 ? debounce(fn, time) : fn;
|
|
12
13
|
}
|
|
13
14
|
export const ColumnFilterInput = (props) => {
|
|
14
|
-
const { type, value, onChange: onChangeProp, onClear: onClearProp, disabled, onKeyDown, filterType, usePrimitiveInputs = true, columnId, } = props;
|
|
15
|
+
const { type, value, onChange: onChangeProp, onClear: onClearProp, disabled, onKeyDown, filterType, usePrimitiveInputs = true, columnId, inputProps, } = props;
|
|
15
16
|
const [liveValue, setLiveValue] = React.useState(value);
|
|
16
17
|
const [hasFocus, setHasFocus] = React.useState(false);
|
|
17
18
|
const onFocus = useCallback(() => {
|
|
@@ -63,7 +64,7 @@ export const ColumnFilterInput = (props) => {
|
|
|
63
64
|
}
|
|
64
65
|
};
|
|
65
66
|
if (type === 'date' && !showDatePicker) {
|
|
66
|
-
return (_jsx(AdaptableDateInlineInput, { "data-name": "floating-filter-input", value: liveValue, disabled: disabled, onFocus: onFocus, onBlur: onBlur, className: "twa:border-none twa:pr-0", onKeyDownCapture: onKeyDownCapture, onChange: (value) => {
|
|
67
|
+
return (_jsx(AdaptableDateInlineInput, { ...inputProps, "data-name": "floating-filter-input", value: liveValue, disabled: disabled, onFocus: onFocus, onBlur: onBlur, className: "twa:border-none twa:pr-0", onKeyDownCapture: onKeyDownCapture, onChange: (value) => {
|
|
67
68
|
onChange(value);
|
|
68
69
|
setLiveValue(value);
|
|
69
70
|
} }));
|
|
@@ -80,13 +81,13 @@ export const ColumnFilterInput = (props) => {
|
|
|
80
81
|
}
|
|
81
82
|
} }));
|
|
82
83
|
}
|
|
83
|
-
return (_jsx(AdaptableInput, { style: filterType === 'floating'
|
|
84
|
+
return (_jsx(AdaptableInput, { ...inputProps, style: filterType === 'floating'
|
|
84
85
|
? {
|
|
85
|
-
width: '
|
|
86
|
+
width: '100%',
|
|
86
87
|
padding: 'var(--ab-base-space)',
|
|
87
88
|
border: 'none',
|
|
88
89
|
}
|
|
89
|
-
: {}, "data-name": "floating-filter-input", onFocus: onFocus, onBlur: onBlur, disabled: disabled, type: type === 'number' ? 'text' : type, autoFocus: false, value: liveValue ?? '', onKeyDown: onKeyDown, showClearButton: false, className: 'twa:flex-1', onChange: (e) => {
|
|
90
|
+
: {}, "data-name": "floating-filter-input", onFocus: onFocus, onBlur: onBlur, disabled: disabled, type: type === 'number' ? 'text' : type, autoFocus: false, value: liveValue ?? '', onKeyDown: onKeyDown, showClearButton: false, className: cn(filterType === 'floating' ? 'twa:w-full twa:min-w-0 twa:h-full' : 'twa:flex-1', inputProps?.className), onChange: (e) => {
|
|
90
91
|
const prevValue = `${liveValue}`;
|
|
91
92
|
const value = e.target.value;
|
|
92
93
|
if (value) {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { debounce } from '../../../../Utilities/Helpers/TimingHelper';
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { getOperatorMatchingInputs } from '../../../../components/ExpressionEditor/QueryBuilder/utils';
|
|
@@ -31,31 +31,43 @@ export const FloatingFilterInputList = (props) => {
|
|
|
31
31
|
});
|
|
32
32
|
}, value: props.predicate.args, type: props.predicate.operator === 'In' ? 'In' : 'NotIn' }));
|
|
33
33
|
}
|
|
34
|
+
const hasMultipleInputs = matchingInputs.length > 1;
|
|
34
35
|
return (_jsx("div", { className: cn('twa:relative twa:w-full twa:flex twa:flex-row twa:[&>*:not(:first-child)]:border-l! twa:[&>*:not(:first-child)]:border-input-border!', {
|
|
35
36
|
'twa:**:[input]:min-h-auto!': 'make all inputs inside not have a height fixed',
|
|
36
37
|
'twa:*:[[role=button]]:rounded-input': true,
|
|
37
|
-
'twa:*:[[role=button]]:absolute': 'make date picker absolute filter',
|
|
38
|
-
'twa:*:[[role=button]]:inset-y-0.5 twa:*:[[role=button]]:inset-x-0.5 twa:*:[[role=button]]:h-auto':
|
|
38
|
+
'twa:*:[[role=button]]:absolute': !hasMultipleInputs && 'make date picker absolute filter',
|
|
39
|
+
'twa:*:[[role=button]]:inset-y-0.5 twa:*:[[role=button]]:inset-x-0.5 twa:*:[[role=button]]:h-auto': !hasMultipleInputs &&
|
|
40
|
+
'make date picker - and give it some padding, so the focus is not cut off absolute outline filter',
|
|
39
41
|
'twa:*:[input]:rounded-input': true,
|
|
40
|
-
'twa:*:[input]:absolute': 'make inputs absolute filter',
|
|
41
|
-
'twa:*:[input]:inset-y-0.5 twa:*:[input]:inset-x-0.5 twa:*:[input]:h-auto':
|
|
42
|
+
'twa:*:[input]:absolute': !hasMultipleInputs && 'make inputs absolute filter',
|
|
43
|
+
'twa:*:[input]:inset-y-0.5 twa:*:[input]:inset-x-0.5 twa:*:[input]:h-auto': !hasMultipleInputs &&
|
|
44
|
+
'make inputs - and give it some padding, so the focus is not cut off absolute outline filter',
|
|
45
|
+
'twa:min-h-0 twa:h-full twa:p-0.5': hasMultipleInputs,
|
|
46
|
+
'twa:*:[input]:relative twa:*:[[role=button]]:relative': hasMultipleInputs,
|
|
47
|
+
'twa:*:[input]:min-w-0 twa:*:[[role=button]]:min-w-0': hasMultipleInputs,
|
|
48
|
+
'twa:*:[input]:flex-1 twa:*:[[role=button]]:flex-1': hasMultipleInputs,
|
|
49
|
+
'twa:*:[input]:basis-0 twa:*:[[role=button]]:basis-0': hasMultipleInputs,
|
|
50
|
+
'twa:*:[input]:h-full twa:*:[[role=button]]:h-full': hasMultipleInputs,
|
|
51
|
+
'twa:*:[input]:border-none twa:*:[[role=button]]:border-none': hasMultipleInputs,
|
|
42
52
|
}), children: (matchingInputs ?? []).map((input, index) => {
|
|
43
53
|
const value = props?.predicate?.args?.[index];
|
|
44
|
-
return (
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
54
|
+
return (_jsxs(_Fragment, { children: [index > 0 && _jsx("div", { className: "twa:border-l twa:border-input-border" }), _jsx(ColumnFilterInput, { inputProps: {
|
|
55
|
+
showTriggerButton: hasMultipleInputs ? false : undefined,
|
|
56
|
+
}, filterType: "floating", columnId: props.columnId, usePrimitiveInputs: true, disabled: props.disabled, type: input, value: value, onKeyDown: props.onKeyDown, onClear: () => {
|
|
57
|
+
const args = [...props.predicate.args];
|
|
58
|
+
args.splice(index, 1);
|
|
59
|
+
const newPredicate = {
|
|
60
|
+
operator: props.predicate.operator,
|
|
61
|
+
args: args,
|
|
62
|
+
};
|
|
63
|
+
debouncedPredicateChange(newPredicate);
|
|
64
|
+
}, onChange: (value) => {
|
|
65
|
+
const newPredicate = {
|
|
66
|
+
operator: props.predicate.operator,
|
|
67
|
+
args: [...props.predicate.args],
|
|
68
|
+
};
|
|
69
|
+
newPredicate.args[index] = value;
|
|
70
|
+
debouncedPredicateChange(newPredicate);
|
|
71
|
+
} }, index)] }));
|
|
60
72
|
}) }));
|
|
61
73
|
};
|
|
@@ -104,6 +104,10 @@ const AdaptableCombobox_Root = (props) => {
|
|
|
104
104
|
eventDetails.cancel?.();
|
|
105
105
|
return;
|
|
106
106
|
}
|
|
107
|
+
if (props.searchable === 'menulist' && eventDetails?.reason === 'input-clear' && props.open) {
|
|
108
|
+
eventDetails.cancel?.();
|
|
109
|
+
return;
|
|
110
|
+
}
|
|
107
111
|
props.onInputValueChange?.(next);
|
|
108
112
|
};
|
|
109
113
|
let comboboxItems = props.groups ?? props.items;
|
|
@@ -122,6 +126,21 @@ const AdaptableCombobox_Root = (props) => {
|
|
|
122
126
|
}
|
|
123
127
|
return (_jsx(Combobox, { ...props, items: comboboxItems, isItemEqualToValue: isItemEqualToValue, itemToStringLabel: getItemTextLabel, value: internalValue, defaultValue: internalDefaultValue, onValueChange: handleValueChange, onInputValueChange: handleInputValueChange, "aria-label": props.ariaLabel || props['aria-label'], "data-name": props['data-name'], disabled: props.disabled, open: props.open, onOpenChange: props.onOpenChange, multiple: props.multiple, filter: props.filter, autoHighlight: true, children: props.children }));
|
|
124
128
|
};
|
|
129
|
+
const useMenulistFilterInput = (props, creatableInput) => {
|
|
130
|
+
const isMenulistFilter = props.searchable === 'menulist' && !props.isCreatable;
|
|
131
|
+
const [filterValue, setFilterValue] = React.useState(props.inputValue ?? props.defaultInputValue ?? '');
|
|
132
|
+
if (!isMenulistFilter) {
|
|
133
|
+
return creatableInput;
|
|
134
|
+
}
|
|
135
|
+
const inputValue = props.inputValue !== undefined ? props.inputValue : filterValue;
|
|
136
|
+
const onInputValueChange = (value) => {
|
|
137
|
+
if (props.inputValue === undefined) {
|
|
138
|
+
setFilterValue(value);
|
|
139
|
+
}
|
|
140
|
+
props.onInputValueChange?.(value);
|
|
141
|
+
};
|
|
142
|
+
return { inputValue, onInputValueChange };
|
|
143
|
+
};
|
|
125
144
|
const useGetAllItems = (props) => {
|
|
126
145
|
const allItems = props.groups
|
|
127
146
|
? props.groups.flatMap((g) => g.items)
|
|
@@ -132,7 +151,12 @@ const useGetAllItems = (props) => {
|
|
|
132
151
|
const itemByValue = useMemo(() => {
|
|
133
152
|
return new Map(allItems.map((item) => [item.value, item]));
|
|
134
153
|
}, [allItems]);
|
|
135
|
-
const
|
|
154
|
+
const creatableInput = useCreatable(props, allItems, itemByValue);
|
|
155
|
+
const { inputValue, onInputValueChange } = useMenulistFilterInput(props, {
|
|
156
|
+
inputValue: creatableInput.inputValue,
|
|
157
|
+
onInputValueChange: creatableInput.onInputValueChange,
|
|
158
|
+
});
|
|
159
|
+
const { onValueChange, value } = creatableInput;
|
|
136
160
|
return {
|
|
137
161
|
value,
|
|
138
162
|
itemByValue,
|
|
@@ -140,7 +164,11 @@ const useGetAllItems = (props) => {
|
|
|
140
164
|
onInputValueChange,
|
|
141
165
|
onValueChange,
|
|
142
166
|
allItems,
|
|
143
|
-
maxLabelLength: allItems.reduce((max, item) => Math.max(max, typeof item.label === 'string'
|
|
167
|
+
maxLabelLength: allItems.reduce((max, item) => Math.max(max, typeof item.label === 'string'
|
|
168
|
+
? item.label.length
|
|
169
|
+
: typeof item.textLabel === 'string'
|
|
170
|
+
? item.textLabel.length
|
|
171
|
+
: 0), 0),
|
|
144
172
|
};
|
|
145
173
|
};
|
|
146
174
|
function useCreatable(props, allItems, itemByValue) {
|
|
@@ -9,6 +9,7 @@ export type DatepickerProps = Omit<InputProps, 'value' | 'onChange' | 'defaultVa
|
|
|
9
9
|
onChange: (value: Date | undefined) => void;
|
|
10
10
|
onHide?: VoidFunction;
|
|
11
11
|
showClearButton?: boolean;
|
|
12
|
+
showTriggerButton?: boolean;
|
|
12
13
|
datepickerButtons?: DatepickerButton[];
|
|
13
14
|
dateProps: {
|
|
14
15
|
format: string;
|
|
@@ -38,7 +38,7 @@ const captionComponents = {
|
|
|
38
38
|
const END_MONTH = endOfYear(addYears(new Date(), 10));
|
|
39
39
|
const START_MONTH = startOfYear(addYears(new Date(), -50));
|
|
40
40
|
export const Datepicker = React.forwardRef((props, ref) => {
|
|
41
|
-
const { dateProps, disabled, style, className, placeholder, showWeekNumber, showOutsideDays, datepickerButtons, showClearButton, autoFocus, onHide, value: _value, defaultValue: _defaultValue, onChange: _onChange, } = props;
|
|
41
|
+
const { dateProps, disabled, style, className, placeholder, showWeekNumber, showOutsideDays, datepickerButtons, showClearButton, autoFocus, showTriggerButton = true, onHide, value: _value, defaultValue: _defaultValue, onChange: _onChange, } = props;
|
|
42
42
|
void _value;
|
|
43
43
|
void _defaultValue;
|
|
44
44
|
void _onChange;
|
|
@@ -172,7 +172,7 @@ export const Datepicker = React.forwardRef((props, ref) => {
|
|
|
172
172
|
clearValue();
|
|
173
173
|
triggerRef.current?.firstChild?.focus();
|
|
174
174
|
}, accessLevel: ACCESS_LEVEL_FULL })) : null;
|
|
175
|
-
const calendarButton = (_jsx(SimpleButton, { disabled: disabled, variant: "text", icon: "calendar", tooltip: "Date", iconSize: 20, className: "twa:p-0", type: "button" }));
|
|
175
|
+
const calendarButton = showTriggerButton !== false ? (_jsx(SimpleButton, { disabled: disabled, variant: "text", icon: "calendar", tooltip: "Date", iconSize: 20, className: "twa:p-0", type: "button" })) : null;
|
|
176
176
|
const [selectPortalRoot, setSelectPortalRoot] = React.useState(null);
|
|
177
177
|
const popupRefCallback = React.useCallback((el) => {
|
|
178
178
|
popupRef.current = el;
|
package/src/env.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export default {
|
|
2
2
|
NEXT_PUBLIC_INFINITE_TABLE_LICENSE_KEY: "StartDate=2021-06-29|EndDate=2030-01-01|Owner=Adaptable|Type=distribution|TS=1624971462479|C=137829811,1004007071,2756196225,1839832928,3994409405,636616862" || '',
|
|
3
|
-
PUBLISH_TIMESTAMP:
|
|
4
|
-
VERSION: "23.0.
|
|
3
|
+
PUBLISH_TIMESTAMP: 1783955510713 || Date.now(),
|
|
4
|
+
VERSION: "23.0.10" || '--current-version--',
|
|
5
5
|
};
|