@vuu-ui/vuu-filters 0.0.26

package/esm/filter-editor/useFilterEditor.js

@@ -0,0 +1,186 @@
+import { useMemo, useState, useRef, useCallback } from 'react';
+import { focusFirstClauseIfAllClausesValid, focusFilterClauseField, focusLastClauseValue, navigateToNextFilterClause, getFocusedFieldDetails } from '../filter-clause/filterClauseFocusManagement.js';
+import { FilterModel } from '../FilterModel.js';
+
+const useFilterEditor = ({
+  columnDescriptors,
+  filter,
+  onCancel,
+  onSave
+}) => {
+  const filterModel = useMemo(() => {
+    return new FilterModel(filter);
+  }, [filter]);
+  const [_, forceRefresh] = useState({});
+  const [isValid, setIsValid] = useState(filterModel.isValid);
+  const clauseCombinatorRef = useRef(void 0);
+  const saveButtonRef = useRef(null);
+  const containerRef = useRef(null);
+  const setContainer = useCallback((el) => {
+    containerRef.current = el;
+    if (el) {
+      focusFirstClauseIfAllClausesValid(el);
+    }
+  }, []);
+  const saveButtonMenuBuilder = useCallback((_2, options) => {
+    switch (clauseCombinatorRef.current) {
+      case "and":
+        return [{ action: "and-clause", label: "AND", options }];
+      case "or":
+        return [{ action: "or-clause", label: "OR", options }];
+      default:
+        return [
+          { action: "and-clause", label: "AND", options },
+          { action: "or-clause", label: "OR", options }
+        ];
+    }
+  }, []);
+  const columnsByName = useMemo(
+    () => columnDescriptorsByName(columnDescriptors),
+    [columnDescriptors]
+  );
+  const isLastFilterClause = useCallback(
+    (index) => index !== void 0 && filterModel.filterClauses.length === index + 1,
+    [filterModel]
+  );
+  useMemo(() => {
+    const setValid = (isValid2) => {
+      setIsValid(isValid2);
+    };
+    const valueChanged = (_filter, isValid2) => {
+      if (isValid2) {
+        const [filterClauseIndex, fieldName] = getFocusedFieldDetails();
+        if (fieldName === "value" && isLastFilterClause(filterClauseIndex)) {
+          requestAnimationFrame(() => {
+            saveButtonRef.current?.focus();
+          });
+        }
+      }
+    };
+    filterModel.on("isValid", setValid);
+    filterModel.on("filter", valueChanged);
+  }, [filterModel, isLastFilterClause]);
+  const handleCancelFilterClause = useCallback(
+    (filterClause, reason) => {
+      if (reason === "Backspace") {
+        const indexOfFilterClause = filterModel.filterClauses.indexOf(filterClause);
+        filterModel.removeFilterClause(filterClause);
+        forceRefresh({});
+        if (reason === "Backspace" && containerRef.current) {
+          if (indexOfFilterClause > 0) {
+            focusFilterClauseField(
+              containerRef.current,
+              indexOfFilterClause - 1
+            );
+          }
+        }
+      } else {
+        console.log(
+          `cancel because of Escape valid clause ${filterClause.isValid}`
+        );
+        onCancel(filter);
+      }
+    },
+    [filter, filterModel, onCancel]
+  );
+  const invokeMenuAction = useCallback(
+    ({ menuId }) => {
+      switch (menuId) {
+        case "save": {
+          const savedFilter = filterModel.asFilter();
+          const newOrUpdatedFilter = filter?.name ? {
+            ...savedFilter,
+            name: filter.name
+          } : savedFilter;
+          onSave(newOrUpdatedFilter);
+          return true;
+        }
+        case "and-clause": {
+          clauseCombinatorRef.current = "and";
+          filterModel.addNewFilterClause("and");
+          return true;
+        }
+        case "or-clause":
+          clauseCombinatorRef.current = "or";
+          filterModel.addNewFilterClause("or");
+          return true;
+        default:
+          return false;
+      }
+    },
+    [filter?.name, filterModel, onSave]
+  );
+  const handleKeyDownSaveButton = useCallback(
+    (evt) => {
+      if (evt.key === "Tab" && evt.shiftKey) {
+        evt.preventDefault();
+        const target = evt.target;
+        const filterEditor = target.closest(".vuuFilterEditor");
+        focusLastClauseValue(filterEditor);
+      } else if (evt.key === "Escape") {
+        onCancel(filter);
+      }
+    },
+    [filter, onCancel]
+  );
+  const handleKeyDownNavigationFromCombinator = useCallback((evt) => {
+    const { target, key, shiftKey } = evt;
+    if (key === "ArrowLeft") {
+      evt.preventDefault();
+      navigateToNextFilterClause(target, "bwd");
+    } else if (key === "ArrowRight") {
+      evt.preventDefault();
+      navigateToNextFilterClause(target, "fwd");
+    } else if (key === "Tab" && shiftKey) {
+      evt.preventDefault();
+      navigateToNextFilterClause(target, "bwd");
+    }
+  }, []);
+  const handleClickSaveButton = useMemo(
+    () => () => invokeMenuAction({
+      menuId: "save",
+      options: {},
+      type: "menu-action"
+    }),
+    [invokeMenuAction]
+  );
+  const saveButtonProps = {
+    PopupMenuProps: {
+      icon: "more-vert",
+      menuBuilder: saveButtonMenuBuilder,
+      menuActionHandler: invokeMenuAction,
+      menuLocation: "filter-save-menu"
+    },
+    onClick: handleClickSaveButton,
+    onKeyDown: handleKeyDownSaveButton
+  };
+  const onChangeFilterCombinator = useCallback(
+    (op) => {
+      filterModel.setOp(op);
+      clauseCombinatorRef.current = op;
+      forceRefresh({});
+    },
+    [filterModel]
+  );
+  const handleCancelFilterEdit = useCallback(() => {
+    onCancel(filter);
+  }, [filter, onCancel]);
+  return {
+    columnsByName,
+    filterModel,
+    isValid,
+    onCancelFilterClause: handleCancelFilterClause,
+    onCancelFilterEdit: handleCancelFilterEdit,
+    onChangeFilterCombinator,
+    onKeyDownCombinator: handleKeyDownNavigationFromCombinator,
+    saveButtonProps,
+    saveButtonRef,
+    setContainer
+  };
+};
+function columnDescriptorsByName(columns) {
+  return columns.reduce((m, col) => ({ ...m, [col.name]: col }), {});
+}
+
+export { useFilterEditor };
+//# sourceMappingURL=useFilterEditor.js.map

