@12-apps/ui 6.92.0 → 6.92.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (52) hide show
  1. package/dist/_internal/components/data-display/DataViews/DataViewsGrid.js +10 -10
  2. package/dist/_internal/components/data-display/DataViews/DataViewsTableBase.js +11 -11
  3. package/dist/_internal/components/data-display/DataViews/data-views-filter-panel.js +5 -5
  4. package/dist/_internal/components/data-display/DataViews/data-views-grid-parts.js +9 -9
  5. package/dist/_internal/components/data-display/DataViews/data-views-inline-bar.js +7 -7
  6. package/dist/_internal/components/data-display/DataViews/data-views-more-fields.js +5 -5
  7. package/dist/_internal/components/data-display/DataViews/data-views-more-filters.js +6 -6
  8. package/dist/_internal/components/data-display/DataViews/data-views-range-bounds.js +2 -2
  9. package/dist/_internal/components/data-display/DataViews/data-views-range-calendar.js +1 -1
  10. package/dist/_internal/components/data-display/DataViews/data-views-range-pill.js +4 -4
  11. package/dist/_internal/components/data-display/DataViews/data-views-range-summary.js +1 -1
  12. package/dist/{chunk-3OHZAZEE.js → chunk-3WYEENUH.js} +9 -4
  13. package/dist/chunk-3WYEENUH.js.map +1 -0
  14. package/dist/{chunk-X3GD3TFI.js → chunk-BXZMV6QC.js} +3 -3
  15. package/dist/{chunk-FORAVDJF.js → chunk-FC7UCFFA.js} +35 -7
  16. package/dist/chunk-FC7UCFFA.js.map +1 -0
  17. package/dist/{chunk-CKQOYPH3.js → chunk-FYUNROLW.js} +2 -2
  18. package/dist/{chunk-MICX23P4.js → chunk-HRES2S3Q.js} +85 -8
  19. package/dist/chunk-HRES2S3Q.js.map +1 -0
  20. package/dist/{chunk-AI7XWBNG.js → chunk-IEUVP6UV.js} +3 -3
  21. package/dist/{chunk-R4LCPPKA.js → chunk-OCGPOACB.js} +2 -2
  22. package/dist/{chunk-HS662RLW.js → chunk-RZWU2KYP.js} +2 -2
  23. package/dist/{chunk-MZAYIG2I.js → chunk-VCJ72ODU.js} +2 -2
  24. package/dist/chunk-WLDP7C4K.js +44 -0
  25. package/dist/chunk-WLDP7C4K.js.map +1 -0
  26. package/dist/{chunk-W2KOP27S.js → chunk-ZVHHFLYY.js} +2 -2
  27. package/dist/data-display/DataViews.js +11 -11
  28. package/dist/types/components/data-display/DataViews/data-views-range-bounds.d.ts +6 -1
  29. package/dist/types/components/data-display/DataViews/data-views-range-bounds.d.ts.map +1 -1
  30. package/dist/types/components/data-display/DataViews/data-views-range-calendar.d.ts +13 -1
  31. package/dist/types/components/data-display/DataViews/data-views-range-calendar.d.ts.map +1 -1
  32. package/dist/types/components/data-display/DataViews/data-views-range-pill.d.ts.map +1 -1
  33. package/dist/types/components/data-display/DataViews/data-views-range-summary.d.ts +4 -5
  34. package/dist/types/components/data-display/DataViews/data-views-range-summary.d.ts.map +1 -1
  35. package/package.json +1 -1
  36. package/src/components/data-display/DataViews/RESPONSIVE-BEHAVIOUR.md +8 -4
  37. package/src/components/data-display/DataViews/data-views-range-bounds.tsx +57 -3
  38. package/src/components/data-display/DataViews/data-views-range-calendar.tsx +122 -8
  39. package/src/components/data-display/DataViews/data-views-range-pill.tsx +5 -0
  40. package/src/components/data-display/DataViews/data-views-range-summary.tsx +9 -22
  41. package/dist/chunk-3OHZAZEE.js.map +0 -1
  42. package/dist/chunk-FORAVDJF.js.map +0 -1
  43. package/dist/chunk-J2AVWIMM.js +0 -60
  44. package/dist/chunk-J2AVWIMM.js.map +0 -1
  45. package/dist/chunk-MICX23P4.js.map +0 -1
  46. /package/dist/{chunk-X3GD3TFI.js.map → chunk-BXZMV6QC.js.map} +0 -0
  47. /package/dist/{chunk-CKQOYPH3.js.map → chunk-FYUNROLW.js.map} +0 -0
  48. /package/dist/{chunk-AI7XWBNG.js.map → chunk-IEUVP6UV.js.map} +0 -0
  49. /package/dist/{chunk-R4LCPPKA.js.map → chunk-OCGPOACB.js.map} +0 -0
  50. /package/dist/{chunk-HS662RLW.js.map → chunk-RZWU2KYP.js.map} +0 -0
  51. /package/dist/{chunk-MZAYIG2I.js.map → chunk-VCJ72ODU.js.map} +0 -0
  52. /package/dist/{chunk-W2KOP27S.js.map → chunk-ZVHHFLYY.js.map} +0 -0
@@ -71,13 +71,90 @@ function openingMonth(value, months) {
71
71
  const anchor = end ?? /* @__PURE__ */ new Date();
72
72
  return new Date(anchor.getFullYear(), anchor.getMonth() - (months > 1 ? 1 : 0), 1);
73
73
  }
