@12-apps/ui 6.54.1 → 6.55.0

package/dist/chunk-CMBZ3J6I.js

@@ -0,0 +1,179 @@
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  Button
+} from "./chunk-JE6FNSQV.js";
+import {
+  Text
+} from "./chunk-AJBRO76D.js";
+import {
+  rem,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/DataViews/data-views-export.tsx
+import DownloadRoundedIcon from "@mui/icons-material/DownloadRounded";
+import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
+import CircularProgress from "@mui/material/CircularProgress/index.js";
+import Popover from "@mui/material/Popover/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var ALL_FORMATS = ["xlsx", "csv", "json"];
+function scopeLabel(selected, total) {
+  if (selected > 0) {
+    return `${selected} ${selected === 1 ? "item selecionado" : "itens selecionados"}`;
+  }
+  return `${total} ${total === 1 ? "item filtrado" : "itens filtrados"}`;
+}
+function ExportTrigger({
+  busy,
+  onOpen,
+  testIdPrefix,
+  compact
+}) {
+  const copy = useDataViewsCopy();
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "outline",
+      size: "sm",
+      color: "neutral",
+      disabled: busy,
+      onClick: (event) => onOpen(event.currentTarget),
+      dataTestId: `${testIdPrefix}-export-trigger`,
+      "aria-label": copy.export.trigger,
+      title: compact ? copy.export.trigger : void 0,
+      children: /* @__PURE__ */ jsxs(default2, { component: "span", sx: { display: "inline-flex", alignItems: "center", gap: 0.5 }, children: [
+        busy ? /* @__PURE__ */ jsx(CircularProgress, { size: rem(theme, 14) }) : /* @__PURE__ */ jsx(DownloadRoundedIcon, { fontSize: "small" }),
+        !compact && /* @__PURE__ */ jsx(default2, { component: "span", sx: { display: { xs: "none", sm: "inline" } }, children: copy.export.triggerLabel }),
+        !compact && /* @__PURE__ */ jsx(KeyboardArrowDownRoundedIcon, { fontSize: "small" })
+      ] })
+    }
+  );
+}
+function FormatRow({
+  format,
+  onPick,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsxs(
+    default2,
+    {
+      component: "button",
+      type: "button",
+      onClick: onPick,
+      "data-testid": `${testIdPrefix}-export-${format}`,
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "flex-start",
+        width: "100%",
+        px: 1.5,
+        py: 1,
+        border: 0,
+        background: "none",
+        cursor: "pointer",
+        font: "inherit",
+        textAlign: "left",
+        "&:hover": { bgcolor: "action.hover" }
+      },
+      children: [
+        /* @__PURE__ */ jsx(default2, { component: "span", sx: { fontSize: sxRem(13) }, children: copy.export.formats[format]?.label ?? format }),
+        /* @__PURE__ */ jsx(default2, { component: "span", sx: { fontSize: sxRem(11), color: "text.disabled" }, children: copy.export.formats[format]?.hint ?? "" })
+      ]
+    }
+  );
+}
+function ExportPanel({
+  formats,
+  selectedCount,
+  totalCount,
+  columnCount,
+  onPick,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsxs(default2, { "data-testid": `${testIdPrefix}-export-panel`, children: [
+    /* @__PURE__ */ jsxs(default2, { sx: { px: 1.5, pt: 1, pb: 1, borderBottom: 1, borderColor: "divider" }, children: [
+      /* @__PURE__ */ jsx(Text, { variant: "caption", as: "p", children: /* @__PURE__ */ jsxs(default2, { component: "span", "data-testid": `${testIdPrefix}-export-scope`, children: [
+        "Exportando ",
+        scopeLabel(selectedCount, totalCount)
+      ] }) }),
+      /* @__PURE__ */ jsx(Text, { variant: "caption", as: "p", children: /* @__PURE__ */ jsx(default2, { component: "span", sx: { color: "text.disabled" }, children: copy.export.visibleColumns(columnCount) }) })
+    ] }),
+    formats.map((format) => /* @__PURE__ */ jsx(
+      FormatRow,
+      {
+        format,
+        onPick: () => onPick(format),
+        testIdPrefix
+      },
+      format
+    ))
+  ] });
+}
+function DataViewsExportMenu({
+  config,
+  query,
+  totalCount,
+  selectedIds,
+  columns,
+  testIdPrefix,
+  compact
+}) {
+  const [anchor, setAnchor] = useState(null);
+  const [busy, setBusy] = useState(false);
+  const run = async (format) => {
+    setAnchor(null);
+    setBusy(true);
+    try {
+      await config.onExport({
+        format,
+        // UNPAGINATED: page 1 of a page as large as the whole result. The host
+        // re-queries with this; nothing here reads the loaded rows.
+        query: { ...query, page: 1, pageSize: Math.max(1, totalCount) },
+        selectedIds: selectedIds.length > 0 ? [...selectedIds] : void 0,
+        columns
+      });
+    } finally {
+      setBusy(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ExportTrigger, { busy, onOpen: setAnchor, testIdPrefix, compact }),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        open: Boolean(anchor),
+        anchorEl: anchor,
+        onClose: () => setAnchor(null),
+        anchorOrigin: { vertical: "bottom", horizontal: "right" },
+        transformOrigin: { vertical: "top", horizontal: "right" },
+        slotProps: { paper: { sx: { width: sxRem(260), maxWidth: (theme) => `calc(100vw - ${rem(theme, 32)})` } } },
+        children: /* @__PURE__ */ jsx(
+          ExportPanel,
+          {
+            formats: config.formats ?? ALL_FORMATS,
+            selectedCount: selectedIds.length,
+            totalCount,
+            columnCount: columns.length,
+            onPick: (format) => void run(format),
+            testIdPrefix
+          }
+        )
+      }
+    )
+  ] });
+}
+
+export {
+  DataViewsExportMenu
+};
+//# sourceMappingURL=chunk-CMBZ3J6I.js.map

