@12-apps/ui 6.54.0 → 6.55.0

package/dist/chunk-MMVAMUZY.js

@@ -0,0 +1,181 @@
+import {
+  DeleteViewDialog
+} from "./chunk-KWF7C6IZ.js";
+import {
+  DataViewsGrid
+} from "./chunk-CUREVLBT.js";
+import {
+  viewStateKey
+} from "./chunk-ZOLAYP2D.js";
+import {
+  ViewDialogs,
+  ViewMutationErrorAlert
+} from "./chunk-WUVVJXUK.js";
+import {
+  useSavedViewsController
+} from "./chunk-HR7YTBR7.js";
+
+// src/components/data-display/DataViews/DataViewsTableBase.tsx
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function useUrlSyncState(server, initialState) {
+  const isServerMode = server !== void 0;
+  return useMemo(
+    () => isServerMode && initialState ? {
+      search: initialState.search,
+      pills: initialState.pills,
+      ranges: initialState.ranges,
+      sortBy: initialState.sortBy,
+      // The scope belongs in the URL-driven slice alongside them: a
+      // `?view=recusados`-style deep link and browser back/forward must
+      // move the tab strip, and they must do it WITHOUT resetting the
+      // user's hidden columns — which is the whole reason this is a
+      // merging `syncState` and not a replacing `appliedState`.
+      scope: initialState.scope
+    } : void 0,
+    [isServerMode, initialState]
+  );
+}
+function resolveInitialView(views, requestedId) {
+  const requested = requestedId ? views.find((view) => view.id === requestedId) : void 0;
+  return requested ?? views.find((view) => view.isDefault);
+}
+function buildDisplayView({
+  ctl,
+  views,
+  activeView,
+  dirty,
+  onRequestDelete
+}) {
+  return {
+    activeViewName: ctl.activeViewName,
+    dirty,
+    onReset: () => activeView ? ctl.applyView(activeView) : ctl.selectMain(),
+    // Only offer "Atualizar" when there IS a view to update — otherwise the
+    // single footer button is a plain "Salvar visão".
+    onUpdate: activeView ? () => ctl.openEdit(activeView) : void 0,
+    onSaveAs: ctl.openCreate,
+    // The views themselves, not a dropdown: the panel renders them in its own
+    // body (see `data-views-view-nav`), so there is no second popover to clip
+    // the row actions.
+    nav: {
+      views,
+      activeViewId: activeView?.id ?? null,
+      onSelectView: (id) => {
+        const next = id === null ? null : views.find((view) => view.id === id);
+        if (next) ctl.applyView(next);
+        else ctl.selectMain();
+      },
+      onEditView: ctl.openEdit,
+      onPatchView: (view, changes) => void ctl.patchView(view, changes),
+      onDeleteView: onRequestDelete
+    }
+  };
+}
+function useDirtyTracking(ctl) {
+  const [dirty, setDirty] = useState(false);
+  const [savedAt, setSavedAt] = useState(0);
+  const baseline = useRef(null);
+  const appliedKey = JSON.stringify(ctl.applied ?? null);
+  useEffect(() => {
+    baseline.current = null;
+    setDirty(false);
+  }, [appliedKey, savedAt]);
+  return {
+    dirty,
+    noteState: (state) => {
+      ctl.currentRef.current = state;
+      const key = viewStateKey(state);
+      if (baseline.current === null) {
+        baseline.current = key;
+        setDirty(false);
+        return;
+      }
+      const next = key !== baseline.current;
+      setDirty((prev) => prev === next ? prev : next);
+    },
+    markSaved: () => setSavedAt((tick) => tick + 1)
+  };
+}
+function DataViewsTableBase(props) {
+  const {
+    initialViewId = null,
+    persistence,
+    router,
+    columns,
+    fields,
+    testIdPrefix = "table",
+    views,
+    server,
+    initialState
+  } = props;
+  const initialView = resolveInitialView(views, initialViewId);
+  const columnIds = columns.map((col) => col.id);
+  const ctl = useSavedViewsController(persistence, router, columnIds, views, initialView, initialState);
+  const { dirty, noteState, markSaved } = useDirtyTracking(ctl);
+  const [pendingDelete, setPendingDelete] = useState(null);
+  const activeView = views.find((view) => view.name === ctl.activeViewName);
+  const displayView = buildDisplayView({
+    ctl,
+    views,
+    activeView,
+    dirty,
+    onRequestDelete: setPendingDelete
+  });
+  const syncState = useUrlSyncState(server, initialState);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ViewMutationErrorAlert, { error: ctl.mutationError, onClose: ctl.clearMutationError, testIdPrefix }),
+    /* @__PURE__ */ jsx(
+      DataViewsGrid,
+      {
+        ...props,
+        testIdPrefix,
+        appliedState: ctl.applied,
+        syncState,
+        onStateChange: noteState,
+        displayView
+      }
+    ),
+    renderViewDialogs(ctl, fields, columns, views, testIdPrefix, markSaved),
+    /* @__PURE__ */ jsx(
+      DeleteViewDialog,
+      {
+        view: pendingDelete,
+        onClose: () => setPendingDelete(null),
+        onConfirm: (view) => {
+          void ctl.handleDelete(view);
+          setPendingDelete(null);
+        },
+        testIdPrefix
+      }
+    )
+  ] });
+}
+function renderViewDialogs(ctl, fields, columns, views, testIdPrefix, onSaved) {
+  return /* @__PURE__ */ jsx(
+    ViewDialogs,
+    {
+      saveOpen: ctl.saveOpen,
+      onCloseSave: ctl.closeSave,
+      currentState: ctl.editing ? ctl.editing.state : ctl.currentRef.current,
+      fields,
+      columns,
+      editing: ctl.editing,
+      onSave: async (payload) => {
+        await ctl.handleSave(payload);
+        onSaved();
+      },
+      manageOpen: ctl.manageOpen,
+      onCloseManage: () => ctl.setManageOpen(false),
+      views,
+      onEditFromManage: ctl.editFromManage,
+      onDelete: (view) => void ctl.handleDelete(view),
+      testIdPrefix
+    }
+  );
+}
+
+export {
+  DataViewsTableBase
+};
+//# sourceMappingURL=chunk-MMVAMUZY.js.map

