@vuu-ui/vuu-filters 2.1.19-beta.2 → 2.1.19-beta.4

package/cjs/filter-clause/column-picker/ColumnPicker.js

@@ -0,0 +1,39 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var ExpandoCombobox = require('../ExpandoCombobox.js');
+var core = require('@salt-ds/core');
+var react = require('react');
+var useColumnPicker = require('./useColumnPicker.js');
+
+const ColumnPicker = react.forwardRef(function ColumnPicker2({
+  className,
+  columns,
+  dropdownOnAutofocus = true,
+  inputProps,
+  onSelect,
+  value: valueProp
+}, forwardedRef) {
+  const { ref, ...comboProps } = useColumnPicker.useColumnPicker({
+    onSelect,
+    value: valueProp?.toString() ?? ""
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ExpandoCombobox.ExpandoCombobox,
+    {
+      ...comboProps,
+      className,
+      "data-field": "column",
+      dropdownOnAutofocus,
+      inputProps,
+      ref: core.useForkRef(forwardedRef, ref),
+      title: "column",
+      children: columns.filter(
+        ({ name }) => name.toLowerCase().includes(comboProps.value.toLowerCase())
+      ).map(({ name, label = name }) => /* @__PURE__ */ jsxRuntime.jsx(core.Option, { value: name, children: label }, name))
+    }
+  );
+});
+
+exports.ColumnPicker = ColumnPicker;
+//# sourceMappingURL=ColumnPicker.js.map

package/cjs/filter-clause/column-picker/ColumnPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnPicker.js","sources":["../../../../../packages/vuu-filters/src/filter-clause/column-picker/ColumnPicker.tsx"],"sourcesContent":["import type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { ExpandoCombobox } from \"../ExpandoCombobox\";\nimport { ComboBoxProps, Option, useForkRef } from \"@salt-ds/core\";\nimport { ForwardedRef, SyntheticEvent, forwardRef } from \"react\";\nimport { useColumnPicker } from \"./useColumnPicker\";\n\nexport type ColumnPickerProps = Pick<\n  ComboBoxProps,\n  \"className\" | \"inputProps\" | \"value\"\n> & {\n  columns: readonly ColumnDescriptor[];\n  onSelect: (evt: SyntheticEvent, columnName: string) => void;\n  dropdownOnAutofocus?: boolean;\n};\n\nexport const ColumnPicker = forwardRef(function ColumnPicker(\n  {\n    className,\n    columns,\n    dropdownOnAutofocus = true,\n    inputProps,\n    onSelect,\n    value: valueProp,\n  }: ColumnPickerProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  const { ref, ...comboProps } = useColumnPicker({\n    onSelect,\n    value: valueProp?.toString() ?? \"\",\n  });\n\n  return (\n    <ExpandoCombobox\n      {...comboProps}\n      className={className}\n      data-field=\"column\"\n      dropdownOnAutofocus={dropdownOnAutofocus}\n      inputProps={inputProps}\n      ref={useForkRef(forwardedRef, ref)}\n      title=\"column\"\n    >\n      {columns\n        .filter(({ name }) =>\n          name.toLowerCase().includes(comboProps.value.toLowerCase()),\n        )\n        .map(({ name, label = name }) => (\n          <Option value={name} key={name}>\n            {label}\n          </Option>\n        ))}\n    </ExpandoCombobox>\n  );\n});\n"],"names":["forwardRef","ColumnPicker","useColumnPicker","jsx","ExpandoCombobox","useForkRef","Option"],"mappings":";;;;;;;;AAea,MAAA,YAAA,GAAeA,gBAAW,CAAA,SAASC,aAC9C,CAAA;AAAA,EACE,SAAA;AAAA,EACA,OAAA;AAAA,EACA,mBAAsB,GAAA,IAAA;AAAA,EACtB,UAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAO,EAAA;AACT,CAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,EAAE,GAAA,EAAK,GAAG,UAAA,KAAeC,+BAAgB,CAAA;AAAA,IAC7C,QAAA;AAAA,IACA,KAAA,EAAO,SAAW,EAAA,QAAA,EAAc,IAAA;AAAA,GACjC,CAAA;AAED,EACE,uBAAAC,cAAA;AAAA,IAACC,+BAAA;AAAA,IAAA;AAAA,MACE,GAAG,UAAA;AAAA,MACJ,SAAA;AAAA,MACA,YAAW,EAAA,QAAA;AAAA,MACX,mBAAA;AAAA,MACA,UAAA;AAAA,MACA,GAAA,EAAKC,eAAW,CAAA,YAAA,EAAc,GAAG,CAAA;AAAA,MACjC,KAAM,EAAA,QAAA;AAAA,MAEL,QACE,EAAA,OAAA,CAAA,MAAA;AAAA,QAAO,CAAC,EAAE,IAAA,EACT,KAAA,IAAA,CAAK,WAAY,EAAA,CAAE,QAAS,CAAA,UAAA,CAAW,KAAM,CAAA,WAAA,EAAa;AAAA,OAE3D,CAAA,GAAA,CAAI,CAAC,EAAE,MAAM,KAAQ,GAAA,IAAA,EACpB,qBAAAF,cAAA,CAACG,WAAO,EAAA,EAAA,KAAA,EAAO,IACZ,EAAA,QAAA,EAAA,KAAA,EAAA,EADuB,IAE1B,CACD;AAAA;AAAA,GACL;AAEJ,CAAC;;;;"}

package/cjs/filter-clause/column-picker/useColumnPicker.js

