@janbox/storefront-ui 1.0.0

package/dist/lib/filter-panel/checkbox-filter-panel.cjs

@@ -0,0 +1,107 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const react = require("react");
+const lodashEs = require("lodash-es");
+const virtualizedList = require("../../components/virtualized-list.cjs");
+const useQueryParams = require("../../hooks/use-query-params.cjs");
+require("clsx");
+require("../../theme/palette.cjs");
+const common = require("../../utils/common.cjs");
+const queryParams = require("../../utils/query-params.cjs");
+const checkbox = require("../checkbox/checkbox.cjs");
+const input = require("../input/input.cjs");
+const ROW_HEIGHT = 32;
+const DISPLAY_ROW_COUNT = 5;
+const CheckboxFilterPanel = ({
+  value,
+  options,
+  inputSearchProps: _inputSearchProps,
+  onChange,
+  queryParam,
+  name,
+  listProps
+}) => {
+  const { enabled: searchEnabled = false, ...inputSearchProps } = _inputSearchProps ?? {};
+  const [inputValue, setInputValue] = react.useState("");
+  const { queryParams: queryParams$1, setQueryParams } = useQueryParams.useQueryParams(
+    queryParam ? {
+      [queryParam.key]: {
+        parser(value2) {
+          return new queryParams.ArrayParamParser(value2).parse();
+        }
+      }
+    } : {}
+  );
+  const valueSet = react.useMemo(() => {
+    const queryParamKey = queryParam == null ? void 0 : queryParam.key;
+    const valueByQueryParam = queryParamKey ? queryParams$1[queryParamKey] : void 0;
+    return new Set(value ?? valueByQueryParam ?? []);
+  }, [queryParam == null ? void 0 : queryParam.key, queryParams$1, value]);
+  const onSearchChange = (e) => {
+    var _a;
+    e.target.value = lodashEs.trimStart(e.target.value);
+    setInputValue(e.target.value);
+    (_a = inputSearchProps.onChange) == null ? void 0 : _a.call(inputSearchProps, e);
+  };
+  const displayOptions = react.useMemo(() => {
+    if (!inputValue) {
+      return options;
+    }
+    return options.filter((option) => common.matchSearch(option.searchLabel ?? String(option.label), inputValue));
+  }, [inputValue, options]);
+  const RowComponent = ({ row }) => {
+    const rowData = displayOptions.at(row.index);
+    const onCheckboxChange = (e) => {
+      if (queryParam) {
+        const currentList = queryParams$1[queryParam.key] ?? [];
+        const targetValue = e.currentTarget.value;
+        const nextList = e.target.checked ? [...currentList, targetValue] : currentList.filter((value2) => value2 !== targetValue);
+        setQueryParams(
+          {
+            [queryParam.key]: nextList.length ? nextList : void 0
+          },
+          {
+            preventScrollReset: true
+          }
+        );
+      }
+      onChange == null ? void 0 : onChange(e);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { css: { paddingTop: 4, paddingBottom: 4 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      checkbox.Checkbox,
+      {
+        containerProps: {
+          style: {
+            width: "100%"
+          }
+        },
+        name,
+        checked: rowData ? rowData.isChecked ?? valueSet.has(rowData.value) : false,
+        value: rowData == null ? void 0 : rowData.value,
+        onChange: onCheckboxChange,
+        children: rowData == null ? void 0 : rowData.label
+      }
+    ) });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    searchEnabled && /* @__PURE__ */ jsxRuntime.jsx("div", { css: { marginBottom: 8 }, children: /* @__PURE__ */ jsxRuntime.jsx(input.Input, { xs: { ...inputSearchProps.xs }, value: inputValue, ...inputSearchProps, onChange: onSearchChange }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      virtualizedList.VirtualizedList,
+      {
+        options: {
+          count: displayOptions.length,
+          estimateSize: () => ROW_HEIGHT
+        },
+        RowComponent,
+        style: {
+          maxHeight: ROW_HEIGHT * DISPLAY_ROW_COUNT,
+          ...listProps == null ? void 0 : listProps.style
+        },
+        css: { paddingLeft: 8, paddingRight: 8 },
+        ...listProps
+      }
+    )
+  ] });
+};
+exports.CheckboxFilterPanel = CheckboxFilterPanel;