package/dist/chunk-MUIBNHJW.js

@@ -0,0 +1,190 @@
+import {
+  DATA_VIEWS_LAYOUTS
+} from "./chunk-LHHAYZ55.js";
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  Slider
+} from "./chunk-W6WOKHAX.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/DataViews/data-views-layout-context.tsx
+import { createContext, useContext, useEffect, useMemo, useState } from "react";
+import GridViewOutlinedIcon from "@mui/icons-material/GridViewOutlined";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DataViewsLayoutContext = createContext(null);
+var DEFAULT_ZOOM = 35;
+var CARD_SCALE_RANGE = { min: 0.75, max: 2 };
+var LAYOUT_STORAGE_KEY = "dataviews:layout";
+var DENSITY_STORAGE_KEY = "dataviews:density";
+var DENSITIES = ["compact", "cozy", "comfortable"];
+var DENSITY_ROW_PADDING = {
+  compact: 0.25,
+  cozy: 0.75,
+  comfortable: 1.5
+};
+var DENSITY_CARD_SCALE = {
+  compact: 0.84,
+  cozy: 1.15,
+  comfortable: 1.4
+};
+function cardTargetWidthFor(zoom, density) {
+  return Math.round(cardMinWidthForZoom(zoom) * DENSITY_CARD_SCALE[density]);
+}
+var DENSITY_BOARD_SCALE = {
+  compact: 0.95,
+  cozy: 1,
+  comfortable: 1.25
+};
+function cardScaleForZoom(zoom) {
+  const clamped = Math.max(0, Math.min(100, zoom));
+  return CARD_SCALE_RANGE.min + clamped / 100 * (CARD_SCALE_RANGE.max - CARD_SCALE_RANGE.min);
+}
+function cardMinWidthForZoom(zoom) {
+  return Math.round(180 * cardScaleForZoom(zoom));
+}
+function isLayout(value) {
+  return DATA_VIEWS_LAYOUTS.includes(value);
+}
+function isDensity(value) {
+  return DENSITIES.includes(value);
+}
+var DEFAULT_DENSITY = "cozy";
+function readStoredDensity() {
+  try {
+    if (typeof window === "undefined") return void 0;
+    const stored = window.localStorage.getItem(DENSITY_STORAGE_KEY);
+    return isDensity(stored) ? stored : void 0;
+  } catch {
+    return void 0;
+  }
+}
+function pinLayout(layout, available) {
+  if (layout === "cards") return available.canUseCards ? "cards" : "table";
+  if (layout === "list") return available.canUseList ? "list" : "table";
+  if (layout === "board") return available.canUseBoard ? "board" : "table";
+  return "table";
+}
+function readStoredLayout() {
+  try {
+    if (typeof window === "undefined") return void 0;
+    const stored = window.localStorage.getItem(LAYOUT_STORAGE_KEY);
+    return isLayout(stored) ? stored : void 0;
+  } catch {
+    return void 0;
+  }
+}
+function writeStored(key, value) {
+  try {
+    if (typeof window === "undefined") return;
+    window.localStorage.setItem(key, value);
+  } catch {
+  }
+}
+function DataViewsLayoutProvider({
+  canUseCards = false,
+  canUseList = false,
+  canUseBoard = false,
+  defaultLayout = "table",
+  viewLayout,
+  ignoreStoredLayout = false,
+  children
+}) {
+  const availability = { canUseCards, canUseList, canUseBoard };
+  const [layout, setLayoutState] = useState(
+    () => pinLayout(
+      viewLayout ?? (ignoreStoredLayout ? void 0 : readStoredLayout()) ?? defaultLayout,
+      availability
+    )
+  );
+  const [density, setDensityState] = useState(
+    () => (ignoreStoredLayout ? void 0 : readStoredDensity()) ?? DEFAULT_DENSITY
+  );
+  const [zoom, setZoom] = useState(DEFAULT_ZOOM);
+  useEffect(() => {
+    if (viewLayout) setLayoutState(pinLayout(viewLayout, availability));
+  }, [viewLayout]);
+  const effective = pinLayout(layout, availability);
+  const value = useMemo(
+    () => ({
+      layout: effective,
+      setLayout: (next) => {
+        const pinned = pinLayout(next, availability);
+        setLayoutState(pinned);
+        if (!ignoreStoredLayout) writeStored(LAYOUT_STORAGE_KEY, pinned);
+      },
+      density,
+      setDensity: (next) => {
+        setDensityState(next);
+        if (!ignoreStoredLayout) writeStored(DENSITY_STORAGE_KEY, next);
+      },
+      canUseCards,
+      canUseList,
+      canUseBoard,
+      zoom,
+      setZoom
+    }),
+    [effective, density, canUseCards, canUseList, canUseBoard, zoom]
+  );
+  return /* @__PURE__ */ jsx(DataViewsLayoutContext.Provider, { value, children });
+}
+function useDataViewsLayout() {
+  const ctx = useContext(DataViewsLayoutContext);
+  if (!ctx) {
+    throw new Error("useDataViewsLayout must be used within a DataViewsLayoutProvider");
+  }
+  return ctx;
+}
+function DataViewsZoomSlider({ testIdPrefix }) {
+  const { layout, zoom, setZoom } = useDataViewsLayout();
+  const copy = useDataViewsCopy();
+  if (layout !== "cards" && layout !== "board") return null;
+  return /* @__PURE__ */ jsxs(
+    default2,
+    {
+      sx: {
+        display: { xs: "none", sm: "flex" },
+        alignItems: "center",
+        gap: 1,
+        color: "text.secondary"
+      },
+      children: [
+        /* @__PURE__ */ jsx(GridViewOutlinedIcon, { sx: { fontSize: sxRem(14) } }),
+        /* @__PURE__ */ jsx(default2, { sx: { width: sxRem(88), display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx(
+          Slider,
+          {
+            size: "sm",
+            showValue: false,
+            value: zoom,
+            min: 0,
+            max: 100,
+            step: 5,
+            onChange: (_event, next) => setZoom(Array.isArray(next) ? next[0] ?? 0 : next),
+            "aria-label": copy.display.cardZoom,
+            "data-testid": `${testIdPrefix}-card-zoom`
+          }
+        ) }),
+        /* @__PURE__ */ jsx(GridViewOutlinedIcon, { sx: { fontSize: sxRem(20) } })
+      ]
+    }
+  );
+}
+
+export {
+  DENSITY_ROW_PADDING,
+  DENSITY_CARD_SCALE,
+  cardTargetWidthFor,
+  DENSITY_BOARD_SCALE,
+  cardScaleForZoom,
+  cardMinWidthForZoom,
+  DataViewsLayoutProvider,
+  useDataViewsLayout,
+  DataViewsZoomSlider
+};
+//# sourceMappingURL=chunk-MUIBNHJW.js.map

package/dist/chunk-N24K536I.js

@@ -0,0 +1,37 @@
+import {
+  useDataViewsLayout
+} from "./chunk-MUIBNHJW.js";
+import {
+  DataViewsScopeTabs
+} from "./chunk-PL2AB5HJ.js";
+
+// src/components/data-display/DataViews/data-views-scope-tabs.tsx
+import { jsx } from "react/jsx-runtime";
+function ScopeTabsSlot({
+  scopes,
+  scopeFieldId,
+  board,
+  value,
+  onChange,
+  counts,
+  testIdPrefix
+}) {
+  const { layout } = useDataViewsLayout();
+  const boardOwnsThisPartition = layout === "board" && Boolean(scopeFieldId) && scopeFieldId === board?.groupBy;
+  if (boardOwnsThisPartition) return null;
+  return /* @__PURE__ */ jsx(
+    DataViewsScopeTabs,
+    {
+      scopes,
+      value,
+      onChange,
+      counts,
+      testIdPrefix
+    }
+  );
+}
+
+export {
+  ScopeTabsSlot
+};
+//# sourceMappingURL=chunk-N24K536I.js.map

package/dist/chunk-N4BARJEQ.js

@@ -0,0 +1,147 @@
+import {
+  CategorySectionHeading,
+  CategoryTreeRow
+} from "./chunk-XBXJKYUN.js";
+import {
+  categoryCheckState,
+  isLeafCategory,
+  leavesOf
+} from "./chunk-PN4HVM43.js";
+import {
+  emptySx,
+  listSx,
+  skeletonSx
+} from "./chunk-RCQYCDV6.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/form/CategorySelect/CategoryPanelList.tsx
+import Box from "@mui/material/Box/index.js";
+import Button from "@mui/material/Button/index.js";
+import Skeleton from "@mui/material/Skeleton/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var SENTENCE_CASE = { textTransform: "none" };
+var SKELETON_ROWS = 6;
+function LoadingRows() {
+  return /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: SKELETON_ROWS }, (_unused, index) => /* @__PURE__ */ jsx(Skeleton, { variant: "rounded", sx: skeletonSx }, index)) });
+}
+function EmptyCatalogue({
+  onCreateCategory,
+  dataTestId,
+  copy
+}) {
+  return /* @__PURE__ */ jsxs(Box, { sx: emptySx, "data-testid": `${dataTestId}-empty-catalogue`, children: [
+    /* @__PURE__ */ jsx("strong", { children: copy.emptyTitle }),
+    /* @__PURE__ */ jsx("p", { children: copy.purpose }),
+    onCreateCategory && /* @__PURE__ */ jsx(Button, { variant: "contained", size: "small", sx: SENTENCE_CASE, onClick: () => onCreateCategory(), children: copy.createCategory })
+  ] });
+}
+function NoResults({
+  query,
+  onClearQuery,
+  onCreateCategory,
+  dataTestId,
+  copy
+}) {
+  return /* @__PURE__ */ jsxs(Box, { sx: emptySx, "data-testid": `${dataTestId}-no-results`, children: [
+    /* @__PURE__ */ jsx("strong", { children: copy.noResults.title(query) }),
+    /* @__PURE__ */ jsx("p", { children: copy.noResults.hint }),
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: sxRem(6), justifyContent: "center" }, children: [
+      /* @__PURE__ */ jsx(Button, { variant: "outlined", size: "small", sx: SENTENCE_CASE, onClick: onClearQuery, children: copy.noResults.clearSearch }),
+      onCreateCategory && /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "contained",
+          size: "small",
+          sx: SENTENCE_CASE,
+          "data-testid": `${dataTestId}-create`,
+          onClick: () => onCreateCategory(query.trim()),
+          children: copy.noResults.create(query.trim())
+        }
+      )
+    ] })
+  ] });
+}
+function CategoryNodeRows({
+  node,
+  depth,
+  props
+}) {
+  const { draft, query, single, allowParentSelection, rowIds, activeIndex, sheet } = props;
+  const categoryId = node.category.id;
+  const leaf = isLeafCategory(node);
+  const expanded = props.isExpanded(categoryId);
+  const selectable = allowParentSelection || leaf;
+  const asHeading = single && !selectable && !props.deepTree;
+  const selectedCount = leaf ? 0 : leavesOf(node).filter((id) => draft.has(id)).length;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    asHeading ? /* @__PURE__ */ jsx(CategorySectionHeading, { option: node.category, query }) : /* @__PURE__ */ jsx(
+      CategoryTreeRow,
+      {
+        option: node.category,
+        query,
+        depth,
+        branch: !leaf,
+        expanded,
+        active: rowIds[activeIndex] === categoryId,
+        sheet,
+        ...selectable ? { checkState: categoryCheckState(node, draft) } : {},
+        single,
+        selectedCount,
+        showCounts: props.showCounts,
+        onToggleExpanded: () => props.onToggleExpanded(categoryId),
+        onActivate: () => leaf ? props.onActivateSubcategory(categoryId) : props.onActivateCategory(node),
+        dataTestId: props.dataTestId,
+        copy: props.copy
+      }
+    ),
+    (expanded || asHeading) && node.subcategories.map((sub) => /* @__PURE__ */ jsx(CategoryNodeRows, { node: sub, depth: depth + 1, props }, sub.category.id))
+  ] });
+}
+function CategoryPanelList(props) {
+  const { groups, loading, query, listRef, sheet, dataTestId, copy } = props;
+  const body = () => {
+    if (loading) return /* @__PURE__ */ jsx(LoadingRows, {});
+    if (groups.length === 0 && query.trim().length > 0) {
+      return /* @__PURE__ */ jsx(
+        NoResults,
+        {
+          copy,
+          query,
+          onClearQuery: props.onClearQuery,
+          onCreateCategory: props.onCreateCategory,
+          dataTestId
+        }
+      );
+    }
+    if (groups.length === 0) {
+      return /* @__PURE__ */ jsx(
+        EmptyCatalogue,
+        {
+          copy,
+          onCreateCategory: props.onCreateCategory,
+          dataTestId
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(Fragment, { children: groups.map((group) => /* @__PURE__ */ jsx(CategoryNodeRows, { node: group, depth: 0, props }, group.category.id)) });
+  };
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ref: listRef,
+      role: "listbox",
+      "aria-multiselectable": props.single ? void 0 : true,
+      tabIndex: -1,
+      "data-testid": `${dataTestId}-list`,
+      sx: (theme) => listSx(theme, sheet),
+      children: body()
+    }
+  );
+}
+
+export {
+  CategoryPanelList
+};
+//# sourceMappingURL=chunk-N4BARJEQ.js.map

package/dist/chunk-N6GBJGKW.js

@@ -0,0 +1,63 @@
+import {
+  LightboxAutoplayButton,
+  LightboxCloseButton,
+  LightboxNavButtons,
+  LightboxZoomControls
+} from "./chunk-6LUUCSFV.js";
+
+// src/components/data-display/Lightbox/LightboxOverlay.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var LightboxOverlay = ({
+  testId,
+  itemCount,
+  currentIndex,
+  showControls,
+  loop,
+  autoplay,
+  canZoom,
+  isAutoPlaying,
+  onClose,
+  onPrev,
+  onNext,
+  onZoomIn,
+  onZoomOut,
+  onResetZoom,
+  onToggleAutoplay
+}) => {
+  const hasMultiple = itemCount > 1;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(LightboxCloseButton, { testId, onClose }),
+    showControls && hasMultiple && /* @__PURE__ */ jsx(
+      LightboxNavButtons,
+      {
+        testId,
+        atStart: !loop && currentIndex === 0,
+        atEnd: !loop && currentIndex === itemCount - 1,
+        onPrev,
+        onNext
+      }
+    ),
+    canZoom && /* @__PURE__ */ jsx(
+      LightboxZoomControls,
+      {
+        testId,
+        onZoomIn,
+        onZoomOut,
+        onResetZoom
+      }
+    ),
+    autoplay && hasMultiple && /* @__PURE__ */ jsx(
+      LightboxAutoplayButton,
+      {
+        testId,
+        isAutoPlaying,
+        onToggle: onToggleAutoplay
+      }
+    )
+  ] });
+};
+
+export {
+  LightboxOverlay
+};
+//# sourceMappingURL=chunk-N6GBJGKW.js.map

