npm - composite-select - Versions diffs - 1.0.0 - Mend

composite-select 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (105) hide show

package/README.md +5 -0
package/commitlint.config.js +3 -0
package/composition/composite-select/CompositeManager.js +43 -0
package/composition/composite-select/composite-select.js +199 -0
package/composition/composite-select/debounce.js +10 -0
package/composition/composite-select/helpers.js +96 -0
package/composition/composite-select/react.js +189 -0
package/composition/container/ContainerManager.js +76 -0
package/composition/img/ai.png +0 -0
package/composition/img/chatgpt.png +0 -0
package/composition/img/claude.png +0 -0
package/composition/img/gemini.png +0 -0
package/composition/img/gmail.png +0 -0
package/composition/img/google_calendar.png +0 -0
package/composition/img/google_drive.png +0 -0
package/composition/img/google_keep.png +0 -0
package/composition/img/img.json +5 -0
package/composition/img/perplexity.png +0 -0
package/composition/img/t3chat.png +0 -0
package/composition/img/timeanddate.png +0 -0
package/composition/img/tools.png +0 -0
package/composition/img/youtube.png +0 -0
package/composition/options-section/OptionsSectionManager.css +263 -0
package/composition/options-section/OptionsSectionManager.js +486 -0
package/composition/options-section/options-section.js +245 -0
package/composition/options-section/react.js +90 -0
package/composition/selected-section/SelectedSectionManager.css +214 -0
package/composition/selected-section/SelectedSectionManager.js +336 -0
package/composition/selected-section/react.js +91 -0
package/composition/selected-section/selected-section.js +207 -0
package/composition/unbind/clickOutside.js +17 -0
package/diff/coreBundle.patch +13 -0
package/diff/recorderApp.patch +13 -0
package/dist/cjs/Module.cjs +15 -0
package/dist/cjs/composite-select/CompositeManager.js +43 -0
package/dist/cjs/composite-select/composite-select.js +199 -0
package/dist/cjs/composite-select/debounce.js +10 -0
package/dist/cjs/composite-select/helpers.js +96 -0
package/dist/cjs/composite-select/react.js +189 -0
package/dist/cjs/container/ContainerManager.js +76 -0
package/dist/cjs/createSubscriber.cjs +48 -0
package/dist/cjs/options-section/OptionsSectionManager.js +486 -0
package/dist/cjs/options-section/options-section.js +245 -0
package/dist/cjs/options-section/react.js +90 -0
package/dist/cjs/selected-section/SelectedSectionManager.js +336 -0
package/dist/cjs/selected-section/react.js +91 -0
package/dist/cjs/selected-section/selected-section.js +207 -0
package/dist/cjs/types.cjs +1 -0
package/dist/cjs/unbind/clickOutside.js +17 -0
package/dist/esm/Module.js +15 -0
package/dist/esm/composite-select/CompositeManager.js +43 -0
package/dist/esm/composite-select/composite-select.js +199 -0
package/dist/esm/composite-select/debounce.js +10 -0
package/dist/esm/composite-select/helpers.js +96 -0
package/dist/esm/composite-select/react.js +189 -0
package/dist/esm/container/ContainerManager.js +76 -0
package/dist/esm/createSubscriber.js +48 -0
package/dist/esm/options-section/OptionsSectionManager.js +486 -0
package/dist/esm/options-section/options-section.js +245 -0
package/dist/esm/options-section/react.js +90 -0
package/dist/esm/selected-section/SelectedSectionManager.js +336 -0
package/dist/esm/selected-section/react.js +91 -0
package/dist/esm/selected-section/selected-section.js +207 -0
package/dist/esm/types.js +1 -0
package/dist/esm/unbind/clickOutside.js +17 -0
package/dist/types/Module.d.ts +15 -0
package/dist/types/composite-select/CompositeManager.d.ts +21 -0
package/dist/types/composite-select/ContainerManager.html.d.ts +1 -0
package/dist/types/composite-select/composite-select.d.ts +26 -0
package/dist/types/composite-select/composite-select.html.d.ts +1 -0
package/dist/types/composite-select/debounce.d.ts +1 -0
package/dist/types/composite-select/helpers.d.ts +38 -0
package/dist/types/composite-select/namesSource.d.ts +4 -0
package/dist/types/composite-select/react.d.ts +61 -0
package/dist/types/composite-select/urlManager.d.ts +49 -0
package/dist/types/composite-select/urlManagerWc.d.ts +44 -0
package/dist/types/container/ContainerManager.d.ts +33 -0
package/dist/types/createSubscriber.d.ts +26 -0
package/dist/types/options-section/OptionsSectionManager.d.ts +117 -0
package/dist/types/options-section/OptionsSectionManager.html.d.ts +1 -0
package/dist/types/options-section/OptionsSectionManagerWebComponent.attributes.html.d.ts +1 -0
package/dist/types/options-section/OptionsSectionManagerWebComponent.html.d.ts +1 -0
package/dist/types/options-section/OptionsSectionManagerWebComponent.nocssrequest.html.d.ts +1 -0
package/dist/types/options-section/options-section.d.ts +67 -0
package/dist/types/options-section/react.d.ts +27 -0
package/dist/types/options-section/urlManager.d.ts +28 -0
package/dist/types/selected-section/SelectedSectionManager.d.ts +89 -0
package/dist/types/selected-section/SelectedSectionManager.html.d.ts +1 -0
package/dist/types/selected-section/SelectedSectionManager.templates.html.d.ts +1 -0
package/dist/types/selected-section/SelectedSectionManagerWebComponent.attributes.html.d.ts +1 -0
package/dist/types/selected-section/SelectedSectionManagerWebComponent.html.d.ts +1 -0
package/dist/types/selected-section/SelectedSectionManagerWebComponent.nocssrequest.html.d.ts +1 -0
package/dist/types/selected-section/react.d.ts +32 -0
package/dist/types/selected-section/selected-section.d.ts +54 -0
package/dist/types/selected-section/urlManager.d.ts +25 -0
package/dist/types/types.d.ts +9 -0
package/dist/types/unbind/clickOutside.d.ts +1 -0
package/floating-label-pattern.css +502 -0
package/js/CenterAndHeightResizer.js +263 -0
package/js/CenterResizer.js +190 -0
package/madooei.tar.gz +0 -0
package/package.json +28 -0
package/release.config.js +3 -0
package/test/lib.d.ts +6 -0
package/test/lib.js +30 -0

