@lumeweb/portal-framework-ui 0.0.1 → 0.1.0

package/dist/esm/components/data-table/toolbarItems/filters/components/SelectFilter.js

@@ -0,0 +1,100 @@
+import { __esmMin } from "../../../../../_virtual/rolldown_runtime.js";
+import { BaseFilter, init_BaseFilter } from "../BaseFilter.js";
+import { Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, TooltipProvider, cn } from "@lumeweb/portal-framework-ui-core";
+import React, { useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
+import * as DropdownMenu$1 from "@radix-ui/react-dropdown-menu";
+
+//#region src/components/data-table/toolbarItems/filters/components/SelectFilter.tsx
+function SelectFilter({ value, onChange, config, itemLabel }) {
+	const [isExpanded, setIsExpanded] = useState(false);
+	const selectContentRef = useRef(null);
+	const selectTriggerRef = useRef(null);
+	const containerRef = useRef(null);
+	const options = config.includeAllOption ? [{
+		label: `All ${itemLabel || "Items"}`,
+		value: "all"
+	}, ...config.options || []] : config.options || [];
+	const controlledValue = value === void 0 && config.includeAllOption ? "all" : value;
+	const handleChange = (val) => {
+		if (onChange) if (config.includeAllOption && val === "all") onChange(void 0);
+		else onChange(val);
+		if (config.dropdownStyle) setIsExpanded(false);
+	};
+	const triggerLabel = options.find((option) => option.value === controlledValue)?.label || itemLabel || config.placeholder || "Select option...";
+	if (config.dropdownStyle) return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(BaseFilter, {
+		config,
+		label: itemLabel,
+		children: /* @__PURE__ */ jsx("div", {
+			ref: containerRef,
+			className: "relative",
+			children: /* @__PURE__ */ jsxs(DropdownMenu$1.Root, {
+				open: isExpanded,
+				onOpenChange: setIsExpanded,
+				children: [/* @__PURE__ */ jsx(DropdownMenu$1.Trigger, {
+					asChild: true,
+					children: /* @__PURE__ */ jsxs(Button, {
+						ref: selectTriggerRef,
+						variant: "ghost",
+						className: "hover:bg-muted h-auto w-full justify-start p-3",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "flex-1 text-left font-medium",
+							children: triggerLabel
+						}), /* @__PURE__ */ jsx(ChevronDown, { className: cn("h-4 w-4 transition-transform duration-200 ease-in-out", isExpanded ? "rotate-180" : "rotate-0") })]
+					})
+				}), /* @__PURE__ */ jsx(DropdownMenu$1.Portal, { children: /* @__PURE__ */ jsx(DropdownMenu$1.Content, {
+					ref: selectContentRef,
+					className: "bg-background rounded-lg border p-3 shadow-lg",
+					side: "bottom",
+					align: "start",
+					sideOffset: 5,
+					children: /* @__PURE__ */ jsxs(Select, {
+						value: controlledValue,
+						onValueChange: handleChange,
+						disabled: config.disabled || false,
+						children: [/* @__PURE__ */ jsx(SelectTrigger, {
+							className: "w-full",
+							children: /* @__PURE__ */ jsx(SelectValue, { placeholder: config.placeholder || "Select option..." })
+						}), /* @__PURE__ */ jsx(SelectContent, { children: options.map((option) => /* @__PURE__ */ jsx(SelectItem, {
+							value: option.value,
+							children: option.label
+						}, option.value)) })]
+					})
+				}) })]
+			})
+		})
+	}) });
+	return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(BaseFilter, {
+		config,
+		label: itemLabel,
+		children: /* @__PURE__ */ jsx("div", {
+			ref: containerRef,
+			className: "relative",
+			children: /* @__PURE__ */ jsxs(Select, {
+				value: controlledValue,
+				onValueChange: handleChange,
+				disabled: config.disabled || false,
+				children: [/* @__PURE__ */ jsx(SelectTrigger, {
+					ref: selectTriggerRef,
+					className: "w-full",
+					children: /* @__PURE__ */ jsx(SelectValue, { placeholder: config.placeholder || "Select option..." })
+				}), /* @__PURE__ */ jsx(SelectContent, {
+					ref: selectContentRef,
+					children: options.map((option) => /* @__PURE__ */ jsx(SelectItem, {
+						value: option.value,
+						children: option.label
+					}, option.value))
+				})]
+			})
+		})
+	}) });
+}
+var init_SelectFilter = __esmMin(() => {
+	init_BaseFilter();
+});
+
+//#endregion
+init_SelectFilter();
+export { SelectFilter, init_SelectFilter };
+//# sourceMappingURL=SelectFilter.js.map

