npm - @vuu-ui/vuu-filters - Versions diffs - 0.8.98 → 0.9.0 - Mend

@vuu-ui/vuu-filters 0.8.98 → 0.9.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.

Files changed (46) hide show

package/cjs/custom-filters/CustomFilters.js CHANGED Viewed

@@ -18,7 +18,6 @@ const CustomFilters = ({
   onFilterDeleted,
   onFilterRenamed,
   onFilterStateChanged,
-  suggestionProvider,
   tableSchema
 }) => {
   const rootRef = react.useRef(null);
@@ -98,7 +97,6 @@ const CustomFilters = ({
         onCancel: onCancelEdit,
         onSave,
         filter: interactedFilterState?.filter,
-        suggestionProvider,
         tableSchema
       },
       "filter-editor"

package/cjs/custom-filters/CustomFilters.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CustomFilters.js","sources":["../../src/custom-filters/CustomFilters.tsx"],"sourcesContent":["import { Prompt } from \"@vuu-ui/vuu-popups\";\nimport type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport { HTMLAttributes, ReactElement, useRef } from \"react\";\nimport { type FilterBarProps } from \"../filter-bar\";\nimport { FilterEditor } from \"../filter-editor\";\nimport { FilterPill } from \"../filter-pill\";\nimport { FilterModel } from \"../FilterModel\";\nimport { isEditFilterState, useCustomFilters } from \"./useCustomFilters\";\n\nconst classBase = \"vuuCustomFilters\";\n\nexport interface CustomFilterProps\n extends HTMLAttributes<HTMLDivElement>,\n Pick<\n FilterBarProps,\n \| \"defaultFilterState\"\n \| \"filterState\"\n \| \"onApplyFilter\"\n \| \"onFilterDeleted\"\n \| \"onFilterRenamed\"\n \| \"onFilterStateChanged\"\n \| \"~~suggestionProvider\"\n \| \"~~tableSchema\"\n > {\n columnDescriptors: ColumnDescriptor[];\n}\n\nexport const CustomFilters = ({\n columnDescriptors,\n defaultFilterState,\n filterState,\n onApplyFilter,\n onFilterDeleted,\n onFilterRenamed,\n onFilterStateChanged,\n ~~suggestionProvider,\n~~ tableSchema,\n}: CustomFilterProps) => {\n const rootRef = useRef<HTMLDivElement>(null);\n\n const {\n activeFilterIndex,\n addButtonProps,\n columnsByName,\n filters,\n interactedFilterState,\n onCancelEdit,\n onSave,\n FilterPillProps,\n promptProps,\n } = useCustomFilters({\n containerRef: rootRef,\n columnDescriptors,\n defaultFilterState,\n filterState,\n onApplyFilter,\n onFilterStateChanged,\n onFilterDeleted,\n onFilterRenamed,\n });\n\n const indexOfFilterBeingRenamed =\n interactedFilterState?.state === \"rename\"\n ? interactedFilterState.index\n : -1;\n\n const filterModel = isEditFilterState(interactedFilterState?.state)\n ? new FilterModel(interactedFilterState.filter)\n : undefined;\n\n const getFilterPills = () => {\n const items: ReactElement[] = [];\n filters.forEach((filter, i) => {\n items.push(\n <FilterPill\n {...FilterPillProps}\n editing={indexOfFilterBeingRenamed === i}\n columnsByName={columnsByName}\n data-index={i}\n filter={filter}\n key={`filter-${i}`}\n selected={activeFilterIndex.includes(i)}\n />,\n );\n });\n return items;\n };\n\n return (\n <>\n <div className=\"vuuCustomFilters\" ref={rootRef}>\n <div className={`${classBase}-filters`}>{getFilterPills()}</div>\n <IconButton\n {...addButtonProps}\n aria-label=\"Add filter\"\n data-selectable={false}\n icon=\"plus\"\n key=\"filter-add\"\n tabIndex={0}\n variant=\"secondary\"\n />\n\n {promptProps ? (\n <Prompt\n {...promptProps}\n PopupProps={{\n anchorElement: rootRef,\n offsetTop: 16,\n placement: \"below-center\",\n }}\n />\n ) : null}\n </div>\n {filterModel && tableSchema && (\n <FilterEditor\n columnDescriptors={columnDescriptors}\n key=\"filter-editor\"\n onCancel={onCancelEdit}\n onSave={onSave}\n filter={interactedFilterState?.filter}\n ~~suggestionProvider={suggestionProvider}\n~~ tableSchema={tableSchema}\n />\n )}\n </>\n );\n};\n"],"names":["useRef","useCustomFilters","isEditFilterState","FilterModel","createElement","FilterPill","jsxs","Fragment","jsx","IconButton","Prompt","FilterEditor"],"mappings":";;;;;;;;;;;AAUA,MAAM,SAAY,GAAA,kBAAA,CAAA;~~AAkBX~~,MAAM,gBAAgB,CAAC;AAAA,EAC5B,iBAAA;AAAA,EACA,kBAAA;AAAA,EACA,WAAA;AAAA,EACA,aAAA;AAAA,EACA,eAAA;AAAA,EACA,eAAA;AAAA,EACA,oBAAA;AAAA,EACA,~~kBAAA;AAAA,EACA,~~WAAA;AACF,CAAyB,KAAA;AACvB,EAAM,MAAA,OAAA,GAAUA,aAAuB,IAAI,CAAA,CAAA;AAE3C,EAAM,MAAA;AAAA,IACJ,iBAAA;AAAA,IACA,cAAA;AAAA,IACA,aAAA;AAAA,IACA,OAAA;AAAA,IACA,qBAAA;AAAA,IACA,YAAA;AAAA,IACA,MAAA;AAAA,IACA,eAAA;AAAA,IACA,WAAA;AAAA,MACEC,iCAAiB,CAAA;AAAA,IACnB,YAAc,EAAA,OAAA;AAAA,IACd,iBAAA;AAAA,IACA,kBAAA;AAAA,IACA,WAAA;AAAA,IACA,aAAA;AAAA,IACA,oBAAA;AAAA,IACA,eAAA;AAAA,IACA,eAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAA,MAAM,yBACJ,GAAA,qBAAA,EAAuB,KAAU,KAAA,QAAA,GAC7B,sBAAsB,KACtB,GAAA,CAAA,CAAA,CAAA;AAEN,EAAM,MAAA,WAAA,GAAcC,mCAAkB,qBAAuB,EAAA,KAAK,IAC9D,IAAIC,uBAAA,CAAY,qBAAsB,CAAA,MAAM,CAC5C,GAAA,KAAA,CAAA,CAAA;AAEJ,EAAA,MAAM,iBAAiB,MAAM;AAC3B,IAAA,MAAM,QAAwB,EAAC,CAAA;AAC/B,IAAQ,OAAA,CAAA,OAAA,CAAQ,CAAC,MAAA,EAAQ,CAAM,KAAA;AAC7B,MAAM,KAAA,CAAA,IAAA;AAAA,wBACJC,mBAAA;AAAA,UAACC,qBAAA;AAAA,UAAA;AAAA,YACE,GAAG,eAAA;AAAA,YACJ,SAAS,yBAA8B,KAAA,CAAA;AAAA,YACvC,aAAA;AAAA,YACA,YAAY,EAAA,CAAA;AAAA,YACZ,MAAA;AAAA,YACA,GAAA,EAAK,UAAU,CAAC,CAAA,CAAA;AAAA,YAChB,QAAA,EAAU,iBAAkB,CAAA,QAAA,CAAS,CAAC,CAAA;AAAA,WAAA;AAAA,SACxC;AAAA,OACF,CAAA;AAAA,KACD,CAAA,CAAA;AACD,IAAO,OAAA,KAAA,CAAA;AAAA,GACT,CAAA;AAEA,EAAA,uBAEIC,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAAD,eAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,kBAAmB,EAAA,GAAA,EAAK,OACrC,EAAA,QAAA,EAAA;AAAA,sBAAAE,cAAA,CAAC,SAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAAA,QAAA,CAAA,EAAa,0BAAiB,EAAA,CAAA;AAAA,sBAC1DJ,mBAAA;AAAA,QAACK,wBAAA;AAAA,QAAA;AAAA,UACE,GAAG,cAAA;AAAA,UACJ,YAAW,EAAA,YAAA;AAAA,UACX,iBAAiB,EAAA,KAAA;AAAA,UACjB,IAAK,EAAA,MAAA;AAAA,UACL,GAAI,EAAA,YAAA;AAAA,UACJ,QAAU,EAAA,CAAA;AAAA,UACV,OAAQ,EAAA,WAAA;AAAA,SAAA;AAAA,OACV;AAAA,MAEC,WACC,mBAAAD,cAAA;AAAA,QAACE,gBAAA;AAAA,QAAA;AAAA,UACE,GAAG,WAAA;AAAA,UACJ,UAAY,EAAA;AAAA,YACV,aAAe,EAAA,OAAA;AAAA,YACf,SAAW,EAAA,EAAA;AAAA,YACX,SAAW,EAAA,cAAA;AAAA,WACb;AAAA,SAAA;AAAA,OAEA,GAAA,IAAA;AAAA,KACN,EAAA,CAAA;AAAA,IACC,eAAe,WACd,oBAAAF,cAAA;AAAA,MAACG,yBAAA;AAAA,MAAA;AAAA,QACC,iBAAA;AAAA,QAEA,QAAU,EAAA,YAAA;AAAA,QACV,MAAA;AAAA,QACA,QAAQ,qBAAuB,EAAA,MAAA;AAAA,QAC/B,~~kBAAA;AAAA,QACA,~~WAAA;AAAA,OAAA;AAAA,~~MALI~~,eAAA;AAAA,~~KAMN~~;AAAA,GAEJ,EAAA,CAAA,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"CustomFilters.js","sources":["../../src/custom-filters/CustomFilters.tsx"],"sourcesContent":["import { Prompt } from \"@vuu-ui/vuu-popups\";\nimport type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport { HTMLAttributes, ReactElement, useRef } from \"react\";\nimport { type FilterBarProps } from \"../filter-bar\";\nimport { FilterEditor } from \"../filter-editor\";\nimport { FilterPill } from \"../filter-pill\";\nimport { FilterModel } from \"../FilterModel\";\nimport { isEditFilterState, useCustomFilters } from \"./useCustomFilters\";\n\nconst classBase = \"vuuCustomFilters\";\n\nexport interface CustomFilterProps\n extends HTMLAttributes<HTMLDivElement>,\n Pick<\n FilterBarProps,\n \| \"defaultFilterState\"\n \| \"filterState\"\n \| \"onApplyFilter\"\n \| \"onFilterDeleted\"\n \| \"onFilterRenamed\"\n \| \"onFilterStateChanged\"\n \| \"tableSchema\"\n > {\n columnDescriptors: ColumnDescriptor[];\n}\n\nexport const CustomFilters = ({\n columnDescriptors,\n defaultFilterState,\n filterState,\n onApplyFilter,\n onFilterDeleted,\n onFilterRenamed,\n onFilterStateChanged,\n tableSchema,\n}: CustomFilterProps) => {\n const rootRef = useRef<HTMLDivElement>(null);\n\n const {\n activeFilterIndex,\n addButtonProps,\n columnsByName,\n filters,\n interactedFilterState,\n onCancelEdit,\n onSave,\n FilterPillProps,\n promptProps,\n } = useCustomFilters({\n containerRef: rootRef,\n columnDescriptors,\n defaultFilterState,\n filterState,\n onApplyFilter,\n onFilterStateChanged,\n onFilterDeleted,\n onFilterRenamed,\n });\n\n const indexOfFilterBeingRenamed =\n interactedFilterState?.state === \"rename\"\n ? interactedFilterState.index\n : -1;\n\n const filterModel = isEditFilterState(interactedFilterState?.state)\n ? new FilterModel(interactedFilterState.filter)\n : undefined;\n\n const getFilterPills = () => {\n const items: ReactElement[] = [];\n filters.forEach((filter, i) => {\n items.push(\n <FilterPill\n {...FilterPillProps}\n editing={indexOfFilterBeingRenamed === i}\n columnsByName={columnsByName}\n data-index={i}\n filter={filter}\n key={`filter-${i}`}\n selected={activeFilterIndex.includes(i)}\n />,\n );\n });\n return items;\n };\n\n return (\n <>\n <div className=\"vuuCustomFilters\" ref={rootRef}>\n <div className={`${classBase}-filters`}>{getFilterPills()}</div>\n <IconButton\n {...addButtonProps}\n aria-label=\"Add filter\"\n data-selectable={false}\n icon=\"plus\"\n key=\"filter-add\"\n tabIndex={0}\n variant=\"secondary\"\n />\n\n {promptProps ? (\n <Prompt\n {...promptProps}\n PopupProps={{\n anchorElement: rootRef,\n offsetTop: 16,\n placement: \"below-center\",\n }}\n />\n ) : null}\n </div>\n {filterModel && tableSchema && (\n <FilterEditor\n columnDescriptors={columnDescriptors}\n key=\"filter-editor\"\n onCancel={onCancelEdit}\n onSave={onSave}\n filter={interactedFilterState?.filter}\n tableSchema={tableSchema}\n />\n )}\n </>\n );\n};\n"],"names":["useRef","useCustomFilters","isEditFilterState","FilterModel","createElement","FilterPill","jsxs","Fragment","jsx","IconButton","Prompt","FilterEditor"],"mappings":"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"}

package/cjs/filter-bar/FilterBar.js CHANGED Viewed