package/dist/esm/selected-section/react.js ADDED Viewed

@@ -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/dist/esm/selected-section/selected-section.js ADDED Viewed

@@ -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/dist/esm/types.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/dist/esm/unbind/clickOutside.js ADDED Viewed

@@ -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/dist/types/Module.d.ts ADDED Viewed

@@ -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";

package/dist/types/composite-select/CompositeManager.d.ts ADDED Viewed

@@ -0,0 +1,21 @@
+import { ContainerManager } from "../container/ContainerManager.js";
+import type { ContainerManagerOptions } from "../container/ContainerManager.js";
+import { OptionsSectionManager } from "../options-section/OptionsSectionManager.js";
+import type { OptionsSectionManagerOptions } from "../options-section/OptionsSectionManager.js";
+import { SelectedSectionManager } from "../selected-section/SelectedSectionManager.js";
+import type { SelectedSectionManagerOptions } from "../selected-section/SelectedSectionManager.js";
+import type { Item } from "../types.js";
+export type CompositeManagerOptions<T extends Item> = {
+    select?: SelectedSectionManagerOptions<T>;
+    options?: OptionsSectionManagerOptions<T>;
+    container?: ContainerManagerOptions;
+};
+export declare class CompositeManager<T extends Item> {
+    container: ContainerManager;
+    selected: SelectedSectionManager<T>;
+    options: OptionsSectionManager<T>;
+    private _unbindClickOutside;
+    private _parent;
+    constructor(parent: HTMLDivElement, options?: CompositeManagerOptions<T>);
+    destroy(): void;
+}

package/dist/types/composite-select/ContainerManager.html.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ import "../../../js/CenterAndHeightResizer.js";

package/dist/types/composite-select/composite-select.d.ts ADDED Viewed

