@byline/admin 2.5.1 → 2.6.0

package/dist/fields/relation/relation-summary.d.ts

@@ -0,0 +1,31 @@
+/**
+ * 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 { CollectionAdminConfig, CollectionDefinition } from '@byline/core';
+interface RelationSummaryProps {
+    targetDefinition: CollectionDefinition;
+    targetAdminConfig: CollectionAdminConfig | null;
+    displayField?: string;
+    /** The raw relation value from the form. May be a plain ref or a populated envelope. */
+    value: {
+        targetDocumentId: string;
+        targetCollectionId: string;
+        _resolved?: boolean;
+        _cycle?: boolean;
+        document?: Record<string, any>;
+    };
+    /**
+     * A document record cached client-side from a recent picker selection.
+     * Used when `value` is a plain ref (post-pick state) but we still want
+     * the tile to render real display data without a refetch. Caller is
+     * responsible for clearing/replacing this when the value's
+     * `targetDocumentId` changes.
+     */
+    cachedRecord?: Record<string, any> | null;
+}
+export declare function RelationSummary({ targetDefinition, targetAdminConfig, displayField, value, cachedRecord, }: RelationSummaryProps): import("react").JSX.Element;
+export {};

package/dist/fields/relation/relation-summary.js

@@ -0,0 +1,50 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import classnames from "classnames";
+import { PickerCell, resolveFallbackDisplayField, resolveRowLabel } from "./relation-display.js";
+import relation_summary_module from "./relation-summary.module.js";
+function RelationSummary({ targetDefinition, targetAdminConfig, displayField, value, cachedRecord }) {
+    const pickerColumns = targetAdminConfig?.picker;
+    if (false === value._resolved) return /*#__PURE__*/ jsxs("div", {
+        className: classnames('byline-relation-summary-stack', relation_summary_module.stack),
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                className: classnames('byline-relation-summary-kind', relation_summary_module.kind),
+                children: targetDefinition.labels.singular
+            }),
+            /*#__PURE__*/ jsxs("span", {
+                className: classnames('byline-relation-summary-value-mono byline-relation-summary-missing', relation_summary_module["value-mono"], relation_summary_module.missing),
+                children: [
+                    "(target not found) ",
+                    value.targetDocumentId
+                ]
+            })
+        ]
+    });
+    const record = true === value._resolved && !value._cycle && value.document || cachedRecord || null;
+    if (record && pickerColumns && pickerColumns.length > 0) return /*#__PURE__*/ jsx("div", {
+        className: classnames('byline-relation-summary-row', relation_summary_module.row),
+        children: pickerColumns.map((col)=>/*#__PURE__*/ jsx(PickerCell, {
+                column: col,
+                record: record
+            }, String(col.fieldName)))
+    });
+    const resolvedDisplayField = displayField ?? targetDefinition.useAsTitle ?? resolveFallbackDisplayField(targetDefinition) ?? null;
+    const label = record ? resolveRowLabel(record, resolvedDisplayField) : null;
+    return /*#__PURE__*/ jsxs("div", {
+        className: classnames('byline-relation-summary-stack', relation_summary_module.stack),
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                className: classnames('byline-relation-summary-kind', relation_summary_module.kind),
+                children: targetDefinition.labels.singular
+            }),
+            label ? /*#__PURE__*/ jsx("span", {
+                className: classnames('byline-relation-summary-value', relation_summary_module.value),
+                children: label
+            }) : /*#__PURE__*/ jsx("span", {
+                className: classnames('byline-relation-summary-value-mono', relation_summary_module["value-mono"]),
+                children: value.targetDocumentId
+            })
+        ]
+    });
+}
+export { RelationSummary };

package/dist/fields/relation/relation-summary.module.js

@@ -0,0 +1,11 @@
+import "./relation-summary_module.css";
+const relation_summary_module = {
+    stack: "stack-ITEVDV",
+    row: "row-uUGbE4",
+    kind: "kind-hB0ZeQ",
+    value: "value-YXgMQf",
+    "value-mono": "value-mono-sVr86N",
+    valueMono: "value-mono-sVr86N",
+    missing: "missing-HlUIIE"
+};
+export default relation_summary_module;

package/dist/fields/relation/relation-summary_module.css

