@vuu-ui/vuu-filters 0.0.26

package/cjs/filter-editor/FilterClauseCombinator.js

@@ -0,0 +1,42 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
+var react = require('react');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var FilterClauseCombinator$1 = require('./FilterClauseCombinator.css.js');
+
+const classBase = "vuuFilterClauseCombinator";
+const FilterClauseCombinator = ({
+  onChange,
+  onKeyDown,
+  operator
+}) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-filterclause-combinator",
+    css: FilterClauseCombinator$1,
+    window: targetWindow
+  });
+  const handleChange = react.useCallback(
+    (value) => {
+      onChange(value);
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    vuuUiControls.CycleStateButton,
+    {
+      className: classBase,
+      onChange: handleChange,
+      onKeyDown,
+      value: operator,
+      values: ["and", "or"],
+      variant: "primary"
+    }
+  );
+};
+
+exports.FilterClauseCombinator = FilterClauseCombinator;
+//# sourceMappingURL=FilterClauseCombinator.js.map

package/cjs/filter-editor/FilterClauseCombinator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterClauseCombinator.js","sources":["../../src/filter-editor/FilterClauseCombinator.tsx"],"sourcesContent":["import type { FilterCombinatorOp } from \"@vuu-ui/vuu-filter-types\";\nimport { CycleStateButton } from \"@vuu-ui/vuu-ui-controls\";\nimport { KeyboardEventHandler, useCallback } from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport filterClauseCombinatorCss from \"./FilterClauseCombinator.css\";\n\nconst classBase = \"vuuFilterClauseCombinator\";\n\nexport type FilterClauseCombinatorChangeHandler = (\n  op: FilterCombinatorOp\n) => void;\n\nexport interface FilterClauseCombinatorProps {\n  onChange: FilterClauseCombinatorChangeHandler;\n  onKeyDown: KeyboardEventHandler;\n  operator: FilterCombinatorOp;\n}\n\nexport const FilterClauseCombinator = ({\n  onChange,\n  onKeyDown,\n  operator,\n}: FilterClauseCombinatorProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-filterclause-combinator\",\n    css: filterClauseCombinatorCss,\n    window: targetWindow,\n  });\n\n  const handleChange = useCallback(\n    (value) => {\n      onChange(value as FilterCombinatorOp);\n    },\n    [onChange]\n  );\n\n  return (\n    <CycleStateButton\n      className={classBase}\n      onChange={handleChange}\n      onKeyDown={onKeyDown}\n      value={operator}\n      values={[\"and\", \"or\"]}\n      variant=\"primary\"\n    />\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","filterClauseCombinatorCss","useCallback","jsx","CycleStateButton"],"mappings":";;;;;;;;;AAQA,MAAM,SAAY,GAAA,2BAAA,CAAA;AAYX,MAAM,yBAAyB,CAAC;AAAA,EACrC,QAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AACF,CAAmC,KAAA;AACjC,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,6BAAA;AAAA,IACR,GAAK,EAAAC,wBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,YAAe,GAAAC,iBAAA;AAAA,IACnB,CAAC,KAAU,KAAA;AACT,MAAA,QAAA,CAAS,KAA2B,CAAA,CAAA;AAAA,KACtC;AAAA,IACA,CAAC,QAAQ,CAAA;AAAA,GACX,CAAA;AAEA,EACE,uBAAAC,cAAA;AAAA,IAACC,8BAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,SAAA;AAAA,MACX,QAAU,EAAA,YAAA;AAAA,MACV,SAAA;AAAA,MACA,KAAO,EAAA,QAAA;AAAA,MACP,MAAA,EAAQ,CAAC,KAAA,EAAO,IAAI,CAAA;AAAA,MACpB,OAAQ,EAAA,SAAA;AAAA,KAAA;AAAA,GACV,CAAA;AAEJ;;;;"}

package/cjs/filter-editor/FilterEditor.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var filterEditorCss = ".vuuFilterEditor {\n    align-items: center;\n    display: flex;\n    gap: var(--salt-spacing-200);\n    height: var(--vuuFilterEditor-height, calc(var(--salt-size-base) + var(--salt-size-unit)));\n    padding: 0 var(--salt-spacing-400);\n}";
+
+module.exports = filterEditorCss;
+//# sourceMappingURL=FilterEditor.css.js.map

package/cjs/filter-editor/FilterEditor.css.js.map

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

package/cjs/filter-editor/FilterEditor.js