@@ -0,0 +1,26 @@
+import { CompositeManager } from "./CompositeManager.js";
+import type { Item } from "../types.js";
+/**
+ * CompositeSelect web component — wraps CompositeManager.
+ *
+ * Does NOT use shadow DOM because ContainerManager creates a <div popover>
+ * whose positioning CSS classes (cover-bottom, bottom, etc. from popover.css)
+ * are global and cannot penetrate shadow DOM boundaries.
+ * The host page must load the required CSS via <link> tags, exactly as ContainerManager.html does.
+ *
+ * Attribute prefixes:
+ *   selected-*   →  SelectedSectionManager properties / events
+ *   options-*    →  OptionsSectionManager properties / events
+ *   container-*  →  ContainerManager properties / events
+ */
+export declare class CompositeSelect<T extends Item = Item> extends HTMLElement {
+    private _manager;
+    private _mountPoint;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
+    getManager<TT extends Item = T>(): CompositeManager<TT> | null;
+    private _parseJSON;
+}

package/dist/types/composite-select/composite-select.html.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ import "../../../js/CenterAndHeightResizer.js";

package/dist/types/composite-select/debounce.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export default function debounce<Args extends any[]>(fn: (...args: Args) => any, delay: number): (...args: Args) => void;

package/dist/types/composite-select/helpers.d.ts ADDED Viewed

@@ -0,0 +1,38 @@
+import type { Item } from "../types.js";
+/**
+ * Toggles an item in the selected list: adds if missing, removes if present.
+ */
+export declare function togglePresenceOnTheList<T extends Item>(selected: T[], item: T): T[];
+/**
+ * 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 declare function selectedFindDeduplicatedInOptionsByIds<T extends Item>(options: T[], ids: (string | number)[], seed?: T[]): T[];
+/**
+ * Updates the 'selected' flag on each option based on whether its ID exists in the provided selected list.
+ */
+export declare function markSelectedByIds<T extends Item>(options: T[], selectedIds: number[]): T[];
+/**
+ * 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 declare function deduplicateArrayById<T extends {
+    id: string | number;
+}>(arr: T[]): T[];
+/**
+ * Sorts a list of elements by their ID string value.
+ */
+export declare function sortById<T extends Item>(list: T[], asc?: boolean): T[];
+/**
+ * Wraps matches of search terms in the provided text with a highlight span.
+ * Supports multi-word search and case-insensitive matching.
+ */
+export declare function markSearchWithSpan(text: string, search: string): string;

package/dist/types/composite-select/namesSource.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import type { Item } from "../types.js";
+export declare function getSafeFreeOffset(): number;
+export declare function randomNames(name: string, num?: number): Item[];
+export declare function searchNames<T extends Item>(name: string | undefined, num?: number): T[];

package/dist/types/composite-select/react.d.ts ADDED Viewed

@@ -0,0 +1,61 @@
+import React from "react";
+import "./composite-select.js";
+import type { Item } from "../types.js";
+import type { OptionsSectionManagerOptions } from "../options-section/OptionsSectionManager.js";
+import type { SelectedSectionManagerOptions } from "../selected-section/SelectedSectionManager.js";
+type BaseCompositeSelectProps<T extends Item = Item> = {
+    className?: string;
+    style?: React.CSSProperties;
+    id?: string;
+    key?: React.Key;
+    ref?: React.Ref<HTMLElement>;
+    "selected-selected"?: T[] | string;
+    "selected-show-input"?: boolean;
+    "selected-value"?: string;
+    "selected-label"?: string;
+    "selected-disabled"?: boolean;
+    "selected-error"?: boolean;
+    "selected-loading"?: boolean;
+    "selected-show-delete"?: boolean;
+    "selected-onDelete"?: (id: string) => void;
+    "selected-onClear"?: () => void;
+    "selected-onInputChange"?: (detail: {
+        originalEvent: Event;
+        value: string;
+        key: string;
+        previousValue?: string;
+    }) => void;
+    "selected-onFocus"?: (detail: {
+        originalEvent: FocusEvent;
+    }) => void;
+    "selected-onChange"?: (selected: T[]) => void;
+    "selected-onComponentChange"?: (options: SelectedSectionManagerOptions<T>, reason: string) => void;
+    "options-options"?: T[] | string;
+    "options-loading"?: boolean;
+    "options-value"?: string;
+    "options-label"?: string;
+    "options-disabled"?: boolean;
+    "options-max-height"?: string;
+    "options-show-footer"?: boolean;
+    "options-show-filter"?: boolean;
+    "options-onItemPick"?: (item: T) => void;
+    "options-onInputChange"?: (detail: {
+        originalEvent: Event;
+        value: string;
+        previousValue?: string;
+    }) => void;
+    "options-onCancel"?: () => void;
+    "options-onOk"?: () => void;
+    "options-onHighlightChange"?: (id: string | number | null) => void;
+    "options-onClear"?: () => void;
+    "options-onComponentChange"?: (options: OptionsSectionManagerOptions<T>, reason: string) => void;
+    "container-onClose"?: () => void;
+    "container-position"?: string;
+    "container-offset"?: string;
+    children?: React.ReactNode;
+};
+export type CompositeSelectProps<T extends Item = Item> = BaseCompositeSelectProps<T> & {
+    [K in string as K extends `${string}-${string}` ? K extends keyof BaseCompositeSelectProps<T> ? never : K : never]?: never;
+};
+export declare const CompositeSelect: <T extends Item = Item>(props: CompositeSelectProps<T> & React.RefAttributes<HTMLElement>) => React.ReactElement;
+export default CompositeSelect;

