@autobusal/common 1.34.1 → 1.36.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 1.36.0 (2026-08-29)
+
+- Editors offer Save & Close alongside Save & Stay, so correcting a record no longer bounces you back to its list every time (opt-in per page, editing only). The pair is driven from here (Viewer + Actions).
+
+## 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/Viewer/Actions.tsx

@@ -19,6 +19,25 @@ interface Props {
 const Actions = ({ id, available, pending, confirm, t, onDelete }: Props): JSX.Element => {
   const options: ActionData[] = [];
 
+  /**
+   * Edited: Claude - Date: 2026-08-29
+   *
+   * Two ways to save, when the page asks for them (actions={['save',
+   * 'save_stay', ...]}): one that returns to the list this record came
+   * from, one that keeps it open for another edit. Saving used to always
+   * throw you back to the list, so correcting three fields on one record
+   * meant three round trips through it.
+   *
+   * Opt-in per page, because "close" has to mean something: the brand
+   * settings, the ticket editors and the notification preferences have no
+   * list to go back to and keep their single Save.
+   *
+   * ONLY WHEN EDITING. On a create form there is nothing to stay on - the
+   * record has no id yet, so the form would sit there still full, and the
+   * obvious next click would file a duplicate.
+   */
+  const paired = available.includes('save_stay') && id > 0;
+
   const onAskDelete = (): void => {
     if (window.confirm(confirm ?? t('table.confirm', { ns: 'common' }))) {
       if (onDelete) {
@@ -37,7 +56,9 @@ const Actions = ({ id, available, pending, confirm, t, onDelete }: Props): JSX.E
 
   if (available.includes('save')) {
     options.push({
-      label: t('table.actions.save', { ns: 'common' }),
+      // with a second save button beside it, "Save" no longer says what
+      // THIS one does
+      label: t(paired ? 'table.actions.save_close' : 'table.actions.save', { ns: 'common' }),
       icon: <RiSave2Line />,
       type: 'submit'
     });
@@ -68,12 +89,24 @@ const Actions = ({ id, available, pending, confirm, t, onDelete }: Props): JSX.E
 
   if (available.includes('update')) {
     options.push({
-      label: t('table.actions.update', { ns: 'common' }),
+      label: t(paired ? 'table.actions.save_close' : 'table.actions.update', { ns: 'common' }),
       icon: <BiEditAlt />,
       type: 'submit'
     });
   }
 
+  // second, so the first submit button - the one Enter presses - stays the
+  // one that has always been there
+  if (paired) {
+    options.push({
+      label: t('table.actions.save_stay', { ns: 'common' }),
+      icon: <RiSave2Line />,
+      type: 'submit',
+      name: 'intent',
+      value: 'stay'
+    });
+  }
+
   if (available.includes('approve')) {
     options.push({
       label: t('table.actions.approve', { ns: 'common' }),

package/Viewer/Viewer.tsx

@@ -21,7 +21,15 @@ interface Props {
    */
   confirm?: string
   t: TFunction<'common'>
-  onSave?: (data: any) => void
+  /**
+   * Edited: Claude - Date: 2026-08-29
+   *
+   * `stay` is true when the editor was saved with "Save & Stay" rather than
+   * "Save & Close" - the page keeps the record open instead of returning to
+   * its list. Optional, so a form that never navigates anyway (the brand
+   * settings, the ticket editors) needs no change and offers one button.
+   */
+  onSave?: (data: any, stay?: boolean) => void
   onDelete?: (data?: any) => void
   // Edited: Ferjolt Ozuni - Date: 2026-07-31
   // Optional second submit-type action (actions={['save', 'test']}) - e.g.
@@ -62,7 +70,10 @@ const Viewer = ({ id, type, data, fetching, pending, actions, confirm, t, onSave
     }
 
     if (onSave !== undefined) {
-      onSave(data);
+      // 'stay' is set by the second save button (see Actions.tsx); every
+      // other submitter - including plain Enter, which fires the FIRST
+      // button - leaves it undefined and the page closes as it always has
+      onSave(data, submitter?.value === 'stay');
     }
   };
 

package/package.json

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