@@ -0,0 +1,61 @@
+'use strict';
+
+var react = require('react');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+
+const useColumnPicker = ({
+  onSelect,
+  value: valueProp
+}) => {
+  const ref = react.useRef(null);
+  const openRef = react.useRef(false);
+  const [value, setValue] = react.useState(valueProp);
+  const highlightFirstOption = react.useCallback(() => {
+    if (ref.current) {
+      const input = ref.current?.querySelector(
+        'input[role="combobox"]'
+      );
+      if (input) {
+        requestAnimationFrame(() => {
+          vuuUtils.dispatchKeyboardEvent(input, "keydown", "ArrowDown");
+        });
+      }
+    }
+  }, []);
+  const handleChange = react.useCallback(
+    (event) => {
+      const value2 = event.target.value;
+      setValue(value2);
+      if (openRef.current && value2 === "") {
+        highlightFirstOption();
+      }
+    },
+    [highlightFirstOption]
+  );
+  const handleSelectionChange = react.useCallback(
+    (evt, [newSelected]) => {
+      onSelect?.(evt, newSelected);
+      setValue(newSelected ?? "");
+    },
+    [onSelect]
+  );
+  const handleOpenChange = react.useCallback(
+    (isOpen, reason) => {
+      openRef.current = isOpen;
+      if (isOpen && reason === "focus") {
+        highlightFirstOption();
+      }
+    },
+    [highlightFirstOption]
+  );
+  return {
+    onChange: handleChange,
+    onOpenChange: handleOpenChange,
+    onSelectionChange: handleSelectionChange,
+    ref,
+    value: value.toString().trim()
+  };
+};
+
+exports.useColumnPicker = useColumnPicker;
+//# sourceMappingURL=useColumnPicker.js.map

package/cjs/filter-clause/column-picker/useColumnPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useColumnPicker.js","sources":["../../../../../packages/vuu-filters/src/filter-clause/column-picker/useColumnPicker.ts"],"sourcesContent":["import {\n  ChangeEvent,\n  SyntheticEvent,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport { dispatchKeyboardEvent } from \"@vuu-ui/vuu-utils\";\n\nexport const useColumnPicker = ({\n  onSelect,\n  value: valueProp,\n}: {\n  onSelect: (evt: SyntheticEvent, columnName: string) => void;\n  value: string;\n}) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const openRef = useRef(false);\n  const [value, setValue] = useState(valueProp);\n\n  const highlightFirstOption = useCallback(() => {\n    if (ref.current) {\n      const input = ref.current?.querySelector<HTMLInputElement>(\n        'input[role=\"combobox\"]',\n      );\n      if (input) {\n        requestAnimationFrame(() => {\n          dispatchKeyboardEvent(input, \"keydown\", \"ArrowDown\");\n        });\n      }\n    }\n  }, []);\n\n  const handleChange = useCallback(\n    (event: ChangeEvent<HTMLInputElement>) => {\n      const value = event.target.value;\n      setValue(value);\n      if (openRef.current && value === \"\") {\n        highlightFirstOption();\n      }\n    },\n    [highlightFirstOption],\n  );\n\n  const handleSelectionChange = useCallback(\n    (evt: SyntheticEvent, [newSelected]: string[]) => {\n      onSelect?.(evt, newSelected);\n      setValue(newSelected ?? \"\");\n    },\n    [onSelect],\n  );\n\n  const handleOpenChange = useCallback(\n    (isOpen: boolean, reason?: \"manual\" | \"input\" | \"focus\") => {\n      openRef.current = isOpen;\n      if (isOpen && reason === \"focus\") {\n        highlightFirstOption();\n      }\n    },\n    [highlightFirstOption],\n  );\n\n  return {\n    onChange: handleChange,\n    onOpenChange: handleOpenChange,\n    onSelectionChange: handleSelectionChange,\n    ref,\n    value: value.toString().trim(),\n  };\n};\n"],"names":["useRef","useState","useCallback","dispatchKeyboardEvent","value"],"mappings":";;;;;AASO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,QAAA;AAAA,EACA,KAAO,EAAA;AACT,CAGM,KAAA;AACJ,EAAM,MAAA,GAAA,GAAMA,aAAuB,IAAI,CAAA;AACvC,EAAM,MAAA,OAAA,GAAUA,aAAO,KAAK,CAAA;AAC5B,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIC,eAAS,SAAS,CAAA;AAE5C,EAAM,MAAA,oBAAA,GAAuBC,kBAAY,MAAM;AAC7C,IAAA,IAAI,IAAI,OAAS,EAAA;AACf,MAAM,MAAA,KAAA,GAAQ,IAAI,OAAS,EAAA,aAAA;AAAA,QACzB;AAAA,OACF;AACA,MAAA,IAAI,KAAO,EAAA;AACT,QAAA,qBAAA,CAAsB,MAAM;AAC1B,UAAsBC,8BAAA,CAAA,KAAA,EAAO,WAAW,WAAW,CAAA;AAAA,SACpD,CAAA;AAAA;AACH;AACF,GACF,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,YAAe,GAAAD,iBAAA;AAAA,IACnB,CAAC,KAAyC,KAAA;AACxC,MAAME,MAAAA,MAAAA,GAAQ,MAAM,MAAO,CAAA,KAAA;AAC3B,MAAA,QAAA,CAASA,MAAK,CAAA;AACd,MAAI,IAAA,OAAA,CAAQ,OAAWA,IAAAA,MAAAA,KAAU,EAAI,EAAA;AACnC,QAAqB,oBAAA,EAAA;AAAA;AACvB,KACF;AAAA,IACA,CAAC,oBAAoB;AAAA,GACvB;AAEA,EAAA,MAAM,qBAAwB,GAAAF,iBAAA;AAAA,IAC5B,CAAC,GAAA,EAAqB,CAAC,WAAW,CAAgB,KAAA;AAChD,MAAA,QAAA,GAAW,KAAK,WAAW,CAAA;AAC3B,MAAA,QAAA,CAAS,eAAe,EAAE,CAAA;AAAA,KAC5B;AAAA,IACA,CAAC,QAAQ;AAAA,GACX;AAEA,EAAA,MAAM,gBAAmB,GAAAA,iBAAA;AAAA,IACvB,CAAC,QAAiB,MAA0C,KAAA;AAC1D,MAAA,OAAA,CAAQ,OAAU,GAAA,MAAA;AAClB,MAAI,IAAA,MAAA,IAAU,WAAW,OAAS,EAAA;AAChC,QAAqB,oBAAA,EAAA;AAAA;AACvB,KACF;AAAA,IACA,CAAC,oBAAoB;AAAA,GACvB;AAEA,EAAO,OAAA;AAAA,IACL,QAAU,EAAA,YAAA;AAAA,IACV,YAAc,EAAA,gBAAA;AAAA,IACd,iBAAmB,EAAA,qBAAA;AAAA,IACnB,GAAA;AAAA,IACA,KAAO,EAAA,KAAA,CAAM,QAAS,EAAA,CAAE,IAAK;AAAA,GAC/B;AACF;;;;"}