package/dist/lib/filter-panel/checkbox-filter-panel.d.ts

@@ -0,0 +1,3 @@
+import { CheckboxFilterPanelProps } from './types';
+export declare const CheckboxFilterPanel: ({ value, options, inputSearchProps: _inputSearchProps, onChange, queryParam, name, listProps, }: CheckboxFilterPanelProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=checkbox-filter-panel.d.ts.map

package/dist/lib/filter-panel/checkbox-filter-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-filter-panel.d.ts","sourceRoot":"","sources":["../../../src/lib/filter-panel/checkbox-filter-panel.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAYnD,eAAO,MAAM,mBAAmB,oGAQ7B,wBAAwB,qDAwG1B,CAAC"}

package/dist/lib/filter-panel/checkbox-filter-panel.js

@@ -0,0 +1,107 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { useState, useMemo } from "react";
+import { trimStart } from "lodash-es";
+import { VirtualizedList } from "../../components/virtualized-list.js";
+import { useQueryParams } from "../../hooks/use-query-params.js";
+import "clsx";
+import "../../theme/palette.js";
+import { matchSearch } from "../../utils/common.js";
+import { ArrayParamParser } from "../../utils/query-params.js";
+import { Checkbox } from "../checkbox/checkbox.js";
+import { Input } from "../input/input.js";
+const ROW_HEIGHT = 32;
+const DISPLAY_ROW_COUNT = 5;
+const CheckboxFilterPanel = ({
+  value,
+  options,
+  inputSearchProps: _inputSearchProps,
+  onChange,
+  queryParam,
+  name,
+  listProps
+}) => {
+  const { enabled: searchEnabled = false, ...inputSearchProps } = _inputSearchProps ?? {};
+  const [inputValue, setInputValue] = useState("");
+  const { queryParams, setQueryParams } = useQueryParams(
+    queryParam ? {
+      [queryParam.key]: {
+        parser(value2) {
+          return new ArrayParamParser(value2).parse();
+        }
+      }
+    } : {}
+  );
+  const valueSet = useMemo(() => {
+    const queryParamKey = queryParam == null ? void 0 : queryParam.key;
+    const valueByQueryParam = queryParamKey ? queryParams[queryParamKey] : void 0;
+    return new Set(value ?? valueByQueryParam ?? []);
+  }, [queryParam == null ? void 0 : queryParam.key, queryParams, value]);
+  const onSearchChange = (e) => {
+    var _a;
+    e.target.value = trimStart(e.target.value);
+    setInputValue(e.target.value);
+    (_a = inputSearchProps.onChange) == null ? void 0 : _a.call(inputSearchProps, e);
+  };
+  const displayOptions = useMemo(() => {
+    if (!inputValue) {
+      return options;
+    }
+    return options.filter((option) => matchSearch(option.searchLabel ?? String(option.label), inputValue));
+  }, [inputValue, options]);
+  const RowComponent = ({ row }) => {
+    const rowData = displayOptions.at(row.index);
+    const onCheckboxChange = (e) => {
+      if (queryParam) {
+        const currentList = queryParams[queryParam.key] ?? [];
+        const targetValue = e.currentTarget.value;
+        const nextList = e.target.checked ? [...currentList, targetValue] : currentList.filter((value2) => value2 !== targetValue);
+        setQueryParams(
+          {
+            [queryParam.key]: nextList.length ? nextList : void 0
+          },
+          {
+            preventScrollReset: true
+          }
+        );
+      }
+      onChange == null ? void 0 : onChange(e);
+    };
+    return /* @__PURE__ */ jsx("div", { css: { paddingTop: 4, paddingBottom: 4 }, children: /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        containerProps: {
+          style: {
+            width: "100%"
+          }
+        },
+        name,
+        checked: rowData ? rowData.isChecked ?? valueSet.has(rowData.value) : false,
+        value: rowData == null ? void 0 : rowData.value,
+        onChange: onCheckboxChange,
+        children: rowData == null ? void 0 : rowData.label
+      }
+    ) });
+  };
+  return /* @__PURE__ */ jsxs("div", { children: [
+    searchEnabled && /* @__PURE__ */ jsx("div", { css: { marginBottom: 8 }, children: /* @__PURE__ */ jsx(Input, { xs: { ...inputSearchProps.xs }, value: inputValue, ...inputSearchProps, onChange: onSearchChange }) }),
+    /* @__PURE__ */ jsx(
+      VirtualizedList,
+      {
+        options: {
+          count: displayOptions.length,
+          estimateSize: () => ROW_HEIGHT
+        },
+        RowComponent,
+        style: {
+          maxHeight: ROW_HEIGHT * DISPLAY_ROW_COUNT,
+          ...listProps == null ? void 0 : listProps.style
+        },
+        css: { paddingLeft: 8, paddingRight: 8 },
+        ...listProps
+      }
+    )
+  ] });
+};
+export {
+  CheckboxFilterPanel
+};

