@12-apps/ui 6.34.0 → 6.36.0

package/dist/chunk-4CHROSWR.js

@@ -0,0 +1,174 @@
+import {
+  bounceKeyframes
+} from "./chunk-X6AIKCAV.js";
+import {
+  getScaleDistance
+} from "./chunk-TUBCN4DJ.js";
+import {
+  shadowInk
+} from "./chunk-FQ6UW7IY.js";
+import {
+  rem,
+  rems
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/MapPreview/MapDecorations.tsx
+import LocationIcon from "@mui/icons-material/LocationOn";
+import NavigationIcon from "@mui/icons-material/Navigation";
+import PlaceIcon from "@mui/icons-material/Place";
+import Box from "@mui/material/Box/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { alpha, useTheme } from "@mui/material/styles/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var MapRoads = () => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(Box, { sx: { position: "absolute", top: "20%", left: "15%", width: "70%", height: "60%", opacity: 0.2 }, children: /* @__PURE__ */ jsxs("svg", { width: "100%", height: "100%", style: { position: "absolute" }, children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M 10,50 Q 30,30 50,50 T 90,50",
+        stroke: theme.palette.text.secondary,
+        strokeWidth: "2",
+        fill: "none",
+        opacity: "0.3"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M 50,10 L 50,90",
+        stroke: theme.palette.text.secondary,
+        strokeWidth: "1.5",
+        fill: "none",
+        opacity: "0.3"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M 20,30 L 80,70",
+        stroke: theme.palette.text.secondary,
+        strokeWidth: "1",
+        fill: "none",
+        opacity: "0.2"
+      }
+    )
+  ] }) });
+};
+var DecorativePin = ({ top, left }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(Box, { sx: { position: "absolute", top, left, opacity: 0.6 }, children: /* @__PURE__ */ jsx(PlaceIcon, { sx: { fontSize: rem(theme, 20), color: theme.palette.primary.main } }) });
+};
+var MapDecorativePins = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(DecorativePin, { top: "30%", left: "25%" }),
+  /* @__PURE__ */ jsx(DecorativePin, { top: "65%", left: "70%" })
+] });
+var MapCentreMarker = () => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      "data-testid": "map-marker",
+      sx: {
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -100%)",
+        zIndex: 2,
+        filter: `drop-shadow(${rems(theme, 0, 2, 4)} ${shadowInk(theme, 0.3)})`
+      },
+      children: /* @__PURE__ */ jsx(
+        LocationIcon,
+        {
+          sx: {
+            fontSize: rem(theme, 36),
+            color: theme.palette.error.main,
+            animation: "bounce 2s infinite",
+            "@keyframes bounce": bounceKeyframes(theme)
+          }
+        }
+      )
+    }
+  );
+};
+var MapScaleBar = ({ zoom }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        position: "absolute",
+        bottom: theme.spacing(2),
+        right: theme.spacing(2),
+        display: "flex",
+        alignItems: "center",
+        gap: 0.5,
+        padding: theme.spacing(0.5, 1),
+        background: alpha(theme.palette.background.paper, 0.9),
+        borderRadius: theme.shape.borderRadius,
+        fontSize: rem(theme, 12),
+        color: theme.palette.text.secondary
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              width: rem(theme, 40),
+              height: rem(theme, 2),
+              background: theme.palette.text.secondary,
+              position: "relative",
+              // The end caps that make the bar read as a measurement.
+              "&::before, &::after": {
+                content: '""',
+                position: "absolute",
+                width: rem(theme, 2),
+                height: rem(theme, 6),
+                background: theme.palette.text.secondary
+              },
+              "&::before": { left: 0, top: rem(theme, -2) },
+              "&::after": { right: 0, top: rem(theme, -2) }
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(Typography, { variant: "caption", children: getScaleDistance(zoom) })
+      ]
+    }
+  );
+};
+var MapCompass = () => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      sx: {
+        position: "absolute",
+        top: theme.spacing(2),
+        left: theme.spacing(2),
+        width: rem(theme, 40),
+        height: rem(theme, 40),
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: alpha(theme.palette.background.paper, 0.9),
+        borderRadius: "50%",
+        boxShadow: theme.shadows[2]
+      },
+      children: /* @__PURE__ */ jsx(
+        NavigationIcon,
+        {
+          sx: { fontSize: rem(theme, 24), color: theme.palette.primary.main, transform: "rotate(-45deg)" }
+        }
+      )
+    }
+  );
+};
+
+export {
+  MapRoads,
+  MapDecorativePins,
+  MapCentreMarker,
+  MapScaleBar,
+  MapCompass
+};
+//# sourceMappingURL=chunk-4CHROSWR.js.map

