@nectary/components 4.2.0 → 4.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "files": [
     "**/*/*.css",
     "**/*/*.json",

package/select-menu/index.js

@@ -1,8 +1,9 @@
 import '../input';
 import '../icon';
 import '../text';
+import { isSelectMenuOption } from '../select-menu-option/utils';
 import { attrValueToPixels, defineCustomElement, getAttribute, getBooleanAttribute, unpackCsv, getFirstCsvValue, getIntegerAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv, updateExplicitBooleanAttribute, updateIntegerAttribute, debounceTimeout, setClass, subscribeContext, hasClass, isTargetEqual } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#listbox{overflow-y:auto}#search{display:none;margin:10px}#search.active{display:block}#search-clear:not(.active){display:none}#not-found{display:flex;align-items:center;justify-content:center;width:100%;height:30px;margin-bottom:10px;pointer-events:none;user-select:none;--sinch-comp-text-font:var(--sinch-comp-select-menu-font-not-found-text);--sinch-global-color-text:var(--sinch-comp-select-menu-color-default-not-found-text-initial)}#not-found:not(.active){display:none}::slotted(.hidden){display:none}</style><sinch-input id="search" size="s" placeholder="Search"><sinch-icon icons-version="2" name="magnifying-glass" id="icon-search" slot="icon"></sinch-icon><sinch-button id="search-clear" slot="right"><sinch-icon icons-version="2" name="fa-xmark" slot="icon"></sinch-icon></sinch-button></sinch-input><div id="not-found"><sinch-text type="m">No results</sinch-text></div><div id="listbox" role="presentation"><slot></slot></div>';
+const templateHTML = '<style>:host{display:block;outline:0}#listbox{overflow-y:auto}#search{display:none;margin:10px}#search.active{display:block}#search-clear:not(.active){display:none}#not-found{display:flex;align-items:center;justify-content:center;width:100%;height:30px;margin-bottom:10px;pointer-events:none;user-select:none;--sinch-comp-text-font:var(--sinch-comp-select-menu-font-not-found-text);--sinch-global-color-text:var(--sinch-comp-select-menu-color-default-not-found-text-initial)}#not-found:not(.active){display:none}::slotted(.hidden){display:none}::slotted(sinch-title){padding:8px 16px;--sinch-global-color-text:var(--sinch-comp-select-menu-color-default-title-initial)}</style><sinch-input id="search" size="s" placeholder="Search"><sinch-icon icons-version="2" name="magnifying-glass" id="icon-search" slot="icon"></sinch-icon><sinch-button id="search-clear" slot="right"><sinch-icon icons-version="2" name="fa-xmark" slot="icon"></sinch-icon></sinch-button></sinch-input><div id="not-found"><sinch-text type="m">No results</sinch-text></div><div id="listbox" role="presentation"><slot></slot></div>';
 const ITEM_HEIGHT = 40;
 const NUM_ITEMS_SEARCH = 7;
 const template = document.createElement('template');
@@ -70,9 +71,12 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
         }
       case 'rows':
         {
+          const numberOfItems = this.#$optionSlot.assignedElements().length;
+          const maxNumberOfRows = parseInt(newVal ?? '0', 10);
           this.#$listbox.style.maxHeight = attrValueToPixels(newVal, {
             min: 2,
-            itemSizeMultiplier: ITEM_HEIGHT
+            itemSizeMultiplier: ITEM_HEIGHT,
+            addExtraSpace: numberOfItems > maxNumberOfRows
           });
           break;
         }
@@ -142,6 +146,9 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
   };
   #onListboxClick = e => {
     const $elem = e.target;
+    if ($elem == null || !($elem instanceof Element) || !isSelectMenuOption($elem)) {
+      return;
+    }
     this.focus();
     if (!isTargetEqual(e, this.#$listbox) && !getBooleanAttribute($elem, 'disabled')) {
       this.#selectOption($elem);
@@ -231,7 +238,7 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
   }
   #onOptionSlotChange = () => {
     const searchable = this.searchable;
-    const options = this.#$optionSlot.assignedElements();
+    const options = this.#getOptionElements();
     const isEnoughOptions = options.length >= NUM_ITEMS_SEARCH;
     const isSearchActive = isEnoughOptions && searchable !== false || Boolean(searchable);
     if (!isSearchActive) {
@@ -314,7 +321,8 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
     }
   }
   #getOptionElements() {
-    return this.#$optionSlot.assignedElements();
+    const assignedElements = this.#$optionSlot.assignedElements();
+    return assignedElements.filter(isSelectMenuOption);
   }
   #getSelectedOptionIndex() {
     const elements = this.#getOptionElements();

package/select-menu-option/utils.d.ts

@@ -0,0 +1,2 @@
+import type { TSinchSelectMenuOptionElement } from './types';
+export declare const isSelectMenuOption: (el: Element) => el is TSinchSelectMenuOptionElement;

package/select-menu-option/utils.js

@@ -0,0 +1 @@
+export const isSelectMenuOption = el => el.localName === 'sinch-select-menu-option';

package/utils/dom.d.ts

@@ -17,6 +17,7 @@ type IntegerOptions = {
     defaultValue?: number | null;
     itemSizeMultiplier?: number;
     itemSpaceBetween?: number;
+    addExtraSpace?: boolean;
 };
 export declare const attrValueToInteger: (value: string | null, options?: IntegerOptions) => number | null;
 export declare const attrValueToPixels: (value: string | null, options?: IntegerOptions) => string;

package/utils/dom.js

@@ -72,7 +72,8 @@ export const attrValueToInteger = function (value) {
   const {
     defaultValue = null,
     itemSizeMultiplier = 1,
-    itemSpaceBetween = 0
+    itemSpaceBetween = 0,
+    addExtraSpace = false
   } = options;
   let intValue = defaultValue;
   if (value !== null) {
@@ -82,7 +83,7 @@ export const attrValueToInteger = function (value) {
     }
   }
   if (intValue !== null) {
-    return intValue * itemSizeMultiplier + Math.max(intValue - 1, 0) * itemSpaceBetween;
+    return intValue * itemSizeMultiplier + Math.max(intValue - 1, 0) * itemSpaceBetween + (addExtraSpace ? 0.5 * itemSizeMultiplier : 0);
   }
   return null;
 };