@vuu-ui/vuu-filters 0.13.24 → 0.13.26

package/cjs/column-filter/ColumnFilter.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var columnFilterCss = ".vuuColumnFilter {\n    border: solid 1px var(--salt-editable-borderColor);\n    border-radius: 4px;\n    max-width: 200px;\n}\n\n.vuuColumnFilter-trigger {\n    --saltButton-borderRadius: 4px 0px 0px 4px;\n    --saltButton-padding: var(--salt-spacing-200);\n}\n";
+
+module.exports = columnFilterCss;
+//# sourceMappingURL=ColumnFilter.css.js.map

package/cjs/column-filter/ColumnFilter.css.js.map

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

package/cjs/column-filter/ColumnFilter.js

@@ -0,0 +1,78 @@
+'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 cx = require('clsx');
+var ColumnFilter$1 = require('./ColumnFilter.css.js');
+var vuuDataReact = require('@vuu-ui/vuu-data-react');
+var react = require('react');
+var useColumnFilter = require('./useColumnFilter.js');
+
+const classBase = "vuuColumnFilter";
+const ColumnFilter = ({
+  column,
+  className,
+  operator = "=",
+  showOperatorPicker = false,
+  table,
+  value,
+  ...buttonGroupProps
+}) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-filter-bar",
+    css: ColumnFilter$1,
+    window: targetWindow
+  });
+  react.useMemo(
+    () => useColumnFilter.assertValidValue(column, operator, value),
+    [column, operator, value]
+  );
+  const onCommit = react.useCallback((e, value2) => {
+    console.log(`onCommit ${value2}`);
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    core.SegmentedButtonGroup,
+    {
+      ...buttonGroupProps,
+      className: cx(classBase, className),
+      children: [
+        showOperatorPicker ? /* @__PURE__ */ jsxRuntime.jsxs(core.Menu, { placement: "bottom-start", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(core.MenuTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            core.Button,
+            {
+              appearance: "solid",
+              "aria-label": "Open Menu",
+              className: `${classBase}-trigger`,
+              "data-embedded": true,
+              sentiment: "neutral",
+              children: operator
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(core.MenuPanel, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(core.MenuItem, { children: "=" }),
+            /* @__PURE__ */ jsxRuntime.jsx(core.MenuItem, { children: "!=" }),
+            /* @__PURE__ */ jsxRuntime.jsx(core.MenuItem, { children: "starts" }),
+            /* @__PURE__ */ jsxRuntime.jsx(core.MenuItem, { children: "ends" }),
+            /* @__PURE__ */ jsxRuntime.jsx(core.MenuItem, { children: "contains" })
+          ] })
+        ] }) : null,
+        vuuDataReact.getDataItemEditControl({
+          dataDescriptor: column,
+          onCommit,
+          table
+        }),
+        operator === "between" ? vuuDataReact.getDataItemEditControl({
+          dataDescriptor: column,
+          onCommit,
+          table
+        }) : null
+      ]
+    }
+  );
+};
+
+exports.ColumnFilter = ColumnFilter;
+//# sourceMappingURL=ColumnFilter.js.map

package/cjs/column-filter/ColumnFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnFilter.js","sources":["../../../../packages/vuu-filters/src/column-filter/ColumnFilter.tsx"],"sourcesContent":["import {\n  Button,\n  Menu,\n  MenuItem,\n  MenuPanel,\n  MenuTrigger,\n  SegmentedButtonGroup,\n  SegmentedButtonGroupProps,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\n\nimport columnFilterCss from \"./ColumnFilter.css\";\nimport { getDataItemEditControl } from \"@vuu-ui/vuu-data-react\";\nimport { useCallback, useMemo } from \"react\";\nimport { CommitHandler } from \"@vuu-ui/vuu-utils\";\nimport { VuuTable } from \"@vuu-ui/vuu-protocol-types\";\nimport {\n  assertValidValue,\n  ColumnFilterHookProps,\n  FilterValue,\n} from \"./useColumnFilter\";\n\nconst classBase = \"vuuColumnFilter\";\n\nexport interface ColumnFilterProps\n  extends ColumnFilterHookProps,\n    SegmentedButtonGroupProps {\n  showOperatorPicker?: boolean;\n  /**\n   * VuuTable is required if typeahead support is expected.\n   */\n  table?: VuuTable;\n\n  /**\n   * Initial filter value. Pair of values expewcted when operator is\n   * 'between'\n   */\n  value?: FilterValue | [FilterValue, FilterValue];\n}\n\nexport const ColumnFilter = ({\n  column,\n  className,\n  operator = \"=\",\n  showOperatorPicker = false,\n  table,\n  value,\n  ...buttonGroupProps\n}: ColumnFilterProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-filter-bar\",\n    css: columnFilterCss,\n    window: targetWindow,\n  });\n\n  useMemo(\n    () => assertValidValue(column, operator, value),\n    [column, operator, value],\n  );\n\n  const onCommit = useCallback<CommitHandler<HTMLElement>>((e, value) => {\n    console.log(`onCommit ${value}`);\n  }, []);\n\n  return (\n    <SegmentedButtonGroup\n      {...buttonGroupProps}\n      className={cx(classBase, className)}\n    >\n      {showOperatorPicker ? (\n        <Menu placement=\"bottom-start\">\n          <MenuTrigger>\n            <Button\n              appearance=\"solid\"\n              aria-label=\"Open Menu\"\n              className={`${classBase}-trigger`}\n              data-embedded\n              sentiment=\"neutral\"\n            >\n              {operator}\n            </Button>\n          </MenuTrigger>\n          <MenuPanel>\n            <MenuItem>=</MenuItem>\n            <MenuItem>!=</MenuItem>\n            <MenuItem>starts</MenuItem>\n            <MenuItem>ends</MenuItem>\n            <MenuItem>contains</MenuItem>\n          </MenuPanel>\n        </Menu>\n      ) : null}\n      {getDataItemEditControl({\n        dataDescriptor: column,\n        onCommit,\n        table,\n      })}\n      {operator === \"between\"\n        ? getDataItemEditControl({\n            dataDescriptor: column,\n            onCommit,\n            table,\n          })\n        : null}\n    </SegmentedButtonGroup>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","columnFilterCss","useMemo","assertValidValue","useCallback","value","jsxs","SegmentedButtonGroup","Menu","jsx","MenuTrigger","Button","MenuPanel","MenuItem","getDataItemEditControl"],"mappings":";;;;;;;;;;;;AAwBA,MAAM,SAAY,GAAA,iBAAA;AAkBX,MAAM,eAAe,CAAC;AAAA,EAC3B,MAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAW,GAAA,GAAA;AAAA,EACX,kBAAqB,GAAA,KAAA;AAAA,EACrB,KAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAAyB,KAAA;AACvB,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,cAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAAC,aAAA;AAAA,IACE,MAAMC,gCAAA,CAAiB,MAAQ,EAAA,QAAA,EAAU,KAAK,CAAA;AAAA,IAC9C,CAAC,MAAQ,EAAA,QAAA,EAAU,KAAK;AAAA,GAC1B;AAEA,EAAA,MAAM,QAAW,GAAAC,iBAAA,CAAwC,CAAC,CAAA,EAAGC,MAAU,KAAA;AACrE,IAAQ,OAAA,CAAA,GAAA,CAAI,CAAYA,SAAAA,EAAAA,MAAK,CAAE,CAAA,CAAA;AAAA,GACjC,EAAG,EAAE,CAAA;AAEL,EACE,uBAAAC,eAAA;AAAA,IAACC,yBAAA;AAAA,IAAA;AAAA,MACE,GAAG,gBAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAEjC,QAAA,EAAA;AAAA,QACC,kBAAA,mBAAAD,eAAA,CAACE,SAAK,EAAA,EAAA,SAAA,EAAU,cACd,EAAA,QAAA,EAAA;AAAA,0BAAAC,cAAA,CAACC,gBACC,EAAA,EAAA,QAAA,kBAAAD,cAAA;AAAA,YAACE,WAAA;AAAA,YAAA;AAAA,cACC,UAAW,EAAA,OAAA;AAAA,cACX,YAAW,EAAA,WAAA;AAAA,cACX,SAAA,EAAW,GAAG,SAAS,CAAA,QAAA,CAAA;AAAA,cACvB,eAAa,EAAA,IAAA;AAAA,cACb,SAAU,EAAA,SAAA;AAAA,cAET,QAAA,EAAA;AAAA;AAAA,WAEL,EAAA,CAAA;AAAA,0CACCC,cACC,EAAA,EAAA,QAAA,EAAA;AAAA,4BAAAH,cAAA,CAACI,iBAAS,QAAC,EAAA,GAAA,EAAA,CAAA;AAAA,4BACXJ,cAAA,CAACI,iBAAS,QAAE,EAAA,IAAA,EAAA,CAAA;AAAA,4BACZJ,cAAA,CAACI,iBAAS,QAAM,EAAA,QAAA,EAAA,CAAA;AAAA,4BAChBJ,cAAA,CAACI,iBAAS,QAAI,EAAA,MAAA,EAAA,CAAA;AAAA,4BACdJ,cAAA,CAACI,iBAAS,QAAQ,EAAA,UAAA,EAAA;AAAA,WACpB,EAAA;AAAA,SAAA,EACF,CACE,GAAA,IAAA;AAAA,QACHC,mCAAuB,CAAA;AAAA,UACtB,cAAgB,EAAA,MAAA;AAAA,UAChB,QAAA;AAAA,UACA;AAAA,SACD,CAAA;AAAA,QACA,QAAA,KAAa,YACVA,mCAAuB,CAAA;AAAA,UACrB,cAAgB,EAAA,MAAA;AAAA,UAChB,QAAA;AAAA,UACA;AAAA,SACD,CACD,GAAA;AAAA;AAAA;AAAA,GACN;AAEJ;;;;"}

