@12-apps/ui 6.11.0 → 6.12.0

package/dist/chunk-SXYIXCUB.js

@@ -0,0 +1,129 @@
+// src/components/data-display/HoverCard/HoverCard.hooks.ts
+import React from "react";
+var useHoverHandlers = ({
+  isTouchDevice,
+  touchEnabled,
+  enterDelay,
+  openCard,
+  closeCard,
+  exitTimeoutRef
+}) => {
+  const [touchTimeout, setTouchTimeout] = React.useState();
+  const hoverIgnored = isTouchDevice && !touchEnabled;
+  const cancelTouch = React.useCallback(() => {
+    if (touchTimeout) {
+      window.clearTimeout(touchTimeout);
+      setTouchTimeout(void 0);
+    }
+  }, [touchTimeout]);
+  React.useEffect(
+    () => () => {
+      if (touchTimeout) window.clearTimeout(touchTimeout);
+    },
+    [touchTimeout]
+  );
+  const triggerHandlers = {
+    onMouseEnter: (event) => {
+      if (hoverIgnored) return;
+      openCard(event);
+    },
+    onMouseLeave: () => {
+      if (hoverIgnored) return;
+      closeCard();
+    },
+    onTouchStart: (event) => {
+      if (!touchEnabled) return;
+      if (touchTimeout) window.clearTimeout(touchTimeout);
+      setTouchTimeout(window.setTimeout(() => openCard(event), enterDelay));
+    },
+    // End and cancel do the same thing: the press did not become a long press.
+    onTouchEnd: cancelTouch,
+    onTouchCancel: cancelTouch
+  };
+  const cardHandlers = {
+    onMouseEnter: () => {
+      if (exitTimeoutRef.current) window.clearTimeout(exitTimeoutRef.current);
+    },
+    onMouseLeave: closeCard
+  };
+  return { triggerHandlers, cardHandlers };
+};
+var useEscapeKey = (active, onEscape) => {
+  React.useEffect(() => {
+    if (!active) return;
+    const handleEscape = (event) => {
+      if (event.key === "Escape") onEscape();
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [active, onEscape]);
+};
+var useHoverCard = ({
+  disabled,
+  touchEnabled,
+  enterDelay,
+  exitDelay,
+  onOpen,
+  onClose
+}) => {
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [isTouchDevice, setIsTouchDevice] = React.useState(false);
+  const enterTimeoutRef = React.useRef(void 0);
+  const exitTimeoutRef = React.useRef(void 0);
+  React.useEffect(() => {
+    setIsTouchDevice("ontouchstart" in window);
+  }, []);
+  const openCard = React.useCallback(
+    (event) => {
+      if (disabled) return;
+      if (exitTimeoutRef.current) {
+        window.clearTimeout(exitTimeoutRef.current);
+      }
+      const target = event.currentTarget;
+      enterTimeoutRef.current = window.setTimeout(() => {
+        setAnchorEl(target);
+        setIsOpen(true);
+        onOpen?.();
+      }, enterDelay);
+    },
+    [disabled, enterDelay, onOpen]
+  );
+  const closeCard = React.useCallback(() => {
+    if (enterTimeoutRef.current) {
+      window.clearTimeout(enterTimeoutRef.current);
+    }
+    exitTimeoutRef.current = window.setTimeout(() => {
+      setIsOpen(false);
+      setAnchorEl(null);
+      onClose?.();
+    }, exitDelay);
+  }, [exitDelay, onClose]);
+  const handleClose = React.useCallback(() => {
+    setIsOpen(false);
+    setAnchorEl(null);
+    onClose?.();
+  }, [onClose]);
+  const { triggerHandlers, cardHandlers } = useHoverHandlers({
+    isTouchDevice,
+    touchEnabled,
+    enterDelay,
+    openCard,
+    closeCard,
+    exitTimeoutRef
+  });
+  useEscapeKey(isOpen, handleClose);
+  React.useEffect(
+    () => () => {
+      if (enterTimeoutRef.current) window.clearTimeout(enterTimeoutRef.current);
+      if (exitTimeoutRef.current) window.clearTimeout(exitTimeoutRef.current);
+    },
+    []
+  );
+  return { anchorEl, isOpen, handleClose, triggerHandlers, cardHandlers };
+};
+
+export {
+  useHoverCard
+};
+//# sourceMappingURL=chunk-SXYIXCUB.js.map

package/dist/chunk-SXYIXCUB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/HoverCard/HoverCard.hooks.ts"],"sourcesContent":["import React from 'react';\n\ninterface HandlerInput {\n  isTouchDevice: boolean;\n  touchEnabled: boolean;\n  enterDelay: number;\n  openCard: (event: React.MouseEvent<HTMLElement> | React.TouchEvent<HTMLElement>) => void;\n  closeCard: () => void;\n  exitTimeoutRef: React.MutableRefObject<number | undefined>;\n}\n\n/**\n * The pointer and touch handlers, over the open/close pair. Touch gets a\n * long-press because there is no hover to respond to; the card's own handlers\n * keep it open while the pointer is travelling onto it.\n */\nconst useHoverHandlers = ({\n  isTouchDevice,\n  touchEnabled,\n  enterDelay,\n  openCard,\n  closeCard,\n  exitTimeoutRef,\n}: HandlerInput) => {\n  const [touchTimeout, setTouchTimeout] = React.useState<number>();\n\n  /** A touch device with touch disabled has no hover to respond to. */\n  const hoverIgnored = isTouchDevice && !touchEnabled;\n\n  const cancelTouch = React.useCallback(() => {\n    if (touchTimeout) {\n      window.clearTimeout(touchTimeout);\n      setTouchTimeout(undefined);\n    }\n  }, [touchTimeout]);\n\n  React.useEffect(\n    () => () => {\n      if (touchTimeout) window.clearTimeout(touchTimeout);\n    },\n    [touchTimeout],\n  );\n\n  const triggerHandlers = {\n    onMouseEnter: (event: React.MouseEvent<HTMLElement>) => {\n      if (hoverIgnored) return;\n      openCard(event);\n    },\n    onMouseLeave: () => {\n      if (hoverIgnored) return;\n      closeCard();\n    },\n    onTouchStart: (event: React.TouchEvent<HTMLElement>) => {\n      if (!touchEnabled) return;\n      if (touchTimeout) window.clearTimeout(touchTimeout);\n      setTouchTimeout(window.setTimeout(() => openCard(event), enterDelay));\n    },\n    // End and cancel do the same thing: the press did not become a long press.\n    onTouchEnd: cancelTouch,\n    onTouchCancel: cancelTouch,\n  };\n\n  /** Moving onto the card keeps it open; leaving it starts the exit delay. */\n  const cardHandlers = {\n    onMouseEnter: () => {\n      if (exitTimeoutRef.current) window.clearTimeout(exitTimeoutRef.current);\n    },\n    onMouseLeave: closeCard,\n  };\n\n  return { triggerHandlers, cardHandlers };\n};\n\n/** Escape dismisses the card while it is open. */\nconst useEscapeKey = (active: boolean, onEscape: () => void) => {\n  React.useEffect(() => {\n    if (!active) return;\n\n    const handleEscape = (event: globalThis.KeyboardEvent) => {\n      if (event.key === 'Escape') onEscape();\n    };\n\n    document.addEventListener('keydown', handleEscape);\n    return () => document.removeEventListener('keydown', handleEscape);\n  }, [active, onEscape]);\n};\n\ninterface HoverCardTimingInput {\n  disabled: boolean;\n  touchEnabled: boolean;\n  enterDelay: number;\n  exitDelay: number;\n  onOpen?: () => void;\n  onClose?: () => void;\n}\n\n/**\n * When the card is open, and the delays that decide it.\n *\n * Three timers are in play: the enter delay before opening, the exit delay\n * before closing (so the pointer can travel from the trigger onto the card\n * without dismissing it), and the long-press timer on touch. Each cancels the\n * others' pending work, which is why they live together.\n */\nexport const useHoverCard = ({\n  disabled,\n  touchEnabled,\n  enterDelay,\n  exitDelay,\n  onOpen,\n  onClose,\n}: HoverCardTimingInput) => {\n  const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null);\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [isTouchDevice, setIsTouchDevice] = React.useState(false);\n  const enterTimeoutRef = React.useRef<number | undefined>(undefined);\n  const exitTimeoutRef = React.useRef<number | undefined>(undefined);\n\n  // Probed in an effect, not during render, so SSR and hydration stay intact.\n  React.useEffect(() => {\n    setIsTouchDevice('ontouchstart' in window);\n  }, []);\n\n  const openCard = React.useCallback(\n    (event: React.MouseEvent<HTMLElement> | React.TouchEvent<HTMLElement>) => {\n      if (disabled) return;\n\n      if (exitTimeoutRef.current) {\n        window.clearTimeout(exitTimeoutRef.current);\n      }\n\n      const target = event.currentTarget;\n      enterTimeoutRef.current = window.setTimeout(() => {\n        setAnchorEl(target);\n        setIsOpen(true);\n        onOpen?.();\n      }, enterDelay);\n    },\n    [disabled, enterDelay, onOpen],\n  );\n\n  const closeCard = React.useCallback(() => {\n    if (enterTimeoutRef.current) {\n      window.clearTimeout(enterTimeoutRef.current);\n    }\n\n    exitTimeoutRef.current = window.setTimeout(() => {\n      setIsOpen(false);\n      setAnchorEl(null);\n      onClose?.();\n    }, exitDelay);\n  }, [exitDelay, onClose]);\n\n  const handleClose = React.useCallback(() => {\n    setIsOpen(false);\n    setAnchorEl(null);\n    onClose?.();\n  }, [onClose]);\n\n  const { triggerHandlers, cardHandlers } = useHoverHandlers({\n    isTouchDevice,\n    touchEnabled,\n    enterDelay,\n    openCard,\n    closeCard,\n    exitTimeoutRef,\n  });\n\n  useEscapeKey(isOpen, handleClose);\n\n  React.useEffect(\n    () => () => {\n      if (enterTimeoutRef.current) window.clearTimeout(enterTimeoutRef.current);\n      if (exitTimeoutRef.current) window.clearTimeout(exitTimeoutRef.current);\n    },\n    [],\n  );\n\n  return { anchorEl, isOpen, handleClose, triggerHandlers, cardHandlers };\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-SYNMQWT4.js

@@ -0,0 +1,135 @@
+import {
+  useDateTimeParts
+} from "./chunk-ULJ4C6JW.js";
+
+// src/components/data-display/DateTimeDisplay/DateTimeDisplay.tsx
+import Box from "@mui/material/Box/index.js";
+import Tooltip from "@mui/material/Tooltip/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function getFontSizes(size) {
+  switch (size) {
+    case "xs":
+    case "sm":
+      return { date: "0.75rem", time: "0.65rem" };
+    case "lg":
+    case "xl":
+      return { date: "1rem", time: "0.875rem" };
+    case "md":
+    default:
+      return { date: "0.875rem", time: "0.75rem" };
+  }
+}
+var Stacked = forwardRef(
+  ({ formattedDate, formattedTime, fontSizes, showTooltip, sx, dataTestId }, ref) => /* @__PURE__ */ jsxs(
+    Box,
+    {
+      component: "span",
+      ref,
+      "data-testid": dataTestId,
+      sx: {
+        display: "inline-flex",
+        flexDirection: "column",
+        lineHeight: 1.3,
+        cursor: showTooltip ? "help" : "default",
+        ...sx
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            component: "span",
+            sx: {
+              fontWeight: 500,
+              fontSize: fontSizes.date
+            },
+            "data-testid": dataTestId ? `${dataTestId}-date` : void 0,
+            children: formattedDate
+          }
+        ),
+        formattedTime && /* @__PURE__ */ jsx(
+          Typography,
+          {
+            component: "span",
+            sx: {
+              fontSize: fontSizes.time,
+              color: "text.secondary"
+            },
+            "data-testid": dataTestId ? `${dataTestId}-time` : void 0,
+            children: formattedTime
+          }
+        )
+      ]
+    }
+  )
+);
+Stacked.displayName = "DateTimeDisplayStacked";
+var DateTimeDisplay = forwardRef(
+  ({
+    date,
+    dateFormat = "short",
+    timeFormat = "12h",
+    showTimezone = false,
+    size = "md",
+    showTooltip = true,
+    tooltipContent,
+    sx,
+    dataTestId
+  }, ref) => {
+    const { dateObj, formattedDate, formattedTime, fullDateTime } = useDateTimeParts({
+      date,
+      dateFormat,
+      timeFormat,
+      showTimezone
+    });
+    const fontSizes = getFontSizes(size);
+    if (!dateObj) {
+      return /* @__PURE__ */ jsx(
+        Box,
+        {
+          component: "span",
+          ref,
+          "data-testid": dataTestId,
+          sx: { color: "text.disabled", ...sx },
+          children: /* @__PURE__ */ jsx(Typography, { variant: "caption", children: "-" })
+        }
+      );
+    }
+    const content = /* @__PURE__ */ jsx(
+      Stacked,
+      {
+        ref,
+        formattedDate,
+        formattedTime,
+        fontSizes,
+        showTooltip,
+        sx,
+        dataTestId
+      }
+    );
+    if (!showTooltip) {
+      return content;
+    }
+    return /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        title: tooltipContent || fullDateTime,
+        arrow: true,
+        placement: "top",
+        slotProps: {
+          tooltip: {
+            sx: { px: 2, py: 1 }
+          }
+        },
+        children: content
+      }
+    );
+  }
+);
+DateTimeDisplay.displayName = "DateTimeDisplay";
+
+export {
+  DateTimeDisplay
+};
+//# sourceMappingURL=chunk-SYNMQWT4.js.map