74
+ function HintLine({
75
+ text,
76
+ isWindow,
77
+ canClear,
78
+ onClear,
79
+ testId
80
+ }) {
81
+ const clear = useDataViewsCopy().filters.clear;
82
+ return /* @__PURE__ */ jsxs(
83
+ Box,
84
+ {
85
+ "data-testid": `${testId}-calendar-line`,
86
+ sx: {
87
+ display: "flex",
88
+ alignItems: "center",
89
+ justifyContent: "space-between",
90
+ gap: 2,
91
+ mt: { xs: 0.25, sm: 1 },
92
+ minHeight: canClear ? sxRem(40) : void 0,
93
+ fontSize: sxRem(12),
94
+ lineHeight: 1.5
95
+ },
96
+ children: [
97
+ /* @__PURE__ */ jsx(
98
+ Typography,
99
+ {
100
+ component: "p",
101
+ "aria-live": "polite",
102
+ "data-testid": `${testId}-calendar-hint`,
103
+ title: text,
104
+ noWrap: true,
105
+ sx: { m: 0, minWidth: 0, font: "inherit", color: isWindow ? "text.primary" : "text.secondary" },
106
+ children: text
107
+ }
108
+ ),
109
+ onClear && /* @__PURE__ */ jsx(
110
+ Box,
111
+ {
112
+ component: "button",
113
+ type: "button",
114
+ onClick: (event) => onClear(event.detail === 0),
115
+ "data-testid": `${testId}-clear`,
116
+ sx: {
117
+ flexShrink: 0,
118
+ display: "inline-flex",
119
+ alignItems: "center",
120
+ minHeight: sxRem(40),
121
+ border: 0,
122
+ bgcolor: "transparent",
123
+ cursor: "pointer",
124
+ font: "inherit",
125
+ fontWeight: 600,
126
+ color: "primary.main",
127
+ px: 1,
128
+ py: 0,
129
+ // Its text lines up with the boxes' right edge; the side padding
130
+ // reaches into the popover's own.
131
+ mr: -1,
132
+ borderRadius: 1,
133
+ "&:hover": { bgcolor: "action.hover" },
134
+ // The theme's focus ring for a keyboard, none for a tap.
135
+ "&:focus": { outline: "none" },
136
+ "&:focus-visible": {
137
+ outline: (theme) => `${rem(theme, 2)} solid`,
138
+ outlineColor: "primary.main",
139
+ outlineOffset: sxRem(1)
140
+ }
141
+ },
142
+ children: clear
143
+ }
144
+ )
145
+ ]
146
+ }
147
+ );
148
+ }
74
149
  function DayRangeCalendar({
75
150
  fieldLabel,
76
151
  value,
77
152
  onChange,
78
153
  months,
79
154
  viewKey,
80
- testId
155
+ testId,
156
+ summary,
157
+ onClear
81
158
  }) {
82
159
  const copy = useDataViewsCopy().filters.dayCalendar ?? EN_US_DATA_VIEWS_COPY.filters.dayCalendar;
83
160
  const range = rangeOf(value);
@@ -103,13 +180,13 @@ function DayRangeCalendar({
103
180
  viewKey
104
181
  ),
105
182
  /* @__PURE__ */ jsx(
106
- Typography,
183
+ HintLine,
107
184
  {
108
- component: "p",
109
- "aria-live": "polite",
110
- "data-testid": `${testId}-calendar-hint`,
111
- sx: { mt: { xs: 0.25, sm: 1 }, fontSize: sxRem(12), color: "text.secondary" },
112
- children: waitingForEnd ? copy.pickEnd : copy.pickStart
185
+ text: waitingForEnd ? copy.pickEnd : summary ?? copy.pickStart,
186
+ isWindow: !waitingForEnd && summary !== void 0,
187
+ canClear: onClear !== void 0,
188
+ onClear: summary === void 0 ? void 0 : onClear,
189
+ testId
113
190
  }
114
191
  )
115
192
  ] });
@@ -119,4 +196,4 @@ export {
119
196
  rangeFromCalendar,
120
197
  DayRangeCalendar
121
198
  };
