@vuu-ui/vuu-filters 0.13.26 → 0.13.27

package/cjs/basic-column-filter/BasicColumnFilter.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var basicColumnFilterCss = ".vuuBasicColumnFilter {\n  border: solid 1px var(--salt-editable-borderColor);\n  border-radius: 4px;\n  max-width: 210px;\n\n  .vuuBasicColumnFilter-edit-control {\n    display: flex;\n  }\n}\n";
+
+module.exports = basicColumnFilterCss;
+//# sourceMappingURL=BasicColumnFilter.css.js.map

package/cjs/basic-column-filter/BasicColumnFilter.css.js.map

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

package/cjs/basic-column-filter/BasicColumnFilter.js

@@ -0,0 +1,61 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var cx = require('clsx');
+var vuuDataReact = require('@vuu-ui/vuu-data-react');
+var react = require('react');
+var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
+var useBasicColumnFilter = require('./useBasicColumnFilter.js');
+var BasicColumnFilter$1 = require('./BasicColumnFilter.css.js');
+
+const classBase = "vuuBasicColumnFilter";
+const searchIcon = /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { name: "search", size: 18 });
+const BasicColumnFilter = react.forwardRef(function BasicColumnFilter2({
+  column,
+  className,
+  table,
+  initialValue,
+  onApplyFilter,
+  withStartAdornment = true,
+  ...htmlAttributes
+}, forwardRef2) {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-basic-column-filter",
+    css: BasicColumnFilter$1,
+    window: targetWindow
+  });
+  const { filterValue, onInputChange, onCommit } = useBasicColumnFilter.useBasicColumnFilter({
+    column,
+    initialValue,
+    onApplyFilter
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...htmlAttributes,
+      className: cx(classBase, className),
+      ref: forwardRef2,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${classBase}-edit-control`, children: [
+        withStartAdornment && searchIcon,
+        vuuDataReact.getDataItemEditControl({
+          InputProps: {
+            inputProps: {
+              placeholder: "Find",
+              value: filterValue,
+              onChange: onInputChange
+            }
+          },
+          dataDescriptor: column,
+          table,
+          onCommit
+        })
+      ] })
+    }
+  );
+});
+
+exports.BasicColumnFilter = BasicColumnFilter;
+//# sourceMappingURL=BasicColumnFilter.js.map

package/cjs/basic-column-filter/BasicColumnFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BasicColumnFilter.js","sources":["../../../../packages/vuu-filters/src/basic-column-filter/BasicColumnFilter.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { getDataItemEditControl } from \"@vuu-ui/vuu-data-react\";\nimport { ForwardedRef, forwardRef, HTMLAttributes, ReactElement } from \"react\";\nimport { VuuTable } from \"@vuu-ui/vuu-protocol-types\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { Icon } from \"@vuu-ui/vuu-ui-controls\";\nimport { FilterBarProps } from \"../filter-bar\";\nimport { useBasicColumnFilter } from \"./useBasicColumnFilter\";\n\nimport basicColumnFilterCss from \"./BasicColumnFilter.css\";\n\nexport type FilterValue = string | number;\n\nconst classBase = \"vuuBasicColumnFilter\";\nconst searchIcon = <Icon name=\"search\" size={18} />;\n\nexport interface BasicColumnFilterProps\n  extends HTMLAttributes<HTMLDivElement>,\n    Pick<FilterBarProps, \"onApplyFilter\"> {\n  /**\n   * Column Attributes.\n   */\n  column: ColumnDescriptor;\n  /**\n   * VuuTable is required if typeahead support is expected.\n   */\n  table?: VuuTable;\n  /**\n   * Initial filter value.\n   */\n  initialValue?: FilterValue;\n  /**\n   *Show search icon as start adornment.\n   */\n  withStartAdornment?: boolean;\n}\n\nexport const BasicColumnFilter = forwardRef(function BasicColumnFilter(\n  {\n    column,\n    className,\n    table,\n    initialValue,\n    onApplyFilter,\n    withStartAdornment = true,\n    ...htmlAttributes\n  }: BasicColumnFilterProps,\n  forwardRef: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-basic-column-filter\",\n    css: basicColumnFilterCss,\n    window: targetWindow,\n  });\n\n  const { filterValue, onInputChange, onCommit } = useBasicColumnFilter({\n    column,\n    initialValue,\n    onApplyFilter,\n  });\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(classBase, className)}\n      ref={forwardRef}\n    >\n      <div className={`${classBase}-edit-control`}>\n        {withStartAdornment && searchIcon}\n        {getDataItemEditControl({\n          InputProps: {\n            inputProps: {\n              placeholder: \"Find\",\n              value: filterValue,\n              onChange: onInputChange,\n            },\n          },\n          dataDescriptor: column,\n          table,\n          onCommit,\n        })}\n      </div>\n    </div>\n  );\n}) as (\n  props: BasicColumnFilterProps & {\n    ref?: ForwardedRef<HTMLDivElement>;\n  },\n) => ReactElement<BasicColumnFilterProps>;\n"],"names":["jsx","Icon","forwardRef","BasicColumnFilter","useWindow","useComponentCssInjection","basicColumnFilterCss","useBasicColumnFilter","jsxs","getDataItemEditControl"],"mappings":";;;;;;;;;;;;AAeA,MAAM,SAAY,GAAA,sBAAA;AAClB,MAAM,6BAAcA,cAAA,CAAAC,kBAAA,EAAA,EAAK,IAAK,EAAA,QAAA,EAAS,MAAM,EAAI,EAAA,CAAA;AAuBpC,MAAA,iBAAA,GAAoBC,gBAAW,CAAA,SAASC,kBACnD,CAAA;AAAA,EACE,MAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,kBAAqB,GAAA,IAAA;AAAA,EACrB,GAAG;AACL,CAAA,EACAD,WACA,EAAA;AACA,EAAA,MAAM,eAAeE,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,yBAAA;AAAA,IACR,GAAK,EAAAC,mBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,WAAA,EAAa,aAAe,EAAA,QAAA,KAAaC,yCAAqB,CAAA;AAAA,IACpE,MAAA;AAAA,IACA,YAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EACE,uBAAAP,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,GAAKE,EAAAA,WAAAA;AAAA,MAEL,QAAC,kBAAAM,eAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CACzB,aAAA,CAAA,EAAA,QAAA,EAAA;AAAA,QAAsB,kBAAA,IAAA,UAAA;AAAA,QACtBC,mCAAuB,CAAA;AAAA,UACtB,UAAY,EAAA;AAAA,YACV,UAAY,EAAA;AAAA,cACV,WAAa,EAAA,MAAA;AAAA,cACb,KAAO,EAAA,WAAA;AAAA,cACP,QAAU,EAAA;AAAA;AACZ,WACF;AAAA,UACA,cAAgB,EAAA,MAAA;AAAA,UAChB,KAAA;AAAA,UACA;AAAA,SACD;AAAA,OACH,EAAA;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}

package/cjs/basic-column-filter/useBasicColumnFilter.js

@@ -0,0 +1,45 @@
+'use strict';
+
+var react = require('react');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+
+const filterOp = "=";
+const asDataSourceFilter = (filter) => {
+  if (filter) {
+    return {
+      filter: vuuUtils.filterAsQuery(filter),
+      filterStruct: filter
+    };
+  } else {
+    return vuuUtils.NoFilter;
+  }
+};
+const useBasicColumnFilter = ({
+  initialValue,
+  column,
+  onApplyFilter
+}) => {
+  const [filterValue, setFilterValue] = react.useState(initialValue);
+  const handleInputChange = react.useCallback(
+    (e) => {
+      setFilterValue(e.target.value);
+    },
+    []
+  );
+  const handleCommit = react.useCallback(
+    (_, value) => {
+      const filter = { column: column.name, op: filterOp, value };
+      setFilterValue((value ?? "").toString());
+      onApplyFilter?.(asDataSourceFilter(filter));
+    },
+    [column, onApplyFilter]
+  );
+  return {
+    filterValue: filterValue ?? "",
+    onInputChange: handleInputChange,
+    onCommit: handleCommit
+  };
+};
+
+exports.useBasicColumnFilter = useBasicColumnFilter;
+//# sourceMappingURL=useBasicColumnFilter.js.map

package/cjs/basic-column-filter/useBasicColumnFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBasicColumnFilter.js","sources":["../../../../packages/vuu-filters/src/basic-column-filter/useBasicColumnFilter.ts"],"sourcesContent":["import { ChangeEventHandler, useCallback, useState } from \"react\";\nimport { BasicColumnFilterProps } from \"./BasicColumnFilter\";\nimport { CommitHandler, filterAsQuery, NoFilter } from \"@vuu-ui/vuu-utils\";\nimport { Filter, SingleValueFilterClauseOp } from \"@vuu-ui/vuu-filter-types\";\nimport { DataSourceFilter } from \"@vuu-ui/vuu-data-types\";\n\nexport type FilterValue = string | number;\n\nexport type BasicColumnFilterHookProps = Pick<\n  BasicColumnFilterProps,\n  \"column\" | \"onApplyFilter\" | \"initialValue\"\n>;\n\nconst filterOp: SingleValueFilterClauseOp = \"=\";\n\nconst asDataSourceFilter = (filter: Filter): DataSourceFilter => {\n  if (filter) {\n    return {\n      filter: filterAsQuery(filter),\n      filterStruct: filter,\n    };\n  } else {\n    return NoFilter;\n  }\n};\n\nexport const useBasicColumnFilter = ({\n  initialValue,\n  column,\n  onApplyFilter,\n}: BasicColumnFilterHookProps) => {\n  const [filterValue, setFilterValue] = useState(initialValue);\n\n  const handleInputChange = useCallback<ChangeEventHandler<HTMLInputElement>>(\n    (e) => {\n      setFilterValue(e.target.value);\n    },\n    [],\n  );\n\n  const handleCommit = useCallback<CommitHandler<HTMLElement>>(\n    (_, value) => {\n      const filter: Filter = { column: column.name, op: filterOp, value };\n      setFilterValue((value ?? \"\").toString());\n      onApplyFilter?.(asDataSourceFilter(filter));\n    },\n    [column, onApplyFilter],\n  );\n\n  return {\n    filterValue: filterValue ?? \"\",\n    onInputChange: handleInputChange,\n    onCommit: handleCommit,\n  };\n};\n"],"names":["filterAsQuery","NoFilter","useState","useCallback"],"mappings":";;;;;AAaA,MAAM,QAAsC,GAAA,GAAA;AAE5C,MAAM,kBAAA,GAAqB,CAAC,MAAqC,KAAA;AAC/D,EAAA,IAAI,MAAQ,EAAA;AACV,IAAO,OAAA;AAAA,MACL,MAAA,EAAQA,uBAAc,MAAM,CAAA;AAAA,MAC5B,YAAc,EAAA;AAAA,KAChB;AAAA,GACK,MAAA;AACL,IAAO,OAAAC,iBAAA;AAAA;AAEX,CAAA;AAEO,MAAM,uBAAuB,CAAC;AAAA,EACnC,YAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAkC,KAAA;AAChC,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAIC,eAAS,YAAY,CAAA;AAE3D,EAAA,MAAM,iBAAoB,GAAAC,iBAAA;AAAA,IACxB,CAAC,CAAM,KAAA;AACL,MAAe,cAAA,CAAA,CAAA,CAAE,OAAO,KAAK,CAAA;AAAA,KAC/B;AAAA,IACA;AAAC,GACH;AAEA,EAAA,MAAM,YAAe,GAAAA,iBAAA;AAAA,IACnB,CAAC,GAAG,KAAU,KAAA;AACZ,MAAA,MAAM,SAAiB,EAAE,MAAA,EAAQ,OAAO,IAAM,EAAA,EAAA,EAAI,UAAU,KAAM,EAAA;AAClE,MAAgB,cAAA,CAAA,CAAA,KAAA,IAAS,EAAI,EAAA,QAAA,EAAU,CAAA;AACvC,MAAgB,aAAA,GAAA,kBAAA,CAAmB,MAAM,CAAC,CAAA;AAAA,KAC5C;AAAA,IACA,CAAC,QAAQ,aAAa;AAAA,GACxB;AAEA,EAAO,OAAA;AAAA,IACL,aAAa,WAAe,IAAA,EAAA;AAAA,IAC5B,aAAe,EAAA,iBAAA;AAAA,IACf,QAAU,EAAA;AAAA,GACZ;AACF;;;;"}

package/cjs/index.js

@@ -14,6 +14,7 @@ var filterUtils = require('./filter-utils.js');
 var FilterModel = require('./FilterModel.js');
 var InlineFilter = require('./inline-filter/InlineFilter.js');
 var QuickFilters = require('./quick-filters/QuickFilters.js');
+var BasicColumnFilter = require('./basic-column-filter/BasicColumnFilter.js');
 var SavedFilterPanel = require('./saved-filters/SavedFilterPanel.js');
 var FilterNamePrompt = require('./saved-filters/FilterNamePrompt.js');
 
@@ -55,6 +56,7 @@ exports.FilterClauseModel = FilterModel.FilterClauseModel;
 exports.FilterModel = FilterModel.FilterModel;
 exports.InlineFilter = InlineFilter.InlineFilter;
 exports.QuickFilters = QuickFilters.QuickFilters;
+exports.BasicColumnFilter = BasicColumnFilter.BasicColumnFilter;
 exports.SavedFilterPanel = SavedFilterPanel.SavedFilterPanel;
 exports.SaveFilterConfirmPrompt = FilterNamePrompt.FilterNamePrompt;
 //# sourceMappingURL=index.js.map

package/cjs/index.js.map

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

package/esm/basic-column-filter/BasicColumnFilter.css.js

@@ -0,0 +1,4 @@
+var basicColumnFilterCss = ".vuuBasicColumnFilter {\n  border: solid 1px var(--salt-editable-borderColor);\n  border-radius: 4px;\n  max-width: 210px;\n\n  .vuuBasicColumnFilter-edit-control {\n    display: flex;\n  }\n}\n";
+
+export { basicColumnFilterCss as default };
+//# sourceMappingURL=BasicColumnFilter.css.js.map

package/esm/basic-column-filter/BasicColumnFilter.css.js.map

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

package/esm/basic-column-filter/BasicColumnFilter.js

@@ -0,0 +1,59 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import cx from 'clsx';
+import { getDataItemEditControl } from '@vuu-ui/vuu-data-react';
+import { forwardRef } from 'react';
+import { Icon } from '@vuu-ui/vuu-ui-controls';
+import { useBasicColumnFilter } from './useBasicColumnFilter.js';
+import basicColumnFilterCss from './BasicColumnFilter.css.js';
+
+const classBase = "vuuBasicColumnFilter";
+const searchIcon = /* @__PURE__ */ jsx(Icon, { name: "search", size: 18 });
+const BasicColumnFilter = forwardRef(function BasicColumnFilter2({
+  column,
+  className,
+  table,
+  initialValue,
+  onApplyFilter,
+  withStartAdornment = true,
+  ...htmlAttributes
+}, forwardRef2) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-basic-column-filter",
+    css: basicColumnFilterCss,
+    window: targetWindow
+  });
+  const { filterValue, onInputChange, onCommit } = useBasicColumnFilter({
+    column,
+    initialValue,
+    onApplyFilter
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...htmlAttributes,
+      className: cx(classBase, className),
+      ref: forwardRef2,
+      children: /* @__PURE__ */ jsxs("div", { className: `${classBase}-edit-control`, children: [
+        withStartAdornment && searchIcon,
+        getDataItemEditControl({
+          InputProps: {
+            inputProps: {
+              placeholder: "Find",
+              value: filterValue,
+              onChange: onInputChange
+            }
+          },
+          dataDescriptor: column,
+          table,
+          onCommit
+        })
+      ] })
+    }
+  );
+});
+
+export { BasicColumnFilter };
+//# sourceMappingURL=BasicColumnFilter.js.map

package/esm/basic-column-filter/BasicColumnFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BasicColumnFilter.js","sources":["../../../../packages/vuu-filters/src/basic-column-filter/BasicColumnFilter.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { getDataItemEditControl } from \"@vuu-ui/vuu-data-react\";\nimport { ForwardedRef, forwardRef, HTMLAttributes, ReactElement } from \"react\";\nimport { VuuTable } from \"@vuu-ui/vuu-protocol-types\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { Icon } from \"@vuu-ui/vuu-ui-controls\";\nimport { FilterBarProps } from \"../filter-bar\";\nimport { useBasicColumnFilter } from \"./useBasicColumnFilter\";\n\nimport basicColumnFilterCss from \"./BasicColumnFilter.css\";\n\nexport type FilterValue = string | number;\n\nconst classBase = \"vuuBasicColumnFilter\";\nconst searchIcon = <Icon name=\"search\" size={18} />;\n\nexport interface BasicColumnFilterProps\n  extends HTMLAttributes<HTMLDivElement>,\n    Pick<FilterBarProps, \"onApplyFilter\"> {\n  /**\n   * Column Attributes.\n   */\n  column: ColumnDescriptor;\n  /**\n   * VuuTable is required if typeahead support is expected.\n   */\n  table?: VuuTable;\n  /**\n   * Initial filter value.\n   */\n  initialValue?: FilterValue;\n  /**\n   *Show search icon as start adornment.\n   */\n  withStartAdornment?: boolean;\n}\n\nexport const BasicColumnFilter = forwardRef(function BasicColumnFilter(\n  {\n    column,\n    className,\n    table,\n    initialValue,\n    onApplyFilter,\n    withStartAdornment = true,\n    ...htmlAttributes\n  }: BasicColumnFilterProps,\n  forwardRef: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-basic-column-filter\",\n    css: basicColumnFilterCss,\n    window: targetWindow,\n  });\n\n  const { filterValue, onInputChange, onCommit } = useBasicColumnFilter({\n    column,\n    initialValue,\n    onApplyFilter,\n  });\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(classBase, className)}\n      ref={forwardRef}\n    >\n      <div className={`${classBase}-edit-control`}>\n        {withStartAdornment && searchIcon}\n        {getDataItemEditControl({\n          InputProps: {\n            inputProps: {\n              placeholder: \"Find\",\n              value: filterValue,\n              onChange: onInputChange,\n            },\n          },\n          dataDescriptor: column,\n          table,\n          onCommit,\n        })}\n      </div>\n    </div>\n  );\n}) as (\n  props: BasicColumnFilterProps & {\n    ref?: ForwardedRef<HTMLDivElement>;\n  },\n) => ReactElement<BasicColumnFilterProps>;\n"],"names":["BasicColumnFilter","forwardRef"],"mappings":";;;;;;;;;;AAeA,MAAM,SAAY,GAAA,sBAAA;AAClB,MAAM,6BAAc,GAAA,CAAA,IAAA,EAAA,EAAK,IAAK,EAAA,QAAA,EAAS,MAAM,EAAI,EAAA,CAAA;AAuBpC,MAAA,iBAAA,GAAoB,UAAW,CAAA,SAASA,kBACnD,CAAA;AAAA,EACE,MAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,kBAAqB,GAAA,IAAA;AAAA,EACrB,GAAG;AACL,CAAA,EACAC,WACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,yBAAA;AAAA,IACR,GAAK,EAAA,oBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,WAAA,EAAa,aAAe,EAAA,QAAA,KAAa,oBAAqB,CAAA;AAAA,IACpE,MAAA;AAAA,IACA,YAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,GAAKA,EAAAA,WAAAA;AAAA,MAEL,QAAC,kBAAA,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CACzB,aAAA,CAAA,EAAA,QAAA,EAAA;AAAA,QAAsB,kBAAA,IAAA,UAAA;AAAA,QACtB,sBAAuB,CAAA;AAAA,UACtB,UAAY,EAAA;AAAA,YACV,UAAY,EAAA;AAAA,cACV,WAAa,EAAA,MAAA;AAAA,cACb,KAAO,EAAA,WAAA;AAAA,cACP,QAAU,EAAA;AAAA;AACZ,WACF;AAAA,UACA,cAAgB,EAAA,MAAA;AAAA,UAChB,KAAA;AAAA,UACA;AAAA,SACD;AAAA,OACH,EAAA;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}

package/esm/basic-column-filter/useBasicColumnFilter.js

@@ -0,0 +1,43 @@
+import { useState, useCallback } from 'react';
+import { filterAsQuery, NoFilter } from '@vuu-ui/vuu-utils';
+
+const filterOp = "=";
+const asDataSourceFilter = (filter) => {
+  if (filter) {
+    return {
+      filter: filterAsQuery(filter),
+      filterStruct: filter
+    };
+  } else {
+    return NoFilter;
+  }
+};
+const useBasicColumnFilter = ({
+  initialValue,
+  column,
+  onApplyFilter
+}) => {
+  const [filterValue, setFilterValue] = useState(initialValue);
+  const handleInputChange = useCallback(
+    (e) => {
+      setFilterValue(e.target.value);
+    },
+    []
+  );
+  const handleCommit = useCallback(
+    (_, value) => {
+      const filter = { column: column.name, op: filterOp, value };
+      setFilterValue((value ?? "").toString());
+      onApplyFilter?.(asDataSourceFilter(filter));
+    },
+    [column, onApplyFilter]
+  );
+  return {
+    filterValue: filterValue ?? "",
+    onInputChange: handleInputChange,
+    onCommit: handleCommit
+  };
+};
+
+export { useBasicColumnFilter };
+//# sourceMappingURL=useBasicColumnFilter.js.map

package/esm/basic-column-filter/useBasicColumnFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBasicColumnFilter.js","sources":["../../../../packages/vuu-filters/src/basic-column-filter/useBasicColumnFilter.ts"],"sourcesContent":["import { ChangeEventHandler, useCallback, useState } from \"react\";\nimport { BasicColumnFilterProps } from \"./BasicColumnFilter\";\nimport { CommitHandler, filterAsQuery, NoFilter } from \"@vuu-ui/vuu-utils\";\nimport { Filter, SingleValueFilterClauseOp } from \"@vuu-ui/vuu-filter-types\";\nimport { DataSourceFilter } from \"@vuu-ui/vuu-data-types\";\n\nexport type FilterValue = string | number;\n\nexport type BasicColumnFilterHookProps = Pick<\n  BasicColumnFilterProps,\n  \"column\" | \"onApplyFilter\" | \"initialValue\"\n>;\n\nconst filterOp: SingleValueFilterClauseOp = \"=\";\n\nconst asDataSourceFilter = (filter: Filter): DataSourceFilter => {\n  if (filter) {\n    return {\n      filter: filterAsQuery(filter),\n      filterStruct: filter,\n    };\n  } else {\n    return NoFilter;\n  }\n};\n\nexport const useBasicColumnFilter = ({\n  initialValue,\n  column,\n  onApplyFilter,\n}: BasicColumnFilterHookProps) => {\n  const [filterValue, setFilterValue] = useState(initialValue);\n\n  const handleInputChange = useCallback<ChangeEventHandler<HTMLInputElement>>(\n    (e) => {\n      setFilterValue(e.target.value);\n    },\n    [],\n  );\n\n  const handleCommit = useCallback<CommitHandler<HTMLElement>>(\n    (_, value) => {\n      const filter: Filter = { column: column.name, op: filterOp, value };\n      setFilterValue((value ?? \"\").toString());\n      onApplyFilter?.(asDataSourceFilter(filter));\n    },\n    [column, onApplyFilter],\n  );\n\n  return {\n    filterValue: filterValue ?? \"\",\n    onInputChange: handleInputChange,\n    onCommit: handleCommit,\n  };\n};\n"],"names":[],"mappings":";;;AAaA,MAAM,QAAsC,GAAA,GAAA;AAE5C,MAAM,kBAAA,GAAqB,CAAC,MAAqC,KAAA;AAC/D,EAAA,IAAI,MAAQ,EAAA;AACV,IAAO,OAAA;AAAA,MACL,MAAA,EAAQ,cAAc,MAAM,CAAA;AAAA,MAC5B,YAAc,EAAA;AAAA,KAChB;AAAA,GACK,MAAA;AACL,IAAO,OAAA,QAAA;AAAA;AAEX,CAAA;AAEO,MAAM,uBAAuB,CAAC;AAAA,EACnC,YAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAkC,KAAA;AAChC,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,YAAY,CAAA;AAE3D,EAAA,MAAM,iBAAoB,GAAA,WAAA;AAAA,IACxB,CAAC,CAAM,KAAA;AACL,MAAe,cAAA,CAAA,CAAA,CAAE,OAAO,KAAK,CAAA;AAAA,KAC/B;AAAA,IACA;AAAC,GACH;AAEA,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,GAAG,KAAU,KAAA;AACZ,MAAA,MAAM,SAAiB,EAAE,MAAA,EAAQ,OAAO,IAAM,EAAA,EAAA,EAAI,UAAU,KAAM,EAAA;AAClE,MAAgB,cAAA,CAAA,CAAA,KAAA,IAAS,EAAI,EAAA,QAAA,EAAU,CAAA;AACvC,MAAgB,aAAA,GAAA,kBAAA,CAAmB,MAAM,CAAC,CAAA;AAAA,KAC5C;AAAA,IACA,CAAC,QAAQ,aAAa;AAAA,GACxB;AAEA,EAAO,OAAA;AAAA,IACL,aAAa,WAAe,IAAA,EAAA;AAAA,IAC5B,aAAe,EAAA,iBAAA;AAAA,IACf,QAAU,EAAA;AAAA,GACZ;AACF;;;;"}

package/esm/index.js

@@ -12,6 +12,7 @@ export { AND, ENDS_WITH, EQUALS, GREATER_THAN, IN, LESS_THAN, OR, STARTS_WITH, a
 export { FilterClauseModel, FilterModel } from './FilterModel.js';
 export { InlineFilter } from './inline-filter/InlineFilter.js';
 export { QuickFilters } from './quick-filters/QuickFilters.js';
+export { BasicColumnFilter } from './basic-column-filter/BasicColumnFilter.js';
 export { SavedFilterPanel } from './saved-filters/SavedFilterPanel.js';
 export { FilterNamePrompt as SaveFilterConfirmPrompt } from './saved-filters/FilterNamePrompt.js';
 //# sourceMappingURL=index.js.map

package/esm/index.js.map

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

package/package.json

@@ -1,21 +1,21 @@
 {
-  "version": "0.13.26",
+  "version": "0.13.27",
   "author": "heswell",
   "license": "Apache-2.0",
   "type": "module",
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "0.13.26",
-    "@vuu-ui/vuu-protocol-types": "0.13.26",
-    "@vuu-ui/vuu-table-types": "0.13.26",
-    "@vuu-ui/vuu-filter-types": "0.13.26"
+    "@vuu-ui/vuu-data-types": "0.13.27",
+    "@vuu-ui/vuu-protocol-types": "0.13.27",
+    "@vuu-ui/vuu-table-types": "0.13.27",
+    "@vuu-ui/vuu-filter-types": "0.13.27"
   },
   "dependencies": {
-    "@vuu-ui/vuu-data-react": "0.13.26",
-    "@vuu-ui/vuu-filter-parser": "0.13.26",
-    "@vuu-ui/vuu-popups": "0.13.26",
-    "@vuu-ui/vuu-ui-controls": "0.13.26",
-    "@vuu-ui/vuu-table": "0.13.26",
-    "@vuu-ui/vuu-utils": "0.13.26",
+    "@vuu-ui/vuu-data-react": "0.13.27",
+    "@vuu-ui/vuu-filter-parser": "0.13.27",
+    "@vuu-ui/vuu-popups": "0.13.27",
+    "@vuu-ui/vuu-ui-controls": "0.13.27",
+    "@vuu-ui/vuu-table": "0.13.27",
+    "@vuu-ui/vuu-utils": "0.13.27",
     "@salt-ds/core": "1.43.0",
     "@salt-ds/styles": "0.2.1",
     "@salt-ds/window": "0.1.1"

package/types/basic-column-filter/BasicColumnFilter.d.ts

@@ -0,0 +1,26 @@
+import { ForwardedRef, HTMLAttributes, ReactElement } from "react";
+import { VuuTable } from "@vuu-ui/vuu-protocol-types";
+import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
+import { FilterBarProps } from "../filter-bar";
+export type FilterValue = string | number;
+export interface BasicColumnFilterProps extends HTMLAttributes<HTMLDivElement>, Pick<FilterBarProps, "onApplyFilter"> {
+    /**
+     * Column Attributes.
+     */
+    column: ColumnDescriptor;
+    /**
+     * VuuTable is required if typeahead support is expected.
+     */
+    table?: VuuTable;
+    /**
+     * Initial filter value.
+     */
+    initialValue?: FilterValue;
+    /**
+     *Show search icon as start adornment.
+     */
+    withStartAdornment?: boolean;
+}
+export declare const BasicColumnFilter: (props: BasicColumnFilterProps & {
+    ref?: ForwardedRef<HTMLDivElement>;
+}) => ReactElement<BasicColumnFilterProps>;

package/types/basic-column-filter/useBasicColumnFilter.d.ts

@@ -0,0 +1,10 @@
+import { ChangeEventHandler } from "react";
+import { BasicColumnFilterProps } from "./BasicColumnFilter";
+import { CommitHandler } from "@vuu-ui/vuu-utils";
+export type FilterValue = string | number;
+export type BasicColumnFilterHookProps = Pick<BasicColumnFilterProps, "column" | "onApplyFilter" | "initialValue">;
+export declare const useBasicColumnFilter: ({ initialValue, column, onApplyFilter, }: BasicColumnFilterHookProps) => {
+    filterValue: string | number;
+    onInputChange: ChangeEventHandler<HTMLInputElement>;
+    onCommit: CommitHandler<HTMLElement>;
+};

package/types/index.d.ts

@@ -9,6 +9,7 @@ export * from "./filter-utils";
 export * from "./FilterModel";
 export * from "./inline-filter";
 export * from "./quick-filters";
+export { BasicColumnFilter, type BasicColumnFilterProps, } from "./basic-column-filter/BasicColumnFilter";
 export { SavedFilterPanel } from "./saved-filters/SavedFilterPanel";
 export type { FilterClickHandler, FilterDescriptor, } from "./saved-filters/useSavedFilterPanel";
 export { FilterNamePrompt as SaveFilterConfirmPrompt, type FilterNamePromptProps as SaveFilterConfirmPromptProps, } from "./saved-filters/FilterNamePrompt";