package/cjs/filter-clause/filterClauseFocusManagement.js

@@ -0,0 +1,204 @@
+'use strict';
+
+var vuuUtils = require('@vuu-ui/vuu-utils');
+
+const getFilterClauseElement = (possiblyDescendant) => possiblyDescendant?.closest(".vuuFilterClause");
+const getFilterClauseFieldElement = (possiblyDescendant) => possiblyDescendant?.closest(".vuuFilterClauseField");
+const mapFilterFieldToClassName = {
+  column: "vuuFilterClauseColumn",
+  operator: "vuuFilterClauseOperator",
+  value: "vuuFilterClauseValue"
+};
+const getFilterClauseDetails = ({ classList }) => {
+  if (classList.contains("vuuFilterClauseColumn")) {
+    return "column";
+  } else if (classList.contains("vuuFilterClauseOperator")) {
+    return "operator";
+  } else if (classList.contains("vuuFilterClauseValue")) {
+    return "value";
+  } else {
+    throw Error(
+      "getFilterClauseField, filterClauseElemnent is missing required class name"
+    );
+  }
+};
+const getFocusedFieldDetails = () => {
+  const el = document.activeElement;
+  const field = vuuUtils.queryClosest(el, ".vuuFilterClauseField,.saltCalendar");
+  if (field?.matches(".vuuFilterClauseField")) {
+    const filterClause = vuuUtils.queryClosest(field, ".vuuFilterClause");
+    if (filterClause && field) {
+      return [vuuUtils.getElementDataIndex(filterClause), getFilterClauseDetails(field)];
+    }
+  } else if (field?.matches(".saltCalendar")) {
+    console.log("its in a calendar");
+  }
+  return [];
+};
+const focusField = (fieldOrClause) => {
+  const input = fieldOrClause?.querySelector("input");
+  if (input) {
+    input.focus();
+    requestAnimationFrame(() => {
+      input?.select();
+    });
+  }
+};
+const elementIsFilterCombinator = (element) => element !== null && element.classList.contains("vuuFilterClauseCombinator");
+const elementIsFilterClause = (element) => element !== null && element.classList.contains("vuuFilterClause");
+const focusFilterClauseField = (filterEditor, filterClauseIndex, fieldName = "value") => {
+  if (filterEditor) {
+    const fieldClassName = mapFilterFieldToClassName[fieldName];
+    const field = filterEditor.querySelector(
+      `.vuuFilterClause[data-index="${filterClauseIndex}"] .${fieldClassName}`
+    );
+    focusField(field);
+  }
+};
+const focusLastClauseValue = (filterEditor) => {
+  const field = Array.from(
+    filterEditor?.querySelectorAll(".vuuFilterClauseField")
+  ).at(-1);
+  focusField(field);
+};
+const focusNextFocusableElement = (direction = "fwd") => {
+  const activeField = getFocusedField();
+  const filterClause = getFilterClauseElement(activeField);
+  if (direction === "fwd" && filterClause?.lastChild === activeField) {
+    requestAnimationFrame(() => {
+      focusNextFocusableElement();
+    });
+  } else {
+    const nextField = direction === "fwd" ? activeField?.nextElementSibling : activeField?.previousElementSibling;
+    nextField?.querySelector("input")?.focus();
+  }
+};
+const getFocusedField = () => {
+  const activeElement = document.activeElement;
+  if (activeElement?.classList.contains("vuuFilterClause-clearButton")) {
+    return activeElement;
+  } else {
+    return getFilterClauseFieldElement(activeElement);
+  }
+};
+const focusNextElement = () => {
+  const filterClauseField = getFocusedField();
+  const filterClause = getFilterClauseElement(filterClauseField);
+  if (filterClause && filterClauseField) {
+    if (filterClauseField.classList.contains("vuuFilterClauseValue")) {
+      const clearButton = filterClause.querySelector(
+        ".vuuFilterClause-clearButton"
+      );
+      clearButton?.focus();
+    } else {
+      focusNextFocusableElement();
+    }
+  }
+};
+const cursorAtTextStart = (input) => input.selectionStart === 0;
+const cursorAtTextEnd = (input) => input.selectionStart === input.value.length;
+const getFieldName = (field) => field?.classList.contains("vuuFilterClauseColumn") ? "column" : field?.classList.contains("vuuFilterClauseOperator") ? "operator" : "value";
+const clauseIsNotFirst = (el) => {
+  const clause = getFilterClauseElement(el);
+  if (clause) {
+    const index = vuuUtils.getElementDataIndex(clause);
+    return index > 0;
+  }
+};
+const clauseIsNotLast = (el) => {
+  const clause = getFilterClauseElement(el);
+  const nextClause = clause?.nextElementSibling;
+  return nextClause?.classList.contains("vuuFilterClauseCombinator");
+};
+const tabToPreviousFilterCombinator = (currentElement) => {
+  const filterClause = getFilterClauseElement(currentElement);
+  const nextItem = filterClause.previousSibling;
+  console.log(`tab to previous combinator`);
+  nextItem?.focus();
+};
+const navigateToNextFilterClause = (currentElement, direction = "fwd") => {
+  if (direction === "bwd") {
+    if (elementIsFilterCombinator(currentElement)) {
+      const nextClause = currentElement.previousElementSibling;
+      if (elementIsFilterClause(nextClause)) {
+        const nextField = nextClause.querySelector(
+          ".vuuFilterClauseValue"
+        );
+        console.log(`focus field Value ${nextField?.classList}`);
+        focusField(nextField);
+      }
+    } else {
+      const filterClause = getFilterClauseElement(currentElement);
+      const nextClause = filterClause.previousSibling;
+      const nextField = nextClause.querySelector(
+        ".vuuFilterClauseValue"
+      );
+      focusField(nextField);
+    }
+  } else {
+    const nextClause = currentElement.nextSibling;
+    focusField(nextClause);
+  }
+};
+const navigateToNextItemIfAtBoundary = (evt) => {
+  const input = evt.target;
+  const field = getFilterClauseFieldElement(input);
+  if (evt.key === "ArrowLeft") {
+    if (cursorAtTextStart(input)) {
+      const fieldName = getFieldName(field);
+      if (fieldName === "column") {
+        if (clauseIsNotFirst(input)) {
+          const filterClause = getFilterClauseElement(field);
+          const combinator = filterClause.previousElementSibling;
+          combinator?.focus();
+        }
+      } else {
+        evt.preventDefault();
+        focusField(field.previousSibling);
+      }
+    }
+    evt.stopPropagation();
+  } else if (evt.key === "ArrowRight") {
+    if (cursorAtTextEnd(input)) {
+      const fieldName = getFieldName(field);
+      if (fieldName === "value") {
+        if (clauseIsNotLast(input)) {
+          const filterClause = getFilterClauseElement(field);
+          const combinator = filterClause.nextElementSibling;
+          combinator?.focus();
+        }
+        return;
+      } else {
+        evt.preventDefault();
+        focusField(field.nextSibling);
+      }
+    }
+    evt.stopPropagation();
+  }
+};
+const focusFirstClauseIfAllClausesValid = (filterEditor) => {
+  const columInput = Array.from(
+    filterEditor.querySelectorAll(".vuuFilterClauseColumn input")
+  );
+  if (columInput.every((input) => input.value.length > 0)) {
+    setTimeout(() => {
+      const input = columInput.at(0);
+      input?.select();
+      input?.focus();
+    }, 100);
+  }
+};
+
+exports.clauseIsNotFirst = clauseIsNotFirst;
+exports.elementIsFilterClause = elementIsFilterClause;
+exports.elementIsFilterCombinator = elementIsFilterCombinator;
+exports.focusFilterClauseField = focusFilterClauseField;
+exports.focusFirstClauseIfAllClausesValid = focusFirstClauseIfAllClausesValid;
+exports.focusLastClauseValue = focusLastClauseValue;
+exports.focusNextElement = focusNextElement;
+exports.focusNextFocusableElement = focusNextFocusableElement;
+exports.getFocusedFieldDetails = getFocusedFieldDetails;
+exports.navigateToNextFilterClause = navigateToNextFilterClause;
+exports.navigateToNextItemIfAtBoundary = navigateToNextItemIfAtBoundary;
+exports.tabToPreviousFilterCombinator = tabToPreviousFilterCombinator;
+//# sourceMappingURL=filterClauseFocusManagement.js.map

