@vuu-ui/vuu-filters 0.8.91 → 0.8.93

package/cjs/filter-clause/value-editors/FilterClauseValueEditor.js

@@ -23,7 +23,7 @@ const FilterClauseValueEditor = react.forwardRef(
     if (selectedColumn === void 0 || operator === void 0) {
       return null;
     }
-    if (vuuUtils.isDateTimeColumn(selectedColumn)) {
+    if (vuuUtils.isDateTimeDataValue(selectedColumn)) {
       return /* @__PURE__ */ jsxRuntime.jsx(
         FilterClauseValueEditorDate.FilterClauseValueEditorDate,
         {

package/cjs/filter-clause/value-editors/FilterClauseValueEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterClauseValueEditor.js","sources":["../../../src/filter-clause/value-editors/FilterClauseValueEditor.tsx"],"sourcesContent":["import { TableSchemaTable } from \"@vuu-ui/vuu-data-types\";\nimport cx from \"clsx\";\nimport { useFilterClause } from \"../useFilterClause\";\nimport { FilterClauseValueEditorNumber } from \"./FilterClauseValueEditorNumber\";\nimport { FilterClauseValueEditorText } from \"./FilterClauseValueEditorText\";\n\nimport {\n  NumericFilterClauseOp,\n  SingleValueFilterClauseOp,\n} from \"@vuu-ui/vuu-filter-types\";\nimport { isDateTimeColumn } from \"@vuu-ui/vuu-utils\";\nimport { ForwardedRef, forwardRef } from \"react\";\nimport { FilterClauseProps } from \"../FilterClause\";\nimport { FilterClauseValueEditorDate } from \"./FilterClauseValueEditorDate\";\n\nconst classBase = \"vuuFilterClause\";\n\ntype FilterClauseValueEditorProps = Pick<\n  ReturnType<typeof useFilterClause>,\n  \"selectedColumn\" | \"inputProps\" | \"onChangeValue\" | \"onDeselectValue\"\n> &\n  Pick<FilterClauseProps, \"suggestionProvider\"> & {\n    table?: TableSchemaTable;\n  } & {\n    operator?: SingleValueFilterClauseOp | \"in\";\n    value?: string | string[] | number | number[] | boolean | boolean[];\n  };\n\nexport const FilterClauseValueEditor = forwardRef(\n  function FilterClauseValueEditor(\n    {\n      selectedColumn,\n      operator,\n      inputProps,\n      onChangeValue,\n      onDeselectValue,\n      suggestionProvider,\n      table,\n      value,\n    }: FilterClauseValueEditorProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n  ) {\n    if (selectedColumn === undefined || operator === undefined) {\n      return null;\n    }\n\n    if (isDateTimeColumn(selectedColumn)) {\n      return (\n        <FilterClauseValueEditorDate\n          inputProps={inputProps}\n          className={cx(`${classBase}Field`, `${classBase}Value`)}\n          // ref={forwardedRef}\n          value={value as number}\n          operator={operator as NumericFilterClauseOp}\n          onChangeValue={onChangeValue}\n        />\n      );\n    }\n\n    switch (selectedColumn.serverDataType) {\n      case \"string\":\n      case \"char\":\n        return (\n          <FilterClauseValueEditorText\n            inputProps={inputProps}\n            className={cx(`${classBase}Field`, `${classBase}Value`)}\n            column={selectedColumn}\n            onDeselect={onDeselectValue}\n            onChangeValue={onChangeValue}\n            operator={operator}\n            ref={forwardedRef}\n            suggestionProvider={suggestionProvider}\n            table={table}\n            value={\n              value === undefined\n                ? \"\"\n                : Array.isArray(value)\n                  ? value.map((val) => val.toString())\n                  : (value.toString() as string | string[])\n            }\n          />\n        );\n      case \"int\":\n      case \"long\":\n      case \"double\":\n        return (\n          <FilterClauseValueEditorNumber\n            inputProps={inputProps}\n            className={cx(`${classBase}Field`, `${classBase}Value`)}\n            column={selectedColumn}\n            data-field=\"value\"\n            onChangeValue={onChangeValue}\n            operator={operator}\n            ref={forwardedRef}\n          />\n        );\n      default:\n        console.log(\"returning null\");\n        return null;\n    }\n  },\n);\n"],"names":["forwardRef","FilterClauseValueEditor","isDateTimeColumn","jsx","FilterClauseValueEditorDate","FilterClauseValueEditorText","FilterClauseValueEditorNumber"],"mappings":";;;;;;;;;;AAeA,MAAM,SAAY,GAAA,iBAAA,CAAA;AAaX,MAAM,uBAA0B,GAAAA,gBAAA;AAAA,EACrC,SAASC,wBACP,CAAA;AAAA,IACE,cAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,aAAA;AAAA,IACA,eAAA;AAAA,IACA,kBAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;AAAA,KAEF,YACA,EAAA;AACA,IAAI,IAAA,cAAA,KAAmB,KAAa,CAAA,IAAA,QAAA,KAAa,KAAW,CAAA,EAAA;AAC1D,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAEA,IAAI,IAAAC,yBAAA,CAAiB,cAAc,CAAG,EAAA;AACpC,MACE,uBAAAC,cAAA;AAAA,QAACC,uDAAA;AAAA,QAAA;AAAA,UACC,UAAA;AAAA,UACA,WAAW,EAAG,CAAA,CAAA,EAAG,SAAS,CAAS,KAAA,CAAA,EAAA,CAAA,EAAG,SAAS,CAAO,KAAA,CAAA,CAAA;AAAA,UAEtD,KAAA;AAAA,UACA,QAAA;AAAA,UACA,aAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,KAEJ;AAEA,IAAA,QAAQ,eAAe,cAAgB;AAAA,MACrC,KAAK,QAAA,CAAA;AAAA,MACL,KAAK,MAAA;AACH,QACE,uBAAAD,cAAA;AAAA,UAACE,uDAAA;AAAA,UAAA;AAAA,YACC,UAAA;AAAA,YACA,WAAW,EAAG,CAAA,CAAA,EAAG,SAAS,CAAS,KAAA,CAAA,EAAA,CAAA,EAAG,SAAS,CAAO,KAAA,CAAA,CAAA;AAAA,YACtD,MAAQ,EAAA,cAAA;AAAA,YACR,UAAY,EAAA,eAAA;AAAA,YACZ,aAAA;AAAA,YACA,QAAA;AAAA,YACA,GAAK,EAAA,YAAA;AAAA,YACL,kBAAA;AAAA,YACA,KAAA;AAAA,YACA,OACE,KAAU,KAAA,KAAA,CAAA,GACN,EACA,GAAA,KAAA,CAAM,QAAQ,KAAK,CAAA,GACjB,KAAM,CAAA,GAAA,CAAI,CAAC,GAAQ,KAAA,GAAA,CAAI,UAAU,CAAA,GAChC,MAAM,QAAS,EAAA;AAAA,WAAA;AAAA,SAE1B,CAAA;AAAA,MAEJ,KAAK,KAAA,CAAA;AAAA,MACL,KAAK,MAAA,CAAA;AAAA,MACL,KAAK,QAAA;AACH,QACE,uBAAAF,cAAA;AAAA,UAACG,2DAAA;AAAA,UAAA;AAAA,YACC,UAAA;AAAA,YACA,WAAW,EAAG,CAAA,CAAA,EAAG,SAAS,CAAS,KAAA,CAAA,EAAA,CAAA,EAAG,SAAS,CAAO,KAAA,CAAA,CAAA;AAAA,YACtD,MAAQ,EAAA,cAAA;AAAA,YACR,YAAW,EAAA,OAAA;AAAA,YACX,aAAA;AAAA,YACA,QAAA;AAAA,YACA,GAAK,EAAA,YAAA;AAAA,WAAA;AAAA,SACP,CAAA;AAAA,MAEJ;AACE,QAAA,OAAA,CAAQ,IAAI,gBAAgB,CAAA,CAAA;AAC5B,QAAO,OAAA,IAAA,CAAA;AAAA,KACX;AAAA,GACF;AACF;;;;"}
+{"version":3,"file":"FilterClauseValueEditor.js","sources":["../../../src/filter-clause/value-editors/FilterClauseValueEditor.tsx"],"sourcesContent":["import { TableSchemaTable } from \"@vuu-ui/vuu-data-types\";\nimport cx from \"clsx\";\nimport { useFilterClause } from \"../useFilterClause\";\nimport { FilterClauseValueEditorNumber } from \"./FilterClauseValueEditorNumber\";\nimport { FilterClauseValueEditorText } from \"./FilterClauseValueEditorText\";\n\nimport {\n  NumericFilterClauseOp,\n  SingleValueFilterClauseOp,\n} from \"@vuu-ui/vuu-filter-types\";\nimport { isDateTimeDataValue } from \"@vuu-ui/vuu-utils\";\nimport { ForwardedRef, forwardRef } from \"react\";\nimport { FilterClauseProps } from \"../FilterClause\";\nimport { FilterClauseValueEditorDate } from \"./FilterClauseValueEditorDate\";\n\nconst classBase = \"vuuFilterClause\";\n\ntype FilterClauseValueEditorProps = Pick<\n  ReturnType<typeof useFilterClause>,\n  \"selectedColumn\" | \"inputProps\" | \"onChangeValue\" | \"onDeselectValue\"\n> &\n  Pick<FilterClauseProps, \"suggestionProvider\"> & {\n    table?: TableSchemaTable;\n  } & {\n    operator?: SingleValueFilterClauseOp | \"in\";\n    value?: string | string[] | number | number[] | boolean | boolean[];\n  };\n\nexport const FilterClauseValueEditor = forwardRef(\n  function FilterClauseValueEditor(\n    {\n      selectedColumn,\n      operator,\n      inputProps,\n      onChangeValue,\n      onDeselectValue,\n      suggestionProvider,\n      table,\n      value,\n    }: FilterClauseValueEditorProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n  ) {\n    if (selectedColumn === undefined || operator === undefined) {\n      return null;\n    }\n\n    if (isDateTimeDataValue(selectedColumn)) {\n      return (\n        <FilterClauseValueEditorDate\n          inputProps={inputProps}\n          className={cx(`${classBase}Field`, `${classBase}Value`)}\n          // ref={forwardedRef}\n          value={value as number}\n          operator={operator as NumericFilterClauseOp}\n          onChangeValue={onChangeValue}\n        />\n      );\n    }\n\n    switch (selectedColumn.serverDataType) {\n      case \"string\":\n      case \"char\":\n        return (\n          <FilterClauseValueEditorText\n            inputProps={inputProps}\n            className={cx(`${classBase}Field`, `${classBase}Value`)}\n            column={selectedColumn}\n            onDeselect={onDeselectValue}\n            onChangeValue={onChangeValue}\n            operator={operator}\n            ref={forwardedRef}\n            suggestionProvider={suggestionProvider}\n            table={table}\n            value={\n              value === undefined\n                ? \"\"\n                : Array.isArray(value)\n                  ? value.map((val) => val.toString())\n                  : (value.toString() as string | string[])\n            }\n          />\n        );\n      case \"int\":\n      case \"long\":\n      case \"double\":\n        return (\n          <FilterClauseValueEditorNumber\n            inputProps={inputProps}\n            className={cx(`${classBase}Field`, `${classBase}Value`)}\n            column={selectedColumn}\n            data-field=\"value\"\n            onChangeValue={onChangeValue}\n            operator={operator}\n            ref={forwardedRef}\n          />\n        );\n      default:\n        console.log(\"returning null\");\n        return null;\n    }\n  },\n);\n"],"names":["forwardRef","FilterClauseValueEditor","isDateTimeDataValue","jsx","FilterClauseValueEditorDate","FilterClauseValueEditorText","FilterClauseValueEditorNumber"],"mappings":";;;;;;;;;;AAeA,MAAM,SAAY,GAAA,iBAAA,CAAA;AAaX,MAAM,uBAA0B,GAAAA,gBAAA;AAAA,EACrC,SAASC,wBACP,CAAA;AAAA,IACE,cAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,aAAA;AAAA,IACA,eAAA;AAAA,IACA,kBAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;AAAA,KAEF,YACA,EAAA;AACA,IAAI,IAAA,cAAA,KAAmB,KAAa,CAAA,IAAA,QAAA,KAAa,KAAW,CAAA,EAAA;AAC1D,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAEA,IAAI,IAAAC,4BAAA,CAAoB,cAAc,CAAG,EAAA;AACvC,MACE,uBAAAC,cAAA;AAAA,QAACC,uDAAA;AAAA,QAAA;AAAA,UACC,UAAA;AAAA,UACA,WAAW,EAAG,CAAA,CAAA,EAAG,SAAS,CAAS,KAAA,CAAA,EAAA,CAAA,EAAG,SAAS,CAAO,KAAA,CAAA,CAAA;AAAA,UAEtD,KAAA;AAAA,UACA,QAAA;AAAA,UACA,aAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,KAEJ;AAEA,IAAA,QAAQ,eAAe,cAAgB;AAAA,MACrC,KAAK,QAAA,CAAA;AAAA,MACL,KAAK,MAAA;AACH,QACE,uBAAAD,cAAA;AAAA,UAACE,uDAAA;AAAA,UAAA;AAAA,YACC,UAAA;AAAA,YACA,WAAW,EAAG,CAAA,CAAA,EAAG,SAAS,CAAS,KAAA,CAAA,EAAA,CAAA,EAAG,SAAS,CAAO,KAAA,CAAA,CAAA;AAAA,YACtD,MAAQ,EAAA,cAAA;AAAA,YACR,UAAY,EAAA,eAAA;AAAA,YACZ,aAAA;AAAA,YACA,QAAA;AAAA,YACA,GAAK,EAAA,YAAA;AAAA,YACL,kBAAA;AAAA,YACA,KAAA;AAAA,YACA,OACE,KAAU,KAAA,KAAA,CAAA,GACN,EACA,GAAA,KAAA,CAAM,QAAQ,KAAK,CAAA,GACjB,KAAM,CAAA,GAAA,CAAI,CAAC,GAAQ,KAAA,GAAA,CAAI,UAAU,CAAA,GAChC,MAAM,QAAS,EAAA;AAAA,WAAA;AAAA,SAE1B,CAAA;AAAA,MAEJ,KAAK,KAAA,CAAA;AAAA,MACL,KAAK,MAAA,CAAA;AAAA,MACL,KAAK,QAAA;AACH,QACE,uBAAAF,cAAA;AAAA,UAACG,2DAAA;AAAA,UAAA;AAAA,YACC,UAAA;AAAA,YACA,WAAW,EAAG,CAAA,CAAA,EAAG,SAAS,CAAS,KAAA,CAAA,EAAA,CAAA,EAAG,SAAS,CAAO,KAAA,CAAA,CAAA;AAAA,YACtD,MAAQ,EAAA,cAAA;AAAA,YACR,YAAW,EAAA,OAAA;AAAA,YACX,aAAA;AAAA,YACA,QAAA;AAAA,YACA,GAAK,EAAA,YAAA;AAAA,WAAA;AAAA,SACP,CAAA;AAAA,MAEJ;AACE,QAAA,OAAA,CAAQ,IAAI,gBAAgB,CAAA,CAAA;AAC5B,QAAO,OAAA,IAAA,CAAA;AAAA,KACX;AAAA,GACF;AACF;;;;"}

package/cjs/filter-pill/getFilterTooltipText.js

@@ -12,7 +12,7 @@ function applyFormatter(filter, formatter) {
 }
 function formatFilterValue(filter, columnsByName) {
   const column = columnsByName?.[filter.column];
-  if (column && vuuUtils.isDateTimeColumn(column)) {
+  if (column && vuuUtils.isDateTimeDataValue(column)) {
     const pattern = vuuUtils.dateTimePattern(column.type);
     const formatter = (n) => vuuUtils.formatDate({ date: pattern.date ?? vuuUtils.defaultPatternsByType.date })(
       new Date(n)

package/cjs/filter-pill/getFilterTooltipText.js.map

@@ -1 +1 @@
-{"version":3,"file":"getFilterTooltipText.js","sources":["../../src/filter-pill/getFilterTooltipText.ts"],"sourcesContent":["import {\n  ColumnDescriptorsByName,\n  Filter,\n  FilterClause,\n  MultiValueFilterClause,\n  SingleValueFilterClause,\n} from \"@vuu-ui/vuu-filter-types\";\nimport {\n  filterAsQuery,\n  formatDate,\n  isDateTimeColumn,\n  isMultiClauseFilter,\n  dateTimePattern,\n  defaultPatternsByType,\n} from \"@vuu-ui/vuu-utils\";\nimport { filterClauses } from \"../filter-utils\";\n\nfunction applyFormatter<T>(\n  filter: SingleValueFilterClause<T> | MultiValueFilterClause<T[]>,\n  formatter: (t: T) => string,\n): FilterClause {\n  if (\"value\" in filter) {\n    return { ...filter, value: formatter(filter.value) };\n  } else {\n    return { ...filter, values: filter.values.map(formatter) };\n  }\n}\n\nfunction formatFilterValue(\n  filter: FilterClause,\n  columnsByName?: ColumnDescriptorsByName,\n): FilterClause {\n  const column = columnsByName?.[filter.column];\n  if (column && isDateTimeColumn(column)) {\n    const pattern = dateTimePattern(column.type);\n    const formatter = (n: number) =>\n      formatDate({ date: pattern.date ?? defaultPatternsByType.date })(\n        new Date(n),\n      );\n    return applyFormatter(\n      filter as\n        | SingleValueFilterClause<number>\n        | MultiValueFilterClause<number[]>,\n      formatter,\n    );\n  }\n\n  return filter;\n}\n\nexport const getFilterTooltipText =\n  (columnsByName?: ColumnDescriptorsByName) => (filter: Filter) => {\n    if (isMultiClauseFilter(filter)) {\n      const [firstClause] = filterClauses(filter);\n      const formattedFilter = formatFilterValue(\n        firstClause as FilterClause,\n        columnsByName,\n      );\n      return `${filterAsQuery(formattedFilter)} ${filter.op} ...`;\n    } else {\n      return filterAsQuery(formatFilterValue(filter, columnsByName));\n    }\n  };\n"],"names":["isDateTimeColumn","dateTimePattern","formatDate","defaultPatternsByType","isMultiClauseFilter","filterClauses","filterAsQuery"],"mappings":";;;;;AAiBA,SAAS,cAAA,CACP,QACA,SACc,EAAA;AACd,EAAA,IAAI,WAAW,MAAQ,EAAA;AACrB,IAAA,OAAO,EAAE,GAAG,MAAA,EAAQ,OAAO,SAAU,CAAA,MAAA,CAAO,KAAK,CAAE,EAAA,CAAA;AAAA,GAC9C,MAAA;AACL,IAAO,OAAA,EAAE,GAAG,MAAQ,EAAA,MAAA,EAAQ,OAAO,MAAO,CAAA,GAAA,CAAI,SAAS,CAAE,EAAA,CAAA;AAAA,GAC3D;AACF,CAAA;AAEA,SAAS,iBAAA,CACP,QACA,aACc,EAAA;AACd,EAAM,MAAA,MAAA,GAAS,aAAgB,GAAA,MAAA,CAAO,MAAM,CAAA,CAAA;AAC5C,EAAI,IAAA,MAAA,IAAUA,yBAAiB,CAAA,MAAM,CAAG,EAAA;AACtC,IAAM,MAAA,OAAA,GAAUC,wBAAgB,CAAA,MAAA,CAAO,IAAI,CAAA,CAAA;AAC3C,IAAM,MAAA,SAAA,GAAY,CAAC,CAAA,KACjBC,mBAAW,CAAA,EAAE,MAAM,OAAQ,CAAA,IAAA,IAAQC,8BAAsB,CAAA,IAAA,EAAM,CAAA;AAAA,MAC7D,IAAI,KAAK,CAAC,CAAA;AAAA,KACZ,CAAA;AACF,IAAO,OAAA,cAAA;AAAA,MACL,MAAA;AAAA,MAGA,SAAA;AAAA,KACF,CAAA;AAAA,GACF;AAEA,EAAO,OAAA,MAAA,CAAA;AACT,CAAA;AAEO,MAAM,oBACX,GAAA,CAAC,aAA4C,KAAA,CAAC,MAAmB,KAAA;AAC/D,EAAI,IAAAC,4BAAA,CAAoB,MAAM,CAAG,EAAA;AAC/B,IAAA,MAAM,CAAC,WAAW,CAAI,GAAAC,yBAAA,CAAc,MAAM,CAAA,CAAA;AAC1C,IAAA,MAAM,eAAkB,GAAA,iBAAA;AAAA,MACtB,WAAA;AAAA,MACA,aAAA;AAAA,KACF,CAAA;AACA,IAAA,OAAO,GAAGC,sBAAc,CAAA,eAAe,CAAC,CAAA,CAAA,EAAI,OAAO,EAAE,CAAA,IAAA,CAAA,CAAA;AAAA,GAChD,MAAA;AACL,IAAA,OAAOA,sBAAc,CAAA,iBAAA,CAAkB,MAAQ,EAAA,aAAa,CAAC,CAAA,CAAA;AAAA,GAC/D;AACF;;;;"}
+{"version":3,"file":"getFilterTooltipText.js","sources":["../../src/filter-pill/getFilterTooltipText.ts"],"sourcesContent":["import {\n  ColumnDescriptorsByName,\n  Filter,\n  FilterClause,\n  MultiValueFilterClause,\n  SingleValueFilterClause,\n} from \"@vuu-ui/vuu-filter-types\";\nimport {\n  filterAsQuery,\n  formatDate,\n  isDateTimeDataValue,\n  isMultiClauseFilter,\n  dateTimePattern,\n  defaultPatternsByType,\n} from \"@vuu-ui/vuu-utils\";\nimport { filterClauses } from \"../filter-utils\";\n\nfunction applyFormatter<T>(\n  filter: SingleValueFilterClause<T> | MultiValueFilterClause<T[]>,\n  formatter: (t: T) => string,\n): FilterClause {\n  if (\"value\" in filter) {\n    return { ...filter, value: formatter(filter.value) };\n  } else {\n    return { ...filter, values: filter.values.map(formatter) };\n  }\n}\n\nfunction formatFilterValue(\n  filter: FilterClause,\n  columnsByName?: ColumnDescriptorsByName,\n): FilterClause {\n  const column = columnsByName?.[filter.column];\n  if (column && isDateTimeDataValue(column)) {\n    const pattern = dateTimePattern(column.type);\n    const formatter = (n: number) =>\n      formatDate({ date: pattern.date ?? defaultPatternsByType.date })(\n        new Date(n),\n      );\n    return applyFormatter(\n      filter as\n        | SingleValueFilterClause<number>\n        | MultiValueFilterClause<number[]>,\n      formatter,\n    );\n  }\n\n  return filter;\n}\n\nexport const getFilterTooltipText =\n  (columnsByName?: ColumnDescriptorsByName) => (filter: Filter) => {\n    if (isMultiClauseFilter(filter)) {\n      const [firstClause] = filterClauses(filter);\n      const formattedFilter = formatFilterValue(\n        firstClause as FilterClause,\n        columnsByName,\n      );\n      return `${filterAsQuery(formattedFilter)} ${filter.op} ...`;\n    } else {\n      return filterAsQuery(formatFilterValue(filter, columnsByName));\n    }\n  };\n"],"names":["isDateTimeDataValue","dateTimePattern","formatDate","defaultPatternsByType","isMultiClauseFilter","filterClauses","filterAsQuery"],"mappings":";;;;;AAiBA,SAAS,cAAA,CACP,QACA,SACc,EAAA;AACd,EAAA,IAAI,WAAW,MAAQ,EAAA;AACrB,IAAA,OAAO,EAAE,GAAG,MAAA,EAAQ,OAAO,SAAU,CAAA,MAAA,CAAO,KAAK,CAAE,EAAA,CAAA;AAAA,GAC9C,MAAA;AACL,IAAO,OAAA,EAAE,GAAG,MAAQ,EAAA,MAAA,EAAQ,OAAO,MAAO,CAAA,GAAA,CAAI,SAAS,CAAE,EAAA,CAAA;AAAA,GAC3D;AACF,CAAA;AAEA,SAAS,iBAAA,CACP,QACA,aACc,EAAA;AACd,EAAM,MAAA,MAAA,GAAS,aAAgB,GAAA,MAAA,CAAO,MAAM,CAAA,CAAA;AAC5C,EAAI,IAAA,MAAA,IAAUA,4BAAoB,CAAA,MAAM,CAAG,EAAA;AACzC,IAAM,MAAA,OAAA,GAAUC,wBAAgB,CAAA,MAAA,CAAO,IAAI,CAAA,CAAA;AAC3C,IAAM,MAAA,SAAA,GAAY,CAAC,CAAA,KACjBC,mBAAW,CAAA,EAAE,MAAM,OAAQ,CAAA,IAAA,IAAQC,8BAAsB,CAAA,IAAA,EAAM,CAAA;AAAA,MAC7D,IAAI,KAAK,CAAC,CAAA;AAAA,KACZ,CAAA;AACF,IAAO,OAAA,cAAA;AAAA,MACL,MAAA;AAAA,MAGA,SAAA;AAAA,KACF,CAAA;AAAA,GACF;AAEA,EAAO,OAAA,MAAA,CAAA;AACT,CAAA;AAEO,MAAM,oBACX,GAAA,CAAC,aAA4C,KAAA,CAAC,MAAmB,KAAA;AAC/D,EAAI,IAAAC,4BAAA,CAAoB,MAAM,CAAG,EAAA;AAC/B,IAAA,MAAM,CAAC,WAAW,CAAI,GAAAC,yBAAA,CAAc,MAAM,CAAA,CAAA;AAC1C,IAAA,MAAM,eAAkB,GAAA,iBAAA;AAAA,MACtB,WAAA;AAAA,MACA,aAAA;AAAA,KACF,CAAA;AACA,IAAA,OAAO,GAAGC,sBAAc,CAAA,eAAe,CAAC,CAAA,CAAA,EAAI,OAAO,EAAE,CAAA,IAAA,CAAA,CAAA;AAAA,GAChD,MAAA;AACL,IAAA,OAAOA,sBAAc,CAAA,iBAAA,CAAkB,MAAQ,EAAA,aAAa,CAAC,CAAA,CAAA;AAAA,GAC/D;AACF;;;;"}

package/cjs/inline-filter/InlineFilter.js

@@ -42,7 +42,11 @@ const InlineFilter = ({
       {
         className: `${classBase}-filter`,
         style: { width: column.width },
-        children: vuuDataReact.getDataItemEditControl({ InputProps, column, onCommit })
+        children: vuuDataReact.getDataItemEditControl({
+          InputProps,
+          dataDescriptor: column,
+          onCommit
+        })
       },
       column.name
     ))

package/cjs/inline-filter/InlineFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineFilter.js","sources":["../../src/inline-filter/InlineFilter.tsx"],"sourcesContent":["import { getDataItemEditControl } from \"@vuu-ui/vuu-data-react\";\nimport { VirtualColSpan, useHeaderProps } from \"@vuu-ui/vuu-table\";\nimport { CommitHandler, getFieldName } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, useCallback } from \"react\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\n\nimport inlineFilteCss from \"./InlineFilter.css\";\nimport { InputProps } from \"@salt-ds/core\";\n\nconst classBase = \"vuuInlineFilter\";\n\nexport type FilterValueChangeHandler = (\n  column: ColumnDescriptor,\n  value: string,\n) => void;\nexport interface InlineFilterProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  onChange: FilterValueChangeHandler;\n}\n\nconst InputProps: Partial<InputProps> = {\n  placeholder: \"Enter value\",\n  variant: \"primary\",\n};\n\nexport const InlineFilter = ({\n  onChange,\n  ...htmlAttributes\n}: InlineFilterProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-inline-filter\",\n    css: inlineFilteCss,\n    window: targetWindow,\n  });\n\n  const { columns, virtualColSpan = 0 } = useHeaderProps();\n\n  const onCommit = useCallback<\n    CommitHandler<HTMLInputElement, string | number | undefined>\n  >(\n    (evt, value = \"\") => {\n      const fieldName = getFieldName(evt.target);\n      const column = columns.find((c) => c.name === fieldName);\n      if (column) {\n        onChange(column, value.toString());\n      }\n    },\n    [columns, onChange],\n  );\n\n  return (\n    <div {...htmlAttributes} className={classBase}>\n      <VirtualColSpan width={virtualColSpan} />\n      {columns.map((column) => (\n        <div\n          className={`${classBase}-filter`}\n          key={column.name}\n          style={{ width: column.width }}\n        >\n          {getDataItemEditControl({ InputProps, column, onCommit })}\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","inlineFilteCss","useHeaderProps","useCallback","getFieldName","jsxs","jsx","VirtualColSpan","getDataItemEditControl"],"mappings":";;;;;;;;;;;AAWA,MAAM,SAAY,GAAA,iBAAA,CAAA;AAWlB,MAAM,UAAkC,GAAA;AAAA,EACtC,WAAa,EAAA,aAAA;AAAA,EACb,OAAS,EAAA,SAAA;AACX,CAAA,CAAA;AAEO,MAAM,eAAe,CAAC;AAAA,EAC3B,QAAA;AAAA,EACA,GAAG,cAAA;AACL,CAAyB,KAAA;AACvB,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAC,cAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,OAAA,EAAS,cAAiB,GAAA,CAAA,KAAMC,uBAAe,EAAA,CAAA;AAEvD,EAAA,MAAM,QAAW,GAAAC,iBAAA;AAAA,IAGf,CAAC,GAAK,EAAA,KAAA,GAAQ,EAAO,KAAA;AACnB,MAAM,MAAA,SAAA,GAAYC,qBAAa,CAAA,GAAA,CAAI,MAAM,CAAA,CAAA;AACzC,MAAA,MAAM,SAAS,OAAQ,CAAA,IAAA,CAAK,CAAC,CAAM,KAAA,CAAA,CAAE,SAAS,SAAS,CAAA,CAAA;AACvD,MAAA,IAAI,MAAQ,EAAA;AACV,QAAS,QAAA,CAAA,MAAA,EAAQ,KAAM,CAAA,QAAA,EAAU,CAAA,CAAA;AAAA,OACnC;AAAA,KACF;AAAA,IACA,CAAC,SAAS,QAAQ,CAAA;AAAA,GACpB,CAAA;AAEA,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA,EAAK,GAAG,cAAA,EAAgB,WAAW,SAClC,EAAA,QAAA,EAAA;AAAA,oBAACC,cAAA,CAAAC,uBAAA,EAAA,EAAe,OAAO,cAAgB,EAAA,CAAA;AAAA,IACtC,OAAA,CAAQ,GAAI,CAAA,CAAC,MACZ,qBAAAD,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,GAAG,SAAS,CAAA,OAAA,CAAA;AAAA,QAEvB,KAAO,EAAA,EAAE,KAAO,EAAA,MAAA,CAAO,KAAM,EAAA;AAAA,QAE5B,QAAuB,EAAAE,mCAAA,CAAA,EAAE,UAAY,EAAA,MAAA,EAAQ,UAAU,CAAA;AAAA,OAAA;AAAA,MAHnD,MAAO,CAAA,IAAA;AAAA,KAKf,CAAA;AAAA,GACH,EAAA,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"InlineFilter.js","sources":["../../src/inline-filter/InlineFilter.tsx"],"sourcesContent":["import { getDataItemEditControl } from \"@vuu-ui/vuu-data-react\";\nimport { VirtualColSpan, useHeaderProps } from \"@vuu-ui/vuu-table\";\nimport { CommitHandler, getFieldName } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, useCallback } from \"react\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\n\nimport inlineFilteCss from \"./InlineFilter.css\";\nimport { InputProps } from \"@salt-ds/core\";\n\nconst classBase = \"vuuInlineFilter\";\n\nexport type FilterValueChangeHandler = (\n  column: ColumnDescriptor,\n  value: string,\n) => void;\nexport interface InlineFilterProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  onChange: FilterValueChangeHandler;\n}\n\nconst InputProps: Partial<InputProps> = {\n  placeholder: \"Enter value\",\n  variant: \"primary\",\n};\n\nexport const InlineFilter = ({\n  onChange,\n  ...htmlAttributes\n}: InlineFilterProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-inline-filter\",\n    css: inlineFilteCss,\n    window: targetWindow,\n  });\n\n  const { columns, virtualColSpan = 0 } = useHeaderProps();\n\n  const onCommit = useCallback<\n    CommitHandler<HTMLElement, string | number | undefined>\n  >(\n    (evt, value = \"\") => {\n      const fieldName = getFieldName(evt.target);\n      const column = columns.find((c) => c.name === fieldName);\n      if (column) {\n        onChange(column, value.toString());\n      }\n    },\n    [columns, onChange],\n  );\n\n  return (\n    <div {...htmlAttributes} className={classBase}>\n      <VirtualColSpan width={virtualColSpan} />\n      {columns.map((column) => (\n        <div\n          className={`${classBase}-filter`}\n          key={column.name}\n          style={{ width: column.width }}\n        >\n          {getDataItemEditControl({\n            InputProps,\n            dataDescriptor: column,\n            onCommit,\n          })}\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","inlineFilteCss","useHeaderProps","useCallback","getFieldName","jsxs","jsx","VirtualColSpan","getDataItemEditControl"],"mappings":";;;;;;;;;;;AAWA,MAAM,SAAY,GAAA,iBAAA,CAAA;AAWlB,MAAM,UAAkC,GAAA;AAAA,EACtC,WAAa,EAAA,aAAA;AAAA,EACb,OAAS,EAAA,SAAA;AACX,CAAA,CAAA;AAEO,MAAM,eAAe,CAAC;AAAA,EAC3B,QAAA;AAAA,EACA,GAAG,cAAA;AACL,CAAyB,KAAA;AACvB,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAC,cAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,OAAA,EAAS,cAAiB,GAAA,CAAA,KAAMC,uBAAe,EAAA,CAAA;AAEvD,EAAA,MAAM,QAAW,GAAAC,iBAAA;AAAA,IAGf,CAAC,GAAK,EAAA,KAAA,GAAQ,EAAO,KAAA;AACnB,MAAM,MAAA,SAAA,GAAYC,qBAAa,CAAA,GAAA,CAAI,MAAM,CAAA,CAAA;AACzC,MAAA,MAAM,SAAS,OAAQ,CAAA,IAAA,CAAK,CAAC,CAAM,KAAA,CAAA,CAAE,SAAS,SAAS,CAAA,CAAA;AACvD,MAAA,IAAI,MAAQ,EAAA;AACV,QAAS,QAAA,CAAA,MAAA,EAAQ,KAAM,CAAA,QAAA,EAAU,CAAA,CAAA;AAAA,OACnC;AAAA,KACF;AAAA,IACA,CAAC,SAAS,QAAQ,CAAA;AAAA,GACpB,CAAA;AAEA,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA,EAAK,GAAG,cAAA,EAAgB,WAAW,SAClC,EAAA,QAAA,EAAA;AAAA,oBAACC,cAAA,CAAAC,uBAAA,EAAA,EAAe,OAAO,cAAgB,EAAA,CAAA;AAAA,IACtC,OAAA,CAAQ,GAAI,CAAA,CAAC,MACZ,qBAAAD,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,GAAG,SAAS,CAAA,OAAA,CAAA;AAAA,QAEvB,KAAO,EAAA,EAAE,KAAO,EAAA,MAAA,CAAO,KAAM,EAAA;AAAA,QAE5B,QAAuB,EAAAE,mCAAA,CAAA;AAAA,UACtB,UAAA;AAAA,UACA,cAAgB,EAAA,MAAA;AAAA,UAChB,QAAA;AAAA,SACD,CAAA;AAAA,OAAA;AAAA,MAPI,MAAO,CAAA,IAAA;AAAA,KASf,CAAA;AAAA,GACH,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/cjs/quick-filters/QuickFilters.js

@@ -68,7 +68,7 @@ const QuickFilters = ({
           /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { "data-field": column.name, children: [
             /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: column.label ?? column.name }),
             vuuDataReact.getDataItemEditControl({
-              column,
+              dataDescriptor: column,
               onCommit,
               suggestionProvider,
               table: tableSchema?.table

package/cjs/quick-filters/QuickFilters.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuickFilters.js","sources":["../../src/quick-filters/QuickFilters.tsx"],"sourcesContent":["import { getDataItemEditControl } from \"@vuu-ui/vuu-data-react\";\nimport type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { ColumnPicker, Icon, VuuInput } from \"@vuu-ui/vuu-ui-controls\";\nimport { FormField, FormFieldLabel } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport type { HTMLAttributes } from \"react\";\nimport { FilterBarProps } from \"../filter-bar\";\nimport { useQuickFilters } from \"./useQuickFilters\";\n\nimport quickFiltersCss from \"./QuickFilters.css\";\n\nconst classBase = \"vuuQuickFilters\";\n\nexport interface QuickFilterProps\n  extends HTMLAttributes<HTMLDivElement>,\n    Pick<\n      FilterBarProps,\n      \"onApplyFilter\" | \"suggestionProvider\" | \"tableSchema\"\n    > {\n  allowAddColumn?: boolean;\n  allowFind?: boolean;\n  availableColumns: ColumnDescriptor[];\n  onChangeQuickFilterColumns?: (columns: string[]) => void;\n  quickFilterColumns?: string[];\n  /**\n   * Render a general 'search' control.\n   * if true, all columns of type 'string' will be included in the search. Otherwise\n   * a list of the columns to include in search can be provided.\n   */\n  showFind?: boolean | string[];\n}\n\nexport const QuickFilters = ({\n  allowAddColumn = true,\n  allowFind = true,\n  availableColumns,\n  onApplyFilter,\n  onChangeQuickFilterColumns,\n  quickFilterColumns,\n  suggestionProvider,\n  tableSchema,\n}: QuickFilterProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-quick-filters\",\n    css: quickFiltersCss,\n    window: targetWindow,\n  });\n\n  const searchIcon = <Icon name=\"search\" size={18} />;\n\n  const {\n    availableColumnNames,\n    onChange,\n    onColumnsSelectionChange,\n    onCommit,\n    rootRef,\n  } = useQuickFilters({\n    availableColumns,\n    onApplyFilter,\n    onChangeQuickFilterColumns,\n    quickFilterColumns,\n  });\n\n  const filterColumns = availableColumns.filter(({ name }) =>\n    quickFilterColumns?.includes(name),\n  );\n\n  const getFilterControls = () => {\n    const controls = [];\n    if (allowFind) {\n      controls.push(\n        <FormField data-embedded data-field=\"find\" key=\"find\">\n          <FormFieldLabel>Find</FormFieldLabel>\n          <VuuInput\n            inputProps={{\n              onChange,\n            }}\n            onCommit={onCommit}\n            startAdornment={searchIcon}\n            variant=\"secondary\"\n          />\n        </FormField>,\n      );\n    }\n    {\n      filterColumns?.forEach((column) =>\n        controls.push(\n          <FormField key={column.label ?? column.name} data-field={column.name}>\n            <FormFieldLabel>{column.label ?? column.name}</FormFieldLabel>\n            {getDataItemEditControl({\n              column,\n              onCommit,\n              suggestionProvider,\n              table: tableSchema?.table,\n            })}\n          </FormField>,\n        ),\n      );\n    }\n\n    return controls;\n  };\n\n  return (\n    <div className={classBase} ref={rootRef}>\n      <div className={`${classBase}-filter-container`}>\n        {getFilterControls()}\n      </div>\n      {allowAddColumn ? (\n        <ColumnPicker\n          columns={availableColumnNames}\n          icon=\"more-horiz\"\n          iconSize={16}\n          onSelectionChange={onColumnsSelectionChange}\n          selected={quickFilterColumns}\n        />\n      ) : null}\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","quickFiltersCss","jsx","Icon","useQuickFilters","jsxs","FormField","FormFieldLabel","VuuInput","getDataItemEditControl","ColumnPicker"],"mappings":"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"}
+{"version":3,"file":"QuickFilters.js","sources":["../../src/quick-filters/QuickFilters.tsx"],"sourcesContent":["import { getDataItemEditControl } from \"@vuu-ui/vuu-data-react\";\nimport type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { ColumnPicker, Icon, VuuInput } from \"@vuu-ui/vuu-ui-controls\";\nimport { FormField, FormFieldLabel } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport type { HTMLAttributes } from \"react\";\nimport { FilterBarProps } from \"../filter-bar\";\nimport { useQuickFilters } from \"./useQuickFilters\";\n\nimport quickFiltersCss from \"./QuickFilters.css\";\n\nconst classBase = \"vuuQuickFilters\";\n\nexport interface QuickFilterProps\n  extends HTMLAttributes<HTMLDivElement>,\n    Pick<\n      FilterBarProps,\n      \"onApplyFilter\" | \"suggestionProvider\" | \"tableSchema\"\n    > {\n  allowAddColumn?: boolean;\n  allowFind?: boolean;\n  availableColumns: ColumnDescriptor[];\n  onChangeQuickFilterColumns?: (columns: string[]) => void;\n  quickFilterColumns?: string[];\n  /**\n   * Render a general 'search' control.\n   * if true, all columns of type 'string' will be included in the search. Otherwise\n   * a list of the columns to include in search can be provided.\n   */\n  showFind?: boolean | string[];\n}\n\nexport const QuickFilters = ({\n  allowAddColumn = true,\n  allowFind = true,\n  availableColumns,\n  onApplyFilter,\n  onChangeQuickFilterColumns,\n  quickFilterColumns,\n  suggestionProvider,\n  tableSchema,\n}: QuickFilterProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-quick-filters\",\n    css: quickFiltersCss,\n    window: targetWindow,\n  });\n\n  const searchIcon = <Icon name=\"search\" size={18} />;\n\n  const {\n    availableColumnNames,\n    onChange,\n    onColumnsSelectionChange,\n    onCommit,\n    rootRef,\n  } = useQuickFilters({\n    availableColumns,\n    onApplyFilter,\n    onChangeQuickFilterColumns,\n    quickFilterColumns,\n  });\n\n  const filterColumns = availableColumns.filter(({ name }) =>\n    quickFilterColumns?.includes(name),\n  );\n\n  const getFilterControls = () => {\n    const controls = [];\n    if (allowFind) {\n      controls.push(\n        <FormField data-embedded data-field=\"find\" key=\"find\">\n          <FormFieldLabel>Find</FormFieldLabel>\n          <VuuInput\n            inputProps={{\n              onChange,\n            }}\n            onCommit={onCommit}\n            startAdornment={searchIcon}\n            variant=\"secondary\"\n          />\n        </FormField>,\n      );\n    }\n    {\n      filterColumns?.forEach((column) =>\n        controls.push(\n          <FormField key={column.label ?? column.name} data-field={column.name}>\n            <FormFieldLabel>{column.label ?? column.name}</FormFieldLabel>\n            {getDataItemEditControl({\n              dataDescriptor: column,\n              onCommit,\n              suggestionProvider,\n              table: tableSchema?.table,\n            })}\n          </FormField>,\n        ),\n      );\n    }\n\n    return controls;\n  };\n\n  return (\n    <div className={classBase} ref={rootRef}>\n      <div className={`${classBase}-filter-container`}>\n        {getFilterControls()}\n      </div>\n      {allowAddColumn ? (\n        <ColumnPicker\n          columns={availableColumnNames}\n          icon=\"more-horiz\"\n          iconSize={16}\n          onSelectionChange={onColumnsSelectionChange}\n          selected={quickFilterColumns}\n        />\n      ) : null}\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","quickFiltersCss","jsx","Icon","useQuickFilters","jsxs","FormField","FormFieldLabel","VuuInput","getDataItemEditControl","ColumnPicker"],"mappings":";;;;;;;;;;;AAYA,MAAM,SAAY,GAAA,iBAAA,CAAA;AAqBX,MAAM,eAAe,CAAC;AAAA,EAC3B,cAAiB,GAAA,IAAA;AAAA,EACjB,SAAY,GAAA,IAAA;AAAA,EACZ,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,0BAAA;AAAA,EACA,kBAAA;AAAA,EACA,kBAAA;AAAA,EACA,WAAA;AACF,CAAwB,KAAA;AACtB,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAC,cAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,6BAAcC,cAAA,CAAAC,kBAAA,EAAA,EAAK,IAAK,EAAA,QAAA,EAAS,MAAM,EAAI,EAAA,CAAA,CAAA;AAEjD,EAAM,MAAA;AAAA,IACJ,oBAAA;AAAA,IACA,QAAA;AAAA,IACA,wBAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,MACEC,+BAAgB,CAAA;AAAA,IAClB,gBAAA;AAAA,IACA,aAAA;AAAA,IACA,0BAAA;AAAA,IACA,kBAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAA,MAAM,gBAAgB,gBAAiB,CAAA,MAAA;AAAA,IAAO,CAAC,EAAE,IAAA,EAC/C,KAAA,kBAAA,EAAoB,SAAS,IAAI,CAAA;AAAA,GACnC,CAAA;AAEA,EAAA,MAAM,oBAAoB,MAAM;AAC9B,IAAA,MAAM,WAAW,EAAC,CAAA;AAClB,IAAA,IAAI,SAAW,EAAA;AACb,MAAS,QAAA,CAAA,IAAA;AAAA,wBACNC,eAAA,CAAAC,cAAA,EAAA,EAAU,eAAa,EAAA,IAAA,EAAC,cAAW,MAClC,EAAA,QAAA,EAAA;AAAA,0BAAAJ,cAAA,CAACK,uBAAe,QAAI,EAAA,MAAA,EAAA,CAAA;AAAA,0BACpBL,cAAA;AAAA,YAACM,sBAAA;AAAA,YAAA;AAAA,cACC,UAAY,EAAA;AAAA,gBACV,QAAA;AAAA,eACF;AAAA,cACA,QAAA;AAAA,cACA,cAAgB,EAAA,UAAA;AAAA,cAChB,OAAQ,EAAA,WAAA;AAAA,aAAA;AAAA,WACV;AAAA,SAAA,EAAA,EAT6C,MAU/C,CAAA;AAAA,OACF,CAAA;AAAA,KACF;AACA,IAAA;AACE,MAAe,aAAA,EAAA,OAAA;AAAA,QAAQ,CAAC,WACtB,QAAS,CAAA,IAAA;AAAA,0BACNH,eAAA,CAAAC,cAAA,EAAA,EAA4C,YAAY,EAAA,MAAA,CAAO,IAC9D,EAAA,QAAA,EAAA;AAAA,4BAAAJ,cAAA,CAACK,mBAAgB,EAAA,EAAA,QAAA,EAAA,MAAA,CAAO,KAAS,IAAA,MAAA,CAAO,IAAK,EAAA,CAAA;AAAA,YAC5CE,mCAAuB,CAAA;AAAA,cACtB,cAAgB,EAAA,MAAA;AAAA,cAChB,QAAA;AAAA,cACA,kBAAA;AAAA,cACA,OAAO,WAAa,EAAA,KAAA;AAAA,aACrB,CAAA;AAAA,WAPa,EAAA,EAAA,MAAA,CAAO,KAAS,IAAA,MAAA,CAAO,IAQvC,CAAA;AAAA,SACF;AAAA,OACF,CAAA;AAAA,KACF;AAEA,IAAO,OAAA,QAAA,CAAA;AAAA,GACT,CAAA;AAEA,EAAA,uBACGJ,eAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,SAAA,EAAW,KAAK,OAC9B,EAAA,QAAA,EAAA;AAAA,oBAAAH,cAAA,CAAC,SAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAAA,iBAAA,CAAA,EACzB,6BACH,EAAA,CAAA;AAAA,IACC,cACC,mBAAAA,cAAA;AAAA,MAACQ,0BAAA;AAAA,MAAA;AAAA,QACC,OAAS,EAAA,oBAAA;AAAA,QACT,IAAK,EAAA,YAAA;AAAA,QACL,QAAU,EAAA,EAAA;AAAA,QACV,iBAAmB,EAAA,wBAAA;AAAA,QACnB,QAAU,EAAA,kBAAA;AAAA,OAAA;AAAA,KAEV,GAAA,IAAA;AAAA,GACN,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/cjs/quick-filters/useQuickFilters.js.map

@@ -1 +1 @@
-{"version":3,"file":"useQuickFilters.js","sources":["../../src/quick-filters/useQuickFilters.ts"],"sourcesContent":["import type { DataSourceFilter } from \"@vuu-ui/vuu-data-types\";\nimport type { Filter } from \"@vuu-ui/vuu-filter-types\";\nimport type { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { MultiSelectionHandler } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  CommitHandler,\n  NoFilter,\n  filterAsQuery,\n  queryClosest,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n  ChangeEventHandler,\n  RefCallback,\n  useCallback,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { QuickFilterProps } from \"./QuickFilters\";\n\ntype QuickFilterValues = Record<string, VuuRowDataItemType>;\n\nconst createFilterClause = (\n  [identifier, value]: [string, VuuRowDataItemType],\n  availableColumns?: ColumnDescriptor[],\n): Filter => {\n  if (identifier === \"find\") {\n    if (availableColumns) {\n      const targetColumns = availableColumns.filter(\n        ({ serverDataType }) => serverDataType === \"string\",\n      );\n      if (targetColumns.length) {\n        return {\n          op: \"or\",\n          filters: targetColumns.map((column) =>\n            createFilterClause([column.name, value]),\n          ),\n        };\n      } else {\n        throw Error(`value ${value} is not valid for any of availanle columns`);\n      }\n    } else {\n      throw Error(\"columns must be provided for find operation\");\n    }\n  } else {\n    return {\n      column: identifier,\n      op: \"contains\",\n      value,\n    };\n  }\n};\n\nconst buildFilterStruct = (\n  quickFilters: QuickFilterValues,\n  availableColumns: ColumnDescriptor[],\n): Filter | undefined => {\n  const entries = Object.entries(quickFilters);\n  if (entries.length === 1) {\n    return createFilterClause(entries[0], availableColumns);\n  } else if (entries.length > 1) {\n    return {\n      op: \"and\",\n      filters: entries.map(\n        (entry) => createFilterClause(entry, availableColumns),\n        availableColumns,\n      ),\n    };\n  }\n};\n\nconst buildFilter = (\n  quickFilters: QuickFilterValues,\n  availableColumns: ColumnDescriptor[],\n): DataSourceFilter => {\n  const filterStruct = buildFilterStruct(quickFilters, availableColumns);\n  if (filterStruct) {\n    return {\n      filter: filterAsQuery(filterStruct),\n      filterStruct,\n    };\n  } else {\n    return NoFilter;\n  }\n};\n\nexport type QuickFilterHookProps = Pick<\n  QuickFilterProps,\n  | \"availableColumns\"\n  | \"onApplyFilter\"\n  | \"onChangeQuickFilterColumns\"\n  | \"quickFilterColumns\"\n>;\n\nexport const useQuickFilters = ({\n  availableColumns,\n  onApplyFilter,\n  onChangeQuickFilterColumns,\n}: QuickFilterProps) => {\n  const filters = useRef<QuickFilterValues>({});\n  const rootRef = useCallback<RefCallback<HTMLDivElement>>((el) => {\n    if (el) {\n      const firstInput = el.querySelector(\"input\");\n      firstInput?.focus();\n    }\n  }, []);\n\n  const handleChange = useCallback<ChangeEventHandler<HTMLInputElement>>(\n    (e) => {\n      console.log(`onChange ${e.target.value}`);\n    },\n    [],\n  );\n\n  const handleCommit = useCallback<\n    CommitHandler<HTMLInputElement, string | number | undefined>\n  >(\n    (e, value) => {\n      const field = queryClosest(e.target, \"[data-field]\");\n      const column = field?.dataset.field;\n      if (column) {\n        if (\n          value === undefined ||\n          (typeof value === \"string\" && value.trim() === \"\")\n        ) {\n          if (filters.current[column] === undefined) {\n            return;\n          }\n          delete filters.current[column];\n        } else if (typeof value === \"string\" && value.trim() !== \"\") {\n          filters.current[column] = value;\n        }\n        onApplyFilter?.(buildFilter(filters.current, availableColumns));\n      }\n    },\n    [availableColumns, onApplyFilter],\n  );\n\n  const handleColumnsSelectionChange = useCallback<MultiSelectionHandler>(\n    (evt, newSelected) => {\n      onChangeQuickFilterColumns?.(newSelected);\n    },\n    [onChangeQuickFilterColumns],\n  );\n\n  const availableColumnNames = useMemo(\n    () => availableColumns.map((col) => col.name),\n    [availableColumns],\n  );\n\n  return {\n    availableColumnNames,\n    onChange: handleChange,\n    onColumnsSelectionChange: handleColumnsSelectionChange,\n    onCommit: handleCommit,\n    rootRef,\n  };\n};\n"],"names":["filterAsQuery","NoFilter","useRef","useCallback","queryClosest","useMemo"],"mappings":"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"}
+{"version":3,"file":"useQuickFilters.js","sources":["../../src/quick-filters/useQuickFilters.ts"],"sourcesContent":["import type { DataSourceFilter } from \"@vuu-ui/vuu-data-types\";\nimport type { Filter } from \"@vuu-ui/vuu-filter-types\";\nimport type { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { MultiSelectionHandler } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  CommitHandler,\n  NoFilter,\n  filterAsQuery,\n  queryClosest,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n  ChangeEventHandler,\n  RefCallback,\n  useCallback,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { QuickFilterProps } from \"./QuickFilters\";\n\ntype QuickFilterValues = Record<string, VuuRowDataItemType>;\n\nconst createFilterClause = (\n  [identifier, value]: [string, VuuRowDataItemType],\n  availableColumns?: ColumnDescriptor[],\n): Filter => {\n  if (identifier === \"find\") {\n    if (availableColumns) {\n      const targetColumns = availableColumns.filter(\n        ({ serverDataType }) => serverDataType === \"string\",\n      );\n      if (targetColumns.length) {\n        return {\n          op: \"or\",\n          filters: targetColumns.map((column) =>\n            createFilterClause([column.name, value]),\n          ),\n        };\n      } else {\n        throw Error(`value ${value} is not valid for any of availanle columns`);\n      }\n    } else {\n      throw Error(\"columns must be provided for find operation\");\n    }\n  } else {\n    return {\n      column: identifier,\n      op: \"contains\",\n      value,\n    };\n  }\n};\n\nconst buildFilterStruct = (\n  quickFilters: QuickFilterValues,\n  availableColumns: ColumnDescriptor[],\n): Filter | undefined => {\n  const entries = Object.entries(quickFilters);\n  if (entries.length === 1) {\n    return createFilterClause(entries[0], availableColumns);\n  } else if (entries.length > 1) {\n    return {\n      op: \"and\",\n      filters: entries.map(\n        (entry) => createFilterClause(entry, availableColumns),\n        availableColumns,\n      ),\n    };\n  }\n};\n\nconst buildFilter = (\n  quickFilters: QuickFilterValues,\n  availableColumns: ColumnDescriptor[],\n): DataSourceFilter => {\n  const filterStruct = buildFilterStruct(quickFilters, availableColumns);\n  if (filterStruct) {\n    return {\n      filter: filterAsQuery(filterStruct),\n      filterStruct,\n    };\n  } else {\n    return NoFilter;\n  }\n};\n\nexport type QuickFilterHookProps = Pick<\n  QuickFilterProps,\n  | \"availableColumns\"\n  | \"onApplyFilter\"\n  | \"onChangeQuickFilterColumns\"\n  | \"quickFilterColumns\"\n>;\n\nexport const useQuickFilters = ({\n  availableColumns,\n  onApplyFilter,\n  onChangeQuickFilterColumns,\n}: QuickFilterProps) => {\n  const filters = useRef<QuickFilterValues>({});\n  const rootRef = useCallback<RefCallback<HTMLDivElement>>((el) => {\n    if (el) {\n      const firstInput = el.querySelector(\"input\");\n      firstInput?.focus();\n    }\n  }, []);\n\n  const handleChange = useCallback<ChangeEventHandler<HTMLInputElement>>(\n    (e) => {\n      console.log(`onChange ${e.target.value}`);\n    },\n    [],\n  );\n\n  const handleCommit = useCallback<\n    CommitHandler<HTMLElement, string | number | undefined>\n  >(\n    (e, value) => {\n      const field = queryClosest(e.target, \"[data-field]\");\n      const column = field?.dataset.field;\n      if (column) {\n        if (\n          value === undefined ||\n          (typeof value === \"string\" && value.trim() === \"\")\n        ) {\n          if (filters.current[column] === undefined) {\n            return;\n          }\n          delete filters.current[column];\n        } else if (typeof value === \"string\" && value.trim() !== \"\") {\n          filters.current[column] = value;\n        }\n        onApplyFilter?.(buildFilter(filters.current, availableColumns));\n      }\n    },\n    [availableColumns, onApplyFilter],\n  );\n\n  const handleColumnsSelectionChange = useCallback<MultiSelectionHandler>(\n    (evt, newSelected) => {\n      onChangeQuickFilterColumns?.(newSelected);\n    },\n    [onChangeQuickFilterColumns],\n  );\n\n  const availableColumnNames = useMemo(\n    () => availableColumns.map((col) => col.name),\n    [availableColumns],\n  );\n\n  return {\n    availableColumnNames,\n    onChange: handleChange,\n    onColumnsSelectionChange: handleColumnsSelectionChange,\n    onCommit: handleCommit,\n    rootRef,\n  };\n};\n"],"names":["filterAsQuery","NoFilter","useRef","useCallback","queryClosest","useMemo"],"mappings":"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"}

package/esm/filter-clause/value-editors/FilterClauseValueEditor.js

@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import cx from 'clsx';
 import { FilterClauseValueEditorNumber } from './FilterClauseValueEditorNumber.js';
 import { FilterClauseValueEditorText } from './FilterClauseValueEditorText.js';
-import { isDateTimeColumn } from '@vuu-ui/vuu-utils';
+import { isDateTimeDataValue } from '@vuu-ui/vuu-utils';
 import { forwardRef } from 'react';
 import { FilterClauseValueEditorDate } from './FilterClauseValueEditorDate.js';
 
@@ -21,7 +21,7 @@ const FilterClauseValueEditor = forwardRef(
     if (selectedColumn === void 0 || operator === void 0) {
       return null;
     }
-    if (isDateTimeColumn(selectedColumn)) {
+    if (isDateTimeDataValue(selectedColumn)) {
       return /* @__PURE__ */ jsx(
         FilterClauseValueEditorDate,
         {

package/esm/filter-clause/value-editors/FilterClauseValueEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterClauseValueEditor.js","sources":["../../../src/filter-clause/value-editors/FilterClauseValueEditor.tsx"],"sourcesContent":["import { TableSchemaTable } from \"@vuu-ui/vuu-data-types\";\nimport cx from \"clsx\";\nimport { useFilterClause } from \"../useFilterClause\";\nimport { FilterClauseValueEditorNumber } from \"./FilterClauseValueEditorNumber\";\nimport { FilterClauseValueEditorText } from \"./FilterClauseValueEditorText\";\n\nimport {\n  NumericFilterClauseOp,\n  SingleValueFilterClauseOp,\n} from \"@vuu-ui/vuu-filter-types\";\nimport { isDateTimeColumn } from \"@vuu-ui/vuu-utils\";\nimport { ForwardedRef, forwardRef } from \"react\";\nimport { FilterClauseProps } from \"../FilterClause\";\nimport { FilterClauseValueEditorDate } from \"./FilterClauseValueEditorDate\";\n\nconst classBase = \"vuuFilterClause\";\n\ntype FilterClauseValueEditorProps = Pick<\n  ReturnType<typeof useFilterClause>,\n  \"selectedColumn\" | \"inputProps\" | \"onChangeValue\" | \"onDeselectValue\"\n> &\n  Pick<FilterClauseProps, \"suggestionProvider\"> & {\n    table?: TableSchemaTable;\n  } & {\n    operator?: SingleValueFilterClauseOp | \"in\";\n    value?: string | string[] | number | number[] | boolean | boolean[];\n  };\n\nexport const FilterClauseValueEditor = forwardRef(\n  function FilterClauseValueEditor(\n    {\n      selectedColumn,\n      operator,\n      inputProps,\n      onChangeValue,\n      onDeselectValue,\n      suggestionProvider,\n      table,\n      value,\n    }: FilterClauseValueEditorProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n  ) {\n    if (selectedColumn === undefined || operator === undefined) {\n      return null;\n    }\n\n    if (isDateTimeColumn(selectedColumn)) {\n      return (\n        <FilterClauseValueEditorDate\n          inputProps={inputProps}\n          className={cx(`${classBase}Field`, `${classBase}Value`)}\n          // ref={forwardedRef}\n          value={value as number}\n          operator={operator as NumericFilterClauseOp}\n          onChangeValue={onChangeValue}\n        />\n      );\n    }\n\n    switch (selectedColumn.serverDataType) {\n      case \"string\":\n      case \"char\":\n        return (\n          <FilterClauseValueEditorText\n            inputProps={inputProps}\n            className={cx(`${classBase}Field`, `${classBase}Value`)}\n            column={selectedColumn}\n            onDeselect={onDeselectValue}\n            onChangeValue={onChangeValue}\n            operator={operator}\n            ref={forwardedRef}\n            suggestionProvider={suggestionProvider}\n            table={table}\n            value={\n              value === undefined\n                ? \"\"\n                : Array.isArray(value)\n                  ? value.map((val) => val.toString())\n                  : (value.toString() as string | string[])\n            }\n          />\n        );\n      case \"int\":\n      case \"long\":\n      case \"double\":\n        return (\n          <FilterClauseValueEditorNumber\n            inputProps={inputProps}\n            className={cx(`${classBase}Field`, `${classBase}Value`)}\n            column={selectedColumn}\n            data-field=\"value\"\n            onChangeValue={onChangeValue}\n            operator={operator}\n            ref={forwardedRef}\n          />\n        );\n      default:\n        console.log(\"returning null\");\n        return null;\n    }\n  },\n);\n"],"names":["FilterClauseValueEditor"],"mappings":";;;;;;;;AAeA,MAAM,SAAY,GAAA,iBAAA,CAAA;AAaX,MAAM,uBAA0B,GAAA,UAAA;AAAA,EACrC,SAASA,wBACP,CAAA;AAAA,IACE,cAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,aAAA;AAAA,IACA,eAAA;AAAA,IACA,kBAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;AAAA,KAEF,YACA,EAAA;AACA,IAAI,IAAA,cAAA,KAAmB,KAAa,CAAA,IAAA,QAAA,KAAa,KAAW,CAAA,EAAA;AAC1D,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAEA,IAAI,IAAA,gBAAA,CAAiB,cAAc,CAAG,EAAA;AACpC,MACE,uBAAA,GAAA;AAAA,QAAC,2BAAA;AAAA,QAAA;AAAA,UACC,UAAA;AAAA,UACA,WAAW,EAAG,CAAA,CAAA,EAAG,SAAS,CAAS,KAAA,CAAA,EAAA,CAAA,EAAG,SAAS,CAAO,KAAA,CAAA,CAAA;AAAA,UAEtD,KAAA;AAAA,UACA,QAAA;AAAA,UACA,aAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,KAEJ;AAEA,IAAA,QAAQ,eAAe,cAAgB;AAAA,MACrC,KAAK,QAAA,CAAA;AAAA,MACL,KAAK,MAAA;AACH,QACE,uBAAA,GAAA;AAAA,UAAC,2BAAA;AAAA,UAAA;AAAA,YACC,UAAA;AAAA,YACA,WAAW,EAAG,CAAA,CAAA,EAAG,SAAS,CAAS,KAAA,CAAA,EAAA,CAAA,EAAG,SAAS,CAAO,KAAA,CAAA,CAAA;AAAA,YACtD,MAAQ,EAAA,cAAA;AAAA,YACR,UAAY,EAAA,eAAA;AAAA,YACZ,aAAA;AAAA,YACA,QAAA;AAAA,YACA,GAAK,EAAA,YAAA;AAAA,YACL,kBAAA;AAAA,YACA,KAAA;AAAA,YACA,OACE,KAAU,KAAA,KAAA,CAAA,GACN,EACA,GAAA,KAAA,CAAM,QAAQ,KAAK,CAAA,GACjB,KAAM,CAAA,GAAA,CAAI,CAAC,GAAQ,KAAA,GAAA,CAAI,UAAU,CAAA,GAChC,MAAM,QAAS,EAAA;AAAA,WAAA;AAAA,SAE1B,CAAA;AAAA,MAEJ,KAAK,KAAA,CAAA;AAAA,MACL,KAAK,MAAA,CAAA;AAAA,MACL,KAAK,QAAA;AACH,QACE,uBAAA,GAAA;AAAA,UAAC,6BAAA;AAAA,UAAA;AAAA,YACC,UAAA;AAAA,YACA,WAAW,EAAG,CAAA,CAAA,EAAG,SAAS,CAAS,KAAA,CAAA,EAAA,CAAA,EAAG,SAAS,CAAO,KAAA,CAAA,CAAA;AAAA,YACtD,MAAQ,EAAA,cAAA;AAAA,YACR,YAAW,EAAA,OAAA;AAAA,YACX,aAAA;AAAA,YACA,QAAA;AAAA,YACA,GAAK,EAAA,YAAA;AAAA,WAAA;AAAA,SACP,CAAA;AAAA,MAEJ;AACE,QAAA,OAAA,CAAQ,IAAI,gBAAgB,CAAA,CAAA;AAC5B,QAAO,OAAA,IAAA,CAAA;AAAA,KACX;AAAA,GACF;AACF;;;;"}
+{"version":3,"file":"FilterClauseValueEditor.js","sources":["../../../src/filter-clause/value-editors/FilterClauseValueEditor.tsx"],"sourcesContent":["import { TableSchemaTable } from \"@vuu-ui/vuu-data-types\";\nimport cx from \"clsx\";\nimport { useFilterClause } from \"../useFilterClause\";\nimport { FilterClauseValueEditorNumber } from \"./FilterClauseValueEditorNumber\";\nimport { FilterClauseValueEditorText } from \"./FilterClauseValueEditorText\";\n\nimport {\n  NumericFilterClauseOp,\n  SingleValueFilterClauseOp,\n} from \"@vuu-ui/vuu-filter-types\";\nimport { isDateTimeDataValue } from \"@vuu-ui/vuu-utils\";\nimport { ForwardedRef, forwardRef } from \"react\";\nimport { FilterClauseProps } from \"../FilterClause\";\nimport { FilterClauseValueEditorDate } from \"./FilterClauseValueEditorDate\";\n\nconst classBase = \"vuuFilterClause\";\n\ntype FilterClauseValueEditorProps = Pick<\n  ReturnType<typeof useFilterClause>,\n  \"selectedColumn\" | \"inputProps\" | \"onChangeValue\" | \"onDeselectValue\"\n> &\n  Pick<FilterClauseProps, \"suggestionProvider\"> & {\n    table?: TableSchemaTable;\n  } & {\n    operator?: SingleValueFilterClauseOp | \"in\";\n    value?: string | string[] | number | number[] | boolean | boolean[];\n  };\n\nexport const FilterClauseValueEditor = forwardRef(\n  function FilterClauseValueEditor(\n    {\n      selectedColumn,\n      operator,\n      inputProps,\n      onChangeValue,\n      onDeselectValue,\n      suggestionProvider,\n      table,\n      value,\n    }: FilterClauseValueEditorProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n  ) {\n    if (selectedColumn === undefined || operator === undefined) {\n      return null;\n    }\n\n    if (isDateTimeDataValue(selectedColumn)) {\n      return (\n        <FilterClauseValueEditorDate\n          inputProps={inputProps}\n          className={cx(`${classBase}Field`, `${classBase}Value`)}\n          // ref={forwardedRef}\n          value={value as number}\n          operator={operator as NumericFilterClauseOp}\n          onChangeValue={onChangeValue}\n        />\n      );\n    }\n\n    switch (selectedColumn.serverDataType) {\n      case \"string\":\n      case \"char\":\n        return (\n          <FilterClauseValueEditorText\n            inputProps={inputProps}\n            className={cx(`${classBase}Field`, `${classBase}Value`)}\n            column={selectedColumn}\n            onDeselect={onDeselectValue}\n            onChangeValue={onChangeValue}\n            operator={operator}\n            ref={forwardedRef}\n            suggestionProvider={suggestionProvider}\n            table={table}\n            value={\n              value === undefined\n                ? \"\"\n                : Array.isArray(value)\n                  ? value.map((val) => val.toString())\n                  : (value.toString() as string | string[])\n            }\n          />\n        );\n      case \"int\":\n      case \"long\":\n      case \"double\":\n        return (\n          <FilterClauseValueEditorNumber\n            inputProps={inputProps}\n            className={cx(`${classBase}Field`, `${classBase}Value`)}\n            column={selectedColumn}\n            data-field=\"value\"\n            onChangeValue={onChangeValue}\n            operator={operator}\n            ref={forwardedRef}\n          />\n        );\n      default:\n        console.log(\"returning null\");\n        return null;\n    }\n  },\n);\n"],"names":["FilterClauseValueEditor"],"mappings":";;;;;;;;AAeA,MAAM,SAAY,GAAA,iBAAA,CAAA;AAaX,MAAM,uBAA0B,GAAA,UAAA;AAAA,EACrC,SAASA,wBACP,CAAA;AAAA,IACE,cAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,aAAA;AAAA,IACA,eAAA;AAAA,IACA,kBAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;AAAA,KAEF,YACA,EAAA;AACA,IAAI,IAAA,cAAA,KAAmB,KAAa,CAAA,IAAA,QAAA,KAAa,KAAW,CAAA,EAAA;AAC1D,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAEA,IAAI,IAAA,mBAAA,CAAoB,cAAc,CAAG,EAAA;AACvC,MACE,uBAAA,GAAA;AAAA,QAAC,2BAAA;AAAA,QAAA;AAAA,UACC,UAAA;AAAA,UACA,WAAW,EAAG,CAAA,CAAA,EAAG,SAAS,CAAS,KAAA,CAAA,EAAA,CAAA,EAAG,SAAS,CAAO,KAAA,CAAA,CAAA;AAAA,UAEtD,KAAA;AAAA,UACA,QAAA;AAAA,UACA,aAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,KAEJ;AAEA,IAAA,QAAQ,eAAe,cAAgB;AAAA,MACrC,KAAK,QAAA,CAAA;AAAA,MACL,KAAK,MAAA;AACH,QACE,uBAAA,GAAA;AAAA,UAAC,2BAAA;AAAA,UAAA;AAAA,YACC,UAAA;AAAA,YACA,WAAW,EAAG,CAAA,CAAA,EAAG,SAAS,CAAS,KAAA,CAAA,EAAA,CAAA,EAAG,SAAS,CAAO,KAAA,CAAA,CAAA;AAAA,YACtD,MAAQ,EAAA,cAAA;AAAA,YACR,UAAY,EAAA,eAAA;AAAA,YACZ,aAAA;AAAA,YACA,QAAA;AAAA,YACA,GAAK,EAAA,YAAA;AAAA,YACL,kBAAA;AAAA,YACA,KAAA;AAAA,YACA,OACE,KAAU,KAAA,KAAA,CAAA,GACN,EACA,GAAA,KAAA,CAAM,QAAQ,KAAK,CAAA,GACjB,KAAM,CAAA,GAAA,CAAI,CAAC,GAAQ,KAAA,GAAA,CAAI,UAAU,CAAA,GAChC,MAAM,QAAS,EAAA;AAAA,WAAA;AAAA,SAE1B,CAAA;AAAA,MAEJ,KAAK,KAAA,CAAA;AAAA,MACL,KAAK,MAAA,CAAA;AAAA,MACL,KAAK,QAAA;AACH,QACE,uBAAA,GAAA;AAAA,UAAC,6BAAA;AAAA,UAAA;AAAA,YACC,UAAA;AAAA,YACA,WAAW,EAAG,CAAA,CAAA,EAAG,SAAS,CAAS,KAAA,CAAA,EAAA,CAAA,EAAG,SAAS,CAAO,KAAA,CAAA,CAAA;AAAA,YACtD,MAAQ,EAAA,cAAA;AAAA,YACR,YAAW,EAAA,OAAA;AAAA,YACX,aAAA;AAAA,YACA,QAAA;AAAA,YACA,GAAK,EAAA,YAAA;AAAA,WAAA;AAAA,SACP,CAAA;AAAA,MAEJ;AACE,QAAA,OAAA,CAAQ,IAAI,gBAAgB,CAAA,CAAA;AAC5B,QAAO,OAAA,IAAA,CAAA;AAAA,KACX;AAAA,GACF;AACF;;;;"}

package/esm/filter-pill/getFilterTooltipText.js

@@ -1,4 +1,4 @@
-import { isMultiClauseFilter, filterAsQuery, isDateTimeColumn, dateTimePattern, formatDate, defaultPatternsByType } from '@vuu-ui/vuu-utils';
+import { isMultiClauseFilter, filterAsQuery, isDateTimeDataValue, dateTimePattern, formatDate, defaultPatternsByType } from '@vuu-ui/vuu-utils';
 import { filterClauses } from '../filter-utils.js';
 
 function applyFormatter(filter, formatter) {
@@ -10,7 +10,7 @@ function applyFormatter(filter, formatter) {
 }
 function formatFilterValue(filter, columnsByName) {
   const column = columnsByName?.[filter.column];
-  if (column && isDateTimeColumn(column)) {
+  if (column && isDateTimeDataValue(column)) {
     const pattern = dateTimePattern(column.type);
     const formatter = (n) => formatDate({ date: pattern.date ?? defaultPatternsByType.date })(
       new Date(n)

package/esm/filter-pill/getFilterTooltipText.js.map

@@ -1 +1 @@
-{"version":3,"file":"getFilterTooltipText.js","sources":["../../src/filter-pill/getFilterTooltipText.ts"],"sourcesContent":["import {\n  ColumnDescriptorsByName,\n  Filter,\n  FilterClause,\n  MultiValueFilterClause,\n  SingleValueFilterClause,\n} from \"@vuu-ui/vuu-filter-types\";\nimport {\n  filterAsQuery,\n  formatDate,\n  isDateTimeColumn,\n  isMultiClauseFilter,\n  dateTimePattern,\n  defaultPatternsByType,\n} from \"@vuu-ui/vuu-utils\";\nimport { filterClauses } from \"../filter-utils\";\n\nfunction applyFormatter<T>(\n  filter: SingleValueFilterClause<T> | MultiValueFilterClause<T[]>,\n  formatter: (t: T) => string,\n): FilterClause {\n  if (\"value\" in filter) {\n    return { ...filter, value: formatter(filter.value) };\n  } else {\n    return { ...filter, values: filter.values.map(formatter) };\n  }\n}\n\nfunction formatFilterValue(\n  filter: FilterClause,\n  columnsByName?: ColumnDescriptorsByName,\n): FilterClause {\n  const column = columnsByName?.[filter.column];\n  if (column && isDateTimeColumn(column)) {\n    const pattern = dateTimePattern(column.type);\n    const formatter = (n: number) =>\n      formatDate({ date: pattern.date ?? defaultPatternsByType.date })(\n        new Date(n),\n      );\n    return applyFormatter(\n      filter as\n        | SingleValueFilterClause<number>\n        | MultiValueFilterClause<number[]>,\n      formatter,\n    );\n  }\n\n  return filter;\n}\n\nexport const getFilterTooltipText =\n  (columnsByName?: ColumnDescriptorsByName) => (filter: Filter) => {\n    if (isMultiClauseFilter(filter)) {\n      const [firstClause] = filterClauses(filter);\n      const formattedFilter = formatFilterValue(\n        firstClause as FilterClause,\n        columnsByName,\n      );\n      return `${filterAsQuery(formattedFilter)} ${filter.op} ...`;\n    } else {\n      return filterAsQuery(formatFilterValue(filter, columnsByName));\n    }\n  };\n"],"names":[],"mappings":";;;AAiBA,SAAS,cAAA,CACP,QACA,SACc,EAAA;AACd,EAAA,IAAI,WAAW,MAAQ,EAAA;AACrB,IAAA,OAAO,EAAE,GAAG,MAAA,EAAQ,OAAO,SAAU,CAAA,MAAA,CAAO,KAAK,CAAE,EAAA,CAAA;AAAA,GAC9C,MAAA;AACL,IAAO,OAAA,EAAE,GAAG,MAAQ,EAAA,MAAA,EAAQ,OAAO,MAAO,CAAA,GAAA,CAAI,SAAS,CAAE,EAAA,CAAA;AAAA,GAC3D;AACF,CAAA;AAEA,SAAS,iBAAA,CACP,QACA,aACc,EAAA;AACd,EAAM,MAAA,MAAA,GAAS,aAAgB,GAAA,MAAA,CAAO,MAAM,CAAA,CAAA;AAC5C,EAAI,IAAA,MAAA,IAAU,gBAAiB,CAAA,MAAM,CAAG,EAAA;AACtC,IAAM,MAAA,OAAA,GAAU,eAAgB,CAAA,MAAA,CAAO,IAAI,CAAA,CAAA;AAC3C,IAAM,MAAA,SAAA,GAAY,CAAC,CAAA,KACjB,UAAW,CAAA,EAAE,MAAM,OAAQ,CAAA,IAAA,IAAQ,qBAAsB,CAAA,IAAA,EAAM,CAAA;AAAA,MAC7D,IAAI,KAAK,CAAC,CAAA;AAAA,KACZ,CAAA;AACF,IAAO,OAAA,cAAA;AAAA,MACL,MAAA;AAAA,MAGA,SAAA;AAAA,KACF,CAAA;AAAA,GACF;AAEA,EAAO,OAAA,MAAA,CAAA;AACT,CAAA;AAEO,MAAM,oBACX,GAAA,CAAC,aAA4C,KAAA,CAAC,MAAmB,KAAA;AAC/D,EAAI,IAAA,mBAAA,CAAoB,MAAM,CAAG,EAAA;AAC/B,IAAA,MAAM,CAAC,WAAW,CAAI,GAAA,aAAA,CAAc,MAAM,CAAA,CAAA;AAC1C,IAAA,MAAM,eAAkB,GAAA,iBAAA;AAAA,MACtB,WAAA;AAAA,MACA,aAAA;AAAA,KACF,CAAA;AACA,IAAA,OAAO,GAAG,aAAc,CAAA,eAAe,CAAC,CAAA,CAAA,EAAI,OAAO,EAAE,CAAA,IAAA,CAAA,CAAA;AAAA,GAChD,MAAA;AACL,IAAA,OAAO,aAAc,CAAA,iBAAA,CAAkB,MAAQ,EAAA,aAAa,CAAC,CAAA,CAAA;AAAA,GAC/D;AACF;;;;"}
+{"version":3,"file":"getFilterTooltipText.js","sources":["../../src/filter-pill/getFilterTooltipText.ts"],"sourcesContent":["import {\n  ColumnDescriptorsByName,\n  Filter,\n  FilterClause,\n  MultiValueFilterClause,\n  SingleValueFilterClause,\n} from \"@vuu-ui/vuu-filter-types\";\nimport {\n  filterAsQuery,\n  formatDate,\n  isDateTimeDataValue,\n  isMultiClauseFilter,\n  dateTimePattern,\n  defaultPatternsByType,\n} from \"@vuu-ui/vuu-utils\";\nimport { filterClauses } from \"../filter-utils\";\n\nfunction applyFormatter<T>(\n  filter: SingleValueFilterClause<T> | MultiValueFilterClause<T[]>,\n  formatter: (t: T) => string,\n): FilterClause {\n  if (\"value\" in filter) {\n    return { ...filter, value: formatter(filter.value) };\n  } else {\n    return { ...filter, values: filter.values.map(formatter) };\n  }\n}\n\nfunction formatFilterValue(\n  filter: FilterClause,\n  columnsByName?: ColumnDescriptorsByName,\n): FilterClause {\n  const column = columnsByName?.[filter.column];\n  if (column && isDateTimeDataValue(column)) {\n    const pattern = dateTimePattern(column.type);\n    const formatter = (n: number) =>\n      formatDate({ date: pattern.date ?? defaultPatternsByType.date })(\n        new Date(n),\n      );\n    return applyFormatter(\n      filter as\n        | SingleValueFilterClause<number>\n        | MultiValueFilterClause<number[]>,\n      formatter,\n    );\n  }\n\n  return filter;\n}\n\nexport const getFilterTooltipText =\n  (columnsByName?: ColumnDescriptorsByName) => (filter: Filter) => {\n    if (isMultiClauseFilter(filter)) {\n      const [firstClause] = filterClauses(filter);\n      const formattedFilter = formatFilterValue(\n        firstClause as FilterClause,\n        columnsByName,\n      );\n      return `${filterAsQuery(formattedFilter)} ${filter.op} ...`;\n    } else {\n      return filterAsQuery(formatFilterValue(filter, columnsByName));\n    }\n  };\n"],"names":[],"mappings":";;;AAiBA,SAAS,cAAA,CACP,QACA,SACc,EAAA;AACd,EAAA,IAAI,WAAW,MAAQ,EAAA;AACrB,IAAA,OAAO,EAAE,GAAG,MAAA,EAAQ,OAAO,SAAU,CAAA,MAAA,CAAO,KAAK,CAAE,EAAA,CAAA;AAAA,GAC9C,MAAA;AACL,IAAO,OAAA,EAAE,GAAG,MAAQ,EAAA,MAAA,EAAQ,OAAO,MAAO,CAAA,GAAA,CAAI,SAAS,CAAE,EAAA,CAAA;AAAA,GAC3D;AACF,CAAA;AAEA,SAAS,iBAAA,CACP,QACA,aACc,EAAA;AACd,EAAM,MAAA,MAAA,GAAS,aAAgB,GAAA,MAAA,CAAO,MAAM,CAAA,CAAA;AAC5C,EAAI,IAAA,MAAA,IAAU,mBAAoB,CAAA,MAAM,CAAG,EAAA;AACzC,IAAM,MAAA,OAAA,GAAU,eAAgB,CAAA,MAAA,CAAO,IAAI,CAAA,CAAA;AAC3C,IAAM,MAAA,SAAA,GAAY,CAAC,CAAA,KACjB,UAAW,CAAA,EAAE,MAAM,OAAQ,CAAA,IAAA,IAAQ,qBAAsB,CAAA,IAAA,EAAM,CAAA;AAAA,MAC7D,IAAI,KAAK,CAAC,CAAA;AAAA,KACZ,CAAA;AACF,IAAO,OAAA,cAAA;AAAA,MACL,MAAA;AAAA,MAGA,SAAA;AAAA,KACF,CAAA;AAAA,GACF;AAEA,EAAO,OAAA,MAAA,CAAA;AACT,CAAA;AAEO,MAAM,oBACX,GAAA,CAAC,aAA4C,KAAA,CAAC,MAAmB,KAAA;AAC/D,EAAI,IAAA,mBAAA,CAAoB,MAAM,CAAG,EAAA;AAC/B,IAAA,MAAM,CAAC,WAAW,CAAI,GAAA,aAAA,CAAc,MAAM,CAAA,CAAA;AAC1C,IAAA,MAAM,eAAkB,GAAA,iBAAA;AAAA,MACtB,WAAA;AAAA,MACA,aAAA;AAAA,KACF,CAAA;AACA,IAAA,OAAO,GAAG,aAAc,CAAA,eAAe,CAAC,CAAA,CAAA,EAAI,OAAO,EAAE,CAAA,IAAA,CAAA,CAAA;AAAA,GAChD,MAAA;AACL,IAAA,OAAO,aAAc,CAAA,iBAAA,CAAkB,MAAQ,EAAA,aAAa,CAAC,CAAA,CAAA;AAAA,GAC/D;AACF;;;;"}

package/esm/inline-filter/InlineFilter.js

@@ -40,7 +40,11 @@ const InlineFilter = ({
       {
         className: `${classBase}-filter`,
         style: { width: column.width },
-        children: getDataItemEditControl({ InputProps, column, onCommit })
+        children: getDataItemEditControl({
+          InputProps,
+          dataDescriptor: column,
+          onCommit
+        })
       },
       column.name
     ))

package/esm/inline-filter/InlineFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineFilter.js","sources":["../../src/inline-filter/InlineFilter.tsx"],"sourcesContent":["import { getDataItemEditControl } from \"@vuu-ui/vuu-data-react\";\nimport { VirtualColSpan, useHeaderProps } from \"@vuu-ui/vuu-table\";\nimport { CommitHandler, getFieldName } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, useCallback } from \"react\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\n\nimport inlineFilteCss from \"./InlineFilter.css\";\nimport { InputProps } from \"@salt-ds/core\";\n\nconst classBase = \"vuuInlineFilter\";\n\nexport type FilterValueChangeHandler = (\n  column: ColumnDescriptor,\n  value: string,\n) => void;\nexport interface InlineFilterProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  onChange: FilterValueChangeHandler;\n}\n\nconst InputProps: Partial<InputProps> = {\n  placeholder: \"Enter value\",\n  variant: \"primary\",\n};\n\nexport const InlineFilter = ({\n  onChange,\n  ...htmlAttributes\n}: InlineFilterProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-inline-filter\",\n    css: inlineFilteCss,\n    window: targetWindow,\n  });\n\n  const { columns, virtualColSpan = 0 } = useHeaderProps();\n\n  const onCommit = useCallback<\n    CommitHandler<HTMLInputElement, string | number | undefined>\n  >(\n    (evt, value = \"\") => {\n      const fieldName = getFieldName(evt.target);\n      const column = columns.find((c) => c.name === fieldName);\n      if (column) {\n        onChange(column, value.toString());\n      }\n    },\n    [columns, onChange],\n  );\n\n  return (\n    <div {...htmlAttributes} className={classBase}>\n      <VirtualColSpan width={virtualColSpan} />\n      {columns.map((column) => (\n        <div\n          className={`${classBase}-filter`}\n          key={column.name}\n          style={{ width: column.width }}\n        >\n          {getDataItemEditControl({ InputProps, column, onCommit })}\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAWA,MAAM,SAAY,GAAA,iBAAA,CAAA;AAWlB,MAAM,UAAkC,GAAA;AAAA,EACtC,WAAa,EAAA,aAAA;AAAA,EACb,OAAS,EAAA,SAAA;AACX,CAAA,CAAA;AAEO,MAAM,eAAe,CAAC;AAAA,EAC3B,QAAA;AAAA,EACA,GAAG,cAAA;AACL,CAAyB,KAAA;AACvB,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAA,cAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,OAAA,EAAS,cAAiB,GAAA,CAAA,KAAM,cAAe,EAAA,CAAA;AAEvD,EAAA,MAAM,QAAW,GAAA,WAAA;AAAA,IAGf,CAAC,GAAK,EAAA,KAAA,GAAQ,EAAO,KAAA;AACnB,MAAM,MAAA,SAAA,GAAY,YAAa,CAAA,GAAA,CAAI,MAAM,CAAA,CAAA;AACzC,MAAA,MAAM,SAAS,OAAQ,CAAA,IAAA,CAAK,CAAC,CAAM,KAAA,CAAA,CAAE,SAAS,SAAS,CAAA,CAAA;AACvD,MAAA,IAAI,MAAQ,EAAA;AACV,QAAS,QAAA,CAAA,MAAA,EAAQ,KAAM,CAAA,QAAA,EAAU,CAAA,CAAA;AAAA,OACnC;AAAA,KACF;AAAA,IACA,CAAC,SAAS,QAAQ,CAAA;AAAA,GACpB,CAAA;AAEA,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA,EAAK,GAAG,cAAA,EAAgB,WAAW,SAClC,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,cAAA,EAAA,EAAe,OAAO,cAAgB,EAAA,CAAA;AAAA,IACtC,OAAA,CAAQ,GAAI,CAAA,CAAC,MACZ,qBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,GAAG,SAAS,CAAA,OAAA,CAAA;AAAA,QAEvB,KAAO,EAAA,EAAE,KAAO,EAAA,MAAA,CAAO,KAAM,EAAA;AAAA,QAE5B,QAAuB,EAAA,sBAAA,CAAA,EAAE,UAAY,EAAA,MAAA,EAAQ,UAAU,CAAA;AAAA,OAAA;AAAA,MAHnD,MAAO,CAAA,IAAA;AAAA,KAKf,CAAA;AAAA,GACH,EAAA,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"InlineFilter.js","sources":["../../src/inline-filter/InlineFilter.tsx"],"sourcesContent":["import { getDataItemEditControl } from \"@vuu-ui/vuu-data-react\";\nimport { VirtualColSpan, useHeaderProps } from \"@vuu-ui/vuu-table\";\nimport { CommitHandler, getFieldName } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, useCallback } from \"react\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\n\nimport inlineFilteCss from \"./InlineFilter.css\";\nimport { InputProps } from \"@salt-ds/core\";\n\nconst classBase = \"vuuInlineFilter\";\n\nexport type FilterValueChangeHandler = (\n  column: ColumnDescriptor,\n  value: string,\n) => void;\nexport interface InlineFilterProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  onChange: FilterValueChangeHandler;\n}\n\nconst InputProps: Partial<InputProps> = {\n  placeholder: \"Enter value\",\n  variant: \"primary\",\n};\n\nexport const InlineFilter = ({\n  onChange,\n  ...htmlAttributes\n}: InlineFilterProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-inline-filter\",\n    css: inlineFilteCss,\n    window: targetWindow,\n  });\n\n  const { columns, virtualColSpan = 0 } = useHeaderProps();\n\n  const onCommit = useCallback<\n    CommitHandler<HTMLElement, string | number | undefined>\n  >(\n    (evt, value = \"\") => {\n      const fieldName = getFieldName(evt.target);\n      const column = columns.find((c) => c.name === fieldName);\n      if (column) {\n        onChange(column, value.toString());\n      }\n    },\n    [columns, onChange],\n  );\n\n  return (\n    <div {...htmlAttributes} className={classBase}>\n      <VirtualColSpan width={virtualColSpan} />\n      {columns.map((column) => (\n        <div\n          className={`${classBase}-filter`}\n          key={column.name}\n          style={{ width: column.width }}\n        >\n          {getDataItemEditControl({\n            InputProps,\n            dataDescriptor: column,\n            onCommit,\n          })}\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAWA,MAAM,SAAY,GAAA,iBAAA,CAAA;AAWlB,MAAM,UAAkC,GAAA;AAAA,EACtC,WAAa,EAAA,aAAA;AAAA,EACb,OAAS,EAAA,SAAA;AACX,CAAA,CAAA;AAEO,MAAM,eAAe,CAAC;AAAA,EAC3B,QAAA;AAAA,EACA,GAAG,cAAA;AACL,CAAyB,KAAA;AACvB,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAA,cAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,OAAA,EAAS,cAAiB,GAAA,CAAA,KAAM,cAAe,EAAA,CAAA;AAEvD,EAAA,MAAM,QAAW,GAAA,WAAA;AAAA,IAGf,CAAC,GAAK,EAAA,KAAA,GAAQ,EAAO,KAAA;AACnB,MAAM,MAAA,SAAA,GAAY,YAAa,CAAA,GAAA,CAAI,MAAM,CAAA,CAAA;AACzC,MAAA,MAAM,SAAS,OAAQ,CAAA,IAAA,CAAK,CAAC,CAAM,KAAA,CAAA,CAAE,SAAS,SAAS,CAAA,CAAA;AACvD,MAAA,IAAI,MAAQ,EAAA;AACV,QAAS,QAAA,CAAA,MAAA,EAAQ,KAAM,CAAA,QAAA,EAAU,CAAA,CAAA;AAAA,OACnC;AAAA,KACF;AAAA,IACA,CAAC,SAAS,QAAQ,CAAA;AAAA,GACpB,CAAA;AAEA,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA,EAAK,GAAG,cAAA,EAAgB,WAAW,SAClC,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,cAAA,EAAA,EAAe,OAAO,cAAgB,EAAA,CAAA;AAAA,IACtC,OAAA,CAAQ,GAAI,CAAA,CAAC,MACZ,qBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,GAAG,SAAS,CAAA,OAAA,CAAA;AAAA,QAEvB,KAAO,EAAA,EAAE,KAAO,EAAA,MAAA,CAAO,KAAM,EAAA;AAAA,QAE5B,QAAuB,EAAA,sBAAA,CAAA;AAAA,UACtB,UAAA;AAAA,UACA,cAAgB,EAAA,MAAA;AAAA,UAChB,QAAA;AAAA,SACD,CAAA;AAAA,OAAA;AAAA,MAPI,MAAO,CAAA,IAAA;AAAA,KASf,CAAA;AAAA,GACH,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/esm/quick-filters/QuickFilters.js

@@ -66,7 +66,7 @@ const QuickFilters = ({
           /* @__PURE__ */ jsxs(FormField, { "data-field": column.name, children: [
             /* @__PURE__ */ jsx(FormFieldLabel, { children: column.label ?? column.name }),
             getDataItemEditControl({
-              column,
+              dataDescriptor: column,
               onCommit,
               suggestionProvider,
               table: tableSchema?.table

package/esm/quick-filters/QuickFilters.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuickFilters.js","sources":["../../src/quick-filters/QuickFilters.tsx"],"sourcesContent":["import { getDataItemEditControl } from \"@vuu-ui/vuu-data-react\";\nimport type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { ColumnPicker, Icon, VuuInput } from \"@vuu-ui/vuu-ui-controls\";\nimport { FormField, FormFieldLabel } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport type { HTMLAttributes } from \"react\";\nimport { FilterBarProps } from \"../filter-bar\";\nimport { useQuickFilters } from \"./useQuickFilters\";\n\nimport quickFiltersCss from \"./QuickFilters.css\";\n\nconst classBase = \"vuuQuickFilters\";\n\nexport interface QuickFilterProps\n  extends HTMLAttributes<HTMLDivElement>,\n    Pick<\n      FilterBarProps,\n      \"onApplyFilter\" | \"suggestionProvider\" | \"tableSchema\"\n    > {\n  allowAddColumn?: boolean;\n  allowFind?: boolean;\n  availableColumns: ColumnDescriptor[];\n  onChangeQuickFilterColumns?: (columns: string[]) => void;\n  quickFilterColumns?: string[];\n  /**\n   * Render a general 'search' control.\n   * if true, all columns of type 'string' will be included in the search. Otherwise\n   * a list of the columns to include in search can be provided.\n   */\n  showFind?: boolean | string[];\n}\n\nexport const QuickFilters = ({\n  allowAddColumn = true,\n  allowFind = true,\n  availableColumns,\n  onApplyFilter,\n  onChangeQuickFilterColumns,\n  quickFilterColumns,\n  suggestionProvider,\n  tableSchema,\n}: QuickFilterProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-quick-filters\",\n    css: quickFiltersCss,\n    window: targetWindow,\n  });\n\n  const searchIcon = <Icon name=\"search\" size={18} />;\n\n  const {\n    availableColumnNames,\n    onChange,\n    onColumnsSelectionChange,\n    onCommit,\n    rootRef,\n  } = useQuickFilters({\n    availableColumns,\n    onApplyFilter,\n    onChangeQuickFilterColumns,\n    quickFilterColumns,\n  });\n\n  const filterColumns = availableColumns.filter(({ name }) =>\n    quickFilterColumns?.includes(name),\n  );\n\n  const getFilterControls = () => {\n    const controls = [];\n    if (allowFind) {\n      controls.push(\n        <FormField data-embedded data-field=\"find\" key=\"find\">\n          <FormFieldLabel>Find</FormFieldLabel>\n          <VuuInput\n            inputProps={{\n              onChange,\n            }}\n            onCommit={onCommit}\n            startAdornment={searchIcon}\n            variant=\"secondary\"\n          />\n        </FormField>,\n      );\n    }\n    {\n      filterColumns?.forEach((column) =>\n        controls.push(\n          <FormField key={column.label ?? column.name} data-field={column.name}>\n            <FormFieldLabel>{column.label ?? column.name}</FormFieldLabel>\n            {getDataItemEditControl({\n              column,\n              onCommit,\n              suggestionProvider,\n              table: tableSchema?.table,\n            })}\n          </FormField>,\n        ),\n      );\n    }\n\n    return controls;\n  };\n\n  return (\n    <div className={classBase} ref={rootRef}>\n      <div className={`${classBase}-filter-container`}>\n        {getFilterControls()}\n      </div>\n      {allowAddColumn ? (\n        <ColumnPicker\n          columns={availableColumnNames}\n          icon=\"more-horiz\"\n          iconSize={16}\n          onSelectionChange={onColumnsSelectionChange}\n          selected={quickFilterColumns}\n        />\n      ) : null}\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"QuickFilters.js","sources":["../../src/quick-filters/QuickFilters.tsx"],"sourcesContent":["import { getDataItemEditControl } from \"@vuu-ui/vuu-data-react\";\nimport type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { ColumnPicker, Icon, VuuInput } from \"@vuu-ui/vuu-ui-controls\";\nimport { FormField, FormFieldLabel } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport type { HTMLAttributes } from \"react\";\nimport { FilterBarProps } from \"../filter-bar\";\nimport { useQuickFilters } from \"./useQuickFilters\";\n\nimport quickFiltersCss from \"./QuickFilters.css\";\n\nconst classBase = \"vuuQuickFilters\";\n\nexport interface QuickFilterProps\n  extends HTMLAttributes<HTMLDivElement>,\n    Pick<\n      FilterBarProps,\n      \"onApplyFilter\" | \"suggestionProvider\" | \"tableSchema\"\n    > {\n  allowAddColumn?: boolean;\n  allowFind?: boolean;\n  availableColumns: ColumnDescriptor[];\n  onChangeQuickFilterColumns?: (columns: string[]) => void;\n  quickFilterColumns?: string[];\n  /**\n   * Render a general 'search' control.\n   * if true, all columns of type 'string' will be included in the search. Otherwise\n   * a list of the columns to include in search can be provided.\n   */\n  showFind?: boolean | string[];\n}\n\nexport const QuickFilters = ({\n  allowAddColumn = true,\n  allowFind = true,\n  availableColumns,\n  onApplyFilter,\n  onChangeQuickFilterColumns,\n  quickFilterColumns,\n  suggestionProvider,\n  tableSchema,\n}: QuickFilterProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-quick-filters\",\n    css: quickFiltersCss,\n    window: targetWindow,\n  });\n\n  const searchIcon = <Icon name=\"search\" size={18} />;\n\n  const {\n    availableColumnNames,\n    onChange,\n    onColumnsSelectionChange,\n    onCommit,\n    rootRef,\n  } = useQuickFilters({\n    availableColumns,\n    onApplyFilter,\n    onChangeQuickFilterColumns,\n    quickFilterColumns,\n  });\n\n  const filterColumns = availableColumns.filter(({ name }) =>\n    quickFilterColumns?.includes(name),\n  );\n\n  const getFilterControls = () => {\n    const controls = [];\n    if (allowFind) {\n      controls.push(\n        <FormField data-embedded data-field=\"find\" key=\"find\">\n          <FormFieldLabel>Find</FormFieldLabel>\n          <VuuInput\n            inputProps={{\n              onChange,\n            }}\n            onCommit={onCommit}\n            startAdornment={searchIcon}\n            variant=\"secondary\"\n          />\n        </FormField>,\n      );\n    }\n    {\n      filterColumns?.forEach((column) =>\n        controls.push(\n          <FormField key={column.label ?? column.name} data-field={column.name}>\n            <FormFieldLabel>{column.label ?? column.name}</FormFieldLabel>\n            {getDataItemEditControl({\n              dataDescriptor: column,\n              onCommit,\n              suggestionProvider,\n              table: tableSchema?.table,\n            })}\n          </FormField>,\n        ),\n      );\n    }\n\n    return controls;\n  };\n\n  return (\n    <div className={classBase} ref={rootRef}>\n      <div className={`${classBase}-filter-container`}>\n        {getFilterControls()}\n      </div>\n      {allowAddColumn ? (\n        <ColumnPicker\n          columns={availableColumnNames}\n          icon=\"more-horiz\"\n          iconSize={16}\n          onSelectionChange={onColumnsSelectionChange}\n          selected={quickFilterColumns}\n        />\n      ) : null}\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/esm/quick-filters/useQuickFilters.js.map

@@ -1 +1 @@
-{"version":3,"file":"useQuickFilters.js","sources":["../../src/quick-filters/useQuickFilters.ts"],"sourcesContent":["import type { DataSourceFilter } from \"@vuu-ui/vuu-data-types\";\nimport type { Filter } from \"@vuu-ui/vuu-filter-types\";\nimport type { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { MultiSelectionHandler } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  CommitHandler,\n  NoFilter,\n  filterAsQuery,\n  queryClosest,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n  ChangeEventHandler,\n  RefCallback,\n  useCallback,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { QuickFilterProps } from \"./QuickFilters\";\n\ntype QuickFilterValues = Record<string, VuuRowDataItemType>;\n\nconst createFilterClause = (\n  [identifier, value]: [string, VuuRowDataItemType],\n  availableColumns?: ColumnDescriptor[],\n): Filter => {\n  if (identifier === \"find\") {\n    if (availableColumns) {\n      const targetColumns = availableColumns.filter(\n        ({ serverDataType }) => serverDataType === \"string\",\n      );\n      if (targetColumns.length) {\n        return {\n          op: \"or\",\n          filters: targetColumns.map((column) =>\n            createFilterClause([column.name, value]),\n          ),\n        };\n      } else {\n        throw Error(`value ${value} is not valid for any of availanle columns`);\n      }\n    } else {\n      throw Error(\"columns must be provided for find operation\");\n    }\n  } else {\n    return {\n      column: identifier,\n      op: \"contains\",\n      value,\n    };\n  }\n};\n\nconst buildFilterStruct = (\n  quickFilters: QuickFilterValues,\n  availableColumns: ColumnDescriptor[],\n): Filter | undefined => {\n  const entries = Object.entries(quickFilters);\n  if (entries.length === 1) {\n    return createFilterClause(entries[0], availableColumns);\n  } else if (entries.length > 1) {\n    return {\n      op: \"and\",\n      filters: entries.map(\n        (entry) => createFilterClause(entry, availableColumns),\n        availableColumns,\n      ),\n    };\n  }\n};\n\nconst buildFilter = (\n  quickFilters: QuickFilterValues,\n  availableColumns: ColumnDescriptor[],\n): DataSourceFilter => {\n  const filterStruct = buildFilterStruct(quickFilters, availableColumns);\n  if (filterStruct) {\n    return {\n      filter: filterAsQuery(filterStruct),\n      filterStruct,\n    };\n  } else {\n    return NoFilter;\n  }\n};\n\nexport type QuickFilterHookProps = Pick<\n  QuickFilterProps,\n  | \"availableColumns\"\n  | \"onApplyFilter\"\n  | \"onChangeQuickFilterColumns\"\n  | \"quickFilterColumns\"\n>;\n\nexport const useQuickFilters = ({\n  availableColumns,\n  onApplyFilter,\n  onChangeQuickFilterColumns,\n}: QuickFilterProps) => {\n  const filters = useRef<QuickFilterValues>({});\n  const rootRef = useCallback<RefCallback<HTMLDivElement>>((el) => {\n    if (el) {\n      const firstInput = el.querySelector(\"input\");\n      firstInput?.focus();\n    }\n  }, []);\n\n  const handleChange = useCallback<ChangeEventHandler<HTMLInputElement>>(\n    (e) => {\n      console.log(`onChange ${e.target.value}`);\n    },\n    [],\n  );\n\n  const handleCommit = useCallback<\n    CommitHandler<HTMLInputElement, string | number | undefined>\n  >(\n    (e, value) => {\n      const field = queryClosest(e.target, \"[data-field]\");\n      const column = field?.dataset.field;\n      if (column) {\n        if (\n          value === undefined ||\n          (typeof value === \"string\" && value.trim() === \"\")\n        ) {\n          if (filters.current[column] === undefined) {\n            return;\n          }\n          delete filters.current[column];\n        } else if (typeof value === \"string\" && value.trim() !== \"\") {\n          filters.current[column] = value;\n        }\n        onApplyFilter?.(buildFilter(filters.current, availableColumns));\n      }\n    },\n    [availableColumns, onApplyFilter],\n  );\n\n  const handleColumnsSelectionChange = useCallback<MultiSelectionHandler>(\n    (evt, newSelected) => {\n      onChangeQuickFilterColumns?.(newSelected);\n    },\n    [onChangeQuickFilterColumns],\n  );\n\n  const availableColumnNames = useMemo(\n    () => availableColumns.map((col) => col.name),\n    [availableColumns],\n  );\n\n  return {\n    availableColumnNames,\n    onChange: handleChange,\n    onColumnsSelectionChange: handleColumnsSelectionChange,\n    onCommit: handleCommit,\n    rootRef,\n  };\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useQuickFilters.js","sources":["../../src/quick-filters/useQuickFilters.ts"],"sourcesContent":["import type { DataSourceFilter } from \"@vuu-ui/vuu-data-types\";\nimport type { Filter } from \"@vuu-ui/vuu-filter-types\";\nimport type { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { MultiSelectionHandler } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  CommitHandler,\n  NoFilter,\n  filterAsQuery,\n  queryClosest,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n  ChangeEventHandler,\n  RefCallback,\n  useCallback,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { QuickFilterProps } from \"./QuickFilters\";\n\ntype QuickFilterValues = Record<string, VuuRowDataItemType>;\n\nconst createFilterClause = (\n  [identifier, value]: [string, VuuRowDataItemType],\n  availableColumns?: ColumnDescriptor[],\n): Filter => {\n  if (identifier === \"find\") {\n    if (availableColumns) {\n      const targetColumns = availableColumns.filter(\n        ({ serverDataType }) => serverDataType === \"string\",\n      );\n      if (targetColumns.length) {\n        return {\n          op: \"or\",\n          filters: targetColumns.map((column) =>\n            createFilterClause([column.name, value]),\n          ),\n        };\n      } else {\n        throw Error(`value ${value} is not valid for any of availanle columns`);\n      }\n    } else {\n      throw Error(\"columns must be provided for find operation\");\n    }\n  } else {\n    return {\n      column: identifier,\n      op: \"contains\",\n      value,\n    };\n  }\n};\n\nconst buildFilterStruct = (\n  quickFilters: QuickFilterValues,\n  availableColumns: ColumnDescriptor[],\n): Filter | undefined => {\n  const entries = Object.entries(quickFilters);\n  if (entries.length === 1) {\n    return createFilterClause(entries[0], availableColumns);\n  } else if (entries.length > 1) {\n    return {\n      op: \"and\",\n      filters: entries.map(\n        (entry) => createFilterClause(entry, availableColumns),\n        availableColumns,\n      ),\n    };\n  }\n};\n\nconst buildFilter = (\n  quickFilters: QuickFilterValues,\n  availableColumns: ColumnDescriptor[],\n): DataSourceFilter => {\n  const filterStruct = buildFilterStruct(quickFilters, availableColumns);\n  if (filterStruct) {\n    return {\n      filter: filterAsQuery(filterStruct),\n      filterStruct,\n    };\n  } else {\n    return NoFilter;\n  }\n};\n\nexport type QuickFilterHookProps = Pick<\n  QuickFilterProps,\n  | \"availableColumns\"\n  | \"onApplyFilter\"\n  | \"onChangeQuickFilterColumns\"\n  | \"quickFilterColumns\"\n>;\n\nexport const useQuickFilters = ({\n  availableColumns,\n  onApplyFilter,\n  onChangeQuickFilterColumns,\n}: QuickFilterProps) => {\n  const filters = useRef<QuickFilterValues>({});\n  const rootRef = useCallback<RefCallback<HTMLDivElement>>((el) => {\n    if (el) {\n      const firstInput = el.querySelector(\"input\");\n      firstInput?.focus();\n    }\n  }, []);\n\n  const handleChange = useCallback<ChangeEventHandler<HTMLInputElement>>(\n    (e) => {\n      console.log(`onChange ${e.target.value}`);\n    },\n    [],\n  );\n\n  const handleCommit = useCallback<\n    CommitHandler<HTMLElement, string | number | undefined>\n  >(\n    (e, value) => {\n      const field = queryClosest(e.target, \"[data-field]\");\n      const column = field?.dataset.field;\n      if (column) {\n        if (\n          value === undefined ||\n          (typeof value === \"string\" && value.trim() === \"\")\n        ) {\n          if (filters.current[column] === undefined) {\n            return;\n          }\n          delete filters.current[column];\n        } else if (typeof value === \"string\" && value.trim() !== \"\") {\n          filters.current[column] = value;\n        }\n        onApplyFilter?.(buildFilter(filters.current, availableColumns));\n      }\n    },\n    [availableColumns, onApplyFilter],\n  );\n\n  const handleColumnsSelectionChange = useCallback<MultiSelectionHandler>(\n    (evt, newSelected) => {\n      onChangeQuickFilterColumns?.(newSelected);\n    },\n    [onChangeQuickFilterColumns],\n  );\n\n  const availableColumnNames = useMemo(\n    () => availableColumns.map((col) => col.name),\n    [availableColumns],\n  );\n\n  return {\n    availableColumnNames,\n    onChange: handleChange,\n    onColumnsSelectionChange: handleColumnsSelectionChange,\n    onCommit: handleCommit,\n    rootRef,\n  };\n};\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,22 +1,22 @@
 {
-  "version": "0.8.91",
+  "version": "0.8.93",
   "author": "heswell",
   "license": "Apache-2.0",
   "type": "module",
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "0.8.91",
-    "@vuu-ui/vuu-protocol-types": "0.8.91",
-    "@vuu-ui/vuu-table-types": "0.8.91",
-    "@vuu-ui/vuu-filter-types": "0.8.91",
+    "@vuu-ui/vuu-data-types": "0.8.93",
+    "@vuu-ui/vuu-protocol-types": "0.8.93",
+    "@vuu-ui/vuu-table-types": "0.8.93",
+    "@vuu-ui/vuu-filter-types": "0.8.93",
     "@types/uuid": "^9.0.2"
   },
   "dependencies": {
-    "@vuu-ui/vuu-data-react": "0.8.91",
-    "@vuu-ui/vuu-filter-parser": "0.8.91",
-    "@vuu-ui/vuu-popups": "0.8.91",
-    "@vuu-ui/vuu-ui-controls": "0.8.91",
-    "@vuu-ui/vuu-table": "0.8.91",
-    "@vuu-ui/vuu-utils": "0.8.91",
+    "@vuu-ui/vuu-data-react": "0.8.93",
+    "@vuu-ui/vuu-filter-parser": "0.8.93",
+    "@vuu-ui/vuu-popups": "0.8.93",
+    "@vuu-ui/vuu-ui-controls": "0.8.93",
+    "@vuu-ui/vuu-table": "0.8.93",
+    "@vuu-ui/vuu-utils": "0.8.93",
     "@salt-ds/core": "1.34.0",
     "@salt-ds/styles": "0.2.1",
     "@salt-ds/window": "0.1.1",

package/types/quick-filters/useQuickFilters.d.ts

@@ -7,6 +7,6 @@ export declare const useQuickFilters: ({ availableColumns, onApplyFilter, onChan
     availableColumnNames: string[];
     onChange: ChangeEventHandler<HTMLInputElement>;
     onColumnsSelectionChange: MultiSelectionHandler;
-    onCommit: CommitHandler<HTMLInputElement, string | number | undefined>;
+    onCommit: CommitHandler<HTMLElement, string | number | undefined>;
     rootRef: RefCallback<HTMLDivElement>;
 };