package/dist/types/composite-select/urlManager.d.ts ADDED Viewed

@@ -0,0 +1,49 @@
+import type { PositionType } from "../container/ContainerManager.js";
+import type { Item } from "../types.js";
+export interface DemoItem extends Item {
+    color?: string;
+    img?: string;
+}
+export type DemoState = {
+    selected: DemoItem[];
+    left: string;
+    center: string;
+    height: string;
+    disabledSel: boolean;
+    disabledOpt: boolean;
+    loadingSel: boolean;
+    loadingOpt: boolean;
+    labelSel: string;
+    labelOpt: string;
+    errorSel: boolean;
+    showInputSel: boolean;
+    showFilter: boolean;
+    showFooter: boolean;
+    position: PositionType;
+    filter: string;
+    selectedValue: string;
+    maxHeight: string;
+    emptyList: boolean;
+};
+export type UrlDef<T> = {
+    toUrl: (url: URL, id: string | number, value: T) => void;
+    fromUrl: (urlParams: URLSearchParams, id: string | number) => T | undefined;
+    remove: (urlParams: URLSearchParams, id: string | number) => void;
+};
+export declare function urlManipulationFactory<State extends Record<string, any>>(config: {
+    [K in keyof State]: UrlDef<State[K]>;
+}): {
+    toUrl: (url: URL, id: string | number, state: Partial<State>) => URL;
+    fromUrl: (urlParams: URLSearchParams, id: string | number) => Partial<State>;
+    getAllIds: (urlParams: URLSearchParams, idRegex?: RegExp) => number[];
+    removeId: (urlParams: URLSearchParams, id: string | number) => void;
+};
+export declare const createStringParam: (prefix: string, defaultValue?: string) => UrlDef<string>;
+export declare const createBooleanParam: (prefix: string, trueVal?: string, falseVal?: string, defaultValue?: boolean) => UrlDef<boolean>;
+export declare const createArrayParam: <T>(prefix: string, serialize: (item: T) => string, deserialize: (val: string) => T) => UrlDef<T[]>;
+export declare const urlStateConfig: {
+    toUrl: (url: URL, id: string | number, state: Partial<DemoState>) => URL;
+    fromUrl: (urlParams: URLSearchParams, id: string | number) => Partial<DemoState>;
+    getAllIds: (urlParams: URLSearchParams, idRegex?: RegExp) => number[];
+    removeId: (urlParams: URLSearchParams, id: string | number) => void;
+};

package/dist/types/composite-select/urlManagerWc.d.ts ADDED Viewed

