@shefing/quickfilter 1.0.0

package/dist/FilterField.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+declare const FilterField: ({ field, onFilterChange, value: controlledValue, }: {
+    field: any;
+    onFilterChange: (fieldName: string, value: any) => void;
+    value: any;
+}) => React.JSX.Element;
+export default FilterField;
+//# sourceMappingURL=FilterField.d.ts.map

package/dist/FilterField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterField.d.ts","sourceRoot":"","sources":["../src/FilterField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAU1C,QAAA,MAAM,WAAW,uDAId;IACD,KAAK,EAAE,GAAG,CAAA;IACV,cAAc,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAA;IACvD,KAAK,EAAE,GAAG,CAAA;CACX,sBAsFA,CAAA;AAED,eAAe,WAAW,CAAA"}

package/dist/FilterField.js

@@ -0,0 +1,87 @@
+// FilterField.tsx (הקובץ המתוקן)
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useCallback } from 'react';
+import { useTranslation } from '@payloadcms/ui';
+import { rtlLanguages } from '@payloadcms/translations';
+import { DateFilter } from './filters/components/date-filter';
+import { SmallSelectFilter } from './filters/components/small-select-filter';
+import { SelectFilter } from './filters/components/select-filter';
+import { CheckboxFilter } from './filters/components/checkbox-filter';
+const FilterField = ({ field, onFilterChange, value: controlledValue })=>{
+    const { i18n } = useTranslation();
+    const localeLang = i18n.language;
+    const isRTL = rtlLanguages.includes(localeLang);
+    const direction = isRTL ? 'rtl' : 'ltr';
+    const userLocale = {
+        code: localeLang,
+        direction
+    };
+    const handleDateFilterChange = useCallback((value)=>{
+        onFilterChange(field.name, value);
+    }, [
+        onFilterChange,
+        field.name
+    ]);
+    const handleSelectFilterChange = useCallback((value)=>{
+        onFilterChange(field.name, value);
+    }, [
+        onFilterChange,
+        field.name
+    ]);
+    const handleCheckboxFilterChange = useCallback((state)=>{
+        onFilterChange(field.name, state);
+    }, [
+        onFilterChange,
+        field.name
+    ]);
+    switch(field.type){
+        case 'date':
+            return /*#__PURE__*/ _jsx(DateFilter, {
+                label: field.label,
+                value: controlledValue,
+                onChange: handleDateFilterChange,
+                locale: userLocale,
+                className: ` w-[${field.width || '250px'}]`
+            }, field.name);
+        case 'select':
+            if (field.options.length <= 3) {
+                return /*#__PURE__*/ _jsx(SmallSelectFilter, {
+                    label: field.label,
+                    options: (field.options || []).map((option)=>({
+                            label: option.label,
+                            value: option.value
+                        })),
+                    onChange: handleSelectFilterChange,
+                    value: controlledValue,
+                    locale: userLocale,
+                    className: ` w-[${field.width || '250px'}]`
+                }, field.name);
+            }
+            return /*#__PURE__*/ _jsx(SelectFilter, {
+                label: field.label,
+                options: (field.options || []).map((option)=>({
+                        label: option.label,
+                        value: option.value
+                    })),
+                onChange: handleSelectFilterChange,
+                value: controlledValue,
+                locale: userLocale,
+                className: ` w-[${field.width || '250px'}]`
+            }, field.name);
+        case 'checkbox':
+            return /*#__PURE__*/ _jsx(CheckboxFilter, {
+                label: field.label,
+                onChange: handleCheckboxFilterChange,
+                value: controlledValue,
+                checkboxLabel: '',
+                locale: userLocale,
+                className: ` w-[${field.width || '250px'}]`
+            }, field.name);
+        default:
+            return null;
+    }
+};
+export default FilterField;
+
+//# sourceMappingURL=FilterField.js.map

