@j2-health/design-system 0.2.0 → 0.2.1

package/dist/src/components/drawer/Drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.js","sources":["../../../../src/components/drawer/Drawer.tsx"],"sourcesContent":["import { Drawer as AntdDrawer, DrawerProps, Space } from 'antd'\nimport { Button } from '../button'\nimport { XIcon } from '@phosphor-icons/react'\nimport './Drawer.css'\n\ntype AllProps = Omit<DrawerProps, 'extra' | 'closable'> & {\n  fillPage?: boolean\n  footer?: React.ReactNode\n  extraContent?: React.ReactNode\n}\n\nexport type Props = Expand<AllProps>\n\nexport const Drawer = ({\n  fillPage = false,\n  footer,\n  extraContent,\n  ...props\n}: Props) => {\n  return (\n    <AntdDrawer\n      {...props}\n      closable={false}\n      {...(fillPage && { height: '100vh', width: '100vw' })}\n      {...(footer && { footer })}\n      extra={\n        <Space>\n          {extraContent}\n          <Button\n            className=\"p-0\"\n            type=\"link\"\n            onClick={props.onClose}\n            aria-label=\"Close\"\n          >\n            <XIcon size={22} weight=\"regular\" />\n          </Button>\n        </Space>\n      }\n      className=\"j2-drawer\"\n    />\n  )\n}\n"],"names":["AntdDrawer"],"mappings":";;;;;AAaO,MAAM,SAAS,CAAC;AAAA,EACrB,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAa;AACX,SACE;AAAA,IAACA;AAAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,UAAU;AAAA,MACT,GAAI,YAAY,EAAE,QAAQ,SAAS,OAAO,QAAA;AAAA,MAC1C,GAAI,UAAU,EAAE,OAAA;AAAA,MACjB,4BACG,OAAA,EACE,UAAA;AAAA,QAAA;AAAA,QACD;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YACL,SAAS,MAAM;AAAA,YACf,cAAW;AAAA,YAEX,UAAA,oBAAC,OAAA,EAAM,MAAM,IAAI,QAAO,UAAA,CAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MACpC,GACF;AAAA,MAEF,WAAU;AAAA,IAAA;AAAA,EAAA;AAGhB;"}

package/dist/src/components/dropdown/Dropdown.cjs

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const antd = require("antd");
+const cx = require("classnames");
+const react = require("@phosphor-icons/react");
+;/* empty css               */
+const Button = require("../button/Button.cjs");
+const { Link } = antd.Typography;
+const LabelWithCaret = ({ label }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+  label,
+  /* @__PURE__ */ jsxRuntime.jsx(react.CaretDownIcon, { weight: "regular" })
+] });
+const Target = ({ label, type, disabled, icon, className }) => {
+  if (type === "basic-inline") {
+    return /* @__PURE__ */ jsxRuntime.jsx(Link, { disabled, className: cx("flex gap-1", className), children: icon ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      icon,
+      label
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx(LabelWithCaret, { label }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { disabled, icon, className, children: icon ? label : /* @__PURE__ */ jsxRuntime.jsx(LabelWithCaret, { label }) });
+};
+const Dropdown = ({
+  label,
+  type,
+  icon,
+  menu,
+  menuType = "default",
+  targetClassName,
+  ...props
+}) => {
+  let menuProp = menu;
+  if (menuType === "slim" && typeof menu === "object") {
+    menuProp = {
+      ...menu,
+      className: cx(menu.className, "j2-dropdown-slim-menu")
+    };
+  }
+  if (type === "twofold") {
+    return /* @__PURE__ */ jsxRuntime.jsx(antd.Dropdown.Button, { ...props, menu: menuProp, children: icon ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      icon,
+      " ",
+      label
+    ] }) : label });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(antd.Dropdown, { ...props, menu: menuProp, children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
+    Target,
+    {
+      label,
+      type,
+      disabled: props.disabled,
+      icon,
+      className: targetClassName
+    }
+  ) }) });
+};
+exports.Dropdown = Dropdown;
+//# sourceMappingURL=Dropdown.cjs.map

