@j2-health/design-system 0.2.1 → 0.3.1

package/README.md

@@ -133,8 +133,7 @@ local checkout has its own `node_modules`.
 
 ### Publishing to npm
 
-The package is published publicly (the source is public anyway). Publishing is
-tag-driven via
+The package is published publicly (the source is public anyway) by
 [.github/workflows/publish-workflow.yml](.github/workflows/publish-workflow.yml).
 
 There is **no publish token**. npm authenticates the release through trusted
@@ -149,14 +148,44 @@ consequences worth knowing before you change anything here:
   npm >= 11.5.1, which is exactly what Node 24.5.0 ships. The workflow asserts
   this rather than letting it surface later as an unexplained 401.
 
-To release a new version from `main`:
+To release a new version — maintainers only, since step 2 needs write access to
+this repository:
+
+1. Bump `version` in `package.json` in a pull request — on its own, or in the PR
+   carrying the change you want to release — and merge it.
+2. Dispatch the publish workflow against `main`:
+
+```bash
+$ gh workflow run publish-workflow.yml --ref main
+```
+
+Or, in the UI, **Actions → Publish to npm → Run workflow** with `main` selected.
+Pick the ref carefully: the publish job is *skipped* rather than failed on any
+other ref, so a dispatch from a feature branch reports success without
+publishing.
+
+That is the whole procedure. The workflow publishes the version `package.json`
+declares and then creates the matching `vX.Y.Z` tag itself, so you do not
+normally tag by hand — the `tag` job's own comments cover the one case that
+needs it, where publishing succeeds and tagging fails.
+
+`npm version` is not the tool here, despite being the obvious one: it writes the
+bump as a local commit, and `main` requires a pull request, so that commit has
+nowhere to push to.
+
+Pushing a `v*` tag also triggers a release. Tag the remote `main` commit
+explicitly: a bare `git tag` tags your current `HEAD`, and the workflow accepts
+any tag ref, so a tag on an unmerged branch would publish that branch. Push the
+tag explicitly too — `git push --follow-tags` silently skips lightweight tags and
+would report success without publishing:
 
 ```bash
-$ npm version minor        # or patch / major — bumps package.json and creates the vX.Y.Z tag
-$ git push origin main --follow-tags
+$ git fetch origin main
+$ git tag -a v0.3.0 -m v0.3.0 origin/main
+$ git push origin v0.3.0
 ```
 
-The workflow packs the tarball and builds a scratch consumer against it, then
-verifies the tag matches `package.json`, runs lint, tests and type-check, builds
-the library, and publishes. Provenance is generated automatically by trusted
-publishing, so `--provenance` is not passed.
+The workflow packs the tarball and builds a scratch consumer against it, runs
+lint, tests and type-check, builds the library, and publishes; on a tag push it
+also verifies the tag matches `package.json`. Provenance is generated
+automatically by trusted publishing, so `--provenance` is not passed.

package/dist/index.cjs

