@byline/ui 2.5.2 → 2.6.1

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

@@ -1,226 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { isPendingStoredFileValue } from "@byline/core";
-import classnames from "classnames";
-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";
-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 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 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: `byline-field-file ${field.name}`,
-        children: [
-            /*#__PURE__*/ jsx("div", {
-                className: classnames('byline-field-file-header', file_field_module.header),
-                children: /*#__PURE__*/ jsx(Label, {
-                    id: htmlId,
-                    htmlFor: htmlId,
-                    label: field.label ?? field.name,
-                    required: !field.optional
-                })
-            }),
-            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-tile', file_field_module.tile),
-                children: [
-                    isUploading && /*#__PURE__*/ jsx("div", {
-                        className: classnames('byline-field-file-uploading', file_field_module.uploading),
-                        "aria-live": "polite",
-                        "aria-busy": "true",
-                        children: /*#__PURE__*/ jsx(LoaderRing, {})
-                    }),
-                    collectionPath && /*#__PURE__*/ jsxs("div", {
-                        className: classnames('byline-field-file-actions', file_field_module.actions),
-                        children: [
-                            !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"
-                                })
-                            }),
-                            /*#__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"
-                                })
-                            })
-                        ]
-                    }),
-                    !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(FileGlyph, {
-                                width: "48px",
-                                height: "48px",
-                                className: classnames('byline-field-file-icon', file_field_module.icon)
-                            }),
-                            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__*/ jsxs("div", {
-                                children: [
-                                    /*#__PURE__*/ jsx("span", {
-                                        className: classnames('byline-field-file-meta-key', file_field_module["meta-key"]),
-                                        children: "Filename:"
-                                    }),
-                                    ' ',
-                                    incomingValue?.filename
-                                ]
-                            }),
-                            /*#__PURE__*/ jsxs("div", {
-                                children: [
-                                    /*#__PURE__*/ jsx("span", {
-                                        className: classnames('byline-field-file-meta-key', file_field_module["meta-key"]),
-                                        children: "Original:"
-                                    }),
-                                    ' ',
-                                    incomingValue?.originalFilename
-                                ]
-                            }),
-                            /*#__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
-                                ]
-                            }),
-                            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
-            })
-        ]
-    });
-};
-export { FileField };

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

@@ -1,18 +0,0 @@
-import "./file-field_module.css";
-const file_field_module = {
-    header: "header-4BiMwv",
-    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",
-    "meta-pending": "meta-pending-Q0ICzl",
-    metaPending: "meta-pending-Q0ICzl"
-};
-export default file_field_module;

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

@@ -1,131 +0,0 @@
-:is(.header-4BiMwv, .byline-field-file-header) {
-  align-items: baseline;
-  gap: var(--spacing-8);
-  margin-bottom: .25rem;
-  display: flex;
-}
-
-: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;
-}
-
-.byline-field-file-actions .byline-button {
-  color: var(--gray-900);
-}
-
-: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;
-  text-decoration: none;
-  transition: border-color .12s, color .12s;
-}
-
-a.byline-field-file-icon-wrap {
-  cursor: pointer;
-  text-decoration: none;
-  transition: border-color .12s, color .12s;
-}
-
-a.icon-wrap-TckWPs:hover {
-  border-color: var(--primary-500);
-  color: var(--primary-400);
-}
-
-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;
-  display: flex;
-}
-
-:is(.meta-key-q6cipk, .byline-field-file-meta-key) {
-  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

@@ -1,21 +0,0 @@
-/**
- * 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 {};

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

@@ -1,128 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useRef, useState } from "react";
-import { createPendingStoredFileValue } from "@byline/core";
-import classnames from "classnames";
-import { useFormContext } from "../../forms/form-context.js";
-import file_upload_field_module from "./file-upload-field.module.js";
-const FileUploadField = ({ field: _field, collectionPath, fieldPath, onUploaded, accept })=>{
-    const inputRef = useRef(null);
-    const [status, setStatus] = useState('idle');
-    const [errorMessage, setErrorMessage] = useState(null);
-    const [isDragOver, setIsDragOver] = useState(false);
-    const { addPendingUpload } = useFormContext();
-    const handleFileSelected = useCallback((file)=>{
-        setStatus('processing');
-        setErrorMessage(null);
-        const previewUrl = URL.createObjectURL(file);
-        const pendingValue = createPendingStoredFileValue(file, previewUrl);
-        addPendingUpload(fieldPath, {
-            file,
-            previewUrl,
-            collectionPath
-        });
-        setStatus('idle');
-        onUploaded(pendingValue);
-    }, [
-        collectionPath,
-        fieldPath,
-        addPendingUpload,
-        onUploaded
-    ]);
-    const handleFileChange = useCallback((e)=>{
-        const file = e.target.files?.[0];
-        if (file) handleFileSelected(file);
-        e.target.value = '';
-    }, [
-        handleFileSelected
-    ]);
-    const handleBrowseClick = useCallback(()=>{
-        inputRef.current?.click();
-    }, []);
-    const handleDragOver = useCallback((e)=>{
-        e.preventDefault();
-        setIsDragOver(true);
-    }, []);
-    const handleDragLeave = useCallback((e)=>{
-        e.preventDefault();
-        setIsDragOver(false);
-    }, []);
-    const handleDrop = useCallback((e)=>{
-        e.preventDefault();
-        setIsDragOver(false);
-        const file = e.dataTransfer.files?.[0];
-        if (file) handleFileSelected(file);
-    }, [
-        handleFileSelected
-    ]);
-    const isProcessing = 'processing' === status;
-    return /*#__PURE__*/ jsxs("div", {
-        className: classnames('byline-field-file-upload', file_upload_field_module.root),
-        children: [
-            /*#__PURE__*/ jsx("input", {
-                ref: inputRef,
-                type: "file",
-                accept: accept,
-                className: classnames('byline-field-file-upload-input', file_upload_field_module.input),
-                onChange: handleFileChange,
-                disabled: isProcessing,
-                "aria-hidden": "true",
-                tabIndex: -1
-            }),
-            /*#__PURE__*/ jsxs("div", {
-                role: "button",
-                tabIndex: 0,
-                "aria-label": "Upload file — drag and drop or click to browse",
-                onDragOver: handleDragOver,
-                onDragLeave: handleDragLeave,
-                onDrop: handleDrop,
-                onClick: handleBrowseClick,
-                onKeyDown: (e)=>{
-                    if ('Enter' === e.key || ' ' === e.key) {
-                        e.preventDefault();
-                        handleBrowseClick();
-                    }
-                },
-                className: classnames('byline-field-file-upload-zone', file_upload_field_module.zone, isDragOver && !isProcessing && [
-                    'byline-field-file-upload-zone-active',
-                    file_upload_field_module["zone-active"]
-                ], isProcessing && [
-                    'byline-field-file-upload-zone-busy',
-                    file_upload_field_module["zone-busy"]
-                ]),
-                children: [
-                    /*#__PURE__*/ jsx("svg", {
-                        xmlns: "http://www.w3.org/2000/svg",
-                        className: classnames('byline-field-file-upload-icon', file_upload_field_module.icon),
-                        fill: "none",
-                        viewBox: "0 0 24 24",
-                        stroke: "currentColor",
-                        strokeWidth: 1.5,
-                        "aria-hidden": "true",
-                        children: /*#__PURE__*/ jsx("path", {
-                            strokeLinecap: "round",
-                            strokeLinejoin: "round",
-                            d: "M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"
-                        })
-                    }),
-                    /*#__PURE__*/ jsxs("span", {
-                        className: classnames('byline-field-file-upload-label', file_upload_field_module.label),
-                        children: [
-                            "Drop file here or",
-                            ' ',
-                            /*#__PURE__*/ jsx("span", {
-                                className: classnames('byline-field-file-upload-action', file_upload_field_module.action),
-                                children: "browse"
-                            })
-                        ]
-                    })
-                ]
-            }),
-            'error' === status && errorMessage && /*#__PURE__*/ jsx("p", {
-                className: classnames('byline-field-file-upload-error', file_upload_field_module.error),
-                role: "alert",
-                children: errorMessage
-            })
-        ]
-    });
-};
-export { FileUploadField };

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