package/esm/filter-editor/useFilterEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFilterEditor.js","sources":["../../src/filter-editor/useFilterEditor.ts"],"sourcesContent":["import type { MenuActionHandler, MenuBuilder } from \"@vuu-ui/vuu-data-types\";\nimport type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport type {\n  ColumnDescriptorsByName,\n  FilterCombinatorOp,\n} from \"@vuu-ui/vuu-filter-types\";\nimport {\n  KeyboardEventHandler,\n  RefCallback,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  focusFilterClauseField,\n  focusFirstClauseIfAllClausesValid,\n  focusLastClauseValue,\n  getFocusedFieldDetails,\n  navigateToNextFilterClause,\n} from \"../filter-clause/filterClauseFocusManagement\";\nimport { FilterEditorProps } from \"./FilterEditor\";\nimport {\n  FilterChangeHandler,\n  FilterModel,\n  FilterStatusChangeHandler,\n} from \"../FilterModel\";\nimport { FilterClauseCancelHandler } from \"../filter-clause\";\nimport { FilterClauseCombinatorChangeHandler } from \"./FilterClauseCombinator\";\n\nexport interface FilterEditorHookProps\n  extends Pick<\n    FilterEditorProps,\n    \"columnDescriptors\" | \"filter\" | \"onCancel\" | \"onSave\"\n  > {\n  label?: string;\n}\n\nexport const useFilterEditor = ({\n  columnDescriptors,\n  filter,\n  onCancel,\n  onSave,\n}: FilterEditorHookProps) => {\n  const filterModel = useMemo(() => {\n    return new FilterModel(filter);\n  }, [filter]);\n\n  const [_, forceRefresh] = useState({});\n  const [isValid, setIsValid] = useState(filterModel.isValid);\n  const clauseCombinatorRef = useRef<FilterCombinatorOp | undefined>(undefined);\n  const saveButtonRef = useRef<HTMLDivElement>(null);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const setContainer = useCallback<RefCallback<HTMLDivElement>>((el) => {\n    containerRef.current = el;\n    if (el) {\n      // If there is a new empty clause it will focus itself, otw ...\n      focusFirstClauseIfAllClausesValid(el);\n    }\n  }, []);\n\n  const saveButtonMenuBuilder: MenuBuilder = useCallback((_, options) => {\n    switch (clauseCombinatorRef.current) {\n      case \"and\":\n        return [{ action: \"and-clause\", label: \"AND\", options }];\n      case \"or\":\n        return [{ action: \"or-clause\", label: \"OR\", options }];\n      default:\n        return [\n          { action: \"and-clause\", label: \"AND\", options },\n          { action: \"or-clause\", label: \"OR\", options },\n        ];\n    }\n  }, []);\n\n  const columnsByName = useMemo(\n    () => columnDescriptorsByName(columnDescriptors),\n    [columnDescriptors]\n  );\n\n  const isLastFilterClause = useCallback(\n    (index?: number) =>\n      index !== undefined && filterModel.filterClauses.length === index + 1,\n    [filterModel]\n  );\n\n  useMemo(() => {\n    const setValid: FilterStatusChangeHandler = (isValid) => {\n      // bind the model state change to React state to ensure render\n      setIsValid(isValid);\n    };\n\n    const valueChanged: FilterChangeHandler = (_filter, isValid) => {\n      if (isValid) {\n        const [filterClauseIndex, fieldName] = getFocusedFieldDetails();\n        if (fieldName === \"value\" && isLastFilterClause(filterClauseIndex)) {\n          requestAnimationFrame(() => {\n            saveButtonRef.current?.focus();\n          });\n        }\n      }\n    };\n    filterModel.on(\"isValid\", setValid);\n    filterModel.on(\"filter\", valueChanged);\n  }, [filterModel, isLastFilterClause]);\n\n  const handleCancelFilterClause = useCallback<FilterClauseCancelHandler>(\n    (filterClause, reason) => {\n      if (reason === \"Backspace\") {\n        const indexOfFilterClause =\n          filterModel.filterClauses.indexOf(filterClause);\n        filterModel.removeFilterClause(filterClause);\n        forceRefresh({});\n        if (reason === \"Backspace\" && containerRef.current) {\n          if (indexOfFilterClause > 0) {\n            focusFilterClauseField(\n              containerRef.current,\n              indexOfFilterClause - 1\n            );\n          }\n        }\n      } else {\n        console.log(\n          `cancel because of Escape valid clause ${filterClause.isValid}`\n        );\n        onCancel(filter);\n      }\n    },\n    [filter, filterModel, onCancel]\n  );\n\n  const invokeMenuAction = useCallback<MenuActionHandler>(\n    ({ menuId }) => {\n      switch (menuId) {\n        case \"save\": {\n          const savedFilter = filterModel.asFilter();\n          const newOrUpdatedFilter = filter?.name\n            ? {\n                ...savedFilter,\n                name: filter.name,\n              }\n            : savedFilter;\n          onSave(newOrUpdatedFilter);\n          return true;\n        }\n        case \"and-clause\": {\n          clauseCombinatorRef.current = \"and\";\n          filterModel.addNewFilterClause(\"and\");\n          return true;\n        }\n        case \"or-clause\":\n          clauseCombinatorRef.current = \"or\";\n          filterModel.addNewFilterClause(\"or\");\n          return true;\n        default:\n          return false;\n      }\n    },\n    [filter?.name, filterModel, onSave]\n  );\n\n  const handleKeyDownSaveButton = useCallback<KeyboardEventHandler>(\n    (evt) => {\n      if (evt.key === \"Tab\" && evt.shiftKey) {\n        evt.preventDefault();\n        const target = evt.target as HTMLElement;\n        const filterEditor = target.closest(\".vuuFilterEditor\") as HTMLElement;\n        focusLastClauseValue(filterEditor);\n      } else if (evt.key === \"Escape\") {\n        onCancel(filter);\n      }\n    },\n    [filter, onCancel]\n  );\n\n  const handleKeyDownNavigationFromCombinator = useCallback<\n    KeyboardEventHandler<HTMLElement>\n  >((evt) => {\n    const { target, key, shiftKey } = evt;\n    if (key === \"ArrowLeft\") {\n      evt.preventDefault();\n      navigateToNextFilterClause(target as HTMLElement, \"bwd\");\n    } else if (key === \"ArrowRight\") {\n      evt.preventDefault();\n      navigateToNextFilterClause(target as HTMLElement, \"fwd\");\n    } else if (key === \"Tab\" && shiftKey) {\n      evt.preventDefault();\n      navigateToNextFilterClause(target as HTMLElement, \"bwd\");\n    }\n  }, []);\n\n  const handleClickSaveButton = useMemo(\n    () => () =>\n      invokeMenuAction({\n        menuId: \"save\",\n        options: {},\n        type: \"menu-action\",\n      }),\n    [invokeMenuAction]\n  );\n\n  const saveButtonProps = {\n    PopupMenuProps: {\n      icon: \"more-vert\",\n      menuBuilder: saveButtonMenuBuilder,\n      menuActionHandler: invokeMenuAction,\n      menuLocation: \"filter-save-menu\",\n    },\n    onClick: handleClickSaveButton,\n    onKeyDown: handleKeyDownSaveButton,\n  };\n\n  const onChangeFilterCombinator =\n    useCallback<FilterClauseCombinatorChangeHandler>(\n      (op) => {\n        filterModel.setOp(op);\n        clauseCombinatorRef.current = op;\n        forceRefresh({});\n      },\n      [filterModel]\n    );\n\n  const handleCancelFilterEdit = useCallback(() => {\n    onCancel(filter);\n  }, [filter, onCancel]);\n\n  return {\n    columnsByName,\n    filterModel,\n    isValid,\n    onCancelFilterClause: handleCancelFilterClause,\n    onCancelFilterEdit: handleCancelFilterEdit,\n    onChangeFilterCombinator,\n    onKeyDownCombinator: handleKeyDownNavigationFromCombinator,\n    saveButtonProps,\n    saveButtonRef,\n    setContainer,\n  };\n};\n\n// Duplicated in useFilterBar\nfunction columnDescriptorsByName(\n  columns: ColumnDescriptor[]\n): ColumnDescriptorsByName {\n  return columns.reduce((m, col) => ({ ...m, [col.name]: col }), {});\n}\n"],"names":["_","isValid"],"mappings":"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"}

