@pythia-software/query-table-ui 0.4.0 → 0.4.1

package/dist/index.d.ts

@@ -183,9 +183,10 @@ interface FilterValuePresentation {
     render?: (field: string, value: string) => ReactNode;
 }
 declare const FilterValueProvider: react.Provider<FilterValuePresentation>;
-declare function PresentedFilterValue({ field, value }: {
+declare function PresentedFilterValue({ field, value, label }: {
     field: string;
     value: string;
+    label?: string;
 }): react_jsx_runtime.JSX.Element;
 
 export { type CellContext, CellMenu, type CellMenuProps, type CellRenderer, DataTable, type DataTableProps, FieldPicker, type FieldPickerProps, type FilterValuePresentation, FilterValueProvider, type MenuClassNames, MetricsPanel, type MetricsPanelProps, PresentedFilterValue, QueryBuilder, type QueryBuilderClassNames, type QueryBuilderProps, type RenderRegistry, SavedQueriesModal, type SavedQueriesModalProps, SelectColumnEditor, type SelectColumnEditorProps, SelectionToolbar, type SelectionToolbarProps, type TableClassNames, defaultRenderers, resolveRenderer, safeLinkHref };

package/dist/index.js

@@ -151,9 +151,9 @@ var FilterValueProvider = Context.Provider;
 function useFilterValuePresentation() {
   return useContext(Context);
 }
-function PresentedFilterValue({ field, value }) {
+function PresentedFilterValue({ field, value, label }) {
   const presentation = useContext(Context);
-  return /* @__PURE__ */ jsx(Fragment, { children: presentation.render?.(field, value) ?? presentation.label?.(field, value) ?? value });
+  return /* @__PURE__ */ jsx(Fragment, { children: presentation.render?.(field, value) ?? presentation.label?.(field, value) ?? label ?? value });
 }
 function PresentedValueInput({ field, value, options, onChange }) {
   const presentation = useContext(Context);
@@ -162,7 +162,7 @@ function PresentedValueInput({ field, value, options, onChange }) {
   const visible = choices.filter((option) => `${option.value} ${option.label}`.toLowerCase().includes(search.toLowerCase()));
   return /* @__PURE__ */ jsxs("span", { style: { position: "relative" }, children: [
     /* @__PURE__ */ jsxs("button", { type: "button", "aria-label": `Edit ${field} filter value`, "aria-expanded": open, onClick: () => setOpen(!open), children: [
-      /* @__PURE__ */ jsx(PresentedFilterValue, { field, value }),
+      /* @__PURE__ */ jsx(PresentedFilterValue, { field, value, label: choices.find((option) => option.value === value)?.label ?? value }),
       !value && "Choose value"
     ] }),
     open && /* @__PURE__ */ jsxs("span", { style: { position: "absolute", top: "100%", left: 0, zIndex: 30, background: "var(--qt-bg, #fff)", padding: 8, minWidth: 220, maxHeight: 300, overflowY: "auto" }, onKeyDown: (e) => {
@@ -171,7 +171,7 @@ function PresentedValueInput({ field, value, options, onChange }) {
       /* @__PURE__ */ jsx("input", { autoFocus: true, "aria-label": `Search ${field} values`, value: search, onChange: (e) => setSearch(e.target.value), onKeyDown: (e) => {
         if (e.key === "Enter" && search) {
           e.preventDefault();
-          onChange(search);
+          onChange(visible[0]?.value ?? search);
           setOpen(false);
         }
       } }),
@@ -179,7 +179,7 @@ function PresentedValueInput({ field, value, options, onChange }) {
         onChange(option.value);
         setOpen(false);
       }, children: [
-        /* @__PURE__ */ jsx(PresentedFilterValue, { field, value: option.value }),
+        /* @__PURE__ */ jsx(PresentedFilterValue, { field, value: option.value, label: option.label }),
         option.label !== option.value && /* @__PURE__ */ jsxs("small", { children: [
           " ",
           option.value