jb-select 7.2.1 → 7.3.0

package/lib/jb-option/jb-option.ts

@@ -1,5 +1,6 @@
 import type { JBSelectWebComponent } from '../jb-select';
 import CSS from './jb-option.css';
+import CSSVariable from './variables.css';
 import { renderHTML } from "./render";
 import type { JBOptionElements } from "./types";
 import { removeCheckboxNodes } from './utils';
@@ -104,7 +105,7 @@ export class JBOptionWebComponent<TValue> extends HTMLElement {
       mode: "open",
       serializable: true
     });
-    const html = `<style>${CSS}</style>\n${renderHTML()}`;
+    const html = `<style>${CSSVariable} \n ${CSS}</style>\n${renderHTML()}`;
     const element = document.createElement("template");
     element.innerHTML = html;
     shadowRoot.appendChild(element.content.cloneNode(true));
@@ -139,6 +140,7 @@ export class JBOptionWebComponent<TValue> extends HTMLElement {
         this.#value = value as TValue;
     }
   }
+
   #onOptionClick() {
     if (this.#isChangeCalled) {
       this.#isChangeCalled = false;
@@ -158,6 +160,13 @@ export class JBOptionWebComponent<TValue> extends HTMLElement {
       }
     }
   }
+  /**
+   * @public
+   * this function used by jb-select to toggle option when it active and user hit enter to select or deselect option
+   */
+  toggleOption(){
+    this.#onOptionClick();
+  }
   #dispatchSelectEvent() {
     const event = new Event("select", { bubbles: true, cancelable: false, composed: true });
     this.dispatchEvent(event);
@@ -183,6 +192,18 @@ export class JBOptionWebComponent<TValue> extends HTMLElement {
       }
     }
   }
+  #active = false;
+  get active(){
+    return this.#active;
+  }
+  set active(value:boolean){
+    this.#active = value;
+    if(value){
+      this.#internals?.states.add("active");
+    }else{
+      this.#internals?.states.delete("active");
+    }
+  }
 
 }
 const myElementNotExists = !customElements.get("jb-option");

package/lib/jb-option/variables.css