@@ -24,6 +24,7 @@ const LegacyNavMenu = require("./src/components/legacyNavMenu/LegacyNavMenu.cjs"
 const ListPopover = require("./src/components/listpopover/ListPopover.cjs");
 const Menu = require("./src/components/menu/Menu.cjs");
 const Modal = require("./src/components/modal/Modal.cjs");
+const useFilterField = require("./src/components/filterform/useFilterField.cjs");
 const NavMenu = require("./src/components/navMenu/NavMenu.cjs");
 const NotificationModal = require("./src/components/notificationModal/NotificationModal.cjs");
 const Pagination = require("./src/components/pagination/Pagination.cjs");
@@ -45,6 +46,7 @@ const UserProfile = require("./src/components/legacyNavMenu/UserProfile.cjs");
 const VennDiagram = require("./src/components/vennDiagram/VennDiagram.cjs");
 const appTheme = require("./src/appTheme.cjs");
 const index = require("./src/components/icons/index.cjs");
+const filterHelpers = require("./src/components/filterform/filterHelpers.cjs");
 const tailwind = require("./tailwind.cjs");
 const useMessage = require("./src/components/message/useMessage.cjs");
 const useNotification = require("./src/components/notification/useNotification.cjs");
@@ -76,6 +78,8 @@ exports.LegacyNavMenu = LegacyNavMenu.LegacyNavMenu;
 exports.ListPopover = ListPopover.ListPopover;
 exports.Menu = Menu.Menu;
 exports.Modal = Modal.Modal;
+exports.MultiValueTextOperatorOptions = useFilterField.MultiValueTextOperatorOptions;
+exports.operatorOptionsFor = useFilterField.operatorOptionsFor;
 exports.NavMenu = NavMenu.NavMenu;
 exports.NotificationModal = NotificationModal.NotificationModal;
 exports.Pagination = Pagination.Pagination;
@@ -99,6 +103,8 @@ exports.UserProfile = UserProfile.UserProfile;
 exports.VennDiagram = VennDiagram.VennDiagram;
 exports.appTheme = appTheme.appTheme;
 exports.icons = index;
+exports.isMultiValueTextOperator = filterHelpers.isMultiValueTextOperator;
+exports.normalizeMultiValues = filterHelpers.normalizeMultiValues;
 exports.tailwindPreset = tailwind.tailwindPreset;
 exports.useMessage = useMessage.useMessage;
 exports.useNotification = useNotification.useNotification;

package/dist/index.cjs.map

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

package/dist/index.js

@@ -22,6 +22,7 @@ import { LegacyNavMenu } from "./src/components/legacyNavMenu/LegacyNavMenu.js";
 import { ListPopover } from "./src/components/listpopover/ListPopover.js";
 import { Menu } from "./src/components/menu/Menu.js";
 import { Modal } from "./src/components/modal/Modal.js";
+import { MultiValueTextOperatorOptions, operatorOptionsFor } from "./src/components/filterform/useFilterField.js";
 import { NavMenu } from "./src/components/navMenu/NavMenu.js";
 import { NotificationModal } from "./src/components/notificationModal/NotificationModal.js";
 import { Pagination, withDesignSystemPaginationOverrides } from "./src/components/pagination/Pagination.js";
@@ -43,6 +44,7 @@ import { UserProfile } from "./src/components/legacyNavMenu/UserProfile.js";
 import { VennDiagram } from "./src/components/vennDiagram/VennDiagram.js";
 import { appTheme } from "./src/appTheme.js";
 import * as index from "./src/components/icons/index.js";
+import { isMultiValueTextOperator, normalizeMultiValues } from "./src/components/filterform/filterHelpers.js";
 import { tailwindPreset } from "./tailwind.js";
 import { useMessage } from "./src/components/message/useMessage.js";
 import { useNotification } from "./src/components/notification/useNotification.js";
@@ -72,6 +74,7 @@ export {
   ListPopover,
   Menu,
   Modal,
+  MultiValueTextOperatorOptions,
   NavMenu,
   NotificationModal,
   Pagination,
@@ -94,6 +97,9 @@ export {
   VennDiagram,
   appTheme,
   index as icons,
+  isMultiValueTextOperator,
+  normalizeMultiValues,
+  operatorOptionsFor,
   tailwindPreset,
   useMessage,
   useNotification,

package/dist/index.js.map

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

package/dist/src/components/barchart/BarChart.cjs

@@ -142,7 +142,14 @@ const BarChart = ({
       }
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(react.Chart, { ref: chartRef, options });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react.Chart,
+    {
+      ref: chartRef,
+      options,
+      containerProps: { className: "highcharts-light" }
+    }
+  );
 };
 exports.BarChart = BarChart;
 //# sourceMappingURL=BarChart.cjs.map

package/dist/src/components/barchart/BarChart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BarChart.cjs","sources":["../../../../src/components/barchart/BarChart.tsx"],"sourcesContent":["import { theme } from 'antd'\nimport type * as Highcharts from 'highcharts'\nimport {\n  Chart as HighchartsReact,\n  type HighchartsReactRefObject,\n} from '@highcharts/react'\nimport '@highcharts/react/options/Accessibility.js'\nimport '@highcharts/react/options/Exporting.js'\nimport styles from './chart.module.css'\nimport { renderToString } from 'react-dom/server'\n\ntype Series = {\n  name?: string\n  data: Highcharts.PointOptionsObject[] | number[]\n  color?: string\n  hoverColor?: string\n}\n\ntype BarChartProps = {\n  categories: string[]\n  series: Series[]\n  min: number\n  max: number | undefined | null\n  tickInterval: number | undefined\n  tickFormat?: (value: number) => string\n  xAxisTitle?: string\n  yAxisTitle?: string\n  gridLineColor?: string\n  gridLineDashStyle?: Highcharts.DashStyleValue\n  xAxisLabelMaxLines?: number\n  tooltip: (\n    category: string | number | undefined,\n    value: number | null | undefined,\n    seriesName: string | undefined\n  ) => React.ReactNode\n  chartRef?: React.RefObject<HighchartsReactRefObject>\n  exporting?: Highcharts.ExportingOptions\n  maxBars?: number\n  barsWidth?: number\n  height?: number\n  width?: number\n}\n\nconst BarChart = ({\n  categories,\n  series,\n  min,\n  max,\n  tickInterval,\n  tickFormat,\n  xAxisTitle,\n  yAxisTitle,\n  gridLineColor,\n  gridLineDashStyle,\n  xAxisLabelMaxLines,\n  tooltip,\n  exporting,\n  chartRef,\n  height,\n  width,\n  maxBars = 50,\n  barsWidth = undefined,\n}: BarChartProps) => {\n  const limitedCategories = categories.slice(0, maxBars)\n  const limitedSeries = series.map((s) => ({\n    ...s,\n    data: s.data.slice(0, maxBars),\n  }))\n\n  const { token } = theme.useToken()\n\n  const baseFont: Highcharts.CSSObject = {\n    fontSize: `${token.fontSize}px`,\n    fontFamily: token.fontFamily,\n    color: token.colorText,\n  }\n\n  const options: Highcharts.Options = {\n    credits: {\n      enabled: false,\n    },\n    chart: {\n      type: 'column',\n      ...(height ? { height } : {}),\n      ...(width ? { width } : {}),\n    },\n    plotOptions: {\n      column: {\n        borderRadius: series[0].data.length > 5 ? '20%' : '15%',\n        ...(barsWidth !== undefined ? { pointWidth: barsWidth } : {}),\n      },\n    },\n    exporting: {\n      ...exporting,\n      enabled: false,\n      chartOptions: {\n        ...exporting?.chartOptions,\n        title: {\n          align: 'left',\n          text: exporting?.chartOptions?.title?.text,\n          style: {\n            fontSize: `${token.fontSize}px`,\n            fontFamily: 'sans-serif',\n            color: token.colorText,\n            ...exporting?.chartOptions?.title?.style,\n          },\n        },\n        series: limitedSeries.map((s) => ({\n          type: 'column',\n          color: s.color ? s.color : '#253761', // --j2-blue-9\n        })),\n        legend: exporting?.chartOptions?.legend || { enabled: false },\n      },\n    },\n    title: {\n      text: '',\n    },\n    xAxis: {\n      categories: limitedCategories,\n      title: xAxisTitle\n        ? {\n            text: xAxisTitle,\n            style: { ...baseFont, color: token.colorTextDescription },\n          }\n        : undefined,\n      labels: {\n        y: 30,\n        style: baseFont,\n        ...(xAxisLabelMaxLines\n          ? {\n              useHTML: true,\n              formatter: function (\n                this: Highcharts.AxisLabelsFormatterContextObject\n              ) {\n                return `<div style=\"overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: ${xAxisLabelMaxLines}; -webkit-box-orient: vertical; text-align: center;\">${this.value}</div>`\n              },\n            }\n          : {}),\n      },\n    },\n    yAxis: {\n      min: min,\n      max: max,\n      endOnTick: true,\n      gridLineDashStyle: gridLineDashStyle || 'Dot',\n      gridLineColor: gridLineColor || 'white',\n      title: yAxisTitle\n        ? {\n            text: yAxisTitle,\n            style: { ...baseFont, color: token.colorTextDescription },\n            x: -10,\n          }\n        : undefined,\n      tickInterval: tickInterval,\n      labels: {\n        formatter: tickFormat\n          ? ({ value }) => tickFormat(value as number)\n          : undefined,\n        style: baseFont,\n      },\n    },\n    legend: {\n      enabled: false,\n    },\n    series: limitedSeries.map((s) => ({\n      data: s.data,\n      name: s.name,\n      type: 'column',\n      color: s.color || 'var(--j2-blue-11)',\n      states: {\n        hover: {\n          color: s.hoverColor || token.colorPrimaryTextHover,\n        },\n      },\n    })),\n    tooltip: {\n      useHTML: true,\n      outside: true,\n      backgroundColor: 'transparent',\n      shadow: false,\n      padding: 0,\n      style: { zIndex: 9999 },\n      formatter: function (this) {\n        return renderToString(\n          <div className={styles.tooltip}>\n            {tooltip(this.key, this.y, this.series.name)}\n          </div>\n        )\n      },\n    },\n  }\n\n  return <HighchartsReact ref={chartRef} options={options} />\n}\n\nexport { BarChart }\n"],"names":["theme","renderToString","jsx","styles","HighchartsReact"],"mappings":"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"}
+{"version":3,"file":"BarChart.cjs","sources":["../../../../src/components/barchart/BarChart.tsx"],"sourcesContent":["import { theme } from 'antd'\nimport type * as Highcharts from 'highcharts'\nimport {\n  Chart as HighchartsReact,\n  type HighchartsReactRefObject,\n} from '@highcharts/react'\nimport '@highcharts/react/options/Accessibility.js'\nimport '@highcharts/react/options/Exporting.js'\nimport styles from './chart.module.css'\nimport { renderToString } from 'react-dom/server'\n\ntype Series = {\n  name?: string\n  data: Highcharts.PointOptionsObject[] | number[]\n  color?: string\n  hoverColor?: string\n}\n\ntype BarChartProps = {\n  categories: string[]\n  series: Series[]\n  min: number\n  max: number | undefined | null\n  tickInterval: number | undefined\n  tickFormat?: (value: number) => string\n  xAxisTitle?: string\n  yAxisTitle?: string\n  gridLineColor?: string\n  gridLineDashStyle?: Highcharts.DashStyleValue\n  xAxisLabelMaxLines?: number\n  tooltip: (\n    category: string | number | undefined,\n    value: number | null | undefined,\n    seriesName: string | undefined\n  ) => React.ReactNode\n  chartRef?: React.RefObject<HighchartsReactRefObject>\n  exporting?: Highcharts.ExportingOptions\n  maxBars?: number\n  barsWidth?: number\n  height?: number\n  width?: number\n}\n\nconst BarChart = ({\n  categories,\n  series,\n  min,\n  max,\n  tickInterval,\n  tickFormat,\n  xAxisTitle,\n  yAxisTitle,\n  gridLineColor,\n  gridLineDashStyle,\n  xAxisLabelMaxLines,\n  tooltip,\n  exporting,\n  chartRef,\n  height,\n  width,\n  maxBars = 50,\n  barsWidth = undefined,\n}: BarChartProps) => {\n  const limitedCategories = categories.slice(0, maxBars)\n  const limitedSeries = series.map((s) => ({\n    ...s,\n    data: s.data.slice(0, maxBars),\n  }))\n\n  const { token } = theme.useToken()\n\n  const baseFont: Highcharts.CSSObject = {\n    fontSize: `${token.fontSize}px`,\n    fontFamily: token.fontFamily,\n    color: token.colorText,\n  }\n\n  const options: Highcharts.Options = {\n    credits: {\n      enabled: false,\n    },\n    chart: {\n      type: 'column',\n      ...(height ? { height } : {}),\n      ...(width ? { width } : {}),\n    },\n    plotOptions: {\n      column: {\n        borderRadius: series[0].data.length > 5 ? '20%' : '15%',\n        ...(barsWidth !== undefined ? { pointWidth: barsWidth } : {}),\n      },\n    },\n    exporting: {\n      ...exporting,\n      enabled: false,\n      chartOptions: {\n        ...exporting?.chartOptions,\n        title: {\n          align: 'left',\n          text: exporting?.chartOptions?.title?.text,\n          style: {\n            fontSize: `${token.fontSize}px`,\n            fontFamily: 'sans-serif',\n            color: token.colorText,\n            ...exporting?.chartOptions?.title?.style,\n          },\n        },\n        series: limitedSeries.map((s) => ({\n          type: 'column',\n          color: s.color ? s.color : '#253761', // --j2-blue-9\n        })),\n        legend: exporting?.chartOptions?.legend || { enabled: false },\n      },\n    },\n    title: {\n      text: '',\n    },\n    xAxis: {\n      categories: limitedCategories,\n      title: xAxisTitle\n        ? {\n            text: xAxisTitle,\n            style: { ...baseFont, color: token.colorTextDescription },\n          }\n        : undefined,\n      labels: {\n        y: 30,\n        style: baseFont,\n        ...(xAxisLabelMaxLines\n          ? {\n              useHTML: true,\n              formatter: function (\n                this: Highcharts.AxisLabelsFormatterContextObject\n              ) {\n                return `<div style=\"overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: ${xAxisLabelMaxLines}; -webkit-box-orient: vertical; text-align: center;\">${this.value}</div>`\n              },\n            }\n          : {}),\n      },\n    },\n    yAxis: {\n      min: min,\n      max: max,\n      endOnTick: true,\n      gridLineDashStyle: gridLineDashStyle || 'Dot',\n      gridLineColor: gridLineColor || 'white',\n      title: yAxisTitle\n        ? {\n            text: yAxisTitle,\n            style: { ...baseFont, color: token.colorTextDescription },\n            x: -10,\n          }\n        : undefined,\n      tickInterval: tickInterval,\n      labels: {\n        formatter: tickFormat\n          ? ({ value }) => tickFormat(value as number)\n          : undefined,\n        style: baseFont,\n      },\n    },\n    legend: {\n      enabled: false,\n    },\n    series: limitedSeries.map((s) => ({\n      data: s.data,\n      name: s.name,\n      type: 'column',\n      color: s.color || 'var(--j2-blue-11)',\n      states: {\n        hover: {\n          color: s.hoverColor || token.colorPrimaryTextHover,\n        },\n      },\n    })),\n    tooltip: {\n      useHTML: true,\n      outside: true,\n      backgroundColor: 'transparent',\n      shadow: false,\n      padding: 0,\n      style: { zIndex: 9999 },\n      formatter: function (this) {\n        return renderToString(\n          <div className={styles.tooltip}>\n            {tooltip(this.key, this.y, this.series.name)}\n          </div>\n        )\n      },\n    },\n  }\n\n  return (\n    <HighchartsReact\n      ref={chartRef}\n      options={options}\n      containerProps={{ className: 'highcharts-light' }}\n    />\n  )\n}\n\nexport { BarChart }\n"],"names":["theme","renderToString","jsx","styles","HighchartsReact"],"mappings":"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"}

package/dist/src/components/barchart/BarChart.js

@@ -140,7 +140,14 @@ const BarChart = ({
       }
     }
   };
-  return /* @__PURE__ */ jsx(Chart, { ref: chartRef, options });
+  return /* @__PURE__ */ jsx(
+    Chart,
+    {
+      ref: chartRef,
+      options,
+      containerProps: { className: "highcharts-light" }
+    }
+  );
 };
 export {
   BarChart

package/dist/src/components/barchart/BarChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"BarChart.js","sources":["../../../../src/components/barchart/BarChart.tsx"],"sourcesContent":["import { theme } from 'antd'\nimport type * as Highcharts from 'highcharts'\nimport {\n  Chart as HighchartsReact,\n  type HighchartsReactRefObject,\n} from '@highcharts/react'\nimport '@highcharts/react/options/Accessibility.js'\nimport '@highcharts/react/options/Exporting.js'\nimport styles from './chart.module.css'\nimport { renderToString } from 'react-dom/server'\n\ntype Series = {\n  name?: string\n  data: Highcharts.PointOptionsObject[] | number[]\n  color?: string\n  hoverColor?: string\n}\n\ntype BarChartProps = {\n  categories: string[]\n  series: Series[]\n  min: number\n  max: number | undefined | null\n  tickInterval: number | undefined\n  tickFormat?: (value: number) => string\n  xAxisTitle?: string\n  yAxisTitle?: string\n  gridLineColor?: string\n  gridLineDashStyle?: Highcharts.DashStyleValue\n  xAxisLabelMaxLines?: number\n  tooltip: (\n    category: string | number | undefined,\n    value: number | null | undefined,\n    seriesName: string | undefined\n  ) => React.ReactNode\n  chartRef?: React.RefObject<HighchartsReactRefObject>\n  exporting?: Highcharts.ExportingOptions\n  maxBars?: number\n  barsWidth?: number\n  height?: number\n  width?: number\n}\n\nconst BarChart = ({\n  categories,\n  series,\n  min,\n  max,\n  tickInterval,\n  tickFormat,\n  xAxisTitle,\n  yAxisTitle,\n  gridLineColor,\n  gridLineDashStyle,\n  xAxisLabelMaxLines,\n  tooltip,\n  exporting,\n  chartRef,\n  height,\n  width,\n  maxBars = 50,\n  barsWidth = undefined,\n}: BarChartProps) => {\n  const limitedCategories = categories.slice(0, maxBars)\n  const limitedSeries = series.map((s) => ({\n    ...s,\n    data: s.data.slice(0, maxBars),\n  }))\n\n  const { token } = theme.useToken()\n\n  const baseFont: Highcharts.CSSObject = {\n    fontSize: `${token.fontSize}px`,\n    fontFamily: token.fontFamily,\n    color: token.colorText,\n  }\n\n  const options: Highcharts.Options = {\n    credits: {\n      enabled: false,\n    },\n    chart: {\n      type: 'column',\n      ...(height ? { height } : {}),\n      ...(width ? { width } : {}),\n    },\n    plotOptions: {\n      column: {\n        borderRadius: series[0].data.length > 5 ? '20%' : '15%',\n        ...(barsWidth !== undefined ? { pointWidth: barsWidth } : {}),\n      },\n    },\n    exporting: {\n      ...exporting,\n      enabled: false,\n      chartOptions: {\n        ...exporting?.chartOptions,\n        title: {\n          align: 'left',\n          text: exporting?.chartOptions?.title?.text,\n          style: {\n            fontSize: `${token.fontSize}px`,\n            fontFamily: 'sans-serif',\n            color: token.colorText,\n            ...exporting?.chartOptions?.title?.style,\n          },\n        },\n        series: limitedSeries.map((s) => ({\n          type: 'column',\n          color: s.color ? s.color : '#253761', // --j2-blue-9\n        })),\n        legend: exporting?.chartOptions?.legend || { enabled: false },\n      },\n    },\n    title: {\n      text: '',\n    },\n    xAxis: {\n      categories: limitedCategories,\n      title: xAxisTitle\n        ? {\n            text: xAxisTitle,\n            style: { ...baseFont, color: token.colorTextDescription },\n          }\n        : undefined,\n      labels: {\n        y: 30,\n        style: baseFont,\n        ...(xAxisLabelMaxLines\n          ? {\n              useHTML: true,\n              formatter: function (\n                this: Highcharts.AxisLabelsFormatterContextObject\n              ) {\n                return `<div style=\"overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: ${xAxisLabelMaxLines}; -webkit-box-orient: vertical; text-align: center;\">${this.value}</div>`\n              },\n            }\n          : {}),\n      },\n    },\n    yAxis: {\n      min: min,\n      max: max,\n      endOnTick: true,\n      gridLineDashStyle: gridLineDashStyle || 'Dot',\n      gridLineColor: gridLineColor || 'white',\n      title: yAxisTitle\n        ? {\n            text: yAxisTitle,\n            style: { ...baseFont, color: token.colorTextDescription },\n            x: -10,\n          }\n        : undefined,\n      tickInterval: tickInterval,\n      labels: {\n        formatter: tickFormat\n          ? ({ value }) => tickFormat(value as number)\n          : undefined,\n        style: baseFont,\n      },\n    },\n    legend: {\n      enabled: false,\n    },\n    series: limitedSeries.map((s) => ({\n      data: s.data,\n      name: s.name,\n      type: 'column',\n      color: s.color || 'var(--j2-blue-11)',\n      states: {\n        hover: {\n          color: s.hoverColor || token.colorPrimaryTextHover,\n        },\n      },\n    })),\n    tooltip: {\n      useHTML: true,\n      outside: true,\n      backgroundColor: 'transparent',\n      shadow: false,\n      padding: 0,\n      style: { zIndex: 9999 },\n      formatter: function (this) {\n        return renderToString(\n          <div className={styles.tooltip}>\n            {tooltip(this.key, this.y, this.series.name)}\n          </div>\n        )\n      },\n    },\n  }\n\n  return <HighchartsReact ref={chartRef} options={options} />\n}\n\nexport { BarChart }\n"],"names":["HighchartsReact"],"mappings":"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"}
+{"version":3,"file":"BarChart.js","sources":["../../../../src/components/barchart/BarChart.tsx"],"sourcesContent":["import { theme } from 'antd'\nimport type * as Highcharts from 'highcharts'\nimport {\n  Chart as HighchartsReact,\n  type HighchartsReactRefObject,\n} from '@highcharts/react'\nimport '@highcharts/react/options/Accessibility.js'\nimport '@highcharts/react/options/Exporting.js'\nimport styles from './chart.module.css'\nimport { renderToString } from 'react-dom/server'\n\ntype Series = {\n  name?: string\n  data: Highcharts.PointOptionsObject[] | number[]\n  color?: string\n  hoverColor?: string\n}\n\ntype BarChartProps = {\n  categories: string[]\n  series: Series[]\n  min: number\n  max: number | undefined | null\n  tickInterval: number | undefined\n  tickFormat?: (value: number) => string\n  xAxisTitle?: string\n  yAxisTitle?: string\n  gridLineColor?: string\n  gridLineDashStyle?: Highcharts.DashStyleValue\n  xAxisLabelMaxLines?: number\n  tooltip: (\n    category: string | number | undefined,\n    value: number | null | undefined,\n    seriesName: string | undefined\n  ) => React.ReactNode\n  chartRef?: React.RefObject<HighchartsReactRefObject>\n  exporting?: Highcharts.ExportingOptions\n  maxBars?: number\n  barsWidth?: number\n  height?: number\n  width?: number\n}\n\nconst BarChart = ({\n  categories,\n  series,\n  min,\n  max,\n  tickInterval,\n  tickFormat,\n  xAxisTitle,\n  yAxisTitle,\n  gridLineColor,\n  gridLineDashStyle,\n  xAxisLabelMaxLines,\n  tooltip,\n  exporting,\n  chartRef,\n  height,\n  width,\n  maxBars = 50,\n  barsWidth = undefined,\n}: BarChartProps) => {\n  const limitedCategories = categories.slice(0, maxBars)\n  const limitedSeries = series.map((s) => ({\n    ...s,\n    data: s.data.slice(0, maxBars),\n  }))\n\n  const { token } = theme.useToken()\n\n  const baseFont: Highcharts.CSSObject = {\n    fontSize: `${token.fontSize}px`,\n    fontFamily: token.fontFamily,\n    color: token.colorText,\n  }\n\n  const options: Highcharts.Options = {\n    credits: {\n      enabled: false,\n    },\n    chart: {\n      type: 'column',\n      ...(height ? { height } : {}),\n      ...(width ? { width } : {}),\n    },\n    plotOptions: {\n      column: {\n        borderRadius: series[0].data.length > 5 ? '20%' : '15%',\n        ...(barsWidth !== undefined ? { pointWidth: barsWidth } : {}),\n      },\n    },\n    exporting: {\n      ...exporting,\n      enabled: false,\n      chartOptions: {\n        ...exporting?.chartOptions,\n        title: {\n          align: 'left',\n          text: exporting?.chartOptions?.title?.text,\n          style: {\n            fontSize: `${token.fontSize}px`,\n            fontFamily: 'sans-serif',\n            color: token.colorText,\n            ...exporting?.chartOptions?.title?.style,\n          },\n        },\n        series: limitedSeries.map((s) => ({\n          type: 'column',\n          color: s.color ? s.color : '#253761', // --j2-blue-9\n        })),\n        legend: exporting?.chartOptions?.legend || { enabled: false },\n      },\n    },\n    title: {\n      text: '',\n    },\n    xAxis: {\n      categories: limitedCategories,\n      title: xAxisTitle\n        ? {\n            text: xAxisTitle,\n            style: { ...baseFont, color: token.colorTextDescription },\n          }\n        : undefined,\n      labels: {\n        y: 30,\n        style: baseFont,\n        ...(xAxisLabelMaxLines\n          ? {\n              useHTML: true,\n              formatter: function (\n                this: Highcharts.AxisLabelsFormatterContextObject\n              ) {\n                return `<div style=\"overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: ${xAxisLabelMaxLines}; -webkit-box-orient: vertical; text-align: center;\">${this.value}</div>`\n              },\n            }\n          : {}),\n      },\n    },\n    yAxis: {\n      min: min,\n      max: max,\n      endOnTick: true,\n      gridLineDashStyle: gridLineDashStyle || 'Dot',\n      gridLineColor: gridLineColor || 'white',\n      title: yAxisTitle\n        ? {\n            text: yAxisTitle,\n            style: { ...baseFont, color: token.colorTextDescription },\n            x: -10,\n          }\n        : undefined,\n      tickInterval: tickInterval,\n      labels: {\n        formatter: tickFormat\n          ? ({ value }) => tickFormat(value as number)\n          : undefined,\n        style: baseFont,\n      },\n    },\n    legend: {\n      enabled: false,\n    },\n    series: limitedSeries.map((s) => ({\n      data: s.data,\n      name: s.name,\n      type: 'column',\n      color: s.color || 'var(--j2-blue-11)',\n      states: {\n        hover: {\n          color: s.hoverColor || token.colorPrimaryTextHover,\n        },\n      },\n    })),\n    tooltip: {\n      useHTML: true,\n      outside: true,\n      backgroundColor: 'transparent',\n      shadow: false,\n      padding: 0,\n      style: { zIndex: 9999 },\n      formatter: function (this) {\n        return renderToString(\n          <div className={styles.tooltip}>\n            {tooltip(this.key, this.y, this.series.name)}\n          </div>\n        )\n      },\n    },\n  }\n\n  return (\n    <HighchartsReact\n      ref={chartRef}\n      options={options}\n      containerProps={{ className: 'highcharts-light' }}\n    />\n  )\n}\n\nexport { BarChart }\n"],"names":["HighchartsReact"],"mappings":"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"}

package/dist/src/components/filterform/FilterInput.cjs

@@ -4,6 +4,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const useFilterField = require("./useFilterField.cjs");
 const antd = require("antd");
+const filterHelpers = require("./filterHelpers.cjs");
 const cx = require("classnames");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -46,10 +47,13 @@ const FilterInput = ({
     value: config.field,
     disabled: config.disabled
   }));
+  const latestFilterRef = React__namespace.useRef(filter);
+  latestFilterRef.current = filter;
   const handleBlur = () => {
-    if (filter) {
-      onBlur == null ? void 0 : onBlur(filter);
-    }
+    setTimeout(() => {
+      const latest = latestFilterRef.current;
+      if (latest) onBlur == null ? void 0 : onBlur(latest);
+    }, 0);
   };
   const isInitialMount = React__namespace.useRef(true);
   const prevFilterRef = React__namespace.useRef(filter);
@@ -57,6 +61,9 @@ const FilterInput = ({
     if (isInitialMount.current) {
       isInitialMount.current = false;
       prevFilterRef.current = filter;
+      if (value && filter && wasCorrectedOnInit(value, filter)) {
+        onChange == null ? void 0 : onChange(filter);
+      }
       return;
     }
     if (filter && filter !== prevFilterRef.current) {
@@ -101,6 +108,8 @@ const FilterInput = ({
     ] })
   ] });
 };
+const sameList = (a, b) => a.length === b.length && a.every((item, i) => item === b[i]);
+const wasCorrectedOnInit = (persisted, current) => persisted.operator !== current.operator || !sameList(persisted.values, current.values) || persisted.errors === void 0 || !sameList(persisted.errors, current.errors ?? []);
 const ValueInput = ({
   valueInputConfig,
   values,
@@ -157,6 +166,18 @@ const ValueInput = ({
         ] }, `number-input-${index}`)
       ) });
     case "text":
+      if (valueInputConfig.multiValue) {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          MultiValueTextInput,
+          {
+            values,
+            maxValues: valueInputConfig.maxValues,
+            onChange,
+            onBlur,
+            size
+          }
+        );
+      }
       return /* @__PURE__ */ jsxRuntime.jsx(
         antd.Input,
         {
@@ -171,5 +192,47 @@ const ValueInput = ({
       return null;
   }
 };
+const MULTI_VALUE_TOKEN_SEPARATORS = [",", "\n", "\r", "	"];
+const MultiValueTextInput = ({
+  values,
+  maxValues,
+  onChange,
+  onBlur,
+  size
+}) => {
+  const chips = (values ?? []).flatMap(
+    (value) => value === null || value === void 0 ? [] : [String(value)]
+  );
+  const over = maxValues !== void 0 && chips.length > maxValues;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 w-full min-w-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      antd.Select,
+      {
+        mode: "tags",
+        tokenSeparators: MULTI_VALUE_TOKEN_SEPARATORS,
+        value: chips,
+        onChange: (next) => onChange(filterHelpers.normalizeMultiValues(next)),
+        onBlur,
+        open: false,
+        suffixIcon: null,
+        placeholder: "Type or paste values, separated by commas",
+        className: "w-full",
+        size,
+        status: over ? "error" : void 0,
+        "aria-label": "Values"
+      }
+    ),
+    maxValues !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+      antd.Typography.Text,
+      {
+        type: over ? "danger" : "secondary",
+        className: "text-xs",
+        role: over ? "alert" : void 0,
+        children: over ? `${filterHelpers.tooManyValuesMessage(maxValues)} — remove ${chips.length - maxValues} to apply` : `${chips.length} / ${maxValues} values`
+      }
+    )
+  ] });
+};
 exports.FilterInput = FilterInput;