package/dist/chunk-SYNMQWT4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DateTimeDisplay/DateTimeDisplay.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport Tooltip from '@mui/material/Tooltip/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { forwardRef } from 'react';\n\nimport { useDateTimeParts } from './DateTimeDisplay.hooks';\nimport type { DateTimeDisplayProps } from './DateTimeDisplay.types';\nimport type { SizeValue } from '../../../tokens/scales';\n\n/**\n * Get font sizes based on size prop\n */\nfunction getFontSizes(size: SizeValue) {\n  switch (size) {\n    case 'xs':\n    case 'sm':\n      return { date: '0.75rem', time: '0.65rem' };\n    case 'lg':\n    case 'xl':\n      return { date: '1rem', time: '0.875rem' };\n    case 'md':\n    default:\n      return { date: '0.875rem', time: '0.75rem' };\n  }\n}\n\ninterface StackedProps {\n  formattedDate: string | null;\n  formattedTime: string | null;\n  fontSizes: ReturnType<typeof getFontSizes>;\n  showTooltip: boolean;\n  sx: DateTimeDisplayProps['sx'];\n  dataTestId?: string;\n}\n\nconst Stacked = forwardRef<HTMLSpanElement, StackedProps>(\n  ({ formattedDate, formattedTime, fontSizes, showTooltip, sx, dataTestId }, ref) => (\n    <Box\n      component=\"span\"\n      ref={ref}\n      data-testid={dataTestId}\n      sx={{\n        display: 'inline-flex',\n        flexDirection: 'column',\n        lineHeight: 1.3,\n        cursor: showTooltip ? 'help' : 'default',\n        ...sx,\n      }}\n    >\n      <Typography\n        component=\"span\"\n        sx={{\n          fontWeight: 500,\n          fontSize: fontSizes.date,\n        }}\n        data-testid={dataTestId ? `${dataTestId}-date` : undefined}\n      >\n        {formattedDate}\n      </Typography>\n      {formattedTime && (\n        <Typography\n          component=\"span\"\n          sx={{\n            fontSize: fontSizes.time,\n            color: 'text.secondary',\n          }}\n          data-testid={dataTestId ? `${dataTestId}-time` : undefined}\n        >\n          {formattedTime}\n        </Typography>\n      )}\n    </Box>\n  ),\n);\n\nStacked.displayName = 'DateTimeDisplayStacked';\n\n/**\n * DateTimeDisplay component - displays date and time in a stacked format\n * with date on one line and time on another.\n */\nexport const DateTimeDisplay = forwardRef<HTMLSpanElement, DateTimeDisplayProps>(\n  (\n    {\n      date,\n      dateFormat = 'short',\n      timeFormat = '12h',\n      showTimezone = false,\n      size = 'md',\n      showTooltip = true,\n      tooltipContent,\n      sx,\n      dataTestId,\n    },\n    ref,\n  ) => {\n    const { dateObj, formattedDate, formattedTime, fullDateTime } = useDateTimeParts({\n      date,\n      dateFormat,\n      timeFormat,\n      showTimezone,\n    });\n    const fontSizes = getFontSizes(size);\n\n    // Handle invalid or missing date\n    if (!dateObj) {\n      return (\n        <Box\n          component=\"span\"\n          ref={ref}\n          data-testid={dataTestId}\n          sx={{ color: 'text.disabled', ...sx }}\n        >\n          <Typography variant=\"caption\">-</Typography>\n        </Box>\n      );\n    }\n\n    const content = (\n      <Stacked\n        ref={ref}\n        formattedDate={formattedDate}\n        formattedTime={formattedTime}\n        fontSizes={fontSizes}\n        showTooltip={showTooltip}\n        sx={sx}\n        dataTestId={dataTestId}\n      />\n    );\n\n    if (!showTooltip) {\n      return content;\n    }\n\n    return (\n      <Tooltip\n        title={tooltipContent || fullDateTime}\n        arrow\n        placement=\"top\"\n        slotProps={{\n          tooltip: {\n            sx: { px: 2, py: 1 },\n          },\n        }}\n      >\n        {content}\n      </Tooltip>\n    );\n  },\n);\n\nDateTimeDisplay.displayName = 'DateTimeDisplay';\n"],"mappings":";;;;;AAAA,OAAO,SAAS;AAChB,OAAO,aAAa;AACpB,OAAO,gBAAgB;AACvB,SAAS,kBAAkB;AAkCvB,SAYE,KAZF;AAzBJ,SAAS,aAAa,MAAiB;AACrC,UAAQ,MAAM;AAAA,IACZ,KAAK;AAAA,IACL,KAAK;AACH,aAAO,EAAE,MAAM,WAAW,MAAM,UAAU;AAAA,IAC5C,KAAK;AAAA,IACL,KAAK;AACH,aAAO,EAAE,MAAM,QAAQ,MAAM,WAAW;AAAA,IAC1C,KAAK;AAAA,IACL;AACE,aAAO,EAAE,MAAM,YAAY,MAAM,UAAU;AAAA,EAC/C;AACF;AAWA,IAAM,UAAU;AAAA,EACd,CAAC,EAAE,eAAe,eAAe,WAAW,aAAa,IAAI,WAAW,GAAG,QACzE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV;AAAA,MACA,eAAa;AAAA,MACb,IAAI;AAAA,QACF,SAAS;AAAA,QACT,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,QAAQ,cAAc,SAAS;AAAA,QAC/B,GAAG;AAAA,MACL;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,IAAI;AAAA,cACF,YAAY;AAAA,cACZ,UAAU,UAAU;AAAA,YACtB;AAAA,YACA,eAAa,aAAa,GAAG,UAAU,UAAU;AAAA,YAEhD;AAAA;AAAA,QACH;AAAA,QACC,iBACC;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,IAAI;AAAA,cACF,UAAU,UAAU;AAAA,cACpB,OAAO;AAAA,YACT;AAAA,YACA,eAAa,aAAa,GAAG,UAAU,UAAU;AAAA,YAEhD;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,QAAQ,cAAc;AAMf,IAAM,kBAAkB;AAAA,EAC7B,CACE;AAAA,IACE;AAAA,IACA,aAAa;AAAA,IACb,aAAa;AAAA,IACb,eAAe;AAAA,IACf,OAAO;AAAA,IACP,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,EACF,GACA,QACG;AACH,UAAM,EAAE,SAAS,eAAe,eAAe,aAAa,IAAI,iBAAiB;AAAA,MAC/E;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AACD,UAAM,YAAY,aAAa,IAAI;AAGnC,QAAI,CAAC,SAAS;AACZ,aACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV;AAAA,UACA,eAAa;AAAA,UACb,IAAI,EAAE,OAAO,iBAAiB,GAAG,GAAG;AAAA,UAEpC,8BAAC,cAAW,SAAQ,WAAU,eAAC;AAAA;AAAA,MACjC;AAAA,IAEJ;AAEA,UAAM,UACJ;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAGF,QAAI,CAAC,aAAa;AAChB,aAAO;AAAA,IACT;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,kBAAkB;AAAA,QACzB,OAAK;AAAA,QACL,WAAU;AAAA,QACV,WAAW;AAAA,UACT,SAAS;AAAA,YACP,IAAI,EAAE,IAAI,GAAG,IAAI,EAAE;AAAA,UACrB;AAAA,QACF;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,gBAAgB,cAAc;","names":[]}