package/dist/src/components/dropdown/Dropdown.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.cjs","sources":["../../../../src/components/dropdown/Dropdown.tsx"],"sourcesContent":["import { Dropdown as AntdDropdown, DropdownProps, Typography } from 'antd'\nimport cx from 'classnames'\nimport { Button } from '../button'\nimport { CaretDownIcon } from '@phosphor-icons/react'\nimport './Dropdown.css'\n\nconst { Link } = Typography\n\nexport type Props = DropdownProps & {\n  type?: 'basic' | 'basic-inline' | 'twofold'\n  label?: string\n  icon?: React.ReactNode\n  menuType?: 'default' | 'slim'\n  targetClassName?: string\n}\n\nexport type TargetProps = {\n  label?: string\n  type?: 'basic' | 'basic-inline' | 'twofold'\n  disabled?: boolean\n  icon?: React.ReactNode\n  className?: string\n}\n\nconst LabelWithCaret = ({ label }: { label: string | undefined }) => (\n  <div className=\"flex items-center gap-2\">\n    {label}\n    <CaretDownIcon weight=\"regular\" />\n  </div>\n)\n\nconst Target = ({ label, type, disabled, icon, className }: TargetProps) => {\n  if (type === 'basic-inline') {\n    return (\n      <Link disabled={disabled} className={cx('flex gap-1', className)}>\n        {icon ? (\n          <>\n            {icon}\n            {label}\n          </>\n        ) : (\n          <LabelWithCaret label={label} />\n        )}\n      </Link>\n    )\n  }\n\n  return (\n    <Button disabled={disabled} icon={icon} className={className}>\n      {icon ? label : <LabelWithCaret label={label} />}\n    </Button>\n  )\n}\n\nconst Dropdown = ({\n  label,\n  type,\n  icon,\n  menu,\n  menuType = 'default',\n  targetClassName,\n  ...props\n}: Props) => {\n  let menuProp = menu\n\n  if (menuType === 'slim' && typeof menu === 'object') {\n    menuProp = {\n      ...menu,\n      className: cx(menu.className, 'j2-dropdown-slim-menu'),\n    }\n  }\n\n  if (type === 'twofold') {\n    return (\n      <AntdDropdown.Button {...props} menu={menuProp}>\n        {icon ? (\n          <>\n            {icon} {label}\n          </>\n        ) : (\n          label\n        )}\n      </AntdDropdown.Button>\n    )\n  }\n\n  return (\n    <AntdDropdown {...props} menu={menuProp}>\n      <div>\n        <Target\n          label={label}\n          type={type}\n          disabled={props.disabled}\n          icon={icon}\n          className={targetClassName}\n        />\n      </div>\n    </AntdDropdown>\n  )\n}\n\nexport { Dropdown }\n"],"names":["Typography","jsxs","jsx","CaretDownIcon","Fragment","Button","AntdDropdown"],"mappings":";;;;;;;;AAMA,MAAM,EAAE,SAASA,KAAAA;AAkBjB,MAAM,iBAAiB,CAAC,EAAE,YACxBC,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,EAAA;AAAA,EACDC,2BAAAA,IAACC,MAAAA,eAAA,EAAc,QAAO,UAAA,CAAU;AAAA,GAClC;AAGF,MAAM,SAAS,CAAC,EAAE,OAAO,MAAM,UAAU,MAAM,gBAA6B;AAC1E,MAAI,SAAS,gBAAgB;AAC3B,WACED,2BAAAA,IAAC,QAAK,UAAoB,WAAW,GAAG,cAAc,SAAS,GAC5D,UAAA,OACCD,2BAAAA,KAAAG,WAAAA,UAAA,EACG,UAAA;AAAA,MAAA;AAAA,MACA;AAAA,IAAA,EAAA,CACH,IAEAF,2BAAAA,IAAC,gBAAA,EAAe,MAAA,CAAc,EAAA,CAElC;AAAA,EAEJ;AAEA,SACEA,2BAAAA,IAACG,OAAAA,QAAA,EAAO,UAAoB,MAAY,WACrC,iBAAO,QAAQH,2BAAAA,IAAC,gBAAA,EAAe,MAAA,CAAc,EAAA,CAChD;AAEJ;AAEA,MAAM,WAAW,CAAC;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,GAAG;AACL,MAAa;AACX,MAAI,WAAW;AAEf,MAAI,aAAa,UAAU,OAAO,SAAS,UAAU;AACnD,eAAW;AAAA,MACT,GAAG;AAAA,MACH,WAAW,GAAG,KAAK,WAAW,uBAAuB;AAAA,IAAA;AAAA,EAEzD;AAEA,MAAI,SAAS,WAAW;AACtB,WACEA,2BAAAA,IAACI,KAAAA,SAAa,QAAb,EAAqB,GAAG,OAAO,MAAM,UACnC,UAAA,OACCL,2BAAAA,KAAAG,WAAAA,UAAA,EACG,UAAA;AAAA,MAAA;AAAA,MAAK;AAAA,MAAE;AAAA,IAAA,EAAA,CACV,IAEA,OAEJ;AAAA,EAEJ;AAEA,wCACGE,KAAAA,UAAA,EAAc,GAAG,OAAO,MAAM,UAC7B,yCAAC,OAAA,EACC,UAAAJ,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAU,MAAM;AAAA,MAChB;AAAA,MACA,WAAW;AAAA,IAAA;AAAA,EAAA,GAEf,EAAA,CACF;AAEJ;;"}