+exports.MULTI_VALUE_TOKEN_SEPARATORS = MULTI_VALUE_TOKEN_SEPARATORS;
 //# sourceMappingURL=FilterInput.cjs.map

package/dist/src/components/filterform/FilterInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FilterInput.cjs","sources":["../../../../src/components/filterform/FilterInput.tsx"],"sourcesContent":["import * as React from 'react'\nimport { FilterConfig } from '.'\nimport { useFilterField } from './useFilterField'\nimport { Input, InputNumber, Select } from 'antd'\nimport { FormFilter } from './types'\nimport cx from 'classnames'\nimport { SizeType } from 'antd/es/config-provider/SizeContext'\n\ntype SelectValueInputConfig = {\n  type: 'select'\n  valueOptions: { label: string; value: string }[]\n}\n\ntype NumberValueInputConfig = {\n  type: 'number'\n  inputCount: number\n  numberOptions?: { max: number; min: number; step: number }\n}\n\ntype TextValueInputConfig = {\n  type: 'text'\n}\n\ntype ValueInputConfig =\n  SelectValueInputConfig | NumberValueInputConfig | TextValueInputConfig\n\ntype FilterInputProps = {\n  value?: FormFilter\n  filterConfigs: FilterConfig[]\n  onChange?: (value: FormFilter) => void\n  onBlur?: (value: FormFilter) => void\n  className?: string\n  size?: SizeType\n}\n\nexport const FilterInput = ({\n  value,\n  filterConfigs,\n  onChange,\n  onBlur,\n  className,\n  size = 'middle',\n}: FilterInputProps) => {\n  const {\n    filter,\n    operatorOptions,\n    valueInputConfig,\n    handleFieldChange,\n    handleOperatorChange,\n    handleValuesChange,\n  } = useFilterField({\n    filterConfigs,\n    filter: value,\n  })\n\n  const fieldOptions = filterConfigs.map((config) => ({\n    label: config.label,\n    value: config.field,\n    disabled: config.disabled,\n  }))\n\n  const handleBlur = () => {\n    if (filter) {\n      onBlur?.(filter)\n    }\n  }\n\n  // Track if this is a user-driven change (not initialization)\n  const isInitialMount = React.useRef(true)\n  const prevFilterRef = React.useRef(filter)\n\n  React.useEffect(() => {\n    // Skip the initial mount to avoid calling onChange during initialization\n    if (isInitialMount.current) {\n      isInitialMount.current = false\n      prevFilterRef.current = filter\n      return\n    }\n\n    // Only call onChange if the filter actually changed\n    if (filter && filter !== prevFilterRef.current) {\n      prevFilterRef.current = filter\n      onChange?.(filter)\n    }\n  }, [filter, onChange])\n\n  return (\n    <div className={cx('grid grid-cols-3 gap-2', className)}>\n      <Select\n        options={fieldOptions}\n        value={filter?.field}\n        showSearch\n        optionFilterProp=\"label\"\n        onChange={handleFieldChange}\n        size={size}\n      />\n      <div className=\"col-span-2 flex gap-2\">\n        <Select\n          options={operatorOptions}\n          value={filter?.operator}\n          onChange={handleOperatorChange}\n          onBlur={handleBlur}\n          size={size}\n          popupMatchSelectWidth={false}\n        />\n        {valueInputConfig && (\n          <ValueInput\n            valueInputConfig={valueInputConfig}\n            values={filter?.values}\n            onChange={handleValuesChange}\n            onBlur={handleBlur}\n            size={size}\n          />\n        )}\n      </div>\n    </div>\n  )\n}\n\ntype ValueInputProps = {\n  valueInputConfig: ValueInputConfig\n  values?: (string | number | undefined | null)[]\n  onChange: (value: (string | number | undefined | null)[]) => void\n  onBlur: () => void\n  size: SizeType\n}\n\nconst ValueInput = ({\n  valueInputConfig,\n  values,\n  onChange,\n  onBlur,\n  size,\n}: ValueInputProps) => {\n  const handleChange = (value: string | number | null) => {\n    if (value === null) {\n      onChange([])\n    } else {\n      onChange([value])\n    }\n  }\n\n  const handleNumberChange = (value: string | number | null, index: number) => {\n    const newValues: (string | number | undefined | null)[] = [\n      ...(values ?? []),\n    ]\n    newValues[index] = value\n    onChange(newValues)\n  }\n\n  switch (valueInputConfig.type) {\n    case 'select':\n      return (\n        <Select\n          options={valueInputConfig.valueOptions}\n          onChange={onChange}\n          showSearch\n          allowClear\n          mode=\"multiple\"\n          onBlur={onBlur}\n          value={values}\n          className=\"w-full truncate\"\n          size={size}\n          optionFilterProp=\"label\"\n        />\n      )\n    case 'number':\n      return (\n        <div className=\"flex gap-2 grow\">\n          {Array.from({ length: valueInputConfig.inputCount }).map(\n            (_, index) => (\n              <React.Fragment key={`number-input-${index}`}>\n                {index !== 0 && <span className=\"my-auto\">and</span>}\n                <InputNumber\n                  onChange={(value) => handleNumberChange(value, index)}\n                  onBlur={onBlur}\n                  value={values?.[index]}\n                  className=\"basis-1/2\"\n                  size={size}\n                  {...(valueInputConfig.numberOptions ?? {})}\n                />\n              </React.Fragment>\n            )\n          )}\n        </div>\n      )\n    case 'text':\n      return (\n        <Input\n          onBlur={onBlur}\n          value={values?.[0] ?? undefined}\n          onChange={(e) => handleChange(e.target.value)}\n          className=\"w-full\"\n          size={size}\n        />\n      )\n    default:\n      return null\n  }\n}\n"],"names":["useFilterField","React","jsx","Select","jsxs","InputNumber","Input"],"mappings":"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"}
+{"version":3,"file":"FilterInput.cjs","sources":["../../../../src/components/filterform/FilterInput.tsx"],"sourcesContent":["import * as React from 'react'\nimport { FilterConfig } from '.'\nimport { useFilterField, ValueInputConfig } from './useFilterField'\nimport { Input, InputNumber, Select, Typography } from 'antd'\nimport { FormFilter } from './types'\nimport { normalizeMultiValues, tooManyValuesMessage } from './filterHelpers'\nimport cx from 'classnames'\nimport { SizeType } from 'antd/es/config-provider/SizeContext'\n\ntype FilterInputProps = {\n  value?: FormFilter\n  filterConfigs: FilterConfig[]\n  onChange?: (value: FormFilter) => void\n  onBlur?: (value: FormFilter) => void\n  className?: string\n  size?: SizeType\n}\n\nexport const FilterInput = ({\n  value,\n  filterConfigs,\n  onChange,\n  onBlur,\n  className,\n  size = 'middle',\n}: FilterInputProps) => {\n  const {\n    filter,\n    operatorOptions,\n    valueInputConfig,\n    handleFieldChange,\n    handleOperatorChange,\n    handleValuesChange,\n  } = useFilterField({\n    filterConfigs,\n    filter: value,\n  })\n\n  const fieldOptions = filterConfigs.map((config) => ({\n    label: config.label,\n    value: config.field,\n    disabled: config.disabled,\n  }))\n\n  // Mirror of the reducer's filter for callbacks that run after a render.\n  const latestFilterRef = React.useRef(filter)\n  latestFilterRef.current = filter\n\n  // Deferred a tick, and read from the ref rather than the closure. A tags\n  // `Select` commits unseparated search text as a chip inside its own blur\n  // handling, so `onChange` and `onBlur` arrive in the same browser event and\n  // React flushes the resulting reducer update only after both return. A\n  // synchronous `onBlur` would hand the parent the filter from *before* that\n  // last chip — and for a new rule the parent finalizes and unmounts this\n  // input, silently dropping the value. After the flush the ref holds it.\n  const handleBlur = () => {\n    setTimeout(() => {\n      const latest = latestFilterRef.current\n      if (latest) onBlur?.(latest)\n    }, 0)\n  }\n\n  // Track if this is a user-driven change (not initialization)\n  const isInitialMount = React.useRef(true)\n  const prevFilterRef = React.useRef(filter)\n\n  React.useEffect(() => {\n    // Skip the initial mount to avoid calling onChange during initialization\n    // — unless initialization itself corrected the persisted filter (an\n    // operator the field no longer offers, or a chip list that needed\n    // normalizing). Then the parent must learn about it, or it would keep\n    // and submit the stale filter until the user happened to touch the rule.\n    if (isInitialMount.current) {\n      isInitialMount.current = false\n      prevFilterRef.current = filter\n      if (value && filter && wasCorrectedOnInit(value, filter)) {\n        onChange?.(filter)\n      }\n      return\n    }\n\n    // Only call onChange if the filter actually changed\n    if (filter && filter !== prevFilterRef.current) {\n      prevFilterRef.current = filter\n      onChange?.(filter)\n    }\n  }, [filter, onChange])\n\n  return (\n    <div className={cx('grid grid-cols-3 gap-2', className)}>\n      <Select\n        options={fieldOptions}\n        value={filter?.field}\n        showSearch\n        optionFilterProp=\"label\"\n        onChange={handleFieldChange}\n        size={size}\n      />\n      <div className=\"col-span-2 flex gap-2\">\n        <Select\n          options={operatorOptions}\n          value={filter?.operator}\n          onChange={handleOperatorChange}\n          onBlur={handleBlur}\n          size={size}\n          popupMatchSelectWidth={false}\n        />\n        {valueInputConfig && (\n          <ValueInput\n            valueInputConfig={valueInputConfig}\n            values={filter?.values}\n            onChange={handleValuesChange}\n            onBlur={handleBlur}\n            size={size}\n          />\n        )}\n      </div>\n    </div>\n  )\n}\n\nconst sameList = (a: readonly unknown[], b: readonly unknown[]) =>\n  a.length === b.length && a.every((item, i) => item === b[i])\n\n// Whether initializing from a persisted filter changed anything the parent\n// holds — operator, values, or the validation result. `errors` counts: a\n// persisted rule can be unchanged yet newly invalid (a lowered `maxValues`),\n// or arrive with no `errors` at all (a plain `FilterForm` from storage), and\n// the form's validity is computed from the errors it holds, not from ours.\nconst wasCorrectedOnInit = (persisted: FormFilter, current: FormFilter) =>\n  persisted.operator !== current.operator ||\n  !sameList(persisted.values, current.values) ||\n  persisted.errors === undefined ||\n  !sameList(persisted.errors, current.errors ?? [])\n\ntype ValueInputProps = {\n  valueInputConfig: ValueInputConfig\n  values?: (string | number | undefined | null)[]\n  onChange: (value: (string | number | undefined | null)[]) => void\n  onBlur: () => void\n  size: SizeType\n}\n\nconst ValueInput = ({\n  valueInputConfig,\n  values,\n  onChange,\n  onBlur,\n  size,\n}: ValueInputProps) => {\n  const handleChange = (value: string | number | null) => {\n    if (value === null) {\n      onChange([])\n    } else {\n      onChange([value])\n    }\n  }\n\n  const handleNumberChange = (value: string | number | null, index: number) => {\n    const newValues: (string | number | undefined | null)[] = [\n      ...(values ?? []),\n    ]\n    newValues[index] = value\n    onChange(newValues)\n  }\n\n  switch (valueInputConfig.type) {\n    case 'select':\n      return (\n        <Select\n          options={valueInputConfig.valueOptions}\n          onChange={onChange}\n          showSearch\n          allowClear\n          mode=\"multiple\"\n          onBlur={onBlur}\n          value={values}\n          className=\"w-full truncate\"\n          size={size}\n          optionFilterProp=\"label\"\n        />\n      )\n    case 'number':\n      return (\n        <div className=\"flex gap-2 grow\">\n          {Array.from({ length: valueInputConfig.inputCount }).map(\n            (_, index) => (\n              <React.Fragment key={`number-input-${index}`}>\n                {index !== 0 && <span className=\"my-auto\">and</span>}\n                <InputNumber\n                  onChange={(value) => handleNumberChange(value, index)}\n                  onBlur={onBlur}\n                  value={values?.[index]}\n                  className=\"basis-1/2\"\n                  size={size}\n                  {...(valueInputConfig.numberOptions ?? {})}\n                />\n              </React.Fragment>\n            )\n          )}\n        </div>\n      )\n    case 'text':\n      if (valueInputConfig.multiValue) {\n        return (\n          <MultiValueTextInput\n            values={values}\n            maxValues={valueInputConfig.maxValues}\n            onChange={onChange}\n            onBlur={onBlur}\n            size={size}\n          />\n        )\n      }\n      return (\n        <Input\n          onBlur={onBlur}\n          value={values?.[0] ?? undefined}\n          onChange={(e) => handleChange(e.target.value)}\n          className=\"w-full\"\n          size={size}\n        />\n      )\n    default:\n      return null\n  }\n}\n\n// Commas, newlines (both flavours) and tabs: a column pasted from Excel or a\n// comma-separated list from an email both land as one chip per value.\nexport const MULTI_VALUE_TOKEN_SEPARATORS = [',', '\\n', '\\r', '\\t']\n\n/**\n * Chips input for the multi-value text operators (`isAnyOf` / `isNoneOf`).\n *\n * A tags Select rather than a text box split at query time: every token is\n * visible and individually removable before Apply, so a pasted value that\n * itself contains a comma (street addresses do) can be seen and fixed\n * instead of being silently shredded. The dropdown is kept closed — there\n * are no options to pick from; Enter or a separator commits a chip.\n */\nconst MultiValueTextInput = ({\n  values,\n  maxValues,\n  onChange,\n  onBlur,\n  size,\n}: {\n  values?: (string | number | undefined | null)[]\n  maxValues?: number\n  onChange: (value: (string | number | undefined | null)[]) => void\n  onBlur: () => void\n  size: SizeType\n}) => {\n  // Rendered as stored: `useFilterField` normalizes values on the way into\n  // state, so what the chips show is exactly what validation counts and\n  // what `onSubmit` emits. (Numbers/nulls can't occur for a text filter;\n  // the map is only for the shared `values` type.)\n  const chips = (values ?? []).flatMap((value) =>\n    value === null || value === undefined ? [] : [String(value)]\n  )\n  const over = maxValues !== undefined && chips.length > maxValues\n\n  return (\n    <div className=\"flex flex-col gap-1 w-full min-w-0\">\n      <Select\n        mode=\"tags\"\n        tokenSeparators={MULTI_VALUE_TOKEN_SEPARATORS}\n        value={chips}\n        onChange={(next: string[]) => onChange(normalizeMultiValues(next))}\n        onBlur={onBlur}\n        open={false}\n        suffixIcon={null}\n        placeholder=\"Type or paste values, separated by commas\"\n        className=\"w-full\"\n        size={size}\n        status={over ? 'error' : undefined}\n        aria-label=\"Values\"\n      />\n      {maxValues !== undefined && (\n        <Typography.Text\n          type={over ? 'danger' : 'secondary'}\n          className=\"text-xs\"\n          role={over ? 'alert' : undefined}\n        >\n          {over\n            ? `${tooManyValuesMessage(maxValues)} — remove ${\n                chips.length - maxValues\n              } to apply`\n            : `${chips.length} / ${maxValues} values`}\n        </Typography.Text>\n      )}\n    </div>\n  )\n}\n"],"names":["useFilterField","React","jsx","Select","jsxs","InputNumber","Input","normalizeMultiValues","Typography","tooManyValuesMessage"],"mappings":"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"}

package/dist/src/components/filterform/FilterInput.d.ts

@@ -11,4 +11,5 @@ type FilterInputProps = {
     size?: SizeType;
 };
 export declare const FilterInput: ({ value, filterConfigs, onChange, onBlur, className, size, }: FilterInputProps) => React.JSX.Element;
+export declare const MULTI_VALUE_TOKEN_SEPARATORS: string[];
 export {};

package/dist/src/components/filterform/FilterInput.js

@@ -1,7 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { useFilterField } from "./useFilterField.js";
-import { Select, Input, InputNumber } from "antd";
+import { Select, Input, InputNumber, Typography } from "antd";
+import { normalizeMultiValues, tooManyValuesMessage } from "./filterHelpers.js";
 import cx from "classnames";
 const FilterInput = ({
   value,
@@ -27,10 +28,13 @@ const FilterInput = ({
     value: config.field,
     disabled: config.disabled
   }));
+  const latestFilterRef = React.useRef(filter);
+  latestFilterRef.current = filter;
   const handleBlur = () => {
-    if (filter) {
-      onBlur == null ? void 0 : onBlur(filter);
-    }
+    setTimeout(() => {
+      const latest = latestFilterRef.current;
+      if (latest) onBlur == null ? void 0 : onBlur(latest);
+    }, 0);
   };
   const isInitialMount = React.useRef(true);
   const prevFilterRef = React.useRef(filter);
@@ -38,6 +42,9 @@ const FilterInput = ({
     if (isInitialMount.current) {
       isInitialMount.current = false;
       prevFilterRef.current = filter;
+      if (value && filter && wasCorrectedOnInit(value, filter)) {
+        onChange == null ? void 0 : onChange(filter);
+      }
       return;
     }
     if (filter && filter !== prevFilterRef.current) {
@@ -82,6 +89,8 @@ const FilterInput = ({
     ] })
   ] });
 };