package/dist/chunk-CMLIWUBW.js

@@ -0,0 +1,253 @@
+import {
+  CustomTabPanel
+} from "./chunk-GNCSDUGY.js";
+import {
+  tabsRootStyles
+} from "./chunk-QMHS6ZDI.js";
+import {
+  rem,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/navigation/Tabs/Tabs.tsx
+import Close from "@mui/icons-material/Close";
+import Badge from "@mui/material/Badge/index.js";
+import Box from "@mui/material/Box/index.js";
+import Divider from "@mui/material/Divider/index.js";
+import MuiTab from "@mui/material/Tab/index.js";
+import MuiTabs from "@mui/material/Tabs/index.js";
+import { alpha, styled } from "@mui/material/styles/index.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var StyledTabs = styled(MuiTabs, {
+  shouldForwardProp: (prop) => !["customVariant", "size", "showDividers"].includes(prop)
+})(
+  ({ theme, customVariant, size, showDividers }) => ({
+    ...tabsRootStyles({ theme, customVariant, size, showDividers })
+  })
+);
+var CloseButton = styled(Box)(({ theme }) => ({
+  marginLeft: theme.spacing(0.5),
+  padding: theme.spacing(0.25),
+  width: rem(theme, 20),
+  height: rem(theme, 20),
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  cursor: "pointer",
+  borderRadius: "50%",
+  color: theme.palette.action.active,
+  "&:hover": {
+    backgroundColor: alpha(theme.palette.error.main, 0.1),
+    color: theme.palette.error.main
+  }
+}));
+var BadgeWrapper = styled(Badge)(({ theme }) => ({
+  "& .MuiBadge-badge": {
+    right: rem(theme, -6),
+    top: rem(theme, 4),
+    fontSize: rem(theme, 12),
+    minWidth: rem(theme, 16),
+    height: rem(theme, 16),
+    padding: 0
+  }
+}));
+var TABS_DEFAULTS = {
+  variant: "default",
+  size: "md",
+  color: "primary",
+  fullWidth: false,
+  orientation: "horizontal",
+  showDividers: false,
+  centered: false,
+  scrollable: false,
+  scrollButtons: "auto",
+  sticky: false,
+  stickyOffset: 0,
+  animateContent: false,
+  animationDuration: 300,
+  persistContent: false,
+  disabled: false,
+  loading: false
+};
+var OWN_PROPS = /* @__PURE__ */ new Set([
+  "items",
+  "closeTabLabel",
+  "color",
+  "size",
+  "fullWidth",
+  "scrollable",
+  "scrollButtons",
+  "sticky",
+  "stickyOffset",
+  "animateContent",
+  "animationDuration",
+  "persistContent",
+  "tabPanelProps",
+  "loading",
+  "loadingComponent"
+]);
+var domPassthrough = (props) => Object.fromEntries(Object.entries(props).filter(([key]) => !OWN_PROPS.has(key)));
+var definedProps = (props) => Object.fromEntries(
+  Object.entries(props).filter(([, value]) => value !== void 0)
+);
+var resolveScrollButtons = (scrollable) => scrollable ? "auto" : false;
+var buildTabsSx = ({
+  fullWidth,
+  sticky,
+  stickyOffset,
+  indicatorColor,
+  disabled
+}) => ({
+  ...fullWidth && { width: "100%" },
+  // Pin the tab list while panels scroll beneath it. Opaque background + bottom
+  // divider so scrolled content does not show through.
+  ...sticky && {
+    position: "sticky",
+    top: stickyOffset,
+    zIndex: 2,
+    backgroundColor: "background.default",
+    borderBottom: 1,
+    borderColor: "divider"
+  },
+  ...indicatorColor && {
+    "& .MuiTabs-indicator": { backgroundColor: indicatorColor }
+  },
+  ...disabled && { opacity: 0.6, pointerEvents: "none" }
+});
+var TabLabel = ({ item, closeTabLabel, onClose }) => {
+  const content = /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+    item.icon,
+    /* @__PURE__ */ jsx("span", { children: item.label }),
+    item.closable && /* @__PURE__ */ jsx(
+      CloseButton,
+      {
+        onClick: (e) => onClose(e, item.id),
+        role: "button",
+        tabIndex: 0,
+        "aria-label": closeTabLabel,
+        onKeyDown: (e) => {
+          if (e.key !== "Enter" && e.key !== " ") return;
+          onClose(e, item.id);
+        },
+        children: /* @__PURE__ */ jsx(Close, { fontSize: "inherit" })
+      }
+    )
+  ] });
+  if (item.badge === void 0) return content;
+  return /* @__PURE__ */ jsx(BadgeWrapper, { badgeContent: item.badge, color: "error", children: content });
+};
+var TabsBar = ({ rest, items, value, onChange, onCloseTab, dataTestId, ...p }) => /* @__PURE__ */ jsx(
+  StyledTabs,
+  {
+    ...rest,
+    value,
+    onChange,
+    customVariant: p.variant,
+    size: p.size,
+    showDividers: p.showDividers,
+    orientation: p.orientation,
+    centered: p.centered,
+    variant: p.scrollable ? "scrollable" : "standard",
+    "data-testid": dataTestId ? `${dataTestId}-list` : "tabs-list",
+    scrollButtons: resolveScrollButtons(p.scrollable),
+    allowScrollButtonsMobile: p.scrollable,
+    textColor: p.color,
+    indicatorColor: p.color,
+    sx: buildTabsSx({
+      fullWidth: p.fullWidth,
+      sticky: p.sticky,
+      stickyOffset: sxRem(p.stickyOffset ?? 0),
+      indicatorColor: p.indicatorColor,
+      disabled: p.disabled
+    }),
+    children: items.map((item, index) => /* @__PURE__ */ jsx(
+      MuiTab,
+      {
+        value: item.id,
+        label: /* @__PURE__ */ jsx(TabLabel, { closeTabLabel: p.closeTabLabel, item, onClose: onCloseTab }),
+        disabled: item.disabled || p.disabled,
+        className: item.className,
+        id: `tab-${item.id}`,
+        "aria-controls": `tabpanel-${item.id}`,
+        "aria-disabled": item.disabled || p.disabled,
+        "data-testid": dataTestId ? `${dataTestId}-tab-${index}` : `tabs-tab-${index}`
+      },
+      item.id
+    ))
+  }
+);
+var TabsPanels = ({
+  items,
+  value,
+  variant,
+  animateContent,
+  animationDuration,
+  persistContent,
+  loading,
+  loadingComponent,
+  tabPanelProps,
+  dataTestId
+}) => /* @__PURE__ */ jsx(Box, { sx: { mt: variant === "enclosed" ? 0 : 2 }, children: items.map((item, index) => /* @__PURE__ */ jsx(
+  CustomTabPanel,
+  {
+    id: item.id,
+    value,
+    animate: animateContent,
+    animationDuration,
+    persist: persistContent,
+    loading,
+    loadingComponent,
+    className: tabPanelProps?.className,
+    dataTestId,
+    index,
+    children: item.content
+  },
+  item.id
+)) });
+var Tabs = React.forwardRef(
+  (tabsProps, ref) => {
+    const resolved = { ...TABS_DEFAULTS, ...definedProps(tabsProps) };
+    const {
+      // Destructured only to keep it OUT of `rest`, which is spread onto the
+      // DOM node — `{...resolved}` below is what actually carries it to
+      // `TabsBar`. Same reason as `value` on the next line.
+      closeTabLabel: _closeTabLabel,
+      value: _value,
+      onChange,
+      onTabClose,
+      className,
+      disabled,
+      showDividers,
+      variant,
+      dataTestId,
+      ...rest
+    } = resolved;
+    const handleChange = (event, newValue) => {
+      if (!disabled) onChange(event, newValue);
+    };
+    const handleTabClose = (event, tabId) => {
+      event.stopPropagation();
+      onTabClose?.(tabId);
+    };
+    return /* @__PURE__ */ jsxs(Box, { className, ref, "data-testid": dataTestId || "tabs", children: [
+      /* @__PURE__ */ jsx(
+        TabsBar,
+        {
+          ...resolved,
+          rest: domPassthrough(rest),
+          onChange: handleChange,
+          onCloseTab: handleTabClose
+        }
+      ),
+      showDividers && variant !== "enclosed" && /* @__PURE__ */ jsx(Divider, {}),
+      /* @__PURE__ */ jsx(TabsPanels, { ...resolved })
+    ] });
+  }
+);
+Tabs.displayName = "Tabs";
+
+export {
+  Tabs
+};
+//# sourceMappingURL=chunk-CMLIWUBW.js.map

