@ekzo-dev/bootstrap-addons 5.2.25 → 5.2.27

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ekzo-dev/bootstrap-addons",
   "description": "Aurelia Bootstrap additional component",
-  "version": "5.2.25",
+  "version": "5.2.27",
   "homepage": "https://github.com/ekzo-dev/aurelia-components/tree/main/packages/bootstrap-addons",
   "repository": {
     "type": "git",
@@ -9,7 +9,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@ekzo-dev/bootstrap": "^5.2.19",
+    "@ekzo-dev/bootstrap": "^5.2.20",
     "@ekzo-dev/vanilla-jsoneditor": "^0.23.7",
     "@ekzo-dev/toolkit": "^1.2.4",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
@@ -21,7 +21,9 @@
     "immutable-json-patch": "^5.1.3"
   },
   "peerDependencies": {
-    "bootstrap": "^5.2.3"
+    "aurelia": "^2.0.0-beta.8",
+    "bootstrap": "^5.2.3",
+    "@popperjs/core": "^2.11.8"
   },
   "main": "src/index.ts",
   "files": [

package/src/forms/select/select.html

@@ -40,12 +40,12 @@
       ref="control"
     />
     <button
-      if.bind="emptyOption && selectedOption?.value !== emptyOption?.value"
+      if.bind="emptyOption && selectedOption?.value !== emptyOption?.value && !disabled"
       bs-close-button
       type="button"
       click.trigger="selectOption(emptyOption)"
     ></button>
-    <bs-dropdown-menu>
+    <bs-dropdown-menu popper-config.bind="popperConfig">
       <div bs-dropdown-item="text" if.bind="optionsCount > 10">
         <input class="form-control" placeholder="Filter options" type="search" value.bind="filter & debounce:250" />
       </div>
@@ -53,7 +53,8 @@
       <button
         type="button"
         repeat.for="option of ungroupedOptions | filter:filter:emptyOption"
-        bs-dropdown-item="active.bind: option.value === selectedOption?.value; disabled.bind: option.disabled"
+        class="dropdown-item ${option.value === selectedOption?.value ? 'active' : ''}"
+        disabled.bind="option.disabled"
         click.trigger="selectOption(option)"
       >
         ${option.text || '&nbsp;'}
@@ -61,10 +62,10 @@
       <template repeat.for="[k, v] of groupedOptions | filter:filter:emptyOption">
         <h6 bs-dropdown-item="header">${k}</h6>
         <button
-          class="ps-4"
           type="button"
           repeat.for="option of v"
-          bs-dropdown-item="active.bind: option.value === selectedOption?.value; disabled.bind: option.disabled"
+          class="ps-4 dropdown-item ${option.value === selectedOption?.value ? 'active' : ''}"
+          disabled.bind="option.disabled"
           click.trigger="selectOption(option)"
         >
           ${option.text || '&nbsp;'}

package/src/forms/select/select.scss

@@ -10,6 +10,7 @@ bs-select {
   }
 
   &:has(.btn-close) .form-select {
+    margin-bottom: -0.8rem;
     padding-right: 4rem;
   }
 
@@ -19,20 +20,20 @@ bs-select {
     box-sizing: border-box;
     width: 0.8rem;
     height: 0.8rem;
-    top: calc(-1px - 1.5rem);
+    top: calc(-1px - 0.7rem);
     left: calc(100% - 3.25rem);
   }
 
   .form-select-lg + .btn-close {
-    top: calc(-1px - 1.8rem);
+    top: calc(-1px - 1rem);
   }
 
   .form-select-sm + .btn-close {
-    top: calc(-1px - 1.3rem);
+    top: calc(-1px - 0.5rem);
   }
 
   &.form-floating .btn-close {
-    top: calc(-1px - 2.15rem) !important;
+    top: calc(-1px - 1.35rem) !important;
   }
 
   .dropdown-menu {

package/src/forms/select/select.stories.ts

@@ -1,3 +1,4 @@
+import { BsButton, BsOffcanvas } from '@ekzo-dev/bootstrap';
 import { extractArgTypes, Meta, Story } from '@storybook/aurelia';
 
 import { selectControl } from '../../../../../.storybook/helpers';
@@ -47,7 +48,8 @@ Multiple.args = {
 
 const LargeOptions: Story = (args) => ({
   props: args,
-  template: '<bs-select value.bind="value" options.bind="options" label.bind="label" style="width: 400px"></bs-select>',
+  template:
+    '<bs-select value.bind="value" options.bind="options" label.bind="label" style="width: 400px; max-width: 100%"></bs-select>',
 });
 
 LargeOptions.args = {
@@ -57,5 +59,23 @@ LargeOptions.args = {
   })),
 };
 
+const InModal: Story = (args) => ({
+  props: args,
+  template: `
+<button bs-button click.trigger="offcanvas.toggle()">Open modal</button>
+<bs-offcanvas component.ref="offcanvas">
+  <bs-select value.bind="value" options.bind="options" label.bind="label" style="width: 100%"></bs-select>
+  <div style="height: 2000px"></div>
+</bs-offcanvas>`,
+  components: [BsOffcanvas, BsButton],
+});
+
+InModal.args = {
+  options: Array.from({ length: 1000 }).map((v, i) => ({
+    value: i.toString(),
+    text: `Option ${i} has long content which forces dropdown menu to scale larger that select box`,
+  })),
+};
+
 // eslint-disable-next-line
-export { Overview, Multiple, LargeOptions };
+export { Overview, Multiple, LargeOptions, InModal };

package/src/forms/select/select.ts

@@ -2,6 +2,9 @@ import template from './select.html';
 
 import './select.scss';
 
+import type { Options } from '@popperjs/core';
+import type { Tooltip } from 'bootstrap';
+
 import {
   BsCloseButton,
   BsDropdown,
@@ -11,7 +14,7 @@ import {
   BsSelect as BaseBsSelect,
   ISelectOption,
 } from '@ekzo-dev/bootstrap';
-import { bindable, customElement, ICustomElementViewModel } from 'aurelia';
+import { bindable, customElement, ICustomElementViewModel, resolve } from 'aurelia';
 
 import { Filter } from './filter';
 
@@ -29,6 +32,8 @@ export class BsSelect extends BaseBsSelect implements ICustomElementViewModel {
   @bindable()
   emptyValue?: unknown = null;
 
+  host = resolve(HTMLElement);
+
   control!: HTMLFieldSetElement;
 
   filter: string = '';
@@ -39,6 +44,8 @@ export class BsSelect extends BaseBsSelect implements ICustomElementViewModel {
 
   emptyOption?: ISelectOption;
 
+  popperConfig: Partial<Options> | Tooltip.PopperConfigFunction | null = null;
+
   binding() {
     super.binding();
     this.deactivating = false;
@@ -53,6 +60,8 @@ export class BsSelect extends BaseBsSelect implements ICustomElementViewModel {
       this.#setHeight();
       this.#scrollToSelected();
     }
+
+    this.setPopperConfig();
   }
 
   propertyChanged(name: keyof this) {
@@ -68,6 +77,24 @@ export class BsSelect extends BaseBsSelect implements ICustomElementViewModel {
     }
   }
 
+  setPopperConfig() {
+    if (this.multiple) return;
+
+    const { host } = this;
+    const parentModal = host.closest('.modal-body,.popover-body,.offcanvas-body');
+    const dropdownMenu: HTMLElement = host.querySelector('.dropdown-menu');
+
+    if (parentModal != null) {
+      this.popperConfig = {
+        strategy: 'fixed',
+      };
+      dropdownMenu.style.minWidth = `${host.offsetWidth}px`;
+    } else {
+      this.popperConfig = null;
+      dropdownMenu.style.minWidth = undefined;
+    }
+  }
+
   selectOption(option: ISelectOption) {
     this.value = option.value;
     this.#dispatchEvents();