composite-select 1.0.0

package/dist/esm/composite-select/helpers.js

@@ -0,0 +1,96 @@
+/**
+ * Toggles an item in the selected list: adds if missing, removes if present.
+ */
+export function togglePresenceOnTheList(selected, item) {
+    const tmp = [...selected];
+    const newList = tmp.filter((i) => String(i.id) !== String(item.id));
+    if (newList.length === tmp.length) {
+        tmp.push(item);
+        return tmp;
+    }
+    return newList;
+}
+/**
+ * Resolves a list of IDs into full option objects and merges them into the current selected list (seed).
+ * This function is designed to preserve any existing items in the selected list (including "extra" items
+ * that might not exist in the current options array) while ensuring the final result is unique and deduplicated by ID.
+ */
+export function selectedFindDeduplicatedInOptionsByIds(options, ids, seed) {
+    let tmp = [];
+    if (seed) {
+        tmp = [...seed];
+    }
+    ids.forEach((id) => {
+        const found = tmp.some((i) => String(i.id) === String(id));
+        if (!found) {
+            tmp.push(options.find((o) => String(o.id) === String(id)));
+        }
+    });
+    tmp = deduplicateArrayById(tmp);
+    return tmp;
+}
+/**
+ * Updates the 'selected' flag on each option based on whether its ID exists in the provided selected list.
+ */
+export function markSelectedByIds(options, selectedIds) {
+    if (selectedIds.length === 0) {
+        return [...options];
+    }
+    return options.map((option) => {
+        const opt = { ...option };
+        opt.selected = selectedIds.includes(option.id);
+        return opt;
+    });
+}
+/**
+ * Returns a new array with duplicate items removed based on their 'id' property.
+ * Interesting trick,
+ * if you know you will have more than one instance of object by the same id then pass these which you want to keep first.
+ * It is usefull in certain circumstances:
+ * For example when onFocus is fired we can unselect objects from selected by placing
+ * [...options, ...selected] in this order
+ * then unselected options will win over selected
+ * and then after that we can filter just these which are selected still and update manager.selected.setSelected()
+ * this way we will unselect
+ */
+export function deduplicateArrayById(arr) {
+    return arr.filter((item, index) => arr.findIndex((i) => String(i.id) === String(item.id)) === index);
+}
+/**
+ * Sorts a list of elements by their ID string value.
+ */
+export function sortById(list, asc = true) {
+    return [...list].sort((a, b) => {
+        const aId = String(a.id);
+        const bId = String(b.id);
+        if (aId < bId) {
+            return asc ? -1 : 1;
+        }
+        if (aId > bId) {
+            return asc ? 1 : -1;
+        }
+        return 0;
+    });
+}
+/**
+ * Wraps matches of search terms in the provided text with a highlight span.
+ * Supports multi-word search and case-insensitive matching.
+ */
+export function markSearchWithSpan(text, search) {
+    if (!search || !search.trim()) {
+        return text;
+    }
+    // Split by whitespace, deduplicate, and remove empty strings
+    const words = Array.from(new Set(search.trim().split(/\s+/).filter(Boolean)));
+    if (words.length === 0) {
+        return text;
+    }
+    // Escape special regex characters in each word
+    const escapedWords = words.map((word) => word.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"));
+    // Sort by length descending to match longest words first (greedy matching)
+    escapedWords.sort((a, b) => b.length - a.length);
+    // Create a regex to match any of the words, case-insensitively, globally
+    const regex = new RegExp(`(${escapedWords.join("|")})`, "gi");
+    // Replace matches with the highlighted span
+    return text.replace(regex, '<span class="highlight">$1</span>');
+}

package/dist/esm/composite-select/react.js

@@ -0,0 +1,189 @@
+// @ts-ignore
+import React from "react";
+import "./composite-select.js";
+export const CompositeSelect = React.forwardRef((props, ref) => {
+    const { "selected-selected": selectedSelected, "selected-show-input": selectedShowInput, "selected-value": selectedValue, "selected-label": selectedLabel, "selected-disabled": selectedDisabled, "selected-error": selectedError, "selected-loading": selectedLoading, "selected-show-delete": selectedShowDelete, "selected-onDelete": selectedOnDelete, "selected-onClear": selectedOnClear, "selected-onInputChange": selectedOnChangeValue, "selected-onFocus": selectedOnFocus, "selected-onChange": selectedOnChange, "selected-onComponentChange": selectedOnSelectedItemsChanged, "options-options": optionsOptions, "options-loading": optionsLoading, "options-value": optionsValue, "options-label": optionsLabel, "options-disabled": optionsDisabled, "options-max-height": optionsMaxHeight, "options-show-footer": optionsShowFooter, "options-show-filter": optionsFilter, "options-onItemPick": optionsOnItemPick, "options-onInputChange": optionsOnInputChange, "options-onCancel": optionsOnCancel, "options-onOk": optionsOnOk, "options-onHighlightChange": optionsOnHighlightChange, "options-onClear": optionsOnClear, "options-onComponentChange": optionsOnOptionsChanged, "container-position": containerPosition, "container-offset": containerOffset, "container-onClose": containerOnClose, children, ...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 && el.getManager && el.getManager()) {
+            const mgr = el.getManager();
+            const unbinds = [];
+            // SelectedSection events
+            const selSub = mgr.selected.getSubscriber();
+            if (selSub) {
+                if (selectedOnDelete) {
+                    unbinds.push(selSub.bind("onDelete", (id) => selectedOnDelete(id)));
+                }
+                if (selectedOnClear) {
+                    unbinds.push(selSub.bind("onClear", () => selectedOnClear()));
+                }
+                if (selectedOnChangeValue) {
+                    unbinds.push(selSub.bind("onInputChange", (e, previousValue) => selectedOnChangeValue({
+                        originalEvent: e,
+                        value: e.target.value,
+                        key: e.key || "",
+                        previousValue,
+                    })));
+                }
+                if (selectedOnFocus) {
+                    unbinds.push(selSub.bind("onFocus", (e) => selectedOnFocus({ originalEvent: e })));
+                }
+                if (selectedOnChange) {
+                    unbinds.push(selSub.bind("onChange", (selected) => selectedOnChange(selected)));
+                }
+                if (selectedOnSelectedItemsChanged) {
+                    unbinds.push(selSub.bind("onComponentChange", (options, reason) => selectedOnSelectedItemsChanged(options, reason)));
+                }
+            }
+            // OptionsSection events
+            const optSub = mgr.options.getSubscriber();
+            if (optSub) {
+                if (optionsOnItemPick) {
+                    unbinds.push(optSub.bind("onItemPick", (item) => optionsOnItemPick(item)));
+                }
+                if (optionsOnInputChange) {
+                    unbinds.push(optSub.bind("onInputChange", (e, previousValue) => optionsOnInputChange({
+                        originalEvent: e,
+                        value: e.target.value,
+                        previousValue,
+                    })));
+                }
+                if (optionsOnCancel) {
+                    unbinds.push(optSub.bind("onCancel", () => optionsOnCancel()));
+                }
+                if (optionsOnOk) {
+                    unbinds.push(optSub.bind("onOk", () => optionsOnOk()));
+                }
+                if (optionsOnHighlightChange) {
+                    unbinds.push(optSub.bind("onHighlightChange", (id) => optionsOnHighlightChange(id)));
+                }
+                if (optionsOnClear) {
+                    unbinds.push(optSub.bind("onClear", () => optionsOnClear()));
+                }
+                if (optionsOnOptionsChanged) {
+                    unbinds.push(optSub.bind("onComponentChange", (options, reason) => optionsOnOptionsChanged(options, reason)));
+                }
+            }
+            // Container events
+            const conSub = mgr.container.getSubscriber();
+            if (conSub) {
+                if (containerOnClose) {
+                    unbinds.push(conSub.bind("onClose", () => containerOnClose()));
+                }
+            }
+            return () => {
+                unbinds.forEach((u) => u());
+            };
+        }
+    }, [
+        selectedOnDelete,
+        selectedOnClear,
+        selectedOnChangeValue,
+        selectedOnFocus,
+        selectedOnChange,
+        selectedOnSelectedItemsChanged,
+        optionsOnItemPick,
+        optionsOnInputChange,
+        optionsOnCancel,
+        optionsOnOk,
+        optionsOnHighlightChange,
+        optionsOnClear,
+        optionsOnOptionsChanged,
+        containerOnClose,
+    ]);
+    React.useLayoutEffect(() => {
+        const el = internalRef.current;
+        if (el && el.getManager && el.getManager()) {
+            if (selectedSelected !== undefined) {
+                el.getManager().selected.setSelected(typeof selectedSelected === "string" ? JSON.parse(selectedSelected) : selectedSelected);
+            }
+            if (optionsOptions !== undefined) {
+                el.getManager().options.setOptions(typeof optionsOptions === "string" ? JSON.parse(optionsOptions) : optionsOptions);
+            }
+        }
+    }, [selectedSelected, optionsOptions]);
+    const wcProps = { ...rest, ref: setRef };
+    // Map selected-* attributes
+    if (String(selectedShowInput) === "true") {
+        wcProps["selected-show-input"] = "true";
+    }
+    else {
+        delete wcProps["selected-show-input"];
+    }
+    if (selectedValue !== undefined)
+        wcProps["selected-value"] = selectedValue;
+    if (selectedLabel !== undefined)
+        wcProps["selected-label"] = selectedLabel;
+    if (String(selectedDisabled) === "true") {
+        wcProps["selected-disabled"] = "true";
+    }
+    else {
+        delete wcProps["selected-disabled"];
+    }
+    if (String(selectedError) === "true") {
+        wcProps["selected-error"] = "true";
+    }
+    else {
+        delete wcProps["selected-error"];
+    }
+    if (String(selectedLoading) === "true") {
+        wcProps["selected-loading"] = "true";
+    }
+    else {
+        delete wcProps["selected-loading"];
+    }
+    if (String(selectedShowDelete) === "true") {
+        wcProps["selected-show-delete"] = "true";
+    }
+    else {
+        delete wcProps["selected-show-delete"];
+    }
+    // Map options-* attributes
+    if (String(optionsLoading) === "true") {
+        wcProps["options-loading"] = "true";
+    }
+    else {
+        delete wcProps["options-loading"];
+    }
+    if (optionsValue !== undefined)
+        wcProps["options-value"] = optionsValue;
+    if (optionsLabel !== undefined)
+        wcProps["options-label"] = optionsLabel;
+    if (String(optionsDisabled) === "true") {
+        wcProps["options-disabled"] = "true";
+    }
+    else {
+        delete wcProps["options-disabled"];
+    }
+    if (optionsMaxHeight !== undefined)
+        wcProps["options-max-height"] = optionsMaxHeight;
+    if (String(optionsShowFooter) === "true") {
+        wcProps["options-show-footer"] = "true";
+    }
+    else {
+        delete wcProps["options-show-footer"];
+    }
+    if (String(optionsFilter) === "true") {
+        wcProps["options-show-filter"] = "true";
+    }
+    else {
+        delete wcProps["options-show-filter"];
+    }
+    // Map container-* attributes
+    if (containerPosition !== undefined)
+        wcProps["container-position"] = containerPosition;
+    if (containerOffset !== undefined)
+        wcProps["container-offset"] = containerOffset;
+    return React.createElement("composite-select", wcProps, children);
+});
+export default CompositeSelect;