package/dist/FilterField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/FilterField.tsx"],"sourcesContent":["// FilterField.tsx (הקובץ המתוקן)\n\n'use client'\nimport React, { useCallback } from 'react'\nimport { useTranslation } from '@payloadcms/ui'\nimport { rtlLanguages } from '@payloadcms/translations'\nimport { DateFilter } from './filters/components/date-filter'\nimport { Locale } from './filters/types/filters-type'\nimport { SmallSelectFilter } from './filters/components/small-select-filter'\nimport { SelectFilter } from './filters/components/select-filter'\nimport { CheckboxFilter } from './filters/components/checkbox-filter'\n\n\nconst FilterField = ({\n  field,\n  onFilterChange,\n  value: controlledValue,\n}: {\n  field: any\n  onFilterChange: (fieldName: string, value: any) => void\n  value: any\n}) => {\n  const { i18n } = useTranslation()\n  const localeLang = i18n.language\n  const isRTL = (rtlLanguages as readonly string[]).includes(localeLang)\n  const direction = isRTL ? 'rtl' : 'ltr'\n  const userLocale = { code: localeLang, direction }\n\n  const handleDateFilterChange = useCallback(\n    (value: any) => {\n      onFilterChange(field.name, value)\n    },\n    [onFilterChange, field.name],\n  )\n\n  const handleSelectFilterChange = useCallback(\n    (value: any) => {\n      onFilterChange(field.name, value)\n    },\n    [onFilterChange, field.name],\n  )\n\n  const handleCheckboxFilterChange = useCallback(\n    (state: any) => {\n      onFilterChange(field.name, state)\n    },\n    [onFilterChange, field.name],\n  )\n\n  switch (field.type) {\n    case 'date':\n      return (\n        <DateFilter\n          label={field.label}\n          value={controlledValue}\n          key={field.name}\n          onChange={handleDateFilterChange}\n          locale={userLocale as Locale}\n          className={` w-[${field.width || '250px'}]`}\n        />\n      )\n    case 'select':\n      if (field.options.length <= 3) {\n        return (\n          <SmallSelectFilter\n            label={field.label}\n            key={field.name}\n            options={(field.options || []).map((option: any) => ({\n              label: option.label,\n              value: option.value,\n            }))}\n            onChange={handleSelectFilterChange}\n            value={controlledValue}\n            locale={userLocale as Locale}\n            className={` w-[${field.width || '250px'}]`}\n          />\n        )\n      }\n      return (\n        <SelectFilter\n          label={field.label}\n          key={field.name}\n          options={(field.options || []).map((option: any) => ({\n            label: option.label,\n            value: option.value,\n          }))}\n          onChange={handleSelectFilterChange}\n          value={controlledValue}\n          locale={userLocale as Locale}\n          className={` w-[${field.width || '250px'}]`}\n        />\n      )\n    case 'checkbox':\n      return (\n        <CheckboxFilter\n          label={field.label}\n          key={field.name}\n          onChange={handleCheckboxFilterChange}\n          value={controlledValue}\n          checkboxLabel={''}\n          locale={userLocale as Locale}\n          className={` w-[${field.width || '250px'}]`}\n        />\n      )\n    default:\n      return null\n  }\n}\n\nexport default FilterField\n"],"names":["React","useCallback","useTranslation","rtlLanguages","DateFilter","SmallSelectFilter","SelectFilter","CheckboxFilter","FilterField","field","onFilterChange","value","controlledValue","i18n","localeLang","language","isRTL","includes","direction","userLocale","code","handleDateFilterChange","name","handleSelectFilterChange","handleCheckboxFilterChange","state","type","label","onChange","locale","className","width","options","length","map","option","checkboxLabel"],"mappings":"AAAA,iCAAiC;AAEjC;;AACA,OAAOA,SAASC,WAAW,QAAQ,QAAO;AAC1C,SAASC,cAAc,QAAQ,iBAAgB;AAC/C,SAASC,YAAY,QAAQ,2BAA0B;AACvD,SAASC,UAAU,QAAQ,mCAAkC;AAE7D,SAASC,iBAAiB,QAAQ,2CAA0C;AAC5E,SAASC,YAAY,QAAQ,qCAAoC;AACjE,SAASC,cAAc,QAAQ,uCAAsC;AAGrE,MAAMC,cAAc,CAAC,EACnBC,KAAK,EACLC,cAAc,EACdC,OAAOC,eAAe,EAKvB;IACC,MAAM,EAAEC,IAAI,EAAE,GAAGX;IACjB,MAAMY,aAAaD,KAAKE,QAAQ;IAChC,MAAMC,QAAQ,AAACb,aAAmCc,QAAQ,CAACH;IAC3D,MAAMI,YAAYF,QAAQ,QAAQ;IAClC,MAAMG,aAAa;QAAEC,MAAMN;QAAYI;IAAU;IAEjD,MAAMG,yBAAyBpB,YAC7B,CAACU;QACCD,eAAeD,MAAMa,IAAI,EAAEX;IAC7B,GACA;QAACD;QAAgBD,MAAMa,IAAI;KAAC;IAG9B,MAAMC,2BAA2BtB,YAC/B,CAACU;QACCD,eAAeD,MAAMa,IAAI,EAAEX;IAC7B,GACA;QAACD;QAAgBD,MAAMa,IAAI;KAAC;IAG9B,MAAME,6BAA6BvB,YACjC,CAACwB;QACCf,eAAeD,MAAMa,IAAI,EAAEG;IAC7B,GACA;QAACf;QAAgBD,MAAMa,IAAI;KAAC;IAG9B,OAAQb,MAAMiB,IAAI;QAChB,KAAK;YACH,qBACE,KAACtB;gBACCuB,OAAOlB,MAAMkB,KAAK;gBAClBhB,OAAOC;gBAEPgB,UAAUP;gBACVQ,QAAQV;gBACRW,WAAW,CAAC,IAAI,EAAErB,MAAMsB,KAAK,IAAI,QAAQ,CAAC,CAAC;eAHtCtB,MAAMa,IAAI;QAMrB,KAAK;YACH,IAAIb,MAAMuB,OAAO,CAACC,MAAM,IAAI,GAAG;gBAC7B,qBACE,KAAC5B;oBACCsB,OAAOlB,MAAMkB,KAAK;oBAElBK,SAAS,AAACvB,CAAAA,MAAMuB,OAAO,IAAI,EAAE,AAAD,EAAGE,GAAG,CAAC,CAACC,SAAiB,CAAA;4BACnDR,OAAOQ,OAAOR,KAAK;4BACnBhB,OAAOwB,OAAOxB,KAAK;wBACrB,CAAA;oBACAiB,UAAUL;oBACVZ,OAAOC;oBACPiB,QAAQV;oBACRW,WAAW,CAAC,IAAI,EAAErB,MAAMsB,KAAK,IAAI,QAAQ,CAAC,CAAC;mBARtCtB,MAAMa,IAAI;YAWrB;YACA,qBACE,KAAChB;gBACCqB,OAAOlB,MAAMkB,KAAK;gBAElBK,SAAS,AAACvB,CAAAA,MAAMuB,OAAO,IAAI,EAAE,AAAD,EAAGE,GAAG,CAAC,CAACC,SAAiB,CAAA;wBACnDR,OAAOQ,OAAOR,KAAK;wBACnBhB,OAAOwB,OAAOxB,KAAK;oBACrB,CAAA;gBACAiB,UAAUL;gBACVZ,OAAOC;gBACPiB,QAAQV;gBACRW,WAAW,CAAC,IAAI,EAAErB,MAAMsB,KAAK,IAAI,QAAQ,CAAC,CAAC;eARtCtB,MAAMa,IAAI;QAWrB,KAAK;YACH,qBACE,KAACf;gBACCoB,OAAOlB,MAAMkB,KAAK;gBAElBC,UAAUJ;gBACVb,OAAOC;gBACPwB,eAAe;gBACfP,QAAQV;gBACRW,WAAW,CAAC,IAAI,EAAErB,MAAMsB,KAAK,IAAI,QAAQ,CAAC,CAAC;eALtCtB,MAAMa,IAAI;QAQrB;YACE,OAAO;IACX;AACF;AAEA,eAAed,YAAW"}