package/dist/src/components/dropdown/Dropdown.js

@@ -0,0 +1,58 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { Dropdown as Dropdown$1, Typography } from "antd";
+import cx from "classnames";
+import { CaretDownIcon } from "@phosphor-icons/react";
+/* empty css             */
+import { Button } from "../button/Button.js";
+const { Link } = Typography;
+const LabelWithCaret = ({ label }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+  label,
+  /* @__PURE__ */ jsx(CaretDownIcon, { weight: "regular" })
+] });
+const Target = ({ label, type, disabled, icon, className }) => {
+  if (type === "basic-inline") {
+    return /* @__PURE__ */ jsx(Link, { disabled, className: cx("flex gap-1", className), children: icon ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      icon,
+      label
+    ] }) : /* @__PURE__ */ jsx(LabelWithCaret, { label }) });
+  }
+  return /* @__PURE__ */ jsx(Button, { disabled, icon, className, children: icon ? label : /* @__PURE__ */ jsx(LabelWithCaret, { label }) });
+};
+const Dropdown = ({
+  label,
+  type,
+  icon,
+  menu,
+  menuType = "default",
+  targetClassName,
+  ...props
+}) => {
+  let menuProp = menu;
+  if (menuType === "slim" && typeof menu === "object") {
+    menuProp = {
+      ...menu,
+      className: cx(menu.className, "j2-dropdown-slim-menu")
+    };
+  }
+  if (type === "twofold") {
+    return /* @__PURE__ */ jsx(Dropdown$1.Button, { ...props, menu: menuProp, children: icon ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      icon,
+      " ",
+      label
+    ] }) : label });
+  }
+  return /* @__PURE__ */ jsx(Dropdown$1, { ...props, menu: menuProp, children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+    Target,
+    {
+      label,
+      type,
+      disabled: props.disabled,
+      icon,
+      className: targetClassName
+    }
+  ) }) });
+};
+export {
+  Dropdown
+};
+//# sourceMappingURL=Dropdown.js.map