package/dist/esm/components/data-table/toolbarItems/filters/components/SelectFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectFilter.js","names":["DropdownMenu"],"sources":["../../../../../../../src/components/data-table/toolbarItems/filters/components/SelectFilter.tsx"],"sourcesContent":["import React, { useState, useRef } from \"react\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n  Tooltip,\n  TooltipTrigger,\n  TooltipContent,\n  TooltipProvider,\n} from \"@lumeweb/portal-framework-ui-core\";\nimport { BaseFilter } from \"../BaseFilter\";\nimport type { BaseFilterComponentProps, SelectOption } from \"@/components/data-table/toolbarItems/filters/types\";\nimport { BaseRecord } from \"@refinedev/core\";\nimport * as DropdownMenu from \"@radix-ui/react-dropdown-menu\";\nimport { ChevronDown } from \"lucide-react\";\nimport { Button } from \"@lumeweb/portal-framework-ui-core\";\nimport { cn } from \"@lumeweb/portal-framework-ui-core\";\n// TODO: Reimplement tooltip functionality\n// import { useFilterTooltip } from \"../hooks/useFilterTooltip\";\n\nfunction SelectFilter<TData extends BaseRecord>({\n  value,\n  onChange,\n  config,\n  itemLabel,\n}: BaseFilterComponentProps<TData>) {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const selectContentRef = useRef<HTMLDivElement>(null);\n  const selectTriggerRef = useRef<HTMLButtonElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  // TODO: Reimplement tooltip functionality\n  // const { activeTooltip, handleItemHover, handleItemLeave } = useFilterTooltip();\n\n  // Prepare options - add \"all\" option if includeAllOption is true\n  const options = config.includeAllOption\n    ? [\n        {\n          label: `All ${itemLabel || \"Items\"}`,\n          value: \"all\",\n        } as SelectOption,\n        ...(config.options || []),\n      ]\n    : config.options || [];\n\n  // Map undefined value to \"all\" for controlled component only when includeAllOption is true\n  const controlledValue = value === undefined && config.includeAllOption ? \"all\" : value;\n\n  const handleChange = (val: string) => {\n    if (onChange) {\n      // If \"all\" option is selected, pass undefined to indicate no filter\n      if (config.includeAllOption && val === \"all\") {\n        onChange(undefined);\n      } else {\n        onChange(val);\n      }\n    }\n    \n    // Close dropdown menu after selection when dropdownStyle is used\n    if (config.dropdownStyle) {\n      setIsExpanded(false);\n    }\n  };\n\n  // Get the selected option to show its description in the trigger\n  // When \"all\" is selected, we want to show the special \"all\" option label\n  const selectedOption = options.find((option) => option.value === controlledValue);\n\n  // TODO: Reimplement tooltip functionality\n  // const handleMouseEnter = (e: React.MouseEvent, optionValue: string) => {\n  //   const option = options.find((opt) => opt.value === optionValue);\n  //   if (option?.description) {\n  //     handleItemHover(option.description, e, containerRef);\n  //   }\n  // };\n\n  // TODO: Reimplement tooltip functionality\n  // const handleMouseLeave = () => {\n  //   handleItemLeave();\n  // };\n\n  // Compute proper trigger label that displays \"All …\" when value is \"all\" or undefined\n  const triggerLabel = selectedOption?.label || itemLabel || config.placeholder || \"Select option...\";\n\n  // If dropdownStyle is enabled, render as a dropdown menu\n  if (config.dropdownStyle) {\n    return (\n      <TooltipProvider>\n        <BaseFilter config={config} label={itemLabel}>\n          <div ref={containerRef} className=\"relative\">\n            <DropdownMenu.Root open={isExpanded} onOpenChange={setIsExpanded}>\n              <DropdownMenu.Trigger asChild>\n                <Button\n                  ref={selectTriggerRef}\n                  variant=\"ghost\"\n                  className=\"hover:bg-muted h-auto w-full justify-start p-3\">\n                  <span className=\"flex-1 text-left font-medium\">\n                    {triggerLabel}\n                  </span>\n                  <ChevronDown\n                    className={cn(\n                      \"h-4 w-4 transition-transform duration-200 ease-in-out\",\n                      isExpanded ? \"rotate-180\" : \"rotate-0\",\n                    )}\n                  />\n                </Button>\n              </DropdownMenu.Trigger>\n\n              <DropdownMenu.Portal>\n                <DropdownMenu.Content\n                  ref={selectContentRef}\n                  className=\"bg-background rounded-lg border p-3 shadow-lg\"\n                  side=\"bottom\"\n                  align=\"start\"\n                  sideOffset={5}>\n                  <Select\n                    value={controlledValue}\n                    onValueChange={handleChange}\n                    disabled={config.disabled || false}>\n                    <SelectTrigger className=\"w-full\">\n                      <SelectValue\n                        placeholder={config.placeholder || \"Select option...\"}\n                      />\n                    </SelectTrigger>\n                    <SelectContent>\n                      {options.map((option) => (\n                        <SelectItem\n                          key={option.value}\n                          value={option.value}\n                          // TODO: Reimplement tooltip functionality\n                          // onMouseEnter={(e) => handleMouseEnter(e, option.value)}\n                          // onMouseLeave={handleMouseLeave}\n                          >\n                          {option.label}\n                        </SelectItem>\n                      ))}\n                    </SelectContent>\n                  </Select>\n                </DropdownMenu.Content>\n              </DropdownMenu.Portal>\n            </DropdownMenu.Root>\n          </div>\n        </BaseFilter>\n      </TooltipProvider>\n    );\n  }\n\n  // Default inline behavior\n  return (\n    <TooltipProvider>\n      <BaseFilter config={config} label={itemLabel}>\n        <div ref={containerRef} className=\"relative\">\n          <Select\n            value={controlledValue}\n            onValueChange={handleChange}\n            disabled={config.disabled || false}>\n            <SelectTrigger\n              ref={selectTriggerRef}\n              className=\"w-full\">\n              <SelectValue placeholder={config.placeholder || \"Select option...\"} />\n            </SelectTrigger>\n            <SelectContent ref={selectContentRef}>\n              {options.map((option) => (\n                <SelectItem\n                  key={option.value}\n                  value={option.value}\n                  // TODO: Reimplement tooltip functionality\n                  // onMouseEnter={(e) => handleMouseEnter(e, option.value)}\n                  // onMouseLeave={handleMouseLeave}\n                  >\n                  {option.label}\n                </SelectItem>\n              ))}\n              {/* TODO: Reimplement tooltip functionality */}\n              {/* {activeTooltip && (\n                <Tooltip open>\n                  <TooltipTrigger asChild>\n                    <div className=\"absolute\" style={{ left: activeTooltip.x, top: activeTooltip.y }} />\n                  </TooltipTrigger>\n                  <TooltipContent\n                    side=\"right\"\n                    align=\"start\"\n                    sideOffset={5}\n                    className=\"max-w-none\">\n                    {activeTooltip.content}\n                  </TooltipContent>\n                </Tooltip>\n              )} */}\n            </SelectContent>\n          </Select>\n        </div>\n      </BaseFilter>\n    </TooltipProvider>\n  );\n}\n\nexport { SelectFilter };\n"],"mappings":";;;;;;;;;AAsBA,SAAS,aAAuC,EAC9C,OACA,UACA,QACA,aACkC;CAClC,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CACnD,MAAM,mBAAmB,OAAuB,KAAK;CACrD,MAAM,mBAAmB,OAA0B,KAAK;CACxD,MAAM,eAAe,OAAuB,KAAK;CAKjD,MAAM,UAAU,OAAO,mBACnB,CACE;EACE,OAAO,OAAO,aAAa;EAC3B,OAAO;EACR,EACD,GAAI,OAAO,WAAW,EAAE,CACzB,GACD,OAAO,WAAW,EAAE;CAGxB,MAAM,kBAAkB,UAAU,UAAa,OAAO,mBAAmB,QAAQ;CAEjF,MAAM,gBAAgB,QAAgB;AACpC,MAAI,SAEF,KAAI,OAAO,oBAAoB,QAAQ,MACrC,UAAS,OAAU;MAEnB,UAAS,IAAI;AAKjB,MAAI,OAAO,cACT,eAAc,MAAM;;CAsBxB,MAAM,eAhBiB,QAAQ,MAAM,WAAW,OAAO,UAAU,gBAAgB,EAgB5C,SAAS,aAAa,OAAO,eAAe;AAGjF,KAAI,OAAO,cACT,QACE,oBAAC,6BACC,oBAAC;EAAmB;EAAQ,OAAO;YACjC,oBAAC;GAAI,KAAK;GAAc,WAAU;aAChC,qBAACA,eAAa;IAAK,MAAM;IAAY,cAAc;eACjD,oBAACA,eAAa;KAAQ;eACpB,qBAAC;MACC,KAAK;MACL,SAAQ;MACR,WAAU;iBACV,oBAAC;OAAK,WAAU;iBACb;QACI,EACP,oBAAC,eACC,WAAW,GACT,yDACA,aAAa,eAAe,WAC7B,GACD;OACK;MACY,EAEvB,oBAACA,eAAa,oBACZ,oBAACA,eAAa;KACZ,KAAK;KACL,WAAU;KACV,MAAK;KACL,OAAM;KACN,YAAY;eACZ,qBAAC;MACC,OAAO;MACP,eAAe;MACf,UAAU,OAAO,YAAY;iBAC7B,oBAAC;OAAc,WAAU;iBACvB,oBAAC,eACC,aAAa,OAAO,eAAe,qBACnC;QACY,EAChB,oBAAC,2BACE,QAAQ,KAAK,WACZ,oBAAC;OAEC,OAAO,OAAO;iBAKb,OAAO;SANH,OAAO,MAOD,CACb,GACY;OACT;MACY,GACH;KACJ;IAChB;GACK,GACG;AAKtB,QACE,oBAAC,6BACC,oBAAC;EAAmB;EAAQ,OAAO;YACjC,oBAAC;GAAI,KAAK;GAAc,WAAU;aAChC,qBAAC;IACC,OAAO;IACP,eAAe;IACf,UAAU,OAAO,YAAY;eAC7B,oBAAC;KACC,KAAK;KACL,WAAU;eACV,oBAAC,eAAY,aAAa,OAAO,eAAe,qBAAsB;MACxD,EAChB,oBAAC;KAAc,KAAK;eACjB,QAAQ,KAAK,WACZ,oBAAC;MAEC,OAAO,OAAO;gBAKb,OAAO;QANH,OAAO,MAOD,CACb;MAgBY;KACT;IACL;GACK,GACG;;;kBArLqB"}

