@12-apps/ui 6.24.6 → 6.24.7

package/dist/_internal/components/data-display/DataViews/DataViewsGrid.js

@@ -1,13 +1,13 @@
 "use client";
 import {
   DataViewsGrid
-} from "../../../../chunk-53PDVLRK.js";
-import "../../../../chunk-LWRMKF7D.js";
+} from "../../../../chunk-6OORHAE7.js";
+import "../../../../chunk-H5VEJDEK.js";
 import "../../../../chunk-BPLFM2GL.js";
 import "../../../../chunk-E55CJV65.js";
 import "../../../../chunk-PN5CQKA2.js";
 import "../../../../chunk-5OIH36KX.js";
-import "../../../../chunk-I3E2QHTH.js";
+import "../../../../chunk-6NSIZ2ZO.js";
 import "../../../../chunk-5WNQJ5KS.js";
 import "../../../../chunk-EJQW2IYW.js";
 import "../../../../chunk-6LGWJFQK.js";
@@ -24,7 +24,7 @@ import "../../../../chunk-IAGOUTI6.js";
 import "../../../../chunk-EMMPNB6D.js";
 import "../../../../chunk-KX75HM5U.js";
 import "../../../../chunk-XKV5ZIBG.js";
-import "../../../../chunk-A7Q5AQVD.js";
+import "../../../../chunk-HZVFAGLZ.js";
 import "../../../../chunk-OGGHD64H.js";
 import "../../../../chunk-CZPU5TW3.js";
 import "../../../../chunk-6VP2L3DJ.js";

package/dist/_internal/components/data-display/DataViews/DataViewsTableBase.js

@@ -1,16 +1,16 @@
 "use client";
 import {
   DataViewsTableBase
-} from "../../../../chunk-ZXOT3U6U.js";
+} from "../../../../chunk-QPLWDSYG.js";
 import "../../../../chunk-4X4KM4ZB.js";
-import "../../../../chunk-53PDVLRK.js";
+import "../../../../chunk-6OORHAE7.js";
 import "../../../../chunk-ZOLAYP2D.js";
-import "../../../../chunk-LWRMKF7D.js";
+import "../../../../chunk-H5VEJDEK.js";
 import "../../../../chunk-BPLFM2GL.js";
 import "../../../../chunk-E55CJV65.js";
 import "../../../../chunk-PN5CQKA2.js";
 import "../../../../chunk-5OIH36KX.js";
-import "../../../../chunk-I3E2QHTH.js";
+import "../../../../chunk-6NSIZ2ZO.js";
 import "../../../../chunk-5WNQJ5KS.js";
 import "../../../../chunk-EJQW2IYW.js";
 import "../../../../chunk-6LGWJFQK.js";
@@ -27,7 +27,7 @@ import "../../../../chunk-IAGOUTI6.js";
 import "../../../../chunk-EMMPNB6D.js";
 import "../../../../chunk-KX75HM5U.js";
 import "../../../../chunk-XKV5ZIBG.js";
-import "../../../../chunk-A7Q5AQVD.js";
+import "../../../../chunk-HZVFAGLZ.js";
 import "../../../../chunk-OGGHD64H.js";
 import "../../../../chunk-CZPU5TW3.js";
 import "../../../../chunk-6VP2L3DJ.js";

package/dist/_internal/components/data-display/DataViews/data-views-grid-parts.js

@@ -1,12 +1,12 @@
 "use client";
 import {
   GridShell
-} from "../../../../chunk-LWRMKF7D.js";
+} from "../../../../chunk-H5VEJDEK.js";
 import "../../../../chunk-BPLFM2GL.js";
 import "../../../../chunk-E55CJV65.js";
 import "../../../../chunk-PN5CQKA2.js";
 import "../../../../chunk-5OIH36KX.js";
-import "../../../../chunk-I3E2QHTH.js";
+import "../../../../chunk-6NSIZ2ZO.js";
 import "../../../../chunk-5WNQJ5KS.js";
 import "../../../../chunk-EJQW2IYW.js";
 import "../../../../chunk-6LGWJFQK.js";