package/dist/chunk-4CHROSWR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/MapPreview/MapDecorations.tsx"],"sourcesContent":["import LocationIcon from '@mui/icons-material/LocationOn';\nimport NavigationIcon from '@mui/icons-material/Navigation';\nimport PlaceIcon from '@mui/icons-material/Place';\nimport Box from '@mui/material/Box/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, useTheme } from '@mui/material/styles/index.js';\nimport type { FC } from 'react';\nimport React from 'react';\n\nimport { getScaleDistance } from './mapProjection';\nimport { bounceKeyframes } from './mapSurface';\nimport { shadowInk } from '../../../tokens/ink';\nimport { rem, rems } from '../../../tokens/relative';\n\n// Decorative only: these give the mock surface something to look like without\n// standing in for real map data.\nexport const MapRoads: FC = () => {\n  const theme = useTheme();\n\n  return (\n    <Box sx={{ position: 'absolute', top: '20%', left: '15%', width: '70%', height: '60%', opacity: 0.2 }}>\n      <svg width=\"100%\" height=\"100%\" style={{ position: 'absolute' }}>\n        <path\n          d=\"M 10,50 Q 30,30 50,50 T 90,50\"\n          stroke={theme.palette.text.secondary}\n          strokeWidth=\"2\"\n          fill=\"none\"\n          opacity=\"0.3\"\n        />\n        <path\n          d=\"M 50,10 L 50,90\"\n          stroke={theme.palette.text.secondary}\n          strokeWidth=\"1.5\"\n          fill=\"none\"\n          opacity=\"0.3\"\n        />\n        <path\n          d=\"M 20,30 L 80,70\"\n          stroke={theme.palette.text.secondary}\n          strokeWidth=\"1\"\n          fill=\"none\"\n          opacity=\"0.2\"\n        />\n      </svg>\n    </Box>\n  );\n};\n\nconst DecorativePin: FC<{ top: string; left: string }> = ({ top, left }) => {\n  const theme = useTheme();\n\n  return (\n    <Box sx={{ position: 'absolute', top, left, opacity: 0.6 }}>\n      <PlaceIcon sx={{ fontSize: rem(theme, 20), color: theme.palette.primary.main }} />\n    </Box>\n  );\n};\n\nexport const MapDecorativePins: FC = () => (\n  <>\n    <DecorativePin top=\"30%\" left=\"25%\" />\n    <DecorativePin top=\"65%\" left=\"70%\" />\n  </>\n);\n\nexport const MapCentreMarker: FC = () => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      data-testid=\"map-marker\"\n      sx={{\n        position: 'absolute',\n        top: '50%',\n        left: '50%',\n        transform: 'translate(-50%, -100%)',\n        zIndex: 2,\n        filter: `drop-shadow(${rems(theme, 0, 2, 4)} ${shadowInk(theme, 0.3)})`,\n      }}\n    >\n      <LocationIcon\n        sx={{\n          fontSize: rem(theme, 36),\n          color: theme.palette.error.main,\n          animation: 'bounce 2s infinite',\n          '@keyframes bounce': bounceKeyframes(theme),\n        }}\n      />\n    </Box>\n  );\n};\n\nexport const MapScaleBar: FC<{ zoom: number }> = ({ zoom }) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      sx={{\n        position: 'absolute',\n        bottom: theme.spacing(2),\n        right: theme.spacing(2),\n        display: 'flex',\n        alignItems: 'center',\n        gap: 0.5,\n        padding: theme.spacing(0.5, 1),\n        background: alpha(theme.palette.background.paper, 0.9),\n        borderRadius: theme.shape.borderRadius,\n        fontSize: rem(theme, 12),\n        color: theme.palette.text.secondary,\n      }}\n    >\n      <Box\n        sx={{\n          width: rem(theme, 40),\n          height: rem(theme, 2),\n          background: theme.palette.text.secondary,\n          position: 'relative',\n          // The end caps that make the bar read as a measurement.\n          '&::before, &::after': {\n            content: '\"\"',\n            position: 'absolute',\n            width: rem(theme, 2),\n            height: rem(theme, 6),\n            background: theme.palette.text.secondary,\n          },\n          '&::before': { left: 0, top: rem(theme, -2) },\n          '&::after': { right: 0, top: rem(theme, -2) },\n        }}\n      />\n      <Typography variant=\"caption\">{getScaleDistance(zoom)}</Typography>\n    </Box>\n  );\n};\n\nexport const MapCompass: FC = () => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      sx={{\n        position: 'absolute',\n        top: theme.spacing(2),\n        left: theme.spacing(2),\n        width: rem(theme, 40),\n        height: rem(theme, 40),\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        background: alpha(theme.palette.background.paper, 0.9),\n        borderRadius: '50%',\n        boxShadow: theme.shadows[2],\n      }}\n    >\n      <NavigationIcon\n        sx={{ fontSize: rem(theme, 24), color: theme.palette.primary.main, transform: 'rotate(-45deg)' }}\n      />\n    </Box>\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-4CTLEUK3.js

