@byline/ui 2.5.1 → 2.6.0

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

@@ -1,59 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
-import classnames from "classnames";
-import { placeholderForField } from "../field-helpers.js";
-import { FieldRenderer } from "../field-renderer.js";
-import { useFieldError } from "../../forms/form-context.js";
-import { ErrorText } from "../../uikit.js";
-import group_field_module from "./group-field.module.js";
-const GroupField = ({ field, defaultValue, path })=>{
-    const fieldError = useFieldError(field.name);
-    const groupData = useMemo(()=>{
-        if (defaultValue && 'object' == typeof defaultValue && !Array.isArray(defaultValue)) return defaultValue;
-        const placeholder = {};
-        for (const childField of field.fields)placeholder[childField.name] = placeholderForField(childField);
-        return placeholder;
-    }, [
-        defaultValue,
-        field.fields
-    ]);
-    return /*#__PURE__*/ jsxs("div", {
-        className: `byline-field-group ${field.name}`,
-        children: [
-            field.label && /*#__PURE__*/ jsxs("div", {
-                className: classnames('byline-field-group-header', group_field_module.header),
-                children: [
-                    /*#__PURE__*/ jsxs("h3", {
-                        className: classnames('byline-field-group-title', group_field_module.title),
-                        children: [
-                            field.label,
-                            ' ',
-                            !field.optional && /*#__PURE__*/ jsx("span", {
-                                className: classnames('byline-field-group-required', group_field_module.required),
-                                children: "*"
-                            })
-                        ]
-                    }),
-                    field.helpText && /*#__PURE__*/ jsx("p", {
-                        className: classnames('byline-field-group-help', group_field_module.help),
-                        children: field.helpText
-                    })
-                ]
-            }),
-            /*#__PURE__*/ jsx("div", {
-                className: classnames('byline-field-group-body', group_field_module.body),
-                children: field.fields.map((innerField)=>/*#__PURE__*/ jsx(FieldRenderer, {
-                        field: innerField,
-                        defaultValue: groupData[innerField.name],
-                        basePath: path,
-                        disableSorting: true
-                    }, innerField.name))
-            }),
-            fieldError && /*#__PURE__*/ jsx(ErrorText, {
-                id: `${field.name}-error`,
-                text: fieldError
-            })
-        ]
-    });
-};
-export { GroupField };

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

@@ -1,9 +0,0 @@
-import "./group-field_module.css";
-const group_field_module = {
-    header: "header-QiCfGn",
-    title: "title-N84bq9",
-    required: "required-aR0X2E",
-    help: "help-xFiofl",
-    body: "body-_PqbfY"
-};
-export default group_field_module;

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

@@ -1,27 +0,0 @@
-:is(.header-QiCfGn, .byline-field-group-header) {
-  margin-bottom: var(--spacing-8);
-  flex-direction: column;
-  gap: .125rem;
-  display: flex;
-}
-
-:is(.title-N84bq9, .byline-field-group-title) {
-  font-size: 1rem;
-  font-weight: var(--font-weight-medium);
-}
-
-:is(.required-aR0X2E, .byline-field-group-required) {
-  color: var(--red-500);
-}
-
-:is(.help-xFiofl, .byline-field-group-help) {
-  color: var(--gray-500);
-  font-size: var(--font-size-xs);
-}
-
-:is(.body-_PqbfY, .byline-field-group-body) {
-  gap: var(--spacing-8);
-  flex-direction: column;
-  display: flex;
-}
-

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