122
- //# sourceMappingURL=chunk-MICX23P4.js.map
199
+ //# sourceMappingURL=chunk-HRES2S3Q.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/data-display/DataViews/data-views-range-calendar.tsx"],"sourcesContent":["'use client';\n\n/**\n * The range calendar under a day filter's `De`/`Até` boxes (FUT-4144).\n *\n * The owner picked it ALWAYS OPEN (option B of the prototype): a period is\n * three taps — open the filter, the first day, the last day — against five for\n * a calendar button in each box and four for a link to a separate sheet. It\n * sits BELOW the boxes, with no button of its own, so the typed path is not one\n * keystroke longer than it was.\n *\n * The boxes and the calendar are two views of ONE range: a tap writes the\n * boxes, a typed day moves and repaints the calendar, an impossible typed day\n * (which writes nothing) leaves it alone, and \"Limpar\" empties both.\n *\n * It is `Calendar` in `selectionMode=\"range\"`, the same one `DateRangePicker`\n * mounts — not a second calendar. Its own rule picks the period: the first tap\n * starts it, the second closes it, and a second tap BEFORE the first swaps the\n * two, so the boxes never show a period backwards.\n */\nimport Box from '@mui/material/Box/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport React from 'react';\n\nimport { EN_US_DATA_VIEWS_COPY } from '../../../en-US.data-display';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport { rem, sxRem } from '../../../tokens/relative';\nimport { Calendar, type DateRange } from '../../form/Calendar';\nimport { toDayString, toLocalDay } from '../../form/DateRangePicker/DateRangePicker.dates';\nimport type { DataViewsDayCalendarCopy } from './data-views-copy';\nimport { useDataViewsCopy } from './data-views-copy-context';\nimport type { RangeValue } from './data-views-types';\n\nconst CALENDAR_CLASS = 'data-views-range-calendar';\n\n/**\n * `Calendar` draws its own `Paper` with 24px of padding and a shadow. Inside\n * the filter's popover that reads as a card inside a card, so the inner frame\n * is flattened through the class hook the component offers for this — the\n * same thing `DateRangePicker` does.\n */\nconst ROOT_SX = (theme: Theme) => ({\n mt: { xs: 1, sm: 1.5 },\n // Below `sm` the caption and the weekday row give up their bottom margins,\n // so the whole popover fits a 320×568 screen under its pill (FUT-4144).\n '& :has(> * > [data-testid=\"calendar-month-select\"])': { mb: { xs: 0.5, sm: 2 } },\n '& :has(> [role=\"columnheader\"])': { mb: { xs: 0, sm: 1 } },\n '& [role=\"columnheader\"]': { height: { xs: rem(theme, 24), sm: rem(theme, 32) } },\n // The days carry no column gap of their own (`Calendar`, FUT-4162), so the\n // seven columns are what a day's 40px target is carved from below `sm`; the\n // range band and its round endpoints are the Calendar's, untouched here.\n // The month/year caption on ONE row at 320: the selectors give up the slack\n // around their text before the arrows are pushed onto a second row.\n '& [data-testid=\"calendar-month-select\"], & [data-testid=\"calendar-year-select\"]': { px: 0.5, minWidth: 0 },\n [`& .${CALENDAR_CLASS}`]: {\n p: 0,\n boxShadow: 'none',\n backgroundColor: 'transparent',\n backgroundImage: 'none',\n // A tapped day already rings itself; the whole grid framed in the primary\n // colour after every tap is noise in a popover. The frame stays for the\n // keyboard reaching the grid itself.\n '&:focus-within': { outline: 'none' },\n '&:focus-visible': {\n outline: (theme: Theme) => `${rem(theme, 2)} solid`,\n outlineColor: 'primary.main',\n outlineOffset: sxRem(2),\n },\n },\n});\n\n/** The two ends of a range, as `Calendar` reads them. */\nfunction rangeOf(value: RangeValue): DateRange {\n return {\n start: toLocalDay(typeof value.min === 'string' ? value.min : null),\n end: toLocalDay(typeof value.max === 'string' ? value.max : null),\n };\n}\n\n/**\n * What a tap on the calendar makes of the range.\n *\n * `Calendar` reports the period it holds after the tap: a fresh start (`end`\n * null) or a closed one, already in order. The one case it cannot see is a\n * range with only `Até` — typed, or left by a saved view — where its first tap\n * would drop that `Até`. A first day on or before it keeps it, so \"até 15/10\"\n * plus one tap on the 3rd is 03/10–15/10, as the prototype does.\n */\nexport function rangeFromCalendar(previous: RangeValue, picked: DateRange): RangeValue {\n const min = dayOf(picked.start);\n const max = dayOf(picked.end) ?? keptEnd(previous, min);\n return { ...(min ? { min } : {}), ...(max ? { max } : {}) };\n}\n\nconst dayOf = (date: Date | null | undefined): string | undefined => (date ? toDayString(date) : undefined);\n\n/** The `Até` of a range that has ONLY one, when the new first day is on or before it. */\nfunction keptEnd(previous: RangeValue, min: string | undefined): string | undefined {\n if (previous.min != null || typeof previous.max !== 'string') return undefined;\n return min && min <= previous.max ? previous.max : undefined;\n}\n\n/**\n * The month the calendar opens on while `De` is empty. With `De` set it opens\n * on De's month, which `Calendar` does by itself.\n *\n * With two months the current month sits on the RIGHT (setembro | outubro), so\n * the days a filter usually asks about — the ones just past — are on screen;\n * with only `Até` set, its month takes that place.\n */\nfunction openingMonth(value: RangeValue, months: number): Date | undefined {\n const end = toLocalDay(typeof value.max === 'string' ? value.max : null);\n const anchor = end ?? new Date();\n return new Date(anchor.getFullYear(), anchor.getMonth() - (months > 1 ? 1 : 0), 1);\n}\n\n/**\n * The line under the calendar: the next step (\"Toque no primeiro e no último\n * dia.\" / \"Agora toque no último dia.\") or, once a period is applied, the\n * window, with \"Limpar\" at its end.\n *\n * ONE line whose words change, never a row held empty for later (FUT-4144\n * follow-up): #932 kept an invisible summary row under the hint so the first\n * tap would not grow the popover, and at 1280 that was 59px of white.\n *\n * Where the line can hold \"Limpar\" (the pill's popover) it is always as tall as\n * its 40px target, so it keeps one height with the button and without it, and\n * the popover does not move. Where it cannot (a panel, whose header has\n * \"Limpar\") it stays a plain line of text: no row reserved for a button that\n * never comes. The text keeps to one line, cut with an ellipsis and whole in\n * its title, so a long label never grows the line on the closing tap. The target\n * is its own box, not padding pushed out with a negative margin: that version\n * ran under the calendar's last week, which took its top 10px at 320 (FUT-4144\n * UI review). The window is said in the primary ink, the steps in the\n * secondary one, so the result does not read as one more instruction.\n */\nfunction HintLine({\n text,\n isWindow,\n canClear,\n onClear,\n testId,\n}: {\n text: string;\n /** `text` is the applied window, not a step. */\n isWindow: boolean;\n /** The line can hold \"Limpar\" at all — fixed per surface, not per state. */\n canClear: boolean;\n /** Shown now: \"Limpar\" empties the range; `fromKeyboard` is a click with `detail` 0 (Enter or Space). */\n onClear: ((fromKeyboard: boolean) => void) | undefined;\n testId: string;\n}): React.JSX.Element {\n const clear = useDataViewsCopy().filters.clear;\n return (\n <Box\n data-testid={`${testId}-calendar-line`}\n sx={{\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n gap: 2,\n mt: { xs: 0.25, sm: 1 },\n minHeight: canClear ? sxRem(40) : undefined,\n fontSize: sxRem(12),\n lineHeight: 1.5,\n }}\n >\n <Typography\n component=\"p\"\n aria-live=\"polite\"\n data-testid={`${testId}-calendar-hint`}\n title={text}\n noWrap\n sx={{ m: 0, minWidth: 0, font: 'inherit', color: isWindow ? 'text.primary' : 'text.secondary' }}\n >\n {text}\n </Typography>\n {onClear && (\n <Box\n component=\"button\"\n type=\"button\"\n onClick={(event) => onClear(event.detail === 0)}\n data-testid={`${testId}-clear`}\n sx={{\n flexShrink: 0,\n display: 'inline-flex',\n alignItems: 'center',\n minHeight: sxRem(40),\n border: 0,\n bgcolor: 'transparent',\n cursor: 'pointer',\n font: 'inherit',\n fontWeight: 600,\n color: 'primary.main',\n px: 1,\n py: 0,\n // Its text lines up with the boxes' right edge; the side padding\n // reaches into the popover's own.\n mr: -1,\n borderRadius: 1,\n '&:hover': { bgcolor: 'action.hover' },\n // The theme's focus ring for a keyboard, none for a tap.\n '&:focus': { outline: 'none' },\n '&:focus-visible': {\n outline: (theme: Theme) => `${rem(theme, 2)} solid`,\n outlineColor: 'primary.main',\n outlineOffset: sxRem(1),\n },\n }}\n >\n {clear}\n </Box>\n )}\n </Box>\n );\n}\n\n/** Props of {@link DayRangeCalendar}. */\nexport interface DayRangeCalendarProps {\n /** The filter's own label (\"Data\"), which names the calendar. */\n fieldLabel: string;\n value: RangeValue;\n /** Called with the range a tap leaves; never for a typed day. */\n onChange: (range: RangeValue) => void;\n /**\n * Months side by side. Two read as a period at a glance where there is room;\n * one, with the month/year selectors, where there is not.\n */\n months: 1 | 2;\n /**\n * Changes when the range moved from OUTSIDE the calendar (typed, a preset,\n * \"Limpar\"), so the calendar re-opens on it. Never for its own taps: a\n * calendar that jumped under the finger picking in it would be unusable.\n */\n viewKey: string;\n testId: string;\n /**\n * The applied window in words (\"Data: 01/10–15/10\"), said on the hint's own\n * line with \"Limpar\" at its end. Set by the pill, whose popover has no other\n * place for them; a panel says them in its own header and leaves this unset.\n */\n summary?: string;\n /**\n * Empties the range: the line's \"Limpar\", shown while `summary` is set. Set\n * only where the line may hold it; the line reserves its 40px only then.\n * `fromKeyboard` is true when it was pressed from the keyboard.\n */\n onClear?: (fromKeyboard: boolean) => void;\n}\n\nexport function DayRangeCalendar({\n fieldLabel,\n value,\n onChange,\n months,\n viewKey,\n testId,\n summary,\n onClear,\n}: DayRangeCalendarProps): React.JSX.Element {\n const copy: DataViewsDayCalendarCopy =\n useDataViewsCopy().filters.dayCalendar ?? (EN_US_DATA_VIEWS_COPY.filters.dayCalendar as DataViewsDayCalendarCopy);\n const range = rangeOf(value);\n const pick = (picked: DateRange) => onChange(rangeFromCalendar(value, picked));\n const waitingForEnd = Boolean(range.start && !range.end);\n\n return (\n <Box sx={ROOT_SX} data-testid={`${testId}-calendar`}>\n <Calendar\n key={viewKey}\n ariaLabel={copy.label(fieldLabel)}\n className={CALENDAR_CLASS}\n selectionMode=\"range\"\n locale={copy.locale}\n labels={copy.caption}\n // Sunday first, as a pt-BR calendar reads (`D S T Q Q S S`) and as the\n // presets' \"Esta semana\" counts.\n firstDayOfWeek={0}\n numberOfMonths={months}\n // Side by side, a day of the next month in this one is the same day\n // twice; one month alone keeps them, muted, as a six-week frame.\n showOutsideDays={months === 1}\n captionLayout={months > 1 ? 'arrows' : 'selectors'}\n defaultMonth={openingMonth(value, months)}\n range={range}\n // The intermediate callback does the work: the other fires only on the\n // tap that CLOSES a period, so the first tap would write nothing.\n onIntermediateRangeChange={pick}\n />\n <HintLine\n text={waitingForEnd ? copy.pickEnd : (summary ?? copy.pickStart)}\n isWindow={!waitingForEnd && summary !== undefined}\n canClear={onClear !== undefined}\n onClear={summary === undefined ? undefined : onClear}\n testId={testId}\n />\n </Box>\n );\n}\n"],"mappings":"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","names":["theme"]}
@@ -5,7 +5,7 @@ import {
5
5
  } from "./chunk-T7OIVPCO.js";