package/dist/lib/filter-panel/filter-panel.cjs

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const react = require("react");
+const usehooksTs = require("usehooks-ts");
+const checkboxFilterPanel = require("./checkbox-filter-panel.cjs");
+const inputRangeFilterPanel = require("./input-range-filter-panel.cjs");
+const inputTextFilterPanel = require("./input-text-filter-panel.cjs");
+const radioFilterPanel = require("./radio-filter-panel.cjs");
+const arrowDown = require("../../assets/svg/arrow-down.svg.cjs");
+const collapse = require("../collapse/collapse.cjs");
+const icon = require("../icon/icon.cjs");
+const FilterPanel = ({ label, defaultOpen = true, className, ...props }) => {
+  const [open, toggle] = usehooksTs.useToggle(defaultOpen);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { css: { display: "flex", flexDirection: "column", gap: 8 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("button", { css: { display: "flex", alignItems: "center", gap: 8, textAlign: "left" }, onClick: toggle, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { css: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", fontWeight: 500 }, children: react.isValidElement(label) ? label : /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        icon.Icon,
+        {
+          css: {
+            transition: "transform 150ms",
+            ...open ? { transform: "rotate(-180deg)" } : {}
+          },
+          source: arrowDown
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(collapse.Collapse, { open, children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      props.fieldType === "checkbox" && /* @__PURE__ */ jsxRuntime.jsx(checkboxFilterPanel.CheckboxFilterPanel, { ...props }),
+      props.fieldType === "radio" && /* @__PURE__ */ jsxRuntime.jsx(radioFilterPanel.RadioFilterPanel, { ...props }),
+      props.fieldType === "input-range" && /* @__PURE__ */ jsxRuntime.jsx(inputRangeFilterPanel.InputRangeFilterPanel, { ...props }),
+      props.fieldType === "input-text" && /* @__PURE__ */ jsxRuntime.jsx(inputTextFilterPanel.InputTextFilterPanel, { ...props })
+    ] }) })
+  ] });
+};
+exports.FilterPanel = FilterPanel;

package/dist/lib/filter-panel/filter-panel.d.ts

