@vuu-ui/vuu-filters 0.12.1 → 0.13.0
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/useCustomFilters.js.map +1 -1
- package/cjs/filter-clause/ExpandoCombobox.js.map +1 -1
- package/cjs/filter-editor/FilterEditor.js.map +1 -1
- package/cjs/filter-pill/FilterPill.js.map +1 -1
- package/esm/custom-filters/useCustomFilters.js.map +1 -1
- package/esm/filter-clause/ExpandoCombobox.js.map +1 -1
- package/esm/filter-editor/FilterEditor.js.map +1 -1
- package/esm/filter-pill/FilterPill.js.map +1 -1
- package/package.json +13 -13
- package/types/FilterModel.d.ts +1 -1
- package/types/custom-filters/useCustomFilters.d.ts +2 -2
- package/types/filter-clause/ExpandoCombobox.d.ts +2 -2
- package/types/filter-clause/useFilterClause.d.ts +2 -2
- package/types/filter-clause/value-editors/FilterClauseValueEditor.d.ts +2 -2
- package/types/filter-editor/useFilterEditor.d.ts +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCustomFilters.js","sources":["../../src/custom-filters/useCustomFilters.ts"],"sourcesContent":["import { ColumnDescriptorsByName, Filter } from \"@vuu-ui/vuu-filter-types\";\nimport { PromptProps } from \"@vuu-ui/vuu-popups\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n EditableLabelProps,\n EditAPI,\n NullEditAPI,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport {\n filterAsQuery,\n getElementDataIndex,\n queryClosest,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n KeyboardEventHandler,\n MouseEventHandler,\n RefObject,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { FilterBarProps } from \"../filter-bar\";\nimport {\n FilterEditCancelHandler,\n FilterEditSaveHandler,\n} from \"../filter-editor\";\nimport { FilterPillProps } from \"../filter-pill\";\nimport { FilterMenuOptions } from \"../filter-pill-menu\";\nimport { navigateToNextItem } from \"./filterBarFocusManagement\";\nimport { useFilterState } from \"./useFilterState\";\nimport { MenuActionHandler } from \"@vuu-ui/vuu-context-menu\";\n\nexport type EditFilterState = \"create\" | \"edit\";\nexport type FilterState = EditFilterState | \"rename\";\nexport const isEditFilterState = (\n filterState?: string,\n): filterState is EditFilterState =>\n filterState === \"edit\" || filterState === \"create\";\n\ntype InteractedFilterState = {\n filter?: Filter;\n index: number;\n state: FilterState;\n};\n\nexport interface CustomFilterHookProps\n extends Pick<\n FilterBarProps,\n | \"columnDescriptors\"\n | \"defaultFilterState\"\n | \"filterState\"\n | \"onApplyFilter\"\n | \"onFilterDeleted\"\n | \"onFilterRenamed\"\n | \"onFilterStateChanged\"\n > {\n containerRef: RefObject<HTMLDivElement>;\n}\n\nexport const useCustomFilters = ({\n columnDescriptors,\n containerRef,\n defaultFilterState,\n filterState,\n onApplyFilter,\n onFilterDeleted,\n onFilterRenamed,\n onFilterStateChanged,\n}: CustomFilterHookProps) => {\n const addButtonRef = useRef<HTMLButtonElement>(null);\n const [interactedFilterState, setInteractedFilterState] = useState<\n InteractedFilterState | undefined\n >();\n const [promptProps, setPromptProps] = useState<PromptProps | null>(null);\n const editPillLabelAPI = useRef<EditAPI>(NullEditAPI);\n\n const columnsByName = useMemo(\n () => columnDescriptorsByName(columnDescriptors),\n [columnDescriptors],\n );\n\n const {\n activeFilterIndex,\n filters,\n onAddFilter,\n onChangeFilter,\n onDeleteFilter,\n onRenameFilter,\n onToggleFilterActive,\n } = useFilterState({\n defaultFilterState,\n filterState,\n onFilterDeleted,\n onFilterRenamed,\n onFilterStateChanged,\n });\n\n useEffect(() => {\n const activeFilters = activeFilterIndex.map((i) => filters[i]);\n const applyFilter = (filter?: Filter) => {\n const query = filter ? filterAsQuery(filter, { columnsByName }) : \"\";\n onApplyFilter({ filter: query, filterStruct: filter });\n };\n if (activeFilters.length === 0) {\n applyFilter();\n } else if (activeFilters.length === 1) {\n const [filter] = activeFilters;\n applyFilter(filter);\n } else {\n applyFilter({ op: \"and\", filters: activeFilters });\n }\n }, [activeFilterIndex, columnsByName, filters, onApplyFilter]);\n\n const editPillLabel = useCallback((index: number, filter: Filter) => {\n setTimeout(() => {\n setInteractedFilterState({\n filter,\n index,\n state: \"rename\",\n });\n }, 100);\n }, []);\n\n const focusFilterPill = useCallback(\n (index = 0) => {\n requestAnimationFrame(() => {\n const target = containerRef.current?.querySelector(\n `.vuuFilterPill[data-index=\"${index}\"] button`,\n ) as undefined | HTMLInputElement;\n if (target) {\n target.focus();\n }\n });\n },\n [containerRef],\n );\n\n const deleteConfirmed = useCallback(\n (filter: Filter) => {\n onDeleteFilter(filter);\n\n // TODO move focus to next/previous filter\n requestAnimationFrame(() => {\n if (filters.length) {\n focusFilterPill(0);\n }\n });\n },\n [filters.length, focusFilterPill, onDeleteFilter],\n );\n\n const getDeletePrompt = useMemo(\n () => (filter: Filter) => {\n const close = () => {\n setPromptProps(null);\n focusFilterPill();\n };\n return {\n confirmButtonLabel: \"Remove\",\n icon: \"warn-triangle\",\n onCancel: close,\n onClose: close,\n onConfirm: () => {\n setPromptProps(null);\n deleteConfirmed(filter);\n },\n text: `Are you sure you want to delete ${filter.name}`,\n title: \"Remove Filter\",\n variant: \"warn\",\n } as PromptProps;\n },\n [deleteConfirmed, focusFilterPill],\n );\n\n const deleteFilter = useCallback(\n (filter: Filter, withPrompt: boolean) => {\n if (withPrompt) {\n setPromptProps(getDeletePrompt(filter));\n } else {\n deleteConfirmed(filter);\n }\n },\n [deleteConfirmed, getDeletePrompt],\n );\n\n // TODO handle cancel edit name\n const handleExitEditFilterName: EditableLabelProps[\"onExitEditMode\"] =\n useCallback(\n (_, editedValue = \"\") => {\n if (\n interactedFilterState?.state === \"rename\" &&\n interactedFilterState.filter\n ) {\n const { filter } = interactedFilterState;\n const indexOfEditedFilter = onRenameFilter(filter, editedValue);\n\n setInteractedFilterState(undefined);\n focusFilterPill(indexOfEditedFilter);\n }\n setInteractedFilterState(undefined);\n },\n [focusFilterPill, interactedFilterState, onRenameFilter],\n );\n\n const handlePillMenuAction = useCallback<MenuActionHandler>(\n (menuId, options) => {\n switch (menuId) {\n case \"delete-filter\": {\n const { filter } = options as FilterMenuOptions;\n deleteFilter(filter, true);\n return true;\n }\n case \"rename-filter\": {\n const { filter } = options as FilterMenuOptions;\n const index = filters.indexOf(filter);\n editPillLabel(index, filter);\n return true;\n }\n case \"edit-filter\": {\n const { filter } = options as FilterMenuOptions;\n setInteractedFilterState({\n filter,\n index: filters.indexOf(filter),\n state: \"edit\",\n });\n return true;\n }\n default:\n return false;\n }\n },\n [deleteFilter, editPillLabel, filters],\n );\n\n const handlePillKeyDown = useCallback<KeyboardEventHandler>((e) => {\n if (e.key === \"ArrowRight\" || e.key === \"ArrowLeft\") {\n navigateToNextItem(e.target, e.key === \"ArrowLeft\" ? \"bwd\" : \"fwd\");\n }\n }, []);\n\n const addIfNewElseUpdate = useCallback(\n (newOrUpdatedFilter: Filter, existing: Filter | undefined) => {\n if (existing === undefined) {\n const idx = onAddFilter(newOrUpdatedFilter);\n focusFilterPill(idx);\n editPillLabel(idx, newOrUpdatedFilter);\n } else {\n const idx = onChangeFilter(existing, newOrUpdatedFilter);\n focusFilterPill(idx);\n }\n },\n [editPillLabel, focusFilterPill, onAddFilter, onChangeFilter],\n );\n\n const filterSaveHandler = useCallback<FilterEditSaveHandler>(\n (filter) => {\n if (interactedFilterState) {\n const { filter: existingFilter } = interactedFilterState;\n setInteractedFilterState(undefined);\n addIfNewElseUpdate(filter, existingFilter);\n }\n },\n [addIfNewElseUpdate, interactedFilterState],\n );\n\n const handlePillClick = useCallback<MouseEventHandler<HTMLButtonElement>>(\n (e) => {\n const isEditing = (e.target as HTMLElement).querySelector(\n \".vuuEditableLabel-editing\",\n );\n if (!isEditing) {\n const pill = queryClosest(e.target, \".vuuFilterPill\");\n if (pill) {\n const index = getElementDataIndex(pill);\n onToggleFilterActive(index, e.shiftKey);\n }\n }\n },\n [onToggleFilterActive],\n );\n\n const FilterPillProps: Omit<FilterPillProps, \"filter\" | \"selected\"> = {\n editLabelApiRef: editPillLabelAPI,\n // onBeginEdit: handleBeginEditFilterName,\n onClick: handlePillClick,\n onKeyDown: handlePillKeyDown,\n onMenuAction: handlePillMenuAction,\n onExitEditMode: handleExitEditFilterName,\n };\n\n const handleClickAddButton = useCallback(() => {\n setInteractedFilterState({\n index: -1,\n state: \"create\",\n });\n }, []);\n\n const handleKeyDownAddButton = useCallback<KeyboardEventHandler>((evt) => {\n if (evt.key === \"ArrowLeft\") {\n navigateToNextItem(evt.target, \"bwd\");\n }\n }, []);\n\n const handleCancelEdit = useCallback<FilterEditCancelHandler>(() => {\n if (interactedFilterState) {\n const { index } = interactedFilterState;\n if (index === -1) {\n addButtonRef.current?.focus();\n } else {\n focusFilterPill(index);\n }\n setInteractedFilterState(undefined);\n }\n }, [focusFilterPill, interactedFilterState]);\n\n const addButtonProps = {\n ref: addButtonRef,\n onClick: handleClickAddButton,\n onKeyDown: handleKeyDownAddButton,\n };\n\n return {\n FilterPillProps,\n activeFilterIndex,\n addButtonProps,\n columnsByName,\n filters,\n interactedFilterState,\n onCancelEdit: handleCancelEdit,\n onSave: filterSaveHandler,\n promptProps,\n };\n};\n\nfunction columnDescriptorsByName(\n columns: ColumnDescriptor[],\n): ColumnDescriptorsByName {\n return columns.reduce((m, col) => ({ ...m, [col.name]: col }), {});\n}\n"],"names":["useRef","useState","NullEditAPI","useMemo","useFilterState","useEffect","filterAsQuery","useCallback","navigateToNextItem","queryClosest","getElementDataIndex","FilterPillProps"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useCustomFilters.js","sources":["../../src/custom-filters/useCustomFilters.ts"],"sourcesContent":["import { ColumnDescriptorsByName, Filter } from \"@vuu-ui/vuu-filter-types\";\nimport { PromptProps } from \"@vuu-ui/vuu-popups\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n EditableLabelProps,\n EditAPI,\n NullEditAPI,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport {\n filterAsQuery,\n getElementDataIndex,\n queryClosest,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n KeyboardEventHandler,\n MouseEventHandler,\n RefObject,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { FilterBarProps } from \"../filter-bar\";\nimport {\n FilterEditCancelHandler,\n FilterEditSaveHandler,\n} from \"../filter-editor\";\nimport { FilterPillProps } from \"../filter-pill\";\nimport { FilterMenuOptions } from \"../filter-pill-menu\";\nimport { navigateToNextItem } from \"./filterBarFocusManagement\";\nimport { useFilterState } from \"./useFilterState\";\nimport { MenuActionHandler } from \"@vuu-ui/vuu-context-menu\";\n\nexport type EditFilterState = \"create\" | \"edit\";\nexport type FilterState = EditFilterState | \"rename\";\nexport const isEditFilterState = (\n filterState?: string,\n): filterState is EditFilterState =>\n filterState === \"edit\" || filterState === \"create\";\n\ntype InteractedFilterState = {\n filter?: Filter;\n index: number;\n state: FilterState;\n};\n\nexport interface CustomFilterHookProps\n extends Pick<\n FilterBarProps,\n | \"columnDescriptors\"\n | \"defaultFilterState\"\n | \"filterState\"\n | \"onApplyFilter\"\n | \"onFilterDeleted\"\n | \"onFilterRenamed\"\n | \"onFilterStateChanged\"\n > {\n containerRef: RefObject<HTMLDivElement | null>;\n}\n\nexport const useCustomFilters = ({\n columnDescriptors,\n containerRef,\n defaultFilterState,\n filterState,\n onApplyFilter,\n onFilterDeleted,\n onFilterRenamed,\n onFilterStateChanged,\n}: CustomFilterHookProps) => {\n const addButtonRef = useRef<HTMLButtonElement>(null);\n const [interactedFilterState, setInteractedFilterState] = useState<\n InteractedFilterState | undefined\n >();\n const [promptProps, setPromptProps] = useState<PromptProps | null>(null);\n const editPillLabelAPI = useRef<EditAPI>(NullEditAPI);\n\n const columnsByName = useMemo(\n () => columnDescriptorsByName(columnDescriptors),\n [columnDescriptors],\n );\n\n const {\n activeFilterIndex,\n filters,\n onAddFilter,\n onChangeFilter,\n onDeleteFilter,\n onRenameFilter,\n onToggleFilterActive,\n } = useFilterState({\n defaultFilterState,\n filterState,\n onFilterDeleted,\n onFilterRenamed,\n onFilterStateChanged,\n });\n\n useEffect(() => {\n const activeFilters = activeFilterIndex.map((i) => filters[i]);\n const applyFilter = (filter?: Filter) => {\n const query = filter ? filterAsQuery(filter, { columnsByName }) : \"\";\n onApplyFilter({ filter: query, filterStruct: filter });\n };\n if (activeFilters.length === 0) {\n applyFilter();\n } else if (activeFilters.length === 1) {\n const [filter] = activeFilters;\n applyFilter(filter);\n } else {\n applyFilter({ op: \"and\", filters: activeFilters });\n }\n }, [activeFilterIndex, columnsByName, filters, onApplyFilter]);\n\n const editPillLabel = useCallback((index: number, filter: Filter) => {\n setTimeout(() => {\n setInteractedFilterState({\n filter,\n index,\n state: \"rename\",\n });\n }, 100);\n }, []);\n\n const focusFilterPill = useCallback(\n (index = 0) => {\n requestAnimationFrame(() => {\n const target = containerRef.current?.querySelector(\n `.vuuFilterPill[data-index=\"${index}\"] button`,\n ) as undefined | HTMLInputElement;\n if (target) {\n target.focus();\n }\n });\n },\n [containerRef],\n );\n\n const deleteConfirmed = useCallback(\n (filter: Filter) => {\n onDeleteFilter(filter);\n\n // TODO move focus to next/previous filter\n requestAnimationFrame(() => {\n if (filters.length) {\n focusFilterPill(0);\n }\n });\n },\n [filters.length, focusFilterPill, onDeleteFilter],\n );\n\n const getDeletePrompt = useMemo(\n () => (filter: Filter) => {\n const close = () => {\n setPromptProps(null);\n focusFilterPill();\n };\n return {\n confirmButtonLabel: \"Remove\",\n icon: \"warn-triangle\",\n onCancel: close,\n onClose: close,\n onConfirm: () => {\n setPromptProps(null);\n deleteConfirmed(filter);\n },\n text: `Are you sure you want to delete ${filter.name}`,\n title: \"Remove Filter\",\n variant: \"warn\",\n } as PromptProps;\n },\n [deleteConfirmed, focusFilterPill],\n );\n\n const deleteFilter = useCallback(\n (filter: Filter, withPrompt: boolean) => {\n if (withPrompt) {\n setPromptProps(getDeletePrompt(filter));\n } else {\n deleteConfirmed(filter);\n }\n },\n [deleteConfirmed, getDeletePrompt],\n );\n\n // TODO handle cancel edit name\n const handleExitEditFilterName: EditableLabelProps[\"onExitEditMode\"] =\n useCallback(\n (_, editedValue = \"\") => {\n if (\n interactedFilterState?.state === \"rename\" &&\n interactedFilterState.filter\n ) {\n const { filter } = interactedFilterState;\n const indexOfEditedFilter = onRenameFilter(filter, editedValue);\n\n setInteractedFilterState(undefined);\n focusFilterPill(indexOfEditedFilter);\n }\n setInteractedFilterState(undefined);\n },\n [focusFilterPill, interactedFilterState, onRenameFilter],\n );\n\n const handlePillMenuAction = useCallback<MenuActionHandler>(\n (menuId, options) => {\n switch (menuId) {\n case \"delete-filter\": {\n const { filter } = options as FilterMenuOptions;\n deleteFilter(filter, true);\n return true;\n }\n case \"rename-filter\": {\n const { filter } = options as FilterMenuOptions;\n const index = filters.indexOf(filter);\n editPillLabel(index, filter);\n return true;\n }\n case \"edit-filter\": {\n const { filter } = options as FilterMenuOptions;\n setInteractedFilterState({\n filter,\n index: filters.indexOf(filter),\n state: \"edit\",\n });\n return true;\n }\n default:\n return false;\n }\n },\n [deleteFilter, editPillLabel, filters],\n );\n\n const handlePillKeyDown = useCallback<KeyboardEventHandler>((e) => {\n if (e.key === \"ArrowRight\" || e.key === \"ArrowLeft\") {\n navigateToNextItem(e.target, e.key === \"ArrowLeft\" ? \"bwd\" : \"fwd\");\n }\n }, []);\n\n const addIfNewElseUpdate = useCallback(\n (newOrUpdatedFilter: Filter, existing: Filter | undefined) => {\n if (existing === undefined) {\n const idx = onAddFilter(newOrUpdatedFilter);\n focusFilterPill(idx);\n editPillLabel(idx, newOrUpdatedFilter);\n } else {\n const idx = onChangeFilter(existing, newOrUpdatedFilter);\n focusFilterPill(idx);\n }\n },\n [editPillLabel, focusFilterPill, onAddFilter, onChangeFilter],\n );\n\n const filterSaveHandler = useCallback<FilterEditSaveHandler>(\n (filter) => {\n if (interactedFilterState) {\n const { filter: existingFilter } = interactedFilterState;\n setInteractedFilterState(undefined);\n addIfNewElseUpdate(filter, existingFilter);\n }\n },\n [addIfNewElseUpdate, interactedFilterState],\n );\n\n const handlePillClick = useCallback<MouseEventHandler<HTMLButtonElement>>(\n (e) => {\n const isEditing = (e.target as HTMLElement).querySelector(\n \".vuuEditableLabel-editing\",\n );\n if (!isEditing) {\n const pill = queryClosest(e.target, \".vuuFilterPill\");\n if (pill) {\n const index = getElementDataIndex(pill);\n onToggleFilterActive(index, e.shiftKey);\n }\n }\n },\n [onToggleFilterActive],\n );\n\n const FilterPillProps: Omit<FilterPillProps, \"filter\" | \"selected\"> = {\n editLabelApiRef: editPillLabelAPI,\n // onBeginEdit: handleBeginEditFilterName,\n onClick: handlePillClick,\n onKeyDown: handlePillKeyDown,\n onMenuAction: handlePillMenuAction,\n onExitEditMode: handleExitEditFilterName,\n };\n\n const handleClickAddButton = useCallback(() => {\n setInteractedFilterState({\n index: -1,\n state: \"create\",\n });\n }, []);\n\n const handleKeyDownAddButton = useCallback<KeyboardEventHandler>((evt) => {\n if (evt.key === \"ArrowLeft\") {\n navigateToNextItem(evt.target, \"bwd\");\n }\n }, []);\n\n const handleCancelEdit = useCallback<FilterEditCancelHandler>(() => {\n if (interactedFilterState) {\n const { index } = interactedFilterState;\n if (index === -1) {\n addButtonRef.current?.focus();\n } else {\n focusFilterPill(index);\n }\n setInteractedFilterState(undefined);\n }\n }, [focusFilterPill, interactedFilterState]);\n\n const addButtonProps = {\n ref: addButtonRef,\n onClick: handleClickAddButton,\n onKeyDown: handleKeyDownAddButton,\n };\n\n return {\n FilterPillProps,\n activeFilterIndex,\n addButtonProps,\n columnsByName,\n filters,\n interactedFilterState,\n onCancelEdit: handleCancelEdit,\n onSave: filterSaveHandler,\n promptProps,\n };\n};\n\nfunction columnDescriptorsByName(\n columns: ColumnDescriptor[],\n): ColumnDescriptorsByName {\n return columns.reduce((m, col) => ({ ...m, [col.name]: col }), {});\n}\n"],"names":["useRef","useState","NullEditAPI","useMemo","useFilterState","useEffect","filterAsQuery","useCallback","navigateToNextItem","queryClosest","getElementDataIndex","FilterPillProps"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpandoCombobox.js","sources":["../../src/filter-clause/ExpandoCombobox.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { ComboBox, ComboBoxProps } from \"@salt-ds/core\";\nimport {\n ChangeEvent,\n ForwardedRef,\n Ref,\n SyntheticEvent,\n forwardRef,\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 ComboBoxProps<Item> {\n itemToString?: (item: Item) => string;\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
|
|
1
|
+
{"version":3,"file":"ExpandoCombobox.js","sources":["../../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 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 ComboBoxProps<Item> {\n itemToString?: (item: Item) => string;\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 value: valueProp,\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 [value, setValue] = useState(\n valueProp === undefined ? \"\" : valueProp.toString(),\n );\n\n const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {\n const value = evt.target.value;\n onChange?.(evt);\n setValue(value);\n };\n\n const handleSelectionChange = (evt: SyntheticEvent, newSelected: Item[]) => {\n if (multiselect) {\n onSelectionChange?.(evt, newSelected);\n } else {\n const [selectedValue] = newSelected;\n setTimeout(() => {\n onSelectionChange?.(evt, newSelected);\n setValue(itemToString(selectedValue));\n }, 100);\n }\n };\n\n const inputProps = useMemo<ComboBoxProps<Item>[\"inputProps\"]>(() => {\n return {\n autoComplete: \"off\",\n ...inputPropsProp,\n onFocus: (evt) => {\n inputPropsProp?.onFocus?.(evt);\n setTimeout(() => {\n setOpen(true);\n }, 100);\n },\n };\n }, [inputPropsProp]);\n\n // const matchingValues = values.filter((val) =>\n // val.toLowerCase().startsWith(value.trim().toLowerCase())\n // );\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={setOpen}\n onSelectionChange={handleSelectionChange}\n open={open}\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":["forwardRef","ExpandoCombobox","useWindow","useComponentCssInjection","expandoComboboxCss","useState","value","useMemo","jsx","ComboBox"],"mappings":";;;;;;;;;;AAiBA,MAAM,SAAY,GAAA,oBAAA;AAOlB,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,GAAkBA,gBAAW,CAAA,SAASC,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,KAAO,EAAA,SAAA;AAAA,EACP,GAAG;AACL,CAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,sBAAA;AAAA,IACR,GAAK,EAAAC,iBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAIC,eAAS,KAAK,CAAA;AACtC,EAAM,MAAA,CAAC,KAAO,EAAA,QAAQ,CAAI,GAAAA,cAAA;AAAA,IACxB,SAAc,KAAA,KAAA,CAAA,GAAY,EAAK,GAAA,SAAA,CAAU,QAAS;AAAA,GACpD;AAEA,EAAM,MAAA,YAAA,GAAe,CAAC,GAAuC,KAAA;AAC3D,IAAMC,MAAAA,MAAAA,GAAQ,IAAI,MAAO,CAAA,KAAA;AACzB,IAAA,QAAA,GAAW,GAAG,CAAA;AACd,IAAA,QAAA,CAASA,MAAK,CAAA;AAAA,GAChB;AAEA,EAAM,MAAA,qBAAA,GAAwB,CAAC,GAAA,EAAqB,WAAwB,KAAA;AAC1E,IAAA,IAAI,WAAa,EAAA;AACf,MAAA,iBAAA,GAAoB,KAAK,WAAW,CAAA;AAAA,KAC/B,MAAA;AACL,MAAM,MAAA,CAAC,aAAa,CAAI,GAAA,WAAA;AACxB,MAAA,UAAA,CAAW,MAAM;AACf,QAAA,iBAAA,GAAoB,KAAK,WAAW,CAAA;AACpC,QAAS,QAAA,CAAA,YAAA,CAAa,aAAa,CAAC,CAAA;AAAA,SACnC,GAAG,CAAA;AAAA;AACR,GACF;AAEA,EAAM,MAAA,UAAA,GAAaC,cAA2C,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,UAAA,CAAW,MAAM;AACf,UAAA,OAAA,CAAQ,IAAI,CAAA;AAAA,WACX,GAAG,CAAA;AAAA;AACR,KACF;AAAA,GACF,EAAG,CAAC,cAAc,CAAC,CAAA;AAMnB,EACE,uBAAAC,cAAA;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,kBAAAA,cAAA;AAAA,QAACC,aAAA;AAAA,QAAA;AAAA,UACE,GAAG,KAAA;AAAA,UACJ,UAAA;AAAA,UACA,WAAA;AAAA,UACA,QAAU,EAAA,YAAA;AAAA,UACV,YAAc,EAAA,OAAA;AAAA,UACd,iBAAmB,EAAA,qBAAA;AAAA,UACnB,IAAA;AAAA,UACA,KAAA;AAAA,UAEC;AAAA;AAAA;AACH;AAAA,GACF;AAEJ,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
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:
|
|
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, ReactElement } 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: ReactElement[] = [];\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,UAA0B,EAAC;AACjC,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;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterPill.js","sources":["../../src/filter-pill/FilterPill.tsx"],"sourcesContent":["import { ColumnDescriptorsByName, Filter } from \"@vuu-ui/vuu-filter-types\";\nimport {\n
|
|
1
|
+
{"version":3,"file":"FilterPill.js","sources":["../../src/filter-pill/FilterPill.tsx"],"sourcesContent":["import { ColumnDescriptorsByName, Filter } from \"@vuu-ui/vuu-filter-types\";\nimport {\n MenuCloseHandler,\n PopupMenuProps,\n Tooltip,\n useTooltip,\n} from \"@vuu-ui/vuu-popups\";\nimport {\n EditableLabel,\n EditableLabelProps,\n ExitEditModeHandler,\n SplitStateButton,\n SplitStateButtonProps,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport { useId } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { FocusEventHandler, useCallback, useMemo, useRef } from \"react\";\nimport { filterAsReactNode } from \"./filterAsReactNode\";\nimport {\n closeCommand,\n deleteCommand,\n editCommand,\n MenuOptions,\n renameCommand,\n} from \"../filter-pill-menu/FilterPillMenuOptions\";\nimport { getFilterLabel } from \"./getFilterLabel\";\nimport { getFilterTooltipText } from \"./getFilterTooltipText\";\n\nimport filterPillCss from \"./FilterPill.css\";\nimport { ButtonProps } from \"@salt-ds/core\";\nimport {\n ContextMenuItemDescriptor,\n MenuActionHandler,\n} from \"@vuu-ui/vuu-context-menu\";\n\nconst classBase = \"vuuFilterPill\";\n\nexport interface FilterPillProps\n extends SplitStateButtonProps,\n Pick<\n Partial<EditableLabelProps>,\n \"editing\" | \"editLabelApiRef\" | \"onExitEditMode\"\n > {\n allowClose?: boolean;\n allowDelete?: boolean;\n allowEdit?: boolean;\n allowRename?: boolean;\n\n columnsByName?: ColumnDescriptorsByName;\n editable?: boolean;\n filter: Filter;\n index?: number;\n onBeginEdit?: (filter: Filter) => void;\n onMenuAction?: MenuActionHandler;\n}\n\nexport const FilterPill = ({\n allowClose = true,\n allowDelete = true,\n allowEdit = true,\n allowRename = true,\n className: classNameProp,\n columnsByName,\n editable = true,\n editing = false,\n editLabelApiRef,\n filter,\n id: idProp,\n onBeginEdit,\n onExitEditMode,\n onMenuAction,\n ...htmlAttributes\n}: FilterPillProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-filter-pill\",\n css: filterPillCss,\n window: targetWindow,\n });\n\n const rootRef = useRef<HTMLDivElement>(null);\n const handleEnterEditMode: EditableLabelProps[\"onEnterEditMode\"] =\n useCallback(() => {\n onBeginEdit?.(filter);\n }, [filter, onBeginEdit]);\n\n const getLabel = getFilterLabel(columnsByName);\n const label = useMemo(\n () => filter.name ?? getLabel(filter),\n [getLabel, filter],\n );\n\n const getTooltipTextl = getFilterTooltipText(columnsByName);\n\n const id = useId(idProp);\n\n const handleMenuClose = useCallback<MenuCloseHandler>((reason) => {\n if (reason?.type === \"escape\") {\n requestAnimationFrame(() => {\n if (rootRef.current) {\n rootRef.current.focus();\n }\n });\n }\n }, []);\n\n const popupMenuProps = useMemo<\n Pick<\n PopupMenuProps,\n \"menuBuilder\" | \"menuActionHandler\" | \"menuOptions\" | \"onMenuClose\"\n >\n >(\n () => ({\n icon: \"more-vert\",\n menuBuilder: (_location, options) => {\n const menuItems: ContextMenuItemDescriptor[] = [];\n if (allowRename) {\n menuItems.push(renameCommand(options as MenuOptions));\n }\n if (allowEdit) {\n menuItems.push(editCommand(options as MenuOptions));\n }\n if (allowClose) {\n menuItems.push(closeCommand(options as MenuOptions));\n }\n if (allowDelete) {\n menuItems.push(deleteCommand(options as MenuOptions));\n }\n return menuItems;\n },\n\n menuActionHandler: onMenuAction,\n menuLocation: \"filter-pill-menu\",\n menuOptions: {\n filter,\n },\n\n onMenuClose: handleMenuClose,\n }),\n [\n allowClose,\n allowDelete,\n allowEdit,\n allowRename,\n filter,\n handleMenuClose,\n onMenuAction,\n ],\n );\n\n const handleExitEditMode = useCallback<ExitEditModeHandler>(\n (originalValue, newValue) => {\n onExitEditMode?.(originalValue, newValue);\n requestAnimationFrame(() => {\n rootRef.current?.querySelector(\"button\")?.focus();\n });\n },\n [onExitEditMode],\n );\n\n const { anchorProps, hideTooltip, showTooltip, tooltipProps } = useTooltip({\n anchorQuery: \".vuuFilterPill\",\n id,\n placement: [\"above\", \"below\"],\n tooltipContent: filterAsReactNode(filter, getTooltipTextl),\n });\n\n const buttonProps: Partial<ButtonProps> = {\n onBlur: () => hideTooltip(),\n onFocus: useCallback<FocusEventHandler>(() => {\n showTooltip(rootRef);\n }, [showTooltip]),\n };\n\n return (\n <SplitStateButton\n {...anchorProps}\n {...htmlAttributes}\n ButtonProps={buttonProps}\n PopupMenuProps={popupMenuProps}\n className={cx(classBase, classNameProp)}\n data-text={label}\n ref={rootRef}\n >\n {editable && onExitEditMode ? (\n <EditableLabel\n defaultValue={label}\n editing={editing}\n editLabelApiRef={editLabelApiRef}\n key={label}\n onEnterEditMode={handleEnterEditMode}\n onExitEditMode={handleExitEditMode}\n />\n ) : (\n label\n )}\n {tooltipProps && (\n <Tooltip className={`${classBase}-tooltip`} {...tooltipProps} />\n )}\n </SplitStateButton>\n );\n};\n"],"names":["useWindow","useComponentCssInjection","filterPillCss","useRef","useCallback","getFilterLabel","useMemo","getFilterTooltipText","useId","renameCommand","editCommand","closeCommand","deleteCommand","useTooltip","filterAsReactNode","jsxs","SplitStateButton","jsx","EditableLabel","Tooltip"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCustomFilters.js","sources":["../../src/custom-filters/useCustomFilters.ts"],"sourcesContent":["import { ColumnDescriptorsByName, Filter } from \"@vuu-ui/vuu-filter-types\";\nimport { PromptProps } from \"@vuu-ui/vuu-popups\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n EditableLabelProps,\n EditAPI,\n NullEditAPI,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport {\n filterAsQuery,\n getElementDataIndex,\n queryClosest,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n KeyboardEventHandler,\n MouseEventHandler,\n RefObject,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { FilterBarProps } from \"../filter-bar\";\nimport {\n FilterEditCancelHandler,\n FilterEditSaveHandler,\n} from \"../filter-editor\";\nimport { FilterPillProps } from \"../filter-pill\";\nimport { FilterMenuOptions } from \"../filter-pill-menu\";\nimport { navigateToNextItem } from \"./filterBarFocusManagement\";\nimport { useFilterState } from \"./useFilterState\";\nimport { MenuActionHandler } from \"@vuu-ui/vuu-context-menu\";\n\nexport type EditFilterState = \"create\" | \"edit\";\nexport type FilterState = EditFilterState | \"rename\";\nexport const isEditFilterState = (\n filterState?: string,\n): filterState is EditFilterState =>\n filterState === \"edit\" || filterState === \"create\";\n\ntype InteractedFilterState = {\n filter?: Filter;\n index: number;\n state: FilterState;\n};\n\nexport interface CustomFilterHookProps\n extends Pick<\n FilterBarProps,\n | \"columnDescriptors\"\n | \"defaultFilterState\"\n | \"filterState\"\n | \"onApplyFilter\"\n | \"onFilterDeleted\"\n | \"onFilterRenamed\"\n | \"onFilterStateChanged\"\n > {\n containerRef: RefObject<HTMLDivElement>;\n}\n\nexport const useCustomFilters = ({\n columnDescriptors,\n containerRef,\n defaultFilterState,\n filterState,\n onApplyFilter,\n onFilterDeleted,\n onFilterRenamed,\n onFilterStateChanged,\n}: CustomFilterHookProps) => {\n const addButtonRef = useRef<HTMLButtonElement>(null);\n const [interactedFilterState, setInteractedFilterState] = useState<\n InteractedFilterState | undefined\n >();\n const [promptProps, setPromptProps] = useState<PromptProps | null>(null);\n const editPillLabelAPI = useRef<EditAPI>(NullEditAPI);\n\n const columnsByName = useMemo(\n () => columnDescriptorsByName(columnDescriptors),\n [columnDescriptors],\n );\n\n const {\n activeFilterIndex,\n filters,\n onAddFilter,\n onChangeFilter,\n onDeleteFilter,\n onRenameFilter,\n onToggleFilterActive,\n } = useFilterState({\n defaultFilterState,\n filterState,\n onFilterDeleted,\n onFilterRenamed,\n onFilterStateChanged,\n });\n\n useEffect(() => {\n const activeFilters = activeFilterIndex.map((i) => filters[i]);\n const applyFilter = (filter?: Filter) => {\n const query = filter ? filterAsQuery(filter, { columnsByName }) : \"\";\n onApplyFilter({ filter: query, filterStruct: filter });\n };\n if (activeFilters.length === 0) {\n applyFilter();\n } else if (activeFilters.length === 1) {\n const [filter] = activeFilters;\n applyFilter(filter);\n } else {\n applyFilter({ op: \"and\", filters: activeFilters });\n }\n }, [activeFilterIndex, columnsByName, filters, onApplyFilter]);\n\n const editPillLabel = useCallback((index: number, filter: Filter) => {\n setTimeout(() => {\n setInteractedFilterState({\n filter,\n index,\n state: \"rename\",\n });\n }, 100);\n }, []);\n\n const focusFilterPill = useCallback(\n (index = 0) => {\n requestAnimationFrame(() => {\n const target = containerRef.current?.querySelector(\n `.vuuFilterPill[data-index=\"${index}\"] button`,\n ) as undefined | HTMLInputElement;\n if (target) {\n target.focus();\n }\n });\n },\n [containerRef],\n );\n\n const deleteConfirmed = useCallback(\n (filter: Filter) => {\n onDeleteFilter(filter);\n\n // TODO move focus to next/previous filter\n requestAnimationFrame(() => {\n if (filters.length) {\n focusFilterPill(0);\n }\n });\n },\n [filters.length, focusFilterPill, onDeleteFilter],\n );\n\n const getDeletePrompt = useMemo(\n () => (filter: Filter) => {\n const close = () => {\n setPromptProps(null);\n focusFilterPill();\n };\n return {\n confirmButtonLabel: \"Remove\",\n icon: \"warn-triangle\",\n onCancel: close,\n onClose: close,\n onConfirm: () => {\n setPromptProps(null);\n deleteConfirmed(filter);\n },\n text: `Are you sure you want to delete ${filter.name}`,\n title: \"Remove Filter\",\n variant: \"warn\",\n } as PromptProps;\n },\n [deleteConfirmed, focusFilterPill],\n );\n\n const deleteFilter = useCallback(\n (filter: Filter, withPrompt: boolean) => {\n if (withPrompt) {\n setPromptProps(getDeletePrompt(filter));\n } else {\n deleteConfirmed(filter);\n }\n },\n [deleteConfirmed, getDeletePrompt],\n );\n\n // TODO handle cancel edit name\n const handleExitEditFilterName: EditableLabelProps[\"onExitEditMode\"] =\n useCallback(\n (_, editedValue = \"\") => {\n if (\n interactedFilterState?.state === \"rename\" &&\n interactedFilterState.filter\n ) {\n const { filter } = interactedFilterState;\n const indexOfEditedFilter = onRenameFilter(filter, editedValue);\n\n setInteractedFilterState(undefined);\n focusFilterPill(indexOfEditedFilter);\n }\n setInteractedFilterState(undefined);\n },\n [focusFilterPill, interactedFilterState, onRenameFilter],\n );\n\n const handlePillMenuAction = useCallback<MenuActionHandler>(\n (menuId, options) => {\n switch (menuId) {\n case \"delete-filter\": {\n const { filter } = options as FilterMenuOptions;\n deleteFilter(filter, true);\n return true;\n }\n case \"rename-filter\": {\n const { filter } = options as FilterMenuOptions;\n const index = filters.indexOf(filter);\n editPillLabel(index, filter);\n return true;\n }\n case \"edit-filter\": {\n const { filter } = options as FilterMenuOptions;\n setInteractedFilterState({\n filter,\n index: filters.indexOf(filter),\n state: \"edit\",\n });\n return true;\n }\n default:\n return false;\n }\n },\n [deleteFilter, editPillLabel, filters],\n );\n\n const handlePillKeyDown = useCallback<KeyboardEventHandler>((e) => {\n if (e.key === \"ArrowRight\" || e.key === \"ArrowLeft\") {\n navigateToNextItem(e.target, e.key === \"ArrowLeft\" ? \"bwd\" : \"fwd\");\n }\n }, []);\n\n const addIfNewElseUpdate = useCallback(\n (newOrUpdatedFilter: Filter, existing: Filter | undefined) => {\n if (existing === undefined) {\n const idx = onAddFilter(newOrUpdatedFilter);\n focusFilterPill(idx);\n editPillLabel(idx, newOrUpdatedFilter);\n } else {\n const idx = onChangeFilter(existing, newOrUpdatedFilter);\n focusFilterPill(idx);\n }\n },\n [editPillLabel, focusFilterPill, onAddFilter, onChangeFilter],\n );\n\n const filterSaveHandler = useCallback<FilterEditSaveHandler>(\n (filter) => {\n if (interactedFilterState) {\n const { filter: existingFilter } = interactedFilterState;\n setInteractedFilterState(undefined);\n addIfNewElseUpdate(filter, existingFilter);\n }\n },\n [addIfNewElseUpdate, interactedFilterState],\n );\n\n const handlePillClick = useCallback<MouseEventHandler<HTMLButtonElement>>(\n (e) => {\n const isEditing = (e.target as HTMLElement).querySelector(\n \".vuuEditableLabel-editing\",\n );\n if (!isEditing) {\n const pill = queryClosest(e.target, \".vuuFilterPill\");\n if (pill) {\n const index = getElementDataIndex(pill);\n onToggleFilterActive(index, e.shiftKey);\n }\n }\n },\n [onToggleFilterActive],\n );\n\n const FilterPillProps: Omit<FilterPillProps, \"filter\" | \"selected\"> = {\n editLabelApiRef: editPillLabelAPI,\n // onBeginEdit: handleBeginEditFilterName,\n onClick: handlePillClick,\n onKeyDown: handlePillKeyDown,\n onMenuAction: handlePillMenuAction,\n onExitEditMode: handleExitEditFilterName,\n };\n\n const handleClickAddButton = useCallback(() => {\n setInteractedFilterState({\n index: -1,\n state: \"create\",\n });\n }, []);\n\n const handleKeyDownAddButton = useCallback<KeyboardEventHandler>((evt) => {\n if (evt.key === \"ArrowLeft\") {\n navigateToNextItem(evt.target, \"bwd\");\n }\n }, []);\n\n const handleCancelEdit = useCallback<FilterEditCancelHandler>(() => {\n if (interactedFilterState) {\n const { index } = interactedFilterState;\n if (index === -1) {\n addButtonRef.current?.focus();\n } else {\n focusFilterPill(index);\n }\n setInteractedFilterState(undefined);\n }\n }, [focusFilterPill, interactedFilterState]);\n\n const addButtonProps = {\n ref: addButtonRef,\n onClick: handleClickAddButton,\n onKeyDown: handleKeyDownAddButton,\n };\n\n return {\n FilterPillProps,\n activeFilterIndex,\n addButtonProps,\n columnsByName,\n filters,\n interactedFilterState,\n onCancelEdit: handleCancelEdit,\n onSave: filterSaveHandler,\n promptProps,\n };\n};\n\nfunction columnDescriptorsByName(\n columns: ColumnDescriptor[],\n): ColumnDescriptorsByName {\n return columns.reduce((m, col) => ({ ...m, [col.name]: col }), {});\n}\n"],"names":["FilterPillProps"],"mappings":";;;;;;AAoCO,MAAM,iBAAoB,GAAA,CAC/B,WAEA,KAAA,WAAA,KAAgB,UAAU,WAAgB,KAAA;AAsBrC,MAAM,mBAAmB,CAAC;AAAA,EAC/B,iBAAA;AAAA,EACA,YAAA;AAAA,EACA,kBAAA;AAAA,EACA,WAAA;AAAA,EACA,aAAA;AAAA,EACA,eAAA;AAAA,EACA,eAAA;AAAA,EACA;AACF,CAA6B,KAAA;AAC3B,EAAM,MAAA,YAAA,GAAe,OAA0B,IAAI,CAAA;AACnD,EAAA,MAAM,CAAC,qBAAA,EAAuB,wBAAwB,CAAA,GAAI,QAExD,EAAA;AACF,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAA6B,IAAI,CAAA;AACvE,EAAM,MAAA,gBAAA,GAAmB,OAAgB,WAAW,CAAA;AAEpD,EAAA,MAAM,aAAgB,GAAA,OAAA;AAAA,IACpB,MAAM,wBAAwB,iBAAiB,CAAA;AAAA,IAC/C,CAAC,iBAAiB;AAAA,GACpB;AAEA,EAAM,MAAA;AAAA,IACJ,iBAAA;AAAA,IACA,OAAA;AAAA,IACA,WAAA;AAAA,IACA,cAAA;AAAA,IACA,cAAA;AAAA,IACA,cAAA;AAAA,IACA;AAAA,MACE,cAAe,CAAA;AAAA,IACjB,kBAAA;AAAA,IACA,WAAA;AAAA,IACA,eAAA;AAAA,IACA,eAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,gBAAgB,iBAAkB,CAAA,GAAA,CAAI,CAAC,CAAM,KAAA,OAAA,CAAQ,CAAC,CAAC,CAAA;AAC7D,IAAM,MAAA,WAAA,GAAc,CAAC,MAAoB,KAAA;AACvC,MAAA,MAAM,QAAQ,MAAS,GAAA,aAAA,CAAc,QAAQ,EAAE,aAAA,EAAe,CAAI,GAAA,EAAA;AAClE,MAAA,aAAA,CAAc,EAAE,MAAA,EAAQ,KAAO,EAAA,YAAA,EAAc,QAAQ,CAAA;AAAA,KACvD;AACA,IAAI,IAAA,aAAA,CAAc,WAAW,CAAG,EAAA;AAC9B,MAAY,WAAA,EAAA;AAAA,KACd,MAAA,IAAW,aAAc,CAAA,MAAA,KAAW,CAAG,EAAA;AACrC,MAAM,MAAA,CAAC,MAAM,CAAI,GAAA,aAAA;AACjB,MAAA,WAAA,CAAY,MAAM,CAAA;AAAA,KACb,MAAA;AACL,MAAA,WAAA,CAAY,EAAE,EAAA,EAAI,KAAO,EAAA,OAAA,EAAS,eAAe,CAAA;AAAA;AACnD,KACC,CAAC,iBAAA,EAAmB,aAAe,EAAA,OAAA,EAAS,aAAa,CAAC,CAAA;AAE7D,EAAA,MAAM,aAAgB,GAAA,WAAA,CAAY,CAAC,KAAA,EAAe,MAAmB,KAAA;AACnE,IAAA,UAAA,CAAW,MAAM;AACf,MAAyB,wBAAA,CAAA;AAAA,QACvB,MAAA;AAAA,QACA,KAAA;AAAA,QACA,KAAO,EAAA;AAAA,OACR,CAAA;AAAA,OACA,GAAG,CAAA;AAAA,GACR,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,eAAkB,GAAA,WAAA;AAAA,IACtB,CAAC,QAAQ,CAAM,KAAA;AACb,MAAA,qBAAA,CAAsB,MAAM;AAC1B,QAAM,MAAA,MAAA,GAAS,aAAa,OAAS,EAAA,aAAA;AAAA,UACnC,8BAA8B,KAAK,CAAA,SAAA;AAAA,SACrC;AACA,QAAA,IAAI,MAAQ,EAAA;AACV,UAAA,MAAA,CAAO,KAAM,EAAA;AAAA;AACf,OACD,CAAA;AAAA,KACH;AAAA,IACA,CAAC,YAAY;AAAA,GACf;AAEA,EAAA,MAAM,eAAkB,GAAA,WAAA;AAAA,IACtB,CAAC,MAAmB,KAAA;AAClB,MAAA,cAAA,CAAe,MAAM,CAAA;AAGrB,MAAA,qBAAA,CAAsB,MAAM;AAC1B,QAAA,IAAI,QAAQ,MAAQ,EAAA;AAClB,UAAA,eAAA,CAAgB,CAAC,CAAA;AAAA;AACnB,OACD,CAAA;AAAA,KACH;AAAA,IACA,CAAC,OAAA,CAAQ,MAAQ,EAAA,eAAA,EAAiB,cAAc;AAAA,GAClD;AAEA,EAAA,MAAM,eAAkB,GAAA,OAAA;AAAA,IACtB,MAAM,CAAC,MAAmB,KAAA;AACxB,MAAA,MAAM,QAAQ,MAAM;AAClB,QAAA,cAAA,CAAe,IAAI,CAAA;AACnB,QAAgB,eAAA,EAAA;AAAA,OAClB;AACA,MAAO,OAAA;AAAA,QACL,kBAAoB,EAAA,QAAA;AAAA,QACpB,IAAM,EAAA,eAAA;AAAA,QACN,QAAU,EAAA,KAAA;AAAA,QACV,OAAS,EAAA,KAAA;AAAA,QACT,WAAW,MAAM;AACf,UAAA,cAAA,CAAe,IAAI,CAAA;AACnB,UAAA,eAAA,CAAgB,MAAM,CAAA;AAAA,SACxB;AAAA,QACA,IAAA,EAAM,CAAoC,iCAAA,EAAA,MAAA,CAAO,IAAI,CAAA,CAAA;AAAA,QACrD,KAAO,EAAA,eAAA;AAAA,QACP,OAAS,EAAA;AAAA,OACX;AAAA,KACF;AAAA,IACA,CAAC,iBAAiB,eAAe;AAAA,GACnC;AAEA,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,QAAgB,UAAwB,KAAA;AACvC,MAAA,IAAI,UAAY,EAAA;AACd,QAAe,cAAA,CAAA,eAAA,CAAgB,MAAM,CAAC,CAAA;AAAA,OACjC,MAAA;AACL,QAAA,eAAA,CAAgB,MAAM,CAAA;AAAA;AACxB,KACF;AAAA,IACA,CAAC,iBAAiB,eAAe;AAAA,GACnC;AAGA,EAAA,MAAM,wBACJ,GAAA,WAAA;AAAA,IACE,CAAC,CAAG,EAAA,WAAA,GAAc,EAAO,KAAA;AACvB,MAAA,IACE,qBAAuB,EAAA,KAAA,KAAU,QACjC,IAAA,qBAAA,CAAsB,MACtB,EAAA;AACA,QAAM,MAAA,EAAE,QAAW,GAAA,qBAAA;AACnB,QAAM,MAAA,mBAAA,GAAsB,cAAe,CAAA,MAAA,EAAQ,WAAW,CAAA;AAE9D,QAAA,wBAAA,CAAyB,KAAS,CAAA,CAAA;AAClC,QAAA,eAAA,CAAgB,mBAAmB,CAAA;AAAA;AAErC,MAAA,wBAAA,CAAyB,KAAS,CAAA,CAAA;AAAA,KACpC;AAAA,IACA,CAAC,eAAiB,EAAA,qBAAA,EAAuB,cAAc;AAAA,GACzD;AAEF,EAAA,MAAM,oBAAuB,GAAA,WAAA;AAAA,IAC3B,CAAC,QAAQ,OAAY,KAAA;AACnB,MAAA,QAAQ,MAAQ;AAAA,QACd,KAAK,eAAiB,EAAA;AACpB,UAAM,MAAA,EAAE,QAAW,GAAA,OAAA;AACnB,UAAA,YAAA,CAAa,QAAQ,IAAI,CAAA;AACzB,UAAO,OAAA,IAAA;AAAA;AACT,QACA,KAAK,eAAiB,EAAA;AACpB,UAAM,MAAA,EAAE,QAAW,GAAA,OAAA;AACnB,UAAM,MAAA,KAAA,GAAQ,OAAQ,CAAA,OAAA,CAAQ,MAAM,CAAA;AACpC,UAAA,aAAA,CAAc,OAAO,MAAM,CAAA;AAC3B,UAAO,OAAA,IAAA;AAAA;AACT,QACA,KAAK,aAAe,EAAA;AAClB,UAAM,MAAA,EAAE,QAAW,GAAA,OAAA;AACnB,UAAyB,wBAAA,CAAA;AAAA,YACvB,MAAA;AAAA,YACA,KAAA,EAAO,OAAQ,CAAA,OAAA,CAAQ,MAAM,CAAA;AAAA,YAC7B,KAAO,EAAA;AAAA,WACR,CAAA;AACD,UAAO,OAAA,IAAA;AAAA;AACT,QACA;AACE,UAAO,OAAA,KAAA;AAAA;AACX,KACF;AAAA,IACA,CAAC,YAAc,EAAA,aAAA,EAAe,OAAO;AAAA,GACvC;AAEA,EAAM,MAAA,iBAAA,GAAoB,WAAkC,CAAA,CAAC,CAAM,KAAA;AACjE,IAAA,IAAI,CAAE,CAAA,GAAA,KAAQ,YAAgB,IAAA,CAAA,CAAE,QAAQ,WAAa,EAAA;AACnD,MAAA,kBAAA,CAAmB,EAAE,MAAQ,EAAA,CAAA,CAAE,GAAQ,KAAA,WAAA,GAAc,QAAQ,KAAK,CAAA;AAAA;AACpE,GACF,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,kBAAqB,GAAA,WAAA;AAAA,IACzB,CAAC,oBAA4B,QAAiC,KAAA;AAC5D,MAAA,IAAI,aAAa,KAAW,CAAA,EAAA;AAC1B,QAAM,MAAA,GAAA,GAAM,YAAY,kBAAkB,CAAA;AAC1C,QAAA,eAAA,CAAgB,GAAG,CAAA;AACnB,QAAA,aAAA,CAAc,KAAK,kBAAkB,CAAA;AAAA,OAChC,MAAA;AACL,QAAM,MAAA,GAAA,GAAM,cAAe,CAAA,QAAA,EAAU,kBAAkB,CAAA;AACvD,QAAA,eAAA,CAAgB,GAAG,CAAA;AAAA;AACrB,KACF;AAAA,IACA,CAAC,aAAA,EAAe,eAAiB,EAAA,WAAA,EAAa,cAAc;AAAA,GAC9D;AAEA,EAAA,MAAM,iBAAoB,GAAA,WAAA;AAAA,IACxB,CAAC,MAAW,KAAA;AACV,MAAA,IAAI,qBAAuB,EAAA;AACzB,QAAM,MAAA,EAAE,MAAQ,EAAA,cAAA,EAAmB,GAAA,qBAAA;AACnC,QAAA,wBAAA,CAAyB,KAAS,CAAA,CAAA;AAClC,QAAA,kBAAA,CAAmB,QAAQ,cAAc,CAAA;AAAA;AAC3C,KACF;AAAA,IACA,CAAC,oBAAoB,qBAAqB;AAAA,GAC5C;AAEA,EAAA,MAAM,eAAkB,GAAA,WAAA;AAAA,IACtB,CAAC,CAAM,KAAA;AACL,MAAM,MAAA,SAAA,GAAa,EAAE,MAAuB,CAAA,aAAA;AAAA,QAC1C;AAAA,OACF;AACA,MAAA,IAAI,CAAC,SAAW,EAAA;AACd,QAAA,MAAM,IAAO,GAAA,YAAA,CAAa,CAAE,CAAA,MAAA,EAAQ,gBAAgB,CAAA;AACpD,QAAA,IAAI,IAAM,EAAA;AACR,UAAM,MAAA,KAAA,GAAQ,oBAAoB,IAAI,CAAA;AACtC,UAAqB,oBAAA,CAAA,KAAA,EAAO,EAAE,QAAQ,CAAA;AAAA;AACxC;AACF,KACF;AAAA,IACA,CAAC,oBAAoB;AAAA,GACvB;AAEA,EAAA,MAAMA,gBAAgE,GAAA;AAAA,IACpE,eAAiB,EAAA,gBAAA;AAAA;AAAA,IAEjB,OAAS,EAAA,eAAA;AAAA,IACT,SAAW,EAAA,iBAAA;AAAA,IACX,YAAc,EAAA,oBAAA;AAAA,IACd,cAAgB,EAAA;AAAA,GAClB;AAEA,EAAM,MAAA,oBAAA,GAAuB,YAAY,MAAM;AAC7C,IAAyB,wBAAA,CAAA;AAAA,MACvB,KAAO,EAAA,CAAA,CAAA;AAAA,MACP,KAAO,EAAA;AAAA,KACR,CAAA;AAAA,GACH,EAAG,EAAE,CAAA;AAEL,EAAM,MAAA,sBAAA,GAAyB,WAAkC,CAAA,CAAC,GAAQ,KAAA;AACxE,IAAI,IAAA,GAAA,CAAI,QAAQ,WAAa,EAAA;AAC3B,MAAmB,kBAAA,CAAA,GAAA,CAAI,QAAQ,KAAK,CAAA;AAAA;AACtC,GACF,EAAG,EAAE,CAAA;AAEL,EAAM,MAAA,gBAAA,GAAmB,YAAqC,MAAM;AAClE,IAAA,IAAI,qBAAuB,EAAA;AACzB,MAAM,MAAA,EAAE,OAAU,GAAA,qBAAA;AAClB,MAAA,IAAI,UAAU,CAAI,CAAA,EAAA;AAChB,QAAA,YAAA,CAAa,SAAS,KAAM,EAAA;AAAA,OACvB,MAAA;AACL,QAAA,eAAA,CAAgB,KAAK,CAAA;AAAA;AAEvB,MAAA,wBAAA,CAAyB,KAAS,CAAA,CAAA;AAAA;AACpC,GACC,EAAA,CAAC,eAAiB,EAAA,qBAAqB,CAAC,CAAA;AAE3C,EAAA,MAAM,cAAiB,GAAA;AAAA,IACrB,GAAK,EAAA,YAAA;AAAA,IACL,OAAS,EAAA,oBAAA;AAAA,IACT,SAAW,EAAA;AAAA,GACb;AAEA,EAAO,OAAA;AAAA,IACL,eAAAA,EAAAA,gBAAAA;AAAA,IACA,iBAAA;AAAA,IACA,cAAA;AAAA,IACA,aAAA;AAAA,IACA,OAAA;AAAA,IACA,qBAAA;AAAA,IACA,YAAc,EAAA,gBAAA;AAAA,IACd,MAAQ,EAAA,iBAAA;AAAA,IACR;AAAA,GACF;AACF;AAEA,SAAS,wBACP,OACyB,EAAA;AACzB,EAAA,OAAO,OAAQ,CAAA,MAAA,CAAO,CAAC,CAAA,EAAG,SAAS,EAAE,GAAG,CAAG,EAAA,CAAC,IAAI,IAAI,GAAG,GAAI,EAAA,CAAA,EAAI,EAAE,CAAA;AACnE;;;;"}
|
|
1
|
+
{"version":3,"file":"useCustomFilters.js","sources":["../../src/custom-filters/useCustomFilters.ts"],"sourcesContent":["import { ColumnDescriptorsByName, Filter } from \"@vuu-ui/vuu-filter-types\";\nimport { PromptProps } from \"@vuu-ui/vuu-popups\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n EditableLabelProps,\n EditAPI,\n NullEditAPI,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport {\n filterAsQuery,\n getElementDataIndex,\n queryClosest,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n KeyboardEventHandler,\n MouseEventHandler,\n RefObject,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { FilterBarProps } from \"../filter-bar\";\nimport {\n FilterEditCancelHandler,\n FilterEditSaveHandler,\n} from \"../filter-editor\";\nimport { FilterPillProps } from \"../filter-pill\";\nimport { FilterMenuOptions } from \"../filter-pill-menu\";\nimport { navigateToNextItem } from \"./filterBarFocusManagement\";\nimport { useFilterState } from \"./useFilterState\";\nimport { MenuActionHandler } from \"@vuu-ui/vuu-context-menu\";\n\nexport type EditFilterState = \"create\" | \"edit\";\nexport type FilterState = EditFilterState | \"rename\";\nexport const isEditFilterState = (\n filterState?: string,\n): filterState is EditFilterState =>\n filterState === \"edit\" || filterState === \"create\";\n\ntype InteractedFilterState = {\n filter?: Filter;\n index: number;\n state: FilterState;\n};\n\nexport interface CustomFilterHookProps\n extends Pick<\n FilterBarProps,\n | \"columnDescriptors\"\n | \"defaultFilterState\"\n | \"filterState\"\n | \"onApplyFilter\"\n | \"onFilterDeleted\"\n | \"onFilterRenamed\"\n | \"onFilterStateChanged\"\n > {\n containerRef: RefObject<HTMLDivElement | null>;\n}\n\nexport const useCustomFilters = ({\n columnDescriptors,\n containerRef,\n defaultFilterState,\n filterState,\n onApplyFilter,\n onFilterDeleted,\n onFilterRenamed,\n onFilterStateChanged,\n}: CustomFilterHookProps) => {\n const addButtonRef = useRef<HTMLButtonElement>(null);\n const [interactedFilterState, setInteractedFilterState] = useState<\n InteractedFilterState | undefined\n >();\n const [promptProps, setPromptProps] = useState<PromptProps | null>(null);\n const editPillLabelAPI = useRef<EditAPI>(NullEditAPI);\n\n const columnsByName = useMemo(\n () => columnDescriptorsByName(columnDescriptors),\n [columnDescriptors],\n );\n\n const {\n activeFilterIndex,\n filters,\n onAddFilter,\n onChangeFilter,\n onDeleteFilter,\n onRenameFilter,\n onToggleFilterActive,\n } = useFilterState({\n defaultFilterState,\n filterState,\n onFilterDeleted,\n onFilterRenamed,\n onFilterStateChanged,\n });\n\n useEffect(() => {\n const activeFilters = activeFilterIndex.map((i) => filters[i]);\n const applyFilter = (filter?: Filter) => {\n const query = filter ? filterAsQuery(filter, { columnsByName }) : \"\";\n onApplyFilter({ filter: query, filterStruct: filter });\n };\n if (activeFilters.length === 0) {\n applyFilter();\n } else if (activeFilters.length === 1) {\n const [filter] = activeFilters;\n applyFilter(filter);\n } else {\n applyFilter({ op: \"and\", filters: activeFilters });\n }\n }, [activeFilterIndex, columnsByName, filters, onApplyFilter]);\n\n const editPillLabel = useCallback((index: number, filter: Filter) => {\n setTimeout(() => {\n setInteractedFilterState({\n filter,\n index,\n state: \"rename\",\n });\n }, 100);\n }, []);\n\n const focusFilterPill = useCallback(\n (index = 0) => {\n requestAnimationFrame(() => {\n const target = containerRef.current?.querySelector(\n `.vuuFilterPill[data-index=\"${index}\"] button`,\n ) as undefined | HTMLInputElement;\n if (target) {\n target.focus();\n }\n });\n },\n [containerRef],\n );\n\n const deleteConfirmed = useCallback(\n (filter: Filter) => {\n onDeleteFilter(filter);\n\n // TODO move focus to next/previous filter\n requestAnimationFrame(() => {\n if (filters.length) {\n focusFilterPill(0);\n }\n });\n },\n [filters.length, focusFilterPill, onDeleteFilter],\n );\n\n const getDeletePrompt = useMemo(\n () => (filter: Filter) => {\n const close = () => {\n setPromptProps(null);\n focusFilterPill();\n };\n return {\n confirmButtonLabel: \"Remove\",\n icon: \"warn-triangle\",\n onCancel: close,\n onClose: close,\n onConfirm: () => {\n setPromptProps(null);\n deleteConfirmed(filter);\n },\n text: `Are you sure you want to delete ${filter.name}`,\n title: \"Remove Filter\",\n variant: \"warn\",\n } as PromptProps;\n },\n [deleteConfirmed, focusFilterPill],\n );\n\n const deleteFilter = useCallback(\n (filter: Filter, withPrompt: boolean) => {\n if (withPrompt) {\n setPromptProps(getDeletePrompt(filter));\n } else {\n deleteConfirmed(filter);\n }\n },\n [deleteConfirmed, getDeletePrompt],\n );\n\n // TODO handle cancel edit name\n const handleExitEditFilterName: EditableLabelProps[\"onExitEditMode\"] =\n useCallback(\n (_, editedValue = \"\") => {\n if (\n interactedFilterState?.state === \"rename\" &&\n interactedFilterState.filter\n ) {\n const { filter } = interactedFilterState;\n const indexOfEditedFilter = onRenameFilter(filter, editedValue);\n\n setInteractedFilterState(undefined);\n focusFilterPill(indexOfEditedFilter);\n }\n setInteractedFilterState(undefined);\n },\n [focusFilterPill, interactedFilterState, onRenameFilter],\n );\n\n const handlePillMenuAction = useCallback<MenuActionHandler>(\n (menuId, options) => {\n switch (menuId) {\n case \"delete-filter\": {\n const { filter } = options as FilterMenuOptions;\n deleteFilter(filter, true);\n return true;\n }\n case \"rename-filter\": {\n const { filter } = options as FilterMenuOptions;\n const index = filters.indexOf(filter);\n editPillLabel(index, filter);\n return true;\n }\n case \"edit-filter\": {\n const { filter } = options as FilterMenuOptions;\n setInteractedFilterState({\n filter,\n index: filters.indexOf(filter),\n state: \"edit\",\n });\n return true;\n }\n default:\n return false;\n }\n },\n [deleteFilter, editPillLabel, filters],\n );\n\n const handlePillKeyDown = useCallback<KeyboardEventHandler>((e) => {\n if (e.key === \"ArrowRight\" || e.key === \"ArrowLeft\") {\n navigateToNextItem(e.target, e.key === \"ArrowLeft\" ? \"bwd\" : \"fwd\");\n }\n }, []);\n\n const addIfNewElseUpdate = useCallback(\n (newOrUpdatedFilter: Filter, existing: Filter | undefined) => {\n if (existing === undefined) {\n const idx = onAddFilter(newOrUpdatedFilter);\n focusFilterPill(idx);\n editPillLabel(idx, newOrUpdatedFilter);\n } else {\n const idx = onChangeFilter(existing, newOrUpdatedFilter);\n focusFilterPill(idx);\n }\n },\n [editPillLabel, focusFilterPill, onAddFilter, onChangeFilter],\n );\n\n const filterSaveHandler = useCallback<FilterEditSaveHandler>(\n (filter) => {\n if (interactedFilterState) {\n const { filter: existingFilter } = interactedFilterState;\n setInteractedFilterState(undefined);\n addIfNewElseUpdate(filter, existingFilter);\n }\n },\n [addIfNewElseUpdate, interactedFilterState],\n );\n\n const handlePillClick = useCallback<MouseEventHandler<HTMLButtonElement>>(\n (e) => {\n const isEditing = (e.target as HTMLElement).querySelector(\n \".vuuEditableLabel-editing\",\n );\n if (!isEditing) {\n const pill = queryClosest(e.target, \".vuuFilterPill\");\n if (pill) {\n const index = getElementDataIndex(pill);\n onToggleFilterActive(index, e.shiftKey);\n }\n }\n },\n [onToggleFilterActive],\n );\n\n const FilterPillProps: Omit<FilterPillProps, \"filter\" | \"selected\"> = {\n editLabelApiRef: editPillLabelAPI,\n // onBeginEdit: handleBeginEditFilterName,\n onClick: handlePillClick,\n onKeyDown: handlePillKeyDown,\n onMenuAction: handlePillMenuAction,\n onExitEditMode: handleExitEditFilterName,\n };\n\n const handleClickAddButton = useCallback(() => {\n setInteractedFilterState({\n index: -1,\n state: \"create\",\n });\n }, []);\n\n const handleKeyDownAddButton = useCallback<KeyboardEventHandler>((evt) => {\n if (evt.key === \"ArrowLeft\") {\n navigateToNextItem(evt.target, \"bwd\");\n }\n }, []);\n\n const handleCancelEdit = useCallback<FilterEditCancelHandler>(() => {\n if (interactedFilterState) {\n const { index } = interactedFilterState;\n if (index === -1) {\n addButtonRef.current?.focus();\n } else {\n focusFilterPill(index);\n }\n setInteractedFilterState(undefined);\n }\n }, [focusFilterPill, interactedFilterState]);\n\n const addButtonProps = {\n ref: addButtonRef,\n onClick: handleClickAddButton,\n onKeyDown: handleKeyDownAddButton,\n };\n\n return {\n FilterPillProps,\n activeFilterIndex,\n addButtonProps,\n columnsByName,\n filters,\n interactedFilterState,\n onCancelEdit: handleCancelEdit,\n onSave: filterSaveHandler,\n promptProps,\n };\n};\n\nfunction columnDescriptorsByName(\n columns: ColumnDescriptor[],\n): ColumnDescriptorsByName {\n return columns.reduce((m, col) => ({ ...m, [col.name]: col }), {});\n}\n"],"names":["FilterPillProps"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpandoCombobox.js","sources":["../../src/filter-clause/ExpandoCombobox.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { ComboBox, ComboBoxProps } from \"@salt-ds/core\";\nimport {\n ChangeEvent,\n ForwardedRef,\n Ref,\n SyntheticEvent,\n forwardRef,\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 ComboBoxProps<Item> {\n itemToString?: (item: Item) => string;\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
|
|
1
|
+
{"version":3,"file":"ExpandoCombobox.js","sources":["../../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 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 ComboBoxProps<Item> {\n itemToString?: (item: Item) => string;\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 value: valueProp,\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 [value, setValue] = useState(\n valueProp === undefined ? \"\" : valueProp.toString(),\n );\n\n const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {\n const value = evt.target.value;\n onChange?.(evt);\n setValue(value);\n };\n\n const handleSelectionChange = (evt: SyntheticEvent, newSelected: Item[]) => {\n if (multiselect) {\n onSelectionChange?.(evt, newSelected);\n } else {\n const [selectedValue] = newSelected;\n setTimeout(() => {\n onSelectionChange?.(evt, newSelected);\n setValue(itemToString(selectedValue));\n }, 100);\n }\n };\n\n const inputProps = useMemo<ComboBoxProps<Item>[\"inputProps\"]>(() => {\n return {\n autoComplete: \"off\",\n ...inputPropsProp,\n onFocus: (evt) => {\n inputPropsProp?.onFocus?.(evt);\n setTimeout(() => {\n setOpen(true);\n }, 100);\n },\n };\n }, [inputPropsProp]);\n\n // const matchingValues = values.filter((val) =>\n // val.toLowerCase().startsWith(value.trim().toLowerCase())\n // );\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={setOpen}\n onSelectionChange={handleSelectionChange}\n open={open}\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"],"mappings":";;;;;;;;AAiBA,MAAM,SAAY,GAAA,oBAAA;AAOlB,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,KAAO,EAAA,SAAA;AAAA,EACP,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,EAAM,MAAA,CAAC,KAAO,EAAA,QAAQ,CAAI,GAAA,QAAA;AAAA,IACxB,SAAc,KAAA,KAAA,CAAA,GAAY,EAAK,GAAA,SAAA,CAAU,QAAS;AAAA,GACpD;AAEA,EAAM,MAAA,YAAA,GAAe,CAAC,GAAuC,KAAA;AAC3D,IAAMC,MAAAA,MAAAA,GAAQ,IAAI,MAAO,CAAA,KAAA;AACzB,IAAA,QAAA,GAAW,GAAG,CAAA;AACd,IAAA,QAAA,CAASA,MAAK,CAAA;AAAA,GAChB;AAEA,EAAM,MAAA,qBAAA,GAAwB,CAAC,GAAA,EAAqB,WAAwB,KAAA;AAC1E,IAAA,IAAI,WAAa,EAAA;AACf,MAAA,iBAAA,GAAoB,KAAK,WAAW,CAAA;AAAA,KAC/B,MAAA;AACL,MAAM,MAAA,CAAC,aAAa,CAAI,GAAA,WAAA;AACxB,MAAA,UAAA,CAAW,MAAM;AACf,QAAA,iBAAA,GAAoB,KAAK,WAAW,CAAA;AACpC,QAAS,QAAA,CAAA,YAAA,CAAa,aAAa,CAAC,CAAA;AAAA,SACnC,GAAG,CAAA;AAAA;AACR,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,UAAA,CAAW,MAAM;AACf,UAAA,OAAA,CAAQ,IAAI,CAAA;AAAA,WACX,GAAG,CAAA;AAAA;AACR,KACF;AAAA,GACF,EAAG,CAAC,cAAc,CAAC,CAAA;AAMnB,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,OAAA;AAAA,UACd,iBAAmB,EAAA,qBAAA;AAAA,UACnB,IAAA;AAAA,UACA,KAAA;AAAA,UAEC;AAAA;AAAA;AACH;AAAA,GACF;AAEJ,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
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:
|
|
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, ReactElement } 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: ReactElement[] = [];\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,UAA0B,EAAC;AACjC,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;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterPill.js","sources":["../../src/filter-pill/FilterPill.tsx"],"sourcesContent":["import { ColumnDescriptorsByName, Filter } from \"@vuu-ui/vuu-filter-types\";\nimport {\n
|
|
1
|
+
{"version":3,"file":"FilterPill.js","sources":["../../src/filter-pill/FilterPill.tsx"],"sourcesContent":["import { ColumnDescriptorsByName, Filter } from \"@vuu-ui/vuu-filter-types\";\nimport {\n MenuCloseHandler,\n PopupMenuProps,\n Tooltip,\n useTooltip,\n} from \"@vuu-ui/vuu-popups\";\nimport {\n EditableLabel,\n EditableLabelProps,\n ExitEditModeHandler,\n SplitStateButton,\n SplitStateButtonProps,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport { useId } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { FocusEventHandler, useCallback, useMemo, useRef } from \"react\";\nimport { filterAsReactNode } from \"./filterAsReactNode\";\nimport {\n closeCommand,\n deleteCommand,\n editCommand,\n MenuOptions,\n renameCommand,\n} from \"../filter-pill-menu/FilterPillMenuOptions\";\nimport { getFilterLabel } from \"./getFilterLabel\";\nimport { getFilterTooltipText } from \"./getFilterTooltipText\";\n\nimport filterPillCss from \"./FilterPill.css\";\nimport { ButtonProps } from \"@salt-ds/core\";\nimport {\n ContextMenuItemDescriptor,\n MenuActionHandler,\n} from \"@vuu-ui/vuu-context-menu\";\n\nconst classBase = \"vuuFilterPill\";\n\nexport interface FilterPillProps\n extends SplitStateButtonProps,\n Pick<\n Partial<EditableLabelProps>,\n \"editing\" | \"editLabelApiRef\" | \"onExitEditMode\"\n > {\n allowClose?: boolean;\n allowDelete?: boolean;\n allowEdit?: boolean;\n allowRename?: boolean;\n\n columnsByName?: ColumnDescriptorsByName;\n editable?: boolean;\n filter: Filter;\n index?: number;\n onBeginEdit?: (filter: Filter) => void;\n onMenuAction?: MenuActionHandler;\n}\n\nexport const FilterPill = ({\n allowClose = true,\n allowDelete = true,\n allowEdit = true,\n allowRename = true,\n className: classNameProp,\n columnsByName,\n editable = true,\n editing = false,\n editLabelApiRef,\n filter,\n id: idProp,\n onBeginEdit,\n onExitEditMode,\n onMenuAction,\n ...htmlAttributes\n}: FilterPillProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-filter-pill\",\n css: filterPillCss,\n window: targetWindow,\n });\n\n const rootRef = useRef<HTMLDivElement>(null);\n const handleEnterEditMode: EditableLabelProps[\"onEnterEditMode\"] =\n useCallback(() => {\n onBeginEdit?.(filter);\n }, [filter, onBeginEdit]);\n\n const getLabel = getFilterLabel(columnsByName);\n const label = useMemo(\n () => filter.name ?? getLabel(filter),\n [getLabel, filter],\n );\n\n const getTooltipTextl = getFilterTooltipText(columnsByName);\n\n const id = useId(idProp);\n\n const handleMenuClose = useCallback<MenuCloseHandler>((reason) => {\n if (reason?.type === \"escape\") {\n requestAnimationFrame(() => {\n if (rootRef.current) {\n rootRef.current.focus();\n }\n });\n }\n }, []);\n\n const popupMenuProps = useMemo<\n Pick<\n PopupMenuProps,\n \"menuBuilder\" | \"menuActionHandler\" | \"menuOptions\" | \"onMenuClose\"\n >\n >(\n () => ({\n icon: \"more-vert\",\n menuBuilder: (_location, options) => {\n const menuItems: ContextMenuItemDescriptor[] = [];\n if (allowRename) {\n menuItems.push(renameCommand(options as MenuOptions));\n }\n if (allowEdit) {\n menuItems.push(editCommand(options as MenuOptions));\n }\n if (allowClose) {\n menuItems.push(closeCommand(options as MenuOptions));\n }\n if (allowDelete) {\n menuItems.push(deleteCommand(options as MenuOptions));\n }\n return menuItems;\n },\n\n menuActionHandler: onMenuAction,\n menuLocation: \"filter-pill-menu\",\n menuOptions: {\n filter,\n },\n\n onMenuClose: handleMenuClose,\n }),\n [\n allowClose,\n allowDelete,\n allowEdit,\n allowRename,\n filter,\n handleMenuClose,\n onMenuAction,\n ],\n );\n\n const handleExitEditMode = useCallback<ExitEditModeHandler>(\n (originalValue, newValue) => {\n onExitEditMode?.(originalValue, newValue);\n requestAnimationFrame(() => {\n rootRef.current?.querySelector(\"button\")?.focus();\n });\n },\n [onExitEditMode],\n );\n\n const { anchorProps, hideTooltip, showTooltip, tooltipProps } = useTooltip({\n anchorQuery: \".vuuFilterPill\",\n id,\n placement: [\"above\", \"below\"],\n tooltipContent: filterAsReactNode(filter, getTooltipTextl),\n });\n\n const buttonProps: Partial<ButtonProps> = {\n onBlur: () => hideTooltip(),\n onFocus: useCallback<FocusEventHandler>(() => {\n showTooltip(rootRef);\n }, [showTooltip]),\n };\n\n return (\n <SplitStateButton\n {...anchorProps}\n {...htmlAttributes}\n ButtonProps={buttonProps}\n PopupMenuProps={popupMenuProps}\n className={cx(classBase, classNameProp)}\n data-text={label}\n ref={rootRef}\n >\n {editable && onExitEditMode ? (\n <EditableLabel\n defaultValue={label}\n editing={editing}\n editLabelApiRef={editLabelApiRef}\n key={label}\n onEnterEditMode={handleEnterEditMode}\n onExitEditMode={handleExitEditMode}\n />\n ) : (\n label\n )}\n {tooltipProps && (\n <Tooltip className={`${classBase}-tooltip`} {...tooltipProps} />\n )}\n </SplitStateButton>\n );\n};\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.
|
|
2
|
+
"version": "0.13.0",
|
|
3
3
|
"author": "heswell",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"devDependencies": {
|
|
7
|
-
"@vuu-ui/vuu-data-types": "0.
|
|
8
|
-
"@vuu-ui/vuu-protocol-types": "0.
|
|
9
|
-
"@vuu-ui/vuu-table-types": "0.
|
|
10
|
-
"@vuu-ui/vuu-filter-types": "0.
|
|
7
|
+
"@vuu-ui/vuu-data-types": "0.13.0",
|
|
8
|
+
"@vuu-ui/vuu-protocol-types": "0.13.0",
|
|
9
|
+
"@vuu-ui/vuu-table-types": "0.13.0",
|
|
10
|
+
"@vuu-ui/vuu-filter-types": "0.13.0"
|
|
11
11
|
},
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@vuu-ui/vuu-data-react": "0.
|
|
14
|
-
"@vuu-ui/vuu-filter-parser": "0.
|
|
15
|
-
"@vuu-ui/vuu-popups": "0.
|
|
16
|
-
"@vuu-ui/vuu-ui-controls": "0.
|
|
17
|
-
"@vuu-ui/vuu-table": "0.
|
|
18
|
-
"@vuu-ui/vuu-utils": "0.
|
|
13
|
+
"@vuu-ui/vuu-data-react": "0.13.0",
|
|
14
|
+
"@vuu-ui/vuu-filter-parser": "0.13.0",
|
|
15
|
+
"@vuu-ui/vuu-popups": "0.13.0",
|
|
16
|
+
"@vuu-ui/vuu-ui-controls": "0.13.0",
|
|
17
|
+
"@vuu-ui/vuu-table": "0.13.0",
|
|
18
|
+
"@vuu-ui/vuu-utils": "0.13.0",
|
|
19
19
|
"@salt-ds/core": "1.43.0",
|
|
20
20
|
"@salt-ds/styles": "0.2.1",
|
|
21
21
|
"@salt-ds/window": "0.1.1"
|
|
@@ -23,8 +23,8 @@
|
|
|
23
23
|
"peerDependencies": {
|
|
24
24
|
"@internationalized/date": "^3.0.0",
|
|
25
25
|
"clsx": "^2.0.0",
|
|
26
|
-
"react": "
|
|
27
|
-
"react-dom": "
|
|
26
|
+
"react": "^19.1.0",
|
|
27
|
+
"react-dom": "^19.1.0"
|
|
28
28
|
},
|
|
29
29
|
"files": [
|
|
30
30
|
"README.md",
|
package/types/FilterModel.d.ts
CHANGED
|
@@ -18,7 +18,7 @@ export declare class FilterClauseModel extends EventEmitter<FilterClauseModelEve
|
|
|
18
18
|
private setIsValid;
|
|
19
19
|
get column(): undefined | string;
|
|
20
20
|
set column(column: undefined | string);
|
|
21
|
-
get op():
|
|
21
|
+
get op(): import("@vuu-ui/vuu-filter-types").SingleValueFilterClauseOp | "in" | undefined;
|
|
22
22
|
setOp(op: undefined | FilterClauseOp): void;
|
|
23
23
|
setValue(value: undefined | string | string[] | number | number[] | boolean | boolean[], isFinal?: boolean): void;
|
|
24
24
|
asFilter(throwIfInvalid?: boolean): FilterClause;
|
|
@@ -13,13 +13,13 @@ type InteractedFilterState = {
|
|
|
13
13
|
state: FilterState;
|
|
14
14
|
};
|
|
15
15
|
export interface CustomFilterHookProps extends Pick<FilterBarProps, "columnDescriptors" | "defaultFilterState" | "filterState" | "onApplyFilter" | "onFilterDeleted" | "onFilterRenamed" | "onFilterStateChanged"> {
|
|
16
|
-
containerRef: RefObject<HTMLDivElement>;
|
|
16
|
+
containerRef: RefObject<HTMLDivElement | null>;
|
|
17
17
|
}
|
|
18
18
|
export declare const useCustomFilters: ({ columnDescriptors, containerRef, defaultFilterState, filterState, onApplyFilter, onFilterDeleted, onFilterRenamed, onFilterStateChanged, }: CustomFilterHookProps) => {
|
|
19
19
|
FilterPillProps: Omit<FilterPillProps, "filter" | "selected">;
|
|
20
20
|
activeFilterIndex: number[];
|
|
21
21
|
addButtonProps: {
|
|
22
|
-
ref: RefObject<HTMLButtonElement>;
|
|
22
|
+
ref: RefObject<HTMLButtonElement | null>;
|
|
23
23
|
onClick: () => void;
|
|
24
24
|
onKeyDown: KeyboardEventHandler;
|
|
25
25
|
};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { ComboBoxProps } from "@salt-ds/core";
|
|
2
|
-
import { Ref } from "react";
|
|
2
|
+
import { ReactElement, Ref } from "react";
|
|
3
3
|
export interface ExpandoComboboxProps<Item = string> extends ComboBoxProps<Item> {
|
|
4
4
|
itemToString?: (item: Item) => string;
|
|
5
5
|
}
|
|
6
6
|
export declare const ExpandoCombobox: <Item = string>(props: ExpandoComboboxProps<Item> & {
|
|
7
7
|
ref?: Ref<HTMLDivElement>;
|
|
8
|
-
}) =>
|
|
8
|
+
}) => ReactElement;
|
|
@@ -8,13 +8,13 @@ export declare const useFilterClause: ({ filterClauseModel, onCancel, columnsByN
|
|
|
8
8
|
onKeyDownCapture: (evt: KeyboardEvent<HTMLInputElement>) => void;
|
|
9
9
|
tabIndex: number;
|
|
10
10
|
};
|
|
11
|
-
columnRef: import("react").RefObject<HTMLDivElement>;
|
|
11
|
+
columnRef: import("react").RefObject<HTMLDivElement | null>;
|
|
12
12
|
filterClause: Partial<FilterClause>;
|
|
13
13
|
onChangeValue: FilterClauseValueChangeHandler;
|
|
14
14
|
onDeselectValue: () => void;
|
|
15
15
|
onSelectColumn: (evt: SyntheticEvent, selectedColumn: string) => void;
|
|
16
16
|
onSelectOperator: (_: SyntheticEvent, selectedOp: FilterClauseOp) => void;
|
|
17
|
-
operatorRef: import("react").RefObject<HTMLDivElement>;
|
|
17
|
+
operatorRef: import("react").RefObject<HTMLDivElement | null>;
|
|
18
18
|
selectedColumn: import("@vuu-ui/vuu-table-types").ColumnDescriptor;
|
|
19
19
|
valueRef: RefCallback<HTMLDivElement>;
|
|
20
20
|
};
|
|
@@ -5,13 +5,13 @@ export declare const FilterClauseValueEditor: import("react").ForwardRefExoticCo
|
|
|
5
5
|
onKeyDownCapture: (evt: import("react").KeyboardEvent<HTMLInputElement>) => void;
|
|
6
6
|
tabIndex: number;
|
|
7
7
|
};
|
|
8
|
-
columnRef: import("react").RefObject<HTMLDivElement>;
|
|
8
|
+
columnRef: import("react").RefObject<HTMLDivElement | null>;
|
|
9
9
|
filterClause: Partial<import("@vuu-ui/vuu-filter-types").FilterClause>;
|
|
10
10
|
onChangeValue: import("../useFilterClause").FilterClauseValueChangeHandler;
|
|
11
11
|
onDeselectValue: () => void;
|
|
12
12
|
onSelectColumn: (evt: import("react").SyntheticEvent, selectedColumn: string) => void;
|
|
13
13
|
onSelectOperator: (_: import("react").SyntheticEvent, selectedOp: import("@vuu-ui/vuu-filter-types").FilterClauseOp) => void;
|
|
14
|
-
operatorRef: import("react").RefObject<HTMLDivElement>;
|
|
14
|
+
operatorRef: import("react").RefObject<HTMLDivElement | null>;
|
|
15
15
|
selectedColumn: import("@vuu-ui/vuu-table-types").ColumnDescriptor;
|
|
16
16
|
valueRef: import("react").RefCallback<HTMLDivElement>;
|
|
17
17
|
}, "inputProps" | "onChangeValue" | "selectedColumn" | "onDeselectValue"> & {
|
|
@@ -27,6 +27,6 @@ export declare const useFilterEditor: ({ columnDescriptors, filter, onCancel, on
|
|
|
27
27
|
onClick: () => boolean | undefined;
|
|
28
28
|
onKeyDown: KeyboardEventHandler;
|
|
29
29
|
};
|
|
30
|
-
saveButtonRef: import("react").RefObject<HTMLDivElement>;
|
|
30
|
+
saveButtonRef: import("react").RefObject<HTMLDivElement | null>;
|
|
31
31
|
setContainer: RefCallback<HTMLDivElement>;
|
|
32
32
|
};
|