package/esm/filter-input/FilterInput.css.js

@@ -0,0 +1,4 @@
+var filterInputCss = "\n.salt-theme {\n    --vuuFilterEditor-lineHeight: 28px;\n}\n\n.salt-density-high {\n    --vuuFilterEditor-buttonWidth: 20px;\n    --vuuFilterEditor-height: 22px;\n    --vuuFilterEditor-lineHeight: 20px;\n}\n\n.vuuFilterInput {\n    --vuuFilterEditor-background: var(--salt-container-primary-background);\n    --vuuFilterEditor-color: var(--salt-content-primary-foreground);\n    --vuuFilterEditor-fontFamily: var(--salt-typography-fontFamily);\n    --vuuFilterEditor-fontSize: var(--salt-text-fontSize);\n    --vuuFilterEditor-cursorColor: var(--salt-content-secondary-foreground);\n    --vuuFilterEditor-selectionBackground: var(--salt-text-background-selected);\n    --vuuFilterEditor-tooltipBackground: var(--salt-container-primary-background);\n    --vuuFilterEditor-tooltipBorder: var(--tooltip-status-borderColor) var(--salt-container-borderWidth) var(--salt-container-borderStyle); \n    --vuuFilterEditor-tooltipElevation: var(--salt-overlayable-shadow-popout);\n    --vuuFilterEditor-suggestion-selectedBackground: var(--salt-selectable-background-selected);\n    --vuuFilterEditor-suggestion-selectedColor: var(--vuuFilterEditor-color);\n    --vuuFilterEditor-suggestion-height: 24px;\n    --vuuFilterEditor-variableColor: var(--vuu-color_purple-10);\n\n    align-items: center;\n    border-color: var(--salt-container-secondary-borderColor);\n    border-style: solid none;\n    border-width: 1px;\n    box-sizing: border-box;\n    display: flex;\n    height: var(--vuuFilterEditor-height, 30px);\n}\n\n.vuuFilterInput-Editor {\n    flex: 1 1 auto;\n    height: 100%;\n}\n\n.vuuFilterInput-FilterButton,\n.vuuFilterInput-ClearButton {\n    --vuu-icon-size: 12px;\n    --saltButton-width: var(--vuuFilterEditor-buttonWidth, 28px);\n}\n\n.vuuIllustration {\n    --vuuFilterEditor-suggestion-selectedBackground:var(--salt-container-secondary-background);\n    background: var(--salt-container-secondary-background);\n    color: var(--salt-text-secondary-foreground);\n}\n\n\n";
+
+export { filterInputCss as default };
+//# sourceMappingURL=FilterInput.css.js.map

package/esm/filter-input/FilterInput.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterInput.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/esm/filter-input/FilterInput.js

@@ -0,0 +1,50 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Button } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { useCodeMirrorEditor } from './useCodeMirrorEditor.js';
+import filterInputCss from './FilterInput.css.js';
+
+const classBase = "vuuFilterInput";
+const FilterInput = ({
+  existingFilter,
+  iconName = "filter",
+  namedFilters,
+  onSubmitFilter,
+  suggestionProvider,
+  ...props
+}) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-filter-input",
+    css: filterInputCss,
+    window: targetWindow
+  });
+  const { editorRef, clearInput } = useCodeMirrorEditor({
+    existingFilter,
+    onSubmitFilter,
+    suggestionProvider
+  });
+  return /* @__PURE__ */ jsxs("div", { ...props, className: classBase, children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        className: `${classBase}-FilterButton`,
+        "data-icon": iconName,
+        tabIndex: -1
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: `${classBase}-Editor`, ref: editorRef }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        className: `${classBase}-ClearButton`,
+        "data-icon": "close-circle",
+        onClick: clearInput
+      }
+    )
+  ] });
+};
+
+export { FilterInput };
+//# sourceMappingURL=FilterInput.js.map

