@autobusal/common 1.30.0 → 1.32.0

package/CHANGELOG.md

@@ -1,6 +1,22 @@
 # Changelog
 
 
+## 1.32.0
+
+### Added
+
+- **Drag & drop on `File`**, the shared upload control used everywhere in the app - drop a file directly onto it instead of always going through the native picker. The control's own footprint (a single 38px-tall inline button) is unchanged everywhere it is already used; only a border/background highlight appears while dragging. A dropped file is handed to the same hidden `<input>` react-hook-form already registered, via a real dispatched `change` event, so every existing caller's validation/onChange keeps working with no changes on their end.
+
+### Fixed
+
+- **A checkbox row with a long notice no longer stretches sideways.** `.row-checkbox`'s label+input are laid out `flex-direction: row-reverse`, and the row's own notice/error text (a plain div) was sharing that same row - a short notice fit fine, but a longer one (two sentences, easily) stretched the row's WIDTH to fit on one line, visibly pushing the checkbox by however long the text happened to be. Every div child of a checkbox row now gets `flex-basis: 100%`, dropping straight onto its own full-width line; the label and input are unaffected.
+
+## 1.31.0
+
+### Added
+
+- **A `row-component` field spans the full row width**, same as `row-textarea-html` already did - what lets a Viewer form's own section headings (`SectionHeading`, admin-label's Content/styles.ts) sit as a full-width divider instead of sharing a row with whatever field lands beside them.
+
 ## 1.30.0
 
 ### Changed

package/File/File.tsx

@@ -19,6 +19,7 @@ interface Props {
 const File = ({ name, value, validation, multiple, t, refs }: Props): JSX.Element => {
   const [ uploaded, setUploaded ] = useState<boolean>(false);
   const [ preview, setPreview ] = useState<boolean>(false);
+  const [ dragging, setDragging ] = useState<boolean>(false);
 
   const inputRef = useRef<HTMLInputElement | null>(null);
 
@@ -46,11 +47,53 @@ const File = ({ name, value, validation, multiple, t, refs }: Props): JSX.Elemen
     }
   };
 
+  /**
+   * Ferjolt Ozuni - Date: 2026-08-08
+   *
+   * A dropped file has to land on the actual hidden <input> - it is the
+   * one react-hook-form registered via refs(name, rules), and that
+   * registration is what onSave ultimately reads. The DataTransfer/
+   * dispatchEvent pair is the standard way to hand a File to a native
+   * file input programmatically: assigning to `.files` directly is
+   * read-only on the input itself, but an input accepts a `FileList`
+   * built via DataTransfer, and dispatching a real 'change' event (not
+   * calling the onChange prop directly) is what makes React's own
+   * synthetic-event system - and therefore RHF's registration - see it,
+   * exactly as if the browser's own file picker had fired it.
+   */
+  const onDrop = (event: React.DragEvent<HTMLDivElement>): void => {
+    event.preventDefault();
+    setDragging(false);
+
+    const dropped = event.dataTransfer.files;
+
+    if (!inputRef.current || dropped.length === 0) {
+      return;
+    }
+
+    const transfer = new DataTransfer();
+
+    Array.from(multiple ? dropped : [ dropped[0] ]).forEach(file => transfer.items.add(file));
+
+    inputRef.current.files = transfer.files;
+    inputRef.current.dispatchEvent(new Event('change', { bubbles: true }));
+  };
+
+  const onDragOver = (event: React.DragEvent<HTMLDivElement>): void => {
+    event.preventDefault();
+    setDragging(true);
+  };
+
   const type = multiple ? 'multiple' : 'single';
 
   return (
     <>
-      <Container>
+      <Container
+        $dragging={ dragging }
+        onDragOver={ onDragOver }
+        onDragLeave={ () => setDragging(false) }
+        onDrop={ onDrop }
+      >
         <input
           { ...rest }
           type="file"

package/File/styles.ts

@@ -1,11 +1,27 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
-export const Container = styled.div`
+/**
+ * Ferjolt Ozuni - Date: 2026-08-08
+ * `$dragging` only changes the border/background while a file is being
+ * dragged over it - the box itself stays the same 38px-tall inline
+ * control everywhere this component is already used (tables, dense
+ * forms), rather than growing into a big dropzone that would only fit
+ * some of its callers.
+ */
+export const Container = styled.div<{ $dragging?: boolean }>`
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
   height: 38px;
+  border-radius: ${ props => props.theme.borderRadius };
+  transition: background 0.15s ease;
+
+  ${ props => props.$dragging && css`
+    background: ${ props.theme.primary.neutral };
+    outline: 2px dashed ${ props.theme.primary.normal };
+    outline-offset: 2px;
+  ` }
 `;
 
 export const ImgView = styled.img`

package/Viewer/styles.ts

@@ -3,8 +3,25 @@ import styled from 'styled-components';
 export const Container = styled.div`
   & > div.row-checkbox {
     flex-direction: row-reverse;
+    flex-wrap: wrap;
     justify-content: left;
-    height: 20px;
+    min-height: 20px;
+
+    /*
+     * Edited: Ferjolt Ozuni - Date: 2026-08-08
+     * A checkbox row's own notice/error text is a DIV (Notice, Item's
+     * error Display) sharing this row's flex layout with the label
+     * (a span) and the checkbox input - row-reverse was fine for just
+     * those two, but any row with a real notice attached (Construction's
+     * "enabled" checkbox is two full sentences) stretched the row's WIDTH
+     * to fit the text on one line instead of wrapping it, visibly pushing
+     * the checkbox sideways by however long the notice happened to be.
+     * Forcing every div child onto its own full-width line - the label
+     * and the input stay row-reversed exactly as before.
+     */
+    & > div {
+      flex-basis: 100%;
+    }
   }
 
   @media (min-width: 540px) {
@@ -36,6 +53,18 @@ export const Container = styled.div`
     & > div.row-textarea-html {
       flex-basis: 100% !important;
     }
+
+    /*
+     * Edited: Ferjolt Ozuni - Date: 2026-08-08
+     * A 'component' row gets the full width too, same reasoning as
+     * row-textarea-html above - it is how a form's own section headings
+     * (SectionHeading, see admin-label's Content/styles.ts) span the row
+     * instead of sharing it with whatever field happens to land beside
+     * them.
+     */
+    & > div.row-component {
+      flex-basis: 100% !important;
+    }
   }
 
   /*

package/package.json

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