package/dist/chunk-T4JGNZAR.js

@@ -0,0 +1,132 @@
+import {
+  CellConfigProvider,
+  cellTracks
+} from "./chunk-6VP2L3DJ.js";
+import {
+  DENSITY_ROW_PADDING
+} from "./chunk-HVIB6WMD.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+
+// src/components/data-display/DataViews/list-card-rails.tsx
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+function metaRail(columns) {
+  return `minmax(max-content, ${Math.max(columns, 1)}fr)`;
+}
+function contentRails(metaColumns) {
+  return metaColumns > 0 ? { caption: "minmax(0, auto)", meta: metaRail(metaColumns) } : { caption: "minmax(0, 1fr)", meta: "auto" };
+}
+var DEFAULT_RAILS = {
+  disclose: "auto",
+  drag: "auto",
+  select: "auto",
+  leading: "auto",
+  // Two is the canonical row (a date and a method); a list carrying a different
+  // number says so with `metaColumns`, and a standalone card counts its own.
+  ...contentRails(2),
+  // `max-content` on the value, so the rail is as wide as the widest amount in
+  // the list and no wider — a fixed px guess is either clipping or dead space.
+  // NOT an `fr`: the value's whole promise is a fixed right edge, and a rail
+  // that grows with the spare width moves that edge on every list.
+  value: "max-content",
+  actions: "auto"
+};
+var ListRailsContext = createContext(null);
+function useListRails() {
+  return useContext(ListRailsContext);
+}
+function railsTemplate(rails) {
+  return [
+    rails.disclose,
+    rails.drag,
+    rails.select,
+    rails.leading,
+    rails.caption,
+    rails.meta,
+    rails.value,
+    rails.actions
+  ].filter((rail) => rail != null).join(" ");
+}
+var RAIL_GAP = 3;
+var RAIL_GAP_PX = RAIL_GAP * 8;
+function railsTemplateFor(gutters, metaColumns) {
+  return railsTemplate({
+    ...DEFAULT_RAILS,
+    // Standalone, the card can simply COUNT its pairs — no `metaColumns` to be
+    // told, and no guess.
+    ...contentRails(metaColumns),
+    ...gutters.disclose ? {} : { disclose: null },
+    ...gutters.drag ? {} : { drag: null },
+    ...gutters.select ? {} : { select: null }
+  });
+}
+var RAIL_COUNT = 8;
+var CELL_FIXED_RAILS = 4;
+function cellRailsTemplate(cells) {
+  return [
+    DEFAULT_RAILS.disclose,
+    DEFAULT_RAILS.drag,
+    DEFAULT_RAILS.select,
+    DEFAULT_RAILS.leading,
+    ...cells,
+    DEFAULT_RAILS.actions
+  ].join(" ");
+}
+function cellRailCount(cells) {
+  return CELL_FIXED_RAILS + cells + 1;
+}
+function ListCardGroup({
+  children,
+  density = "cozy",
+  cells,
+  metaColumns,
+  rails,
+  reserveGutters = true,
+  gap,
+  dataTestId
+}) {
+  const resolved = {
+    ...DEFAULT_RAILS,
+    ...metaColumns == null ? {} : contentRails(metaColumns),
+    ...rails
+  };
+  const configured = cells != null && cells.length > 0;
+  const template = configured ? cellRailsTemplate(cellTracks(cells)) : railsTemplate(resolved);
+  const railCount = configured ? cellRailCount(cells.length) : RAIL_COUNT;
+  return /* @__PURE__ */ jsx(ListRailsContext.Provider, { value: { density, reserveGutters, railCount }, children: /* @__PURE__ */ jsx(CellConfigProvider, { cells, children: /* @__PURE__ */ jsx(
+    default2,
+    {
+      "data-testid": dataTestId,
+      sx: {
+        // The query container for every row inside it — a row cannot be one
+        // itself and a subgrid at the same time (containment drops subgrid).
+        // Every row in a list is the same width anyway, so the group is the
+        // honest place to ask the question.
+        containerType: "inline-size",
+        display: "grid",
+        gridTemplateColumns: template,
+        alignItems: "center",
+        rowGap: gap ?? DENSITY_ROW_PADDING[density]
+      },
+      children
+    }
+  ) }) });
+}
+
+export {
+  metaRail,
+  contentRails,
+  DEFAULT_RAILS,
+  useListRails,
+  railsTemplate,
+  RAIL_GAP,
+  RAIL_GAP_PX,
+  railsTemplateFor,
+  RAIL_COUNT,
+  cellRailsTemplate,
+  cellRailCount,
+  ListCardGroup
+};
+//# sourceMappingURL=chunk-T4JGNZAR.js.map

