@12-apps/ui 3.0.0 → 3.2.0

package/src/components/form/DateRangePicker/DateRangePickerFields.tsx

@@ -0,0 +1,90 @@
+/**
+ * The two typed ends, and the one line that says what the picker currently has.
+ *
+ * WHEN A TYPED DATE COMMITS: the moment it is a WHOLE, REAL day — eight digits
+ * that name a date that exists. Not on every keystroke (`2026` passes through
+ * `0002`, `0020` and `0202`, each a legal year, and committing those makes the
+ * calendar jump to the year 20 while you are still typing) and not only on blur
+ * (a reader who types a date and looks at the calendar to check it would see
+ * the old month until they clicked somewhere else). Half-typed text stays in
+ * the field and changes nothing; leaving the field discards it and shows what
+ * the range actually is. Enter needs no special case — by the time it can be
+ * pressed the date has already committed.
+ *
+ * The field itself is `DayBoundInput`, the masked `dd/mm/aaaa` control the data
+ * views already use. Same package, imported rather than re-implemented: a
+ * second masked date field is a second set of rules for what backspace does.
+ */
+import { Box, Typography } from '@mui/material';
+import React from 'react';
+
+import { DayBoundInput } from '../../data-display/DataViews/data-views-day-input';
+
+import { statusMessage } from './DateRangePicker.range';
+import type {
+  DateRangePickerMessages,
+  DateRangeDraft,
+  DateRangeStatus,
+  DayString,
+} from './DateRangePicker.types';
+
+export interface DateRangeFieldsProps {
+  value: DateRangeDraft;
+  status: DateRangeStatus;
+  messages: DateRangePickerMessages;
+  maxRangeDays: number | undefined;
+  onEdit: (which: 'from' | 'to', bound: DayString | null) => void;
+  /** Id of the status line, so both fields can point at it. */
+  statusId: string;
+  dataTestId: string;
+}
+
+export function DateRangeFields({
+  value,
+  status,
+  messages,
+  maxRangeDays,
+  onEdit,
+  statusId,
+  dataTestId,
+}: DateRangeFieldsProps): React.JSX.Element {
+  // "Incomplete" is not an error — it is a range that is not finished yet, and
+  // painting it red would make the first click on a two-click control look like
+  // a mistake. The pair being impossible is what gets marked.
+  const rejected = !status.ok && status.problem !== 'incomplete';
+
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }}>
+        <DayBoundInput
+          label={messages.from}
+          value={value.from ?? undefined}
+          onChange={(bound) => onEdit('from', bound ?? null)}
+          testId={`${dataTestId}-from`}
+          error={rejected}
+          describedBy={statusId}
+        />
+        <DayBoundInput
+          label={messages.to}
+          value={value.to ?? undefined}
+          onChange={(bound) => onEdit('to', bound ?? null)}
+          testId={`${dataTestId}-to`}
+          error={rejected}
+          describedBy={statusId}
+        />
+      </Box>
+      <Typography
+        id={statusId}
+        // A live region, so the reason a range was refused is spoken when it
+        // appears rather than only being found by someone who goes looking.
+        role="status"
+        aria-live="polite"
+        variant="body2"
+        color={rejected ? 'error.main' : 'text.secondary'}
+        data-testid={`${dataTestId}-status`}
+      >
+        {statusMessage(status, messages, maxRangeDays)}
+      </Typography>
+    </Box>
+  );
+}

package/src/components/form/DateRangePicker/DateRangePickerQuickList.tsx

