composite-select 1.0.0

package/composition/selected-section/SelectedSectionManager.js

@@ -0,0 +1,336 @@
+import createSubscriber from "../createSubscriber.js";
+export class SelectedSectionManager {
+    propParentElement;
+    propContainer;
+    propFlexList;
+    propButtonsContainer;
+    propOptions;
+    propInputElement = null;
+    propClearButton;
+    propLoaderElement = null;
+    propLabelElement = null;
+    _skipNextFocusEvent = false;
+    _subscriber = createSubscriber();
+    constructor(parentElement, options = {}) {
+        this.propParentElement = parentElement;
+        const { selected = [], showInput = true, value = "", renderItem = (item, def) => def(item), renderList = (selected, def) => def(selected), onDelete = (id) => { }, onClear = () => { }, onInputChange = (e, previousValue) => { }, onChange = (selected) => { }, onComponentChange = (s, reason) => { }, disabled = false, error = false, loading = false, renderEmpty = (def) => def(), label = "", showDelete = true, ...rest } = options;
+        this.propOptions = {
+            selected,
+            showInput,
+            value,
+            renderItem,
+            renderList,
+            onDelete,
+            onClear,
+            onInputChange,
+            onChange,
+            onComponentChange,
+            disabled,
+            error,
+            loading,
+            renderEmpty,
+            label,
+            showDelete,
+            ...rest,
+        };
+        this.render();
+        Promise.resolve().then(() => {
+            this._bindEvents();
+        });
+    }
+    getSubscriber() {
+        return this._subscriber;
+    }
+    _bindEvents() {
+        this.propParentElement.addEventListener("click", (e) => {
+            const target = e.target;
+            // Handle Clear Button
+            const clearBtn = target.closest(".clear-btn");
+            if (clearBtn && this.propParentElement.contains(clearBtn)) {
+                e.preventDefault();
+                this.clearSearch();
+                return;
+            }
+            // Handle Delete Item
+            const delBtn = target.closest("[data-remove]");
+            if (delBtn && this.propParentElement.contains(delBtn)) {
+                e.preventDefault();
+                const id = delBtn.getAttribute("data-remove");
+                if (this.propOptions.onDelete) {
+                    this.propOptions.onDelete.call(this, id);
+                }
+                this._subscriber.trigger("onDelete", id);
+                return;
+            }
+        });
+        this.propParentElement.addEventListener("input", (e) => {
+            const target = e.target;
+            if (target === this.propInputElement) {
+                const previousValue = this.propOptions.value;
+                this.propOptions.value = this.propInputElement.value;
+                if (this.propOptions.onInputChange) {
+                    this.propOptions.onInputChange.call(this, e, previousValue);
+                }
+                this._subscriber.trigger("onInputChange", e, previousValue);
+            }
+        });
+        this.propParentElement.addEventListener("focusin", (e) => {
+            const target = e.target;
+            if (target === this.propInputElement) {
+                if (this._skipNextFocusEvent) {
+                    this._skipNextFocusEvent = false;
+                    return;
+                }
+                if (this.propOptions.onFocus) {
+                    this.propOptions.onFocus.call(this, e);
+                }
+                this._subscriber.trigger("onFocus", e);
+            }
+        });
+        this.propParentElement.addEventListener("keydown", (e) => {
+            const target = e.target;
+            if (target === this.propInputElement) {
+                const isBackspaceOnEmpty = e.key === "Backspace" && this.propInputElement.value === "";
+                const isEnter = e.key === "Enter";
+                if (isEnter || isBackspaceOnEmpty) {
+                    const previousValue = this.propOptions.value;
+                    if (this.propOptions.onInputChange) {
+                        this.propOptions.onInputChange.call(this, e, previousValue);
+                    }
+                    this._subscriber.trigger("onInputChange", e, previousValue);
+                }
+            }
+        });
+    }
+    _triggerOnComponentChange(reason) {
+        if (this.propOptions.onComponentChange) {
+            this.propOptions.onComponentChange.call(this, this.propOptions, reason);
+        }
+        this._subscriber.trigger("onComponentChange", this.propOptions, reason);
+    }
+    _updateDeleteDisplay() {
+        if (this.propContainer) {
+            this.propContainer.classList.toggle("hide-delete", this.propOptions.showDelete === false);
+        }
+    }
+    _defaultRenderList(selected) {
+        return selected.map((item) => this.propOptions.renderItem(item, this._defaultRenderItem.bind(this)));
+    }
+    _defaultRenderItem(item) {
+        const el = document.createElement("div");
+        el.className = "element";
+        el.dataset.id = String(item.id);
+        const label = document.createElement("label");
+        label.textContent = item.label;
+        const del = document.createElement("div");
+        del.dataset.remove = String(item.id);
+        el.appendChild(label);
+        el.appendChild(del);
+        return el;
+    }
+    setSelected(list, triggerOnChange = true) {
+        this.propOptions.selected = list.map((s) => {
+            s.selected = true;
+            return s;
+        });
+        this.render();
+        if (triggerOnChange) {
+            if (this.propOptions.onChange) {
+                this.propOptions.onChange.call(this, this.getSelected());
+            }
+            this._subscriber.trigger("onChange", this.getSelected());
+        }
+        this._triggerOnComponentChange("setSelected");
+    }
+    setShowInput(show) {
+        this.propOptions.showInput = show = String(show) === "true" || show === true;
+        this.propInputElement.style.display = show ? "" : "none";
+        this.propInputElement.disabled = Boolean(this.propOptions.disabled);
+        this._triggerOnComponentChange("setShowInput");
+    }
+    setValue(value, triggerOnChange = true) {
+        const previousValue = this.propOptions.value;
+        this.propOptions.value = value;
+        this.propInputElement.value = value;
+        if (triggerOnChange) {
+            const e = new Event("input");
+            Object.defineProperty(e, "target", { writable: false, value: this.propInputElement });
+            if (this.propOptions.onInputChange) {
+                this.propOptions.onInputChange.call(this, e, previousValue);
+            }
+            this._subscriber.trigger("onInputChange", e, previousValue);
+        }
+        this._triggerOnComponentChange("setValue");
+    }
+    setFocus(triggerOnFocus = true) {
+        if (!triggerOnFocus) {
+            this._skipNextFocusEvent = true;
+        }
+        this.propInputElement.focus();
+    }
+    clearSearch(triggerOnClear = true, triggerOnChange = true) {
+        this.setValue("", triggerOnChange);
+        if (triggerOnClear) {
+            if (this.propOptions.onClear) {
+                this.propOptions.onClear.call(this);
+            }
+            this._subscriber.trigger("onClear");
+        }
+        this._triggerOnComponentChange("onClear");
+    }
+    setLabel(label) {
+        this.propOptions.label = label;
+        if (label) {
+            if (!this.propLabelElement) {
+                this.propLabelElement = document.createElement("label");
+                this.propLabelElement.className = "floating-label";
+            }
+            if (this.propLabelElement.parentNode !== this.propContainer) {
+                this.propContainer.insertBefore(this.propLabelElement, this.propContainer.firstChild);
+            }
+            this.propLabelElement.textContent = label;
+        }
+        else {
+            if (this.propLabelElement && this.propLabelElement.parentNode === this.propContainer) {
+                this.propContainer.removeChild(this.propLabelElement);
+            }
+        }
+        this._triggerOnComponentChange("setLabel");
+    }
+    setError(isError) {
+        this.propOptions.error = Boolean(isError);
+        this.propContainer.classList.toggle("error", isError);
+        this._triggerOnComponentChange("setError");
+    }
+    setDisabled(disabled) {
+        this.propOptions.disabled = Boolean(disabled);
+        this.propInputElement.disabled = disabled;
+        this.propClearButton.disabled = disabled;
+        this.propContainer.classList.toggle("disabled", disabled);
+        this._triggerOnComponentChange("setDisabled");
+    }
+    /**
+     * show/hide delete icon
+     * @param show
+     */
+    setShowDelete(show) {
+        this.propOptions.showDelete = Boolean(show);
+        this._updateDeleteDisplay();
+        this._triggerOnComponentChange("setShowDelete");
+    }
+    setLoading(loading) {
+        this.propOptions.loading = Boolean(loading);
+        if (loading) {
+            if (!this.propLoaderElement) {
+                this.propLoaderElement = document.createElement("div");
+                this.propLoaderElement.className = "loader";
+            }
+            if (this.propClearButton.parentNode) {
+                this.propButtonsContainer.replaceChild(this.propLoaderElement, this.propClearButton);
+            }
+        }
+        else {
+            if (this.propLoaderElement && this.propLoaderElement.parentNode) {
+                this.propButtonsContainer.replaceChild(this.propClearButton, this.propLoaderElement);
+            }
+        }
+        this._triggerOnComponentChange("setLoading");
+    }
+    render() {
+        if (!this.propContainer) {
+            this.propContainer = document.createElement("div");
+            this.propContainer.className = "selected-section";
+            this.propFlexList = document.createElement("div");
+            this.propFlexList.className = "flex-list";
+            this.propButtonsContainer = document.createElement("div");
+            this.propButtonsContainer.className = "buttons-container";
+            this.propClearButton = document.createElement("button");
+            this.propClearButton.className = "clear-btn";
+            this.propClearButton.textContent = "✕";
+            this.propButtonsContainer.appendChild(this.propClearButton);
+            this.propContainer.appendChild(this.propFlexList);
+            this.propContainer.appendChild(this.propButtonsContainer);
+            this.propParentElement.appendChild(this.propContainer);
+            const input = document.createElement("input");
+            input.type = "text";
+            input.value = this.propOptions.value || "";
+            input.placeholder = " ";
+            input.size = 1;
+            this.propInputElement = input;
+            this.propFlexList.appendChild(this.propInputElement);
+        }
+        this.setLabel(this.propOptions.label || "");
+        this.setShowDelete(this.propOptions.showDelete !== false);
+        this.setError(Boolean(this.propOptions.error));
+        this.setDisabled(Boolean(this.propOptions.disabled));
+        this.setLoading(Boolean(this.propOptions.loading));
+        this.setShowInput(Boolean(this.propOptions.showInput));
+        const elements = this.propOptions.renderList(this.getSelected(), this._defaultRenderList.bind(this));
+        if (!Array.isArray(elements)) {
+            throw new Error("renderList must return an array of HTMLElements");
+        }
+        // clear the list (except touching input)
+        const children = Array.from(this.propFlexList.childNodes);
+        for (const child of children) {
+            if (child instanceof HTMLElement && child.tagName === "INPUT") {
+                continue;
+            }
+            this.propFlexList.removeChild(child);
+        }
+        // rendering elements in order before input
+        for (const el of elements) {
+            if (!(el instanceof HTMLElement)) {
+                throw new Error("each element returned from renderList must be an HTMLElement");
+            }
+            if (this.propInputElement && this.propInputElement.parentNode === this.propFlexList) {
+                this.propFlexList.insertBefore(el, this.propInputElement);
+            }
+            else {
+                this.propFlexList.appendChild(el);
+            }
+        }
+    }
+    setRenderItem(renderItem) {
+        this.propOptions.renderItem = renderItem || ((item, def) => def(item));
+        this.render();
+        this._triggerOnComponentChange("setRenderItem");
+    }
+    setRenderList(renderList) {
+        this.propOptions.renderList = renderList || ((selected, def) => def(selected));
+        this.render();
+        this._triggerOnComponentChange("setRenderList");
+    }
+    setRenderEmpty(renderEmpty) {
+        this.propOptions.renderEmpty = renderEmpty || ((def) => def());
+        this.render();
+        this._triggerOnComponentChange("setRenderEmpty");
+    }
+    // getters
+    getSelected() {
+        return this.propOptions.selected || [];
+    }
+    getShowInput() {
+        return this.propOptions.showInput;
+    }
+    getValue() {
+        return this.propOptions.value;
+    }
+    getLabel() {
+        return this.propOptions.label;
+    }
+    getDisabled() {
+        return this.propOptions.disabled;
+    }
+    getError() {
+        return this.propOptions.error;
+    }
+    getLoading() {
+        return this.propOptions.loading;
+    }
+    getShowDelete() {
+        return this.propOptions.showDelete;
+    }
+    destroy() {
+        this._subscriber.destroy();
+    }
+}