package/dist/esm/components/data-table/toolbarItems/filters/components/TextFilter.d.ts

@@ -0,0 +1,12 @@
+import { BaseFilterComponentProps } from "../types.js";
+import { BaseRecord } from "@refinedev/core";
+
+//#region src/components/data-table/toolbarItems/filters/components/TextFilter.d.ts
+declare function TextFilter<TData extends BaseRecord>({
+  value,
+  onChange,
+  config
+}: BaseFilterComponentProps<TData>): any;
+//#endregion
+export { TextFilter };
+//# sourceMappingURL=TextFilter.d.ts.map

package/dist/esm/components/data-table/toolbarItems/filters/components/TextFilter.js

@@ -0,0 +1,30 @@
+import { __esmMin } from "../../../../../_virtual/rolldown_runtime.js";
+import { BaseFilter, init_BaseFilter } from "../BaseFilter.js";
+import { Input } from "@lumeweb/portal-framework-ui-core";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/data-table/toolbarItems/filters/components/TextFilter.tsx
+function TextFilter({ value, onChange, config }) {
+	const handleChange = (e) => {
+		if (onChange) onChange(e.target.value);
+	};
+	return /* @__PURE__ */ jsx(BaseFilter, {
+		config,
+		children: /* @__PURE__ */ jsx(Input, {
+			type: "text",
+			placeholder: config.placeholder || "Enter text...",
+			value: value || "",
+			onChange: handleChange,
+			disabled: config.disabled || false
+		})
+	});
+}
+var init_TextFilter = __esmMin(() => {
+	init_BaseFilter();
+});
+
+//#endregion
+init_TextFilter();
+export { TextFilter, init_TextFilter };
+//# sourceMappingURL=TextFilter.js.map

