@12-apps/ui 1.5.2 → 1.6.1

package/src/components/data-display/DataViews/data-views-more-filters.tsx

@@ -0,0 +1,300 @@
+"use client";
+
+import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
+import TuneRoundedIcon from "@mui/icons-material/TuneRounded";
+import { Checkbox, Popover } from "@mui/material";
+import { useState } from "react";
+
+import { MultiSelectDropdown } from "../../layout/ContentToolbar";
+import { Button } from "../../form/Button";
+import { Box } from "../../../mui/Box";
+import { Text } from "../../typography/Text";
+
+import type { OverflowField } from "./data-views-overflow";
+import { isRangeSet } from "./data-views-range-values";
+import type { RangeValue } from "./data-views-types";
+
+/**
+ * "MAIS" — the filter overflow.
+ *
+ * It holds ONLY the fields that had no room on the toolbar, which is why its
+ * badge counts hidden FIELDS rather than active filters: an applied filter
+ * keeps its inline control (see `useFilterOverflow`), because a filter you
+ * cannot see is a filter you forget you set, and then the list is "wrong" for
+ * a reason nothing on screen explains.
+ *
+ * A field with one or two options renders FLAT — inside a panel there is no
+ * space to win back, and two labelled checkboxes are faster than a dropdown
+ * needing a second click. Past that it becomes a {@link MultiSelectDropdown}:
+ * see `INLINE_OPTION_LIMIT`.
+ */
+
+interface MoreFiltersProps<T extends Record<string, unknown>> {
+  fields: OverflowField<T>[];
+  pills: Record<string, string[]>;
+  ranges: Record<string, RangeValue>;
+  onTogglePill: (fieldId: string, value: string, checked: boolean) => void;
+  onChangeRange: (fieldId: string, range: RangeValue) => void;
+  testIdPrefix: string;
+}
+
+/**
+ * Above this many options a field is a DROPDOWN rather than a flat row of
+ * checkboxes. Two options cost two lines and read faster laid out; a "Cliente"
+ * with a dozen turns the panel into a scrolling wall and buries every field
+ * under it, which is exactly what the overflow was meant to avoid.
+ */
+const INLINE_OPTION_LIMIT = 2;
+
+/** One overflowed pill: its options as checkboxes, all visible at once. */
+function OverflowPill<T extends Record<string, unknown>>({
+  field,
+  values,
+  onToggle,
+  onClear,
+  testIdPrefix,
+}: {
+  field: OverflowField<T>;
+  values: string[];
+  onToggle: (value: string, checked: boolean) => void;
+  onClear: () => void;
+  testIdPrefix: string;
+}): React.JSX.Element {
+  const options = field.pill?.options ?? [];
+  if (options.length > INLINE_OPTION_LIMIT) {
+    return (
+      <MultiSelectDropdown
+        label={field.pill?.label ?? field.label}
+        options={options}
+        selected={new Set(values)}
+        onToggle={onToggle}
+        onClear={onClear}
+        allLabel="Todas"
+        searchable={options.length > 6 ? true : undefined}
+        searchPlaceholder="Buscar…"
+        noResultsLabel="Nenhum resultado"
+        layout="pill"
+        data-testid={`${testIdPrefix}-more-${field.id}`}
+      />
+    );
+  }
+  return (
+    <Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.75 }}>
+      {(field.pill?.options ?? []).map((option) => {
+        const checked = values.includes(option.value);
+        return (
+          <Box
+            key={option.value}
+            component="label"
+            data-testid={`${testIdPrefix}-more-${field.id}-${option.value}`}
+            sx={{
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 0.25,
+              pr: 1,
+              border: 1,
+              borderStyle: "solid",
+              borderColor: checked ? "primary.main" : "divider",
+              bgcolor: checked ? "action.selected" : "transparent",
+              borderRadius: 5,
+              cursor: "pointer",
+              fontSize: "0.8125rem",
+              color: checked ? "primary.main" : "text.secondary",
+            }}
+          >
+            <Checkbox
+              size="small"
+              checked={checked}
+              onChange={(event) => onToggle(option.value, event.target.checked)}
+              inputProps={{ "aria-label": `${field.label}: ${option.label}` }}
+            />
+            {option.label}
+          </Box>
+        );
+      })}
+    </Box>
+  );
+}
+
+/** One overflowed range: its two bounds, as the same inputs the pill uses. */
+function OverflowRange<T extends Record<string, unknown>>({
+  field,
+  value,
+  onChange,
+  testIdPrefix,
+}: {
+  field: OverflowField<T>;
+  value: RangeValue;
+  onChange: (range: RangeValue) => void;
+  testIdPrefix: string;
+}): React.JSX.Element {
+  const day = field.range?.kind === "day";
+  const set = (bound: "min" | "max", raw: string): void => {
+    const next: RangeValue = { ...value };
+    if (raw === "") delete next[bound];
+    else next[bound] = day ? raw : Number(raw);
+    onChange(next);
+  };
+  return (
+    <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+      {(["min", "max"] as const).map((bound, index) => (
+        <Box key={bound} sx={{ display: "contents" }}>
+          {index === 1 && <Box component="span" sx={{ color: "text.disabled" }}>–</Box>}
+          <Box
+            component="input"
+            type={day ? "date" : "number"}
+            placeholder={bound === "min" ? "de" : "até"}
+            aria-label={`${field.label} ${bound === "min" ? "de" : "até"}`}
+            data-testid={`${testIdPrefix}-more-${field.id}-${bound}`}
+            value={value[bound] ?? ""}
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) => set(bound, event.target.value)}
+            sx={{
+              width: "100%",
+              px: 1,
+              py: 0.75,
+              border: 1,
+              borderStyle: "solid",
+              borderColor: "divider",
+              borderRadius: 1,
+              font: "inherit",
+              fontSize: "0.8125rem",
+            }}
+          />
+        </Box>
+      ))}
+    </Box>
+  );
+}
+
+/** The trigger, badged with how many fields had no room on the bar. */
+function MoreTrigger({
+  count,
+  onOpen,
+  testIdPrefix,
+}: {
+  count: number;
+  onOpen: (anchor: HTMLElement) => void;
+  testIdPrefix: string;
+}): React.JSX.Element {
+  return (
+    <Button
+      variant="outline"
+      size="sm"
+      color="neutral"
+      onClick={(event) => onOpen(event.currentTarget as HTMLElement)}
+      dataTestId={`${testIdPrefix}-more-filters`}
+      aria-label={`Mais filtros: ${count} sem espaço na barra`}
+    >
+      <Box component="span" sx={{ display: "inline-flex", alignItems: "center", gap: 0.5 }}>
+        <TuneRoundedIcon fontSize="small" />
+        <Box component="span" sx={{ display: { xs: "none", sm: "inline" } }}>
+          Mais
+        </Box>
+        <Box
+          component="span"
+          sx={{ px: 0.75, borderRadius: 5, bgcolor: "action.selected", fontSize: "0.6875rem" }}
+        >
+          {count}
+        </Box>
+        <KeyboardArrowDownRoundedIcon fontSize="small" />
+      </Box>
+    </Button>
+  );
+}
+
+/** One labelled group in the panel: the field's name, then its control. */
+function MoreGroup<T extends Record<string, unknown>>({
+  field,
+  pills,
+  ranges,
+  onTogglePill,
+  onChangeRange,
+  testIdPrefix,
+}: {
+  field: OverflowField<T>;
+} & Omit<MoreFiltersProps<T>, "fields">): React.JSX.Element {
+  return (
+    <Box sx={{ mb: 1.5, "&:last-of-type": { mb: 0 } }}>
+      <Text variant="caption" as="p">
+        <Box component="span" sx={{ display: "block", mb: 0.5, color: "text.secondary" }}>
+          {field.label}
+          {field.group === "range" && isRangeSet(ranges[field.id] ?? {}) ? " •" : ""}
+        </Box>
+      </Text>
+      {field.group === "pill" ? (
+        <OverflowPill
+          field={field}
+          values={pills[field.id] ?? []}
+          onToggle={(value, checked) => onTogglePill(field.id, value, checked)}
+          onClear={() => (pills[field.id] ?? []).forEach((v) => onTogglePill(field.id, v, false))}
+          testIdPrefix={testIdPrefix}
+        />
+      ) : (
+        <OverflowRange
+          field={field}
+          value={ranges[field.id] ?? {}}
+          onChange={(range) => onChangeRange(field.id, range)}
+          testIdPrefix={testIdPrefix}
+        />
+      )}
+    </Box>
+  );
+}
+
+/** The panel's heading: what these are, and why they are in here. */
+function MoreHeading(): React.JSX.Element {
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        gap: 1,
+        px: 1.5,
+        py: 1,
+        borderBottom: 1,
+        borderColor: "divider",
+      }}
+    >
+      <Text variant="caption" as="span">
+        <Box component="span" sx={{ textTransform: "uppercase", letterSpacing: 0.5, color: "text.disabled" }}>
+          Mais filtros
+        </Box>
+      </Text>
+      <Text variant="caption" as="span">
+        <Box component="span" sx={{ ml: "auto", color: "text.disabled" }}>
+          sem espaço na barra
+        </Box>
+      </Text>
+    </Box>
+  );
+}
+
+/** The overflow trigger + panel. Renders nothing when everything fits. */
+export function MoreFilters<T extends Record<string, unknown>>({
+  fields,
+  ...rest
+}: MoreFiltersProps<T>): React.JSX.Element | null {
+  const [anchor, setAnchor] = useState<HTMLElement | null>(null);
+  if (fields.length === 0) return null;
+  return (
+    <>
+      <MoreTrigger count={fields.length} onOpen={setAnchor} testIdPrefix={rest.testIdPrefix} />
+      <Popover
+        open={Boolean(anchor)}
+        anchorEl={anchor}
+        onClose={() => setAnchor(null)}
+        anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
+        slotProps={{ paper: { sx: { width: 300, maxWidth: "calc(100vw - 32px)" } } }}
+      >
+        <Box data-testid={`${rest.testIdPrefix}-more-panel`}>
+          <MoreHeading />
+          <Box sx={{ maxHeight: 320, overflowY: "auto", p: 1.5 }}>
+            {fields.map((field) => (
+              <MoreGroup key={field.id} field={field} {...rest} />
+            ))}
+          </Box>
+        </Box>
+      </Popover>
+    </>
+  );
+}

