@autobusal/common 1.27.4 → 1.28.0

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # Changelog
 
+
+## 1.28.0
+
+### Added
+
+- **`Row` takes an optional `actions`**, overriding the table's list for that
+  row. The table-level prop is one array for every row, which cannot express
+  an action only some rows have earned - a ticket download belongs to a paid
+  order and to no other. `Rows` falls back to the table's list, so every
+  existing caller is unaffected.
+- **`print` and `invoice` row-action icons.** Distinct from the existing
+  generic `download`.
+
+
+## 1.27.5
+
+### Added
+
+- **`placeholder` on a `select`** — a leading empty option, for "nothing
+  chosen".
+
+  A select whose value matches no option silently displays the first one and
+  the browser submits it as though it had been picked. That is exactly how
+  every profile whose owner never touched the country field was saved as
+  **Afghanistan**: it sorts first, and nothing had ever been selected.
+  Changing the default from `0` to `''` did not help on its own — neither
+  value exists as an option, so the browser fell back either way.
+
+  Rendered only when placeholder text is supplied, so a select with a real
+  default (sex, status, a type) does not grow an empty row it never wanted.
+
 ## 1.27.4
 
 ### Fixed

package/Table/Actions/Icon.tsx

@@ -4,7 +4,8 @@ import { BiEditAlt, BiTransfer, BiTrash } from 'react-icons/bi';
 import { FaTrash } from 'react-icons/fa';
 import { GiMoneyStack } from 'react-icons/gi';
 import { IoDocumentLockOutline } from 'react-icons/io5';
