@byline/ui 2.5.2 → 2.6.1

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

@@ -1,244 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from "react";
-import classnames from "classnames";
-import { DraggableSortable, moveItem } from "../../dnd/draggable-sortable/index.js";
-import { defaultScalarForField } from "../field-helpers.js";
-import { GroupField } from "../group/group-field.js";
-import { SortableItem } from "../sortable-item.js";
-import { useFormContext } from "../../forms/form-context.js";
-import { Card, CloseIcon, IconButton, Modal, PlusIcon } from "../../uikit.js";
-import blocks_field_module from "./blocks-field.module.js";
-const BlocksField = ({ field, defaultValue, path })=>{
-    const { appendPatch, getFieldValue, getFieldValues, setFieldStore } = useFormContext();
-    const [items, setItems] = useState([]);
-    const [showAddBlockModal, setShowAddBlockModal] = useState(false);
-    const [pendingInsertIndex, setPendingInsertIndex] = useState(null);
-    const availableBlocks = useMemo(()=>field.blocks ?? [], [
-        field.blocks
-    ]);
-    const [selectedBlockName, setSelectedBlockName] = useState(()=>availableBlocks[0]?.blockType);
-    useEffect(()=>{
-        if (null == selectedBlockName || !availableBlocks.some((b)=>b.blockType === selectedBlockName)) setSelectedBlockName(availableBlocks[0]?.blockType);
-    }, [
-        availableBlocks,
-        selectedBlockName
-    ]);
-    useEffect(()=>{
-        Array.isArray(defaultValue) ? setItems(defaultValue.map((item)=>({
-                id: item && 'object' == typeof item && '_id' in item ? String(item._id) : crypto.randomUUID(),
-                data: item
-            }))) : setItems([]);
-    }, [
-        defaultValue
-    ]);
-    const handleDragEnd = ({ moveFromIndex, moveToIndex })=>{
-        setItems((prev)=>moveItem(prev, moveFromIndex, moveToIndex));
-        const currentArray = getFieldValue(path) ?? defaultValue;
-        if (Array.isArray(currentArray)) {
-            const clampedFrom = Math.max(0, Math.min(moveFromIndex, currentArray.length - 1));
-            const clampedTo = Math.max(0, Math.min(moveToIndex, currentArray.length - 1));
-            if (clampedFrom === clampedTo) return;
-            const item = currentArray[clampedFrom];
-            const itemId = item && 'object' == typeof item && '_id' in item ? String(item._id) : String(clampedFrom);
-            appendPatch({
-                kind: 'array.move',
-                path: path,
-                itemId,
-                toIndex: clampedTo
-            });
-        }
-    };
-    const handleAddItem = async (forcedVariantName, atIndex)=>{
-        setShowAddBlockModal(false);
-        setPendingInsertIndex(null);
-        const variant = (null != forcedVariantName ? availableBlocks.find((v)=>v.blockType === forcedVariantName) : void 0) ?? availableBlocks[0];
-        if (!variant) return;
-        const compositeFields = variant.fields ?? [];
-        const newId = crypto.randomUUID();
-        const newItem = {
-            _id: newId,
-            _type: variant.blockType
-        };
-        for (const f of compositeFields)newItem[f.name] = await defaultScalarForField(f, getFieldValues);
-        const currentArray = getFieldValue(path) ?? defaultValue;
-        const insertAt = null != atIndex ? atIndex : currentArray ? currentArray.length : 0;
-        const newItemWrapper = {
-            id: newId,
-            data: newItem
-        };
-        setItems((prev)=>{
-            const next = [
-                ...prev
-            ];
-            next.splice(insertAt, 0, newItemWrapper);
-            return next;
-        });
-        appendPatch({
-            kind: 'array.insert',
-            path: path,
-            index: insertAt,
-            item: newItem
-        });
-        const newArrayValue = currentArray ? [
-            ...currentArray
-        ] : [];
-        newArrayValue.splice(insertAt, 0, newItem);
-        setFieldStore(path, newArrayValue);
-    };
-    const handleRemoveItem = (index)=>{
-        const currentArray = getFieldValue(path) ?? defaultValue;
-        if (!Array.isArray(currentArray) || index < 0 || index >= currentArray.length) return;
-        const item = currentArray[index];
-        const itemId = item && 'object' == typeof item && '_id' in item ? String(item._id) : String(index);
-        setItems((prev)=>prev.filter((_, i)=>i !== index));
-        appendPatch({
-            kind: 'array.remove',
-            path: path,
-            itemId
-        });
-        const newArrayValue = [
-            ...currentArray
-        ];
-        newArrayValue.splice(index, 1);
-        setFieldStore(path, newArrayValue);
-    };
-    const handleInsertBelow = (index, forcedVariantName)=>{
-        if (availableBlocks.length > 1 && null == forcedVariantName) {
-            setPendingInsertIndex(index + 1);
-            setShowAddBlockModal(true);
-        } else handleAddItem(forcedVariantName, index + 1);
-    };
-    const renderItem = (itemWrapper, index)=>{
-        const item = itemWrapper.data;
-        const arrayElementPath = `${path}[${index}]`;
-        if (!item || 'object' != typeof item || 'string' != typeof item._type) return null;
-        const subField = field.blocks?.find((b)=>b.blockType === item._type);
-        if (null == subField) return null;
-        const { _id, _type, ...fieldData } = item;
-        const label = subField.label ?? _type;
-        const body = /*#__PURE__*/ jsx(GroupField, {
-            field: {
-                type: 'group',
-                name: subField.blockType,
-                fields: subField.fields,
-                label: void 0
-            },
-            defaultValue: fieldData,
-            path: arrayElementPath
-        }, subField.blockType);
-        return /*#__PURE__*/ jsx(SortableItem, {
-            id: itemWrapper.id,
-            label: label ?? subField.blockType,
-            onAddBelow: ()=>handleInsertBelow(index),
-            onRemove: ()=>handleRemoveItem(index),
-            children: body
-        }, itemWrapper.id);
-    };
-    return /*#__PURE__*/ jsxs("div", {
-        className: `byline-field-blocks ${field.name}`,
-        children: [
-            field.label && /*#__PURE__*/ jsx("h3", {
-                className: classnames('byline-field-blocks-title', blocks_field_module.title),
-                children: field.label
-            }),
-            /*#__PURE__*/ jsxs(DraggableSortable, {
-                ids: items.map((i)=>i.id),
-                onDragEnd: handleDragEnd,
-                className: classnames('byline-field-blocks-stack', blocks_field_module.stack),
-                children: [
-                    items.map((item, index)=>renderItem(item, index)),
-                    /*#__PURE__*/ jsx("div", {
-                        className: classnames('byline-field-blocks-add-row', blocks_field_module["add-row"]),
-                        children: /*#__PURE__*/ jsx(IconButton, {
-                            onClick: ()=>{
-                                setPendingInsertIndex(null);
-                                setShowAddBlockModal(true);
-                            },
-                            disabled: !selectedBlockName,
-                            "aria-label": "Add block",
-                            children: /*#__PURE__*/ jsx(PlusIcon, {})
-                        })
-                    })
-                ]
-            }),
-            /*#__PURE__*/ jsx(Modal, {
-                isOpen: showAddBlockModal,
-                closeOnOverlayClick: true,
-                onDismiss: ()=>{
-                    setShowAddBlockModal(false);
-                    setPendingInsertIndex(null);
-                },
-                children: /*#__PURE__*/ jsxs(Modal.Container, {
-                    style: {
-                        maxWidth: '600px'
-                    },
-                    children: [
-                        /*#__PURE__*/ jsxs(Modal.Header, {
-                            className: classnames('byline-field-blocks-modal-head', blocks_field_module["modal-head"]),
-                            children: [
-                                /*#__PURE__*/ jsx("h3", {
-                                    className: classnames('byline-field-blocks-modal-title', blocks_field_module["modal-title"]),
-                                    children: "Blocks"
-                                }),
-                                /*#__PURE__*/ jsx(IconButton, {
-                                    "arial-label": "Close",
-                                    size: "xs",
-                                    onClick: ()=>{
-                                        setShowAddBlockModal(false);
-                                        setPendingInsertIndex(null);
-                                    },
-                                    children: /*#__PURE__*/ jsx(CloseIcon, {
-                                        width: "16px",
-                                        height: "16px",
-                                        svgClassName: "white-icon"
-                                    })
-                                })
-                            ]
-                        }),
-                        /*#__PURE__*/ jsx(Modal.Content, {
-                            className: classnames('byline-field-blocks-card-cursor', blocks_field_module["modal-content"]),
-                            children: /*#__PURE__*/ jsx("div", {
-                                className: classnames('byline-field-blocks-grid', blocks_field_module.grid),
-                                children: availableBlocks.map((b, index)=>/*#__PURE__*/ jsxs(Card, {
-                                        hover: true,
-                                        onClick: ()=>void handleAddItem(b.blockType, pendingInsertIndex ?? void 0),
-                                        className: classnames('byline-field-blocks-card', blocks_field_module.card),
-                                        children: [
-                                            /*#__PURE__*/ jsxs(Card.Header, {
-                                                children: [
-                                                    /*#__PURE__*/ jsxs("div", {
-                                                        className: classnames('byline-field-blocks-card-head', blocks_field_module["card-head"]),
-                                                        children: [
-                                                            /*#__PURE__*/ jsx(Card.Title, {
-                                                                className: classnames('byline-field-blocks-card-title', blocks_field_module["card-title"]),
-                                                                children: b.label ?? b.blockType
-                                                            }),
-                                                            /*#__PURE__*/ jsx("span", {
-                                                                className: classnames('byline-field-blocks-card-index', blocks_field_module["card-index"]),
-                                                                children: index + 1
-                                                            })
-                                                        ]
-                                                    }),
-                                                    /*#__PURE__*/ jsx("code", {
-                                                        className: classnames('byline-field-blocks-card-code', blocks_field_module["card-code"]),
-                                                        children: b.blockType
-                                                    })
-                                                ]
-                                            }),
-                                            /*#__PURE__*/ jsx(Card.Content, {
-                                                children: /*#__PURE__*/ jsx("p", {
-                                                    className: classnames('byline-field-blocks-card-body', blocks_field_module["card-body"]),
-                                                    children: b.helpText ?? b.label ?? b.blockType
-                                                })
-                                            })
-                                        ]
-                                    }, b.blockType))
-                            })
-                        })
-                    ]
-                })
-            })
-        ]
-    });
-};
-export { BlocksField };

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