package/dist/esm/container/ContainerManager.js

@@ -0,0 +1,76 @@
+import createSubscriber from "../createSubscriber.js";
+export class ContainerManager {
+    parent;
+    target;
+    popover;
+    currentPosition = "cover-bottom";
+    propOptions;
+    _subscriber = createSubscriber();
+    constructor(parent, options = {}) {
+        this.parent = parent;
+        this.propOptions = {
+            ...options,
+        };
+        this.target = document.createElement("div");
+        this.popover = document.createElement("div");
+        this.popover.setAttribute("popover", "manual");
+        this.popover.setAttribute("data-popover", "");
+        this.popover.style.width = "anchor-size(width)";
+        this.popover.style.boxSizing = "border-box";
+        this.popover.style.border = "none";
+        this.setPosition(this.currentPosition);
+        this.setOffset("0px");
+        this.parent.appendChild(this.target);
+        this.parent.appendChild(this.popover);
+        this.popover.addEventListener("beforetoggle", (event) => {
+            if (event.newState === "closed") {
+                if (this.propOptions.onClose) {
+                    this.propOptions.onClose();
+                }
+                this._subscriber.trigger("onClose");
+            }
+        });
+    }
+    getSubscriber() {
+        return this._subscriber;
+    }
+    show() {
+        this.popover.showPopover({ source: this.target });
+    }
+    hide() {
+        this.popover.hidePopover();
+    }
+    getParent() {
+        return this.parent;
+    }
+    getTarget() {
+        return this.target;
+    }
+    getPopover() {
+        return this.popover;
+    }
+    getPosition() {
+        return this.currentPosition;
+    }
+    setPosition(position) {
+        if (this.currentPosition) {
+            this.popover.classList.remove(this.currentPosition);
+        }
+        this.currentPosition = position;
+        if (this.currentPosition) {
+            this.popover.classList.add(this.currentPosition);
+        }
+    }
+    setOffset(offset) {
+        this.popover.style.setProperty("--popover-offset", offset);
+    }
+    destroy() {
+        if (this.target && this.target.parentNode) {
+            this.target.parentNode.removeChild(this.target);
+        }
+        if (this.popover && this.popover.parentNode) {
+            this.popover.parentNode.removeChild(this.popover);
+        }
+        this._subscriber.destroy();
+    }
+}

