@flanksource/clicky-ui 0.3.28 → 0.3.30

package/dist/components/FilterBar.cjs

@@ -11,6 +11,7 @@ const filterBarUtils = require("./filter-bar-utils.cjs");
 const Icon = require("../data/Icon.cjs");
 const timestampFormat = require("../data/cells/timestamp-format.cjs");
 const utils = require("../lib/utils.cjs");
+const Modal = require("../overlay/Modal.cjs");
 const modalStack = require("../overlay/modalStack.cjs");
 const button = require("./button.cjs");
 const Combobox = require("./Combobox.cjs");
@@ -51,6 +52,7 @@ function FilterBar({
   const allFilters = filters ?? [];
   const responsiveOverflow = overflowMode === "responsive" && allFilters.length > 0;
   const mobileFilterOverflow = useMediaQuery("(max-width: 767px)");
+  const mobilePageOverflow = useMediaQuery("(max-width: 639px)");
   const filterListRef = react.useRef(null);
   const overflowTriggerRef = react.useRef(null);
   const filterNodeRefs = react.useRef(/* @__PURE__ */ new Map());
@@ -190,6 +192,7 @@ function FilterBar({
             triggerRef: overflowTriggerRef,
             filters: overflowFilters,
             activeHidden: activeOverflowCount,
+            mobilePage: mobilePageOverflow,
             ...onApply ? { onApply } : {}
           }
         ),
@@ -313,6 +316,7 @@ function OverflowFiltersMenu({
   triggerRef,
   filters,
   activeHidden,
+  mobilePage,
   onApply
 }) {
   const [open, setOpen] = react.useState(false);
@@ -323,7 +327,7 @@ function OverflowFiltersMenu({
     [filters]
   );
   const { refs, floatingStyles, context, floatingZ, getReferenceProps, getFloatingProps } = useAnchoredPopup(
-    open,
+    open && !mobilePage,
     (next) => {
       setStagedValues(createFilterValueMap(filters));
       setOpen(next);
@@ -354,6 +358,22 @@ function OverflowFiltersMenu({
       }))
     )
   );
+  const applyOverflowFilters = () => {
+    applyStagedFilterValues(filters, stagedValues);
+    onApply == null ? void 0 : onApply();
+    setOpen(false);
+  };
+  const clearAll = /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      className: "rounded px-1.5 py-0.5 text-xs text-primary transition-colors hover:bg-accent focus:bg-accent focus:outline-none disabled:text-muted-foreground",
+      onClick: () => stagedFilters.forEach(filterBarUtils.clearFilterBarFilter),
+      disabled: stagedFilters.every((filter) => !filterBarUtils.isFilterBarFilterActive(filter)),
+      children: "Clear all"
+    }
+  );
+  const actions = /* @__PURE__ */ jsxRuntime.jsx(OverflowFilterActions, { onClose: closeOverflowMenu, onApply: applyOverflowFilters });
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -375,13 +395,26 @@ function OverflowFiltersMenu({
               activeHidden > 0 && "border-primary/40 text-primary"
             ),
             ...getReferenceProps(),
+            "aria-expanded": open,
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiFilter.UiFilter, className: "text-[14px]" }),
               activeHidden > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-full bg-muted px-1.5 text-[10px] font-medium text-muted-foreground", children: activeHidden })
             ]
           }
         ),