@@ -1,26 +0,0 @@
-import "./blocks-field_module.css";
-const blocks_field_module = {
-    title: "title-lxXfG6",
-    stack: "stack-Xxa89J",
-    "add-row": "add-row-gEqjM_",
-    addRow: "add-row-gEqjM_",
-    "modal-head": "modal-head-BTxR9C",
-    modalHead: "modal-head-BTxR9C",
-    "modal-title": "modal-title-jwOfU_",
-    modalTitle: "modal-title-jwOfU_",
-    "modal-content": "modal-content-S12b_T",
-    modalContent: "modal-content-S12b_T",
-    grid: "grid-gALL6j",
-    card: "card-O4b_4k",
-    "card-head": "card-head-yrL68H",
-    cardHead: "card-head-yrL68H",
-    "card-title": "card-title-yBgy__",
-    cardTitle: "card-title-yBgy__",
-    "card-index": "card-index-XD_vf6",
-    cardIndex: "card-index-XD_vf6",
-    "card-code": "card-code-pEAcf6",
-    cardCode: "card-code-pEAcf6",
-    "card-body": "card-body-RhabRg",
-    cardBody: "card-body-RhabRg"
-};
-export default blocks_field_module;

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

@@ -1,107 +0,0 @@
-:is(.title-lxXfG6, .byline-field-blocks-title) {
-  font-size: 1rem;
-  font-weight: var(--font-weight-medium);
-  margin-bottom: .25rem;
-}
-
-:is(.stack-Xxa89J, .byline-field-blocks-stack) {
-  gap: var(--spacing-16);
-  flex-direction: column;
-  display: flex;
-}
-
-:is(.add-row-gEqjM_, .byline-field-blocks-add-row) {
-  align-items: center;
-  gap: var(--spacing-8);
-  display: flex;
-}
-
-:is(.modal-head-BTxR9C, .byline-field-blocks-modal-head) {
-  margin-bottom: var(--spacing-8);
-  padding-top: 1rem;
-}
-
-:is(.modal-title-jwOfU_, .byline-field-blocks-modal-title) {
-  margin: 0 0 var(--spacing-8) 0;
-  font-size: var(--font-size-2xl);
-}
-
-:is(.modal-content-S12b_T, .byline-field-blocks-card-cursor) {
-  cursor: pointer;
-}
-
-:is(.grid-gALL6j, .byline-field-blocks-grid) {
-  gap: var(--spacing-16);
-  grid-template-columns: 1fr;
-  display: grid;
-}
-
-@media (min-width: 40rem) {
-  :is(.grid-gALL6j, .byline-field-blocks-grid) {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media (min-width: 48rem) {
-  :is(.grid-gALL6j, .byline-field-blocks-grid) {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}
-
-:is(.card-O4b_4k, .byline-field-blocks-card) {
-  margin-bottom: var(--spacing-8);
-}
-
-:is(.card-head-yrL68H, .byline-field-blocks-card-head) {
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: var(--spacing-8);
-  display: flex;
-}
-
-:is(.card-title-yBgy__, .byline-field-blocks-card-title) {
-  font-size: 1.3rem;
-  line-height: var(--line-height-tight);
-}
-
-:is(.card-index-XD_vf6, .byline-field-blocks-card-index) {
-  border: var(--border-width-thin) var(--border-style-solid) var(--gray-100);
-  border-radius: var(--border-radius-full);
-  width: 1.25rem;
-  height: 1.25rem;
-  color: var(--gray-400);
-  font-size: 10px;
-  font-weight: var(--font-weight-semibold);
-  font-variant-numeric: tabular-nums;
-  flex-shrink: 0;
-  justify-content: center;
-  align-items: center;
-  margin-top: .125rem;
-  display: inline-flex;
-}
-
-:is(.card-code-pEAcf6, .byline-field-blocks-card-code) {
-  color: var(--gray-400);
-  margin-top: 0;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  font-size: 12px;
-  display: block;
-}
-
-:is(.card-body-RhabRg, .byline-field-blocks-card-body) {
-  color: var(--gray-500);
-  font-size: var(--font-size-sm);
-}
-
-:is(:is([data-theme="dark"], .dark) .card-index-XD_vf6, :is([data-theme="dark"], .dark) .byline-field-blocks-card-index) {
-  border-color: var(--gray-700);
-}
-
-:is(:is([data-theme="dark"], .dark) .card-code-pEAcf6, :is([data-theme="dark"], .dark) .byline-field-blocks-card-code) {
-  color: var(--gray-500);
-}
-
-:is(:is([data-theme="dark"], .dark) .card-body-RhabRg, :is([data-theme="dark"], .dark) .byline-field-blocks-card-body) {
-  color: var(--gray-200);
-}
-

package/dist/fields/checkbox/checkbox-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 { CheckboxField as FieldType } from '@byline/core';
-export declare const CheckboxField: ({ field, value, defaultValue, onChange, id, path, }: {
-    field: FieldType;
-    value?: boolean;
-    defaultValue?: boolean;
-    onChange?: (value: boolean) => void;
-    id?: string;
-    path?: string;
-}) => import("react").JSX.Element;

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

@@ -1,28 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useFieldError, useFieldValue } from "../../forms/form-context.js";
-import { Checkbox } from "../../uikit.js";
-import checkbox_field_module from "./checkbox-field.module.js";
-const CheckboxField = ({ field, value, defaultValue, onChange, id, path })=>{
-    const fieldPath = path ?? field.name;
-    const fieldError = useFieldError(fieldPath);
-    const fieldValue = useFieldValue(fieldPath);
-    const checked = value ?? fieldValue ?? defaultValue ?? false;
-    return /*#__PURE__*/ jsx("div", {
-        className: `byline-field-checkbox ${field.name} ${checkbox_field_module["field-checkbox"]}`,
-        children: /*#__PURE__*/ jsx(Checkbox, {
-            id: id ?? fieldPath,
-            name: field.name,
-            label: field.label,
-            checked: checked,
-            size: "sm",
-            helpText: field.helpText,
-            onCheckedChange: (value)=>{
-                const next = 'indeterminate' === value ? false : Boolean(value);
-                onChange?.(next);
-            },
-            error: null != fieldError,
-            errorText: fieldError
-        })
-    });
-};
-export { CheckboxField };

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

@@ -1,6 +0,0 @@
-import "./checkbox-field_module.css";
-const checkbox_field_module = {
-    "field-checkbox": "field-checkbox-H7UwUd",
-    fieldCheckbox: "field-checkbox-H7UwUd"
-};
-export default checkbox_field_module;

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

@@ -1,4 +0,0 @@
-:is(.byline-field-checkbox, .field-checkbox-H7UwUd) {
-  margin: 0;
-}
-

package/dist/fields/column-formatter.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 { ColumnFormatter, FormatterProps } from '@byline/core';
-/**
- * Type guard: returns true when the formatter is a `{ component }` wrapper
- * rather than a plain function.
- */
-export declare function isComponentFormatter<T>(fmt: ColumnFormatter<T>): fmt is {
-    component: (props: FormatterProps<T>) => any;
-};
-/**
- * Render a cell value through its column formatter (if any).
- * Handles both plain-function and `{ component }` formatters.
- */
-export declare function renderFormatted(value: any, document: any, formatter: ColumnFormatter): any;

package/dist/fields/column-formatter.js

@@ -1,15 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-function isComponentFormatter(fmt) {
-    return 'object' == typeof fmt && null !== fmt && 'component' in fmt;
-}
-function renderFormatted(value, document, formatter) {
-    if (isComponentFormatter(formatter)) {
-        const Component = formatter.component;
-        return /*#__PURE__*/ jsx(Component, {
-            value: value,
-            record: document
-        });
-    }
-    return formatter(value, document);
-}
-export { isComponentFormatter, renderFormatted };

package/dist/fields/date-time-formatter.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 { FormatterProps } from '@byline/core';
-/**
- * SSR-safe date-time column formatter for list views.
- *
- * Uses the `LocalDateTime` component which renders a placeholder on the server
- * and formats to the user's locale/timezone after hydration, avoiding
- * server/client mismatches.
- */
-export declare function DateTimeFormatter({ value }: FormatterProps): import("react").JSX.Element;

package/dist/fields/date-time-formatter.js

@@ -1,8 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { LocalDateTime } from "./local-date-time.js";
-function DateTimeFormatter({ value }) {
-    return /*#__PURE__*/ jsx(LocalDateTime, {
-        value: value
-    });
-}
-export { DateTimeFormatter };

package/dist/fields/datetime/datetime-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 { DateTimeField as FieldType } from '@byline/core';
-export declare const DateTimeField: ({ field, value, defaultValue, onChange, id, path, }: {
-    field: FieldType;
-    value?: Date | null;
-    defaultValue?: Date | null;
-    onChange?: (value: Date | null) => void;
-    id?: string;
-    path?: string;
-}) => import("react").JSX.Element;

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

@@ -1,37 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import classnames from "classnames";
-import { useFieldError, useFieldValue, useIsDirty } from "../../forms/form-context.js";
-import { DatePicker, ErrorText } from "../../uikit.js";
-import datetime_field_module from "./datetime-field.module.js";
-const DateTimeField = ({ 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 ?? null;
-    return /*#__PURE__*/ jsxs("div", {
-        className: `byline-field-datetime ${field.name}`,
-        children: [
-            /*#__PURE__*/ jsx(DatePicker, {
-                id: id ?? fieldPath,
-                name: field.name,
-                label: field.label,
-                required: !field.optional,
-                initialValue: incomingValue,
-                mode: field.mode || 'datetime',
-                yearsInFuture: field.yearsInFuture || 1,
-                yearsInPast: field.yearsInPast || 10,
-                onDateChange: (date)=>onChange?.(date),
-                className: classnames(isDirty && [
-                    'byline-field-datetime-dirty',
-                    datetime_field_module.dirty
-                ])
-            }),
-            fieldError && /*#__PURE__*/ jsx(ErrorText, {
-                id: `${field.name}-error`,
-                text: fieldError
-            })
-        ]
-    });
-};
-export { DateTimeField };

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

@@ -1,5 +0,0 @@
-import "./datetime-field_module.css";
-const datetime_field_module = {
-    dirty: "dirty-cC4ARG"
-};
-export default datetime_field_module;

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

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

package/dist/fields/draggable-context-menu.d.ts

@@ -1,6 +0,0 @@
-interface DraggableContextMenuProps {
-    onAddBelow?: () => void;
-    onRemove?: () => void;
-}
-export declare function DraggableContextMenu({ onAddBelow, onRemove, }: DraggableContextMenuProps): React.JSX.Element;
-export {};

package/dist/fields/draggable-context-menu.js

@@ -1,83 +0,0 @@
-"use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import classnames from "classnames";
-import { DeleteIcon, Dropdown, EllipsisIcon, IconButton, PlusIcon } from "../uikit.js";
-import draggable_context_menu_module from "./draggable-context-menu.module.js";
-function DraggableContextMenu({ onAddBelow, onRemove }) {
-    const itemClass = classnames('byline-draggable-menu-item', draggable_context_menu_module.item);
-    const rowClass = classnames('byline-draggable-menu-row', draggable_context_menu_module.row);
-    const iconSlotClass = classnames('byline-draggable-menu-icon-slot', draggable_context_menu_module["icon-slot"]);
-    const labelClass = classnames('byline-draggable-menu-label', draggable_context_menu_module.label);
-    return /*#__PURE__*/ jsxs(Dropdown.Root, {
-        modal: false,
-        children: [
-            /*#__PURE__*/ jsx(Dropdown.Trigger, {
-                render: /*#__PURE__*/ jsx(IconButton, {
-                    variant: "text",
-                    size: "sm"
-                }),
-                children: /*#__PURE__*/ jsx(EllipsisIcon, {
-                    width: "16px",
-                    height: "16px"
-                })
-            }),
-            /*#__PURE__*/ jsx(Dropdown.Portal, {
-                children: /*#__PURE__*/ jsxs(Dropdown.Content, {
-                    align: "end",
-                    sideOffset: 0,
-                    className: classnames('byline-draggable-menu', draggable_context_menu_module.menu),
-                    children: [
-                        /*#__PURE__*/ jsx(Dropdown.Item, {
-                            className: itemClass,
-                            onClick: onAddBelow,
-                            children: /*#__PURE__*/ jsxs("div", {
-                                className: rowClass,
-                                children: [
-                                    /*#__PURE__*/ jsx("span", {
-                                        className: iconSlotClass,
-                                        children: /*#__PURE__*/ jsx(PlusIcon, {
-                                            width: "18px",
-                                            height: "18px"
-                                        })
-                                    }),
-                                    /*#__PURE__*/ jsx("span", {
-                                        className: labelClass,
-                                        children: "Add Below"
-                                    })
-                                ]
-                            })
-                        }),
-                        /*#__PURE__*/ jsx(Dropdown.Separator, {
-                            className: classnames('byline-draggable-menu-separator', draggable_context_menu_module.separator)
-                        }),
-                        /*#__PURE__*/ jsx(Dropdown.Item, {
-                            className: itemClass,
-                            onClick: onRemove,
-                            children: /*#__PURE__*/ jsx("div", {
-                                className: rowClass,
-                                children: /*#__PURE__*/ jsxs("div", {
-                                    className: rowClass,
-                                    children: [
-                                        /*#__PURE__*/ jsx("span", {
-                                            className: iconSlotClass,
-                                            children: /*#__PURE__*/ jsx(DeleteIcon, {
-                                                width: "18px",
-                                                height: "18px",
-                                                svgClassName: classnames('byline-draggable-menu-delete-icon', draggable_context_menu_module["delete-icon"])
-                                            })
-                                        }),
-                                        /*#__PURE__*/ jsx("span", {
-                                            className: classnames('byline-draggable-menu-label byline-draggable-menu-label-danger', draggable_context_menu_module.label, draggable_context_menu_module["label-danger"]),
-                                            children: "Remove"
-                                        })
-                                    ]
-                                })
-                            })
-                        })
-                    ]
-                })
-            })
-        ]
-    });
-}
-export { DraggableContextMenu };