+const sameList = (a, b) => a.length === b.length && a.every((item, i) => item === b[i]);
+const wasCorrectedOnInit = (persisted, current) => persisted.operator !== current.operator || !sameList(persisted.values, current.values) || persisted.errors === void 0 || !sameList(persisted.errors, current.errors ?? []);
 const ValueInput = ({
   valueInputConfig,
   values,
@@ -138,6 +147,18 @@ const ValueInput = ({
         ] }, `number-input-${index}`)
       ) });
     case "text":
+      if (valueInputConfig.multiValue) {
+        return /* @__PURE__ */ jsx(
+          MultiValueTextInput,
+          {
+            values,
+            maxValues: valueInputConfig.maxValues,
+            onChange,
+            onBlur,
+            size
+          }
+        );
+      }
       return /* @__PURE__ */ jsx(
         Input,
         {
@@ -152,7 +173,49 @@ const ValueInput = ({
       return null;
   }
 };
+const MULTI_VALUE_TOKEN_SEPARATORS = [",", "\n", "\r", "	"];
+const MultiValueTextInput = ({
+  values,
+  maxValues,
+  onChange,
+  onBlur,
+  size
+}) => {
+  const chips = (values ?? []).flatMap(
+    (value) => value === null || value === void 0 ? [] : [String(value)]
+  );
+  const over = maxValues !== void 0 && chips.length > maxValues;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 w-full min-w-0", children: [
+    /* @__PURE__ */ jsx(
+      Select,
+      {
+        mode: "tags",
+        tokenSeparators: MULTI_VALUE_TOKEN_SEPARATORS,
+        value: chips,
+        onChange: (next) => onChange(normalizeMultiValues(next)),
+        onBlur,
+        open: false,
+        suffixIcon: null,
+        placeholder: "Type or paste values, separated by commas",
+        className: "w-full",
+        size,
+        status: over ? "error" : void 0,
+        "aria-label": "Values"
+      }
+    ),
+    maxValues !== void 0 && /* @__PURE__ */ jsx(
+      Typography.Text,
+      {
+        type: over ? "danger" : "secondary",
+        className: "text-xs",
+        role: over ? "alert" : void 0,
+        children: over ? `${tooManyValuesMessage(maxValues)} — remove ${chips.length - maxValues} to apply` : `${chips.length} / ${maxValues} values`
+      }
+    )
+  ] });
+};
 export {
-  FilterInput
+  FilterInput,
+  MULTI_VALUE_TOKEN_SEPARATORS
 };
 //# sourceMappingURL=FilterInput.js.map

