@12-apps/ui 6.11.0 → 6.11.1

package/dist/chunk-QXMBYYNG.js

@@ -0,0 +1,162 @@
+import {
+  Sheet
+} from "./chunk-AH54NYFW.js";
+import {
+  Dialog
+} from "./chunk-ZZVL523U.js";
+import {
+  Button
+} from "./chunk-GD7HXHOT.js";
+import {
+  accentFor
+} from "./chunk-OZCEKQIX.js";
+
+// src/components/navigation/AppHeader/AppHeader.details.tsx
+import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DIALOG_WIDTH = 460;
+var XXS_MAX_WIDTH = 360;
+function sheetHeight(xxs) {
+  return { height: "auto", maxHeight: xxs ? "100dvh" : "90dvh" };
+}
+function usesSheet(presentation, compact) {
+  if (presentation === "sheet") return true;
+  if (presentation === "dialog") return false;
+  return compact;
+}
+var DetailRow = ({
+  row,
+  last,
+  dataTestId
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      "data-testid": `${dataTestId}-row`,
+      "data-row": row.id ?? row.label,
+      sx: {
+        display: "flex",
+        alignItems: "flex-start",
+        justifyContent: "space-between",
+        gap: 2,
+        py: 1.5,
+        borderBottom: last ? "none" : `1px solid ${theme.palette.divider}`
+      },
+      children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "body1", color: "text.secondary", component: "span", sx: { flex: "0 0 auto" }, children: row.label }),
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "body1",
+            component: "span",
+            sx: {
+              minWidth: 0,
+              textAlign: "right",
+              fontWeight: row.tone ? 700 : 500,
+              color: row.tone ? accentFor(theme, row.tone).main : "text.primary",
+              // Newlines in a value are meaningful — an address is two lines.
+              whiteSpace: "pre-line"
+            },
+            children: row.value
+          }
+        )
+      ]
+    }
+  );
+};
+var DetailsBody = ({ rows, children, dataTestId }) => /* @__PURE__ */ jsxs(Box, { "data-testid": `${dataTestId}-body`, children: [
+  (rows ?? []).map((row, index) => /* @__PURE__ */ jsx(
+    DetailRow,
+    {
+      row,
+      last: index === (rows?.length ?? 0) - 1 && !children,
+      dataTestId
+    },
+    row.id ?? row.label
+  )),
+  children
+] });
+var DetailsAction = ({ action, dataTestId, padded = false }) => action ? /* @__PURE__ */ jsx(Box, { sx: padded ? { pt: 2 } : void 0, children: /* @__PURE__ */ jsx(
+  Button,
+  {
+    variant: "solid",
+    color: action.color ?? "primary",
+    size: "lg",
+    fullWidth: true,
+    disabled: action.disabled,
+    onClick: action.onClick,
+    dataTestId: action.dataTestId ?? `${dataTestId}-action`,
+    children: action.label
+  }
+) }) : null;
+var AppHeaderDetails = ({
+  open,
+  onClose,
+  title,
+  subtitle,
+  rows,
+  children,
+  action,
+  presentation = "auto",
+  breakpoint = "sm",
+  className,
+  dataTestId = "app-header-details"
+}) => {
+  const theme = useTheme();
+  const asSheet = usesSheet(presentation, useMediaQuery(theme.breakpoints.down(breakpoint)));
+  const xxs = useMediaQuery(`(max-width:${XXS_MAX_WIDTH - 0.05}px)`);
+  const description = typeof subtitle === "string" ? subtitle : void 0;
+  const richSubtitle = description === void 0 ? subtitle : null;
+  const body = /* @__PURE__ */ jsx(DetailsBody, { rows, dataTestId, children });
+  const footer = /* @__PURE__ */ jsx(DetailsAction, { action, dataTestId });
+  if (asSheet) {
+    return /* @__PURE__ */ jsxs(
+      Sheet,
+      {
+        open,
+        onClose,
+        onOpenChange: (next) => !next && onClose(),
+        position: "bottom",
+        size: "md",
+        style: sheetHeight(xxs),
+        className,
+        title,
+        description,
+        showCloseButton: true,
+        rounded: true,
+        footer,
+        dataTestId,
+        children: [
+          richSubtitle,
+          body
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    Dialog,
+    {
+      open,
+      onClose,
+      title,
+      description,
+      showCloseButton: true,
+      fullWidth: true,
+      className,
+      dataTestId,
+      PaperProps: { sx: { maxWidth: DIALOG_WIDTH, borderRadius: 3 } },
+      children: [
+        richSubtitle,
+        body,
+        /* @__PURE__ */ jsx(DetailsAction, { action, dataTestId, padded: true })
+      ]
+    }
+  );
+};
+AppHeaderDetails.displayName = "AppHeaderDetails";
+
+export {
+  AppHeaderDetails
+};
+//# sourceMappingURL=chunk-QXMBYYNG.js.map

package/dist/chunk-QXMBYYNG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/AppHeader/AppHeader.details.tsx"],"sourcesContent":["'use client';\n\nimport { Box, Typography, useMediaQuery, useTheme } from '@mui/material';\nimport React from 'react';\n\nimport { accentFor } from '../../../tokens/scales';\nimport { Sheet } from '../../data-display/Sheet/Sheet';\nimport { Button } from '../../form/Button/Button';\nimport { Dialog } from '../../feedback/Dialog/Dialog';\n\nimport type {\n  AppHeaderDetailRow,\n  AppHeaderDetailsAction,\n  AppHeaderDetailsProps,\n} from './AppHeader.types';\n\n/** How wide the dialog presentation grows before it stops. */\nconst DIALOG_WIDTH = 460;\n\n/**\n * Where the smallest phones stop. The theme's scale starts at `xs`/`sm`, so\n * there is no `xxs` breakpoint to ask for — this is that boundary, named once\n * rather than inlined at the place it decides something.\n */\nconst XXS_MAX_WIDTH = 360;\n\n/**\n * The sheet grows to its content and stops at the viewport; it does not take a\n * fixed slab of height.\n *\n * `Sheet`'s vertical presets are absolute (`md` is 400px), which on a phone is\n * shorter than six detail rows plus a button — so the panel scrolled INSIDE a\n * screen that had room to spare, putting the address and the way out below the\n * fold of a sheet using two thirds of the display. `height: auto` sizes it to\n * what is in it, and the cap keeps a long panel on-screen: 100dvh on the\n * smallest phones where every pixel counts, 90dvh above that so the panel still\n * reads as a sheet over a page rather than as a new screen.\n *\n * `dvh` and not `vh` — mobile browser chrome makes `vh` overshoot, which would\n * reintroduce exactly the scroll this removes.\n */\nfunction sheetHeight(xxs: boolean): { height: string; maxHeight: string } {\n  return { height: 'auto', maxHeight: xxs ? '100dvh' : '90dvh' };\n}\n\n/** Which surface this viewport calls for. Lifted out to keep the component lean. */\nfunction usesSheet(presentation: AppHeaderDetailsProps['presentation'], compact: boolean): boolean {\n  if (presentation === 'sheet') return true;\n  if (presentation === 'dialog') return false;\n  return compact;\n}\n\n/** One label/value line. The value may wrap to two lines; the label may not. */\nconst DetailRow: React.FC<{ row: AppHeaderDetailRow; last: boolean; dataTestId: string }> = ({\n  row,\n  last,\n  dataTestId,\n}) => {\n  const theme = useTheme();\n  return (\n    <Box\n      data-testid={`${dataTestId}-row`}\n      data-row={row.id ?? row.label}\n      sx={{\n        display: 'flex',\n        alignItems: 'flex-start',\n        justifyContent: 'space-between',\n        gap: 2,\n        py: 1.5,\n        borderBottom: last ? 'none' : `1px solid ${theme.palette.divider}`,\n      }}\n    >\n      <Typography variant=\"body1\" color=\"text.secondary\" component=\"span\" sx={{ flex: '0 0 auto' }}>\n        {row.label}\n      </Typography>\n      <Typography\n        variant=\"body1\"\n        component=\"span\"\n        sx={{\n          minWidth: 0,\n          textAlign: 'right',\n          fontWeight: row.tone ? 700 : 500,\n          color: row.tone ? accentFor(theme, row.tone).main : 'text.primary',\n          // Newlines in a value are meaningful — an address is two lines.\n          whiteSpace: 'pre-line',\n        }}\n      >\n        {row.value}\n      </Typography>\n    </Box>\n  );\n};\n\n/** The rows plus whatever the caller put under them. */\nconst DetailsBody: React.FC<\n  Pick<AppHeaderDetailsProps, 'rows' | 'children'> & { dataTestId: string }\n> = ({ rows, children, dataTestId }) => (\n  <Box data-testid={`${dataTestId}-body`}>\n    {(rows ?? []).map((row, index) => (\n      <DetailRow\n        key={row.id ?? row.label}\n        row={row}\n        last={index === (rows?.length ?? 0) - 1 && !children}\n        dataTestId={dataTestId}\n      />\n    ))}\n    {children}\n  </Box>\n);\n\n/**\n * The single full-width call to action, or nothing.\n *\n * `padded` is for the dialog, which has no footer slot of its own — and the\n * padding lives here rather than at the call site so an action-less panel does\n * not end in a strip of empty space.\n */\nconst DetailsAction: React.FC<{\n  action?: AppHeaderDetailsAction;\n  dataTestId: string;\n  padded?: boolean;\n}> = ({ action, dataTestId, padded = false }) =>\n  action ? (\n    <Box sx={padded ? { pt: 2 } : undefined}>\n      <Button\n        variant=\"solid\"\n        color={action.color ?? 'primary'}\n        size=\"lg\"\n        fullWidth\n        disabled={action.disabled}\n        onClick={action.onClick}\n        dataTestId={action.dataTestId ?? `${dataTestId}-action`}\n      >\n        {action.label}\n      </Button>\n    </Box>\n  ) : null;\n\n/**\n * The panel behind the header's disclosure — the hours, the address, the way\n * out — in the shape the viewport calls for.\n *\n * ONE component with two presentations, because they are one thing to the user\n * and one thing to the caller: a bottom sheet within reach of a thumb, a centred\n * dialog under a pointer. `auto` picks by viewport, so nobody writes that branch\n * at a call site and nobody ships a phone-shaped sheet stretched across a\n * desktop. Force either one with `presentation` when the surrounding layout\n * already decides (a preview frame, a story, a kiosk).\n */\nexport const AppHeaderDetails: React.FC<AppHeaderDetailsProps> = ({\n  open,\n  onClose,\n  title,\n  subtitle,\n  rows,\n  children,\n  action,\n  presentation = 'auto',\n  breakpoint = 'sm',\n  className,\n  dataTestId = 'app-header-details',\n}) => {\n  const theme = useTheme();\n  const asSheet = usesSheet(presentation, useMediaQuery(theme.breakpoints.down(breakpoint)));\n  const xxs = useMediaQuery(`(max-width:${XXS_MAX_WIDTH - 0.05}px)`);\n\n  // Split once, not per branch: a STRING subtitle is the panel's own\n  // `description` (both surfaces style it as part of their header), anything\n  // richer is a node we render ourselves above the rows.\n  const description = typeof subtitle === 'string' ? subtitle : undefined;\n  const richSubtitle = description === undefined ? subtitle : null;\n\n  const body = (\n    <DetailsBody rows={rows} dataTestId={dataTestId}>\n      {children}\n    </DetailsBody>\n  );\n  const footer = <DetailsAction action={action} dataTestId={dataTestId} />;\n\n  if (asSheet) {\n    // No `showHandle`. The grab bar promises a drag this panel does not answer:\n    // its height is its content's, so there is no second position to drag it\n    // to, and the handle sat above a ✕ that already closes it. Swipe-to-dismiss\n    // is `Sheet`'s default and still works — it just stops being advertised by\n    // a control that looked resizable and was not.\n    return (\n      <Sheet\n        open={open}\n        onClose={onClose}\n        onOpenChange={(next) => !next && onClose()}\n        position=\"bottom\"\n        size=\"md\"\n        style={sheetHeight(xxs)}\n        className={className}\n        title={title}\n        description={description}\n        showCloseButton\n        rounded\n        footer={footer}\n        dataTestId={dataTestId}\n      >\n        {richSubtitle}\n        {body}\n      </Sheet>\n    );\n  }\n\n  return (\n    <Dialog\n      open={open}\n      onClose={onClose}\n      title={title}\n      description={description}\n      showCloseButton\n      fullWidth\n      className={className}\n      dataTestId={dataTestId}\n      PaperProps={{ sx: { maxWidth: DIALOG_WIDTH, borderRadius: 3 } }}\n    >\n      {richSubtitle}\n      {body}\n      <DetailsAction action={action} dataTestId={dataTestId} padded />\n    </Dialog>\n  );\n};\n\nAppHeaderDetails.displayName = 'AppHeaderDetails';\n"],"mappings":"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","names":[]}

package/dist/chunk-QYKDY4EI.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-QYKDY4EI.js.map

package/dist/chunk-QYKDY4EI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-R445KMGG.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-R445KMGG.js.map

package/dist/chunk-R445KMGG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-R52HJAYO.js

@@ -0,0 +1,126 @@
+// src/components/typography/Text/Text.tsx
+import { alpha, Typography } from "@mui/material";
+import { styled } from "@mui/material";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+var getColorFromTheme = (theme, color) => {
+  if (color === "neutral") {
+    return theme.palette.text.primary;
+  }
+  if (color === "secondary") {
+    return theme.palette.text.secondary;
+  }
+  const colorMap = {
+    primary: theme.palette.primary.main,
+    success: theme.palette.success.main,
+    warning: theme.palette.warning.main,
+    info: theme.palette.info.main,
+    danger: theme.palette.error.main
+  };
+  return colorMap[color];
+};
+var SIZE_MAP = {
+  xs: { fontSize: "0.75rem", lineHeight: 1.2 },
+  sm: { fontSize: "0.875rem", lineHeight: 1.3 },
+  md: { fontSize: "1rem", lineHeight: 1.5 },
+  lg: { fontSize: "1.125rem", lineHeight: 1.4 },
+  xl: { fontSize: "1.25rem", lineHeight: 1.3 }
+};
+var WEIGHT_MAP = {
+  light: 300,
+  normal: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700
+};
+var decorationFor = (underline, strikethrough) => [underline && "underline", strikethrough && "line-through"].filter(Boolean).join(" ") || "none";
+var baseTextStyles = (theme, a) => ({
+  color: getColorFromTheme(theme, a.customColor ?? "neutral"),
+  fontSize: SIZE_MAP[a.customSize ?? "md"]?.fontSize,
+  lineHeight: SIZE_MAP[a.customSize ?? "md"]?.lineHeight,
+  fontWeight: WEIGHT_MAP[a.customWeight ?? "normal"],
+  fontStyle: a.italic ? "italic" : "normal",
+  textDecoration: decorationFor(a.underline, a.strikethrough),
+  transition: "all 0.2s ease"
+});
+var sizeOverride = (customSize, atDefault) => (customSize ?? "md") === "md" ? atDefault : SIZE_MAP[customSize ?? "md"]?.fontSize;
+var textVariantStyles = (theme, a, base) => {
+  const weight = a.customWeight ?? "normal";
+  switch (a.customVariant) {
+    case "heading":
+      return {
+        ...base,
+        fontFamily: theme.typography.h4.fontFamily,
+        fontWeight: weight === "normal" ? 600 : WEIGHT_MAP[weight],
+        letterSpacing: "-0.01em"
+      };
+    case "caption":
+      return {
+        ...base,
+        fontSize: sizeOverride(a.customSize, "0.75rem"),
+        opacity: 0.8,
+        letterSpacing: "0.02em"
+      };
+    case "code":
+      return {
+        ...base,
+        fontFamily: 'Monaco, Menlo, "Ubuntu Mono", "Courier New", monospace',
+        fontSize: sizeOverride(a.customSize, "0.875rem"),
+        backgroundColor: alpha(theme.palette.primary.main, 0.08),
+        padding: "2px 6px",
+        borderRadius: theme.shape.borderRadius / 2,
+        border: `1px solid ${alpha(theme.palette.primary.main, 0.12)}`
+      };
+    default:
+      return { ...base, fontFamily: theme.typography.body1.fontFamily };
+  }
+};
+var StyledText = styled(Typography, {
+  shouldForwardProp: (prop) => ![
+    "customVariant",
+    "customColor",
+    "customSize",
+    "customWeight",
+    "italic",
+    "underline",
+    "strikethrough"
+  ].includes(prop)
+})((args) => {
+  const { theme } = args;
+  return textVariantStyles(theme, args, baseTextStyles(theme, args));
+});
+var Text = React.forwardRef(
+  ({
+    variant = "body",
+    color = "neutral",
+    size = "md",
+    weight = "normal",
+    as = "span",
+    italic = false,
+    underline = false,
+    strikethrough = false,
+    children,
+    ...props
+  }, ref) => /* @__PURE__ */ jsx(
+    StyledText,
+    {
+      ref,
+      customVariant: variant,
+      customColor: color,
+      customSize: size,
+      customWeight: weight,
+      italic,
+      underline,
+      strikethrough,
+      ...as && { as },
+      ...props,
+      children
+    }
+  )
+);
+Text.displayName = "Text";
+
+export {
+  Text
+};
+//# sourceMappingURL=chunk-R52HJAYO.js.map

package/dist/chunk-R72WO3PQ.js

@@ -0,0 +1,124 @@
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  Box
+} from "./chunk-34DQAXL2.js";
+
+// src/components/data-display/DataViews/data-views-search.tsx
+import CloseIcon from "@mui/icons-material/Close";
+import SearchIcon from "@mui/icons-material/Search";
+import { IconButton, InputAdornment, TextField } from "@mui/material";
+import { 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();
+  const [draft, setDraft] = useState(value);
+  const prev = useRef(value);
+  if (prev.current !== value) {
+    prev.current = value;
+    if (draft !== value) setDraft(value);
+  }
+  useEffect(() => {
+    if (draft === value) return void 0;
+    const timer = setTimeout(() => onChange(draft), SEARCH_DEBOUNCE_MS);
+    return () => clearTimeout(timer);
+  }, [draft, value, onChange]);
+  return /* @__PURE__ */ jsx(
+    TextField,
+    {
+      size: "small",
+      value: draft,
+      autoFocus,
+      onChange: (event) => setDraft(event.target.value),
+      onKeyDown: (event) => {
+        if (event.key === "Escape") {
+          event.preventDefault();
+          if (draft === "") onEscape?.();
+          setDraft("");
+          return;
+        }
+        if (event.key !== "Enter") return;
+        event.preventDefault();
+        if (draft !== value) onChange(draft);
+      },
+      placeholder: copy.search.placeholder,
+      inputProps: { "aria-label": copy.search.allColumnsLabel, "data-testid": testId },
+      InputProps: {
+        startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(SearchIcon, { sx: { fontSize: 16, color: "text.secondary" } }) }),
+        endAdornment: draft ? /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            size: "small",
+            "aria-label": copy.search.clear,
+            "data-testid": testId ? `${testId}-clear` : void 0,
+            onClick: () => setDraft(""),
+            sx: { p: 0.25 },
+            children: /* @__PURE__ */ jsx(CloseIcon, { sx: { fontSize: 14 } })
+          }
+        ) }) : void 0
+      },
+      sx: boxWidth(fill)
+    }
+  );
+}
+function CollapsedSearch({
+  active,
+  onOpen,
+  testId
+}) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsxs(
+    IconButton,
+    {
+      size: "small",
+      onClick: onOpen,
+      "aria-label": copy.search.open,
+      "aria-expanded": false,
+      "data-testid": testId ? `${testId}-collapsed` : void 0,
+      sx: {
+        position: "relative",
+        border: 1,
+        borderRadius: 1,
+        borderColor: active ? "primary.main" : "divider",
+        color: active ? "primary.main" : "text.secondary",
+        bgcolor: active ? "action.selected" : "background.paper"
+      },
+      children: [
+        /* @__PURE__ */ jsx(SearchIcon, { sx: { fontSize: 18 } }),
+        active && /* @__PURE__ */ jsx(
+          Box,
+          {
+            component: "span",
+            sx: {
+              position: "absolute",
+              top: 2,
+              right: 2,
+              width: 6,
+              height: 6,
+              borderRadius: "50%",
+              bgcolor: "primary.main"
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  InlineKeyword,
+  CollapsedSearch
+};
+//# sourceMappingURL=chunk-R72WO3PQ.js.map

package/dist/chunk-R72WO3PQ.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, InputAdornment, TextField } from \"@mui/material\";\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":[]}