package/dist/esm/components/data-table/toolbarItems/filters/components/TextFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextFilter.js","names":[],"sources":["../../../../../../../src/components/data-table/toolbarItems/filters/components/TextFilter.tsx"],"sourcesContent":["import React from \"react\";\nimport { Input } from \"@lumeweb/portal-framework-ui-core\";\nimport { BaseFilter } from \"../BaseFilter\";\nimport type { BaseFilterComponentProps } from \"@/components/data-table/toolbarItems/filters/types\";\nimport { BaseRecord } from \"@refinedev/core\";\n\nfunction TextFilter<TData extends BaseRecord>({\n  value,\n  onChange,\n  config,\n}: BaseFilterComponentProps<TData>) {\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (onChange) {\n      onChange(e.target.value);\n    }\n  };\n\n  return (\n    <BaseFilter config={config}>\n      <Input\n        type=\"text\"\n        placeholder={config.placeholder || \"Enter text...\"}\n        value={value || \"\"}\n        onChange={handleChange}\n        disabled={config.disabled || false}\n      />\n    </BaseFilter>\n  );\n}\n\nexport { TextFilter };\n"],"mappings":";;;;;;;AAMA,SAAS,WAAqC,EAC5C,OACA,UACA,UACkC;CAClC,MAAM,gBAAgB,MAA2C;AAC/D,MAAI,SACF,UAAS,EAAE,OAAO,MAAM;;AAI5B,QACE,oBAAC;EAAmB;YAClB,oBAAC;GACC,MAAK;GACL,aAAa,OAAO,eAAe;GACnC,OAAO,SAAS;GAChB,UAAU;GACV,UAAU,OAAO,YAAY;IAC7B;GACS;;;kBAxB0B"}

package/dist/esm/components/data-table/toolbarItems/filters/components/index.d.ts

@@ -0,0 +1,9 @@
+import { BooleanFilter } from "./BooleanFilter.js";
+import { DateFilter } from "./DateFilter.js";
+import { MultiSelectFilter, MultiSelectFilterProps } from "./MultiSelectFilter.js";
+import { NumberFilter } from "./NumberFilter.js";
+import { RangeFilter, RangeValue } from "./RangeFilter.js";
+import { SearchFilter } from "./SearchFilter.js";
+import { SelectFilter } from "./SelectFilter.js";
+import { TextFilter } from "./TextFilter.js";
+export { BooleanFilter, DateFilter, MultiSelectFilter, MultiSelectFilterProps, NumberFilter, RangeFilter, RangeValue, SearchFilter, SelectFilter, TextFilter };

package/dist/esm/components/data-table/toolbarItems/filters/components/index.js

@@ -0,0 +1,26 @@
+import { __esmMin } from "../../../../../_virtual/rolldown_runtime.js";
+import { BooleanFilter, init_BooleanFilter } from "./BooleanFilter.js";
+import { DateFilter, init_DateFilter } from "./DateFilter.js";
+import { MultiSelectFilter, init_MultiSelectFilter } from "./MultiSelectFilter.js";
+import { NumberFilter, init_NumberFilter } from "./NumberFilter.js";
+import { RangeFilter, init_RangeFilter } from "./RangeFilter.js";
+import { SearchFilter, init_SearchFilter } from "./SearchFilter.js";
+import { SelectFilter, init_SelectFilter } from "./SelectFilter.js";
+import { TextFilter, init_TextFilter } from "./TextFilter.js";
+
+//#region src/components/data-table/toolbarItems/filters/components/index.ts
+var init_components = __esmMin(() => {
+	init_BooleanFilter();
+	init_DateFilter();
+	init_MultiSelectFilter();
+	init_NumberFilter();
+	init_RangeFilter();
+	init_SearchFilter();
+	init_SelectFilter();
+	init_TextFilter();
+});
+
+//#endregion
+init_components();
+export { BooleanFilter, DateFilter, MultiSelectFilter, NumberFilter, RangeFilter, SearchFilter, SelectFilter, TextFilter, init_components };
+//# sourceMappingURL=index.js.map

package/dist/esm/components/data-table/toolbarItems/filters/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../../../src/components/data-table/toolbarItems/filters/components/index.ts"],"sourcesContent":["export * from \"./BooleanFilter\";\nexport * from \"./DateFilter\";\nexport * from \"./MultiSelectFilter\";\nexport * from \"./NumberFilter\";\nexport * from \"./RangeFilter\";\nexport * from \"./SearchFilter\";\nexport * from \"./SelectFilter\";\nexport * from \"./TextFilter\";\n"],"mappings":""}

package/dist/esm/components/data-table/toolbarItems/filters/hooks/useFilterOperators.d.ts