@@ -0,0 +1,37 @@
+:is(.stack-ITEVDV, .byline-relation-summary-stack) {
+  flex-direction: column;
+  gap: .125rem;
+  min-width: 0;
+  display: flex;
+}
+
+:is(.row-uUGbE4, .byline-relation-summary-row) {
+  align-items: center;
+  gap: .75rem;
+  min-width: 0;
+  display: flex;
+}
+
+:is(.kind-hB0ZeQ, .byline-relation-summary-kind) {
+  color: var(--gray-500);
+}
+
+:is(.value-YXgMQf, .byline-relation-summary-value) {
+  color: var(--gray-100);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+:is(.value-mono-sVr86N, .byline-relation-summary-value-mono) {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  overflow: hidden;
+}
+
+:is(.missing-HlUIIE, .byline-relation-summary-missing) {
+  font-size: var(--font-size-xs);
+  color: var(--red-400);
+}
+

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

@@ -0,0 +1,16 @@
+/**
+ * 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 { SelectField as FieldType } from '@byline/core';
+export declare const SelectField: ({ field, value, defaultValue, onChange, id, path, }: {
+    field: FieldType;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    id?: string;
+    path?: string;
+}) => import("react").JSX.Element;

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

@@ -0,0 +1,50 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ErrorText, Label, Select } from "@byline/ui/react";
+import classnames from "classnames";
+import { useFieldError, useFieldValue, useIsDirty } from "../../forms/form-context.js";
+import select_field_module from "./select-field.module.js";
+const SelectField = ({ field, value, defaultValue, onChange, id, path })=>{
+    const fieldPath = path ?? field.name;
+    const fieldError = useFieldError(fieldPath);
+    const isDirty = useIsDirty(fieldPath);
+    const fieldValue = useFieldValue(fieldPath);
+    const incomingValue = value ?? fieldValue ?? defaultValue ?? '';
+    const htmlId = id ?? fieldPath;
+    return /*#__PURE__*/ jsxs("div", {
+        className: `byline-field-select ${field.name}`,
+        children: [
+            field.label && /*#__PURE__*/ jsx(Label, {
+                id: htmlId,
+                htmlFor: htmlId,
+                label: field.label,
+                required: !field.optional
+            }),
+            /*#__PURE__*/ jsx(Select, {
+                size: "sm",
+                id: htmlId,
+                name: field.name,
+                placeholder: "Select an option",
+                required: !field.optional,
+                value: incomingValue,
+                ariaLabel: field.label,
+                helpText: field.helpText,
+                items: field.options.map((opt)=>({
+                        value: opt.value,
+                        label: opt.label
+                    })),
+                onValueChange: (value)=>{
+                    if (null != value) onChange?.(value);
+                },
+                className: classnames(isDirty && [
+                    'byline-field-select-dirty',
+                    select_field_module.dirty
+                ])
+            }),
+            fieldError && /*#__PURE__*/ jsx(ErrorText, {
+                id: `${field.name}-error`,
+                text: fieldError
+            })
+        ]
+    });
+};
+export { SelectField };

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

@@ -0,0 +1,5 @@
+import "./select-field_module.css";
+const select_field_module = {
+    dirty: "dirty-aKaGZN"
+};
+export default select_field_module;

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

@@ -0,0 +1,4 @@
+:is(.dirty-aKaGZN, .byline-field-select-dirty) {
+  border-color: var(--blue-300);
+}
+

package/dist/fields/sortable-item.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 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 ReactNode } from 'react';
+export declare const SortableItem: ({ id, label, children, onAddBelow, onRemove, }: {
+    id: string;
+    label: ReactNode;
+    children: ReactNode;
+    onAddBelow?: () => void;
+    onRemove?: () => void;
+}) => import("react").JSX.Element;

package/dist/fields/sortable-item.js