6
6
  import {
7
7
  MoreFilters
8
- } from "./chunk-HS662RLW.js";
8
+ } from "./chunk-RZWU2KYP.js";
9
9
  import {
10
10
  PillControl
11
11
  } from "./chunk-AJ6KFHEE.js";
@@ -14,7 +14,7 @@ import {
14
14
  } from "./chunk-KYUEO2IO.js";
15
15
  import {
16
16
  RangePill
17
- } from "./chunk-3OHZAZEE.js";
17
+ } from "./chunk-3WYEENUH.js";
18
18
  import {
19
19
  QuickChip
20
20
  } from "./chunk-AT6UKTH4.js";
@@ -251,4 +251,4 @@ function FilterSlots({
251
251
  export {
252
252
  InlineFilterControls
253
253
  };
254
- //# sourceMappingURL=chunk-AI7XWBNG.js.map
254
+ //# sourceMappingURL=chunk-IEUVP6UV.js.map
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  GridShell
3
- } from "./chunk-X3GD3TFI.js";
3
+ } from "./chunk-BXZMV6QC.js";
4
4
  import {
5
5
  useDataViewsState
6
6
  } from "./chunk-ZCNR4DN5.js";
@@ -27,4 +27,4 @@ function DataViewsGrid(props) {
27
27
  export {
28
28
  DataViewsGrid
29
29
  };
30
- //# sourceMappingURL=chunk-R4LCPPKA.js.map
30
+ //# sourceMappingURL=chunk-OCGPOACB.js.map
@@ -2,7 +2,7 @@ import {
2
2
  MoreGroup,
3
3
  MoreQuick,
4
4
  fieldClearing
5
- } from "./chunk-MZAYIG2I.js";
5
+ } from "./chunk-VCJ72ODU.js";
6
6
  import {
7
7
  useStillAnchor
8
8
  } from "./chunk-7CUZTWKW.js";