package/dist/chunk-T4JGNZAR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/list-card-rails.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, useContext, type ReactNode } from \"react\";\n\nimport { Box } from \"../../../mui/Box\";\nimport { DENSITY_ROW_PADDING, type DataViewsDensity } from \"./data-views-layout-context\";\nimport { CellConfigProvider, cellTracks, type ListCardCellConfig } from \"./list-card-cells\";\n\n/**\n * THE LIST OWNS THE COLUMNS, NOT THE ROW.\n *\n * Every row laying itself out with flex produces a list where nothing lines up.\n * The caption takes `flex: 1` and shoves the rest right; the value sits after\n * the meta cluster with the same gap as any other pair, so `MÉTODO PIX\n * R$ 13,90` reads as one continuous run and the only unlabelled thing in the\n * row is the number that matters most; and because the status chip's width\n * varies with its text (`Pago` vs `Em aberto` vs `Cancelado`), the money jitters\n * left and right on every row down the page.\n *\n * So the rails are declared ONCE, here, and each card is `grid-template-columns:\n * subgrid` spanning them. One set of edges for the whole list, the value on its\n * own rail, the status in a slot wide enough for the longest label it will ever\n * hold. Adding a row cannot move the column.\n *\n * Subgrid needs the card to be a DIRECT child of this grid — no wrapper element\n * between them, which is why the group renders its children bare.\n */\n\n/** One rail. Fixed where alignment matters, flexible where it does not. */\nexport interface ListRails {\n  /**\n   * The disclosure chevron, ahead of everything.\n   *\n   * Reserved on the same terms as the gutters behind it: a list where only SOME\n   * rows carry an expandable body would otherwise indent those rows and no\n   * others, and a column of captions that starts at two different offsets reads\n   * as a rendering fault rather than as a row you can open.\n   */\n  disclose: string;\n  /** Reserved even when nothing drags: toggling drag mode must not shift the list. */\n  drag: string;\n  /** Reserved even when nothing is selectable, for the same reason. */\n  select: string;\n  leading: string;\n  /** Absorbs spare width, alongside `meta`. */\n  caption: string;\n  /** Also absorbs spare width, so the middle columns spread rather than bunch. */\n  meta: string;\n  /** The value's own rail, with a fixed right edge. */\n  value: string;\n  actions: string;\n}\n\n/**\n * The meta rail, sized to sit its pairs on even intervals WITH the caption.\n *\n * ONE SHARE OF THE SPARE WIDTH PER PAIR, not one for the cluster. A single `1fr`\n * handed the whole cluster as much room as the title and then split it between\n * the pairs, so the title sat on a full share while `DATA` and `MÉTODO` had half\n * a share each — which is why the gap after the title came out twice the gap\n * between the pairs. Even columns need even shares, so the rail grows with the\n * number of pairs it has to hold.\n *\n * `max-content` still floors it: the evenness is never paid for with a clipped\n * label on a row too narrow to afford it.\n */\nexport function metaRail(columns: number): string {\n  return `minmax(max-content, ${Math.max(columns, 1)}fr)`;\n}\n\n/**\n * The caption and meta rails, resolved TOGETHER — because exactly one of them\n * has to be the flexible track, and which one depends on whether the row has any\n * middle columns at all.\n *\n * A grid distributes its free space to `fr` tracks; with no `fr` present it\n * spreads it across every `auto` track instead — including the empty gutters,\n * the empty meta rail and the empty status rail. So a row with a title and a\n * value and nothing between them drifted its title into the middle of the row,\n * each empty rail having claimed an equal share of the slack.\n *\n * With pairs to place, `meta` is the flexible one and the caption sizes to its\n * title (the spare width belongs to the only rail with several things to space\n * out). With no pairs, there is nothing to distribute and the caption takes the\n * slack back, which is what it always did.\n */\nexport function contentRails(metaColumns: number): Pick<ListRails, \"caption\" | \"meta\"> {\n  return metaColumns > 0\n    ? { caption: \"minmax(0, auto)\", meta: metaRail(metaColumns) }\n    : { caption: \"minmax(0, 1fr)\", meta: \"auto\" };\n}\n\nexport const DEFAULT_RAILS: ListRails = {\n  disclose: \"auto\",\n  drag: \"auto\",\n  select: \"auto\",\n  leading: \"auto\",\n  // Two is the canonical row (a date and a method); a list carrying a different\n  // number says so with `metaColumns`, and a standalone card counts its own.\n  ...contentRails(2),\n  // `max-content` on the value, so the rail is as wide as the widest amount in\n  // the list and no wider — a fixed px guess is either clipping or dead space.\n  // NOT an `fr`: the value's whole promise is a fixed right edge, and a rail\n  // that grows with the spare width moves that edge on every list.\n  value: \"max-content\",\n  actions: \"auto\",\n};\n\nexport interface ListRailsValue {\n  density: DataViewsDensity;\n  /** Whether the gutters are held open even when empty. */\n  reserveGutters: boolean;\n  /**\n   * How many tracks a row spans.\n   *\n   * Fixed at {@link RAIL_COUNT} for the named-slot layout, but a cell-configured\n   * list has as many tracks as the config declares, and every row must span the\n   * same number or subgrid tears.\n   */\n  railCount: number;\n}\n\nconst ListRailsContext = createContext<ListRailsValue | null>(null);\n\n/** Is this card inside a group that owns the rails? */\nexport function useListRails(): ListRailsValue | null {\n  return useContext(ListRailsContext);\n}\n\n/**\n * The column template, as one `grid-template-columns` value.\n *\n * A rail set to `null` is DROPPED rather than sized to zero. The two are not the\n * same: a zero-width track still takes a `column-gap` beside it, so a gutter\n * nobody is using still pushes the row's contents inward. Only a standalone card\n * may drop one — inside a group the rails are subgrid over a shared template and\n * every row must span the same count.\n */\nexport function railsTemplate(rails: RailOverrides): string {\n  return [\n    rails.disclose,\n    rails.drag,\n    rails.select,\n    rails.leading,\n    rails.caption,\n    rails.meta,\n    rails.value,\n    rails.actions,\n  ]\n    .filter((rail): rail is string => rail != null)\n    .join(\" \");\n}\n\n/** A rail set, where `null` means \"this rail is not in the template at all\". */\ntype RailOverrides = { [K in keyof ListRails]: ListRails[K] | null };\n\n/** The gap between rails, in theme spacing units. */\nexport const RAIL_GAP = 3;\n\n/** …the same gap in pixels, for anything drawing INTO it. */\nexport const RAIL_GAP_PX = RAIL_GAP * 8;\n\n/**\n * AN EMPTY GUTTER COSTS ITS OWN WIDTH *AND* THE RAIL GAP BESIDE IT.\n *\n * A zero-width grid track still gets a `column-gap`, and no margin on the item\n * inside it can win that back — gaps sit between TRACKS, and a track's position\n * is settled before any item's margin is applied. (Tried it; the box simply\n * overhangs its own track and everything after it stays put.) So a row with\n * nothing to drag was paying 24px for a rail holding nothing, which was the\n * single biggest contributor to the left inset the checkbox appeared to have.\n *\n * The only way out is for the track NOT TO EXIST: the slot renders nothing and\n * the rail leaves the template, which is safe because grid auto-placement fills\n * the remaining tracks in DOM order. Standalone only — inside a\n * {@link ListCardGroup} the rails are subgrid across a shared template and the\n * count cannot vary per row, which is also where `reserveGutters` earns its\n * keep: a selectable list and a read-only one still line up, and turning drag\n * mode on does not shift every row sideways.\n */\nexport function railsTemplateFor(\n  gutters: { disclose: boolean; drag: boolean; select: boolean },\n  metaColumns: number,\n): string {\n  return railsTemplate({\n    ...DEFAULT_RAILS,\n    // Standalone, the card can simply COUNT its pairs — no `metaColumns` to be\n    // told, and no guess.\n    ...contentRails(metaColumns),\n    ...(gutters.disclose ? {} : { disclose: null }),\n    ...(gutters.drag ? {} : { drag: null }),\n    ...(gutters.select ? {} : { select: null }),\n  });\n}\n\n/** How many rails the named-slot layout has — the span such a card claims. */\nexport const RAIL_COUNT = 8;\n\n/**\n * The gutters and the trailing menu that bracket a CONFIGURED row.\n *\n * A cell-configured list still has a head and a tail the config does not\n * describe: the disclosure chevron, the drag grip and the checkbox in front, and\n * the overflow menu behind. The menu is not optional — it is where a row's\n * actions live, and a list that hid it would have nowhere to put them.\n */\nconst CELL_FIXED_RAILS = 4;\n\n/** Tracks for a cell-configured row: gutters, leading, the cells, then the menu. */\nexport function cellRailsTemplate(cells: readonly string[]): string {\n  return [\n    DEFAULT_RAILS.disclose,\n    DEFAULT_RAILS.drag,\n    DEFAULT_RAILS.select,\n    DEFAULT_RAILS.leading,\n    ...cells,\n    DEFAULT_RAILS.actions,\n  ].join(\" \");\n}\n\n/** How many tracks such a row spans — the fixed head/tail plus one per cell. */\nexport function cellRailCount(cells: number): number {\n  return CELL_FIXED_RAILS + cells + 1;\n}\n\n/**\n * A {@link ListCardGroup}'s configuration, as a value a caller can pass around.\n *\n * The same fields the group takes as props, named once so a table can accept\n * \"the list's columns\" as a single prop and hand them straight over. It is what\n * makes a list line up BY CONSTRUCTION rather than by convention: without it\n * every row resolves its own tracks from its own copy of the config, which\n * agrees with its neighbours right until one row carries an unusually wide value.\n */\nexport interface ListGroupConfig<T extends Record<string, unknown>> {\n  /**\n   * The cells every row renders. Supplying these replaces the named-slot layout\n   * (title/subtitle/meta/value/status) for the rows inside.\n   */\n  cells?: readonly ListCardCellConfig<T>[];\n  /**\n   * How many labelled pairs the rows carry, in the named-slot layout. The group\n   * renders its children opaquely and cannot count them.\n   */\n  metaColumns?: number;\n  /** Override individual rails; anything omitted keeps its default. */\n  rails?: Partial<ListRails>;\n  /**\n   * Hold the drag and select gutters open even when nothing uses them. On by\n   * default, so a selectable list and a read-only one still line up.\n   */\n  reserveGutters?: boolean;\n}\n\n/**\n * A list of {@link BaseListCard}s that share one set of columns.\n *\n * Also the natural home for the things a review pointed out belong to the list\n * rather than the card: the density every row answers, and — when it lands —\n * shift-click range selection and the single `aria-live` region a list needs\n * (fifty polite live regions is a screen-reader nightmare, which is why the\n * card no longer takes one).\n */\nexport function ListCardGroup({\n  children,\n  density = \"cozy\",\n  cells,\n  metaColumns,\n  rails,\n  reserveGutters = true,\n  gap,\n  dataTestId,\n}: {\n  children: ReactNode;\n  density?: DataViewsDensity;\n  /**\n   * The list's CELL CONFIG — declared once here, obeyed by every row.\n   *\n   * This is what makes the columns line up by construction rather than by\n   * convention: the group resolves the tracks and hands the same config to every\n   * card, so two rows cannot disagree about the shape of the list because\n   * neither of them decides it.\n   *\n   * Supplying this replaces the named-slot layout (title/subtitle/meta/value/\n   * status) for the rows inside — they render `row` through these cells instead.\n   * The gutters and the overflow menu are unaffected; they bracket the cells and\n   * are not the config's to describe.\n   */\n  cells?: readonly ListCardCellConfig<never>[];\n  /**\n   * How many labelled pairs the rows in this list carry.\n   *\n   * The rail claims one share of the spare width per pair, so the title and\n   * every pair land on even intervals. A list is homogeneous — its rows show\n   * the same fields — but the group renders its children opaquely and cannot\n   * count them, so this is the one thing it has to be told.\n   */\n  metaColumns?: number;\n  /** Override individual rails; anything omitted keeps its default. */\n  rails?: Partial<ListRails>;\n  /**\n   * Hold the drag and select gutters open even when nothing uses them.\n   *\n   * On by default: a selectable list and a read-only one should line up, and\n   * turning drag mode on should not shift every row sideways.\n   */\n  reserveGutters?: boolean;\n  /** Row gap. Defaults to the density's own spacing. */\n  gap?: number;\n  dataTestId?: string;\n}): React.JSX.Element {\n  const resolved = {\n    ...DEFAULT_RAILS,\n    ...(metaColumns == null ? {} : contentRails(metaColumns)),\n    ...rails,\n  };\n  const configured = cells != null && cells.length > 0;\n  const template = configured ? cellRailsTemplate(cellTracks(cells)) : railsTemplate(resolved);\n  const railCount = configured ? cellRailCount(cells.length) : RAIL_COUNT;\n  return (\n    <ListRailsContext.Provider value={{ density, reserveGutters, railCount }}>\n     <CellConfigProvider cells={cells}>\n      <Box\n        data-testid={dataTestId}\n        sx={{\n          // The query container for every row inside it — a row cannot be one\n          // itself and a subgrid at the same time (containment drops subgrid).\n          // Every row in a list is the same width anyway, so the group is the\n          // honest place to ask the question.\n          containerType: \"inline-size\",\n          display: \"grid\",\n          gridTemplateColumns: template,\n          alignItems: \"center\",\n          rowGap: gap ?? DENSITY_ROW_PADDING[density],\n        }}\n      >\n        {children}\n      </Box>\n     </CellConfigProvider>\n    </ListRailsContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAEA,SAAS,eAAe,kBAAkC;AAgUpD;AAhQC,SAAS,SAAS,SAAyB;AAChD,SAAO,uBAAuB,KAAK,IAAI,SAAS,CAAC,CAAC;AACpD;AAkBO,SAAS,aAAa,aAA0D;AACrF,SAAO,cAAc,IACjB,EAAE,SAAS,mBAAmB,MAAM,SAAS,WAAW,EAAE,IAC1D,EAAE,SAAS,kBAAkB,MAAM,OAAO;AAChD;AAEO,IAAM,gBAA2B;AAAA,EACtC,UAAU;AAAA,EACV,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,SAAS;AAAA;AAAA;AAAA,EAGT,GAAG,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKjB,OAAO;AAAA,EACP,SAAS;AACX;AAgBA,IAAM,mBAAmB,cAAqC,IAAI;AAG3D,SAAS,eAAsC;AACpD,SAAO,WAAW,gBAAgB;AACpC;AAWO,SAAS,cAAc,OAA8B;AAC1D,SAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,EACR,EACG,OAAO,CAAC,SAAyB,QAAQ,IAAI,EAC7C,KAAK,GAAG;AACb;AAMO,IAAM,WAAW;AAGjB,IAAM,cAAc,WAAW;AAoB/B,SAAS,iBACd,SACA,aACQ;AACR,SAAO,cAAc;AAAA,IACnB,GAAG;AAAA;AAAA;AAAA,IAGH,GAAG,aAAa,WAAW;AAAA,IAC3B,GAAI,QAAQ,WAAW,CAAC,IAAI,EAAE,UAAU,KAAK;AAAA,IAC7C,GAAI,QAAQ,OAAO,CAAC,IAAI,EAAE,MAAM,KAAK;AAAA,IACrC,GAAI,QAAQ,SAAS,CAAC,IAAI,EAAE,QAAQ,KAAK;AAAA,EAC3C,CAAC;AACH;AAGO,IAAM,aAAa;AAU1B,IAAM,mBAAmB;AAGlB,SAAS,kBAAkB,OAAkC;AAClE,SAAO;AAAA,IACL,cAAc;AAAA,IACd,cAAc;AAAA,IACd,cAAc;AAAA,IACd,cAAc;AAAA,IACd,GAAG;AAAA,IACH,cAAc;AAAA,EAChB,EAAE,KAAK,GAAG;AACZ;AAGO,SAAS,cAAc,OAAuB;AACnD,SAAO,mBAAmB,QAAQ;AACpC;AAwCO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA;AACF,GAsCsB;AACpB,QAAM,WAAW;AAAA,IACf,GAAG;AAAA,IACH,GAAI,eAAe,OAAO,CAAC,IAAI,aAAa,WAAW;AAAA,IACvD,GAAG;AAAA,EACL;AACA,QAAM,aAAa,SAAS,QAAQ,MAAM,SAAS;AACnD,QAAM,WAAW,aAAa,kBAAkB,WAAW,KAAK,CAAC,IAAI,cAAc,QAAQ;AAC3F,QAAM,YAAY,aAAa,cAAc,MAAM,MAAM,IAAI;AAC7D,SACE,oBAAC,iBAAiB,UAAjB,EAA0B,OAAO,EAAE,SAAS,gBAAgB,UAAU,GACtE,8BAAC,sBAAmB,OACnB;AAAA,IAACA;AAAA,IAAA;AAAA,MACC,eAAa;AAAA,MACb,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,QAKF,eAAe;AAAA,QACf,SAAS;AAAA,QACT,qBAAqB;AAAA,QACrB,YAAY;AAAA,QACZ,QAAQ,OAAO,oBAAoB,OAAO;AAAA,MAC5C;AAAA,MAEC;AAAA;AAAA,EACH,GACD,GACD;AAEJ;","names":["default"]}

