@apliteni/apliteni-ui 0.131.0 → 0.133.0

package/guidelines/file-drop.md

@@ -6,13 +6,13 @@
 
 **Rule:** At rest, a file drop is one row: the button that opens the picker and the accepted types beside it.
 
-**Why:** A tall box holds the page's best space open for a file that arrives once a month.
+**Why:** A tall box holds the page's best space for a file that arrives once a month.
 
 **Do:** Put an Upload button and “PDF or CSV, up to 10 MB” on one line above the list they feed.
 
 **Don't:** Draw a tall dashed box with a glyph, an invitation and a button stacked inside it.
 
-**Except:** A page whose whole purpose is receiving one file may use the field-sized picker, which carries a label of its own.
+**Except:** A page that exists to receive one file may use the field-sized picker, which has its own label. An empty page may show a dashed drop area until the first file arrives. See #458 for this exception.
 
 ## Paint the target only while a file is over it
 
@@ -26,15 +26,17 @@
 
 **Don't:** Cover the whole window when one panel accepts the file.
 
+**Except:** A page that takes files anywhere may cover the whole page, slightly transparent and blurred over a table. See #458 for this exception.
+
 ## Keep the file in the row it arrived in
 
 <!-- rule: in-the-row -->
 
 **Rule:** After the drop, the file's name, size and progress take the place the button was in, with remove on the name's line.
 
-**Why:** A row that changes in place keeps the page still while the file uploads.
+**Why:** A row that changes in place keeps the page still during the upload.
 
-**Do:** Give the name a line with remove at its end, put the size under it, and run the progress track the full width below both.
+**Do:** Put remove at the end of the name's line, the size under it, and the progress track below both.
 
 **Don't:** Push the list down with a progress card, or open a dialog over the page.
 
@@ -44,7 +46,7 @@
 
 **Rule:** A refused file keeps its place, says what it did wrong under its name, and offers Retry beside Remove.
 
-**Why:** A row that drops the file sends the reader back to choosing one. The reason is the one string here that has to be read in full, so it gets a line rather than a share of one.
+**Why:** A row that drops the file sends the reader back to choosing one.
 
 **Do:** Keep the name on its line and say “Larger than 10 MB” under it, with Retry.
 
@@ -80,8 +82,8 @@
 
 **Rule:** Use a row where the file joins a list on the page, a region when one panel owns the file, and a dialog only when the upload needs answers of its own.
 
-**Why:** A dialog that asks nothing is one more thing to dismiss. The rule picks between three containers, so a drawing would show one of them and not the choice.
+**Why:** A dialog that asks nothing is one more thing to dismiss. A drawing would show one container, not the choice.
 
-**Do:** Take a statement into the row under the statements it joins, and a replacement logo into the panel that shows it.
+**Do:** Take a statement into the row under the statements it joins.
 
 **Don't:** Open a dialog for one file that the row behind it could have taken.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.131.0",
+  "version": "0.133.0",
 
   "workspaces": [
     "react"

package/react/dist/index.css

@@ -847,6 +847,43 @@
 .ui-drop.is-disabled .ui-drop__name {
   color: var(--disabled-ink);
 }
+.ui-drop--area {
+  border: 1px dashed var(--border-strong);
+  border-radius: var(--radius-lg);
+  padding: var(--space-4);
+}
+.ui-drop--area.is-dragging {
+  border-color: var(--accent);
+}
+@media (max-width: 560px) {
+  .ui-drop--area {
+    padding: var(--space-3);
+  }
+}
+.ui-drop--page {
+  position: fixed;
+  inset: calc(var(--ui-app-band, 0px) + var(--ui-app-top, 0px) + var(--space-4)) var(--space-4) var(--space-4);
+  z-index: var(--z-overlay);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  background: var(--bg);
+}
+@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
+  .ui-drop--page {
+    background: color-mix(in srgb, var(--bg) 80%, transparent);
+    -webkit-backdrop-filter: blur(var(--space-2));
+    backdrop-filter: blur(var(--space-2));
+  }
+}
+@media (prefers-reduced-transparency: reduce) {
+  .ui-drop--page {
+    background: var(--bg);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+}
 
 /* src/Toast.css */
 .rx-toast-stack {
@@ -907,6 +944,9 @@
     gap: var(--space-1);
     padding-inline: var(--space-2);
   }
+  .ui-react-app .ui-app__bar:not(:has(> .ui-app__menu:first-child)) {
+    padding-inline-start: var(--space-4);
+  }
   .ui-react-app .ui-app__bar-gap {
     display: none;
   }

package/react/dist/index.d.ts

@@ -759,6 +759,12 @@ type FileDropProps = {
     label?: string;
     /** The accepted types and the size limit, stated once beside the button. */
     note?: string;
+    /** Makes the drop an empty page's area: a dashed box around a first-run block with this title,
+     *  the note and the button. The block stands in for the row and `children`, and the page
+     *  leaves the area when the first file arrives, so it never shows a file in hand. */
+    title?: string;
+    /** Lets the picker take several files. */
+    multiple?: boolean;
     /** Filters the system picker only; the consumer still validates the file. */
     accept?: string;
     /** The words on the drop target. */
@@ -771,14 +777,17 @@ type FileDropProps = {
     /** Drives the target from a parent that owns the drag region. */
     dragging?: boolean;
     disabled?: boolean;
+    /** The first file chosen or dropped. */
     onFile?: (file: File) => void;
+    /** Every file chosen or dropped, together. A consumer may pass both props. */
+    onFiles?: (files: File[]) => void;
     onRemove?: () => void;
     onRetry?: () => void;
     /** What the region accepts the file for; the target covers it while dragging. */
     children?: ReactNode;
     className?: string;
 };
-declare function FileDrop({ label, note, accept, dropLabel, removeLabel, retryLabel, file, dragging, disabled, onFile, onRemove, onRetry, children, className, }: FileDropProps): react.JSX.Element;
+declare function FileDrop({ label, note, title, multiple, accept, dropLabel, removeLabel, retryLabel, file, dragging, disabled, onFile, onFiles, onRemove, onRetry, children, className, }: FileDropProps): react.JSX.Element;
 
 type SearchFieldProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'aria-label'> & {
     /** The control's name. A toolbar search box shows no label, so this is the