package/cjs/column-filter/useColumnFilter.js

@@ -0,0 +1,24 @@
+'use strict';
+
+const assertValidValue = ({ serverDataType: _ }, operator, value) => {
+  if (value !== void 0) {
+    if (operator === "between") {
+      if (!Array.isArray(value)) {
+        throw Error(
+          "[useColumnFilter] 'between operator requires array of two values'"
+        );
+      } else if (value.length !== 2) {
+        throw Error(
+          `[useColumnFilter] 'between operator requires two values, received ${value.length}'`
+        );
+      } else if (typeof value[0] !== typeof value[1]) {
+        throw Error(
+          `[useColumnFilter] 'between operator values must be of same type, received ${typeof value[0]} and ${typeof value[1]}`
+        );
+      }
+    }
+  }
+};
+
+exports.assertValidValue = assertValidValue;
+//# sourceMappingURL=useColumnFilter.js.map

package/cjs/column-filter/useColumnFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useColumnFilter.js","sources":["../../../../packages/vuu-filters/src/column-filter/useColumnFilter.ts"],"sourcesContent":["import { FilterOp } from \"@vuu-ui/vuu-filter-types\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\n\nexport type FilterValue = string | number;\n\nexport const assertValidValue = (\n  { serverDataType: _ }: ColumnDescriptor,\n  operator: FilterOp | \"between\",\n  value?: FilterValue | FilterValue[],\n) => {\n  if (value !== undefined) {\n    if (operator === \"between\") {\n      if (!Array.isArray(value)) {\n        throw Error(\n          \"[useColumnFilter] 'between operator requires array of two values'\",\n        );\n      } else if (value.length !== 2) {\n        throw Error(\n          `[useColumnFilter] 'between operator requires two values, received ${value.length}'`,\n        );\n      } else if (typeof value[0] !== typeof value[1]) {\n        throw Error(\n          `[useColumnFilter] 'between operator values must be of same type, received ${typeof value[0]} and ${typeof value[1]}`,\n        );\n      }\n    }\n    // TODO validate value(s) against serverDataType\n  }\n};\n\nexport interface ColumnFilterHookProps {\n  column: ColumnDescriptor;\n  operator?: FilterOp | \"between\";\n}\n\n// export const useColumnFilter = ({\n//   column,\n//   operator = \"=\",\n// }: ColumnFilterHookProps) => {};\n"],"names":[],"mappings":";;AAKO,MAAM,mBAAmB,CAC9B,EAAE,gBAAgB,CAAE,EAAA,EACpB,UACA,KACG,KAAA;AACH,EAAA,IAAI,UAAU,KAAW,CAAA,EAAA;AACvB,IAAA,IAAI,aAAa,SAAW,EAAA;AAC1B,MAAA,IAAI,CAAC,KAAA,CAAM,OAAQ,CAAA,KAAK,CAAG,EAAA;AACzB,QAAM,MAAA,KAAA;AAAA,UACJ;AAAA,SACF;AAAA,OACF,MAAA,IAAW,KAAM,CAAA,MAAA,KAAW,CAAG,EAAA;AAC7B,QAAM,MAAA,KAAA;AAAA,UACJ,CAAA,kEAAA,EAAqE,MAAM,MAAM,CAAA,CAAA;AAAA,SACnF;AAAA,OACF,MAAA,IAAW,OAAO,KAAM,CAAA,CAAC,MAAM,OAAO,KAAA,CAAM,CAAC,CAAG,EAAA;AAC9C,QAAM,MAAA,KAAA;AAAA,UACJ,CAAA,0EAAA,EAA6E,OAAO,KAAM,CAAA,CAAC,CAAC,CAAQ,KAAA,EAAA,OAAO,KAAM,CAAA,CAAC,CAAC,CAAA;AAAA,SACrH;AAAA;AACF;AACF;AAGJ;;;;"}

package/cjs/custom-filters/CustomFilters.js

@@ -2,7 +2,6 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var vuuPopups = require('@vuu-ui/vuu-popups');
 var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
 var FilterEditor = require('../filter-editor/FilterEditor.js');
 var FilterPill = require('../filter-pill/FilterPill.js');
@@ -78,17 +77,7 @@ const CustomFilters = ({
           variant: "secondary"
         }
       ),