@@ -0,0 +1,97 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var FilterClause = require('../filter-clause/FilterClause.js');
+var FilterClauseCombinator = require('./FilterClauseCombinator.js');
+var useFilterEditor = require('./useFilterEditor.js');
+var FilterEditor$1 = require('./FilterEditor.css.js');
+
+const classBase = "vuuFilterEditor";
+const FilterEditor = ({
+  FilterClauseEditorProps,
+  columnDescriptors,
+  filter,
+  onCancel,
+  onSave,
+  tableSchema,
+  ...htmlAttributes
+}) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-filter-editor",
+    css: FilterEditor$1,
+    window: targetWindow
+  });
+  const {
+    columnsByName,
+    filterModel,
+    setContainer,
+    onCancelFilterClause,
+    onCancelFilterEdit,
+    onChangeFilterCombinator,
+    onKeyDownCombinator,
+    saveButtonRef,
+    saveButtonProps
+  } = useFilterEditor.useFilterEditor({
+    columnDescriptors,
+    filter,
+    onCancel,
+    onSave
+  });
+  const getContents = () => {
+    const { op } = filterModel;
+    const content = [];
+    filterModel.filterClauses.forEach((filterClauseModel, i) => {
+      if (i > 0 && op) {
+        content.push(
+          /* @__PURE__ */ jsxRuntime.jsx(
+            FilterClauseCombinator.FilterClauseCombinator,
+            {
+              onChange: onChangeFilterCombinator,
+              onKeyDown: onKeyDownCombinator,
+              operator: op
+            },
+            `filter-operator-${i}`
+          )
+        );
+      }
+      content.push(
+        /* @__PURE__ */ react.createElement(
+          FilterClause.FilterClause,
+          {
+            ...FilterClauseEditorProps,
+            columnsByName,
+            "data-index": i,
+            filterClauseModel,
+            key: `editor-${i}`,
+            onCancel: onCancelFilterClause,
+            tableSchema
+          }
+        )
+      );
+    });
+    return content;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...htmlAttributes, className: classBase, ref: setContainer, children: [
+    getContents(),
+    /* @__PURE__ */ react.createElement(
+      vuuUiControls.SplitButton,
+      {
+        ...saveButtonProps,
+        disabled: !filterModel.isValid,
+        key: "save-button",
+        ref: saveButtonRef
+      },
+      "Save"
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(core.Button, { onClick: onCancelFilterEdit, variant: "secondary", children: "Cancel" })
+  ] });
+};
+
+exports.FilterEditor = FilterEditor;
+//# sourceMappingURL=FilterEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterEditor.js","sources":["../../src/filter-editor/FilterEditor.tsx"],"sourcesContent":["import { TableSchema } from \"@vuu-ui/vuu-data-types\";\nimport { 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 { FilterClause, FilterClauseProps } from \"../filter-clause/FilterClause\";\nimport { FilterClauseModel } from \"../FilterModel\";\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  FilterClauseEditorProps?: Partial<FilterClauseProps>;\n  columnDescriptors: ColumnDescriptor[];\n  filter?: Filter;\n  onCancel: FilterEditCancelHandler;\n  onSave: FilterEditSaveHandler;\n  tableSchema: TableSchema;\n}\n\nexport const FilterEditor = ({\n  FilterClauseEditorProps,\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    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          {...FilterClauseEditorProps}\n          columnsByName={columnsByName}\n          data-index={i}\n          filterClauseModel={filterClauseModel as FilterClauseModel}\n          key={`editor-${i}`}\n          onCancel={onCancelFilterClause}\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","createElement","FilterClause","SplitButton","Button"],"mappings":";;;;;;;;;;;;;AAeA,MAAM,SAAY,GAAA,iBAAA,CAAA;AAcX,MAAM,eAAe,CAAC;AAAA,EAC3B,uBAAA;AAAA,EACA,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,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,wBACNC,mBAAA;AAAA,UAACC,yBAAA;AAAA,UAAA;AAAA,YACE,GAAG,uBAAA;AAAA,YACJ,aAAA;AAAA,YACA,YAAY,EAAA,CAAA;AAAA,YACZ,iBAAA;AAAA,YACA,GAAA,EAAK,UAAU,CAAC,CAAA,CAAA;AAAA,YAChB,QAAU,EAAA,oBAAA;AAAA,YACV,WAAA;AAAA,WAAA;AAAA,SACF;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,oBACbD,mBAAA;AAAA,MAACE,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/filter-editor/useFilterEditor.js