package/cjs/filter-clause/filterClauseFocusManagement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filterClauseFocusManagement.js","sources":["../../../../packages/vuu-filters/src/filter-clause/filterClauseFocusManagement.ts"],"sourcesContent":["import { getElementDataIndex, queryClosest } from \"@vuu-ui/vuu-utils\";\nimport { KeyboardEvent } from \"react\";\n\nconst getFilterClauseElement = (possiblyDescendant?: HTMLElement) =>\n  possiblyDescendant?.closest(\".vuuFilterClause\") as HTMLElement;\n\nconst getFilterClauseFieldElement = (possiblyDescendant?: HTMLElement) =>\n  possiblyDescendant?.closest(\".vuuFilterClauseField\") as HTMLElement;\n\ntype FilterClauseFieldName = \"column\" | \"operator\" | \"value\";\nconst mapFilterFieldToClassName: Record<FilterClauseFieldName, string> = {\n  column: \"vuuFilterClauseColumn\",\n  operator: \"vuuFilterClauseOperator\",\n  value: \"vuuFilterClauseValue\",\n};\n\nconst getFilterClauseDetails = ({ classList }: HTMLElement) => {\n  if (classList.contains(\"vuuFilterClauseColumn\")) {\n    return \"column\";\n  } else if (classList.contains(\"vuuFilterClauseOperator\")) {\n    return \"operator\";\n  } else if (classList.contains(\"vuuFilterClauseValue\")) {\n    return \"value\";\n  } else {\n    throw Error(\n      \"getFilterClauseField, filterClauseElemnent is missing required class name\",\n    );\n  }\n};\n\nexport const getFocusedFieldDetails = (): [number, string] | [] => {\n  const el = document.activeElement as HTMLElement;\n  const field = queryClosest(el, \".vuuFilterClauseField,.saltCalendar\");\n  if (field?.matches(\".vuuFilterClauseField\")) {\n    const filterClause = queryClosest(field, \".vuuFilterClause\");\n    if (filterClause && field) {\n      return [getElementDataIndex(filterClause), getFilterClauseDetails(field)];\n    }\n  } else if (field?.matches(\".saltCalendar\")) {\n    console.log(\"its in a calendar\");\n  }\n  // const filterClause = queryClosest(field, \".vuuFilterClause\");\n  // if (filterClause && field) {\n  //   return [getElementDataIndex(filterClause), getFilterClauseDetails(field)];\n  // } else {\n  return [];\n  // }\n};\n\n// Focus the input control within field. If clause passed, will\n// focus first field within clause\nconst focusField = (fieldOrClause: HTMLElement | null) => {\n  const input = fieldOrClause?.querySelector(\"input\");\n  if (input) {\n    input.focus();\n    requestAnimationFrame(() => {\n      input?.select();\n    });\n  }\n};\n\nexport const elementIsFilterCombinator = (\n  element: Element | null,\n): element is HTMLElement =>\n  element !== null && element.classList.contains(\"vuuFilterClauseCombinator\");\n\nexport const elementIsFilterClause = (\n  element: Element | null,\n): element is HTMLElement =>\n  element !== null && element.classList.contains(\"vuuFilterClause\");\n\nexport const focusFilterClauseField = (\n  filterEditor: HTMLElement,\n  filterClauseIndex: number,\n  fieldName: FilterClauseFieldName = \"value\",\n) => {\n  if (filterEditor) {\n    const fieldClassName = mapFilterFieldToClassName[fieldName];\n    const field = filterEditor.querySelector(\n      `.vuuFilterClause[data-index=\"${filterClauseIndex}\"] .${fieldClassName}`,\n    ) as HTMLElement;\n    focusField(field);\n  }\n};\n\nexport const focusLastClauseValue = (filterEditor: HTMLElement) => {\n  const field = Array.from(\n    filterEditor?.querySelectorAll(\".vuuFilterClauseField\"),\n  ).at(-1) as HTMLElement;\n  focusField(field);\n};\n\nexport const focusNextFocusableElement = (direction: \"fwd\" | \"bwd\" = \"fwd\") => {\n  const activeField = getFocusedField() as HTMLElement;\n  const filterClause = getFilterClauseElement(activeField);\n  if (direction === \"fwd\" && filterClause?.lastChild === activeField) {\n    requestAnimationFrame(() => {\n      focusNextFocusableElement();\n    });\n  } else {\n    const nextField =\n      direction === \"fwd\"\n        ? (activeField?.nextElementSibling as HTMLElement)\n        : (activeField?.previousElementSibling as HTMLElement);\n\n    nextField?.querySelector(\"input\")?.focus();\n  }\n};\n\nconst getFocusedField = () => {\n  const activeElement = document.activeElement as HTMLElement;\n  if (activeElement?.classList.contains(\"vuuFilterClause-clearButton\")) {\n    return activeElement as HTMLElement;\n  } else {\n    return getFilterClauseFieldElement(activeElement);\n  }\n};\n\nexport const focusNextElement = () => {\n  const filterClauseField = getFocusedField();\n  const filterClause = getFilterClauseElement(filterClauseField);\n  if (filterClause && filterClauseField) {\n    if (filterClauseField.classList.contains(\"vuuFilterClauseValue\")) {\n      const clearButton = filterClause.querySelector(\n        \".vuuFilterClause-clearButton\",\n      ) as HTMLButtonElement;\n      clearButton?.focus();\n    } else {\n      focusNextFocusableElement();\n    }\n  }\n};\n\nconst cursorAtTextStart = (input: HTMLInputElement) =>\n  input.selectionStart === 0;\n\nconst cursorAtTextEnd = (input: HTMLInputElement) =>\n  input.selectionStart === input.value.length;\n\nconst getFieldName = (field: HTMLElement) =>\n  field?.classList.contains(\"vuuFilterClauseColumn\")\n    ? \"column\"\n    : field?.classList.contains(\"vuuFilterClauseOperator\")\n      ? \"operator\"\n      : \"value\";\n\nexport const clauseIsNotFirst = (el: HTMLElement) => {\n  const clause = getFilterClauseElement(el);\n  if (clause) {\n    const index = getElementDataIndex(clause);\n    return index > 0;\n  }\n};\n\nconst clauseIsNotLast = (el: HTMLElement) => {\n  const clause = getFilterClauseElement(el);\n  const nextClause = clause?.nextElementSibling as HTMLElement;\n  return nextClause?.classList.contains(\"vuuFilterClauseCombinator\");\n};\n\nexport const tabToPreviousFilterCombinator = (currentElement: HTMLElement) => {\n  const filterClause = getFilterClauseElement(currentElement);\n  const nextItem = filterClause.previousSibling as HTMLElement;\n  console.log(`tab to previous combinator`);\n  nextItem?.focus();\n};\n\nexport const navigateToNextFilterClause = (\n  currentElement: HTMLElement,\n  direction: \"bwd\" | \"fwd\" = \"fwd\",\n) => {\n  if (direction === \"bwd\") {\n    if (elementIsFilterCombinator(currentElement)) {\n      const nextClause = currentElement.previousElementSibling;\n      if (elementIsFilterClause(nextClause)) {\n        const nextField = nextClause.querySelector(\n          \".vuuFilterClauseValue\",\n        ) as HTMLElement;\n        console.log(`focus field Value ${nextField?.classList}`);\n        focusField(nextField);\n      }\n    } else {\n      const filterClause = getFilterClauseElement(currentElement);\n      const nextClause = filterClause.previousSibling as HTMLElement;\n      const nextField = nextClause.querySelector(\n        \".vuuFilterClauseValue\",\n      ) as HTMLElement;\n      focusField(nextField);\n    }\n  } else {\n    const nextClause = currentElement.nextSibling as HTMLElement;\n    focusField(nextClause);\n  }\n};\n\n// The logic around preventDefault/stopPropagation is important\n// in this function\nexport const navigateToNextItemIfAtBoundary = (\n  evt: KeyboardEvent<HTMLInputElement>,\n) => {\n  const input = evt.target as HTMLInputElement;\n  const field = getFilterClauseFieldElement(input);\n  if (evt.key === \"ArrowLeft\") {\n    if (cursorAtTextStart(input)) {\n      const fieldName = getFieldName(field);\n      if (fieldName === \"column\") {\n        if (clauseIsNotFirst(input)) {\n          const filterClause = getFilterClauseElement(field);\n          const combinator = filterClause.previousElementSibling as HTMLElement;\n          combinator?.focus();\n        }\n      } else {\n        evt.preventDefault();\n        focusField(field.previousSibling as HTMLElement);\n      }\n    }\n    // stopPropagation, even if cursor is not at start. We want the arrowLeft to move the cursor\n    evt.stopPropagation();\n  } else if (evt.key === \"ArrowRight\") {\n    if (cursorAtTextEnd(input as HTMLInputElement)) {\n      const fieldName = getFieldName(field);\n      if (fieldName === \"value\") {\n        if (clauseIsNotLast(input)) {\n          const filterClause = getFilterClauseElement(field);\n          const combinator = filterClause.nextElementSibling as HTMLElement;\n          combinator?.focus();\n        }\n        // Do not preventDefault, stopPropagation\n        return;\n      } else {\n        evt.preventDefault();\n        focusField(field.nextSibling as HTMLElement);\n      }\n    }\n    // stopPropagation, even if cursor is not at end. We want the arrowRight to move the cursor\n    evt.stopPropagation();\n  }\n};\n\nexport const focusFirstClauseIfAllClausesValid = (\n  filterEditor: HTMLElement,\n) => {\n  const columInput = Array.from(\n    filterEditor.querySelectorAll(\".vuuFilterClauseColumn input\"),\n  ) as HTMLInputElement[];\n  if (columInput.every((input) => input.value.length > 0)) {\n    setTimeout(() => {\n      const input = columInput.at(0);\n      input?.select();\n      input?.focus();\n    }, 100);\n  }\n};\n"],"names":["queryClosest","getElementDataIndex"],"mappings":"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"}