package/esm/filter-input/FilterInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterInput.js","sources":["../../src/filter-input/FilterInput.tsx"],"sourcesContent":["import { Filter } from \"@vuu-ui/vuu-filter-types\";\nimport { Button } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes } from \"react\";\nimport {\n  filterSubmissionHandler,\n  SuggestionConsumer,\n  useCodeMirrorEditor,\n} from \"./useCodeMirrorEditor\";\n\nimport filterInputCss from \"./FilterInput.css\";\n\nconst classBase = \"vuuFilterInput\";\n\nexport interface FilterInputProps\n  extends SuggestionConsumer,\n    HTMLAttributes<HTMLDivElement> {\n  iconName?: string;\n  existingFilter?: Filter;\n  namedFilters?: Map<string, string>;\n  onSubmitFilter?: filterSubmissionHandler;\n}\n\nexport const FilterInput = ({\n  existingFilter,\n  iconName = \"filter\",\n  namedFilters,\n  onSubmitFilter,\n  suggestionProvider,\n  ...props\n}: FilterInputProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-filter-input\",\n    css: filterInputCss,\n    window: targetWindow,\n  });\n\n  const { editorRef, clearInput } = useCodeMirrorEditor({\n    existingFilter,\n    onSubmitFilter,\n    suggestionProvider,\n  });\n\n  return (\n    <div {...props} className={classBase}>\n      <Button\n        className={`${classBase}-FilterButton`}\n        data-icon={iconName}\n        tabIndex={-1}\n      />\n      <div className={`${classBase}-Editor`} ref={editorRef} />\n      <Button\n        className={`${classBase}-ClearButton`}\n        data-icon=\"close-circle\"\n        onClick={clearInput}\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAaA,MAAM,SAAY,GAAA,gBAAA,CAAA;AAWX,MAAM,cAAc,CAAC;AAAA,EAC1B,cAAA;AAAA,EACA,QAAW,GAAA,QAAA;AAAA,EACX,YAAA;AAAA,EACA,cAAA;AAAA,EACA,kBAAA;AAAA,EACA,GAAG,KAAA;AACL,CAAwB,KAAA;AACtB,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,kBAAA;AAAA,IACR,GAAK,EAAA,cAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,SAAA,EAAW,UAAW,EAAA,GAAI,mBAAoB,CAAA;AAAA,IACpD,cAAA;AAAA,IACA,cAAA;AAAA,IACA,kBAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA,EAAK,GAAG,KAAA,EAAO,WAAW,SACzB,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,GAAG,SAAS,CAAA,aAAA,CAAA;AAAA,QACvB,WAAW,EAAA,QAAA;AAAA,QACX,QAAU,EAAA,CAAA,CAAA;AAAA,OAAA;AAAA,KACZ;AAAA,wBACC,KAAI,EAAA,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,OAAA,CAAA,EAAW,KAAK,SAAW,EAAA,CAAA;AAAA,oBACvD,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,GAAG,SAAS,CAAA,YAAA,CAAA;AAAA,QACvB,WAAU,EAAA,cAAA;AAAA,QACV,OAAS,EAAA,UAAA;AAAA,OAAA;AAAA,KACX;AAAA,GACF,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/esm/filter-input/FilterLanguage.js

@@ -0,0 +1,22 @@
+import { LRLanguage, styleTags, tags, LanguageSupport } from '@vuu-ui/vuu-codemirror';
+import { parser } from '@vuu-ui/vuu-filter-parser';
+
+const filterLanguage = LRLanguage.define({
+  name: "VuuFilterQuery",
+  parser: parser.configure({
+    props: [
+      styleTags({
+        Identifier: tags.variableName,
+        String: tags.string,
+        Or: tags.emphasis,
+        Operator: tags.operator
+      })
+    ]
+  })
+});
+const filterLanguageSupport = () => {
+  return new LanguageSupport(filterLanguage);
+};
+
+export { filterLanguageSupport };
+//# sourceMappingURL=FilterLanguage.js.map

package/esm/filter-input/FilterLanguage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterLanguage.js","sources":["../../src/filter-input/FilterLanguage.ts"],"sourcesContent":["import {\n  LanguageSupport,\n  LRLanguage,\n  styleTags,\n  tags as tag,\n} from \"@vuu-ui/vuu-codemirror\";\nimport { parser } from \"@vuu-ui/vuu-filter-parser\";\n\nconst filterLanguage = LRLanguage.define({\n  name: \"VuuFilterQuery\",\n  parser: parser.configure({\n    props: [\n      styleTags({\n        Identifier: tag.variableName,\n        String: tag.string,\n        Or: tag.emphasis,\n        Operator: tag.operator,\n      }),\n    ],\n  }),\n});\n\nexport const filterLanguageSupport = () => {\n  return new LanguageSupport(filterLanguage);\n};\n"],"names":["tag"],"mappings":";;;AAQA,MAAM,cAAA,GAAiB,WAAW,MAAO,CAAA;AAAA,EACvC,IAAM,EAAA,gBAAA;AAAA,EACN,MAAA,EAAQ,OAAO,SAAU,CAAA;AAAA,IACvB,KAAO,EAAA;AAAA,MACL,SAAU,CAAA;AAAA,QACR,YAAYA,IAAI,CAAA,YAAA;AAAA,QAChB,QAAQA,IAAI,CAAA,MAAA;AAAA,QACZ,IAAIA,IAAI,CAAA,QAAA;AAAA,QACR,UAAUA,IAAI,CAAA,QAAA;AAAA,OACf,CAAA;AAAA,KACH;AAAA,GACD,CAAA;AACH,CAAC,CAAA,CAAA;AAEM,MAAM,wBAAwB,MAAM;AACzC,EAAO,OAAA,IAAI,gBAAgB,cAAc,CAAA,CAAA;AAC3C;;;;"}

package/esm/filter-input/filterInfo.js

@@ -0,0 +1,15 @@
+import { createEl } from '@vuu-ui/vuu-utils';
+
+const filterInfo = (filterName, filterQuery) => {
+  const rootElement = createEl("div", "vuuFunctionDoc");
+  const headingElement = createEl("div", "function-heading");
+  const nameElement = createEl("span", "function-name", filterName);
+  headingElement.appendChild(nameElement);
+  const child2 = createEl("p", void 0, filterQuery);
+  rootElement.appendChild(headingElement);
+  rootElement.appendChild(child2);
+  return rootElement;
+};
+
+export { filterInfo };
+//# sourceMappingURL=filterInfo.js.map