@@ -0,0 +1,187 @@
+import {
+  MoreGroup,
+  fieldClearing
+} from "./chunk-7EIOXZWL.js";
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  Button
+} from "./chunk-KH25WUSX.js";
+import {
+  Text
+} from "./chunk-WTOYEWW6.js";
+import {
+  rem,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/DataViews/data-views-more-filters.tsx
+import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
+import FilterAltRoundedIcon from "@mui/icons-material/FilterAltRounded";
+import Popover from "@mui/material/Popover/index.js";
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function MoreTrigger({
+  count,
+  appliedCount,
+  compact,
+  onOpen,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  const applied = appliedCount > 0;
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "outline",
+      size: "sm",
+      color: "neutral",
+      onClick: (event) => onOpen(event.currentTarget),
+      dataTestId: `${testIdPrefix}-more-filters`,
+      "aria-label": applied ? copy.filters.moreFiltersApplied(count, appliedCount) : copy.filters.moreFilters(count),
+      children: /* @__PURE__ */ jsxs(
+        default2,
+        {
+          component: "span",
+          sx: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 0.5,
+            color: applied ? "primary.main" : void 0
+          },
+          children: [
+            /* @__PURE__ */ jsx(FilterAltRoundedIcon, { fontSize: "small" }),
+            !compact && /* @__PURE__ */ jsx(default2, { component: "span", sx: { display: { xs: "none", sm: "inline" } }, children: copy.filters.moreTriggerLabel }),
+            /* @__PURE__ */ jsx(
+              default2,
+              {
+                component: "span",
+                "data-testid": `${testIdPrefix}-more-badge`,
+                sx: {
+                  px: 0.75,
+                  borderRadius: 5,
+                  bgcolor: applied ? "primary.main" : "action.selected",
+                  color: applied ? "primary.contrastText" : void 0,
+                  fontSize: sxRem(11),
+                  fontWeight: applied ? 700 : void 0
+                },
+                children: applied ? appliedCount : count
+              }
+            ),
+            !compact && /* @__PURE__ */ jsx(KeyboardArrowDownRoundedIcon, { fontSize: "small" })
+          ]
+        }
+      )
+    }
+  );
+}
+function MoreHeading() {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsxs(
+    default2,
+    {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        gap: 1,
+        px: 1.5,
+        py: 1,
+        borderBottom: 1,
+        borderColor: "divider"
+      },
+      children: [
+        /* @__PURE__ */ jsx(Text, { variant: "caption", as: "span", children: /* @__PURE__ */ jsx(default2, { component: "span", sx: { textTransform: "uppercase", letterSpacing: sxRem(0.5), color: "text.disabled" }, children: copy.filters.moreHeading }) }),
+        /* @__PURE__ */ jsx(Text, { variant: "caption", as: "span", children: /* @__PURE__ */ jsx(default2, { component: "span", sx: { ml: "auto", color: "text.disabled" }, children: copy.filters.overflowNote }) })
+      ]
+    }
+  );
+}
+function MoreFooter({
+  onClearAll,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsx(default2, { sx: { px: 1.5, py: 1, borderTop: 1, borderColor: "divider" }, children: /* @__PURE__ */ jsx(
+    default2,
+    {
+      component: "button",
+      type: "button",
+      onClick: onClearAll,
+      "data-testid": `${testIdPrefix}-more-clear-all`,
+      sx: {
+        width: "100%",
+        border: 0,
+        p: 0,
+        bgcolor: "transparent",
+        cursor: "pointer",
+        font: "inherit",
+        fontSize: sxRem(13),
+        textAlign: "left",
+        color: "primary.main",
+        "&:hover": { textDecoration: "underline" }
+      },
+      children: copy.filters.clearAll
+    }
+  ) });
+}
+function MoreFilters({
+  fields,
+  onOpenChange,
+  onClearAll,
+  anyApplied,
+  compact = false,
+  ...rest
+}) {
+  const [anchor, setAnchor] = useState(null);
+  if (fields.length === 0) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      MoreTrigger,
+      {
+        count: fields.length,
+        appliedCount: fields.filter(
+          (field) => fieldClearing({
+            field,
+            pills: rest.pills,
+            ranges: rest.ranges,
+            onTogglePill: rest.onTogglePill,
+            onChangeRange: rest.onChangeRange
+          }).applied
+        ).length,
+        compact,
+        onOpen: (element) => {
+          setAnchor(element);
+          onOpenChange?.(true);
+        },
+        testIdPrefix: rest.testIdPrefix
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        open: Boolean(anchor),
+        anchorEl: anchor,
+        onClose: () => {
+          setAnchor(null);
+          onOpenChange?.(false);
+        },
+        anchorOrigin: { vertical: "bottom", horizontal: "left" },
+        slotProps: { paper: { sx: { width: sxRem(300), maxWidth: (theme) => `calc(100vw - ${rem(theme, 32)})` } } },
+        children: /* @__PURE__ */ jsxs(default2, { "data-testid": `${rest.testIdPrefix}-more-panel`, children: [
+          /* @__PURE__ */ jsx(MoreHeading, {}),
+          /* @__PURE__ */ jsx(default2, { sx: { maxHeight: sxRem(320), overflowY: "auto", overflowX: "hidden", p: 1.5, minWidth: 0 }, children: fields.map((field) => /* @__PURE__ */ jsx(MoreGroup, { field, ...rest }, field.id)) }),
+          anyApplied && /* @__PURE__ */ jsx(MoreFooter, { onClearAll, testIdPrefix: rest.testIdPrefix })
+        ] })
+      }
+    )
+  ] });
+}
+
+export {
+  MoreFilters
+};
+//# sourceMappingURL=chunk-4CTLEUK3.js.map