package/cjs/filter-clause/operator-picker/OperatorPicker.js

@@ -0,0 +1,40 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var react = require('react');
+var ExpandoCombobox = require('../ExpandoCombobox.js');
+var operatorUtils = require('./operator-utils.js');
+var useOperatorPicker = require('./useOperatorPicker.js');
+
+const OperatorPicker = react.forwardRef(function OperatorPicker2({
+  className,
+  column,
+  dropdownOnAutofocus = true,
+  inputProps,
+  onSelect,
+  value: valueProp
+}, forwardedRef) {
+  const { ref, ...comboProps } = useOperatorPicker.useOperatorPicker({
+    onSelect,
+    value: valueProp?.toString() ?? ""
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ExpandoCombobox.ExpandoCombobox,
+    {
+      ...comboProps,
+      className,
+      "data-field": "operator",
+      dropdownOnAutofocus,
+      inputProps,
+      ref: core.useForkRef(forwardedRef, ref),
+      title: "operator",
+      children: operatorUtils.getOperators(column).filter(
+        (op) => op.toLowerCase().includes(comboProps.value.toLowerCase())
+      ).map((op) => /* @__PURE__ */ jsxRuntime.jsx(core.Option, { value: op }, op))
+    }
+  );
+});
+
+exports.OperatorPicker = OperatorPicker;
+//# sourceMappingURL=OperatorPicker.js.map

package/cjs/filter-clause/operator-picker/OperatorPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OperatorPicker.js","sources":["../../../../../packages/vuu-filters/src/filter-clause/operator-picker/OperatorPicker.tsx"],"sourcesContent":["import type { FilterClauseOp } from \"@vuu-ui/vuu-filter-types\";\nimport type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { ComboBoxProps, Option, useForkRef } from \"@salt-ds/core\";\nimport { ForwardedRef, SyntheticEvent, forwardRef } from \"react\";\nimport { ExpandoCombobox } from \"../ExpandoCombobox\";\nimport { getOperators } from \"./operator-utils\";\nimport { useOperatorPicker } from \"./useOperatorPicker\";\n\nexport type OperatorPickerProps = Pick<\n  ComboBoxProps,\n  \"className\" | \"inputProps\" | \"value\"\n> & {\n  column: ColumnDescriptor;\n  onSelect: (evt: SyntheticEvent, operator: FilterClauseOp) => void;\n  dropdownOnAutofocus?: boolean;\n};\n\nexport const OperatorPicker = forwardRef(function OperatorPicker(\n  {\n    className,\n    column,\n    dropdownOnAutofocus = true,\n    inputProps,\n    onSelect,\n    value: valueProp,\n  }: OperatorPickerProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  const { ref, ...comboProps } = useOperatorPicker({\n    onSelect,\n    value: valueProp?.toString() ?? \"\",\n  });\n\n  return (\n    <ExpandoCombobox<FilterClauseOp>\n      {...comboProps}\n      className={className}\n      data-field=\"operator\"\n      dropdownOnAutofocus={dropdownOnAutofocus}\n      inputProps={inputProps}\n      ref={useForkRef(forwardedRef, ref)}\n      title=\"operator\"\n    >\n      {getOperators(column)\n        .filter((op) =>\n          op.toLowerCase().includes(comboProps.value.toLowerCase()),\n        )\n        .map((op) => (\n          <Option value={op} key={op} />\n        ))}\n    </ExpandoCombobox>\n  );\n});\n"],"names":["forwardRef","OperatorPicker","useOperatorPicker","jsx","ExpandoCombobox","useForkRef","getOperators","Option"],"mappings":";;;;;;;;;AAiBa,MAAA,cAAA,GAAiBA,gBAAW,CAAA,SAASC,eAChD,CAAA;AAAA,EACE,SAAA;AAAA,EACA,MAAA;AAAA,EACA,mBAAsB,GAAA,IAAA;AAAA,EACtB,UAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAO,EAAA;AACT,CAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,EAAE,GAAA,EAAK,GAAG,UAAA,KAAeC,mCAAkB,CAAA;AAAA,IAC/C,QAAA;AAAA,IACA,KAAA,EAAO,SAAW,EAAA,QAAA,EAAc,IAAA;AAAA,GACjC,CAAA;AAED,EACE,uBAAAC,cAAA;AAAA,IAACC,+BAAA;AAAA,IAAA;AAAA,MACE,GAAG,UAAA;AAAA,MACJ,SAAA;AAAA,MACA,YAAW,EAAA,UAAA;AAAA,MACX,mBAAA;AAAA,MACA,UAAA;AAAA,MACA,GAAA,EAAKC,eAAW,CAAA,YAAA,EAAc,GAAG,CAAA;AAAA,MACjC,KAAM,EAAA,UAAA;AAAA,MAEL,QAAA,EAAAC,0BAAA,CAAa,MAAM,CACjB,CAAA,MAAA;AAAA,QAAO,CAAC,OACP,EAAG,CAAA,WAAA,GAAc,QAAS,CAAA,UAAA,CAAW,KAAM,CAAA,WAAA,EAAa;AAAA,OAC1D,CACC,IAAI,CAAC,EAAA,oCACHC,WAAO,EAAA,EAAA,KAAA,EAAO,EAAS,EAAA,EAAA,EAAI,CAC7B;AAAA;AAAA,GACL;AAEJ,CAAC;;;;"}