package/composition/selected-section/react.js

@@ -0,0 +1,91 @@
+// @ts-ignore
+import React from "react";
+import "./selected-section.js";
+export const SelectedSection = React.forwardRef((props, ref) => {
+    const { label, "show-input": showInput, value, disabled, error, loading, selected: selectedSelected, children, onDelete, onClear, onChange, onInputChange, onFocus, ...rest } = props;
+    const internalRef = React.useRef(null);
+    const setRef = React.useCallback((node) => {
+        internalRef.current = node;
+        if (typeof ref === "function") {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    React.useLayoutEffect(() => {
+        const el = internalRef.current;
+        if (el && selectedSelected !== undefined) {
+            if (el.getManager && el.getManager()) {
+                el.getManager().setSelected(typeof selectedSelected === "string" ? JSON.parse(selectedSelected) : selectedSelected);
+            }
+            else {
+                el.setAttribute("selected", typeof selectedSelected === "string" ? selectedSelected : JSON.stringify(selectedSelected));
+            }
+        }
+    }, [selectedSelected]);
+    React.useLayoutEffect(() => {
+        const el = internalRef.current;
+        if (el && el.getManager && el.getManager()) {
+            const mgr = el.getManager();
+            const sub = mgr.getSubscriber();
+            if (sub) {
+                const unbinds = [];
+                if (onDelete) {
+                    unbinds.push(sub.bind("onDelete", (id) => onDelete(id)));
+                }
+                if (onClear) {
+                    unbinds.push(sub.bind("onClear", () => onClear()));
+                }
+                if (onChange) {
+                    unbinds.push(sub.bind("onChange", (s) => onChange(s)));
+                }
+                if (onInputChange) {
+                    unbinds.push(sub.bind("onInputChange", (e, previousValue) => onInputChange({
+                        originalEvent: e,
+                        value: e.target.value,
+                        key: e.key || "",
+                        previousValue,
+                    })));
+                }
+                if (onFocus) {
+                    unbinds.push(sub.bind("onFocus", (e) => onFocus({ originalEvent: e })));
+                }
+                return () => {
+                    unbinds.forEach((u) => u());
+                };
+            }
+        }
+    }, [onDelete, onClear, onChange, onInputChange, onFocus]);
+    const wcProps = { ...rest, ref: setRef };
+    if (label !== undefined)
+        wcProps.label = label;
+    if (value !== undefined)
+        wcProps.value = value;
+    if (String(showInput) === "true") {
+        wcProps["show-input"] = "true";
+    }
+    else {
+        delete wcProps["show-input"];
+    }
+    if (String(disabled) === "true") {
+        wcProps.disabled = "true";
+    }
+    else {
+        delete wcProps.disabled;
+    }
+    if (String(error) === "true") {
+        wcProps.error = "true";
+    }
+    else {
+        delete wcProps.error;
+    }
+    if (String(loading) === "true") {
+        wcProps.loading = "true";
+    }
+    else {
+        delete wcProps.loading;
+    }
+    return React.createElement("selected-section", wcProps, children);
+});
+export default SelectedSection;

package/composition/selected-section/selected-section.js

@@ -0,0 +1,207 @@
+import { SelectedSectionManager } from "./SelectedSectionManager.js";
+/**
+ * Injects CSS into the Shadow DOM.
+ * Priority:
+ * 1. SelectedSection.cssText (Bundler string injection)
+ * 2. <meta name="select-component" content="/path1.css, /path2.css"> (Global HTML declaration in main document)
+ * 3. SelectedSection.defaultCssUrls (Global JS property)
+ *
+ * Example of Global HTML Declaration in the main document <head>:
+ * <head>
+ *   <meta name="select-component" content="SelectedSectionManager.css">
+ * </head>
+ */
+export class SelectedSection extends HTMLElement {
+    _manager = null;
+    _options = {};
+    _mountPoint;
+    _stylesInjected = false;
+    // 1. For Bundlers: Assign CSS string directly (e.g. import css from './style.css?raw')
+    static cssText = "";
+    // 2. For Vanilla JS: Default URLs (Vite/Webpack5 will also process import.meta.url)
+    static defaultCssUrls = [];
+    static get observedAttributes() {
+        return ["label", "show-input", "value", "disabled", "error", "loading", "selected"];
+    }
+    constructor() {
+        super();
+        this.attachShadow({ mode: "open" });
+        this.shadowRoot.innerHTML = `<style></style><div></div>`;
+        this._mountPoint = this.shadowRoot.querySelector("div");
+    }
+    connectedCallback() {
+        this._injectStyles();
+        if (this._manager)
+            return;
+        this._options = {
+            label: this.getAttribute("label") || "",
+            showInput: this.hasAttribute("show-input"),
+            value: this.getAttribute("value") || "",
+            disabled: this.hasAttribute("disabled"),
+            error: this.hasAttribute("error"),
+            loading: this.hasAttribute("loading"),
+            selected: this._parseJSON(this.getAttribute("selected")) ?? [],
+        };
+        this._manager = new SelectedSectionManager(this._mountPoint, this._options);
+    }
+    disconnectedCallback() {
+        this._manager?.destroy();
+        this._manager = null;
+    }
+    attributeChangedCallback(name, _oldValue, newValue) {
+        if (!this._manager)
+            return;
+        const isTrue = this.hasAttribute(name);
+        switch (name) {
+            case "label":
+                this._manager.setLabel(newValue);
+                break;
+            case "show-input":
+                this._manager.setShowInput(isTrue);
+                break;
+            case "value":
+                this._manager.setValue(newValue);
+                break;
+            case "disabled":
+                this._manager.setDisabled(isTrue);
+                break;
+            case "error":
+                this._manager.setError(isTrue);
+                break;
+            case "loading":
+                this._manager.setLoading(isTrue);
+                break;
+            case "selected": {
+                const parsed = this._parseJSON(newValue);
+                if (parsed !== undefined) {
+                    this._manager.setSelected(parsed);
+                }
+                break;
+            }
+        }
+    }
+    _injectStyles() {
+        if (this._stylesInjected)
+            return;
+        this._stylesInjected = true;
+        const style = document.createElement("style");
+        // Scenario A: Bundler injected raw CSS string directly
+        if (SelectedSection.cssText) {
+            style.textContent = SelectedSection.cssText;
+        }
+        // Scenario B: Load from URLs (Global Meta Tag > Default Static Property)
+        else {
+            let urls = [];
+            const metaTag = document.querySelector('meta[name="select-component"]');
+            if (metaTag && metaTag.getAttribute("content")) {
+                urls = metaTag
+                    .getAttribute("content")
+                    .split(",")
+                    .map((s) => s.trim());
+            }
+            else {
+                urls = SelectedSection.defaultCssUrls;
+            }
+            urls.forEach((url) => {
+                if (!url)
+                    return;
+                style.textContent += `@import url("${url}");\n`;
+            });
+        }
+        // Remove existing injected CSS if updating dynamically
+        const existingStyle = this.shadowRoot.querySelector("style");
+        if (existingStyle) {
+            existingStyle.remove();
+        }
+        this.shadowRoot.appendChild(style);
+    }
+    // Proxied methods
+    setSelected(list) {
+        this._manager?.setSelected(list);
+    }
+    setValue(value) {
+        this._manager?.setValue(value);
+    }
+    clearSearch(triggerOnChange = true) {
+        this._manager?.clearSearch(triggerOnChange);
+    }
+    setError(state) {
+        this.toggleAttribute("error", state);
+    }
+    setDisabled(state) {
+        this.toggleAttribute("disabled", state);
+    }
+    setLoading(state) {
+        this.toggleAttribute("loading", state);
+    }
+    setLabel(text) {
+        this.setAttribute("label", text);
+    }
+    setShowInput(state) {
+        this.toggleAttribute("show-input", state);
+    }
+    setRenderItem(renderer) {
+        this._manager?.setRenderItem(renderer);
+    }
+    setRenderList(renderer) {
+        this._manager?.setRenderList(renderer);
+    }
+    render() {
+        this._manager?.render();
+    }
+    // Getters and setters for properties
+    get selected() {
+        return this._manager?.getSelected() || [];
+    }
+    set selected(val) {
+        this.setSelected(val);
+    }
+    get value() {
+        return this._manager?.propInputElement?.value || "";
+    }
+    set value(val) {
+        this.setValue(val);
+    }
+    get label() {
+        return this.getAttribute("label") || "";
+    }
+    set label(val) {
+        this.setLabel(val);
+    }
+    get error() {
+        return this.hasAttribute("error");
+    }
+    set error(val) {
+        this.setError(val);
+    }
+    get disabled() {
+        return this.hasAttribute("disabled");
+    }
+    set disabled(val) {
+        this.setDisabled(val);
+    }
+    get loading() {
+        return this.hasAttribute("loading");
+    }
+    set loading(val) {
+        this.setLoading(val);
+    }
+    setFocus() {
+        this._manager?.setFocus();
+    }
+    getManager() {
+        return this._manager;
+    }
+    _parseJSON(val) {
+        if (!val)
+            return undefined;
+        try {
+            return JSON.parse(val);
+        }
+        catch (e) {
+            console.error(`SelectedSection: failed to parse JSON:`, val, e);
+            return undefined;
+        }
+    }
+}
+customElements.define("selected-section", SelectedSection);

package/composition/unbind/clickOutside.js

@@ -0,0 +1,17 @@
+export function clickOutside(targets, callback) {
+    const targetList = Array.isArray(targets) ? targets : [targets];
+    const handler = (e) => {
+        const node = e.target;
+        const isInside = targetList.some((target) => target && target.contains(node));
+        if (!isInside) {
+            callback(e);
+        }
+    };
+    // Use capturing phase so we don't miss events if some child stops propagation
+    document.addEventListener("click", handler, true);
+    document.addEventListener("touchstart", handler, { capture: true, passive: true });
+    return function unbind() {
+        document.removeEventListener("click", handler, true);
+        document.removeEventListener("touchstart", handler, true);
+    };
+}

package/diff/coreBundle.patch

@@ -0,0 +1,13 @@
+--- node_modules/playwright-core/lib/coreBundle.js	2026-05-23 03:29:43
++++ diff/coreBundle.js	2026-05-23 04:08:12
+@@ -46685,8 +46685,8 @@
+         const recorderPlaywright = createPlaywright2({ sdkLanguage: "javascript", isInternalPlaywright: true });
+         const { context: appContext, page } = await launchApp(recorderPlaywright.chromium, {
+           sdkLanguage,
+-          windowSize: { width: 600, height: 600 },
+-          windowPosition: { x: 1020, y: 10 },
++          windowSize: { width: 1000, height: 1200 },
++          windowPosition: { x: 1320, y: 5 },
+           persistentContextOptions: {
+             noDefaultViewport: true,
+             headless: !!process.env.PWTEST_CLI_HEADLESS || isUnderTest() && !headed,

package/diff/recorderApp.patch

@@ -0,0 +1,13 @@
+--- node_modules/playwright-core/lib/server/recorder/recorderApp.js	2026-05-21 17:28:58
++++ diff/recorderApp.js	2026-05-21 17:34:13
+@@ -186,8 +186,8 @@
+     const recorderPlaywright = require("../playwright").createPlaywright({ sdkLanguage: "javascript", isInternalPlaywright: true });
+     const { context: appContext, page } = await (0, import_launchApp2.launchApp)(recorderPlaywright.chromium, {
+       sdkLanguage,
+-      windowSize: { width: 600, height: 600 },
+-      windowPosition: { x: 1020, y: 10 },
++      windowSize: { width: 1000, height: 1200 },
++      windowPosition: { x: 1320, y: 5 },
+       persistentContextOptions: {
+         noDefaultViewport: true,
+         headless: !!process.env.PWTEST_CLI_HEADLESS || (0, import_debug.isUnderTest)() && !headed,

package/dist/cjs/Module.cjs

@@ -0,0 +1,15 @@
+/** @es.ts
+{
+   mode: "bundle",
+   extension: ".js",
+   options: {
+   }
+}
+@es.ts */
+export * from "./container/ContainerManager.js";
+export * from "./options-section/OptionsSectionManager.js";
+export * from "./selected-section/SelectedSectionManager.js";
+export * from "./unbind/clickOutside.js";
+export * from "./composite-select/helpers.js";
+export * from "./composite-select/CompositeManager.js";
+export * from "./types.js";