@@ -0,0 +1,44 @@
+import type { PositionType } from "../container/ContainerManager.js";
+import type { Item } from "../types.js";
+export type DemoItem = Item;
+export type DemoState = {
+    selected: DemoItem[];
+    left: string;
+    center: string;
+    height: string;
+    disabledSel: boolean;
+    disabledOpt: boolean;
+    loadingSel: boolean;
+    loadingOpt: boolean;
+    labelSel: string;
+    labelOpt: string;
+    errorSel: boolean;
+    showInputSel: boolean;
+    setShowFilter: boolean;
+    setShowFooter: boolean;
+    position: PositionType;
+    filter: string;
+    selectedValue: string;
+};
+export type UrlDef<T> = {
+    toUrl: (url: URL, id: string | number, value: T) => void;
+    fromUrl: (urlParams: URLSearchParams, id: string | number) => T | undefined;
+    remove: (urlParams: URLSearchParams, id: string | number) => void;
+};
+export declare function urlManipulationFactory<State extends Record<string, any>>(config: {
+    [K in keyof State]: UrlDef<State[K]>;
+}): {
+    toUrl: (url: URL, id: string | number, state: Partial<State>) => URL;
+    fromUrl: (urlParams: URLSearchParams, id: string | number) => Partial<State>;
+    getAllIds: (urlParams: URLSearchParams, idRegex?: RegExp) => number[];
+    removeId: (urlParams: URLSearchParams, id: string | number) => void;
+};
+export declare const createStringParam: (prefix: string, defaultValue?: string) => UrlDef<string>;
+export declare const createBooleanParam: (prefix: string, trueVal?: string, falseVal?: string, defaultValue?: boolean) => UrlDef<boolean>;
+export declare const createArrayParam: <T>(prefix: string, serialize: (item: T) => string, deserialize: (val: string) => T) => UrlDef<T[]>;
+export declare const urlStateConfig: {
+    toUrl: (url: URL, id: string | number, state: Partial<DemoState>) => URL;
+    fromUrl: (urlParams: URLSearchParams, id: string | number) => Partial<DemoState>;
+    getAllIds: (urlParams: URLSearchParams, idRegex?: RegExp) => number[];
+    removeId: (urlParams: URLSearchParams, id: string | number) => void;
+};

package/dist/types/container/ContainerManager.d.ts ADDED Viewed

@@ -0,0 +1,33 @@
+export type PositionType = "topleft" | "top-left" | "top" | "top-right" | "topright" | "left-top" | "cover-top-left" | "cover-top" | "cover-top-right" | "right-top" | "left" | "cover-left" | "center" | "cover-right" | "right" | "left-bottom" | "cover-bottom-left" | "cover-bottom" | "cover-bottom-right" | "right-bottom" | "bottomleft" | "bottom-left" | "bottom" | "bottom-right" | "bottomright";
+export type ContainerManagerOptions = {
+    onClose?: () => void;
+};
+export type ContainerManagerEvents = {
+    onClose: [];
+};
+export declare class ContainerManager {
+    private parent;
+    private target;
+    private popover;
+    private currentPosition;
+    propOptions: ContainerManagerOptions;
+    private _subscriber;
+    constructor(parent: HTMLDivElement, options?: ContainerManagerOptions);
+    getSubscriber(): {
+        bind: <K extends "onClose">(event: K, handler: (...args: ContainerManagerEvents[K]) => void) => () => void;
+        unbind: <K extends "onClose">(event: K, handler: (...args: ContainerManagerEvents[K]) => void) => void;
+        unbindGroup: <K extends "onClose">(event: K) => void;
+        trigger: <K extends "onClose">(event: K, ...args: ContainerManagerEvents[K]) => void;
+        destroy: () => void;
+        getCount: () => number;
+    };
+    show(): void;
+    hide(): void;
+    getParent(): HTMLDivElement;
+    getTarget(): HTMLDivElement;
+    getPopover(): HTMLDivElement;
+    getPosition(): PositionType;
+    setPosition(position: PositionType): void;
+    setOffset(offset: string): void;
+    destroy(): void;
+}

package/dist/types/createSubscriber.d.ts ADDED Viewed

@@ -0,0 +1,26 @@
+/**
+  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<EventsSpecs extends Record<string, any[]> = Record<string, any[]>>(): {
+    bind: <K extends keyof EventsSpecs>(event: K, handler: (...args: EventsSpecs[K]) => void) => () => void;
+    unbind: <K extends keyof EventsSpecs>(event: K, handler: (...args: EventsSpecs[K]) => void) => void;
+    unbindGroup: <K extends keyof EventsSpecs>(event: K) => void;
+    trigger: <K extends keyof EventsSpecs>(event: K, ...args: EventsSpecs[K]) => void;
+    destroy: () => void;
+    getCount: () => number;
+};