@smilodon/core 1.2.0 → 1.2.1

package/dist/index.cjs

@@ -611,6 +611,63 @@ class NativeSelectElement extends HTMLElement {
         this._options.optionRenderer = renderer;
         this.render();
     }
+    /**
+     * Public API: setItems() method for compatibility with EnhancedSelect
+     * Accepts an array of items which can be:
+     * - Simple primitives (string, number)
+     * - Objects with {label, value} structure
+     * - Objects with {label, value, optionComponent} for custom rendering (v1.2.0+)
+     */
+    setItems(items) {
+        this.items = items ?? [];
+    }
+    /**
+     * Public API: setValue() method to programmatically select an item
+     * For single select: clears selection and selects the item matching the value
+     * For multi-select: adds to selection if not already selected
+     */
+    setValue(value) {
+        if (value === null || value === undefined || value === '') {
+            // Clear selection
+            this._selectedSet.clear();
+            this._selectedItems.clear();
+            this._activeIndex = -1;
+            this.render();
+            return;
+        }
+        // Find item by value
+        const index = this._items.findIndex(item => {
+            if (typeof item === 'object' && item !== null && 'value' in item) {
+                return item.value === value;
+            }
+            return item === value;
+        });
+        if (index >= 0) {
+            const item = this._items[index];
+            if (!this._multi) {
+                // Single select: clear and set
+                this._selectedSet.clear();
+                this._selectedItems.clear();
+            }
+            this._selectedSet.add(index);
+            this._selectedItems.set(index, item);
+            this._activeIndex = index;
+            this.render();
+        }
+    }
+    /**
+     * Public API: getValue() method to get currently selected value(s)
+     * Returns single value for single-select, array for multi-select
+     */
+    getValue() {
+        const values = Array.from(this._selectedItems.values()).map(item => {
+            if (typeof item === 'object' && item !== null && 'value' in item) {
+                return item.value;
+            }
+            return item;
+        });
+        return this._multi ? values : (values[0] ?? null);
+    }
     render() {
         const { optionTemplate, optionRenderer } = this._options;
         const viewportHeight = this.getBoundingClientRect().height || 300;
@@ -638,7 +695,11 @@ class NativeSelectElement extends HTMLElement {
                     node.replaceChildren(el ?? document.createTextNode(String(item)));
                 }
                 else {
-                    node.textContent = String(item);
+                    // Handle {label, value} objects or primitives
+                    const displayText = (typeof item === 'object' && item !== null && 'label' in item)
+                        ? String(item.label)
+                        : String(item);
+                    node.textContent = displayText;
                 }
             });
             return;
@@ -664,7 +725,11 @@ class NativeSelectElement extends HTMLElement {
             }
             else {
                 const el = document.createElement('div');
-                el.textContent = String(item);
+                // Handle {label, value} objects or primitives
+                const displayText = (typeof item === 'object' && item !== null && 'label' in item)
+                    ? String(item.label)
+                    : String(item);
+                el.textContent = displayText;
                 el.setAttribute('data-selectable', '');
                 el.setAttribute('data-index', String(i));
                 this._applyOptionAttrs(el, i);
@@ -716,15 +781,23 @@ class NativeSelectElement extends HTMLElement {
         this.render();
         // Emit with all required fields
         const selected = this._selectedSet.has(index);
+        const value = item?.value ?? item;
+        const label = item?.label ?? String(item);
         this._emit('select', {
             item,
             index,
-            value: item?.value ?? item,
-            label: item?.label ?? String(item),
+            value,
+            label,
             selected,
             multi: this._multi
         });
-        this._announce(`Selected ${String(item)}`);
+        // Emit 'change' event for better React compatibility
+        this._emit('change', {
+            selectedItems: Array.from(this._selectedItems.values()),
+            selectedValues: Array.from(this._selectedItems.values()).map(i => i?.value ?? i),
+            selectedIndices: Array.from(this._selectedSet)
+        });
+        this._announce(`Selected ${label}`);
     }
     _onKeydown(e) {
         switch (e.key) {