package/dist/chunk-CTIMTEH7.js

@@ -0,0 +1,268 @@
+import {
+  ColumnsTab
+} from "./chunk-WSAUWJFO.js";
+import {
+  DisplayTab,
+  SortTab
+} from "./chunk-TTIZUZ57.js";
+import {
+  ViewActions,
+  ViewFooter,
+  ViewHeader,
+  ViewsList
+} from "./chunk-5NOCDQJD.js";
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  Button
+} from "./chunk-JE6FNSQV.js";
+import {
+  rem,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/DataViews/data-views-display-panel.tsx
+import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
+import DisplaySettingsRoundedIcon from "@mui/icons-material/DisplaySettingsRounded";
+import Popover from "@mui/material/Popover/index.js";
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function displayTabs(copy) {
+  return [
+    { key: "sort", label: copy.display.sortTab },
+    { key: "columns", label: copy.display.columnsTab },
+    { key: "display", label: copy.display.panelTab }
+  ];
+}
+function PanelTabs({
+  tab,
+  onChange,
+  muted,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsx(default2, { sx: { display: "flex", gap: 0.5, p: 0.75, bgcolor: "action.hover", borderBottom: 1, borderColor: "divider" }, children: displayTabs(copy).map((entry) => {
+    const active = tab === entry.key && !muted;
+    return /* @__PURE__ */ jsx(
+      default2,
+      {
+        component: "button",
+        type: "button",
+        onClick: () => onChange(entry.key),
+        "data-testid": `${testIdPrefix}-display-tab-${entry.key}`,
+        "aria-current": active,
+        sx: {
+          flex: 1,
+          px: 1,
+          py: 0.75,
+          border: 0,
+          borderRadius: 1,
+          cursor: "pointer",
+          font: "inherit",
+          fontSize: sxRem(13),
+          bgcolor: active ? "background.paper" : "transparent",
+          boxShadow: active ? 1 : 0,
+          fontWeight: active ? 600 : 400,
+          color: active ? "text.primary" : "text.secondary"
+        },
+        children: entry.label
+      },
+      entry.key
+    );
+  }) });
+}
+function PanelBody({
+  tab,
+  c,
+  sortKinds,
+  testIdPrefix
+}) {
+  if (tab === "sort") {
+    return /* @__PURE__ */ jsx(
+      SortTab,
+      {
+        fields: c.resolvedSortFields,
+        activeField: c.activeSortField,
+        activeOrder: c.activeSortOrder,
+        onChange: (field, order) => c.patch({ sortBy: [{ id: field, dir: order }] }),
+        sortKinds,
+        testIdPrefix
+      }
+    );
+  }
+  if (tab === "columns") {
+    return /* @__PURE__ */ jsx(
+      ColumnsTab,
+      {
+        columns: c.hideableColumns,
+        order: c.columnOrder,
+        visibleColumns: c.state.visibleColumns,
+        onToggle: c.toggleColumn,
+        onReorder: (order) => c.patch({ order }),
+        onShowAll: () => c.patch({ visibleColumns: c.columnOrder }),
+        onReset: () => c.patch({ visibleColumns: c.columnOrder, order: void 0 }),
+        testIdPrefix
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(DisplayTab, { testIdPrefix });
+}
+function PanelSurface({
+  c,
+  view,
+  nav,
+  tab,
+  onTab,
+  viewsOpen,
+  onToggleViews,
+  actionsFor,
+  onOpenActions,
+  onBack,
+  sortKinds,
+  onDone,
+  testIdPrefix
+}) {
+  return /* @__PURE__ */ jsxs(default2, { "data-testid": `${testIdPrefix}-display-panel`, children: [
+    view && /* @__PURE__ */ jsx(
+      ViewHeader,
+      {
+        view,
+        open: viewsOpen,
+        onToggle: onToggleViews,
+        testIdPrefix
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      PanelTabs,
+      {
+        tab,
+        onChange: onTab,
+        muted: Boolean(nav),
+        testIdPrefix
+      }
+    ),
+    /* @__PURE__ */ jsx(default2, { sx: { maxHeight: sxRem(320), minHeight: sxRem(220), overflowY: "auto" }, children: nav ? /* @__PURE__ */ jsx(
+      ViewsBody,
+      {
+        nav,
+        actionsFor,
+        onOpenActions,
+        onBack,
+        testIdPrefix
+      }
+    ) : /* @__PURE__ */ jsx(PanelBody, { tab, c, sortKinds, testIdPrefix }) }),
+    view && /* @__PURE__ */ jsx(ViewFooter, { view, onDone, testIdPrefix })
+  ] });
+}
+function ViewsBody({
+  nav,
+  actionsFor,
+  onOpenActions,
+  onBack,
+  testIdPrefix
+}) {
+  const live = actionsFor ? nav.views.find((view) => view.id === actionsFor.id) : void 0;
+  if (live) {
+    return /* @__PURE__ */ jsx(ViewActions, { view: live, handlers: nav, onBack, testIdPrefix });
+  }
+  return /* @__PURE__ */ jsx(ViewsList, { handlers: nav, onOpenActions, testIdPrefix });
+}
+function DisplayTrigger({
+  dirty,
+  compact,
+  onOpen,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "outline",
+      size: "sm",
+      color: "neutral",
+      onClick: (event) => onOpen(event.currentTarget),
+      dataTestId: `${testIdPrefix}-display-trigger`,
+      "aria-label": copy.display.trigger,
+      title: compact ? copy.display.trigger : void 0,
+      children: /* @__PURE__ */ jsxs(default2, { component: "span", sx: { display: "inline-flex", alignItems: "center", gap: 0.5 }, children: [
+        /* @__PURE__ */ jsx(DisplaySettingsRoundedIcon, { fontSize: "small" }),
+        !compact && /* @__PURE__ */ jsx(default2, { component: "span", sx: { display: { xs: "none", sm: "inline" } }, children: copy.display.trigger }),
+        dirty && /* @__PURE__ */ jsx(default2, { component: "span", sx: { height: sxRem(6), width: sxRem(6), borderRadius: "50%", bgcolor: "primary.main" } }),
+        !compact && /* @__PURE__ */ jsx(KeyboardArrowDownRoundedIcon, { fontSize: "small" })
+      ] })
+    }
+  );
+}
+function DataViewsDisplayPanel({
+  c,
+  testIdPrefix,
+  sortKinds,
+  view,
+  compact
+}) {
+  const [anchor, setAnchor] = useState(null);
+  const [tab, setTab] = useState("columns");
+  const [viewsOpen, setViewsOpen] = useState(false);
+  const [actionsFor, setActionsFor] = useState(null);
+  const nav = viewsOpen ? view?.nav : void 0;
+  const close = () => setAnchor(null);
+  const leaveViews = () => {
+    setViewsOpen(false);
+    setActionsFor(null);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      DisplayTrigger,
+      {
+        dirty: Boolean(view?.dirty),
+        compact: Boolean(compact),
+        onOpen: setAnchor,
+        testIdPrefix
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        open: Boolean(anchor),
+        anchorEl: anchor,
+        onClose: close,
+        anchorOrigin: { vertical: "bottom", horizontal: "right" },
+        transformOrigin: { vertical: "top", horizontal: "right" },
+        slotProps: { paper: { sx: { width: sxRem(320), maxWidth: (theme) => `calc(100vw - ${rem(theme, 32)})` } } },
+        children: /* @__PURE__ */ jsx(
+          PanelSurface,
+          {
+            c,
+            view,
+            nav,
+            tab,
+            onTab: (next) => {
+              setTab(next);
+              leaveViews();
+            },
+            viewsOpen,
+            onToggleViews: () => {
+              setViewsOpen((prev) => !prev);
+              setActionsFor(null);
+            },
+            actionsFor,
+            onOpenActions: setActionsFor,
+            onBack: () => setActionsFor(null),
+            sortKinds,
+            onDone: close,
+            testIdPrefix
+          }
+        )
+      }
+    )
+  ] });
+}
+
+export {
+  DataViewsDisplayPanel
+};
+//# sourceMappingURL=chunk-CTIMTEH7.js.map