@@ -1,19 +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 ImageField as FieldType, type StoredFileValue } from '@byline/core';
-interface ImageFieldProps {
-    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 ImageField: ({ field, collectionPath, value, defaultValue, onChange: _onChange, path, }: ImageFieldProps) => import("react").JSX.Element;
-export {};

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

@@ -1,242 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-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 { ErrorText, HelpText, Label, LoaderRing } from "../../uikit.js";
-import { ImageLightbox } from "../../widgets/image-lightbox/image-lightbox.js";
-import { useFieldChangeHandler } from "../use-field-change-handler.js";
-import image_field_module from "./image-field.module.js";
-import { ImageUploadField } from "./image-upload-field.js";
-const ImageField = ({ 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 thumbVariant = incomingValue && !isPendingStoredFileValue(incomingValue) ? incomingValue.variants?.find((v)=>'thumbnail' === v.name) : void 0;
-    const previewUrl = thumbVariant?.storageUrl ?? incomingValue?.storageUrl;
-    const handleRemove = ()=>{
-        if (isPending) removePendingUpload(fieldPath);
-        handleChange(null);
-    };
-    const [lightboxOpen, setLightboxOpen] = useState(false);
-    const canOpenLightbox = !isPending && !!incomingValue?.storageUrl;
-    const htmlId = fieldPath;
-    return /*#__PURE__*/ jsxs("div", {
-        className: `byline-field-image ${field.name}`,
-        children: [
-            /*#__PURE__*/ jsx("div", {
-                className: classnames('byline-field-image-header', image_field_module.header),
-                children: /*#__PURE__*/ jsx(Label, {
-                    id: htmlId,
-                    htmlFor: htmlId,
-                    label: field.label ?? field.name,
-                    required: !field.optional
-                })
-            }),
-            showUploadWidget ? collectionPath ? /*#__PURE__*/ jsx(ImageUploadField, {
-                field: field,
-                collectionPath: collectionPath,
-                fieldPath: fieldPath,
-                onUploaded: (uploaded)=>{
-                    handleChange(uploaded);
-                }
-            }) : /*#__PURE__*/ jsx("div", {
-                className: classnames('byline-field-image-empty', image_field_module.empty),
-                children: "No image selected"
-            }) : /*#__PURE__*/ jsxs("div", {
-                className: classnames('byline-field-image-tile', image_field_module.tile),
-                children: [
-                    isUploading && /*#__PURE__*/ jsx("div", {
-                        className: classnames('byline-field-image-uploading', image_field_module.uploading),
-                        "aria-live": "polite",
-                        "aria-busy": "true",
-                        children: /*#__PURE__*/ jsx(LoaderRing, {})
-                    }),
-                    collectionPath && /*#__PURE__*/ jsx("div", {
-                        className: classnames('byline-field-image-remove', image_field_module.remove),
-                        children: /*#__PURE__*/ jsx(IconButton, {
-                            type: "button",
-                            intent: "noeffect",
-                            onClick: handleRemove,
-                            size: "xs",
-                            disabled: isUploading,
-                            "aria-label": "Remove image",
-                            children: /*#__PURE__*/ jsx(CloseIcon, {
-                                width: "15px",
-                                height: "15px"
-                            })
-                        })
-                    }),
-                    previewUrl && /*#__PURE__*/ jsxs("div", {
-                        className: classnames('byline-field-image-preview-wrap', image_field_module["preview-wrap"]),
-                        children: [
-                            canOpenLightbox ? /*#__PURE__*/ jsx("button", {
-                                type: "button",
-                                onClick: ()=>setLightboxOpen(true),
-                                "aria-label": "Open full-size preview",
-                                className: classnames('byline-field-image-preview-button', image_field_module["preview-button"]),
-                                children: /*#__PURE__*/ jsx("img", {
-                                    src: previewUrl,
-                                    alt: incomingValue.originalFilename ?? incomingValue.filename,
-                                    className: classnames('byline-field-image-preview', image_field_module.preview, 'image/svg+xml' === incomingValue.mimeType && [
-                                        'byline-field-image-preview-svg',
-                                        image_field_module["preview-svg"]
-                                    ])
-                                })
-                            }) : /*#__PURE__*/ jsx("img", {
-                                src: previewUrl,
-                                alt: incomingValue.originalFilename ?? incomingValue.filename,
-                                className: classnames('byline-field-image-preview', image_field_module.preview, 'image/svg+xml' === incomingValue.mimeType && [
-                                    'byline-field-image-preview-svg',
-                                    image_field_module["preview-svg"]
-                                ])
-                            }),
-                            isPending && /*#__PURE__*/ jsx("div", {
-                                className: classnames('byline-field-image-pending', image_field_module.pending),
-                                children: "Pending upload"
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ jsxs("div", {
-                        className: classnames('byline-field-image-meta', image_field_module.meta),
-                        children: [
-                            /*#__PURE__*/ jsxs("div", {
-                                children: [
-                                    /*#__PURE__*/ jsx("span", {
-                                        className: classnames('byline-field-image-meta-key', image_field_module["meta-key"]),
-                                        children: "Filename:"
-                                    }),
-                                    ' ',
-                                    incomingValue?.filename
-                                ]
-                            }),
-                            /*#__PURE__*/ jsxs("div", {
-                                children: [
-                                    /*#__PURE__*/ jsx("span", {
-                                        className: classnames('byline-field-image-meta-key', image_field_module["meta-key"]),
-                                        children: "Original:"
-                                    }),
-                                    ' ',
-                                    incomingValue?.originalFilename
-                                ]
-                            }),
-                            /*#__PURE__*/ jsxs("div", {
-                                children: [
-                                    /*#__PURE__*/ jsx("span", {
-                                        className: classnames('byline-field-image-meta-key', image_field_module["meta-key"]),
-                                        children: "Type:"
-                                    }),
-                                    ' ',
-                                    incomingValue?.mimeType
-                                ]
-                            }),
-                            /*#__PURE__*/ jsxs("div", {
-                                children: [
-                                    /*#__PURE__*/ jsx("span", {
-                                        className: classnames('byline-field-image-meta-key', image_field_module["meta-key"]),
-                                        children: "Size:"
-                                    }),
-                                    ' ',
-                                    incomingValue?.fileSize
-                                ]
-                            }),
-                            isPending ? /*#__PURE__*/ jsxs("div", {
-                                children: [
-                                    /*#__PURE__*/ jsx("span", {
-                                        className: classnames('byline-field-image-meta-key', image_field_module["meta-key"]),
-                                        children: "Status:"
-                                    }),
-                                    ' ',
-                                    /*#__PURE__*/ jsx("span", {
-                                        className: classnames('byline-field-image-meta-pending', image_field_module["meta-pending"]),
-                                        children: "Will upload on save"
-                                    })
-                                ]
-                            }) : /*#__PURE__*/ jsxs(Fragment, {
-                                children: [
-                                    /*#__PURE__*/ jsxs("div", {
-                                        children: [
-                                            /*#__PURE__*/ jsx("span", {
-                                                className: classnames('byline-field-image-meta-key', image_field_module["meta-key"]),
-                                                children: "Storage:"
-                                            }),
-                                            ' ',
-                                            incomingValue?.storageProvider
-                                        ]
-                                    }),
-                                    incomingValue?.imageWidth != null && /*#__PURE__*/ jsxs("div", {
-                                        children: [
-                                            /*#__PURE__*/ jsx("span", {
-                                                className: classnames('byline-field-image-meta-key', image_field_module["meta-key"]),
-                                                children: "Dimensions:"
-                                            }),
-                                            ' ',
-                                            incomingValue.imageWidth,
-                                            null != incomingValue.imageHeight ? `×${incomingValue.imageHeight}` : ''
-                                        ]
-                                    }),
-                                    incomingValue?.imageFormat != null && /*#__PURE__*/ jsxs("div", {
-                                        children: [
-                                            /*#__PURE__*/ jsx("span", {
-                                                className: classnames('byline-field-image-meta-key', image_field_module["meta-key"]),
-                                                children: "Format:"
-                                            }),
-                                            ' ',
-                                            incomingValue.imageFormat
-                                        ]
-                                    }),
-                                    /*#__PURE__*/ jsxs("div", {
-                                        children: [
-                                            /*#__PURE__*/ jsx("span", {
-                                                className: classnames('byline-field-image-meta-key', image_field_module["meta-key"]),
-                                                children: "Thumbnail:"
-                                            }),
-                                            ' ',
-                                            thumbVariant ? 'Generated' : 'Pending'
-                                        ]
-                                    })
-                                ]
-                            })
-                        ]
-                    })
-                ]
-            }),
-            field.helpText && /*#__PURE__*/ jsx(HelpText, {
-                text: field.helpText
-            }),
-            fieldError && /*#__PURE__*/ jsx(ErrorText, {
-                id: `${field.name}-error`,
-                text: fieldError
-            }),
-            canOpenLightbox && incomingValue?.storageUrl && /*#__PURE__*/ jsx(ImageLightbox, {
-                isOpen: lightboxOpen,
-                onDismiss: ()=>setLightboxOpen(false),
-                src: incomingValue.storageUrl,
-                alt: incomingValue.originalFilename ?? incomingValue.filename,
-                downloadFilename: incomingValue.originalFilename ?? incomingValue.filename,
-                title: incomingValue.originalFilename ?? incomingValue.filename,
-                meta: {
-                    width: incomingValue.imageWidth,
-                    height: incomingValue.imageHeight,
-                    fileSize: incomingValue.fileSize,
-                    mimeType: incomingValue.mimeType
-                }
-            })
-        ]
-    });
-};
-export { ImageField };

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

@@ -1,22 +0,0 @@
-import "./image-field_module.css";
-const image_field_module = {
-    header: "header-qe_E_5",
-    remove: "remove-ib7eKx",
-    empty: "empty-b8pdoJ",
-    tile: "tile-izbLn0",
-    "preview-wrap": "preview-wrap-Cjr0PD",
-    previewWrap: "preview-wrap-Cjr0PD",
-    "preview-button": "preview-button-LAsENX",
-    previewButton: "preview-button-LAsENX",
-    preview: "preview-DIASGB",
-    "preview-svg": "preview-svg-sCwreb",
-    previewSvg: "preview-svg-sCwreb",
-    pending: "pending-s6X_52",
-    uploading: "uploading-nqh2Gh",
-    meta: "meta-uHyKiu",
-    "meta-key": "meta-key-eR6iRU",
-    metaKey: "meta-key-eR6iRU",
-    "meta-pending": "meta-pending-lEdTAj",
-    metaPending: "meta-pending-lEdTAj"
-};
-export default image_field_module;

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

@@ -1,121 +0,0 @@
-:is(.header-qe_E_5, .byline-field-image-header) {
-  align-items: baseline;
-  gap: var(--spacing-8);
-  margin-bottom: .25rem;
-  display: flex;
-}
-
-:is(.remove-ib7eKx, .byline-field-image-remove) {
-  top: var(--spacing-6);
-  right: var(--spacing-6);
-  z-index: 1;
-  position: absolute;
-}
-
-.byline-field-image-remove .byline-button {
-  color: var(--gray-900);
-}
-
-:is(.dark .byline-field-image-remove .byline-button, [data-theme="dark"] .byline-field-image-remove .byline-button) {
-  color: var(--gray-200);
-}
-
-:is(.empty-b8pdoJ, .byline-field-image-empty) {
-  color: var(--gray-500);
-  font-size: var(--font-size-xs);
-  font-style: italic;
-}
-
-:is(.tile-izbLn0, .byline-field-image-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(.preview-wrap-Cjr0PD, .byline-field-image-preview-wrap) {
-  position: relative;
-}
-
-:is(.preview-button-LAsENX, .byline-field-image-preview-button) {
-  appearance: none;
-  cursor: pointer;
-  border-radius: var(--border-radius-sm);
-  background: none;
-  border: none;
-  margin: 0;
-  padding: 0;
-  display: block;
-}
-
-:is(.preview-button-LAsENX:focus-visible, .byline-field-image-preview-button:focus-visible) {
-  outline: 2px solid var(--primary-500);
-  outline-offset: 2px;
-}
-
-:is(.preview-button-LAsENX img, .byline-field-image-preview-button img) {
-  transition: opacity .12s;
-}
-
-:is(.preview-button-LAsENX:hover img, .byline-field-image-preview-button:hover img) {
-  opacity: .85;
-}
-
-:is(.preview-DIASGB, .byline-field-image-preview) {
-  border: var(--border-width-thin) var(--border-style-solid) var(--gray-600);
-  border-radius: var(--border-radius-sm);
-  object-fit: contain;
-  min-width: 4rem;
-  min-height: 4rem;
-  max-height: 10rem;
-}
-
-:is(.preview-svg-sCwreb, .byline-field-image-preview-svg) {
-  width: 271px;
-  height: 159px;
-  max-height: none;
-}
-
-:is(.pending-s6X_52, .byline-field-image-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(.uploading-nqh2Gh, .byline-field-image-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(.meta-uHyKiu, .byline-field-image-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-eR6iRU, .byline-field-image-meta-key) {
-  font-weight: var(--font-weight-semibold);
-}
-
-:is(.meta-pending-lEdTAj, .byline-field-image-meta-pending) {
-  color: var(--yellow-400);
-}
-

package/dist/fields/image/image-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 ImageField as FieldType, type PendingStoredFileValue, type StoredFileValue } from '@byline/core';
-interface ImageUploadFieldProps {
-    field: FieldType;
-    /** Collection path used to build the upload URL (e.g. `'media'`). */
-    collectionPath: string;
-    /** Field path in the form (e.g. `'image'` or `'content.0.image'`). */
-    fieldPath: string;
-    /** Called with the PendingStoredFileValue for immediate preview. */
-    onUploaded: (value: StoredFileValue | PendingStoredFileValue) => void;
-    /** Optional accepted-file MIME types string for the native file input. */
-    accept?: string;
-}
-export declare const ImageUploadField: ({ field: _field, collectionPath, fieldPath, onUploaded, accept, }: ImageUploadFieldProps) => import("react").JSX.Element;
-export {};