@@ -0,0 +1,144 @@
+/**
+ * The quick-pick column beside the calendar.
+ *
+ * These are BUTTONS, not links or list rows: each one sets the range and the
+ * pressed one stays visibly pressed, which is what `aria-pressed` says out
+ * loud. (A listbox with `aria-selected` would model it too — the rule is to
+ * pick one and use it for every entry, so a reader's screen reader describes
+ * the whole column the same way.)
+ *
+ * An over-cap entry is `aria-disabled` and keeps its place in the tab order,
+ * with the reason rendered under the label. Removing it, or quietly shortening
+ * the window it hands back, both answer "why can't I have this year?" with
+ * silence.
+ */
+import { Box } from '@mui/material';
+import type { SxProps, Theme } from '@mui/material';
+import React, { useId } from 'react';
+
+import type { ResolvedQuickRange } from './DateRangePicker.types';
+
+const optionSx = (active: boolean, overMax: boolean): SxProps<Theme> => ({
+  display: 'block',
+  // Full-width rows in the side column; pills in the narrow row. A fixed full
+  // width in both would make the narrow layout nine stacked lines.
+  width: { xs: 'auto', md: '100%' },
+  // A pill must not be squeezed by its neighbours — the row SCROLLS rather
+  // than compressing "Este trimestre" into two characters and an ellipsis.
+  flex: { xs: '0 0 auto', md: '0 1 auto' },
+  textAlign: 'left',
+  font: 'inherit',
+  fontSize: '0.875rem',
+  fontWeight: active ? 600 : 400,
+  lineHeight: 1.4,
+  px: 1.5,
+  py: 0.75,
+  whiteSpace: { xs: 'nowrap', md: 'normal' },
+  border: '1px solid',
+  // Narrow, an entry has to look tappable on its own, with no column and no
+  // rule to group it — so the pill carries a visible edge. Beside the calendar
+  // the group already reads as a list and a border on every row would be nine
+  // boxes where the selected one should be the only marked thing.
+  borderColor: active ? 'primary.main' : { xs: 'divider', md: 'transparent' },
+  borderRadius: { xs: 999, md: 1 },
+  cursor: overMax ? 'not-allowed' : 'pointer',
+  color: overMax ? 'text.disabled' : active ? 'primary.main' : 'text.primary',
+  backgroundColor: active ? 'action.selected' : 'transparent',
+  '&:hover': { backgroundColor: overMax ? 'transparent' : 'action.hover' },
+  '&:focus-visible': { outline: '2px solid', outlineColor: 'primary.main', outlineOffset: 1 },
+});
+
+const REASON_SX: SxProps<Theme> = {
+  display: 'block',
+  fontSize: '0.6875rem',
+  lineHeight: 1.3,
+  mt: 0.25,
+  color: 'text.disabled',
+};
+
+export interface DateRangeQuickListProps {
+  options: ResolvedQuickRange[];
+  /** The entry the current draft equals, if any. */
+  activeId: string | undefined;
+  onPick: (option: ResolvedQuickRange) => void;
+  /** Why an entry is refused, rendered under it. */
+  reasonFor: (option: ResolvedQuickRange) => string;
+  /** Accessible name of the group. */
+  label: string;
+  dataTestId: string;
+}
+
+export function DateRangeQuickList({
+  options,
+  activeId,
+  onPick,
+  reasonFor,
+  label,
+  dataTestId,
+}: DateRangeQuickListProps): React.JSX.Element {
+  const reasonPrefix = useId();
+
+  return (
+    <Box
+      role="group"
+      aria-label={label}
+      data-testid={`${dataTestId}-quick-list`}
+      sx={{
+        display: 'flex',
+        // A column beside the calendar; ONE scrolling row of pills above it
+        // once there is no width for both.
+        //
+        // Scrolling rather than wrapping: nine wrapped pills take three or four
+        // lines at 390px, which pushes the calendar most of a screen down and
+        // makes the quick ranges — the fastest way to answer — the thing you
+        // have to scroll past. One line keeps the calendar in view and costs a
+        // horizontal swipe, which is the gesture a chip row already invites.
+        flexDirection: { xs: 'row', md: 'column' },
+        flexWrap: { xs: 'nowrap', md: 'wrap' },
+        overflowX: { xs: 'auto', md: 'visible' },
+        // Room for the focus ring, which an `overflow` container would clip.
+        px: { xs: 0.25, md: 0 },
+        py: { xs: 0.25, md: 0 },
+        // The scrollbar is chrome on a phone and noise on a trackpad; the pills
+        // themselves are the affordance, and the last one sits half-cut at the
+        // edge to say the row continues.
+        scrollbarWidth: 'none',
+        '&::-webkit-scrollbar': { display: 'none' },
+        alignContent: 'flex-start',
+        gap: 0.5,
+        minWidth: { md: 168 },
+        maxWidth: { md: 200 },
+      }}
+    >
+      {options.map((option) => {
+        const active = option.id === activeId;
+        const reasonId = `${reasonPrefix}-${option.id}`;
+        return (
+          <Box
+            component="button"
+            type="button"
+            key={option.id}
+            aria-pressed={active}
+            // `aria-disabled`, never the `disabled` attribute: a disabled button
+            // is skipped by the tab order, so the reason under it is unreachable
+            // by exactly the reader most likely to need it.
+            aria-disabled={option.overMax || undefined}
+            aria-describedby={option.overMax ? reasonId : undefined}
+            data-testid={`${dataTestId}-quick-${option.id}`}
+            onClick={() => {
+              if (!option.overMax) onPick(option);
+            }}
+            sx={optionSx(active, option.overMax)}
+          >
+            {option.label}
+            {option.overMax && (
+              <Box component="span" id={reasonId} sx={REASON_SX}>
+                {reasonFor(option)}
+              </Box>
+            )}
+          </Box>
+        );
+      })}
+    </Box>
+  );
+}

