@flanksource/clicky-ui 0.3.27 → 0.3.28

package/dist/components/CopyButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyButton.js","sources":["../../src/components/CopyButton.tsx"],"sourcesContent":["import { useCallback, type MouseEvent } from \"react\";\nimport { UiCheck, UiCopy } from \"../icons\";\nimport { cn } from \"../lib/utils\";\nimport { IconButton } from \"./IconButton\";\nimport { useCopyFlash } from \"./clipboard\";\n\nexport type CopyButtonProps = {\n  /**\n   * Text to copy, or a thunk producing it. Use the thunk form when the payload\n   * is expensive to build and only needed on click.\n   */\n  value: string | (() => string);\n  /** Accessible name; drives both aria-label and the tooltip. */\n  label?: string;\n  /** Extra classes for the button. */\n  className?: string;\n  /** Extra classes for the glyph. */\n  iconClassName?: string;\n};\n\n/**\n * A borderless copy-to-clipboard icon button. The glyph flips to a check for\n * 1.5s on success and reports a rejected copy through its label, so a silent\n * no-op is never mistaken for a successful copy.\n */\nexport function CopyButton({ value, label = \"Copy\", className, iconClassName }: CopyButtonProps) {\n  const { state, copy } = useCopyFlash();\n\n  const onClick = useCallback(\n    (event: MouseEvent<HTMLButtonElement>) => {\n      // Cards and rows routinely make their whole surface clickable; copying\n      // must never also toggle the container it sits in.\n      event.stopPropagation();\n      copy(typeof value === \"function\" ? value() : value);\n    },\n    [copy, value],\n  );\n\n  return (\n    <IconButton\n      icon={state === \"copied\" ? UiCheck : UiCopy}\n      label={state === \"copied\" ? \"Copied\" : state === \"error\" ? \"Copy failed\" : label}\n      onClick={onClick}\n      className={className}\n      iconClassName={cn(\n        state === \"copied\" && \"text-emerald-600\",\n        state === \"error\" && \"text-red-600\",\n        iconClassName,\n      )}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAyBO,SAAS,WAAW,EAAE,OAAO,QAAQ,QAAQ,WAAW,iBAAkC;AAC/F,QAAM,EAAE,OAAO,KAAA,IAAS,aAAA;AAExB,QAAM,UAAU;AAAA,IACd,CAAC,UAAyC;AAGxC,YAAM,gBAAA;AACN,WAAK,OAAO,UAAU,aAAa,MAAA,IAAU,KAAK;AAAA,IACpD;AAAA,IACA,CAAC,MAAM,KAAK;AAAA,EAAA;AAGd,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAM,UAAU,WAAW,UAAU;AAAA,MACrC,OAAO,UAAU,WAAW,WAAW,UAAU,UAAU,gBAAgB;AAAA,MAC3E;AAAA,MACA;AAAA,MACA,eAAe;AAAA,QACb,UAAU,YAAY;AAAA,QACtB,UAAU,WAAW;AAAA,QACrB;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}

package/dist/components/FilterBar.cjs

@@ -28,6 +28,7 @@ const UiChevronDown = require("../icons/components/UiChevronDown.cjs");
 const UiChevronRight = require("../icons/components/UiChevronRight.cjs");
 const FILTER_BAR_GAP_PX = 8;
 const FILTER_BAR_OVERFLOW_TRIGGER_ESTIMATE_PX = 44;
+const FILTER_BAR_ROW_CLASS = "flex items-center gap-2 overflow-visible bg-background py-1.5";
 function FilterBar({
   search,
   filters,
@@ -41,7 +42,8 @@ function FilterBar({
   onApply,
   applyLabel = "Apply",
   isPending = false,
-  overflowMode = "responsive"
+  overflowMode = "responsive",
+  overlay
 }) {
   const hasRangeControls = Boolean(timeRange || dateRange);
   const showApply = !autoSubmit && !!onApply;
@@ -138,16 +140,25 @@ function FilterBar({
     }
     filterNodeRefs.current.set(key, node);
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx(filterBarContext.FilterBarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
+  const row = /* @__PURE__ */ jsxRuntime.jsx(filterBarContext.FilterBarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       "data-slot": "filter-bar",
       className: utils.cn(
-        "flex flex-nowrap items-center gap-2 overflow-visible bg-background py-1.5",
-        "flex-wrap md:flex-nowrap",
-        overflowMode === "wrap" && "flex-wrap",
-        className
+        FILTER_BAR_ROW_CLASS,
+        // `wrap` has to drop the md:flex-nowrap entirely rather than add a
+        // plain flex-wrap beside it: the two live in different variant groups,
+        // so twMerge keeps both and the breakpoint variant still wins above
+        // md — which made the documented escape hatch do nothing on exactly
+        // the desktop widths where a crowded bar overflows the viewport.
+        overflowMode === "wrap" ? "flex-wrap" : "flex-wrap md:flex-nowrap",
+        className,
+        // Hidden rather than unmounted, so a half-typed search survives the
+        // takeover. `visibility: hidden` is not focusable per spec, so this
+        // leaves the tab order without needing `inert`.
+        overlay && "invisible pointer-events-none"
       ),
+      ...overlay ? { "aria-hidden": true } : {},
       children: [
         leading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center gap-2", children: leading }),
         search && /* @__PURE__ */ jsxRuntime.jsx(SearchField, { search }),
@@ -208,6 +219,18 @@ function FilterBar({
       ]
     }
   ) });
+  if (!overlay) return row;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-start-1 row-start-1 min-w-0", children: row }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-slot": "filter-bar-overlay",
+        className: utils.cn(FILTER_BAR_ROW_CLASS, "col-start-1 row-start-1 min-w-0 flex-wrap"),
+        children: overlay
+      }
+    )
+  ] });
 }
 function FilterBarFilterPanel({
   filter,