@multiplatform.one/table 7.11.0 → 7.16.0

package/dist/cjs/components/DataTableDateFilter/index.cjs

@@ -262,176 +262,153 @@ function DataTableDateFilter({
         return placeholder;
     }
   };
+  const trigger = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_forms.Button, {
+    size: knobProps.sizeToken,
+    disabled,
+    icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CalendarIcon, {
+      size: iconPx
+    }),
+    justifyContent: "flex-start",
+    minWidth: triggerMinWidth,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      flex: 1,
+      textAlign: "left",
+      color: disabled ? "$color11" : value ? void 0 : "$color10",
+      fontSize: "$3",
+      numberOfLines: 1,
+      children: getDisplayValue()
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretDownIcon, {
+      size: iconPx
+    })]
+  });
   return (
-    // LC-06: anchored editor — start-aligned to the trigger edge with
-    // collision handling (flip + clamp + resize inside the viewport).
+    // LC-06: anchored editor. FloatingPanel attaches flush to the trigger
+    // (MPO-38 cover contract), clamps inside the viewport and becomes a sheet
+    // at 640 and below.
     /* @__PURE__ */
-    (0, import_jsx_runtime.jsxs)(import_tamagui.Popover, {
+    (0, import_jsx_runtime.jsx)(import_forms.FloatingPanel, {
       open: isOpen,
       onOpenChange: setIsOpen,
-      placement: "bottom-start",
-      offset: 4,
-      stayInFrame: true,
-      allowFlip: true,
-      resize: true,
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Trigger, {
-        asChild: true,
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_forms.Button, {
-          size: knobProps.sizeToken,
-          disabled,
-          icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CalendarIcon, {
-            size: iconPx
-          }),
-          justifyContent: "flex-start",
-          minWidth: triggerMinWidth,
+      trigger,
+      scrollable: true,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        ...knobProps.gapLg,
+        minWidth: popoverMinWidth,
+        "data-dismiss-class": "compose",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+          justifyContent: "space-between",
+          alignItems: "center",
           children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-            flex: 1,
-            textAlign: "left",
-            color: disabled ? "$color11" : value ? void 0 : "$color10",
-            fontSize: "$3",
-            numberOfLines: 1,
-            children: getDisplayValue()
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretDownIcon, {
-            size: iconPx
+            ...knobProps.label,
+            fontWeight: "400",
+            children: (0, import_t.t)("Date Filter")
+          }), value && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+            size: knobProps.sizeToken,
+            onPress: handleClear,
+            icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.XIcon, {
+              size: iconPx
+            }),
+            children: (0, import_t.t)("Clear")
           })]
-        })
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Content, {
-        ...knobProps.elevatedSurface,
-        transition: knobProps.transition,
-        enterStyle: {
-          opacity: 0,
-          y: -4,
-          scale: 0.97
-        },
-        exitStyle: {
-          opacity: 0,
-          y: -4,
-          scale: 0.97
-        },
-        minWidth: popoverMinWidth,
-        padding: 0,
-        overflow: "hidden",
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.ScrollView, {
-          minHeight: 0,
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-            ...knobProps.panelPadding,
-            ...knobProps.gapLg,
-            children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-              justifyContent: "space-between",
-              alignItems: "center",
-              children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-                ...knobProps.label,
-                fontWeight: "400",
-                children: (0, import_t.t)("Date Filter")
-              }), value && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+        }), showPresets && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          gap: "$2",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            ...knobProps.label,
+            fontWeight: "400",
+            children: (0, import_t.t)("Quick Filters")
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
+            maxHeight: presetListMaxHeight,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+              gap: PRESET_ROW_GAP_TOKEN,
+              children: allPresets.map(preset => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+                size: knobProps.sizeToken,
+                justifyContent: "flex-start",
+                onPress: () => handlePresetSelect(preset),
+                ...(activePresetId === preset.id ? {
+                  theme: "accent",
+                  backgroundColor: "$background"
+                } : void 0),
+                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                  fontSize: "$3",
+                  children: preset.label
+                })
+              }, preset.id))
+            })
+          })]
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          ...knobProps.gap,
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            ...knobProps.label,
+            fontWeight: "400",
+            children: (0, import_t.t)("Custom Date")
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+            gap: "$2",
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+              flex: 1,
+              size: knobProps.sizeToken,
+              onPress: () => handleCustomDateSelect((/* @__PURE__ */new Date()).toISOString(), "is"),
+              children: (0, import_t.t)("Today")
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+              flex: 1,
+              size: knobProps.sizeToken,
+              onPress: () => handleCustomDateSelect(new Date(Date.now() - 24 * 60 * 60 * 1e3).toISOString(), "is"),
+              children: (0, import_t.t)("Yesterday")
+            })]
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+            gap: "$2",
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+              ...knobProps.label,
+              fontWeight: "400",
+              children: (0, import_t.t)("Date Range")
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+              gap: "$2",
+              children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+                flex: 1,
+                size: knobProps.sizeToken,
+                onPress: () => handleDateRangeSelect(new Date(Date.now() - 7 * 24 * 60 * 60 * 1e3).toISOString(), (/* @__PURE__ */new Date()).toISOString()),
+                children: (0, import_t.t)("Last 7 days")
+              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+                flex: 1,
                 size: knobProps.sizeToken,