package/src/components/form/DateRangePicker/index.ts

@@ -0,0 +1,25 @@
+export { DateRangePicker, DateRangePicker as default } from './DateRangePicker';
+export {
+  createQuickRanges,
+  DEFAULT_QUICK_RANGE_LABELS,
+  DEFAULT_QUICK_RANGES,
+  QUICK_RANGE_IDS,
+  type QuickRangeId,
+} from './DateRangePicker.quick';
+// The verdict the picker shows, exported so a caller's confirm button reads the
+// SAME answer instead of re-deriving it from the two strings.
+export { resolveDayRange } from './DateRangePicker.range';
+export type {
+  DateRangeChangeMeta,
+  DateRangeDraft,
+  DateRangePickerMessages,
+  DateRangePickerProps,
+  DateRangeProblem,
+  DateRangeStatus,
+  DayString,
+  DayWindow,
+  QuickRange,
+  QuickRangeContext,
+  ResolvedQuickRange,
+  WeekStart,
+} from './DateRangePicker.types';

package/src/components/form/index.ts

@@ -7,6 +7,7 @@ export * from './CepField';
 export * from './Checkbox';
 export * from './CodeEditor';
 export * from './Command';
+export * from './DateRangePicker';
 export * from './Form';
 export * from './Input';
 export * from './InputOTP';

package/src/components/navigation/Breadcrumbs/BreadcrumbEntry.tsx

@@ -191,11 +191,12 @@ const EllipsisCrumb: React.FC<{ label: string; dataTestId?: string }> = ({
           </Tooltip>
 );
 
-// The same conditional test id was written at each crumb variant.
+// The same conditional test id was written at each crumb variant. An item that
+// names its OWN id wins: see `BreadcrumbItem.dataTestId`.
 const makeTestId =
   (dataTestId?: string) =>
-  (suffix: string): string =>
-    dataTestId ? `${dataTestId}-${suffix}` : `breadcrumbs-${suffix}`;
+  (suffix: string, own?: string): string =>
+    own ?? (dataTestId ? `${dataTestId}-${suffix}` : `breadcrumbs-${suffix}`);
 
 const ClickableCrumb: React.FC<{
   item: BreadcrumbItem;
@@ -204,7 +205,7 @@ const ClickableCrumb: React.FC<{
   size: string;
   variant: string;
   isActive: boolean;
-  testId: (suffix: string) => string;
+  testId: (suffix: string, own?: string) => string;
 }> = ({ item, index, icon, size, variant, isActive, testId }) => (
   <Tooltip title={item.tooltip || item.label} arrow disableHoverListener={!item.tooltip}>
     <BreadcrumbLink
@@ -215,7 +216,7 @@ const ClickableCrumb: React.FC<{
       active={isActive}
       underline="none"
       aria-label={item.ariaLabel || item.label}
-      data-testid={testId(`link-${index}`)}
+      data-testid={testId(`link-${index}`, item.dataTestId)}
     >
       {icon}
       <span>{item.label}</span>
@@ -283,7 +284,7 @@ export const BreadcrumbEntry: React.FC<{
         size={size}
         visualStyle={variant}
         aria-current="page"
-        data-testid={testId(`item-${index}`)}
+        data-testid={testId(`item-${index}`, item.dataTestId)}
       >
         {icon}
         <span>{item.label}</span>

package/src/components/navigation/Breadcrumbs/Breadcrumbs.types.ts

@@ -37,7 +37,18 @@ export interface BreadcrumbItem {
    * Custom aria-label for accessibility
    */
   ariaLabel?: string;
-  
+
+  /**
+   * Test id for THIS crumb, replacing the trail's positional
+   * `<dataTestId>-link-<index>` / `<dataTestId>-item-<index>`.
+   *
+   * A trail that takes over from an older affordance has to keep that
+   * affordance's id, and the positional one cannot: a crumb's index moves the
+   * moment the trail grows a step — which is exactly what happens when a
+   * screen gains an "editing" level.
+   */
+  dataTestId?: string;
+
   /**
    * Internal flag for ellipsis items (used in collapsed behavior)
    * @internal