@@ -105,7 +105,6 @@ const FilterBar = ({
             onFilterDeleted,
             onFilterRenamed,
             onFilterStateChanged,
-            suggestionProvider,
             tableSchema
           }
         ) : /* @__PURE__ */ jsxRuntime.jsx(
@@ -114,7 +113,6 @@ const FilterBar = ({
             ...QuickFilterProps2,
             availableColumns: columnDescriptors,
             onApplyFilter,
-            suggestionProvider,
             tableSchema
           }
         )

package/cjs/filter-bar/FilterBar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FilterBar.js","sources":["../../src/filter-bar/FilterBar.tsx"],"sourcesContent":["import {\n DataSourceFilter,\n SuggestionProvider,\n TableSchema,\n} from \"@vuu-ui/vuu-data-types\";\nimport { Filter, FilterState } from \"@vuu-ui/vuu-filter-types\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { Icon } from \"@vuu-ui/vuu-ui-controls\";\nimport { ToggleButton, ToggleButtonGroup } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, useMemo } from \"react\";\nimport { CustomFilters } from \"../custom-filters\";\nimport { QuickFilterProps, QuickFilters } from \"../quick-filters\";\nimport { FilterMode, useFilterBar } from \"./useFilterBar\";\n\nimport filterBarCss from \"./FilterBar.css\";\n\nexport type FilterBarVariant =\n \| \"custom-filters\"\n \| \"quick-filters\"\n \| \"full-filters\";\n\nexport interface FilterBarProps extends HTMLAttributes<HTMLDivElement> {\n QuickFilterProps?: Pick<\n QuickFilterProps,\n \"quickFilterColumns\" \| \"onChangeQuickFilterColumns\"\n >;\n /*\n This is used to apply tailored filters based on column types and other attributes.\n * NOTE: Always make sure that these are passed with proper re-render optimization, otherwise,\n * might end up with infinite state updates.\n /\n columnDescriptors: ColumnDescriptor[];\n defaultFilterMode?: FilterMode;\n defaultFilterState?: FilterState;\n filterMode?: FilterMode;\n filterState?: FilterState;\n onApplyFilter: (filter: DataSourceFilter) => void;\n onChangeFilterMode?: (filterMode: FilterMode) => void;\n onFilterDeleted?: (filter: Filter) => void;\n onFilterRenamed?: (filter: Filter, name: string) => void;\n onFilterStateChanged?: (state: FilterState) => void;\n suggestionProvider?: SuggestionProvider;\n /\n TableSchema is used both to populate list of available columns and to\n * provide table in call to Typeahead service\n */\n tableSchema?: TableSchema;\n variant?: FilterBarVariant;\n}\n\nconst classBase = \"vuuFilterBar\";\n\nexport const FilterBar = ({\n QuickFilterProps,\n className: classNameProp,\n columnDescriptors,\n defaultFilterMode,\n defaultFilterState,\n filterMode: filterModeProp,\n filterState,\n onApplyFilter,\n onChangeFilterMode: onChangeFilterModeProp,\n onFilterDeleted,\n onFilterRenamed,\n onFilterStateChanged,\n suggestionProvider,\n tableSchema,\n variant = \"custom-filters\",\n ...htmlAttributes\n}: FilterBarProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-filter-bar\",\n css: filterBarCss,\n window: targetWindow,\n });\n\n const allowCustomFilters = variant !== \"quick-filters\";\n const allowQuickFilters = variant !== \"custom-filters\";\n\n const controlledFilterMode: FilterMode \| undefined = !allowCustomFilters\n ? \"quick-filter\"\n : !allowQuickFilters\n ? \"custom-filter\"\n : filterModeProp;\n\n const { filterMode, onChangeFilterMode } = useFilterBar({\n defaultFilterMode,\n filterMode: controlledFilterMode,\n onChangeFilterMode: onChangeFilterModeProp,\n });\n\n const className = cx(classBase, classNameProp);\n\n const startAdornment = useMemo(() => {\n if (!allowQuickFilters) {\n return <Icon name=\"filter\" size={16} style={{ top: 4 }} />;\n } else {\n return (\n <ToggleButtonGroup\n data-variant=\"secondary\"\n onChange={onChangeFilterMode}\n value={filterMode}\n >\n <ToggleButton\n className=\"vuuIconToggleButton\"\n key=\"custom-filter\"\n value=\"custom-filter\"\n aria-label=\"Custom filters\"\n tabIndex={-1}\n >\n <Icon name=\"grid\" size={16} />\n </ToggleButton>\n <ToggleButton\n className=\"vuuIconToggleButton\"\n key=\"quick-filter\"\n value=\"quick-filter\"\n aria-label=\"Quick filters\"\n tabIndex={-1}\n >\n <Icon name=\"tune\" size={16} />\n </ToggleButton>\n </ToggleButtonGroup>\n );\n }\n }, [allowQuickFilters, filterMode, onChangeFilterMode]);\n\n return (\n <div\n {...htmlAttributes}\n className={cx(\n className,\n `${classBase}-${variant}`,\n `${classBase}-${filterMode}`,\n )}\n >\n {variant === \"quick-filters\" ? null : (\n <div className={`${classBase}-iconContainer`}>{startAdornment}</div>\n )}\n {filterMode === \"custom-filter\" ? (\n <CustomFilters\n columnDescriptors={columnDescriptors}\n defaultFilterState={defaultFilterState}\n filterState={filterState}\n onApplyFilter={onApplyFilter}\n onFilterDeleted={onFilterDeleted}\n onFilterRenamed={onFilterRenamed}\n onFilterStateChanged={onFilterStateChanged}\n ~~suggestionProvider={suggestionProvider}\n~~ tableSchema={tableSchema}\n />\n ) : (\n <QuickFilters\n {...QuickFilterProps}\n availableColumns={columnDescriptors}\n onApplyFilter={onApplyFilter}\n ~~suggestionProvider={suggestionProvider}\n~~ tableSchema={tableSchema}\n />\n )}\n </div>\n );\n};\n"],"names":["QuickFilterProps","useWindow","useComponentCssInjection","filterBarCss","useFilterBar","useMemo","jsx","Icon","jsxs","ToggleButtonGroup","ToggleButton","CustomFilters","QuickFilters"],"mappings":"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~~kBAAA;AAAA,YACA,~~WAAA;AAAA,WAAA;AAAA,SAGF,mBAAAL,cAAA;AAAA,UAACM,yBAAA;AAAA,UAAA;AAAA,YACE,GAAGZ,iBAAAA;AAAA,YACJ,gBAAkB,EAAA,iBAAA;AAAA,YAClB,aAAA;AAAA,YACA,~~kBAAA;AAAA,YACA,~~WAAA;AAAA,WAAA;AAAA,SACF;AAAA,OAAA;AAAA,KAAA;AAAA,GAEJ,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"FilterBar.js","sources":["../../src/filter-bar/FilterBar.tsx"],"sourcesContent":["import {\n DataSourceFilter,\n SuggestionProvider,\n TableSchema,\n} from \"@vuu-ui/vuu-data-types\";\nimport { Filter, FilterState } from \"@vuu-ui/vuu-filter-types\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { Icon } from \"@vuu-ui/vuu-ui-controls\";\nimport { ToggleButton, ToggleButtonGroup } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, useMemo } from \"react\";\nimport { CustomFilters } from \"../custom-filters\";\nimport { QuickFilterProps, QuickFilters } from \"../quick-filters\";\nimport { FilterMode, useFilterBar } from \"./useFilterBar\";\n\nimport filterBarCss from \"./FilterBar.css\";\n\nexport type FilterBarVariant =\n \| \"custom-filters\"\n \| \"quick-filters\"\n \| \"full-filters\";\n\nexport interface FilterBarProps extends HTMLAttributes<HTMLDivElement> {\n QuickFilterProps?: Pick<\n QuickFilterProps,\n \"quickFilterColumns\" \| \"onChangeQuickFilterColumns\"\n >;\n /*\n This is used to apply tailored filters based on column types and other attributes.\n * NOTE: Always make sure that these are passed with proper re-render optimization, otherwise,\n * might end up with infinite state updates.\n /\n columnDescriptors: ColumnDescriptor[];\n defaultFilterMode?: FilterMode;\n defaultFilterState?: FilterState;\n filterMode?: FilterMode;\n filterState?: FilterState;\n onApplyFilter: (filter: DataSourceFilter) => void;\n onChangeFilterMode?: (filterMode: FilterMode) => void;\n onFilterDeleted?: (filter: Filter) => void;\n onFilterRenamed?: (filter: Filter, name: string) => void;\n onFilterStateChanged?: (state: FilterState) => void;\n suggestionProvider?: SuggestionProvider;\n /\n TableSchema is used both to populate list of available columns and to\n * provide table in call to Typeahead service\n */\n tableSchema?: TableSchema;\n variant?: FilterBarVariant;\n}\n\nconst classBase = \"vuuFilterBar\";\n\nexport const FilterBar = ({\n QuickFilterProps,\n className: classNameProp,\n columnDescriptors,\n defaultFilterMode,\n defaultFilterState,\n filterMode: filterModeProp,\n filterState,\n onApplyFilter,\n onChangeFilterMode: onChangeFilterModeProp,\n onFilterDeleted,\n onFilterRenamed,\n onFilterStateChanged,\n suggestionProvider,\n tableSchema,\n variant = \"custom-filters\",\n ...htmlAttributes\n}: FilterBarProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-filter-bar\",\n css: filterBarCss,\n window: targetWindow,\n });\n\n const allowCustomFilters = variant !== \"quick-filters\";\n const allowQuickFilters = variant !== \"custom-filters\";\n\n const controlledFilterMode: FilterMode \| undefined = !allowCustomFilters\n ? \"quick-filter\"\n : !allowQuickFilters\n ? \"custom-filter\"\n : filterModeProp;\n\n const { filterMode, onChangeFilterMode } = useFilterBar({\n defaultFilterMode,\n filterMode: controlledFilterMode,\n onChangeFilterMode: onChangeFilterModeProp,\n });\n\n const className = cx(classBase, classNameProp);\n\n const startAdornment = useMemo(() => {\n if (!allowQuickFilters) {\n return <Icon name=\"filter\" size={16} style={{ top: 4 }} />;\n } else {\n return (\n <ToggleButtonGroup\n data-variant=\"secondary\"\n onChange={onChangeFilterMode}\n value={filterMode}\n >\n <ToggleButton\n className=\"vuuIconToggleButton\"\n key=\"custom-filter\"\n value=\"custom-filter\"\n aria-label=\"Custom filters\"\n tabIndex={-1}\n >\n <Icon name=\"grid\" size={16} />\n </ToggleButton>\n <ToggleButton\n className=\"vuuIconToggleButton\"\n key=\"quick-filter\"\n value=\"quick-filter\"\n aria-label=\"Quick filters\"\n tabIndex={-1}\n >\n <Icon name=\"tune\" size={16} />\n </ToggleButton>\n </ToggleButtonGroup>\n );\n }\n }, [allowQuickFilters, filterMode, onChangeFilterMode]);\n\n return (\n <div\n {...htmlAttributes}\n className={cx(\n className,\n `${classBase}-${variant}`,\n `${classBase}-${filterMode}`,\n )}\n >\n {variant === \"quick-filters\" ? null : (\n <div className={`${classBase}-iconContainer`}>{startAdornment}</div>\n )}\n {filterMode === \"custom-filter\" ? (\n <CustomFilters\n columnDescriptors={columnDescriptors}\n defaultFilterState={defaultFilterState}\n filterState={filterState}\n onApplyFilter={onApplyFilter}\n onFilterDeleted={onFilterDeleted}\n onFilterRenamed={onFilterRenamed}\n onFilterStateChanged={onFilterStateChanged}\n tableSchema={tableSchema}\n />\n ) : (\n <QuickFilters\n {...QuickFilterProps}\n availableColumns={columnDescriptors}\n onApplyFilter={onApplyFilter}\n tableSchema={tableSchema}\n />\n )}\n </div>\n );\n};\n"],"names":["QuickFilterProps","useWindow","useComponentCssInjection","filterBarCss","useFilterBar","useMemo","jsx","Icon","jsxs","ToggleButtonGroup","ToggleButton","CustomFilters","QuickFilters"],"mappings":";;;;;;;;;;;;;;AAqDA,MAAM,SAAY,GAAA,cAAA,CAAA;AAEX,MAAM,YAAY,CAAC;AAAA,EACxB,gBAAAA,EAAAA,iBAAAA;AAAA,EACA,SAAW,EAAA,aAAA;AAAA,EACX,iBAAA;AAAA,EACA,iBAAA;AAAA,EACA,kBAAA;AAAA,EACA,UAAY,EAAA,cAAA;AAAA,EACZ,WAAA;AAAA,EACA,aAAA;AAAA,EACA,kBAAoB,EAAA,sBAAA;AAAA,EACpB,eAAA;AAAA,EACA,eAAA;AAAA,EACA,oBAAA;AAAA,EACA,kBAAA;AAAA,EACA,WAAA;AAAA,EACA,OAAU,GAAA,gBAAA;AAAA,EACV,GAAG,cAAA;AACL,CAAsB,KAAA;AACpB,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,WAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,qBAAqB,OAAY,KAAA,eAAA,CAAA;AACvC,EAAA,MAAM,oBAAoB,OAAY,KAAA,gBAAA,CAAA;AAEtC,EAAA,MAAM,uBAA+C,CAAC,kBAAA,GAClD,cACA,GAAA,CAAC,oBACC,eACA,GAAA,cAAA,CAAA;AAEN,EAAA,MAAM,EAAE,UAAA,EAAY,kBAAmB,EAAA,GAAIC,yBAAa,CAAA;AAAA,IACtD,iBAAA;AAAA,IACA,UAAY,EAAA,oBAAA;AAAA,IACZ,kBAAoB,EAAA,sBAAA;AAAA,GACrB,CAAA,CAAA;AAED,EAAM,MAAA,SAAA,GAAY,EAAG,CAAA,SAAA,EAAW,aAAa,CAAA,CAAA;AAE7C,EAAM,MAAA,cAAA,GAAiBC,cAAQ,MAAM;AACnC,IAAA,IAAI,CAAC,iBAAmB,EAAA;AACtB,MAAO,uBAAAC,cAAA,CAACC,kBAAK,EAAA,EAAA,IAAA,EAAK,QAAS,EAAA,IAAA,EAAM,IAAI,KAAO,EAAA,EAAE,GAAK,EAAA,CAAA,EAAK,EAAA,CAAA,CAAA;AAAA,KACnD,MAAA;AACL,MACE,uBAAAC,eAAA;AAAA,QAACC,sBAAA;AAAA,QAAA;AAAA,UACC,cAAa,EAAA,WAAA;AAAA,UACb,QAAU,EAAA,kBAAA;AAAA,UACV,KAAO,EAAA,UAAA;AAAA,UAEP,QAAA,EAAA;AAAA,4BAAAH,cAAA;AAAA,cAACI,iBAAA;AAAA,cAAA;AAAA,gBACC,SAAU,EAAA,qBAAA;AAAA,gBAEV,KAAM,EAAA,eAAA;AAAA,gBACN,YAAW,EAAA,gBAAA;AAAA,gBACX,QAAU,EAAA,CAAA,CAAA;AAAA,gBAEV,QAAC,kBAAAJ,cAAA,CAAAC,kBAAA,EAAA,EAAK,IAAK,EAAA,MAAA,EAAO,MAAM,EAAI,EAAA,CAAA;AAAA,eAAA;AAAA,cALxB,eAAA;AAAA,aAMN;AAAA,4BACAD,cAAA;AAAA,cAACI,iBAAA;AAAA,cAAA;AAAA,gBACC,SAAU,EAAA,qBAAA;AAAA,gBAEV,KAAM,EAAA,cAAA;AAAA,gBACN,YAAW,EAAA,eAAA;AAAA,gBACX,QAAU,EAAA,CAAA,CAAA;AAAA,gBAEV,QAAC,kBAAAJ,cAAA,CAAAC,kBAAA,EAAA,EAAK,IAAK,EAAA,MAAA,EAAO,MAAM,EAAI,EAAA,CAAA;AAAA,eAAA;AAAA,cALxB,cAAA;AAAA,aAMN;AAAA,WAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,KAEJ;AAAA,GACC,EAAA,CAAC,iBAAmB,EAAA,UAAA,EAAY,kBAAkB,CAAC,CAAA,CAAA;AAEtD,EACE,uBAAAC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAW,EAAA,EAAA;AAAA,QACT,SAAA;AAAA,QACA,CAAA,EAAG,SAAS,CAAA,CAAA,EAAI,OAAO,CAAA,CAAA;AAAA,QACvB,CAAA,EAAG,SAAS,CAAA,CAAA,EAAI,UAAU,CAAA,CAAA;AAAA,OAC5B;AAAA,MAEC,QAAA,EAAA;AAAA,QAAY,OAAA,KAAA,eAAA,GAAkB,uBAC5BF,cAAA,CAAA,KAAA,EAAA,EAAI,WAAW,CAAG,EAAA,SAAS,kBAAmB,QAAe,EAAA,cAAA,EAAA,CAAA;AAAA,QAE/D,eAAe,eACd,mBAAAA,cAAA;AAAA,UAACK,2BAAA;AAAA,UAAA;AAAA,YACC,iBAAA;AAAA,YACA,kBAAA;AAAA,YACA,WAAA;AAAA,YACA,aAAA;AAAA,YACA,eAAA;AAAA,YACA,eAAA;AAAA,YACA,oBAAA;AAAA,YACA,WAAA;AAAA,WAAA;AAAA,SAGF,mBAAAL,cAAA;AAAA,UAACM,yBAAA;AAAA,UAAA;AAAA,YACE,GAAGZ,iBAAAA;AAAA,YACJ,gBAAkB,EAAA,iBAAA;AAAA,YAClB,aAAA;AAAA,YACA,WAAA;AAAA,WAAA;AAAA,SACF;AAAA,OAAA;AAAA,KAAA;AAAA,GAEJ,CAAA;AAEJ;;;;"}

package/cjs/filter-clause/FilterClause.js CHANGED Viewed