@@ -23,7 +23,7 @@ import "../../../../chunk-IAGOUTI6.js";
 import "../../../../chunk-EMMPNB6D.js";
 import "../../../../chunk-KX75HM5U.js";
 import "../../../../chunk-XKV5ZIBG.js";
-import "../../../../chunk-A7Q5AQVD.js";
+import "../../../../chunk-HZVFAGLZ.js";
 import "../../../../chunk-OGGHD64H.js";
 import "../../../../chunk-CZPU5TW3.js";
 import "../../../../chunk-6VP2L3DJ.js";

package/dist/_internal/components/data-display/DataViews/data-views-inline-bar.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   InlineFilterControls
-} from "../../../../chunk-I3E2QHTH.js";
+} from "../../../../chunk-6NSIZ2ZO.js";
 import "../../../../chunk-5WNQJ5KS.js";
 import "../../../../chunk-EJQW2IYW.js";
 import "../../../../chunk-6LGWJFQK.js";
@@ -11,7 +11,7 @@ import "../../../../chunk-FV36LFPX.js";
 import "../../../../chunk-GCZJH4XL.js";
 import "../../../../chunk-F4RR4666.js";
 import "../../../../chunk-CBOB5AV6.js";
-import "../../../../chunk-A7Q5AQVD.js";
+import "../../../../chunk-HZVFAGLZ.js";
 import "../../../../chunk-KHG57NAE.js";
 import "../../../../chunk-4NS4PJJH.js";
 import "../../../../chunk-J3JGO6Y6.js";

package/dist/_internal/components/data-display/DataViews/data-views-search.js

@@ -2,7 +2,7 @@
 import {
   CollapsedSearch,
   InlineKeyword
-} from "../../../../chunk-A7Q5AQVD.js";
+} from "../../../../chunk-HZVFAGLZ.js";
 import "../../../../chunk-KHG57NAE.js";
 import "../../../../chunk-6DPAWXZ3.js";
 import "../../../../chunk-PZ5AY32C.js";

package/dist/{chunk-I3E2QHTH.js → chunk-6NSIZ2ZO.js}

@@ -14,7 +14,7 @@ import {
 import {
   CollapsedSearch,
   InlineKeyword
-} from "./chunk-A7Q5AQVD.js";
+} from "./chunk-HZVFAGLZ.js";
 
 // src/components/data-display/DataViews/data-views-inline-bar.tsx
 import Box from "@mui/material/Box/index.js";
