@unofficialbox/box-open-elements 0.1.0

package/dist/patterns/content-explorer/content-explorer.js

@@ -0,0 +1,745 @@
+import { ContentExplorerController } from "./controller.js";
+import { resolveExplorerItemGesture, shouldActivateOnClick, shouldToggleOnEnter, } from "./types.js";
+import { formatItemMetaLine } from "./adapters/item-summary.js";
+import { defineBoxSearchResultsHeaderElement, } from "../search/search-results-header.js";
+import { BaseElement } from "../../core/index.js";
+import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
+import { boePanel, boeRadius } from "../../foundations/geometry/index.js";
+const DEFAULT_TAG_NAME = "box-content-explorer";
+const toKebabCase = (value) => value.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`);
+const escapeHtml = (value) => value
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+const toAttributeString = (attributes) => Object.entries(attributes)
+    .map(([name, value]) => `${name}="${escapeHtml(value)}"`)
+    .join(" ");
+const readPositiveNumber = (value) => {
+    if (!value) {
+        return undefined;
+    }
+    const parsed = Number.parseInt(value, 10);
+    return Number.isFinite(parsed) && parsed > 0 ? parsed : undefined;
+};
+const elementStyles = `
+        :host {
+          display: block;
+          color: inherit;
+          font: inherit;
+        }
+
+        section {
+          display: grid;
+          gap: ${boePanel.gap};
+          padding: ${boePanel.padding};
+          border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 82%, transparent);
+          border-radius: ${boePanel.radius};
+          background: var(--boe-token-surface-surface, #ffffff);
+          transition: opacity ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+        }
+
+        section[aria-busy="true"] {
+          opacity: 0.65;
+        }
+
+        [part="folder"] {
+          display: grid;
+          gap: 0.35rem;
+        }
+
+        [part="folder"] h2 {
+          margin: 0;
+          font-size: 1.1rem;
+          font-weight: 700;
+          line-height: 1.2;
+          color: var(--boe-token-text-text, #222222);
+        }
+
+        [part="folder"] p {
+          margin: 0;
+          font-size: 0.8rem;
+          color: var(--boe-token-text-text-secondary, #6f6f6f);
+        }
+
+        [part="breadcrumbs"] {
+          display: flex;
+          flex-wrap: wrap;
+          align-items: center;
+          gap: 0.2rem;
+        }
+
+        [part="breadcrumb"] {
+          appearance: none;
+          font: inherit;
+          font-size: 0.875rem;
+          padding: 0.25rem 0.55rem;
+          border: none;
+          border-radius: ${boeRadius.med};
+          background: transparent;
+          color: var(--boe-token-text-text-secondary, #6f6f6f);
+          cursor: pointer;
+          transition: background ${boeMotionDuration.interactive} ${boeMotionEasing.standard}, color ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+        }
+
+        [part="breadcrumb"]:hover {
+          background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 8%, transparent);
+          color: var(--boe-token-surface-surface-brand, #0061d5);
+        }
+
+        [part="breadcrumb"]:focus-visible {
+          outline: none;
+          box-shadow: 0 0 0 3px color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 18%, transparent);
+        }
+
+        [part="breadcrumb-separator"] {
+          color: color-mix(in srgb, var(--boe-token-text-text-secondary, #6f6f6f) 55%, transparent);
+          font-size: 0.875rem;
+        }
+
+        [part="status"] {
+          margin: 0;
+          font-size: 0.8rem;
+          font-weight: 700;
+          letter-spacing: 0.08em;
+          text-transform: uppercase;
+          color: var(--boe-token-text-text-secondary, #6f6f6f);
+        }
+
+        [part="error"] {
+          margin: 0;
+          padding: 0.55rem 0.7rem;
+          border-radius: ${boeRadius.large};
+          font-size: 0.9rem;
+          background: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 10%, var(--boe-token-surface-surface, #ffffff));
+          border: 1px solid color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 34%, transparent);
+          color: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 72%, black 28%);
+        }
+
+        [part="refresh"],
+        [part="load-more"],
+        [part="item-action"] {
+          appearance: none;
+          font: inherit;
+          font-size: 0.875rem;
+          font-weight: 600;
+          padding: 0.4rem 0.7rem;
+          border-radius: ${boeRadius.control};
+          border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8);
+          background: var(--boe-token-surface-surface, #ffffff);
+          color: var(--boe-token-text-text, #222222);
+          cursor: pointer;
+          transition: background ${boeMotionDuration.interactive} ${boeMotionEasing.standard}, border-color ${boeMotionDuration.interactive} ${boeMotionEasing.standard}, box-shadow ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+        }
+
+        [part="refresh"] {
+          justify-self: start;
+        }
+
+        [part="refresh"]:hover:not(:disabled),
+        [part="load-more"]:hover,
+        [part="item-action"]:hover {
+          background: var(--boe-token-surface-surface-hover, #f4f4f4);
+          border-color: var(--boe-token-stroke-stroke-hover, #bcbcbc);
+        }
+
+        [part="refresh"]:focus-visible,
+        [part="load-more"]:focus-visible,
+        [part="item-action"]:focus-visible {
+          outline: none;
+          box-shadow: 0 0 0 3px color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 18%, transparent);
+        }
+
+        [part="refresh"]:disabled {
+          cursor: not-allowed;
+          opacity: 0.55;
+        }
+
+        [part="items"] {
+          list-style: none;
+          margin: 0;
+          padding: 0;
+          display: grid;
+          border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 62%, transparent);
+          border-radius: ${boePanel.radius};
+          overflow: hidden;
+        }
+
+        [part="items"] > li {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: ${boePanel.gap};
+          padding: 0.15rem 0.45rem;
+          background: var(--boe-token-surface-surface, #ffffff);
+          transition: background ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+        }
+
+        [part="items"] > li + li {
+          border-top: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 46%, transparent);
+        }
+
+        [part="items"] > li:hover {
+          background: var(--boe-token-surface-surface-hover, #f4f4f4);
+        }
+
+        [part="items"] > li:has([part="item"][aria-selected="true"]) {
+          background: var(--boe-token-surface-item-surface-selected, #f2f7fd);
+        }
+
+        [part="item"] {
+          appearance: none;
+          font: inherit;
+          font-size: 0.95rem;
+          flex: 1;
+          display: grid;
+          gap: 0.15rem;
+          text-align: left;
+          padding: 0.45rem 0.45rem;
+          border: none;
+          border-radius: ${boeRadius.med};
+          background: transparent;
+          color: var(--boe-token-text-text, #222222);
+          cursor: pointer;
+          transition: color ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+        }
+
+        [part="item-name"] {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        [part="item-meta"] {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          font-size: 0.78rem;
+          font-weight: 400;
+          color: var(--boe-token-text-text-secondary, #6f6f6f);
+        }
+
+        [part="item"]:hover {
+          color: var(--boe-token-surface-surface-brand, #0061d5);
+        }
+
+        [part="item"]:focus-visible {
+          outline: none;
+          box-shadow: 0 0 0 3px color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 18%, transparent);
+        }
+
+        [part="item"][aria-selected="true"] {
+          font-weight: 600;
+          color: var(--boe-token-surface-surface-brand, #0061d5);
+        }
+
+        [part="item-actions"] {
+          display: flex;
+          gap: 0.4rem;
+        }
+
+        [part="item-action"] {
+          font-size: 0.8rem;
+          padding: 0.35rem 0.7rem;
+        }
+
+        [part="load-more-region"] {
+          display: flex;
+          justify-content: center;
+        }
+      `;
+export class BoxContentExplorerElement extends BaseElement {
+    static get observedAttributes() {
+        return ["item-gesture", "language", "page-size", "root-folder-id", "search-query", "selection-mode", "token"];
+    }
+    controller = null;
+    pendingStart = false;
+    focusItemId = null;
+    unsubscribeFns = [];
+    transportValue = null;
+    itemActionsValue = [];
+    templatesValue = {};
+    get language() {
+        return this.getAttribute("language");
+    }
+    set language(value) {
+        this.updateStringAttribute("language", value);
+    }
+    get pageSize() {
+        return readPositiveNumber(this.getAttribute("page-size"));
+    }
+    get selectionMode() {
+        const value = this.getAttribute("selection-mode");
+        return value === "single" || value === "multiple" ? value : null;
+    }
+    set selectionMode(value) {
+        this.updateStringAttribute("selection-mode", value);
+    }
+    get itemGesture() {
+        return resolveExplorerItemGesture(this.getAttribute("item-gesture"));
+    }
+    set itemGesture(value) {
+        this.setAttribute("item-gesture", value);
+    }
+    set pageSize(value) {
+        if (typeof value === "number" && value > 0) {
+            this.setAttribute("page-size", String(value));
+            return;
+        }
+        this.removeAttribute("page-size");
+    }
+    get rootFolderId() {
+        return this.getAttribute("root-folder-id");
+    }
+    set rootFolderId(value) {
+        this.updateStringAttribute("root-folder-id", value);
+    }
+    get token() {
+        return this.getAttribute("token");
+    }
+    set token(value) {
+        this.updateStringAttribute("token", value);
+    }
+    get transport() {
+        return this.transportValue;
+    }
+    set transport(value) {
+        this.transportValue = value;
+        this.scheduleStart();
+    }
+    get itemActions() {
+        return this.itemActionsValue;
+    }
+    set itemActions(value) {
+        this.itemActionsValue = value;
+        this.scheduleStart();
+    }
+    get templates() {
+        return this.templatesValue;
+    }
+    set templates(value) {
+        this.templatesValue = value;
+        if (this.isRendered) {
+            this.update();
+        }
+    }
+    get state() {
+        return this.controller?.getState() ?? null;
+    }
+    get searchQuery() {
+        return this.getAttribute("search-query");
+    }
+    set searchQuery(value) {
+        this.updateStringAttribute("search-query", value);
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        // Presentation-only attrs must not tear down the session.
+        if (name !== "item-gesture" && name !== "search-query") {
+            this.scheduleStart();
+        }
+        if (name === "search-query" && this.controller && oldValue !== newValue) {
+            const query = newValue?.trim() ?? "";
+            const current = this.controller.getState().view.searchQuery?.trim() ?? "";
+            const inFolder = this.controller.getState().view.mode === "folder";
+            if (query !== current && !(query === "" && inFolder)) {
+                void (query ? this.controller.search(query) : this.controller.clearSearch());
+            }
+        }
+        super.attributeChangedCallback(name, oldValue, newValue);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.scheduleStart();
+    }
+    disconnectedCallback() {
+        this.teardownController();
+    }
+    async loadNextPage() {
+        await this.controller?.loadNextPage();
+    }
+    async refresh() {
+        await this.controller?.refresh();
+    }
+    async activateItem(itemId) {
+        await this.controller?.activateItem(itemId);
+    }
+    async navigateTo(folderId) {
+        await this.controller?.navigateTo(folderId);
+    }
+    async search(query) {
+        await this.controller?.search(query);
+    }
+    async clearSearch() {
+        await this.controller?.clearSearch();
+    }
+    select(itemIds) {
+        this.controller?.select(itemIds);
+    }
+    toggleSelection(itemId) {
+        this.controller?.toggleSelection(itemId);
+    }
+    clearSelection() {
+        this.controller?.clearSelection();
+    }
+    invokeItemAction(itemId, actionId) {
+        this.controller?.invokeItemAction(itemId, actionId);
+    }
+    updateStringAttribute(name, value) {
+        if (value === null || value === "") {
+            this.removeAttribute(name);
+            return;
+        }
+        this.setAttribute(name, value);
+    }
+    scheduleStart() {
+        if (this.pendingStart) {
+            return;
+        }
+        this.pendingStart = true;
+        queueMicrotask(() => {
+            this.pendingStart = false;
+            void this.startController();
+        });
+    }
+    async startController() {
+        if (!this.isConnected) {
+            return;
+        }
+        const config = this.readConfig();
+        if (!config) {
+            this.teardownController();
+            if (this.isRendered) {
+                this.update();
+            }
+            return;
+        }
+        const initialSearchQuery = this.searchQuery?.trim() ?? "";
+        this.teardownController();
+        const controller = new ContentExplorerController(config);
+        this.controller = controller;
+        this.subscribeToController(controller);
+        if (this.isRendered) {
+            this.update();
+        }
+        await controller.connect();
+        if (this.controller === controller && initialSearchQuery) {
+            await controller.search(initialSearchQuery);
+        }
+    }
+    readConfig() {
+        if (!this.transportValue || !this.rootFolderId || !this.token) {
+            return null;
+        }
+        return {
+            language: this.language ?? undefined,
+            pageSize: this.pageSize,
+            rootFolderId: this.rootFolderId,
+            selectionMode: this.selectionMode ?? undefined,
+            token: this.token,
+            itemActions: this.itemActionsValue,
+            transport: this.transportValue,
+        };
+    }
+    subscribeToController(controller) {
+        const eventNames = [
+            "breadcrumbsChanged",
+            "connected",
+            "disconnected",
+            "folderChanged",
+            "folderLoaded",
+            "itemActivated",
+            "itemActionInvoked",
+            "itemsChanged",
+            "loadFailed",
+            "loadSucceeded",
+            "loadingChanged",
+            "paginationChanged",
+            "searchSucceeded",
+            "selectionChanged",
+            "viewChanged",
+        ];
+        this.unsubscribeFns = eventNames.map(eventName => controller.subscribe(eventName, payload => {
+            if (eventName === "viewChanged" || eventName === "searchSucceeded" || eventName === "loadSucceeded") {
+                const query = controller.getState().view.searchQuery;
+                if (query) {
+                    this.setAttribute("search-query", query);
+                }
+                else if (this.hasAttribute("search-query")) {
+                    this.removeAttribute("search-query");
+                }
+            }
+            this.dispatchEvent(new CustomEvent(toKebabCase(String(eventName)), {
+                bubbles: true,
+                composed: true,
+                detail: payload,
+            }));
+            if (this.isRendered) {
+                this.update();
+            }
+        }));
+    }
+    teardownController() {
+        for (const unsubscribe of this.unsubscribeFns) {
+            unsubscribe();
+        }
+        this.unsubscribeFns = [];
+        this.controller?.destroy();
+        this.controller = null;
+    }
+    getFocusableItemIds() {
+        return this.controller?.getState().items.map(item => item.id) ?? [];
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${elementStyles}</style>
+      <div part="content-host"></div>
+    `;
+    }
+    update() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        const state = this.controller?.getState();
+        const breadcrumbMarkup = state?.breadcrumbs.length
+            ? `<nav part="breadcrumbs" aria-label="Breadcrumbs">${state.breadcrumbs
+                .map(crumb => {
+                const buttonAttributes = toAttributeString({
+                    "aria-label": `Open ${crumb.name}`,
+                    "data-folder-id": crumb.id,
+                    part: "breadcrumb",
+                    type: "button",
+                });
+                return this.templatesValue.renderBreadcrumb
+                    ? this.templatesValue.renderBreadcrumb({
+                        buttonAttributes,
+                        element: this,
+                        id: crumb.id,
+                        name: crumb.name,
+                        state,
+                    })
+                    : `<button ${buttonAttributes}>${escapeHtml(crumb.name)}</button>`;
+            })
+                .join('<span part="breadcrumb-separator">/</span>')}</nav>`
+            : "";
+        const isSearch = state?.view.mode === "search";
+        const searchResultCount = state?.pagination.totalCount ?? state?.items.length ?? 0;
+        const searchScope = state?.currentFolder?.name ?? "";
+        const folderMarkup = isSearch
+            ? `<header part="folder" data-view="search">
+          ${breadcrumbMarkup}
+          <box-search-results-header
+            part="search-results-header"
+            label="Search results"
+            query="${escapeHtml(state.view.searchQuery ?? "")}"
+            result-count="${escapeHtml(String(searchResultCount))}"
+            scope="${escapeHtml(searchScope)}"
+            actions='[{"id":"clear-search","label":"Clear search"}]'
+          ></box-search-results-header>
+        </header>`
+            : state?.currentFolder
+                ? this.templatesValue.renderFolder
+                    ? this.templatesValue.renderFolder({
+                        breadcrumbsMarkup: breadcrumbMarkup,
+                        element: this,
+                        state,
+                    })
+                    : `<header part="folder">${breadcrumbMarkup}<h2>${escapeHtml(state.currentFolder.name)}</h2><p>${escapeHtml(state.currentFolder.id)}</p></header>`
+                : `<header part="folder"><h2>No folder loaded</h2></header>`;
+        const itemsMarkup = state?.items.length
+            ? state.items
+                .map(item => {
+                const isSelected = state.selectedItemIds.includes(item.id);
+                const focusTarget = this.focusItemId ?? state.items[0]?.id ?? "";
+                const meta = formatItemMetaLine(item);
+                const actions = (state.availableActionsByItemId[item.id] ?? [])
+                    .map(action => {
+                    const buttonAttributes = toAttributeString({
+                        "aria-label": `${action.label} ${item.name}`,
+                        "data-action-id": action.id,
+                        "data-item-id": item.id,
+                        part: "item-action",
+                        type: "button",
+                    });
+                    return this.templatesValue.renderItemAction
+                        ? this.templatesValue.renderItemAction({
+                            action,
+                            buttonAttributes,
+                            element: this,
+                            item,
+                            state,
+                        })
+                        : `<button ${buttonAttributes}>${escapeHtml(action.label)}</button>`;
+                })
+                    .join("");
+                const itemButtonAttributes = toAttributeString({
+                    "aria-label": item.name,
+                    "aria-selected": isSelected ? "true" : "false",
+                    "data-item-id": item.id,
+                    part: "item",
+                    role: "option",
+                    tabindex: item.id === focusTarget ? "0" : "-1",
+                    type: "button",
+                });
+                return this.templatesValue.renderItem
+                    ? this.templatesValue.renderItem({
+                        element: this,
+                        isSelected,
+                        item,
+                        itemActionsMarkup: actions ? `<div part="item-actions">${actions}</div>` : "",
+                        itemButtonAttributes,
+                        state,
+                    })
+                    : `<li data-item-id="${item.id}" role="presentation">
+                    <button ${itemButtonAttributes}><span part="item-name">${escapeHtml(item.name)}</span>${meta ? `<span part="item-meta">${escapeHtml(meta)}</span>` : ""}</button>
+                    ${actions ? `<div part="item-actions">${actions}</div>` : ""}
+                  </li>`;
+            })
+                .join("")
+            : `<li role="presentation">No items loaded</li>`;
+        const loadMoreMarkup = state?.pagination.hasMoreItems && !state.loading
+            ? `<button type="button" part="load-more">Load more</button>`
+            : "";
+        const refreshDisabled = state?.loading ? "disabled" : "";
+        const errorMarkup = state?.error ? `<p part="error">${escapeHtml(state.error.message)}</p>` : "";
+        const statusText = state
+            ? state.loading
+                ? "loading"
+                : "ready"
+            : "idle";
+        const host = this.shadowRoot.querySelector('[part="content-host"]');
+        if (!host) {
+            return;
+        }
+        host.innerHTML = `
+      <section aria-busy="${state?.loading ? "true" : "false"}">
+        ${folderMarkup}
+        <p part="status" data-status="${statusText}" role="status" aria-live="polite">${statusText}</p>
+        ${errorMarkup}
+        <button type="button" part="refresh" aria-label="Refresh items" ${refreshDisabled}>Refresh</button>
+        <ul part="items" role="listbox" aria-label="Explorer items">${itemsMarkup}</ul>
+        ${loadMoreMarkup ? `<div part="load-more-region">${loadMoreMarkup}</div>` : ""}
+      </section>
+    `;
+        this.shadowRoot.querySelector('[part="refresh"]')?.addEventListener("click", () => {
+            void this.refresh();
+        });
+        const searchHeader = this.shadowRoot.querySelector('[part="search-results-header"]');
+        searchHeader?.addEventListener("action", event => {
+            const actionId = event.detail?.action;
+            if (actionId === "clear-search") {
+                void this.clearSearch();
+            }
+        });
+        this.shadowRoot.querySelector('[part="load-more"]')?.addEventListener("click", () => {
+            void this.loadNextPage();
+        });
+        this.shadowRoot.querySelectorAll('[part="breadcrumb"]').forEach(node => {
+            node.addEventListener("click", event => {
+                const folderId = event.currentTarget.getAttribute("data-folder-id");
+                if (folderId) {
+                    void this.navigateTo(folderId);
+                }
+            });
+        });
+        this.shadowRoot.querySelectorAll('[part="item"]').forEach(node => {
+            node.addEventListener("click", event => {
+                if (event.detail > 1) {
+                    return;
+                }
+                const itemId = event.currentTarget.getAttribute("data-item-id");
+                if (itemId) {
+                    this.focusItemId = itemId;
+                    this.toggleSelection(itemId);
+                    if (shouldActivateOnClick(this.itemGesture)) {
+                        void this.activateItem(itemId);
+                    }
+                }
+            });
+            node.addEventListener("dblclick", event => {
+                const itemId = event.currentTarget.getAttribute("data-item-id");
+                if (itemId) {
+                    this.focusItemId = itemId;
+                    void this.activateItem(itemId);
+                }
+            });
+            node.addEventListener("keydown", event => {
+                const keyboardEvent = event;
+                const itemId = event.currentTarget.getAttribute("data-item-id") ?? "";
+                const itemIds = this.getFocusableItemIds();
+                const currentIndex = itemIds.indexOf(itemId);
+                let nextIndex = currentIndex;
+                if (keyboardEvent.key === "ArrowDown") {
+                    nextIndex = Math.min(itemIds.length - 1, currentIndex + 1);
+                }
+                else if (keyboardEvent.key === "ArrowUp") {
+                    nextIndex = Math.max(0, currentIndex - 1);
+                }
+                else if (keyboardEvent.key === "Home") {
+                    nextIndex = 0;
+                }
+                else if (keyboardEvent.key === "End") {
+                    nextIndex = itemIds.length - 1;
+                }
+                else if (keyboardEvent.key === " ") {
+                    keyboardEvent.preventDefault();
+                    this.focusItemId = itemId;
+                    this.toggleSelection(itemId);
+                    if (shouldActivateOnClick(this.itemGesture)) {
+                        void this.activateItem(itemId);
+                    }
+                    return;
+                }
+                else if (keyboardEvent.key === "Enter") {
+                    keyboardEvent.preventDefault();
+                    this.focusItemId = itemId;
+                    if (shouldToggleOnEnter(this.itemGesture)) {
+                        this.toggleSelection(itemId);
+                    }
+                    void this.activateItem(itemId);
+                    return;
+                }
+                else {
+                    return;
+                }
+                keyboardEvent.preventDefault();
+                const nextItemId = itemIds[nextIndex];
+                if (nextItemId) {
+                    this.focusItemId = nextItemId;
+                    if (this.isRendered) {
+                        this.update();
+                    }
+                }
+            });
+        });
+        this.shadowRoot.querySelectorAll('[part="item-action"]').forEach(node => {
+            node.addEventListener("click", event => {
+                event.stopPropagation();
+                const currentTarget = event.currentTarget;
+                const itemId = currentTarget.getAttribute("data-item-id");
+                const actionId = currentTarget.getAttribute("data-action-id");
+                if (itemId && actionId) {
+                    this.invokeItemAction(itemId, actionId);
+                }
+            });
+        });
+        if (this.focusItemId) {
+            queueMicrotask(() => {
+                const target = Array.from(this.shadowRoot?.querySelectorAll('[part="item"]') ?? []).find(node => node.dataset.itemId === this.focusItemId);
+                target?.focus();
+            });
+        }
+    }
+}
+export const defineBoxContentExplorerElement = (tagName = DEFAULT_TAG_NAME) => {
+    defineBoxSearchResultsHeaderElement();
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxContentExplorerElement);
+    return BoxContentExplorerElement;
+};