package/dist/chunk-T4SM36XC.js

@@ -0,0 +1,54 @@
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  default as default3
+} from "./chunk-WEBEOBN5.js";
+import {
+  Text
+} from "./chunk-VRHBJXZ7.js";
+
+// src/components/data-display/DataViews/save-view-preview.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function SummaryRow({
+  label,
+  items,
+  testId
+}) {
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsxs(default2, { sx: { display: "flex", gap: 1.5 }, "data-testid": testId, children: [
+    /* @__PURE__ */ jsx(Text, { variant: "caption", as: "span", children: /* @__PURE__ */ jsx(default2, { component: "span", sx: { width: 116, flexShrink: 0, color: "text.secondary" }, children: label }) }),
+    /* @__PURE__ */ jsx(Text, { variant: "caption", as: "span", children: /* @__PURE__ */ jsx(default2, { component: "span", sx: { minWidth: 0, flex: 1 }, children: items.join(", ") }) })
+  ] });
+}
+function PreviewBox({ preview, testIdPrefix }) {
+  const copy = useDataViewsCopy();
+  const empty = preview.filters.length === 0 && preview.columns.length === 0 && preview.sort.length === 0;
+  return /* @__PURE__ */ jsxs(default2, { sx: { p: 1.5, borderRadius: 1.5, bgcolor: "action.hover", border: (theme) => `1px solid ${theme.palette.divider}` }, children: [
+    /* @__PURE__ */ jsx(Text, { variant: "caption", as: "p", children: /* @__PURE__ */ jsx(
+      default2,
+      {
+        component: "span",
+        sx: { display: "block", mb: 1, textTransform: "uppercase", letterSpacing: 0.6, fontWeight: 600, color: "text.disabled" },
+        children: copy.saveView.previewHeading
+      }
+    ) }),
+    empty ? (
+      // Saving is still allowed — an operator may be naming the default on
+      // purpose — but it should not be a surprise afterwards.
+      /* @__PURE__ */ jsx(Text, { variant: "caption", as: "p", children: /* @__PURE__ */ jsx(default2, { component: "span", sx: { color: "warning.main", lineHeight: 1.6 }, "data-testid": `${testIdPrefix}-preview-empty`, children: copy.saveView.previewUnchanged }) })
+    ) : /* @__PURE__ */ jsxs(default3, { spacing: 0.75, children: [
+      /* @__PURE__ */ jsx(SummaryRow, { label: copy.saveView.previewFilters, items: preview.filters, testId: `${testIdPrefix}-preview-filters` }),
+      /* @__PURE__ */ jsx(SummaryRow, { label: copy.saveView.previewHiddenColumns, items: preview.columns, testId: `${testIdPrefix}-preview-columns` }),
+      /* @__PURE__ */ jsx(SummaryRow, { label: copy.saveView.sortRowLabel, items: preview.sort, testId: `${testIdPrefix}-preview-sort` })
+    ] })
+  ] });
+}
+
+export {
+  PreviewBox
+};
+//# sourceMappingURL=chunk-T4SM36XC.js.map