package/dist/src/components/dropdown/Dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.js","sources":["../../../../src/components/dropdown/Dropdown.tsx"],"sourcesContent":["import { Dropdown as AntdDropdown, DropdownProps, Typography } from 'antd'\nimport cx from 'classnames'\nimport { Button } from '../button'\nimport { CaretDownIcon } from '@phosphor-icons/react'\nimport './Dropdown.css'\n\nconst { Link } = Typography\n\nexport type Props = DropdownProps & {\n  type?: 'basic' | 'basic-inline' | 'twofold'\n  label?: string\n  icon?: React.ReactNode\n  menuType?: 'default' | 'slim'\n  targetClassName?: string\n}\n\nexport type TargetProps = {\n  label?: string\n  type?: 'basic' | 'basic-inline' | 'twofold'\n  disabled?: boolean\n  icon?: React.ReactNode\n  className?: string\n}\n\nconst LabelWithCaret = ({ label }: { label: string | undefined }) => (\n  <div className=\"flex items-center gap-2\">\n    {label}\n    <CaretDownIcon weight=\"regular\" />\n  </div>\n)\n\nconst Target = ({ label, type, disabled, icon, className }: TargetProps) => {\n  if (type === 'basic-inline') {\n    return (\n      <Link disabled={disabled} className={cx('flex gap-1', className)}>\n        {icon ? (\n          <>\n            {icon}\n            {label}\n          </>\n        ) : (\n          <LabelWithCaret label={label} />\n        )}\n      </Link>\n    )\n  }\n\n  return (\n    <Button disabled={disabled} icon={icon} className={className}>\n      {icon ? label : <LabelWithCaret label={label} />}\n    </Button>\n  )\n}\n\nconst Dropdown = ({\n  label,\n  type,\n  icon,\n  menu,\n  menuType = 'default',\n  targetClassName,\n  ...props\n}: Props) => {\n  let menuProp = menu\n\n  if (menuType === 'slim' && typeof menu === 'object') {\n    menuProp = {\n      ...menu,\n      className: cx(menu.className, 'j2-dropdown-slim-menu'),\n    }\n  }\n\n  if (type === 'twofold') {\n    return (\n      <AntdDropdown.Button {...props} menu={menuProp}>\n        {icon ? (\n          <>\n            {icon} {label}\n          </>\n        ) : (\n          label\n        )}\n      </AntdDropdown.Button>\n    )\n  }\n\n  return (\n    <AntdDropdown {...props} menu={menuProp}>\n      <div>\n        <Target\n          label={label}\n          type={type}\n          disabled={props.disabled}\n          icon={icon}\n          className={targetClassName}\n        />\n      </div>\n    </AntdDropdown>\n  )\n}\n\nexport { Dropdown }\n"],"names":["AntdDropdown"],"mappings":";;;;;;AAMA,MAAM,EAAE,SAAS;AAkBjB,MAAM,iBAAiB,CAAC,EAAE,YACxB,qBAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,EAAA;AAAA,EACD,oBAAC,eAAA,EAAc,QAAO,UAAA,CAAU;AAAA,GAClC;AAGF,MAAM,SAAS,CAAC,EAAE,OAAO,MAAM,UAAU,MAAM,gBAA6B;AAC1E,MAAI,SAAS,gBAAgB;AAC3B,WACE,oBAAC,QAAK,UAAoB,WAAW,GAAG,cAAc,SAAS,GAC5D,UAAA,OACC,qBAAA,UAAA,EACG,UAAA;AAAA,MAAA;AAAA,MACA;AAAA,IAAA,EAAA,CACH,IAEA,oBAAC,gBAAA,EAAe,MAAA,CAAc,EAAA,CAElC;AAAA,EAEJ;AAEA,SACE,oBAAC,QAAA,EAAO,UAAoB,MAAY,WACrC,iBAAO,QAAQ,oBAAC,gBAAA,EAAe,MAAA,CAAc,EAAA,CAChD;AAEJ;AAEA,MAAM,WAAW,CAAC;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,GAAG;AACL,MAAa;AACX,MAAI,WAAW;AAEf,MAAI,aAAa,UAAU,OAAO,SAAS,UAAU;AACnD,eAAW;AAAA,MACT,GAAG;AAAA,MACH,WAAW,GAAG,KAAK,WAAW,uBAAuB;AAAA,IAAA;AAAA,EAEzD;AAEA,MAAI,SAAS,WAAW;AACtB,WACE,oBAACA,WAAa,QAAb,EAAqB,GAAG,OAAO,MAAM,UACnC,UAAA,OACC,qBAAA,UAAA,EACG,UAAA;AAAA,MAAA;AAAA,MAAK;AAAA,MAAE;AAAA,IAAA,EAAA,CACV,IAEA,OAEJ;AAAA,EAEJ;AAEA,6BACGA,YAAA,EAAc,GAAG,OAAO,MAAM,UAC7B,8BAAC,OAAA,EACC,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAU,MAAM;AAAA,MAChB;AAAA,MACA,WAAW;AAAA,IAAA;AAAA,EAAA,GAEf,EAAA,CACF;AAEJ;"}

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

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("@phosphor-icons/react");
+const FilterInput = require("./FilterInput.cjs");
+const cx = require("classnames");
+const FiltersForm_module = require("./FiltersForm.module.css.cjs");
+const Button = require("../button/Button.cjs");
+const FilterGroup = ({
+  filterGroup,
+  groupIndex,
+  filterConfigs,
+  className,
+  onRemove,
+  onChange,
+  onDone
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cx(
+        "flex flex-col gap-4",
+        {
+          [FiltersForm_module.default.filterFormGroupContainer]: filterGroup.filters.length > 1,
+          "p-3": filterGroup.filters.length > 1,
+          "pr-3": filterGroup.filters.length === 1
+        },
+        className
+      ),
+      children: filterGroup.filters.map((filter, filterIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "flex items-center justify-between",
+          children: [
+            filterIndex >= 1 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx(FiltersForm_module.default.filterFormConjunction, "mr-3"), children: "and" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              FilterInput.FilterInput,
+              {
+                value: filter,
+                filterConfigs,
+                className: "flex-1",
+                onChange: (filter2) => onChange(filter2, filterIndex),
+                onBlur: (filter2) => onDone(filter2, filterIndex)
+              },
+              `${groupIndex}:${filterIndex}`
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Button.Button,
+              {
+                type: "text",
+                icon: /* @__PURE__ */ jsxRuntime.jsx(react.TrashIcon, {}),
+                onClick: () => onRemove(filterIndex)
+              }
+            )
+          ]
+        },
+        `${groupIndex}:${filterIndex}-input-container`
+      ))
+    },
+    filterGroup.field
+  );
+};
+exports.FilterGroup = FilterGroup;
+//# sourceMappingURL=FilterGroup.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterGroup.cjs","sources":["../../../../src/components/filterform/FilterGroup.tsx"],"sourcesContent":["import { Button } from '../button'\nimport { TrashIcon } from '@phosphor-icons/react'\nimport { FilterInput } from './FilterInput'\nimport cx from 'classnames'\nimport s from './FiltersForm.module.css'\nimport { FilterConfig } from '.'\nimport { FormFilter } from './types'\n\ntype FilterGroupProps = {\n  filterGroup: {\n    field: string\n    filters: FormFilter[]\n  }\n  groupIndex: number\n  filterConfigs: FilterConfig[]\n  className?: string\n  onRemove: (index: number) => void\n  onChange: (filter: FormFilter, index: number) => void\n  onDone: (filter: FormFilter, index: number) => void\n}\n\nexport const FilterGroup = ({\n  filterGroup,\n  groupIndex,\n  filterConfigs,\n  className,\n  onRemove,\n  onChange,\n  onDone,\n}: FilterGroupProps) => {\n  return (\n    <div\n      key={filterGroup.field}\n      className={cx(\n        'flex flex-col gap-4',\n        {\n          [s.filterFormGroupContainer]: filterGroup.filters.length > 1,\n          'p-3': filterGroup.filters.length > 1,\n          'pr-3': filterGroup.filters.length === 1,\n        },\n        className\n      )}\n    >\n      {filterGroup.filters.map((filter, filterIndex) => (\n        <div\n          key={`${groupIndex}:${filterIndex}-input-container`}\n          className=\"flex items-center justify-between\"\n        >\n          {filterIndex >= 1 && (\n            <span className={cx(s.filterFormConjunction, 'mr-3')}>and</span>\n          )}\n          <FilterInput\n            key={`${groupIndex}:${filterIndex}`}\n            value={filter}\n            filterConfigs={filterConfigs}\n            className=\"flex-1\"\n            onChange={(filter) => onChange(filter, filterIndex)}\n            onBlur={(filter) => onDone(filter, filterIndex)}\n          />\n          <Button\n            type=\"text\"\n            icon={<TrashIcon />}\n            onClick={() => onRemove(filterIndex)}\n          />\n        </div>\n      ))}\n    </div>\n  )\n}\n"],"names":["jsx","s","jsxs","FilterInput","filter","Button","TrashIcon"],"mappings":";;;;;;;;AAqBO,MAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAwB;AACtB,SACEA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MAEC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,UACE,CAACC,mBAAAA,QAAE,wBAAwB,GAAG,YAAY,QAAQ,SAAS;AAAA,UAC3D,OAAO,YAAY,QAAQ,SAAS;AAAA,UACpC,QAAQ,YAAY,QAAQ,WAAW;AAAA,QAAA;AAAA,QAEzC;AAAA,MAAA;AAAA,MAGD,UAAA,YAAY,QAAQ,IAAI,CAAC,QAAQ,gBAChCC,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UAEC,WAAU;AAAA,UAET,UAAA;AAAA,YAAA,eAAe,oCACb,QAAA,EAAK,WAAW,GAAGD,mBAAAA,QAAE,uBAAuB,MAAM,GAAG,UAAA,MAAA,CAAG;AAAA,YAE3DD,2BAAAA;AAAAA,cAACG,YAAAA;AAAAA,cAAA;AAAA,gBAEC,OAAO;AAAA,gBACP;AAAA,gBACA,WAAU;AAAA,gBACV,UAAU,CAACC,YAAW,SAASA,SAAQ,WAAW;AAAA,gBAClD,QAAQ,CAACA,YAAW,OAAOA,SAAQ,WAAW;AAAA,cAAA;AAAA,cALzC,GAAG,UAAU,IAAI,WAAW;AAAA,YAAA;AAAA,YAOnCJ,2BAAAA;AAAAA,cAACK,OAAAA;AAAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,qCAAOC,MAAAA,WAAA,EAAU;AAAA,gBACjB,SAAS,MAAM,SAAS,WAAW;AAAA,cAAA;AAAA,YAAA;AAAA,UACrC;AAAA,QAAA;AAAA,QAlBK,GAAG,UAAU,IAAI,WAAW;AAAA,MAAA,CAoBpC;AAAA,IAAA;AAAA,IAjCI,YAAY;AAAA,EAAA;AAoCvB;;"}

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

