@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.
- package/dist/_internal/components/data-display/DataViews/DataViewsGrid.js +10 -10
- package/dist/_internal/components/data-display/DataViews/DataViewsTableBase.js +11 -11
- package/dist/_internal/components/data-display/DataViews/data-views-filter-panel.js +5 -5
- package/dist/_internal/components/data-display/DataViews/data-views-grid-parts.js +9 -9
- package/dist/_internal/components/data-display/DataViews/data-views-inline-bar.js +7 -7
- package/dist/_internal/components/data-display/DataViews/data-views-more-fields.js +5 -5
- package/dist/_internal/components/data-display/DataViews/data-views-more-filters.js +6 -6
- package/dist/_internal/components/data-display/DataViews/data-views-range-bounds.js +2 -2
- package/dist/_internal/components/data-display/DataViews/data-views-range-calendar.js +1 -1
- package/dist/_internal/components/data-display/DataViews/data-views-range-pill.js +4 -4
- package/dist/_internal/components/data-display/DataViews/data-views-range-summary.js +1 -1
- package/dist/{chunk-3OHZAZEE.js → chunk-3WYEENUH.js} +9 -4
- package/dist/chunk-3WYEENUH.js.map +1 -0
- package/dist/{chunk-X3GD3TFI.js → chunk-BXZMV6QC.js} +3 -3
- package/dist/{chunk-FORAVDJF.js → chunk-FC7UCFFA.js} +35 -7
- package/dist/chunk-FC7UCFFA.js.map +1 -0
- package/dist/{chunk-CKQOYPH3.js → chunk-FYUNROLW.js} +2 -2
- package/dist/{chunk-MICX23P4.js → chunk-HRES2S3Q.js} +85 -8
- package/dist/chunk-HRES2S3Q.js.map +1 -0
- package/dist/{chunk-AI7XWBNG.js → chunk-IEUVP6UV.js} +3 -3
- package/dist/{chunk-R4LCPPKA.js → chunk-OCGPOACB.js} +2 -2
- package/dist/{chunk-HS662RLW.js → chunk-RZWU2KYP.js} +2 -2
- package/dist/{chunk-MZAYIG2I.js → chunk-VCJ72ODU.js} +2 -2
- package/dist/chunk-WLDP7C4K.js +44 -0
- package/dist/chunk-WLDP7C4K.js.map +1 -0
- package/dist/{chunk-W2KOP27S.js → chunk-ZVHHFLYY.js} +2 -2
- package/dist/data-display/DataViews.js +11 -11
- package/dist/types/components/data-display/DataViews/data-views-range-bounds.d.ts +6 -1
- package/dist/types/components/data-display/DataViews/data-views-range-bounds.d.ts.map +1 -1
- package/dist/types/components/data-display/DataViews/data-views-range-calendar.d.ts +13 -1
- package/dist/types/components/data-display/DataViews/data-views-range-calendar.d.ts.map +1 -1
- package/dist/types/components/data-display/DataViews/data-views-range-pill.d.ts.map +1 -1
- package/dist/types/components/data-display/DataViews/data-views-range-summary.d.ts +4 -5
- package/dist/types/components/data-display/DataViews/data-views-range-summary.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/data-display/DataViews/RESPONSIVE-BEHAVIOUR.md +8 -4
- package/src/components/data-display/DataViews/data-views-range-bounds.tsx +57 -3
- package/src/components/data-display/DataViews/data-views-range-calendar.tsx +122 -8
- package/src/components/data-display/DataViews/data-views-range-pill.tsx +5 -0
- package/src/components/data-display/DataViews/data-views-range-summary.tsx +9 -22
- package/dist/chunk-3OHZAZEE.js.map +0 -1
- package/dist/chunk-FORAVDJF.js.map +0 -1
- package/dist/chunk-J2AVWIMM.js +0 -60
- package/dist/chunk-J2AVWIMM.js.map +0 -1
- package/dist/chunk-MICX23P4.js.map +0 -1
- /package/dist/{chunk-X3GD3TFI.js.map → chunk-BXZMV6QC.js.map} +0 -0
- /package/dist/{chunk-CKQOYPH3.js.map → chunk-FYUNROLW.js.map} +0 -0
- /package/dist/{chunk-AI7XWBNG.js.map → chunk-IEUVP6UV.js.map} +0 -0
- /package/dist/{chunk-R4LCPPKA.js.map → chunk-OCGPOACB.js.map} +0 -0
- /package/dist/{chunk-HS662RLW.js.map → chunk-RZWU2KYP.js.map} +0 -0
- /package/dist/{chunk-MZAYIG2I.js.map → chunk-VCJ72ODU.js.map} +0 -0
- /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
|
-
|
|
183
|
+
HintLine,
|
|
107
184
|
{
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
254
|
+
//# sourceMappingURL=chunk-IEUVP6UV.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
GridShell
|
|
3
|
-
} from "./chunk-
|
|
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-
|
|
30
|
+
//# sourceMappingURL=chunk-OCGPOACB.js.map
|
|
@@ -2,7 +2,7 @@ import {
|
|
|
2
2
|
MoreGroup,
|
|
3
3
|
MoreQuick,
|
|
4
4
|
fieldClearing
|
|
5
|
-
} from "./chunk-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
169
|
+
//# sourceMappingURL=chunk-ZVHHFLYY.js.map
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import {
|
|
2
2
|
DataViewsTableBase
|
|
3
|
-
} from "../chunk-
|
|
3
|
+
} from "../chunk-ZVHHFLYY.js";
|
|
4
4
|
import "../chunk-YNVTUQ5B.js";
|
|
5
5
|
import {
|
|
6
6
|
DataViewsGrid
|
|
7
|
-
} from "../chunk-
|
|
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-
|
|
27
|
-
import "../chunk-
|
|
26
|
+
import "../chunk-BXZMV6QC.js";
|
|
27
|
+
import "../chunk-FYUNROLW.js";
|
|
28
28
|
import "../chunk-MKVDHR3B.js";
|
|
29
|
-
import "../chunk-
|
|
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-
|
|
40
|
-
import "../chunk-
|
|
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-
|
|
45
|
-
import "../chunk-
|
|
46
|
-
import "../chunk-
|
|
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-
|
|
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,
|
|
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;
|
|
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;
|
|
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
|
|
11
|
-
*
|
|
12
|
-
*
|
|
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
|
|
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
|
@@ -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
|
|
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."),
|
|
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
|
|
324
|
-
|
|
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>
|