@@ -0,0 +1,81 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useTranslation } from "@byline/i18n/react";
+import { ChevronDownIcon, GripperVerticalIcon, useSortable } from "@byline/ui/react";
+import classnames from "classnames";
+import { DraggableContextMenu } from "./draggable-context-menu.js";
+import sortable_item_module from "./sortable-item.module.js";
+const SortableItem = ({ id, label, children, onAddBelow, onRemove })=>{
+    const { t } = useTranslation('byline-admin');
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+        id,
+        transition: {
+            duration: 250,
+            easing: 'cubic-bezier(0, 0.2, 0.2, 1)'
+        }
+    });
+    const [collapsed, setCollapsed] = useState(false);
+    const style = {
+        transform: transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : void 0,
+        transition,
+        zIndex: isDragging ? 10 : 'auto'
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        ref: setNodeRef,
+        style: style,
+        className: classnames('byline-sortable', sortable_item_module.root, isDragging && [
+            'byline-sortable-dragging',
+            sortable_item_module.dragging
+        ], collapsed && [
+            'byline-sortable-collapsed',
+            sortable_item_module.collapsed
+        ]),
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: classnames('byline-sortable-header', sortable_item_module.header, !collapsed && [
+                    'byline-sortable-header-expanded',
+                    sortable_item_module["header-expanded"]
+                ]),
+                children: [
+                    /*#__PURE__*/ jsx("button", {
+                        type: "button",
+                        className: classnames('byline-sortable-grip', sortable_item_module.grip),
+                        ...attributes,
+                        ...listeners,
+                        children: /*#__PURE__*/ jsx(GripperVerticalIcon, {
+                            className: classnames('byline-sortable-grip-icon', sortable_item_module["grip-icon"])
+                        })
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: classnames('byline-sortable-label', sortable_item_module.label),
+                        children: label
+                    }),
+                    /*#__PURE__*/ jsx(DraggableContextMenu, {
+                        onAddBelow: onAddBelow,
+                        onRemove: onRemove
+                    }),
+                    /*#__PURE__*/ jsx("button", {
+                        type: "button",
+                        className: classnames('byline-sortable-toggle', sortable_item_module.toggle),
+                        onClick: ()=>setCollapsed((prev)=>!prev),
+                        "aria-label": collapsed ? t('fields.sortable.expandAriaLabel') : t('fields.sortable.collapseAriaLabel'),
+                        children: /*#__PURE__*/ jsx(ChevronDownIcon, {
+                            className: classnames('byline-sortable-toggle-icon', sortable_item_module["toggle-icon"], collapsed && [
+                                'byline-sortable-toggle-icon-rotated',
+                                sortable_item_module["toggle-icon-rotated"]
+                            ])
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: classnames('byline-sortable-content', sortable_item_module.content, collapsed && [
+                    'byline-sortable-content-hidden',
+                    sortable_item_module["content-hidden"]
+                ]),
+                children: children
+            })
+        ]
+    });
+};
+export { SortableItem };

package/dist/fields/sortable-item.module.js

@@ -0,0 +1,22 @@
+import "./sortable-item_module.css";
+const sortable_item_module = {
+    root: "root-nYQaZT",
+    dragging: "dragging-rtG5ct",
+    collapsed: "collapsed-BA4JvQ",
+    header: "header-IyXOb9",
+    "header-expanded": "header-expanded-xwmWic",
+    headerExpanded: "header-expanded-xwmWic",
+    grip: "grip-XZjBQM",
+    "grip-icon": "grip-icon-tCuFX_",
+    gripIcon: "grip-icon-tCuFX_",
+    label: "label-SFRtoy",
+    toggle: "toggle-zv8W_y",
+    "toggle-icon": "toggle-icon-vk15Bb",
+    toggleIcon: "toggle-icon-vk15Bb",
+    "toggle-icon-rotated": "toggle-icon-rotated-p9rEVP",
+    toggleIconRotated: "toggle-icon-rotated-p9rEVP",
+    content: "content-ril4mv",
+    "content-hidden": "content-hidden-zrS2UX",
+    contentHidden: "content-hidden-zrS2UX"
+};
+export default sortable_item_module;

package/dist/fields/sortable-item_module.css