@@ -0,0 +1,188 @@
+'use strict';
+
+var react = require('react');
+var filterClauseFocusManagement = require('../filter-clause/filterClauseFocusManagement.js');
+var FilterModel = require('../FilterModel.js');
+
+const useFilterEditor = ({
+  columnDescriptors,
+  filter,
+  onCancel,
+  onSave
+}) => {
+  const filterModel = react.useMemo(() => {
+    return new FilterModel.FilterModel(filter);
+  }, [filter]);
+  const [_, forceRefresh] = react.useState({});
+  const [isValid, setIsValid] = react.useState(filterModel.isValid);
+  const clauseCombinatorRef = react.useRef(void 0);
+  const saveButtonRef = react.useRef(null);
+  const containerRef = react.useRef(null);
+  const setContainer = react.useCallback((el) => {
+    containerRef.current = el;
+    if (el) {
+      filterClauseFocusManagement.focusFirstClauseIfAllClausesValid(el);
+    }
+  }, []);
+  const saveButtonMenuBuilder = react.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 = react.useMemo(
+    () => columnDescriptorsByName(columnDescriptors),
+    [columnDescriptors]
+  );
+  const isLastFilterClause = react.useCallback(
+    (index) => index !== void 0 && filterModel.filterClauses.length === index + 1,
+    [filterModel]
+  );
+  react.useMemo(() => {
+    const setValid = (isValid2) => {
+      setIsValid(isValid2);
+    };
+    const valueChanged = (_filter, isValid2) => {
+      if (isValid2) {
+        const [filterClauseIndex, fieldName] = filterClauseFocusManagement.getFocusedFieldDetails();
+        if (fieldName === "value" && isLastFilterClause(filterClauseIndex)) {
+          requestAnimationFrame(() => {
+            saveButtonRef.current?.focus();
+          });
+        }
+      }
+    };
+    filterModel.on("isValid", setValid);
+    filterModel.on("filter", valueChanged);
+  }, [filterModel, isLastFilterClause]);
+  const handleCancelFilterClause = react.useCallback(
+    (filterClause, reason) => {
+      if (reason === "Backspace") {
+        const indexOfFilterClause = filterModel.filterClauses.indexOf(filterClause);
+        filterModel.removeFilterClause(filterClause);
+        forceRefresh({});
+        if (reason === "Backspace" && containerRef.current) {
+          if (indexOfFilterClause > 0) {
+            filterClauseFocusManagement.focusFilterClauseField(
+              containerRef.current,
+              indexOfFilterClause - 1
+            );
+          }
+        }
+      } else {
+        console.log(
+          `cancel because of Escape valid clause ${filterClause.isValid}`
+        );
+        onCancel(filter);
+      }
+    },
+    [filter, filterModel, onCancel]
+  );
+  const invokeMenuAction = react.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 = react.useCallback(
+    (evt) => {
+      if (evt.key === "Tab" && evt.shiftKey) {
+        evt.preventDefault();
+        const target = evt.target;
+        const filterEditor = target.closest(".vuuFilterEditor");
+        filterClauseFocusManagement.focusLastClauseValue(filterEditor);
+      } else if (evt.key === "Escape") {
+        onCancel(filter);
+      }
+    },
+    [filter, onCancel]
+  );
+  const handleKeyDownNavigationFromCombinator = react.useCallback((evt) => {
+    const { target, key, shiftKey } = evt;
+    if (key === "ArrowLeft") {
+      evt.preventDefault();
+      filterClauseFocusManagement.navigateToNextFilterClause(target, "bwd");
+    } else if (key === "ArrowRight") {
+      evt.preventDefault();
+      filterClauseFocusManagement.navigateToNextFilterClause(target, "fwd");
+    } else if (key === "Tab" && shiftKey) {
+      evt.preventDefault();
+      filterClauseFocusManagement.navigateToNextFilterClause(target, "bwd");
+    }
+  }, []);
+  const handleClickSaveButton = react.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 = react.useCallback(
+    (op) => {
+      filterModel.setOp(op);
+      clauseCombinatorRef.current = op;
+      forceRefresh({});
+    },
+    [filterModel]
+  );
+  const handleCancelFilterEdit = react.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 }), {});
+}
+
+exports.useFilterEditor = useFilterEditor;
+//# sourceMappingURL=useFilterEditor.js.map

package/cjs/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":["useMemo","FilterModel","useState","useRef","useCallback","focusFirstClauseIfAllClausesValid","_","isValid","getFocusedFieldDetails","focusFilterClauseField","focusLastClauseValue","navigateToNextFilterClause"],"mappings":"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"}

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

@@ -0,0 +1,6 @@
+'use strict';
+
+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";
+
+module.exports = filterInputCss;
+//# sourceMappingURL=FilterInput.css.js.map

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

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

package/cjs/filter-input/FilterInput.js

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