@@ -0,0 +1,49 @@
+import { FilterOperator } from "../types.js";
+
+//#region src/components/data-table/toolbarItems/filters/hooks/useFilterOperators.d.ts
+
+/**
+ * Default operators mapping based on data types
+ */
+declare const DEFAULT_OPERATORS: Record<string, FilterOperator>;
+/**
+ * Get available operators for a specific field type
+ */
+declare const getAvailableOperators: (type: string) => FilterOperator[];
+/**
+ * Get default operator for a field type
+ * @param fieldType - The type of field to get default operator for
+ * @returns The default operator for the field type
+ */
+declare const getDefaultOperatorForFieldType: (fieldType: string) => FilterOperator;
+/**
+ * Get the default operator for a field type
+ */
+declare const getDefaultOperator: (type: string) => FilterOperator;
+/**
+ * Hook for managing filter operators with defaults based on filter type
+ *
+ * This hook provides a clean API for handling filter operators in components,
+ * automatically setting appropriate default operators based on the data type
+ * and allowing for custom operator selection.
+ *
+ * @template TData - The type of data being filtered
+ * @param fieldType - The type of field being filtered (string, number, boolean, date, array)
+ * @param initialOperator - Optional initial operator to override defaults
+ * @returns An object containing the current operator and setter function
+ */
+declare function useFilterOperators<TData = any>(fieldType: string, initialOperator?: FilterOperator): {
+  /** Current operator */
+  operator: any;
+  /** Setter function for operator */
+  setOperator: any;
+  /** Function to get available operators for a field type */
+  getAvailableOperators: (type: string) => FilterOperator[];
+  /** Function to get default operator for a field type */
+  getDefaultOperator: (type: string) => FilterOperator;
+  /** Function to reset operator to default */
+  resetOperator: () => void;
+};
+//#endregion
+export { DEFAULT_OPERATORS, getAvailableOperators, getDefaultOperator, getDefaultOperatorForFieldType, useFilterOperators };
+//# sourceMappingURL=useFilterOperators.d.ts.map

package/dist/esm/components/data-table/toolbarItems/filters/hooks/useFilterOperators.js

@@ -0,0 +1,89 @@
+import { __esmMin } from "../../../../../_virtual/rolldown_runtime.js";
+import { FilterOperator, init_types } from "../types.js";
+import { useEffect, useState } from "react";
+
+//#region src/components/data-table/toolbarItems/filters/hooks/useFilterOperators.ts
+/**
+* Hook for managing filter operators with defaults based on filter type
+*
+* This hook provides a clean API for handling filter operators in components,
+* automatically setting appropriate default operators based on the data type
+* and allowing for custom operator selection.
+*
+* @template TData - The type of data being filtered
+* @param fieldType - The type of field being filtered (string, number, boolean, date, array)
+* @param initialOperator - Optional initial operator to override defaults
+* @returns An object containing the current operator and setter function
+*/
+function useFilterOperators(fieldType, initialOperator) {
+	const [operator, setOperator] = useState(initialOperator || DEFAULT_OPERATORS[fieldType] || FilterOperator.EQ);
+	/**
+	* Reset operator to default for the field type
+	*/
+	const resetOperator = () => {
+		setOperator(getDefaultOperator(fieldType));
+	};
+	useEffect(() => {
+		if (initialOperator !== void 0) setOperator(initialOperator);
+		else setOperator(getDefaultOperator(fieldType));
+	}, [fieldType, initialOperator]);
+	return {
+		operator,
+		setOperator,
+		getAvailableOperators,
+		getDefaultOperator,
+		resetOperator
+	};
+}
+var DEFAULT_OPERATORS, getAvailableOperators, getDefaultOperatorForFieldType, getDefaultOperator;
+var init_useFilterOperators = __esmMin(() => {
+	init_types();
+	DEFAULT_OPERATORS = {
+		string: FilterOperator.CONTAINS,
+		number: FilterOperator.EQ,
+		boolean: FilterOperator.EQ,
+		date: FilterOperator.GTE,
+		array: FilterOperator.IN
+	};
+	getAvailableOperators = (type) => {
+		switch (type) {
+			case "string": return [
+				FilterOperator.CONTAINS,
+				FilterOperator.EQ,
+				FilterOperator.NE,
+				FilterOperator.STARTS_WITH,
+				FilterOperator.ENDS_WITH
+			];
+			case "number": return [
+				FilterOperator.EQ,
+				FilterOperator.NE,
+				FilterOperator.LT,
+				FilterOperator.GT,
+				FilterOperator.LTE,
+				FilterOperator.GTE
+			];
+			case "boolean": return [FilterOperator.EQ];
+			case "date": return [
+				FilterOperator.EQ,
+				FilterOperator.NE,
+				FilterOperator.LT,
+				FilterOperator.GT,
+				FilterOperator.LTE,
+				FilterOperator.GTE
+			];
+			case "array": return [FilterOperator.IN, FilterOperator.NIN];
+			default: return [FilterOperator.EQ, FilterOperator.NE];
+		}
+	};
+	getDefaultOperatorForFieldType = (fieldType) => {
+		return DEFAULT_OPERATORS[fieldType] || FilterOperator.EQ;
+	};
+	getDefaultOperator = (type) => {
+		return getDefaultOperatorForFieldType(type);
+	};
+});
+
+//#endregion
+init_useFilterOperators();
+export { DEFAULT_OPERATORS, getAvailableOperators, getDefaultOperator, getDefaultOperatorForFieldType, init_useFilterOperators, useFilterOperators };
+//# sourceMappingURL=useFilterOperators.js.map

