@byline/ui 2.2.9 → 2.3.0

package/dist/fields/field-renderer.js

@@ -137,7 +137,8 @@ const FieldRenderer = ({ field, defaultValue, basePath, disableSorting, hideLabe
                     } : field,
                     defaultValue: defaultValue,
                     onChange: handleChange,
-                    path: path
+                    path: path,
+                    collectionPath: collectionPath
                 });
             case 'image':
                 return /*#__PURE__*/ jsx(ImageField, {

package/dist/fields/file/file-field.d.ts

@@ -5,13 +5,15 @@
  *
  * Copyright (c) Infonomic Company Limited
  */
-import type { FileField as FieldType, StoredFileValue } from '@byline/core';
+import { type FileField as FieldType, type StoredFileValue } from '@byline/core';
 interface FileFieldProps {
     field: FieldType;
+    /** Collection path required to call the /upload endpoint. */
+    collectionPath?: string;
     value?: StoredFileValue | null;
     defaultValue?: StoredFileValue | null;
     onChange?: (value: StoredFileValue | null) => void;
     path?: string;
 }
-export declare const FileField: ({ field, value, defaultValue, onChange: _onChange, path, }: FileFieldProps) => import("react").JSX.Element;
+export declare const FileField: ({ field, collectionPath, value, defaultValue, onChange: _onChange, path, }: FileFieldProps) => import("react").JSX.Element;
 export {};

package/dist/fields/file/file-field.js

@@ -1,120 +1,221 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { isPendingStoredFileValue } from "@byline/core";
 import classnames from "classnames";
-import { useFieldError, useFieldValue, useIsDirty } from "../../forms/form-context.js";
-import { ErrorText } from "../../uikit.js";
+import { IconButton } from "../../components/button/icon-button.js";
+import { useFieldError, useFieldValue, useFormContext, useIsDirty, useIsFieldUploading } from "../../forms/form-context.js";
+import { CloseIcon } from "../../icons/close-icon.js";
+import { DocumentIcon } from "../../icons/document-icon.js";
+import { DownloadIcon } from "../../icons/download-icon.js";
+import { VideoIcon } from "../../icons/video-icon.js";
+import { ErrorText, HelpText, Label, LoaderRing } from "../../uikit.js";
+import { useFieldChangeHandler } from "../use-field-change-handler.js";
 import file_field_module from "./file-field.module.js";
-const FileField = ({ field, value, defaultValue, onChange: _onChange, path })=>{
+import { FileUploadField } from "./file-upload-field.js";
+function triggerDownload(url, filename) {
+    if ("u" < typeof document) return;
+    const a = document.createElement('a');
+    a.href = url;
+    if (filename) a.download = filename;
+    a.target = '_blank';
+    a.rel = 'noreferrer';
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+}
+const FileField = ({ field, collectionPath, value, defaultValue, onChange: _onChange, path })=>{
     const fieldPath = path ?? field.name;
     const fieldError = useFieldError(fieldPath);
     const isDirty = useIsDirty(fieldPath);
     const fieldValue = useFieldValue(fieldPath);
-    const incomingValue = value ?? fieldValue ?? defaultValue ?? null;
-    const isPlaceholderStoredFileValue = (v)=>{
+    const isUploading = useIsFieldUploading(fieldPath);
+    const { removePendingUpload } = useFormContext();
+    const handleChange = useFieldChangeHandler(field, fieldPath);
+    const incomingValue = isDirty ? fieldValue ?? null : value ?? fieldValue ?? defaultValue ?? null;
+    const isPending = isPendingStoredFileValue(incomingValue);
+    const isOldPlaceholder = (v)=>{
         if (!v || 'object' != typeof v) return false;
         const maybe = v;
         return 'placeholder' === maybe.storageProvider && 'pending' === maybe.storagePath;
     };
-    const effectiveValue = isPlaceholderStoredFileValue(incomingValue) ? null : incomingValue;
+    const showUploadWidget = null == incomingValue || isOldPlaceholder(incomingValue);
+    const handleRemove = ()=>{
+        if (isPending) removePendingUpload(fieldPath);
+        handleChange(null);
+    };
+    const isVideo = incomingValue?.mimeType?.startsWith('video/') === true;
+    const FileGlyph = isVideo ? VideoIcon : DocumentIcon;
+    const htmlId = fieldPath;
     return /*#__PURE__*/ jsxs("div", {
-        className: classnames('byline-field-file', field.name, isDirty && [
-            'byline-field-file-dirty',
-            file_field_module.dirty
-        ]),
+        className: `byline-field-file ${field.name}`,
         children: [
-            /*#__PURE__*/ jsxs("div", {
+            /*#__PURE__*/ jsx("div", {
                 className: classnames('byline-field-file-header', file_field_module.header),
-                children: [
-                    /*#__PURE__*/ jsxs("div", {
-                        children: [
-                            /*#__PURE__*/ jsxs("div", {
-                                className: classnames('byline-field-file-label', file_field_module.label),
-                                children: [
-                                    field.label ?? field.name,
-                                    field.optional ? '' : ' *'
-                                ]
-                            }),
-                            field.helpText && /*#__PURE__*/ jsx("div", {
-                                className: classnames('byline-field-file-help', file_field_module.help),
-                                children: field.helpText
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ jsx("button", {
-                        type: "button",
-                        className: classnames('byline-field-file-action', file_field_module.action),
-                        disabled: true,
-                        children: "Upload (coming soon)"
-                    })
-                ]
+                children: /*#__PURE__*/ jsx(Label, {
+                    id: htmlId,
+                    htmlFor: htmlId,
+                    label: field.label ?? field.name,
+                    required: !field.optional
+                })
             }),
-            null == effectiveValue ? /*#__PURE__*/ jsx("div", {
+            showUploadWidget ? collectionPath ? /*#__PURE__*/ jsx(FileUploadField, {
+                field: field,
+                collectionPath: collectionPath,
+                fieldPath: fieldPath,
+                onUploaded: (uploaded)=>{
+                    handleChange(uploaded);
+                }
+            }) : /*#__PURE__*/ jsx("div", {
                 className: classnames('byline-field-file-empty', file_field_module.empty),
                 children: "No file selected"
             }) : /*#__PURE__*/ jsxs("div", {
-                className: classnames('byline-field-file-meta', file_field_module.meta),
+                className: classnames('byline-field-file-tile', file_field_module.tile),
                 children: [
-                    /*#__PURE__*/ jsxs("div", {
-                        children: [
-                            /*#__PURE__*/ jsx("span", {
-                                className: classnames('byline-field-file-meta-key', file_field_module["meta-key"]),
-                                children: "Filename:"
-                            }),
-                            ' ',
-                            effectiveValue.filename
-                        ]
+                    isUploading && /*#__PURE__*/ jsx("div", {
+                        className: classnames('byline-field-file-uploading', file_field_module.uploading),
+                        "aria-live": "polite",
+                        "aria-busy": "true",
+                        children: /*#__PURE__*/ jsx(LoaderRing, {})
                     }),
-                    /*#__PURE__*/ jsxs("div", {
+                    collectionPath && /*#__PURE__*/ jsxs("div", {
+                        className: classnames('byline-field-file-actions', file_field_module.actions),
                         children: [
-                            /*#__PURE__*/ jsx("span", {
-                                className: classnames('byline-field-file-meta-key', file_field_module["meta-key"]),
-                                children: "Original:"
+                            !isPending && incomingValue?.storageUrl && /*#__PURE__*/ jsx(IconButton, {
+                                type: "button",
+                                intent: "noeffect",
+                                onClick: ()=>triggerDownload(incomingValue.storageUrl, incomingValue.originalFilename ?? incomingValue.filename),
+                                size: "xs",
+                                disabled: isUploading,
+                                "aria-label": "Download file",
+                                children: /*#__PURE__*/ jsx(DownloadIcon, {
+                                    width: "15px",
+                                    height: "15px"
+                                })
                             }),
-                            ' ',
-                            effectiveValue.originalFilename
+                            /*#__PURE__*/ jsx(IconButton, {
+                                type: "button",
+                                intent: "noeffect",
+                                onClick: handleRemove,
+                                size: "xs",
+                                disabled: isUploading,
+                                "aria-label": "Remove file",
+                                children: /*#__PURE__*/ jsx(CloseIcon, {
+                                    width: "15px",
+                                    height: "15px"
+                                })
+                            })
                         ]
                     }),
-                    /*#__PURE__*/ jsxs("div", {
+                    !isPending && incomingValue?.storageUrl ? /*#__PURE__*/ jsx("a", {
+                        href: incomingValue.storageUrl,
+                        target: "_blank",
+                        rel: "noreferrer",
+                        "aria-label": `Open ${incomingValue.originalFilename ?? incomingValue.filename} in a new tab`,
+                        className: classnames('byline-field-file-icon-wrap', file_field_module["icon-wrap"]),
+                        children: /*#__PURE__*/ jsx(FileGlyph, {
+                            width: "48px",
+                            height: "48px",
+                            className: classnames('byline-field-file-icon', file_field_module.icon)
+                        })
+                    }) : /*#__PURE__*/ jsxs("div", {
+                        className: classnames('byline-field-file-icon-wrap', file_field_module["icon-wrap"]),
                         children: [
-                            /*#__PURE__*/ jsx("span", {
-                                className: classnames('byline-field-file-meta-key', file_field_module["meta-key"]),
-                                children: "Type:"
+                            /*#__PURE__*/ jsx(FileGlyph, {
+                                width: "48px",
+                                height: "48px",
+                                className: classnames('byline-field-file-icon', file_field_module.icon)
                             }),
-                            ' ',
-                            effectiveValue.mimeType
+                            isPending && /*#__PURE__*/ jsx("div", {
+                                className: classnames('byline-field-file-pending', file_field_module.pending),
+                                children: "Pending upload"
+                            })
                         ]
                     }),
                     /*#__PURE__*/ jsxs("div", {
+                        className: classnames('byline-field-file-meta', file_field_module.meta),
                         children: [
-                            /*#__PURE__*/ jsx("span", {
-                                className: classnames('byline-field-file-meta-key', file_field_module["meta-key"]),
-                                children: "Size:"
+                            /*#__PURE__*/ jsxs("div", {
+                                children: [
+                                    /*#__PURE__*/ jsx("span", {
+                                        className: classnames('byline-field-file-meta-key', file_field_module["meta-key"]),
+                                        children: "Filename:"
+                                    }),
+                                    ' ',
+                                    incomingValue?.filename
+                                ]
                             }),
-                            ' ',
-                            effectiveValue.fileSize
-                        ]
-                    }),
-                    /*#__PURE__*/ jsxs("div", {
-                        children: [
-                            /*#__PURE__*/ jsx("span", {
-                                className: classnames('byline-field-file-meta-key', file_field_module["meta-key"]),
-                                children: "Storage:"
+                            /*#__PURE__*/ jsxs("div", {
+                                children: [
+                                    /*#__PURE__*/ jsx("span", {
+                                        className: classnames('byline-field-file-meta-key', file_field_module["meta-key"]),
+                                        children: "Original:"
+                                    }),
+                                    ' ',
+                                    incomingValue?.originalFilename
+                                ]
                             }),
-                            ' ',
-                            effectiveValue.storageProvider
-                        ]
-                    }),
-                    /*#__PURE__*/ jsxs("div", {
-                        children: [
-                            /*#__PURE__*/ jsx("span", {
-                                className: classnames('byline-field-file-meta-key', file_field_module["meta-key"]),
-                                children: "Path:"
+                            /*#__PURE__*/ jsxs("div", {
+                                children: [
+                                    /*#__PURE__*/ jsx("span", {
+                                        className: classnames('byline-field-file-meta-key', file_field_module["meta-key"]),
+                                        children: "Type:"
+                                    }),
+                                    ' ',
+                                    incomingValue?.mimeType
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxs("div", {
+                                children: [
+                                    /*#__PURE__*/ jsx("span", {
+                                        className: classnames('byline-field-file-meta-key', file_field_module["meta-key"]),
+                                        children: "Size:"
+                                    }),
+                                    ' ',
+                                    incomingValue?.fileSize
+                                ]
                             }),
-                            ' ',
-                            effectiveValue.storagePath
+                            isPending ? /*#__PURE__*/ jsxs("div", {
+                                children: [
+                                    /*#__PURE__*/ jsx("span", {
+                                        className: classnames('byline-field-file-meta-key', file_field_module["meta-key"]),
+                                        children: "Status:"
+                                    }),
+                                    ' ',
+                                    /*#__PURE__*/ jsx("span", {
+                                        className: classnames('byline-field-file-meta-pending', file_field_module["meta-pending"]),
+                                        children: "Will upload on save"
+                                    })
+                                ]
+                            }) : /*#__PURE__*/ jsxs(Fragment, {
+                                children: [
+                                    /*#__PURE__*/ jsxs("div", {
+                                        children: [
+                                            /*#__PURE__*/ jsx("span", {
+                                                className: classnames('byline-field-file-meta-key', file_field_module["meta-key"]),
+                                                children: "Storage:"
+                                            }),
+                                            ' ',
+                                            incomingValue?.storageProvider
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsxs("div", {
+                                        children: [
+                                            /*#__PURE__*/ jsx("span", {
+                                                className: classnames('byline-field-file-meta-key', file_field_module["meta-key"]),
+                                                children: "Path:"
+                                            }),
+                                            ' ',
+                                            incomingValue?.storagePath
+                                        ]
+                                    })
+                                ]
+                            })
                         ]
                     })
                 ]
             }),
+            field.helpText && /*#__PURE__*/ jsx(HelpText, {
+                text: field.helpText
+            }),
             fieldError && /*#__PURE__*/ jsx(ErrorText, {
                 id: `${field.name}-error`,
                 text: fieldError

package/dist/fields/file/file-field.module.js

@@ -1,13 +1,18 @@
 import "./file-field_module.css";
 const file_field_module = {
-    dirty: "dirty-k9iSNW",
     header: "header-4BiMwv",
-    label: "label-UvOUA0",
-    help: "help-LIWT7a",
-    action: "action-O9bmDz",
+    actions: "actions-Yd3WIq",
     empty: "empty-Afgknj",
+    tile: "tile-K1K1D_",
+    uploading: "uploading-KCIPa6",
+    "icon-wrap": "icon-wrap-TckWPs",
+    iconWrap: "icon-wrap-TckWPs",
+    icon: "icon-HnknJj",
+    pending: "pending-mh5ZKa",
     meta: "meta-mm1UmQ",
     "meta-key": "meta-key-q6cipk",
-    metaKey: "meta-key-q6cipk"
+    metaKey: "meta-key-q6cipk",
+    "meta-pending": "meta-pending-Q0ICzl",
+    metaPending: "meta-pending-Q0ICzl"
 };
 export default file_field_module;

package/dist/fields/file/file-field_module.css

@@ -1,60 +1,123 @@
-:is(.dirty-k9iSNW, .byline-field-file-dirty) {
-  padding: var(--spacing-12);
-  border: var(--border-width-thin) var(--border-style-solid) var(--blue-300);
-  border-radius: var(--border-radius-md);
-}
-
 :is(.header-4BiMwv, .byline-field-file-header) {
-  justify-content: space-between;
   align-items: baseline;
+  gap: var(--spacing-8);
   margin-bottom: .25rem;
   display: flex;
 }
 
-:is(.label-UvOUA0, .byline-field-file-label) {
-  color: var(--gray-100);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
+:is(.actions-Yd3WIq, .byline-field-file-actions) {
+  top: var(--spacing-6);
+  right: var(--spacing-6);
+  z-index: 1;
+  align-items: center;
+  gap: var(--spacing-4);
+  display: flex;
+  position: absolute;
 }
 
-:is(.help-LIWT7a, .byline-field-file-help) {
-  color: var(--gray-400);
-  font-size: var(--font-size-xs);
-  margin-top: .125rem;
+.byline-field-file-actions .byline-button {
+  color: var(--gray-900);
 }
 
-:is(.action-O9bmDz, .byline-field-file-action) {
-  color: var(--blue-300);
+:is(.dark .byline-field-file-actions .byline-button, [data-theme="dark"] .byline-field-file-actions .byline-button) {
+  color: var(--gray-200);
+}
+
+:is(.empty-Afgknj, .byline-field-file-empty) {
+  color: var(--gray-500);
   font-size: var(--font-size-xs);
+  font-style: italic;
+}
+
+:is(.tile-K1K1D_, .byline-field-file-tile) {
+  gap: var(--spacing-16);
+  padding: var(--spacing-8);
+  border: var(--border-width-thin) var(--border-style-solid) var(--primary-500);
+  border-radius: var(--border-radius-md);
+  margin-top: .25rem;
+  display: flex;
+  position: relative;
+}
+
+:is(.uploading-KCIPa6, .byline-field-file-uploading) {
+  z-index: 2;
+  background-color: oklch(from var(--gray-950) l c h / .5);
+  border-radius: var(--border-radius-md);
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  position: absolute;
+  inset: 0;
+}
+
+:is(.icon-wrap-TckWPs, .byline-field-file-icon-wrap) {
+  border: var(--border-width-thin) var(--border-style-solid) var(--gray-600);
+  border-radius: var(--border-radius-sm);
+  width: 4rem;
+  height: 4rem;
+  color: var(--gray-300);
+  flex-shrink: 0;
+  justify-content: center;
+  align-self: flex-start;
+  align-items: center;
+  display: flex;
+  position: relative;
+}
+
+a.icon-wrap-TckWPs {
   cursor: pointer;
-  background: none;
-  border: none;
-  padding: 0;
+  text-decoration: none;
+  transition: border-color .12s, color .12s;
 }
 
-:is(.action-O9bmDz:hover, .byline-field-file-action:hover) {
-  color: var(--blue-200);
-  text-underline-offset: 2px;
-  text-decoration: underline;
+a.byline-field-file-icon-wrap {
+  cursor: pointer;
+  text-decoration: none;
+  transition: border-color .12s, color .12s;
 }
 
-:is(.action-O9bmDz:disabled, .byline-field-file-action:disabled) {
-  cursor: not-allowed;
-  opacity: .6;
+a.icon-wrap-TckWPs:hover {
+  border-color: var(--primary-500);
+  color: var(--primary-400);
 }
 
-:is(.empty-Afgknj, .byline-field-file-empty) {
-  color: var(--gray-500);
-  font-size: var(--font-size-xs);
-  font-style: italic;
+a.byline-field-file-icon-wrap:hover {
+  border-color: var(--primary-500);
+  color: var(--primary-400);
+}
+
+a.icon-wrap-TckWPs:focus-visible {
+  outline: 2px solid var(--primary-500);
+  outline-offset: 2px;
+}
+
+a.byline-field-file-icon-wrap:focus-visible {
+  outline: 2px solid var(--primary-500);
+  outline-offset: 2px;
+}
+
+:is(.icon-HnknJj, .byline-field-file-icon) {
+  opacity: .85;
+}
+
+:is(.pending-mh5ZKa, .byline-field-file-pending) {
+  background-color: oklch(from var(--yellow-600) l c h / .9);
+  color: var(--yellow-100);
+  font-size: .6rem;
+  font-weight: var(--font-weight-medium);
+  border-radius: var(--border-radius-sm);
+  padding: .125rem .375rem;
+  position: absolute;
+  top: .25rem;
+  left: .25rem;
 }
 
 :is(.meta-mm1UmQ, .byline-field-file-meta) {
+  padding-right: var(--spacing-32);
   color: var(--gray-200);
   font-size: var(--font-size-xs);
   flex-direction: column;
   gap: .125rem;
-  margin-top: .25rem;
   display: flex;
 }
 
@@ -62,3 +125,7 @@
   font-weight: var(--font-weight-semibold);
 }
 
+:is(.meta-pending-Q0ICzl, .byline-field-file-meta-pending) {
+  color: var(--yellow-400);
+}
+

package/dist/fields/file/file-upload-field.d.ts

@@ -0,0 +1,21 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+import { type FileField as FieldType, type PendingStoredFileValue, type StoredFileValue } from '@byline/core';
+interface FileUploadFieldProps {
+    field: FieldType;
+    /** Collection path used to build the upload URL (e.g. `'media'`). */
+    collectionPath: string;
+    /** Field path in the form (e.g. `'attachment'` or `'content.0.attachment'`). */
+    fieldPath: string;
+    /** Called with the PendingStoredFileValue for immediate UI update. */
+    onUploaded: (value: StoredFileValue | PendingStoredFileValue) => void;
+    /** Optional `accept` MIME-type / extension string for the native file input. */
+    accept?: string;
+}
+export declare const FileUploadField: ({ field: _field, collectionPath, fieldPath, onUploaded, accept, }: FileUploadFieldProps) => import("react").JSX.Element;
+export {};