@autobusal/common 1.34.1 → 1.35.0

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 1.35.0 (2026-08-29)
+
+- RouteFeature's compact chip draws a real tooltip on hover AND on focus, so a tap reveals the amenity name; `title` alone was invisible on touch and slow on desktop.
+- Calendar treats an unparseable defaultValue as nothing chosen, and anchors an empty picker on its minDate - so a floored picker (the return leg) opens on the month being travelled rather than on today or on January.
+
 ## 1.34.1 (2026-08-29)
 
 - Meta's stale-tag cleanup can no longer remove a tag React owns: it now identifies leftovers by having existed before React rendered, not by comparing values (Sentry BUSMAGUS-7 - on a prerendered page the leftover and the live tag carry the same value, so the old comparison deleted React's own node and the next navigation crashed on removeChild).

package/Calendar/Calendar.tsx

@@ -2,7 +2,7 @@ import { useState, useRef } from 'react';
 import { UseFormRegister, UseFormSetValue } from 'react-hook-form';
 import { TFunction } from 'i18next';
 import { useOutside } from '@autobusal/hooks';
-import { Validate, prepareDate } from '@autobusal/utilities';
+import { Validate, prepareDate, isPreparedDate } from '@autobusal/utilities';
 import Picker from './Picker';
 import { Container } from './styles';
 
@@ -68,8 +68,18 @@ const Calendar = ({ type, name, label, id, defaultValue, t, validation, minDate,
    * Empty instead, so the field reads as unanswered and the API's
    * `required|date_format:d/m/Y|before:today` says so if it is left that way.
    */
+  /*
+   * Edited: Claude - Date: 2026-08-29
+   *
+   * A defaultValue that is not a date is NOTHING CHOSEN, not a value.
+   * `??` only catches null/undefined, so the search URL's literal "none"
+   * (what it carries for "no return leg") came through as a real value:
+   * the input displayed the word, and the picker built its grid from
+   * createDate('none') - an Invalid Date - so the round-trip calendar
+   * opened on January instead of the month being travelled.
+   */
   const [ prepared, setPrepared ] = useState<string>(
-    defaultValue ?? (type === 'dob' ? '' : prepareDate(new Date()))
+    isPreparedDate(defaultValue) ? String(defaultValue) : (type === 'dob' ? '' : prepareDate(new Date()))
   );
   const [ selected, setSelected ] = useState<string>(prepared);
 
@@ -99,7 +109,13 @@ const Calendar = ({ type, name, label, id, defaultValue, t, validation, minDate,
           // is an Invalid Date and the grid built from it renders as nothing.
           // The anchor is display only - what the form submits stays empty
           // until a day is actually clicked.
-          value={ prepared || prepareDate(new Date()) }
+          /*
+           * Edited: Claude - Date: 2026-08-29: with nothing chosen, open on
+           * the FLOOR when there is one - the return leg's floor is the
+           * outbound's date, so its picker opens on the month being
+           * travelled rather than on today.
+           */
+          value={ prepared || (isPreparedDate(minDate) ? String(minDate) : prepareDate(new Date())) }
           selected={ selected }
           minDate={ minDate }
           maxYears={ maxYears }

package/RouteFeature/RouteFeature.tsx

@@ -1,4 +1,4 @@
-import { Container, Image, Name } from './styles';
+import { Container, Image, Name, Tooltip } from './styles';
 import { FeatureData } from '@autobusal/providers/types/routes';
 
 interface Props {
@@ -16,14 +16,33 @@ interface Props {
   compact?: boolean
 }
 
+/**
+ * Edited: Claude - Date: 2026-08-29
+ *
+ * THE NAME IS DRAWN, not merely promised to the browser.
+ *
+ * The compact chip carried the amenity name in `title` alone, which is the
+ * one tooltip mechanism nobody can rely on: desktop browsers wait about a
+ * second before drawing it, and touch devices never draw it at all - so on
+ * a phone these icons were unlabelled decoration with no way to find out
+ * what they meant. The title stays (it is what screen readers and the
+ * native tooltip use) and a real one is drawn on hover AND on focus, which
+ * a tap produces through tabIndex.
+ */
 const RouteFeature = ({ item, compact = false }: Props): JSX.Element => (
-  <Container $compact={ compact } title={ item.name }>
+  <Container
+    $compact={ compact }
+    title={ item.name }
+    tabIndex={ compact ? 0 : undefined }
+  >
     { /* alt was missing entirely before. It matters more now: with the
          label hidden the image IS the content, so without it a screen
          reader announces nothing at all for each amenity. */ }
     <Image src={ item.image_url } alt={ item.name } />
 
     { !compact && <Name>{ item.name }</Name> }
+
+    { compact && <Tooltip role="tooltip">{ item.name }</Tooltip> }
   </Container>
 );
 

package/RouteFeature/styles.ts

@@ -19,8 +19,24 @@ export const Container = styled.div<{ $compact?: boolean }>`
    * template literal, where a backtick terminates the string.)
    */
   ${ props => props.$compact && css`
+    position: relative;
     padding: 5px;
     cursor: help;
+
+    /* Claude - 2026-08-29: the tooltip below is positioned against this
+       chip, and appears on hover or on focus - a tap focuses it, which is
+       the only way a touch device can ever reveal an icon's meaning. */
+    &:hover > span,
+    &:focus > span,
+    &:focus-within > span {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    &:focus {
+      outline: 2px solid ${ props => props.theme.primary.normal };
+      outline-offset: 2px;
+    }
   ` }
 `;
 
@@ -32,3 +48,31 @@ export const Image = styled.img`
 export const Name = styled.span`
   font-size: ${ props => props.theme.size.xs };
 `;
+
+/**
+ * The amenity's name, drawn above its chip.
+ *
+ * Claude - Date: 2026-08-29
+ *
+ * `visibility` alongside `opacity` so the label is genuinely inert while
+ * hidden - a transparent tooltip still takes the pointer, and one sitting
+ * over the chip below it would eat that chip's own hover.
+ */
+export const Tooltip = styled.span`
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 50%;
+  z-index: 20;
+  transform: translateX(-50%);
+  padding: 4px 8px;
+  font-size: ${ props => props.theme.size.xs };
+  line-height: 1.4;
+  white-space: nowrap;
+  color: ${ props => props.theme.primary.contrast };
+  background: ${ props => props.theme.primary.normal };
+  border-radius: ${ props => props.theme.borderRadius };
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity 0.2s ease;
+`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobusal/common",
-  "version": "1.34.1",
+  "version": "1.35.0",
   "author": "Ferjolt Ozuni",
   "type": "module",
   "main": "index.ts"