package/cjs/filter-clause/operator-picker/operator-utils.js

@@ -0,0 +1,34 @@
+'use strict';
+
+var vuuUtils = require('@vuu-ui/vuu-utils');
+
+const textOperators = [
+  "=",
+  "in",
+  "!=",
+  "starts",
+  "ends",
+  "contains"
+];
+const numericOperators = [
+  "=",
+  "!=",
+  ">",
+  ">=",
+  "<",
+  "<="
+];
+const getOperators = (column) => {
+  if (vuuUtils.isTextColumn(column)) {
+    return textOperators;
+  } else if (vuuUtils.isNumericColumn(column) || vuuUtils.isTimestampColumn(column)) {
+    return numericOperators;
+  } else {
+    throw Error("getOperators only supports text and numeric columns");
+  }
+};
+
+exports.getOperators = getOperators;
+exports.numericOperators = numericOperators;
+exports.textOperators = textOperators;
+//# sourceMappingURL=operator-utils.js.map

package/cjs/filter-clause/operator-picker/operator-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"operator-utils.js","sources":["../../../../../packages/vuu-filters/src/filter-clause/operator-picker/operator-utils.ts"],"sourcesContent":["import type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n  isNumericColumn,\n  isTextColumn,\n  isTimestampColumn,\n} from \"@vuu-ui/vuu-utils\";\nimport type {\n  FilterClauseOp,\n  NumericFilterClauseOp,\n} from \"@vuu-ui/vuu-filter-types\";\n\nexport const textOperators: FilterClauseOp[] = [\n  \"=\",\n  \"in\",\n  \"!=\",\n  \"starts\",\n  \"ends\",\n  \"contains\",\n];\nexport const numericOperators: NumericFilterClauseOp[] = [\n  \"=\",\n  \"!=\",\n  \">\",\n  \">=\",\n  \"<\",\n  \"<=\",\n];\n\nexport const getOperators = (column: ColumnDescriptor): FilterClauseOp[] => {\n  if (isTextColumn(column)) {\n    return textOperators;\n  } else if (isNumericColumn(column) || isTimestampColumn(column)) {\n    return numericOperators;\n  } else {\n    throw Error(\"getOperators only supports text and numeric columns\");\n  }\n};\n"],"names":["isTextColumn","isNumericColumn","isTimestampColumn"],"mappings":";;;;AAWO,MAAM,aAAkC,GAAA;AAAA,EAC7C,GAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF;AACO,MAAM,gBAA4C,GAAA;AAAA,EACvD,GAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAA;AAAA,EACA;AACF;AAEa,MAAA,YAAA,GAAe,CAAC,MAA+C,KAAA;AAC1E,EAAI,IAAAA,qBAAA,CAAa,MAAM,CAAG,EAAA;AACxB,IAAO,OAAA,aAAA;AAAA,aACEC,wBAAgB,CAAA,MAAM,CAAK,IAAAC,0BAAA,CAAkB,MAAM,CAAG,EAAA;AAC/D,IAAO,OAAA,gBAAA;AAAA,GACF,MAAA;AACL,IAAA,MAAM,MAAM,qDAAqD,CAAA;AAAA;AAErE;;;;;;"}