package/esm/filter-input/filterInfo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filterInfo.js","sources":["../../src/filter-input/filterInfo.ts"],"sourcesContent":["import { createEl } from \"@vuu-ui/vuu-utils\";\n\nexport const filterInfo = (\n  filterName: string,\n  filterQuery: string\n  // filter: Filter\n) => {\n  const rootElement = createEl(\"div\", \"vuuFunctionDoc\");\n  const headingElement = createEl(\"div\", \"function-heading\");\n\n  const nameElement = createEl(\"span\", \"function-name\", filterName);\n  // const paramElement = createEl(\"span\", \"param-list\", params.description);\n  // const typeElement = createEl(\"span\", \"function-type\", type);\n\n  headingElement.appendChild(nameElement);\n  // headingElement.appendChild(paramElement);\n  // headingElement.appendChild(typeElement);\n\n  const child2 = createEl(\"p\", undefined, filterQuery);\n\n  rootElement.appendChild(headingElement);\n  rootElement.appendChild(child2);\n\n  return rootElement;\n};\n"],"names":[],"mappings":";;AAEa,MAAA,UAAA,GAAa,CACxB,UAAA,EACA,WAEG,KAAA;AACH,EAAM,MAAA,WAAA,GAAc,QAAS,CAAA,KAAA,EAAO,gBAAgB,CAAA,CAAA;AACpD,EAAM,MAAA,cAAA,GAAiB,QAAS,CAAA,KAAA,EAAO,kBAAkB,CAAA,CAAA;AAEzD,EAAA,MAAM,WAAc,GAAA,QAAA,CAAS,MAAQ,EAAA,eAAA,EAAiB,UAAU,CAAA,CAAA;AAIhE,EAAA,cAAA,CAAe,YAAY,WAAW,CAAA,CAAA;AAItC,EAAA,MAAM,MAAS,GAAA,QAAA,CAAS,GAAK,EAAA,KAAA,CAAA,EAAW,WAAW,CAAA,CAAA;AAEnD,EAAA,WAAA,CAAY,YAAY,cAAc,CAAA,CAAA;AACtC,EAAA,WAAA,CAAY,YAAY,MAAM,CAAA,CAAA;AAE9B,EAAO,OAAA,WAAA,CAAA;AACT;;;;"}

package/esm/filter-input/highlighting.js

@@ -0,0 +1,10 @@
+import { HighlightStyle, tags, syntaxHighlighting } from '@vuu-ui/vuu-codemirror';
+
+const myHighlightStyle = HighlightStyle.define([
+  { tag: tags.variableName, color: "var(--vuuFilterEditor-variableColor)" },
+  { tag: tags.comment, color: "green", fontStyle: "italic" }
+]);
+const vuuHighlighting = syntaxHighlighting(myHighlightStyle);
+
+export { vuuHighlighting };
+//# sourceMappingURL=highlighting.js.map

package/esm/filter-input/highlighting.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlighting.js","sources":["../../src/filter-input/highlighting.ts"],"sourcesContent":["import {\n  HighlightStyle,\n  syntaxHighlighting,\n  tags,\n} from \"@vuu-ui/vuu-codemirror\";\n\nconst myHighlightStyle = HighlightStyle.define([\n  { tag: tags.variableName, color: \"var(--vuuFilterEditor-variableColor)\" },\n  { tag: tags.comment, color: \"green\", fontStyle: \"italic\" },\n]);\n\nexport const vuuHighlighting = syntaxHighlighting(myHighlightStyle);\n"],"names":[],"mappings":";;AAMA,MAAM,gBAAA,GAAmB,eAAe,MAAO,CAAA;AAAA,EAC7C,EAAE,GAAA,EAAK,IAAK,CAAA,YAAA,EAAc,OAAO,sCAAuC,EAAA;AAAA,EACxE,EAAE,GAAK,EAAA,IAAA,CAAK,SAAS,KAAO,EAAA,OAAA,EAAS,WAAW,QAAS,EAAA;AAC3D,CAAC,CAAA,CAAA;AAEY,MAAA,eAAA,GAAkB,mBAAmB,gBAAgB;;;;"}

package/esm/filter-input/theme.js

@@ -0,0 +1,77 @@
+import { EditorView } from '@vuu-ui/vuu-codemirror';
+
+const vuuTheme = EditorView.theme(
+  {
+    "&": {
+      color: "var(--vuuFilterEditor-color)",
+      backgroundColor: "var(--vuuFilterEditor-background)",
+      fontSize: "var(--vuuFilterEditor-fontSize)"
+    },
+    ".cm-content": {
+      caretColor: "var(--vuuFilterEditor-cursorColor)",
+      padding: 0
+    },
+    ".cm-line": {
+      lineHeight: "var(--vuuFilterEditor-lineHeight)"
+    },
+    "&.cm-focused .cm-cursor": {
+      borderLeftColor: "var(--vuuFilterEditor-cursorColor)"
+    },
+    "&.cm-focused .cm-selectionBackground, ::selection": {
+      backgroundColor: "var(--vuuFilterEditor-selectionBackground)"
+    },
+    ".cm-selectionBackground, ::selection": {
+      backgroundColor: "var(--vuuFilterEditor-selectionBackground)"
+    },
+    ".cm-scroller": {
+      fontFamily: "var(--vuuFilterEditor-fontFamily)"
+    },
+    ".cm-tooltip": {
+      background: "var(--vuuFilterEditor-tooltipBackground)",
+      border: "var(--vuuFilterEditor-tooltipBorder)",
+      borderRadius: "4px",
+      boxShadow: "var(--vuuFilterEditor-tooltipElevation)",
+      "&.cm-tooltip-autocomplete > ul": {
+        fontFamily: "var(--vuuFilterEditor-fontFamily)",
+        fontSize: "var(--vuuFilterEditor-fontSize)",
+        maxHeight: "240px"
+      },
+      "&.cm-tooltip-autocomplete > ul > li": {
+        alignItems: "center",
+        display: "flex",
+        height: "var(--vuuFilterEditor-suggestion-height)",
+        padding: "0 3px",
+        lineHeight: "var(--vuuFilterEditor-suggestion-height)"
+      },
+      "&.cm-tooltip-autocomplete li[aria-selected]": {
+        background: "var(--vuuFilterEditor-suggestion-selectedBackground)",
+        color: "var(--vuuFilterEditor-suggestion-selectedColor)"
+      }
+    },
+    ".cm-completionIcon": {
+      height: "18px",
+      flex: "0 0 16px"
+    },
+    ".cm-completionLabel": {
+      flex: "1 1 auto"
+    },
+    ".cm-completionIcon-filter": {
+      position: "relative",
+      "&:after": {
+        background: "var(--salt-text-secondary-foreground)",
+        content: "''",
+        "-webkit-mask": "var(--svg-filter) center center/13px 13px",
+        "-webkit-mask-repeat": "no-repeat",
+        position: "absolute",
+        height: "18px",
+        left: "0px",
+        top: "0px",
+        width: "16px"
+      }
+    }
+  },
+  { dark: false }
+);
+
+export { vuuTheme };
+//# sourceMappingURL=theme.js.map