package/dist/chunk-NAQ2PIV5.js

@@ -0,0 +1,65 @@
+import {
+  onMedia,
+  scrim,
+  sheen
+} from "./chunk-SSX5ITPM.js";
+import {
+  remPx,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/Lightbox/Lightbox.constants.ts
+var MIN_ZOOM = 0.5;
+var MAX_ZOOM = 5;
+var ZOOM_STEP = 1.2;
+var WHEEL_ZOOM_FACTOR = 0.01;
+var DEFAULT_AUTOPLAY_INTERVAL_MS = 4e3;
+var OVERLAY_Z_INDEX = 1e3;
+var minSwipeDistance = (theme) => remPx(theme, 50);
+var SCRIM = (theme) => scrim(theme, 0.5);
+var SCRIM_HOVER = (theme) => scrim(theme, 0.7);
+var overlayButtonSx = {
+  color: onMedia,
+  backgroundColor: SCRIM,
+  "&:hover": { backgroundColor: SCRIM_HOVER }
+};
+var navButtonSx = {
+  color: onMedia,
+  backgroundColor: SCRIM,
+  "&:hover:not(:disabled)": { backgroundColor: SCRIM_HOVER },
+  "&:disabled": { color: (theme) => sheen(theme, 0.3) }
+};
+var captionSx = {
+  color: onMedia,
+  textAlign: "center",
+  backgroundColor: SCRIM_HOVER,
+  borderRadius: 1
+};
+var counterSx = {
+  color: onMedia,
+  fontSize: sxRem(14),
+  backgroundColor: SCRIM,
+  borderRadius: 1
+};
+var thumbnailStripSx = {
+  background: SCRIM,
+  borderRadius: 1
+};
+var makeTestId = (dataTestId) => (suffix) => dataTestId ? `${dataTestId}-${suffix}` : `lightbox-${suffix}`;
+
+export {
+  MIN_ZOOM,
+  MAX_ZOOM,
+  ZOOM_STEP,
+  WHEEL_ZOOM_FACTOR,
+  DEFAULT_AUTOPLAY_INTERVAL_MS,
+  OVERLAY_Z_INDEX,
+  minSwipeDistance,
+  overlayButtonSx,
+  navButtonSx,
+  captionSx,
+  counterSx,
+  thumbnailStripSx,
+  makeTestId
+};
+//# sourceMappingURL=chunk-NAQ2PIV5.js.map