-                onPress: handleClear,
-                icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.XIcon, {
-                  size: iconPx
-                }),
-                children: (0, import_t.t)("Clear")
+                onPress: () => handleDateRangeSelect(new Date(Date.now() - 30 * 24 * 60 * 60 * 1e3).toISOString(), (/* @__PURE__ */new Date()).toISOString()),
+                children: (0, import_t.t)("Last 30 days")
               })]
-            }), showPresets && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+            })]
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+            gap: "$2",
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+              ...knobProps.label,
+              fontWeight: "400",
+              children: (0, import_t.t)("Custom Range")
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
               gap: "$2",
-              children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-                ...knobProps.label,
-                fontWeight: "400",
-                children: (0, import_t.t)("Quick Filters")
-              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
-                maxHeight: presetListMaxHeight,
-                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-                  gap: PRESET_ROW_GAP_TOKEN,
-                  children: allPresets.map(preset => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-                    size: knobProps.sizeToken,
-                    justifyContent: "flex-start",
-                    onPress: () => handlePresetSelect(preset),
-                    ...(activePresetId === preset.id ? {
-                      theme: "accent",
-                      backgroundColor: "$background"
-                    } : void 0),
-                    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-                      fontSize: "$3",
-                      children: preset.label
-                    })
-                  }, preset.id))
+              children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+                flex: 1,
+                "data-testid": "start-date-picker",
+                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.DatePicker, {
+                  placeholder: (0, import_t.t)("Start date"),
+                  label: (0, import_t.t)("From"),
+                  minDate,
+                  maxDate,
+                  value: pickerRange.start ?? null,
+                  onChange: handleStartDatePick
+                })
+              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+                flex: 1,
+                "data-testid": "end-date-picker",
+                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.DatePicker, {
+                  placeholder: (0, import_t.t)("End date"),
+                  label: (0, import_t.t)("To"),
+                  minDate,
+                  maxDate,
+                  value: pickerRange.end ?? null,
+                  onChange: handleEndDatePick
                 })
-              })]
-            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-              ...knobProps.gap,
-              children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-                ...knobProps.label,
-                fontWeight: "400",
-                children: (0, import_t.t)("Custom Date")
-              }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-                gap: "$2",
-                children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-                  flex: 1,
-                  size: knobProps.sizeToken,
-                  onPress: () => handleCustomDateSelect((/* @__PURE__ */new Date()).toISOString(), "is"),
-                  children: (0, import_t.t)("Today")
-                }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-                  flex: 1,
-                  size: knobProps.sizeToken,
-                  onPress: () => handleCustomDateSelect(new Date(Date.now() - 24 * 60 * 60 * 1e3).toISOString(), "is"),
-                  children: (0, import_t.t)("Yesterday")
-                })]
-              }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-                gap: "$2",
-                children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-                  ...knobProps.label,
-                  fontWeight: "400",
-                  children: (0, import_t.t)("Date Range")
-                }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-                  gap: "$2",
-                  children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-                    flex: 1,
-                    size: knobProps.sizeToken,
-                    onPress: () => handleDateRangeSelect(new Date(Date.now() - 7 * 24 * 60 * 60 * 1e3).toISOString(), (/* @__PURE__ */new Date()).toISOString()),
-                    children: (0, import_t.t)("Last 7 days")
-                  }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-                    flex: 1,
-                    size: knobProps.sizeToken,
-                    onPress: () => handleDateRangeSelect(new Date(Date.now() - 30 * 24 * 60 * 60 * 1e3).toISOString(), (/* @__PURE__ */new Date()).toISOString()),
-                    children: (0, import_t.t)("Last 30 days")
-                  })]
-                })]
-              }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-                gap: "$2",
-                children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-                  ...knobProps.label,
-                  fontWeight: "400",
-                  children: (0, import_t.t)("Custom Range")
-                }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-                  gap: "$2",
-                  children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-                    flex: 1,
-                    "data-testid": "start-date-picker",
-                    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.DatePicker, {
-                      placeholder: (0, import_t.t)("Start date"),
-                      label: (0, import_t.t)("From"),
-                      minDate,
-                      maxDate,
-                      value: pickerRange.start ?? null,
-                      onChange: handleStartDatePick
-                    })
-                  }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-                    flex: 1,
-                    "data-testid": "end-date-picker",
-                    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.DatePicker, {
-                      placeholder: (0, import_t.t)("End date"),
-                      label: (0, import_t.t)("To"),
-                      minDate,
-                      maxDate,
-                      value: pickerRange.end ?? null,
-                      onChange: handleEndDatePick
-                    })
-                  })]
-                })]
               })]
             })]
-          })
-        })
-      })]
+          })]
+        })]
+      })
     })
   );
 }