@byline/ui 2.5.1 → 2.6.0

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

@@ -1,31 +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 { 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

@@ -1,50 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,37 +0,0 @@
-: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

@@ -1,16 +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 { 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

@@ -1,50 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import classnames from "classnames";
-import { useFieldError, useFieldValue, useIsDirty } from "../../forms/form-context.js";
-import { ErrorText, Label, Select } from "../../uikit.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

@@ -1,5 +0,0 @@
-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

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

package/dist/fields/sortable-item.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 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

@@ -1,80 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import classnames from "classnames";
-import { useSortable } from "../dnd/draggable-sortable/index.js";
-import { ChevronDownIcon, GripperVerticalIcon } from "../uikit.js";
-import { DraggableContextMenu } from "./draggable-context-menu.js";
-import sortable_item_module from "./sortable-item.module.js";
-const SortableItem = ({ id, label, children, onAddBelow, onRemove })=>{
-    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 ? 'Expand item' : 'Collapse item',
-                        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

@@ -1,22 +0,0 @@
-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

@@ -1,124 +0,0 @@
-: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

@@ -1,20 +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 { 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

@@ -1,104 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback } from "react";
-import classnames from "classnames";
-import { useFieldError, useFieldValue } from "../../forms/form-context.js";
-import { Input, Label } from "../../uikit.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

@@ -1,6 +0,0 @@
-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

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

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

@@ -1,20 +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 { 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;