package/esm/filter-input/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sources":["../../src/filter-input/theme.ts"],"sourcesContent":["import { EditorView } from \"@vuu-ui/vuu-codemirror\";\n\nexport const vuuTheme = EditorView.theme(\n  {\n    \"&\": {\n      color: \"var(--vuuFilterEditor-color)\",\n      backgroundColor: \"var(--vuuFilterEditor-background)\",\n      fontSize: \"var(--vuuFilterEditor-fontSize)\",\n    },\n    \".cm-content\": {\n      caretColor: \"var(--vuuFilterEditor-cursorColor)\",\n      padding: 0,\n    },\n    \".cm-line\": {\n      lineHeight: \"var(--vuuFilterEditor-lineHeight)\",\n    },\n    \"&.cm-focused .cm-cursor\": {\n      borderLeftColor: \"var(--vuuFilterEditor-cursorColor)\",\n    },\n    \"&.cm-focused .cm-selectionBackground, ::selection\": {\n      backgroundColor: \"var(--vuuFilterEditor-selectionBackground)\",\n    },\n    \".cm-selectionBackground, ::selection\": {\n      backgroundColor: \"var(--vuuFilterEditor-selectionBackground)\",\n    },\n    \".cm-scroller\": {\n      fontFamily: \"var(--vuuFilterEditor-fontFamily)\",\n    },\n    \".cm-tooltip\": {\n      background: \"var(--vuuFilterEditor-tooltipBackground)\",\n      border: \"var(--vuuFilterEditor-tooltipBorder)\",\n      borderRadius: \"4px\",\n      boxShadow: \"var(--vuuFilterEditor-tooltipElevation)\",\n      \"&.cm-tooltip-autocomplete > ul\": {\n        fontFamily: \"var(--vuuFilterEditor-fontFamily)\",\n        fontSize: \"var(--vuuFilterEditor-fontSize)\",\n        maxHeight: \"240px\",\n      },\n      \"&.cm-tooltip-autocomplete > ul > li\": {\n        alignItems: \"center\",\n        display: \"flex\",\n        height: \"var(--vuuFilterEditor-suggestion-height)\",\n        padding: \"0 3px\",\n        lineHeight: \"var(--vuuFilterEditor-suggestion-height)\",\n      },\n      \"&.cm-tooltip-autocomplete li[aria-selected]\": {\n        background: \"var(--vuuFilterEditor-suggestion-selectedBackground)\",\n        color: \"var(--vuuFilterEditor-suggestion-selectedColor)\",\n      },\n    },\n    \".cm-completionIcon\": {\n      height: \"18px\",\n      flex: \"0 0 16px\",\n    },\n    \".cm-completionLabel\": {\n      flex: \"1 1 auto\",\n    },\n    \".cm-completionIcon-filter\": {\n      position: \"relative\",\n      \"&:after\": {\n        background: \"var(--salt-text-secondary-foreground)\",\n        content: \"''\",\n        \"-webkit-mask\": \"var(--svg-filter) center center/13px 13px\",\n        \"-webkit-mask-repeat\": \"no-repeat\",\n        position: \"absolute\",\n        height: \"18px\",\n        left: \"0px\",\n        top: \"0px\",\n        width: \"16px\",\n      },\n    },\n  },\n  { dark: false }\n);\n"],"names":[],"mappings":";;AAEO,MAAM,WAAW,UAAW,CAAA,KAAA;AAAA,EACjC;AAAA,IACE,GAAK,EAAA;AAAA,MACH,KAAO,EAAA,8BAAA;AAAA,MACP,eAAiB,EAAA,mCAAA;AAAA,MACjB,QAAU,EAAA,iCAAA;AAAA,KACZ;AAAA,IACA,aAAe,EAAA;AAAA,MACb,UAAY,EAAA,oCAAA;AAAA,MACZ,OAAS,EAAA,CAAA;AAAA,KACX;AAAA,IACA,UAAY,EAAA;AAAA,MACV,UAAY,EAAA,mCAAA;AAAA,KACd;AAAA,IACA,yBAA2B,EAAA;AAAA,MACzB,eAAiB,EAAA,oCAAA;AAAA,KACnB;AAAA,IACA,mDAAqD,EAAA;AAAA,MACnD,eAAiB,EAAA,4CAAA;AAAA,KACnB;AAAA,IACA,sCAAwC,EAAA;AAAA,MACtC,eAAiB,EAAA,4CAAA;AAAA,KACnB;AAAA,IACA,cAAgB,EAAA;AAAA,MACd,UAAY,EAAA,mCAAA;AAAA,KACd;AAAA,IACA,aAAe,EAAA;AAAA,MACb,UAAY,EAAA,0CAAA;AAAA,MACZ,MAAQ,EAAA,sCAAA;AAAA,MACR,YAAc,EAAA,KAAA;AAAA,MACd,SAAW,EAAA,yCAAA;AAAA,MACX,gCAAkC,EAAA;AAAA,QAChC,UAAY,EAAA,mCAAA;AAAA,QACZ,QAAU,EAAA,iCAAA;AAAA,QACV,SAAW,EAAA,OAAA;AAAA,OACb;AAAA,MACA,qCAAuC,EAAA;AAAA,QACrC,UAAY,EAAA,QAAA;AAAA,QACZ,OAAS,EAAA,MAAA;AAAA,QACT,MAAQ,EAAA,0CAAA;AAAA,QACR,OAAS,EAAA,OAAA;AAAA,QACT,UAAY,EAAA,0CAAA;AAAA,OACd;AAAA,MACA,6CAA+C,EAAA;AAAA,QAC7C,UAAY,EAAA,sDAAA;AAAA,QACZ,KAAO,EAAA,iDAAA;AAAA,OACT;AAAA,KACF;AAAA,IACA,oBAAsB,EAAA;AAAA,MACpB,MAAQ,EAAA,MAAA;AAAA,MACR,IAAM,EAAA,UAAA;AAAA,KACR;AAAA,IACA,qBAAuB,EAAA;AAAA,MACrB,IAAM,EAAA,UAAA;AAAA,KACR;AAAA,IACA,2BAA6B,EAAA;AAAA,MAC3B,QAAU,EAAA,UAAA;AAAA,MACV,SAAW,EAAA;AAAA,QACT,UAAY,EAAA,uCAAA;AAAA,QACZ,OAAS,EAAA,IAAA;AAAA,QACT,cAAgB,EAAA,2CAAA;AAAA,QAChB,qBAAuB,EAAA,WAAA;AAAA,QACvB,QAAU,EAAA,UAAA;AAAA,QACV,MAAQ,EAAA,MAAA;AAAA,QACR,IAAM,EAAA,KAAA;AAAA,QACN,GAAK,EAAA,KAAA;AAAA,QACL,KAAO,EAAA,MAAA;AAAA,OACT;AAAA,KACF;AAAA,GACF;AAAA,EACA,EAAE,MAAM,KAAM,EAAA;AAChB;;;;"}

