@multiplatform.one/table 6.1.0 → 6.4.0

package/dist/esm/components/ColumnHeaderFilter/index.mjs

@@ -1,32 +1,15 @@
 import { FunnelIcon } from "@phosphor-icons/react";
-import { Button, Input, Select } from "@multiplatform.one/forms";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { useState, useMemo } from "react";
+import { Button } from "@multiplatform.one/forms";
+import { MIN_PRESS_TARGET, pressTargetHitSlop, pressTargetStyle, useResolvedKnobs } from "@multiplatform.one/theme";
+import { useState } from "react";
 import { Tooltip } from "@multiplatform.one/components";
 import { Popover, Text, View, XStack, YStack } from "tamagui";
+import { t } from "../../shared/t.mjs";
+import { operatorNeedsNoValue } from "../../utils/filterFields.mjs";
+import { FilterOperatorValueEditor } from "../FilterOperatorValueEditor/index.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
-const TEXT_OPERATORS = ["contains", "doesNotContain", "is", "isNot", "startsWith", "endsWith", "isEmpty", "isNotEmpty"];
-const NUMBER_OPERATORS = ["is", "isNot", "isLessThan", "isGreaterThan", "isLessThanOrEqual", "isGreaterThanOrEqual"];
-const DATE_OPERATORS = ["is", "isNot", "isBefore", "isAfter", "isOnOrBefore", "isOnOrAfter"];
-const BOOLEAN_OPERATORS = ["is", "isNot"];
-const OPERATOR_LABELS = {
-  contains: "Contains",
-  doesNotContain: "Does not contain",
-  is: "Is",
-  isNot: "Is not",
-  startsWith: "Starts with",
-  endsWith: "Ends with",
-  isEmpty: "Is empty",
-  isNotEmpty: "Is not empty",
-  isLessThan: "Less than",
-  isGreaterThan: "Greater than",
-  isLessThanOrEqual: "Less than or equal",
-  isGreaterThanOrEqual: "Greater than or equal",
-  isBefore: "Before",
-  isAfter: "After",
-  isOnOrBefore: "On or before",
-  isOnOrAfter: "On or after"
-};
+const FILTER_TRIGGER_VISUAL = 22;
+const FILTER_TRIGGER_OUTSET = Math.max(0, Math.ceil((MIN_PRESS_TARGET - FILTER_TRIGGER_VISUAL) / 2));
 function ColumnHeaderFilter({
   columnId: _columnId,
   columnLabel,
@@ -42,26 +25,8 @@ function ColumnHeaderFilter({
   const [open, setOpen] = useState(false);
   const [operator, setOperator] = useState("contains");
   const [value, setValue] = useState("");
-  const operators = useMemo(() => {
-    switch (columnType) {
-      case "number":
-        return NUMBER_OPERATORS;
-      case "date":
-        return DATE_OPERATORS;
-      case "boolean":
-        return BOOLEAN_OPERATORS;
-      case "select":
-        return ["is", "isNot", "isAnyOf"];
-      default:
-        return TEXT_OPERATORS;
-    }
-  }, [columnType]);
-  const operatorOptions = useMemo(() => operators.map(op => ({
-    value: op,
-    label: OPERATOR_LABELS[op] || op
-  })), [operators]);
   const handleApply = () => {
-    if (["isEmpty", "isNotEmpty"].includes(operator)) {
+    if (operatorNeedsNoValue(operator)) {
       onFilterChange({
         operator,
         value: null
@@ -78,31 +43,24 @@ function ColumnHeaderFilter({
     setValue("");
     setOperator("contains");
     onFilterChange(void 0);
-    setOpen(false);
   };
-  const needsValueInput = !["isEmpty", "isNotEmpty"].includes(operator);
-  const booleanOptions = [{
-    value: "true",
-    label: "True"
-  }, {
-    value: "false",
-    label: "False"
-  }];
-  const selectOptions = useMemo(() => options?.map(opt => ({
-    value: String(opt.value),
-    label: opt.label
-  })) || [], [options]);
   return /* @__PURE__ */jsxs(Popover, {
     open,
     onOpenChange: setOpen,
     children: [/* @__PURE__ */jsx(Tooltip, {
-      content: isFiltered ? "Edit filter" : "Filter this column",
+      content: isFiltered ? t("Edit filter") : t("Filter this column"),
       children: /* @__PURE__ */jsx(Popover.Trigger, {
         asChild: true,
         children: /* @__PURE__ */jsx(View, {
           padding: "$1",
           borderRadius: "$2",
           cursor: "pointer",
+          ...pressTargetStyle(),
+          alignItems: "center",
+          justifyContent: "center",
+          marginVertical: -FILTER_TRIGGER_OUTSET,
+          marginHorizontal: -FILTER_TRIGGER_OUTSET,
+          hitSlop: pressTargetHitSlop(FILTER_TRIGGER_VISUAL),
           hoverStyle: {
             backgroundColor: "$color4"
           },
@@ -143,59 +101,20 @@ function ColumnHeaderFilter({
         borderColor: "$color6"
       }), /* @__PURE__ */jsxs(YStack, {
         ...knobProps.gap,
-        children: [/* @__PURE__ */jsxs(Text, {
+        children: [/* @__PURE__ */jsx(Text, {
           fontSize: knobProps.sizeToken,
           fontWeight: "600",
           color: "$color11",
-          children: ["Filter: ", columnLabel]
-        }), /* @__PURE__ */jsx(Select, {
-          label: "Condition",
-          value: operator,
-          onValueChange: v => {
-            if (typeof v === "string") {
-              setOperator(v);
-            }
-          },
-          options: operatorOptions,
-          size: "$3",
-          compact: true
-        }), needsValueInput && /* @__PURE__ */jsx(YStack, {
-          gap: "$1",
-          children: columnType === "boolean" ? /* @__PURE__ */jsx(Select, {
-            label: "Value",
-            value,
-            onValueChange: v => {
-              if (typeof v === "string") {
-                setValue(v);
-              }
-            },
-            options: booleanOptions,
-            placeholder: "Select...",
-            size: "$3",
-            compact: true
-          }) : columnType === "select" && options ? /* @__PURE__ */jsx(Select, {
-            label: "Value",
-            value,
-            onValueChange: v => {
-              if (typeof v === "string") {
-                setValue(v);
-              }
-            },
-            options: selectOptions,
-            placeholder: "Select...",
-            size: "$3",
-            compact: true
-          }) : /* @__PURE__ */jsx(Input, {
-            label: "Value",
-            value,
-            onChangeText: setValue,
-            placeholder: columnType === "date" ? "YYYY-MM-DD" : "Enter value...",
-            size: "$3",
-            compact: true,
-            ...(columnType === "number" && {
-              keyboardType: "numeric"
-            })
+          children: t("Filter: {{column}}", {
+            column: columnLabel
           })
+        }), /* @__PURE__ */jsx(FilterOperatorValueEditor, {
+          fieldType: columnType,
+          operator,
+          value,
+          onOperatorChange: setOperator,
+          onValueChange: setValue,
+          options
         }), /* @__PURE__ */jsxs(XStack, {
           gap: "$2",
           justifyContent: "flex-end",
@@ -203,17 +122,16 @@ function ColumnHeaderFilter({
             size: "$2",
             variant: "outlined",
             onPress: handleClear,
-            children: "Clear"
+            children: t("Clear")
           }), /* @__PURE__ */jsx(Button, {
             size: "$2",
             onPress: handleApply,
-            children: "Apply"
+            children: t("Apply")
           })]
         })]
       })]
     })]
   });
 }
-var ColumnHeaderFilter_default = ColumnHeaderFilter;
-export { ColumnHeaderFilter, ColumnHeaderFilter_default as default };
+export { ColumnHeaderFilter };
 //# sourceMappingURL=index.mjs.map

package/dist/esm/components/ColumnHeaderFilter/index.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["FunnelIcon","Button","Input","Select","useResolvedKnobs","useState","useMemo","Tooltip","Popover","Text","View","XStack","YStack","jsx","jsxs","TEXT_OPERATORS","NUMBER_OPERATORS","DATE_OPERATORS","BOOLEAN_OPERATORS","OPERATOR_LABELS","contains","doesNotContain","is","isNot","startsWith","endsWith","isEmpty","isNotEmpty","isLessThan","isGreaterThan","isLessThanOrEqual","isGreaterThanOrEqual","isBefore","isAfter","isOnOrBefore","isOnOrAfter","ColumnHeaderFilter","columnId","_columnId","columnLabel","columnType","filterValue","_filterValue","onFilterChange","options","isFiltered","knobProps","open","setOpen","operator","setOperator","value","setValue","operators","operatorOptions","map","op","label","handleApply","includes","handleClear","needsValueInput","booleanOptions","selectOptions","opt","String","onOpenChange","children","content","Trigger","asChild","padding","borderRadius","cursor","hoverStyle","backgroundColor","pressStyle","onPress","e","stopPropagation","role","size","color","weight","Content","borderWidth","borderColor","panelPadding","minWidth","enterStyle","y","opacity","exitStyle","elevate","Arrow","gap","fontSize","sizeToken","fontWeight","onValueChange","v","compact","placeholder","onChangeText","keyboardType","justifyContent","variant","ColumnHeaderFilter_default"],"sources":["../../../../src/components/ColumnHeaderFilter/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["FunnelIcon","Button","MIN_PRESS_TARGET","pressTargetHitSlop","pressTargetStyle","useResolvedKnobs","useState","Tooltip","Popover","Text","View","XStack","YStack","t","operatorNeedsNoValue","FilterOperatorValueEditor","jsx","jsxs","FILTER_TRIGGER_VISUAL","FILTER_TRIGGER_OUTSET","Math","max","ceil","ColumnHeaderFilter","columnId","_columnId","columnLabel","columnType","filterValue","_filterValue","onFilterChange","options","isFiltered","knobProps","open","setOpen","operator","setOperator","value","setValue","handleApply","handleClear","onOpenChange","children","content","Trigger","asChild","padding","borderRadius","cursor","alignItems","justifyContent","marginVertical","marginHorizontal","hitSlop","hoverStyle","backgroundColor","pressStyle","onPress","e","stopPropagation","role","size","color","weight","Content","borderWidth","borderColor","panelPadding","minWidth","enterStyle","y","opacity","exitStyle","elevate","Arrow","gap","fontSize","sizeToken","fontWeight","column","fieldType","onOperatorChange","onValueChange","variant"],"sources":["../../../../src/components/ColumnHeaderFilter/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/components/ColumnHeaderFilter/index.native.js

@@ -1,32 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FunnelIcon } from "@phosphor-icons/react";
-import { Button, Input, Select } from "@multiplatform.one/forms";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { useState, useMemo } from "react";
+import { Button } from "@multiplatform.one/forms";
+import { MIN_PRESS_TARGET, pressTargetHitSlop, pressTargetStyle, useResolvedKnobs } from "@multiplatform.one/theme";
+import { useState } from "react";
 import { Tooltip } from "@multiplatform.one/components";
 import { Popover, Text, View, XStack, YStack } from "tamagui";
-var TEXT_OPERATORS = ["contains", "doesNotContain", "is", "isNot", "startsWith", "endsWith", "isEmpty", "isNotEmpty"];
-var NUMBER_OPERATORS = ["is", "isNot", "isLessThan", "isGreaterThan", "isLessThanOrEqual", "isGreaterThanOrEqual"];
-var DATE_OPERATORS = ["is", "isNot", "isBefore", "isAfter", "isOnOrBefore", "isOnOrAfter"];
-var BOOLEAN_OPERATORS = ["is", "isNot"];
-var OPERATOR_LABELS = {
-  contains: "Contains",
-  doesNotContain: "Does not contain",
-  is: "Is",
-  isNot: "Is not",
-  startsWith: "Starts with",
-  endsWith: "Ends with",
-  isEmpty: "Is empty",
-  isNotEmpty: "Is not empty",
-  isLessThan: "Less than",
-  isGreaterThan: "Greater than",
-  isLessThanOrEqual: "Less than or equal",
-  isGreaterThanOrEqual: "Greater than or equal",
-  isBefore: "Before",
-  isAfter: "After",
-  isOnOrBefore: "On or before",
-  isOnOrAfter: "On or after"
-};
+import { t } from "../../shared/t.native.js";
+import { operatorNeedsNoValue } from "../../utils/filterFields.native.js";
+import { FilterOperatorValueEditor } from "../FilterOperatorValueEditor/index.native.js";
+var FILTER_TRIGGER_VISUAL = 22;
+var FILTER_TRIGGER_OUTSET = Math.max(0, Math.ceil((MIN_PRESS_TARGET - FILTER_TRIGGER_VISUAL) / 2));
 function ColumnHeaderFilter(param) {
   var {
     columnId: _columnId,
@@ -43,30 +26,8 @@ function ColumnHeaderFilter(param) {
   var [open, setOpen] = useState(false);
   var [operator, setOperator] = useState("contains");
   var [value, setValue] = useState("");
-  var operators = useMemo(function () {
-    switch (columnType) {
-      case "number":
-        return NUMBER_OPERATORS;
-      case "date":
-        return DATE_OPERATORS;
-      case "boolean":
-        return BOOLEAN_OPERATORS;
-      case "select":
-        return ["is", "isNot", "isAnyOf"];
-      default:
-        return TEXT_OPERATORS;
-    }
-  }, [columnType]);
-  var operatorOptions = useMemo(function () {
-    return operators.map(function (op) {
-      return {
-        value: op,
-        label: OPERATOR_LABELS[op] || op
-      };
-    });
-  }, [operators]);
   var handleApply = function handleApply2() {
-    if (["isEmpty", "isNotEmpty"].includes(operator)) {
+    if (operatorNeedsNoValue(operator)) {
       onFilterChange({
         operator,
         value: null
@@ -83,35 +44,24 @@ function ColumnHeaderFilter(param) {
     setValue("");
     setOperator("contains");
     onFilterChange(void 0);
-    setOpen(false);
   };
-  var needsValueInput = !["isEmpty", "isNotEmpty"].includes(operator);
-  var booleanOptions = [{
-    value: "true",
-    label: "True"
-  }, {
-    value: "false",
-    label: "False"
-  }];
-  var selectOptions = useMemo(function () {
-    return (options === null || options === void 0 ? void 0 : options.map(function (opt) {
-      return {
-        value: String(opt.value),
-        label: opt.label
-      };
-    })) || [];
-  }, [options]);
   return /* @__PURE__ */_jsxs(Popover, {
     open,
     onOpenChange: setOpen,
     children: [/* @__PURE__ */_jsx(Tooltip, {
-      content: isFiltered ? "Edit filter" : "Filter this column",
+      content: isFiltered ? t("Edit filter") : t("Filter this column"),
       children: /* @__PURE__ */_jsx(Popover.Trigger, {
         asChild: true,
         children: /* @__PURE__ */_jsx(View, {
           padding: "$1",
           borderRadius: "$2",
           cursor: "pointer",
+          ...pressTargetStyle(),
+          alignItems: "center",
+          justifyContent: "center",
+          marginVertical: -FILTER_TRIGGER_OUTSET,
+          marginHorizontal: -FILTER_TRIGGER_OUTSET,
+          hitSlop: pressTargetHitSlop(FILTER_TRIGGER_VISUAL),
           hoverStyle: {
             backgroundColor: "$color4"
           },
@@ -152,61 +102,21 @@ function ColumnHeaderFilter(param) {
         borderColor: "$color6"
       }), /* @__PURE__ */_jsxs(YStack, {
         ...knobProps.gap,
-        children: [/* @__PURE__ */_jsxs(Text, {
+        children: [/* @__PURE__ */_jsx(Text, {
           fontSize: knobProps.sizeToken,
           fontWeight: "600",
           color: "$color11",
-          children: ["Filter: ", columnLabel]
-        }), /* Operator select */
-        /* @__PURE__ */_jsx(Select, {
-          label: "Condition",
-          value: operator,
-          onValueChange: function onValueChange(v) {
-            if (typeof v === "string") {
-              setOperator(v);
-            }
-          },
-          options: operatorOptions,
-          size: "$3",
-          compact: true
-        }), /* Value input */
-        needsValueInput && /* @__PURE__ */_jsx(YStack, {
-          gap: "$1",
-          children: columnType === "boolean" ? /* @__PURE__ */_jsx(Select, {
-            label: "Value",
-            value,
-            onValueChange: function onValueChange(v) {
-              if (typeof v === "string") {
-                setValue(v);
-              }
-            },
-            options: booleanOptions,
-            placeholder: "Select...",
-            size: "$3",
-            compact: true
-          }) : columnType === "select" && options ? /* @__PURE__ */_jsx(Select, {
-            label: "Value",
-            value,
-            onValueChange: function onValueChange(v) {
-              if (typeof v === "string") {
-                setValue(v);
-              }
-            },
-            options: selectOptions,
-            placeholder: "Select...",
-            size: "$3",
-            compact: true
-          }) : /* @__PURE__ */_jsx(Input, {
-            label: "Value",
-            value,
-            onChangeText: setValue,
-            placeholder: columnType === "date" ? "YYYY-MM-DD" : "Enter value...",
-            size: "$3",
-            compact: true,
-            ...(columnType === "number" && {
-              keyboardType: "numeric"
-            })
+          children: t("Filter: {{column}}", {
+            column: columnLabel
           })
+        }), /* Shared operator/value editor (LC-16 — same one the toolbar filter uses) */
+        /* @__PURE__ */_jsx(FilterOperatorValueEditor, {
+          fieldType: columnType,
+          operator,
+          value,
+          onOperatorChange: setOperator,
+          onValueChange: setValue,
+          options
         }), /* Actions */
         /* @__PURE__ */_jsxs(XStack, {
           gap: "$2",
@@ -215,17 +125,16 @@ function ColumnHeaderFilter(param) {
             size: "$2",
             variant: "outlined",
             onPress: handleClear,
-            children: "Clear"
+            children: t("Clear")
           }), /* @__PURE__ */_jsx(Button, {
             size: "$2",
             onPress: handleApply,
-            children: "Apply"
+            children: t("Apply")
           })]
         })]
       })]
     })]
   });
 }
-var ColumnHeaderFilter_default = ColumnHeaderFilter;
-export { ColumnHeaderFilter, ColumnHeaderFilter_default as default };
+export { ColumnHeaderFilter };
 //# sourceMappingURL=index.native.js.map

package/dist/esm/components/ColumnHeaderFilter/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","FunnelIcon","Button","Input","Select","useResolvedKnobs","useState","useMemo","Tooltip","Popover","Text","View","XStack","YStack","TEXT_OPERATORS","NUMBER_OPERATORS","DATE_OPERATORS","BOOLEAN_OPERATORS","OPERATOR_LABELS","contains","doesNotContain","is","isNot","startsWith","endsWith","isEmpty","isNotEmpty","isLessThan","isGreaterThan","isLessThanOrEqual","isGreaterThanOrEqual","isBefore","isAfter","isOnOrBefore","isOnOrAfter","ColumnHeaderFilter","param","columnId","_columnId","columnLabel","columnType","filterValue","_filterValue","onFilterChange","options","isFiltered","knobProps","open","setOpen","operator","setOperator","value","setValue","operators","operatorOptions","map","op","label","handleApply","handleApply2","includes","handleClear","handleClear2","needsValueInput","booleanOptions","selectOptions","opt","String","onOpenChange","children","content","Trigger","asChild","padding","borderRadius","cursor","hoverStyle","backgroundColor","pressStyle","onPress","e","stopPropagation","role","size","color","weight","Content","borderWidth","borderColor","panelPadding","minWidth","enterStyle","y","opacity","exitStyle","elevate","Arrow","gap","fontSize","sizeToken","fontWeight","onValueChange","v","compact"],"sources":["../../../../src/components/ColumnHeaderFilter/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","FunnelIcon","Button","MIN_PRESS_TARGET","pressTargetHitSlop","pressTargetStyle","useResolvedKnobs","useState","Tooltip","Popover","Text","View","XStack","YStack","t","operatorNeedsNoValue","FilterOperatorValueEditor","FILTER_TRIGGER_VISUAL","FILTER_TRIGGER_OUTSET","Math","max","ceil","ColumnHeaderFilter","param","columnId","_columnId","columnLabel","columnType","filterValue","_filterValue","onFilterChange","options","isFiltered","knobProps","open","setOpen","operator","setOperator","value","setValue","handleApply","handleApply2","handleClear","handleClear2","onOpenChange","children","content","Trigger","asChild","padding","borderRadius","cursor","alignItems","justifyContent","marginVertical","marginHorizontal","hitSlop","hoverStyle","backgroundColor","pressStyle","onPress","e","stopPropagation","role","size","color","weight","Content","borderWidth","borderColor","panelPadding","minWidth","enterStyle","y","opacity","exitStyle","elevate","Arrow","gap","fontSize","sizeToken","fontWeight","column","fieldType","onOperatorChange","onValueChange"],"sources":["../../../../src/components/ColumnHeaderFilter/index.tsx"],"sourcesContent":[null],"mappings":"AAKA,SAASA,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAkBC,KAAA;AAC3B,SAASC,UAAA,QAAc;AACvB,SAAAC,MAAA;AAAA,SACEC,gBAAA,EAAAC,kBAAA,EAAAC,gBAAA,EAAAC,gBAAA;AAAA,SACAC,QAAA;AAAA,SACAC,OAAA;AAAA,SACAC,OAAA,EAAAC,IAAA,EAAAC,IAAA,EAAAC,MAAA,EAAAC,MAAA;AAAA,SACKC,CAAA;AACP,SAASC,oBAAgB;AACzB,SAASC,yBAAe;AACxB,IAAAC,qBAAwB,KAAM;AAC9B,IAAAC,qBAAkB,GAAAC,IAAA,CAAAC,GAAA,IAAAD,IAAA,CAAAE,IAAA,EAAAlB,gBAAA,GAAAc,qBAAA;AAElB,SAASK,mBAAAC,KAAA;EACT;IAAAC,QAAS,EAAAC,SAAA;IAAAC,WAAA;IAAiCC,UAAA;IAAAC,WAAA,EAAAC,YAAA;IAAAC,cAAA;IAAAC,OAAA;IAAAC;EAAA,IAAAT,KAAA;EAoF9B;IAAAU;EAsCF,IAAA3B,gBAtCE;EA/DZ,IAAM,CAAA4B,IAAA,EAAAC,OAAA,IAAA5B,QAAwB;EAC9B,IAAM,CAAA6B,QAAA,EAAAC,WAAA,IAAwB9B,QAAK;EACjC,KAAA+B,KAAA,EAAAC,QAAA,IAAAhC,QAAA;EACA,IAAAiC,WAAW,YAAAC,YAAmBA,CAAA;IAChC,IAAA1B,oBAAA,CAAAqB,QAAA;MAEON,cAAS;QACdM,QAAU;QACVE,KAAA;MACA;IACA;MACAR,cAAA;QACAM,QAAA;QACAE;MAC0B;IAC1B;IACAH,OAAO,MAAM;EACb;EACA,IAAAO,WAAc,YAAYC,YAAmBA,CAAA;IAI7CJ,QAAM;IACJF,WAAI;IACFP,cAAA,MAAiB;EAAuB;EAExC,sBAAiB9B,KAAA,CAAAS,OAAU,EAAO;IACpCyB,IAAA;IACAU,YAAQ,EAAKT,OAAA;IACfU,QAAA,GAKA,eAAoB/C,IAAA,CAAAU,OAAM;MACxBsC,OAAW,EAAAd,UAAA,GAAAlB,CAAA,kBAAAA,CAAA;MACX+B,QAAY,iBAAU/C,IAAA,CAAAW,OAAA,CAAAsC,OAAA;QACtBC,OAAA,EAAe;QACjBH,QAAA,iBAAA/C,IAAA,CAAAa,IAAA;UAGEsC,OAAA;UACEC,YAAC;UAEIC,MAAA;UAAA,GAAA9C,gBAAA;UACC+C,UAAQ;UACRC,cAAa;UACbC,cAAO,GAAApC,qBAAA;UACHqC,gBAAiB,GAAArC,qBAAA;UACrBsC,OAAA,EAAWpD,kBAAA,CAAAa,qBAAA;UACXwC,UAAA,EAAe;YACfC,eAAiB;UACjB;UACAC,UAAS;YACTD,eAAc;UACd;UACAE,OAAU,WAAMA,QAAAC,CAAA;YACZA,CAAA,CAAAC,eAAgB;YAClB3B,OAAQ,CAAI;UACd;UACA4B,IAAK;UACL,YAAY,mBAAiBrC,WAAW;UAExCmB,QAAA,iBAAA/C,IAAA,CAAAG,UAAA;YAAC+D,IAAA;YAAAC,KAAA,EAAAjC,UAAA;YACCkC,MAAM,EAAAlC,UAAA;UACN;QAA2C;MACb;IAAA,EAChC,iBAAAhC,KAAA,CAAAS,OAAA,CAAA0D,OAAA;MAEJ,GACFlC,SAAA,CAAAiB,YAAA;MAEAkB,WAAA;MAACC,WAAQ;MAARX,eAAA;MACE,GAAGzB,SAAA,CAAUqC,YAAA;MACdC,QAAA,KAAa;MACbC,UAAA;QACAC,CAAA;QACCC,OAAG;MACJ;MACAC,SAAA;QACAF,CAAA;QACAC,OAAO;MAEP;MAAAE,OAAA;MAAqD/B,QAErD,GACE,eAAA/C,IAAA,CAAAW,OAAC,CAAAoE,KAAK;QAKNT,WAAA;QAAAC,WAAC;MAAA,mBACCrE,KAAW,CAAAa,MAAA;QAAA,GAAAoB,SACX,CAAA6C,GAAA;QAAAjC,QACA,kBACA/C,IAAkB,CAAAY,IAAA;UAClBqE,QAAA,EAAA9C,SAAe,CAAA+C,SAAA;UACfC,UAAA;UAAAhB,KAAA;UACFpB,QAAA,EAAA/B,CAAA;YAGAoE,MAAA,EAAAxD;UACG;QAKD,IAEA;QAEJ,eAAA5B,IAAA,CAAAkB,yBAAA;UAAAmE,SAAA,EAAAxD,UAAA;UAAAS,QAAA;UACFE,KAAA;UACF8C,gBAAA,EAAA/C,WAAA;UAEJgD,aAAA,EAAA9C,QAAA","ignoreList":[]}

package/dist/esm/components/DataTable/DataTableCardControls.mjs

@@ -0,0 +1,108 @@
+import { CaretDownIcon, CaretUpDownIcon } from "@phosphor-icons/react";
+import { DropdownMenu } from "@multiplatform.one/components";
+import { Button } from "@multiplatform.one/forms";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useState } from "react";
+import { View, XStack } from "tamagui";
+import { useTranslation } from "react-i18next";
+import { withInterp } from "../../utils/withInterp.mjs";
+import { DataTableFilters } from "../DataTableFilters/index.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+function getColumnLabel(column) {
+  return typeof column.columnDef.header === "string" ? column.columnDef.header : column.id;
+}
+function DataTableCardControls({
+  table,
+  enableSorting = false,
+  enableFiltering = false,
+  availableColumns = [],
+  compact = false,
+  disabled = false
+}) {
+  const {
+    t
+  } = useTranslation();
+  const {
+    knobProps,
+    disabledState
+  } = useResolvedKnobs({
+    compact
+  });
+  const [sortMenuOpen, setSortMenuOpen] = useState(false);
+  const sortableColumns = enableSorting ? table.getVisibleLeafColumns().filter(col => col.getCanSort()) : [];
+  const activeSort = table.getState().sorting?.[0];
+  const activeSortColumn = activeSort ? table.getColumn(activeSort.id) : void 0;
+  const sortLabel = activeSortColumn ? `${getColumnLabel(activeSortColumn)} ${activeSort.desc ? "\u2193" : "\u2191"}` : t("Sort");
+  if (!enableSorting && !enableFiltering) return null;
+  return /* @__PURE__ */jsxs(XStack, {
+    alignItems: "center",
+    flexWrap: "wrap",
+    gap: "$2",
+    paddingVertical: "$2",
+    role: "toolbar",
+    "aria-label": t("Card list controls"),
+    children: [enableSorting && sortableColumns.length > 0 && /* @__PURE__ */jsxs(DropdownMenu, {
+      open: disabled ? false : sortMenuOpen,
+      onOpenChange: open => {
+        if (disabled) return;
+        setSortMenuOpen(open);
+      },
+      children: [/* @__PURE__ */jsx(DropdownMenu.Trigger, {
+        asChild: true,
+        children: /* @__PURE__ */jsx(Button, {
+          size: knobProps.sizeToken,
+          variant: "outlined",
+          icon: /* @__PURE__ */jsx(CaretUpDownIcon, {
+            size: 16
+          }),
+          "aria-label": t("Sort rows"),
+          disabled,
+          children: sortLabel
+        })
+      }), /* @__PURE__ */jsxs(DropdownMenu.Content, {
+        children: [/* @__PURE__ */jsx(DropdownMenu.Label, {
+          children: t("Sort by")
+        }), sortableColumns.map(column => {
+          const sorted = column.getIsSorted();
+          return /* @__PURE__ */jsx(DropdownMenu.Item, {
+            closeOnSelect: false,
+            icon: sorted === "asc" ? /* @__PURE__ */jsx(CaretDownIcon, {
+              size: 14
+            }) : sorted === "desc" ? /* @__PURE__ */jsx(CaretDownIcon, {
+              size: 14,
+              style: {
+                transform: "rotate(180deg)"
+              }
+            }) : /* @__PURE__ */jsx(CaretUpDownIcon, {
+              size: 14
+            }),
+            "aria-label": withInterp(t("Sort by {{column}}", {
+              column: getColumnLabel(column)
+            }), {
+              column: getColumnLabel(column)
+            }),
+            onSelect: () => {
+              if (sorted === false) column.toggleSorting(false);else if (sorted === "asc") column.toggleSorting(true);else column.clearSorting();
+            },
+            children: getColumnLabel(column)
+          }, column.id);
+        })]
+      })]
+    }), enableFiltering && availableColumns.length > 0 &&
+    // DataTableFilters (chrome) has no disabled API — the wrapper is the
+    // LC-40 carrier and interaction gate for the disabled table.
+    /* @__PURE__ */
+    jsx(View, {
+      ...(disabled ? {
+        ...disabledState.chromeKnobProps,
+        pointerEvents: "none"
+      } : {}),
+      children: /* @__PURE__ */jsx(DataTableFilters, {
+        compact: true,
+        availableColumns
+      })
+    })]
+  });
+}
+export { DataTableCardControls };
+//# sourceMappingURL=DataTableCardControls.mjs.map

package/dist/esm/components/DataTable/DataTableCardControls.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["CaretDownIcon","CaretUpDownIcon","DropdownMenu","Button","useResolvedKnobs","useState","View","XStack","useTranslation","withInterp","DataTableFilters","jsx","jsxs","getColumnLabel","column","columnDef","header","id","DataTableCardControls","table","enableSorting","enableFiltering","availableColumns","compact","disabled","t","knobProps","disabledState","sortMenuOpen","setSortMenuOpen","sortableColumns","getVisibleLeafColumns","filter","col","getCanSort","activeSort","getState","sorting","activeSortColumn","getColumn","sortLabel","desc","alignItems","flexWrap","gap","paddingVertical","role","children","length","open","onOpenChange","Trigger","asChild","size","sizeToken","variant","icon","Content","Label","map","sorted","getIsSorted","Item","closeOnSelect","style","transform","onSelect","toggleSorting","clearSorting","chromeKnobProps","pointerEvents"],"sources":["../../../../src/components/DataTable/DataTableCardControls.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}