@@ -20,7 +20,6 @@ const FilterClause = ({
   onDropdownOpen,
   onFocusSave,
   filterClauseModel,
-  suggestionProvider,
   tableSchema,
   ...htmlAttributes
 }) => {
@@ -84,7 +83,6 @@ const FilterClause = ({
         operator: filterClauseModel.op,
         ref: valueRef,
         selectedColumn,
-        suggestionProvider,
         table: tableSchema.table,
         value: filterClause?.values ?? filterClause?.value
       },

package/cjs/filter-clause/FilterClause.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FilterClause.js","sources":["../../src/filter-clause/FilterClause.tsx"],"sourcesContent":["import type { ~~SuggestionProvider,~~ TableSchema } from \"@vuu-ui/vuu-data-types\";\nimport {\n ColumnDescriptorsByName,\n MultiValueFilterClause,\n SingleValueFilterClause,\n} from \"@vuu-ui/vuu-filter-types\";\nimport { CloseReason } from \"@vuu-ui/vuu-ui-controls\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, useMemo } from \"react\";\nimport { FilterClauseModel } from \"../FilterModel\";\nimport { useFilterClause } from \"./useFilterClause\";\nimport { FilterClauseValueEditor } from \"./value-editors/FilterClauseValueEditor\";\nimport { ColumnPicker } from \"./ColumnPicker\";\n\nimport filterClauseCss from \"./FilterClause.css\";\nimport { OperatorPicker } from \"./OperatorPicker\";\n\nexport type FilterClauseCancelType = \"Backspace\" \| \"Escape\";\nexport type FilterClauseCancelHandler = (\n filterClause: FilterClauseModel,\n reason: FilterClauseCancelType,\n) => void;\n\nexport interface FilterClauseProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n columnsByName: ColumnDescriptorsByName;\n filterClauseModel: FilterClauseModel;\n onCancel?: FilterClauseCancelHandler;\n onDropdownClose?: (closeReason: CloseReason) => void;\n onDropdownOpen?: () => void;\n onFocusSave?: () => void;\n ~~suggestionProvider?: SuggestionProvider;\n~~ tableSchema: TableSchema;\n}\n\nconst classBase = \"vuuFilterClause\";\n\nexport const FilterClause = ({\n className,\n columnsByName,\n onCancel,\n onDropdownClose,\n onDropdownOpen,\n onFocusSave,\n filterClauseModel,\n ~~suggestionProvider,\n~~ tableSchema,\n ...htmlAttributes\n}: FilterClauseProps) => {\n const {\n inputProps,\n columnRef,\n filterClause,\n onChangeValue,\n onSelectColumn,\n onSelectOperator,\n onDeselectValue,\n operatorRef,\n selectedColumn,\n valueRef,\n } = useFilterClause({\n filterClauseModel,\n onCancel,\n onFocusSave,\n columnsByName,\n });\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-filter-clause\",\n css: filterClauseCss,\n window: targetWindow,\n });\n\n const columns = useMemo(() => Object.values(columnsByName), [columnsByName]);\n\n return (\n <div className={cx(classBase, className)} {...htmlAttributes} tabIndex={0}>\n <ColumnPicker\n inputProps={inputProps}\n className={cx(`${classBase}Field`, `${classBase}Column`)}\n columns={columns}\n key=\"column-field\"\n onSelect={onSelectColumn}\n ref={columnRef}\n value={filterClauseModel.column ?? \"\"}\n />\n {selectedColumn?.name ? (\n <OperatorPicker\n column={selectedColumn}\n inputProps={inputProps}\n className={cx(`${classBase}Field`, `${classBase}Operator`, {\n [`${classBase}Operator-hidden`]: selectedColumn === null,\n })}\n key=\"operator-field\"\n onSelect={onSelectOperator}\n ref={operatorRef}\n value={filterClauseModel.op ?? \"\"}\n />\n ) : null}\n {filterClauseModel.op ? (\n <FilterClauseValueEditor\n inputProps={inputProps}\n key=\"value-field\"\n onChangeValue={onChangeValue}\n onDeselectValue={onDeselectValue}\n operator={filterClauseModel.op}\n ref={valueRef}\n selectedColumn={selectedColumn}\n ~~suggestionProvider={suggestionProvider}\n~~ table={tableSchema.table}\n value={\n (filterClause as MultiValueFilterClause)?.values ??\n (filterClause as SingleValueFilterClause)?.value\n }\n />\n ) : null}\n </div>\n );\n};\n"],"names":["useFilterClause","useWindow","useComponentCssInjection","filterClauseCss","useMemo","jsxs","jsx","ColumnPicker","OperatorPicker","FilterClauseValueEditor"],"mappings":";;;;;;;;;;;;;~~AAqCA~~,MAAM,SAAY,GAAA,iBAAA,CAAA;AAEX,MAAM,eAAe,CAAC;AAAA,EAC3B,SAAA;AAAA,EACA,aAAA;AAAA,EACA,QAAA;AAAA,EACA,eAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAA;AAAA,EACA,iBAAA;AAAA,EACA,~~kBAAA;AAAA,EACA,~~WAAA;AAAA,EACA,GAAG,cAAA;AACL,CAAyB,KAAA;AACvB,EAAM,MAAA;AAAA,IACJ,UAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA;AAAA,IACA,aAAA;AAAA,IACA,cAAA;AAAA,IACA,gBAAA;AAAA,IACA,eAAA;AAAA,IACA,WAAA;AAAA,IACA,cAAA;AAAA,IACA,QAAA;AAAA,MACEA,+BAAgB,CAAA;AAAA,IAClB,iBAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA;AAAA,IACA,aAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAC,cAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,OAAA,GAAUC,cAAQ,MAAM,MAAA,CAAO,OAAO,aAAa,CAAA,EAAG,CAAC,aAAa,CAAC,CAAA,CAAA;AAE3E,EACE,uBAAAC,eAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAI,EAAA,GAAG,cAAgB,EAAA,QAAA,EAAU,CACtE,EAAA,QAAA,EAAA;AAAA,oBAAAC,cAAA;AAAA,MAACC,yBAAA;AAAA,MAAA;AAAA,QACC,UAAA;AAAA,QACA,WAAW,EAAG,CAAA,CAAA,EAAG,SAAS,CAAS,KAAA,CAAA,EAAA,CAAA,EAAG,SAAS,CAAQ,MAAA,CAAA,CAAA;AAAA,QACvD,OAAA;AAAA,QAEA,QAAU,EAAA,cAAA;AAAA,QACV,GAAK,EAAA,SAAA;AAAA,QACL,KAAA,EAAO,kBAAkB,MAAU,IAAA,EAAA;AAAA,OAAA;AAAA,MAH/B,cAAA;AAAA,KAIN;AAAA,IACC,gBAAgB,IACf,mBAAAD,cAAA;AAAA,MAACE,6BAAA;AAAA,MAAA;AAAA,QACC,MAAQ,EAAA,cAAA;AAAA,QACR,UAAA;AAAA,QACA,WAAW,EAAG,CAAA,CAAA,EAAG,SAAS,CAAS,KAAA,CAAA,EAAA,CAAA,EAAG,SAAS,CAAY,QAAA,CAAA,EAAA;AAAA,UACzD,CAAC,CAAA,EAAG,SAAS,CAAA,eAAA,CAAiB,GAAG,cAAmB,KAAA,IAAA;AAAA,SACrD,CAAA;AAAA,QAED,QAAU,EAAA,gBAAA;AAAA,QACV,GAAK,EAAA,WAAA;AAAA,QACL,KAAA,EAAO,kBAAkB,EAAM,IAAA,EAAA;AAAA,OAAA;AAAA,MAH3B,gBAAA;AAAA,KAKJ,GAAA,IAAA;AAAA,IACH,kBAAkB,EACjB,mBAAAF,cAAA;AAAA,MAACG,+CAAA;AAAA,MAAA;AAAA,QACC,UAAA;AAAA,QAEA,aAAA;AAAA,QACA,eAAA;AAAA,QACA,UAAU,iBAAkB,CAAA,EAAA;AAAA,QAC5B,GAAK,EAAA,QAAA;AAAA,QACL,cAAA;AAAA,QACA,~~kBAAA;AAAA,QACA,~~OAAO,WAAY,CAAA,KAAA;AAAA,QACnB,KAAA,EACG,YAAyC,EAAA,MAAA,IACzC,YAA0C,EAAA,KAAA;AAAA,OAAA;AAAA,~~MAVzC~~,aAAA;AAAA,~~KAaJ~~,GAAA,IAAA;AAAA,GACN,EAAA,CAAA,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"FilterClause.js","sources":["../../src/filter-clause/FilterClause.tsx"],"sourcesContent":["import type { TableSchema } from \"@vuu-ui/vuu-data-types\";\nimport {\n ColumnDescriptorsByName,\n MultiValueFilterClause,\n SingleValueFilterClause,\n} from \"@vuu-ui/vuu-filter-types\";\nimport { CloseReason } from \"@vuu-ui/vuu-ui-controls\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, useMemo } from \"react\";\nimport { FilterClauseModel } from \"../FilterModel\";\nimport { useFilterClause } from \"./useFilterClause\";\nimport { FilterClauseValueEditor } from \"./value-editors/FilterClauseValueEditor\";\nimport { ColumnPicker } from \"./ColumnPicker\";\n\nimport filterClauseCss from \"./FilterClause.css\";\nimport { OperatorPicker } from \"./OperatorPicker\";\n\nexport type FilterClauseCancelType = \"Backspace\" \| \"Escape\";\nexport type FilterClauseCancelHandler = (\n filterClause: FilterClauseModel,\n reason: FilterClauseCancelType,\n) => void;\n\nexport interface FilterClauseProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n columnsByName: ColumnDescriptorsByName;\n filterClauseModel: FilterClauseModel;\n onCancel?: FilterClauseCancelHandler;\n onDropdownClose?: (closeReason: CloseReason) => void;\n onDropdownOpen?: () => void;\n onFocusSave?: () => void;\n tableSchema: TableSchema;\n}\n\nconst classBase = \"vuuFilterClause\";\n\nexport const FilterClause = ({\n className,\n columnsByName,\n onCancel,\n onDropdownClose,\n onDropdownOpen,\n onFocusSave,\n filterClauseModel,\n tableSchema,\n ...htmlAttributes\n}: FilterClauseProps) => {\n const {\n inputProps,\n columnRef,\n filterClause,\n onChangeValue,\n onSelectColumn,\n onSelectOperator,\n onDeselectValue,\n operatorRef,\n selectedColumn,\n valueRef,\n } = useFilterClause({\n filterClauseModel,\n onCancel,\n onFocusSave,\n columnsByName,\n });\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-filter-clause\",\n css: filterClauseCss,\n window: targetWindow,\n });\n\n const columns = useMemo(() => Object.values(columnsByName), [columnsByName]);\n\n return (\n <div className={cx(classBase, className)} {...htmlAttributes} tabIndex={0}>\n <ColumnPicker\n inputProps={inputProps}\n className={cx(`${classBase}Field`, `${classBase}Column`)}\n columns={columns}\n key=\"column-field\"\n onSelect={onSelectColumn}\n ref={columnRef}\n value={filterClauseModel.column ?? \"\"}\n />\n {selectedColumn?.name ? (\n <OperatorPicker\n column={selectedColumn}\n inputProps={inputProps}\n className={cx(`${classBase}Field`, `${classBase}Operator`, {\n [`${classBase}Operator-hidden`]: selectedColumn === null,\n })}\n key=\"operator-field\"\n onSelect={onSelectOperator}\n ref={operatorRef}\n value={filterClauseModel.op ?? \"\"}\n />\n ) : null}\n {filterClauseModel.op ? (\n <FilterClauseValueEditor\n inputProps={inputProps}\n key=\"value-field\"\n onChangeValue={onChangeValue}\n onDeselectValue={onDeselectValue}\n operator={filterClauseModel.op}\n ref={valueRef}\n selectedColumn={selectedColumn}\n table={tableSchema.table}\n value={\n (filterClause as MultiValueFilterClause)?.values ??\n (filterClause as SingleValueFilterClause)?.value\n }\n />\n ) : null}\n </div>\n );\n};\n"],"names":["useFilterClause","useWindow","useComponentCssInjection","filterClauseCss","useMemo","jsxs","jsx","ColumnPicker","OperatorPicker","FilterClauseValueEditor"],"mappings":";;;;;;;;;;;;;AAoCA,MAAM,SAAY,GAAA,iBAAA,CAAA;AAEX,MAAM,eAAe,CAAC;AAAA,EAC3B,SAAA;AAAA,EACA,aAAA;AAAA,EACA,QAAA;AAAA,EACA,eAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAA;AAAA,EACA,iBAAA;AAAA,EACA,WAAA;AAAA,EACA,GAAG,cAAA;AACL,CAAyB,KAAA;AACvB,EAAM,MAAA;AAAA,IACJ,UAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA;AAAA,IACA,aAAA;AAAA,IACA,cAAA;AAAA,IACA,gBAAA;AAAA,IACA,eAAA;AAAA,IACA,WAAA;AAAA,IACA,cAAA;AAAA,IACA,QAAA;AAAA,MACEA,+BAAgB,CAAA;AAAA,IAClB,iBAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA;AAAA,IACA,aAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAC,cAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,OAAA,GAAUC,cAAQ,MAAM,MAAA,CAAO,OAAO,aAAa,CAAA,EAAG,CAAC,aAAa,CAAC,CAAA,CAAA;AAE3E,EACE,uBAAAC,eAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAI,EAAA,GAAG,cAAgB,EAAA,QAAA,EAAU,CACtE,EAAA,QAAA,EAAA;AAAA,oBAAAC,cAAA;AAAA,MAACC,yBAAA;AAAA,MAAA;AAAA,QACC,UAAA;AAAA,QACA,WAAW,EAAG,CAAA,CAAA,EAAG,SAAS,CAAS,KAAA,CAAA,EAAA,CAAA,EAAG,SAAS,CAAQ,MAAA,CAAA,CAAA;AAAA,QACvD,OAAA;AAAA,QAEA,QAAU,EAAA,cAAA;AAAA,QACV,GAAK,EAAA,SAAA;AAAA,QACL,KAAA,EAAO,kBAAkB,MAAU,IAAA,EAAA;AAAA,OAAA;AAAA,MAH/B,cAAA;AAAA,KAIN;AAAA,IACC,gBAAgB,IACf,mBAAAD,cAAA;AAAA,MAACE,6BAAA;AAAA,MAAA;AAAA,QACC,MAAQ,EAAA,cAAA;AAAA,QACR,UAAA;AAAA,QACA,WAAW,EAAG,CAAA,CAAA,EAAG,SAAS,CAAS,KAAA,CAAA,EAAA,CAAA,EAAG,SAAS,CAAY,QAAA,CAAA,EAAA;AAAA,UACzD,CAAC,CAAA,EAAG,SAAS,CAAA,eAAA,CAAiB,GAAG,cAAmB,KAAA,IAAA;AAAA,SACrD,CAAA;AAAA,QAED,QAAU,EAAA,gBAAA;AAAA,QACV,GAAK,EAAA,WAAA;AAAA,QACL,KAAA,EAAO,kBAAkB,EAAM,IAAA,EAAA;AAAA,OAAA;AAAA,MAH3B,gBAAA;AAAA,KAKJ,GAAA,IAAA;AAAA,IACH,kBAAkB,EACjB,mBAAAF,cAAA;AAAA,MAACG,+CAAA;AAAA,MAAA;AAAA,QACC,UAAA;AAAA,QAEA,aAAA;AAAA,QACA,eAAA;AAAA,QACA,UAAU,iBAAkB,CAAA,EAAA;AAAA,QAC5B,GAAK,EAAA,QAAA;AAAA,QACL,cAAA;AAAA,QACA,OAAO,WAAY,CAAA,KAAA;AAAA,QACnB,KAAA,EACG,YAAyC,EAAA,MAAA,IACzC,YAA0C,EAAA,KAAA;AAAA,OAAA;AAAA,MATzC,aAAA;AAAA,KAYJ,GAAA,IAAA;AAAA,GACN,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/cjs/filter-clause/value-editors/FilterClauseValueEditor.js CHANGED Viewed