package/esm/filter-input/useCodeMirrorEditor.js

@@ -0,0 +1,134 @@
+import { EditorView, EditorState, minimalSetup, autocompletion, keymap, defaultKeymap, startCompletion, ensureSyntaxTree } from '@vuu-ui/vuu-codemirror';
+import { walkTree } from '@vuu-ui/vuu-filter-parser';
+import cx from 'clsx';
+import { useRef, useMemo, useEffect } from 'react';
+import { filterLanguageSupport } from './FilterLanguage.js';
+import { vuuHighlighting } from './highlighting.js';
+import { vuuTheme } from './theme.js';
+import { useAutoComplete } from './useFilterAutoComplete.js';
+
+const getView = (ref) => {
+  if (ref.current == void 0) {
+    throw Error("EditorView not defined");
+  }
+  return ref.current;
+};
+const getOptionClass = (completion) => {
+  return cx("vuuSuggestion", {
+    vuuIllustration: completion.isIllustration
+  });
+};
+const stripName = (filterQuery) => {
+  const pos = filterQuery.lastIndexOf(" as ");
+  if (pos !== -1) {
+    return filterQuery.slice(0, pos);
+  } else {
+    return filterQuery;
+  }
+};
+const noop = () => console.log("noooop");
+const useCodeMirrorEditor = ({
+  existingFilter,
+  onSubmitFilter,
+  suggestionProvider
+}) => {
+  const editorRef = useRef(null);
+  const onSubmit = useRef(noop);
+  const viewRef = useRef();
+  const completionFn = useAutoComplete(
+    suggestionProvider,
+    onSubmit,
+    existingFilter
+  );
+  const [createState, clearInput] = useMemo(() => {
+    const parseFilter = () => {
+      const view = getView(viewRef);
+      const source = view.state.doc.toString();
+      const tree = ensureSyntaxTree(view.state, view.state.doc.length, 5e3);
+      if (tree) {
+        const filter = walkTree(tree, source);
+        return [filter, stripName(source), filter.name];
+      } else {
+        return [void 0, "", void 0];
+      }
+    };
+    const clearInput2 = () => {
+      getView(viewRef).setState(createState2());
+    };
+    const submitFilterAndClearInput = (mode) => {
+      const [filter, filterQuery, filterName] = parseFilter();
+      onSubmitFilter?.(filter, filterQuery, mode, filterName);
+      clearInput2();
+    };
+    const submitFilter = (key) => {
+      return keymap.of([
+        {
+          key,
+          run() {
+            submitFilterAndClearInput();
+            return true;
+          }
+        }
+      ]);
+    };
+    const showSuggestions = (key) => {
+      return keymap.of([
+        {
+          key,
+          run() {
+            startCompletion(getView(viewRef));
+            return true;
+          }
+        }
+      ]);
+    };
+    const createState2 = () => EditorState.create({
+      doc: "",
+      extensions: [
+        minimalSetup,
+        autocompletion({
+          override: [completionFn],
+          optionClass: getOptionClass
+        }),
+        filterLanguageSupport(),
+        keymap.of(defaultKeymap),
+        submitFilter("Ctrl-Enter"),
+        showSuggestions("ArrowDown"),
+        EditorView.updateListener.of((v) => {
+          const view = getView(viewRef);
+          if (v.docChanged) {
+            startCompletion(view);
+          }
+        }),
+        EditorState.transactionFilter.of(
+          (tr) => tr.newDoc.lines > 1 ? [] : tr
+        ),
+        vuuTheme,
+        vuuHighlighting
+      ]
+    });
+    onSubmit.current = (mode) => {
+      submitFilterAndClearInput(mode);
+      setTimeout(() => {
+        getView(viewRef).focus();
+      }, 100);
+    };
+    return [createState2, clearInput2];
+  }, [completionFn, onSubmitFilter]);
+  useEffect(() => {
+    if (!editorRef.current) {
+      throw Error("editor not in dom");
+    }
+    viewRef.current = new EditorView({
+      state: createState(),
+      parent: editorRef.current
+    });
+    return () => {
+      viewRef.current?.destroy();
+    };
+  }, [completionFn, createState]);
+  return { editorRef, clearInput };
+};
+
+export { useCodeMirrorEditor };
+//# sourceMappingURL=useCodeMirrorEditor.js.map