package/src/components/data-display/DataViews/data-views-overflow.ts

@@ -0,0 +1,302 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+
+import type { FilterFieldConfig, RangeFieldConfig, RangeValue } from "./data-views-types";
+
+/**
+ * PROGRESSIVE COLLAPSE — which filter controls fit on the toolbar, measured.
+ *
+ * Two rules, and both come from watching the all-or-nothing version fail:
+ *
+ * 1. Controls shed ONE AT A TIME into an overflow, never all at once. With four
+ *    filters and room for three, hiding all four throws away the room that was
+ *    there.
+ * 2. An APPLIED filter never hides. Applied controls take the visible slots
+ *    first, so the overflow badge counts hidden FIELDS and never active
+ *    filters — a filter you cannot see is a filter you forget you set, and then
+ *    the list is "wrong" for reasons nothing on screen explains.
+ *
+ * It MEASURES rather than picking a breakpoint, which is what
+ * `FILTERS-CONTRACT.md` asks for: pages declare different numbers of filters
+ * with different label lengths, and the same page collapses at a different
+ * width in another language. A shared breakpoint is wrong for at least one
+ * table by construction.
+ *
+ * Collapsing is presentation only — nothing here emits a query, drops a filter
+ * or changes a rendered row.
+ */
+
+/** A filter control on the bar: a multi-select pill or a min/max range. */
+export interface OverflowField<T extends Record<string, unknown>> {
+  id: string;
+  label: string;
+  /** Which control it is — the caller renders the right one. */
+  group: "pill" | "range";
+  pill?: FilterFieldConfig<T>;
+  range?: RangeFieldConfig<T>;
+}
+
+/** What the caller renders inline, and what goes behind "Mais". */
+export interface OverflowSplit<T extends Record<string, unknown>> {
+  inline: OverflowField<T>[];
+  overflow: OverflowField<T>[];
+  /**
+   * Step 2 — Exibir/Exportar drop their text labels and become icons.
+   * Cheap: both keep their icon, their tooltip and their position.
+   */
+  compactControls: boolean;
+  /**
+   * Step 4 — the search collapses to a magnifier that expands on click.
+   * The most expensive step, so it is taken last: the search is the one
+   * control on the bar that cannot be guessed from an icon's position.
+   */
+  searchCollapsed: boolean;
+  /** Attach to the toolbar row being measured. */
+  barRef: React.RefObject<HTMLDivElement | null>;
+}
+
+/**
+ * Rough rendered width of a control, in px.
+ *
+ * An ESTIMATE from the label text rather than a real measurement, deliberately:
+ * measuring the true width needs every control mounted first, and mounting them
+ * to decide whether to mount them is the layout thrash this hook exists to
+ * avoid. The estimate only has to rank controls and find the cut point — being
+ * a few px out moves the cut by at most one control, and the overflow catches it.
+ */
+function estimateWidth(text: string, extra: number): number {
+  /**
+   * ~7.6px per character at the toolbar's font size, plus 76px of chrome:
+   * horizontal padding, the border, and the dropdown chevron. The chrome used
+   * to be 52, which under-priced every control by roughly a chevron's width —
+   * six of them then "fitted" a row they overflowed, and because they are flex
+   * children the row paid for it by squeezing labels to "D…" and "V…" rather
+   * than by shedding a control into the overflow.
+   *
+   * Deliberately generous: over-pricing sheds one control too early, which the
+   * "Mais" button absorbs invisibly. Under-pricing breaks the line.
+   */
+  return Math.round(text.length * 7.6) + 76 + extra;
+}
+
+/** Is a range bounded at either end? */
+function isRangeSet(range: RangeValue | undefined): boolean {
+  return Boolean(range && (range.min !== undefined || range.max !== undefined));
+}
+
+/** The label a pill actually renders, which is what decides its width. */
+function pillText<T extends Record<string, unknown>>(field: OverflowField<T>, values: string[]): string {
+  if (values.length === 0) return field.label;
+  if (values.length === 1) {
+    const option = field.pill?.options.find((entry) => entry.value === values[0]);
+    return `${field.label}: ${option?.label ?? values[0]}`;
+  }
+  return `${field.label}: ${values.length}`;
+}
+
+/** Every declared control, pills first, in the order the bar renders them. */
+export function toOverflowFields<T extends Record<string, unknown>>(
+  fields: FilterFieldConfig<T>[],
+  rangeFields: RangeFieldConfig<T>[],
+): OverflowField<T>[] {
+  return [
+    ...fields.map((pill) => ({ id: pill.id, label: pill.label, group: "pill" as const, pill })),
+    ...rangeFields.map((range) => ({ id: range.id, label: range.label, group: "range" as const, range })),
+  ];
+}
+
+/** Fixed toolbar furniture the filters have to fit around, in px. */
+const RESERVED = {
+  /** The search box never shrinks below this. */
+  search: 200,
+  /** The "N de N" counter. */
+  counter: 96,
+  /** Exibir + Exportar WITH their text labels. */
+  right: 216,
+  /** The same two controls as icons only — step 2 of the ladder. */
+  rightCompact: 96,
+  /** The "Mais" button, only charged when there IS an overflow. */
+  overflowButton: 104,
+  /** Gaps + the row's own padding. */
+  chrome: 64,
+} as const;
+
+/** The gap between two controls. */
+const GAP = 8;
+
+/** Observe the bar's width. Returns 0 until the first measurement lands. */
+function useBarWidth(): { barRef: React.RefObject<HTMLDivElement | null>; width: number } {
+  const barRef = useRef<HTMLDivElement | null>(null);
+  const [width, setWidth] = useState(0);
+  useEffect(() => {
+    const element = barRef.current;
+    // jsdom has no ResizeObserver, and neither does an SSR pass — with no
+    // measurement the hook keeps every control inline, which is the honest
+    // fallback: nothing is hidden behind a menu nobody can see.
+    if (!element || typeof ResizeObserver === "undefined") return undefined;
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry) setWidth(entry.contentRect.width);
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+  return { barRef, width };
+}
+
+/** Is this control carrying a value the operator set? */
+function isActiveField<T extends Record<string, unknown>>(
+  field: OverflowField<T>,
+  pills: Record<string, string[]>,
+  ranges: Record<string, RangeValue>,
+): boolean {
+  return field.group === "pill"
+    ? (pills[field.id]?.length ?? 0) > 0
+    : isRangeSet(ranges[field.id]);
+}
+
+/** Estimated rendered width of one control at its CURRENT value. */
+function fieldWidth<T extends Record<string, unknown>>(
+  field: OverflowField<T>,
+  pills: Record<string, string[]>,
+  ranges: Record<string, RangeValue>,
+): number {
+  if (field.group === "pill") return estimateWidth(pillText(field, pills[field.id] ?? []), 0);
+  // A bounded range renders two number inputs beside its label.
+  return estimateWidth(field.label, isRangeSet(ranges[field.id]) ? 100 : 0);
+}
+
+/** What one split costs on the bar, so the ladder below can price the next step. */
+type Split<T extends Record<string, unknown>> = {
+  inline: OverflowField<T>[];
+  overflow: OverflowField<T>[];
+  /** Width the surviving inline controls occupy, incl. the "Mais" button. */
+  used: number;
+};
+
+/** Step 1 — shed filter controls into the overflow. Pure. */
+function splitFilters<T extends Record<string, unknown>>(
+  all: OverflowField<T>[],
+  pills: Record<string, string[]>,
+  ranges: Record<string, RangeValue>,
+  width: number,
+): Split<T> {
+  const none: OverflowField<T>[] = [];
+  const widthOf = (field: OverflowField<T>): number => fieldWidth(field, pills, ranges);
+  const cost = (fields: OverflowField<T>[]): number =>
+    fields.reduce((sum, field) => sum + widthOf(field) + GAP, 0);
+  const active = all.filter((field) => isActiveField(field, pills, ranges));
+  const idle = all.filter((field) => !isActiveField(field, pills, ranges));
+
+  // AN APPLIED FILTER NEVER HIDES — it is not merely ranked first, it is
+  // exempt. Applying a value LENGTHENS a control ("Método: Pix"), so ranking
+  // alone still loses the one filter the operator just set whenever it no
+  // longer fits on its own. The bar wraps; a filter you cannot see does not
+  // announce itself at all.
+  let available =
+    width - RESERVED.search - RESERVED.counter - RESERVED.right - RESERVED.chrome - cost(active);
+  if (idle.length === 0 || cost(idle) <= available) {
+    return { inline: all, overflow: none, used: cost(all) };
+  }
+
+  // There IS an overflow, so its button now costs room too.
+  available -= RESERVED.overflowButton;
+  const keep = new Set(active.map((field) => field.id));
+  for (const field of idle) {
+    const next = widthOf(field) + GAP;
+    if (next > available) break;
+    available -= next;
+    keep.add(field.id);
+  }
+  // Rendered in the DECLARED order, not the applied-first one: which controls
+  // are visible may change with the width, but the ones that stay must not
+  // reshuffle under the operator's cursor.
+  const inline = all.filter((field) => keep.has(field.id));
+  return {
+    inline,
+    overflow: all.filter((field) => !keep.has(field.id)),
+    used: cost(inline) + RESERVED.overflowButton,
+  };
+}
+
+/**
+ * THE DEGRADATION LADDER — cheapest loss first, and each rung taken only if
+ * the one before it did not free enough:
+ *
+ *   1. filter controls move into the "Mais" overflow   (`splitFilters`)
+ *   2. Exibir / Exportar drop their text labels        (`compactControls`)
+ *   3. the search shrinks toward its minimum           (CSS: it is `flex: 1`)
+ *   4. the search itself collapses to an icon          (`searchCollapsed`)
+ *
+ * Step 3 needs no flag — the search is a flex child, so it gives up width on
+ * its own until it hits `RESERVED.search`. The flags mark the two steps that
+ * change what is RENDERED rather than how wide it is.
+ *
+ * Measured against what is CURRENTLY on the bar, never a breakpoint: a
+ * two-filter page and a five-filter page would otherwise collapse at the same
+ * width, and only one of them would be right.
+ */
+function computeSplit<T extends Record<string, unknown>>(
+  all: OverflowField<T>[],
+  pills: Record<string, string[]>,
+  ranges: Record<string, RangeValue>,
+  width: number,
+): Omit<OverflowSplit<T>, "barRef"> {
+  // Unmeasured (SSR, or jsdom without a ResizeObserver) ⇒ degrade nothing.
+  if (width === 0) {
+    return {
+      inline: all,
+      overflow: [],
+      compactControls: false,
+      searchCollapsed: false,
+    };
+  }
+  const { inline, overflow, used } = splitFilters(all, pills, ranges, width);
+  const base = width - used - RESERVED.chrome;
+
+  // Would the search still make its minimum with the labels on?
+  const compactControls = base - RESERVED.counter - RESERVED.right < RESERVED.search;
+  const rightCost = compactControls ? RESERVED.rightCompact : RESERVED.right;
+  // …and with them off?
+  const searchCollapsed = base - RESERVED.counter - rightCost < RESERVED.search;
+
+  return { inline, overflow, compactControls, searchCollapsed };
+}
+
+/**
+ * Split the declared filter controls into what fits and what goes behind
+ * "Mais", measured against the live toolbar width.
+ *
+ * Cached on a SIGNATURE rather than by `useMemo` over the inputs: hosts declare
+ * their fields inline, so `all` is a fresh array on every render while the
+ * configuration is unchanged, and a reference-keyed memo would never hit.
+ */
+export function useFilterOverflow<T extends Record<string, unknown>>(
+  all: OverflowField<T>[],
+  pills: Record<string, string[]>,
+  ranges: Record<string, RangeValue>,
+  /**
+   * A filter control is open — hold the current answer until it closes.
+   *
+   * Applying a filter changes that control's LABEL ("Valor" becomes "Valor: ≥
+   * R$ 1"), which changes its measured width, which re-runs the whole split
+   * while its popover is open on top of it. Measured: setting a minimum moved
+   * the trigger 192px left, took the popover with it, and pushed two other
+   * controls into a newly-appeared "Mais 2" — so reaching for the second bound
+   * meant chasing the control across the row. Nobody sets a range that way.
+   *
+   * Frozen only for the duration: closing re-measures against the new labels,
+   * so the row still ends up correct, it just does not rearrange under a hand
+   * that is mid-edit.
+   */
+  frozen = false,
+): OverflowSplit<T> {
+  const { barRef, width } = useBarWidth();
+  const signature = JSON.stringify({ ids: all.map((field) => field.id), pills, ranges, width });
+  const cache = useRef<{ signature: string; split: ReturnType<typeof computeSplit<T>> } | null>(null);
+  if (cache.current === null || (!frozen && cache.current.signature !== signature)) {
+    cache.current = { signature, split: computeSplit(all, pills, ranges, width) };
+  }
+  return { ...cache.current.split, barRef };
+}

package/src/components/data-display/DataViews/data-views-preview.ts

@@ -11,6 +11,14 @@ import type {
  */
 interface ViewStateDescription {
   filters: string[];
+  /**
+   * The columns this view HIDES, not the ones it shows.
+   *
+   * A view that hides three of eleven columns listed eight names, which is a
+   * wall of text stating the default. What the operator needs to check before
+   * saving is what this view CHANGES — and for columns, the change is the
+   * hiding.
+   */
   columns: string[];
   sort: string[];
 }
@@ -41,13 +49,13 @@ export function describeViewState<T extends Record<string, unknown>>(
   }
 
   const hideable = columns.filter((col) => col.hideable !== false);
-  const columnsShown = hideable
-    .filter((col) => state.visibleColumns.includes(col.id))
+  const columnsHidden = hideable
+    .filter((col) => !state.visibleColumns.includes(col.id))
     .map((col) => columnLabel(columns, col.id));
 
   const sort = state.sortBy
     .filter((entry) => entry.dir)
     .map((entry) => `${columnLabel(columns, entry.id)} (${entry.dir === "asc" ? "crescente" : "decrescente"})`);
 
-  return { filters, columns: columnsShown, sort };
+  return { filters, columns: columnsHidden, sort };
 }