package/dist/esm/components/data-table/toolbarItems/filters/hooks/useFilterOperators.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFilterOperators.js","names":[],"sources":["../../../../../../../src/components/data-table/toolbarItems/filters/hooks/useFilterOperators.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { FilterOperator } from \"@/components/data-table/toolbarItems/filters/types\";\n\n/**\n * Default operators mapping based on data types\n */\nexport const DEFAULT_OPERATORS: Record<string, FilterOperator> = {\n  string: FilterOperator.CONTAINS,\n  number: FilterOperator.EQ,\n  boolean: FilterOperator.EQ,\n  date: FilterOperator.GTE,\n  array: FilterOperator.IN,\n};\n\n/**\n * Get available operators for a specific field type\n */\nexport const getAvailableOperators = (\n  type: string,\n): FilterOperator[] => {\n  switch (type) {\n    case \"string\":\n      return [\n        FilterOperator.CONTAINS,\n        FilterOperator.EQ,\n        FilterOperator.NE,\n        FilterOperator.STARTS_WITH,\n        FilterOperator.ENDS_WITH,\n      ];\n    case \"number\":\n      return [\n        FilterOperator.EQ,\n        FilterOperator.NE,\n        FilterOperator.LT,\n        FilterOperator.GT,\n        FilterOperator.LTE,\n        FilterOperator.GTE,\n      ];\n    case \"boolean\":\n      return [FilterOperator.EQ];\n    case \"date\":\n      return [\n        FilterOperator.EQ,\n        FilterOperator.NE,\n        FilterOperator.LT,\n        FilterOperator.GT,\n        FilterOperator.LTE,\n        FilterOperator.GTE,\n      ];\n    case \"array\":\n      return [FilterOperator.IN, FilterOperator.NIN];\n    default:\n      return [FilterOperator.EQ, FilterOperator.NE];\n  }\n};\n\n/**\n * Get default operator for a field type\n * @param fieldType - The type of field to get default operator for\n * @returns The default operator for the field type\n */\nexport const getDefaultOperatorForFieldType = (fieldType: string): FilterOperator => {\n  return DEFAULT_OPERATORS[fieldType] || FilterOperator.EQ;\n};\n\n/**\n * Get the default operator for a field type\n */\nexport const getDefaultOperator = (\n  type: string,\n): FilterOperator => {\n  return getDefaultOperatorForFieldType(type);\n};\n\n/**\n * Hook for managing filter operators with defaults based on filter type\n *\n * This hook provides a clean API for handling filter operators in components,\n * automatically setting appropriate default operators based on the data type\n * and allowing for custom operator selection.\n *\n * @template TData - The type of data being filtered\n * @param fieldType - The type of field being filtered (string, number, boolean, date, array)\n * @param initialOperator - Optional initial operator to override defaults\n * @returns An object containing the current operator and setter function\n */\nexport function useFilterOperators<TData = any>(\n  fieldType: string,\n  initialOperator?: FilterOperator,\n) {\n  const [operator, setOperator] = useState<FilterOperator>(\n    initialOperator || DEFAULT_OPERATORS[fieldType] || FilterOperator.EQ,\n  );\n\n  /**\n   * Reset operator to default for the field type\n   */\n  const resetOperator = () => {\n    setOperator(getDefaultOperator(fieldType));\n  };\n\n  // Update operator when fieldType or initialOperator changes\n  useEffect(() => {\n    if (initialOperator !== undefined) {\n      setOperator(initialOperator);\n    } else {\n      setOperator(getDefaultOperator(fieldType));\n    }\n  }, [fieldType, initialOperator]);\n\n  return {\n    /** Current operator */\n    operator,\n    /** Setter function for operator */\n    setOperator,\n    /** Function to get available operators for a field type */\n    getAvailableOperators,\n    /** Function to get default operator for a field type */\n    getDefaultOperator,\n    /** Function to reset operator to default */\n    resetOperator,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAsFA,SAAgB,mBACd,WACA,iBACA;CACA,MAAM,CAAC,UAAU,eAAe,SAC9B,mBAAmB,kBAAkB,cAAc,eAAe,GACnE;;;;CAKD,MAAM,sBAAsB;AAC1B,cAAY,mBAAmB,UAAU,CAAC;;AAI5C,iBAAgB;AACd,MAAI,oBAAoB,OACtB,aAAY,gBAAgB;MAE5B,aAAY,mBAAmB,UAAU,CAAC;IAE3C,CAAC,WAAW,gBAAgB,CAAC;AAEhC,QAAO;EAEL;EAEA;EAEA;EAEA;EAEA;EACD;;;;aAxHiF;CAKvE,oBAAoD;EAC/D,QAAQ,eAAe;EACvB,QAAQ,eAAe;EACvB,SAAS,eAAe;EACxB,MAAM,eAAe;EACrB,OAAO,eAAe;EACvB;CAKY,yBACX,SACqB;AACrB,UAAQ,MAAR;GACE,KAAK,SACH,QAAO;IACL,eAAe;IACf,eAAe;IACf,eAAe;IACf,eAAe;IACf,eAAe;IAChB;GACH,KAAK,SACH,QAAO;IACL,eAAe;IACf,eAAe;IACf,eAAe;IACf,eAAe;IACf,eAAe;IACf,eAAe;IAChB;GACH,KAAK,UACH,QAAO,CAAC,eAAe,GAAG;GAC5B,KAAK,OACH,QAAO;IACL,eAAe;IACf,eAAe;IACf,eAAe;IACf,eAAe;IACf,eAAe;IACf,eAAe;IAChB;GACH,KAAK,QACH,QAAO,CAAC,eAAe,IAAI,eAAe,IAAI;GAChD,QACE,QAAO,CAAC,eAAe,IAAI,eAAe,GAAG;;;CAStC,kCAAkC,cAAsC;AACnF,SAAO,kBAAkB,cAAc,eAAe;;CAM3C,sBACX,SACmB;AACnB,SAAO,+BAA+B,KAAK"}