@@ -222,4 +222,4 @@ function MoreFilters({
222
222
  export {
223
223
  MoreFilters
224
224
  };
225
- //# sourceMappingURL=chunk-HS662RLW.js.map
225
+ //# sourceMappingURL=chunk-RZWU2KYP.js.map
@@ -6,7 +6,7 @@ import {
6
6
  } from "./chunk-KYUEO2IO.js";
7
7
  import {
8
8
  RangeBounds
9
- } from "./chunk-FORAVDJF.js";
9
+ } from "./chunk-FC7UCFFA.js";
10
10
  import {
11
11
  QuickRow
12
12
  } from "./chunk-AT6UKTH4.js";
@@ -228,4 +228,4 @@ export {
228
228
  MoreQuick,
229
229
  MoreGroup
230
230
  };
231
- //# sourceMappingURL=chunk-MZAYIG2I.js.map
231
+ //# sourceMappingURL=chunk-VCJ72ODU.js.map
@@ -0,0 +1,44 @@
1
+ import {
2
+ isRangeSet,
3
+ rangeChipLabel
4
+ } from "./chunk-GCZJH4XL.js";
5
+ import {
6
+ useDataViewsCopy
7
+ } from "./chunk-KHG57NAE.js";
8
+ import {
9
+ sxRem
10
+ } from "./chunk-YKCAJ2TN.js";
11
+
12
+ // src/components/data-display/DataViews/data-views-range-summary.tsx
13
+ import Box from "@mui/material/Box/index.js";
14
+ import Button from "@mui/material/Button/index.js";
15
+ import Typography from "@mui/material/Typography/index.js";
16
+ import { jsx, jsxs } from "react/jsx-runtime";
17
+ function RangeSummary({
18
+ field,
19
+ value,
20
+ onClear,
21
+ testId
22
+ }) {
23
+ const copy = useDataViewsCopy();
24
+ if (field.kind === "day" || !isRangeSet(value)) return null;
25
+ return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, mt: { xs: 0.5, sm: 1.5 } }, children: [
26
+ /* @__PURE__ */ jsx(Typography, { component: "span", sx: { fontSize: sxRem(12), color: "text.secondary" }, children: rangeChipLabel(field, value) }),
27
+ /* @__PURE__ */ jsx(
28
+ Button,
29
+ {
30
+ variant: "text",
31
+ size: "small",
32
+ onClick: onClear,
33
+ "data-testid": `${testId}-clear`,
34
+ sx: { textTransform: "none" },
35
+ children: copy.filters.clear
36
+ }
37
+ )
38
+ ] });
39
+ }
40
+
41
+ export {
42
+ RangeSummary
43
+ };
44
+ //# sourceMappingURL=chunk-WLDP7C4K.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/data-display/DataViews/data-views-range-summary.tsx"],"sourcesContent":["'use client';\n\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport React from 'react';\n\nimport { useDataViewsCopy } from './data-views-copy-context';\nimport { isRangeSet, rangeChipLabel } from './data-views-range-values';\nimport type { RangeFieldConfig, RangeValue } from './data-views-types';\nimport { sxRem } from '../../../tokens/relative';\n\n/**\n * The applied window in words, and \"Limpar\", under a NUMBER range's boxes.\n *\n * An inverted window is not an error the merchant must fix before the list\n * responds — it simply matches nothing, and saying so beats an empty grid with\n * no explanation (FUT-668).\n *\n * A DAY range says these on its calendar's hint line instead (FUT-4144): a row\n * of its own, held empty until the first tap so the popover would not grow,\n * left 59px of white under the hint at 1280.\n */\nexport function RangeSummary<T extends Record<string, unknown>>({\n field,\n value,\n onClear,\n testId,\n}: {\n field: RangeFieldConfig<T>;\n value: RangeValue;\n onClear: () => void;\n testId: string;\n}): React.JSX.Element | null {\n const copy = useDataViewsCopy();\n if (field.kind === 'day' || !isRangeSet(value)) return null;\n return (\n <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 2, mt: { xs: 0.5, sm: 1.5 } }}>\n <Typography component=\"span\" sx={{ fontSize: sxRem(12), color: 'text.secondary' }}>\n {rangeChipLabel(field, value)}\n </Typography>\n <Button\n variant=\"text\"\n size=\"small\"\n onClick={onClear}\n data-testid={`${testId}-clear`}\n sx={{ textTransform: 'none' }}\n >\n {copy.filters.clear}\n </Button>\n </Box>\n );\n}\n"],"mappings":";;;;;;;;;;;;AAEA,OAAO,SAAS;AAChB,OAAO,YAAY;AACnB,OAAO,gBAAgB;AAiCnB,SACE,KADF;AAdG,SAAS,aAAgD;AAAA,EAC9D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAK6B;AAC3B,QAAM,OAAO,iBAAiB;AAC9B,MAAI,MAAM,SAAS,SAAS,CAAC,WAAW,KAAK,EAAG,QAAO;AACvD,SACE,qBAAC,OAAI,IAAI,EAAE,SAAS,QAAQ,YAAY,UAAU,gBAAgB,iBAAiB,KAAK,GAAG,IAAI,EAAE,IAAI,KAAK,IAAI,IAAI,EAAE,GAClH;AAAA,wBAAC,cAAW,WAAU,QAAO,IAAI,EAAE,UAAU,MAAM,EAAE,GAAG,OAAO,iBAAiB,GAC7E,yBAAe,OAAO,KAAK,GAC9B;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,SAAS;AAAA,QACT,eAAa,GAAG,MAAM;AAAA,QACtB,IAAI,EAAE,eAAe,OAAO;AAAA,QAE3B,eAAK,QAAQ;AAAA;AAAA,IAChB;AAAA,KACF;AAEJ;","names":[]}
@@ -3,7 +3,7 @@ import {
3
3
  } from "./chunk-YNVTUQ5B.js";
4
4
  import {
5
5
  DataViewsGrid
6
- } from "./chunk-R4LCPPKA.js";
6
+ } from "./chunk-OCGPOACB.js";
7
7
  import {
8
8
  viewStateKey
9
9
  } from "./chunk-ZOLAYP2D.js";
@@ -166,4 +166,4 @@ function renderViewDialogs(ctl, fields, columns, views, testIdPrefix, onSaved) {
166
166
  export {
167
167
  DataViewsTableBase
168
168
  };
169
- //# sourceMappingURL=chunk-W2KOP27S.js.map
169
+ //# sourceMappingURL=chunk-ZVHHFLYY.js.map
@@ -1,10 +1,10 @@
1
1
  import {
2
2
  DataViewsTableBase
3
- } from "../chunk-W2KOP27S.js";
3
+ } from "../chunk-ZVHHFLYY.js";
4
4
  import "../chunk-YNVTUQ5B.js";
5
5
  import {
6
6
  DataViewsGrid
7
- } from "../chunk-R4LCPPKA.js";
7
+ } from "../chunk-OCGPOACB.js";
8
8
  import {
9
9
  BaseListCard
10
10
  } from "../chunk-IWSTMVCA.js";
@@ -23,10 +23,10 @@ import {
23
23
  useDragItem
24
24
  } from "../chunk-K4EKTMTC.js";
25
25
  import "../chunk-ZOLAYP2D.js";