-import { RiBusLine, RiExternalLinkLine, RiEyeLine, RiLoginCircleLine, RiReplyLine } from 'react-icons/ri';
+import { FaFileInvoice } from 'react-icons/fa';
+import { RiBusLine, RiExternalLinkLine, RiEyeLine, RiLoginCircleLine, RiPrinterLine, RiReplyLine } from 'react-icons/ri';
 
 interface Props {
   type: string
@@ -57,6 +58,16 @@ const Icon = ({ type, t }: Props): (JSX.Element | null) => {
     case 'download':
       return <AiOutlineCloudDownload  title={ t('table.actions.custom.download', { ns: 'common' }) }  />;
 
+    // Edited: Ferjolt Ozuni - Date: 2026-08-07
+    // The ticket and its invoice, for tables that can hand both over
+    // directly - the order listing does. Distinct from 'download' above,
+    // which is the generic one already spoken for by the invoice queue.
+    case 'print':
+      return <RiPrinterLine title={ t('table.actions.custom.print', { ns: 'common' }) } />;
+
+    case 'invoice':
+      return <FaFileInvoice title={ t('table.actions.custom.invoice', { ns: 'common' }) } />;
+
     case 'bus':
       return <RiBusLine  title={ t('table.actions.custom.bus', { ns: 'common' }) }  />;
 

package/Table/Row.tsx

@@ -2,6 +2,18 @@ import { Td } from './styles';
 
 interface Props {
   id?: number
+  /*
+   * Edited: Ferjolt Ozuni - Date: 2026-08-07
+   *
+   * Options for THIS row, overriding the table's own list. The table-level
+   * `actions` prop is one array for every row, which cannot express an
+   * action that only some rows have earned - a ticket download belongs to a
+   * paid order and to no other.
+   *
+   * Read by Rows/Rows.tsx off this element's props; Row itself renders only
+   * the data cells, so it does not use the value.
+   */
+  actions?: string[]
   data: any[]
 }
 

package/Table/Rows/NotFound.tsx

@@ -4,15 +4,17 @@ import { ContainerNotFound } from './styles';
 
 interface Props {
   length: number
+  // An explanation, where there is one worth giving - see Table's `empty`.
+  message?: string
   t: TFunction<'common'>
 }
 
-const NotFound = ({ length, t }: Props): JSX.Element => (
+const NotFound = ({ length, message, t }: Props): JSX.Element => (
   <tbody>
     <tr>
       <td colSpan={ length }>
         <ContainerNotFound>
-          <RiEmotionUnhappyLine />{ t('table.no_data', { ns: 'common' }) }
+          <RiEmotionUnhappyLine />{ message ?? t('table.no_data', { ns: 'common' }) }
         </ContainerNotFound>
       </td>
     </tr>

package/Table/Rows/Rows.tsx

@@ -13,19 +13,20 @@ interface Props {
   loading: boolean
   fetching: boolean
   colLength: number
+  empty?: string
   t: TFunction<'common'>
   actions?: string[]
   handlers?: any
   navigate: NavigateFunction
 }
 
-const Rows = ({ url, urlWith, data, loading, fetching, colLength, t, actions, handlers, navigate }: Props): JSX.Element => {
+const Rows = ({ url, urlWith, data, loading, fetching, colLength, empty, t, actions, handlers, navigate }: Props): JSX.Element => {
   if (loading) {
     return <Loading length={ colLength } t={ t } />;
   }
 
   if (data?.length === 0) {
-    return <NotFound length={ colLength } t={ t } />;
+    return <NotFound length={ colLength } message={ empty } t={ t } />;
   }
 
   const isViewable = actions?.includes('view');
@@ -36,23 +37,30 @@ const Rows = ({ url, urlWith, data, loading, fetching, colLength, t, actions, ha
     }
   };
 
-  const columns = data?.map((item, index) => (
+  const columns = data?.map((item, index) => {
+    // Edited: Ferjolt Ozuni - Date: 2026-08-07
+    // A row may name its own options - see Row.tsx. Falls back to the
+    // table's list, which is what every existing caller relies on.
+    const available = item.props.actions ?? actions;
+
+    return (
     <Tr key={ index } $viewable={ isViewable } onClick={ () => onClick(item.props.id) }>
       { item }
 
-      { rowActions(actions).length > 0 && (
+      { rowActions(available).length > 0 && (
         <Actions
           id={ item.props.id }
           url={ url }
           urlWith={ urlWith }
-          available={ actions }
+          available={ available }
           t={ t }
           handlers={ handlers }
           navigate={ navigate }
         />
       ) }
     </Tr>
-  ));
+    );
+  });
 
   return (
     <Tbody $fetching={ fetching }>

package/Table/Table.tsx

@@ -21,10 +21,21 @@ interface Props {
   t: TFunction<'common'>
   actions?: string[]
   extra?: JSX.Element
+  /*
+   * Edited: Ferjolt Ozuni - Date: 2026-08-07
+   * What to say when the table is empty for a REASON, rather than merely
+   * empty. "No data found" is right for a search that matched nothing and
+   * useless for a screen that will stay empty until somebody else acts -
+   * a new agency's route list reads as a broken page rather than as one
+   * waiting on an admin to grant it operators.
+   *
+   * Optional: a table that does not pass one keeps the generic message.
+   */
+  empty?: string
   handlers?: any
 }
 
-const Table = ({ url, urlWith, columns, rows, pages, sorting, search, loading, fetching, t, actions, extra, handlers }: Props): JSX.Element => {
+const Table = ({ url, urlWith, columns, rows, pages, sorting, search, loading, fetching, t, actions, extra, empty, handlers }: Props): JSX.Element => {
   const navigate = useNavigate();
 
   const colLength = columns.length + 1;
@@ -59,6 +70,7 @@ const Table = ({ url, urlWith, columns, rows, pages, sorting, search, loading, f
               loading={ loading }
               fetching={ fetching }
               colLength={ colLength }
+              empty={ empty }
               t={ t }
               actions={ actions }
               handlers={ handlers }

package/Viewer/Item.tsx

@@ -1,7 +1,7 @@
 import { FieldErrors, UseFormRegister, UseFormSetValue } from 'react-hook-form';
 import { Display } from '@autobusal/utilities';
 import Data from './Data';
-import { Notice } from './styles';
+import { Notice, Label, Required } from './styles';
 import { ViewData } from './types';
 import { TFunction } from 'i18next';
 
@@ -16,7 +16,28 @@ interface Props {
 
 const Item = ({ id, data, refs, t, errors, onUpdate }: Props): JSX.Element => (
   <div className={ `row row-${ data.type } ${ data.label === undefined && 'spacer' }` }>
-    { data.label }
+    {/*
+      * Edited: Ferjolt Ozuni - Date: 2026-08-07
+      *
+      * Required fields say so. Read straight off the validation rules rather
+      * than a second flag per field, so a label cannot promise something the
+      * form does not enforce - or stay silent about something it does.
+      *
+      * Label and asterisk share ONE element on purpose. The row is a flex
+      * COLUMN, so a bare text node beside a sibling span makes two flex
+      * items and the asterisk drops onto a line of its own underneath.
+      *
+      * Only rendered when there is a label at all - a row without one is the
+      * spacer, and an empty element there would take a flex slot and open a
+      * gap where the divider should be.
+      */}
+    { data.label !== undefined && (
+      <Label>
+        { data.label }
+
+        { data.rules?.includes('required') && <Required aria-hidden="true">*</Required> }
+      </Label>
+    ) }
 
     <Data
       id={ id }

package/Viewer/Items/Dropdown.tsx

@@ -30,9 +30,27 @@ const Dropdown = ({ item, refs, t }: Props): (JSX.Element | null) => {
       { item.name }
     </option>
   ));
-  
+
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-06
+   *
+   * A select whose value matches NO option silently shows the first one, and
+   * the browser then submits it as though it had been chosen. That is how
+   * every profile whose owner did not touch the country field was saved as
+   * Afghanistan - it sorts first, and nothing had ever been selected.
+   *
+   * An empty leading option gives "nothing chosen" somewhere to live, so the
+   * field reads as unanswered and a `required` rule can say so. Rendered
+   * only when the caller supplies placeholder text: a select with a real
+   * default (sex, status, a type) should not grow an empty row it does not
+   * want.
+   */
   return (
-    <select defaultValue={ item?.value } { ...refs(item.name, rules) }>
+    <select defaultValue={ item?.value ?? '' } { ...refs(item.name, rules) }>
+      { item.placeholder !== undefined && (
+        <option value="">{ item.placeholder }</option>
+      ) }
+
       { values }
     </select>
   );

package/Viewer/styles.ts

@@ -25,6 +25,17 @@ export const Container = styled.div`
       height: 1px;
       background: ${ props => props.theme.background.neutral };
     }
+
+    /*
+     * Edited: Ferjolt Ozuni - Date: 2026-08-07
+     * A rich-text editor gets the full row. At a third of the width it has
+     * less room for its own toolbar than for the text, and every consumer
+     * that uses one wants it wide - so this belongs here rather than as a
+     * flag each caller has to remember to pass.
+     */
+    & > div.row-textarea-html {
+      flex-basis: 100% !important;
+    }
   }
 
   @media (min-width: 1300px) {
@@ -55,4 +66,17 @@ export const Notice = styled.div`
   font-size: ${ props => props.theme.size.xxs };
   color: ${ props => props.theme.font.info };
   font-weight: 400;
-`;
+`;
+/*
+ * Edited: Ferjolt Ozuni - Date: 2026-08-07
+ * The asterisk beside a required field's label. aria-hidden where it is
+ * used - the requirement is already carried to assistive tech by the
+ * field's own validation, and a lone "*" read aloud says nothing.
+ */
+export const Label = styled.span``;
+
+export const Required = styled.span`
+  margin-left: 3px;
+  color: ${ props => props.theme.font.error };
+  font-weight: 700;
+`;

package/Viewer/types.ts

@@ -5,6 +5,14 @@ export interface ViewData {
   name?: string
   type?: 'text' | 'select' | 'date' | 'dob' | 'picker' | 'textarea' | 'textarea-html' | 'file' | 'files' | 'email' | 'password' | 'display' | 'component' | 'checkbox' | 'checkbox-list' | 'checkbox-list-all' | 'link' | 'number' | 'float' | 'date-picker'
   value?: string | number | JSX.Element
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-06
+   * Leading empty option for a select, for "nothing chosen". Without one a
+   * select whose value matches no option silently shows - and submits - the
+   * first, which is how profiles were being saved as Afghanistan.
+   */
+  placeholder?: string
+
   values?: DropdownData[]
   selected?: any[]
   rules?: string

package/package.json

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