package/cjs/filter-clause/operator-picker/useOperatorPicker.js

@@ -0,0 +1,61 @@
+'use strict';
+
+var react = require('react');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+
+const useOperatorPicker = ({
+  onSelect,
+  value: valueProp
+}) => {
+  const ref = react.useRef(null);
+  const openRef = react.useRef(false);
+  const [value, setValue] = react.useState(valueProp);
+  const highlightFirstOption = react.useCallback(() => {
+    if (ref.current) {
+      const input = ref.current?.querySelector(
+        'input[role="combobox"]'
+      );
+      if (input) {
+        requestAnimationFrame(() => {
+          vuuUtils.dispatchKeyboardEvent(input, "keydown", "ArrowDown");
+        });
+      }
+    }
+  }, []);
+  const handleChange = react.useCallback(
+    (event) => {
+      const value2 = event.target.value;
+      setValue(value2);
+      if (openRef.current && value2 === "") {
+        highlightFirstOption();
+      }
+    },
+    [highlightFirstOption]
+  );
+  const handleSelectionChange = react.useCallback(
+    (evt, [newSelected]) => {
+      onSelect?.(evt, newSelected);
+      setValue(newSelected ?? "");
+    },
+    [onSelect]
+  );
+  const handleOpenChange = react.useCallback(
+    (isOpen, reason) => {
+      openRef.current = isOpen;
+      if (isOpen && reason === "focus") {
+        highlightFirstOption();
+      }
+    },
+    [highlightFirstOption]
+  );
+  return {
+    onChange: handleChange,
+    onOpenChange: handleOpenChange,
+    onSelectionChange: handleSelectionChange,
+    ref,
+    value: value.toString().trim()
+  };
+};
+
+exports.useOperatorPicker = useOperatorPicker;
+//# sourceMappingURL=useOperatorPicker.js.map