package/esm/filter-input/useCodeMirrorEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCodeMirrorEditor.js","sources":["../../src/filter-input/useCodeMirrorEditor.ts"],"sourcesContent":["import {\n  autocompletion,\n  Completion,\n  defaultKeymap,\n  EditorState,\n  EditorView,\n  ensureSyntaxTree,\n  keymap,\n  minimalSetup,\n  startCompletion,\n  VuuCompletion,\n} from \"@vuu-ui/vuu-codemirror\";\nimport { walkTree } from \"@vuu-ui/vuu-filter-parser\";\nimport { Filter } from \"@vuu-ui/vuu-filter-types\";\nimport cx from \"clsx\";\nimport { MutableRefObject, useEffect, useMemo, useRef } from \"react\";\nimport { filterLanguageSupport } from \"./FilterLanguage\";\nimport { vuuHighlighting } from \"./highlighting\";\nimport { vuuTheme } from \"./theme\";\nimport {\n  ApplyCompletion,\n  FilterSubmissionMode,\n  useAutoComplete,\n} from \"./useFilterAutoComplete\";\nimport { FilterSaveOptions } from \"./useFilterSuggestionProvider\";\n\nexport type SuggestionType =\n  | \"column\"\n  | \"columnValue\"\n  | \"operator\"\n  | \"save\"\n  | \"name\";\n\nexport interface FilterSuggestionOptions {\n  quoted?: boolean;\n  columnName?: string;\n  existingFilter?: Filter;\n  filterName?: string;\n  onSubmit?: () => void;\n  operator?: string;\n  startsWith?: string;\n  selection?: string[];\n}\n\nexport type getFilterSuggestionsType = (\n  suggestionType: SuggestionType,\n  options?: FilterSuggestionOptions\n) => Promise<Completion[]>;\n\nexport interface IFilterSuggestionProvider {\n  getSuggestions: getFilterSuggestionsType;\n  isPartialMatch: (\n    valueType: SuggestionType,\n    columnName?: string,\n    text?: string | undefined\n  ) => Promise<boolean>;\n}\n\nexport interface SuggestionConsumer {\n  suggestionProvider: IFilterSuggestionProvider;\n}\n\nconst getView = (ref: MutableRefObject<EditorView | undefined>): EditorView => {\n  if (ref.current == undefined) {\n    throw Error(\"EditorView not defined\");\n  }\n  return ref.current;\n};\n\nconst getOptionClass = (completion: VuuCompletion) => {\n  return cx(\"vuuSuggestion\", {\n    vuuIllustration: completion.isIllustration,\n  });\n};\n\nconst stripName = (filterQuery: string) => {\n  const pos = filterQuery.lastIndexOf(\" as \");\n  if (pos !== -1) {\n    return filterQuery.slice(0, pos);\n  } else {\n    return filterQuery;\n  }\n};\n\nconst noop = () => console.log(\"noooop\");\n\nexport type filterSubmissionHandler = (\n  filter: Filter | undefined,\n  filterQuery: string,\n  mode?: FilterSubmissionMode,\n  filterName?: string\n) => void;\n\nexport interface CodeMirrorEditorProps {\n  existingFilter?: Filter;\n  onSubmitFilter?: filterSubmissionHandler;\n  saveOptions?: FilterSaveOptions;\n  suggestionProvider: IFilterSuggestionProvider;\n}\n\nexport const useCodeMirrorEditor = ({\n  existingFilter,\n  onSubmitFilter,\n  suggestionProvider,\n}: CodeMirrorEditorProps) => {\n  const editorRef = useRef<HTMLDivElement>(null);\n  const onSubmit = useRef<ApplyCompletion>(noop);\n  const viewRef = useRef<EditorView>();\n  const completionFn = useAutoComplete(\n    suggestionProvider,\n    onSubmit,\n    existingFilter\n  );\n\n  const [createState, clearInput] = useMemo(() => {\n    const parseFilter = ():\n      | [Filter, string, string | undefined]\n      | [undefined, \"\", undefined] => {\n      const view = getView(viewRef);\n      const source = view.state.doc.toString();\n      const tree = ensureSyntaxTree(view.state, view.state.doc.length, 5000);\n      if (tree) {\n        const filter = walkTree(tree, source) as Filter;\n        return [filter, stripName(source), filter.name];\n      } else {\n        return [undefined, \"\", undefined];\n      }\n    };\n\n    const clearInput = () => {\n      getView(viewRef).setState(createState());\n    };\n\n    const submitFilterAndClearInput = (mode?: FilterSubmissionMode) => {\n      const [filter, filterQuery, filterName] = parseFilter();\n      onSubmitFilter?.(filter, filterQuery, mode, filterName);\n      clearInput();\n    };\n\n    const submitFilter = (key: string) => {\n      return keymap.of([\n        {\n          key,\n          run() {\n            submitFilterAndClearInput();\n            return true;\n          },\n        },\n      ]);\n    };\n\n    const showSuggestions = (key: string) => {\n      return keymap.of([\n        {\n          key,\n          run() {\n            startCompletion(getView(viewRef));\n            return true;\n          },\n        },\n      ]);\n    };\n\n    const createState = (): EditorState =>\n      EditorState.create({\n        doc: \"\",\n        extensions: [\n          minimalSetup,\n          autocompletion({\n            override: [completionFn],\n            optionClass: getOptionClass,\n          }),\n          filterLanguageSupport(),\n          keymap.of(defaultKeymap),\n          submitFilter(\"Ctrl-Enter\"),\n          showSuggestions(\"ArrowDown\"),\n          EditorView.updateListener.of((v) => {\n            const view = getView(viewRef);\n            if (v.docChanged) {\n              startCompletion(view);\n            }\n          }),\n          EditorState.transactionFilter.of((tr) =>\n            tr.newDoc.lines > 1 ? [] : tr\n          ),\n          vuuTheme,\n          vuuHighlighting,\n        ],\n      });\n\n    onSubmit.current = (mode?: FilterSubmissionMode) => {\n      submitFilterAndClearInput(mode);\n      // TODO refocu sthe editor\n      setTimeout(() => {\n        getView(viewRef).focus();\n      }, 100);\n    };\n\n    return [createState, clearInput];\n  }, [completionFn, onSubmitFilter]);\n\n  useEffect(() => {\n    if (!editorRef.current) {\n      throw Error(\"editor not in dom\");\n    }\n\n    viewRef.current = new EditorView({\n      state: createState(),\n      parent: editorRef.current,\n    });\n\n    return () => {\n      viewRef.current?.destroy();\n    };\n  }, [completionFn, createState]);\n\n  return { editorRef, clearInput };\n};\n"],"names":["clearInput","createState"],"mappings":"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"}