@@ -0,0 +1,124 @@
+:is(.root-nYQaZT, .byline-sortable) {
+  padding: var(--spacing-16);
+  padding-top: var(--spacing-8);
+  border: var(--border-width-thin) dashed var(--gray-600);
+  border-radius: var(--border-radius-md);
+  background-color: oklch(from var(--canvas-50) l c h / .5);
+  box-shadow: 0 1px 2px #0000000d;
+}
+
+:is(.dragging-rtG5ct, .byline-sortable-dragging) {
+  background-color: oklch(from var(--canvas-50) l c h / .8);
+  box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
+}
+
+:is(.collapsed-BA4JvQ, .byline-sortable-collapsed) {
+  padding-top: var(--spacing-8);
+  padding-bottom: var(--spacing-8);
+}
+
+:is(.header-IyXOb9, .byline-sortable-header) {
+  align-items: center;
+  gap: var(--spacing-8);
+  margin-bottom: 0;
+  margin-left: -.75rem;
+  display: flex;
+}
+
+:is(.header-expanded-xwmWic, .byline-sortable-header-expanded) {
+  margin-bottom: var(--spacing-8);
+}
+
+:is(.grip-XZjBQM, .byline-sortable-grip) {
+  border-radius: var(--border-radius-sm);
+  color: var(--gray-400);
+  cursor: grab;
+  background: none;
+  border: none;
+  justify-content: center;
+  align-items: center;
+  padding: .25rem;
+  display: flex;
+}
+
+:is(.grip-XZjBQM:hover, .byline-sortable-grip:hover) {
+  background-color: var(--gray-100);
+}
+
+:is(.grip-XZjBQM:active, .byline-sortable-grip:active) {
+  cursor: grabbing;
+}
+
+:is(.grip-icon-tCuFX_, .byline-sortable-grip-icon) {
+  width: 1rem;
+  height: 1rem;
+  color: var(--primary-500);
+}
+
+:is(.label-SFRtoy, .byline-sortable-label) {
+  min-width: 0;
+  font-size: 1rem;
+  font-weight: var(--font-weight-medium);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  overflow: hidden;
+}
+
+:is(.toggle-zv8W_y, .byline-sortable-toggle) {
+  border-radius: var(--border-radius-sm);
+  color: var(--gray-400);
+  cursor: pointer;
+  background: none;
+  border: none;
+  justify-content: center;
+  align-items: center;
+  padding: .25rem;
+  display: flex;
+}
+
+:is(.toggle-zv8W_y:hover, .byline-sortable-toggle:hover) {
+  background-color: var(--gray-800);
+}
+
+:is(.toggle-icon-vk15Bb, .byline-sortable-toggle-icon) {
+  width: 1rem;
+  height: 1rem;
+  transition: transform .15s;
+}
+
+:is(.toggle-icon-rotated-p9rEVP, .byline-sortable-toggle-icon-rotated) {
+  transform: rotate(180deg);
+}
+
+:is(.content-ril4mv, .byline-sortable-content) {
+  gap: var(--spacing-16);
+  opacity: 1;
+  flex-direction: column;
+  transition: all .2s;
+  display: flex;
+  position: relative;
+}
+
+:is(.content-hidden-zrS2UX, .byline-sortable-content-hidden) {
+  opacity: 0;
+  z-index: -10;
+  max-height: 0;
+}
+
+:is(:is([data-theme="dark"], .dark) .root-nYQaZT, :is([data-theme="dark"], .dark) .byline-sortable) {
+  background-color: var(--canvas-800);
+}
+
+:is(:is([data-theme="dark"], .dark) .dragging-rtG5ct, :is([data-theme="dark"], .dark) .byline-sortable-dragging) {
+  background-color: oklch(from var(--canvas-700) l c h / .3);
+}
+
+:is(:is([data-theme="dark"], .dark) .grip-XZjBQM:hover, :is([data-theme="dark"], .dark) .byline-sortable-grip:hover) {
+  background-color: var(--gray-800);
+}
+
+:is(:is([data-theme="dark"], .dark) .grip-icon-tCuFX_, :is([data-theme="dark"], .dark) .byline-sortable-grip-icon) {
+  color: var(--primary-200);
+}
+

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

@@ -0,0 +1,20 @@
+/**
+ * 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 { FieldComponentSlots, TextField as FieldType } from '@byline/core';
+export declare const TextField: ({ field, value, defaultValue, onChange, id, path, locale, components, }: {
+    field: FieldType;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    id?: string;
+    path?: string;
+    /** When provided, renders a LocaleBadge next to the field label. */
+    locale?: string;
+    /** Optional UI component slot overrides from the admin config. */
+    components?: FieldComponentSlots;
+}) => import("react").JSX.Element;

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