package/dist/src/components/filterform/FilterInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterInput.js","sources":["../../../../src/components/filterform/FilterInput.tsx"],"sourcesContent":["import * as React from 'react'\nimport { FilterConfig } from '.'\nimport { useFilterField } from './useFilterField'\nimport { Input, InputNumber, Select } from 'antd'\nimport { FormFilter } from './types'\nimport cx from 'classnames'\nimport { SizeType } from 'antd/es/config-provider/SizeContext'\n\ntype SelectValueInputConfig = {\n  type: 'select'\n  valueOptions: { label: string; value: string }[]\n}\n\ntype NumberValueInputConfig = {\n  type: 'number'\n  inputCount: number\n  numberOptions?: { max: number; min: number; step: number }\n}\n\ntype TextValueInputConfig = {\n  type: 'text'\n}\n\ntype ValueInputConfig =\n  SelectValueInputConfig | NumberValueInputConfig | TextValueInputConfig\n\ntype FilterInputProps = {\n  value?: FormFilter\n  filterConfigs: FilterConfig[]\n  onChange?: (value: FormFilter) => void\n  onBlur?: (value: FormFilter) => void\n  className?: string\n  size?: SizeType\n}\n\nexport const FilterInput = ({\n  value,\n  filterConfigs,\n  onChange,\n  onBlur,\n  className,\n  size = 'middle',\n}: FilterInputProps) => {\n  const {\n    filter,\n    operatorOptions,\n    valueInputConfig,\n    handleFieldChange,\n    handleOperatorChange,\n    handleValuesChange,\n  } = useFilterField({\n    filterConfigs,\n    filter: value,\n  })\n\n  const fieldOptions = filterConfigs.map((config) => ({\n    label: config.label,\n    value: config.field,\n    disabled: config.disabled,\n  }))\n\n  const handleBlur = () => {\n    if (filter) {\n      onBlur?.(filter)\n    }\n  }\n\n  // Track if this is a user-driven change (not initialization)\n  const isInitialMount = React.useRef(true)\n  const prevFilterRef = React.useRef(filter)\n\n  React.useEffect(() => {\n    // Skip the initial mount to avoid calling onChange during initialization\n    if (isInitialMount.current) {\n      isInitialMount.current = false\n      prevFilterRef.current = filter\n      return\n    }\n\n    // Only call onChange if the filter actually changed\n    if (filter && filter !== prevFilterRef.current) {\n      prevFilterRef.current = filter\n      onChange?.(filter)\n    }\n  }, [filter, onChange])\n\n  return (\n    <div className={cx('grid grid-cols-3 gap-2', className)}>\n      <Select\n        options={fieldOptions}\n        value={filter?.field}\n        showSearch\n        optionFilterProp=\"label\"\n        onChange={handleFieldChange}\n        size={size}\n      />\n      <div className=\"col-span-2 flex gap-2\">\n        <Select\n          options={operatorOptions}\n          value={filter?.operator}\n          onChange={handleOperatorChange}\n          onBlur={handleBlur}\n          size={size}\n          popupMatchSelectWidth={false}\n        />\n        {valueInputConfig && (\n          <ValueInput\n            valueInputConfig={valueInputConfig}\n            values={filter?.values}\n            onChange={handleValuesChange}\n            onBlur={handleBlur}\n            size={size}\n          />\n        )}\n      </div>\n    </div>\n  )\n}\n\ntype ValueInputProps = {\n  valueInputConfig: ValueInputConfig\n  values?: (string | number | undefined | null)[]\n  onChange: (value: (string | number | undefined | null)[]) => void\n  onBlur: () => void\n  size: SizeType\n}\n\nconst ValueInput = ({\n  valueInputConfig,\n  values,\n  onChange,\n  onBlur,\n  size,\n}: ValueInputProps) => {\n  const handleChange = (value: string | number | null) => {\n    if (value === null) {\n      onChange([])\n    } else {\n      onChange([value])\n    }\n  }\n\n  const handleNumberChange = (value: string | number | null, index: number) => {\n    const newValues: (string | number | undefined | null)[] = [\n      ...(values ?? []),\n    ]\n    newValues[index] = value\n    onChange(newValues)\n  }\n\n  switch (valueInputConfig.type) {\n    case 'select':\n      return (\n        <Select\n          options={valueInputConfig.valueOptions}\n          onChange={onChange}\n          showSearch\n          allowClear\n          mode=\"multiple\"\n          onBlur={onBlur}\n          value={values}\n          className=\"w-full truncate\"\n          size={size}\n          optionFilterProp=\"label\"\n        />\n      )\n    case 'number':\n      return (\n        <div className=\"flex gap-2 grow\">\n          {Array.from({ length: valueInputConfig.inputCount }).map(\n            (_, index) => (\n              <React.Fragment key={`number-input-${index}`}>\n                {index !== 0 && <span className=\"my-auto\">and</span>}\n                <InputNumber\n                  onChange={(value) => handleNumberChange(value, index)}\n                  onBlur={onBlur}\n                  value={values?.[index]}\n                  className=\"basis-1/2\"\n                  size={size}\n                  {...(valueInputConfig.numberOptions ?? {})}\n                />\n              </React.Fragment>\n            )\n          )}\n        </div>\n      )\n    case 'text':\n      return (\n        <Input\n          onBlur={onBlur}\n          value={values?.[0] ?? undefined}\n          onChange={(e) => handleChange(e.target.value)}\n          className=\"w-full\"\n          size={size}\n        />\n      )\n    default:\n      return null\n  }\n}\n"],"names":[],"mappings":";;;;;AAmCO,MAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AACT,MAAwB;AACtB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE,eAAe;AAAA,IACjB;AAAA,IACA,QAAQ;AAAA,EAAA,CACT;AAED,QAAM,eAAe,cAAc,IAAI,CAAC,YAAY;AAAA,IAClD,OAAO,OAAO;AAAA,IACd,OAAO,OAAO;AAAA,IACd,UAAU,OAAO;AAAA,EAAA,EACjB;AAEF,QAAM,aAAa,MAAM;AACvB,QAAI,QAAQ;AACV,uCAAS;AAAA,IACX;AAAA,EACF;AAGA,QAAM,iBAAiB,MAAM,OAAO,IAAI;AACxC,QAAM,gBAAgB,MAAM,OAAO,MAAM;AAEzC,QAAM,UAAU,MAAM;AAEpB,QAAI,eAAe,SAAS;AAC1B,qBAAe,UAAU;AACzB,oBAAc,UAAU;AACxB;AAAA,IACF;AAGA,QAAI,UAAU,WAAW,cAAc,SAAS;AAC9C,oBAAc,UAAU;AACxB,2CAAW;AAAA,IACb;AAAA,EACF,GAAG,CAAC,QAAQ,QAAQ,CAAC;AAErB,8BACG,OAAA,EAAI,WAAW,GAAG,0BAA0B,SAAS,GACpD,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT,OAAO,iCAAQ;AAAA,QACf,YAAU;AAAA,QACV,kBAAiB;AAAA,QACjB,UAAU;AAAA,QACV;AAAA,MAAA;AAAA,IAAA;AAAA,IAEF,qBAAC,OAAA,EAAI,WAAU,yBACb,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS;AAAA,UACT,OAAO,iCAAQ;AAAA,UACf,UAAU;AAAA,UACV,QAAQ;AAAA,UACR;AAAA,UACA,uBAAuB;AAAA,QAAA;AAAA,MAAA;AAAA,MAExB,oBACC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,QAAQ,iCAAQ;AAAA,UAChB,UAAU;AAAA,UACV,QAAQ;AAAA,UACR;AAAA,QAAA;AAAA,MAAA;AAAA,IACF,EAAA,CAEJ;AAAA,EAAA,GACF;AAEJ;AAUA,MAAM,aAAa,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAuB;AACrB,QAAM,eAAe,CAAC,UAAkC;AACtD,QAAI,UAAU,MAAM;AAClB,eAAS,CAAA,CAAE;AAAA,IACb,OAAO;AACL,eAAS,CAAC,KAAK,CAAC;AAAA,IAClB;AAAA,EACF;AAEA,QAAM,qBAAqB,CAAC,OAA+B,UAAkB;AAC3E,UAAM,YAAoD;AAAA,MACxD,GAAI,UAAU,CAAA;AAAA,IAAC;AAEjB,cAAU,KAAK,IAAI;AACnB,aAAS,SAAS;AAAA,EACpB;AAEA,UAAQ,iBAAiB,MAAA;AAAA,IACvB,KAAK;AACH,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS,iBAAiB;AAAA,UAC1B;AAAA,UACA,YAAU;AAAA,UACV,YAAU;AAAA,UACV,MAAK;AAAA,UACL;AAAA,UACA,OAAO;AAAA,UACP,WAAU;AAAA,UACV;AAAA,UACA,kBAAiB;AAAA,QAAA;AAAA,MAAA;AAAA,IAGvB,KAAK;AACH,aACE,oBAAC,OAAA,EAAI,WAAU,mBACZ,UAAA,MAAM,KAAK,EAAE,QAAQ,iBAAiB,WAAA,CAAY,EAAE;AAAA,QACnD,CAAC,GAAG,UACF,qBAAC,MAAM,UAAN,EACE,UAAA;AAAA,UAAA,UAAU,KAAK,oBAAC,QAAA,EAAK,WAAU,WAAU,UAAA,OAAG;AAAA,UAC7C;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,UAAU,CAAC,UAAU,mBAAmB,OAAO,KAAK;AAAA,cACpD;AAAA,cACA,OAAO,iCAAS;AAAA,cAChB,WAAU;AAAA,cACV;AAAA,cACC,GAAI,iBAAiB,iBAAiB,CAAA;AAAA,YAAC;AAAA,UAAA;AAAA,QAC1C,KATmB,gBAAgB,KAAK,EAU1C;AAAA,MAAA,GAGN;AAAA,IAEJ,KAAK;AACH,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,QAAO,iCAAS,OAAM;AAAA,UACtB,UAAU,CAAC,MAAM,aAAa,EAAE,OAAO,KAAK;AAAA,UAC5C,WAAU;AAAA,UACV;AAAA,QAAA;AAAA,MAAA;AAAA,IAGN;AACE,aAAO;AAAA,EAAA;AAEb;"}
+{"version":3,"file":"FilterInput.js","sources":["../../../../src/components/filterform/FilterInput.tsx"],"sourcesContent":["import * as React from 'react'\nimport { FilterConfig } from '.'\nimport { useFilterField, ValueInputConfig } from './useFilterField'\nimport { Input, InputNumber, Select, Typography } from 'antd'\nimport { FormFilter } from './types'\nimport { normalizeMultiValues, tooManyValuesMessage } from './filterHelpers'\nimport cx from 'classnames'\nimport { SizeType } from 'antd/es/config-provider/SizeContext'\n\ntype FilterInputProps = {\n  value?: FormFilter\n  filterConfigs: FilterConfig[]\n  onChange?: (value: FormFilter) => void\n  onBlur?: (value: FormFilter) => void\n  className?: string\n  size?: SizeType\n}\n\nexport const FilterInput = ({\n  value,\n  filterConfigs,\n  onChange,\n  onBlur,\n  className,\n  size = 'middle',\n}: FilterInputProps) => {\n  const {\n    filter,\n    operatorOptions,\n    valueInputConfig,\n    handleFieldChange,\n    handleOperatorChange,\n    handleValuesChange,\n  } = useFilterField({\n    filterConfigs,\n    filter: value,\n  })\n\n  const fieldOptions = filterConfigs.map((config) => ({\n    label: config.label,\n    value: config.field,\n    disabled: config.disabled,\n  }))\n\n  // Mirror of the reducer's filter for callbacks that run after a render.\n  const latestFilterRef = React.useRef(filter)\n  latestFilterRef.current = filter\n\n  // Deferred a tick, and read from the ref rather than the closure. A tags\n  // `Select` commits unseparated search text as a chip inside its own blur\n  // handling, so `onChange` and `onBlur` arrive in the same browser event and\n  // React flushes the resulting reducer update only after both return. A\n  // synchronous `onBlur` would hand the parent the filter from *before* that\n  // last chip — and for a new rule the parent finalizes and unmounts this\n  // input, silently dropping the value. After the flush the ref holds it.\n  const handleBlur = () => {\n    setTimeout(() => {\n      const latest = latestFilterRef.current\n      if (latest) onBlur?.(latest)\n    }, 0)\n  }\n\n  // Track if this is a user-driven change (not initialization)\n  const isInitialMount = React.useRef(true)\n  const prevFilterRef = React.useRef(filter)\n\n  React.useEffect(() => {\n    // Skip the initial mount to avoid calling onChange during initialization\n    // — unless initialization itself corrected the persisted filter (an\n    // operator the field no longer offers, or a chip list that needed\n    // normalizing). Then the parent must learn about it, or it would keep\n    // and submit the stale filter until the user happened to touch the rule.\n    if (isInitialMount.current) {\n      isInitialMount.current = false\n      prevFilterRef.current = filter\n      if (value && filter && wasCorrectedOnInit(value, filter)) {\n        onChange?.(filter)\n      }\n      return\n    }\n\n    // Only call onChange if the filter actually changed\n    if (filter && filter !== prevFilterRef.current) {\n      prevFilterRef.current = filter\n      onChange?.(filter)\n    }\n  }, [filter, onChange])\n\n  return (\n    <div className={cx('grid grid-cols-3 gap-2', className)}>\n      <Select\n        options={fieldOptions}\n        value={filter?.field}\n        showSearch\n        optionFilterProp=\"label\"\n        onChange={handleFieldChange}\n        size={size}\n      />\n      <div className=\"col-span-2 flex gap-2\">\n        <Select\n          options={operatorOptions}\n          value={filter?.operator}\n          onChange={handleOperatorChange}\n          onBlur={handleBlur}\n          size={size}\n          popupMatchSelectWidth={false}\n        />\n        {valueInputConfig && (\n          <ValueInput\n            valueInputConfig={valueInputConfig}\n            values={filter?.values}\n            onChange={handleValuesChange}\n            onBlur={handleBlur}\n            size={size}\n          />\n        )}\n      </div>\n    </div>\n  )\n}\n\nconst sameList = (a: readonly unknown[], b: readonly unknown[]) =>\n  a.length === b.length && a.every((item, i) => item === b[i])\n\n// Whether initializing from a persisted filter changed anything the parent\n// holds — operator, values, or the validation result. `errors` counts: a\n// persisted rule can be unchanged yet newly invalid (a lowered `maxValues`),\n// or arrive with no `errors` at all (a plain `FilterForm` from storage), and\n// the form's validity is computed from the errors it holds, not from ours.\nconst wasCorrectedOnInit = (persisted: FormFilter, current: FormFilter) =>\n  persisted.operator !== current.operator ||\n  !sameList(persisted.values, current.values) ||\n  persisted.errors === undefined ||\n  !sameList(persisted.errors, current.errors ?? [])\n\ntype ValueInputProps = {\n  valueInputConfig: ValueInputConfig\n  values?: (string | number | undefined | null)[]\n  onChange: (value: (string | number | undefined | null)[]) => void\n  onBlur: () => void\n  size: SizeType\n}\n\nconst ValueInput = ({\n  valueInputConfig,\n  values,\n  onChange,\n  onBlur,\n  size,\n}: ValueInputProps) => {\n  const handleChange = (value: string | number | null) => {\n    if (value === null) {\n      onChange([])\n    } else {\n      onChange([value])\n    }\n  }\n\n  const handleNumberChange = (value: string | number | null, index: number) => {\n    const newValues: (string | number | undefined | null)[] = [\n      ...(values ?? []),\n    ]\n    newValues[index] = value\n    onChange(newValues)\n  }\n\n  switch (valueInputConfig.type) {\n    case 'select':\n      return (\n        <Select\n          options={valueInputConfig.valueOptions}\n          onChange={onChange}\n          showSearch\n          allowClear\n          mode=\"multiple\"\n          onBlur={onBlur}\n          value={values}\n          className=\"w-full truncate\"\n          size={size}\n          optionFilterProp=\"label\"\n        />\n      )\n    case 'number':\n      return (\n        <div className=\"flex gap-2 grow\">\n          {Array.from({ length: valueInputConfig.inputCount }).map(\n            (_, index) => (\n              <React.Fragment key={`number-input-${index}`}>\n                {index !== 0 && <span className=\"my-auto\">and</span>}\n                <InputNumber\n                  onChange={(value) => handleNumberChange(value, index)}\n                  onBlur={onBlur}\n                  value={values?.[index]}\n                  className=\"basis-1/2\"\n                  size={size}\n                  {...(valueInputConfig.numberOptions ?? {})}\n                />\n              </React.Fragment>\n            )\n          )}\n        </div>\n      )\n    case 'text':\n      if (valueInputConfig.multiValue) {\n        return (\n          <MultiValueTextInput\n            values={values}\n            maxValues={valueInputConfig.maxValues}\n            onChange={onChange}\n            onBlur={onBlur}\n            size={size}\n          />\n        )\n      }\n      return (\n        <Input\n          onBlur={onBlur}\n          value={values?.[0] ?? undefined}\n          onChange={(e) => handleChange(e.target.value)}\n          className=\"w-full\"\n          size={size}\n        />\n      )\n    default:\n      return null\n  }\n}\n\n// Commas, newlines (both flavours) and tabs: a column pasted from Excel or a\n// comma-separated list from an email both land as one chip per value.\nexport const MULTI_VALUE_TOKEN_SEPARATORS = [',', '\\n', '\\r', '\\t']\n\n/**\n * Chips input for the multi-value text operators (`isAnyOf` / `isNoneOf`).\n *\n * A tags Select rather than a text box split at query time: every token is\n * visible and individually removable before Apply, so a pasted value that\n * itself contains a comma (street addresses do) can be seen and fixed\n * instead of being silently shredded. The dropdown is kept closed — there\n * are no options to pick from; Enter or a separator commits a chip.\n */\nconst MultiValueTextInput = ({\n  values,\n  maxValues,\n  onChange,\n  onBlur,\n  size,\n}: {\n  values?: (string | number | undefined | null)[]\n  maxValues?: number\n  onChange: (value: (string | number | undefined | null)[]) => void\n  onBlur: () => void\n  size: SizeType\n}) => {\n  // Rendered as stored: `useFilterField` normalizes values on the way into\n  // state, so what the chips show is exactly what validation counts and\n  // what `onSubmit` emits. (Numbers/nulls can't occur for a text filter;\n  // the map is only for the shared `values` type.)\n  const chips = (values ?? []).flatMap((value) =>\n    value === null || value === undefined ? [] : [String(value)]\n  )\n  const over = maxValues !== undefined && chips.length > maxValues\n\n  return (\n    <div className=\"flex flex-col gap-1 w-full min-w-0\">\n      <Select\n        mode=\"tags\"\n        tokenSeparators={MULTI_VALUE_TOKEN_SEPARATORS}\n        value={chips}\n        onChange={(next: string[]) => onChange(normalizeMultiValues(next))}\n        onBlur={onBlur}\n        open={false}\n        suffixIcon={null}\n        placeholder=\"Type or paste values, separated by commas\"\n        className=\"w-full\"\n        size={size}\n        status={over ? 'error' : undefined}\n        aria-label=\"Values\"\n      />\n      {maxValues !== undefined && (\n        <Typography.Text\n          type={over ? 'danger' : 'secondary'}\n          className=\"text-xs\"\n          role={over ? 'alert' : undefined}\n        >\n          {over\n            ? `${tooManyValuesMessage(maxValues)} — remove ${\n                chips.length - maxValues\n              } to apply`\n            : `${chips.length} / ${maxValues} values`}\n        </Typography.Text>\n      )}\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;;AAkBO,MAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AACT,MAAwB;AACtB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE,eAAe;AAAA,IACjB;AAAA,IACA,QAAQ;AAAA,EAAA,CACT;AAED,QAAM,eAAe,cAAc,IAAI,CAAC,YAAY;AAAA,IAClD,OAAO,OAAO;AAAA,IACd,OAAO,OAAO;AAAA,IACd,UAAU,OAAO;AAAA,EAAA,EACjB;AAGF,QAAM,kBAAkB,MAAM,OAAO,MAAM;AAC3C,kBAAgB,UAAU;AAS1B,QAAM,aAAa,MAAM;AACvB,eAAW,MAAM;AACf,YAAM,SAAS,gBAAgB;AAC/B,UAAI,yCAAiB;AAAA,IACvB,GAAG,CAAC;AAAA,EACN;AAGA,QAAM,iBAAiB,MAAM,OAAO,IAAI;AACxC,QAAM,gBAAgB,MAAM,OAAO,MAAM;AAEzC,QAAM,UAAU,MAAM;AAMpB,QAAI,eAAe,SAAS;AAC1B,qBAAe,UAAU;AACzB,oBAAc,UAAU;AACxB,UAAI,SAAS,UAAU,mBAAmB,OAAO,MAAM,GAAG;AACxD,6CAAW;AAAA,MACb;AACA;AAAA,IACF;AAGA,QAAI,UAAU,WAAW,cAAc,SAAS;AAC9C,oBAAc,UAAU;AACxB,2CAAW;AAAA,IACb;AAAA,EACF,GAAG,CAAC,QAAQ,QAAQ,CAAC;AAErB,8BACG,OAAA,EAAI,WAAW,GAAG,0BAA0B,SAAS,GACpD,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT,OAAO,iCAAQ;AAAA,QACf,YAAU;AAAA,QACV,kBAAiB;AAAA,QACjB,UAAU;AAAA,QACV;AAAA,MAAA;AAAA,IAAA;AAAA,IAEF,qBAAC,OAAA,EAAI,WAAU,yBACb,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS;AAAA,UACT,OAAO,iCAAQ;AAAA,UACf,UAAU;AAAA,UACV,QAAQ;AAAA,UACR;AAAA,UACA,uBAAuB;AAAA,QAAA;AAAA,MAAA;AAAA,MAExB,oBACC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,QAAQ,iCAAQ;AAAA,UAChB,UAAU;AAAA,UACV,QAAQ;AAAA,UACR;AAAA,QAAA;AAAA,MAAA;AAAA,IACF,EAAA,CAEJ;AAAA,EAAA,GACF;AAEJ;AAEA,MAAM,WAAW,CAAC,GAAuB,MACvC,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,CAAC,MAAM,MAAM,SAAS,EAAE,CAAC,CAAC;AAO7D,MAAM,qBAAqB,CAAC,WAAuB,YACjD,UAAU,aAAa,QAAQ,YAC/B,CAAC,SAAS,UAAU,QAAQ,QAAQ,MAAM,KAC1C,UAAU,WAAW,UACrB,CAAC,SAAS,UAAU,QAAQ,QAAQ,UAAU,CAAA,CAAE;AAUlD,MAAM,aAAa,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAuB;AACrB,QAAM,eAAe,CAAC,UAAkC;AACtD,QAAI,UAAU,MAAM;AAClB,eAAS,CAAA,CAAE;AAAA,IACb,OAAO;AACL,eAAS,CAAC,KAAK,CAAC;AAAA,IAClB;AAAA,EACF;AAEA,QAAM,qBAAqB,CAAC,OAA+B,UAAkB;AAC3E,UAAM,YAAoD;AAAA,MACxD,GAAI,UAAU,CAAA;AAAA,IAAC;AAEjB,cAAU,KAAK,IAAI;AACnB,aAAS,SAAS;AAAA,EACpB;AAEA,UAAQ,iBAAiB,MAAA;AAAA,IACvB,KAAK;AACH,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS,iBAAiB;AAAA,UAC1B;AAAA,UACA,YAAU;AAAA,UACV,YAAU;AAAA,UACV,MAAK;AAAA,UACL;AAAA,UACA,OAAO;AAAA,UACP,WAAU;AAAA,UACV;AAAA,UACA,kBAAiB;AAAA,QAAA;AAAA,MAAA;AAAA,IAGvB,KAAK;AACH,aACE,oBAAC,OAAA,EAAI,WAAU,mBACZ,UAAA,MAAM,KAAK,EAAE,QAAQ,iBAAiB,WAAA,CAAY,EAAE;AAAA,QACnD,CAAC,GAAG,UACF,qBAAC,MAAM,UAAN,EACE,UAAA;AAAA,UAAA,UAAU,KAAK,oBAAC,QAAA,EAAK,WAAU,WAAU,UAAA,OAAG;AAAA,UAC7C;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,UAAU,CAAC,UAAU,mBAAmB,OAAO,KAAK;AAAA,cACpD;AAAA,cACA,OAAO,iCAAS;AAAA,cAChB,WAAU;AAAA,cACV;AAAA,cACC,GAAI,iBAAiB,iBAAiB,CAAA;AAAA,YAAC;AAAA,UAAA;AAAA,QAC1C,KATmB,gBAAgB,KAAK,EAU1C;AAAA,MAAA,GAGN;AAAA,IAEJ,KAAK;AACH,UAAI,iBAAiB,YAAY;AAC/B,eACE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA,WAAW,iBAAiB;AAAA,YAC5B;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA;AAAA,MAGN;AACA,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,QAAO,iCAAS,OAAM;AAAA,UACtB,UAAU,CAAC,MAAM,aAAa,EAAE,OAAO,KAAK;AAAA,UAC5C,WAAU;AAAA,UACV;AAAA,QAAA;AAAA,MAAA;AAAA,IAGN;AACE,aAAO;AAAA,EAAA;AAEb;AAIO,MAAM,+BAA+B,CAAC,KAAK,MAAM,MAAM,GAAI;AAWlE,MAAM,sBAAsB,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAMM;AAKJ,QAAM,SAAS,UAAU,CAAA,GAAI;AAAA,IAAQ,CAAC,UACpC,UAAU,QAAQ,UAAU,SAAY,CAAA,IAAK,CAAC,OAAO,KAAK,CAAC;AAAA,EAAA;AAE7D,QAAM,OAAO,cAAc,UAAa,MAAM,SAAS;AAEvD,SACE,qBAAC,OAAA,EAAI,WAAU,sCACb,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,iBAAiB;AAAA,QACjB,OAAO;AAAA,QACP,UAAU,CAAC,SAAmB,SAAS,qBAAqB,IAAI,CAAC;AAAA,QACjE;AAAA,QACA,MAAM;AAAA,QACN,YAAY;AAAA,QACZ,aAAY;AAAA,QACZ,WAAU;AAAA,QACV;AAAA,QACA,QAAQ,OAAO,UAAU;AAAA,QACzB,cAAW;AAAA,MAAA;AAAA,IAAA;AAAA,IAEZ,cAAc,UACb;AAAA,MAAC,WAAW;AAAA,MAAX;AAAA,QACC,MAAM,OAAO,WAAW;AAAA,QACxB,WAAU;AAAA,QACV,MAAM,OAAO,UAAU;AAAA,QAEtB,UAAA,OACG,GAAG,qBAAqB,SAAS,CAAC,aAChC,MAAM,SAAS,SACjB,cACA,GAAG,MAAM,MAAM,MAAM,SAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EACpC,GAEJ;AAEJ;"}