package/dist/QuickFilter.d.ts

@@ -0,0 +1,9 @@
+declare const QuickFilter: ({ slug, filterList, }: {
+    slug: string;
+    filterList: (string | {
+        name: string;
+        width: string;
+    })[][];
+}) => import("react").JSX.Element;
+export default QuickFilter;
+//# sourceMappingURL=QuickFilter.d.ts.map

package/dist/QuickFilter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuickFilter.d.ts","sourceRoot":"","sources":["../src/QuickFilter.tsx"],"names":[],"mappings":"AA0GA,QAAA,MAAM,WAAW,0BAGd;IACD,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,CAAC,MAAM,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,EAAE,EAAE,CAAC;CAC5D,gCA2OA,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/QuickFilter.js

@@ -0,0 +1,331 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useConfig, useListQuery, useTranslation } from '@payloadcms/ui';
+import { getTranslation } from '@payloadcms/translations';
+import FilterField from './FilterField';
+import { groupFiltersByRow, parseColumns } from './filters/utils/layout-helpers';
+import { ChevronDown, ChevronUp, Filter, X } from 'lucide-react';
+import { futureDateFilterOptions, pastDateFilterOptions } from './filters/constants/date-filter-options';
+import { Button } from './ui/button';
+// Recursive function to find fields by name
+function findFieldsByName(fields, fieldNames) {
+    const results = [];
+    function recursiveSearch(currentFields) {
+        const filteredFields = currentFields.filter((field)=>'name' in field && fieldNames.includes(field.name));
+        results.push(...filteredFields);
+        currentFields.forEach((item)=>{
+            if ((item.type === 'array' || item.type === 'row' || item.type === 'collapsible') && 'fields' in item && Array.isArray(item.fields)) {
+                recursiveSearch(item.fields);
+            } else if (item.type === 'tabs' && Array.isArray(item.tabs)) {
+                item.tabs.forEach((tab)=>{
+                    if ('fields' in tab && Array.isArray(tab.fields)) {
+                        recursiveSearch(tab.fields);
+                    }
+                });
+            } else if (item.type === 'blocks' && Array.isArray(item.blocks)) {
+                item.blocks.forEach((block)=>{
+                    if ('fields' in block && Array.isArray(block.fields)) {
+                        recursiveSearch(block.fields);
+                    }
+                });
+            }
+        });
+    }
+    recursiveSearch(fields);
+    return results;
+}
+// Helper function to convert UI state to a where query
+const buildWhereClause = (values, fieldDefs)=>{
+    const where = {};
+    Object.entries(values).forEach(([fieldName, value])=>{
+        if (!value) return;
+        const fieldDef = fieldDefs.find((f)=>f.name === fieldName);
+        if (!fieldDef) return;
+        switch(fieldDef.type){
+            case 'date':
+                {
+                    const dateValue = value;
+                    if (dateValue.customRange) {
+                        const { from, to } = dateValue.customRange;
+                        const dateQuery = {};
+                        if (from) dateQuery.greater_than_equal = from;
+                        if (to) dateQuery.less_than_equal = to;
+                        if (Object.keys(dateQuery).length > 0) {
+                            where[fieldName] = dateQuery;
+                        }
+                    }
+                    break;
+                }
+            case 'select':
+                {
+                    const selectValue = value;
+                    if (selectValue.selectedValues && selectValue.selectedValues.length > 0) {
+                        if (selectValue.selectedValues.length === 1) {
+                            where[fieldName] = {
+                                equals: selectValue.selectedValues[0]
+                            };
+                        } else {
+                            where[fieldName] = {
+                                in: selectValue.selectedValues
+                            };
+                        }
+                    }
+                    break;
+                }
+            case 'checkbox':
+                {
+                    const checkboxState = value;
+                    if (checkboxState === 'checked') {
+                        where[fieldName] = {
+                            equals: true
+                        };
+                    } else if (checkboxState === 'unchecked') {
+                        where[fieldName] = {
+                            equals: false
+                        };
+                    }
+                    break;
+                }
+        }
+    });
+    return where;
+};
+const QuickFilter = ({ slug, filterList })=>{
+    const localStorageKey = useMemo(()=>`direct-filter-${slug}`, [
+        slug
+    ]);
+    const [fields, setFields] = useState([]);
+    const [filterRows, setFilterRows] = useState([]);
+    const [showFilters, setShowFilters] = useState(false);
+    const { refineListData, query } = useListQuery();
+    const { getEntityConfig } = useConfig();
+    const { i18n } = useTranslation();
+    const [filterValues, setFilterValues] = useState(()=>{
+        try {
+            const item = window.localStorage.getItem(localStorageKey);
+            return item ? JSON.parse(item) : {};
+        } catch (error) {
+            console.error('Error reading filters from localStorage.', error);
+            return {};
+        }
+    });
+    useEffect(()=>{
+        const collection = getEntityConfig({
+            collectionSlug: slug
+        });
+        const flattenedFieldConfigs = filterList.flatMap((row, rowIndex)=>row.map((field, fieldIndex)=>({
+                    field,
+                    rowIndex,
+                    fieldIndex
+                })));
+        const fieldNames = flattenedFieldConfigs.map(({ field })=>typeof field === 'string' ? field : field.name);
+        const matchedFields = findFieldsByName(collection?.fields || [], fieldNames);
+        const simplifiedFields = matchedFields.map((field)=>{
+            const label = field.label;
+            const translatedLabel = getTranslation(label, i18n);
+            const fieldName = field.name;
+            const fieldConfig = flattenedFieldConfigs.find(({ field: f })=>typeof f === 'string' ? f === fieldName : f.name === fieldName);
+            return {
+                name: fieldName,
+                label: translatedLabel,
+                type: field.type,
+                options: field.options,
+                row: fieldConfig ? fieldConfig.rowIndex : 0,
+                width: typeof fieldConfig?.field === 'object' && 'width' in fieldConfig.field ? fieldConfig.field.width : undefined
+            };
+        });
+        const sortedFields = flattenedFieldConfigs.map(({ field })=>{
+            const fieldName = typeof field === 'string' ? field : field.name;
+            return simplifiedFields.find((f)=>f.name === fieldName);
+        }).filter((f)=>!!f);
+        setFields(sortedFields);
+        setFilterRows(groupFiltersByRow(sortedFields));
+    }, [
+        slug,
+        filterList,
+        getEntityConfig,
+        i18n
+    ]);
+    useEffect(()=>{
+        // Wait until field metadata has been loaded.
+        if (fields.length === 0) {
+            return;
+        }
+        const where = buildWhereClause(filterValues, fields);
+        try {
+            if (Object.keys(filterValues).length > 0) {
+                localStorage.setItem(localStorageKey, JSON.stringify(filterValues));
+            } else {
+                localStorage.removeItem(localStorageKey);
+            }
+        } catch (error) {
+            console.error('Failed to save filters to localStorage', error);
+        }
+        if (JSON.stringify(where) !== JSON.stringify(query.where)) {
+            refineListData({
+                columns: parseColumns(query.columns),
+                where,
+                page: '1'
+            });
+        }
+    }, [
+        filterValues,
+        fields,
+        query,
+        refineListData,
+        localStorageKey
+    ]);
+    const handleFilterChange = useCallback((fieldName, value)=>{
+        setFilterValues((prev)=>{
+            const newValues = {
+                ...prev
+            };
+            if (value === undefined || value === null || value === 'indeterminate' || value && value.type === 'none') {
+                delete newValues[fieldName];
+            } else {
+                newValues[fieldName] = value;
+            }
+            return newValues;
+        });
+    }, []);
+    // This function remains largely the same.
+    const getActiveFiltersDetails = ()=>{
+        const activeFilters = [];
+        const isHebrew = i18n.language === 'he';
+        Object.entries(filterValues).forEach(([fieldName, value])=>{
+            const field = fields.find((f)=>f.name === fieldName);
+            if (!field) return;
+            switch(field.type){
+                case 'date':
+                    if (value !== undefined) {
+                        const dateValue = value;
+                        let dateDescription = '';
+                        if (dateValue.type === 'predefined' && dateValue.predefinedValue) {
+                            const allOptions = [
+                                ...pastDateFilterOptions,
+                                ...futureDateFilterOptions
+                            ];
+                            const option = allOptions.find((opt)=>opt.value === dateValue.predefinedValue);
+                            dateDescription = option ? option.label : isHebrew ? 'מותאם אישית' : 'Custom';
+                        } else if (dateValue.type === 'custom' || dateValue.customRange) {
+                            dateDescription = isHebrew ? 'מותאם אישית' : 'Custom';
+                        }
+                        if (dateDescription) {
+                            activeFilters.push(`${field.label} (${dateDescription})`);
+                        }
+                    }
+                    break;
+                case 'select':
+                    {
+                        const selectValue = value;
+                        if (selectValue && selectValue.selectedValues && selectValue.selectedValues.length > 0) {
+                            const count = selectValue.selectedValues.length;
+                            const totalOptions = field.options?.length || 0;
+                            if (selectValue.selectedValues.length === totalOptions) {
+                                activeFilters.push(`${field.label} (${isHebrew ? 'הכל' : 'All'})`);
+                            } else {
+                                activeFilters.push(`${field.label} (${count})`);
+                            }
+                        }
+                        break;
+                    }
+                case 'checkbox':
+                    if (value !== 'indeterminate') {
+                        const checkboxValue = value === 'checked' ? isHebrew ? 'כן' : 'Yes' : isHebrew ? 'לא' : 'No';
+                        activeFilters.push(`${field.label} (${checkboxValue})`);
+                    }
+                    break;
+            }
+        });
+        return activeFilters;
+    };
+    const clearAllFilters = ()=>{
+        setFilterValues({});
+    };
+    const memoizedFilterRows = useMemo(()=>{
+        return filterRows.map((row)=>/*#__PURE__*/ _jsx("div", {
+                children: /*#__PURE__*/ _jsx("div", {
+                    className: "flex flex-wrap gap-6 mb-4",
+                    children: row.filters.map((field)=>/*#__PURE__*/ _jsx(FilterField, {
+                            field: field,
+                            onFilterChange: handleFilterChange,
+                            value: filterValues[field.name]
+                        }, field.name))
+                })
+            }, row.rowNumber));
+    }, [
+        filterRows,
+        handleFilterChange,
+        filterValues
+    ]);
+    const toggleFilters = ()=>{
+        setShowFilters((prev)=>!prev);
+    };
+    const activeFiltersDetails = getActiveFiltersDetails();
+    const hasActiveFilters = activeFiltersDetails.length > 0;
+    const isHebrew = i18n.language === 'he';
+    if (!fields.length) return null;
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "filter-container useTw",
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                style: {
+                    position: 'relative',
+                    top: '-24px',
+                    height: '0px'
+                },
+                children: /*#__PURE__*/ _jsxs(Button, {
+                    variant: "outline",
+                    size: "sm",
+                    onClick: toggleFilters,
+                    className: `flex items-center gap-2 bg-background border-muted-muted hover:bg-muted ${hasActiveFilters ? 'w-auto min-w-fit' : ''}`,
+                    children: [
+                        /*#__PURE__*/ _jsx(Filter, {
+                            className: `h-4 w-4 ${hasActiveFilters ? 'fill-current' : ''}`
+                        }),
+                        hasActiveFilters ? /*#__PURE__*/ _jsxs(_Fragment, {
+                            children: [
+                                /*#__PURE__*/ _jsxs("span", {
+                                    className: "text-sm truncate",
+                                    children: [
+                                        /*#__PURE__*/ _jsx("strong", {
+                                            children: isHebrew ? `${activeFiltersDetails.length === 1 ? 'סינון פעיל בעמודה' : 'סינון פעיל בעמודות'}: ` : `${activeFiltersDetails.length === 1 ? 'Active filter on column' : 'Active filters on columns'}: `
+                                        }),
+                                        ' ',
+                                        activeFiltersDetails.join(' • ')
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsx("span", {
+                                    onClick: (e)=>{
+                                        e.stopPropagation();
+                                        clearAllFilters();
+                                    },
+                                    className: "ml-1 p-0.5 hover:bg-muted rounded-sm transition-colors flex-shrink-0",
+                                    children: /*#__PURE__*/ _jsx(X, {
+                                        className: "h-3 w-3 text-gray-500"
+                                    })
+                                })
+                            ]
+                        }) : /*#__PURE__*/ _jsx("span", {
+                            className: "text-sm truncate",
+                            children: isHebrew ? 'סינון מהיר' : 'Quick Filters'
+                        }),
+                        showFilters ? /*#__PURE__*/ _jsx(ChevronUp, {
+                            className: "h-4 w-4"
+                        }) : /*#__PURE__*/ _jsx(ChevronDown, {
+                            className: "h-4 w-4"
+                        })
+                    ]
+                })
+            }),
+            showFilters && /*#__PURE__*/ _jsx("div", {
+                className: 'p-4 pb-2 bg-muted/70',
+                children: memoizedFilterRows
+            })
+        ]
+    });
+};
+export default QuickFilter;
+
+//# sourceMappingURL=QuickFilter.js.map