package/dist/chunk-T4SM36XC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/save-view-preview.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * What a saved view actually GUARDS, listed before it is saved.\n *\n * Split out of `SaveViewModal.tsx` when that file crossed the size gate: this\n * is the one self-contained piece of it — a read-only summary of the view\n * state, with no form and no dialog around it.\n */\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\nimport { Box } from \"../../../mui/Box\";\nimport { Stack } from \"../../../mui/Stack\";\nimport { Text } from \"../../typography/Text\";\n\nexport interface PreviewBoxProps {\n  preview: { filters: string[]; columns: string[]; sort: string[] };\n  testIdPrefix: string;\n}\n\n/** One \"label — value\" line of the summary. */\nfunction SummaryRow({\n  label,\n  items,\n  testId,\n}: {\n  label: string;\n  items: string[];\n  testId: string;\n}): React.JSX.Element | null {\n  if (items.length === 0) return null;\n  return (\n    <Box sx={{ display: \"flex\", gap: 1.5 }} data-testid={testId}>\n      <Text variant=\"caption\" as=\"span\">\n        <Box component=\"span\" sx={{ width: 116, flexShrink: 0, color: \"text.secondary\" }}>\n          {label}\n        </Box>\n      </Text>\n      <Text variant=\"caption\" as=\"span\">\n        <Box component=\"span\" sx={{ minWidth: 0, flex: 1 }}>\n          {items.join(\", \")}\n        </Box>\n      </Text>\n    </Box>\n  );\n}\n\nexport function PreviewBox({ preview, testIdPrefix }: PreviewBoxProps): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  const empty =\n    preview.filters.length === 0 && preview.columns.length === 0 && preview.sort.length === 0;\n  return (\n    <Box sx={{ p: 1.5, borderRadius: 1.5, bgcolor: \"action.hover\", border: (theme) => `1px solid ${theme.palette.divider}` }}>\n      <Text variant=\"caption\" as=\"p\">\n        <Box\n          component=\"span\"\n          sx={{ display: \"block\", mb: 1, textTransform: \"uppercase\", letterSpacing: 0.6, fontWeight: 600, color: \"text.disabled\" }}\n        >\n          {copy.saveView.previewHeading}\n        </Box>\n      </Text>\n      {empty ? (\n        // Saving is still allowed — an operator may be naming the default on\n        // purpose — but it should not be a surprise afterwards.\n        <Text variant=\"caption\" as=\"p\">\n          <Box component=\"span\" sx={{ color: \"warning.main\", lineHeight: 1.6 }} data-testid={`${testIdPrefix}-preview-empty`}>\n            {copy.saveView.previewUnchanged}\n          </Box>\n        </Text>\n      ) : (\n        <Stack spacing={0.75}>\n          <SummaryRow label={copy.saveView.previewFilters} items={preview.filters} testId={`${testIdPrefix}-preview-filters`} />\n          <SummaryRow label={copy.saveView.previewHiddenColumns} items={preview.columns} testId={`${testIdPrefix}-preview-columns`} />\n          <SummaryRow label={copy.saveView.sortRowLabel} items={preview.sort} testId={`${testIdPrefix}-preview-sort`} />\n        </Stack>\n      )}\n    </Box>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AA+BI,SAEI,KAFJ;AAXJ,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AACF,GAI6B;AAC3B,MAAI,MAAM,WAAW,EAAG,QAAO;AAC/B,SACE,qBAACA,UAAA,EAAI,IAAI,EAAE,SAAS,QAAQ,KAAK,IAAI,GAAG,eAAa,QACnD;AAAA,wBAAC,QAAK,SAAQ,WAAU,IAAG,QACzB,8BAACA,UAAA,EAAI,WAAU,QAAO,IAAI,EAAE,OAAO,KAAK,YAAY,GAAG,OAAO,iBAAiB,GAC5E,iBACH,GACF;AAAA,IACA,oBAAC,QAAK,SAAQ,WAAU,IAAG,QACzB,8BAACA,UAAA,EAAI,WAAU,QAAO,IAAI,EAAE,UAAU,GAAG,MAAM,EAAE,GAC9C,gBAAM,KAAK,IAAI,GAClB,GACF;AAAA,KACF;AAEJ;AAEO,SAAS,WAAW,EAAE,SAAS,aAAa,GAAuC;AACxF,QAAM,OAAO,iBAAiB;AAC9B,QAAM,QACJ,QAAQ,QAAQ,WAAW,KAAK,QAAQ,QAAQ,WAAW,KAAK,QAAQ,KAAK,WAAW;AAC1F,SACE,qBAACA,UAAA,EAAI,IAAI,EAAE,GAAG,KAAK,cAAc,KAAK,SAAS,gBAAgB,QAAQ,CAAC,UAAU,aAAa,MAAM,QAAQ,OAAO,GAAG,GACrH;AAAA,wBAAC,QAAK,SAAQ,WAAU,IAAG,KACzB;AAAA,MAACA;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,IAAI,EAAE,SAAS,SAAS,IAAI,GAAG,eAAe,aAAa,eAAe,KAAK,YAAY,KAAK,OAAO,gBAAgB;AAAA,QAEtH,eAAK,SAAS;AAAA;AAAA,IACjB,GACF;AAAA,IACC;AAAA;AAAA;AAAA,MAGC,oBAAC,QAAK,SAAQ,WAAU,IAAG,KACzB,8BAACA,UAAA,EAAI,WAAU,QAAO,IAAI,EAAE,OAAO,gBAAgB,YAAY,IAAI,GAAG,eAAa,GAAG,YAAY,kBAC/F,eAAK,SAAS,kBACjB,GACF;AAAA,QAEA,qBAACA,UAAA,EAAM,SAAS,MACd;AAAA,0BAAC,cAAW,OAAO,KAAK,SAAS,gBAAgB,OAAO,QAAQ,SAAS,QAAQ,GAAG,YAAY,oBAAoB;AAAA,MACpH,oBAAC,cAAW,OAAO,KAAK,SAAS,sBAAsB,OAAO,QAAQ,SAAS,QAAQ,GAAG,YAAY,oBAAoB;AAAA,MAC1H,oBAAC,cAAW,OAAO,KAAK,SAAS,cAAc,OAAO,QAAQ,MAAM,QAAQ,GAAG,YAAY,iBAAiB;AAAA,OAC9G;AAAA,KAEJ;AAEJ;","names":["default"]}