@vuu-ui/vuu-filters 2.1.18 → 2.1.19-beta.2
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/package.json +15 -18
- package/src/FilterAggregator.js +107 -0
- package/src/FilterModel.js +161 -0
- package/src/column-filter/ColumnFilter.css.js +52 -0
- package/src/column-filter/ColumnFilter.js +59 -0
- package/src/column-filter/useColumnFilter.js +130 -0
- package/src/column-filter/utils.js +35 -0
- package/src/custom-filters/CustomFilters.js +74 -0
- package/src/custom-filters/filterBarFocusManagement.js +25 -0
- package/src/custom-filters/index.js +1 -0
- package/src/custom-filters/useCustomFilters.js +237 -0
- package/src/custom-filters/useFilterState.js +123 -0
- package/src/filter-bar/FilterBar.css.js +81 -0
- package/src/filter-bar/FilterBar.js +97 -0
- package/src/filter-bar/FilterBarMenu.js +14 -0
- package/src/filter-bar/index.js +1 -0
- package/src/filter-bar/useFilterBar.js +28 -0
- package/src/filter-clause/ExpandoCombobox.css.js +54 -0
- package/src/filter-clause/ExpandoCombobox.js +86 -0
- package/src/filter-clause/FilterClause.css.js +101 -0
- package/src/filter-clause/FilterClause.js +69 -0
- package/src/filter-clause/column-picker/ColumnPicker.js +25 -0
- package/src/filter-clause/column-picker/useColumnPicker.js +42 -0
- package/src/filter-clause/filterClauseFocusManagement.js +156 -0
- package/src/filter-clause/filterClauseTypes.js +0 -0
- package/src/filter-clause/index.js +5 -0
- package/src/filter-clause/operator-picker/OperatorPicker.js +25 -0
- package/src/filter-clause/operator-picker/operator-utils.js +23 -0
- package/src/filter-clause/operator-picker/useOperatorPicker.js +42 -0
- package/src/filter-clause/useFilterClause.js +135 -0
- package/src/filter-clause/value-editors/FilterClauseValueEditor.js +59 -0
- package/src/filter-clause/value-editors/FilterClauseValueEditorDate.js +55 -0
- package/src/filter-clause/value-editors/FilterClauseValueEditorNumber.js +32 -0
- package/src/filter-clause/value-editors/FilterClauseValueEditorText.js +182 -0
- package/src/filter-clause/value-editors/FilterClauseValueEditorTime.js +53 -0
- package/src/filter-container/ExtendedSingleValueFilterClause.js +35 -0
- package/src/filter-container/FilterContainer.css.js +13 -0
- package/src/filter-container/FilterContainer.js +121 -0
- package/src/filter-container/useFilterContainer.js +82 -0
- package/src/filter-context-menu/useFilterContextMenu.js +106 -0
- package/src/filter-display/FilterDisplay.css.js +31 -0
- package/src/filter-display/FilterDisplay.js +59 -0
- package/src/filter-editor/FilterClauseCombinator.css.js +15 -0
- package/src/filter-editor/FilterClauseCombinator.js +32 -0
- package/src/filter-editor/FilterEditor.css.js +13 -0
- package/src/filter-editor/FilterEditor.js +65 -0
- package/src/filter-editor/index.js +1 -0
- package/src/filter-editor/useFilterEditor.js +193 -0
- package/src/filter-panel/FilterPanel.css.js +22 -0
- package/src/filter-panel/FilterPanel.js +59 -0
- package/src/filter-panel/useFilterPanel.js +58 -0
- package/src/filter-pill/FilterMenu.js +48 -0
- package/src/filter-pill/FilterPill.css.js +15 -0
- package/src/filter-pill/FilterPill.js +114 -0
- package/src/filter-pill/FilterPillNext.css.js +12 -0
- package/src/filter-pill/FilterPillNext.js +65 -0
- package/src/filter-pill/filterAsReactNode.js +28 -0
- package/src/filter-pill/getFilterLabel.js +11 -0
- package/src/filter-pill/getFilterTooltipText.js +32 -0
- package/src/filter-pill/index.js +1 -0
- package/src/filter-pill/useFilterPillNext.js +53 -0
- package/src/filter-pill-menu/FilterPillMenu.css.js +8 -0
- package/src/filter-pill-menu/FilterPillMenu.js +46 -0
- package/src/filter-pill-menu/FilterPillMenuOptions.js +26 -0
- package/src/filter-pill-menu/index.js +1 -0
- package/src/filter-provider/FilterContext.js +71 -0
- package/src/filter-provider/FilterProvider.js +188 -0
- package/src/filter-provider/filter-descriptor-utils.js +41 -0
- package/src/filter-toggle-button/FilterToggleButton.css.js +22 -0
- package/src/filter-toggle-button/FilterToggleButton.js +103 -0
- package/src/filter-utils.js +300 -0
- package/src/index.js +21 -0
- package/src/inline-filter/InlineFilter.css.js +89 -0
- package/src/inline-filter/InlineFilter.js +56 -0
- package/src/inline-filter/index.js +1 -0
- package/src/inline-filter/useInlineFilter.js +11 -0
- package/src/quick-filters/QuickFilters.css.js +39 -0
- package/src/quick-filters/QuickFilters.js +81 -0
- package/src/quick-filters/index.js +1 -0
- package/src/quick-filters/useQuickFilters.js +108 -0
- package/src/saved-filters/DeleteFilterPrompt.js +23 -0
- package/src/saved-filters/FilterNamePrompt.css.js +19 -0
- package/src/saved-filters/FilterNamePrompt.js +74 -0
- package/src/saved-filters/SavedFilterPanel.css.js +21 -0
- package/src/saved-filters/SavedFilterPanel.js +53 -0
- package/src/saved-filters/useFilterNamePrompt.js +74 -0
- package/src/saved-filters/useSavedFilterPanel.js +19 -0
- package/src/tabbed-filter-container/TabbedFilterContainer.js +61 -0
- package/src/toggle-filter/ToggleFilter.css.js +10 -0
- package/src/toggle-filter/ToggleFilter.js +68 -0
- package/src/toggle-filter/useToggleFilter.js +57 -0
- package/types/filter-clause/column-picker/ColumnPicker.d.ts +1 -1
- package/types/filter-clause/operator-picker/OperatorPicker.d.ts +1 -1
- package/types/filter-clause/value-editors/FilterClauseValueEditor.d.ts +1 -1
- package/cjs/FilterAggregator.js +0 -162
- package/cjs/FilterAggregator.js.map +0 -1
- package/cjs/FilterModel.js +0 -227
- package/cjs/FilterModel.js.map +0 -1
- package/cjs/column-filter/ColumnFilter.css.js +0 -6
- package/cjs/column-filter/ColumnFilter.css.js.map +0 -1
- package/cjs/column-filter/ColumnFilter.js +0 -83
- package/cjs/column-filter/ColumnFilter.js.map +0 -1
- package/cjs/column-filter/useColumnFilter.js +0 -139
- package/cjs/column-filter/useColumnFilter.js.map +0 -1
- package/cjs/custom-filters/CustomFilters.js +0 -99
- package/cjs/custom-filters/CustomFilters.js.map +0 -1
- package/cjs/custom-filters/filterBarFocusManagement.js +0 -35
- package/cjs/custom-filters/filterBarFocusManagement.js.map +0 -1
- package/cjs/custom-filters/useCustomFilters.js +0 -266
- package/cjs/custom-filters/useCustomFilters.js.map +0 -1
- package/cjs/custom-filters/useFilterState.js +0 -149
- package/cjs/custom-filters/useFilterState.js.map +0 -1
- package/cjs/filter-bar/FilterBar.css.js +0 -6
- package/cjs/filter-bar/FilterBar.css.js.map +0 -1
- package/cjs/filter-bar/FilterBar.js +0 -123
- package/cjs/filter-bar/FilterBar.js.map +0 -1
- package/cjs/filter-bar/useFilterBar.js +0 -37
- package/cjs/filter-bar/useFilterBar.js.map +0 -1
- package/cjs/filter-clause/ExpandoCombobox.css.js +0 -6
- package/cjs/filter-clause/ExpandoCombobox.css.js.map +0 -1
- package/cjs/filter-clause/ExpandoCombobox.js +0 -114
- package/cjs/filter-clause/ExpandoCombobox.js.map +0 -1
- package/cjs/filter-clause/FilterClause.css.js +0 -6
- package/cjs/filter-clause/FilterClause.css.js.map +0 -1
- package/cjs/filter-clause/FilterClause.js +0 -102
- package/cjs/filter-clause/FilterClause.js.map +0 -1
- package/cjs/filter-clause/column-picker/ColumnPicker.js +0 -39
- package/cjs/filter-clause/column-picker/ColumnPicker.js.map +0 -1
- package/cjs/filter-clause/column-picker/useColumnPicker.js +0 -61
- package/cjs/filter-clause/column-picker/useColumnPicker.js.map +0 -1
- package/cjs/filter-clause/filterClauseFocusManagement.js +0 -204
- package/cjs/filter-clause/filterClauseFocusManagement.js.map +0 -1
- package/cjs/filter-clause/operator-picker/OperatorPicker.js +0 -40
- package/cjs/filter-clause/operator-picker/OperatorPicker.js.map +0 -1
- package/cjs/filter-clause/operator-picker/operator-utils.js +0 -34
- package/cjs/filter-clause/operator-picker/operator-utils.js.map +0 -1
- package/cjs/filter-clause/operator-picker/useOperatorPicker.js +0 -61
- package/cjs/filter-clause/operator-picker/useOperatorPicker.js.map +0 -1
- package/cjs/filter-clause/useFilterClause.js +0 -172
- package/cjs/filter-clause/useFilterClause.js.map +0 -1
- package/cjs/filter-clause/value-editors/FilterClauseValueEditor.js +0 -93
- package/cjs/filter-clause/value-editors/FilterClauseValueEditor.js.map +0 -1
- package/cjs/filter-clause/value-editors/FilterClauseValueEditorDate.js +0 -64
- package/cjs/filter-clause/value-editors/FilterClauseValueEditorDate.js.map +0 -1
- package/cjs/filter-clause/value-editors/FilterClauseValueEditorNumber.js +0 -55
- package/cjs/filter-clause/value-editors/FilterClauseValueEditorNumber.js.map +0 -1
- package/cjs/filter-clause/value-editors/FilterClauseValueEditorText.js +0 -222
- package/cjs/filter-clause/value-editors/FilterClauseValueEditorText.js.map +0 -1
- package/cjs/filter-clause/value-editors/FilterClauseValueEditorTime.js +0 -62
- package/cjs/filter-clause/value-editors/FilterClauseValueEditorTime.js.map +0 -1
- package/cjs/filter-container/ExtendedSingleValueFilterClause.js +0 -63
- package/cjs/filter-container/ExtendedSingleValueFilterClause.js.map +0 -1
- package/cjs/filter-container/FilterContainer.css.js +0 -6
- package/cjs/filter-container/FilterContainer.css.js.map +0 -1
- package/cjs/filter-container/FilterContainer.js +0 -145
- package/cjs/filter-container/FilterContainer.js.map +0 -1
- package/cjs/filter-container/useFilterContainer.js +0 -137
- package/cjs/filter-container/useFilterContainer.js.map +0 -1
- package/cjs/filter-context-menu/useFilterContextMenu.js +0 -129
- package/cjs/filter-context-menu/useFilterContextMenu.js.map +0 -1
- package/cjs/filter-display/FilterDisplay.css.js +0 -6
- package/cjs/filter-display/FilterDisplay.css.js.map +0 -1
- package/cjs/filter-display/FilterDisplay.js +0 -79
- package/cjs/filter-display/FilterDisplay.js.map +0 -1
- package/cjs/filter-editor/FilterClauseCombinator.css.js +0 -6
- package/cjs/filter-editor/FilterClauseCombinator.css.js.map +0 -1
- package/cjs/filter-editor/FilterClauseCombinator.js +0 -42
- package/cjs/filter-editor/FilterClauseCombinator.js.map +0 -1
- package/cjs/filter-editor/FilterEditor.css.js +0 -6
- package/cjs/filter-editor/FilterEditor.css.js.map +0 -1
- package/cjs/filter-editor/FilterEditor.js +0 -101
- package/cjs/filter-editor/FilterEditor.js.map +0 -1
- package/cjs/filter-editor/useFilterEditor.js +0 -191
- package/cjs/filter-editor/useFilterEditor.js.map +0 -1
- package/cjs/filter-panel/FilterPanel.css.js +0 -6
- package/cjs/filter-panel/FilterPanel.css.js.map +0 -1
- package/cjs/filter-panel/FilterPanel.js +0 -91
- package/cjs/filter-panel/FilterPanel.js.map +0 -1
- package/cjs/filter-panel/useFilterPanel.js +0 -68
- package/cjs/filter-panel/useFilterPanel.js.map +0 -1
- package/cjs/filter-pill/FilterMenu.js +0 -63
- package/cjs/filter-pill/FilterMenu.js.map +0 -1
- package/cjs/filter-pill/FilterPill.css.js +0 -6
- package/cjs/filter-pill/FilterPill.css.js.map +0 -1
- package/cjs/filter-pill/FilterPill.js +0 -147
- package/cjs/filter-pill/FilterPill.js.map +0 -1
- package/cjs/filter-pill/FilterPillNext.css.js +0 -6
- package/cjs/filter-pill/FilterPillNext.css.js.map +0 -1
- package/cjs/filter-pill/FilterPillNext.js +0 -91
- package/cjs/filter-pill/FilterPillNext.js.map +0 -1
- package/cjs/filter-pill/filterAsReactNode.js +0 -27
- package/cjs/filter-pill/filterAsReactNode.js.map +0 -1
- package/cjs/filter-pill/getFilterLabel.js +0 -22
- package/cjs/filter-pill/getFilterLabel.js.map +0 -1
- package/cjs/filter-pill/getFilterTooltipText.js +0 -41
- package/cjs/filter-pill/getFilterTooltipText.js.map +0 -1
- package/cjs/filter-pill/useFilterPillNext.js +0 -65
- package/cjs/filter-pill/useFilterPillNext.js.map +0 -1
- package/cjs/filter-pill-menu/FilterPillMenuOptions.js +0 -32
- package/cjs/filter-pill-menu/FilterPillMenuOptions.js.map +0 -1
- package/cjs/filter-provider/FilterContext.js +0 -105
- package/cjs/filter-provider/FilterContext.js.map +0 -1
- package/cjs/filter-provider/FilterProvider.js +0 -240
- package/cjs/filter-provider/FilterProvider.js.map +0 -1
- package/cjs/filter-provider/filter-descriptor-utils.js +0 -67
- package/cjs/filter-provider/filter-descriptor-utils.js.map +0 -1
- package/cjs/filter-utils.js +0 -367
- package/cjs/filter-utils.js.map +0 -1
- package/cjs/index.js +0 -80
- package/cjs/index.js.map +0 -1
- package/cjs/inline-filter/InlineFilter.css.js +0 -6
- package/cjs/inline-filter/InlineFilter.css.js.map +0 -1
- package/cjs/inline-filter/InlineFilter.js +0 -70
- package/cjs/inline-filter/InlineFilter.js.map +0 -1
- package/cjs/inline-filter/useInlineFilter.js +0 -16
- package/cjs/inline-filter/useInlineFilter.js.map +0 -1
- package/cjs/quick-filters/QuickFilters.css.js +0 -6
- package/cjs/quick-filters/QuickFilters.css.js.map +0 -1
- package/cjs/quick-filters/QuickFilters.js +0 -98
- package/cjs/quick-filters/QuickFilters.js.map +0 -1
- package/cjs/quick-filters/useQuickFilters.js +0 -152
- package/cjs/quick-filters/useQuickFilters.js.map +0 -1
- package/cjs/saved-filters/DeleteFilterPrompt.js +0 -37
- package/cjs/saved-filters/DeleteFilterPrompt.js.map +0 -1
- package/cjs/saved-filters/FilterNamePrompt.css.js +0 -6
- package/cjs/saved-filters/FilterNamePrompt.css.js.map +0 -1
- package/cjs/saved-filters/FilterNamePrompt.js +0 -89
- package/cjs/saved-filters/FilterNamePrompt.js.map +0 -1
- package/cjs/saved-filters/SavedFilterPanel.css.js +0 -6
- package/cjs/saved-filters/SavedFilterPanel.css.js.map +0 -1
- package/cjs/saved-filters/SavedFilterPanel.js +0 -62
- package/cjs/saved-filters/SavedFilterPanel.js.map +0 -1
- package/cjs/saved-filters/useFilterNamePrompt.js +0 -98
- package/cjs/saved-filters/useFilterNamePrompt.js.map +0 -1
- package/cjs/saved-filters/useSavedFilterPanel.js +0 -29
- package/cjs/saved-filters/useSavedFilterPanel.js.map +0 -1
- package/cjs/tabbed-filter-container/TabbedFilterContainer.css.js +0 -6
- package/cjs/tabbed-filter-container/TabbedFilterContainer.css.js.map +0 -1
- package/cjs/tabbed-filter-container/TabbedFilterContainer.js +0 -57
- package/cjs/tabbed-filter-container/TabbedFilterContainer.js.map +0 -1
- package/cjs/toggle-filter/ToggleFilter.css.js +0 -6
- package/cjs/toggle-filter/ToggleFilter.css.js.map +0 -1
- package/cjs/toggle-filter/ToggleFilter.js +0 -85
- package/cjs/toggle-filter/ToggleFilter.js.map +0 -1
- package/cjs/toggle-filter/useToggleFilter.js +0 -67
- package/cjs/toggle-filter/useToggleFilter.js.map +0 -1
- package/esm/FilterAggregator.js +0 -160
- package/esm/FilterAggregator.js.map +0 -1
- package/esm/FilterModel.js +0 -224
- package/esm/FilterModel.js.map +0 -1
- package/esm/column-filter/ColumnFilter.css.js +0 -4
- package/esm/column-filter/ColumnFilter.css.js.map +0 -1
- package/esm/column-filter/ColumnFilter.js +0 -81
- package/esm/column-filter/ColumnFilter.js.map +0 -1
- package/esm/column-filter/useColumnFilter.js +0 -137
- package/esm/column-filter/useColumnFilter.js.map +0 -1
- package/esm/custom-filters/CustomFilters.js +0 -97
- package/esm/custom-filters/CustomFilters.js.map +0 -1
- package/esm/custom-filters/filterBarFocusManagement.js +0 -33
- package/esm/custom-filters/filterBarFocusManagement.js.map +0 -1
- package/esm/custom-filters/useCustomFilters.js +0 -263
- package/esm/custom-filters/useCustomFilters.js.map +0 -1
- package/esm/custom-filters/useFilterState.js +0 -147
- package/esm/custom-filters/useFilterState.js.map +0 -1
- package/esm/filter-bar/FilterBar.css.js +0 -4
- package/esm/filter-bar/FilterBar.css.js.map +0 -1
- package/esm/filter-bar/FilterBar.js +0 -121
- package/esm/filter-bar/FilterBar.js.map +0 -1
- package/esm/filter-bar/useFilterBar.js +0 -35
- package/esm/filter-bar/useFilterBar.js.map +0 -1
- package/esm/filter-clause/ExpandoCombobox.css.js +0 -4
- package/esm/filter-clause/ExpandoCombobox.css.js.map +0 -1
- package/esm/filter-clause/ExpandoCombobox.js +0 -112
- package/esm/filter-clause/ExpandoCombobox.js.map +0 -1
- package/esm/filter-clause/FilterClause.css.js +0 -4
- package/esm/filter-clause/FilterClause.css.js.map +0 -1
- package/esm/filter-clause/FilterClause.js +0 -100
- package/esm/filter-clause/FilterClause.js.map +0 -1
- package/esm/filter-clause/column-picker/ColumnPicker.js +0 -37
- package/esm/filter-clause/column-picker/ColumnPicker.js.map +0 -1
- package/esm/filter-clause/column-picker/useColumnPicker.js +0 -59
- package/esm/filter-clause/column-picker/useColumnPicker.js.map +0 -1
- package/esm/filter-clause/filterClauseFocusManagement.js +0 -191
- package/esm/filter-clause/filterClauseFocusManagement.js.map +0 -1
- package/esm/filter-clause/operator-picker/OperatorPicker.js +0 -38
- package/esm/filter-clause/operator-picker/OperatorPicker.js.map +0 -1
- package/esm/filter-clause/operator-picker/operator-utils.js +0 -30
- package/esm/filter-clause/operator-picker/operator-utils.js.map +0 -1
- package/esm/filter-clause/operator-picker/useOperatorPicker.js +0 -59
- package/esm/filter-clause/operator-picker/useOperatorPicker.js.map +0 -1
- package/esm/filter-clause/useFilterClause.js +0 -170
- package/esm/filter-clause/useFilterClause.js.map +0 -1
- package/esm/filter-clause/value-editors/FilterClauseValueEditor.js +0 -91
- package/esm/filter-clause/value-editors/FilterClauseValueEditor.js.map +0 -1
- package/esm/filter-clause/value-editors/FilterClauseValueEditorDate.js +0 -62
- package/esm/filter-clause/value-editors/FilterClauseValueEditorDate.js.map +0 -1
- package/esm/filter-clause/value-editors/FilterClauseValueEditorNumber.js +0 -53
- package/esm/filter-clause/value-editors/FilterClauseValueEditorNumber.js.map +0 -1
- package/esm/filter-clause/value-editors/FilterClauseValueEditorText.js +0 -220
- package/esm/filter-clause/value-editors/FilterClauseValueEditorText.js.map +0 -1
- package/esm/filter-clause/value-editors/FilterClauseValueEditorTime.js +0 -60
- package/esm/filter-clause/value-editors/FilterClauseValueEditorTime.js.map +0 -1
- package/esm/filter-container/ExtendedSingleValueFilterClause.js +0 -60
- package/esm/filter-container/ExtendedSingleValueFilterClause.js.map +0 -1
- package/esm/filter-container/FilterContainer.css.js +0 -4
- package/esm/filter-container/FilterContainer.css.js.map +0 -1
- package/esm/filter-container/FilterContainer.js +0 -142
- package/esm/filter-container/FilterContainer.js.map +0 -1
- package/esm/filter-container/useFilterContainer.js +0 -133
- package/esm/filter-container/useFilterContainer.js.map +0 -1
- package/esm/filter-context-menu/useFilterContextMenu.js +0 -127
- package/esm/filter-context-menu/useFilterContextMenu.js.map +0 -1
- package/esm/filter-display/FilterDisplay.css.js +0 -4
- package/esm/filter-display/FilterDisplay.css.js.map +0 -1
- package/esm/filter-display/FilterDisplay.js +0 -77
- package/esm/filter-display/FilterDisplay.js.map +0 -1
- package/esm/filter-editor/FilterClauseCombinator.css.js +0 -4
- package/esm/filter-editor/FilterClauseCombinator.css.js.map +0 -1
- package/esm/filter-editor/FilterClauseCombinator.js +0 -40
- package/esm/filter-editor/FilterClauseCombinator.js.map +0 -1
- package/esm/filter-editor/FilterEditor.css.js +0 -4
- package/esm/filter-editor/FilterEditor.css.js.map +0 -1
- package/esm/filter-editor/FilterEditor.js +0 -99
- package/esm/filter-editor/FilterEditor.js.map +0 -1
- package/esm/filter-editor/useFilterEditor.js +0 -189
- package/esm/filter-editor/useFilterEditor.js.map +0 -1
- package/esm/filter-panel/FilterPanel.css.js +0 -4
- package/esm/filter-panel/FilterPanel.css.js.map +0 -1
- package/esm/filter-panel/FilterPanel.js +0 -89
- package/esm/filter-panel/FilterPanel.js.map +0 -1
- package/esm/filter-panel/useFilterPanel.js +0 -66
- package/esm/filter-panel/useFilterPanel.js.map +0 -1
- package/esm/filter-pill/FilterMenu.js +0 -61
- package/esm/filter-pill/FilterMenu.js.map +0 -1
- package/esm/filter-pill/FilterPill.css.js +0 -4
- package/esm/filter-pill/FilterPill.css.js.map +0 -1
- package/esm/filter-pill/FilterPill.js +0 -145
- package/esm/filter-pill/FilterPill.js.map +0 -1
- package/esm/filter-pill/FilterPillNext.css.js +0 -4
- package/esm/filter-pill/FilterPillNext.css.js.map +0 -1
- package/esm/filter-pill/FilterPillNext.js +0 -89
- package/esm/filter-pill/FilterPillNext.js.map +0 -1
- package/esm/filter-pill/filterAsReactNode.js +0 -25
- package/esm/filter-pill/filterAsReactNode.js.map +0 -1
- package/esm/filter-pill/getFilterLabel.js +0 -20
- package/esm/filter-pill/getFilterLabel.js.map +0 -1
- package/esm/filter-pill/getFilterTooltipText.js +0 -39
- package/esm/filter-pill/getFilterTooltipText.js.map +0 -1
- package/esm/filter-pill/useFilterPillNext.js +0 -63
- package/esm/filter-pill/useFilterPillNext.js.map +0 -1
- package/esm/filter-pill-menu/FilterPillMenuOptions.js +0 -27
- package/esm/filter-pill-menu/FilterPillMenuOptions.js.map +0 -1
- package/esm/filter-provider/FilterContext.js +0 -94
- package/esm/filter-provider/FilterContext.js.map +0 -1
- package/esm/filter-provider/FilterProvider.js +0 -238
- package/esm/filter-provider/FilterProvider.js.map +0 -1
- package/esm/filter-provider/filter-descriptor-utils.js +0 -61
- package/esm/filter-provider/filter-descriptor-utils.js.map +0 -1
- package/esm/filter-utils.js +0 -344
- package/esm/filter-utils.js.map +0 -1
- package/esm/index.js +0 -26
- package/esm/index.js.map +0 -1
- package/esm/inline-filter/InlineFilter.css.js +0 -4
- package/esm/inline-filter/InlineFilter.css.js.map +0 -1
- package/esm/inline-filter/InlineFilter.js +0 -68
- package/esm/inline-filter/InlineFilter.js.map +0 -1
- package/esm/inline-filter/useInlineFilter.js +0 -14
- package/esm/inline-filter/useInlineFilter.js.map +0 -1
- package/esm/quick-filters/QuickFilters.css.js +0 -4
- package/esm/quick-filters/QuickFilters.css.js.map +0 -1
- package/esm/quick-filters/QuickFilters.js +0 -96
- package/esm/quick-filters/QuickFilters.js.map +0 -1
- package/esm/quick-filters/useQuickFilters.js +0 -150
- package/esm/quick-filters/useQuickFilters.js.map +0 -1
- package/esm/saved-filters/DeleteFilterPrompt.js +0 -35
- package/esm/saved-filters/DeleteFilterPrompt.js.map +0 -1
- package/esm/saved-filters/FilterNamePrompt.css.js +0 -4
- package/esm/saved-filters/FilterNamePrompt.css.js.map +0 -1
- package/esm/saved-filters/FilterNamePrompt.js +0 -87
- package/esm/saved-filters/FilterNamePrompt.js.map +0 -1
- package/esm/saved-filters/SavedFilterPanel.css.js +0 -4
- package/esm/saved-filters/SavedFilterPanel.css.js.map +0 -1
- package/esm/saved-filters/SavedFilterPanel.js +0 -60
- package/esm/saved-filters/SavedFilterPanel.js.map +0 -1
- package/esm/saved-filters/useFilterNamePrompt.js +0 -95
- package/esm/saved-filters/useFilterNamePrompt.js.map +0 -1
- package/esm/saved-filters/useSavedFilterPanel.js +0 -27
- package/esm/saved-filters/useSavedFilterPanel.js.map +0 -1
- package/esm/tabbed-filter-container/TabbedFilterContainer.css.js +0 -4
- package/esm/tabbed-filter-container/TabbedFilterContainer.css.js.map +0 -1
- package/esm/tabbed-filter-container/TabbedFilterContainer.js +0 -55
- package/esm/tabbed-filter-container/TabbedFilterContainer.js.map +0 -1
- package/esm/toggle-filter/ToggleFilter.css.js +0 -4
- package/esm/toggle-filter/ToggleFilter.css.js.map +0 -1
- package/esm/toggle-filter/ToggleFilter.js +0 -83
- package/esm/toggle-filter/ToggleFilter.js.map +0 -1
- package/esm/toggle-filter/useToggleFilter.js +0 -65
- package/esm/toggle-filter/useToggleFilter.js.map +0 -1
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useFilterBar.js","sources":["../../../../packages/vuu-filters/src/filter-bar/useFilterBar.ts"],"sourcesContent":["import { queryClosest } from \"@vuu-ui/vuu-utils\";\nimport { useControlled } from \"@salt-ds/core\";\nimport { SyntheticEvent, useCallback } from \"react\";\nimport { FilterBarProps } from \"./FilterBar\";\n\nexport type FilterMode = \"custom-filter\" | \"quick-filter\";\n\nconst isFilterMode = (value?: string | null): value is FilterMode =>\n value === \"custom-filter\" || value === \"quick-filter\";\n\nexport const useFilterBar = ({\n defaultFilterMode,\n filterMode: filterModeProp,\n onChangeFilterMode,\n}: Pick<\n FilterBarProps,\n \"defaultFilterMode\" | \"filterMode\" | \"onChangeFilterMode\"\n>) => {\n const [filterMode, setFilterMode] = useControlled<FilterMode>({\n controlled: filterModeProp,\n default: defaultFilterMode ?? \"custom-filter\",\n name: \"useFilterBar\",\n state: \"filterMode\",\n });\n\n const handleChangeFilterMode = useCallback(\n (e: SyntheticEvent<HTMLButtonElement>) => {\n const button = queryClosest<HTMLButtonElement>(e.target, \"button\");\n const newFilterMode = button?.value;\n if (isFilterMode(newFilterMode)) {\n setFilterMode(newFilterMode);\n onChangeFilterMode?.(newFilterMode);\n }\n },\n [onChangeFilterMode, setFilterMode],\n );\n\n return {\n filterMode,\n onChangeFilterMode: handleChangeFilterMode,\n };\n};\n"],"names":[],"mappings":";;;;AAOA,MAAM,YAAe,GAAA,CAAC,KACpB,KAAA,KAAA,KAAU,mBAAmB,KAAU,KAAA,cAAA;AAElC,MAAM,eAAe,CAAC;AAAA,EAC3B,iBAAA;AAAA,EACA,UAAY,EAAA,cAAA;AAAA,EACZ;AACF,CAGM,KAAA;AACJ,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,aAA0B,CAAA;AAAA,IAC5D,UAAY,EAAA,cAAA;AAAA,IACZ,SAAS,iBAAqB,IAAA,eAAA;AAAA,IAC9B,IAAM,EAAA,cAAA;AAAA,IACN,KAAO,EAAA;AAAA,GACR,CAAA;AAED,EAAA,MAAM,sBAAyB,GAAA,WAAA;AAAA,IAC7B,CAAC,CAAyC,KAAA;AACxC,MAAA,MAAM,MAAS,GAAA,YAAA,CAAgC,CAAE,CAAA,MAAA,EAAQ,QAAQ,CAAA;AACjE,MAAA,MAAM,gBAAgB,MAAQ,EAAA,KAAA;AAC9B,MAAI,IAAA,YAAA,CAAa,aAAa,CAAG,EAAA;AAC/B,QAAA,aAAA,CAAc,aAAa,CAAA;AAC3B,QAAA,kBAAA,GAAqB,aAAa,CAAA;AAAA;AACpC,KACF;AAAA,IACA,CAAC,oBAAoB,aAAa;AAAA,GACpC;AAEA,EAAO,OAAA;AAAA,IACL,UAAA;AAAA,IACA,kBAAoB,EAAA;AAAA,GACtB;AACF;;;;"}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
var expandoComboboxCss = ".vuuExpandoCombobox {\n --expando-combobox-height: var(--vuuExpandoCombobox-height, var(--salt-size-base));\n --expando-combobox-fontSize: var(--vuuExpandoCombobox-fontSize, 12px);\n --saltPillInput-paddingLeft: 0px;\n --saltPillInput-paddingRight: 0px;\n\n display: inline-flex;\n flex-direction: column;\n height: var(--expando-combobox-height);\n min-width: 4px;\n padding: 0;\n\n .saltPill {\n height: 100%;\n padding-block: 0px;\n }\n\n .saltPillInput {\n min-height: var(--expando-combobox-height);\n min-width: 0px;\n }\n\n\n .saltPillInput-inputWrapper {\n height: 100%;\n padding: 0;\n }\n .saltPillInput-input {\n width: 0;\n }\n\n .saltPillInput-endAdornmentContainer {\n display: none;\n }\n .saltPillInput-activationIndicator {\n display: none;\n }\n\n}\n\n.vuuExpandoOption {\n min-width: calc(var(--salt-size-base) * 2);\n padding-left: var(--salt-spacing-200);\n padding-right: var(--salt-spacing-200);\n}\n\n\n.vuuExpandoCombobox:before {\n content: attr(data-text);\n display: block;\n font-size: var(--expando-combobox-fontSize);\n height: 0px;\n overflow: hidden;\n white-space: pre-wrap;\n}\n";
|
|
2
|
-
|
|
3
|
-
export { expandoComboboxCss as default };
|
|
4
|
-
//# sourceMappingURL=ExpandoCombobox.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ExpandoCombobox.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -1,112 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import cx from 'clsx';
|
|
3
|
-
import { ComboBox } from '@salt-ds/core';
|
|
4
|
-
import { forwardRef, useState, useCallback, useMemo } from 'react';
|
|
5
|
-
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
6
|
-
import { useWindow } from '@salt-ds/window';
|
|
7
|
-
import expandoComboboxCss from './ExpandoCombobox.css.js';
|
|
8
|
-
|
|
9
|
-
const classBase = "vuuExpandoCombobox";
|
|
10
|
-
const defaultItemToString = (item) => {
|
|
11
|
-
if (typeof item === "string") {
|
|
12
|
-
return item;
|
|
13
|
-
} else {
|
|
14
|
-
return item?.toString() ?? "";
|
|
15
|
-
}
|
|
16
|
-
};
|
|
17
|
-
const ExpandoCombobox = forwardRef(function ExpandoCombobox2({
|
|
18
|
-
children,
|
|
19
|
-
className,
|
|
20
|
-
inputProps: inputPropsProp,
|
|
21
|
-
itemToString = defaultItemToString,
|
|
22
|
-
multiselect,
|
|
23
|
-
onChange,
|
|
24
|
-
onSelectionChange,
|
|
25
|
-
onOpenChange,
|
|
26
|
-
value: valueProp,
|
|
27
|
-
dropdownOnAutofocus = true,
|
|
28
|
-
...props
|
|
29
|
-
}, forwardedRef) {
|
|
30
|
-
const targetWindow = useWindow();
|
|
31
|
-
useComponentCssInjection({
|
|
32
|
-
testId: "vuu-expando-combobox",
|
|
33
|
-
css: expandoComboboxCss,
|
|
34
|
-
window: targetWindow
|
|
35
|
-
});
|
|
36
|
-
const [open, setOpen] = useState(false);
|
|
37
|
-
const [selected, setSelected] = useState([]);
|
|
38
|
-
const [value, setValue] = useState(
|
|
39
|
-
valueProp === void 0 ? "" : valueProp.toString()
|
|
40
|
-
);
|
|
41
|
-
const handleChange = useCallback(
|
|
42
|
-
(evt) => {
|
|
43
|
-
const value2 = evt.target.value;
|
|
44
|
-
onChange?.(evt);
|
|
45
|
-
setValue(value2);
|
|
46
|
-
setSelected([]);
|
|
47
|
-
},
|
|
48
|
-
[onChange]
|
|
49
|
-
);
|
|
50
|
-
const handleSelectionChange = useCallback(
|
|
51
|
-
(evt, newSelected) => {
|
|
52
|
-
if (multiselect) {
|
|
53
|
-
onSelectionChange?.(evt, newSelected);
|
|
54
|
-
} else {
|
|
55
|
-
setSelected(newSelected);
|
|
56
|
-
const [selectedValue] = newSelected;
|
|
57
|
-
setTimeout(() => {
|
|
58
|
-
onSelectionChange?.(evt, newSelected);
|
|
59
|
-
setValue(itemToString(selectedValue));
|
|
60
|
-
}, 100);
|
|
61
|
-
}
|
|
62
|
-
},
|
|
63
|
-
[onSelectionChange, itemToString, multiselect]
|
|
64
|
-
);
|
|
65
|
-
const handleOpenChange = useCallback(
|
|
66
|
-
(open2, reason) => {
|
|
67
|
-
onOpenChange?.(open2, reason);
|
|
68
|
-
setOpen(open2);
|
|
69
|
-
},
|
|
70
|
-
[onOpenChange]
|
|
71
|
-
);
|
|
72
|
-
const inputProps = useMemo(() => {
|
|
73
|
-
return {
|
|
74
|
-
autoComplete: "off",
|
|
75
|
-
...inputPropsProp,
|
|
76
|
-
onFocus: (evt) => {
|
|
77
|
-
inputPropsProp?.onFocus?.(evt);
|
|
78
|
-
if (!dropdownOnAutofocus) return;
|
|
79
|
-
setTimeout(() => {
|
|
80
|
-
setOpen(true);
|
|
81
|
-
onOpenChange?.(true, "focus");
|
|
82
|
-
}, 100);
|
|
83
|
-
}
|
|
84
|
-
};
|
|
85
|
-
}, [inputPropsProp, dropdownOnAutofocus, onOpenChange]);
|
|
86
|
-
return /* @__PURE__ */ jsx(
|
|
87
|
-
"div",
|
|
88
|
-
{
|
|
89
|
-
className: cx(classBase, className),
|
|
90
|
-
"data-text": value,
|
|
91
|
-
ref: forwardedRef,
|
|
92
|
-
children: /* @__PURE__ */ jsx(
|
|
93
|
-
ComboBox,
|
|
94
|
-
{
|
|
95
|
-
...props,
|
|
96
|
-
inputProps,
|
|
97
|
-
multiselect,
|
|
98
|
-
onChange: handleChange,
|
|
99
|
-
onOpenChange: handleOpenChange,
|
|
100
|
-
onSelectionChange: handleSelectionChange,
|
|
101
|
-
open,
|
|
102
|
-
selected,
|
|
103
|
-
value,
|
|
104
|
-
children
|
|
105
|
-
}
|
|
106
|
-
)
|
|
107
|
-
}
|
|
108
|
-
);
|
|
109
|
-
});
|
|
110
|
-
|
|
111
|
-
export { ExpandoCombobox };
|
|
112
|
-
//# sourceMappingURL=ExpandoCombobox.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ExpandoCombobox.js","sources":["../../../../packages/vuu-filters/src/filter-clause/ExpandoCombobox.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { ComboBox, ComboBoxProps } from \"@salt-ds/core\";\nimport {\n ChangeEvent,\n ForwardedRef,\n ReactElement,\n Ref,\n SyntheticEvent,\n forwardRef,\n useCallback,\n useMemo,\n useState,\n} from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport expandoComboboxCss from \"./ExpandoCombobox.css\";\n\nconst classBase = \"vuuExpandoCombobox\";\n\nexport interface ExpandoComboboxProps<Item = string>\n extends Omit<ComboBoxProps<Item>, \"onOpenChange\"> {\n itemToString?: (item: Item) => string;\n dropdownOnAutofocus?: boolean;\n onOpenChange?: (open: boolean, reason?: \"manual\" | \"input\" | \"focus\") => void;\n}\n\nconst defaultItemToString = (item: unknown) => {\n if (typeof item === \"string\") {\n return item;\n } else {\n return item?.toString() ?? \"\";\n }\n};\nexport const ExpandoCombobox = forwardRef(function ExpandoCombobox<\n Item = string,\n>(\n {\n children,\n className,\n inputProps: inputPropsProp,\n itemToString = defaultItemToString,\n multiselect,\n onChange,\n onSelectionChange,\n onOpenChange,\n value: valueProp,\n dropdownOnAutofocus = true,\n ...props\n }: ExpandoComboboxProps<Item>,\n forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-expando-combobox\",\n css: expandoComboboxCss,\n window: targetWindow,\n });\n\n const [open, setOpen] = useState(false);\n const [selected, setSelected] = useState<Item[]>([]);\n const [value, setValue] = useState(\n valueProp === undefined ? \"\" : valueProp.toString(),\n );\n\n const handleChange = useCallback(\n (evt: ChangeEvent<HTMLInputElement>) => {\n const value = evt.target.value;\n onChange?.(evt);\n setValue(value);\n setSelected([]);\n },\n [onChange],\n );\n\n const handleSelectionChange = useCallback(\n (evt: SyntheticEvent, newSelected: Item[]) => {\n if (multiselect) {\n onSelectionChange?.(evt, newSelected);\n } else {\n setSelected(newSelected);\n const [selectedValue] = newSelected;\n setTimeout(() => {\n onSelectionChange?.(evt, newSelected);\n setValue(itemToString(selectedValue));\n }, 100);\n }\n },\n [onSelectionChange, itemToString, multiselect],\n );\n\n const handleOpenChange = useCallback(\n (open: boolean, reason?: \"manual\" | \"input\") => {\n onOpenChange?.(open, reason);\n setOpen(open);\n },\n [onOpenChange],\n );\n\n const inputProps = useMemo<ComboBoxProps<Item>[\"inputProps\"]>(() => {\n return {\n autoComplete: \"off\",\n ...inputPropsProp,\n onFocus: (evt) => {\n inputPropsProp?.onFocus?.(evt);\n if (!dropdownOnAutofocus) return;\n\n setTimeout(() => {\n setOpen(true);\n onOpenChange?.(true, \"focus\");\n }, 100);\n },\n };\n }, [inputPropsProp, dropdownOnAutofocus, onOpenChange]);\n\n return (\n <div\n className={cx(classBase, className)}\n data-text={value}\n ref={forwardedRef}\n >\n <ComboBox<Item>\n {...props}\n inputProps={inputProps}\n multiselect={multiselect}\n onChange={handleChange}\n onOpenChange={handleOpenChange}\n onSelectionChange={handleSelectionChange}\n open={open}\n selected={selected}\n value={value}\n >\n {children}\n </ComboBox>\n </div>\n );\n}) as <Item = string>(\n props: ExpandoComboboxProps<Item> & { ref?: Ref<HTMLDivElement> },\n) => ReactElement;\n"],"names":["ExpandoCombobox","value","open"],"mappings":";;;;;;;;AAkBA,MAAM,SAAY,GAAA,oBAAA;AASlB,MAAM,mBAAA,GAAsB,CAAC,IAAkB,KAAA;AAC7C,EAAI,IAAA,OAAO,SAAS,QAAU,EAAA;AAC5B,IAAO,OAAA,IAAA;AAAA,GACF,MAAA;AACL,IAAO,OAAA,IAAA,EAAM,UAAc,IAAA,EAAA;AAAA;AAE/B,CAAA;AACa,MAAA,eAAA,GAAkB,UAAW,CAAA,SAASA,gBAGjD,CAAA;AAAA,EACE,QAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAY,EAAA,cAAA;AAAA,EACZ,YAAe,GAAA,mBAAA;AAAA,EACf,WAAA;AAAA,EACA,QAAA;AAAA,EACA,iBAAA;AAAA,EACA,YAAA;AAAA,EACA,KAAO,EAAA,SAAA;AAAA,EACP,mBAAsB,GAAA,IAAA;AAAA,EACtB,GAAG;AACL,CAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,sBAAA;AAAA,IACR,GAAK,EAAA,kBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,KAAK,CAAA;AACtC,EAAA,MAAM,CAAC,QAAU,EAAA,WAAW,CAAI,GAAA,QAAA,CAAiB,EAAE,CAAA;AACnD,EAAM,MAAA,CAAC,KAAO,EAAA,QAAQ,CAAI,GAAA,QAAA;AAAA,IACxB,SAAc,KAAA,KAAA,CAAA,GAAY,EAAK,GAAA,SAAA,CAAU,QAAS;AAAA,GACpD;AAEA,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,GAAuC,KAAA;AACtC,MAAMC,MAAAA,MAAAA,GAAQ,IAAI,MAAO,CAAA,KAAA;AACzB,MAAA,QAAA,GAAW,GAAG,CAAA;AACd,MAAA,QAAA,CAASA,MAAK,CAAA;AACd,MAAA,WAAA,CAAY,EAAE,CAAA;AAAA,KAChB;AAAA,IACA,CAAC,QAAQ;AAAA,GACX;AAEA,EAAA,MAAM,qBAAwB,GAAA,WAAA;AAAA,IAC5B,CAAC,KAAqB,WAAwB,KAAA;AAC5C,MAAA,IAAI,WAAa,EAAA;AACf,QAAA,iBAAA,GAAoB,KAAK,WAAW,CAAA;AAAA,OAC/B,MAAA;AACL,QAAA,WAAA,CAAY,WAAW,CAAA;AACvB,QAAM,MAAA,CAAC,aAAa,CAAI,GAAA,WAAA;AACxB,QAAA,UAAA,CAAW,MAAM;AACf,UAAA,iBAAA,GAAoB,KAAK,WAAW,CAAA;AACpC,UAAS,QAAA,CAAA,YAAA,CAAa,aAAa,CAAC,CAAA;AAAA,WACnC,GAAG,CAAA;AAAA;AACR,KACF;AAAA,IACA,CAAC,iBAAmB,EAAA,YAAA,EAAc,WAAW;AAAA,GAC/C;AAEA,EAAA,MAAM,gBAAmB,GAAA,WAAA;AAAA,IACvB,CAACC,OAAe,MAAgC,KAAA;AAC9C,MAAA,YAAA,GAAeA,OAAM,MAAM,CAAA;AAC3B,MAAA,OAAA,CAAQA,KAAI,CAAA;AAAA,KACd;AAAA,IACA,CAAC,YAAY;AAAA,GACf;AAEA,EAAM,MAAA,UAAA,GAAa,QAA2C,MAAM;AAClE,IAAO,OAAA;AAAA,MACL,YAAc,EAAA,KAAA;AAAA,MACd,GAAG,cAAA;AAAA,MACH,OAAA,EAAS,CAAC,GAAQ,KAAA;AAChB,QAAA,cAAA,EAAgB,UAAU,GAAG,CAAA;AAC7B,QAAA,IAAI,CAAC,mBAAqB,EAAA;AAE1B,QAAA,UAAA,CAAW,MAAM;AACf,UAAA,OAAA,CAAQ,IAAI,CAAA;AACZ,UAAA,YAAA,GAAe,MAAM,OAAO,CAAA;AAAA,WAC3B,GAAG,CAAA;AAAA;AACR,KACF;AAAA,GACC,EAAA,CAAC,cAAgB,EAAA,mBAAA,EAAqB,YAAY,CAAC,CAAA;AAEtD,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,WAAW,EAAA,KAAA;AAAA,MACX,GAAK,EAAA,YAAA;AAAA,MAEL,QAAA,kBAAA,GAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACE,GAAG,KAAA;AAAA,UACJ,UAAA;AAAA,UACA,WAAA;AAAA,UACA,QAAU,EAAA,YAAA;AAAA,UACV,YAAc,EAAA,gBAAA;AAAA,UACd,iBAAmB,EAAA,qBAAA;AAAA,UACnB,IAAA;AAAA,UACA,QAAA;AAAA,UACA,KAAA;AAAA,UAEC;AAAA;AAAA;AACH;AAAA,GACF;AAEJ,CAAC;;;;"}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
var filterClauseCss = ".vuuFilterClause {\n --vuuExpandoInput-top: 0;\n --content-height: calc(var(--salt-size-base) - var(--salt-spacing-150));\n --vuuExpandoInput-height: var(--content-height);\n --vuuExpandoCombobox-height: var(--content-height);\n --saltButton-height: 16px;\n --saltButton-width: 16px;\n --salt-focused-outlineStyle: dotted;\n\n align-items: center;\n background: var(--salt-container-primary-background);\n border-color: var(--salt-editable-borderColor);\n border-radius: var(--saltButton-borderRadius);\n border-width: 1px;\n border-style: solid;\n display: flex;\n flex-direction: row;\n gap: var(--salt-spacing-50);\n height: calc(var(--salt-size-base) + var(--salt-size-spacing-100));\n min-width: calc(var(--salt-size-base) * 4);\n padding: 0 var(--salt-spacing-100);\n width: fit-content;\n\n .vuuFilterClauseField {\n flex: 0 0 auto;\n }\n .vuuFilterClauseField:last-child {\n flex: 1 0 auto;\n }\n\n .vuuFilterClauseField.vuuExpandoInput {\n align-items: flex-end;\n display: inline-flex;\n }\n\n .vuuExpandoCombobox {\n flex-basis: auto;\n flex-shrink: 0;\n flex-grow: 0;\n }\n\n &:focus-within {\n border-color: var(--salt-editable-borderColor-active);\n }\n\n .saltComboBox-focused,.saltComboBox-focused:hover {\n outline: none;\n }\n\n .saltTokenizedInput {\n height: 16px;\n min-height: 16px;\n }\n\n .saltTokenizedInput .saltInputPill {\n --pill-fontSize: 12px;\n --saltButton-borderStyle: none;\n --pill-background: none;\n height: 16px;\n margin: 0;\n }\n\n .saltTokenizedInput-pillGroup {\n padding: 0;\n height: 16px;\n }\n\n .saltDateInput {\n width: auto;\n }\n}\n\n.salt-density-high .vuuFilterClause {\n padding: 4px 8px;\n gap: 4px;\n --salt-text-lineHeight: 12px;\n --saltInputLegacy-fontSize: 12px;\n --saltInputLegacy-minWidth: 12px;\n}\n\n.salt-density-high .vuuFilterClause .saltInput {\n padding: 0;\n min-height: 16px;\n height: 16px;\n}\n\n.vuuFilterClauseOperator-hidden {\n display: none;\n}\n\n.vuuFilterClause .saltInput-focused,\n.vuuFilterClause .saltTokenizedInput-focused {\n outline: none;\n color: var(--salt-content-primary-foreground);\n}\n\n.vuuFilterClause-DatePicker {\n border: none;\n}\n";
|
|
2
|
-
|
|
3
|
-
export { filterClauseCss as default };
|
|
4
|
-
//# sourceMappingURL=FilterClause.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"FilterClause.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -1,100 +0,0 @@
|
|
|
1
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
3
|
-
import { useWindow } from '@salt-ds/window';
|
|
4
|
-
import cx from 'clsx';
|
|
5
|
-
import { useMemo } from 'react';
|
|
6
|
-
import { ColumnPicker } from './column-picker/ColumnPicker.js';
|
|
7
|
-
import { useFilterClause } from './useFilterClause.js';
|
|
8
|
-
import { FilterClauseValueEditor } from './value-editors/FilterClauseValueEditor.js';
|
|
9
|
-
import filterClauseCss from './FilterClause.css.js';
|
|
10
|
-
import { OperatorPicker } from './operator-picker/OperatorPicker.js';
|
|
11
|
-
|
|
12
|
-
const classBase = "vuuFilterClause";
|
|
13
|
-
const FilterClause = ({
|
|
14
|
-
className,
|
|
15
|
-
columnsByName,
|
|
16
|
-
onCancel,
|
|
17
|
-
onDropdownOpen,
|
|
18
|
-
onFocusSave,
|
|
19
|
-
filterClauseModel,
|
|
20
|
-
vuuTable,
|
|
21
|
-
dropdownOnAutofocus = true,
|
|
22
|
-
...htmlAttributes
|
|
23
|
-
}) => {
|
|
24
|
-
const {
|
|
25
|
-
inputProps,
|
|
26
|
-
columnRef,
|
|
27
|
-
filterClause,
|
|
28
|
-
onChangeValue,
|
|
29
|
-
onSelectColumn,
|
|
30
|
-
onSelectOperator,
|
|
31
|
-
onDeselectValue,
|
|
32
|
-
onOpenChange,
|
|
33
|
-
operatorRef,
|
|
34
|
-
selectedColumn,
|
|
35
|
-
valueRef,
|
|
36
|
-
showDropdownOnAutoFocus
|
|
37
|
-
} = useFilterClause({
|
|
38
|
-
filterClauseModel,
|
|
39
|
-
onCancel,
|
|
40
|
-
onFocusSave,
|
|
41
|
-
columnsByName,
|
|
42
|
-
dropdownOnAutofocus
|
|
43
|
-
});
|
|
44
|
-
const targetWindow = useWindow();
|
|
45
|
-
useComponentCssInjection({
|
|
46
|
-
testId: "vuu-filter-clause",
|
|
47
|
-
css: filterClauseCss,
|
|
48
|
-
window: targetWindow
|
|
49
|
-
});
|
|
50
|
-
const columns = useMemo(() => Object.values(columnsByName), [columnsByName]);
|
|
51
|
-
return /* @__PURE__ */ jsxs("div", { className: cx(classBase, className), ...htmlAttributes, tabIndex: 0, children: [
|
|
52
|
-
/* @__PURE__ */ jsx(
|
|
53
|
-
ColumnPicker,
|
|
54
|
-
{
|
|
55
|
-
inputProps,
|
|
56
|
-
className: cx(`${classBase}Field`, `${classBase}Column`),
|
|
57
|
-
columns,
|
|
58
|
-
dropdownOnAutofocus: showDropdownOnAutoFocus,
|
|
59
|
-
onSelect: onSelectColumn,
|
|
60
|
-
ref: columnRef,
|
|
61
|
-
value: filterClauseModel.column ?? ""
|
|
62
|
-
},
|
|
63
|
-
"column-field"
|
|
64
|
-
),
|
|
65
|
-
selectedColumn?.name ? /* @__PURE__ */ jsx(
|
|
66
|
-
OperatorPicker,
|
|
67
|
-
{
|
|
68
|
-
column: selectedColumn,
|
|
69
|
-
inputProps,
|
|
70
|
-
className: cx(`${classBase}Field`, `${classBase}Operator`, {
|
|
71
|
-
[`${classBase}Operator-hidden`]: selectedColumn === null
|
|
72
|
-
}),
|
|
73
|
-
dropdownOnAutofocus: showDropdownOnAutoFocus,
|
|
74
|
-
onSelect: onSelectOperator,
|
|
75
|
-
ref: operatorRef,
|
|
76
|
-
value: filterClauseModel.op ?? ""
|
|
77
|
-
},
|
|
78
|
-
"operator-field"
|
|
79
|
-
) : null,
|
|
80
|
-
filterClauseModel.op ? /* @__PURE__ */ jsx(
|
|
81
|
-
FilterClauseValueEditor,
|
|
82
|
-
{
|
|
83
|
-
dropdownOnAutofocus: showDropdownOnAutoFocus,
|
|
84
|
-
inputProps,
|
|
85
|
-
onChangeValue,
|
|
86
|
-
onOpenChange,
|
|
87
|
-
onDeselectValue,
|
|
88
|
-
operator: filterClauseModel.op,
|
|
89
|
-
ref: valueRef,
|
|
90
|
-
selectedColumn,
|
|
91
|
-
table: vuuTable,
|
|
92
|
-
value: filterClause?.values ?? filterClause?.value
|
|
93
|
-
},
|
|
94
|
-
"value-field"
|
|
95
|
-
) : null
|
|
96
|
-
] });
|
|
97
|
-
};
|
|
98
|
-
|
|
99
|
-
export { FilterClause };
|
|
100
|
-
//# sourceMappingURL=FilterClause.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"FilterClause.js","sources":["../../../../packages/vuu-filters/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 cx from \"clsx\";\nimport { HTMLAttributes, useMemo } from \"react\";\nimport { FilterClauseModel } from \"../FilterModel\";\nimport { ColumnPicker } from \"./column-picker/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 \"./operator-picker/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 onDropdownOpen?: () => void;\n onFocusSave?: () => void;\n dropdownOnAutofocus?: boolean;\n vuuTable: VuuTable;\n}\n\nconst classBase = \"vuuFilterClause\";\n\nexport const FilterClause = ({\n className,\n columnsByName,\n onCancel,\n onDropdownOpen,\n onFocusSave,\n filterClauseModel,\n vuuTable,\n dropdownOnAutofocus = true,\n ...htmlAttributes\n}: FilterClauseProps) => {\n const {\n inputProps,\n columnRef,\n filterClause,\n onChangeValue,\n onSelectColumn,\n onSelectOperator,\n onDeselectValue,\n onOpenChange,\n operatorRef,\n selectedColumn,\n valueRef,\n showDropdownOnAutoFocus,\n } = useFilterClause({\n filterClauseModel,\n onCancel,\n onFocusSave,\n columnsByName,\n dropdownOnAutofocus,\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 dropdownOnAutofocus={showDropdownOnAutoFocus}\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 dropdownOnAutofocus={showDropdownOnAutoFocus}\n key=\"operator-field\"\n onSelect={onSelectOperator}\n ref={operatorRef}\n value={filterClauseModel.op ?? \"\"}\n />\n ) : null}\n {filterClauseModel.op ? (\n <FilterClauseValueEditor\n dropdownOnAutofocus={showDropdownOnAutoFocus}\n inputProps={inputProps}\n key=\"value-field\"\n onChangeValue={onChangeValue}\n onOpenChange={onOpenChange}\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":";;;;;;;;;;;AAmCA,MAAM,SAAY,GAAA,iBAAA;AAEX,MAAM,eAAe,CAAC;AAAA,EAC3B,SAAA;AAAA,EACA,aAAA;AAAA,EACA,QAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAA;AAAA,EACA,iBAAA;AAAA,EACA,QAAA;AAAA,EACA,mBAAsB,GAAA,IAAA;AAAA,EACtB,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,YAAA;AAAA,IACA,WAAA;AAAA,IACA,cAAA;AAAA,IACA,QAAA;AAAA,IACA;AAAA,MACE,eAAgB,CAAA;AAAA,IAClB,iBAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA;AAAA,IACA,aAAA;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,QACA,mBAAqB,EAAA,uBAAA;AAAA,QAErB,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,QACD,mBAAqB,EAAA,uBAAA;AAAA,QAErB,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,mBAAqB,EAAA,uBAAA;AAAA,QACrB,UAAA;AAAA,QAEA,aAAA;AAAA,QACA,YAAA;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,MAVzC;AAAA,KAaJ,GAAA;AAAA,GACN,EAAA,CAAA;AAEJ;;;;"}
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { ExpandoCombobox } from '../ExpandoCombobox.js';
|
|
3
|
-
import { useForkRef, Option } from '@salt-ds/core';
|
|
4
|
-
import { forwardRef } from 'react';
|
|
5
|
-
import { useColumnPicker } from './useColumnPicker.js';
|
|
6
|
-
|
|
7
|
-
const ColumnPicker = forwardRef(function ColumnPicker2({
|
|
8
|
-
className,
|
|
9
|
-
columns,
|
|
10
|
-
dropdownOnAutofocus = true,
|
|
11
|
-
inputProps,
|
|
12
|
-
onSelect,
|
|
13
|
-
value: valueProp
|
|
14
|
-
}, forwardedRef) {
|
|
15
|
-
const { ref, ...comboProps } = useColumnPicker({
|
|
16
|
-
onSelect,
|
|
17
|
-
value: valueProp?.toString() ?? ""
|
|
18
|
-
});
|
|
19
|
-
return /* @__PURE__ */ jsx(
|
|
20
|
-
ExpandoCombobox,
|
|
21
|
-
{
|
|
22
|
-
...comboProps,
|
|
23
|
-
className,
|
|
24
|
-
"data-field": "column",
|
|
25
|
-
dropdownOnAutofocus,
|
|
26
|
-
inputProps,
|
|
27
|
-
ref: useForkRef(forwardedRef, ref),
|
|
28
|
-
title: "column",
|
|
29
|
-
children: columns.filter(
|
|
30
|
-
({ name }) => name.toLowerCase().includes(comboProps.value.toLowerCase())
|
|
31
|
-
).map(({ name, label = name }) => /* @__PURE__ */ jsx(Option, { value: name, children: label }, name))
|
|
32
|
-
}
|
|
33
|
-
);
|
|
34
|
-
});
|
|
35
|
-
|
|
36
|
-
export { ColumnPicker };
|
|
37
|
-
//# sourceMappingURL=ColumnPicker.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ColumnPicker.js","sources":["../../../../../packages/vuu-filters/src/filter-clause/column-picker/ColumnPicker.tsx"],"sourcesContent":["import type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { ExpandoCombobox } from \"../ExpandoCombobox\";\nimport { ComboBoxProps, Option, useForkRef } from \"@salt-ds/core\";\nimport { ForwardedRef, SyntheticEvent, forwardRef } from \"react\";\nimport { useColumnPicker } from \"./useColumnPicker\";\n\nexport type ColumnPickerProps = Pick<\n ComboBoxProps,\n \"className\" | \"inputProps\" | \"value\"\n> & {\n columns: readonly ColumnDescriptor[];\n onSelect: (evt: SyntheticEvent, columnName: string) => void;\n dropdownOnAutofocus?: boolean;\n};\n\nexport const ColumnPicker = forwardRef(function ColumnPicker(\n {\n className,\n columns,\n dropdownOnAutofocus = true,\n inputProps,\n onSelect,\n value: valueProp,\n }: ColumnPickerProps,\n forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n const { ref, ...comboProps } = useColumnPicker({\n onSelect,\n value: valueProp?.toString() ?? \"\",\n });\n\n return (\n <ExpandoCombobox\n {...comboProps}\n className={className}\n data-field=\"column\"\n dropdownOnAutofocus={dropdownOnAutofocus}\n inputProps={inputProps}\n ref={useForkRef(forwardedRef, ref)}\n title=\"column\"\n >\n {columns\n .filter(({ name }) =>\n name.toLowerCase().includes(comboProps.value.toLowerCase()),\n )\n .map(({ name, label = name }) => (\n <Option value={name} key={name}>\n {label}\n </Option>\n ))}\n </ExpandoCombobox>\n );\n});\n"],"names":["ColumnPicker"],"mappings":";;;;;;AAea,MAAA,YAAA,GAAe,UAAW,CAAA,SAASA,aAC9C,CAAA;AAAA,EACE,SAAA;AAAA,EACA,OAAA;AAAA,EACA,mBAAsB,GAAA,IAAA;AAAA,EACtB,UAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAO,EAAA;AACT,CAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,EAAE,GAAA,EAAK,GAAG,UAAA,KAAe,eAAgB,CAAA;AAAA,IAC7C,QAAA;AAAA,IACA,KAAA,EAAO,SAAW,EAAA,QAAA,EAAc,IAAA;AAAA,GACjC,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,eAAA;AAAA,IAAA;AAAA,MACE,GAAG,UAAA;AAAA,MACJ,SAAA;AAAA,MACA,YAAW,EAAA,QAAA;AAAA,MACX,mBAAA;AAAA,MACA,UAAA;AAAA,MACA,GAAA,EAAK,UAAW,CAAA,YAAA,EAAc,GAAG,CAAA;AAAA,MACjC,KAAM,EAAA,QAAA;AAAA,MAEL,QACE,EAAA,OAAA,CAAA,MAAA;AAAA,QAAO,CAAC,EAAE,IAAA,EACT,KAAA,IAAA,CAAK,WAAY,EAAA,CAAE,QAAS,CAAA,UAAA,CAAW,KAAM,CAAA,WAAA,EAAa;AAAA,OAE3D,CAAA,GAAA,CAAI,CAAC,EAAE,MAAM,KAAQ,GAAA,IAAA,EACpB,qBAAA,GAAA,CAAC,MAAO,EAAA,EAAA,KAAA,EAAO,IACZ,EAAA,QAAA,EAAA,KAAA,EAAA,EADuB,IAE1B,CACD;AAAA;AAAA,GACL;AAEJ,CAAC;;;;"}
|
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
import { useRef, useState, useCallback } from 'react';
|
|
2
|
-
import { dispatchKeyboardEvent } from '@vuu-ui/vuu-utils';
|
|
3
|
-
|
|
4
|
-
const useColumnPicker = ({
|
|
5
|
-
onSelect,
|
|
6
|
-
value: valueProp
|
|
7
|
-
}) => {
|
|
8
|
-
const ref = useRef(null);
|
|
9
|
-
const openRef = useRef(false);
|
|
10
|
-
const [value, setValue] = useState(valueProp);
|
|
11
|
-
const highlightFirstOption = useCallback(() => {
|
|
12
|
-
if (ref.current) {
|
|
13
|
-
const input = ref.current?.querySelector(
|
|
14
|
-
'input[role="combobox"]'
|
|
15
|
-
);
|
|
16
|
-
if (input) {
|
|
17
|
-
requestAnimationFrame(() => {
|
|
18
|
-
dispatchKeyboardEvent(input, "keydown", "ArrowDown");
|
|
19
|
-
});
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
}, []);
|
|
23
|
-
const handleChange = useCallback(
|
|
24
|
-
(event) => {
|
|
25
|
-
const value2 = event.target.value;
|
|
26
|
-
setValue(value2);
|
|
27
|
-
if (openRef.current && value2 === "") {
|
|
28
|
-
highlightFirstOption();
|
|
29
|
-
}
|
|
30
|
-
},
|
|
31
|
-
[highlightFirstOption]
|
|
32
|
-
);
|
|
33
|
-
const handleSelectionChange = useCallback(
|
|
34
|
-
(evt, [newSelected]) => {
|
|
35
|
-
onSelect?.(evt, newSelected);
|
|
36
|
-
setValue(newSelected ?? "");
|
|
37
|
-
},
|
|
38
|
-
[onSelect]
|
|
39
|
-
);
|
|
40
|
-
const handleOpenChange = useCallback(
|
|
41
|
-
(isOpen, reason) => {
|
|
42
|
-
openRef.current = isOpen;
|
|
43
|
-
if (isOpen && reason === "focus") {
|
|
44
|
-
highlightFirstOption();
|
|
45
|
-
}
|
|
46
|
-
},
|
|
47
|
-
[highlightFirstOption]
|
|
48
|
-
);
|
|
49
|
-
return {
|
|
50
|
-
onChange: handleChange,
|
|
51
|
-
onOpenChange: handleOpenChange,
|
|
52
|
-
onSelectionChange: handleSelectionChange,
|
|
53
|
-
ref,
|
|
54
|
-
value: value.toString().trim()
|
|
55
|
-
};
|
|
56
|
-
};
|
|
57
|
-
|
|
58
|
-
export { useColumnPicker };
|
|
59
|
-
//# sourceMappingURL=useColumnPicker.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useColumnPicker.js","sources":["../../../../../packages/vuu-filters/src/filter-clause/column-picker/useColumnPicker.ts"],"sourcesContent":["import {\n ChangeEvent,\n SyntheticEvent,\n useCallback,\n useRef,\n useState,\n} from \"react\";\nimport { dispatchKeyboardEvent } from \"@vuu-ui/vuu-utils\";\n\nexport const useColumnPicker = ({\n onSelect,\n value: valueProp,\n}: {\n onSelect: (evt: SyntheticEvent, columnName: string) => void;\n value: string;\n}) => {\n const ref = useRef<HTMLDivElement>(null);\n const openRef = useRef(false);\n const [value, setValue] = useState(valueProp);\n\n const highlightFirstOption = useCallback(() => {\n if (ref.current) {\n const input = ref.current?.querySelector<HTMLInputElement>(\n 'input[role=\"combobox\"]',\n );\n if (input) {\n requestAnimationFrame(() => {\n dispatchKeyboardEvent(input, \"keydown\", \"ArrowDown\");\n });\n }\n }\n }, []);\n\n const handleChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const value = event.target.value;\n setValue(value);\n if (openRef.current && value === \"\") {\n highlightFirstOption();\n }\n },\n [highlightFirstOption],\n );\n\n const handleSelectionChange = useCallback(\n (evt: SyntheticEvent, [newSelected]: string[]) => {\n onSelect?.(evt, newSelected);\n setValue(newSelected ?? \"\");\n },\n [onSelect],\n );\n\n const handleOpenChange = useCallback(\n (isOpen: boolean, reason?: \"manual\" | \"input\" | \"focus\") => {\n openRef.current = isOpen;\n if (isOpen && reason === \"focus\") {\n highlightFirstOption();\n }\n },\n [highlightFirstOption],\n );\n\n return {\n onChange: handleChange,\n onOpenChange: handleOpenChange,\n onSelectionChange: handleSelectionChange,\n ref,\n value: value.toString().trim(),\n };\n};\n"],"names":["value"],"mappings":";;;AASO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,QAAA;AAAA,EACA,KAAO,EAAA;AACT,CAGM,KAAA;AACJ,EAAM,MAAA,GAAA,GAAM,OAAuB,IAAI,CAAA;AACvC,EAAM,MAAA,OAAA,GAAU,OAAO,KAAK,CAAA;AAC5B,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAS,SAAS,CAAA;AAE5C,EAAM,MAAA,oBAAA,GAAuB,YAAY,MAAM;AAC7C,IAAA,IAAI,IAAI,OAAS,EAAA;AACf,MAAM,MAAA,KAAA,GAAQ,IAAI,OAAS,EAAA,aAAA;AAAA,QACzB;AAAA,OACF;AACA,MAAA,IAAI,KAAO,EAAA;AACT,QAAA,qBAAA,CAAsB,MAAM;AAC1B,UAAsB,qBAAA,CAAA,KAAA,EAAO,WAAW,WAAW,CAAA;AAAA,SACpD,CAAA;AAAA;AACH;AACF,GACF,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,KAAyC,KAAA;AACxC,MAAMA,MAAAA,MAAAA,GAAQ,MAAM,MAAO,CAAA,KAAA;AAC3B,MAAA,QAAA,CAASA,MAAK,CAAA;AACd,MAAI,IAAA,OAAA,CAAQ,OAAWA,IAAAA,MAAAA,KAAU,EAAI,EAAA;AACnC,QAAqB,oBAAA,EAAA;AAAA;AACvB,KACF;AAAA,IACA,CAAC,oBAAoB;AAAA,GACvB;AAEA,EAAA,MAAM,qBAAwB,GAAA,WAAA;AAAA,IAC5B,CAAC,GAAA,EAAqB,CAAC,WAAW,CAAgB,KAAA;AAChD,MAAA,QAAA,GAAW,KAAK,WAAW,CAAA;AAC3B,MAAA,QAAA,CAAS,eAAe,EAAE,CAAA;AAAA,KAC5B;AAAA,IACA,CAAC,QAAQ;AAAA,GACX;AAEA,EAAA,MAAM,gBAAmB,GAAA,WAAA;AAAA,IACvB,CAAC,QAAiB,MAA0C,KAAA;AAC1D,MAAA,OAAA,CAAQ,OAAU,GAAA,MAAA;AAClB,MAAI,IAAA,MAAA,IAAU,WAAW,OAAS,EAAA;AAChC,QAAqB,oBAAA,EAAA;AAAA;AACvB,KACF;AAAA,IACA,CAAC,oBAAoB;AAAA,GACvB;AAEA,EAAO,OAAA;AAAA,IACL,QAAU,EAAA,YAAA;AAAA,IACV,YAAc,EAAA,gBAAA;AAAA,IACd,iBAAmB,EAAA,qBAAA;AAAA,IACnB,GAAA;AAAA,IACA,KAAO,EAAA,KAAA,CAAM,QAAS,EAAA,CAAE,IAAK;AAAA,GAC/B;AACF;;;;"}
|
|
@@ -1,191 +0,0 @@
|
|
|
1
|
-
import { getElementDataIndex, queryClosest } from '@vuu-ui/vuu-utils';
|
|
2
|
-
|
|
3
|
-
const getFilterClauseElement = (possiblyDescendant) => possiblyDescendant?.closest(".vuuFilterClause");
|
|
4
|
-
const getFilterClauseFieldElement = (possiblyDescendant) => possiblyDescendant?.closest(".vuuFilterClauseField");
|
|
5
|
-
const mapFilterFieldToClassName = {
|
|
6
|
-
column: "vuuFilterClauseColumn",
|
|
7
|
-
operator: "vuuFilterClauseOperator",
|
|
8
|
-
value: "vuuFilterClauseValue"
|
|
9
|
-
};
|
|
10
|
-
const getFilterClauseDetails = ({ classList }) => {
|
|
11
|
-
if (classList.contains("vuuFilterClauseColumn")) {
|
|
12
|
-
return "column";
|
|
13
|
-
} else if (classList.contains("vuuFilterClauseOperator")) {
|
|
14
|
-
return "operator";
|
|
15
|
-
} else if (classList.contains("vuuFilterClauseValue")) {
|
|
16
|
-
return "value";
|
|
17
|
-
} else {
|
|
18
|
-
throw Error(
|
|
19
|
-
"getFilterClauseField, filterClauseElemnent is missing required class name"
|
|
20
|
-
);
|
|
21
|
-
}
|
|
22
|
-
};
|
|
23
|
-
const getFocusedFieldDetails = () => {
|
|
24
|
-
const el = document.activeElement;
|
|
25
|
-
const field = queryClosest(el, ".vuuFilterClauseField,.saltCalendar");
|
|
26
|
-
if (field?.matches(".vuuFilterClauseField")) {
|
|
27
|
-
const filterClause = queryClosest(field, ".vuuFilterClause");
|
|
28
|
-
if (filterClause && field) {
|
|
29
|
-
return [getElementDataIndex(filterClause), getFilterClauseDetails(field)];
|
|
30
|
-
}
|
|
31
|
-
} else if (field?.matches(".saltCalendar")) {
|
|
32
|
-
console.log("its in a calendar");
|
|
33
|
-
}
|
|
34
|
-
return [];
|
|
35
|
-
};
|
|
36
|
-
const focusField = (fieldOrClause) => {
|
|
37
|
-
const input = fieldOrClause?.querySelector("input");
|
|
38
|
-
if (input) {
|
|
39
|
-
input.focus();
|
|
40
|
-
requestAnimationFrame(() => {
|
|
41
|
-
input?.select();
|
|
42
|
-
});
|
|
43
|
-
}
|
|
44
|
-
};
|
|
45
|
-
const elementIsFilterCombinator = (element) => element !== null && element.classList.contains("vuuFilterClauseCombinator");
|
|
46
|
-
const elementIsFilterClause = (element) => element !== null && element.classList.contains("vuuFilterClause");
|
|
47
|
-
const focusFilterClauseField = (filterEditor, filterClauseIndex, fieldName = "value") => {
|
|
48
|
-
if (filterEditor) {
|
|
49
|
-
const fieldClassName = mapFilterFieldToClassName[fieldName];
|
|
50
|
-
const field = filterEditor.querySelector(
|
|
51
|
-
`.vuuFilterClause[data-index="${filterClauseIndex}"] .${fieldClassName}`
|
|
52
|
-
);
|
|
53
|
-
focusField(field);
|
|
54
|
-
}
|
|
55
|
-
};
|
|
56
|
-
const focusLastClauseValue = (filterEditor) => {
|
|
57
|
-
const field = Array.from(
|
|
58
|
-
filterEditor?.querySelectorAll(".vuuFilterClauseField")
|
|
59
|
-
).at(-1);
|
|
60
|
-
focusField(field);
|
|
61
|
-
};
|
|
62
|
-
const focusNextFocusableElement = (direction = "fwd") => {
|
|
63
|
-
const activeField = getFocusedField();
|
|
64
|
-
const filterClause = getFilterClauseElement(activeField);
|
|
65
|
-
if (direction === "fwd" && filterClause?.lastChild === activeField) {
|
|
66
|
-
requestAnimationFrame(() => {
|
|
67
|
-
focusNextFocusableElement();
|
|
68
|
-
});
|
|
69
|
-
} else {
|
|
70
|
-
const nextField = direction === "fwd" ? activeField?.nextElementSibling : activeField?.previousElementSibling;
|
|
71
|
-
nextField?.querySelector("input")?.focus();
|
|
72
|
-
}
|
|
73
|
-
};
|
|
74
|
-
const getFocusedField = () => {
|
|
75
|
-
const activeElement = document.activeElement;
|
|
76
|
-
if (activeElement?.classList.contains("vuuFilterClause-clearButton")) {
|
|
77
|
-
return activeElement;
|
|
78
|
-
} else {
|
|
79
|
-
return getFilterClauseFieldElement(activeElement);
|
|
80
|
-
}
|
|
81
|
-
};
|
|
82
|
-
const focusNextElement = () => {
|
|
83
|
-
const filterClauseField = getFocusedField();
|
|
84
|
-
const filterClause = getFilterClauseElement(filterClauseField);
|
|
85
|
-
if (filterClause && filterClauseField) {
|
|
86
|
-
if (filterClauseField.classList.contains("vuuFilterClauseValue")) {
|
|
87
|
-
const clearButton = filterClause.querySelector(
|
|
88
|
-
".vuuFilterClause-clearButton"
|
|
89
|
-
);
|
|
90
|
-
clearButton?.focus();
|
|
91
|
-
} else {
|
|
92
|
-
focusNextFocusableElement();
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
};
|
|
96
|
-
const cursorAtTextStart = (input) => input.selectionStart === 0;
|
|
97
|
-
const cursorAtTextEnd = (input) => input.selectionStart === input.value.length;
|
|
98
|
-
const getFieldName = (field) => field?.classList.contains("vuuFilterClauseColumn") ? "column" : field?.classList.contains("vuuFilterClauseOperator") ? "operator" : "value";
|
|
99
|
-
const clauseIsNotFirst = (el) => {
|
|
100
|
-
const clause = getFilterClauseElement(el);
|
|
101
|
-
if (clause) {
|
|
102
|
-
const index = getElementDataIndex(clause);
|
|
103
|
-
return index > 0;
|
|
104
|
-
}
|
|
105
|
-
};
|
|
106
|
-
const clauseIsNotLast = (el) => {
|
|
107
|
-
const clause = getFilterClauseElement(el);
|
|
108
|
-
const nextClause = clause?.nextElementSibling;
|
|
109
|
-
return nextClause?.classList.contains("vuuFilterClauseCombinator");
|
|
110
|
-
};
|
|
111
|
-
const tabToPreviousFilterCombinator = (currentElement) => {
|
|
112
|
-
const filterClause = getFilterClauseElement(currentElement);
|
|
113
|
-
const nextItem = filterClause.previousSibling;
|
|
114
|
-
console.log(`tab to previous combinator`);
|
|
115
|
-
nextItem?.focus();
|
|
116
|
-
};
|
|
117
|
-
const navigateToNextFilterClause = (currentElement, direction = "fwd") => {
|
|
118
|
-
if (direction === "bwd") {
|
|
119
|
-
if (elementIsFilterCombinator(currentElement)) {
|
|
120
|
-
const nextClause = currentElement.previousElementSibling;
|
|
121
|
-
if (elementIsFilterClause(nextClause)) {
|
|
122
|
-
const nextField = nextClause.querySelector(
|
|
123
|
-
".vuuFilterClauseValue"
|
|
124
|
-
);
|
|
125
|
-
console.log(`focus field Value ${nextField?.classList}`);
|
|
126
|
-
focusField(nextField);
|
|
127
|
-
}
|
|
128
|
-
} else {
|
|
129
|
-
const filterClause = getFilterClauseElement(currentElement);
|
|
130
|
-
const nextClause = filterClause.previousSibling;
|
|
131
|
-
const nextField = nextClause.querySelector(
|
|
132
|
-
".vuuFilterClauseValue"
|
|
133
|
-
);
|
|
134
|
-
focusField(nextField);
|
|
135
|
-
}
|
|
136
|
-
} else {
|
|
137
|
-
const nextClause = currentElement.nextSibling;
|
|
138
|
-
focusField(nextClause);
|
|
139
|
-
}
|
|
140
|
-
};
|
|
141
|
-
const navigateToNextItemIfAtBoundary = (evt) => {
|
|
142
|
-
const input = evt.target;
|
|
143
|
-
const field = getFilterClauseFieldElement(input);
|
|
144
|
-
if (evt.key === "ArrowLeft") {
|
|
145
|
-
if (cursorAtTextStart(input)) {
|
|
146
|
-
const fieldName = getFieldName(field);
|
|
147
|
-
if (fieldName === "column") {
|
|
148
|
-
if (clauseIsNotFirst(input)) {
|
|
149
|
-
const filterClause = getFilterClauseElement(field);
|
|
150
|
-
const combinator = filterClause.previousElementSibling;
|
|
151
|
-
combinator?.focus();
|
|
152
|
-
}
|
|
153
|
-
} else {
|
|
154
|
-
evt.preventDefault();
|
|
155
|
-
focusField(field.previousSibling);
|
|
156
|
-
}
|
|
157
|
-
}
|
|
158
|
-
evt.stopPropagation();
|
|
159
|
-
} else if (evt.key === "ArrowRight") {
|
|
160
|
-
if (cursorAtTextEnd(input)) {
|
|
161
|
-
const fieldName = getFieldName(field);
|
|
162
|
-
if (fieldName === "value") {
|
|
163
|
-
if (clauseIsNotLast(input)) {
|
|
164
|
-
const filterClause = getFilterClauseElement(field);
|
|
165
|
-
const combinator = filterClause.nextElementSibling;
|
|
166
|
-
combinator?.focus();
|
|
167
|
-
}
|
|
168
|
-
return;
|
|
169
|
-
} else {
|
|
170
|
-
evt.preventDefault();
|
|
171
|
-
focusField(field.nextSibling);
|
|
172
|
-
}
|
|
173
|
-
}
|
|
174
|
-
evt.stopPropagation();
|
|
175
|
-
}
|
|
176
|
-
};
|
|
177
|
-
const focusFirstClauseIfAllClausesValid = (filterEditor) => {
|
|
178
|
-
const columInput = Array.from(
|
|
179
|
-
filterEditor.querySelectorAll(".vuuFilterClauseColumn input")
|
|
180
|
-
);
|
|
181
|
-
if (columInput.every((input) => input.value.length > 0)) {
|
|
182
|
-
setTimeout(() => {
|
|
183
|
-
const input = columInput.at(0);
|
|
184
|
-
input?.select();
|
|
185
|
-
input?.focus();
|
|
186
|
-
}, 100);
|
|
187
|
-
}
|
|
188
|
-
};
|
|
189
|
-
|
|
190
|
-
export { clauseIsNotFirst, elementIsFilterClause, elementIsFilterCombinator, focusFilterClauseField, focusFirstClauseIfAllClausesValid, focusLastClauseValue, focusNextElement, focusNextFocusableElement, getFocusedFieldDetails, navigateToNextFilterClause, navigateToNextItemIfAtBoundary, tabToPreviousFilterCombinator };
|
|
191
|
-
//# sourceMappingURL=filterClauseFocusManagement.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"filterClauseFocusManagement.js","sources":["../../../../packages/vuu-filters/src/filter-clause/filterClauseFocusManagement.ts"],"sourcesContent":["import { getElementDataIndex, queryClosest } from \"@vuu-ui/vuu-utils\";\nimport { KeyboardEvent } from \"react\";\n\nconst getFilterClauseElement = (possiblyDescendant?: HTMLElement) =>\n possiblyDescendant?.closest(\".vuuFilterClause\") as HTMLElement;\n\nconst getFilterClauseFieldElement = (possiblyDescendant?: HTMLElement) =>\n possiblyDescendant?.closest(\".vuuFilterClauseField\") as HTMLElement;\n\ntype FilterClauseFieldName = \"column\" | \"operator\" | \"value\";\nconst mapFilterFieldToClassName: Record<FilterClauseFieldName, string> = {\n column: \"vuuFilterClauseColumn\",\n operator: \"vuuFilterClauseOperator\",\n value: \"vuuFilterClauseValue\",\n};\n\nconst getFilterClauseDetails = ({ classList }: HTMLElement) => {\n if (classList.contains(\"vuuFilterClauseColumn\")) {\n return \"column\";\n } else if (classList.contains(\"vuuFilterClauseOperator\")) {\n return \"operator\";\n } else if (classList.contains(\"vuuFilterClauseValue\")) {\n return \"value\";\n } else {\n throw Error(\n \"getFilterClauseField, filterClauseElemnent is missing required class name\",\n );\n }\n};\n\nexport const getFocusedFieldDetails = (): [number, string] | [] => {\n const el = document.activeElement as HTMLElement;\n const field = queryClosest(el, \".vuuFilterClauseField,.saltCalendar\");\n if (field?.matches(\".vuuFilterClauseField\")) {\n const filterClause = queryClosest(field, \".vuuFilterClause\");\n if (filterClause && field) {\n return [getElementDataIndex(filterClause), getFilterClauseDetails(field)];\n }\n } else if (field?.matches(\".saltCalendar\")) {\n console.log(\"its in a calendar\");\n }\n // const filterClause = queryClosest(field, \".vuuFilterClause\");\n // if (filterClause && field) {\n // return [getElementDataIndex(filterClause), getFilterClauseDetails(field)];\n // } else {\n return [];\n // }\n};\n\n// Focus the input control within field. If clause passed, will\n// focus first field within clause\nconst focusField = (fieldOrClause: HTMLElement | null) => {\n const input = fieldOrClause?.querySelector(\"input\");\n if (input) {\n input.focus();\n requestAnimationFrame(() => {\n input?.select();\n });\n }\n};\n\nexport const elementIsFilterCombinator = (\n element: Element | null,\n): element is HTMLElement =>\n element !== null && element.classList.contains(\"vuuFilterClauseCombinator\");\n\nexport const elementIsFilterClause = (\n element: Element | null,\n): element is HTMLElement =>\n element !== null && element.classList.contains(\"vuuFilterClause\");\n\nexport const focusFilterClauseField = (\n filterEditor: HTMLElement,\n filterClauseIndex: number,\n fieldName: FilterClauseFieldName = \"value\",\n) => {\n if (filterEditor) {\n const fieldClassName = mapFilterFieldToClassName[fieldName];\n const field = filterEditor.querySelector(\n `.vuuFilterClause[data-index=\"${filterClauseIndex}\"] .${fieldClassName}`,\n ) as HTMLElement;\n focusField(field);\n }\n};\n\nexport const focusLastClauseValue = (filterEditor: HTMLElement) => {\n const field = Array.from(\n filterEditor?.querySelectorAll(\".vuuFilterClauseField\"),\n ).at(-1) as HTMLElement;\n focusField(field);\n};\n\nexport const focusNextFocusableElement = (direction: \"fwd\" | \"bwd\" = \"fwd\") => {\n const activeField = getFocusedField() as HTMLElement;\n const filterClause = getFilterClauseElement(activeField);\n if (direction === \"fwd\" && filterClause?.lastChild === activeField) {\n requestAnimationFrame(() => {\n focusNextFocusableElement();\n });\n } else {\n const nextField =\n direction === \"fwd\"\n ? (activeField?.nextElementSibling as HTMLElement)\n : (activeField?.previousElementSibling as HTMLElement);\n\n nextField?.querySelector(\"input\")?.focus();\n }\n};\n\nconst getFocusedField = () => {\n const activeElement = document.activeElement as HTMLElement;\n if (activeElement?.classList.contains(\"vuuFilterClause-clearButton\")) {\n return activeElement as HTMLElement;\n } else {\n return getFilterClauseFieldElement(activeElement);\n }\n};\n\nexport const focusNextElement = () => {\n const filterClauseField = getFocusedField();\n const filterClause = getFilterClauseElement(filterClauseField);\n if (filterClause && filterClauseField) {\n if (filterClauseField.classList.contains(\"vuuFilterClauseValue\")) {\n const clearButton = filterClause.querySelector(\n \".vuuFilterClause-clearButton\",\n ) as HTMLButtonElement;\n clearButton?.focus();\n } else {\n focusNextFocusableElement();\n }\n }\n};\n\nconst cursorAtTextStart = (input: HTMLInputElement) =>\n input.selectionStart === 0;\n\nconst cursorAtTextEnd = (input: HTMLInputElement) =>\n input.selectionStart === input.value.length;\n\nconst getFieldName = (field: HTMLElement) =>\n field?.classList.contains(\"vuuFilterClauseColumn\")\n ? \"column\"\n : field?.classList.contains(\"vuuFilterClauseOperator\")\n ? \"operator\"\n : \"value\";\n\nexport const clauseIsNotFirst = (el: HTMLElement) => {\n const clause = getFilterClauseElement(el);\n if (clause) {\n const index = getElementDataIndex(clause);\n return index > 0;\n }\n};\n\nconst clauseIsNotLast = (el: HTMLElement) => {\n const clause = getFilterClauseElement(el);\n const nextClause = clause?.nextElementSibling as HTMLElement;\n return nextClause?.classList.contains(\"vuuFilterClauseCombinator\");\n};\n\nexport const tabToPreviousFilterCombinator = (currentElement: HTMLElement) => {\n const filterClause = getFilterClauseElement(currentElement);\n const nextItem = filterClause.previousSibling as HTMLElement;\n console.log(`tab to previous combinator`);\n nextItem?.focus();\n};\n\nexport const navigateToNextFilterClause = (\n currentElement: HTMLElement,\n direction: \"bwd\" | \"fwd\" = \"fwd\",\n) => {\n if (direction === \"bwd\") {\n if (elementIsFilterCombinator(currentElement)) {\n const nextClause = currentElement.previousElementSibling;\n if (elementIsFilterClause(nextClause)) {\n const nextField = nextClause.querySelector(\n \".vuuFilterClauseValue\",\n ) as HTMLElement;\n console.log(`focus field Value ${nextField?.classList}`);\n focusField(nextField);\n }\n } else {\n const filterClause = getFilterClauseElement(currentElement);\n const nextClause = filterClause.previousSibling as HTMLElement;\n const nextField = nextClause.querySelector(\n \".vuuFilterClauseValue\",\n ) as HTMLElement;\n focusField(nextField);\n }\n } else {\n const nextClause = currentElement.nextSibling as HTMLElement;\n focusField(nextClause);\n }\n};\n\n// The logic around preventDefault/stopPropagation is important\n// in this function\nexport const navigateToNextItemIfAtBoundary = (\n evt: KeyboardEvent<HTMLInputElement>,\n) => {\n const input = evt.target as HTMLInputElement;\n const field = getFilterClauseFieldElement(input);\n if (evt.key === \"ArrowLeft\") {\n if (cursorAtTextStart(input)) {\n const fieldName = getFieldName(field);\n if (fieldName === \"column\") {\n if (clauseIsNotFirst(input)) {\n const filterClause = getFilterClauseElement(field);\n const combinator = filterClause.previousElementSibling as HTMLElement;\n combinator?.focus();\n }\n } else {\n evt.preventDefault();\n focusField(field.previousSibling as HTMLElement);\n }\n }\n // stopPropagation, even if cursor is not at start. We want the arrowLeft to move the cursor\n evt.stopPropagation();\n } else if (evt.key === \"ArrowRight\") {\n if (cursorAtTextEnd(input as HTMLInputElement)) {\n const fieldName = getFieldName(field);\n if (fieldName === \"value\") {\n if (clauseIsNotLast(input)) {\n const filterClause = getFilterClauseElement(field);\n const combinator = filterClause.nextElementSibling as HTMLElement;\n combinator?.focus();\n }\n // Do not preventDefault, stopPropagation\n return;\n } else {\n evt.preventDefault();\n focusField(field.nextSibling as HTMLElement);\n }\n }\n // stopPropagation, even if cursor is not at end. We want the arrowRight to move the cursor\n evt.stopPropagation();\n }\n};\n\nexport const focusFirstClauseIfAllClausesValid = (\n filterEditor: HTMLElement,\n) => {\n const columInput = Array.from(\n filterEditor.querySelectorAll(\".vuuFilterClauseColumn input\"),\n ) as HTMLInputElement[];\n if (columInput.every((input) => input.value.length > 0)) {\n setTimeout(() => {\n const input = columInput.at(0);\n input?.select();\n input?.focus();\n }, 100);\n }\n};\n"],"names":[],"mappings":";;AAGA,MAAM,sBAAyB,GAAA,CAAC,kBAC9B,KAAA,kBAAA,EAAoB,QAAQ,kBAAkB,CAAA;AAEhD,MAAM,2BAA8B,GAAA,CAAC,kBACnC,KAAA,kBAAA,EAAoB,QAAQ,uBAAuB,CAAA;AAGrD,MAAM,yBAAmE,GAAA;AAAA,EACvE,MAAQ,EAAA,uBAAA;AAAA,EACR,QAAU,EAAA,yBAAA;AAAA,EACV,KAAO,EAAA;AACT,CAAA;AAEA,MAAM,sBAAyB,GAAA,CAAC,EAAE,SAAA,EAA6B,KAAA;AAC7D,EAAI,IAAA,SAAA,CAAU,QAAS,CAAA,uBAAuB,CAAG,EAAA;AAC/C,IAAO,OAAA,QAAA;AAAA,GACE,MAAA,IAAA,SAAA,CAAU,QAAS,CAAA,yBAAyB,CAAG,EAAA;AACxD,IAAO,OAAA,UAAA;AAAA,GACE,MAAA,IAAA,SAAA,CAAU,QAAS,CAAA,sBAAsB,CAAG,EAAA;AACrD,IAAO,OAAA,OAAA;AAAA,GACF,MAAA;AACL,IAAM,MAAA,KAAA;AAAA,MACJ;AAAA,KACF;AAAA;AAEJ,CAAA;AAEO,MAAM,yBAAyB,MAA6B;AACjE,EAAA,MAAM,KAAK,QAAS,CAAA,aAAA;AACpB,EAAM,MAAA,KAAA,GAAQ,YAAa,CAAA,EAAA,EAAI,qCAAqC,CAAA;AACpE,EAAI,IAAA,KAAA,EAAO,OAAQ,CAAA,uBAAuB,CAAG,EAAA;AAC3C,IAAM,MAAA,YAAA,GAAe,YAAa,CAAA,KAAA,EAAO,kBAAkB,CAAA;AAC3D,IAAA,IAAI,gBAAgB,KAAO,EAAA;AACzB,MAAA,OAAO,CAAC,mBAAoB,CAAA,YAAY,CAAG,EAAA,sBAAA,CAAuB,KAAK,CAAC,CAAA;AAAA;AAC1E,GACS,MAAA,IAAA,KAAA,EAAO,OAAQ,CAAA,eAAe,CAAG,EAAA;AAC1C,IAAA,OAAA,CAAQ,IAAI,mBAAmB,CAAA;AAAA;AAMjC,EAAA,OAAO,EAAC;AAEV;AAIA,MAAM,UAAA,GAAa,CAAC,aAAsC,KAAA;AACxD,EAAM,MAAA,KAAA,GAAQ,aAAe,EAAA,aAAA,CAAc,OAAO,CAAA;AAClD,EAAA,IAAI,KAAO,EAAA;AACT,IAAA,KAAA,CAAM,KAAM,EAAA;AACZ,IAAA,qBAAA,CAAsB,MAAM;AAC1B,MAAA,KAAA,EAAO,MAAO,EAAA;AAAA,KACf,CAAA;AAAA;AAEL,CAAA;AAEa,MAAA,yBAAA,GAA4B,CACvC,OAEA,KAAA,OAAA,KAAY,QAAQ,OAAQ,CAAA,SAAA,CAAU,SAAS,2BAA2B;AAE/D,MAAA,qBAAA,GAAwB,CACnC,OAEA,KAAA,OAAA,KAAY,QAAQ,OAAQ,CAAA,SAAA,CAAU,SAAS,iBAAiB;AAE3D,MAAM,sBAAyB,GAAA,CACpC,YACA,EAAA,iBAAA,EACA,YAAmC,OAChC,KAAA;AACH,EAAA,IAAI,YAAc,EAAA;AAChB,IAAM,MAAA,cAAA,GAAiB,0BAA0B,SAAS,CAAA;AAC1D,IAAA,MAAM,QAAQ,YAAa,CAAA,aAAA;AAAA,MACzB,CAAA,6BAAA,EAAgC,iBAAiB,CAAA,IAAA,EAAO,cAAc,CAAA;AAAA,KACxE;AACA,IAAA,UAAA,CAAW,KAAK,CAAA;AAAA;AAEpB;AAEa,MAAA,oBAAA,GAAuB,CAAC,YAA8B,KAAA;AACjE,EAAA,MAAM,QAAQ,KAAM,CAAA,IAAA;AAAA,IAClB,YAAA,EAAc,iBAAiB,uBAAuB;AAAA,GACxD,CAAE,GAAG,CAAE,CAAA,CAAA;AACP,EAAA,UAAA,CAAW,KAAK,CAAA;AAClB;AAEa,MAAA,yBAAA,GAA4B,CAAC,SAAA,GAA2B,KAAU,KAAA;AAC7E,EAAA,MAAM,cAAc,eAAgB,EAAA;AACpC,EAAM,MAAA,YAAA,GAAe,uBAAuB,WAAW,CAAA;AACvD,EAAA,IAAI,SAAc,KAAA,KAAA,IAAS,YAAc,EAAA,SAAA,KAAc,WAAa,EAAA;AAClE,IAAA,qBAAA,CAAsB,MAAM;AAC1B,MAA0B,yBAAA,EAAA;AAAA,KAC3B,CAAA;AAAA,GACI,MAAA;AACL,IAAA,MAAM,SACJ,GAAA,SAAA,KAAc,KACT,GAAA,WAAA,EAAa,qBACb,WAAa,EAAA,sBAAA;AAEpB,IAAW,SAAA,EAAA,aAAA,CAAc,OAAO,CAAA,EAAG,KAAM,EAAA;AAAA;AAE7C;AAEA,MAAM,kBAAkB,MAAM;AAC5B,EAAA,MAAM,gBAAgB,QAAS,CAAA,aAAA;AAC/B,EAAA,IAAI,aAAe,EAAA,SAAA,CAAU,QAAS,CAAA,6BAA6B,CAAG,EAAA;AACpE,IAAO,OAAA,aAAA;AAAA,GACF,MAAA;AACL,IAAA,OAAO,4BAA4B,aAAa,CAAA;AAAA;AAEpD,CAAA;AAEO,MAAM,mBAAmB,MAAM;AACpC,EAAA,MAAM,oBAAoB,eAAgB,EAAA;AAC1C,EAAM,MAAA,YAAA,GAAe,uBAAuB,iBAAiB,CAAA;AAC7D,EAAA,IAAI,gBAAgB,iBAAmB,EAAA;AACrC,IAAA,IAAI,iBAAkB,CAAA,SAAA,CAAU,QAAS,CAAA,sBAAsB,CAAG,EAAA;AAChE,MAAA,MAAM,cAAc,YAAa,CAAA,aAAA;AAAA,QAC/B;AAAA,OACF;AACA,MAAA,WAAA,EAAa,KAAM,EAAA;AAAA,KACd,MAAA;AACL,MAA0B,yBAAA,EAAA;AAAA;AAC5B;AAEJ;AAEA,MAAM,iBAAoB,GAAA,CAAC,KACzB,KAAA,KAAA,CAAM,cAAmB,KAAA,CAAA;AAE3B,MAAM,kBAAkB,CAAC,KAAA,KACvB,KAAM,CAAA,cAAA,KAAmB,MAAM,KAAM,CAAA,MAAA;AAEvC,MAAM,YAAe,GAAA,CAAC,KACpB,KAAA,KAAA,EAAO,UAAU,QAAS,CAAA,uBAAuB,CAC7C,GAAA,QAAA,GACA,KAAO,EAAA,SAAA,CAAU,QAAS,CAAA,yBAAyB,IACjD,UACA,GAAA,OAAA;AAEK,MAAA,gBAAA,GAAmB,CAAC,EAAoB,KAAA;AACnD,EAAM,MAAA,MAAA,GAAS,uBAAuB,EAAE,CAAA;AACxC,EAAA,IAAI,MAAQ,EAAA;AACV,IAAM,MAAA,KAAA,GAAQ,oBAAoB,MAAM,CAAA;AACxC,IAAA,OAAO,KAAQ,GAAA,CAAA;AAAA;AAEnB;AAEA,MAAM,eAAA,GAAkB,CAAC,EAAoB,KAAA;AAC3C,EAAM,MAAA,MAAA,GAAS,uBAAuB,EAAE,CAAA;AACxC,EAAA,MAAM,aAAa,MAAQ,EAAA,kBAAA;AAC3B,EAAO,OAAA,UAAA,EAAY,SAAU,CAAA,QAAA,CAAS,2BAA2B,CAAA;AACnE,CAAA;AAEa,MAAA,6BAAA,GAAgC,CAAC,cAAgC,KAAA;AAC5E,EAAM,MAAA,YAAA,GAAe,uBAAuB,cAAc,CAAA;AAC1D,EAAA,MAAM,WAAW,YAAa,CAAA,eAAA;AAC9B,EAAA,OAAA,CAAQ,IAAI,CAA4B,0BAAA,CAAA,CAAA;AACxC,EAAA,QAAA,EAAU,KAAM,EAAA;AAClB;AAEO,MAAM,0BAA6B,GAAA,CACxC,cACA,EAAA,SAAA,GAA2B,KACxB,KAAA;AACH,EAAA,IAAI,cAAc,KAAO,EAAA;AACvB,IAAI,IAAA,yBAAA,CAA0B,cAAc,CAAG,EAAA;AAC7C,MAAA,MAAM,aAAa,cAAe,CAAA,sBAAA;AAClC,MAAI,IAAA,qBAAA,CAAsB,UAAU,CAAG,EAAA;AACrC,QAAA,MAAM,YAAY,UAAW,CAAA,aAAA;AAAA,UAC3B;AAAA,SACF;AACA,QAAA,OAAA,CAAQ,GAAI,CAAA,CAAA,kBAAA,EAAqB,SAAW,EAAA,SAAS,CAAE,CAAA,CAAA;AACvD,QAAA,UAAA,CAAW,SAAS,CAAA;AAAA;AACtB,KACK,MAAA;AACL,MAAM,MAAA,YAAA,GAAe,uBAAuB,cAAc,CAAA;AAC1D,MAAA,MAAM,aAAa,YAAa,CAAA,eAAA;AAChC,MAAA,MAAM,YAAY,UAAW,CAAA,aAAA;AAAA,QAC3B;AAAA,OACF;AACA,MAAA,UAAA,CAAW,SAAS,CAAA;AAAA;AACtB,GACK,MAAA;AACL,IAAA,MAAM,aAAa,cAAe,CAAA,WAAA;AAClC,IAAA,UAAA,CAAW,UAAU,CAAA;AAAA;AAEzB;AAIa,MAAA,8BAAA,GAAiC,CAC5C,GACG,KAAA;AACH,EAAA,MAAM,QAAQ,GAAI,CAAA,MAAA;AAClB,EAAM,MAAA,KAAA,GAAQ,4BAA4B,KAAK,CAAA;AAC/C,EAAI,IAAA,GAAA,CAAI,QAAQ,WAAa,EAAA;AAC3B,IAAI,IAAA,iBAAA,CAAkB,KAAK,CAAG,EAAA;AAC5B,MAAM,MAAA,SAAA,GAAY,aAAa,KAAK,CAAA;AACpC,MAAA,IAAI,cAAc,QAAU,EAAA;AAC1B,QAAI,IAAA,gBAAA,CAAiB,KAAK,CAAG,EAAA;AAC3B,UAAM,MAAA,YAAA,GAAe,uBAAuB,KAAK,CAAA;AACjD,UAAA,MAAM,aAAa,YAAa,CAAA,sBAAA;AAChC,UAAA,UAAA,EAAY,KAAM,EAAA;AAAA;AACpB,OACK,MAAA;AACL,QAAA,GAAA,CAAI,cAAe,EAAA;AACnB,QAAA,UAAA,CAAW,MAAM,eAA8B,CAAA;AAAA;AACjD;AAGF,IAAA,GAAA,CAAI,eAAgB,EAAA;AAAA,GACtB,MAAA,IAAW,GAAI,CAAA,GAAA,KAAQ,YAAc,EAAA;AACnC,IAAI,IAAA,eAAA,CAAgB,KAAyB,CAAG,EAAA;AAC9C,MAAM,MAAA,SAAA,GAAY,aAAa,KAAK,CAAA;AACpC,MAAA,IAAI,cAAc,OAAS,EAAA;AACzB,QAAI,IAAA,eAAA,CAAgB,KAAK,CAAG,EAAA;AAC1B,UAAM,MAAA,YAAA,GAAe,uBAAuB,KAAK,CAAA;AACjD,UAAA,MAAM,aAAa,YAAa,CAAA,kBAAA;AAChC,UAAA,UAAA,EAAY,KAAM,EAAA;AAAA;AAGpB,QAAA;AAAA,OACK,MAAA;AACL,QAAA,GAAA,CAAI,cAAe,EAAA;AACnB,QAAA,UAAA,CAAW,MAAM,WAA0B,CAAA;AAAA;AAC7C;AAGF,IAAA,GAAA,CAAI,eAAgB,EAAA;AAAA;AAExB;AAEa,MAAA,iCAAA,GAAoC,CAC/C,YACG,KAAA;AACH,EAAA,MAAM,aAAa,KAAM,CAAA,IAAA;AAAA,IACvB,YAAA,CAAa,iBAAiB,8BAA8B;AAAA,GAC9D;AACA,EAAI,IAAA,UAAA,CAAW,MAAM,CAAC,KAAA,KAAU,MAAM,KAAM,CAAA,MAAA,GAAS,CAAC,CAAG,EAAA;AACvD,IAAA,UAAA,CAAW,MAAM;AACf,MAAM,MAAA,KAAA,GAAQ,UAAW,CAAA,EAAA,CAAG,CAAC,CAAA;AAC7B,MAAA,KAAA,EAAO,MAAO,EAAA;AACd,MAAA,KAAA,EAAO,KAAM,EAAA;AAAA,OACZ,GAAG,CAAA;AAAA;AAEV;;;;"}
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { useForkRef, Option } from '@salt-ds/core';
|
|
3
|
-
import { forwardRef } from 'react';
|
|
4
|
-
import { ExpandoCombobox } from '../ExpandoCombobox.js';
|
|
5
|
-
import { getOperators } from './operator-utils.js';
|
|
6
|
-
import { useOperatorPicker } from './useOperatorPicker.js';
|
|
7
|
-
|
|
8
|
-
const OperatorPicker = forwardRef(function OperatorPicker2({
|
|
9
|
-
className,
|
|
10
|
-
column,
|
|
11
|
-
dropdownOnAutofocus = true,
|
|
12
|
-
inputProps,
|
|
13
|
-
onSelect,
|
|
14
|
-
value: valueProp
|
|
15
|
-
}, forwardedRef) {
|
|
16
|
-
const { ref, ...comboProps } = useOperatorPicker({
|
|
17
|
-
onSelect,
|
|
18
|
-
value: valueProp?.toString() ?? ""
|
|
19
|
-
});
|
|
20
|
-
return /* @__PURE__ */ jsx(
|
|
21
|
-
ExpandoCombobox,
|
|
22
|
-
{
|
|
23
|
-
...comboProps,
|
|
24
|
-
className,
|
|
25
|
-
"data-field": "operator",
|
|
26
|
-
dropdownOnAutofocus,
|
|
27
|
-
inputProps,
|
|
28
|
-
ref: useForkRef(forwardedRef, ref),
|
|
29
|
-
title: "operator",
|
|
30
|
-
children: getOperators(column).filter(
|
|
31
|
-
(op) => op.toLowerCase().includes(comboProps.value.toLowerCase())
|
|
32
|
-
).map((op) => /* @__PURE__ */ jsx(Option, { value: op }, op))
|
|
33
|
-
}
|
|
34
|
-
);
|
|
35
|
-
});
|
|
36
|
-
|
|
37
|
-
export { OperatorPicker };
|
|
38
|
-
//# sourceMappingURL=OperatorPicker.js.map
|