@12-apps/ui 6.19.1 → 6.21.0

package/dist/chunk-XEE7PLDR.js

@@ -0,0 +1,282 @@
+import {
+  NumberBoundInput
+} from "./chunk-FV36LFPX.js";
+import {
+  RangePresets
+} from "./chunk-F4RR4666.js";
+import {
+  presetsFor
+} from "./chunk-CBOB5AV6.js";
+import {
+  isRangeInverted,
+  isRangeSet,
+  numericRange,
+  rangeChipLabel
+} from "./chunk-GCZJH4XL.js";
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  TableFilter
+} from "./chunk-J3JGO6Y6.js";
+import {
+  DayBoundInput
+} from "./chunk-UCU5FCYE.js";
+
+// src/components/data-display/DataViews/data-views-range-pill.tsx
+import CloseIcon from "@mui/icons-material/Close";
+import ChevronDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import Box from "@mui/material/Box/index.js";
+import Button from "@mui/material/Button/index.js";
+import Popover from "@mui/material/Popover/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function BoundField({
+  field,
+  label,
+  value,
+  onChange,
+  testId
+}) {
+  const copy = useDataViewsCopy();
+  if (field.kind === "day") {
+    return /* @__PURE__ */ jsx(
+      DayBoundInput,
+      {
+        mask: copy.filters.dayMask,
+        label,
+        value: value == null ? void 0 : String(value),
+        onChange,
+        testId
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    NumberBoundInput,
+    {
+      label,
+      value,
+      unit: field.unit,
+      onChange,
+      testId
+    }
+  );
+}
+function RangeBounds({
+  field,
+  value,
+  onChange,
+  testId
+}) {
+  const copy = useDataViewsCopy();
+  const inverted = isRangeInverted(value);
+  return /* @__PURE__ */ jsxs(Box, { "data-testid": `${testId}-panel`, children: [
+    /* @__PURE__ */ jsx(Box, { sx: { "&:not(:empty)": { mb: 1.5 } }, children: /* @__PURE__ */ jsx(RangePresets, { presets: presetsFor(field, copy), value, onChange, testId }) }),
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1.5 }, children: [
+      /* @__PURE__ */ jsx(
+        BoundField,
+        {
+          field,
+          label: copy.filters.rangeStart,
+          value: value.min,
+          onChange: (min) => onChange({ ...value, min }),
+          testId: `${testId}-min`
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        BoundField,
+        {
+          field,
+          label: copy.filters.rangeEnd,
+          value: value.max,
+          onChange: (max) => onChange({ ...value, max }),
+          testId: `${testId}-max`
+        }
+      )
+    ] }),
+    inverted && /* @__PURE__ */ jsx(
+      Typography,
+      {
+        component: "p",
+        "data-testid": `${testId}-inverted`,
+        sx: { mt: 0.75, fontSize: "0.75rem", color: "error.main" },
+        children: copy.filters.rangeInvalid
+      }
+    ),
+    field.kind === "day" && !inverted && /* @__PURE__ */ jsx(
+      Typography,
+      {
+        component: "p",
+        "data-testid": `${testId}-inclusive`,
+        sx: { mt: 0.75, fontSize: "0.75rem", color: "text.disabled" },
+        children: copy.filters.rangeInclusiveNote
+      }
+    )
+  ] });
+}
+function ClearAffordance({
+  label,
+  onClear,
+  testId
+}) {
+  const copy = useDataViewsCopy();
+  const clear = (event) => {
+    event.stopPropagation();
+    onClear();
+  };
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      component: "span",
+      role: "button",
+      tabIndex: 0,
+      "aria-label": copy.filters.clearRange(label),
+      "data-testid": testId,
+      onClick: clear,
+      onKeyDown: (event) => {
+        if (event.key !== "Enter" && event.key !== " ") return;
+        event.preventDefault();
+        clear(event);
+      },
+      sx: { display: "inline-flex", borderRadius: 999, p: 0.125, "&:hover": { bgcolor: "action.selected" } },
+      children: /* @__PURE__ */ jsx(CloseIcon, { sx: { fontSize: 14 } })
+    }
+  );
+}
+function RangeTrigger({
+  field,
+  value,
+  onChange,
+  onOpen,
+  open,
+  testId
+}) {
+  const active = isRangeSet(value);
+  const inverted = isRangeInverted(value);
+  const tone = inverted ? "error.main" : active ? "primary.main" : "divider";
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "outlined",
+      color: "inherit",
+      size: "small",
+      "data-testid": testId,
+      "aria-haspopup": "dialog",
+      "aria-expanded": open,
+      onClick: (event) => onOpen(event.currentTarget),
+      startIcon: active ? /* @__PURE__ */ jsx(ClearAffordance, { label: field.label, onClear: () => onChange({}), testId: `${testId}-clear-inline` }) : void 0,
+      endIcon: /* @__PURE__ */ jsx(ChevronDownIcon, { sx: { fontSize: 16 } }),
+      sx: {
+        borderRadius: 999,
+        height: 34,
+        px: 1.5,
+        maxWidth: 280,
+        color: inverted ? "error.main" : "text.primary",
+        fontWeight: 600,
+        fontSize: "0.8125rem",
+        textTransform: "none",
+        whiteSpace: "nowrap",
+        borderColor: tone,
+        bgcolor: active ? "action.selected" : "background.paper",
+        "&:hover": {
+          borderColor: active ? tone : "text.primary",
+          bgcolor: active ? "action.selected" : "action.hover"
+        }
+      },
+      children: /* @__PURE__ */ jsx(Box, { component: "span", sx: { overflow: "hidden", textOverflow: "ellipsis" }, children: active ? rangeChipLabel(field, value) : field.label })
+    }
+  );
+}
+function RangePill({
+  field,
+  value,
+  onChange,
+  onOpenChange,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  const [anchor, setAnchor] = useState(null);
+  const active = isRangeSet(value);
+  const testId = `${testIdPrefix}-range-${field.id}`;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      RangeTrigger,
+      {
+        field,
+        value,
+        onChange,
+        onOpen: (element) => {
+          setAnchor(element);
+          onOpenChange?.(true);
+        },
+        open: Boolean(anchor),
+        testId
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Popover,
+      {
+        open: Boolean(anchor),
+        anchorEl: anchor,
+        onClose: () => {
+          setAnchor(null);
+          onOpenChange?.(false);
+        },
+        anchorOrigin: { vertical: "bottom", horizontal: "left" },
+        slotProps: { paper: { sx: { p: 2, mt: 0.5 } } },
+        children: [
+          /* @__PURE__ */ jsx(RangeBounds, { field, value, onChange, testId }),
+          active && /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, mt: 1.5 }, children: [
+            /* @__PURE__ */ jsx(Typography, { component: "span", sx: { fontSize: "0.75rem", color: "text.secondary" }, children: rangeChipLabel(field, value) }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "text",
+                size: "small",
+                onClick: () => onChange({}),
+                "data-testid": `${testId}-clear`,
+                sx: { textTransform: "none" },
+                children: copy.filters.clear
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function PanelRangeField({
+  field,
+  value,
+  onChange,
+  testId
+}) {
+  const copy = useDataViewsCopy();
+  if (field.kind === "day") {
+    return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: [
+      /* @__PURE__ */ jsx(Typography, { component: "span", sx: { fontSize: "0.75rem", fontWeight: 500, color: "text.secondary" }, children: field.label }),
+      /* @__PURE__ */ jsx(RangeBounds, { field, value, onChange, testId })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: [
+    /* @__PURE__ */ jsx(
+      TableFilter.RangeField,
+      {
+        label: field.label,
+        unit: field.unit,
+        value: numericRange(value),
+        onChange: (range) => onChange(range),
+        testId
+      }
+    ),
+    /* @__PURE__ */ jsx(RangePresets, { presets: presetsFor(field, copy), value, onChange, testId })
+  ] });
+}
+
+export {
+  RangeBounds,
+  RangePill,
+  PanelRangeField
+};
+//# sourceMappingURL=chunk-XEE7PLDR.js.map

package/dist/chunk-XFU2S6XT.js

@@ -0,0 +1,136 @@
+import {
+  DataViewsDisplayPanel
+} from "./chunk-ZXLIWOXC.js";
+import {
+  DataViewsExportMenu
+} from "./chunk-R6RVBYTU.js";
+import {
+  renderBulkActions
+} from "./chunk-RPQ3W2C6.js";
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  FilterTrigger
+} from "./chunk-LVCUJ7YU.js";
+import {
+  ContentToolbar
+} from "./chunk-TSPHRZ4U.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  Text
+} from "./chunk-26Z7QWID.js";
+
+// src/components/data-display/DataViews/data-views-toolbar.tsx
+import Divider from "@mui/material/Divider/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function ToolbarRightControls(props) {
+  const { testIdPrefix, matchedCount, totalCount, filterOpen, setFilterOpen } = props;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !props.counterHidden && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Text, { variant: "caption", as: "span", children: /* @__PURE__ */ jsxs(
+        default2,
+        {
+          component: "span",
+          "data-testid": `${testIdPrefix}-counter`,
+          sx: { whiteSpace: "nowrap" },
+          children: [
+            matchedCount,
+            " de ",
+            totalCount
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        Divider,
+        {
+          orientation: "vertical",
+          flexItem: true,
+          sx: { height: 20, alignSelf: "center", mx: 0.5 }
+        }
+      )
+    ] }),
+    props.toolbarRightSlot,
+    /* @__PURE__ */ jsx(
+      DataViewsDisplayPanel,
+      {
+        c: props.c,
+        testIdPrefix,
+        sortKinds: props.sortKinds,
+        view: props.displayView,
+        compact: props.compactControls
+      }
+    ),
+    props.exportConfig && /* @__PURE__ */ jsx(
+      DataViewsExportMenu,
+      {
+        config: props.exportConfig,
+        query: props.c.currentQuery,
+        totalCount: props.totalCount,
+        selectedIds: [...props.c.selectedIds],
+        columns: props.columnOptions.filter((col) => col.visible).map((col) => ({ id: col.id, label: col.label })),
+        testIdPrefix,
+        compact: props.compactControls
+      }
+    ),
+    props.showFilterTrigger !== false && /* @__PURE__ */ jsx(
+      FilterTrigger,
+      {
+        open: filterOpen,
+        onOpenChange: setFilterOpen,
+        activeCount: props.activeFilterCount,
+        "data-testid": `${testIdPrefix}-filters-toggle`
+      }
+    )
+  ] });
+}
+function GridToolbar(props) {
+  const copy = useDataViewsCopy();
+  const { testIdPrefix, selectedRows } = props;
+  return /* @__PURE__ */ jsx(
+    default2,
+    {
+      ref: props.barRef,
+      sx: {
+        borderTop: 1,
+        borderBottom: 1,
+        borderColor: "divider",
+        py: 1.25,
+        mx: { xs: -2, md: -3 },
+        px: { xs: 2, md: 3 }
+      },
+      children: /* @__PURE__ */ jsx(
+        ContentToolbar,
+        {
+          selectAllLabel: copy.selection.selectAll,
+          selectAllText: copy.selection.selectAllOnPage,
+          clearAllText: copy.filters.clearAll,
+          hasSelection: selectedRows.length > 0,
+          selectedCount: selectedRows.length,
+          selectAll: props.selectAll,
+          clearSelection: props.clearSelection,
+          selectAllTestId: `${testIdPrefix}-select-all`,
+          clearAllTestId: `${testIdPrefix}-clear-all`,
+          selectionExtra: props.selectionExtra,
+          actions: renderBulkActions({
+            rowActions: props.rowActions,
+            bulkActions: props.bulkActions,
+            selectedRows,
+            clearSelection: props.clearSelection,
+            testIdPrefix
+          }),
+          leadingControls: props.filterControls,
+          exclusiveSelection: true,
+          rightControls: /* @__PURE__ */ jsx(ToolbarRightControls, { ...props })
+        }
+      )
+    }
+  );
+}
+
+export {
+  GridToolbar
+};
+//# sourceMappingURL=chunk-XFU2S6XT.js.map

