@autobusal/common 1.4.0 → 1.4.2

package/Avatar.tsx

@@ -8,7 +8,7 @@ interface Props {
 
 const Avatar = ({ display }: Props): JSX.Element => (
   <Container>
-    { display?.logo_url !== '' && <img src={ display?.logo_url } />}
+    { display?.logo_url !== '' && <img src={ display?.logo_url } alt={ display?.company } />}
     { display?.company }
   </Container>
 );

package/CHANGELOG.md

@@ -0,0 +1,48 @@
+# Changelog
+
+All notable changes to `@autobusal/common` are documented here. This project follows
+[Keep a Changelog](https://keepachangelog.com/) and [Semantic Versioning](https://semver.org/).
+
+## [1.4.2] - 2026-07-19
+
+### Added
+
+- **Cross-field validation + masked pre-fill for `Password` (`Password/Password.tsx`).** Added
+  an optional `getValues` prop (react-hook-form's `UseFormGetValues`) that is threaded into
+  `Validate(...)`, enabling cross-field rules like `matches:password` (e.g. a
+  password-confirmation field). Added an optional `defaultValue` prop applied to the input so
+  an admin edit form can render a saved secret as masked dots instead of blank, so editing a
+  different field no longer wipes the stored password on save.
+- **Keyboard accessibility for the calendar day picker (`Calendar/Days.tsx`,
+  `Calendar/styles.ts`).** Day cells now expose `role="button"`, `tabIndex` (`-1` when
+  disabled), `aria-disabled`, `aria-pressed`, and an `onKeyDown` handler that activates on
+  Enter/Space, plus a `:focus-visible` outline. Days are now selectable via keyboard, not
+  only mouse.
+- **Debounced type-to-filter search (`Table/Top/Search.tsx`).** The table search input now
+  submits automatically ~500ms after the user stops typing (via a `useEffect`/`setTimeout`
+  with an initial-render guard using `useRef`), instead of requiring an Enter press that
+  nothing on screen advertised. Explicit Enter submit is preserved.
+
+### Changed
+
+- **`Password` pre-fill wired through the dynamic viewer (`Viewer/Data.tsx`).** The `password`
+  field case now passes `defaultValue={ value.string }` to `Password`, so saved password
+  values hydrate as masked input in generated forms.
+- **Confirm-password persistence of language selection (`ChangeLanguage/ChangeLanguage.tsx`).**
+  Language changes are now persisted to `localStorage['language']` so the chosen language
+  survives reloads rather than resetting to the default.
+- **Explicit `common` namespace on i18n lookups (`Gender.tsx`, `Seats/ChooseSeat.tsx`).**
+  Translation calls now pass `{ ns: 'common' }` (gender male/female labels; seat
+  chosen/choose labels) so the correct namespace resolves and the raw key is no longer shown
+  when the component is used outside the default namespace context.
+- **Styled Calendar browse dropdown (`Calendar/Browse/styles.ts`).** The select now has a
+  visible border, border-radius, padding, pointer cursor, and a custom chevron background,
+  replacing `border: none` so it reads as an interactive control.
+
+### Fixed
+
+- **Missing image alt text (`Avatar.tsx`, `CompanyItem/CompanyItem.tsx`, `RouteItem/RouteItem.tsx`).**
+  Operator/company logo `<img>` tags now include `alt={ ...company }`, giving screen readers a
+  meaningful label and a fallback when the logo fails to load.
+
+Authored by Ferjolt Ozuni. Consolidated from the magus and alvavel whitelabel patch sets into canonical @autobusal source (eliminates per-repo patch-package divergence).

package/Calendar/Browse/styles.ts

@@ -30,5 +30,11 @@ export const Select = styled.select<{$type?: 'year'}>`
   `}
   text-align: center;
   background-color: ${ props => props.theme.background.neutral };
-  border: none;
+  border: 1px solid ${ props => props.theme.inputs.border };
+  border-radius: ${ props => props.theme.borderRadius };
+  padding: 0 22px 0 8px;
+  cursor: pointer;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 6px center;
 `;

package/Calendar/Days.tsx

@@ -81,6 +81,16 @@ const Days = ({ type, value, selected, onSelected }: Props): JSX.Element => {
             $disabled={ disabled } 
             $selected={ selected === currentValue } 
             onClick={ () => onSelected(currentValue, disabled) }
+            role="button"
+            tabIndex={ disabled ? -1 : 0 }
+            aria-disabled={ disabled }
+            aria-pressed={ selected === currentValue }
+            onKeyDown={ event => {
+              if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                onSelected(currentValue, disabled);
+              }
+            } }
           >
             <span>{ currentDay }</span>
           </Day>

package/Calendar/styles.ts

@@ -66,4 +66,9 @@ export const Day = styled.div<{
   &:hover > span {
     background-color: ${ props => props.theme.background.neutral };
   }
+
+  &:focus-visible {
+    outline: 2px solid ${ props => props.theme.primary.normal };
+    outline-offset: 2px;
+  }
 `;

package/ChangeLanguage/ChangeLanguage.tsx

@@ -21,6 +21,7 @@ const ChangeLanguage = ({ type, t, i18n, onClose }: Props): JSX.Element => {
 
   const onChange = (language: string): void => {
     i18n.changeLanguage(language);
+    localStorage.setItem('language', language);
     onClose();
   };
 

package/CompanyItem/CompanyItem.tsx

@@ -16,12 +16,12 @@ const CompanyItem = ({ item, type }: Props): JSX.Element => {
       { type === 'operator'
         ? (
           <LinkLogo to={ item.link }>
-            <img src={ item.logo_url } />
+            <img src={ item.logo_url } alt={ item.company } />
           </LinkLogo>
         )
         : (
           <ContainerLogo>
-            <img src={ item.logo_url } />
+            <img src={ item.logo_url } alt={ item.company } />
           </ContainerLogo>
         ) }
 

package/CookieNotification/CookieNotification.tsx

@@ -8,7 +8,7 @@ interface Props {
 }
 
 const CookieNotification = ({ t }: Props): (JSX.Element | null) => {
-  const status = document.cookie.indexOf('CookieNotification=viewed') == -1;
+  const status = document.cookie.indexOf('OBTCookieNotification=viewed') == -1;
 
   const [ show, setShow ] = useState<boolean>(status);
 
@@ -18,7 +18,7 @@ const CookieNotification = ({ t }: Props): (JSX.Element | null) => {
     const CookieDate = new Date();
     CookieDate.setFullYear(CookieDate.getFullYear() + 1);
 
-    document.cookie = 'OBTCookieNotification=viewed; expires=' + CookieDate.toUTCString() + '; path=/; SameSite=None; Secure';
+    document.cookie = 'OBTCookieNotification=viewed; expires=' + CookieDate.toUTCString() + '; path=/';
   };
 
   if (! show) {

package/Gender.tsx

@@ -19,7 +19,7 @@ const Gender = ({ name, defaultValue, t, refs }: Props) => (
           { ...refs(name) }
         />
 
-        { t('data.gender.male') }
+        { t('data.gender.male', { ns: 'common' }) }
       </label>
 
       <label>
@@ -30,7 +30,7 @@ const Gender = ({ name, defaultValue, t, refs }: Props) => (
           { ...refs(name) }
         />
 
-        { t('data.gender.female') }
+        { t('data.gender.female', { ns: 'common' }) }
       </label>
     </div>
   </div>

package/Password/Password.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { TFunction } from 'i18next';
-import { UseFormRegister } from 'react-hook-form';
+import { UseFormRegister, UseFormGetValues } from 'react-hook-form';
 import { AiFillEye, AiFillEyeInvisible } from 'react-icons/ai';
 import { Validate } from '@autobusal/utilities';
 import { Container } from './styles';
@@ -9,20 +9,26 @@ interface Props {
   name: string
   tabIndex?: number
   validation?: string
+  // Pre-fill value (masked). Lets an admin form show a saved secret as dots
+  // instead of blank, so editing another field doesn't wipe it on save.
+  defaultValue?: string
   t: TFunction<'common'>
   refs: UseFormRegister<any>
+  // Pass react-hook-form's getValues to enable cross-field rules like
+  // `matches:password` (e.g. a password-confirmation field).
+  getValues?: UseFormGetValues<any>
 }
 
-const Password = ({ name, tabIndex, validation, t, refs }: Props): JSX.Element => {
+const Password = ({ name, tabIndex, validation, defaultValue, t, refs, getValues }: Props): JSX.Element => {
   const [ show, setShow ] = useState<boolean>(false);
 
   const toggle = (): void => {
     setShow(!show)
   };
-  
+
   return (
     <Container>
-      <input type={ show ? 'text' : 'password' } tabIndex={ tabIndex } { ...refs(name, Validate(validation ?? '', t)) } />
+      <input type={ show ? 'text' : 'password' } tabIndex={ tabIndex } defaultValue={ defaultValue } { ...refs(name, Validate(validation ?? '', t, getValues)) } />
 
       { show
         ? <AiFillEye onClick={ toggle } />
@@ -32,4 +38,4 @@ const Password = ({ name, tabIndex, validation, t, refs }: Props): JSX.Element =
   );
 };
 
-export default Password;
+export default Password;

package/RouteItem/RouteItem.tsx

@@ -21,7 +21,7 @@ const RouteItem = ({ type, route, t }: Props): JSX.Element => {
       <About>
         <Image>
           <Logo to={ route.operator.link }>
-            <img src={ route.operator.logo_url } />
+            <img src={ route.operator.logo_url } alt={ route.operator.company } />
           </Logo>
         </Image>
 

package/Seats/ChooseSeat.tsx

@@ -45,8 +45,8 @@ const ChooseSeat = ({ name, type, defaultValue, bus, picked, validation, t, refs
     <div>
       <ButtonSeat type="button" $selected={ selected > 0 } onClick={ () => setShow(true) }>
         { selected > 0
-          ? <><FaCheck /> { t('seats.chosen', { number: selected }) }</>
-          : <><MdEventSeat /> { t('seats.choose') }</> }
+          ? <><FaCheck /> { t('seats.chosen', { ns: 'common', number: selected }) }</>
+          : <><MdEventSeat /> { t('seats.choose', { ns: 'common' }) }</> }
       </ButtonSeat>
 
       { (show && bus.bus !== undefined) && (

package/Table/Top/Search.tsx

@@ -1,4 +1,4 @@
-import { FormEvent, useState } from 'react';
+import { FormEvent, useEffect, useRef, useState } from 'react';
 import { NavigateFunction } from 'react-router-dom';
 import { TFunction } from 'i18next';
 import { parseUrl } from '../browseUrl';
@@ -13,12 +13,33 @@ interface Props {
 const Search = ({ value, url, t, navigate }: Props): JSX.Element => {
   const [ q, setQ ] = useState<string>(String(value ?? ''));
 
-  const handleSubmit = (event: FormEvent<HTMLFormElement>): void => {
-    event.preventDefault();
+  const initial = useRef<boolean>(true);
 
+  const submit = (): void => {
     const search = parseUrl({ page: 1, q });
 
     navigate(`${ url }${ search }`);
+  };
+
+  // typing filters after a short pause - submitting was previously only
+  // possible via Enter, which nothing on screen suggested
+  useEffect(() => {
+    if (initial.current) {
+      initial.current = false;
+
+      return;
+    }
+
+    const timer = setTimeout(submit, 500);
+
+    return () => clearTimeout(timer);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [q]);
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>): void => {
+    event.preventDefault();
+
+    submit();
   }
 
   return (
@@ -33,4 +54,4 @@ const Search = ({ value, url, t, navigate }: Props): JSX.Element => {
   );
 };
 
-export default Search;
+export default Search;

package/Viewer/Data.tsx

@@ -97,7 +97,7 @@ const Data = ({ id, item, refs, t, onUpdate }: Props): (JSX.Element | null) => {
       return <input type="number" defaultValue={ value.number } { ...refs(item.name, Validate(String(item.rules), t)) } />
 
     case 'password':
-      return <Password name={ item.name } validation={ item.rules } t={ t } refs={ refs } />;
+      return <Password name={ item.name } validation={ item.rules } defaultValue={ value.string } t={ t } refs={ refs } />;
 
     case 'select':
       return <Dropdown item={ item } refs={ refs } t={ t } />;

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@autobusal/common",
-  "version": "1.4.0",
+  "version": "1.4.2",
+  "author": "Ferjolt Ozuni",
   "type": "module",
   "main": "index.ts"
 }