26
- import "../chunk-X3GD3TFI.js";
27
- import "../chunk-CKQOYPH3.js";
26
+ import "../chunk-BXZMV6QC.js";
27
+ import "../chunk-FYUNROLW.js";
28
28
  import "../chunk-MKVDHR3B.js";
29
- import "../chunk-AI7XWBNG.js";
29
+ import "../chunk-IEUVP6UV.js";
30
30
  import "../chunk-T7OIVPCO.js";
31
31
  import "../chunk-X3AFXHY5.js";
32
32
  import "../chunk-XNAI7QGU.js";
@@ -36,19 +36,19 @@ import {
36
36
  import "../chunk-4ZQQUICR.js";
37
37
  import "../chunk-XZFTRGRW.js";
38
38
  import "../chunk-WWH674WU.js";
39
- import "../chunk-HS662RLW.js";
40
- import "../chunk-MZAYIG2I.js";
39
+ import "../chunk-RZWU2KYP.js";
40
+ import "../chunk-VCJ72ODU.js";
41
41
  import "../chunk-AJ6KFHEE.js";
42
42
  import "../chunk-KYUEO2IO.js";
43
43
  import "../chunk-GZOW6HNN.js";
44
- import "../chunk-3OHZAZEE.js";
45
- import "../chunk-J2AVWIMM.js";
46
- import "../chunk-FORAVDJF.js";
44
+ import "../chunk-3WYEENUH.js";
45
+ import "../chunk-WLDP7C4K.js";
46
+ import "../chunk-FC7UCFFA.js";
47
47
  import "../chunk-LZNUBQ5I.js";
48
48
  import "../chunk-2FKWKLSC.js";
49
49
  import "../chunk-YOPMXGHY.js";
50
50
  import "../chunk-CBOB5AV6.js";
51
- import "../chunk-MICX23P4.js";
51
+ import "../chunk-HRES2S3Q.js";
52
52
  import "../chunk-AT6UKTH4.js";
53
53
  import "../chunk-5YDS6HO3.js";
54
54
  import "../chunk-OY437NRJ.js";
@@ -24,12 +24,17 @@ interface RangeBoundsProps<T extends Record<string, unknown>> {
24
24
  * its content and keeps the boxes' own width.
25
25
  */
26
26
  fillRow?: boolean;
27
+ /**
28
+ * Say the applied window, and its "Limpar", on the day calendar's hint line.
29
+ * The pill's popover sets it; a panel has them in its own header.
30
+ */
31
+ summaryOnHint?: boolean;
27
32
  }
28
33
  /**
29
34
  * The `De`/`Até` pair for a range — shared by the pill's popover and the
30
35
  * slide-in panel's day fields, so the two surfaces cannot drift on what a bound
31
36
  * accepts or how it clears.
32
37
  */
33
- export declare function RangeBounds<T extends Record<string, unknown>>({ field, value, onChange, testId, calendarMonths, showCalendar, fillRow, }: RangeBoundsProps<T>): React.JSX.Element;
38
+ export declare function RangeBounds<T extends Record<string, unknown>>({ field, value, onChange, testId, calendarMonths, showCalendar, fillRow, summaryOnHint, }: RangeBoundsProps<T>): React.JSX.Element;
34
39
  export {};
35
40
  //# sourceMappingURL=data-views-range-bounds.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"data-views-range-bounds.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/DataViews/data-views-range-bounds.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAUxC,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAoGvE,oCAAoC;AACpC,UAAU,gBAAgB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC1D,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC;IAC3B,KAAK,EAAE,UAAU,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,MAAM,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IACvB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EAC7D,KAAK,EACL,KAAK,EACL,QAAQ,EACR,MAAM,EACN,cAAkB,EAClB,YAAmB,EACnB,OAAe,GAChB,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA+DzC"}
1
+ {"version":3,"file":"data-views-range-bounds.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/DataViews/data-views-range-bounds.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAU3D,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAiJvE,oCAAoC;AACpC,UAAU,gBAAgB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC1D,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC;IAC3B,KAAK,EAAE,UAAU,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,MAAM,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IACvB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EAC7D,KAAK,EACL,KAAK,EACL,QAAQ,EACR,MAAM,EACN,cAAkB,EAClB,YAAmB,EACnB,OAAe,EACf,aAAqB,GACtB,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAkEzC"}
@@ -30,6 +30,18 @@ export interface DayRangeCalendarProps {
30
30
  */
31
31
  viewKey: string;
32
32
  testId: string;
33
+ /**
34
+ * The applied window in words ("Data: 01/10–15/10"), said on the hint's own
35
+ * line with "Limpar" at its end. Set by the pill, whose popover has no other
36
+ * place for them; a panel says them in its own header and leaves this unset.
37
+ */
38
+ summary?: string;
39
+ /**
40
+ * Empties the range: the line's "Limpar", shown while `summary` is set. Set
41
+ * only where the line may hold it; the line reserves its 40px only then.
42
+ * `fromKeyboard` is true when it was pressed from the keyboard.
43
+ */
44
+ onClear?: (fromKeyboard: boolean) => void;
33
45
  }
34
- export declare function DayRangeCalendar({ fieldLabel, value, onChange, months, viewKey, testId, }: DayRangeCalendarProps): React.JSX.Element;
46
+ export declare function DayRangeCalendar({ fieldLabel, value, onChange, months, viewKey, testId, summary, onClear, }: DayRangeCalendarProps): React.JSX.Element;
35
47
  //# sourceMappingURL=data-views-range-calendar.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"data-views-range-calendar.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/DataViews/data-views-range-calendar.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAI/D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAgDrD;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,SAAS,GAAG,UAAU,CAIrF;AAwBD,yCAAyC;AACzC,MAAM,WAAW,qBAAqB;IACpC,iEAAiE;IACjE,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,UAAU,CAAC;IAClB,iEAAiE;IACjE,QAAQ,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC;;;OAGG;IACH,MAAM,EAAE,CAAC,GAAG,CAAC,CAAC;IACd;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,UAAU,EACV,KAAK,EACL,QAAQ,EACR,MAAM,EACN,OAAO,EACP,MAAM,GACP,EAAE,qBAAqB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAwC3C"}
1
+ {"version":3,"file":"data-views-range-calendar.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/DataViews/data-views-range-calendar.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAI/D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAgDrD;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,SAAS,GAAG,UAAU,CAIrF;AA6HD,yCAAyC;AACzC,MAAM,WAAW,qBAAqB;IACpC,iEAAiE;IACjE,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,UAAU,CAAC;IAClB,iEAAiE;IACjE,QAAQ,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC;;;OAGG;IACH,MAAM,EAAE,CAAC,GAAG,CAAC,CAAC;IACd;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,CAAC,YAAY,EAAE,OAAO,KAAK,IAAI,CAAC;CAC3C;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,UAAU,EACV,KAAK,EACL,QAAQ,EACR,MAAM,EACN,OAAO,EACP,MAAM,EACN,OAAO,EACP,OAAO,GACR,EAAE,qBAAqB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAuC3C"}
@@ -1 +1 @@
1
- {"version":3,"file":"data-views-range-pill.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/DataViews/data-views-range-pill.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAM1C,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAUxD,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAOvE,OAAO,EAAE,WAAW,EAAE,CAAC;AA8IvB,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EAC3D,KAAK,EACL,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,YAAY,GACb,EAAE;IACD,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC;IAC3B,KAAK,EAAE,UAAU,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,+DAA+D;IAC/D,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,YAAY,EAAE,MAAM,CAAC;CACtB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAwCpB;AAGD;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EACjE,KAAK,EACL,KAAK,EACL,QAAQ,EACR,MAAM,GACP,EAAE;IACD,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC;IAC3B,KAAK,EAAE,UAAU,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,MAAM,EAAE,MAAM,CAAC;CAChB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAoCpB"}
1
+ {"version":3,"file":"data-views-range-pill.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/DataViews/data-views-range-pill.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAM1C,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAUxD,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAOvE,OAAO,EAAE,WAAW,EAAE,CAAC;AAkJvB,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EAC3D,KAAK,EACL,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,YAAY,GACb,EAAE;IACD,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC;IAC3B,KAAK,EAAE,UAAU,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,+DAA+D;IAC/D,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,YAAY,EAAE,MAAM,CAAC;CACtB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAyCpB;AAGD;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EACjE,KAAK,EACL,KAAK,EACL,QAAQ,EACR,MAAM,GACP,EAAE;IACD,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC;IAC3B,KAAK,EAAE,UAAU,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,MAAM,EAAE,MAAM,CAAC;CAChB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAoCpB"}
@@ -1,16 +1,15 @@
1
1
  import React from 'react';
2
2
  import type { RangeFieldConfig, RangeValue } from './data-views-types';
3
3
  /**
4
- * The applied window in words, and "Limpar".
4
+ * The applied window in words, and "Limpar", under a NUMBER range's boxes.
5
5
  *
6
6
  * An inverted window is not an error the merchant must fix before the list
7
7
  * responds — it simply matches nothing, and saying so beats an empty grid with
8
8
  * no explanation (FUT-668).
9
9
  *
10
- * A DAY filter keeps the row's height while nothing is applied: its first tap
11
- * on the calendar applies a bound, and a row appearing then grew the popover
12
- * 26px and moved it 32px up at 320×568, the day under the finger with it
13
- * (FUT-4144 UI review round 2). The held row is invisible and inert.
10
+ * A DAY range says these on its calendar's hint line instead (FUT-4144): a row
11
+ * of its own, held empty until the first tap so the popover would not grow,
12
+ * left 59px of white under the hint at 1280.
14
13
  */
15
14
  export declare function RangeSummary<T extends Record<string, unknown>>({ field, value, onClear, testId, }: {
16
15
  field: RangeFieldConfig<T>;
@@ -1 +1 @@
1
- {"version":3,"file":"data-views-range-summary.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/DataViews/data-views-range-summary.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGvE;;;;;;;;;;;GAWG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EAC9D,KAAK,EACL,KAAK,EACL,OAAO,EACP,MAAM,GACP,EAAE;IACD,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC;IAC3B,KAAK,EAAE,UAAU,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;CAChB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CA+B3B"}
1
+ {"version":3,"file":"data-views-range-summary.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/DataViews/data-views-range-summary.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGvE;;;;;;;;;;GAUG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EAC9D,KAAK,EACL,KAAK,EACL,OAAO,EACP,MAAM,GACP,EAAE;IACD,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC;IAC3B,KAAK,EAAE,UAAU,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;CAChB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAmB3B"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@12-apps/ui",
3
- "version": "6.92.0",
3
+ "version": "6.92.1",
4
4
  "license": "MIT",
5
5
  "packageManager": "pnpm@10.34.5",
6
6
  "type": "module",
@@ -292,9 +292,11 @@ the keystrokes it did.
292
292
  | months | one, `<Month> ▾ <Year> ▾ ‹ ›` caption | one, same caption | two side by side, `‹ setembro` · `outubro ›`, the current month on the right |
293
293
 
294
294
  - Order in the popover: preset chips, the `De`/`Até` boxes (sharing the row
295
- equally), the inclusive/inverted note, the calendar, then the line saying
295
+ equally), the inclusive/inverted note, the calendar, then ONE line under it:
296
296
  which tap comes next ("Toque no primeiro e no último dia." / "Agora toque no
297
- último dia."), then the pill's summary and "Limpar".
297
+ último dia."), and once a period is applied the window itself ("Data:
298
+ 01/10–15/10"), with "Limpar" at the line's end from the first tap on. In the
299
+ panels the line says only the step; their header carries "Limpar".
298
300
  - One view of ONE range: a tap writes the boxes; a typed whole day writes the
299
301
  bound and moves the calendar to it; an impossible typed day (`31/02/2026`)
300
302
  is refused in its box and the calendar does not move; "Limpar", a preset or a
@@ -320,8 +322,10 @@ the keystrokes it did.
320
322
  where their trigger was when they opened, so a "Limpar" or a badge appearing
321
323
  on the bar after the first tap does not drag them sideways. They are
322
324
  re-placed only when their own height changes (a refused day's message), so
323
- they never leave the screen. A day popover keeps its summary/"Limpar" row's
324
- height while nothing is applied, so the first tap does not grow it.
325
+ they never leave the screen. A day popover has no summary row of its own:
326
+ the window and "Limpar" are on the hint's line, whose height does not change
327
+ as its words do, so no row is held empty and the first tap does not grow it
328
+ (an empty held row left 59px of white under the hint at 1280).
325
329
  - While a panel is open the bar is frozen; if the "Limpar" that a first filter
326
330
  brings in does not fit the row it shows as its icon until the panel closes.
327
331
  - A second tap before the first swaps them — the boxes never show a period
@@ -8,7 +8,7 @@
8
8
  */
9
9
  import Box from '@mui/material/Box/index.js';
10
10
  import Typography from '@mui/material/Typography/index.js';
11
- import React, { useState } from 'react';
11
+ import React, { useEffect, useRef, useState } from 'react';
12
12
 
13
13
  import { useDataViewsCopy } from './data-views-copy-context';
14
14
  import { DayBoundInput } from './data-views-day-input';
@@ -17,7 +17,7 @@ import { RangePresets } from './data-views-preset-chips';
17
17
  import { DayRangeCalendar } from './data-views-range-calendar';
18
18
  import { presetsFor } from './data-views-range-presets';
19
19
  import { useOutsideResetKey } from './data-views-range-reset';
20
- import { isRangeInverted } from './data-views-range-values';
20
+ import { isRangeInverted, isRangeSet, rangeChipLabel } from './data-views-range-values';
21
21
  import type { RangeFieldConfig, RangeValue } from './data-views-types';
22
22
  import { sxRem } from '../../../tokens/relative';
23
23
 
@@ -71,6 +71,51 @@ function BoundField<T extends Record<string, unknown>>({
71
71
  }
72
72
 
73
73
 
74
+ /**
75
+ * After the line's "Limpar" pressed from the keyboard, focus goes to the
76
+ * cleared "De" — the next thing to type — instead of falling to the page with
77
+ * the button that held it. A tap leaves focus alone: focusing "De" there would
78
+ * open the phone's keyboard over the calendar the next tap is for.
79
+ * The boxes remount on a clear, so focus waits for the reset key to move.
80
+ */
81
+ function useFocusDeAfterClear(
82
+ key: number,
83
+ testId: string,
84
+ ): { rootRef: React.RefObject<HTMLDivElement | null>; clearToDe: (clear: () => void, fromKeyboard: boolean) => void } {
85
+ const rootRef = useRef<HTMLDivElement>(null);
86
+ const pending = useRef(false);
87
+ useEffect(() => {
88
+ if (!pending.current) return;
89
+ pending.current = false;
90
+ rootRef.current?.querySelector<HTMLInputElement>(`[data-testid="${testId}-min"]`)?.focus();
91
+ }, [key, testId]);
92
+ return {
93
+ rootRef,
94
+ clearToDe: (clear, fromKeyboard) => {
95
+ pending.current = fromKeyboard;
96
+ clear();
97
+ },
98
+ };
99
+ }
100
+
101
+ /**
102
+ * The window and "Limpar" for the hint line, where the host asks for them.
103
+ * `clear` goes straight to the host, not through `emitted`: it is an outside
104
+ * write, so the boxes and the calendar re-open on the empty range.
105
+ */
106
+ function hintLineProps<T extends Record<string, unknown>>(
107
+ field: RangeFieldConfig<T>,
108
+ value: RangeValue,
109
+ clear: (fromKeyboard: boolean) => void,
110
+ ): { summary: string | undefined; onClear: (fromKeyboard: boolean) => void } {
111
+ return { summary: appliedWindow(field, value), onClear: clear };
112
+ }
113
+
114
+ /** The applied window in words ("Data: 01/10–15/10"), or nothing while none is. */
115
+ function appliedWindow<T extends Record<string, unknown>>(field: RangeFieldConfig<T>, value: RangeValue): string | undefined {
116
+ return isRangeSet(value) ? rangeChipLabel(field, value) : undefined;
117
+ }
118
+
74
119
  /** One box of the pair: an equal share of the row for a day, as it was for a number. */
75
120
  function BoundCell({ grow, children }: { grow: boolean; children: React.ReactNode }): React.JSX.Element {
76
121
  if (!grow) return <>{children}</>;
@@ -142,6 +187,11 @@ interface RangeBoundsProps<T extends Record<string, unknown>> {
142
187
  * its content and keeps the boxes' own width.
143
188
  */
144
189
  fillRow?: boolean;
190
+ /**
191
+ * Say the applied window, and its "Limpar", on the day calendar's hint line.
192
+ * The pill's popover sets it; a panel has them in its own header.
193
+ */
194
+ summaryOnHint?: boolean;
145
195
  }
146
196
 
147
197
  /**
@@ -157,9 +207,12 @@ export function RangeBounds<T extends Record<string, unknown>>({
157
207
  calendarMonths = 1,
158
208
  showCalendar = true,
159
209
  fillRow = false,
210
+ summaryOnHint = false,
160
211
  }: RangeBoundsProps<T>): React.JSX.Element {
161
212
  const copy = useDataViewsCopy();
162
213
  const { key, emitted } = useOutsideResetKey(value);
214
+ const { rootRef, clearToDe } = useFocusDeAfterClear(key, testId);
215
+ const hintLine = summaryOnHint ? hintLineProps(field, value, (fromKeyboard) => clearToDe(() => onChange({}), fromKeyboard)) : {};
163
216
  // Moves the calendar to a TYPED day. A typed write is the fields' own, so
164
217
  // the outside key above does not see it; a tap on the calendar moves
165
218
  // neither, which is what keeps it still under the finger.
@@ -170,7 +223,7 @@ export function RangeBounds<T extends Record<string, unknown>>({
170
223
  };
171
224
  const day = field.kind === 'day';
172
225
  return (
173
- <Box data-testid={`${testId}-panel`}>
226
+ <Box ref={rootRef} data-testid={`${testId}-panel`}>
174
227
  {/* Above the inputs, not below: the presets are the answer for most
175
228
  merchants, and the two date pickers are the escape hatch. */}
176
229
  <Box sx={{ '&:not(:empty)': { mb: { xs: 1, sm: 1.5 } } }}>
@@ -216,6 +269,7 @@ export function RangeBounds<T extends Record<string, unknown>>({
216
269
  months={calendarMonths}
217
270
  viewKey={`${key}-${typed}`}
218
271
  testId={testId}
272
+ {...hintLine}
219
273
  />
220
274
  )}
221
275
  </Box>