@vuu-ui/vuu-filters 0.11.1 → 0.11.3
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/cjs/custom-filters/CustomFilters.js +3 -3
- package/cjs/custom-filters/CustomFilters.js.map +1 -1
- package/cjs/filter-bar/FilterBar.js +3 -4
- package/cjs/filter-bar/FilterBar.js.map +1 -1
- package/cjs/filter-clause/FilterClause.js +3 -3
- package/cjs/filter-clause/FilterClause.js.map +1 -1
- package/cjs/filter-editor/FilterEditor.js +2 -2
- package/cjs/filter-editor/FilterEditor.js.map +1 -1
- package/cjs/quick-filters/QuickFilters.js +2 -2
- package/cjs/quick-filters/QuickFilters.js.map +1 -1
- package/esm/custom-filters/CustomFilters.js +3 -3
- package/esm/custom-filters/CustomFilters.js.map +1 -1
- package/esm/filter-bar/FilterBar.js +3 -4
- package/esm/filter-bar/FilterBar.js.map +1 -1
- package/esm/filter-clause/FilterClause.js +3 -3
- package/esm/filter-clause/FilterClause.js.map +1 -1
- package/esm/filter-editor/FilterEditor.js +2 -2
- package/esm/filter-editor/FilterEditor.js.map +1 -1
- package/esm/quick-filters/QuickFilters.js +2 -2
- package/esm/quick-filters/QuickFilters.js.map +1 -1
- package/package.json +11 -11
- package/types/custom-filters/CustomFilters.d.ts +2 -2
- package/types/filter-bar/FilterBar.d.ts +9 -9
- package/types/filter-clause/FilterClause.d.ts +3 -3
- package/types/filter-editor/FilterEditor.d.ts +3 -3
- package/types/quick-filters/QuickFilters.d.ts +2 -2
|
@@ -18,7 +18,7 @@ const CustomFilters = ({
|
|
|
18
18
|
onFilterDeleted,
|
|
19
19
|
onFilterRenamed,
|
|
20
20
|
onFilterStateChanged,
|
|
21
|
-
|
|
21
|
+
vuuTable
|
|
22
22
|
}) => {
|
|
23
23
|
const rootRef = react.useRef(null);
|
|
24
24
|
const {
|
|
@@ -90,14 +90,14 @@ const CustomFilters = ({
|
|
|
90
90
|
}
|
|
91
91
|
) : null
|
|
92
92
|
] }),
|
|
93
|
-
filterModel &&
|
|
93
|
+
filterModel && vuuTable && /* @__PURE__ */ jsxRuntime.jsx(
|
|
94
94
|
FilterEditor.FilterEditor,
|
|
95
95
|
{
|
|
96
96
|
columnDescriptors,
|
|
97
97
|
onCancel: onCancelEdit,
|
|
98
98
|
onSave,
|
|
99
99
|
filter: interactedFilterState?.filter,
|
|
100
|
-
|
|
100
|
+
vuuTable
|
|
101
101
|
},
|
|
102
102
|
"filter-editor"
|
|
103
103
|
)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CustomFilters.js","sources":["../../src/custom-filters/CustomFilters.tsx"],"sourcesContent":["import { Prompt } from \"@vuu-ui/vuu-popups\";\nimport type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport { HTMLAttributes, ReactElement, useRef } from \"react\";\nimport { type FilterBarProps } from \"../filter-bar\";\nimport { FilterEditor } from \"../filter-editor\";\nimport { FilterPill } from \"../filter-pill\";\nimport { FilterModel } from \"../FilterModel\";\nimport { isEditFilterState, useCustomFilters } from \"./useCustomFilters\";\n\nconst classBase = \"vuuCustomFilters\";\n\nexport interface CustomFilterProps\n extends HTMLAttributes<HTMLDivElement>,\n Pick<\n FilterBarProps,\n | \"defaultFilterState\"\n | \"filterState\"\n | \"onApplyFilter\"\n | \"onFilterDeleted\"\n | \"onFilterRenamed\"\n | \"onFilterStateChanged\"\n | \"
|
|
1
|
+
{"version":3,"file":"CustomFilters.js","sources":["../../src/custom-filters/CustomFilters.tsx"],"sourcesContent":["import { Prompt } from \"@vuu-ui/vuu-popups\";\nimport type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport { HTMLAttributes, ReactElement, useRef } from \"react\";\nimport { type FilterBarProps } from \"../filter-bar\";\nimport { FilterEditor } from \"../filter-editor\";\nimport { FilterPill } from \"../filter-pill\";\nimport { FilterModel } from \"../FilterModel\";\nimport { isEditFilterState, useCustomFilters } from \"./useCustomFilters\";\n\nconst classBase = \"vuuCustomFilters\";\n\nexport interface CustomFilterProps\n extends HTMLAttributes<HTMLDivElement>,\n Pick<\n FilterBarProps,\n | \"defaultFilterState\"\n | \"filterState\"\n | \"onApplyFilter\"\n | \"onFilterDeleted\"\n | \"onFilterRenamed\"\n | \"onFilterStateChanged\"\n | \"vuuTable\"\n > {\n columnDescriptors: ColumnDescriptor[];\n}\n\nexport const CustomFilters = ({\n columnDescriptors,\n defaultFilterState,\n filterState,\n onApplyFilter,\n onFilterDeleted,\n onFilterRenamed,\n onFilterStateChanged,\n vuuTable,\n}: CustomFilterProps) => {\n const rootRef = useRef<HTMLDivElement>(null);\n\n const {\n activeFilterIndex,\n addButtonProps,\n columnsByName,\n filters,\n interactedFilterState,\n onCancelEdit,\n onSave,\n FilterPillProps,\n promptProps,\n } = useCustomFilters({\n containerRef: rootRef,\n columnDescriptors,\n defaultFilterState,\n filterState,\n onApplyFilter,\n onFilterStateChanged,\n onFilterDeleted,\n onFilterRenamed,\n });\n\n const indexOfFilterBeingRenamed =\n interactedFilterState?.state === \"rename\"\n ? interactedFilterState.index\n : -1;\n\n const filterModel = isEditFilterState(interactedFilterState?.state)\n ? new FilterModel(interactedFilterState.filter)\n : undefined;\n\n const getFilterPills = () => {\n const items: ReactElement[] = [];\n filters.forEach((filter, i) => {\n items.push(\n <FilterPill\n {...FilterPillProps}\n editing={indexOfFilterBeingRenamed === i}\n columnsByName={columnsByName}\n data-index={i}\n filter={filter}\n key={`filter-${i}`}\n selected={activeFilterIndex.includes(i)}\n />,\n );\n });\n return items;\n };\n\n return (\n <>\n <div className=\"vuuCustomFilters\" ref={rootRef}>\n <div className={`${classBase}-filters`}>{getFilterPills()}</div>\n <IconButton\n {...addButtonProps}\n aria-label=\"Add filter\"\n data-selectable={false}\n icon=\"plus\"\n key=\"filter-add\"\n tabIndex={0}\n variant=\"secondary\"\n />\n\n {promptProps ? (\n <Prompt\n {...promptProps}\n PopupProps={{\n anchorElement: rootRef,\n offsetTop: 16,\n placement: \"below-center\",\n }}\n />\n ) : null}\n </div>\n {filterModel && vuuTable && (\n <FilterEditor\n columnDescriptors={columnDescriptors}\n key=\"filter-editor\"\n onCancel={onCancelEdit}\n onSave={onSave}\n filter={interactedFilterState?.filter}\n vuuTable={vuuTable}\n />\n )}\n </>\n );\n};\n"],"names":["useRef","useCustomFilters","isEditFilterState","FilterModel","createElement","FilterPill","jsxs","Fragment","jsx","IconButton","Prompt","FilterEditor"],"mappings":";;;;;;;;;;;AAUA,MAAM,SAAY,GAAA,kBAAA;AAiBX,MAAM,gBAAgB,CAAC;AAAA,EAC5B,iBAAA;AAAA,EACA,kBAAA;AAAA,EACA,WAAA;AAAA,EACA,aAAA;AAAA,EACA,eAAA;AAAA,EACA,eAAA;AAAA,EACA,oBAAA;AAAA,EACA;AACF,CAAyB,KAAA;AACvB,EAAM,MAAA,OAAA,GAAUA,aAAuB,IAAI,CAAA;AAE3C,EAAM,MAAA;AAAA,IACJ,iBAAA;AAAA,IACA,cAAA;AAAA,IACA,aAAA;AAAA,IACA,OAAA;AAAA,IACA,qBAAA;AAAA,IACA,YAAA;AAAA,IACA,MAAA;AAAA,IACA,eAAA;AAAA,IACA;AAAA,MACEC,iCAAiB,CAAA;AAAA,IACnB,YAAc,EAAA,OAAA;AAAA,IACd,iBAAA;AAAA,IACA,kBAAA;AAAA,IACA,WAAA;AAAA,IACA,aAAA;AAAA,IACA,oBAAA;AAAA,IACA,eAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,MAAM,yBACJ,GAAA,qBAAA,EAAuB,KAAU,KAAA,QAAA,GAC7B,sBAAsB,KACtB,GAAA,CAAA,CAAA;AAEN,EAAM,MAAA,WAAA,GAAcC,mCAAkB,qBAAuB,EAAA,KAAK,IAC9D,IAAIC,uBAAA,CAAY,qBAAsB,CAAA,MAAM,CAC5C,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,iBAAiB,MAAM;AAC3B,IAAA,MAAM,QAAwB,EAAC;AAC/B,IAAQ,OAAA,CAAA,OAAA,CAAQ,CAAC,MAAA,EAAQ,CAAM,KAAA;AAC7B,MAAM,KAAA,CAAA,IAAA;AAAA,wBACJC,mBAAA;AAAA,UAACC,qBAAA;AAAA,UAAA;AAAA,YACE,GAAG,eAAA;AAAA,YACJ,SAAS,yBAA8B,KAAA,CAAA;AAAA,YACvC,aAAA;AAAA,YACA,YAAY,EAAA,CAAA;AAAA,YACZ,MAAA;AAAA,YACA,GAAA,EAAK,UAAU,CAAC,CAAA,CAAA;AAAA,YAChB,QAAA,EAAU,iBAAkB,CAAA,QAAA,CAAS,CAAC;AAAA;AAAA;AACxC,OACF;AAAA,KACD,CAAA;AACD,IAAO,OAAA,KAAA;AAAA,GACT;AAEA,EAAA,uBAEIC,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAAD,eAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,kBAAmB,EAAA,GAAA,EAAK,OACrC,EAAA,QAAA,EAAA;AAAA,sBAAAE,cAAA,CAAC,SAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAAA,QAAA,CAAA,EAAa,0BAAiB,EAAA,CAAA;AAAA,sBAC1DJ,mBAAA;AAAA,QAACK,wBAAA;AAAA,QAAA;AAAA,UACE,GAAG,cAAA;AAAA,UACJ,YAAW,EAAA,YAAA;AAAA,UACX,iBAAiB,EAAA,KAAA;AAAA,UACjB,IAAK,EAAA,MAAA;AAAA,UACL,GAAI,EAAA,YAAA;AAAA,UACJ,QAAU,EAAA,CAAA;AAAA,UACV,OAAQ,EAAA;AAAA;AAAA,OACV;AAAA,MAEC,WACC,mBAAAD,cAAA;AAAA,QAACE,gBAAA;AAAA,QAAA;AAAA,UACE,GAAG,WAAA;AAAA,UACJ,UAAY,EAAA;AAAA,YACV,aAAe,EAAA,OAAA;AAAA,YACf,SAAW,EAAA,EAAA;AAAA,YACX,SAAW,EAAA;AAAA;AACb;AAAA,OAEA,GAAA;AAAA,KACN,EAAA,CAAA;AAAA,IACC,eAAe,QACd,oBAAAF,cAAA;AAAA,MAACG,yBAAA;AAAA,MAAA;AAAA,QACC,iBAAA;AAAA,QAEA,QAAU,EAAA,YAAA;AAAA,QACV,MAAA;AAAA,QACA,QAAQ,qBAAuB,EAAA,MAAA;AAAA,QAC/B;AAAA,OAAA;AAAA,MAJI;AAAA;AAKN,GAEJ,EAAA,CAAA;AAEJ;;;;"}
|
|
@@ -26,8 +26,7 @@ const FilterBar = ({
|
|
|
26
26
|
onFilterDeleted,
|
|
27
27
|
onFilterRenamed,
|
|
28
28
|
onFilterStateChanged,
|
|
29
|
-
|
|
30
|
-
tableSchema,
|
|
29
|
+
vuuTable,
|
|
31
30
|
variant = "custom-filters-only",
|
|
32
31
|
...htmlAttributes
|
|
33
32
|
}) => {
|
|
@@ -101,7 +100,7 @@ const FilterBar = ({
|
|
|
101
100
|
onFilterDeleted,
|
|
102
101
|
onFilterRenamed,
|
|
103
102
|
onFilterStateChanged,
|
|
104
|
-
|
|
103
|
+
vuuTable
|
|
105
104
|
}
|
|
106
105
|
) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
107
106
|
QuickFilters.QuickFilters,
|
|
@@ -109,7 +108,7 @@ const FilterBar = ({
|
|
|
109
108
|
...QuickFilterProps2,
|
|
110
109
|
availableColumns: columnDescriptors,
|
|
111
110
|
onApplyFilter,
|
|
112
|
-
|
|
111
|
+
vuuTable
|
|
113
112
|
}
|
|
114
113
|
)
|
|
115
114
|
]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterBar.js","sources":["../../src/filter-bar/FilterBar.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"FilterBar.js","sources":["../../src/filter-bar/FilterBar.tsx"],"sourcesContent":["import { DataSourceFilter } from \"@vuu-ui/vuu-data-types\";\nimport { Filter, FilterState } from \"@vuu-ui/vuu-filter-types\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { Icon } from \"@vuu-ui/vuu-ui-controls\";\nimport { ToggleButton, ToggleButtonGroup } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, useMemo } from \"react\";\nimport { CustomFilters } from \"../custom-filters\";\nimport { QuickFilterProps, QuickFilters } from \"../quick-filters\";\nimport { FilterMode, useFilterBar } from \"./useFilterBar\";\n\nimport filterBarCss from \"./FilterBar.css\";\nimport { VuuTable } from \"@vuu-ui/vuu-protocol-types\";\n\nexport type FilterBarVariant =\n | \"custom-filters-only\"\n | \"quick-filters-only\"\n | \"full-filters\";\n\nexport interface FilterBarProps extends HTMLAttributes<HTMLDivElement> {\n QuickFilterProps?: Pick<\n QuickFilterProps,\n \"quickFilterColumns\" | \"onChangeQuickFilterColumns\"\n >;\n /**\n * Used to ensure we present filter editors appropriate to the data type of column.\n * NOTE: Always make sure that these are passed with proper re-render optimization (i.e make\n * sure its a stable reference, in React terminology), otherwise might end up with infinite\n * state updates.\n */\n columnDescriptors: ColumnDescriptor[];\n defaultFilterMode?: FilterMode;\n defaultFilterState?: FilterState;\n filterMode?: FilterMode;\n filterState?: FilterState;\n onApplyFilter: (filter: DataSourceFilter) => void;\n onChangeFilterMode?: (filterMode: FilterMode) => void;\n onFilterDeleted?: (filter: Filter) => void;\n onFilterRenamed?: (filter: Filter, name: string) => void;\n onFilterStateChanged?: (state: FilterState) => void;\n /**\n * Defines table used in call to Vuu Typeahead service\n */\n vuuTable?: VuuTable;\n variant?: FilterBarVariant;\n}\n\nconst classBase = \"vuuFilterBar\";\n\nexport const FilterBar = ({\n QuickFilterProps,\n className: classNameProp,\n columnDescriptors,\n defaultFilterMode,\n defaultFilterState,\n filterMode: filterModeProp,\n filterState,\n onApplyFilter,\n onChangeFilterMode: onChangeFilterModeProp,\n onFilterDeleted,\n onFilterRenamed,\n onFilterStateChanged,\n vuuTable,\n variant = \"custom-filters-only\",\n ...htmlAttributes\n}: FilterBarProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-filter-bar\",\n css: filterBarCss,\n window: targetWindow,\n });\n\n const allowCustomFilters = variant !== \"quick-filters-only\";\n const allowQuickFilters = variant !== \"custom-filters-only\";\n\n const controlledFilterMode: FilterMode | undefined = !allowCustomFilters\n ? \"quick-filter\"\n : !allowQuickFilters\n ? \"custom-filter\"\n : filterModeProp;\n\n const { filterMode, onChangeFilterMode } = useFilterBar({\n defaultFilterMode,\n filterMode: controlledFilterMode,\n onChangeFilterMode: onChangeFilterModeProp,\n });\n\n const className = cx(classBase, classNameProp);\n\n const startAdornment = useMemo(() => {\n if (!allowQuickFilters) {\n return <Icon name=\"filter\" size={16} style={{ top: 4 }} />;\n } else {\n return (\n <ToggleButtonGroup\n data-variant=\"secondary\"\n onChange={onChangeFilterMode}\n value={filterMode}\n >\n <ToggleButton\n className=\"vuuIconToggleButton\"\n key=\"custom-filter\"\n value=\"custom-filter\"\n aria-label=\"Custom filters\"\n tabIndex={-1}\n >\n <Icon name=\"grid\" size={16} />\n </ToggleButton>\n <ToggleButton\n className=\"vuuIconToggleButton\"\n key=\"quick-filter\"\n value=\"quick-filter\"\n aria-label=\"Quick filters\"\n tabIndex={-1}\n >\n <Icon name=\"tune\" size={16} />\n </ToggleButton>\n </ToggleButtonGroup>\n );\n }\n }, [allowQuickFilters, filterMode, onChangeFilterMode]);\n\n return (\n <div\n {...htmlAttributes}\n className={cx(className, `${classBase}-${filterMode}-mode`)}\n >\n {variant === \"quick-filters-only\" ? null : (\n <div className={`${classBase}-iconContainer`}>{startAdornment}</div>\n )}\n {filterMode === \"custom-filter\" ? (\n <CustomFilters\n columnDescriptors={columnDescriptors}\n defaultFilterState={defaultFilterState}\n filterState={filterState}\n onApplyFilter={onApplyFilter}\n onFilterDeleted={onFilterDeleted}\n onFilterRenamed={onFilterRenamed}\n onFilterStateChanged={onFilterStateChanged}\n vuuTable={vuuTable}\n />\n ) : (\n <QuickFilters\n {...QuickFilterProps}\n availableColumns={columnDescriptors}\n onApplyFilter={onApplyFilter}\n vuuTable={vuuTable}\n />\n )}\n </div>\n );\n};\n"],"names":["QuickFilterProps","useWindow","useComponentCssInjection","filterBarCss","useFilterBar","useMemo","jsx","Icon","jsxs","ToggleButtonGroup","ToggleButton","CustomFilters","QuickFilters"],"mappings":"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"}
|
|
@@ -5,9 +5,9 @@ var styles = require('@salt-ds/styles');
|
|
|
5
5
|
var window = require('@salt-ds/window');
|
|
6
6
|
var cx = require('clsx');
|
|
7
7
|
var react = require('react');
|
|
8
|
+
var ColumnPicker = require('./ColumnPicker.js');
|
|
8
9
|
var useFilterClause = require('./useFilterClause.js');
|
|
9
10
|
var FilterClauseValueEditor = require('./value-editors/FilterClauseValueEditor.js');
|
|
10
|
-
var ColumnPicker = require('./ColumnPicker.js');
|
|
11
11
|
var FilterClause$1 = require('./FilterClause.css.js');
|
|
12
12
|
var OperatorPicker = require('./OperatorPicker.js');
|
|
13
13
|
|
|
@@ -20,7 +20,7 @@ const FilterClause = ({
|
|
|
20
20
|
onDropdownOpen,
|
|
21
21
|
onFocusSave,
|
|
22
22
|
filterClauseModel,
|
|
23
|
-
|
|
23
|
+
vuuTable,
|
|
24
24
|
...htmlAttributes
|
|
25
25
|
}) => {
|
|
26
26
|
const {
|
|
@@ -83,7 +83,7 @@ const FilterClause = ({
|
|
|
83
83
|
operator: filterClauseModel.op,
|
|
84
84
|
ref: valueRef,
|
|
85
85
|
selectedColumn,
|
|
86
|
-
table:
|
|
86
|
+
table: vuuTable,
|
|
87
87
|
value: filterClause?.values ?? filterClause?.value
|
|
88
88
|
},
|
|
89
89
|
"value-field"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterClause.js","sources":["../../src/filter-clause/FilterClause.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"FilterClause.js","sources":["../../src/filter-clause/FilterClause.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n ColumnDescriptorsByName,\n MultiValueFilterClause,\n SingleValueFilterClause,\n} from \"@vuu-ui/vuu-filter-types\";\nimport { CloseReason } from \"@vuu-ui/vuu-ui-controls\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, useMemo } from \"react\";\nimport { FilterClauseModel } from \"../FilterModel\";\nimport { ColumnPicker } from \"./ColumnPicker\";\nimport { useFilterClause } from \"./useFilterClause\";\nimport { FilterClauseValueEditor } from \"./value-editors/FilterClauseValueEditor\";\n\nimport { VuuTable } from \"@vuu-ui/vuu-protocol-types\";\nimport filterClauseCss from \"./FilterClause.css\";\nimport { OperatorPicker } from \"./OperatorPicker\";\n\nexport type FilterClauseCancelType = \"Backspace\" | \"Escape\";\nexport type FilterClauseCancelHandler = (\n filterClause: FilterClauseModel,\n reason: FilterClauseCancelType,\n) => void;\n\nexport interface FilterClauseProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n columnsByName: ColumnDescriptorsByName;\n filterClauseModel: FilterClauseModel;\n onCancel?: FilterClauseCancelHandler;\n onDropdownClose?: (closeReason: CloseReason) => void;\n onDropdownOpen?: () => void;\n onFocusSave?: () => void;\n vuuTable: VuuTable;\n}\n\nconst classBase = \"vuuFilterClause\";\n\nexport const FilterClause = ({\n className,\n columnsByName,\n onCancel,\n onDropdownClose,\n onDropdownOpen,\n onFocusSave,\n filterClauseModel,\n vuuTable,\n ...htmlAttributes\n}: FilterClauseProps) => {\n const {\n inputProps,\n columnRef,\n filterClause,\n onChangeValue,\n onSelectColumn,\n onSelectOperator,\n onDeselectValue,\n operatorRef,\n selectedColumn,\n valueRef,\n } = useFilterClause({\n filterClauseModel,\n onCancel,\n onFocusSave,\n columnsByName,\n });\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-filter-clause\",\n css: filterClauseCss,\n window: targetWindow,\n });\n\n const columns = useMemo(() => Object.values(columnsByName), [columnsByName]);\n\n return (\n <div className={cx(classBase, className)} {...htmlAttributes} tabIndex={0}>\n <ColumnPicker\n inputProps={inputProps}\n className={cx(`${classBase}Field`, `${classBase}Column`)}\n columns={columns}\n key=\"column-field\"\n onSelect={onSelectColumn}\n ref={columnRef}\n value={filterClauseModel.column ?? \"\"}\n />\n {selectedColumn?.name ? (\n <OperatorPicker\n column={selectedColumn}\n inputProps={inputProps}\n className={cx(`${classBase}Field`, `${classBase}Operator`, {\n [`${classBase}Operator-hidden`]: selectedColumn === null,\n })}\n key=\"operator-field\"\n onSelect={onSelectOperator}\n ref={operatorRef}\n value={filterClauseModel.op ?? \"\"}\n />\n ) : null}\n {filterClauseModel.op ? (\n <FilterClauseValueEditor\n inputProps={inputProps}\n key=\"value-field\"\n onChangeValue={onChangeValue}\n onDeselectValue={onDeselectValue}\n operator={filterClauseModel.op}\n ref={valueRef}\n selectedColumn={selectedColumn}\n table={vuuTable}\n value={\n (filterClause as MultiValueFilterClause)?.values ??\n (filterClause as SingleValueFilterClause)?.value\n }\n />\n ) : null}\n </div>\n );\n};\n"],"names":["useFilterClause","useWindow","useComponentCssInjection","filterClauseCss","useMemo","jsxs","jsx","ColumnPicker","OperatorPicker","FilterClauseValueEditor"],"mappings":";;;;;;;;;;;;;AAoCA,MAAM,SAAY,GAAA,iBAAA;AAEX,MAAM,eAAe,CAAC;AAAA,EAC3B,SAAA;AAAA,EACA,aAAA;AAAA,EACA,QAAA;AAAA,EACA,eAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAA;AAAA,EACA,iBAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAyB,KAAA;AACvB,EAAM,MAAA;AAAA,IACJ,UAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA;AAAA,IACA,aAAA;AAAA,IACA,cAAA;AAAA,IACA,gBAAA;AAAA,IACA,eAAA;AAAA,IACA,WAAA;AAAA,IACA,cAAA;AAAA,IACA;AAAA,MACEA,+BAAgB,CAAA;AAAA,IAClB,iBAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAC,cAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,OAAA,GAAUC,cAAQ,MAAM,MAAA,CAAO,OAAO,aAAa,CAAA,EAAG,CAAC,aAAa,CAAC,CAAA;AAE3E,EACE,uBAAAC,eAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAI,EAAA,GAAG,cAAgB,EAAA,QAAA,EAAU,CACtE,EAAA,QAAA,EAAA;AAAA,oBAAAC,cAAA;AAAA,MAACC,yBAAA;AAAA,MAAA;AAAA,QACC,UAAA;AAAA,QACA,WAAW,EAAG,CAAA,CAAA,EAAG,SAAS,CAAS,KAAA,CAAA,EAAA,CAAA,EAAG,SAAS,CAAQ,MAAA,CAAA,CAAA;AAAA,QACvD,OAAA;AAAA,QAEA,QAAU,EAAA,cAAA;AAAA,QACV,GAAK,EAAA,SAAA;AAAA,QACL,KAAA,EAAO,kBAAkB,MAAU,IAAA;AAAA,OAAA;AAAA,MAH/B;AAAA,KAIN;AAAA,IACC,gBAAgB,IACf,mBAAAD,cAAA;AAAA,MAACE,6BAAA;AAAA,MAAA;AAAA,QACC,MAAQ,EAAA,cAAA;AAAA,QACR,UAAA;AAAA,QACA,WAAW,EAAG,CAAA,CAAA,EAAG,SAAS,CAAS,KAAA,CAAA,EAAA,CAAA,EAAG,SAAS,CAAY,QAAA,CAAA,EAAA;AAAA,UACzD,CAAC,CAAA,EAAG,SAAS,CAAA,eAAA,CAAiB,GAAG,cAAmB,KAAA;AAAA,SACrD,CAAA;AAAA,QAED,QAAU,EAAA,gBAAA;AAAA,QACV,GAAK,EAAA,WAAA;AAAA,QACL,KAAA,EAAO,kBAAkB,EAAM,IAAA;AAAA,OAAA;AAAA,MAH3B;AAAA,KAKJ,GAAA,IAAA;AAAA,IACH,kBAAkB,EACjB,mBAAAF,cAAA;AAAA,MAACG,+CAAA;AAAA,MAAA;AAAA,QACC,UAAA;AAAA,QAEA,aAAA;AAAA,QACA,eAAA;AAAA,QACA,UAAU,iBAAkB,CAAA,EAAA;AAAA,QAC5B,GAAK,EAAA,QAAA;AAAA,QACL,cAAA;AAAA,QACA,KAAO,EAAA,QAAA;AAAA,QACP,KAAA,EACG,YAAyC,EAAA,MAAA,IACzC,YAA0C,EAAA;AAAA,OAAA;AAAA,MATzC;AAAA,KAYJ,GAAA;AAAA,GACN,EAAA,CAAA;AAEJ;;;;"}
|
|
@@ -20,7 +20,7 @@ const FilterEditor = ({
|
|
|
20
20
|
filter,
|
|
21
21
|
onCancel,
|
|
22
22
|
onSave,
|
|
23
|
-
|
|
23
|
+
vuuTable,
|
|
24
24
|
...htmlAttributes
|
|
25
25
|
}) => {
|
|
26
26
|
const targetWindow = window.useWindow();
|
|
@@ -72,7 +72,7 @@ const FilterEditor = ({
|
|
|
72
72
|
filterClauseModel,
|
|
73
73
|
onCancel: onCancelFilterClause,
|
|
74
74
|
onFocusSave: focusSaveButton,
|
|
75
|
-
|
|
75
|
+
vuuTable
|
|
76
76
|
},
|
|
77
77
|
`editor-${i}`
|
|
78
78
|
)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterEditor.js","sources":["../../src/filter-editor/FilterEditor.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"FilterEditor.js","sources":["../../src/filter-editor/FilterEditor.tsx"],"sourcesContent":["import type { Filter } from \"@vuu-ui/vuu-filter-types\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { SplitButton } from \"@vuu-ui/vuu-ui-controls\";\nimport { Button } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes } from \"react\";\nimport { FilterClauseModel } from \"../FilterModel\";\nimport { FilterClause } from \"../filter-clause\";\nimport { FilterClauseCombinator } from \"./FilterClauseCombinator\";\nimport { useFilterEditor } from \"./useFilterEditor\";\n\nimport filterEditorCss from \"./FilterEditor.css\";\nimport { VuuTable } from \"@vuu-ui/vuu-protocol-types\";\n\nconst classBase = \"vuuFilterEditor\";\n\nexport type FilterEditSaveHandler = (filter: Filter) => void;\nexport type FilterEditCancelHandler = (filter?: Filter) => void;\n\nexport interface FilterEditorProps extends HTMLAttributes<HTMLDivElement> {\n columnDescriptors: ColumnDescriptor[];\n filter?: Filter;\n onCancel: FilterEditCancelHandler;\n onSave: FilterEditSaveHandler;\n vuuTable: VuuTable;\n}\n\nexport const FilterEditor = ({\n columnDescriptors,\n filter,\n onCancel,\n onSave,\n vuuTable,\n ...htmlAttributes\n}: FilterEditorProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-filter-editor\",\n css: filterEditorCss,\n window: targetWindow,\n });\n\n const {\n columnsByName,\n filterModel,\n focusSaveButton,\n setContainer,\n onCancelFilterClause,\n onCancelFilterEdit,\n onChangeFilterCombinator,\n onKeyDownCombinator,\n saveButtonRef,\n saveButtonProps,\n } = useFilterEditor({\n columnDescriptors,\n filter,\n onCancel,\n onSave,\n });\n\n const getContents = () => {\n const { op } = filterModel;\n\n const content: JSX.Element[] = [];\n filterModel.filterClauses.forEach((filterClauseModel, i) => {\n if (i > 0 && op) {\n content.push(\n <FilterClauseCombinator\n key={`filter-operator-${i}`}\n onChange={onChangeFilterCombinator}\n onKeyDown={onKeyDownCombinator}\n operator={op}\n />,\n );\n }\n content.push(\n <FilterClause\n columnsByName={columnsByName}\n data-index={i}\n filterClauseModel={filterClauseModel as FilterClauseModel}\n key={`editor-${i}`}\n onCancel={onCancelFilterClause}\n onFocusSave={focusSaveButton}\n vuuTable={vuuTable}\n />,\n );\n });\n return content;\n };\n\n return (\n <div {...htmlAttributes} className={classBase} ref={setContainer}>\n {getContents()}\n <SplitButton\n {...saveButtonProps}\n disabled={!filterModel.isValid}\n key=\"save-button\"\n ref={saveButtonRef}\n >\n Save\n </SplitButton>\n <Button onClick={onCancelFilterEdit} variant=\"secondary\">\n Cancel\n </Button>\n </div>\n );\n};\n"],"names":["useWindow","useComponentCssInjection","filterEditorCss","useFilterEditor","jsx","FilterClauseCombinator","FilterClause","createElement","SplitButton","Button"],"mappings":";;;;;;;;;;;;;;;;AAeA,MAAM,SAAY,GAAA,iBAAA;AAaX,MAAM,eAAe,CAAC;AAAA,EAC3B,iBAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAyB,KAAA;AACvB,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAC,cAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA;AAAA,IACJ,aAAA;AAAA,IACA,WAAA;AAAA,IACA,eAAA;AAAA,IACA,YAAA;AAAA,IACA,oBAAA;AAAA,IACA,kBAAA;AAAA,IACA,wBAAA;AAAA,IACA,mBAAA;AAAA,IACA,aAAA;AAAA,IACA;AAAA,MACEC,+BAAgB,CAAA;AAAA,IAClB,iBAAA;AAAA,IACA,MAAA;AAAA,IACA,QAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,MAAM,cAAc,MAAM;AACxB,IAAM,MAAA,EAAE,IAAO,GAAA,WAAA;AAEf,IAAA,MAAM,UAAyB,EAAC;AAChC,IAAA,WAAA,CAAY,aAAc,CAAA,OAAA,CAAQ,CAAC,iBAAA,EAAmB,CAAM,KAAA;AAC1D,MAAI,IAAA,CAAA,GAAI,KAAK,EAAI,EAAA;AACf,QAAQ,OAAA,CAAA,IAAA;AAAA,0BACNC,cAAA;AAAA,YAACC,6CAAA;AAAA,YAAA;AAAA,cAEC,QAAU,EAAA,wBAAA;AAAA,cACV,SAAW,EAAA,mBAAA;AAAA,cACX,QAAU,EAAA;AAAA,aAAA;AAAA,YAHL,mBAAmB,CAAC,CAAA;AAAA;AAI3B,SACF;AAAA;AAEF,MAAQ,OAAA,CAAA,IAAA;AAAA,wBACND,cAAA;AAAA,UAACE,yBAAA;AAAA,UAAA;AAAA,YACC,aAAA;AAAA,YACA,YAAY,EAAA,CAAA;AAAA,YACZ,iBAAA;AAAA,YAEA,QAAU,EAAA,oBAAA;AAAA,YACV,WAAa,EAAA,eAAA;AAAA,YACb;AAAA,WAAA;AAAA,UAHK,UAAU,CAAC,CAAA;AAAA;AAIlB,OACF;AAAA,KACD,CAAA;AACD,IAAO,OAAA,OAAA;AAAA,GACT;AAEA,EAAA,uCACG,KAAK,EAAA,EAAA,GAAG,gBAAgB,SAAW,EAAA,SAAA,EAAW,KAAK,YACjD,EAAA,QAAA,EAAA;AAAA,IAAY,WAAA,EAAA;AAAA,oBACbC,mBAAA;AAAA,MAACC,yBAAA;AAAA,MAAA;AAAA,QACE,GAAG,eAAA;AAAA,QACJ,QAAA,EAAU,CAAC,WAAY,CAAA,OAAA;AAAA,QACvB,GAAI,EAAA,aAAA;AAAA,QACJ,GAAK,EAAA;AAAA,OAAA;AAAA,MACN;AAAA,KAED;AAAA,mCACCC,WAAO,EAAA,EAAA,OAAA,EAAS,kBAAoB,EAAA,OAAA,EAAQ,aAAY,QAEzD,EAAA,QAAA,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}
|
|
@@ -17,7 +17,7 @@ const QuickFilters = ({
|
|
|
17
17
|
onApplyFilter,
|
|
18
18
|
onChangeQuickFilterColumns,
|
|
19
19
|
quickFilterColumns,
|
|
20
|
-
|
|
20
|
+
vuuTable
|
|
21
21
|
}) => {
|
|
22
22
|
const targetWindow = window.useWindow();
|
|
23
23
|
styles.useComponentCssInjection({
|
|
@@ -69,7 +69,7 @@ const QuickFilters = ({
|
|
|
69
69
|
vuuDataReact.getDataItemEditControl({
|
|
70
70
|
dataDescriptor: column,
|
|
71
71
|
onCommit,
|
|
72
|
-
table:
|
|
72
|
+
table: vuuTable
|
|
73
73
|
})
|
|
74
74
|
] }, column.label ?? column.name)
|
|
75
75
|
)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"QuickFilters.js","sources":["../../src/quick-filters/QuickFilters.tsx"],"sourcesContent":["import { getDataItemEditControl } from \"@vuu-ui/vuu-data-react\";\nimport type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { ColumnPicker, Icon, VuuInput } from \"@vuu-ui/vuu-ui-controls\";\nimport { FormField, FormFieldLabel } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport type { HTMLAttributes } from \"react\";\nimport { FilterBarProps } from \"../filter-bar\";\nimport { useQuickFilters } from \"./useQuickFilters\";\n\nimport quickFiltersCss from \"./QuickFilters.css\";\n\nconst classBase = \"vuuQuickFilters\";\n\nexport interface QuickFilterProps\n extends HTMLAttributes<HTMLDivElement>,\n Pick<FilterBarProps, \"onApplyFilter\" | \"
|
|
1
|
+
{"version":3,"file":"QuickFilters.js","sources":["../../src/quick-filters/QuickFilters.tsx"],"sourcesContent":["import { getDataItemEditControl } from \"@vuu-ui/vuu-data-react\";\nimport type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { ColumnPicker, Icon, VuuInput } from \"@vuu-ui/vuu-ui-controls\";\nimport { FormField, FormFieldLabel } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport type { HTMLAttributes } from \"react\";\nimport { FilterBarProps } from \"../filter-bar\";\nimport { useQuickFilters } from \"./useQuickFilters\";\n\nimport quickFiltersCss from \"./QuickFilters.css\";\n\nconst classBase = \"vuuQuickFilters\";\n\nexport interface QuickFilterProps\n extends HTMLAttributes<HTMLDivElement>,\n Pick<FilterBarProps, \"onApplyFilter\" | \"vuuTable\"> {\n allowAddColumn?: boolean;\n allowFind?: boolean;\n availableColumns: ColumnDescriptor[];\n onChangeQuickFilterColumns?: (columns: string[]) => void;\n quickFilterColumns?: string[];\n /**\n * Render a general 'search' control.\n * if true, all columns of type 'string' will be included in the search. Otherwise\n * a list of the columns to include in search can be provided.\n */\n showFind?: boolean | string[];\n}\n\nexport const QuickFilters = ({\n allowAddColumn = true,\n allowFind = true,\n availableColumns,\n onApplyFilter,\n onChangeQuickFilterColumns,\n quickFilterColumns,\n vuuTable,\n}: QuickFilterProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-quick-filters\",\n css: quickFiltersCss,\n window: targetWindow,\n });\n\n const searchIcon = <Icon name=\"search\" size={18} />;\n\n const {\n availableColumnNames,\n onChange,\n onColumnsSelectionChange,\n onCommit,\n rootRef,\n } = useQuickFilters({\n availableColumns,\n onApplyFilter,\n onChangeQuickFilterColumns,\n quickFilterColumns,\n });\n\n const filterColumns = availableColumns.filter(({ name }) =>\n quickFilterColumns?.includes(name),\n );\n\n const getFilterControls = () => {\n const controls = [];\n if (allowFind) {\n controls.push(\n <FormField data-embedded data-field=\"find\" key=\"find\">\n <FormFieldLabel>Find</FormFieldLabel>\n <VuuInput\n inputProps={{\n onChange,\n }}\n onCommit={onCommit}\n startAdornment={searchIcon}\n variant=\"secondary\"\n />\n </FormField>,\n );\n }\n {\n filterColumns?.forEach((column) =>\n controls.push(\n <FormField key={column.label ?? column.name} data-field={column.name}>\n <FormFieldLabel>{column.label ?? column.name}</FormFieldLabel>\n {getDataItemEditControl({\n dataDescriptor: column,\n onCommit,\n table: vuuTable,\n })}\n </FormField>,\n ),\n );\n }\n\n return controls;\n };\n\n return (\n <div className={classBase} ref={rootRef}>\n <div className={`${classBase}-filter-container`}>\n {getFilterControls()}\n </div>\n {allowAddColumn ? (\n <ColumnPicker\n columns={availableColumnNames}\n icon=\"more-horiz\"\n iconSize={16}\n onSelectionChange={onColumnsSelectionChange}\n selected={quickFilterColumns}\n />\n ) : null}\n </div>\n );\n};\n"],"names":["useWindow","useComponentCssInjection","quickFiltersCss","jsx","Icon","useQuickFilters","jsxs","FormField","FormFieldLabel","VuuInput","getDataItemEditControl","ColumnPicker"],"mappings":"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"}
|
|
@@ -16,7 +16,7 @@ const CustomFilters = ({
|
|
|
16
16
|
onFilterDeleted,
|
|
17
17
|
onFilterRenamed,
|
|
18
18
|
onFilterStateChanged,
|
|
19
|
-
|
|
19
|
+
vuuTable
|
|
20
20
|
}) => {
|
|
21
21
|
const rootRef = useRef(null);
|
|
22
22
|
const {
|
|
@@ -88,14 +88,14 @@ const CustomFilters = ({
|
|
|
88
88
|
}
|
|
89
89
|
) : null
|
|
90
90
|
] }),
|
|
91
|
-
filterModel &&
|
|
91
|
+
filterModel && vuuTable && /* @__PURE__ */ jsx(
|
|
92
92
|
FilterEditor,
|
|
93
93
|
{
|
|
94
94
|
columnDescriptors,
|
|
95
95
|
onCancel: onCancelEdit,
|
|
96
96
|
onSave,
|
|
97
97
|
filter: interactedFilterState?.filter,
|
|
98
|
-
|
|
98
|
+
vuuTable
|
|
99
99
|
},
|
|
100
100
|
"filter-editor"
|
|
101
101
|
)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CustomFilters.js","sources":["../../src/custom-filters/CustomFilters.tsx"],"sourcesContent":["import { Prompt } from \"@vuu-ui/vuu-popups\";\nimport type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport { HTMLAttributes, ReactElement, useRef } from \"react\";\nimport { type FilterBarProps } from \"../filter-bar\";\nimport { FilterEditor } from \"../filter-editor\";\nimport { FilterPill } from \"../filter-pill\";\nimport { FilterModel } from \"../FilterModel\";\nimport { isEditFilterState, useCustomFilters } from \"./useCustomFilters\";\n\nconst classBase = \"vuuCustomFilters\";\n\nexport interface CustomFilterProps\n extends HTMLAttributes<HTMLDivElement>,\n Pick<\n FilterBarProps,\n | \"defaultFilterState\"\n | \"filterState\"\n | \"onApplyFilter\"\n | \"onFilterDeleted\"\n | \"onFilterRenamed\"\n | \"onFilterStateChanged\"\n | \"
|
|
1
|
+
{"version":3,"file":"CustomFilters.js","sources":["../../src/custom-filters/CustomFilters.tsx"],"sourcesContent":["import { Prompt } from \"@vuu-ui/vuu-popups\";\nimport type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport { HTMLAttributes, ReactElement, useRef } from \"react\";\nimport { type FilterBarProps } from \"../filter-bar\";\nimport { FilterEditor } from \"../filter-editor\";\nimport { FilterPill } from \"../filter-pill\";\nimport { FilterModel } from \"../FilterModel\";\nimport { isEditFilterState, useCustomFilters } from \"./useCustomFilters\";\n\nconst classBase = \"vuuCustomFilters\";\n\nexport interface CustomFilterProps\n extends HTMLAttributes<HTMLDivElement>,\n Pick<\n FilterBarProps,\n | \"defaultFilterState\"\n | \"filterState\"\n | \"onApplyFilter\"\n | \"onFilterDeleted\"\n | \"onFilterRenamed\"\n | \"onFilterStateChanged\"\n | \"vuuTable\"\n > {\n columnDescriptors: ColumnDescriptor[];\n}\n\nexport const CustomFilters = ({\n columnDescriptors,\n defaultFilterState,\n filterState,\n onApplyFilter,\n onFilterDeleted,\n onFilterRenamed,\n onFilterStateChanged,\n vuuTable,\n}: CustomFilterProps) => {\n const rootRef = useRef<HTMLDivElement>(null);\n\n const {\n activeFilterIndex,\n addButtonProps,\n columnsByName,\n filters,\n interactedFilterState,\n onCancelEdit,\n onSave,\n FilterPillProps,\n promptProps,\n } = useCustomFilters({\n containerRef: rootRef,\n columnDescriptors,\n defaultFilterState,\n filterState,\n onApplyFilter,\n onFilterStateChanged,\n onFilterDeleted,\n onFilterRenamed,\n });\n\n const indexOfFilterBeingRenamed =\n interactedFilterState?.state === \"rename\"\n ? interactedFilterState.index\n : -1;\n\n const filterModel = isEditFilterState(interactedFilterState?.state)\n ? new FilterModel(interactedFilterState.filter)\n : undefined;\n\n const getFilterPills = () => {\n const items: ReactElement[] = [];\n filters.forEach((filter, i) => {\n items.push(\n <FilterPill\n {...FilterPillProps}\n editing={indexOfFilterBeingRenamed === i}\n columnsByName={columnsByName}\n data-index={i}\n filter={filter}\n key={`filter-${i}`}\n selected={activeFilterIndex.includes(i)}\n />,\n );\n });\n return items;\n };\n\n return (\n <>\n <div className=\"vuuCustomFilters\" ref={rootRef}>\n <div className={`${classBase}-filters`}>{getFilterPills()}</div>\n <IconButton\n {...addButtonProps}\n aria-label=\"Add filter\"\n data-selectable={false}\n icon=\"plus\"\n key=\"filter-add\"\n tabIndex={0}\n variant=\"secondary\"\n />\n\n {promptProps ? (\n <Prompt\n {...promptProps}\n PopupProps={{\n anchorElement: rootRef,\n offsetTop: 16,\n placement: \"below-center\",\n }}\n />\n ) : null}\n </div>\n {filterModel && vuuTable && (\n <FilterEditor\n columnDescriptors={columnDescriptors}\n key=\"filter-editor\"\n onCancel={onCancelEdit}\n onSave={onSave}\n filter={interactedFilterState?.filter}\n vuuTable={vuuTable}\n />\n )}\n </>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -24,8 +24,7 @@ const FilterBar = ({
|
|
|
24
24
|
onFilterDeleted,
|
|
25
25
|
onFilterRenamed,
|
|
26
26
|
onFilterStateChanged,
|
|
27
|
-
|
|
28
|
-
tableSchema,
|
|
27
|
+
vuuTable,
|
|
29
28
|
variant = "custom-filters-only",
|
|
30
29
|
...htmlAttributes
|
|
31
30
|
}) => {
|
|
@@ -99,7 +98,7 @@ const FilterBar = ({
|
|
|
99
98
|
onFilterDeleted,
|
|
100
99
|
onFilterRenamed,
|
|
101
100
|
onFilterStateChanged,
|
|
102
|
-
|
|
101
|
+
vuuTable
|
|
103
102
|
}
|
|
104
103
|
) : /* @__PURE__ */ jsx(
|
|
105
104
|
QuickFilters,
|
|
@@ -107,7 +106,7 @@ const FilterBar = ({
|
|
|
107
106
|
...QuickFilterProps2,
|
|
108
107
|
availableColumns: columnDescriptors,
|
|
109
108
|
onApplyFilter,
|
|
110
|
-
|
|
109
|
+
vuuTable
|
|
111
110
|
}
|
|
112
111
|
)
|
|
113
112
|
]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterBar.js","sources":["../../src/filter-bar/FilterBar.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"FilterBar.js","sources":["../../src/filter-bar/FilterBar.tsx"],"sourcesContent":["import { DataSourceFilter } from \"@vuu-ui/vuu-data-types\";\nimport { Filter, FilterState } from \"@vuu-ui/vuu-filter-types\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { Icon } from \"@vuu-ui/vuu-ui-controls\";\nimport { ToggleButton, ToggleButtonGroup } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, useMemo } from \"react\";\nimport { CustomFilters } from \"../custom-filters\";\nimport { QuickFilterProps, QuickFilters } from \"../quick-filters\";\nimport { FilterMode, useFilterBar } from \"./useFilterBar\";\n\nimport filterBarCss from \"./FilterBar.css\";\nimport { VuuTable } from \"@vuu-ui/vuu-protocol-types\";\n\nexport type FilterBarVariant =\n | \"custom-filters-only\"\n | \"quick-filters-only\"\n | \"full-filters\";\n\nexport interface FilterBarProps extends HTMLAttributes<HTMLDivElement> {\n QuickFilterProps?: Pick<\n QuickFilterProps,\n \"quickFilterColumns\" | \"onChangeQuickFilterColumns\"\n >;\n /**\n * Used to ensure we present filter editors appropriate to the data type of column.\n * NOTE: Always make sure that these are passed with proper re-render optimization (i.e make\n * sure its a stable reference, in React terminology), otherwise might end up with infinite\n * state updates.\n */\n columnDescriptors: ColumnDescriptor[];\n defaultFilterMode?: FilterMode;\n defaultFilterState?: FilterState;\n filterMode?: FilterMode;\n filterState?: FilterState;\n onApplyFilter: (filter: DataSourceFilter) => void;\n onChangeFilterMode?: (filterMode: FilterMode) => void;\n onFilterDeleted?: (filter: Filter) => void;\n onFilterRenamed?: (filter: Filter, name: string) => void;\n onFilterStateChanged?: (state: FilterState) => void;\n /**\n * Defines table used in call to Vuu Typeahead service\n */\n vuuTable?: VuuTable;\n variant?: FilterBarVariant;\n}\n\nconst classBase = \"vuuFilterBar\";\n\nexport const FilterBar = ({\n QuickFilterProps,\n className: classNameProp,\n columnDescriptors,\n defaultFilterMode,\n defaultFilterState,\n filterMode: filterModeProp,\n filterState,\n onApplyFilter,\n onChangeFilterMode: onChangeFilterModeProp,\n onFilterDeleted,\n onFilterRenamed,\n onFilterStateChanged,\n vuuTable,\n variant = \"custom-filters-only\",\n ...htmlAttributes\n}: FilterBarProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-filter-bar\",\n css: filterBarCss,\n window: targetWindow,\n });\n\n const allowCustomFilters = variant !== \"quick-filters-only\";\n const allowQuickFilters = variant !== \"custom-filters-only\";\n\n const controlledFilterMode: FilterMode | undefined = !allowCustomFilters\n ? \"quick-filter\"\n : !allowQuickFilters\n ? \"custom-filter\"\n : filterModeProp;\n\n const { filterMode, onChangeFilterMode } = useFilterBar({\n defaultFilterMode,\n filterMode: controlledFilterMode,\n onChangeFilterMode: onChangeFilterModeProp,\n });\n\n const className = cx(classBase, classNameProp);\n\n const startAdornment = useMemo(() => {\n if (!allowQuickFilters) {\n return <Icon name=\"filter\" size={16} style={{ top: 4 }} />;\n } else {\n return (\n <ToggleButtonGroup\n data-variant=\"secondary\"\n onChange={onChangeFilterMode}\n value={filterMode}\n >\n <ToggleButton\n className=\"vuuIconToggleButton\"\n key=\"custom-filter\"\n value=\"custom-filter\"\n aria-label=\"Custom filters\"\n tabIndex={-1}\n >\n <Icon name=\"grid\" size={16} />\n </ToggleButton>\n <ToggleButton\n className=\"vuuIconToggleButton\"\n key=\"quick-filter\"\n value=\"quick-filter\"\n aria-label=\"Quick filters\"\n tabIndex={-1}\n >\n <Icon name=\"tune\" size={16} />\n </ToggleButton>\n </ToggleButtonGroup>\n );\n }\n }, [allowQuickFilters, filterMode, onChangeFilterMode]);\n\n return (\n <div\n {...htmlAttributes}\n className={cx(className, `${classBase}-${filterMode}-mode`)}\n >\n {variant === \"quick-filters-only\" ? null : (\n <div className={`${classBase}-iconContainer`}>{startAdornment}</div>\n )}\n {filterMode === \"custom-filter\" ? (\n <CustomFilters\n columnDescriptors={columnDescriptors}\n defaultFilterState={defaultFilterState}\n filterState={filterState}\n onApplyFilter={onApplyFilter}\n onFilterDeleted={onFilterDeleted}\n onFilterRenamed={onFilterRenamed}\n onFilterStateChanged={onFilterStateChanged}\n vuuTable={vuuTable}\n />\n ) : (\n <QuickFilters\n {...QuickFilterProps}\n availableColumns={columnDescriptors}\n onApplyFilter={onApplyFilter}\n vuuTable={vuuTable}\n />\n )}\n </div>\n );\n};\n"],"names":["QuickFilterProps"],"mappings":"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"}
|
|
@@ -3,9 +3,9 @@ import { useComponentCssInjection } from '@salt-ds/styles';
|
|
|
3
3
|
import { useWindow } from '@salt-ds/window';
|
|
4
4
|
import cx from 'clsx';
|
|
5
5
|
import { useMemo } from 'react';
|
|
6
|
+
import { ColumnPicker } from './ColumnPicker.js';
|
|
6
7
|
import { useFilterClause } from './useFilterClause.js';
|
|
7
8
|
import { FilterClauseValueEditor } from './value-editors/FilterClauseValueEditor.js';
|
|
8
|
-
import { ColumnPicker } from './ColumnPicker.js';
|
|
9
9
|
import filterClauseCss from './FilterClause.css.js';
|
|
10
10
|
import { OperatorPicker } from './OperatorPicker.js';
|
|
11
11
|
|
|
@@ -18,7 +18,7 @@ const FilterClause = ({
|
|
|
18
18
|
onDropdownOpen,
|
|
19
19
|
onFocusSave,
|
|
20
20
|
filterClauseModel,
|
|
21
|
-
|
|
21
|
+
vuuTable,
|
|
22
22
|
...htmlAttributes
|
|
23
23
|
}) => {
|
|
24
24
|
const {
|
|
@@ -81,7 +81,7 @@ const FilterClause = ({
|
|
|
81
81
|
operator: filterClauseModel.op,
|
|
82
82
|
ref: valueRef,
|
|
83
83
|
selectedColumn,
|
|
84
|
-
table:
|
|
84
|
+
table: vuuTable,
|
|
85
85
|
value: filterClause?.values ?? filterClause?.value
|
|
86
86
|
},
|
|
87
87
|
"value-field"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterClause.js","sources":["../../src/filter-clause/FilterClause.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"FilterClause.js","sources":["../../src/filter-clause/FilterClause.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n ColumnDescriptorsByName,\n MultiValueFilterClause,\n SingleValueFilterClause,\n} from \"@vuu-ui/vuu-filter-types\";\nimport { CloseReason } from \"@vuu-ui/vuu-ui-controls\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, useMemo } from \"react\";\nimport { FilterClauseModel } from \"../FilterModel\";\nimport { ColumnPicker } from \"./ColumnPicker\";\nimport { useFilterClause } from \"./useFilterClause\";\nimport { FilterClauseValueEditor } from \"./value-editors/FilterClauseValueEditor\";\n\nimport { VuuTable } from \"@vuu-ui/vuu-protocol-types\";\nimport filterClauseCss from \"./FilterClause.css\";\nimport { OperatorPicker } from \"./OperatorPicker\";\n\nexport type FilterClauseCancelType = \"Backspace\" | \"Escape\";\nexport type FilterClauseCancelHandler = (\n filterClause: FilterClauseModel,\n reason: FilterClauseCancelType,\n) => void;\n\nexport interface FilterClauseProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n columnsByName: ColumnDescriptorsByName;\n filterClauseModel: FilterClauseModel;\n onCancel?: FilterClauseCancelHandler;\n onDropdownClose?: (closeReason: CloseReason) => void;\n onDropdownOpen?: () => void;\n onFocusSave?: () => void;\n vuuTable: VuuTable;\n}\n\nconst classBase = \"vuuFilterClause\";\n\nexport const FilterClause = ({\n className,\n columnsByName,\n onCancel,\n onDropdownClose,\n onDropdownOpen,\n onFocusSave,\n filterClauseModel,\n vuuTable,\n ...htmlAttributes\n}: FilterClauseProps) => {\n const {\n inputProps,\n columnRef,\n filterClause,\n onChangeValue,\n onSelectColumn,\n onSelectOperator,\n onDeselectValue,\n operatorRef,\n selectedColumn,\n valueRef,\n } = useFilterClause({\n filterClauseModel,\n onCancel,\n onFocusSave,\n columnsByName,\n });\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-filter-clause\",\n css: filterClauseCss,\n window: targetWindow,\n });\n\n const columns = useMemo(() => Object.values(columnsByName), [columnsByName]);\n\n return (\n <div className={cx(classBase, className)} {...htmlAttributes} tabIndex={0}>\n <ColumnPicker\n inputProps={inputProps}\n className={cx(`${classBase}Field`, `${classBase}Column`)}\n columns={columns}\n key=\"column-field\"\n onSelect={onSelectColumn}\n ref={columnRef}\n value={filterClauseModel.column ?? \"\"}\n />\n {selectedColumn?.name ? (\n <OperatorPicker\n column={selectedColumn}\n inputProps={inputProps}\n className={cx(`${classBase}Field`, `${classBase}Operator`, {\n [`${classBase}Operator-hidden`]: selectedColumn === null,\n })}\n key=\"operator-field\"\n onSelect={onSelectOperator}\n ref={operatorRef}\n value={filterClauseModel.op ?? \"\"}\n />\n ) : null}\n {filterClauseModel.op ? (\n <FilterClauseValueEditor\n inputProps={inputProps}\n key=\"value-field\"\n onChangeValue={onChangeValue}\n onDeselectValue={onDeselectValue}\n operator={filterClauseModel.op}\n ref={valueRef}\n selectedColumn={selectedColumn}\n table={vuuTable}\n value={\n (filterClause as MultiValueFilterClause)?.values ??\n (filterClause as SingleValueFilterClause)?.value\n }\n />\n ) : null}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAoCA,MAAM,SAAY,GAAA,iBAAA;AAEX,MAAM,eAAe,CAAC;AAAA,EAC3B,SAAA;AAAA,EACA,aAAA;AAAA,EACA,QAAA;AAAA,EACA,eAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAA;AAAA,EACA,iBAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAyB,KAAA;AACvB,EAAM,MAAA;AAAA,IACJ,UAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA;AAAA,IACA,aAAA;AAAA,IACA,cAAA;AAAA,IACA,gBAAA;AAAA,IACA,eAAA;AAAA,IACA,WAAA;AAAA,IACA,cAAA;AAAA,IACA;AAAA,MACE,eAAgB,CAAA;AAAA,IAClB,iBAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAA,eAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,OAAA,GAAU,QAAQ,MAAM,MAAA,CAAO,OAAO,aAAa,CAAA,EAAG,CAAC,aAAa,CAAC,CAAA;AAE3E,EACE,uBAAA,IAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAI,EAAA,GAAG,cAAgB,EAAA,QAAA,EAAU,CACtE,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,UAAA;AAAA,QACA,WAAW,EAAG,CAAA,CAAA,EAAG,SAAS,CAAS,KAAA,CAAA,EAAA,CAAA,EAAG,SAAS,CAAQ,MAAA,CAAA,CAAA;AAAA,QACvD,OAAA;AAAA,QAEA,QAAU,EAAA,cAAA;AAAA,QACV,GAAK,EAAA,SAAA;AAAA,QACL,KAAA,EAAO,kBAAkB,MAAU,IAAA;AAAA,OAAA;AAAA,MAH/B;AAAA,KAIN;AAAA,IACC,gBAAgB,IACf,mBAAA,GAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACC,MAAQ,EAAA,cAAA;AAAA,QACR,UAAA;AAAA,QACA,WAAW,EAAG,CAAA,CAAA,EAAG,SAAS,CAAS,KAAA,CAAA,EAAA,CAAA,EAAG,SAAS,CAAY,QAAA,CAAA,EAAA;AAAA,UACzD,CAAC,CAAA,EAAG,SAAS,CAAA,eAAA,CAAiB,GAAG,cAAmB,KAAA;AAAA,SACrD,CAAA;AAAA,QAED,QAAU,EAAA,gBAAA;AAAA,QACV,GAAK,EAAA,WAAA;AAAA,QACL,KAAA,EAAO,kBAAkB,EAAM,IAAA;AAAA,OAAA;AAAA,MAH3B;AAAA,KAKJ,GAAA,IAAA;AAAA,IACH,kBAAkB,EACjB,mBAAA,GAAA;AAAA,MAAC,uBAAA;AAAA,MAAA;AAAA,QACC,UAAA;AAAA,QAEA,aAAA;AAAA,QACA,eAAA;AAAA,QACA,UAAU,iBAAkB,CAAA,EAAA;AAAA,QAC5B,GAAK,EAAA,QAAA;AAAA,QACL,cAAA;AAAA,QACA,KAAO,EAAA,QAAA;AAAA,QACP,KAAA,EACG,YAAyC,EAAA,MAAA,IACzC,YAA0C,EAAA;AAAA,OAAA;AAAA,MATzC;AAAA,KAYJ,GAAA;AAAA,GACN,EAAA,CAAA;AAEJ;;;;"}
|
|
@@ -18,7 +18,7 @@ const FilterEditor = ({
|
|
|
18
18
|
filter,
|
|
19
19
|
onCancel,
|
|
20
20
|
onSave,
|
|
21
|
-
|
|
21
|
+
vuuTable,
|
|
22
22
|
...htmlAttributes
|
|
23
23
|
}) => {
|
|
24
24
|
const targetWindow = useWindow();
|
|
@@ -70,7 +70,7 @@ const FilterEditor = ({
|
|
|
70
70
|
filterClauseModel,
|
|
71
71
|
onCancel: onCancelFilterClause,
|
|
72
72
|
onFocusSave: focusSaveButton,
|
|
73
|
-
|
|
73
|
+
vuuTable
|
|
74
74
|
},
|
|
75
75
|
`editor-${i}`
|
|
76
76
|
)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterEditor.js","sources":["../../src/filter-editor/FilterEditor.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"FilterEditor.js","sources":["../../src/filter-editor/FilterEditor.tsx"],"sourcesContent":["import type { Filter } from \"@vuu-ui/vuu-filter-types\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { SplitButton } from \"@vuu-ui/vuu-ui-controls\";\nimport { Button } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes } from \"react\";\nimport { FilterClauseModel } from \"../FilterModel\";\nimport { FilterClause } from \"../filter-clause\";\nimport { FilterClauseCombinator } from \"./FilterClauseCombinator\";\nimport { useFilterEditor } from \"./useFilterEditor\";\n\nimport filterEditorCss from \"./FilterEditor.css\";\nimport { VuuTable } from \"@vuu-ui/vuu-protocol-types\";\n\nconst classBase = \"vuuFilterEditor\";\n\nexport type FilterEditSaveHandler = (filter: Filter) => void;\nexport type FilterEditCancelHandler = (filter?: Filter) => void;\n\nexport interface FilterEditorProps extends HTMLAttributes<HTMLDivElement> {\n columnDescriptors: ColumnDescriptor[];\n filter?: Filter;\n onCancel: FilterEditCancelHandler;\n onSave: FilterEditSaveHandler;\n vuuTable: VuuTable;\n}\n\nexport const FilterEditor = ({\n columnDescriptors,\n filter,\n onCancel,\n onSave,\n vuuTable,\n ...htmlAttributes\n}: FilterEditorProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-filter-editor\",\n css: filterEditorCss,\n window: targetWindow,\n });\n\n const {\n columnsByName,\n filterModel,\n focusSaveButton,\n setContainer,\n onCancelFilterClause,\n onCancelFilterEdit,\n onChangeFilterCombinator,\n onKeyDownCombinator,\n saveButtonRef,\n saveButtonProps,\n } = useFilterEditor({\n columnDescriptors,\n filter,\n onCancel,\n onSave,\n });\n\n const getContents = () => {\n const { op } = filterModel;\n\n const content: JSX.Element[] = [];\n filterModel.filterClauses.forEach((filterClauseModel, i) => {\n if (i > 0 && op) {\n content.push(\n <FilterClauseCombinator\n key={`filter-operator-${i}`}\n onChange={onChangeFilterCombinator}\n onKeyDown={onKeyDownCombinator}\n operator={op}\n />,\n );\n }\n content.push(\n <FilterClause\n columnsByName={columnsByName}\n data-index={i}\n filterClauseModel={filterClauseModel as FilterClauseModel}\n key={`editor-${i}`}\n onCancel={onCancelFilterClause}\n onFocusSave={focusSaveButton}\n vuuTable={vuuTable}\n />,\n );\n });\n return content;\n };\n\n return (\n <div {...htmlAttributes} className={classBase} ref={setContainer}>\n {getContents()}\n <SplitButton\n {...saveButtonProps}\n disabled={!filterModel.isValid}\n key=\"save-button\"\n ref={saveButtonRef}\n >\n Save\n </SplitButton>\n <Button onClick={onCancelFilterEdit} variant=\"secondary\">\n Cancel\n </Button>\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAeA,MAAM,SAAY,GAAA,iBAAA;AAaX,MAAM,eAAe,CAAC;AAAA,EAC3B,iBAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAyB,KAAA;AACvB,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAA,eAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA;AAAA,IACJ,aAAA;AAAA,IACA,WAAA;AAAA,IACA,eAAA;AAAA,IACA,YAAA;AAAA,IACA,oBAAA;AAAA,IACA,kBAAA;AAAA,IACA,wBAAA;AAAA,IACA,mBAAA;AAAA,IACA,aAAA;AAAA,IACA;AAAA,MACE,eAAgB,CAAA;AAAA,IAClB,iBAAA;AAAA,IACA,MAAA;AAAA,IACA,QAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,MAAM,cAAc,MAAM;AACxB,IAAM,MAAA,EAAE,IAAO,GAAA,WAAA;AAEf,IAAA,MAAM,UAAyB,EAAC;AAChC,IAAA,WAAA,CAAY,aAAc,CAAA,OAAA,CAAQ,CAAC,iBAAA,EAAmB,CAAM,KAAA;AAC1D,MAAI,IAAA,CAAA,GAAI,KAAK,EAAI,EAAA;AACf,QAAQ,OAAA,CAAA,IAAA;AAAA,0BACN,GAAA;AAAA,YAAC,sBAAA;AAAA,YAAA;AAAA,cAEC,QAAU,EAAA,wBAAA;AAAA,cACV,SAAW,EAAA,mBAAA;AAAA,cACX,QAAU,EAAA;AAAA,aAAA;AAAA,YAHL,mBAAmB,CAAC,CAAA;AAAA;AAI3B,SACF;AAAA;AAEF,MAAQ,OAAA,CAAA,IAAA;AAAA,wBACN,GAAA;AAAA,UAAC,YAAA;AAAA,UAAA;AAAA,YACC,aAAA;AAAA,YACA,YAAY,EAAA,CAAA;AAAA,YACZ,iBAAA;AAAA,YAEA,QAAU,EAAA,oBAAA;AAAA,YACV,WAAa,EAAA,eAAA;AAAA,YACb;AAAA,WAAA;AAAA,UAHK,UAAU,CAAC,CAAA;AAAA;AAIlB,OACF;AAAA,KACD,CAAA;AACD,IAAO,OAAA,OAAA;AAAA,GACT;AAEA,EAAA,4BACG,KAAK,EAAA,EAAA,GAAG,gBAAgB,SAAW,EAAA,SAAA,EAAW,KAAK,YACjD,EAAA,QAAA,EAAA;AAAA,IAAY,WAAA,EAAA;AAAA,oBACb,aAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACE,GAAG,eAAA;AAAA,QACJ,QAAA,EAAU,CAAC,WAAY,CAAA,OAAA;AAAA,QACvB,GAAI,EAAA,aAAA;AAAA,QACJ,GAAK,EAAA;AAAA,OAAA;AAAA,MACN;AAAA,KAED;AAAA,wBACC,MAAO,EAAA,EAAA,OAAA,EAAS,kBAAoB,EAAA,OAAA,EAAQ,aAAY,QAEzD,EAAA,QAAA,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}
|
|
@@ -15,7 +15,7 @@ const QuickFilters = ({
|
|
|
15
15
|
onApplyFilter,
|
|
16
16
|
onChangeQuickFilterColumns,
|
|
17
17
|
quickFilterColumns,
|
|
18
|
-
|
|
18
|
+
vuuTable
|
|
19
19
|
}) => {
|
|
20
20
|
const targetWindow = useWindow();
|
|
21
21
|
useComponentCssInjection({
|
|
@@ -67,7 +67,7 @@ const QuickFilters = ({
|
|
|
67
67
|
getDataItemEditControl({
|
|
68
68
|
dataDescriptor: column,
|
|
69
69
|
onCommit,
|
|
70
|
-
table:
|
|
70
|
+
table: vuuTable
|
|
71
71
|
})
|
|
72
72
|
] }, column.label ?? column.name)
|
|
73
73
|
)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"QuickFilters.js","sources":["../../src/quick-filters/QuickFilters.tsx"],"sourcesContent":["import { getDataItemEditControl } from \"@vuu-ui/vuu-data-react\";\nimport type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { ColumnPicker, Icon, VuuInput } from \"@vuu-ui/vuu-ui-controls\";\nimport { FormField, FormFieldLabel } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport type { HTMLAttributes } from \"react\";\nimport { FilterBarProps } from \"../filter-bar\";\nimport { useQuickFilters } from \"./useQuickFilters\";\n\nimport quickFiltersCss from \"./QuickFilters.css\";\n\nconst classBase = \"vuuQuickFilters\";\n\nexport interface QuickFilterProps\n extends HTMLAttributes<HTMLDivElement>,\n Pick<FilterBarProps, \"onApplyFilter\" | \"
|
|
1
|
+
{"version":3,"file":"QuickFilters.js","sources":["../../src/quick-filters/QuickFilters.tsx"],"sourcesContent":["import { getDataItemEditControl } from \"@vuu-ui/vuu-data-react\";\nimport type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { ColumnPicker, Icon, VuuInput } from \"@vuu-ui/vuu-ui-controls\";\nimport { FormField, FormFieldLabel } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport type { HTMLAttributes } from \"react\";\nimport { FilterBarProps } from \"../filter-bar\";\nimport { useQuickFilters } from \"./useQuickFilters\";\n\nimport quickFiltersCss from \"./QuickFilters.css\";\n\nconst classBase = \"vuuQuickFilters\";\n\nexport interface QuickFilterProps\n extends HTMLAttributes<HTMLDivElement>,\n Pick<FilterBarProps, \"onApplyFilter\" | \"vuuTable\"> {\n allowAddColumn?: boolean;\n allowFind?: boolean;\n availableColumns: ColumnDescriptor[];\n onChangeQuickFilterColumns?: (columns: string[]) => void;\n quickFilterColumns?: string[];\n /**\n * Render a general 'search' control.\n * if true, all columns of type 'string' will be included in the search. Otherwise\n * a list of the columns to include in search can be provided.\n */\n showFind?: boolean | string[];\n}\n\nexport const QuickFilters = ({\n allowAddColumn = true,\n allowFind = true,\n availableColumns,\n onApplyFilter,\n onChangeQuickFilterColumns,\n quickFilterColumns,\n vuuTable,\n}: QuickFilterProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-quick-filters\",\n css: quickFiltersCss,\n window: targetWindow,\n });\n\n const searchIcon = <Icon name=\"search\" size={18} />;\n\n const {\n availableColumnNames,\n onChange,\n onColumnsSelectionChange,\n onCommit,\n rootRef,\n } = useQuickFilters({\n availableColumns,\n onApplyFilter,\n onChangeQuickFilterColumns,\n quickFilterColumns,\n });\n\n const filterColumns = availableColumns.filter(({ name }) =>\n quickFilterColumns?.includes(name),\n );\n\n const getFilterControls = () => {\n const controls = [];\n if (allowFind) {\n controls.push(\n <FormField data-embedded data-field=\"find\" key=\"find\">\n <FormFieldLabel>Find</FormFieldLabel>\n <VuuInput\n inputProps={{\n onChange,\n }}\n onCommit={onCommit}\n startAdornment={searchIcon}\n variant=\"secondary\"\n />\n </FormField>,\n );\n }\n {\n filterColumns?.forEach((column) =>\n controls.push(\n <FormField key={column.label ?? column.name} data-field={column.name}>\n <FormFieldLabel>{column.label ?? column.name}</FormFieldLabel>\n {getDataItemEditControl({\n dataDescriptor: column,\n onCommit,\n table: vuuTable,\n })}\n </FormField>,\n ),\n );\n }\n\n return controls;\n };\n\n return (\n <div className={classBase} ref={rootRef}>\n <div className={`${classBase}-filter-container`}>\n {getFilterControls()}\n </div>\n {allowAddColumn ? (\n <ColumnPicker\n columns={availableColumnNames}\n icon=\"more-horiz\"\n iconSize={16}\n onSelectionChange={onColumnsSelectionChange}\n selected={quickFilterColumns}\n />\n ) : null}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;AAYA,MAAM,SAAY,GAAA,iBAAA;AAkBX,MAAM,eAAe,CAAC;AAAA,EAC3B,cAAiB,GAAA,IAAA;AAAA,EACjB,SAAY,GAAA,IAAA;AAAA,EACZ,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,0BAAA;AAAA,EACA,kBAAA;AAAA,EACA;AACF,CAAwB,KAAA;AACtB,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAA,eAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,6BAAc,GAAA,CAAA,IAAA,EAAA,EAAK,IAAK,EAAA,QAAA,EAAS,MAAM,EAAI,EAAA,CAAA;AAEjD,EAAM,MAAA;AAAA,IACJ,oBAAA;AAAA,IACA,QAAA;AAAA,IACA,wBAAA;AAAA,IACA,QAAA;AAAA,IACA;AAAA,MACE,eAAgB,CAAA;AAAA,IAClB,gBAAA;AAAA,IACA,aAAA;AAAA,IACA,0BAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,MAAM,gBAAgB,gBAAiB,CAAA,MAAA;AAAA,IAAO,CAAC,EAAE,IAAA,EAC/C,KAAA,kBAAA,EAAoB,SAAS,IAAI;AAAA,GACnC;AAEA,EAAA,MAAM,oBAAoB,MAAM;AAC9B,IAAA,MAAM,WAAW,EAAC;AAClB,IAAA,IAAI,SAAW,EAAA;AACb,MAAS,QAAA,CAAA,IAAA;AAAA,wBACN,IAAA,CAAA,SAAA,EAAA,EAAU,eAAa,EAAA,IAAA,EAAC,cAAW,MAClC,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,kBAAe,QAAI,EAAA,MAAA,EAAA,CAAA;AAAA,0BACpB,GAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,UAAY,EAAA;AAAA,gBACV;AAAA,eACF;AAAA,cACA,QAAA;AAAA,cACA,cAAgB,EAAA,UAAA;AAAA,cAChB,OAAQ,EAAA;AAAA;AAAA;AACV,SAAA,EAAA,EAT6C,MAU/C;AAAA,OACF;AAAA;AAEF,IAAA;AACE,MAAe,aAAA,EAAA,OAAA;AAAA,QAAQ,CAAC,WACtB,QAAS,CAAA,IAAA;AAAA,0BACN,IAAA,CAAA,SAAA,EAAA,EAA4C,YAAY,EAAA,MAAA,CAAO,IAC9D,EAAA,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,cAAgB,EAAA,EAAA,QAAA,EAAA,MAAA,CAAO,KAAS,IAAA,MAAA,CAAO,IAAK,EAAA,CAAA;AAAA,YAC5C,sBAAuB,CAAA;AAAA,cACtB,cAAgB,EAAA,MAAA;AAAA,cAChB,QAAA;AAAA,cACA,KAAO,EAAA;AAAA,aACR;AAAA,WANa,EAAA,EAAA,MAAA,CAAO,KAAS,IAAA,MAAA,CAAO,IAOvC;AAAA;AACF,OACF;AAAA;AAGF,IAAO,OAAA,QAAA;AAAA,GACT;AAEA,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,SAAA,EAAW,KAAK,OAC9B,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,SAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAAA,iBAAA,CAAA,EACzB,6BACH,EAAA,CAAA;AAAA,IACC,cACC,mBAAA,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,OAAS,EAAA,oBAAA;AAAA,QACT,IAAK,EAAA,YAAA;AAAA,QACL,QAAU,EAAA,EAAA;AAAA,QACV,iBAAmB,EAAA,wBAAA;AAAA,QACnB,QAAU,EAAA;AAAA;AAAA,KAEV,GAAA;AAAA,GACN,EAAA,CAAA;AAEJ;;;;"}
|
package/package.json
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.11.
|
|
2
|
+
"version": "0.11.3",
|
|
3
3
|
"author": "heswell",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"devDependencies": {
|
|
7
|
-
"@vuu-ui/vuu-data-types": "0.11.
|
|
8
|
-
"@vuu-ui/vuu-protocol-types": "0.11.
|
|
9
|
-
"@vuu-ui/vuu-table-types": "0.11.
|
|
10
|
-
"@vuu-ui/vuu-filter-types": "0.11.
|
|
7
|
+
"@vuu-ui/vuu-data-types": "0.11.3",
|
|
8
|
+
"@vuu-ui/vuu-protocol-types": "0.11.3",
|
|
9
|
+
"@vuu-ui/vuu-table-types": "0.11.3",
|
|
10
|
+
"@vuu-ui/vuu-filter-types": "0.11.3"
|
|
11
11
|
},
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@vuu-ui/vuu-data-react": "0.11.
|
|
14
|
-
"@vuu-ui/vuu-filter-parser": "0.11.
|
|
15
|
-
"@vuu-ui/vuu-popups": "0.11.
|
|
16
|
-
"@vuu-ui/vuu-ui-controls": "0.11.
|
|
17
|
-
"@vuu-ui/vuu-table": "0.11.
|
|
18
|
-
"@vuu-ui/vuu-utils": "0.11.
|
|
13
|
+
"@vuu-ui/vuu-data-react": "0.11.3",
|
|
14
|
+
"@vuu-ui/vuu-filter-parser": "0.11.3",
|
|
15
|
+
"@vuu-ui/vuu-popups": "0.11.3",
|
|
16
|
+
"@vuu-ui/vuu-ui-controls": "0.11.3",
|
|
17
|
+
"@vuu-ui/vuu-table": "0.11.3",
|
|
18
|
+
"@vuu-ui/vuu-utils": "0.11.3",
|
|
19
19
|
"@salt-ds/core": "1.43.0",
|
|
20
20
|
"@salt-ds/styles": "0.2.1",
|
|
21
21
|
"@salt-ds/window": "0.1.1"
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
|
|
2
2
|
import { HTMLAttributes } from "react";
|
|
3
3
|
import { type FilterBarProps } from "../filter-bar";
|
|
4
|
-
export interface CustomFilterProps extends HTMLAttributes<HTMLDivElement>, Pick<FilterBarProps, "defaultFilterState" | "filterState" | "onApplyFilter" | "onFilterDeleted" | "onFilterRenamed" | "onFilterStateChanged" | "
|
|
4
|
+
export interface CustomFilterProps extends HTMLAttributes<HTMLDivElement>, Pick<FilterBarProps, "defaultFilterState" | "filterState" | "onApplyFilter" | "onFilterDeleted" | "onFilterRenamed" | "onFilterStateChanged" | "vuuTable"> {
|
|
5
5
|
columnDescriptors: ColumnDescriptor[];
|
|
6
6
|
}
|
|
7
|
-
export declare const CustomFilters: ({ columnDescriptors, defaultFilterState, filterState, onApplyFilter, onFilterDeleted, onFilterRenamed, onFilterStateChanged,
|
|
7
|
+
export declare const CustomFilters: ({ columnDescriptors, defaultFilterState, filterState, onApplyFilter, onFilterDeleted, onFilterRenamed, onFilterStateChanged, vuuTable, }: CustomFilterProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,16 +1,18 @@
|
|
|
1
|
-
import { DataSourceFilter
|
|
1
|
+
import { DataSourceFilter } from "@vuu-ui/vuu-data-types";
|
|
2
2
|
import { Filter, FilterState } from "@vuu-ui/vuu-filter-types";
|
|
3
3
|
import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
|
|
4
4
|
import { HTMLAttributes } from "react";
|
|
5
5
|
import { QuickFilterProps } from "../quick-filters";
|
|
6
6
|
import { FilterMode } from "./useFilterBar";
|
|
7
|
+
import { VuuTable } from "@vuu-ui/vuu-protocol-types";
|
|
7
8
|
export type FilterBarVariant = "custom-filters-only" | "quick-filters-only" | "full-filters";
|
|
8
9
|
export interface FilterBarProps extends HTMLAttributes<HTMLDivElement> {
|
|
9
10
|
QuickFilterProps?: Pick<QuickFilterProps, "quickFilterColumns" | "onChangeQuickFilterColumns">;
|
|
10
11
|
/**
|
|
11
|
-
*
|
|
12
|
-
* NOTE: Always make sure that these are passed with proper re-render optimization
|
|
13
|
-
*
|
|
12
|
+
* Used to ensure we present filter editors appropriate to the data type of column.
|
|
13
|
+
* NOTE: Always make sure that these are passed with proper re-render optimization (i.e make
|
|
14
|
+
* sure its a stable reference, in React terminology), otherwise might end up with infinite
|
|
15
|
+
* state updates.
|
|
14
16
|
*/
|
|
15
17
|
columnDescriptors: ColumnDescriptor[];
|
|
16
18
|
defaultFilterMode?: FilterMode;
|
|
@@ -22,12 +24,10 @@ export interface FilterBarProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
22
24
|
onFilterDeleted?: (filter: Filter) => void;
|
|
23
25
|
onFilterRenamed?: (filter: Filter, name: string) => void;
|
|
24
26
|
onFilterStateChanged?: (state: FilterState) => void;
|
|
25
|
-
suggestionProvider?: SuggestionProvider;
|
|
26
27
|
/**
|
|
27
|
-
*
|
|
28
|
-
* provide table in call to Typeahead service
|
|
28
|
+
* Defines table used in call to Vuu Typeahead service
|
|
29
29
|
*/
|
|
30
|
-
|
|
30
|
+
vuuTable?: VuuTable;
|
|
31
31
|
variant?: FilterBarVariant;
|
|
32
32
|
}
|
|
33
|
-
export declare const FilterBar: ({ QuickFilterProps, className: classNameProp, columnDescriptors, defaultFilterMode, defaultFilterState, filterMode: filterModeProp, filterState, onApplyFilter, onChangeFilterMode: onChangeFilterModeProp, onFilterDeleted, onFilterRenamed, onFilterStateChanged,
|
|
33
|
+
export declare const FilterBar: ({ QuickFilterProps, className: classNameProp, columnDescriptors, defaultFilterMode, defaultFilterState, filterMode: filterModeProp, filterState, onApplyFilter, onChangeFilterMode: onChangeFilterModeProp, onFilterDeleted, onFilterRenamed, onFilterStateChanged, vuuTable, variant, ...htmlAttributes }: FilterBarProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import type { TableSchema } from "@vuu-ui/vuu-data-types";
|
|
2
1
|
import { ColumnDescriptorsByName } from "@vuu-ui/vuu-filter-types";
|
|
3
2
|
import { CloseReason } from "@vuu-ui/vuu-ui-controls";
|
|
4
3
|
import { HTMLAttributes } from "react";
|
|
5
4
|
import { FilterClauseModel } from "../FilterModel";
|
|
5
|
+
import { VuuTable } from "@vuu-ui/vuu-protocol-types";
|
|
6
6
|
export type FilterClauseCancelType = "Backspace" | "Escape";
|
|
7
7
|
export type FilterClauseCancelHandler = (filterClause: FilterClauseModel, reason: FilterClauseCancelType) => void;
|
|
8
8
|
export interface FilterClauseProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
|
|
@@ -12,6 +12,6 @@ export interface FilterClauseProps extends Omit<HTMLAttributes<HTMLDivElement>,
|
|
|
12
12
|
onDropdownClose?: (closeReason: CloseReason) => void;
|
|
13
13
|
onDropdownOpen?: () => void;
|
|
14
14
|
onFocusSave?: () => void;
|
|
15
|
-
|
|
15
|
+
vuuTable: VuuTable;
|
|
16
16
|
}
|
|
17
|
-
export declare const FilterClause: ({ className, columnsByName, onCancel, onDropdownClose, onDropdownOpen, onFocusSave, filterClauseModel,
|
|
17
|
+
export declare const FilterClause: ({ className, columnsByName, onCancel, onDropdownClose, onDropdownOpen, onFocusSave, filterClauseModel, vuuTable, ...htmlAttributes }: FilterClauseProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { TableSchema } from "@vuu-ui/vuu-data-types";
|
|
2
1
|
import type { Filter } from "@vuu-ui/vuu-filter-types";
|
|
3
2
|
import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
|
|
4
3
|
import { HTMLAttributes } from "react";
|
|
4
|
+
import { VuuTable } from "@vuu-ui/vuu-protocol-types";
|
|
5
5
|
export type FilterEditSaveHandler = (filter: Filter) => void;
|
|
6
6
|
export type FilterEditCancelHandler = (filter?: Filter) => void;
|
|
7
7
|
export interface FilterEditorProps extends HTMLAttributes<HTMLDivElement> {
|
|
@@ -9,6 +9,6 @@ export interface FilterEditorProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
9
9
|
filter?: Filter;
|
|
10
10
|
onCancel: FilterEditCancelHandler;
|
|
11
11
|
onSave: FilterEditSaveHandler;
|
|
12
|
-
|
|
12
|
+
vuuTable: VuuTable;
|
|
13
13
|
}
|
|
14
|
-
export declare const FilterEditor: ({ columnDescriptors, filter, onCancel, onSave,
|
|
14
|
+
export declare const FilterEditor: ({ columnDescriptors, filter, onCancel, onSave, vuuTable, ...htmlAttributes }: FilterEditorProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
|
|
2
2
|
import type { HTMLAttributes } from "react";
|
|
3
3
|
import { FilterBarProps } from "../filter-bar";
|
|
4
|
-
export interface QuickFilterProps extends HTMLAttributes<HTMLDivElement>, Pick<FilterBarProps, "onApplyFilter" | "
|
|
4
|
+
export interface QuickFilterProps extends HTMLAttributes<HTMLDivElement>, Pick<FilterBarProps, "onApplyFilter" | "vuuTable"> {
|
|
5
5
|
allowAddColumn?: boolean;
|
|
6
6
|
allowFind?: boolean;
|
|
7
7
|
availableColumns: ColumnDescriptor[];
|
|
@@ -14,4 +14,4 @@ export interface QuickFilterProps extends HTMLAttributes<HTMLDivElement>, Pick<F
|
|
|
14
14
|
*/
|
|
15
15
|
showFind?: boolean | string[];
|
|
16
16
|
}
|
|
17
|
-
export declare const QuickFilters: ({ allowAddColumn, allowFind, availableColumns, onApplyFilter, onChangeQuickFilterColumns, quickFilterColumns,
|
|
17
|
+
export declare const QuickFilters: ({ allowAddColumn, allowFind, availableColumns, onApplyFilter, onChangeQuickFilterColumns, quickFilterColumns, vuuTable, }: QuickFilterProps) => import("react/jsx-runtime").JSX.Element;
|