tyrell-components 1.0.0-RC14 → 1.0.0-RC15

package/lib/components/select.d.ts

@@ -106,11 +106,10 @@ export declare class TySelect extends TyComponent<SelectState> {
             };
             coerce: (v: any) => "none" | "slug";
         };
-        searchable: {
-            type: "string";
+        notSearchable: {
+            type: "boolean";
             visual: boolean;
-            default: string;
-            coerce: (v: any) => "auto" | "always" | "never";
+            default: boolean;
         };
         align: {
             type: "string";
@@ -127,7 +126,7 @@ export declare class TySelect extends TyComponent<SelectState> {
         size: {
             type: "string";
             visual: boolean;
-            default: string;
+            default: Size;
             validate: (v: any) => boolean;
             coerce: (v: any) => any;
         };
@@ -142,6 +141,11 @@ export declare class TySelect extends TyComponent<SelectState> {
             visual: boolean;
             default: string;
         };
+        "selected-label": {
+            type: "string";
+            visual: boolean;
+            default: string;
+        };
         "no-options-message": {
             type: "string";
             visual: boolean;
@@ -170,11 +174,12 @@ export declare class TySelect extends TyComponent<SelectState> {
     private _externalSearch;
     private _allowCreate;
     private _createTransform;
-    private _searchable;
+    private _notSearchable;
     private _loading;
     private _scrollLockId;
     private _size;
     private _availableLabel;
+    private _selectedLabel;
     private _noOptionsMessage;
     private _state;
     private _stubClickHandler;
@@ -208,6 +213,29 @@ export declare class TySelect extends TyComponent<SelectState> {
     private parseValue;
     /** Initialize component state from the value property / pre-selected children. */
     private initializeState;
+    /**
+     * Declarative init: no `value` attribute, but markup pre-marked one or more
+     * options `selected` — native <select> semantics. This is the ONE place
+     * selection is read FROM the DOM rather than treated as a rendering of
+     * state (see getSelectedValues()): it seeds initial state, once. After
+     * this, `value` rules — flipping an option's `selected` property later
+     * does nothing, same as native.
+     *
+     * Called from initializeState() at connect AND from the child observer:
+     * a real HTML parser upgrades a custom element the moment its start tag is
+     * seen, BEFORE its children exist — `<ty-select>` connects with zero
+     * `<ty-option>` children when it's part of the page's own markup (as
+     * opposed to an already-built fragment attached via innerHTML/appendChild,
+     * where children exist at connect). Calling this only at connect would
+     * silently miss every option parsed after that instant, which is the
+     * common case for markup that is literally in the page's initial HTML.
+     *
+     * Safe to call repeatedly: no-ops once `value` has ever been explicitly
+     * set (attribute or property) or state is already non-empty — including
+     * after a real `.clear()`, which removes `selected` from every option via
+     * syncSelectedTags, so there is nothing left here to (re-)seed from.
+     */
+    private resolveDeclarativeSelection;
     /**
      * Get all option elements from the component (ty-option preferred, ty-tag accepted)
      */
@@ -223,7 +251,15 @@ export declare class TySelect extends TyComponent<SelectState> {
      */
     private deselectTag;
     /**
-     * Get array of currently selected values from tags (ALWAYS reads from DOM)
+     * Get the array of currently selected values.
+     *
+     * Reads STATE (`_state.selectedValues`), not the DOM: `value` is the
+     * selection, and an option's `selected` attribute is a rendering of it
+     * (written by syncSelectedTags below), never the other way round. This
+     * matters whenever options don't fully reflect the selection — external
+     * search legitimately has a selected value with no matching option
+     * present; a DOM scan would report empty and desync .value, `required`
+     * validation and the click-toggle logic from what's actually selected.
      */
     private getSelectedValues;
     private syncSelectedTags;
@@ -299,6 +335,13 @@ export declare class TySelect extends TyComponent<SelectState> {
     private blockSearchClick;
     private handleSearchInput;
     private handleKeyboard;
+    /**
+     * Next tag index in `direction` (-1/1) that isn't disabled, wrapping
+     * around — mirrors handleTagClick's disabled check so keyboard nav can
+     * never land on/select what a click already refuses to. Returns -1 if
+     * every tag is disabled (or there are none).
+     */
+    private nextEnabledTagIndex;
     private filterTags;
     private updateTagVisibility;
     private updateOptionsVisibility;
@@ -340,9 +383,25 @@ export declare class TySelect extends TyComponent<SelectState> {
     private handleMobileTagClick;
     private updateMobileSelectedState;
     /**
-     * Should the popup show a search row? external-search always (the input is
-     * the mechanism); searchable always/never wins otherwise; 'auto' shows it
-     * only when the option list is long enough to need filtering.
+     * Hand the dialog's spare vertical space to one section or the other. Only
+     * one can own it: on a phone there isn't enough height for two scrollable
+     * lists to both be usefully tall, so tapping a header trades the space
+     * rather than splitting it. Selecting from the list hands it back to
+     * "available" — you're still picking, so that's the list you want open.
+     */
+    private expandMobileSection;
+    /**
+     * The selected values as dismissible chips, pinned above the available
+     * list so a long list can never scroll the current selection out of sight.
+     * Rebuilt wholesale: the strip is small, and diffing it would have to
+     * track chip identity for the sake of a handful of nodes.
+     */
+    private renderMobileSelectedChips;
+    /**
+     * Should the popup show a search row? external-search/allow-create pin it
+     * on (the input is the only way to get a query out at all), not-searchable
+     * forces it off, and otherwise it follows the list: shown once there are
+     * more options than fit without scrolling.
      */
     private shouldShowSearch;
     /**
@@ -400,8 +459,8 @@ export declare class TySelect extends TyComponent<SelectState> {
     set clearable(value: boolean);
     get required(): boolean;
     set required(value: boolean);
-    get searchable(): "auto" | "always" | "never";
-    set searchable(value: "auto" | "always" | "never" | boolean);
+    get notSearchable(): boolean;
+    set notSearchable(value: boolean);
     get externalSearch(): boolean;
     set externalSearch(value: boolean);
     get debounce(): number;