@@ -0,0 +1,104 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { Input, Label } from "@byline/ui/react";
+import classnames from "classnames";
+import { useFieldError, useFieldValue } from "../../forms/form-context.js";
+import { LocaleBadge } from "../locale-badge.js";
+import text_field_module from "./text-field.module.js";
+const TextField = ({ field, value, defaultValue, onChange, id, path, locale, components })=>{
+    const fieldPath = path ?? field.name;
+    const fieldError = useFieldError(fieldPath);
+    const fieldValue = useFieldValue(fieldPath);
+    const incomingValue = value ?? fieldValue ?? defaultValue ?? '';
+    const htmlId = id ?? fieldPath;
+    const handleChange = useCallback((value)=>{
+        if (onChange) onChange(value);
+    }, [
+        onChange
+    ]);
+    const slots = components;
+    const CustomLabel = slots?.Label;
+    const CustomHelpText = slots?.HelpText;
+    const CustomField = slots?.Field;
+    const BeforeField = slots?.beforeField;
+    const AfterField = slots?.afterField;
+    const slotBaseProps = {
+        field: field,
+        path: fieldPath,
+        value: incomingValue,
+        error: fieldError,
+        id: htmlId
+    };
+    const showBadge = !!locale && !!field.label;
+    const hasCustomLabel = !!CustomLabel;
+    const suppressInputLabel = showBadge || hasCustomLabel;
+    const suppressInputHelpText = !!CustomHelpText;
+    const labelRowClass = classnames('byline-field-text-label-row', text_field_module["label-row"]);
+    const renderLabel = ()=>{
+        if (hasCustomLabel) return /*#__PURE__*/ jsxs("div", {
+            className: labelRowClass,
+            children: [
+                /*#__PURE__*/ jsx(CustomLabel, {
+                    ...slotBaseProps,
+                    label: field.label,
+                    required: !field.optional
+                }),
+                showBadge && /*#__PURE__*/ jsx(LocaleBadge, {
+                    locale: locale
+                })
+            ]
+        });
+        if (showBadge) return /*#__PURE__*/ jsxs("div", {
+            className: labelRowClass,
+            children: [
+                /*#__PURE__*/ jsx(Label, {
+                    id: `${htmlId}-label`,
+                    htmlFor: htmlId,
+                    label: field.label,
+                    required: !field.optional
+                }),
+                /*#__PURE__*/ jsx(LocaleBadge, {
+                    locale: locale
+                })
+            ]
+        });
+        return null;
+    };
+    const renderInput = ()=>{
+        if (CustomField) return /*#__PURE__*/ jsx(CustomField, {
+            ...slotBaseProps,
+            onChange: handleChange,
+            defaultValue: defaultValue,
+            placeholder: field.placeholder
+        });
+        return /*#__PURE__*/ jsx(Input, {
+            id: htmlId,
+            name: field.name,
+            label: suppressInputLabel ? void 0 : field.label,
+            required: !field.optional,
+            helpText: suppressInputHelpText ? void 0 : field.helpText,
+            value: incomingValue,
+            onChange: (e)=>handleChange(e.target.value),
+            error: null != fieldError,
+            errorText: fieldError
+        });
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        className: `byline-field-text ${field.name}`,
+        children: [
+            renderLabel(),
+            BeforeField && /*#__PURE__*/ jsx(BeforeField, {
+                ...slotBaseProps
+            }),
+            renderInput(),
+            AfterField && /*#__PURE__*/ jsx(AfterField, {
+                ...slotBaseProps
+            }),
+            CustomHelpText && /*#__PURE__*/ jsx(CustomHelpText, {
+                ...slotBaseProps,
+                helpText: field.helpText
+            })
+        ]
+    });
+};
+export { TextField };

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

@@ -0,0 +1,6 @@
+import "./text-field_module.css";
+const text_field_module = {
+    "label-row": "label-row-sjBuRb",
+    labelRow: "label-row-sjBuRb"
+};
+export default text_field_module;

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

@@ -0,0 +1,5 @@
+:is(.label-row-sjBuRb, .byline-field-text-label-row) {
+  align-items: center;
+  display: flex;
+}
+

package/dist/fields/text-area/text-area-field.d.ts

@@ -0,0 +1,20 @@
+/**
+ * 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 { FieldComponentSlots, TextAreaField as FieldType } from '@byline/core';
+export declare const TextAreaField: ({ field, value, defaultValue, onChange, id, path, locale, components, }: {
+    field: FieldType;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    id?: string;
+    path?: string;
+    /** When provided, renders a LocaleBadge next to the field label. */
+    locale?: string;
+    /** Optional UI component slot overrides from the admin config. */
+    components?: FieldComponentSlots;
+}) => import("react").JSX.Element;