package/dist/QuickFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/QuickFilter.tsx"],"sourcesContent":["'use client';\nimport { useCallback, useEffect, useMemo, useState } from 'react';\nimport { useConfig, useListQuery, useTranslation } from '@payloadcms/ui';\nimport type { ClientField, FieldAffectingData, OptionObject, SelectField } from 'payload';\nimport { getTranslation } from '@payloadcms/translations';\nimport FilterField from './FilterField';\nimport type {\n  CheckboxFilterState,\n  DateFilterValue,\n  FilterDetaild,\n  FilterRow,\n  SelectFilterValue,\n} from './filters/types/filters-type';\nimport { groupFiltersByRow, parseColumns } from './filters/utils/layout-helpers';\nimport { ChevronDown, ChevronUp, Filter, X } from 'lucide-react';\n\nimport {\n  futureDateFilterOptions,\n  pastDateFilterOptions,\n} from './filters/constants/date-filter-options';\nimport { Button } from './ui/button';\n\n// Recursive function to find fields by name\nfunction findFieldsByName(fields: ClientField[], fieldNames: string[]): ClientField[] {\n  const results: ClientField[] = [];\n  function recursiveSearch(currentFields: ClientField[]) {\n    const filteredFields = currentFields.filter(\n      (field) => 'name' in field && fieldNames.includes(field.name as string),\n    );\n    results.push(...filteredFields);\n    currentFields.forEach((item) => {\n      if (\n        (item.type === 'array' || item.type === 'row' || item.type === 'collapsible') &&\n        'fields' in item &&\n        Array.isArray(item.fields)\n      ) {\n        recursiveSearch(item.fields);\n      } else if (item.type === 'tabs' && Array.isArray(item.tabs)) {\n        item.tabs.forEach((tab) => {\n          if ('fields' in tab && Array.isArray(tab.fields)) {\n            recursiveSearch(tab.fields);\n          }\n        });\n      } else if (item.type === 'blocks' && Array.isArray(item.blocks)) {\n        item.blocks.forEach((block) => {\n          if ('fields' in block && Array.isArray(block.fields)) {\n            recursiveSearch(block.fields);\n          }\n        });\n      }\n    });\n  }\n  recursiveSearch(fields);\n  return results;\n}\n\n// Helper function to convert UI state to a where query\nconst buildWhereClause = (\n  values: Record<string, any>,\n  fieldDefs: FilterDetaild[],\n): Record<string, any> => {\n  const where: Record<string, any> = {};\n  Object.entries(values).forEach(([fieldName, value]) => {\n    if (!value) return;\n    const fieldDef = fieldDefs.find((f) => f.name === fieldName);\n    if (!fieldDef) return;\n    switch (fieldDef.type) {\n      case 'date': {\n        const dateValue = value as DateFilterValue;\n        if (dateValue.customRange) {\n          const { from, to } = dateValue.customRange;\n          const dateQuery: any = {};\n          if (from) dateQuery.greater_than_equal = from;\n          if (to) dateQuery.less_than_equal = to;\n          if (Object.keys(dateQuery).length > 0) {\n            where[fieldName] = dateQuery;\n          }\n        }\n        break;\n      }\n      case 'select': {\n        const selectValue = value as SelectFilterValue;\n        if (selectValue.selectedValues && selectValue.selectedValues.length > 0) {\n          if (selectValue.selectedValues.length === 1) {\n            where[fieldName] = { equals: selectValue.selectedValues[0] };\n          } else {\n            where[fieldName] = { in: selectValue.selectedValues };\n          }\n        }\n        break;\n      }\n      case 'checkbox': {\n        const checkboxState = value as CheckboxFilterState;\n        if (checkboxState === 'checked') {\n          where[fieldName] = { equals: true };\n        } else if (checkboxState === 'unchecked') {\n          where[fieldName] = { equals: false };\n        }\n        // 'indeterminate' will not filter\n        break;\n      }\n    }\n  });\n  return where;\n};\n\nconst QuickFilter = ({\n  slug,\n  filterList,\n}: {\n  slug: string;\n  filterList: (string | { name: string; width: string })[][];\n}) => {\n  const localStorageKey = useMemo(() => `direct-filter-${slug}`, [slug]);\n\n  const [fields, setFields] = useState<FilterDetaild[]>([]);\n  const [filterRows, setFilterRows] = useState<FilterRow[]>([]);\n  const [showFilters, setShowFilters] = useState(false);\n  const { refineListData, query } = useListQuery();\n  const { getEntityConfig } = useConfig();\n  const { i18n } = useTranslation();\n\n  const [filterValues, setFilterValues] = useState<Record<string, any>>(() => {\n    try {\n      const item = window.localStorage.getItem(localStorageKey);\n      return item ? JSON.parse(item) : {};\n    } catch (error) {\n      console.error('Error reading filters from localStorage.', error);\n      return {};\n    }\n  });\n\n  useEffect(() => {\n    const collection = getEntityConfig({ collectionSlug: slug });\n    const flattenedFieldConfigs = filterList.flatMap((row, rowIndex) =>\n      row.map((field, fieldIndex) => ({\n        field,\n        rowIndex,\n        fieldIndex,\n      })),\n    );\n    const fieldNames = flattenedFieldConfigs.map(({ field }) =>\n      typeof field === 'string' ? field : field.name,\n    );\n    const matchedFields = findFieldsByName(collection?.fields || [], fieldNames);\n    const simplifiedFields: FilterDetaild[] = matchedFields.map((field) => {\n      const label = (field as FieldAffectingData).label;\n      const translatedLabel = getTranslation(label as string, i18n);\n      const fieldName = (field as FieldAffectingData).name as string;\n      const fieldConfig = flattenedFieldConfigs.find(({ field: f }) =>\n        typeof f === 'string' ? f === fieldName : f.name === fieldName,\n      );\n      return {\n        name: fieldName,\n        label: translatedLabel as string,\n        type: field.type,\n        options: (field as SelectField).options as OptionObject[],\n        row: fieldConfig ? fieldConfig.rowIndex : 0,\n        width:\n          typeof fieldConfig?.field === 'object' && 'width' in fieldConfig.field\n            ? fieldConfig.field.width\n            : undefined,\n      };\n    });\n    const sortedFields = flattenedFieldConfigs\n      .map(({ field }) => {\n        const fieldName = typeof field === 'string' ? field : field.name;\n        return simplifiedFields.find((f) => f.name === fieldName);\n      })\n      .filter((f): f is FilterDetaild => !!f);\n    setFields(sortedFields);\n    setFilterRows(groupFiltersByRow(sortedFields));\n  }, [slug, filterList, getEntityConfig, i18n]);\n\n  useEffect(() => {\n    // Wait until field metadata has been loaded.\n    if (fields.length === 0) {\n      return;\n    }\n\n    const where = buildWhereClause(filterValues, fields);\n\n    try {\n      if (Object.keys(filterValues).length > 0) {\n        localStorage.setItem(localStorageKey, JSON.stringify(filterValues));\n      } else {\n        localStorage.removeItem(localStorageKey);\n      }\n    } catch (error) {\n      console.error('Failed to save filters to localStorage', error);\n    }\n\n    if (JSON.stringify(where) !== JSON.stringify(query.where)) {\n      refineListData({\n        columns: parseColumns(query.columns),\n        where,\n        page: '1',\n      });\n    }\n  }, [filterValues, fields, query, refineListData, localStorageKey]);\n\n  const handleFilterChange = useCallback((fieldName: string, value: any) => {\n    setFilterValues((prev) => {\n      const newValues = { ...prev };\n      if (\n        value === undefined ||\n        value === null ||\n        value === 'indeterminate' ||\n        (value && value.type === 'none')\n      ) {\n        delete newValues[fieldName];\n      } else {\n        newValues[fieldName] = value;\n      }\n      return newValues;\n    });\n  }, []);\n\n  // This function remains largely the same.\n  const getActiveFiltersDetails = () => {\n    const activeFilters: string[] = [];\n    const isHebrew = i18n.language === 'he';\n\n    Object.entries(filterValues).forEach(([fieldName, value]) => {\n      const field = fields.find((f) => f.name === fieldName);\n      if (!field) return;\n\n      switch (field.type) {\n        case 'date':\n          if (value !== undefined) {\n            const dateValue = value as DateFilterValue;\n            let dateDescription = '';\n\n            if (dateValue.type === 'predefined' && dateValue.predefinedValue) {\n              const allOptions = [...pastDateFilterOptions, ...futureDateFilterOptions];\n              const option = allOptions.find((opt) => opt.value === dateValue.predefinedValue);\n              dateDescription = option ? option.label : isHebrew ? 'מותאם אישית' : 'Custom';\n            } else if (dateValue.type === 'custom' || dateValue.customRange) {\n              dateDescription = isHebrew ? 'מותאם אישית' : 'Custom';\n            }\n\n            if (dateDescription) {\n              activeFilters.push(`${field.label} (${dateDescription})`);\n            }\n          }\n          break;\n        case 'select': {\n          const selectValue = value as SelectFilterValue;\n          if (selectValue && selectValue.selectedValues && selectValue.selectedValues.length > 0) {\n            const count = selectValue.selectedValues.length;\n            const totalOptions = field.options?.length || 0;\n            if (selectValue.selectedValues.length === totalOptions) {\n              activeFilters.push(`${field.label} (${isHebrew ? 'הכל' : 'All'})`);\n            } else {\n              activeFilters.push(`${field.label} (${count})`);\n            }\n          }\n          break;\n        }\n        case 'checkbox':\n          if (value !== 'indeterminate') {\n            const checkboxValue =\n              value === 'checked' ? (isHebrew ? 'כן' : 'Yes') : isHebrew ? 'לא' : 'No';\n            activeFilters.push(`${field.label} (${checkboxValue})`);\n          }\n          break;\n      }\n    });\n\n    return activeFilters;\n  };\n\n  const clearAllFilters = () => {\n    setFilterValues({});\n  };\n\n  const memoizedFilterRows = useMemo(() => {\n    return filterRows.map((row) => (\n      <div key={row.rowNumber}>\n        <div className='flex flex-wrap gap-6 mb-4'>\n          {row.filters.map((field) => (\n            <FilterField\n              key={field.name}\n              field={field}\n              onFilterChange={handleFilterChange}\n              value={filterValues[field.name]}\n            />\n          ))}\n        </div>\n      </div>\n    ));\n  }, [filterRows, handleFilterChange, filterValues]);\n\n  const toggleFilters = () => {\n    setShowFilters((prev) => !prev);\n  };\n\n  const activeFiltersDetails = getActiveFiltersDetails();\n  const hasActiveFilters = activeFiltersDetails.length > 0;\n  const isHebrew = i18n.language === 'he';\n\n  if (!fields.length) return null;\n\n  return (\n    <div className='filter-container useTw'>\n      <div style={{ position: 'relative', top: '-24px', height: '0px' }}>\n        <Button\n          variant='outline'\n          size='sm'\n          onClick={toggleFilters}\n          className={`flex items-center gap-2 bg-background border-muted-muted hover:bg-muted ${\n            hasActiveFilters ? 'w-auto min-w-fit' : ''\n          }`}\n        >\n          <Filter className={`h-4 w-4 ${hasActiveFilters ? 'fill-current' : ''}`} />\n\n          {hasActiveFilters ? (\n            <>\n              <span className='text-sm truncate'>\n                <strong>\n                  {isHebrew\n                    ? `${activeFiltersDetails.length === 1 ? 'סינון פעיל בעמודה' : 'סינון פעיל בעמודות'}: `\n                    : `${activeFiltersDetails.length === 1 ? 'Active filter on column' : 'Active filters on columns'}: `}\n                </strong>{' '}\n                {activeFiltersDetails.join(' • ')}\n              </span>\n\n              <span\n                onClick={(e) => {\n                  e.stopPropagation();\n                  clearAllFilters();\n                }}\n                className='ml-1 p-0.5 hover:bg-muted rounded-sm transition-colors flex-shrink-0'\n              >\n                <X className='h-3 w-3 text-gray-500' />\n              </span>\n            </>\n          ) : (\n            <span className='text-sm truncate'>{isHebrew ? 'סינון מהיר' : 'Quick Filters'}</span>\n          )}\n\n          {showFilters ? <ChevronUp className='h-4 w-4' /> : <ChevronDown className='h-4 w-4' />}\n        </Button>\n      </div>\n      {showFilters && <div className={'p-4 pb-2 bg-muted/70'}>{memoizedFilterRows}</div>}\n    </div>\n  );\n};\n\nexport default QuickFilter;\n"],"names":["useCallback","useEffect","useMemo","useState","useConfig","useListQuery","useTranslation","getTranslation","FilterField","groupFiltersByRow","parseColumns","ChevronDown","ChevronUp","Filter","X","futureDateFilterOptions","pastDateFilterOptions","Button","findFieldsByName","fields","fieldNames","results","recursiveSearch","currentFields","filteredFields","filter","field","includes","name","push","forEach","item","type","Array","isArray","tabs","tab","blocks","block","buildWhereClause","values","fieldDefs","where","Object","entries","fieldName","value","fieldDef","find","f","dateValue","customRange","from","to","dateQuery","greater_than_equal","less_than_equal","keys","length","selectValue","selectedValues","equals","in","checkboxState","QuickFilter","slug","filterList","localStorageKey","setFields","filterRows","setFilterRows","showFilters","setShowFilters","refineListData","query","getEntityConfig","i18n","filterValues","setFilterValues","window","localStorage","getItem","JSON","parse","error","console","collection","collectionSlug","flattenedFieldConfigs","flatMap","row","rowIndex","map","fieldIndex","matchedFields","simplifiedFields","label","translatedLabel","fieldConfig","options","width","undefined","sortedFields","setItem","stringify","removeItem","columns","page","handleFilterChange","prev","newValues","getActiveFiltersDetails","activeFilters","isHebrew","language","dateDescription","predefinedValue","allOptions","option","opt","count","totalOptions","checkboxValue","clearAllFilters","memoizedFilterRows","div","className","filters","onFilterChange","rowNumber","toggleFilters","activeFiltersDetails","hasActiveFilters","style","position","top","height","variant","size","onClick","span","strong","join","e","stopPropagation"],"mappings":"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"}

