@janbox/storefront-ui 1.0.14 → 1.0.16

package/dist/lib/dialog/dialog-header/index.d.ts

@@ -1,2 +1,3 @@
 export * from './dialog-header';
 export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/dialog/dialog-header/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/dialog/dialog-header/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC"}

package/dist/lib/dialog/dialog-header/types.d.ts

@@ -2,3 +2,4 @@ import { HTMLAttributes } from 'react';
 export interface DialogHeaderProps extends HTMLAttributes<HTMLDivElement> {
     closeable?: boolean;
 }
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/dialog/dialog-header/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/dialog/dialog-header/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACvE,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB"}

package/dist/lib/dialog/index.d.ts

@@ -3,3 +3,4 @@ export * from './dialog-body';
 export * from './dialog-close';
 export * from './dialog-footer';
 export * from './dialog-header';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/dialog/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/dialog/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC"}

package/dist/lib/drawer/drawer/drawer.d.ts

@@ -1,2 +1,3 @@
 import { DrawerProps } from './types';
 export declare const Drawer: ({ children, placement, ...props }: DrawerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=drawer.d.ts.map

package/dist/lib/drawer/drawer/drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../../src/lib/drawer/drawer/drawer.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAKtC,eAAO,MAAM,MAAM,sCAAgD,WAAW,qDAoF7E,CAAC"}

package/dist/lib/drawer/drawer/drawer.js

@@ -0,0 +1,100 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { useMemo } from "react";
+import { motion } from "motion/react";
+import { FLOATING_Z_INDEX } from "../../../theme/index.js";
+import { Floating } from "../../floating/floating/floating.js";
+import { FloatingContent } from "../../floating/floating-content/floating-content.js";
+const Drawer = ({ children, placement = "left", ...props }) => {
+  const initial = useMemo(() => {
+    switch (placement) {
+      case "left":
+        return { x: "-100%" };
+      case "right":
+        return { x: "100%" };
+      case "top":
+        return { y: "-100%" };
+      case "bottom":
+        return { y: "100%" };
+    }
+  }, [placement]);
+  const animate = useMemo(() => {
+    switch (placement) {
+      case "left":
+      case "right":
+        return { x: 0 };
+      case "top":
+      case "bottom":
+        return { y: 0 };
+    }
+  }, [placement]);
+  return /* @__PURE__ */ jsx(
+    Floating,
+    {
+      dismissProps: {
+        enabled: true
+      },
+      ...props,
+      children: /* @__PURE__ */ jsxs(
+        FloatingContent,
+        {
+          floatingOverlayProps: {
+            disabled: false,
+            lockScroll: true,
+            style: {
+              zIndex: FLOATING_Z_INDEX
+            }
+          },
+          css: {
+            maxHeight: "100%",
+            maxWidth: "100%",
+            overflow: "hidden",
+            display: "flex",
+            flexDirection: "column"
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                css: {
+                  position: "fixed",
+                  top: 0,
+                  right: 0,
+                  bottom: 0,
+                  left: 0,
+                  backgroundColor: "rgba(0, 0, 0, 0.4)",
+                  pointerEvents: "none"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                initial,
+                animate,
+                exit: initial,
+                transition: {
+                  duration: 0.2,
+                  ease: "easeInOut"
+                },
+                css: [
+                  {
+                    position: "fixed",
+                    backgroundColor: "white"
+                  },
+                  placement === "left" && { top: 0, bottom: 0, left: 0 },
+                  placement === "right" && { top: 0, bottom: 0, right: 0 },
+                  placement === "top" && { left: 0, right: 0, top: 0 },
+                  placement === "bottom" && { left: 0, right: 0, bottom: 0 }
+                ],
+                children
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  Drawer
+};

package/dist/lib/drawer/drawer/helpers.d.ts

@@ -1 +1,2 @@
-export declare const useDrawerContext: () => import("../../floating").FloatingContextValue;
+export declare const useDrawerContext: () => import('../../floating').FloatingContextValue;
+//# sourceMappingURL=helpers.d.ts.map

package/dist/lib/drawer/drawer/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/lib/drawer/drawer/helpers.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,qDAE5B,CAAC"}

package/dist/lib/drawer/drawer/helpers.js

@@ -1,4 +1,7 @@
-import { useFloatingContext } from '../../floating';
-export const useDrawerContext = () => {
-    return useFloatingContext();
+import { useFloatingContext } from "../../floating/floating/helpers.js";
+const useDrawerContext = () => {
+  return useFloatingContext();
+};
+export {
+  useDrawerContext
 };

package/dist/lib/drawer/drawer/index.d.ts

@@ -1,3 +1,4 @@
 export * from './drawer';
 export * from './types';
 export * from './helpers';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/drawer/drawer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/drawer/drawer/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC"}

package/dist/lib/drawer/drawer/types.d.ts

@@ -5,3 +5,4 @@ export type DrawerPlacement = Extract<Placement, 'left' | 'right' | 'top' | 'bot
 export type DrawerProps = ShallowMerge<FloatingProps, {
     placement?: DrawerPlacement;
 }>;
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/drawer/drawer/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/drawer/drawer/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE/C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,MAAM,MAAM,eAAe,GAAG,OAAO,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC,CAAC;AAEtF,MAAM,MAAM,WAAW,GAAG,YAAY,CACpC,aAAa,EACb;IACE,SAAS,CAAC,EAAE,eAAe,CAAC;CAC7B,CACF,CAAC"}

package/dist/lib/drawer/drawer-close/drawer-close.d.ts

@@ -1 +1,2 @@
-export declare const DrawerClose: import("react").ForwardRefExoticComponent<Omit<import("../../floating").FloatingCloseProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DrawerClose: import('react').ForwardRefExoticComponent<Omit<import('../../floating').FloatingCloseProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=drawer-close.d.ts.map

package/dist/lib/drawer/drawer-close/drawer-close.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-close.d.ts","sourceRoot":"","sources":["../../../../src/lib/drawer/drawer-close/drawer-close.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,qJAAgB,CAAC"}

package/dist/lib/drawer/drawer-close/drawer-close.js

@@ -0,0 +1,5 @@
+import { FloatingClose } from "../../floating/floating-close/floating-close.js";
+const DrawerClose = FloatingClose;
+export {
+  DrawerClose
+};

package/dist/lib/drawer/drawer-close/index.d.ts

@@ -1,2 +1,3 @@
 export * from './drawer-close';
 export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/drawer/drawer-close/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/drawer/drawer-close/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC"}

package/dist/lib/drawer/drawer-close/types.d.ts

@@ -1,2 +1,3 @@
 import { FloatingCloseProps } from '../../floating';
 export type DrawerCloseProps = FloatingCloseProps;
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/drawer/drawer-close/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/drawer/drawer-close/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAEpD,MAAM,MAAM,gBAAgB,GAAG,kBAAkB,CAAC"}

package/dist/lib/drawer/index.d.ts

@@ -1,2 +1,3 @@
 export * from './drawer';
 export * from './drawer-close';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/drawer/index.d.ts.map

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

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

@@ -1,2 +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,106 @@
+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 "../../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.d.ts

@@ -1,2 +1,3 @@
 import { FilterPanelProps } from './types';
 export declare const FilterPanel: ({ label, defaultOpen, ...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,qCAA6C,gBAAgB,qDA2BpF,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 "../../hooks/use-toggle/index.js";
+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, ...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

@@ -1 +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.d.ts

@@ -1,2 +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,77 @@
+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 "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.d.ts

@@ -1,2 +1,3 @@
 import { InputTextFilterPanelProps } from './types';
 export declare const InputTextFilterPanel: ({ queryParam, fieldType: _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,oDAAqD,yBAAyB,qDAwC9G,CAAC"}

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

@@ -0,0 +1,46 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { isString } from "lodash-es";
+import { useQueryParams } from "../../hooks/use-query-params.js";
+import "react";
+import "../../theme/palette.js";
+import { StringParamParser } from "../../utils/query-params.js";
+import { Input } from "../input/input.js";
+const InputTextFilterPanel = ({ queryParam, fieldType: _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 });
+};
+export {
+  InputTextFilterPanel
+};

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

@@ -1,2 +1,3 @@
 import { RadioFilterPanelProps } from './types';
 export declare const RadioFilterPanel: ({ options, inputSearchProps: _inputSearchProps, value, onChange, queryParam, fallbackValue, }: RadioFilterPanelProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=radio-filter-panel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio-filter-panel.d.ts","sourceRoot":"","sources":["../../../src/lib/filter-panel/radio-filter-panel.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAYhD,eAAO,MAAM,gBAAgB,kGAO1B,qBAAqB,qDAyFvB,CAAC"}

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

@@ -0,0 +1,94 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { useId, useState, useMemo } from "react";
+import { trimStart, isNil } from "lodash-es";
+import { VirtualizedList } from "../../components/virtualized-list.js";
+import { useQueryParams } from "../../hooks/use-query-params.js";
+import "../../theme/palette.js";
+import { matchSearch } from "../../utils/common.js";
+import { StringParamParser } from "../../utils/query-params.js";
+import { RadioButton } from "../radio-button/radio-button.js";
+import { Input } from "../input/input.js";
+const ROW_HEIGHT = 32;
+const DISPLAY_ROW_COUNT = 5;
+const RadioFilterPanel = ({
+  options,
+  inputSearchProps: _inputSearchProps,
+  value,
+  onChange,
+  queryParam,
+  fallbackValue
+}) => {
+  const { enabled: searchEnabled = false, ...inputSearchProps } = _inputSearchProps ?? {};
+  const uniqueId = useId();
+  const [inputValue, setInputValue] = useState("");
+  const { queryParams, setQueryParams } = useQueryParams(
+    queryParam ? {
+      [queryParam.key]: {
+        parser(value2) {
+          return new StringParamParser(value2).parse();
+        }
+      }
+    } : {}
+  );
+  const valueByQueryParam = queryParam ? queryParams[queryParam.key] : void 0;
+  const finalValue = value ?? valueByQueryParam ?? fallbackValue;
+  const onInputChange = (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 onRadioChange = (e) => {
+      if (isNil(rowData)) return;
+      if (queryParam) {
+        setQueryParams(
+          {
+            [queryParam.key]: queryParam.transform ? queryParam.transform(rowData.value) : rowData.value
+          },
+          {
+            preventScrollReset: true
+          }
+        );
+      }
+      onChange == null ? void 0 : onChange(e);
+    };
+    return /* @__PURE__ */ jsx("div", { css: { paddingTop: "0.25rem", paddingBottom: "0.25rem" }, children: /* @__PURE__ */ jsx(
+      RadioButton,
+      {
+        name: uniqueId,
+        checked: (rowData == null ? void 0 : rowData.isChecked) ?? finalValue === (rowData == null ? void 0 : rowData.value),
+        value: rowData == null ? void 0 : rowData.value,
+        onChange: onRadioChange,
+        children: rowData == null ? void 0 : rowData.label
+      }
+    ) });
+  };
+  return /* @__PURE__ */ jsxs("div", { children: [
+    searchEnabled && /* @__PURE__ */ jsx("div", { css: { marginBottom: "0.5rem" }, children: /* @__PURE__ */ jsx(Input, { xs: { ...inputSearchProps.xs }, value: inputValue, ...inputSearchProps, onChange: onInputChange }) }),
+    /* @__PURE__ */ jsx(
+      VirtualizedList,
+      {
+        css: { paddingLeft: "0.5rem", paddingRight: "0.5rem" },
+        options: {
+          count: displayOptions.length,
+          estimateSize: () => ROW_HEIGHT
+        },
+        RowComponent,
+        style: {
+          maxHeight: ROW_HEIGHT * DISPLAY_ROW_COUNT
+        }
+      }
+    )
+  ] });
+};
+export {
+  RadioFilterPanel
+};

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

@@ -72,3 +72,4 @@ export type FilterPanelProps = {
     className?: string;
     isLoading?: boolean;
 } & (CheckboxFilterPanelProps | RadioFilterPanelProps | InputRangeFilterPanelProps | InputTextFilterPanelProps);
+//# sourceMappingURL=types.d.ts.map