package/cjs/filter-clause/operator-picker/useOperatorPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOperatorPicker.js","sources":["../../../../../packages/vuu-filters/src/filter-clause/operator-picker/useOperatorPicker.ts"],"sourcesContent":["import {\n  ChangeEvent,\n  SyntheticEvent,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport { dispatchKeyboardEvent } from \"@vuu-ui/vuu-utils\";\nimport { FilterClauseOp } from \"@vuu-ui/vuu-filter-types\";\n\nexport const useOperatorPicker = ({\n  onSelect,\n  value: valueProp,\n}: {\n  onSelect: (evt: SyntheticEvent, op: FilterClauseOp) => void;\n  value: string;\n}) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const openRef = useRef(false);\n  const [value, setValue] = useState(valueProp);\n\n  const highlightFirstOption = useCallback(() => {\n    if (ref.current) {\n      const input = ref.current?.querySelector<HTMLInputElement>(\n        'input[role=\"combobox\"]',\n      );\n      if (input) {\n        requestAnimationFrame(() => {\n          dispatchKeyboardEvent(input, \"keydown\", \"ArrowDown\");\n        });\n      }\n    }\n  }, []);\n\n  const handleChange = useCallback(\n    (event: ChangeEvent<HTMLInputElement>) => {\n      const value = event.target.value;\n      setValue(value);\n      if (openRef.current && value === \"\") {\n        highlightFirstOption();\n      }\n    },\n    [highlightFirstOption],\n  );\n\n  const handleSelectionChange = useCallback(\n    (evt: SyntheticEvent, [newSelected]: FilterClauseOp[]) => {\n      onSelect?.(evt, newSelected);\n      setValue(newSelected ?? \"\");\n    },\n    [onSelect],\n  );\n\n  const handleOpenChange = useCallback(\n    (isOpen: boolean, reason?: \"manual\" | \"input\" | \"focus\") => {\n      openRef.current = isOpen;\n      if (isOpen && reason === \"focus\") {\n        highlightFirstOption();\n      }\n    },\n    [highlightFirstOption],\n  );\n\n  return {\n    onChange: handleChange,\n    onOpenChange: handleOpenChange,\n    onSelectionChange: handleSelectionChange,\n    ref,\n    value: value.toString().trim(),\n  };\n};\n"],"names":["useRef","useState","useCallback","dispatchKeyboardEvent","value"],"mappings":";;;;;AAUO,MAAM,oBAAoB,CAAC;AAAA,EAChC,QAAA;AAAA,EACA,KAAO,EAAA;AACT,CAGM,KAAA;AACJ,EAAM,MAAA,GAAA,GAAMA,aAAuB,IAAI,CAAA;AACvC,EAAM,MAAA,OAAA,GAAUA,aAAO,KAAK,CAAA;AAC5B,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIC,eAAS,SAAS,CAAA;AAE5C,EAAM,MAAA,oBAAA,GAAuBC,kBAAY,MAAM;AAC7C,IAAA,IAAI,IAAI,OAAS,EAAA;AACf,MAAM,MAAA,KAAA,GAAQ,IAAI,OAAS,EAAA,aAAA;AAAA,QACzB;AAAA,OACF;AACA,MAAA,IAAI,KAAO,EAAA;AACT,QAAA,qBAAA,CAAsB,MAAM;AAC1B,UAAsBC,8BAAA,CAAA,KAAA,EAAO,WAAW,WAAW,CAAA;AAAA,SACpD,CAAA;AAAA;AACH;AACF,GACF,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,YAAe,GAAAD,iBAAA;AAAA,IACnB,CAAC,KAAyC,KAAA;AACxC,MAAME,MAAAA,MAAAA,GAAQ,MAAM,MAAO,CAAA,KAAA;AAC3B,MAAA,QAAA,CAASA,MAAK,CAAA;AACd,MAAI,IAAA,OAAA,CAAQ,OAAWA,IAAAA,MAAAA,KAAU,EAAI,EAAA;AACnC,QAAqB,oBAAA,EAAA;AAAA;AACvB,KACF;AAAA,IACA,CAAC,oBAAoB;AAAA,GACvB;AAEA,EAAA,MAAM,qBAAwB,GAAAF,iBAAA;AAAA,IAC5B,CAAC,GAAA,EAAqB,CAAC,WAAW,CAAwB,KAAA;AACxD,MAAA,QAAA,GAAW,KAAK,WAAW,CAAA;AAC3B,MAAA,QAAA,CAAS,eAAe,EAAE,CAAA;AAAA,KAC5B;AAAA,IACA,CAAC,QAAQ;AAAA,GACX;AAEA,EAAA,MAAM,gBAAmB,GAAAA,iBAAA;AAAA,IACvB,CAAC,QAAiB,MAA0C,KAAA;AAC1D,MAAA,OAAA,CAAQ,OAAU,GAAA,MAAA;AAClB,MAAI,IAAA,MAAA,IAAU,WAAW,OAAS,EAAA;AAChC,QAAqB,oBAAA,EAAA;AAAA;AACvB,KACF;AAAA,IACA,CAAC,oBAAoB;AAAA,GACvB;AAEA,EAAO,OAAA;AAAA,IACL,QAAU,EAAA,YAAA;AAAA,IACV,YAAc,EAAA,gBAAA;AAAA,IACd,iBAAmB,EAAA,qBAAA;AAAA,IACnB,GAAA;AAAA,IACA,KAAO,EAAA,KAAA,CAAM,QAAS,EAAA,CAAE,IAAK;AAAA,GAC/B;AACF;;;;"}