package/dist/filters/components/checkbox-filter.d.ts

@@ -0,0 +1,12 @@
+import { CheckboxFilterState, Locale } from '../types/filters-type';
+interface CheckboxFilterProps {
+    label?: string;
+    checkboxLabel: string;
+    value?: CheckboxFilterState;
+    onChange: (state: CheckboxFilterState) => void;
+    locale?: Locale;
+    className?: string;
+}
+export declare function CheckboxFilter({ label, checkboxLabel, value, onChange, locale, className, }: CheckboxFilterProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=checkbox-filter.d.ts.map

package/dist/filters/components/checkbox-filter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-filter.d.ts","sourceRoot":"","sources":["../../../src/filters/components/checkbox-filter.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAKpE,UAAU,mBAAmB;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAC/C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,aAAa,EACb,KAAuB,EACvB,QAAQ,EACR,MAAyC,EACzC,SAAS,GACV,EAAE,mBAAmB,+BA6IrB"}

package/dist/filters/components/checkbox-filter.js

@@ -0,0 +1,104 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { X } from 'lucide-react';
+import { Label } from '../../ui/label';
+import { cn } from '../../lib/utils';
+import { Button } from '../../ui/button';
+export function CheckboxFilter({ label, checkboxLabel, value = 'indeterminate', onChange, locale = {
+    code: 'he',
+    direction: 'rtl'
+}, className }) {
+    const [internalState, setInternalState] = useState(value);
+    const isHebrew = locale.code === 'he';
+    // Sync internal state with external value prop
+    useEffect(()=>{
+        setInternalState(value);
+    }, [
+        value
+    ]);
+    const handleToggle = (newState)=>{
+        setInternalState(newState);
+        onChange(newState);
+    };
+    const handleClear = ()=>{
+        setInternalState('indeterminate');
+        onChange('indeterminate');
+    };
+    const isActive = internalState === 'checked' || internalState === 'unchecked';
+    const labels_toggle = {
+        yes: isHebrew ? 'כן' : 'YES',
+        no: isHebrew ? 'לא' : 'NO'
+    };
+    return /*#__PURE__*/ _jsxs("div", {
+        className: cn('space-y-1', className),
+        dir: locale.direction,
+        children: [
+            label && /*#__PURE__*/ _jsx(Label, {
+                className: cn('useTw text-sm font-medium', isHebrew && 'text-right block'),
+                children: label
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: cn('flex items-center gap-3 transition-colors py-px', locale.direction === 'rtl' && 'justify-start'),
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        className: cn('flex items-center', locale.direction === 'rtl' && 'order-first'),
+                        children: /*#__PURE__*/ _jsx("div", {
+                            className: "flex rounded-md border overflow-hidden",
+                            children: locale.direction === 'rtl' ? /*#__PURE__*/ _jsxs(_Fragment, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        variant: internalState === 'checked' ? 'default' : 'ghost',
+                                        size: "sm",
+                                        className: cn('px-3 py-1 text-xs rounded-none border-0', internalState === 'checked' ? 'bg-green-600 text-white hover:bg-green-700' : 'bg-background text-muted-foreground hover:bg-muted'),
+                                        onClick: ()=>handleToggle('checked'),
+                                        children: labels_toggle.yes
+                                    }),
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        variant: internalState === 'unchecked' ? 'default' : 'ghost',
+                                        size: "sm",
+                                        className: cn('px-3 py-1 text-xs rounded-none border-0 border-l', internalState === 'unchecked' ? 'bg-red-600 text-white hover:bg-red-700' : 'bg-background text-muted-foreground hover:bg-muted'),
+                                        onClick: ()=>handleToggle('unchecked'),
+                                        children: labels_toggle.no
+                                    })
+                                ]
+                            }) : /*#__PURE__*/ _jsxs(_Fragment, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        variant: internalState === 'unchecked' ? 'default' : 'ghost',
+                                        size: "sm",
+                                        className: cn('px-3 py-1 text-xs rounded-none border-0', internalState === 'unchecked' ? 'bg-red-600 text-white hover:bg-red-700' : 'bg-background text-muted-foreground hover:bg-muted'),
+                                        onClick: ()=>handleToggle('unchecked'),
+                                        children: labels_toggle.no
+                                    }),
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        variant: internalState === 'checked' ? 'default' : 'ghost',
+                                        size: "sm",
+                                        className: cn('px-3 py-1 text-xs rounded-none border-0 border-l', internalState === 'checked' ? 'bg-green-600 text-white hover:bg-green-700' : 'bg-background text-muted-foreground hover:bg-muted'),
+                                        onClick: ()=>handleToggle('checked'),
+                                        children: labels_toggle.yes
+                                    })
+                                ]
+                            })
+                        })
+                    }),
+                    checkboxLabel && /*#__PURE__*/ _jsx(Label, {
+                        className: cn('useTw cursor-pointer select-none text-sm', isHebrew && 'text-right', locale.direction === 'rtl' && 'order-2'),
+                        children: checkboxLabel
+                    }),
+                    (internalState === 'checked' || internalState === 'unchecked') && /*#__PURE__*/ _jsx(Button, {
+                        variant: "ghost",
+                        size: "sm",
+                        className: cn('h-5 w-5 p-0 hover:bg-muted rounded-full -mt-1', checkboxLabel ? locale.direction === 'rtl' ? 'order-last -ml-1' : 'order-last -mr-1' : locale.direction === 'rtl' ? 'ml-[80px] order-last' : 'mr-[80px] order-last'),
+                        onClick: handleClear,
+                        children: /*#__PURE__*/ _jsx(X, {
+                            className: "h-3 w-3"
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=checkbox-filter.js.map