package/dist/chunk-XLJJ2ZAP.js

@@ -0,0 +1,240 @@
+import {
+  GridMain
+} from "./chunk-P6IPJYCS.js";
+import {
+  FilterDialog,
+  GridFilterPanel
+} from "./chunk-CXVMD6FE.js";
+import {
+  DataViewsEmpty
+} from "./chunk-77F36LQQ.js";
+import {
+  InlineFilterControls
+} from "./chunk-6RGWDKUL.js";
+import {
+  GridHeaderRow
+} from "./chunk-2QLVUVVR.js";
+import {
+  DataViewsPagination
+} from "./chunk-VR5HDUBK.js";
+import {
+  toOverflowFields,
+  useFilterOverflow
+} from "./chunk-TQ6FPOPD.js";
+import {
+  resolveSelectionExtra
+} from "./chunk-KX75HM5U.js";
+import {
+  ScopeTabsSlot
+} from "./chunk-Y5UCOBQN.js";
+import {
+  ShellToolbar
+} from "./chunk-ZKFYBC6G.js";
+import {
+  togglePillValues
+} from "./chunk-RPQ3W2C6.js";
+import {
+  DataViewsLayoutProvider,
+  useDataViewsLayout
+} from "./chunk-ZPIMPOHV.js";
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  TableFilter
+} from "./chunk-J3JGO6Y6.js";
+import {
+  default as default2
+} from "./chunk-WEBEOBN5.js";
+
+// src/components/data-display/DataViews/data-views-grid-parts.tsx
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function LayoutStateSync({
+  c
+}) {
+  const { layout } = useDataViewsLayout();
+  const stored = c.state.layout;
+  useEffect(() => {
+    if (stored !== layout) c.patch({ layout });
+  }, [layout, stored]);
+  return null;
+}
+function useGridShellFilters({
+  c,
+  inlineFilters,
+  fields,
+  rangeFields,
+  testIdPrefix,
+  alwaysShowSearch,
+  hasExport
+}) {
+  const { state } = c;
+  const [openControls, setOpenControls] = useState(0);
+  const split = useFilterOverflow(
+    toOverflowFields(fields, rangeFields),
+    state.pills,
+    c.ranges,
+    openControls > 0,
+    hasExport
+  );
+  const showInline = inlineFilters;
+  const useModal = false;
+  const inlineVisible = showInline && (alwaysShowSearch || fields.length > 0 || rangeFields.length > 0 || state.search !== "");
+  const filterProps = {
+    testIdPrefix,
+    search: state.search,
+    fields,
+    rangeFields,
+    pills: state.pills,
+    ranges: c.ranges,
+    onSearchChange: (value) => c.patch({ search: value }),
+    // Updater, never the render's `state` — see {@link DataViewStatePatch}.
+    onTogglePill: (fieldId, value, checked) => c.patch(({ pills }) => ({ pills: { ...pills, [fieldId]: togglePillValues(pills[fieldId], value, checked) } })),
+    onChangeRange: (fieldId, range) => c.patch({ ranges: { ...c.ranges, [fieldId]: range } }),
+    onClearField: (fieldId) => c.patch({ pills: { ...state.pills, [fieldId]: [] } }),
+    onClearAll: () => c.patch({ search: "", pills: {}, ranges: {} })
+  };
+  return {
+    showInline,
+    useModal,
+    inlineVisible,
+    filterProps,
+    split,
+    onControlOpenChange: (open) => setOpenControls((count) => Math.max(0, count + (open ? 1 : -1)))
+  };
+}
+function ShellStack({
+  props,
+  filters
+}) {
+  const copy = useDataViewsCopy();
+  const { c, testIdPrefix, dataTestId, scopes = [], emptyState, inlineFilters = false } = props;
+  const { showInline, useModal, inlineVisible, filterProps, split, onControlOpenChange } = filters;
+  const body = /* @__PURE__ */ jsx(
+    DataViewsEmpty,
+    {
+      filtered: c.activeFilterCount > 0 || c.state.search !== "",
+      onClearFilters: () => c.patch({ search: "", pills: {}, ranges: {} }),
+      emptyState,
+      testIdPrefix
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    TableFilter,
+    {
+      copy: copy.tableFilter,
+      open: c.filterOpen,
+      onOpenChange: c.setFilterOpen,
+      hasActiveFilters: c.activeFilterCount > 0,
+      children: /* @__PURE__ */ jsxs(default2, { spacing: 0, "data-testid": dataTestId ? `${dataTestId}-container` : void 0, children: [
+        /* @__PURE__ */ jsx(GridHeaderRow, { title: props.title, headerActions: props.headerActions, testIdPrefix }),
+        /* @__PURE__ */ jsx(
+          ShellToolbar,
+          {
+            c,
+            rows: props.rows,
+            sortKinds: props.sortKinds,
+            displayView: props.displayView,
+            exportConfig: props.exportConfig,
+            filterControls: inlineVisible ? /* @__PURE__ */ jsx(
+              InlineFilterControls,
+              {
+                ...filterProps,
+                split,
+                activeFilterCount: c.activeFilterCount,
+                onControlOpenChange
+              }
+            ) : void 0,
+            barRef: split.barRef,
+            testIdPrefix,
+            rowActions: props.rowActions,
+            bulkActions: props.bulkActions,
+            selectionExtra: resolveSelectionExtra(props),
+            toolbarRightSlot: props.toolbarRightSlot,
+            compactControls: showInline && split.compactControls,
+            counterHidden: showInline && split.counterHidden,
+            showInline
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ScopeTabsSlot,
+          {
+            scopes,
+            scopeFieldId: props.scopeFieldId,
+            board: props.board,
+            value: c.scope,
+            onChange: c.setScope,
+            counts: c.scopeCounts,
+            testIdPrefix
+          }
+        ),
+        /* @__PURE__ */ jsxs(TableFilter.Layout, { children: [
+          /* @__PURE__ */ jsxs(TableFilter.Main, { children: [
+            /* @__PURE__ */ jsx(
+              GridMain,
+              {
+                c,
+                getRowId: props.getRowId,
+                renderCard: props.renderCard,
+                renderListRow: props.renderListRow,
+                listGroup: props.listGroup,
+                board: props.board,
+                dataTestId,
+                testIdPrefix,
+                emptyState: body
+              }
+            ),
+            /* @__PURE__ */ jsx(DataViewsPagination, { c, testIdPrefix })
+          ] }),
+          inlineFilters ? null : /* @__PURE__ */ jsx(GridFilterPanel, { ...filterProps })
+        ] }),
+        useModal && /* @__PURE__ */ jsx(FilterDialog, { open: c.filterOpen, onClose: () => c.setFilterOpen(false), ...filterProps })
+      ] })
+    }
+  );
+}
+function GridShell(props) {
+  const {
+    c,
+    fields,
+    rangeFields,
+    testIdPrefix,
+    renderCard,
+    renderListRow,
+    board,
+    defaultLayout,
+    ignoreStoredLayout,
+    inlineFilters = false,
+    alwaysShowSearch = false
+  } = props;
+  const filters = useGridShellFilters({
+    c,
+    inlineFilters,
+    fields,
+    rangeFields,
+    testIdPrefix,
+    alwaysShowSearch,
+    hasExport: props.exportConfig !== void 0
+  });
+  return /* @__PURE__ */ jsxs(
+    DataViewsLayoutProvider,
+    {
+      canUseCards: Boolean(renderCard),
+      canUseList: Boolean(renderListRow),
+      canUseBoard: Boolean(board && renderCard),
+      defaultLayout,
+      ignoreStoredLayout,
+      viewLayout: c.state.layout,
+      children: [
+        /* @__PURE__ */ jsx(LayoutStateSync, { c }),
+        /* @__PURE__ */ jsx(ShellStack, { props, filters })
+      ]
+    }
+  );
+}
+
+export {
+  GridShell
+};
+//# sourceMappingURL=chunk-XLJJ2ZAP.js.map