-      promptProps ? /* @__PURE__ */ jsxRuntime.jsx(
-        vuuPopups.Prompt,
-        {
-          ...promptProps,
-          PopupProps: {
-            anchorElement: rootRef,
-            offsetTop: 16,
-            placement: "below-center"
-          }
-        }
-      ) : null
+      promptProps ? /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Prompt, { ...promptProps, open: true }) : null
     ] }),
     filterModel && vuuTable && /* @__PURE__ */ jsxRuntime.jsx(
       FilterEditor.FilterEditor,

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

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

package/cjs/custom-filters/useCustomFilters.js

@@ -95,17 +95,19 @@ const useCustomFilters = ({
         focusFilterPill();
       };
       return {
+        className: "vuuFilterDeletePrompt",
         confirmButtonLabel: "Remove",
         icon: "warn-triangle",
+        initialFocusedItem: "confirm",
         onCancel: close,
         onClose: close,
         onConfirm: () => {
           setPromptProps(null);
           deleteConfirmed(filter);
         },
-        text: `Are you sure you want to delete  ${filter.name}`,
+        children: `Are you sure you want to delete filter '${filter.name}'`,
         title: "Remove Filter",
-        variant: "warn"
+        status: "warning"
       };
     },
     [deleteConfirmed, focusFilterPill]

package/cjs/custom-filters/useCustomFilters.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCustomFilters.js","sources":["../../../../packages/vuu-filters/src/custom-filters/useCustomFilters.ts"],"sourcesContent":["import { ColumnDescriptorsByName, Filter } from \"@vuu-ui/vuu-filter-types\";\nimport { PromptProps } from \"@vuu-ui/vuu-popups\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n  EditableLabelProps,\n  EditAPI,\n  NullEditAPI,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  filterAsQuery,\n  getElementDataIndex,\n  queryClosest,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n  KeyboardEventHandler,\n  MouseEventHandler,\n  RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { FilterBarProps } from \"../filter-bar\";\nimport {\n  FilterEditCancelHandler,\n  FilterEditSaveHandler,\n} from \"../filter-editor\";\nimport { FilterPillProps } from \"../filter-pill\";\nimport { FilterMenuOptions } from \"../filter-pill-menu\";\nimport { navigateToNextItem } from \"./filterBarFocusManagement\";\nimport { useFilterState } from \"./useFilterState\";\nimport { MenuActionHandler } from \"@vuu-ui/vuu-context-menu\";\n\nexport type EditFilterState = \"create\" | \"edit\";\nexport type FilterState = EditFilterState | \"rename\";\nexport const isEditFilterState = (\n  filterState?: string,\n): filterState is EditFilterState =>\n  filterState === \"edit\" || filterState === \"create\";\n\ntype InteractedFilterState = {\n  filter?: Filter;\n  index: number;\n  state: FilterState;\n};\n\nexport interface CustomFilterHookProps\n  extends Pick<\n    FilterBarProps,\n    | \"columnDescriptors\"\n    | \"defaultFilterState\"\n    | \"filterState\"\n    | \"onApplyFilter\"\n    | \"onFilterDeleted\"\n    | \"onFilterRenamed\"\n    | \"onFilterStateChanged\"\n  > {\n  containerRef: RefObject<HTMLDivElement | null>;\n}\n\nexport const useCustomFilters = ({\n  columnDescriptors,\n  containerRef,\n  defaultFilterState,\n  filterState,\n  onApplyFilter,\n  onFilterDeleted,\n  onFilterRenamed,\n  onFilterStateChanged,\n}: CustomFilterHookProps) => {\n  const addButtonRef = useRef<HTMLButtonElement>(null);\n  const [interactedFilterState, setInteractedFilterState] = useState<\n    InteractedFilterState | undefined\n  >();\n  const [promptProps, setPromptProps] = useState<PromptProps | null>(null);\n  const editPillLabelAPI = useRef<EditAPI>(NullEditAPI);\n\n  const columnsByName = useMemo(\n    () => columnDescriptorsByName(columnDescriptors),\n    [columnDescriptors],\n  );\n\n  const {\n    activeFilterIndex,\n    filters,\n    onAddFilter,\n    onChangeFilter,\n    onDeleteFilter,\n    onRenameFilter,\n    onToggleFilterActive,\n  } = useFilterState({\n    defaultFilterState,\n    filterState,\n    onFilterDeleted,\n    onFilterRenamed,\n    onFilterStateChanged,\n  });\n\n  useEffect(() => {\n    const activeFilters = activeFilterIndex.map((i) => filters[i]);\n    const applyFilter = (filter?: Filter) => {\n      const query = filter ? filterAsQuery(filter, { columnsByName }) : \"\";\n      onApplyFilter({ filter: query, filterStruct: filter });\n    };\n    if (activeFilters.length === 0) {\n      applyFilter();\n    } else if (activeFilters.length === 1) {\n      const [filter] = activeFilters;\n      applyFilter(filter);\n    } else {\n      applyFilter({ op: \"and\", filters: activeFilters });\n    }\n  }, [activeFilterIndex, columnsByName, filters, onApplyFilter]);\n\n  const editPillLabel = useCallback((index: number, filter: Filter) => {\n    setTimeout(() => {\n      setInteractedFilterState({\n        filter,\n        index,\n        state: \"rename\",\n      });\n    }, 100);\n  }, []);\n\n  const focusFilterPill = useCallback(\n    (index = 0) => {\n      requestAnimationFrame(() => {\n        const target = containerRef.current?.querySelector(\n          `.vuuFilterPill[data-index=\"${index}\"] button`,\n        ) as undefined | HTMLInputElement;\n        if (target) {\n          target.focus();\n        }\n      });\n    },\n    [containerRef],\n  );\n\n  const deleteConfirmed = useCallback(\n    (filter: Filter) => {\n      onDeleteFilter(filter);\n\n      // TODO move focus to next/previous filter\n      requestAnimationFrame(() => {\n        if (filters.length) {\n          focusFilterPill(0);\n        }\n      });\n    },\n    [filters.length, focusFilterPill, onDeleteFilter],\n  );\n\n  const getDeletePrompt = useMemo(\n    () => (filter: Filter) => {\n      const close = () => {\n        setPromptProps(null);\n        focusFilterPill();\n      };\n      return {\n        confirmButtonLabel: \"Remove\",\n        icon: \"warn-triangle\",\n        onCancel: close,\n        onClose: close,\n        onConfirm: () => {\n          setPromptProps(null);\n          deleteConfirmed(filter);\n        },\n        text: `Are you sure you want to delete  ${filter.name}`,\n        title: \"Remove Filter\",\n        variant: \"warn\",\n      } as PromptProps;\n    },\n    [deleteConfirmed, focusFilterPill],\n  );\n\n  const deleteFilter = useCallback(\n    (filter: Filter, withPrompt: boolean) => {\n      if (withPrompt) {\n        setPromptProps(getDeletePrompt(filter));\n      } else {\n        deleteConfirmed(filter);\n      }\n    },\n    [deleteConfirmed, getDeletePrompt],\n  );\n\n  // TODO handle cancel edit name\n  const handleExitEditFilterName: EditableLabelProps[\"onExitEditMode\"] =\n    useCallback(\n      (_, editedValue = \"\") => {\n        if (\n          interactedFilterState?.state === \"rename\" &&\n          interactedFilterState.filter\n        ) {\n          const { filter } = interactedFilterState;\n          const indexOfEditedFilter = onRenameFilter(filter, editedValue);\n\n          setInteractedFilterState(undefined);\n          focusFilterPill(indexOfEditedFilter);\n        }\n        setInteractedFilterState(undefined);\n      },\n      [focusFilterPill, interactedFilterState, onRenameFilter],\n    );\n\n  const handlePillMenuAction = useCallback<MenuActionHandler>(\n    (menuId, options) => {\n      switch (menuId) {\n        case \"delete-filter\": {\n          const { filter } = options as FilterMenuOptions;\n          deleteFilter(filter, true);\n          return true;\n        }\n        case \"rename-filter\": {\n          const { filter } = options as FilterMenuOptions;\n          const index = filters.indexOf(filter);\n          editPillLabel(index, filter);\n          return true;\n        }\n        case \"edit-filter\": {\n          const { filter } = options as FilterMenuOptions;\n          setInteractedFilterState({\n            filter,\n            index: filters.indexOf(filter),\n            state: \"edit\",\n          });\n          return true;\n        }\n        default:\n          return false;\n      }\n    },\n    [deleteFilter, editPillLabel, filters],\n  );\n\n  const handlePillKeyDown = useCallback<KeyboardEventHandler>((e) => {\n    if (e.key === \"ArrowRight\" || e.key === \"ArrowLeft\") {\n      navigateToNextItem(e.target, e.key === \"ArrowLeft\" ? \"bwd\" : \"fwd\");\n    }\n  }, []);\n\n  const addIfNewElseUpdate = useCallback(\n    (newOrUpdatedFilter: Filter, existing: Filter | undefined) => {\n      if (existing === undefined) {\n        const idx = onAddFilter(newOrUpdatedFilter);\n        focusFilterPill(idx);\n        editPillLabel(idx, newOrUpdatedFilter);\n      } else {\n        const idx = onChangeFilter(existing, newOrUpdatedFilter);\n        focusFilterPill(idx);\n      }\n    },\n    [editPillLabel, focusFilterPill, onAddFilter, onChangeFilter],\n  );\n\n  const filterSaveHandler = useCallback<FilterEditSaveHandler>(\n    (filter) => {\n      if (interactedFilterState) {\n        const { filter: existingFilter } = interactedFilterState;\n        setInteractedFilterState(undefined);\n        addIfNewElseUpdate(filter, existingFilter);\n      }\n    },\n    [addIfNewElseUpdate, interactedFilterState],\n  );\n\n  const handlePillClick = useCallback<MouseEventHandler<HTMLButtonElement>>(\n    (e) => {\n      const isEditing = (e.target as HTMLElement).querySelector(\n        \".vuuEditableLabel-editing\",\n      );\n      if (!isEditing) {\n        const pill = queryClosest(e.target, \".vuuFilterPill\");\n        if (pill) {\n          const index = getElementDataIndex(pill);\n          onToggleFilterActive(index, e.shiftKey);\n        }\n      }\n    },\n    [onToggleFilterActive],\n  );\n\n  const FilterPillProps: Omit<FilterPillProps, \"filter\" | \"selected\"> = {\n    editLabelApiRef: editPillLabelAPI,\n    // onBeginEdit: handleBeginEditFilterName,\n    onClick: handlePillClick,\n    onKeyDown: handlePillKeyDown,\n    onMenuAction: handlePillMenuAction,\n    onExitEditMode: handleExitEditFilterName,\n  };\n\n  const handleClickAddButton = useCallback(() => {\n    setInteractedFilterState({\n      index: -1,\n      state: \"create\",\n    });\n  }, []);\n\n  const handleKeyDownAddButton = useCallback<KeyboardEventHandler>((evt) => {\n    if (evt.key === \"ArrowLeft\") {\n      navigateToNextItem(evt.target, \"bwd\");\n    }\n  }, []);\n\n  const handleCancelEdit = useCallback<FilterEditCancelHandler>(() => {\n    if (interactedFilterState) {\n      const { index } = interactedFilterState;\n      if (index === -1) {\n        addButtonRef.current?.focus();\n      } else {\n        focusFilterPill(index);\n      }\n      setInteractedFilterState(undefined);\n    }\n  }, [focusFilterPill, interactedFilterState]);\n\n  const addButtonProps = {\n    ref: addButtonRef,\n    onClick: handleClickAddButton,\n    onKeyDown: handleKeyDownAddButton,\n  };\n\n  return {\n    FilterPillProps,\n    activeFilterIndex,\n    addButtonProps,\n    columnsByName,\n    filters,\n    interactedFilterState,\n    onCancelEdit: handleCancelEdit,\n    onSave: filterSaveHandler,\n    promptProps,\n  };\n};\n\nfunction columnDescriptorsByName(\n  columns: ColumnDescriptor[],\n): ColumnDescriptorsByName {\n  return columns.reduce((m, col) => ({ ...m, [col.name]: col }), {});\n}\n"],"names":["useRef","useState","NullEditAPI","useMemo","useFilterState","useEffect","filterAsQuery","useCallback","navigateToNextItem","queryClosest","getElementDataIndex","FilterPillProps"],"mappings":"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"}
+{"version":3,"file":"useCustomFilters.js","sources":["../../../../packages/vuu-filters/src/custom-filters/useCustomFilters.ts"],"sourcesContent":["import { ColumnDescriptorsByName, Filter } from \"@vuu-ui/vuu-filter-types\";\nimport { PromptProps } from \"@vuu-ui/vuu-ui-controls\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n  EditableLabelProps,\n  EditAPI,\n  NullEditAPI,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  filterAsQuery,\n  getElementDataIndex,\n  queryClosest,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n  KeyboardEventHandler,\n  MouseEventHandler,\n  RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { FilterBarProps } from \"../filter-bar\";\nimport {\n  FilterEditCancelHandler,\n  FilterEditSaveHandler,\n} from \"../filter-editor\";\nimport { FilterPillProps } from \"../filter-pill\";\nimport { FilterMenuOptions } from \"../filter-pill-menu\";\nimport { navigateToNextItem } from \"./filterBarFocusManagement\";\nimport { useFilterState } from \"./useFilterState\";\nimport { MenuActionHandler } from \"@vuu-ui/vuu-context-menu\";\n\nexport type EditFilterState = \"create\" | \"edit\";\nexport type FilterState = EditFilterState | \"rename\";\nexport const isEditFilterState = (\n  filterState?: string,\n): filterState is EditFilterState =>\n  filterState === \"edit\" || filterState === \"create\";\n\ntype InteractedFilterState = {\n  filter?: Filter;\n  index: number;\n  state: FilterState;\n};\n\nexport interface CustomFilterHookProps\n  extends Pick<\n    FilterBarProps,\n    | \"columnDescriptors\"\n    | \"defaultFilterState\"\n    | \"filterState\"\n    | \"onApplyFilter\"\n    | \"onFilterDeleted\"\n    | \"onFilterRenamed\"\n    | \"onFilterStateChanged\"\n  > {\n  containerRef: RefObject<HTMLDivElement | null>;\n}\n\nexport const useCustomFilters = ({\n  columnDescriptors,\n  containerRef,\n  defaultFilterState,\n  filterState,\n  onApplyFilter,\n  onFilterDeleted,\n  onFilterRenamed,\n  onFilterStateChanged,\n}: CustomFilterHookProps) => {\n  const addButtonRef = useRef<HTMLButtonElement>(null);\n  const [interactedFilterState, setInteractedFilterState] = useState<\n    InteractedFilterState | undefined\n  >();\n  const [promptProps, setPromptProps] = useState<PromptProps | null>(null);\n  const editPillLabelAPI = useRef<EditAPI>(NullEditAPI);\n\n  const columnsByName = useMemo(\n    () => columnDescriptorsByName(columnDescriptors),\n    [columnDescriptors],\n  );\n\n  const {\n    activeFilterIndex,\n    filters,\n    onAddFilter,\n    onChangeFilter,\n    onDeleteFilter,\n    onRenameFilter,\n    onToggleFilterActive,\n  } = useFilterState({\n    defaultFilterState,\n    filterState,\n    onFilterDeleted,\n    onFilterRenamed,\n    onFilterStateChanged,\n  });\n\n  useEffect(() => {\n    const activeFilters = activeFilterIndex.map((i) => filters[i]);\n    const applyFilter = (filter?: Filter) => {\n      const query = filter ? filterAsQuery(filter, { columnsByName }) : \"\";\n      onApplyFilter({ filter: query, filterStruct: filter });\n    };\n    if (activeFilters.length === 0) {\n      applyFilter();\n    } else if (activeFilters.length === 1) {\n      const [filter] = activeFilters;\n      applyFilter(filter);\n    } else {\n      applyFilter({ op: \"and\", filters: activeFilters });\n    }\n  }, [activeFilterIndex, columnsByName, filters, onApplyFilter]);\n\n  const editPillLabel = useCallback((index: number, filter: Filter) => {\n    setTimeout(() => {\n      setInteractedFilterState({\n        filter,\n        index,\n        state: \"rename\",\n      });\n    }, 100);\n  }, []);\n\n  const focusFilterPill = useCallback(\n    (index = 0) => {\n      requestAnimationFrame(() => {\n        const target = containerRef.current?.querySelector(\n          `.vuuFilterPill[data-index=\"${index}\"] button`,\n        ) as undefined | HTMLInputElement;\n        if (target) {\n          target.focus();\n        }\n      });\n    },\n    [containerRef],\n  );\n\n  const deleteConfirmed = useCallback(\n    (filter: Filter) => {\n      onDeleteFilter(filter);\n\n      // TODO move focus to next/previous filter\n      requestAnimationFrame(() => {\n        if (filters.length) {\n          focusFilterPill(0);\n        }\n      });\n    },\n    [filters.length, focusFilterPill, onDeleteFilter],\n  );\n\n  const getDeletePrompt = useMemo(\n    () => (filter: Filter) => {\n      const close = () => {\n        setPromptProps(null);\n        focusFilterPill();\n      };\n      return {\n        className: \"vuuFilterDeletePrompt\",\n        confirmButtonLabel: \"Remove\",\n        icon: \"warn-triangle\",\n        initialFocusedItem: \"confirm\",\n        onCancel: close,\n        onClose: close,\n        onConfirm: () => {\n          setPromptProps(null);\n          deleteConfirmed(filter);\n        },\n        children: `Are you sure you want to delete filter '${filter.name}'`,\n        title: \"Remove Filter\",\n        status: \"warning\",\n      } as PromptProps;\n    },\n    [deleteConfirmed, focusFilterPill],\n  );\n\n  const deleteFilter = useCallback(\n    (filter: Filter, withPrompt: boolean) => {\n      if (withPrompt) {\n        setPromptProps(getDeletePrompt(filter));\n      } else {\n        deleteConfirmed(filter);\n      }\n    },\n    [deleteConfirmed, getDeletePrompt],\n  );\n\n  // TODO handle cancel edit name\n  const handleExitEditFilterName: EditableLabelProps[\"onExitEditMode\"] =\n    useCallback(\n      (_, editedValue = \"\") => {\n        if (\n          interactedFilterState?.state === \"rename\" &&\n          interactedFilterState.filter\n        ) {\n          const { filter } = interactedFilterState;\n          const indexOfEditedFilter = onRenameFilter(filter, editedValue);\n\n          setInteractedFilterState(undefined);\n          focusFilterPill(indexOfEditedFilter);\n        }\n        setInteractedFilterState(undefined);\n      },\n      [focusFilterPill, interactedFilterState, onRenameFilter],\n    );\n\n  const handlePillMenuAction = useCallback<MenuActionHandler>(\n    (menuId, options) => {\n      switch (menuId) {\n        case \"delete-filter\": {\n          const { filter } = options as FilterMenuOptions;\n          deleteFilter(filter, true);\n          return true;\n        }\n        case \"rename-filter\": {\n          const { filter } = options as FilterMenuOptions;\n          const index = filters.indexOf(filter);\n          editPillLabel(index, filter);\n          return true;\n        }\n        case \"edit-filter\": {\n          const { filter } = options as FilterMenuOptions;\n          setInteractedFilterState({\n            filter,\n            index: filters.indexOf(filter),\n            state: \"edit\",\n          });\n          return true;\n        }\n        default:\n          return false;\n      }\n    },\n    [deleteFilter, editPillLabel, filters],\n  );\n\n  const handlePillKeyDown = useCallback<KeyboardEventHandler>((e) => {\n    if (e.key === \"ArrowRight\" || e.key === \"ArrowLeft\") {\n      navigateToNextItem(e.target, e.key === \"ArrowLeft\" ? \"bwd\" : \"fwd\");\n    }\n  }, []);\n\n  const addIfNewElseUpdate = useCallback(\n    (newOrUpdatedFilter: Filter, existing: Filter | undefined) => {\n      if (existing === undefined) {\n        const idx = onAddFilter(newOrUpdatedFilter);\n        focusFilterPill(idx);\n        editPillLabel(idx, newOrUpdatedFilter);\n      } else {\n        const idx = onChangeFilter(existing, newOrUpdatedFilter);\n        focusFilterPill(idx);\n      }\n    },\n    [editPillLabel, focusFilterPill, onAddFilter, onChangeFilter],\n  );\n\n  const filterSaveHandler = useCallback<FilterEditSaveHandler>(\n    (filter) => {\n      if (interactedFilterState) {\n        const { filter: existingFilter } = interactedFilterState;\n        setInteractedFilterState(undefined);\n        addIfNewElseUpdate(filter, existingFilter);\n      }\n    },\n    [addIfNewElseUpdate, interactedFilterState],\n  );\n\n  const handlePillClick = useCallback<MouseEventHandler<HTMLButtonElement>>(\n    (e) => {\n      const isEditing = (e.target as HTMLElement).querySelector(\n        \".vuuEditableLabel-editing\",\n      );\n      if (!isEditing) {\n        const pill = queryClosest(e.target, \".vuuFilterPill\");\n        if (pill) {\n          const index = getElementDataIndex(pill);\n          onToggleFilterActive(index, e.shiftKey);\n        }\n      }\n    },\n    [onToggleFilterActive],\n  );\n\n  const FilterPillProps: Omit<FilterPillProps, \"filter\" | \"selected\"> = {\n    editLabelApiRef: editPillLabelAPI,\n    // onBeginEdit: handleBeginEditFilterName,\n    onClick: handlePillClick,\n    onKeyDown: handlePillKeyDown,\n    onMenuAction: handlePillMenuAction,\n    onExitEditMode: handleExitEditFilterName,\n  };\n\n  const handleClickAddButton = useCallback(() => {\n    setInteractedFilterState({\n      index: -1,\n      state: \"create\",\n    });\n  }, []);\n\n  const handleKeyDownAddButton = useCallback<KeyboardEventHandler>((evt) => {\n    if (evt.key === \"ArrowLeft\") {\n      navigateToNextItem(evt.target, \"bwd\");\n    }\n  }, []);\n\n  const handleCancelEdit = useCallback<FilterEditCancelHandler>(() => {\n    if (interactedFilterState) {\n      const { index } = interactedFilterState;\n      if (index === -1) {\n        addButtonRef.current?.focus();\n      } else {\n        focusFilterPill(index);\n      }\n      setInteractedFilterState(undefined);\n    }\n  }, [focusFilterPill, interactedFilterState]);\n\n  const addButtonProps = {\n    ref: addButtonRef,\n    onClick: handleClickAddButton,\n    onKeyDown: handleKeyDownAddButton,\n  };\n\n  return {\n    FilterPillProps,\n    activeFilterIndex,\n    addButtonProps,\n    columnsByName,\n    filters,\n    interactedFilterState,\n    onCancelEdit: handleCancelEdit,\n    onSave: filterSaveHandler,\n    promptProps,\n  };\n};\n\nfunction columnDescriptorsByName(\n  columns: ColumnDescriptor[],\n): ColumnDescriptorsByName {\n  return columns.reduce((m, col) => ({ ...m, [col.name]: col }), {});\n}\n"],"names":["useRef","useState","NullEditAPI","useMemo","useFilterState","useEffect","filterAsQuery","useCallback","navigateToNextItem","queryClosest","getElementDataIndex","FilterPillProps"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"FilterBar.js","sources":["../../../../packages/vuu-filters/src/filter-bar/FilterBar.tsx"],"sourcesContent":["import { DataSourceFilter } from \"@vuu-ui/vuu-data-types\";\nimport { Filter, FilterState } from \"@vuu-ui/vuu-filter-types\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { Icon } from \"@vuu-ui/vuu-ui-controls\";\nimport { ToggleButton, ToggleButtonGroup } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, useMemo } from \"react\";\nimport { CustomFilters } from \"../custom-filters\";\nimport { QuickFilterProps, QuickFilters } from \"../quick-filters\";\nimport { FilterMode, useFilterBar } from \"./useFilterBar\";\n\nimport filterBarCss from \"./FilterBar.css\";\nimport { VuuTable } from \"@vuu-ui/vuu-protocol-types\";\n\nexport type FilterBarVariant =\n  | \"custom-filters-only\"\n  | \"quick-filters-only\"\n  | \"full-filters\";\n\nexport interface FilterBarProps extends HTMLAttributes<HTMLDivElement> {\n  QuickFilterProps?: Pick<\n    QuickFilterProps,\n    \"quickFilterColumns\" | \"onChangeQuickFilterColumns\"\n  >;\n  /**\n   * Used to ensure we present filter editors appropriate to the data type of column.\n   * NOTE: Always make sure that these are passed with proper re-render optimization (i.e make\n   * sure its a stable reference, in React terminology), otherwise might end up with infinite\n   * state updates.\n   */\n  columnDescriptors: ColumnDescriptor[];\n  defaultFilterMode?: FilterMode;\n  defaultFilterState?: FilterState;\n  filterMode?: FilterMode;\n  filterState?: FilterState;\n  onApplyFilter: (filter: DataSourceFilter) => void;\n  onChangeFilterMode?: (filterMode: FilterMode) => void;\n  onFilterDeleted?: (filter: Filter) => void;\n  onFilterRenamed?: (filter: Filter, name: string) => void;\n  onFilterStateChanged?: (state: FilterState) => void;\n  /**\n   * Defines table used in call to Vuu Typeahead service\n   */\n  vuuTable?: VuuTable;\n  variant?: FilterBarVariant;\n}\n\nconst classBase = \"vuuFilterBar\";\n\nexport const FilterBar = ({\n  QuickFilterProps,\n  className: classNameProp,\n  columnDescriptors,\n  defaultFilterMode,\n  defaultFilterState,\n  filterMode: filterModeProp,\n  filterState,\n  onApplyFilter,\n  onChangeFilterMode: onChangeFilterModeProp,\n  onFilterDeleted,\n  onFilterRenamed,\n  onFilterStateChanged,\n  vuuTable,\n  variant = \"custom-filters-only\",\n  ...htmlAttributes\n}: FilterBarProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-filter-bar\",\n    css: filterBarCss,\n    window: targetWindow,\n  });\n\n  const allowCustomFilters = variant !== \"quick-filters-only\";\n  const allowQuickFilters = variant !== \"custom-filters-only\";\n\n  const controlledFilterMode: FilterMode | undefined = !allowCustomFilters\n    ? \"quick-filter\"\n    : !allowQuickFilters\n      ? \"custom-filter\"\n      : filterModeProp;\n\n  const { filterMode, onChangeFilterMode } = useFilterBar({\n    defaultFilterMode,\n    filterMode: controlledFilterMode,\n    onChangeFilterMode: onChangeFilterModeProp,\n  });\n\n  const className = cx(classBase, classNameProp);\n\n  const startAdornment = useMemo(() => {\n    if (!allowQuickFilters) {\n      return <Icon name=\"filter\" size={16} style={{ top: 4 }} />;\n    } else {\n      return (\n        <ToggleButtonGroup\n          data-variant=\"secondary\"\n          onChange={onChangeFilterMode}\n          value={filterMode}\n        >\n          <ToggleButton\n            className=\"vuuIconToggleButton\"\n            key=\"custom-filter\"\n            value=\"custom-filter\"\n            aria-label=\"Custom filters\"\n            tabIndex={-1}\n          >\n            <Icon name=\"grid\" size={16} />\n          </ToggleButton>\n          <ToggleButton\n            className=\"vuuIconToggleButton\"\n            key=\"quick-filter\"\n            value=\"quick-filter\"\n            aria-label=\"Quick filters\"\n            tabIndex={-1}\n          >\n            <Icon name=\"tune\" size={16} />\n          </ToggleButton>\n        </ToggleButtonGroup>\n      );\n    }\n  }, [allowQuickFilters, filterMode, onChangeFilterMode]);\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(className, `${classBase}-${filterMode}-mode`)}\n    >\n      {variant === \"quick-filters-only\" ? null : (\n        <div className={`${classBase}-iconContainer`}>{startAdornment}</div>\n      )}\n      {filterMode === \"custom-filter\" ? (\n        <CustomFilters\n          columnDescriptors={columnDescriptors}\n          defaultFilterState={defaultFilterState}\n          filterState={filterState}\n          onApplyFilter={onApplyFilter}\n          onFilterDeleted={onFilterDeleted}\n          onFilterRenamed={onFilterRenamed}\n          onFilterStateChanged={onFilterStateChanged}\n          vuuTable={vuuTable}\n        />\n      ) : (\n        <QuickFilters\n          {...QuickFilterProps}\n          availableColumns={columnDescriptors}\n          onApplyFilter={onApplyFilter}\n          vuuTable={vuuTable}\n        />\n      )}\n    </div>\n  );\n};\n"],"names":["QuickFilterProps","useWindow","useComponentCssInjection","filterBarCss","useFilterBar","useMemo","jsx","Icon","jsxs","ToggleButtonGroup","ToggleButton","CustomFilters","QuickFilters"],"mappings":"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"}
+{"version":3,"file":"FilterBar.js","sources":["../../../../packages/vuu-filters/src/filter-bar/FilterBar.tsx"],"sourcesContent":["import { DataSourceFilter } from \"@vuu-ui/vuu-data-types\";\nimport { Filter, FilterState } from \"@vuu-ui/vuu-filter-types\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { Icon } from \"@vuu-ui/vuu-ui-controls\";\nimport { ToggleButton, ToggleButtonGroup } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, useMemo } from \"react\";\nimport { CustomFilters } from \"../custom-filters\";\nimport { QuickFilterProps, QuickFilters } from \"../quick-filters\";\nimport { FilterMode, useFilterBar } from \"./useFilterBar\";\nimport type { VuuTable } from \"@vuu-ui/vuu-protocol-types\";\n\nimport filterBarCss from \"./FilterBar.css\";\n\nexport type FilterBarVariant =\n  | \"custom-filters-only\"\n  | \"quick-filters-only\"\n  | \"full-filters\";\n\nexport interface FilterBarProps extends HTMLAttributes<HTMLDivElement> {\n  QuickFilterProps?: Pick<\n    QuickFilterProps,\n    \"quickFilterColumns\" | \"onChangeQuickFilterColumns\"\n  >;\n  /**\n   * Used to ensure we present filter editors appropriate to the data type of column.\n   * NOTE: Always make sure that these are passed with proper re-render optimization (i.e make\n   * sure its a stable reference, in React terminology), otherwise might end up with infinite\n   * state updates.\n   */\n  columnDescriptors: ColumnDescriptor[];\n  defaultFilterMode?: FilterMode;\n  defaultFilterState?: FilterState;\n  filterMode?: FilterMode;\n  filterState?: FilterState;\n  onApplyFilter: (filter: DataSourceFilter) => void;\n  onChangeFilterMode?: (filterMode: FilterMode) => void;\n  onFilterDeleted?: (filter: Filter) => void;\n  onFilterRenamed?: (filter: Filter, name: string) => void;\n  onFilterStateChanged?: (state: FilterState) => void;\n  /**\n   * Defines table used in call to Vuu Typeahead service\n   */\n  vuuTable?: VuuTable;\n  variant?: FilterBarVariant;\n}\n\nconst classBase = \"vuuFilterBar\";\n\nexport const FilterBar = ({\n  QuickFilterProps,\n  className: classNameProp,\n  columnDescriptors,\n  defaultFilterMode,\n  defaultFilterState,\n  filterMode: filterModeProp,\n  filterState,\n  onApplyFilter,\n  onChangeFilterMode: onChangeFilterModeProp,\n  onFilterDeleted,\n  onFilterRenamed,\n  onFilterStateChanged,\n  vuuTable,\n  variant = \"custom-filters-only\",\n  ...htmlAttributes\n}: FilterBarProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-filter-bar\",\n    css: filterBarCss,\n    window: targetWindow,\n  });\n\n  const allowCustomFilters = variant !== \"quick-filters-only\";\n  const allowQuickFilters = variant !== \"custom-filters-only\";\n\n  const controlledFilterMode: FilterMode | undefined = !allowCustomFilters\n    ? \"quick-filter\"\n    : !allowQuickFilters\n      ? \"custom-filter\"\n      : filterModeProp;\n\n  const { filterMode, onChangeFilterMode } = useFilterBar({\n    defaultFilterMode,\n    filterMode: controlledFilterMode,\n    onChangeFilterMode: onChangeFilterModeProp,\n  });\n\n  const className = cx(classBase, classNameProp);\n\n  const startAdornment = useMemo(() => {\n    if (!allowQuickFilters) {\n      return <Icon name=\"filter\" size={16} style={{ top: 4 }} />;\n    } else {\n      return (\n        <ToggleButtonGroup\n          data-variant=\"secondary\"\n          onChange={onChangeFilterMode}\n          value={filterMode}\n        >\n          <ToggleButton\n            className=\"vuuIconToggleButton\"\n            key=\"custom-filter\"\n            value=\"custom-filter\"\n            aria-label=\"Custom filters\"\n            tabIndex={-1}\n          >\n            <Icon name=\"grid\" size={16} />\n          </ToggleButton>\n          <ToggleButton\n            className=\"vuuIconToggleButton\"\n            key=\"quick-filter\"\n            value=\"quick-filter\"\n            aria-label=\"Quick filters\"\n            tabIndex={-1}\n          >\n            <Icon name=\"tune\" size={16} />\n          </ToggleButton>\n        </ToggleButtonGroup>\n      );\n    }\n  }, [allowQuickFilters, filterMode, onChangeFilterMode]);\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(className, `${classBase}-${filterMode}-mode`)}\n    >\n      {variant === \"quick-filters-only\" ? null : (\n        <div className={`${classBase}-iconContainer`}>{startAdornment}</div>\n      )}\n      {filterMode === \"custom-filter\" ? (\n        <CustomFilters\n          columnDescriptors={columnDescriptors}\n          defaultFilterState={defaultFilterState}\n          filterState={filterState}\n          onApplyFilter={onApplyFilter}\n          onFilterDeleted={onFilterDeleted}\n          onFilterRenamed={onFilterRenamed}\n          onFilterStateChanged={onFilterStateChanged}\n          vuuTable={vuuTable}\n        />\n      ) : (\n        <QuickFilters\n          {...QuickFilterProps}\n          availableColumns={columnDescriptors}\n          onApplyFilter={onApplyFilter}\n          vuuTable={vuuTable}\n        />\n      )}\n    </div>\n  );\n};\n"],"names":["QuickFilterProps","useWindow","useComponentCssInjection","filterBarCss","useFilterBar","useMemo","jsx","Icon","jsxs","ToggleButtonGroup","ToggleButton","CustomFilters","QuickFilters"],"mappings":"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"}

package/cjs/filter-clause/ColumnPicker.js

@@ -11,7 +11,8 @@ const ColumnPicker = react.forwardRef(function ColumnPicker2({
   columns,
   inputProps,
   onSelect,
-  value: valueProp
+  value: valueProp,
+  dropdownOnAutofocus = true
 }, forwardedRef) {
   const comboProps = useExpandoCombobox.useExpandoComboBox({
     onSelect,
@@ -26,6 +27,7 @@ const ColumnPicker = react.forwardRef(function ColumnPicker2({
       "data-field": "column",
       ref: forwardedRef,
       title: "column",
+      dropdownOnAutofocus,
       children: columns.filter(
         ({ name }) => name.toLowerCase().includes(comboProps.value.toLowerCase())
       ).map(({ name, label = name }) => /* @__PURE__ */ jsxRuntime.jsx(core.Option, { value: name, children: label }, name))

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

@@ -1 +1 @@
-{"version":3,"file":"ColumnPicker.js","sources":["../../../../packages/vuu-filters/src/filter-clause/ColumnPicker.tsx"],"sourcesContent":["import type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { ExpandoCombobox } from \"./ExpandoCombobox\";\nimport { ComboBoxProps, Option } from \"@salt-ds/core\";\nimport { ForwardedRef, SyntheticEvent, forwardRef } from \"react\";\nimport { useExpandoComboBox } from \"./useExpandoCombobox\";\n\nexport type ColumnPickerProps = Pick<\n  ComboBoxProps,\n  \"className\" | \"inputProps\" | \"value\"\n> & {\n  columns: ColumnDescriptor[];\n  onSelect: (evt: SyntheticEvent, columnName: string) => void;\n};\n\nexport const ColumnPicker = forwardRef(function ColumnPicker(\n  {\n    className,\n    columns,\n    inputProps,\n    onSelect,\n    value: valueProp,\n  }: ColumnPickerProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  const comboProps = useExpandoComboBox({\n    onSelect,\n    value: valueProp?.toString() ?? \"\",\n  });\n\n  return (\n    <ExpandoCombobox\n      {...comboProps}\n      inputProps={inputProps}\n      className={className}\n      data-field=\"column\"\n      ref={forwardedRef}\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","useExpandoComboBox","jsx","ExpandoCombobox","Option"],"mappings":";;;;;;;;AAca,MAAA,YAAA,GAAeA,gBAAW,CAAA,SAASC,aAC9C,CAAA;AAAA,EACE,SAAA;AAAA,EACA,OAAA;AAAA,EACA,UAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAO,EAAA;AACT,CAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,aAAaC,qCAAmB,CAAA;AAAA,IACpC,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,UAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAW,EAAA,QAAA;AAAA,MACX,GAAK,EAAA,YAAA;AAAA,MACL,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,qBAAAD,cAAA,CAACE,WAAO,EAAA,EAAA,KAAA,EAAO,IACZ,EAAA,QAAA,EAAA,KAAA,EAAA,EADuB,IAE1B,CACD;AAAA;AAAA,GACL;AAEJ,CAAC;;;;"}
+{"version":3,"file":"ColumnPicker.js","sources":["../../../../packages/vuu-filters/src/filter-clause/ColumnPicker.tsx"],"sourcesContent":["import type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { ExpandoCombobox } from \"./ExpandoCombobox\";\nimport { ComboBoxProps, Option } from \"@salt-ds/core\";\nimport { ForwardedRef, SyntheticEvent, forwardRef } from \"react\";\nimport { useExpandoComboBox } from \"./useExpandoCombobox\";\n\nexport type ColumnPickerProps = Pick<\n  ComboBoxProps,\n  \"className\" | \"inputProps\" | \"value\"\n> & {\n  columns: 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    inputProps,\n    onSelect,\n    value: valueProp,\n    dropdownOnAutofocus = true,\n  }: ColumnPickerProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  const comboProps = useExpandoComboBox({\n    onSelect,\n    value: valueProp?.toString() ?? \"\",\n  });\n\n  return (\n    <ExpandoCombobox\n      {...comboProps}\n      inputProps={inputProps}\n      className={className}\n      data-field=\"column\"\n      ref={forwardedRef}\n      title=\"column\"\n      dropdownOnAutofocus={dropdownOnAutofocus}\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","useExpandoComboBox","jsx","ExpandoCombobox","Option"],"mappings":";;;;;;;;AAea,MAAA,YAAA,GAAeA,gBAAW,CAAA,SAASC,aAC9C,CAAA;AAAA,EACE,SAAA;AAAA,EACA,OAAA;AAAA,EACA,UAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAO,EAAA,SAAA;AAAA,EACP,mBAAsB,GAAA;AACxB,CAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,aAAaC,qCAAmB,CAAA;AAAA,IACpC,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,UAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAW,EAAA,QAAA;AAAA,MACX,GAAK,EAAA,YAAA;AAAA,MACL,KAAM,EAAA,QAAA;AAAA,MACN,mBAAA;AAAA,MAEC,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,qBAAAD,cAAA,CAACE,WAAO,EAAA,EAAA,KAAA,EAAO,IACZ,EAAA,QAAA,EAAA,KAAA,EAAA,EADuB,IAE1B,CACD;AAAA;AAAA,GACL;AAEJ,CAAC;;;;"}

package/cjs/filter-clause/ExpandoCombobox.js

@@ -26,6 +26,7 @@ const ExpandoCombobox = react.forwardRef(function ExpandoCombobox2({
   onSelectionChange,
   onOpenChange,
   value: valueProp,
+  dropdownOnAutofocus = true,
   ...props
 }, forwardedRef) {
   const targetWindow = window.useWindow();
@@ -73,12 +74,13 @@ const ExpandoCombobox = react.forwardRef(function ExpandoCombobox2({
       ...inputPropsProp,
       onFocus: (evt) => {
         inputPropsProp?.onFocus?.(evt);
+        if (!dropdownOnAutofocus) return;
         setTimeout(() => {
           setOpen(true);
         }, 100);
       }
     };
-  }, [inputPropsProp]);
+  }, [inputPropsProp, dropdownOnAutofocus]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {

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

@@ -1 +1 @@
-{"version":3,"file":"ExpandoCombobox.js","sources":["../../../../packages/vuu-filters/src/filter-clause/ExpandoCombobox.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { ComboBox, ComboBoxProps } from \"@salt-ds/core\";\nimport {\n  ChangeEvent,\n  ForwardedRef,\n  ReactElement,\n  Ref,\n  SyntheticEvent,\n  forwardRef,\n  useCallback,\n  useMemo,\n  useState,\n} from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport expandoComboboxCss from \"./ExpandoCombobox.css\";\n\nconst classBase = \"vuuExpandoCombobox\";\n\nexport interface ExpandoComboboxProps<Item = string>\n  extends ComboBoxProps<Item> {\n  itemToString?: (item: Item) => string;\n}\n\nexport type ComboBoxOpenChangeHandler = Exclude<\n  ComboBoxProps[\"onOpenChange\"],\n  undefined\n>;\n\nconst defaultItemToString = (item: unknown) => {\n  if (typeof item === \"string\") {\n    return item;\n  } else {\n    return item?.toString() ?? \"\";\n  }\n};\nexport const ExpandoCombobox = forwardRef(function ExpandoCombobox<\n  Item = string,\n>(\n  {\n    children,\n    className,\n    inputProps: inputPropsProp,\n    itemToString = defaultItemToString,\n    multiselect,\n    onChange,\n    onSelectionChange,\n    onOpenChange,\n    value: valueProp,\n    ...props\n  }: ExpandoComboboxProps<Item>,\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-expando-combobox\",\n    css: expandoComboboxCss,\n    window: targetWindow,\n  });\n\n  const [open, setOpen] = useState(false);\n  const [value, setValue] = useState(\n    valueProp === undefined ? \"\" : valueProp.toString(),\n  );\n\n  const handleChange = useCallback(\n    (evt: ChangeEvent<HTMLInputElement>) => {\n      const value = evt.target.value;\n      onChange?.(evt);\n      setValue(value);\n    },\n    [onChange],\n  );\n\n  const handleSelectionChange = useCallback(\n    (evt: SyntheticEvent, newSelected: Item[]) => {\n      if (multiselect) {\n        onSelectionChange?.(evt, newSelected);\n      } else {\n        const [selectedValue] = newSelected;\n        setTimeout(() => {\n          onSelectionChange?.(evt, newSelected);\n          setValue(itemToString(selectedValue));\n        }, 100);\n      }\n    },\n    [onSelectionChange, itemToString, multiselect],\n  );\n\n  const handleOpenChange = useCallback<ComboBoxOpenChangeHandler>(\n    (open, reason) => {\n      onOpenChange?.(open, reason);\n      setOpen(open);\n    },\n    [onOpenChange],\n  );\n\n  const inputProps = useMemo<ComboBoxProps<Item>[\"inputProps\"]>(() => {\n    return {\n      autoComplete: \"off\",\n      ...inputPropsProp,\n      onFocus: (evt) => {\n        inputPropsProp?.onFocus?.(evt);\n\n        setTimeout(() => {\n          setOpen(true);\n        }, 100);\n      },\n    };\n  }, [inputPropsProp]);\n\n  return (\n    <div\n      className={cx(classBase, className)}\n      data-text={value}\n      ref={forwardedRef}\n    >\n      <ComboBox<Item>\n        {...props}\n        inputProps={inputProps}\n        multiselect={multiselect}\n        onChange={handleChange}\n        onOpenChange={handleOpenChange}\n        onSelectionChange={handleSelectionChange}\n        open={open}\n        value={value}\n      >\n        {children}\n      </ComboBox>\n    </div>\n  );\n}) as <Item = string>(\n  props: ExpandoComboboxProps<Item> & { ref?: Ref<HTMLDivElement> },\n) => ReactElement;\n"],"names":["forwardRef","ExpandoCombobox","useWindow","useComponentCssInjection","expandoComboboxCss","useState","useCallback","value","open","useMemo","jsx","ComboBox"],"mappings":"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"}
+{"version":3,"file":"ExpandoCombobox.js","sources":["../../../../packages/vuu-filters/src/filter-clause/ExpandoCombobox.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { ComboBox, ComboBoxProps } from \"@salt-ds/core\";\nimport {\n  ChangeEvent,\n  ForwardedRef,\n  ReactElement,\n  Ref,\n  SyntheticEvent,\n  forwardRef,\n  useCallback,\n  useMemo,\n  useState,\n} from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport expandoComboboxCss from \"./ExpandoCombobox.css\";\n\nconst classBase = \"vuuExpandoCombobox\";\n\nexport interface ExpandoComboboxProps<Item = string>\n  extends ComboBoxProps<Item> {\n  itemToString?: (item: Item) => string;\n  dropdownOnAutofocus?: boolean;\n}\n\nexport type ComboBoxOpenChangeHandler = Exclude<\n  ComboBoxProps[\"onOpenChange\"],\n  undefined\n>;\n\nconst defaultItemToString = (item: unknown) => {\n  if (typeof item === \"string\") {\n    return item;\n  } else {\n    return item?.toString() ?? \"\";\n  }\n};\nexport const ExpandoCombobox = forwardRef(function ExpandoCombobox<\n  Item = string,\n>(\n  {\n    children,\n    className,\n    inputProps: inputPropsProp,\n    itemToString = defaultItemToString,\n    multiselect,\n    onChange,\n    onSelectionChange,\n    onOpenChange,\n    value: valueProp,\n    dropdownOnAutofocus = true,\n    ...props\n  }: ExpandoComboboxProps<Item>,\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-expando-combobox\",\n    css: expandoComboboxCss,\n    window: targetWindow,\n  });\n\n  const [open, setOpen] = useState(false);\n  const [value, setValue] = useState(\n    valueProp === undefined ? \"\" : valueProp.toString(),\n  );\n\n  const handleChange = useCallback(\n    (evt: ChangeEvent<HTMLInputElement>) => {\n      const value = evt.target.value;\n      onChange?.(evt);\n      setValue(value);\n    },\n    [onChange],\n  );\n\n  const handleSelectionChange = useCallback(\n    (evt: SyntheticEvent, newSelected: Item[]) => {\n      if (multiselect) {\n        onSelectionChange?.(evt, newSelected);\n      } else {\n        const [selectedValue] = newSelected;\n        setTimeout(() => {\n          onSelectionChange?.(evt, newSelected);\n          setValue(itemToString(selectedValue));\n        }, 100);\n      }\n    },\n    [onSelectionChange, itemToString, multiselect],\n  );\n\n  const handleOpenChange = useCallback<ComboBoxOpenChangeHandler>(\n    (open, reason) => {\n      onOpenChange?.(open, reason);\n      setOpen(open);\n    },\n    [onOpenChange],\n  );\n\n  const inputProps = useMemo<ComboBoxProps<Item>[\"inputProps\"]>(() => {\n    return {\n      autoComplete: \"off\",\n      ...inputPropsProp,\n      onFocus: (evt) => {\n        inputPropsProp?.onFocus?.(evt);\n        if (!dropdownOnAutofocus) return;\n\n        setTimeout(() => {\n          setOpen(true);\n        }, 100);\n      },\n    };\n  }, [inputPropsProp, dropdownOnAutofocus]);\n\n  return (\n    <div\n      className={cx(classBase, className)}\n      data-text={value}\n      ref={forwardedRef}\n    >\n      <ComboBox<Item>\n        {...props}\n        inputProps={inputProps}\n        multiselect={multiselect}\n        onChange={handleChange}\n        onOpenChange={handleOpenChange}\n        onSelectionChange={handleSelectionChange}\n        open={open}\n        value={value}\n      >\n        {children}\n      </ComboBox>\n    </div>\n  );\n}) as <Item = string>(\n  props: ExpandoComboboxProps<Item> & { ref?: Ref<HTMLDivElement> },\n) => ReactElement;\n"],"names":["forwardRef","ExpandoCombobox","useWindow","useComponentCssInjection","expandoComboboxCss","useState","useCallback","value","open","useMemo","jsx","ComboBox"],"mappings":"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"}

package/cjs/filter-clause/FilterClause.js

@@ -20,7 +20,7 @@ const FilterClause = ({
   onFocusSave,
   filterClauseModel,
   vuuTable,
-  openDropdownOnFocus = true,
+  dropdownOnAutofocus = true,
   ...htmlAttributes
 }) => {
   const {
@@ -34,13 +34,14 @@ const FilterClause = ({
     onOpenChange,
     operatorRef,
     selectedColumn,
-    valueRef
+    valueRef,
+    showDropdownOnAutoFocus
   } = useFilterClause.useFilterClause({
     filterClauseModel,
     onCancel,
     onFocusSave,
     columnsByName,
-    openDropdownOnFocus
+    dropdownOnAutofocus
   });
   const targetWindow = window.useWindow();
   styles.useComponentCssInjection({
@@ -58,7 +59,8 @@ const FilterClause = ({
         columns,
         onSelect: onSelectColumn,
         ref: columnRef,
-        value: filterClauseModel.column ?? ""
+        value: filterClauseModel.column ?? "",
+        dropdownOnAutofocus: showDropdownOnAutoFocus
       },
       "column-field"
     ),
@@ -72,7 +74,8 @@ const FilterClause = ({
         }),
         onSelect: onSelectOperator,
         ref: operatorRef,
-        value: filterClauseModel.op ?? ""
+        value: filterClauseModel.op ?? "",
+        dropdownOnAutofocus: showDropdownOnAutoFocus
       },
       "operator-field"
     ) : null,
@@ -87,7 +90,8 @@ const FilterClause = ({
         ref: valueRef,
         selectedColumn,
         table: vuuTable,
-        value: filterClause?.values ?? filterClause?.value
+        value: filterClause?.values ?? filterClause?.value,
+        dropdownOnAutofocus: showDropdownOnAutoFocus
       },
       "value-field"
     ) : null

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

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

package/cjs/filter-clause/OperatorPicker.js

@@ -7,13 +7,7 @@ var react = require('react');
 var ExpandoCombobox = require('./ExpandoCombobox.js');
 var operatorUtils = require('./operator-utils.js');
 
-const OperatorPicker = react.forwardRef(function ColumnPicker({
-  className,
-  column,
-  inputProps,
-  onSelect,
-  value
-}, forwardedRef) {
+const OperatorPicker = react.forwardRef(function ColumnPicker({ className, column, inputProps, onSelect, value, dropdownOnAutofocus = true }, forwardedRef) {
   const handleSelectionChange = (evt, newSelected) => {
     const [selectedValue] = newSelected;
     if (vuuUtils.isValidFilterClauseOp(selectedValue)) {
@@ -30,6 +24,7 @@ const OperatorPicker = react.forwardRef(function ColumnPicker({
       ref: forwardedRef,
       title: "operator",
       value,
+      dropdownOnAutofocus,
       children: operatorUtils.getOperators(column).map((op) => /* @__PURE__ */ jsxRuntime.jsx(core.Option, { value: op }, op))
     }
   );

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

@@ -1 +1 @@
-{"version":3,"file":"OperatorPicker.js","sources":["../../../../packages/vuu-filters/src/filter-clause/OperatorPicker.tsx"],"sourcesContent":["import type { FilterClauseOp } from \"@vuu-ui/vuu-filter-types\";\nimport type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { isValidFilterClauseOp } from \"@vuu-ui/vuu-utils\";\nimport { ComboBoxProps, Option } from \"@salt-ds/core\";\nimport { ForwardedRef, SyntheticEvent, forwardRef } from \"react\";\nimport { ExpandoCombobox } from \"./ExpandoCombobox\";\nimport { getOperators } from \"./operator-utils\";\n\nexport type OperatorPickerProps = Pick<\n  ComboBoxProps,\n  \"className\" | \"inputProps\" | \"value\"\n> & {\n  column: ColumnDescriptor;\n  onSelect: (evt: SyntheticEvent, operator: FilterClauseOp) => void;\n};\n\nexport const OperatorPicker = forwardRef(function ColumnPicker(\n  {\n    className,\n    column,\n    inputProps,\n    onSelect,\n    value,\n  }: OperatorPickerProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  const handleSelectionChange = (\n    evt: SyntheticEvent,\n    newSelected: string[],\n  ) => {\n    const [selectedValue] = newSelected;\n    if (isValidFilterClauseOp(selectedValue)) {\n      onSelect(evt, selectedValue);\n    }\n  };\n\n  return (\n    <ExpandoCombobox\n      inputProps={inputProps}\n      className={className}\n      data-field=\"operator\"\n      onSelectionChange={handleSelectionChange}\n      ref={forwardedRef}\n      title=\"operator\"\n      value={value}\n    >\n      {getOperators(column).map((op) => (\n        <Option value={op} key={op} />\n      ))}\n    </ExpandoCombobox>\n  );\n});\n"],"names":["forwardRef","isValidFilterClauseOp","jsx","ExpandoCombobox","getOperators","Option"],"mappings":";;;;;;;;;AAgBa,MAAA,cAAA,GAAiBA,gBAAW,CAAA,SAAS,YAChD,CAAA;AAAA,EACE,SAAA;AAAA,EACA,MAAA;AAAA,EACA,UAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAA,EACA,YACA,EAAA;AACA,EAAM,MAAA,qBAAA,GAAwB,CAC5B,GAAA,EACA,WACG,KAAA;AACH,IAAM,MAAA,CAAC,aAAa,CAAI,GAAA,WAAA;AACxB,IAAI,IAAAC,8BAAA,CAAsB,aAAa,CAAG,EAAA;AACxC,MAAA,QAAA,CAAS,KAAK,aAAa,CAAA;AAAA;AAC7B,GACF;AAEA,EACE,uBAAAC,cAAA;AAAA,IAACC,+BAAA;AAAA,IAAA;AAAA,MACC,UAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAW,EAAA,UAAA;AAAA,MACX,iBAAmB,EAAA,qBAAA;AAAA,MACnB,GAAK,EAAA,YAAA;AAAA,MACL,KAAM,EAAA,UAAA;AAAA,MACN,KAAA;AAAA,MAEC,QAAA,EAAAC,0BAAA,CAAa,MAAM,CAAA,CAAE,GAAI,CAAA,CAAC,EACzB,qBAAAF,cAAA,CAACG,WAAO,EAAA,EAAA,KAAA,EAAO,EAAS,EAAA,EAAA,EAAI,CAC7B;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}
+{"version":3,"file":"OperatorPicker.js","sources":["../../../../packages/vuu-filters/src/filter-clause/OperatorPicker.tsx"],"sourcesContent":["import type { FilterClauseOp } from \"@vuu-ui/vuu-filter-types\";\nimport type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { isValidFilterClauseOp } from \"@vuu-ui/vuu-utils\";\nimport { ComboBoxProps, Option } from \"@salt-ds/core\";\nimport { ForwardedRef, SyntheticEvent, forwardRef } from \"react\";\nimport { ExpandoCombobox } from \"./ExpandoCombobox\";\nimport { getOperators } from \"./operator-utils\";\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 ColumnPicker(\n  { className, column, inputProps, onSelect, value, dropdownOnAutofocus = true }: OperatorPickerProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  const handleSelectionChange = (\n    evt: SyntheticEvent,\n    newSelected: string[],\n  ) => {\n    const [selectedValue] = newSelected;\n    if (isValidFilterClauseOp(selectedValue)) {\n      onSelect(evt, selectedValue);\n    }\n  };\n\n  return (\n    <ExpandoCombobox\n      inputProps={inputProps}\n      className={className}\n      data-field=\"operator\"\n      onSelectionChange={handleSelectionChange}\n      ref={forwardedRef}\n      title=\"operator\"\n      value={value}\n      dropdownOnAutofocus={dropdownOnAutofocus}\n    >\n      {getOperators(column).map((op) => (\n        <Option value={op} key={op} />\n      ))}\n    </ExpandoCombobox>\n  );\n});\n"],"names":["forwardRef","isValidFilterClauseOp","jsx","ExpandoCombobox","getOperators","Option"],"mappings":";;;;;;;;;AAiBO,MAAM,cAAiB,GAAAA,gBAAA,CAAW,SAAS,YAAA,CAChD,EAAE,SAAA,EAAW,MAAQ,EAAA,UAAA,EAAY,QAAU,EAAA,KAAA,EAAO,mBAAsB,GAAA,IAAA,IACxE,YACA,EAAA;AACA,EAAM,MAAA,qBAAA,GAAwB,CAC5B,GAAA,EACA,WACG,KAAA;AACH,IAAM,MAAA,CAAC,aAAa,CAAI,GAAA,WAAA;AACxB,IAAI,IAAAC,8BAAA,CAAsB,aAAa,CAAG,EAAA;AACxC,MAAA,QAAA,CAAS,KAAK,aAAa,CAAA;AAAA;AAC7B,GACF;AAEA,EACE,uBAAAC,cAAA;AAAA,IAACC,+BAAA;AAAA,IAAA;AAAA,MACC,UAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAW,EAAA,UAAA;AAAA,MACX,iBAAmB,EAAA,qBAAA;AAAA,MACnB,GAAK,EAAA,YAAA;AAAA,MACL,KAAM,EAAA,UAAA;AAAA,MACN,KAAA;AAAA,MACA,mBAAA;AAAA,MAEC,QAAA,EAAAC,0BAAA,CAAa,MAAM,CAAA,CAAE,GAAI,CAAA,CAAC,EACzB,qBAAAF,cAAA,CAACG,WAAO,EAAA,EAAA,KAAA,EAAO,EAAS,EAAA,EAAA,EAAI,CAC7B;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}

package/cjs/filter-clause/filterClauseFocusManagement.js

@@ -31,7 +31,7 @@ const getFocusedFieldDetails = () => {
       return [vuuUtils.getElementDataIndex(filterClause), getFilterClauseDetails(field)];
     }
   } else if (field?.matches(".saltCalendar")) {
-    console.log("muthafucker is ins a calendar");
+    console.log("its in a calendar");
   }
   return [];
 };