@@ -1,5 +1,12 @@
 :host{
-  --background-color:var(--jb-select-option-background-color, transparent);
-  --background-color-hover:var(--jb-select-option-background-color-hover, #1073db);
-  --option-color-hover:var(--jb-select-option-color-hover, #fff);
+  /*Sizes*/
+  --border-radius:var(--jb-option-border-radius, 0);
+  --padding: var(--jb-option-padding, 0.5rem 1rem);
+  --font-size: var(--jb-option-font-size, 0.9rem);
+  --min-height: var(--jb-option-min-height, 2.25rem);
+  /*Colors*/
+  --color: var(--jb-option-color, inherit);
+  --color-active: var(--jb-option-color-active, var(--jb-option-color, inherit));
+  --background-color:var(--jb-option-background-color, transparent);
+  --background-color-active:var(--jb-option-background-color-active, var(--jb-primary-subtle));
 }

package/lib/jb-option-list/jb-option-list.ts

@@ -23,6 +23,9 @@ export class JBOptionListWebComponent<TOption, TValue> extends HTMLElement {
     this.#optionList = value;
     this.#initOptionList(value);
   }
+  get optionListDom(){
+    return Array.from(this.#optionPairMap.values());
+  }
   constructor() {
     super();
     this.#initWebComponent();

package/lib/jb-select.css

@@ -213,6 +213,7 @@
 
   .popover-wrapper {
     position: relative;
+    --jb-popover-padding: 0;
 
     .select-list-wrapper {
       @media(--tablet-from) {

package/lib/jb-select.ts

@@ -19,6 +19,7 @@ import { dictionary } from "./i18n";
 import { i18n } from "jb-core/i18n";
 import type { JBButtonWebComponent } from "jb-button";
 import { JBPopoverWebComponent } from "jb-popover";
+import { JBOptionListWebComponent } from "./jb-option-list/jb-option-list";
 
 //TODO: add IncludeInputInList or freeSolo so user can select item that he wrote without even it exist in select list
 //TODO: handleHomeEndKeys to move focus inside the popup with the Home and End keys.
@@ -57,6 +58,21 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
     if (value === undefined) return;
     this.#popoverPosition = value;
   }
+  /**
+  * this is a expensive option list please use it when you really need optionList with order
+  */
+  get optionListWithOrder(): JBOptionWebComponent<TValue>[] {
+    const elements = this.elements.optionListSlot.assignedElements();
+    const optionList = elements.flatMap(x => {
+      // extract option list from JBOptionList to make option list flat by index
+      if (x instanceof JBOptionListWebComponent) {
+        return x.optionListDom;
+      } else {
+        return x
+      }
+    }).filter(x => (x instanceof JBOptionWebComponent && !x.hidden));
+    return optionList as JBOptionWebComponent<TValue>[];
+  }
   get multiple() {
     return this.hasAttribute('multiple')
   }
@@ -379,15 +395,15 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
     } else if (this.value) {
       this.#setValueFromOutside(this.value);
     }
-    if (this.multiple && Array.isArray(this.#value) && this.#selectedOptions.values.length< this.#value.length) {
+    if (this.multiple && Array.isArray(this.#value) && this.#selectedOptions.values.length < this.#value.length) {
       //in this particular edge case our value is already set but some option maybe missing in first place and added later
-      const missing:JBOptionWebComponent<TValue>[] = [];
-      this.#optionList.forEach((op)=>{
-        if(op.selected == false && (this.#value as unknown[]).includes(op.value)){
+      const missing: JBOptionWebComponent<TValue>[] = [];
+      this.#optionList.forEach((op) => {
+        if (op.selected == false && (this.#value as unknown[]).includes(op.value)) {
           missing.push(op);
         }
       });
-      if(missing.length>0){
+      if (missing.length > 0) {
         this.#setSelectedOption(missing);
       }
     }
@@ -503,6 +519,8 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
     const event = createKeyboardEvent("keypress", e, {})
     this.dispatchEvent(event);
   }
+
+
   #onInputBeforeInput(_e: InputEvent) {
     // const inputtedText = e.data || "";
     //TODO: add cancelable event dispatch here
@@ -526,9 +544,60 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
       //because on keypress dont receive backspace key press
       this.#handleSelectedValueDisplay(inputText);
     }
-
+    switch (e.key) {
+      case "ArrowUp":
+        this.#activePrevOption();
+        break;
+      case "ArrowDown":
+        this.#activeNextOption();
+        break;
+      case "Enter":
+        this.#optionList.forEach(x => {
+          if (x.active) {x.toggleOption();}
+        })
+        break;
+    }
     this.#triggerOnInputKeyup(e);
   }
+  /**
+* used when change activeItem with arrow keys 
+*/
+  #activePrevOption() {
+    const optionList = this.optionListWithOrder;
+    const activeOption = optionList.find((option, index) => {
+      if (option.active) {
+        if (optionList[index - 1]) {
+          option.active = false;
+          optionList[index - 1].active = true;
+          optionList[index - 1].scrollIntoView({ block: "nearest" });
+        }
+        return true;
+      }
+      return false
+    });
+    if (!activeOption && optionList[optionList.length - 1]) {
+      optionList[optionList.length - 1].active = true;
+      optionList[optionList.length - 1].scrollIntoView({ block: "nearest" });
+    }
+  }
+  /**
+  * used when change activeItem with arrow keys 
+  */
+  #activeNextOption() {
+    const optionList = this.optionListWithOrder;
+    const activeOption = optionList.find((option, index) => {
+      if (option.active) {
+        if (optionList[index + 1]) {
+          option.active = false;
+          optionList[index + 1].active = true;
+          optionList[index + 1].scrollIntoView({ block: "nearest" });
+        }
+        return true;
+      }
+      return false
+    });
+    if (!activeOption && optionList[0]) { optionList[0].active = true; optionList[0].scrollIntoView({ block: "nearest" }) }
+  }
   #handleSelectedValueDisplay(inputValue: string) {
     if (inputValue !== "") {
       this.elements.selectedValueWrapper.classList.add("--search-typed");
@@ -599,6 +668,7 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
       }
     }
     this.elements.input.blur();
+    this.#optionList.forEach(x => { x.active = false })
   }
   #showOptionList() {
     this.#internals.states.add("open")
@@ -637,13 +707,13 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
     target.selected = false;
     this.#selectedOptions.delete(e.target as JBOptionWebComponent<TValue>)
     this.#updateSelectedOptionDom();
-    if(Array.isArray(this.#value)){
+    if (Array.isArray(this.#value)) {
       const index = this.#value.indexOf(target.value);
-      if(index !== -1) this.#value.splice(index,1);
-    }else if(this.value === target.value){
+      if (index !== -1) this.#value.splice(index, 1);
+    } else if (this.value === target.value) {
       this.#value = null;
     }
-    this.#value=this.#value
+    this.#value = this.#value
     this.#checkValidity(true);
   }
   //called when an jb-Option connected to the dom
@@ -657,6 +727,7 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
       this.#setValueOnOptionListChanged();
     }
     this.#updateListEmptyPlaceholder();
+    target.addEventListener("mouseenter",this.#onOptionHover)
   }
   #onOptionDisconnected(e: CustomEvent) {
     e.stopPropagation();
@@ -666,14 +737,21 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
     if (target.value == this.#value) {
       this.#setValueOnOptionListChanged();
     }
+    target.removeEventListener("mouseenter",this.#onOptionHover)
+  }
+  #onOptionHover = (e:MouseEvent)=>{
+    const target = e.target as JBOptionWebComponent<TValue>;
+    if(!target.active){
+      this.#optionList.forEach(x=>{x.active = false});
+    }
+    target.active = true;
   }
-
   #selectOption(value: TValue, optionDom: JBOptionWebComponent<TValue>) {
-    if(this.multiple){
-      if(Array.isArray(this.#value)){
-        value = [...this.#value,value] as TValue
-      }else{
-        value = [this.#value,value] as TValue
+    if (this.multiple) {
+      if (Array.isArray(this.#value)) {
+        value = [...this.#value, value] as TValue
+      } else {
+        value = [this.#value, value] as TValue
       }
     }
     this.#setValue(value, optionDom);

package/package.json

@@ -16,7 +16,7 @@
     "web component",
     "react component"
   ],
-  "version": "7.2.1",
+  "version": "7.3.0",
   "bugs": "https://github.com/javadbat/jb-select/issues",
   "homepage": "https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect",
   "license": "MIT",
@@ -37,7 +37,7 @@
   "dependencies": {
     "jb-validation": ">=0.4.0",
     "jb-button": ">=3.9.1",
-    "jb-popover": ">=1.7.1",
+    "jb-popover": ">=1.12.0",
     "jb-core":">=0.27.2"
   },
   "devDependencies": {