@@ -1,15 +0,0 @@
-import "./file-upload-field_module.css";
-const file_upload_field_module = {
-    root: "root-Eb8eWY",
-    input: "input-xBB8ah",
-    zone: "zone-HdQNmA",
-    "zone-active": "zone-active-iYZTsU",
-    zoneActive: "zone-active-iYZTsU",
-    "zone-busy": "zone-busy-GmToil",
-    zoneBusy: "zone-busy-GmToil",
-    icon: "icon-vXw1Do",
-    label: "label-XCy7AX",
-    action: "action-LUT6jM",
-    error: "error-fFWMW2"
-};
-export default file_upload_field_module;

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

@@ -1,74 +0,0 @@
-:is(.root-Eb8eWY, .byline-field-file-upload) {
-  margin-top: .25rem;
-}
-
-:is(.input-xBB8ah, .byline-field-file-upload-input) {
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  position: absolute;
-  overflow: hidden;
-}
-
-:is(.zone-HdQNmA, .byline-field-file-upload-zone) {
-  justify-content: center;
-  align-items: center;
-  gap: var(--spacing-8);
-  border: 2px dashed var(--gray-600);
-  border-radius: var(--border-radius-lg);
-  color: var(--gray-400);
-  text-align: center;
-  cursor: pointer;
-  -webkit-user-select: none;
-  user-select: none;
-  flex-direction: column;
-  padding: 1.5rem 1rem;
-  transition: color .15s, background-color .15s, border-color .15s;
-  display: flex;
-}
-
-:is(.zone-HdQNmA:hover, .byline-field-file-upload-zone:hover) {
-  border-color: var(--primary-500);
-  background-color: oklch(from var(--primary-900) l c h / .1);
-}
-
-:is(.zone-active-iYZTsU, .byline-field-file-upload-zone-active) {
-  border-color: var(--primary-400);
-  background-color: oklch(from var(--primary-900) l c h / .2);
-  color: var(--primary-300);
-}
-
-:is(.zone-busy-GmToil, .byline-field-file-upload-zone-busy) {
-  border-color: var(--gray-700);
-  background-color: oklch(from var(--canvas-800) l c h / .5);
-  color: var(--gray-600);
-  cursor: not-allowed;
-}
-
-:is(.icon-vXw1Do, .byline-field-file-upload-icon) {
-  opacity: .6;
-  width: 1.75rem;
-  height: 1.75rem;
-}
-
-:is(.label-XCy7AX, .byline-field-file-upload-label) {
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-medium);
-}
-
-:is(.action-LUT6jM, .byline-field-file-upload-action) {
-  color: var(--primary-400);
-  text-underline-offset: 2px;
-  text-decoration: underline;
-}
-
-:is(.error-fFWMW2, .byline-field-file-upload-error) {
-  color: var(--red-400);
-  font-size: var(--font-size-xs);
-  margin-top: .375rem;
-}
-

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

@@ -1,15 +0,0 @@
-/**
- * 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 { GroupField as GroupFieldType } from '@byline/core';
-interface GroupFieldProps {
-    field: GroupFieldType;
-    defaultValue: any;
-    path: string;
-}
-export declare const GroupField: ({ field, defaultValue, path }: GroupFieldProps) => import("react").JSX.Element;
-export {};