@@ -0,0 +1,64 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { TrashIcon } from "@phosphor-icons/react";
+import { FilterInput } from "./FilterInput.js";
+import cx from "classnames";
+import s from "./FiltersForm.module.css.js";
+import { Button } from "../button/Button.js";
+const FilterGroup = ({
+  filterGroup,
+  groupIndex,
+  filterConfigs,
+  className,
+  onRemove,
+  onChange,
+  onDone
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx(
+        "flex flex-col gap-4",
+        {
+          [s.filterFormGroupContainer]: filterGroup.filters.length > 1,
+          "p-3": filterGroup.filters.length > 1,
+          "pr-3": filterGroup.filters.length === 1
+        },
+        className
+      ),
+      children: filterGroup.filters.map((filter, filterIndex) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-center justify-between",
+          children: [
+            filterIndex >= 1 && /* @__PURE__ */ jsx("span", { className: cx(s.filterFormConjunction, "mr-3"), children: "and" }),
+            /* @__PURE__ */ jsx(
+              FilterInput,
+              {
+                value: filter,
+                filterConfigs,
+                className: "flex-1",
+                onChange: (filter2) => onChange(filter2, filterIndex),
+                onBlur: (filter2) => onDone(filter2, filterIndex)
+              },
+              `${groupIndex}:${filterIndex}`
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "text",
+                icon: /* @__PURE__ */ jsx(TrashIcon, {}),
+                onClick: () => onRemove(filterIndex)
+              }
+            )
+          ]
+        },
+        `${groupIndex}:${filterIndex}-input-container`
+      ))
+    },
+    filterGroup.field
+  );
+};
+export {
+  FilterGroup
+};
+//# sourceMappingURL=FilterGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterGroup.js","sources":["../../../../src/components/filterform/FilterGroup.tsx"],"sourcesContent":["import { Button } from '../button'\nimport { TrashIcon } from '@phosphor-icons/react'\nimport { FilterInput } from './FilterInput'\nimport cx from 'classnames'\nimport s from './FiltersForm.module.css'\nimport { FilterConfig } from '.'\nimport { FormFilter } from './types'\n\ntype FilterGroupProps = {\n  filterGroup: {\n    field: string\n    filters: FormFilter[]\n  }\n  groupIndex: number\n  filterConfigs: FilterConfig[]\n  className?: string\n  onRemove: (index: number) => void\n  onChange: (filter: FormFilter, index: number) => void\n  onDone: (filter: FormFilter, index: number) => void\n}\n\nexport const FilterGroup = ({\n  filterGroup,\n  groupIndex,\n  filterConfigs,\n  className,\n  onRemove,\n  onChange,\n  onDone,\n}: FilterGroupProps) => {\n  return (\n    <div\n      key={filterGroup.field}\n      className={cx(\n        'flex flex-col gap-4',\n        {\n          [s.filterFormGroupContainer]: filterGroup.filters.length > 1,\n          'p-3': filterGroup.filters.length > 1,\n          'pr-3': filterGroup.filters.length === 1,\n        },\n        className\n      )}\n    >\n      {filterGroup.filters.map((filter, filterIndex) => (\n        <div\n          key={`${groupIndex}:${filterIndex}-input-container`}\n          className=\"flex items-center justify-between\"\n        >\n          {filterIndex >= 1 && (\n            <span className={cx(s.filterFormConjunction, 'mr-3')}>and</span>\n          )}\n          <FilterInput\n            key={`${groupIndex}:${filterIndex}`}\n            value={filter}\n            filterConfigs={filterConfigs}\n            className=\"flex-1\"\n            onChange={(filter) => onChange(filter, filterIndex)}\n            onBlur={(filter) => onDone(filter, filterIndex)}\n          />\n          <Button\n            type=\"text\"\n            icon={<TrashIcon />}\n            onClick={() => onRemove(filterIndex)}\n          />\n        </div>\n      ))}\n    </div>\n  )\n}\n"],"names":["filter"],"mappings":";;;;;;AAqBO,MAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAwB;AACtB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,UACE,CAAC,EAAE,wBAAwB,GAAG,YAAY,QAAQ,SAAS;AAAA,UAC3D,OAAO,YAAY,QAAQ,SAAS;AAAA,UACpC,QAAQ,YAAY,QAAQ,WAAW;AAAA,QAAA;AAAA,QAEzC;AAAA,MAAA;AAAA,MAGD,UAAA,YAAY,QAAQ,IAAI,CAAC,QAAQ,gBAChC;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,WAAU;AAAA,UAET,UAAA;AAAA,YAAA,eAAe,yBACb,QAAA,EAAK,WAAW,GAAG,EAAE,uBAAuB,MAAM,GAAG,UAAA,MAAA,CAAG;AAAA,YAE3D;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,OAAO;AAAA,gBACP;AAAA,gBACA,WAAU;AAAA,gBACV,UAAU,CAACA,YAAW,SAASA,SAAQ,WAAW;AAAA,gBAClD,QAAQ,CAACA,YAAW,OAAOA,SAAQ,WAAW;AAAA,cAAA;AAAA,cALzC,GAAG,UAAU,IAAI,WAAW;AAAA,YAAA;AAAA,YAOnC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,0BAAO,WAAA,EAAU;AAAA,gBACjB,SAAS,MAAM,SAAS,WAAW;AAAA,cAAA;AAAA,YAAA;AAAA,UACrC;AAAA,QAAA;AAAA,QAlBK,GAAG,UAAU,IAAI,WAAW;AAAA,MAAA,CAoBpC;AAAA,IAAA;AAAA,IAjCI,YAAY;AAAA,EAAA;AAoCvB;"}

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