package/dist/esm/createSubscriber.js

@@ -0,0 +1,48 @@
+/**
+  type Events = {
+    login: [user: { id: string; name: string }];
+    logout: [];
+  };
+
+  const subscriber = createSubscriber<Events>();
+
+  const loginHandler = () => {}
+  const logoutHandler = () => {}
+
+  subscriber.bind("login", loginHandler);
+  subscriber.bind("logout", logoutHandler);
+
+  subscriber.trigger("login", { id: "1", name: "John" });
+
+  subscriber.trigger("logout");
+ */
+export default function createSubscriber() {
+    const bindings = new Map();
+    function bind(event, handler) {
+        if (!bindings.has(event)) {
+            bindings.set(event, new Set());
+        }
+        bindings.get(event).add(handler);
+        return () => unbind(event, handler);
+    }
+    function unbind(event, handler) {
+        bindings.get(event)?.delete(handler);
+    }
+    function unbindGroup(event) {
+        bindings.delete(event);
+    }
+    function trigger(event, ...args) {
+        bindings.get(event)?.forEach((handler) => {
+            handler(...args);
+        });
+    }
+    function destroy() {
+        bindings.clear();
+    }
+    function getCount() {
+        let count = 0;
+        bindings.forEach((handlers) => (count += handlers.size));
+        return count;
+    }
+    return { bind, unbind, unbindGroup, trigger, destroy, getCount };
+}