@@ -16,7 +16,6 @@ const FilterClauseValueEditor = react.forwardRef(
     inputProps,
     onChangeValue,
     onDeselectValue,
-    suggestionProvider,
     table,
     value
   }, forwardedRef) {
@@ -48,7 +47,6 @@ const FilterClauseValueEditor = react.forwardRef(
             onChangeValue,
             operator,
             ref: forwardedRef,
-            suggestionProvider,
             table,
             value: value === void 0 ? "" : Array.isArray(value) ? value.map((val) => val.toString()) : value.toString()
           }

package/cjs/filter-clause/value-editors/FilterClauseValueEditor.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FilterClauseValueEditor.js","sources":["../../../src/filter-clause/value-editors/FilterClauseValueEditor.tsx"],"sourcesContent":["import { TableSchemaTable } from \"@vuu-ui/vuu-data-types\";\nimport cx from \"clsx\";\nimport { useFilterClause } from \"../useFilterClause\";\nimport { FilterClauseValueEditorNumber } from \"./FilterClauseValueEditorNumber\";\nimport { FilterClauseValueEditorText } from \"./FilterClauseValueEditorText\";\n\nimport {\n NumericFilterClauseOp,\n SingleValueFilterClauseOp,\n} from \"@vuu-ui/vuu-filter-types\";\nimport { isDateTimeDataValue } from \"@vuu-ui/vuu-utils\";\nimport { ForwardedRef, forwardRef } from \"react\";\nimport { ~~FilterClauseProps } from \"../FilterClause\";\nimport {~~ FilterClauseValueEditorDate } from \"./FilterClauseValueEditorDate\";\n\nconst classBase = \"vuuFilterClause\";\n\ntype FilterClauseValueEditorProps = Pick<\n ReturnType<typeof useFilterClause>,\n \"selectedColumn\" \| \"inputProps\" \| \"onChangeValue\" \| \"onDeselectValue\"\n> ~~&\n Pick<FilterClauseProps, \"suggestionProvider\">~~ & {\n table?: TableSchemaTable;\n } & {\n operator?: SingleValueFilterClauseOp \| \"in\";\n value?: string \| string[] \| number \| number[] \| boolean \| boolean[];\n };\n\nexport const FilterClauseValueEditor = forwardRef(\n function FilterClauseValueEditor(\n {\n selectedColumn,\n operator,\n inputProps,\n onChangeValue,\n onDeselectValue,\n ~~suggestionProvider,\n~~ table,\n value,\n }: FilterClauseValueEditorProps,\n forwardedRef: ForwardedRef<HTMLDivElement>,\n ) {\n if (selectedColumn === undefined \|\| operator === undefined) {\n return null;\n }\n\n if (isDateTimeDataValue(selectedColumn)) {\n return (\n <FilterClauseValueEditorDate\n inputProps={inputProps}\n className={cx(`${classBase}Field`, `${classBase}Value`)}\n // ref={forwardedRef}\n value={value as number}\n operator={operator as NumericFilterClauseOp}\n onChangeValue={onChangeValue}\n />\n );\n }\n\n switch (selectedColumn.serverDataType) {\n case \"string\":\n case \"char\":\n return (\n <FilterClauseValueEditorText\n inputProps={inputProps}\n className={cx(`${classBase}Field`, `${classBase}Value`)}\n column={selectedColumn}\n onDeselect={onDeselectValue}\n onChangeValue={onChangeValue}\n operator={operator}\n ref={forwardedRef}\n ~~suggestionProvider={suggestionProvider}\n~~ table={table}\n value={\n value === undefined\n ? \"\"\n : Array.isArray(value)\n ? value.map((val) => val.toString())\n : (value.toString() as string \| string[])\n }\n />\n );\n case \"int\":\n case \"long\":\n case \"double\":\n return (\n <FilterClauseValueEditorNumber\n inputProps={inputProps}\n className={cx(`${classBase}Field`, `${classBase}Value`)}\n column={selectedColumn}\n data-field=\"value\"\n onChangeValue={onChangeValue}\n operator={operator}\n ref={forwardedRef}\n />\n );\n default:\n console.log(\"returning null\");\n return null;\n }\n },\n);\n"],"names":["forwardRef","FilterClauseValueEditor","isDateTimeDataValue","jsx","FilterClauseValueEditorDate","FilterClauseValueEditorText","FilterClauseValueEditorNumber"],"mappings":";;;;;;;;;;~~AAeA~~,MAAM,SAAY,GAAA,iBAAA,CAAA;~~AAaX~~,MAAM,uBAA0B,GAAAA,gBAAA;AAAA,EACrC,SAASC,wBACP,CAAA;AAAA,IACE,cAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,aAAA;AAAA,IACA,eAAA;AAAA,IACA,~~kBAAA;AAAA,IACA,~~KAAA;AAAA,IACA,KAAA;AAAA,KAEF,YACA,EAAA;AACA,IAAI,IAAA,cAAA,KAAmB,KAAa,CAAA,IAAA,QAAA,KAAa,KAAW,CAAA,EAAA;AAC1D,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAEA,IAAI,IAAAC,4BAAA,CAAoB,cAAc,CAAG,EAAA;AACvC,MACE,uBAAAC,cAAA;AAAA,QAACC,uDAAA;AAAA,QAAA;AAAA,UACC,UAAA;AAAA,UACA,WAAW,EAAG,CAAA,CAAA,EAAG,SAAS,CAAS,KAAA,CAAA,EAAA,CAAA,EAAG,SAAS,CAAO,KAAA,CAAA,CAAA;AAAA,UAEtD,KAAA;AAAA,UACA,QAAA;AAAA,UACA,aAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,KAEJ;AAEA,IAAA,QAAQ,eAAe,cAAgB;AAAA,MACrC,KAAK,QAAA,CAAA;AAAA,MACL,KAAK,MAAA;AACH,QACE,uBAAAD,cAAA;AAAA,UAACE,uDAAA;AAAA,UAAA;AAAA,YACC,UAAA;AAAA,YACA,WAAW,EAAG,CAAA,CAAA,EAAG,SAAS,CAAS,KAAA,CAAA,EAAA,CAAA,EAAG,SAAS,CAAO,KAAA,CAAA,CAAA;AAAA,YACtD,MAAQ,EAAA,cAAA;AAAA,YACR,UAAY,EAAA,eAAA;AAAA,YACZ,aAAA;AAAA,YACA,QAAA;AAAA,YACA,GAAK,EAAA,YAAA;AAAA,YACL,~~kBAAA;AAAA,YACA,~~KAAA;AAAA,YACA,OACE,KAAU,KAAA,KAAA,CAAA,GACN,EACA,GAAA,KAAA,CAAM,QAAQ,KAAK,CAAA,GACjB,KAAM,CAAA,GAAA,CAAI,CAAC,GAAQ,KAAA,GAAA,CAAI,UAAU,CAAA,GAChC,MAAM,QAAS,EAAA;AAAA,WAAA;AAAA,SAE1B,CAAA;AAAA,MAEJ,KAAK,KAAA,CAAA;AAAA,MACL,KAAK,MAAA,CAAA;AAAA,MACL,KAAK,QAAA;AACH,QACE,uBAAAF,cAAA;AAAA,UAACG,2DAAA;AAAA,UAAA;AAAA,YACC,UAAA;AAAA,YACA,WAAW,EAAG,CAAA,CAAA,EAAG,SAAS,CAAS,KAAA,CAAA,EAAA,CAAA,EAAG,SAAS,CAAO,KAAA,CAAA,CAAA;AAAA,YACtD,MAAQ,EAAA,cAAA;AAAA,YACR,YAAW,EAAA,OAAA;AAAA,YACX,aAAA;AAAA,YACA,QAAA;AAAA,YACA,GAAK,EAAA,YAAA;AAAA,WAAA;AAAA,SACP,CAAA;AAAA,MAEJ;AACE,QAAA,OAAA,CAAQ,IAAI,gBAAgB,CAAA,CAAA;AAC5B,QAAO,OAAA,IAAA,CAAA;AAAA,KACX;AAAA,GACF;AACF;;;;"}
1	+ {"version":3,"file":"FilterClauseValueEditor.js","sources":["../../../src/filter-clause/value-editors/FilterClauseValueEditor.tsx"],"sourcesContent":["import { TableSchemaTable } from \"@vuu-ui/vuu-data-types\";\nimport cx from \"clsx\";\nimport { useFilterClause } from \"../useFilterClause\";\nimport { FilterClauseValueEditorNumber } from \"./FilterClauseValueEditorNumber\";\nimport { FilterClauseValueEditorText } from \"./FilterClauseValueEditorText\";\n\nimport {\n NumericFilterClauseOp,\n SingleValueFilterClauseOp,\n} from \"@vuu-ui/vuu-filter-types\";\nimport { isDateTimeDataValue } from \"@vuu-ui/vuu-utils\";\nimport { ForwardedRef, forwardRef } from \"react\";\nimport { FilterClauseValueEditorDate } from \"./FilterClauseValueEditorDate\";\n\nconst classBase = \"vuuFilterClause\";\n\ntype FilterClauseValueEditorProps = Pick<\n ReturnType<typeof useFilterClause>,\n \"selectedColumn\" \| \"inputProps\" \| \"onChangeValue\" \| \"onDeselectValue\"\n> & {\n table?: TableSchemaTable;\n} & {\n operator?: SingleValueFilterClauseOp \| \"in\";\n value?: string \| string[] \| number \| number[] \| boolean \| boolean[];\n};\n\nexport const FilterClauseValueEditor = forwardRef(\n function FilterClauseValueEditor(\n {\n selectedColumn,\n operator,\n inputProps,\n onChangeValue,\n onDeselectValue,\n table,\n value,\n }: FilterClauseValueEditorProps,\n forwardedRef: ForwardedRef<HTMLDivElement>,\n ) {\n if (selectedColumn === undefined \|\| operator === undefined) {\n return null;\n }\n\n if (isDateTimeDataValue(selectedColumn)) {\n return (\n <FilterClauseValueEditorDate\n inputProps={inputProps}\n className={cx(`${classBase}Field`, `${classBase}Value`)}\n // ref={forwardedRef}\n value={value as number}\n operator={operator as NumericFilterClauseOp}\n onChangeValue={onChangeValue}\n />\n );\n }\n\n switch (selectedColumn.serverDataType) {\n case \"string\":\n case \"char\":\n return (\n <FilterClauseValueEditorText\n inputProps={inputProps}\n className={cx(`${classBase}Field`, `${classBase}Value`)}\n column={selectedColumn}\n onDeselect={onDeselectValue}\n onChangeValue={onChangeValue}\n operator={operator}\n ref={forwardedRef}\n table={table}\n value={\n value === undefined\n ? \"\"\n : Array.isArray(value)\n ? value.map((val) => val.toString())\n : (value.toString() as string \| string[])\n }\n />\n );\n case \"int\":\n case \"long\":\n case \"double\":\n return (\n <FilterClauseValueEditorNumber\n inputProps={inputProps}\n className={cx(`${classBase}Field`, `${classBase}Value`)}\n column={selectedColumn}\n data-field=\"value\"\n onChangeValue={onChangeValue}\n operator={operator}\n ref={forwardedRef}\n />\n );\n default:\n console.log(\"returning null\");\n return null;\n }\n },\n);\n"],"names":["forwardRef","FilterClauseValueEditor","isDateTimeDataValue","jsx","FilterClauseValueEditorDate","FilterClauseValueEditorText","FilterClauseValueEditorNumber"],"mappings":";;;;;;;;;;AAcA,MAAM,SAAY,GAAA,iBAAA,CAAA;AAYX,MAAM,uBAA0B,GAAAA,gBAAA;AAAA,EACrC,SAASC,wBACP,CAAA;AAAA,IACE,cAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,aAAA;AAAA,IACA,eAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;AAAA,KAEF,YACA,EAAA;AACA,IAAI,IAAA,cAAA,KAAmB,KAAa,CAAA,IAAA,QAAA,KAAa,KAAW,CAAA,EAAA;AAC1D,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAEA,IAAI,IAAAC,4BAAA,CAAoB,cAAc,CAAG,EAAA;AACvC,MACE,uBAAAC,cAAA;AAAA,QAACC,uDAAA;AAAA,QAAA;AAAA,UACC,UAAA;AAAA,UACA,WAAW,EAAG,CAAA,CAAA,EAAG,SAAS,CAAS,KAAA,CAAA,EAAA,CAAA,EAAG,SAAS,CAAO,KAAA,CAAA,CAAA;AAAA,UAEtD,KAAA;AAAA,UACA,QAAA;AAAA,UACA,aAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,KAEJ;AAEA,IAAA,QAAQ,eAAe,cAAgB;AAAA,MACrC,KAAK,QAAA,CAAA;AAAA,MACL,KAAK,MAAA;AACH,QACE,uBAAAD,cAAA;AAAA,UAACE,uDAAA;AAAA,UAAA;AAAA,YACC,UAAA;AAAA,YACA,WAAW,EAAG,CAAA,CAAA,EAAG,SAAS,CAAS,KAAA,CAAA,EAAA,CAAA,EAAG,SAAS,CAAO,KAAA,CAAA,CAAA;AAAA,YACtD,MAAQ,EAAA,cAAA;AAAA,YACR,UAAY,EAAA,eAAA;AAAA,YACZ,aAAA;AAAA,YACA,QAAA;AAAA,YACA,GAAK,EAAA,YAAA;AAAA,YACL,KAAA;AAAA,YACA,OACE,KAAU,KAAA,KAAA,CAAA,GACN,EACA,GAAA,KAAA,CAAM,QAAQ,KAAK,CAAA,GACjB,KAAM,CAAA,GAAA,CAAI,CAAC,GAAQ,KAAA,GAAA,CAAI,UAAU,CAAA,GAChC,MAAM,QAAS,EAAA;AAAA,WAAA;AAAA,SAE1B,CAAA;AAAA,MAEJ,KAAK,KAAA,CAAA;AAAA,MACL,KAAK,MAAA,CAAA;AAAA,MACL,KAAK,QAAA;AACH,QACE,uBAAAF,cAAA;AAAA,UAACG,2DAAA;AAAA,UAAA;AAAA,YACC,UAAA;AAAA,YACA,WAAW,EAAG,CAAA,CAAA,EAAG,SAAS,CAAS,KAAA,CAAA,EAAA,CAAA,EAAG,SAAS,CAAO,KAAA,CAAA,CAAA;AAAA,YACtD,MAAQ,EAAA,cAAA;AAAA,YACR,YAAW,EAAA,OAAA;AAAA,YACX,aAAA;AAAA,YACA,QAAA;AAAA,YACA,GAAK,EAAA,YAAA;AAAA,WAAA;AAAA,SACP,CAAA;AAAA,MAEJ;AACE,QAAA,OAAA,CAAQ,IAAI,gBAAgB,CAAA,CAAA;AAC5B,QAAO,OAAA,IAAA,CAAA;AAAA,KACX;AAAA,GACF;AACF;;;;"}

package/cjs/filter-clause/value-editors/FilterClauseValueEditorText.js CHANGED Viewed

@@ -8,7 +8,6 @@ var core = require('@salt-ds/core');
 var react = require('react');
 var ExpandoCombobox = require('../ExpandoCombobox.js');
