@multiplatform.one/table 6.0.0

package/dist/cjs/components/DataTableFilters/index.cjs

@@ -0,0 +1,600 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var DataTableFilters_exports = {};
+__export(DataTableFilters_exports, {
+  DataTableFilters: () => DataTableFilters
+});
+module.exports = __toCommonJS(DataTableFilters_exports);
+var import_react = require("@phosphor-icons/react");
+var import_theme = require("@multiplatform.one/theme");
+var import_react2 = require("react");
+var import_forms = require("@multiplatform.one/forms");
+var import_tamagui = require("tamagui");
+var import_filterUtils = require("../../utils/filterUtils.cjs");
+var import_DataTableStateContext = require("../DataTable/DataTableStateContext.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+function DataTableFilters(props) {
+  const ctx = (0, import_DataTableStateContext.useDataTableState)();
+  const filters = props.filters ?? ctx?.state.filters ?? [];
+  const onFiltersChange = props.onFiltersChange ?? ctx?.actions.setFilters ?? (() => {});
+  const onAddFilter = props.onAddFilter ?? ctx?.actions.addFilter ?? (() => {});
+  const onRemoveFilter = props.onRemoveFilter ?? ctx?.actions.removeFilter ?? (() => {});
+  const onClearFilters = props.onClearFilters ?? ctx?.actions.clearFilters ?? (() => {});
+  const availableColumns = props.availableColumns ?? [];
+  const {
+    maxFilters = 10,
+    showFilterCount = true,
+    compact = false
+  } = props;
+  const [showFilterBuilder, setShowFilterBuilder] = (0, import_react2.useState)(false);
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const canAddMoreFilters = filters.length < maxFilters;
+  const handleAddFilter = filter => {
+    onAddFilter(filter);
+    setShowFilterBuilder(false);
+  };
+  const handleUpdateFilter = (filterId, updates) => {
+    const updatedFilters = filters.map(filter => filter.id === filterId ? {
+      ...filter,
+      ...updates
+    } : filter);
+    onFiltersChange(updatedFilters);
+  };
+  if (compact) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      alignItems: "center",
+      gap: "$2",
+      children: [filters.length > 0 && showFilterCount && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        backgroundColor: "$accentBackground",
+        paddingHorizontal: "$2",
+        paddingVertical: "$1",
+        borderRadius: knobProps.borderRadius.borderRadius,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          color: "$accentColor",
+          fontSize: "$2",
+          children: filters.length
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Popover, {
+        open: showFilterBuilder,
+        onOpenChange: setShowFilterBuilder,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Trigger, {
+          asChild: true,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+            size: knobProps.sizeToken,
+            variant: "outlined",
+            icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.PlusIcon, {
+              size: 16
+            }),
+            disabled: !canAddMoreFilters,
+            children: "Add Filter"
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Content, {
+          ...knobProps.borderRadius,
+          borderWidth: 1,
+          borderColor: "$color6",
+          backgroundColor: "$background",
+          enterStyle: {
+            x: 0,
+            y: -10,
+            opacity: 0
+          },
+          exitStyle: {
+            x: 0,
+            y: -10,
+            opacity: 0
+          },
+          transition: ["quick", {
+            opacity: {
+              overshootClamping: true
+            }
+          }],
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(FilterBuilder, {
+            availableColumns,
+            onAddFilter: handleAddFilter,
+            onCancel: () => setShowFilterBuilder(false)
+          })
+        })]
+      }), filters.length > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+        size: knobProps.sizeToken,
+        variant: "outlined",
+        onPress: onClearFilters,
+        icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.XIcon, {
+          size: 16
+        }),
+        children: "Clear"
+      })]
+    });
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    ...knobProps.borderRadius,
+    gap: "$4",
+    padding: "$4",
+    backgroundColor: "$background",
+    borderWidth: 1,
+    borderColor: "$color6",
+    "aria-label": "Table filters",
+    "aria-live": "polite",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      alignItems: "center",
+      justifyContent: "space-between",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        alignItems: "center",
+        gap: "$2",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.FunnelIcon, {
+          size: 16,
+          "aria-hidden": true
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          fontSize: "$4",
+          fontWeight: "600",
+          id: "filters-heading",
+          children: "Filters"
+        }), showFilterCount && filters.length > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+          backgroundColor: "$accentBackground",
+          paddingHorizontal: "$2",
+          paddingVertical: "$1",
+          borderRadius: knobProps.borderRadius.borderRadius,
+          "aria-label": `${filters.length} active filters`,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            color: "$accentColor",
+            fontSize: "$2",
+            children: filters.length
+          })
+        })]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        ...{
+          tag: "fieldset"
+        },
+        alignItems: "center",
+        gap: "$2",
+        "aria-label": "Filter management actions",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Popover, {
+          open: showFilterBuilder,
+          onOpenChange: setShowFilterBuilder,
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Trigger, {
+            asChild: true,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+              size: knobProps.sizeToken,
+              variant: "outlined",
+              icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.PlusIcon, {
+                size: 16
+              }),
+              disabled: !canAddMoreFilters,
+              "aria-label": "Add new filter",
+              "aria-expanded": showFilterBuilder,
+              "aria-haspopup": "dialog",
+              children: "Add Filter"
+            })
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Content, {
+            ...knobProps.borderRadius,
+            borderWidth: 1,
+            borderColor: "$color6",
+            backgroundColor: "$background",
+            enterStyle: {
+              x: 0,
+              y: -10,
+              opacity: 0
+            },
+            exitStyle: {
+              x: 0,
+              y: -10,
+              opacity: 0
+            },
+            transition: ["quick", {
+              opacity: {
+                opacity: {
+                  overshootClamping: true
+                }
+              }
+            }],
+            maxWidth: 400,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(FilterBuilder, {
+              availableColumns,
+              onAddFilter: handleAddFilter,
+              onCancel: () => setShowFilterBuilder(false)
+            })
+          })]
+        }), filters.length > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+          size: knobProps.sizeToken,
+          variant: "outlined",
+          onPress: onClearFilters,
+          icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.XIcon, {
+            size: 16
+          }),
+          "aria-label": "Clear all filters",
+          children: "Clear All"
+        })]
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}), filters.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
+      maxHeight: 200,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+        ...{
+          tag: "ul"
+        },
+        gap: "$2",
+        padding: 0,
+        margin: 0,
+        "aria-label": "Active filters",
+        "aria-describedby": "filters-heading",
+        children: filters.map((filter, index) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(ActiveFilter, {
+          filter,
+          availableColumns,
+          onUpdate: updates => handleUpdateFilter(filter.id, updates),
+          onRemove: () => onRemoveFilter(filter.id),
+          index
+        }, filter.id))
+      })
+    }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      ...{
+        tag: "output"
+      },
+      padding: "$4",
+      alignItems: "center",
+      "aria-live": "polite",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        fontSize: "$3",
+        color: "$color10",
+        children: "No filters applied"
+      })
+    })]
+  });
+}
+function FilterBuilder({
+  availableColumns,
+  onAddFilter,
+  onCancel
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const sz = knobProps.sizeToken;
+  const builderMinWidth = sz === "$3" ? 240 : sz === "$5" ? 360 : 300;
+  const [selectedColumnId, setSelectedColumnId] = (0, import_react2.useState)("");
+  const [selectedOperator, setSelectedOperator] = (0, import_react2.useState)("is");
+  const [filterValue, setFilterValue] = (0, import_react2.useState)("");
+  const [filterValues, setFilterValues] = (0, import_react2.useState)([]);
+  const selectedColumn = availableColumns.find(col => col.id === selectedColumnId);
+  const availableOperators = (0, import_react2.useMemo)(() => {
+    if (!selectedColumn) return [];
+    const baseOperators = ["is", "isNot"];
+    switch (selectedColumn.type) {
+      case "text":
+        return [...baseOperators, "contains", "doesNotContain", "startsWith", "endsWith", "isEmpty", "isNotEmpty"];
+      case "number":
+        return [...baseOperators, "isLessThan", "isGreaterThan", "isLessThanOrEqual", "isGreaterThanOrEqual", "isBetween", "isNotBetween"];
+      case "date":
+        return [...baseOperators, "isBefore", "isAfter", "isOnOrBefore", "isOnOrAfter", "isBetween", "isNotBetween"];
+      case "boolean":
+        return baseOperators;
+      default:
+        return baseOperators;
+    }
+  }, [selectedColumn]);
+  const columnOptions = (0, import_react2.useMemo)(() => availableColumns.map(col => ({
+    value: col.id,
+    label: col.label
+  })), [availableColumns]);
+  const operatorOptions = (0, import_react2.useMemo)(() => availableOperators.map(op => ({
+    value: op,
+    label: getOperatorLabel(op)
+  })), [availableOperators]);
+  const handleAddFilter = () => {
+    if (!selectedColumnId || !selectedOperator) return;
+    const filterValueObj = {
+      operator: selectedOperator,
+      value: null
+    };
+    if (["isBetween", "isNotBetween"].includes(selectedOperator)) {
+      filterValueObj.values = filterValues;
+    } else if (["isAnyOf", "isNoneOf"].includes(selectedOperator)) {
+      filterValueObj.values = filterValues;
+    } else if (!["isEmpty", "isNotEmpty"].includes(selectedOperator)) {
+      filterValueObj.value = filterValue;
+    }
+    onAddFilter({
+      columnId: selectedColumnId,
+      value: filterValueObj,
+      label: selectedColumn?.label
+    });
+    setSelectedColumnId("");
+    setSelectedOperator("is");
+    setFilterValue("");
+    setFilterValues([]);
+  };
+  const renderValueInput = () => {
+    if (!selectedColumn || ["isEmpty", "isNotEmpty"].includes(selectedOperator)) {
+      return null;
+    }
+    if (["isBetween", "isNotBetween"].includes(selectedOperator)) {
+      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        gap: "$2",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Input, {
+          placeholder: "Min value",
+          value: filterValues[0] || "",
+          onChangeText: text => {
+            const newValues = [...filterValues];
+            newValues[0] = text;
+            setFilterValues(newValues);
+          }
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Input, {
+          placeholder: "Max value",
+          value: filterValues[1] || "",
+          onChangeText: text => {
+            const newValues = [...filterValues];
+            newValues[1] = text;
+            setFilterValues(newValues);
+          }
+        })]
+      });
+    }
+    if (["isAnyOf", "isNoneOf"].includes(selectedOperator)) {
+      if (selectedColumn.options) {
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
+          maxHeight: 120,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+            gap: "$1",
+            children: selectedColumn.options.map(option => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+              alignItems: "center",
+              gap: "$2",
+              children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("input", {
+                type: "checkbox",
+                checked: filterValues.includes(option.value),
+                onChange: e => {
+                  if (e.target.checked) {
+                    setFilterValues([...filterValues, option.value]);
+                  } else {
+                    setFilterValues(filterValues.filter(v => v !== option.value));
+                  }
+                }
+              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                fontSize: "$3",
+                children: option.label
+              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+                backgroundColor: "$color5",
+                paddingHorizontal: "$1",
+                paddingVertical: "$0.5",
+                borderRadius: "$1",
+                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                  color: "$color10",
+                  fontSize: "$1",
+                  children: option.count
+                })
+              })]
+            }, String(option.value)))
+          })
+        });
+      }
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Input, {
+        placeholder: "Enter values separated by commas",
+        value: filterValues.join(", "),
+        onChangeText: text => {
+          setFilterValues(text.split(",").map(v => v.trim()));
+        }
+      });
+    }
+    if (selectedColumn.type === "date") {
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Input, {
+        label: "Value",
+        placeholder: "YYYY-MM-DD",
+        value: filterValue,
+        onChangeText: setFilterValue
+      });
+    }
+    if (selectedColumn.type === "boolean") {
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Select, {
+        label: "Value",
+        value: filterValue,
+        onValueChange: v => {
+          if (typeof v === "string") {
+            setFilterValue(v);
+          }
+        },
+        options: [{
+          value: "true",
+          label: "True"
+        }, {
+          value: "false",
+          label: "False"
+        }],
+        placeholder: "Select value"
+      });
+    }
+    if (selectedColumn.options) {
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Select, {
+        label: "Value",
+        value: filterValue,
+        onValueChange: v => {
+          if (typeof v === "string") {
+            setFilterValue(v);
+          }
+        },
+        options: selectedColumn.options.map(option => ({
+          value: option.value.toString(),
+          label: option.label
+        })),
+        placeholder: "Select value"
+      });
+    }
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Input, {
+      label: "Value",
+      placeholder: "Enter value",
+      value: filterValue,
+      onChangeText: setFilterValue,
+      ...(selectedColumn.type === "number" && {
+        keyboardType: "numeric"
+      })
+    });
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    ...knobProps.panelPadding,
+    gap: "$4",
+    minWidth: builderMinWidth,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      fontSize: "$4",
+      fontWeight: "600",
+      children: "Add Filter"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Select, {
+      label: "Column",
+      value: selectedColumnId,
+      onValueChange: v => {
+        if (typeof v === "string") {
+          setSelectedColumnId(v);
+        }
+      },
+      options: columnOptions,
+      placeholder: "Select column"
+    }), selectedColumnId && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Select, {
+      label: "Condition",
+      value: selectedOperator,
+      onValueChange: v => {
+        if (typeof v === "string") {
+          setSelectedOperator(v);
+        }
+      },
+      options: operatorOptions
+    }), selectedColumnId && renderValueInput(), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      gap: "$2",
+      justifyContent: "flex-end",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+        size: knobProps.sizeToken,
+        variant: "outlined",
+        onPress: onCancel,
+        children: "Cancel"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+        size: knobProps.sizeToken,
+        onPress: handleAddFilter,
+        disabled: !selectedColumnId || !selectedOperator,
+        children: "Add Filter"
+      })]
+    })]
+  });
+}
+function ActiveFilter({
+  filter,
+  availableColumns,
+  onUpdate: _onUpdate,
+  onRemove,
+  index
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const column = availableColumns.find(col => col.id === filter.columnId);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    ...{
+      tag: "li"
+    },
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "$3",
+    ...{
+      backgroundColor: "$color2"
+    },
+    ...knobProps.borderRadius,
+    borderColor: "$color6",
+    "aria-label": `Filter ${index + 1}: ${(0, import_filterUtils.getFilterDescription)(filter)}`,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      alignItems: "center",
+      gap: "$2",
+      flex: 1,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(ColumnTypeIcon, {
+        type: column?.type || "text",
+        size: 14
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        fontSize: "$3",
+        color: "$color10",
+        children: (0, import_filterUtils.getFilterDescription)(filter)
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+      size: "$2",
+      variant: "outlined",
+      onPress: onRemove,
+      icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.XIcon, {
+        size: 16
+      }),
+      "aria-label": `Remove filter: ${(0, import_filterUtils.getFilterDescription)(filter)}`
+    })]
+  });
+}
+function ColumnTypeIcon({
+  type,
+  size
+}) {
+  switch (type) {
+    case "text":
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.TextTIcon, {
+        size,
+        color: "$color10"
+      });
+    case "number":
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.HashIcon, {
+        size,
+        color: "$color10"
+      });
+    case "date":
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CalendarBlankIcon, {
+        size,
+        color: "$color10"
+      });
+    case "boolean":
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CheckSquareIcon, {
+        size,
+        color: "$color10"
+      });
+    default:
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.TextTIcon, {
+        size,
+        color: "$color10"
+      });
+  }
+}
+function getOperatorLabel(operator) {
+  const labels = {
+    // Text
+    contains: "Contains",
+    doesNotContain: "Does not contain",
+    is: "Is",
+    isNot: "Is not",
+    startsWith: "Starts with",
+    endsWith: "Ends with",
+    isEmpty: "Is empty",
+    isNotEmpty: "Is not empty",
+    // Number
+    isLessThan: "Is less than",
+    isGreaterThan: "Is greater than",
+    isLessThanOrEqual: "Is less than or equal to",
+    isGreaterThanOrEqual: "Is greater than or equal to",
+    isBetween: "Is between",
+    isNotBetween: "Is not between",
+    // Date
+    isBefore: "Is before",
+    isAfter: "Is after",
+    isOnOrBefore: "Is on or before",
+    isOnOrAfter: "Is on or after",
+    // Option
+    isAnyOf: "Is any of",
+    isNoneOf: "Is none of"
+  };
+  return labels[operator] || operator;
+}