-        hasHidden && open && /* @__PURE__ */ jsxRuntime.jsx(react$1.FloatingPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(react$1.FloatingFocusManager, { context, modal: false, children: /* @__PURE__ */ jsxRuntime.jsxs(
+        mobilePage && /* @__PURE__ */ jsxRuntime.jsx(
+          Modal.Modal,
+          {
+            open: hasHidden && open,
+            onClose: closeOverflowMenu,
+            title: "Filters",
+            headerSlot: clearAll,
+            footer: actions,
+            scrollBody: false,
+            children: /* @__PURE__ */ jsxRuntime.jsx(OverflowFilterRows, { filters: stagedFilters, mobilePage: true })
+          }
+        ),
+        !mobilePage && hasHidden && open && /* @__PURE__ */ jsxRuntime.jsx(react$1.FloatingPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(react$1.FloatingFocusManager, { context, modal: false, children: /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             ref: refs.setFloating,
@@ -394,16 +427,7 @@ function OverflowFiltersMenu({
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between gap-2 px-1", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: "Filters" }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "button",
-                    {
-                      type: "button",
-                      className: "rounded px-1.5 py-0.5 text-xs text-primary transition-colors hover:bg-accent focus:bg-accent focus:outline-none disabled:text-muted-foreground",
-                      onClick: () => stagedFilters.forEach(filterBarUtils.clearFilterBarFilter),
-                      disabled: stagedFilters.every((filter) => !filterBarUtils.isFilterBarFilterActive(filter)),
-                      children: "Clear all"
-                    }
-                  ),
+                  clearAll,
                   /* @__PURE__ */ jsxRuntime.jsx(
                     "button",
                     {
@@ -417,79 +441,8 @@ function OverflowFiltersMenu({
                   )
                 ] })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 divide-y divide-border/70 overflow-y-auto rounded-md border border-border/70", children: stagedFilters.map((filter) => {
-                const active = filterBarUtils.isFilterBarFilterActive(filter);
-                return /* @__PURE__ */ jsxRuntime.jsxs(
-                  "div",
-                  {
-                    "data-overflow-filter-row": filter.key,
-                    className: "grid grid-cols-[minmax(0,1fr)_auto] items-start gap-2 overflow-visible p-3 md:h-12 md:grid-cols-[minmax(7rem,10rem)_auto_minmax(0,1fr)_auto] md:items-center md:p-2",
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsxs(
-                        "label",
-                        {
-                          htmlFor: filterInputId(filter),
-                          className: "flex min-w-0 items-center gap-1 truncate text-[10px] font-medium uppercase tracking-wide text-muted-foreground",
-                          title: filter.description ?? filter.label,
-                          children: [
-                            /* @__PURE__ */ jsxRuntime.jsx(
-                              Icon.LabelIcon,
-                              {
-                                icon: filterBarFieldUtils.sizedIcon(filter.icon, 12),
-                                className: "text-[12px] normal-case"
-                              }
-                            ),
-                            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: filter.label })
-                          ]
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden text-sm text-muted-foreground md:block", children: "=" }),
-                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2 min-w-0 overflow-visible md:col-span-1", children: /* @__PURE__ */ jsxRuntime.jsx(filterBarContext.FilterBarContext.Provider, { value: { autoSubmit: false }, children: /* @__PURE__ */ jsxRuntime.jsx(FilterBarKeyValueControl, { filter }) }) }),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "button",
-                        {
-                          type: "button",
-                          "aria-label": `Clear ${filter.label}`,
-                          title: `Clear ${filter.label}`,
-                          className: "inline-flex h-6 w-6 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:outline-none disabled:text-muted-foreground/40",
-                          onClick: () => filterBarUtils.clearFilterBarFilter(filter),
-                          disabled: !active,
-                          children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiClose.UiClose, className: "text-sm" })
-                        }
-                      )
-                    ]
-                  },
-                  filter.key
-                );
-              }) }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 flex justify-end gap-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  button.Button,
-                  {
-                    type: "button",
-                    variant: "ghost",
-                    size: "sm",
-                    className: "h-8 px-3 text-xs",
-                    onClick: closeOverflowMenu,
-                    children: "Close"
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  button.Button,
-                  {
-                    type: "button",
-                    variant: "default",
-                    size: "sm",
-                    className: "h-8 px-3 text-xs",
-                    onClick: () => {
-                      applyStagedFilterValues(filters, stagedValues);
-                      onApply == null ? void 0 : onApply();
-                      setOpen(false);
-                    },
-                    children: "Apply"
-                  }
-                )
-              ] })
+              /* @__PURE__ */ jsxRuntime.jsx(OverflowFilterRows, { filters: stagedFilters }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3", children: actions })
             ]
           }
         ) }) })
@@ -497,6 +450,68 @@ function OverflowFiltersMenu({
     }
   );
 }
+function OverflowFilterRows({
+  filters,
+  mobilePage = false
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: utils.cn(
+        "min-h-0 flex-1 divide-y divide-border/70 overflow-y-auto",
+        mobilePage ? "bg-background" : "rounded-md border border-border/70"
+      ),
+      children: filters.map((filter) => {
+        const active = filterBarUtils.isFilterBarFilterActive(filter);
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            "data-overflow-filter-row": filter.key,
+            className: "grid grid-cols-[minmax(0,1fr)_auto] items-start gap-2 overflow-visible p-4 md:h-12 md:grid-cols-[minmax(7rem,10rem)_auto_minmax(0,1fr)_auto] md:items-center md:p-2",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "label",
+                {
+                  htmlFor: filterInputId(filter),
+                  className: "col-span-2 flex min-w-0 items-center gap-1 truncate text-[10px] font-medium uppercase tracking-wide text-muted-foreground md:col-span-1",
+                  title: filter.description ?? filter.label,
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(Icon.LabelIcon, { icon: filterBarFieldUtils.sizedIcon(filter.icon, 12), className: "text-[12px] normal-case" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: filter.label })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden text-sm text-muted-foreground md:block", children: "=" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 overflow-visible", children: /* @__PURE__ */ jsxRuntime.jsx(filterBarContext.FilterBarContext.Provider, { value: { autoSubmit: false }, children: /* @__PURE__ */ jsxRuntime.jsx(FilterBarKeyValueControl, { filter }) }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": `Clear ${filter.label}`,
+                  title: `Clear ${filter.label}`,
+                  className: "inline-flex h-6 w-6 self-center items-center justify-center rounded text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:outline-none disabled:text-muted-foreground/40",
+                  onClick: () => filterBarUtils.clearFilterBarFilter(filter),
+                  disabled: !active,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiClose.UiClose, className: "text-sm" })
+                }
+              )
+            ]
+          },
+          filter.key
+        );
+      })
+    }
+  );
+}
+function OverflowFilterActions({
+  onClose,
+  onApply
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(button.Button, { type: "button", variant: "ghost", size: "sm", className: "h-8 px-3 text-xs", onClick: onClose, children: "Close" }),
+    /* @__PURE__ */ jsxRuntime.jsx(button.Button, { type: "button", variant: "default", size: "sm", className: "h-8 px-3 text-xs", onClick: onApply, children: "Apply" })
+  ] });
+}
 function FilterBarKeyValueControl({ filter }) {
   if (filter.kind === "date-range") {
     return /* @__PURE__ */ jsxRuntime.jsx(