-const NO_DATA_MATCH = ["No matching data"];
 const FilterClauseValueEditorText = react.forwardRef(
   function FilterClauseTextValueEditor({
     inputProps: inputPropsProp,
@@ -16,7 +15,6 @@ const FilterClauseValueEditorText = react.forwardRef(
     column,
     onChangeValue,
     operator,
-    suggestionProvider = vuuDataReact.useTypeaheadSuggestions,
     table,
     value
   }, forwardedRef) {
@@ -27,7 +25,7 @@ const FilterClauseValueEditorText = react.forwardRef(
     const [typeaheadValues, setTypeaheadValues] = react.useState(
       []
     );
-    const getSuggestions = suggestionProvider();
+    const getSuggestions = vuuDataReact.useTypeaheadSuggestions();
     const handleSingleValueSelectionChange = react.useCallback(
       (_, [value2]) => onChangeValue(value2),
       [onChangeValue]
@@ -45,7 +43,7 @@ const FilterClauseValueEditorText = react.forwardRef(
           if (suggestions === false) {
             setTypeaheadValues(false);
           } else if (suggestions.length === 0 && valueInputValue) {
-            setTypeaheadValues(NO_DATA_MATCH);
+            setTypeaheadValues(vuuUtils.NO_DATA_MATCH);
           } else {
             setTypeaheadValues(suggestions);
           }

package/cjs/filter-clause/value-editors/FilterClauseValueEditorText.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FilterClauseValueEditorText.js","sources":["../../../src/filter-clause/value-editors/FilterClauseValueEditorText.tsx"],"sourcesContent":["import { useTypeaheadSuggestions } from \"@vuu-ui/vuu-data-react\";\nimport type { SuggestionFetcher } from \"@vuu-ui/vuu-data-types\";\nimport type { TypeaheadParams } from \"@vuu-ui/vuu-protocol-types\";\nimport { ExpandoInput, MultiSelectionHandler } from \"@vuu-ui/vuu-ui-controls\";\nimport { CommitHandler, getVuuTable } from \"@vuu-ui/vuu-utils\";\nimport { Option } from \"@salt-ds/core\";\nimport {\n FormEvent,\n ForwardedRef,\n forwardRef,\n HTMLAttributes,\n KeyboardEventHandler,\n RefObject,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from \"react\";\nimport { ExpandoCombobox } from \"../ExpandoCombobox\";\nimport { FilterClauseValueEditor } from \"../filterClauseTypes\";\n\nexport interface FilterClauseTextValueEditorProps\n extends FilterClauseValueEditor,\n HTMLAttributes<HTMLDivElement> {\n \"data-field\"?: string;\n ref: RefObject<HTMLDivElement>;\n operator: string;\n suggestionProvider?: () => SuggestionFetcher;\n value: string \| string[];\n}\n\nconst NO_DATA_MATCH = [\"No matching data\"];\n\nexport const FilterClauseValueEditorText = forwardRef(\n function FilterClauseTextValueEditor(\n {\n inputProps: inputPropsProp,\n className,\n column,\n onChangeValue,\n operator,\n suggestionProvider = useTypeaheadSuggestions,\n table,\n value,\n }: FilterClauseTextValueEditorProps,\n forwardedRef: ForwardedRef<HTMLDivElement>,\n ) {\n const isMultiValue = operator === \"in\";\n\n // If we have a multiselect text value which we are editing, this will render\n // a comma delimited list of the selected values. That is not what we display\n // by default when using a multiselect combo. Its not a huge problem - as soon\n // as user focuses this component and we display dropdown, input text is cleared\n // (so user can type to filter list) until dropdown closes again. <ight need to\n // revisit.\n const [valueInputValue, setValueInputValue] = useState(\n value?.toString() ?? \"\",\n );\n const [typeaheadValues, setTypeaheadValues] = useState<string[] \| false>(\n [],\n );\n\n const getSuggestions = suggestionProvider();\n\n const handleSingleValueSelectionChange = useCallback(\n (_, [value]: string[]) => onChangeValue(value),\n [onChangeValue],\n );\n\n const handleMultiValueSelectionChange = useCallback<MultiSelectionHandler>(\n // TODO when will this ever be final ?\n (_, values) => onChangeValue(values, false),\n [onChangeValue],\n );\n\n useEffect(() => {\n if (table) {\n const vuuTable = getVuuTable(table);\n const params: TypeaheadParams =\n valueInputValue && !isMultiValue\n ? [vuuTable, column.name, valueInputValue]\n : [vuuTable, column.name];\n getSuggestions(params)\n .then((suggestions) => {\n if (suggestions === false) {\n setTypeaheadValues(false);\n } else if (suggestions.length === 0 && valueInputValue) {\n setTypeaheadValues(NO_DATA_MATCH);\n } else {\n setTypeaheadValues(suggestions);\n }\n })\n .catch((err) => {\n console.error(\"Error getting suggestions\", err);\n });\n }\n }, [table, column, valueInputValue, getSuggestions, isMultiValue]);\n\n const handleInputChange = useCallback(\n (evt: FormEvent<HTMLInputElement>) => {\n const { value } = evt.target as HTMLInputElement;\n setValueInputValue(value);\n // we want to set the filterclause status to valid, but not trigger focus change\n if (\n operator === \"starts\" \|\|\n operator === \"ends\" \|\|\n operator === \"contains\"\n ) {\n onChangeValue(value, false);\n }\n },\n [onChangeValue, operator],\n );\n\n const handleInputCommit = useCallback<\n CommitHandler<HTMLInputElement, string \| undefined>\n >(\n (evt, value = \"\") => {\n console.log(`commit value ${value}`);\n onChangeValue(value);\n },\n [onChangeValue],\n );\n\n const handleKeyDownFreeTextInput = useCallback<\n KeyboardEventHandler<HTMLInputElement>\n >(\n (evt) => {\n if (\n (evt.key === \"Enter\" \|\| evt.key === \"Tab\") &&\n valueInputValue !== \"\"\n ) {\n evt.stopPropagation();\n evt.preventDefault();\n onChangeValue(valueInputValue);\n } else {\n inputPropsProp?.onKeyDown?.(evt);\n }\n },\n [inputPropsProp, onChangeValue, valueInputValue],\n );\n\n const inputProps = useMemo(() => {\n if (operator === \"starts\" \|\| operator === \"ends\") {\n return {\n ...inputPropsProp,\n onKeyDown: handleKeyDownFreeTextInput,\n };\n } else {\n return inputPropsProp;\n }\n }, [inputPropsProp, handleKeyDownFreeTextInput, operator]);\n\n const getValueInputField = useCallback(() => {\n if (typeaheadValues === false) {\n // No typeahead service available\n return (\n <ExpandoInput\n inputProps={inputProps}\n className={className}\n data-field=\"value\"\n value={valueInputValue}\n ref={forwardedRef}\n onChange={handleInputChange}\n onCommit={handleInputCommit}\n />\n );\n }\n switch (operator) {\n case \"in\":\n return (\n <ExpandoCombobox\n inputProps={inputProps}\n className={className}\n data-field=\"value\"\n onChange={handleInputChange}\n onSelectionChange={handleMultiValueSelectionChange}\n ref={forwardedRef}\n multiselect\n truncate\n value={value}\n >\n {typeaheadValues\n // .filter((typeaheadValue) =>\n // typeaheadValue\n // .toLowerCase()\n // .includes(value.trim().toLowerCase())\n // )\n .map((state) => (\n <Option value={state} key={state} />\n ))}\n </ExpandoCombobox>\n );\n case \"starts\": {\n return (\n <ExpandoCombobox\n inputProps={inputProps}\n className={className}\n data-field=\"value\"\n onChange={handleInputChange}\n onSelectionChange={handleSingleValueSelectionChange}\n ref={forwardedRef}\n value={value}\n >\n {typeaheadValues.map((state) => (\n <Option value={state} key={state} disabled />\n ))}\n </ExpandoCombobox>\n );\n }\n\n case \"ends\":\n return (\n <ExpandoInput\n inputProps={inputProps}\n className={className}\n data-field=\"value\"\n value={valueInputValue}\n ref={forwardedRef}\n onChange={handleInputChange}\n />\n );\n\n default: {\n return typeaheadValues.length > 0 ? (\n <ExpandoCombobox\n inputProps={inputProps}\n className={className}\n data-field=\"value\"\n title=\"value\"\n onChange={handleInputChange}\n onSelectionChange={handleSingleValueSelectionChange}\n ref={forwardedRef}\n value={value}\n >\n {typeaheadValues.map((state) => (\n <Option value={state} key={state} />\n ))}\n </ExpandoCombobox>\n ) : null;\n }\n }\n }, [\n typeaheadValues,\n operator,\n inputProps,\n className,\n valueInputValue,\n forwardedRef,\n handleInputChange,\n handleInputCommit,\n handleMultiValueSelectionChange,\n value,\n handleSingleValueSelectionChange,\n ]);\n\n return getValueInputField();\n },\n);\n"],"names":["forwardRef","useTypeaheadSuggestions","useState","useCallback","value","useEffect","getVuuTable","useMemo","jsx","ExpandoInput","ExpandoCombobox","Option"],"mappings":";;;;;;;;;;AA+BA,MAAM,aAAA,GAAgB,CAAC,kBAAkB,CAAA,CAAA;AAElC,MAAM,2BAA8B,GAAAA,gBAAA;AAAA,EACzC,SAAS,2BACP,CAAA;AAAA,IACE,UAAY,EAAA,cAAA;AAAA,IACZ,SAAA;AAAA,IACA,MAAA;AAAA,IACA,aAAA;AAAA,IACA,QAAA;AAAA,IACA,kBAAqB,GAAAC,oCAAA;AAAA,IACrB,KAAA;AAAA,IACA,KAAA;AAAA,KAEF,YACA,EAAA;AACA,IAAA,MAAM,eAAe,QAAa,KAAA,IAAA,CAAA;AAQlC,IAAM,MAAA,CAAC,eAAiB,EAAA,kBAAkB,CAAI,GAAAC,cAAA;AAAA,MAC5C,KAAA,EAAO,UAAc,IAAA,EAAA;AAAA,KACvB,CAAA;AACA,IAAM,MAAA,CAAC,eAAiB,EAAA,kBAAkB,CAAI,GAAAA,cAAA;AAAA,MAC5C,EAAC;AAAA,KACH,CAAA;AAEA,IAAA,MAAM,iBAAiB,kBAAmB,EAAA,CAAA;AAE1C,IAAA,MAAM,gCAAmC,GAAAC,iBAAA;AAAA,MACvC,CAAC,CAAG,EAAA,CAACC,MAAK,CAAA,KAAgB,cAAcA,MAAK,CAAA;AAAA,MAC7C,CAAC,aAAa,CAAA;AAAA,KAChB,CAAA;AAEA,IAAA,MAAM,+BAAkC,GAAAD,iBAAA;AAAA;AAAA,MAEtC,CAAC,CAAA,EAAG,MAAW,KAAA,aAAA,CAAc,QAAQ,KAAK,CAAA;AAAA,MAC1C,CAAC,aAAa,CAAA;AAAA,KAChB,CAAA;AAEA,IAAAE,eAAA,CAAU,MAAM;AACd,MAAA,IAAI,KAAO,EAAA;AACT,QAAM,MAAA,QAAA,GAAWC,qBAAY,KAAK,CAAA,CAAA;AAClC,QAAA,MAAM,MACJ,GAAA,eAAA,IAAmB,CAAC,YAAA,GAChB,CAAC,QAAA,EAAU,MAAO,CAAA,IAAA,EAAM,eAAe,CAAA,GACvC,CAAC,QAAA,EAAU,OAAO,IAAI,CAAA,CAAA;AAC5B,QAAA,cAAA,CAAe,MAAM,CAAA,CAClB,IAAK,CAAA,CAAC,WAAgB,KAAA;AACrB,UAAA,IAAI,gBAAgB,KAAO,EAAA;AACzB,YAAA,kBAAA,CAAmB,KAAK,CAAA,CAAA;AAAA,WACf,MAAA,IAAA,WAAA,CAAY,MAAW,KAAA,CAAA,IAAK,eAAiB,EAAA;AACtD,YAAA,kBAAA,CAAmB,aAAa,CAAA,CAAA;AAAA,WAC3B,MAAA;AACL,YAAA,kBAAA,CAAmB,WAAW,CAAA,CAAA;AAAA,WAChC;AAAA,SACD,CAAA,CACA,KAAM,CAAA,CAAC,GAAQ,KAAA;AACd,UAAQ,OAAA,CAAA,KAAA,CAAM,6BAA6B,GAAG,CAAA,CAAA;AAAA,SAC/C,CAAA,CAAA;AAAA,OACL;AAAA,OACC,CAAC,KAAA,EAAO,QAAQ,eAAiB,EAAA,cAAA,EAAgB,YAAY,CAAC,CAAA,CAAA;AAEjE,IAAA,MAAM,iBAAoB,GAAAH,iBAAA;AAAA,MACxB,CAAC,GAAqC,KAAA;AACpC,QAAA,MAAM,EAAE,KAAA,EAAAC,MAAM,EAAA,GAAI,GAAI,CAAA,MAAA,CAAA;AACtB,QAAA,kBAAA,CAAmBA,MAAK,CAAA,CAAA;AAExB,QAAA,IACE,QAAa,KAAA,QAAA,IACb,QAAa,KAAA,MAAA,IACb,aAAa,UACb,EAAA;AACA,UAAA,aAAA,CAAcA,QAAO,KAAK,CAAA,CAAA;AAAA,SAC5B;AAAA,OACF;AAAA,MACA,CAAC,eAAe,QAAQ,CAAA;AAAA,KAC1B,CAAA;AAEA,IAAA,MAAM,iBAAoB,GAAAD,iBAAA;AAAA,MAGxB,CAAC,GAAKC,EAAAA,MAAAA,GAAQ,EAAO,KAAA;AACnB,QAAQ,OAAA,CAAA,GAAA,CAAI,CAAgBA,aAAAA,EAAAA,MAAK,CAAE,CAAA,CAAA,CAAA;AACnC,QAAA,aAAA,CAAcA,MAAK,CAAA,CAAA;AAAA,OACrB;AAAA,MACA,CAAC,aAAa,CAAA;AAAA,KAChB,CAAA;AAEA,IAAA,MAAM,0BAA6B,GAAAD,iBAAA;AAAA,MAGjC,CAAC,GAAQ,KAAA;AACP,QAAA,IAAA,CACG,IAAI,GAAQ,KAAA,OAAA,IAAW,IAAI,GAAQ,KAAA,KAAA,KACpC,oBAAoB,EACpB,EAAA;AACA,UAAA,GAAA,CAAI,eAAgB,EAAA,CAAA;AACpB,UAAA,GAAA,CAAI,cAAe,EAAA,CAAA;AACnB,UAAA,aAAA,CAAc,eAAe,CAAA,CAAA;AAAA,SACxB,MAAA;AACL,UAAA,cAAA,EAAgB,YAAY,GAAG,CAAA,CAAA;AAAA,SACjC;AAAA,OACF;AAAA,MACA,CAAC,cAAgB,EAAA,aAAA,EAAe,eAAe,CAAA;AAAA,KACjD,CAAA;AAEA,IAAM,MAAA,UAAA,GAAaI,cAAQ,MAAM;AAC/B,MAAI,IAAA,QAAA,KAAa,QAAY,IAAA,QAAA,KAAa,MAAQ,EAAA;AAChD,QAAO,OAAA;AAAA,UACL,GAAG,cAAA;AAAA,UACH,SAAW,EAAA,0BAAA;AAAA,SACb,CAAA;AAAA,OACK,MAAA;AACL,QAAO,OAAA,cAAA,CAAA;AAAA,OACT;AAAA,KACC,EAAA,CAAC,cAAgB,EAAA,0BAAA,EAA4B,QAAQ,CAAC,CAAA,CAAA;AAEzD,IAAM,MAAA,kBAAA,GAAqBJ,kBAAY,MAAM;AAC3C,MAAA,IAAI,oBAAoB,KAAO,EAAA;AAE7B,QACE,uBAAAK,cAAA;AAAA,UAACC,0BAAA;AAAA,UAAA;AAAA,YACC,UAAA;AAAA,YACA,SAAA;AAAA,YACA,YAAW,EAAA,OAAA;AAAA,YACX,KAAO,EAAA,eAAA;AAAA,YACP,GAAK,EAAA,YAAA;AAAA,YACL,QAAU,EAAA,iBAAA;AAAA,YACV,QAAU,EAAA,iBAAA;AAAA,WAAA;AAAA,SACZ,CAAA;AAAA,OAEJ;AACA,MAAA,QAAQ,QAAU;AAAA,QAChB,KAAK,IAAA;AACH,UACE,uBAAAD,cAAA;AAAA,YAACE,+BAAA;AAAA,YAAA;AAAA,cACC,UAAA;AAAA,cACA,SAAA;AAAA,cACA,YAAW,EAAA,OAAA;AAAA,cACX,QAAU,EAAA,iBAAA;AAAA,cACV,iBAAmB,EAAA,+BAAA;AAAA,cACnB,GAAK,EAAA,YAAA;AAAA,cACL,WAAW,EAAA,IAAA;AAAA,cACX,QAAQ,EAAA,IAAA;AAAA,cACR,KAAA;AAAA,cAEC,QAAA,EAAA,eAAA,CAME,IAAI,CAAC,KAAA,oCACHC,WAAO,EAAA,EAAA,KAAA,EAAO,KAAY,EAAA,EAAA,KAAO,CACnC,CAAA;AAAA,aAAA;AAAA,WACL,CAAA;AAAA,QAEJ,KAAK,QAAU,EAAA;AACb,UACE,uBAAAH,cAAA;AAAA,YAACE,+BAAA;AAAA,YAAA;AAAA,cACC,UAAA;AAAA,cACA,SAAA;AAAA,cACA,YAAW,EAAA,OAAA;AAAA,cACX,QAAU,EAAA,iBAAA;AAAA,cACV,iBAAmB,EAAA,gCAAA;AAAA,cACnB,GAAK,EAAA,YAAA;AAAA,cACL,KAAA;AAAA,cAEC,QAAA,EAAA,eAAA,CAAgB,GAAI,CAAA,CAAC,KACpB,qBAAAF,cAAA,CAACG,WAAO,EAAA,EAAA,KAAA,EAAO,KAAmB,EAAA,QAAA,EAAQ,IAAf,EAAA,EAAA,KAAgB,CAC5C,CAAA;AAAA,aAAA;AAAA,WACH,CAAA;AAAA,SAEJ;AAAA,QAEA,KAAK,MAAA;AACH,UACE,uBAAAH,cAAA;AAAA,YAACC,0BAAA;AAAA,YAAA;AAAA,cACC,UAAA;AAAA,cACA,SAAA;AAAA,cACA,YAAW,EAAA,OAAA;AAAA,cACX,KAAO,EAAA,eAAA;AAAA,cACP,GAAK,EAAA,YAAA;AAAA,cACL,QAAU,EAAA,iBAAA;AAAA,aAAA;AAAA,WACZ,CAAA;AAAA,QAGJ,SAAS;AACP,UAAO,OAAA,eAAA,CAAgB,SAAS,CAC9B,mBAAAD,cAAA;AAAA,YAACE,+BAAA;AAAA,YAAA;AAAA,cACC,UAAA;AAAA,cACA,SAAA;AAAA,cACA,YAAW,EAAA,OAAA;AAAA,cACX,KAAM,EAAA,OAAA;AAAA,cACN,QAAU,EAAA,iBAAA;AAAA,cACV,iBAAmB,EAAA,gCAAA;AAAA,cACnB,GAAK,EAAA,YAAA;AAAA,cACL,KAAA;AAAA,cAEC,QAAA,EAAA,eAAA,CAAgB,IAAI,CAAC,KAAA,oCACnBC,WAAO,EAAA,EAAA,KAAA,EAAO,KAAY,EAAA,EAAA,KAAO,CACnC,CAAA;AAAA,aAAA;AAAA,WAED,GAAA,IAAA,CAAA;AAAA,SACN;AAAA,OACF;AAAA,KACC,EAAA;AAAA,MACD,eAAA;AAAA,MACA,QAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,MACA,eAAA;AAAA,MACA,YAAA;AAAA,MACA,iBAAA;AAAA,MACA,iBAAA;AAAA,MACA,+BAAA;AAAA,MACA,KAAA;AAAA,MACA,gCAAA;AAAA,KACD,CAAA,CAAA;AAED,IAAA,OAAO,kBAAmB,EAAA,CAAA;AAAA,GAC5B;AACF;;;;"}
1	+ {"version":3,"file":"FilterClauseValueEditorText.js","sources":["../../../src/filter-clause/value-editors/FilterClauseValueEditorText.tsx"],"sourcesContent":["import { useTypeaheadSuggestions } from \"@vuu-ui/vuu-data-react\";\nimport type { TypeaheadParams } from \"@vuu-ui/vuu-protocol-types\";\nimport { ExpandoInput, MultiSelectionHandler } from \"@vuu-ui/vuu-ui-controls\";\nimport { CommitHandler, getVuuTable, NO_DATA_MATCH } from \"@vuu-ui/vuu-utils\";\nimport { Option } from \"@salt-ds/core\";\nimport {\n FormEvent,\n ForwardedRef,\n forwardRef,\n HTMLAttributes,\n KeyboardEventHandler,\n RefObject,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from \"react\";\nimport { ExpandoCombobox } from \"../ExpandoCombobox\";\nimport { FilterClauseValueEditor } from \"../filterClauseTypes\";\n\nexport interface FilterClauseTextValueEditorProps\n extends FilterClauseValueEditor,\n HTMLAttributes<HTMLDivElement> {\n \"data-field\"?: string;\n ref: RefObject<HTMLDivElement>;\n operator: string;\n value: string \| string[];\n}\n\nexport const FilterClauseValueEditorText = forwardRef(\n function FilterClauseTextValueEditor(\n {\n inputProps: inputPropsProp,\n className,\n column,\n onChangeValue,\n operator,\n table,\n value,\n }: FilterClauseTextValueEditorProps,\n forwardedRef: ForwardedRef<HTMLDivElement>,\n ) {\n const isMultiValue = operator === \"in\";\n\n // If we have a multiselect text value which we are editing, this will render\n // a comma delimited list of the selected values. That is not what we display\n // by default when using a multiselect combo. Its not a huge problem - as soon\n // as user focuses this component and we display dropdown, input text is cleared\n // (so user can type to filter list) until dropdown closes again. <ight need to\n // revisit.\n const [valueInputValue, setValueInputValue] = useState(\n value?.toString() ?? \"\",\n );\n const [typeaheadValues, setTypeaheadValues] = useState<string[] \| false>(\n [],\n );\n\n const getSuggestions = useTypeaheadSuggestions();\n\n const handleSingleValueSelectionChange = useCallback(\n (_, [value]: string[]) => onChangeValue(value),\n [onChangeValue],\n );\n\n const handleMultiValueSelectionChange = useCallback<MultiSelectionHandler>(\n // TODO when will this ever be final ?\n (_, values) => onChangeValue(values, false),\n [onChangeValue],\n );\n\n useEffect(() => {\n if (table) {\n const vuuTable = getVuuTable(table);\n const params: TypeaheadParams =\n valueInputValue && !isMultiValue\n ? [vuuTable, column.name, valueInputValue]\n : [vuuTable, column.name];\n getSuggestions(params)\n .then((suggestions) => {\n if (suggestions === false) {\n setTypeaheadValues(false);\n } else if (suggestions.length === 0 && valueInputValue) {\n setTypeaheadValues(NO_DATA_MATCH);\n } else {\n setTypeaheadValues(suggestions);\n }\n })\n .catch((err) => {\n console.error(\"Error getting suggestions\", err);\n });\n }\n }, [table, column, valueInputValue, getSuggestions, isMultiValue]);\n\n const handleInputChange = useCallback(\n (evt: FormEvent<HTMLInputElement>) => {\n const { value } = evt.target as HTMLInputElement;\n setValueInputValue(value);\n // we want to set the filterclause status to valid, but not trigger focus change\n if (\n operator === \"starts\" \|\|\n operator === \"ends\" \|\|\n operator === \"contains\"\n ) {\n onChangeValue(value, false);\n }\n },\n [onChangeValue, operator],\n );\n\n const handleInputCommit = useCallback<\n CommitHandler<HTMLInputElement, string \| undefined>\n >(\n (evt, value = \"\") => {\n console.log(`commit value ${value}`);\n onChangeValue(value);\n },\n [onChangeValue],\n );\n\n const handleKeyDownFreeTextInput = useCallback<\n KeyboardEventHandler<HTMLInputElement>\n >(\n (evt) => {\n if (\n (evt.key === \"Enter\" \|\| evt.key === \"Tab\") &&\n valueInputValue !== \"\"\n ) {\n evt.stopPropagation();\n evt.preventDefault();\n onChangeValue(valueInputValue);\n } else {\n inputPropsProp?.onKeyDown?.(evt);\n }\n },\n [inputPropsProp, onChangeValue, valueInputValue],\n );\n\n const inputProps = useMemo(() => {\n if (operator === \"starts\" \|\| operator === \"ends\") {\n return {\n ...inputPropsProp,\n onKeyDown: handleKeyDownFreeTextInput,\n };\n } else {\n return inputPropsProp;\n }\n }, [inputPropsProp, handleKeyDownFreeTextInput, operator]);\n\n const getValueInputField = useCallback(() => {\n if (typeaheadValues === false) {\n // No typeahead service available\n return (\n <ExpandoInput\n inputProps={inputProps}\n className={className}\n data-field=\"value\"\n value={valueInputValue}\n ref={forwardedRef}\n onChange={handleInputChange}\n onCommit={handleInputCommit}\n />\n );\n }\n switch (operator) {\n case \"in\":\n return (\n <ExpandoCombobox\n inputProps={inputProps}\n className={className}\n data-field=\"value\"\n onChange={handleInputChange}\n onSelectionChange={handleMultiValueSelectionChange}\n ref={forwardedRef}\n multiselect\n truncate\n value={value}\n >\n {typeaheadValues\n // .filter((typeaheadValue) =>\n // typeaheadValue\n // .toLowerCase()\n // .includes(value.trim().toLowerCase())\n // )\n .map((state) => (\n <Option value={state} key={state} />\n ))}\n </ExpandoCombobox>\n );\n case \"starts\": {\n return (\n <ExpandoCombobox\n inputProps={inputProps}\n className={className}\n data-field=\"value\"\n onChange={handleInputChange}\n onSelectionChange={handleSingleValueSelectionChange}\n ref={forwardedRef}\n value={value}\n >\n {typeaheadValues.map((state) => (\n <Option value={state} key={state} disabled />\n ))}\n </ExpandoCombobox>\n );\n }\n\n case \"ends\":\n return (\n <ExpandoInput\n inputProps={inputProps}\n className={className}\n data-field=\"value\"\n value={valueInputValue}\n ref={forwardedRef}\n onChange={handleInputChange}\n />\n );\n\n default: {\n return typeaheadValues.length > 0 ? (\n <ExpandoCombobox\n inputProps={inputProps}\n className={className}\n data-field=\"value\"\n title=\"value\"\n onChange={handleInputChange}\n onSelectionChange={handleSingleValueSelectionChange}\n ref={forwardedRef}\n value={value}\n >\n {typeaheadValues.map((state) => (\n <Option value={state} key={state} />\n ))}\n </ExpandoCombobox>\n ) : null;\n }\n }\n }, [\n typeaheadValues,\n operator,\n inputProps,\n className,\n valueInputValue,\n forwardedRef,\n handleInputChange,\n handleInputCommit,\n handleMultiValueSelectionChange,\n value,\n handleSingleValueSelectionChange,\n ]);\n\n return getValueInputField();\n },\n);\n"],"names":["forwardRef","useState","useTypeaheadSuggestions","useCallback","value","useEffect","getVuuTable","NO_DATA_MATCH","useMemo","jsx","ExpandoInput","ExpandoCombobox","Option"],"mappings":"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"}

package/cjs/filter-editor/FilterEditor.js CHANGED Viewed

@@ -19,7 +19,6 @@ const FilterEditor = ({
   filter,
   onCancel,
   onSave,
-  suggestionProvider,
   tableSchema,
   ...htmlAttributes
 }) => {
@@ -72,7 +71,6 @@ const FilterEditor = ({
             filterClauseModel,
             onCancel: onCancelFilterClause,
             onFocusSave: focusSaveButton,
-            suggestionProvider,
             tableSchema
           },
           `editor-${i}`

package/cjs/filter-editor/FilterEditor.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FilterEditor.js","sources":["../../src/filter-editor/FilterEditor.tsx"],"sourcesContent":["import { ~~SuggestionProvider,~~ TableSchema } from \"@vuu-ui/vuu-data-types\";\nimport 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\";\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 ~~suggestionProvider?: SuggestionProvider;\n~~ tableSchema: TableSchema;\n}\n\nexport const FilterEditor = ({\n columnDescriptors,\n filter,\n onCancel,\n onSave,\n ~~suggestionProvider,\n~~ tableSchema,\n ...htmlAttributes\n}: FilterEditorProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-filter-editor\",\n css: filterEditorCss,\n window: targetWindow,\n });\n\n const {\n columnsByName,\n filterModel,\n focusSaveButton,\n setContainer,\n onCancelFilterClause,\n onCancelFilterEdit,\n onChangeFilterCombinator,\n onKeyDownCombinator,\n saveButtonRef,\n saveButtonProps,\n } = useFilterEditor({\n columnDescriptors,\n filter,\n onCancel,\n onSave,\n });\n\n const getContents = () => {\n const { op } = filterModel;\n\n const content: JSX.Element[] = [];\n filterModel.filterClauses.forEach((filterClauseModel, i) => {\n if (i > 0 && op) {\n content.push(\n <FilterClauseCombinator\n key={`filter-operator-${i}`}\n onChange={onChangeFilterCombinator}\n onKeyDown={onKeyDownCombinator}\n operator={op}\n />,\n );\n }\n content.push(\n <FilterClause\n columnsByName={columnsByName}\n data-index={i}\n filterClauseModel={filterClauseModel as FilterClauseModel}\n key={`editor-${i}`}\n onCancel={onCancelFilterClause}\n onFocusSave={focusSaveButton}\n ~~suggestionProvider={suggestionProvider}\n~~ tableSchema={tableSchema}\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,CAAA;~~AAcX~~,MAAM,eAAe,CAAC;AAAA,EAC3B,iBAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,~~kBAAA;AAAA,EACA,~~WAAA;AAAA,EACA,GAAG,cAAA;AACL,CAAyB,KAAA;AACvB,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAC,cAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,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,eAAA;AAAA,MACEC,+BAAgB,CAAA;AAAA,IAClB,iBAAA;AAAA,IACA,MAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAA,MAAM,cAAc,MAAM;AACxB,IAAM,MAAA,EAAE,IAAO,GAAA,WAAA,CAAA;AAEf,IAAA,MAAM,UAAyB,EAAC,CAAA;AAChC,IAAA,WAAA,CAAY,aAAc,CAAA,OAAA,CAAQ,CAAC,iBAAA,EAAmB,CAAM,KAAA;AAC1D,MAAI,IAAA,CAAA,GAAI,KAAK,EAAI,EAAA;AACf,QAAQ,OAAA,CAAA,IAAA;AAAA,0BACNC,cAAA;AAAA,YAACC,6CAAA;AAAA,YAAA;AAAA,cAEC,QAAU,EAAA,wBAAA;AAAA,cACV,SAAW,EAAA,mBAAA;AAAA,cACX,QAAU,EAAA,EAAA;AAAA,aAAA;AAAA,YAHL,mBAAmB,CAAC,CAAA,CAAA;AAAA,WAI3B;AAAA,SACF,CAAA;AAAA,OACF;AACA,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,~~kBAAA;AAAA,YACA,~~WAAA;AAAA,WAAA;AAAA,~~UAJK~~,UAAU,CAAC,CAAA,CAAA;AAAA,~~SAKlB~~;AAAA,OACF,CAAA;AAAA,KACD,CAAA,CAAA;AACD,IAAO,OAAA,OAAA,CAAA;AAAA,GACT,CAAA;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;AAAA,OAAA;AAAA,MACN,MAAA;AAAA,KAED;AAAA,mCACCC,WAAO,EAAA,EAAA,OAAA,EAAS,kBAAoB,EAAA,OAAA,EAAQ,aAAY,QAEzD,EAAA,QAAA,EAAA,CAAA;AAAA,GACF,EAAA,CAAA,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"FilterEditor.js","sources":["../../src/filter-editor/FilterEditor.tsx"],"sourcesContent":["import { TableSchema } from \"@vuu-ui/vuu-data-types\";\nimport 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\";\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 tableSchema: TableSchema;\n}\n\nexport const FilterEditor = ({\n columnDescriptors,\n filter,\n onCancel,\n onSave,\n tableSchema,\n ...htmlAttributes\n}: FilterEditorProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-filter-editor\",\n css: filterEditorCss,\n window: targetWindow,\n });\n\n const {\n columnsByName,\n filterModel,\n focusSaveButton,\n setContainer,\n onCancelFilterClause,\n onCancelFilterEdit,\n onChangeFilterCombinator,\n onKeyDownCombinator,\n saveButtonRef,\n saveButtonProps,\n } = useFilterEditor({\n columnDescriptors,\n filter,\n onCancel,\n onSave,\n });\n\n const getContents = () => {\n const { op } = filterModel;\n\n const content: JSX.Element[] = [];\n filterModel.filterClauses.forEach((filterClauseModel, i) => {\n if (i > 0 && op) {\n content.push(\n <FilterClauseCombinator\n key={`filter-operator-${i}`}\n onChange={onChangeFilterCombinator}\n onKeyDown={onKeyDownCombinator}\n operator={op}\n />,\n );\n }\n content.push(\n <FilterClause\n columnsByName={columnsByName}\n data-index={i}\n filterClauseModel={filterClauseModel as FilterClauseModel}\n key={`editor-${i}`}\n onCancel={onCancelFilterClause}\n onFocusSave={focusSaveButton}\n tableSchema={tableSchema}\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,CAAA;AAaX,MAAM,eAAe,CAAC;AAAA,EAC3B,iBAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,WAAA;AAAA,EACA,GAAG,cAAA;AACL,CAAyB,KAAA;AACvB,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAC,cAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,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,eAAA;AAAA,MACEC,+BAAgB,CAAA;AAAA,IAClB,iBAAA;AAAA,IACA,MAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAA,MAAM,cAAc,MAAM;AACxB,IAAM,MAAA,EAAE,IAAO,GAAA,WAAA,CAAA;AAEf,IAAA,MAAM,UAAyB,EAAC,CAAA;AAChC,IAAA,WAAA,CAAY,aAAc,CAAA,OAAA,CAAQ,CAAC,iBAAA,EAAmB,CAAM,KAAA;AAC1D,MAAI,IAAA,CAAA,GAAI,KAAK,EAAI,EAAA;AACf,QAAQ,OAAA,CAAA,IAAA;AAAA,0BACNC,cAAA;AAAA,YAACC,6CAAA;AAAA,YAAA;AAAA,cAEC,QAAU,EAAA,wBAAA;AAAA,cACV,SAAW,EAAA,mBAAA;AAAA,cACX,QAAU,EAAA,EAAA;AAAA,aAAA;AAAA,YAHL,mBAAmB,CAAC,CAAA,CAAA;AAAA,WAI3B;AAAA,SACF,CAAA;AAAA,OACF;AACA,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,WAAA;AAAA,WAAA;AAAA,UAHK,UAAU,CAAC,CAAA,CAAA;AAAA,SAIlB;AAAA,OACF,CAAA;AAAA,KACD,CAAA,CAAA;AACD,IAAO,OAAA,OAAA,CAAA;AAAA,GACT,CAAA;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;AAAA,OAAA;AAAA,MACN,MAAA;AAAA,KAED;AAAA,mCACCC,WAAO,EAAA,EAAA,OAAA,EAAS,kBAAoB,EAAA,OAAA,EAAQ,aAAY,QAEzD,EAAA,QAAA,EAAA,CAAA;AAAA,GACF,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/cjs/inline-filter/InlineFilter.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var inlineFilteCss = ".vuuInlineFilter {\n  height: 24px;\n\n  .vuuInlineFilter-filter {\n    display: inline-block;\n    padding: 1px;\n\n    .saltInput-primary.vuuInput {\n      border-color: var(--salt-separable-secondary-borderColor);\n      height: 22px;\n      min-height: 22px;\n      input::placeholder {\n        color: var(--tar-color-gray-25);\n      }\n    }\n  }\n\n  .vuuInlineFilter-virtualColSpan {\n    display: inline-block;\n  }\n}\n";
+var inlineFilteCss = ".vuuInlineFilter {\n  --filter-borderColor: var(--salt-separable-secondary-borderColor);\n  --filter-color: var(--salt-content-primary-foreground-disabled);\n  --filter-padding: 1px 1px 1px 0;\n  --filter-content-height: 22px;\n  height: var(--salt-size-base);\n\n  .vuuInlineFilter-filter:has(input:focus) {\n    --filter-borderColor: transparent;\n    --filter-content-height: 20px;\n\n    outline-width: 2px;\n    outline-offset: -2px;\n    outline-style: dotted;\n    outline-color: var(--salt-focused-outlineColor);\n\n    /* the padding ensures the outline is not clipped */\n    --filter-padding: 0 2px;\n    /* prevents shift when we apply the padding */\n    --saltInput-paddingLeft: 2px;\n\n    .saltInput-input {\n      outline: none;\n    }\n    .saltInput-focused {\n      border: none;\n      outline: none;\n    }\n\n    .saltComboBox-focused {\n      outline: none;\n    }\n  }\n\n  .vuuInlineFilter-filter:focus {\n    --filter-borderColor: transparent;\n    --filter-content-height: 20px;\n    /* the padding ensures the outline is not clipped */\n    --filter-padding: 0 2px;\n    /* prevents shift when we apply the padding */\n    --saltInput-paddingLeft: 2px;\n  }\n\n  .vuuInlineFilter-filter {\n    --saltInput-minHeight: var(--filter-content-height);\n    align-items: center;\n    display: inline-flex;\n    height: 100%;\n    padding: var(--filter-padding);\n\n    .vuuTypeaheadInput {\n      border-style: solid;\n      border-color: var(--filter-borderColor);\n      border-width: 1px;\n      border-radius: 0;\n    }\n\n    .vuuTypeaheadInput {\n      height: var(--filter-content-height);\n      input::placeholder {\n        color: var(--filter-color);\n      }\n    }\n\n    .saltInput-primary.vuuInput {\n      border-style: solid;\n      border-color: var(--filter-borderColor);\n      border-width: 1px;\n      border-radius: 0;\n      height: var(--filter-content-height);\n      min-height: var(--filter-content-height);\n      input::placeholder {\n        color: var(--filter-color);\n      }\n    }\n  }\n\n  .vuuInlineFilter-virtualColSpan {\n    display: inline-block;\n  }\n}\n\n.vuuInlineFilter:focus-within {\n  --filter-borderColor: var(--salt-separable-primary-borderColor);\n  --filter-color: var(--salt-content-primary-foreground);\n}\n";
 module.exports = inlineFilteCss;
 //# sourceMappingURL=InlineFilter.css.js.map

package/cjs/inline-filter/InlineFilter.js CHANGED Viewed

@@ -7,15 +7,23 @@ var vuuUtils = require('@vuu-ui/vuu-utils');
 var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
 var react = require('react');
+var cx = require('clsx');
 var InlineFilter$1 = require('./InlineFilter.css.js');
 const classBase = "vuuInlineFilter";
 const InputProps = {
-  placeholder: "Enter value",
+  inputProps: {
+    placeholder: "Filter value"
+  },
   variant: "primary"
 };
+const TypeaheadProps = {
+  highlightFirstSuggestion: false
+};
 const InlineFilter = ({
+  ariaRole,
   onChange,
+  table,
   ...htmlAttributes
 }) => {
   const targetWindow = window.useWindow();
@@ -24,28 +32,52 @@ const InlineFilter = ({
     css: InlineFilter$1,
     window: targetWindow
   });
-  const { columns, virtualColSpan = 0 } = vuuTable.useHeaderProps();
+  const filterAggregator = react.useMemo(() => new vuuUtils.FilterAggregator(), []);
+  const { columns = [], virtualColSpan = 0 } = vuuTable.useHeaderProps();
   const onCommit = react.useCallback(
     (evt, value = "") => {
       const fieldName = vuuUtils.getFieldName(evt.target);
       const column = columns.find((c) => c.name === fieldName);
       if (column) {
-        onChange(column, value.toString());
+        if (value === "") {
+          if (filterAggregator.removeFilter(column)) {
+            onChange(filterAggregator.filter);
+          }
+        } else {
+          filterAggregator.addFilter(column, value);
+          onChange(filterAggregator.filter);
+        }
+      }
+    },
+    [columns, filterAggregator, onChange]
+  );
+  const handleKeyDown = react.useCallback(
+    (evt) => {
+      if (evt.key === "Enter") {
+        const el = evt.target;
+        const inputElement = el.querySelector("input");
+        inputElement?.focus();
       }
     },
-    [columns, onChange]
+    []
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...htmlAttributes, className: classBase, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...htmlAttributes, className: classBase, role: ariaRole, children: [
     /* @__PURE__ */ jsxRuntime.jsx(vuuTable.VirtualColSpan, { width: virtualColSpan }),
-    columns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(
+    columns.map((column, i) => /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: `${classBase}-filter`,
+        "aria-colindex": i + 1,
+        className: cx(`${classBase}-filter`, "vuuTableCell"),
+        "data-field": column.name,
+        onKeyDown: handleKeyDown,
         style: { width: column.width },
         children: vuuDataReact.getDataItemEditControl({
           InputProps,
+          TypeaheadProps,
+          commitWhenCleared: true,
           dataDescriptor: column,
-          onCommit
+          onCommit,
+          table
         })
       },
       column.name

package/cjs/inline-filter/InlineFilter.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InlineFilter.js","sources":["../../src/inline-filter/InlineFilter.tsx"],"sourcesContent":["import { getDataItemEditControl } from \"@vuu-ui/vuu-data-react\";\nimport { VirtualColSpan, useHeaderProps } from \"@vuu-ui/vuu-table\";\nimport { CommitHandler, getFieldName } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, useCallback } from \"react\";\nimport { ~~ColumnDescriptor~~ } from \"@vuu-ui/vuu-~~table~~-types\";\n\nimport ~~inlineFilteCss~~ from \"~~./InlineFilter.css~~\";\nimport { ~~InputProps~~ } from \"@~~salt~~-ds/~~core~~\";\n\nconst classBase = \"vuuInlineFilter\";\n\nexport type FilterValueChangeHandler = (~~\n column~~: ~~ColumnDescriptor,\n value: string,\n~~) => void;\nexport interface InlineFilterProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n onChange: FilterValueChangeHandler;\n}\n\nconst InputProps: Partial<InputProps> = {\n placeholder: \"~~Enter~~ value\",\n variant: \"primary\",\n};\n\nexport const InlineFilter = ({\n onChange,\n ...htmlAttributes\n}: InlineFilterProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-inline-filter\",\n css: inlineFilteCss,\n window: targetWindow,\n });\n\n const { columns, virtualColSpan = 0 } = useHeaderProps();\n\n const onCommit = useCallback<\n CommitHandler<HTMLElement, string \| number \| undefined>\n >(\n (evt, value = \"\") => {\n const fieldName = getFieldName(evt.target);\n const column = columns.find((c) => c.name === fieldName);\n if (column) {\n onChange(column, value.~~toString(~~));\n }\n },\n [columns, onChange],\n );\n\n return (\n <div {...htmlAttributes} className={classBase}>\n <VirtualColSpan width={virtualColSpan} />\n {columns.map((column) => (\n <div\n className={`${classBase}-filter`}\n key={column.name}\n style={{ width: column.width }}\n >\n {getDataItemEditControl({\n InputProps,\n dataDescriptor: column,\n onCommit,\n })}\n </div>\n ))}\n </div>\n );\n};\n"],"names":["useWindow","useComponentCssInjection","inlineFilteCss","useHeaderProps","useCallback","getFieldName","~~jsxs","~~jsx","VirtualColSpan","getDataItemEditControl"],"mappings":"~~;;;;;;;;;;;AAWA~~,MAAM,SAAY,GAAA,iBAAA,CAAA;~~AAWlB~~,MAAM,UAAkC,GAAA;AAAA,EACtC,WAAa,EAAA,~~aAAA~~;AAAA,~~EACb~~,OAAS,EAAA,SAAA;AACX,CAAA,CAAA;AAEO,MAAM,eAAe,CAAC;AAAA,EAC3B,QAAA;AAAA,EACA,GAAG,cAAA;AACL,CAAyB,KAAA;AACvB,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAC,cAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,~~OAAA~~,~~EAAS~~,cAAiB,GAAA,CAAA,KAAMC,uBAAe,EAAA,CAAA;~~AAEvD~~,EAAA,MAAM,QAAW,GAAAC,iBAAA;AAAA,IAGf,CAAC,GAAK,EAAA,KAAA,GAAQ,EAAO,KAAA;AACnB,MAAM,MAAA,SAAA,GAAYC,qBAAa,CAAA,GAAA,CAAI,MAAM,CAAA,CAAA;AACzC,MAAA,MAAM,SAAS,OAAQ,CAAA,IAAA,CAAK,CAAC,CAAM,KAAA,CAAA,CAAE,SAAS,SAAS,CAAA,CAAA;AACvD,MAAA,IAAI,MAAQ,EAAA;AACV,~~QAAS~~,QAAA,CAAA,MAAA,~~EAAQ~~,~~KAAM~~,CAAA,QAAA,~~EAAU~~,CAAA,CAAA;AAAA,~~OACnC~~;AAAA,KACF;AAAA,IACA,CAAC,~~SAAS~~,QAAQ,CAAA;AAAA,~~GACpB~~,CAAA;AAEA,EAAA,~~uBACGC~~,~~eAAA~~,~~CAAA~~,KAAA,EAAA,~~EAAK~~,GAAG,~~cAAA~~,~~EAAgB~~,~~WAAW~~,~~SAClC~~,EAAA,QAAA,EAAA;AAAA,~~oBAACC~~,cAAA,CAAAC,uBAAA,EAAA,EAAe,OAAO,cAAgB,EAAA,CAAA;AAAA,IACtC,~~OAAA~~,~~CAAQ~~,~~GAAI~~,~~CAAA~~,CAAC,~~MACZ~~,qBAAAD,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,~~SAAA~~,~~EAAW~~,~~GAAG~~,SAAS,CAAA,~~OAAA~~,CAAA;AAAA,~~QAEvB~~,KAAO,EAAA,EAAE,KAAO,EAAA,MAAA,CAAO,KAAM,EAAA;AAAA,QAE5B,QAAuB,EAAAE,mCAAA,CAAA;AAAA,UACtB,UAAA;AAAA,UACA,cAAgB,EAAA,MAAA;AAAA,UAChB,QAAA;AAAA,SACD,CAAA;AAAA,OAAA;AAAA,~~MAPI~~,MAAO,CAAA,IAAA;AAAA,~~KASf~~,CAAA;AAAA,GACH,EAAA,CAAA,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"InlineFilter.js","sources":["../../src/inline-filter/InlineFilter.tsx"],"sourcesContent":["import { getDataItemEditControl } from \"@vuu-ui/vuu-data-react\";\nimport { VirtualColSpan, useHeaderProps } from \"@vuu-ui/vuu-table\";\nimport {\n CommitHandler,\n FilterAggregator,\n getFieldName,\n} from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n HTMLAttributes,\n KeyboardEventHandler,\n useCallback,\n useMemo,\n} from \"react\";\nimport cx from \"clsx\";\n\nimport inlineFilteCss from \"./InlineFilter.css\";\nimport { InputProps } from \"@salt-ds/core\";\nimport { TableSchemaTable } from \"@vuu-ui/vuu-data-types\";\nimport { VuuFilter } from \"@vuu-ui/vuu-protocol-types\";\nimport { BaseRowProps } from \"@vuu-ui/vuu-table-types\";\n\nconst classBase = \"vuuInlineFilter\";\n\nexport type FilterValueChangeHandler = (filter: VuuFilter) => void;\nexport interface InlineFilterProps\n extends Partial<BaseRowProps>,\n Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n onChange: FilterValueChangeHandler;\n table: TableSchemaTable;\n}\n\nconst InputProps: Partial<InputProps> = {\n inputProps: {\n placeholder: \"Filter value\",\n },\n variant: \"primary\",\n};\n\nconst TypeaheadProps = {\n highlightFirstSuggestion: false,\n};\n\nexport const InlineFilter = ({\n ariaRole,\n onChange,\n table,\n ...htmlAttributes\n}: InlineFilterProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-inline-filter\",\n css: inlineFilteCss,\n window: targetWindow,\n });\n\n const filterAggregator = useMemo(() => new FilterAggregator(), []);\n const { columns = [], virtualColSpan = 0 } = useHeaderProps();\n\n const onCommit = useCallback<\n CommitHandler<HTMLElement, string \| number \| undefined>\n >(\n (evt, value = \"\") => {\n const fieldName = getFieldName(evt.target);\n const column = columns.find((c) => c.name === fieldName);\n if (column) {\n if (value === \"\") {\n if (filterAggregator.removeFilter(column)) {\n onChange(filterAggregator.filter);\n }\n } else {\n filterAggregator.addFilter(column, value);\n onChange(filterAggregator.filter);\n }\n }\n },\n [columns, filterAggregator, onChange],\n );\n\n const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n (evt) => {\n if (evt.key === \"Enter\") {\n const el = evt.target as HTMLElement;\n const inputElement = el.querySelector(\"input\");\n inputElement?.focus();\n }\n },\n [],\n );\n\n return (\n <div {...htmlAttributes} className={classBase} role={ariaRole}>\n <VirtualColSpan width={virtualColSpan} />\n {columns.map((column, i) => (\n <div\n aria-colindex={i + 1}\n className={cx(`${classBase}-filter`, \"vuuTableCell\")}\n data-field={column.name}\n onKeyDown={handleKeyDown}\n key={column.name}\n style={{ width: column.width }}\n >\n {getDataItemEditControl({\n InputProps,\n TypeaheadProps,\n commitWhenCleared: true,\n dataDescriptor: column,\n onCommit,\n table,\n })}\n </div>\n ))}\n </div>\n );\n};\n"],"names":["useWindow","useComponentCssInjection","inlineFilteCss","useMemo","FilterAggregator","useHeaderProps","useCallback","getFieldName","jsx","VirtualColSpan","getDataItemEditControl"],"mappings":"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"}

package/cjs/quick-filters/QuickFilters.js CHANGED Viewed

@@ -17,7 +17,6 @@ const QuickFilters = ({
   onApplyFilter,
   onChangeQuickFilterColumns,
   quickFilterColumns,
-  suggestionProvider,
   tableSchema
 }) => {
   const targetWindow = window.useWindow();
@@ -70,7 +69,6 @@ const QuickFilters = ({
             vuuDataReact.getDataItemEditControl({
               dataDescriptor: column,
               onCommit,
-              suggestionProvider,
               table: tableSchema?.table
             })
           ] }, column.label ?? column.name)

package/cjs/quick-filters/QuickFilters.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"QuickFilters.js","sources":["../../src/quick-filters/QuickFilters.tsx"],"sourcesContent":["import { getDataItemEditControl } from \"@vuu-ui/vuu-data-react\";\nimport type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { ColumnPicker, Icon, VuuInput } from \"@vuu-ui/vuu-ui-controls\";\nimport { FormField, FormFieldLabel } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport type { HTMLAttributes } from \"react\";\nimport { FilterBarProps } from \"../filter-bar\";\nimport { useQuickFilters } from \"./useQuickFilters\";\n\nimport quickFiltersCss from \"./QuickFilters.css\";\n\nconst classBase = \"vuuQuickFilters\";\n\nexport interface QuickFilterProps\n extends HTMLAttributes<HTMLDivElement>,\n Pick~~<\n~~ FilterBarProps~~,\n~~ \"onApplyFilter\" \| \"~~suggestionProvider\" \| \"~~tableSchema\"\n > {\n allowAddColumn?: boolean;\n allowFind?: boolean;\n availableColumns: ColumnDescriptor[];\n onChangeQuickFilterColumns?: (columns: string[]) => void;\n quickFilterColumns?: string[];\n /*\n Render a general 'search' control.\n * if true, all columns of type 'string' will be included in the search. Otherwise\n * a list of the columns to include in search can be provided.\n */\n showFind?: boolean \| string[];\n}\n\nexport const QuickFilters = ({\n allowAddColumn = true,\n allowFind = true,\n availableColumns,\n onApplyFilter,\n onChangeQuickFilterColumns,\n quickFilterColumns,\n ~~suggestionProvider,\n~~ tableSchema,\n}: QuickFilterProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-quick-filters\",\n css: quickFiltersCss,\n window: targetWindow,\n });\n\n const searchIcon = <Icon name=\"search\" size={18} />;\n\n const {\n availableColumnNames,\n onChange,\n onColumnsSelectionChange,\n onCommit,\n rootRef,\n } = useQuickFilters({\n availableColumns,\n onApplyFilter,\n onChangeQuickFilterColumns,\n quickFilterColumns,\n });\n\n const filterColumns = availableColumns.filter(({ name }) =>\n quickFilterColumns?.includes(name),\n );\n\n const getFilterControls = () => {\n const controls = [];\n if (allowFind) {\n controls.push(\n <FormField data-embedded data-field=\"find\" key=\"find\">\n <FormFieldLabel>Find</FormFieldLabel>\n <VuuInput\n inputProps={{\n onChange,\n }}\n onCommit={onCommit}\n startAdornment={searchIcon}\n variant=\"secondary\"\n />\n </FormField>,\n );\n }\n {\n filterColumns?.forEach((column) =>\n controls.push(\n <FormField key={column.label ?? column.name} data-field={column.name}>\n <FormFieldLabel>{column.label ?? column.name}</FormFieldLabel>\n {getDataItemEditControl({\n dataDescriptor: column,\n onCommit,\n ~~suggestionProvider,\n~~ table: tableSchema?.table,\n })}\n </FormField>,\n ),\n );\n }\n\n return controls;\n };\n\n return (\n <div className={classBase} ref={rootRef}>\n <div className={`${classBase}-filter-container`}>\n {getFilterControls()}\n </div>\n {allowAddColumn ? (\n <ColumnPicker\n columns={availableColumnNames}\n icon=\"more-horiz\"\n iconSize={16}\n onSelectionChange={onColumnsSelectionChange}\n selected={quickFilterColumns}\n />\n ) : null}\n </div>\n );\n};\n"],"names":["useWindow","useComponentCssInjection","quickFiltersCss","jsx","Icon","useQuickFilters","jsxs","FormField","FormFieldLabel","VuuInput","getDataItemEditControl","ColumnPicker"],"mappings":";;;;;;;;;;;AAYA,MAAM,SAAY,GAAA,iBAAA,CAAA;~~AAqBX~~,MAAM,eAAe,CAAC;AAAA,EAC3B,cAAiB,GAAA,IAAA;AAAA,EACjB,SAAY,GAAA,IAAA;AAAA,EACZ,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,0BAAA;AAAA,EACA,kBAAA;AAAA,EACA,~~kBAAA;AAAA,EACA,~~WAAA;AACF,CAAwB,KAAA;AACtB,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAC,cAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,6BAAcC,cAAA,CAAAC,kBAAA,EAAA,EAAK,IAAK,EAAA,QAAA,EAAS,MAAM,EAAI,EAAA,CAAA,CAAA;AAEjD,EAAM,MAAA;AAAA,IACJ,oBAAA;AAAA,IACA,QAAA;AAAA,IACA,wBAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,MACEC,+BAAgB,CAAA;AAAA,IAClB,gBAAA;AAAA,IACA,aAAA;AAAA,IACA,0BAAA;AAAA,IACA,kBAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAA,MAAM,gBAAgB,gBAAiB,CAAA,MAAA;AAAA,IAAO,CAAC,EAAE,IAAA,EAC/C,KAAA,kBAAA,EAAoB,SAAS,IAAI,CAAA;AAAA,GACnC,CAAA;AAEA,EAAA,MAAM,oBAAoB,MAAM;AAC9B,IAAA,MAAM,WAAW,EAAC,CAAA;AAClB,IAAA,IAAI,SAAW,EAAA;AACb,MAAS,QAAA,CAAA,IAAA;AAAA,wBACNC,eAAA,CAAAC,cAAA,EAAA,EAAU,eAAa,EAAA,IAAA,EAAC,cAAW,MAClC,EAAA,QAAA,EAAA;AAAA,0BAAAJ,cAAA,CAACK,uBAAe,QAAI,EAAA,MAAA,EAAA,CAAA;AAAA,0BACpBL,cAAA;AAAA,YAACM,sBAAA;AAAA,YAAA;AAAA,cACC,UAAY,EAAA;AAAA,gBACV,QAAA;AAAA,eACF;AAAA,cACA,QAAA;AAAA,cACA,cAAgB,EAAA,UAAA;AAAA,cAChB,OAAQ,EAAA,WAAA;AAAA,aAAA;AAAA,WACV;AAAA,SAAA,EAAA,EAT6C,MAU/C,CAAA;AAAA,OACF,CAAA;AAAA,KACF;AACA,IAAA;AACE,MAAe,aAAA,EAAA,OAAA;AAAA,QAAQ,CAAC,WACtB,QAAS,CAAA,IAAA;AAAA,0BACNH,eAAA,CAAAC,cAAA,EAAA,EAA4C,YAAY,EAAA,MAAA,CAAO,IAC9D,EAAA,QAAA,EAAA;AAAA,4BAAAJ,cAAA,CAACK,mBAAgB,EAAA,EAAA,QAAA,EAAA,MAAA,CAAO,KAAS,IAAA,MAAA,CAAO,IAAK,EAAA,CAAA;AAAA,YAC5CE,mCAAuB,CAAA;AAAA,cACtB,cAAgB,EAAA,MAAA;AAAA,cAChB,QAAA;AAAA,cACA,~~kBAAA;AAAA,cACA,~~OAAO,WAAa,EAAA,KAAA;AAAA,aACrB,CAAA;AAAA,~~WAPa~~,EAAA,EAAA,MAAA,CAAO,KAAS,IAAA,MAAA,CAAO,~~IAQvC~~,CAAA;AAAA,SACF;AAAA,OACF,CAAA;AAAA,KACF;AAEA,IAAO,OAAA,QAAA,CAAA;AAAA,GACT,CAAA;AAEA,EAAA,uBACGJ,eAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,SAAA,EAAW,KAAK,OAC9B,EAAA,QAAA,EAAA;AAAA,oBAAAH,cAAA,CAAC,SAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAAA,iBAAA,CAAA,EACzB,6BACH,EAAA,CAAA;AAAA,IACC,cACC,mBAAAA,cAAA;AAAA,MAACQ,0BAAA;AAAA,MAAA;AAAA,QACC,OAAS,EAAA,oBAAA;AAAA,QACT,IAAK,EAAA,YAAA;AAAA,QACL,QAAU,EAAA,EAAA;AAAA,QACV,iBAAmB,EAAA,wBAAA;AAAA,QACnB,QAAU,EAAA,kBAAA;AAAA,OAAA;AAAA,KAEV,GAAA,IAAA;AAAA,GACN,EAAA,CAAA,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"QuickFilters.js","sources":["../../src/quick-filters/QuickFilters.tsx"],"sourcesContent":["import { getDataItemEditControl } from \"@vuu-ui/vuu-data-react\";\nimport type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { ColumnPicker, Icon, VuuInput } from \"@vuu-ui/vuu-ui-controls\";\nimport { FormField, FormFieldLabel } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport type { HTMLAttributes } from \"react\";\nimport { FilterBarProps } from \"../filter-bar\";\nimport { useQuickFilters } from \"./useQuickFilters\";\n\nimport quickFiltersCss from \"./QuickFilters.css\";\n\nconst classBase = \"vuuQuickFilters\";\n\nexport interface QuickFilterProps\n extends HTMLAttributes<HTMLDivElement>,\n Pick<FilterBarProps, \"onApplyFilter\" \| \"tableSchema\"> {\n allowAddColumn?: boolean;\n allowFind?: boolean;\n availableColumns: ColumnDescriptor[];\n onChangeQuickFilterColumns?: (columns: string[]) => void;\n quickFilterColumns?: string[];\n /*\n Render a general 'search' control.\n * if true, all columns of type 'string' will be included in the search. Otherwise\n * a list of the columns to include in search can be provided.\n */\n showFind?: boolean \| string[];\n}\n\nexport const QuickFilters = ({\n allowAddColumn = true,\n allowFind = true,\n availableColumns,\n onApplyFilter,\n onChangeQuickFilterColumns,\n quickFilterColumns,\n tableSchema,\n}: QuickFilterProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-quick-filters\",\n css: quickFiltersCss,\n window: targetWindow,\n });\n\n const searchIcon = <Icon name=\"search\" size={18} />;\n\n const {\n availableColumnNames,\n onChange,\n onColumnsSelectionChange,\n onCommit,\n rootRef,\n } = useQuickFilters({\n availableColumns,\n onApplyFilter,\n onChangeQuickFilterColumns,\n quickFilterColumns,\n });\n\n const filterColumns = availableColumns.filter(({ name }) =>\n quickFilterColumns?.includes(name),\n );\n\n const getFilterControls = () => {\n const controls = [];\n if (allowFind) {\n controls.push(\n <FormField data-embedded data-field=\"find\" key=\"find\">\n <FormFieldLabel>Find</FormFieldLabel>\n <VuuInput\n inputProps={{\n onChange,\n }}\n onCommit={onCommit}\n startAdornment={searchIcon}\n variant=\"secondary\"\n />\n </FormField>,\n );\n }\n {\n filterColumns?.forEach((column) =>\n controls.push(\n <FormField key={column.label ?? column.name} data-field={column.name}>\n <FormFieldLabel>{column.label ?? column.name}</FormFieldLabel>\n {getDataItemEditControl({\n dataDescriptor: column,\n onCommit,\n table: tableSchema?.table,\n })}\n </FormField>,\n ),\n );\n }\n\n return controls;\n };\n\n return (\n <div className={classBase} ref={rootRef}>\n <div className={`${classBase}-filter-container`}>\n {getFilterControls()}\n </div>\n {allowAddColumn ? (\n <ColumnPicker\n columns={availableColumnNames}\n icon=\"more-horiz\"\n iconSize={16}\n onSelectionChange={onColumnsSelectionChange}\n selected={quickFilterColumns}\n />\n ) : null}\n </div>\n );\n};\n"],"names":["useWindow","useComponentCssInjection","quickFiltersCss","jsx","Icon","useQuickFilters","jsxs","FormField","FormFieldLabel","VuuInput","getDataItemEditControl","ColumnPicker"],"mappings":"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"}

package/cjs/quick-filters/useQuickFilters.js CHANGED Viewed

@@ -3,6 +3,39 @@
 var vuuUtils = require('@vuu-ui/vuu-utils');
 var react = require('react');
+const findColumn = (columns, name) => {
+  const column = columns?.find((col) => col.name === name);
+  if (column) {
+    return column;
+  } else {
+    throw Error(`column not found ${name}`);
+  }
+};
+const asNumeric = (value, column) => {
+  switch (column.serverDataType) {
+    case "int":
+    case "long": {
+      const numericValue = parseInt(value, 10);
+      if (isNaN(numericValue)) {
+        throw Error(`invalid value ${value} is not integer`);
+      } else {
+        return numericValue;
+      }
+    }
+    case "double": {
+      const numericValue = parseFloat(value);
+      if (isNaN(numericValue)) {
+        throw Error(`invalid value ${value} is not decimal`);
+      } else {
+        return numericValue;
+      }
+    }
+    default:
+      throw Error(
+        `DataType of column ${column.name}, ${column.serverDataType} is not numeric`
+      );
+  }
+};
 const createFilterClause = ([identifier, value], availableColumns) => {
   if (identifier === "find") {
     if (availableColumns) {
@@ -13,21 +46,31 @@ const createFilterClause = ([identifier, value], availableColumns) => {
         return {
           op: "or",
           filters: targetColumns.map(
-            (column) => createFilterClause([column.name, value])
+            (column) => createFilterClause([column.name, value], availableColumns)
           )
         };
       } else {
-        throw Error(`value ${value} is not valid for any of availanle columns`);
+        throw Error(`value ${value} is not valid for any of available columns`);
       }
     } else {
       throw Error("columns must be provided for find operation");
     }
   } else {
-    return {
-      column: identifier,
-      op: "contains",
-      value
-    };
+    const column = findColumn(availableColumns, identifier);
+    if (vuuUtils.isNumericColumn(column)) {
+      const numericValue = asNumeric(value, column);
+      return {
+        column: identifier,
+        op: "=",
+        value: numericValue
+      };
+    } else {
+      return {
+        column: identifier,
+        op: "contains",
+        value
+      };
+    }
   }
 };
 const buildFilterStruct = (quickFilters, availableColumns) => {