package/dist/esm/components/data-table/toolbarItems/filters/hooks/useFilterTooltip.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+
+//#region src/components/data-table/toolbarItems/filters/hooks/useFilterTooltip.d.ts
+interface ActiveTooltip {
+  content: string;
+  x: number;
+  y: number;
+}
+interface UseFilterTooltipReturn {
+  activeTooltip: ActiveTooltip | null;
+  tooltipRef: React.RefObject<HTMLDivElement>;
+  handleItemHover: (content: string, e: React.MouseEvent, containerRef?: React.RefObject<HTMLElement>) => void;
+  handleItemLeave: () => void;
+  closeTooltip: () => void;
+}
+declare function useFilterTooltip(): UseFilterTooltipReturn;
+//#endregion
+export { useFilterTooltip };
+//# sourceMappingURL=useFilterTooltip.d.ts.map

package/dist/esm/components/data-table/toolbarItems/filters/hooks/useFilterTooltip.js

@@ -0,0 +1,34 @@
+import { useRef, useState } from "react";
+
+//#region src/components/data-table/toolbarItems/filters/hooks/useFilterTooltip.ts
+function useFilterTooltip() {
+	const [activeTooltip, setActiveTooltip] = useState(null);
+	const tooltipRef = useRef(null);
+	const handleItemHover = (content, e, containerRef) => {
+		if (content && containerRef?.current) {
+			const containerRect = containerRef.current.getBoundingClientRect();
+			setActiveTooltip({
+				content,
+				x: (e.clientX - containerRect.width) / 2,
+				y: (e.clientY - containerRect.height) / 2 * .85
+			});
+		} else setActiveTooltip(null);
+	};
+	const handleItemLeave = () => {
+		setActiveTooltip(null);
+	};
+	const closeTooltip = () => {
+		setActiveTooltip(null);
+	};
+	return {
+		activeTooltip,
+		tooltipRef,
+		handleItemHover,
+		handleItemLeave,
+		closeTooltip
+	};
+}
+
+//#endregion
+export { useFilterTooltip };
+//# sourceMappingURL=useFilterTooltip.js.map

package/dist/esm/components/data-table/toolbarItems/filters/hooks/useFilterTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFilterTooltip.js","names":[],"sources":["../../../../../../../src/components/data-table/toolbarItems/filters/hooks/useFilterTooltip.ts"],"sourcesContent":["import React, { useState, useRef } from \"react\";\n\ninterface ActiveTooltip {\n  content: string;\n  x: number;\n  y: number;\n}\n\ninterface UseFilterTooltipReturn {\n  activeTooltip: ActiveTooltip | null;\n  tooltipRef: React.RefObject<HTMLDivElement>;\n  handleItemHover: (content: string, e: React.MouseEvent, containerRef?: React.RefObject<HTMLElement>) => void;\n  handleItemLeave: () => void;\n  closeTooltip: () => void;\n}\n\nexport function useFilterTooltip(): UseFilterTooltipReturn {\n  const [activeTooltip, setActiveTooltip] = useState<ActiveTooltip | null>(null);\n  const tooltipRef = useRef<HTMLDivElement>(null);\n\n  const handleItemHover = (content: string, e: React.MouseEvent, containerRef?: React.RefObject<HTMLElement>) => {\n    if (content && containerRef?.current) {\n      const containerRect = containerRef.current.getBoundingClientRect();\n\n      const x = (e.clientX - containerRect.width) / 2;\n      const y = ((e.clientY - containerRect.height) / 2) * 0.85;\n\n      setActiveTooltip({\n        content,\n        x,\n        y,\n      });\n    } else {\n      setActiveTooltip(null);\n    }\n  };\n\n  const handleItemLeave = () => {\n    setActiveTooltip(null);\n  };\n\n  const closeTooltip = () => {\n    setActiveTooltip(null);\n  };\n\n  return {\n    activeTooltip,\n    tooltipRef,\n    handleItemHover,\n    handleItemLeave,\n    closeTooltip,\n  };\n}"],"mappings":";;;AAgBA,SAAgB,mBAA2C;CACzD,MAAM,CAAC,eAAe,oBAAoB,SAA+B,KAAK;CAC9E,MAAM,aAAa,OAAuB,KAAK;CAE/C,MAAM,mBAAmB,SAAiB,GAAqB,iBAAgD;AAC7G,MAAI,WAAW,cAAc,SAAS;GACpC,MAAM,gBAAgB,aAAa,QAAQ,uBAAuB;AAKlE,oBAAiB;IACf;IACA,IALS,EAAE,UAAU,cAAc,SAAS;IAM5C,IALU,EAAE,UAAU,cAAc,UAAU,IAAK;IAMpD,CAAC;QAEF,kBAAiB,KAAK;;CAI1B,MAAM,wBAAwB;AAC5B,mBAAiB,KAAK;;CAGxB,MAAM,qBAAqB;AACzB,mBAAiB,KAAK;;AAGxB,QAAO;EACL;EACA;EACA;EACA;EACA;EACD"}