@@ -0,0 +1,3 @@
+import { FilterPanelProps } from './types';
+export declare const FilterPanel: ({ label, defaultOpen, className, ...props }: FilterPanelProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=filter-panel.d.ts.map

package/dist/lib/filter-panel/filter-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-panel.d.ts","sourceRoot":"","sources":["../../../src/lib/filter-panel/filter-panel.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAO3C,eAAO,MAAM,WAAW,gDAAwD,gBAAgB,qDAyB/F,CAAC"}

package/dist/lib/filter-panel/filter-panel.js

@@ -0,0 +1,37 @@
+import { jsxs, jsx, Fragment } from "@emotion/react/jsx-runtime";
+import { isValidElement } from "react";
+import { useToggle } from "usehooks-ts";
+import { CheckboxFilterPanel } from "./checkbox-filter-panel.js";
+import { InputRangeFilterPanel } from "./input-range-filter-panel.js";
+import { InputTextFilterPanel } from "./input-text-filter-panel.js";
+import { RadioFilterPanel } from "./radio-filter-panel.js";
+import ArrowDownIcon from "../../assets/svg/arrow-down.svg.js";
+import { Collapse } from "../collapse/collapse.js";
+import { Icon } from "../icon/icon.js";
+const FilterPanel = ({ label, defaultOpen = true, className, ...props }) => {
+  const [open, toggle] = useToggle(defaultOpen);
+  return /* @__PURE__ */ jsxs("div", { css: { display: "flex", flexDirection: "column", gap: 8 }, children: [
+    /* @__PURE__ */ jsxs("button", { css: { display: "flex", alignItems: "center", gap: 8, textAlign: "left" }, onClick: toggle, children: [
+      /* @__PURE__ */ jsx("div", { css: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", fontWeight: 500 }, children: isValidElement(label) ? label : /* @__PURE__ */ jsx("span", { children: label }) }),
+      /* @__PURE__ */ jsx(
+        Icon,
+        {
+          css: {
+            transition: "transform 150ms",
+            ...open ? { transform: "rotate(-180deg)" } : {}
+          },
+          source: ArrowDownIcon
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Collapse, { open, children: /* @__PURE__ */ jsxs(Fragment, { children: [
+      props.fieldType === "checkbox" && /* @__PURE__ */ jsx(CheckboxFilterPanel, { ...props }),
+      props.fieldType === "radio" && /* @__PURE__ */ jsx(RadioFilterPanel, { ...props }),
+      props.fieldType === "input-range" && /* @__PURE__ */ jsx(InputRangeFilterPanel, { ...props }),
+      props.fieldType === "input-text" && /* @__PURE__ */ jsx(InputTextFilterPanel, { ...props })
+    ] }) })
+  ] });
+};
+export {
+  FilterPanel
+};

package/dist/lib/filter-panel/index.d.ts

@@ -0,0 +1,2 @@
+export * from './filter-panel';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/filter-panel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/filter-panel/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/dist/lib/filter-panel/input-range-filter-panel.cjs

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const constants_index = require("../../constants/index.cjs");
+const useQueryParams = require("../../hooks/use-query-params.cjs");
+require("react");
+require("clsx");
+require("lodash-es");
+require("../../theme/palette.cjs");
+const queryParams = require("../../utils/query-params.cjs");
+const inputRange = require("../input-range/input-range.cjs");
+const InputRangeFilterPanel = ({ value, queryParam, placeholder, onChange }) => {
+  var _a, _b, _c, _d;
+  const { queryParams: queryParams$1, setQueryParams } = useQueryParams.useQueryParams({
+    ...((_a = queryParam == null ? void 0 : queryParam.from) == null ? void 0 : _a.key) ? {
+      [queryParam.from.key]: {
+        parser(value2) {
+          return new queryParams.NumberParamParser(value2).parse();
+        }
+      }
+    } : {},
+    ...((_b = queryParam == null ? void 0 : queryParam.to) == null ? void 0 : _b.key) ? {
+      [queryParam.to.key]: {
+        parser(value2) {
+          return new queryParams.NumberParamParser(value2).parse();
+        }
+      }
+    } : {}
+  });
+  const finalValue = {
+    from: (value == null ? void 0 : value.from) ?? (((_c = queryParam == null ? void 0 : queryParam.from) == null ? void 0 : _c.key) ? queryParams$1[queryParam.from.key] : void 0),
+    to: (value == null ? void 0 : value.to) ?? (((_d = queryParam == null ? void 0 : queryParam.to) == null ? void 0 : _d.key) ? queryParams$1[queryParam.to.key] : void 0)
+  };
+  const onInputRangeChange = (event, edge) => {
+    var _a2, _b2;
+    const valueAsNumber = event.target.valueAsNumber;
+    if (edge === "from" && ((_a2 = queryParam == null ? void 0 : queryParam.from) == null ? void 0 : _a2.key)) {
+      setQueryParams(
+        {
+          [queryParam.from.key]: isNaN(valueAsNumber) ? void 0 : valueAsNumber
+        },
+        {
+          preventScrollReset: true
+        }
+      );
+    }
+    if (edge === "to" && ((_b2 = queryParam == null ? void 0 : queryParam.to) == null ? void 0 : _b2.key)) {
+      setQueryParams(
+        {
+          [queryParam.to.key]: isNaN(valueAsNumber) ? void 0 : valueAsNumber
+        },
+        {
+          preventScrollReset: true
+        }
+      );
+    }
+    onChange == null ? void 0 : onChange(event, edge);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    inputRange.InputRange,
+    {
+      onChange: onInputRangeChange,
+      inputs: [
+        {
+          debounce: constants_index.TYPING_DEBOUNCE,
+          value: finalValue.from ?? "",
+          placeholder: placeholder == null ? void 0 : placeholder.from
+        },
+        {
+          debounce: constants_index.TYPING_DEBOUNCE,
+          value: finalValue.to ?? "",
+          placeholder: placeholder == null ? void 0 : placeholder.to
+        }
+      ]
+    }
+  );
+};
+exports.InputRangeFilterPanel = InputRangeFilterPanel;

package/dist/lib/filter-panel/input-range-filter-panel.d.ts

@@ -0,0 +1,3 @@
+import { InputRangeFilterPanelProps } from './types';
+export declare const InputRangeFilterPanel: ({ value, queryParam, placeholder, onChange }: InputRangeFilterPanelProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=input-range-filter-panel.d.ts.map

package/dist/lib/filter-panel/input-range-filter-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-range-filter-panel.d.ts","sourceRoot":"","sources":["../../../src/lib/filter-panel/input-range-filter-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAC;AASrD,eAAO,MAAM,qBAAqB,iDAAkD,0BAA0B,qDAuE7G,CAAC"}

package/dist/lib/filter-panel/input-range-filter-panel.js

@@ -0,0 +1,78 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { TYPING_DEBOUNCE } from "../../constants/index.js";
+import { useQueryParams } from "../../hooks/use-query-params.js";
+import "react";
+import "clsx";
+import "lodash-es";
+import "../../theme/palette.js";
+import { NumberParamParser } from "../../utils/query-params.js";
+import { InputRange } from "../input-range/input-range.js";
+const InputRangeFilterPanel = ({ value, queryParam, placeholder, onChange }) => {
+  var _a, _b, _c, _d;
+  const { queryParams, setQueryParams } = useQueryParams({
+    ...((_a = queryParam == null ? void 0 : queryParam.from) == null ? void 0 : _a.key) ? {
+      [queryParam.from.key]: {
+        parser(value2) {
+          return new NumberParamParser(value2).parse();
+        }
+      }
+    } : {},
+    ...((_b = queryParam == null ? void 0 : queryParam.to) == null ? void 0 : _b.key) ? {
+      [queryParam.to.key]: {
+        parser(value2) {
+          return new NumberParamParser(value2).parse();
+        }
+      }
+    } : {}
+  });
+  const finalValue = {
+    from: (value == null ? void 0 : value.from) ?? (((_c = queryParam == null ? void 0 : queryParam.from) == null ? void 0 : _c.key) ? queryParams[queryParam.from.key] : void 0),
+    to: (value == null ? void 0 : value.to) ?? (((_d = queryParam == null ? void 0 : queryParam.to) == null ? void 0 : _d.key) ? queryParams[queryParam.to.key] : void 0)
+  };
+  const onInputRangeChange = (event, edge) => {
+    var _a2, _b2;
+    const valueAsNumber = event.target.valueAsNumber;
+    if (edge === "from" && ((_a2 = queryParam == null ? void 0 : queryParam.from) == null ? void 0 : _a2.key)) {
+      setQueryParams(
+        {
+          [queryParam.from.key]: isNaN(valueAsNumber) ? void 0 : valueAsNumber
+        },
+        {
+          preventScrollReset: true
+        }
+      );
+    }
+    if (edge === "to" && ((_b2 = queryParam == null ? void 0 : queryParam.to) == null ? void 0 : _b2.key)) {
+      setQueryParams(
+        {
+          [queryParam.to.key]: isNaN(valueAsNumber) ? void 0 : valueAsNumber
+        },
+        {
+          preventScrollReset: true
+        }
+      );
+    }
+    onChange == null ? void 0 : onChange(event, edge);
+  };
+  return /* @__PURE__ */ jsx(
+    InputRange,
+    {
+      onChange: onInputRangeChange,
+      inputs: [
+        {
+          debounce: TYPING_DEBOUNCE,
+          value: finalValue.from ?? "",
+          placeholder: placeholder == null ? void 0 : placeholder.from
+        },
+        {
+          debounce: TYPING_DEBOUNCE,
+          value: finalValue.to ?? "",
+          placeholder: placeholder == null ? void 0 : placeholder.to
+        }
+      ]
+    }
+  );
+};
+export {
+  InputRangeFilterPanel
+};

package/dist/lib/filter-panel/input-text-filter-panel.cjs

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const lodashEs = require("lodash-es");
+const useQueryParams = require("../../hooks/use-query-params.cjs");
+require("react");
+require("clsx");
+require("../../theme/palette.cjs");
+const stylesheet = require("../../utils/stylesheet.cjs");
+const queryParams = require("../../utils/query-params.cjs");
+const input = require("../input/input.cjs");
+const InputTextFilterPanel = ({ queryParam, fieldType, ...props }) => {
+  const queryParamKey = queryParam == null ? void 0 : queryParam.key;
+  const { queryParams: queryParams$1, setQueryParams } = useQueryParams.useQueryParams(
+    queryParamKey ? {
+      [queryParamKey]: {
+        parser(value) {
+          return new queryParams.StringParamParser(value).parse();
+        }
+      }
+    } : {}
+  );
+  const finalValue = (() => {
+    if (lodashEs.isString(props.value)) {
+      return props.value;
+    }
+    if (queryParamKey) {
+      return queryParams$1[queryParamKey] ?? "";
+    }
+    return "";
+  })();
+  const onChange = (e) => {
+    var _a;
+    (_a = props.onChange) == null ? void 0 : _a.call(props, e);
+    if (queryParamKey) {
+      setQueryParams(
+        {
+          [queryParamKey]: e.target.value
+        },
+        {
+          preventScrollReset: true
+        }
+      );
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    input.Input,
+    {
+      name: queryParamKey,
+      ...props,
+      value: finalValue,
+      onChange,
+      className: stylesheet.cn(fieldType, props.className)
+    }
+  );
+};
+exports.InputTextFilterPanel = InputTextFilterPanel;

package/dist/lib/filter-panel/input-text-filter-panel.d.ts

@@ -0,0 +1,3 @@
+import { InputTextFilterPanelProps } from './types';
+export declare const InputTextFilterPanel: ({ queryParam, fieldType, ...props }: InputTextFilterPanelProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=input-text-filter-panel.d.ts.map

package/dist/lib/filter-panel/input-text-filter-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-text-filter-panel.d.ts","sourceRoot":"","sources":["../../../src/lib/filter-panel/input-text-filter-panel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAC;AAOpD,eAAO,MAAM,oBAAoB,wCAAyC,yBAAyB,qDAgDlG,CAAC"}

package/dist/lib/filter-panel/input-text-filter-panel.js

@@ -0,0 +1,57 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { isString } from "lodash-es";
+import { useQueryParams } from "../../hooks/use-query-params.js";
+import "react";
+import "clsx";
+import "../../theme/palette.js";
+import { cn } from "../../utils/stylesheet.js";
+import { StringParamParser } from "../../utils/query-params.js";
+import { Input } from "../input/input.js";
+const InputTextFilterPanel = ({ queryParam, fieldType, ...props }) => {
+  const queryParamKey = queryParam == null ? void 0 : queryParam.key;
+  const { queryParams, setQueryParams } = useQueryParams(
+    queryParamKey ? {
+      [queryParamKey]: {
+        parser(value) {
+          return new StringParamParser(value).parse();
+        }
+      }
+    } : {}
+  );
+  const finalValue = (() => {
+    if (isString(props.value)) {
+      return props.value;
+    }
+    if (queryParamKey) {
+      return queryParams[queryParamKey] ?? "";
+    }
+    return "";
+  })();
+  const onChange = (e) => {
+    var _a;
+    (_a = props.onChange) == null ? void 0 : _a.call(props, e);
+    if (queryParamKey) {
+      setQueryParams(
+        {
+          [queryParamKey]: e.target.value
+        },
+        {
+          preventScrollReset: true
+        }
+      );
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      name: queryParamKey,
+      ...props,
+      value: finalValue,
+      onChange,
+      className: cn(fieldType, props.className)
+    }
+  );
+};
+export {
+  InputTextFilterPanel
+};