@@ -220,4 +220,4 @@ function FilterSlots({
 export {
   InlineFilterControls
 };
-//# sourceMappingURL=chunk-I3E2QHTH.js.map
+//# sourceMappingURL=chunk-6NSIZ2ZO.js.map

package/dist/{chunk-53PDVLRK.js → chunk-6OORHAE7.js}

@@ -1,6 +1,6 @@
 import {
   GridShell
-} from "./chunk-LWRMKF7D.js";
+} from "./chunk-H5VEJDEK.js";
 import {
   useDataViewsState
 } from "./chunk-TX5V42AY.js";
@@ -27,4 +27,4 @@ function DataViewsGrid(props) {
 export {
   DataViewsGrid
 };
-//# sourceMappingURL=chunk-53PDVLRK.js.map
+//# sourceMappingURL=chunk-6OORHAE7.js.map

package/dist/{chunk-LWRMKF7D.js → chunk-H5VEJDEK.js}

@@ -10,7 +10,7 @@ import {
 } from "./chunk-5OIH36KX.js";
 import {
   InlineFilterControls
-} from "./chunk-I3E2QHTH.js";
+} from "./chunk-6NSIZ2ZO.js";
 import {
   GridHeaderRow
 } from "./chunk-JSH3HFDQ.js";
@@ -237,4 +237,4 @@ function GridShell(props) {
 export {
   GridShell
 };
-//# sourceMappingURL=chunk-LWRMKF7D.js.map
+//# sourceMappingURL=chunk-H5VEJDEK.js.map

package/dist/{chunk-A7Q5AQVD.js → chunk-HZVFAGLZ.js}

@@ -11,32 +11,47 @@ import SearchIcon from "@mui/icons-material/Search";
 import IconButton from "@mui/material/IconButton/index.js";
 import InputAdornment from "@mui/material/InputAdornment/index.js";
 import TextField from "@mui/material/TextField/index.js";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var SEARCH_DEBOUNCE_MS = 350;
 function boxWidth(fill) {
   return { flex: 1, minWidth: fill ? 0 : 200, maxWidth: fill ? "none" : 384 };
 }
-function InlineKeyword({
-  value,
-  onChange,
-  testId,
-  autoFocus,
-  onEscape,
-  fill = false
-}) {
-  const copy = useDataViewsCopy();
+function useKeywordDraft(value, onChange) {
   const [draft, setDraft] = useState(value);
   const prev = useRef(value);
   if (prev.current !== value) {
     prev.current = value;
     if (draft !== value) setDraft(value);
   }
+  const commit = useRef(onChange);
+  useEffect(() => {
+    commit.current = onChange;
+  });
   useEffect(() => {
     if (draft === value) return void 0;
-    const timer = setTimeout(() => onChange(draft), SEARCH_DEBOUNCE_MS);
+    const timer = setTimeout(() => commit.current(draft), SEARCH_DEBOUNCE_MS);
     return () => clearTimeout(timer);
-  }, [draft, value, onChange]);
+  }, [draft, value]);
+  const commitNow = useCallback(
+    (typed) => {
+      setDraft(typed);
+      if (typed !== value) commit.current(typed);
+    },
+    [value]
+  );
+  return { draft, setDraft, commitNow };
+}
+function InlineKeyword({
+  value,
+  onChange,
+  testId,
+  autoFocus,
+  onEscape,
+  fill = false
+}) {
+  const copy = useDataViewsCopy();
+  const { draft, setDraft, commitNow } = useKeywordDraft(value, onChange);
   return /* @__PURE__ */ jsx(
     TextField,
     {
@@ -53,7 +68,7 @@ function InlineKeyword({
         }
         if (event.key !== "Enter") return;
         event.preventDefault();
-        if (draft !== value) onChange(draft);
+        commitNow(event.target instanceof HTMLInputElement ? event.target.value : draft);
       },
       placeholder: copy.search.placeholder,
       inputProps: { "aria-label": copy.search.allColumnsLabel, "data-testid": testId },
@@ -123,4 +138,4 @@ export {
   InlineKeyword,
   CollapsedSearch
 };
-//# sourceMappingURL=chunk-A7Q5AQVD.js.map
+//# sourceMappingURL=chunk-HZVFAGLZ.js.map

package/dist/chunk-HZVFAGLZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-search.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * THE INLINE BAR'S SEARCH — the one control on the toolbar that cannot be\n * guessed from an icon's position, which is why it is the LAST thing the\n * degradation ladder takes away. See `data-views-overflow.ts`.\n */\nimport CloseIcon from \"@mui/icons-material/Close\";\nimport SearchIcon from \"@mui/icons-material/Search\";\nimport IconButton from \"@mui/material/IconButton/index.js\";\nimport InputAdornment from \"@mui/material/InputAdornment/index.js\";\nimport TextField from \"@mui/material/TextField/index.js\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { Box } from \"../../../mui/Box\";\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\n\n/** How long the box waits after the last keystroke before it queries. */\nconst SEARCH_DEBOUNCE_MS = 350;\n\n/**\n * How wide the keyword box is allowed to be.\n *\n * The 200px floor is right while the box shares the row: a search you cannot\n * read six characters in is not a search. It is WRONG once the box has been\n * expanded out of its collapsed state on a narrow screen, where the cluster was\n * sized for a magnifier — the floor cannot be met there, so the row scrolled\n * sideways instead (154px of overhang at 320px). In that mode the box shrinks,\n * and if what is left would still be unreadable the bar hands it the whole\n * cluster instead (`searchTakeover`).\n */\nfunction boxWidth(fill: boolean): { flex: number; minWidth: number; maxWidth: number | \"none\" } {\n  return { flex: 1, minWidth: fill ? 0 : 200, maxWidth: fill ? \"none\" : 384 };\n}\n\n/**\n * The box's own draft, and the two ways it reaches `onChange`.\n *\n * Extracted from {@link InlineKeyword} so the commit policy reads in one place\n * rather than split across a render body — and because it is where both halves\n * of a defect that lost searches outright had to be fixed.\n *\n * ## The debounce must not be keyed on the handler's identity\n *\n * Every caller builds `onChange` inline — the grid's own bar passes\n * `(value) => c.patch({ search: value })`, rebuilt on each render. Keying the\n * effect on it re-armed the timer on every render, and a busy admin page\n * re-renders more often than every 350ms as its queries land, so the timer\n * never survived to fire and the term was NEVER committed: measured in one\n * adopter as a dead `?q=` on a server-mode grid, where a 15-second loop pressed\n * Enter over and over and the URL never moved. So the handler is read through a\n * ref and the effect depends on `[draft, value]` alone.\n *\n * ## An immediate commit must read the BOX, not the draft\n *\n * A keystroke can land before React has processed the edit before it — a fast\n * typist, and every Playwright `fill()` followed by `press('Enter')`. `draft` is\n * then still the value from before the edit, and comparing THAT to `value` said\n * \"nothing changed\" and dropped the keystroke, leaving the term on screen with\n * an unfiltered list behind it. `commitNow` takes what the caller read off the\n * element and syncs the draft to it, which also keeps the box from being reset\n * to a stale draft by the next render when a host ignores the commit.\n */\nfunction useKeywordDraft(\n  value: string,\n  onChange: (next: string) => void,\n): { draft: string; setDraft: (next: string) => void; commitNow: (typed: string) => void } {\n  const [draft, setDraft] = useState(value);\n  const prev = useRef(value);\n  // An external change (a saved view, the URL, \"Limpar\") wins over the draft.\n  if (prev.current !== value) {\n    prev.current = value;\n    if (draft !== value) setDraft(value);\n  }\n  const commit = useRef(onChange);\n  useEffect(() => {\n    commit.current = onChange;\n  });\n  useEffect(() => {\n    if (draft === value) return undefined;\n    const timer = setTimeout(() => commit.current(draft), SEARCH_DEBOUNCE_MS);\n    return () => clearTimeout(timer);\n  }, [draft, value]);\n  const commitNow = useCallback(\n    (typed: string) => {\n      setDraft(typed);\n      if (typed !== value) commit.current(typed);\n    },\n    [value],\n  );\n  return { draft, setDraft, commitNow };\n}\n\n/**\n * The bar's keyword box.\n *\n * DEBOUNCED rather than committed on Enter/blur. In server mode every commit is\n * a round trip, and a box that only fires on blur makes the operator press a\n * key they were not told about to see any result at all — they type, nothing\n * happens, and the list looks broken. 350ms is long enough that a word costs\n * one query, short enough to feel like live search.\n *\n * `Escape` clears; the X clears without leaving the box. Both exist because\n * clearing by selecting-and-deleting is three gestures for the most common\n * thing anyone does to a search box.\n */\nexport function InlineKeyword({\n  value,\n  onChange,\n  testId,\n  autoFocus,\n  onEscape,\n  fill = false,\n}: {\n  value: string;\n  onChange: (value: string) => void;\n  testId?: string;\n  autoFocus?: boolean;\n  /** Called on Escape with the box already empty — the collapsed bar closes it. */\n  onEscape?: () => void;\n  /** Take whatever width there is, with no minimum — see {@link boxWidth}. */\n  fill?: boolean;\n}): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  const { draft, setDraft, commitNow } = useKeywordDraft(value, onChange);\n\n  return (\n    <TextField\n      size=\"small\"\n      value={draft}\n      autoFocus={autoFocus}\n      onChange={(event) => setDraft(event.target.value)}\n      onKeyDown={(event) => {\n        if (event.key === \"Escape\") {\n          event.preventDefault();\n          if (draft === \"\") onEscape?.();\n          setDraft(\"\");\n          return;\n        }\n        // Enter still commits IMMEDIATELY, ahead of the debounce — someone who\n        // presses it has decided, and waiting out the timer reads as a stall.\n        if (event.key !== \"Enter\") return;\n        event.preventDefault();\n        // The BOX, not `draft` — see {@link useKeywordDraft}.\n        commitNow(event.target instanceof HTMLInputElement ? event.target.value : draft);\n      }}\n      placeholder={copy.search.placeholder}\n      inputProps={{ \"aria-label\": copy.search.allColumnsLabel, \"data-testid\": testId }}\n      InputProps={{\n        startAdornment: (\n          <InputAdornment position=\"start\">\n            <SearchIcon sx={{ fontSize: 16, color: \"text.secondary\" }} />\n          </InputAdornment>\n        ),\n        endAdornment: draft ? (\n          <InputAdornment position=\"end\">\n            <IconButton\n              size=\"small\"\n              aria-label={copy.search.clear}\n              data-testid={testId ? `${testId}-clear` : undefined}\n              onClick={() => setDraft(\"\")}\n              sx={{ p: 0.25 }}\n            >\n              <CloseIcon sx={{ fontSize: 14 }} />\n            </IconButton>\n          </InputAdornment>\n        ) : undefined,\n      }}\n      // Takes the free space and gives it up first — step 3 of the ladder,\n      // which needs no flag because flex does it (see `computeSplit`).\n      sx={boxWidth(fill)}\n    />\n  );\n}\n\n/**\n * Step 4 of the ladder: the search as a magnifier.\n *\n * Carries a dot when a search is APPLIED. Collapsing a control that is\n * currently filtering the list, with nothing saying so, is how an operator ends\n * up staring at 3 rows of 214 and reading it as missing data.\n */\nexport function CollapsedSearch({\n  active,\n  onOpen,\n  testId,\n}: {\n  active: boolean;\n  onOpen: () => void;\n  testId?: string;\n}): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  return (\n    <IconButton\n      size=\"small\"\n      onClick={onOpen}\n      aria-label={copy.search.open}\n      aria-expanded={false}\n      data-testid={testId ? `${testId}-collapsed` : undefined}\n      sx={{\n        position: \"relative\",\n        border: 1,\n        borderRadius: 1,\n        borderColor: active ? \"primary.main\" : \"divider\",\n        color: active ? \"primary.main\" : \"text.secondary\",\n        bgcolor: active ? \"action.selected\" : \"background.paper\",\n      }}\n    >\n      <SearchIcon sx={{ fontSize: 18 }} />\n      {active && (\n        <Box\n          component=\"span\"\n          sx={{\n            position: \"absolute\",\n            top: 2,\n            right: 2,\n            width: 6,\n            height: 6,\n            borderRadius: \"50%\",\n            bgcolor: \"primary.main\",\n          }}\n        />\n      )}\n    </IconButton>\n  );\n}\n\n"],"mappings":"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","names":["default"]}

package/dist/{chunk-ZXOT3U6U.js → chunk-QPLWDSYG.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-4X4KM4ZB.js";
 import {
   DataViewsGrid
-} from "./chunk-53PDVLRK.js";
+} from "./chunk-6OORHAE7.js";
 import {
   viewStateKey
 } from "./chunk-ZOLAYP2D.js";
@@ -178,4 +178,4 @@ function renderViewDialogs(ctl, fields, columns, views, testIdPrefix, onSaved) {
 export {
   DataViewsTableBase
 };
-//# sourceMappingURL=chunk-ZXOT3U6U.js.map
+//# sourceMappingURL=chunk-QPLWDSYG.js.map

package/dist/data-display/DataViews.js

@@ -3,11 +3,11 @@ import {
 } from "../chunk-JWW2Z3RH.js";
 import {
   DataViewsTableBase
-} from "../chunk-ZXOT3U6U.js";
+} from "../chunk-QPLWDSYG.js";
 import "../chunk-4X4KM4ZB.js";
 import {
   DataViewsGrid
-} from "../chunk-53PDVLRK.js";
+} from "../chunk-6OORHAE7.js";
 import {
   BaseListCard
 } from "../chunk-WR5JFDQ5.js";
@@ -22,14 +22,14 @@ import {
   DropIndicator,
   useDragItem
 } from "../chunk-JCJGJX7V.js";
-import "../chunk-LWRMKF7D.js";
+import "../chunk-H5VEJDEK.js";
 import "../chunk-BPLFM2GL.js";
 import {
   DataViewsBoard
 } from "../chunk-E55CJV65.js";
 import "../chunk-PN5CQKA2.js";
 import "../chunk-5OIH36KX.js";
-import "../chunk-I3E2QHTH.js";
+import "../chunk-6NSIZ2ZO.js";
 import "../chunk-5WNQJ5KS.js";
 import "../chunk-EJQW2IYW.js";
 import "../chunk-6LGWJFQK.js";
@@ -46,7 +46,7 @@ import "../chunk-IAGOUTI6.js";
 import "../chunk-EMMPNB6D.js";
 import "../chunk-KX75HM5U.js";
 import "../chunk-XKV5ZIBG.js";
-import "../chunk-A7Q5AQVD.js";
+import "../chunk-HZVFAGLZ.js";
 import "../chunk-OGGHD64H.js";
 import {
   DEFAULT_RAILS,

package/dist/types/components/data-display/DataViews/data-views-search.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-views-search.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/DataViews/data-views-search.tsx"],"names":[],"mappings":"AAmCA;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,SAAS,EACT,QAAQ,EACR,IAAY,GACb,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,4EAA4E;IAC5E,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA6DpB;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,MAAM,EACN,MAAM,GACP,EAAE;IACD,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAmCpB"}
+{"version":3,"file":"data-views-search.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/DataViews/data-views-search.tsx"],"names":[],"mappings":"AA6FA;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,SAAS,EACT,QAAQ,EACR,IAAY,GACb,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,4EAA4E;IAC5E,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAmDpB;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,MAAM,EACN,MAAM,GACP,EAAE;IACD,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAmCpB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/ui",
-  "version": "6.24.6",
+  "version": "6.24.7",
   "license": "MIT",
   "packageManager": "pnpm@10.34.5",
   "type": "module",

package/src/components/data-display/DataViews/data-views-search.tsx

@@ -10,7 +10,7 @@ import SearchIcon from "@mui/icons-material/Search";
 import IconButton from "@mui/material/IconButton/index.js";
 import InputAdornment from "@mui/material/InputAdornment/index.js";
 import TextField from "@mui/material/TextField/index.js";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 import { Box } from "../../../mui/Box";
 import { useDataViewsCopy } from "./data-views-copy-context";
@@ -33,6 +33,64 @@ function boxWidth(fill: boolean): { flex: number; minWidth: number; maxWidth: nu
   return { flex: 1, minWidth: fill ? 0 : 200, maxWidth: fill ? "none" : 384 };
 }
 
+/**
+ * The box's own draft, and the two ways it reaches `onChange`.
+ *
+ * Extracted from {@link InlineKeyword} so the commit policy reads in one place
+ * rather than split across a render body — and because it is where both halves
+ * of a defect that lost searches outright had to be fixed.
+ *
+ * ## The debounce must not be keyed on the handler's identity
+ *
+ * Every caller builds `onChange` inline — the grid's own bar passes
+ * `(value) => c.patch({ search: value })`, rebuilt on each render. Keying the
+ * effect on it re-armed the timer on every render, and a busy admin page
+ * re-renders more often than every 350ms as its queries land, so the timer
+ * never survived to fire and the term was NEVER committed: measured in one
+ * adopter as a dead `?q=` on a server-mode grid, where a 15-second loop pressed
+ * Enter over and over and the URL never moved. So the handler is read through a
+ * ref and the effect depends on `[draft, value]` alone.
+ *
+ * ## An immediate commit must read the BOX, not the draft
+ *
+ * A keystroke can land before React has processed the edit before it — a fast
+ * typist, and every Playwright `fill()` followed by `press('Enter')`. `draft` is
+ * then still the value from before the edit, and comparing THAT to `value` said
+ * "nothing changed" and dropped the keystroke, leaving the term on screen with
+ * an unfiltered list behind it. `commitNow` takes what the caller read off the
+ * element and syncs the draft to it, which also keeps the box from being reset
+ * to a stale draft by the next render when a host ignores the commit.
+ */
+function useKeywordDraft(
+  value: string,
+  onChange: (next: string) => void,
+): { draft: string; setDraft: (next: string) => void; commitNow: (typed: string) => void } {
+  const [draft, setDraft] = useState(value);
+  const prev = useRef(value);
+  // An external change (a saved view, the URL, "Limpar") wins over the draft.
+  if (prev.current !== value) {
+    prev.current = value;
+    if (draft !== value) setDraft(value);
+  }
+  const commit = useRef(onChange);
+  useEffect(() => {
+    commit.current = onChange;
+  });
+  useEffect(() => {
+    if (draft === value) return undefined;
+    const timer = setTimeout(() => commit.current(draft), SEARCH_DEBOUNCE_MS);
+    return () => clearTimeout(timer);
+  }, [draft, value]);
+  const commitNow = useCallback(
+    (typed: string) => {
+      setDraft(typed);
+      if (typed !== value) commit.current(typed);
+    },
+    [value],
+  );
+  return { draft, setDraft, commitNow };
+}
+
 /**
  * The bar's keyword box.
  *
@@ -64,18 +122,7 @@ export function InlineKeyword({
   fill?: boolean;
 }): React.JSX.Element {
   const copy = useDataViewsCopy();
-  const [draft, setDraft] = useState(value);
-  const prev = useRef(value);
-  // An external change (a saved view, the URL, "Limpar") wins over the draft.
-  if (prev.current !== value) {
-    prev.current = value;
-    if (draft !== value) setDraft(value);
-  }
-  useEffect(() => {
-    if (draft === value) return undefined;
-    const timer = setTimeout(() => onChange(draft), SEARCH_DEBOUNCE_MS);
-    return () => clearTimeout(timer);
-  }, [draft, value, onChange]);
+  const { draft, setDraft, commitNow } = useKeywordDraft(value, onChange);
 
   return (
     <TextField
@@ -94,7 +141,8 @@ export function InlineKeyword({
         // presses it has decided, and waiting out the timer reads as a stall.
         if (event.key !== "Enter") return;
         event.preventDefault();
-        if (draft !== value) onChange(draft);
+        // The BOX, not `draft` — see {@link useKeywordDraft}.
+        commitNow(event.target instanceof HTMLInputElement ? event.target.value : draft);
       }}
       placeholder={copy.search.placeholder}
       inputProps={{ "aria-label": copy.search.allColumnsLabel, "data-testid": testId }}

package/dist/chunk-A7Q5AQVD.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/data-display/DataViews/data-views-search.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * THE INLINE BAR'S SEARCH — the one control on the toolbar that cannot be\n * guessed from an icon's position, which is why it is the LAST thing the\n * degradation ladder takes away. See `data-views-overflow.ts`.\n */\nimport CloseIcon from \"@mui/icons-material/Close\";\nimport SearchIcon from \"@mui/icons-material/Search\";\nimport IconButton from \"@mui/material/IconButton/index.js\";\nimport InputAdornment from \"@mui/material/InputAdornment/index.js\";\nimport TextField from \"@mui/material/TextField/index.js\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport { Box } from \"../../../mui/Box\";\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\n\n/** How long the box waits after the last keystroke before it queries. */\nconst SEARCH_DEBOUNCE_MS = 350;\n\n/**\n * How wide the keyword box is allowed to be.\n *\n * The 200px floor is right while the box shares the row: a search you cannot\n * read six characters in is not a search. It is WRONG once the box has been\n * expanded out of its collapsed state on a narrow screen, where the cluster was\n * sized for a magnifier — the floor cannot be met there, so the row scrolled\n * sideways instead (154px of overhang at 320px). In that mode the box shrinks,\n * and if what is left would still be unreadable the bar hands it the whole\n * cluster instead (`searchTakeover`).\n */\nfunction boxWidth(fill: boolean): { flex: number; minWidth: number; maxWidth: number | \"none\" } {\n  return { flex: 1, minWidth: fill ? 0 : 200, maxWidth: fill ? \"none\" : 384 };\n}\n\n/**\n * The bar's keyword box.\n *\n * DEBOUNCED rather than committed on Enter/blur. In server mode every commit is\n * a round trip, and a box that only fires on blur makes the operator press a\n * key they were not told about to see any result at all — they type, nothing\n * happens, and the list looks broken. 350ms is long enough that a word costs\n * one query, short enough to feel like live search.\n *\n * `Escape` clears; the X clears without leaving the box. Both exist because\n * clearing by selecting-and-deleting is three gestures for the most common\n * thing anyone does to a search box.\n */\nexport function InlineKeyword({\n  value,\n  onChange,\n  testId,\n  autoFocus,\n  onEscape,\n  fill = false,\n}: {\n  value: string;\n  onChange: (value: string) => void;\n  testId?: string;\n  autoFocus?: boolean;\n  /** Called on Escape with the box already empty — the collapsed bar closes it. */\n  onEscape?: () => void;\n  /** Take whatever width there is, with no minimum — see {@link boxWidth}. */\n  fill?: boolean;\n}): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  const [draft, setDraft] = useState(value);\n  const prev = useRef(value);\n  // An external change (a saved view, the URL, \"Limpar\") wins over the draft.\n  if (prev.current !== value) {\n    prev.current = value;\n    if (draft !== value) setDraft(value);\n  }\n  useEffect(() => {\n    if (draft === value) return undefined;\n    const timer = setTimeout(() => onChange(draft), SEARCH_DEBOUNCE_MS);\n    return () => clearTimeout(timer);\n  }, [draft, value, onChange]);\n\n  return (\n    <TextField\n      size=\"small\"\n      value={draft}\n      autoFocus={autoFocus}\n      onChange={(event) => setDraft(event.target.value)}\n      onKeyDown={(event) => {\n        if (event.key === \"Escape\") {\n          event.preventDefault();\n          if (draft === \"\") onEscape?.();\n          setDraft(\"\");\n          return;\n        }\n        // Enter still commits IMMEDIATELY, ahead of the debounce — someone who\n        // presses it has decided, and waiting out the timer reads as a stall.\n        if (event.key !== \"Enter\") return;\n        event.preventDefault();\n        if (draft !== value) onChange(draft);\n      }}\n      placeholder={copy.search.placeholder}\n      inputProps={{ \"aria-label\": copy.search.allColumnsLabel, \"data-testid\": testId }}\n      InputProps={{\n        startAdornment: (\n          <InputAdornment position=\"start\">\n            <SearchIcon sx={{ fontSize: 16, color: \"text.secondary\" }} />\n          </InputAdornment>\n        ),\n        endAdornment: draft ? (\n          <InputAdornment position=\"end\">\n            <IconButton\n              size=\"small\"\n              aria-label={copy.search.clear}\n              data-testid={testId ? `${testId}-clear` : undefined}\n              onClick={() => setDraft(\"\")}\n              sx={{ p: 0.25 }}\n            >\n              <CloseIcon sx={{ fontSize: 14 }} />\n            </IconButton>\n          </InputAdornment>\n        ) : undefined,\n      }}\n      // Takes the free space and gives it up first — step 3 of the ladder,\n      // which needs no flag because flex does it (see `computeSplit`).\n      sx={boxWidth(fill)}\n    />\n  );\n}\n\n/**\n * Step 4 of the ladder: the search as a magnifier.\n *\n * Carries a dot when a search is APPLIED. Collapsing a control that is\n * currently filtering the list, with nothing saying so, is how an operator ends\n * up staring at 3 rows of 214 and reading it as missing data.\n */\nexport function CollapsedSearch({\n  active,\n  onOpen,\n  testId,\n}: {\n  active: boolean;\n  onOpen: () => void;\n  testId?: string;\n}): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  return (\n    <IconButton\n      size=\"small\"\n      onClick={onOpen}\n      aria-label={copy.search.open}\n      aria-expanded={false}\n      data-testid={testId ? `${testId}-collapsed` : undefined}\n      sx={{\n        position: \"relative\",\n        border: 1,\n        borderRadius: 1,\n        borderColor: active ? \"primary.main\" : \"divider\",\n        color: active ? \"primary.main\" : \"text.secondary\",\n        bgcolor: active ? \"action.selected\" : \"background.paper\",\n      }}\n    >\n      <SearchIcon sx={{ fontSize: 18 }} />\n      {active && (\n        <Box\n          component=\"span\"\n          sx={{\n            position: \"absolute\",\n            top: 2,\n            right: 2,\n            width: 6,\n            height: 6,\n            borderRadius: \"50%\",\n            bgcolor: \"primary.main\",\n          }}\n        />\n      )}\n    </IconButton>\n  );\n}\n\n"],"mappings":"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","names":["default"]}