@nascentdigital/funnel-editor 5.0.1 → 5.0.2

package/dist/core/hooks/useCollections.js

@@ -17,6 +17,10 @@ function usePossibleCollections() {
         if (!collections) {
             return;
         }
+        // sync if it's not ready
+        else if (collections.state === 'uninitialized') {
+            collections.sync().catch(console.error);
+        }
         // subscribe to changes
         const subscription = collections.events$.subscribe(() => touch());
         // unsubscribe on unmount

package/dist/core/hooks/usePageRepository.d.ts

@@ -1,3 +1,3 @@
 import { IPageRepository } from '../repository';
-export declare function usePageRepository(): IPageRepository;
+export declare function usePageRepository<TRepository extends IPageRepository = IPageRepository>(): TRepository;
 export declare const PageRepositoryContext: import("react").Context<IPageRepository>;

package/dist/core/hooks/useSite.js

@@ -17,6 +17,10 @@ function usePossibleSite() {
         if (!site) {
             return;
         }
+        // sync if it's not ready
+        else if (site.state === 'uninitialized') {
+            site.sync().catch(console.error);
+        }
         // subscribe to changes
         const subscription = site.events$.subscribe(() => touch());
         // unsubscribe on unmount

package/dist/core/repository/CollectionRepository.d.ts

@@ -1,7 +1,7 @@
 import { Schema } from '@nascentdigital/funnel-core';
 import { UpdateCollectionCommand } from '../../api/collections';
 import { EditorApiClient } from '../client';
-import { Collection, CollectionFieldProxy } from '../domain';
+import { Collection, CollectionFieldProxy, ICollection } from '../domain';
 import { CollectionTarget } from './CollectionTarget';
 import { ICollectionRepository } from './ICollectionRepository';
 export declare class CollectionRepository implements ICollectionRepository {
@@ -26,5 +26,5 @@ export declare class CollectionRepository implements ICollectionRepository {
     getItems(args: ICollectionRepository.GetItems.Args): Promise<ICollectionRepository.GetItems.Result>;
     get(args: ICollectionRepository.Get.Args): Promise<ICollectionRepository.Get.Result>;
     update(args: ICollectionRepository.Update.Args): Promise<ICollectionRepository.Update.Result>;
-    serializeUpdate(collection: Collection | CollectionFieldProxy, savables: ICollectionRepository.Savable[]): UpdateCollectionCommand.Data;
+    serializeUpdate(collection: Collection | CollectionFieldProxy, savables: ICollection.Savable[]): UpdateCollectionCommand.Data;
 }

package/dist/core/repository/ICollectionRepository.d.ts

@@ -1,5 +1,5 @@
 import { CollectionClient } from '@nascentdigital/funnel-cms';
-import { EventBus, FieldModel, Schema } from '@nascentdigital/funnel-core';
+import { EventBus, Schema } from '@nascentdigital/funnel-core';
 import { CollectionFieldProxy, ICollection } from '../domain';
 export interface ICollectionRepository {
     create(args: ICollectionRepository.Create.Args): Promise<ICollectionRepository.Create.Result>;
@@ -11,10 +11,9 @@ export interface ICollectionRepository {
     getItems(args: ICollectionRepository.GetItems.Args): Promise<ICollectionRepository.GetItems.Result>;
     get(args: ICollectionRepository.Get.Args): Promise<ICollectionRepository.Get.Result>;
     update(args: ICollectionRepository.Update.Args): Promise<ICollectionRepository.Update.Result>;
-    serializeUpdate(collection: ICollection | CollectionFieldProxy, savables: ICollectionRepository.Savable[]): ICollectionRepository.SerializeUpdates.Result;
+    serializeUpdate(collection: ICollection | CollectionFieldProxy, savables: ICollection.Savable[]): ICollectionRepository.SerializeUpdates.Result;
 }
 export declare namespace ICollectionRepository {
-    type Savable = FieldModel;
     namespace Create {
         type Args = Omit<CollectionClient.Create.NewArgs, 'brand' | 'type' | 'version'> & {
             template: Schema.Collection;

package/dist/core/repository/SerializeCollectionUpdate.d.ts

@@ -1,8 +1,8 @@
 import { Field, FieldList, FieldModel, ObjectField, Schema } from '@nascentdigital/funnel-core';
-import { ICollectionRepository } from './ICollectionRepository';
+import { ICollection } from '../domain';
 export declare namespace SerializeCollectionUpdate {
-    function serializeFieldsUpdate(updates: Schema.Collection.Update[], fields: ReadonlyArray<FieldModel>, parentPath: ReadonlyArray<string>, savables: ICollectionRepository.Savable[]): Schema.Collection.Update[];
-    function serializeObjectFieldUpdate(updates: Schema.Collection.Update[], field: ObjectField, parentPath: ReadonlyArray<string>, savables: ICollectionRepository.Savable[]): void;
-    function serializeFieldUpdate(updates: Schema.Collection.Update[], field: Field, parentPath: ReadonlyArray<string>, savables: ICollectionRepository.Savable[]): void;
-    function serializeListUpdate(updates: Schema.Collection.Update[], list: FieldList, parentPath: ReadonlyArray<string>, savables: ICollectionRepository.Savable[]): void;
+    function serializeFieldsUpdate(updates: Schema.Collection.Update[], fields: ReadonlyArray<FieldModel>, parentPath: ReadonlyArray<string>, savables: ICollection.Savable[]): Schema.Collection.Update[];
+    function serializeObjectFieldUpdate(updates: Schema.Collection.Update[], field: ObjectField, parentPath: ReadonlyArray<string>, savables: ICollection.Savable[]): void;
+    function serializeFieldUpdate(updates: Schema.Collection.Update[], field: Field, parentPath: ReadonlyArray<string>, savables: ICollection.Savable[]): void;
+    function serializeListUpdate(updates: Schema.Collection.Update[], list: FieldList, parentPath: ReadonlyArray<string>, savables: ICollection.Savable[]): void;
 }

package/dist/core/repository/SerializePageUpdate.d.ts

@@ -1,11 +1,10 @@
 import { Field, FieldList, FieldModel, ObjectField, Schema } from '@nascentdigital/funnel-core';
-import type { Block, Section } from '../domain';
+import { Block, IPage, Section } from '../domain';
 export declare namespace SerializePageUpdate {
-    type Savable = Section | Block | FieldModel;
-    function serializeSectionUpdate(updates: Schema.Page.Update[], section: Section, parentPath: string, savables: Savable[]): void;
-    function serializeBlockUpdate(updates: Schema.Page.Update[], block: Block, parentPath: string, savables: Savable[]): void;
-    function serializeFieldsUpdate(updates: Schema.Page.Update[], fields: ReadonlyArray<FieldModel>, parentPath: ReadonlyArray<string>, savables: Savable[]): Schema.Page.Update[];
-    function serializeObjectFieldUpdate(updates: Schema.Page.Update[], field: ObjectField, parentPath: ReadonlyArray<string>, savables: Savable[]): void;
-    function serializeFieldUpdate(updates: Schema.Page.Update[], field: Field, parentPath: ReadonlyArray<string>, savables: Savable[]): void;
-    function serializeListUpdate(updates: Schema.Page.Update[], list: FieldList, parentPath: ReadonlyArray<string>, savables: Savable[]): void;
+    function serializeSectionUpdate(updates: Schema.Page.Update[], section: Section, parentPath: string, savables: IPage.Savable[]): void;
+    function serializeBlockUpdate(updates: Schema.Page.Update[], block: Block, parentPath: string, savables: IPage.Savable[]): void;
+    function serializeFieldsUpdate(updates: Schema.Page.Update[], fields: ReadonlyArray<FieldModel>, parentPath: ReadonlyArray<string>, savables: IPage.Savable[]): Schema.Page.Update[];
+    function serializeObjectFieldUpdate(updates: Schema.Page.Update[], field: ObjectField, parentPath: ReadonlyArray<string>, savables: IPage.Savable[]): void;
+    function serializeFieldUpdate(updates: Schema.Page.Update[], field: Field, parentPath: ReadonlyArray<string>, savables: IPage.Savable[]): void;
+    function serializeListUpdate(updates: Schema.Page.Update[], list: FieldList, parentPath: ReadonlyArray<string>, savables: IPage.Savable[]): void;
 }

package/dist/core/splash/SplashContainer.d.ts

@@ -1,5 +1,7 @@
 import { PropsWithChildren } from 'react';
-export declare function SplashContainer({ children }: SplashContainer.Props): import("react/jsx-runtime").JSX.Element;
+export declare function SplashContainer({ message, children }: SplashContainer.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace SplashContainer {
-    type Props = PropsWithChildren;
+    type Props = PropsWithChildren & {
+        message?: string;
+    };
 }

package/dist/core/splash/SplashContainer.js

@@ -8,16 +8,16 @@ const Splash_1 = require("./Splash");
 const SplashContext_1 = require("./SplashContext");
 const SplashService_1 = require("./SplashService");
 // component
-function SplashContainer({ children }) {
+function SplashContainer({ message = 'Signing you in', children }) {
     // bind hooks + memo
     const service = (0, react_2.useMemo)(() => {
         // create service
         const service = new SplashService_1.SplashService();
         // start in a loading state
-        service.showLoading(`Signing you in`);
+        service.showLoading(message);
         // return service
         return service;
-    }, []);
+    }, [message]);
     const [context, setContext] = (0, react_2.useState)(() => ({ service }));
     // update context on event changes
     (0, react_2.useEffect)(() => {

package/dist/styles/index.css

@@ -501,10 +501,10 @@ video {
 }
 
 [popover]{
-    inset: var(--toolwind-toggle-IyQVWbKn7P, 0px);
-    background-color: var(--toolwind-toggle-Cc5fWPeHR5, canvas);
-    color: var(--toolwind-toggle-hEv1MMrg0B, canvastext);
-    margin: var(--toolwind-toggle-ZXuFruRg3i, auto);
+    inset: var(--toolwind-toggle-oQHJpc9jXV, 0px);
+    background-color: var(--toolwind-toggle-GCBdFMAuDL, canvas);
+    color: var(--toolwind-toggle-I8FwR2AIO0, canvastext);
+    margin: var(--toolwind-toggle-irGpFytKLG, auto);
 }
     html, body, #__next, .Editor-wrap{
     position: relative;
@@ -5996,10 +5996,10 @@ img.nd-Visual-image {
 .anchored\/\[--nd-popup-anchor\]:where(.anchored\/\[--nd-popup-anchor\]){
     position: absolute;
     view-transition-name: --tw-anchor-view-transition-2j1919322s193433343934192p322r2w33362l;
-    --toolwind-toggle-IyQVWbKn7P: auto;
-    --toolwind-toggle-Cc5fWPeHR5: transparent;
-    --toolwind-toggle-hEv1MMrg0B: inherit;
-    --toolwind-toggle-ZXuFruRg3i: 0px;
+    --toolwind-toggle-oQHJpc9jXV: auto;
+    --toolwind-toggle-GCBdFMAuDL: transparent;
+    --toolwind-toggle-I8FwR2AIO0: inherit;
+    --toolwind-toggle-irGpFytKLG: 0px;
 }
 .counter-l1{
     counter-reset: l1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nascentdigital/funnel-editor",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "restricted"
@@ -91,5 +91,5 @@
     "ts-jest": "^29",
     "type-fest": "^4"
   },
-  "gitHead": "6ac66e04e5d6d10b959826b84cf3827422ddf47b"
+  "gitHead": "24d9690cf813052f6561c3ccef11c7cf69ad7f7c"
 }

package/dist/core/components/fields/media/MediaPicker.d.ts

@@ -1,15 +0,0 @@
-import { Language, Schema } from '@nascentdigital/funnel-core';
-import { ICollection } from '../../../domain';
-export declare const MediaPicker: import("react").ForwardRefExoticComponent<MediaPicker.Props & import("react").RefAttributes<MediaPicker.Ref>>;
-export declare namespace MediaPicker {
-    type Props = {
-        language: Language;
-    };
-    interface Ref {
-        pick(options?: Options): Promise<Result>;
-    }
-    type Options = {
-        schema: Schema.CollectionField;
-    };
-    type Result = ICollection.Ref | undefined;
-}

package/dist/core/components/fields/media/MediaPicker.js

@@ -1,251 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MediaPicker = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const funnel_core_1 = require("@nascentdigital/funnel-core");
-const classnames_1 = __importDefault(require("classnames"));
-const framer_motion_1 = require("framer-motion");
-const react_1 = require("react");
-const hooks_1 = require("../../../hooks");
-const feedback_1 = require("../../feedback");
-const interaction_1 = require("../../interaction");
-const transitions_1 = require("../../transitions");
-// component
-exports.MediaPicker = (0, react_1.forwardRef)(function MediaPicker({ language }, ref) {
-    // bind props + hooks
-    const [deferral, setDeferral] = (0, react_1.useState)(undefined);
-    const [result, setResult] = (0, react_1.useState)();
-    const [schema, setSchema] = (0, react_1.useState)();
-    const [collectionGroups, setCollectionGroups] = (0, react_1.useState)();
-    const [collectionGroup, setCollectionGroup] = (0, react_1.useState)();
-    const [collections, setCollections] = (0, react_1.useState)();
-    const [tagOptions, setTagOptions] = (0, react_1.useState)();
-    const [tagFilters, setTagFilters] = (0, react_1.useState)([]);
-    const [tagTooltip, setTagTooltip] = (0, react_1.useState)();
-    const [fetching, setFetching] = (0, react_1.useState)(false);
-    const [error, setError] = (0, react_1.useState)();
-    const repo = (0, hooks_1.useCollectionRepository)();
-    const siteCollections = (0, hooks_1.useCollections)();
-    const collectionStore = (0, hooks_1.useCollectionStore)();
-    // export service
-    (0, react_1.useImperativeHandle)(ref, () => ({
-        pick: async ({ schema }) => {
-            // reset state
-            setSchema(schema);
-            setCollectionGroups(undefined);
-            setCollectionGroup(undefined);
-            setTagOptions(undefined);
-            setTagFilters([]);
-            setTagTooltip(undefined);
-            setCollections(undefined);
-            setError(undefined);
-            // create deferral
-            const deferral = new funnel_core_1.Deferral();
-            setDeferral(deferral);
-            setResult(undefined);
-            // wait until deferral is resolved
-            return deferral.promise;
-        }
-    }), []);
-    // fetch collection groups when schema changes
-    (0, react_1.useEffect)(() => {
-        // skip if there's no deferral
-        if (!schema || !deferral) {
-            return;
-        }
-        // reset error (if any)
-        setError(undefined);
-        // sync site
-        siteCollections.sync()
-            // bind groups, filtering out types that aren't part of the set
-            .then(() => {
-            // determine group list
-            const { collections } = schema;
-            const collectionGroups = collections.length === 0
-                ? siteCollections.items
-                : siteCollections.items
-                    .filter(group => collections.some(collection => collection.type === group.type));
-            setCollectionGroups(collectionGroups);
-            // bind first group as in initial selection
-            const [collectionGroup] = collectionGroups;
-            setCollectionGroup(collectionGroup);
-            // short-circuit collections if none are present
-            if (!collectionGroup) {
-                setCollections([]);
-                setTagOptions([]);
-                setTagFilters([]);
-            }
-        })
-            // handle error
-            .catch(e => {
-            console.error('[MediaPicker/sync] sync failed', e);
-            setError(feedback_1.ErrorMessage.coerce(e));
-        });
-    }, [siteCollections, deferral, schema]);
-    // fetch collection items when group changes
-    (0, react_1.useEffect)(() => {
-        // ignore if not ready
-        if (!collectionGroup) {
-            return;
-        }
-        console.debug('[MediaPicker/sync] syncing group', collectionGroup);
-        // clear collections
-        setCollections(undefined);
-        setTagOptions(undefined);
-        setTagFilters([]);
-        // sync group
-        collectionGroup.sync()
-            // then update filters
-            .then(() => {
-            // transform items
-            const collections = collectionGroup.items
-                .map(summary => summary.getClosestCollectionRef(language, collectionGroup.defaultLanguage))
-                .filter(funnel_core_1.Value.isDefined);
-            // set collections
-            setCollections(collections);
-            // setup tags (if there are items in group)
-            if (collections.length > 0) {
-                const { tags: tagGroups } = collectionGroup.template;
-                const tagOptions = tagGroups
-                    .map(tagGroup => {
-                    // get all tags in group
-                    const tags = Object.values(tagGroup.tags).reduce((tags, tag) => {
-                        // add tag if it matches
-                        if (collections.some(collection => collection.tags.includes(tag))) {
-                            tags.add(tag);
-                        }
-                        // keep reducing
-                        return tags;
-                    }, new Set());
-                    // create filter group (if there are items)
-                    return tags.size > 0
-                        ? { group: tagGroup, tags }
-                        : undefined;
-                })
-                    .filter(funnel_core_1.Value.isDefined);
-                // set options
-                setTagOptions(tagOptions);
-            }
-            // or clear tags
-            else {
-                setTagOptions([]);
-            }
-        })
-            // or capture error
-            .catch(e => setError(feedback_1.ErrorMessage.coerce(e)));
-    }, [language, collectionGroup]);
-    // helpers
-    const onPick = async (collectionRef) => {
-        // clear tooltips
-        setTagTooltip(undefined);
-        // fetch ref (or fail)
-        const { template, id, name } = collectionRef;
-        const collection = await repo.get({ id, version: 'draft' });
-        if (!collection) {
-            setFetching(false);
-            setError({
-                title: `Unable to find ${template.name}`,
-                message: `We ran into an issue while trying to fetch the "${name}" collection item.  Please refresh your browser and try again.`
-            });
-            return;
-        }
-        // add collection
-        collectionStore.addCollection(collection.data);
-        // set result (triggers picker to close)
-        setResult(collectionRef);
-    };
-    const onCancel = () => {
-        // clear tooltips
-        setTagTooltip(undefined);
-        // set result (triggers picker to close)
-        setResult(null);
-    };
-    const onPickerClosed = () => {
-        // skip if missing or already completed
-        if (!deferral || deferral.isComplete) {
-            return;
-        }
-        // complete deferral
-        deferral.resolve(result !== null && result !== void 0 ? result : undefined);
-    };
-    // render
-    return ((0, jsx_runtime_1.jsxs)(interaction_1.Picker, { className: "flex", open: deferral && result === undefined, disableDismiss: fetching, onClose: onCancel, onClosed: onPickerClosed, children: [(0, jsx_runtime_1.jsxs)("section", { className: "shrink-0 w-[206px] flex flex-col gap-l8 p-l8 bg-modal-background", children: [(0, jsx_runtime_1.jsx)("h1", { className: "heading-md text-content-primary", children: "Select Collection" }), (0, jsx_runtime_1.jsx)(interaction_1.ChipFilters, { title: "Site Collections", options: collectionGroups, selectedOptions: collectionGroup && [collectionGroup], onToggle: (collectionGroup, selected) => selected && setCollectionGroup(collectionGroup), renderLabel: collectionGroup => collectionGroup.template.name, disabled: fetching })] }), (0, jsx_runtime_1.jsxs)("section", { className: "flex-1 flex flex-col", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 p-l8 overflow-y-scroll", tabIndex: -1, children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { mode: "wait", initial: false, children: renderPicker({ language, error, collectionGroups, collectionGroup, collections, tagOptions, tagFilters, onPick, setTagTooltip, fetching }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex justify-end items-center p-l8 border-t border-solid border-border-l1", children: (0, jsx_runtime_1.jsx)(interaction_1.Button, { variant: "secondary", size: "sm", onClick: onCancel, disabled: fetching, children: "Cancel" }) }), (0, jsx_runtime_1.jsx)(interaction_1.Popup, { className: (0, classnames_1.default)('max-w-[200px] bg-surface2 rounded-md p-l5', 'border border-solid border-border-l1 shadow-tooltip', 'flex flex-wrap items-center gap-l4'), open: !!tagTooltip, anchor: tagTooltip === null || tagTooltip === void 0 ? void 0 : tagTooltip.anchor, anchorOffset: 4, placement: "top", disableOverlay: true, onClose: () => setTagTooltip(undefined), children: tagTooltip === null || tagTooltip === void 0 ? void 0 : tagTooltip.tags.map(tag => (0, jsx_runtime_1.jsx)(feedback_1.Badge, { variant: "outlinedTiny", status: "draft", label: tag.name }, tag.data)) })] })] }));
-});
-function renderPicker({ language, schema, error, collectionGroups, collectionGroup, collections, tagOptions, tagFilters, onPick, setTagTooltip, fetching }) {
-    // show error if we have one
-    if (error) {
-        return ((0, jsx_runtime_1.jsx)(transitions_1.FadeIn, { className: "flex flex-col justify-center items-center", children: (0, jsx_runtime_1.jsx)(feedback_1.ErrorMessage, { error: error }) }, "error"));
-    }
-    // or show loader if filters aren't loaded (or if fetching)
-    else if (fetching || !collectionGroups || !collections || !tagOptions) {
-        return ((0, jsx_runtime_1.jsx)(transitions_1.FadeIn, { className: "w-full h-full flex flex-col justify-center items-center", children: (0, jsx_runtime_1.jsx)(interaction_1.Loader, { size: "lg" }) }, "loader"));
-    }
-    // show empty state if there are no pages
-    else if (!collectionGroup || collections.length === 0) {
-        return ((0, jsx_runtime_1.jsx)(transitions_1.FadeIn, { className: "h-full flex flex-wrap justify-center items-center", children: (0, jsx_runtime_1.jsxs)(feedback_1.EmptyState, { variant: "missing", size: "sm", children: [(0, jsx_runtime_1.jsx)("p", { className: "body-md text-content-secondary text-pretty", children: "There are no collections available that match your criteria." }), (0, jsx_runtime_1.jsx)("p", { className: "body-md text-content-secondary text-pretty", children: "Create a new collection." })] }) }, "pages.empty"));
-    }
-    // or show pages (filtered)
-    else {
-        // get tags that are available (no tags at all means "all" of the group is chosen)
-        const collectionSchema = collectionGroup.template;
-        const schemaTags = collectionSchema.tags.flatMap(tagGroup => Object.values(tagGroup.tags));
-        const activeTagFilters = tagFilters.filter(tag => schemaTags.includes(tag));
-        const tags = tagOptions
-            .filter(({ group }) => collectionSchema.tags.includes(group))
-            .flatMap(({ tags }) => {
-            const filteredTags = activeTagFilters.filter(tag => tags.has(tag));
-            return filteredTags.length > 0 ? filteredTags : tags.values().toArray();
-        });
-        const filteredCollections = activeTagFilters.length > 0
-            ? collections.filter(collection => collection.tags.some(tag => tags.includes(tag)))
-            : collections;
-        // render empty list if there are no items
-        if (filteredCollections.length === 0) {
-            return ((0, jsx_runtime_1.jsx)(transitions_1.FadeIn, { className: "h-full flex flex-col items-center justify-center gap-l5 px-l10", variant: "blur", children: (0, jsx_runtime_1.jsx)("p", { className: "body-md text-content-secondary text-pretty", children: "Sorry, but no collections match your filters." }) }, "pages.dyanmic.empty"));
-        }
-        // or render items
-        else {
-            return ((0, jsx_runtime_1.jsx)(transitions_1.FadeIn, { className: "flex flex-col gap-l3", children: filteredCollections.map(ref => renderCollectionRef({
-                    language,
-                    template: ref.template,
-                    ref,
-                    onPick,
-                    setTagTooltip
-                })) }, "pages.dynamic"));
-        }
-    }
-}
-function renderCollectionRef({ language, template, ref, onPick, setTagTooltip }) {
-    var _a;
-    // resolve props
-    const title = (_a = ref.name) !== null && _a !== void 0 ? _a : template.name;
-    const tags = ref ? ref.tags : [];
-    const visibleTags = tags.slice(0, Math.min(tags.length, 2));
-    const tooltipTags = tags.length > 2
-        ? tags.slice(2)
-        : [];
-    const disabled = ref.language !== language;
-    // helpers
-    const onClick = () => {
-        // ignore if disabled
-        if (disabled) {
-            return;
-        }
-        // otherwise, pick
-        else {
-            onPick(ref);
-        }
-    };
-    // render
-    const anchorId = `col-pick-tip-${ref.id}`;
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('flex items-center px-l7 py-l4 select-none interpolate', 'even:bg-modal-background rounded-md', {
-            'hover:bg-modal-surface2/tint2 cursor-pointer': !disabled,
-            'cursor-default': disabled
-        }), onClick: onClick, tabIndex: disabled ? undefined : 0, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('w-full flex items-center gap-l8 select-none interpolate', {
-                'opacity-disabled': disabled
-            }), onClick: onClick, children: [(0, jsx_runtime_1.jsx)("h3", { className: "flex-1 label-sm text-content-primary ellipsis", children: title }), tags.length > 0 &&
-                    (0, jsx_runtime_1.jsxs)("div", { className: "shrink-0 flex items-center gap-l4", children: [visibleTags.map(tag => (0, jsx_runtime_1.jsx)(feedback_1.Badge, { variant: "outlinedTiny", status: "draft", label: tag.name }, tag.data)), tooltipTags.length > 0 && ((0, jsx_runtime_1.jsx)(feedback_1.Badge, { anchorId: anchorId, variant: "outlinedTiny", status: "draft", label: `+${tooltipTags.length}`, onPointerEnter: e => setTagTooltip({ anchor: anchorId, tags: tooltipTags }), onPointerLeave: () => setTagTooltip(undefined) }))] })] }) }, ref.id));
-}