package/dist/chunk-4CTLEUK3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-more-filters.tsx"],"sourcesContent":["\"use client\";\n\nimport KeyboardArrowDownRoundedIcon from \"@mui/icons-material/KeyboardArrowDownRounded\";\n// A FUNNEL, not the tune sliders this used to share with \"Exibir\". The two\n// sit a few px apart on the same bar and do unrelated things — one narrows\n// WHICH rows you see, the other changes HOW they are shown — and with one\n// glyph between them the bar offered the operator no way to tell which was\n// which. On a phone, where both are icon-only, they were indistinguishable.\nimport FilterAltRoundedIcon from \"@mui/icons-material/FilterAltRounded\";\nimport Popover from \"@mui/material/Popover/index.js\";\nimport type { Theme } from \"@mui/material/styles/index.js\";\nimport { useState } from \"react\";\n\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\nimport { Button } from \"../../form/Button\";\nimport { Box } from \"../../../mui/Box\";\nimport { Text } from \"../../typography/Text\";\n\nimport { fieldClearing, MoreGroup, type MoreFieldProps } from \"./data-views-more-fields\";\nimport type { OverflowField } from \"./data-views-overflow\";\nimport { rem, sxRem } from \"../../../tokens/relative\";\n\n/**\n * \"MAIS\" — the filter overflow: its trigger, its panel and its footer. What\n * goes INSIDE it is `data-views-more-fields`.\n *\n * It holds the fields that had no room on the toolbar. An applied filter is\n * ranked ahead of an idle one for the visible slots but is NOT exempt (see\n * `useFilterOverflow`), so an applied filter can be in here — on a phone, most\n * of them are. That is why the trigger changes tone and counts the applied\n * ones: a filter you cannot see is a filter you forget you set, and the badge\n * is what stops that.\n */\n\ninterface MoreFiltersProps<T extends Record<string, unknown>> extends MoreFieldProps {\n  fields: OverflowField<T>[];\n}\n\n/**\n * The trigger, badged with how many fields had no room on the bar — and told\n * apart when some of them are APPLIED.\n *\n * An applied filter can land in here now (it is ranked first, not exempt), so\n * this button is the only thing on screen still saying it exists. A neutral\n * badge reading \"3\" would make \"three filters you have not used\" and \"three\n * filters narrowing this list\" look identical, which is the whole failure the\n * old exemption was written to avoid. So an overflow holding applied filters\n * takes the applied tone and counts them in its own badge.\n */\nfunction MoreTrigger({\n  count,\n  appliedCount,\n  compact,\n  onOpen,\n  testIdPrefix,\n}: {\n  count: number;\n  appliedCount: number;\n  /** Icon only — the same rung that strips Exibir/Exportar. */\n  compact: boolean;\n  onOpen: (anchor: HTMLElement) => void;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  const applied = appliedCount > 0;\n  return (\n    <Button\n      variant=\"outline\"\n      size=\"sm\"\n      color=\"neutral\"\n      onClick={(event) => onOpen(event.currentTarget as HTMLElement)}\n      dataTestId={`${testIdPrefix}-more-filters`}\n      aria-label={\n        applied\n          ? copy.filters.moreFiltersApplied(count, appliedCount)\n          : copy.filters.moreFilters(count)\n      }\n    >\n      <Box\n        component=\"span\"\n        sx={{\n          display: \"inline-flex\",\n          alignItems: \"center\",\n          gap: 0.5,\n          color: applied ? \"primary.main\" : undefined,\n        }}\n      >\n        <FilterAltRoundedIcon fontSize=\"small\" />\n        {!compact && (\n          <Box component=\"span\" sx={{ display: { xs: \"none\", sm: \"inline\" } }}>\n            {copy.filters.moreTriggerLabel}\n          </Box>\n        )}\n        <Box\n          component=\"span\"\n          data-testid={`${testIdPrefix}-more-badge`}\n          sx={{\n            px: 0.75,\n            borderRadius: 5,\n            bgcolor: applied ? \"primary.main\" : \"action.selected\",\n            color: applied ? \"primary.contrastText\" : undefined,\n            fontSize: sxRem(11),\n            fontWeight: applied ? 700 : undefined,\n          }}\n        >\n          {applied ? appliedCount : count}\n        </Box>\n        {!compact && <KeyboardArrowDownRoundedIcon fontSize=\"small\" />}\n      </Box>\n    </Button>\n  );\n}\n\n/** The panel's heading: what these are, and why they are in here. */\nfunction MoreHeading(): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  return (\n    <Box\n      sx={{\n        display: \"flex\",\n        alignItems: \"center\",\n        gap: 1,\n        px: 1.5,\n        py: 1,\n        borderBottom: 1,\n        borderColor: \"divider\",\n      }}\n    >\n      <Text variant=\"caption\" as=\"span\">\n        <Box component=\"span\" sx={{ textTransform: \"uppercase\", letterSpacing: sxRem(0.5), color: \"text.disabled\" }}>\n          {copy.filters.moreHeading}\n        </Box>\n      </Text>\n      <Text variant=\"caption\" as=\"span\">\n        <Box component=\"span\" sx={{ ml: \"auto\", color: \"text.disabled\" }}>\n          {copy.filters.overflowNote}\n        </Box>\n      </Text>\n    </Box>\n  );\n}\n\n/**\n * The panel's own way back to the unfiltered list.\n *\n * The bar's \"Limpar\" is the primary one, but it is a control like any other\n * and the ladder can take its label — and on the narrowest rungs this panel is\n * where most of the fields ended up anyway. Clearing everything from inside it\n * saves closing it to reach a button three pixels wide.\n */\nfunction MoreFooter({\n  onClearAll,\n  testIdPrefix,\n}: {\n  onClearAll: () => void;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  return (\n    <Box sx={{ px: 1.5, py: 1, borderTop: 1, borderColor: \"divider\" }}>\n      <Box\n        component=\"button\"\n        type=\"button\"\n        onClick={onClearAll}\n        data-testid={`${testIdPrefix}-more-clear-all`}\n        sx={{\n          width: \"100%\",\n          border: 0,\n          p: 0,\n          bgcolor: \"transparent\",\n          cursor: \"pointer\",\n          font: \"inherit\",\n          fontSize: sxRem(13),\n          textAlign: \"left\",\n          color: \"primary.main\",\n          \"&:hover\": { textDecoration: \"underline\" },\n        }}\n      >\n        {copy.filters.clearAll}\n      </Box>\n    </Box>\n  );\n}\n\n/** The overflow trigger + panel. Renders nothing when everything fits. */\nexport function MoreFilters<T extends Record<string, unknown>>({\n  fields,\n  onOpenChange,\n  onClearAll,\n  anyApplied,\n  compact = false,\n  ...rest\n}: MoreFiltersProps<T> & {\n  /** Icon only — the same rung that strips Exibir/Exportar. */\n  compact?: boolean;\n  /** Clears every filter, not just the ones in here. */\n  onClearAll: () => void;\n  /** Whether anything is applied anywhere — the footer is pointless otherwise. */\n  anyApplied: boolean;\n  /**\n   * So the shell can FREEZE the measured split while this panel is open.\n   *\n   * Applying a filter in here makes its field active, and an active field\n   * takes an inline slot first — so the field being edited was promoted OUT of\n   * this panel mid-keystroke, taking the focused input with it. Typing \"12\"\n   * got as far as \"1\" and then had nowhere to go.\n   */\n  onOpenChange?: (open: boolean) => void;\n}): React.JSX.Element | null {\n  const [anchor, setAnchor] = useState<HTMLElement | null>(null);\n  if (fields.length === 0) return null;\n  return (\n    <>\n      <MoreTrigger\n        count={fields.length}\n        appliedCount={\n          fields.filter(\n            (field) =>\n              fieldClearing({\n                field,\n                pills: rest.pills,\n                ranges: rest.ranges,\n                onTogglePill: rest.onTogglePill,\n                onChangeRange: rest.onChangeRange,\n              }).applied,\n          ).length\n        }\n        compact={compact}\n        onOpen={(element) => {\n          setAnchor(element);\n          onOpenChange?.(true);\n        }}\n        testIdPrefix={rest.testIdPrefix}\n      />\n      <Popover\n        open={Boolean(anchor)}\n        anchorEl={anchor}\n        onClose={() => {\n          setAnchor(null);\n          onOpenChange?.(false);\n        }}\n        anchorOrigin={{ vertical: \"bottom\", horizontal: \"left\" }}\n        slotProps={{ paper: { sx: { width: sxRem(300), maxWidth: (theme: Theme) => `calc(100vw - ${rem(theme, 32)})` } } }}\n      >\n        <Box data-testid={`${rest.testIdPrefix}-more-panel`}>\n          <MoreHeading />\n          {/* overflowX hidden, not auto: this panel is a fixed 300px and its\n              contents are told to shrink into it. A horizontal scrollbar here\n              means something refused to, which is a bug to fix rather than a\n              scrollbar to live with. */}\n          <Box sx={{ maxHeight: sxRem(320), overflowY: \"auto\", overflowX: \"hidden\", p: 1.5, minWidth: 0 }}>\n            {fields.map((field) => (\n              <MoreGroup key={field.id} field={field} {...rest} />\n            ))}\n          </Box>\n          {anyApplied && (\n            <MoreFooter onClearAll={onClearAll} testIdPrefix={rest.testIdPrefix} />\n          )}\n        </Box>\n      </Popover>\n    </>\n  );\n}\n"],"mappings":"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","names":["default"]}