package/dist/esm/components/data-table/toolbarItems/filters/index.d.ts

@@ -0,0 +1,12 @@
+import { ActionType, BaseFilterComponentProps, FilterComponentProps, FilterConfig, FilterOperator, FilterType, LogicalFilterOperator, SelectOption } from "./types.js";
+import { BooleanFilter } from "./components/BooleanFilter.js";
+import { DateFilter } from "./components/DateFilter.js";
+import { MultiSelectFilter, MultiSelectFilterProps } from "./components/MultiSelectFilter.js";
+import { NumberFilter } from "./components/NumberFilter.js";
+import { RangeFilter, RangeValue } from "./components/RangeFilter.js";
+import { SearchFilter } from "./components/SearchFilter.js";
+import { SelectFilter } from "./components/SelectFilter.js";
+import { TextFilter } from "./components/TextFilter.js";
+import "./components/index.js";
+import { createFilterOnChangeHandler, createFiltersFromValue } from "./util.js";
+export { ActionType, BaseFilterComponentProps, BooleanFilter, DateFilter, FilterComponentProps, FilterConfig, FilterOperator, FilterType, LogicalFilterOperator, MultiSelectFilter, MultiSelectFilterProps, NumberFilter, RangeFilter, RangeValue, SearchFilter, SelectFilter, SelectOption, TextFilter, createFilterOnChangeHandler, createFiltersFromValue };

package/dist/esm/components/data-table/toolbarItems/filters/index.js

@@ -0,0 +1,24 @@
+import { __esmMin } from "../../../../_virtual/rolldown_runtime.js";
+import { ActionType, FilterOperator, FilterType, init_types } from "./types.js";
+import { BooleanFilter } from "./components/BooleanFilter.js";
+import { DateFilter } from "./components/DateFilter.js";
+import { MultiSelectFilter } from "./components/MultiSelectFilter.js";
+import { NumberFilter } from "./components/NumberFilter.js";
+import { RangeFilter } from "./components/RangeFilter.js";
+import { SearchFilter } from "./components/SearchFilter.js";
+import { SelectFilter } from "./components/SelectFilter.js";
+import { TextFilter } from "./components/TextFilter.js";
+import { init_components } from "./components/index.js";
+import { createFilterOnChangeHandler, createFiltersFromValue, init_util } from "./util.js";
+
+//#region src/components/data-table/toolbarItems/filters/index.ts
+var init_filters = __esmMin(() => {
+	init_components();
+	init_util();
+	init_types();
+});
+
+//#endregion
+init_filters();
+export { ActionType, BooleanFilter, DateFilter, FilterOperator, FilterType, MultiSelectFilter, NumberFilter, RangeFilter, SearchFilter, SelectFilter, TextFilter, createFilterOnChangeHandler, createFiltersFromValue, init_filters };
+//# sourceMappingURL=index.js.map

package/dist/esm/components/data-table/toolbarItems/filters/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../../src/components/data-table/toolbarItems/filters/index.ts"],"sourcesContent":["export * from \"./components\";\nexport * from \"./util\";\nexport * from \"./types\";\n"],"mappings":""}

package/dist/esm/components/data-table/toolbarItems/filters/register.d.ts

@@ -0,0 +1,8 @@
+import "./components/BooleanFilter.js";
+import "./components/DateFilter.js";
+import "./components/MultiSelectFilter.js";
+import "./components/NumberFilter.js";
+import "./components/RangeFilter.js";
+import "./components/SearchFilter.js";
+import "./components/SelectFilter.js";
+import "./components/TextFilter.js";

package/dist/esm/components/data-table/toolbarItems/filters/register.js

@@ -0,0 +1,21 @@
+import { init_BooleanFilter } from "./components/BooleanFilter.js";
+import { init_DateFilter } from "./components/DateFilter.js";
+import { init_MultiSelectFilter } from "./components/MultiSelectFilter.js";
+import { init_NumberFilter } from "./components/NumberFilter.js";
+import { init_RangeFilter } from "./components/RangeFilter.js";
+import { init_SearchFilter } from "./components/SearchFilter.js";
+import { init_SelectFilter } from "./components/SelectFilter.js";
+import { init_TextFilter } from "./components/TextFilter.js";
+
+//#region src/components/data-table/toolbarItems/filters/register.ts
+init_TextFilter();
+init_SelectFilter();
+init_NumberFilter();
+init_DateFilter();
+init_BooleanFilter();
+init_MultiSelectFilter();
+init_RangeFilter();
+init_SearchFilter();
+
+//#endregion
+//# sourceMappingURL=register.js.map

package/dist/esm/components/data-table/toolbarItems/filters/register.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"register.js","names":[],"sources":["../../../../../../src/components/data-table/toolbarItems/filters/register.ts"],"sourcesContent":["// Import and register all filter items\n// Each component handles its own registration when imported\nimport \"./components/TextFilter\";\nimport \"./components/SelectFilter\";\nimport \"./components/NumberFilter\";\nimport \"./components/DateFilter\";\nimport \"./components/BooleanFilter\";\nimport \"./components/MultiSelectFilter\";\nimport \"./components/RangeFilter\";\nimport \"./components/SearchFilter\";\n"],"mappings":";;;;;;;;;;iBAEiC;mBACE;mBACA;iBACF;oBACG;wBACI;kBACN;mBACC"}