@@ -0,0 +1,175 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const useFilterField = require("./useFilterField.cjs");
+const antd = require("antd");
+const cx = require("classnames");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const FilterInput = ({
+  value,
+  filterConfigs,
+  onChange,
+  onBlur,
+  className,
+  size = "middle"
+}) => {
+  const {
+    filter,
+    operatorOptions,
+    valueInputConfig,
+    handleFieldChange,
+    handleOperatorChange,
+    handleValuesChange
+  } = useFilterField.useFilterField({
+    filterConfigs,
+    filter: value
+  });
+  const fieldOptions = filterConfigs.map((config) => ({
+    label: config.label,
+    value: config.field,
+    disabled: config.disabled
+  }));
+  const handleBlur = () => {
+    if (filter) {
+      onBlur == null ? void 0 : onBlur(filter);
+    }
+  };
+  const isInitialMount = React__namespace.useRef(true);
+  const prevFilterRef = React__namespace.useRef(filter);
+  React__namespace.useEffect(() => {
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+      prevFilterRef.current = filter;
+      return;
+    }
+    if (filter && filter !== prevFilterRef.current) {
+      prevFilterRef.current = filter;
+      onChange == null ? void 0 : onChange(filter);
+    }
+  }, [filter, onChange]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx("grid grid-cols-3 gap-2", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      antd.Select,
+      {
+        options: fieldOptions,
+        value: filter == null ? void 0 : filter.field,
+        showSearch: true,
+        optionFilterProp: "label",
+        onChange: handleFieldChange,
+        size
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-2 flex gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        antd.Select,
+        {
+          options: operatorOptions,
+          value: filter == null ? void 0 : filter.operator,
+          onChange: handleOperatorChange,
+          onBlur: handleBlur,
+          size,
+          popupMatchSelectWidth: false
+        }
+      ),
+      valueInputConfig && /* @__PURE__ */ jsxRuntime.jsx(
+        ValueInput,
+        {
+          valueInputConfig,
+          values: filter == null ? void 0 : filter.values,
+          onChange: handleValuesChange,
+          onBlur: handleBlur,
+          size
+        }
+      )
+    ] })
+  ] });
+};
+const ValueInput = ({
+  valueInputConfig,
+  values,
+  onChange,
+  onBlur,
+  size
+}) => {
+  const handleChange = (value) => {
+    if (value === null) {
+      onChange([]);
+    } else {
+      onChange([value]);
+    }
+  };
+  const handleNumberChange = (value, index) => {
+    const newValues = [
+      ...values ?? []
+    ];
+    newValues[index] = value;
+    onChange(newValues);
+  };
+  switch (valueInputConfig.type) {
+    case "select":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        antd.Select,
+        {
+          options: valueInputConfig.valueOptions,
+          onChange,
+          showSearch: true,
+          allowClear: true,
+          mode: "multiple",
+          onBlur,
+          value: values,
+          className: "w-full truncate",
+          size,
+          optionFilterProp: "label"
+        }
+      );
+    case "number":
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-2 grow", children: Array.from({ length: valueInputConfig.inputCount }).map(
+        (_, index) => /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
+          index !== 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "my-auto", children: "and" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            antd.InputNumber,
+            {
+              onChange: (value) => handleNumberChange(value, index),
+              onBlur,
+              value: values == null ? void 0 : values[index],
+              className: "basis-1/2",
+              size,
+              ...valueInputConfig.numberOptions ?? {}
+            }
+          )
+        ] }, `number-input-${index}`)
+      ) });
+    case "text":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        antd.Input,
+        {
+          onBlur,
+          value: (values == null ? void 0 : values[0]) ?? void 0,
+          onChange: (e) => handleChange(e.target.value),
+          className: "w-full",
+          size
+        }
+      );
+    default:
+      return null;
+  }
+};
+exports.FilterInput = FilterInput;
+//# sourceMappingURL=FilterInput.cjs.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,158 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { useFilterField } from "./useFilterField.js";
+import { Select, Input, InputNumber } from "antd";
+import cx from "classnames";
+const FilterInput = ({
+  value,
+  filterConfigs,
+  onChange,
+  onBlur,
+  className,
+  size = "middle"
+}) => {
+  const {
+    filter,
+    operatorOptions,
+    valueInputConfig,
+    handleFieldChange,
+    handleOperatorChange,
+    handleValuesChange
+  } = useFilterField({
+    filterConfigs,
+    filter: value
+  });
+  const fieldOptions = filterConfigs.map((config) => ({
+    label: config.label,
+    value: config.field,
+    disabled: config.disabled
+  }));
+  const handleBlur = () => {
+    if (filter) {
+      onBlur == null ? void 0 : onBlur(filter);
+    }
+  };
+  const isInitialMount = React.useRef(true);
+  const prevFilterRef = React.useRef(filter);
+  React.useEffect(() => {
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+      prevFilterRef.current = filter;
+      return;
+    }
+    if (filter && filter !== prevFilterRef.current) {
+      prevFilterRef.current = filter;
+      onChange == null ? void 0 : onChange(filter);
+    }
+  }, [filter, onChange]);
+  return /* @__PURE__ */ jsxs("div", { className: cx("grid grid-cols-3 gap-2", className), children: [
+    /* @__PURE__ */ jsx(
+      Select,
+      {
+        options: fieldOptions,
+        value: filter == null ? void 0 : filter.field,
+        showSearch: true,
+        optionFilterProp: "label",
+        onChange: handleFieldChange,
+        size
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "col-span-2 flex gap-2", children: [
+      /* @__PURE__ */ jsx(
+        Select,
+        {
+          options: operatorOptions,
+          value: filter == null ? void 0 : filter.operator,
+          onChange: handleOperatorChange,
+          onBlur: handleBlur,
+          size,
+          popupMatchSelectWidth: false
+        }
+      ),
+      valueInputConfig && /* @__PURE__ */ jsx(
+        ValueInput,
+        {
+          valueInputConfig,
+          values: filter == null ? void 0 : filter.values,
+          onChange: handleValuesChange,
+          onBlur: handleBlur,
+          size
+        }
+      )
+    ] })
+  ] });
+};
+const ValueInput = ({
+  valueInputConfig,
+  values,
+  onChange,
+  onBlur,
+  size
+}) => {
+  const handleChange = (value) => {
+    if (value === null) {
+      onChange([]);
+    } else {
+      onChange([value]);
+    }
+  };
+  const handleNumberChange = (value, index) => {
+    const newValues = [
+      ...values ?? []
+    ];
+    newValues[index] = value;
+    onChange(newValues);
+  };
+  switch (valueInputConfig.type) {
+    case "select":
+      return /* @__PURE__ */ jsx(
+        Select,
+        {
+          options: valueInputConfig.valueOptions,
+          onChange,
+          showSearch: true,
+          allowClear: true,
+          mode: "multiple",
+          onBlur,
+          value: values,
+          className: "w-full truncate",
+          size,
+          optionFilterProp: "label"
+        }
+      );
+    case "number":
+      return /* @__PURE__ */ jsx("div", { className: "flex gap-2 grow", children: Array.from({ length: valueInputConfig.inputCount }).map(
+        (_, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+          index !== 0 && /* @__PURE__ */ jsx("span", { className: "my-auto", children: "and" }),
+          /* @__PURE__ */ jsx(
+            InputNumber,
+            {
+              onChange: (value) => handleNumberChange(value, index),
+              onBlur,
+              value: values == null ? void 0 : values[index],
+              className: "basis-1/2",
+              size,
+              ...valueInputConfig.numberOptions ?? {}
+            }
+          )
+        ] }, `number-input-${index}`)
+      ) });
+    case "text":
+      return /* @__PURE__ */ jsx(
+        Input,
+        {
+          onBlur,
+          value: (values == null ? void 0 : values[0]) ?? void 0,
+          onChange: (e) => handleChange(e.target.value),
+          className: "w-full",
+          size
+        }
+      );
+    default:
+      return null;
+  }
+};
+export {
+  FilterInput
+};
+//# sourceMappingURL=FilterInput.js.map

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

@@ -0,0 +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":"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"}