package/cjs/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":["useWindow","useComponentCssInjection","filterInputCss","useCodeMirrorEditor","jsxs","jsx","Button"],"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,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,kBAAA;AAAA,IACR,GAAK,EAAAC,aAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,SAAA,EAAW,UAAW,EAAA,GAAIC,uCAAoB,CAAA;AAAA,IACpD,cAAA;AAAA,IACA,cAAA;AAAA,IACA,kBAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA,EAAK,GAAG,KAAA,EAAO,WAAW,SACzB,EAAA,QAAA,EAAA;AAAA,oBAAAC,cAAA;AAAA,MAACC,WAAA;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,mCACC,KAAI,EAAA,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,OAAA,CAAA,EAAW,KAAK,SAAW,EAAA,CAAA;AAAA,oBACvDD,cAAA;AAAA,MAACC,WAAA;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/cjs/filter-input/FilterLanguage.js

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

package/cjs/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":["LRLanguage","parser","styleTags","tag","LanguageSupport"],"mappings":";;;;;AAQA,MAAM,cAAA,GAAiBA,yBAAW,MAAO,CAAA;AAAA,EACvC,IAAM,EAAA,gBAAA;AAAA,EACN,MAAA,EAAQC,uBAAO,SAAU,CAAA;AAAA,IACvB,KAAO,EAAA;AAAA,MACLC,uBAAU,CAAA;AAAA,QACR,YAAYC,kBAAI,CAAA,YAAA;AAAA,QAChB,QAAQA,kBAAI,CAAA,MAAA;AAAA,QACZ,IAAIA,kBAAI,CAAA,QAAA;AAAA,QACR,UAAUA,kBAAI,CAAA,QAAA;AAAA,OACf,CAAA;AAAA,KACH;AAAA,GACD,CAAA;AACH,CAAC,CAAA,CAAA;AAEM,MAAM,wBAAwB,MAAM;AACzC,EAAO,OAAA,IAAIC,8BAAgB,cAAc,CAAA,CAAA;AAC3C;;;;"}

package/cjs/filter-input/filterInfo.js

@@ -0,0 +1,17 @@
+'use strict';
+
+var vuuUtils = require('@vuu-ui/vuu-utils');
+
+const filterInfo = (filterName, filterQuery) => {
+  const rootElement = vuuUtils.createEl("div", "vuuFunctionDoc");
+  const headingElement = vuuUtils.createEl("div", "function-heading");
+  const nameElement = vuuUtils.createEl("span", "function-name", filterName);
+  headingElement.appendChild(nameElement);
+  const child2 = vuuUtils.createEl("p", void 0, filterQuery);
+  rootElement.appendChild(headingElement);
+  rootElement.appendChild(child2);
+  return rootElement;
+};
+
+exports.filterInfo = filterInfo;
+//# sourceMappingURL=filterInfo.js.map

package/cjs/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":["createEl"],"mappings":";;;;AAEa,MAAA,UAAA,GAAa,CACxB,UAAA,EACA,WAEG,KAAA;AACH,EAAM,MAAA,WAAA,GAAcA,iBAAS,CAAA,KAAA,EAAO,gBAAgB,CAAA,CAAA;AACpD,EAAM,MAAA,cAAA,GAAiBA,iBAAS,CAAA,KAAA,EAAO,kBAAkB,CAAA,CAAA;AAEzD,EAAA,MAAM,WAAc,GAAAA,iBAAA,CAAS,MAAQ,EAAA,eAAA,EAAiB,UAAU,CAAA,CAAA;AAIhE,EAAA,cAAA,CAAe,YAAY,WAAW,CAAA,CAAA;AAItC,EAAA,MAAM,MAAS,GAAAA,iBAAA,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/cjs/filter-input/highlighting.js

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

package/cjs/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":["HighlightStyle","tags","syntaxHighlighting"],"mappings":";;;;AAMA,MAAM,gBAAA,GAAmBA,6BAAe,MAAO,CAAA;AAAA,EAC7C,EAAE,GAAA,EAAKC,kBAAK,CAAA,YAAA,EAAc,OAAO,sCAAuC,EAAA;AAAA,EACxE,EAAE,GAAK,EAAAA,kBAAA,CAAK,SAAS,KAAO,EAAA,OAAA,EAAS,WAAW,QAAS,EAAA;AAC3D,CAAC,CAAA,CAAA;AAEY,MAAA,eAAA,GAAkBC,iCAAmB,gBAAgB;;;;"}

package/cjs/filter-input/theme.js

@@ -0,0 +1,79 @@
+'use strict';
+
+var vuuCodemirror = require('@vuu-ui/vuu-codemirror');
+
+const vuuTheme = vuuCodemirror.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 }
+);
+
+exports.vuuTheme = vuuTheme;
+//# sourceMappingURL=theme.js.map

package/cjs/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":["EditorView"],"mappings":";;;;AAEO,MAAM,WAAWA,wBAAW,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;;;;"}